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

修改地图

Browse Source
dev
夜笙歌 7 months ago
parent dc869f57f2
commit ea612ad905
4 changed files with 99 additions and 67 deletions
Show Stats Download Patch File Download Diff File

BIN
ruoyi-ui/src/assets/board/equipment/bg2.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 221 KiB

6
ruoyi-ui/src/components/BoardTopNav/index.vue
Unescape Escape View File

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

38
ruoyi-ui/src/views/board/equipment/index.vue
Unescape Escape View File

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

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

@ -41,7 +41,8 @@
<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 v-model="date" end-placeholder="结束日期" format="yyyy-MM-dd hh:ss:mm" <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>
<!-- - --> <!-- - -->
<!-- <el-date-picker--> <!-- <el-date-picker-->
@ -59,14 +60,14 @@
</el-col> </el-col>
</el-row> </el-row>
<el-table v-if="show" :cell-style="setStyle" :data="tableData" <el-table v-if="show" :cell-style="setStyle" :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 v-if="scope.row[i.columnKey].toString().includes('http')" <el-image 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>
@ -74,7 +75,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>
@ -104,26 +105,28 @@
</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" <el-button v-if="isMap" disabled type="primary"
disabled>已加载： {{(mapOffset + 1) * 100}} 总计： {{mapTotal}}</el-button> @click="continueMap">已加载： {{ (mapOffset + 1) * 100 }} 总计： {{ mapTotal }}
<el-button type="primary" v-if="isMap" @click="continueMap" </el-button>
:disabled="mapTotal < (mapOffset + 1) * 100">继续加载</el-button> <el-button v-if="isMap" :disabled="mapTotal < (mapOffset + 1) * 100" type="primary"
@click="continueMap">继续加载
</el-button>
</div> </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"> @current-change="mapTableChange">
<el-table-column type="index" width="50"> <el-table-column type="index" width="50">
</el-table-column> </el-table-column>
<el-table-column label="日期" property="date" width="120"> <el-table-column 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> </template>
</el-table-column> </el-table-column>
<el-table-column label="时间" property="time" width="120"> <el-table-column label="时间" property="time" width="120">
<template slot-scope="scope"> <template slot-scope="scope">
{{ {{
parseTime(scope.row.ts, '{h}:{i}:{s}') parseTime(scope.row.ts, '{h}:{i}:{s}')
}} }}
</template> </template>
</el-table-column> </el-table-column>
@ -213,8 +216,8 @@ export default {
console.log(polyline1); console.log(polyline1);
polyline1 = new AMap.Polyline({ polyline1 = new AMap.Polyline({
path: e, path: e,
strokeColor:'#000', strokeColor: '#000',
strokeWeight:10, strokeWeight: 10,
borderWeight: 2, // 线条宽度，默认为 1 borderWeight: 2, // 线条宽度，默认为 1
}); });
map.add(polyline1); map.add(polyline1);
@ -248,7 +251,7 @@ export default {
endMarkerhs = e.target.hS endMarkerhs = e.target.hS
let hs1 = startMarkerhs let hs1 = startMarkerhs
let hs2 = endMarkerhs let hs2 = endMarkerhs
if(startMarkerhs>endMarkerhs){ if (startMarkerhs > endMarkerhs) {
hs1 = endMarkerhs hs1 = endMarkerhs
hs2 = startMarkerhs hs2 = startMarkerhs
} }
@ -320,13 +323,13 @@ 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
@ -339,7 +342,7 @@ export default {
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,
@ -348,11 +351,13 @@ export default {
startTime: this.date?.[0], startTime: this.date?.[0],
endTime: this.date?.[1], endTime: this.date?.[1],
}) })
console.log(data)
let deviceDataColumns = data.deviceDataColumns
let dataList = data.historyData?.dataList || [] let dataList = data.historyData?.dataList || []
if (dataList.filter(e => (Object.keys(e).includes('longitude') || Object.keys(e).includes('longitude'))).length > 0) { if (deviceDataColumns.filter(e => e.columnKey === 'longitude' || e.columnKey === '"latitude"').length >0) {
this.mapTotal = data.historyData.count
this.isMap = true 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) let [lng, lat] = wgs84togcj02(e.longitude, e.latitude)
return { return {
...e, ...e,
@ -380,7 +385,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) {
@ -443,47 +448,46 @@ 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, /deep/ .el-table::before,
.el-table--group::after, .el-table--group::after,
.el-table--border::after { .el-table--border::after {
background-color: #0000; background-color: #0000;
} }
/deep/ .el-table .el-table__header-wrapper th, /deep/ .el-table .el-table__header-wrapper th,
.el-table .el-table__fixed-header-wrapper th { .el-table .el-table__fixed-header-wrapper th {
background-color: #0000; 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