Files
admin-sjzx/src/views/pqs/business/terminal/transformerStrategy/components/addLedger.vue
2025-10-11 09:45:25 +08:00

692 lines
25 KiB
Vue

<template>
<div class="default-main">
<div class="title">
变压器台账配置
<back-component />
</div>
<!-- 主要内容 -->
<div>
<el-row>
<el-col :span="5">
<div style="margin: 10px; border-right: 1px solid">
<div style="overflow-y: auto" class="xiaoshou" :style="height1">
<!-- <el-tree
class="filter-tree xiaoshou"
v-loading="loading"
element-loading-text="数据加载中"
:style="'height:' + vh2 + 'px'"
:data="treeMenuData"
:props="{ children: 'children', label: 'name' }"
:expand-on-click-node="false"
:highlight-current="true"
default-expand-all
:filter-node-method="filterNode"
@node-click="handleNodeClick1"
ref="menuTree"
node-key="id"
>
<span class="span-ellipsis" slot-scope="{ node, data }">
<i :class="data.icon"></i>
<span class="title" :title="node.label">{{ node.label }}</span>
</span>
</el-tree> -->
<DeviceTree
:default-expand-all="true"
@node-click="handleNodeClick"
@init="handleNodeClick"
ref="menuTree"
></DeviceTree>
</div>
</div>
</el-col>
<el-col :span="19">
<div class="mt10">
<TableHeader showExport :showSearch="false" ref="TableHeaderRef">
<template v-slot:select>
<span style="font-size: 14px; line-height: 40px; color: red;">
所选变电站:
<span style="color: black">{{ subName }}</span>
</span>
</template>
<template #operation>
<el-button type="primary" class="ml10" @click="transformerAdd" :icon="Plus">
新增变压器信息
</el-button>
</template>
</TableHeader>
<div>
<!-- 为分页留出空间 -->
<Table ref="tableRef" height="calc(100vh - 308px)" :row-config="{ isCurrent: true, isHover: true }"></Table>
</div>
</div>
</el-col>
</el-row>
</div>
<!-- 变压器信息新增/修改 -->
<el-dialog
draggable
:title="transformerTitle"
v-model="transformerInformation"
:close-on-click-modal="false"
width="700px"
v-if="transformerInformation"
:before-close="resetForm"
>
<el-form :model="ruleForm" :rules="rules" ref="ruleFormRef" label-width="100px">
<el-form-item label="变压器名:" prop="tfName">
<el-input v-model="ruleForm.tfName" placeholder="请输入" clearable></el-input>
</el-form-item>
<el-form-item label="接线方式:" prop="wiring" class="top">
<el-select style="width: 100%" v-model="ruleForm.wiring" clearable placeholder="请选择接线方式">
<el-option
v-for="item in connectionType"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="描述:" class="top">
<el-input
v-model="ruleForm.tfDescribe"
placeholder="请输入"
clearable
type="textarea"
:rows="2"
></el-input>
</el-form-item>
<el-form-item class="mt20 ml20">
<el-button @click="transformerInformation = false">取消</el-button>
<el-button type="primary" @click="onSubmit"> </el-button>
</el-form-item>
</el-form>
</el-dialog>
<!-- 节点维护 -->
<el-dialog
:close-on-click-modal="false"
:title="maintenanceTitle"
v-model="nodemaintenanceInformation"
width="65%"
v-if="nodemaintenanceInformation"
>
<el-row :gutter="20" v-loading="isLoading3" element-loading-text="数据加载中">
<el-col :span="8">
<div style="border-right: 1px solid; height: 100%" class="xiaoshou">
<div style="overflow-y: auto; height: 100%; overflow-x: auto;max-height: 350px;" class="tree mr10 xiaoshou">
<el-input placeholder="输入关键字检索" v-model="filterText1" clearable></el-input>
<el-tree
style="cursor: pointer;display: inline-block;"
:data="treeMenuLeftData"
v-loading="loading"
element-loading-text="数据加载中"
show-checkbox
node-key="id"
ref="menuTreeLeft"
highlight-current
:check-strictly="true"
:expand-on-click-node="true"
default-expand-all
:filter-node-method="filterNode"
:props="{ children: 'children', label: 'name' }"
@check="checkLeft"
@node-click="handleNodeClick"
>
<template #default="{ node, data }">
<span class="span-ellipsis">
<i :class="data.icon"></i>
<span class="title_1" :title="node.label">{{ node.label }}</span>
</span>
</template>
</el-tree>
</div>
</div>
</el-col>
<el-col :span="8">
<el-form :model="messageInfo" label-width="90px">
<el-form-item label="变压器名称:">
<el-input disabled v-model="messageInfo.tfName" placeholder="变压器名称"></el-input>
</el-form-item>
<el-form-item label="变电站:" class="top">
<el-input disabled v-model="messageInfo.subIndexName" placeholder="变电站"></el-input>
</el-form-item>
<el-form-item label="接线方式:" class="top">
<el-input disabled v-model="messageInfo.wiring" placeholder="接线方式"></el-input>
</el-form-item>
<el-form-item label="更新人:" class="top">
<el-input disabled v-model="messageInfo.updateBy" placeholder="更新人"></el-input>
</el-form-item>
<el-form-item label="更新时间:" class="top">
<el-input disabled v-model="messageInfo.updateTime" placeholder="更新时间"></el-input>
</el-form-item>
</el-form>
</el-col>
<el-col :span="8">
<div style="border-left: 1px solid; height: 100%" class="xiaoshou">
<div style="overflow-y: auto; height: 100%;overflow-x: auto;max-height: 350px;" class="ml10 tree xiaoshou">
<el-input placeholder="输入关键字检索" v-model="filterText2" clearable></el-input>
<el-tree
style="cursor: pointer"
:data="treeMenuRightData"
v-loading="loading"
element-loading-text="数据加载中"
show-checkbox
node-key="id"
ref="menuTreeRight"
:check-strictly="true"
highlight-current
:expand-on-click-node="true"
default-expand-all
:filter-node-method="filterNode"
:props="{ children: 'children', label: 'name' }"
@check="checkRight"
@node-click="handleNodeClick"
>
<template #default="{ node, data }">
<span class="span-ellipsis">
<i :class="data.icon"></i>
<span class="title_1" :title="node.label">{{ node.label }}</span>
</span>
</template>
</el-tree>
</div>
</div>
</el-col>
</el-row>
<div style="border-top: #dddfe5 solid 1px; margin-top: 10px; margin-bottom: 5px"></div>
<span slot="footer" class="dialog-footer" style="display: flex; justify-content: flex-end">
<el-button @click="nodemaintenanceInformation = false"> </el-button>
<el-button type="primary" @click="maintenanceOnsubmit">提交</el-button>
</span>
</el-dialog>
</div>
</template>
<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import BackComponent from '@/components/icon/back/index.vue'
import { mainHeight } from '@/utils/layout'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import DeviceTree from '@/components/tree/pqs/deviceTree.vue'
import { Plus, Setting } from '@element-plus/icons-vue'
import TableHeader from '@/components/table/header/index.vue'
import { useDictData } from '@/stores/dictData'
import {
insertTransformer,
updateTransformer,
delTransformer,
nodeMaintenance,
getGeneratrix
} from '@/api/device-boot/transformerStrategy'
import { ElMessage, ElMessageBox } from 'element-plus'
import { calc } from '@/api/advance-boot/sgGroven/sgScheme'
defineOptions({
name: 'BusinessAdministrator/TerminalManagement/addLedger'
})
const tableRef = ref()
const dictData = useDictData()
const connectionType = dictData.getBasicData('Dev_Connect')
// 新增、修改
const transformerTitle = ref('新增变压器信息')
const transformerInformation = ref(false)
const ruleFormRef = ref()
const menuTree = ref()
const ruleForm = reactive({
tfName: '',
wiring: '',
subIndex: '',
tfDescribe: ''
})
// 树选择
const subName = ref('')
const parentId = ref('')
const rules = reactive({
tfName: [{ required: true, message: '请输入变压器名', trigger: 'blur' }],
wiring: [{ required: true, message: '请选择接线方式', trigger: 'change' }]
})
// 变压器节点维护
interface TreeNode {
id: string
name: string
icon?: string
level?: number
disabled?: boolean
children?: TreeNode[]
}
const maintenanceTitle = ref('变压器节点维护')
const nodemaintenanceInformation = ref(false)
const loading = ref(false)
const isLoading3 = ref(false)
const filterText1 = ref('')
const filterText2 = ref('')
const menuTreeLeft = ref()
const menuTreeRight = ref()
const treeMenuLeftData = ref<TreeNode[]>([])
const treeMenuRightData = ref<TreeNode[]>([])
const messageInfo = reactive({
tfName: '',
subIndexName: '',
wiring: '',
updateBy: '',
updateTime: ''
})
const bind = ref<any[]>([])
const bindLevel = ref<number>(0)
const tableStore = new TableStore({
url: '/device-boot/pqsTransformer/transformerPage',
method: 'POST',
column: [
{ title: '变压器名称', field: 'tfName' },
{ title: '变电站', field: 'subIndexName' },
{
title: '接线方式',
field: 'wiring',
formatter: (row: any) => {
if (row.column.property == 'wiring') {
let title = ''
connectionType.forEach(item => {
if (item.id == row.row.wiring) {
title = item.name
}
})
return title
} else {
return row.row[row.column.property]
}
}
},
{ title: '更新人', field: 'updateBy' },
{ title: '更新时间', field: 'updateTime' },
// {
// title: '等级',
// field: 'nodeGrade',
// render: 'tag',
// custom: {
// 0: 'success',
// 1: 'warning',
// 2: 'info'
// },
// replaceValue: {
// 0: '极重要',
// 1: '普通',
// 2: '备用'
// }
// },
{
title: '描述',
field: 'tfDescribe'
},
{
title: '操作',
align: 'center',
width: '180',
render: 'buttons',
buttons: [
{
name: 'maintenance',
title: '节点维护',
type: 'primary',
icon: 'el-icon-Share',
render: 'basicButton',
click: async row => {
nodemaintenanceInformation.value = true
maintenance(JSON.parse(JSON.stringify(row)))
}
},
{
name: 'edit',
title: '编辑',
type: 'primary',
icon: 'el-icon-EditPen',
render: 'basicButton',
click: row => {
transformerInformation.value = true
transformerTitle.value = '修改变压器信息'
Object.assign(ruleForm, JSON.parse(JSON.stringify(row)))
}
},
{
name: 'del',
title: '删除',
type: 'danger',
icon: 'el-icon-Delete',
render: 'confirmButton',
popconfirm: {
confirmButtonText: '确认',
cancelButtonText: '取消',
confirmButtonType: 'danger',
title: '确定删除吗?'
},
click: row => {
delTransformer([row.tfIndex]).then(res => {
ElMessage.success('删除成功')
tableStore.index()
})
}
}
]
}
],
// beforeSearchFun: () => {
// for (let key in tableStore.table.params) {
// if (tableStore.table.params[key] === '' && key !== 'nodeGrade' && key !== 'searchState') {
// delete tableStore.table.params[key]
// }
// }
// },
loadCallback: () => {}
})
tableStore.table.params.searchValue = ''
provide('tableStore', tableStore)
onMounted(() => {
setTimeout(() => {
tableStore.index()
}, 100)
})
const height = mainHeight(20)
const height1 = mainHeight(85)
const height2 = mainHeight(300)
//变压器新增
const transformerAdd = () => {
ruleForm.tfName = ''
ruleForm.wiring = ''
ruleForm.tfDescribe = ''
if (subName.value == '') {
ElMessage({
type: 'warning',
message: '请选择变电站'
})
} else {
transformerTitle.value = '新增变压器信息'
transformerInformation.value = true
nextTick(() => {
ruleFormRef.value.clearValidate()
})
}
}
// 树选择
const handleNodeClick = (data: any, node: any) => {
if (node.level == 4) {
subName.value =
node.parent.parent.parent.data.name +
`>` +
node.parent.parent.data.name +
`>` +
node.parent.data.name +
`>` +
node.data.name
ruleForm.subIndex = node.data.id
tableStore.table.params.searchValue = node.data.id
parentId.value = node.data.id
} else if (node.level == 5) {
subName.value =
node.parent.parent.parent.parent.data.name +
`>` +
node.parent.parent.parent.data.name +
`>` +
node.parent.parent.data.name +
`>` +
node.parent.data.name
ruleForm.subIndex = node.parent.data.id
tableStore.table.params.searchValue = node.data.id
parentId.value = node.parent.data.id
} else {
tableStore.table.params.searchValue = ''
}
tableStore.index()
}
const resetForm = () => {
transformerInformation.value = false
Object.assign(ruleForm, {
tfName: '',
wiring: '',
subIndex: '',
tfDescribe: ''
})
}
// 确认
const onSubmit = () => {
ruleFormRef.value.validate((valid: any) => {
if (valid) {
if (transformerTitle.value == '新增变压器信息') {
insertTransformer(ruleForm).then(res => {
ElMessage.success('新增变压器信息成功')
resetForm()
menuTree.value.loadData()
tableStore.onTableAction('search', {})
})
} else {
ElMessageBox.confirm('是否确认修改?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
updateTransformer(ruleForm).then(res => {
ElMessage.success('修改成功')
resetForm()
menuTree.value.loadData()
tableStore.onTableAction('search', {})
})
})
}
}
})
}
// 变压器维护
const maintenance = (val: any) => {
maintenanceTitle.value = '变压器节点维护'
maintenanceData.upNode = ''
maintenanceData.downNode = ''
maintenanceData.tfIndex = val.tfIndex
isLoading3.value = true
getGeneratrix({
id: val.tfIndex,
subId: val.subIndex
}).then(res => {
bind.value = res.data.bind
treeMenuLeftData.value = res.data.upNode
treeMenuRightData.value = res.data.downNode
setDisabled(treeMenuRightData.value)
setDisabled(treeMenuLeftData.value)
isLoading3.value = false
if (treeMenuLeftData.value && treeMenuLeftData.value.length > 0) {
treeMenuLeftData.value[0].children?.forEach(item => {
item.children?.forEach(item1 => {
item1.children?.forEach(item2 => {
item2.children?.forEach(item3 => {
if (item3.level != null) {
menuTreeLeft.value?.setCheckedKeys([item3.id])
maintenanceData.upNode = item3.id
bindLevel.value = item3.level
}
})
})
})
})
}
if (treeMenuRightData.value && treeMenuRightData.value.length > 0) {
treeMenuRightData.value[0].children?.forEach(item => {
item.children?.forEach(item1 => {
item1.children?.forEach(item2 => {
item2.children?.forEach(item3 => {
if (item3.level != null) {
menuTreeRight.value?.setCheckedKeys([item3.id])
maintenanceData.downNode = item3.id
}
})
})
})
})
}
nodemaintenanceInformation.value = true
})
Object.assign(messageInfo, JSON.parse(JSON.stringify(val)))
connectionType.forEach(item => {
if (messageInfo.wiring == item.id) {
messageInfo.wiring = item.name
}
})
}
//设置禁选
const setDisabled = (treeData: any[]) => {
treeData.forEach((item) => {
item.disabled = true;
item.children.forEach((item1:any) => {
item1.disabled = true;
item1.children.forEach((item2:any) => {
item2.disabled = true;
item2.children.forEach((item3:any) => {
item3.disabled = true;
});
});
});
});
}
watch(
() => [filterText1.value, filterText2.value],
([newVal1, newVal2]) => {
menuTreeLeft.value.filter(newVal1)
menuTreeRight.value.filter(newVal2)
}
)
/**筛选节点 */
const filterNode = (value: any, data: any, node: any) => {
if (!value) {
return true
}
let _array: boolean[] = [] // 显式声明类型为 boolean[]
getReturnNode(node, _array, value)
let result = false
_array.forEach(item => {
result = result || item
})
return result
}
const getReturnNode = (node: any, _array: boolean[], value: string) => {
let isPass = node.data && node.data.name && node.data.name.indexOf(value) !== -1
isPass ? _array.push(isPass) : ''
if (!isPass && node.level !== 1 && node.parent) {
getReturnNode(node.parent, _array, value)
}
}
const maintenanceData = reactive({
upNode: '',
downNode: '',
tfIndex: ''
})
//上节点选择
const checkLeft = (checkedNodes: any, checkedKeys: any) => {
maintenanceData.upNode = checkedNodes.id
if (maintenanceData.upNode === maintenanceData.downNode) {
menuTreeRight.value?.setCheckedKeys([])
maintenanceData.downNode = ''
}
if (checkedKeys.checkedKeys.length > 1) {
menuTreeLeft.value?.setCheckedKeys([checkedNodes.id])
}
}
//下节点选择
const checkRight = (checkedNodes: any, checkedKeys: any) => {
maintenanceData.downNode = checkedNodes.id
if (maintenanceData.downNode === maintenanceData.upNode) {
menuTreeLeft.value?.setCheckedKeys([])
maintenanceData.upNode = ''
}
if (checkedKeys.checkedKeys.length > 1) {
menuTreeRight.value?.setCheckedKeys([checkedNodes.id])
}
}
//节点维护提交
const maintenanceOnsubmit = () => {
for (let i = 0; i < bind.value.length; i++) {
if (bind.value[i][0] == maintenanceData.upNode) {
for (let j = 0; j < bind.value.length; j++) {
if (bind.value[j][1] == maintenanceData.downNode) {
ElMessage({
type: 'warning',
message: '上下节点无法选择相同母线!!!'
})
return
}
}
return
}
}
if (bindLevel.value != 5) {
for (let i = 0; i < bind.value.length; i++) {
if (maintenanceData.upNode == bind.value[i][1] && maintenanceData.downNode == bind.value[i][0]) {
ElMessage({
type: 'warning',
message: '上下节点无法选择相同母线!!!'
})
return
}
}
}
nodeMaintenance(maintenanceData).then((res: any) => {
if (res.code == 'A0000') {
ElMessage({
type: 'success',
message: '维护成功'
})
nodemaintenanceInformation.value = false
tableStore.index()
}
})
}
</script>
<style lang="scss" scoped>
.title {
display: flex;
justify-content: space-between;
padding: 10px;
font-size: 16px;
font-weight: 550;
}
.xiaoshou {
cursor: pointer !important;
}
.span-ellipsis {
display: block;
width: 100%;
text-overflow: ellipsis;
white-space: nowrap;
}
::v-deep .el-tree {
font-size: 13px !important;
font-weight: 540 !important;
}
</style>