From 717bd2dcdef703cf3456ebe047025d115cf87ec4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=9C=E7=AC=99=E6=AD=8C?= <2277317060@qq.com>
Date: Sat, 20 Apr 2024 15:21:32 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=9C=B0=E5=9C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ruoyi-ui/src/views/board/senso/index.vue | 241 +++++++++++++----------
 1 file changed, 140 insertions(+), 101 deletions(-)

diff --git a/ruoyi-ui/src/views/board/senso/index.vue b/ruoyi-ui/src/views/board/senso/index.vue
index 09d6ecf..a453eaf 100644
--- a/ruoyi-ui/src/views/board/senso/index.vue
+++ b/ruoyi-ui/src/views/board/senso/index.vue
@@ -9,7 +9,7 @@
               <div class="itemBg">
                 <div class="icon"></div>
                 <div class="icon1"></div>
-                <div :style="'background-image: url('+(topData&&topData.devicePic)+')'" class="icon2"></div>
+                <div :style="'background-image: url(' + (topData && topData.devicePic) + ')'" class="icon2"></div>
                 <div class="title"> {{ topData.monitorUnitName }}</div>
                 <div class="infoDiv">
                   <div class="info">
@@ -40,14 +40,8 @@
                     <div style="position: absolute; right: 30px;">
                       <span style="color: #fff;"> 起止时间：</span>
                       <div style="display: inline-block;margin-right: 12px;">
-                        <el-date-picker
-                          v-model="date"
-                          end-placeholder="结束日期"
-                          format="yyyy-MM-dd hh:ss:mm"
-                          range-separator="至"
-                          start-placeholder="开始日期"
-                          type="datetimerange"
-                          value-format="timestamp">
+                        <el-date-picker v-model="date" end-placeholder="结束日期" format="yyyy-MM-dd hh:ss:mm"
+                          range-separator="至" start-placeholder="开始日期" type="datetimerange" value-format="timestamp">
                         </el-date-picker>
                         <!--                        - -->
                         <!--                        <el-date-picker-->
@@ -64,16 +58,14 @@
                     </div>
                   </el-col>
                 </el-row>
-                <el-table v-if="show" :cell-style="setStyle"
-                          :data="tableData" :header-cell-style="{ textAlign: 'center',backgroundColor:'#0a457d' }"
-                          style="width: 100%;margin-top: 12px;">
+                <el-table v-if="show" :cell-style="setStyle" :data="tableData"
+                  :header-cell-style="{ textAlign: 'center', backgroundColor: '#0a457d' }"
+                  style="width: 100%;margin-top: 12px;">
                   <el-table-column v-for="i in deviceDataColumns" :key="i.columnName" :label="i.columnName"
-                                   :prop="i.columnKey">
+                    :prop="i.columnKey">
                     <template slot-scope="scope">
-                      <el-image
-                        v-if="scope.row[i.columnKey].toString().includes('http')"
-                        :preview-src-list="[scope.row[i.columnKey]]"
-                        :src="scope.row[i.columnKey]"
+                      <el-image v-if="scope.row[i.columnKey].toString().includes('http')"
+                        :preview-src-list="[scope.row[i.columnKey]]" :src="scope.row[i.columnKey]"
                         style="width: 100px; height: 100px">
                       </el-image>
                       <span v-else>{{ scope.row[i.columnKey] }}</span>
@@ -82,7 +74,7 @@
                   </el-table-column>
                 </el-table>
                 <el-pagination v-show="!isMap" :currentPage="currentPage" :pageSize="10" :total="total" background
-                               layout="prev, pager, next" @current-change="currentChange">
+                  layout="prev, pager, next" @current-change="currentChange">
                 </el-pagination>
               </div>
             </div>
@@ -94,7 +86,7 @@
         <div class="itemBg">
           <div class="icon"></div>
           <div class="icon1"></div>
-          <div :style="'background-image: url('+(i&&i.devicePic)+')'" class="icon2"></div>
+          <div :style="'background-image: url(' + (i && i.devicePic) + ')'" class="icon2"></div>
           <div class="title"> {{ i.deviceName }}</div>
           <div class="info">
             <div class="info1">设备编号:</div>
@@ -112,46 +104,30 @@
       </div>
 
       <div style="text-align: center;margin: 8px 0;">
-      <el-button type="primary" v-if="isMap" @click="continueMap" :disabled="mapTotal < (mapOffset+1)*100" >继续加载</el-button>
+        <el-button type="primary" v-if="isMap" @click="continueMap"
+          :disabled="mapTotal < (mapOffset + 1) * 100">继续加载</el-button>
       </div>
-      <el-table
-        v-show="isMap"
-        :data="mapData"
-        :max-height="40*vh"
-        highlight-current-row
-        style="width: 100%"
+      <el-table v-show="isMap" :data="mapData" :max-height="40 * vh" highlight-current-row style="width: 100%"
         @current-change="mapTableChange">
