监控中心重点区域画面

src/views/leader.vue

@@ -8,17 +8,16 @@
       <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;"/>
+            <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;"/>
+              <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.dict_sort}"
-                     v-for="(item,index) in visuForestCloudRYBO"
-                     @click="getRyListByJob(item.dict_sort,item.dictType)">
+                  v-for="(item,index) in visuForestCloudRYBO" @click="getRyListByJob(item.dict_sort,item.dictType)">
                   <div class="icon icon-mid el-icon-user"></div>
                   <div class="icon-text">
                     <h5>{{ item.job }}</h5>
@@ -43,19 +42,13 @@
         <!--        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;"/>
+            <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"
-              />
+              <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-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>
@@ -69,34 +62,35 @@
         </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>
+      <!--      <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;"/>
+            <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;"/>
+              <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-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)">
+                          <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>
+                                {{ item.taskName }}
+                              </h4>
                             </div>
                             <h4 class="collapse-title" style="width: 100px;">
-                              {{ item.taskName | ellipsis20 }}</h4>
+                              {{ item.taskName | ellipsis20 }}
+                            </h4>
                           </el-tooltip>
                         </div>
                         <div class="d-l-l-count">({{ item.recordCount }}/{{ item.planCount }})
@@ -104,14 +98,14 @@
                       </div>
                     </template>
                     <div class="d-l-con this-child sj-collapse" @click="getPointList(child.id)"
-                         v-for="(child,index) in recordList">
+                      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 == [])">
+                      v-if="showNothing && (recordList == null || recordList == '' || recordList == [])">
                       <div class="d-l-l-text">
                         <h4 class="text-gray">暂无信息</h4>
                       </div>
@@ -146,68 +140,70 @@
 </template>
 
 <script>
