iot页面调试

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

@@ -1,7 +1,14 @@
 <template>
     <div>
         <!-- 地图弹框 展示设备轨迹 -->
-    <el-dialog title="装备定位信息" :visible.sync="openMap" width="80%" :close-on-click-modal="false" @close="close">
+        <el-dialog
+            title="装备定位信息"
+            :visible.sync="openMap"
+            v-if="openMap"
+            width="80%"
+            :close-on-click-modal="false"
+            @close="close"
+        >
             <!-- 表单 根据日期查询设备轨迹 -->
             <el-card shadow="hover">
                 <el-form :model="queryForm" inline>
@@ -18,17 +25,32 @@
                         ></el-date-picker>
                     </el-form-item>
                     <el-form-item>
-            <el-button type="primary" size="small" @click="handleQuery">轨迹查询</el-button>
+                        <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"
+                        >定位设备编号: {{ equipmentNumber }}</div
+                    >
                     <div class="equipment">{{ engineering }}工程</div>
                 </div>
 
                 <!-- 地图 -->
-        <div v-if="openMap" id="container" style="height: 500px; background-color: #bfc; margin-top: 13px"></div>
+                <div
+                    v-if="openMap"
+                    id="container"
+                    style="
+                        height: 500px;
+                        background-color: #bfc;
+                        margin-top: 13px;
+                    "
+                ></div>
             </el-card>
         </el-dialog>
     </div>
@@ -83,6 +105,7 @@ export default {
     mounted() {
         this.getEquipmentInfo()
     },
+
     methods: {
         async handleQuery() {
             console.log('🚀 ~ handleQuery ~ 查询:', this.queryForm.date)
@@ -126,19 +149,28 @@ export default {
                 let pointList = []
                 if (this.linePointList.length === 0) return
                 for (var i = 0; i < this.linePointList.length; i++) {
-          pointList.push(new BMapGL.Point(this.linePointList[i].lng, this.linePointList[i].lat))
+                    pointList.push(
+                        new BMapGL.Point(
+                            this.linePointList[i].lng,
+                            this.linePointList[i].lat,
+                        ),
+                    )
                 }
                 let polyline = new BMapGL.Polyline(pointList)
                 // 修改线的样式
                 polyline.setStrokeColor('#EA3323') // 线颜色  #EA3323
                 // polyline.setStrokeWeight(2) // 线宽
 
-        let trackAni = new BMapGLLib.TrackAnimation(this.map, polyline, {
+                let trackAni = new BMapGLLib.TrackAnimation(
+                    this.map,
+                    polyline,
+                    {
                         overallView: true, // 动画完成后自动调整视野到总览
                         tilt: 30, // 轨迹播放的角度，默认为55
                         duration: 5000, // 动画持续时长，默认为10000，单位ms
                         delay: 2000, // 动画开始的延迟，默认0，单位ms
-        })
+                    },
+                )
 
                 trackAni.start()
                 // 设置起点终点图标
@@ -147,21 +179,32 @@ export default {
         },
         // 添加起点和终点的标记
         addStartEndMarkers(startLatLng, endLatLng) {
-      let startIcon = new BMapGL.Icon(require('/src/assets/images/startIcon.png'), new BMapGL.Size(32, 32))
-      let startMarker = new BMapGL.Marker(startLatLng, { icon: startIcon })
+            let startIcon = new BMapGL.Icon(
+                require('/src/assets/images/startIcon.png'),
+                new BMapGL.Size(32, 32),
+            )
+            let startMarker = new BMapGL.Marker(startLatLng, {
+                icon: startIcon,
+            })
             this.map.addOverlay(startMarker)
 
-      let endIcon = new BMapGL.Icon(require('/src/assets/images/endIcon.png'), new BMapGL.Size(32, 32))
+            let endIcon = new BMapGL.Icon(
+                require('/src/assets/images/endIcon.png'),
+                new BMapGL.Size(32, 32),
+            )
             let endMarker = new BMapGL.Marker(endLatLng, { icon: endIcon })
             this.map.addOverlay(endMarker)
         },
         // 轨迹运动结束后的回调
         triggerMovement() {
             // 轨迹运动结束后获取起点和终点的经纬度坐标
-      let startLatLng = new BMapGL.Point(this.linePointList[0].lng, this.linePointList[0].lat)
+            let startLatLng = new BMapGL.Point(
+                this.linePointList[0].lng,
+                this.linePointList[0].lat,
+            )
             let endLatLng = new BMapGL.Point(
                 this.linePointList[this.linePointList.length - 1].lng,
-        this.linePointList[this.linePointList.length - 1].lat
+                this.linePointList[this.linePointList.length - 1].lat,
             )
 
             // 添加起点和终点的图标

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

@@ -232,7 +232,12 @@
                 align="center"
                 prop="ownHouseName"
             >
-                <i class="el-icon-location location-icon" @click="handleMap" />
+                <template slot-scope="{ row }">
+                    <i
+                        class="el-icon-location location-icon"
+                        @click="handleMap(row)"
+                    />
+                </template>
             </el-table-column>
             <el-table-column
                 label="操作"