冀北数据总览添加导出功能

This commit is contained in:
guanj
2026-02-06 14:45:15 +08:00
parent 15e3d4aec8
commit bfa061fb03
12 changed files with 2276 additions and 466 deletions

View File

@@ -54,6 +54,9 @@
:value="item"></el-option>
</el-select>
</el-form-item>
<el-form-item label="关键字筛选:">
<el-input v-model="tableStore.table.params.searchValue" clearable placeholder="请输入关键字"></el-input>
</el-form-item>
</template>
<template #operation>
<el-button type="primary" icon="el-icon-Tickets" @click="makeUp" v-if="!VITE_FLAG">补招</el-button>
@@ -285,7 +288,7 @@ const tableStore = new TableStore({
// tableStore.table.params.searchEndTime = tableHeaderRef.value.datePickerRef.timeValue[1]
},
loadCallback: () => {
tableStore.table.data = tree2List(tableStore.table.data, Math.random() * 1000)
tableStore.table.data = tree2List(filterTreeByKeyword( tableStore.table.data,tableStore.table.params.searchValue), Math.random() * 1000)
tableStore.table.column[0].title = formData.value.statisticalType.name
chartsRef.value && chartsRef.value.getTableStoreParams(tableStore.table.params)
@@ -305,6 +308,7 @@ const tableStore = new TableStore({
tableStore.table.params.deptIndex = ''
tableStore.table.params.filterName = ''
tableStore.table.params.searchValue = ''
tableStore.table.params.statisticalType = []
tableStore.table.params.scale = []
tableStore.table.params.manufacturer = []
@@ -339,6 +343,78 @@ const tree2List = (list: any, id?: string) => {
return arr
}
/**
* 树形结构按名称筛选:保留匹配节点+所有上级+所有下级,保持原树形层级
* @param {Array} treeData - 原始嵌套树形数据(根节点数组)
* @param {string} keyword - 筛选关键词name包含该关键词即匹配
* @returns {Array} 筛选后的嵌套树形数据,保持原层级
*/
function filterTreeByKeyword(treeData, keyword) {
// 关键词为空,直接返回原树(深拷贝,避免修改原数据)
if (!keyword || keyword.trim() === '') {
return JSON.parse(JSON.stringify(treeData));
}
const targetKey = keyword.trim();
// 存储需要保留的节点ID匹配节点+所有上级+所有下级)
const keepIdSet = new Set();
// 第一步递归遍历树形标记所有需要保留的节点ID
const markKeepNodes = (node, parentNodes = []) => {
// 1. 若当前节点名称包含关键词,标记自身+所有上级+所有下级
const isMatch = node.name && node.name.includes(targetKey);
if (isMatch) {
// 标记自身
keepIdSet.add(node.id);
// 标记所有上级父节点
parentNodes.forEach(pNode => keepIdSet.add(pNode.id));
// 标记所有下级子节点(递归)
const markChildren = (childNode) => {
keepIdSet.add(childNode.id);
if (childNode.children && childNode.children.length) {
childNode.children.forEach(markChildren);
}
};
if (node.children && node.children.length) {
node.children.forEach(markChildren);
}
}
// 2. 递归遍历子节点传递当前节点的上级链parentNodes + 当前节点)
if (node.children && node.children.length) {
node.children.forEach(child => markKeepNodes(child, [...parentNodes, node]));
}
};
// 遍历根节点,开始标记
treeData.forEach(rootNode => markKeepNodes(rootNode));
// 第二步:递归重构树形,只保留标记过的节点,保持层级
const rebuildTree = (node) => {
// 若当前节点无需保留直接返回null
if (!keepIdSet.has(node.id)) {
return null;
}
// 深拷贝当前节点,避免修改原数据
const newNode = { ...node };
// 递归处理子节点,过滤掉无需保留的,只保留有效子节点
if (newNode.children && newNode.children.length) {
const newChildren = newNode.children.map(child => rebuildTree(child)).filter(Boolean);
newNode.children = newChildren;
} else {
newNode.children = [];
}
return newNode;
};
// 重构根节点过滤掉null的根节点
const filteredTree = treeData.map(rootNode => rebuildTree(rootNode)).filter(Boolean);
return filteredTree;
}
// 禁用超过当前日期的选择
const disabledDate = (date: Date) => {
return date > new Date() // 如果日期大于当前日期,则禁用

View File

@@ -102,6 +102,13 @@
></el-option>
</el-select>
</el-form-item>
<el-form-item label="关键字筛选:">
<el-input
v-model="tableStore.table.params.searchValue"
clearable
placeholder="请输入关键字"
></el-input>
</el-form-item>
</template>
</TableHeader>
</div>
@@ -132,7 +139,6 @@ import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import charts from './components/charts.vue'
defineOptions({
name: 'device-boot/getOnlineRateData'
})
@@ -153,7 +159,6 @@ const treeData = ref([])
const idArr = ref([])
const activeName = ref(0)
const getTreeData = async () => {
await getAreaDept().then(res => {
var data = res.data
data.forEach(element => {
@@ -205,7 +210,8 @@ const tableStore = new TableStore({
{
title: '网络参数',
field: 'ip',
align: 'center' ,width:'120px',
align: 'center',
width: '120px',
formatter: function (row) {
return row.cellValue ? row.cellValue : '/'
}
@@ -257,7 +263,7 @@ const tableStore = new TableStore({
formatter: function (row) {
return row.cellValue == 3.14159 ? '暂无数据' : row.cellValue.toFixed(2)
}
},
}
// {
// title: '评估',
// field: 'valueOver',
@@ -299,23 +305,26 @@ const tableStore = new TableStore({
// let treeData = []
// treeData = tree2List(tableStore.table.data)
// tableStore.table.data = JSON.parse(JSON.stringify(treeData))
tableStore.table.data = tree2List(tableStore.table.data, Math.random() * 1000)
tableStore.table.data = tree2List(
filterTreeByKeyword(tableStore.table.data, tableStore.table.params.searchValue),
Math.random() * 1000
)
chartsRef.value && chartsRef.value.getTableStoreParams(tableStore.table.params)
setTimeout(() => {
activeName.value == 0 && tableRef.value && tableRef.value.getRef().setAllTreeExpand(true)
}, 0)
},
resetCallback: () => {
resetCallback: () => {
// 重置表单数据到默认值
formData.value.statisticalType = classificationData[0]
formData.value.deptIndex = treeData.value[0]?.id
formData.value.scale = voltageleveloption
formData.value.manufacturer = terminaloption
formData.value.loadType = interfereoption
formData.value.loadType = interfereoption
}
})
tableStore.table.params.searchValue = ''
tableStore.table.params.deptIndex = ''
tableStore.table.params.statisticalType = []
tableStore.table.params.scale = []
@@ -342,7 +351,73 @@ const tree2List = (list: any, id?: string) => {
})
// 返回结果数组
return arr
}
/**
* 树形结构按名称筛选:保留匹配节点+所有上级+所有下级,保持原树形层级
* @param {Array} treeData - 原始嵌套树形数据(根节点数组)
* @param {string} keyword - 筛选关键词name包含该关键词即匹配
* @returns {Array} 筛选后的嵌套树形数据,保持原层级
*/
function filterTreeByKeyword(treeData, keyword) {
// 关键词为空,直接返回原树(深拷贝,避免修改原数据)
if (!keyword || keyword.trim() === '') {
return JSON.parse(JSON.stringify(treeData))
}
const targetKey = keyword.trim()
// 存储需要保留的节点ID匹配节点+所有上级+所有下级)
const keepIdSet = new Set()
// 第一步递归遍历树形标记所有需要保留的节点ID
const markKeepNodes = (node, parentNodes = []) => {
// 1. 若当前节点名称包含关键词,标记自身+所有上级+所有下级
const isMatch = node.name && node.name.includes(targetKey)
if (isMatch) {
// 标记自身
keepIdSet.add(node.id)
// 标记所有上级父节点
parentNodes.forEach(pNode => keepIdSet.add(pNode.id))
// 标记所有下级子节点(递归)
const markChildren = childNode => {
keepIdSet.add(childNode.id)
if (childNode.children && childNode.children.length) {
childNode.children.forEach(markChildren)
}
}
if (node.children && node.children.length) {
node.children.forEach(markChildren)
}
}
// 2. 递归遍历子节点传递当前节点的上级链parentNodes + 当前节点)
if (node.children && node.children.length) {
node.children.forEach(child => markKeepNodes(child, [...parentNodes, node]))
}
}
// 遍历根节点,开始标记
treeData.forEach(rootNode => markKeepNodes(rootNode))
// 第二步:递归重构树形,只保留标记过的节点,保持层级
const rebuildTree = node => {
// 若当前节点无需保留直接返回null
if (!keepIdSet.has(node.id)) {
return null
}
// 深拷贝当前节点,避免修改原数据
const newNode = { ...node }
// 递归处理子节点,过滤掉无需保留的,只保留有效子节点
if (newNode.children && newNode.children.length) {
const newChildren = newNode.children.map(child => rebuildTree(child)).filter(Boolean)
newNode.children = newChildren
} else {
newNode.children = []
}
return newNode
}
// 重构根节点过滤掉null的根节点
const filteredTree = treeData.map(rootNode => rebuildTree(rootNode)).filter(Boolean)
return filteredTree
}
onMounted(() => {})

View File

@@ -11,7 +11,9 @@
></DatePicker>
</el-form-item>
</template>
<template v-slot:operation></template>
<template v-slot:operation>
<el-button type="primary" icon="el-icon-Download" @click="exportTemplate">导出</el-button>
</template>
</TableHeader>
<GridLayout
@@ -68,9 +70,12 @@ import { useRouter, useRoute } from 'vue-router'
import { View } from '@element-plus/icons-vue'
import { useTimeCacheStore } from '@/stores/timeCache'
import { adminBaseRoutePath } from '@/router/static'
import { useAdminInfo } from '@/stores/adminInfo'
import { dataVerifyExcel } from '@/api/device-boot/line'
const { push } = useRouter()
const datePickerRef = ref()
const router = useRouter()
const adminInfo = useAdminInfo()
const route = useRoute()
const timeCacheStore = useTimeCacheStore()
@@ -288,7 +293,29 @@ const fetchLayoutData = async () => {
// 可以添加错误提示逻辑
}
}
// 导出
const exportTemplate = () => {
console.log(123)
dataVerifyExcel({
deptId: adminInfo.$state.deptId,
searchBeginTime: datePickerRef.value?.timeValue[0],
searchEndTime: datePickerRef.value?.timeValue[1]
}).then((res: any) => {
let blob = new Blob([res], {
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
})
const url = window.URL.createObjectURL(blob)
const link = document.createElement('a') // 创建a标签
link.href = url
// link.download = "电压暂降事件分析报告"; // 设置下载的文件名
link.download = '数据总览' // 设置下载的文件名
document.body.appendChild(link)
link.click() //执行下载
document.body.removeChild(link)
})
}
// 窗口大小变化处理 - 使用防抖
const handleResize = useDebounceFn(() => {
initRowHeight()