624 lines
20 KiB
Vue
624 lines
20 KiB
Vue
<template>
|
||
<el-dialog
|
||
v-model="dialogVisible"
|
||
:title="title"
|
||
draggable
|
||
:style="{ width: popupType == 0 || popupType == 1 ? '500px' : '1100px' }"
|
||
>
|
||
<!-- 新增方案数据 -->
|
||
<el-form
|
||
:model="form"
|
||
scroll-to-error
|
||
label-width="140px"
|
||
:rules="rules1"
|
||
ref="ruleFormRef1"
|
||
v-if="popupType == 0 || popupType == 1"
|
||
>
|
||
<el-form-item label="方案名称：" prop="itemName">
|
||
<el-input v-model="form.itemName" placeholder="请输入方案名称" />
|
||
</el-form-item>
|
||
<el-form-item label="方案描述：" prop="describe">
|
||
<el-input type="textarea" v-model="form.describe" placeholder="请输入方案描述" />
|
||
</el-form-item>
|
||
</el-form>
|
||
<!-- 测试项信息&数据绑定页面 -->
|
||
<el-tabs type="border-card" v-model="activeName" v-if="popupType != 0 && popupType != 1">
|
||
<el-tab-pane label="测试项信息" :name="0">
|
||
<el-form
|
||
:model="form1"
|
||
ref="ruleFormRef2"
|
||
scroll-to-error
|
||
class="form-two"
|
||
label-width="140px"
|
||
:rules="rules2"
|
||
>
|
||
<el-form-item label="测试项名称：" prop="itemName">
|
||
<el-input v-model="form1.itemName" placeholder="请输入测试项名称" />
|
||
</el-form-item>
|
||
<el-form-item label="测量间隔：" prop="statisticalInterval">
|
||
<el-select
|
||
v-model="form1.statisticalInterval"
|
||
placeholder="请选择测量间隔"
|
||
clearable
|
||
style="width: 100%"
|
||
>
|
||
<el-option
|
||
v-for="(item, index) in statisticalIntervalList"
|
||
:key="index"
|
||
:label="item.name"
|
||
:value="item.id"
|
||
></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="电压等级：" prop="voltageLevel">
|
||
<el-select
|
||
v-model="form1.voltageLevel"
|
||
placeholder="请选择电压等级"
|
||
clearable
|
||
style="width: 100%"
|
||
@change="changeVoltageLevel"
|
||
>
|
||
<el-option
|
||
v-for="(item, index) in voltageLevelList"
|
||
:key="index"
|
||
:label="item.name"
|
||
:value="item.id"
|
||
></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="接线方式：" prop="volConType">
|
||
<el-select
|
||
v-model="form1.volConType"
|
||
placeholder="请选择接线方式"
|
||
clearable
|
||
style="width: 100%"
|
||
>
|
||
<el-option
|
||
v-for="(item, index) in volConTypeList"
|
||
:key="index"
|
||
:label="item.name"
|
||
:value="item.id"
|
||
></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="最小短路容量：" prop="capacitySscmin">
|
||
<el-input
|
||
v-model="form1.capacitySscmin"
|
||
oninput="value=value.replace(/[^\-?\d.]/g,'')
|
||
.replace(/^\./g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.')
|
||
.replace('-','$#$').replace(/\-/g,'').replace('$#$','-')"
|
||
autocomplete="off"
|
||
placeholder="请选择最小短路容量"
|
||
>
|
||
<template #append>MVA</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="用户协议容量：" prop="capacitySi">
|
||
<el-input
|
||
v-model="form1.capacitySi"
|
||
autocomplete="off"
|
||
oninput="value=value.replace(/[^\-?\d.]/g,'')
|
||
.replace(/^\./g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.')
|
||
.replace('-','$#$').replace(/\-/g,'').replace('$#$','-')"
|
||
placeholder="请输入用户协议容量"
|
||
>
|
||
<template #append>MVA</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="基准短路容量：" prop="capacitySscb">
|
||
<el-input
|
||
v-model="form1.capacitySscb"
|
||
oninput="value=value.replace(/[^\-?\d.]/g,'')
|
||
.replace(/^\./g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.')
|
||
.replace('-','$#$').replace(/\-/g,'').replace('$#$','-')"
|
||
placeholder="请输入基准短路容量"
|
||
>
|
||
<template #append>MVA</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="供电设备容量：" prop="capacitySt">
|
||
<el-input
|
||
v-model="form1.capacitySt"
|
||
oninput="value=value.replace(/[^\-?\d.]/g,'')
|
||
.replace(/^\./g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.')
|
||
.replace('-','$#$').replace(/\-/g,'').replace('$#$','-')"
|
||
placeholder="请输入供电设备容量"
|
||
>
|
||
<template #append>MVA</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item label="PT变比：" prop="pt">
|
||
<el-input
|
||
style="width: 48%"
|
||
v-model="form1.pt"
|
||
autocomplete="off"
|
||
placeholder="请输入PT变比"
|
||
oninput="value=value.replace(/[^0-9.]/g,'')"
|
||
/>
|
||
<el-input
|
||
style="width: 48%"
|
||
v-model="form1.pt1"
|
||
autocomplete="off"
|
||
placeholder="请输入PT变比"
|
||
oninput="value=value.replace(/[^0-9.]/g,'')"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="CT变比：" prop="ct">
|
||
<el-input
|
||
v-model="form1.ct"
|
||
style="width: 48%"
|
||
autocomplete="off"
|
||
oninput="value=value.replace(/[^0-9.]/g,'')"
|
||
placeholder="请输入CT变比"
|
||
/>
|
||
<el-input
|
||
v-model="form1.ct1"
|
||
style="width: 48%"
|
||
autocomplete="off"
|
||
oninput="value=value.replace(/[^0-9.]/g,'')"
|
||
placeholder="请输入CT变比"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="监测位置：" prop="location" style="width: 100%">
|
||
<el-input type="textarea" v-model="form1.location" placeholder="请输入监测位置" />
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="数据绑定" :name="2">
|
||
<TreeTransfers :fromData="unBindList" :toData="bindList" @getData="getData" />
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
<template #footer="">
|
||
<el-button @click="close">取 消</el-button>
|
||
<el-button type="primary" @click="submit">确 定</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
</template>
|
||
<script lang="ts" setup>
|
||
import { ref, inject, defineEmits, provide, nextTick, watch, onMounted } from 'vue'
|
||
import { ElMessage } from 'element-plus'
|
||
import { Plus, Minus, Message, ArrowRight, ArrowLeft } from '@element-plus/icons-vue'
|
||
import { addPlan, addRecord, updateRecord, getDeviceList, addDevice, delDevice } from '@/api/cs-device-boot/planData'
|
||
import { useDictData } from '@/stores/dictData'
|
||
import TreeTransfers from './treeTransfers.vue'
|
||
const dictData = useDictData()
|
||
const dialogVisible = ref(false)
|
||
const voltageLevelList = dictData.getBasicData('Dev_Voltage_Stand')
|
||
const volConTypeList = dictData.getBasicData('Dev_Connect')
|
||
const emit = defineEmits(['onSubmit'])
|
||
//表单数据
|
||
const form = ref({})
|
||
//测试项数据
|
||
const form1: any = ref({})
|
||
//折叠面板初始值
|
||
const activeTab = ref(0)
|
||
//tab初始值
|
||
const activeName = ref(0)
|
||
//测量间隔数据
|
||
const statisticalIntervalList = [
|
||
{
|
||
id: 1,
|
||
name: '1分钟'
|
||
},
|
||
{
|
||
id: 3,
|
||
name: '3分钟'
|
||
},
|
||
{
|
||
id: 5,
|
||
name: '5分钟'
|
||
},
|
||
{
|
||
id: 10,
|
||
name: '10分钟'
|
||
}
|
||
]
|
||
//初始化form
|
||
const initForm = () => {
|
||
//方案数据
|
||
form.value = {
|
||
itemName: '', //方案名称
|
||
describe: '' //方案描述
|
||
}
|
||
//测试项数据
|
||
form1.value = {
|
||
itemName: '', //测试项名称
|
||
statisticalInterval: statisticalIntervalList[1].id, //测量间隔
|
||
voltageLevel: voltageLevelList[0].id, //电压等级
|
||
volConType: volConTypeList[0].id, //接线方式
|
||
capacitySscmin: 10, //最小短路容量
|
||
capacitySi: 10, //用户协议容量
|
||
capacitySscb: 10, //基准短路容量
|
||
capacitySt: 10, //供电设备容量
|
||
pt: 1, //pt变比1
|
||
pt1: 1, //pt变比2
|
||
ct: 300, //ct变比1
|
||
ct1: 5, //ct变比2
|
||
location: '' //监测位置
|
||
}
|
||
changeVoltageLevel()
|
||
}
|
||
const codeValue = (val: any) => {
|
||
return (
|
||
voltageLevelList.find((item: any) => {
|
||
return item.code == val
|
||
})?.value * 1
|
||
)
|
||
}
|
||
//改变电压等级计算基准短路容量
|
||
const changeVoltageLevel = async () => {
|
||
let value: any =
|
||
voltageLevelList.find((item: any) => {
|
||
return item.id == form1.value.voltageLevel
|
||
})?.value * 1
|
||
if (value < codeValue('6kV')) {
|
||
form1.value.capacitySscb = 10
|
||
} else if (value < codeValue('20kV')) {
|
||
form1.value.capacitySscb = 100
|
||
} else if (value < codeValue('35kV')) {
|
||
form1.value.capacitySscb = 200
|
||
} else if (value < codeValue('66kV')) {
|
||
form1.value.capacitySscb = 250
|
||
} else if (value < codeValue('110kV')) {
|
||
form1.value.capacitySscb = 500
|
||
} else if (value < codeValue('220kV')) {
|
||
form1.value.capacitySscb = 750
|
||
} else if (value < codeValue('330kV')) {
|
||
form1.value.capacitySscb = 2000
|
||
} else if (value < codeValue('500kV')) {
|
||
form1.value.capacitySscb = 3000
|
||
} else if (value < codeValue('750kV')) {
|
||
form1.value.capacitySscb = 4500
|
||
} else if (value < codeValue('1000kV')) {
|
||
form1.value.capacitySscb = 7000
|
||
} else {
|
||
form1.value.capacitySscb = 9000
|
||
}
|
||
}
|
||
|
||
initForm()
|
||
//方案校验规则
|
||
const rules1 = ref({
|
||
//方案名称
|
||
itemName: [
|
||
{
|
||
required: true,
|
||
message: '请输入方案名称',
|
||
trigger: 'blur'
|
||
}
|
||
],
|
||
//方案名称
|
||
describe: [
|
||
{
|
||
required: true,
|
||
message: '请输入方案描述',
|
||
trigger: 'blur'
|
||
}
|
||
]
|
||
})
|
||
//测试项校验规则
|
||
const rules2 = ref({
|
||
//测试项名称
|
||
itemName: [
|
||
{
|
||
required: true,
|
||
message: '请输入测试项名称',
|
||
trigger: 'blur'
|
||
}
|
||
],
|
||
describe: [
|
||
{
|
||
required: true,
|
||
message: '请选择测量间隔',
|
||
trigger: 'change'
|
||
}
|
||
],
|
||
voltageLevel: [
|
||
{
|
||
required: true,
|
||
message: '请选择电压等级',
|
||
trigger: 'change'
|
||
}
|
||
],
|
||
volConType: [
|
||
{
|
||
required: true,
|
||
message: '请选择接线方式',
|
||
trigger: 'change'
|
||
}
|
||
],
|
||
capacitySscmin: [
|
||
{
|
||
required: true,
|
||
message: '请输入最小短路容量',
|
||
trigger: 'blur'
|
||
}
|
||
],
|
||
capacitySi: [
|
||
{
|
||
required: true,
|
||
message: '请输入用户协议容量',
|
||
trigger: 'blur'
|
||
}
|
||
],
|
||
capacitySscb: [
|
||
{
|
||
required: true,
|
||
message: '请输入基准短路容量',
|
||
trigger: 'blur'
|
||
}
|
||
],
|
||
capacitySt: [
|
||
{
|
||
required: true,
|
||
message: '请输入供电设备容量',
|
||
trigger: 'blur'
|
||
}
|
||
],
|
||
pt: [
|
||
{
|
||
required: true,
|
||
message: '请输入PT变比',
|
||
trigger: 'blur'
|
||
}
|
||
],
|
||
ct: [
|
||
{
|
||
required: true,
|
||
message: '请输入CT变比',
|
||
trigger: 'blur'
|
||
}
|
||
],
|
||
location: [
|
||
{
|
||
required: true,
|
||
message: '请输入监测位置',
|
||
trigger: 'blur'
|
||
}
|
||
]
|
||
})
|
||
//弹框标题
|
||
const title: any = ref('')
|
||
//判断页面显示条件
|
||
const popupType: any = ref(null)
|
||
//方案/测试项id
|
||
const planId: any = ref('')
|
||
//回显方案、测试项操作
|
||
const details = (val: any) => {
|
||
console.log(val, '回显方案测试项操作66666')
|
||
if (val.records && val.records.length != 0) {
|
||
form.value = {
|
||
describe: val.describe,
|
||
itemName: val.itemName
|
||
}
|
||
} else {
|
||
form1.value = val
|
||
}
|
||
|
||
return
|
||
//修改方案回显
|
||
if (popupType.value == 1) {
|
||
form.value = JSON.parse(JSON.stringify(val))
|
||
}
|
||
//修改测试项回显
|
||
if (popupType.value == 3) {
|
||
if (val.records[0] && val.records.length != 0) {
|
||
form1.value = JSON.parse(JSON.stringify(val.records[0]))
|
||
} else {
|
||
initForm()
|
||
}
|
||
}
|
||
if (popupType.value != 1 && popupType.value != 3) {
|
||
initForm()
|
||
}
|
||
}
|
||
//未绑定数据tree
|
||
const unBindList = ref([])
|
||
//已绑定数据tree
|
||
const bindList = ref([])
|
||
//0 新增方案 1 修改方案 2 新增测试项 3 修改测试项 4 设备信息
|
||
const open = async (val: any, id: any) => {
|
||
popupType.value = val
|
||
title.value = val == 0 ? '新增方案' : val == 1 ? '修改方案' : val == 2 ? '新增测试项' : '修改测试项'
|
||
dialogVisible.value = true
|
||
planId.value = id
|
||
console.log(11111, val, '==============>>>>>>>>')
|
||
//新增方案或者测试项数据
|
||
if (val == 0 || val == 2) {
|
||
initForm()
|
||
}
|
||
if (val != 0 && val != 1) {
|
||
//1 列表 0树
|
||
// getDeviceList({ id: id, isTrueFlag: 0, pageNum: 1, pageSize: 200 }).then(res => {})
|
||
dialogVisible.value = true
|
||
selectId.value = id
|
||
//0未绑定数据 1 已绑定数据
|
||
//获取未绑定树形数据
|
||
getDeviceList({ id: id, isTrueFlag: 0 }).then(res => {
|
||
unBindList.value = res.data
|
||
})
|
||
//获取已绑定树形数据
|
||
getDeviceList({ id: id, isTrueFlag: 1 }).then(res => {
|
||
bindList.value = res.data
|
||
})
|
||
activeName.value = 0
|
||
}
|
||
}
|
||
//获取选择的绑定的数据
|
||
const checkedIdList: any = ref([])
|
||
const getData = (rightData: any) => {
|
||
checkedIdList.value = []
|
||
if (rightData && rightData.length != 0) {
|
||
rightData.map((item: any) => {
|
||
item.children.map((vv: any) => {
|
||
vv.children.map((kk: any) => {
|
||
checkedIdList.value.push(kk.id)
|
||
})
|
||
})
|
||
})
|
||
}
|
||
checkedIdList.value = [...new Set(checkedIdList.value)]
|
||
}
|
||
|
||
//判断是否显示新增页面 false显示详情页面和删除按钮隐藏确定按钮 true显示新增页面与确定按钮隐藏删除按钮
|
||
const addFlag = ref(false)
|
||
const selectId: any = ref('')
|
||
//判断是否选择了设备数据
|
||
const checkedList: any = ref([])
|
||
//关闭
|
||
const ruleFormRef1 = ref()
|
||
const ruleFormRef2 = ref()
|
||
const close = () => {
|
||
dialogVisible.value = false
|
||
//折叠面板
|
||
activeTab.value = 0
|
||
if (addFlag.value) {
|
||
addFlag.value = false
|
||
checkedList.value = []
|
||
} else {
|
||
dialogVisible.value = false
|
||
}
|
||
|
||
//取消表单校验状态
|
||
if (popupType.value == 0 || popupType.value == 1) {
|
||
ruleFormRef1.value && ruleFormRef1.value.resetFields()
|
||
} else {
|
||
ruleFormRef2.value && ruleFormRef2.value?.resetFields()
|
||
}
|
||
//tabs
|
||
activeName.value = 0
|
||
unBindList.value = []
|
||
bindList.value = []
|
||
initForm()
|
||
}
|
||
//提交
|
||
const submit = () => {
|
||
//新增方案
|
||
if (popupType.value == 0) {
|
||
ruleFormRef1.value.validate((valid: any) => {
|
||
if (valid) {
|
||
const subForm = {
|
||
itemName: form.value.itemName,
|
||
describe: form.value.describe
|
||
}
|
||
addPlan(subForm).then((res: any) => {
|
||
if (res.code == 'A0000') {
|
||
ElMessage.success('新增方案成功')
|
||
initForm()
|
||
emit('onSubmit')
|
||
close()
|
||
}
|
||
})
|
||
} else {
|
||
console.log('表单验证失败')
|
||
return false
|
||
}
|
||
})
|
||
}
|
||
//修改方案
|
||
if (popupType.value == 1) {
|
||
ruleFormRef1.value.validate((valid: boolean) => {
|
||
if (valid) {
|
||
const subForm = {
|
||
id: planId.value,
|
||
itemName: form.value.itemName,
|
||
describe: form.value.describe
|
||
}
|
||
addPlan(subForm).then(res => {
|
||
ElMessage.success('修改方案成功')
|
||
emit('onSubmit')
|
||
close()
|
||
})
|
||
}
|
||
})
|
||
}
|
||
//新增测试项
|
||
if (popupType.value == 2) {
|
||
ruleFormRef2.value.validate((valid: boolean) => {
|
||
if (valid) {
|
||
let subForm = {
|
||
id: planId.value,
|
||
records: [form1.value]
|
||
}
|
||
// subForm.list = tableData.value.map(item => {
|
||
// return item.id
|
||
// })
|
||
subForm.records[0].list = checkedIdList.value
|
||
addRecord(subForm).then(res => {
|
||
ElMessage.success('新增测试项成功')
|
||
initForm()
|
||
emit('onSubmit')
|
||
close()
|
||
})
|
||
}
|
||
})
|
||
}
|
||
//修改测试项
|
||
if (popupType.value == 3) {
|
||
ruleFormRef2.value.validate((valid: any) => {
|
||
if (valid) {
|
||
let subForm = JSON.parse(JSON.stringify(form1.value))
|
||
subForm.list = checkedIdList.value
|
||
updateRecord(subForm).then((res: any) => {
|
||
if (res.code == 'A0000') {
|
||
ElMessage.success('修改测试项成功')
|
||
initForm()
|
||
emit('onSubmit')
|
||
close()
|
||
}
|
||
})
|
||
} else {
|
||
console.log('校验不通过')
|
||
}
|
||
})
|
||
}
|
||
}
|
||
defineExpose({ open, details })
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
::v-deep .el-form-item__content {
|
||
display: flex !important;
|
||
justify-content: space-between !important;
|
||
}
|
||
::v-deep .form-two {
|
||
.el-select {
|
||
width: 100% !important;
|
||
}
|
||
}
|
||
.button_info {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
margin: 10px 0;
|
||
}
|
||
|
||
.device_info {
|
||
width: 100%;
|
||
display: flex;
|
||
// justify-content: space-between;
|
||
|
||
.left_device,
|
||
.right_device {
|
||
width: 410px;
|
||
border: 1px solid #eee;
|
||
padding-right: 10px;
|
||
p {
|
||
margin: 10px 10px 0 10px;
|
||
font-weight: 800;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
|
||
.center_bind {
|
||
flex: 1;
|
||
display: flex;
|
||
padding: 0 30px;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
</style>
|