提交app

pages/message1/comp/alarmDetails.vue

@@ -0,0 +1,134 @@
+<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.date }}</view>
+            </view>
+            <view class="detail-content">
+                <view class="detail-content-title mb20">终端告警列表</view>
+
+                <uni-collapse accordion>
+                    <uni-collapse-item :title="item.devName" v-for="item in list">
+                        <template v-slot:title>
+                            <view class="collapseTop">
+                                <view class="mb5 name"> {{ item.devName }}</view>
+                                <view class="mb5 frequency">
+                                    <view class="mr20"> 告警次数: {{ item.warnCounts }} 次</view>
+                                    <view> 通讯中断: {{ item.interruptCounts }} 次</view>
+                                </view>
+                            </view>
+                        </template>
+
+                        <view>
+                            <view class="mb10 ml12 frequency">
+                                <view>项目名称：{{ item.projectName }} </view></view
+                            >
+                            <view class="mb10 ml12 frequency">
+                                <view>工程名称：{{ item.engineeringName }}</view></view
+                            >
+
+                            <view class="mb10 ml12 frequency">
+                                <view>通讯信息：</view>
+                                <view style="flex: 1">
+                                    <view v-if="item.interruptCounts == 0">通讯正常</view>
+                                    <view v-else>通讯中断{{ item.interruptCounts }}次，具体如下所示:</view
+                                    ><view v-for="date in item.interruptDetails" class="mt15 textBox">{{
+                                        date
+                                    }}</view></view
+                                ></view
+                            >
+                            <view class="mb10 ml12 frequency">
+                                <view>告警信息：</view>
+                                <view style="flex: 1">
+                                    <view v-if="item.warnCounts == 0">暂无终端告警信息</view>
+                                    <view v-else>终端告警{{ item.warnCounts }}次，具体如下所示:</view
+                                    ><view v-for="val in item.warnDetails" class="mt15 textBox">
+                                        {{ val.warnEventTime + '发生' + val.warnEventDesc }}
+                                    </view></view
+                                ></view
+                            >
+                        </view>
+                    </uni-collapse-item>
+                </uni-collapse>
+            </view>
+        </view>
+    </Cn-page>
+</template>
+<script>
+import { updateStatus, queryAlarmDetail } from '@/common/api/message'
+
+export default {
+    data() {
+        return {
+            loading: true,
+            detail: {},
+            limit: '',
+            accordionVal: '1',
+
+            list: [],
+        }
+    },
+    onLoad(options) {
+        this.loading = false
+        this.detail = JSON.parse(decodeURIComponent(options.detail).replace(/百分比/g, '%'))
+        this.init()
+        if (this.detail.isRead != 1) {
+            updateStatus({
+                eventIds: [this.detail.eventId],
+            })
+        }
+    },
+    methods: {
+        init() {
+            this.loading = false
+            queryAlarmDetail({
+                devList: this.detail.devIds,
+                time: this.detail.date,
+            })
+                .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;
+        }
+    }
+    .collapseTop {
+        padding: 10rpx 0;
+        margin-left: 15px;
+        .name {
+            font-size: 26rpx;
+            font-weight: 700;
+            color: #333333;
+        }
+    }
+    .frequency {
+        display: flex;
+        font-size: 24rpx;
+        // color: #666666;
+    }
+}
+.textBox {
+    border-bottom: 1px solid #eee;
+}
+</style>