Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetw...

陈泽平

2021-05-29 bbce81a396e22743b1fbf0c54fed05ab79c99e72

Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetwork into develop

 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/assets/css/map/map-panel-style.less

@@ -545,7 +545,7 @@
.panel-title {
  color: @color-title;
  font-size: 18px;
  padding: 10px;
  padding: 5px 10px;
  text-align: center;
  border-bottom: 1px solid @background-color-split;
}
@@ -591,13 +591,14 @@
    padding: 7px 15px;
  }

  .el-button:hover {
.el-button:hover{
    background: @background-color;
    color: @color-highlight;
    border-color: @color-highlight;
  }

  .el-input__inner {

   .el-input__inner {
    color: #fff;
    text-align: center;
  }
@@ -834,4 +835,4 @@
  text-align: right;
  margin: 5px 0;
  color: @color;
}
}

 src/components/LayerController/LayerController.vue

@@ -265,7 +265,7 @@
    background:@background-color4;
    color:@color-tool;
    position: absolute;
    top:24px;
    top:20px;
    right:0.02rem;
    border:none;//1px solid @color-tool;
    width: 0.2rem;

 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>

 src/components/base-page/enterprise-emergency/DisposalEvent.vue

@@ -1,62 +1,72 @@
<template>
    <div class="disposal-event">
        <h3 class="panel-title">事件基本信息</h3>
        <el-form ref="form" :model="form" label-width="100px">
            <el-form-item label="事件名称：" prop="nameOfEvent">
                <label>{{ form.nameOfEvent }}</label>
            </el-form-item>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="事件位置：" prop="eventLocation">
                        <label>{{ form.eventLocation }}</label>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="位置描述：" prop="positionDesc">
                        <label>{{ form.positionDesc }}</label>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="事件单位：" prop="incidentUnit">
                        <label>{{ form.incidentUnit }}</label>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="事发时间：" prop="atTime">
                        <label>{{ form.atTime }}</label>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="事件描述：" prop="eventDesc" class="fixed-width">
                <label>{{ form.eventDesc }}</label>
            </el-form-item>
            <el-form-item label="附件：" prop="upload">
                <label>
                    <a href="javascript:">附件</a>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="javascript:">附件</a>
                </label>
            </el-form-item>
        </el-form>
        <h3 class="panel-title">预案匹配</h3>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="name" label="预案名称"></el-table-column>
            <el-table-column prop="define" label="预案定义"></el-table-column>
            <el-table-column prop="hierarchy" label="预案层级"></el-table-column>
            <el-table-column prop="classification" label="预案分类"></el-table-column>
            <el-table-column label="附件">
                <template>
                    <a href="javascript:">预案</a>
                </template>
            </el-table-column>
        </el-table>
        <div class="event-management">
            <el-button type="primary" size="mini" @click="ToManagement">事件处置</el-button>
            <el-button size="mini">关闭</el-button>
        </div>
  <div class="disposal-event">
    <h4 class="sub-title ">事件基本信息</h4>
    <div :model="form">
      <el-row>
        <el-col class="info-label" :span="6">事件名称：</el-col>
        <el-col class="info-text" :span="18">{{ form.nameOfEvent }}</el-col>
      </el-row>
      <el-row>
        <el-col class="info-label" :span="6">
          事件位置：
        </el-col>
        <el-col class="info-text" :span="18">
          <label>{{ form.eventLocation }}</label>
        </el-col>
      </el-row>
      <el-row>
        <el-col class="info-label" :span="6">
          位置描述：
        </el-col>
        <el-col class="info-text" :span="18">
          <label>{{ form.positionDesc }}</label>
        </el-col>
      </el-row>
      <el-row>
        <el-col class="info-label" :span="6">
          事件单位：
        </el-col>
        <el-col class="info-text" :span="18">
          {{ form.incidentUnit }}
        </el-col>
      </el-row>
      <el-row>
        <el-col class="info-label" :span="6">
          事发时间：
        </el-col>
        <el-col class="info-text" :span="18">
          {{ form.atTime }}
        </el-col>
      </el-row>
      <el-row>
        <el-col class="info-label" :span="6">事件描述：</el-col>
        <el-col class="info-text" :span="18">{{ form.eventDesc }}</el-col>
      </el-row>
      <el-row>
        <el-col class="info-label"  span="6">附件：</el-col>
        <el-col class="info-text" :span="18"><a class="link-btn" href="javascript:">附件</a>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <a class="link-btn" href="javascript:">附件</a>
        </el-col>
      </el-row>
    </div>
    <h3 class="sub-title">预案匹配</h3>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="预案名称"></el-table-column>
      <el-table-column prop="define" label="预案定义"></el-table-column>
      <el-table-column prop="hierarchy" label="预案层级"></el-table-column>
      <el-table-column prop="classification" label="预案分类"></el-table-column>
      <el-table-column label="附件">
        <template>
          <a class="link-btn" href="javascript:">预案</a>
        </template>
      </el-table-column>
    </el-table>
    <div class="event-management">
      <el-button type="primary" size="mini" @click="ToManagement">开始分析</el-button>
      <!--            <el-button size="mini">关闭</el-button>-->
    </div>
  </div>
