<template>
<div>
<div class="video-menu">
<layer-manager-mix ref="layerPlace" :isNeedIcon="false" title="重点防护" :layer="place" :layer-hover="placeHover"
:menu-tab="menuTab" :menus="menus" :select="selectIndex === 'placeBtn'" id="placeBtn" @btnClick="btnClick"
@menuClick="menuClickPlace" />
<layer-manager-mix ref="layerResource" :isNeedIcon="false" title="应急资源" :layer="assetBg" :layer-hover="assetHover"
:menu-tab="menuTab" :menus="menus" :select="selectIndex === 'assetBtn'" id="assetBtn" @btnClick="btnClick"
@menuClick="menuClickPlace" />
<layer-manager-mix ref="layerDevice" :isNeedIcon="false" title="感知设备" :layer="device" :layer-hover="deviceHover"
:menu-tab="menuTab" :menus="menus" :select="selectIndex === 'deviceBtn'" id="deviceBtn" @btnClick="btnClick"
@menuClick="menuClickPlace" />
<layer-manager-mix ref="layerPerson" :isNeedIcon="false" title="应急人员" :layer="person" :layer-hover="personHover"
:menu-tab="menuTab" :menus="menus" :select="selectIndex === 'personBtn'" id="personBtn" @btnClick="btnClick"
@menuClick="menuClickPlace" />
<layer-manager-mix ref="layerCar" :isNeedIcon="false" title="应急车辆" :layer="carBg" :layer-hover="carHover"
:menu-tab="menuTab" :menus="menus" :select="selectIndex === 'carBtn'" id="carBtn" @btnClick="btnClick"
@menuClick="menuClickPlace" />
<common-btn id="caseBtn" :select="selectIndex === 'caseBtn'" :bg="caseBg" :bg-hover="caseHover" width="5"
height="5" text-hover="应急事件" @click="btnClick" />
<time-manager v-show="selectIndex === 'caseBtn'" @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" />
</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 { clearUpMap, clearResetMap, AddLabelPoint } from '@/utils/freedo'
import Pop from './Pop.vue'
import {
getHeat,
getArea,
getDevList,
getStatistics,
getCasePointList, getCaseInfo
} from "../../../../api/ywts/cszl/gd";
import { getPlacePointList, getPersonPointList, getDevicePointList, getResourcePointList, getCarPointList, getEventList } from '@/api/ywts/cszl/yj'
import { AddDivPointHighlight, AddLabel } from "../../../../utils/freedo";
import { iconFilter, deviceList, caseList } from './data'
import ListPage from "@/components/ListPage";
import { eventBus } from "../../../../main";
export default {
name: 'Yj',
components: { TimeManager, LayerManagerMix, ListPage, CommonBtn, Pop },
data() {
return {
isListPage: false,
ktSelect: '',
selectIndex: 'placeBtn',
caseList: [],
caseListQuery: {
startTime: '',
endTime: '',
id: '',
pageNo: 0,
pageSize: 5
},
markerListBak: [],
markerList: [],
currentSelect: '',
showPop: false,
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,
place: require('@/assets/images/function/应急/危险设施未选中.png'),
placeHover: require('@/assets/images/function/应急/危险设施选中.png'),
device: require('@/assets/images/function/应急/感知设备未选中.png'),
deviceHover: require('@/assets/images/function/应急/感知设备选中.png'),
person: require('@/assets/images/function/应急/应急人员未选中.png'),
personHover: require('@/assets/images/function/应急/应急人员选中.png'),
assetBg: require('@/assets/images/function/应急/应急物资未选中.png'),
assetHover: require('@/assets/images/function/应急/应急物资选中.png'),
carBg: require('@/assets/images/function/应急/应急车辆未选中.png'),
carHover: require('@/assets/images/function/应急/应急车辆选中.png'),
caseBg: require('@/assets/images/function/应急/应急事件未选中.png'),
caseHover: require('@/assets/images/function/应急/应急事件选中.png'),
menuTab: [{
name: '基础设施',
value: 'place'
}
// , {
// name: '环监设备',
// value: 'others'
// }
],
menus: {
place: [
],
// others: [
// {type : "1", typename: "****设备", total: "111"},
// {type : "2", typename: "****设备", total: "111"}
// ]
}
}
},
mounted() {
// 设置默认选中图层
eventBus.$emit('change-layer', { id: 41, checked: false }); // 智慧教育-手工模型
eventBus.$emit('change-layer', { id: 42, checked: false });// 智慧停车云-手工模型
eventBus.$emit('change-layer', { id: 43, checked: false });//智慧社区-手工模型
eventBus.$emit('change-layer', { id: 44, checked: false });// 智慧工地-手工模型
eventBus.$emit('change-layer', { id: 45, checked: false });// 智慧交通-手工模型
eventBus.$emit('change-layer', { id: 46, checked: false });// 智慧园林-手工模型
eventBus.$emit('change-layer', { id: 31, checked: false }); // 倾斜
eventBus.$emit('change-layer', { id: 21, checked: false }); //CIM2建筑（带纹理）
eventBus.$emit('change-layer', { id: 22, checked: false }); //CIM2建筑（纯白色）
eventBus.$emit('change-layer', { id: 12, checked: true }); // 蓉江新区正射影像
eventBus.$emit('change-layer', { id: 13, checked: true }); // 蓉江新区边界
clearResetMap()
this.searchPlace({})
this.$bus.$on('clear', () => {
this.isListPage = false
this.showPop = false
})
},
methods: {
async btnClick(e) {
console.log(e.target.id, 'e.target.id')
clearResetMap()
this.isListPage = false
this.showPop = false
this.selectIndex = e.target.id
this.currentSelect = ''
this.markerList = []
this.markerListBak = []
switch (this.selectIndex) {
case "caseBtn":
this.casePoint()
break
case "personBtn":
// 人员
this.searchPerson()
break
case "placeBtn":
// 场所列表
this.searchPlace({})
break
case "deviceBtn":
// 设备
this.searchDevice({})
break
case "assetBtn":
// 设备
this.searchResource({})
break
case "carBtn":
// 车辆
this.searchCar({})
break
}
},
// 设备图层控制
layer(item) {
// clearUpMap()
const iconOnline = require('@/assets/images/icon/工地地图点位/' + item.typename.replace(/ /g, '') + '在线.png')
const iconOffline = require('@/assets/images/icon/工地地图点位/' + item.typename.replace(/ /g, '') + '离线.png')
getDevList({ type: item.type }).then(response => {
if (response.code === 200) {
clearUpMap()
response.data.value.forEach(item => {
AddLabelPoint(
item.id,
'',
item.status === '1' ? iconOnline : iconOffline,
[item.lon, item.lat, 0], 'gd-place', item,
null)
})
}
})
},
// 事件点位
casePoint() {
console.log(this.time)
getEventList(this.time).then(response => {
console.log(response.data, '事件列表')
if (response.code === 200) {
clearResetMap()
const data = caseList
// response.data.value.forEach(item => {
// if (!data.map(da => da.id).includes(item.id) && !data.map(da => da.lon).includes(item.lon) && item.id !== null) {
// data.push(item)
// }
// })
this.caseList = caseList
console.log(caseList, 'caseList')
// todo
// this.caseTotal = response.data.value.length
this.caseTotal = caseList.length
data.forEach(item => {
AddLabelPoint(
item.id,
'',
this.caseIcon[item.eventstatusnameid],
[item.longitude, item.latitude, 0], 'gd-case', item,
this.clickCase)
})
}
})
},
// 查询工地点位
search() {
const iconDone = require('@/assets/images/icon/工地地图点位/工地已完成.png')
const iconDoing = require('@/assets/images/icon/工地地图点位/工地进行中.png')
getArea({}).then(response => {
if (response.code === 200) {
clearUpMap()
response.data.value.forEach(item => {
// console.log(item.areaboundary)
// todo : 画范围
AddLabelPoint(
item.id,
item.name,
item.status === '2' ? iconDoing : iconDone,
[item.lon, item.lat, 0], 'gd', item,
this.clickHw)
})
}
})
},
// 智慧工地-工地近1月综合得分
score() {
getArea({}).then(response => {
if (response.code === 200) {
response.data.value.forEach(item => {
console.log(item.areaboundary)
// todo : 画范围
})
}
})
},
// 点击事件icon
clickCase(eventArg) {
const item = eventArg._data.data
// 恢复上一个marker
if (this.preCase !== null) {
window.mmManager.removeById(this.preCase.id)
AddLabelPoint(
this.preCase.id,
'',
this.caseIcon[this.preCase.status],
[this.preCase.lon, this.preCase.lat, 0], 'gd-case', this.preCase,
this.clickCase)
}
// 保存当前marker
this.preCase = item
// 高亮当前marker
window.mmManager.removeById(item.id)
AddDivPointHighlight(item, this.caseColor[item.status])
// 查询事件详情
this.isListPage = true
this.caseListQuery = {
startTime: this.time.startTime,
endTime: this.time.endTime,
id: item.id,
pageNo: 0,
pageSize: 5
}
this.searchCaseMarkerList()
},
// 事件换页
changePage(val) {
if (val && val.page) {
this.caseListQuery.pageNo = val.page
}
this.searchCaseMarkerList()
},
searchCaseMarkerList() {
// getCaseInfo(this.caseListQuery).then(response => {
getEventList(this.caseListQuery).then(response => {
if (response.code === 200) {
// console.log(response.data.value)
// 右侧看板
// this.caseList = response.data.value
this.caseList = caseList
// todo
// this.caseTotal = response.data.value.length
this.caseTotal = caseList.length
}
})
},
changeState(v) {
this.ktSelect = v
},
handleTimeRange(time) {
this.isListPage = false
if (this.time.startTime !== '') {
this.time = time
this.casePoint()
} else {
this.time = time
}
},
// 获取场所列表
searchPlace(params) {
this.menuTab = [
// {
// name: '危险设施',
// value: 'dangerous',
// },
{
name: '重点防护',
value: 'keynote',
},
// {
// name: '感知设备',
// value: 'device',
// },
// {
// name: '保障资源',
// value: 'resources',
// },
]
getPlacePointList(params).then(res => {
const initData = res.data.value
// 类型列表
const typeList = [...new Map(res.data.value.map(item => item.typename).map(item => [item, item])).values()]
const data = typeList.map((item) => {
return {
typename: item,
total: initData.filter(citem => citem.typename === item).length,
type: initData.filter(citem => citem.typename === item)[0].type,
list: initData.filter(citem => citem.typename === item).map((item) => ({ ...item, showType: 'keynote' })),
// icon: iconFilter(item)
}
})
// const dangerous = ['加油站', '危化品', '易滑坡区域', '易崩塌区域']
// this.menus.dangerous = data.filter(item => dangerous.some(citem => item.typename.includes(citem)))
const keynote = ['学校', '医院', '危化品', '加油站', '易滑坡区域', '易崩塌区域']
this.menus.keynote = data.filter(item => keynote.some(citem => item.typename === (citem))).map(item => ({ ...item, icon: iconFilter(item.typename) }))
console.log(this.menus.keynote, 'this.menus.keynote')
// const resources = ['医疗', '仓库', '避难', '应急']
// this.menus.resources = data.filter(item => resources.some(citem => item.typename.includes(citem)))
// const device = ['视频', '设备']
// this.menus.device = data.filter(item => device.some(citem => item.typename.includes(citem)))
this.$refs.layerPlace.refreshMenu(1)
// 地图绘制点位
let markerList = []
// const marker = [...this.menus.dangerous, ...this.menus.keynote, ...this.menus.resources, ...this.menus.device]
const marker = [...this.menus.keynote]
marker.forEach((item) => {
item.list.forEach(citem => {
if (citem.lon && citem.lat) {
markerList.push(citem)
}
})
})
markerList = markerList.filter(item => item.lon && item.lat)
.map((item) => ({
...item,
lon: item.lat,
lat: item.lon,
}))
markerList.forEach(item => {
AddLabelPoint(
item.id || new Date().getTime(),
item.name,
iconFilter(item.typename),
[item.lon, item.lat, 0], 'gd', item,
this.clickMarker
)
})
this.markerList = markerList
this.markerListBak = JSON.parse(JSON.stringify(markerList))
})
},
// 场所列表点击
menuClickPlace(e) {
console.log(e, '123')
clearResetMap()
this.showPop = false
if (this.currentSelect === e.typename) {
// 退出筛选
this.markerList = this.markerListBak
this.currentSelect = ''
}
else {
this.markerList = this.markerListBak.filter((item) => item.typename === e.typename)
this.currentSelect = e.typename
}
this.markerList.forEach(item => {
AddLabelPoint(
item.id || new Date().getTime(),
item.name,
iconFilter(item.typename),
[item.lon, item.lat, 0], 'gd', item,
this.clickMarker
)
})
},
// 点击点位
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)
}
},
// 获取人员
searchPerson() {
this.menuTab = [
{
name: '应急人员',
value: 'person',
},
]
getPersonPointList({}).then(res => {
console.log(res.data, '人员')
const initData = res.data.value
const typeList = [...new Map(res.data.value.map(item => item.typename).map(item => [item, item])).values()]
const data = typeList.map((item) => {
return {
typename: item,
total: initData.filter(citem => citem.typename === item).length,
type: initData.filter(citem => citem.typename === item)[0].type,
list: initData.filter(citem => citem.typename === item).map((item) => ({ ...item, showType: 'person' })),
}
})
this.menus.person = data.map(item => ({ ...item, icon: iconFilter(item.typename) }))
this.$refs.layerPerson.refreshMenu(1)
let markerList = []
const marker = [...this.menus.person]
console.log(marker, 'marker')
marker.forEach((item) => {
item.list.forEach(citem => {
if (citem.lon && citem.lat) {
markerList.push(citem)
}
})
})
markerList = markerList.filter(item => item.lon && item.lat)
markerList.forEach(item => {
AddLabelPoint(
item.id || new Date().getTime(),
item.name,
iconFilter(item.typename),
[item.lon, item.lat, 0], 'gd', item,
this.clickMarker
)
})
this.markerList = markerList
this.markerListBak = JSON.parse(JSON.stringify(markerList))
})
},
// 获取设备
searchDevice() {
this.menuTab = [
{
name: '基础设备',
value: 'device',
},
]
getDevicePointList({}).then(res => {
console.log(res.data, '设备')
const initData = deviceList
const typeList = [...new Map(initData.map(item => item.typename).map(item => [item, item])).values()]
const data = typeList.map((item) => {
return {
typename: item,
total: initData.filter(citem => citem.typename === item).length,
type: initData.filter(citem => citem.typename === item)[0].type,
list: initData.filter(citem => citem.typename === item).map((item) => ({ ...item, showType: 'device' })),
}
})
this.menus.device = data.map(item => ({ ...item, icon: iconFilter(item.typename) }))
this.$refs.layerDevice.refreshMenu(1)
let markerList = []
const marker = [...this.menus.device]
marker.forEach((item) => {
item.list.forEach(citem => {
if (citem.lon && citem.lat) {
markerList.push(citem)
}
})
})
markerList = markerList.filter(item => item.lon && item.lat)
markerList.forEach(item => {
AddLabelPoint(
item.id || new Date().getTime(),
item.name,
iconFilter(item.typename),
[item.lon, item.lat, 0], 'gd', item,
this.clickMarker
)
})
this.markerList = markerList
this.markerListBak = JSON.parse(JSON.stringify(markerList))
})
},
// 获取资源
searchResource() {
this.menuTab = [
{
name: '应急资源',
value: 'resource',
},
]
getResourcePointList({}).then((res) => {
const initData = res.data.value
console.log(initData, '资源')
// 资源列表
const typeList = [...new Map(initData.map(item => item.typename).map(item => [item, item])).values()]
const data = typeList.map((item) => {
return {
typename: item,
total: initData.filter(citem => citem.typename === item).length,
type: initData.filter(citem => citem.typename === item)[0].type,
list: initData.filter(citem => citem.typename === item).map((item) => ({ ...item, showType: 'resource' })),
}
})
this.menus.resource = data.map(item => ({ ...item, icon: iconFilter(item.typename) }))
this.$refs.layerResource.refreshMenu(1)
// 地图绘制点位
let markerList = []
const marker = [...this.menus.resource]
marker.forEach((item) => {
item.list.forEach(citem => {
if (citem.lon && citem.lat) {
markerList.push(citem)
}
})
})
markerList = markerList.filter(item => item.lon && item.lat)
.map((item) => ({
...item,
lon: item.lat,
lat: item.lon,
}))
markerList.forEach(item => {
AddLabelPoint(
item.id || new Date().getTime(),
item.name,
iconFilter(item.typename),
[item.lon, item.lat, 0], 'gd', item,
this.clickMarker
)
})
this.markerList = markerList
this.markerListBak = JSON.parse(JSON.stringify(markerList))
})
},
// 车辆
searchCar() {
this.menuTab = [
{
name: '应急车辆',
value: 'car',
},
]
getCarPointList({}).then((res) => {
const initData = res.data.value
console.log(initData, '车辆')
const typeList = [...new Map(initData.map(item => item.typename).map(item => [item, item])).values()]
const data = typeList.map((item) => {
return {
typename: item,
total: initData.filter(citem => citem.typename === item).length,
type: initData.filter(citem => citem.typename === item)[0].type,
list: initData.filter(citem => citem.typename === item).map((item) => ({ ...item, showType: 'car' })),
}
})
this.menus.car = data.map(item => ({ ...item, icon: iconFilter(item.typename) }))
this.$refs.layerCar.refreshMenu(0)
let markerList = []
const marker = [...this.menus.car]
marker.forEach((item) => {
item.list.forEach(citem => {
if (citem.lon && citem.lat) {
markerList.push(citem)
}
})
})
markerList = markerList.filter(item => item.lon && item.lat)
markerList.forEach(item => {
AddLabelPoint(
item.id || new Date().getTime(),
item.name,
iconFilter(item.typename),
[item.lon, item.lat, 0], 'gd', item,
this.clickMarker
)
})
this.markerList = markerList
this.markerListBak = JSON.parse(JSON.stringify(markerList))
})
}
}
}
</script>
<style scoped>
.video-menu {
display: flex;
z-index: 111111111;
width: 40rem;
height: 5rem;
position: absolute;
left: 20px;
top: 1rem;
}
</style>
