修改地圖

1 year ago · 717bd2dcde
parent 01c182ba31
commit 717bd2dcde
1 changed files with 140 additions and 101 deletions
--- a/ruoyi-ui/src/views/board/senso/index.vue
+++ b/ruoyi-ui/src/views/board/senso/index.vue
@ -40,14 +40,8 @@
                    <div style="position: absolute; right: 30px;">
                      <span style="color: #fff;"> 起止时间：</span>
                      <div style="display: inline-block;margin-right: 12px;">
-                        <el-date-picker
-                          v-model="date"
-                          end-placeholder="结束日期"
-                          format="yyyy-MM-dd hh:ss:mm"
-                          range-separator="至"
-                          start-placeholder="开始日期"
-                          type="datetimerange"
-                          value-format="timestamp">
+                        <el-date-picker v-model="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-->
@ -64,16 +58,14 @@
                    </div>
                  </el-col>
                </el-row>
-                <el-table v-if="show" :cell-style="setStyle"
-                          :data="tableData" :header-cell-style="{ textAlign: 'center',backgroundColor:'#0a457d' }"
+                <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" :key="i.columnName" :label="i.columnName"
                    :prop="i.columnKey">
                    <template slot-scope="scope">
-                      <el-image
-                        v-if="scope.row[i.columnKey].toString().includes('http')"
-                        :preview-src-list="[scope.row[i.columnKey]]"
-                        :src="scope.row[i.columnKey]"
+                      <el-image v-if="scope.row[i.columnKey].toString().includes('http')"
+                        :preview-src-list="[scope.row[i.columnKey]]" :src="scope.row[i.columnKey]"
                        style="width: 100px; height: 100px">
                      </el-image>
                      <span v-else>{{ scope.row[i.columnKey] }}</span>
@ -112,46 +104,30 @@
      </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>
+        <el-button type="primary" v-if="isMap" @click="continueMap"
+          :disabled="mapTotal < (mapOffset + 1) * 100">继续加载</el-button>
      </div>
-      <el-table
-        v-show="isMap"
-        :data="mapData"
-        :max-height="40*vh"
-        highlight-current-row
-        style="width: 100%"
+      <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 type="index" width="50">
        </el-table-column>
-        <el-table-column
-          label="日期"
-          property="date"
-          width="120">
+        <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">
+        <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 label="经度" property="longitude">
        </el-table-column>
-        <el-table-column
-          label="纬度"
-          property="latitude">
+        <el-table-column label="纬度" property="latitude">
        </el-table-column>
      </el-table>
    </div>
@ -169,6 +145,11 @@ import {
 } from '@/utils/coordtransform'

 let map = null
+let startMarker = null
+let endMarker = null
+let polyline1 = []
+let startMarkerhs = 0
+let endMarkerhs = 0
 let maptext = null
 let mapMarker = null
 let flag = true
@ -225,6 +206,16 @@ export default {
      });
      map.add(polyline);
    },
+    setPolyline1(e) {
+      polyline1 && map.remove(polyline1);
+      polyline1 = new AMap.Polyline({
+        path: e,
+        strokeColor:'#000',
+        strokeWeight:10,
+        borderWeight: 2, // 线条宽度，默认为 1
+      });
+      map.add(polyline1);
+    },
    setMarker(e, i) {
      let marker = new AMap.Marker({
        position: e,   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
@ -232,6 +223,50 @@ export default {
        offset: new AMap.Pixel(-2.5, -2.5),
        content: `<div style="width: 5px;height: 5px; border-radius: 50%;background-color: #1890ff"> </div>`
      });
+      marker.on('click', (e) => {
+        let markers = map.getAllOverlays('marker')
+        if (!startMarker) {
+          startMarker = new AMap.Marker({
+            position: [e.lnglat.KL, e.lnglat.kT],   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+            title: `信息\n经度：${e.lnglat.KL}\n纬度：${e.lnglat.kT}\n时间：${i}`,
+            offset: new AMap.Pixel(-10, -10),
+            content: `<div style="width: 20px;height: 20px;font-size:14px;line-height:20px;text-align:center; border-radius: 50%;color:#fff;background-color: #00e03b">起</div>`
+          });
+          map.add(startMarker);
+          startMarkerhs = e.target.hS
+        } else if (!endMarker) {
+          endMarker = new AMap.Marker({
+            position: [e.lnglat.KL, e.lnglat.kT],   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+            title: `信息\n经度：${e.lnglat.KL}\n纬度：${e.lnglat.kT}\n时间：${i}`,
+            offset: new AMap.Pixel(-10, -10),
+            content: `<div style="width: 20px;height: 20px;font-size:14px;line-height:20px;text-align:center; border-radius: 50%;color:#fff;background-color: #fb6254">止</div>`
+          });
+          map.add(endMarker);
+          endMarkerhs = e.target.hS
+          let markersData = markers.map(v => {
+            if (v.hS >= startMarkerhs && v.hS <= endMarkerhs) {
+              return v
+            } else {
+              return null
+            }
+          }).filter(res => res)
+          this.setPolyline1(markersData.map(v => {
+            return v._position
+          }))
+        } else if (endMarker && startMarker) {
+          startMarkerhs = e.target.hS
+          map.remove(endMarker)
+          endMarker = null
+          map.remove(startMarker)
+          startMarker = new AMap.Marker({
+            position: [e.lnglat.KL, e.lnglat.kT],   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+            title: `信息\n经度：${e.lnglat.KL}\n纬度：${e.lnglat.kT}\n时间：${i}`,
+            offset: new AMap.Pixel(-10, -10),
+            content: `<div style="width: 20px;height: 20px;font-size:14px;line-height:20px;text-align:center; border-radius: 50%;color:#fff;background-color: #00e03b">起</div>`
+          });
+          map.add(startMarker);
+        }
+      })
      map.add(marker);
    },
    setMarkerSharding(e) {
@ -398,15 +433,19 @@ export default {
    background-color: #FFF0 !important;
  }

-  /deep/ .el-table th.el-table__cell.is-leaf, {
+  /deep/ .el-table th.el-table__cell.is-leaf,
+  {
  border-color: #0000;
 }

-  /deep/ .el-table::before, .el-table--group::after, .el-table--border::after {
+/deep/ .el-table::before,
+.el-table--group::after,
+.el-table--border::after {
  background-color: #0000;
 }

-  /deep/ .el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th {
+/deep/ .el-table .el-table__header-wrapper th,
+.el-table .el-table__fixed-header-wrapper th {
  background-color: #0000;
 }