feat:去除高亮

shuishen

2025-09-15 17a81d641608545682e3f79f7c6090cac48fe81a

 src/views/pd/components/dynamicPanel.vue

@@ -2,38 +2,29 @@
 * @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-09-11 22:59:25
 * @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, onBeforeUnmount, onUnmounted, watch } from 'vue'
import { spatialAnalysisPoint } from "@/api/space/space"

import { useMap } from 'store/map'
const mapStore = useMap()
import { usePointStore } from 'store/usepoint'
const pointStore = usePointStore()

onMounted(() => {
    pointStore.updateSharedData(1)
})

let lineTime = null
let timeOne = null
let timeTwo = null
let timeThree = null
let timeFour = null
let timeFive = null
let timeSix = null
const showPanel = defineModel('showPanel')
const emit = defineEmits(['closePanel'])

const panelData = reactive({
    data: [
@@ -42,53 +33,6 @@
            key: 1,
            title: '典型案例',
            content: '化工园区罐区泄漏事故: 化工园区某企业储罐泄漏，如不采取措施，将造成污染事故，影响到长江下游水质。',

            oneCentent: '2024年11月11日11时，化工园区某企业储罐泄漏。企业关闭前置阀门切断泄漏源，向罐内适量注水，抬高液位。',
            onePointPosition: {
                lng: 115.60652633,
                lat: 29.80893013,
                alt: 19
            },
            onetime: 0,

            twoContent: '启动应急池的使用，将泄漏的化学原料引导至应急池中。',
            twoPointPosition: {
                lng: 115.6074303,
                lat: 29.80929992,
                alt: 17
            },
            twotime: 5000,

            lineCenter: {
                lng: 115.60786813,
                lat: 29.80937902,
                alt: 30
            },
            linePosition: '115.60783535,29.80913790,30;115.60782622,29.80955698,30',
            lineTime: 5000,
            threeContent: '企业采取紧急措施后，还有部分松节油进入厂外雨水管网。',
            threePointPosition: {
                lng: 115.60782622,
                lat: 29.80955698,
                alt: 30
            },
            threetime: 15000,

            fourContent: '关闭园区闸坝，拦截污染水体。',
            fourPointPosition: {
                lng: 115.6269944,
                lat: 29.80695862,
                alt: 5
            },
            fourtime: 15000,

            fiveContent: '应急指挥部指导企业处理受污染废水, 监测公共应急池水质 ，根据水质情况分批次进入生化系统处理。',
            fivePointPosition: {
                lng: 115.62761928,
                lat: 29.80836521,
                alt: 7
            },
            fivetime: 20000,
        },

        {
@@ -101,628 +45,553 @@
})

let dynamicVectorLayer = new DC.VectorLayer('dynamicVectorLayer').addTo(window.$viewer)
let dynamicHtmlLayer = new DC.HtmlLayer('dynamicHtmlLayer').addTo(window.$viewer)
let dynamicLineVectorLayer = new DC.VectorLayer('dynamicLineVectorLayer').addTo(window.$viewer)
let customVectorLayer = new DC.HtmlLayer('customVectorLayer').addTo(window.$viewer)
let qyWsLayer = new DC.VectorLayer('qyWsLayer').addTo(window.$viewer)

let modelPosition = [
    {
        lng: 115.10640155,
        lat: 27.28121605
    },
    {
        lng: 115.10641953,
        lat: 27.28084006
    },
    {
        lng: 115.10641886,
        lat: 27.28026147
    },
    {
        lng: 115.10642486,
        lat: 27.27994712,
    },
    {
        lng: 115.10640964,
        lat: 27.27928393,
    },
    {
        lng: 115.10639803,
        lat: 27.27848014
    }
]

let positions = modelPosition.map(i => [i.lng, i.lat, i.ele || 64].join(',')).join(';')
let tc = new DC.TrackController(window.$viewer)
let track = new DC.Track(positions, 5)
track.setModel(VITE_APP_BASE + 'gltf/car.gltf', {
    show: true,
    scale: 0.0025,
    // nodeTransformations: {
    //   rotation: window.$Cesium.Quaternion.fromHeadingPitchRoll(window.$Cesium.Math.toRadians(0), window.$Cesium.Math.toRadians(0), window.$Cesium.Math.toRadians(0)),
    // }
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)
})

