UI-更改搜索固定样式

src/views/leader.vue

@@ -7,17 +7,29 @@
       <!-- 左侧 -->
       <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;" />
+          <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: 0.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 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-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>
@@ -41,14 +53,31 @@
         <!--        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">
-              <el-input v-model="nickName" placeholder="请输入姓名" clearable size="small" prefix-icon="el-icon-search"
-                style="margin-bottom: 20px" />
+          <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: 0.4rem"
+            />
+            <div class="sj-search">
+              <el-input
+                v-model="nickName"
+                placeholder="请输入姓名"
+                clearable
+                size="small"
+                prefix-icon="el-icon-search"
+              />
+            </div>
+            <div class="i-list-con" style="height: 40vh">
               <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.nickName }}</h6>
@@ -64,48 +93,75 @@
       <!--      <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"></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;" />
+          <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: 0.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">
+                  <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;">
+                              <h4 class="collapse-title" style="width: 200px">
                                 {{ item.taskName }}
                               </h4>
                             </div>
-                            <h4 class="collapse-title" style="width: 100px;">
+                            <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 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-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-con this-child sj-collapse"
+                      v-if="
+                        showNothing &&
+                        (recordList == null ||
+                          recordList == '' ||
+                          recordList == [])
+                      "
+                    >
                       <div class="d-l-l-text">
                         <h4 class="text-gray">暂无信息</h4>
                       </div>
@@ -124,8 +180,6 @@
             </div>
           </dv-border-box-13>
         </div>
-
-
       </div>
       <vBottomMenu ref="bottomMenu"></vBottomMenu>
       <!--      <el-tooltip :content="indentText" placement="top" :disabled="indentdisabled">-->
@@ -140,387 +194,401 @@
 </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 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' //电视墙弹窗
+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: [], //人员类型列表
+      personId: null, //人员
+      peopleList: [], //人员列表
+      nickName: "",
+      peopleList2: [], //人员列表
+      connectList: [], //画线
+      patrolTrajectory: null, //任务画线
+      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(); //获取底部公共组件消息和任务
+  },
+  watch: {
+    nickName(val) {
+      this.peopleList2 = [];
 
-  let echarts = require('echarts')
-  export default {
-    components: {
-      supermap,
-      vheader,
-      vBottomMenu,
-      eventLocation,
-      TVWall
+      for (let i in this.peopleList) {
+        if (this.peopleList[i].nickName.indexOf(val) != -1) {
+          this.peopleList2.push(this.peopleList[i]);
+        }
+      }
+      console.log(this.peopleList2);
     },
-    data() {
-      return {
-        iconCurrentIndex1: '1',
-        listCurrentIndex1: '',
-        listCurrentIndex2: '',
-        //左右缩进
-        indentStyle: '',
-        indentleft: '',
-        indentright: '',
-        indentText: '收起左右栏',
-        indentdisabled: false,
-        visuForestCloudRYBO: [], //人员类型列表
-        personId: null, //人员
-        peopleList: [], //人员列表
-        nickName: '',
-        peopleList2: [], //人员列表
-        connectList: [], //画线
-        patrolTrajectory: null, //任务画线
-        xunLinListOne: [], //巡查任务
-        recordList: [], //巡查记录
-        showNothing: false, //暂无信息
-        zrs: 0, //总人数
-        zxrs: 0 //在线人数
+  },
+  methods: {
+    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+    bottomMenuList() {
+      this.$refs.bottomMenu.selectTaskList(); //获取任务列表
+      this.$refs.bottomMenu.selectMessageList(); //获取消息列表
+    },
+    showDialog(click) {
+      if (click == "eventLocation") {
+        this.$refs.eventLocation.showEventLocation();
+        this.$refs.bottomMenu.showMeasure = 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.bottomMenu.showMeasure) {
+          this.$refs.bottomMenu.showMeasure = true;
+        } else {
+          this.$refs.bottomMenu.showMeasure = false;
+        }
+      } else if (click == "layerSwitching") {
+        this.$refs.bottomMenu.showMeasure = 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.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+      } else if (click == "forestban") {
+        this.$refs.bottomMenu.showMeasure = 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.bottomMenu.showMeasure = 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;
+        }
       }
     },
-    created() {
-      this.getInit()
-      /** ----------------------------------底部按钮公用组件开始------------------------------------- */
-      window.showDialog = this.showDialog
-      window.choseLayerSwitching = this.choseLayerSwitching
-      window.choseLayerSwitchingList = this.choseLayerSwitchingList
-      window.choseLayerSwitchingList_Data = this.choseLayerSwitchingList_Data
-      /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+    //选择图层
+    choseLayerSwitching(url, isClear) {
+      this.$refs.supermap.layerSwitching(url, isClear);
+    },
+    //选择图层(传递数组)
+    choseLayerSwitchingList(urlList) {
+      this.$refs.supermap.layerSwitchingList(urlList);
     },
-    mounted() {
-      this.bottomMenuList() //获取底部公共组件消息和任务
+    //选择图层(传递数组)  带数据
+    choseLayerSwitchingList_Data(urlList) {
+      this.$refs.supermap.layerSwitchingList_Data(urlList);
     },
-    watch: {
-      nickName(val) {
-        this.peopleList2 = [];
+    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
 
-        for (let i in this.peopleList) {
-          if (this.peopleList[i].nickName.indexOf(val) != -1) {
-            this.peopleList2.push(this.peopleList[i]);
-          }
-        }
-        console.log(this.peopleList2)
+    //初始化
+    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) {
+      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();
     },
-    methods: {
-      /** ----------------------------------底部按钮公用组件开始------------------------------------- */
-      bottomMenuList() {
-        this.$refs.bottomMenu.selectTaskList() //获取任务列表
-        this.$refs.bottomMenu.selectMessageList() //获取消息列表
-      },
-      showDialog(click) {
-        if (click == 'eventLocation') {
-          this.$refs.eventLocation.showEventLocation()
-          this.$refs.bottomMenu.showMeasure = 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.bottomMenu.showMeasure) {
-            this.$refs.bottomMenu.showMeasure = true
-          } else {
-            this.$refs.bottomMenu.showMeasure = false
-          }
-        } else if (click == 'layerSwitching') {
-          this.$refs.bottomMenu.showMeasure = 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.bottomMenu.showMeasure = false
-          this.$refs.bottomMenu.showChild = false
-          this.$refs.bottomMenu.showBanChild = false
-          this.$refs.bottomMenu.showChangChild = false
-        } else if (click == 'forestban') {
-          this.$refs.bottomMenu.showMeasure = 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.bottomMenu.showMeasure = 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)
-      },
-      /** ----------------------------------底部按钮公用组件结束------------------------------------- */
-
-      //初始化
-      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) {
-        if (this.personId == personId) { //当前人员已经被点击一次 不再重复加载
-          return;
-        }
-        this.personId = personId;
-        this.showNothing = false;
-        this.recordList = [];
-        getPlanList(personId).then(res => {
-          this.xunLinListOne = res.data;
-        })
+    //点击右侧巡查计划获取 巡查记录
+    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();
-      },
-      //点击右侧巡查计划获取 巡查记录
-      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);
+        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(() => {
-          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)
-          }, 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', 0.8)
-        }
-      },
+          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", 0.8);
+      }
+    },
 
