feat:去除高亮

shuishen

2025-09-15 17a81d641608545682e3f79f7c6090cac48fe81a

 src/views/pd/components/dynamicPanel.vue

@@ -2,770 +2,811 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2024-11-09 15:41:35
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-12-17 19:00:23
 * @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
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 showPanel = defineModel('showPanel')
const emit = defineEmits(['closePanel'])
import { onUnmounted } from 'vue'

let lineTime = null
let timeOne = null
let timeTwo = null
let timeThree = null
let timeFour = null
let timeFive = null
let timeSix = null

const panelData = reactive({
  data: [
    {
      key: 1,
      title: '典型案例1',
      content: '南片区松节油储罐区泄漏事故: 南片区某企业松节油储罐泄漏，如不采取措施，将造成污染事故，影响到赣江下游水质。',
    data: [
        {
            type: 'demo',
            key: 1,
            title: '典型案例',
            content: '化工园区罐区泄漏事故: 化工园区某企业储罐泄漏，如不采取措施，将造成污染事故，影响到长江下游水质。',
        },

      oneCentent: '2024年11月11日11时，南片区某公司松节油储罐泄漏。企业关闭前置阀门切断泄漏源，向罐内适量注水，抬高液位。',
      onePointPosition: {
        lng: 115.10175740,
        lat: 27.27356477
      },
      onetime: 0,

      twoContent: '启动应急池的使用，将泄漏的松节油引导至应急池中。',
      twoPointPosition: {
        lng: 115.10198913,
        lat: 27.27343615
      },
      twotime: 5000,

      lineCenter: {
        lng: 115.10343807,
        lat: 27.27256126
      },
      linePosition: '115.10341051,27.27251643,64;115.10357817,27.27278003,64',
      lineTime: 5000,

      threeContent: '企业采取紧急措施后，还有部分松节油进入厂外雨水管网。',
      threePointPosition: {
        lng: 115.10343807,
        lat: 27.27256126
      },
      threetime: 15000,

      fourContent: '关闭绿源污水处理厂旁雨水排口，拦截污染水体。',
      fourPointPosition: {
        lng: 115.10870094,
        lat: 27.27185349
      },
      fourtime: 15000,

      fiveContent: '启用绿源污水处理厂事故应急池，将已拦截废水泵入应急池。',
      fivePointPosition: {
        lng: 115.10814596,
        lat: 27.27257473
      },
      fivetime: 20000,

      sixContent: '应急指挥部指导企业处理受污染废水, 监测公共应急池水质 ，根据水质情况分批次进入生化系统处理。',
      sixPointPosition: {
        lng: 115.10843364,
        lat: 27.27320219
      },
      sixtime: 25000,
    },

    {
      key: 2,
      title: '典型案例2',
      content: '北片区碱类腐蚀性物质泄漏事故: 北片区某企业在生产过程中操作失误，大量含碱废水泄漏，如不采取措施，将造成污染事故，影响到赣江下游水质。',

      oneCentent: '2024年09月16日14时，北片区某公司在生产过程中操作失误，大量含碱废水泄漏。企业关闭前置阀门，切断泄漏源。',
      onePointPosition: {
        lng: 115.10467136,
        lat: 27.29415383
      },
      onetime: 0,

      twoContent: '企业通过砂土等筑堤堵截泄漏废水，并引流至事故应急池。',
      twoPointPosition: {
        lng: 115.10545440,
        lat: 27.29439753
      },
      twotime: 10000,

      lineCenter: {
        lng: 115.10627858,
        lat: 27.29434439
      },
      linePosition: '115.10627726,27.29408853,64;115.10627703,27.29456132,64',
      lineTime: 5000,

      threeContent: '企业通过紧急处理，还有部分事故废水进入厂外雨水管网。',
      threePointPosition: {
        lng: 115.10627858,
        lat: 27.29434439
      },
      threetime: 10000,

      fourContent: '园区关闭北区雨水排口闸阀(拟建)，拦截污染水体。',
      fourPointPosition: {
        lng: 115.10629605,
        lat: 27.29785816
      },
      fourtime: 10000,

      fiveContent: '园区启用北区公共应急池（拟建），将已拦截废水泵入应急池。',
      fivePointPosition: {
        lng: 115.106600,
        lat: 27.296891
      },
      fivetime: 15000,

      sixContent: '将拦截废水从应急池中通过北区污水提升泵站以及金工大道污水管网转移至绿源污水处理厂进行处置。',
      sixPointPosition: {
        lng: 115.10814596,
        lat: 27.27257473
      },
      sixtime: 20000,

      sevenContent: '排口下游展开应急监测，确保废水没有进入周边水系。',
      sevenPointPosition: {
        lng: 115.10542509,
        lat: 27.29924475
      },
      seventime: 25000
    },

    {
      key: 3,
      title: '典型案例3',
      content: '危险化学品运输事故: 北片区某企业的危化品运输车辆发生侧翻，大量盐酸流至路面，如不采取措施，将造成污染事故，影响到赣江下游水质。',

      showModel: true,


      oneCentent: '2024年09月16日14时，北片区某公司的危化品运输车辆发生侧翻，大量盐酸流至路面。',
      onePointPosition: {
        lng: 115.10639803,
        lat: 27.27848014
      },
      onetime: 10000,

      twoContent: '立即关闭雨水闸阀。',
      twoPointPosition: {
        lng: 115.10665321,
        lat: 27.27720681
      },
      twotime: 13000,

      threeContent: '调度金龙水库清水，稀释污染团。',
      threePointPosition: {
        lng: 115.10488545,
        lat: 27.27678110
      },
      threetime: 13000,

      fourContent: '转输至江西粤鹏环保高新技术开发有限公司事故应急池。',
      fourPointPosition: {
        lng: 115.10499264,
        lat: 27.28048591
      },
      fourtime: 18000,

      fiveContent: '转输至江西腾龙源环保科技有限公司事故应急池。',
      fivePointPosition: {
        lng: 115.10332118,
        lat: 27.27831698
      },
      fivetime: 23000,

      sixContent: '根据应急监测方案，立即开展监测，确保污染废水未进入外界水体。',
      sixPointPosition: {
        lng: 115.10665321,
        lat: 27.27720681
      },
      sixtime: 28000,
    },
  ]
        {
            type: 'custom',
            key: 2,
            title: '自定义案例',
            content: '自定义风险源：化工园区某企业发生化学原料危害品泄漏，如不采取措施，将造成污染事故，影响到长江下游水质',
        },
    ]
})

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)
const clearAll = () => {
    EventBus.emit('restHandleDelChange', `3-2`)
    EventBus.emit('restHandleDelChange', `3-4`)

const synth = window.speechSynthesis
    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)
    }))

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

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

  u.onend = () => {
    continueFun()
  }
  synth.speak(u)
    mapStore.setStartCustomWx(false)
    mapStore.setNeedSelectID([])
    customVectorLayer.clear()
    dynamicVectorLayer.clear()
    contentData.value = null
    isShowPdContent.value = false
    curContentInd.value = 0
}

