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

绘制关键指标概览页面

Browse Source
This commit is contained in:
guanj
2026-05-29 16:23:56 +08:00
parent 7bcc68a9df
commit 276ef60389
28 changed files with 2202 additions and 1234 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
common/api/harmonic.js
View File

@@ -10,7 +10,7 @@ export function getModuleState(params) {
}
export function getBaseRealData(id) {
return request({
url: '/cs-harmonic-boot/realData/getBaseRealData?lineId='+id,
url: '/cs-harmonic-boot/realData/getBaseRealData?lineId=' + id,
method: 'post',
})
}
@@ -46,4 +46,12 @@ export function queryAppHarmonicLine(params) {
'Content-Type': 'application/json',
},
})
}
}
// 暂态事件波形分析
export function analyseWave(params) {
return request({
url: '/cs-harmonic-boot/event/analyseWave',
method: 'get',
params,
})
}

79
components/Cn-MultipleTree/Cn-MultipleTree.vue
View File

@@ -3,26 +3,14 @@
<view class="tki-tree-mask" :class="{ show: showTree }" @tap="_cancel"></view>
<view class="tki-tree-cnt" :class="{ show: showTree }">
<view class="tki-tree-bar">
<view class="tki-tree-bar-cancel" :style="{ color: cancelColor }" hover-class="hover-c" @tap="_cancel"
>取消</view
>
<view class="tki-tree-bar-cancel" :style="{ color: cancelColor }" hover-class="hover-c" @tap="_cancel">
取消</view>
<view class="tki-tree-bar-title" :style="{ color: titleColor }">{{ title }}</view>
<view
class="tki-tree-bar-confirm"
:style="{ color: confirmColor }"
hover-class="hover-c"
@tap="_confirm"
>确定</view
>
<view class="tki-tree-bar-confirm" :style="{ color: confirmColor }" hover-class="hover-c"
@tap="_confirm">确定</view>
</view>
<view class="tki-tree-bar1">
<uni-search-bar
class="uni-input"
radius="5"
placeholder="请输入关键字搜索"
clearButton="none"
@input="input"
/>
<uni-search-bar class="uni-input" radius="5" placeholder="请输入关键字搜索" clearButton="none" @input="input" />
<!-- <uni-search-bar
v-model="searchValue"
@@ -36,49 +24,33 @@
<view class="tki-tree-view">
<scroll-view class="tki-tree-view-sc" :scroll-y="true">
<block v-for="(item, index) in treeList" :key="index">
<view
class="tki-tree-item"
:style="[
{
paddingLeft: item.rank * 15 + 'px',
zIndex: item.rank * -1 + 50,
},
]"
:class="{
<view class="tki-tree-item" :style="[
{
paddingLeft: item.rank * 15 + 'px',
zIndex: item.rank * -1 + 50,
},
]" :class="{
border: border === true,
show: item.show,
last: item.lastRank,
showchild: item.showChild,
open: item.open,
}"
>
}">
<view class="tki-tree-label" @tap.stop="_treeItemTap(item, index)">
<image
class="tki-tree-icon"
:src="item.lastRank ? lastIcon : item.showChild ? currentIcon : defaultIcon"
></image>
<image class="tki-tree-icon"
:src="item.lastRank ? lastIcon : item.showChild ? currentIcon : defaultIcon">
</image>
{{ item.name }}
</view>
<view
class="tki-tree-check"
@tap.stop="_treeItemSelect(item, index)"
v-if="selectParent ? true : item.lastRank"
>
<view
class="tki-tree-check-yes"
v-if="item.checked"
:style="{ 'border-color': confirmColor }"
>
<view
class="tki-tree-check-yes-b"
:style="{ 'background-color': confirmColor }"
></view>
<view class="tki-tree-check" @tap.stop="_treeItemSelect(item, index)"
v-if="selectParent ? true : item.lastRank">
<view class="tki-tree-check-yes" v-if="item.checked"
:style="{ 'border-color': confirmColor }">
<view class="tki-tree-check-yes-b" :style="{ 'background-color': confirmColor }">
</view>
</view>
<view
class="tki-tree-check-no"
v-if="!item.checked"
:style="{ 'border-color': confirmColor }"
></view>
<view class="tki-tree-check-no" v-if="!item.checked"
:style="{ 'border-color': confirmColor }"></view>
</view>
</view>
</block>
@@ -527,7 +499,12 @@ export default {
<style lang="scss" scoped>
@import './style.css';
/deep/ .uni-searchbar__box {
justify-content: left !important;
}
/deep/ .uni-input {
background: #ffffff
}
</style>

12
components/Cn-device-card/Cn-device-card.vue
View File

@@ -29,12 +29,12 @@
<!-- <text class="uni-card__header-content-subtitle uni-ellipsis">
{{ device.mac }}
</text> -->
<view class="event-desc mt10 mb8">
<view class="event-desc mt4 mb8">
<text>
工程名称：{{ device.engineeringName }}
工程：{{ device.engineeringName }}
</text>
<text>
项目名称：{{ device.projectName }}
项目：{{ device.projectName }}
</text>
</view>
@@ -61,11 +61,11 @@
</template>
<!-- <view class="device-body">
<view class="device-body-item">
<text>工程名称</text>
<text>工程</text>
<text>{{ device.engineeringName }}</text>
</view>
<view class="device-body-item mt6">
<text>项目名称</text>
<text>项目</text>
<text>{{ device.projectName }}</text>
</view>
<view class="device-body-item mt6" v-if="device.process == 2 || device.process == 3">
@@ -283,7 +283,7 @@ export default {
}
.event-desc text {
font-size: 28rpx;
font-size: 24rpx;
color: #666666;
line-height: 1.2;
}

2
components/Cn-filterInformation/Cn-filterInformation.vue
View File

@@ -148,7 +148,7 @@ export default {
lineDisplayText() {
const list = this.select.lineList || []
if (!list.length) {
return '全部工程'
return '筛选监测点'
}
const text = list
.map((item) => item.name)

4
components/Cn-icon-transient/Cn-icon-transient.vue
View File

@@ -120,7 +120,7 @@ export default {
</svg>`
} else if (this.name == '报告') {
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="47" height="47">
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="37" height="37">
<path d="M12,12 L78,12 L88,22 L88,88 L12,88 Z" fill="none" stroke="#007aff" stroke-width="4" stroke-linejoin="round"/>
<path d="M78,12 L78,22 L88,22" fill="none" stroke="#007aff" stroke-width="4" stroke-linejoin="round"/>
<polyline points="20,50 26,50 28,46 30,42 32,46 34,50 36,54 38,58 40,54 42,50 44,46 46,42 48,46 50,50 56,50" fill="none" stroke="#007aff" stroke-width="4" stroke-linecap="round"/>
@@ -130,7 +130,7 @@ export default {
<line x1="76" y1="74" x2="86" y2="84" stroke="#007aff" stroke-width="4" stroke-linecap="round"/>
</svg>`
} else if (this.name == '监测点') {
return `<svg t="1779762122379" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3577" width="38" height="38"><path d="M875.17148 230.296136c30.706152 56.294611 46.059227 122.824606 46.059227 194.472293 0 107.47153-40.941535 209.825369-107.47153 286.590748 0 0 0 5.117692-5.117692 5.117692l-261.002288 286.590748c0 5.117692-5.117692 10.235384-5.117692 10.235383-15.353076 10.235384-30.706152 15.353076-46.059227 5.117692-5.117692 0-10.235384-5.117692-15.353076-10.235384v-5.117691L209.87153 716.476869s-5.117692-5.117692-5.117692-10.235384c-66.529995-76.765379-102.353838-174.001525-102.353838-281.473056C102.4 189.354601 286.636909 0 511.815354 0c81.883071 0 153.530758 25.58846 220.060752 66.529995 5.117692 0 5.117692 5.117692 10.235384 5.117692h5.117692c46.059227 35.823843 81.883071 81.883071 112.589222 133.05999 10.235384 5.117692 15.353076 15.353076 15.353076 25.588459z m-163.766141-92.118454c-5.117692 0-10.235384-5.117692-15.353076-10.235384-51.176919-35.823843-112.589222-56.294611-179.119217-56.294611-189.354601 0-337.767667 158.64845-337.767667 353.120742 0 92.118455 30.706152 174.001525 87.000762 235.413829l20.470768 20.470767 20.470768 20.470768 143.295374 153.530758L511.815354 931.41993l71.647687-76.765379 143.295373-153.530758 5.117692-5.117692 35.823844-40.941535c0-5.117692 5.117692-5.117692 10.235384-5.117692 51.176919-61.412303 81.883071-143.295374 81.88307-230.296136-5.117692-112.589222-66.529995-214.943061-148.413065-281.473056z m-199.589985 460.592273c-92.118455 0-163.766141-76.765379-163.766142-174.001526C348.049212 332.649975 419.696899 255.884596 511.815354 255.884596c92.118455 0 163.766141 76.765379 163.766141 174.001525 0 92.118455-71.647687 168.883833-163.766141 168.883834z m0-271.237672c-51.176919 0-97.236146 46.059227-97.236147 102.353838s46.059227 102.353838 97.236147 102.353839c51.176919 0 97.236146-46.059227 97.236146-102.353839s-46.059227-102.353838-97.236146-102.353838z" fill="#007aff" p-id="3578"></path></svg>`
return `<svg t="1779762122379" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3577" width="33" height="33"><path d="M875.17148 230.296136c30.706152 56.294611 46.059227 122.824606 46.059227 194.472293 0 107.47153-40.941535 209.825369-107.47153 286.590748 0 0 0 5.117692-5.117692 5.117692l-261.002288 286.590748c0 5.117692-5.117692 10.235384-5.117692 10.235383-15.353076 10.235384-30.706152 15.353076-46.059227 5.117692-5.117692 0-10.235384-5.117692-15.353076-10.235384v-5.117691L209.87153 716.476869s-5.117692-5.117692-5.117692-10.235384c-66.529995-76.765379-102.353838-174.001525-102.353838-281.473056C102.4 189.354601 286.636909 0 511.815354 0c81.883071 0 153.530758 25.58846 220.060752 66.529995 5.117692 0 5.117692 5.117692 10.235384 5.117692h5.117692c46.059227 35.823843 81.883071 81.883071 112.589222 133.05999 10.235384 5.117692 15.353076 15.353076 15.353076 25.588459z m-163.766141-92.118454c-5.117692 0-10.235384-5.117692-15.353076-10.235384-51.176919-35.823843-112.589222-56.294611-179.119217-56.294611-189.354601 0-337.767667 158.64845-337.767667 353.120742 0 92.118455 30.706152 174.001525 87.000762 235.413829l20.470768 20.470767 20.470768 20.470768 143.295374 153.530758L511.815354 931.41993l71.647687-76.765379 143.295373-153.530758 5.117692-5.117692 35.823844-40.941535c0-5.117692 5.117692-5.117692 10.235384-5.117692 51.176919-61.412303 81.883071-143.295374 81.88307-230.296136-5.117692-112.589222-66.529995-214.943061-148.413065-281.473056z m-199.589985 460.592273c-92.118455 0-163.766141-76.765379-163.766142-174.001526C348.049212 332.649975 419.696899 255.884596 511.815354 255.884596c92.118455 0 163.766141 76.765379 163.766141 174.001525 0 92.118455-71.647687 168.883833-163.766141 168.883834z m0-271.237672c-51.176919 0-97.236146 46.059227-97.236147 102.353838s46.059227 102.353838 97.236147 102.353839c51.176919 0 97.236146-46.059227 97.236146-102.353839s-46.059227-102.353838-97.236146-102.353838z" fill="#007aff" p-id="3578"></path></svg>`
}
},
},

6
pages.json
View File

@@ -128,6 +128,12 @@
"navigationBarTitleText": "监测点电能质量信息"
}
},
{
"path": "pages/index/comp/targetInfo",
"style": {
"navigationBarTitleText": "指标详情"
}
},
{
"path": "pages/mine/system",
"style": {

1550
pages/device/APF/detail.vue
View File

File diff suppressed because it is too large Load Diff

4
pages/device/APF/report.vue
View File

@@ -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'">

264
pages/device/realTime/index.vue
View File

@@ -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;

11
pages/index/comp/apply.vue
View File

@@ -61,9 +61,9 @@
}}</text>
</view>
<view class="event-desc">
<text>工程名称：{{ item.engineeringName }}</text>
<text>项目名称：{{ item.projectName }}</text>
<text>设备名称：{{ item.equipmentName }}</text>
<text>工程：{{ item.engineeringName }}</text>
<text>项目：{{ item.projectName }}</text>
<text>设备：{{ item.equipmentName }}</text>
</view>
</view>
<view class="event-action" @click="handleWrapperClick(item, !item.wavePath)">
@@ -92,6 +92,11 @@
? '，相别：' + item.evtParamPhase
: ''
}}
{{
item.landPoint != null && item.landPoint !== ''
? '，落点区域：' + item.landPoint
: ''
}}
</text>
</view>
</uni-card>

