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

yangdelong

2021-05-29 737a5478ab7f423acd7750003b0df9705ebbaecd

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

@@ -1,72 +1,104 @@
<template>
  <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>
    <el-scrollbar >
    <div class="disposal-event">
<!--      <el-collapse v-model="activeNames" @change="handleChange">-->
<!--        <el-collapse-item title="事件基本信息" name="1">-->
          <div>
            <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>
          </div>
<!--        </el-collapse-item>-->
<!--        <el-collapse-item title="预案匹配" name="2">-->
          <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>
<!--        </el-collapse-item>-->
<!--        <el-collapse-item title="环境分析报告" name="3">-->
          <div>
            <h3 class="sub-title">环境分析报告</h3>
            <el-table :data="envTableData" style="width: 100%">
              <el-table-column prop="no" label="序号"></el-table-column>
              <el-table-column prop="radius" label="查询半径"></el-table-column>
              <el-table-column prop="reporterTime" label="生成报告时间"></el-table-column>
              <el-table-column prop="classification" label="操作">
                <template slot-scope="scope" >
                  <el-button class="link-btn" @click="handleClickView(scope.row)" type="text" size="small">查看</el-button>
                  <el-button class="link-btn" @click="handleClickDownload(scope.row)" type="text" size="small">下载</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
<!--        </el-collapse-item>-->
<!--      </el-collapse>-->

    </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>
    </el-scrollbar>
    <div class="event-management">
      <el-button type="primary" size="mini" @click="ToManagement">开始分析</el-button>
      <!--            <el-button size="mini">关闭</el-button>-->
    </div>
  </div>

</template>

<script>
@@ -77,6 +109,7 @@
  name: 'DisposalEvent',
  data () {
    return {
      activeNames: ['1'],
      form: {
        nameOfEvent: '***************事件',
        eventLocation: '**********装置',
@@ -116,6 +149,23 @@
          hierarchy: '基层单位',
          classification: '生产'
        }
      ],
      envTableData: [
        {
          no: '1',
          radius: '500m',
          reporterTime: '2021-6-1 18:00:00',
          data: [],
          downloadUrl: ''
        },
        {
          no: '2',
          radius: '1km',
          reporterTime: '2021-6-1 18:00:00',
          data: [],
          downloadUrl: ''
        }

      ]
    }
  },
@@ -123,6 +173,15 @@
    // 开始分析
    ToManagement () {
      eventBus.$emit('event-handling', {})
    },
    handleClickView (item) {
      console.log(item)
    },
    handleClickDownload (item) {
      console.log(item)
    },
    handleChange (val) {
      console.log(val)
    }
  }
}
@@ -131,7 +190,7 @@
<style lang="less" scoped>
.disposal-event {
  padding: 5px;

height: 400px;
  .fixed-width {
    width: 3.2459893rem;
    min-width: 3.2459893rem;
@@ -144,11 +203,6 @@
  /deep/ .el-form-item__label {
    color: @color;
    font-size: 0.08rem;
  }

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

  .sub-title {
@@ -170,5 +224,8 @@
    text-align: left;
  }
}

.event-management {
  text-align: right;
  margin: 15px;
}
</style>