企业应急-事件处置-事件信息页面

yangdelong

2021-05-29 977955d716039c91fd6292b159e50e15c62100a1

企业应急-事件处置-事件信息页面

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