全局添加导出表格配置

This commit is contained in:
GGJ
2024-12-27 08:47:47 +08:00
parent 1f94ac5267
commit 0994a52699
28 changed files with 3264 additions and 200 deletions

View File

@@ -1,7 +1,7 @@
<template>
<div class="default-main">
<TableHeader area>
<TableHeader area showExport>
<template #select>
<!-- <el-form-item label="统计类型:">
<el-select v-model="tableStore.table.params.statisticalType" placeholder="请选择统计类型" value-key="id">
@@ -99,8 +99,8 @@ const tableStore = new TableStore({
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
}
},
{ field: 'areaName', title: '区域' },
{ field: 'gdName', title: '地级区' },
{ field: 'areaName', title: '区域',minWidth: 100 },
{ field: 'gdName', title: '地级区' ,minWidth: 100},
{
field: 'bdName',
title: '供电公司',
@@ -114,7 +114,19 @@ const tableStore = new TableStore({
{ field: 'devName', title: '终端名称', minWidth: 80 },
{ field: 'ip', title: '网络参数' , minWidth: 100},
{ field: 'lineName', title: '监测点名称' , minWidth: 100},
{ field: 'comFlag', title: '通讯状态' , minWidth: 100},
// { field: 'comFlag', title: '通讯状态' , minWidth: 100},
{
field: 'comFlag',
title: '通讯状态',
render: 'tag',
effect: 'dark',
custom: {
'正常': 'success',
'中断': 'danger',
},
},
{ field: 'loadType', title: '干扰源类型' , minWidth: 100},

View File

@@ -3,8 +3,8 @@
<TableHeader area>
<template #select>
<el-form-item label="监测点性质:">
<el-select v-model="tableStore.table.params.powerFlag" filterable multiple collapse-tags clearable
<el-form-item label="监测点性质:">
<el-select v-model="tableStore.table.params.powerFlag" filterable collapse-tags
placeholder="请选择监测点性质">
<el-option v-for="item in terminalstatus" :key="item.value" :label="item.label"
:value="item.value">
@@ -18,7 +18,7 @@
</el-option>
</el-select>
</el-form-item>
<el-form-item label="终端厂家:">
<el-select v-model="tableStore.table.params.manufacturer" filterable multiple collapse-tags
clearable placeholder="请选择终端厂家" value-key="id">
@@ -38,7 +38,7 @@
<el-form-item label="上报类型:">
<el-select v-model="tableStore.table.params.monitorFlag" filterable multiple collapse-tags clearable
<el-select v-model="tableStore.table.params.monitorFlag"
placeholder="请选择上报类型">
<el-option v-for="item in communicationstatus" :key="item.value" :label="item.label"
:value="item.value">
@@ -50,7 +50,36 @@
</template>
</TableHeader>
<Table ref="tableRef" />
<div :style="{ height: tableStore.table.height }" v-loading="tableStore.table.loading">
<vxe-table height="auto" auto-resize v-bind="defaultAttribute" :stripe='false' :scroll-y="{ enabled: false }"
:span-method="rowspanMethod" :data="tableData">
<vxe-column field="name1" title="区域">
</vxe-column>
<vxe-column field="name2" title="类型">
</vxe-column>
<vxe-column field="name3" title="分类型">
<template #default="{ row }">
<span>{{ Number.isFinite(row.name3-0)? row.name3+'kV':row.name3}}</span>
</template>
</vxe-column>
<vxe-column field="subCount" title="变电站个数(个)">
<template #default="{ row }">
<span style="color: blue">{{ row.subCount }}</span>
</template>
</vxe-column>
<vxe-column field="devCount" title="终端个数(个)">
<template #default="{ row }">
<span style="color: #006699">{{ row.devCount }}</span>
</template>
</vxe-column>
<vxe-column field="lineCount" title="监测点个数(个)">
<template #default="{ row }">
<span style="color: green">{{ row.lineCount }}</span>
</template>
</vxe-column>
</vxe-table>
</div>
@@ -62,17 +91,23 @@ import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import { useDictData } from '@/stores/dictData'
import TableHeader from '@/components/table/header/index.vue'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import type { VxeTablePropTypes } from 'vxe-table'
import XEUtils from 'xe-utils'
const dictData = useDictData()
defineOptions({
name: 'harmonic-boot/run/devicemessage'
name: 'harmonic-boot/run/terminalconts'
})
const view = ref(true)
const treeData: any = ref([])
const treeDataCopy: any = ref([])
const classificationData = dictData.getBasicData('Statistical_Type', ["Report_Type"])
const voltageleveloption = dictData.getBasicData('Dev_Voltage_Stand')
const terminaloption = dictData.getBasicData('Dev_Manufacturers')
const interfereoption = dictData.getBasicData('Interference_Source')
//上报类型
const communicationstatus = [
{ value: 2, label: "全部" },
{ value: 1, label: "灿能上报" },
{ value: 0, label: "非灿能上报" },
@@ -88,7 +123,7 @@ const terminalstatus = [
const tableStore = new TableStore({
url: '/device-boot/runManage/getTerminalLedger',
method: 'POST',
isWebPaging: true,
showPage: false,
column: [
{
field: 'index',
@@ -99,42 +134,108 @@ const tableStore = new TableStore({
}
},
{ field: 'areaName', title: '区域' },
{ field: 'gdName', title: '地级区' },
{
field: 'bdName',
title: '供电公司',
minWidth: 100
},
{ field: 'objName', title: '监测点对象名称', minWidth: 240 },
{ field: 'manufacturer', title: '厂家', minWidth: 100 },
{ field: 'scale', title: '电压等级', minWidth: 100 },
{ field: 'businessType', title: '行业类型', minWidth: 100 },
{ field: 'devName', title: '终端名称', minWidth: 80 },
{ field: 'ip', title: '网络参数', minWidth: 100 },
{ field: 'lineName', title: '监测点名称', minWidth: 100 },
{ field: 'loadType', title: '干扰源类型', minWidth: 100 },
{ field: 'gdName', title: '类型' },
{ field: 'flx', title: '分类型' },
{ field: 'gdName', title: '变电站个数(个)' },
{ field: 'gdName', title: '终端个数(个)' },
{ field: 'gdName', title: '监测点个数(个)' },
],
loadCallback: () => {
tableStore.table.data.map((item: any) => {
item.onlineEvaluate == 3.14159 ? item.onlineEvaluate = '/' : item.onlineEvaluate <= 0.6 ? item.onlineEvaluate = '差' : item.onlineEvaluate <= 0.9 ? item.onlineEvaluate = '良' : item.onlineEvaluate <= 1 ? item.onlineEvaluate = '优' : '/'
})
treeData.value = tree2List(tableStore.table.data, Math.random() * 1000)
toColTreeData(XEUtils.toArrayTree(JSON.parse(JSON.stringify(treeData.value))))
}
})
tableStore.table.params.statisticalType = classificationData[0]
tableStore.table.params.serverName = "harmonic-boot"
tableStore.table.params.monitorFlag = 2
tableStore.table.params.powerFlag = '2'
tableStore.table.params.evaluate = ''
tableStore.table.params.powerFlag = 2
tableStore.table.params.evaluate = ''
tableStore.table.params.scale = voltageleveloption
tableStore.table.params.manufacturer = terminaloption
tableStore.table.params.loadType = interfereoption
// 处理大数据卡顿
const tree2List = (list: any, id: any) => {
//存储结果的数组
let arr: any = []
// 遍历 tree 数组
list.forEach((item: any) => {
item.parentId = id
item.id = (Math.random() * 1000)
// 判断item是否存在children
if (!item.list) return arr.push(item)
// 函数递归对list数组进行tree2List的转换
const list = tree2List(item.list, item.id)
// 删除item的list属性
delete item.list
// 把item和list数组添加至结果数组
//..list: 意思是把list数组展开
arr.push(item, ...list)
})
// 返回结果数组
return arr
}
const toColTreeData = (treeData: any[]) => {
const options = { children: 'children' }
const list: any[] = []
const keyMap: any = {}
XEUtils.eachTree(treeData, (item, index, result, paths, parent) => {
keyMap[item.id] = item
item.keys = parent ? parent.keys.concat([item.id]) : [item.id]
if (!item.children || !item.children.length) {
const row: any = {}
// console.log("🚀 ~ item.keys.forEach ~ item:", item)
item.keys.forEach((key: any, index: number) => {
const level = index + 1
const obj = keyMap[key]
row[`id${level}`] = obj.id
row[`name${level}`] = obj.areaName || obj.name || obj.dicName
row[`subCount`] = obj.subCount
row[`devCount`] = obj.devCount
row[`lineCount`] = obj.lineCount
})
list.push(row)
}
}, options)
tableData.value = list
}
const tableData: any = ref([])
// 通用行合并函数(将相同多列数据合并为一行)
const rowspanMethod: VxeTablePropTypes.SpanMethod = ({ row, _rowIndex, column, visibleData }) => {
// console.log("🚀 ~ row:", row)
const fields = ['name1', 'name2', 'name3', 'name4', 'name5', 'name6']
const cellValue = row[column.field]
// console.log("🚀 ~ cellValue:", cellValue)
if (cellValue && fields.includes(column.field)) {
const prevRow = visibleData[_rowIndex - 1]
let nextRow = visibleData[_rowIndex + 1]
if (prevRow && prevRow[column.field] === cellValue) {
return { rowspan: 0, colspan: 0 }
} else {
let countRowspan = 1
while (nextRow && nextRow[column.field] === cellValue) {
nextRow = visibleData[++countRowspan + _rowIndex]
}
if (countRowspan > 1) {
return { rowspan: countRowspan, colspan: 1 }
}
}
}
}
tableStore.table.params.scale = []
tableStore.table.params.manufacturer = []
tableStore.table.params.loadType = []
const wp = ref({})
provide('tableStore', tableStore)
onMounted(() => {

File diff suppressed because it is too large Load Diff

View File

@@ -1,7 +1,7 @@
<template>
<div class="default-main">
<TableHeader area>
<TableHeader area showExport>
<template #select>
<!-- <el-form-item label="统计类型:">
<el-select v-model="tableStore.table.params.statisticalType" placeholder="请选择统计类型" value-key="id">
@@ -100,8 +100,8 @@ const tableStore = new TableStore({
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
}
},
{ field: 'areaName', title: '区域' },
{ field: 'gdName', title: '地级区' },
{ field: 'areaName', title: '区域', minWidth: 100},
{ field: 'gdName', title: '地级区' ,minWidth: 100},
{
field: 'bdName',
title: '供电公司',