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

全局添加列配置功能

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

4
src/views/govern/device/control/analysisList/index.vue
View File

@@ -2,7 +2,7 @@
<template>
<el-dialog modal-class="analysisList" v-model.trim="dialogVisible" title="补召日志" width="70%" draggable
@closed="close">
<TableHeader date-picker :showReset="false">
<TableHeader date-picker showCustomColumn :showReset="false">
<template #operation>
<el-button type="primary" icon="el-icon-Connection" @click="handleImport">
离线补召
@@ -63,7 +63,7 @@ const tableStore: any = new TableStore({
{
title: '解析状态',
field: 'status',
width: 100,
minWidth: 100,
render: 'tag',
custom: {
0: 'warning',

39
src/views/govern/device/control/moduleData.vue
View File

@@ -99,7 +99,6 @@ const echartList: any = ref({})
const dataType = ref([0])
const key = ref(0)
import * as echarts from 'echarts' // 全引入
import { max } from 'lodash'
const echartsData: any = ref({
title: {
show: false
@@ -161,7 +160,7 @@ const echartsData: any = ref({
},
grid: {
top: '80px',
right: '50px',
right: '50px'
},
yAxis: [{}],
@@ -372,15 +371,19 @@ const changeDataType = () => {
echartsData.value.yAxis = [{}]
echartsData.value.options.series = []
const currentTab = list.value[activeTab.value] || {}
const loadList = currentTab.loadList || []
const modOutList = currentTab.modOutList || []
const temperatureList = currentTab.temperatureList || []
let flag = dataType.value.includes(0) || dataType.value.includes(1)
if (flag) {
let data1 = dataType.value.includes(0)
? list.value[activeTab.value]?.loadList.map(k => (k.data == 3.14159 ? 0 : k.data))
: [0]
? loadList.map(k => (k.data == 3.14159 ? null : k.data))
: []
let data2 = dataType.value.includes(1)
? list.value[activeTab.value]?.modOutList.map(k => (k.data == 3.14159 ? 0 : k.data))
: [0]
let [modOuMin, modOuMax] = yMethod([...data1||[0], ...data2||[0]])
? modOutList.map(k => (k.data == 3.14159 ? null : k.data))
: []
let [modOuMin, modOuMax] = yMethod([...data1, ...data2])
echartsData.value.yAxis[0] = {
name: 'A',
@@ -395,7 +398,7 @@ const changeDataType = () => {
{
name: 'A相负载电流',
type: 'line',
data: list.value[activeTab.value]?.loadList
data: loadList
.filter((k: any) => k.phasicType == 'A')
.map((k: any) => [k.time, k.data == 3.14159 ? null : k.data, 'A', lineStyle[0].type]),
smooth: true, //让线变得平滑
@@ -407,7 +410,7 @@ const changeDataType = () => {
{
name: 'B相负载电流',
type: 'line',
data: list.value[activeTab.value]?.loadList
data: loadList
.filter((k: any) => k.phasicType == 'B')
.map((k: any) => [k.time, k.data == 3.14159 ? null : k.data, 'A', lineStyle[0].type]),
smooth: true, //让线变得平滑
@@ -419,7 +422,7 @@ const changeDataType = () => {
{
name: 'C相负载电流',
type: 'line',
data: list.value[activeTab.value]?.loadList
data: loadList
.filter((k: any) => k.phasicType == 'C')
.map((k: any) => [k.time, k.data == 3.14159 ? null : k.data, 'A', lineStyle[0].type]),
smooth: true, //让线变得平滑
@@ -435,7 +438,7 @@ const changeDataType = () => {
{
name: 'A相输入电流',
type: 'line',
data: list.value[activeTab.value].modOutList
data: modOutList
.filter((k: any) => k.phasicType == 'A')
.map((k: any) => [k.time, k.data == 3.14159 ? null : k.data, 'A', lineStyle[1].type]),
smooth: true, //让线变得平滑
@@ -447,7 +450,7 @@ const changeDataType = () => {
{
name: 'B相输入电流',
type: 'line',
data: list.value[activeTab.value].modOutList
data: modOutList
.filter((k: any) => k.phasicType == 'B')
.map((k: any) => [k.time, k.data == 3.14159 ? null : k.data, 'A', lineStyle[1].type]),
smooth: true, //让线变得平滑
@@ -459,7 +462,7 @@ const changeDataType = () => {
{
name: 'C相输入电流',
type: 'line',
data: list.value[activeTab.value].modOutList
data: modOutList
.filter((k: any) => k.phasicType == 'C')
.map((k: any) => [k.time, k.data == 3.14159 ? null : k.data, 'A', lineStyle[1].type]),
smooth: true, //让线变得平滑
@@ -473,7 +476,7 @@ const changeDataType = () => {
}
if (dataType.value.includes(2)) {
let [temperatureMin, temperatureMax] = yMethod(
list.value[activeTab.value].temperatureList.map(k => (k.data == 3.14159 ? 0 : k.data))
temperatureList.map(k => (k.data == 3.14159 ? 0 : k.data))
)
echartsData.value.yAxis[flag ? 1 : 0] = {
name: '℃',
@@ -481,12 +484,16 @@ const changeDataType = () => {
splitNumber: 5,
max: temperatureMax,
min: temperatureMin,
minInterval: 1
minInterval: 1,
splitLine: {
show: false
}
}
echartsData.value.options.series.push({
name: '温度',
type: 'line',
data: list.value[activeTab.value].temperatureList.map((k: any) => [
data: temperatureList.map((k: any) => [
k.time,
k.data == 3.14159 ? null : k.data,
'℃',

162
src/views/govern/device/control/nearRealTimeData.vue
View File

@@ -1,32 +1,78 @@
<template>
<div class="near-realtime-data">
<div class="view_bot">
<template v-for="(section, sectionIndex) in tableSections" :key="sectionIndex">
<vxe-table class="near-realtime-table" border height="" width="100%" :data="[section.row]"
:column-config="tableColumnConfig" :tooltip-config="tableTooltipConfig">
<vxe-table
class="near-realtime-table"
border
height=""
width="100%"
:data="[section.row]"
v-bind="defaultAttribute"
:column-config="tableColumnConfig"
:tooltip-config="tableTooltipConfig"
>
<template v-for="(item, colIndex) in section.columns" :key="colIndex">
<vxe-colgroup v-if="item.type === 'abc'" align="center" :title="getPrimaryTitle(item.data)"
:width="getMetricWidth(section)">
<vxe-column align="center" :field="`v${colIndex}A`" :title="item.data.phaseLabels![0]"
:width="getPhaseWidth(section)" :formatter="cellFormatter"></vxe-column>
<vxe-column align="center" :field="`v${colIndex}B`" :title="item.data.phaseLabels![1]"
:width="getPhaseWidth(section)" :formatter="cellFormatter"></vxe-column>
<vxe-column align="center" :field="`v${colIndex}C`" :title="item.data.phaseLabels![2]"
:width="getPhaseWidth(section)" :formatter="cellFormatter"></vxe-column>
<vxe-colgroup
v-if="item.type === 'abc'"
align="center"
:title="getPrimaryTitle(item.data)"
:width="getMetricWidth(section)"
>
<vxe-column
align="center"
:field="`v${colIndex}A`"
:title="item.data.phaseLabels![0]"
:width="getPhaseWidth(section)"
:formatter="cellFormatter"
></vxe-column>
<vxe-column
align="center"
:field="`v${colIndex}B`"
:title="item.data.phaseLabels![1]"
:width="getPhaseWidth(section)"
:formatter="cellFormatter"
></vxe-column>
<vxe-column
align="center"
:field="`v${colIndex}C`"
:title="item.data.phaseLabels![2]"
:width="getPhaseWidth(section)"
:formatter="cellFormatter"
></vxe-column>
</vxe-colgroup>
<vxe-colgroup v-else-if="item.type === 't-multi'" align="center"
:title="getPrimaryTitle(item.data)" :width="getMetricWidth(section)">
<vxe-column v-for="(sub, subIndex) in item.data.subItems" :key="subIndex" align="center"
:field="`t${colIndex}_${subIndex}`" :title="sub.subTitle"
<vxe-colgroup
v-else-if="item.type === 't-multi'"
align="center"
:title="getPrimaryTitle(item.data)"
:width="getMetricWidth(section)"
>
<vxe-column
v-for="(sub, subIndex) in item.data.subItems"
:key="subIndex"
align="center"
:field="`t${colIndex}_${subIndex}`"
:title="sub.subTitle"
:width="getSubColWidth(section, item.data.subItems!.length)"
:formatter="cellFormatter"></vxe-column>
:formatter="cellFormatter"
></vxe-column>
</vxe-colgroup>
<vxe-column v-else align="center" :field="`s${colIndex}`" :title="getScalarTitle(item.data)"
:width="getMetricWidth(section)" show-overflow :formatter="cellFormatter"></vxe-column>
<vxe-column
v-else
align="center"
:field="`s${colIndex}`"
:title="getScalarTitle(item.data)"
:width="getMetricWidth(section)"
show-overflow
:formatter="cellFormatter"
></vxe-column>
</template>
<vxe-column v-for="emptyIndex in section.emptySlotCount" :key="`empty-${emptyIndex}`" align="center"
:width="getMetricWidth(section)"></vxe-column>
<vxe-column
v-for="emptyIndex in section.emptySlotCount"
:key="`empty-${emptyIndex}`"
align="center"
:width="getMetricWidth(section)"
></vxe-column>
</vxe-table>
<div v-if="sectionIndex < tableSections.length - 1" class="table-gap"></div>
</template>
@@ -38,6 +84,7 @@
<script setup lang="ts">
import { mainHeight } from '@/utils/layout'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import { ref } from 'vue'
const ROW_WITH_GROUP = 4
@@ -97,7 +144,7 @@ interface NameGroup {
const PHASE_GROUPS = [
{ keys: ['A', 'B', 'C'], labels: ['A相', 'B相', 'C相'] as [string, string, string] },
{ keys: ['AB', 'BC', 'CA'], labels: ['AB相', 'BC相', 'CA相'] as [string, string, string] },
{ keys: ['AB', 'BC', 'CA'], labels: ['AB相', 'BC相', 'CA相'] as [string, string, string] }
]
const height = mainHeight(345)
@@ -110,8 +157,7 @@ const getMetricWidth = (section: TableSection) => `${100 / section.slotsPerRow}%
const getPhaseWidth = (section: TableSection) => `${100 / section.slotsPerRow / 3}%`
const getSubColWidth = (section: TableSection, subCount: number) =>
`${100 / section.slotsPerRow / subCount}%`
const getSubColWidth = (section: TableSection, subCount: number) => `${100 / section.slotsPerRow / subCount}%`
const formatCellValue = (value: unknown): string | number => {
if (value == null || value === 3.14159) return '/'
@@ -174,7 +220,7 @@ const buildAbcMetric = (name: string, items: RawMetricItem[]): DisplayMetric =>
valueA: phaseMap[keys[0]],
valueB: phaseMap[keys[1]],
valueC: phaseMap[keys[2]],
phaseLabels: labels,
phaseLabels: labels
}
}
}
@@ -187,7 +233,7 @@ const buildAbcMetric = (name: string, items: RawMetricItem[]): DisplayMetric =>
valueA: phaseMap.A ?? phaseMap.AB,
valueB: phaseMap.B ?? phaseMap.BC,
valueC: phaseMap.C ?? phaseMap.CA,
phaseLabels: phaseMap.AB != null ? ['AB相', 'BC相', 'CA相'] : ['A相', 'B相', 'C相'],
phaseLabels: phaseMap.AB != null ? ['AB相', 'BC相', 'CA相'] : ['A相', 'B相', 'C相']
}
}
@@ -200,7 +246,7 @@ const buildTMetric = (name: string, items: RawMetricItem[]): DisplayMetric => {
otherName: items[0].otherName || name,
unit: items[0].unit ?? null,
type: 'scalar',
valueM: items[0].data,
valueM: items[0].data
}
}
@@ -212,12 +258,9 @@ const buildTMetric = (name: string, items: RawMetricItem[]): DisplayMetric => {
unit: sharedUnit,
type: 't-multi',
subItems: items.map(item => ({
subTitle: buildTitle(
extractSubTitle(item.otherName || item.name || ''),
item.unit
),
value: item.data,
})),
subTitle: buildTitle(extractSubTitle(item.otherName || item.name || ''), item.unit),
value: item.data
}))
}
}
@@ -245,7 +288,7 @@ const normalizeOldItem = (item: RawMetricItem): DisplayMetric => {
valueA: item.valueA,
valueB: item.valueB,
valueC: item.valueC,
phaseLabels: ['A相', 'B相', 'C相'],
phaseLabels: ['A相', 'B相', 'C相']
}
}
@@ -254,7 +297,7 @@ const normalizeOldItem = (item: RawMetricItem): DisplayMetric => {
otherName,
unit: item.unit ?? null,
type: 'scalar',
valueM: item.valueM,
valueM: item.valueM
}
}
@@ -268,7 +311,7 @@ const normalizeMetrics = (data: RawMetricItem[]): DisplayMetric[] => {
const toMetricItem = (data: DisplayMetric): MetricItem => ({
type: data.type,
data,
data
})
const buildRow = (columns: MetricItem[]) => {
@@ -312,7 +355,7 @@ const buildTableSections = (metrics: DisplayMetric[]) => {
columns,
row: buildRow(columns),
slotsPerRow,
emptySlotCount: Math.max(0, slotsPerRow - columns.length),
emptySlotCount: Math.max(0, slotsPerRow - columns.length)
})
}
@@ -346,52 +389,5 @@ defineExpose({ setData })
height: 20px;
}
:deep(.view_bot) {
.near-realtime-table {
width: 100%;
}
.near-realtime-table .vxe-table--render-wrapper,
.near-realtime-table .vxe-table--main-wrapper,
.near-realtime-table .vxe-table--header-wrapper,
.near-realtime-table .vxe-table--body-wrapper,
.near-realtime-table .vxe-table--layout-wrapper {
width: 100% !important;
}
.near-realtime-table table {
width: 100% !important;
table-layout: fixed;
}
.near-realtime-table .vxe-header--column .vxe-cell,
.near-realtime-table .vxe-body--column .vxe-cell {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
height: 22px !important;
}
.vxe-table--render-default .vxe-body--column:not(.col--ellipsis),
.vxe-table--render-default .vxe-footer--column:not(.col--ellipsis),
.vxe-table--render-default .vxe-header--column:not(.col--ellipsis) {
padding: 5px !important;
}
.vxe-table--body-wrapper {
min-height: 32px !important;
}
.vxe-body--row {
height: 32px !important;
}
.vxe-table--render-default {
font-size: 13px !important;
}
}
:deep(.vxe-table--render-default .vxe-body--column.col--ellipsis, .vxe-table--render-default .vxe-footer--column.col--ellipsis, .vxe-table--render-default .vxe-header--column.col--ellipsis, .vxe-table--render-default.vxe-editable .vxe-body--column) {
height: 32px !important;
}
</style>

2
src/views/govern/device/control/supplementaryRecruitment/history.vue
View File

@@ -1,7 +1,7 @@
<!-- 历史数据补召 -->
<template>
<div class="default-main">
<TableHeader>
<TableHeader showCustomColumn>
<template v-slot:select>
<el-form-item label="设备类型">
<!-- <el-input maxlength="32" show-word-limit v-model.trim="tableStore.table.params.searchValue" placeholder="请输入设备类型" /> -->

2
src/views/govern/device/control/tabs/event.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="view">
<div v-show="!isWaveCharts">
<TableHeader datePicker showExport ref="headerRef" @onResetForm="onResetForm">
<TableHeader datePicker showExport showCustomColumn ref="headerRef" @onResetForm="onResetForm">
<template v-slot:operation>
<el-button type="primary" icon="el-icon-Operation" @click="openFilterDialog">事件筛选</el-button>
</template>

528
src/views/govern/device/control/tabs/realtime.vue
View File

@@ -1,12 +1,13 @@
<template>
<div class="view" v-loading="loading">
<div class="charts-panel">
<el-collapse v-model="activeNames" class="charts-collapse">
<el-collapse-item name="1">
<template #title>
<div class="charts-collapse-header">
<div style="font-weight: 700; font-size: 13px; text-align: center">数据时间：{{ dataTime || '-' }}</div>
<div style="font-weight: 700; font-size: 13px; text-align: center">
数据时间：{{ dataTime || '-' }}
</div>
</div>
</template>
<template #icon>
@@ -54,79 +55,253 @@
</div>
<div class="view_bot">
<vxe-table border height="" :data="realList" :column-config="{ resizable: true, tooltip: true }"
:tooltip-config="{ enterable: true }">
<vxe-colgroup align="center" :title="`电压有效值(${voltageUnit})`" >
<vxe-column align="center" how-overflow-tooltip min-width="80" field="vRmsA" title="A相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="vRmsB" title="B相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="vRmsC" title="C相"></vxe-column>
<vxe-table
border
height=""
:data="realList"
v-bind="defaultAttribute"
:column-config="{ resizable: true, tooltip: true }"
:tooltip-config="{ enterable: true }"
>
<vxe-colgroup align="center" :title="`电压有效值(${voltageUnit})`">
<vxe-column
align="center"
how-overflow-tooltip
min-width="80"
field="vRmsA"
title="A相"
></vxe-column>
<vxe-column
align="center"
how-overflow-tooltip
min-width="80"
field="vRmsB"
title="B相"
></vxe-column>
<vxe-column
align="center"
how-overflow-tooltip
min-width="80"
field="vRmsC"
title="C相"
></vxe-column>
</vxe-colgroup>
<vxe-colgroup align="center" title="电流有效值(A)">
<vxe-column align="center" how-overflow-tooltip min-width="80" field="iRmsA" title="A相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="iRmsB" title="B相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="iRmsC" title="C相"></vxe-column>
<vxe-column
align="center"
how-overflow-tooltip
min-width="80"
field="iRmsA"
title="A相"
></vxe-column>
<vxe-column
align="center"
how-overflow-tooltip
min-width="80"
field="iRmsB"
title="B相"
></vxe-column>
<vxe-column
align="center"
how-overflow-tooltip
min-width="80"
field="iRmsC"
title="C相"
></vxe-column>
</vxe-colgroup>
<vxe-colgroup align="center" title="基波电压相位(°)">
<vxe-column align="center" how-overflow-tooltip min-width="80" field="v1AngA" title="A相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="v1AngB" title="B相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="v1AngC" title="C相"></vxe-column>
<vxe-column
align="center"
how-overflow-tooltip
min-width="80"
field="v1AngA"
title="A相"
></vxe-column>
<vxe-column
align="center"
how-overflow-tooltip
min-width="80"
field="v1AngB"
title="B相"
></vxe-column>
<vxe-column
align="center"
how-overflow-tooltip
min-width="80"
field="v1AngC"
title="C相"
></vxe-column>
</vxe-colgroup>
<vxe-colgroup align="center" title="基波电流相位(°)">
<vxe-column align="center" how-overflow-tooltip min-width="80" field="i1AngA" title="A相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="i1AngB" title="B相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="i1AngC" title="C相"></vxe-column>
<vxe-column
align="center"
how-overflow-tooltip
min-width="80"
field="i1AngA"
title="A相"
></vxe-column>
<vxe-column
align="center"
how-overflow-tooltip
min-width="80"
field="i1AngB"
title="B相"
></vxe-column>
<vxe-column
align="center"
how-overflow-tooltip
min-width="80"
field="i1AngC"
title="C相"
></vxe-column>
</vxe-colgroup>
</vxe-table>
<br />
<vxe-table border height="" :data="realList" :column-config="{ resizable: true, tooltip: true }"
:tooltip-config="{ enterable: true }">
<vxe-column align="center" field="freq"how-overflow-tooltip min-width="160" title="频率(Hz)"></vxe-column>
<vxe-column align="center" field="freqDev"how-overflow-tooltip min-width="160" title="频率偏差(Hz)"></vxe-column>
<vxe-column align="center"how-overflow-tooltip min-width="160" field="vUnbalance" title="电压不平衡度(%)"></vxe-column>
<vxe-column align="center"how-overflow-tooltip min-width="160" field="iUnbalance" title="电流不平衡度(%)"></vxe-column>
<vxe-table
border
height=""
:data="realList"
v-bind="defaultAttribute"
:column-config="{ resizable: true, tooltip: true }"
:tooltip-config="{ enterable: true }"
>
<vxe-column
align="center"
field="freq"
how-overflow-tooltip
min-width="160"
title="频率(Hz)"
></vxe-column>
<vxe-column
align="center"
field="freqDev"
how-overflow-tooltip
min-width="160"
title="频率偏差(Hz)"
></vxe-column>
<vxe-column
align="center"
how-overflow-tooltip
min-width="160"
field="vUnbalance"
title="电压不平衡度(%)"
></vxe-column>
<vxe-column
align="center"
how-overflow-tooltip
min-width="160"
field="iUnbalance"
title="电流不平衡度(%)"
></vxe-column>
<vxe-colgroup align="center" :title="`基波电压幅值(${voltageUnit})`">
<vxe-column align="center" how-overflow-tooltip min-width="80" field="v1A" title="A相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="v1B" title="B相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="v1C" title="C相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="v1A" title="A相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="v1B" title="B相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="v1C" title="C相"></vxe-column>
</vxe-colgroup>
<vxe-colgroup align="center" title="基波电流幅值(A)">
<vxe-column align="center" how-overflow-tooltip min-width="80" field="i1A" title="A相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="i1B" title="B相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="i1C" title="C相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="i1A" title="A相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="i1B" title="B相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="i1C" title="C相"></vxe-column>
</vxe-colgroup>
</vxe-table>
<br />
<vxe-table border height="" :data="realList" :column-config="{ resizable: true, tooltip: true }"
:tooltip-config="{ enterable: true }">
<vxe-table
border
height=""
:data="realList"
v-bind="defaultAttribute"
:column-config="{ resizable: true, tooltip: true }"
:tooltip-config="{ enterable: true }"
>
<vxe-colgroup align="center" title="电压偏差(%)">
<vxe-column align="center" how-overflow-tooltip min-width="80" field="vDevA" title="A相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="vDevB" title="B相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="vDevC" title="C相"></vxe-column>
<vxe-column
align="center"
how-overflow-tooltip
min-width="80"
field="vDevA"
title="A相"
></vxe-column>
<vxe-column
align="center"
how-overflow-tooltip
min-width="80"
field="vDevB"
title="B相"
></vxe-column>
<vxe-column
align="center"
how-overflow-tooltip
min-width="80"
field="vDevC"
title="C相"
></vxe-column>
</vxe-colgroup>
<vxe-colgroup align="center" title="电压总谐波畸变率(%)">
<vxe-column align="center" how-overflow-tooltip min-width="80" field="vThdA" title="A相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="vThdB" title="B相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="vThdC" title="C相"></vxe-column>
<vxe-column
align="center"
how-overflow-tooltip
min-width="80"
field="vThdA"
title="A相"
></vxe-column>
<vxe-column
align="center"
how-overflow-tooltip
min-width="80"
field="vThdB"
title="B相"
></vxe-column>
<vxe-column
align="center"
how-overflow-tooltip
min-width="80"
field="vThdC"
title="C相"
></vxe-column>
</vxe-colgroup>
<vxe-colgroup align="center" title="电流总谐波畸变率(%)">
<vxe-column align="center" how-overflow-tooltip min-width="80" field="iThdA" title="A相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="iThdB" title="B相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="iThdC" title="C相"></vxe-column>
<vxe-column
align="center"
how-overflow-tooltip
min-width="80"
field="iThdA"
title="A相"
></vxe-column>
<vxe-column
align="center"
how-overflow-tooltip
min-width="80"
field="iThdB"
title="B相"
></vxe-column>
<vxe-column
align="center"
how-overflow-tooltip
min-width="80"
field="iThdC"
title="C相"
></vxe-column>
</vxe-colgroup>
<vxe-colgroup align="center" :title="`有功功率(${powerUnit})`">
<vxe-column align="center" how-overflow-tooltip min-width="80" field="pA" title="A相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="pB" title="B相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="pC" title="C相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="pTot" title="总"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="pA" title="A相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="pB" title="B相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="pC" title="C相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="pTot" title="总"></vxe-column>
</vxe-colgroup>
</vxe-table>
<br />
<vxe-table border height="" :data="realList" :column-config="{ resizable: true, tooltip: true }"
:tooltip-config="{ enterable: true }">
<vxe-table
border
height=""
:data="realList"
v-bind="defaultAttribute"
:column-config="{ resizable: true, tooltip: true }"
:tooltip-config="{ enterable: true }"
>
<vxe-colgroup align="center" :title="`无功功率(${reactivePowerUnit})`">
<vxe-column align="center" how-overflow-tooltip min-width="80" field="qA" title="A相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="qB" title="B相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="qC" title="C相">
<vxe-column align="center" how-overflow-tooltip min-width="80" field="qA" title="A相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="qB" title="B相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="qC" title="C相">
<template #default="{ row }">
{{ row.qC }}
</template>
@@ -134,22 +309,52 @@
<vxe-column align="center" field="qTot" title="总"></vxe-column>
</vxe-colgroup>
<vxe-colgroup align="center" :title="`视在功率(${apparentPowerUnit})`">
<vxe-column align="center" how-overflow-tooltip min-width="80" field="sA" title="A相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="sB" title="B相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="sC" title="C相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="sTot" title="总"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="sA" title="A相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="sB" title="B相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="sC" title="C相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="sTot" title="总"></vxe-column>
</vxe-colgroup>
<vxe-colgroup align="center" title="视在功率因数(P/S)">
<vxe-column align="center" how-overflow-tooltip min-width="80" field="pfA" title="A相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="pfB" title="B相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="pfC" title="C相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="pfTot" title="总"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="pfA" title="A相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="pfB" title="B相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="pfC" title="C相"></vxe-column>
<vxe-column
align="center"
how-overflow-tooltip
min-width="80"
field="pfTot"
title="总"
></vxe-column>
</vxe-colgroup>
<vxe-colgroup align="center" title="位移功率因数(P/S1)">
<vxe-column align="center" how-overflow-tooltip min-width="80" field="dpfA" title="A相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="dpfB" title="B相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="dpfC" title="C相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="dpfTot" title="总"></vxe-column>
<vxe-column
align="center"
how-overflow-tooltip
min-width="80"
field="dpfA"
title="A相"
></vxe-column>
<vxe-column
align="center"
how-overflow-tooltip
min-width="80"
field="dpfB"
title="B相"
></vxe-column>
<vxe-column
align="center"
how-overflow-tooltip
min-width="80"
field="dpfC"
title="C相"
></vxe-column>
<vxe-column
align="center"
how-overflow-tooltip
min-width="80"
field="dpfTot"
title="总"
></vxe-column>
</vxe-colgroup>
</vxe-table>
</div>
@@ -160,7 +365,7 @@ import { ref, onMounted, computed } from 'vue'
import { ArrowDown } from '@element-plus/icons-vue'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { getRealTimeTableList } from '@/api/cs-device-boot/EquipmentDelivery'
import { defaultAttribute } from '@/components/table/defaultAttribute'
const props = defineProps({
dataTime: String
@@ -189,7 +394,7 @@ const previousDataLevel = ref('')
const PHASE_COLORS = {
A: '#DAA520',
B: '#2E8B57',
C: '#A52a2a',
C: '#A52a2a'
}
const PHASE_RING_COLOR = '#9D322D'
@@ -199,7 +404,7 @@ type GaugeAlign = 'left' | 'right'
const createPhaseGaugeData = (name: string, value: number, color: string) => ({
name,
value,
itemStyle: { color, shadowBlur: 0, shadowColor: 'transparent' },
itemStyle: { color, shadowBlur: 0, shadowColor: 'transparent' }
})
const createRmsGaugeOptions = (name: string, color: string, align: GaugeAlign) => {
@@ -223,8 +428,8 @@ const createRmsGaugeOptions = (name: string, color: string, align: GaugeAlign) =
lineStyle: {
width: 5,
shadowBlur: 0,
color: [[1, color]],
},
color: [[1, color]]
}
},
axisTick: {
show: true,
@@ -233,14 +438,14 @@ const createRmsGaugeOptions = (name: string, color: string, align: GaugeAlign) =
lineStyle: {
color,
width: 2,
type: 'solid',
},
type: 'solid'
}
},
axisLabel: {
show: true,
distance: 12,
color,
fontSize: 12,
fontSize: 12
},
splitLine: {
show: true,
@@ -249,22 +454,22 @@ const createRmsGaugeOptions = (name: string, color: string, align: GaugeAlign) =
lineStyle: {
color,
width: 3,
type: 'solid',
},
type: 'solid'
}
},
title: {
show: true,
fontWeight: 'bolder',
fontSize: 12,
color,
offsetCenter: isLeft ? ['-130%', '-20%'] : ['130%', '-20%'],
offsetCenter: isLeft ? ['-130%', '-20%'] : ['130%', '-20%']
},
detail: {
fontSize: 14,
color,
valueAnimation: true,
formatter: '{value}',
offsetCenter: isLeft ? ['50%', '-35%'] : ['-45%', '-35%'],
offsetCenter: isLeft ? ['50%', '-35%'] : ['-45%', '-35%']
},
pointer: {
length: '80%',
@@ -274,18 +479,18 @@ const createRmsGaugeOptions = (name: string, color: string, align: GaugeAlign) =
itemStyle: {
color,
shadowBlur: 0,
shadowColor: 'transparent',
},
shadowColor: 'transparent'
}
},
itemStyle: {
color,
shadowBlur: 0,
shadowColor: 'transparent',
shadowColor: 'transparent'
},
data: [createPhaseGaugeData(name, 0, color)],
},
],
},
data: [createPhaseGaugeData(name, 0, color)]
}
]
}
}
}
@@ -297,7 +502,7 @@ const applyGaugePhaseColor = (options: any, color: string) => {
...series.pointer,
itemStyle: { color, shadowBlur: 0, shadowColor: 'transparent' },
shadowBlur: 0,
shadowColor: 'transparent',
shadowColor: 'transparent'
}
series.axisTick.lineStyle.color = color
series.splitLine.lineStyle.color = color
@@ -313,38 +518,22 @@ const buildPhaseLegendGraphic = () => {
const phases = [
{ key: 'A', label: 'A相', color: PHASE_COLORS.A },
{ key: 'B', label: 'B相', color: PHASE_COLORS.B },
{ key: 'C', label: 'C相', color: PHASE_COLORS.C },
{ key: 'C', label: 'C相', color: PHASE_COLORS.C }
]
const voltageValues = [
realData.value.v1AngA ?? 0,
realData.value.v1AngB ?? 0,
realData.value.v1AngC ?? 0,
]
const currentValues = [
realData.value.i1AngA ?? 0,
realData.value.i1AngB ?? 0,
realData.value.i1AngC ?? 0,
]
const voltageValues = [realData.value.v1AngA ?? 0, realData.value.v1AngB ?? 0, realData.value.v1AngC ?? 0]
const currentValues = [realData.value.i1AngA ?? 0, realData.value.i1AngB ?? 0, realData.value.i1AngC ?? 0]
return [
{
type: 'group',
right: 20,
bottom: 20,
bottom: 20
// children,
},
}
]
}
const updateRmsGaugeChart = (
chartRef: any,
chartData: any,
name: string,
value: number,
color: string
) => {
const updateRmsGaugeChart = (chartRef: any, chartData: any, name: string, value: number, color: string) => {
chartData.value.options.series[0].max = value == 0 ? 1 : Math.ceil(value * 1.2)
chartData.value.options.series[0].data = [createPhaseGaugeData(name, value || 0, color)]
applyGaugePhaseColor(chartData.value.options, color)
@@ -399,10 +588,10 @@ const initRadioCharts = () => {
[0.25, PHASE_RING_COLOR],
[0.5, PHASE_RING_COLOR],
[0.75, PHASE_RING_COLOR],
[1, PHASE_RING_COLOR],
[1, PHASE_RING_COLOR]
],
width: 2,
},
width: 2
}
},
axisTick: {
show: true,
@@ -412,8 +601,8 @@ const initRadioCharts = () => {
lineStyle: {
color: PHASE_RING_COLOR,
width: 1,
type: 'solid',
},
type: 'solid'
}
},
splitLine: {
show: true,
@@ -422,8 +611,8 @@ const initRadioCharts = () => {
lineStyle: {
color: PHASE_RING_COLOR,
width: 2,
type: 'solid',
},
type: 'solid'
}
},
// 分割线标识
axisLabel: {
@@ -451,7 +640,7 @@ const initRadioCharts = () => {
width: 15,
opacity: 1,
shadowBlur: 0,
shadowColor: 'transparent',
shadowColor: 'transparent'
},
detail: {
show: false
@@ -508,10 +697,10 @@ const initRadioCharts = () => {
[0.25, PHASE_RING_COLOR],
[0.5, PHASE_RING_COLOR],
[0.75, PHASE_RING_COLOR],
[1, PHASE_RING_COLOR],
[1, PHASE_RING_COLOR]
],
width: 1.5,
},
width: 1.5
}
},
axisTick: {
show: true,
@@ -521,8 +710,8 @@ const initRadioCharts = () => {
lineStyle: {
color: PHASE_RING_COLOR,
width: 1,
type: 'solid',
},
type: 'solid'
}
},
splitLine: {
show: true,
@@ -531,8 +720,8 @@ const initRadioCharts = () => {
lineStyle: {
color: PHASE_RING_COLOR,
width: 2,
type: 'solid',
},
type: 'solid'
}
},
// 分割线标识
axisLabel: {
@@ -560,7 +749,7 @@ const initRadioCharts = () => {
width: 15,
opacity: 1,
shadowBlur: 0,
shadowColor: 'transparent',
shadowColor: 'transparent'
},
detail: {
show: false
@@ -761,8 +950,6 @@ onMounted(() => {
border: none;
}
:deep(.el-collapse-item__arrow) {
display: none;
}
@@ -777,8 +964,6 @@ onMounted(() => {
pointer-events: none;
}
.charts-collapse-action {
display: inline-flex;
align-items: center;
@@ -895,102 +1080,5 @@ onMounted(() => {
display: none;
}
.table_container {
width: 100%;
height: auto;
display: flex;
align-items: center;
justify-content: center;
.table {
flex: 1;
.table_info {
width: 100%;
height: 120px;
// border: 1px solid #eee;
border-bottom: 2px solid #eee;
margin-bottom: 20px;
display: flex;
flex-direction: column;
}
.thead {
width: 100%;
height: auto;
background: #f4f6f9;
text-align: center;
display: flex;
flex-direction: column;
.thead_top {
width: 100%;
height: 40px;
line-height: 40px;
border: 1px solid #eee;
color: #111;
font-size: 14px;
font-weight: 800;
}
.thead_bot {
width: 100%;
height: 40px;
line-height: 40px;
display: flex;
color: #111;
font-size: 14px;
font-weight: 800;
.thead_bot_cell {
flex: 1;
border: 1px solid #eee;
}
}
}
.tbody {
flex: 1;
display: flex;
text-align: center;
.tbody_cell {
flex: 1;
text-align: center;
line-height: 40px;
border: 1px solid #eee;
border-bottom: 0;
}
}
.tbody:hover {
background: #f4f6f9;
}
}
}
.table_container:hover {
.table {
.tbody {
background: #f4f6f9;
}
}
}
:deep(.view_bot) {
.vxe-table--render-default .vxe-body--column:not(.col--ellipsis),
.vxe-table--render-default .vxe-footer--column:not(.col--ellipsis),
.vxe-table--render-default .vxe-header--column:not(.col--ellipsis) {
padding: 5px !important;
}
.vxe-table--body-wrapper {
min-height: 32px !important;
}
}
:deep(.vxe-table--render-default) {
font-size: 13px !important;
}
</style>

2
src/views/govern/device/planData/components/transient.vue
View File

@@ -1,7 +1,7 @@
<template>
<div>
<div v-show="!isWaveCharts">
<TableHeader showExport ref="headerRef" :showQuery="false" @onResetForm="onResetForm">
<TableHeader showExport showCustomColumn ref="headerRef" :showQuery="false" @onResetForm="onResetForm">
<template v-slot:operation>
<el-button type="primary" icon="el-icon-Operation" @click="openFilterDialog">事件筛选</el-button>
</template>