全局添加列配置功能

This commit is contained in:
guanj
2026-07-09 15:42:58 +08:00
parent 2106e2e9c1
commit e6313ca8c3
78 changed files with 7849 additions and 7549 deletions

View File

@@ -1,26 +1,38 @@
<template>
<TableHeader datePicker ref="refheader" showExport>
<TableHeader datePicker ref="refheader" showCustomColumn showExport>
<template v-slot:select>
<!-- <el-form-item label="数据来源">
<el-cascader
v-model.trim="tableStore.table.params.cascader"
filterable
placeholder="请选择数据来源"
@change="sourceChange"
:options="deviceTreeOptions"
:show-all-levels="false"
:props="{ checkStrictly: true, value: 'id', label: 'name' }"
<!-- <el-form-item label="设备选取">
<el-tree-select
v-model="tableStore.table.params.cascader"
:data="deviceTreeOptions"
clearable
></el-cascader>
:props="treeProps"
filterable
:filter-node-method="filterNode"
check-strictly
default-expand-all
placeholder="请选择需要筛选的数据"
style="width: 100%"
></el-tree-select>
</el-form-item> -->
<el-form-item label="关键字筛选">
<el-input maxlength="32" show-word-limit style="width: 240px"
v-model.trim="tableStore.table.params.searchValue" clearable placeholder="请输入设备名称/告警代码" />
<el-input
maxlength="32"
show-word-limit
style="width: 240px"
v-model.trim="tableStore.table.params.searchValue"
clearable
placeholder="请输入设备名称/告警代码"
/>
</el-form-item>
<el-form-item label="级别">
<el-select v-model.trim="tableStore.table.params.level" placeholder="请选择级别" clearable>
<el-option v-for="item in rankOptions" :key="item.value" :label="item.label"
:value="item.value"></el-option>
<el-option
v-for="item in rankOptions"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
</template>
@@ -35,25 +47,13 @@ import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import { mainHeight } from '@/utils/layout'
import { createTreeFilterNode } from '@/components/tree/govern/treeFilterUtils'
const props = defineProps(['deviceTree'])
const refheader = ref()
const deviceTree = ref([])
const tabsList = ref([
{
label: '设备告警',
name: 3
},
{
label: '稳态越限告警',
name: 1
},
{
label: '暂态事件',
name: 0
}
])
const treeProps = {
value: 'id',
label: 'name',
children: 'children'
}
const rankOptions = ref([
{
value: '1',
@@ -66,7 +66,7 @@ const rankOptions = ref([
{
value: '3',
label: '3级'
},
}
// {
// value: '4',
// label: 'DEBUG'
@@ -100,7 +100,11 @@ const tableStore = new TableStore({
},
{ title: '发生时刻', field: 'startTime', align: 'center', minWidth: 180, sortable: true },
{
title: '监测点名称', field: 'lineName', minWidth: 150, align: 'center', formatter: (row: any) => {
title: '监测点名称',
field: 'lineName',
minWidth: 150,
align: 'center',
formatter: (row: any) => {
return row.cellValue ? row.cellValue : '/'
}
},
@@ -109,7 +113,6 @@ const tableStore = new TableStore({
{ title: '工程名称', field: 'engineeringName', align: 'center', minWidth: 150 },
// { title: '监测点名称', field: 'lineName', align: 'center', minWidth: 120 },
{
title: '事件描述',
minWidth: 300,
@@ -169,23 +172,23 @@ const tableStore = new TableStore({
// }
// }
],
beforeSearchFun: () => { },
beforeSearchFun: () => {},
exportProcessingData: () => {
tableStore.table.allData = tableStore.table.allData.filter(item => {
item.level =
item.level == 1
? '1级'
: item.level == 2
? '2级'
: item.level == 3
? '3级'
: item.level == 4
? 'DEBUG'
: item.level == 5
? 'NORMAL'
: item.level == 6
? 'WARN'
: 'ERROR'
? '2级'
: item.level == 3
? '3级'
: item.level == 4
? 'DEBUG'
: item.level == 5
? 'NORMAL'
: item.level == 6
? 'WARN'
: 'ERROR'
return item
})
}
@@ -214,6 +217,7 @@ deviceTreeOptions.value.map((item: any, index: any) => {
deviceTreeOptions.value.splice(index, 1)
}
})
const filterNode = createTreeFilterNode()
const sourceChange = (e: any) => {
tableStore.table.params.deviceTypeId = ''
tableStore.table.params.engineeringid = ''
@@ -242,6 +246,6 @@ onMounted(() => {
setTimeout(() => {
// tableStore.table.height = mainHeight(200).height as any
}, 0)
const addMenu = () => { }
const addMenu = () => {}
</script>
<style></style>

View File

@@ -1,5 +1,5 @@
<template>
<TableHeader datePicker ref="refheader" showExport>
<TableHeader datePicker ref="refheader" showCustomColumn showExport>
<template v-slot:select>
<el-form-item label="关键字筛选">
<el-input maxlength="32" show-word-limit
@@ -20,7 +20,7 @@
</template>
</TableHeader>
<!-- <div style="height: 300px;"> -->
<Table ref="tableRef" :isGroup="true" />
<Table ref="tableRef" :isGroup="true" />
<!-- </div> -->
</template>
<script setup lang="ts">
@@ -76,10 +76,10 @@ const tableStore = new TableStore({
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
}
},
{ title: '发生时刻', field: 'startTime', align: 'center', width: 180, sortable: true },
{ title: '服务器名称', field: 'lineId', align: 'center', width: 150 },
{ title: 'IP', field: 'wavePath', align: 'center', width: 150 },
{ title: '进程号', field: 'clDid', align: 'center', width: 70 },
{ title: '发生时刻', field: 'startTime', align: 'center', minWidth: 180, sortable: true },
{ title: '服务器名称', field: 'lineId', align: 'center', minWidth: 150 },
{ title: 'IP', field: 'wavePath', align: 'center', minWidth: 150 },
{ title: '进程号', field: 'clDid', align: 'center', minWidth: 70 },
{
title: '事件描述',

View File

@@ -1,11 +1,22 @@
<template>
<TableHeader datePicker ref="refheader" showExport>
<TableHeader datePicker ref="refheader" showCustomColumn showExport>
<template v-slot:select>
<!-- <el-form-item label="数据来源">
<el-cascader v-model.trim="tableStore.table.params.cascader" filterable placeholder="请选择数据来源"
@change="sourceChange" :options="deviceTreeOptions" :show-all-levels="false"
:props="{ checkStrictly: true, value: 'id', label: 'name' }" clearable></el-cascader>
</el-form-item> -->
<!-- <el-form-item label="设备选取">
<el-tree-select
v-model="tableStore.table.params.cascader"
:data="deviceTreeOptions"
clearable
:props="treeProps"
filterable
:filter-node-method="filterNode"
check-strictly
default-expand-all
placeholder="请选择需要筛选的数据"
style="width: 100%"
>
</el-tree-select>
</el-form-item> -->
<el-form-item label="关键字筛选">
<el-input maxlength="32" show-word-limit style="width: 240px"
v-model.trim="tableStore.table.params.searchValue" clearable placeholder="请输入监测点名称" />
@@ -32,39 +43,14 @@ import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import { mainHeight } from '@/utils/layout'
import { createTreeFilterNode } from '@/components/tree/govern/treeFilterUtils'
const props = defineProps(['deviceTree'])
const refheader = ref()
const deviceTree = ref([])
const tabsList = ref([
{
label: '设备告警',
name: 3
},
{
label: '稳态越限告警',
name: 1
},
{
label: '暂态事件',
name: 0
}
])
const rankOptions = ref([
{
value: '1',
label: '1级'
},
{
value: '2',
label: '2级'
},
{
value: '3',
label: '3级'
}
])
const treeProps = {
value: 'id',
label: 'name',
children: 'children'
}
const tableStore = new TableStore({
url: '/cs-harmonic-boot/eventUser/queryEventpageWeb',
@@ -117,27 +103,8 @@ deviceTreeOptions.value.map((item: any, index: any) => {
deviceTreeOptions.value.splice(index, 1)
}
})
const sourceChange = (e: any) => {
tableStore.table.params.deviceTypeId = ''
tableStore.table.params.engineeringid = ''
tableStore.table.params.projectId = ''
tableStore.table.params.deviceId = ''
if (e) {
let name = deviceTreeOptions.value.filter((item: any) => {
return item.id == e[0]
})[0].name
tableStore.table.params.deviceTypeName = name
if (name == '便携式设备') {
tableStore.table.params.deviceTypeId = e[0] || ''
tableStore.table.params.deviceId = e[1] || ''
} else {
tableStore.table.params.deviceTypeId = e[0] || ''
tableStore.table.params.engineeringid = e[1] || ''
tableStore.table.params.projectId = e[2] || ''
tableStore.table.params.deviceId = e[3] || ''
}
}
}
const filterNode = createTreeFilterNode()
onMounted(() => {
tableStore.index()
})

View File

@@ -1,16 +1,30 @@
<template>
<div ref="refheader" v-show="!isWaveCharts" style="width: 100%">
<TableHeader datePicker showExport @onResetForm="onResetForm">
<TableHeader datePicker showExport showCustomColumn @onResetForm="onResetForm">
<template v-slot:select>
<!-- <el-form-item label="数据来源">
<el-cascader placeholder="请选择数据来源" @change="sourceChange" filterable
v-model.trim="tableStore.table.params.cascader" :options="deviceTreeOptions"
:show-all-levels="false" :props="{ checkStrictly: true, value: 'id', label: 'name' }"
clearable></el-cascader>
<!-- <el-form-item label="设备选取">
<el-tree-select
v-model="tableStore.table.params.cascader"
:data="deviceTreeOptions"
clearable
:props="treeProps"
filterable
:filter-node-method="filterNode"
check-strictly
default-expand-all
placeholder="请选择需要筛选的数据"
style="width: 100%"
></el-tree-select>
</el-form-item> -->
<el-form-item label="关键字筛选">
<el-input maxlength="32" show-word-limit style="width: 240px"
v-model.trim="tableStore.table.params.searchValue" clearable placeholder="请输入监测点名称" />
<el-input
maxlength="32"
show-word-limit
style="width: 240px"
v-model.trim="tableStore.table.params.searchValue"
clearable
placeholder="请输入监测点名称"
/>
</el-form-item>
<!-- <el-form-item>
<el-button type="primary" plain @click="openFilterDialog">事件筛选</el-button>
@@ -22,16 +36,24 @@
</template>
</TableHeader>
<MultiCondition v-model:visible="filterVisible" :params="tableStore.table.params" ref="multiConditionRef"
@confirm="onFilterConfirm" />
<MultiCondition
v-model:visible="filterVisible"
:params="tableStore.table.params"
ref="multiConditionRef"
@confirm="onFilterConfirm"
/>
<Table></Table>
<!-- 补召日志 -->
<analysisList ref="analysisListRef"></analysisList>
</div>
<waveFormAnalysis v-loading="loading" v-if="isWaveCharts" ref="waveFormAnalysisRef"
@handleHideCharts="isWaveCharts = false" :wp="wp" />
<waveFormAnalysis
v-loading="loading"
v-if="isWaveCharts"
ref="waveFormAnalysisRef"
@handleHideCharts="isWaveCharts = false"
:wp="wp"
/>
</template>
<script setup lang="ts">
import { ref, onMounted, provide, nextTick } from 'vue'
@@ -48,6 +70,7 @@ import { buildWaveExportFileName, getExportSubjectFromRow } from '@/utils/echart
import { useDictData } from '@/stores/dictData'
import { queryByCode, queryByid, queryCsDictTree } from '@/api/system-boot/dictTree'
import analysisList from '@/views/govern/device/control/analysisList/index.vue'
import { createTreeFilterNode } from '@/components/tree/govern/treeFilterUtils'
const props = defineProps(['deviceTree'])
const emit = defineEmits(['statistics'])
@@ -65,7 +88,11 @@ const EventTypeList: any = dictData.getBasicData('Event_Type')
const filterVisible = ref(false)
const multiConditionRef = ref<InstanceType<typeof MultiCondition>>()
const treeProps = {
value: 'id',
label: 'name',
children: 'children'
}
const tableStore = new TableStore({
url: '/cs-harmonic-boot/eventUser/queryEventpageWeb',
method: 'POST',
@@ -81,34 +108,50 @@ const tableStore = new TableStore({
},
{ title: '发生时刻', field: 'startTime', align: 'center', minWidth: 180, sortable: true },
{ title: '暂降幅值(%)', minWidth: 120, field: 'evtParamVVaDepth', align: 'center', sortable: true, },
{ title: '暂降幅值(%)', minWidth: 120, field: 'evtParamVVaDepth', align: 'center', sortable: true },
{ title: '持续时间(s)', field: 'evtParamTm', minWidth: 110, align: 'center', sortable: true },
{
title: '严重度', field: 'severity', minWidth: 80, align: 'center', sortable: true, formatter: (row: any) => {
title: '严重度',
field: 'severity',
minWidth: 80,
align: 'center',
sortable: true,
formatter: (row: any) => {
return row.cellValue ? row.cellValue : '/'
}
},
{ title: '相别', field: 'evtParamPhase', minWidth: 80, align: 'center' },
{ title: '触发类型', field: 'showName', minWidth: 100, align: 'center' },
{
title: '暂降原因', field: 'advanceReason', minWidth: 100, align: 'center', formatter: (row: any) => {
title: '暂降原因',
field: 'advanceReason',
minWidth: 100,
align: 'center',
formatter: (row: any) => {
return ReasonList.find((item: any) => item.id == row.cellValue)?.name || '其他'
}
},
{
title: '暂降类型', field: 'advanceType', minWidth: 100, align: 'center', formatter: (row: any) => {
title: '暂降类型',
field: 'advanceType',
minWidth: 100,
align: 'center',
formatter: (row: any) => {
return EventTypeList.find((item: any) => item.id == row.cellValue)?.name || '其他'
}
},
{ title: '监测点名称', field: 'lineName', minWidth: 150, align: 'center' },
{ title: '电压等级(kV)', field: 'lineVoltage', minWidth: 120, align: 'center', sortable: true, },
{ title: '电压等级(kV)', field: 'lineVoltage', minWidth: 120, align: 'center', sortable: true },
{ title: '设备名称', field: 'equipmentName', minWidth: 150, align: 'center' },
{ title: '项目名称', field: 'projectName', minWidth: 150, align: 'center' },
{ title: '工程名称', field: 'engineeringName', minWidth: 150, align: 'center' },
{
title: '发生位置', field: 'sagSource', minWidth: 120, align: 'center', formatter: (row: any) => {
title: '发生位置',
field: 'sagSource',
minWidth: 120,
align: 'center',
formatter: (row: any) => {
return row.cellValue == 1 ? '上游' : row.cellValue == 2 ? '下游' : '暂无'
}
},
@@ -145,7 +188,7 @@ const tableStore = new TableStore({
persistTime: row.evtParamTm,
featureAmplitude:
row.evtParamVVaDepth != '-' ? (row.evtParamVVaDepth - 0) / 100 : null,
systemType: 'YPT',
systemType: 'YPT'
}
wp.value = res.data
}
@@ -161,7 +204,6 @@ const tableStore = new TableStore({
waveFormAnalysisRef.value.getWpData(wp.value, boxoList.value, true)
// waveFormAnalysisRef.value && waveFormAnalysisRef.value.setHeight(200, 190)
})
}
},
{
@@ -177,20 +219,22 @@ const tableStore = new TableStore({
click: row => {
row.loading2 = true
ElMessage.info('下载中......')
getFileZip({ eventId: row.id }).then(res => {
let blob = new Blob([res], { type: 'application/zip' }) // console.log(blob) // var href = window.URL.createObjectURL(blob); //创建下载的链接
const url = window.URL.createObjectURL(blob)
const link = document.createElement('a') // 创建a标签
link.href = url
link.download = buildWaveExportFileName(getExportSubjectFromRow(row))
document.body.appendChild(link)
link.click() //执行下载
document.body.removeChild(link) //释放标签
ElMessage.success('波形下载成功')
row.loading2 = false
}).catch(() => {
row.loading2 = false
})
getFileZip({ eventId: row.id })
.then(res => {
let blob = new Blob([res], { type: 'application/zip' }) // console.log(blob) // var href = window.URL.createObjectURL(blob); //创建下载的链接
const url = window.URL.createObjectURL(blob)
const link = document.createElement('a') // 创建a标签
link.href = url
link.download = buildWaveExportFileName(getExportSubjectFromRow(row))
document.body.appendChild(link)
link.click() //执行下载
document.body.removeChild(link) //释放标签
ElMessage.success('波形下载成功')
row.loading2 = false
})
.catch(() => {
row.loading2 = false
})
}
},
{
@@ -202,8 +246,7 @@ const tableStore = new TableStore({
disabled: row => {
let code = DeviceType.value.filter((item: any) => item.id == row.devType)[0]?.code
return !((code == 'Direct_Connected_Device' || code == 'Gateway') && row.wavePath == null)
},
}
},
{
name: 'edit',
@@ -227,22 +270,21 @@ const tableStore = new TableStore({
deviceData: row,
deviceId: row.deviceId
})
} else if (code == 'DEV_CLD') {
row.loading2 = true
// 监测设备
getFileByEventId(row.id).then(res => {
ElMessage.success(res.message)
tableStore.index()
row.loading2 = false
}).catch(() => {
row.loading2 = false
})
getFileByEventId(row.id)
.then(res => {
ElMessage.success(res.message)
tableStore.index()
row.loading2 = false
})
.catch(() => {
row.loading2 = false
})
}
}
},
}
]
}
],
@@ -340,7 +382,7 @@ const sourceChange = (e: any) => {
// tableStore.table.params.deviceId = e[2] || ''
// }
}
const filterNode = createTreeFilterNode()
const onFilterConfirm = () => {
tableStore.onTableAction('search', {})
}
@@ -374,6 +416,6 @@ setTimeout(() => {
tableStore.table.height = mainHeight(200).height as any
}, 0)
const addMenu = () => { }
const addMenu = () => {}
</script>
<style scoped lang="scss"></style>

View File

@@ -1,6 +1,6 @@
<template>
<div class="default-main">
<TableHeader select :showReset="false" ref="TableHeaderRef">
<TableHeader select :showReset="false" showCustomColumn ref="TableHeaderRef">
<template #operation>
<el-button icon="el-icon-Plus" type="primary" @click="add">新增</el-button>
</template>

View File

@@ -38,6 +38,7 @@ import TableHeader from '@/components/table/header/index.vue'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import { getTime } from '@/utils/formatTime'
import { useDictData } from '@/stores/dictData'
import { mainHeight } from '@/utils/layout'
import { color1 } from '@/components/echarts/color'
const dictData = useDictData()

View File

@@ -22,9 +22,6 @@
<el-tab-pane label="前置告警" name="2">
<Front v-if="activeName == '2'" :deviceTree="deviceTree" :key="key" />
</el-tab-pane>
</el-tabs>
</div>
</template>
@@ -35,7 +32,7 @@ import Transient from './Transient.vue'
import Device from './Device.vue'
import Front from './Front.vue'
import eventStatistics from './eventStatistics.vue'
import { getDeviceTree } from '@/api/cs-device-boot/csLedger'
import { getLineTree } from '@/api/cs-device-boot/csLedger'
defineOptions({
name: 'govern/alarm/index'
})
@@ -50,26 +47,14 @@ watch(activeName, val => {
showEventStatistics.value = false
}
})
// getDeviceTree().then(res => {
// res.data.forEach((item: any) => {
// item.value = item.id
// item.label = item.name
// item.children.forEach((child: any) => {
// child.value = child.id
// child.label = child.name
// child.children.forEach((grand: any) => {
// grand.value = grand.id
// grand.label = grand.name
// delete grand.children
// })
// })
// })
// deviceTree.value = res.data
// key.value += 1
// activeName.value = '4'
// })
onMounted(() => { })
getLineTree({ type: 'engineering' }).then(res => {
deviceTree.value = res.data
key.value += 1
activeName.value = '4'
})
onMounted(() => {})
const addMenu = () => { }
const addMenu = () => {}
</script>
<style></style>

View File

@@ -1,6 +1,6 @@
<template>
<div class="default-main">
<TableHeader ref="TableHeaderRef">
<TableHeader showCustomColumn ref="TableHeaderRef">
<template #select>
<el-form-item label="数据来源">
<el-select v-model="tableStore.table.params.dataSource" clearable placeholder="请选择数据来源">
@@ -69,41 +69,41 @@ const tableStore: any = new TableStore({
{ field: 'influxdbTableName', title: '表名', minWidth: 150 },
{ field: 'influxdbColumnName', title: '列属性', minWidth: 150 },
{
field: 'harmStart', title: '谐波次数', width: 90,
field: 'harmStart', title: '谐波次数', minWidth: 90,
formatter: (row: any) => {
return row.cellValue == null ? '/' : row.cellValue + '-' + row.row.harmEnd
}
},
{
field: 'phaseType', title: '相别', width: 100, formatter: (row: any) => {
field: 'phaseType', title: '相别', minWidth: 100, formatter: (row: any) => {
return row.cellValue == 'T' ? '/' : row.cellValue
}
},
{
field: 'unit', title: '单位', width: 80,
field: 'unit', title: '单位', minWidth: 80,
formatter: (row: any) => {
return row.cellValue || '/'
}
},
{ field: 'minValue', title: '指标下限', width: 100 },
{ field: 'maxValue', title: '指标上限', width: 100 },
{ field: 'minValue', title: '指标下限', minWidth: 100 },
{ field: 'maxValue', title: '指标上限', minWidth: 100 },
{
field: 'isVoltage',
title: '电压等级参与',
width: 110,
minWidth: 110,
formatter: (row: any) => yesNo(row.cellValue)
},
{
field: 'ctAttendFlag',
title: 'CT变比参与',
width: 100,
minWidth: 100,
formatter: (row: any) => yesNo(row.cellValue)
},
{ field: 'dataSource', title: '数据来源', width: 100 },
{ field: 'belongingSystem', title: '所属系统', width: 100 },
{ field: 'dataSource', title: '数据来源', minWidth: 100 },
{ field: 'belongingSystem', title: '所属系统', minWidth: 100 },
@@ -119,7 +119,7 @@ const tableStore: any = new TableStore({
formatter: (row: any) => {
return row.cellValue || '/'
}
}, { field: 'sort', title: '排序', width: 70 },
}, { field: 'sort', title: '排序', minWidth: 70 },
{
title: '操作',