Project_yhfu/src/views/leader.vue

<template>
  <div class="visual-con">
    <!--头部-->
    <vheader></vheader>
    <!--主体-->
    <div class="visual-body">
      <!-- 左侧 -->
      <div class="leftbar" :class="indentleft" ref="left">
        <div class="forthis">
          <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">
            <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;" />
            <div class="this-title">
              <span>人员分布</span>
              <dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;" />
            </div>
            <div class="i-list-con h-25">
              <div id="personnel-chart" style="width: 100%;height:12vh;"></div>
              <div class="d-l-con-icon">
                <div class="icon-con w-50" :class="{on:iconCurrentIndex1==item.dictType}"
                  v-for="(item,index) in visuForestCloudRYBO" @click="getRyListByJob(item.dictType)">
                  <div class="icon icon-mid el-icon-user"></div>
                  <div class="icon-text">
                    <h5>{{ item.job }}</h5>
                    <h6>{{ item.number }}</h6>
                  </div>
                </div>
                <!-- <div class="icon-con w-50  m-btm-no" :class="{on:listCurrentIndex1==item.jobType}" v-for="(item,index) in visuForestCloudRYBO" v-if="index%2!=0" @click="getTrafficLeader(item.jobValue,item.jobType)">
                <div class="icon icon-mid el-icon-user"></div>
                <div class="icon-text">
                  <h5>{{item.job}}</h5>
                  <h6>{{item.number}}</h6>
                </div>
              </div> -->
              </div>
            </div>
          </dv-border-box-13>
        </div>
        <!--        avatar: ""-->
        <!--        deptName: "锦程社区第一网格"-->
        <!--        nickName: "李猛"-->
        <!--        userId: 102-->
        <!--        userName: "limeng"-->
        <div class="forthis">
          <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">
            <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;" />
            <div class="i-list-con h-27">
              <el-input v-model="name" placeholder="请输入姓名" clearable size="small" prefix-icon="el-icon-search"
                style="margin-bottom: 20px" />
              <div class="d-l-con-icon">
                <div class="icon-con" :class="{on:listCurrentIndex1==item.userId}" v-for="(item,index) in peopleList2"
                  @click="getPlanList(item.userId)">
                  <div class="icon icon-mid el-icon-user"></div>
                  <div class="icon-text personnel-name">
                    <h6>{{ item.name }} <span v-if="item.phone != undefined"> - {{ item.phone }}</span></h6>
                    <h5>{{ item.deptName }}</h5>
                  </div>
                </div>
              </div>
            </div>
          </dv-border-box-13>
        </div>
      </div>
      <!-- 地图 -->
      <!--			<supermap ref="supermap" style="width: 100%;height: 100vh;" :mapDiv="'forestMap'" class="indexSupermapClass"-->
      <!--				:mapSite="{doubleClickZoom:false}" :codes="['9fa5']" :isSideBySide="false"></supermap>-->
      <supermap ref="supermap" style="width: 100%;height: 100vh;"></supermap>
      <!-- 右侧 -->
      <div class="rightbar" :class="indentright" ref="right">
        <div class="forthis">
          <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">
            <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;" />
            <div class="this-title">
              <span>巡查任务</span>
              <dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;" />
            </div>
            <div class="i-list-con h-73">
              <div class="h-73 overflow-y">
                <el-collapse accordion>
                  <el-collapse-item v-for="(item,index) in xunLinListOne">
                    <template slot="title">
                      <div class="d-l-con sj-collapse" @click="getRecordList(item.id, item.patrolTrajectory)">
                        <div class="d-l-l-text">
                          <el-tooltip class="item" effect="dark" placement="left" style="width:10rem ;"
                            :disabled="(item.taskName.length <= 20)">
                            <div slot="content">
                              <h4 class="collapse-title" style="width: 200px;">
                                {{ item.taskName}}
                              </h4>
                            </div>
                            <h4 class="collapse-title" style="width: 100px;">
                              {{ item.taskName | ellipsis20}}
                            </h4>
                          </el-tooltip>
                        </div>
                        <div class="d-l-l-count">({{ item.recordCount }}/{{ item.planCount }})
                        </div>
                      </div>
                    </template>
                    <div class="d-l-con this-child sj-collapse" @click="getPointList(child.id)"
                      v-for="(child,index) in recordList">
                      <div class="d-l-l-text">
                        <h4>{{child.beginTime}} - {{child.endTime}}</h4>
                      </div>
                      <!--<div class="d-l-l-count">{{index}}</div>-->
                    </div>
                    <div class="d-l-con this-child sj-collapse"
                      v-if="showNothing && (recordList == null || recordList == '' || recordList == [])">
                      <div class="d-l-l-text">
                        <h4 class="text-gray">暂无信息</h4>
                      </div>
                    </div>
                  </el-collapse-item>
                </el-collapse>
                <!--<div class="d-l-con" :class="{on:listCurrentIndex2==item.planName}"
                     v-for="(item,index) in xunLinListOne"
                     @click="setConnectList(item.planLine,item.planName)">
                  <div class="d-l-l-text">
                    <i class="i-small"></i>
                    <h4>{{ item.planName }}</h4>
                  </div>
                </div>-->
              </div>
            </div>
          </dv-border-box-13>
        </div>


      </div>
      <vBottomMenu ref="bottomMenu"></vBottomMenu>
      <!--      <el-tooltip :content="indentText" placement="top" :disabled="indentdisabled">-->
      <!--        <div class="mascot" ref="mascot" :class="indentStyle" @click="indent">-->
      <!--          <img src="@/assets/images/mascot.png"/>-->
      <!--        </div>-->
      <!--      </el-tooltip>-->
    </div>
    <eventLocation ref="eventLocation"></eventLocation>
    <TVWall ref="TVWall"></TVWall>
  </div>
