企业应急-事件上报布局问题修改

陈泽平

2021-05-31 ad9c4fbf43e6b58e0019e04878ad0935ae811b8d

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

@@ -1,72 +1,125 @@
<template>
  <div>
    <el-scrollbar >
    <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-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 :span="12">
                    <el-form-item label="位置描述：" prop="positionDesc">
                        <label>{{ form.positionDesc }}</label>
                    </el-form-item>
                <el-col class="info-text" :span="18">
                  <label>{{ form.eventLocation }}</label>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="事件单位：" prop="incidentUnit">
                        <label>{{ form.incidentUnit }}</label>
                    </el-form-item>
              </el-row>
              <el-row>
                <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>
                    &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="附件">
              </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 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>
        </div>
              </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>
    </el-scrollbar>
    <div class="event-management">
      <el-button type="primary" size="mini" @click="mapClick">地图点选</el-button>
      <el-select v-model="radius.value" placeholder="请选择" size="mini" class="map-input">
        <el-option v-for="(item,index) in radius.options" :key="index" :label="item.label" :value="item.value"></el-option>
      </el-select>
      <el-button type="primary" size="mini" @click="eventHanding">开始分析</el-button>
      <el-button type="primary" size="mini" @click="toManagement">事件管理</el-button>
      <!--            <el-button size="mini">关闭</el-button>-->
    </div>
  </div>

</template>

<script>

import eventBus from '../../../eventBus'

import BufferQuery from '@components/base-page/enterprise-emergency/event-handling/BufferQuery'
export default {
  name: 'DisposalEvent',
  data () {
    return {
      bufferQuery: null,
      activeNames: ['1'],
      radius: {
        value: 0.1,
        options: [{ label: '500m', value: 0.5 }, { label: '1km', value: 1 }, { label: '2km', value: 2 }, { label: '5km', value: 5 }, { label: '10km', value: 10 }]
      },
      form: {
        nameOfEvent: '***************事件',
        eventLocation: '**********装置',
@@ -106,35 +159,104 @@
          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: ''
        }

      ]
    }
  },
  mounted () {
    this.bufferQuery = new BufferQuery(window.map, window.L)
    this.bufferQuery.initLayers()
  },
  methods: {
    // 事件管理页面跳转
    ToManagement () {
      eventBus.$emit('events-reported', true)
    // 开始分析
    eventHanding () {
      eventBus.$emit('event-handling', {})
    },
    handleClickView (item) {
      console.log(item)
    },
    handleClickDownload (item) {
      console.log(item)
    },
    handleChange (val) {
      console.log(val)
    },
    mapClick () {
      window.map.once('click', (e) => {
        console.log(e)
        // [-75.343, 39.984];

        // var circle = turf.circle(center, radius, options)
        // eslint-disable-next-line no-unreachable
        this.bufferQuery.radius = this.radius.value
        const lat = 32.26431369781494
        const lng = 118.79283785820007
        // this.bufferQuery.bufferQuery(e.latlng.lng, e.latlng.lat)
        this.bufferQuery.bufferQuery(lng, lat)
      })
    },
    toManagement () {

    }
  }
}
</script>

<style lang="less" scoped>
    .fixed-width {
        width: 3.2459893rem;
        min-width: 3.2459893rem;
    }
.disposal-event {
  padding: 5px;
height: 400px;
  .fixed-width {
    width: 3.2459893rem;
    min-width: 3.2459893rem;
  }

    /deep/ .el-form-item {
        margin: 5px 0;
    }
  /deep/ .el-form-item {
    margin: 5px 0;
  }

    /deep/ .el-form-item__label {
        color: @color;
        font-size: 0.08rem;
    }
  /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;
  }
}
.event-management {
  text-align: right;
  margin: 15px;
}
</style>