From 377c904af2e73a7497a6c024f3b6ab902bd22a8d Mon Sep 17 00:00:00 2001
From: BianLzhaoMin <11485688+bianliangzhaomin123@user.noreply.gitee.com>
Date: Fri, 9 Aug 2024 10:10:15 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E5=90=88=E5=B9=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../machinery/coding/component/MapDIalog.vue  | 296 +++++++++++++-----
 1 file changed, 224 insertions(+), 72 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 28179597..c6e4873d 100644
--- a/sgzb-ui/src/views/warehouseManage/machinery/coding/component/MapDIalog.vue
+++ b/sgzb-ui/src/views/warehouseManage/machinery/coding/component/MapDIalog.vue
@@ -18,20 +18,20 @@
                 </div>
                 <div class="equipment" v-if="false">{{ engineering }}工程</div>
                 <el-row :gutter="24">
-                    <el-col :span="8">
+                    <el-col :span="16">
                         <el-date-picker
                             v-model="queryForm.date"
-                            type="daterange"
+                            type="datetimerange"
                             range-separator="至"
                             start-placeholder="请选择开始日期"
                             end-placeholder="请选择结束日期"
-                            style="width: 330px"
-                            value-format="yyyy-MM-dd"
-                            format="yyyy-MM-dd"
+                            value-format="yyyy-MM-dd HH:mm:ss"
+                            @change="onChangeTime"
                         />
                         <el-button
                             type="primary"
                             style="padding: 8px 16px; margin-left: 5px"
+                            @click="handleQuery()"
                             >查询</el-button
                         >
                     </el-col>
@@ -44,29 +44,34 @@
                         <el-tab-pane label="行程">
                             <div
                                 class="trip-container"
-                                @click="handlePreviewTrip()"
+                                @click="handlePreviewTrip(item, index)"
+                                v-for="(item, index) in tripList"
+                                :key="index"
                             >
-                                <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>
+                                <div class="left-num">{{ index + 1 }}</div>
+                                <div
+                                    class="right-info"
+                                    :class="{ active: activeIndex === index }"
+                                >
+                                    <!-- <ul>
+                                        <li>{{ item.tripdistance }}KM</li>
+                                        <li>{{ item.drivingDuration }}秒</li>
+                                        <li>{{ item.maxspeed }}KM/h</li>
+                                        <li>{{ item.averagespeed }}KM/h</li>
                                     </ul>
                                     <ul>
                                         <li>里程</li>
                                         <li>行驶时长</li>
                                         <li>最大速度</li>
                                         <li>平均速度</li>
-                                    </ul>
+                                    </ul> -->
 
                                     <div style="margin-top: 10px">
                                         <div class="time-container">
                                             <span class="radius-span">始</span>
-                                            <span>2024-07-18 01:18:53</span>
+                                            <span>{{ item.startTime }}</span>
                                         </div>
-                                        <h3>安徽省------</h3>
+                                        <h3>{{ item.startAddress }}</h3>
                                     </div>
                                     <div style="margin-top: 10px">
                                         <div class="time-container">
@@ -77,30 +82,46 @@
                                                 "
                                                 >终</span
                                             >
-                                            <span>2024-07-18 01:18:53</span>
+                                            <span>{{ item.endTime }}</span>
                                         </div>
-                                        <h3>安徽省------</h3>
+                                        <h3>{{ item.endAddress }}</h3>
                                     </div>
                                 </div>
                             </div>
                         </el-tab-pane>
                         <el-tab-pane label="停留点">
-                            <div class="point-container">
+                            <div
+                                class="point-container"
+                                v-for="(item, index) in parkList"
+                                :key="index"
+                            >
                                 <div class="time-container">
-                                    <span class="radius-span">1</span>
-                                    <span>2024-07-18 01:18:53</span>
-                                    <span>1时19分</span>
+                                    <span class="radius-span">{{
+                                        index + 1
+                                    }}</span>
+                                    <span>{{ item.startTime }}</span>
+                                    <span
+                                        >{{ item.hours }}时{{
+                                            item.mints
+                                        }}分</span
+                                    >
                                 </div>
-                                <h3>安徽省------</h3>
+                                <h3>{{ item.address }}</h3>
                             </div>
                         </el-tab-pane>
                         <el-tab-pane label="报警">
-                            <div class="point-container">
+                            <div
+                                class="point-container"
+                                v-for="(item, index) in warningList"
+                                :key="index"
+                            >
                                 <div class="time-container">