-        <el-table-column
-          type="index"
-          width="50">
+        <el-table-column type="index" width="50">
         </el-table-column>
-        <el-table-column
-          label="日期"
-          property="date"
-          width="120">
+        <el-table-column label="日期" property="date" width="120">
           <template slot-scope="scope">
             {{
-              parseTime(scope.row.ts, '{y}-{m}-{d}')
+          parseTime(scope.row.ts, '{y}-{m}-{d}')
+        }}
+          </template>
+        </el-table-column>
+        <el-table-column label="时间" property="time" width="120">
+          <template slot-scope="scope">
+            {{
+            parseTime(scope.row.ts, '{h}:{i}:{s}')
             }}
           </template>
         </el-table-column>
-        <el-table-column
-          label="时间"
-          property="time"
-          width="120">
-          <template slot-scope="scope">
-            {{
-              parseTime(scope.row.ts, '{h}:{i}:{s}')
-            }}
-          </template>
+        <el-table-column label="经度" property="longitude">
         </el-table-column>
-        <el-table-column
-          label="经度"
-          property="longitude">
-        </el-table-column>
-        <el-table-column
-          label="纬度"
-          property="latitude">
+        <el-table-column label="纬度" property="latitude">
         </el-table-column>
       </el-table>
     </div>
@@ -169,6 +145,11 @@ import {
 } from '@/utils/coordtransform'
 
 let map = null
+let startMarker = null
+let endMarker = null
+let polyline1 = []
+let startMarkerhs = 0
+let endMarkerhs = 0
 let maptext = null
 let mapMarker = null
 let flag = true