-import {
-  getForestLeader,
-  getPlanList,
-  getRecordList,
-  getPointList,
-  getRy
-} from '@/api/leader'
+  import {
+    getForestLeader,
+    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"; //电视墙弹窗
+  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: '',
-      listCurrentIndex1: '',
-      listCurrentIndex2: '',
-      //左右缩进
-      indentStyle: '',
-      indentleft: '',
-      indentright: '',
-      indentText: '收起左右栏',
-      indentdisabled: false,
-      visuForestCloudRYBO: [], //人员类型列表
-      peopleList: [], //人员列表
-      name: '',
-      peopleList2: [], //人员列表
-      connectList: [], //画线
-      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:
-    {
+  let echarts = require('echarts')
+  export default {
+    components: {
+      supermap,
+      vheader,
+      vBottomMenu,
+      eventLocation,
+      TVWall
+    },
+    data() {
+      return {
+        iconCurrentIndex1: '',
+        listCurrentIndex1: '',
+        listCurrentIndex2: '',
+        //左右缩进
+        indentStyle: '',
+        indentleft: '',
+        indentright: '',
+        indentText: '收起左右栏',
+        indentdisabled: false,
+        visuForestCloudRYBO: [], //人员类型列表
+        peopleList: [], //人员列表
+        name: '',
+        peopleList2: [], //人员列表
+        connectList: [], //画线
+        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) {
@@ -217,299 +213,274 @@ export default {
         }
       }
     },
-  methods: {
-    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
-    bottomMenuList() {
-      this.$refs.bottomMenu.selectTaskList()//获取任务列表
-      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 {
+    methods: {
+      /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+      bottomMenuList() {
+        this.$refs.bottomMenu.selectTaskList() //获取任务列表
+        this.$refs.bottomMenu.selectMessageList() //获取消息列表
+      },
+      showDialog(click) {
+        if (click == 'eventLocation') {
+          this.$refs.eventLocation.showEventLocation()
           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
+        } 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 = ''
-      that.listCurrentIndex1 = ''
-      that.listCurrentIndex2 = ''
-      getRyList({leadType: "6"}).then(function (response) {
-        // console.log(JSON.stringify(response.data));
-        that.visuForestCloudRYBO = response.data.ryList
-        that.zrs = response.data.num
-        that.personnelChart()
-      })
-    },
-    getRyListByJob(jobValue,jobType) {
-      let that = this
-      that.listCurrentIndex1 = ''
-      that.listCurrentIndex2 = ''
-      that.iconCurrentIndex1 = jobValue
-      that.name = ''
-      that.peopleList = []
-      that.peopleList2 = []
-      getRyListByJob({leadType: "6", dictType: jobType}).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()
-    //   })
-    // },
-    //获取左侧人员列表
-    getForestLeader(linJob, linType) {
-      this.listCurrentIndex1 = ''
-      this.listCurrentIndex2 = ''
-      this.iconCurrentIndex1 = linJob
-      this.peopleList = []
-      this.peopleList2 = []
-      getForestLeader(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()
-    },
-    //点击左侧人员列表获取 巡林计划
-    getPlanList(personId) {
-      this.listCurrentIndex1 = 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();
-    },
-    //点击右侧巡林计划获取 巡查记录
-    getRecordList(id, patrolTrajectory) {
-      this.showNothing = false;
-      this.recordList = [];
-      getRecordList(id).then(res => {
-        this.recordList = res.data;
-      })
-      this.$refs.supermap.clearC();
-      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) {
+      },
+      //选择图层
+      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 = ''
+        that.listCurrentIndex1 = ''
+        that.listCurrentIndex2 = ''
+        getRyList({
+          leadType: "6"
+        }).then(function(response) {
+          // console.log(JSON.stringify(response.data));
+          that.visuForestCloudRYBO = response.data.ryList
+          that.zrs = response.data.num
+          that.personnelChart()
+        })
+      },
+      getRyListByJob(jobValue, jobType) {
+        let that = this
+        that.listCurrentIndex1 = ''
+        that.listCurrentIndex2 = ''
+        that.iconCurrentIndex1 = jobValue
+        that.name = ''
+        that.peopleList = []
+        that.peopleList2 = []
+        getRyListByJob({
+          leadType: "6",
+          dictType: jobType
+        }).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()
+      //   })
+      // },
+      //获取左侧人员列表
+      getForestLeader(linJob, linType) {
+        this.listCurrentIndex1 = ''
+        this.listCurrentIndex2 = ''
+        this.iconCurrentIndex1 = linJob
+        this.peopleList = []
+        this.peopleList2 = []
+        getForestLeader(linJob, linType).then(res => {
+          this.peopleList = res.data
+          this.peopleList2 = res.data
+        })
+        this.connectList = []
+        this.personId = null;
+        this.xunLinListOne = [];
         this.patrolTrajectory = null;
-      } else {
-        this.patrolTrajectory = patrolTrajectory;
-        this.drawTaskPoint(this.patrolTrajectory);
-      }
-    },
-    // 巡查任务落点
-    drawTaskPoint(patrolTrajectory) {
+        this.$refs.supermap.clearC()
+        this.$refs.supermap.clearTwoC();
+      },
+      //点击左侧人员列表获取 巡林计划
+      getPlanList(personId) {
+        this.listCurrentIndex1 = 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(this.connectList, '#f40',0.8)
+          this.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+          this.$refs.supermap.setConnectList(data, '#04f', 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 + '人' + '\n' + '\n' + '在线人数：' + point + '人',
-          x: '48%',
-          y: '25%',
-          textStyle: {
-            fontWeight: 'normal',
-            color: '#02d6fc',
-            fontSize: '14'
+      },
+      //点击巡查轨迹时段 巡查轨迹落点
+      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)
           }
-        }],
-        series: [{
-          name: 'circle',
-          type: 'pie',
-          center: ['22%', '50%'],
-          radius: ['60%', '70%'],
-          clockWise: true,
-          label: {
-            normal: {
-              position: 'center'
+          setTimeout(() => {
+            that.$refs.supermap.clearTwoC()
+            that.$refs.supermap.setConnectTwoList(this.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 + '人' + '\n' + '\n' + '在线人数：' + point + '人',
+            x: '48%',
+            y: '25%',
+            textStyle: {
+              fontWeight: 'normal',
+              color: '#02d6fc',
+              fontSize: '14'
             }
-          },
-          itemStyle: {
-            normal: {
-              label: {
-                show: false
-              },
-              labelLine: {
-                show: false
-              }
-            }
-          },
-          data: [{
-            value: point,
-            name: '当前在线',
+          }],
+          series: [{
+            name: 'circle',
+            type: 'pie',
+            center: ['22%', '50%'],
+            radius: ['60%', '70%'],
+            clockWise: true,
             label: {
-              show: true, //单独显示该数据项
-              formatter: '{c}人',
-              labelLayout: {
-                top: '50%'
-              },
-              textStyle: {
-                color: '#02d6fc',
-                fontSize: 14
+              normal: {
+                position: 'center'
+
               }
             },
             itemStyle: {
               normal: {
-                color: { // 完成的圆环的颜色
-                  colorStops: [{
-                    offset: 0,
-                    color: '#02d6fc' // 0% 处的颜色
-                  }, {
-                    offset: 1,
-                    color: '#367bec' // 100% 处的颜色
-                  }]
-                },
                 label: {
                   show: false
                 },
@@ -517,40 +488,73 @@ export default {
                   show: false
                 }
               }
-            }
-          }, {
-            value: handred - point,
-            itemStyle: {
-              color: '#666'
-            }
+            },
+            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: {
+    filters: {
 
-    //标题截取前20
-    ellipsis20(value) {
-      if (!value) return '';
-      if (value.length > 20) {
-        return value.slice(0, 20) + '...'
+      //标题截取前20
+      ellipsis20(value) {
+        if (!value) return '';
+        if (value.length > 20) {
+          return value.slice(0, 20) + '...'
+        }
+        return value
       }
-      return value
-    }
-  },
+    },
 
-}
+  }
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-@import '@/assets/styles/base.scss';
+  @import '@/assets/styles/base.scss';
 
-.h-27 {
-  height: 27rem;
-}
+  .h-27 {
+    height: 27rem;
+  }
 </style>

src/views/monitor.vue

@@ -506,15 +506,12 @@
           //地图标记
           if (res.data != null && res.data.length > 0) {
             for (let i = 0; i < res.data.length; i++) {
-              let latlng = {
-                lat: res.data[i].lat,
-                lng: res.data[i].lng
-              }
-              that.graphicsList.push(latlng)
+              that.graphicsList.push(res.data[i].lng)
+              that.graphicsList.push(res.data[i].lat)
             }
             setTimeout(() => {
               that.$refs.supermap.clearG()
-              that.$refs.supermap.setGraphicsList(this.graphicsList, 'red')
+              that.$refs.supermap.setGraphicsList(this.graphicsList, 'red', 0.8)
             }, 1000)
           } else {
             that.$refs.supermap.clearG()