修改地图

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

@@ -153,15 +153,15 @@ export default {
         type: 'warning'
       }).then(() => {
         handleAlarmInfo({
-          alarmInfoId:e.no
-        }).then(e=>{
-          if(e.code === 200){
+          alarmInfoId: e.no
+        }).then(e => {
+          if (e.code === 200) {
             this.$message({
               type: 'success',
               message: '已处理!'
             });
             this.setTable3()
-          }else{
+          } else {
             this.$message({
               type: 'info',
               message: '网络错误'
@@ -182,31 +182,31 @@ export default {
       });
     },
     setText(e) {
-      let position = e.areaPoints?.length > 0 ? e.areaPoints:e.centerPoint
-      if(position.length>0){
+      let position = e.areaPoints?.length > 0 ? e.areaPoints : e.centerPoint
+      if (position.length > 0) {
         let length = position.length
-        let longitudes = e.areaPoints.map(e=>e.longitude).reduce((a,b)=>a+b)
-        let latitudes = e.areaPoints.map(e=>e.latitude).reduce((a,b)=>a+b)
-        position = [longitudes/length, latitudes/length]
-      }else{
+        let longitudes = e.areaPoints.map(e => e.longitude).reduce((a, b) => a + b)
+        let latitudes = e.areaPoints.map(e => e.latitude).reduce((a, b) => a + b)
+        position = [longitudes / length, latitudes / length]
+      } else {
         position = [e.centerPoint.longitude, e.centerPoint.latitude]
       }
       let text = new AMap.Text({
-        text: '总数：'+e.deviceCount + (e.abnormalCount ? ('/异常数量：' + e.abnormalCount) : ''),
+        text: '总数：' + e.deviceCount + (e.abnormalCount ? ('/异常数量：' + e.abnormalCount) : ''),
         anchor: 'center',
         draggable: true,
         cursor: 'pointer',
-        position:position
+        position: position
       });
       map.add(text)
     },
-    setPolygon(position,val) {
+    setPolygon(position, val) {
       let e = position.map(val => {
         return [val.longitude, val.latitude]
       })
       let thisPolygon = new AMap.Polygon({
         path: e,
-        fillColor: val>0 ? '#ff0000' : '#1791fc',
+        fillColor: val > 0 ? '#ff0000' : '#1791fc',
       });
       map.add(thisPolygon)
       map.setFitView()
@@ -221,7 +221,7 @@ export default {
         strokeOpacity: 0.2,
         fillOpacity: 0.4,
         strokeDasharray: [10, 10],
-        fillColor: e>0 ? '#ff0000' : '#1791fc',
+        fillColor: e > 0 ? '#ff0000' : '#1791fc',
       })
       map.add(circle);
       map.setFitView()
@@ -281,8 +281,7 @@ export default {
       this.num3 = data.onlineDeviceNum
     },
     async setAlarmInfos() {
-      const {rows: data} = await getAlarmInfos({"sceneId": this.sceneId})
-      console.log(data)
+      const {rows: data} = await getAlarmInfos({"sceneId": this.$store.getters.sceneId})
       this.table1Data = data.map((e, i) => {
         return {
           value1: e.alarmInfoId,
@@ -296,7 +295,7 @@ export default {
       const {data} = await ElectronicNumVo(this.$store.getters.sceneId)
       data.forEach(e => {
         if (e.areaPoints?.length > 0) {
-          this.setPolygon(e.areaPoints,e.abnormalCount)
+          this.setPolygon(e.areaPoints, e.abnormalCount)
         }
         if (e.centerPoint) {
           this.setCircle([e.centerPoint.longitude, e.centerPoint.latitude], e.radius, e.abnormalCount)

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

@@ -46,25 +46,14 @@
                 <!--                  </div>-->
                 <!--                </el-col>-->
                 <!--              </el-row>-->
-                <el-table :cell-style="setStyle" :data="tableData"
-                          :header-cell-style="{ textAlign: 'center',backgroundColor:'#0a457d' }" v-if="show"
+                <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>
-<!--                  <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-for="i in bottomData" >
-<!--          <template slot="title">-->
+      <div v-show="isMap" id="map" class="map"></div>
+      <div v-for="i in bottomData">
         <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,34 +93,55 @@ import {
   getLinkDevices
 } from '@/api/board/senso'
 
+let map = null
 export default {
-  components: {
-  },
+  components: {},
   data() {
     return {
       topData: {},
       bottomData: [],
-      collapseNo:'1',
+      collapseNo: '1',
       radio: '日统计报表',
       tableData: [],
-      sceneId:0,
-      deviceId:0,
-      deviceModeId:0,
-      total:0,
-      currentPage:1,
-      deviceDataColumns:[],
-      show:false
+      sceneId: 0,
+      deviceId: 0,
+      deviceModeId: 0,
+      total: 0,
+      currentPage: 1,
+      deviceDataColumns: [],
+      show: false,
+      isMap:false
     }
   },
   async mounted() {
-    if(this.$route.query.id){
+    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
     }
     await this.getData()
   },
   methods: {
-    async currentChange(e){
+    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,22 +162,42 @@ export default {
       this.topData = data || {}
     },
     async setHistoryData() {
+      this.isMap = false
+      map.clearMap()
       this.show = false
       const {data} = await getHistoryData({
-        "sceneId":this.$store.getters.sceneId,
+        "sceneId": this.$store.getters.sceneId,
         "deviceId": this.deviceId,
-        deviceModeId:this.deviceModeId,
-        "offset": this.currentPage -1,
-        "limit": 1,
+        deviceModeId: this.deviceModeId,
+        "offset": this.currentPage - 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.$nextTick(() => {
           this.show = true
         })
+      } else {
+        this.tableData = data.historyData.dataList
+        this.total = data.historyData.count
+        this.currentPage = 1
+        this.deviceDataColumns = data.deviceDataColumns
+        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>