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

联调实时数据页面

Browse Source
This commit is contained in:
GGJ
2025-03-13 18:26:03 +08:00
parent 5f125afede
commit bcf9c78fac
23 changed files with 2513 additions and 370 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1225
src/views/pqs/harmonicMonitoring/monitoringPoint/online/shishishuju/index.vue
View File

File diff suppressed because it is too large Load Diff

345
src/views/pqs/harmonicMonitoring/monitoringPoint/online/shishishuju/spectrum.vue Normal file
View File

@@ -0,0 +1,345 @@
<template>
<div class="pt50">
<el-button class="shutDown" icon="el-icon-Back" @click="emit('shutDown')">返回</el-button>
<div class="select">
<div class="mr10">谐波次数</div>
<el-select v-model="selectValue" style="width: 100px" @change="loading = true">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
<el-tabs type="border-card" v-model="activeName" @tab-change="handleClick" v-loading="loading">
<el-tab-pane v-for="(item, index) in tabsList" :label="item.groupName" :name="index" :key="index">
<div>
<div class="realtrend_top">
<div class="realtrend_table">
<div class="thead_left">
<p style="font-weight: 700; background-color: #f3f6f9">次数(次)</p>
<p>{{ item.groupName }}{{ item.unit ? '(' + item.unit + ')' : '' }}</p>
</div>
<div class="thead_right">
<div
class="right_cell"
v-for="i in selectValue == '1'
? item.title.filter(num => (activeName == 1 ? num - 0.5 : num) % 2 !== 0)
: selectValue == '2'
? item.title.filter(num => (activeName == 1 ? num - 0.5 : num) % 2 == 0)
: item.title"
:key="index"
>
<p style="background-color: #f3f6f9">
<span>{{ i }}次</span>
</p>
<p>
<span>{{ item.data[`h${i}`] == 0 ? 0 : item.data[`h${i}`] || '/' }}</span>
</p>
</div>
</div>
</div>
</div>
<div class="mt10" :style="height">
<MyEchart ref="barCharts" :options="tabsList[0].echartsData"></MyEchart>
</div>
</div>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { getOverLimitData } from '@/api/device-boot/communicate'
import { mainHeight } from '@/utils/layout'
import { useMonitoringPoint } from '@/stores/monitoringPoint'
const emit = defineEmits(['shutDown'])
const monitoringPoint = useMonitoringPoint()
const options = [
{
value: '3',
label: '全部'
},
{
value: '1',
label: '奇次'
},
{
value: '2',
label: '偶次'
}
]
const height = mainHeight(315)
const barCharts = ref()
const loading = ref(true)
const crossTheLine: any = ref({})
const tabsList: any = ref([
{
id: '6d5470f509ca271d7108a86e83bb283f',
groupName: '谐波电压含有率',
thdDataVOS: null,
thdDataTdVODatas: null,
unit: '%',
title: [
2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30,
31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50
],
data: {},
echartsData: {}
},
{
id: 'ae31115b83f02f03a0d3bd65cb017121',
groupName: '间谐波电压含有率',
thdDataVOS: null,
thdDataTdVODatas: null,
unit: '%',
title: [
0.5, 1.5, 2.5, 3.5, 4.5, 5.5, 6.5, 7.5, 8.5, 9.5, 10.5, 11.5, 12.5, 13.5, 14.5, 15.5, 16.5, 17.5, 18.5,
19.5, 20.5, 21.5, 22.5, 23.5, 24.5, 25.5, 26.5, 27.5, 28.5, 29.5, 30.5, 31.5, 32.5, 33.5, 34.5, 35.5, 36.5,
37.5, 38.5, 39.5, 40.5, 41.5, 42.5, 43.5, 44.5, 45.5, 46.5, 47.5, 48.5, 49.5
],
data: {},
echartsData: {}
},
{
id: '8dc260f16280184e2b57d26668dc00b1',
groupName: '谐波电流幅值',
thdDataVOS: null,
thdDataTdVODatas: null,
unit: 'A',
title: [
2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30,
31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50
],
data: {},
echartsData: {}
}
])
const selectValue = ref('1')
const activeName = ref(0)
// 点击tab
const handleClick = (tab: any, event: any) => {
loading.value = true
}
const init = (row: any) => {
let vData: any = {}
let iData: any = {}
let SvData: any = {}
for (let i = 1; i < 50; i++) {
vData[`h${i + 1}`] =
Math.floor(Math.max(...[row.V.A[`V` + i], row.V.B[`V` + i], row.V.C[`V` + i]].map(Number)) * 100) / 100
SvData[`h${i - 0.5}`] =
Math.floor(Math.max(...[row.V.A[`SV_` + i], row.V.B[`SV_` + i], row.V.C[`SV_` + i]].map(Number)) * 100) /
100
iData[`h${i + 1}`] =
Math.floor(Math.max(...[row.I.A[`I` + i], row.I.B[`I` + i], row.I.C[`I` + i]].map(Number)) * 100) / 100
}
SvData[`h49.5`] =
Math.floor(Math.max(...[row.V.A[`SV_50`], row.V.B[`SV_50`], row.V.C[`SV_50`]].map(Number)) * 100) / 100
tabsList.value[0].data = vData
tabsList.value[1].data = SvData
tabsList.value[2].data = iData
let xData =
selectValue.value == '1'
? tabsList.value[activeName.value].title.filter(num => (activeName.value == 1 ? num - 0.5 : num) % 2 !== 0)
: selectValue.value == '2'
? tabsList.value[activeName.value].title.filter(num => (activeName.value == 1 ? num - 0.5 : num) % 2 === 0)
: tabsList.value[activeName.value].title
barCharts.value[activeName.value]?.setOptions({
xAxis: {
data: xData.map(num => `${num}次`)
},
series: [
{
name: tabsList.value[activeName.value].groupName,
type: 'bar',
data: xData.map(num => {
return tabsList.value[activeName.value].data[`h${num}`]
})
},
{
data: xData.map(num => {
return (
crossTheLine.value[
activeName.value == 0
? `uharm${num}`
: activeName.value == 1
? `inuharm${num + 0.5}`
: `iharm${num}`
] || ''
)
})
}
]
})
loading.value = false
}
// 设置ecartsData
const echarts = (num: number) => {
return {
title: {
text: tabsList.value[num].groupName
},
xAxis: {
name: tabsList.value[num].unit,
data: []
},
yAxis: {},
color: ['#2E8B57', '#DAA520'],
options: {
series: [
{
name: tabsList.value[num].groupName,
type: 'bar',
data: []
},
{
name: '国标限值(%)',
type: 'bar',
// label: {
// normal: {
// position: 'top'
// }
// },
data: []
}
]
}
}
}
onMounted(() => {
tabsList.value[0].echartsData = echarts(0)
tabsList.value[0].echartsData = echarts(1)
tabsList.value[0].echartsData = echarts(2)
getOverLimitData({ id: monitoringPoint.state.lineId }).then(res => {
crossTheLine.value = res.data
})
})
defineExpose({
init
})
</script>
<style lang="scss" scoped>
.shutDown {
position: absolute;
right: 10px;
top: 10px;
}
.select {
position: absolute;
top: 10px;
display: flex;
align-items: center;
font-size: 14px;
}
.realtrend_top {
width: 100%;
height: auto;
display: flex;
justify-content: space-between;
align-items: center;
.table {
flex: 1;
// min-height: 80px;
cursor: pointer;
min-height: 90px;
max-height: 170px;
border: 1px solid #eee;
overflow-x: auto;
overflow-y: hidden;
position: relative;
ul {
width: auto;
height: 40px;
display: flex;
li {
flex: none;
width: 100px;
line-height: 40px;
border: 1px solid #eee;
text-align: center;
list-style: none;
}
}
ul:nth-child(1) {
li {
font-weight: 800;
background: #f4f6f9;
}
}
}
// .table::-webkit-scrollbar {
// display: none;
// }
.realtrend_table {
width: 100%;
height: auto;
max-height: 150px;
display: flex;
border: 2px solid #eee;
cursor: pointer;
font-size: 13px;
.thead_left {
width: 150px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
line-height: 50px;
padding-bottom: 5px;
p {
width: 100%;
height: 100%;
text-align: center;
border: 1px solid #eee;
line-height: 38px;
margin: 0 !important;
}
}
.thead_right {
flex: 1;
align-items: center;
overflow-x: auto;
overflow-y: hidden;
display: flex;
padding-bottom: 5px;
.right_cell {
width: 100%;
display: flex;
flex-direction: column;
p {
flex: none;
min-width: 60px;
height: 100%;
text-align: center;
border: 1px solid #eee;
line-height: 38px;
margin: 0 !important;
}
p:nth-child(1) {
font-weight: 800;
}
}
}
}
}
</style>

