app-govern/pages/message1/transient.vue

<template>
    <view style="position: relative">
        <!-- 暂态 -->
        <view class="transientBox">
            <view class="statistics pd20">
                <view class="box boxClick" :class="{ boxClick1: filterValue == index }"
                    v-for="(item, index) in dataList" @click="
                        filterValue = index
                    init()
                        ">
                    <!-- <text class="num">{{ item.value }}</text> -->
                    <text class="num">{{ item.value }}</text>
                    <text class="label">{{ item.label }}</text>
                </view>
            </view>
            <!-- <view class="smallLabel"> </view> -->
        </view>
        <!-- 卡片 -->
        <scroll-view scroll-y="true" @scroll="onScroll" :scroll-top="scrollTop" scroll-with-animation
            @refresherrefresh="refresherrefresh" @scrolltolower="scrolltolower"
            :refresher-triggered="triggered" refresher-enabled="true" class="event-list"
            :style="{ height: 'calc(100vh - ' + (navHeight + height) + 'px)', overflow: 'auto' }">
            <!-- 循环渲染事件项 -->
            <uni-card class="event-item boxClick" :class="judgment(item.showName).type"
                v-for="(item, index) in store.data || []" :key="index" @click="jump(item)">
                <!-- 头部：图标 + 信息 + 操作 -->
                <view class="event-header">
                    <view class="event-icon">
                        <!-- 动态图标：根据类型切换 -->
                        <!-- <uni-icons
                            :custom-prefix="'iconfont'"
                            :type="judgment(item.showName).icon"
                            :color="judgment(item.showName).color"
                            :size="judgment(item.showName).size"
                        ></uni-icons> -->
                        <Cn-icon-transient :name="item.showName" />
                        <!-- 0未读 1已读 -->
                        <view class="badge1" v-if="item.status == 0"> </view>
                    </view>
                    <view class="event-info">
                        <view class="event-title">
                            <text class="event-id">{{ item.lineName }}</text>
                            <text class="event-tag" :class="`${judgment(item.showName).type}-tag`">{{
                                item.showName
                                }}</text>
                        </view>
                        <view class="event-desc">
                            <text>工程：{{ item.engineeringName }}</text>
                            <text>项目：{{ item.projectName }}</text>
                            <text>设备：{{ item.equipmentName }}</text>
                        </view>
                    </view>
                    <view class="event-action">
                        <uni-icons type="search" size="25" color="#376cf3"></uni-icons>
                    </view>
                </view>
                <!-- 详情区域 -->
                <view class="event-detail">
                    <text>
                        {{ item.startTime ? '发生时间：' + item.startTime : '' }}
                        {{
                            item.evtParamVVaDepth != null && item.evtParamVVaDepth !== ''
                                ? '，幅值：' + item.evtParamVVaDepth + '%'
                                : ''
                        }}
                        {{
                            item.evtParamTm != null && item.evtParamTm !== ''
                                ? '，持续时间：' + item.evtParamTm + 's'
                                : ''
                        }}
                        {{
                            item.evtParamPhase != null && item.evtParamPhase !== ''
                                ? '，相别：' + item.evtParamPhase
                                : ''
                        }} {{
                            item.landPoint != null && item.landPoint !== ''
                                ? '，落点区域：' + item.landPoint
                                : '，落点区域：未知'
                        }}
                    </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 class="back-top boxClick" v-show="showBackTop" @click="backToTop">
            <uni-icons type="arrow-up" size="22" color="#fff"></uni-icons>
        </view>
    </view>
</template>
<script>
import list from '@/common/js/list'
import { queryAppEventCounts } from '../../common/api/harmonic.js'