</template>

<script>
@@ -110,31 +120,55 @@
    }
  },
  methods: {
    // 事件管理页面跳转
    // 开始分析
    ToManagement () {
      eventBus.$emit('events-reported', true)
      eventBus.$emit('event-handling', {})
    }
  }
}
</script>

<style lang="less" scoped>
    .fixed-width {
        width: 3.2459893rem;
        min-width: 3.2459893rem;
    }
.disposal-event {
  padding: 5px;

    /deep/ .el-form-item {
        margin: 5px 0;
    }
  .fixed-width {
    width: 3.2459893rem;
    min-width: 3.2459893rem;
  }

    /deep/ .el-form-item__label {
        color: @color;
        font-size: 0.08rem;
    }
  /deep/ .el-form-item {
    margin: 5px 0;
  }

    .event-management {
        text-align: right;
        margin: 15px;
    }
  /deep/ .el-form-item__label {
    color: @color;
    font-size: 0.08rem;
  }

  .event-management {
    text-align: right;
    margin: 15px;
  }

  .sub-title {

    //color: @color-title;
    padding: 5px;
    font-size: 16px;
  }

  .link-btn {
    color: @color-highlight;
  }

  .info-label {
    text-align: right;
  }

  .info-text {
    text-align: left;
  }
}

</style>

 src/components/base-page/enterprise-emergency/event-handling/EventHandling.vue

@@ -1,5 +1,6 @@
<template>
  <div>
  <el-dialog :visible.sync="isShow" class="effect-vol-calc" title="分析" :modal="false" v-dialog-drag
             :before-close="handleClose">

<!--&lt;!&ndash;    基本信息&ndash;&gt;-->
<!--    <event-base-info>-->
@@ -20,7 +21,7 @@
    <effective-volume-calc ref="effectVolCalc"></effective-volume-calc>
    <event-report-doc ref="eventReportDoc" :reportItemCon="reportItemCon"> </event-report-doc>
    <res-info ref="resInfo"></res-info>
  </div>
  </el-dialog>

</template>

