admin-sjzx/src/views/pqs/runManage/assessment/components/uese/form.vue

<template>
    <div class="default-main">
        <div class="actionButtons">
            <el-button type="primary" icon="el-icon-Check" class="md8" @click="onsubmit">保存</el-button>
            <back-component style="margin: 8px" />
        </div>
        <div :style="pageHeight" style="overflow-y: auto">
            <el-collapse v-model="activeNames" class="pl10 pr10">
                <el-collapse-item title="用户参数维护" :name="1">
                    <el-form
                        ref="form1"
                        :inline="true"
                        :model="form"
                        class="form-four"
                        :rules="rules"
                        label-width="auto"
                    >
                        <el-form-item label="所在地市" prop="deptId">
                            <!-- <el-select v-model="form.deptId" clearable placeholder="请选择所在地市">
                                <el-option
                                    v-for="item in areaOptionList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                ></el-option>
                            </el-select> -->
                            <Area ref="areaRef" v-model="form.deptId" style="width: 100%" @changeValue="changeArea" />
                        </el-form-item>
                        <el-form-item label="用户名称" prop="assessName">
                            <el-input v-model="form.assessName" placeholder="用户名称" clearable />
                        </el-form-item>
                        <el-form-item label="电压等级" prop="userScale">
                            <el-select v-model="form.userScale" clearable placeholder="请选择变电站">
                                <el-option
                                    v-for="item in voltageleveloption"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="用户协议容量(MVA)" prop="agreedCapacity">
                            <el-input-number
                                style="width: 100%"
                                v-model.trim="form.agreedCapacity"
                                show-word-limit
                                placeholder="请输入值"
                            ></el-input-number>
                        </el-form-item>
                        <el-form-item label="是否包含电容器" prop="withCapacitor">
                            <el-select v-model="form.withCapacitor" placeholder="请选择是否包含电容器" clearable>
                                <el-option label="是" value="01" />
                                <el-option label="否" value="00" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="用户负荷类型" prop="isWindfarm">
                            <el-select v-model="form.isWindfarm" clearable placeholder="请选择用户负荷类型">
                                <el-option label="风电场" value="01"></el-option>
                                <el-option label="光伏" value="02"></el-option>
                                <el-option label="其他" value="03"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="用户有功功率(MW)" prop="windfarmCapacity">
                            <el-input-number
                                style="width: 100%"
                                v-model="form.windfarmCapacity"
                                show-word-limit
                                placeholder="请输入值"
                            ></el-input-number>
                        </el-form-item>
                        <el-form-item label="是否单相负荷" prop="singleLoad">
                            <el-select v-model="form.singleLoad" clearable placeholder="请选择是否单相负荷">
                                <el-option label="是" value="00"></el-option>
                                <el-option label="否" value="01"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </el-collapse-item>
                <el-collapse-item title="系统参数维护" :name="2">
                    <el-form
                        :inline="true"
                        ref="form2"
                        :model="form"
                        class="form-four"
                        :rules="rules"
                        label-width="auto"
                    >
                        <el-form-item label="接入变电站" prop="powerstationId">
                            <el-select
                                v-model="form.powerstationId"
                                filterable
                                clearable
                                @change="changePowerstation"
                                placeholder="请选择接入变电站"
                            >
                                <el-option
                                    v-for="item in powerstationList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="变电站电压等级" prop="powerstationScale">
                            <el-select v-model="form.powerstationScale" disabled clearable placeholder="请选择变电站">
                                <el-option
                                    v-for="item in voltageleveloption"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="接入母线" prop="busId">
                            <el-select v-model="form.busId" clearable @change="changeBus" placeholder="请选择母线">
                                <el-option
                                    v-for="item in busList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="母线电压等级" prop="busScale">
                            <el-select v-model="form.busScale" disabled clearable placeholder="请选择母线">
                                <el-option
                                    v-for="item in voltageleveloption"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                ></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="供电设备容量(MVW)" prop="powersupplyCapacity">
                            <el-input-number
                                style="width: 100%"
                                v-model.trim="form.powersupplyCapacity"
                                show-word-limit
                                placeholder="请输入值"
                            ></el-input-number>
                        </el-form-item>
                        <el-form-item label="最小短路容量(MVA)" prop="minshortcircuitCapacity">
                            <el-input-number
                                style="width: 100%"
                                v-model.trim="form.minshortcircuitCapacity"
                                show-word-limit
                                placeholder="请输入值"
                            ></el-input-number>
                        </el-form-item>
                        <el-form-item label="PCC点名称" prop="lineId">
                            <el-select v-model="form.lineId" clearable @change="LineChange" placeholder="请选择PCC点">
                                <el-option
                                    v-for="item in pccList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                ></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="导线类型" prop="linetypeId">
                            <el-select v-model="form.linetypeId" clearable placeholder="请选择变电站">
                                <el-option
                                    v-for="item in linetypeList"
                                    :key="item.linetypeId"
                                    :label="item.linetypeName"
                                    :value="item.linetypeId"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="长度(km)" prop="lineLen">
                            <el-input-number
                                style="width: 100%"
                                v-model.trim="form.lineLen"
                                show-word-limit
                                placeholder="请输入值"
                            ></el-input-number>
                        </el-form-item>
                        <el-form-item label="回路数" prop="lineNum">
                            <el-input-number
                                style="width: 100%"
                                v-model.trim="form.lineNum"
                                show-word-limit
                                placeholder="请输入值"
                            ></el-input-number>
                        </el-form-item>
                        <el-form-item label="PCC点电网电阻" prop="lineGridreactance">
                            <el-input-number
                                style="width: 100%"
                                v-model.trim="form.lineGridreactance"
                                show-word-limit
                                placeholder="请输入值"
                            ></el-input-number>
                        </el-form-item>
                        <el-form-item label="PCC电电网电抗" prop="lineGridresistance">
                            <el-input-number
                                style="width: 100%"
                                v-model.trim="form.lineGridresistance"
                                show-word-limit
                                placeholder="请输入值"
                            ></el-input-number>
                        </el-form-item>
                    </el-form>
                </el-collapse-item>
                <div v-if="form.assessId">
                    <tabFrom :assessId="form.assessId" />
                </div>
            </el-collapse>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import BackComponent from '@/components/icon/back/index.vue'
