455 lines
20 KiB
Vue
455 lines
20 KiB
Vue
<template>
|
||
<div class="default-main">
|
||
<div class="actionButtons">
|
||
<el-button type="primary" icon="el-icon-Check" class="md8" @click="onsubmit" v-if="showSaveButton">保存</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"
|
||
:disabled="formDisabled"
|
||
>
|
||
<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 show-word-limit maxlength="32"/>
|
||
</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="请输入值"
|
||
max="9999"
|
||
min="0"
|
||
></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="windfarmCapacityLabel" 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"
|
||
:disabled="formDisabled"
|
||
>
|
||
<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="请输入值"
|
||
min="0"
|
||
max="9999"
|
||
></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="请输入值"
|
||
min="0"
|
||
max="9999"
|
||
></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="请输入值"
|
||
max="9999"
|
||
min="0"
|
||
></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="请输入值"
|
||
max="9999"
|
||
min="0"
|
||
></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="请输入值"
|
||
max="9999"
|
||
min="0"
|
||
></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="请输入值"
|
||
max="9999"
|
||
min="0"
|
||
></el-input-number>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-collapse-item>
|
||
<div v-if="form.assessId">
|
||
<tabFrom :assessId="form.assessId" :isWindfarm="form.isWindfarm" :isWithCapacitor="form.withCapacitor" :disabled="formDisabled"/>
|
||
</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 { useRouter } from 'vue-router'
|
||
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 ,userEdit} 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 route = useRoute()
|
||
const isViewMode = ref(route.query.mode === 'view')
|
||
|
||
// 根据 isViewMode 控制表单的禁用状态
|
||
const formDisabled = ref(isViewMode.value)
|
||
|
||
// 或者在保存按钮上根据模式控制显示
|
||
const showSaveButton = !isViewMode.value
|
||
|
||
|
||
const form: any = ref({
|
||
assessId: '',
|
||
deptId: dictData.state.area[0].id,
|
||
deptName: dictData.state.area[0].name,
|
||
assessName: '', //用户名称
|
||
userScale: '', //电压等级
|
||
agreedCapacity: 0, //用户协议容量，
|
||
withCapacitor: '', //是否包含电容器
|
||
isWindfarm: '', //用户负荷类型
|
||
windfarmCapacity: 0, //用户有功功率（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电电网电阻
|
||
})
|
||
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 windfarmCapacityLabel = computed(() => {
|
||
if (form.value.isWindfarm === '01') {
|
||
return '风电场装机容量(MW)'
|
||
} else {
|
||
return '用户有功容量(MW)'
|
||
}
|
||
})
|
||
|
||
const form1 = ref()
|
||
const form2 = ref()
|
||
|
||
// 保存
|
||
const onsubmit = () => {
|
||
form1.value.validate((valid: any) => {
|
||
if (valid) {
|
||
form2.value.validate((valid2: any) => {
|
||
if (valid2) {
|
||
if(form.value.assessId){
|
||
userEdit(form.value).then((res: any) => {
|
||
//form.value.assessId = res.data
|
||
ElMessage({
|
||
type: 'success',
|
||
message: '编辑成功!'
|
||
})
|
||
})
|
||
}else{
|
||
userAdd(form.value).then((res: any) => {
|
||
form.value.assessId = res.data
|
||
|
||
ElMessage({
|
||
type: 'success',
|
||
message: '新增成功!'
|
||
})
|
||
})
|
||
}
|
||
|
||
}
|
||
})
|
||
}
|
||
})
|
||
}
|
||
|
||
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.name
|
||
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.name
|
||
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(() => {
|
||
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%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
:deep(.el-select) {
|
||
min-width: 120px;
|
||
}
|
||
</style>
|
||
|
||
|