派生自 wuyushui/SewerAndRainNetwork
src/components/base-page/enterprise-emergency/DisposalEvent.vue
@@ -1,62 +1,105 @@ <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> <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> <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-input></el-input> <el-button type="primary" size="mini" @click="ToManagement">开始分析</el-button> <!-- <el-button size="mini">关闭</el-button>--> </div> </div> </template> <script> @@ -67,6 +110,7 @@ name: 'DisposalEvent', data () { return { activeNames: ['1'], form: { nameOfEvent: '***************事件', eventLocation: '**********装置', @@ -106,35 +150,83 @@ 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: '' } ] } }, methods: { // 事件管理页面跳转 // 开始分析 ToManagement () { eventBus.$emit('events-reported', true) eventBus.$emit('event-handling', {}) }, handleClickView (item) { console.log(item) }, handleClickDownload (item) { console.log(item) }, handleChange (val) { console.log(val) } } } </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>
