app-govern/pages/index/comp/apply.vue

<template>
    <view>
        <view class="filterCriteria">
            <!-- 筛选条件 -->
            <Cn-filterCriteria @select="select" :singleChoice="true" :showDatetime="true"> </Cn-filterCriteria>
            <!-- <view class="choose1">
                <view class="nav-menu nav-menu-btn" @click="selectDevice">申请报告 </view>
            </view> -->
        </view>
        <view class="smallLabel mt20">
            <view class="boxCenter">
                <view>
                    <checkbox-group @change="changeBox" class="boxCenter"
                        ><checkbox value="true" :checked="checkedAll" />全选　
                    </checkbox-group></view
                >
                已选择 {{ checkedTotal }} 条事件
            </view>
            <view class="nav-menu nav-menu-btn" @click="selectDevice">申请报告 </view>
            <!-- <view style="width: 180rpx">
                <picker @change="bindPickerChange" :value="sort" :range="array">
                    <view class="uni-input"
                        >{{ array[sort] }}排序
                        <uni-icons custom-prefix="iconfont" type="icon-paixu1" size="10" color="#2563EB"></uni-icons>
                    </view>
                </picker>
            </view> -->
        </view>
        <!-- 卡片 -->
        <scroll-view
            scroll-y="true"
            @scrolltolower="scrolltolower"
            class="event-list"
            :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"
                :key="index"
                @click="clackCard(item)"
            >
                <!-- 头部：图标 + 信息 + 操作 -->
                <view class="event-header">
                    <view class="event-icon">
                        <!-- 动态图标：根据类型切换 -->
                        <!-- <uni-icons
                            :custom-prefix="judgment(item.showName) == 'interrupt' ? 'custom-icon' : 'iconfont'"
                            :type="judgment(item.showName).icon"
                            :color="judgment(item.showName).color"
                            :size="judgment(item.showName).size"
                        ></uni-icons> -->
                        <Cn-icon-transient :name="item.showName" />
                    </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">
                        <!-- 选择 -->
                        <checkbox-group @change="changeChild($event, item)"
                            ><checkbox value="true" :disabled="!item.wavePath" :checked="item.checked" />
                        </checkbox-group>
                    </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
                                : ''
                        }}
                    </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 { applicationReport } from '@/common/api/report.js'
export default {
    components: {},
    props: {
        navHeight: {
            type: Number,
            default: 0,
        },
    },
    mixins: [list],
    data() {
        return {
            selectValue: {},
            height: 0,
            checkedAll: false,
            checkedTotal: 0,
            sort: 0,
            array: ['发生时间', '暂降深度', '持续时间'],
        }
    },
    mounted() {},

    methods: {
        setHeight() {
            uni.createSelectorQuery()
                .select('.filterCriteria')
                .boundingClientRect((rect) => {
                    //
                    // #ifdef H5
                    this.height = rect?.height + 170 || 0
                    // #endif
                    // #ifdef APP-PLUS
                    this.height = rect?.height + 100 || 0
                    // #endif
                })
                .exec()
        },
        async select(val) {
            this.selectValue = val
            await this.init()
            setTimeout(() => {
                this.setHeight()
            }, 200)
        },
        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.target = ['Evt_Sys_DipStr']
            this.store.params.startTime = this.$util.getMonthFirstAndLastDay(this.selectValue.date).firstDay
            this.store.params.endTime = this.$util.getMonthFirstAndLastDay(this.selectValue.date).lastDay
            // this.store.params.startTime = this.selectValue.range[0]
            // this.store.params.endTime = this.selectValue.range[1]
            this.store.loadedCallback = () => {
                this.checkedTotal = 0
                this.store.data = this.store.data.map((item) => {
                    item.checked = false
                    return item
                })
            }
            this.store.reload()
        },
        // 全选
        changeBox(e) {
            this.checkedAll = !this.checkedAll
            if (e.target.value.length > 0) {
                let total = 0
                this.store.data = this.store.data.map((item) => {
                    if (item.wavePath != null) {
                        item.checked = true
                        total += 1
                    } else {
                        item.checked = false
                    }
                    return item
                })
                this.checkedTotal = total
            } else {
                this.store.data = this.store.data.map((item) => {
                    item.checked = false
                    return item
                })
                this.checkedTotal = 0
            }
        },
        changeChild(e, item) {
            item.checked = !item.checked
            this.checkedAll = this.store.data.every((item) => item.checked === true)
            this.checkedTotal = this.store.data.filter((item) => item.checked === true).length
        },
        // 点击卡片
        clackCard() {},
        // 切换排序
        bindPickerChange(e) {
            this.sort = e.detail.value
            this.init()
        },
        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',
                    }
            }
        },
        // 申请
        selectDevice() {
            if (this.checkedTotal == 0) {
                return uni.showToast({
                    title: '请选择事件!',
                    icon: 'none',
                })
            } else {
                uni.showLoading({
                    title: '申请中,请稍等...',
                    mask: true,
                })

                let list = this.store.data.filter((item) => item.checked === true)
                applicationReport({
                    list: list.map((item) => item.id),
                    lineId: list[0].lineId,
                    startTime: this.$util.getMonthFirstAndLastDay(this.selectValue.date).firstDay,
                    endTime: this.$util.getMonthFirstAndLastDay(this.selectValue.date).lastDay,
                }).then((res) => {
                    this.store.reload()
                    uni.showToast({
                        icon: 'success',
                        mask: true,
                        title: '申请暂态报告,成功!',
                        duration: 1000,
                    })
                })
            }
        },
        isAllLineIdSame(data) {
            // 获取第一个元素的lineId作为基准
            const baseLineId = data[0].lineId

            // 遍历数组，检查每个元素的lineId是否和基准一致
            for (let item of data) {
                // 兼容元素可能没有lineId的情况
                if (!item || item.lineId !== baseLineId) {
                    return false
                }
            }

            return true
        },
        // 下拉
        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: {},
}
</script>
<style lang="scss" scoped>
@import '@/pages/message1/index.scss';
.filterCriteria {
    .nav {
        background-color: #fff;
    }
    .choose1 {
        background-color: #fff;
        padding: 0 20rpx;
        display: flex;
        justify-content: flex-end;
        /deep/ .uni-checkbox-input {
            width: 30rpx;
            height: 30rpx;
        }
        font-size: 26rpx;
    }
}
.nav-menu {
    height: 40rpx;
    padding: 6rpx 20rpx;
    // margin-left: 20rpx;
    // margin-bottom: 20rpx;
    line-height: 40rpx;
    font-size: 24rpx;
    border-radius: 8rpx;
    background: #ebeaec;
    color: #666;
    &-active {
        background: #dfe5f7;
        color: $uni-theme-color;
    }
    &-btn {
        background: $uni-theme-color;
        color: #fff;
    }
}
/deep/.uni-card__content {
    padding: 20rpx !important;
}
.smallLabel {
    justify-content: space-between;
    font-size: 26rpx !important;
}
.boxCenter {
    display: flex !important;
    align-items: center !important;
}
</style>