import { useDictData } from '@/stores/dictData'
import { mainHeight } from '@/utils/layout'
import Area from '@/components/form/area/index.vue'

import { ElMessage, ElMessageBox, ElDatePicker } from 'element-plus'
import { useRoute } from 'vue-router'
import { getSubstationSelect } from '@/api/device-boot/line'
import tabFrom from './tabFrom.vue'
import { cableList, getBusBarSelect, getMonitorSelect, userAdd, userGetInfo } from '@/api/advance-boot/assess'
const activeNames = ref([1, 2, 3, 4, 5, 6, 7])
const dictData = useDictData()
const pageHeight = mainHeight(70)
const areaOptionList = dictData.getBasicData('jibei_area')
const { query } = useRoute() // 查询参数
//字典获取电压等级
const voltageleveloption = dictData.getBasicData('Dev_Voltage_Stand')
const powerstationList: any = ref([]) //变电站列表
const busList: any = ref([]) //generatrix列表
const linetypeList: any = ref([]) //线路类型
const pccList: any = ref([]) //pcc列表

const form: any = ref({
    assessId: '',
    deptId: dictData.state.area[0].id,
    deptName: dictData.state.area[0].name,
    assessName: '', //用户名称
    userScale: '', //电压等级
    agreedCapacity: 0, //用户协议容量，
    withCapacitor: '', //是否包含电容器
    isWindfarm: '', //用户负荷类型
    windfarmCapacity: '', //用户有功功率（MW）
    singleLoad: '', //是否为单相负荷
    powerstationId: '', //变电站id
    powerstationName: '', //变电站名称
    powerstationScale: '', //变电站电压等级
    busId: '', //母线id
    busName: '', //母线名称
    busScale: '', //母线电压等级
    powersupplyCapacity: 0, //供电设备容量
    minshortcircuitCapacity: 0, //最小短路容量
    lineId: '', //Pccid
    lineName: '', //Pccid
    lineLen: 0, //长度
    lineNum: 0, //回路数
    linetypeId: '', //导线类型
    lineGridreactance: 0, //	PCC电电网电抗
    lineGridresistance: 0 //PCC电电网电阻

    // transformer: [
    //     {
    //         name: '变压器1',
    //         name1: '变压器型号1',
    //         name2: '100'
    //     },
    //     {
    //         name: '变压器2',
    //         name1: '变压器型号2',
    //         name2: '100'
    //     }
    // ], //变压器
    // capacitor: [
    //     {
    //         name: '电容器1',
    //         name1: '20',
    //         name2: '100',
    //         name3: '72.73',
    //         name4: '400V'
    //     },
    //     {
    //         name: '电容器2',
    //         name1: '20',
    //         name2: '100',
    //         name3: '72.73',
    //         name4: '400V'
    //     }
    // ], //电容器
    // windPower: [
    //     {
    //         name: '风机1',
    //         name1: '0.1',
    //         name2: '100'
    //     },
    //     {
    //         name: '风机2',
    //         name1: '0.1',
    //         name2: '100'
    //     }
    // ], //风电
    // load: [], //用户负荷
    // impact: [] //冲击性负荷
})
const rules = {
    deptId: [{ required: true, message: '请选择部门', trigger: 'change' }],
    assessName: [{ required: true, message: '请输入评估名称', trigger: 'blur' }],
    agreedCapacity: [{ required: true, message: '请输入用户协议容量', trigger: 'blur' }],
    withCapacitor: [{ required: true, message: '请选择是否带电容器', trigger: 'change' }],
    isWindfarm: [{ required: true, message: '请选择用户负荷类型', trigger: 'change' }],
    windfarmCapacity: [{ required: true, message: '请输入用户有功功率', trigger: 'blur' }],
    singleLoad: [{ required: true, message: '请输入是否单相负荷', trigger: 'blur' }],
    powerstationId: [{ required: true, message: '请选择接入变电站', trigger: 'change' }],
    powerstationScale: [{ required: true, message: '请选择变电站电压等级', trigger: 'change' }],
    busId: [{ required: true, message: '请选择接入母线', trigger: 'change' }],
    userScale: [{ required: true, message: '请选择母线电压等级', trigger: 'change' }],
    busScale: [{ required: true, message: '请选择母线电压等级', trigger: 'change' }],
    powersupplyCapacity: [{ required: true, message: '请输入供电设备容量', trigger: 'blur' }],
    minshortcircuitCapacity: [{ required: true, message: '请输入最小短路容量', trigger: 'blur' }],
    lineId: [{ required: true, message: '请选择PCC点名称', trigger: 'change' }],
    linetypeId: [{ required: true, message: '请选择导线类型', trigger: 'change' }],
    lineLength: [{ required: true, message: '请输入长度', trigger: 'blur' }],
    lineNum: [{ required: true, message: '请输入回路数', trigger: 'blur' }],
    lineGridreactance: [{ required: true, message: '请输入PCC点电网电阻', trigger: 'blur' }],
    lineGridresistance: [{ required: true, message: '请输入PCC点电网电抗', trigger: 'blur' }]
}
const column: any = ref([
    {
        name: '变压器参数维护',
        key: 'transformerList',
        child: [
            {
                title: '用户变压器名称',
                field: 'transName'
            },
            {
                title: '变压器型号',
                field: 'transtypeId'
            },
            {
                title: '变压器台数',
                field: 'transNum'
            }
        ]
    },
    {
        name: '电容器组参数维护',
        key: 'capacitorList',
        child: [
            {
                title: '用户电容器名称',
                field: 'name'
            },
            {
                title: '电容器组数量',
                field: 'name1'
            },
            {
                title: '单组容量(kVar)',
                field: 'name2'
            },
            {
                title: '电抗率(%)',
                field: 'name3'
            },
            {
                title: '电压等级',
                field: 'name4'
            }
        ]
    },
    {
        name: '风电参数',
        key: 'windPowerList',
        child: [
            {
                title: '风机名称',
                field: 'name'
            },
            {
                title: '风机闪变系数',
                field: 'name1'
            },
            {
                title: '风机额定视在功率',
                field: 'name2'
            }
        ]
    },
    {
        name: '用户负荷',
        key: 'loadList',
        child: [
            {
                title: '配电窒名称',
                field: 'name'
            },
            {
                title: '进线电压',
                field: 'name1'
            },
            {
                title: '配变容量(kVA)',
                field: 'name2'
            },
            {
                title: '配电变压器阻抗(%)',
                field: 'name3'
            },
            {
                title: '谐波源特性',
                field: 'name4'
            },
            {
                title: '配变低压侧电压',
                field: 'name5'
            },
            {
                title: '非线性负荷功率(kW)',
                field: 'name6'
            },
            {
                title: '功率因素',
                field: 'name7'
            }
        ]
    },
    {
        name: '冲击性负荷',
        key: 'impactList',
        child: [
            {
                title: '冲击负荷类型',
                field: 'name'
            },
            {
                title: '冲击负荷功率(MVA)',
                field: 'name1'
            },
            {
                title: '数量',
                field: 'name2'
            },
            {
                title: '启动方式',
                field: 'name3'
            },
            {
                title: '启动容量倍数',
                field: 'name4'
            },
            {
                title: '冲击负荷高压侧电压',
                field: 'name5'
            },
            {
                title: '有无隔离变',
                field: 'name6'
            },
            {
                title: '隔离变阻抗(%)',
                field: 'name7'
            },
            {
                title: '低压侧电压',
                field: 'name8'
            },
            {
                title: '负荷频度选择',
                field: 'name9'
            },
            {
                title: '闪变叠加系数',
                field: 'name10'
            }
        ]
    }
])
const dataList = ref({
    transformerList: [], //变压器参数维护
    capacitorList: [], //电容器
    windPowerList: [], //风电
    loadList: [], //用户负荷
    impactList: [] //冲击性负荷
})
const form1 = ref()
const form2 = ref()
// 保存
const onsubmit = () => {
    form1.value.validate((valid: any) => {
        if (valid) {
            form2.value.validate((valid2: any) => {
                if (valid2) {
                    userAdd(form.value).then((res: any) => {
                        form.value.assessId = res.data
                    })
                }
            })
        }
    })
}

