This commit is contained in:
sjl
2026-01-09 10:45:07 +08:00
3 changed files with 214 additions and 140 deletions

View File

@@ -12,81 +12,118 @@
<div v-loading="tableStore.table.loading" class="pr10"> <div v-loading="tableStore.table.loading" class="pr10">
<el-row> <el-row>
<el-col :span="12" class="pd10"> <el-col :span="12" class="pd10">
<el-tag style="background: #339966;" class="tag" size="small">5</el-tag> <el-tag style="background: #339966" class="tag" size="small">5</el-tag>
<span style="color: #339966;" class="text">:优秀--(4.5,5]</span> <span style="color: #339966" class="text">:优秀--(4.5,5]</span>
<el-tag style="background: #3399ff;" class="tag" size="small">4</el-tag> <el-tag style="background: #3399ff" class="tag" size="small">4</el-tag>
<span style="color: #3399ff;" class="text">:良好--(4,4.5]</span> <span style="color: #3399ff" class="text">:良好--(4,4.5]</span>
<el-tag style="background: #ffcc33;" class="tag" size="small">3</el-tag> <el-tag style="background: #ffcc33" class="tag" size="small">3</el-tag>
<span style="color: #ffcc33;" class="text">:合格--(3,4]</span> <span style="color: #ffcc33" class="text">:合格--(3,4]</span>
<el-tag style="background: #ff9900;" class="tag" size="small">2</el-tag> <el-tag style="background: #ff9900" class="tag" size="small">2</el-tag>
<span style="color: #ff9900;" class="text">:较差--(2,3]</span> <span style="color: #ff9900" class="text">:较差--(2,3]</span>
<el-tag style="background: #A52a2a;" class="tag" size="small">1</el-tag> <el-tag style="background: #a52a2a" class="tag" size="small">1</el-tag>
<span style="color: #A52a2a;" class="text">:极差--[1,2]</span> <span style="color: #a52a2a" class="text">:极差--[1,2]</span>
<div :style="{ height: layout.height }" style="overflow-y: auto" class="mt10"> <div :style="{ height: layout.height }" style="overflow-y: auto" class="mt10">
<div class=" cardBox"> <div class="cardBox">
<el-card v-for="(item, index) in tableStore.table.data" :key="index"> <el-card v-for="(item, index) in tableStore.table.data" :key="index">
<template #header> <template #header>
<div style="cursor: pointer;"> <div style="cursor: pointer">
<el-tag v-if="item.data == 3.14159 || item.data == 0" <el-tag
style="background: #ccc; color: #fff" size="small"> v-if="item.data == 3.14159 || item.data == 0"
style="background: #ccc; color: #fff"
size="small"
>
</el-tag> </el-tag>
<el-tag v-if="4.5 < item.data && item.data <= 5 && item.data !== 3.14159" <el-tag
style="background: #339966; color: #fff" size="small"> v-if="4.5 < item.data && item.data <= 5 && item.data !== 3.14159"
style="background: #339966; color: #fff"
size="small"
>
5 5
</el-tag> </el-tag>
<el-tag v-if="4 < item.data && item.data <= 4.5 && item.data !== 3.14159" <el-tag
style="background: #3399ff; color: #fff" size="small"> v-if="4 < item.data && item.data <= 4.5 && item.data !== 3.14159"
style="background: #3399ff; color: #fff"
size="small"
>
4 4
</el-tag> </el-tag>
<el-tag v-if="3 < item.data && item.data <= 4 && item.data !== 3.14159" <el-tag
style="background: #ffcc33; color: #fff" size="small"> v-if="3 < item.data && item.data <= 4 && item.data !== 3.14159"
style="background: #ffcc33; color: #fff"
size="small"
>
3 3
</el-tag> </el-tag>
<el-tag v-if="2 < item.data && item.data <= 3 && item.data !== 3.14159" <el-tag
style="background: #ff9900; color: #fff" size="small"> v-if="2 < item.data && item.data <= 3 && item.data !== 3.14159"
style="background: #ff9900; color: #fff"
size="small"
>
4 4
</el-tag> </el-tag>
<el-tag v-if="1 <= item.data && item.data <= 2 && item.data !== 3.14159" <el-tag
style="background: #A52a2a; color: #fff" size="small"> v-if="1 <= item.data && item.data <= 2 && item.data !== 3.14159"
style="background: #a52a2a; color: #fff"
size="small"
>
1 1
</el-tag> </el-tag>
<span>{{ item.name }}</span> <span>{{ item.name }}</span>
</div> </div>
</template> </template>
<div class="card-content"> <div class="card-content">
<div class="card-item" v-for="(item1, index1) in item.children" :key="index1"> <div class="card-item" v-for="(item1, index1) in item.children" :key="index1">
<el-tag v-if="item1.data == 3.14159 || item1.data == 0" <el-tag
style="background: #ccc; color: #fff" size="small"> v-if="item1.data == 3.14159 || item1.data == 0"
style="background: #ccc; color: #fff"
size="small"
>
</el-tag> </el-tag>
<el-tag v-if="4.5 < item1.data && item1.data <= 5 && item1.data !== 3.14159" <el-tag
style="background: #339966; color: #fff" size="small"> v-if="4.5 < item1.data && item1.data <= 5 && item1.data !== 3.14159"
style="background: #339966; color: #fff"
size="small"
>
5 5
</el-tag> </el-tag>
<el-tag v-if="4 < item1.data && item1.data <= 4.5 && item1.data !== 3.14159" <el-tag
style="background: #3399ff; color: #fff" size="small"> v-if="4 < item1.data && item1.data <= 4.5 && item1.data !== 3.14159"
style="background: #3399ff; color: #fff"
size="small"
>
4 4
</el-tag> </el-tag>
<el-tag v-if="3 < item1.data && item1.data <= 4 && item1.data !== 3.14159" <el-tag
style="background: #ffcc33; color: #fff" size="small"> v-if="3 < item1.data && item1.data <= 4 && item1.data !== 3.14159"
style="background: #ffcc33; color: #fff"
size="small"
>
3 3
</el-tag> </el-tag>
<el-tag v-if="2 < item1.data && item1.data <= 3 && item1.data !== 3.14159" <el-tag
style="background: #ff9900; color: #fff" size="small"> v-if="2 < item1.data && item1.data <= 3 && item1.data !== 3.14159"
style="background: #ff9900; color: #fff"
size="small"
>
2 2
</el-tag> </el-tag>
<el-tag v-if="1 <= item1.data && item1.data <= 2 && item1.data !== 3.14159" <el-tag
style="background: #A52a2a; color: #fff" size="small"> v-if="1 <= item1.data && item1.data <= 2 && item1.data !== 3.14159"
style="background: #a52a2a; color: #fff"
size="small"
>
1 1
</el-tag> </el-tag>
<span class="xdf"> <span class="xdf">
<el-tooltip :show-arrow="false" :offset="-0" :content="item1.name" <el-tooltip
popper-class="atooltip" placement="bottom-start"> :show-arrow="false"
:offset="-0"
:content="item1.name"
popper-class="atooltip"
placement="bottom-start"
>
<div class="tooltipText"> <div class="tooltipText">
{{ item1.name }} {{ item1.name }}
</div> </div>
@@ -102,30 +139,22 @@
<my-echart class="tall" :options="echartList" /> <my-echart class="tall" :options="echartList" />
<div class="tall"> <div class="tall">
<vxe-table height="auto" auto-resize :data="tableStore.table.data" v-bind="defaultAttribute"> <vxe-table height="auto" auto-resize :data="tableStore.table.data" v-bind="defaultAttribute">
<vxe-column field="name" title="名称"></vxe-column> <vxe-column field="name" title="名称"></vxe-column>
<vxe-column field="zc" title="综合评估值"> <vxe-column field="zc" title="综合评估值">
<template #default="scope"> <template #default="scope">
<span v-if="scope.row.data == 3.14159" style="color: #000;"> <span v-if="scope.row.data == 3.14159" style="color: #000">暂无数据</span>
暂无数据 <span v-if="scope.row.data !== 3.14159" style="color: #000">
</span>
<span v-if="scope.row.data !== 3.14159" style="color: #000;">
{{ scope.row.data }} {{ scope.row.data }}
</span> </span>
</template> </template>
</vxe-column> </vxe-column>
<vxe-column field="monitors" title="监测点个数(个)"></vxe-column> <vxe-column field="monitors" title="监测点个数(个)"></vxe-column>
<vxe-column field="level" title="评估等级"> <vxe-column field="level" title="评估等级"></vxe-column>
</vxe-column>
</vxe-table> </vxe-table>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@@ -145,7 +174,14 @@ const dictData = useDictData()
const echartList = ref({}) const echartList = ref({})
const sign = dictData.getBasicData('power_flag') const sign = dictData.getBasicData('power_flag')
const header = ref() const header = ref()
const options = dictData.getBasicData('Pollution_Statis', ['I_Neg', 'V_Inharm', 'V_Dev', 'V_Unbalance', 'Plt', 'Freq_Dev']) const options = dictData.getBasicData('Pollution_Statis', [
'I_Neg',
'V_Inharm',
'V_Dev',
'V_Unbalance',
'Plt',
'Freq_Dev'
])
const tableStore = new TableStore({ const tableStore = new TableStore({
url: '/harmonic-boot/comAccess/getComAccessData', url: '/harmonic-boot/comAccess/getComAccessData',
method: 'POST', method: 'POST',
@@ -153,10 +189,6 @@ const tableStore = new TableStore({
loadCallback: () => { loadCallback: () => {
histogram(tableStore.table.data) histogram(tableStore.table.data)
header.value.areaRef.change() header.value.areaRef.change()
} }
}) })
provide('tableStore', tableStore) provide('tableStore', tableStore)
@@ -167,26 +199,23 @@ tableStore.table.params.powerFlag = sign[0]?.algoDescribe || 0
tableStore.table.params.statisticalType = {} tableStore.table.params.statisticalType = {}
// 柱状图数据处理 // 柱状图数据处理
const histogram = (res: any) => { const histogram = (res: any) => {
echartList.value = { echartList.value = {
title: { title: {
text: '区域' text: '区域'
}, },
legend: { legend: {
show: false show: false
}, },
xAxis: { xAxis: {
name: '区域', name: '区域',
data: res.map((item: any) => item.name) data: res.map((item: any) => item.name)
}, },
yAxis: { yAxis: {
name: '等级',// 给X轴加单位 name: '等级', // 给X轴加单位
min: 0, min: 0,
max: 5, max: 5,
splitLine: { splitLine: {
@@ -208,11 +237,10 @@ const histogram = (res: any) => {
texts.push('4级') texts.push('4级')
} else if (value == 5) { } else if (value == 5) {
texts.push('5级') texts.push('5级')
} }
return texts return texts
} }
}, }
}, },
options: { options: {
@@ -222,10 +250,10 @@ const histogram = (res: any) => {
name: '评估值', name: '评估值',
type: 'bar', type: 'bar',
data: res.map((item: any) => { data: res.map((item: any) => {
return item.data == 3.14159 ? 0.14159 : item.data return item.data == 3.14159 ? 0.14159 : item.data == 0 ? 0.14158 : item.data
}), }),
barMaxWidth: 30, barMaxWidth: 30,
barMinHeight: 10,
itemStyle: { itemStyle: {
normal: { normal: {
// 随机显示 // 随机显示
@@ -234,44 +262,106 @@ const histogram = (res: any) => {
// 定制显示(按顺序) // 定制显示(按顺序)
color: function (params) { color: function (params) {
if (4.5 < params.value && params.value <= 5 && params.value !== 0.2) { if (4.5 < params.value && params.value <= 5 && params.value !== 0.2) {
return new echarts.graphic.LinearGradient(0, 1, 0, 0, [ return new echarts.graphic.LinearGradient(
{ 0,
offset: 1, 1,
color: '#339966', 0,
}], false) 0,
[
{
offset: 1,
color: '#339966'
}
],
false
)
} else if (4 < params.value && params.value <= 4.5 && params.value !== 0.2) { } else if (4 < params.value && params.value <= 4.5 && params.value !== 0.2) {
return new echarts.graphic.LinearGradient(0, 1, 0, 0, [ return new echarts.graphic.LinearGradient(
{ 0,
offset: 1, 1,
color: '#3399FF' 0,
}], false) 0,
[
{
offset: 1,
color: '#3399FF'
}
],
false
)
} else if (3 < params.value && params.value <= 4 && params.value !== 0.2) { } else if (3 < params.value && params.value <= 4 && params.value !== 0.2) {
return new echarts.graphic.LinearGradient(0, 1, 0, 0, [ return new echarts.graphic.LinearGradient(
{ 0,
offset: 1, 1,
color: '#FFCC33' 0,
}], false) 0,
[
{
offset: 1,
color: '#FFCC33'
}
],
false
)
} else if (2 < params.value && params.value <= 3 && params.value !== 0.2) { } else if (2 < params.value && params.value <= 3 && params.value !== 0.2) {
return new echarts.graphic.LinearGradient(0, 1, 0, 0, [ return new echarts.graphic.LinearGradient(
{ 0,
offset: 1, 1,
color: '#FF9900' 0,
}], false) 0,
[
{
offset: 1,
color: '#FF9900'
}
],
false
)
} else if (params.value >= 1 && params.value <= 2 && params.value !== 0.2) { } else if (params.value >= 1 && params.value <= 2 && params.value !== 0.2) {
return new echarts.graphic.LinearGradient(0, 1, 0, 0, [ return new echarts.graphic.LinearGradient(
{ 0,
offset: 1, 1,
color: '#A52a2a' 0,
}], false) 0,
[
{
offset: 1,
color: '#A52a2a'
}
],
false
)
} else if (params.value == 0.2) { } else if (params.value == 0.2) {
return new echarts.graphic.LinearGradient(0, 1, 0, 0, [ return new echarts.graphic.LinearGradient(
{ 0,
offset: 1, 1,
color: "#999999" 0,
}], false) 0,
[
{
offset: 1,
color: '#ccc'
}
],
false
)
} else if (params.value == 0.14158) {
return new echarts.graphic.LinearGradient(
0,
1,
0,
0,
[
{
offset: 1,
color: '#ccc'
}
],
false
)
} }
} }
}, }
}, },
markLine: { markLine: {
silent: false, silent: false,
@@ -283,90 +373,81 @@ const histogram = (res: any) => {
emphasis: { emphasis: {
lineStyle: { lineStyle: {
width: 1 width: 1
}, }
}, },
data: [ data: [
{ {
name: "", name: '',
yAxis: 1, yAxis: 1,
lineStyle: { lineStyle: {
color: '#A52a2a', color: '#A52a2a'
}, },
label: { label: {
// position:"middle", // position:"middle",
formatter: '{b}', formatter: '{b}',
textStyle: { textStyle: {
color: '#A52a2a', color: '#A52a2a'
} }
} }
}, },
{ {
name: "", name: '',
yAxis: 2, yAxis: 2,
lineStyle: { lineStyle: {
color: '#FF9900', color: '#FF9900'
}, },
label: { label: {
// position:"middle", // position:"middle",
formatter: '{b}', formatter: '{b}',
textStyle: { textStyle: {
color: '#FF9900', color: '#FF9900'
} }
} }
}, },
{ {
name: "", name: '',
yAxis: 3, yAxis: 3,
lineStyle: { lineStyle: {
color: '#FFCC33', color: '#FFCC33'
}, },
label: { label: {
// position:"middle", // position:"middle",
formatter: '{b}', formatter: '{b}',
textStyle: { textStyle: {
color: '#FFCC33', color: '#FFCC33'
} }
} }
}, },
{ {
name: "", name: '',
yAxis: 4, yAxis: 4,
lineStyle: { lineStyle: {
color: '#3399FF', color: '#3399FF'
}, },
label: { label: {
// position:"middle", // position:"middle",
formatter: '{b}', formatter: '{b}',
textStyle: { textStyle: {
color: '#3399FF', color: '#3399FF'
} }
} }
}, },
{ {
name: "", name: '',
yAxis: 5, yAxis: 5,
lineStyle: { lineStyle: {
color: '#339966', color: '#339966'
}, },
label: { label: {
// position:"middle", // position:"middle",
formatter: '{b}', formatter: '{b}',
textStyle: { textStyle: {
color: '#339966', color: '#339966'
} }
} }
}, }
] ]
}, }
} }
] ]
} }
@@ -397,7 +478,6 @@ const layout1 = mainHeight(93) as any
} }
:deep(.cardBox) { :deep(.cardBox) {
box-sizing: border-box; box-sizing: border-box;
overflow: auto; overflow: auto;
display: grid; display: grid;
@@ -410,8 +490,6 @@ const layout1 = mainHeight(93) as any
background-image: linear-gradient(var(--el-color-primary), var(--el-color-primary-light-3)); background-image: linear-gradient(var(--el-color-primary), var(--el-color-primary-light-3));
font-weight: bold; font-weight: bold;
.el-card__header { .el-card__header {
padding: 10px !important; padding: 10px !important;
color: #fff; color: #fff;
@@ -420,7 +498,6 @@ const layout1 = mainHeight(93) as any
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
} }
.el-card__body { .el-card__body {
@@ -440,7 +517,6 @@ const layout1 = mainHeight(93) as any
width: 50%; width: 50%;
display: flex; display: flex;
cursor: pointer; cursor: pointer;
} }
.xdf { .xdf {
@@ -456,11 +532,8 @@ const layout1 = mainHeight(93) as any
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
margin-left: 5px; margin-left: 5px;
} }
} }
} }
} }
</style> </style>

