<template>
<div class="map-content">
<mapConfigs></mapConfigs>
<myModal :modalVisible.sync="showModal" :isWarning="isWarning" :isArea="isArea" :resouceInfo="resouceInfo" @cancel="cancel" :hostDetailList="hostDetailList" :systemDetailList="systemDetailList"></myModal>
<realPlayer :isShow="showVideoModal" :resouceInfo="resouceInfo" @cancel="cancel" :hostDetailList="hostDetailList"></realPlayer>
<btnComponent :curBitmapMakerList="curBitmapMakerList" :map="map" :markerResourceFlooterIcon="markerResourceFlooterIcon" :fireControlLayerArr="fireControlLayerArr" :selectNode="selectNode" :mapState="mapStatePreparation"></btnComponent>
</div>
</template>
<script>
import mapConfigs from "@/components/scfComponents/emapComponentsV1_4_0/mapConfigBase";
// import factory from "./factory";
import layers from './layers';
import {mapApi} from "EvoEmap"
import {nofifyClient} from '@/common/js/client'
// 点位悬浮点击
import popup from "./mixin/popup";
// 添加点位到地图
import indexAddMakeToMap from "./mixin/indexAddMakeToMap";
// 报警点位循环变换 类
import keyMakerLoopClass from "./classFunction/keyMakerLoopClass";
// 创建报警队列中心 类
import evenQueueFunctionClass from "./classFunction/evenQueueFunctionClass";
// 热区 设备点位 数据组装 类
import waitAllMakeInfoDoneHandleClass from "./classFunction/waitAllMakeInfoDoneHandleClass";
// 添加 图层方法
import addNewLayerFunction from "./classFunction/addNewLayerFunction";
// 清除feature 方法
import clearAllLayersFunction from "./classFunction/clearAllLayersFunction";
// diff 对比点位信息
import diffMakerInfo from "./classFunction/diffMakerInfo";
import btnComponent from "./components/buttonComponent";
import myModal from "./components/myModal";
import realPlayer from "@/components/scfComponents/videoPlayers/realPlayer";
export default {
mixins: [popup, indexAddMakeToMap],
props: {
curWarningMarker: {
type: Object,
default: () => ({})
},
isWarningDialog: {
type: Boolean,
default: false
},
showTree: {
type: Boolean,
default: true
},
selectNode: {
type: Object,
default: () => {
return {};
}
},
pollingMarker: {
type: String,
default: () => '',
},
},
components: {
mapConfigs,
myModal,
realPlayer,
btnComponent
},
data() {
return {
map: null,
curBitmap: null,
refsEmap: null,
resouceInfo: {},
allLayers: layers,
markerResourceList:[], //所有的点位资源
allLayersArr: [],//集成测试的所有图层
markerResourceFlooterIcon: [], //底部展示的点位资源
// 其它消防设备
fireControlLayerArr:[{
layerCode: 'fireControlLayer'
}], // 和消防相关的点位资源
// 记录所有的 点位
allMarkerLayers:[
{layerCode: 'hotareaLayer'},
{layerCode: 'videoLayer'},
{layerCode: 'fireControlLayer'},
],
curBitmapMakerList: {},
statusObj:{
1: 'alarm',
2: 'offline',
3: 'shield',
4: 'fault',
5: 'nomal',
},
mapStatePreparation:{}, // 监控地图状态
keyMakerLoop:{},
waitAllMakeInfoDone:{},
addNewLayer: addNewLayerFunction,
clearAllLayers: clearAllLayersFunction,
evenQueueClass: {},// ------------ 90175 ----报警逻辑 ---
diffMakerInfo: new diffMakerInfo(), // 对比点位信息
propMark: 'dataWall'
}
},
watch: {
dataWallMap(newVal, old) {
console.log("dataWallMap change ", newVal)
this.map = newVal
// 监控地图状态
this.setMapStatePreparation(0)
// 开始挂载点位的 事件
this.getMarkerLayers()
// 开始挂载点位的 事件
this.customizeMapFunction()
},
curBitmapObj(newVal, old) {
this.curBitmap = newVal
},
refsEmapObj(newVal, old) {
this.refsEmap = newVal
},
// 组织切换
selectNode: {
deep: true,
immediate: false,
handler(val, oldVal) {
let data = {id: null}
if(oldVal){
data = oldVal
}
if(val.id && val.id !== data.id) {
this.$store.commit("setOrgTreeNode", val);
// 监控地图状态
this.setMapStatePreparation(6)
}
},
},
pollingMarker: {
deep: true,
immediate: true,
handler(newVal) {
// 90175 每一分钟 刷新一次当前图标的 状态信息 用于 更新坐标的报警状态
// console.log("pollingMarker ==newVal==",newVal);
if(newVal && Object.keys(this.curBitmapMakerList).length){
// 监控地图状态
this.setMapStatePreparation(5)
}
},
},
// 地图点击事件回调
mapEventCallbackData: {
deep: false,
immediate: false,
handler(newVal, oldVal) {
console.log("mapEventCallbackData val ==", newVal);
var {type, event, features} = newVal
this.resouceInfo.clickType = ''
if(type == 'dblclick' && features) {
// 获取点位对象
let feature = features[0]
// 如果是聚合点位
if(feature.isClusterFeature && feature.size === 1) {
feature = feature.getProperties().features[0]
}
// 获取点位对象信息
let markerInfo = feature.getMarkerInfo()
console.log("markerInfo ==", markerInfo);
if(( ["fireControlLayer", "fireControlLayerAlarm", "fireControlLayerFault"].includes(markerInfo.layerCode)) && !markerInfo.channelType) {
console.log('打开设备详情');
this.isArea = false;
this.showModal = true;
this.resouceInfo = markerInfo.info;
this.resouceInfo.clickType = type
}
// 热区下钻
if (markerInfo.layerCode === "hotareaLayerAlarm") {
console.log('热区下钻 hotareaLayerAlarm', markerInfo);
if (markerInfo.id) {
mapApi.BitmapApi.getBitmapInfo(markerInfo.id).then(data => {
if (!data.isMain && !data.picId) {
this.$message.warning(this.$t('emap.tips.no-picture-info'))
return false
}
this.map.vuexCommit('EMAP_SET_CENTERMAP_ID', {id: markerInfo.id})
})
}
}
}
},
},
// ---------------- 90175 ------------ 未来需要 在报警处理后 或者设备状态改变后 设备的报警及时的消失 -----------
mapConfigWarningInfo(val) {
// console.log('mapConfigWarningInfo == ', val);
// if (!this.showTree) {
// return;
// }
// 报警逻辑
// this.evenQueueFunction(val)
this.evenQueueClass.evenQueueFunction(val)
},
// 获取推送的故障
pushFaultData: {
deep: true,
immediate: false,
handler(newVal) {
// console.log("pushFaultData ==", newVal);
// this.evenQueueFunction(newVal.data)
// 接收故障
this.evenQueueClass.evenQueueFunction(newVal.data)
},
},
},
computed: {
...Vuex.mapState({
// 90175 ---
dataWallMap: store => store.dataWallMap,
pushFaultData: store => store.alarm.pushFaultData,
mapConfigWarningInfo: store => store.mapConfigWarningInfo,
curBitmapObj: store => store.curBitmapObj,
refsEmapObj: store => store.refsEmapObj,
mapEventCallbackData: store => store.mapEventCallbackData,
// --- end---
}),
},
methods: {
/**
* 关闭弹窗的函数
* @param {*}
*/
cancel() {
this.showModal = false;
this.showVideoModal = false;
},
/**
* 监听到地图的信息的变化 开始执行点位的 操作 ----
*/
customizeMapFunction(){
var emap = this.map
// 混入 的 popup 的 方法 用于悬浮
this.setMapEvent(emap.map, emap);
},
// ---------------- 90175 第一步清楚地图 添加图层 ----------------
/**
*
* 1、 获取地图的图层
*
*/
// 获取地图的图层
getMarkerLayers() {
mapApi.ConfigApi.getMarkerLayers().then(res => {
if (typeof res !== 'undefined' && res.length > 0) {
// 该图层分类要在哪种地图类型下展示 mapType : -1 都不显示（GPS类设备）， 0-GIS地图下，1-光栅图下，2-都显示
let curMapMode = this.map.mapConfig.gisMode // "1": 光栅地图, "0": gis地图, "3"：三维地图
// console.log(`当前的地图类型: ${curMapMode}`)
let list = null
var fireControlLayerArr = this.fireControlLayerArr.map(item => {
return item.layerCode
})
if(!this.markerResourceFlooterIcon.length){
let markerResourceFlooterIcon = []
// console.log('fireControlLayerArr', ['hotareaLayer', 'videoLayer', ...fireControlLayerArr]);
if(curMapMode == "1" || curMapMode == "0" ) {
list = res.filter((item) => {
item.active = true
return item.mapType < 3 && item.mapType !== -1 && ['hotareaLayer', 'videoLayer', ...fireControlLayerArr].indexOf(item.layerCode)> -1
})
this.allLayersArr = res.filter((item) => {
item.active = true
return ['hotareaLayer', 'videoLayer', ...fireControlLayerArr].indexOf(item.layerCode) == -1
})
markerResourceFlooterIcon = res.filter((item) => {
item.active = true
return item.mapType < 3 && item.mapType !== -1 && ['hotareaLayer', 'videoLayer', 'fireControlLayer'].indexOf(item.layerCode)> -1
})
}
this.markerResourceFlooterIcon = []
let layerCode2index = {
'fireControlLayer': 0,
'videoLayer': 1,
'hotareaLayer': 2
}
markerResourceFlooterIcon.forEach(element => {
this.markerResourceFlooterIcon[layerCode2index[element.layerCode]] = element
});
this.markerResourceList = list
}
this.waitAllMakeInfoDoneHandle()
}
})
},
/**
* 整理数据并将marke 放置到地图上
*/
waitAllMakeInfoDoneHandle(){
this.curBitmapMakerList = {}
this.waitAllMakeInfoDone.waitAllMakeInfoDoneHandle(this.markerResourceList, this.map, this.selectNode, (res) => {
if(localStorage.getItem("showConsole")){
console.log('this.waitAllMakeInfoDone waitAllMakeInfoDoneHandle');
}
this.curBitmapMakerList = res
this.setMapStatePreparation(3)
})
},
// ----------------- end --------------
/**
* 记录 地图 状态
* @param {*} state 状态值
*
* 0 dataWallMap 地图创建完成
* 1 addMarkeToMap 已将点位放在地图上
* 2 addNewLayer 已将图层放在地图上
* 3 waitAllMakeInfoDoneHandle 数据处理完成 放置图标之前
* 4 changeLayerOfFeature 完成图层切换后
* 5 pollingMarker 接受到 一分钟的轮询
* 6 selectNode 组织树切换
* 7 收到推送后处理信息 将 curBitmapMakerList 内部的点位的info 改变
*/
setMapStatePreparation(state){
this.mapStatePreparation = {
time: new Date().getTime(),
state: state
}
this.setInfomation(state)
},
setInfomation(state){
if(localStorage.getItem("showConsole")){
console.log('setMapStatePreparation==', state);
}
if(state === 0) {
// 添加新的图层
// this.addNewLayer()
this.addNewLayer(this.allLayers, this.map, (res) => {
this.allMarkerLayers = res
// 监控地图状态
this.setMapStatePreparation(2)
})
this.keyMakerLoop.setMap(this.map) // 给报警循环传值地图
this.evenQueueClass.setMap(this.map) // 给报警推送处理传值地图
this.diffMakerInfo.setMap(this.map) // 给报对比点位信息传值地图
// mixin
this.setShunt(false) // 切换地图重新判定
this.diffMakerInfo.initBitmapMakerList() //初始化数据
}
if(state === 1){
}
if(state === 2){
// 给报警队列中心传值
this.evenQueueClass.setAllMarkerLayers(this.allMarkerLayers)
}
if(state === 3){
// mixin 中的方法 添加点位到地图上
this.shuntInfo()
}
if(state == 4){
// 完成图层切换后 setMapStatePreparation 设置 1 用去去掉 点位的 名称
this.setMapStatePreparation(1)
}
if(state === 5){
// 第一版本逻辑是清除所有的 图层上的点位 但是 性能测试不通过，所以进行了 精准更新 diff 方法
// this.clearAllLayers(this.allMarkerLayers, this.map, () => {
// this.waitAllMakeInfoDoneHandle()
// })
this.waitAllMakeInfoDoneHandle()
// if(this.pollingMarker.flag){
// this.waitAllMakeInfoDoneHandle()
// }
}
if(state === 7){
// 这时点位信息发生了改变 这时就要即使赋值给 diff
// 将最新的点位信息 传给 diff 类 setOldBitmapMakerList
this.diffMakerInfo.setOldBitmapMakerList(this.curBitmapMakerList)
this.setMapStatePreparation(1)
}
}
// ------end --
},
created() {
// 开始循环
this.keyMakerLoop = new keyMakerLoopClass()
// console.log("this.keyMakerLoop ==", this.keyMakerLoop);
this.keyMakerLoop.setAlarmMakerLoop()
// 创建报警队列中心
this.evenQueueClass = new evenQueueFunctionClass()
this.evenQueueClass.setMapStatePreparationFun(this.setMapStatePreparation)
// console.log("this.evenQueueClass =", this.evenQueueClass);
// 获取图层 上的所有点位
this.waitAllMakeInfoDone = new waitAllMakeInfoDoneHandleClass()
// console.log("this.waitAllMakeInfoDone ==", this.waitAllMakeInfoDone);
// 对比点位信息
// console.log('this.diffMakerInfo ==', this.diffMakerInfo);
this.diffMakerInfo.setMapStatePreparationFun(this.setMapStatePreparation)
}
}
</script>
<style lang="less">
@import './mapControl.less';
@import "./emap.less";
.map-content{
.page{
display: none;
}
}
</style>
本文介绍了一个使用Adobe Flex进行UI状态管理的例子。通过定义不同的状态，实现了界面组件在不同状态下的显示与隐藏。具体展示了如何使用`<s:states>`元素管理面板间的组件，并通过`fx:Reparent`实现组件的重新父化。
扫一扫
3264
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
