feat(home-new): 新增首页模块，包含整体数据展示、类型详情和通知组件

refactor: 重构路由配置，将原首页路径迁移至home-new
style: 更新图标资源，添加多种状态图标
docs: 添加首页模块相关API文档

src/api/home-new/home-new.js

@@ -0,0 +1,90 @@
+import request from '@/utils/request'
+
+// 查询我的任务列表（当天有效任务）shudong
+export function getHomePage(params) {
+  return request({
+    url: '/check/largeScreen/homePage',
+    method: 'get',
+    params: params
+  })
+}
+//获取查获上报数据  xiaoxiong
+export function getSeizureReport(params) {
+  return request({
+    url: '/system/check/seizureReport/data',
+    method: 'get',
+    params: params
+  })
+}
+
+//获取考勤统计数据   binge
+export function getAttendanceStats(params) {
+  return request({
+    url: '/attendance/stats/getAttendanceStats',
+    method: 'get',
+    params: params
+  })
+}
+
+//抽问抽答，首页   binge
+export function getAccuracyStatistics(params) {
+  return request({
+    url: '/exam/daily/accuracy-statistics',
+    method: 'get',
+    params: params
+  })
+}
+
+//根据角色获取查获排名  xiaoxiong
+export function getSeizureRanking(data) {
+  return request({
+    url: '/item/seizure/ranking/getRankingByRole',
+    method: 'post',
+    data: data
+  })
+}
+
+
+//获取检查排名  shudong
+export function getCheckRanking(params) {
+  return request({
+    url: '/system/homePage/homePageRanking',
+    method: 'get',
+    params: params
+  })
+}
+
+//首页-整体   shudong binge xiaoxiong
+export function getHomePageWhole(params) {
+  return request({
+    url: '/system/homePage/homePageWhole',
+    method: 'get',
+    params: params
+  })
+}
+//首页-明细（能力对比） shudong binge xiaoxiong
+export function getHomePageDetail(data) {
+  return request({
+    url: '/system/homePage/homePageDetail',
+    method: 'post',
+    data: data
+  })
+}
+
+//根据角色标识查询今日上岗用户列表
+export function selectUserListByRoleKey(data) {
+  return request({
+    url: '/attendance/postRecord/selectUserListByRoleKey',
+    method: 'post',
+    data: data
+  })
+}
+
+//首页报表-整体
+export function getHomeReportWhole(params) {
+  return request({
+    url: '/system/homeReport/homeReportWhole',
+    method: 'get',
+    params: params
+  })
+}

src/components/custom-tabbar.vue

