突发事件模拟调整

shuishen

2024-11-26 ecdffd165cf73c0e3c051c69d1dfdc71ba9331c8

 src/views/pd/components/dynamicPanel.vue

@@ -2,16 +2,19 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2024-11-09 15:41:35
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-11-25 16:27:34
 * @LastEditTime: 2024-11-26 01:09:57
 * @FilePath: \bigScreen\src\views\pd\components\dynamicPanel.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by shuishen, All Rights Reserved. 
-->
<script setup>
const { VITE_APP_BASE } = import.meta.env

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

let lineTime = null
let timeOne = null
let timeTwo = null
let timeThree = null
@@ -25,100 +28,134 @@
      title: '典型案例1',
      content: '南片区松节油储罐区泄漏事故: 南片区某企业松节油储罐泄漏，如不采取措施，将造成污染事故，影响到赣江下游水质。',

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

      twoContent: '关闭绿源污水处理厂旁雨水排口，拦截污染水体。',
      twoContent: '应立即启动应急池的使用，将泄漏的松节油引导至应急池中。',
      twoPointPosition: {
        lng: 115.10198913,
        lat: 27.27343615
      },
      twotime: 5000,

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

      threeContent: '关闭绿源污水处理厂旁雨水排口，拦截污染水体。',
      threePointPosition: {
        lng: 115.10921467,
        lat: 27.27166382
      },
      threetime: 15000,

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

      fourContent: '应急指挥部指导企业处理受污染废水, 监测公共应急池水质 ，确保达标后安全转运至绿源污水处理厂。',
      fourPointPosition: {
      fiveContent: '应急指挥部指导企业处理受污染废水, 监测公共应急池水质 ，确保达标后安全转运至绿源污水处理厂。',
      fivePointPosition: {
        lng: 115.10845441,
        lat: 27.27327366
      }
      },
      fivetime: 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,

      lineCenter: {
        lng: 115.10343807,
        lat: 27.27256126
      },
      linePosition: '115.10626847,27.29410411,80;115.10626769,27.29453267,80',
      lineTime: 5000,

      twoContent: '园区关闭北区雨水排口，拦截污染水体。',
      twoPointPosition: {
        lng: 115.10620654,
        lat: 27.29710382
        lng: 115.10542509,
        lat: 27.29924475
      },
      twotime: 10000,

      threeContent: '园区启用北区公共应急池，将已拦截废水泵入应急池。',
      threePointPosition: {
        lng: 115.10418532,
        lat: 27.29444603
      },
      threetime: 15000,

      fourContent: '将拦截废水从应急池中通过北区污水提升泵站转移至绿源污水处理厂进行处置。',
      fourPointPosition: {
        lng: 115.10814596,
        lat: 27.27257473
      },

      fourtime: 20000,

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

      oneCentent: '2024年09月16日14时，北片区江西粤鹏环保高新技术开发有限公司的危化品运输车辆发生侧翻，大量盐酸流至路面。',
      oneCentent: '2024年09月16日14时，北片区某公司的危化品运输车辆发生侧翻，大量盐酸流至路面。',
      onePointPosition: {
        lng: 115.10248629,
        lat: 27.28112873
      },
      onetime: 0,

      twoContent: '调度金龙水库清水，稀释污染团。',
      twoPointPosition: {
        lng: 115.10488545,
        lat: 27.27678110
      },
      twotime: 0,

      threeContent: '转输至江西粤鹏环保高新技术开发有限公司事故应急池、初期雨水池。',
      threePointPosition: {
        lng: 115.10545135,
        lat: 27.28043872
      },
      threetime: 0,

      fourContent: '转输至江西腾龙源环保科技有限公司事故应急池、初期雨水池。',
      fourPointPosition: {
        lng: 115.10332118,
        lat: 27.27831698
      },
      fourtime: 0,
    },
  ]
})

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

const schemeStart = (item) => {
  emit('closePanel')
@@ -152,6 +189,24 @@
    dynamicHtmlLayer.addOverlay(oneCentent)
  }, 3)

  item.linePosition && (lineTime = setTimeout(() => {
    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)

    window.$viewer.flyToPosition(new DC.Position(item.lineCenter.lng, item.lineCenter.lat, 400, 0, -90, 0), () => { }, 3)
  }, item.lineTime))

  timeTwo = setTimeout(() => {
    let twoCenter = DC.Position.fromObject(item.twoPointPosition)
    let twoCircle = new DC.Circle(twoCenter, 10)
@@ -180,7 +235,7 @@
    dynamicHtmlLayer.addOverlay(twoContent)
    // 执行对应的事件函数
    window.$viewer.flyToPosition(new DC.Position(item.twoPointPosition.lng, item.twoPointPosition.lat, 400, 0, -90, 0), () => { }, 3)
  }, 10000)
  }, item.twotime)

  timeThree = setTimeout(() => {
    let threeCenter = DC.Position.fromObject(item.threePointPosition)
@@ -209,7 +264,7 @@
    dynamicHtmlLayer.addOverlay(threeContent)

    window.$viewer.flyToPosition(new DC.Position(item.threePointPosition.lng, item.threePointPosition.lat, 400, 0, -90, 0), () => { }, 3)
  }, 15000)
  }, item.threetime)

  item.fourPointPosition && (timeFour = setTimeout(() => {
    let FourCenter = DC.Position.fromObject(item.fourPointPosition)
@@ -238,7 +293,7 @@
    dynamicHtmlLayer.addOverlay(fourContent)
    // 执行对应的事件函数
    window.$viewer.flyToPosition(new DC.Position(item.fourPointPosition.lng, item.fourPointPosition.lat, 400, 0, -90, 0), () => { }, 3)
  }, 20000))
  }, item.fourtime))

  item.fivePointPosition && (timeFive = setTimeout(() => {
    let fiveCenter = DC.Position.fromObject(item.fivePointPosition)
@@ -267,24 +322,28 @@
    dynamicHtmlLayer.addOverlay(fiveContent)
    // 执行对应的事件函数
    window.$viewer.flyToPosition(new DC.Position(item.fivePointPosition.lng, item.fivePointPosition.lat, 400, 0, -90, 0), () => { }, 3)
  }, 25000))
  }, item.fivetime))
}

const clearAll = () => {
  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)

  dynamicVectorLayer.clear()
  dynamicHtmlLayer.clear()
  dynamicLineVectorLayer.clear()
}

onUnmounted(() => {
  clearAll()

  window.$viewer && window.$viewer.removeLayer(dynamicVectorLayer)
  window.$viewer && window.$viewer.removeLayer(dynamicHtmlLayer)
  dynamicVectorLayer && window.$viewer.removeLayer(dynamicVectorLayer)
  dynamicHtmlLayer && window.$viewer.removeLayer(dynamicHtmlLayer)
  dynamicLineVectorLayer && window.$viewer.removeLayer(dynamicLineVectorLayer)
})
</script>