export default {
    props: {
        navHeight: {
            type: Number,
            default: 0,
        },
        selectValue: {
            type: Object,
            // default: () => {},
        },
        sortIndex: {
            type: [Number, String],
            // default: () => {},
        },
    },
    mixins: [list],
    data() {
        return {
            height: 0,
            filterValue: 0,
            dataList: [
                { value: 0, label: '暂态数量', key: '' },
                { value: 0, label: '暂降', key: '电压暂降' },
                { value: 0, label: '中断', key: '电压中断' },
                { value: 0, label: '暂升', key: '电压暂升' },
            ],
            status: 'noMore', //more加载前  loading加载中 noMore加载后
            sort: 0,
            triggered: true,
            scrollTop: 0,
            oldScrollTop: 0,
            showBackTop: false,
        }
    },

    methods: {
        getHeight() {
            uni.createSelectorQuery()
                .select('.transientBox')
                .boundingClientRect((rect) => {
                    //
                    // #ifdef H5
                    this.height = rect?.height || 0
                    // #endif
                    // #ifdef APP-PLUS
                    this.height = rect?.height || 0
                    // #endif
                })
                .exec()
        },
        // 查詢
        init() {
            this.store = this.DataSource('/cs-harmonic-boot/eventUser/queryEventpage')
            this.store.params.type = 0
            // this.store.params.pageSize = 10000
            this.store.params.sortField = this.sortIndex
            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.target =
                this.filterValue == 0
                    ? []
                    : this.filterValue == 1
                        ? ['Evt_Sys_DipStr']
                        : this.filterValue == 2
                            ? ['Evt_Sys_IntrStr']
                            : ['Evt_Sys_SwlStr']
            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.getHeight()
                this.loading = false
                queryAppEventCounts(this.store.params).then((res) => {
                    this.dataList[0].value = res.data?.allNum || 0
                    this.dataList[1].value = res.data?.eventDown || 0
                    this.dataList[2].value = res.data?.eventOff || 0
                    this.dataList[3].value = res.data?.eventUp || 0
                })
            }
            this.store.reload()
        },
        judgment(val, key) {
            switch (val) {
                case '电压暂降':
                    return {
                        type: 'sag',
                        icon: 'icon-a-svg4',
                        color: '#2563eb',
                        size: '25',
                    }
                case '电压暂升':
                    return {
                        type: 'swell',
                        icon: 'icon-a-svg5',
                        color: '#e6a23c',
                        size: '25',
                    }
                case '电压中断':
                    return {
                        type: 'interrupt',
                        icon: 'icon-zhongduan2',
                        color: '#6b7280',
                        size: '35',
                    }
                case '瞬态':
                    return {
                        type: 'transient',
                        icon: 'icon-shuntaishijian',
                        color: '#8b5cf6',
                        size: '40',
                    }
                case '未知':
                    return {
                        type: 'unknown',
                        icon: 'icon-wenhao',
                        color: '#6b7280',
                        size: '45',
                    }
            }
        },

        // 点击查看详情
        jump(item) {
            let str = JSON.stringify(item).replace(/%/g, '百分比')
            item.status = '1'
            uni.navigateTo({ url: '/pages/message1/comp/transientDetails?detail=' + encodeURIComponent(str) })
        },
        setSort(index) {
            console.log(123, this.sortIndex);

            // this.sort = index
            this.init()
        },
        // 下拉
        refresherrefresh() {
            this.triggered = true
            uni.startPullDownRefresh()
            setTimeout(() => {
                this.triggered = false
            }, 500)
        },
        // 上拉
        scrolltolower() {
            if (this.store.status != 'noMore') {
                this.store.next && this.store.next()
            }
        },
        onScroll(e) {
            this.oldScrollTop = e.detail.scrollTop
            this.showBackTop = e.detail.scrollTop > 200
        },
        backToTop() {
            this.scrollTop = this.oldScrollTop
            this.$nextTick(() => {
                this.scrollTop = 0
            })
            this.showBackTop = false
        },
    },
    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';

/deep/ .uni-scroll-view-refresher {
    display: none;
}

.back-top {
    position: fixed;
    right: 30rpx;
    bottom: 60rpx;
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    background: #376cf3;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4rpx 16rpx rgba(55, 108, 243, 0.35);
    z-index: 99;
}
</style>