@@ -14,7 +14,7 @@ export default {
     return {
       list: [
         {
-          pagePath: "pages/home/index",
+          pagePath: "pages/home-new/index",
           iconPath: "/static/images/tabbar/home.png",
           selectedIconPath: "/static/images/tabbar/home_.png",
           text: "首页"

src/components/select-tag/select-tag.vue

@@ -0,0 +1,81 @@
+<template>
+    <div class="time-tag-container">
+        <div class="custom-tag-container">
+            <div v-for="tag in tags" :key="tag.value" class="custom-tag"
+                :class="{ 'active': selectedValue === tag.value }" @click="handleTagClick(tag)">
+                <span class="tag-text">{{ tag.label }}</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'SelectTag',
+    props: {
+        tags: {
+            type: Array,
+            default: () => []
+        },
+        selectedValue: {
+            type: String,
+            default: ''
+        }
+    },
+    methods: {
+        handleTagClick(tag) {
+            if (tag.value === 'custom') {
+                // 触发自定义时间选择器显示事件
+                this.$emit('show-custom-picker', tag.value);
+            } else {
+                // 触发普通时间范围变化事件
+                this.$emit('change', tag.value);
+            }
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.time-tag-container {
+    display: flex;
+    justify-content: flex-start;
+    margin-top: 30rpx;
+}
+
+.custom-tag-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 5rpx;
+    align-items: center;
+}
+
+.custom-tag {
+    display: flex;
+    align-items: center;
+    padding: 7rpx 15rpx;
+
+    color: #FFFFFF;
+
+    border-radius: 20rpx;
+    font-size: 24rpx;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.custom-tag.active {
+    background: rgba(255, 255, 255, 0.2);
+    color: #FFFFFF;
+    font-weight: bold;
+    background: rgba(255, 255, 255, 0.2);
+}
+
+// .custom-tag:hover {
+//     background: rgba(255, 255, 255, 0.4);
+//     border-color: rgba(255, 255, 255, 0.6);
+// }
+
+.tag-text {
+    // margin-right: 8rpx;
+}
+</style>

src/pages.json

@@ -26,6 +26,13 @@
       }
     },
     {
+      "path": "pages/home-new/index",
+      "style": {
+        "navigationBarTitleText": "安检分级质控系统移动端",
+        "navigationStyle": "custom"
+      }
+    },
+    {
       "path": "pages/work/index",
       "style": {
         "navigationBarTitleText": "工作台"
@@ -146,6 +153,12 @@
       }
     },
     {
+      "path": "pages/home-new/index",
+      "style": {
+        "navigationBarTitleText": "首页"
+      }
+    },
+    {
       "path": "pages/personal-center/index",
       "style": {
         "navigationBarTitleText": "个人中心"
@@ -217,7 +230,7 @@
         "navigationBarTitleText": "公告详情"
       }
     },
-       {
+    {
       "path": "pages/announcement/noticeDetail",
       "style": {
         "navigationBarTitleText": "通知详情"
@@ -294,7 +307,7 @@
     "marginBottom": "0px",
     "list": [
       {
-        "pagePath": "pages/home/index",
+        "pagePath": "pages/home-new/index",
         "iconPath": "static/images/tabbar/home.png",
         "selectedIconPath": "static/images/tabbar/home_.png",
         "text": "首页"

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

@@ -0,0 +1,157 @@
+<template>
+  <div class="tips" @click="navigateToDetail(currentNotice)">
+    <img alt="" src="@/static/images/notice.png">
+    <div class="notice-container">
+      <transition name="slide-up-down" mode="out-in">
+        <div :key="currentNotice && currentNotice.noticeId" class="notice-content">
+          {{ currentNotice && currentNotice.noticeTitle ? currentNotice.noticeTitle : '暂无通知' }}
+        </div>
+      </transition>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getNoticeList } from "@/api/announcement/announcement.js";
+
+export default {
+  name: 'Notice',
+  data() {
+    return {
+      noticeList: [],
+      currentIndex: 0,
+      currentNotice: null,
+      timer: null
+    };
+  },
+  mounted() {
+    // 组件首次加载时获取数据
+    // this.fetchNoticeData();
+  },
+  destroyed() {
+    // 清理定时器
+    if (this.timer) {
+      clearInterval(this.timer);
+    }
+  },
+  methods: {
+    // 提供给父组件调用的刷新方法
+    refreshData() {
+      this.fetchNoticeData();
+    },
+
+    // 获取公告数据
+    async fetchNoticeData() {
+
+      try {
+        const response = await getNoticeList({
+          status: '0',
+          noticeType: 1,
+          pageSize: 999
+        });
+
+        // 假设response.data包含公告列表
+        this.noticeList = response.rows || [];
+        if (this.noticeList.length > 0) {
+          this.currentNotice = this.noticeList[0];
+          if (this.timer) {
+            clearInterval(this.timer);
+          }
+          // 数据加载完成后启动轮播
+          this.startCarousel();
+        }
+      } catch (error) {
+        console.error('获取公告数据失败:', error);
+      }
+    },
+
+    // 开始轮播
+    startCarousel() {
+      if (this.noticeList.length <= 1) return;
+
+      this.timer = setInterval(() => {
+        this.currentIndex = (this.currentIndex + 1) % this.noticeList.length;
+        this.currentNotice = this.noticeList[this.currentIndex];
+      }, 3000); // 5秒轮播一次
+    },
+
+    // 跳转到详情页
+    navigateToDetail(notice) {
+      if (!notice || !notice.noticeId) return;
+
+      uni.navigateTo({
+        url: '/pages/announcement/noticeDetail?id=' + notice.noticeId
+      });
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.tips {
+  display: flex;
+  align-items: center;
+  padding: 16rpx 28rpx;
+  background: #FFF4F4;
+  border-radius: 32rpx;
+  font-size: 24rpx;
+  color: #222222;
+  line-height: 28rpx;
+  margin-bottom: 32rpx;
+  cursor: pointer; // 鼠标指针变为手型
+  transition: all 0.3s ease; // 添加过渡效果
+  overflow: hidden;
+
+  img {
+    width: 66rpx;
+    padding-right: 28rpx;
+    border-right: 1px solid rgba(0, 0, 0, 0.1);
+    margin-right: 28rpx;
+    flex-shrink: 0;
+  }
+
+  .notice-container {
+    flex: 1;
+    overflow: hidden;
+    height: 28rpx;
+    position: relative;
+  }
+
+  .notice-content {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  // 上下滚动动画
+  .slide-up-down-enter-active,
+  .slide-up-down-leave-active {
+    transition: all 0.5s ease;
+  }
+
+  .slide-up-down-enter-from {
+    transform: translateY(30rpx);
+    opacity: 0;
+  }
+
+  .slide-up-down-leave-to {
+    transform: translateY(-30rpx);
+    opacity: 0;
+  }
+
+  // 鼠标悬停效果
+  &:hover {
+    background: #FFE8E8; // 背景色变深
+    transform: scale(1.01); // 轻微放大
+  }
+
+  // 点击效果
+  &:active {
+    transform: scale(0.99); // 轻微缩小
+  }
+}
+</style>

src/pages/home-new/components/total-detail.vue

@@ -0,0 +1,596 @@
+<template>
+    <div class="total-detail-container">
+        <!-- 标题和链接区域 -->
+        <div class="item-header">
+            <div class="title-section">
+                <div class="item-title">整体</div>
+                <div class="item-link report-link"
+                    @click="handleReportLinkClick">整体报表</div>
+            </div>
+            <div class="item-links">
+                <div class="item-link"
+                    v-if="!role.includes('SecurityCheck') && !(role.includes('banzuzhang') && selectedRole == 'individual')"
+                    @click="handleLinkClick('/pages/capabilityComparison/index')">能力对比</div>
+            </div>
+        </div>
+
+        <!-- 雷达图区域 -->
+        <div class="chart-section">
+            <div class="chart-container">
+                <div id="radar-chart" class="radar-chart"></div>
+            </div>
+
+        </div>
+
+        <!-- 数据展示区域 -->
+        <div class="data-section">
+            <div v-for="(item, index) in dataItems" :key="index" class="data-item">
+                <div class="item-title">{{ item.title }}</div>
+                <div class="data-content-section">
+                    <div class="data-content" v-for="ele in item.list">
+                        <div class="data-value">{{ ele.value }}</div>
+                        <div class="data-label">{{ ele.label }}</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+
+
+export default {
+    name: 'TotalDetail',
+    data() {
+        return {
+            chart: null,
+
+
+            dataItems: []
+        }
+    },
+    props: {
+        homePageWholeData: {
+            type: Array,
+            default: () => []
+        },
+        startDate: {
+            type: String,
+            default: ''
+        },
+        endDate: {
+            type: String,
+            default: ''
+        },
+        timeRange: {
+            type: String,
+            default: 'year'
+        },
+        selectedRole: {
+            type: String,
+            default: ''
+        }
+    },
+    watch: {
+        homePageWholeData: {
+            handler(newValue) {
+                this.updateData(newValue);
+            },
+            deep: true,
+            immediated: true,
+        }
+    },
+    computed: {
+        role() {
+            return this.$store?.state?.user?.roles
+        },
+        currentUser() {
+            return this.$store.state.user;
+        }
+    },
+    mounted() {
+        // this.initChart();
+
+    },
+
+    beforeDestroy() {
+        if (this.chart) {
+            this.chart.dispose();
+        }
+    },
+    methods: {
+        updateData(newValue) {
+            console.log(newValue, "newValue")
+            this.dataItems = newValue.map(item => {
+                return {
+                    title: item.name + "数据明细",
+                    list: [
+                        { label: '人均查获数量', value: item.seizureCount || 0 },
+                        { label: '人均在岗时长', value: item.workingHours || 0 },
+                        { label: '巡检合格率', value: `${((item.checkPassRate * 100) || 0).toFixed(2)}%` },
+                        { label: '抽问抽答正确率', value: `${((item.answersAccuracy * 100) || 0).toFixed(2)}%` },
+                        { label: '培训答题平均分', value: item.learningGrowthScore || 0 }
+                    ]
+                }
+            })
+
+            // 同时更新雷达图数据
+            this.updateChartWithData();
+        },
+        handleLinkClick(link) {
+            if (link) {
+                const roles = this.currentUser.roles;
+                const userInfo = this.currentUser.userInfo;
+
+                let obj = {};
+                if (roles.includes('SecurityCheck')) {
+                    obj = {
+                        id: userInfo.userId,
+                        name: userInfo.nickName,
+                        type: 'USER'
+                    }
+                }
+                if (roles.includes('banzuzhang')) {
+                    obj = {
+                        id: userInfo.teamsId,
+                        name: userInfo.teamsName,
+                        type: 'DEPT'
+                    }
+                }
+                if (roles.includes('kezhang')) {
+                    obj = {
+                        id: userInfo.departmentId,
+                        name: userInfo.departmentName,
+                        type: 'DEPT'
+                    }
+                }
+                if (roles.includes('test') || roles.includes('zhijianke')) {
+                    obj = {
+                        id: userInfo.stationId,
+                        name: userInfo.stationName,
+                        type: 'DEPT'
+                    }
+                }
+
+                // 添加时间参数
+                const timeParams = {
+                    startDate: this.startDate,
+                    endDate: this.endDate,
+                    timeRange: this.timeRange
+                };
+
+                // 合并所有参数
+                const allParams = {
+                    ...obj,
+                    ...timeParams
+                };
+
+                // 构建带参数的URL
+                let finalUrl = link;
+                if (Object.keys(allParams).length > 0) {
+                    // 检查URL是否已有参数
+                    const separator = link.includes('?') ? '&' : '?';
+                    const queryString = Object.keys(allParams)
+                        .filter(key => allParams[key]) // 过滤掉空值
+                        .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(allParams[key])}`)
+                        .join('&');
+
+                    if (queryString) {
+                        finalUrl = `${link}${separator}${queryString}`;
+                    }
+                }
+
+                uni.navigateTo({
+                    url: finalUrl
+                });
+            }
+        },
+
+
+
+
+        updateChartWithData() {
+            const chartDom = document.getElementById('radar-chart');
+            if (!chartDom) {
+                console.warn('雷达图容器未找到');
+                return;
+            }
+
+            this.chart = echarts.init(chartDom);
+            // 根据接口数据更新雷达图
+            if (this.chart && this.homePageWholeData && this.homePageWholeData.length > 0) {
+                // 使用Graph后缀的数据来显示雷达图
+                const seriesData = this.homePageWholeData.map(item => ({
+                    name: item.name,
+                    value: [
+                        item.seizureCountGraph || 0,
+                        item.workingHoursGraph || 0,
+                        item.checkPassRateGraph || 0,
+                        item.answersAccuracyGraph || 0,
+                        item.learningGrowthScoreGraph || 0
+                    ]
+                }));
+
+                // 计算每个指标的最大值，用于雷达图的max值
+                const indicators = [
+                    { name: '查获能力', max: Math.max(...seriesData.map(d => d.value[0])) },
+                    { name: '在岗时长', max: Math.max(...seriesData.map(d => d.value[1])) },
+                    { name: '巡检合格率', max: Math.max(...seriesData.map(d => d.value[2])) },
+                    { name: '抽问抽答', max: Math.max(...seriesData.map(d => d.value[3])) },
+                    { name: '培训答题', max: Math.max(...seriesData.map(d => d.value[4])) }
+                ];
+
+                const option = {
+                    legend: {
+                        type: 'scroll',
+                        orient: 'horizontal',
+                        bottom: 10,
+                        textStyle: {
+                            fontSize: 12,
+                            color: '#666'
+                        },
+                        itemWidth: 12,
+                        itemHeight: 12,
+                        data: seriesData.map(item => item.name)
+                    },
+                    radar: {
+                        shape: 'circle',
+                        indicator: indicators,
+                        splitNumber: 4,
+                        center: ['50%', '45%'],
+                        radius: '55%',
+                        axisName: {
+                            color: '#666',
+                            fontSize: 12
+                        },
+                        splitLine: {
+                            lineStyle: {
+                                color: ['#E6E6E6', '#E6E6E6', '#E6E6E6', '#E6E6E6']
+                            }
+                        },
+                        splitArea: {
+                            show: true,
+                            areaStyle: {
+                                color: ['#F8F8F8', '#FFFFFF']
+                            }
+                        },
+                        axisLine: {
+                            lineStyle: {
+                                color: '#E6E6E6'
+                            }
+                        }
+                    },
+                    series: [
+                        {
+                            name: '能力对比',
+                            type: 'radar',
+                            data: seriesData.map((item, index) => ({
+                                value: item.value,
+                                name: item.name,
+                                areaStyle: {
+                                    color: this.getChartColor(index, 0.3)
+                                },
+                                lineStyle: {
+                                    color: this.getChartColor(index),
+                                    width: 2
+                                },
+                                itemStyle: {
+                                    color: this.getChartColor(index)
+                                }
+                            }))
+                        }
+                    ],
+                    // 添加点击事件
+                    tooltip: {
+                        show: false
+                    },
+
+                };
+
+                this.chart.setOption(option);
+
+
+
+                // 响应式调整
+                window.addEventListener('resize', () => {
+                    this.chart.resize();
+                });
+            }
+        },
+
+        // 获取图表颜色
+        getChartColor(index, opacity = 1) {
+            const colors = ['#8FA5EC', '#FF9F7F', '#6ECEB2', '#FFD700', '#BA55D3'];
+            const color = colors[index % colors.length];
+            if (opacity < 1) {
+                // 转换为RGBA格式
+                const r = parseInt(color.slice(1, 3), 16);
+                const g = parseInt(color.slice(3, 5), 16);
+                const b = parseInt(color.slice(5, 7), 16);
+                return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+            }
+            return color;
+        },
+
+        // 处理雷达图点击事件
+        handleRadarChartClick(params) {
+            if (params.componentType === 'series' && params.seriesType === 'radar') {
+                const clickedData = params.data;
+                const seriesIndex = params.seriesIndex;
+                const dataIndex = params.dataIndex;
+
+                // 获取对应的数据项
+                const dataItem = this.homePageWholeData[dataIndex];
+
+                if (dataItem) {
+                    // 显示详细数据弹窗
+                    this.showRadarDataDetail(dataItem);
+                }
+            }
+        },
+
+        // 显示雷达图数据详情
+        showRadarDataDetail(dataItem) {
+            const labels = ['查获数量', '在岗时长', '巡检合格率', '抽问抽答', '培训答题'];
+            const values = [
+                dataItem.seizureCount || 0,
+                dataItem.workingHours || 0,
+                dataItem.checkPassRate || 0,
+                dataItem.answersAccuracy || 0,
+                dataItem.learningGrowthScore || 0
+            ];
+
+            let detailHtml = `<div style="font-size: 16px; font-weight: bold; margin-bottom: 12px; text-align: center;">${dataItem.name} - 详细数据</div>`;
+
+            labels.forEach((label, index) => {
+                detailHtml += `<div style="display: flex; justify-content: space-between; margin: 8px 0; padding: 4px 0; border-bottom: 1px solid #f0f0f0;">
+                    <span style="color: #666;">${label}:</span>
+                    <span style="font-weight: bold; color: #1890ff;">${values[index]}</span>
+                </div>`;
+            });
+
+            uni.showModal({
+                title: '详细数据',
+                content: detailHtml,
+                showCancel: false,
+                confirmText: '关闭',
+                confirmColor: '#1890ff'
+            });
+        },
+
+        // 处理整体报表链接点击
+        handleReportLinkClick() {
+            // 根据时间范围自动计算开始和结束时间
+            const { startDate, endDate } = this.calculateDateRange(this.timeRange);
+            
+            // 构建跳转参数
+            const params = {
+                startDate: startDate,
+                endDate: endDate,
+            };
+
+            // 过滤掉空值
+            const queryParams = Object.keys(params)
+                .filter(key => params[key] && params[key] !== '')
+                .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`)
+                .join('&');
+
+            // 构建跳转URL
+            const url = queryParams ? 
+                `/pages/statisticalReport/index?${queryParams}` : 
+                '/pages/statisticalReport/index';
+
+            uni.navigateTo({
+                url: url
+            });
+        },
+
+        // 根据时间范围计算开始和结束时间
+        calculateDateRange(timeRange) {
+            const today = new Date();
+            const yesterday = new Date(today);
+            yesterday.setDate(today.getDate() - 1);
+
+            let startDate = new Date(yesterday);
+            let endDate = new Date(yesterday);
+
+            switch (timeRange) {
+                case 'week':
+                    // 近一周：从7天前到昨天
+                    startDate.setDate(yesterday.getDate() - 6);
+                    break;
+                case 'month':
+                    // 近一月：从30天前到昨天
+                    startDate.setDate(yesterday.getDate() - 29);
+                    break;
+                case 'quarter':
+                    // 近三月：从90天前到昨天
+                    startDate.setDate(yesterday.getDate() - 89);
+                    break;
+                case 'halfYear':
+                    // 近半年：从180天前到昨天
+                    startDate.setDate(yesterday.getDate() - 179);
+                    break;
+                case 'year':
+                    // 近一年：从365天前到昨天
+                    startDate.setDate(yesterday.getDate() - 364);
+                    break;
+                case 'custom':
+                    // 自定义时间：使用用户选择的日期
+                    if (this.startDate && this.endDate) {
+                        startDate = new Date(this.startDate);
+                        endDate = new Date(this.endDate);
+                    }
+                    break;
+                default:
+                    // 默认近一年
+                    startDate.setDate(yesterday.getDate() - 364);
+            }
+
+            return {
+                startDate: this.formatDateForInput(startDate),
+                endDate: this.formatDateForInput(endDate)
+            };
+        },
+
+        // 格式化日期为输入框格式
+        formatDateForInput(date) {
+            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 lang="scss" scoped>
+.total-detail-container {
+    background: #FFFFFF;
+    border-radius: 20rpx;
+    padding: 30rpx;
+    margin-bottom: 30rpx;
+    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
+}
+
+.item-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 25rpx;
+}
+
+.title-section {
+    display: flex;
+    align-items: center;
+    gap: 20rpx;
+}
+
+.item-title {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #333333;
+    margin-bottom: 0;
+}
+
+.item-link {
+    font-size: 26rpx;
+    color: #1890FF;
+    cursor: pointer;
+}
+
+.report-link {
+    margin-left: 0;
+}
+
+.chart-section {
+    margin-bottom: 30rpx;
+}
+
+.chart-container {
+    width: 100%;
+    height: 600rpx;
+    margin-bottom: 20rpx;
+}
+
+.radar-chart {
+    width: 100%;
+    height: 100%;
+}
+
+.chart-legend {
+    display: flex;
+    justify-content: center;
+    gap: 40rpx;
+}
+
+.legend-item {
+    display: flex;
+    align-items: center;
+    gap: 10rpx;
+}
+
+.legend-color {
+    width: 20rpx;
+    height: 20rpx;
+    border-radius: 4rpx;
+}
+
+.legend-text {
+    font-size: 24rpx;
+    color: #666;
+}
+
+.data-section {}
+
+.data-item {
+    background: #EFF2FE;
+    border-radius: 15rpx;
+    padding: 20rpx;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    margin-bottom: 30rpx;
+}
+
+.data-content-section {
+    display: flex;
+}
+
+.data-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.data-value {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #333333;
+    margin-bottom: 8rpx;
+}
+
+.data-label {
+    font-size: 24rpx;
+    color: #666;
+}
+
+.rank-section {
+    margin-top: 30rpx;
+}
+
+.rank-item {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10rpx;
+
+
+
+}
+
+.rank-label {
+    width: 80rpx;
+    font-size: 26rpx;
+    color: #333;
+    font-weight: 500;
+}
+
+.rank-progress {
+    flex: 1;
+    margin: 0 20rpx;
+}
+
+.rank-info {
+    width: 100rpx;
+    text-align: right;
+    font-size: 26rpx;
+    color: #666;
+}
+</style>

src/pages/home-new/components/type-detail.vue

@@ -0,0 +1,515 @@
+<template>
+    <div class="type-detail-container">
+        <div v-for="(item, index) in dataList" :key="index" class="type-item">
+            <!-- 标题和链接区域 -->
+            <div class="item-header">
+                <div class="item-title">{{ item.title }}</div>
+                <div class="item-link" @click="handleLinkClick(item.link)">{{ item.linkText }}</div>
+            </div>
+
+            <!-- 主要内容区域 -->
+            <div class="item-content">
+                <!-- 数量统计区域 -->
+                <div class="stat-section">
+                    <div class="stat-header">
+                        <div class="stat-title">{{ item.statTitle }}</div>
+                        <div class="stat-trend" v-if="!role.includes('test') && !role.includes('zhijianke')">
+                            绿色为高于平均值，红色为低于平均值
+                        </div>
+                    </div>
+
+
+                    <div class="data-grid">
+                        <div v-for="(dataItem, dataIndex) in item.dataItems" :key="dataIndex" class="data-item">
+
+                            <div class="data-value">
+                                <image v-if="dataItem.isImage" :src="dataItem.value" class="data-image" />
+                                <span v-else :style="{ color: dataItem.color || '#333333' }">{{ dataItem.value }}</span>
+                            </div>
+                            <div class="data-label">{{ dataItem.label }}</div>
+
+                            <div v-if="dataIndex == item.dividerIndex" class="divider"></div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- 巡检部分的问题整改区域 -->
+                <div v-if="item.title === '巡检'" class="problem-rect-section">
+                    <div class="problem-title">问题整改</div>
+                    <div class="problem-grid">
+                        <!-- 左边：已办结问题 -->
+                        <div class="problem-item left-item">
+
+                            <div class="problem-value">{{ item.completed }}</div>
+                            <div class="problem-label">{{ '已办结' }}</div>
+                        </div>
+                        <!-- 右边：待办结问题 -->
+                        <div class="problem-item right-item">
+                            <div class="problem-value">{{ item.pending }}</div>
+                            <div class="problem-label">{{ '办理中' }}</div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- 排名区域 -->
+                <div class="rank-section" v-if="item.rankList.length > 0">
+                    <div v-for="(rank, i) in item.rankList" :key="i" class="rank-item">
+                        <div class="rank-label">{{ rank.label }}</div>
+                        <div class="rank-progress">
+                            <h-rank-line :percentage="Number(rank.percentage)" endType="round" :height="10"
+                                :color="rank.type == 'station' ? ['#F9CA91', '#ED9E3E'] : ['#87BFFC', '#5580F7']">
+                                <div class="rank-info"><span
+                                        :style="{ color: rank.type == 'station' ? '#ED9E3E' : '#5580F7' }">{{
+                                            rank.current
+                                        }}</span>/{{ rank.total }}</div>
+                            </h-rank-line>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- test角色特殊显示：主管合格率排行和班组合格率排行 -->
+                <div class="rank-section" v-if="role && (role.includes('test') || role.includes('zhijianke'))">
+                    <!-- 大队合格率排行 -->
+                    <div class="rank-title">{{ item.title === '查获上报' ? '大队查获总数排名' : item.title == '抽问抽答' ? '大队正确率排名' :
+                        '大队合格率排名' }}
+                    </div>
+                    <div v-for="(dept, i) in (item.brigadeRank || [])" :key="'dept-' + i" class="rank-item">
+                        <div class="rank-label">{{ dept.name }}</div>
+                        <div class="rank-progress">
+                            <h-rank-line
+                                :percentage="item.title !== '查获上报' ? Number(dept.passRate || 0) : getPercentage(dept.passRate, item.departmentRank)"
+                                endType="round" :height="10" :color="['#F9CA91', '#ED9E3E']">
+                                <div class="rank-info"><span style="color: #999999">{{ dept.passRate || 0 }}</span>
+                                </div>
+                            </h-rank-line>
+                        </div>
+                    </div>
+                    <!-- 主管合格率排行 -->
+                    <div class="rank-header">
+                        <div class="rank-title">{{ item.title === '查获上报' ? '主管查获总数排名' : item.title == '抽问抽答' ? '主管正确率排名'
+                            :
+                            '主管合格率排名' }}</div>
+                        <div class="sort-buttons">
+                            <div :class="['sort-btn', { 'active': item.deptSortType === 'asc' }]"
+                                @click="$emit('sort-change', item.title, 'dept', 'asc')">正序</div>
+                            <div :class="['sort-btn', { 'active': item.deptSortType === 'desc' }]"
+                                @click="$emit('sort-change', item.title, 'dept', 'desc')">倒序</div>
+                        </div>
+                    </div>
+
+                    <!-- 主管排名显示 -->
+                    <template v-if="item.deptSortType === 'asc'">
+                        <div v-for="(dept, i) in (item.departmentRank || []).slice(0, 5)" :key="'dept-asc-' + i"
+                            class="rank-item">
+                            <div class="rank-label">{{ dept.name }}</div>
+                            <div class="rank-progress">
+                                <h-rank-line
+                                    :percentage="item.title !== '查获上报' ? Number(dept.passRate || 0) : getPercentage(dept.passRate, item.departmentRank)"
+                                    endType="round" :height="10" :color="['#F9CA91', '#ED9E3E']">
+                                    <div class="rank-info"><span style="color: #999999">{{ dept.passRate || 0 }}</span>
+                                    </div>
+                                </h-rank-line>
+                            </div>
+                        </div>
+                    </template>
+                    <template v-else>
+                        <div v-for="(dept, i) in (item.bottomDepartmentRank || []).slice(0, 5)" :key="'dept-desc-' + i"
+                            class="rank-item">
+                            <div class="rank-label">{{ dept.name }}</div>
+                            <div class="rank-progress">
+                                <h-rank-line
+                                    :percentage="item.title !== '查获上报' ? Number(dept.passRate || 0) : getPercentage(dept.passRate, item.bottomDepartmentRank)"
+                                    endType="round" :height="10" :color="['#F9CA91', '#ED9E3E']">
+                                    <div class="rank-info"><span style="color: #999999">{{ dept.passRate || 0 }}</span>
+                                    </div>
+                                </h-rank-line>
+                            </div>
+                        </div>
+                    </template>
+
+                    <!-- 班组合格率排行 -->
+                    <div class="rank-header">
+                        <div class="rank-title">{{ item.title ===
+                            '查获上报' ? '班组查获总数排名' : item.title == '抽问抽答' ? '班组正确率排名' : '班组合格率排名' }}</div>
+                        <div class="sort-buttons">
+                            <div :class="['sort-btn', { 'active': item.teamSortType === 'asc' }]"
+                                @click="$emit('sort-change', item.title, 'team', 'asc')">正序</div>
+                            <div :class="['sort-btn', { 'active': item.teamSortType === 'desc' }]"
+                                @click="$emit('sort-change', item.title, 'team', 'desc')">倒序</div>
+                        </div>
+                    </div>
+
+                    <!-- 班组排名显示 -->
+                    <template v-if="item.teamSortType === 'asc'">
+                        <div v-for="(team, i) in (item.teamRank || []).slice(0, 5)" :key="'team-asc-' + i"
+                            class="rank-item">
+                            <div class="rank-label">{{ team.name }}</div>
+                            <div class="rank-progress">
+                                <h-rank-line
+                                    :percentage="item.title !== '查获上报' ? Number(team.passRate || 0) : getPercentage(team.passRate, item.teamRank)"
+                                    endType="round" :height="10" :color="['#87BFFC', '#5580F7']">
+                                    <div class="rank-info"><span style="color: #999999">{{ team.passRate || 0 }}</span>
+                                    </div>
+                                </h-rank-line>
+                            </div>
+                        </div>
+                    </template>
+                    <template v-else>
+                        <div v-for="(team, i) in (item.bottomTeamRank || []).slice(0, 5)" :key="'team-desc-' + i"
+                            class="rank-item">
+                            <div class="rank-label">{{ team.name }}</div>
+                            <div class="rank-progress">
+                                <h-rank-line
+                                    :percentage="item.title !== '查获上报' ? Number(team.passRate || 0) : getPercentage(team.passRate, item.bottomTeamRank)"
+                                    endType="round" :height="10" :color="['#87BFFC', '#5580F7']">
+                                    <div class="rank-info"><span style="color: #999999">{{ team.passRate || 0 }}</span>
+                                    </div>
+                                </h-rank-line>
+                            </div>
+                        </div>
+                    </template>
+                </div>
+
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import HRankLine from "@/components/h-rank-line/h-rank-line.vue";
+
+export default {
+    name: 'TypeDetail',
+    components: {
+        HRankLine
+    },
+    props: {
+        dataList: {
+            type: Array,
+            default: () => []
+        }
+    },
+    emits: ['sort-change'],
+    computed: {
+        role() {
+            return this.$store?.state?.user?.roles
+        }
+    },
+    watch: {
+        dataList: {
+            handler(newValue, oldValue) {
+                console.log('dataList', newValue)
+            }
+        }
+    },
+    methods: {
+        handleLinkClick(link) {
+            if (link) {
+                // 检查是否是tabBar页面
+                const tabBarPages = [
+                    '/pages/home-new/index',
+                    '/pages/myToDoList/index',
+                    '/pages/work/index',
+                    '/pages/mine/index'
+                ];
+
+
+                if (tabBarPages.includes(link)) {
+                    uni.switchTab({
+                        url: link
+                    });
+                } else {
+                    uni.navigateTo({
+                        url: link
+                    });
+                }
+            }
+        },
+
+        // 计算百分比：使用数组中的最大值作为分母
+        getPercentage(value, array) {
+            if (!array || !Array.isArray(array) || array.length === 0) {
+                return 0;
+            }
+
+            // 找到数组中的最大值
+            const maxValue = Math.max(...array.map(item => Number(item.passRate) || 0));
+
+            // 如果最大值为0，则返回0避免除以0
+            if (maxValue === 0) {
+                return 0;
+            }
+
+            // 计算百分比
+            const percentage = (Number(value) || 0) / maxValue * 100;
+
+            // 确保百分比在0-100之间
+            return Math.min(Math.max(percentage, 0), 100);
+        },
+
+
+
+
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.type-detail-container {
+    margin-top: 30rpx;
+}
+
+.type-item {
+    background: #FFFFFF;
+    border-radius: 20rpx;
+    padding: 30rpx;
+    margin-bottom: 30rpx;
+    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
+}
+
+.item-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 25rpx;
+}
+
+.item-title {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #333333;
+}
+
+.item-link {
+    font-size: 26rpx;
+    color: #1890FF;
+    cursor: pointer;
+}
+
+.item-content {
+    .stat-section {
+        background: #EFF2FE;
+        border-radius: 15rpx;
+        padding: 15rpx;
+    }
+
+    .stat-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 20rpx;
+    }
+
+    .stat-title {
+        font-size: 28rpx;
+        color: #3D3D3D;
+        font-weight: bold;
+        font-weight: 600;
+    }
+
+    .stat-trend {
+        font-size: 24rpx;
+        padding: 6rpx 12rpx;
+        border-radius: 8rpx;
+        color: #999999;
+    }
+
+    .trend-up {
+        color: #52C41A;
+        background: rgba(82, 196, 26, 0.1);
+    }
+
+    .trend-down {
+        color: #FF4D4F;
+        background: rgba(255, 77, 79, 0.1);
+    }
+
+    .data-grid {
+        display: flex;
+        justify-content: space-evenly;
+    }
+
+    .data-item {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+        position: relative;
+
+    }
+
+    .data-value {
+        font-size: 34rpx;
+        font-weight: bold;
+        color: #333333;
+        margin-bottom: 8rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-height: 50rpx;
+    }
+
+    .data-image {
+        width: 40rpx;
+        height: 40rpx;
+        border-radius: 8rpx;
+    }
+
+    .data-label {
+        font-size: 24rpx;
+        color: #999999;
+    }
+
+    .divider {
+        position: absolute;
+        right: -4%;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 1rpx;
+        height: 60%;
+        background: rgba(0, 0, 0, 0.1);
+    }
+
+    /* 问题整改区域样式 */
+    .problem-rect-section {
+        margin-top: 25rpx;
+    }
+
+    .problem-title {
+        font-size: 28rpx;
+        color: #3D3D3D;
+        font-weight: bold;
+        margin-bottom: 20rpx;
+    }
+
+    .problem-grid {
+        display: flex;
+        gap: 20rpx;
+    }
+
+    .problem-item {
+        flex: 1;
+        border-radius: 15rpx;
+        padding: 25rpx;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        text-align: center;
+    }
+
+    .left-item {
+        background: #EFFFF5;
+    }
+
+    .right-item {
+        background: #FFF6F6;
+    }
+
+    .problem-value {
+        font-size: 36rpx;
+        font-weight: bold;
+        margin-bottom: 8rpx;
+        min-height: 50rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .left-item .problem-value {
+        color: #00AE41;
+    }
+
+    .right-item .problem-value {
+        color: #F96060;
+    }
+
+    .problem-label {
+        font-size: 24rpx;
+        color: #999999;
+    }
+
+    /* 排名区域样式 */
+    .rank-section {
+        margin-top: 25rpx;
+    }
+
+    .rank-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 15rpx;
+        margin-top: 20rpx;
+    }
+
+    .rank-title {
+        font-size: 28rpx;
+        color: #3D3D3D;
+        font-weight: bold;
+    }
+
+    .sort-buttons {
+        display: flex;
+
+        div:nth-child(1) {
+
+            border-radius: 10rpx 0 0 10rpx;
+        }
+
+        div:nth-child(2) {
+
+            border-radius: 0 10rpx 10rpx 0;
+        }
+    }
+
+    .sort-btn {
+        padding: 4rpx 20rpx;
+        border: 2rpx solid #1890FF;
+
+        background: #FFFFFF;
+        color: #1890FF;
+        font-size: 24rpx;
+        cursor: pointer;
+        transition: all 0.3s ease;
+    }
+
+    .sort-btn.active {
+        background: #1890FF;
+        color: #FFFFFF;
+    }
+
+    // .sort-btn:not(.active):hover {
+    //     background: #F0F8FF;
+    // }
+
+    .rank-item {
+        display: flex;
+        align-items: center;
+        margin-bottom: 10rpx;
+    }
+
+    .rank-label {
+        width: 120rpx;
+        font-size: 26rpx;
+        color: #333;
+        font-weight: 500;
+    }
+
+    .rank-progress {
+        flex: 1;
+        margin: 0 20rpx;
+    }
+
+    .rank-info {
+        width: 100rpx;
+        text-align: right;
+        font-size: 26rpx;
+        color: #666;
+
+        span {
+            font-size: 29rpx;
+            font-weight: bold;
+        }
+    }
+}
+</style>

src/pages/login.vue

@@ -78,7 +78,7 @@ export default {
   onLoad() {
     //#ifdef H5
     if (getToken()) {
-      this.$tab.reLaunch('/pages/home/index')
+      this.$tab.reLaunch('/pages/home-new/index')
     }
     this.getStorage()
     //#endif
@@ -164,7 +164,7 @@ export default {
       this.$store.dispatch('GetInfo').then(res => {
         // 登录成功后调用showMessageTabRedDot更新消息tab红点状态
         showMessageTabRedDot()
-        this.$tab.reLaunch('/pages/home/index')
+        this.$tab.reLaunch('/pages/home-new/index')
       })
     }
   }

src/pages/mine/setting/index.vue

@@ -50,7 +50,7 @@
       handleLogout() {
         this.$modal.confirm('确定注销并退出系统吗？').then(() => {
           this.$store.dispatch('LogOut').then(() => {}).finally(()=>{
-            this.$tab.reLaunch('/pages/home/index')
+            this.$tab.reLaunch('/pages/home-new/index')
           })
         })
       }