临川优化

linwe

2025-05-23 d2e2df7c4805cc9c5e4e915202f304e0e9a53758

 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: 2025-01-20 18:33:59
 * @FilePath: \bigScreen\src\views\pd\components\dynamicPanel.vue
 * @Description: 
 * 
@@ -20,138 +20,172 @@
let timeThree = null
let timeFour = null
let timeFive = null
let timeSix = null

const panelData = reactive({
  data: [
    {
      key: 1,
      title: '典型案例1',
      content: '南片区松节油储罐区泄漏事故: 南片区某企业松节油储罐泄漏，如不采取措施，将造成污染事故，影响到赣江下游水质。',
      content: '化工集中区企业储罐区泄漏事件: 化工集中区某企业甲苯储罐阀门破损，如不采取措施，将造成污染事故，影响到抚河下游水质。',

      oneCentent: '2024年11月11日11时，南片区某公司松节油储罐泄漏。企业关闭前置阀门切断泄漏源，向罐内适量注水，抬高液位。',
      oneCentent: '2024年X月X日X时，化工集中区某企业甲苯储罐阀门破损，如不采取措施，将造成污染事故，影响到抚河下游水质',
      onePointPosition: {
        lng: 115.10175740,
        lat: 27.27356477
        lng: 116.267710,
        lat: 28.035097,
        ele: 43
      },
      onetime: 0,

      twoContent: '应立即启动应急池的使用，将泄漏的松节油引导至应急池中。',
      twoContent: '企业立即切断雨水排口与园区雨水管网的连接，防止污染进一步扩大;同时将已流失有机农药导入企业事故应急池，后通过槽罐车运往污水处理厂或委托有资质单位进行处置。',
      twoPointPosition: {
        lng: 115.10198913,
        lat: 27.27343615
        lng: 116.26828434,
        lat: 28.03483709,
        ele: 44
      },
      twotime: 5000,

      lineCenter: {
        lng: 115.10343807,
        lat: 27.27256126
        lng: 116.26874426,
        lat: 28.03448151
      },
      linePosition: '115.10341051,27.27251643,64;115.10357817,27.27278003,64',
      linePosition: '116.26858421,28.03438206,50;116.26890074,28.03457406,50',
      lineTime: 5000,

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

      fourContent: '启用绿源污水处理厂事故应急池，将已拦截废水泵入应急池。',
      fourContent: '关闭园区内河应急闸坝。',
      fourPointPosition: {
        lng: 115.10814596,
        lat: 27.27257473
        lng: 116.291116,
        lat: 28.017042,
        ele: 31.2
      },
      fourtime: 20000,
      fourtime: 15000,

      fiveContent: '应急指挥部指导企业处理受污染废水, 监测公共应急池水质 ，确保达标后安全转运至绿源污水处理厂。',
      fiveContent: '联系水利部门关闭园区外山下排水闸，杜绝污水流入抚河。',
      fivePointPosition: {
        lng: 115.10843364,
        lat: 27.27320219
        lng: 116.314202,
        lat: 28.039083,
        ele: 30
      },
      fivetime: 25000,
      fivetime: 20000,

      sixContent: '将园区内河蓄存的污水通过应急闸坝旁泵站导入抚北工业污水处理厂进行处置。',
      sixPointPosition: {
        lng: 116.29351363,
        lat: 28.01630391,
        ele: 37.2
      },
      sixtime: 25000,

      sevenContent: '流出园区外的污水由山外排水闸全部拦截，调集工程机械将蓄存的污水导入该应急空间;投放活性炭进行处置，处置完成经应急监测组检测达标后排放。',
      sevenPointPosition: {
        lng: 116.314941,
        lat: 28.038030,
        ele: 30
      },
      seventime: 30000
    },

    {
      key: 2,
      title: '典型案例2',
      content: '北片区碱类腐蚀性物质泄漏事故: 北片区某企业在生产过程中操作失误，大量含碱废水泄漏，如不采取措施，将造成污染事故，影响到赣江下游水质。',
      content: '化工集中区企业储罐区泄漏事件: 添光钛业施工人员在硫磺库北面动土作业，把天然气输送管道挖断，天然气大量泄漏，引起爆炸，爆炸引起硫酸输送管道破损和着火，如不采取措施，将造成污染事故，影响到宜黄河及抚河水质。',

      oneCentent: '2024年09月16日14时，北片区某公司在生产过程中操作失误，大量含碱废水泄漏。企业关闭前置阀门，切断泄漏源，用砂土等筑堤堵截泄漏液体或者引流到安全地点。',
      oneCentent: '2024年X月X日X时，添光钛业施工人员在硫磺库北面动土作业，把天然气输送管道挖断，天然气大量泄漏，引起爆炸，爆炸引起硫酸输送管道破损和着火，如不采取措施，将造成污染事故，影响到宜黄河及抚河水质',
      onePointPosition: {
        lng: 115.10467136,
        lat: 27.29415383
        lng: 116.28658339,
        lat: 27.99550926,
        ele: 52
      },
      onetime: 0,

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

      twoContent: '园区关闭北区雨水排口，拦截污染水体。',
      twoContent: '开启截流阀，利用企业应急池与雨水池蓄污。',
      twoPointPosition: {
        lng: 115.10629605,
        lat: 27.29785816
        lng: 116.285503,
        lat: 27.995922,
        ele: 53
      },
      twotime: 10000,
      twotime: 5000,

      threeContent: '园区启用北区公共应急池（拟建），将已拦截废水泵入应急池。',
      /* lineCenter: {
        lng: 116.26874426,
        lat: 28.03448151
      },
      linePosition: '116.26858421,28.03438206,50;116.26890074,28.03457406,50',
      lineTime: 5000, */

      threeContent: '利用临时转输设备将多余污水转输至东北方坑塘。',
      threePointPosition: {
        lng: 115.106600,
        lat: 27.296891
        lng: 116.290782,
        lat: 27.996336,
        ele: 39
      },
      threetime: 15000,

      fourContent: '将拦截废水从应急池中通过北区污水提升泵站转移至绿源污水处理厂进行处置。',
      fourContent: '利用山下闸阻断园区污水外流。',
      fourPointPosition: {
        lng: 115.10814596,
        lat: 27.27257473
        lng: 116.314202,
        lat: 28.039083,
        ele: 30
      },
      fourtime: 20000,

      fiveContent: '排口下游展开应急监测，确保废水没有进入周边水系。',
      fivePointPosition: {
        lng: 115.10542509,
        lat: 27.29924475
      },
      fivetime: 25000
      fourtime: 15000,
    },
    {
      key: 3,
      title: '典型案例3',
      content: '危险化学品运输事故: 北片区某企业的危化品运输车辆发生侧翻，大量盐酸流至路面，如不采取措施，将造成污染事故，影响到赣江下游水质。',
      content: '危险化学品泄露事故: 危化品停车场一辆硫酸槽罐车发生泄露，大量盐酸流至路面，如不采取措施，将造成污染事故，影响到赣江下游水质。',

      showModel: true,


      oneCentent: '2024年09月16日14时，北片区某公司的危化品运输车辆发生侧翻，大量盐酸流至路面。',
      oneCentent: '2024年09月16日14时，危化品停车场一辆硫酸槽罐车发生泄露，大量盐酸流至路面。',
      onePointPosition: {
        lng: 115.10639803,
        lat: 27.27848014
      },
      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.10499264,
        lat: 27.28048591
      },
      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,12 +236,11 @@

const synth = window.speechSynthesis


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

  if (!findObj) {
@@ -221,9 +254,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 +264,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, item.fourPointPosition.ele),
    `<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 +291,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, item.fivePointPosition.ele),
        `<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 +319,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, item.sixPointPosition.ele),
              `<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)
          }
        })
@@ -325,7 +389,7 @@
  dynamicVectorLayer.addOverlay(twoCircle)

  let twoContent = new DC.DivIcon(
    new DC.Position(item.twoPointPosition.lng, item.twoPointPosition.lat, 70),
    new DC.Position(item.twoPointPosition.lng, item.twoPointPosition.lat, item.twoPointPosition.ele),
    `<div class="dynamic-event-profile-map-popup">
          <div class="content-wrap">
            <div class="content">
@@ -346,24 +410,53 @@
}

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
  })
  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)
    dynamicLineVectorLayer.addOverlay(polyline)
  } else {
    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)
  }

  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, item.threePointPosition.ele),
    `<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)
}

@@ -405,7 +498,7 @@
      dynamicVectorLayer.addOverlay(oneCircle)

      let oneCentent = new DC.DivIcon(
        new DC.Position(item.onePointPosition.lng, item.onePointPosition.lat, 70),
        new DC.Position(item.onePointPosition.lng, item.onePointPosition.lat, item.onePointPosition.ele),
        `<div class="dynamic-map-popup">
          <div class="content-wrap">
            <div class="content">
@@ -420,8 +513,8 @@

      speak(item.oneCentent, () => {
        if (item.key == 2) {
          createLinePath(item, () => {
            twoFun(item, () => {
          twoFun(item, () => {
            createLinePath(item, () => {
              publicFun(item)
            })
          })
@@ -433,7 +526,9 @@
          })
        } else {
          twoFun(item, () => {
            publicFun(item)
            createLinePath(item, () => {
              publicFun(item)
            })
          })
        }
      })
@@ -457,6 +552,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,