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

陈泽平

2021-05-29 63436d545b7e8be49dd23c0e0dcb2a42dcd4f4d4

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

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

@@ -1,25 +1,26 @@
<template>
    <div>
        <!--    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%">-->
        <!--      <el-table-column prop="define" label="建议处置措施" show-overflow-tooltip></el-table-column>-->
        <!--      <el-table-column type="selection" label="预览" width="55"></el-table-column>-->
  <div>
<!--    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%">-->
<!--      <el-table-column prop="define" label="建议处置措施" show-overflow-tooltip></el-table-column>-->
<!--      <el-table-column type="selection" label="预览" width="55"></el-table-column>-->

        <!--    </el-table>-->
        <div class="" style="padding: 5px;">
            <!--      <div v-for="o in tableData" :key="o" class="text item">-->
            <!--        {{ o.content }}-->
            <!--      </div>-->
            <div>
                1、关闭阀门B、阀门C，对上游管道进行截流；关闭阀门D，对下游管道进行截流
                <div>
<!--    </el-table>-->
    <div class="" style="padding: 5px;">
<!--      <div v-for="o in tableData" :key="o" class="text item">-->
<!--        {{ o.content }}-->
<!--      </div>-->
      <div>
        1、关闭阀门B、阀门C，对上游管道进行截流；关闭阀门D，对下游管道进行截流

                </div>
            </div>
        </div>
        <div>
        </div>

        </div>
      </div>
    </div>
    <div >
</div>

  </div>
</template>

<script>
@@ -35,25 +36,9 @@
          type: 'closeFM',
          fmGxList: {
            // 上游阀门
            syfm: [{
              name: '阀门B',
              lng: 114,
              lat: 32
            }, {
              name: '阀门a',
              lng: 114,
              lat: 32
            }],
            syfm: [{ name: '阀门B', lng: 114, lat: 32 }, { name: '阀门a', lng: 114, lat: 32 }],
            // 下游阀门
            xyfm: [{
              name: '阀门E',
              lng: 114,
              lat: 32
            }, {
              name: '阀门F',
              lng: 114,
              lat: 32
            }]
            xyfm: [{ name: '阀门E', lng: 114, lat: 32 }, { name: '阀门F', lng: 114, lat: 32 }]
          }
        }, {
          no: 1,
@@ -62,25 +47,9 @@
          type: 'closeFM',
          fmGxList: {
            // 上游阀门
            syfm: [{
              name: '阀门B',
              lng: 114,
              lat: 32
            }, {
              name: '阀门a',
              lng: 114,
              lat: 32
            }],
            syfm: [{ name: '阀门B', lng: 114, lat: 32 }, { name: '阀门a', lng: 114, lat: 32 }],
            // 下游阀门
            xyfm: [{
              name: '阀门E',
              lng: 114,
              lat: 32
            }, {
              name: '阀门F',
              lng: 114,
              lat: 32
            }]
            xyfm: [{ name: '阀门E', lng: 114, lat: 32 }, { name: '阀门F', lng: 114, lat: 32 }]
          }
        }, {
          no: 1,
@@ -89,31 +58,17 @@
          type: 'closeFM',
          fmGxList: {
            // 上游阀门
            syfm: [{
              name: '阀门B',
              lng: 114,
              lat: 32
            }, {
              name: '阀门a',
              lng: 114,
              lat: 32
            }],
            syfm: [{ name: '阀门B', lng: 114, lat: 32 }, { name: '阀门a', lng: 114, lat: 32 }],
            // 下游阀门
            xyfm: [{
              name: '阀门E',
              lng: 114,
              lat: 32
            }, {
              name: '阀门F',
              lng: 114,
              lat: 32
            }]
            xyfm: [{ name: '阀门E', lng: 114, lat: 32 }, { name: '阀门F', lng: 114, lat: 32 }]
          }
        }]

    }
  },
  methods: {}
  methods: {

  }
}
</script>


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

@@ -1,56 +1,62 @@
<template>
    <div>
  <div>

        <!--&lt;!&ndash;    基本信息&ndash;&gt;-->
        <!--    <event-base-info>-->
<!--&lt;!&ndash;    基本信息&ndash;&gt;-->
<!--    <event-base-info>-->

        <!--    </event-base-info>-->
        <!--    建议处置-->
        <disposal-proposed>
<!--    </event-base-info>-->
<!--    建议处置-->
    <disposal-proposed>

        </disposal-proposed>
        <!--    有效容积计算-->
        <div class="footer">
            <el-button type="primary" size="mini" @click="toggleShowCalc">事故水计算</el-button>
            <el-button type="primary" size="mini" @click="rimRes">周边资源</el-button>
            <el-button type="primary" size="mini" @click="report">生成报告</el-button>
            <el-button type="primary" size="mini" @click="close">返回</el-button>
        </div>
        <effective-volume-calc ref="effectVolCalc"></effective-volume-calc>
    </disposal-proposed>
    <!--    有效容积计算-->
    <div class="footer">
      <el-button type="primary" size="mini" @click="toggleShowCalc">事故水计算</el-button>
      <el-button type="primary" size="mini" @click="toggleShowResInfo">周边资源</el-button>
      <el-button type="primary" size="mini" @click="toggleShowReportDoc">生成报告</el-button>
      <el-button type="primary" size="mini" @click="close">返回</el-button>
    </div>

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

</template>

<script>

