模型库

This commit is contained in:
sjl
2025-09-11 13:14:36 +08:00
parent db6594cdf4
commit 8b23cea38d
4 changed files with 120 additions and 106 deletions

View File

@@ -1,17 +1,17 @@
<template> <template>
<div class="default-main"> <div class="default-main">
<TableHeader> <TableHeader ref="TableHeaderRef">
<template v-slot:select> <template v-slot:select>
<el-form-item label="筛选数据"> <el-form-item label="名称">
<el-input <el-input v-model="tableStore.table.params.searchValue" clearable
v-model="tableStore.table.params.searchValue" placeholder="请输入搜索名称" maxlength="32" show-word-limit/>
placeholder="根据名称,容量查询"
/>
</el-form-item> </el-form-item>
</template> </template>
</TableHeader> </TableHeader>
<Table ref="tableRef" />
<Table ref="tableRef" isGroup/>
</div> </div>
</template> </template>
<script setup lang="tsx"> <script setup lang="tsx">
@@ -23,37 +23,51 @@ import { useDictData } from '@/stores/dictData'
const tableRef = ref() const tableRef = ref()
const tableStore = new TableStore({ const tableStore = new TableStore({
url: '/event-boot/report/getEventReport', url: '/supervision-boot/libModel/pageLibModelQuery',
method: 'POST', method: 'POST',
showPage: true, // 确保启用分页
column: [ column: [
// 第一层:主标题(跨列)
{ {
title: '典型设备', title: '典型设备',
width: 300,
children: [ children: [
{ field: 'gdName', title: '名称' }, { field: 'name', title: '名称',minWidth: 200 },
{ field: 'subName', title: '电压等级' }, { field: 'voltage', title: '电压等级',minWidth: 100 },
{ field: 'ip', title: '容量' } { field: 'capacity', title: '容量',minWidth: 100 }
] ]
}, },
{ {
title: '各次谐波阻抗 (Ω)', title: '各次谐波阻抗 (Ω)',
width: 1800, // 根据实际列数调整 width: 1800,
children: Array.from({ length: 24 }, (_, i) => ({ children: Array.from({ length: 24 }, (_, i) => ({
field: `harm${i + 2}`, field: `i${i + 2}`,
title: `${i + 2}` title: `${i + 2}`,
minWidth: 100
})) }))
} }
], ],
resetCallback: () => { // 在请求发送前处理参数
beforeSearchFun: () => {
} tableStore.table.params.pageSize = 100
},
resetCallback: () => {
tableStore.table.params.searchValue = ''
},
}) })
tableStore.table.params.type = 0
provide('tableStore', tableStore) provide('tableStore', tableStore)
onMounted(() => {
// 暴露查询方法给父组件调用
const queryData = () => {
tableStore.index() tableStore.index()
}
defineExpose({
queryData
}) })
</script> </script>

View File

