派生自 wuyushui/SewerAndRainNetwork
src/components/base-page/enterprise-emergency/DisposalEvent.vue
@@ -1,82 +1,125 @@ <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> <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> <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 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: '**********装置', @@ -116,13 +159,60 @@ 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 () { 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 () { } } } @@ -131,7 +221,7 @@ <style lang="less" scoped> .disposal-event { padding: 5px; height: 400px; .fixed-width { width: 3.2459893rem; min-width: 3.2459893rem; @@ -144,11 +234,6 @@ /deep/ .el-form-item__label { color: @color; font-size: 0.08rem; } .event-management { text-align: right; margin: 15px; } .sub-title { @@ -170,5 +255,8 @@ text-align: left; } } .event-management { text-align: right; margin: 15px; } </style>
