app-govern/pages/message1/transient.vue

<template>
    <view style="position: relative">
        <!-- 暂态 -->
        <view class="transientBox">
            <view class="statistics pd20">
                <view
                    class="box"
                    :class="{ boxClick: filterValue == item.key }"
                    v-for="item in list"
                    @click="filterValue = item.key"
                >
                    <!-- <text class="num">{{ item.value }}</text> -->
                    <text class="num">{{
                        store &&
                        store.data &&
                        store.data.filter((k) => (item.key == '' ? item : k.showName == item.key)).length
                    }}</text>
                    <text class="label">{{ item.label }}</text>
                </view>
            </view>
            <view class="smallLabel">
                <uni-segmented-control
                    :current="curSub"
                    active-color="#376cf3"
                    :values="subsectionList"
                    @clickItem="sectionChange"
                    v-if="subsectionList.length > 1"
                />
                <view style="width: 180rpx">
                    <picker @change="bindPickerChange" :value="sort" :range="array" v-if="curSub == 0">
                        <view class="uni-input"
                            >{{ array[sort] }}排序
                            <uni-icons
                                custom-prefix="iconfont"
                                type="icon-paixu1"
                                size="10"
                                color="#2563EB"
                            ></uni-icons>
                        </view>
                    </picker>
                </view>
            </view>
        </view>
        <!-- 卡片 -->
        <scroll-view
            scroll-y="true"
            @refresherrefresh="refresherrefresh"
            :refresher-triggered="triggered"
            refresher-enabled="true"
            class="event-list"
            v-if="curSub == 0"
            :style="{ height: 'calc(100vh - ' + (navHeight + height) + 'px)', overflow: 'auto' }"
        >
            <!-- 循环渲染事件项 -->
            <uni-card
                class="event-item"
                :class="judgment(item.showName).type"
                v-for="(item, index) in (store.data || []).filter((k) =>
                    filterValue == '' ? k : k.showName == filterValue,
                )"
                :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>
                        <!-- 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.equipmentName }}</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.lineName }}</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.evtParamVVaDepth }}，持续时间：{{
                            item.evtParamTm
                        }}，相别：{{ item.evtParamPhase }}
                    </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>
        <!-- ITIC 列表 -->
        <ITIC
            v-if="subsectionList[curSub] == 'ITIC'"
            :store="store"
            :filterValue="filterValue"
            :style="{ height: 'calc(100vh - ' + (navHeight + height) + 'px)', overflow: 'auto' }"
        ></ITIC>
        <!-- F47 列表 -->
        <F47
            v-if="subsectionList[curSub] == 'F47'"
            :store="store"
            :filterValue="filterValue"
            :style="{ height: 'calc(100vh - ' + (navHeight + height) + 'px)', overflow: 'auto' }"
        ></F47>
    </view>
</template>
<script>
import list from '@/common/js/list'
import { queryUserPushConfig } from '@/common/api/mine'
import ITIC from './comp/ITIC.vue'
import F47 from './comp/F47.vue'

export default {
    components: { ITIC, F47 },
    props: {
        navHeight: {
            type: Number,
            default: 0,
        },
        selectValue: {
            type: Object,
            // default: () => {},
        },
    },
    mixins: [list],
    data() {
        return {
            height: 0,
            filterValue: '',
            list: [
                { value: 0, label: '暂态数量', key: '' },
                { value: 0, label: '暂降', key: '电压暂降' },
                { value: 0, label: '中断', key: '电压中断' },
                { value: 0, label: '暂升', key: '电压暂升' },
            ],
            curSub: 0,
            subsectionList: [], //'列表', 'ITIC', 'F47'
            status: 'noMore', //more加载前  loading加载中 noMore加载后
            sort: 0,
            triggered: true,
            // config: {},
            array: ['发生时间', '暂降深度', '持续时间'],
        }
    },

    mounted() {
        this.getConfig()
        uni.createSelectorQuery()
            .select('.transientBox')
            .boundingClientRect((rect) => {
                //
                // #ifdef H5
                this.height = rect?.height + 12 || 0
                // #endif
                // #ifdef APP-PLUS
                this.height = rect?.height + 12 || 0
                // #endif
            })
            .exec()
    },

    methods: {
        // 查詢
        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.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.filterValue = ''
                this.loading = false
            }
            this.store.reload()
        },
        getConfig() {
            queryUserPushConfig().then((res) => {
                // this.config = res.data
                let list = [
                    '列表',
                    res.data.iticFunction == 1 ? 'ITIC' : '',
                    res.data.f47Function == 1 ? 'F47' : '',
                ].filter((item) => item)
                this.curSub = !list[this.curSub] ? 0 : this.curSub
                this.subsectionList = JSON.parse(JSON.stringify(list))
            })
        },

        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) })
        },
        // 切换排序
        bindPickerChange(e) {
            this.sort = e.detail.value
            this.init()
        },
        sectionChange(e) {
            this.curSub = e.currentIndex
        },
        // 下拉
        refresherrefresh() {
            this.triggered = true
            uni.startPullDownRefresh()
            setTimeout(() => {
                this.triggered = false
            }, 500)
        },
    },
    onShow() {
        this.curSub = 0
    },
    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;
}

</style>