From 6f593abe942d55ceca150709770ca02677ea12b6 Mon Sep 17 00:00:00 2001
From: Tony <weijialin@inspur.com>
Date: Thu, 4 Jan 2024 10:22:34 +0800
Subject: [PATCH] fix: BUG

---
 .../dataVisualization/visualization/index.vue |  10 +-
 .../dataVisualization/visualization/map.vue   | 236 ++++++++++++++++++
 2 files changed, 243 insertions(+), 3 deletions(-)
 create mode 100644 god-ui/src/views/dataVisualization/visualization/map.vue

diff --git a/god-ui/src/views/dataVisualization/visualization/index.vue b/god-ui/src/views/dataVisualization/visualization/index.vue
index c58bd1bb..18b6a23f 100644
--- a/god-ui/src/views/dataVisualization/visualization/index.vue
+++ b/god-ui/src/views/dataVisualization/visualization/index.vue
@@ -65,14 +65,16 @@
     <div class="trip">
       <div class="box-title">行程数据</div>
       <div class="trip-warper">
-        <div class="trip-top">
+        <div class="trip-top" style="display: none;">
           <div>车牌号</div>
           <div style="padding: 0 6px;">
             <el-input placeholder="请输入车牌号"></el-input>
           </div>
           <el-button size="small" type="primary">查询</el-button>
         </div>
-        <div id="map"></div>
+        <div id="map">
+          <bottomMap />
+        </div>
       </div>
     </div>
   </div>
@@ -84,6 +86,7 @@ import {
   initChartStatic,
 } from "@/utils/bigscreenTool/index.js";
 import AMapLoader from "@amap/amap-jsapi-loader";
+import bottomMap from './map.vue'
 window._AMapSecurityConfig = {
   securityJsCode: "b6314ade5a42c3f3ac2284b6d4d89b1f",
 };
@@ -187,11 +190,12 @@ export default {
       map: null,
     };
   },
