联调app关键指标功能

pages/index/comp/targetInfo.vue

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