修改地图

7 months ago · 5ad822126f
parent 15a5c13d70
commit 5ad822126f
3 changed files with 153 additions and 40 deletions
--- a/ruoyi-ui/src/views/board/GPS/index.vue
+++ b/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',
--- a/ruoyi-ui/src/views/board/equipmentMonitoring/index.vue
+++ b/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>
--- a/ruoyi-ui/src/views/board/senso/index.vue
+++ b/ruoyi-ui/src/views/board/senso/index.vue
@ -38,15 +38,25 @@
                  </el-col>
                  <el-col :span="12">
                    <div style="position: absolute; right: 30px;">
-                      <span style="color: #fff;"> 开始时间：</span>
-                      <div style="display: inline-block;width: 220px;margin-right: 12px;">
+                      <span style="color: #fff;"> 起止时间：</span>
+                      <div style="display: inline-block;margin-right: 12px;">
                        <el-date-picker
                          v-model="date"
-                          format="yyyy-MM-dd"
-                          placeholder="选择日期"
-                          type="date"
+                          end-placeholder="结束日期"
+                          format="yyyy-MM-dd hh:ss:mm"
+                          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,13 +67,14 @@
                <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>

@ -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,7 +218,6 @@ export default {
        borderWeight: 2, // 线条宽度，默认为 1
      });
      map.add(polyline);
-      map.setFitView()
    },
    setMarker(e, i) {
      let marker = new AMap.Marker({
@ -172,10 +227,31 @@ export default {
        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()
    },
@ -208,8 +284,8 @@ export default {
        deviceModeId: this.deviceModeId,
        "offset": this.topData.gpsFlag !== '1' ? (this.currentPage - 1) : null,
        "limit": this.topData.gpsFlag !== '1' ? 10 : null,
-        startTime: this.date,
-        endTime: this.date ? this.date + (1000 * 60 * 60 * 24) : null
+        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) {
@ -222,12 +298,8 @@ export default {
            latitude: lat
          }
        })
-        mapData.forEach(e => {
-          this.setMarker([e.longitude, e.latitude], e.ts)
-        })
-        this.setPolyline(mapData.map(e => {
-          return [e.longitude, e.latitude]
-        }))
+        this.mapData = JSON.parse(JSON.stringify(mapData))
+        this.setMarkerSharding(mapData)
        // 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,6 +499,7 @@ export default {
  width: 100%;
  height: 50vh;
 }
+
 .infoDiv {
  position: absolute;
  left: 60vh;