app-govern/pages/device/APF/report.vue

<template>
    <Cn-page :loading="loading">
        <view class="content" slot="body">
            <view class="content-item" v-for="(item, index) in store.data" :key="index" @click="jump(item)">
                <view class="content-item-header">
                    <uni-badge
                        class="uni-badge-left-margin"
                        :is-dot="true"
                        :text="item.status == '1' ? 0 : 1"
                        absolute="rightTop"
                        size="small"
                        style="margin-top: 30rpx"
                    >
                        <view class="content-item-header-icon">
                            <image mode="aspectFill" :src="staticIcon" style="height: 60rpx; width: 60rpx"></image>
                        </view>
                    </uni-badge>
                    <view class="content-item-header-right">
                        <view class="content-item-header-right-title">{{ item.equipmentName }}</view>
                        <!-- <view class="content-item-header-right-des">{{ item.engineeringName }} {{ item.projectName }}</view> -->
                        <view class="content-item-header-right-des">工程名称：{{ item.engineeringName }}</view>
                        <view class="content-item-header-right-des">项目名称：{{ item.projectName }}</view>
                        <!-- <view class="content-item-header-right-des">监测点名称：{{ item.lineName }}</view> -->
                        <!-- <view class="content-item-header-right-des">暂态类型：{{ item.showName }}</view> -->
                        <!-- <view class="content-item-header-right-des">{{ item.subTitle }}</view> -->
                    </view>
                    <view class="ml10" v-if="type === '0' || item.status != '1'">🔍</view>
                </view>
                <view class="content-item-footer">{{ item.subTitle }}</view>
            </view>
            <!-- <uni-card
                :title="item.equipmentName"
                :extra="item.status == '1' ? '' : '未读'"
                :sub-title="item.subTitle"
                thumbnail="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png"
                @click="jump(item)"
                v-for="(item, index) in store.data"
                :key="index"
            >
                <view class="term-list-bottom">
                    <view class="term-list-bottom-item" v-for="(item2, textIndex) in item.dataSet" :key="textIndex">
                        {{ item2.showName + ':' + (item2.value == 3.1415926 ? '-' : item2.value) + (item2.unit || '') }}
                    </view>
                </view>
            </uni-card> -->
            <Cn-empty v-if="store.empty" style="padding-top: 400rpx"></Cn-empty>
            <uni-load-more
                v-if="store.status == 'loading' || (store.data && store.data.length > 0)"
                :status="store.status"
            ></uni-load-more>
        </view>
    </Cn-page>
</template>

<script>
import list from '@/common/js/list'
import { updateStatus } from '@/common/api/message'

export default {
    mixins: [list],
    data() {
        return {
            loading: true,
            type: '',
            staticIcon: '',
        }
    },
    onLoad(o) {
        this.type = '3'
        this.devId = o.id
        switch (this.type) {
            case '0':
                uni.setNavigationBarTitle({ title: '暂态事件' })
                this.staticIcon = '/static/zantai2.png'
                break
            case '1':
                uni.setNavigationBarTitle({ title: '稳态事件' })
                this.staticIcon = '/static/steady2.png'
                break
            case '2':
                uni.setNavigationBarTitle({ title: '运行事件' })
                this.staticIcon = '/static/run2.png'
                break
            case '3':
                uni.setNavigationBarTitle({ title: '设备告警' })
                this.staticIcon = '/static/device_bad2.png'
                break
        }
        this.init()
    },
    onNavigationBarButtonTap(e) {
        uni.showModal({
            title: '提示',
            content: '确定要全部标记为已读吗？',
            success: (res) => {
                if (res.confirm) {
                    updateStatus({
                        type: this.type,
                        eventIds: [],
                    }).then(() => {
                        this.loading = true
                        this.store.reload()
                    })
                }
            },
        })
    },
    methods: {
        async init() {
            let dictData = await this.$util.getDictData('app_event')
            console.log(dictData)
            this.store = this.DataSource('/cs-harmonic-boot/eventUser/queryEventpage')
            this.store.params.type = this.type
            this.store.params.deviceId = this.deviceId
            this.store.params.startTime =  this.$util.getThreeMonthsAgo()
            this.store.params.endTime = this.$util.getToday() 
            this.store.loadedCallback = () => {
                this.store.data.forEach((item) => {
                    if (this.type === '3') {
                        item.showName = '告警，告警码：' + (item.code || '-')
                    }
                    if (this.type !== '0') {
                        item.subTitle = `于${item.startTime}发生${item.showName}`
                    } else {
                        item.subTitle =
                            `发生时间：${item.startTime}，` +
                            item.dataSet
                                .map((item2) => {
                                    return (
                                        item2.showName +
                                        '：' +
                                        (item2.value == 3.1415926 ? '-' : item2.value) +
                                        (item2.unit || '')
                                    )
                                })
                                .join('，')
                    }
                })
                this.loading = false
            }
            this.store.reload()
        },
        jump(item) {
            if (this.type === '0') {
                let str = JSON.stringify(item).replace(/%/g, '百分比')
                uni.navigateTo({ url: '/pages/message/messageDetail?detail=' + encodeURIComponent(str) })
            } else {
                if (item.status != '1') {
                    item.status = '1'
                    updateStatus({
                        eventIds: [item.id],
                    })
                }
            }
        },
    },
}
</script>

<style lang="scss">
.content {
    .content-item {
        margin: 20rpx;
        padding: 20rpx 20rpx;
        box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 6rpx 2rpx;
        border-radius: 8rpx;
        border: 1px solid #ebeef5;
        background: #fff;

        .content-item-header {
            display: flex;
            padding: 20rpx 0;
            border-bottom: 1px solid #ebeef5;

            .content-item-header-icon {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100rpx;
                height: 100rpx;
                border-radius: 8rpx;
                background: $uni-theme-color;
            }

            .content-item-header-right {
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                // height: 140rpx;
                margin-left: 20rpx;

                .content-item-header-right-title {
                    font-size: 28rpx;
                    font-weight: bold;
                    color: #111;
                }

                .content-item-header-right-des {
                    font-size: 24rpx;
                    color: #999;
                }
            }
        }

        .content-item-footer {
            margin-top: 20rpx;
            font-size: 24rpx;
            color: #999;
        }
    }

    // padding-top: 20rpx;
}

.term-list-bottom {
    .term-list-bottom-item {
        font-size: 28rpx;
        margin-bottom: 10rpx;
        display: flex;
        justify-content: space-between;
        // view:first-of-type{
        //     color: #111;
        // }
    }

    .term-list-bottom-item:last-of-type {
        margin-bottom: 0;
    }
}

/deep/ .uni-list-item {
    background-color: $uni-theme-white !important;
}

/deep/ .uni-card__header-extra-text {
    color: #dd524d !important;
    font-size: 20rpx;
}
</style>