实时数据-页面调整&接口调试&数据计算
This commit is contained in:
zhujiyan
@@ -1,9 +1,10 @@
|
||||
<template>
|
||||
<div class="view">
|
||||
<div class="view" v-loading="loading">
|
||||
<div class="view_time" v-if="realData.dataTime">数据时间：{{ realData?.dataTime }}</div>
|
||||
<div class="view_top">
|
||||
<!-- 左侧仪表盘 -->
|
||||
<div class="view_top_left">
|
||||
<div class="left_charts_title">电压有效值</div>
|
||||
<div class="left_charts_title">电压有效值(kV)</div>
|
||||
<div class="left_charts"><MyEchart ref="pieChart1" :options="echartsDataV1"></MyEchart></div>
|
||||
<div class="left_charts"><MyEchart ref="pieChart2" :options="echartsDataV2"></MyEchart></div>
|
||||
<div class="left_charts"><MyEchart ref="pieChart3" :options="echartsDataV3"></MyEchart></div>
|
||||
@@ -14,13 +15,13 @@
|
||||
</div>
|
||||
<!-- 右侧仪表盘 -->
|
||||
<div class="view_top_right">
|
||||
<div class="right_charts_title">电流有效值</div>
|
||||
<div class="right_charts_title">电流有效值(A)</div>
|
||||
<div class="right_charts"><MyEchart ref="pieChart4" :options="echartsDataA1"></MyEchart></div>
|
||||
<div class="right_charts"><MyEchart ref="pieChart5" :options="echartsDataA2"></MyEchart></div>
|
||||
<div class="right_charts"><MyEchart ref="pieChart6" :options="echartsDataA3"></MyEchart></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="view_bot" v-loading="loading">
|
||||
<div class="view_bot" style="display: none">
|
||||
<div class="view_bot_tables">
|
||||
<!-- 表格数据 -->
|
||||
<div v-if="tableData.length != 0">
|
||||
@@ -94,6 +95,126 @@
|
||||
</div>
|
||||
</div>
|
||||
</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="电压有效值(kV)">
|
||||
<vxe-column align="center" field="vRmsA" title="A相"></vxe-column>
|
||||
<vxe-column align="center" field="vRmsB" title="B相"></vxe-column>
|
||||
<vxe-column align="center" field="vRmsC" title="C相"></vxe-column>
|
||||
</vxe-colgroup>
|
||||
<vxe-colgroup align="center" title="电流有效值(A)">
|
||||
<vxe-column align="center" field="iRmsA" title="A相"></vxe-column>
|
||||
<vxe-column align="center" field="iRmsB" title="B相"></vxe-column>
|
||||
<vxe-column align="center" field="iRmsC" title="C相"></vxe-column>
|
||||
</vxe-colgroup>
|
||||
<vxe-colgroup align="center" title="基波电压相位(°)">
|
||||
<vxe-column align="center" field="v1AngA" title="A相"></vxe-column>
|
||||
<vxe-column align="center" field="v1AngB" title="B相"></vxe-column>
|
||||
<vxe-column align="center" field="v1AngC" title="C相"></vxe-column>
|
||||
</vxe-colgroup>
|
||||
<vxe-colgroup align="center" title="基波电流相位(°)">
|
||||
<vxe-column align="center" field="i1AngA" title="A相"></vxe-column>
|
||||
<vxe-column align="center" field="i1AngB" title="B相"></vxe-column>
|
||||
<vxe-column align="center" 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" width="140" title="频率(Hz)"></vxe-column>
|
||||
<vxe-column align="center" field="freqDev" width="120" title="频率偏差(Hz)"></vxe-column>
|
||||
<vxe-column align="center" width="180" field="vUnbalance" title="电压不平衡度(%)"></vxe-column>
|
||||
<vxe-column align="center" width="180" field="iUnbalance" title="电流不平衡度(%)"></vxe-column>
|
||||
<vxe-colgroup align="center" title="基波电压幅值(kV)">
|
||||
<vxe-column align="center" field="v1A" title="A相"></vxe-column>
|
||||
<vxe-column align="center" field="v1B" title="B相"></vxe-column>
|
||||
<vxe-column align="center" field="v1C" title="C相"></vxe-column>
|
||||
</vxe-colgroup>
|
||||
<vxe-colgroup align="center" title="基波电流幅值(A)">
|
||||
<vxe-column align="center" field="i1A" title="A相"></vxe-column>
|
||||
<vxe-column align="center" field="i1B" title="B相"></vxe-column>
|
||||
<vxe-column align="center" 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-colgroup align="center" title="电压偏差(%)">
|
||||
<vxe-column align="center" field="vDevA" title="A相"></vxe-column>
|
||||
<vxe-column align="center" field="vDevB" title="B相"></vxe-column>
|
||||
<vxe-column align="center" field="vDevC" title="C相"></vxe-column>
|
||||
</vxe-colgroup>
|
||||
<vxe-colgroup align="center" title="电压总谐波畸变率(%)">
|
||||
<vxe-column align="center" field="vThdA" title="A相"></vxe-column>
|
||||
<vxe-column align="center" field="vThdB" title="B相"></vxe-column>
|
||||
<vxe-column align="center" field="vThdC" title="C相"></vxe-column>
|
||||
</vxe-colgroup>
|
||||
<vxe-colgroup align="center" title="电流总谐波畸变率(%)">
|
||||
<vxe-column align="center" field="iThdA" title="A相"></vxe-column>
|
||||
<vxe-column align="center" field="iThdB" title="B相"></vxe-column>
|
||||
<vxe-column align="center" field="iThdC" title="C相"></vxe-column>
|
||||
</vxe-colgroup>
|
||||
<vxe-colgroup align="center" title="有功功率(kW)">
|
||||
<vxe-column align="center" field="pA" title="A相"></vxe-column>
|
||||
<vxe-column align="center" field="pB" title="B相"></vxe-column>
|
||||
<vxe-column align="center" field="pC" title="C相"></vxe-column>
|
||||
<vxe-column align="center" 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-colgroup align="center" title="无功功率(kVar)">
|
||||
<vxe-column align="center" field="qA" title="A相"></vxe-column>
|
||||
<vxe-column align="center" field="qB" title="B相"></vxe-column>
|
||||
<vxe-column align="center" field="qC" title="C相">
|
||||
<template #default="{ row }">
|
||||
{{ row.qC }}
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column align="center" field="qTot" title="总"></vxe-column>
|
||||
</vxe-colgroup>
|
||||
<vxe-colgroup align="center" title="视在功率(kVA)">
|
||||
<vxe-column align="center" field="sA" title="A相"></vxe-column>
|
||||
<vxe-column align="center" field="sB" title="B相"></vxe-column>
|
||||
<vxe-column align="center" field="sC" title="C相"></vxe-column>
|
||||
<vxe-column align="center" field="sTot" title="总"></vxe-column>
|
||||
</vxe-colgroup>
|
||||
<vxe-colgroup align="center" title="功率因数">
|
||||
<vxe-column align="center" field="pfA" title="A相"></vxe-column>
|
||||
<vxe-column align="center" field="pfB" title="B相"></vxe-column>
|
||||
<vxe-column align="center" field="pfC" title="C相"></vxe-column>
|
||||
<vxe-column align="center" field="pfTot" title="总"></vxe-column>
|
||||
</vxe-colgroup>
|
||||
<vxe-colgroup align="center" title="基波功率因数">
|
||||
<vxe-column align="center" field="dpfA" title="A相"></vxe-column>
|
||||
<vxe-column align="center" field="dpfB" title="B相"></vxe-column>
|
||||
<vxe-column align="center" field="dpfC" title="C相"></vxe-column>
|
||||
<vxe-column align="center" field="dpfTot" title="总"></vxe-column>
|
||||
</vxe-colgroup>
|
||||
</vxe-table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
@@ -118,9 +239,8 @@ const echartsDataV3: any = ref({})
|
||||
const echartsDataA1: any = ref({})
|
||||
const echartsDataA2: any = ref({})
|
||||
const echartsDataA3: any = ref({})
|
||||
//渲染中相角图
|
||||
//渲染中间相角图
|
||||
const initRadioCharts = () => {
|
||||
//中间指针图
|
||||
echartsData1.value = {
|
||||
options: {
|
||||
grid: {
|
||||
@@ -351,6 +471,17 @@ const initRadioCharts = () => {
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
//新的实时数据
|
||||
// 电流相角
|
||||
echartsData1.value.options.series[0].data[0].value = realData.value.i1AngA || 0
|
||||
echartsData1.value.options.series[0].data[1].value = realData.value.i1AngB || 0
|
||||
echartsData1.value.options.series[0].data[2].value = realData.value.i1AngC || 0
|
||||
// 电压相角
|
||||
echartsData1.value.options.series[1].data[0].value = realData.value.v1AngA || 0
|
||||
echartsData1.value.options.series[1].data[1].value = realData.value.v1AngB || 0
|
||||
echartsData1.value.options.series[1].data[2].value = realData.value.v1AngC || 0
|
||||
|
||||
for (var i = 0; i < echartsData1.value.options.series.length; i++) {
|
||||
echartsData1.value.options.series[i].type = 'gauge'
|
||||
echartsData1.value.options.series[i].startAngle = 90
|
||||
@@ -413,9 +544,12 @@ const init = () => {
|
||||
]
|
||||
}
|
||||
}
|
||||
echartsDataV1.value = echartsData.value
|
||||
echartsDataV2.value = echartsData.value
|
||||
echartsDataV3.value = echartsData.value
|
||||
echartsDataV1.value = JSON.parse(JSON.stringify(echartsData.value))
|
||||
echartsDataV2.value = JSON.parse(JSON.stringify(echartsData.value))
|
||||
echartsDataV3.value = JSON.parse(JSON.stringify(echartsData.value))
|
||||
echartsDataV1.value.options.series[0].max = 12
|
||||
echartsDataV2.value.options.series[0].max = 12
|
||||
echartsDataV3.value.options.series[0].max = 12
|
||||
echartsDataA1.value = echartsData.value
|
||||
echartsDataA2.value = echartsData.value
|
||||
echartsDataA3.value = echartsData.value
|
||||
@@ -431,6 +565,7 @@ const columnsData: any = ref([])
|
||||
const getColumns = () => {
|
||||
getRealTimeTableList().then(res => {
|
||||
columnsData.value = res.data
|
||||
console.log(dataList.value, '+++++++++++++++++++++++++446')
|
||||
getTableData(dataList.value)
|
||||
})
|
||||
}
|
||||
@@ -438,6 +573,7 @@ const getColumns = () => {
|
||||
const columnsDataTop: any = ref([])
|
||||
const columnsDataBot: any = ref([])
|
||||
const getTableData = (list: any) => {
|
||||
console.log(list, '+++++++++++')
|
||||
loading.value = true
|
||||
tableData.value = list
|
||||
columnsDataTop.value = []
|
||||
@@ -460,103 +596,64 @@ const getTableData = (list: any) => {
|
||||
})
|
||||
}
|
||||
//电流相角数组&电压相角数组
|
||||
const iRadioList: any = ref([]),
|
||||
vRadioList: any = ref([])
|
||||
//获取实时数据
|
||||
const getRealTimeData = async (val: any) => {
|
||||
iRadioList.value = []
|
||||
vRadioList.value = []
|
||||
val.map((item: any) => {
|
||||
//基波电流相角
|
||||
if (item.statisticalName == 'Pq_FundIAng') {
|
||||
iRadioList.value.push(item)
|
||||
}
|
||||
//相电压基波有效值相角
|
||||
if (item.statisticalName == 'Pq_FundUAng') {
|
||||
vRadioList.value.push(item)
|
||||
}
|
||||
})
|
||||
const iRadioList: any = ref([])
|
||||
const vRadioList: any = ref([])
|
||||
|
||||
const realData = ref<any>({})
|
||||
const realList = ref<any>([])
|
||||
console.log(realData.value, '++++++++++++++++++++++757')
|
||||
const setRealData = (val: any) => {
|
||||
console.log(val, '实时数据')
|
||||
realData.value = val
|
||||
realList.value = [val]
|
||||
initRadioCharts()
|
||||
loading.value = true
|
||||
if (val.length != 0) {
|
||||
dataList.value = val
|
||||
await getColumns()
|
||||
|
||||
dataList.value.map((item: any, index: any) => {
|
||||
if (item.anotherName == '相电压总有效值') {
|
||||
listV.value.push(item)
|
||||
}
|
||||
if (item.anotherName == '线电压总有效值') {
|
||||
listA.value.push(item)
|
||||
}
|
||||
})
|
||||
console.log(listA.value, listV.value, '++++++++++++494')
|
||||
echartsDataV1.value.options.series[0].data = [
|
||||
{
|
||||
name: 'A相',
|
||||
value:
|
||||
listV.value.find((item: any) => {
|
||||
return item.phase == 'A'
|
||||
})?.statisticalData || 0
|
||||
}
|
||||
]
|
||||
pieChart1.value.initChart()
|
||||
|
||||
echartsDataV2.value.options.series[0].data = [
|
||||
{
|
||||
name: 'B相',
|
||||
value:
|
||||
listV.value.find((item: any) => {
|
||||
return item.phase == 'B'
|
||||
})?.statisticalData || 0
|
||||
}
|
||||
]
|
||||
pieChart2.value.initChart()
|
||||
echartsDataV3.value.options.series[0].data = [
|
||||
{
|
||||
name: 'C相',
|
||||
value:
|
||||
listV.value.find((item: any) => {
|
||||
return item.phase == 'C'
|
||||
})?.statisticalData || 0
|
||||
}
|
||||
]
|
||||
pieChart3.value.initChart()
|
||||
echartsDataA1.value.options.series[0].data = [
|
||||
{
|
||||
name: 'AB相',
|
||||
value:
|
||||
listA.value.find((item: any) => {
|
||||
return item.phase == 'AB'
|
||||
})?.statisticalData || 0
|
||||
}
|
||||
]
|
||||
pieChart4.value.initChart()
|
||||
echartsDataA2.value.options.series[0].data = [
|
||||
{
|
||||
name: 'BC相',
|
||||
value:
|
||||
listA.value.find((item: any) => {
|
||||
return item.phase == 'BC'
|
||||
})?.statisticalData || 0
|
||||
}
|
||||
]
|
||||
pieChart5.value.initChart()
|
||||
echartsDataA3.value.options.series[0].data = [
|
||||
{
|
||||
name: 'CA相',
|
||||
value:
|
||||
listA.value.find((item: any) => {
|
||||
return item.phase == 'CA'
|
||||
})?.statisticalData || 0
|
||||
}
|
||||
]
|
||||
pieChart6.value.initChart()
|
||||
} else {
|
||||
init()
|
||||
}
|
||||
//新的
|
||||
console.log(realData.value, '--99--88--77')
|
||||
echartsDataV1.value.options.series[0].data = [
|
||||
{
|
||||
name: 'A相',
|
||||
value: realData.value.vRmsA || 0
|
||||
}
|
||||
]
|
||||
pieChart1.value.initChart()
|
||||
echartsDataV2.value.options.series[0].data = [
|
||||
{
|
||||
name: 'B相',
|
||||
value: realData.value.vRmsB || 0
|
||||
}
|
||||
]
|
||||
pieChart2.value.initChart()
|
||||
echartsDataV3.value.options.series[0].data = [
|
||||
{
|
||||
name: 'C相',
|
||||
value: realData.value.vRmsC || 0
|
||||
}
|
||||
]
|
||||
pieChart3.value.initChart()
|
||||
//新的电流有效值
|
||||
echartsDataA1.value.options.series[0].data = [
|
||||
{
|
||||
name: 'A相',
|
||||
value: realData.value.iRmsA || 0
|
||||
}
|
||||
]
|
||||
pieChart4.value.initChart()
|
||||
echartsDataA2.value.options.series[0].data = [
|
||||
{
|
||||
name: 'B相',
|
||||
value: realData.value.iRmsB || 0
|
||||
}
|
||||
]
|
||||
pieChart5.value.initChart()
|
||||
echartsDataA3.value.options.series[0].data = [
|
||||
{
|
||||
name: 'C相',
|
||||
value: realData.value.iRmsC || 0
|
||||
}
|
||||
]
|
||||
pieChart6.value.initChart()
|
||||
}
|
||||
defineExpose({ getRealTimeData })
|
||||
defineExpose({ setRealData })
|
||||
onMounted(() => {
|
||||
init()
|
||||
initRadioCharts()
|
||||
|
||||
Reference in New Issue
Block a user