Merge branch 'new-homePage' into dev

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

@@ -0,0 +1,133 @@
+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
+  })
+}
+
+//绩效指标列表
+export function getMetrics(data) {
+  return request({
+    url: '/item/performance/metrics',
+    method: 'post',
+    data: data
+  })
+}
+
+//质控活动-问题分布统计
+export function getCheckProblemDistribution(query) {
+  return request({
+    url: '/system/analysisReport/checkProblemDistribution',
+    method: 'get',
+    params: query
+  })
+}
+
+//培训测试正确率分析
+export function getAccuracyAnalysis(query) {
+  return request({
+    url: '/exam/quiz/accuracy-analysis',
+    method: 'get',
+    params: query
+  })
+}
+//查询全站查获违禁品 TOP3
+export function getProhibitedTop3(query) {
+  return request({
+    url: '/item/performance/prohibited-top3',
+    method: 'get',
+    params: query
+  })
+}
+//查询隐匿重点部位 Top1
+export function getConcealmentPositionTop1(query) {
+  return request({
+    url: '/item/performance/concealment-position-top1',
+    method: 'get',
+    params: query
+  })
+}

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": "工作台"
@@ -38,6 +45,18 @@
       }
     },
     {
+      "path": "pages/capabilityComparison/index",
+      "style": {
+        "navigationBarTitleText": "能力对比"
+      }
+    },
+    {
+      "path": "pages/statisticalReport/index",
+      "style": {
+        "navigationBarTitleText": "整体报表"
+      }
+    },
+    {
       "path": "pages/mine/avatar/index",
       "style": {
         "navigationBarTitleText": "修改头像"
@@ -146,6 +165,12 @@
       }
     },
     {
+      "path": "pages/home-new/index",
+      "style": {
+        "navigationBarTitleText": "首页"
+      }
+    },
+    {
       "path": "pages/personal-center/index",
       "style": {
         "navigationBarTitleText": "个人中心"
@@ -217,7 +242,7 @@
         "navigationBarTitleText": "公告详情"
       }
     },
