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.jobValue}"
                     v-for="(item,index) in visuForestCloudRYBO"
                     @click="getForestLeader(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 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="getForestLeader(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">
              <div class="d-l-con-icon">
                <div class="icon-con" :class="{on:listCurrentIndex1==item.userId}"
                     v-for="(item,index) in peopleList" @click="getLeaderTrack(item.userId)">
                  <div class="icon icon-mid el-icon-user"></div>
                  <div class="icon-text personnel-name">
                    <h6>{{ item.nickName }}</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>
      <!-- 右侧 -->
      <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-19 overflow-y">
                <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 {
  getForestLeader,
  getLeaderTrack,
  getPlanList,
  getRy
} from '@/api/leader'

import supermap from '@/components/supermap' //超图
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' //电视墙弹窗

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: [], //人员类型列表
      peopleList: [], //人员列表
      connectList: [], //画线
      xunLinListOne: [], //巡林计划
      zrs: 0, //总人数
      zxrs: 0 //在线人数
    }
  },
  created() {
    this.getInit()
    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
    window.showDialog = this.showDialog
    window.choseLayerSwitching = this.choseLayerSwitching
    window.choseLayerSwitchingList = this.choseLayerSwitchingList
    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
  },
  methods: {
    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
    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)
    },
    /** ----------------------------------底部按钮公用组件结束------------------------------------- */

    //初始化
    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()
      })
      //获取巡林计划
      getPlanList().then(res => {
        this.xunLinListOne = res.data
      })
    },
    //获取左侧人员列表
    getForestLeader(linJob, linType) {
      this.listCurrentIndex1 = ''
      this.listCurrentIndex2 = ''
      this.iconCurrentIndex1 = linJob
      this.peopleList = []
      getForestLeader(linJob, linType).then(res => {
        this.peopleList = res.data
      })
      this.connectList = []
      this.$refs.supermap.clearC()
    },
    //点击左侧人员列表获取轨迹
    getLeaderTrack(userId) {
      this.listCurrentIndex1 = userId
      let that = this
      this.connectList = []
      getLeaderTrack(userId).then(res => {
        if (res.data != null && res.data.length > 0) {
          for (let i = 0; i < res.data.length; i++) {
            let latlng = {
              lat: res.data[i].latitude,
              lng: res.data[i].longitude
            }
            this.connectList.push(latlng)
          }
          setTimeout(() => {
            that.$refs.supermap.clearC()
            that.$refs.supermap.setConnectList(this.connectList, 'red')
          }, 1000)
        } else {
          that.$refs.supermap.clearC()
        }
      })
    },

    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 + '人' + '\n' + '\n' + '在线人数：' + point + '人',
          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: point,
            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: handred - point,
            itemStyle: {
              color: '#666'
            }
          }]
        }]
      })
    }
  }

}
</script>

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

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