环境风险图层控制

seatonwan9

2021-05-28 7f1be6bc4e0da71ce6476232512013f2d20972cc

环境风险图层控制

 public/assets/environmentRisk.json

 public/assets/environmentRiskPoint.json

New file
@@ -0,0 +1,91 @@
[
  [
    {
      "no": 1,
      "company": "扬子石化",
      "plate": "炼油板块",
      "unitname": "芳烃厂、炼油厂",
      "riskname": "硫回收装置大量酸性气紧急排放环境风险",
      "depiction": "R/Q描述：115.48。\nM值描述：30分。1. 氧化工艺， 10；2.1# 硫回收装置雨水系统防控措施不完善， 10 分；3. 硫回收装置毒性气体处置装备不完善， 10 分。 E界定因素： E1。 环境风险源周边5km范围内居住区、 医疗卫生机构、 文化教育机构、 科研单位、 行政机关、 企事业单位、 商场、 公园等人口总数5万人以上； 或0 .5 km范围内社会人口总数大于1000人。 ",
      "after": "R4(115.48)M1(10)E1",
      "Longitude": 118.7936111111,
      "Latitude": 32.2583305556,
      "iconType": 1
    },
    {
      "no": 2,
      "company": "扬子石化",
      "plate": "化工板块",
      "unitname": "水厂",
      "riskname": "净一污水处理装置超标排放风险",
      "depiction": "1.环境风险物质数量与临界量比值评估\n环境风险物质为：COD大于10000mg/L的废液，总量250t，临界值10t，R=25，计为R3。 2. 环境风险控制水平M评估（ 1） 设备质量管理评估： 存在设备超期使用或降等级使用， M值计10；（ 2） 环境风险监测预警措施评估： 环境监测因子不完善， M值计5；（ 3） 环境风险防控措施有效性评估： 环境风险源具备有效的手动紧急关断措施， M值计3； 事故水储存能力不够， M值计10； 汇总M = 28， 15≤ M < 30， 环境风险控制水平为M2类。  3. 环境风险受体敏感性E评估  1# 排口处于长江水体， 下游10km范围内有饮用水水源保护区特殊生态系统等多类环境风险受体， 受体风险类型E1。 ",
      "after": "R3(25)M1(10)E1",
      "Longitude": 118.8174111111,
      "Latitude": 32.2429611111,
      "iconType": 1
    }
  ],[
      {
        "no": 1,
        "company": "长岭炼化",
        "plate": "化工板块",
        "unitname": "化工部",
        "riskname": "环氧丙烷联合装置",
        "depiction": "R描述：90.4585 M值描述：25   1、涉及易燃易爆物质 10   2、一般生产安全事故隐患未完成整改(环氧丙烷（甲B类液体）的装车未采用液下装卸车鹤管已在设计；甲醇加氢反应器无安全设施项目正在设计；双氧水装置萃取塔紧急排放不当项目已在设计；环氧丙烷反应器紧急排放风险已制定预案。) 10    3、所在厂区清净雨水通过自流方式排出厂界 5     E界定因素：排水进入受纳河流最大流速时，24小时流经范围内涉跨国界或省界的E1",
        "after": "R3(90)M2(25)E1",
        "Longitude": 113.36571,
        "Latitude": 29.54677,
        "iconType": 2
      },
      {
        "no": 2,
        "company": "长岭炼化",
        "plate": "化工板块",
        "unitname": "港口部",
        "riskname": "码头（0708#油品）",
        "depiction": "R/Q描述：Q值：29.18 M值描述：M值：30 1、未按规定或政府要求设置环境风险物质泄漏监测预警措施，5； 2紧急切断阀为手动操作方式，5； 3、作业区污水收集措施不完善，10； 4、驳位至陆地管道悬空，引桥防泄漏措施不完善，10。 E界定因素：码头位于长江沿岸，24小时流经范围跨省（至湖北）",
        "after": "Q3(29)M3(30)E1",
        "Longitude": 113.2917,
        "Latitude": 29.60036,
        "iconType": 2
      }
  ],[
      {
        "no": 1,
        "company": "长岭炼化",
        "plate": "化工板块",
        "unitname": "港口部",
        "riskname": "码头（0506#油品）",
        "depiction": "R/Q描述：Q值：19.71 M值描述：M值：30 1、未按规定或政府要求设置环境风险物质泄漏监测预警措施，5； 2紧急切断阀为手动操作方式，5； 3、作业区污水收集措施不完善，10； 4、驳位至陆地管道悬空，引桥防泄漏措施不完善，10。 E界定因素：码头位于长江沿岸，24小时流经范围跨省（至湖北）",
        "after": "Q3(19)M3(30)E1",
        "Longitude": 113.27935,
        "Latitude": 29.59832,
        "iconType": 3
      },
      {
        "no": 2,
        "company": "长岭炼化",
        "plate": "化工板块",
        "unitname": "港口部",
        "riskname": "码头（0506#化学品）",
        "depiction": "R/Q描述：2.108。M值描述：30分。1.未按规定或政府要求设置环境风险物质泄漏监测预警措施，5分；2.紧急切断阀为手动操作方式，5分；3.作业区污水收集措施不完善，10分；4.驳位至陆地管道悬空，引桥防泄漏措施不完善，10分。E界定因素：码头位于长江沿岸，24小时流经范围跨省（至湖北）。",
        "after": "R3(2.1)M3(30)E2",
        "Longitude": 113.28155,
        "Latitude": 29.59842,
        "iconType": 3
      }
  ],[
      {
        "no": 1,
        "company": "中韩石化",
        "plate": "炼油板块",
        "unitname": "炼油二部",
        "riskname": "1#催化裂化装置",
        "depiction": "R值：1#催化承担中石化武汉分公司重质油加工任务，评级为R3。M值：装置涉及危险工艺，裂解（裂化）工艺，高温，工艺温度≥300℃，10分；雨水排放口非提升排放，5分：评为M2。E值：环境受体为长江，下游10km阳逻电厂取水口；判为E1。",
        "after": "R3M2E1",
        "Longitude": 114.44016,
        "Latitude": 30.65305,
        "iconType": 4
      }
  ]
]

 public/assets/images/map/environmentRisk/risk_green.png

 public/assets/images/map/environmentRisk/risk_red.png

 public/assets/images/map/environmentRisk/risk_sandybrown.png

 public/assets/images/map/environmentRisk/risk_yellow.png

 src/api/mapApi.js