-       {
+    {
       "path": "pages/announcement/noticeDetail",
       "style": {
         "navigationBarTitleText": "通知详情"
@@ -294,7 +319,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/performanceAnalysis.vue

@@ -0,0 +1,158 @@
+<template>
+    <div class="performance-analysis-container">
+        <div class="section-title">绩效分析</div>
+
+        <div class="cards-container">
+            <div v-for="(item, index) in performanceData" :key="index" class="card-item">
+                <div class="card-header">
+                    <div class="card-title">{{ item.name }}数据明细</div>
+                    <image :src="getTrophyIcon(item.rank)" class="trophy-icon"></image>
+                </div>
+                <div class="card-content">
+                    <div class="data-item">
+                        <div class="data-value">{{ item.totalScore || '0.0' }}</div>
+                        <div class="data-label">总分</div>
+                    </div>
+                    <div class="divider"></div>
+                    <div class="data-item">
+                        <div class="data-value">{{ item.seizureEfficiency || '0.0' }}</div>
+                        <div class="data-label">查获效率</div>
+                    </div>
+                    <div class="data-item">
+                        <div class="data-value">{{ item.inspectionPassRate || '0.0' }}</div>
+                        <div class="data-label">巡检合格率</div>
+                    </div>
+                    <div class="data-item">
+                        <div class="data-value">{{ item.trainingScore || '0.0' }}</div>
+                        <div class="data-label">培训得分</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'PerformanceAnalysis',
+    data() {
+        return {
+            trophyImages: {
+                one: '/static/images/icon/one.png',
+                two: '/static/images/icon/two.png',
+                three: '/static/images/icon/three.png'
+            }
+        }
+    },
+    props: {
+        performanceData: {
+            type: Array,
+            default: () => []
+        }
+    },
+    watch: {
+        // performanceData: {
+        //     handler(newVal) {
+        //         console.log('绩效数据已更新:', newVal);
+                
+        //     },
+        //     immediate: true,
+        //     deep: true
+        // }
+    },
+    methods: {
+        getTrophyIcon(rank) {
+            switch(rank) {
+                case 1:
+                    return this.trophyImages.one;
+                case 2:
+                    return this.trophyImages.two;
+                case 3:
+                    return this.trophyImages.three;
+                default:
+                    return ''; // 没有奖杯图标
+            }
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.performance-analysis-container {
+    background: #FFFFFF;
+    border-radius: 20rpx;
+    padding: 30rpx;
+    margin-bottom: 70rpx;
+    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
+}
+
+.section-title {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #333333;
+    margin-bottom: 30rpx;
+}
+
+.cards-container {
+    display: flex;
+    flex-direction: column;
+    gap: 30rpx;
+}
+
+.card-item {
+    background: #EFF2FE;
+    border-radius: 30rpx;
+    padding: 20rpx;
+}
+
+
+
+.card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 30rpx;
+}
+
+.card-title {
+    font-size: 30rpx;
+    font-weight: bold;
+    color: #333333;
+}
+
+.trophy-icon {
+    width: 45rpx;
+    height: 45rpx;
+}
+
+.card-content {
+    display: flex;
+    align-items: center;
+    gap: 30rpx;
+}
+
+.data-item {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.data-value {
+    font-size: 36rpx;
+    font-weight: bold;
+    color: #333333;
+    margin-bottom: 8rpx;
+}
+
+.data-label {
+    font-size: 24rpx;
+    color: #666666;
+}
+
+.divider {
+    width: 2rpx;
+    height: 80rpx;
+    background: #CCD3EF;
+}
+</style>

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

@@ -0,0 +1,281 @@
+<template>
+    <div class="quality-control-container">
+        <div class="section-title">质控分析</div>
+
+        <div class="data-block">
+            <div class="block-title-row">
+                <div class="block-title">查获数据TOP3</div>
+            </div>
+            <div class="data-grid" v-if="prohibitedTop3 && prohibitedTop3.length > 0">
+                <div v-for="(item, index) in prohibitedTop3" :key="index" class="data-item">
+                    <div class="item-label">{{ item.categoryName }}总数</div>
+                    <div class="item-value">{{ item.quantity }}</div>
+                    <div class="item-ratio">占比<span class="ratio-highlight">{{ item.percentage }}%</span></div>
+                </div>
+            </div>
+            <div v-else class="no-data-text">暂无查获数据</div>
+            <div class="note-text" v-if="prohibitedTop3Desc">注：{{ prohibitedTop3Desc }}</div>
+        </div>
+
+        <div class="data-block">
+            <div class="block-title-row">
+                <div class="block-title">质控发现问题</div>
+                <div class="total-count">总数：<span class="count-highlight">{{ checkProblemDistributionTotal }}</span>
+                </div>
+            </div>
+            <div class="data-grid" v-if="checkProblemDistribution && checkProblemDistribution.length > 0">
+                <div v-for="(item, index) in checkProblemDistribution" :key="index" class="data-item">
+                    <div class="item-label">{{ item.name }}类总数</div>
+                    <div class="item-value">{{ item.total }}</div>
+                    <div class="item-ratio">占比<span class="ratio-highlight">{{ item.percentage }}%</span></div>
+                </div>
+            </div>
+            <div v-else class="no-data-text">暂未发现问题</div>
+            <div class="note-text" v-if="checkProblemDistributionDesc">注：{{ checkProblemDistributionDesc }}</div>
+        </div>
+
+        <div class="data-block">
+            <div class="block-title-row">
+                <div class="block-title">培训测试正确率分析</div>
+                <div class="total-count">平均正确率：<span class="count-highlight">{{ avgCorrectRate }}%</span></div>
+            </div>
+            <div class="data-grid" v-if="accuracyAnalysis && accuracyAnalysis.length > 0">
+                <div v-for="(item, index) in accuracyAnalysis" :key="index" class="data-item">
+                    <div class="item-label">{{ item.categoryName }}</div>
+                    <div class="item-value" :class="getValueClass(item.color)">{{ item.correctRate }}%</div>
+                    <div class="item-status" :class="getValueClass(item.color)">{{ item.label }}</div>
+                </div>
+            </div>
+            <div v-else class="no-data-text">暂无培训测试数据</div>
+            <div class="note-text" v-if="accuracyAnalysisDesc">注：{{ accuracyAnalysisDesc }}</div>
+        </div>
+    </div>
+</template>
+
+<script>
+
+export default {
+    name: 'QualityControlAnalysis',
+    data() {
+        return {
+            checkProblemDistribution: [],
+            checkProblemDistributionTotal: 0,
+            checkProblemDistributionDesc: '',
+            avgCorrectRate: 0,
+            accuracyAnalysisDesc: '',
+            accuracyAnalysis: [],
+            prohibitedTop3: [],
+            prohibitedTop3Desc: ''
+        }
+    },
+    props: {
+        checkProblemDistributionData: {
+            type: Object,
+            default: () => ({})
+        },
+        accuracyAnalysisData: {
+            type: Object,
+            default: () => ({})
+        },
+        prohibitedTop3Data: {
+            type: Array,
+            default: () => ([])
+        },
+        concealmentPositionTop1Data: {
+            type: Array,
+            default: () => ([])
+        },
+    },
+    watch: {
+        // 监听checkProblemDistributionData变化，重新计算数据
+        checkProblemDistributionData: {
+            handler(newVal) {
+                this.calculateCheckProblemDistribution();
+            },
+            deep: true,
+            immediate: true
+        },
+        accuracyAnalysisData: {
+            handler(newVal) {
+                this.calculateAccuracyAnalysis();
+            },
+            deep: true,
+            immediate: true
+        },
+        prohibitedTop3Data: {
+            handler(newVal) {
+                this.calculateProhibitedTop3();
+            },
+            deep: true,
+            immediate: true
+        },
+        concealmentPositionTop1Data: {
+            handler(newVal) {
+                this.calculateProhibitedTop1();
+            },
+            deep: true,
+            immediate: true
+        }
+    },
+    methods: {
+        calculateProhibitedTop1() {
+            let str = this.concealmentPositionTop1Data.map(item => `${item.checkPositionNameOne}/${item.checkPositionNameTwo}`).join('/');
+
+            this.prohibitedTop3Desc = str ? `隐匿重点部位以[${str}]为主` : "";
+        },
+        calculateAccuracyAnalysis() {
+            const { avgCorrectRate, note, categoryList } = this.accuracyAnalysisData || [];
+            this.avgCorrectRate = avgCorrectRate;
+            this.accuracyAnalysisDesc = note;
+            this.accuracyAnalysis = categoryList
+        },
+
+        // 计算违禁品TOP3数据
+        calculateProhibitedTop3() {
+
+            this.prohibitedTop3 = this.prohibitedTop3Data || [];
+        },
+
+        // 根据颜色获取值对应的CSS类
+        getValueClass(color) {
+            if (color === 'green') return 'value-green';
+            if (color === 'red') return 'value-red';
+            return '';
+        },
+
+
+        // 计算检查问题分布数据
+        calculateCheckProblemDistribution() {
+
+            const { checkProblemDistributionItemDtoList, desc } = this.checkProblemDistributionData || [];
+            this.checkProblemDistributionDesc = desc;
+            // 计算总问题数
+            this.checkProblemDistributionTotal = (checkProblemDistributionItemDtoList || []).reduce((sum, item) => sum + (item.total || 0), 0);
+
+            // 计算每个项目的百分比
+            this.checkProblemDistribution = (checkProblemDistributionItemDtoList || []).map(item => ({
+                ...item,
+                percentage: this.checkProblemDistributionTotal > 0 ?
+                    ((item.total / this.checkProblemDistributionTotal) * 100).toFixed(2) : '0.00'
+            }));
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.quality-control-container {
+    background: #FFFFFF;
+    border-radius: 20rpx;
+    padding: 30rpx;
+    margin-bottom: 30rpx;
+    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
+}
+
+.section-title {
+    font-size: 34rpx;
+    font-weight: bold;
+    color: #333333;
+    margin-bottom: 30rpx;
+}
+
+.data-block {
+    background: #EFF2FE;
+    border-radius: 15rpx;
+    padding: 25rpx;
+    margin-bottom: 25rpx;
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+}
+
+.block-title-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 25rpx;
+}
+
+.block-title {
+    font-size: 30rpx;
+    font-weight: bold;
+    color: #333333;
+}
+
+.total-count {
+    font-size: 26rpx;
+    color: #666666;
+}
+
+.count-highlight {
+    color: #1890FF;
+    font-weight: bold;
+}
+
+.data-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 20rpx;
+    margin-bottom: 20rpx;
+}
+
+.data-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+}
+
+.item-label {
+    font-size: 24rpx;
+    color: #666666;
+    margin-bottom: 8rpx;
+}
+
+.item-value {
+    font-size: 34rpx;
+    font-weight: bold;
+    color: #333333;
+    margin-bottom: 8rpx;
+}
+
+.value-green {
+    color: #00AE41 !important;
+}
+
+.value-red {
+    color: #F96060 !important;
+}
+
+.item-ratio {
+    font-size: 24rpx;
+    color: #666666;
+}
+
+.ratio-highlight {
+    color: #F96060;
+    font-weight: bold;
+}
+
+.item-status {
+    font-size: 24rpx;
+    color: #666666;
+}
+
+
+
+.note-text {
+    font-size: 24rpx;
+    color: #F96060;
+    line-height: 1.6;
+}
+
+.no-data-text {
+    font-size: 28rpx;
+    color: #999999;
+    text-align: center;
+    padding: 40rpx 0;
+    font-style: italic;
+}
+</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,500 @@
+<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-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/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')
           })
         })
       }

