From 01e5924e0ebad90d5816e577a49c4f353f796435 Mon Sep 17 00:00:00 2001
From: BianLzhaoMin <11485688+bianliangzhaomin123@user.noreply.gitee.com>
Date: Tue, 6 Aug 2024 13:10:54 +0800
Subject: [PATCH] =?UTF-8?q?iot=E8=AE=BE=E5=A4=87=E5=AE=9A=E4=BD=8D?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=AE=8C=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 sgzb-ui/package.json                          |   2 +-
 .../machinery/coding/component/MapDIalog.vue  | 339 +++++++++++++++---
 .../machinery/coding/index.vue                |  37 +-
 sgzb-ui/vue.config.js                         |   2 +-
 4 files changed, 319 insertions(+), 61 deletions(-)

diff --git a/sgzb-ui/package.json b/sgzb-ui/package.json
index 0f2820f8..9c81dd3e 100644
--- a/sgzb-ui/package.json
+++ b/sgzb-ui/package.json
@@ -39,7 +39,7 @@
         "@riophae/vue-treeselect": "0.4.0",
         "axios": "0.24.0",
         "clipboard": "2.0.8",
-        "core-js": "3.25.3",
+        "core-js": "^3.38.0",
         "echarts": "5.4.0",
         "element-ui": "2.15.13",
         "file-saver": "^2.0.5",
diff --git a/sgzb-ui/src/views/warehouseManage/machinery/coding/component/MapDIalog.vue b/sgzb-ui/src/views/warehouseManage/machinery/coding/component/MapDIalog.vue
index 0e6c868a..2efdc2ee 100644
--- a/sgzb-ui/src/views/warehouseManage/machinery/coding/component/MapDIalog.vue
+++ b/sgzb-ui/src/views/warehouseManage/machinery/coding/component/MapDIalog.vue
@@ -3,11 +3,9 @@
         <!-- 地图弹框 展示设备轨迹 -->
         <el-dialog
             title="装备定位信息"
-            :visible.sync="openMap"
-            v-if="openMap"
-            width="80%"
-            :close-on-click-modal="false"
-            @close="close"
+            :visible.sync="dialogVisible"
+            width="90%"
+            @close="handelCloseDialog()"
         >
             <!-- 表单 根据日期查询设备轨迹 -->
             <el-card shadow="hover">
@@ -40,18 +38,148 @@
                     >
                     <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">
+                                <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>
+                                        <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>
+                        </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="报警">报警</el-tab-pane>
+                    </el-tabs>
+                </el-col>
+                <el-col :span="18">
+                    <!-- 地图 -->
+                    <div
+                        id="container"
+                        style="height: 500px; background-color: #bfc"
+                    ></div>
+                </el-col>
+            </el-row>
         </el-dialog>
     </div>
 </template>
@@ -59,8 +187,15 @@
 <script>
 export default {
     name: 'MapDialog',
+    // props: {
+    //     mapDialogVisible: {
+    //         type: Boolean,
+    //         default: () => false,
+    //     },
+    // },
     data() {
         return {
+            dialogVisible: true,
             openMap: false, // 是否打开地图弹框
             queryForm: {
                 date: '',
@@ -100,13 +235,28 @@ 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: {
+        load() {
+            this.count += 2
+        },
         async handleQuery() {
             console.log('🚀 ~ handleQuery ~ 查询:', this.queryForm.date)
             const params = {
@@ -123,8 +273,8 @@ export default {
             this.initMap()
         },
         close() {
-            this.openMap = false
-            this.$emit('getList')
+            // this.openMap = false
+            // this.$emit('getList')
         },
         // 获取装备信息
         getEquipmentInfo(params = {}) {
@@ -141,40 +291,41 @@ 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 = []
-                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 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
-                    },
-                )
+                // 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()
+                // trackAni.start()
+                // // 设置起点终点图标
+                // this.triggerMovement()
             })
         },
         // 添加起点和终点的标记
@@ -210,6 +361,11 @@ export default {
             // 添加起点和终点的图标
             this.addStartEndMarkers(startLatLng, endLatLng)
         },
+
+        /** 关闭地图弹框 */
+        handelCloseDialog() {
+            this.$emit('handelCloseDialog')
+        },
     },
 }
 </script>
@@ -220,4 +376,93 @@ export default {
     font-size: 15px;
     margin-top: 10px;
 }
+
+.map-container {
+    margin-top: 8px;
+
+    .map-left {
+        height: 500px;
+    }
+}
+::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: 460px;
+    overflow: auto;
+}
+
+.trip-container {
+    display: flex;
+    margin-bottom: 3px;
+    .left-num {
+        width: 16px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: #e7f3ff;
+    }
+
+    .right-info {
+        flex: 1;
+        padding: 8px;
+        background-color: #e8eaed;
+        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;
+            }
+        }
+
+        .radius-span {
+            margin-right: 3px;
+            width: 20px;
+            text-align: center;
+            border-radius: 15px;
+            background-color: #409eff;
+            color: #fff;
+        }
+    }
+}
+
+h3 {
+    padding: 0 0 0 15px;
+    margin: 5px 0 0 0;
+    font-size: 16px;
+    color: #000;
+}
+
+.point-container {
+    padding: 8px;
+}
 </style>
