联调app关键指标功能

This commit is contained in:
guanj
2026-06-01 20:36:04 +08:00
parent 236ab4aa75
commit edc5dc55aa
25 changed files with 713 additions and 213 deletions

View File

@@ -3,7 +3,9 @@
<uni-load-more status="loading" v-if="IOData.length == 0"></uni-load-more>
<view class="basic" v-else>
<view class="grid-card">
<view class="grid-card-title">温度</view>
<text>
<view class="grid-card-title grid-card-title-with-icon"></view>温度
</text>
<view class="grid-card-content-4">
<template v-for="item in renderData">
<view class="item item-title">{{ item[0].clDid }}
@@ -28,7 +30,10 @@
<!-- 运维管理员工程用户 可看 -->
<view class="grid-card"
v-if="(userInfo.authorities == 'operation_manager' || userInfo.authorities == 'engineering_user') && moduleData.length > 0">
<view class="grid-card-title">状态</view>
<view class="grid-card-title">
<text><view class="grid-card-title-with-icon"></view>状态</text>
</view>
<view class="grid-card-content-4">
<template v-for="(item, index) in moduleData">
<view class="item item-title">{{ item[0].moduleName }}
@@ -149,5 +154,24 @@ export default {
}
</script>
<style lang="scss">
.basic {}
.basic {
.grid-card-title-with-icon {
display: inline-flex;
align-items: center;
position: relative;
padding-left: 20rpx;
&::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 8rpx;
height: 28rpx;
background: $uni-theme-color;
border-radius: 3rpx;
}
}
}
</style>

View File

@@ -1,10 +1,14 @@
<template>
<view>
<uni-load-more status="loading"
v-if="renderData.电网电流.length == 0 || renderData.电网电压.length == 0 || renderData.负载电流.length == 0 || renderData.补偿电流.length == 0 "></uni-load-more>
v-if="renderData.电网电流.length == 0 || renderData.电网电压.length == 0 || renderData.负载电流.length == 0 || renderData.补偿电流.length == 0"></uni-load-more>
<view class="basic" v-else>
<view class="grid-card">
<view class="grid-card-title">电网电流</view>
<text>
<view class="grid-card-title grid-card-title-with-icon"></view>电网电流
</text>
<view class="grid-card-content-3">
<view class="item item-title">名称</view>
<view class="item item-title">有效值(A)</view>
@@ -13,15 +17,19 @@
<view class="item">{{ item.phase }}</view>
<view class="item">{{
item['Apf_RmsI_Sys(A)'] > 0 ? item['Apf_RmsI_Sys(A)'].toFixed(2) : item['Apf_RmsI_Sys(A)']
}}</view>
}}</view>
<view class="item">{{
item['Apf_ThdA_Sys(%)'] > 0 ? item['Apf_ThdA_Sys(%)'].toFixed(2) : item['Apf_ThdA_Sys(%)']
}}</view>
}}</view>
</template>
</view>
</view>
<view class="grid-card">
<view class="grid-card-title">电网电压</view>
<text>
<view class="grid-card-title grid-card-title-with-icon"></view>电网电压
</text>
<view class="grid-card-content-4">
<view class="item item-title">名称</view>
<view class="item item-title">电压(V)</view>
@@ -31,18 +39,22 @@
<view class="item">{{ item.phase }}</view>
<view class="item">{{
item['Apf_PhV_Sys(V)'] > 0 ? item['Apf_PhV_Sys(V)'].toFixed(2) : item['Apf_PhV_Sys(V)']
}}</view>
}}</view>
<view class="item">{{
item['Apf_Freq(Hz)'] > 0 ? item['Apf_Freq(Hz)'].toFixed(2) : item['Apf_Freq(Hz)']
}}</view>
}}</view>
<view class="item">{{
item['Apf_ThdU_Sys(%)'] > 0 ? item['Apf_ThdU_Sys(%)'].toFixed(2) : item['Apf_ThdU_Sys(%)']
}}</view>
}}</view>
</template>
</view>
</view>
<view class="grid-card">
<view class="grid-card-title">负载电流</view>
<text>
<view class="grid-card-title grid-card-title-with-icon"></view>负载电流
</text>
<view class="grid-card-content-3">
<view class="item item-title">名称</view>
<view class="item item-title">有效值(A)</view>
@@ -63,7 +75,11 @@
</view>
</view>
<view class="grid-card">
<view class="grid-card-title">补偿电流</view>
<text>
<view class="grid-card-title grid-card-title-with-icon"></view>补偿电流
</text>
<view class="grid-card-content-3">
<view class="item item-title">名称</view>
<view class="item item-title">有效值(A)</view>
@@ -180,5 +196,24 @@ export default {
}
</script>
<style lang="scss">
.basic {}
.basic {
.grid-card-title-with-icon {
display: inline-flex;
align-items: center;
position: relative;
padding-left: 20rpx;
&::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 8rpx;
height: 28rpx;
background: $uni-theme-color;
border-radius: 3rpx;
}
}
}
</style>

View File

