app-govern/pages/message1/steadyState.vue

<template>
    <view style="position: relative">
        <!-- 稳态 -->
        <view class="transientBox">
            <view class="statistics pd20">
                <view
                    class="box"
                    :class="{ boxClick: item.label == filterValue }"
                    v-for="item in list"
                    @click="
                        filterValue = item.label
                        init()
                    "
                >
                    <text class="num">{{ item.value }}</text>
                    <text class="label">{{ item.label }}</text>
                </view>
            </view>
        </view>
        <!-- 越限数量 -->
        <scroll-view
            v-if="filterValue == '越限数量'"
            scroll-y="true"
            @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="item.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="icon-kouanjiancedian"
                            size="40"
                            color="#E6A23C"
                        ></uni-icons> -->
                        <Cn-icon-transient :name="`稳态越限`" />
                        <view class="badge1" v-if="item.isRead == 0"></view>
                    </view>
                    <view class="event-info">
                        <view class="event-title">
                            <text class="event-id">{{ item.lineName }}</text>
                        </view>
                        <view class="event-desc">
                            <text>工程名称：{{ item.engineeringName }}</text>
                            <text>项目名称：{{ item.projectName }}</text>
                            <text>设备名称：{{ item.devName }}</text>
                            <!-- <text>统计日期：{{ item.statisticsDate }}</text> -->
                        </view>
                    </view>
                    <view class="event-action">
                        <uni-icons type="search" size="25" color="#376cf3"></uni-icons>
                    </view>
                </view>
                <!-- 详情区域 -->
                <view class="event-detail textBox" @touchmove.stop>
                    <text>{{ item.statisticsDate }}发生 {{ item.overLimitDesc }}</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 v-if="filterValue == '越限天数'">
            <uni-calendar
                :insert="true"
                :lunar="false"
                :date="startData"
                :selected="selected"
                :start-date="startData"
                :end-date="endData"
            />
        </view>
        <!-- 越限测点数 -->
        <scroll-view
            v-if="filterValue == '越限测点数'"
            scroll-y="true"
            @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" :class="item.type" v-for="(item, index) in store.data" :key="index">
                <!-- 头部：图标 + 信息 + 操作 -->
                <view class="event-header">
                    <view class="event-icon">
                        <!-- 动态图标：根据类型切换 -->
                        <!-- <uni-icons
                            custom-prefix="iconfont"
                            type="icon-kouanjiancedian"
                            size="40"
                            color="#E6A23C"
                        ></uni-icons> -->
                        <Cn-icon-transient :name="`稳态越限`" />
                    </view>
                    <view class="event-info">
                        <view class="event-title">
                            <text class="event-id">{{ item.lineName }}</text>
                        </view>
                        <view class="event-desc">
                            <text>工程名称：{{ item.engineeringName }}</text>
                            <text>项目名称：{{ item.projectName }}</text>
                            <text>设备名称：{{ item.devName }}</text>
                            <!-- <text>统计日期：{{ item.statisticsDate }}</text> -->
                        </view>
                    </view>
                </view>
                <!-- 详情区域 -->
                <view class="event-detail">
                    <uni-calendar
                        :insert="true"
                        :lunar="false"
                        :date="startData"
                        :selected="item.timeList.map((date) => ({ date, info: '' }))"
                        :start-date="startData"
                        :end-date="endData"
                    />
                </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 { queryAppHarmonicCounts, queryAppHarmonicLine } from '../../common/api/harmonic.js'

