Web/admin-sjzx
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

修改冀北问题

Browse Source
This commit is contained in:
guanj
2025-12-09 20:04:55 +08:00
parent 8c41a8fc77
commit 0fe2d2b911
49 changed files with 6357 additions and 5917 deletions
Download Patch File Download Diff File Expand all files Collapse all files

432
src/views/pqs/harmonicMonitoring/embed/onlinerate/components/table.vue
View File

@@ -1,216 +1,216 @@
<template>
<TableHeader area datePicker ref="TableHeaderRef">
<template #select>
<el-form-item label="筛选">
<el-input v-model="tableStore.table.params.filterName" @keyup="searchEvent" placeholder="输入关键字筛选" />
</el-form-item>
<el-form-item label="统计类型:">
<el-select v-model="tableStore.table.params.statisticalType" value-key="id" placeholder="请选择统计类型">
<el-option v-for="item in classificationData" :key="item.id" :label="item.name"
:value="item"></el-option>
</el-select>
</el-form-item>
<el-form-item label="电压等级:">
<el-select v-model="tableStore.table.params.scale" multiple collapse-tags clearable value-key="id"
placeholder="请选择电压等级">
<el-option v-for="item in voltageleveloption" :key="item.id" :label="item.name"
:value="item"></el-option>
</el-select>
</el-form-item>
<el-form-item label="终端厂家:">
<el-select v-model="tableStore.table.params.manufacturer" multiple collapse-tags clearable
value-key="id" placeholder="请选择终端厂家">
<el-option v-for="item in terminaloption" :key="item.id" :label="item.name"
:value="item"></el-option>
</el-select>
</el-form-item>
<el-form-item label="干扰源类型:">
<el-select v-model="tableStore.table.params.loadType" multiple collapse-tags clearable value-key="id"
placeholder="请选择干扰源类型">
<el-option v-for="item in interfereoption" :key="item.id" :label="item.name"
:value="item"></el-option>
</el-select>
</el-form-item>
</template>
</TableHeader>
<Table ref="tableRef" :tree-config="{ transform: true, parentField: 'uPid', rowField: 'uId' }"
:scroll-y="{ enabled: true }" :key="num" />
</template>
<script setup lang="ts">
import { ref, onMounted, provide, nextTick } from 'vue'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import { useDictData } from '@/stores/dictData'
import { debounce } from 'lodash-es'
import XEUtils from 'xe-utils'
const dictData = useDictData()
const tableRef = ref()
const num = ref(0)
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 treeDataCopy: any = ref([])
const treeData: any = ref([])
const TableHeaderRef = ref()
const tableStore = new TableStore({
url: '/device-boot/terminalOnlineRateData/getOnlineRateData',
publicHeight: 65,
showPage: false,
method: 'POST',
column: [
{ field: 'name', title: '电网拓扑', width: 350, align: 'left', treeNode: true },
{
field: 'ip',
title: '网络参数',
formatter: ({ row }: any) => {
return row.ip || '/'
}
},
{
field: 'dataName',
title: '终端名称',
formatter: ({ row }: any) => {
return row.dataName || '/'
}
},
{
field: 'manufacturer',
title: '厂家',
formatter: ({ row }: any) => {
return row.manufacturer || '/'
}
},
{
field: 'comFlag',
title: '通讯状态',
render: 'tag',
custom: {
0: 'danger',
1: 'success',
3: 'info'
},
replaceValue: {
0: '中断',
1: '正常',
3: '/'
}
// formatter: ({ row }: any) => {
// return row.comFlag || '/'
// }
},
{
field: 'updateTime',
title: '最新数据时间',
formatter: ({ row }: any) => {
return row.updateTime || '/'
}
},
{
field: 'onlineRate',
title: '在线率(%)',
formatter: ({ row }: any) => {
return row.onlineRate == 3.14159 ? '暂无数据' : row.onlineRate.toFixed(2)
}
},
{
field: 'assess',
title: '评估',
render: 'tag',
custom: {
0: 'info',
1: 'danger',
2: 'warning',
3: 'success'
},
replaceValue: {
0: '暂无数据',
1: '不合格',
2: '合格',
3: '优秀'
}
}
],
beforeSearchFun: () => {
tableStore.options.column[0].title = tableStore.table.params.statisticalType.name
},
loadCallback: () => {
setTimeout(() => {
tableRef.value.getRef().setAllTreeExpand(true)
}, 1000)
treeData.value = tree2List(tableStore.table.data, Math.random() * 1000)
treeDataCopy.value = JSON.parse(JSON.stringify(treeData.value))
tableStore.table.data = treeData.value
tableStore.table.params.filterName=''
searchEvent()
}
})
tableStore.table.params.statisticalType = classificationData.filter(item => item.name == '电网拓扑')[0]
tableStore.table.params.monitorFlag = 2
tableStore.table.params.powerFlag = 2
tableStore.table.params.serverName = 'harmonicBoot'
provide('tableStore', tableStore)
const tree2List = (list: any, id: any) => {
//存储结果的数组
let arr: any = []
// 遍历 tree 数组
list.forEach((item: any) => {
item.uPid = id
item.uId = (Math.random() * 1000)
item.comFlag = item.comFlag == null ? 3 : item.comFlag
item.assess = item.onlineRate == 3.14159 ? 0 : item.onlineRate < 60 ? 1 : item.onlineRate < 90 ? 2 : 3
// 判断item是否存在children
if (!item.children) return arr.push(item)
// 函数递归，对children数组进行tree2List的转换
const children = tree2List(item.children, item.uId)
// 删除item的children属性
delete item.children
// 把item和children数组添加至结果数组
//..children: 意思是把children数组展开
arr.push(item, ...children)
})
// 返回结果数组
return arr
}
// 表格过滤
const searchEvent = debounce(() => {
const filterVal = XEUtils.toValueString(tableStore.table.params.filterName).trim().toLowerCase()
if (filterVal) {
const options = { children: 'children' }
const searchProps = ['name']
const rest = XEUtils.searchTree(
treeDataCopy.value,
(item: any) => searchProps.some(key => String(item[key]).toLowerCase().indexOf(filterVal) > -1),
options
)
console.log("🚀 ~ searchEvent ~ rest:", rest)
tableStore.table.data = rest
// 搜索之后默认展开所有子节点
} else {
tableStore.table.data = treeDataCopy.value
}
nextTick(() => {
const $table = tableRef.value.getRef()
if ($table) {
$table.setAllTreeExpand(true)
}
})
}, 500)
onMounted(() => {
tableStore.index()
})
</script>
<style scoped lang="scss"></style>
<template>
<TableHeader area datePicker ref="TableHeaderRef">
<template #select>
<el-form-item label="筛选数据">
<el-input v-model="tableStore.table.params.filterName" @keyup="searchEvent" placeholder="输入关键字筛选" />
</el-form-item>
<el-form-item label="统计类型:">
<el-select v-model="tableStore.table.params.statisticalType" value-key="id" placeholder="请选择统计类型">
<el-option v-for="item in classificationData" :key="item.id" :label="item.name"
:value="item"></el-option>
</el-select>
</el-form-item>
<el-form-item label="电压等级:">
<el-select v-model="tableStore.table.params.scale" multiple collapse-tags clearable value-key="id"
placeholder="请选择电压等级">
<el-option v-for="item in voltageleveloption" :key="item.id" :label="item.name"
:value="item"></el-option>
</el-select>
</el-form-item>
<el-form-item label="终端厂家:">
<el-select v-model="tableStore.table.params.manufacturer" multiple collapse-tags clearable
value-key="id" placeholder="请选择终端厂家">
<el-option v-for="item in terminaloption" :key="item.id" :label="item.name"
:value="item"></el-option>
</el-select>
</el-form-item>
<el-form-item label="干扰源类型:">
<el-select v-model="tableStore.table.params.loadType" multiple collapse-tags clearable value-key="id"
placeholder="请选择干扰源类型">
<el-option v-for="item in interfereoption" :key="item.id" :label="item.name"
:value="item"></el-option>
</el-select>
</el-form-item>
</template>
</TableHeader>
<Table ref="tableRef" :tree-config="{ transform: true, parentField: 'uPid', rowField: 'uId' }"
:scroll-y="{ enabled: true }" :key="num" />
</template>
<script setup lang="ts">
import { ref, onMounted, provide, nextTick } from 'vue'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import { useDictData } from '@/stores/dictData'
import { debounce } from 'lodash-es'
import XEUtils from 'xe-utils'
const dictData = useDictData()
const tableRef = ref()
const num = ref(0)
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 treeDataCopy: any = ref([])
const treeData: any = ref([])
const TableHeaderRef = ref()
const tableStore = new TableStore({
url: '/device-boot/terminalOnlineRateData/getOnlineRateData',
publicHeight: 65,
showPage: false,
method: 'POST',
column: [
{ field: 'name', title: '电网拓扑', width: 350, align: 'left', treeNode: true },
{
field: 'ip',
title: '网络参数',
formatter: ({ row }: any) => {
return row.ip || '/'
}
},
{
field: 'dataName',
title: '终端名称',
formatter: ({ row }: any) => {
return row.dataName || '/'
}
},
{
field: 'manufacturer',
title: '厂家',
formatter: ({ row }: any) => {
return row.manufacturer || '/'
}
},
{
field: 'comFlag',
title: '通讯状态',
render: 'tag',
custom: {
0: 'danger',
1: 'success',
3: 'info'
},
replaceValue: {
0: '中断',
1: '正常',
3: '/'
}
// formatter: ({ row }: any) => {
// return row.comFlag || '/'
// }
},
{
field: 'updateTime',
title: '最新数据时间',
formatter: ({ row }: any) => {
return row.updateTime || '/'
}
},
{
field: 'onlineRate',
title: '在线率(%)',
formatter: ({ row }: any) => {
return row.onlineRate == 3.14159 ? '暂无数据' : row.onlineRate.toFixed(2)
}
},
{
field: 'assess',
title: '评估',
render: 'tag',
custom: {
0: 'info',
1: 'danger',
2: 'warning',
3: 'success'
},
replaceValue: {
0: '暂无数据',
1: '不合格',
2: '合格',
3: '优秀'
}
}
],
beforeSearchFun: () => {
tableStore.options.column[0].title = tableStore.table.params.statisticalType.name
},
loadCallback: () => {
setTimeout(() => {
tableRef.value.getRef().setAllTreeExpand(true)
}, 1000)
treeData.value = tree2List(tableStore.table.data, Math.random() * 1000)
treeDataCopy.value = JSON.parse(JSON.stringify(treeData.value))
tableStore.table.data = treeData.value
tableStore.table.params.filterName=''
searchEvent()
}
})
tableStore.table.params.statisticalType = classificationData.filter(item => item.name == '电网拓扑')[0]
tableStore.table.params.monitorFlag = 2
tableStore.table.params.powerFlag = 2
tableStore.table.params.serverName = 'harmonicBoot'
provide('tableStore', tableStore)
const tree2List = (list: any, id: any) => {
//存储结果的数组
let arr: any = []
// 遍历 tree 数组
list.forEach((item: any) => {
item.uPid = id
item.uId = (Math.random() * 1000)
item.comFlag = item.comFlag == null ? 3 : item.comFlag
item.assess = item.onlineRate == 3.14159 ? 0 : item.onlineRate < 60 ? 1 : item.onlineRate < 90 ? 2 : 3
// 判断item是否存在children
if (!item.children) return arr.push(item)
// 函数递归，对children数组进行tree2List的转换
const children = tree2List(item.children, item.uId)
// 删除item的children属性
delete item.children
// 把item和children数组添加至结果数组
//..children: 意思是把children数组展开
arr.push(item, ...children)
})
// 返回结果数组
return arr
}
// 表格过滤
const searchEvent = debounce(() => {
const filterVal = XEUtils.toValueString(tableStore.table.params.filterName).trim().toLowerCase()
if (filterVal) {
const options = { children: 'children' }
const searchProps = ['name']
const rest = XEUtils.searchTree(
treeDataCopy.value,
(item: any) => searchProps.some(key => String(item[key]).toLowerCase().indexOf(filterVal) > -1),
options
)
console.log("🚀 ~ searchEvent ~ rest:", rest)
tableStore.table.data = rest
// 搜索之后默认展开所有子节点
} else {
tableStore.table.data = treeDataCopy.value
}
nextTick(() => {
const $table = tableRef.value.getRef()
if ($table) {
$table.setAllTreeExpand(true)
}
})
}, 500)
onMounted(() => {
tableStore.index()
})
</script>
<style scoped lang="scss"></style>