@@ -3,7 +3,9 @@
<uni-load-more status="loading" v-if="renderData.电网侧.length == 0 || renderData.负载侧.length == 0"></uni-load-more>
<view class="basic" v-else>
<view class="grid-card">
<view class="grid-card-title">电网侧</view>
<text>
<view class="grid-card-title grid-card-title-with-icon"></view>电网侧
</text>
<view class="grid-card-content-5">
<view class="item item-title">名称</view>
<view class="item item-title">有功功率(kW)</view>
@@ -26,7 +28,9 @@
</view>
</view>
<view class="grid-card">
<view class="grid-card-title">负载侧</view>
<text>
<view class="grid-card-title grid-card-title-with-icon"></view>负载侧
</text>
<view class="grid-card-content-5">
<view class="item item-title">名称</view>
<view class="item item-title">有功功率(kW)</view>
@@ -40,7 +44,7 @@
</view>
<view class="item">{{
item['Apf_Q_Load(Var)'] == '-' ? '-' : (item['Apf_Q_Load(Var)'] / 1000).toFixed(2)
}}</view>
}}</view>
<view class="item">{{ item['Apf_S_Load(VA)'] == '-' ? '-' : (item['Apf_S_Load(VA)'] /
1000).toFixed(2) }}
</view>
@@ -130,5 +134,24 @@ export default {
}
</script>
<style lang="scss">
.basic {}
.basic {
.grid-card-title-with-icon {
display: inline-flex;
align-items: center;
position: relative;
padding-left: 20rpx;
&::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 8rpx;
height: 28rpx;
background: $uni-theme-color;
border-radius: 3rpx;
}
}
}
</style>

View File