830
pages/index/comp/monitoringPoint.vue
View File

@@ -1,119 +1,283 @@
<template>
<view class="dashboard-container">
<!-- 页面头部 -->
<view class="page-header">
<Cn-filterInformation @select="select" />
<view class="legend-row">
<view class="legend-item">
<view class="legend-color" style="background:#DAA520"></view>
<text class="legend-text">A相</text>
<view class="itic2-page">
<scroll-view class="itic2-scroll" scroll-y :show-scrollbar="false">
<view class="project-header card">
<view class="project-title-row">
<view class="project-title-left">
<uni-icons custom-prefix="iconfont" type="icon-gongcheng" size="22" color="#376cf3" />
<text class="project-name">{{ engineeringName }}</text>
</view>
<view class="switch-btn" @click="switchEngineering">
<uni-icons type="loop" size="14" color="#376cf3" />
<text>切换工程</text>
</view>
</view>
<view class="legend-item">
<view class="legend-color" style="background:#2E8B57"></view>
<text class="legend-text">B相</text>
</view>
<view class="legend-item">
<view class="legend-color" style="background:#A52A2A"></view>
<text class="legend-text">C相</text>
<view class="stats-row">
<view class="stats-item" v-for="(item, idx) in summaryStats" :key="idx">
<text class="stats-num">{{ item.value }}</text>
<text class="stats-label">{{ item.label }}</text>
</view>
</view>
</view>
</view>
<!-- 监测点列表 - 竖向滚动 -->
<scroll-view class="monitors-scroll" scroll-y :show-scrollbar="true">
<view class="monitors-list">
<view v-for="(point, idx) in monitoringPoints" :key="idx" class="monitor-card">
<!-- 卡片头部 -->
<view class="card-header">
<view class="event-icon">
<view class="monitor-section-header">
<view class="section-title-row section-title-row--no-mb">
<uni-icons type="settings" size="18" color="#376cf3" />
<text class="section-title">已选展示指标</text>
</view>
</view>
<view class="indicators-card card">
<view class="indicator-tags">
<view
v-for="(tag, idx) in selectedIndicators"
:key="tag"
class="indicator-tag indicator-tag--active"
@click="removeIndicator(idx)"
>
<text class="indicator-tag-text">{{ formatIndicatorTag(tag) }}</text>
<uni-icons type="closeempty" size="12" color="#376cf3" />
</view>
<view class="indicator-tag indicator-tag--add" @click="openIndicatorPopup">
<text>+添加指标</text>
</view>
</view>
</view>
<Cn-icon-transient :name="`监测点`" />
</view>
<view class="card-header-info">
<view class="point-name">
<text class="point-text ellipsis">{{ point.pointName }}</text>
</view>
<view class="meta-row">
<text class="meta-item ellipsis">工程: {{ point.projectName }}</text>
<text class="meta-item ellipsis">项目: {{ point.siteName }}</text>
<text class="meta-item ellipsis meta-item-full">设备: {{ point.deviceName }}</text>
</view>
<view class="monitor-section">
<view class="monitor-section-header">
<view class="section-title-row section-title-row--no-mb">
<uni-icons type="map-pin-ellipse" size="20" color="#376cf3" />
<text class="section-title">监测点信息</text>
</view>
<view class="legend-row">
<view class="legend-item" v-for="phase in phaseColors" :key="phase.name">
<view class="legend-dot" :style="{ background: phase.color }" />
<text class="legend-text">{{ phase.name }}</text>
</view>
</view>
</view>
<!-- 参数区域：使用 children 数据循环，每两个指标放一行 -->
<view class="params-section">
<view v-for="(rowItems, rowIdx) in chunkedChildren(point.children)" :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 class="monitor-list">
<view class="monitor-card card" v-for="(point, idx) in monitoringPoints" :key="idx">
<view class="card-header">
<view class="event-icon">
<Cn-icon-transient name="监测点" />
</view>
<view class="card-header-info">
<text class="point-name ellipsis">{{ point.pointName }}</text>
<view class="meta-row">
<text class="meta-item ellipsis">项目：{{ point.projectName }}</text>
<text class="meta-item ellipsis">设备：{{ point.deviceName }}</text>
</view>
<!-- 三相数据：颜色区分，无文字 -->
<view class="phase-vertical">
<view class="phase-item-vertical">
<text class="phase-value-vertical" style="color:#DAA520">{{ child.A }}</text>
<text class="meta-time ellipsis">最新数据时间：{{ point.dataTime || '-' }}</text>
</view>
</view>
<view class="params-section">
<view
v-for="(rowItems, rowIdx) in chunkedChildren(getDisplayChildren(point))"
: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-divider"></view>
<view class="phase-item-vertical">
<text class="phase-value-vertical" style="color:#2E8B57">{{ child.B }}</text>
</view>
<view class="phase-divider"></view>
<view class="phase-item-vertical">
<text class="phase-value-vertical" style="color:#A52A2A">{{ child.C }}</text>
<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 class="more-btn" @click="onMoreIndicators(point)">
<uni-icons type="list" size="16" color="#376cf3" />
<text>更多指标</text>
</view>
</view>
</view>
</view>
</scroll-view>
<uni-popup ref="indicatorPopup" type="bottom">
<view class="indicator-popup">
<view class="indicator-popup-header">
<text class="indicator-popup-cancel" @click="closeIndicatorPopup">取消</text>
<text class="indicator-popup-confirm" @click="confirmIndicatorPopup">确定</text>
</view>
<scroll-view class="indicator-popup-list" scroll-y>
<view v-if="targetLists.length === 0" class="indicator-popup-empty">
<text>暂无指标数据</text>
</view>
<view
v-for="item in targetLists"
:key="item.id || item.name"
class="indicator-popup-item"
:class="{ 'indicator-popup-item--active': popupSelectedIndicators.includes(item.name) }"
@click="togglePopupIndicator(item.name)"
>
<text>{{ item.name }}</text>
<uni-icons
v-if="popupSelectedIndicators.includes(item.name)"
type="checkmarkempty"
size="18"
color="#376cf3"
/>
</view>
</scroll-view>
</view>
</uni-popup>
</view>
</template>
<script>
import { queryByCode, queryCsDictTree } from '@/common/api/dictionary'
const DEFAULT_INDICATOR_CODES = ['Key_Power_Quality_V', 'Key_Power_Quality_I']
export default {
data() {
return {
// 监测点基础信息 + children 指标数据
targetLists: [],
popupSelectedIndicators: [],
engineeringName: '',
summaryStats: [
{ label: '项目总数', value: 10 },
{ label: '设备总数', value: 8 },
{ label: '监测点总数', value: 12 },
],
selectedIndicators: [],
phaseColors: [
{ name: 'A相', color: '#F1B22E' },
{ name: 'B相', color: '#2BA471' },
{ name: 'C相', color: '#D54941' },
],
monitoringPoints: [
{
pointName: "升压站#1主变测点",
projectName: "华光100MW工程11111",
siteName: "绿色智慧能源11111",
deviceName: "PMC-800终端",
pointName: '测试监测点',
projectName: '测试项目',
deviceName: '测试设备',
dataTime: '2026-05-29 12:00:00',
children: [
{ name: '电压有效值(kV)', A: '10.52', B: '10.45', C: '10.39' },
{ name: '电流有效值(A)', A: '408.0', B: '395.0', C: '403.0' },
{ name: '基波电压幅值(kV)', A: '10.48', B: '10.42', C: '10.35' },
{ name: '基波电流幅值(A)', A: '405.5', B: '392.8', C: '400.2' }
]
{ name: '电压总有效值', A: '10.52', B: '10.52', C: '10.52' },
{ name: '电流总有效值', A: '10.52', B: '10.52', C: '10.52' },
{ name: '基波电压幅值', A: '10.52', B: '10.52', C: '10.52' },
{ name: '基波电流幅值', A: '10.52', B: '10.52', C: '10.52' },
],
},
{
pointName: "光伏区#3汇流箱",
projectName: "华光100MW工程",
siteName: "绿色智慧能源示范",
deviceName: "汇流监测单元",
children: [
{ name: '电压有效值(kV)', A: '10.72', B: '10.65', C: '10.59' },
{ name: '电流有效值(A)', A: '426.0', B: '413.0', C: '421.0' },
{ name: '基波电压幅值(kV)', A: '10.68', B: '10.62', C: '10.55' },
{ name: '基波电流幅值(A)', A: '423.5', B: '410.8', C: '418.2' }
]
},
],
// 三相颜色配置
phaseColors: [
{ name: 'A相', color: '#DAA520' },
{ name: 'B相', color: '#2E8B57' },
{ name: 'C相', color: '#A52A2A' }
]
}
},
// 页面显示时同步工程名称
onShow() {
const engineering = uni.getStorageSync('engineering')
if (engineering?.name) {
this.engineeringName = engineering.name
}
},
// 加载电能质量指标字典
created() {
queryByCode('Key_Power_Quality').then((res) => {
queryCsDictTree(res.data.id).then((resp) => {
this.targetLists = (resp.data || []).slice().reverse()
this.initDefaultIndicators()
})
})
},
methods: {
// 将 children 数组每两个一组进行分组，用于一行显示两个指标
// 指标名称超过6个字截断显示
formatIndicatorTag(name) {
if (!name || name.length <= 6) return name
return `${name.slice(0, 6)}...`
},
// 判断指标名称是否匹配（兼容括号后缀）
matchIndicator(name, selected) {
const base = (name || '').replace(/\(.*\)/, '')
return base.indexOf(selected) === 0 || selected.indexOf(base) === 0
},
// 初始化默认勾选指标
initDefaultIndicators() {
if (this.selectedIndicators.length) return
this.selectedIndicators = this.targetLists
.filter((item) => DEFAULT_INDICATOR_CODES.includes(item.code) && item.name)
.map((item) => item.name)
},
// 跳转切换工程
switchEngineering() {
uni.navigateTo({ url: '/pages/home/selectEngineering' })
},
// 移除已选指标
removeIndicator(idx) {
if (this.selectedIndicators.length <= 1) {
uni.showToast({ title: '至少保留一个指标', icon: 'none' })
return
}
this.selectedIndicators.splice(idx, 1)
},
// 打开指标选择弹窗
openIndicatorPopup() {
if (!this.targetLists.length) {
uni.showToast({ title: '暂无指标数据', icon: 'none' })
return
}
this.popupSelectedIndicators = this.targetLists
.filter((item) => this.selectedIndicators.some((name) => this.matchIndicator(item.name, name)))
.map((item) => item.name)
this.$refs.indicatorPopup.open()
},
// 关闭指标选择弹窗
closeIndicatorPopup() {
this.$refs.indicatorPopup.close()
this.popupSelectedIndicators = []
},
// 切换弹窗内指标勾选状态
togglePopupIndicator(name) {
const idx = this.popupSelectedIndicators.indexOf(name)
if (idx > -1) {
this.popupSelectedIndicators.splice(idx, 1)
} else {
this.popupSelectedIndicators.push(name)
}
},
// 确认指标选择
confirmIndicatorPopup() {
if (!this.popupSelectedIndicators.length) {
uni.showToast({ title: '至少保留一个指标', icon: 'none' })
return
}
this.selectedIndicators = [...this.popupSelectedIndicators]
this.closeIndicatorPopup()
},
// 查看更多指标
onMoreIndicators(point) {
const params = encodeURIComponent(
JSON.stringify({
...point,
engineeringName: this.engineeringName,
selectedIndicators: this.selectedIndicators,
}),
)
uni.navigateTo({
url: `/pages/index/comp/targetInfo?point=${params}`,
})
},
// 获取监测点当前展示的指标数据
getDisplayChildren(point) {
return (point.children || []).filter((child) =>
this.selectedIndicators.some((name) => this.matchIndicator(child.name, name)),
)
},
// 将指标列表按每行两个分组
chunkedChildren(children) {
const result = []
for (let i = 0; i < children.length; i += 2) {
@@ -121,52 +285,167 @@ export default {
}
return result
},
select(value) {
console.log("🚀 ~ value:", value)
},
}
},
}
</script>
<style>
* {
<style lang="scss" scoped>
.itic2-page {
min-height: 100vh;
background: #f7f8fa;
}
.itic2-scroll {
height: 100vh;
padding-top: 20rpx;
box-sizing: border-box;
}
.dashboard-container {
min-height: 100vh;
background: #f5f7fb;
padding: 20rpx 20rpx 0rpx 20rpx;
.card {
background: #ffffff;
border-radius: 10px;
box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 3px 1px;
margin: 0 10px 10px;
overflow: hidden;
}
.project-header {
padding: 20rpx;
// margin-top: 20rpx;
}
.project-title-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20rpx;
}
.project-title-left {
display: flex;
align-items: center;
gap: 12rpx;
flex: 1;
min-width: 0;
}
.project-name {
font-size: 32rpx;
font-weight: 700;
color: #333333;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.switch-btn {
display: flex;
align-items: center;
gap: 6rpx;
padding: 8rpx 20rpx;
border: 1rpx solid #376cf380;
background-color: #266FFF10;
border-radius: 16rpx;
flex-shrink: 0;
text {
font-size: 24rpx;
color: #376cf3;
}
}
.stats-row {
display: flex;
gap: 20rpx;
}
.stats-item {
flex: 1;
display: flex;
flex-direction: column;
}
/* 头部样式 */
.page-header {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
flex-shrink: 0;
justify-content: center;
gap: 4rpx;
padding: 16rpx 12rpx;
background: #376cf3;
border-radius: 16rpx;
color: #ffffff;
}
.title-section {
display: flex;
align-items: baseline;
gap: 12rpx;
}
.title-icon {
font-size: 40rpx;
}
.title {
font-size: 34rpx;
.stats-num {
font-size: 44rpx;
font-weight: 700;
color: #2c3e50;
line-height: 1.2;
}
.stats-label {
font-size: 26rpx;
}
.indicators-card {
padding: 24rpx;
}
.section-title-row {
display: flex;
align-items: center;
gap: 10rpx;
margin-bottom: 20rpx;
&--no-mb {
margin-bottom: 0;
}
}
.section-title {
font-size: 30rpx;
font-weight: 600;
color: #333333;
}
.indicator-tags {
display: flex;
flex-wrap: wrap;
gap: 16rpx;
}
.indicator-tag {
display: flex;
align-items: center;
gap: 8rpx;
padding: 6rpx 16rpx;
border-radius: 16rpx;
font-size: 26rpx;
max-width: 100%;
.indicator-tag-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
&--active {
background: #376cf315;
color: #376cf3;
}
&--add {
background: #f5f5f5;
color: #666666;
border: 1rpx dashed #dcdfe6;
}
}
.monitor-section-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12rpx;
padding: 0 10px 16rpx;
}
/* 图例 */
.legend-row {
display: flex;
gap: 20rpx;
@@ -176,174 +455,209 @@ export default {
.legend-item {
display: flex;
align-items: center;
gap: 6rpx;
gap: 8rpx;
}
.legend-color {
width: 24rpx;
height: 24rpx;
.legend-dot {
width: 16rpx;
height: 16rpx;
border-radius: 50%;
}
.legend-text {
font-size: 24rpx;
color: #333;
font-weight: 500;
color: #666666;
}
/* 竖向滚动区域 */
.monitors-scroll {
flex: 1;
max-height: calc(100vh - 100rpx);
}
.monitors-list {
.monitor-list {
display: flex;
flex-direction: column;
gap: 20rpx;
padding-bottom: 20rpx;
padding-bottom: 40rpx;
}
/* 卡片样式 */
.monitor-card {
background: #ffffff;
border-radius: 20rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
overflow: hidden;
display: flex;
flex-direction: column;
border: 1rpx solid #e8ecf0;
border: 1rpx solid #eef2f6;
box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 3px 1px;
}
.card-header {
padding: 20rpx 20rpx 10rpx 20rpx;
padding: 20rpx 20rpx 12rpx;
display: flex;
align-items: center;
border-bottom: 1rpx solid #eef2f6;
display: flex;
align-items: center;
}
.card-header-info {
flex: 1;
min-width: 0;
overflow: hidden;
}
.point-name {
margin-bottom: 4rpx;
}
.point-text {
display: block;
font-size: 30rpx;
font-weight: 700;
color: #333333;
}
/* 工程、项目、设备：两列布局，超出显示省略号 */
.meta-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6rpx 8rpx;
width: 100%;
}
.meta-item {
display: block;
min-width: 0;
font-size: 24rpx;
color: #666666;
line-height: 1.3;
}
.meta-item-full {
grid-column: 1 / -1;
}
/* 参数区域 */
.params-section {
padding: 20rpx 16rpx 24rpx 16rpx;
flex: 1;
}
.double-row {
display: flex;
gap: 16rpx;
margin-bottom: 16rpx;
flex-wrap: wrap;
}
.double-row:last-child {
margin-bottom: 0;
}
.param-group {
flex: 1;
min-width: 200rpx;
background: transparent;
border-radius: 20rpx;
padding: 12rpx 8rpx 8rpx;
border: 1rpx solid #e8ecf0;
}
.param-title {
font-size: 24rpx;
color: #666666;
font-weight: 650;
margin-bottom: 4rpx;
display: flex;
align-items: center;
gap: 8rpx;
padding-left: 4rpx;
}
/* 三相数据垂直布局 */
.phase-vertical {
display: flex;
align-items: stretch;
justify-content: space-between;
gap: 0;
}
.phase-item-vertical {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 4rpx 4rpx;
}
.phase-value-vertical {
font-size: 28rpx;
font-weight: 700;
display: block;
letter-spacing: -0.5rpx;
}
/* 竖线分割 */
.phase-divider {
width: 1rpx;
background-color: #e0e4e8;
margin: 8rpx 0;
}
/* 文字溢出显示省略号 */
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}
.event-icon {
position: relative;
width: 110rpx;
height: 110rpx;
border-radius: 12rpx;
width: 90rpx;
height: 90rpx;
border-radius: 16rpx;
display: flex;
justify-content: center;
align-items: center;
margin-right: 20rpx;
background-color: #376cf320;
flex-shrink: 0;
}
</style>
.card-header-info {
flex: 1;
min-width: 0;
}
.point-name {
display: block;
font-size: 30rpx;
font-weight: 700;
color: #333333;
margin-bottom: 8rpx;
}
.meta-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6rpx 12rpx;
}
.meta-item {
font-size: 26rpx;
color: #666666;
line-height: 1.3;
}
.meta-time {
display: block;
margin-top: 8rpx;
font-size: 26rpx;
color: #666666;
line-height: 1.3;
}
.params-section {
padding: 20rpx 16rpx;
}
.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: 24rpx;
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;
}
.more-btn {
margin: 0 20rpx 20rpx;
height: 72rpx;
line-height: 72rpx;
text-align: center;
border: 1rpx solid #376cf380;
background-color: #266FFF10;
border-radius: 16rpx;
text {
font-size: 28rpx;
color: #376cf3;
font-weight: 500;
}
}
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.indicator-popup {
background: #ffffff;
overflow: hidden;
}
.indicator-popup-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18rpx 32rpx;
border-bottom: 1rpx solid #eef2f6;
}
.indicator-popup-cancel {
font-size: 27rpx;
color: #666666;
min-width: 80rpx;
}
.indicator-popup-confirm {
font-size: 28rpx;
color: #376cf3;
min-width: 80rpx;
text-align: right;
}
.indicator-popup-list {
max-height: 60vh;
padding: 16rpx 0;
box-sizing: border-box;
}
.indicator-popup-empty {
padding: 80rpx 0;
text-align: center;
font-size: 28rpx;
color: #999999;
}
.indicator-popup-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 28rpx 32rpx;
font-size: 28rpx;
color: #333333;
&--active {
color: #376cf3;
background: #376cf310;
}
}
</style>