-                                    <span class="radius-span">1</span>
-                                    <span>2024-07-18 01:18:53</span>
+                                    <span class="radius-span">{{
+                                        index + 1
+                                    }}</span>
+                                    <span>{{ item.warnTime }}</span>
                                 </div>
-                                <h3>手动触发紧急报警---------</h3>
+                                <h3>{{ item.startAlarm }}</h3>
                             </div>
                         </el-tab-pane>
                     </el-tabs>
@@ -118,6 +139,13 @@
 </template>
 
 <script>
+import moment from 'moment'
+import {
+    getIotDeviceLocationApi,
+    getIotDeviceTripApi,
+    getIotDeviceParkDetailApi,
+    getIotDeviceAlarmApi,
+} from '@/api/store/iotManagement.js'
 export default {
     name: 'MapDialog',
     props: {
@@ -131,13 +159,21 @@ export default {
             type: String,
             default: () => '',
         },
+        // iot设备id
+        iotCode: {
+            type: String,
+            default: () => '',
+        },
     },
     data() {
         return {
             dialogVisible: true,
             openMap: false, // 是否打开地图弹框
             queryForm: {
-                date: '',
+                date: [
+                    moment().subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss'),
+                    moment().format('YYYY-MM-DD HH:mm:ss'),
+                ],
             },
             equipment: '', // 设备名称
             equipmentNumber: 'H906L', // 设备编号
@@ -146,45 +182,48 @@ export default {
             // 轨迹点
             linePointList: [
                 {
-                    lng: 116.297611,
-                    lat: 40.047363,
+                    lng: '',
+                    lat: '',
                 },
                 {
-                    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,
+                    lng: '',
+                    lat: '',
                 },
             ],
 
             count: 0,
-
             trackAni: null, // 轨迹实例
+            calLon: '',
+            calLat: '',
+
+            // 查询设备行程信息的参数
+            tripParams: {
+                beginTime: moment()
+                    .subtract(1, 'days')
+                    .format('YYYY-MM-DD HH:mm:ss'),
+                endTime: moment().format('YYYY-MM-DD HH:mm:ss'),
+                iotId: '',
+            },
+            // 行程信息
+            tripList: [],
+            activeIndex: '',
+            // 停留点信息
+            parkList: [],
         }
     },
-
+    created() {
+        this.handleQuery()
+    },
     mounted() {
-        console.log('地图弹框组件被创建--')
-        // this.getEquipmentInfo()
-        this.initMap()
+        Promise.all([this.getIotDeviceLocation()])
+            .then((res) => {
+                this.initMap()
+            })
+            .catch((err) => {
+                console.log(err)
+            })
+
+        // this.getIotDeviceLocation()
     },
 
     beforeDestroy() {
@@ -201,9 +240,103 @@ export default {
     },
 
     methods: {
+        /** 获取当前设备的信息 */
+        async getIotDeviceLocation() {
+            if (this.iotCode) {
+                const { data: res } = await getIotDeviceLocationApi({
+                    iotId: this.iotCode,
+                })
+                // 获取经纬度并赋值
+                this.calLon = res.callon
+                this.calLat = res.callat
+            }
+        },
+        /** 查询按钮 */
+        async handleQuery() {
+            this.tripParams.iotId = this.iotCode
+            const res = await getIotDeviceTripApi({ ...this.tripParams })
+            console.log(res, '行程信息--')
+
+            const resS = await getIotDeviceParkDetailApi({ ...this.tripParams })
+
+            console.log(resS, '停留点信息--')
+
+            const params = { ...this.tripParams }
+            params.beginTime = params.beginTime.slice(0, 10)
+            params.endTime = params.endTime.slice(0, 10)
+            const resSs = await getIotDeviceAlarmApi(params)
+
+            this.warningList = resSs.data
+            this.warningList.forEach((e) => {
+                e.warnTime = moment(parseInt(e.startAlarmTime)).format(
+                    'YYYY-MM-DD HH:mm:ss',
+                )
+            })
+            console.log(resSs, '报警信息--')
+
+            this.parkList = resS.data
+            this.parkList.forEach((e) => {
+                e.startTime = moment(parseInt(e.beginTime)).format(
+                    'YYYY-MM-DD HH:mm:ss',
+                )
+
+                e.hours = parseInt(
+                    (parseInt(e.endTime) - parseInt(e.beginTime)) /
+                        1000 /
+                        60 /
+                        60,
+                )
+                e.mints = parseInt(
+                    ((parseInt(e.endTime) - parseInt(e.beginTime)) /
+                        1000 /
+                        60) %
+                        60,
+                )
+            })
+            let tripInfo = JSON.parse(res.msg)
+            console.log(tripInfo, '反序列化之后', this.parkList)
+
+            let addressList = []
+            if (tripInfo.addressmap) {
+                addressList = Object.keys(tripInfo.addressmap)
+            }
+
+            tripInfo.totaltrips.forEach((e) => {
+                e.startTime = moment(e.trackstarttime).format(
+                    'YYYY-MM-DD HH:mm:ss',
+                )
+                e.endTime = moment(e.trackendtime).format('YYYY-MM-DD HH:mm:ss')
+
+                e.drivingDuration = parseInt(
+                    (e.trackendtime - e.trackstarttime) / 1000,
+                )
+
+                addressList.forEach((v) => {
+                    if (v.indexOf(e.slat.toString().slice(0, 7)) > -1) {
+                        e.startAddress = tripInfo.addressmap[v]
+                    }
+                    if (v.indexOf(e.elat.toString().slice(0, 7)) > -1) {
+                        e.endAddress = tripInfo.addressmap[v]
+                    }
+                })
+            })
+
+            this.tripList = tripInfo.totaltrips
+
+            console.log(tripInfo, '处理之后-----')
+        },
         /** 查看行程 */
-        handlePreviewTrip() {
+        handlePreviewTrip(item, index) {
+            this.activeIndex = index
+            if (this.trackAni) {
+                this.trackAni.cancel()
+            }
+            this.map.clearOverlays()
             let pointList = []
+            this.linePointList[0].lng = item.slon
+            this.linePointList[0].lat = item.slat
+            this.linePointList[1].lng = item.elon
+            this.linePointList[1].lat = item.elat
             if (this.linePointList.length === 0) return
             for (var i = 0; i < this.linePointList.length; i++) {
                 pointList.push(
@@ -213,6 +346,9 @@ export default {
                     ),
                 )
             }
+
+            // pointList.push(new BMapGL.Point(item.slon, item.slat))
+            // pointList.push(new BMapGL.Point(item.elon, item.elat))
             let polyline = new BMapGL.Polyline(pointList)
             // 修改线的样式
             polyline.setStrokeColor('#EA3323') // 线颜色  #EA3323
@@ -220,24 +356,24 @@ export default {
             this.trackAni = new BMapGLLib.TrackAnimation(this.map, polyline, {
                 overallView: true, // 动画完成后自动调整视野到总览
                 tilt: 30, // 轨迹播放的角度，默认为55
-                duration: 5000, // 动画持续时长，默认为10000，单位ms
-                delay: 2000, // 动画开始的延迟，默认0，单位ms
+                duration: 3000, // 动画持续时长，默认为10000，单位ms
+                delay: 500, // 动画开始的延迟，默认0，单位ms
             })
             this.trackAni.start()
             // 设置起点终点图标
             this.triggerMovement()
         },
-        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()
-        },
+        // 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()
@@ -254,15 +390,25 @@ export default {
         },
         // 初始化地图和轨迹
         initMap() {
+            console.log('地图初始化--')
             this.$nextTick(() => {
                 this.map = new BMapGL.Map('container') // 创建地图实例
-                let point = new BMapGL.Point(117.14, 31.87) // 创建点坐标
+                // let point = new BMapGL.Point(117.13805, 31.8734) // 创建点坐标
+                let point = new BMapGL.Point(this.calLon, this.calLat) // 创建点坐标
                 this.map.centerAndZoom(point, 15) // 初始化地图，设置中心点坐标和地图级别
                 this.map.enableScrollWheelZoom(true) // 启用滚轮放大缩小
                 this.map.setHeading(64.5) //设置地图旋转角度
                 this.map.setTilt(73) //设置地图的倾斜角度
                 let marker = new BMapGL.Marker(point) // 创建标点
                 this.map.addOverlay(marker)
+
+                var myGeo = new BMapGL.Geocoder()
+                // 根据坐标得到地址描述
+                // myGeo.getLocation(new BMapGL.Point(this.calLon, this.calLat))
+
+                // this.map.getLocation(point, (res) => {
+                //     console.log(res, '所在位置--')
+                // })
             })
         },
         // 添加起点和终点的标记
@@ -303,6 +449,11 @@ export default {
         handelCloseDialog() {
             this.$emit('handelCloseDialog')
         },
+        /** 时间选择器 */
+        onChangeTime(val) {
+            this.tripParams.beginTime = val[0]
+            this.tripParams.endTime = val[1]
+        },
     },
 }
 </script>
@@ -380,6 +531,7 @@ export default {
             margin: 0;
             list-style: none;
             display: flex;
+            align-items: center;
             li {
                 flex: 1;
                 text-align: center;