@@ -89,8 +89,11 @@
  getSourcesPoll (data) {
    return axios.get(mapUrl.getSourcesPoll, data)
  },
  getRiskEnterprise (data) {
    return axios.get('/assets/riskEnterprise.json', data)
  getEnvironmentRisk (data) {
    return axios.get('/assets/environmentRisk.json', data)
  },
  getEnvironmentRiskPoint (data) {
    return axios.get('/assets/environmentRiskPoint.json', data)
  },
  getPollutionSourceStatistics (data) {
    return axios.get('/assets/pollutionSource.json', data)

 src/components/LayerController/logic/EnvironmentRisk.js

@@ -1,8 +1,6 @@
/**
 * 环境风险
 * 环境风险统计图
 */
// const EnvironmentRiskIndex = require('@components/base-page/').default

// 请求接口数据
const mapApi = require('../../../api/mapApi').default
// 使用封装方法
@@ -11,46 +9,53 @@
const echarts = require('echarts/lib/echarts')

module.exports = function () {
  // 存放环形图的数组
  let riskLayerGroup = []
  let animalService = null
  // 环形统计图数组
  let riskLayerGroup = null

  /**
   * 返回marker对象数组
   * 初始化图层数组
   * @param L leaflet对象
   */
  this.init = async (layer, L) => {
    this.animalService = new AnimalService({
    animalService = new AnimalService({
      L: L,
      layer: layer
    })
    layer.addLayer(riskLayerGroup)
  }

  /**
   * 加载图层
   * @returns {Promise<void>}
   */
  this.start = async () => {
    riskLayerGroup = window.layerFactory.L.featureGroup().addTo(window.layerFactory.map)
    const result = await mapApi.getRiskEnterprise()
    if (riskLayerGroup) { // 图层全选时，清理图层数组并重新加载
      riskLayerGroup.remove()
      riskLayerGroup = null
    }
    riskLayerGroup = animalService.L.featureGroup().addTo(animalService.layer)
    const result = await mapApi.getEnvironmentRisk()
    const features = result.features
    for (var i = 0; i < features.length; i++) {
    for (let i = 0; i < features.length; i++) {
      const feature = features[i]
      const geometry = feature.geometry
      const properties = feature.properties
      const qyId = properties.QY_ID
      // const qyJc = properties.QY_JC
      const distract = properties.DISTRACT
      const coordinates = geometry.coordinates
      if (distract !== '长江沿线') {
        continue
      }
      window.layerFactory.L.marker([coordinates[1], coordinates[0]], {
        icon: this.animalService.L.divIcon({
      animalService.L.marker([coordinates[1], coordinates[0]], {
        icon: animalService.L.divIcon({
          className: '',
          iconAnchor: [15, 45],
          iconSize: [40, 40],
          html: '<div style="width: 40px; height: 40px; background-color: rgba(255,255,255,1); position: relative; border-radius: 50%;"></div>'
        })
      }).addTo(riskLayerGroup)
      // this.animalService.layer.addLayer(bgMarker)
      window.layerFactory.L.marker([coordinates[1], coordinates[0]], {
        icon: this.animalService.L.divIcon({
      animalService.L.marker([coordinates[1], coordinates[0]], {
        icon: animalService.L.divIcon({
          className: '',
          iconAnchor: [30, 60],
          iconSize: [70, 70],
@@ -61,35 +66,23 @@
    }
  }

  /**
   * 清除图层
   */
  this.destory = () => {
    if (riskLayerGroup) {
      riskLayerGroup.remove()
      riskLayerGroup = null
    }
  }

  /**
   * tips
   * @param layer
   * @returns {string}
   */
  this.bindTooltip = (layer) => {
  }

  /**
   * 点击弹窗
   * @param e
   */
  this.clickListener = (e) => {
  }

  /**
   * 环形饼图
   * Echarts环形饼图
   * @param properties
   */
  function chartRender (properties) {
    const qyId = properties.QY_ID
    const qyjc = properties.QY_JC
    // const qyQc = properties.QY_QC
    const num = properties.QY_NUM
    const oneLevel = properties.QY_ONELEVEL
    const twoLevel = properties.QY_TWOLEVEL
@@ -150,8 +143,5 @@
      }]
    }
    o.setOption(option)
    /* o.on('click', function (params) {
        map.flyTo(L.latLng([params.data.y, params.data.x]), 15)
    }) */
  }
}

 src/components/LayerController/logic/RiskSource.js

New file
@@ -0,0 +1,98 @@
/**
 * 环境风险源
 */
// 信息组件
const RiskSourceIndex = require('../../../components/base-page/WasteSolid/WasteSolidIndex.vue').default
const riskRed = '/assets/images/map/environmentRisk/risk_red.png'
const riskSandybrown = '/assets/images/map/environmentRisk/risk_sandybrown.png'
const riskYellow = '/assets/images/map/environmentRisk/risk_yellow.png'
const riskGreen = '/assets/images/map/environmentRisk/risk_green.png'
// 公共方法 panTo() 引用
const { setPanTo } = require('../../../utils/utils')
// 请求接口数据
const mapApi = require('../../../api/mapApi').default
// 使用封装方法
const AnimalService = require('../service/AnimalService').default

module.exports = function () {
  /**
   * 初始化并加载图层
   * @param L leaflet对象
   */
  this.init = async (layer, L, config) => {
    this.animalService = new AnimalService({
      L: L,
      layer: layer
    })
    const result = await mapApi.getEnvironmentRiskPoint() // 数据
    const data = result[config.level] // 此处级别对应data数组下标，作为参数取数标识
    for (let i = 0; i < data.length; i++) {
      const postion = [data[i].Latitude, data[i].Longitude] // 坐标
      const iconUrl = this.riskIconUrl(data[i].iconType) // 风险源图标
      const marker = L.marker(postion, {
        totransferData: data[i],
        icon: L.icon({
          iconUrl: iconUrl,
          iconSize: [20, 20],
          iconAnchor: [10, 10]
        })
      })
      layer.addLayer(marker)
    }
  }

  /**
   * 提示窗
   * @param layer
   * @returns {string}
   */
  this.bindTooltip = (layer) => {
    return layer.options.totransferData.riskname
  }

  /**
   * 信息弹窗
   * @param e
   */
  this.clickListener = (e) => {
    // 点击marker的pulse()光波
    this.animalService.pulseEffect(e.latlng)
    /* flyTo()弹出框平移事件 */
    setPanTo(e.latlng, 200)
    // 弹框标题
    const title = e.layer.options.totransferData.Name
    window.$layer.open({
      content: {
        comp: RiskSourceIndex, // 组件
        parent: this, // 父组件
        data: { // 传递的参数
          storagePlaceId: e.layer.options.totransferData.StoragePlaceId
        }
      },
      title: title // 标题
    })
  }

  // 图标配置
  this.riskIconUrl = (t) => {
    let iconUrl = null
    switch (t) {
      case 1:
        iconUrl = riskRed
        break
      case 2:
        iconUrl = riskSandybrown
        break
      case 3:
        iconUrl = riskYellow
        break
      case 4:
        iconUrl = riskGreen
        break
      default:
        iconUrl = riskGreen
        break
    }
    return iconUrl
  }
}

 src/components/LayerController/modules/LcServiceLayer.vue

@@ -106,7 +106,7 @@
            item1.type = 1 // 半选
          }
          if (item1.name === '企业应急') {
            console.log(item1)
            // console.log(item1)
            bus.$emit('changeSearchBar', item1)
          }
          // console.log(item1.layers.length, item1.istrue, item1.isfalse, item1.type)

 src/components/LayerController/service/LayerFactory.js

@@ -132,7 +132,7 @@
        layer.addTo(this.map)
      }
    } else {
      logic && logic.init(this.addLayer(config), this.L)
      logic && logic.init(this.addLayer(config), this.L, config)
    }
    logic && logic.start && logic.start()
    this.wmsLayerService && this.wmsLayerService.add(config)

 src/conf/Constants.js

@@ -23,7 +23,11 @@
  sewersAreaGs: 'Company.js',
  pipesegment: 'PipeLineAnimal.js',
  pollutionSources: 'SourcesPollution.js',
  envRiskChart: 'EnvironmentRisk.js'
  envRiskChart: 'EnvironmentRisk.js', // 风险统计图
  envRiskMajor: 'RiskSource.js', // 重大风险源
  envRiskFirst: 'RiskSource.js', // 一级风险源
  envRiskSecond: 'RiskSource.js', // 二级风险源
  envRiskThird: 'RiskSource.js' // 三级风险源
}

export const STYLES = {

 src/conf/layers/LayerEnvRisk.js

@@ -14,20 +14,21 @@
      checked: false, // 默认选中状态
      color: ''
    },
    {
      code: 'envRiskMaterial',
      name: '物资库',
      sname: '物资库',
      checked: false, // 默认选中状态
      color: ''
    },
    // {
    //   code: 'envRiskMaterial',
    //   name: '物资库',
    //   sname: '物资库',
    //   checked: false, // 默认选中状态
    //   color: ''
    // },
    {
      code: 'envRiskMajor',
      name: '重大风险',
      sname: '重大风险',
      checked: false, // 默认选中状态
      minZoom: 10,
      color: 'red'
      color: 'red',
      level: 0
    },
    {
      code: 'envRiskFirst',
@@ -36,7 +37,8 @@
      checked: false, // 默认选中状态
      type: 0,
      minZoom: 10,
      color: 'sandybrown'
      color: 'sandybrown',
      level: 1
    },
    {
      code: 'envRiskSecond',
@@ -45,7 +47,8 @@
      checked: false,
      type: 0,
      minZoom: 10,
      color: 'yellow'
      color: 'yellow',
      level: 2
    },
    {
      code: 'envRiskThird',
@@ -54,7 +57,8 @@
      checked: false,
      type: 0,
      minZoom: 10,
      color: 'green'
      color: 'green',
      level: 3
    }
  ]
}