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

修改测试bug

Browse Source
This commit is contained in:
GGJ
2024-11-19 10:39:46 +08:00
parent 2101d03126
commit 64fb9141fd
14 changed files with 682 additions and 330 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,45 +1,50 @@
<template>
<div class="view" v-loading="loading">
<div class="view_top">
<!-- 左侧仪表盘 -->
<div class="view_top_left">
<div class="left_charts_title">电压有效值(kV)</div>
<div class="left_charts">
<MyEchart :pieInterVal="true" ref="pieChart1" :options="echartsDataV1"></MyEchart>
<el-collapse v-model="activeNames">
<el-collapse-item title="仪表盘" name="1">
<div class="view_top">
<!-- 左侧仪表盘 -->
<div class="view_top_left">
<div class="left_charts_title">电压有效值(kV)</div>
<div class="left_charts">
<MyEchart :pieInterVal="true" ref="pieChart1" :options="echartsDataV1"></MyEchart>
</div>
<div class="left_charts">
<MyEchart :pieInterVal="true" ref="pieChart2" :options="echartsDataV2"></MyEchart>
</div>
<div class="left_charts">
<MyEchart :pieInterVal="true" ref="pieChart3" :options="echartsDataV3"></MyEchart>
</div>
</div>
<div class="view_top_mid">
<div class="mid_charts_title">基波电压/电流幅值(相位)</div>
<div class="mid_charts">
<MyEchart :pieInterVal="true" :options="echartsData1"></MyEchart>
</div>
</div>
<!-- 右侧仪表盘 -->
<div class="view_top_right">
<div class="right_charts_title">电流有效值(A)</div>
<div class="right_charts">
<MyEchart :pieInterVal="true" ref="pieChart4" :options="echartsDataA1"></MyEchart>
</div>
<div class="right_charts">
<MyEchart :pieInterVal="true" ref="pieChart5" :options="echartsDataA2"></MyEchart>
</div>
<div class="right_charts">
<MyEchart :pieInterVal="true" ref="pieChart6" :options="echartsDataA3"></MyEchart>
</div>
</div>
</div>
<div class="left_charts">
<MyEchart :pieInterVal="true" ref="pieChart2" :options="echartsDataV2"></MyEchart>
</div>
<div class="left_charts">
<MyEchart :pieInterVal="true" ref="pieChart3" :options="echartsDataV3"></MyEchart>
</div>
</div>
<div class="view_top_mid">
<div class="mid_charts_title">基波电压/电流幅值(相位)</div>
<div class="mid_charts"><MyEchart :pieInterVal="true" :options="echartsData1"></MyEchart></div>
</div>
<!-- 右侧仪表盘 -->
<div class="view_top_right">
<div class="right_charts_title">电流有效值(A)</div>
<div class="right_charts">
<MyEchart :pieInterVal="true" ref="pieChart4" :options="echartsDataA1"></MyEchart>
</div>
<div class="right_charts">
<MyEchart :pieInterVal="true" ref="pieChart5" :options="echartsDataA2"></MyEchart>
</div>
<div class="right_charts">
<MyEchart :pieInterVal="true" ref="pieChart6" :options="echartsDataA3"></MyEchart>
</div>
</div>
</div>
</el-collapse-item>
</el-collapse>
<div class="view_bot">
<vxe-table
border
height=""
:data="realList"
:column-config="{ resizable: true, tooltip: true }"
:tooltip-config="{ enterable: true }"
>
<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>
@@ -62,13 +67,8 @@
</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" :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>
@@ -85,13 +85,8 @@
</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" :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>
@@ -115,13 +110,8 @@
</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" :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>
@@ -152,6 +142,10 @@
</vxe-colgroup>
</vxe-table>
</div>
</div>
</template>
<script lang="ts" setup>
@@ -159,6 +153,7 @@ import { ref, onMounted } from 'vue'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { getRealTimeTableList } from '@/api/cs-device-boot/EquipmentDelivery'
const pieChartRef: any = ref()
const activeNames = ref(['1'])
const pieChart1: any = ref()
const pieChart2: any = ref()
const pieChart3: any = ref()
@@ -189,8 +184,8 @@ const initRadioCharts = () => {
tooltip: {
formatter: '{a} <br/>{b} {c}°'
},
toolbox:{
show:false
toolbox: {
show: false
},
legend: {
show: false
@@ -439,8 +434,8 @@ const init = () => {
echartsData.value = {
options: {
tooltip: {},
toolbox:{
show:false
toolbox: {
show: false
},
series: [
{
@@ -552,6 +547,8 @@ const setRealData = (val: any) => {
realList.value = [val]
initRadioCharts()
//新的
echartsDataV1.value.options.series[0].max = realData.value.vRmsA == 0 ? 1 : Math.ceil(realData.value.vRmsA * 1.2)
console.log("🚀 ~ setRealData ~ realData.value.vRmsA:", realData.value.vRmsA)
echartsDataV1.value.options.series[0].data = [
{
name: 'A相',
@@ -559,6 +556,7 @@ const setRealData = (val: any) => {
}
]
pieChart1.value.initChart()
echartsDataV2.value.options.series[0].max = realData.value.vRmsB == 0 ? 1 : Math.ceil(realData.value.vRmsB * 1.2)
echartsDataV2.value.options.series[0].data = [
{
name: 'B相',
@@ -566,6 +564,7 @@ const setRealData = (val: any) => {
}
]
pieChart2.value.initChart()
echartsDataV3.value.options.series[0].max = realData.value.vRmsC == 0 ? 1 : Math.ceil(realData.value.vRmsC * 1.2)
echartsDataV3.value.options.series[0].data = [
{
name: 'C相',
@@ -574,6 +573,7 @@ const setRealData = (val: any) => {
]
pieChart3.value.initChart()
//新的电流有效值
echartsDataA1.value.options.series[0].max = realData.value.iRmsA == 0 ? 1 : Math.ceil(realData.value.iRmsA * 1.2)
echartsDataA1.value.options.series[0].data = [
{
name: 'A相',
@@ -581,6 +581,7 @@ const setRealData = (val: any) => {
}
]
pieChart4.value.initChart()
echartsDataA2.value.options.series[0].max = realData.value.iRmsB == 0 ? 1 : Math.ceil(realData.value.iRmsB * 1.2)
echartsDataA2.value.options.series[0].data = [
{
name: 'B相',
@@ -588,6 +589,7 @@ const setRealData = (val: any) => {
}
]
pieChart5.value.initChart()
echartsDataA3.value.options.series[0].max = realData.value.iRmsC == 0 ? 1 : Math.ceil(realData.value.iRmsC * 1.2)
echartsDataA3.value.options.series[0].data = [
{
name: 'C相',
@@ -609,6 +611,7 @@ onMounted(() => {
box-sizing: border-box;
display: flex;
flex-direction: column;
.view_top {
width: 100%;
height: 340px !important;
@@ -617,6 +620,7 @@ onMounted(() => {
//border: 1px solid #eee;
// padding: 10px;
margin-top: 10px;
.view_top_left,
.view_top_right {
// width: 300px;
@@ -627,6 +631,7 @@ onMounted(() => {
flex-direction: column;
align-items: center;
border: 1px solid #eee;
.left_charts,
.right_charts {
flex: none;
@@ -637,6 +642,7 @@ onMounted(() => {
margin-bottom: 8px;
}
}
.view_top_mid {
// flex: 1;
width: 40%;
@@ -644,6 +650,7 @@ onMounted(() => {
margin: 0 10px;
// padding: 10px;
position: relative;
.mid_charts {
width: 100%;
height: 280px;
@@ -667,13 +674,15 @@ onMounted(() => {
box-sizing: border-box;
}
}
.view_bot {
min-height: 300px;
// min-height: 300px;
margin: 10px 0 0 0;
overflow: auto !important;
flex: 1 !important;
padding-bottom: 200px !important;
// padding-bottom: 200px !important;
box-sizing: border-box !important;
.view_bot_tables {
margin-bottom: 10px;
height: auto;
@@ -681,17 +690,21 @@ onMounted(() => {
}
}
}
.view::-webkit-scrollbar {
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;
@@ -701,6 +714,7 @@ onMounted(() => {
display: flex;
flex-direction: column;
}
.thead {
width: 100%;
height: auto;
@@ -708,6 +722,7 @@ onMounted(() => {
text-align: center;
display: flex;
flex-direction: column;
.thead_top {
width: 100%;
height: 40px;
@@ -717,6 +732,7 @@ onMounted(() => {
font-size: 14px;
font-weight: 800;
}
.thead_bot {
width: 100%;
height: 40px;
@@ -725,16 +741,19 @@ onMounted(() => {
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;
@@ -743,11 +762,13 @@ onMounted(() => {
border-bottom: 0;
}
}
.tbody:hover {
background: #f4f6f9;
}
}
}
.table_container:hover {
.table {
.tbody {
@@ -755,4 +776,20 @@ onMounted(() => {
}
}
}
: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;
}
}
::v-deep .el-collapse-item__header {
font-size: 16px !important;
font-weight: 800 !important;
}
</style>