feat:突发事件模拟优化

shuishen

2025-09-11 88f3b0dbbb5df9ee3127851b0f1641856d770554

feat:突发事件模拟优化

 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

 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;
    }