|
|
@@ -8,7 +8,11 @@
|
|
|
v-show="mapMode.value === '3d'"
|
|
|
/>
|
|
|
<!-- 右侧监控窗口 -->
|
|
|
- <monitor-dialog ref="monitor" @showPersonLayer="showPersonLayer" @openBuilding="openBuilding" />
|
|
|
+ <monitor-dialog
|
|
|
+ ref="monitor"
|
|
|
+ @showPersonLayer="showPersonLayer"
|
|
|
+ @openBuilding="openBuilding"
|
|
|
+ />
|
|
|
<footer-navigation v-show="fullScreen" />
|
|
|
|
|
|
<!-- 楼层控制 -->
|
|
|
@@ -34,7 +38,11 @@
|
|
|
<!-- 人员窗口 -->
|
|
|
<person-dialog ref="personInfo" @alarmTagClose="handleAlarmTagClose" />
|
|
|
<!-- 一键报警窗口 -->
|
|
|
- <one-key-alarm-dialog v-for="item in oneKeyAlarmDialogs" :key="item.dialogId" :dialogConfig="item" />
|
|
|
+ <one-key-alarm-dialog
|
|
|
+ v-for="item in oneKeyAlarmDialogs"
|
|
|
+ :key="item.dialogId"
|
|
|
+ :dialogConfig="item"
|
|
|
+ />
|
|
|
<chemical-detail-dialog />
|
|
|
<yuan-detail-dialog />
|
|
|
|
|
|
@@ -68,7 +76,11 @@
|
|
|
/>
|
|
|
</template>
|
|
|
<template v-for="(item, index) in alwaysShowDialogArr">
|
|
|
- <tooltip-dialog :key="index" :id="'tooltip_' + item.dialogMsg.data.id" :dialogConfig="item" />
|
|
|
+ <tooltip-dialog
|
|
|
+ :key="index"
|
|
|
+ :id="'tooltip_' + item.dialogMsg.data.id"
|
|
|
+ :dialogConfig="item"
|
|
|
+ />
|
|
|
</template>
|
|
|
<model-view-toolbar-dialog v-show="false" />
|
|
|
|
|
|
@@ -97,7 +109,10 @@
|
|
|
</template>
|
|
|
|
|
|
<!-- 左侧面板 -->
|
|
|
- <transition enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutLeft">
|
|
|
+ <transition
|
|
|
+ enter-active-class="animated fadeInLeft"
|
|
|
+ leave-active-class="animated fadeOutLeft"
|
|
|
+ >
|
|
|
<div v-if="!fullScreen" class="panel_box left_panel">
|
|
|
<overview />
|
|
|
<risk-statistics />
|
|
|
@@ -105,7 +120,10 @@
|
|
|
</div>
|
|
|
</transition>
|
|
|
<!-- 右侧面板 -->
|
|
|
- <transition enter-active-class="animated fadeInRight" leave-active-class="animated fadeOutRight">
|
|
|
+ <transition
|
|
|
+ enter-active-class="animated fadeInRight"
|
|
|
+ leave-active-class="animated fadeOutRight"
|
|
|
+ >
|
|
|
<div v-if="!fullScreen" class="panel_box right_panel">
|
|
|
<!-- <weather /> -->
|
|
|
<person-statistics />
|
|
|
@@ -113,7 +131,11 @@
|
|
|
</div>
|
|
|
</transition>
|
|
|
<!-- 下侧面板 未使用 -->
|
|
|
- <transition enter-active-class="animated fadeInDown" leave-active-class="animated fadeOutDown"> </transition>
|
|
|
+ <transition
|
|
|
+ enter-active-class="animated fadeInDown"
|
|
|
+ leave-active-class="animated fadeOutDown"
|
|
|
+ >
|
|
|
+ </transition>
|
|
|
<!-- 站点选择 -->
|
|
|
<!-- <station-select /> -->
|
|
|
<!-- 蒙版 -->
|
|
|
@@ -131,16 +153,16 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import LoadBuilding from './mixins/LoadBuilding'
|
|
|
-import LoadLayer from './mixins/LoadLayer'
|
|
|
-import MapEvent from './mixins/MapEvent'
|
|
|
-import MqttUtil from './mixins/MqttUtil'
|
|
|
-import LayerControl from '@/views/basePage/components/layerControl'
|
|
|
-import MonitorDialog from '@/views/basePage/components/monitorDialog'
|
|
|
-import FloorControl from '@/views/basePage/components/floorControl'
|
|
|
-import VideoImageWindow from '@/views/basePage/components/videoWindow/VideoImageWindow'
|
|
|
-import LayerDetail from '@/views/basePage/components/layerDetail'
|
|
|
-import GatherAlarmDialog from '@/views/components/dialog/GatherAlarmDialog'
|
|
|
+import LoadBuilding from "./mixins/LoadBuilding";
|
|
|
+import LoadLayer from "./mixins/LoadLayer";
|
|
|
+import MapEvent from "./mixins/MapEvent";
|
|
|
+import MqttUtil from "./mixins/MqttUtil";
|
|
|
+import LayerControl from "@/views/basePage/components/layerControl";
|
|
|
+import MonitorDialog from "@/views/basePage/components/monitorDialog";
|
|
|
+import FloorControl from "@/views/basePage/components/floorControl";
|
|
|
+import VideoImageWindow from "@/views/basePage/components/videoWindow/VideoImageWindow";
|
|
|
+import LayerDetail from "@/views/basePage/components/layerDetail";
|
|
|
+import GatherAlarmDialog from "@/views/components/dialog/GatherAlarmDialog";
|
|
|
import {
|
|
|
HistoryTrackDialog,
|
|
|
HistoryPlayer,
|
|
|
@@ -154,24 +176,24 @@ import {
|
|
|
OneKeyAlarmDialog,
|
|
|
ModelViewToolbarDialog,
|
|
|
AlarmMapDialog,
|
|
|
-} from './components/dialog/index'
|
|
|
-import Overview from './panels/Overview'
|
|
|
-import RiskStatistics from './panels/RiskStatistics'
|
|
|
-import RiskHint from './panels/RiskHint'
|
|
|
-import Weather from './panels/Weather'
|
|
|
-import PersonStatistics from './panels/PersonStatistics'
|
|
|
-import IntelligentVideo from './panels/IntelligentVideo/index'
|
|
|
-import StationSelect from './panels/StationSelect'
|
|
|
-import { mapGetters } from 'vuex'
|
|
|
-import { openDialog } from '@/utils/mapUtil'
|
|
|
-import LastPositionDialog from './components/dialog/LastPositionDialog.vue'
|
|
|
-import LastPositionPlayer from './components/dialog/LastPositionPlayer.vue'
|
|
|
-import StationAlarmDialog from './components/dialog/StationAlarmDialog.vue'
|
|
|
-import FooterNavigation from '../components/baseFooter/FooterNavigation.vue'
|
|
|
+} from "./components/dialog/index";
|
|
|
+import Overview from "./panels/Overview";
|
|
|
+import RiskStatistics from "./panels/RiskStatistics";
|
|
|
+import RiskHint from "./panels/RiskHint";
|
|
|
+import Weather from "./panels/Weather";
|
|
|
+import PersonStatistics from "./panels/PersonStatistics";
|
|
|
+import IntelligentVideo from "./panels/IntelligentVideo/index";
|
|
|
+import StationSelect from "./panels/StationSelect";
|
|
|
+import { mapGetters } from "vuex";
|
|
|
+import { openDialog } from "@/utils/mapUtil";
|
|
|
+import LastPositionDialog from "./components/dialog/LastPositionDialog.vue";
|
|
|
+import LastPositionPlayer from "./components/dialog/LastPositionPlayer.vue";
|
|
|
+import StationAlarmDialog from "./components/dialog/StationAlarmDialog.vue";
|
|
|
+import FooterNavigation from "../components/baseFooter/FooterNavigation.vue";
|
|
|
|
|
|
// import ImageVideo from "./components/ImageVideo";
|
|
|
export default {
|
|
|
- name: 'basePage',
|
|
|
+ name: "basePage",
|
|
|
data() {
|
|
|
return {
|
|
|
// 地图元素报警弹窗配置集合
|
|
|
@@ -182,7 +204,7 @@ export default {
|
|
|
},
|
|
|
alarmLiveData: [],
|
|
|
fullScreen: false,
|
|
|
- }
|
|
|
+ };
|
|
|
},
|
|
|
components: {
|
|
|
LayerControl, // 左侧图层控制组件
|
|
|
@@ -219,67 +241,81 @@ export default {
|
|
|
mixins: [LoadBuilding, LoadLayer, MapEvent, MqttUtil], //放入需要引用的模块
|
|
|
computed: {
|
|
|
...mapGetters([
|
|
|
- 'alarmDataObj',
|
|
|
- 'videoDialogIds',
|
|
|
- 'oneKeyAlarmDialogs', //一键报警窗口的集合
|
|
|
- 'buildId',
|
|
|
- 'layerDetailDialog',
|
|
|
- 'mapMode',
|
|
|
- 'buildInfo',
|
|
|
+ "alarmDataObj",
|
|
|
+ "videoDialogIds",
|
|
|
+ "oneKeyAlarmDialogs", //一键报警窗口的集合
|
|
|
+ "buildId",
|
|
|
+ "layerDetailDialog",
|
|
|
+ "mapMode",
|
|
|
+ "buildInfo",
|
|
|
]),
|
|
|
},
|
|
|
watch: {
|
|
|
alarmDataObj: {
|
|
|
handler(newVal) {
|
|
|
+ console.log("报警对象信息", newVal);
|
|
|
for (const key in newVal) {
|
|
|
- if (['perimeter', 'jgyt'].includes(key)) {
|
|
|
+ if (["perimeter", "jgyt", "fire"].includes(key)) {
|
|
|
// 当前显示的弹窗
|
|
|
- let showIds = this.mapDialogConfig[key].map(item => item.dialogMsg.data.id)
|
|
|
- newVal[key].forEach(val => {
|
|
|
+ let showIds = this.mapDialogConfig[key].map(
|
|
|
+ (item) => item.dialogMsg.data.id
|
|
|
+ );
|
|
|
+ newVal[key].forEach((val) => {
|
|
|
//如果弹窗正在显示，则实时更新上面内容
|
|
|
if (showIds.includes(val.id)) {
|
|
|
- this.mapDialogConfig[key].forEach(data => {
|
|
|
+ this.mapDialogConfig[key].forEach((data) => {
|
|
|
if (val.id === data.dialogMsg.data.id) {
|
|
|
- this.$set(data.dialogMsg, 'data', val)
|
|
|
+ this.$set(data.dialogMsg, "data", val);
|
|
|
}
|
|
|
- })
|
|
|
+ });
|
|
|
} else {
|
|
|
// 如果正在报警的点弹窗不显示，且没有被手动关闭过，自动打开
|
|
|
if (val.alarmState === 1 || val.alarmStatus === true) {
|
|
|
- let position = []
|
|
|
- if (key === 'jgyt') {
|
|
|
- position = [+val.longitude, +val.latitude, +val.height]
|
|
|
- } else if (key === 'perimeter') {
|
|
|
- position = [...val.alarmPosition, 4]
|
|
|
+ let position = [];
|
|
|
+ if (key === "jgyt") {
|
|
|
+ position = [+val.longitude, +val.latitude, +val.height];
|
|
|
+ } else if (key === "fire") {
|
|
|
+ console.log(
|
|
|
+ "火灾报警弹窗数据信息",
|
|
|
+ this.mapDialogConfig[key]
|
|
|
+ );
|
|
|
+ position = val.alarmPosition;
|
|
|
+ } else if (key === "perimeter") {
|
|
|
+ console.log(
|
|
|
+ "周界弹窗数据信息",
|
|
|
+ this.mapDialogConfig[key]
|
|
|
+ );
|
|
|
+ position = [...val.alarmPosition, 4];
|
|
|
if (val.segmentName) {
|
|
|
- val.name = val.name + val.segmentName
|
|
|
+ val.name = val.name + val.segmentName;
|
|
|
}
|
|
|
}
|
|
|
this.mapDialogConfig[key].push({
|
|
|
show: false,
|
|
|
dialogMsg: { data: val, position },
|
|
|
- })
|
|
|
+ });
|
|
|
let p1 = 132,
|
|
|
- p2 = 236
|
|
|
- key === 'jgyt' && ((p1 = 200), (p2 = 210))
|
|
|
+ p2 = 236;
|
|
|
+ key === "jgyt" && ((p1 = 200), (p2 = 210));
|
|
|
+ key === "fire" && ((p1 = 150), (p2 = 236));
|
|
|
for (let data of this.mapDialogConfig[key]) {
|
|
|
- ;(() => {
|
|
|
+ (() => {
|
|
|
setTimeout(() => {
|
|
|
- data.show = true
|
|
|
- this.$store.dispatch('home/setMapPopupConfig', {
|
|
|
+ data.show = true;
|
|
|
+ this.$store.dispatch("home/setMapPopupConfig", {
|
|
|
isShow: true,
|
|
|
- type: 'point',
|
|
|
+ type: "point",
|
|
|
position: data.dialogMsg.position,
|
|
|
- dialogid: key + '_' + data.dialogMsg.data.id,
|
|
|
+ dialogid: key + "_" + data.dialogMsg.data.id,
|
|
|
p1,
|
|
|
p2,
|
|
|
- })
|
|
|
- }, 0)
|
|
|
- })()
|
|
|
+ });
|
|
|
+ }, 0);
|
|
|
+ })();
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- })
|
|
|
+ });
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
@@ -287,7 +323,7 @@ export default {
|
|
|
},
|
|
|
mapMode: {
|
|
|
handler(newValue) {
|
|
|
- this.setMapMode(newValue)
|
|
|
+ this.setMapMode(newValue);
|
|
|
},
|
|
|
deep: true,
|
|
|
},
|
|
|
@@ -296,22 +332,22 @@ export default {
|
|
|
// console.log(this)
|
|
|
// console.log(MAP_MODE_LIST)
|
|
|
// console.log(this.mapMode)
|
|
|
- this.setMapMode(this.mapMode)
|
|
|
+ this.setMapMode(this.mapMode);
|
|
|
},
|
|
|
beforeDestroy() {
|
|
|
- this.$store.dispatch('globalConfig/clearSwitchConfig')
|
|
|
+ this.$store.dispatch("globalConfig/clearSwitchConfig");
|
|
|
},
|
|
|
methods: {
|
|
|
openDialog,
|
|
|
setMapMode(newValue) {
|
|
|
- console.log(newValue.value)
|
|
|
- const mode = MAP_MODE_LIST[newValue.value]
|
|
|
+ console.log(newValue.value);
|
|
|
+ const mode = MAP_MODE_LIST[newValue.value];
|
|
|
if (!!mode) {
|
|
|
- console.log('模式切换')
|
|
|
+ console.log("模式切换");
|
|
|
//this.flyToPerspective(mode.perspective);
|
|
|
- this.fullScreen = newValue.value === '3d'
|
|
|
+ this.fullScreen = newValue.value === "3d";
|
|
|
} else {
|
|
|
- console.log('模式不存在')
|
|
|
+ console.log("模式不存在");
|
|
|
}
|
|
|
},
|
|
|
|
|
|
@@ -319,9 +355,9 @@ export default {
|
|
|
* 关闭地图元素点击的弹窗
|
|
|
*/
|
|
|
closemapDialogConfig(key, index, item) {
|
|
|
- const { perspective } = this.buildInfo
|
|
|
+ const { perspective } = this.buildInfo;
|
|
|
if (!!perspective) {
|
|
|
- this.flyToPerspective(perspective)
|
|
|
+ this.flyToPerspective(perspective);
|
|
|
}
|
|
|
// this.flyToPerspective({
|
|
|
// destination: {
|
|
|
@@ -335,15 +371,15 @@ export default {
|
|
|
// roll: 6.283183391886216,
|
|
|
// },
|
|
|
// })
|
|
|
- this.mapDialogConfig[key].splice(index, 1)
|
|
|
+ this.mapDialogConfig[key].splice(index, 1);
|
|
|
},
|
|
|
//弹窗内部点击事件后触发
|
|
|
onPopupInnerAction() {
|
|
|
- this.tooltipDialogArr = []
|
|
|
+ this.tooltipDialogArr = [];
|
|
|
},
|
|
|
pushAlarmList(list) {
|
|
|
- this.alarmLiveData = list
|
|
|
- this.$refs.monitor?.setAlarmData(list)
|
|
|
+ this.alarmLiveData = list;
|
|
|
+ this.$refs.monitor?.setAlarmData(list);
|
|
|
},
|
|
|
pushAlarmMessage(data) {
|
|
|
if (!!data.NewMessage) {
|
|
|
@@ -351,12 +387,12 @@ export default {
|
|
|
title: data.NewMessage.Type,
|
|
|
message: data.NewMessage.Content,
|
|
|
offset: 70,
|
|
|
- type: 'warning',
|
|
|
- })
|
|
|
+ type: "warning",
|
|
|
+ });
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
-}
|
|
|
+};
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
.basePage-container {
|
fan