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

修改地圖

Browse Source
master
夜笙歌 1 year ago
parent 01c182ba31
commit 717bd2dcde
1 changed files with 140 additions and 101 deletions
Show Stats Download Patch File Download Diff File

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

@ -9,7 +9,7 @@
<div class="itemBg"> <div class="itemBg">
<div class="icon"></div> <div class="icon"></div>
<div class="icon1"></div> <div class="icon1"></div>
<div :style="'background-image: url('+(topData&&topData.devicePic)+')'" class="icon2"></div> <div :style="'background-image: url(' + (topData && topData.devicePic) + ')'" class="icon2"></div>
<div class="title"> {{ topData.monitorUnitName }}</div> <div class="title"> {{ topData.monitorUnitName }}</div>
<div class="infoDiv"> <div class="infoDiv">
<div class="info"> <div class="info">
@ -40,14 +40,8 @@
<div style="position: absolute; right: 30px;"> <div style="position: absolute; right: 30px;">
<span style="color: #fff;"> 起止时间：</span> <span style="color: #fff;"> 起止时间：</span>
<div style="display: inline-block;margin-right: 12px;"> <div style="display: inline-block;margin-right: 12px;">
<el-date-picker <el-date-picker v-model="date" end-placeholder="结束日期" format="yyyy-MM-dd hh:ss:mm"
v-model="date" range-separator="至" start-placeholder="开始日期" type="datetimerange" value-format="timestamp">
end-placeholder="结束日期"
format="yyyy-MM-dd hh:ss:mm"
range-separator="至"
start-placeholder="开始日期"
type="datetimerange"
value-format="timestamp">
</el-date-picker> </el-date-picker>
<!-- - --> <!-- - -->
<!-- <el-date-picker--> <!-- <el-date-picker-->
@ -64,16 +58,14 @@
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
<el-table v-if="show" :cell-style="setStyle" <el-table v-if="show" :cell-style="setStyle" :data="tableData"
:data="tableData" :header-cell-style="{ textAlign: 'center',backgroundColor:'#0a457d' }" :header-cell-style="{ textAlign: 'center', backgroundColor: '#0a457d' }"
style="width: 100%;margin-top: 12px;"> style="width: 100%;margin-top: 12px;">
<el-table-column v-for="i in deviceDataColumns" :key="i.columnName" :label="i.columnName" <el-table-column v-for="i in deviceDataColumns" :key="i.columnName" :label="i.columnName"
:prop="i.columnKey"> :prop="i.columnKey">
<template slot-scope="scope"> <template slot-scope="scope">
<el-image <el-image v-if="scope.row[i.columnKey].toString().includes('http')"
v-if="scope.row[i.columnKey].toString().includes('http')" :preview-src-list="[scope.row[i.columnKey]]" :src="scope.row[i.columnKey]"
:preview-src-list="[scope.row[i.columnKey]]"
:src="scope.row[i.columnKey]"
style="width: 100px; height: 100px"> style="width: 100px; height: 100px">
</el-image> </el-image>
<span v-else>{{ scope.row[i.columnKey] }}</span> <span v-else>{{ scope.row[i.columnKey] }}</span>
@ -82,7 +74,7 @@
</el-table-column> </el-table-column>
</el-table> </el-table>
<el-pagination v-show="!isMap" :currentPage="currentPage" :pageSize="10" :total="total" background <el-pagination v-show="!isMap" :currentPage="currentPage" :pageSize="10" :total="total" background
layout="prev, pager, next" @current-change="currentChange"> layout="prev, pager, next" @current-change="currentChange">
</el-pagination> </el-pagination>
</div> </div>
</div> </div>
@ -94,7 +86,7 @@
<div class="itemBg"> <div class="itemBg">
<div class="icon"></div> <div class="icon"></div>
<div class="icon1"></div> <div class="icon1"></div>
<div :style="'background-image: url('+(i&&i.devicePic)+')'" class="icon2"></div> <div :style="'background-image: url(' + (i && i.devicePic) + ')'" class="icon2"></div>
<div class="title"> {{ i.deviceName }}</div> <div class="title"> {{ i.deviceName }}</div>
<div class="info"> <div class="info">
<div class="info1">设备编号:</div> <div class="info1">设备编号:</div>
@ -112,46 +104,30 @@
</div> </div>
<div style="text-align: center;margin: 8px 0;"> <div style="text-align: center;margin: 8px 0;">
<el-button type="primary" v-if="isMap" @click="continueMap" :disabled="mapTotal < (mapOffset+1)*100" >继续加载</el-button> <el-button type="primary" v-if="isMap" @click="continueMap"
:disabled="mapTotal < (mapOffset + 1) * 100">继续加载</el-button>
</div> </div>
<el-table <el-table v-show="isMap" :data="mapData" :max-height="40 * vh" highlight-current-row style="width: 100%"
v-show="isMap"
:data="mapData"
:max-height="40*vh"
highlight-current-row
style="width: 100%"
@current-change="mapTableChange"> @current-change="mapTableChange">
<el-table-column <el-table-column type="index" width="50">
type="index"
width="50">
</el-table-column> </el-table-column>
<el-table-column <el-table-column label="日期" property="date" width="120">
label="日期"
property="date"
width="120">
<template slot-scope="scope"> <template slot-scope="scope">
{{ {{
parseTime(scope.row.ts, '{y}-{m}-{d}') 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> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column label="经度" property="longitude">
label="时间"
property="time"
width="120">
<template slot-scope="scope">
{{
parseTime(scope.row.ts, '{h}:{i}:{s}')
}}
</template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column label="纬度" property="latitude">
label="经度"
property="longitude">
</el-table-column>
<el-table-column
label="纬度"
property="latitude">
</el-table-column> </el-table-column>
</el-table> </el-table>
</div> </div>
@ -169,6 +145,11 @@ import {
} from '@/utils/coordtransform' } from '@/utils/coordtransform'
let map = null let map = null
let startMarker = null
let endMarker = null
let polyline1 = []
let startMarkerhs = 0
let endMarkerhs = 0
let maptext = null let maptext = null
let mapMarker = null let mapMarker = null
let flag = true let flag = true
@ -176,8 +157,8 @@ export default {
components: {}, components: {},
data() { data() {
return { return {
mapOffset:0, mapOffset: 0,
mapTotal:0, mapTotal: 0,
vh: document.documentElement.offsetHeight / 100, vh: document.documentElement.offsetHeight / 100,
topData: {}, topData: {},
bottomData: [], bottomData: [],
@ -225,6 +206,16 @@ export default {
}); });
map.add(polyline); map.add(polyline);
}, },
setPolyline1(e) {
polyline1 && map.remove(polyline1);
polyline1 = new AMap.Polyline({
path: e,
strokeColor:'#000',
strokeWeight:10,
borderWeight: 2, // 线条宽度，默认为 1
});
map.add(polyline1);
},
setMarker(e, i) { setMarker(e, i) {
let marker = new AMap.Marker({ let marker = new AMap.Marker({
position: e, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9] position: e, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
@ -232,18 +223,62 @@ export default {
offset: new AMap.Pixel(-2.5, -2.5), offset: new AMap.Pixel(-2.5, -2.5),
content: `<div style="width: 5px;height: 5px; border-radius: 50%;background-color: #1890ff"> </div>` content: `<div style="width: 5px;height: 5px; border-radius: 50%;background-color: #1890ff"> </div>`
}); });
marker.on('click', (e) => {
let markers = map.getAllOverlays('marker')
if (!startMarker) {
startMarker = new AMap.Marker({
position: [e.lnglat.KL, e.lnglat.kT], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
title: `信息\n经度：${e.lnglat.KL}\n纬度：${e.lnglat.kT}\n时间：${i}`,
offset: new AMap.Pixel(-10, -10),
content: `<div style="width: 20px;height: 20px;font-size:14px;line-height:20px;text-align:center; border-radius: 50%;color:#fff;background-color: #00e03b">起</div>`
});
map.add(startMarker);
startMarkerhs = e.target.hS
} else if (!endMarker) {
endMarker = new AMap.Marker({
position: [e.lnglat.KL, e.lnglat.kT], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
title: `信息\n经度：${e.lnglat.KL}\n纬度：${e.lnglat.kT}\n时间：${i}`,
offset: new AMap.Pixel(-10, -10),
content: `<div style="width: 20px;height: 20px;font-size:14px;line-height:20px;text-align:center; border-radius: 50%;color:#fff;background-color: #fb6254">止</div>`
});
map.add(endMarker);
endMarkerhs = e.target.hS
let markersData = markers.map(v => {
if (v.hS >= startMarkerhs && v.hS <= endMarkerhs) {
return v
} else {
return null
}
}).filter(res => res)
this.setPolyline1(markersData.map(v => {
return v._position
}))
} else if (endMarker && startMarker) {
startMarkerhs = e.target.hS
map.remove(endMarker)
endMarker = null
map.remove(startMarker)
startMarker = new AMap.Marker({
position: [e.lnglat.KL, e.lnglat.kT], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
title: `信息\n经度：${e.lnglat.KL}\n纬度：${e.lnglat.kT}\n时间：${i}`,
offset: new AMap.Pixel(-10, -10),
content: `<div style="width: 20px;height: 20px;font-size:14px;line-height:20px;text-align:center; border-radius: 50%;color:#fff;background-color: #00e03b">起</div>`
});
map.add(startMarker);
}
})
map.add(marker); map.add(marker);
}, },
setMarkerSharding(e) { setMarkerSharding(e) {
let sum = e.length let sum = e.length
let nowNum = 0 let nowNum = 0
e.forEach(v => { e.forEach(v => {
this.setMarker([v.longitude, v.latitude], v.ts) this.setMarker([v.longitude, v.latitude], v.ts)
}) })
this.setPolyline(e.map(e => { this.setPolyline(e.map(e => {
return [e.longitude, e.latitude] return [e.longitude, e.latitude]
})) }))
flag && map.setFitView() flag && map.setFitView()
// let fun = () => { // let fun = () => {
// setTimeout(() => { // setTimeout(() => {
// let arr = e.splice(nowNum * 20, (nowNum + 1) * 20) // let arr = e.splice(nowNum * 20, (nowNum + 1) * 20)
@ -275,26 +310,26 @@ export default {
}, },
setStyle(e) { setStyle(e) {
if (e.rowIndex % 2 === 0) { if (e.rowIndex % 2 === 0) {
return {textAlign: 'center', backgroundColor: '#08406f', color: '#05aaba'} return { textAlign: 'center', backgroundColor: '#08406f', color: '#05aaba' }
} else { } else {
return {textAlign: 'center', backgroundColor: '#063468', color: '#05aaba'} return { textAlign: 'center', backgroundColor: '#063468', color: '#05aaba' }
} }
}, },
async setDeviceInfo() { async setDeviceInfo() {
const {data} = await getDeviceInfo(this.deviceId) const { data } = await getDeviceInfo(this.deviceId)
this.topData = data || {} this.topData = data || {}
if (this.topData.gpsFlag !== '1') { if (this.topData.gpsFlag !== '1') {
this.date = null this.date = null
} }
}, },
async setHistoryData(isTable=true) { async setHistoryData(isTable = true) {
if(isTable){ if (isTable) {
this.isMap = false this.isMap = false
map.clearMap() map.clearMap()
this.show = false this.show = false
this.mapOffset = 0 this.mapOffset = 0
} }
const {data} = await getHistoryData({ const { data } = await getHistoryData({
"sceneId": this.$store.getters.sceneId, "sceneId": this.$store.getters.sceneId,
"deviceId": this.deviceId, "deviceId": this.deviceId,
deviceModeId: this.deviceModeId, deviceModeId: this.deviceModeId,
@ -335,7 +370,7 @@ export default {
} }
}, },
async setLinkDevices() { async setLinkDevices() {
const {data} = await getLinkDevices(this.deviceId) const { data } = await getLinkDevices(this.deviceId)
this.bottomData = data this.bottomData = data
}, },
mapTableChange(e) { mapTableChange(e) {
@ -355,11 +390,11 @@ export default {
map.add(maptext); map.add(maptext);
map.add(mapMarker); map.add(mapMarker);
map.setFitView([maptext,mapMarker]) map.setFitView([maptext, mapMarker])
flag = false flag = false
console.log(e) console.log(e)
}, },
continueMap(){ continueMap() {
this.mapOffset += 1 this.mapOffset += 1
this.setHistoryData(false) this.setHistoryData(false)
} }
@ -398,43 +433,47 @@ export default {
background-color: #FFF0 !important; background-color: #FFF0 !important;
} }
/deep/ .el-table th.el-table__cell.is-leaf, { /deep/ .el-table th.el-table__cell.is-leaf,
border-color: #0000; {
} border-color: #0000;
}
/deep/ .el-table::before, .el-table--group::after, .el-table--border::after { /deep/ .el-table::before,
background-color: #0000; .el-table--group::after,
} .el-table--border::after {
background-color: #0000;
}
/deep/ .el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th { /deep/ .el-table .el-table__header-wrapper th,
background-color: #0000; .el-table .el-table__fixed-header-wrapper th {
} background-color: #0000;
}
/deep/ .el-collapse-item__header { /deep/ .el-collapse-item__header {
background-color: #0000; background-color: #0000;
border-color: #0000; border-color: #0000;
height: auto; height: auto;
} }
/deep/ .el-collapse { /deep/ .el-collapse {
border-color: #0000; border-color: #0000;
} }
/deep/ .el-table td.el-table__cell { /deep/ .el-table td.el-table__cell {
border-color: #0000; border-color: #0000;
} }
/deep/ .el-table .el-table__header-wrapper th { /deep/ .el-table .el-table__header-wrapper th {
color: #05ecf3; color: #05ecf3;
} }
/deep/ .el-table .current-row { /deep/ .el-table .current-row {
color: #000; color: #000;
} }
/deep/ .el-table .el-table__row:hover { /deep/ .el-table .el-table__row:hover {
color: #000; color: #000;
} }
} }

Write Preview
Loading…
Cancel
Save