派生自 wuyushui/SewerAndRainNetwork
src/components/base-page/enterprise-emergency/event-handling/ResInfo.vue
@@ -1,24 +1,26 @@ <template> <el-dialog :visible.sync="isShow" class="effect-vol-calc" title="周边资源信息" :modal="false" v-dialog-drag <el-dialog :visible.sync="isShow" class="res-info-container" title="周边资源信息" :modal="false" v-dialog-drag width="400" > <el-row> <el-col :span="3" style="text-align: center;"> <el-row> <el-button type="primary" size="mini" @click="reSet">应急基础</el-button> </el-row> <el-row> <el-button type="primary" size="mini" @click="reSet">在线监测</el-button></el-row> <el-row> <el-button type="primary" size="mini" @click="reSet">应急资源</el-button></el-row> <el-row> <el-button type="primary" size="mini" @click="reSet">周边环境</el-button></el-row> <el-row> <el-button type="primary" size="mini" @click="reSet">管道信息</el-button></el-row> <el-row v-for="(item,index) in menuList" :key="index"> <el-button type="primary" size="mini" :class="index===btnActive?'hover':''" @click="menuClickHandle(item,index)">{{ item.name }}</el-button> </el-row> <!--<el-row> <el-button type="primary" size="mini" @click="menuClickHandle">在线监测</el-button></el-row>--> <!--<el-row> <el-button type="primary" size="mini" @click="menuClickHandle">应急资源</el-button></el-row>--> <!--<el-row> <el-button type="primary" size="mini" @click="menuClickHandle">周边环境</el-button></el-row>--> <!--<el-row> <el-button type="primary" size="mini" @click="menuClickHandle">管道信息</el-button></el-row>--> </el-col> <el-col :span="21"> <el-row> <el-button type="primary" size="mini" @click="reSet">内排口(1)</el-button> <el-button type="primary" size="mini" @click="reSet">外排口(1)</el-button> <el-button type="primary" size="mini" @click="reSet">隔油池(1)</el-button> <el-button type="primary" size="mini" @click="reSet">节流阀(1)</el-button> <el-button type="primary" size="mini" @click="reSet">阀门(1)</el-button> <el-button type="primary" size="mini" @click="reSet">集水池(1)</el-button> <el-button type="primary" size="mini" @click="reSet">事故水管线(1)</el-button> <el-button type="primary" size="mini" @click="reSet">雨水管线(1)</el-button> <el-button v-for="(item,index) in subMenuList" :class="index===subBtnActive?'hover':''" :key="item.name" type="primary" size="mini" @click="subMenuClickHandle(item,index)">{{ item.name }}</el-button> <!-- <el-button type="primary" size="mini" @click="subMenuClickHandle">外排口(1)</el-button>--> <!-- <el-button type="primary" size="mini" @click="subMenuClickHandle">隔油池(1)</el-button>--> <!-- <el-button type="primary" size="mini" @click="subMenuClickHandle">节流阀(1)</el-button>--> <!-- <el-button type="primary" size="mini" @click="subMenuClickHandle">阀门(1)</el-button>--> <!-- <el-button type="primary" size="mini" @click="subMenuClickHandle">集水池(1)</el-button>--> <!-- <el-button type="primary" size="mini" @click="subMenuClickHandle">事故水管线(1)</el-button>--> <!-- <el-button type="primary" size="mini" @click="subMenuClickHandle">雨水管线(1)</el-button>--> </el-row> <el-row> <el-table @@ -38,11 +40,16 @@ </template> <script> import ResInfo from '@components/base-page/enterprise-emergency/event-handling/ResInfo' export default { name: 'ResInfo', data () { return { isShow: false, btnActive: 0, subBtnActive: 0, menuList: ResInfo.data, subMenuList: ResInfo.data[0].child, tableData: [ { id: 1, @@ -88,58 +95,60 @@ } ], currentTableData: { column: [{ label: '序号', prop: 'no', width: 'auto' }, { label: '存放点名称', prop: 'name', width: 'auto' }, { label: '存放点类型', prop: 'type', width: 'auto' }, { label: '负责人', prop: 'master', width: 'auto' }, { label: '联系电话', prop: 'phone', width: 'auto' }, { label: '物资名称（汇总）', prop: 'total', width: '200' }, { label: '距离', prop: 'distance', width: 'auto' }], data: [{ no: '1', name: '金陵时候应急物资存放点', type: '库房存放点', master: '张三', phone: '1333333333', total: '清水泵；编织袋；铁镐；铁锹；雨衣；雨鞋；防水手电；探照灯；麻绳', distance: '900m' }, { no: '2', name: '金陵时候应急物资存放点', type: '库房存放点', master: '张三三', phone: '1333333333', total: '清水泵；编织袋；铁镐；铁锹；雨衣；雨鞋；防水手电；探照灯；麻绳', distance: '900m' }] column: [ { label: '序号', prop: 'no', width: 'auto' }, { label: '存放点名称', prop: 'name', width: 'auto' }, { label: '存放点类型', prop: 'type', width: 'auto' }, { label: '负责人', prop: 'master', width: 'auto' }, { label: '联系电话', prop: 'phone', width: 'auto' }, { label: '物资名称（汇总）', prop: 'total', width: '200' }, { label: '距离', prop: 'distance', width: 'auto' }], data: [ { no: '1', name: '金陵时候应急物资存放点', type: '库房存放点', master: '张三', phone: '1333333333', total: '清水泵；编织袋；铁镐；铁锹；雨衣；雨鞋；防水手电；探照灯；麻绳', distance: '900m' }, { no: '2', name: '金陵时候应急物资存放点', type: '库房存放点', master: '张三三', phone: '1333333333', total: '清水泵；编织袋；铁镐；铁锹；雨衣；雨鞋；防水手电；探照灯；麻绳', distance: '900m' }] } } }, @@ -153,13 +162,41 @@ getVisible () { return this.isShow }, reSet () { menuClickHandle (item, index) { this.btnActive = index this.subBtnActive = 0 this.subMenuList = item.child }, subMenuClickHandle (subItem, index) { this.subBtnActive = index this.currentTableData.column = subItem.column } } } </script> <style scoped> <style lang="less"> .res-info-container{ /deep/ .el-dialog { left: 810px; } .el-dialog__header { padding: 4px 10px; } .el-dialog__headerbtn { top: 10px; } .hover{ color: @color-highlight; border-color:@color-highlight; } .el-button:active .el-button--primary.is-active, .el-button--primary:active ,.el-button--primary:focus, .el-button--primary:hover{ background: @background-color; color: @color-highlight; border-color:@color-highlight; } } </style>
