138 lines
4.7 KiB
Vue
138 lines
4.7 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>
|
||
<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>
|
||
<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>
|
||
</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'
|
||
|
||
export default {
|
||
components: { ITIC, F47 },
|
||
data() {
|
||
return {
|
||
loading: true,
|
||
detail: {},
|
||
detailTab: 0,
|
||
}
|
||
},
|
||
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) {
|
||
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],
|
||
})
|
||
}
|
||
},
|
||
methods: {
|
||
onDetailTabChange(e) {
|
||
this.detailTab = e.currentIndex
|
||
},
|
||
previewImage(url) {
|
||
uni.navigateTo({
|
||
url: `/pages/message1/comp/preview?url=${encodeURIComponent(url)}`,
|
||
})
|
||
},
|
||
},
|
||
}
|
||
</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> |