巡查任务画线

src/components/supermap-2.5d.vue

@@ -30,6 +30,8 @@ export default {
       markerboxEntity: [],//地图落点实体
       connectBoxEntity: null,//地图线实体
       graphicsBoxEntity: null,//地图面实体
+      markerboxEntityRadius: [],//地图落点实体
+      connectBoxEntityTwo: null,//地图线实体
       /*************************原地图属性*********************/
       isEditableLayers: false, //绘图控件
 
@@ -51,6 +53,78 @@ export default {
   props: {},
   methods: {
     //移除之前添加的点
+    clearMRadius() {
+      this.viewer.entities.removeAll()
+      if (this.markerboxEntityRadius != null) {
+        this.viewer.entities.remove(this.markerboxEntityRadius)
+        this.markerboxEntityRadius = []
+      }
+    },
+    //移除之前添加的线
+    clearTwoC() {
+      // 查找ID为entityE的图形对象
+      this.viewer.entities.remove(this.connectBoxEntityTwo)
+    },
+    /**
+     * 地图落点-覆盖范围
+     */
+    setMarkersRadius(makerList) {
+      let that = this
+      that.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas)
+      clearInterval(that.aac)
+      for (let i in makerList) {
+        let longitude = makerList[i].lng;
+        let latitude = makerList[i].lat;
+        let marker = that.viewer.entities.add({
+          name:"",
+          position: Cesium.Cartesian3.fromDegrees(longitude, latitude),
+          billboard: {
+            image: iconList[makerList[i].icon],
+            width: 48,
+            height: 48,
+            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+            disableDepthTestDistance:Number.POSITIVE_INFINITY
+          },
+          description: makerList[i].bindPopupHtml,
+          click: makerList[i].click,
+          parameter: makerList[i].parameter
+        })
+        that.markerboxEntityRadius.push(marker)
+        //绘制摄像头的圈（覆盖范围）
+        that.viewer.entities.add({
+          position: Cesium.Cartesian3.fromDegrees(makerList[i].lng,makerList[i].lat,2),
+          ellipse: {
+            semiMinorAxis: makerList[i].radius,
+            semiMajorAxis: makerList[i].radius,
+            material: Cesium.Color.AQUA.withAlpha(0.5),
+            outline: true,
+            outlineColor: Cesium.Color.AQUA.withAlpha(0.5),
+            outlineWidth: 12,
+          },
+        });
+      }
+      that.viewer.scene.globe.depthTestAgainstTerrain = false
+      that.createLeftClickDescription()
+      that.createRightClickDescription()
+    },
+    /**
+     * 地图画线(贴地)
+     */
+    setConnectTwoList(connectList,color,withAlpha) {
+      let that = this
+      //Cesium.Color.fromCssColorString('#67ADDF')   16进制颜色设置
+      let material = Cesium.Color.fromCssColorString(color).withAlpha(withAlpha);
+      that.connectBoxEntityTwo = that.viewer.entities.add({
+        Type: 'Polyline',
+        polyline: {
+          positions: Cesium.Cartesian3.fromDegreesArray(connectList),
+          clampToGround: true,//贴地 true,不贴地  false
+          width: 5,
+          material: material
+        }
+      })
+    },
+    //移除之前添加的点
     clearM() {
       this.viewer.entities.removeAll()
       if (this.markerboxEntity != null) {

src/views/leader.vue

@@ -1,101 +1,95 @@
 <template>
-	<div class="visual-con">
-		<!--头部-->
-		<vheader></vheader>
-		<!--主体-->
-		<div class="visual-body">
-			<!-- 左侧 -->
-			<div class="leftbar" :class="indentleft" ref="left">
-				<div class="forthis">
-					<dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">
-						<img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;" />
-						<div class="this-title">
-							<span>人员分布</span>
-							<dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;" />
-						</div>
-						<div class="i-list-con h-25">
-							<div id="personnel-chart" style="width: 100%;height:12vh;"></div>
-							<div class="d-l-con-icon">
-								<div class="icon-con w-50" :class="{on:iconCurrentIndex1==item.dictType}"
-									v-for="(item,index) in visuForestCloudRYBO"
-                     @click="getRyListByJob(item.dictType)">
-									<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="getTrafficLeader(item.jobValue,item.jobType)">
+  <div class="visual-con">
+    <!--头部-->
+    <vheader></vheader>
+    <!--主体-->
+    <div class="visual-body">
+      <!-- 左侧 -->
+      <div class="leftbar" :class="indentleft" ref="left">
+        <div class="forthis">
+          <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">
+            <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;" />
+            <div class="this-title">
+              <span>人员分布</span>
+              <dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;" />
+            </div>
+            <div class="i-list-con h-25">
+              <div id="personnel-chart" style="width: 100%;height:12vh;"></div>
+              <div class="d-l-con-icon">
+                <div class="icon-con w-50" :class="{on:iconCurrentIndex1==item.dictType}"
+                  v-for="(item,index) in visuForestCloudRYBO" @click="getRyListByJob(item.dictType)">
+                  <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="getTrafficLeader(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>
-				<!--        avatar: ""-->
-				<!--        deptName: "锦程社区第一网格"-->
-				<!--        nickName: "李猛"-->
-				<!--        userId: 102-->
-				<!--        userName: "limeng"-->
-				<div class="forthis">
-					<dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">
-						<img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;" />
-						<div class="i-list-con h-27">
-              <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 icon-mid el-icon-user"></div>
-									<div class="icon-text personnel-name">
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+        <!--        avatar: ""-->
+        <!--        deptName: "锦程社区第一网格"-->
+        <!--        nickName: "李猛"-->
+        <!--        userId: 102-->
+        <!--        userName: "limeng"-->
+        <div class="forthis">
+          <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">
+            <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;" />
+            <div class="i-list-con h-27">
+              <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 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>
-										<h5>{{ item.deptName }}</h5>
-									</div>
-								</div>
-							</div>
-						</div>
-					</dv-border-box-13>
-				</div>
-			</div>
-			<!-- 地图 -->
-<!--			<supermap ref="supermap" style="width: 100%;height: 100vh;" :mapDiv="'forestMap'" class="indexSupermapClass"-->
-<!--				:mapSite="{doubleClickZoom:false}" :codes="['9fa5']" :isSideBySide="false"></supermap>-->
-      <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;" />
-						<div class="this-title">
-							<span>巡查任务</span>
-							<dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;" />
-						</div>
-						<div class="i-list-con h-73">
-							<div class="h-73 overflow-y">
+                    <h5>{{ item.deptName }}</h5>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <!-- 地图 -->
+      <!--			<supermap ref="supermap" style="width: 100%;height: 100vh;" :mapDiv="'forestMap'" class="indexSupermapClass"-->
+      <!--				:mapSite="{doubleClickZoom:false}" :codes="['9fa5']" :isSideBySide="false"></supermap>-->
+      <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;" />
+            <div class="this-title">
+              <span>巡查任务</span>
+              <dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;" />
+            </div>
+            <div class="i-list-con h-73">
+              <div class="h-73 overflow-y">
                 <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 }})
@@ -103,21 +97,21 @@
                       </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>
                     </div>
                   </el-collapse-item>
                 </el-collapse>
-								<!--<div class="d-l-con" :class="{on:listCurrentIndex2==item.planName}"
+                <!--<div class="d-l-con" :class="{on:listCurrentIndex2==item.planName}"
                      v-for="(item,index) in xunLinListOne"
                      @click="setConnectList(item.planLine,item.planName)">
                   <div class="d-l-l-text">
@@ -125,177 +119,181 @@
                     <h4>{{ item.planName }}</h4>
                   </div>
                 </div>-->
-							</div>
-						</div>
-					</dv-border-box-13>
-				</div>
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
 
 
-			</div>
-			<vBottomMenu ref="bottomMenu"></vBottomMenu>
-			<!--      <el-tooltip :content="indentText" placement="top" :disabled="indentdisabled">-->
-			<!--        <div class="mascot" ref="mascot" :class="indentStyle" @click="indent">-->
-			<!--          <img src="@/assets/images/mascot.png"/>-->
-			<!--        </div>-->
-			<!--      </el-tooltip>-->
-		</div>
-		<eventLocation ref="eventLocation"></eventLocation>
-		<TVWall ref="TVWall"></TVWall>
-	</div>
+      </div>
+      <vBottomMenu ref="bottomMenu"></vBottomMenu>
+      <!--      <el-tooltip :content="indentText" placement="top" :disabled="indentdisabled">-->
+      <!--        <div class="mascot" ref="mascot" :class="indentStyle" @click="indent">-->
+      <!--          <img src="@/assets/images/mascot.png"/>-->
+      <!--        </div>-->
+      <!--      </el-tooltip>-->
+    </div>
+    <eventLocation ref="eventLocation"></eventLocation>
+    <TVWall ref="TVWall"></TVWall>
+  </div>
 </template>
 
 <script>
-	import {
-		getTrafficLeader,
-		getPlanList,
-		getRecordList,
-		getPointList,
-		getRy
-	} from '@/api/leader'
+  import {
+    getTrafficLeader,
+    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"; //电视墙弹窗
-	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: [], //人员类型列表
+  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: '1',
+        listCurrentIndex1: '',
+        listCurrentIndex2: '',
+        //左右缩进
+        indentStyle: '',
+        indentleft: '',
+        indentright: '',
+        indentText: '收起左右栏',
+        indentdisabled: false,
+        visuForestCloudRYBO: [], //人员类型列表
         personId: null, //人员
         peopleList: [], //人员列表
         name: '',
         peopleList2: [], //人员列表
         connectList: [], //画线
         patrolTrajectory: null, //任务画线
-				xunLinListOne: [], //巡查任务
-				recordList: [], //巡查记录
-				showNothing: false, //暂无信息
-				zrs: 0, //总人数
-				zxrs: 0 //在线人数
-			}
-		},
-		created() {
+        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
+      //this.getInit()
+      /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+      window.showDialog = this.showDialog
+      window.choseLayerSwitching = this.choseLayerSwitching
+      window.choseLayerSwitchingList = this.choseLayerSwitchingList
       window.choseLayerSwitchingList_Data = this.choseLayerSwitchingList_Data
-			/** ----------------------------------底部按钮公用组件结束------------------------------------- */
-		},
-    mounted(){
+      /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+    },
+    mounted() {
       this.bottomMenuList() //获取底部公共组件消息和任务
     },
