环保更换巡查轨迹接口

src/api/leader.js

@@ -15,24 +15,28 @@ export function getForestLeader() {
     method: 'get',
   })
 }
-// 点击左侧人员列表获取轨迹
-export function getLeaderTrack(trackById) {
+
+// 巡林任务
+export function getPlanList(userId) {
   return request({
-    url: '/center-environment/VisuForestLeaderController/getLeaderTrack?trackById='+trackById,
-    method: 'get',
+    url: '/center-data/task/getPlanList',
+    method: 'post',
+    data: {userId:userId,type:'1'}
   })
 }
-// 点击左侧人员列表获取时段
-export function getTrackList(personId) {
+
+// 巡林记录
+export function getRecordList(taskId) {
   return request({
-    url: '/center-environment/VisuForestLeaderController/getTrackList?personId='+personId,
+    url: '/center-data/record/list?taskId='+taskId,
     method: 'get',
   })
 }
-// 点击右侧时段列表获取落点
-export function getPointList(trackId) {
+
+// 巡林轨迹
+export function getPointList(recordId) {
   return request({
-    url: '/center-environment/VisuForestLeaderController/getPointList?trackId='+trackId,
+    url: '/center-data/track/getTrack/'+recordId.toString(),
     method: 'get',
   })
 }

src/views/leader.vue

@@ -8,31 +8,31 @@
       <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: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 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>
@@ -43,11 +43,11 @@
         <!--        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">
               <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)">
+                     v-for="(item,index) in peopleList" @click="getPlanList(item.userId)">
                   <div class="icon icon-mid el-icon-user"></div>
                   <div class="icon-text personnel-name">
                     <h6>{{ item.nickName }}</h6>
@@ -66,32 +66,69 @@
       <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;"/>
+              <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}"
+                <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)">
+                        <div class="d-l-l-text">
+                          <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>
+                            </div>
+                            <h4 class="collapse-title" style="width: 100px;">
+                              {{ item.taskName | ellipsis20}}</h4>
+                          </el-tooltip>
+                        </div>
+                        <div class="d-l-l-count">({{ item.recordCount }}/{{ item.planCount }})
+                        </div>
+                      </div>
+                    </template>
+                    <div class="d-l-con this-child sj-collapse" @click="getPointList(child.id)"
+                         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 == [])">
+                      <div class="d-l-l-text">
+                        <h4 class="text-gray">暂无信息</h4>
+                      </div>
+                    </div>
+                  </el-collapse-item>
+                </el-collapse>
+                <!--<div class="d-l-con" :class="{on:listCurrentIndex2==item.planName}"
                      v-for="(item,index) in xunLinListOne"
-                     @click="getPointList(item.id)">
+                     @click="setConnectList(item.planLine,item.planName)">
                   <div class="d-l-l-text">
                     <i class="i-small"></i>
-                    <h4>{{ item.timeBegin }} - {{ item.timeEnd }}</h4>
+                    <h4>{{ item.planName }}</h4>
                   </div>
-                </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>-->
+      <!--      <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>
@@ -99,216 +136,222 @@
 </template>
 
 <script>
-import {
-  getForestLeader,
-  getLeaderTrack,
-  getTrackList,
-  getPointList,
-  getRy
-} from '@/api/leader'
+  import {
+    getForestLeader,
+    getLeaderTrack,
+    getPlanList,
+    getRecordList,
+    getPointList,
+    getRy,
+    getRemotelist
+  } 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' //电视墙弹窗
+  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
-    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
-  },
-  mounted() {
-    this.bottomMenuList() //获取底部公共组件消息和任务
-  },
-  methods: {
-    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
-    bottomMenuList() {
-      this.$refs.bottomMenu.selectTaskList()//获取任务列表
-      this.$refs.bottomMenu.selectMessageList()//获取消息列表
+  let echarts = require('echarts')
+  export default {
+    components: {
+      supermap,
+      vheader,
+      vBottomMenu,
+      eventLocation,
+      TVWall
     },
-    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 {
+    data() {
+      return {
+        iconCurrentIndex1: '1',
+        listCurrentIndex1: '',
+        listCurrentIndex2: '',
+        //左右缩进
+        indentStyle: '',
+        indentleft: '',
+        indentright: '',
+        indentText: '收起左右栏',
+        indentdisabled: false,
+        visuForestCloudRYBO: [], //人员类型列表
+        peopleList: [], //人员列表
+        connectList: [], //画线
+        xunLinListOne: [], //巡林任务
+        recordList: [], //巡查记录
+        showNothing: false, //暂无信息
+        zrs: 0, //总人数
+        zxrs: 0 //在线人数
+      }
+    },
+    created() {
+      this.getInit()
+      /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+      window.showDialog = this.showDialog
+      window.choseLayerSwitching = this.choseLayerSwitching
+      window.choseLayerSwitchingList = this.choseLayerSwitchingList
+      window.choseLayerSwitchingList_Data = this.choseLayerSwitchingList_Data
+      /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+    },
+    mounted(){
+      this.bottomMenuList() //获取底部公共组件消息和任务
+    },
+    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)
-    },
-    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+      },
+      //选择图层
+      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)
+      },
+      /** ----------------------------------底部按钮公用组件结束------------------------------------- */
 
-    //初始化
-    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){// 当前资源人员有巡查轨迹 获取最新一条轨迹
+      //初始化
+      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 = []
+        getForestLeader(linJob, linType).then(res => {
+          this.peopleList = res.data
+        })
+        this.connectList = []
+        this.$refs.supermap.clearC()
+      },
+      //点击左侧人员列表获取 巡林计划
+      getPlanList(personId) {
+        this.showNothing = false;
+        this.recordList = [];
+        getPlanList(personId).then(res => {
           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.$refs.supermap.clearC()
+      },
+      //点击左侧人员列表获取轨迹
+      getLeaderTrack(userId) {
+        this.getRemotelist();
+        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)
             }
-            this.connectList.push(latlng)
-          }
-          setTimeout(() => {
+            setTimeout(() => {
+              that.$refs.supermap.clearC()
+              that.$refs.supermap.setConnectList(this.connectList, 'red')
+            }, 1000)
+          } else {
             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)
+          }
+        })
+      },
+      //点击右侧巡林计划获取 巡查记录
+      getRecordList(id) {
+        this.showNothing = false;
+        this.recordList = [];
+        getRecordList(id).then(res => {
+          this.recordList = res.data;
+        })
+        this.$refs.supermap.clearC()
+      },
+      //点击右侧巡查记录获取 巡查轨迹
+      getPointList(id) {
+        getPointList(id).then(res => {
+          // console.log("落点",res.data);
+          this.setPointList(res);
+        })
+      },
+      //点击左侧人员获取人员的巡林计划列表
+      getRemotelist() {
+        getRemotelist().then(res => {
+          this.xunLinListOne = res.data;
+        })
+      },
+      //点击巡查轨迹时段 巡查轨迹落点
+      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++) {
             let latlng = {
@@ -324,98 +367,64 @@ export default {
         } 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'
+      },
+      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
                 },
@@ -423,35 +432,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: {
-    //标题截取前20
-    ellipsis20(value) {
-      if (!value) return '';
-      if (value.length > 20) {
-        return value.slice(0, 20) + '...'
+        })
       }
-      return value
-    }
-  },
-}
+
+
+    },
+    //过滤器
+
+    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';
+  @import '@/assets/styles/base.scss';
 
-.h-27 {
-  height: 27rem;
-}
+  .h-27 {
+    height: 27rem;
+  }
 </style>