定位页面搭建

sgzb-ui/public/index.html

@@ -11,6 +11,9 @@
     <%= webpackConfig.name %>
   </title>
   <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
+  <script async src="https://api.map.baidu.com/api?v=2.0&ak=cClgLBaLgGUdQDilX9dGvieL"></script>
+  <script src="https://api.map.baidu.com/api?type=webgl&v=2.0&ak=cClgLBaLgGUdQDilX9dGvieL"></script>
+  <script type="text/javascript" src="//api.map.baidu.com/library/TrackAnimation/src/TrackAnimation_min.js"></script>
   <style>
     html,
     body,

sgzb-ui/src/views/warehouseManage/machinery/coding/component/MapDIalog.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <!-- 地图弹框 展示设备轨迹 -->
-    <el-dialog title="装备定位信息" :visible.sync="openMap" width="80%" :close-on-click-modal="false" append-to-body>
+    <el-dialog title="装备定位信息" :visible.sync="openMap" width="80%" :close-on-click-modal="false" @close="close">
       <!-- 表单 根据日期查询设备轨迹 -->
       <el-card shadow="hover">
         <el-form :model="queryForm" inline>
@@ -19,6 +19,14 @@
             <el-button type="primary" size="small" @click="handleQuery">轨迹查询</el-button>
           </el-form-item>
         </el-form>
+        <div>
+          <h2>{{ equipment }}</h2>
+          <div class="equipment">定位设备编号: {{ equipmentNumber }}</div>
+          <div class="equipment">{{ engineering }}工程</div>
+        </div>
+
+        <!-- 地图 -->
+        <div v-if="openMap" id="container" style="height: 500px; background-color: #bfc; margin-top: 13px"></div>
       </el-card>
     </el-dialog>
   </div>
