water_affairs/pages/alerts/detail.vue

<template>
    <view>
        <cu-custom id="custom"
            bgImage="https://yostest175549.obs.cn-east-2.myhuaweicloud.com:443/202306151686796745663B52544232.png"
            :isBack="true">
            <block slot="backText">返回</block>
            <block slot="content">
                告警详情
            </block>
        </cu-custom>

        <My_listbox ref="List" :pullDown="false" @getlist="getlist" :empty="empty">
            <view class="detail" v-if="detail.lasteventtime">
                <view class="title">
                    {{ detail.eventname || ' --' }}
                </view>
                <view class="row">设备：{{ detail.devicename }}({{ detail.serialnumber }})</view>
                <view class="time-row">最近告警时间： <view class="tag" :style="{
                    color: tagStyleList[detail.lasteventlevel - 1].color,
                    backgroundColor: tagStyleList[detail.lasteventlevel - 1].backgroundColor,
                }">{{ tagStyleList[detail.lasteventlevel - 1].name }}</view> <text class="time">{{
    detail.lasteventtime }}</text>
                </view>
            </view>
            <view class="head" :style="{ top: tovw(CustomBar) }">
                <view class="left">
                    告警日志
                </view>
                <time-horizon @onConfirm="dateRange" />
            </view>
            <view class="item" v-for="item in list" :key="item.eventtime">
                <view class="time">{{ item.eventtime }}</view>
                <view class="row">
                    告警级别：<!-- :style="{ color: tagStyleList[item.level - 1].color }" -->
                    <text class="text">
                        {{ tagStyleList[item.level - 1].name }}
                    </text>
                </view>
                <view class="row">
                    <text v-for="it in item.paramvalues" :key="it.w_dataparamid">
                        当前设备
                        <text style="color: rgb(234, 22, 45);"><!--  -->
                            {{ it.paramname }}
                        </text>
                        值为
                        <text style="color: rgb(234, 22, 45);">
                            {{ it.paramvalue }}
                        </text>
                        ,
                        <text style="color: rgb(234, 22, 45);">
                            {{ it.symbol + it.eventvalue }}
                        </text>
                        时触发警告;
                    </text>
                </view>
            </view>
            <view style="height: 30px;" />
        </My_listbox>


    </view>
</template>

<script>
import { styleList } from "./modules/styleList";
let fun = null;
export default {
    data() {
        return {
            empty: true,
            w_event_logid: 0,
            detail: {},
            CustomBar: 0,
            tagStyleList: styleList,
            "content": {
                "pageNumber": 1,
                "pageSize": 20,
                "where": {
                    "begindate": "",
                    "enddate": ""
                }
            },
            list: []
        }
    },
    onLoad(e) {
        if (e.id == 0) {
            uni.showToast({
                title: '查询错误',
                icon: "none",
                mask: true,
            })
            setTimeout(() => {
                uni.navigateBack();
            }, 1000)
        } else {
            this.content.w_event_logid = e.id;
            this.getDetail()
            this.getlist();
        }
    },
    mounted() {
        this.$refs.List.setHeight();
    },
    methods: {
        getDetail() {
            this.$Http.basic({
                "id": 20230821152602,
                content: {
                    "w_event_logid": this.content.w_event_logid
                }
            }).then(res => {
                console.log("告警详情", res)
                if (this.cutoff(res.msg)) return;
                this.detail = res.data;
            })
        },
        getlist(init = false) {
            let content = this.content;
            if (init) {
                content.pageNumber = 1;
                content.pageTotal = 1;
            }
            if (content.pageNumber > content.pageTotal) return;
            this.$Http.basic({
                "id": 20230816095902,
                content
            }).then(res => {
                console.log("告警日志", res)
                if (this.cutoff(res.msg)) return;
                fun && fun();
                content.pageNumber += 1;
                content.pageTotal = res.pageTotal;
                this.content = content;
                let list = res.data.map(v => {
                    v.showValue = ""
                    v.paramvalues.forEach(item => {
                        v.showValue += `当前设备${item.paramname}值为${item.paramvalue},${item.symbol + item.eventvalue}时触发`
                    })
                    return v
                })
                this.list = res.pageNumber == 1 ? list : this.list.concat(list)
                this.empty = res.data.length == 0;
            })
        },
        dateRange(e, callback) {
            this.content.where.begindate = e[0];
            this.content.where.enddate = e[1];
            fun = callback;
            this.getlist(true);
        }
    },
}

</script>

<style lang="scss" scoped>
.detail {
    background: #fff;
    width: 355px;
    margin: 10px auto 0;
    border-radius: 4px;
    padding: 10px;
    box-sizing: border-box;

    .title {
        font-size: 16px;
    }

    .row,
    .time-row {
        font-size: 14px;
        line-height: 22px;
        margin-top: 4px;
    }

    .time-row {
        display: flex;

        .tag {
            padding: 0 6px;
            border-radius: 4px;
            margin-right: 6px;
        }

        .time {
            color: #052E5D;
            flex-wrap: bold;
        }
    }
}

.head {
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 355px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 0 10px;
    background: #052E5D;
    position: sticky;
    z-index: 9;

    .left {
        color: #fff;
        font-weight: bold;
    }
}


.item {
    width: 355px;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 4px;
    margin: 0 auto 10px;
    background: #fff;

    .time {
        color: #333;
        flex-wrap: bold;
    }

    .row {
        color: #999;
        font-size: 12px;
        margin-top: 6px;
    }
}
</style>