提交app

pages/message1/comp/steadyStateDetails.vue

@@ -0,0 +1,148 @@
+<template>
+    <Cn-page :loading="loading">
+        <view class="detail" slot="body">
+            <view class="detail-content" style="font-size: 32rpx">
+                <!-- <view class="detail-content-title mb20">发生时间</view> -->
+                <view>{{ detail.statisticsDate }}</view>
+            </view>
+            <view class="detail-content">
+                <view class="detail-content-title mb20">基础信息</view>
+                <view class="mb5"> 监测点名称：{{ detail.lineName }}</view>
+                <view class="mb5"> 设备名称：{{ detail.devName }} </view>
+                <view class="mb5"> 项目名称：{{ detail.projectName }} </view>
+                <view class="mb5"> 工程名称：{{ detail.engineeringName }} </view>
+                <view class="mb5" style="display: flex">
+                    越限详情：
+                    <view style="flex: 1">{{ detail.overLimitDesc }}</view></view
+                >
+            </view>
+            <view class="detail-content">
+                <view class="detail-content-title mb20"
+                    >指标越限详情<text class="prompt">（仅显示较为严重的10次）</text></view
+                >
+
+                <uni-collapse accordion>
+                    <uni-collapse-item :title="item.targetName" v-for="item in list">
+                        <view class="data-table">
+                            <view class="table-header">
+                                <text>时间</text>
+                                <text>数据类型</text>
+                                <text v-if="!item.harmDetailList[0].hasT">A相</text>
+                                <text v-if="!item.harmDetailList[0].hasT">B相</text>
+                                <text v-if="!item.harmDetailList[0].hasT">C相</text>
+                                <text v-if="item.harmDetailList[0].hasT">总相</text>
+                                <text>限值</text>
+                            </view>
+                            <view class="table-row" v-for="value in item.harmDetailList">
+                                <text>{{ value.statisticsTime }}</text>
+                                <text>{{ value.valueType }}</text>
+                                <text v-if="!value.hasT">{{ value.dataA }}</text>
+                                <text v-if="!value.hasT">{{ value.dataB }}</text>
+                                <text v-if="!value.hasT">{{ value.dataC }}</text>
+                                <text v-if="value.hasT">{{ value.dataT }}</text>
+                                <text>{{ value.overLimitData }}</text>
+                            </view>
+                        </view>
+                    </uni-collapse-item>
+                </uni-collapse>
+            </view>
+        </view>
+    </Cn-page>
+</template>
+<script>
+import { updateStatus, queryHarmonicDetail } from '@/common/api/message'
+export default {
+    data() {
+        return {
+            loading: true,
+            detail: {},
+            list: [],
+        }
+    },
+    onLoad(options) {
+        // console.log(options.detail)
+        this.detail = JSON.parse(decodeURIComponent(options.detail).replace(/百分比/g, '%'))
+        this.init()
+        if (this.detail.isRead != 1) {
+            updateStatus({
+                eventIds: [this.detail.eventId],
+            })
+        }
+    },
+    methods: {
+        init() {
+            queryHarmonicDetail({
+                lineId: this.detail.lineId,
+                time: this.detail.statisticsDate,
+            })
+                .then((res) => {
+                    this.list = res.data
+                    this.loading = false
+                })
+                .catch(() => {
+                    this.loading = false
+                })
+
+            // }
+        },
+    },
+}
+</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: 32rpx;
+            color: #111;
+            font-weight: 700;
+        }
+    }
+    .limit {
+        display: flex;
+        align-items: center;
+        justify-content: end;
+        width: 450rpx;
+        margin-left: auto;
+    }
+    .prompt {
+        font-size: 24rpx;
+        color: #111;
+        font-weight: 500;
+    }
+}
+.data-table {
+    margin-top: 20rpx;
+    background-color: #fff;
+    overflow: hidden;
+    .table-header,
+    .table-row {
+        display: flex;
+        justify-content: space-between;
+        padding: 20rpx 0rpx;
+        border-bottom: 1rpx solid #eee;
+        text {
+            flex: 1;
+            text-align: center;
+            font-size: 24rpx;
+            // color: #333;
+            &:first-child {
+                // text-align: left;
+                flex: 1.2;
+            }
+        }
+    }
+    .table-header {
+        padding:  0rpx;
+    }
+}
+/deep/ .uni-collapse-item__title-text{
+      font-weight: 700;
+}
+</style>