tc.addTrack(track)
let startClick = false
const clearAll = () => {
    EventBus.emit('restHandleDelChange', `3-2`)
    EventBus.emit('restHandleDelChange', `3-4`)

const synth = window.speechSynthesis

const speak = (msg, continueFun = () => { }) => {
    let u = new SpeechSynthesisUtterance()
    let voices = synth.getVoices()
    u.text = msg
    u.rate = 1.2
    let findObj = voices.some(voice => voice.lang == 'zh-CN')

    if (!findObj) {
        u.lang = 'zh-TW'
    }

    u.onend = () => {
        continueFun()
    }
    synth.speak(u)
}

const publicFun = (item) => {
    if (startClick) pointStore.updateSharedData(3)

    let fourCenter = DC.Position.fromObject(item.fourPointPosition)
    let fourCircle = new DC.Circle(fourCenter, 30)
    fourCircle.setStyle({
        material: new DC.CircleWaveMaterialProperty({
            color: DC.Color.fromRandom(),
            speed: 20,
            count: 5,
            gradient: 0.5
        })
    modelData.disposeData.forEach(i => {
        'selectedNum' in i && (i.selectedNum = 0)
        'selectedID' in i && (i.selectedID = [])
        'show' in i && (i.show = false)
    })
    dynamicVectorLayer.addOverlay(fourCircle)
    customData.forEach(j => j.disposeData.forEach(i => {
        'selectedNum' in i && (i.selectedNum = 0)
        'selectedID' in i && (i.selectedID = [])
        'show' in i && (i.show = false)
    }))

    let fourContent = new DC.DivIcon(
        new DC.Position(item.fourPointPosition.lng, item.fourPointPosition.lat, item.fourPointPosition.alt),
        `<div class="dynamic-map-popup">
                  <div class="content-wrap">
                    <div class="content">
                      <p>${item.fourContent}</p>
                    </div>
                  </div>
                  <div class="arrow"></div>
                </div>`
    )
    dynamicHtmlLayer.addOverlay(fourContent)

    window.$viewer.flyToPosition(new DC.Position(item.fourPointPosition.lng, item.fourPointPosition.lat, 400, 0, -90, 0), () => {
        speak(item.fourContent, () => {
            if (item.fivePointPosition) {
                let fiveCenter = DC.Position.fromObject(item.fivePointPosition)
                let fiveCircle = new DC.Circle(fiveCenter, 10)
                fiveCircle.setStyle({
                    material: new DC.CircleWaveMaterialProperty({
                        color: DC.Color.fromRandom(),
                        speed: 20,
                        count: 5,
                        gradient: 0.5
                    })
                })
                dynamicVectorLayer.addOverlay(fiveCircle)

                let fiveContent = new DC.DivIcon(
                    new DC.Position(item.fivePointPosition.lng, item.fivePointPosition.lat, item.fivePointPosition.alt),
                    `<div class="dynamic-event-profile-map-popup">
                      <div class="content-wrap">
                        <div class="content">
                          <p>${item.fiveContent}</p>
                        </div>
                      </div>
                      <div class="arrow"></div>
                    </div>`
                )
                dynamicHtmlLayer.addOverlay(fiveContent)
                // 执行对应的事件函数
                window.$viewer.flyToPosition(new DC.Position(item.fivePointPosition.lng, item.fivePointPosition.lat, 400, 0, -90, 0), () => {
                    speak(item.fiveContent, () => {
                        if (item.sixPointPosition) {
                            let sixCenter = DC.Position.fromObject(item.sixPointPosition)
                            let sixCircle = new DC.Circle(sixCenter, 10)
                            sixCircle.setStyle({
                                material: new DC.CircleWaveMaterialProperty({
                                    color: DC.Color.fromRandom(),
                                    speed: 20,
                                    count: 5,
                                    gradient: 0.5
                                })
                            })
                            dynamicVectorLayer.addOverlay(sixCircle)

                            let sixContent = new DC.DivIcon(
                                new DC.Position(item.sixPointPosition.lng, item.sixPointPosition.lat, 70),
                                `<div class="dynamic-map-popup">
                              <div class="content-wrap">
                                <div class="content">
                                  <p>${item.sixContent}</p>
                                </div>
                              </div>
                              <div class="arrow"></div>
                          </div>`
                            )
                            dynamicHtmlLayer.addOverlay(sixContent)
                            // 执行对应的事件函数
                            window.$viewer.flyToPosition(new DC.Position(item.sixPointPosition.lng, item.sixPointPosition.lat, 400, 0, -90, 0), () => {
                                speak(item.sixContent, () => {
                                    if (item.sevenPointPosition) {
                                        let sevenCenter = DC.Position.fromObject(item.sevenPointPosition)
                                        let sevenCircle = new DC.Circle(sevenCenter, 10)
                                        sevenCircle.setStyle({
                                            material: new DC.CircleWaveMaterialProperty({
                                                color: DC.Color.fromRandom(),
                                                speed: 20,
                                                count: 5,
                                                gradient: 0.5
                                            })
                                        })
                                        dynamicVectorLayer.addOverlay(sevenCircle)

                                        let sevenContent = new DC.DivIcon(
                                            new DC.Position(item.sevenPointPosition.lng, item.sevenPointPosition.lat, 70),
                                            `<div class="dynamic-event-profile-map-popup">
                              <div class="content-wrap">
                                <div class="content">
                                  <p>${item.sevenContent}</p>
                                </div>
                              </div>
                              <div class="arrow"></div>
                          </div>`
                                        )
                                        dynamicHtmlLayer.addOverlay(sevenContent)
                                        // 执行对应的事件函数
                                        window.$viewer.flyToPosition(new DC.Position(item.sevenPointPosition.lng, item.sevenPointPosition.lat, 400, 0, -90, 0), () => {
                                            speak(item.sevenContent)
                                        }, 3)
                                    }
                                })
                            }, 3)
                        }
                    })
                }, 3)
            }
        })
    }, 3)
    mapStore.setStartCustomWx(false)
    mapStore.setNeedSelectID([])
    customVectorLayer.clear()
    dynamicVectorLayer.clear()
    contentData.value = null
    isShowPdContent.value = false
    curContentInd.value = 0
}

const twoFun = (item, cb = () => { }) => {
    if (startClick) pointStore.updateSharedData(1)

    let twoCenter = DC.Position.fromObject(item.twoPointPosition)
    let twoCircle = new DC.Circle(twoCenter, 10)
    twoCircle.setStyle({
        material: new DC.CircleWaveMaterialProperty({
            color: DC.Color.fromRandom(),
            speed: 20,
            count: 5,
            gradient: 0.5
        })
    })
    dynamicVectorLayer.addOverlay(twoCircle)

    let twoContent = new DC.DivIcon(
        new DC.Position(item.twoPointPosition.lng, item.twoPointPosition.lat, item.twoPointPosition.alt),
        `<div class="dynamic-event-profile-map-popup">
          <div class="content-wrap">
            <div class="content">
              <p>${item.twoContent}</p>
              </div>
              </div>
              <div class="arrow"></div>
              </div>`
        // <p>特征污染物：${item.specificPollutant}</p>
    )
    dynamicHtmlLayer.addOverlay(twoContent)
    // 执行对应的事件函数
    window.$viewer.flyToPosition(new DC.Position(item.twoPointPosition.lng, item.twoPointPosition.lat, 400, 0, -90, 0), () => {
        speak(item.twoContent, () => {
            cb()
        })
    }, 3)
}

const createLinePath = (item, cb = () => { }) => {
    if (item.linePosition) {
        let polyline = new DC.Polyline(item.linePosition)
        polyline.setStyle({
            width: 20,
            material: new DC.PolylineImageTrailMaterialProperty({
                color: DC.Color.RED,
                speed: 20,
                image: VITE_APP_BASE + 'img/mapicon/right.png',
                repeat: { x: 5, y: 1 }
            }),
            clampToGround: false
        })

        dynamicLineVectorLayer.addOverlay(polyline)
    } else {
        if (startClick) pointStore.updateSharedData(2)

        let threeCenter = DC.Position.fromObject(item.threePointPosition)
        let threeCircle = new DC.Circle(threeCenter, 30)
        threeCircle.setStyle({
            material: new DC.CircleWaveMaterialProperty({
                color: DC.Color.fromRandom(),
                speed: 20,
                count: 5,
                gradient: 0.5
            })
        })
        dynamicVectorLayer.addOverlay(threeCircle)
    }

    let threeContent = new DC.DivIcon(
        new DC.Position(item.threePointPosition.lng, item.threePointPosition.lat, item.threePointPosition.alt),
        `<div class="dynamic-event-profile-map-popup">
          <div class="content-wrap">
            <div class="content">
              <p>${item.threeContent}</p>
              </div>
              </div>
              <div class="arrow"></div>
              </div>`
        // <p>特征污染物：${item.specificPollutant}</p>
    )
    dynamicHtmlLayer.addOverlay(threeContent)
    // 执行对应的事件函数

    window.$viewer.flyToPosition(new DC.Position(item.threePointPosition.lng, item.threePointPosition.lat, 400, 0, -90, 0), () => {
        speak(item.threeContent, () => {
            cb()
        })
    }, 3)
}
const parseLineString = (lineString) => {
    // 移除 "LINESTRING(" 和 ")"
    const cleanedString = lineString.replace(/^LINESTRING\(/, '').replace(/\)$/, '')

    // 使用逗号分割成坐标对字符串数组
    const coordinatePairsString = cleanedString.split(',')

    // 将每个坐标对字符串转换为数组，并解析成浮点数
    const coordinatesArray = coordinatePairsString.map(pair => {
        const [lon, lat] = pair.trim().split(' ')
        return [parseFloat(lon), parseFloat(lat)]
    })

    return coordinatesArray
}

let publicEventHandle = {
    oneCentent: '某某年某某月某某日，企业发生化学原料危害品泄漏。',
    onePointPosition: {
        lng: null,
        lat: null,
        alt: null
    },
    onetime: 0,

    twoContent: '关闭所有可能外溢事故污水的外排口，利用企业自身的围堰、应急池等环境应急防控设施，将污水控制在企业厂区内部。',
    twoPointPosition: {
        lng: null,
        lat: null,
        alt: null
    },
    twotime: 5000,

    threeContent: '通过专用管道或临时转输措施，与相邻企业应急池、园区公共应急池等互联互通，拦截处置事故污水。',
    threePointPosition: {
        lng: null,
        lat: null,
        alt: null
    },
    threetime: 15000,

    fourContent: '利用化工集中区内的坑塘、河道、沟渠以及周边水系等，构建环境应急防控空间，对进出园区的水体实施封闭或分段管控。',
    fourPointPosition: {
        lng: null,
        lat: null,
        alt: null
    },
    fourtime: 15000,
}

const wxEntityClick = (e) => {
    const { attrParams } = e.overlay
    clearAll()
    pointStore.updateSharedData(1)
    mapStore.setShowPreLevel(true)

    spatialAnalysisPoint({
        lng: attrParams.lng,
        lat: attrParams.lat
    }).then(res => {
        let arr = res.data.data

        publicEventHandle.onePointPosition = {
            lng: attrParams.lng,
            lat: attrParams.lat,
            alt: 16
        }

        arr.forEach(item => {
            if (item.preLevel == 1) {
                publicEventHandle.twoPointPosition = {
                    lng: item.lng,
                    lat: item.lat,
                    alt: item.ele
                }
            }
            if (item.preLevel == 2 && item.geom) {
                var line = window.$turf.lineString(parseLineString(item.geom))
                var pt = window.$turf.point([attrParams.lng, attrParams.lat])
                var snapped = window.$turf.nearestPointOnLine(line, pt, { units: "miles" })
                publicEventHandle.threePointPosition = {
                    lng: snapped.geometry.coordinates[0],
                    lat: snapped.geometry.coordinates[1],
                    alt: 30
                }
            }

            if (item.preLevel == 3) {
                publicEventHandle.fourPointPosition = {
                    lng: item.lng,
                    lat: item.lat,
                    alt: item.ele
                }
            }
        })

        timeOne = setTimeout(() => {
            function oneLoad () {
                let oneCenter = DC.Position.fromObject(publicEventHandle.onePointPosition)
                let oneCircle = new DC.Circle(oneCenter, 20)
                oneCircle.setStyle({
                    material: new DC.CircleWaveMaterialProperty({
                        color: DC.Color.RED.withAlpha(0.9),
                        speed: 20,
                        count: 5,
                        gradient: 0.5
                    })
                })
                dynamicVectorLayer.addOverlay(oneCircle)

                let oneCentent = new DC.DivIcon(
                    new DC.Position(publicEventHandle.onePointPosition.lng, publicEventHandle.onePointPosition.lat, publicEventHandle.onePointPosition.alt),
                    `<div class="dynamic-map-popup">
          <div class="content-wrap">
            <div class="content">
              <p>${publicEventHandle.oneCentent}</p>
              </div>
              </div>
              <div class="arrow"></div>
              </div>`
                    // <p>特征污染物：${publicEventHandle.specificPollutant}</p>
                )
                dynamicHtmlLayer.addOverlay(oneCentent)

                speak(publicEventHandle.oneCentent, () => {
                    twoFun(publicEventHandle, () => {
                        createLinePath(publicEventHandle, () => {
                            publicFun(publicEventHandle)
                        })
                    })
                })
            }
            if (publicEventHandle.showModel) {
                oneLoad()
            } else {
                window.$viewer.flyToPosition(new DC.Position(publicEventHandle.onePointPosition.lng, publicEventHandle.onePointPosition.lat, 400, 0, -90, 0), () => {
                    oneLoad()
                }, 3)
            }
        }, publicEventHandle.onetime)
    })
}

EventBus.on('wxEntityClick', wxEntityClick)


let message = null

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

    if (type == 1) {
        if (startClick) {
            EventBus.emit('restHandleDelChange', `4-1`)
            EventBus.emit('restHandleDelChange', `4-2`)
            EventBus.emit('restHandleDelChange', `4-3`)
            EventBus.emit('restHandleDelChange', `4-9`)
        }
    if (type === 1) {
        contentData.value = modelData
        contentData.value.disposeData[0].show = true
        curContentInd.value = 0
        isShowPdContent.value = true

        // 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)
        let oneCenter = DC.Position.fromObject({
            lng: contentData.value?.incidentSiteLng,
            lat: contentData.value?.incidentSiteLat,
            alt: contentData.value?.incidentSiteAlt,
        })
        let oneCircle = new DC.Circle(oneCenter, 20)
        oneCircle.setStyle({
            material: new DC.CircleWaveMaterialProperty({
                color: DC.Color.RED.withAlpha(0.9),
                speed: 20,
                count: 5,
                gradient: 0.5
            })
        })
        dynamicVectorLayer.addOverlay(oneCircle)
    } else {
        customData.forEach(item => {
            let iconEl = `
                  <div class="map-icon">
                    <img src="${item.backgroundIcon}">
                  </div>
                  `
            let divIcon = new DC.DivIcon(
                new DC.Position(item.incidentSiteLng, item.incidentSiteLat, item.incidentSiteAlt || 64),
                `<div class="public-map-popup fxy-larger">
                    ${iconEl}
                  </div>`

        if (item.showModel) {
            window.$viewer.flyToPosition("115.10587903,27.28374884,400,0,-90", () => {
                track.setModel(VITE_APP_BASE + 'gltf/car.gltf', {
                    show: true,
                    scale: 0.0025,
                    // nodeTransformations: {
                    //   rotation: window.$Cesium.Quaternion.fromHeadingPitchRoll(window.$Cesium.Math.toRadians(0), window.$Cesium.Math.toRadians(0), window.$Cesium.Math.toRadians(0)),
                    // }
                })
            )

                tc.play()
                tc.viewTrack(track, {
                    mode: '2',
                    pitch: -45,
                    range: 400
                })
            divIcon.attrParams = item

            divIcon.on(DC.MouseEventType.CLICK, (e) => {
                contentData.value = e.overlay.attrParams
                contentData.value.disposeData[0].show = true
                curContentInd.value = 0
                isShowPdContent.value = true

                customVectorLayer.clear()
                message?.close()
                message = null
            })

            customVectorLayer.addOverlay(divIcon)
        })

        message = ElNotification({
            title: '提示',
            showClose: true,
            message: '请选择事发地。',
            type: 'warning',
            duration: 0,
            offset: 100,
        })
    }
}

const isShowPdContent = ref(false)

const contentData = ref(null)
const curContentInd = ref(0)

const isShowNextBtn = computed(() => {
    if (contentData.value === null) return false
    return curContentInd.value < contentData.value?.disposeData.length - 1
})

const isDisabledNextBtn = computed(() => {
    if (contentData.value === null) return false
    const curItem = contentData.value?.disposeData[curContentInd.value]
    return curItem.selectedNum < curItem.isSelectNum
})

const isShowSelectBtn = computed(() => {
    if (contentData.value === null) return false

    const isShow = contentData.value?.disposeData[curContentInd.value]?.isNeedHandle

    mapStore.setStartCustomWx(isShow)
    return isShow
})

const isShowSelectText = computed(() => {
    if (contentData.value === null) return ''

    return contentData.value?.disposeData[curContentInd.value]?.buttonText
})

const cancelText = computed(() => {
    if (contentData.value === null) return ''

    if (contentData.value?.disposeData.length - 1 === curContentInd.value) {
        return '结束模拟'
    } else {
        return '取消模拟'
    }
})

const wxEntityClick = (e) => {
    if (contentData.value === null) return ''

    const clickId = e.overlay.attrParams.id

    let flag = contentData.value?.disposeData[curContentInd.value]?.needSelectID.some(i => i == clickId)
    let isSelectedCur = contentData.value?.disposeData[curContentInd.value]?.selectedID.some(i => i == clickId)

    if (isSelectedCur) {
        ElMessage({
            message: '已选择当前设施请重新选择。',
            type: 'warning',
        })

        return
    }

    if (flag) {
        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',
            })
        }

        timeOne = setTimeout(() => {
            function oneLoad () {
                let oneCenter = DC.Position.fromObject(item.onePointPosition)
                let oneCircle = new DC.Circle(oneCenter, 20)
                oneCircle.setStyle({
                    material: new DC.CircleWaveMaterialProperty({
                        color: DC.Color.RED.withAlpha(0.9),
                        speed: 20,
                        count: 5,
                        gradient: 0.5
                    })
                })
                dynamicVectorLayer.addOverlay(oneCircle)

                let oneCentent = new DC.DivIcon(
                    new DC.Position(item.onePointPosition.lng, item.onePointPosition.lat, item.onePointPosition.alt),
                    `<div class="dynamic-map-popup">
          <div class="content-wrap">
            <div class="content">
              <p>${item.oneCentent}</p>
              </div>
              </div>
              <div class="arrow"></div>
              </div>`
                    // <p>特征污染物：${item.specificPollutant}</p>
                )
                dynamicHtmlLayer.addOverlay(oneCentent)

                speak(item.oneCentent, () => {
                    if (item.key == 2) {
                        twoFun(item, () => {
                            createLinePath(item, () => {
                                publicFun(item)
                            })
                        })
                    } else if (item.key == 1) {
                        twoFun(item, () => {
                            createLinePath(item, () => {
                                publicFun(item)
                            })
                        })
                    } else {
                        twoFun(item, () => {
                            createLinePath(item, () => {
                                publicFun(item)
                            })
                        })
                    }
                })
            }
            if (item.showModel) {
                oneLoad()
            } else {
                window.$viewer.flyToPosition(new DC.Position(item.onePointPosition.lng, item.onePointPosition.lat, 400, 0, -90, 0), () => {
                    oneLoad()
                }, 3)
            }
        }, item.onetime)

        startClick = false
        mapStore.setStartCustomWx(startClick)
    } else {
        startClick = true
        mapStore.setStartCustomWx(startClick)
        EventBus.emit('restHandleCheckChange', `4`)
        ElMessage({
            message: '选择错误,请重新选择。',
            type: 'warning',
        })
    }
}

const clearAll = () => {
    mapStore.setShowPreLevel(false)
    window.speechSynthesis.cancel()
EventBus.on('wxEntityClick', wxEntityClick)

    lineTime && (clearTimeout(lineTime), lineTime = null)
    timeOne && (clearTimeout(timeOne), timeOne = null)
    timeTwo && (clearTimeout(timeTwo), timeTwo = null)
    timeThree && (clearTimeout(timeThree), timeThree = null)
    timeFour && (clearTimeout(timeFour), timeFour = null)
    timeFive && (clearTimeout(timeFive), timeFive = null)
    timeSix && (clearTimeout(timeSix), timeSix = null)
const modelData = {
    title: '典型情景模拟',
    incidentSiteLng: 115.6129562,
    incidentSiteLat: 29.80862305,
    incidentSiteAlt: 8,

    track.setModel(VITE_APP_BASE + 'gltf/car.gltf', {
        show: false,
        scale: 0.0025,
        // nodeTransformations: {
        //   rotation: window.$Cesium.Quaternion.fromHeadingPitchRoll(window.$Cesium.Math.toRadians(0), window.$Cesium.Math.toRadians(0), window.$Cesium.Math.toRadians(0)),
        // }
    })
    disposeData: [
        {
            label: '事故概况',
            content: '2024年X月X日X时，某企业二甲苯储罐泄漏。',
            isNeedHandle: false,
            show: false,
        },
        {
            levelTitle: '企业级应急处置',
            content: '企业关闭前置阀门，切断泄漏源；根据泄漏情况，向罐内适量注水，抬高液位，形成水垫层，缓解险情，配合堵漏。',
            isNeedHandle: false,
            show: false,
        },
        {
            useLayerID: '3-2',
            content: '启动应急池的使用，将泄漏的化学原料引导至应急池中。',
            isNeedHandle: true,
            buttonText: '选择应急池',
            isSelectNum: 1,
            selectedNum: 0,
            needSelectID: ['1875105484274749441'],
            selectedID: [],
            show: false,
        },
        {
            levelTitle: '企间级应急处置',
            useLayerID: '3-2',
            content: '若该公司应急池容量不足，可通过移动泵或槽罐车将事故废水转移至临近企业事故应急池或污水处理厂事故应急池。',
            isNeedHandle: true,
            buttonText: '选择应急池',
            isSelectNum: 1,
            selectedNum: 0,
            needSelectID: ['1875105469779234817'],
            selectedID: [],
            show: false,
        },
        {
            levelTitle: '园区级应急处置',
            useLayerID: '3-4',
            content: '立即关闭园区排洪渠下游闸坝，拦截污染水体。',
            isNeedHandle: true,
            buttonText: '选择闸坝',
            isSelectNum: 1,
            selectedNum: 0,
            needSelectID: ['1875105459276697601'],
            selectedID: [],
            show: false,
        },

    dynamicVectorLayer?.clear()
    dynamicHtmlLayer?.clear()
    dynamicLineVectorLayer?.clear()
    qyWsLayer?.clear()
        {
            useLayerID: '3-4',
            content: '立即关闭园区上游闸坝，拦截清水，减轻应急压力。',
            isNeedHandle: true,
            buttonText: '选择闸坝',
            isSelectNum: 1,
            selectedNum: 0,
            needSelectID: ['1922914799476486145'],
            selectedID: [],
            show: false,
        },

        {
            useLayerID: '3-2',
            content: '开启园区事故应急池将拦截的污水转输至池内。',
            isNeedHandle: true,
            buttonText: '选择应急池',
            isSelectNum: 1,
            selectedNum: 0,
            needSelectID: ['1922914788973948929'],
            selectedID: [],
            show: false,
        },

        {
            content: '将拦截废水从应急池中转移至污水处理厂进行处置，同时在排口下游展开应急监测，确保废水没有进入周边水系。',
            isNeedHandle: false,
            show: false,
        }
    ]
}

onUnmounted(() => {
    if (startClick) {
        EventBus.emit('restHandleDelChange', `4-1`)
        EventBus.emit('restHandleDelChange', `4-2`)
        EventBus.emit('restHandleDelChange', `4-3`)
        EventBus.emit('restHandleDelChange', `4-9`)
const customData = [
    {
        title: '自定义情景模拟',
        incidentSiteLng: 115.61393792,
        incidentSiteLat: 29.79786228,
        incidentSiteAlt: 11.98,
        backgroundIcon: VITE_APP_BASE + 'img/mapicon/sfd.png',
        disposeData: [
            {
                label: '事故概况',
                content: '2025年X月X日X时，危化品运输车辆沿理文路前往危化品停车场时，途经危化品停车场桥梁时，为躲避行人发生侧翻，大量盐酸流入园区南排洪渠中，如不采取措施，将造成污染事故，影响到赤湖水质，进而可能影响到下游长江水质。',
                isNeedHandle: false,
                show: false,
            },
            {
                content: '就近调集园区企业应急物资库，收集到氢氧化钠1吨（预计用时30分钟）',
                isNeedHandle: false,
                show: false,
            },
            {
                content: '立即在危化品停车场桥上游使用沙袋或挖机进行临时筑坝，拦截上游来水',
                isNeedHandle: false,
                show: false,
            },
            {
                content: '在荣联环保桥下游使用沙袋或挖机进行临时筑坝，杜绝污染团流入赤湖，在两道临时闸坝之间形成的蓄污空间内投药处置',
                isNeedHandle: false,
                show: false,
            },

            {
                useLayerID: '3-4',
                content: '处理完成后打开上游临时闸坝释放清水。',
                isNeedHandle: true,
                buttonText: '选择闸坝',
                isSelectNum: 2,
                selectedNum: 0,
                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: '选择应急池',
                isSelectNum: 1,
                selectedNum: 0,
                needSelectID: ['1922914788973948929'],
                selectedID: [],
                show: false,
            },

            {
                content: '将拦截废水从应急池中转移至污水处理厂进行处置，同时在排口下游展开应急监测，确保废水没有进入周边水系。',
                isNeedHandle: false,
                show: false,
            }
        ]
    },

    {
        title: '自定义情景模拟',
        incidentSiteLng: 115.61264639,
        incidentSiteLat: 29.81692806,
        incidentSiteAlt: 19,
        backgroundIcon: VITE_APP_BASE + 'img/mapicon/sfd.png',
        disposeData: [
            {
                label: '事故概况',
                content: '2025年X月X日X时，某企业物料运输管道发生泄漏。',
                isNeedHandle: false,
                show: false,
            },
            {
                levelTitle: '企业级应急处置',
                content: '企业通知供应企业停泵，关闭进入公司厂界的盐酸管道阀门；根据泄漏情况，用沙土筑成临时围堰，将盐酸圈在围堰内，然后用氢氧化钠/液碱进行中和处理。用泡沫或其它有效覆盖物进行覆盖，对泄漏区域用雾状水喷淋稀释抑制其挥发，防止泄漏盐酸挥发殃及周围建筑物及人员。',
                isNeedHandle: false,
                show: false,
            },
            {
                useLayerID: '3-2',
                content: '启动应急池的使用，喷淋水将泄漏的化学原料导入厂区事故应急池。',
                isNeedHandle: true,
                buttonText: '选择应急池',
                isSelectNum: 1,
                selectedNum: 0,
                needSelectID: ['1875105480151748609'],
                selectedID: [],
                show: false,
            },
            {
                levelTitle: '园区级应急处置',
                useLayerID: '3-4',
                content: '立即关闭园区排洪渠下游闸坝，拦截污染水体。',
                isNeedHandle: true,
                buttonText: '选择闸坝',
                isSelectNum: 1,
                selectedNum: 0,
                needSelectID: ['1875105459276697601'],
                selectedID: [],
                show: false,
            },

            {
                useLayerID: '3-4',
                content: '立即关闭园区上游闸坝，拦截清水，减轻应急压力。',
                isNeedHandle: true,
                buttonText: '选择闸坝',
                isSelectNum: 1,
                selectedNum: 0,
                needSelectID: ['1922914799476486145'],
                selectedID: [],
                show: false,
            },

            {
                useLayerID: '3-2',
                content: '开启园区事故应急池将拦截的污水转输至池内。',
                isNeedHandle: true,
                buttonText: '选择应急池',
                isSelectNum: 1,
                selectedNum: 0,
                needSelectID: ['1922914788973948929'],
                selectedID: [],
                show: false,
            },

            {
                content: '将拦截废水从应急池中转移至污水处理厂进行处置，同时在排口下游展开应急监测，确保废水没有进入周边水系。',
                isNeedHandle: false,
                show: false,
            }
        ]
    }
]

let curLoadLayerId = null

const nextStep = () => {
    if (curLoadLayerId) {
        EventBus.emit('restHandleDelChange', curLoadLayerId)
    }

    mapStore.setStartCustomWx(false)
    EventBus.off('wxEntityClick', wxEntityClick)
    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)
    } else {
        mapStore.setNeedSelectID([])
    }
}

const cancelFlowDispose = () => {
    clearAll()
}

    tc.clear()
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)
    dynamicHtmlLayer && window.$viewer && window.$viewer.removeLayer(dynamicHtmlLayer)
    dynamicLineVectorLayer && window.$viewer && window.$viewer.removeLayer(dynamicLineVectorLayer)
    customVectorLayer && window.$viewer && window.$viewer.removeLayer(customVectorLayer)
    qyWsLayer && window.$viewer && window.$viewer.removeLayer(qyWsLayer)

    tc = null
    track = null
    dynamicVectorLayer = null
    dynamicHtmlLayer = null
    dynamicLineVectorLayer = null
    customVectorLayer = null
    qyWsLayer = null

    EventBus.off('wxEntityClick', wxEntityClick)
})
</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 v-show="showPanel" 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 v-show="isShowPdContent" class="right-container">
            <div class="title">
                {{ contentData?.title }}
            </div>

            <div class="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>
                </template>
            </el-carousel-item>
        </el-carousel>
                    <div :class="{ 'text-orange': ind === curContentInd }">
                        {{ item.content }}
                    </div>
                </div>
            </div>

            <div class="footer-btn">
                <el-button @click="cancelFlowDispose">{{ cancelText }}</el-button>
                <el-button :disabled="isDisabledNextBtn" type="primary" @click="nextStep"
                    v-show="isShowNextBtn">下一步</el-button>
            </div>
        </div>
    </div>
</template>

@@ -893,4 +762,51 @@
        background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
    }
}

.right-container {
    padding: 10px;
    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;
    }

    .content {
        margin: 10px 0;
        flex: 1;

        &>div {
            text-indent: 2em;
            line-height: 32px;
        }

        .level-title {
            text-indent: 0;
        }

        .text-orange {
            color: orange;
        }
    }

    .footer-btn {
        display: flex;
        flex-direction: row;
        justify-content: center;

        ::v-deep(.el-button) {
            width: 96px;
        }
    }
}
</style>