Newer
Older
KaiFengPC / src / views / spongePerformance / ManagingPerformance / projectCompletionStatus / rationality / analysis.vue
@zhangdeliang zhangdeliang on 23 May 17 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="formM5" ref="standForm" :model="form">
  9. <el-row :gutter="20">
  10. <el-col :span="6">
  11. <el-form-item label="面积加和㎡:" prop="areaTotal">
  12. <span>{{ form.areaTotal }}</span>
  13. </el-form-item>
  14. </el-col>
  15. <el-col :span="6">
  16. <el-form-item label="硬质地面㎡:" prop="hardGroundRate">
  17. <template #label>
  18. <span>硬质地面㎡</span>
  19. <popover :width="140">
  20. <span style="font-weight: 700">说明</span>
  21. <br />
  22. <span>硬质地面面积加和</span>
  23. </popover>
  24. <span>:</span>
  25. </template>
  26. <span>{{ form.hardGroundRate }}</span>
  27. </el-form-item>
  28. </el-col>
  29. <el-col :span="6">
  30. <el-form-item label="硬质地面率是否达标:" prop="hardGroundStandards">
  31. <template #label>
  32. <span>硬质地面率是否达标</span>
  33. <popover>
  34. <span style="font-weight: 700">说明</span>
  35. <br />
  36. <span>硬质地面占总面积的百分比,跟目标硬质地面对比,大于目标则达标</span>
  37. </popover>
  38. <span>:</span>
  39. </template>
  40. <el-tag
  41. v-if="standardMap.get(form.hardGroundStandards)?.text"
  42. :type="standardMap.get(form.hardGroundStandards)?.type"
  43. >{{ standardMap.get(form.hardGroundStandards)?.text }}</el-tag>
  44. <span v-else>-</span>
  45. </el-form-item>
  46. </el-col>
  47. <el-col :span="6">
  48. <el-form-item label="硬质地面率评级:" prop="hardGroundGrade">
  49. <template #label>
  50. <span>硬质地面率评级</span>
  51. <popover width={ 240 }>
  52. <span style="font-weight: 700">说明</span>
  53. <br />
  54. <span>高于目标值,评【差】</span>
  55. <br />
  56. <span>低于目标值5%以内,评【中】</span>
  57. <br />
  58. <span>低于目标值10%以内,评【良】</span>
  59. <br />
  60. <span>低于目标值10%以上,评【优】</span>
  61. <br />
  62. <span>包含下限、不包含上限</span>
  63. </popover>
  64. <span>:</span>
  65. </template>
  66. <el-tag
  67. v-if="levelMap.get(form.hardGroundGrade)?.text"
  68. :type="levelMap.get(form.hardGroundGrade)?.type"
  69. >{{ levelMap.get(form.hardGroundGrade)?.text }}</el-tag>
  70. <span v-else>-</span>
  71. </el-form-item>
  72. </el-col>
  73. </el-row>
  74. <el-row :gutter="20">
  75. <el-col :span="6">
  76. <el-form-item label="目标调蓄量m³:" prop="targetStorageCapacity">
  77. <span>{{ form.targetStorageCapacity }}</span>
  78. </el-form-item>
  79. </el-col>
  80. <el-col :span="6">
  81. <el-form-item label="设施调蓄量m³:" prop="facilityStorageCapacity">
  82. <template #label>
  83. <span>设施调蓄量m³</span>
  84. <popover>
  85. <span style="font-weight: 700">说明</span>
  86. <br />
  87. <span>渗透设施、生物滞留设施、传输与截污净化设施的设施面积*有效调蓄深度加和,再加存储设施的调蓄量之和</span>
  88. </popover>
  89. <span>:</span>
  90. </template>
  91. <span>{{ form.facilityStorageCapacity }}</span>
  92. </el-form-item>
  93. </el-col>
  94. <el-col :span="6">
  95. <el-form-item label="调蓄容积是否达标:" prop="storageCapacityStandards">
  96. <template #label>
  97. <span>调蓄容积是否达标</span>
  98. <popover>
  99. <span style="font-weight: 700">说明</span>
  100. <br />
  101. <span>跟目标年径流总量控制率对比,大于等于则达标,反之不达标</span>
  102. </popover>
  103. <span>:</span>
  104. </template>
  105. <el-tag
  106. v-if="standardMap.get(form.storageCapacityStandards)?.text"
  107. :type="standardMap.get(form.storageCapacityStandards)?.type"
  108. >{{ standardMap.get(form.storageCapacityStandards)?.text }}</el-tag>
  109. <span v-else>-</span>
  110. </el-form-item>
  111. </el-col>
  112. <el-col :span="6">
  113. <el-form-item label="设施调蓄量对应年径流总量控制率%:" prop="facilityStorageCapacityToAnnualRunoffTotalControlRate">
  114. <template #label>
  115. <span>设施调蓄量对应年径流总量控制率</span>
  116. <popover :width="300">
  117. <span style="font-weight: 700">说明</span>
  118. <br />
  119. <span>设施调蓄量对应设计降雨=100*设施调蓄量 / (面积加和*综合径流系数)</span>
  120. <br /><br />
  121. <span>设施调蓄量对应年径流总量控制率:根据目标年径流总量控制率跟设计降雨关系曲线,由设施调蓄量对应设计降雨推算设施调蓄量对应年径流总量控制率</span>
  122. </popover>
  123. <span>:</span>
  124. </template>
  125. <span class="ellipsis" :title="form.facilityStorageCapacityToAnnualRunoffTotalControlRate">{{ form.facilityStorageCapacityToAnnualRunoffTotalControlRate }}</span>
  126. </el-form-item>
  127. </el-col>
  128. </el-row>
  129. <el-row :gutter="20">
  130. <el-col :span="6">
  131. <el-form-item label="年径流总量控制率评级:" prop="totalAnnualRunoffGrade">
  132. <template #label>
  133. <span>年径流总量控制率评级</span>
  134. <popover :width="240">
  135. <span style="font-weight: 700">说明</span>
  136. <br />
  137. <span>低于目标值,评【差】</span>
  138. <br />
  139. <span>高于目标值5%以内,评【中】</span>
  140. <br />
  141. <span>高于目标值10%以内,评【良】</span>
  142. <br />
  143. <span>高于目标值10%以上,评【优】</span>
  144. <br />
  145. <span>包含下限、不包含上限</span>
  146. </popover>
  147. <span>:</span>
  148. </template>
  149. <el-tag
  150. v-if="levelMap.get(form.totalAnnualRunoffGrade)?.text"
  151. :type="levelMap.get(form.totalAnnualRunoffGrade)?.type"
  152. >{{ levelMap.get(form.totalAnnualRunoffGrade)?.text }}</el-tag>
  153. <span v-else>-</span>
  154. </el-form-item>
  155. </el-col>
  156. <el-col :span="6">
  157. <el-form-item label="污染去除率%:" prop="pollutionRemovalRate">
  158. <template #label>
  159. <span>污染去除率%</span>
  160. <popover :width="300">
  161. <span style="font-weight: 700">说明</span>
  162. <br />
  163. <span>污染去除率=设施调蓄量对应年径流总量控制率*各类设施污染去除率*各类设施服务面积/服务面积加和</span>
  164. </popover>
  165. <span>:</span>
  166. </template>
  167. <span class="ellipsis" :title="form.facilityStorageCapacityToAnnualRunoffTotalControlRate">{{ form.pollutionRemovalRate }}</span>
  168. </el-form-item>
  169. </el-col>
  170. <el-col :span="6">
  171. <el-form-item label="污染去除率是否达标:" prop="pollutionRemovalStandards">
  172. <template #label>
  173. <span>污染去除率是否达标</span>
  174. <popover>
  175. <span style="font-weight: 700">说明</span>
  176. <br />
  177. <span>跟目标年径流污染控制率对比,大于等于则达标,反之不达标</span>
  178. </popover>
  179. <span>:</span>
  180. </template>
  181. <el-tag
  182. v-if="standardMap.get(form.pollutionRemovalStandards)?.text"
  183. :type="standardMap.get(form.pollutionRemovalStandards)?.type"
  184. >{{ standardMap.get(form.pollutionRemovalStandards)?.text }}</el-tag>
  185. <span v-else>-</span>
  186. </el-form-item>
  187. </el-col>
  188. <el-col :span="6">
  189. <el-form-item label="年径流污染控制率评级:" prop="pollutionRemovalGrade">
  190. <template #label>
  191. <span>年径流污染控制率评级</span>
  192. <popover :width="240">
  193. <span style="font-weight: 700">说明</span>
  194. <br />
  195. <span>低于目标值,评【差】</span>
  196. <br />
  197. <span>高于目标值5%以内,评【中】</span>
  198. <br />
  199. <span>高于目标值10%以内,评【良】</span>
  200. <br />
  201. <span>高于目标值10%以上,评【优】</span>
  202. <br />
  203. <span>包含下限、不包含上限</span>
  204. </popover>
  205. <span>:</span>
  206. </template>
  207. <el-tag
  208. v-if="levelMap.get(form.pollutionRemovalGrade)?.text"
  209. :type="levelMap.get(form.pollutionRemovalGrade)?.type"
  210. >{{ levelMap.get(form.pollutionRemovalGrade)?.text }}</el-tag>
  211. <span v-else>-</span>
  212. </el-form-item>
  213. </el-col>
  214. </el-row>
  215. <el-row :gutter="20">
  216. <el-col :span="6">
  217. <el-form-item label="处置客水评级:" prop="disposalOfGuestWaterGrade">
  218. <template #label>
  219. <span>处置客水评级</span>
  220. <popover :width="300">
  221. <span style="font-weight: 700">说明</span>
  222. <br />
  223. <span>在达标测算目标调蓄量以上(包含),5%以内(不包含)评【中】</span>
  224. <br />
  225. <span>在达标测算目标调蓄量*5%以上(包含),10%以内(不包含)评【良】</span>
  226. <br />
  227. <span>在达标测算目标调蓄量*10%以上(包含)评【优】</span>
  228. <br />
  229. <span>包含下限、不包含上限</span>
  230. </popover>
  231. <span>:</span>
  232. </template>
  233. <el-tag
  234. v-if="levelMap.get(form.disposalOfGuestWaterGrade)?.text"
  235. :type="levelMap.get(form.disposalOfGuestWaterGrade)?.type"
  236. >{{ levelMap.get(form.disposalOfGuestWaterGrade)?.text }}</el-tag>
  237. <span v-else>-</span>
  238. </el-form-item>
  239. </el-col>
  240. </el-row>
  241. </el-form>
  242. </el-card>
  243. <el-card class="box-card" shadow="never">
  244. <template #header>
  245. <div class="card-header">
  246. <span>投资情况</span>
  247. </div>
  248. </template>
  249. <el-form class="formM0" ref="investForm" :model="form">
  250. <el-row :gutter="20">
  251. <el-col :span="6">
  252. <el-form-item label="投产比/万元/m³:" prop="productionRatio">
  253. <span>{{ form.productionRatio }}</span>
  254. </el-form-item>
  255. </el-col>
  256. <el-col :span="6">
  257. <el-form-item label="投资合理性评级:" prop="investmentRationalityRate">
  258. <template #label>
  259. <span>投资合理性评级</span>
  260. <popover :width="240">
  261. <span style="font-weight: 700">说明</span>
  262. <br />
  263. <span>推荐值上下2.5%以内,评【优】</span>
  264. <br />
  265. <span>推荐值上下5%以内,评【良】</span>
  266. <br />
  267. <span>推荐值上下10%以内,评【中】</span>
  268. <br />
  269. <span>推荐值上下10%以上,评【差】</span>
  270. <br />
  271. <span>包含下限、不包含上限</span>
  272. </popover>
  273. <span>:</span>
  274. </template>
  275. <el-tag
  276. v-if="levelMap.get(form.investmentRationalityRate)?.text"
  277. :type="levelMap.get(form.investmentRationalityRate)?.type"
  278. >{{ levelMap.get(form.investmentRationalityRate)?.text }}</el-tag>
  279. <span v-else>-</span>
  280. </el-form-item>
  281. </el-col>
  282. </el-row>
  283. </el-form>
  284. </el-card>
  285. <el-card class="box-card" shadow="never">
  286. <template #header>
  287. <div class="card-header">
  288. <span>设施分布</span>
  289. </div>
  290. </template>
  291. <new-table :data="tableData" :columns="columns" :loading="loading" :max-height="300" />
  292. </el-card>
  293. </template>
  294.  
  295. <script setup lang="jsx">
  296. import { ref, reactive } from 'vue'
  297. import popover from '@/components/popover'
  298. import {
  299. standardMap,
  300. standardTextMap,
  301. verticalRationalityMap,
  302. levelMap
  303. } from './map'
  304. import { inheritAttr, setEmpty } from '@/utils/v3'
  305. const form = reactive({
  306. id: '',
  307. areaTotal: '',
  308. hardGroundRate: '',
  309. hardGroundGrade: '',
  310. hardGroundStandards: '',
  311. comprehensiveRunoffCoefficient: '',
  312. targetStorageCapacity: '',
  313. facilityStorageCapacity: '',
  314. storageCapacityStandards: '',
  315. facilityStorageCapacityToAnnualRunoffTotalControlRate: '',
  316. pollutionRemovalRate: '',
  317. pollutionRemovalGrade: '',
  318. pollutionRemovalStandards: '',
  319. disposalOfGuestWaterGrade: '',
  320. productionRatio: '',
  321. investmentRationalityRate: '',
  322. totalAnnualRunoffGrade: ''
  323. })
  324. const columns = reactive([
  325. {
  326. prop: 'areaName',
  327. label: '排水分区',
  328. align: 'center',
  329. fixed: 'left'
  330. },
  331. {
  332. prop: 'subsidenceGreenRate',
  333. label: '下沉绿地率%',
  334. width: 120,
  335. align: 'center',
  336. headerRender: () => {
  337. return (
  338. <Fragment>
  339. <span>下沉绿地率%</span>
  340. <popover width={ 240 }>
  341. <span style="font-weight: 700">说明</span>
  342. <br />
  343. <span>下沉绿地+雨水花园占绿地面积</span>
  344. </popover>
  345. </Fragment>
  346. )
  347. },
  348. },
  349. {
  350. prop: 'greenRoofRatio',
  351. label: '绿色屋顶率%',
  352. width: 120,
  353. align: 'center',
  354. headerRender: () => {
  355. return (
  356. <Fragment>
  357. <span>绿色屋顶率%</span>
  358. <popover width={ 240 }>
  359. <span style="font-weight: 700">说明</span>
  360. <br />
  361. <span>绿色屋顶占屋顶面积</span>
  362. </popover>
  363. </Fragment>
  364. )
  365. },
  366. },
  367. {
  368. prop: 'permeablePavementRatio',
  369. label: '透水铺装率%',
  370. width: 120,
  371. align: 'center',
  372. headerRender: () => {
  373. return (
  374. <Fragment>
  375. <span>透水铺装率%</span>
  376. <popover width={ 240 }>
  377. <span style="font-weight: 700">说明</span>
  378. <br />
  379. <span>透水铺装占不透水路面面积</span>
  380. </popover>
  381. </Fragment>
  382. )
  383. },
  384. },
  385. {
  386. prop: 'targetAnnualRunoffTotalControlRate',
  387. label: '目标年径流总量控制率%',
  388. width: 180,
  389. align: 'center'
  390. },
  391. {
  392. prop: 'targetStorageCapacity',
  393. label: '目标调蓄量m³',
  394. width: 120,
  395. align: 'center'
  396. },
  397. {
  398. prop: 'facilityStorageCapacity',
  399. label: '设施调蓄量m³',
  400. width: 120,
  401. align: 'center'
  402. },
  403. {
  404. prop: 'facilityStorageCapacityToAnnualRunoffTotalControlRate',
  405. label: '年径流总量控制率%',
  406. width: 150,
  407. align: 'center'
  408. },
  409. {
  410. prop: 'annualRunoffControlRate',
  411. label: '年径流控制率达标',
  412. width: 150,
  413. align: 'center',
  414. render: ({ row }) => {
  415. return (
  416. standardTextMap.get(row.annualRunoffControlRate) ?
  417. <Fragment>
  418. <el-tag
  419. type={standardTextMap.get(row.annualRunoffControlRate).type}
  420. >{ standardTextMap.get(row.annualRunoffControlRate).text }</el-tag>
  421. </Fragment>
  422. : null
  423. )
  424. }
  425. },
  426. {
  427. prop: 'verticalRationality',
  428. label: '竖向合理性',
  429. width: 120,
  430. align: 'center',
  431. fixed: 'right',
  432. headerRender: () => {
  433. return (
  434. <Fragment>
  435. <span>竖向合理性</span>
  436. <popover width={ 280 }>
  437. <span style="font-weight: 700">说明</span>
  438. <br /><br />
  439. <span style="font-weight: 700">总体</span>
  440. <br />
  441. <span>当存在竖向不合理的分区时,评【存在不合理】</span>
  442. <br />
  443. <span>当分区竖向全部合理时,评【合理】</span>
  444. <br /><br />
  445. <span style="font-weight: 700">分区</span>
  446. <br />
  447. <span>地面高程高于设施底高程,评【合理】</span>
  448. <br />
  449. <span>反之评【不合理】</span>
  450. </popover>
  451. </Fragment>
  452. )
  453. },
  454. render: ({ row }) => {
  455. return (
  456. verticalRationalityMap.get(row.verticalRationality) ?
  457. <Fragment>
  458. <el-tag
  459. type={verticalRationalityMap.get(row.verticalRationality).type}
  460. >{ verticalRationalityMap.get(row.verticalRationality).text }</el-tag>
  461. </Fragment>
  462. : null
  463. )
  464. }
  465. }
  466. ])
  467. const tableData = ref([])
  468. const loading = ref(false)
  469.  
  470. const getDetails = (data) => {
  471. if(data) {
  472. inheritAttr(data, form)
  473. tableData.value = data.intelligentReasonableAnalyseList || []
  474. } else {
  475. setEmpty(form)
  476. tableData.value = []
  477. }
  478. }
  479.  
  480. defineExpose({
  481. getDetails
  482. })
  483. </script>
  484.  
  485. <style lang="scss" scoped>
  486. .box-card {
  487. margin-bottom: 10px;
  488. &:last-of-type {
  489. margin-bottom: 0;
  490. }
  491. .card-header {
  492. font-size: 16px;
  493. font-weight: 700;
  494. }
  495. }
  496.  
  497. </style>