修改地图

ruoyi-ui/src/views/board/GPS/index.vue

@@ -159,14 +159,14 @@ export default {
         type: 'warning'
       }).then(() => {
         handleAlarmInfo({
-          alarmInfoId: e.no
+          alarmInfoId: e.value1
         }).then(e => {
           if (e.code === 200) {
             this.$message({
               type: 'success',
               message: '已处理!'
             });
-            this.setTable3()
+            this.setAlarmInfos()
           } else {
             this.$message({
               type: 'info',

ruoyi-ui/src/views/board/equipmentMonitoring/index.vue

@@ -3,7 +3,7 @@
     <div class="centerImg"></div>
     <div class="leftMenu">
       <div v-for="(i,k) in deviceList" :key="k" class="item" @click="getRightData(i)">
-        <span>{{ i.deviceModeName }}</span>
+        <span class="longText">{{ i.deviceModeName }}</span>
       </div>
     </div>
     <div ref="right" class="right">
@@ -39,6 +39,11 @@
           :header-cell-style="{ textAlign: 'center',backgroundColor:'#0a457d' }"
           :max-height="maxHeight">
           style="width: 100%">
+          <el-table-column
+            type="index"
+            label="序号"
+            width="50">
+          </el-table-column>
           <el-table-column v-for="i in deviceDataColumns" :label="i.columnName" :prop="i.columnKey">
             <template slot-scope="scope">
               <img v-if="tableData[scope.$index][i.columnKey].toString().includes('http')"
@@ -227,15 +232,17 @@ export default {
     width: 12vw;
     height: 5.1vw;
     margin-bottom: 1vw;
+    position: relative;
   }
 
   span {
     position: absolute;
     left: 44%;
-    line-height: 5.1vw;
+    top: 50%;
+    transform: translateY(-50%);
     font-size: 1vw;
     color: #f1f3f5;
-    white-space: nowrap;
+    //text-align: center;
   }
 
 }
@@ -298,4 +305,8 @@ export default {
     }
   }
 }
+.longText{
+  width: 6.5vw;
+  overflow: hidden;
+}
 </style>

ruoyi-ui/src/views/board/senso/index.vue

@@ -16,11 +16,11 @@
                     <div class="info1">设备编号:</div>
                     <div class="info2"> {{ topData.deviceCode }}</div>
                   </div>
-                  <div class="info" >
+                  <div class="info">
                     <div class="info1">设备名称:</div>
                     <div class="info2">{{ topData.deviceName }}</div>
                   </div>
-                  <div class="info" >
+                  <div class="info">
                     <div class="info1">设备位置:</div>
                     <div class="info2">{{ topData.deviceLocation }}</div>
                   </div>
@@ -38,15 +38,25 @@
                   </el-col>
                   <el-col :span="12">
                     <div style="position: absolute; right: 30px;">
-                      <span style="color: #fff;"> 开始时间：</span>
+                      <span style="color: #fff;"> 起止时间：</span>
-                      <div style="display: inline-block;width: 220px;margin-right: 12px;">
+                      <div style="display: inline-block;margin-right: 12px;">
                         <el-date-picker
                           v-model="date"
-                          format="yyyy-MM-dd"
+                          end-placeholder="结束日期"
-                          placeholder="选择日期"
+                          format="yyyy-MM-dd hh:ss:mm"
-                          type="date"
+                          range-separator="至"
+                          start-placeholder="开始日期"
+                          type="datetimerange"
                           value-format="timestamp">
                         </el-date-picker>
+                        <!--                        - -->
+                        <!--                        <el-date-picker-->
+                        <!--                          v-model="date1"-->
+                        <!--                          format="yyyy-MM-dd"-->
+                        <!--                          placeholder="选择日期"-->
+                        <!--                          type="date"-->
+                        <!--                          value-format="timestamp">-->
+                        <!--                        </el-date-picker>-->
                       </div>
                       <el-button type="primary" @click="search">搜索</el-button>
                       <el-button @click="reset">重置</el-button>
@@ -57,15 +67,16 @@
                 <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" :label="i.columnName" :prop="i.columnKey">
+                  <el-table-column v-for="i in deviceDataColumns" :key="i.columnName" :label="i.columnName"
+                                   :prop="i.columnKey">
                     <template slot-scope="scope">
                       <el-image
                         v-if="scope.row[i.columnKey].toString().includes('http')"
-                        style="width: 100px; height: 100px"
+                        :preview-src-list="[scope.row[i.columnKey]]"
                         :src="scope.row[i.columnKey]"
-                        :preview-src-list="[scope.row[i.columnKey]]">
+                        style="width: 100px; height: 100px">
                       </el-image>
-                      <span v-else>{{scope.row[i.columnKey]}}</span>
+                      <span v-else>{{ scope.row[i.columnKey] }}</span>
 
                     </template>
                   </el-table-column>
@@ -78,7 +89,6 @@
           </el-collapse-item>
         </el-collapse>
       </div>
-
       <div v-show="isMap" id="map" class="map"></div>
       <div v-for="i in bottomData">
         <div class="itemBg">
@@ -100,6 +110,46 @@
           </div>
         </div>
       </div>
+      <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>
+        <el-table-column
+          label="日期"
+          property="date"
+          width="120">
+          <template slot-scope="scope">
+            {{
+              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="longitude">
+        </el-table-column>
+        <el-table-column
+          label="纬度"
+          property="latitude">
+        </el-table-column>
+      </el-table>
     </div>
   </div>
 </template>
@@ -115,12 +165,17 @@ import {
 } from '@/utils/coordtransform'
 
 let map = null
+let maptext = null
+let mapMarker = null
+let flag = true
 export default {
   components: {},
   data() {
     return {
+      vh: document.documentElement.offsetHeight / 100,
       topData: {},
       bottomData: [],
+      mapData: [],
       collapseNo: '1',
       radio: '日统计报表',
       tableData: [],
@@ -132,7 +187,7 @@ export default {
       deviceDataColumns: [],
       show: false,
       isMap: false,
-      date: new Date(new Date().toLocaleDateString()).getTime()
+      date: [new Date(new Date().toLocaleDateString()).getTime(), new Date(new Date().toLocaleDateString()).getTime() + 1000 * 60 * 60 * 24],
     }
   },
   async mounted() {
@@ -150,10 +205,11 @@ export default {
     async search() {
       this.currentPage = 1
       await this.setHistoryData()
+      flag = true
     },
     async reset() {
       this.currentPage = 1
-      this.date = new Date(new Date().toLocaleDateString()).getTime()
+      this.date = [new Date(new Date().toLocaleDateString()).getTime(), new Date(new Date().toLocaleDateString()).getTime() + 1000 * 60 * 60 * 24]
       await this.setHistoryData()
     },
     setPolyline(e) {
@@ -162,20 +218,40 @@ export default {
         borderWeight: 2, // 线条宽度，默认为 1
       });
       map.add(polyline);
-      map.setFitView()
     },
     setMarker(e, i) {
       let marker = new AMap.Marker({
         position: e,   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
         title: `信息\n经度：${e[0]}\n纬度：${e[1]}\n时间：${i}`,
-        offset:new AMap.Pixel(-2.5,-2.5),
+        offset: new AMap.Pixel(-2.5, -2.5),
-        content:`<div style="width: 5px;height: 5px; border-radius: 50%;background-color: #1890ff"> </div>`
+        content: `<div style="width: 5px;height: 5px; border-radius: 50%;background-color: #1890ff"> </div>`
       });
       map.add(marker);
-      map.setFitView()
     },
+    setMarkerSharding(e) {
+      let sum = e.length
+      let nowNum = 0
+      let fun = () => {
+        setTimeout(() => {
+          let arr = e.splice(nowNum * 20, (nowNum + 1) * 20)
+          arr.forEach(v => {
+            this.setMarker([v.longitude, v.latitude], v.ts)
+          })
+          this.setPolyline(arr.map(e => {
+            return [e.longitude, e.latitude]
+          }))
+          nowNum += 1
+
+          flag && map.setFitView()
+          if (nowNum * 20 <= sum) {
+            fun()
+          }
+        }, 1000 * 0.5)
+      }
+      fun()
+    },
+
     async currentChange(e) {
-      console.log(e)
       this.currentPage = e
       await this.setHistoryData()
     },
@@ -194,7 +270,7 @@ export default {
     async setDeviceInfo() {
       const {data} = await getDeviceInfo(this.deviceId)
       this.topData = data || {}
-      if(this.topData.gpsFlag !== '1'){
+      if (this.topData.gpsFlag !== '1') {
         this.date = null
       }
     },
@@ -206,28 +282,24 @@ export default {
         "sceneId": this.$store.getters.sceneId,
         "deviceId": this.deviceId,
         deviceModeId: this.deviceModeId,
-        "offset":this.topData.gpsFlag !== '1'? (this.currentPage - 1) : null,
+        "offset": this.topData.gpsFlag !== '1' ? (this.currentPage - 1) : null,
-        "limit": this.topData.gpsFlag !== '1'?10:null,
+        "limit": this.topData.gpsFlag !== '1' ? 10 : null,
-        startTime: this.date,
+        startTime: this.date?.[0],
-        endTime: this.date ? this.date + (1000 * 60 * 60 * 24) : null
+        endTime: this.date?.[1],
       })
       let dataList = data.historyData?.dataList || []
       if (dataList.filter(e => (Object.keys(e).includes('longitude') || Object.keys(e).includes('longitude'))).length > 0) {
         this.isMap = true
-        let mapData = dataList.filter(e => (Object.keys(e).includes('longitude') || Object.keys(e).includes('longitude'))).map(e=>{
+        let mapData = dataList.filter(e => (Object.keys(e).includes('longitude') || Object.keys(e).includes('longitude'))).map(e => {
-          let [lng,lat] = wgs84togcj02(e.longitude,e.latitude)
+          let [lng, lat] = wgs84togcj02(e.longitude, e.latitude)
           return {
             ...e,
-            longitude:lng,
+            longitude: lng,
-            latitude:lat
+            latitude: lat
           }
         })
-        mapData.forEach(e => {
+        this.mapData = JSON.parse(JSON.stringify(mapData))
-          this.setMarker([e.longitude, e.latitude], e.ts)
+        this.setMarkerSharding(mapData)
-        })
-        this.setPolyline(mapData.map(e => {
-          return [e.longitude, e.latitude]
-        }))
         // this.tableData = data.historyData?.dataList
         // this.total = data.historyData?.count
         // this.currentPage = 1
@@ -248,6 +320,27 @@ export default {
     async setLinkDevices() {
       const {data} = await getLinkDevices(this.deviceId)
       this.bottomData = data
+    },
+    mapTableChange(e) {
+      maptext && maptext.remove()
+      mapMarker && mapMarker.remove()
+      maptext = new AMap.Text({
+        text: `信息\n经度：${e.longitude}\n纬度：${e.latitude}\n时间：${e.ts}`,
+        anchor: "bottom-center", //设置文本标记锚点位置
+        cursor: "pointer", //指定鼠标悬停时的鼠标样式。
+        position: [e.longitude, e.latitude], //点标记在地图上显示的位置
+      });
+      mapMarker = new AMap.Marker({
+        position: [e.longitude, e.latitude],   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+        offset: new AMap.Pixel(-5, -5),
+        content: `<div style="width: 10px;height: 10px; border-radius: 50%;background-color: #1890ff"> </div>`
+      });
+
+      map.add(maptext);
+      map.add(mapMarker);
+      map.setFitView([maptext,mapMarker])
+      flag = false
+      console.log(e)
     }
   }
 };
@@ -313,6 +406,14 @@ export default {
   /deep/ .el-table .el-table__header-wrapper th {
     color: #05ecf3;
   }
+
+  /deep/ .el-table .current-row {
+    color: #000;
+  }
+
+  /deep/ .el-table .el-table__row:hover {
+    color: #000;
+  }
 }
 
 
@@ -398,7 +499,8 @@ export default {
   width: 100%;
   height: 50vh;
 }
-.infoDiv{
+
+.infoDiv {
   position: absolute;
   left: 60vh;
   height: 100%;