2
pages/index/comp/steadyState.vue
View File

@@ -332,6 +332,8 @@ export default {
/* 图标区域（按类型区分背景色） */
.event-icon {
background-color: #376cf320;
width: 90rpx;
height: 90rpx;
}
.event-tags {

245
pages/index/comp/targetInfo.vue Normal file
View File

@@ -0,0 +1,245 @@
<template>
<view class="target-info-page">
<scroll-view class="target-info-scroll" scroll-y :show-scrollbar="false">
<view class="monitor-card card">
<view class="card-header">
<view class="event-icon">
<Cn-icon-transient name="监测点" />
</view>
<view class="card-header-info">
<text class="point-name ellipsis">{{ pointInfo.pointName }}</text>
<view class="meta-row">
<text class="meta-item ellipsis">项目：{{ pointInfo.projectName }}</text>
<text class="meta-item ellipsis">设备：{{ pointInfo.deviceName }}</text>
</view>
<text class="meta-time ellipsis">最新数据时间：{{ pointInfo.dataTime || '-' }}</text>
</view>
</view>
<view class="legend-row">
<view class="legend-item" v-for="phase in phaseColors" :key="phase.name">
<view class="legend-dot" :style="{ background: phase.color }" />
<text class="legend-text">{{ phase.name }}</text>
</view>
</view>
<view class="params-section">
<view
v-for="(rowItems, rowIdx) in chunkedChildren(pointInfo.children || [])"
: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>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
pointInfo: {},
phaseColors: [
{ name: 'A相', color: '#F1B22E' },
{ name: 'B相', color: '#2BA471' },
{ name: 'C相', color: '#D54941' },
],
}
},
onLoad(options) {
if (options.point) {
this.pointInfo = JSON.parse(decodeURIComponent(options.point))
}
},
methods: {
// 将指标列表按每行两个分组
chunkedChildren(children) {
const result = []
for (let i = 0; i < children.length; i += 2) {
result.push(children.slice(i, i + 2))
}
return result
},
},
}
</script>
<style lang="scss" scoped>
.target-info-page {
min-height: 100vh;
background: #f7f8fa;
}
.target-info-scroll {
height: 100vh;
box-sizing: border-box;
padding: 20rpx 0 40rpx;
}
.card {
background: #ffffff;
border-radius: 10px;
box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 1px 1px;
margin: 0 10px;
overflow: hidden;
}
.monitor-card {
border: 1rpx solid #eef2f6;
}
.card-header {
padding: 20rpx 20rpx 12rpx;
display: flex;
align-items: center;
border-bottom: 1rpx solid #eef2f6;
}
.event-icon {
width: 90rpx;
height: 90rpx;
border-radius: 16rpx;
display: flex;
justify-content: center;
align-items: center;
margin-right: 20rpx;
background-color: #376cf320;
flex-shrink: 0;
}
.card-header-info {
flex: 1;
min-width: 0;
}
.point-name {
display: block;
font-size: 30rpx;
font-weight: 700;
color: #333333;
margin-bottom: 8rpx;
}
.meta-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6rpx 12rpx;
}
.meta-item {
font-size: 26rpx;
color: #666666;
line-height: 1.3;
}
.meta-time {
display: block;
margin-top: 8rpx;
font-size: 26rpx;
color: #666666;
line-height: 1.3;
}
.legend-row {
display: flex;
gap: 20rpx;
align-items: center;
padding: 16rpx 20rpx;
}
.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: 0 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: #f9fafb;
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;
}
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>

