iot定位设备地图弹框页面完善

sgzb-ui/public/index.html

@@ -202,6 +202,12 @@
       color: #FFF;
       opacity: 0.5;
     }
+
+    /** 去除百度地图的水印和logo */
+    .BMap_cpyCtrl,
+    .anchorBL {
+      display: none;
+    }
   </style>
 </head>
 

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

@@ -7,10 +7,18 @@
             width="90%"
             @close="handelCloseDialog()"
         >
-            <!-- 表单 根据日期查询设备轨迹 -->
             <el-card shadow="hover">
-                <el-form :model="queryForm" inline>
+                <div class="device-title">
-                    <el-form-item label="查询日期">
+                    <h2>{{ deviceName }}</h2>
+                    <span>({{ deviceType }})</span>
+                </div>
+
+                <div class="equipment">
+                    定位设备编号: {{ equipmentNumber }}
+                </div>
+                <div class="equipment" v-if="false">{{ engineering }}工程</div>
+                <el-row :gutter="24">
+                    <el-col :span="8">
                         <el-date-picker
                             v-model="queryForm.date"
                             type="daterange"
@@ -20,107 +28,24 @@
                             style="width: 330px"
                             value-format="yyyy-MM-dd"
                             format="yyyy-MM-dd"
-                        ></el-date-picker>
+                        />
-                    </el-form-item>
-                    <el-form-item>
                         <el-button
                             type="primary"
-                            size="small"
+                            style="padding: 8px 16px; margin-left: 5px"
-                            @click="handleQuery"
+                            >查询</el-button
-                            >轨迹查询</el-button
                         >
-                    </el-form-item>
+                    </el-col>
-                </el-form>
+                </el-row>
-                <div>
-                    <h2>{{ equipment }}</h2>
-                    <div class="equipment"
-                        >定位设备编号: {{ equipmentNumber }}</div
-                    >
-                    <div class="equipment">{{ engineering }}工程</div>
-                </div>
             </el-card>
 
             <el-row :gutter="24" class="map-container">
                 <el-col :span="6">
                     <el-tabs type="border-card" class="map-left">
                         <el-tab-pane label="行程">
-                            <div class="trip-container">
+                            <div
-                                <div class="left-num">1</div>
+                                class="trip-container"
-                                <div class="right-info">
+                                @click="handlePreviewTrip()"
-                                    <ul>
+                            >
-                                        <li>0KM</li>
-                                        <li>22秒</li>
-                                        <li>5KM/h</li>
-                                        <li>0KM/h</li>
-                                    </ul>
-                                    <ul>
-                                        <li>里程</li>
-                                        <li>行驶时长</li>
-                                        <li>最大速度</li>
-                                        <li>平均速度</li>
-                                    </ul>
-
-                                    <div style="margin-top: 10px">
-                                        <div class="time-container">
-                                            <span class="radius-span">始</span>
-                                            <span>2024-07-18 01:18:53</span>
-                                        </div>
-                                        <h3>安徽省------</h3>
-                                    </div>
-                                    <div style="margin-top: 10px">
-                                        <div class="time-container">
-                                            <span
-                                                class="radius-span"
-                                                style="
-                                                    background-color: #e6a23c;
-                                                "
-                                                >终</span
-                                            >
-                                            <span>2024-07-18 01:18:53</span>
-                                        </div>
-                                        <h3>安徽省------</h3>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="trip-container">
-                                <div class="left-num">1</div>
-                                <div class="right-info">
-                                    <ul>
-                                        <li>0KM</li>
-                                        <li>22秒</li>
-                                        <li>5KM/h</li>
-                                        <li>0KM/h</li>
-                                    </ul>
-                                    <ul>
-                                        <li>里程</li>
-                                        <li>行驶时长</li>
-                                        <li>最大速度</li>
-                                        <li>平均速度</li>
-                                    </ul>
-
-                                    <div style="margin-top: 10px">
-                                        <div class="time-container">
-                                            <span class="radius-span">始</span>
-                                            <span>2024-07-18 01:18:53</span>
-                                        </div>
-                                        <h3>安徽省------</h3>
-                                    </div>
-                                    <div style="margin-top: 10px">
-                                        <div class="time-container">
-                                            <span
-                                                class="radius-span"
-                                                style="
-                                                    background-color: #e6a23c;
-                                                "
-                                                >终</span
-                                            >
-                                            <span>2024-07-18 01:18:53</span>
-                                        </div>
-                                        <h3>安徽省------</h3>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="trip-container">
                                 <div class="left-num">1</div>
                                 <div class="right-info">
                                     <ul>
