From 17a81d641608545682e3f79f7c6090cac48fe81a Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Mon, 15 Sep 2025 18:10:01 +0800
Subject: [PATCH] feat:去除高亮
---
src/views/pd/components/dynamicPanel.vue | 149 ++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 115 insertions(+), 34 deletions(-)
diff --git a/src/views/pd/components/dynamicPanel.vue b/src/views/pd/components/dynamicPanel.vue
index f24a2d2..d0ac8c5 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:59:25
* @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,18 +62,18 @@
})
const clearAll = () => {
-
- EventBus.emit('restHandleDelChange', `2`)
EventBus.emit('restHandleDelChange', `3-2`)
EventBus.emit('restHandleDelChange', `3-4`)
modelData.disposeData.forEach(i => {
'selectedNum' in i && (i.selectedNum = 0)
'selectedID' in i && (i.selectedID = [])
+ 'show' in i && (i.show = false)
})
customData.forEach(j => j.disposeData.forEach(i => {
'selectedNum' in i && (i.selectedNum = 0)
'selectedID' in i && (i.selectedID = [])
+ 'show' in i && (i.show = false)
}))
mapStore.setStartCustomWx(false)
@@ -92,10 +92,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 +130,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 +174,8 @@
if (contentData.value === null) return false
const isShow = contentData.value?.disposeData[curContentInd.value]?.isNeedHandle
+
+ mapStore.setStartCustomWx(isShow)
return isShow
})
@@ -207,8 +200,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 +216,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 +239,7 @@
EventBus.on('wxEntityClick', wxEntityClick)
const modelData = {
+ title: '典型情景模拟',
incidentSiteLng: 115.6129562,
incidentSiteLat: 29.80862305,
incidentSiteAlt: 8,
@@ -243,11 +247,18 @@
disposeData: [
{
label: '事故概况',
- content: '2024年X月X日X时，某企业二甲苯储罐泄漏。企业关闭前置阀门，切断泄漏源；根据泄漏情况，向罐内适量注水，抬高液位，形成水垫层，缓解险情，配合堵漏。',
+ content: '2024年X月X日X时，某企业二甲苯储罐泄漏。',
isNeedHandle: false,
show: false,
},
{
+ levelTitle: '企业级应急处置',
+ content: '企业关闭前置阀门，切断泄漏源；根据泄漏情况，向罐内适量注水，抬高液位，形成水垫层，缓解险情，配合堵漏。',
+ isNeedHandle: false,
+ show: false,
+ },
+ {
+ useLayerID: '3-2',
content: '启动应急池的使用，将泄漏的化学原料引导至应急池中。',
isNeedHandle: true,
buttonText: '选择应急池',
@@ -258,16 +269,20 @@
show: false,
},
{
+ levelTitle: '企间级应急处置',
+ useLayerID: '3-2',
content: '若该公司应急池容量不足，可通过移动泵或槽罐车将事故废水转移至临近企业事故应急池或污水处理厂事故应急池。',
isNeedHandle: true,
- buttonText: '选择临近企业',
+ buttonText: '选择应急池',
isSelectNum: 1,
selectedNum: 0,
- needSelectID: ['1875103368541917185'],
+ needSelectID: ['1875105469779234817'],
selectedID: [],
show: false,
},
{
+ levelTitle: '园区级应急处置',
+ useLayerID: '3-4',
content: '立即关闭园区排洪渠下游闸坝，拦截污染水体。',
isNeedHandle: true,
buttonText: '选择闸坝',
@@ -279,6 +294,7 @@
},
{
+ useLayerID: '3-4',
content: '立即关闭园区上游闸坝，拦截清水，减轻应急压力。',
isNeedHandle: true,
buttonText: '选择闸坝',
@@ -290,6 +306,7 @@
},
{
+ useLayerID: '3-2',
content: '开启园区事故应急池将拦截的污水转输至池内。',
isNeedHandle: true,
buttonText: '选择应急池',
@@ -310,6 +327,7 @@
const customData = [
{
+ title: '自定义情景模拟',
incidentSiteLng: 115.61393792,
incidentSiteLat: 29.79786228,
incidentSiteAlt: 11.98,
@@ -336,18 +354,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 +400,7 @@
},
{
+ title: '自定义情景模拟',
incidentSiteLng: 115.61264639,
incidentSiteLat: 29.81692806,
incidentSiteAlt: 19,
@@ -374,11 +408,18 @@
disposeData: [
{
label: '事故概况',
- content: '2025年X月X日X时，某企业物料运输管道发生泄漏。企业通知供应企业停泵，关闭进入公司厂界的盐酸管道阀门；根据泄漏情况，用沙土筑成临时围堰，将盐酸圈在围堰内，然后用氢氧化钠/液碱进行中和处理。用泡沫或其它有效覆盖物进行覆盖，对泄漏区域用雾状水喷淋稀释抑制其挥发，防止泄漏盐酸挥发殃及周围建筑物及人员。',
+ content: '2025年X月X日X时，某企业物料运输管道发生泄漏。',
isNeedHandle: false,
show: false,
},
{
+ levelTitle: '企业级应急处置',
+ content: '企业通知供应企业停泵，关闭进入公司厂界的盐酸管道阀门；根据泄漏情况，用沙土筑成临时围堰，将盐酸圈在围堰内，然后用氢氧化钠/液碱进行中和处理。用泡沫或其它有效覆盖物进行覆盖，对泄漏区域用雾状水喷淋稀释抑制其挥发，防止泄漏盐酸挥发殃及周围建筑物及人员。',
+ isNeedHandle: false,
+ show: false,
+ },
+ {
+ useLayerID: '3-2',
content: '启动应急池的使用，喷淋水将泄漏的化学原料导入厂区事故应急池。',
isNeedHandle: true,
buttonText: '选择应急池',
@@ -389,6 +430,8 @@
show: false,
},
{
+ levelTitle: '园区级应急处置',
+ useLayerID: '3-4',
content: '立即关闭园区排洪渠下游闸坝，拦截污染水体。',
isNeedHandle: true,
buttonText: '选择闸坝',
@@ -400,6 +443,7 @@
},
{
+ useLayerID: '3-4',
content: '立即关闭园区上游闸坝，拦截清水，减轻应急压力。',
isNeedHandle: true,
buttonText: '选择闸坝',
@@ -411,6 +455,7 @@
},
{
+ useLayerID: '3-2',
content: '开启园区事故应急池将拦截的污水转输至池内。',
isNeedHandle: true,
buttonText: '选择应急池',
@@ -430,10 +475,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 +500,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,13 +572,17 @@
<div v-show="isShowPdContent" class="right-container">
<div class="title">
- 情景模拟
+ {{ contentData?.title }}
</div>
<div class="content">
- <div :class="{ 'text-orange': ind === curContentInd }" v-show="item.show"
- v-for="item, ind in contentData?.disposeData" :key="ind">
- {{ item.content }}
+ <div v-show="item.show" v-for="item, ind in contentData?.disposeData" :key="ind">
+ <div v-if="item.levelTitle" class="level-title">
+ {{ item.levelTitle }}
+ </div>
+ <div :class="{ 'text-orange': ind === curContentInd }">
+ {{ item.content }}
+ </div>
</div>
</div>
@@ -518,10 +590,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 +768,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;
}
@@ -713,6 +790,10 @@
line-height: 32px;
}
+ .level-title {
+ text-indent: 0;
+ }
+
.text-orange {
color: orange;
}
--
Gitblit v1.9.3