9
pages/index/comp/transient.vue
View File

@@ -39,9 +39,9 @@
<text class="event-id">{{ item.lineName }}</text>
</view>
<view class="event-desc">
<text>工程名称：{{ item.engineeringName }}</text>
<text>项目名称：{{ item.projectName }}</text>
<text>设备名称：{{ item.deviceName }}</text>
<text>工程：{{ item.engineeringName }}</text>
<text>项目：{{ item.projectName }}</text>
<text>设备：{{ item.deviceName }}</text>
<!-- <text>申请时间：{{ item.time }}</text>
<text>事件数：{{ item.eventNums }}</text> -->
</view>
@@ -327,9 +327,10 @@ export default {
.device-body-item {
display: flex;
// justify-content: space-between;
font-size: 28rpx;
font-size: 26rpx;
color: #666666;
line-height: 1.5;
}

2
pages/index/index.vue
View File

@@ -37,7 +37,7 @@
<template v-else v-show="engineeringList.length">
<view class="canneng-index-title mt20">
<view>设备列表</view>
<view class="nav-menu nav-menu-btn boxClick" @click="jump">电能质量信息 </view>
<view class="nav-menu nav-menu-btn boxClick" @click="jump">关键指标概览 </view>
</view>
<Device ref="device" :store="store" />
</template>

2
pages/index/mine.vue
View File

@@ -76,7 +76,7 @@
<view
class="mine-nav"
@click="jump('engineering/setting')"
v-if="userInfo.authorities === 'engineering_user' || userInfo.authorities !== 'tourist'"
v-if="userInfo.authorities === 'engineering_user' || userInfo.authorities == 'operation_manager'"
>
<image mode="aspectFill" class="mine-nav-icon" src="/static/like.png" />
<view class="mine-nav-label">关注工程配置</view>

6
pages/message/message.vue
View File

@@ -18,10 +18,10 @@
<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 }} {{ item.projectName }}</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 class="content-item-header-right-des" v-if="type == '0' || type == '1'"
>监测点名称：{{ item.lineName }}
>监测点：{{ item.lineName }}
</view
>
<view class="content-item-header-right-des" v-if="type == '0'"