384
src/views/pqs/harmonicMonitoring/monitoringPoint/online/shishishuju/trend.vue Normal file
View File

@@ -0,0 +1,384 @@
<template>
<div class="pt50">
<el-button class="shutDown" icon="el-icon-Back" @click="emit('shutDown')">返回</el-button>
<div class="select">
<el-form :model="searchForm" id="history_select">
<el-form-item label="稳态指标">
<el-select
multiple
collapse-tags
collapse-tags-tooltip
v-model.trim="searchForm.index"
placeholder="请选择统计指标"
:multiple-limit="3"
value-key="id"
@change="change"
>
<el-option
v-for="(item, index) in indexOptions"
:label="item.name"
:key="index"
:value="item"
></el-option>
</el-select>
</el-form-item>
</el-form>
</div>
<div v-loading="loading" id="trend">
<div :style="height" v-for="(item, index) in searchForm.index" :key="index">
<MyEchart ref="MyEchartRef" :options="item.echartsData" :isInterVal="true"></MyEchart>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { mainHeight } from '@/utils/layout'
import { timeFormat } from '@/utils/common'
import { useConfig } from '@/stores/config'
import { yMethod } from '@/utils/echartMethod'
import html2canvas from 'html2canvas'
import * as echarts from 'echarts' // 全引入
const config = useConfig()
const props = defineProps({
ptName: {
type: String
}
})
const loading = ref(true)
const emit = defineEmits(['shutDown'])
const searchForm: any = ref({ index: [] })
const timeList = ref([])
const MyEchartRef = ref()
const height = ref(mainHeight(150, 2))
//统计指标
const indexOptions: any = ref([
{
id: 0,
name: '电压总有效值(kV)',
children: [
{ name: 'vRmsA', phase: props.ptName == 'star' ? 'A相' : 'AB相', data: [] },
{ name: 'vRmsB', phase: props.ptName == 'star' ? 'B相' : 'BC相', data: [] },
{ name: 'vRmsC', phase: props.ptName == 'star' ? 'C相' : 'CA相', data: [] }
],
color: ['#FFCC00', '#2E8B57', '#A52a2a'],
unit: 'kV',
data: []
},
{
id: 1,
name: '电流总有效值(A)',
children: [
{ name: 'iRmsA', phase: 'A相', data: [] },
{ name: 'iRmsB', phase: 'B相', data: [] },
{ name: 'iRmsC', phase: 'C相', data: [] }
],
color: ['#FFCC00', '#2E8B57', '#A52a2a'],
unit: 'A',
data: []
},
{
id: 2,
name: '有功功率(kW)',
children:
props.ptName == 'star'
? [
{ name: 'pA', phase: 'A相', data: [] },
{ name: 'pB', phase: 'B相', data: [] },
{ name: 'pC', phase: 'C相', data: [] },
{ name: 'pTot', phase: '总', data: [] }
]
: [{ name: 'pTot', phase: '总', data: [] }],
color: props.ptName == 'star' ? ['#FFCC00', '#2E8B57', '#A52a2a', '#000'] : ['#000'],
unit: 'kW',
data: []
},
{
id: 3,
name: '无功功率(kW)',
children:
props.ptName == 'star'
? [
{ name: 'qA', phase: 'A相', data: [] },
{ name: 'qB', phase: 'B相', data: [] },
{ name: 'qC', phase: 'C相', data: [] },
{ name: 'qTot', phase: '总', data: [] }
]
: [{ name: 'qTot', phase: '总', data: [] }],
color: props.ptName == 'star' ? ['#FFCC00', '#2E8B57', '#A52a2a', '#000'] : ['#000'],
unit: 'kW',
data: []
},
{
id: 4,
name: '基波电压总有效值(kV)',
children: [
{ name: 'v1A', phase: props.ptName == 'star' ? 'A相' : 'AB相', data: [] },
{ name: 'v1B', phase: props.ptName == 'star' ? 'B相' : 'BC相', data: [] },
{ name: 'v1C', phase: props.ptName == 'star' ? 'C相' : 'CA相', data: [] }
],
color: ['#FFCC00', '#2E8B57', '#A52a2a'],
unit: 'kV',
data: []
},
{
id: 5,
name: '基波电流总有效值(A)',
children: [
{ name: 'i1A', phase: 'A相', data: [] },
{ name: 'i1B', phase: 'B相', data: [] },
{ name: 'i1C', phase: 'C相', data: [] }
],
color: ['#FFCC00', '#2E8B57', '#A52a2a'],
unit: 'A',
data: []
},
{
id: 6,
name: '频率(Hz)',
children: [
{ name: 'freq', phase: '频率', data: [] },
{ name: 'freqDev', phase: '频率偏差', data: [] }
],
color: [config.layout.elementUiPrimary[0], '#00BFF5'],
unit: 'Hz',
data: []
},
{
id: 7,
name: '电压不平衡度(%)',
children: [{ name: 'vUnbalance', phase: '电压不平衡度', data: [] }],
color: [config.layout.elementUiPrimary[0]],
unit: '%',
data: []
},
{
id: 8,
name: '电流不平衡度(%)',
children: [{ name: 'iUnbalance', phase: '电流不平衡度', data: [] }],
color: [config.layout.elementUiPrimary[0]],
unit: '%',
data: []
}
])
const change = () => {
height.value = mainHeight(150, searchForm.value.index.length)
// let name = searchForm.value.index.map(item => item.name)
// let list = indexOptions.value.filter(item => !name.includes(item.name))
loading.value = true
searchForm.value.index.forEach((item: any) => {
item.echartsData.xAxis.data = []
item.echartsData.series.forEach((child: any) => {
child.data = []
})
})
// console.log("🚀 ~ change ~ MyEchartRef.value[0]?.getChart():", MyEchartRef.value[0]?.getChart())
}
onMounted(() => {
setEcharts()
searchForm.value.index.push(...[indexOptions.value[0], indexOptions.value[1]])
})
const init = (row: any) => {
// timeList.value.push(timeFormat(row.TIME - 0))
searchForm.value.index.forEach((item: any, index: any) => {
// item.echartsData.xAxis.data.push(timeFormat(row.TIME - 0))
let time = timeFormat(row.TIME - 0)
switch (item.name) {
case '电压总有效值(kV)':
item.echartsData.series[0].data.push([
time,
Math.floor((props.ptName == 'star' ? row.V.A.VRMS : row.V.A.VRMS_LVR) * 100) / 100
])
item.echartsData.series[1].data.push([
time,
Math.floor((props.ptName == 'star' ? row.V.B.VRMS : row.V.B.VRMS_LVR) * 100) / 100
])
item.echartsData.series[2].data.push([
time,
Math.floor((props.ptName == 'star' ? row.V.C.VRMS : row.V.C.VRMS_LVR) * 100) / 100
])
break
case '电流总有效值(A)':
item.echartsData.series[0].data.push([time, Math.floor(row.I.A.IRMS * 100) / 100])
item.echartsData.series[1].data.push([time, Math.floor(row.I.B.IRMS * 100) / 100])
item.echartsData.series[2].data.push([time, Math.floor(row.I.C.IRMS * 100) / 100])
break
case '有功功率(kW)':
if (props.ptName == 'star') {
item.echartsData.series[0].data.push([time, Math.floor(row.PQ.A.P * 100) / 100])
item.echartsData.series[1].data.push([time, Math.floor(row.PQ.B.P * 100) / 100])
item.echartsData.series[2].data.push([time, Math.floor(row.PQ.C.P * 100) / 100])
item.echartsData.series[3].data.push([time, Math.floor(row.PQ.T.P * 100) / 100])
} else {
item.echartsData.series[0].data.push([time, Math.floor(row.PQ.T.P * 100) / 100])
}
break
case '无功功率(kW)':
if (props.ptName == 'star') {
item.echartsData.series[0].data.push([time, Math.floor(row.PQ.A.Q * 100) / 100])
item.echartsData.series[1].data.push([time, Math.floor(row.PQ.B.Q * 100) / 100])
item.echartsData.series[2].data.push([time, Math.floor(row.PQ.C.Q * 100) / 100])
item.echartsData.series[3].data.push([time, Math.floor(row.PQ.T.Q * 100) / 100])
} else {
item.echartsData.series[0].data.push([time, Math.floor(row.PQ.T.Q * 100) / 100])
}
break
case '基波电压总有效值(kV)':
item.echartsData.series[0].data.push([time, Math.floor(row.V.A.V1 * 100) / 100])
item.echartsData.series[1].data.push([time, Math.floor(row.V.B.V1 * 100) / 100])
item.echartsData.series[2].data.push([time, Math.floor(row.V.C.V1 * 100) / 100])
break
case '基波电流总有效值(A)':
item.echartsData.series[0].data.push([time, Math.floor(row.I.A.I1 * 100) / 100])
item.echartsData.series[1].data.push([time, Math.floor(row.I.B.I1 * 100) / 100])
item.echartsData.series[2].data.push([time, Math.floor(row.I.C.I1 * 100) / 100])
break
case '频率(Hz)':
item.echartsData.series[0].data.push([time, Math.floor(row.V.T.FREQ * 100) / 100])
item.echartsData.series[1].data.push([time, Math.floor(row.V.T.DELTA_FREQ * 100) / 100])
break
case '电压不平衡度(%)':
item.echartsData.series[0].data.push([time, Math.floor(row.V.T.V_UNBAN * 100) / 100])
break
case '电流不平衡度(%)':
item.echartsData.series[0].data.push([time, Math.floor(row.I.T.I_UNBAN * 100) / 100])
break
}
item.echartsData.series.forEach((item1: any) => {
if (item1.data.length > 60) {
item1.data.shift()
}
})
let [min, max] = yMethod([].concat(...item.echartsData.series.map(k => k.data).map(k1 => k1.map(k2 => k2[1]))))
item.echartsData.yAxis.min = min
item.echartsData.yAxis.max = max
})
MyEchartRef.value[0]?.setOptions(searchForm.value.index[0].echartsData)
MyEchartRef.value[1]?.setOptions(searchForm.value.index[1].echartsData)
MyEchartRef.value[2]?.setOptions(searchForm.value.index[2].echartsData)
if (loading.value) {
echarts.connect('group')
}
loading.value = false
}
const setEcharts = () => {
indexOptions.value.forEach((item: any, index: any) => {
item.echartsData = {
title: {
text: item.name
},
xAxis: {
name: '时间',
type: 'time',
axisLabel: {
interval: 0, // 强制显示所有标签
formatter: {
day: '{MM}-{dd}',
month: '{MM}',
year: '{yyyy}'
}
},
data: []
},
yAxis: {
// type: 'value',
name: item.unit,
splitNumber: 5,
minInterval: 1,
alignTicks: true // 强制对齐刻度
},
toolbox: {
right: 20,
top: 15,
show: index == 0 ? true : false,
feature: {
// 移除默认的 saveAsImage
// saveAsImage: { title: '保存图片' }
myCustomDownload: {
title: '', // 按钮标题
icon: 'path://M892.342857 463.238095l-73.142857-68.266666-258.438095 258.438095V29.257143h-97.52381v624.152381L204.8 394.971429 131.657143 463.238095l380.342857 380.342857zM107.27619 897.219048h804.571429v97.523809H107.27619z', // 自定义图标路径
onclick: function () {
html2canvas(document.getElementById('trend'), {
scale: 1
}).then(function (canvas) {
// 创建a标签，实现下载
let creatIMg = document.createElement('a')
creatIMg.download = '实时趋势.png' // 设置下载的文件名，
creatIMg.href = canvas.toDataURL() // 下载url
creatIMg.click()
creatIMg.remove() // 下载之后把创建的元素删除
})
}
}
}
},
tooltip: {
axisPointer: {
type: 'cross',
label: {
color: '#fff',
fontSize: 16
}
},
textStyle: {
color: '#fff',
fontStyle: 'normal',
opacity: 0.35,
fontSize: 14
},
backgroundColor: 'rgba(0,0,0,0.55)',
borderWidth: 0
},
series: []
}
item.children.map((zz: any, zzIndex: any) => {
item.echartsData.series.push({
name: zz.phase,
type: 'line',
increment: true,
itemStyle: {
barBorderRadius: [3, 3, 0, 0],
color: [...item.color][zzIndex]
},
data: [],
smooth: true, // 这里设置平滑曲线
symbol: 'none' // 设置为 'none' 去掉折点小圆
})
})
})
}
onBeforeUnmount(() => {
echarts.disconnect('group')
})
defineExpose({
init
})
</script>
<style lang="scss" scoped>
.shutDown {
position: absolute;
right: 10px;
top: 10px;
}
.select {
position: absolute;
top: 10px;
display: flex;
align-items: center;
font-size: 14px;
}
</style>