修改地图

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

@@ -110,6 +110,10 @@
           </div>
         </div>
       </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>
+      </div>
       <el-table
         v-show="isMap"
         :data="mapData"
@@ -172,6 +176,8 @@ export default {
   components: {},
   data() {
     return {
+      mapOffset:0,
+      mapTotal:0,
       vh: document.documentElement.offsetHeight / 100,
       topData: {},
       bottomData: [],
@@ -231,24 +237,31 @@ export default {
     setMarkerSharding(e) {
       let sum = e.length
       let nowNum = 0
-      let fun = () => {
-        setTimeout(() => {
-          let arr = e.splice(nowNum * 20, (nowNum + 1) * 20)
-          arr.forEach(v => {
+          e.forEach(v => {
             this.setMarker([v.longitude, v.latitude], v.ts)
           })
-          this.setPolyline(arr.map(e => {
+          this.setPolyline(e.map(e => {
             return [e.longitude, e.latitude]
           }))
-          nowNum += 1
-
           flag && map.setFitView()
-          if (nowNum * 20 <= sum) {
-            fun()
-          }
-        }, 1000 * 0.5)
-      }
-      fun()
+      // 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) {
@@ -274,21 +287,25 @@ export default {
         this.date = null
       }
     },
-    async setHistoryData() {
+    async setHistoryData(isTable=true) {
+      if(isTable){
       this.isMap = false
       map.clearMap()
       this.show = false
+      this.mapOffset = 0
+      }
       const {data} = await getHistoryData({
         "sceneId": this.$store.getters.sceneId,
         "deviceId": this.deviceId,
         deviceModeId: this.deviceModeId,
-        "offset": this.topData.gpsFlag !== '1' ? (this.currentPage - 1) : null,
-        "limit": this.topData.gpsFlag !== '1' ? 10 : null,
+        "offset": this.topData.gpsFlag !== '1' ? (this.currentPage - 1) : this.mapOffset,
+        "limit": this.topData.gpsFlag !== '1' ? 10 : 100,
         startTime: this.date?.[0],
         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.mapTotal = data.historyData.count
         this.isMap = true
         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)
@@ -341,6 +358,10 @@ export default {
       map.setFitView([maptext,mapMarker])
       flag = false
       console.log(e)
+    },
+    continueMap(){
+      this.mapOffset += 1
+      this.setHistoryData(false)
     }
   }
 };