220 lines
7.8 KiB
Vue
220 lines
7.8 KiB
Vue
<template>
|
||
<Cn-page :loading="loading">
|
||
<view class="detail" slot="body">
|
||
<view class="detail-content" style="font-size: 32rpx">
|
||
<view>{{ detail.startTime }}</view>
|
||
</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.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']"
|
||
@clickItem="onDetailTabChange" />
|
||
</view>
|
||
<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"
|
||
@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"
|
||
@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>
|
||
<view v-if="detailTab == 1" class="chart-wrapper">
|
||
<ITIC :store="eventStore" style="height: calc(100vh - 360px);" />
|
||
</view>
|
||
<view v-if="detailTab == 2" class="chart-wrapper">
|
||
<F47 :store="eventStore" style="height: calc(100vh - 360px);" />
|
||
</view>
|
||
</view>
|
||
</Cn-page>
|
||
</template>
|
||
<script>
|
||
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, waveform },
|
||
data() {
|
||
return {
|
||
loading: true,
|
||
detail: {},
|
||
detailTab: 0,
|
||
listWaveData: [],
|
||
listRmsData: [],
|
||
unit: [],
|
||
list: {},
|
||
|
||
}
|
||
},
|
||
computed: {
|
||
eventStore() {
|
||
const hasData = this.detail && (this.detail.id || this.detail.equipmentId)
|
||
if (!hasData) {
|
||
return { data: [], status: 'noMore' }
|
||
}
|
||
const item = {
|
||
...this.detail,
|
||
evtParamTm: this.detail.evtParamTm || '0s',
|
||
evtParamVVaDepth: this.detail.evtParamVVaDepth || '0%',
|
||
}
|
||
return {
|
||
data: [item],
|
||
status: 'noMore',
|
||
}
|
||
},
|
||
},
|
||
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)
|
||
|
||
this.loading = false
|
||
if (this.detail.status != 1) {
|
||
updateStatus({
|
||
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) {
|
||
this.detailTab = e.currentIndex
|
||
},
|
||
previewImage(url) {
|
||
uni.navigateTo({
|
||
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>
|
||
<style lang="scss">
|
||
.detail {
|
||
padding: 20rpx 0;
|
||
|
||
.detail-content {
|
||
padding: 20rpx;
|
||
background: #fff;
|
||
margin-bottom: 20rpx;
|
||
font-size: 28rpx;
|
||
|
||
.detail-content-title {
|
||
font-size: 30rpx;
|
||
color: #111;
|
||
font-weight: 700;
|
||
}
|
||
}
|
||
|
||
.detail-tabs {
|
||
padding: 0 20rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.chart-container {
|
||
min-height: 600rpx;
|
||
}
|
||
|
||
.chart-wrapper {
|
||
background: #fff;
|
||
margin-bottom: 20rpx;
|
||
padding: 20rpx;
|
||
}
|
||
}
|
||
|
||
.segmented-control {
|
||
flex: 1;
|
||
margin-right: 24rpx;
|
||
height: 60rpx;
|
||
}
|
||
</style> |