新增环境风险源图表信息

seatonwan9

2021-05-29 ce9ae368e42abf92a39f73654e301e680f2b4394

新增环境风险源图表信息

 public/assets/environmentRiskPoint.json

@@ -1,7 +1,7 @@
[
  [
    {
      "no": 1,
      "no": 0,
      "company": "扬子石化",
      "plate": "炼油板块",
      "unitname": "芳烃厂、炼油厂",
@@ -10,10 +10,10 @@
      "after": "R4(115.48)M1(10)E1",
      "Longitude": 118.7936111111,
      "Latitude": 32.2583305556,
      "iconType": 1
      "riskLevel": 1
    },
    {
      "no": 2,
      "no": 0,
      "company": "扬子石化",
      "plate": "化工板块",
      "unitname": "水厂",
@@ -22,7 +22,7 @@
      "after": "R3(25)M1(10)E1",
      "Longitude": 118.8174111111,
      "Latitude": 32.2429611111,
      "iconType": 1
      "riskLevel": 1
    }
  ],[
      {
@@ -35,10 +35,10 @@
        "after": "R3(90)M2(25)E1",
        "Longitude": 113.36571,
        "Latitude": 29.54677,
        "iconType": 2
        "riskLevel": 2
      },
      {
        "no": 2,
        "no": 1,
        "company": "长岭炼化",
        "plate": "化工板块",
        "unitname": "港口部",
@@ -47,11 +47,11 @@
        "after": "Q3(29)M3(30)E1",
        "Longitude": 113.2917,
        "Latitude": 29.60036,
        "iconType": 2
        "riskLevel": 2
      }
  ],[
      {
        "no": 1,
        "no": 2,
        "company": "长岭炼化",
        "plate": "化工板块",
        "unitname": "港口部",
@@ -60,7 +60,7 @@
        "after": "Q3(19)M3(30)E1",
        "Longitude": 113.27935,
        "Latitude": 29.59832,
        "iconType": 3
        "riskLevel": 3
      },
      {
        "no": 2,
@@ -72,11 +72,11 @@
        "after": "R3(2.1)M3(30)E2",
        "Longitude": 113.28155,
        "Latitude": 29.59842,
        "iconType": 3
        "riskLevel": 3
      }
  ],[
      {
        "no": 1,
        "no": 3,
        "company": "中韩石化",
        "plate": "炼油板块",
        "unitname": "炼油二部",
@@ -85,7 +85,7 @@
        "after": "R3M2E1",
        "Longitude": 114.44016,
        "Latitude": 30.65305,
        "iconType": 4
        "riskLevel": 4
      }
  ]
]

 src/components/LayerController/logic/EnvironmentRisk.js

@@ -9,7 +9,6 @@
const echarts = require('echarts/lib/echarts')

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

