iot页面调试
This commit is contained in:
BianLzhaoMin
parent
34511e5972
commit
dc8546d7c4
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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="操作"
|
||||
|
|
|
|||
Loading…
Reference in New Issue