-      //吉祥物收起左右框
-      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%',
+    //吉祥物收起左右框
+    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%'],
+              fontWeight: "normal",
+              color: "#02d6fc",
+              fontSize: "14",
+            },
+          },
+        ],
+        series: [
+          {
+            name: "circle",
+            type: "pie",
+            center: ["22%", "50%"],
+            radius: ["60%", "70%"],
             clockWise: true,
             label: {
               normal: {
-                position: 'center'
-
-              }
+                position: "center",
+              },
             },
             itemStyle: {
               normal: {
                 label: {
-                  show: false
+                  show: false,
                 },
                 labelLine: {
-                  show: false
-                }
-              }
-            },
-            data: [{
-              value: point,
-              name: '当前在线',
-              label: {
-                show: true, //单独显示该数据项
-                formatter: '{c}人',
-                labelLayout: {
-                  top: '50%'
+                  show: false,
                 },
-                textStyle: {
-                  color: '#02d6fc',
-                  fontSize: 14
-                }
               },
-              itemStyle: {
-                normal: {
-                  color: { // 完成的圆环的颜色
-                    colorStops: [{
-                      offset: 0,
-                      color: '#02d6fc' // 0% 处的颜色
-                    }, {
-                      offset: 1,
-                      color: '#367bec' // 100% 处的颜色
-                    }]
+            },
+            data: [
+              {
+                value: point,
+                name: "当前在线",
+                label: {
+                  show: true, //单独显示该数据项
+                  formatter: "{c}人",
+                  labelLayout: {
+                    top: "50%",
                   },
-                  label: {
-                    show: false
+                  textStyle: {
+                    color: "#02d6fc",
+                    fontSize: 14,
                   },
-                  labelLine: {
-                    show: false
-                  }
-                }
-              }
-            }, {
-              value: handred - point,
-              itemStyle: {
-                color: '#666'
-              }
-            }]
-          }]
-        })
-      }
-
-
+                },
+                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;
-  }
-</style>
+.h-27 {
+  height: 27rem;
+}
+</style>