-    watch:
-      {
-        name(val) {
-          this.peopleList2 = [];
+    watch: {
+      name(val) {
+        this.peopleList2 = [];
 
-          for (let i in this.peopleList) {
-            if (this.peopleList[i].name.indexOf(val) != -1) {
-              this.peopleList2.push(this.peopleList[i]);
-            }
+        for (let i in this.peopleList) {
+          if (this.peopleList[i].name.indexOf(val) != -1) {
+            this.peopleList2.push(this.peopleList[i]);
           }
-          console.log(this.peopleList2)
         }
-      },
-		methods: {
-			/** ----------------------------------底部按钮公用组件开始------------------------------------- */
+        console.log(this.peopleList2)
+      }
+    },
+    methods: {
+      /** ----------------------------------底部按钮公用组件开始------------------------------------- */
       bottomMenuList() {
-        this.$refs.bottomMenu.selectMessageList()//获取消息列表
+        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 {
-						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
-					}
-				}
+      showDialog(click) {
+        if (click == 'eventLocation') {
+          this.$refs.eventLocation.showEventLocation()
+          this.$refs.supermap.isEditableLayers = false
+          this.$refs.bottomMenu.showChild = false
+          this.$refs.bottomMenu.showBanChild = false
+          this.$refs.bottomMenu.showChangChild = false
+        } else if (click == 'editableLayers') {
+          this.$refs.bottomMenu.showChild = false
+          this.$refs.bottomMenu.showBanChild = false
+          this.$refs.bottomMenu.showChangChild = false
+          if (!this.$refs.supermap.isEditableLayers) {
+            this.$refs.supermap.isEditableLayers = true
+          } else {
+            this.$refs.supermap.isEditableLayers = false
+          }
+        } else if (click == 'layerSwitching') {
+          this.$refs.supermap.isEditableLayers = false
+          this.$refs.bottomMenu.showBanChild = false
+          this.$refs.bottomMenu.showChangChild = false
+          if (!this.$refs.bottomMenu.showChild) {
+            this.$refs.bottomMenu.showChild = true
+          } else {
+            this.$refs.bottomMenu.showChild = false
+          }
+        } else if (click == 'TVWall') {
+          this.$refs.TVWall.showTVWall()
+          this.$refs.supermap.isEditableLayers = false
+          this.$refs.bottomMenu.showChild = false
+          this.$refs.bottomMenu.showBanChild = false
+          this.$refs.bottomMenu.showChangChild = false
+        } else if (click == 'forestban') {
+          this.$refs.supermap.isEditableLayers = false
+          this.$refs.bottomMenu.showChild = false
+          this.$refs.bottomMenu.showChangChild = false
+          if (!this.$refs.bottomMenu.showBanChild) {
+            this.$refs.bottomMenu.showBanChild = true
+          } else {
+            this.$refs.bottomMenu.showBanChild = false
+          }
+        } else if (click == 'forestchang') {
+          this.$refs.supermap.isEditableLayers = false
+          this.$refs.bottomMenu.showBanChild = false
+          this.$refs.bottomMenu.showChild = false
+          if (!this.$refs.bottomMenu.showChangChild) {
+            this.$refs.bottomMenu.showChangChild = true
+          } else {
+            this.$refs.bottomMenu.showChangChild = false
+          }
+        }
 
-			},
-			//选择图层
-			choseLayerSwitching(url, isClear) {
-				this.$refs.supermap.layerSwitching(url, isClear)
-			},
-			//选择图层(传递数组)
-			choseLayerSwitchingList(urlList) {
-				this.$refs.supermap.layerSwitchingList(urlList)
-			},
+      },
+      //选择图层
+      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 = '1'
         that.listCurrentIndex1 = ''
         that.listCurrentIndex2 = ''
-        getRyList({leadType: "3"}).then(function (response) {
+        getRyList({
+          leadType: "3"
+        }).then(function(response) {
           // console.log(JSON.stringify(response.data));
           that.visuForestCloudRYBO = response.data.ryList
           that.zrs = response.data.num
@@ -310,246 +308,250 @@
         that.name = ''
         that.peopleList = []
         that.peopleList2 = []
-        getRyListByJob({leadType: "3", dictType: jobValue}).then(function (response) {
+        getRyListByJob({
+          leadType: "3",
+          dictType: jobValue
+        }).then(function(response) {
           // console.log(JSON.stringify(response.data));
           that.peopleList = response.data
           that.peopleList2 = response.data
         })
       },
-			//初始化
-			getInit() {
-				let that = this
-				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()
-				})
-			},
-			//获取左侧人员列表
-			getTrafficLeader(linJob, linType) {
-				this.listCurrentIndex1 = ''
-				this.listCurrentIndex2 = ''
-				this.iconCurrentIndex1 = linJob
-				this.peopleList = []
+      //初始化
+      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()
+        })
+      },
+      //获取左侧人员列表
+      getTrafficLeader(linJob, linType) {
+        this.listCurrentIndex1 = ''
+        this.listCurrentIndex2 = ''
+        this.iconCurrentIndex1 = linJob
+        this.peopleList = []
         this.peopleList2 = []
-				getTrafficLeader(linJob, linType).then(res => {
-					this.peopleList = res.data
-					this.peopleList2 = res.data
-				})
+        getTrafficLeader(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){//当前人员已经被点击一次 不再重复加载
+      },
+      //点击左侧人员列表获取 巡查轨迹
+      getPlanList(personId) {
+        if (this.personId == personId) { //当前人员已经被点击一次 不再重复加载
           return;
         }
         this.personId = personId;
-				this.showNothing = false;
-				this.recordList = [];
-				getPlanList(personId).then(res => {
-					this.xunLinListOne = res.data;
-				})
+        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()
+      },
+      //点击右侧巡查轨迹获取 巡查记录
+      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);
-				})
-			},
+      },
+      //点击右侧巡查记录获取 巡查轨迹
+      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){
+        if (this.patrolTrajectory == patrolTrajectory) {
           this.patrolTrajectory = null;
-        }else {
+        } 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.setConnectList(JSON.parse(patrolTrajectory), '#04f');
+          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++) {
-						let latlng = {
-							lat: res.data[i].latitude,
-							lng: res.data[i].longitude
-						}
-						this.connectList.push(latlng)
-					}
-					setTimeout(() => {
-						// that.$refs.supermap.clearC()
-						// that.$refs.supermap.setConnectList(this.connectList, '#f40')
-            that.$refs.supermap.clearCTwo()
-            that.$refs.supermap.setConnectTwoList(this.connectList, '#f40')
-					}, 1000)
-				} else {
-					//that.$refs.supermap.clearC()
-          that.$refs.supermap.clearCTwo()
-				}
-			},
-			setConnectList(points, planName) {
-				this.listCurrentIndex2 = planName
-				this.connectList = []
-				if (points != null && points != '') {
-					this.connectList = JSON.parse(points)
-					this.$refs.supermap.setConnectTwoList(this.connectList, 'red')
-				}
-			},
+      //点击巡查轨迹时段 巡查轨迹落点
+      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(that.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 + '人',
-						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'
+      //吉祥物收起左右框
+      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 + '人',
+            x: '48%',
+            y: '25%',
+            textStyle: {
+              fontWeight: 'normal',
+              color: '#02d6fc',
+              fontSize: '14'
+            }
+          }],
+          series: [{
+            name: 'circle',
+            type: 'pie',
+            center: ['22%', '50%'],
+            radius: ['60%', '70%'],
+            clockWise: true,
+            label: {
+              normal: {
+                position: 'center'
 
-							}
-						},
-						itemStyle: {
-							normal: {
-								label: {
-									show: false
-								},
-								labelLine: {
-									show: false
-								}
-							}
-						},
-						data: [{
-							value: handred,
-							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:0,
-							itemStyle: {
-								color: '#666'
-							}
-						}]
-					}]
-				})
-			}
+              }
+            },
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false
+                },
+                labelLine: {
+                  show: false
+                }
+              }
+            },
+            data: [{
+              value: handred,
+              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: 0,
+              itemStyle: {
+                color: '#666'
+              }
+            }]
+          }]
+        })
+      }
 
 
-		},
-		//过滤器
+    },
+    //过滤器
 
-		filters: {
+    filters: {
 
-			//标题截取前20
-			ellipsis20(value) {
-				if (!value) return '';
-				if (value.length > 20) {
-					return value.slice(0, 20) + '...'
-				}
-				return value
-			}
-		},
+      //标题截取前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>