export default {
    components: {},
    props: {
        navHeight: {
            type: Number,
            default: 0,
        },
        selectValue: {
            type: Object,
            // default: () => {},
        },
    },
    mixins: [list],
    data() {
        return {
            height: 0,
            filterValue: '越限数量',
            list: [
                { value: 0, label: '越限数量' },
                { value: 0, label: '越限天数' },
                { value: 0, label: '越限测点数' },
            ],
            startData: '',
            endData: '',
            selected: [
                // { date: '2026-04-10', info: '' },
                // { date: '2026-04-11', info: '' },
                // { date: '2026-04-12', info: '' },
            ],

            triggered: true,
            status: 'noMore', //more加载前  loading加载中 noMore加载后
        }
    },
    mounted() {
        uni.createSelectorQuery()
            .select('.transientBox')
            .boundingClientRect((rect) => {
                //
                // #ifdef H5
                this.height = rect.height
                // #endif
                // #ifdef APP-PLUS
                this.height = rect.height
                // #endif
            })
            .exec()
    },

    methods: {
        //           "devId": "",
        //   "engineerId": "",
        //   "lineId": "",
        //   "projectId": "",
        //   "time": ""
        // 查詢
        init() {
            if (this.filterValue == '越限测点数') {
                this.store = this.DataSource('/cs-harmonic-boot/csHarmonic/queryAppHarmonicLine')
            } else {
                this.store = this.DataSource('/cs-harmonic-boot/csHarmonic/queryHarmonicList')
            }
            // this.store.params.pageSize = 10000
            this.store.params.engineerId = this.selectValue.engineeringId
            this.store.params.projectId = this.selectValue.projectId
            this.store.params.devId = this.selectValue.deviceId
            this.store.params.lineId = this.selectValue.lineId
            this.store.params.time = this.selectValue.date

            this.store.loadedCallback = () => {
                this.loading = false
                this.startData = this.$util.getMonthFirstAndLastDay(this.selectValue.date).firstDay
                this.endData = this.$util.getMonthFirstAndLastDay(this.selectValue.date).lastDay
                // 查询越限日期
                queryAppHarmonicCounts(this.store.params).then((res) => {
                    this.list[0].value = res.data.harmonicNums
                    this.list[1].value = res.data.overDays
                    this.list[2].value = res.data.overLineNums
                    this.selected = res.data.overDaysList.map((date) => ({ date, info: '' }))
                })
            }
            this.store.reload()
        },

        jump(item) {
            let str = JSON.stringify(item).replace(/%/g, '百分比')
            item.status = '1'

            uni.navigateTo({ url: '/pages/message1/comp/steadyStateDetails?detail=' + encodeURIComponent(str) })
        },
        // 下拉
        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';

.box:first-child {
    flex: 1.3 !important;
}

/* 列表容器 */
.event-list {
    /* 头部：图标 + 信息 + 操作 */
    .event-header {
        display: flex;
        align-items: center;
        margin-bottom: 10rpx;
    }

    /* 图标区域（按类型区分背景色） */
    .event-icon {
        background-color: #376cf320;
    }

    .event-tags {
        font-size: 24rpx;
    }
}

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

.textBox {
    max-height: 110rpx;
    overflow-y: auto;
    // overflow: hidden;
    /* 下面是溢出显示省略号关键样式 */
    // display: -webkit-box;
    // -webkit-line-clamp: 3; /* 控制最多显示几行，你可以改 2/3/4 */
    // -webkit-box-orient: vertical;
    // text-overflow: ellipsis;
    // word-break: break-all;
}

/deep/ .uni-calendar-item--checked {
    background-color: #ffffff00;
    color: #000000e6;
    opacity: 1;
}

/deep/ .uni-calendar-item--isDay {
    background-color: #ffffff00;
    color: #000000e6;
    opacity: 1;

    .uni-calendar-item__weeks-lunar-text {
        background-color: #ffffff00;
        color: #000000e6;
        opacity: 1;
    }
}

/deep/ .uni-calendar-item__weeks-box-text {
    z-index: 1;
}

/deep/ .uni-calendar-item--isDay-text {
    color: #333 !important; /* 改成你想要的颜色 */
}

/deep/ .uni-calendar-item__weeks-box-circle {
    position: absolute;
    top: 7px;
    right: 6px;
    width: 39px;
    height: 39px;
    border-radius: 50%;
    z-index: 0;
    background-color: #e6a23c;
}

/* 核心：选中圆圈下的 子元素（日期数字） */
/deep/ .uni-calendar-item__weeks-box-circle + .uni-calendar-item__weeks-box-text {
    color: #fff !important; /* 改成你想要的颜色 */
}

/deep/ .uni-calendar__backtoday,
/deep/ .uni-calendar__header-btn-box {
    display: none;
}

/deep/ .uni-calendar-item__weeks-lunar-text {
    display: none;
}

/deep/ .uni-calendar__header {
    pointer-events: none !important;
}

.event-detail {
    /deep/ .uni-calendar__header {
        display: none !important;
    }

    /deep/ .uni-calendar__weeks-day {
        height: 35px;
    }

    /deep/ .uni-calendar-item__weeks-box-item {
        height: 40px;
    }

    /deep/ .uni-calendar-item__weeks-box-circle {
        position: absolute;
        top: 3px;
        right: 8px;
        width: 35px;
        height: 35px;
    }
}
</style>