feat: 新增设备定自检功能模块

1. 新增pages/selfCheck页面作为定自检详情页
2. 在家页面新增针对设备维修中心的定自检组件
3. 注册全局定自检组件并配置路由权限

src/pages.json

@@ -321,6 +321,12 @@
       }
     },
     {
+      "path": "pages/selfCheck/index",
+      "style": {
+        "navigationBarTitleText": "定/自检"
+      }
+    },
+    {
       "path": "pages/seizeStatistics/index",
       "style": {
         "navigationBarTitleText": "查获统计"

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

@@ -0,0 +1,227 @@
+<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">
+                <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">
+                <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">
+                <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>
+export default {
+    name: 'SelfCheck',
+    data() {
+        return {
+            // 已过期定检数据
+            expiredItems: [
+                { name: '设备名称', serialNumber: '设备序列号', location: '设备位置', role: '组长、组员、组员', date: '2026-06-10' },
+                { name: '设备名称', serialNumber: '设备序列号', location: '设备位置', role: '组长、组员、组员', date: '2026-06-10' }
+            ],
+            // 两周内到期数据
+            twoWeeksItems: [
+                { name: '设备名称', serialNumber: '设备序列号', location: '设备位置', role: '组长、组员、组员', date: '2026-06-10' },
+                { name: '设备型号', serialNumber: '设备序列号', location: '设备位置', role: '组长、组员、组员', date: '2026-06-10' }
+            ],
+            // 一月内到期数据
+            oneMonthItems: [
+                { name: '设备型号', serialNumber: '设备序列号', location: '设备位置', role: '组长、组员、组员', date: '2026-06-10' },
+                { name: '设备型号', serialNumber: '设备序列号', location: '设备位置', role: '组长、组员、组员', date: '2026-06-10' }
+            ]
+        }
+    },
+    methods: {
+        goToSelfCheckPage(tab) {
+            uni.navigateTo({
+                url: `/pages/selfCheck/index?tab=${tab}`
+            });
+        }
+    }
+}
+</script>
+
+<style scoped>
+.self-check-container {
+    width: 100%;
+    padding: 16px;
+    background-color: #f5f7fa;
+}
+
+.self-check-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+}
+
+.header-title {
+    font-size: 24px;
+    font-weight: bold;
+    color: #333;
+}
+
+.view-all {
+    font-size: 16px;
+    color: #409eff;
+}
+
+.self-check-content {
+    background-color: #fff;
+    border-radius: 12px;
+    padding: 16px;
+}
+
+.check-section {
+    margin-bottom: 24px;
+}
+
+.check-section:last-child {
+    margin-bottom: 0;
+}
+
+.section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 12px;
+}
+
+.section-title {
+    font-size: 20px;
+    font-weight: bold;
+    color: #333;
+}
+
+.view-more {
+    font-size: 16px;
+    color: #409eff;
+}
+
+.check-item {
+    display: flex;
+    align-items: flex-start;
+    padding: 12px 0;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.check-item:last-child {
+    border-bottom: none;
+}
+
+.item-indicator {
+    width: 6px;
+    border-radius: 3px;
+    margin-right: 12px;
+    flex-shrink: 0;
+}
+
+.item-indicator.expired {
+    background-color: #8c3c34;
+    height: 80px;
+}
+
+.item-indicator.urgent {
+    background-color: #ff291f;
+    height: 80px;
+}
+
+.item-indicator.normal {
+    background-color: #b97c45;
+    height: 80px;
+}
+
+.item-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.item-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.item-label {
+    font-size: 16px;
+    color: #333;
+}
+
+.item-date {
+    font-size: 16px;
+    color: #333;
+}
+
+.item-role {
+    font-size: 16px;
+    color: #333;
+}
+</style>

src/pages/home-new/index.vue

@@ -35,41 +35,47 @@
             <Notice ref="notice" />
             <MessagePush ref="messagePush" />
 
-            <!-- 时间范围选择 -->
-            <div class="time-range-section">
-                <div class="time-tags-container">
-                    <div v-for="tag in timeTags" :key="tag.value"
-                        :class="['time-tag', { 'active': selectedTimeRange === tag.value, 'time-range-label': tag.isLabel }]"
-                        @click="tag.isLabel ? null : handleTimeTagClick(tag)">
-                        {{ tag.label }}
-                    </div>
-
-                    <!-- 自定义时间显示 - 紧跟自定义时间标签 -->
-                    <div v-if="selectedTimeRange === 'custom'" class="custom-time-inline">
-                        <uni-datetime-picker v-model="dateRange" type="daterange" rangeSeparator="至"
-                            @change="handleDateRangeChange" class="date-range-picker" :clear-icon="false" />
-                        <div class="days-count">共 {{ totalDays }} 天</div>
+            <!-- 当 currentDepartment === '设备维修中心' 时显示 SelfCheck 组件 -->
+            <SelfCheck v-if="currentDepartment === '设备维修中心'" />
+
+            <!-- 当 currentDepartment !== '设备维修中心' 时显示原内容 -->
+            <template v-else>
+                <!-- 时间范围选择 -->
+                <div class="time-range-section">
+                    <div class="time-tags-container">
+                        <div v-for="tag in timeTags" :key="tag.value"
+                            :class="['time-tag', { 'active': selectedTimeRange === tag.value, 'time-range-label': tag.isLabel }]"
+                            @click="tag.isLabel ? null : handleTimeTagClick(tag)">
+                            {{ tag.label }}
+                        </div>
+
+                        <!-- 自定义时间显示 - 紧跟自定义时间标签 -->
+                        <div v-if="selectedTimeRange === 'custom'" class="custom-time-inline">
+                            <uni-datetime-picker v-model="dateRange" type="daterange" rangeSeparator="至"
+                                @change="handleDateRangeChange" class="date-range-picker" :clear-icon="false" />
+                            <div class="days-count">共 {{ totalDays }} 天</div>
+                        </div>
                     </div>
                 </div>
-            </div>
 
-            <!-- TypeDetail组件 -->
-            <TypeDetail :data-list="typeDetailData" @sort-change="handleSortChange" />
+                <!-- TypeDetail组件 -->
+                <TypeDetail :data-list="typeDetailData" @sort-change="handleSortChange" />
 
-            <!-- TotalDetail组件 -->
-            <TotalDetail :homePageWholeData="homePageWholeData" :start-date="startDate" :end-date="endDate"
-                :time-range="selectedTimeRange" :selectedRole="selectedRole" />
+                <!-- TotalDetail组件 -->
+                <TotalDetail :homePageWholeData="homePageWholeData" :start-date="startDate" :end-date="endDate"
+                    :time-range="selectedTimeRange" :selectedRole="selectedRole" />
 
 
-            <!-- QualityControlAnalysis组件 -->
-            <QualityControlAnalysis v-if="role.includes('zhijianke') || role.includes('test')"
-                :checkProblemDistributionData="checkProblemDistributionData"
-                :accuracyAnalysisData="accuracyAnalysisData" :prohibitedTop3Data="prohibitedTop3Data"
-                :concealmentPositionTop1Data="concealmentPositionTop1Data" />
+                <!-- QualityControlAnalysis组件 -->
+                <QualityControlAnalysis v-if="role.includes('zhijianke') || role.includes('test')"
+                    :checkProblemDistributionData="checkProblemDistributionData"
+                    :accuracyAnalysisData="accuracyAnalysisData" :prohibitedTop3Data="prohibitedTop3Data"
+                    :concealmentPositionTop1Data="concealmentPositionTop1Data" />
 
-            <!-- PerformanceAnalysis组件 -->
-            <PerformanceAnalysis v-if="role.includes('zhijianke') || role.includes('test')"
-                :performanceData="performanceData" />
+                <!-- PerformanceAnalysis组件 -->
+                <PerformanceAnalysis v-if="role.includes('zhijianke') || role.includes('test')"
+                    :performanceData="performanceData" />
+            </template>
         </div>
     </view>
 </template>
@@ -86,6 +92,7 @@ import Notice from "@/pages/home/components/notice.vue";
 import SelectTag from "@/components/select-tag/select-tag.vue";
 import TypeDetail from "@/pages/home-new/components/type-detail.vue";
 import TotalDetail from "@/pages/home-new/components/total-detail.vue";
+import SelfCheck from "@/pages/home-new/components/selfCheck.vue";
 import { getUserProfile, getAppListByRoleId, getAppList } from "@/api/system/user";
 import { getAttendanceList } from "@/api/attendance/attendance"
 import { getUnreadCount } from "@/api/check/checkTask"
@@ -104,6 +111,7 @@ export default {
         SelectTag,
         TypeDetail,
         TotalDetail,
+        SelfCheck,
         QualityControlAnalysis,
         PerformanceAnalysis,
         uniDatetimePicker,
@@ -111,6 +119,7 @@ export default {
     },
     data() {
         return {
+            currentDepartment: '设备维修中心', // 用于控制显示不同内容的变量
             checkerId: this.$store.state.user.id,
             userInfo: '',
             todayCheckInTime: '未打卡',

src/pages/selfCheck/index.vue

@@ -0,0 +1,269 @@
+<template>
+    <home-container>
+        <view class="self-check-page">
+            <!-- 标题区域 -->
+            <view class="header-section">
+                <view class="back-button" @click="goBack">
+                    <text class="back-icon">&lt;</text>
+                </view>
+                <view class="page-title">定/自检</view>
+            </view>
+
+            <!-- 标签页区域 -->
+            <view class="tabs-section">
+                <view v-for="(tab, index) in tabs" :key="index"
+                    :class="['tab-item', { 'active': currentTab === tab.value }]"
+                    @click="switchTab(tab.value)">
+                    <text class="tab-text">{{ tab.label }}</text>
+                </view>
+            </view>
+
+            <!-- 卡片列表区域 -->
+            <view class="cards-section">
+                <view class="check-card" v-for="(item, index) in filteredItems" :key="index">
+                    <view class="card-content">
+                        <view class="card-row">
+                            <text class="card-label">{{ item.name }}</text>
+                            <text class="card-label">{{ item.serialNumber }}</text>
+                            <text class="card-date">{{ item.date }}</text>
+                        </view>
+                        <view class="card-row">
+                            <text class="card-label">{{ item.location }}</text>
+                            <text class="card-role">{{ item.role }}</text>
+                        </view>
+                    </view>
+                    <view :class="['status-tag', getStatusClass(item.status)]">
+                        {{ item.statusText }}
+                    </view>
+                </view>
+            </view>
+        </view>
+    </home-container>
+</template>
+
+<script>
+import HomeContainer from "@/components/HomeContainer.vue";
+
+export default {
+    name: 'SelfCheckPage',
+    components: {
+        HomeContainer
+    },
+    data() {
+        return {
+            currentTab: 'oneMonth',
+            tabs: [
+                { label: '全部', value: 'all' },
+                { label: '两周临期', value: 'twoWeeks' },
+                { label: '一月临期', value: 'oneMonth' },
+                { label: '已过期', value: 'expired' }
+            ],
+            allItems: [
+                { 
+                    name: '设备名称', 
+                    serialNumber: '设备序列号', 
+                    location: '设备位置', 
+                    role: '组长、组员、组员', 
+                    date: '2026-06-10', 
+                    status: 'expired',
+                    statusText: '已过期'
+                },
+                { 
+                    name: '设备型号', 
+                    serialNumber: '设备序列号', 
+                    location: '设备位置', 
+                    role: '组长、组员、组员', 
+                    date: '2026-06-10', 
+                    status: 'twoWeeks',
+                    statusText: '两周临期'
+                },
+                { 
+                    name: '设备型号', 
+                    serialNumber: '设备序列号', 
+                    location: '设备位置', 
+                    role: '组长、组员、组员', 
+                    date: '2026-06-10', 
+                    status: 'oneMonth',
+                    statusText: '一月临期'
+                }
+            ]
+        }
+    },
+    onLoad(options) {
+        // 接收跳转参数
+        if (options && options.tab) {
+            this.currentTab = options.tab;
+        }
+    },
+    computed: {
+        filteredItems() {
+            if (this.currentTab === 'all') {
+                return this.allItems;
+            }
+            return this.allItems.filter(item => item.status === this.currentTab);
+        }
+    },
+    methods: {
+        goBack() {
+            uni.navigateBack();
+        },
+        switchTab(tabValue) {
+            this.currentTab = tabValue;
+        },
+        getStatusClass(status) {
+            switch(status) {
+                case 'expired':
+                    return 'expired';
+                case 'twoWeeks':
+                    return 'urgent';
+                case 'oneMonth':
+                    return 'normal';
+                default:
+                    return '';
+            }
+        }
+    }
+}
+</script>
+
+<style scoped>
+.self-check-page {
+    width: 100%;
+    min-height: 100vh;
+    background-color: #fff;
+}
+
+.header-section {
+    display: flex;
+    align-items: center;
+    padding: 20px 16px;
+    position: relative;
+}
+
+.back-button {
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    left: 16px;
+}
+
+.back-icon {
+    font-size: 36px;
+    color: #333;
+    font-weight: bold;
+}
+
+.page-title {
+    flex: 1;
+    text-align: center;
+    font-size: 36px;
+    font-weight: bold;
+    color: #333;
+}
+
+.tabs-section {
+    display: flex;
+    padding: 16px;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.tab-item {
+    margin-right: 32px;
+    padding: 8px 0;
+    position: relative;
+}
+
+.tab-item:last-child {
+    margin-right: 0;
+}
+
+.tab-text {
+    font-size: 24px;
+    color: #999;
+}
+
+.tab-item.active .tab-text {
+    color: #409eff;
+    font-weight: bold;
+}
+
+.tab-item.active::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background-color: #409eff;
+}
+
+.cards-section {
+    padding: 16px;
+}
+
+.check-card {
+    background-color: #fff;
+    border-radius: 16px;
+    padding: 20px;
+    margin-bottom: 24px;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+}
+
+.card-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.card-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.card-label {
+    font-size: 24px;
+    color: #333;
+}
+
+.card-date {
+    font-size: 24px;
+    color: #333;
+}
+
+.card-role {
+    font-size: 24px;
+    color: #333;
+}
+
+.status-tag {
+    padding: 8px 20px;
+    border-radius: 0 16px 16px 0;
+    font-size: 24px;
+    font-weight: bold;
+    margin: -20px -20px -20px 0;
+    align-self: flex-end;
+}
+
+.status-tag.expired {
+    background-color: #e8c8c7;
+    color: #8c3c34;
+}
+
+.status-tag.urgent {
+    background-color: #ffd1d0;
+    color: #ff291f;
+}
+
+.status-tag.normal {
+    background-color: #e8d4bc;
+    color: #b97c45;
+}
+</style>