iot定位设备页面接口完善，行程信息回显成功
This commit is contained in:
BianLzhaoMin
parent
fbe5aa49be
commit
b9995a1755
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
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,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="right-info">
|
||||
<div class="left-num">{{ index + 1 }}</div>
|
||||
<div
|
||||
class="right-info"
|
||||
:class="{ active: activeIndex === index }"
|
||||
>
|
||||
<ul>
|
||||
<li>0KM</li>
|
||||
<li>22秒</li>
|
||||
<li>5KM/h</li>
|
||||
<li>0KM/h</li>
|
||||
<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>
|
||||
|
|
@ -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,
|
||||
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: '',
|
||||
},
|
||||
],
|
||||
|
||||
|
|
@ -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() {
|
||||
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()
|
||||
|
|
@ -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(this.calLon, this.calLat) // 创建点坐标
|
||||
// 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, '所在位置--')
|
||||
// })
|
||||
})
|
||||
},
|
||||
// 添加起点和终点的标记
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
>
|
||||
<el-button type="text" @click="handleBindIOT(row)">{{
|
||||
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设备
|
||||
const res = await getTypeListApi({ maCode: row.maCode })
|
||||
this.iotCode = row.iotCode
|
||||
|
||||
if (res.rows.length > 0) {
|
||||
this.iotCode = res.rows[0].iotCode
|
||||
}
|
||||
// console.log(res, '获取的iot设备信息')
|
||||
this.mapDialogVisible = true
|
||||
},
|
||||
handlePush() {
|
||||
|
|
|
|||
Loading…
Reference in New Issue