8
pages/message/messageDetail.vue
View File

@@ -7,10 +7,10 @@
</view>
<view class="detail-content">
<view class="detail-content-title mb20">基础信息</view>
<view class="mb5"> 设备名称：{{ detail.equipmentName }}</view>
<view class="mb5"> 项目名称：{{ detail.projectName }} </view>
<view class="mb5"> 工程名称：{{ detail.engineeringName }} </view>
<view class="mb5"> 事件名称：{{ detail.showName }}</view>
<view class="mb5"> 设备：{{ detail.equipmentName }}</view>
<view class="mb5"> 项目：{{ detail.projectName }} </view>
<view class="mb5"> 工程：{{ detail.engineeringName }} </view>
<view class="mb5"> 事件：{{ detail.showName }}</view>
<view class="mb5" v-for="(item, textIndex) in detail.dataSet" :key="textIndex">
{{ item.showName + '：' + (item.value == 3.1415926 ? '-' : item.value) + (item.unit || '') }}
</view>

8
pages/message1/alarm.vue
View File

@@ -28,7 +28,7 @@
</view>
<view class="event-desc">
<text>告警终端总数：{{ item.warnNums }}台</text>
<text v-if="item.onlineRateIsWarn ">在线率偏低</text>
<text v-if="item.onlineRateIsWarn">在线率偏低</text>
<text v-if="item.integrityIsWarn">完整性偏低</text>
<text v-if="item.warnCounts > 0">事件触发终端告警：{{ item.warnCounts }}次</text>
@@ -92,7 +92,7 @@ export default {
let str = JSON.stringify(item).replace(/%/g, '百分比')
uni.navigateTo({ url: '/pages/message1/comp/alarmDetails?detail=' + encodeURIComponent(str) })
item.isRead = 1
},
// 下拉
refresherrefresh() {
@@ -155,4 +155,8 @@ export default {
/deep/ .uni-scroll-view-refresher {
display: none;
}
.event-header {
margin-bottom: 0rpx !important;
}
</style>

6
pages/message1/comp/alarmDetails.vue
View File

@@ -34,8 +34,8 @@
item.devType == 'Direct_Connected_Device' ? '治理设备' : '监测设备' }}</text>
</view>
<view class="event-desc">
<text>工程名称：{{ item.engineeringName }}</text>
<text>项目名称：{{ item.projectName }}</text>
<text>工程：{{ item.engineeringName }}</text>
<text>项目：{{ item.projectName }}</text>
<!-- <text v-if="item.dataDetails.onlineRate.isAbnormal">在线率：{{
item.dataDetails.onlineRate.value }}%　限值：{{ item.dataDetails.onlineRate.threshold
}}% </text> -->
@@ -55,7 +55,7 @@
数据完整性：
<view class="data-table">
<view class="table-header">
<text>监测点名称</text>
<text>监测点</text>
<text>完整性</text>
</view>
<view class="table-row"

