From dc8546d7c4aa91d8682fcfcfaae0f52d4514251e Mon Sep 17 00:00:00 2001
From: BianLzhaoMin <11485688+bianliangzhaomin123@user.noreply.gitee.com>
Date: Mon, 5 Aug 2024 18:10:34 +0800
Subject: [PATCH] =?UTF-8?q?iot=E9=A1=B5=E9=9D=A2=E8=B0=83=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../machinery/coding/component/MapDIalog.vue  | 367 ++++++++++--------
 .../machinery/coding/index.vue                |   7 +-
 2 files changed, 211 insertions(+), 163 deletions(-)

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 ee27f634..0e6c868a 100644
--- a/sgzb-ui/src/views/warehouseManage/machinery/coding/component/MapDIalog.vue
+++ b/sgzb-ui/src/views/warehouseManage/machinery/coding/component/MapDIalog.vue
@@ -1,180 +1,223 @@
 <template>
-  <div>
-    <!-- 地图弹框 展示设备轨迹 -->
-    <el-dialog title="装备定位信息" :visible.sync="openMap" width="80%" :close-on-click-modal="false" @close="close">
-      <!-- 表单 根据日期查询设备轨迹 -->
-      <el-card shadow="hover">
-        <el-form :model="queryForm" inline>
-          <el-form-item label="查询日期">
-            <el-date-picker
-              v-model="queryForm.date"
-              type="daterange"
-              range-separator="至"
-              start-placeholder="请选择开始日期"
-              end-placeholder="请选择结束日期"
-              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" @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>
+        <!-- 地图弹框 展示设备轨迹 -->
+        <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>
+                    <el-form-item label="查询日期">
+                        <el-date-picker
+                            v-model="queryForm.date"
+                            type="daterange"
+                            range-separator="至"
+                            start-placeholder="请选择开始日期"
+                            end-placeholder="请选择结束日期"
+                            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"
+                            @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>
+                <!-- 地图 -->
+                <div
+                    v-if="openMap"
+                    id="container"
+                    style="
+                        height: 500px;
+                        background-color: #bfc;
+                        margin-top: 13px;
+                    "
+                ></div>
+            </el-card>
+        </el-dialog>
+    </div>
 </template>
 
 <script>
 export default {
-  name: 'MapDialog',
-  data() {
-    return {
-      openMap: false, // 是否打开地图弹框
-      queryForm: {
-        date: '',
-      },
-      equipment: '', // 设备名称
-      equipmentNumber: 'H906L', // 设备编号
-      engineering: '大禹治水', // 工程
-      map: null,
-      // 轨迹点
-      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,
-        },
-      ],
-    }
-  },
-  mounted() {
-    this.getEquipmentInfo()
-  },
-  methods: {
-    async handleQuery() {
-      console.log('🚀 ~ handleQuery ~ 查询:', this.queryForm.date)
-      const params = {
-        date: this.queryForm.date,
-      }
-      this.getEquipmentInfo(params)
-      // 先销毁地图 再重新初始化
-      this.map.clearOverlays()
-      this.map = null
-      await this.initMap()
-    },
-    openMapDialog(val) {
-      this.openMap = val
-      this.initMap()
-    },
-    close() {
-      this.openMap = false
-      this.$emit('getList')
-    },
-    // 获取装备信息
-    getEquipmentInfo(params = {}) {
-      console.log('🚀 ~ getEquipmentInfo ~ 获取装备信息', params)
-      // 接口(params).then(res => {
-      //   this.equipment = res.equipment
-      //   this.equipmentNumber = res.equipmentNumber
-      //   this.engineering = res.engineering
-      //   this.linePointList = res.linePointList
-      // })
-    },
-    // 初始化地图和轨迹
-    initMap() {
-      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) // 启用滚轮放大缩小
-
-        // 添加轨迹
-        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))
+    name: 'MapDialog',
+    data() {
+        return {
+            openMap: false, // 是否打开地图弹框
+            queryForm: {
+                date: '',
+            },
+            equipment: '', // 设备名称
+            equipmentNumber: 'H906L', // 设备编号
+            engineering: '大禹治水', // 工程
+            map: null,
+            // 轨迹点
+            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,
+                },
+            ],
         }
-        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 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 endMarker = new BMapGL.Marker(endLatLng, { icon: endIcon })
-      this.map.addOverlay(endMarker)
+    mounted() {
+        this.getEquipmentInfo()
     },
-    // 轨迹运动结束后的回调
-    triggerMovement() {
-      // 轨迹运动结束后获取起点和终点的经纬度坐标
-      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.addStartEndMarkers(startLatLng, endLatLng)
+    methods: {
+        async handleQuery() {
+            console.log('🚀 ~ handleQuery ~ 查询:', this.queryForm.date)
+            const params = {
+                date: this.queryForm.date,
+            }
+            this.getEquipmentInfo(params)
+            // 先销毁地图 再重新初始化
+            this.map.clearOverlays()
+            this.map = null
+            await this.initMap()
+        },
+        openMapDialog(val) {
+            this.openMap = val
+            this.initMap()
+        },
+        close() {
+            this.openMap = false
+            this.$emit('getList')
+        },
+        // 获取装备信息
+        getEquipmentInfo(params = {}) {
+            console.log('🚀 ~ getEquipmentInfo ~ 获取装备信息', params)
+            // 接口(params).then(res => {
+            //   this.equipment = res.equipment
+            //   this.equipmentNumber = res.equipmentNumber
+            //   this.engineering = res.engineering
+            //   this.linePointList = res.linePointList
+            // })
+        },
+        // 初始化地图和轨迹
+        initMap() {
+            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) // 启用滚轮放大缩小
+
+                // 添加轨迹
+                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()
+            })
+        },
+        // 添加起点和终点的标记
+        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,
+            })
+            this.map.addOverlay(startMarker)
+
+            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 endLatLng = new BMapGL.Point(
+                this.linePointList[this.linePointList.length - 1].lng,
+                this.linePointList[this.linePointList.length - 1].lat,
+            )
+
+            // 添加起点和终点的图标
+            this.addStartEndMarkers(startLatLng, endLatLng)
+        },
     },
-  },
 }
 </script>
 
 <style lang="scss" scoped>
 .equipment {
-  font-weight: 600;
-  font-size: 15px;
-  margin-top: 10px;
+    font-weight: 600;
+    font-size: 15px;
+    margin-top: 10px;
 }
 </style>
diff --git a/sgzb-ui/src/views/warehouseManage/machinery/coding/index.vue b/sgzb-ui/src/views/warehouseManage/machinery/coding/index.vue
index 889d2aea..167f5aa5 100644
--- a/sgzb-ui/src/views/warehouseManage/machinery/coding/index.vue
+++ b/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="操作"