const publicFun = (item) => {
  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
    })
  })
  dynamicVectorLayer.addOverlay(fourCircle)
let message = null

  let fourContent = new DC.DivIcon(
    new DC.Position(item.fourPointPosition.lng, item.fourPointPosition.lat, 70),
    `<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)
const schemeStart = (item, type) => {
    emit('closePanel')
    clearAll()

  window.$viewer.flyToPosition(new DC.Position(item.fourPointPosition.lng, item.fourPointPosition.lat, 400, 0, -90, 0), () => {
    speak(item.fourContent, () => {
      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
    if (type === 1) {
        contentData.value = modelData
        contentData.value.disposeData[0].show = true
        curContentInd.value = 0
        isShowPdContent.value = true

        let oneCenter = DC.Position.fromObject({
            lng: contentData.value?.incidentSiteLng,
            lat: contentData.value?.incidentSiteLat,
            alt: contentData.value?.incidentSiteAlt,
        })
      })
      dynamicVectorLayer.addOverlay(fiveCircle)

      let fiveContent = new DC.DivIcon(
        new DC.Position(item.fivePointPosition.lng, item.fivePointPosition.lat, 70),
        `<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(),
        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(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)
}

const twoFun = (item, cb = () => { }) => {
  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, 70),
    `<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 = () => { }) => {
  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)

  let threeContent = new DC.DivIcon(
    new DC.Position(item.threePointPosition.lng, item.threePointPosition.lat, 70),
    `<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 schemeStart = (item) => {
  emit('closePanel')
  clearAll()

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

  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, 70),
        `<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, () => {
            publicFun(item)
          })
        }
      })
    }
    if (item.showModel) {
      oneLoad()
        dynamicVectorLayer.addOverlay(oneCircle)
    } else {
      window.$viewer.flyToPosition(new DC.Position(item.onePointPosition.lng, item.onePointPosition.lat, 400, 0, -90, 0), () => {
        oneLoad()
      }, 3)
        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>`

            )

            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,
        })
    }
  }, item.onetime)
}

const clearAll = () => {
  window.speechSynthesis.cancel()
const isShowPdContent = ref(false)

  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 contentData = ref(null)
const curContentInd = ref(0)

  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)),
    // }
  })
const isShowNextBtn = computed(() => {
    if (contentData.value === null) return false
    return curContentInd.value < contentData.value?.disposeData.length - 1
})

  dynamicVectorLayer.clear()
  dynamicHtmlLayer.clear()
  dynamicLineVectorLayer.clear()
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',
            })
        }
    } else {
        ElMessage({
            message: '选择错误,请重新选择。',
            type: 'warning',
        })
    }
}

