修改地图

dev
夜笙歌 7 months ago
parent dc869f57f2
commit ea612ad905

Binary file not shown.

After

Width:  |  Height:  |  Size: 221 KiB

@ -124,8 +124,10 @@ export default {
await this.$store.dispatch('app/setSceneId', this.sceneId)
},
toLink(e, nowMenu) {
this.nowMenu = nowMenu
this.$router.replace({path: "/board/" + e});
if (this.$store.getters.sceneId) {
this.nowMenu = nowMenu
this.$router.replace({path: "/board/" + e});
}
},
async dropdownLink(e,) {
this.nowMenu = '2'

@ -1,5 +1,5 @@
<template>
<div class="container">
<div class="container" :style="'background-image: url('+((controlList&& controlList.length === 0) ? bgImg1 : bgImg)+')'">
<div class="title1">监控设备</div>
<div class="centerImg"></div>
<div class="title">监控单元</div>
@ -15,7 +15,7 @@
</span>
</el-tree>
</div>
<div v-if="show" class="equipmentInfo">
<div v-if="show" :class="((controlList&& controlList.length === 0) ? 'equipmentInfo1' : 'equipmentInfo')">
<p>
<span>名称</span>
<span style="color: #d9dee3">{{ MonitorInfo.monitorUnitName }}</span>
@ -35,7 +35,7 @@
</div>
<div v-if="show"
:style="'background-image: url('+(MonitorInfo.monitorPic ? MonitorInfo.monitorPic :defaultImg)+');'"
class="img"></div>
:class="((controlList&& controlList.length === 0) ? 'img1' : 'img')"></div>
<div class="terminal">
<!--el-form :model="form" class="demo-form-inline">
<el-form-item label="传感器名称:">
@ -120,6 +120,8 @@ import {
import defaultImg from '@/assets/board/equipment/icon.png'
import defaultImg1 from '@/assets/board/equipment/icon2.png'
import defaultImg2 from '@/assets/board/equipment/defaultImg.png'
import bgImg from '@/assets/board/equipment/bg.jpg'
import bgImg1 from '@/assets/board/equipment/bg2.jpg'
let getDeviceInterval = null
@ -130,6 +132,8 @@ export default {
defaultImg,
defaultImg1,
defaultImg2,
bgImg,
bgImg1,
show: false,
monitorUnitId: '',
data1: true,
@ -157,8 +161,6 @@ export default {
await this.getTree()
},
switchChange(functionIdentifier, deviceId, deviceCode, modeFunctionId) {
console.log(this.controlList)
console.log(this.controlList)
this.$confirm('确定执行么?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
@ -243,7 +245,6 @@ export default {
}
.container {
background-image: url("~@/assets/board/equipment/bg.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
width: 100%;
@ -305,6 +306,22 @@ export default {
}
}
.equipmentInfo1 {
position: absolute;
top: 52.6%;
left: 17.2%;
width: 28.4%;
height: 44%;
color: #1684c2;
padding: 2vh 0 0 1vw;
p {
margin: 0;
line-height: 10vh;
font-size: 0.9vw;
}
}
.img {
background-repeat: no-repeat;
background-size: 100% 100%;
@ -314,6 +331,15 @@ export default {
width: 12%;
height: 20.4%;
}
.img1{
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
top: 11.5%;
left: 16.9%;
width: 28.8%;
height: 40.4%;
}
.terminal {
position: absolute;

@ -41,7 +41,8 @@
<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">
range-separator="至" start-placeholder="开始日期" type="datetimerange"
value-format="timestamp">
</el-date-picker>
<!-- - -->
<!-- <el-date-picker-->
@ -59,14 +60,14 @@
</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;">
: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]"
style="width: 100px; height: 100px">
: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>
@ -74,7 +75,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>
@ -104,26 +105,28 @@
</div>
<div style="text-align: center;margin: 8px 0;">
<el-button type="primary" v-if="isMap" @click="continueMap"
disabled>已加载 {{(mapOffset + 1) * 100}} 总计 {{mapTotal}}</el-button>
<el-button type="primary" v-if="isMap" @click="continueMap"
:disabled="mapTotal < (mapOffset + 1) * 100">继续加载</el-button>
<el-button v-if="isMap" disabled type="primary"
@click="continueMap">已加载 {{ (mapOffset + 1) * 100 }} 总计 {{ mapTotal }}
</el-button>
<el-button v-if="isMap" :disabled="mapTotal < (mapOffset + 1) * 100" type="primary"
@click="continueMap">继续加载
</el-button>
</div>
<el-table v-show="isMap" :data="mapData" :max-height="40 * vh" highlight-current-row style="width: 100%"
@current-change="mapTableChange">
@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}')
}}
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}')
parseTime(scope.row.ts, '{h}:{i}:{s}')
}}
</template>
</el-table-column>
@ -213,8 +216,8 @@ export default {
console.log(polyline1);
polyline1 = new AMap.Polyline({
path: e,
strokeColor:'#000',
strokeWeight:10,
strokeColor: '#000',
strokeWeight: 10,
borderWeight: 2, // 线 1
});
map.add(polyline1);
@ -248,7 +251,7 @@ export default {
endMarkerhs = e.target.hS
let hs1 = startMarkerhs
let hs2 = endMarkerhs
if(startMarkerhs>endMarkerhs){
if (startMarkerhs > endMarkerhs) {
hs1 = endMarkerhs
hs2 = startMarkerhs
}
@ -320,13 +323,13 @@ 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
@ -339,7 +342,7 @@ export default {
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,
@ -348,11 +351,13 @@ export default {
startTime: this.date?.[0],
endTime: this.date?.[1],
})
console.log(data)
let deviceDataColumns = data.deviceDataColumns
let dataList = data.historyData?.dataList || []
if (dataList.filter(e => (Object.keys(e).includes('longitude') || Object.keys(e).includes('longitude'))).length > 0) {
this.mapTotal = data.historyData.count
if (deviceDataColumns.filter(e => e.columnKey === 'longitude' || e.columnKey === '"latitude"').length >0) {
this.isMap = true
let mapData = dataList.filter(e => (Object.keys(e).includes('longitude') || Object.keys(e).includes('longitude'))).map(e => {
this.mapTotal = data.historyData.count
let mapData = dataList.filter(e => (Object.keys(e).includes('longitude') || Object.keys(e).includes('"latitude"'))).map(e => {
let [lng, lat] = wgs84togcj02(e.longitude, e.latitude)
return {
...e,
@ -380,7 +385,7 @@ export default {
}
},
async setLinkDevices() {
const { data } = await getLinkDevices(this.deviceId)
const {data} = await getLinkDevices(this.deviceId)
this.bottomData = data
},
mapTableChange(e) {
@ -443,47 +448,46 @@ 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;
}
}

Loading…
Cancel
Save