修改界面

master
夜笙歌 12 months ago
parent 02d0cb01b6
commit bdcef51b98

@ -119,15 +119,9 @@
<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 }}
{{ equipmentInfo.deviceId }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
@ -135,12 +129,30 @@
</template>
{{ equipmentInfo.deviceName }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
监控单元
</template>
{{ equipmentInfo.monitorUnitName }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
城市名称
</template>
{{ equipmentInfo.deviceLocation }}
</el-descriptions-item>
<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">
备注
@ -166,6 +178,11 @@
v-loading="loading"
:data="historyData"
style="width: 100%">
<el-table-column
prop="deviceId"
label="设备编号"
width="180">
</el-table-column>
<el-table-column
prop="longitude"
label="经度"
@ -183,6 +200,9 @@
<el-table-column
prop="ts"
label="采集时间">
<template slot-scope="scope">
{{ parseTime(scope.row.ts) }}
</template>
</el-table-column>
</el-table>
<pagination
@ -193,6 +213,82 @@
@pagination="getHistoryData"
/>
</el-dialog>
<el-dialog
:visible.sync="isDispose"
width="30%">
<el-descriptions class="margin-top" :column="2" border>
<el-descriptions-item>
<template slot="label">
设备id
</template>
{{ warInfo.deviceId }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
监控单元名称
</template>
{{ warInfo.monitorUnitName }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
监控单元类型
</template>
{{ warInfo.monitorUnitTypeName }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
告警编号
</template>
{{ warInfo.alarmInfoId }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
告警类型
</template>
{{ warInfo.alarmTypeName }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
告警位置
</template>
{{ warInfo.location }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
告警信息
</template>
{{ warInfo.alarmLevelName }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
告警时间
</template>
{{ warInfo.createTime }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
告警区域
</template>
{{ warInfo.areaName }}
</el-descriptions-item>
</el-descriptions>
<span>备注</span>
<el-input
style="margin-top: 12px;margin-bottom:12px"
type="textarea"
:rows="2"
placeholder="请输入内容"
v-model="textarea">
</el-input>
<span slot="footer" class="dialog-footer">
<el-button @click="isDispose = false"> </el-button>
<el-button type="primary" @click="disposeThis"></el-button>
<el-button type="primary" @click="disposeAll"></el-button>
</span>
</el-dialog>
</div>
</template>
@ -230,8 +326,12 @@ export default {
},
data() {
return {
loading:false,
equipmentInfo:{},
warInfo: {},
textarea: '',
isDispose: false,
disposeNo: '',
loading: false,
equipmentInfo: {},
num1: 0,
num2: 0,
num3: 0,
@ -301,33 +401,11 @@ export default {
await this.getTable2Data()
},
dispose(e) {
this.$confirm('该问题已处理?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
handleAlarmInfo({
alarmInfoId: e.value1
}).then(e => {
if (e.code === 200) {
this.$message({
type: 'success',
message: '已处理!'
});
this.setAlarmInfos()
} else {
this.$message({
type: 'info',
message: '网络错误'
});
}
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消'
});
});
this.warInfo = e
this.textarea = ''
this.isDispose = true
this.disposeNo = e.no
},
createMap() {
map = new AMap.Map('map', {
@ -449,14 +527,14 @@ export default {
offset: new AMap.Pixel(-15, -30),
content: `<div >
<svg t="1718261114618" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4305" 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="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>
</svg>
</div>`
});
marker.on('click', async () => {
if(polygons.length >0 || circles.length >0){
if (polygons.length > 0 || circles.length > 0) {
map.remove(polygons)
map.remove(circles)
polygons = []

@ -176,7 +176,7 @@
<!-- </el-button>-->
</div>
<el-dialog :visible.sync="realMap" width="80%" @close="monitorUnitId = null">
<el-dialog :visible.sync="realMap" width="80%" @close="monitorUnitId = null;options=[];value=[]">
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="搜索">
<el-select
@ -216,18 +216,60 @@
:visible.sync="isDispose"
width="30%">
<el-descriptions class="margin-top" :column="3" border>
<el-descriptions class="margin-top" :column="2" border>
<el-descriptions-item>
<template slot="label">
报警信息
设备id
</template>
{{ warInfo.deviceId }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
监控单元名称
</template>
{{ warInfo.monitorUnitName }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
监控单元类型
</template>
{{ warInfo.monitorUnitTypeName }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
告警编号
</template>
{{ warInfo.alarmInfoId }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
告警类型
</template>
{{ warInfo.alarmTypeName }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
告警位置
</template>
{{ warInfo.location }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
告警信息
</template>
{{ warInfo.alarmLevelName }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
报警位置
告警时间
</template>
{{ warInfo.location }}
{{ warInfo.createTime }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
告警区域
</template>
{{ warInfo.areaName }}
</el-descriptions-item>
</el-descriptions>
@ -247,26 +289,65 @@
</el-dialog>
<el-dialog title="设备信息" :visible.sync="equipmentInfoDialog">
<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>
<el-table
:data="equipmentInfo"
style="width: 100%">
<el-table-column
prop="deviceCode"
label="编号"
width="180">
</el-table-column>
<el-table-column
prop="deviceName"
label="名称"
width="180">
</el-table-column>
<el-table-column
prop="monitorUnitName"
label="监控单元">
</el-table-column>
<el-table-column
prop="longitude"
label="经度">
</el-table-column>
<el-table-column
prop="latitude"
label="纬度">
</el-table-column>
</el-table>
<!-- <el-descriptions class="margin-top" :column="3" border v-for="i in equipmentInfo" style="margin-top: 8px">-->
<!-- <el-descriptions-item>-->
<!-- <template slot="label">-->
<!-- 编号-->
<!-- </template>-->
<!-- {{ i.deviceCode }}-->
<!-- </el-descriptions-item>-->
<!-- <el-descriptions-item>-->
<!-- <template slot="label">-->
<!-- 名称-->
<!-- </template>-->
<!-- {{ i.deviceName }}-->
<!-- </el-descriptions-item>-->
<!-- <el-descriptions-item>-->
<!-- <template slot="label">-->
<!-- 监控单元-->
<!-- </template>-->
<!-- {{ i.monitorUnitName }}-->
<!-- </el-descriptions-item>-->
<!-- <el-descriptions-item>-->
<!-- <template slot="label">-->
<!-- 经度-->
<!-- </template>-->
<!-- {{ i.longitude }}-->
<!-- </el-descriptions-item>-->
<!-- <el-descriptions-item>-->
<!-- <template slot="label">-->
<!-- 纬度-->
<!-- </template>-->
<!-- {{ i.latitude }}-->
<!-- </el-descriptions-item>-->
<!-- </el-descriptions>-->
<div slot="footer" class="dialog-footer">
<el-button @click="equipmentInfoDialog = false"> </el-button>
<el-button type="primary" @click="getDeviceInfo" :disabled="!monitorUnitId">设备信息</el-button>
@ -312,6 +393,7 @@ export default {
data() {
return {
containerPic,
markerData:[],
isTown: false,
value: [],
loading: false,
@ -320,7 +402,7 @@ export default {
monitorUnitId: null,
equipmentInfoDialog: false,
exTableTime: [new Date(new Date().getTime() - 1000 * 60 * 60 * 24), new Date()],
equipmentInfo: {},
equipmentInfo: [],
warInfo: {},
formInline: {},
textarea: '',
@ -893,6 +975,7 @@ export default {
this.$nextTick(async () => {
this.createMap()
const data = await getDeviceByAreaId(this.$store.getters.tenantId)
this.markerData = data.data.map(e => e.devicesList).flat(1)
data.data.map(e => e.devicesList).flat(1).forEach(e => {
this.setMarker(e)
})
@ -929,7 +1012,7 @@ export default {
})
marker.on('dblclick', () => {
this.equipmentInfoDialog = true
this.equipmentInfo = e
this.equipmentInfo = this.markerData.filter(v=>v.monitorUnitId === e.monitorUnitId)
this.monitorUnitId = e.monitorUnitId
// this.$router.push({path: '/board/equipment', query: {monitorUnitId: e.monitorUnitId}})
});
@ -964,7 +1047,7 @@ export default {
})
marker.on('dblclick', () => {
this.equipmentInfoDialog = true
this.equipmentInfo = e
this.equipmentInfo = this.markerData.filter(v=>v.monitorUnitId === e.monitorUnitId)
this.monitorUnitId = e.monitorUnitId
// this.$router.push({path: '/board/equipment', query: {monitorUnitId: e.monitorUnitId}})
});
@ -1030,6 +1113,8 @@ export default {
map.remove(polygons)
map.remove(circles)
markers = []
this.markerData = data
console.log(data)
data.forEach(e => {
if (e.latitude && e.longitude) {
this.setMarker1(e)
@ -1045,10 +1130,12 @@ export default {
markers = []
this.loading = true;
const {data} = await selectDeviceByName({name: name})
this.markerData = data
console.log(data)
this.loading = false;
let option = []
data.forEach(e => {
if (e.latitude && e.longitude) {
if (e.latitude && e.longitude && e.deviceName.includes(name)) {
option.push({
label: e.deviceName,
value: e

@ -54,7 +54,8 @@
{{ item.alarmTime }}
</div>
<div class="scrollTable" style="width: 10%">
<el-button v-if="item.handleStatus === '0'" size="mini" type="primary" @click="dispose(item)"></el-button>
<el-button v-if="item.handleStatus === '0'" size="mini" type="primary" @click="dispose(item)">
</el-button>
<span v-else style="color: #67C23A;">已处理</span>
</div>
</div>
@ -63,7 +64,7 @@
</div>
<div class="right">
<el-row style="min-height: 75vh;">
<el-col v-for="i in tableData" :key="i.monitorUnitId" :span="12" >
<el-col v-for="i in tableData" :key="i.monitorUnitId" :span="12">
<div class="item" @click="toMonitor(i)">
<div class="titleBg"></div>
<div class="title">
@ -80,6 +81,82 @@
</el-pagination>
</div>
</div>
<el-dialog
:visible.sync="isDispose"
width="30%">
<el-descriptions class="margin-top" :column="2" border>
<el-descriptions-item>
<template slot="label">
设备id
</template>
{{ warInfo.deviceId }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
监控单元名称
</template>
{{ warInfo.monitorUnitName }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
监控单元类型
</template>
{{ warInfo.monitorUnitTypeName }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
告警编号
</template>
{{ warInfo.alarmInfoId }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
告警类型
</template>
{{ warInfo.alarmTypeName }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
告警位置
</template>
{{ warInfo.location }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
告警信息
</template>
{{ warInfo.alarmLevelName }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
告警时间
</template>
{{ warInfo.createTime }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
告警区域
</template>
{{ warInfo.areaName }}
</el-descriptions-item>
</el-descriptions>
<span>备注</span>
<el-input
style="margin-top: 12px;margin-bottom:12px"
type="textarea"
:rows="2"
placeholder="请输入内容"
v-model="textarea">
</el-input>
<span slot="footer" class="dialog-footer">
<el-button @click="isDispose = false"> </el-button>
<el-button type="primary" @click="disposeThis"></el-button>
<el-button type="primary" @click="disposeAll"></el-button>
</span>
</el-dialog>
</div>
</template>
<script>
@ -102,6 +179,10 @@ export default {
data() {
return {
defaultImg,
warInfo: {},
textarea: '',
isDispose: false,
disposeNo: '',
num1: 0,
num2: 0,
alarmCountGroupAlarmType: [],
@ -120,7 +201,7 @@ export default {
waitTime: 0,
},
table1Data: [],
sceneId:0
sceneId: 0
}
},
computed: {
@ -129,11 +210,11 @@ export default {
return this.$store.getters.sceneId;
}
},
watch:{
jtData:{
watch: {
jtData: {
async handler() {
console.log(this.$store.getters.sceneId)
if(this.$store.getters.sceneId !== null){
if (this.$store.getters.sceneId !== null) {
await this.getData(this.$store.getters.sceneId)
}
},
@ -142,13 +223,13 @@ export default {
}
},
async mounted() {
if(this.$store.getters.sceneId !== null){
if (this.$store.getters.sceneId !== null) {
await this.getData(this.$store.getters.sceneId)
}
},
methods: {
toMonitor(e){
this.$router.push({path:'/board/equipment',query:{monitorUnitId:e.monitorUnitId}})
toMonitor(e) {
this.$router.push({path: '/board/equipment', query: {monitorUnitId: e.monitorUnitId}})
},
async getData(e) {
await this.setAllNum(e)
@ -179,37 +260,14 @@ export default {
this.alarmCountGroupAlarmType = data
},
async setAlarmInfos(e) {
const {rows: data} = await getAlarmInfos({"sceneId":e})
const {rows: data} = await getAlarmInfos({"sceneId": e})
this.table1Data = data
},
dispose(e) {
this.$confirm('该问题已处理?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
handleAlarmInfo({
alarmInfoId:e.alarmInfoId
}).then(e=>{
if(e.code === 200){
this.$message({
type: 'success',
message: '已处理!'
});
this.setTable3()
}else{
this.$message({
type: 'info',
message: '网络错误'
});
}
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消'
});
});
this.warInfo = e
this.textarea = ''
this.isDispose = true
this.disposeNo = e.no
}
}
};
@ -393,7 +451,7 @@ export default {
}
.titleA1{
.titleA1 {
position: absolute;
top: 13%;
left: 74.3%;
@ -402,7 +460,7 @@ export default {
color: #fff;
}
.titleA2{
.titleA2 {
position: absolute;
top: 61%;
left: 26.1%;

@ -273,7 +273,6 @@
</el-col>
</el-row>
<el-form-item label="触发条件" prop="triggerCondition">
<el-select v-model="form.triggerCondition" placeholder="请选择触发条件" @input="triggerConditionChange"
:disabled="editedDisabled" style="width: 240px">

@ -4,14 +4,14 @@
<el-col :span="0.1" :xs="24" v-if="toggleRightDisplay">
<div @click="toggleDeviceClick">
<img v-if="toggleMenuRightImg" :src="toggleMenuRightImg" class="hamburger"/>
<!-- <img v-if="toggleMenuRightImg" :src="toggleMenuRightImg" class="hamburger"/>-->
</div>
</el-col>
<!--网关设备数据-->
<el-col :span="4" :xs="24" v-if="toggleLeftDisplay">
<div @click="toggleDeviceClick" style="display:flex;justify-content: space-between">
<h6 class="form-header h6" style="margin: 10px 0 10px 0">网关设备,点击过滤显示子设备</h6>
<img v-if="toggleMenuLeftImg" :src="toggleMenuLeftImg" class="hamburger"/>
<!-- <img v-if="toggleMenuLeftImg" :src="toggleMenuLeftImg" class="hamburger"/>-->
</div>
<div class="head-container">
<el-input
@ -545,8 +545,8 @@ export default {
data() {
return {
toggleMenuLeftImg: toggleMenuLeftImg,
toggleMenuRightImg: toggleMenuRightImg,
// toggleMenuLeftImg: toggleMenuLeftImg,
// toggleMenuRightImg: toggleMenuRightImg,
toggleLeftDisplay: true,
toggleRightDisplay: false,
//

Loading…
Cancel
Save