src/pages/statisticalReport/index.vue

@@ -0,0 +1,307 @@
+<template>
+  <HomeContainer>
+    <!-- 时间范围显示 -->
+    <!-- <view v-if="startDate && endDate" class="time-range-display">
+      <text class="time-range-text">时间范围：{{ startDate }} 至 {{ endDate }}</text>
+    </view> -->
+
+    <!-- 统计表格区域 -->
+    <view class="statistic-tables-section">
+      <!-- 查获数量统计表格 -->
+      <StatisticTable title="查获数量" :columns="seizureColumns" :data="seizureTableData" :blankData="'0'"
+        class="statistic-table" />
+
+      <!-- 在岗时长统计表格 -->
+      <StatisticTable title="在岗时长" :columns="workingColumns" :data="workingTableData" :blankData="'0'"
+        class="statistic-table" />
+
+      <!-- 巡检合格率统计表格 -->
+      <StatisticTable title="巡检合格率" :columns="inspectionColumns" :data="inspectionTableData" :blankData="'0'"
+        class="statistic-table" />
+
+      <!-- 抽问抽答正确率统计表格 -->
+      <StatisticTable title="抽问抽答正确率" :columns="questionColumns" :data="questionTableData" :blankData="'0'"
+        class="statistic-table" />
+
+      <!-- 培训答题分数统计表格 -->
+      <StatisticTable title="培训答题分数" :columns="learningColumns" :data="learningTableData" :blankData="'0'"
+        class="statistic-table" />
+    </view>
+  </HomeContainer>
+</template>
+
+<script>
+import HomeContainer from '@/components/HomeContainer.vue'
+import HeadTitle from '@/components/HeadTitle.vue'
+import StatisticTable from '@/components/statistic-table/statistic-table.vue'
+import { getHomeReportWhole } from '@/api/home-new/home-new.js'
+export default {
+  name: 'StatisticalReport',
+  components: {
+    HomeContainer,
+    HeadTitle,
+    StatisticTable
+  },
+  data() {
+    return {
+      // 时间参数
+      startDate: '',
+      endDate: '',
+      // 表格列配置
+      seizureColumns: [
+        { props: 'name', title: '查获数量' },
+        { props: 'totalNumber', title: '总数' },
+        { props: 'averageNumber', title: '平均数' },
+        { props: 'medianNumber', title: '中位数' },
+        { props: 'maxNumber', title: '最大值' },
+        { props: 'minNumber', title: '最小值' }
+      ],
+      workingColumns: [
+        { props: 'name', title: '在岗时长' },
+        { props: 'totalNumber', title: '总数' },
+        { props: 'averageNumber', title: '平均数' },
+        { props: 'medianNumber', title: '中位数' },
+        { props: 'maxNumber', title: '最大值' },
+        { props: 'minNumber', title: '最小值' }
+      ],
+      inspectionColumns: [
+        { props: 'name', title: '巡检合格率(%)' },
+        // { props: 'totalNumber', title: '总数' },
+        { props: 'averageNumber', title: '平均数' },
+        { props: 'medianNumber', title: '中位数' },
+        { props: 'maxNumber', title: '最大值' },
+        { props: 'minNumber', title: '最小值' }
+      ],
+      questionColumns: [
+        { props: 'name', title: '抽问抽答正确率(%)' },
+        // { props: 'totalNumber', title: '总数' },
+        { props: 'averageNumber', title: '平均数' },
+        { props: 'medianNumber', title: '中位数' },
+        { props: 'maxNumber', title: '最大值' },
+        { props: 'minNumber', title: '最小值' }
+      ],
+      learningColumns: [
+        { props: 'name', title: '培训答题分数' },
+        // { props: 'totalNumber', title: '总数' },
+        { props: 'averageNumber', title: '平均数' },
+        { props: 'medianNumber', title: '中位数' },
+        { props: 'maxNumber', title: '最大值' },
+        { props: 'minNumber', title: '最小值' }
+      ],
+      // 统计表格数据
+      seizureTableData: [],      // 查获数量 - seizureList
+      workingTableData: [],      // 在岗时长 - workingList
+      inspectionTableData: [],   // 巡检合格率 - checkList
+      questionTableData: [],     // 抽问抽答正确率 - answerList
+      learningTableData: []      // 培训答题分数 - learningList
+    }
+  },
+
+  async onLoad(options) {
+    // 接收页面参数
+    this.startDate = options.startDate || ''
+    this.endDate = options.endDate || ''
+
+    console.log('接收到的时间参数:', {
+      startDate: this.startDate,
+      endDate: this.endDate
+    })
+
+    // 页面加载时获取数据
+    await this.loadData()
+  },
+
+  methods: {
+    // 加载数据方法
+    async loadData() {
+      try {
+        // 根据时间参数构建查询条件
+        const queryParams = {}
+        if (this.startDate && this.endDate) {
+          queryParams.startDate = this.startDate
+          queryParams.endDate = this.endDate
+        }
+
+        console.log('加载数据的查询参数:', queryParams)
+
+        // 调用getHomeReportWhole接口获取真实数据
+        const response = await getHomeReportWhole(queryParams)
+
+        if (response.code === 200 && response.data) {
+          // 处理接口返回的真实数据
+          const { checkList, learningList, seizureList, workingList, answerList } = response.data;
+
+          // 分配数据到对应的表格
+          this.seizureTableData = seizureList || this.generateMockDepartmentData('查获数量')
+          this.workingTableData = workingList || this.generateMockDepartmentData('在岗时长')
+          this.inspectionTableData = checkList.map((item) => {
+            return {
+              ...item,
+              medianNumber: `${(item.medianNumber * 100).toFixed(2)}`,
+              maxNumber: `${(item.maxNumber * 100).toFixed(2)}`,
+              minNumber: `${(item.minNumber * 100).toFixed(2)}`,
+              averageNumber: `${(item.averageNumber * 100).toFixed(2)}`
+            }
+          }) || this.generateMockDepartmentData('巡检合格率')
+          this.questionTableData = answerList.map((item) => {
+            return {
+              ...item,
+              medianNumber: `${(item.medianNumber).toFixed(2)}`,
+              maxNumber: `${(item.maxNumber).toFixed(2)}`,
+              minNumber: `${(item.minNumber).toFixed(2)}`,
+              averageNumber: `${(item.averageNumber).toFixed(2)}`
+            }
+          }) || this.generateMockDepartmentData('抽问抽答正确率')
+          this.learningTableData = learningList || this.generateMockDepartmentData('培训答题分数')
+
+          // 如果有时间参数，显示时间范围提示
+          // if (this.startDate && this.endDate) {
+          //   uni.showToast({
+          //     title: `已加载 ${this.startDate} 至 ${this.endDate} 的数据`,
+          //     icon: 'none',
+          //     duration: 2000
+          //   })
+          // }
+        } else {
+          // 如果接口返回失败，使用模拟数据
+          console.warn('接口返回数据异常，使用模拟数据')
+          this.seizureTableData = this.generateMockDepartmentData('查获数量')
+          this.workingTableData = this.generateMockDepartmentData('在岗时长')
+          this.inspectionTableData = this.generateMockDepartmentData('巡检合格率')
+          this.questionTableData = this.generateMockDepartmentData('抽问抽答正确率')
+          this.learningTableData = this.generateMockDepartmentData('培训答题分数')
+        }
+      } catch (error) {
+        console.error('加载数据失败:', error)
+        // 如果接口调用失败，使用模拟数据
+        this.seizureTableData = this.generateMockDepartmentData('查获数量')
+        this.workingTableData = this.generateMockDepartmentData('在岗时长')
+        this.inspectionTableData = this.generateMockDepartmentData('巡检合格率')
+        this.questionTableData = this.generateMockDepartmentData('抽问抽答正确率')
+        this.learningTableData = this.generateMockDepartmentData('培训答题分数')
+
+        uni.showToast({
+          title: '数据加载失败，使用模拟数据',
+          icon: 'none'
+        })
+      }
+    },
+
+
+
+
+
+    // 生成模拟科室数据（根据类型生成不同科室的统计数据）
+    generateMockDepartmentData(type) {
+      // 模拟科室列表
+      const departments = ['安检一科', '安检二科', '安检三科', '安检四科', '安检五科']
+
+      // 根据类型设置基础数值范围
+      const baseConfig = {
+        '查获数量': { baseTotal: 800, baseAvg: 20, baseMedian: 18, baseMax: 40, baseMin: 5 },
+        '在岗时长': { baseTotal: 1200, baseAvg: 30, baseMedian: 28, baseMax: 60, baseMin: 15 },
+        '巡检合格率': { baseTotal: 1000, baseAvg: 25, baseMedian: 23, baseMax: 50, baseMin: 10 },
+        '抽问抽答正确率': { baseTotal: 600, baseAvg: 15, baseMedian: 14, baseMax: 30, baseMin: 3 },
+        '培训答题分数': { baseTotal: 900, baseAvg: 22, baseMedian: 21, baseMax: 45, baseMin: 8 }
+      }
+
+      const config = baseConfig[type] || baseConfig['查获数量']
+
+      return departments.map((dept, index) => {
+        // 为每个科室生成略有差异的数据
+        const variation = (index + 1) * 0.1 // 每个科室数据略有不同
+
+        return {
+          name: dept,
+          totalNumber: Math.round(config.baseTotal * (1 + variation * 0.2)),
+          averageNumber: (config.baseAvg * (1 + variation * 0.1)).toFixed(1),
+          medianNumber: (config.baseMedian * (1 + variation * 0.1)).toFixed(1),
+          maxNumber: Math.round(config.baseMax * (1 + variation * 0.3)),
+          minNumber: Math.round(config.baseMin * (1 + variation * 0.1))
+        }
+      })
+    },
+
+    // 生成模拟表格数据（根据时间参数调整数据）
+    generateMockTableData(type, queryParams = {}) {
+      // 根据时间范围调整数据值
+      let baseValue = 1000
+      let completionRate = 98.5
+      let passRate = 96.2
+      let avgTime = 15
+
+      // 如果有时间参数，根据时间范围调整数据
+      if (queryParams.startDate && queryParams.endDate) {
+        // 计算时间跨度（天数）
+        const start = new Date(queryParams.startDate)
+        const end = new Date(queryParams.endDate)
+        const diffTime = Math.abs(end - start)
+        const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
+
+        // 根据时间跨度调整数据
+        baseValue = Math.round(1000 * (diffDays / 30)) // 假设30天为基准
+        completionRate = 98.5 - (30 - Math.min(diffDays, 30)) * 0.1
+        passRate = 96.2 - (30 - Math.min(diffDays, 30)) * 0.05
+        avgTime = 15 + (30 - Math.min(diffDays, 30)) * 0.2
+      }
+
+      return [
+        { label: `${type}总数`, value: baseValue.toLocaleString() },
+        { label: `${type}完成率`, value: `${completionRate.toFixed(1)}%` },
+        { label: `${type}合格率`, value: `${passRate.toFixed(1)}%` },
+        { label: `${type}平均用时`, value: `${avgTime.toFixed(0)}分钟` }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.statistical-report {
+  min-height: 100vh;
+  background-color: #f5f7fa;
+}
+
+// 时间范围显示样式
+.time-range-display {
+  background-color: #ffffff;
+  padding: 24rpx 32rpx;
+  margin-bottom: 24rpx;
+  border-radius: 12rpx;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
+
+  .time-range-text {
+    font-size: 28rpx;
+    color: #666;
+    font-weight: 500;
+  }
+}
+
+.page-header {
+  margin-bottom: 32rpx;
+}
+
+.statistic-tables-section {
+  .statistic-table {
+    margin-bottom: 32rpx;
+  }
+}
+
+// 响应式适配
+@media (max-width: 750px) {
+  .time-range-display {
+    padding: 20rpx 24rpx;
+    margin-bottom: 20rpx;
+
+    .time-range-text {
+      font-size: 26rpx;
+    }
+  }
+
+  .statistic-tables-section {
+    .statistic-table {
+      margin-bottom: 24rpx;
+    }
+  }
+}
+</style>

src/pages/workProfile/index.vue

@@ -165,29 +165,9 @@ export default {
         handleLevelChange(value) {
             console.log("value===", value, this.levelOptions)
             let targetObj = {}
-            // 递归查找函数
-            const findInTree = (items, id) => {
-                for (let item of items) {
-                    if (item.id == id) {
-                        return item;
-                    }
-                    if (item.children && item.children.length > 0) {
-                        const found = findInTree(item.children, id);
-                        if (found) return found;
-                    }
-                }
-                return null;
-            };
-
-            targetObj = findInTree(this.levelOptions, value);
-            if (!targetObj) {
-                console.warn('未找到匹配的部门对象，id:', value);
-                return;
-            }
-            console.log("targetObj===", targetObj)
-
-            this.selectedLevelId = targetObj.id;
-            this.selectedLevelType = targetObj.deptType == 'STATION' ? 'station' : targetObj.deptType == 'BRIGADE' ? 'brigade' : 'department'
+            targetObj = this.levelOptions.find(item => item.id == value);
+            this.selectedLevelId = targetObj.value
+            this.selectedLevelType = targetObj.deptType == 'STATION' ? 'station' : 'department'
             this.loadData()
         },
         loadData() {
@@ -213,11 +193,11 @@ export default {
         },
         //获取抽问抽答完成率
         getLevelRateData() {
-            let params = {};
+            let params = {}
             let api = this.selectedLevelType == 'station' ? getStationLevelRate : getDepartmentLevelRate
             if (this.selectedLevelType == 'station') {
                 params.siteId = this.selectedLevelId
-            } else if (this.selectedLevelType == 'department' || this.selectedLevelType == 'brigade') {
+            } else if (this.selectedLevelType == 'department') {
                 params.deptId = this.selectedLevelId
             }
             api(params).then(res => {
@@ -251,6 +231,7 @@ export default {
 
                 })
             }
+
             if (this.isJingLi) {
 
                 const deptId = this.currentUser.deptId;
@@ -302,16 +283,11 @@ export default {
             let otherparams = {
                 deptId: this.selectedLevelId || ''
             }
-            console.log("params===", params, this.selectedLevelType)
             if (this.selectedLevelType == 'station') {
                 params.checkedSiteId = this.selectedLevelId
-            } 
-            if (this.selectedLevelType == 'department') {
+            } else if (this.selectedLevelType == 'department') {
                 params.checkedDepartmentId = this.selectedLevelId
             }
-            if (this.selectedLevelType == 'brigade') {
-                params.checkedBrigadeId = this.selectedLevelId
-            }
             getPortrait(params).then(res => {
                 this.portraitData = res.data || {};
             })