突发事件模拟调整

shuishen

2024-11-25 edb7c649a139c8a06e48acf79121c8529a66b598

突发事件模拟调整

 src/views/pd/components/dynamicPanel copy.vue

New file
@@ -0,0 +1,446 @@
<!--
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2024-11-09 15:41:35
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-11-25 10:06:08
 * @FilePath: \bigScreen\src\views\pd\components\dynamicPanel.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by shuishen, All Rights Reserved. 
-->
<script setup>
const emit = defineEmits(['closePanel'])
import { onUnmounted } from 'vue'

let timeOne = null
let timeTwo = null
let timeThree = null
let timeFour = null

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

      oneCentent: '2024年11月11日11时，南片区江西殷莱特化工有限公司松节油储罐泄漏，如不采取措施，将造成污染事故，影响到赣江下游水质。',
      onePointPosition: {
        lng: 115.10175740,
        lat: 27.27356477
      },
      // specificPollutant: '松节油，无色至淡黄色油状液体，具有松香气味。 熔点：无 沸点：154～170℃相对密度（水=1）：0.85～0.87 饱和蒸气压（kPa）：2.67(51.4℃)溶解性：不溶于水，溶于乙醇、氯仿、醚等多数有机溶剂。',

      twoContent: '根据泄漏情况，向罐内适量注水，抬高液位，形成水垫层。由于该公司设有应急池，应立即启动应急池的使用，将泄漏的松节油引导至应急池中，以防止其扩散和对周围环境造成污染。应急池可以暂时存储泄漏的松节油，避免直接流入下水道和水体，减少对赣江下游水质的影响。',
      twoPointPosition: {
        lng: 115.10197228,
        lat: 27.27343847
      },

      threeContent: '部分松节油未拦截成功，已流入园区雨水管网。关闭绿源污水处理厂旁雨水排口，拦截污染水体。',
      threePointPosition: {
        lng: 115.10921467,
        lat: 27.27166382
      },

      fourContent: '启用绿源污水处理厂事故应急池，将已拦截废水泵入应急池。',
      fourPointPosition: {
        lng: 115.10814596,
        lat: 27.27257473
      }
    },
    {
      key: 2,
      title: '典型案例2',
      content: '北片区碱类腐蚀性物质泄漏事故: 北片区某企业（位于吉兴路以北）在生产过程中操作失误，大量含碱废水泄漏，如不采取措施，将造成污染事故，影响到赣江下游水质。',

      eventProfile: '2024年10月15日14时，北片区江西宏润香料有限公司在生产过程中操作失误，大量含碱废水泄漏，如不采取措施，将造成污染事故，影响到赣江下游水质。',

      specificPollutantPosition: {
        lng: 115.10446199,
        lat: 27.28453867
      },
      // specificPollutant: '液碱，无色透明液体。是重要的化工基础原料，用途极广。化学工业用于制造甲酸、草酸、硼砂、苯酚、氰化钠及肥皂、合成脂肪酸、合成洗涤剂等，呈碱性。',

      transitPointPosition: {
        lng: 115.10508747,
        lat: 27.28393479
      },

      wastewaterTreatmentPosition: {
        lng: 115.10814596,
        lat: 27.27257473
      },
      wastewaterTreatment: '将拦截废水从应急池中通过北区污水提升泵站转移至绿源污水处理厂进行处置，同时在排口下游展开应急监测，确保废水没有进入周边水系。'
    },
    {
      key: 3,
      title: '典型案例3',
      content: '危险化学品运输事故: 化工集中区北区（吉兴路以南）某企业的危化品运输车辆金工大道危化品运专用运输道上发生侧翻，大量盐酸流至路面，如不采取措施，将造成污染事故，影响到赣江下游水质。',

      eventProfile: '2024年11月04日18时，化工集中区北区江西迷斯婕生物科技有限公司的危化品运输车辆金工大道危化品运专用运输道上发生侧翻，大量盐酸流至路面，如不采取措施，将造成污染事故，影响到赣江下游水质。',

      specificPollutantPosition: {
        lng: 115.10392960,
        lat: 27.28660330
      },
      // specificPollutant: '盐酸是无色液体（工业用盐酸会因有杂质三价铁盐而略显黄色），为氯化氢的水溶液，具有刺激性气味。',

      transitPointPosition: {
        lng: 115.10468990,
        lat: 27.28756147
      },

      wastewaterTreatmentPosition: {
        lng: 115.10814596,
        lat: 27.27257473
      },
      wastewaterTreatment: '对转输至企业应急空间的事故废水进行水质监测，分析水质达标情况，并研判处理处置方式，在确保安全的情况下加药处理或者排入企业废水处理站处理'
    },
  ]
})

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

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

  window.$viewer.flyToPosition(new DC.Position(item.onePointPosition.lng, item.onePointPosition.lat, 400, 0, -90, 0), () => {
    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="title">事件概况</div>
            <div class="content">
              <p>${item.oneCentent}</p>
              </div>
              </div>
              <div class="arrow"></div>
              </div>`
      // <p>特征污染物：${item.specificPollutant}</p>
    )
    dynamicHtmlLayer.addOverlay(oneCentent)
  }, 3)

  timeTwo = setTimeout(() => {
    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="title">应急措施</div>
            <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), () => { }, 3)
  }, 5000)

  timeThree = setTimeout(() => {
    let threeCenter = DC.Position.fromObject(item.threePointPosition)
    let threeCircle = new DC.Circle(threeCenter, 30)
    threeCircle.setStyle({
      classificationType: 0,
      material: new DC.CircleSpiralMaterialProperty({
        color: DC.Color.BLUE.withAlpha(0.2),
        speed: 8.0
      })
    })
    dynamicVectorLayer.addOverlay(threeCircle)

    let threeContent = new DC.DivIcon(
      new DC.Position(item.threePointPosition.lng, item.threePointPosition.lat, 70),
      `<div class="dynamic-map-popup">
          <div class="content-wrap">
            <div class="title">雨水排口</div>
            <div class="content">
              <p>${item.threeContent}</p>
            </div>
          </div>
          <div class="arrow"></div>
        </div>`
    )
    dynamicHtmlLayer.addOverlay(threeContent)

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

  timeFour = setTimeout(() => {
    let foutCenter = DC.Position.fromObject(item.fourPointPosition)
    let fourCircle = new DC.Circle(foutCenter, 10)
    fourCircle.setStyle({
      material: new DC.CircleWaveMaterialProperty({
        color: DC.Color.fromRandom(),
        speed: 20,
        count: 5,
        gradient: 0.5
      })
    })
    dynamicVectorLayer.addOverlay(fourCircle)

    let fourContent = new DC.DivIcon(
      new DC.Position(item.fourPointPosition.lng, item.fourPointPosition.lat, 70),
      `<div class="dynamic-event-profile-map-popup">
          <div class="content-wrap">
            <div class="title">绿源污水处理厂</div>
            <div class="content">
              <p>${item.fourContent}</p>
              </div>
              </div>
              <div class="arrow"></div>
              </div>`
      // <p>特征污染物：${item.specificPollutant}</p>
    )
    dynamicHtmlLayer.addOverlay(fourContent)
    // 执行对应的事件函数
    window.$viewer.flyToPosition(new DC.Position(item.fourPointPosition.lng, item.fourPointPosition.lat, 400, 0, -90, 0), () => { }, 3)
  }, 15000)
}

const clearAll = () => {
  timeOne && (clearTimeout(timeOne), timeOne = null)
  timeTwo && (clearTimeout(timeTwo), timeTwo = null)
  timeThree && (clearTimeout(timeThree), timeThree = null)
  timeFour && (clearTimeout(timeFour), timeFour = null)

  dynamicVectorLayer.clear()
  dynamicHtmlLayer.clear()
}

onUnmounted(() => {
  clearAll()

  window.$viewer && window.$viewer.removeLayer(dynamicVectorLayer)
  window.$viewer && window.$viewer.removeLayer(dynamicHtmlLayer)
})
</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 class="describe-box">
                {{ item.content }}
              </div>
            </div>

            <div class="footer-btn">
              <div class="start-btn" @click="schemeStart(item)">
                开始模拟
              </div>
            </div>
          </div>
        </template>
      </el-carousel-item>
    </el-carousel>
  </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;

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

      .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+ */
        }

        .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 */
}

.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+ */

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

.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%;
}

.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%;
}

.start-btn:active {
  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;
}

.start-btn:active:after {
  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%;
  }

  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%;
  }
}

@keyframes anim-bottom {
  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%;
  }

  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%;
  }
}
</style>

 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-11-20 17:16:17
 * @LastEditTime: 2024-11-25 11:26:01
 * @FilePath: \bigScreen\src\views\pd\components\dynamicPanel.vue
 * @Description: 
 * 
@@ -12,6 +12,12 @@
const emit = defineEmits(['closePanel'])
import { onUnmounted } from 'vue'

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

const panelData = reactive({
  data: [
    {
@@ -19,189 +25,249 @@
      title: '典型案例1',
      content: '南片区松节油储罐区泄漏事故: 南片区某企业松节油储罐泄漏，如不采取措施，将造成污染事故，影响到赣江下游水质。',

      eventProfile: '2024年11月11日11时，南片区江西殷莱特化工有限公司松节油储罐泄漏，如不采取措施，将造成污染事故，影响到赣江下游水质。',
      specificPollutantPosition: {
      oneCentent: '企业关闭前置阀门切断泄漏源，向罐内适量注水，抬高液位。',
      onePointPosition: {
        lng: 115.10175740,
        lat: 27.27356477
      },
      specificPollutant: '松节油，无色至淡黄色油状液体，具有松香气味。 熔点：无 沸点：154～170℃相对密度（水=1）：0.85～0.87 饱和蒸气压（kPa）：2.67(51.4℃)溶解性：不溶于水，溶于乙醇、氯仿、醚等多数有机溶剂。',

      transitPointPosition: {
        lng: 115.10231042,
        lat: 27.27352320
      twoContent: '关闭绿源污水处理厂旁雨水排口，拦截污染水体。',
      twoPointPosition: {
        lng: 115.10921467,
        lat: 27.27166382
      },

      wastewaterTreatmentPosition: {
      threeContent: '启用绿源污水处理厂事故应急池，将已拦截废水泵入应急池。',
      threePointPosition: {
        lng: 115.10814596,
        lat: 27.27257473
      },
      wastewaterTreatment: '事故应急结束后，应急指挥部组织专家评估组指导企业对受污染的废水进入废水处理中站进行处理，对公共应急池的事故废水进行水质监测，分析水质达标情况，并研判处理处置方式，在确保安全的情况下转转输至绿源污水处理厂处理。'

      fourContent: '应急指挥部指导企业处理受污染废水, 监测公共应急池水质 ，确保达标后安全转运至绿源污水处理厂。',
      fourPointPosition: {
        lng: 115.10845441,
        lat: 27.27327366
      }
    },
    {
      key: 2,
      title: '典型案例2',
      content: '北片区碱类腐蚀性物质泄漏事故: 北片区某企业（位于吉兴路以北）在生产过程中操作失误，大量含碱废水泄漏，如不采取措施，将造成污染事故，影响到赣江下游水质。',
      content: '北片区碱类腐蚀性物质泄漏事故: 北片区某企业在生产过程中操作失误，大量含碱废水泄漏，如不采取措施，将造成污染事故，影响到赣江下游水质。',

      eventProfile: '2024年10月15日14时，北片区江西宏润香料有限公司在生产过程中操作失误，大量含碱废水泄漏，如不采取措施，将造成污染事故，影响到赣江下游水质。',

      specificPollutantPosition: {
        lng: 115.10446199,
        lat: 27.28453867
      },
      specificPollutant: '液碱，无色透明液体。是重要的化工基础原料，用途极广。化学工业用于制造甲酸、草酸、硼砂、苯酚、氰化钠及肥皂、合成脂肪酸、合成洗涤剂等，呈碱性。',

      transitPointPosition: {
        lng: 115.10508747,
        lat: 27.28393479
      oneCentent: '企业关闭前置阀门，切断泄漏源，用砂土等筑堤堵截泄漏液体或者引流到安全地点。',
      onePointPosition: {
        lng: 115.10505420,
        lat: 27.28806335
      },

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

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

      fourContent: '将拦截废水从应急池中通过北区污水提升泵站转移至绿源污水处理厂进行处置。',
      fourPointPosition: {
        lng: 115.10814596,
        lat: 27.27257473
      },
      wastewaterTreatment: '将拦截废水从应急池中通过北区污水提升泵站转移至绿源污水处理厂进行处置，同时在排口下游展开应急监测，确保废水没有进入周边水系。'


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

      eventProfile: '2024年11月04日18时，化工集中区北区江西迷斯婕生物科技有限公司的危化品运输车辆金工大道危化品运专用运输道上发生侧翻，大量盐酸流至路面，如不采取措施，将造成污染事故，影响到赣江下游水质。',

      specificPollutantPosition: {
        lng: 115.10392960,
        lat: 27.28660330
      },
      specificPollutant: '盐酸是无色液体（工业用盐酸会因有杂质三价铁盐而略显黄色），为氯化氢的水溶液，具有刺激性气味。',

      transitPointPosition: {
        lng: 115.10468990,
        lat: 27.28756147
      oneCentent: '调度金龙水库清水，稀释污染团。',
      onePointPosition: {
        lng: 115.10488545,
        lat: 27.27678110
      },

      wastewaterTreatmentPosition: {
        lng: 115.10814596,
        lat: 27.27257473
      twoContent: '转输至江西粤鹏环保高新技术开发有限公司事故应急池、初期雨水池。',
      twoPointPosition: {
        lng: 115.10545135,
        lat: 27.28043872
      },
      wastewaterTreatment: '对转输至企业应急空间的事故废水进行水质监测，分析水质达标情况，并研判处理处置方式，在确保安全的情况下加药处理或者排入企业废水处理站处理'

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

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

const schemeStart = (item) => {
  emit('closePanel')
  clearAll()
  let center = DC.Position.fromObject(item.specificPollutantPosition)
  let circle = new DC.Circle(center, 20)
  circle.setStyle({
    material: new DC.CircleWaveMaterialProperty({
      color: DC.Color.RED.withAlpha(0.9),
      speed: 20,
      count: 5,
      gradient: 0.5
    })
  })
  dynamicVectorLayer.addOverlay(circle)

  let divContent = new DC.DivIcon(
    new DC.Position(item.specificPollutantPosition.lng, item.specificPollutantPosition.lat, 70),
    `<div class="dynamic-event-profile-map-popup">
  window.$viewer.flyToPosition(new DC.Position(item.onePointPosition.lng, item.onePointPosition.lat, 400, 0, -90, 0), () => {
    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="title">事件概况</div>
            <div class="content">
              <p>${item.eventProfile}</p>
              <p>特征污染物：${item.specificPollutant}</p>
              <p>${item.oneCentent}</p>
              </div>
              </div>
              <div class="arrow"></div>
              </div>`
      // <p>特征污染物：${item.specificPollutant}</p>
    )
    dynamicHtmlLayer.addOverlay(oneCentent)
  }, 3)

  timeTwo = setTimeout(() => {
    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), () => { }, 3)
  }, 5000)

  timeThree = setTimeout(() => {
    let threeCenter = DC.Position.fromObject(item.threePointPosition)
    let threeCircle = new DC.Circle(threeCenter, 30)
    threeCircle.setStyle({
      classificationType: 0,
      material: new DC.CircleSpiralMaterialProperty({
        color: DC.Color.BLUE.withAlpha(0.2),
        speed: 8.0
      })
    })
    dynamicVectorLayer.addOverlay(threeCircle)

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

  window.$viewer.flyToPosition(new DC.Position(item.specificPollutantPosition.lng, item.specificPollutantPosition.lat, 400, 0, -90, 0), () => {
    const utterance = new SpeechSynthesisUtterance(`事件概况：${item.eventProfile}特征污染物：${item.specificPollutant}`)
    window.$viewer.flyToPosition(new DC.Position(item.threePointPosition.lng, item.threePointPosition.lat, 400, 0, -90, 0), () => { }, 3)
  }, 10000)

    isSpeaking = true
  item.fourPointPosition && (timeFour = setTimeout(() => {
    let FourCenter = DC.Position.fromObject(item.fourPointPosition)
    let fourCircle = new DC.Circle(FourCenter, 10)
    fourCircle.setStyle({
      material: new DC.CircleWaveMaterialProperty({
        color: DC.Color.fromRandom(),
        speed: 20,
        count: 5,
        gradient: 0.5
      })
    })
    dynamicVectorLayer.addOverlay(fourCircle)

    utterance.onend = () => {
      isSpeaking = false

      // 执行对应的事件函数
      window.$viewer.flyToPosition(new DC.Position(item.transitPointPosition.lng, item.transitPointPosition.lat, 400, 0, -90, 0), () => {

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

        const utteranceTow = new SpeechSynthesisUtterance('')

        isSpeaking = true

        utteranceTow.onend = () => {
          isSpeaking = false

          window.$viewer.flyToPosition(new DC.Position(item.wastewaterTreatmentPosition.lng, item.wastewaterTreatmentPosition.lat, 400, 0, -90, 0), () => {
            let centerThree = DC.Position.fromObject(item.wastewaterTreatmentPosition)
            let circleThree = new DC.Circle(centerThree, 30)
            circleThree.setStyle({
              classificationType: 0,
              material: new DC.CircleSpiralMaterialProperty({
                color: DC.Color.BLUE.withAlpha(0.2),
                speed: 8.0
              })
            })
            dynamicVectorLayer.addOverlay(circleThree)

            let divIconT = new DC.DivIcon(
              new DC.Position(item.wastewaterTreatmentPosition.lng, item.wastewaterTreatmentPosition.lat, 70),
              `<div class="dynamic-map-popup">
                <div class="content-wrap">
                  <div class="title">绿源进水口</div>
                  <div class="content">
                    <p>${item.wastewaterTreatment}</p>
                  </div>
                </div>
                <div class="arrow"></div>
    let fourContent = new DC.DivIcon(
      new DC.Position(item.fourPointPosition.lng, item.fourPointPosition.lat, 70),
      `<div class="dynamic-event-profile-map-popup">
          <div class="content-wrap">
            <div class="content">
              <p>${item.fourContent}</p>
              </div>
              </div>
              <div class="arrow"></div>
              </div>`
            )
            dynamicHtmlLayer.addOverlay(divIconT)
    )
    dynamicHtmlLayer.addOverlay(fourContent)
    // 执行对应的事件函数
    window.$viewer.flyToPosition(new DC.Position(item.fourPointPosition.lng, item.fourPointPosition.lat, 400, 0, -90, 0), () => { }, 3)
  }, 15000))

            const utteranceThree = new SpeechSynthesisUtterance(item.wastewaterTreatment)
  item.fivePointPosition && (timeFive = setTimeout(() => {
    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)

            isSpeaking = true

            utteranceThree.onend = () => {
              isSpeaking = false
            }

            window.speechSynthesis.speak(utteranceThree)
          }, 3)
        }

        window.speechSynthesis.speak(utteranceTow)
      }, 3)
    }

    window.speechSynthesis.speak(utterance)
  }, 3)
    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), () => { }, 3)
  }, 20000))
}

const clearAll = () => {
  if (isSpeaking) {
    window.speechSynthesis.cancel()
  }
  timeOne && (clearTimeout(timeOne), timeOne = null)
  timeTwo && (clearTimeout(timeTwo), timeTwo = null)
  timeThree && (clearTimeout(timeThree), timeThree = null)
  timeFour && (clearTimeout(timeFour), timeFour = null)

  dynamicVectorLayer.clear()
  dynamicHtmlLayer.clear()