8
pages/message1/comp/steadyStateDetails.vue
View File

@@ -7,10 +7,10 @@
</view>
<view class="detail-content">
<view class="detail-content-title mb20">基础信息</view>
<view class="mb5"> 工程名称：{{ detail.engineeringName }} </view>
<view class="mb5"> 项目名称：{{ detail.projectName }} </view>
<view class="mb5"> 设备名称：{{ detail.devName }} </view>
<view class="mb5"> 监测点名称：{{ detail.lineName }}</view>
<view class="mb5"> 工程：{{ detail.engineeringName }} </view>
<view class="mb5"> 项目：{{ detail.projectName }} </view>
<view class="mb5"> 设备：{{ detail.devName }} </view>
<view class="mb5"> 监测点：{{ detail.lineName }}</view>
<view class="mb5" style="display: flex">
越限详情：
<view style="flex: 1" class="details">{{ detail.overLimitDesc }}</view>

96
pages/message1/comp/transientDetails.vue
View File

@@ -6,14 +6,15 @@
</view>
<view class="detail-content">
<view class="detail-content-title mb20">基础信息</view>
<view class="mb5"> 工程名称：{{ detail.engineeringName }} </view>
<view class="mb5"> 项目名称：{{ detail.projectName }} </view>
<view class="mb5"> 设备名称：{{ detail.equipmentName }}</view>
<view class="mb5"> 监测点名称：{{ detail.lineName }}</view>
<view class="mb5"> 工程：{{ detail.engineeringName }} </view>
<view class="mb5"> 项目：{{ detail.projectName }} </view>
<view class="mb5"> 设备：{{ detail.equipmentName }}</view>
<view class="mb5"> 监测点：{{ detail.lineName }}</view>
<view class="mb5"> 暂态类型：{{ detail.showName }}</view>
<view class="mb5" v-if="detail.evtParamTm"> 持续时间：{{ detail.evtParamTm }}s</view>
<view class="mb5" v-if="detail.evtParamVVaDepth"> 幅值：{{ detail.evtParamVVaDepth }}%</view>
<view class="mb5" v-if="detail.evtParamPhase"> 相别：{{ detail.evtParamPhase }}</view>
<view class="mb5" v-if="detail.landPoint"> 落点区域：{{ detail.landPoint }}</view>
</view>
<view class="detail-tabs">
<uni-segmented-control :current="detailTab" active-color="#376cf3" :values="['波形图', 'ITIC', 'F47']"
@@ -22,14 +23,24 @@
<view v-if="detailTab == 0">
<view class="detail-content">
<view class="detail-content-title mb20">瞬时波形图</view>
<image style="width: 100%" :src="detail.instantPics" mode="widthFix" v-if="detail.instantPics"
<!-- <image style="width: 100%" :src="detail.instantPics" mode="widthFix" v-if="detail.instantPics"
@click="previewImage(detail.instantPics)" />
<text v-else>暂无</text> -->
<view v-if="listWaveData.length > 0">
<waveform v-for="(value, ind) in listWaveData" :index="ind" :unit="unit" :data="value"
style="height: 150px;" />
</view>
<text v-else>暂无</text>
</view>
<view class="detail-content">
<view class="detail-content-title mb20">RMS波形图</view>
<image style="width: 100%" :src="detail.rmsPics" mode="widthFix" v-if="detail.rmsPics"
<!-- <image style="width: 100%" :src="detail.rmsPics" mode="widthFix" v-if="detail.rmsPics"
@click="previewImage(detail.rmsPics)" />
<text v-else>暂无</text> -->
<view v-if="listRmsData.length > 0">
<waveform v-for="(value, ind) in listRmsData" :index="ind" :unit="unit" :data="value"
style="height: 150px;" />
</view>
<text v-else>暂无</text>
</view>
</view>
@@ -46,14 +57,21 @@
import { updateStatus } from '@/common/api/message'
import ITIC from './ITIC.vue'
import F47 from './F47.vue'
import waveform from './waveform.vue'
import { analyseWave } from '@/common/api/harmonic.js';
export default {
components: { ITIC, F47 },
components: { ITIC, F47, waveform },
data() {
return {
loading: true,
detail: {},
detailTab: 0,
listWaveData: [],
listRmsData: [],
unit: [],
list: {},
}
},
computed: {
@@ -74,6 +92,7 @@ export default {
},
},
onLoad(options) {
console.log("🚀 ~ options:", options)
this.detail = JSON.parse(decodeURIComponent(options.detail).replace(/百分比/g, '%'))
this.detail.rmsPics && (this.detail.rmsPics = this.$config.static + this.detail.rmsPics)
this.detail.instantPics && (this.detail.instantPics = this.$config.static + this.detail.instantPics)
@@ -84,6 +103,31 @@ export default {
eventIds: [this.detail.id],
})
}
analyseWave({
eventId: this.detail.id,
isApp: true
}).then(res => {
this.list = res.data
this.uni = []
// 数据
this.listWaveData = this.bindChartClickEvent(this.list.listWaveData)
this.listRmsData = this.bindChartClickEvent(this.list.listRmsData)
// 单位
this.unit = this.list.waveTitle.slice(1).reduce((acc, _, i, arr) => {
if (i % 3 === 0) {
const group = arr.slice(i, i + 3);
const type = group[0]?.startsWith('U') ? 'kV' :
group[0]?.startsWith('I') ? 'A' : '';
acc.push(type);
}
return acc;
}, []);
})
},
methods: {
onDetailTabChange(e) {
@@ -94,6 +138,44 @@ export default {
url: `/pages/message1/comp/preview?url=${encodeURIComponent(url)}`,
})
},
bindChartClickEvent(data) {
let unit = this.list.waveTitle.slice(1).reduce((acc, _, i, arr) => {
const group = arr.slice(i, i + 3);
const type = group[0]?.startsWith('U') ? 'kV' :
group[0]?.startsWith('I') ? 'A' : '';
acc.push(type);
return acc;
}, []);
const result = [];
// 从第2列开始遍历（索引1），每3个一列分组
for (let i = 1; i < data[0].length; i += 3) {
const group = {
A: data.map(row => [row[0], this.calculate(row[i], unit[i])]), // 每组第1个 → A
B: data.map(row => [row[0], this.calculate(row[i + 1], unit[i])]), // 每组第2个 → B
C: data.map(row => [row[0], this.calculate(row[i + 2], unit[i])]), // 每组第3个 → C
};
result.push(group);
}
return result;
},
calculate(num, key) {
if (num === null) return null
let nums = ''
switch (key) {
case 'kV':
nums = num * Number(this.list.pt) / 1000
break
case 'A':
nums = num * Number(this.list.ct)
break
}
return nums
}
},
}
</script>

