iot设备定位页面完善
This commit is contained in:
BianLzhaoMin
parent
dc8546d7c4
commit
01e5924e0e
|
|
@ -39,7 +39,7 @@
|
|||
"@riophae/vue-treeselect": "0.4.0",
|
||||
"axios": "0.24.0",
|
||||
"clipboard": "2.0.8",
|
||||
"core-js": "3.25.3",
|
||||
"core-js": "^3.38.0",
|
||||
"echarts": "5.4.0",
|
||||
"element-ui": "2.15.13",
|
||||
"file-saver": "^2.0.5",
|
||||
|
|
|
|||
|
|
@ -3,11 +3,9 @@
|
|||
<!-- 地图弹框 展示设备轨迹 -->
|
||||
<el-dialog
|
||||
title="装备定位信息"
|
||||
:visible.sync="openMap"
|
||||
v-if="openMap"
|
||||
width="80%"
|
||||
:close-on-click-modal="false"
|
||||
@close="close"
|
||||
:visible.sync="dialogVisible"
|
||||
width="90%"
|
||||
@close="handelCloseDialog()"
|
||||
>
|
||||
<!-- 表单 根据日期查询设备轨迹 -->
|
||||
<el-card shadow="hover">
|
||||
|
|
@ -40,18 +38,148 @@
|
|||
>
|
||||
<div class="equipment">{{ engineering }}工程</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-row :gutter="24" class="map-container">
|
||||
<el-col :span="6">
|
||||
<el-tabs type="border-card" class="map-left">
|
||||
<el-tab-pane label="行程">
|
||||
<div class="trip-container">
|
||||
<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>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>里程</li>
|
||||
<li>行驶时长</li>
|
||||
<li>最大速度</li>
|
||||
<li>平均速度</li>
|
||||
</ul>
|
||||
|
||||
<div style="margin-top: 10px">
|
||||
<div class="time-container">
|
||||
<span class="radius-span">始</span>
|
||||
<span>2024-07-18 01:18:53</span>
|
||||
</div>
|
||||
<h3>安徽省------</h3>
|
||||
</div>
|
||||
<div style="margin-top: 10px">
|
||||
<div class="time-container">
|
||||
<span
|
||||
class="radius-span"
|
||||
style="
|
||||
background-color: #e6a23c;
|
||||
"
|
||||
>终</span
|
||||
>
|
||||
<span>2024-07-18 01:18:53</span>
|
||||
</div>
|
||||
<h3>安徽省------</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="trip-container">
|
||||
<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>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>里程</li>
|
||||
<li>行驶时长</li>
|
||||
<li>最大速度</li>
|
||||
<li>平均速度</li>
|
||||
</ul>
|
||||
|
||||
<div style="margin-top: 10px">
|
||||
<div class="time-container">
|
||||
<span class="radius-span">始</span>
|
||||
<span>2024-07-18 01:18:53</span>
|
||||
</div>
|
||||
<h3>安徽省------</h3>
|
||||
</div>
|
||||
<div style="margin-top: 10px">
|
||||
<div class="time-container">
|
||||
<span
|
||||
class="radius-span"
|
||||
style="
|
||||
background-color: #e6a23c;
|
||||
"
|
||||
>终</span
|
||||
>
|
||||
<span>2024-07-18 01:18:53</span>
|
||||
</div>
|
||||
<h3>安徽省------</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="trip-container">
|
||||
<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>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>里程</li>
|
||||
<li>行驶时长</li>
|
||||
<li>最大速度</li>
|
||||
<li>平均速度</li>
|
||||
</ul>
|
||||
|
||||
<div style="margin-top: 10px">
|
||||
<div class="time-container">
|
||||
<span class="radius-span">始</span>
|
||||
<span>2024-07-18 01:18:53</span>
|
||||
</div>
|
||||
<h3>安徽省------</h3>
|
||||
</div>
|
||||
<div style="margin-top: 10px">
|
||||
<div class="time-container">
|
||||
<span
|
||||
class="radius-span"
|
||||
style="
|
||||
background-color: #e6a23c;
|
||||
"
|
||||
>终</span
|
||||
>
|
||||
<span>2024-07-18 01:18:53</span>
|
||||
</div>
|
||||
<h3>安徽省------</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="停留点">
|
||||
<div class="point-container">
|
||||
<div class="time-container">
|
||||
<span class="radius-span">1</span>
|
||||
<span>2024-07-18 01:18:53</span>
|
||||
<span>1时19分</span>
|
||||
</div>
|
||||
<h3>安徽省------</h3>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="报警">报警</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-col>
|
||||
<el-col :span="18">
|
||||
<!-- 地图 -->
|
||||
<div
|
||||
v-if="openMap"
|
||||
id="container"
|
||||
style="
|
||||
height: 500px;
|
||||
background-color: #bfc;
|
||||
margin-top: 13px;
|
||||
"
|
||||
style="height: 500px; background-color: #bfc"
|
||||
></div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -59,8 +187,15 @@
|
|||
<script>
|
||||
export default {
|
||||
name: 'MapDialog',
|
||||
// props: {
|
||||
// mapDialogVisible: {
|
||||
// type: Boolean,
|
||||
// default: () => false,
|
||||
// },
|
||||
// },
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: true,
|
||||
openMap: false, // 是否打开地图弹框
|
||||
queryForm: {
|
||||
date: '',
|
||||
|
|
@ -100,13 +235,28 @@ export default {
|
|||
lat: 40.056379,
|
||||
},
|
||||
],
|
||||
|
||||
count: 0,
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getEquipmentInfo()
|
||||
console.log('地图弹框组件被创建--')
|
||||
// this.getEquipmentInfo()
|
||||
this.initMap()
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
this.map.clearOverlays()
|
||||
this.map.destroy()
|
||||
this.map = null
|
||||
console.log('地图弹框组件销毁了---', this.map)
|
||||
},
|
||||
|
||||
methods: {
|
||||
load() {
|
||||
this.count += 2
|
||||
},
|
||||
async handleQuery() {
|
||||
console.log('🚀 ~ handleQuery ~ 查询:', this.queryForm.date)
|
||||
const params = {
|
||||
|
|
@ -123,8 +273,8 @@ export default {
|
|||
this.initMap()
|
||||
},
|
||||
close() {
|
||||
this.openMap = false
|
||||
this.$emit('getList')
|
||||
// this.openMap = false
|
||||
// this.$emit('getList')
|
||||
},
|
||||
// 获取装备信息
|
||||
getEquipmentInfo(params = {}) {
|
||||
|
|
@ -141,40 +291,41 @@ export default {
|
|||
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) // 启用滚轮放大缩小
|
||||
this.map.setHeading(64.5) //设置地图旋转角度
|
||||
this.map.setTilt(73) //设置地图的倾斜角度
|
||||
|
||||
// 添加轨迹
|
||||
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 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
|
||||
},
|
||||
)
|
||||
// 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()
|
||||
// trackAni.start()
|
||||
// // 设置起点终点图标
|
||||
// this.triggerMovement()
|
||||
})
|
||||
},
|
||||
// 添加起点和终点的标记
|
||||
|
|
@ -210,6 +361,11 @@ export default {
|
|||
// 添加起点和终点的图标
|
||||
this.addStartEndMarkers(startLatLng, endLatLng)
|
||||
},
|
||||
|
||||
/** 关闭地图弹框 */
|
||||
handelCloseDialog() {
|
||||
this.$emit('handelCloseDialog')
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -220,4 +376,93 @@ export default {
|
|||
font-size: 15px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.map-container {
|
||||
margin-top: 8px;
|
||||
|
||||
.map-left {
|
||||
height: 500px;
|
||||
}
|
||||
}
|
||||
::v-deep .el-tabs__nav {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
||||
.el-tabs__item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
|
||||
color: #fff;
|
||||
background-color: #1890ff;
|
||||
}
|
||||
|
||||
::v-deep .el-tabs--border-card > .el-tabs__content {
|
||||
padding: 0;
|
||||
height: 460px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.trip-container {
|
||||
display: flex;
|
||||
margin-bottom: 3px;
|
||||
.left-num {
|
||||
width: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #e7f3ff;
|
||||
}
|
||||
|
||||
.right-info {
|
||||
flex: 1;
|
||||
padding: 8px;
|
||||
background-color: #e8eaed;
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
li {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&:first-child li {
|
||||
color: #409eff;
|
||||
}
|
||||
}
|
||||
|
||||
.time-container {
|
||||
padding-left: 15px;
|
||||
span {
|
||||
display: inline-block;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.radius-span {
|
||||
margin-right: 3px;
|
||||
width: 20px;
|
||||
text-align: center;
|
||||
border-radius: 15px;
|
||||
background-color: #409eff;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
padding: 0 0 0 15px;
|
||||
margin: 5px 0 0 0;
|
||||
font-size: 16px;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.point-container {
|
||||
padding: 8px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
size="small"
|
||||
:inline="true"
|
||||
v-show="showSearch"
|
||||
label-width="68px"
|
||||
label-width="80px"
|
||||
>
|
||||
<el-form-item label="关键字" prop="keyWord">
|
||||
<el-input
|
||||
|
|
@ -77,6 +77,7 @@
|
|||
clearable
|
||||
filterable
|
||||
placeholder="请选择资产属性"
|
||||
style="width: 240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="keeper in propList"
|
||||
|
|
@ -144,6 +145,7 @@
|
|||
<el-table
|
||||
v-loading="loading"
|
||||
:data="devicesList"
|
||||
border
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column
|
||||
|
|
@ -165,13 +167,13 @@
|
|||
label="设备类型"
|
||||
align="center"
|
||||
prop="deviceType"
|
||||
:show-overflow-tooltip="true"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column
|
||||
label="规格型号"
|
||||
align="center"
|
||||
prop="specificationType"
|
||||
:show-overflow-tooltip="true"
|
||||
show-overflow-tooltip
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
|
|
@ -239,14 +241,10 @@
|
|||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="操作"
|
||||
align="center"
|
||||
width="150"
|
||||
class-name="small-padding fixed-width"
|
||||
>
|
||||
<el-table-column label="操作" align="center" width="150">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
style="padding: 6px 10px"
|
||||
size="mini"
|
||||
type="primary"
|
||||
icon="el-icon-edit"
|
||||
|
|
@ -255,6 +253,7 @@
|
|||
>编辑</el-button
|
||||
>
|
||||
<el-button
|
||||
style="padding: 6px 10px"
|
||||
size="mini"
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
|
|
@ -534,7 +533,11 @@
|
|||
<!-- <el-button type="primary" @click="downloadCode">下 载</el-button> -->
|
||||
</div>
|
||||
</el-dialog>
|
||||
<MapDialog ref="mapDialog" @getList="getList" />
|
||||
<MapDialog
|
||||
v-if="mapDialogVisible"
|
||||
ref="mapDialog"
|
||||
@handelCloseDialog="handelCloseDialog"
|
||||
/>
|
||||
</div>
|
||||
<div v-else>
|
||||
<BindIOT :props="props" />
|
||||
|
|
@ -638,6 +641,9 @@ export default {
|
|||
},
|
||||
],
|
||||
},
|
||||
|
||||
// 地图弹框
|
||||
mapDialogVisible: false,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
|
@ -844,8 +850,10 @@ export default {
|
|||
deviceType: row.deviceType,
|
||||
}
|
||||
// 点击打开弹框
|
||||
this.$refs.mapDialog.openMapDialog(true)
|
||||
this.$refs.mapDialog.getEquipmentInfo(params)
|
||||
// this.$refs.mapDialog.openMapDialog(true)
|
||||
this.mapDialogVisible = true
|
||||
|
||||
// this.$refs.mapDialog.getEquipmentInfo(params)
|
||||
},
|
||||
handlePush() {
|
||||
this.$modal
|
||||
|
|
@ -875,6 +883,11 @@ export default {
|
|||
this.$message.info('已取消推送')
|
||||
})
|
||||
},
|
||||
|
||||
/** 关闭地图弹框 */
|
||||
handelCloseDialog() {
|
||||
this.mapDialogVisible = false
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ module.exports = {
|
|||
// target: `http://10.40.92.81:8080`, //韩/
|
||||
// target: `http://192.168.2.81:28080`,//旭/
|
||||
// target: `http://192.168.2.248:28080`, //帅
|
||||
target: `http://192.168.2.241:28080`, //福
|
||||
target: `http://192.168.2.246:28080`, //福
|
||||
|
||||
//******** 注意事项 ********* */
|
||||
//1.全局替换qrUrl二维码扫码提供的网址-发布服务器的地址target;
|
||||
|
|
|
|||
Loading…
Reference in New Issue