meilan-app/src/pages/home-new/components/selfCheck.vue

<template>
    <view class="self-check-container">
        <view class="self-check-header">
            <text class="header-title">定/自检</text>
            <text class="view-all" @click="goToSelfCheckPage('all')">查看全部</text>
        </view>

        <view class="self-check-content">
            <!-- 已过期定检提醒 -->
            <view class="check-section" v-if="expiredItems.length > 0">
                <view class="section-header">
                    <text class="section-title">已过期定检提醒</text>
                    <text class="view-more" @click="goToSelfCheckPage('expired')">查看更多</text>
                </view>
                <view class="check-item" v-for="(item, index) in expiredItems" :key="index">
                    <view class="item-indicator expired"></view>
                    <view class="item-content">
                        <view class="item-row">
                            <text class="item-label">{{ item.name }}</text>
                            <text class="item-label">{{ item.serialNumber }}</text>
                            <text class="item-date">{{ item.date }}</text>
                        </view>
                        <view class="item-row">
                            <text class="item-label">{{ item.location }}</text>
                            <text class="item-role">{{ item.role }}</text>
                        </view>
                    </view>
                </view>
            </view>

            <!-- 两周内到期提醒 -->
            <view class="check-section" v-if="twoWeeksItems.length > 0">
                <view class="section-header">
                    <text class="section-title">两周内到期提醒</text>
                    <text class="view-more" @click="goToSelfCheckPage('twoWeeks')">查看更多</text>
                </view>
                <view class="check-item" v-for="(item, index) in twoWeeksItems" :key="index">
                    <view class="item-indicator urgent"></view>
                    <view class="item-content">
                        <view class="item-row">
                            <text class="item-label">{{ item.name }}</text>
                            <text class="item-label">{{ item.serialNumber }}</text>
                            <text class="item-date">{{ item.date }}</text>
                        </view>
                        <view class="item-row">
                            <text class="item-label">{{ item.location }}</text>
                            <text class="item-role">{{ item.role }}</text>
                        </view>
                    </view>
                </view>
            </view>

            <!-- 一月内检到期提醒 -->
            <view class="check-section" v-if="oneMonthItems.length > 0">
                <view class="section-header">
                    <text class="section-title">一月内检到期提醒</text>
                    <text class="view-more" @click="goToSelfCheckPage('oneMonth')">查看更多</text>
                </view>
                <view class="check-item" v-for="(item, index) in oneMonthItems" :key="index">
                    <view class="item-indicator normal"></view>
                    <view class="item-content">
                        <view class="item-row">
                            <text class="item-label">{{ item.name }}</text>
                            <text class="item-label">{{ item.serialNumber }}</text>
                            <text class="item-date">{{ item.date }}</text>
                        </view>
                        <view class="item-row">
                            <text class="item-label">{{ item.location }}</text>
                            <text class="item-role">{{ item.role }}</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { getDeviceList } from "@/api/home-new/home-new";

export default {
    name: 'SelfCheck',
    data() {
        return {
            // 已过期定检数据
            expiredItems: [],
            // 两周内到期数据
            twoWeeksItems: [],
            // 一月内到期数据
            oneMonthItems: []
        }
    },
    mounted() {
        this.fetchDeviceList();
    },
    methods: {
        goToSelfCheckPage(tab) {
            uni.navigateTo({
                url: `/pages/selfCheck/index?tab=${tab}`
            });
        },
        fetchDeviceList() {
            // 分别请求三种颜色的数据
            Promise.all([
                getDeviceList({ colorType: 'RED' }),      // 已过期 - 红色
                getDeviceList({ colorType: 'ORANGE' }),   // 两周内到期 - 橙色
                getDeviceList({ colorType: 'YELLOW' })     // 一月内到期 - 黄色
            ]).then(results => {
                // 处理红色数据（已过期）
                if (results[0].code === 200) {
                    this.expiredItems = (results[0].data || []).slice(0, 2).map(item => this.formatDeviceItem(item));
                }
                // 处理橙色数据（两周内到期）
                if (results[1].code === 200) {
                    this.twoWeeksItems = (results[1].data || []).slice(0, 2).map(item => this.formatDeviceItem(item));
                }
                // 处理黄色数据（一月内到期）
                if (results[2].code === 200) {
                    this.oneMonthItems = (results[2].data || []).slice(0, 2).map(item => this.formatDeviceItem(item));
                }
            }).catch(err => {
                console.error('获取设备列表失败', err);
            });
        },
        formatDeviceItem(item) {
            return {
                name: item.equipmentName || '空',
                serialNumber: item.equipmentCode || '空',
                location: item.installationLocation || '空',
                role:`${item.inspectionTeamLeaderName || ''}、${item.inspectionTeamMember1Name || ''}、${item.inspectionTeamMember2Name || ''}`|| '空',
                date: this.formatDate(item.nextInspectionDueDate)|| '空'
            };
        },
        formatDate(dateStr) {
            if (!dateStr) return '';
            const date = new Date(dateStr);
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            return `${year}-${month}-${day}`;
        }
    }
}
</script>

<style scoped>
.self-check-container {
    width: 100%;
    padding: 12px;
    background-color: #f5f7fa;
}

.self-check-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.header-title {
    font-size: 20px;
    font-weight: bold;
    color: #333;
}

.view-all {
    font-size: 14px;
    color: #409eff;
}

.self-check-content {
    background-color: #fff;
    border-radius: 12px;
    padding: 12px;
}

.check-section {
    margin-bottom: 16px;
}

.check-section:last-child {
    margin-bottom: 0;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.section-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
}

.view-more {
    font-size: 14px;
    color: #409eff;
}

.check-item {
    display: flex;
    align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}

.check-item:last-child {
    border-bottom: none;
}

.item-indicator {
    width: 6px;
    border-radius: 3px;
    margin-right: 10px;
    flex-shrink: 0;
}

.item-indicator.expired {
    background-color: #FF0000;
    height: 48px;
}

.item-indicator.urgent {
    background-color: #FFA500;
    height: 48px;
}

.item-indicator.normal {
    background-color: #FFD700;
    height: 48px;
}

.item-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.item-label {
    font-size: 14px;
    color: #333;
}

.item-date {
    font-size: 14px;
    color: #333;
}

.item-role {
    font-size: 14px;
    color: #333;
}
</style>