@@ -18,7 +17,7 @@
   * @param L leaflet对象
   */
  this.init = async (layer, L) => {
    animalService = new AnimalService({
    this.animalService = new AnimalService({
      L: L,
      layer: layer
    })
@@ -33,7 +32,7 @@
      riskLayerGroup.remove()
      riskLayerGroup = null
    }
    riskLayerGroup = animalService.L.featureGroup().addTo(animalService.layer)
    riskLayerGroup = this.animalService.L.featureGroup().addTo(this.animalService.layer)
    const result = await mapApi.getEnvironmentRisk()
    const features = result.features
    for (let i = 0; i < features.length; i++) {
@@ -46,16 +45,16 @@
      if (distract !== '长江沿线') {
        continue
      }
      animalService.L.marker([coordinates[1], coordinates[0]], {
        icon: animalService.L.divIcon({
      this.animalService.L.marker([coordinates[1], coordinates[0]], {
        icon: this.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)
      animalService.L.marker([coordinates[1], coordinates[0]], {
        icon: animalService.L.divIcon({
      this.animalService.L.marker([coordinates[1], coordinates[0]], {
        icon: this.animalService.L.divIcon({
          className: '',
          iconAnchor: [30, 60],
          iconSize: [70, 70],

 src/components/LayerController/logic/RiskSource.js

@@ -2,7 +2,7 @@
 * 环境风险源
 */
// 信息组件
const RiskSourceIndex = require('../../../components/base-page/WasteSolid/WasteSolidIndex.vue').default
const RiskSourceIndex = require('../../base-page/RiskSource/RiskSourceIndex.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'
@@ -28,7 +28,7 @@
    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 iconUrl = this.riskIconUrl(data[i].riskLevel) // 风险源图标
      const marker = L.marker(postion, {
        totransferData: data[i],
        icon: L.icon({
@@ -55,9 +55,9 @@
   * @param e
   */
  this.clickListener = (e) => {
    // 点击marker的pulse()光波
    // 脉冲效果
    this.animalService.pulseEffect(e.latlng)
    /* flyTo()弹出框平移事件 */
    // 信息弹窗平移
    setPanTo(e.latlng, 200)
    // 弹框标题
    const title = e.layer.options.totransferData.Name
@@ -66,7 +66,7 @@
        comp: RiskSourceIndex, // 组件
        parent: this, // 父组件
        data: { // 传递的参数
          storagePlaceId: e.layer.options.totransferData.StoragePlaceId
          riskSourceId: e.layer.options.totransferData.no
        }
      },
      title: title // 标题

 src/components/base-page/RiskSource/PublicTable.vue

New file
@@ -0,0 +1,246 @@
<template>
  <div class="slotChildTable">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <div class="main-table">
      <div class="">
        <ul>
          <li>风险评估过程</li>
          <li>初始评价结果:{{ riskSourceAssess }}</li>
        </ul>
      </div>
      <div>
        <table border="1">
          <tr>
            <th colspan="2">风险控制</th>
            <th>评估指标</th>
            <th>分值</th>
          </tr>
          <tr>
            <td rowspan="3" colspan="2">安全管理（25分）</td>
            <td>重大或较大生产安全事故隐患未完成整改的记25分。</td>
            <td rowspan="3">25</td>
          </tr>
          <tr>
            <td>一般生产安全事故隐患未完成整改的，每一项记10分，记满25分为止。</td>
          </tr>
          <tr>
            <td>不存在上述问题的记0分。</td>
          </tr>
          <tr>
            <td rowspan="3" colspan="2">设备质量管理（25分）</td>
            <td>存在下列任意一项的记25分：
              （1）未按规定进行设备设施检测、检验的；
              （2）检测结果不能满足设备设施质量要求的；
              （3）未按设计标准建设的；
              （4）使用的设备设施等级不满足要求的。
            </td>
            <td rowspan="3">10</td>
          </tr>
          <tr>
            <td>存在下列情况的，每项记10分，记满25分为止：
              （1）设备设施超期使用且未经过评估的；
              （2）设备设施降等级使用未经评估的；
              （3）设计变更未经主管部门批准的。
            </td>
          </tr>
          <tr>
            <td>不存在上述问题的记0分。</td>
          </tr>
          <tr>
            <td rowspan="9">环境风险防控措施有效性（50分）</td>
            <td rowspan="2">事故紧急关断措施（15分）</td>
            <td>环境风险源不具备有效的事故紧急关断措施的（符合紧急关断时效要）记15分。</td>
            <td rowspan="2">15</td>
          </tr>
          <tr>
            <td>环境风险源具备有效的事故紧急关断措施的（符合紧急关断时效要求）记0分。</td>
          </tr>
          <tr>
            <td rowspan="3">建设项目环境风险防控要求落实（10分）</td>
            <td>无事故风险物质处置措施记15分。</td>
            <td rowspan="3">10</td>
          </tr>
          <tr>
            <td>存在以下情况的，每项记5分，记满15分为止：
              （1）井场未按要求设排水监控池的；
              （2）井场未按要求设围堰的；
              （3）存在两个及以上雨水排放口的。
            </td>
          </tr>
          <tr>
            <td>不存在上述问题的记0分。</td>
          </tr>
          <tr>
            <td rowspan="2">建设项目环境风险防控要求落实（10分）</td>
            <td>建设项目环境影响评价及其批复提出的环境风险防控措施不落实的记10分。</td>
            <td rowspan="2">0</td>
          </tr>
          <tr>
            <td>不存在上述问题的记0分。</td>
          </tr>
          <tr>
            <td rowspan="2">环境风险源事故现场处置方案（10分）</td>
            <td>存在以下情况的，每项记5分，记满10分为止：
              （1）无环境风险源事故处置方案的或环境风险源事故处置方案无环保内容的；
              （2）未按要求开展演练并记录的；
              （3）未按要求进行备案的。
            </td>
            <td rowspan="2">5</td>
          </tr>
          <tr>
            <td>不存在上述问题的记0分。</td>
          </tr>
        </table>
      </div>
      <el-table :data="riskSourceDetail" style="width: 100%" height="200px" :row-class-name="tableRowClassName">
        <el-table-column v-for="(item, index) in listLabel" :key="index" :prop="item.prop"
                         :label="item.label" :show-overflow-tooltip="true"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import mapApi from '@/api/mapApi'

export default {
  name: 'PublicTable',
  data () {
    return {
      riskSourceDetail: [],
      riskSourceAssess: '根据风险源周边环境风险受体3种类型，按照环境风险物质量(Q/R)、环境风险控制水平(M)矩阵，确定环境风险等级',
      listLabel: [
        {
          label: '序号',
          prop: 'no'
        },
        {
          label: '名称',
          prop: 'riskname'
        },
        {
          label: '评估等级',
          prop: 'riskLevel'
        },
        {
          label: '等级特征',
          prop: 'after'
        },
        {
          label: 'Q值',
          prop: 'riskLevel'
        },
        {
          label: 'M值',
          prop: 'riskLevel'
        },
        {
          label: 'E值',
          prop: 'riskLevel'
        }
      ]
    }
  },
  mounted () {
    this.$nextTick(() => {
    })
  },
  methods: {
    async refsRiskDataTable (param) {
      // 此处接口为根据风险源ID获取风险源评估数据（暂时为模拟数据）
      const result = await mapApi.getEnvironmentRiskPoint(param)
      this.riskSourceDetail = result[param.riskSourceId]
    },
    // 隔行颜色设置
    tableRowClassName ({
      row,
      rowIndex
    }) {
      if (rowIndex % 2 === 0) {
        return 'warning-row'
      } else if (rowIndex % 2 === 1) {
        return 'success-row'
      }
      return ''
    }
  }
}
</script>

<style lang="less" scoped>

/deep/ .el-table thead tr {
  color: #02a6b5 !important;
  //.el-table .has-gutter tr th .cell {
  //  //color: #fff; 435
  //}
}

/deep/ .el-table td {
  border-bottom: none !important;
}

/deep/ .el-table .has-gutter tr th {
  border: none;
}

/deep/ .el-table th.is-leaf {
  border-bottom: none !important;
}

/deep/ .el-table td {
  height: 30px !important;
  line-height: 30px !important;
}

/deep/ .el-table tbody tr:hover > td {
  background: none !important
}

.slotChildTable {
  position: relative;
  background: rgba(33, 41, 69, 0.9);

  .main-table {
    border: 1px #396d83 solid;
  }
}

.slotChildTable span {
  padding: 6px;
  border-style: solid;
  border-color: #02a6b5;
}

.slotChildTable span:nth-child(1) {
  position: absolute;
  left: -1px;
  top: -1px;
  border-width: 1px 0 0 1px;
}

.slotChildTable span:nth-child(2) {
  position: absolute;
  right: -1px;
  top: -1px;
  border-width: 1px 1px 0 0;
}

.slotChildTable span:nth-child(3) {
  position: absolute;
  right: -1px;
  bottom: -1px;
  border-width: 0 1px 1px 0;
}

.slotChildTable span:nth-child(4) {
  position: absolute;
  left: -1px;
  bottom: -1px;
  border-width: 0 0 1px 1px;
}

</style>

 src/components/base-page/RiskSource/PublicTabs.vue

New file
@@ -0,0 +1,120 @@
<template>
  <div class="slotChildTabs">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <div class="tabs-content">
      <ul>
        <li>风险名称:{{ riskSourceBaseInfo.riskname }}</li>
        <li>风险级别:{{ riskSourceBaseInfo.riskLevel }}</li>
        <li>风险描述:{{ riskSourceBaseInfo.depiction }}</li>
        <li class="lastli"></li>
      </ul>
    </div>
  </div>
</template>

<script>
import mapApi from '@/api/mapApi'

export default {
  name: 'PublicTabs',
  data () {
    return {
      riskSourceBaseInfo: []
    }
  },
  mounted () {
    this.$nextTick(() => {
      // this.refsDataTabs()
    })
  },
  methods: {
    async refsRiskDataTabs (param) {
      // 此处接口为根据风险源ID获取风险源基本信息（暂时为模拟数据）
      const result = await mapApi.getEnvironmentRiskPoint(param)
      this.riskSourceBaseInfo = result[param.riskSourceId][0]
    }
  }
}
</script>

<style scoped lang="less">

.slotChildTabs {
  position: relative;
  margin-bottom: 0.1rem;
  background-color: @background-color;

  .tabs-content {
    font-size: 0.06rem;
    font-weight: normal;
    padding: 0.04rem 0;
    border: 1px solid #396d83;

    ul {
      display: flex;
      align-items: center;
      justify-content: space-around;
      flex-wrap: wrap;

      li {
        margin-bottom: 0.04rem;
        text-align: center;
        min-width: 30%;
        background-color: #243a55;
        color: #00d0f9;
        border-radius: 0.02rem;
        font-size: 0.08rem;
        line-height: 0.09rem;
        padding: 0.03rem .5%;
      }

      .lastli {
        visibility: hidden
      }
    }
  }
}

.slotChildTabs span:nth-child(1) {
  position: absolute;
  left: -1px;
  top: -1px;
  padding: 6px;
  border-style: solid;
  border-color: #02a6b5;
  border-width: 1px 0 0 1px;
}

.slotChildTabs span:nth-child(2) {
  position: absolute;
  right: -1px;
  top: -1px;
  padding: 6px;
  border-style: solid;
  border-color: #02a6b5;
  border-width: 1px 1px 0 0;
}

.slotChildTabs span:nth-child(3) {
  position: absolute;
  right: -1px;
  bottom: -1px;
  padding: 6px;
  border-style: solid;
  border-color: #02a6b5;
  border-width: 0 1px 1px 0;
}

.slotChildTabs span:nth-child(4) {
  position: absolute;
  left: -1px;
  bottom: -1px;
  padding: 6px;
  border-style: solid;
  border-color: #02a6b5;
  border-width: 0 0 1px 1px;
}
</style>

 src/components/base-page/RiskSource/RiskSourceIndex.vue

New file
@@ -0,0 +1,100 @@
<template>
  <public-sector>
    <template v-slot:tabs>
      <public-tabs ref='refsRiskTabsData'></public-tabs>
    </template>
    <template v-slot:publicPart>
      <public-table ref="refsRiskTableData"></public-table>
    </template>
<!--    <template v-slot:video>-->
<!--      <public-video></public-video>-->
<!--    </template>-->
  </public-sector>
</template>

<script>

import PublicTabs from '@components/base-page/RiskSource/PublicTabs'
import PublicTable from '@components/base-page/RiskSource/PublicTable'
// import PublicVideo from '@components/base-page/PublicVideo'
import PublicSector from '@components/base-page/PublicSector'

export default {
  name: 'RiskSourceIndex',
  props: ['riskSourceId'],
  components: {
    PublicSector,
    PublicTabs,
    PublicTable
    // PublicVideo
  },
  mounted () {
    this.$nextTick(() => {
      this.refsData()
    })
  },
  data () {
    return {}
  },
  methods: {
    refsData () {
      const param = {
        riskSourceId: this.riskSourceId
      }
      this.$refs.refsRiskTabsData.refsRiskDataTabs(param)
      this.$refs.refsRiskTableData.refsRiskDataTable(param)
    }
  }
}
</script>

<style lang="less" scoped>
.public-bounced {
  z-index: 2000;
  position: absolute;
  top: 35%;
  left: 20%;

  .public-bounced-title {
    cursor: move;
    height: 0.1rem;
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;

    span {
      color: #f4f7ff;
      margin: 0 15px;
      font-size: 14px;
    }

    i {
      color: #C0C4CC;
      margin: 0 15px;
      font-size: 22px;
      cursor: pointer;
    }

    i:hover {
      color: #00fff6;
    }
  }

  .public-bounced-content {
    //padding: 0.1rem;
    display: flex;
    //align-items: center;
    //justify-content: space-around;

    .public-bounced-content-left {
      //width: 4.8rem;
    }

    .public-bounced-content-right {
      //width: 3rem;
      margin-left: 0.1rem;
    }
  }
}
</style>