突发事件模拟相关调整处理

shuishen

2025-08-18 f5f2445d7f5c102734ef8d86e9c8ec828374adc3

 src/views/pd/components/dynamicPanel.vue

@@ -2,19 +2,24 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2024-11-09 15:41:35
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2025-08-06 00:09:39
 * @FilePath: \jsProject\bigScreen\src\views\pd\components\dynamicPanel.vue
 * @LastEditTime: 2025-08-18 20:00:48
 * @FilePath: \bigScreen\src\views\pd\components\dynamicPanel.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by shuishen, All Rights Reserved. 
-->
<script setup>
import 'element-plus/theme-chalk/dark/css-vars.css'

import { ElMessage, ElNotification } from 'element-plus'
import qyfw from "@/assets/json/qyfw"
import EventBus from 'utils/bus'
import qysgwslx from "@/assets/json/qysgwslx"
import disposeDataJson from "@/assets/json/dispose"
const { VITE_APP_BASE } = import.meta.env

const emit = defineEmits(['closePanel'])
import { onUnmounted } from 'vue'
import { computed, onUnmounted } from 'vue'

import { spatialAnalysisPoint } from "@/api/space/space"

@@ -145,6 +150,7 @@

tc.addTrack(track)
let startClick = false
let curSelectType = null

const synth = window.speechSynthesis

@@ -430,6 +436,27 @@
}

