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

yangdelong

2021-05-29 977955d716039c91fd6292b159e50e15c62100a1

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

@@ -1,46 +1,56 @@
<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>
    <h4 class="sub-title ">事件基本信息</h4>
    <div :model="form">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="事件位置：" prop="eventLocation">
        <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-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 class="info-label" :span="6">
          位置描述：
                </el-col>
                <el-col :span="12">
                    <el-form-item label="事发时间：" prop="atTime">
                        <label>{{ form.atTime }}</label>
                    </el-form-item>
        <el-col class="info-text" :span="18">
          <label>{{ form.positionDesc }}</label>
                </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>
      <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 href="javascript:">附件</a>
                </label>
            </el-form-item>
        </el-form>
        <h3 class="panel-title">预案匹配</h3>
          <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>
@@ -48,13 +58,13 @@
            <el-table-column prop="classification" label="预案分类"></el-table-column>
            <el-table-column label="附件">
                <template>
                    <a href="javascript:">预案</a>
          <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>
      <el-button type="primary" size="mini" @click="ToManagement">开始分析</el-button>
      <!--            <el-button size="mini">关闭</el-button>-->
        </div>
    </div>
</template>
@@ -110,15 +120,18 @@
    }
  },
  methods: {
    // 事件管理页面跳转
    // 开始分析
    ToManagement () {
      eventBus.$emit('events-reported', true)
      eventBus.$emit('event-handling', {})
    }
  }
}
</script>

<style lang="less" scoped>
.disposal-event {
  padding: 5px;

    .fixed-width {
        width: 3.2459893rem;
        min-width: 3.2459893rem;
@@ -137,4 +150,25 @@
        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>