派生自 wuyushui/SewerAndRainNetwork
src/components/panel/topicSearch/enterprise-emergency/EventQuery.vue
@@ -1,89 +1,110 @@ <template> <div class="search-panel"> <el-form ref="form" :model="form" label-width="90px" class="search-form"> <el-form ref="form" :model="form" label-width="90px" class="search-form"> <el-form-item label="企业名称：" size="mini" class="search-panel-item"> <el-select style="width: 100%" v-model="form.pipelineType" @change="handlePipelineType" :popper-class="'select-down'"> <el-option v-for="item in items" :key="item.code" :label="item.name" :value="item.name"> </el-option> </el-select> </el-form-item> <el-form-item label="事件状态：" size="mini"> <el-select style="width: 100%" v-model="form.dataType" value-key="code" :popper-class="'select-down'" @change="handleDataType"> <el-option v-for="item in subItems" :key="item.code" :label="item.name" :value="item"> </el-option> </el-select> </el-form-item> <el-form-item label="事件类型："> <el-radio-group v-model="form.transferData" class="levelOfRisk"> <el-radio v-for="(item,index) in form.levelOfRisk" :label="item.value" :key="index" @change="redioChange(item.name)"> <span class="levelOfRisk-type">{{ item.name }}</span> </el-radio> </el-radio-group> </el-form-item> <div class="rightButtonSearch"> <el-input v-model="form.keyword" size="mini" placeholder="在此输入关键字搜索"></el-input> <el-button class="el-icon-search" @click="handleSearch"></el-button> </div> </el-form> </el-form> <el-scrollbar style="height:286.22px"> <!-- <div class="environmental-risk-list" v-for="(item,index) in list" :key="index" :class="activeNum===index?'hover':''" @click="accordPopup(item)">--> <!-- <!– <i class="state"></i>–>--> <!-- <img class="state" :src="getImgSrc(item.properties.type)" style="background: none"/>--> <!-- <div>--> <!-- <h3 @click="handleLocation(item,index)">事件名称:XXX事件</h3>--> <!-- <h5>--> <!-- 事件事件:2021年3月21日--> <!-- <el-button class="rt btn00fff6" size="mini" style="margin-right: 0.04rem;">删除</el-button>--> <!-- </h5>--> <!-- <p>--> <!-- 事件状态：<span>审批阶段</span>--> <!-- </p>--> <!-- <p>事件类型：<span>{{ item.properties.pipecode }}</span>--> <!-- <el-button class="rt btn00fff6" size="mini" style="margin-right: 0.04rem;">事件管理--> <!-- </el-button>--> <!-- </p>--> <!-- </div>--> <!-- </div>--> <div class="environmental-risk-list"> <i class="state"></i> <div> <h3> <span @click="disposalfx">件名称:XXX事件</span> <el-button class="rt btn00fff6" size="mini" style="margin-right: 0.04rem;" @click="startAnalysis"> <span>开始分析</span> </el-button> </h3> <h5> <span>事件事件:2021年3月21日</span> <el-button class="rt btn00fff6" size="mini" style="margin: 0.04rem 0.1rem;">删除</el-button> </h5> <p> 事件状态：<span>审批阶段</span> </p> <p>事件类型：<span>模拟管线事件</span> <el-button class="rt btn00fff6" size="mini" style="margin-right: 0.04rem;" @click="accordPopup()"> <span>事件管理</span> </el-button> </p> </div> </div> </el-scrollbar> <!-- <reportPopup></reportPopup>--> <div class="search-panel"> <el-form ref="form" :model="form" label-width="90px" class="search-form"> <el-form-item label="企业名称：" size="mini" class="search-panel-item"> <el-select style="width: 100%" v-model="form.pipelineType" @change="handlePipelineType" :popper-class="'select-down'"> <el-option v-for="item in items" :key="item.code" :label="item.name" :value="item.name"> </el-option> </el-select> </el-form-item> <el-form-item label="事件状态：" size="mini"> <el-select style="width: 100%" v-model="form.dataType" value-key="code" :popper-class="'select-down'" @change="handleDataType"> <el-option v-for="item in subItems" :key="item.code" :label="item.name" :value="item"> </el-option> </el-select> </el-form-item> <el-form-item label="事件类型："> <el-radio-group v-model="form.transferData" class="levelOfRisk"> <el-radio v-for="(item,index) in form.levelOfRisk" :label="item.value" :key="index" @change="redioChange(item.name)"> <span class="levelOfRisk-type">{{ item.name }}</span> </el-radio> </el-radio-group> </el-form-item> <el-button type="primary" small @click="dialogVisibleChange">事件上报</el-button> <div class="page_total"> <p>共计 <span>{{ total }}</span> 条记录 </p> </div> <div class="rightButtonSearch"> <el-input v-model="form.keyword" size="mini" placeholder="在此输入关键字搜索"></el-input> <el-button class="el-icon-search" @click="handleSearch"></el-button> </div> </el-form> <el-scrollbar style="height:286.22px"> <!-- <div class="environmental-risk-list">--> <!-- <i class="state"></i>--> <!-- <el-row>--> <!-- <h3>--> <!-- <span @click="handleLocation">事件名称:XXX事件</span>--> <!-- <el-button class="rt btn00fff6" size="mini" @click="startAnalysis">开始分析</el-button>--> <!-- </h3>--> <!-- <h5>--> <!-- <span>事件事件:2021年3月21日</span>--> <!-- <el-button class="rt btn00fff6" size="mini">删除</el-button>--> <!-- </h5>--> <!-- <p>--> <!-- 事件状态：<span>审批阶段</span>--> <!-- <el-button class="rt btn00fff6" size="mini" @click="accordPopup()">事件处置</el-button>--> <!-- </p>--> <!-- <p>事件类型：<span>模拟管线事件</span></p>--> <!-- </el-row>--> <!-- </div>--> <el-row class="environmental-risk-list"> <el-col :span="1"> <i class="state"></i> </el-col> <el-col :span="19"> <!-- <div>--> <!-- <el-row>--> <h3> <span @click="handleLocation">事件名称:XXX事件</span> <!-- <el-button class="rt btn00fff6" size="mini" @click="startAnalysis">开始分析</el-button>--> </h3> <h5> <span>事件事件:2021年3月21日</span> <!-- <el-button class="rt btn00fff6" size="mini">删除</el-button>--> </h5> <p> 事件状态：<span>审批阶段</span> <!-- <el-button class="rt btn00fff6" size="mini" @click="accordPopup()">事件处置</el-button>--> </p> <p>事件类型：<span>模拟管线事件</span></p> <!-- </el-row>--> <!-- </div>--> </el-col> <el-col :span="4"> <el-button class="rt btn00fff6" size="mini" @click="startAnalysis" style="margin: 0.01rem">开始分析</el-button> <el-button class="rt btn00fff6" size="mini" style="margin: 0.05rem">删除</el-button> <el-button class="rt btn00fff6" size="mini" @click="accordPopup()" style="margin: 0.02rem">事件处置</el-button> </el-col> </el-row> </el-scrollbar> <div class="event-report"> <el-dialog custom-class="event-report-dialog" title="事件上报" :visible.sync="dialogVisible" :append-to-body="true" :modal="false" v-dialog-drag > <EventsReported></EventsReported> </el-dialog> </div> </div> </template> <script> @@ -91,25 +112,23 @@ // import WfsHelper from '@components/helpers/WfsHelper' // import AjaxUtils from '@utils/AjaxUtils' import DisposalEvent from '../../../base-page/enterprise-emergency/DisposalEvent' import eventBus from '../../../../eventBus' import DisposalEvent from '../../../base-page/enterprise-emergency/DisposalEvent' import EventsReported from '../../../base-page/enterprise-emergency/events-reported/EventsReported' // import EventHandling from '@components/base-page/enterprise-emergency/event-handling/EventHandling' export default { name: 'EventQuery', components: { // reportPopup EventsReported }, data () { return { reportIncident: false, list: [], activeNum: -1, LayerEvent: {}, LayerResources: {}, // items: [LayerEvent, LayerResources], // subItems: LayerEntEmer.layers, items: [], subItems: [], // 弹框绑定 显示/隐藏 数据 dialogVisible: false, // wfs数据请求 WfsHelper: null, // form 表单绑定数据 form: { pipelineType: '', dataType: '', @@ -126,32 +145,35 @@ } ] }, WfsHelper: null // active index activeNum: -1, // 图层 items: [], subItems: [], // 请求数据展示列表 list: [], // 分页功能 总数量 total: 0 } }, mounted () { // this.wfsHelper = new WfsHelper() // 接收 数据 用来控制 弹出框 的隐藏 eventBus.$on('event-report-popup', (obj) => { this.dialogVisible = obj }) }, methods: { // 事件上报按钮 点击事件 控制弹框的显示/隐藏 dialogVisibleChange () { this.dialogVisible = !this.dialogVisible }, // 点击事件管理 accordPopup () { eventBus.$emit('disposal-analysis', true) }, // 开始分析 startAnalysis () { eventBus.$emit('start-analysis', true) }, disposalfx () { window.$layer.open({ content: { comp: DisposalEvent, // 组件 parent: this, // 父组件 data: { // 传递的参数 // info: this.info } }, title: '处置事件' }) eventBus.$emit('event-handling', {}) }, // radio数据选择 redioChange (item) { @@ -184,11 +206,31 @@ // 搜索的数据 de 点击事件 handleLocation () { console.log('val') // 时间信息 弹出框 window.$layer.open({ content: { comp: DisposalEvent, // 组件 parent: this, // 父组件 data: { // 传递的参数 // info: this.info } }, title: '事件信息' }) } } } </script> <style lang="less" scoped> /deep/ .el-dialog { width: 3.343545rem; } /deep/ .event-report-dialog { left: 3rem; top: 1rem; margin-top: 2rem; margin-left: 2rem; } </style>
