可视化

src/api/forest.js

@@ -237,3 +237,30 @@ export function sendMessage(param) {
     data:param
   })
 }
+
+
+
+//获取人员信息（河长、路长、田长）
+export function getRyList(param) {
+  return request({
+    url: '/center-traffic/traffic/getRyList',
+    method: 'post',
+    data: param,
+    headers: {
+      loading: false
+    },
+  })
+}
+
+// 按职务获取列表
+export function getRyListByJob(param) {
+  return request({
+    url: '/center-traffic/traffic/getRyListByJob',
+    method: 'post',
+    data: param,
+    headers: {
+      loading: false
+    },
+  })
+}
+

src/views/leader.vue

@@ -16,9 +16,9 @@
 						<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}"
+								<div class="icon-con w-50" :class="{on:iconCurrentIndex1==item.dictType}"
 									v-for="(item,index) in visuForestCloudRYBO"
-									@click="getTrafficLeader(item.jobValue,item.jobType)">
+                     @click="getRyListByJob(item.dictType)">
 									<div class="icon icon-mid el-icon-user"></div>
 									<div class="icon-text">
 										<h5>{{ item.job }}</h5>
@@ -46,7 +46,7 @@
 						<img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;" />
 						<div class="i-list-con h-27">
               <el-input
-                v-model="nickName"
+                v-model="name"
                 placeholder="请输入姓名"
                 clearable
                 size="small"
@@ -58,7 +58,7 @@
 									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.nickName }}</h6>
+                    <h6>{{ item.name }} <span v-if="item.phone != undefined"> - {{ item.phone }}</span></h6>
 										<h5>{{ item.deptName }}</h5>
 									</div>
 								</div>
@@ -157,7 +157,7 @@
 	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: {
@@ -181,7 +181,7 @@
 				visuForestCloudRYBO: [], //人员类型列表
         personId: null, //人员
         peopleList: [], //人员列表
-        nickName: '',
+        name: '',
         peopleList2: [], //人员列表
         connectList: [], //画线
         patrolTrajectory: null, //任务画线
@@ -193,7 +193,8 @@
 			}
 		},
 		created() {
-			this.getInit()
+      this.getRyList()
+			//this.getInit()
 			/** ----------------------------------底部按钮公用组件开始------------------------------------- */
 			window.showDialog = this.showDialog
 			window.choseLayerSwitching = this.choseLayerSwitching
@@ -206,11 +207,11 @@
     },
     watch:
       {
-        nickName(val) {
+        name(val) {
           this.peopleList2 = [];
 
           for (let i in this.peopleList) {
-            if (this.peopleList[i].nickName.indexOf(val) != -1) {
+            if (this.peopleList[i].name.indexOf(val) != -1) {
               this.peopleList2.push(this.peopleList[i]);
             }
           }
@@ -287,7 +288,33 @@
         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
@@ -350,7 +377,7 @@
 					this.setPointList(res);
 				})
 			},
-      //点击巡查人员 巡查任务落点
+      // //点击巡查人员 巡查任务落点
       setTaskPointList(patrolTrajectory) {
         console.log("巡查任务落点", typeof JSON.parse(patrolTrajectory));
         if(this.patrolTrajectory == patrolTrajectory){
@@ -382,10 +409,13 @@
 					}
 					setTimeout(() => {
 						// that.$refs.supermap.clearC()
-						that.$refs.supermap.setConnectList(this.connectList, '#f40')
+						// that.$refs.supermap.setConnectList(this.connectList, '#f40')
+            that.$refs.supermap.clearCTwo()
+            that.$refs.supermap.setConnectTwoList(this.connectList, '#f40')
 					}, 1000)
 				} else {
-					that.$refs.supermap.clearC()
+					//that.$refs.supermap.clearC()
+          that.$refs.supermap.clearCTwo()
 				}
 			},
 			setConnectList(points, planName) {
@@ -422,7 +452,7 @@
 				let point = this.zxrs
 				myChart.setOption({
 					title: [{
-						text: '总人数：' + handred + '人' + '\n' + '\n' + '在线人数：' + point + '人',
+						text: '总人数：' + handred + '人',
 						x: '48%',
 						y: '25%',
 						textStyle: {
@@ -454,7 +484,7 @@
 							}
 						},
 						data: [{
-							value: point,
+							value: handred,
 							name: '当前在线',
 							label: {
 								show: true, //单独显示该数据项
@@ -487,7 +517,7 @@
 								}
 							}
 						}, {
-							value: handred - point,
+							value:0,
 							itemStyle: {
 								color: '#666'
 							}