</template>

<script>
  import {
    getTrafficLeader,
    getPlanList,
    getRecordList,
    getPointList,
    getRy
  } from '@/api/leader'

  import supermap from '@/components/supermap-2.5d' //超图
  import vheader from '@/components/v-header.vue' //一体化共用头部
  import vBottomMenu from '@/components/vBottomMenu.vue' //一体化公共底部菜单
  import eventLocation from '@/components/eventLocation.vue' //事件定位弹窗
  import TVWall from '@/components/TVWall.vue' //电视墙弹窗
  import {
    getRyList,
    getRyListByJob
  } from "@/api/forest"; //电视墙弹窗
  let echarts = require('echarts')
  export default {
    components: {
      supermap,
      vheader,
      vBottomMenu,
      eventLocation,
      TVWall
    },
    data() {
      return {
        iconCurrentIndex1: '1',
        listCurrentIndex1: '',
        listCurrentIndex2: '',
        //左右缩进
        indentStyle: '',
        indentleft: '',
        indentright: '',
        indentText: '收起左右栏',
        indentdisabled: false,
        visuForestCloudRYBO: [], //人员类型列表
        personId: null, //人员
        peopleList: [], //人员列表
        name: '',
        peopleList2: [], //人员列表
        connectList: [], //画线
        patrolTrajectory: null, //任务画线
        xunLinListOne: [], //巡查任务
        recordList: [], //巡查记录
        showNothing: false, //暂无信息
        zrs: 0, //总人数
        zxrs: 0 //在线人数
      }
    },
    created() {
      this.getRyList()
      //this.getInit()
      /** ----------------------------------底部按钮公用组件开始------------------------------------- */
      window.showDialog = this.showDialog
      window.choseLayerSwitching = this.choseLayerSwitching
      window.choseLayerSwitchingList = this.choseLayerSwitchingList
      window.choseLayerSwitchingList_Data = this.choseLayerSwitchingList_Data
      /** ----------------------------------底部按钮公用组件结束------------------------------------- */
    },
    mounted() {
      this.bottomMenuList() //获取底部公共组件消息和任务
    },
    watch: {
      name(val) {
        this.peopleList2 = [];

        for (let i in this.peopleList) {
          if (this.peopleList[i].name.indexOf(val) != -1) {
            this.peopleList2.push(this.peopleList[i]);
          }
        }
        console.log(this.peopleList2)
      }
    },
    methods: {
      /** ----------------------------------底部按钮公用组件开始------------------------------------- */
      bottomMenuList() {
        this.$refs.bottomMenu.selectMessageList() //获取消息列表
      },
      showDialog(click) {
        if (click == 'eventLocation') {
          this.$refs.eventLocation.showEventLocation()
          this.$refs.supermap.isEditableLayers = false
          this.$refs.bottomMenu.showChild = false
          this.$refs.bottomMenu.showBanChild = false
          this.$refs.bottomMenu.showChangChild = false
        } else if (click == 'editableLayers') {
          this.$refs.bottomMenu.showChild = false
          this.$refs.bottomMenu.showBanChild = false
          this.$refs.bottomMenu.showChangChild = false
          if (!this.$refs.supermap.isEditableLayers) {
            this.$refs.supermap.isEditableLayers = true
          } else {
            this.$refs.supermap.isEditableLayers = false
          }
        } else if (click == 'layerSwitching') {
          this.$refs.supermap.isEditableLayers = false
          this.$refs.bottomMenu.showBanChild = false
          this.$refs.bottomMenu.showChangChild = false
          if (!this.$refs.bottomMenu.showChild) {
            this.$refs.bottomMenu.showChild = true
          } else {
            this.$refs.bottomMenu.showChild = false
          }
        } else if (click == 'TVWall') {
          this.$refs.TVWall.showTVWall()
          this.$refs.supermap.isEditableLayers = false
          this.$refs.bottomMenu.showChild = false
          this.$refs.bottomMenu.showBanChild = false
          this.$refs.bottomMenu.showChangChild = false
        } else if (click == 'forestban') {
          this.$refs.supermap.isEditableLayers = false
          this.$refs.bottomMenu.showChild = false
          this.$refs.bottomMenu.showChangChild = false
          if (!this.$refs.bottomMenu.showBanChild) {
            this.$refs.bottomMenu.showBanChild = true
          } else {
            this.$refs.bottomMenu.showBanChild = false
          }
        } else if (click == 'forestchang') {
          this.$refs.supermap.isEditableLayers = false
          this.$refs.bottomMenu.showBanChild = false
          this.$refs.bottomMenu.showChild = false
          if (!this.$refs.bottomMenu.showChangChild) {
            this.$refs.bottomMenu.showChangChild = true
          } else {
            this.$refs.bottomMenu.showChangChild = false
          }
        }

      },
      //选择图层
      choseLayerSwitching(url, isClear) {
        this.$refs.supermap.layerSwitching(url, isClear)
      },
      //选择图层(传递数组)
      choseLayerSwitchingList(urlList) {
        this.$refs.supermap.layerSwitchingList(urlList)
      },
      //选择图层(传递数组)  带数据
      choseLayerSwitchingList_Data(urlList) {
        this.$refs.supermap.layerSwitchingList_Data(urlList)
      },
      /** ----------------------------------底部按钮公用组件结束------------------------------------- */
      // 获取人员信息（河长、路长、田长）
      getRyList() {
        let that = this
        that.iconCurrentIndex1 = '1'
        that.listCurrentIndex1 = ''
        that.listCurrentIndex2 = ''
        getRyList({
          leadType: "3"
        }).then(function(response) {
          // console.log(JSON.stringify(response.data));
          that.visuForestCloudRYBO = response.data.ryList
          that.zrs = response.data.num
          that.personnelChart()
        })
      },
      getRyListByJob(jobValue) {
        let that = this
        that.listCurrentIndex1 = ''
        that.listCurrentIndex2 = ''
        that.iconCurrentIndex1 = jobValue
        that.name = ''
        that.peopleList = []
        that.peopleList2 = []
        getRyListByJob({
          leadType: "3",
          dictType: jobValue
        }).then(function(response) {
          // console.log(JSON.stringify(response.data));
          that.peopleList = response.data
          that.peopleList2 = response.data
        })
      },
      //初始化
      getInit() {
        let that = this
        this.iconCurrentIndex1 = '1'
        this.listCurrentIndex1 = ''
        this.listCurrentIndex2 = ''
        //获取左侧菜单列表
        getRy().then(res => {
          that.visuForestCloudRYBO = res.data.visuForestCloudRYBO
          that.zrs = res.data.visuForestCloudRyZxBO.zrs
          that.zxrs = res.data.visuForestCloudRyZxBO.zxrs
          this.personnelChart()
        })
      },
      //获取左侧人员列表
      getTrafficLeader(linJob, linType) {
        this.listCurrentIndex1 = ''
        this.listCurrentIndex2 = ''
        this.iconCurrentIndex1 = linJob
        this.peopleList = []
        this.peopleList2 = []
        getTrafficLeader(linJob, linType).then(res => {
          this.peopleList = res.data
          this.peopleList2 = res.data
        })
        this.connectList = []
        this.personId = null;
        this.xunLinListOne = [];
        this.patrolTrajectory = null;
        this.$refs.supermap.clearC()
        this.$refs.supermap.clearTwoC();
      },
      //点击左侧人员列表获取 巡查轨迹
      getPlanList(personId) {
        if (this.personId == personId) { //当前人员已经被点击一次 不再重复加载
          return;
        }
        this.personId = personId;
        this.showNothing = false;
        this.recordList = [];
        getPlanList(personId).then(res => {
          this.xunLinListOne = res.data;
        })
        this.patrolTrajectory = null;
        this.$refs.supermap.clearC()
        this.$refs.supermap.clearTwoC();
      },
      //点击右侧巡查轨迹获取 巡查记录
      getRecordList(id, patrolTrajectory) {
        this.showNothing = false;
        this.recordList = [];
        getRecordList(id).then(res => {
          this.recordList = res.data;
        })
        this.$refs.supermap.clearC();
          this.$refs.supermap.clearTwoC();
        this.setTaskPointList(patrolTrajectory);
      },
      //点击右侧巡查记录获取 巡查轨迹
      getPointList(id) {
        getPointList(id).then(res => {
          // console.log("落点",res.data);
          this.setPointList(res);
        })
      },
      // //点击巡查人员 巡查任务落点
      setTaskPointList(patrolTrajectory) {
        console.log("巡查任务落点", typeof JSON.parse(patrolTrajectory));
        if (this.patrolTrajectory == patrolTrajectory) {
          this.patrolTrajectory = null;
        } else {
          this.patrolTrajectory = patrolTrajectory;
          this.drawTaskPoint(this.patrolTrajectory);
        }
      },
      // 巡查任务落点
      drawTaskPoint(patrolTrajectory) {
        let list = JSON.parse(patrolTrajectory)
        let data = []
        for (var i = 0; i < list.length; i++) {
          data.push(list[i].lng);
          data.push(list[i].lat);
        }
        setTimeout(() => {
          this.$refs.supermap.clearC();
        this.$refs.supermap.clearTwoC();
          this.$refs.supermap.setConnectList(data, '#04f', 0.8);
        }, 1000)
      },
      //点击巡查轨迹时段 巡查轨迹落点
      setPointList(res) {
        let that = this;
        this.connectList = [];
        console.log("落点", res.data)
        if (res.data != null && res.data.length > 0) {
          for (let i = 0; i < res.data.length; i++) {
            that.connectList.push(res.data[i].longitude)
            that.connectList.push(res.data[i].latitude)
          }
          setTimeout(() => {
            that.$refs.supermap.clearTwoC()
            that.$refs.supermap.setConnectTwoList(that.connectList, '#f40', 0.8)
          }, 1000)
        } else {
          that.$refs.supermap.clearTwoC()
        }
      },
      setConnectList(points, planName) {
        this.listCurrentIndex2 = planName
        this.connectList = []
        if (points != null && points != '') {
          this.connectList = JSON.parse(points)
          this.$refs.supermap.setConnectTwoList(this.connectList, 'red')
        }
      },

      //吉祥物收起左右框
      indent() {
        let list = document.getElementsByClassName('el-tooltip__popper')
        list[list.length - 1].style.display = 'none'
        if (this.indentStyle == '') {
          this.indentStyle = 'indent-style'
          this.indentleft = 'indent-left'
          this.indentright = 'indent-right'
          this.indentText = '展开左右栏'
        } else if (this.indentText == '展开左右栏') {
          this.indentStyle = ''
          this.indentleft = ''
          this.indentright = ''
          this.indentText = '收起左右栏'
        }
      },
      //人员chart
      personnelChart() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('personnel-chart'))
        // 绘制图表
        const handred = this.zrs
        let point = this.zxrs
        myChart.setOption({
          title: [{
            text: '总人数：' + handred + '人',
            x: '48%',
            y: '25%',
            textStyle: {
              fontWeight: 'normal',
              color: '#02d6fc',
              fontSize: '14'
            }
          }],
          series: [{
            name: 'circle',
            type: 'pie',
            center: ['22%', '50%'],
            radius: ['60%', '70%'],
            clockWise: true,
            label: {
              normal: {
                position: 'center'

              }
            },
            itemStyle: {
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            },
            data: [{
              value: handred,
              name: '当前在线',
              label: {
                show: true, //单独显示该数据项
                formatter: '{c}人',
                labelLayout: {
                  top: '50%'
                },
                textStyle: {
                  color: '#02d6fc',
                  fontSize: 14
                }
              },
              itemStyle: {
                normal: {
                  color: { // 完成的圆环的颜色
                    colorStops: [{
                      offset: 0,
                      color: '#02d6fc' // 0% 处的颜色
                    }, {
                      offset: 1,
                      color: '#367bec' // 100% 处的颜色
                    }]
                  },
                  label: {
                    show: false
                  },
                  labelLine: {
                    show: false
                  }
                }
              }
            }, {
              value: 0,
              itemStyle: {
                color: '#666'
              }
            }]
          }]
        })
      }


    },
    //过滤器

    filters: {

      //标题截取前20
      ellipsis20(value) {
        if (!value) return '';
        if (value.length > 20) {
          return value.slice(0, 20) + '...'
        }
        return value
      }
    },

  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import '@/assets/styles/base.scss';

  .h-27 {
    height: 27rem;
  }
</style>