绘制关键指标概览页面

pages/message1/comp/transientDetails.vue

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