@@ -30,15 +31,23 @@
import EffectiveVolumeCalc from '@components/base-page/enterprise-emergency/EffectiveVolumeCalc'
import EventReportDoc from '@components/base-page/enterprise-emergency/event-handling/EventReportDoc'
import ResInfo from '@components/base-page/enterprise-emergency/event-handling/ResInfo'
import eventBus from '../../../../eventBus'
export default {
  name: 'EventHandling',
  components: { ResInfo, EventReportDoc, DisposalProposed, EffectiveVolumeCalc },
  data () {
    return {
      isShow: false,
      reportItemCon: {
        popupType: 'aaa'
      }
    }
  },
  mounted () {
    // this.wfsHelper = new WfsHelper()
    eventBus.$on('event-handling', () => {
      this.isShow = !this.isShow
    })
  },
  methods: {
    toggleShowCalc () {
@@ -56,7 +65,11 @@
    report () {
      console.log('生成报告')
    },
    close () { console.log('返回') }
    close () { console.log('返回') },

    handleClose () {
      this.isShow = false
    }

  }
}

 src/components/base-page/enterprise-emergency/event-handling/ResInfo.vue

@@ -1,10 +1,10 @@
<template>
  <el-dialog :visible.sync="isShow" class="effect-vol-calc" title="周边资源信息" :modal="false" v-dialog-drag
  <el-dialog :visible.sync="isShow" class="res-info-container" title="周边资源信息" :modal="false" v-dialog-drag
           width="400"  >
<el-row>
  <el-col :span="3" style="text-align: center;">
    <el-row v-for="item in menuList" :key="item.id">
      <el-button type="primary" size="mini" @click="menuClickHandle(item)">{{ item.name }}</el-button>
    <el-row v-for="(item,index) in menuList" :key="index">
      <el-button type="primary" size="mini" :class="index===btnActive?'hover':''" @click="menuClickHandle(item,index)">{{ item.name }}</el-button>
    </el-row>
<!--<el-row>    <el-button type="primary" size="mini" @click="menuClickHandle">在线监测</el-button></el-row>-->
<!--<el-row>    <el-button type="primary" size="mini" @click="menuClickHandle">应急资源</el-button></el-row>-->
@@ -13,7 +13,7 @@
  </el-col>
  <el-col :span="21">
<el-row>
  <el-button v-for="item in subMenuList" :key="item.name" type="primary" size="mini" @click="subMenuClickHandle(item)">{{ item.name }}</el-button>
  <el-button v-for="(item,index) in subMenuList" :class="index===subBtnActive?'hover':''" :key="item.name" type="primary" size="mini" @click="subMenuClickHandle(item,index)">{{ item.name }}</el-button>
<!--  <el-button type="primary" size="mini" @click="subMenuClickHandle">外排口(1)</el-button>-->
<!--  <el-button type="primary" size="mini" @click="subMenuClickHandle">隔油池(1)</el-button>-->
<!--  <el-button type="primary" size="mini" @click="subMenuClickHandle">节流阀(1)</el-button>-->
@@ -46,6 +46,8 @@
  data () {
    return {
      isShow: false,
      btnActive: 0,
      subBtnActive: 0,
      menuList: ResInfo.data,
      subMenuList: ResInfo.data[0].child,
      tableData: [
@@ -160,17 +162,41 @@
    getVisible () {
      return this.isShow
    },
    menuClickHandle (item) {
      console.log(item)
    menuClickHandle (item, index) {
      this.btnActive = index
      this.subBtnActive = 0
      this.subMenuList = item.child
    },
    subMenuClickHandle (subItem) {
    subMenuClickHandle (subItem, index) {
      this.subBtnActive = index
      this.currentTableData.column = subItem.column
    }
  }
}
</script>

<style scoped>
<style lang="less">
.res-info-container{
  /deep/ .el-dialog {
    left: 810px;
  }

  .el-dialog__header {
    padding: 4px 10px;
  }

  .el-dialog__headerbtn {
    top: 10px;
  }
  .hover{
    color: @color-highlight;
    border-color:@color-highlight;
  }
 .el-button:active .el-button--primary.is-active, .el-button--primary:active ,.el-button--primary:focus, .el-button--primary:hover{
    background: @background-color;
    color: @color-highlight;
    border-color:@color-highlight;
  }
}

</style>

 src/components/layer/src/layer.vue

@@ -2,7 +2,7 @@
  <div class="public-bounced map-background" v-drag :style="style">
    <div class="public-bounced-title panel-title" ref="publicBounced">
      <span>{{ title }}</span>
      <i class="el-icon-close" @click="close"></i>
      <i class="el-icon-close" style="font-size: 16px;" @click="close"></i>
    </div>
    <div class="public-bounced-content" :id="id"></div>
  </div>
@@ -86,8 +86,8 @@

  .public-bounced-title {
    cursor: move;
    height: 0.1rem;
    padding: 10px 0;
    //height: 0.1rem;
    //padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
@@ -95,7 +95,7 @@
    span {
      color: #f4f7ff;
      margin: 0 15px;
      font-size: 14px;
      font-size: 16px;
    }

    i {

 src/components/panel/RightSearchPanel.vue

@@ -327,7 +327,7 @@
    background: @background-color4;
    color: @color-tool;
    position: absolute;
    top: 24px;
    top: 20px;
    left: 0.02rem;
    border: none; //1px solid @color-tool;
    width: 0.2rem;

 src/components/panel/topicSearch/enterprise-emergency/EventQuery.vue

@@ -108,8 +108,8 @@
// import WfsHelper from '@components/helpers/WfsHelper'
// import AjaxUtils from '@utils/AjaxUtils'

// import DisposalEvent from '../../../base-page/enterprise-emergency/DisposalEvent'
import EventHandling from '@components/base-page/enterprise-emergency/event-handling/EventHandling'
import DisposalEvent from '../../../base-page/enterprise-emergency/DisposalEvent'
// import EventHandling from '@components/base-page/enterprise-emergency/event-handling/EventHandling'
import eventBus from '../../../../eventBus'
import EventsReported from '../../../base-page/enterprise-emergency/events-reported/EventsReported'

@@ -162,29 +162,19 @@
    },
    // 开始分析
    startAnalysis () {
      // eventBus.$emit('start-analysis', true)
      eventBus.$emit('event-handling', {})
    },
    disposalfx () {
      window.$layer.open({
        content: {
          comp: EventHandling, // 组件
          comp: DisposalEvent, // 组件
          parent: this, // 父组件
          data: { // 传递的参数
            // info: this.info
          }
        },
        title: '事件处置'
        title: '事件信息'
      })
    },
    disposalfx () {
      // window.$layer.open({
      //   content: {
      //     comp: DisposalEvent, // 组件
      //     parent: this, // 父组件
      //     data: { // 传递的参数
      //       // info: this.info
      //     }
      //   },
      //   title: '事件处置'
      // })
    },
    // radio数据选择
    redioChange (item) {

 src/views/MapTemplate.vue

@@ -21,6 +21,7 @@
        <Emergency ref="Emergency"></Emergency>
        <Message></Message>
        <EventsReported></EventsReported>
      <event-handling></event-handling>
    </div>
</template>

@@ -45,10 +46,12 @@
import MapManager from '../components/helpers/MapManager'
import Message from '@components/message/index'
import EventsReported from '../components/base-page/enterprise-emergency/events-reported/EventsReported'
import EventHandling from '@components/base-page/enterprise-emergency/event-handling/EventHandling'

export default {
  name: 'MapTemplate',
  components: {
    EventHandling,
    // Enterprise,
    LegendPanel,
    // MenuSpecial,