<template>
|
<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>
|
|
<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>
|
</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: '**********装置',
|
positionDesc: '**********装置',
|
incidentUnit: '**********部门',
|
atTime: '2021年5月24日 10:27',
|
eventDesc: '事件描述事件描述事件描述事件描述'
|
},
|
tableData: [
|
{
|
name: '预案A',
|
define: '综合预案',
|
hierarchy: '二级单位',
|
classification: '环保'
|
},
|
{
|
name: '预案B',
|
define: '专项预案',
|
hierarchy: '直属企业',
|
classification: '环保'
|
},
|
{
|
name: '预案C',
|
define: '现场处置预案',
|
hierarchy: '基层单位',
|
classification: '生产'
|
},
|
{
|
name: '预案D',
|
define: '现场处置预案',
|
hierarchy: '基层单位',
|
classification: '生产'
|
},
|
{
|
name: '预案E',
|
define: '现场处置预案',
|
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: {
|
// 开始分析
|
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>
|
.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__label {
|
color: @color;
|
font-size: 0.08rem;
|
}
|
|
.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>
|
