数字环保 网格化

src/api/leader.js

@@ -0,0 +1,38 @@
+import request from '@/utils/request'
+
+// 获取左侧
+export function getRy() {
+  return request({
+    url: '/center-environment/VisuForestCloudMapController/getRy',
+    method: 'post',
+  })
+}
+
+// 获取左侧人员列表
+export function getForestLeader() {
+  return request({
+    url: '/center-environment/VisuForestLeaderController/getPersonList',
+    method: 'get',
+  })
+}
+// 点击左侧人员列表获取轨迹
+export function getLeaderTrack(trackById) {
+  return request({
+    url: '/center-environment/VisuForestLeaderController/getLeaderTrack?trackById='+trackById,
+    method: 'get',
+  })
+}
+// 点击左侧人员列表获取时段
+export function getTrackList(personId) {
+  return request({
+    url: '/center-environment/VisuForestLeaderController/getTrackList?personId='+personId,
+    method: 'get',
+  })
+}
+// 点击右侧时段列表获取落点
+export function getPointList(trackId) {
+  return request({
+    url: '/center-environment/VisuForestLeaderController/getPointList?trackId='+trackId,
+    method: 'get',
+  })
+}

src/router/index.js

@@ -92,6 +92,15 @@ export const constantRoutes = [
     }
   },
   {
+    //网格化
+    path: '/leader',
+    name: 'leader',
+    component: () => import('@/views/leader'),
+    meta: {
+      title: '网格化'
+    }
+  },
+  {
     path: '/bigdata',
     name: 'bigdata',
     component: () => import('@/views/bigdata/bigdata'),
@@ -167,6 +176,15 @@ export const constantRoutesNew = [{
     }
   },
   {
+    //网格化
+    path: '/leader',
+    name: 'leader',
+    component: () => import('@/views/leader'),
+    meta: {
+      title: '网格化'
+    }
+  },
+  {
     path: '/bigdata',
     name: 'bigdata',
     component: () => import('@/views/bigdata/bigdata'),

src/views/bigdata/bigdata.vue

@@ -205,6 +205,11 @@ export default {
           name: '大气环境'
         },
         {
+          //网格化
+          path: '/leader',
+          name: '网格化'
+        },
+        {
           path: '/bigdata',
           name: '统计分析'
         }

src/views/leader.vue

@@ -0,0 +1,450 @@
+<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:20vh;"></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>-->
+                <!--&lt;!&ndash; <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> &ndash;&gt;-->
+              <!--</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-73 overflow-y">
+                <div class="d-l-con" :class="{on:listCurrentIndex2==item.planName}"
+                     v-for="(item,index) in xunLinListOne"
+                     @click="getPointList(item.id)">
+                  <div class="d-l-l-text">
+                    <i class="i-small"></i>
+                    <h4>{{ item.timeBegin }} - {{ item.timeEnd }}</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,
+  getTrackList,
+  getPointList,
+  getRy
+} from '@/api/leader'
+
+import supermap from '@/components/supermap' //超图getPointList
+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
+      // })
+      // // 获取轨迹列表
+      // getTrackList().then(res => {
+      //   this.xunLinListOne = res.data
+      // })
+      // 获取人员列表
+      // getForestLeader(linJob, linType).then(res => {
+      getForestLeader().then(res => {
+        this.peopleList = res.data;
+        console.log("人员",res.data)
+      })
+      this.connectList = []
+      // this.$refs.supermap.clearC() //clearC undefined
+    },
+    //获取左侧人员列表
+    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(personId) {
+      getTrackList(personId).then(res => {
+        console.log("轨迹",res.data);
+        if(res.data.length > 0){// 当前资源人员有巡查轨迹 获取最新一条轨迹
+          this.xunLinListOne = res.data;
+          this.getPointList(res.data[0].id);
+        }else {// 清空上一用户落点
+          this.xunLinListOne = [{"timeBegin": "当前资源人员", "timeEnd": "暂无巡查轨迹"}];
+          this.$refs.supermap.clearC()
+        }
+      })
+    },
+    getLeaderTrack_original(userId) {
+      this.listCurrentIndex1 = userId
+      let that = this
+      this.connectList = []
+      getLeaderTrack(userId).then(res => {
+        // this.xunLinListOne = res.data;
+        // 获取右侧轨迹列表
+        // getPlanList().then(res => {
+        //   this.xunLinListOne = res.data
+        // })
+
+        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()
+        }
+      })
+    },
+
+    getPointList(trackId) {
+      let that = this;
+      this.connectList = [];
+      getPointList(trackId).then(res => {
+        console.log("落点",res.data)
+        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'
+            }
+          }]
+        }]
+      })
+    }
+  },
+  //过滤器
+  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>