@@ -163,14 +163,14 @@ export default {
userInfo: {},
realTime: '',
realTimeData: [
{ name: '电压有效值(kV)', A: '/', B: '/', C: '/' },
{ name: '电流有效值(A)', A: '/', B: '/', C: '/' },
{ name: '基波电压幅值(kV)', A: '/', B: '/', C: '/' },
{ name: '基波电流幅值(A)', A: '/', B: '/', C: '/' },
{ name: '基波电压相位(°)', A: '/', B: '/', C: '/' },
{ name: '基波电流相位(°)', A: '/', B: '/', C: '/' },
{ name: '电压偏差(%)', A: '/', B: '/', C: '/' },
{ name: '电压总谐波畸变率(%)', A: '/', B: '/', C: '/' },
{ name: '电压有效值(kV)', A: '-', B: '-', C: '-' },
{ name: '电流有效值(A)', A: '-', B: '-', C: '-' },
{ name: '基波电压幅值(kV)', 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' },
@@ -876,14 +876,14 @@ export default {
clear() {
this.realTime = ''
this.realTimeData = [
{ name: '电压有效值(kV)', A: '/', B: '/', C: '/' },
{ name: '电流有效值(A)', A: '/', B: '/', C: '/' },
{ name: '基波电压幅值(kV)', A: '/', B: '/', C: '/' },
{ name: '基波电流幅值(A)', A: '/', B: '/', C: '/' },
{ name: '基波电压相位(°)', A: '/', B: '/', C: '/' },
{ name: '基波电流相位(°)', A: '/', B: '/', C: '/' },
{ name: '电压偏差(%)', A: '/', B: '/', C: '/' },
{ name: '电压总谐波畸变率(%)', A: '/', B: '/', C: '/' },
{ name: '电压有效值(kV)', A: '-', B: '-', C: '-' },
{ name: '电流有效值(A)', A: '-', B: '-', C: '-' },
{ name: '基波电压幅值(kV)', A: '-', B: '-', C: '-' },
{ name: '基波电流幅值(A)', A: '-', B: '-', C: '-' },
{ name: '基波电压相位(°)', A: '-', B: '-', C: '-' },
{ name: '基波电流相位(°)', A: '-', B: '-', C: '-' },
{ name: '电压偏差(%)', A: '-', B: '-', C: '-' },
{ name: '电压总谐波畸变率(%)', A: '-', B: '-', C: '-' },
]
this.echartsDataV1.series[0].data[0].value = 0
this.echartsDataV2.series[0].data[0].value = 0

View File

@@ -117,7 +117,7 @@ export default {
uni.removeStorage({
key: this.$cacheKey.engineering,
})
} else if (engineering && !res.data.some((item) => (item.id = engineering.id))) {
} else if (engineering && !res.data.some((item) => (item.id == engineering.id))) {
uni.removeStorage({
key: this.$cacheKey.engineering,
})

View File

@@ -209,7 +209,7 @@ export default {
}
.project-name {
font-size: 28rpx;
font-size: 30rpx;
font-weight: 700;
color: #333333;
margin-bottom: 20rpx;
@@ -232,14 +232,14 @@ export default {
}
.stat-value {
font-size: 36rpx;
font-size: 32rpx;
font-weight: 700;
}
.stat-label {
font-size: 26rpx;
font-size: 24rpx;
margin-top: 5rpx;
// color: #666666;
color: #666666;
}
.blue {

View File

@@ -1,7 +1,10 @@
<template>
<view class="index-zhuyonghu">
<template v-if="devCount.engineeringListLength > 0">
<view class="canneng-index-title mb20">所有工程设备统计</view>
<view class="canneng-index-title mb20 canneng-index-title-with-icon">
<uni-icons custom-prefix="iconfont" type="icon-gongcheng" size="18" color="#376cf3" />
<text>所有工程设备统计</text>
</view>
<view class="header">
<view class="header-item boxClick" @click="jump('allEngineering')">
<view class="header-item-value">{{ devCount.onLineDevCount + devCount.offLineDevCount || 0 }}</view>
@@ -47,7 +50,10 @@
<view class="header-item-label">离线设备</view>
</view>
</view> -->
<view class="canneng-index-title mt20">常用功能</view>
<view class="canneng-index-title mt20 canneng-index-title-with-icon">
<uni-icons type="settings" size="18" color="#376cf3" />
<text>常用功能</text>
</view>
<view style="padding: 20rpx 20rpx 0">
<Cn-grid title="" :auto-fill="false">
<Cn-grid-item
@@ -205,4 +211,13 @@ export default {
},
}
</script>
<style lang="scss"></style>
<style lang="scss">
.index-zhuyonghu {
.canneng-index-title-with-icon {
display: inline-flex;
align-items: center;
gap: 8rpx;
font-size: 30rpx;
}
}
</style>

View File

@@ -1,7 +1,10 @@
<template>
<view class="index-zhuyonghu">
<template v-if="devCount.engineeringListLength > 1">
<view class="canneng-index-title mb20">所有工程设备统计</view>
<view class="canneng-index-title mb20 canneng-index-title-with-icon">
<uni-icons custom-prefix="iconfont" type="icon-gongcheng" size="18" color="#376cf3" />
<text>所有工程设备统计</text>
</view>
<view class="header">
<view class="header-item boxClick" @click="jump('allEngineering')">
<view class="header-item-value">{{ devCount.onLineDevCount + devCount.offLineDevCount || 0 }}</view>
@@ -18,7 +21,10 @@
</view>
<view class="mt20"></view>
</template>
<view class="canneng-index-title mb20">当前工程设备统计</view>
<view class="canneng-index-title mb20 canneng-index-title-with-icon">
<uni-icons custom-prefix="iconfont" type="icon-zaixianjianceshebei" size="18" color="#376cf3" />
<text>当前工程设备统计</text>
</view>
<view class="header">
<view class="header-item boxClick" @click="jump('nowEngineering')">
<view class="header-item-value">{{
@@ -68,4 +74,13 @@ export default {
},
}
</script>
<style lang="scss"></style>
<style lang="scss">
.index-zhuyonghu {
.canneng-index-title-with-icon {
display: inline-flex;
align-items: center;
gap: 8rpx;
font-size: 30rpx;
}
}
</style>

View File

@@ -1,7 +1,10 @@
<template>
<view class="index-zhuanzhi">
<template v-if="devCount.engineeringListLength > 1">
<view class="canneng-index-title mb20">所有工程设备统计</view>
<view class="canneng-index-title mb20 canneng-index-title-with-icon">
<uni-icons custom-prefix="iconfont" type="icon-gongcheng" size="18" color="#376cf3" />
<text>所有工程设备统计</text>
</view>
<view class="header">
<view class="header-item boxClick" @click="jump('allEngineering')">
<view class="header-item-value">{{ devCount.onLineDevCount + devCount.offLineDevCount || 0 }}</view>
@@ -32,7 +35,10 @@
</view>
<view class="mt20"></view>
</template>
<view class="canneng-index-title mb20">当前工程设备统计</view>
<view class="canneng-index-title mb20 canneng-index-title-with-icon">
<uni-icons custom-prefix="iconfont" type="icon-zaixianjianceshebei" size="18" color="#376cf3" />
<text>当前工程设备统计</text>
</view>
<view class="header">
<view class="header-item boxClick" @click="jump('nowEngineering')">
<view class="header-item-value">{{
@@ -131,5 +137,11 @@ export default {
</script>
<style lang="scss">
.index-zhuanzhi {
.canneng-index-title-with-icon {
display: inline-flex;
align-items: center;
gap: 8rpx;
font-size: 30rpx;
}
}
</style>

View File

@@ -1,7 +1,10 @@
<template>
<view class="index-zhuyonghu">
<template v-if="devCount.engineeringListLength > 1">
<view class="canneng-index-title mb20">所有工程设备统计</view>
<view class="canneng-index-title mb20 canneng-index-title-with-icon">
<uni-icons custom-prefix="iconfont" type="icon-gongcheng" size="18" color="#376cf3" />
<text>所有工程设备统计</text>
</view>
<view class="header">
<view class="header-item boxClick" @click="jump('allEngineering')">
<view class="header-item-value">{{ devCount.onLineDevCount + devCount.offLineDevCount || 0 }}</view>
@@ -18,7 +21,10 @@
</view>
<view class="mt20"></view>
</template>
<view class="canneng-index-title mb20">当前工程设备统计</view>
<view class="canneng-index-title mb20 canneng-index-title-with-icon">
<uni-icons custom-prefix="iconfont" type="icon-zaixianjianceshebei" size="18" color="#376cf3" />
<text>当前工程设备统计</text>
</view>
<view class="header">
<view class="header-item boxClick" @click="jump('nowEngineering')">
<view class="header-item-value"
@@ -43,7 +49,10 @@
<view class="header-item-label">稳态事件数</view>
</view>
</view>
<view class="canneng-index-title mt20">常用功能</view>
<view class="canneng-index-title mt20 canneng-index-title-with-icon">
<uni-icons type="settings" size="18" color="#376cf3" />
<text>常用功能</text>
</view>
<view style="padding: 20rpx 20rpx 0">
<Cn-grid title="">
<Cn-grid-item
@@ -171,4 +180,13 @@ export default {
},
}
</script>
<style lang="scss"></style>
<style lang="scss">
.index-zhuyonghu {
.canneng-index-title-with-icon {
display: inline-flex;
align-items: center;
gap: 8rpx;
font-size: 30rpx;
}
}
</style>

View File

@@ -1,7 +1,10 @@
<template>
<view class="index-zhuanzhi">
<template v-if="devCount.engineeringListLength > 1">
<view class="canneng-index-title mb20">所有工程设备统计</view>
<view class="canneng-index-title mb20 canneng-index-title-with-icon">
<uni-icons custom-prefix="iconfont" type="icon-gongcheng" size="18" color="#376cf3" />
<text>所有工程设备统计</text>
</view>
<view class="header">
<view class="header-item boxClick" @click="jump('allEngineering')">
<view class="header-item-value">{{ devCount.onLineDevCount + devCount.offLineDevCount || 0 }}</view>
@@ -30,7 +33,10 @@
</view>
<view class="mt20"></view>
</template>
<view class="canneng-index-title mb20">当前工程设备统计</view>
<view class="canneng-index-title mb20 canneng-index-title-with-icon">
<uni-icons custom-prefix="iconfont" type="icon-zaixianjianceshebei" size="18" color="#376cf3" />
<text>当前工程设备统计</text>
</view>
<view class="header">
<view class="header-item boxClick" @click="jump('nowEngineering')">
<view class="header-item-value"
@@ -127,5 +133,11 @@ export default {
</script>
<style lang="scss">
.index-zhuanzhi {
.canneng-index-title-with-icon {
display: inline-flex;
align-items: center;
gap: 8rpx;
font-size: 30rpx;
}
}
</style>

View File

@@ -1,6 +1,6 @@
<template>
<view class="itic2-page">
<scroll-view class="itic2-scroll" scroll-y :show-scrollbar="false">
<view class="itic2-content">
<view class="project-header card">
<view class="project-title-row">
<view class="project-title-left">
@@ -28,12 +28,8 @@
</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)"
>
<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>
@@ -74,26 +70,30 @@
</view>
<view class="params-section">
<view
v-for="(rowItems, rowIdx) in chunkedChildren(getDisplayChildren(point))"
:key="rowIdx"
class="double-row"
>
<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>
<text>{{ child.name }} {{ child.unit ? `(${child.unit})` : '' }}</text>
</view>
<view class="phase-vertical">
<view v-if="hasTPhaseData(child)" class="phase-single">
<text class="phase-value-vertical phase-value-vertical--neutral">{{ child.T
}}</text>
</view>
<view v-else class="phase-vertical">
<view class="phase-item-vertical">
<text class="phase-value-vertical" :style="{ color: phaseColors[0].color }">{{ child.A }}</text>
<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>
<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>
<text class="phase-value-vertical"
:style="{ color: phaseColors[2].color }">{{ child.C }}</text>
</view>
</view>
</view>
@@ -105,9 +105,16 @@
<text>更多指标</text>
</view>
</view>
<uni-load-more v-if="listStatus == 'loading' || monitoringPoints.length > 0"
:status="listStatus"></uni-load-more>
<Cn-empty v-else style="top: 35%"></Cn-empty>
</view>
</view>
</scroll-view>
</view>
<view class="back-top boxClick" v-show="showBackTop" @click="backToTop">
<uni-icons type="arrow-up" size="22" color="#fff"></uni-icons>
</view>
<uni-popup ref="indicatorPopup" type="bottom">
<view class="indicator-popup">
@@ -115,26 +122,18 @@
<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 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"
<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)"
>
@click="togglePopupIndicator(item.name)">
<text>{{ item.name }}</text>
<uni-icons
v-if="popupSelectedIndicators.includes(item.name)"
type="checkmarkempty"
size="18"
color="#376cf3"
/>
<uni-icons v-if="popupSelectedIndicators.includes(item.name)" type="checkmarkempty" size="18"
color="#376cf3" />
</view>
</scroll-view>
</view>
</view>
</uni-popup>
</view>
@@ -142,6 +141,8 @@
<script>
import { queryByCode, queryCsDictTree } from '@/common/api/dictionary'
import { getLineDataByEngineer } from '@/common/api/harmonic'
import { getDevCount } from '@/common/api/device.js'
const DEFAULT_INDICATOR_CODES = ['Key_Power_Quality_V', 'Key_Power_Quality_I']
@@ -151,10 +152,11 @@ export default {
targetLists: [],
popupSelectedIndicators: [],
engineeringName: '',
engineeringId: '',
summaryStats: [
{ label: '项目总数', value: 10 },
{ label: '设备总数', value: 8 },
{ label: '监测点总数', value: 12 },
{ label: '项目总数', value: 0 },
{ label: '设备总数', value: 0 },
{ label: '监测点总数', value: 0 },
],
selectedIndicators: [],
phaseColors: [
@@ -162,27 +164,25 @@ export default {
{ name: 'B相', color: '#2BA471' },
{ name: 'C相', color: '#D54941' },
],
monitoringPoints: [
{
pointName: '测试监测点',
projectName: '测试项目',
deviceName: '测试设备',
dataTime: '2026-05-29 12:00:00',
children: [
{ 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' },
],
},
],
monitoringPoints: [],
listStatus: 'noMore',
lineDataRequestId: 0,
showBackTop: false,
}
},
onPageScroll(e) {
this.showBackTop = e.scrollTop > 200
},
// 页面显示时同步工程名称
onShow() {
const engineering = uni.getStorageSync('engineering')
if (engineering?.name) {
this.engineeringName = engineering.name
if (engineering?.id) {
this.engineeringName = engineering.name || ''
this.engineeringId = engineering.id
this.info()
}
if (this.targetLists.length) {
this.loadSelectedIndicators()
}
},
// 加载电能质量指标字典
@@ -190,28 +190,145 @@ export default {
queryByCode('Key_Power_Quality').then((res) => {
queryCsDictTree(res.data.id).then((resp) => {
this.targetLists = (resp.data || []).slice().reverse()
this.initDefaultIndicators()
this.loadSelectedIndicators()
})
})
},
// 下拉刷新
onPullDownRefresh() {
this.info()
},
methods: {
// 查询接口
info() {
if (!this.engineeringId) {
uni.stopPullDownRefresh()
return
}
this.loadDevCount()
this.loadLineData()
},
loadDevCount() {
getDevCount(this.engineeringId).then((res) => {
if (res.code == 'A0000') {
this.updateSummaryStats(res.data)
}
})
},
loadLineData() {
this.listStatus = 'loading'
this.monitoringPoints = []
const requestId = ++this.lineDataRequestId
const engineerId = this.engineeringId
getLineDataByEngineer({ id: engineerId })
.then((res) => {
if (requestId !== this.lineDataRequestId) return
if (res.code == 'A0000') {
this.monitoringPoints = this.parseMonitoringPoints(res.data)
} else if (res.message) {
this.$util.toast(res.message)
}
})
.catch(() => {
if (requestId !== this.lineDataRequestId) return
this.$util.toast('加载失败,请稍后重试')
})
.finally(() => {
if (requestId !== this.lineDataRequestId) return
this.listStatus = 'noMore'
uni.stopPullDownRefresh()
})
},
// 接口 data 转为页面 monitoringPoints
parseMonitoringPoints(data = []) {
const list = Array.isArray(data) ? data : []
return list.map((point) => ({
projectName: point.projectName || '',
deviceName: point.deviceName || '',
pointName: point.pointName || '',
dataTime: point.dataTime || '',
children: this.groupChildren(point.children || []),
}))
},
// 将按相别拆分的指标合并为 A/B/C 结构
groupChildren(children = []) {
const map = {}
const order = []
children.forEach((item) => {
const key = item.targetId || item.name
if (!map[key]) {
map[key] = {
targetId: item.targetId,
name: item.name,
unit: item.unit,
A: '-',
B: '-',
C: '-',
T: '-',
}
order.push(key)
}
const phase = item.phase
if (phase === 'A' || phase === 'B' || phase === 'C' || phase === 'T') {
map[key][phase] = this.formatPhaseValue(item.data)
}
})
return order.map((key) => map[key])
},
formatPhaseValue(value) {
if (value === null || value === undefined || value === '') return '-'
return String(value)
},
hasTPhaseData(child) {
return child.T !== undefined && child.T !== null && child.T !== '-'
},
updateSummaryStats(devCount = {}) {
const deviceTotal =
(devCount.currentOnLineDevCount || 0) + (devCount.currentOffLineDevCount || 0)
this.summaryStats = [
{ label: '项目总数', value: devCount.currentProjectCount || 0 },
{ label: '设备总数', value: deviceTotal },
{ label: '监测点总数', value: devCount.lineCount || 0 },
]
},
// 指标名称超过6个字截断显示
formatIndicatorTag(name) {
if (!name || name.length <= 6) return name
return `${name.slice(0, 6)}...`
return `${name.slice(0, 5)}...`
},
// 判断指标名称是否匹配(兼容括号后缀)
matchIndicator(name, selected) {
const base = (name || '').replace(/\(.*\)/, '')
return base.indexOf(selected) === 0 || selected.indexOf(base) === 0
if (!name || !selected) return false
const base = (name || '').replace(/\(.*\)/, '').trim()
const selectedBase = (selected || '').replace(/\(.*\)/, '').trim()
return base === selectedBase
},
// 初始化默认勾选指标
initDefaultIndicators() {
if (this.selectedIndicators.length) return
this.selectedIndicators = this.targetLists
// 从缓存读取已选指标,无缓存时使用默认电压/电流指标
loadSelectedIndicators() {
const cached = uni.getStorageSync(this.$cacheKey.monitorSelectedIndicators)
if (Array.isArray(cached) && cached.length) {
const valid = cached.filter((name) =>
this.targetLists.some((item) => this.matchIndicator(item.name, name)),
)
if (valid.length) {
this.selectedIndicators = valid
return
}
}
this.selectedIndicators = this.getDefaultIndicatorsByCode()
this.saveSelectedIndicators()
},
getDefaultIndicatorsByCode() {
return this.targetLists
.filter((item) => DEFAULT_INDICATOR_CODES.includes(item.code) && item.name)
.map((item) => item.name)
},
saveSelectedIndicators() {
uni.setStorageSync(this.$cacheKey.monitorSelectedIndicators, this.selectedIndicators)
},
// 跳转切换工程
switchEngineering() {
uni.navigateTo({ url: '/pages/home/selectEngineering' })
@@ -223,6 +340,7 @@ export default {
return
}
this.selectedIndicators.splice(idx, 1)
this.saveSelectedIndicators()
},
// 打开指标选择弹窗
openIndicatorPopup() {
@@ -256,19 +374,18 @@ export default {
return
}
this.selectedIndicators = [...this.popupSelectedIndicators]
this.saveSelectedIndicators()
this.closeIndicatorPopup()
},
// 查看更多指标
onMoreIndicators(point) {
const params = encodeURIComponent(
JSON.stringify({
...point,
engineeringName: this.engineeringName,
selectedIndicators: this.selectedIndicators,
}),
)
uni.setStorageSync('monitorPointDetail', {
...point,
engineeringName: this.engineeringName,
selectedIndicators: [...this.selectedIndicators],
})
uni.navigateTo({
url: `/pages/index/comp/targetInfo?point=${params}`,
url: '/pages/index/comp/targetInfo',
})
},
// 获取监测点当前展示的指标数据
@@ -285,6 +402,13 @@ export default {
}
return result
},
backToTop() {
uni.pageScrollTo({
scrollTop: 0,
duration: 300,
})
this.showBackTop = false
},
},
}
</script>
@@ -293,19 +417,33 @@ export default {
.itic2-page {
min-height: 100vh;
background: #f7f8fa;
position: relative;
}
.itic2-scroll {
height: 100vh;
padding-top: 20rpx;
.itic2-content {
padding: 20rpx 0 40rpx;
box-sizing: border-box;
}
.back-top {
position: fixed;
right: 30rpx;
bottom: 60rpx;
width: 80rpx;
height: 80rpx;
border-radius: 50%;
background: #376cf3;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4rpx 16rpx rgba(55, 108, 243, 0.35);
z-index: 99;
}
.card {
background: #ffffff;
border-radius: 10px;
box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 3px 1px;
box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 3px 1px;
margin: 0 10px 10px;
overflow: hidden;
}
@@ -413,8 +551,8 @@ export default {
.indicator-tag {
display: flex;
align-items: center;
gap: 8rpx;
padding: 6rpx 16rpx;
gap: 6rpx;
padding: 6rpx 14rpx;
border-radius: 16rpx;
font-size: 26rpx;
max-width: 100%;
@@ -477,7 +615,7 @@ export default {
.monitor-card {
border: 1rpx solid #eef2f6;
box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 3px 1px;
box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 3px 1px;
}
.card-header {
@@ -566,6 +704,13 @@ export default {
align-items: stretch;
}
.phase-single {
display: flex;
justify-content: center;
align-items: center;
padding: 4rpx;
}
.phase-item-vertical {
flex: 1;
display: flex;
@@ -577,6 +722,10 @@ export default {
.phase-value-vertical {
font-size: 28rpx;
font-weight: 700;
&--neutral {
color: #333333;
}
}
.phase-divider {

View File

@@ -28,7 +28,7 @@
size="40"
color="#E6A23C"
></uni-icons> -->
<Cn-icon-transient :name="`报告`" />
<Cn-icon-transient :name="`报告1`" />
<view class="badge1" v-if="item.isRead == 0"> </view>
</view>
<view class="event-info">
@@ -357,8 +357,8 @@ export default {
/* 图标区域(按类型区分背景色) */
.event-icon {
background-color: #376cf320;
width: 90rpx;
height: 90rpx;
width: 80rpx;
height: 80rpx;
}
.event-tags {

View File

@@ -7,10 +7,13 @@
<Cn-icon-transient name="监测点" />
</view>
<view class="card-header-info">
<text class="point-name ellipsis">{{ pointInfo.pointName }}</text>
<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>
<text v-if="pointInfo.engineeringName" class="meta-item ellipsis">
工程{{ pointInfo.engineeringName }}
</text>
<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>
@@ -23,17 +26,20 @@
</view>
</view>
<view class="params-section">
<view v-if="moreChildren.length" class="params-section">
<view
v-for="(rowItems, rowIdx) in chunkedChildren(pointInfo.children || [])"
v-for="(rowItems, rowIdx) in chunkedChildren(moreChildren)"
:key="rowIdx"
class="double-row"
>
<view v-for="(child, childIdx) in rowItems" :key="childIdx" class="param-group">
<view v-for="(child, childIdx) in rowItems" :key="child.targetId || childIdx" class="param-group">
<view class="param-title">
<text>{{ child.name }}</text>
<text>{{ child.name }}{{ child.unit ? ` (${child.unit})` : '' }}</text>
</view>
<view class="phase-vertical">
<view v-if="hasTPhaseData(child)" class="phase-single">
<text class="phase-value-vertical phase-value-vertical--neutral">{{ child.T }}</text>
</view>
<view v-else class="phase-vertical">
<view class="phase-item-vertical">
<text class="phase-value-vertical" :style="{ color: phaseColors[0].color }">{{ child.A }}</text>
</view>
@@ -49,6 +55,9 @@
</view>
</view>
</view>
<view v-else class="empty-wrap">
<Cn-empty msg="暂无更多指标" :paddingTop="120"></Cn-empty>
</view>
</view>
</scroll-view>
</view>
@@ -66,13 +75,50 @@ export default {
],
}
},
onLoad(options) {
if (options.point) {
this.pointInfo = JSON.parse(decodeURIComponent(options.point))
computed: {
moreChildren() {
const children = this.pointInfo.children || []
const selected = this.getSelectedIndicators()
return children.filter(
(child) => !selected.some((name) => this.matchIndicator(child.name, name)),
)
},
},
onLoad() {
const point = uni.getStorageSync('monitorPointDetail')
if (point) {
this.pointInfo = {
...point,
selectedIndicators: this.getSelectedIndicatorsFromStorage(point.selectedIndicators),
}
if (point.pointName) {
uni.setNavigationBarTitle({ title: point.pointName })
}
}
},
onUnload() {
uni.removeStorageSync('monitorPointDetail')
},
methods: {
// 将指标列表按每行两个分组
getSelectedIndicatorsFromStorage(fallback = []) {
const cached = uni.getStorageSync(this.$cacheKey.monitorSelectedIndicators)
if (Array.isArray(cached) && cached.length) {
return cached
}
return Array.isArray(fallback) ? fallback : []
},
getSelectedIndicators() {
return this.getSelectedIndicatorsFromStorage(this.pointInfo.selectedIndicators)
},
matchIndicator(name, selected) {
if (!name || !selected) return false
const base = (name || '').replace(/\(.*\)/, '').trim()
const selectedBase = (selected || '').replace(/\(.*\)/, '').trim()
return base === selectedBase
},
hasTPhaseData(child) {
return child.T !== undefined && child.T !== null && child.T !== '-'
},
chunkedChildren(children) {
const result = []
for (let i = 0; i < children.length; i += 2) {
@@ -188,6 +234,11 @@ export default {
padding: 0 16rpx 20rpx;
}
.empty-wrap {
position: relative;
min-height: 320rpx;
}
.double-row {
display: grid;
grid-template-columns: repeat(2, 1fr);
@@ -201,13 +252,13 @@ export default {
.param-group {
min-width: 0;
background: #f9fafb;
background: #f3f3f3;
border-radius: 16rpx;
padding: 16rpx 8rpx 12rpx;
}
.param-title {
font-size: 26rpx;
font-size: 24rpx;
color: #666666;
margin-bottom: 8rpx;
padding-left: 4rpx;
@@ -218,6 +269,13 @@ export default {
align-items: stretch;
}
.phase-single {
display: flex;
justify-content: center;
align-items: center;
padding: 4rpx;
}
.phase-item-vertical {
flex: 1;
display: flex;
@@ -229,6 +287,10 @@ export default {
.phase-value-vertical {
font-size: 28rpx;
font-weight: 700;
&--neutral {
color: #333333;
}
}
.phase-divider {

View File

@@ -30,13 +30,26 @@
<YouKe :devCount="devCount" v-if="userInfo.authorities === 'tourist'"></YouKe>
<!-- 工程列表 -->
<template v-show="engineeringList.length" v-if="userInfo.authorities === 'engineering_user'">
<view class="canneng-index-title mt20">工程列表</view>
<!-- <view class="canneng-index-title mt20 canneng-index-title-with-icon">
<uni-icons type="list" size="18" color="#376cf3" />
<text>工程列表</text>
</view> -->
<view class="canneng-index-title mt20">
<view class="canneng-index-title-with-icon">
<uni-icons type="list" size="18" color="#376cf3" />
<text>工程列表</text>
</view>
<view class="nav-menu nav-menu-btn boxClick" @click="jump">关键指标概览 </view>
</view>
<Engineering ref="engineering" :store="store" @refresh="store.search()" />
</template>
<!-- 设备列表 -->
<template v-else v-show="engineeringList.length">
<view class="canneng-index-title mt20">
<view>设备列表</view>
<view class="canneng-index-title-with-icon">
<uni-icons custom-prefix="iconfont" type="icon-shebei4" size="18" color="#376cf3" />
<text>设备列表</text>
</view>
<view class="nav-menu nav-menu-btn boxClick" @click="jump">关键指标概览 </view>
</view>
<Device ref="device" :store="store" />
@@ -319,6 +332,14 @@ export default {
padding: 0 20rpx;
/* font-weight: 500; */
display: flex;
align-items: center;
}
.canneng-index-title-with-icon {
display: inline-flex;
align-items: center;
gap: 8rpx;
font-size: 30rpx;
}
/deep/ .uni-card {

View File

@@ -82,9 +82,25 @@ export default {
font-size: 26rpx;
.detail-content-title {
font-size: 28rpx;
display: inline-flex;
align-items: center;
position: relative;
padding-left: 20rpx;
font-size: 30rpx;
color: #111;
font-weight: 700;
&::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 8rpx;
height: 28rpx;
background: $uni-theme-color;
border-radius: 3rpx;
}
}
}
}

View File

@@ -5,7 +5,7 @@
<!-- <view class="detail-content-title mb20">发生时间</view> -->
<view>{{ detail.date }}</view>
</view>
<view class="detail-content" style="padding: 0px">
<view class="detail-content" style="padding-top: 0px;padding-bottom: 0px">
<view class="detail-content-title pb20 pt20 pl20">终端告警列表</view>
</view>
@@ -15,14 +15,7 @@
<view class="event-header">
<view class="event-icon"
:class="item.devType == 'Direct_Connected_Device' ? 'zl-bgc' : 'jc-bgc'">
<!-- 动态图标根据类型切换 -->
<!-- <uni-icons
custom-prefix="iconfont"
type="icon-terminal-box-fill"
size="35"
color="#FF0000"
></uni-icons> -->
<!-- <Cn-icon-transient :name="`运行告警`" /> -->
<Cn-icon-transient :name="item.devType == 'Direct_Connected_Device' ? '治理设备' : '监测设备'" />
<view class="badge1" v-if="item.status == 0"> </view>
</view>
@@ -47,28 +40,35 @@
<view class="event-detail">
<view v-if="item.dataDetails.onlineRate.isAbnormal">
<text>在线率
{{item.dataDetails.onlineRate.value }}% 
<text class="integrity-value">{{ item.dataDetails.onlineRate.value }}%</text> 
</text>
</view>
<view v-if="hasIntegrityAbnormal(item)" class="mt10">
数据完整性
<view class="data-table">
<view class="table-header">
<text>监测点</text>
<text>完整性</text>
</view>
<view class="table-row"
v-for="value in item.dataDetails.integrity.monitorPoints.filter((p) => p.isAbnormal === true)">
<text>{{ value.monitorName }}</text>
<text>{{ value.value }}%</text>
<view class="integrity-grid">
<view
v-for="(rowItems, rowIdx) in chunkedPoints(getAbnormalPoints(item))"
:key="rowIdx"
class="grid-row">
<view
v-for="(point, pIdx) in rowItems"
:key="pIdx"
class="param-group">
<view class="param-title">
<text>{{ point.monitorName }}</text>
</view>
<view class="integrity-value-row">
<text class="integrity-value">{{ point.value }}%</text>
</view>
</view>
</view>
</view>
</view>
<view v-if="item.warnCounts" class="mt10">
<view v-if="item.warnCounts" class="mt10 ">
终端告警 {{ item.warnCounts }} 详情如下
<view class="textBox">
<view v-for="val in item.warnDetails" class="textBox mb5">
<view class="textBox mt10">
<view v-for="val in item.warnDetails" class="textBox mb5" style=" font-size: 26rpx;">
{{ val.warnEventTime + '发生' + val.warnEventDesc }}
</view>
</view>
@@ -107,7 +107,17 @@ export default {
hasIntegrityAbnormal(item) {
const points = item?.dataDetails?.integrity?.monitorPoints
if (!Array.isArray(points) || !points.length) return false
return points.every((p) => p.isAbnormal === true)
return points.some((p) => p.isAbnormal === true)
},
getAbnormalPoints(item) {
return item?.dataDetails?.integrity?.monitorPoints?.filter((p) => p.isAbnormal === true) || []
},
chunkedPoints(points) {
const result = []
for (let i = 0; i < points.length; i += 3) {
result.push(points.slice(i, i + 3))
}
return result
},
init() {
queryAlarmDetail({
@@ -132,15 +142,32 @@ export default {
padding: 20rpx 0;
.detail-content {
padding: 20rpx;
background: #fff;
margin-bottom: 20rpx;
font-size: 28rpx;
.detail-content-title {
display: inline-flex;
align-items: center;
position: relative;
padding-left: 20rpx;
font-size: 30rpx;
color: #111;
font-weight: 700;
&::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 8rpx;
height: 28rpx;
background: $uni-theme-color;
border-radius: 3rpx;
}
}
}
@@ -208,37 +235,52 @@ export default {
}
.textBox {
max-height: 120rpx;
max-height: 150rpx;
overflow-y: auto;
}
.data-table {
margin-top: 10rpx;
background-color: #fff;
overflow: hidden;
.integrity-grid {
margin-top: 16rpx;
}
.table-header,
.table-row {
display: flex;
justify-content: space-between;
padding: 15rpx 0rpx;
border-bottom: 1rpx solid #eee;
height: 20px;
.grid-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16rpx;
margin-bottom: 16rpx;
text {
text-align: center;
font-size: 28rpx;
flex: 1;
}
}
.table-header {
padding: 0rpx;
padding-bottom: 10rpx;
&:last-child {
margin-bottom: 0;
}
}
</style>
.param-group {
min-width: 0;
background: #f3f3f3;
border-radius: 16rpx;
padding: 16rpx 8rpx 12rpx;
text-align: center;
}
.param-title {
font-size: 24rpx;
color: #666666;
// margin-bottom: 8rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.integrity-value-row {
display: flex;
justify-content: center;
align-items: center;
padding: 2rpx;
}
.integrity-value {
font-size: 26rpx;
font-weight: 700;
color: #333333;
}
</style>

View File

@@ -98,9 +98,25 @@ export default {
font-size: 28rpx;
.detail-content-title {
display: inline-flex;
align-items: center;
position: relative;
padding-left: 20rpx;
font-size: 30rpx;
color: #111;
font-weight: 700;
&::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 8rpx;
height: 28rpx;
background: $uni-theme-color;
border-radius: 3rpx;
}
}
}

View File

@@ -190,9 +190,25 @@ export default {
font-size: 28rpx;
.detail-content-title {
display: inline-flex;
align-items: center;
position: relative;
padding-left: 20rpx;
font-size: 30rpx;
color: #111;
font-weight: 700;
&::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 8rpx;
height: 28rpx;
background: $uni-theme-color;
border-radius: 3rpx;
}
}
}