1311 lines
41 KiB
Vue
1311 lines
41 KiB
Vue
<template>
|
||
<a-modal
|
||
v-model:open="visible"
|
||
:title="isAdd ? '新增电站' : '编辑电站'"
|
||
width="80vw"
|
||
:confirm-loading="confirmLoading"
|
||
@ok="handleOk"
|
||
@cancel="handleCancel"
|
||
>
|
||
<a-form
|
||
ref="formRef"
|
||
:model="formData"
|
||
:label-col="{ span: 7 }"
|
||
:wrapper-col="{ span: 16 }"
|
||
:rules="formRules"
|
||
class="max-h-[70vh] overflow-y-auto pr-4"
|
||
>
|
||
<a-row :gutter="16">
|
||
<!-- ===== 概述 ===== -->
|
||
<a-col :span="24"><div class="form-group-title">概述</div></a-col>
|
||
|
||
<a-col :span="12">
|
||
<a-form-item label="电站编码" name="stcd">
|
||
<a-input
|
||
v-model:value="formData.stcd"
|
||
placeholder="请输入电站编码"
|
||
:disabled="!isAdd"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="电站名称" name="ennm">
|
||
<a-input
|
||
v-model:value="formData.ennm"
|
||
placeholder="请输入电站名称"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="基地" name="baseId">
|
||
<a-select
|
||
v-model:value="formData.baseId"
|
||
placeholder="请选择基地"
|
||
allow-clear
|
||
show-search
|
||
:filter-option="filterOption"
|
||
@change="handleBaseIdChange"
|
||
>
|
||
<a-select-option
|
||
v-for="item in baseNameOptions"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
>{{ item.label }}</a-select-option
|
||
>
|
||
</a-select>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="所在位置" name="addvcd">
|
||
<a-select
|
||
v-model:value="formData.addvcd"
|
||
placeholder="请选择所在位置"
|
||
allow-clear
|
||
show-search
|
||
:filter-option="filterOption"
|
||
>
|
||
<a-select-option
|
||
v-for="item in addvcdOptions"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
>{{ item.label }}</a-select-option
|
||
>
|
||
</a-select>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="详细地址" name="stlc">
|
||
<a-input
|
||
v-model:value="formData.stlc"
|
||
placeholder="请输入详细地址"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="所在河段" name="reachcd">
|
||
<a-select
|
||
v-model:value="formData.reachcd"
|
||
placeholder="请选择所在河段"
|
||
allow-clear
|
||
show-search
|
||
:filter-option="filterOption"
|
||
>
|
||
<a-select-option
|
||
v-for="item in hbrvcdNameOptions"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
:title="item.label"
|
||
>{{ item.label }}</a-select-option
|
||
>
|
||
</a-select>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="所属公司" name="hycd">
|
||
<a-select
|
||
v-model:value="formData.hycd"
|
||
placeholder="请选择所属公司"
|
||
allow-clear
|
||
show-search
|
||
:filter-option="filterOption"
|
||
>
|
||
<a-select-option
|
||
v-for="item in hycdList"
|
||
:key="item.hycd"
|
||
:label="item.hynm"
|
||
:value="item.hycd"
|
||
>{{ item.hynm }}</a-select-option
|
||
>
|
||
</a-select>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="所属集团" name="topHycd">
|
||
<a-select
|
||
v-model:value="formData.topHycd"
|
||
placeholder="请选择所属集团"
|
||
allow-clear
|
||
show-search
|
||
:filter-option="filterOption"
|
||
>
|
||
<a-select-option
|
||
v-for="item in topHynmList"
|
||
:key="item.hycd"
|
||
:label="item.hynm"
|
||
:value="item.hycd"
|
||
>{{ item.hynm }}</a-select-option
|
||
>
|
||
</a-select>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="建设状态" name="bldsttCode">
|
||
<a-select
|
||
v-model:value="formData.bldsttCode"
|
||
placeholder="请选择建设状态"
|
||
allow-clear
|
||
>
|
||
<a-select-option
|
||
v-for="item in bldsttCodeOptions"
|
||
:key="item.value"
|
||
:value="item.value"
|
||
>{{ item.label }}</a-select-option
|
||
>
|
||
</a-select>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="建设时间" name="jcdt">
|
||
<a-date-picker
|
||
v-model:value="formData.jcdt"
|
||
format="YYYY-MM-DD"
|
||
value-format="YYYY-MM-DD HH:mm:ss"
|
||
placeholder="请选择建设时间"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="第一台机组投产时间" name="piodt">
|
||
<a-date-picker
|
||
v-model:value="formData.piodt"
|
||
format="YYYY-MM-DD"
|
||
value-format="YYYY-MM-DD HH:mm:ss"
|
||
placeholder="请选择第一台机组投产时间"
|
||
style="width: 100%"
|
||
:disabled-date="disabledPiodtDate"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="全部机组投产时间" name="aiodt">
|
||
<a-date-picker
|
||
v-model:value="formData.aiodt"
|
||
format="YYYY-MM-DD"
|
||
value-format="YYYY-MM-DD HH:mm:ss"
|
||
placeholder="请选择全部机组投产时间"
|
||
style="width: 100%"
|
||
:disabled-date="disabledAiodtDate"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
|
||
<!-- ===== 水文 ===== -->
|
||
<a-col :span="24"><div class="form-group-title">水文</div></a-col>
|
||
|
||
<a-col :span="12">
|
||
<a-form-item label="坝址以上流域面积(km²)" name="nrupar">
|
||
<a-input-number
|
||
v-model:value="formData.nrupar"
|
||
placeholder="请输入"
|
||
:precision="2"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="距河源距离(km)" name="dstcrvr">
|
||
<a-input-number
|
||
v-model:value="formData.dstcrvr"
|
||
placeholder="请输入"
|
||
:precision="2"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="多年平均降雨量(mm)" name="avyrp">
|
||
<a-input-number
|
||
v-model:value="formData.avyrp"
|
||
placeholder="请输入"
|
||
:precision="2"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="多年平均年径流量(亿m³)" name="avw">
|
||
<a-input-number
|
||
v-model:value="formData.avw"
|
||
placeholder="请输入"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="多年平均流量(m³/s)" name="avq">
|
||
<a-input-number
|
||
v-model:value="formData.avq"
|
||
placeholder="请输入"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="1月多年平均流量(m³/s)" name="avq01">
|
||
<a-input-number
|
||
v-model:value="formData.avq01"
|
||
placeholder="请输入"
|
||
:precision="0"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="2月多年平均流量(m³/s)" name="avq02">
|
||
<a-input-number
|
||
v-model:value="formData.avq02"
|
||
placeholder="请输入"
|
||
:precision="0"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="3月多年平均流量(m³/s)" name="avq03">
|
||
<a-input-number
|
||
v-model:value="formData.avq03"
|
||
placeholder="请输入"
|
||
:precision="0"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="4月多年平均流量(m³/s)" name="avq04">
|
||
<a-input-number
|
||
v-model:value="formData.avq04"
|
||
placeholder="请输入"
|
||
:precision="0"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="5月多年平均流量(m³/s)" name="avq05">
|
||
<a-input-number
|
||
v-model:value="formData.avq05"
|
||
placeholder="请输入"
|
||
:precision="0"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="6月多年平均流量(m³/s)" name="avq06">
|
||
<a-input-number
|
||
v-model:value="formData.avq06"
|
||
placeholder="请输入"
|
||
:precision="0"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="7月多年平均流量(m³/s)" name="avq07">
|
||
<a-input-number
|
||
v-model:value="formData.avq07"
|
||
placeholder="请输入"
|
||
:precision="0"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="8月多年平均流量(m³/s)" name="avq08">
|
||
<a-input-number
|
||
v-model:value="formData.avq08"
|
||
placeholder="请输入"
|
||
:precision="0"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="9月多年平均流量(m³/s)" name="avq09">
|
||
<a-input-number
|
||
v-model:value="formData.avq09"
|
||
placeholder="请输入"
|
||
:precision="0"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="10月多年平均流量(m³/s)" name="avq10">
|
||
<a-input-number
|
||
v-model:value="formData.avq10"
|
||
placeholder="请输入"
|
||
:precision="0"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="11月多年平均流量(m³/s)" name="avq11">
|
||
<a-input-number
|
||
v-model:value="formData.avq11"
|
||
placeholder="请输入"
|
||
:precision="0"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="12月多年平均流量(m³/s)" name="avq12">
|
||
<a-input-number
|
||
v-model:value="formData.avq12"
|
||
placeholder="请输入"
|
||
:precision="0"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="实测最大流量(m³/s)" name="obmxq">
|
||
<a-input-number
|
||
v-model:value="formData.obmxq"
|
||
placeholder="请输入"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="实测最小流量(m³/s)" name="obmnq">
|
||
<a-input-number
|
||
v-model:value="formData.obmnq"
|
||
placeholder="请输入"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="调查历史最大流量(m³/s)" name="hmxq">
|
||
<a-input-number
|
||
v-model:value="formData.hmxq"
|
||
placeholder="请输入"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="设计入库洪水流量(m³/s)" name="dsnfqfrq">
|
||
<a-input-number
|
||
v-model:value="formData.dsnfqfrq"
|
||
placeholder="请输入"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="设计洪水重现期(年)" name="dsrcin">
|
||
<a-input v-model:value="formData.dsrcin" placeholder="请输入" />
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="校核入库洪水流量(m³/s)" name="ckfqfqr">
|
||
<a-input-number
|
||
v-model:value="formData.ckfqfqr"
|
||
placeholder="请输入"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="校核洪水重现期(年)" name="chrcin">
|
||
<a-input v-model:value="formData.chrcin" placeholder="请输入" />
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="实测最大洪量（三天）(亿m³)" name="obmxw3">
|
||
<a-input-number
|
||
v-model:value="formData.obmxw3"
|
||
placeholder="请输入"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="设计洪量（三天）(亿m³)" name="dsw3">
|
||
<a-input-number
|
||
v-model:value="formData.dsw3"
|
||
placeholder="请输入"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="校核洪量（三天）(亿m³)" name="ckw3">
|
||
<a-input-number
|
||
v-model:value="formData.ckw3"
|
||
placeholder="请输入"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="多年平均输沙量(万t)" name="avsd">
|
||
<a-input-number
|
||
v-model:value="formData.avsd"
|
||
placeholder="请输入"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="多年平均含沙量(kg/m³)" name="avs">
|
||
<a-input-number
|
||
v-model:value="formData.avs"
|
||
placeholder="请输入"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="实测最大含沙量(kg/m³)" name="obmxs">
|
||
<a-input-number
|
||
v-model:value="formData.obmxs"
|
||
placeholder="请输入"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
|
||
<!-- ===== 水库 ===== -->
|
||
<a-col :span="24"><div class="form-group-title">水库</div></a-col>
|
||
|
||
<a-col :span="12">
|
||
<a-form-item label="校核洪水位(m)" name="ckflz">
|
||
<a-input-number
|
||
v-model:value="formData.ckflz"
|
||
placeholder="请输入"
|
||
:precision="2"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="设计洪水位(m)" name="dsflz">
|
||
<a-input-number
|
||
v-model:value="formData.dsflz"
|
||
placeholder="请输入"
|
||
:precision="2"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="正常蓄水位(m)" name="normz">
|
||
<a-input-number
|
||
v-model:value="formData.normz"
|
||
placeholder="请输入"
|
||
:precision="2"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="防洪高水位(m)" name="uzfc">
|
||
<a-input-number
|
||
v-model:value="formData.uzfc"
|
||
placeholder="请输入"
|
||
:precision="2"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="防洪限制水位(m)" name="fsltdz">
|
||
<a-input-number
|
||
v-model:value="formData.fsltdz"
|
||
placeholder="请输入"
|
||
:precision="2"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="年消落水位(m)" name="ydownz">
|
||
<a-input-number
|
||
v-model:value="formData.ydownz"
|
||
placeholder="请输入"
|
||
:precision="2"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="死水位(m)" name="ddz">
|
||
<a-input-number
|
||
v-model:value="formData.ddz"
|
||
placeholder="请输入"
|
||
:precision="2"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="正常蓄水位水库面积(km²)" name="nrzar">
|
||
<a-input-number
|
||
v-model:value="formData.nrzar"
|
||
placeholder="请输入"
|
||
:precision="2"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="回水长度(km)" name="bcklen">
|
||
<a-input-number
|
||
v-model:value="formData.bcklen"
|
||
placeholder="请输入"
|
||
:precision="2"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="总库容(亿m³)" name="ttcp">
|
||
<a-input-number
|
||
v-model:value="formData.ttcp"
|
||
placeholder="请输入"
|
||
:precision="2"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="正常蓄水位以下库容(亿m³)" name="nmzcp">
|
||
<a-input-number
|
||
v-model:value="formData.nmzcp"
|
||
placeholder="请输入"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="防洪库容(亿m³)" name="fldcp">
|
||
<a-input-number
|
||
v-model:value="formData.fldcp"
|
||
placeholder="请输入"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="调节库容(亿m³)" name="actcp">
|
||
<a-input-number
|
||
v-model:value="formData.actcp"
|
||
placeholder="请输入"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="死库容(亿m³)" name="ddcp">
|
||
<a-input-number
|
||
v-model:value="formData.ddcp"
|
||
placeholder="请输入"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="库容系数(%)" name="cpsc">
|
||
<a-input-number
|
||
v-model:value="formData.cpsc"
|
||
placeholder="请输入"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="调节性能" name="rgcp">
|
||
<a-select
|
||
v-model:value="formData.rgcp"
|
||
placeholder="请选择调节性能"
|
||
allow-clear
|
||
>
|
||
<a-select-option
|
||
v-for="item in rgcpNameOptions"
|
||
:key="item.value"
|
||
:value="item.value"
|
||
>{{ item.label }}</a-select-option
|
||
>
|
||
</a-select>
|
||
</a-form-item>
|
||
</a-col>
|
||
|
||
<!-- ===== 下泄流量及相应下游水位 ===== -->
|
||
<a-col :span="24"
|
||
><div class="form-group-title">下泄流量及相应下游水位</div></a-col
|
||
>
|
||
|
||
<a-col :span="12">
|
||
<a-form-item label="设计洪水位时最大下泄流量(m³/s)" name="dsflzmxq">
|
||
<a-input-number
|
||
v-model:value="formData.dsflzmxq"
|
||
placeholder="请输入"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item
|
||
label="设计洪水位时最大下泄流量相应下游水位(m)"
|
||
:labelCol="{ span: 9.5 }"
|
||
name="dsflzxyz"
|
||
>
|
||
<a-input-number
|
||
v-model:value="formData.dsflzxyz"
|
||
placeholder="请输入"
|
||
style="width: 93%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="校核洪水位时最大下泄流量(m³/s)" name="ckflzmxq">
|
||
<a-input-number
|
||
v-model:value="formData.ckflzmxq"
|
||
placeholder="请输入"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item
|
||
label="校核洪水位时最大下泄流量相应下游水位(m)"
|
||
name="ckflzxyz"
|
||
:labelCol="{ span: 9.5 }"
|
||
>
|
||
<a-input-number
|
||
v-model:value="formData.ckflzxyz"
|
||
placeholder="请输入"
|
||
style="width: 93%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="枯水期调节流量(m³/s)" name="ksqadjq">
|
||
<a-input-number
|
||
v-model:value="formData.ksqadjq"
|
||
placeholder="请输入"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="枯水期调节流量相应下游水位(m)" name="ksqxyz">
|
||
<a-input-number
|
||
v-model:value="formData.ksqxyz"
|
||
placeholder="请输入"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="发电最大引用流量(m³/s)" name="gemaxrq">
|
||
<a-input-number
|
||
v-model:value="formData.gemaxrq"
|
||
placeholder="请输入"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item
|
||
label="发电最大引用流量相应下游水位(m)"
|
||
:labelCol="{ span: 9.5 }"
|
||
name="mxgeqxyz"
|
||
>
|
||
<a-input-number
|
||
v-model:value="formData.mxgeqxyz"
|
||
placeholder="请输入"
|
||
style="width: 96%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
|
||
<!-- ===== 工程效益指标 ===== -->
|
||
<a-col :span="24"
|
||
><div class="form-group-title">工程效益指标</div></a-col
|
||
>
|
||
|
||
<a-col :span="12">
|
||
<a-form-item label="装机容量(万kW)" name="ttpwr">
|
||
<a-input-number
|
||
v-model:value="formData.ttpwr"
|
||
placeholder="请输入"
|
||
:precision="2"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="装机台数(台)" name="gncnt">
|
||
<a-input-number
|
||
v-model:value="formData.gncnt"
|
||
placeholder="请输入"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="容量构成(台*MW)" name="gntp">
|
||
<a-input v-model:value="formData.gntp" placeholder="请输入" />
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="保证出力(MW)" name="grntpwr">
|
||
<a-input-number
|
||
v-model:value="formData.grntpwr"
|
||
placeholder="请输入"
|
||
:precision="2"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="多年平均年发电量(亿kW·h)" name="yrge">
|
||
<a-input-number
|
||
v-model:value="formData.yrge"
|
||
placeholder="请输入"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="年利用小时数(h)" name="ushr">
|
||
<a-input-number
|
||
v-model:value="formData.ushr"
|
||
placeholder="请输入"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="机组综合出力系数" name="k">
|
||
<a-input-number
|
||
v-model:value="formData.k"
|
||
placeholder="请输入"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
|
||
<!-- ===== 大坝 ===== -->
|
||
<a-col :span="24"><div class="form-group-title">大坝</div></a-col>
|
||
|
||
<a-col :span="12">
|
||
<a-form-item label="坝型" name="dmtp">
|
||
<a-input
|
||
v-model:value="formData.dmtp"
|
||
placeholder="请输入"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="坝顶高程(m)" name="dmcrel">
|
||
<a-input-number
|
||
v-model:value="formData.dmcrel"
|
||
placeholder="请输入"
|
||
:precision="2"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="最大坝高(m)" name="mxdmhg">
|
||
<a-input-number
|
||
v-model:value="formData.mxdmhg"
|
||
placeholder="请输入"
|
||
:precision="2"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="坝顶长度(m)" name="dmlen">
|
||
<a-input-number
|
||
v-model:value="formData.dmlen"
|
||
placeholder="请输入"
|
||
:precision="2"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
|
||
<!-- ===== 其他 ===== -->
|
||
<a-col :span="24"><div class="form-group-title">其他</div></a-col>
|
||
|
||
<a-col :span="12">
|
||
<a-form-item label="单独年发电量(亿kW·h)" name="sgyge">
|
||
<a-input-number
|
||
v-model:value="formData.sgyge"
|
||
placeholder="请输入"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="联合年发电量(亿kW·h)" name="unyge">
|
||
<a-input-number
|
||
v-model:value="formData.unyge"
|
||
placeholder="请输入"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="利用落差(m)" name="gap">
|
||
<a-input-number
|
||
v-model:value="formData.gap"
|
||
placeholder="请输入"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="开发方式" name="dvtp">
|
||
<a-select
|
||
v-model:value="formData.dvtp"
|
||
placeholder="请选择开发方式"
|
||
allow-clear
|
||
>
|
||
<a-select-option
|
||
v-for="item in dvtpList"
|
||
:key="item.value"
|
||
:value="item.value"
|
||
>{{ item.label }}</a-select-option
|
||
>
|
||
</a-select>
|
||
</a-form-item>
|
||
</a-col>
|
||
</a-row>
|
||
</a-form>
|
||
</a-modal>
|
||
|
||
<ConfirmModal
|
||
v-model:open="confirmModalVisible"
|
||
:diff-list="diffList"
|
||
:confirm-loading="confirmLoading"
|
||
@confirm="handleConfirmSubmit"
|
||
@cancel="handleConfirmCancel"
|
||
/>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, computed, watch } from 'vue';
|
||
import dayjs from 'dayjs';
|
||
import { message } from 'ant-design-vue';
|
||
import { addPowerInfo, updatePowerInfo } from '@/api/DataQueryMenuModule';
|
||
import { BasicColumns } from '@/components/MapModal/column.config';
|
||
import { getRvcdDropdown, getAddvcdDropdown } from '@/api/select';
|
||
import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
|
||
import ConfirmModal from '@/components/ConfirmModal/index.vue';
|
||
import { useDraggable } from '@/utils/drag';
|
||
|
||
const props = defineProps<{
|
||
open: boolean;
|
||
record?: any;
|
||
isAdd?: boolean;
|
||
topHynmList?: any[];
|
||
hycdList?: any[];
|
||
dvtpList?: any[];
|
||
}>();
|
||
|
||
const emit = defineEmits(['update:open', 'success']);
|
||
const jidiSelectEventStore = useJidiSelectEventStore();
|
||
|
||
const visible = computed({
|
||
get: () => props.open,
|
||
set: val => emit('update:open', val)
|
||
});
|
||
useDraggable(visible, { boundary: true, resetOnOpen: true });
|
||
watch(
|
||
() => props.open,
|
||
val => {
|
||
if (val) {
|
||
initRvcdDropdown();
|
||
initAddvcdDropdown();
|
||
}
|
||
}
|
||
);
|
||
|
||
const formRef = ref();
|
||
const confirmLoading = ref(false);
|
||
const formData = ref<any>({});
|
||
const originalRecord = ref<any>({});
|
||
const originalLabels = ref<Record<string, string>>({});
|
||
const formRules = computed(() => ({
|
||
stcd: props.isAdd
|
||
? [{ required: true, message: '请输入电站编码', trigger: 'blur' }]
|
||
: [],
|
||
ennm: [{ required: true, message: '请输入电站名称', trigger: 'blur' }],
|
||
baseId: [{ required: true, message: '请选择基地', trigger: 'change' }],
|
||
reachcd: [{ required: true, message: '请选择所在河段', trigger: 'change' }]
|
||
}));
|
||
|
||
// 第一台机组投产时间须早于全部机组投产时间：双向通过 disabled-date 禁用不合理日期
|
||
const disabledPiodtDate = (current: any) => {
|
||
const aiodt = formData.value?.aiodt;
|
||
if (!aiodt) return false;
|
||
return current && current.endOf('day') > dayjs(aiodt);
|
||
};
|
||
const disabledAiodtDate = (current: any) => {
|
||
const piodt = formData.value?.piodt;
|
||
if (!piodt) return false;
|
||
return current && current.endOf('day') < dayjs(piodt);
|
||
};
|
||
|
||
// 确认弹框状态
|
||
const confirmModalVisible = ref(false);
|
||
|
||
// 字段名 → 中文名映射
|
||
const fieldLabelMap: Record<string, string> = {};
|
||
BasicColumns.forEach(col => {
|
||
if (col.filed && col.name && col.visible) {
|
||
fieldLabelMap[col.filed] = col.name;
|
||
}
|
||
});
|
||
// 表单字段名与 BasicColumns 字段名不一致时的手动映射
|
||
const fieldLabelOverrides: Record<string, string> = {
|
||
ennm: '电站名称',
|
||
baseId: '基地',
|
||
reachcd: '所在河段',
|
||
bldsttCode: '建设状态',
|
||
rgcp: '调节性能',
|
||
dmtp: '坝型',
|
||
addvcd: '所在位置',
|
||
hycd: '所属公司',
|
||
topHycd: '所属集团'
|
||
};
|
||
Object.assign(fieldLabelMap, fieldLabelOverrides);
|
||
|
||
// select 选项映射（用于在 diff 中显示中文名）
|
||
const selectOptionsMap: Record<string, () => any[]> = {
|
||
baseId: () => baseNameOptions.value,
|
||
reachcd: () => hbrvcdNameOptions.value,
|
||
addvcd: () => addvcdOptions.value,
|
||
bldsttCode: () => bldsttCodeOptions.value,
|
||
rgcp: () => rgcpNameOptions.value,
|
||
dvtp: () => props.dvtpList || [],
|
||
hycd: () =>
|
||
(props.hycdList || []).map(item => ({
|
||
value: item.hycd,
|
||
label: item.hynm
|
||
})),
|
||
topHycd: () =>
|
||
(props.topHynmList || []).map(item => ({
|
||
value: item.hycd,
|
||
label: item.hynm
|
||
}))
|
||
};
|
||
|
||
const resolveSelectLabel = (field: string, value: any): string => {
|
||
if (value === null || value === undefined || value === '') return '空';
|
||
const getOptions = selectOptionsMap[field];
|
||
if (getOptions) {
|
||
const opt = getOptions().find(
|
||
(o: any) => String(o.value) === String(value)
|
||
);
|
||
if (opt) return opt.label;
|
||
}
|
||
return String(value);
|
||
};
|
||
|
||
// select 字段 → 提交时附带的 label 字段名
|
||
const selectLabelFieldMap: Record<string, string> = {
|
||
baseId: 'baseName',
|
||
addvcd: 'addvcdName',
|
||
reachcd: 'reachcdName',
|
||
hycd: 'hynm',
|
||
topHycd: 'topHynm'
|
||
};
|
||
|
||
// 根据 select 字段的 code 值解析出 label，用于提交时附带
|
||
const resolveLabelForSubmit = (field: string, value: any): string | null => {
|
||
if (value === null || value === undefined || value === '') return null;
|
||
// 标准 { value, label } 格式的选项
|
||
const getOptions = selectOptionsMap[field];
|
||
if (getOptions) {
|
||
const opt = getOptions().find(
|
||
(o: any) => String(o.value) === String(value)
|
||
);
|
||
if (opt) return opt.label;
|
||
}
|
||
// hycd / topHycd 使用 { hycd, hynm } 格式
|
||
if (field === 'hycd' && props.hycdList) {
|
||
const opt = props.hycdList.find(
|
||
(o: any) => String(o.hycd) === String(value)
|
||
);
|
||
if (opt) return opt.hynm;
|
||
}
|
||
if (field === 'topHycd' && props.topHynmList) {
|
||
const opt = props.topHynmList.find(
|
||
(o: any) => String(o.hycd) === String(value)
|
||
);
|
||
if (opt) return opt.hynm;
|
||
}
|
||
return null;
|
||
};
|
||
|
||
// 按修改顺序记录变更
|
||
const changeOrder = ref<
|
||
{ field: string; label: string; oldValue: string; newValue: string }[]
|
||
>([]);
|
||
const diffList = changeOrder;
|
||
|
||
// ===== select 选项数据（接口后续补充） =====
|
||
const bldsttCodeOptions = ref<any[]>([
|
||
{ label: '未建', value: 0 },
|
||
{ label: '在建', value: 1 },
|
||
{ label: '已建', value: 2 }
|
||
]); // TODO: 建设状态接口
|
||
|
||
const baseNameOptions = computed(() =>
|
||
jidiSelectEventStore.jidiData
|
||
.filter(item => item.wbsCode !== 'all') // 过滤掉"当前全部"
|
||
.map(item => ({
|
||
label: item.wbsName,
|
||
value: item.wbsCode
|
||
}))
|
||
); // TODO: 基地接口
|
||
const addvcdOptions = ref<any[]>([]); // TODO: 所在位置接口
|
||
const hbrvcdNameOptions = ref<any[]>([]); // TODO: 所在河段接口
|
||
const rgcpNameOptions = ref<any[]>([
|
||
{ label: '多年调节', value: '1' },
|
||
{ label: '年调节', value: '2' },
|
||
{ label: '不完全年调节', value: '3' },
|
||
{ label: '径流式（无调节）', value: '4' },
|
||
{ label: '季调节', value: '5' },
|
||
{ label: '月调节', value: '6' },
|
||
{ label: '周调节', value: '7' },
|
||
{ label: '日调节', value: '8' },
|
||
{ label: '其他', value: '9' }
|
||
]); // TODO: 调节性能接口
|
||
|
||
const filterOption = (inputValue: string, option: any) => {
|
||
const label = option.label || option.value;
|
||
const keyword = inputValue || '';
|
||
return label.includes(keyword);
|
||
};
|
||
|
||
// 将值中的"-"转换为null
|
||
const convertDashToNull = (obj: any) => {
|
||
const result: any = {};
|
||
for (const key in obj) {
|
||
if (obj[key] === '-' || obj[key] === '') {
|
||
result[key] = null;
|
||
} else {
|
||
result[key] = obj[key];
|
||
}
|
||
}
|
||
return result;
|
||
};
|
||
|
||
// 监听 formData 变化，按顺序记录修改
|
||
watch(
|
||
() => formData.value,
|
||
newData => {
|
||
const original = originalRecord.value;
|
||
for (const key in newData) {
|
||
const oldVal = original[key];
|
||
const newVal = newData[key];
|
||
if (oldVal !== newVal) {
|
||
const existingIdx = changeOrder.value.findIndex(c => c.field === key);
|
||
const oldNorm =
|
||
oldVal === null || oldVal === undefined || oldVal === '-'
|
||
? null
|
||
: oldVal;
|
||
const newNorm = newVal === null || newVal === undefined ? null : newVal;
|
||
if (oldNorm === newNorm) continue;
|
||
if (
|
||
oldNorm !== null &&
|
||
newNorm !== null &&
|
||
!isNaN(Number(oldNorm)) &&
|
||
!isNaN(Number(newNorm)) &&
|
||
Number(oldNorm) === Number(newNorm)
|
||
)
|
||
continue;
|
||
const isSelect = !!selectOptionsMap[key];
|
||
const oldDisplay = isSelect
|
||
? originalLabels.value[key] ?? resolveSelectLabel(key, oldNorm)
|
||
: oldNorm === null
|
||
? '空'
|
||
: String(oldNorm);
|
||
const newDisplay = isSelect
|
||
? resolveSelectLabel(key, newNorm)
|
||
: newNorm === null
|
||
? '空'
|
||
: String(newNorm);
|
||
const entry = {
|
||
field: key,
|
||
label: fieldLabelMap[key] || key,
|
||
oldValue: oldDisplay,
|
||
newValue: newDisplay
|
||
};
|
||
if (existingIdx >= 0) {
|
||
changeOrder.value[existingIdx] = entry;
|
||
} else {
|
||
changeOrder.value.push(entry);
|
||
}
|
||
} else {
|
||
changeOrder.value = changeOrder.value.filter(c => c.field !== key);
|
||
}
|
||
}
|
||
},
|
||
{ deep: true }
|
||
);
|
||
|
||
// 监听 record 变化，填充表单
|
||
watch(
|
||
() => props.record,
|
||
newRecord => {
|
||
if (newRecord) {
|
||
const converted = convertDashToNull({ ...newRecord });
|
||
originalRecord.value = { ...converted };
|
||
formData.value = { ...converted };
|
||
changeOrder.value = [];
|
||
// 提前解析 select 字段的原始显示名，防止联动刷新选项后丢失 label
|
||
const labels: Record<string, string> = {};
|
||
for (const key in converted) {
|
||
if (selectOptionsMap[key]) {
|
||
labels[key] = resolveSelectLabel(key, converted[key]);
|
||
}
|
||
}
|
||
originalLabels.value = labels;
|
||
}
|
||
},
|
||
{ deep: true }
|
||
);
|
||
const initRvcdDropdown = (value: any) => {
|
||
getRvcdDropdown({ rvcd: value }).then(res => {
|
||
hbrvcdNameOptions.value = res.data.map(item => ({
|
||
label: item.rvnm,
|
||
value: item.rvcd
|
||
}));
|
||
});
|
||
};
|
||
const initAddvcdDropdown = () => {
|
||
getAddvcdDropdown({ grd: 1 }).then(res => {
|
||
addvcdOptions.value = res.data.map(item => ({
|
||
label: item.addvnm,
|
||
value: item.addvcd
|
||
}));
|
||
});
|
||
};
|
||
const handleBaseIdChange = (value: any) => {
|
||
// initRvcdDropdown(value);
|
||
};
|
||
handleBaseIdChange;
|
||
const handleOk = async () => {
|
||
try {
|
||
await formRef.value?.validateFields();
|
||
|
||
if (!props.isAdd && changeOrder.value.length === 0) {
|
||
message.info('未检测到任何修改');
|
||
return;
|
||
}
|
||
|
||
// 显示确认弹框
|
||
confirmModalVisible.value = true;
|
||
} catch (error) {
|
||
console.error('验证失败:', error);
|
||
}
|
||
};
|
||
|
||
const handleConfirmSubmit = async (source: string) => {
|
||
confirmLoading.value = true;
|
||
try {
|
||
let res: any;
|
||
// 将 select 字段的 label 名拼入 engInfo
|
||
const appendSelectLabels = (
|
||
engInfo: Record<string, any>,
|
||
fields: string[]
|
||
) => {
|
||
for (const field of fields) {
|
||
const labelField = selectLabelFieldMap[field];
|
||
if (labelField) {
|
||
const label = resolveLabelForSubmit(field, formData.value[field]);
|
||
if (label !== null) {
|
||
engInfo[labelField] = label;
|
||
}
|
||
}
|
||
}
|
||
};
|
||
|
||
if (props.isAdd) {
|
||
// 新增时提交所有字段
|
||
const engInfo: Record<string, any> = {};
|
||
Object.assign(engInfo, formData.value);
|
||
appendSelectLabels(engInfo, Object.keys(formData.value));
|
||
res = await addPowerInfo({
|
||
engInfo,
|
||
source: source.trim() || '新增'
|
||
});
|
||
} else {
|
||
// 编辑时只传修改过的字段 + stcd
|
||
const engInfo: Record<string, any> = {
|
||
stcd: formData.value.stcd
|
||
};
|
||
changeOrder.value.forEach(item => {
|
||
// select 清空后值为 undefined/null，统一转为空字符串，避免序列化时字段被省略
|
||
let val = formData.value[item.field];
|
||
if (val === null || val === undefined) {
|
||
val = '';
|
||
}
|
||
engInfo[item.field] = val;
|
||
});
|
||
appendSelectLabels(
|
||
engInfo,
|
||
changeOrder.value.map(c => c.field)
|
||
);
|
||
res = await updatePowerInfo({
|
||
engInfo,
|
||
source: source.trim()
|
||
});
|
||
}
|
||
if (res?.code == 0 || res?.success) {
|
||
message.success(props.isAdd ? '新增成功' : '编辑成功');
|
||
confirmModalVisible.value = false;
|
||
visible.value = false;
|
||
emit('success');
|
||
} else {
|
||
message.error(res?.msg || (props.isAdd ? '新增失败' : '编辑失败'));
|
||
}
|
||
} catch (error) {
|
||
console.error('提交失败:', error);
|
||
} finally {
|
||
confirmLoading.value = false;
|
||
}
|
||
};
|
||
|
||
const handleConfirmCancel = () => {
|
||
confirmModalVisible.value = false;
|
||
};
|
||
|
||
const handleCancel = () => {
|
||
visible.value = false;
|
||
confirmModalVisible.value = false;
|
||
formRef.value?.resetFields();
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.form-group-title {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: #333;
|
||
padding: 12px 0;
|
||
border-bottom: 1px solid #e8e8e8;
|
||
margin-bottom: 16px;
|
||
}
|
||
</style>
|