修改地图

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

@@ -281,8 +281,7 @@ export default {
       this.num3 = data.onlineDeviceNum
     },
     async setAlarmInfos() {
-      const {rows: data} = await getAlarmInfos({"sceneId": this.sceneId})
+      const {rows: data} = await getAlarmInfos({"sceneId": this.$store.getters.sceneId})
-      console.log(data)
       this.table1Data = data.map((e, i) => {
         return {
           value1: e.alarmInfoId,

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

@@ -46,25 +46,14 @@
                 <!--                  </div>-->
                 <!--                </el-col>-->
                 <!--              </el-row>-->
-                <el-table :cell-style="setStyle" :data="tableData"
+                <el-table v-if="show" :cell-style="setStyle"
-                          :header-cell-style="{ textAlign: 'center',backgroundColor:'#0a457d' }" v-if="show"
+                          :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>
-<!--                  <el-table-column label="传感器编号" prop="columnKey">-->
-<!--                  </el-table-column>-->
-<!--                  <el-table-column label="alias" prop="alias">-->
-<!--                  </el-table-column>-->
-<!--                  <el-table-column label="rssi" prop="rssi">-->
-<!--                  </el-table-column>-->
-<!--                  <el-table-column label="ts" prop="ts">-->
-<!--                  </el-table-column>-->
-<!--                  <el-table-column label="value1" prop="value1">-->
-<!--                  </el-table-column>-->
-<!--                  <el-table-column label="voltage" prop="voltage">-->
-<!--                  </el-table-column>-->
                 </el-table>
-                <el-pagination :currentPage="currentPage" :pageSize="5" :total="total" background layout="prev, pager, next" @current-change="currentChange">
+                <el-pagination :currentPage="currentPage" :pageSize="5" :total="total" background
+                               layout="prev, pager, next" @current-change="currentChange">
                 </el-pagination>
               </div>
             </div>
@@ -72,9 +61,8 @@
         </el-collapse>
       </div>
 
-<!--      <el-collapse  accordion>-->
+      <div v-show="isMap" id="map" class="map"></div>
       <div v-for="i in bottomData">
-<!--          <template slot="title">-->
         <div class="itemBg">
           <div class="icon"></div>
           <div class="icon1"></div>
@@ -93,9 +81,7 @@
             <div class="info2">{{ i.deviceLocation }}</div>
           </div>
         </div>
-<!--          </template>-->
       </div>
-<!--      </el-collapse>-->
     </div>
   </div>
 </template>
@@ -107,9 +93,9 @@ import {
   getLinkDevices
 } from '@/api/board/senso'
 
+let map = null
 export default {
-  components: {
+  components: {},
-  },
   data() {
     return {
       topData: {},
@@ -123,10 +109,15 @@ export default {
       total: 0,
       currentPage: 1,
       deviceDataColumns: [],
-      show:false
+      show: false,
+      isMap:false
     }
   },
   async mounted() {
+    map = new AMap.Map('map', {
+      zoom: 11,
+      center: [113.4, 23.35],
+    });
     if (this.$route.query.id) {
       this.deviceId = this.$route.query.id
       this.deviceModeId = this.$route.query.deviceModeId
@@ -134,6 +125,22 @@ export default {
     await this.getData()
   },
   methods: {
+    setPolyline(e) {
+      let polyline = new AMap.Polyline({
+        path: e,
+        borderWeight: 2, // 线条宽度，默认为 1
+      });
+      map.add(polyline);
+      map.setFitView()
+    },
+    setMarker(e, i) {
+      let marker = new AMap.Marker({
+        position: e,   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+        title: i
+      });
+      map.add(marker);
+      map.setFitView()
+    },
     async currentChange(e) {
       this.currentPage = e
       await this.setHistoryData()
@@ -155,15 +162,34 @@ export default {
       this.topData = data || {}
     },
     async setHistoryData() {
+      this.isMap = false
+      map.clearMap()
       this.show = false
       const {data} = await getHistoryData({
         "sceneId": this.$store.getters.sceneId,
         "deviceId": this.deviceId,
         deviceModeId: this.deviceModeId,
         "offset": this.currentPage - 1,
-        "limit": 1,
+        "limit": 10,
         "startTime": 0
       })
+      let dataList = data.historyData.dataList
+      if (dataList.filter(e => (Object.keys(e).includes('longitude') || Object.keys(e).includes('longitude'))).length > 0) {
+        this.isMap = true
+        dataList.filter(e => (Object.keys(e).includes('longitude') || Object.keys(e).includes('longitude'))).forEach(e => {
+          this.setMarker([e.longitude, e.latitude], e.ts)
+        })
+        this.setPolyline(dataList.filter(e => (Object.keys(e).includes('longitude') || Object.keys(e).includes('longitude'))).map(e => {
+          return [e.longitude, e.latitude]
+        }))
+        this.tableData = data.historyData.dataList
+        this.total = data.historyData.count
+        this.currentPage = 1
+        this.deviceDataColumns = data.deviceDataColumns
+        this.$nextTick(() => {
+          this.show = true
+        })
+      } else {
         this.tableData = data.historyData.dataList
         this.total = data.historyData.count
         this.currentPage = 1
@@ -171,6 +197,7 @@ export default {
         this.$nextTick(() => {
           this.show = true
         })
+      }
     },
     async setLinkDevices() {
       const {data} = await getLinkDevices(this.deviceId)
@@ -314,4 +341,9 @@ export default {
     }
   }
 }
+
+.map {
+  width: 100%;
+  height: 50vh;
+}
 </style>