+  components: { bottomMap },
   mounted() {
     this.initChart1();
     this.initChart2();
     this.initChart3();
-    this.initMap();
+    // this.initMap();
   },
   methods: {
     initChart1() {
diff --git a/god-ui/src/views/dataVisualization/visualization/map.vue b/god-ui/src/views/dataVisualization/visualization/map.vue
new file mode 100644
index 00000000..81ce29e6
--- /dev/null
+++ b/god-ui/src/views/dataVisualization/visualization/map.vue
@@ -0,0 +1,236 @@
+<template>
+    <div class="project-gis-wrapper">
+      <div class="gis-head">
+        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="100px">
+          <el-form-item label="设备编号" prop="batteryType">
+            <el-select v-model="queryParams.equSelect" @change="changeEqu" placeholder="请选择动力电池类型" clearable>
+              <el-option
+                v-for="(item,index) in marks"
+                :key="item.loaderId"
+                :label="item.loaderName"
+                :value="item.loaderId"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div id="MiddleMap"></div>
+    </div>
+  </template>
+  <script>
+  import {formatDate} from '@/utils/index'
+  import AMapLoader from "@amap/amap-jsapi-loader";
+  window._AMapSecurityConfig = {
+    securityJsCode: "b6314ade5a42c3f3ac2284b6d4d89b1f",
+  };
+  
+  export default {
+    data() {
+      return {
+        map: null,
+        marks: [
+          {
+            location: [87.4006118796766, 43.82679818668806],
+            loaderId: '065b62f2db294aa6a5b5b27af2ab547e',
+            loaderName: '新能源装载机M-1', // 设备名称
+            loaderNo: 'L-498374501', // 设备编号
+            person: '张悦', // 操作员
+            time: this.getTime(), // 时间
+            work: '1.5小时', // 作业量
+            layout: '均匀分布', // 设备分布情况，
+            gpsData: [
+              [87.44902038797738, 43.82952266544106],
+              [87.44352722391488, 43.829027314917575],
+              [87.43751907572153, 43.829027314917575],
+              [87.42876434549692, 43.829027314917575],
+              [87.4277343772352, 43.82927499069319],
+              [87.42412948831918, 43.82828428142418],
+              [87.41554641947153, 43.82605512544534],
+              [87.4061050437391, 43.82655050063492],
+              [87.4006118796766, 43.82679818668806],
+            ]
+          },
+          {
+            location: [87.6915349955857, 43.78811575249479],
+            loaderId: 'aea5e6dadd65480f81aae4ad8f83db94',
+            loaderName: '新能源装载机M-2', // 设备名称
+            loaderNo: 'L-498374975', // 设备编号
+            person: '孙勇', // 操作员
+            time: this.getTime(), // 时间
+            work: '1.8小时', // 作业量
+            layout: '均匀分布', // 设备分布情况，
+            gpsData: [
+              [87.68831634476783, 43.78241502284148],
+              [87.68994712784888, 43.7832825602499],
+              [87.69230747178199, 43.78415008506915],
+              [87.69320869401099, 43.78458384275784],
+              [87.69462490037085, 43.78529643784246],
+              [87.69398117020728, 43.78582313309756],
+              [87.69286537125708, 43.78678356543937],
+              [87.69183540299537, 43.787651039452236],
+              [87.6915349955857, 43.78811575249479],
+            ]
+          },
+          {
+            location: [87.58290724173185, 43.9817192052365],
+            loaderId: 'd9a92c66e3554d7b9b31ed7ac2694138',
+            loaderName: '新能源装载机Z-1', // 设备名称
+            loaderNo: 'L-498374485', // 设备编号
+            person: '王燕飞', // 操作员
+            time: this.getTime(), // 时间
+            work: '1.7小时', // 作业量
+            layout: '均匀分布', // 设备分布情况，
+            gpsData: [
+              [87.58307890310886, 43.97424572040294],
+              [87.58222059622403, 43.97535753803469],
+              [87.58153395071628, 43.97640756890671],
+              [87.58076147451999, 43.97761199321937],
+              [87.57981733694675, 43.978785511358865],
+              [87.57947401419284, 43.9791560912159],
+              [87.57870153799655, 43.98066926829438],
+              [87.57865862265226, 43.981533923595926],
+              [87.58063272848722, 43.98165744475388],
+              [87.58290724173185, 43.9817192052365],
+            ]
+          },
+        ],
+        queryParams: {
+          equSelect: null,
+          lists: []
+        },
+        AMap: null,
+      }
+    },
+    mounted() {
+      this.initMiddleMap()
+      this.getTime()
+    },
+    methods: {
+      initMiddleMap() {
+        AMapLoader.load({
+          key: "e49669059fa36494531a82ed982f395c", // 申请好的Web端开发者Key，首次调用 load 时必填
+          version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+        }).then((AMap) => {
+          this.AMap = AMap
+          this.map = new AMap.Map("MiddleMap", {
+            zoom: 13,//级别
+            center: [87.52746963724496, 43.84122412572595], //中心点坐标
+          });
+          this.map.on('mapmove', () => {
+          })
+          this.map.on('click', (e) => {
+            console.log('e', e);
+            navigator.clipboard.writeText(`[${e.lnglat.R.toString()}, ${e.lnglat.Q.toString()}],`)
+          })
+          const marks = this.marks;
+          marks.forEach(item => {
+            this.addMapMarker(item.location, 'car2', item)
+          })
+        })
+      },
+      // 添加图形点标记
+      addMapMarker(LngLatData = [], type = '', info = {}) {
+        const marker = new this.AMap.Marker({
+          position: new this.AMap.LngLat(LngLatData[0], LngLatData[1]),
+          offset: new this.AMap.Pixel(-30, -52),
+          icon: `/images/${type}.png`, // 添加 Icon 图标 URL
+          title: ''
+        });
+        this.map.add(marker);
+        marker.on('click', () => {
+          this.showInfoWindow(LngLatData[0], LngLatData[1], info)
+        })
+      },
+      // 显示信息窗体
+      showInfoWindow(lng, lat, sourceInfo = {}) {
+        const partTemplate = (name, value) => `<div style="color: aqua;width: 240px;display: flex;justify-content: space-between;padding: 6px 0;">
+                  <span>${name}</span>
+                  <span style="color: white;">${value}</span>
+              </div>`
+        const content = `<div style="padding: 10px 13px;background-color:#7886ac;">
+                  ${partTemplate('设备名称', sourceInfo.loaderName)}
+                  ${partTemplate('设备编号', sourceInfo.loaderNo)}
+                  ${partTemplate('操作员', sourceInfo.person)}
+                  ${partTemplate('时间', sourceInfo.time)}
+                  ${partTemplate('工时', sourceInfo.work)}
+              </div>`;
+        this.map.setZoom(15);
+        this.map.setCenter([lng, lat]);
+        const polyline = new this.AMap.Polyline({
+          map: this.map,
+          path: sourceInfo.gpsData,
+          showDir: true,
+          strokeColor: "#28F",  //线颜色
+          // strokeOpacity: 1,     //线透明度
+          strokeWeight: 6,      //线宽
+          // strokeStyle: "solid"  //线样式
+        });
+        const infoWindow = new this.AMap.InfoWindow({
+          content,
+          anchor: 'middle-left',
+          isCustom: true
+        });
+        infoWindow.open(this.map, [lng, lat])
+      },
+  
+      //获取当前时间yyyy-MM-dd HH:mm:ss
+      getTime() {
+        const time = formatDate(new Date());
+        return time;
+      },
+  
+      //选择设备
+      changeEqu(value) {
+        const lists = this.marks.filter(item => {
+          return item.loaderId === value
+        })
+        console.log(lists)
+        if (lists.length > 0) {
+          this.queryParams.lists = lists
+        }
+      },
+  
+      //查询
+      handleQuery() {
+        console.log(this.queryParams.lists)
+        if (this.queryParams.lists.length > 0) {
+          let lists = this.queryParams.lists;
+          this.showInfoWindow(lists[0].location[0], lists[0].location[1], lists[0])
+        }
+      }
+    }
+  }
+  </script>
+  <style scoped lang="scss">
+  .project-gis-wrapper {
+    width: 100%;
+    height: 100%;
+    border: 1px solid #25252525;
+    border-radius: 8px;
+    padding: 10px;
+    position: relative;
+  
+    .gis-head {
+      position: relative;
+      z-index: 999;
+      background-color: #ffffffdf;
+      padding: 14px 0 0 10px;
+      width: 450px;
+      border-radius: 8px;
+      border: 1px solid #252525a7;
+    }
+  
+    #MiddleMap {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      left: 0;
+      top: 0;
+      z-index: 9;
+    }
+  }
+  </style>
+  
\ No newline at end of file