Newer
Older
KaiFengPC / src / views / preassess / calculate / storageCapacity.vue
@zhangdeliang zhangdeliang on 23 May 9 KB 初始化项目
  1. <template>
  2. <el-card class="box-card" shadow="never">
  3. <template #header>
  4. <div class="card-header">
  5. <span>计算结果</span>
  6. </div>
  7. </template>
  8. <el-form class="form" ref="targetForm" :model="form">
  9. <el-row :gutter="20">
  10. <el-col :span="8">
  11. <el-form-item label="面积加和㎡:" prop="areaTotal">
  12. <template #label>
  13. <span>面积加和㎡</span>
  14. <popover>
  15. <span style="font-weight: 700">说明</span>
  16. <br />
  17. <span>不同类型下垫面面积加和</span>
  18. </popover>
  19. <span>:</span>
  20. </template>
  21. <span>{{ form.areaTotal }}</span>
  22. </el-form-item>
  23. </el-col>
  24. <el-col :span="8">
  25. <el-form-item label="硬质地面㎡:" prop="hardGroundAreaTotal">
  26. <template #label>
  27. <span>硬质地面㎡</span>
  28. <popover>
  29. <span style="font-weight: 700">说明</span>
  30. <br />
  31. <span>硬质地面面积加和</span>
  32. </popover>
  33. <span>:</span>
  34. </template>
  35. <span>{{ form.hardGroundAreaTotal }}</span>
  36. </el-form-item>
  37. </el-col>
  38. <el-col :span="8">
  39. <el-form-item label="硬质地面率是否达标:" prop="hardGroundStandards">
  40. <template #label>
  41. <span>硬质地面率是否达标</span>
  42. <popover :width="260">
  43. <span style="font-weight: 700">说明</span>
  44. <br />
  45. <span>硬质地面占总面积的百分比,跟目标硬质地面对比,小于等于目标则达标</span>
  46. </popover>
  47. <span>:</span>
  48. </template>
  49. <el-tag v-if="standardMap.get(form.hardGroundStandards)?.text" :type="standardMap.get(form.hardGroundStandards)?.type">{{
  50. standardMap.get(form.hardGroundStandards)?.text
  51. }}</el-tag>
  52. <span v-else></span>
  53. </el-form-item>
  54. </el-col>
  55. </el-row>
  56. <el-row :gutter="20">
  57. <el-col :span="8">
  58. <el-form-item label="综合径流系数:" prop="comprehensiveRunoffCoefficient">
  59. <template #label>
  60. <span>综合径流系数</span>
  61. <popover :width="260">
  62. <span style="font-weight: 700">说明</span>
  63. <br />
  64. <span>不同类型下垫面径流系数×不同类型下垫面面积/下垫面面积加和</span>
  65. </popover>
  66. <span>:</span>
  67. </template>
  68. <span>{{ form.comprehensiveRunoffCoefficient }}</span>
  69. </el-form-item></el-col
  70. >
  71. <el-col :span="8">
  72. <el-form-item label="目标调蓄量m³:" prop="targetStorageCapacity">
  73. <template #label>
  74. <span>目标调蓄量m³</span>
  75. <popover :width="280">
  76. <span style="font-weight: 700">说明</span>
  77. <br />
  78. <span>0.01*设计降雨量*面积加和*综合径流系数</span>
  79. </popover>
  80. <span>:</span>
  81. </template>
  82. <span>{{ form.targetStorageCapacity }}</span>
  83. </el-form-item>
  84. </el-col>
  85. </el-row>
  86. </el-form>
  87. </el-card>
  88. <el-card class="box-card" shadow="never">
  89. <template #header>
  90. <div class="card-header">
  91. <span>目标调蓄量计算参数</span>
  92. </div>
  93. </template>
  94. <el-form class="tableForm" ref="tableForm" :model="formModel" :disabled="props.disabled">
  95. <el-table :data="formModel.tableData" v-loading="loading" element-loading-text="数据加载中...">
  96. <el-table-column label="下垫面类型" prop="itemName" show-overflow-tooltip />
  97. <el-table-column label="面积㎡" prop="area">
  98. <template #default="{ row, $index }">
  99. <el-form-item :prop="'tableData.' + $index + '.' + 'area'" :rules="rules['area']">
  100. <el-input v-model="row.area" />
  101. </el-form-item>
  102. </template>
  103. </el-table-column>
  104. <el-table-column label="径流系数" prop="runoffCoefficient">
  105. <template #header>
  106. <span>径流系数</span>
  107. <popover>
  108. <span style="font-weight: 700">说明</span>
  109. <br />
  110. <span>可输入参考值范围内的值,默认取径流系数参考值下限</span>
  111. </popover>
  112. </template>
  113. <template #default="{ row, $index }">
  114. <el-form-item :prop="'tableData.' + $index + '.' + 'runoffCoefficient'" :rules="rules['runoffCoefficient']">
  115. <el-input v-model="row.runoffCoefficient" />
  116. </el-form-item>
  117. </template>
  118. </el-table-column>
  119. <el-table-column label="径流系数参考值" show-overflow-tooltip>
  120. <template #header>
  121. <span>径流系数参考值</span>
  122. <popover>
  123. <span style="font-weight: 700">说明</span>
  124. <br />
  125. <span>由下垫面建议径流系数配置获取</span>
  126. </popover>
  127. </template>
  128. <template #default="{ row }">
  129. <span>{{ `${row.downValue}-${row.upValue}` }}</span>
  130. </template>
  131. </el-table-column>
  132. </el-table>
  133. </el-form>
  134. </el-card>
  135. </template>
  136.  
  137. <script setup>
  138. import { ref, reactive, onMounted, computed } from 'vue';
  139. import { getUnderlyingSurfaceRunoffConfigItemList } from '@/api/preassess/runoffCoefficient';
  140. import { facilitiesStandardCalcEdit } from '@/api/preassess/calculate';
  141. import { standardMap } from './map';
  142. import { inheritAttr } from '@/utils/v3';
  143. import popover from '@/components/popover';
  144.  
  145. const areaValidate = (rule, value, callback) => {
  146. if (value === '') {
  147. callback();
  148. } else {
  149. const reg = /^\d+(\.\d+)?$/;
  150. if (reg.test(value)) callback();
  151. else callback(new Error('请输入数字'));
  152. }
  153. };
  154.  
  155. const runoffCoefficientValidate = (rule, value, callback) => {
  156. if (value === '') {
  157. callback();
  158. } else {
  159. const reg = /^\d+(\.\d+)?$/;
  160. if (reg.test(value)) {
  161. const props = rule.field.split('.');
  162. const { downValue, upValue } = formModel[props[0]][props[1]];
  163. if (parseFloat(value) >= downValue * 1 && parseFloat(value) <= upValue * 1) {
  164. callback();
  165. } else {
  166. callback(new Error('请输入参考值范围的值'));
  167. }
  168. } else {
  169. callback(new Error('请输入参考值范围的值'));
  170. }
  171. }
  172. };
  173.  
  174. const { proxy } = getCurrentInstance();
  175. const emit = defineEmits(['success', 'set-computed-disabled']);
  176. const props = defineProps({
  177. id: {
  178. type: [String, Number],
  179. default: '',
  180. },
  181. opts: {
  182. type: Object,
  183. default: () => {},
  184. },
  185. projectInfo: {
  186. type: Object,
  187. default: () => {},
  188. },
  189. disabled: {
  190. type: Boolean,
  191. default: false,
  192. },
  193. });
  194. const { id, opts, projectInfo } = props;
  195.  
  196. const form = reactive({
  197. id: '',
  198. areaTotal: '',
  199. hardGroundAreaTotal: '',
  200. hardGroundStandards: '',
  201. comprehensiveRunoffCoefficient: '',
  202. targetStorageCapacity: '',
  203. facilityStorageCapacity: '',
  204. storageCapacityStandards: '',
  205. facilityStorageCapacityToAnnualRunoffTotalControlRate: '',
  206. pollutionRemovalRate: '',
  207. pollutionRemovalStandards: '',
  208. });
  209.  
  210. const formModel = reactive({
  211. tableData: [],
  212. });
  213. const rules = reactive({
  214. area: [{ validator: areaValidate, trigger: ['blur'] }],
  215. runoffCoefficient: [{ validator: runoffCoefficientValidate, trigger: ['blur'] }],
  216. });
  217. const loading = ref(false);
  218.  
  219. const params = computed(() => {
  220. const data = JSON.parse(JSON.stringify(formModel.tableData));
  221. for (const item of data) {
  222. item.area = item.area || '0';
  223. item.runoffCoefficient = item.runoffCoefficient || item.downValue;
  224. }
  225. return {
  226. calculateType: 0,
  227. id: form.id,
  228. projectNo: projectInfo.projectNo,
  229. standardCalcUnderlyingSurfaceRunoffSaveRequestList: data,
  230. };
  231. });
  232.  
  233. const getTableList = async () => {
  234. loading.value = true;
  235. const res = await getUnderlyingSurfaceRunoffConfigItemList({ status: '1' });
  236. if (res?.code !== 200) return;
  237. loading.value = false;
  238. res.data.forEach(item => {
  239. item.area = '';
  240. item.runoffCoefficient = item.downValue;
  241. });
  242. formModel.tableData = res.data;
  243. emit('set-computed-disabled', !formModel.tableData.length);
  244. };
  245.  
  246. const getDetailInfo = data => {
  247. inheritAttr(data, form);
  248. formModel.tableData = data.standardCalcUnderlyingSurfaceRunoffSaveRequestList;
  249. };
  250.  
  251. const getList = (data = {}) => {
  252. if (formModel.tableData.length) return;
  253. if (id) {
  254. getDetailInfo(data);
  255. } else {
  256. getTableList();
  257. }
  258. };
  259.  
  260. const submit = () => {
  261. proxy.$refs.tableForm.validate(async (valid, fields) => {
  262. if (valid) {
  263. console.log('submit', params);
  264. const res = await facilitiesStandardCalcEdit(params.value);
  265. if (res?.code !== 200) return;
  266. proxy.$modal.msgSuccess('计算成功!');
  267. inheritAttr(res.data, form);
  268. for (const item of formModel.tableData) {
  269. item.area = item.area || '0';
  270. item.runoffCoefficient = item.runoffCoefficient || item.downValue;
  271. }
  272. emit('success');
  273. } else {
  274. console.log('error submit!', fields);
  275. }
  276. });
  277. };
  278.  
  279. const heavyLoad = async () => {
  280. loading.value = true
  281. const res = await getUnderlyingSurfaceRunoffConfigItemList({ status: '1'})
  282. if(res?.code !== 200) return
  283. loading.value = false
  284. res.data.forEach((item) => {
  285. item.area = ''
  286. item.runoffCoefficient = item.downValue
  287. const oldData = formModel.tableData.find(it => it.itemName === item.itemName)
  288. if(oldData) {
  289. item.area = oldData.area
  290. item.runoffCoefficient = oldData.runoffCoefficient
  291. }
  292. })
  293. formModel.tableData = res.data
  294. }
  295.  
  296. onMounted(() => {});
  297.  
  298. defineExpose({
  299. getList,
  300. submit,
  301. form,
  302. heavyLoad
  303. });
  304. </script>
  305.  
  306. <style lang="scss" scoped>
  307. .box-card {
  308. margin-bottom: 10px;
  309. .card-header {
  310. font-weight: 700;
  311. font-size: 16px;
  312. }
  313.  
  314. :deep(.form) {
  315. .el-form-item {
  316. margin-bottom: 0;
  317. }
  318. }
  319.  
  320. &:last-of-type {
  321. margin-bottom: 0;
  322. }
  323. }
  324. </style>