<template>
|
<el-dialog :visible.sync="isShow" class="effect-vol-calc" title="事故水有效容积计算" :modal="false" v-dialogDrag
|
:before-close="handleClose">
|
<div class="container">
|
<el-row class="row-style" :span="24">
|
<el-col class="label" :span="6">事故水流量(m3/h):</el-col>
|
<el-col class="val-input" :span="6">
|
<el-input-number @change="calculate" v-model="val.SGSLL" :precision="2" size="mini"></el-input-number>
|
</el-col>
|
<el-col class="label" :span="6">事故时间(h):</el-col>
|
<el-col class="val-input" :span="6">
|
<el-input-number @change="calculate" v-model="val.SGSJ" size="mini"></el-input-number>
|
|
</el-col>
|
</el-row>
|
<el-row class="row-style">
|
<el-col class="label" :span="6">事故物料量(m³):</el-col>
|
<el-col class="val-input" :span="6">
|
<el-input-number @change="calculate" v-model="val.SGWLL" :precision="2" size="mini"></el-input-number>
|
</el-col>
|
<el-col class="label" :span="6">转存量(m³):</el-col>
|
<el-col class="val-input" :span="6">
|
<el-input-number @change="calculate" v-model="val.ZCL" :precision="2" size="mini"></el-input-number>
|
</el-col>
|
</el-row>
|
<el-row class="row-style">
|
<el-col class="label" :span="6">消防水流量(m³):</el-col>
|
<el-col class="val-input" :span="6">
|
<el-input-number @change="calculate" v-model="val.XFSLL" :precision="2" size="mini"></el-input-number>
|
|
</el-col>
|
<el-col class="label" :span="6">消防时间(h):</el-col>
|
<el-col class="val-input" :span="6">
|
<el-input-number @change="calculate" v-model="val.XFSJ" size="mini"></el-input-number>
|
|
</el-col>
|
</el-row>
|
<el-row class="row-style">
|
<el-col class="label" :span="6">降雨量(mm):</el-col>
|
<el-col class="val-input" :span="6">
|
<el-input-number @change="calculate" v-model="val.JYL" :precision="2" size="mini"></el-input-number>
|
</el-col>
|
<el-col class="label" :span="6">汇水面积(㎡):</el-col>
|
<el-col class="val-input" :span="6">
|
<el-input-number @change="calculate" v-model="val.HSMJ" :precision="2" size="mini"></el-input-number>
|
</el-col>
|
</el-row>
|
<el-row class="row-style .map-under-line">
|
<el-col class="label" :span="6">生产废水量(m³):</el-col>
|
<el-col class="val-input" :span="6">
|
<el-input-number @change="calculate" v-model="val.SCFSL" :precision="2" size="mini"></el-input-number>
|
</el-col>
|
<el-col class="label" :span="6">收集池余量(m³):</el-col>
|
<el-col class="val-input" :span="6">
|
<el-input-number @change="calculate" v-model="val.SJCYL" :precision="2" size="mini"></el-input-number>
|
</el-col>
|
</el-row>
|
<el-row class="row-style">
|
<el-col class="label" :span="6">事故水容积(m³):</el-col>
|
<el-col class="val-input res-highlight" :span="6"><span>{{ val.SGSRJ }}</span></el-col>
|
<el-col class="label" :span="6">是否大于收集池余量:</el-col>
|
<el-col class="val-input res-highlight" :span="6"><span>{{ val.SFDYSJCYL }}</span></el-col>
|
</el-row>
|
<div class="footer">
|
<el-button type="primary" size="mini" @click="reSet">重置</el-button>
|
</div>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script>
|
export default {
|
name: 'EffectiveVolumeCalc',
|
data () {
|
return {
|
isShow: false,
|
val: {}
|
}
|
},
|
mounted () {
|
this.reSet()
|
},
|
methods: {
|
handleClose (done) {
|
this.isShow = false
|
},
|
setVisible (s) {
|
this.isShow = s
|
},
|
getVisible () {
|
return this.isShow
|
},
|
reSet () {
|
const val = {
|
SGSLL: 0, // 事故水流量
|
SGSJ: 0, // 事故时间
|
SGWLL: 0, // 事故物料量
|
ZCL: 0, // 转存量
|
XFSLL: 0, // 消费水流量
|
XFSJ: 0, // 消防时间
|
JYL: 0, // 降雨量
|
HSMJ: 0, // 汇水面积
|
SCFSL: 0, // 生产废水量
|
SJCYL: 0, // 收集池余量
|
SGSRJ: 0, // 事故水容积
|
SFDYSJCYL: '--'// 是否大于收集池余量
|
}
|
this.val = val
|
},
|
calculate () {
|
const v = this.val
|
|
v.SGSRJ = (v.SGWLL + v.XFSLL * v.XFSJ - v.ZCL) + v.SCFSL + v.JYL
|
|
v.SFDYSJCYL = v.SGSRJ > v.SJCYL ? '是' : '否'
|
}
|
|
}
|
}
|
</script>
|
|
<style lang="less">
|
.effect-vol-calc {
|
width: 20rem;
|
|
.container {
|
padding: 0.15rem;
|
|
.label {
|
color: @color;
|
text-align: end;
|
line-height: 28px;
|
}
|
|
.val-input {
|
text-align: center;
|
}
|
|
.res-highlight {
|
color: @color-highlight;
|
line-height: 28px;
|
}
|
}
|
|
/deep/ .el-dialog {
|
left: 810px;
|
}
|
|
.el-dialog__header {
|
padding: 4px 10px;
|
}
|
|
.el-dialog__headerbtn {
|
top: 10px;
|
}
|
|
.row-style {
|
padding: 4px 0;
|
}
|
|
.el-input__inner {
|
background: @background-color;
|
border-color: @color;
|
}
|
|
.el-input__inner:focus, .el-input__inner:hover {
|
border-color: @color-highlight;
|
outline: 0;
|
}
|
|
.el-input-number span {
|
color: @color;
|
}
|
|
.el-input-number__decrease {
|
background: @background-color;
|
border-right: 1px solid @color;
|
|
&:hover {
|
color: @color-highlight;
|
}
|
}
|
|
.el-input-number__increase {
|
background: @background-color;
|
border-left: 1px solid @color;
|
|
&:hover {
|
color: @color-highlight;
|
}
|
}
|
|
.el-input-number__decrease:hover:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled),
|
.el-input-number__increase:hover:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled) {
|
border-color: @color-highlight;
|
}
|
|
.el-date-table td.today span {
|
color: @color-highlight;
|
}
|
|
.el-picker-panel__footer {
|
background: @background-color;
|
border-top-color: @color;
|
}
|
|
.el-date-table th {
|
border-bottom-color: @color;
|
}
|
|
.el-button {
|
background: @background-color;
|
color: @color;
|
border-color: @color;
|
}
|
|
.el-button--text {
|
padding: 7px 15px;
|
}
|
|
.el-button:hover {
|
background: @background-color;
|
color: @color-highlight;
|
border-color: @color-highlight;
|
}
|
|
.el-input__inner {
|
color: #fff;
|
text-align: center;
|
}
|
|
.el-date-picker__time-header {
|
border-bottom-color: @background-color-split;
|
}
|
|
.el-date-picker__header-label {
|
color: #fff
|
}
|
}
|
</style>
|