@@ -169,14 +94,22 @@
                                 <h3>安徽省------</h3>
                             </div>
                         </el-tab-pane>
-                        <el-tab-pane label="报警">报警</el-tab-pane>
+                        <el-tab-pane label="报警">
+                            <div class="point-container">
+                                <div class="time-container">
+                                    <span class="radius-span">1</span>
+                                    <span>2024-07-18 01:18:53</span>
+                                </div>
+                                <h3>手动触发紧急报警---------</h3>
+                            </div>
+                        </el-tab-pane>
                     </el-tabs>
                 </el-col>
                 <el-col :span="18">
                     <!-- 地图 -->
                     <div
                         id="container"
-                        style="height: 500px; background-color: #bfc"
+                        style="height: 550px; background-color: #bfc"
                     ></div>
                 </el-col>
             </el-row>
@@ -187,12 +120,18 @@
 <script>
 export default {
     name: 'MapDialog',
-    // props: {
+    props: {
-    //     mapDialogVisible: {
+        // 设备名称
-    //         type: Boolean,
+        deviceName: {
-    //         default: () => false,
+            type: String,
-    //     },
+            default: () => '',
-    // },
+        },
+        // 设备状态
+        deviceType: {
+            type: String,
+            default: () => '',
+        },
+    },
     data() {
         return {
             dialogVisible: true,
@@ -254,8 +193,31 @@ export default {
     },
 
     methods: {
-        load() {
+        /** 查看行程 */
-            this.count += 2
+        handlePreviewTrip() {
+            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,
+                    ),
+                )
+            }
+            let polyline = new BMapGL.Polyline(pointList)
+            // 修改线的样式
+            polyline.setStrokeColor('#EA3323') // 线颜色  #EA3323
+            // polyline.setStrokeWeight(2) // 线宽
+            let trackAni = new BMapGLLib.TrackAnimation(this.map, polyline, {
+                overallView: true, // 动画完成后自动调整视野到总览
+                tilt: 30, // 轨迹播放的角度，默认为55
+                duration: 5000, // 动画持续时长，默认为10000，单位ms
+                delay: 2000, // 动画开始的延迟，默认0，单位ms
+            })
+            trackAni.start()
+            // 设置起点终点图标
+            this.triggerMovement()
         },
         async handleQuery() {
             console.log('🚀 ~ handleQuery ~ 查询:', this.queryForm.date)
@@ -272,10 +234,6 @@ export default {
             this.openMap = val
             this.initMap()
         },
-        close() {
-            // this.openMap = false
-            // this.$emit('getList')
-        },
         // 获取装备信息
         getEquipmentInfo(params = {}) {
             console.log('🚀 ~ getEquipmentInfo ~ 获取装备信息', params)
@@ -295,37 +253,8 @@ export default {
                 this.map.enableScrollWheelZoom(true) // 启用滚轮放大缩小
                 this.map.setHeading(64.5) //设置地图旋转角度
                 this.map.setTilt(73) //设置地图的倾斜角度
-
+                let marker = new BMapGL.Marker(point) // 创建标点
-                // 添加轨迹
+                this.map.addOverlay(marker)
-                // 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,
-                //         ),
-                //     )
-                // }
-                // let polyline = new BMapGL.Polyline(pointList)
-                // // 修改线的样式
-                // polyline.setStrokeColor('#EA3323') // 线颜色  #EA3323
-                // // polyline.setStrokeWeight(2) // 线宽
-
-                // let trackAni = new BMapGLLib.TrackAnimation(
-                //     this.map,
-                //     polyline,
-                //     {
-                //         overallView: true, // 动画完成后自动调整视野到总览
-                //         tilt: 30, // 轨迹播放的角度，默认为55
-                //         duration: 5000, // 动画持续时长，默认为10000，单位ms
-                //         delay: 2000, // 动画开始的延迟，默认0，单位ms
-                //     },
-                // )
-
-                // trackAni.start()
-                // // 设置起点终点图标
-                // this.triggerMovement()
             })
         },
         // 添加起点和终点的标记
@@ -371,17 +300,31 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.device-title {
+    display: flex;
+
+    h2 {
+        padding: 0;
+        margin: 0;
+        font-weight: bold;
+    }
+
+    span {
+        padding: 4px 0 0 6px;
+        color: rgb(9, 193, 9);
+    }
+}
 .equipment {
+    margin: 8px 0;
     font-weight: 600;
     font-size: 15px;
-    margin-top: 10px;
 }
 
 .map-container {
     margin-top: 8px;
 
     .map-left {
-        height: 500px;
+        height: 550px;
     }
 }
 ::v-deep .el-tabs__nav {
@@ -401,13 +344,18 @@ export default {
 
 ::v-deep .el-tabs--border-card > .el-tabs__content {
     padding: 0;
-    height: 460px;
+    height: 510px;
     overflow: auto;
 }
+::v-deep .el-dialog__body {
+    padding: 5px 20px;
+}
 
 .trip-container {
     display: flex;
     margin-bottom: 3px;
+    cursor: pointer;
+    border-bottom: 1px solid #ccc;
     .left-num {
         width: 16px;
         display: flex;
@@ -419,7 +367,6 @@ export default {
     .right-info {
         flex: 1;
         padding: 8px;
-        background-color: #e8eaed;
         ul {
             padding: 0;
             margin: 0;
@@ -443,15 +390,10 @@ export default {
                 line-height: 20px;
             }
         }
+    }
 
-        .radius-span {
+    .active {
-            margin-right: 3px;
+        background-color: #e8eaed;
-            width: 20px;
-            text-align: center;
-            border-radius: 15px;
-            background-color: #409eff;
-            color: #fff;
-        }
     }
 }
 
@@ -462,7 +404,35 @@ h3 {
     color: #000;
 }
 
+.radius-span {
+    margin-right: 3px;
+    width: 20px;
+    height: 20px;
+    line-height: 20px;
+    text-align: center;
+    border-radius: 15px;
+    background-color: #409eff;
+    color: #fff;
+}
+
 .point-container {
+    margin: 2px;
     padding: 8px;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+    .time-container {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .time-container span:nth-child(2) {
+        flex: 1;
+        margin-left: 5px;
+    }
+
+    h3 {
+        padding-left: 0;
+    }
 }
 </style>

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

@@ -535,7 +535,8 @@
         </el-dialog>
         <MapDialog
             v-if="mapDialogVisible"
-            ref="mapDialog"
+            :deviceName="deviceName"
+            :deviceType="deviceType"
             @handelCloseDialog="handelCloseDialog"
         />
     </div>
@@ -644,6 +645,8 @@ export default {
 
             // 地图弹框
             mapDialogVisible: false,
+            deviceName: '',
+            deviceType: '',
         }
     },
     created() {
@@ -845,15 +848,9 @@ export default {
         },
         // 查看设备地图
         handleMap(row) {
-            console.log('~ handleMap ~ 地图', row)
+            this.deviceName = row.specificationType
-            const params = {
+            this.deviceType = row.maStatusName
-                deviceType: row.deviceType,
-            }
-            // 点击打开弹框
-            // this.$refs.mapDialog.openMapDialog(true)
             this.mapDialogVisible = true
-
-            // this.$refs.mapDialog.getEquipmentInfo(params)
         },
         handlePush() {
             this.$modal