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="icon"></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="infoDiv">
<div class="info">
@ -40,14 +40,8 @@
<div style="position: absolute; right: 30px;">
<span style="color: #fff;"> 起止时间：</span>
<div style="display: inline-block;margin-right: 12px;">
<el-date-picker
v-model="date"
end-placeholder="结束日期"
format="yyyy-MM-dd hh:ss:mm"
range-separator="至"
start-placeholder="开始日期"
type="datetimerange"
value-format="timestamp">
<el-date-picker v-model="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-->
@ -64,16 +58,14 @@
</div>
</el-col>
</el-row>
<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 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" :key="i.columnName" :label="i.columnName"
:prop="i.columnKey">
:prop="i.columnKey">
<template slot-scope="scope">
<el-image
v-if="scope.row[i.columnKey].toString().includes('http')"
:preview-src-list="[scope.row[i.columnKey]]"
:src="scope.row[i.columnKey]"
<el-image v-if="scope.row[i.columnKey].toString().includes('http')"
:preview-src-list="[scope.row[i.columnKey]]" :src="scope.row[i.columnKey]"
style="width: 100px; height: 100px">
</el-image>
<span v-else>{{ scope.row[i.columnKey] }}</span>
@ -82,7 +74,7 @@
</el-table-column>
</el-table>
<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>
</div>
</div>
@ -94,7 +86,7 @@
<div class="itemBg">
<div class="icon"></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="info">
<div class="info1">设备编号:</div>
@ -112,46 +104,30 @@
</div>
<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>
<el-table
v-show="isMap"
:data="mapData"
:max-height="40*vh"
highlight-current-row
style="width: 100%"
<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 type="index" width="50">
</el-table-column>
<el-table-column
label="日期"
property="date"
width="120">
<el-table-column label="日期" property="date" width="120">
<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>
</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 label="经度" property="longitude">
</el-table-column>
<el-table-column
label="经度"
property="longitude">
</el-table-column>
<el-table-column
label="纬度"
property="latitude">
<el-table-column label="纬度" property="latitude">
</el-table-column>
</el-table>
</div>
@ -169,6 +145,11 @@ import {
} from '@/utils/coordtransform'
let map = null
let startMarker = null
let endMarker = null
let polyline1 = []
let startMarkerhs = 0
let endMarkerhs = 0
let maptext = null
let mapMarker = null
let flag = true
@ -176,8 +157,8 @@ export default {
components: {},
data() {
return {
mapOffset:0,
mapTotal:0,
mapOffset: 0,
mapTotal: 0,
vh: document.documentElement.offsetHeight / 100,
topData: {},
bottomData: [],
@ -225,6 +206,16 @@ export default {
});
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) {
let marker = new AMap.Marker({
position: e, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
@ -232,18 +223,62 @@ export default {
offset: new AMap.Pixel(-2.5, -2.5),
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);
},
setMarkerSharding(e) {
let sum = e.length
let nowNum = 0
e.forEach(v => {
this.setMarker([v.longitude, v.latitude], v.ts)
})
this.setPolyline(e.map(e => {
return [e.longitude, e.latitude]
}))
flag && map.setFitView()
e.forEach(v => {
this.setMarker([v.longitude, v.latitude], v.ts)
})
this.setPolyline(e.map(e => {
return [e.longitude, e.latitude]
}))
flag && map.setFitView()
// let fun = () => {
// setTimeout(() => {
// let arr = e.splice(nowNum * 20, (nowNum + 1) * 20)
@ -275,26 +310,26 @@ export default {
},
setStyle(e) {
if (e.rowIndex % 2 === 0) {
return {textAlign: 'center', backgroundColor: '#08406f', color: '#05aaba'}
return { textAlign: 'center', backgroundColor: '#08406f', color: '#05aaba' }
} else {
return {textAlign: 'center', backgroundColor: '#063468', color: '#05aaba'}
return { textAlign: 'center', backgroundColor: '#063468', color: '#05aaba' }
}
},
async setDeviceInfo() {
const {data} = await getDeviceInfo(this.deviceId)
const { data } = await getDeviceInfo(this.deviceId)
this.topData = data || {}
if (this.topData.gpsFlag !== '1') {
this.date = null
}
},
async setHistoryData(isTable=true) {
if(isTable){
this.isMap = false
map.clearMap()
this.show = false
this.mapOffset = 0
async setHistoryData(isTable = true) {
if (isTable) {
this.isMap = false
map.clearMap()
this.show = false
this.mapOffset = 0
}
const {data} = await getHistoryData({
const { data } = await getHistoryData({
"sceneId": this.$store.getters.sceneId,
"deviceId": this.deviceId,
deviceModeId: this.deviceModeId,
@ -335,7 +370,7 @@ export default {
}
},
async setLinkDevices() {
const {data} = await getLinkDevices(this.deviceId)
const { data } = await getLinkDevices(this.deviceId)
this.bottomData = data
},
mapTableChange(e) {
@ -355,11 +390,11 @@ export default {
map.add(maptext);
map.add(mapMarker);
map.setFitView([maptext,mapMarker])
map.setFitView([maptext, mapMarker])
flag = false
console.log(e)
},
continueMap(){
continueMap() {
this.mapOffset += 1
this.setHistoryData(false)
}
@ -398,43 +433,47 @@ export default {
background-color: #FFF0 !important;
}
/deep/ .el-table th.el-table__cell.is-leaf, {
border-color: #0000;
}
/deep/ .el-table th.el-table__cell.is-leaf,
{
border-color: #0000;
}
/deep/ .el-table::before, .el-table--group::after, .el-table--border::after {
background-color: #0000;
}
/deep/ .el-table::before,
.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 {
background-color: #0000;
}
/deep/ .el-table .el-table__header-wrapper th,
.el-table .el-table__fixed-header-wrapper th {
background-color: #0000;
}
/deep/ .el-collapse-item__header {
background-color: #0000;
border-color: #0000;
height: auto;
}
/deep/ .el-collapse-item__header {
background-color: #0000;
border-color: #0000;
height: auto;
}
/deep/ .el-collapse {
border-color: #0000;
}
/deep/ .el-collapse {
border-color: #0000;
}
/deep/ .el-table td.el-table__cell {
border-color: #0000;
}
/deep/ .el-table td.el-table__cell {
border-color: #0000;
}
/deep/ .el-table .el-table__header-wrapper th {
color: #05ecf3;
}
/deep/ .el-table .el-table__header-wrapper th {
color: #05ecf3;
}
/deep/ .el-table .current-row {
color: #000;
}
/deep/ .el-table .current-row {
color: #000;
}
/deep/ .el-table .el-table__row:hover {
color: #000;
}
/deep/ .el-table .el-table__row:hover {
color: #000;
}
}

Write Preview
Loading…
Cancel
Save