修改 数据中心测试bug
This commit is contained in:
462
src/views/pqs/harmonicMonitoring/area/powerAssessment/index.vue
Normal file
462
src/views/pqs/harmonicMonitoring/area/powerAssessment/index.vue
Normal file
@@ -0,0 +1,462 @@
|
||||
<template>
|
||||
<div class="default-main">
|
||||
<TableHeader datePicker ref="header">
|
||||
<template v-slot:select>
|
||||
|
||||
|
||||
</template>
|
||||
</TableHeader>
|
||||
<div v-loading="tableStore.table.loading" class="pr10">
|
||||
<el-row>
|
||||
<el-col :span="12" class="pd10">
|
||||
<el-tag style="background: #339966;" class="tag" size="small">5级</el-tag>
|
||||
<span style="color: #339966;" class="text">::优秀--(4.5,5]</span>
|
||||
<el-tag style="background: #3399ff;" class="tag" size="small">4级</el-tag>
|
||||
<span style="color: #3399ff;" class="text">:良好--(4,4.5]</span>
|
||||
<el-tag style="background: #ffcc33;" class="tag" size="small">3级</el-tag>
|
||||
<span style="color: #ffcc33;" class="text">:合格--(3,4]</span>
|
||||
<el-tag style="background: #ff9900;" class="tag" size="small">2级</el-tag>
|
||||
<span style="color: #ff9900;" class="text">:较差--(2,3]</span>
|
||||
<el-tag style="background: #cc0000;" class="tag" size="small">1级</el-tag>
|
||||
<span style="color: #cc0000;" class="text">:极差--[1,2]</span>
|
||||
<div :style="{ height: layout.height }" style="overflow-y: auto" class="mt10">
|
||||
<div class=" cardBox">
|
||||
<el-card v-for="(item, index) in tableStore.table.data" :key="index">
|
||||
<template #header>
|
||||
<div style="cursor: pointer;">
|
||||
<el-tag v-if="item.data == 3.14159 || item.data == 0"
|
||||
style="background: #ccc; color: #fff" size="small">
|
||||
无
|
||||
</el-tag>
|
||||
<el-tag v-if="4.5 < item.data && item.data <= 5 && item.data !== 3.14159"
|
||||
style="background: #339966; color: #fff" size="small">
|
||||
5级
|
||||
</el-tag>
|
||||
<el-tag v-if="4 < item.data && item.data <= 4.5 && item.data !== 3.14159"
|
||||
style="background: #3399ff; color: #fff" size="small">
|
||||
4级
|
||||
</el-tag>
|
||||
<el-tag v-if="3 < item.data && item.data <= 4 && item.data !== 3.14159"
|
||||
style="background: #ffcc33; color: #fff" size="small">
|
||||
3级
|
||||
</el-tag>
|
||||
<el-tag v-if="2 < item.data && item.data <= 3 && item.data !== 3.14159"
|
||||
style="background: #ff9900; color: #fff" size="small">
|
||||
4级
|
||||
</el-tag>
|
||||
<el-tag v-if="1 <= item.data && item.data <= 2 && item.data !== 3.14159"
|
||||
style="background: #cc0000; color: #fff" size="small">
|
||||
1级
|
||||
</el-tag>
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
<div class="card-content">
|
||||
<div class="card-item" v-for="(item1, index1) in item.children" :key="index1">
|
||||
<el-tag v-if="item1.data == 3.14159 || item1.data == 0"
|
||||
style="background: #ccc; color: #fff" size="small">
|
||||
无
|
||||
</el-tag>
|
||||
<el-tag v-if="4.5 < item1.data && item1.data <= 5 && item1.data !== 3.14159"
|
||||
style="background: #339966; color: #fff" size="small">
|
||||
5级
|
||||
</el-tag>
|
||||
<el-tag v-if="4 < item1.data && item1.data <= 4.5 && item1.data !== 3.14159"
|
||||
style="background: #3399ff; color: #fff" size="small">
|
||||
4级
|
||||
</el-tag>
|
||||
<el-tag v-if="3 < item1.data && item1.data <= 4 && item1.data !== 3.14159"
|
||||
style="background: #ffcc33; color: #fff" size="small">
|
||||
3级
|
||||
</el-tag>
|
||||
<el-tag v-if="2 < item1.data && item1.data <= 3 && item1.data !== 3.14159"
|
||||
style="background: #ff9900; color: #fff" size="small">
|
||||
2级
|
||||
</el-tag>
|
||||
<el-tag v-if="1 <= item1.data && item1.data <= 2 && item1.data !== 3.14159"
|
||||
style="background: #cc0000; color: #fff" size="small">
|
||||
1级
|
||||
</el-tag>
|
||||
<span class="xdf">
|
||||
<el-tooltip :show-arrow="false" :offset="-0" :content="item1.name"
|
||||
popper-class="atooltip" placement="bottom-start">
|
||||
|
||||
<div class="tooltipText">
|
||||
{{ item1.name }}
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<my-echart class="tall" :options="echartList" />
|
||||
<div class="tall">
|
||||
<vxe-table height="auto" auto-resize :data="tableStore.table.data" v-bind="defaultAttribute">
|
||||
|
||||
<vxe-column field="name" title="名称"></vxe-column>
|
||||
<vxe-column field="zc" title="综合评估值">
|
||||
<template #default="scope">
|
||||
<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 }}
|
||||
</span>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="monitors" title="监测点个数(个)"></vxe-column>
|
||||
<vxe-column field="level" title="评估等级">
|
||||
|
||||
</vxe-column>
|
||||
</vxe-table>
|
||||
</div>
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import { ref, onMounted, provide } from 'vue'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import * as echarts from 'echarts/core'
|
||||
defineOptions({
|
||||
name: 'harmonic-boot/qydetailedAnalysis/pollutionqy'
|
||||
})
|
||||
const dictData = useDictData()
|
||||
const echartList = ref({})
|
||||
|
||||
const header = ref()
|
||||
const options = dictData.getBasicData('Pollution_Statis', ['I_Neg', 'V_Inharm', 'V_Dev', 'V_Unbalance', 'Plt', 'Freq_Dev'])
|
||||
const tableStore = new TableStore({
|
||||
url: '/harmonic-boot/comAccess/getComAccessData',
|
||||
method: 'POST',
|
||||
column: [],
|
||||
loadCallback: () => {
|
||||
histogram(tableStore.table.data)
|
||||
header.value.areaRef.change()
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
})
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
tableStore.table.params.deptIndex = dictData.state.area[0].id
|
||||
tableStore.table.params.monitorFlag = 2
|
||||
tableStore.table.params.powerFlag = 2
|
||||
tableStore.table.params.statisticalType = {}
|
||||
|
||||
|
||||
// 柱状图数据处理
|
||||
const histogram = (res: any) => {
|
||||
console.log(123);
|
||||
|
||||
echartList.value = {
|
||||
title: {
|
||||
text: '区域'
|
||||
},
|
||||
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
name: '区域',
|
||||
data: res.map((item: any) => item.name)
|
||||
},
|
||||
yAxis: {
|
||||
name: '等级',// 给X轴加单位
|
||||
min: 0,
|
||||
max: 5,
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
|
||||
// 这里重新定义就可以
|
||||
formatter: function (value, index) {
|
||||
var texts = []
|
||||
if (value == 1) {
|
||||
texts.push('1级')
|
||||
} else if (value == 2) {
|
||||
texts.push('2级')
|
||||
} else if (value == 3) {
|
||||
texts.push('3级')
|
||||
} else if (value == 4) {
|
||||
texts.push('4级')
|
||||
} else if (value == 5) {
|
||||
texts.push('5级')
|
||||
|
||||
}
|
||||
return texts
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
options: {
|
||||
dataZoom: null,
|
||||
series: [
|
||||
{
|
||||
name: '评估值',
|
||||
type: 'bar',
|
||||
data: res.map((item: any) => {
|
||||
return item.data == 3.14159 ? 0.14159 : item.data
|
||||
}),
|
||||
barMaxWidth: 30,
|
||||
|
||||
itemStyle: {
|
||||
normal: {
|
||||
// 随机显示
|
||||
//color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
|
||||
|
||||
// 定制显示（按顺序）
|
||||
color: function (params) {
|
||||
if (4.5 < params.value && params.value <= 5 && params.value !== 0.2) {
|
||||
return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{
|
||||
offset: 1,
|
||||
color: '#339966',
|
||||
}], false)
|
||||
} else if (4 < params.value && params.value <= 4.5 && params.value !== 0.2) {
|
||||
return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{
|
||||
offset: 1,
|
||||
color: '#3399FF'
|
||||
}], false)
|
||||
} else if (3 < params.value && params.value <= 4 && params.value !== 0.2) {
|
||||
return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{
|
||||
offset: 1,
|
||||
color: '#FFCC33'
|
||||
}], false)
|
||||
} else if (2 < params.value && params.value <= 3 && params.value !== 0.2) {
|
||||
return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{
|
||||
offset: 1,
|
||||
color: '#FF9900'
|
||||
}], false)
|
||||
} else if (params.value >= 1 && params.value <= 2 && params.value !== 0.2) {
|
||||
return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{
|
||||
offset: 1,
|
||||
color: '#CC0000'
|
||||
}], false)
|
||||
} else if (params.value == 0.2) {
|
||||
return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{
|
||||
offset: 1,
|
||||
color: "#999999"
|
||||
}], false)
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
markLine: {
|
||||
silent: false,
|
||||
symbol: 'circle',
|
||||
lineStyle: {
|
||||
color: 'red',
|
||||
width: 1
|
||||
},
|
||||
emphasis: {
|
||||
lineStyle: {
|
||||
width: 1
|
||||
},
|
||||
},
|
||||
data: [
|
||||
|
||||
{
|
||||
name: "",
|
||||
yAxis: 1,
|
||||
lineStyle: {
|
||||
color: '#CC0000',
|
||||
},
|
||||
label: {
|
||||
// position:"middle",
|
||||
formatter: '{b}',
|
||||
textStyle: {
|
||||
color: '#CC0000',
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
yAxis: 2,
|
||||
lineStyle: {
|
||||
color: '#FF9900',
|
||||
|
||||
},
|
||||
label: {
|
||||
// position:"middle",
|
||||
formatter: '{b}',
|
||||
textStyle: {
|
||||
color: '#FF9900',
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
yAxis: 3,
|
||||
lineStyle: {
|
||||
color: '#FFCC33',
|
||||
},
|
||||
label: {
|
||||
// position:"middle",
|
||||
formatter: '{b}',
|
||||
textStyle: {
|
||||
color: '#FFCC33',
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
yAxis: 4,
|
||||
lineStyle: {
|
||||
color: '#3399FF',
|
||||
},
|
||||
label: {
|
||||
// position:"middle",
|
||||
formatter: '{b}',
|
||||
textStyle: {
|
||||
color: '#3399FF',
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
yAxis: 5,
|
||||
lineStyle: {
|
||||
color: '#339966',
|
||||
},
|
||||
label: {
|
||||
// position:"middle",
|
||||
formatter: '{b}',
|
||||
textStyle: {
|
||||
color: '#339966',
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
]
|
||||
},
|
||||
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
const layout = mainHeight(133) as any
|
||||
const layout1 = mainHeight(93) as any
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.tall {
|
||||
height: calc(v-bind('layout1.height') / 2);
|
||||
}
|
||||
|
||||
.tag {
|
||||
color: #fff;
|
||||
border: #fff;
|
||||
margin-left: 5px;
|
||||
width: 28px;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-weight: bold;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
:deep(.cardBox) {
|
||||
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
grid-template-rows: max-content;
|
||||
grid-gap: 10px;
|
||||
justify-content: center;
|
||||
|
||||
.el-card {
|
||||
background-image: linear-gradient(var(--el-color-primary), var(--el-color-primary-light-3));
|
||||
font-weight: bold;
|
||||
|
||||
|
||||
|
||||
.el-card__header {
|
||||
padding: 10px !important;
|
||||
color: #fff;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.el-card__body {
|
||||
padding: 10px !important;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
height: 200px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
overflow-y: auto;
|
||||
color: #000;
|
||||
|
||||
.card-item {
|
||||
margin-bottom: 20px;
|
||||
width: 50%;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
.xdf {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.tooltipText {
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
// width: 50%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-left: 5px;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,300 @@
|
||||
<template>
|
||||
<div class="charts" style="position: relative; width: 100%">
|
||||
<div style="position: absolute; right: 60px; top: 5px; font-weight: bold">
|
||||
<el-tag style="
|
||||
background: #cc0000;
|
||||
width: 30px;
|
||||
height: 15px;
|
||||
border: 1px solid #cc0000;
|
||||
float: left;
|
||||
margin-top: 2px;
|
||||
"></el-tag>
|
||||
<span style="color: #cc0000; font-weight: 400; float: left">  在线率<60%   </span>
|
||||
<el-tag size="small" style="
|
||||
background: #ffcc33;
|
||||
width: 30px;
|
||||
height: 15px;
|
||||
border: 1px solid #ffcc33;
|
||||
float: left;
|
||||
margin-top: 2px;
|
||||
"></el-tag>
|
||||
<span style="color: #ffcc33; font-weight: 400; float: left">  60%≤在线率<90%   </span>
|
||||
<el-tag style="
|
||||
background: #339966;
|
||||
width: 30px;
|
||||
height: 15px;
|
||||
border: 1px solid #339966;
|
||||
float: left;
|
||||
margin-top: 2px;
|
||||
"></el-tag>
|
||||
<span style="color: #339966; font-weight: 400; float: left">  在线率≥90%</span>
|
||||
</div>
|
||||
<my-echart v-loading="loading" class="mt10" :style="`height: calc(${tableStore.table.height} - 135px)`"
|
||||
:options="options" />
|
||||
</div>
|
||||
</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 MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import * as echarts from 'echarts/core'
|
||||
const dictData = useDictData()
|
||||
const options = ref({})
|
||||
|
||||
|
||||
|
||||
const TableHeaderRef = ref()
|
||||
const tableStoreParams: any = ref({})
|
||||
const loading = ref(false)
|
||||
const getTableStoreParams = async (val: any) => {
|
||||
tableStoreParams.value = val
|
||||
loading.value = true
|
||||
setTimeout(() => {
|
||||
tableStore.index()
|
||||
}, 1500)
|
||||
}
|
||||
const itemStyle = {
|
||||
normal: {
|
||||
// 随机显示
|
||||
//color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
|
||||
|
||||
// 定制显示（按顺序）
|
||||
color: function (params) {
|
||||
if (params.value >= 90) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: '#339966',
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
} else if (params.value >= 60 && params.value <= 90) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: '#FFCC33',
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
} else if (params.value <= 60 && params.value !== 3.14159) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: '#CC0000',
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
} else if (params.value == 3.14159) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: "#cccccc",
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
|
||||
const tableStore = new TableStore({
|
||||
url: '/harmonic-boot/steadyQualify/getSteadyQualifyCensus',
|
||||
showPage: false,
|
||||
method: 'POST',
|
||||
column: [],
|
||||
beforeSearchFun: () => {
|
||||
tableStore.table.params = tableStoreParams.value
|
||||
},
|
||||
loadCallback: () => {
|
||||
|
||||
let code = tableStore.table.params.statisticalType.code
|
||||
let title = '',
|
||||
titleX = ''
|
||||
if (code == 'Power_Network') {
|
||||
title = '区域'
|
||||
titleX = '区域'
|
||||
} else if (code == 'Manufacturer') {
|
||||
title = '终端厂家'
|
||||
titleX = '终端\n厂家'
|
||||
} else if (code == 'Voltage_Level') {
|
||||
title = '电压等级'
|
||||
titleX = '电压\n等级'
|
||||
} else if (code == 'Load_Type') {
|
||||
title = '干扰源类型'
|
||||
titleX = '干扰\n源类型'
|
||||
} else if (code == 'Report_Type') {
|
||||
title = '上报类型'
|
||||
titleX = '上报\n类型'
|
||||
}
|
||||
options.value = {
|
||||
title: {
|
||||
text: title
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
|
||||
// tooltip: {
|
||||
// formatter: function (params: any) {
|
||||
// var tips = ''
|
||||
|
||||
// for (var i = 0; i < params.length; i++) {
|
||||
// if (params[i].value == 1) {
|
||||
// tips += params[i].name + '</br>'
|
||||
// tips += '总畸变率:暂无数据'
|
||||
// } else {
|
||||
// tips += params[i].name + '</br>'
|
||||
// tips += '总畸变率:' + params[i].value.toFixed(2)
|
||||
// }
|
||||
// }
|
||||
// return tips
|
||||
// }
|
||||
// },
|
||||
|
||||
xAxis: {
|
||||
name: titleX,
|
||||
data: tableStore.table.data.type
|
||||
},
|
||||
yAxis: {
|
||||
name: '%',
|
||||
max: 100
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "频率偏差",
|
||||
type: "bar",
|
||||
itemStyle: itemStyle,
|
||||
data: tableStore.table.data.freqOffset,
|
||||
markLine: {
|
||||
silent: false,
|
||||
symbol: "circle",
|
||||
data: [
|
||||
{
|
||||
name: "",
|
||||
yAxis: 100,
|
||||
lineStyle: {
|
||||
color: '#339966',
|
||||
},
|
||||
label: {
|
||||
// position: "middle",
|
||||
formatter: "{b}",
|
||||
textStyle: {
|
||||
color: '#339966',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
yAxis: 90,
|
||||
lineStyle: {
|
||||
color: '#FFCC33',
|
||||
},
|
||||
label: {
|
||||
// position: "middle",
|
||||
formatter: "{b}",
|
||||
textStyle: {
|
||||
color: '#FFCC33',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
yAxis: 60,
|
||||
lineStyle: {
|
||||
color: '#CC0000',
|
||||
},
|
||||
label: {
|
||||
// position: "middle",
|
||||
formatter: "{b}",
|
||||
textStyle: {
|
||||
color: '#CC0000',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "闪变",
|
||||
type: "bar",
|
||||
itemStyle: itemStyle,
|
||||
data: tableStore.table.data.flicker,
|
||||
},
|
||||
{
|
||||
name: "三相电压不平衡",
|
||||
type: "bar",
|
||||
itemStyle: itemStyle,
|
||||
data: tableStore.table.data.voltageUnbalance,
|
||||
},
|
||||
{
|
||||
name: "谐波电压",
|
||||
type: "bar",
|
||||
itemStyle: itemStyle,
|
||||
data: tableStore.table.data.harmonicVoltage,
|
||||
},
|
||||
{
|
||||
name: "电压偏差",
|
||||
type: "bar",
|
||||
itemStyle: itemStyle,
|
||||
data: tableStore.table.data.voltageOffset,
|
||||
},
|
||||
{
|
||||
name: "谐波电流",
|
||||
type: "bar",
|
||||
itemStyle: itemStyle,
|
||||
data: tableStore.table.data.harmonicCurrent,
|
||||
},
|
||||
{
|
||||
name: "负序电流",
|
||||
type: "bar",
|
||||
itemStyle: itemStyle,
|
||||
data: tableStore.table.data.negativeCurrent,
|
||||
},
|
||||
{
|
||||
name: "间谐波电压含有率",
|
||||
type: "bar",
|
||||
itemStyle: itemStyle,
|
||||
data: tableStore.table.data.interHarmonic,
|
||||
},
|
||||
|
||||
]
|
||||
}
|
||||
loading.value = false
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
onMounted(() => { })
|
||||
defineExpose({ getTableStoreParams })
|
||||
</script>
|
||||
<style scoped lang="scss"></style>
|
||||
180
src/views/pqs/harmonicMonitoring/area/qualifiedRate/index.vue
Normal file
180
src/views/pqs/harmonicMonitoring/area/qualifiedRate/index.vue
Normal file
@@ -0,0 +1,180 @@
|
||||
<template>
|
||||
<div class="default-main online">
|
||||
<div class="online_header">
|
||||
<TableHeader date-picker area ref="tableHeaderRef">
|
||||
<template #select>
|
||||
<el-form-item label="统计类型:">
|
||||
<el-select v-model="tableStore.table.params.statisticalType" placeholder="请选择统计类型"
|
||||
value-key="id" style="width: 100%">
|
||||
<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
|
||||
placeholder="请选择电压等级" style="width: 100%" value-key="id">
|
||||
<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
|
||||
placeholder="请选择终端厂家" style="width: 100%" value-key="id">
|
||||
<el-option v-for="(item, index) in terminaloption" :key="index" :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
|
||||
placeholder="请选择干扰源类型" style="width: 100%" value-key="id">
|
||||
<el-option v-for="(item, index) in interfereoption" :key="index" :label="item.name"
|
||||
:value="item"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</TableHeader>
|
||||
</div>
|
||||
<div class="online_main">
|
||||
<el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
|
||||
<el-tab-pane :name="0" :lazy="true" label="谐波畸变率统计表">
|
||||
<Table ref="tableRef" :tree-config="{ transform: true, parentField: 'pid' }"
|
||||
:scroll-y="{ enabled: true }" v-if="activeName == 0" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :name="1" :lazy="true" label="谐波畸变率统计图">
|
||||
<charts v-if="activeName == 1" ref="chartsRef" />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, watch } from 'vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import DatePicker from '@/components/form/datePicker/index.vue'
|
||||
import { getAreaDept } from '@/api/harmonic-boot/area'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import charts from './components/charts.vue'
|
||||
defineOptions({
|
||||
name: 'harmonic-boot/area/qualifiedRate'
|
||||
})
|
||||
const tableRef = ref()
|
||||
const onlineChartsRef = ref()
|
||||
const dictData = useDictData()
|
||||
//字典获取电压等级
|
||||
const voltageleveloption = dictData.getBasicData('Dev_Voltage_Stand')
|
||||
//字典获取终端厂家
|
||||
const terminaloption = dictData.getBasicData('Dev_Manufacturers')
|
||||
//字典获取干扰源类型
|
||||
const interfereoption = dictData.getBasicData('Interference_Source')
|
||||
//字典获取统计类型
|
||||
const classificationData = dictData.getBasicData('Statistical_Type', ['Report_Type'])
|
||||
//调用区域接口获取区域
|
||||
const treeData = ref([])
|
||||
const idArr = ref([])
|
||||
const activeName = ref(0)
|
||||
const getTreeData = async () => {
|
||||
await getAreaDept().then(res => {
|
||||
var data = res.data
|
||||
data.forEach(element => {
|
||||
idArr.value.push(element.id)
|
||||
})
|
||||
treeData.value = JSON.parse(JSON.stringify(res.data))
|
||||
})
|
||||
}
|
||||
getTreeData()
|
||||
|
||||
|
||||
|
||||
const chartsRef = ref()
|
||||
const handleClick = (tab: any, e: any) => {
|
||||
// console.log(tab,e,"??????????");
|
||||
// if(activeName.value===1){
|
||||
tableStore.index()
|
||||
// }
|
||||
}
|
||||
|
||||
// const datePickerRef = ref()
|
||||
const tableHeaderRef = ref()
|
||||
const tableStore = new TableStore({
|
||||
publicHeight: 60,
|
||||
showPage: false,
|
||||
url: '/harmonic-boot/steadyQualify/getSteadyQualifyData',
|
||||
method: 'POST',
|
||||
column: [
|
||||
{ title: '', field: 'name', align: 'left', treeNode: true,width: 200, },
|
||||
{ title: '电压等级', field: 'voltageLevel', align: 'center', formatter: function (row) { return row.cellValue ? row.cellValue : '/' } },
|
||||
{ title: '网络参数', field: 'networkParam', align: 'center', formatter: function (row) { return row.cellValue ? row.cellValue : '/' } },
|
||||
{ title: '监测点名称', field: 'lineName', align: 'center', formatter: function (row) { return row.cellValue ? row.cellValue : '/' } },
|
||||
{ title: '厂家', field: 'factoryName', align: 'center', formatter: function (row) { return row.cellValue ? row.cellValue : '/' } },
|
||||
{ title: '谐波电压(%)', field: 'harmonicVoltage', align: 'center', formatter: function (row) { return row.cellValue !=3.14159 ? row.cellValue : '/' } },
|
||||
{ title: '电压偏差(%)', field: 'voltageOffset', align: 'center', formatter: function (row) { return row.cellValue !=3.14159 ? row.cellValue : '/' } },
|
||||
{ title: '三相电压不平衡度(%)', field: 'voltageUnbalance', align: 'center', formatter: function (row) { return row.cellValue !=3.14159 ? row.cellValue : '/' } },
|
||||
{ title: '间谐波电压含有率(%)', field: 'interHarmonic', align: 'center', formatter: function (row) { return row.cellValue !=3.14159 ? row.cellValue : '/' } },
|
||||
{ title: '谐波电流(%)', field: 'harmonicCurrent', align: 'center', formatter: function (row) { return row.cellValue !=3.14159 ? row.cellValue : '/' } },
|
||||
{ title: '负序电流(%)', field: 'negativeCurrent', align: 'center', formatter: function (row) { return row.cellValue !=3.14159 ? row.cellValue : '/' } },
|
||||
{ title: '频率偏差(%)', field: 'freqOffset', align: 'center', formatter: function (row) { return row.cellValue !=3.14159 ? row.cellValue : '/' } },
|
||||
{ title: '闪变(%)', field: 'flicker', align: 'center', formatter: function (row) { return row.cellValue !=3.14159 ? row.cellValue : '/' } },
|
||||
|
||||
],
|
||||
|
||||
loadCallback: () => {
|
||||
let treeData = []
|
||||
treeData = tree2List(tableStore.table.data)
|
||||
tableStore.table.column[0].title = tableStore.table.params.statisticalType.name
|
||||
tableStore.table.data = JSON.parse(JSON.stringify(treeData))
|
||||
chartsRef.value && chartsRef.value.getTableStoreParams(tableStore.table.params)
|
||||
setTimeout(() => {
|
||||
activeName.value == 0 && tableRef.value && tableRef.value.getRef().setAllTreeExpand(true)
|
||||
}, 0)
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
tableStore.table.params.statisticalType = classificationData[0]
|
||||
tableStore.table.params.scale = []
|
||||
tableStore.table.params.manufacturer = []
|
||||
tableStore.table.params.loadType = []
|
||||
tableStore.table.params.serverName = 'harmonicBoot'
|
||||
provide('tableStore', tableStore)
|
||||
const tree2List = (list: any, pid?: string) => {
|
||||
//存储结果的数组
|
||||
let arr: any = []
|
||||
// 遍历 tree 数组
|
||||
list.forEach((item: any) => {
|
||||
// item.comFlag = item.comFlag == null ? 3 : item.comFlag
|
||||
item.valueOver == 3.14159 ? 0 : item.valueOver >= 90 ? 1 : item.valueOver && item.valueOver < 90 ? 2 : 3
|
||||
item.pid = pid
|
||||
// 判断item是否存在children
|
||||
if (!item.children) return arr.push(item)
|
||||
// 函数递归，对children数组进行tree2List的转换
|
||||
const children = tree2List(item.children, item.id)
|
||||
// 删除item的children属性
|
||||
delete item.children
|
||||
// 把item和children数组添加至结果数组
|
||||
//..children: 意思是把children数组展开
|
||||
arr.push(item, ...children)
|
||||
})
|
||||
// 返回结果数组
|
||||
return arr
|
||||
}
|
||||
onMounted(() => { tableStore.index() })
|
||||
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
// .online {
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// .online_header {
|
||||
// width: 100%;
|
||||
// max-height: 140px;
|
||||
// padding: 10px;
|
||||
// box-sizing: border-box;
|
||||
// }
|
||||
// .online_main {
|
||||
// padding: 0 10px;
|
||||
// }
|
||||
// }</style>
|
||||
@@ -12,7 +12,7 @@
|
||||
margin-top: 2px;
|
||||
"></el-tag>
|
||||
<span style="color: #cc0000; font-weight: 400; float: left">  在线率<60%   </span>
|
||||
<el-tag size="mini" style="
|
||||
<el-tag size="small" style="
|
||||
background: #ffcc33;
|
||||
width: 30px;
|
||||
height: 15px;
|
||||
@@ -29,7 +29,7 @@
|
||||
float: left;
|
||||
margin-top: 2px;
|
||||
"></el-tag>
|
||||
<span style="color: #339966; font-weight: 400; float: left">  在线率>90%</span>
|
||||
<span style="color: #339966; font-weight: 400; float: left">  在线率≥90%</span>
|
||||
</div>
|
||||
<my-echart v-loading="loading" :style="`height: calc(${tableStore.table.height} - 125px)`" :options="options" />
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user