xins
/
highwaysass
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改地图

Browse Source
dev
夜笙歌 5 months ago
parent 15a5c13d70
commit 5ad822126f
3 changed files with 153 additions and 40 deletions
Show Stats Download Patch File Download Diff File

4
ruoyi-ui/src/views/board/GPS/index.vue
Unescape Escape View File

@ -159,14 +159,14 @@ export default {
type: 'warning'
}).then(() => {
handleAlarmInfo({
alarmInfoId: e.no
alarmInfoId: e.value1
}).then(e => {
if (e.code === 200) {
this.$message({
type: 'success',
message: '已处理!'
});
this.setTable3()
this.setAlarmInfos()
} else {
this.$message({
type: 'info',

17
ruoyi-ui/src/views/board/equipmentMonitoring/index.vue
Unescape Escape View File

@ -3,7 +3,7 @@
<div class="centerImg"></div>
<div class="leftMenu">
<div v-for="(i,k) in deviceList" :key="k" class="item" @click="getRightData(i)">
<span>{{ i.deviceModeName }}</span>
<span class="longText">{{ i.deviceModeName }}</span>
</div>
</div>
<div ref="right" class="right">
@ -39,6 +39,11 @@
:header-cell-style="{ textAlign: 'center',backgroundColor:'#0a457d' }"
:max-height="maxHeight">
style="width: 100%">
<el-table-column
type="index"
label="序号"
width="50">
</el-table-column>
<el-table-column v-for="i in deviceDataColumns" :label="i.columnName" :prop="i.columnKey">
<template slot-scope="scope">
<img v-if="tableData[scope.$index][i.columnKey].toString().includes('http')"
@ -227,15 +232,17 @@ export default {
width: 12vw;
height: 5.1vw;
margin-bottom: 1vw;
position: relative;
}
span {
position: absolute;
left: 44%;
line-height: 5.1vw;
top: 50%;
transform: translateY(-50%);
font-size: 1vw;
color: #f1f3f5;
white-space: nowrap;
//text-align: center;
}
}
@ -298,4 +305,8 @@ export default {
}
}
}
.longText{
width: 6.5vw;
overflow: hidden;
}
</style>

172
ruoyi-ui/src/views/board/senso/index.vue
Unescape Escape View File

@ -16,11 +16,11 @@
<div class="info1">设备编号:</div>
<div class="info2"> {{ topData.deviceCode }}</div>
</div>
<div class="info" >
<div class="info">
<div class="info1">设备名称:</div>
<div class="info2">{{ topData.deviceName }}</div>
</div>
<div class="info" >
<div class="info">
<div class="info1">设备位置:</div>
<div class="info2">{{ topData.deviceLocation }}</div>
</div>
@ -38,15 +38,25 @@
</el-col>
<el-col :span="12">
<div style="position: absolute; right: 30px;">
<span style="color: #fff;"> 开始时间：</span>
<div style="display: inline-block;width: 220px;margin-right: 12px;">
<span style="color: #fff;"> 起止时间：</span>
<div style="display: inline-block;margin-right: 12px;">
<el-date-picker
v-model="date"
format="yyyy-MM-dd"
placeholder="选择日期"
type="date"
end-placeholder="结束日期"
format="yyyy-MM-dd hh:ss:mm"
range-separator="至"
start-placeholder="开始日期"
type="datetimerange"
value-format="timestamp">
</el-date-picker>
<!-- - -->
<!-- <el-date-picker-->
<!-- v-model="date1"-->
<!-- format="yyyy-MM-dd"-->
<!-- placeholder="选择日期"-->
<!-- type="date"-->
<!-- value-format="timestamp">-->
<!-- </el-date-picker>-->
</div>
<el-button type="primary" @click="search">搜索</el-button>
<el-button @click="reset">重置</el-button>
@ -57,15 +67,16 @@
<el-table v-if="show" :cell-style="setStyle"
:data="tableData" :header-cell-style="{ textAlign: 'center',backgroundColor:'#0a457d' }"
style="width: 100%;margin-top: 12px;">
<el-table-column v-for="i in deviceDataColumns" :label="i.columnName" :prop="i.columnKey">
<el-table-column v-for="i in deviceDataColumns" :key="i.columnName" :label="i.columnName"
:prop="i.columnKey">
<template slot-scope="scope">
<el-image
v-if="scope.row[i.columnKey].toString().includes('http')"
style="width: 100px; height: 100px"
:preview-src-list="[scope.row[i.columnKey]]"
:src="scope.row[i.columnKey]"
:preview-src-list="[scope.row[i.columnKey]]">
style="width: 100px; height: 100px">
</el-image>
<span v-else>{{scope.row[i.columnKey]}}</span>
<span v-else>{{ scope.row[i.columnKey] }}</span>
</template>
</el-table-column>
@ -78,7 +89,6 @@
</el-collapse-item>
</el-collapse>
</div>
<div v-show="isMap" id="map" class="map"></div>
<div v-for="i in bottomData">
<div class="itemBg">
@ -100,6 +110,46 @@
</div>
</div>
</div>
<el-table
v-show="isMap"
:data="mapData"
:max-height="40*vh"
highlight-current-row
style="width: 100%"
@current-change="mapTableChange">
<el-table-column
type="index"
width="50">
</el-table-column>
<el-table-column
label="日期"
property="date"
width="120">
<template slot-scope="scope">
{{
parseTime(scope.row.ts, '{y}-{m}-{d}')
}}
</template>
</el-table-column>
<el-table-column
label="时间"
property="time"
width="120">
<template slot-scope="scope">
{{
parseTime(scope.row.ts, '{h}:{i}:{s}')
}}
</template>
</el-table-column>
<el-table-column
label="经度"
property="longitude">
</el-table-column>
<el-table-column
label="纬度"
property="latitude">
</el-table-column>
</el-table>
</div>
</div>
</template>
@ -115,12 +165,17 @@ import {
} from '@/utils/coordtransform'
let map = null
let maptext = null
let mapMarker = null
let flag = true
export default {
components: {},
data() {
return {
vh: document.documentElement.offsetHeight / 100,
topData: {},
bottomData: [],
mapData: [],
collapseNo: '1',
radio: '日统计报表',
tableData: [],
@ -132,7 +187,7 @@ export default {
deviceDataColumns: [],
show: false,
isMap: false,
date: new Date(new Date().toLocaleDateString()).getTime()
date: [new Date(new Date().toLocaleDateString()).getTime(), new Date(new Date().toLocaleDateString()).getTime() + 1000 * 60 * 60 * 24],
}
},
async mounted() {
@ -150,10 +205,11 @@ export default {
async search() {
this.currentPage = 1
await this.setHistoryData()
flag = true
},
async reset() {
this.currentPage = 1
this.date = new Date(new Date().toLocaleDateString()).getTime()
this.date = [new Date(new Date().toLocaleDateString()).getTime(), new Date(new Date().toLocaleDateString()).getTime() + 1000 * 60 * 60 * 24]
await this.setHistoryData()
},
setPolyline(e) {
@ -162,20 +218,40 @@ export default {
borderWeight: 2, // 线条宽度，默认为 1
});
map.add(polyline);
map.setFitView()
},
setMarker(e, i) {
let marker = new AMap.Marker({
position: e, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
title: `信息\n经度：${e[0]}\n纬度：${e[1]}\n时间：${i}`,
offset:new AMap.Pixel(-2.5,-2.5),
content:`<div style="width: 5px;height: 5px; border-radius: 50%;background-color: #1890ff"> </div>`
offset: new AMap.Pixel(-2.5, -2.5),
content: `<div style="width: 5px;height: 5px; border-radius: 50%;background-color: #1890ff"> </div>`
});
map.add(marker);
map.setFitView()
},
setMarkerSharding(e) {
let sum = e.length
let nowNum = 0
let fun = () => {
setTimeout(() => {
let arr = e.splice(nowNum * 20, (nowNum + 1) * 20)
arr.forEach(v => {
this.setMarker([v.longitude, v.latitude], v.ts)
})
this.setPolyline(arr.map(e => {
return [e.longitude, e.latitude]
}))
nowNum += 1
flag && map.setFitView()
if (nowNum * 20 <= sum) {
fun()
}
}, 1000 * 0.5)
}
fun()
},
async currentChange(e) {
console.log(e)
this.currentPage = e
await this.setHistoryData()
},
@ -194,7 +270,7 @@ export default {
async setDeviceInfo() {
const {data} = await getDeviceInfo(this.deviceId)
this.topData = data || {}
if(this.topData.gpsFlag !== '1'){
if (this.topData.gpsFlag !== '1') {
this.date = null
}
},
@ -206,28 +282,24 @@ export default {
"sceneId": this.$store.getters.sceneId,
"deviceId": this.deviceId,
deviceModeId: this.deviceModeId,
"offset":this.topData.gpsFlag !== '1'? (this.currentPage - 1) : null,
"limit": this.topData.gpsFlag !== '1'?10:null,
startTime: this.date,
endTime: this.date ? this.date + (1000 * 60 * 60 * 24) : null
"offset": this.topData.gpsFlag !== '1' ? (this.currentPage - 1) : null,
"limit": this.topData.gpsFlag !== '1' ? 10 : null,
startTime: this.date?.[0],
endTime: this.date?.[1],
})
let dataList = data.historyData?.dataList || []
if (dataList.filter(e => (Object.keys(e).includes('longitude') || Object.keys(e).includes('longitude'))).length > 0) {
this.isMap = true
let mapData = dataList.filter(e => (Object.keys(e).includes('longitude') || Object.keys(e).includes('longitude'))).map(e=>{
let [lng,lat] = wgs84togcj02(e.longitude,e.latitude)
let mapData = dataList.filter(e => (Object.keys(e).includes('longitude') || Object.keys(e).includes('longitude'))).map(e => {
let [lng, lat] = wgs84togcj02(e.longitude, e.latitude)
return {
...e,
longitude:lng,
latitude:lat
longitude: lng,
latitude: lat
}
})
mapData.forEach(e => {
this.setMarker([e.longitude, e.latitude], e.ts)
})
this.setPolyline(mapData.map(e => {
return [e.longitude, e.latitude]
}))
this.mapData = JSON.parse(JSON.stringify(mapData))
this.setMarkerSharding(mapData)
// this.tableData = data.historyData?.dataList
// this.total = data.historyData?.count
// this.currentPage = 1
@ -248,6 +320,27 @@ export default {
async setLinkDevices() {
const {data} = await getLinkDevices(this.deviceId)
this.bottomData = data
},
mapTableChange(e) {
maptext && maptext.remove()
mapMarker && mapMarker.remove()
maptext = new AMap.Text({
text: `信息\n经度：${e.longitude}\n纬度：${e.latitude}\n时间：${e.ts}`,
anchor: "bottom-center", //设置文本标记锚点位置
cursor: "pointer", //指定鼠标悬停时的鼠标样式。
position: [e.longitude, e.latitude], //点标记在地图上显示的位置
});
mapMarker = new AMap.Marker({
position: [e.longitude, e.latitude], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
offset: new AMap.Pixel(-5, -5),
content: `<div style="width: 10px;height: 10px; border-radius: 50%;background-color: #1890ff"> </div>`
});
map.add(maptext);
map.add(mapMarker);
map.setFitView([maptext,mapMarker])
flag = false
console.log(e)
}
}
};
@ -313,6 +406,14 @@ export default {
/deep/ .el-table .el-table__header-wrapper th {
color: #05ecf3;
}
/deep/ .el-table .current-row {
color: #000;
}
/deep/ .el-table .el-table__row:hover {
color: #000;
}
}
@ -398,7 +499,8 @@ export default {
width: 100%;
height: 50vh;
}
.infoDiv{
.infoDiv {
position: absolute;
left: 60vh;
height: 100%;

Write Preview
Loading…
Cancel
Save