iot定位设备页面接口完善，行程信息回显成功

sgzb-ui/package.json

@@ -50,6 +50,7 @@
         "js-cookie": "3.0.1",
         "jsencrypt": "3.0.0-rc.1",
         "jszip": "^3.10.1",
+        "moment": "^2.30.1",
         "nprogress": "0.2.0",
         "qrcodejs2": "0.0.2",
         "quill": "1.3.7",

sgzb-ui/src/api/store/iotManagement.js

@@ -92,3 +92,7 @@ export function getRecordListAll(params = {}) {
 export const getIotDeviceLocationApi = (data) => {
   return request.post('/material/iotMachine/getLocation', data)
 }
+/** 获取机具设备的行程信息 */
+export const getIotDeviceTripApi = (data) => {
+  return request.post('/material/iotMachine/searchItinerary', data)
+}

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

@@ -21,17 +21,17 @@
                     <el-col :span="8">
                         <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 HH:mm:ss"
-                            value-format="yyyy-MM-dd"
+                            @change="onChangeTime"
-                            format="yyyy-MM-dd"
                         />
                         <el-button
                             type="primary"
                             style="padding: 8px 16px; margin-left: 5px"
+                            @click="handleQuery()"
                             >查询</el-button
                         >
                     </el-col>
@@ -44,15 +44,20 @@
                         <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="left-num">{{ index + 1 }}</div>
-                                <div class="right-info">
+                                <div
+                                    class="right-info"
+                                    :class="{ active: activeIndex === index }"
+                                >
                                     <ul>
-                                        <li>0KM</li>
+                                        <li>{{ item.tripdistance }}KM</li>
-                                        <li>22秒</li>
+                                        <li>{{ item.drivingDuration }}秒</li>
-                                        <li>5KM/h</li>
+                                        <li>{{ item.maxspeed }}KM/h</li>
-                                        <li>0KM/h</li>
+                                        <li>{{ item.averagespeed }}KM/h</li>
                                     </ul>
                                     <ul>
                                         <li>里程</li>
@@ -64,9 +69,9 @@
                                     <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,9 +82,9 @@
                                                 "
                                                 >终</span
                                             >
-                                            <span>2024-07-18 01:18:53</span>
+                                            <span>{{ item.endTime }}</span>
                                         </div>
-                                        <h3>安徽省------</h3>
+                                        <h3>{{ item.endAddress }}</h3>
                                     </div>
                                 </div>
                             </div>
@@ -118,7 +123,11 @@
 </template>
 
 <script>
-import { getIotDeviceLocationApi } from '@/api/store/iotManagement.js'
+import moment from 'moment'
+import {
+    getIotDeviceLocationApi,
+    getIotDeviceTripApi,
+} from '@/api/store/iotManagement.js'
 export default {
     name: 'MapDialog',
     props: {
@@ -132,7 +141,7 @@ export default {
             type: String,
             default: () => '',
         },
-        // 设备状态
+        // iot设备id
         iotCode: {
             type: String,
             default: () => '',
@@ -143,7 +152,10 @@ export default {
             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', // 设备编号
@@ -152,32 +164,12 @@ export default {
             // 轨迹点
             linePointList: [
                 {
-                    lng: 116.297611,
+                    lng: '',
-                    lat: 40.047363,
+                    lat: '',
                 },
                 {
-                    lng: 116.302839,
+                    lng: '',
-                    lat: 40.048219,
+                    lat: '',
-                },
-                {
-                    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,
                 },
             ],
 
@@ -185,16 +177,30 @@ export default {
             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: '',
         }
     },
-
+    created() {
+        this.handleQuery()
+    },
     mounted() {
         Promise.all([this.getIotDeviceLocation()])
             .then((res) => {
                 this.initMap()
             })
             .catch((err) => {
-                console.log(err, '失败')
+                console.log(err)
             })
 
         // this.getIotDeviceLocation()
@@ -225,9 +231,54 @@ export default {
                 this.calLat = res.callat
             }
         },
+        /** 查询按钮 */
+        async handleQuery() {
+            this.tripParams.iotId = this.iotCode
+            const res = await getIotDeviceTripApi({ ...this.tripParams })
+            console.log(res, '行程信息--')
+
+            let tripInfo = JSON.parse(res.msg)
+            console.log(tripInfo, '反序列化之后')
+
+            let addressList = []
+            if (tripInfo.addressmap) {
+                addressList = Object.keys(tripInfo.addressmap)
+            }
+
+            tripInfo.totaltrips.forEach((e) => {
+                e.startTime = moment(e.startTime).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(
@@ -237,6 +288,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
@@ -251,17 +305,17 @@ export default {
             // 设置起点终点图标
             this.triggerMovement()
         },
-        async handleQuery() {
+        // async handleQuery() {
-            console.log('🚀 ~ handleQuery ~ 查询:', this.queryForm.date)
+        //     console.log('🚀 ~ handleQuery ~ 查询:', this.queryForm.date)
-            const params = {
+        //     const params = {
-                date: this.queryForm.date,
+        //         date: this.queryForm.date,
-            }
+        //     }
-            this.getEquipmentInfo(params)
+        //     this.getEquipmentInfo(params)
-            // 先销毁地图 再重新初始化
+        //     // 先销毁地图 再重新初始化
-            this.map.clearOverlays()
+        //     this.map.clearOverlays()
-            this.map = null
+        //     this.map = null
-            await this.initMap()
+        //     await this.initMap()
-        },
+        // },
         openMapDialog(val) {
             this.openMap = val
             this.initMap()
@@ -281,14 +335,22 @@ export default {
             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) // 创建点坐标
+                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, '所在位置--')
+                // })
             })
         },
         // 添加起点和终点的标记
@@ -329,6 +391,11 @@ export default {
         handelCloseDialog() {
             this.$emit('handelCloseDialog')
         },
+        /** 时间选择器 */
+        onChangeTime(val) {
+            this.tripParams.beginTime = val[0]
+            this.tripParams.endTime = val[1]
+        },
     },
 }
 </script>
@@ -406,6 +473,7 @@ export default {
             margin: 0;
             list-style: none;
             display: flex;
+            align-items: center;
             li {
                 flex: 1;
                 text-align: center;

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

@@ -224,9 +224,9 @@
             </el-table-column>
             <el-table-column label="IOT设备" align="center" prop="ownHouseName">
                 <template slot-scope="{ row }">
-                    <el-button type="text" @click="handleBindIOT(row)"
+                    <el-button type="text" @click="handleBindIOT(row)">{{
-                        >未绑定</el-button
+                        row.iotNum === 0 ? '未绑定' : row.iotNum
-                    >
+                    }}</el-button>
                 </template>
             </el-table-column>
             <el-table-column
@@ -236,9 +236,11 @@
             >
                 <template slot-scope="{ row }">
                     <i
+                        v-if="row.iotNum > 0"
                         class="el-icon-location location-icon"
                         @click="handleMap(row)"
                     />
+                    <template v-else> - </template>
                 </template>
             </el-table-column>
             <el-table-column label="操作" align="center" width="150">
@@ -853,13 +855,8 @@ export default {
         async handleMap(row) {
             this.deviceName = row.specificationType
             this.deviceType = row.maStatusName
-            // 获取绑定的iot设备
+            this.iotCode = row.iotCode
-            const res = await getTypeListApi({ maCode: row.maCode })
 
-            if (res.rows.length > 0) {
-                this.iotCode = res.rows[0].iotCode
-            }
-            // console.log(res, '获取的iot设备信息')
             this.mapDialogVisible = true
         },
         handlePush() {