代码合并

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

@@ -1,11 +1,24 @@
 <template>
     <div>
         <!-- 地图弹框 展示设备轨迹 -->
-    <el-dialog title="装备定位信息" :visible.sync="openMap" width="80%" :close-on-click-modal="false" @close="close">
+        <el-dialog
-      <!-- 表单 根据日期查询设备轨迹 -->
+            title="装备定位信息"
+            :visible.sync="dialogVisible"
+            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"
@@ -15,21 +28,91 @@
                             style="width: 330px"
                             value-format="yyyy-MM-dd"
                             format="yyyy-MM-dd"
-            ></el-date-picker>
+                        />
-          </el-form-item>
+                        <el-button
-          <el-form-item>
+                            type="primary"
-            <el-button type="primary" size="small" @click="handleQuery">轨迹查询</el-button>
+                            style="padding: 8px 16px; margin-left: 5px"
-          </el-form-item>
+                            >查询</el-button
-        </el-form>
+                        >
-        <div>
+                    </el-col>
-          <h2>{{ equipment }}</h2>
+                </el-row>
-          <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-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"
+                                @click="handlePreviewTrip()"
+                            >
+                                <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>
+                        </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>
+                                    <span>1时19分</span>
+                                </div>
+                                <h3>安徽省------</h3>
+                            </div>
+                        </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: 550px; background-color: #bfc"
+                    ></div>
+                </el-col>
+            </el-row>
         </el-dialog>
     </div>
 </template>
@@ -37,8 +120,21 @@
 <script>
 export default {
     name: 'MapDialog',
+    props: {
+        // 设备名称
+        deviceName: {
+            type: String,
+            default: () => '',
+        },
+        // 设备状态
+        deviceType: {
+            type: String,
+            default: () => '',
+        },
+    },
     data() {
         return {
+            dialogVisible: true,
             openMap: false, // 是否打开地图弹框
             queryForm: {
                 date: '',
@@ -78,12 +174,51 @@ export default {
                     lat: 40.056379,
                 },
             ],
+
+            count: 0,
         }
     },
+
     mounted() {
-    this.getEquipmentInfo()
+        console.log('地图弹框组件被创建--')
+        // this.getEquipmentInfo()
+        this.initMap()
     },
+
+    beforeDestroy() {
+        this.map.clearOverlays()
+        this.map.destroy()
+        this.map = null
+        console.log('地图弹框组件销毁了---', this.map)
+    },
+
     methods: {
+        /** 查看行程 */
+        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)
             const params = {
@@ -99,10 +234,6 @@ export default {
             this.openMap = val
             this.initMap()
         },
-    close() {
-      this.openMap = false
-      this.$emit('getList')
-    },
         // 获取装备信息
         getEquipmentInfo(params = {}) {
             console.log('🚀 ~ getEquipmentInfo ~ 获取装备信息', params)
@@ -118,63 +249,190 @@ export default {
             this.$nextTick(() => {
                 this.map = new BMapGL.Map('container') // 创建地图实例
                 let point = new BMapGL.Point(117.14, 31.87) // 创建点坐标
-        console.log('🚀 ~ this.$nextTick ~ point:', point)
                 this.map.centerAndZoom(point, 15) // 初始化地图，设置中心点坐标和地图级别
                 this.map.enableScrollWheelZoom(true) // 启用滚轮放大缩小
-
+                this.map.setHeading(64.5) //设置地图旋转角度
-        // 添加轨迹
+                this.map.setTilt(73) //设置地图的倾斜角度
-        let pointList = []
+                let marker = new BMapGL.Marker(point) // 创建标点
-        if (this.linePointList.length === 0) return
+                this.map.addOverlay(marker)
-        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()
             })
         },
         // 添加起点和终点的标记
         addStartEndMarkers(startLatLng, endLatLng) {
-      let startIcon = new BMapGL.Icon(require('/src/assets/images/startIcon.png'), new BMapGL.Size(32, 32))
+            let startIcon = new BMapGL.Icon(
-      let startMarker = new BMapGL.Marker(startLatLng, { icon: startIcon })
+                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,
             )
 
             // 添加起点和终点的图标
             this.addStartEndMarkers(startLatLng, endLatLng)
         },
+
+        /** 关闭地图弹框 */
+        handelCloseDialog() {
+            this.$emit('handelCloseDialog')
+        },
     },
 }
 </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: 550px;
+    }
+}
+::v-deep .el-tabs__nav {
+    width: 100%;
+    display: flex;
+
+    .el-tabs__item {
+        flex: 1;
+        text-align: center;
+    }
+}
+
+::v-deep .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
+    color: #fff;
+    background-color: #1890ff;
+}
+
+::v-deep .el-tabs--border-card > .el-tabs__content {
+    padding: 0;
+    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;
+        align-items: center;
+        justify-content: center;
+        background-color: #e7f3ff;
+    }
+
+    .right-info {
+        flex: 1;
+        padding: 8px;
+        ul {
+            padding: 0;
+            margin: 0;
+            list-style: none;
+            display: flex;
+            li {
+                flex: 1;
+                text-align: center;
+            }
+
+            &:first-child li {
+                color: #409eff;
+            }
+        }
+
+        .time-container {
+            padding-left: 15px;
+            span {
+                display: inline-block;
+                height: 20px;
+                line-height: 20px;
+            }
+        }
+    }
+
+    .active {
+        background-color: #e8eaed;
+    }
+}
+
+h3 {
+    padding: 0 0 0 15px;
+    margin: 5px 0 0 0;
+    font-size: 16px;
+    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>