绘制关键指标概览页面
This commit is contained in:
guanj
File diff suppressed because it is too large
Load Diff
@@ -19,8 +19,8 @@
|
||||
<view class="content-item-header-right">
|
||||
<view class="content-item-header-right-title">{{ item.equipmentName }}</view>
|
||||
|
||||
<view class="content-item-header-right-des">工程名称：{{ item.engineeringName }}</view>
|
||||
<view class="content-item-header-right-des">项目名称：{{ item.projectName }}</view>
|
||||
<view class="content-item-header-right-des">工程：{{ item.engineeringName }}</view>
|
||||
<view class="content-item-header-right-des">项目：{{ item.projectName }}</view>
|
||||
|
||||
</view>
|
||||
<view class="ml10" v-if="type === '0' || item.status != '1'">
|
||||
|
||||
@@ -6,20 +6,16 @@
|
||||
<view class="info-card-wrap">
|
||||
<view class="info-card">
|
||||
<view class="info-item">
|
||||
监测点名称：<view
|
||||
><picker
|
||||
@change="lineChange"
|
||||
@cancel="selectProject = false"
|
||||
:value="lineKey"
|
||||
:range="lineList"
|
||||
range-key="name"
|
||||
>
|
||||
监测点名称：<view>
|
||||
<picker @change="lineChange" @cancel="selectProject = false" :value="lineKey"
|
||||
:range="lineList" range-key="name">
|
||||
<view class="nav-menu" @click="selectProject = true">
|
||||
{{ lineList[lineKey].name }}
|
||||
|
||||
<uni-icons type="bottom" size="18" color="#fff"></uni-icons>
|
||||
</view> </picker
|
||||
></view>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
所属工程：<view>{{ device.engineeringName }}</view>
|
||||
@@ -29,10 +25,9 @@
|
||||
</view>
|
||||
|
||||
<view class="info-item status">
|
||||
通讯状态：<view
|
||||
class="status-normal"
|
||||
:style="{ color: device.runStatus == 1 ? '#ff3b30' : '#00ff88' }"
|
||||
>{{ device.runStatus == 1 ? '离线' : '在线' }}
|
||||
通讯状态：<view class="status-normal"
|
||||
:style="{ color: device.runStatus == 1 ? '#ff3b30' : '#00ff88' }">{{ device.runStatus ==
|
||||
1 ? '离线' : '在线' }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -47,80 +42,78 @@
|
||||
{{ disabled ? `刷新(${countdown}s)` : '刷新' }}
|
||||
</button>
|
||||
</view>
|
||||
|
||||
<!-- 仪表盘 -->
|
||||
<view>
|
||||
<view class="chartBox">
|
||||
<view>
|
||||
<view class="chart">
|
||||
<l-echart
|
||||
ref="echartV1"
|
||||
@finished="initChart('echartV1', 'echartsDataV1')"
|
||||
></l-echart>
|
||||
<l-echart ref="echartV1"
|
||||
@finished="initChart('echartV1', 'echartsDataV1')"></l-echart>
|
||||
</view>
|
||||
<view class="chart">
|
||||
<l-echart
|
||||
ref="echartV2"
|
||||
@finished="initChart('echartV2', 'echartsDataV2')"
|
||||
></l-echart>
|
||||
<l-echart ref="echartV2"
|
||||
@finished="initChart('echartV2', 'echartsDataV2')"></l-echart>
|
||||
</view>
|
||||
<view class="chart">
|
||||
<l-echart
|
||||
ref="echartV3"
|
||||
@finished="initChart('echartV3', 'echartsDataV3')"
|
||||
></l-echart>
|
||||
<l-echart ref="echartV3"
|
||||
@finished="initChart('echartV3', 'echartsDataV3')"></l-echart>
|
||||
</view>
|
||||
<view class="text" style="left: 20rpx"> 电压有效值(kV) </view>
|
||||
</view>
|
||||
<view class="middle" style="width: 100%">
|
||||
<l-echart
|
||||
class="echart1"
|
||||
ref="echart0"
|
||||
@finished="initChart('echart0', 'echartsData0')"
|
||||
></l-echart>
|
||||
<l-echart
|
||||
class="echart1"
|
||||
ref="echart1"
|
||||
@finished="initChart('echart1', 'echartsData1')"
|
||||
></l-echart>
|
||||
<l-echart class="echart1" ref="echart0"
|
||||
@finished="initChart('echart0', 'echartsData0')"></l-echart>
|
||||
<l-echart class="echart1" ref="echart1"
|
||||
@finished="initChart('echart1', 'echartsData1')"></l-echart>
|
||||
<view class="text text_center"> 基波电压/电流<br />幅值(相位) </view>
|
||||
</view>
|
||||
<view>
|
||||
<view class="chart">
|
||||
<l-echart
|
||||
ref="echartA1"
|
||||
@finished="initChart('echartA1', 'echartsDataA1')"
|
||||
></l-echart>
|
||||
<l-echart ref="echartA1"
|
||||
@finished="initChart('echartA1', 'echartsDataA1')"></l-echart>
|
||||
</view>
|
||||
<view class="chart">
|
||||
<l-echart
|
||||
ref="echartA2"
|
||||
@finished="initChart('echartA2', 'echartsDataA2')"
|
||||
></l-echart>
|
||||
<l-echart ref="echartA2"
|
||||
@finished="initChart('echartA2', 'echartsDataA2')"></l-echart>
|
||||
</view>
|
||||
<view class="chart">
|
||||
<l-echart
|
||||
ref="echartA3"
|
||||
@finished="initChart('echartA3', 'echartsDataA3')"
|
||||
></l-echart>
|
||||
<l-echart ref="echartA3"
|
||||
@finished="initChart('echartA3', 'echartsDataA3')"></l-echart>
|
||||
</view>
|
||||
<view class="text" style="right: 20rpx"> 电流有效值(A) </view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部数据表格 -->
|
||||
<view class="data-table">
|
||||
<view class="table-header">
|
||||
<text></text>
|
||||
<text>A相</text>
|
||||
<text>B相</text>
|
||||
<text>C相</text>
|
||||
</view>
|
||||
<view class="table-row" v-for="value in realTimeData">
|
||||
<text>{{ value.name }}</text>
|
||||
<text>{{ value.A }}</text>
|
||||
<text>{{ value.B }}</text>
|
||||
<text>{{ value.C }}</text>
|
||||
<!-- 底部指标数据 -->
|
||||
<view class="params-wrap">
|
||||
|
||||
<view class="params-section">
|
||||
<view v-for="(rowItems, rowIdx) in chunkedChildren(realTimeData)" :key="rowIdx"
|
||||
class="double-row">
|
||||
<view v-for="(child, childIdx) in rowItems" :key="childIdx" class="param-group">
|
||||
<view class="param-title">
|
||||
<text>{{ child.name }}</text>
|
||||
</view>
|
||||
<view class="phase-vertical">
|
||||
<view class="phase-item-vertical">
|
||||
<text class="phase-value-vertical"
|
||||
:style="{ color: phaseColors[0].color }">{{ child.A }}</text>
|
||||
</view>
|
||||
<view class="phase-divider" />
|
||||
<view class="phase-item-vertical">
|
||||
<text class="phase-value-vertical"
|
||||
:style="{ color: phaseColors[1].color }">{{ child.B }}</text>
|
||||
</view>
|
||||
<view class="phase-divider" />
|
||||
<view class="phase-item-vertical">
|
||||
<text class="phase-value-vertical"
|
||||
:style="{ color: phaseColors[2].color }">{{ child.C }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -173,12 +166,17 @@ export default {
|
||||
{ name: '电压有效值(kV)', A: '/', B: '/', C: '/' },
|
||||
{ name: '电流有效值(A)', A: '/', B: '/', C: '/' },
|
||||
{ name: '基波电压幅值(kV)', A: '/', B: '/', C: '/' },
|
||||
{ name: '基波电压相位(°)', A: '/', B: '/', C: '/' },
|
||||
{ name: '基波电流幅值(A)', A: '/', B: '/', C: '/' },
|
||||
{ name: '基波电压相位(°)', A: '/', B: '/', C: '/' },
|
||||
{ name: '基波电流相位(°)', A: '/', B: '/', C: '/' },
|
||||
{ name: '电压偏差(%)', A: '/', B: '/', C: '/' },
|
||||
{ name: '电压总谐波畸变率(%)', A: '/', B: '/', C: '/' },
|
||||
],
|
||||
phaseColors: [
|
||||
{ name: 'A相', color: '#F1B22E' },
|
||||
{ name: 'B相', color: '#2BA471' },
|
||||
{ name: 'C相', color: '#D54941' },
|
||||
],
|
||||
disabled: false,
|
||||
countdown: 30,
|
||||
lineId: '00B78D00A87A1',
|
||||
@@ -267,6 +265,14 @@ export default {
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 将指标列表按每行两个分组
|
||||
chunkedChildren(children) {
|
||||
const result = []
|
||||
for (let i = 0; i < children.length; i += 2) {
|
||||
result.push(children.slice(i, i + 2))
|
||||
}
|
||||
return result
|
||||
},
|
||||
initEcharts0() {
|
||||
return {
|
||||
tooltip: { show: false },
|
||||
@@ -783,8 +789,8 @@ export default {
|
||||
{ name: '电压有效值(kV)', A: data.vRmsA, B: data.vRmsB, C: data.vRmsC },
|
||||
{ name: '电流有效值(A)', A: data.iRmsA, B: data.iRmsB, C: data.iRmsC },
|
||||
{ name: '基波电压幅值(kV)', A: data.v1A, B: data.v1B, C: data.v1C },
|
||||
{ name: '基波电压相位(°)', A: data.v1AngA, B: data.v1AngB, C: data.v1AngC },
|
||||
{ name: '基波电流幅值(A)', A: data.i1A, B: data.i1B, C: data.i1C },
|
||||
{ name: '基波电压相位(°)', A: data.v1AngA, B: data.v1AngB, C: data.v1AngC },
|
||||
{ name: '基波电流相位(°)', A: data.i1AngA, B: data.i1AngB, C: data.i1AngC },
|
||||
{ name: '电压偏差(%)', A: data.vDevA, B: data.vDevB, C: data.vDevC },
|
||||
{ name: '电压总谐波畸变率(%)', A: data.vThdA, B: data.vThdB, C: data.vThdC },
|
||||
@@ -800,7 +806,7 @@ export default {
|
||||
],
|
||||
) *
|
||||
1.2) /
|
||||
10,
|
||||
10,
|
||||
) * 10
|
||||
this.echartsDataV1.series[0].max = vMax
|
||||
this.echartsDataV2.series[0].max = vMax
|
||||
@@ -820,7 +826,7 @@ export default {
|
||||
],
|
||||
) *
|
||||
1.2) /
|
||||
10,
|
||||
10,
|
||||
) * 10
|
||||
this.echartsDataA1.series[0].max = aMax
|
||||
this.echartsDataA2.series[0].max = aMax
|
||||
@@ -873,8 +879,8 @@ export default {
|
||||
{ name: '电压有效值(kV)', A: '/', B: '/', C: '/' },
|
||||
{ name: '电流有效值(A)', A: '/', B: '/', C: '/' },
|
||||
{ name: '基波电压幅值(kV)', A: '/', B: '/', C: '/' },
|
||||
{ name: '基波电压相位(°)', A: '/', B: '/', C: '/' },
|
||||
{ name: '基波电流幅值(A)', A: '/', B: '/', C: '/' },
|
||||
{ name: '基波电压相位(°)', A: '/', B: '/', C: '/' },
|
||||
{ name: '基波电流相位(°)', A: '/', B: '/', C: '/' },
|
||||
{ name: '电压偏差(%)', A: '/', B: '/', C: '/' },
|
||||
{ name: '电压总谐波畸变率(%)', A: '/', B: '/', C: '/' },
|
||||
@@ -993,30 +999,38 @@ export default {
|
||||
padding: 20rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
// padding: 20rpx;
|
||||
.info-card {
|
||||
background-image: url('/static/background.png');
|
||||
background-position: center center; /* 水平+垂直居中 */
|
||||
background-repeat: no-repeat; /* 不平铺 */
|
||||
background-size: 100% 100%; /* 覆盖整个容器（可选，根据需求调整） */
|
||||
background-position: center center;
|
||||
/* 水平+垂直居中 */
|
||||
background-repeat: no-repeat;
|
||||
/* 不平铺 */
|
||||
background-size: 100% 100%;
|
||||
/* 覆盖整个容器（可选，根据需求调整） */
|
||||
color: #fff;
|
||||
padding: 20rpx 40rpx;
|
||||
border-radius: 20rpx;
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 10rpx;
|
||||
|
||||
view {
|
||||
// font-size: 28rpx;
|
||||
// .nav-menu {
|
||||
// font-size: 32rpx;
|
||||
// }
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.status {
|
||||
.status-normal {
|
||||
// font-weight: bold;
|
||||
@@ -1024,33 +1038,92 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.data-table {
|
||||
.params-wrap {
|
||||
margin-top: 20rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 10rpx;
|
||||
overflow: hidden;
|
||||
.table-header,
|
||||
.table-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 15rpx 30rpx;
|
||||
height: 20px;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
text {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
// color: #333;
|
||||
&:first-child {
|
||||
text-align: left;
|
||||
flex: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
.table-header {
|
||||
// background-color: #fafafa;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.legend-row {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding: 0rpx 20rpx 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.legend-dot {
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.legend-text {
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.params-section {
|
||||
padding: 16rpx 16rpx 20rpx;
|
||||
}
|
||||
|
||||
.double-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 16rpx;
|
||||
margin-bottom: 16rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.param-group {
|
||||
min-width: 0;
|
||||
background: #f3f3f3;
|
||||
border-radius: 16rpx;
|
||||
padding: 16rpx 8rpx 12rpx;
|
||||
}
|
||||
|
||||
.param-title {
|
||||
font-size: 26rpx;
|
||||
color: #666666;
|
||||
margin-bottom: 8rpx;
|
||||
padding-left: 4rpx;
|
||||
}
|
||||
|
||||
.phase-vertical {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.phase-item-vertical {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 4rpx;
|
||||
}
|
||||
|
||||
.phase-value-vertical {
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.phase-divider {
|
||||
width: 1px;
|
||||
background: #d2d2d2;
|
||||
margin: 8rpx 0;
|
||||
}
|
||||
|
||||
.time-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -1059,50 +1132,59 @@ export default {
|
||||
background-color: #fff;
|
||||
margin: 20rpx 0 0;
|
||||
border-radius: 10rpx;
|
||||
|
||||
.time {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
|
||||
text {
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chartBox {
|
||||
background-color: #fff;
|
||||
padding: 0 0rpx 20rpx;
|
||||
display: flex;
|
||||
padding-bottom: 55rpx;
|
||||
|
||||
.middle {
|
||||
display: flex;
|
||||
position: relative;
|
||||
height: 600rpx;
|
||||
margin: 0 10rpx;
|
||||
flex: 1;
|
||||
|
||||
.echart1 {
|
||||
position: absolute;
|
||||
height: 500rpx;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.chart {
|
||||
width: 170rpx;
|
||||
height: 200rpx;
|
||||
margin-bottom: 5rpx;
|
||||
}
|
||||
|
||||
.text {
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.text_center {
|
||||
bottom: -5px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(50%);
|
||||
}
|
||||
}
|
||||
|
||||
.mini-btn {
|
||||
font-size: 24rpx;
|
||||
border-radius: 45rpx;
|
||||
|
||||
Reference in New Issue
Block a user