237
pages/message1/comp/waveform.vue Normal file
View File

@@ -0,0 +1,237 @@
<template>
<!-- ITIC -->
<view>
<l-echart ref="echartRef" @finished="initChart"></l-echart>
</view>
</template>
<script>
const echarts = require('../../../uni_modules/lime-echart/static/echarts.min')
export default {
components: {},
props: {
data: {
type: [Object],
},
index: {
type: [Number],
},
unit: {
type: [Array],
}
},
data() {
return {
option: {
backgroundColor: '#fff',
grid: {
left: '0px',
right: '10rpx',
bottom: '0rpx',
top: '25px',
containLabel: true,
},
legend: {
right: '10px',
top: '0px',
icon: 'rect',
itemWidth: 20,
itemHeight: 2,
itemGap: 8,
itemStyle: {
borderWidth: 0,
},
textStyle: {
fontSize: 10,
},
padding: [5, 5, 5, 10],
},
xAxis: {
type: 'category',
boundaryGap: false,
splitLine: { show: false },
axisLine: { show: true },
axisTick: { show: false },
axisLabel: {
fontSize: 10,
interval: 0,
},
},
yAxis: {
type: 'value',
name: '',
nameLocation: 'end',
nameGap: 10,
minInterval: 1,
nameTextStyle: {
fontSize: 12,
padding: [28, 10, 0, 0],
},
axisLine: {
show: true,
},
axisTick: {
show: true,
},
},
series: [
{
name: 'A相',
type: 'line',
data: [
],
showSymbol: false,
smooth: true,
tooltips: {
show: false,
},
color: '#DAA520',
},
{
name: 'B相',
type: 'line',
data: [
],
showSymbol: false,
smooth: true,
tooltips: {
show: false,
},
color: '#2E8B57',
},
{
name: 'C相',
type: 'line',
data: [
],
showSymbol: false,
smooth: true,
tooltips: {
show: false,
},
color: '#A52a2a',
},
],
},
status: 'loading',
echartRef: null,
pointI: [],
xLabelShowIndices: new Set(),
}
},
mounted() {
// this.initChart()
// console.log('🚀 ~ props.data:', this.props.data)
},
methods: {
init() { },
async initChart() {
if (!this.$refs.echartRef) return
try {
this.echartRef = await this.$refs.echartRef.init(echarts)
this.setOption()
this.echartRef.setOption(this.option, true)
} catch (error) {
console.error('图表初始化失败:', error)
}
},
formatXAxisLabel(val, index) {
return this.xLabelShowIndices.has(index) ? String(val) : ''
},
getYAxisRange() {
const values = []
;['A', 'B', 'C'].forEach((key) => {
; (this.data[key] || []).forEach((p) => {
const v = p[1]
if (v !== null && v !== undefined && !Number.isNaN(Number(v))) {
values.push(Number(v))
}
})
})
if (!values.length) return {}
const dataMax = Math.max(...values)
const dataMin = Math.min(...values)
let min = 0
let max = 0
if (dataMin > 0) {
min = Math.floor(dataMin / 1.3)
} else {
min = Math.floor(dataMin * 1.3)
}
if (dataMax > 0) {
max = Math.ceil(dataMax * 1.3)
} else {
max = Math.ceil(dataMax / 1.3)
}
if (min === max) {
min -= 1
max += 1
}
return { min, max }
},
buildXLabelShowIndices(xLabels) {
const len = xLabels.length
if (len === 0) return new Set()
const showIndices = new Set([0, len - 1])
const zeroIdx = xLabels.findIndex((x) => Number(x) === 0)
if (zeroIdx >= 0) {
showIndices.add(zeroIdx)
} else if (len > 2) {
showIndices.add(Math.floor((len - 1) / 2))
}
return showIndices
},
setOption() {
if (!this.data) return
if (this.index == 0) {
this.option.legend.show = true
} else {
this.option.legend.show = false
}
this.option.yAxis.name = this.unit[this.index]
const points = this.data.A || []
const xLabels = points.map((p) => p[0])
this.xLabelShowIndices = this.buildXLabelShowIndices(xLabels)
this.option.xAxis.data = xLabels
this.option.xAxis.axisLabel.formatter = (val, index) => this.formatXAxisLabel(val, index)
this.option.series[0].data = points.map((p) => p[1])
this.option.series[1].data = (this.data.B || []).map((p) => p[1])
this.option.series[2].data = (this.data.C || []).map((p) => p[1])
const { min, max } = this.getYAxisRange()
this.option.yAxis.min = min
this.option.yAxis.max = max
},
},
computed: {},
watch: {
},
}
</script>
<style lang="scss" scoped></style>