@@ -2,16 +2,14 @@
<div class="default-main"> <div class="default-main">
<TableHeader> <TableHeader>
<template v-slot:select> <template v-slot:select>
<el-form-item label="筛选数据"> <el-form-item label="名称">
<el-input <el-input v-model="tableStore.table.params.searchValue" clearable
v-model="tableStore.table.params.searchValue" placeholder="请输入搜索名称" maxlength="32" show-word-limit/>
placeholder="根据名称,容量查询"
/>
</el-form-item> </el-form-item>
</template> </template>
</TableHeader> </TableHeader>
<Table ref="tableRef" /> <Table ref="tableRef" isGroup/>
</div> </div>
</template> </template>
<script setup lang="tsx"> <script setup lang="tsx">
@@ -23,58 +21,46 @@ import { useDictData } from '@/stores/dictData'
const tableRef = ref() const tableRef = ref()
const tableStore = new TableStore({ const tableStore = new TableStore({
url: '', url: '/supervision-boot/libModel/pageLibModelQuery',
method: 'POST', method: 'POST',
column: [ column: [
// 第一层:主标题(跨列)
{ {
title: '谐波源', title: '谐波源',
width: 300,
children: [ children: [
{ field: 'gdName', title: '名称' }, { field: 'name', title: '名称',minWidth: 200 },
{ field: 'subName', title: '电压等级' }, { field: 'voltage', title: '电压等级',minWidth: 200 },
{ field: 'ip', title: '容量' } { field: 'capacity', title: '容量',minWidth: 200 }
] ]
}, },
{ {
title: '各次谐波电流含量(%', title: '各次谐波电流含量(%',
width: 1800, // 根据实际列数调整 width: 1800,
children: Array.from({ length: 24 }, (_, i) => ({ children: Array.from({ length: 24 }, (_, i) => ({
field: `harm${i + 2}`, field: `i${i + 2}`,
title: `${i + 2}` title: `${i + 2}`,
minWidth: 100
})) }))
} }
], ],
// 在请求发送前处理参数
beforeSearchFun: () => {
tableStore.table.params.pageSize = 100
},
resetCallback: () => {
tableStore.table.params.searchValue = ''
},
}) })
tableStore.table.params.type = 1
provide('tableStore', tableStore) provide('tableStore', tableStore)
const mockData = [ // 暴露查询方法给父组件调用
{ const queryData = () => {
gdName: '变压器A',
subName: '10kV',
ip: '1000kVA',
...Array.from({ length: 24 }, (_, i) => ({ [`harm${i + 2}`]: (Math.random() * 10).toFixed(2) }))
.reduce((acc, cur) => ({ ...acc, ...cur }), {})
},
{
gdName: '电机B',
subName: '35kV',
ip: '2000kVA',
...Array.from({ length: 24 }, (_, i) => ({ [`harm${i + 2}`]: (Math.random() * 10).toFixed(2) }))
.reduce((acc, cur) => ({ ...acc, ...cur }), {})
},
{
gdName: '整流器C',
subName: '110kV',
ip: '5000kVA',
...Array.from({ length: 24 }, (_, i) => ({ [`harm${i + 2}`]: (Math.random() * 10).toFixed(2) }))
.reduce((acc, cur) => ({ ...acc, ...cur }), {})
}
]
onMounted(() => {
tableStore.index() tableStore.index()
}
defineExpose({
queryData
}) })
</script> </script>

View File

@@ -1,11 +1,11 @@
<template> <template>
<div class="default-main"> <div class="default-main">
<el-tabs v-model="activeName" type="border-card"> <el-tabs v-model="activeName" type="border-card" @tab-change="handleTabChange">
<el-tab-pane label="谐波阻抗数据库" name="1"> <el-tab-pane label="谐波阻抗" name="1">
<HarmonicImpedanceTable /> <HarmonicImpedanceTable ref="harmonicImpedanceRef" />
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="谐波源数据库" name="2"> <el-tab-pane label="谐波源" name="2">
<HarmonicSourcesTable /> <HarmonicSourcesTable ref="harmonicSourcesRef" />
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
@@ -22,16 +22,26 @@ defineOptions({
}) })
const activeName = ref('1') const activeName = ref('1')
const layout = mainHeight(63) as any // 获取子组件引用
</script> const harmonicImpedanceRef = ref<InstanceType<typeof HarmonicImpedanceTable>>()
const harmonicSourcesRef = ref<InstanceType<typeof HarmonicSourcesTable>>()
<style lang="scss" scoped> const layout = mainHeight(63) as any
.bars_w {
width: 100%; // 添加 tab 切换处理函数
height: 500px; const handleTabChange = (tabName: string) => {
if (tabName === '1') {
// 调用谐波阻抗数据库查询接口
harmonicImpedanceRef.value?.queryData()
} else if (tabName === '2') {
// 调用谐波源数据库查询接口
harmonicSourcesRef.value?.queryData()
}
} }
:deep(.el-tabs__content) {
height: v-bind('layout.height'); // 组件挂载时初始化数据
overflow-y: auto; onMounted(() => {
} // 默认加载第一个 tab 的数据
</style> handleTabChange(activeName.value)
})
</script>

View File

