bonus
/
devicesmgt
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

iot设备定位页面完善

This commit is contained in:
BianLzhaoMin 2024-08-06 13:10:54 +08:00
parent dc8546d7c4
commit 01e5924e0e
4 changed files with 319 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
sgzb-ui/package.json
View File

@ -39,7 +39,7 @@
"@riophae/vue-treeselect": "0.4.0", "@riophae/vue-treeselect": "0.4.0",
"axios": "0.24.0", "axios": "0.24.0",
"clipboard": "2.0.8", "clipboard": "2.0.8",
"core-js": "3.25.3", "core-js": "^3.38.0",
"echarts": "5.4.0", "echarts": "5.4.0",
"element-ui": "2.15.13", "element-ui": "2.15.13",
"file-saver": "^2.0.5", "file-saver": "^2.0.5",

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

@ -3,11 +3,9 @@
<!-- 地图弹框 展示设备轨迹 --> <!-- 地图弹框 展示设备轨迹 -->
<el-dialog <el-dialog
title="装备定位信息" title="装备定位信息"
:visible.sync="openMap" :visible.sync="dialogVisible"
v-if="openMap" width="90%"
width="80%" @close="handelCloseDialog()"
:close-on-click-modal="false"
@close="close"
> >
<!-- 表单 根据日期查询设备轨迹 --> <!-- 表单 根据日期查询设备轨迹 -->
<el-card shadow="hover"> <el-card shadow="hover">
@ -40,18 +38,148 @@
> >
<div class="equipment">{{ engineering }}工程</div> <div class="equipment">{{ engineering }}工程</div>
</div> </div>
<!-- 地图 -->
<div
v-if="openMap"
id="container"
style="
height: 500px;
background-color: #bfc;
margin-top: 13px;
"
></div>
</el-card> </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
id="container"
style="height: 500px; background-color: #bfc"
></div>
</el-col>
</el-row>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
@ -59,8 +187,15 @@
<script> <script>
export default { export default {
name: 'MapDialog', name: 'MapDialog',
// props: {
// mapDialogVisible: {
// type: Boolean,
// default: () => false,
// },
// },
data() { data() {
return { return {
dialogVisible: true,
openMap: false, // 是否打开地图弹框 openMap: false, // 是否打开地图弹框
queryForm: { queryForm: {
date: '', date: '',
@ -100,13 +235,28 @@ export default {
lat: 40.056379, lat: 40.056379,
}, },
], ],
count: 0,
} }
}, },
mounted() { mounted() {
this.getEquipmentInfo() console.log('地图弹框组件被创建--')
// this.getEquipmentInfo()
this.initMap()
},
beforeDestroy() {
this.map.clearOverlays()
this.map.destroy()
this.map = null
console.log('地图弹框组件销毁了---', this.map)
}, },
methods: { methods: {
load() {
this.count += 2
},
async handleQuery() { async handleQuery() {
console.log('🚀 ~ handleQuery ~ 查询:', this.queryForm.date) console.log('🚀 ~ handleQuery ~ 查询:', this.queryForm.date)
const params = { const params = {
@ -123,8 +273,8 @@ export default {
this.initMap() this.initMap()
}, },
close() { close() {
this.openMap = false // this.openMap = false
this.$emit('getList') // this.$emit('getList')
}, },
// 获取装备信息 // 获取装备信息
getEquipmentInfo(params = {}) { getEquipmentInfo(params = {}) {
@ -141,40 +291,41 @@ export default {
this.$nextTick(() => { this.$nextTick(() => {
this.map = new BMapGL.Map('container') // 创建地图实例 this.map = new BMapGL.Map('container') // 创建地图实例
let point = new BMapGL.Point(117.14, 31.87) // 创建点坐标 let point = new BMapGL.Point(117.14, 31.87) // 创建点坐标
console.log('🚀 ~ this.$nextTick ~ point:', point)
this.map.centerAndZoom(point, 15) // 初始化地图，设置中心点坐标和地图级别 this.map.centerAndZoom(point, 15) // 初始化地图，设置中心点坐标和地图级别
this.map.enableScrollWheelZoom(true) // 启用滚轮放大缩小 this.map.enableScrollWheelZoom(true) // 启用滚轮放大缩小
this.map.setHeading(64.5) //设置地图旋转角度
this.map.setTilt(73) //设置地图的倾斜角度
// 添加轨迹 // 添加轨迹
let pointList = [] // let pointList = []
if (this.linePointList.length === 0) return // if (this.linePointList.length === 0) return
for (var i = 0; i < this.linePointList.length; i++) { // for (var i = 0; i < this.linePointList.length; i++) {
pointList.push( // pointList.push(
new BMapGL.Point( // new BMapGL.Point(
this.linePointList[i].lng, // this.linePointList[i].lng,
this.linePointList[i].lat, // this.linePointList[i].lat,
), // ),
) // )
} // }
let polyline = new BMapGL.Polyline(pointList) // let polyline = new BMapGL.Polyline(pointList)
// 修改线的样式 // // 修改线的样式
polyline.setStrokeColor('#EA3323') // 线颜色 #EA3323 // polyline.setStrokeColor('#EA3323') // 线颜色 #EA3323
// polyline.setStrokeWeight(2) // 线宽 // // polyline.setStrokeWeight(2) // 线宽
let trackAni = new BMapGLLib.TrackAnimation( // let trackAni = new BMapGLLib.TrackAnimation(
this.map, // this.map,
polyline, // polyline,
{ // {
overallView: true, // 动画完成后自动调整视野到总览 // overallView: true, // 动画完成后自动调整视野到总览
tilt: 30, // 轨迹播放的角度，默认为55 // tilt: 30, // 轨迹播放的角度，默认为55
duration: 5000, // 动画持续时长，默认为10000，单位ms // duration: 5000, // 动画持续时长，默认为10000，单位ms
delay: 2000, // 动画开始的延迟，默认0，单位ms // delay: 2000, // 动画开始的延迟，默认0，单位ms
}, // },
) // )
trackAni.start() // trackAni.start()
// 设置起点终点图标 // // 设置起点终点图标
this.triggerMovement() // this.triggerMovement()
}) })
}, },
// 添加起点和终点的标记 // 添加起点和终点的标记
@ -210,6 +361,11 @@ export default {
// 添加起点和终点的图标 // 添加起点和终点的图标
this.addStartEndMarkers(startLatLng, endLatLng) this.addStartEndMarkers(startLatLng, endLatLng)
}, },
/** 关闭地图弹框 */
handelCloseDialog() {
this.$emit('handelCloseDialog')
},
}, },
} }
</script> </script>
@ -220,4 +376,93 @@ export default {
font-size: 15px; font-size: 15px;
margin-top: 10px; 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> </style>

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

@ -7,7 +7,7 @@
size="small" size="small"
:inline="true" :inline="true"
v-show="showSearch" v-show="showSearch"
label-width="68px" label-width="80px"
> >
<el-form-item label="关键字" prop="keyWord"> <el-form-item label="关键字" prop="keyWord">
<el-input <el-input
@ -77,6 +77,7 @@
clearable clearable
filterable filterable
placeholder="请选择资产属性" placeholder="请选择资产属性"
style="width: 240px"
> >
<el-option <el-option
v-for="keeper in propList" v-for="keeper in propList"
@ -144,6 +145,7 @@
<el-table <el-table
v-loading="loading" v-loading="loading"
:data="devicesList" :data="devicesList"
border
@selection-change="handleSelectionChange" @selection-change="handleSelectionChange"
> >
<el-table-column <el-table-column
@ -165,13 +167,13 @@
label="设备类型" label="设备类型"
align="center" align="center"
prop="deviceType" prop="deviceType"
:show-overflow-tooltip="true" show-overflow-tooltip
/> />
<el-table-column <el-table-column
label="规格型号" label="规格型号"
align="center" align="center"
prop="specificationType" prop="specificationType"
:show-overflow-tooltip="true" show-overflow-tooltip
> >
</el-table-column> </el-table-column>
<el-table-column <el-table-column
@ -239,14 +241,10 @@
/> />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column label="操作" align="center" width="150">
label="操作"
align="center"
width="150"
class-name="small-padding fixed-width"
>
<template slot-scope="scope"> <template slot-scope="scope">
<el-button <el-button
style="padding: 6px 10px"
size="mini" size="mini"
type="primary" type="primary"
icon="el-icon-edit" icon="el-icon-edit"
@ -255,6 +253,7 @@
>编辑</el-button >编辑</el-button
> >
<el-button <el-button
style="padding: 6px 10px"
size="mini" size="mini"
type="danger" type="danger"
icon="el-icon-delete" icon="el-icon-delete"
@ -534,7 +533,11 @@
<!-- <el-button type="primary" @click="downloadCode">下 载</el-button> --> <!-- <el-button type="primary" @click="downloadCode">下 载</el-button> -->
</div> </div>
</el-dialog> </el-dialog>
<MapDialog ref="mapDialog" @getList="getList" /> <MapDialog
v-if="mapDialogVisible"
ref="mapDialog"
@handelCloseDialog="handelCloseDialog"
/>
</div> </div>
<div v-else> <div v-else>
<BindIOT :props="props" /> <BindIOT :props="props" />
@ -638,6 +641,9 @@ export default {
}, },
], ],
}, },
// 地图弹框
mapDialogVisible: false,
} }
}, },
created() { created() {
@ -844,8 +850,10 @@ export default {
deviceType: row.deviceType, deviceType: row.deviceType,
} }
// 点击打开弹框 // 点击打开弹框
this.$refs.mapDialog.openMapDialog(true) // this.$refs.mapDialog.openMapDialog(true)
this.$refs.mapDialog.getEquipmentInfo(params) this.mapDialogVisible = true
// this.$refs.mapDialog.getEquipmentInfo(params)
}, },
handlePush() { handlePush() {
this.$modal this.$modal
@ -875,6 +883,11 @@ export default {
this.$message.info('已取消推送') this.$message.info('已取消推送')
}) })
}, },
/** 关闭地图弹框 */
handelCloseDialog() {
this.mapDialogVisible = false
},
}, },
} }
</script> </script>

2
sgzb-ui/vue.config.js
View File

@ -46,7 +46,7 @@ module.exports = {
// target: `http://10.40.92.81:8080`, //韩/ // target: `http://10.40.92.81:8080`, //韩/
// target: `http://192.168.2.81:28080`,//旭/ // target: `http://192.168.2.81:28080`,//旭/
// target: `http://192.168.2.248: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; //1.全局替换qrUrl二维码扫码提供的网址-发布服务器的地址target;