- <template>
- <el-card class="box-card" shadow="never">
- <template #header>
- <div class="card-header">
- <span>计算结果</span>
- </div>
- </template>
- <el-form class="form" ref="targetForm" :model="form">
- <el-row :gutter="20">
- <el-col :span="8">
- <el-form-item label="面积加和㎡:" prop="areaTotal">
- <template #label>
- <span>面积加和㎡</span>
- <popover>
- <span style="font-weight: 700">说明</span>
- <br />
- <span>不同类型下垫面面积加和</span>
- </popover>
- <span>:</span>
- </template>
- <span>{{ form.areaTotal }}</span>
- </el-form-item>
- </el-col>
- <el-col :span="8">
- <el-form-item label="硬质地面㎡:" prop="hardGroundAreaTotal">
- <template #label>
- <span>硬质地面㎡</span>
- <popover>
- <span style="font-weight: 700">说明</span>
- <br />
- <span>硬质地面面积加和</span>
- </popover>
- <span>:</span>
- </template>
- <span>{{ form.hardGroundAreaTotal }}</span>
- </el-form-item>
- </el-col>
- <el-col :span="8">
- <el-form-item label="硬质地面率是否达标:" prop="hardGroundStandards">
- <template #label>
- <span>硬质地面率是否达标</span>
- <popover :width="260">
- <span style="font-weight: 700">说明</span>
- <br />
- <span>硬质地面占总面积的百分比,跟目标硬质地面对比,小于等于目标则达标</span>
- </popover>
- <span>:</span>
- </template>
- <el-tag v-if="standardMap.get(form.hardGroundStandards)?.text" :type="standardMap.get(form.hardGroundStandards)?.type">{{
- standardMap.get(form.hardGroundStandards)?.text
- }}</el-tag>
- <span v-else></span>
- </el-form-item>
- </el-col>
- </el-row>
- <el-row :gutter="20">
- <el-col :span="8">
- <el-form-item label="综合径流系数:" prop="comprehensiveRunoffCoefficient">
- <template #label>
- <span>综合径流系数</span>
- <popover :width="260">
- <span style="font-weight: 700">说明</span>
- <br />
- <span>不同类型下垫面径流系数×不同类型下垫面面积/下垫面面积加和</span>
- </popover>
- <span>:</span>
- </template>
- <span>{{ form.comprehensiveRunoffCoefficient }}</span>
- </el-form-item></el-col
- >
- <el-col :span="8">
- <el-form-item label="目标调蓄量m³:" prop="targetStorageCapacity">
- <template #label>
- <span>目标调蓄量m³</span>
- <popover :width="280">
- <span style="font-weight: 700">说明</span>
- <br />
- <span>0.01*设计降雨量*面积加和*综合径流系数</span>
- </popover>
- <span>:</span>
- </template>
- <span>{{ form.targetStorageCapacity }}</span>
- </el-form-item>
- </el-col>
- </el-row>
- </el-form>
- </el-card>
- <el-card class="box-card" shadow="never">
- <template #header>
- <div class="card-header">
- <span>目标调蓄量计算参数</span>
- </div>
- </template>
- <el-form class="tableForm" ref="tableForm" :model="formModel" :disabled="props.disabled">
- <el-table :data="formModel.tableData" v-loading="loading" element-loading-text="数据加载中...">
- <el-table-column label="下垫面类型" prop="itemName" show-overflow-tooltip />
- <el-table-column label="面积㎡" prop="area">
- <template #default="{ row, $index }">
- <el-form-item :prop="'tableData.' + $index + '.' + 'area'" :rules="rules['area']">
- <el-input v-model="row.area" />
- </el-form-item>
- </template>
- </el-table-column>
- <el-table-column label="径流系数" prop="runoffCoefficient">
- <template #header>
- <span>径流系数</span>
- <popover>
- <span style="font-weight: 700">说明</span>
- <br />
- <span>可输入参考值范围内的值,默认取径流系数参考值下限</span>
- </popover>
- </template>
- <template #default="{ row, $index }">
- <el-form-item :prop="'tableData.' + $index + '.' + 'runoffCoefficient'" :rules="rules['runoffCoefficient']">
- <el-input v-model="row.runoffCoefficient" />
- </el-form-item>
- </template>
- </el-table-column>
- <el-table-column label="径流系数参考值" show-overflow-tooltip>
- <template #header>
- <span>径流系数参考值</span>
- <popover>
- <span style="font-weight: 700">说明</span>
- <br />
- <span>由下垫面建议径流系数配置获取</span>
- </popover>
- </template>
- <template #default="{ row }">
- <span>{{ `${row.downValue}-${row.upValue}` }}</span>
- </template>
- </el-table-column>
- </el-table>
- </el-form>
- </el-card>
- </template>
-
- <script setup>
- import { ref, reactive, onMounted, computed } from 'vue';
- import { getUnderlyingSurfaceRunoffConfigItemList } from '@/api/preassess/runoffCoefficient';
- import { facilitiesStandardCalcEdit } from '@/api/preassess/calculate';
- import { standardMap } from './map';
- import { inheritAttr } from '@/utils/v3';
- import popover from '@/components/popover';
-
- const areaValidate = (rule, value, callback) => {
- if (value === '') {
- callback();
- } else {
- const reg = /^\d+(\.\d+)?$/;
- if (reg.test(value)) callback();
- else callback(new Error('请输入数字'));
- }
- };
-
- const runoffCoefficientValidate = (rule, value, callback) => {
- if (value === '') {
- callback();
- } else {
- const reg = /^\d+(\.\d+)?$/;
- if (reg.test(value)) {
- const props = rule.field.split('.');
- const { downValue, upValue } = formModel[props[0]][props[1]];
- if (parseFloat(value) >= downValue * 1 && parseFloat(value) <= upValue * 1) {
- callback();
- } else {
- callback(new Error('请输入参考值范围的值'));
- }
- } else {
- callback(new Error('请输入参考值范围的值'));
- }
- }
- };
-
- const { proxy } = getCurrentInstance();
- const emit = defineEmits(['success', 'set-computed-disabled']);
- const props = defineProps({
- id: {
- type: [String, Number],
- default: '',
- },
- opts: {
- type: Object,
- default: () => {},
- },
- projectInfo: {
- type: Object,
- default: () => {},
- },
- disabled: {
- type: Boolean,
- default: false,
- },
- });
- const { id, opts, projectInfo } = props;
-
- const form = reactive({
- id: '',
- areaTotal: '',
- hardGroundAreaTotal: '',
- hardGroundStandards: '',
- comprehensiveRunoffCoefficient: '',
- targetStorageCapacity: '',
- facilityStorageCapacity: '',
- storageCapacityStandards: '',
- facilityStorageCapacityToAnnualRunoffTotalControlRate: '',
- pollutionRemovalRate: '',
- pollutionRemovalStandards: '',
- });
-
- const formModel = reactive({
- tableData: [],
- });
- const rules = reactive({
- area: [{ validator: areaValidate, trigger: ['blur'] }],
- runoffCoefficient: [{ validator: runoffCoefficientValidate, trigger: ['blur'] }],
- });
- const loading = ref(false);
-
- const params = computed(() => {
- const data = JSON.parse(JSON.stringify(formModel.tableData));
- for (const item of data) {
- item.area = item.area || '0';
- item.runoffCoefficient = item.runoffCoefficient || item.downValue;
- }
- return {
- calculateType: 0,
- id: form.id,
- projectNo: projectInfo.projectNo,
- standardCalcUnderlyingSurfaceRunoffSaveRequestList: data,
- };
- });
-
- const getTableList = async () => {
- loading.value = true;
- const res = await getUnderlyingSurfaceRunoffConfigItemList({ status: '1' });
- if (res?.code !== 200) return;
- loading.value = false;
- res.data.forEach(item => {
- item.area = '';
- item.runoffCoefficient = item.downValue;
- });
- formModel.tableData = res.data;
- emit('set-computed-disabled', !formModel.tableData.length);
- };
-
- const getDetailInfo = data => {
- inheritAttr(data, form);
- formModel.tableData = data.standardCalcUnderlyingSurfaceRunoffSaveRequestList;
- };
-
- const getList = (data = {}) => {
- if (formModel.tableData.length) return;
- if (id) {
- getDetailInfo(data);
- } else {
- getTableList();
- }
- };
-
- const submit = () => {
- proxy.$refs.tableForm.validate(async (valid, fields) => {
- if (valid) {
- console.log('submit', params);
- const res = await facilitiesStandardCalcEdit(params.value);
- if (res?.code !== 200) return;
- proxy.$modal.msgSuccess('计算成功!');
- inheritAttr(res.data, form);
- for (const item of formModel.tableData) {
- item.area = item.area || '0';
- item.runoffCoefficient = item.runoffCoefficient || item.downValue;
- }
- emit('success');
- } else {
- console.log('error submit!', fields);
- }
- });
- };
-
- const heavyLoad = async () => {
- loading.value = true
- const res = await getUnderlyingSurfaceRunoffConfigItemList({ status: '1'})
- if(res?.code !== 200) return
- loading.value = false
- res.data.forEach((item) => {
- item.area = ''
- item.runoffCoefficient = item.downValue
- const oldData = formModel.tableData.find(it => it.itemName === item.itemName)
- if(oldData) {
- item.area = oldData.area
- item.runoffCoefficient = oldData.runoffCoefficient
- }
- })
- formModel.tableData = res.data
- }
-
- onMounted(() => {});
-
- defineExpose({
- getList,
- submit,
- form,
- heavyLoad
- });
- </script>
-
- <style lang="scss" scoped>
- .box-card {
- margin-bottom: 10px;
- .card-header {
- font-weight: 700;
- font-size: 16px;
- }
-
- :deep(.form) {
- .el-form-item {
- margin-bottom: 0;
- }
- }
-
- &:last-of-type {
- margin-bottom: 0;
- }
- }
- </style>