@@ -65,33 +65,36 @@
</TableHeader> </TableHeader>
<div v-loading="tableStore.table.loading" class="table-container"> <div v-loading="tableStore.table.loading" class="table-container">
<vxe-table
class="full-height-table" <vxe-table
ref="positioningtableRef" class="full-height-table"
auto-resize ref="positioningtableRef"
:data="tableStore.table.data" auto-resize
v-bind="defaultAttribute" :data="tableStore.table.data"
:height="tableHeight" v-bind="defaultAttribute"
> :height="tableHeight"
<vxe-column title="序号" width="80" type="seq" align="center"></vxe-column> resizable
<vxe-column field="gdName" title="供电公司" align="center"></vxe-column> show-overflow
<vxe-column field="subStationName" :show-overflow="true" title="变电站" align="center" width="230"></vxe-column> >
<vxe-column field="devName" title="终端名称" align="center"></vxe-column> <vxe-column title="序号" width="80" type="seq" align="center"></vxe-column>
<vxe-column field="devType" title="终端型号" align="center" width="200"></vxe-column> <vxe-column field="gdName" title="供电公司" align="center" min-width="120"></vxe-column>
<vxe-column field="loginTime" title="投运时间" align="center"></vxe-column> <vxe-column field="subStationName" :show-overflow="true" title="变电站" align="center" min-width="150" width="230"></vxe-column>
<vxe-column field="lineName" title="监测点名称" align="center"></vxe-column> <vxe-column field="devName" title="终端名称" align="center" min-width="120"></vxe-column>
<vxe-column field="powerFlag" title="监测位置" align="center"></vxe-column> <vxe-column field="devType" title="终端型号" align="center" min-width="150" width="200"></vxe-column>
<vxe-column field="lineVoltage" title="监测点电压等级" align="center"></vxe-column> <vxe-column field="loginTime" title="投运时间" align="center" min-width="120"></vxe-column>
<vxe-column field="loadType" title="干扰源类型" align="center"></vxe-column> <vxe-column field="lineName" title="监测点名称" align="center" min-width="150"></vxe-column>
<vxe-column field="objName" title="监测对象名称" align="center" width="200"></vxe-column> <vxe-column field="powerFlag" title="监测位置" align="center" min-width="100"></vxe-column>
<vxe-column field="onlineRate" title="在线率" align="center"></vxe-column> <vxe-column field="lineVoltage" title="监测点电压等级" align="center" min-width="120"></vxe-column>
<vxe-column field="integrity" title="完整率" align="center"></vxe-column> <vxe-column field="loadType" title="干扰源类型" align="center" min-width="120"></vxe-column>
<vxe-column field="harmonicValue" title="谐波电压污染值" align="center"></vxe-column> <vxe-column field="objName" title="监测对象名称" align="center" min-width="150" width="200"></vxe-column>
<vxe-column field="upCounts" title="暂升次数(次)" align="center"></vxe-column> <vxe-column field="onlineRate" title="在线率" align="center" min-width="100"></vxe-column>
<vxe-column field="downCounts" title="电压暂降(次)" align="center"></vxe-column> <vxe-column field="integrity" title="完整率" align="center" min-width="100"></vxe-column>
<vxe-column field="breakCounts" title="短时中断(次)" align="center"></vxe-column> <vxe-column field="harmonicValue" title="谐波电压污染值" align="center" min-width="120"></vxe-column>
<vxe-column field="monitorId" title="一类监测点" align="center" :formatter="formatMonitorId"></vxe-column> <vxe-column field="upCounts" title="暂升次数(次)" align="center" min-width="100"></vxe-column>
</vxe-table> <vxe-column field="downCounts" title="电压暂降(次)" align="center" min-width="100"></vxe-column>
<vxe-column field="breakCounts" title="短时中断(次)" align="center" min-width="100"></vxe-column>
<vxe-column field="monitorId" title="一类监测点" align="center" min-width="120" :formatter="formatMonitorId"></vxe-column>
</vxe-table>
<!-- 修改分页控件 --> <!-- 修改分页控件 -->
<div class="pagination-container"> <div class="pagination-container">
<el-pagination <el-pagination
@@ -373,6 +376,7 @@ onBeforeUnmount(() => {
window.removeEventListener('resize', debouncedCalculateTableHeight) window.removeEventListener('resize', debouncedCalculateTableHeight)
}) })
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.full-height { .full-height {
/* 使用视口高度确保占满整个屏幕 */ /* 使用视口高度确保占满整个屏幕 */