diff --git a/sgzb-ui/src/views/warehouseManage/machinery/coding/index.vue b/sgzb-ui/src/views/warehouseManage/machinery/coding/index.vue
index 167f5aa5..6127451e 100644
--- a/sgzb-ui/src/views/warehouseManage/machinery/coding/index.vue
+++ b/sgzb-ui/src/views/warehouseManage/machinery/coding/index.vue
@@ -7,7 +7,7 @@
             size="small"
             :inline="true"
             v-show="showSearch"
-            label-width="68px"
+            label-width="80px"
         >
             <el-form-item label="关键字" prop="keyWord">
                 <el-input
@@ -77,6 +77,7 @@
                     clearable
                     filterable
                     placeholder="请选择资产属性"
+                    style="width: 240px"
                 >
                     <el-option
                         v-for="keeper in propList"
@@ -144,6 +145,7 @@
         <el-table
             v-loading="loading"
             :data="devicesList"
+            border
             @selection-change="handleSelectionChange"
         >
             <el-table-column
@@ -165,13 +167,13 @@
                 label="设备类型"
                 align="center"
                 prop="deviceType"
-                :show-overflow-tooltip="true"
+                show-overflow-tooltip
             />
             <el-table-column
                 label="规格型号"
                 align="center"
                 prop="specificationType"
-                :show-overflow-tooltip="true"
+                show-overflow-tooltip
             >
             </el-table-column>
             <el-table-column
@@ -239,14 +241,10 @@
                     />
                 </template>
             </el-table-column>
-            <el-table-column
-                label="操作"
-                align="center"
-                width="150"
-                class-name="small-padding fixed-width"
-            >
+            <el-table-column label="操作" align="center" width="150">
                 <template slot-scope="scope">
                     <el-button
+                        style="padding: 6px 10px"
                         size="mini"
                         type="primary"
                         icon="el-icon-edit"
@@ -255,6 +253,7 @@
                         >编辑</el-button
                     >
                     <el-button
+                        style="padding: 6px 10px"
                         size="mini"
                         type="danger"
                         icon="el-icon-delete"
@@ -534,7 +533,11 @@
                 <!-- <el-button type="primary" @click="downloadCode">下 载</el-button> -->
             </div>
         </el-dialog>
-        <MapDialog ref="mapDialog" @getList="getList" />
+        <MapDialog
+            v-if="mapDialogVisible"
+            ref="mapDialog"
+            @handelCloseDialog="handelCloseDialog"
+        />
     </div>
     <div v-else>
         <BindIOT :props="props" />
@@ -638,6 +641,9 @@ export default {
                     },
                 ],
             },
+
+            // 地图弹框
+            mapDialogVisible: false,
         }
     },
     created() {
@@ -844,8 +850,10 @@ export default {
                 deviceType: row.deviceType,
             }
             // 点击打开弹框
-            this.$refs.mapDialog.openMapDialog(true)
-            this.$refs.mapDialog.getEquipmentInfo(params)
+            // this.$refs.mapDialog.openMapDialog(true)
+            this.mapDialogVisible = true
+
+            // this.$refs.mapDialog.getEquipmentInfo(params)
         },
         handlePush() {
             this.$modal
@@ -875,6 +883,11 @@ export default {
                     this.$message.info('已取消推送')
                 })
         },
+
+        /** 关闭地图弹框 */
+        handelCloseDialog() {
+            this.mapDialogVisible = false
+        },
     },
 }
 </script>
diff --git a/sgzb-ui/vue.config.js b/sgzb-ui/vue.config.js
index 3e0de6de..db48f42d 100644
--- a/sgzb-ui/vue.config.js
+++ b/sgzb-ui/vue.config.js
@@ -46,7 +46,7 @@ module.exports = {
         // target: `http://10.40.92.81:8080`, //韩/
         // target: `http://192.168.2.81:28080`,//旭/
         // target: `http://192.168.2.248:28080`, //帅
-        target: `http://192.168.2.241:28080`, //福
+        target: `http://192.168.2.246:28080`, //福
 
         //******** 注意事项  ********* */
         //1.全局替换qrUrl二维码扫码提供的网址-发布服务器的地址target;