@@ -176,8 +157,8 @@ export default {
   components: {},
   data() {
     return {
-      mapOffset:0,
-      mapTotal:0,
+      mapOffset: 0,
+      mapTotal: 0,
       vh: document.documentElement.offsetHeight / 100,
       topData: {},
       bottomData: [],
@@ -225,6 +206,16 @@ export default {
       });
       map.add(polyline);
     },
+    setPolyline1(e) {
+      polyline1 && map.remove(polyline1);
+      polyline1 = new AMap.Polyline({
+        path: e,
+        strokeColor:'#000',
+        strokeWeight:10,
+        borderWeight: 2, // 线条宽度，默认为 1
+      });
+      map.add(polyline1);
+    },
     setMarker(e, i) {
       let marker = new AMap.Marker({
         position: e,   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
@@ -232,18 +223,62 @@ export default {
         offset: new AMap.Pixel(-2.5, -2.5),
         content: `<div style="width: 5px;height: 5px; border-radius: 50%;background-color: #1890ff"> </div>`
       });
+      marker.on('click', (e) => {
+        let markers = map.getAllOverlays('marker')
+        if (!startMarker) {
+          startMarker = new AMap.Marker({
+            position: [e.lnglat.KL, e.lnglat.kT],   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+            title: `信息\n经度：${e.lnglat.KL}\n纬度：${e.lnglat.kT}\n时间：${i}`,
+            offset: new AMap.Pixel(-10, -10),
+            content: `<div style="width: 20px;height: 20px;font-size:14px;line-height:20px;text-align:center; border-radius: 50%;color:#fff;background-color: #00e03b">起</div>`
+          });
+          map.add(startMarker);
+          startMarkerhs = e.target.hS
+        } else if (!endMarker) {
+          endMarker = new AMap.Marker({
+            position: [e.lnglat.KL, e.lnglat.kT],   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+            title: `信息\n经度：${e.lnglat.KL}\n纬度：${e.lnglat.kT}\n时间：${i}`,
+            offset: new AMap.Pixel(-10, -10),
+            content: `<div style="width: 20px;height: 20px;font-size:14px;line-height:20px;text-align:center; border-radius: 50%;color:#fff;background-color: #fb6254">止</div>`
+          });
+          map.add(endMarker);
+          endMarkerhs = e.target.hS
+          let markersData = markers.map(v => {
+            if (v.hS >= startMarkerhs && v.hS <= endMarkerhs) {
+              return v
+            } else {
+              return null
+            }
+          }).filter(res => res)
+          this.setPolyline1(markersData.map(v => {
+            return v._position
+          }))
+        } else if (endMarker && startMarker) {
+          startMarkerhs = e.target.hS
+          map.remove(endMarker)
+          endMarker = null
+          map.remove(startMarker)
+          startMarker = new AMap.Marker({
+            position: [e.lnglat.KL, e.lnglat.kT],   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+            title: `信息\n经度：${e.lnglat.KL}\n纬度：${e.lnglat.kT}\n时间：${i}`,
+            offset: new AMap.Pixel(-10, -10),
+            content: `<div style="width: 20px;height: 20px;font-size:14px;line-height:20px;text-align:center; border-radius: 50%;color:#fff;background-color: #00e03b">起</div>`
+          });
+          map.add(startMarker);
+        }
+      })
       map.add(marker);
     },
     setMarkerSharding(e) {
       let sum = e.length
       let nowNum = 0
-          e.forEach(v => {
-            this.setMarker([v.longitude, v.latitude], v.ts)
-          })
-          this.setPolyline(e.map(e => {
-            return [e.longitude, e.latitude]
-          }))
-          flag && map.setFitView()
+      e.forEach(v => {
+        this.setMarker([v.longitude, v.latitude], v.ts)
+      })
+      this.setPolyline(e.map(e => {
+        return [e.longitude, e.latitude]
+      }))
+      flag && map.setFitView()
       // let fun = () => {
       //   setTimeout(() => {
       //     let arr = e.splice(nowNum * 20, (nowNum + 1) * 20)
@@ -275,26 +310,26 @@ export default {
     },
     setStyle(e) {
       if (e.rowIndex % 2 === 0) {
-        return {textAlign: 'center', backgroundColor: '#08406f', color: '#05aaba'}
+        return { textAlign: 'center', backgroundColor: '#08406f', color: '#05aaba' }
       } else {
-        return {textAlign: 'center', backgroundColor: '#063468', color: '#05aaba'}
+        return { textAlign: 'center', backgroundColor: '#063468', color: '#05aaba' }
       }
     },
     async setDeviceInfo() {
-      const {data} = await getDeviceInfo(this.deviceId)
+      const { data } = await getDeviceInfo(this.deviceId)
       this.topData = data || {}
       if (this.topData.gpsFlag !== '1') {
         this.date = null
       }
     },
-    async setHistoryData(isTable=true) {
-      if(isTable){
-      this.isMap = false
-      map.clearMap()
-      this.show = false
-      this.mapOffset = 0
+    async setHistoryData(isTable = true) {
+      if (isTable) {
+        this.isMap = false
+        map.clearMap()
+        this.show = false
+        this.mapOffset = 0
       }
-      const {data} = await getHistoryData({
+      const { data } = await getHistoryData({
         "sceneId": this.$store.getters.sceneId,
         "deviceId": this.deviceId,
         deviceModeId: this.deviceModeId,
@@ -335,7 +370,7 @@ export default {
       }
     },
     async setLinkDevices() {
-      const {data} = await getLinkDevices(this.deviceId)
+      const { data } = await getLinkDevices(this.deviceId)
       this.bottomData = data
     },
     mapTableChange(e) {
@@ -355,11 +390,11 @@ export default {
 
       map.add(maptext);
       map.add(mapMarker);
-      map.setFitView([maptext,mapMarker])
+      map.setFitView([maptext, mapMarker])
       flag = false
       console.log(e)
     },
-    continueMap(){
+    continueMap() {
       this.mapOffset += 1
       this.setHistoryData(false)
     }
@@ -398,43 +433,47 @@ export default {
     background-color: #FFF0 !important;
   }
 
-  /deep/ .el-table th.el-table__cell.is-leaf, {
-    border-color: #0000;
-  }
+  /deep/ .el-table th.el-table__cell.is-leaf,
+  {
+  border-color: #0000;
+}
 
-  /deep/ .el-table::before, .el-table--group::after, .el-table--border::after {
-    background-color: #0000;
-  }
+/deep/ .el-table::before,
+.el-table--group::after,
+.el-table--border::after {
+  background-color: #0000;
+}
 
-  /deep/ .el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th {
-    background-color: #0000;
-  }
+/deep/ .el-table .el-table__header-wrapper th,
+.el-table .el-table__fixed-header-wrapper th {
+  background-color: #0000;
+}
 
-  /deep/ .el-collapse-item__header {
-    background-color: #0000;
-    border-color: #0000;
-    height: auto;
-  }
+/deep/ .el-collapse-item__header {
+  background-color: #0000;
+  border-color: #0000;
+  height: auto;
+}
 
-  /deep/ .el-collapse {
-    border-color: #0000;
-  }
+/deep/ .el-collapse {
+  border-color: #0000;
+}
 
-  /deep/ .el-table td.el-table__cell {
-    border-color: #0000;
-  }
+/deep/ .el-table td.el-table__cell {
+  border-color: #0000;
+}
 
-  /deep/ .el-table .el-table__header-wrapper th {
-    color: #05ecf3;
-  }
+/deep/ .el-table .el-table__header-wrapper th {
+  color: #05ecf3;
+}
 
-  /deep/ .el-table .current-row {
-    color: #000;
-  }
+/deep/ .el-table .current-row {
+  color: #000;
+}
 
-  /deep/ .el-table .el-table__row:hover {
-    color: #000;
-  }
+/deep/ .el-table .el-table__row:hover {
+  color: #000;
+}
 }