@@ -26,27 +34,175 @@
 
 <script>
 export default {
-  name: 'MapDIalog',
+  name: 'MapDialog',
-  props: {
-    openMap: {
-      type: Boolean,
-      default: false,
-    },
-  },
   data() {
     return {
+      openMap: false, // 是否打开地图弹框
       queryForm: {
         date: '',
       },
+      equipment: '', // 设备名称
+      equipmentNumber: 'H906L', // 设备编号
+      engineering: '大禹治水', // 工程
+      map: null,
+      centerPoint: [113.271431, 23.135336], // 中心点
+      animiationLineList: [], // 动画线
+      lineStyle: {
+        // 线样式
+        color: '#0e83ed',
+        width: 2,
+        opacity: 0.6,
+      },
+      linePointList: [
+        {
+          lng: 116.297611,
+          lat: 40.047363,
+        },
+        {
+          lng: 116.302839,
+          lat: 40.048219,
+        },
+        {
+          lng: 116.308301,
+          lat: 40.050566,
+        },
+        {
+          lng: 116.305732,
+          lat: 40.054957,
+        },
+        {
+          lng: 116.304754,
+          lat: 40.057953,
+        },
+        {
+          lng: 116.306487,
+          lat: 40.058312,
+        },
+        {
+          lng: 116.307223,
+          lat: 40.056379,
+        },
+      ], // 线点
+      // map: {
+      //   center: { lng: 113.763924, lat: 22.938634 },
+      //   zoom: 18,
+      //   show: true,
+      //   dragging: true,
+      // },
+      // lineList: [
+      //   { lng: 113.763924, lat: 22.938634 },
+      //   { lng: 113.759621, lat: 22.933625 },
+      //   { lng: 113.76654, lat: 22.934174 },
+      //   { lng: 113.766558, lat: 22.932916 },
+      //   { lng: 113.766558, lat: 22.932916 },
+      //   { lng: 113.768745, lat: 22.93173 },
+      //   { lng: 113.76945, lat: 22.930731 },
+      //   { lng: 113.772022, lat: 22.93014 },
+      //   { lng: 108.952789, lat: 34.348938 },
+      // ],
     }
   },
-  created() {},
+  mounted() {},
   methods: {
     handleQuery() {
       console.log('🚀 ~ handleQuery ~ 查询:', this.queryForm.date)
     },
+    openMapDialog(val) {
+      this.openMap = val
+    },
+    close() {
+      this.openMap = false
+      this.$emit('getList')
+    },
+    // 获取装备信息
+    getEquipmentInfo(params) {
+      console.log('🚀 ~ getEquipmentInfo ~ 获取装备信息', params)
+      this.equipment = params.deviceType
+    },
+    // 初始化地图和轨迹
+    initMap() {
+      this.$nextTick(() => {
+        // // 创建地图实例
+        // this.map = new BMapGL.Map('map')
+        // // 创建点坐标
+        // this.map.centerAndZoom(new BMapGL.Point(116.297611, 40.047363), 18)
+        // // 启用滚轮放大缩小
+        // this.map.enableScrollWheelZoom(true)
+        // // setTimeout
+        // setTimeout(() => {
+        //   // const startIcon = {
+        //   //   imgUrl: new URL('/src/assets/images/startIcon', import.meta.url).href,
+        //   //   position: [this.linePointList[0].lng, this.linePointList[0].lat],
+        //   //   size: [50, 50],
+        //   // }
+        //   // const endIcon = {
+        //   //   imgUrl: new URL('/src/assets/images/endIcon', import.meta.url).href,
+        //   //   position: [this.linePointList[this.linePointList.length - 1].lng, this.linePointList[linePointList.length - 1].lat],
+        //   //   size: [50, 50],
+        //   // }
+        //   this.initIcon(startIcon.imgUrl, startIcon.position, startIcon.size)
+        //   this.initIcon(endIcon.imgUrl, endIcon.position, endIcon.size)
+        // }, 100)
+        this.map = new BMapGL.Map('container') // 创建地图实例
+        let point = new BMapGL.Point(116.297611, 40.047363) // 创建点坐标
+        console.log('🚀 ~ this.$nextTick ~ point:', point)
+        this.map.centerAndZoom(point, 15) // 初始化地图，设置中心点坐标和地图级别
+        this.map.enableScrollWheelZoom(true) // 启用滚轮放大缩小
+        // 设置起点终点图标
+        setTimeout(async () => {
+          const startIcon = {
+            imgUrl: await import('/src/assets/images/startIcon.png'),
+            position: [linePointList[0].lng, linePointList[0].lat],
+            size: [50, 50],
+          }
+          const endIcon = {
+            imgUrl: await import('/src/assets/images/endIcon.png'),
+            position: [linePointList[linePointList.length - 1].lng, linePointList[linePointList.length - 1].lat],
+            size: [50, 50],
+          }
+          initIcon(startIcon.imgUrl, startIcon.position, startIcon.size)
+          initIcon(endIcon.imgUrl, endIcon.position, endIcon.size)
+          // initPolyline()
+          // initPolylineAnimation()
+          // setViewPortFn()
+        }, 200)
+
+        // 添加轨迹
+        let pointList = []
+        for (var i = 0; i < this.linePointList.length; i++) {
+          pointList.push(new BMapGL.Point(this.linePointList[i].lng, this.linePointList[i].lat))
+        }
+        let pl = new BMapGL.Polyline(pointList)
+
+        let trackAni = new BMapGLLib.TrackAnimation(this.map, pl, {
+          overallView: true, // 动画完成后自动调整视野到总览
+          tilt: 30, // 轨迹播放的角度，默认为55
+          duration: 10000, // 动画持续时长，默认为10000，单位ms
+          delay: 3000, // 动画开始的延迟，默认0，单位ms
+        })
+
+        trackAni.start()
+      })
+    },
+    initIcon(imgUrl, position, size) {
+      // var myIcon = new BMapGL.Icon("https://api.map.baidu.com/img/markers.png", new BMapGL.Size(50, 50));
+      var myIcon = new BMapGL.Icon(imgUrl, new BMapGL.Size(size))
+      // 创建Marker标注，使用小车图标
+      var pt = new BMapGL.Point(...position)
+      var marker = new BMapGL.Marker(pt, {
+        icon: myIcon,
+      })
+      // 将标注添加到地图
+      this.map.addOverlay(marker)
+    },
   },
 }
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.equipment {
+  font-weight: 600;
+  font-size: 15px;
+  margin-top: 10px;
+}
+</style>

sgzb-ui/src/views/warehouseManage/machinery/coding/index.vue

@@ -533,7 +533,7 @@
             </div>
         </el-dialog>
 
-        <MapDIalog :openMap="openMap" />
+        <MapDialog ref="mapDIalog" @getList="getList" />
     </div>
     <div v-else>
         <BindIOT :isShow="isShow" />
@@ -557,13 +557,13 @@ import { listHouseTree } from '@/api/store/shelves'
 import Treeselect from '@riophae/vue-treeselect'
 import '@riophae/vue-treeselect/dist/vue-treeselect.css'
 import QRCode from 'qrcodejs2'
-import BindIOT from './component/BindIOT.vue'
+import BindIOT from './component/BindIOT'
-import MapDIalog from './component/MapDIalog.vue'
+import MapDialog from './component/MapDialog'
 
 export default {
     name: 'Devices',
     dicts: ['sys_normal_disable'],
-    components: { Treeselect, BindIOT, MapDIalog },
+    components: { Treeselect, BindIOT, MapDialog },
     data() {
         return {
             openMap: false,
@@ -820,8 +820,13 @@ export default {
         },
         handleMap(row) {
             console.log('~ handleMap ~ 地图', row)
+            const params = {
+                deviceType: row.deviceType,
+            }
             // 点击打开弹框
-            this.openMap = true
+            this.$refs.mapDIalog.openMapDialog(true)
+            this.$refs.mapDIalog.getEquipmentInfo(params)
+            this.$refs.mapDIalog.initMap()
         }
     },
 }