onUnmounted(() => {
  clearAll()
EventBus.on('wxEntityClick', wxEntityClick)

  tc.clear()
  dynamicVectorLayer && window.$viewer && window.$viewer.removeLayer(dynamicVectorLayer)
  dynamicHtmlLayer && window.$viewer && window.$viewer.removeLayer(dynamicHtmlLayer)
  dynamicLineVectorLayer && window.$viewer && window.$viewer.removeLayer(dynamicLineVectorLayer)
const modelData = {
    title: '典型情景模拟',
    incidentSiteLng: 115.6129562,
    incidentSiteLat: 29.80862305,
    incidentSiteAlt: 8,

  tc = null
  track = null
  dynamicVectorLayer = null
  dynamicHtmlLayer = null
  dynamicLineVectorLayer = null
    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,
        },

        {
            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,
        }
    ]
}

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)
    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()
}

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)
    qyWsLayer && window.$viewer && window.$viewer.removeLayer(qyWsLayer)

    dynamicVectorLayer = 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>
        <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="footer-btn" v-show="item.type == 'demo'">
                                <div class="start-btn" @click="schemeStart(item, 1)">
                                    开始模拟
                                </div>
                            </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>
        </div>

        <div v-show="isShowPdContent" class="right-container">
            <div class="title">
              {{ item.title }}
                {{ contentData?.title }}
            </div>
            <div class="content h0 flex-1">
              <div class="bg-box">

              </div>

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

            <div class="footer-btn">
              <div class="start-btn" @click="schemeStart(item)">
                开始模拟
              </div>
                <el-button @click="cancelFlowDispose">{{ cancelText }}</el-button>
                <el-button :disabled="isDisabledNextBtn" type="primary" @click="nextStep"
                    v-show="isShowNextBtn">下一步</el-button>
            </div>
          </div>
        </template>
      </el-carousel-item>
    </el-carousel>
  </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.panel-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 960px;
  height: 440px;
  pointer-events: all;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 960px;
    height: 440px;
    pointer-events: all;

  ::v-deep(.el-carousel) {
    .el-carousel__item {
      background: #2E4274;
    ::v-deep(.el-carousel) {
        .el-carousel__item {
            background: #2E4274;

      .content-box {
        padding: 10px 0;
        width: 100%;
        height: 100%;
        color: #fff;
            .content-box {
                padding: 10px 0;
                width: 100%;
                height: 100%;
                color: #fff;

        .title {
          padding-left: 40px;
          height: 80px;
          line-height: 80px;
          font-size: 44px;
          font-weight: bold;
          font-style: initial;
          background: #3a7bd5;
          /* fallback for old browsers */
          background: -webkit-linear-gradient(to right, #3a7bd5, rgba(255, 255, 255, 0.1));
          /* Chrome 10-25, Safari 5.1-6 */
          background: linear-gradient(to right, #3a7bd5, rgba(255, 255, 255, 0.1));
          /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
                .title {
                    padding-left: 40px;
                    height: 80px;
                    line-height: 80px;
                    font-size: 44px;
                    font-weight: bold;
                    font-style: initial;
                    background: #3a7bd5;
                    /* fallback for old browsers */
                    background: -webkit-linear-gradient(to right, #3a7bd5, rgba(255, 255, 255, 0.1));
                    /* Chrome 10-25, Safari 5.1-6 */
                    background: linear-gradient(to right, #3a7bd5, rgba(255, 255, 255, 0.1));
                    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
                }

                .content {
                    margin-top: 20px;
                    padding: 0 20px;

                    .describe-box {
                        line-height: 36px;
                    }
                }

                .footer-btn {
                    margin-bottom: 40px;
                    height: 40px;
                    line-height: 40px;
                    text-align: center;
                }
            }
        }

        .content {
          margin-top: 20px;
          padding: 0 20px;

          .describe-box {
            line-height: 36px;
          }
        }

        .footer-btn {
          margin-bottom: 40px;
          height: 40px;
          line-height: 40px;
          text-align: center;
        }
      }
    }
  }
}

.no-select {
  user-select: none;
  /* Standard syntax */
  -webkit-user-select: none;
  /* Safari/Chrome */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
    user-select: none;
    /* Standard syntax */
    -webkit-user-select: none;
    /* Safari/Chrome */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
}

.start-btn,
.start-btn:focus,
.start-btn:hover {
  display: inline-block;
  position: relative;
  min-width: 96px;
  border: none;
  border-radius: 8px;
  background: #491cc5;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to bottom, #491cc5, #5f80f5);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to bottom, #491cc5, #5f80f5);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    padding: 0 10px;
    display: inline-block;
    position: relative;
    min-width: 96px;
    border: none;
    border-radius: 8px;
    background: #491cc5;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to bottom, #491cc5, #5f80f5);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to bottom, #491cc5, #5f80f5);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

  color: #fff;
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
  transition: transform ease-in 0.1s, box-shadow ease-in 0.25s;
  transform: skewX(8deg);
    color: #fff;
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    transition: transform ease-in 0.1s, box-shadow ease-in 0.25s;
    transform: skewX(8deg);
}

.start-btn:before,
.start-btn:after {
  content: "";
  display: block;
  position: absolute;
  width: 140%;
  height: 100%;
  left: -20%;
  z-index: -1000;
  transition: all ease-in-out 0.5s;
  background-repeat: no-repeat;
    content: "";
    display: block;
    position: absolute;
    width: 140%;
    height: 100%;
    left: -20%;
    z-index: -1000;
    transition: all ease-in-out 0.5s;
    background-repeat: no-repeat;
}

.start-btn:before {
  display: none;
  top: -75%;
  background-image: radial-gradient(circle, #3E56B2 20%, transparent 20%), radial-gradient(circle, transparent 20%, #3E56B2 20%, transparent 30%), radial-gradient(circle, #3E56B2 20%, transparent 20%), radial-gradient(circle, #3E56B2 20%, transparent 20%), radial-gradient(circle, transparent 10%, #3E56B2 15%, transparent 20%), radial-gradient(circle, #3E56B2 20%, transparent 20%), radial-gradient(circle, #3E56B2 20%, transparent 20%), radial-gradient(circle, #3E56B2 20%, transparent 20%), radial-gradient(circle, #3E56B2 20%, transparent 20%);
  background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%;
    display: none;
    top: -75%;
    background-image: radial-gradient(circle, #3E56B2 20%, transparent 20%), radial-gradient(circle, transparent 20%, #3E56B2 20%, transparent 30%), radial-gradient(circle, #3E56B2 20%, transparent 20%), radial-gradient(circle, #3E56B2 20%, transparent 20%), radial-gradient(circle, transparent 10%, #3E56B2 15%, transparent 20%), radial-gradient(circle, #3E56B2 20%, transparent 20%), radial-gradient(circle, #3E56B2 20%, transparent 20%), radial-gradient(circle, #3E56B2 20%, transparent 20%), radial-gradient(circle, #3E56B2 20%, transparent 20%);
    background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%;
}

.start-btn:after {
  display: none;
  bottom: -75%;
  background-image: radial-gradient(circle, #3E56B2 20%, transparent 20%), radial-gradient(circle, #3E56B2 20%, transparent 20%), radial-gradient(circle, transparent 10%, #3E56B2 15%, transparent 20%), radial-gradient(circle, #3E56B2 20%, transparent 20%), radial-gradient(circle, #3E56B2 20%, transparent 20%), radial-gradient(circle, #3E56B2 20%, transparent 20%), radial-gradient(circle, #3E56B2 20%, transparent 20%);
  background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%;
    display: none;
    bottom: -75%;
    background-image: radial-gradient(circle, #3E56B2 20%, transparent 20%), radial-gradient(circle, #3E56B2 20%, transparent 20%), radial-gradient(circle, transparent 10%, #3E56B2 15%, transparent 20%), radial-gradient(circle, #3E56B2 20%, transparent 20%), radial-gradient(circle, #3E56B2 20%, transparent 20%), radial-gradient(circle, #3E56B2 20%, transparent 20%), radial-gradient(circle, #3E56B2 20%, transparent 20%);
    background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%;
}

.start-btn:active {
  transform: scale(0.9);
  background-color: #5e7ae9;
  box-shadow: 0 2px 25px rgba(94, 122, 233, .2);
    transform: scale(0.9);
    background-color: #5e7ae9;
    box-shadow: 0 2px 25px rgba(94, 122, 233, .2);
}

.start-btn:active:before {
  display: block;
  animation: anim-top ease-in-out 0.75s forwards;
    display: block;
    animation: anim-top ease-in-out 0.75s forwards;
}

.start-btn:active:after {
  display: block;
  animation: anim-bottom ease-in-out 0.75s forwards;
    display: block;
    animation: anim-bottom ease-in-out 0.75s forwards;
}

@keyframes anim-top {
  0% {
    background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;
  }
    0% {
        background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;
    }

  50% {
    background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%;
  }
    50% {
        background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%;
    }

  100% {
    background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
    background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
  }
    100% {
        background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
        background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
    }
}

@keyframes anim-bottom {
  0% {
    background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%;
  }
    0% {
        background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%;
    }

  50% {
    background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%;
  }
    50% {
        background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%;
    }

  100% {
    background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;
    background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
  }
    100% {
        background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;
        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>