<!-- 管网 -->
<template>
<div>
<div class="video-menu">
<layer-manager-mix id="layerBtn" title="物联设备" :isNeedIcon="false" :layer="dev" :layer-hover="devHover" :menu-tab="menuTab" :menus="menus" :select="selectIndex==='layerBtn'" @btnClick="btnClick" @menuClick="menuClick"/>
<common-btn id="scoreBtn" :select="selectIndex==='scoreBtn'" :bg="health" :bg-hover="healthHover" width="5" height="5" text-hover="健康评分" @click="btnClick('scoreBtn')" />
<common-btn id="alarmBtn" :select="selectIndex==='alarmBtn'" :bg="alarmBg" :bg-hover="alarmHover" width="5" height="5" text-hover="管网告警" @click="btnClick('alarmBtn')" />
<common-btn id="eventBtn" :select="selectIndex==='eventBtn'" :bg="caseBg" :bg-hover="caseHover" width="5" height="5" text-hover="管网事件" @click="btnClick('eventBtn')" />
<time-manager v-show="selectIndex === 'eventBtn'" @handleTimeRange="handleTimeRange" />
</div>
<!-- <list-page title="监测事件" :list="caseList" :query="caseListQuery" :total="caseTotal" @change="changePage" v-show="isListPage" @close="isListPage=false"/> -->
<!-- 信息窗体 -->
<Pop ref="pop" v-if="showPop" @close="showPop = false" />
<AlarmPop ref="alarmPopRef" v-if="showAlarmPop" @close="showAlarmPop = false" />
<ScorePop ref="scorePopRef" v-if="showScorePop" @close="showScorePop = false" />
<EventPop ref="eventPopRef" v-if="showEventPop" @close="showEventPop = false" />
</div>
</template>
<script>
import CommonBtn from "@/components/CommonBtn";
import LayerManagerMix from "@/components/LayerManagerMix";
import TimeManager from "@/components/TimeManager";
import { heat } from '@/utils/freedo/heat'
import { clearResetMap, AddLabelPoint } from '@/utils/freedo'
import {
getStatistics,
getArea,
getAlarmList,
getScoreList,
getEventList
} from "../../../../api/ywts/cszl/gw";
import {AddDivPointHighlight, AddLabel} from "../../../../utils/freedo";
import ListPage from "@/components/ListPage";
import Pop from "./popup.vue";
import AlarmPop from "./alarmPop.vue";
import ScorePop from "./scorePop.vue";
import EventPop from "./eventPop.vue";
export default {
name: 'Gw',
components: { TimeManager, LayerManagerMix, ListPage, CommonBtn, Pop, ScorePop, AlarmPop, EventPop},
data() {
return {
isListPage: false,
isShow: false,
showPop: false, // 是否显示物联设备的popup
showAlarmPop: false, // 是否显示报警点位的popup
showScorePop: false, // 是否显示健康路评分的popup
showEventPop: false, // 是否显示事件的popup
listQuery: {
deviceType: '',
startTime: '',
endTime: '',
isAlarm: '',
hasOrder: '',
keywords: '',
},
ktSelect: '',
selectIndex: 'layerBtn',
caseList: [],
caseListQuery: {
startTime: '',
endTime: '',
id: '',
pageNo: 0,
pageSize: 5
},
caseTotal: 0,
caseIcon: {
1: require('@/assets/images/icon/事件/已撤案.png'),
2: require('@/assets/images/icon/事件/指派中.png'),
3: require('@/assets/images/icon/事件/处置中.png'),
4: require('@/assets/images/icon/事件/已办结.png'),
5: require('@/assets/images/icon/事件/已结案.png'),
},
caseColor: {
1: '#ffffff',
2: '#fdeb56',
3: '#85c8ff',
4: '#ffba74',
5: '#87f6b3',
},
time: {
startTime: '',
endTime: '',
},
preCase: null,
dev: require('@/assets/images/function/环卫/基础设施未选中.png'),
devHover: require('@/assets/images/function/环卫/基础设施选中.png'),
health: require('@/assets/images/function/管网/健康路评分未选中.png'),
healthHover: require('@/assets/images/function/管网/健康路评分选中.png'),
alarmBg: require('@/assets/images/function/物联网/物联告警未选中.png'),
alarmHover: require('@/assets/images/function/物联网/物联告警选中.png'),
caseBg: require('@/assets/images/function/物联网/物联事件未选中.png'),
caseHover: require('@/assets/images/function/物联网/物联事件选中.png'),
menuTab: [{
name: '物联设备',
value: 'device'
}
],
menus: {
device: [
],
}
}
},
mounted() {
clearResetMap() // 清空并重置
// 清除弹窗展示
this.$bus.$on('clear', () => {
this.isListPage = false
this.showAlarmPop = false, // 是否显示报警点位的popup
this.showPop = false, // 是否显示设备点位的popup
this.showScorePop = false // 是否显示评分点位的popup
this.showEventPop = false // 是否显示事件的popup
})
// 获取概况统计
getStatistics().then(response => {
if(response.code === 200) {
this.menus.device = response.data.value
if(response.data.value && Array.isArray(response.data.value) && response.data.value.length) {
this.search(response.data.value[0].type)
}
}
})
},
methods: {
async btnClick(e) {
clearResetMap()
console.log('--------', e);
this.isListPage = false
this.showAlarmPop = false, // 是否显示报警点位的popup
this.showPop = false, // 是否显示报警点位的popup
this.showScorePop = false, // 是否显示报警点位的popup
this.showEventPop = false, // 是否显示事件的popup
this.selectIndex = typeof e === 'string' ? e : e.target.id
switch (this.selectIndex) {
case "layerBtn": // 点击物联设备
this.search()
break
case "alarmBtn": // 点击管网告警
this.fetchAlarmList()
break
case "scoreBtn": // 点击健康路评分
this.fetchScoreList()
break
case "eventBtn": // 点击事件
this.fetchEventList()
break
}
},
// 查询管网物联设备点位
search(type = '') {
const iconOnline = require('@/assets/images/icon/智慧管网/device-online.png')
const iconOffline = require('@/assets/images/icon/智慧管网/device-offline.png')
const iconAlarm = require('@/assets/images/icon/智慧管网/device-alarm.png')
getArea({
deviceType: type,
startTime: '',
endTime: '',
isAlarm: '',
hasOrder: '',
keywords: '',
}).then(response => {
if(response.code === 200) {
clearResetMap()
response.data.value.forEach(item => {
// console.log(item.areaboundary)
// todo : 画范围
AddLabelPoint(
item.id,
item.name,
item.deviceStatus === '1' ? iconOnline : item.deviceStatus === '3' ? iconAlarm : iconOffline,
[item.lon, item.lat, 0], 'gw', item,
this.clickGw)
})
}
})
// --------------------------假数据-------------------------------------
// const res = {
// data: {
// value: [
// {
// id: '1',
// name: '在线设备',
// deviceStatus: '2',
// lon: '114.87665',
// lat: '25.76418',
// },
// {
// id: '2',
// name: '离线设备',
// deviceStatus: '1',
// lon: '114.87365',
// lat: '25.76118',
// },
// {
// id: '3',
// name: '告警设备',
// deviceStatus: '3',
// lon: '114.87365',
// lat: '25.76818',
// }
// ]
// }}
// const tempData = res.data.value
// tempData.forEach(item => {
// AddLabelPoint(
// item.id,
// item.name,
// item.deviceStatus === '1' ? iconOnline : item.deviceStatus === '3' ? iconAlarm : iconOffline,
// [item.lon, item.lat, 0], 'gw', item,
// this.clickMarker)
// })
},
// 点击icon事件
clickGw(eventArg) {
const item = eventArg._data.data
this.isShow = true
console.log('点击icon', item);
this.$nextTick(() => {
this.$refs.gwPop.initData(item)
})
},
// 点击点位
clickMarker(eventArg) {
const showPop = (e) => {
const item = e._data.data
this.showPop = true
// console.log(this.$refs.popRef)
this.$nextTick(() => {
this.$refs.pop.initData(item)
})
}
if (this.showPop) {
this.showPop = false
setTimeout(() => {
showPop(eventArg)
}, 100);
}
else {
showPop(eventArg)
}
},
// 点击menu
menuClick(e) {
console.log(e, 'menuClick')
clearResetMap()
this.search(e.type.trim())
},
// ----------------------------------------管网告警------------------------------------------
// 获取官网告警列表
fetchAlarmList() {
const icon = require('@/assets/images/icon/智慧管网/alarm.png')
const params = {
pageNo: 1,
pageSize: 99999,
startTime: '',
endTime: '',
keywords: '',
}
getAlarmList(params).then(response => {
if(response.code === 200) {
clearResetMap()
response.data.value.forEach(item => {
AddLabelPoint(
item.id,
item.devicetypename,
icon,
[item.lon, item.lat, 0], 'gw', item,
this.clickAlarmMarker)
})
}
})
// --------------------------假数据------------------------------------
// const temp = [
// {
// createtime:"2023-04-18 06:01:42",
// code:null,
// orderid:null,
// alarmstatusname:"历史告警",
// alarmcontent:null,
// lotid:"112021020027",
// lon:"114.87665",
// devicetype:"5",
// alarmstatus:"0",
// imgurl:null,
// location:"刺桐路",
// id:"1353824",
// devicetypename:"液位监测仪",
// lat:"25.76418",
// },
// {
// createtime:"2023-04-18 06:01:38",
// code:null,
// orderid:null,
// alarmstatusname:"历史告警",
// alarmcontent:null,
// lotid:"112019020098",
// lon:"114.899962",
// devicetype:"5",
// alarmstatus:"0",
// imgurl:null,
// location:"佳辰路",
// id:"1353818",
// devicetypename:"液位监测仪",
// lat:"25.807828",
// }
// ]
// clearResetMap()
// temp.forEach(item => {
// AddLabelPoint(
// item.id,
// item.devicetypename,
// icon,
// [item.lon, item.lat, 0], 'gw', item,
// this.clickAlarmMarker)
// })
},
// 点击告警点位
clickAlarmMarker(eventArg) {
const showAlarmPop = (e) => {
const item = e._data.data
this.showAlarmPop = true
this.$nextTick(() => {
console.log('告警弹窗内容', item, this.showAlarmPop);
this.$refs.alarmPopRef.initData(item)
})
}
if (this.showAlarmPop) {
this.showAlarmPop = false
setTimeout(() => {
showAlarmPop(eventArg)
}, 100);
}
else {
showAlarmPop(eventArg)
}
},
// ----------------------------------------管网健康路评分------------------------------------------
// 获取管网健康路评分列表
fetchScoreList() {
const icon = require('@/assets/images/icon/智慧管网/score.png')
const params = {
startTime: '',
endTime: '',
}
getScoreList(params).then(response => {
if(response.code === 200) {
clearResetMap()
response.data.value.forEach(item => {
AddLabelPoint(
item.id,
item.name,
icon,
[item.lon, item.lat, 0], 'gw', item,
this.clickScoreMarker)
})
}
})
// --------------------------假数据------------------------------------
// const temp = [
// {
// score:"1",
// name:"飞扬大道(2020一期)",
// lon:"114.894804",
// id:"6509",
// lat:"25.772637",
// },
// {
// score:"1",
// name:"金富康小区6栋1号（品味鲜小吃）",
// lon:"114.86770265338376",
// id:"8152",
// lat:"25.756292746101437",
// },
// {
// score:"1",
// name:"玫瑰路(2020一期)",
// lon:"114.904256",
// id:"6511",
// lat:"25.78952",
// }
// ]
// temp.forEach(item => {
// AddLabelPoint(
// item.id,
// item.name,
// icon,
// [item.lon, item.lat, 0], 'gw', item,
// this.clickScoreMarker)
// })
},
// 点击健康路评分点位
clickScoreMarker(eventArg) {
const showScorePop = (e) => {
const item = e._data.data
this.showScorePop = true
this.$nextTick(() => {
this.$refs.scorePopRef.initData(item)
})
}
if (this.showScorePop) {
this.showScorePop = false
setTimeout(() => {
showScorePop(eventArg)
}, 100);
}
else {
showScorePop(eventArg)
}
},
// ----------------------------------------事件------------------------------------------
handleTimeRange(time) {
this.isListPage = false
console.log('时间改变：', time);
this.time = time
this.fetchEventList()
},
// 获取管网事件列表
fetchEventList() {
const params = {
pageNo: 1,
pageSize: 99999,
startTime: this.time.startTime, // 开始时间
endTime: this.time.endTime, // 结束时间
keywords: '', // 事件的 名称/位置/关键字搜索
orderId: '', // 工单id
}
getEventList(params).then(response => {
if(response.code === 200) {
clearResetMap()
response.data.value.forEach(item => {
AddLabelPoint(
item.lotid,
item.eventName,
this.caseIcon[item.eventstatus.trim()],
[item.lon, item.lat, 0], 'gw', item,
this.clickEventMarker)
})
}
})
// --------------------------假数据------------------------------------
// const temp = [
// {
// eventypename:"消防设施",
// createtime:"2021-11-30",
// code:"36070220105420211130093018281023",
// dutydept:"999999",
// orderid:"0",
// urgencyname:"高",
// lotid:"11490367625790499",
// lon:"114.903676",
// eventsource:"智慧城市专项",
// eventname:"消防栓异常",
// dutydeptname:"专项系统对接",
// eventstatusname:"已结案",
// cover:"智慧管网",
// imgurl:"https://shzl.erongjiang.com/geosocial-file/attachmentInfo/?accessToken=exd6da7fe1ae664be24c4f8f8f667e40e7364b",
// event_id:"36070220105420211130093018281023",
// urgency:"A",
// person:"区运行调度指挥中心",
// alarmid:"1",
// devicename:null,
// eventtype:"RJ010408",
// eventstatus:"5 ",
// location:"蓉江新区高校园区管理处启迪科技城高校园区小区08网格黄金岭办事处新路村村民委员会西北507米",
// lat:"25.790499",
// },
// {
// eventypename:"排水设施",
// createtime:"2022-01-21",
// code:"36070220105420220121144603710830",
// dutydept:null,
// orderid:"0",
// urgencyname:"高",
// lotid:"11489512925815389",
// lon:"114.895129",
// eventsource:"智慧城市专项",
// eventname:"井盖开盖报警",
// dutydeptname:null,
// eventstatusname:"处置中",
// cover:"智慧管网",
// imgurl:"https://shzl.erongjiang.com/geosocial-file/attachmentInfo/?accessToken=exd6da7fe1ae664be24c4f8f8f667e40e7364b",
// event_id:"36070220105420220121144603710830",
// urgency:"A",
// person:"区运行调度指挥中心",
// alarmid:"1",
// devicename:null,
// eventtype:"RJ010402",
// eventstatus:"3 ",
// location:"蓉江新区高校园区管理处联泰、碧桂园、正荣悦玺高校园区小区01网格武陵小学(建设中)东北253米",
// lat:"25.815389",
// },
// {
// eventypename:"燃气管道破裂",
// createtime:"2021-11-29",
// code:"36070220105420211129182458175343",
// dutydept:"360783",
// orderid:"0",
// urgencyname:"高",
// lotid:"11490327925789969",
// lon:"114.903279",
// eventsource:"智慧城市专项",
// eventname:"浓度超限",
// dutydeptname:"蓉江新区",
// eventstatusname:"已结案",
// cover:"智慧管网",
// imgurl:"https://shzl.erongjiang.com/geosocial-file/attachmentInfo/?accessToken=exd6da7fe1ae664be24c4f8f8f667e40e7364b",
// event_id:"36070220105420211129182458175343",
// urgency:"A",
// person:"区运行调度指挥中心",
// alarmid:"1",
// devicename:null,
// eventtype:"RJ010419",
// eventstatus:"5 ",
// location:"蓉江新区道路城管一中队玫瑰路网格黄金岭办事处新路村村民委员会西北525米",
// lat:"25.789969",
// }
// ]
// temp.forEach(item => {
// AddLabelPoint(
// item.lotid,
// item.eventname,
// this.caseIcon[item.eventstatus.trim()],
// [item.lon, item.lat, 0], 'gw', item,
// this.clickEventMarker)
// })
},
// 点击事件点位
clickEventMarker(eventArg) {
const showEventPop = (e) => {
const item = e._data.data
this.showEventPop = true
this.$nextTick(() => {
this.$refs.eventPopRef.initData(item)
})
}
if (this.showEventPop) {
this.showEventPop = false
setTimeout(() => {
showEventPop(eventArg)
}, 100);
}
else {
showEventPop(eventArg)
}
},
}
}
</script>
<style scoped>
.video-menu {
display: flex;
z-index: 111111111;
width: 40rem;
height: 5rem;
position: absolute;
left: 20px;
top: 1rem;
}
</style>
