突发事件模拟调整

shuishen

2024-12-17 f7d12974e569c1feffe13dc29883add417942eb9

突发事件模拟调整

 src/views/pd/components/dynamicPanel.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2024-11-09 15:41:35
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-12-17 15:28:55
 * @LastEditTime: 2024-12-17 18:38:25
 * @FilePath: \bigScreen\src\views\pd\components\dynamicPanel.vue
 * @Description: 
 * 
@@ -20,6 +20,7 @@
let timeThree = null
let timeFour = null
let timeFive = null
let timeSix = null

const panelData = reactive({
  data: [
@@ -35,7 +36,7 @@
      },
      onetime: 0,

      twoContent: '应立即启动应急池的使用，将泄漏的松节油引导至应急池中。',
      twoContent: '启动应急池的使用，将泄漏的松节油引导至应急池中。',
      twoPointPosition: {
        lng: 115.10198913,
        lat: 27.27343615
@@ -49,38 +50,53 @@
      linePosition: '115.10341051,27.27251643,64;115.10357817,27.27278003,64',
      lineTime: 5000,

      threeContent: '关闭绿源污水处理厂旁雨水排口，拦截污染水体。',
      threeContent: '企业采取紧急措施后，还有部分松节油进入场外雨水管网。',
      threePointPosition: {
        lng: 115.10870094,
        lat: 27.27185349
        lng: 115.10343807,
        lat: 27.27256126
      },
      threetime: 15000,

      fourContent: '启用绿源污水处理厂事故应急池，将已拦截废水泵入应急池。',
      fourContent: '关闭绿源污水处理厂旁雨水排口，拦截污染水体。',
      fourPointPosition: {
        lng: 115.10870094,
        lat: 27.27185349
      },
      fourtime: 15000,

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

      fiveContent: '应急指挥部指导企业处理受污染废水, 监测公共应急池水质 ，确保达标后安全转运至绿源污水处理厂。',
      fivePointPosition: {
      sixContent: '应急指挥部指导企业处理受污染废水, 监测公共应急池水质 ，根据水质情况分批次进入生化系统处理。',
      sixPointPosition: {
        lng: 115.10843364,
        lat: 27.27320219
      },
      fivetime: 25000,
      sixtime: 25000,
    },

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

      oneCentent: '2024年09月16日14时，北片区某公司在生产过程中操作失误，大量含碱废水泄漏。企业关闭前置阀门，切断泄漏源，用砂土等筑堤堵截泄漏液体或者引流到安全地点。',
      oneCentent: '2024年09月16日14时，北片区某公司在生产过程中操作失误，大量含碱废水泄漏。企业关闭前置阀门，切断泄漏源。',
      onePointPosition: {
        lng: 115.10467136,
        lat: 27.29415383
      },
      onetime: 0,

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

      lineCenter: {
        lng: 115.10627858,
@@ -89,34 +105,42 @@
      linePosition: '115.10627726,27.29408853,64;115.10627703,27.29456132,64',
      lineTime: 5000,

      twoContent: '园区关闭北区雨水排口，拦截污染水体。',
      twoPointPosition: {
      threeContent: '企业通过紧急处理，还有部分事故废水进入厂外雨水管网。',
      threePointPosition: {
        lng: 115.10627858,
        lat: 27.29434439
      },
      threetime: 10000,

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

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

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

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

    {
      key: 3,
      title: '典型案例3',
@@ -132,26 +156,40 @@
      },
      onetime: 10000,

      twoContent: '关闭雨水阀闸，调度金龙水库清水，稀释污染团。',
      twoContent: '立即关闭雨水闸阀。',
      twoPointPosition: {
        lng: 115.10488545,
        lat: 27.27678110
        lng: 115.10665321,
        lat: 27.27720681
      },
      twotime: 13000,

      threeContent: '转输至江西粤鹏环保高新技术开发有限公司事故应急池。',
      threeContent: '调度金龙水库清水，稀释污染团。',
      threePointPosition: {
        lng: 115.10545135,
        lat: 27.28043872
        lng: 115.10488545,
        lat: 27.27678110
      },
      threetime: 18000,
      threetime: 13000,

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

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

      sixContent: '根据应急监测方案，立即开展监测，确保污染废水未进入外界水体。',
      sixPointPosition: {
        lng: 115.10665321,
        lat: 27.27720681
      },
      sixtime: 28000,
    },
  ]
})
@@ -202,7 +240,6 @@

const synth = window.speechSynthesis


const speak = (msg, continueFun = () => { }) => {
  let u = new SpeechSynthesisUtterance()
  let voices = synth.getVoices()
@@ -221,9 +258,9 @@
}

const publicFun = (item) => {
  let threeCenter = DC.Position.fromObject(item.threePointPosition)
  let threeCircle = new DC.Circle(threeCenter, 30)
  threeCircle.setStyle({
  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,
@@ -231,26 +268,26 @@
      gradient: 0.5
    })
  })
  dynamicVectorLayer.addOverlay(threeCircle)
  dynamicVectorLayer.addOverlay(fourCircle)

  let threeContent = new DC.DivIcon(
    new DC.Position(item.threePointPosition.lng, item.threePointPosition.lat, 70),
  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.threeContent}</p>
                      <p>${item.fourContent}</p>
                    </div>
                  </div>
                  <div class="arrow"></div>
                </div>`
  )
  dynamicHtmlLayer.addOverlay(threeContent)
  dynamicHtmlLayer.addOverlay(fourContent)

  window.$viewer.flyToPosition(new DC.Position(item.threePointPosition.lng, item.threePointPosition.lat, 400, 0, -90, 0), () => {
    speak(item.threeContent, () => {
      let FourCenter = DC.Position.fromObject(item.fourPointPosition)
      let fourCircle = new DC.Circle(FourCenter, 10)
      fourCircle.setStyle({
  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,
@@ -258,27 +295,27 @@
          gradient: 0.5
        })
      })
      dynamicVectorLayer.addOverlay(fourCircle)
      dynamicVectorLayer.addOverlay(fiveCircle)

      let fourContent = new DC.DivIcon(
        new DC.Position(item.fourPointPosition.lng, item.fourPointPosition.lat, 70),
      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.fourContent}</p>
                          <p>${item.fiveContent}</p>
                        </div>
                      </div>
                      <div class="arrow"></div>
                    </div>`
      )
      dynamicHtmlLayer.addOverlay(fourContent)
      dynamicHtmlLayer.addOverlay(fiveContent)
      // 执行对应的事件函数
      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({
      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,
@@ -286,23 +323,54 @@
                gradient: 0.5
              })
            })
            dynamicVectorLayer.addOverlay(fiveCircle)
            dynamicVectorLayer.addOverlay(sixCircle)

            let fiveContent = new DC.DivIcon(
              new DC.Position(item.fivePointPosition.lng, item.fivePointPosition.lat, 70),
              `<div class="dynamic-event-profile-map-popup">
            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.fiveContent}</p>
                                  <p>${item.sixContent}</p>
                                </div>
                              </div>
                              <div class="arrow"></div>
                          </div>`
            )
            dynamicHtmlLayer.addOverlay(fiveContent)
            dynamicHtmlLayer.addOverlay(sixContent)
            // 执行对应的事件函数
            window.$viewer.flyToPosition(new DC.Position(item.fivePointPosition.lng, item.fivePointPosition.lat, 400, 0, -90, 0), () => {
              speak(item.fiveContent)
            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)
          }
        })
@@ -360,10 +428,25 @@

  dynamicLineVectorLayer.addOverlay(polyline)

  window.$viewer.flyToPosition(new DC.Position(item.lineCenter.lng, item.lineCenter.lat, 400, 0, -90, 0), () => {
    lineTime = setTimeout(() => {
  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()
    }, item.lineTime)
    })
  }, 3)
}

@@ -420,8 +503,8 @@

      speak(item.oneCentent, () => {
        if (item.key == 2) {
          createLinePath(item, () => {
            twoFun(item, () => {
          twoFun(item, () => {
            createLinePath(item, () => {
              publicFun(item)
            })
          })
@@ -457,6 +540,7 @@
  timeThree && (clearTimeout(timeThree), timeThree = null)
  timeFour && (clearTimeout(timeFour), timeFour = null)
  timeFive && (clearTimeout(timeFive), timeFive = null)
  timeSix && (clearTimeout(timeSix), timeSix = null)

  track.setModel(VITE_APP_BASE + 'gltf/car.gltf', {
    show: false,