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

联调app关键指标功能

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

299
pages/index/comp/monitoringPoint.vue
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 {