// import EventBaseInfo from '@components/base-page/enterprise-emergency/event-handling/EventBaseInfo'
import DisposalProposed from '@components/base-page/enterprise-emergency/event-handling/DisposalProposed'
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'
export default {
  name: 'EventHandling',
  components: {
    DisposalProposed,
    // EventBaseInfo,
    EffectiveVolumeCalc
  components: { ResInfo, EventReportDoc, DisposalProposed, EffectiveVolumeCalc },
  data () {
    return {
      reportItemCon: {
        popupType: 'aaa'
      }
    }
  },

  methods: {
    toggleShowCalc () {
      // this.isShowCalculate = !this.isShowCalculate
      const s = this.$refs.effectVolCalc.getVisible()
      console.log(s)
      this.$refs.effectVolCalc.setVisible(!s)
    },
    rimRes () {
      console.log('周边资源')
    toggleShowResInfo () {
      const s = this.$refs.resInfo.getVisible()
      this.$refs.resInfo.setVisible(!s)
    },
    toggleShowReportDoc () {
      const s = this.$refs.eventReportDoc.getVisible()
      this.$refs.eventReportDoc.setVisible(!s)
    },
    report () {
      console.log('生成报告')
    },
    close () {
      console.log('返回')
    }
    close () { console.log('返回') }

  }
}

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

New file
@@ -0,0 +1,585 @@
<template>
  <el-dialog :visible.sync="isShow" class="effect-vol-calc" title="生成报告" :modal="false" v-dialog-drag
             :before-close="handleClose">

  <div class="SecurityWeeklyManageItem-wrap">
    <el-scrollbar style="height:100%">
    <p class="report-title">生产1区管线A泄露事件报告</p>
<!--    <p class="report-subhead">({{reportWordObj.year}}年第{{reportWordObj.reportPeriod}}期总第{{reportWordObj.reportPeriod}}期)</p>-->
<!--    <p class="report-subhead">({{reportWordObj.startDate}}至{{reportWordObj.endDate}})</p>-->
    <el-row type="flex" justify="space-between" class="report-department">
      <el-col :span="12" class="text-style"><h3>事件基本信息</h3></el-col>
    </el-row>
    <div class="report-con-border report-con report-margin">
      <el-row type="flex" justify="space-between" class="">
        <el-col :span="4" class="text-style"><span>企业名称:</span></el-col>
        <el-col :span="18" style="text-align: left"><span>齐鲁石化</span></el-col>
      </el-row>
      <el-row type="flex" justify="space-between" class="">
        <el-col :span="4" class="text-style"><span>事业单位:</span></el-col>
        <el-col :span="18" style="text-align: left"><span>生产1区</span></el-col>
      </el-row>
      <el-row type="flex" justify="space-between" class="">
        <el-col :span="4" class="text-style"><span>位置描述:</span></el-col>
        <el-col :span="18" style="text-align: left"><span>生产1区西北方向100米</span></el-col>
      </el-row>
      <el-row type="flex" justify="space-between" class="">
        <el-col :span="4" class="text-style"><span>事发时间:</span></el-col>
        <el-col :span="18" style="text-align: left"><span>2021-6-1 17:58</span></el-col>
      </el-row>
      <el-row type="flex" justify="space-between" class="">
        <el-col :span="4" class="text-style"><span>匹配预案:</span></el-col>
        <el-col :span="18" style="text-align: left"><span>管线事件应急预案A</span></el-col>
      </el-row>
    </div>

    <el-row type="flex" justify="space-between" class="report-department">
      <el-col :span="12" class="text-style"><h3>事件及周边情况分析</h3></el-col>
    </el-row>
    <div class="report-con-border report-con">

      <div v-if="reportItemCon.popupType !== 'add'">
        <div></div>
        <div class="label-title"><span>管线信息</span></div>
        <div class="report-con">
          1.事件管线：生产1区管线A，介质为含油污水，埋设方式为直埋，材质为无缝钢管，附属设施阀门A。
        </div>
        <div class="report-con">
          2.上游管线：生产2区管线B，介质为含油污水，埋设方式为直埋，材质为无缝钢管，附属设施阀门B
        </div>
        <div class="report-con">
          3.上游管线：生产2区管线C，介质为含油污水，埋设方式为直埋，材质为无缝钢管，附属设施阀门C
        </div>
        <div class="report-con">
          4.下游管线：生产2区管线D，介质为含油污水，埋设方式为直埋，材质为无缝钢管，附属设施阀门D
        </div>
        <div class="label-title"><span>事故池信息</span></div>
        <div class="report-con">
          1.生产1区西部集水池A，介质为含油污水，尺寸为100*100*2m3，容积为2000m3，距离事件点583m
        </div>
        <div class="report-con">
          2.生产1区西部集水池B，介质为含油污水，尺寸为100*100*2m3，容积为2000m3，距离事件点483m
        </div>
        <div class="report-con">
          3.生产1区西部集水池C，介质为含油污水，尺寸为100*100*2m3，容积为2000m3，距离事件点493m
        </div>
        <div class="report-con">
          4.生产1区西部集水池D，介质为含油污水，尺寸为100*100*2m3，容积为2000m3，距离事件点374m
        </div>
        <div class="report-con">
          5.生产1区西部集水池D，介质为含油污水，尺寸为100*100*2m3，容积为2000m3，距离事件点472m
        </div>
        <div class="label-title"><span>应急物资（搜索半径1km）</span></div>
        <div class="report-con">
          1.生产1区应急物资仓库A：潜水泵16台，编织袋2000条，铁锹30把。联系人：张三 13800138000
        </div>
        <div class="report-con">
          2.生产2区应急物资仓库B：推车式干粉灭火器12具。联系人：李四 13800138001
        </div>
        <div class="label-title"><span>应急车辆（搜索半径1km）</span></div>
        <div class="report-con">
          1.消防战训科：鲁CCP119指挥车，鲁CJ1171通讯指挥车。联系人：王五 13800138002
        </div>
        <div class="report-con">
          2.一队：鲁CF8911奔驰泡沫车，鲁C60753东风泡沫车。联系人：陈六 13800138003
        </div>
        <div class="label-title"><span>应急队伍（搜索半径1km）</span></div>
        <div class="report-con">
          1.一队南队：专职消（气）防队，救援专业为抢险，负责人：赵七 13800138004
        </div>
        <div class="label-title"><span>周边环境（搜索半径1km）</span></div>
        <div class="report-con">
          1.水体：厂河，长度3552m，流向从西向东，非引用水源，距事件点243m
        </div>
        <div class="report-con">
          2.敏感目标：实验小学，常规人数700人，距事件点481m，负责人XXX 13800138005
        </div>
        <div class="report-con">
          3.敏感目标：工人电影院，常规人数200人，距事件点372m，负责人XXX 13800138006
        </div>
        <div class="report-con">
          4.自然保护区：森林公园，主要保护对象松树，距事件点672m，负责人XXX 13800138007
        </div>
        <div class="report-con">
          5.医院：中心医院，二级甲等，可容纳伤员数400人，救护车数量7辆，距事件点785m，负责人XXX 138001380
        </div>
      </div>
    </div>
      <el-row type="flex" justify="space-between" class="report-department">
        <el-col :span="12" class="text-style"><h3>建议处置措施</h3></el-col>
      </el-row>
      <div class="report-con-border report-con">
        <div class="report-con">
          1.关闭阀门B、阀门C，对上游管道进行截流；关闭阀门D，对下游管道进行截流
        </div>
      </div>
    <el-row type="flex" justify="space-between" class="report-con-border">
      <el-col :span="3" style="text-align: right"><span>报告人:</span></el-col>
      <el-col :span="3"  style="text-align: left"><span>XXX</span></el-col>
      <el-col :span="4"  style="text-align: right"><span>联系方式:</span></el-col>
      <el-col :span="6"  style="text-align: left"><span>12345678901</span></el-col>
            <el-col :span="3"  style="text-align: right"><span>日期:</span></el-col>
            <el-col :span="5"  style="text-align: left"><span>2021年6月1日</span></el-col>
    </el-row>
    </el-scrollbar>
  </div>
  </el-dialog>
</template>
<script>
// import superTablePopupMixin from '@/components/base/BaseSuperTablePopupMixin'
// import emitter from '@/utils/MixinEmitter'
export default {
  name: 'EventReportDoc',
  // mixins: [emitter, superTablePopupMixin],
  props: {
    reportItemCon: {}
  },
  data () {
    return {
      isShow: false,
      reportWordObj: {},
      lineOption: {
        backgroundColor: 'transparent',
        legend: {
          show: true,
          itemHeight: 1,
          itemWidth: 20,
          textStyle: {
            color: '#000',
            fontSize: 10
          },
          bottom: 0
        },
        xAxis: [
          {
            type: 'category',
            data: [1, 2, 3, 4, 5, 6, 7],
            gridIndex: 0,
            axisLabel: {
              color: '#000',
              interval: 0
            },
            axisLine: {
              lineStyle: {
                color: '#ececec'
              }
            },
            axisTick: {
              show: false
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            gridIndex: 0,
            splitLine: {
              show: true,
              lineStyle: {
                color: '#ececec',
                type: 'solid'
              }
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              formatter: '{value}'
            },
            axisTick: {
              lineStyle: {
                color: '#e3e3e3'
              }
            }
          }
        ],
        series: [
          {
            symbol: 'pin',
            symbolSize: 6,
            data: [],
            type: 'line',
            animation: false,
            name: '承运商周百公里预警平均量',
            lineStyle: {
              color: '#3E75B7'
            },
            label: {
              normal: {
                show: true,
                position: 'top'
              }
            },
            itemStyle: {
              normal: {
                color: '#3E75B7'
              }
            }
          },
          {
            symbol: 'pin',
            animation: false,
            symbolSize: 6,
            data: [],
            type: 'line',
            name: '车辆百公里预警量超过50的车辆数/10',
            lineStyle: {
              color: '#BA403C'
            },
            label: {
              normal: {
                show: true,
                position: 'top'
              }
            },
            itemStyle: {
              normal: {
                color: '#BA403C'
              }
            }
          },
          {
            symbol: 'pin',
            symbolSize: 6,
            animation: false,
            data: [],
            type: 'line',
            name: '高风险预警数(抽烟、打电话)/100',
            lineStyle: {
              color: '#92B549'
            },
            label: {
              normal: {
                show: true,
                position: 'top'
              }
            },
            itemStyle: {
              normal: {
                color: '#92B549'
              }
            }
          },
          {
            symbol: 'pin',
            symbolSize: 6,
            animation: false,
            data: [],
            type: 'line',
            name: '资质过期总数/100',
            lineStyle: {
              color: '#745599'
            },
            label: {
              normal: {
                show: true,
                position: 'top'
              }
            },
            itemStyle: {
              normal: {
                color: '#745599'
              }
            }
          }
        ]
      },
      Reportsform: [
        {
          label: '二、存在的问题',
          prop: 'problem',
          opts: {
            type: 'textarea'
          }
        },
        {
          label: '三、上期问题反馈',
          prop: 'lastProblemFeedback',
          opts: {
            type: 'textarea'
          }
        },
        {
          label: '四、对策建议',
          prop: 'suggestions',
          opts: {
            type: 'textarea'
          }
        }
      ],
      ReportsformObj: {},
      optionPie: {
        color: ['#FF0000', '#F4B800', '#FFFF00', '#0070C0'],
        title: {
          text: '道路运输风险分级',
          left: 'center',
          bottom: '5'
        },
        legend: {
          orient: 'vertical',
          left: 'right',
          data: ['高风险', '中风险', '一般风险', '低风险'],
          color: '#000'
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '40%'],
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 0,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label: {
              formatter: '{d}',
              color: '#000'
            },
            hoverAnimation: false
          }
        ]
      },
      showTable: false,
      tableOptsHighRisk: [],
      spotCheckTableData: [],
      caseShare: [
        {
          label: '1.近期国内外事故概况',
          prop: 'recentAccidentsOverview',
          opts: {
            type: 'textarea'
          }
        },
        {
          label: '2.典型事故案例',
          prop: 'typicalAccidentCase',
          opts: {
            type: 'textarea'
          }
        }
      ],
      caseShareObj: {},
      accessoryOne: {},
      chart: null,
      pieChart: null,
      imgPieUrl: null,
      imgLineUrl: null
    }
  },
  mounted () {
  },
  created () {
  },
  watch: {
    // reportItemCon: {
    //   immediate: true,
    //   deep: true,
    //   handler (val) {
    //     this.getLineEchatrs()
    //     if (val.popupType === 'query') {
    //       this.getReportInfo(val)
    //       const ifDisabled = val.popupType !== 'edit'
    //       this.disabledTextarea(ifDisabled)
    //     } else if (val.popupType === 'edit') {
    //       this.getReportInfo(val)
    //     } else {
    //       this.reportWordObj = this.reportItemCon
    //       this.ReportsformObj = this.reportItemCon
    //       this.caseShareObj = this.reportItemCon
    //       this.getAccessory()
    //       this.reportWordObj.year = this.reportWordObj.startDate.substring(0, 4)
    //     }
    //   }
    // }
  },
  methods: {
    // getReportInfo (val) {
    //   const url = this.$API.TMM_GET_SECURITY_WEEKLY_REPORT + '?id=' + val.securityWeeklyReportId
    //   this.$http.get(url).then(response => {
    //     this.reportWordObj = response.data
    //     this.$refs.$Reportsform.formModel = response.data
    //     this.$refs.$caseShare.formModel = response.data
    //     this.getAccessory()
    //     this.reportWordObj.year = this.reportWordObj.startDate.substring(0, 4)
    //   }).catch(() => {
    //   })
    // },
    // getAccessory () {
    //   // 获取附件一的数据
    //   const url = this.$API.TMM_GET_SECURITY_WEEK_COUNT + '?timeStart=' + this.reportWordObj.startDate + '&timeEnd=' + this.reportWordObj.endDate
    //   this.$http.get(url).then(response => {
    //     this.accessoryOne = response.data
    //     const valArr = [
    //       { value: (this.accessoryOne.highRisk / this.accessoryOne.tc * 100).toFixed(2), name: '高风险' },
    //       { value: (this.accessoryOne.midlleRisk / this.accessoryOne.tc * 100).toFixed(2), name: '中风险' },
    //       { value: (this.accessoryOne.generalRisk / this.accessoryOne.tc * 100).toFixed(2), name: '一般风险' },
    //       { value: (this.accessoryOne.lowRisk / this.accessoryOne.tc * 100).toFixed(2), name: '低风险' }
    //     ]
    //     this.optionPie.series[0].data = valArr
    //     this.showPie()
    //   }).catch(() => {
    //   })
    //   const urlHight = this.$T.joinQueryUrl(
    //     this.$API.TMM_GET_ATTACHMENT2,
    //     {
    //       startDateStr: this.reportWordObj.startDate,
    //       endDateStr: this.reportWordObj.endDate
    //     }
    //   )
    //   this.$http.get(urlHight).then(response => {
    //     this.tableOptsHighRisk = response.data
    //   }).catch(() => {
    //   })
    //   // 附件三
    //   const params = {
    //     current: 1,
    //     size: 10,
    //     atp: '0x000E,0x000F',
    //     atfStart: this.reportWordObj.startDate,
    //     atfEnd: this.reportWordObj.endDate
    //   }
    //   const urlThree = this.$T.joinQueryUrl(
    //     this.$API.TMM_GET_WARNING_INFO,
    //     params
    //   )
    //   this.$http.get(urlThree).then(response => {
    //     this.spotCheckTableData = response.data.records
    //   }).catch(() => {
    //   })
    // },
    // showPie () {
    //   this.$nextTick(() => {
    //     // 渲染饼图
    //     const myChart = this.$echarts.init(document.getElementById('highPie'))
    //     myChart.clear()
    //     myChart.setOption(this.optionPie, true)
    //   })
    // },
    // getLineEchatrs () {
    //   this.$http.get(this.$API.TMM_GET_HWS_ANALYSIS).then(res => {
    //     this.lineOption.xAxis[0].data = res.data.map((item, index) => {
    //       let str = ''
    //       if (index % 2 !== 0) {
    //         str = '\n' + item.startTime.toString().substring(4) + '-' + item.endTime.toString().substring(4)
    //       } else {
    //         str = item.startTime.toString().substring(4) + '-' + item.endTime.toString().substring(4)
    //       }
    //       return str
    //     })
    //     this.lineOption.series[0].data = res.data.map(item => {
    //       return item.carrierKilometreAlarm
    //     })
    //     this.lineOption.series[1].data = res.data.map(item => {
    //       return item.vehicleKilometreAlarm
    //     })
    //     this.lineOption.series[2].data = res.data.map(item => {
    //       return item.highRiskAlarm
    //     })
    //     this.lineOption.series[3].data = res.data.map(item => {
    //       return item.certificateOverdue
    //     })
    //     this.$nextTick(() => {
    //       // 渲染折线图
    //       const getID = document.getElementById('productLine')
    //       this.chart = this.$echarts.init(getID)
    //       this.chart.setOption(this.lineOption)
    //       setTimeout(() => {
    //         this.showImg()
    //       }, 500)
    //     })
    //   })
    // },
    // disabledTextarea (val) {
    //   this.Reportsform.map(item => {
    //     item.opts.disabled = val
    //   })
    //   this.caseShare.map(item => {
    //     item.opts.disabled = val
    //   })
    // },
    // // 转base64
    // showImg () {
    //   const basePieCanvas = document.getElementById('highPie').getElementsByTagName('canvas')[0]
    //   const baseLineCanvas = document.getElementById('productLine').getElementsByTagName('canvas')[0]
    //   this.imgPieUrl = this.getImgUrl(basePieCanvas)
    //   this.imgLineUrl = this.getImgUrl(baseLineCanvas)
    //   const params = {
    //     img1: this.imgLineUrl,
    //     img2: this.imgPieUrl
    //   }
    //   this.dispatch('SecurityWeeklyManage', 'picture-site', params)
    // },
    // getImgUrl (val) {
    //   const width = val.width
    //   const height = val.height
    //   const ctx = val.getContext('2d')
    //   ctx.drawImage(val, width, height)
    //   return val.toDataURL()
    // },
    handleClose (done) {
      this.isShow = false
    },
    setVisible (s) {
      this.isShow = s
    },

    getVisible () {
      return this.isShow
    }
  }
}
</script>

<style lang="less">
.SecurityWeeklyManageItem-wrap {
  //border: solid 1px #ececec;
  padding: 10px;
  height: 500px;
  .report-title {
    text-align: center;
    color: red;
    font-size: x-large;
    font-weight: 700;
  }
  .report-subhead {
    text-align: center;
  }

  .report-department {
    //border-bottom: solid 1px;
    margin-top: 10px;
  }
  .report-con-border {
    margin: 2px 0 5px 0;
    border-top: solid 1px;
    //border-bottom: solid 1px;
    line-height: 1.5;
    text-indent: 25px;
    padding: 5px;
    & h4{
      margin: 5px 0;
    }
    & div{
      margin: 2px 0;
    }
    .label-title{
      height: 25px;
      line-height: 25px;
      display: inline-block;
      border: 1px solid white;
      text-indent: 0;
     & span{
       margin: 0 5px;
     }
    }
  }

h4{
 margin: 5px;
}
}
</style>

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

New file
@@ -0,0 +1,9 @@
import EmergBase from '@components/base-page/enterprise-emergency/event-handling/res-info/EmergBase'
import EmergRes from '@components/base-page/enterprise-emergency/event-handling/res-info/EmergRes'
import OnlineMonitor from '@components/base-page/enterprise-emergency/event-handling/res-info/OnlineMonitor'
import Surroundings from '@components/base-page/enterprise-emergency/event-handling/res-info/Surroundings'
import PipeInfo from '@components/base-page/enterprise-emergency/event-handling/res-info/PipeInfo'

export default {
  data: [EmergBase, EmergRes, OnlineMonitor, Surroundings, PipeInfo]
}

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

New file
@@ -0,0 +1,176 @@
<template>
  <el-dialog :visible.sync="isShow" class="effect-vol-calc" 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>
<!--<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>-->
<!--<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>-->
  </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 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>-->
<!--  <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>-->
<!--  <el-button type="primary" size="mini" @click="subMenuClickHandle">雨水管线(1)</el-button>-->
</el-row>
    <el-row>
      <el-table
          :data="currentTableData.data"
          style="width: 100%">
        <el-table-column v-for="item in currentTableData.column"
            :prop="item.prop"
            :label="item.label" :width="item.width" :key="item.label"
            >
        </el-table-column>

      </el-table>
    </el-row>
  </el-col>
</el-row>
  </el-dialog>
</template>

<script>
import ResInfo from '@components/base-page/enterprise-emergency/event-handling/ResInfo'
export default {
  name: 'ResInfo',
  data () {
    return {
      isShow: false,
      menuList: ResInfo.data,
      subMenuList: ResInfo.data[0].child,
      tableData: [
        {
          id: 1,
          name: '应急基础',
          child: [{
            name: '内排口',
            column: [{
              label: '序号',
              prop: 'no',
              width: 'auto'
            },
            {
              label: '存放点名称',
              prop: 'name',
              width: 'auto'
            },
            {
              label: '存放点类型',
              prop: 'type',
              width: 'auto'
            },
            {
              label: '负责人',
              prop: 'master',
              width: 'auto'
            },
            {
              label: '联系电话',
              prop: 'phone',
              width: 'auto'
            },
            {
              label: '物资名称（汇总）',
              prop: 'total',
              width: '200'
            },
            {
              label: '距离',
              prop: 'distance',
              width: 'auto'
            }]
          }]
        }
      ],
      currentTableData: {
        column: [
          {
            label: '序号',
            prop: 'no',
            width: 'auto'
          },
          {
            label: '存放点名称',
            prop: 'name',
            width: 'auto'
          },
          {
            label: '存放点类型',
            prop: 'type',
            width: 'auto'
          },
          {
            label: '负责人',
            prop: 'master',
            width: 'auto'
          },
          {
            label: '联系电话',
            prop: 'phone',
            width: 'auto'
          },
          {
            label: '物资名称（汇总）',
            prop: 'total',
            width: '200'
          },
          {
            label: '距离',
            prop: 'distance',
            width: 'auto'
          }],
        data: [
          {
            no: '1',
            name: '金陵时候应急物资存放点',
            type: '库房存放点',
            master: '张三',
            phone: '1333333333',
            total: '清水泵；编织袋；铁镐；铁锹；雨衣；雨鞋；防水手电；探照灯；麻绳',
            distance: '900m'
          }, {
            no: '2',
            name: '金陵时候应急物资存放点',
            type: '库房存放点',
            master: '张三三',
            phone: '1333333333',
            total: '清水泵；编织袋；铁镐；铁锹；雨衣；雨鞋；防水手电；探照灯；麻绳',
            distance: '900m'
          }]
      }
    }
  },
  methods: {
    handleClose (done) {
      this.isShow = false
    },
    setVisible (s) {
      this.isShow = s
    },
    getVisible () {
      return this.isShow
    },
    menuClickHandle (item) {
      console.log(item)
      this.subMenuList = item.child
    },
    subMenuClickHandle (subItem) {
      this.currentTableData.column = subItem.column
    }
  }
}
</script>

<style scoped>

</style>

 src/components/base-page/enterprise-emergency/event-handling/res-info/EmergBase.js

New file
@@ -0,0 +1,216 @@
export default {
  id: 1,
  name: '应急基础',
  child: [
    {
      name: '排口',
      column: [{
        label: '序号',
        prop: 'no',
        width: 'auto'
      },
      {
        label: '名称',
        prop: 'name',
        width: 'auto'
      },
      {
        label: '排放口类型',
        prop: 'pfktype',
        width: 'auto'
      },
      {
        label: '所属单位名称',
        prop: 'unitname',
        width: 'auto'
      },
      {
        label: '所属管线名称',
        prop: 'pipename',
        width: 'auto'
      },
      {
        label: '介质',
        prop: 'mediumtype',
        width: 'auto'
      },
      {
        label: '级别',
        prop: 'level',
        width: 'auto'
      },
      {
        label: '运行状态',
        prop: 'operationalstatus',
        width: 'auto'
      },
      {
        label: '物资名称（汇总）',
        prop: 'total',
        width: '200'
      },
      {
        label: '距离',
        prop: 'distance',
        width: 'auto'
      }]
    },
    {
      name: '隔油池',
      column: [{
        label: '序号',
        prop: 'no',
        width: 'auto'
      },
      {
        label: '名称',
        prop: 'poolname',
        width: 'auto'
      },
      {
        label: '尺寸',
        prop: 'size',
        width: 'auto'
      },
      {
        label: '容积',
        prop: 'volume',
        width: 'auto'
      },
      {
        label: '负责人',
        prop: 'resperson',
        width: 'auto'
      },
      {
        label: '所属单位名称',
        prop: 'unitname',
        width: '200'
      },
      {
        label: '距离',
        prop: 'distance',
        width: 'auto'
      }]
    },
    {
      name: '阀门',
      column: [{
        label: '序号',
        prop: 'no',
        width: 'auto'
      },
      {
        label: '阀门名称',
        prop: 'devicename',
        width: 'auto'
      },
      {
        label: '所属管线名称',
        prop: 'pipename',
        width: '200'
      },
      {
        label: '所属单位名称',
        prop: 'unitname',
        width: '200'
      },
      {
        label: '阀门类型',
        prop: 'valvetype',
        width: 'auto'
      },
      {
        label: '控制方式',
        prop: 'operatingtype',
        width: 'auto'
      },
      {
        label: '运行状态',
        prop: 'operationalstatus',
        width: 'auto'
      },
      {
        label: '距离',
        prop: 'distance',
        width: 'auto'
      }]
    },
    {
      name: '集水池(罐)',
      column: [{
        label: '序号',
        prop: 'no',
        width: 'auto'
      },
      {
        label: '名称',
        prop: 'companyname',
        width: 'auto'
      },
      {
        label: '介质',
        prop: 'mediumtype',
        width: 'auto'
      },
      {
        label: '尺寸',
        prop: 'size',
        width: 'auto'
      },
      {
        label: '容积',
        prop: 'volume',
        width: 'auto'
      },
      {
        label: '所属管线代码',
        prop: 'pipecode',
        width: 'auto'
      },
      {
        label: '所属单位名称',
        prop: 'unitname',
        width: 'auto'
      },
      {
        label: '运行状态',
        prop: 'operationalstatus',
        width: 'auto'
      },
      {
        label: '距离',
        prop: 'distance',
        width: 'auto'
      }]
    },
    {
      name: '事故水/雨水管线',
      column: [{
        label: '序号',
        prop: 'no',
        width: 'auto'
      },
      {
        label: '管线名称',
        prop: 'pipename',
        width: 'auto'
      },
      {
        label: '介质',
        prop: 'mediumtype',
        width: 'auto'
      },
      {
        label: '运行状态',
        prop: 'operationalstatus',
        width: 'auto'
      },
      {
        label: '所属单位名称',
        prop: 'unitname',
        width: 'auto'
      }]
    }
  ]
}

 src/components/base-page/enterprise-emergency/event-handling/res-info/EmergRes.js

New file
@@ -0,0 +1,118 @@
export default {
  id: 3,
  name: '应急资源',
  child: [
    {
      name: '应急车辆',
      column: [{
        label: '序号',
        prop: 'no',
        width: 'auto'
      },
      {
        label: '名称',
        prop: 'name',
        width: 'auto'
      }
      ]
    },
    {
      name: '应急物资',
      column: [{
        label: '序号',
        prop: 'no',
        width: 'auto'
      },
      {
        label: '名称',
        prop: 'name',
        width: 'auto'
      },
      {
        label: '单位名称',
        prop: 'companyname',
        width: 'auto'
      },
      {
        label: '物资名称',
        prop: 'resourcesname',
        width: 'auto'
      },
      {
        label: '联系电话',
        prop: 'telephone',
        width: 'auto'
      },
      {
        label: '物资数量',
        prop: 'resourcesnumber',
        width: 'auto'
      },
      {
        label: '是否自有物资',
        prop: 'ownedstatus',
        width: 'auto'
      },
      {
        label: '负责人',
        prop: 'resperson',
        width: 'auto'
      },
      {
        label: '行政隶属',
        prop: 'adminzonename',
        width: 'auto'
      }
      ]
    },
    {
      name: '应急队伍',
      column: [{
        label: '序号',
        prop: 'no',
        width: 'auto'
      },
      {
        label: '队伍名称',
        prop: 'teamname',
        width: 'auto'
      },
      {
        label: '应急电话',
        prop: 'phone',
        width: 'auto'
      },
      {
        label: '人员数量',
        prop: 'organization',
        width: 'auto'
      },
      {
        label: '是否外协单位',
        prop: 'externalteam',
        width: 'auto'
      },
      {
        label: '行政隶属',
        prop: 'administrativesubordinate',
        width: 'auto'
      },
      {
        label: '地址',
        prop: 'address',
        width: 'auto'
      },
      {
        label: '所属单位名称',
        prop: 'unitname',
        width: 'auto'
      },
      {
        label: '距离',
        prop: 'distance',
        width: 'auto'
      }
      ]
    }
  ]
}

 src/components/base-page/enterprise-emergency/event-handling/res-info/OnlineMonitor.js

New file
@@ -0,0 +1,48 @@
export default {
  id: 2,
  name: '在线监测',
  child: [
    {
      name: '废水监测-',
      column: [{
        label: '序号',
        prop: 'no',
        width: 'auto'
      },
      {
        label: '名称',
        prop: 'name',
        width: 'auto'
      }
      ]
    },
    {
      name: '废气监测-',
      column: [{
        label: '序号',
        prop: 'no',
        width: 'auto'
      },
      {
        label: '名称',
        prop: 'name',
        width: 'auto'
      }
      ]
    },
    {
      name: '在线视频-',
      column: [{
        label: '序号',
        prop: 'no',
        width: 'auto'
      },
      {
        label: '名称',
        prop: 'name',
        width: 'auto'
      }
      ]
    }
  ]
}

 src/components/base-page/enterprise-emergency/event-handling/res-info/PipeInfo.js

New file
@@ -0,0 +1,119 @@
export default {
  id: 5,
  name: '管道信息',
  child: [
    {
      name: '含油污水管线',
      column: [{
        label: '序号',
        prop: 'no',
        width: 'auto'
      },
      {
        label: '管线名称',
        prop: 'pipename',
        width: 'auto'
      },
      {
        label: '介质',
        prop: 'mediumtype',
        width: 'auto'
      },
      {
        label: '运行状态',
        prop: 'operationalstatus',
        width: 'auto'
      },
      {
        label: '所属单位名称',
        prop: 'unitname',
        width: 'auto'
      }]
    },
    {
      name: '含盐污水管线',
      column: [
        {
          label: '序号',
          prop: 'no',
          width: 'auto'
        },
        {
          label: '管线名称',
          prop: 'pipename',
          width: 'auto'
        },
        {
          label: '介质',
          prop: 'mediumtype',
          width: 'auto'
        },
        {
          label: '运行状态',
          prop: 'operationalstatus',
          width: 'auto'
        },
        {
          label: '所属单位名称',
          prop: 'unitname',
          width: 'auto'
        }]
    },
    {
      name: '含碱污水管线',
      column: [{
        label: '序号',
        prop: 'no',
        width: 'auto'
      },
      {
        label: '管线名称',
        prop: 'pipename',
        width: 'auto'
      },
      {
        label: '介质',
        prop: 'mediumtype',
        width: 'auto'
      },
      {
        label: '运行状态',
        prop: 'operationalstatus',
        width: 'auto'
      },
      {
        label: '所属单位名称',
        prop: 'unitname',
        width: 'auto'
      }]
    },
    {
      name: '净化水管线',
      column: [{
        label: '序号',
        prop: 'no',
        width: 'auto'
      },
      {
        label: '管线名称',
        prop: 'pipename',
        width: 'auto'
      },
      {
        label: '介质',
        prop: 'mediumtype',
        width: 'auto'
      },
      {
        label: '运行状态',
        prop: 'operationalstatus',
        width: 'auto'
      },
      {
        label: '所属单位名称',
        prop: 'unitname',
        width: 'auto'
      }]
    }
  ]
}

 src/components/base-page/enterprise-emergency/event-handling/res-info/Surroundings.js

New file
@@ -0,0 +1,348 @@
export default {
  id: 4,
  name: '周边环境',
  child: [
    {
      name: '风险源-',
      column: [{
        label: '序号',
        prop: 'no',
        width: 'auto'
      },
      {
        label: '名称',
        prop: 'name',
        width: 'auto'
      }
      ]
    },
    {
      name: '医院',
      column: [{
        label: '序号',
        prop: 'no',
        width: 'auto'
      },
      {
        label: '医院名称',
        prop: 'companyname',
        width: 'auto'
      },
      {
        label: '联系电话',
        prop: 'telephone',
        width: 'auto'
      },
      {
        label: '行政隶属',
        prop: 'adminzonename',
        width: 'auto'
      },
      {
        label: '医院资质等级',
        prop: 'hospitalleaval',
        width: 'auto'
      },
      {
        label: '病床数量',
        prop: 'sickbednumber',
        width: 'auto'
      },
      {
        label: '医生数量',
        prop: 'doctornumber',
        width: 'auto'
      },
      {
        label: '护士数量',
        prop: 'nursenumber',
        width: 'auto'
      },
      {
        label: '救护车数量',
        prop: 'ambulancenumber',
        width: 'auto'
      },
      {
        label: '单位地址',
        prop: 'address',
        width: 'auto'
      }
      ]
    },
    {
      name: '消防',
      column: [{
        label: '序号',
        prop: 'no',
        width: 'auto'
      },
      {
        label: '消防单位名称',
        prop: 'companyname',
        width: 'auto'
      },
      {
        label: '消防车数量',
        prop: 'pumpernumber',
        width: 'auto'
      },
      {
        label: '消防人员数量',
        prop: 'personnumber',
        width: 'auto'
      },
      {
        label: '行政隶属',
        prop: 'location',
        width: 'auto'
      },
      {
        label: '联系电话',
        prop: 'contacttelephone',
        width: 'auto'
      },
      {
        label: '单位地址',
        prop: 'address',
        width: 'auto'
      },
      {
        label: '服务半径',
        prop: 'supportradius',
        width: 'auto'
      },
      {
        label: '负责人',
        prop: 'contactperson',
        width: 'auto'
      },
      {
        label: '距离',
        prop: 'distance',
        width: 'auto'
      }
      ]
    },
    {
      name: '学校-',
      column: [{
        label: '序号',
        prop: 'no',
        width: 'auto'
      },
      {
        label: '名称',
        prop: 'name',
        width: 'auto'
      }
      ]
    },
    {
      name: '水体',
      column: [{
        label: '序号',
        prop: 'no',
        width: 'auto'
      },
      {
        label: '名称',
        prop: 'name',
        width: 'auto'
      },
      {
        label: '联系方式',
        prop: 'telphonenumber',
        width: 'auto'
      },
      {
        label: '年平均流速(m/s)',
        prop: 'velocityaverage',
        width: 'auto'
      },
      {
        label: '年平均冲刷深度',
        prop: 'erosiondepthavg',
        width: 'auto'
      },
      {
        label: '最大速度(m/s)',
        prop: 'velocitymax',
        width: 'auto'
      },
      {
        label: '河流流向',
        prop: 'flowdirection',
        width: 'auto'
      },
      {
        label: '长度（m）',
        prop: 'length',
        width: 'auto'
      },
      {
        label: '水系类型',
        prop: 'hydrotype',
        width: 'auto'
      },
      {
        label: '是否是饮用水源',
        prop: 'drinkingresourceind',
        width: 'auto'
      },
      {
        label: '是否是季节性河流',
        prop: 'seasonalriverind',
        width: 'auto'
      },
      {
        label: '高风险月份',
        prop: 'highriskmonth',
        width: 'auto'
      },
      {
        label: '水库位置',
        prop: 'reservoirlocation',
        width: 'auto'
      },
      {
        label: '管道埋深',
        prop: 'coverdepth',
        width: 'auto'
      }
      ]
    },
    {
      name: '自然保护区',
      column: [{
        label: '序号',
        prop: 'no',
        width: 'auto'
      },
      {
        label: '名称',
        prop: 'name',
        width: 'auto'
      },
      {
        label: '联系电话',
        prop: 'telephone',
        width: 'auto'
      },
      {
        label: '保护区类型',
        prop: 'type',
        width: 'auto'
      },
      {
        label: '负责人',
        prop: 'resperson',
        width: 'auto'
      },
      {
        label: '占地面积',
        prop: 'structureoridsitearea',
        width: 'auto'
      },
      {
        label: '主要保护对象',
        prop: 'preservationobject',
        width: 'auto'
      },
      {
        label: '行政隶属',
        prop: 'adminzonename',
        width: 'auto'
      },
      {
        label: '距离',
        prop: 'distance',
        width: 'auto'
      }
      ]
    },
    {
      name: '敏感目标',
      column: [{
        label: '序号',
        prop: 'no',
        width: 'auto'
      },
      {
        label: '名称',
        prop: 'name',
        width: 'auto'
      },
      {
        label: '联系电话',
        prop: 'telephone',
        width: 'auto'
      },
      {
        label: '常规人口数量',
        prop: 'huncount',
        width: 'auto'
      },
      {
        label: '负责人',
        prop: 'resperson',
        width: 'auto'
      },
      {
        label: '行政隶属',
        prop: 'adminzonename',
        width: 'auto'
      },
      {
        label: '距离',
        prop: 'distance',
        width: 'auto'
      }
      ]
    },
    {
      name: '环境监测',
      column: [{
        label: '序号',
        prop: 'no',
        width: 'auto'
      },
      {
        label: '名称',
        prop: 'name',
        width: 'auto'
      },
      {
        label: '联系电话',
        prop: 'telephone',
        width: 'auto'
      },
      {
        label: '类型',
        prop: 'type',
        width: 'auto'
      },
      {
        label: '负责人',
        prop: 'resperson',
        width: 'auto'
      },
      {
        label: '行政隶属',
        prop: 'adminzonename',
        width: 'auto'
      },
      {
        label: '所属单位名称',
        prop: 'unitname',
        width: 'auto'
      },
      {
        label: '距离',
        prop: 'distance',
        width: 'auto'
      }
      ]
    }
  ]
}

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

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

import DisposalEvent from '../../../base-page/enterprise-emergency/DisposalEvent'
// 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'
@@ -158,6 +158,11 @@
    // 点击事件管理
    accordPopup () {
      // eventBus.$emit('disposal-analysis', true)

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