const wxEntityClick = (e) => {
    if (curStepType.value === 4 && e.overlay.attrParams.type != 4) {
        ElMessage({
            message: '请选择闸坝.',
            type: 'warning',
        })

        return
    }

    if (curStepType.value === 7 && e.overlay.attrParams.type != 4 && e.overlay.attrParams.type != 3) {
        ElMessage({
            message: '请选择闸阀.',
            type: 'warning',
        })

        return
    }

    isShowEquipmentClosePopup.value = true
    return

    const { attrParams } = e.overlay
    clearAll()
    pointStore.updateSharedData(1)
@@ -524,30 +551,33 @@

EventBus.on('wxEntityClick', wxEntityClick)


qysgwslx.features.forEach(item => {
    let polyline = new DC.Polyline(item.geometry.coordinates.join(';'))
    polyline.setStyle({
        width: 5,
        material: new DC.PolylineTrailMaterialProperty({
            color: DC.Color.ALICEBLUE,
            speed: 10
        }),
        clampToGround: true
    })
    qyWsLayer.addOverlay(polyline)
})

const schemeStart = (item, type) => {
    emit('closePanel')
    clearAll()

    if (type == 1) {
        curSelectType = 1
        if (startClick) {
            EventBus.emit('restHandleDelChange', `3-3`)
            EventBus.emit('restHandleDelChange', `3-4`)
            EventBus.emit('restHandleDelChange', `4-1`)
            EventBus.emit('restHandleDelChange', `4-2`)
            EventBus.emit('restHandleDelChange', `4-3`)
            EventBus.emit('restHandleDelChange', `4-9`)
        }

        // let polyline = new DC.Polyline(qysgwslx.features[0].geometry.coordinates.join(';'))
        // polyline.setStyle({
        //     width: 5,
        //     material: new DC.PolylineTrailMaterialProperty({
        //         color: DC.Color.RED,
        //         speed: 10
        //     }),
        //     clampToGround: true
        // })
        // qyWsLayer.addOverlay(polyline)

        if (item.showModel) {
            window.$viewer.flyToPosition("115.10587903,27.28374884,400,0,-90", () => {
@@ -631,10 +661,131 @@
        mapStore.setStartCustomWx(startClick)
    } else {
        startClick = true
        mapStore.setStartCustomWx(startClick)
        EventBus.emit('restHandleCheckChange', `4`)
        curStep.value = 0
        curStepType.value = 0

        curSelectType = 2
        // mapStore.setStartCustomWx(startClick)
        EventBus.emit('restHandleCheckChange', `3-3`)
        EventBus.emit('restHandleCheckChange', `3-4`)
    }
}

const disposeFlowData = ref([])
const isShowDisposeFlowPopup = ref(false)
const curStep = ref(0)
const isInEnterprise = ref(false)
const curStepType = ref(0)
const isShowEquipmentClosePopup = ref(false)


const viewerClick = (e) => {
    if (curSelectType === 2) {
        let curPosition = {}

        if (e.wgs84Position && e.wgs84Position.alt > 0) {
            curPosition = {
                lng: e.wgs84Position.lng,
                lat: e.wgs84Position.lat,
                alt: e.wgs84Position.alt,
            }
        } else {
            curPosition = {
                lng: e.wgs84SurfacePosition.lng,
                lat: e.wgs84SurfacePosition.lat,
                alt: e.wgs84SurfacePosition.alt,
            }
        }

        let point = window.$turf.point([curPosition.lng, curPosition.lat])

        const isInPolygon = qyfw.features.some(item => {
            let polygon = window.$turf.polygon(item.geometry.coordinates)


            return window.$turf.booleanPointInPolygon(point, polygon)
        })

        if (isInPolygon) {
            isInEnterprise.value = true
            disposeFlowData.value = JSON.parse(JSON.stringify(disposeDataJson.categoryTypeData[0]))
        } else {
            isInEnterprise.value = false
            disposeFlowData.value = JSON.parse(JSON.stringify(disposeDataJson.categoryTypeData[1]))
        }

        curStep.value = 0
        curStepType.value = 0

        isShowDisposeFlowPopup.value = true
        curSelectType = null
        mapStore.setStartCustomWx(startClick)
    }
}

const cancelFlowDispose = () => {
    isShowDisposeFlowPopup.value = false
    curStep.value = 0
    curStepType.value = 0
    startClick = false
    disposeFlowData.value = []
    curSelectType = null
    mapStore.setStartCustomWx(startClick)
}

const nextStep = () => {
    curStep.value += 1
    curStepType.value = disposeFlowData.value?.processFlowData[curStep.value]?.type
}

const isSelectSignPoint = () => {
    isShowDisposeFlowPopup.value = false

    message?.close()
    message = null

    if (curStepType.value === 4) {
        message = ElNotification({
            title: '提示',
            showClose: true,
            message: '进行下一步应急措施，需选中闸坝才可下一步。',
            type: 'warning',
            duration: 0,
            offset: 100,
        })
    } else {
        message = ElNotification({
            title: '提示',
            showClose: true,
            message: '进行下一步应急措施，需选中闸阀才可下一步。',
            type: 'warning',
            duration: 0,
            offset: 100,
        })
    }
}

const affirmEquipmentClose = () => {
    isShowEquipmentClosePopup.value = false
    message?.close()
    message = null

    nextStep()
    isShowDisposeFlowPopup.value = true
}

let message = null

const isOverBtn = computed(() => disposeFlowData.value?.processFlowData ? curStep.value === disposeFlowData.value?.processFlowData.length - 1 : false)
const isNextStepBtn = computed(() => disposeFlowData.value?.processFlowData ? curStep.value < disposeFlowData.value?.processFlowData.length - 1 : false)

const isShowSelectBtn = computed(() => {
    return disposeFlowData.value?.processFlowData ?
        (curStepType.value === 4 || curStepType.value === 7)
        : false
})

window.$viewer.on(DC.MouseEventType.CLICK, viewerClick)

const clearAll = () => {
    mapStore.setShowPreLevel(false)
@@ -659,16 +810,23 @@
    dynamicVectorLayer?.clear()
    dynamicHtmlLayer?.clear()
    dynamicLineVectorLayer?.clear()
    qyWsLayer?.clear()

    isShowEquipmentClosePopup.value = false
    isShowDisposeFlowPopup.value = false
    message?.close()
    message = null
}

onUnmounted(() => {
    if (startClick) {
        EventBus.emit('restHandleDelChange', `3-3`)
        EventBus.emit('restHandleDelChange', `3-4`)
        EventBus.emit('restHandleDelChange', `4-1`)
        EventBus.emit('restHandleDelChange', `4-2`)
        EventBus.emit('restHandleDelChange', `4-3`)
        EventBus.emit('restHandleDelChange', `4-9`)
    }

    mapStore.setStartCustomWx(false)
    EventBus.off('wxEntityClick', wxEntityClick)

@@ -680,6 +838,9 @@
    dynamicLineVectorLayer && window.$viewer && window.$viewer.removeLayer(dynamicLineVectorLayer)
    qyWsLayer && window.$viewer && window.$viewer.removeLayer(qyWsLayer)

    window.$viewer.off(DC.MouseEventType.CLICK, viewerClick)


    tc = null
    track = null
    dynamicVectorLayer = null
@@ -690,39 +851,75 @@
</script>

<template>
    <div class="panel-container no-select">
        <el-carousel :autoplay="false" :interval="4000" type="card" height="360px">
            <el-carousel-item v-for="item, index in panelData.data" :key="index">
                <template #>
                    <div class="content-box flex f-d-c">
                        <div class="title">
                            {{ item.title }}
                        </div>
                        <div class="content h0 flex-1">
                            <div class="bg-box">
    <div>

        <div class="panel-container no-select">
            <el-carousel :autoplay="false" :interval="4000" type="card" height="360px">
                <el-carousel-item v-for="item, index in panelData.data" :key="index">
                    <template #>
                        <div class="content-box flex f-d-c">
                            <div class="title">
                                {{ item.title }}
                            </div>
                            <div class="content h0 flex-1">
                                <div class="bg-box">

                                </div>

                                <div class="describe-box">
                                    {{ item.content }}
                                </div>
                            </div>

                            <div class="describe-box">
                                {{ item.content }}
                            <div class="footer-btn" v-show="item.type == 'demo'">
                                <div class="start-btn" @click="schemeStart(item, 1)">
                                    开始模拟
                                </div>
                            </div>
                        </div>

                        <div class="footer-btn" v-show="item.type == 'demo'">
                            <div class="start-btn" @click="schemeStart(item, 1)">
                                开始模拟
                            <div class="footer-btn" v-show="item.type != 'demo'">
                                <div class="start-btn" @click="schemeStart(item, 2)">
                                    自定义风险源
                                </div>
                            </div>
                        </div>
                    </template>
                </el-carousel-item>
            </el-carousel>
        </div>

                        <div class="footer-btn" v-show="item.type != 'demo'">
                            <div class="start-btn" @click="schemeStart(item, 2)">
                                自定义风险源
                            </div>
                        </div>
                    </div>
                </template>
            </el-carousel-item>
        </el-carousel>
        <el-dialog class="dark-dialog" v-model="isShowDisposeFlowPopup" :append-to-body="true"
            :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" title="风险处置流程" width="500">
            <div>
                <div v-for="item, ind in disposeFlowData.processFlowData" :key="ind" v-show="ind === curStep">{{
                    item.message }}
                </div>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="cancelFlowDispose">取消</el-button>
                    <el-button type="primary" v-show="isShowSelectBtn" @click="isSelectSignPoint">{{ curStepType === 4 ?
                        '选择闸坝' : '选择闸阀' }}</el-button>

                    <el-button type="primary" @click="cancelFlowDispose" v-show="isOverBtn">结束</el-button>
                    <el-button :disabled="isShowSelectBtn" type="primary" @click="nextStep"
                        v-show="isNextStepBtn">下一步</el-button>
                </div>
            </template>
        </el-dialog>

        <el-dialog class="dark-dialog" v-model="isShowEquipmentClosePopup" :append-to-body="true"
            :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" title="" width="500">
            <div>
                {{ curStepType === 4 ? '确认关闭该闸坝？' : '确认关闭该闸阀？' }}
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="isShowEquipmentClosePopup = false">取消</el-button>
                    <el-button type="primary" @click="affirmEquipmentClose">确认</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>