4
pages/message1/index.scss
View File

@@ -150,7 +150,7 @@
gap: 8rpx;
}
.event-desc text {
font-size: 28rpx;
font-size: 24rpx;
color: #666666;
line-height: 1.2;
}
@@ -172,7 +172,7 @@
/* 详情文本 */
.event-detail {
font-size: 28rpx;
font-size: 26rpx;
color: #666666;
line-height: 1.5;
padding-top: 10rpx;

5
pages/message1/run.vue
View File

@@ -25,8 +25,8 @@
== 'Direct_Connected_Device' ? '治理设备' : '监测设备' }}</text>
</view>
<view class="event-desc">
<text>工程名称：{{ item.engineeringName }}</text>
<text>项目名称：{{ item.projectName }}</text>
<text>工程：{{ item.engineeringName }}</text>
<text>项目：{{ item.projectName }}</text>
<text>事件时间：{{ item.startTime2 }}</text>
</view>
</view>
@@ -155,4 +155,5 @@ export default {
/deep/ .uni-scroll-view-refresher {
display: none;
}
</style>

12
pages/message1/steadyState.vue
View File

@@ -54,9 +54,9 @@
<text class="event-id">{{ item.lineName }}</text>
</view>
<view class="event-desc">
<text>工程名称：{{ item.engineeringName }}</text>
<text>项目名称：{{ item.projectName }}</text>
<text>设备名称：{{ item.devName }}</text>
<text>工程：{{ item.engineeringName }}</text>
<text>项目：{{ item.projectName }}</text>
<text>设备：{{ item.devName }}</text>
<!-- <text>统计日期：{{ item.statisticsDate }}</text> -->
</view>
</view>
@@ -117,9 +117,9 @@
<text class="event-id">{{ item.lineName }}</text>
</view>
<view class="event-desc">
<text>工程名称：{{ item.engineeringName }}</text>
<text>项目名称：{{ item.projectName }}</text>
<text>设备名称：{{ item.devName }}</text>
<text>工程：{{ item.engineeringName }}</text>
<text>项目：{{ item.projectName }}</text>
<text>设备：{{ item.devName }}</text>
<!-- <text>统计日期：{{ item.statisticsDate }}</text> -->
</view>
</view>

10
pages/message1/transient.vue
View File

@@ -59,9 +59,9 @@
}}</text>
</view>
<view class="event-desc">
<text>工程名称：{{ item.engineeringName }}</text>
<text>项目名称：{{ item.projectName }}</text>
<text>设备名称：{{ item.equipmentName }}</text>
<text>工程：{{ item.engineeringName }}</text>
<text>项目：{{ item.projectName }}</text>
<text>设备：{{ item.equipmentName }}</text>
</view>
</view>
<view class="event-action">
@@ -86,6 +86,10 @@
item.evtParamPhase != null && item.evtParamPhase !== ''
? '，相别：' + item.evtParamPhase
: ''
}} {{
item.landPoint != null && item.landPoint !== ''
? '，落点区域：' + item.landPoint
: ''
}}
</text>
</view>

2
uni_modules/uni-card/components/uni-card/uni-card.vue
View File

@@ -138,7 +138,7 @@
padding: 0 $uni-spacing-sm;
border-radius: 20rpx;
overflow: hidden;
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
// font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
background-color: #fff;
flex: 1;