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">
          <div class="this-title">
            <span>人员分布</span>
            <!-- <span>45</span> -->
          </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" 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 class="icon-con w-50  m-btm-no" 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>
        </div>
<!--        avatar: ""-->
<!--        deptName: "锦程社区第一网格"-->
<!--        nickName: "李猛"-->
<!--        userId: 102-->
<!--        userName: "limeng"-->
        <div class="forthis">
          <div class="i-list-con h-27">
            <div class="d-l-con-icon">
              <div class="icon-con" 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>
        </div>
      </div>
      <!-- 地图 -->
      <supermap ref="supermap" style="width: 100%;height: 100vh;" :mapDiv="'forestMap'"
                :mapSite="{doubleClickZoom:false}" :codes="['9fa5']" :isSideBySide="false"></supermap>
      <!-- 右侧 -->
      <div class="rightbar" :class="indentright" ref="right">
        <div class="forthis">
          <div class="this-title">
            <span>巡林计划</span>
            <!-- <span>23</span> -->
          </div>
          <div class="i-list-con h-73">

            <div class="h-19 overflow-y">
              <div class="d-l-con" v-for="(item,index) in xunLinListOne" @click="setConnectList(item.planLine)">
                <div class="d-l-l-text">
                  <i class="i-small"></i>
                  <h4>{{item.planName}}</h4>
                </div>
              </div>
            </div>
          </div>

        </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>
  </div>
</template>

<script>
  import {
    getForestLeader,getLeaderTrack,getPlanList
  } from '@/api/leader'
  import {
    getBaseInfo
  } from '@/api/forest'

  import supermap from '@/components/supermap' //超图
  import vheader from '@/components/v-header.vue' //一体化共用头部
  import vBottomMenu from '@/components/vBottomMenu.vue' //一体化公共底部菜单
  import eventLocation from '@/components/eventLocation.vue' //事件定位弹窗

  let echarts = require('echarts')
  export default {
    components: {
      supermap,
      vheader,
      vBottomMenu,
      eventLocation
    },
    data() {
      return {
        //左右缩进
        indentStyle: '',
        indentleft: '',
        indentright: '',
        indentText: '收起左右栏',
        indentdisabled: false,
        visuForestCloudRYBO: [],//人员类型列表
        peopleList: [],//人员列表
        connectList: [],//画线
        xunLinListOne: []//巡林计划
      }
    },
    created() {
      this.getInit()
      /** ----------------------------------底部按钮公用组件开始------------------------------------- */
      window.showDialog = this.showDialog
      window.choseLayerSwitching = this.choseLayerSwitching
      /** ----------------------------------底部按钮公用组件结束------------------------------------- */
    },
    methods: {
      /** ----------------------------------底部按钮公用组件开始------------------------------------- */
      showDialog(click) {
        if (click == 'eventLocation') {
          this.$refs.eventLocation.showEventLocation()
          this.$refs.supermap.isEditableLayers = false
          this.$refs.bottomMenu.showChild = false
        } else if (click == 'editableLayers') {
          this.$refs.bottomMenu.showChild = 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
          if (!this.$refs.bottomMenu.showChild) {
            this.$refs.bottomMenu.showChild = true
          } else {
            this.$refs.bottomMenu.showChild = false
          }
        }
      },
      //选择图层
      choseLayerSwitching(url) {
        this.$refs.supermap.layerSwitching(url, true)
      },
      /** ----------------------------------底部按钮公用组件结束------------------------------------- */

      //初始化
      getInit() {
        let that = this
        //获取左侧菜单列表
        getBaseInfo().then(res => {
          that.visuForestCloudRYBO = res.data.visuForestCloudRYBO
          this.personnelChart()
        })
        //获取巡林计划
        getPlanList().then(res => {
          this.xunLinListOne=res.data
          console.log(res.data)
        })
      },
      //获取左侧人员列表
      getForestLeader(linJob,linType) {
        this.peopleList=[];
        getForestLeader(linJob,linType).then(res => {
          this.peopleList=res.data
        })
      },
      //点击左侧人员列表获取轨迹
      getLeaderTrack(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){
        this.connectList=[]
        if(points!=null&&points!=""){
          this.connectList=JSON.parse(points);
          this.$refs.supermap.clearC()
          this.$refs.supermap.setConnectList(this.connectList, 'red')
        }else{
          this.$refs.supermap.clearC()
        }
      },

      //吉祥物收起左右框
      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 = 100
        let point = 66
        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>