修改界面

master
夜笙歌 5 months ago
parent e1e17b10ac
commit 72be646f66

@ -42,7 +42,7 @@
</div> </div>
<div class="scrollTable" style="width: 40%"> <div class="scrollTable" style="width: 40%">
<el-button size="mini" type="primary" @click=" mapOrientation(item)">地图定点</el-button> <el-button size="mini" type="primary" @click=" mapOrientation(item)">地图定点</el-button>
<el-button size="mini" type="primary" @click="equipmentInfo(item)"></el-button> <el-button size="mini" type="primary" @click="toEquipmentInfo(item)"></el-button>
</div> </div>
</div> </div>
</div> </div>
@ -115,7 +115,40 @@
</el-switch> </el-switch>
</div> </div>
<el-dialog title="历史记录" :visible.sync="historyDialog"> <el-dialog title="历史记录" :visible.sync="historyDialog">
<el-form :inline="true" :model="form" class="demo-form-inline">
<el-descriptions class="margin-top" :column="3" border>
<el-descriptions-item>
<template slot="label">
经度
</template>
{{ equipmentInfo.longitude }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
纬度
</template>
{{ equipmentInfo.latitude }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
设备名称
</template>
{{ equipmentInfo.deviceName }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
城市名称
</template>
{{ equipmentInfo.deviceLocation }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
备注
</template>
{{ equipmentInfo.remark }}
</el-descriptions-item>
</el-descriptions>
<el-form :inline="true" :model="form" class="demo-form-inline" style="margin-top: 12px">
<el-form-item label="查询时间"> <el-form-item label="查询时间">
<el-date-picker <el-date-picker
v-model="form.time" v-model="form.time"
@ -130,6 +163,7 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-table <el-table
v-loading="loading"
:data="historyData" :data="historyData"
style="width: 100%"> style="width: 100%">
<el-table-column <el-table-column
@ -196,6 +230,8 @@ export default {
}, },
data() { data() {
return { return {
loading:false,
equipmentInfo:{},
num1: 0, num1: 0,
num2: 0, num2: 0,
num3: 0, num3: 0,
@ -443,7 +479,9 @@ export default {
mapOrientation(e) { mapOrientation(e) {
map.setZoomAndCenter(16, [e.longitude, e.latitude]) map.setZoomAndCenter(16, [e.longitude, e.latitude])
}, },
equipmentInfo(e) { toEquipmentInfo(e) {
this.equipmentInfo = e
console.log(e)
this.historyDialog = true this.historyDialog = true
this.form = { this.form = {
@ -456,11 +494,13 @@ export default {
// this.$router.push(`/board/senso?id=${e.deviceId}&deviceModeId=${e.deviceModeId}`) // this.$router.push(`/board/senso?id=${e.deviceId}&deviceModeId=${e.deviceModeId}`)
}, },
async getHistoryData() { async getHistoryData() {
this.loading = true
let query = this.form let query = this.form
query.startTime = this.form.time?.[0]?.getTime() query.startTime = this.form.time?.[0]?.getTime()
query.endTime = this.form.time?.[1]?.getTime() query.endTime = this.form.time?.[1]?.getTime()
delete query.time delete query.time
const data = await selectBeaconDevicesHistory(query) const data = await selectBeaconDevicesHistory(query)
this.loading = false
this.historyData = data.rows this.historyData = data.rows
this.total = data.total this.total = data.total
} }

@ -60,7 +60,7 @@
</div> </div>
</div> </div>
<div class="right"> <div class="right">
<div v-for="i in acquisitionList" class="item"> <div v-for="(i,k) in acquisitionList" class="item">
<div class="iconBg"></div> <div class="iconBg"></div>
<div <div
class="icon"> class="icon">
@ -82,6 +82,7 @@
</el-image> </el-image>
</div> </div>
<div class="rightBg"> <div class="rightBg">
<div class="index">{{ k + 1 }}</div>
<div class="title">{{ i.deviceName }}</div> <div class="title">{{ i.deviceName }}</div>
<div style="position: absolute;left: 24%;top: 0px;width: 55%;height: 100%;"> <div style="position: absolute;left: 24%;top: 0px;width: 55%;height: 100%;">
<div <div
@ -706,6 +707,7 @@ export default {
width: 50%; width: 50%;
height: 80%; height: 80%;
overflow: auto; overflow: auto;
padding-top: 0.5vw;
.item { .item {
position: relative; position: relative;
@ -747,6 +749,21 @@ export default {
width: calc(90% - 8vh); width: calc(90% - 8vh);
height: 8vh; height: 8vh;
.index {
position: absolute;
top: 0;
left: 0;
transform: translate(-50%, -50%);
color: #fff;
font-size: 0.6vw;
width: 1.5vw;
height: 1.5vw;
border-radius: 50%;
background-color: #1ca0e5;
line-height: 1.5vw;
text-align: center;
}
.title { .title {
position: absolute; position: absolute;
top: 50%; top: 50%;

@ -178,7 +178,7 @@
<el-dialog :visible.sync="realMap" width="80%" @close="monitorUnitId = null"> <el-dialog :visible.sync="realMap" width="80%" @close="monitorUnitId = null">
<el-form :inline="true" :model="formInline" class="demo-form-inline"> <el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="名称"> <el-form-item label="搜索">
<el-select <el-select
v-model="value" v-model="value"
multiple multiple
@ -906,9 +906,11 @@ export default {
position: [e.longitude, e.latitude], position: [e.longitude, e.latitude],
title: `信息\n经度${e.longitude}\n纬度${e.latitude}\n名称${e.deviceName}\n`, title: `信息\n经度${e.longitude}\n纬度${e.latitude}\n名称${e.deviceName}\n`,
offset: new AMap.Pixel(-15, -30), offset: new AMap.Pixel(-15, -30),
content: `<div> <svg t="1718261114618" class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" p-id="4305" style="width: 30px;height: 30px;"> content: `<div> <svg t="1719914685595" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4332" style="width: 30px;height: 30px;" >
<path d="M512 64.5c-180.5 0-326.9 146.4-326.9 326.9 0 63.3 18 122.3 49.2 172.4 1.1 2 2.1 4 3.2 5.9 34.9 58.2 113.9 128.8 165.5 194.5 66.3 84.4 93.2 158 93.2 158 1.6 1.4 13.1 35.6 15.1 35.8 2.5 0.2 12.6-34 14.5-35.8 0 0 22-69.2 83.7-146.6 56-70.1 142.8-145.7 177-206 0.9-1.6 1.8-3.3 2.6-5 31.5-50.2 49.7-109.6 49.7-173.3 0.1-180.5-146.3-326.8-326.8-326.8z" fill="${(e.ifAlarm === '1') ? '#3D93FD' : '#ff0000'}" p-id="4306"> <path d="M511.9 546c-93.9 0-170.2-76.4-170.2-170.2 0-93.9 76.4-170.2 170.2-170.2 93.9 0 170.2 76.4 170.2 170.2 0.1 93.9-76.3 170.2-170.2 170.2z m0-272.3c-56.4 0-102.1 45.7-102.1 102.1 0 56.4 45.7 102.1 102.1 102.1 56.4 0 102.1-45.7 102.1-102.1 0-56.4-45.7-102.1-102.1-102.1z m442.7 749H69.3c-13.1 0-25-7.5-30.7-19.3a33.9 33.9 0 0 1 4.1-36l136.2-170.2c6.5-8.1 16.2-12.8 26.6-12.8h68.1c18.8 0 34.1 15.2 34.1 34s-15.2 34.1-34.1 34.1h-51.7l-81.7 102.1h743.6L802 852.5h-51.7c-18.8 0-34.1-15.2-34.1-34.1 0-18.8 15.2-34 34.1-34h68.1c10.3 0 20.1 4.7 26.6 12.8l136.2 170.2a33.9 33.9 0 0 1 4.1 36c-5.7 11.8-17.6 19.3-30.7 19.3z m0 0" fill="${(e.ifAlarm === '1') ? '#3D93FD' : '#ff0000'}" p-id="4333"></path>
</path></svg></div>` <path d="M752.7 650.6c-13.8 0-26.2-8.3-31.5-21-5.3-12.7-2.4-27.4 7.4-37.1 119.7-119.7 119.7-313.7 0-433.4-119.6-119.6-313.7-119.6-433.3 0-119.7 119.7-119.7 313.7 0 433.4 8.7 8.6 12.1 21.2 9 33-3.1 11.8-12.4 21-24.2 24.2-11.8 3.1-24.4-0.3-33-9-107.3-107.1-139.4-268.3-81.4-408.4C223.7 92.2 360.4 0.8 511.9 0.8c151.6 0 288.3 91.3 346.2 231.4 58 140.1 25.8 301.3-81.4 408.4-6.3 6.4-15 10-24 10z m0 0" p-id="4334"></path><path d="M511.9 891.4c-9 0-17.7-3.6-24.1-10L247.1 640.6c-13.3-13.3-13.3-34.9 0-48.2 13.3-13.3 34.9-13.3 48.2 0L512 809.1l216.7-216.7c13.3-13.3 34.9-13.3 48.2 0 13.3 13.3 13.3 34.9 0 48.2L536 881.4c-6.4 6.4-15 10-24.1 10z m0 0" fill="${(e.ifAlarm === '1') ? '#3D93FD' : '#ff0000'}" p-id="4335"></path>
</svg>
</div>`
}); });
marker.on('click', async () => { marker.on('click', async () => {
if (markerIds.includes(e.deviceId)) { if (markerIds.includes(e.deviceId)) {
@ -942,7 +944,7 @@ export default {
title: `信息\n经度${e.longitude}\n纬度${e.latitude}\n名称${e.deviceName}\n`, title: `信息\n经度${e.longitude}\n纬度${e.latitude}\n名称${e.deviceName}\n`,
offset: new AMap.Pixel(-15, -30), offset: new AMap.Pixel(-15, -30),
content: `<div> <svg t="1718261114618" class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" p-id="4305" style="width: 30px;height: 30px;"> content: `<div> <svg t="1718261114618" class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" p-id="4305" style="width: 30px;height: 30px;">
<path style="animation: ${(e.ifAlarm === '1') ? 'an1' : 'an2'} 2s ease-in-out infinite;" d="M512 64.5c-180.5 0-326.9 146.4-326.9 326.9 0 63.3 18 122.3 49.2 172.4 1.1 2 2.1 4 3.2 5.9 34.9 58.2 113.9 128.8 165.5 194.5 66.3 84.4 93.2 158 93.2 158 1.6 1.4 13.1 35.6 15.1 35.8 2.5 0.2 12.6-34 14.5-35.8 0 0 22-69.2 83.7-146.6 56-70.1 142.8-145.7 177-206 0.9-1.6 1.8-3.3 2.6-5 31.5-50.2 49.7-109.6 49.7-173.3 0.1-180.5-146.3-326.8-326.8-326.8z" p-id="4306"> <path style="animation:an1 2s ease-in-out infinite;" d="M512 64.5c-180.5 0-326.9 146.4-326.9 326.9 0 63.3 18 122.3 49.2 172.4 1.1 2 2.1 4 3.2 5.9 34.9 58.2 113.9 128.8 165.5 194.5 66.3 84.4 93.2 158 93.2 158 1.6 1.4 13.1 35.6 15.1 35.8 2.5 0.2 12.6-34 14.5-35.8 0 0 22-69.2 83.7-146.6 56-70.1 142.8-145.7 177-206 0.9-1.6 1.8-3.3 2.6-5 31.5-50.2 49.7-109.6 49.7-173.3 0.1-180.5-146.3-326.8-326.8-326.8z" p-id="4306">
</path></svg></div>` </path></svg></div>`
}); });
marker.on('click', async () => { marker.on('click', async () => {
@ -979,7 +981,7 @@ export default {
e.forEach(v => { e.forEach(v => {
let arr = this.options.filter(r => r.value.deviceId === v) || [] let arr = this.options.filter(r => r.value.deviceId === v) || []
if (arr.length > 0) { if (arr.length > 0) {
this.setMarker(arr[0].value) this.setMarker1(arr[0].value)
} }
}) })
map.setFitView(markers) map.setFitView(markers)
@ -1279,25 +1281,14 @@ export default {
@keyframes an1 { @keyframes an1 {
0% { 0% {
fill: #3D93FD; opacity: 1;
} }
50% { 50% {
fill: #ffffff; opacity: 0;
} }
100% { 100% {
fill: #3D93FD; opacity: 1;
} }
} }
@keyframes an2 {
0% {
fill: #ff0000;
}
50% {
fill: #ffffff;
}
100% {
fill: #ff0000;
}
}
</style> </style>

Loading…
Cancel
Save