const info = async (id?: string) => {
    // 获取电站
    await getSubstationSelect().then(res => {
        powerstationList.value = res.data
    })
    // 获取线路类型
    await cableList({}).then(res => {
        linetypeList.value = res.data
    })
    if (id) {
        userGetInfo({ assessId: id }).then(async (res: any) => {
            form.value = res.data
            await changePowerstation(res.data.powerstationId, false)
        })
    }
}
// 地市切换
const changeArea = (e: any) => {
    form.value.deptName = e.label
}
// 点击变电站
const changePowerstation = (e: any, flag: boolean = true) => {
    if (flag) {
        form.value.busScale = ''
        form.value.busId = ''
        form.value.lineId = ''
        form.value.lineName = ''
    }
    let data = powerstationList.value.filter((item: any) => item.id == e)[0]
    form.value.powerstationName = data.voltageName
    form.value.powerstationScale = data.voltageLevel
    getBusBarSelect({ stationId: data.id }).then(res => {
        busList.value = res.data
    })
    getMonitorSelect({ stationId: data.id }).then(res => {
        pccList.value = res.data
    })
}
// 点击母线
const changeBus = (e: any) => {
    let data = busList.value.filter((item: any) => item.id == e)[0]
    form.value.busName = data.voltageName
    form.value.busScale = data.voltageLevel
}
// 点击pcc
const LineChange = (e: any) => {
    let data = pccList.value.filter((item: any) => item.id == e)[0]
    form.value.lineName = data.name
}

onMounted(() => {
    console.log(123, query?.id)
    info(query?.id)
})
</script>
<style lang="scss" scoped>
.actionButtons {
    display: flex;
    justify-content: end;
}
:deep(.el-collapse-item__header) {
    // font-family: AlimamaDongFangDaKai;
    font-size: 20px;
    &::before {
        content: '▍'; /* 添加星号 */
        font-size: 16px;
        color: var(--el-color-primary);
    }
}
.el-collapse-item__content {
    padding-bottom: 10px;
}
.form-four {
    display: flex;
    flex-wrap: wrap;
    .el-form-item {
        display: flex;
        width: 22%;
        margin-bottom: 20px;
        .el-form-item__content {
            flex: 1;
            .el-select,
            .el-cascader,
            .el-input__inner,
            .el-date-editor {
                width: 100%;
            }
        }
    }
}
</style>