View File

@@ -15,7 +15,7 @@
></PointTree> ></PointTree>
</pane> </pane>
<pane> <pane>
<div style="position: relative; height: 100%;width: 100%;"> <div style="position: relative; height: 100%; width: 100%">
<el-tabs <el-tabs
v-model="activeName" v-model="activeName"
type="border-card" type="border-card"
@@ -41,9 +41,9 @@
<el-tab-pane label="监测点运行状态" name="6" lazy v-if="!isReload"> <el-tab-pane label="监测点运行状态" name="6" lazy v-if="!isReload">
<Yunxingzhuangtai v-if="activeName == '6'" /> <Yunxingzhuangtai v-if="activeName == '6'" />
</el-tab-pane> </el-tab-pane>
<!-- <el-tab-pane label="实时数据" name="7" lazy v-if="!isReload && !VITE_FLAG"> <el-tab-pane label="实时数据" name="7" lazy v-if="!isReload && !VITE_FLAG && !VITE_FLAG1">
<Shishishuju v-if="activeName == '7'" /> <Shishishuju v-if="activeName == '7'" />
</el-tab-pane> --> </el-tab-pane>
<el-tab-pane label="统计报表" name="8" lazy v-if="!isReload && VITE_FLAG"> <el-tab-pane label="统计报表" name="8" lazy v-if="!isReload && VITE_FLAG">
<StatisticalReport v-if="activeName == '8'" /> <StatisticalReport v-if="activeName == '8'" />
</el-tab-pane> </el-tab-pane>
@@ -76,6 +76,7 @@ import Shishishuju from './shishishuju/index.vue'
import { useRoute } from 'vue-router' import { useRoute } from 'vue-router'
import StatisticalReport from './statisticalReport/index.vue' import StatisticalReport from './statisticalReport/index.vue'
const VITE_FLAG = import.meta.env.VITE_NAME == 'jibei' const VITE_FLAG = import.meta.env.VITE_NAME == 'jibei'
const VITE_FLAG1 = import.meta.env.VITE_NAME == 'hainan'
import router from '@/router' import router from '@/router'
import { useMonitoringPoint } from '@/stores/monitoringPoint' import { useMonitoringPoint } from '@/stores/monitoringPoint'
import { id } from 'element-plus/es/locale' import { id } from 'element-plus/es/locale'
@@ -175,7 +176,7 @@ const findNodeByTreeId = (treeData: any, id: any) => {
const getTargetNode = () => { const getTargetNode = () => {
const targetId = '9b7adecf588b4110acb7018f297592a7' const targetId = '9b7adecf588b4110acb7018f297592a7'
const node = findNodeByTreeId(treeData.value, targetId) const node = findNodeByTreeId(treeData.value, targetId)
// console.log('Vue中找到的节点', node) // console.log('Vue中找到的节点', node)
} }
const changeTab = (e: string) => { const changeTab = (e: string) => {
activeName.value = e activeName.value = e

View File

@@ -1,5 +1,5 @@
<template> <template>
<el-dialog draggable class="cn-operate-dialog" v-model="dialogVisible" :title="title"> <el-dialog draggable class="cn-operate-dialog" width="500px" v-model="dialogVisible" :title="title">
<el-scrollbar> <el-scrollbar>
<el-form :inline="false" :model="form" label-width="120px" :rules="rules" ref="formRef"> <el-form :inline="false" :model="form" label-width="120px" :rules="rules" ref="formRef">
<el-form-item label="角色名称" prop="name"> <el-form-item label="角色名称" prop="name">