From 88f3b0dbbb5df9ee3127851b0f1641856d770554 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Thu, 11 Sep 2025 22:53:39 +0800
Subject: [PATCH] feat:突发事件模拟优化
---
src/pages/map/components/scomponents/layersControl.vue | 63 +++++---------------
src/views/pd/components/dynamicPanel.vue | 114 ++++++++++++++++++++++++++++---------
2 files changed, 101 insertions(+), 76 deletions(-)
diff --git a/src/pages/map/components/scomponents/layersControl.vue b/src/pages/map/components/scomponents/layersControl.vue
index 95bcdd4..272f9b1 100644
--- a/src/pages/map/components/scomponents/layersControl.vue
+++ b/src/pages/map/components/scomponents/layersControl.vue
@@ -2,7 +2,7 @@
* @Author: shuishen 1109946754@qq.com
* @Date: 2024-10-31 10:47:29
* @LastEditors: shuishen 1109946754@qq.com
- * @LastEditTime: 2025-09-07 20:23:17
+ * @LastEditTime: 2025-09-11 22:51:34
* @FilePath: \bigScreen\src\pages\map\components\scomponents\layersControl.vue
* @Description:
*
@@ -745,51 +745,7 @@
watch(
() => mapStore.needSelectID,
(newValue, oldValue) => {
- if (curAddClassDoms.length > 0) {
- curAddClassDoms.forEach(dom => {
- dom.classList.remove('is-need-item')
- })
-
- curAddClassDoms = []
- }
-
- if (newValue.length > 0) {
- addTileLayers['qyfb']?.getOverlays().forEach(item => {
- newValue.forEach(id => {
- if (item.attrParams.id == id) {
- let dom = item.delegate.children[0]
-
- dom.classList.add('is-need-item')
-
- curAddClassDoms.push(dom)
- }
- })
- })
-
- addTileLayers['sg-yjc']?.getOverlays().forEach(item => {
- newValue.forEach(id => {
- if (item.attrParams.id == id) {
- let dom = item.delegate.children[0]
-
- dom.classList.add('is-need-item')
-
- curAddClassDoms.push(dom)
- }
- })
- })
-
- addTileLayers['zb']?.getOverlays().forEach(item => {
- newValue.forEach(id => {
- if (item.attrParams.id == id) {
- let dom = item.delegate.children[0]
-
- dom.classList.add('is-need-item')
-
- curAddClassDoms.push(dom)
- }
- })
- })
- }
+ curAddClassDoms = []
}
)
@@ -902,6 +858,10 @@
data.filter(i => i.lng && i.lng != '' && i.lat && i.lat != '').forEach(i => {
let iconEl = ''
+ let flag = mapStore.needSelectID.some(o => i.id === o)
+
+ flag && curAddClassDoms.push(i)
+
if ('showPanel' in item && item.showPanel == false) {
if (item.backgroundIcon) {
iconEl = `
@@ -919,7 +879,7 @@
let divIcon = new DC.DivIcon(
new DC.Position(i.lng, i.lat, i.ele || 64),
- `<div class="public-map-popup ${item.className || ''}">
+ `<div class="public-map-popup ${item.className || ''} ${flag ? 'is-need-item' : ''}">
${iconEl}
</div>`
)
@@ -947,6 +907,15 @@
addTileLayers[item.layerName].addOverlay(divIcon)
})
+
+ if (curAddClassDoms.length == 1) {
+ window.$viewer.zoomToPosition(new DC.Position(curAddClassDoms[0].lng, curAddClassDoms[0].lat, 3000, 0, -90, 0))
+ }
+
+ if (curAddClassDoms.length > 1) {
+ let center = window.$turf.midpoint(...curAddClassDoms.map(i => window.$turf.point([i.lng, i.lat])))
+ window.$viewer.zoomToPosition(new DC.Position(center.geometry.coordinates[0], center.geometry.coordinates[1], 4200, 0, -90, 0))
+ }
})
} else {
addTileLayers[item.layerName].show = true
diff --git a/src/views/pd/components/dynamicPanel.vue b/src/views/pd/components/dynamicPanel.vue
index f24a2d2..911b869 100644
--- a/src/views/pd/components/dynamicPanel.vue
+++ b/src/views/pd/components/dynamicPanel.vue
@@ -2,7 +2,7 @@
* @Author: shuishen 1109946754@qq.com
* @Date: 2024-11-09 15:41:35
* @LastEditors: shuishen 1109946754@qq.com
- * @LastEditTime: 2025-09-07 20:29:02
+ * @LastEditTime: 2025-09-11 22:34:57
* @FilePath: \bigScreen\src\views\pd\components\dynamicPanel.vue
* @Description:
*
@@ -17,7 +17,7 @@
import qysgwslx from "@/assets/json/qysgwslx"
import disposeDataJson from "@/assets/json/dispose"
const { VITE_APP_BASE } = import.meta.env
-import { computed, onBeforeUnmount, onUnmounted } from 'vue'
+import { computed, onBeforeUnmount, onUnmounted, watch } from 'vue'
import { spatialAnalysisPoint } from "@/api/space/space"
import { useMap } from 'store/map'
const mapStore = useMap()
@@ -62,8 +62,6 @@
})
const clearAll = () => {
-
- EventBus.emit('restHandleDelChange', `2`)
EventBus.emit('restHandleDelChange', `3-2`)
EventBus.emit('restHandleDelChange', `3-4`)
@@ -92,10 +90,6 @@
clearAll()
if (type === 1) {
- EventBus.emit('restHandleCheckChange', `2`)
- EventBus.emit('restHandleCheckChange', `3-2`)
- EventBus.emit('restHandleCheckChange', `3-4`)
-
contentData.value = modelData
contentData.value.disposeData[0].show = true
curContentInd.value = 0
@@ -134,11 +128,6 @@
divIcon.attrParams = item
divIcon.on(DC.MouseEventType.CLICK, (e) => {
- console.log(e, '-')
- EventBus.emit('restHandleCheckChange', `2`)
- EventBus.emit('restHandleCheckChange', `3-2`)
- EventBus.emit('restHandleCheckChange', `3-4`)
-
contentData.value = e.overlay.attrParams
contentData.value.disposeData[0].show = true
curContentInd.value = 0
@@ -183,6 +172,8 @@
if (contentData.value === null) return false
const isShow = contentData.value?.disposeData[curContentInd.value]?.isNeedHandle
+
+ mapStore.setStartCustomWx(isShow)
return isShow
})
@@ -207,8 +198,6 @@
const clickId = e.overlay.attrParams.id
- console.log(clickId, contentData.value?.disposeData[curContentInd.value]?.needSelectID, 111)
-
let flag = contentData.value?.disposeData[curContentInd.value]?.needSelectID.some(i => i == clickId)
let isSelectedCur = contentData.value?.disposeData[curContentInd.value]?.selectedID.some(i => i == clickId)
@@ -225,6 +214,18 @@
contentData.value.disposeData[curContentInd.value].selectedID.push(clickId)
contentData.value.disposeData[curContentInd.value].selectedNum += 1
+
+ if (isDisabledNextBtn.value) {
+ ElMessage({
+ message: '选择正确，请继续选择下一个。',
+ type: 'success',
+ })
+ } else {
+ ElMessage({
+ message: '选择正确。',
+ type: 'success',
+ })
+ }
} else {
ElMessage({
message: '选择错误,请重新选择。',
@@ -236,6 +237,7 @@
EventBus.on('wxEntityClick', wxEntityClick)
const modelData = {
+ title: '典型情景模拟',
incidentSiteLng: 115.6129562,
incidentSiteLat: 29.80862305,
incidentSiteAlt: 8,
@@ -248,6 +250,7 @@
show: false,
},
{
+ useLayerID: '3-2',
content: '启动应急池的使用，将泄漏的化学原料引导至应急池中。',
isNeedHandle: true,
buttonText: '选择应急池',
@@ -258,16 +261,18 @@
show: false,
},
{
+ useLayerID: '3-2',
content: '若该公司应急池容量不足，可通过移动泵或槽罐车将事故废水转移至临近企业事故应急池或污水处理厂事故应急池。',
isNeedHandle: true,
- buttonText: '选择临近企业',
+ buttonText: '选择应急池',
isSelectNum: 1,
selectedNum: 0,
- needSelectID: ['1875103368541917185'],
+ needSelectID: ['1875105469779234817'],
selectedID: [],
show: false,
},
{
+ useLayerID: '3-4',
content: '立即关闭园区排洪渠下游闸坝，拦截污染水体。',
isNeedHandle: true,
buttonText: '选择闸坝',
@@ -279,6 +284,7 @@
},
{
+ useLayerID: '3-4',
content: '立即关闭园区上游闸坝，拦截清水，减轻应急压力。',
isNeedHandle: true,
buttonText: '选择闸坝',
@@ -290,6 +296,7 @@
},
{
+ useLayerID: '3-2',
content: '开启园区事故应急池将拦截的污水转输至池内。',
isNeedHandle: true,
buttonText: '选择应急池',
@@ -310,6 +317,7 @@
const customData = [
{
+ title: '自定义情景模拟',
incidentSiteLng: 115.61393792,
incidentSiteLat: 29.79786228,
incidentSiteAlt: 11.98,
@@ -336,18 +344,33 @@
isNeedHandle: false,
show: false,
},
+
{
- content: '处理完成后打开上游临时闸坝释放清水，稀释后打开下游临时闸坝排放处理后的污水。',
+ useLayerID: '3-4',
+ content: '处理完成后打开上游临时闸坝释放清水。',
isNeedHandle: true,
buttonText: '选择闸坝',
- isSelectNum: 3,
+ isSelectNum: 2,
selectedNum: 0,
- needSelectID: ['1922914799476486145', '1922914776902742017', '1922914784108556289'],
+ needSelectID: ['1922914802630602754', '1922914799476486145'],
selectedID: [],
show: false,
},
{
+ useLayerID: '3-4',
+ content: '稀释后打开下游临时闸坝排放处理后的污水。',
+ isNeedHandle: true,
+ buttonText: '选择闸坝',
+ isSelectNum: 2,
+ selectedNum: 0,
+ needSelectID: ['1922914776902742017', '1922914784108556289'],
+ selectedID: [],
+ show: false,
+ },
+
+ {
+ useLayerID: '3-2',
content: '开启园区事故应急池将拦截的污水转输至池内。',
isNeedHandle: true,
buttonText: '选择应急池',
@@ -367,6 +390,7 @@
},
{
+ title: '自定义情景模拟',
incidentSiteLng: 115.61264639,
incidentSiteLat: 29.81692806,
incidentSiteAlt: 19,
@@ -379,6 +403,7 @@
show: false,
},
{
+ useLayerID: '3-2',
content: '启动应急池的使用，喷淋水将泄漏的化学原料导入厂区事故应急池。',
isNeedHandle: true,
buttonText: '选择应急池',
@@ -389,6 +414,7 @@
show: false,
},
{
+ useLayerID: '3-4',
content: '立即关闭园区排洪渠下游闸坝，拦截污染水体。',
isNeedHandle: true,
buttonText: '选择闸坝',
@@ -400,6 +426,7 @@
},
{
+ useLayerID: '3-4',
content: '立即关闭园区上游闸坝，拦截清水，减轻应急压力。',
isNeedHandle: true,
buttonText: '选择闸坝',
@@ -411,6 +438,7 @@
},
{
+ useLayerID: '3-2',
content: '开启园区事故应急池将拦截的污水转输至池内。',
isNeedHandle: true,
buttonText: '选择应急池',
@@ -430,10 +458,23 @@
}
]
+let curLoadLayerId = null
+
const nextStep = () => {
+ if (curLoadLayerId) {
+ EventBus.emit('restHandleDelChange', curLoadLayerId)
+ }
+
mapStore.setStartCustomWx(false)
curContentInd.value += 1
contentData.value.disposeData[curContentInd.value].show = true
+
+ if ('useLayerID' in contentData.value.disposeData[curContentInd.value]) {
+ curLoadLayerId = contentData.value.disposeData[curContentInd.value].useLayerID
+ EventBus.emit('restHandleCheckChange', contentData.value.disposeData[curContentInd.value].useLayerID)
+ } else {
+ curLoadLayerId = null
+ }
if ('needSelectID' in contentData.value.disposeData[curContentInd.value]) {
mapStore.setNeedSelectID(contentData.value.disposeData[curContentInd.value].needSelectID)
@@ -442,16 +483,26 @@
}
}
-const selectEquipment = () => {
- mapStore.setStartCustomWx(true)
-}
-
const cancelFlowDispose = () => {
clearAll()
}
+watch([isShowSelectBtn, isDisabledNextBtn], ([newData, newDisabledData]) => {
+ window.$viewer.tooltip.enable = newData && newDisabledData
+})
+
+const mouseToolTip = (e) => {
+ if (isShowSelectBtn.value) {
+ window.$viewer.tooltip.showAt(e.windowPosition, isShowSelectText.value)
+ }
+}
+
+window.$viewer.on(DC.MouseEventType.MOUSE_MOVE, mouseToolTip)
+
onBeforeUnmount(() => {
clearAll()
+ window.$viewer.off(DC.MouseEventType.MOUSE_MOVE, mouseToolTip)
+
dynamicVectorLayer && window.$viewer && window.$viewer.removeLayer(dynamicVectorLayer)
customVectorLayer && window.$viewer && window.$viewer.removeLayer(customVectorLayer)
@@ -504,7 +555,7 @@
<div v-show="isShowPdContent" class="right-container">
<div class="title">
- 情景模拟
+ {{ contentData?.title }}
</div>
<div class="content">
@@ -518,10 +569,6 @@
<el-button @click="cancelFlowDispose">{{ cancelText }}</el-button>
<el-button :disabled="isDisabledNextBtn" type="primary" @click="nextStep"
v-show="isShowNextBtn">下一步</el-button>
- <el-button :disabled="!isDisabledNextBtn" type="primary" v-show="isShowSelectBtn"
- @click="selectEquipment">{{
- isShowSelectText
- }}</el-button>
</div>
</div>
</div>
@@ -700,6 +747,15 @@
display: flex;
color: #fff;
+ user-select: none;
+ /* 禁止文本选择 */
+ -webkit-user-select: none;
+ /* Safari 兼容 */
+ -moz-user-select: none;
+ /* Firefox 兼容 */
+ -ms-user-select: none;
+ /* IE10+/Edge 兼容 */
+
.title {
line-height: 40px;
}
--
Gitblit v1.9.3