派生自 wuyushui/SewerAndRainNetwork

陈泽平
2021-05-29 bbce81a396e22743b1fbf0c54fed05ab79c99e72
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>