智慧园区前端大屏
shuishen
2025-01-20 eba3830c16daa6ad1919dc3ea99cfd0d5db5738b
突发事件模拟菜单显示处理
突然事件模拟案例调整
5 files modified
229 ■■■■ changed files
src/pages/main/components/mainMenu.vue 16 ●●●● patch | view | raw | blame | history
src/pages/single/components/mainMenu.vue 16 ●●●● patch | view | raw | blame | history
src/router/index.js 14 ●●●● patch | view | raw | blame | history
src/views/pd/components/dynamicPanel.vue 179 ●●●● patch | view | raw | blame | history
src/views/pd/index.vue 4 ●●●● patch | view | raw | blame | history
src/pages/main/components/mainMenu.vue
@@ -43,14 +43,14 @@
      menuName: '救援队伍',
      path: '/layout/single/rt'
    },
    /*    {
         menuName: '突发事件模拟',
         path: '/layout/map/main/pd'
       },
       {
         menuName: '作战图',
         path: '/layout/single/ochart'
       }, */
    {
      menuName: '突发事件模拟',
      path: '/layout/map/main/pd'
    },
    //  {
    //    menuName: '作战图',
    //    path: '/layout/single/ochart'
    //  },
  ]
)
src/pages/single/components/mainMenu.vue
@@ -43,14 +43,14 @@
      menuName: '救援队伍',
      path: '/layout/single/rt'
    },
    /*  {
       menuName: '突发事件模拟',
       path: '/layout/map/main/pd'
     },
     {
       menuName: '作战图',
       path: '/layout/single/ochart'
     }, */
    {
      menuName: '突发事件模拟',
      path: '/layout/map/main/pd'
    },
    //  {
    //    menuName: '作战图',
    //    path: '/layout/single/ochart'
    //  },
  ]
)
src/router/index.js
@@ -89,13 +89,13 @@
                },
                component: () => import('@/views/pac/index.vue')
              },
              // {
              //   path: 'pd',
              //   meta: {
              //     title: '突发事件模拟'
              //   },
              //   component: () => import('@/views/pd/index.vue')
              // },
              {
                path: 'pd',
                meta: {
                  title: '突发事件模拟'
                },
                component: () => import('@/views/pd/index.vue')
              },
            ]
          },
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-18 09:39:00
 * @LastEditTime: 2025-01-20 15:18:40
 * @FilePath: \bigScreen\src\views\pd\components\dynamicPanel.vue
 * @Description: 
 * 
@@ -27,169 +27,70 @@
    {
      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,
    },
    {
      key: 2,
      title: '典型案例2',
      content: '北片区碱类腐蚀性物质泄漏事故: 北片区某企业在生产过程中操作失误,大量含碱废水泄漏,如不采取措施,将造成污染事故,影响到赣江下游水质。',
      oneCentent: '2024年09月16日14时,北片区某公司在生产过程中操作失误,大量含碱废水泄漏。企业关闭前置阀门,切断泄漏源。',
      onePointPosition: {
        lng: 115.10467136,
        lat: 27.29415383
      },
      onetime: 0,
      twoContent: '企业通过砂土等筑堤堵截泄漏废水,并引流至事故应急池。',
      twoPointPosition: {
        lng: 115.10545440,
        lat: 27.29439753
      },
      twotime: 10000,
      lineCenter: {
        lng: 115.10627858,
        lat: 27.29434439
      },
      linePosition: '115.10627726,27.29408853,64;115.10627703,27.29456132,64',
      lineTime: 5000,
      threeContent: '企业通过紧急处理,还有部分事故废水进入厂外雨水管网。',
      threePointPosition: {
        lng: 115.10627858,
        lat: 27.29434439
      },
      threetime: 10000,
      fourContent: '园区关闭北区雨水排口闸阀(拟建),拦截污染水体。',
      fourPointPosition: {
        lng: 115.10629605,
        lat: 27.29785816
      },
      fourtime: 10000,
      fiveContent: '园区启用北区公共应急池(拟建),将已拦截废水泵入应急池。',
      fivePointPosition: {
        lng: 115.106600,
        lat: 27.296891
      },
      fivetime: 15000,
      sixContent: '将拦截废水从应急池中通过北区污水提升泵站以及金工大道污水管网转移至绿源污水处理厂进行处置。',
      sixPointPosition: {
        lng: 115.10814596,
        lat: 27.27257473
      },
      sixtime: 20000,
      sevenContent: '排口下游展开应急监测,确保废水没有进入周边水系。',
      sevenContent: '流出园区外的污水由山外排水闸全部拦截,调集工程机械将蓄存的污水导入该应急空间;投放活性炭进行处置,处置完成经应急监测组检测达标后排放。',
      sevenPointPosition: {
        lng: 115.10542509,
        lat: 27.29924475
        lng: 116.314941,
        lat: 28.038030,
        ele: 30
      },
      seventime: 25000
    },
    {
      key: 3,
      title: '典型案例3',
      content: '危险化学品运输事故: 北片区某企业的危化品运输车辆发生侧翻,大量盐酸流至路面,如不采取措施,将造成污染事故,影响到赣江下游水质。',
      showModel: true,
      oneCentent: '2024年09月16日14时,北片区某公司的危化品运输车辆发生侧翻,大量盐酸流至路面。',
      onePointPosition: {
        lng: 115.10639803,
        lat: 27.27848014
      },
      onetime: 10000,
      twoContent: '立即关闭雨水闸阀。',
      twoPointPosition: {
        lng: 115.10665321,
        lat: 27.27720681
      },
      twotime: 13000,
      threeContent: '调度金龙水库清水,稀释污染团。',
      threePointPosition: {
        lng: 115.10488545,
        lat: 27.27678110
      },
      threetime: 13000,
      fourContent: '转输至江西粤鹏环保高新技术开发有限公司事故应急池。',
      fourPointPosition: {
        lng: 115.10499264,
        lat: 27.28048591
      },
      fourtime: 18000,
      fiveContent: '转输至江西腾龙源环保科技有限公司事故应急池。',
      fivePointPosition: {
        lng: 115.10332118,
        lat: 27.27831698
      },
      fivetime: 23000,
      sixContent: '根据应急监测方案,立即开展监测,确保污染废水未进入外界水体。',
      sixPointPosition: {
        lng: 115.10665321,
        lat: 27.27720681
      },
      sixtime: 28000,
      seventime: 30000
    },
  ]
})
@@ -271,7 +172,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 +199,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 +227,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 +294,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">
@@ -443,7 +344,7 @@
  }
  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">
@@ -502,7 +403,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">
src/views/pd/index.vue
@@ -21,11 +21,11 @@
}
nextTick(() => {
  EventBus.emit('restHandleCheckChange', `3-3-4`)
  EventBus.emit('restHandleCheckChange', `3-9`)
})
onUnmounted(() => {
  EventBus.emit('restHandleDelChange', `3-3-4`)
  EventBus.emit('restHandleDelChange', `3-9`)
})
</script>