临川优化

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 19:00:23
 * @LastEditTime: 2025-01-20 18:33:59
 * @FilePath: \bigScreen\src\views\pd\components\dynamicPanel.vue
 * @Description: 
 * 
@@ -27,129 +27,125 @@
    {
      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.10343807,
        lat: 27.27256126
        lng: 116.26874426,
        lat: 28.03448151,
        ele: 50
      },
      threetime: 15000,

      fourContent: '关闭绿源污水处理厂旁雨水排口，拦截污染水体。',
      fourContent: '关闭园区内河应急闸坝。',
      fourPointPosition: {
        lng: 115.10870094,
        lat: 27.27185349
        lng: 116.291116,
        lat: 28.017042,
        ele: 31.2
      },
      fourtime: 15000,

      fiveContent: '启用绿源污水处理厂事故应急池，将已拦截废水泵入应急池。',
      fiveContent: '联系水利部门关闭园区外山下排水闸，杜绝污水流入抚河。',
      fivePointPosition: {
        lng: 115.10814596,
        lat: 27.27257473
        lng: 116.314202,
        lat: 28.039083,
        ele: 30
      },
      fivetime: 20000,

      sixContent: '应急指挥部指导企业处理受污染废水, 监测公共应急池水质 ，根据水质情况分批次进入生化系统处理。',
      sixContent: '将园区内河蓄存的污水通过应急闸坝旁泵站导入抚北工业污水处理厂进行处置。',
      sixPointPosition: {
        lng: 115.10843364,
        lat: 27.27320219
        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,

      twoContent: '企业通过砂土等筑堤堵截泄漏废水，并引流至事故应急池。',
      twoContent: '开启截流阀，利用企业应急池与雨水池蓄污。',
      twoPointPosition: {
        lng: 115.10545440,
        lat: 27.29439753
        lng: 116.285503,
        lat: 27.995922,
        ele: 53
      },
      twotime: 10000,
      twotime: 5000,

      lineCenter: {
        lng: 115.10627858,
        lat: 27.29434439
      /* lineCenter: {
        lng: 116.26874426,
        lat: 28.03448151
      },
      linePosition: '115.10627726,27.29408853,64;115.10627703,27.29456132,64',
      lineTime: 5000,
      linePosition: '116.26858421,28.03438206,50;116.26890074,28.03457406,50',
      lineTime: 5000, */

      threeContent: '企业通过紧急处理，还有部分事故废水进入厂外雨水管网。',
      threeContent: '利用临时转输设备将多余污水转输至东北方坑塘。',
      threePointPosition: {
        lng: 115.10627858,
        lat: 27.29434439
        lng: 116.290782,
        lat: 27.996336,
        ele: 39
      },
      threetime: 10000,
      threetime: 15000,

      fourContent: '园区关闭北区雨水排口闸阀(拟建)，拦截污染水体。',
      fourContent: '利用山下闸阻断园区污水外流。',
      fourPointPosition: {
        lng: 115.10629605,
        lat: 27.29785816
        lng: 116.314202,
        lat: 28.039083,
        ele: 30
      },
      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
      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
@@ -163,7 +159,7 @@
      },
      twotime: 13000,

      threeContent: '调度金龙水库清水，稀释污染团。',
      threeContent: '必要时调度金龙水库清水。',
      threePointPosition: {
        lng: 115.10488545,
        lat: 27.27678110
@@ -244,7 +240,7 @@
  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) {
@@ -271,7 +267,7 @@
  dynamicVectorLayer.addOverlay(fourCircle)

  let fourContent = new DC.DivIcon(
    new DC.Position(item.fourPointPosition.lng, item.fourPointPosition.lat, 70),
    new DC.Position(item.fourPointPosition.lng, item.fourPointPosition.lat, item.fourPointPosition.ele),
    `<div class="dynamic-map-popup">
                  <div class="content-wrap">
                    <div class="content">
@@ -298,7 +294,7 @@
      dynamicVectorLayer.addOverlay(fiveCircle)

      let fiveContent = new DC.DivIcon(
        new DC.Position(item.fivePointPosition.lng, item.fivePointPosition.lat, 70),
        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">
@@ -326,7 +322,7 @@
            dynamicVectorLayer.addOverlay(sixCircle)

            let sixContent = new DC.DivIcon(
              new DC.Position(item.sixPointPosition.lng, item.sixPointPosition.lat, 70),
              new DC.Position(item.sixPointPosition.lng, item.sixPointPosition.lat, item.sixPointPosition.ele),
              `<div class="dynamic-map-popup">
                              <div class="content-wrap">
                                <div class="content">
@@ -393,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">
@@ -414,22 +410,36 @@
}

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

  let threeContent = new DC.DivIcon(
    new DC.Position(item.threePointPosition.lng, item.threePointPosition.lat, 70),
    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">
@@ -488,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">
@@ -516,7 +526,9 @@
          })
        } else {
          twoFun(item, () => {
            publicFun(item)
            createLinePath(item, () => {
              publicFun(item)
            })
          })
        }
      })