修改地图

1 year ago · 4de7cd2eb0
parent 4c049995a1
commit 4de7cd2eb0
2 changed files with 112 additions and 81 deletions
--- a/ruoyi-ui/src/views/board/GPS/index.vue
+++ b/ruoyi-ui/src/views/board/GPS/index.vue
@ -135,7 +135,7 @@ export default {
      sceneId: 0,
    }
  },
- async mounted() {
+  async mounted() {
    await this.getData()
  },
  methods: {
@ -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)
--- a/ruoyi-ui/src/views/board/senso/index.vue
+++ b/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,30 +61,27 @@
        </el-collapse>
      </div>

-<!--      <el-collapse  accordion>-->
-        <div v-for="i in bottomData" >
-<!--          <template slot="title">-->
-            <div class="itemBg">
-              <div class="icon"></div>
-              <div class="icon1"></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>
-                <div class="info2"> {{ i.deviceCode }}</div>
-              </div>
-              <div class="info" style="left: 70vh;">
-                <div class="info1">设备名称:</div>
-                <div class="info2">{{ i.deviceName }}</div>
-              </div>
-              <div class="info" style="left: 80vh;">
-                <div class="info1">设备位置:</div>
-                <div class="info2">{{ i.deviceLocation }}</div>
-              </div>
-            </div>
-<!--          </template>-->
+      <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>
+          <div :style="'background-image: url('+(i&&i.devicePic)+')'" class="icon2"></div>
+          <div class="title"> {{ i.deviceName }}</div>
+          <div class="info">
+            <div class="info1">设备编号:</div>
+            <div class="info2"> {{ i.deviceCode }}</div>
+          </div>
+          <div class="info" style="left: 70vh;">
+            <div class="info1">设备名称:</div>
+            <div class="info2">{{ i.deviceName }}</div>
+          </div>
+          <div class="info" style="left: 80vh;">
+            <div class="info1">设备位置:</div>
+            <div class="info2">{{ i.deviceLocation }}</div>
+          </div>
        </div>
-<!--      </el-collapse>-->
+      </div>
    </div>
  </div>
 </template>
@ -107,36 +93,57 @@ 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()
+      await this.setHistoryData()
    },
    async getData() {
      await this.setDeviceInfo()
@ -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
      })
-      this.tableData = data.historyData.dataList
-      this.total = data.historyData.count
-      this.currentPage = 1
-      this.deviceDataColumns = data.deviceDataColumns
-      this.$nextTick(()=>{
-        this.show = true
-      })
+      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
+        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>