app-govern/pages/message1/run.vue

<template>
    <view style="position: relative">
        <!-- 运行事件 -->

        <!-- 卡片 -->
        <scroll-view
            scroll-y="true"
            @refresherrefresh="refresherrefresh"
            @scrolltolower="scrolltolower"
            :refresher-triggered="triggered"
            refresher-enabled="true"
            class="event-list"
            :style="{ height: 'calc(100vh - ' + (navHeight + 10) + 'px)', overflow: 'auto' }"
        >
            <!-- 循环渲染事件项 -->
            <uni-card
                class="event-item"
                :class="item.type"
                v-for="(item, index) in store.data"
                :key="index"
                @click="jump(item)"
            >
                <!-- 头部：图标 + 信息 + 操作 -->
                <view class="event-header">
                    <view class="event-icon" :class="item.devType == 'Direct_Connected_Device' ? 'zl-bgc' : 'jc-bgc'">
                        <!-- 动态图标：根据类型切换 -->
                        <!-- <uni-icons custom-prefix="iconfont" type="icon-shebei3" size="35" color="#376cf3"></uni-icons> -->
                        <Cn-icon-transient
                            :name="item.devType == 'Direct_Connected_Device' ? '治理设备' : '监测设备'"
                        />
                        <view class="badge1" v-if="item.status == 0"> </view>
                    </view>
                    <view class="event-info">
                        <view class="event-title">
                            <text class="event-id">{{ item.equipmentName }}</text>
                            <text
                                class="event-tag"
                                :class="item.devType == 'Direct_Connected_Device' ? 'zl-tag' : 'jc-tag'"
                                >{{ item.devType == 'Direct_Connected_Device' ? '治理设备' : '监测设备' }}</text
                            >
                        </view>
                        <view class="event-desc">
                            <text>工程名称：{{ item.engineeringName }}</text>
                            <text>项目名称：{{ item.projectName }}</text>
                            <text>事件时间：{{ item.startTime }}</text>
                        </view>
                    </view>
                </view>
                <!-- 详情区域 -->
                <view class="event-detail">
                    <text> {{ item.showName }} </text>
                </view>
            </uni-card>
            <uni-load-more
                v-if="store.status == 'loading' || (store.data && store.data.length > 0)"
                :status="store.status"
            ></uni-load-more>
            <Cn-empty v-else style="top: 20%"></Cn-empty>
        </scroll-view>
    </view>
</template>
<script>
import list from '@/common/js/list'
import { updateStatus } from '@/common/api/message'
export default {
    components: {},
    props: {
        navHeight: {
            type: Number,
            default: 0,
        },
        selectValue: {
            type: Object,
            // default: () => {},
        },
    },
    mixins: [list],
    data() {
        return {
            triggered: true,
        }
    },
    mounted() {},

    methods: {
        // 查詢
        init() {
            this.store = this.DataSource('/cs-harmonic-boot/eventUser/queryEventpage')
            this.store.params.type = 2
            // this.store.params.pageSize = 10000
            this.store.params.sortField = this.sort
            this.store.params.engineeringid = this.selectValue.engineeringId
            this.store.params.projectId = this.selectValue.projectId
            this.store.params.deviceId = this.selectValue.deviceId
            this.store.params.lineId = this.selectValue.lineId
            this.store.params.startTime = this.$util.getMonthFirstAndLastDay(this.selectValue.date).firstDay
            this.store.params.endTime = this.$util.getMonthFirstAndLastDay(this.selectValue.date).lastDay
            this.store.loadedCallback = () => {
                this.loading = false
            }
            this.store.reload()
        },
        jump(item) {
            if (item.status != '1') {
                item.status = '1'
                updateStatus({
                    eventIds: [item.id],
                })
                this.$emit('getDevCount')
            }
        },
        // 下拉
        refresherrefresh() {
            this.triggered = true
            uni.startPullDownRefresh()
            setTimeout(() => {
                this.triggered = false
            }, 500)
        },
        // 上拉
        scrolltolower() {
            if (this.store.status != 'noMore') {
                this.store.next && this.store.next()
            }
        },
    },

    computed: {},

    watch: {
        selectValue: {
            handler(val, oldVal) {
                if (Object.keys(val).length === 0) return
                this.init()
            },
            deep: true,
            immediate: true,
        },
    },
}
</script>

<style lang="scss" scoped>
@import './index.scss';
/* 列表容器 */
.event-list {
    margin-top: 20rpx;

    /* 头部：图标 + 信息 + 操作 */

    /* 图标区域（按类型区分背景色） */
    .zl-bgc {
        background-color: #376cf320;
    }
    .jc-bgc {
        background-color: #376cf320;
    }
    .zl-tag {
        background-color: #007aff20;
        color: #007aff;
    }
    .jc-tag {
        background-color: #3498db20;
        color: #3498db;
    }
}
/deep/ .uni-scroll-view-refresher {
    display: none;
}
</style>