Merge branch 'homepageLargeScreen' into dev

src/api/item/items.js

@@ -42,3 +42,330 @@ export function delItems(id) {
     method: 'delete'
   })
 }
+
+//查获总数量+移交公安数量+故意隐匿数量
+export function getTotalSome (params = {}) {
+  return request({
+    url: '/item/largeScreen/getAppTotalSome',
+    method: 'get',
+    params
+  })
+}
+
+//获取当天所有用户统计数据
+export function getDailyAllUsersRanking(params = {}) {
+  return request({
+    url: '/exam/daily/statistics/dashboard/all-users-ranking',
+    method: 'get',
+    params
+  })
+}
+
+//巡检执行
+export function getExecutionStatusTotal(params) {
+  return request({
+    url: '/check/largeScreen/inspectionExecute',
+    method: 'get',
+    params: params
+  })
+}
+
+// 获取通道统计
+export function getChannelStatistics(status) {
+  return request({
+    url: '/attendance/postRecord/count?regionalStatus='+status,
+    method: 'post',
+  })
+}
+
+// 答题个人排行
+export function userRanking() {
+  return request({
+    url: '/exam/daily/statistics/dashboard/user-ranking?timeRange=today&topN=10&sortBy=completionRate',
+    method: 'get',
+  })
+}
+// 获取通道统计
+export function deptRanking() {
+  return request({
+    url: '/exam/daily/statistics/dashboard/dept-ranking?timeRange=today&topN=10&sortBy=completionRate',
+    method: 'get',
+  })
+}
+
+
+// 获取总体问题分布
+export function problemDistribution(params = {}) {
+  return request({
+    url: '/check/largeScreen/problemDistribution',
+    method: 'get',
+    params
+  })
+}
+
+// 获取问题分布对比
+export function problemComparison(params = {}) {
+  return request({
+    url: '/check/largeScreen/problemComparison',
+    method: 'get',
+    params
+  })
+}
+
+// 获取计划安排总览
+export function planOverview(params={}) {
+  return request({
+    url: '/check/largeScreen/planOverview',
+    method: 'get',
+    params
+  })
+}
+// 获取日常任务检查指标累计分布
+export function planDistribution(params={}) {
+  return request({
+    url: '/check/largeScreen/planDistribution',
+    method: 'get',
+    params
+  })
+}
+// 获取任务明细统计
+export function planStatistics(params={}) {
+  return request({
+    url: '/check/largeScreen/planStatistics',
+    method: 'get',
+    params
+  })
+}
+
+// 查获总览
+export function getAppTotalSome(params = {}) {
+  return request({
+    url: '/item/largeScreen/getAppTotalSome',
+    method: 'get',
+    params
+  })
+}
+// 违禁品类别
+export function category(params = {}) {
+  return request({
+    url: '/item/largeScreen/category',
+    method: 'get',
+    params: {
+      levelType: 1,
+      ...params,
+    }
+  })
+}
+// 违禁品查获部位
+export function appPosition(params = {}) {
+  return request({
+    url: '/item/largeScreen/appPosition',
+    method: 'get',
+    params: {
+      levelType: 1,
+      ...params,
+    }
+  })
+}
+// 查获岗位
+export function largeScreenPost(params = {}) {
+  return request({
+    url: '/item/largeScreen/post',
+    method: 'get',
+    params
+  })
+}
+// 查获时间分布
+export function appTimeSpan(params = {}) {
+  return request({
+    url: '/item/largeScreen/appTimeSpan',
+    method: 'get',
+    params
+  })
+}
+
+// 问题整改统计
+export function correction(params = {}) {
+  return request({
+    url: '/check/largeScreen/correction',
+    method: 'get',
+    params
+  })
+}
+// 问题整改分布
+export function correctionDistribution(params = {}) {
+  return request({
+    url: '/check/largeScreen/correctionDistribution',
+    method: 'get',
+    params
+  })
+}
+
+//工作画像--查获审批时长统计(柱状图)
+export function getDurationChart (params) {
+  return request({
+    url: '/item/user-ranking/seizure-approval/duration',
+    method: 'get',
+    params: params
+  });
+}
+
+
+//获取站级别抽问抽答完成率
+export function getStationLevelRate (params = {}) {
+  return request({
+    url: '/exam/daily/site-profile/daily-completion-rate',
+    method: 'get',
+    params: params
+  });
+}
+//获取部门抽问抽答完成率
+export function getDepartmentLevelRate (params = {}) {
+  return request({
+    url: '/exam/daily/dept-profile/daily-completion-rate',
+    method: 'get',
+    params: params
+  });
+}
+//工作画像--查获趋势图，获取有效查获趋势数据（默认近90天）
+export function getSeizureTrendChart (params = {}) {
+  return request({
+    url: '/item/user-ranking/seizure-trend',
+    method: 'get',
+    params: params
+  });
+}
+
+//工作画像--通道开放趋势图(折线图)
+export function getChannelOpenTrendChart (params = {}) {
+  return request({
+    url: '/attendance/stats/channel/open/trend',
+    method: 'get',
+    params: params
+  });
+}
+
+export function getDeptList() {
+  return request({
+    url: '/system/user/deptTree',
+    method: 'get'
+  })
+}
+
+//能力画像-协同配合
+export function getCollaborationProfile(params) {
+  return request({
+    url: '/system/user/cooperation',
+    method: 'get',
+    params: params
+  })
+}
+//能力画像-明细
+export function getDetailProfile(params) {
+  return request({
+    url: '/system/user/detail',
+    method: 'get',
+    params: params
+  })
+}
+
+// 查获取指定模块的指标值
+export function getModuleMetrics(params) {
+  return request({
+    url: '/user/basic/portrait/module/info',
+    method: 'get',
+    params: params
+  })
+}
+//总体概览接口
+export function getOverview(params) {
+  return request({
+    url: '/system/user/population',
+    method: 'get',
+    params: params
+  })
+}
+
+//计算站级考勤工作统计
+export function getAttendanceStatistics (params) {
+  return request({
+    url: `/attendance/stats/station`,
+    method: 'get',
+    params: params  
+  })
+}
+//计算站级查获统计
+export function getSiteStatistics(params) {
+  return request({
+    url: `/item/user-ranking/station`,
+    method: 'get',
+    params: params
+  })
+}
+//能力画像-学习成长
+export function getGrowthPortrait(params) {
+  return request({
+    url: '/system/growth/portrait',
+    method: 'get',
+    params: params
+  })
+}
+
+//获取指定用户画像
+export function getUserProfile(params) {
+  return request({
+    url: '/exam/daily/user-profile',
+    method: 'get',
+    params: params
+  })
+}
+
+//获取班组和科室画像
+export function getDeptProfile(params) {
+  return request({
+    url: '/exam/daily/dept-profile',
+    method: 'get',
+    params: params
+  })
+}
+//获取站级画像
+export function getSiteProfile(params) {
+  return request({
+    url: '/exam/daily/site-profile',
+    method: 'get',
+    params: params
+  })
+}
+
+//巡检画像
+export function getPortrait(params) {
+  return request({
+    url: '/check/largeScreen/portrait',
+    method: 'get',
+    params: params
+  })
+}
+
+//获取所有部门和班组下人员
+export function getDeptUserTree(params) {
+  return request({
+    url: '/system/user/deptUserTree',
+    method: 'get',
+    params: params
+  })
+}
+//获取用户在指定层级的详细排名信息
+export function getRankInfo(params) {
+  return request({
+    url: '/item/user-ranking/ranking-detail',
+    method: 'get',
+    params: params
+  })
+}
+//根据用户ID查询用户信息
+export function getUserInfoById(userId) {
+  return request({
+    url: `/system/user/${userId}`,
+    method: 'get',
+  })
+}

src/api/largeScreen/largeScreen.js

@@ -89,4 +89,92 @@ export function addCheckRecord(data) {
   })
 }
 
+// 查询我的任务列表（当天有效任务）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 getHomeReportDownload(params) {
+  return request({
+    url: '/system/homeReport/download',
+    method: 'get',
+    params: params,
+    responseType: 'blob'
+  })
+}

src/hooks/useEcharts.js

@@ -0,0 +1,92 @@
+import { ref, onMounted, onBeforeUnmount, watch } from 'vue';
+import * as echarts from 'echarts';
+import { useResizeObserver } from '@vueuse/core';
+
+/**
+ *  ECharts Hook
+ * @param containerRef 图表容器 Ref
+ * @param options 图表配置 Ref
+ * @param theme 主题配置（可选）
+ * @param autoResize 是否自动响应容器大小变化（默认 true）
+ */
+export function useECharts(
+  containerRef,
+  options,
+  theme = 'macarons',
+  autoResize = true
+) {
+  const chartInstance = ref(null);
+  const resizeObserver = ref(null);
+
+  // 初始化图表
+  const init = () => {
+    if (!containerRef.value) return;
+    dispose();
+    chartInstance.value = markRaw(echarts.init(containerRef.value, theme))
+    chartInstance.value.setOption(options.value);
+    // 初始化 resize 监听
+    if (autoResize) {
+      setupResizeObserver();
+    }
+  };
+
+  // 设置 resize 监听
+  const setupResizeObserver = () => {
+    if (!containerRef.value) return;
+    
+    resizeObserver.value = useResizeObserver(containerRef.value, () => {
+      resize();
+    });
+  };
+
+  // 销毁图表
+  const dispose = () => {
+    // 移除 resize 监听
+    if (resizeObserver.value) {
+      resizeObserver.value.stop();
+      resizeObserver.value = null;
+    }
+    
+    // 销毁图表实例
+    if (chartInstance.value && !chartInstance.value.isDisposed()) {
+      chartInstance.value.dispose();
+      chartInstance.value = null;
+    }
+  };
+
+  // 重置图表
+  const reset = () => {
+    dispose();
+    init();
+  };
+
+  // 手动触发 resize
+  const resize = () => {
+    if (chartInstance.value) {
+      try {
+        chartInstance.value.resize();
+      } catch (error) {
+        console.error('ECharts resize 失败:', error);
+      }
+    }
+  };
+
+  // 监听 options 变化
+  watch(options, (newOptions) => {
+    if (chartInstance.value) {
+      chartInstance.value.setOption(newOptions);
+    }
+  }, { deep: true, immediate: true });
+
+  // 组件生命周期
+  onMounted(() => init());
+  onBeforeUnmount(() => dispose());
+
+  return {
+    instance: chartInstance,
+    init,
+    dispose,
+    reset,
+    resize
+  };
+}

src/store/modules/user.js

@@ -15,7 +15,8 @@ const useUserStore = defineStore(
       nickName: '',
       avatar: '',
       roles: [],
-      permissions: []
+      permissions: [],
+      userInfo: {},
     }),
     actions: {
       // 登录
@@ -53,17 +54,18 @@ const useUserStore = defineStore(
             this.name = user.userName
             this.nickName = user.nickName
             this.avatar = avatar
+            this.userInfo = res.userInfo
             /* 初始密码提示 */
-            if(res.isDefaultModifyPwd) {
-              ElMessageBox.confirm('您的密码还是初始密码，请修改密码！',  '安全提示', {  confirmButtonText: '确定',  cancelButtonText: '取消',  type: 'warning' }).then(() => {
+            if (res.isDefaultModifyPwd) {
+              ElMessageBox.confirm('您的密码还是初始密码，请修改密码！', '安全提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => {
                 router.push({ name: 'Profile', params: { activeTab: 'resetPwd' } })
-              }).catch(() => {})
+              }).catch(() => { })
             }
             /* 过期密码提示 */
-            if(!res.isDefaultModifyPwd && res.isPasswordExpired) {
-              ElMessageBox.confirm('您的密码已过期，请尽快修改密码！',  '安全提示', {  confirmButtonText: '确定',  cancelButtonText: '取消',  type: 'warning' }).then(() => {
+            if (!res.isDefaultModifyPwd && res.isPasswordExpired) {
+              ElMessageBox.confirm('您的密码已过期，请尽快修改密码！', '安全提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => {
                 router.push({ name: 'Profile', params: { activeTab: 'resetPwd' } })
-              }).catch(() => {})
+              }).catch(() => { })
             }
             resolve(res)
           }).catch(error => {
@@ -78,6 +80,7 @@ const useUserStore = defineStore(
             this.token = ''
             this.roles = []
             this.permissions = []
+            this.userInfo = {}
             removeToken()
             resolve()
           }).catch(error => {

src/views/dataBigScreen/dashboard/InactivityTimer.js

@@ -0,0 +1,118 @@
+export class InactivityTimer {
+  constructor(options = {}) {
+    this.defaults = {
+      timeout: 30000,       // 默认30秒超时
+      warningTime: 5000,   // 提前5秒警告
+      onTimeout: () => console.log('Timeout callback'),
+      onWarning: () => console.log('Warning callback'),
+      onReset: () => {},
+      onStart: () => {},
+      onStop: () => {}
+    };
+    
+    this.config = { ...this.defaults, ...options };
+    this.timer = null;
+    this.timeLeft = this.config.timeout;
+    this.isRunning = false;
+    this.isPaused = false;
+    this.warningTriggered = false;
+    this.startTime = null;
+    this.pageVisible = true;
+    
+    this.init();
+  }
+
+  init() {
+    document.addEventListener('visibilitychange', () => this.handleVisibilityChange());
+    this.setupActivityListeners();
+  }
+
+  setupActivityListeners() {
+    ['mousemove', 'keydown', 'click', 'scroll', 'touchstart'].forEach(event => {
+      document.addEventListener(event, () => this.handleUserActivity());
+    });
+  }
+
+  handleUserActivity() {
+    if (this.isRunning && !this.isPaused) {
+      this.resetTimer();
+    }
+  }
+
+  handleVisibilityChange() {
+    this.pageVisible = document.visibilityState === 'visible';
+    
+    if (this.pageVisible && this.isRunning && this.isPaused) {
+      this.isPaused = false;
+      this.startTime = Date.now() - (this.config.timeout - this.timeLeft);
+      this.startTimer();
+    } else if (!this.pageVisible && this.isRunning && !this.isPaused) {
+      this.isPaused = true;
+      this.clearTimer();
+    }
+  }
+
+  start() {
+    if (this.isRunning) return;
+    
+    this.isRunning = true;
+    this.isPaused = false;
+    this.warningTriggered = false;
+    this.startTime = Date.now();
+    this.timeLeft = this.config.timeout;
+    
+    this.config.onStart();
+    this.startTimer();
+  }
+
+  startTimer() {
+    this.clearTimer();
+    
+    this.timer = setInterval(() => {
+      if (!this.isPaused) {
+        const elapsed = Date.now() - this.startTime;
+        this.timeLeft = this.config.timeout - elapsed;
+        
+        if (this.timeLeft <= 0) {
+          this.clearTimer();
+          this.isRunning = false;
+          this.timeLeft = 0;
+          this.config.onTimeout();
+        } else if (this.timeLeft <= this.config.warningTime && !this.warningTriggered) {
+          this.warningTriggered = true;
+          this.config.onWarning();
+        }
+      }
+    }, 100);
+  }
+
+  resetTimer() {
+    this.startTime = Date.now();
+    this.timeLeft = this.config.timeout;
+    this.warningTriggered = false;
+    this.config.onReset();
+  }
+
+  reset() {
+    if (!this.isRunning) return;
+    this.resetTimer();
+  }
+
+  stop() {
+    if (!this.isRunning) return;
+    
+    this.clearTimer();
+    this.isRunning = false;
+    this.isPaused = false;
+    this.timeLeft = this.config.timeout;
+    this.warningTriggered = false;
+    this.config.onStop();
+  }
+
+  clearTimer() {
+    if (this.timer) {
+      clearInterval(this.timer);
+      this.timer = null;
+    }
+  }
+}

src/views/dataBigScreen/dashboard/SeizedRanking.vue

@@ -3,7 +3,7 @@
     <template #right-menu>
       <div class="dashboard-right-menu">
         <span :class="{ active: currentType === 1 }" @click="handleClick(1)">
-          按主管
+          按大队
         </span>
         <span :class="{ active: currentType === 2 }" @click="handleClick(2)">
           按班组

src/views/dataBigScreen/dashboard/TopTitle.vue

@@ -1,16 +1,9 @@
 <template>
   <div class="pageTop wow fadeInDown">
     <div class="pageTopbg"></div>
-    <div class="zhuangshi">
-      <div class="leftZhuangshi"></div>
-      <div class="rightZhuangshi"></div>
-    </div>
-    <div class="left"></div>
     <div class="title">
       <span>{{ name }}</span>
     </div>
-    <div class="right">
-    </div>
   </div>
 </template>
 
@@ -37,33 +30,6 @@
     align-content: flex-start;
     pointer-events: none;
     background: url('../../../assets/images/topbg-2521ad78.png') center top no-repeat;
-
-    .zhuangshi {
-      position: absolute;
-      top: 10px;
-      width: 96%;
-      left: 2%;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      flex-wrap: nowrap;
-      flex-direction: row;
-      align-content: flex-start;
-      z-index: 100;
-
-      .leftZhuangshi, .rightZhuangshi {
-        width: 192px;
-        background: url('../../../assets/images/下载.png') left center no-repeat;
-        height: 29px;
-        position: relative;
-      }
-
-      .rightZhuangshi {
-        position: relative;
-        transform: scaleX(-1);
-      }
-    }
-
     .title {
       position: relative;
       width: 40%;
@@ -76,8 +42,8 @@
       align-content: flex-start;
 
       span {
-        font-size: 36px;
-        font-weight: normal;
+        font-size: 42px;
+        font-weight: 900;
         color: #FFFFFF;
         margin-top: 15px;
         letter-spacing: 2px;

src/views/dataBigScreen/dashboard/components/ChartsContainer.vue

@@ -0,0 +1,146 @@
+<template>
+  <div class="chartsContainer">
+    <div v-if=" title " class="chartsContainer-title">
+      <span class="title-text">{{ title }}</span>
+      <div class="title-slot">
+        <slot name="title"></slot>
+      </div>
+    </div>
+    <div class="chartsContainer-content">
+      <div class="chartsContainer-content-top" v-if=" name ">
+        <div class="chartsContainer-content-name">{{ name }}</div>
+        <div class="chartsContainer-content-other">
+          <slot name="other"></slot>
+        </div>
+      </div>
+      <div class="chartsContainer-content-describe" v-if=" $slots.describe ">
+        <slot name="describe"></slot>
+      </div>
+      <div class="chartsContainer-content-content">
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted } from 'vue';
+const porps = defineProps({
+  title: {
+    type: String,
+    default: ''
+  },
+  name: {
+    type: String,
+    default: ''
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.chartsContainer {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background: linear-gradient(to bottom, rgba(8, 97, 117, 0) 0%, #13a2d6 200%);
+  border-radius: 4px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  .chartsContainer-title {
+    height: 42px;
+    width: 100%;
+    background: linear-gradient(to right, #004387 0%, #090B18 100%);
+    border-left: 1px solid #1892CE;
+    line-height: 42px;
+    color: #fff;
+    font-weight: 900;
+    font-size: 20px;
+    text-indent: 1em;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    // padding: 0 15px;
+    
+    .title-text {
+      flex: 1;
+    }
+    
+    .title-slot {
+      display: flex;
+      align-items: center;
+      margin-left: 10px;
+    }
+  }
+
+  .chartsContainer-content {
+    padding: 20px 15px 10px;
+    box-sizing: border-box;
+    display: flex;
+    width: 100%;
+    flex: 1;
+    flex-direction: column;
+    row-gap: 10px;
+    overflow: hidden;
+
+    .chartsContainer-content-top {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      color: #78DEF5;
+
+      .chartsContainer-content-name {
+        color: #fff;
+        font-weight: bold;
+        font-size: 16px;
+        display: flex;
+        align-items: center;
+
+        &::before {
+          content: '';
+          display: inline-block;
+          border-left: 9px solid #1CB6FF;
+          border-top: 8px solid transparent;
+          border-right: 9px solid transparent;
+          border-bottom: 8px solid transparent;
+        }
+      }
+      .chartsContainer-content-other {
+        display: flex;
+        align-items: center;
+      }
+    }
+
+    .chartsContainer-content-describe {
+      color: #78DEF5;
+      font-size: 12px;
+      font-weight: bold;
+       display: flex;
+      align-items: center;
+    }
+
+    .chartsContainer-content-content {
+      flex: 1;
+      width: 100%;
+      overflow: hidden;
+      --el-bg-color: transparent;
+      --el-fill-color-blank: transparent;
+      --el-border-color-lighter: #1887A6;
+      --el-text-color-regular: #fff;
+      --el-fill-color-light: #5e93a1;
+
+      :deep(.el-table) {
+        .el-table__header-wrapper th {
+          background-color: #1CA7C8 !important;
+          color: #fff;
+        }
+
+        .cell {
+          font-weight: bold;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/dataBigScreen/dashboard/components/DashboardContainer.vue

@@ -1,16 +1,8 @@
 <template>
-  <div :class="{ none: !$slots.default}" class="dashboard-container">
+  <div :class="{ none: !$slots.default}" class="dashboard-container" ref="page">
     <slot></slot>
     <div v-if="!props.hide" class="wow home-main">
-      <div class="home-main-left wow slideInLeft">
-        <slot name="left"></slot>
-      </div>
-      <div class="home-main-center wow bounceIn">
-        <slot name="center"></slot>
-      </div>
-      <div class="home-main-right wow slideInRight">
-        <slot name="right"></slot>
-      </div>
+      <slot name="center"></slot>
     </div>
   </div>
 </template>
@@ -18,7 +10,7 @@
 <script setup>
   import { onMounted } from 'vue';
   import WOW from 'wow.js';
-
+  const page = ref(null)
   const props = defineProps({
     hide: {
       type: Boolean,
@@ -30,15 +22,18 @@
     const wow = new WOW();
     wow.init();
   });
+  defineExpose({
+    getRoot: () => page.value
+  })
 </script>
 
 <style lang="scss" scoped>
   .dashboard-container {
     position: relative;
     width: 100%;
-    min-height: 100vh;
     background: url('../../../../assets/images/bg-99b6904c.png');
     background-size: 100% 100%;
+    overflow: auto;
 
     &.none {
       .home-main {
@@ -47,51 +42,9 @@
     }
 
     .home-main {
-      position: relative;
-      width: calc(100% - 20px);
-      padding: 100px 0 20px;
-      margin-left: 20px;
-      height: 100vh;
-      display: flex;
-      z-index: 1;
-      justify-content: space-between;
-      align-items: flex-start;
-      flex-wrap: nowrap;
-      flex-direction: row;
-      pointer-events: none;
-      overflow: hidden;
-
-      .home-main-left, .home-main-right {
-        width: calc(30% + -0px);
-        position: relative;
-        height: calc(100% + -0px);
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        flex-wrap: nowrap;
-        flex-direction: column;
-        align-content: flex-start;
-        z-index: 2;
-        pointer-events: initial;
-      }
-
-      .home-main-left-inner, .home-main-center, .home-main-right-inner {
-        width: calc(100% + -0px);
-        height: 100%;
-        position: relative;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        flex-wrap: nowrap;
-        flex-direction: column;
-        align-content: flex-start;
-        z-index: 2;
-        pointer-events: initial;
-      }
-
-      .home-main-center {
-        width: calc(40% - 20px);
-      }
+      width: 100%;
+      padding: 100px 10px 10px;
+      box-sizing: border-box;
     }
   }
 </style>

src/views/dataBigScreen/dashboard/components/pageItems/Attendance.vue

@@ -0,0 +1,113 @@
+<template>
+  <ChartsContainer title="出勤投入">
+    <div ref="content" style="height: 100%;">
+      <div class="content-row" v-if="type">
+        <div class="content-row-list">
+          <div class="content-row-item">
+            <div>{{ props.type === 'personal' ? '出勤天数' : '人均出勤天数' }}</div>
+            <div>{{ rowTableItem.avgWorkingDays }}天</div>
+          </div>
+          <div class="content-row-item">
+            <div>{{  props.type === 'personal' ? '岗时长' : '人均上岗时长' }}</div>
+            <div>{{ rowTableItem.avgWorkingHours }}h</div>
+          </div>
+        </div>
+      </div>
+      <el-table v-else v-auto-scroll :data="tableData" border style="width: 100%" height="100%">
+        <el-table-column prop="dimension" label="统计维度" min-width="100" />
+        <el-table-column prop="avgWorkingDays" label="人均出勤天数" />
+        <el-table-column prop="avgWorkingHours" label="人均上岗时长" min-width="100" />
+      </el-table>
+    </div>
+  </ChartsContainer>
+</template>
+
+<script setup>
+import ChartsContainer from '../ChartsContainer.vue';
+import { ref } from 'vue';
+import { getAttendanceStatistics, getModuleMetrics } from '@/api/item/items'
+import { useTimeOut } from '../pageItems/useTimeOut'
+const props = defineProps({
+  type: {
+    type: String,
+    default: '' // team, department, station
+  }
+})
+const tableData = ref([])
+const rowTableItem = ref({
+  
+})
+const params = inject('provideParams')
+useTimeOut(() => {
+  if (props.type !== 'team' && props.type !== 'personal' ) {
+    params.value.deptId && getAttendanceStatistics({ deptId: params.value.deptId }).then(res => {
+      tableData.value = res
+      rowTableItem.value = (res || [ {} ])[ 0 ]
+    })
+  } else {
+    params.value.deptId && getModuleMetrics(
+      props.type === 'personal' ? { userId: params.value.deptId, userTypeStr: props.type } : { deptId: params.value.deptId, userTypeStr: props.type }
+    ).then(res => {
+    const { moduleResults = {
+      attendance: {
+        workingDate: {},
+        workingHours: {},
+      }
+    } } = res.data
+    if (props.type === 'personal') {
+      rowTableItem.value = {
+        avgWorkingDays: moduleResults.attendance.workingDate,
+        avgWorkingHours: moduleResults.attendance.workingHours
+      }
+    } else {
+      rowTableItem.value = {
+        avgWorkingDays: moduleResults.attendance.workingDate.averagePersonnel,
+        avgWorkingHours: moduleResults.attendance.workingHours.averagePersonnel
+      }
+    }
+    
+  })
+  }
+  
+}, [ params ])
+
+</script>
+
+<style lang="scss" scoped>
+.content-row {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  .content-row-title {
+    font-size: 14px;
+    color: #77DBF4;
+    height: 30px;
+  }
+
+  .content-row-list {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    justify-content: space-evenly;
+    row-gap: 15px;
+  }
+
+  .content-row-item {
+    flex: 1;
+    background: url('../../../../../assets/images/rowBg.png') no-repeat;
+    background-position: -10px;
+    background-size: calc(100% + 20px) 100%;
+    overflow: hidden;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    color: #fff;
+    font-size: 16px;
+    border-radius: 5px;
+    padding: 0 15px;
+    font-weight: bold;
+    max-height: 64px;
+  }
+}
+</style>

src/views/dataBigScreen/dashboard/components/pageItems/ChannelOpeningSituation.vue

@@ -0,0 +1,182 @@
+<template>
+  <ChartsContainer title="通道开放情况">
+    <div ref="pie" style="height: 60%;"></div>
+    <div ref="bar" style="height: 40%;"></div>
+  </ChartsContainer>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import ChartsContainer from '../ChartsContainer.vue';
+import { useECharts } from '@/hooks/useEcharts.js';
+
+const pie = ref(null)
+const bar = ref(null)
+
+const props = defineProps({
+  channelCountInfo: {
+    type: Object,
+    default: () => ({
+      allData: 0, // 全部通道
+      openRate: 0, // 开放率
+      openData: 0,  // 开放通道数
+      closeData: 0, // 未开放通道数
+      barGrounp: [ 'T2航站楼', 'T1航站楼' ],
+      barOpenData: [ 0, 0 ],
+      barCloseData: [ -0, -0 ],
+      hasValidData: true
+    })
+  }
+})
+
+
+const setChartsOptions = computed(() => {
+  return {
+    graphic: props.channelCountInfo.hasValidData ? [ {
+      type: 'text',
+      left: '52%',
+      top: '40%',
+      style: {
+        text: '开放率',
+        font: 'bold 20px sans-serif',
+        fill: '#fff'
+      }
+    }, {
+      type: 'text',
+      left: '52%',
+      top: '50%',
+      style: {
+        text: props.channelCountInfo.openRate + '%',
+        font: 'bold 22px sans-serif',
+        fill: '#fff'
+      }
+    } ] : [ {
+      // 无数据时显示提示
+      type: 'text',
+      left: 'center',
+      top: 'center',
+      style: {
+        text: '暂无数据',
+        font: 'bold 20px sans-serif',
+        fill: '#fff'
+      }
+    } ],
+    legend: {
+      data: [ "开放", "未开放" ],
+      left: "left",
+      top: "center",
+      orient: "vertical",
+      textStyle: { color: "#fff" },
+    },
+    tooltip: {
+      trigger: 'item'
+    },
+    series: [ {
+      type: "pie",
+      radius: [ "50%", "70%" ],
+      center: [ "60%", "50%" ],
+      label: {
+        formatter: '{b}\n{c}',
+        color: '#fff',
+        fontSize: 14,
+      },
+      labelLine: {
+        length: 10
+      },
+      data: [
+        { value: props.channelCountInfo.openData, name: "开放", itemStyle: { color: "#408CFF" } },
+        { value: props.channelCountInfo.closeData, name: "未开放", itemStyle: { color: "#A7C8FF" } }
+      ]
+    } ],
+    animation: false,
+    grid: {
+      top: 10,
+      bottom: 50,
+      left: 20,
+      right: 20
+    },
+  }
+})
+const setChartsOptionsBar = computed(() => {
+  return {
+    grid: {
+      top: 20,
+      bottom: 20,
+      left: 80,
+      right: 20
+    },
+    legend: { show: false },
+    xAxis: {
+      type: 'value',
+      position: 'bottom',
+      axisLine: { show: true, lineStyle: { color: '#fff' } },
+      axisTick: { show: false },
+      axisLabel: { show: false },
+      splitLine: { show: false },
+      min: -props.channelCountInfo.allData || -10,
+      max: props.channelCountInfo.allData || 10
+    },
+    yAxis: {
+      type: 'category',
+      data: props.channelCountInfo.barGrounp,
+      axisLine: { show: false },
+      axisTick: { show: false },
+      axisLabel: {
+        color: '#fff',
+        fontSize: 14,
+        margin: 10
+      }
+    },
+    series: [
+      {
+        name: '开放',
+        type: 'bar',
+        stack: 'total',
+        barWidth: 20,
+        itemStyle: { color: '#408CFF' },
+        label: {
+          show: true,
+          position: 'left',
+          color: '#fff',
+          formatter: function (params) {
+            return Math.abs(params.value)
+          }
+        },
+        data: props.channelCountInfo.barOpenData // T2航站楼开放70，T1航站楼开放30
+      },
+      {
+        name: '未开放',
+        type: 'bar',
+        stack: 'total',
+        barWidth: 20,
+        itemStyle: { color: '#A7C8FF' },
+        label: {
+          show: true,
+          position: 'right',
+          color: '#fff',
+          formatter: function (params) {
+            return Math.abs(params.value)
+          }
+        },
+        data: props.channelCountInfo.barCloseData  // T2航站楼未开放30，T1航站楼未开放70
+      }
+    ],
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: { type: 'shadow' },
+      formatter: function (params) {
+        return params[ 0 ].name + '<br/>' +
+          params[ 0 ].seriesName + ': ' + Math.abs(params[ 0 ].value) + '<br/>' +
+          params[ 1 ].seriesName + ': ' + Math.abs(params[ 1 ].value);
+      }
+    }
+  }
+})
+
+useECharts(pie, setChartsOptions);
+useECharts(bar, setChartsOptionsBar);
+
+
+</script>
+
+<style lang="scss" scoped></style>

src/views/dataBigScreen/dashboard/components/pageItems/ChannelsAndPersonnel.vue

@@ -0,0 +1,161 @@
+<template>
+  <div class="personnel-status">
+    <ChannelOpeningSituation :channelCountInfo="channelCountData" />
+    <PersonnelOnDutySituation :personnelCountInfo="personnelCountData" />
+  </div>
+  <div class="information-details">
+    <WorkDetails v-model="detailsInfo" />
+  </div>
+
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { getChannelStatistics } from '@/api/item/items'
+import {
+  ChannelOpeningSituation,
+  PersonnelOnDutySituation,
+  WorkDetails
+} from './index';
+import { useTimeOut } from './useTimeOut'
+
+const channelCountData = ref({
+  allData: 0, // 全部通道
+  openRate: 0, // 开放率
+  openData: 0,  // 开放通道数
+  closeData: 0, // 未开放通道数
+  barGrounp: [ 'T2航站楼', 'T1航站楼' ],
+  barOpenData: [ 0, 0 ],
+  barCloseData: [ -0, -0 ],
+  hasValidData: true
+})
+
+const personnelCountData = ref({
+  allData: 0, // 全部人数
+  openRate: 0, // 在岗率
+  openData: 0,  // 在岗人数
+  closeData: 0, // 空闲人数
+  barGrounp: [ 'T2航站楼', 'T1航站楼' ],
+  barOpenData: [ 0, 0 ],
+  barCloseData: [ -0, -0 ],
+  hasValidData: true
+})
+
+const detailsInfo = ref([])
+
+
+const setChannelCountInfo = (result) => {
+  const { channelCount, maintainCount, onDutyCount, terminlDetail } = result;
+  const channelCountInfo = {
+    barGrounp: [ 'T2航站楼', 'T1航站楼' ],
+  }
+  // 开放通道信息 饼图数据
+  channelCountInfo.allData = channelCount
+  channelCountInfo.openData = terminlDetail.reduce((item, cur) => {
+    return item + cur.onDutyChannelCount;
+  }, 0);
+  channelCountInfo.openRate = Math.round((channelCountInfo.openData / channelCountInfo.allData) * 10000) / 100;
+
+  channelCountInfo.closeData = channelCountInfo.allData - channelCountInfo.openData;
+  // 检查数据是否有效
+  channelCountInfo.hasValidData = channelCountInfo.openData > 0 || channelCountInfo.closeData > 0;
+  // 开放通道信息 柱状图数据
+  let barT1 = terminlDetail && Array.isArray(terminlDetail)
+    ? terminlDetail.filter(item => item.terminlName === channelCountInfo.barGrounp[ 1 ])[ 0 ]
+    : null;
+  let barT2 = terminlDetail && Array.isArray(terminlDetail)
+    ? terminlDetail.filter(item => item.terminlName === channelCountInfo.barGrounp[ 0 ])[ 0 ]
+    : null;
+
+  let batT1Open = barT1?.onDutyChannelCount;//T1航站楼开放人数
+  let batT2Open = barT2?.onDutyChannelCount;//T2航站楼开放人数
+  let batT1Close = barT1 ? barT1.channelCount - barT1.onDutyChannelCount : 0;//T1航站楼未开放人数
+  let batT2Close = barT2 ? barT2.channelCount - barT2.onDutyChannelCount : 0;//T2航站楼未开放人数
+  channelCountInfo.barOpenData = [ batT2Open > 0 ? -batT2Open : 0, batT1Open > 0 ? -batT1Open : 0 ]
+  channelCountInfo.barCloseData = [ batT2Close, batT1Close ]
+  
+  channelCountData.value = channelCountInfo
+
+}
+const setPersonnelCountInfo = (result) => {
+  const { channelCount, maintainCount, onDutyCount, terminlDetail } = result;
+  const personnelCountInfo = {
+    barGrounp: [ 'T2航站楼', 'T1航站楼' ],
+  }
+  // 开放通道信息 饼图数据
+  personnelCountInfo.allData = maintainCount
+
+  personnelCountInfo.openData = terminlDetail.reduce((item, cur) => {
+    return item + cur.onDutyCount;
+  }, 0);
+  personnelCountInfo.openRate = Math.floor((personnelCountInfo.openData / personnelCountInfo.allData) * 10000) / 100;
+
+  personnelCountInfo.closeData = personnelCountInfo.allData - personnelCountInfo.openData;
+  // 检查数据是否有效
+  personnelCountInfo.hasValidData = personnelCountInfo.openData > 0 || personnelCountInfo.closeData > 0;
+  // 开放通道信息 柱状图数据
+  let barT1 = terminlDetail && Array.isArray(terminlDetail)
+    ? terminlDetail.filter(item => item.terminlName === personnelCountInfo.barGrounp[ 1 ])[ 0 ]
+    : null;
+  let barT2 = terminlDetail && Array.isArray(terminlDetail)
+    ? terminlDetail.filter(item => item.terminlName === personnelCountInfo.barGrounp[ 0 ])[ 0 ]
+    : null;
+  let batT1NormalPerson = barT1?.onDutyCount;//T1航站楼在岗人数
+  let batT2NormalPerson = barT2?.onDutyCount;//T2航站楼在岗人数
+  let batT1FreePerson = barT1 ? barT1.openChannelCount - barT1.onDutyCount : 0;//T1航站楼空闲人数
+  let batT2FreePerson = barT2 ? barT2.openChannelCount - barT2.onDutyCount : 0;//T2航站楼空闲人数
+  personnelCountInfo.barOpenData = [
+    batT2NormalPerson > 0 ? -batT2NormalPerson : 0,
+    batT1NormalPerson > 0 ? -batT1NormalPerson : 0 
+  ]
+  personnelCountInfo.barCloseData = [ batT2FreePerson, batT1FreePerson ]
+
+  personnelCountData.value = personnelCountInfo
+}
+
+useTimeOut(() => {
+  getChannelStatistics(2).then((result) => {
+    detailsInfo.value = result.terminlDetail.map(acc => {
+      const itemDataOptions = (acc.region || []).map(item => ({
+        label: item.regionalName,
+        value: item.regionalCode,
+        data: item.detailList || []
+      }))
+      return {
+        onDutyChannelCount: acc.onDutyChannelCount,
+        name: acc.terminlName,
+        options: itemDataOptions,
+        stateOptions: [ '在岗', '空闲' ],
+        stateActive: '在岗',
+        active: itemDataOptions[ 0 ] ? itemDataOptions[ 0 ].value : '',
+        data: itemDataOptions[ 0 ] ? itemDataOptions[ 0 ].data : [],
+        waitList: acc.waitList
+      }
+    })
+    setChannelCountInfo(result)
+    setPersonnelCountInfo(result)
+  })
+})
+
+</script>
+
+<style lang="scss" scoped>
+.public-inheritance-style {
+  width: 100%;
+  display: flex;
+  column-gap: 10px;
+}
+
+.personnel-status {
+  @extend .public-inheritance-style;
+  min-height: 420px;
+  height: 40%;
+
+}
+
+.information-details {
+  @extend .public-inheritance-style;
+  flex: 1;
+  overflow: hidden;
+}
+</style>

src/views/dataBigScreen/dashboard/components/pageItems/ClassTaskCompletionRank.vue

@@ -0,0 +1,61 @@
+<template>
+  <ChartsContainer title="抽问抽答统计" name="班组任务完成情况">
+    <template #other>
+      <CustomStyleSelect v-model="activeClass" :options="tableData"/>
+    </template>
+    <div ref="content" style="height: 100%;">
+      <el-table v-auto-scroll :data="activeClassDataList" border style="width: 100%" height="100%">
+        <el-table-column prop="userName" label="姓名" width="90" />
+        <el-table-column prop="completedTasks" label="答题进度"  width="90" />
+        <el-table-column prop="avgScore" label="平均分" width="90" />
+        <el-table-column prop="completionRate" label="完成率">
+          <template #default="scope">
+            <el-progress
+              :text-inside="true"
+              :stroke-width="16"
+              :percentage="scope.row.completionRate"
+              style="--el-border-color-lighter: #fff"
+              color="#58A55C"
+            />
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </ChartsContainer>
+</template>
+
+<script setup>
+import { onMounted, ref, computed } from 'vue';
+import ChartsContainer from '../ChartsContainer.vue';
+import CustomStyleSelect from './CustomStyleSelect.vue'
+import { getDailyAllUsersRanking } from '@/api/item/items'
+import { useTimeOut } from './useTimeOut'
+const tableData = ref([])
+const activeClass = ref('')
+
+const activeClassDataList = computed(() => {
+  return (tableData.value.find(item => item.value === activeClass.value) || { dataList: [] }).dataList
+})
+
+useTimeOut(() => {
+  getDailyAllUsersRanking({ pageNum: 1, pageSize: 100 }).then(res => {
+    tableData.value = (res.data.rows || []).reduce((cur, acc) => {
+      const item = cur.find(item => item.value === acc.deptName)
+      if (item) {
+        item.dataList.push(acc)
+      } else {
+        cur.push({
+          value: acc.deptName,
+          label: acc.deptName,
+          dataList: [acc]
+        })
+      }
+      return cur
+    }, [])
+    activeClass.value = tableData.value[0] ? tableData.value[0].value : ''
+  })
+})
+
+</script>
+
+<style lang="scss" scoped></style>

src/views/dataBigScreen/dashboard/components/pageItems/ClassTaskDetails.vue

@@ -0,0 +1,57 @@
+<template>
+  <ChartsContainer name="班组级任务明细">
+    <template #describe>
+      完成情况：{{ `${tableData.notStartedCount || 0}/${tableData.inProgressCount || 0}/${tableData.completedCount || 0}` }}
+    </template>
+    <template #other>
+      <span style="margin-right: 10px; font-size: 14px; white-space: nowrap;">{{ tableData.taskName || '' }} 每日{{ tableData.ruleTypeNum || 1 }}次</span>
+      <CustomStyleSelect :options="selectList" v-model="selectActive"/>
+    </template>
+    <div style="height: 100%;">
+      <el-table  v-auto-scroll :data="tableData.checkLargeScreenInspectionExecuteItemDtoList" border style="width: 100%" height="100%">
+        <el-table-column prop="userName" label="姓名" width="90" />
+        <el-table-column prop="completionPercentage" label="今日完成比例">
+          <template #default="scope">
+            <el-progress
+              :text-inside="true"
+              :stroke-width="16"
+              :percentage="scope.row.completionPercentage"
+              style="--el-border-color-lighter: #fff"
+              color="#58A55C"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column prop="checkOrderCount" label="整改单数" width="90" />
+        <el-table-column prop="rectificationOrderCount" label="不合格项数" width="100" />
+      </el-table>
+    </div>
+  </ChartsContainer>
+</template>
+
+<script setup>
+import ChartsContainer from '../ChartsContainer.vue';
+import CustomStyleSelect from './CustomStyleSelect.vue'
+import { computed, ref } from 'vue';
+
+const props = defineProps({
+  tableData: {
+    type: Array,
+    default: []
+  }
+})
+const selectActive = ref('')
+const selectList = computed(() => { 
+  const options = props.tableData.map(item => {
+    return ({ label: item.taskName, value: item.taskCode })
+  }) 
+  selectActive.value = options[0] ? options[0].value : ''
+  return options || []
+})
+
+const tableData = computed(() => {
+  return props.tableData.find(item => item.taskCode === selectActive.value) || {}
+})
+
+</script>
+
+<style lang="scss" scoped></style>

src/views/dataBigScreen/dashboard/components/pageItems/Collaboration.vue

@@ -0,0 +1,405 @@
+<template>
+  <div class="chartsContainer">
+    <div class="chartsContainer-title">协同配合</div>
+    <div class="chartsContainer-list">
+      <div class="chartsContainer-content">
+        <div class="chartsContainer-content-top">
+          <div class="chartsContainer-content-name">性格特征</div>
+        </div>
+        <div class="chartsContainer-content-content" ref="bubblesRef" />
+      </div>
+
+      <div class="chartsContainer-content-right">
+        <div class="chartsContainer-content-item">
+          <div class="chartsContainer-content-top">
+            <div class="chartsContainer-content-name">工作风格</div>
+          </div>
+          <div class="chartsContainer-content-content" ref="pie" />
+        </div>
+
+        <div class="chartsContainer-content-item">
+          <div class="chartsContainer-content-top">
+            <div class="chartsContainer-content-name">性别人数</div>
+          </div>
+          <div class="chartsContainer-content-content" ref="bar" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { getCollaborationProfile } from '@/api/item/items'
+import { useTimeOut } from './useTimeOut';
+import { useECharts } from '@/hooks/useEcharts.js';
+import { ref, computed, inject } from 'vue'
+
+const personalityData = ref([])
+const params = inject('provideParams')
+const bubblesRef = ref(null)
+const getBubblesOption = computed(() => {
+
+  let maxValue = 1; // 防止数据全都为 0，后面会除以  maxValue，为 0 会出错
+  let valueList = personalityData.value.map((item) => item.value);
+  maxValue = Math.max(maxValue, ...valueList);
+
+  // 设定尺寸的大小
+  let minSymbolSize = 70; // 最小尺寸
+  let symbolSize = 80; // 大小
+  let repulsion = symbolSize * 1.3; // 斥力 为了防止重叠
+
+  // 可以根据数据的多少，动态调整 symbolSize 的大小
+  let valueListLen = valueList.length;
+  if (valueListLen < 3) {
+    symbolSize = 120;
+  } else if (valueListLen < 5) {
+    symbolSize = 100;
+  }
+
+  // 获取要渲染的数据
+  let data = personalityData.value.map((item) => {
+    // 根据比例与最小尺寸，算出每个元素的大小
+    let size = Math.max(symbolSize * (item.value / maxValue), minSymbolSize);
+    return {
+      name: item.name,
+      value: item.value,
+      code: item.code,
+      symbolSize: size,
+      itemStyle: {
+        color: item.type === 'I' ? {
+          type: 'radial',
+          x: 0.4, y: 0.3, r: 1,
+          colorStops: [
+            { offset: 0, color: '#FFD700' },
+            { offset: 0.6, color: '#FFA500' },
+            { offset: 1, color: '#333333' }
+          ]
+        } : {
+          type: 'radial',
+          x: 0.4, y: 0.3, r: 1,
+          colorStops: [
+            { offset: 0, color: '#87CEEB' },
+            { offset: 0.6, color: '#1E90FF' },
+            { offset: 1, color: '#333333' }
+          ]
+        }
+      }
+    };
+  });
+
+  return {
+    xAxis: {
+      show: false,
+    },
+    yAxis: {
+      show: false,
+    },
+    series: [
+      {
+        data,
+        type: "graph", // 关系图
+        layout: "force", // 采用力引导布局
+        force: {
+          repulsion, // 值越大则斥力越大 每个元素间隔越大
+          gravity: 0.11,
+          edgeLength: 2,
+        },
+        roam: false,
+        draggable: true,
+        emphasis: {
+          scale: 1.1,
+          focus: 'series'
+        },
+        // 设置 label
+        label: {
+          show: true,
+          position: "inside",
+          formatter: (params) => {
+            const data = params.data
+            return [ data.code, data.name, `${data.value}人` ].join("\n")
+          },
+          fontSize: 12,
+          color: "#FFF",
+          align: "center",
+          lineHeight: 14,
+          fontWeight: 900
+        },
+        // 设置元素的样式
+        itemStyle: {
+          borderWidth: 1
+        },
+      },
+    ],
+  };
+})
+useECharts(bubblesRef, getBubblesOption)
+
+const pie = ref(null)
+const pieData = ref([])
+const pieALLCount = ref(0)
+const pieOption = computed(() => {
+  return {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      },
+      formatter: function (params) {
+        return `${params[ 0 ].seriesName}: ${params[ 0 ].name}<br/>${params[ 0 ].marker}人数: ${params[ 0 ].value}人 (${Math.round(params[0].value / pieALLCount.value * 1000) / 10}%)`
+      }
+    },
+    grid: {
+      left: '20%',
+      right: '10%',
+      bottom: '10%',
+      top: '5%',
+    },
+    xAxis: {
+      type: 'value',
+      show: true,
+      axisLabel: {
+        color: '#fff',
+      },
+      axisLine: {
+        show: true,
+      },
+      minInterval: 1,
+    },
+    yAxis: {
+      type: 'category',
+      data: pieData.value.map(item => item.name),
+      axisLabel: {
+        color: '#fff',
+        formatter: (value) => {
+          return `${value.substring(0, 2)}  \n${value.substring(2).replace('（', '(').replace('）', ')')}`
+        }
+      }
+    },
+    series: [
+      {
+        name: '工作风格',
+        type: 'bar',
+        stack: 'total',
+        label: {
+          show: true,
+          color: '#fff'
+        },
+        color: '#408CFF',
+        emphasis: {
+          focus: 'series'
+        },
+        data: pieData.value.map(item => item.value),
+      }
+    ]
+  }
+})
+useECharts(pie, pieOption)
+
+const bar = ref(null)
+const sexList = ref([])
+const sexALLCount = ref(0)
+const barOption = computed(() => {
+  return {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      },
+      formatter: function (params) {
+        return `${params[ 0 ].name}<br/>${params[ 0 ].marker}人数: ${params[ 0 ].value}人 (${Math.round(params[0].value / sexALLCount.value * 1000) / 10}%)`
+      }
+    },
+    grid: {
+      left: '20%',
+      right: '10%',
+      bottom: '10%',
+      top: '5%',
+    },
+    xAxis: {
+      type: 'value',
+      show: true,
+      axisLabel: {
+        color: '#fff'
+      },
+      axisLine: {
+        show: true,
+        color: '#fff'
+      },
+      minInterval: 1,
+    },
+    yAxis: {
+      type: 'category',
+      data: sexList.value.map(item => item.name),
+      axisLabel: {
+        color: '#fff'
+      }
+    },
+    series: [ {
+      name: '人数',
+      type: 'bar',
+      stack: 'total',
+      label: {
+        show: true,
+        color: '#fff'
+      },
+      color: '#408CFF',
+      emphasis: {
+        focus: 'series'
+      },
+      data: sexList.value.map(item => item.value)
+    } ]
+  }
+})
+useECharts(bar, barOption)
+
+useTimeOut(() => {
+  getCollaborationProfile({ deptId: params.value.deptId }).then(res => {
+    let pieALLCountNumber = 0
+    let sexALLCountNumber = 0
+    pieData.value = (res.data || { workingStyleList: [] }).workingStyleList.map(item => {
+      pieALLCountNumber += item.count
+      return { value: item.count, name: item.name }
+    })
+    pieALLCount.value = pieALLCountNumber
+    sexList.value = (res.data || { sexList: [] }).sexList.map(item => {
+      sexALLCountNumber += item.count
+      return { name: item.name, value: item.count }
+    })
+    sexALLCount.value = sexALLCountNumber
+    personalityData.value = (res.data || { characterCharacteristicsList: [] }).characterCharacteristicsList.map(item => {
+      return {
+        name: item.name.substring(4),
+        value: item.count,
+        code: item.code,
+        type: item.code.substring(0, 1)
+      }
+    })
+  })
+}, [ params ])
+
+</script>
+
+<style lang="scss" scoped>
+.chartsContainer {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background: linear-gradient(to bottom, rgba(8, 97, 117, 0) 0%, #13a2d6 200%);
+  border-radius: 4px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  .chartsContainer-title {
+    height: 42px;
+    width: 100%;
+    background: linear-gradient(to right, #004387 0%, #090B18 100%);
+    border-left: 1px solid #1892CE;
+    line-height: 42px;
+    color: #fff;
+    font-weight: 900;
+    font-size: 20px;
+    text-indent: 1em;
+  }
+
+  .chartsContainer-list {
+    padding: 20px 15px 10px;
+    box-sizing: border-box;
+    display: flex;
+    flex: 1;
+    column-gap: 10px;
+    overflow: hidden;
+  }
+
+  .chartsContainer-content {
+    display: flex;
+    flex-direction: column;
+    row-gap: 10px;
+    flex: 1;
+
+    .chartsContainer-content-top {
+      display: flex;
+      align-items: center;
+      color: #78DEF5;
+
+      .chartsContainer-content-name {
+        color: #fff;
+        font-weight: bold;
+        font-size: 16px;
+        display: flex;
+        align-items: center;
+
+        &::before {
+          content: '';
+          display: inline-block;
+          border-left: 9px solid #1CB6FF;
+          border-top: 8px solid transparent;
+          border-right: 9px solid transparent;
+          border-bottom: 8px solid transparent;
+        }
+      }
+    }
+
+    .chartsContainer-content-describe {
+      color: #78DEF5;
+      font-size: 12px;
+      font-weight: bold;
+      display: flex;
+      align-items: center;
+    }
+
+    .chartsContainer-content-content {
+      flex: 1;
+      width: 100%;
+    }
+  }
+
+  .chartsContainer-content-right {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    row-gap: 15px;
+    .chartsContainer-content-item {
+      display: flex;
+      flex-direction: column;
+      row-gap: 10px;
+      flex: 1;
+      .chartsContainer-content-top {
+        display: flex;
+        align-items: center;
+        color: #78DEF5;
+
+        .chartsContainer-content-name {
+          color: #fff;
+          font-weight: bold;
+          font-size: 16px;
+          display: flex;
+          align-items: center;
+
+          &::before {
+            content: '';
+            display: inline-block;
+            border-left: 9px solid #1CB6FF;
+            border-top: 8px solid transparent;
+            border-right: 9px solid transparent;
+            border-bottom: 8px solid transparent;
+          }
+        }
+      }
+
+      .chartsContainer-content-describe {
+        color: #78DEF5;
+        font-size: 12px;
+        font-weight: bold;
+        display: flex;
+        align-items: center;
+      }
+
+      .chartsContainer-content-content {
+        flex: 1;
+        width: 100%;
+      }
+    }
+  }
+}
+</style>

src/views/dataBigScreen/dashboard/components/pageItems/CollaborationPersonal.vue

@@ -0,0 +1,192 @@
+<template>
+  <div class="chartsContainer">
+    <div class="chartsContainer-title">协同配合</div>
+    <div class="chartsContainer-list">
+      <div class="chartsContainer-content">
+        <div class="chartsContainer-content-top">
+          <div class="chartsContainer-content-name">团队配合</div>
+        </div>
+        <div class="chartsContainer-content-content" style="overflow-y: auto;">
+          <div v-if=" pageData.teamCooperationList " class="content-row-item"
+            v-for=" item in pageData.teamCooperationList ">
+            {{ item.nickName }}
+          </div>
+        </div>
+      </div>
+
+      <div class="chartsContainer-content">
+        <div class="chartsContainer-content-top">
+          <div class="chartsContainer-content-name">性格特征</div>
+        </div>
+        <div class="chartsContainer-content-content">
+          <div class="item-title">{{ getLabel( pageData.characterCharacteristics, sys_user_character_characteristics ) }}
+          </div>
+          <div class="item-img">
+            <img :src="getMbtjImgPath( pageData.characterCharacteristics )" alt="">
+          </div>
+        </div>
+      </div>
+
+      <div class="chartsContainer-content">
+        <div class="chartsContainer-content-top">
+          <div class="chartsContainer-content-name">性别</div>
+        </div>
+        <div class="chartsContainer-content-content">
+          <div class="item-title">{{ getLabel( pageData.sex, sys_user_sex ) }}</div>
+          <div class="item-img">
+            <img v-if=" getLabel( pageData.sex, sys_user_sex ) === '男' " :src="sex1" alt="">
+            <img v-if=" getLabel( pageData.sex, sys_user_sex ) === '女' " :src="sex2" alt="">
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { getUserInfoById } from '@/api/item/items'
+import { useTimeOut } from './useTimeOut';
+import { ref, computed, inject } from 'vue'
+import { useDict } from '@/utils/dict'
+import sex1 from '@/assets/images/sex1.png'
+import sex2 from '@/assets/images/sex2.png'
+import { getMbtjImgPath } from '@/assets/images/mbtj/load.js'
+const pageData = ref({
+  teamCooperationList: []
+})
+const params = inject('provideParams')
+
+const {
+  sys_user_character_characteristics,
+  sys_user_sex
+} = useDict('sys_user_character_characteristics', 'sys_user_sex')
+
+const getLabel = (value, list = []) => {
+  const item = list.find(item => item.value.includes(value)) || {}
+  return item.label
+}
+useTimeOut(() => {
+  params.value.deptId && getUserInfoById(params.value.deptId).then(res => {
+    pageData.value = res.data || { teamCooperationList: [] }
+  })
+}, [ params ])
+
+</script>
+
+<style lang="scss" scoped>
+.chartsContainer {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background: linear-gradient(to bottom, rgba(8, 97, 117, 0) 0%, #13a2d6 200%);
+  border-radius: 4px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  .chartsContainer-title {
+    height: 42px;
+    width: 100%;
+    background: linear-gradient(to right, #004387 0%, #090B18 100%);
+    border-left: 1px solid #1892CE;
+    line-height: 42px;
+    color: #fff;
+    font-weight: 900;
+    font-size: 20px;
+    text-indent: 1em;
+  }
+
+  .chartsContainer-list {
+    padding: 20px 15px 10px;
+    box-sizing: border-box;
+    display: flex;
+    flex: 1;
+    overflow: hidden;
+    column-gap: 10px;
+  }
+
+  .chartsContainer-content {
+    display: flex;
+    flex-direction: column;
+    row-gap: 10px;
+    flex: 1;
+
+    .chartsContainer-content-top {
+      display: flex;
+      align-items: center;
+      color: #78DEF5;
+
+      .chartsContainer-content-name {
+        color: #fff;
+        font-weight: bold;
+        font-size: 16px;
+        display: flex;
+        align-items: center;
+
+        &::before {
+          content: '';
+          display: inline-block;
+          border-left: 9px solid #1CB6FF;
+          border-top: 8px solid transparent;
+          border-right: 9px solid transparent;
+          border-bottom: 8px solid transparent;
+        }
+      }
+    }
+
+    .chartsContainer-content-describe {
+      color: #78DEF5;
+      font-size: 12px;
+      font-weight: bold;
+      display: flex;
+      align-items: center;
+    }
+
+    .chartsContainer-content-content {
+      flex: 1;
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      row-gap: 10px;
+
+      .item-title {
+        color: #fff;
+        font-weight: bold;
+        font-size: 16px;
+        text-align: center;
+        margin-top: 10px;
+      }
+
+      .item-img {
+        width: 80%;
+        margin: auto;
+        height: calc(100% - 40px);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        img {
+          max-width: 100%;
+          max-height: 80%;
+        }
+      }
+
+      .content-row-item {
+        max-width: 10em;
+        background: url('../../../../../assets/images/itemBg.png') no-repeat;
+        background-size: 100% 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: #fff;
+        font-size: 16px;
+        border-radius: 5px;
+        padding: 0 15px;
+        font-weight: bold;
+        height: 44px;
+        white-space: nowrap;
+      }
+    }
+  }
+}
+</style>

src/views/dataBigScreen/dashboard/components/pageItems/CustomStyleSegmented.vue

@@ -0,0 +1,29 @@
+<template>
+  <el-segmented
+    v-model="value"
+    :options="options"
+    v-bind="$attrs"
+    style="
+      --el-segmented-bg-color: #143D57;
+      --el-segmented-item-selected-bg-color: #1CA7C8;
+      --el-segmented-color: #fff;
+      --el-segmented-item-hover-color: #fff;
+      --el-segmented-item-active-bg-color: #0D507A;
+      --el-segmented-item-hover-bg-color: #0D507A;" 
+  />
+</template>
+
+<script setup>
+const porps = defineProps({
+  options: {
+    type: Array,
+    default: [ '在岗', '空闲' ]
+  }
+})
+
+const value = defineModel()
+
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/dataBigScreen/dashboard/components/pageItems/CustomStyleSelect.vue

@@ -0,0 +1,105 @@
+<template>
+  <el-cascader class="custom-select" v-if="type === 'tree'" v-model="value" :options="options"
+    :props="{ checkStrictly: true, emitPath: false, ...propsConfig }" clearable @change="cascaderChange" style="
+      --el-fill-color-blank: #0D507A;
+      --el-border-color: #0D507A;
+      --el-select-border-color-hover: #1CA7C8;
+      --el-input-text-color: #fff;
+      --el-input-icon-color: #fff;
+      --el-text-color-regular: #fff;
+    " />
+  <el-select v-else class="custom-select" v-model="value" placeholder="请选择" @change="selectChange" clearable style="
+      min-width: 130px;
+      --el-fill-color-blank: #0D507A;
+      --el-border-color: #0D507A;
+      --el-select-border-color-hover: #1CA7C8;
+      --el-input-text-color: #fff;
+      --el-input-icon-color: #fff;
+      --el-text-color-regular: #fff;
+    ">
+    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+  </el-select>
+
+</template>
+
+<script setup>
+import { onMounted, onUnmounted } from 'vue'
+const props = defineProps({
+  options: {
+    type: Array,
+    default: []
+  },
+  type: {
+    type: String,
+    default: ''
+  },
+  propsConfig: {
+    type: Object,
+    default: {}
+  }
+})
+const emit = defineEmits(['change'])
+const value = defineModel()
+
+const selectChange = (value) => {
+  const selectItem = props.options.find(item => item.value === value) || {}
+  emit('change', selectItem)
+}
+
+const cascaderChange = (value) => {
+  if (value) {
+    emit('change', { value: value })
+  }
+
+}
+
+</script>
+
+
+<style lang="scss" scoped>
+.custom-select {
+  .el-select__wrapper {
+    line-height: var(--el-input-height, 24px);
+    min-height: var(--el-input-height, 32px);
+  }
+}
+
+/* 下拉框整体样式 */
+.custom-select .el-select-dropdown {
+  background-color: #0D507A !important;
+  border: 1px solid #0D507A !important;
+}
+
+/* 选项列表样式 */
+.custom-select .el-select-dropdown__list {
+  background-color: #0D507A !important;
+}
+
+/* 单个选项样式 */
+.custom-select .el-select-dropdown__item {
+  color: #D9D9D9 !important;
+  background-color: #0D507A !important;
+}
+
+/* 选项hover状态 */
+.custom-select .el-select-dropdown__item:hover {
+  background-color: #0D507A !important;
+  color: #fff !important;
+}
+
+/* 选中的选项样式 */
+.custom-select .el-select-dropdown__item.selected {
+  background-color: #1CA7C8 !important;
+  color: #fff !important;
+}
+
+/* 选项禁用状态 */
+.custom-select .el-select-dropdown__item.is-disabled {
+  color: #666 !important;
+}
+
+/* 下拉框箭头图标颜色 */
+.custom-select .el-select .el-input .el-select__caret {
+  color: #D9D9D9 !important;
+}
+</style>

src/views/dataBigScreen/dashboard/components/pageItems/DataViewLeft.vue

@@ -0,0 +1,31 @@
+<template>
+  <StationTaskDetails :table-data="viewData.STATION_LEVEL" />
+  <SectionTaskDetails :table-data="viewData.DEPARTMENT_LEVEL" />
+  <ClassTaskDetails :table-data="viewData.TEAM_LEVEL" />
+</template>
+
+<script setup>
+import { reactive } from 'vue';
+import {
+  StationTaskDetails,
+  SectionTaskDetails,
+  ClassTaskDetails
+} from './index';
+import { getExecutionStatusTotal } from '@/api/item/items'
+import { useTimeOut } from './useTimeOut'
+const viewData = reactive({
+  STATION_LEVEL: [], // 站级
+  TEAM_LEVEL: [], // 班组级
+  DEPARTMENT_LEVEL: [], // 科级
+})
+useTimeOut(() => {
+  getExecutionStatusTotal().then(res => {
+    viewData.STATION_LEVEL = (res.data || []).filter(item => item.checkLevel === 'STATION_LEVEL')
+    viewData.TEAM_LEVEL = (res.data || []).filter(item => item.checkLevel === 'TEAM_LEVEL')
+    viewData.DEPARTMENT_LEVEL = (res.data || []).filter(item => item.checkLevel === 'DEPARTMENT_LEVEL')
+  })
+})
+
+</script>
+
+<style lang="scss" scoped></style>

src/views/dataBigScreen/dashboard/components/pageItems/DepartmentInfo.vue

@@ -0,0 +1,67 @@
+<template>
+  <ChartsContainer :title="title">
+    <div ref="content" style="height: 100%;">
+      <el-table v-auto-scroll :data="tableData" border style="width: 100%" height="100%">
+        <el-table-column v-if="type === 'team'" prop="name" label="姓名" min-width="80" />
+        <el-table-column v-if="type === 'department'" prop="name" label="班组" min-width="80" />
+        <el-table-column v-if="type === 'station'" label="大队" prop="name"  min-width="80" />
+        <el-table-column prop="qualificationLevel" label="资质等级" v-if="type === 'team'">
+          <template #default="scope">
+            {{ getLabel(scope.row.qualificationLevel) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="qualificationLevel" label="资质等级高级" v-else />
+        <el-table-column prop="avgWorkingDays" label="人均出勤天数" min-width="120"/>
+        <el-table-column prop="avgWorkingHours" label="人均上岗时长" min-width="120" />
+        <el-table-column prop="avgSeizureCount" label="人均查获数量" min-width="120" />
+        <el-table-column prop="checkCount" label="人均巡检问题数" min-width="120" />
+        <el-table-column prop="testScore" label="测试平均分" min-width="100"/>
+      </el-table>
+    </div>
+  </ChartsContainer>
+</template>
+
+<script setup>
+import ChartsContainer from '../ChartsContainer.vue';
+import { inject, ref, computed } from 'vue';
+import { getDetailProfile } from '@/api/item/items'
+import { useTimeOut } from '../pageItems/useTimeOut'
+const props = defineProps({
+  type: {
+    type: String,
+    default: 'station' // team, department, station
+  }
+})
+
+const title = computed(() => {
+  if (props.type === 'team') {
+    return '人员明细'
+  } else if (props.type === 'department') {
+    return '班组明细'
+  } else {
+    return '大队明细'
+  }
+})
+
+const qualificationLevel = [
+  { value: ['LEVEL_ONE', 0, '0', '一'], label: '一级' },
+  { value: ['LEVEL_TWO', 1, '1', '二'], label: '二级' },
+  { value: ['LEVEL_THREE', 2, '2', '三'], label: '三级' },
+  { value: ['LEVEL_FOUR', 3, '3', '四'], label: '四级' },
+  { value: ['LEVEL_FIVE', 4, '4', '五'], label: '五级' },
+]
+const getLabel = (value) => {
+  const item = qualificationLevel.find(item => item.value.includes(value)) || {}
+  return item.label
+}
+const tableData = ref([])
+const params = inject('provideParams')
+useTimeOut(() => {
+  params.value.deptId  && getDetailProfile({ deptId: params.value.deptId }).then(res => {
+    tableData.value = res.data
+  })
+}, [params])
+
+</script>
+
+<style lang="scss" scoped></style>

src/views/dataBigScreen/dashboard/components/pageItems/DepartmentalTaskCompletionRank.vue

@@ -0,0 +1,77 @@
+<template>
+  <ChartsContainer name="班组完成排行(Top10)">
+    <div ref="content" style="height: 100%;">
+    </div>
+  </ChartsContainer>
+</template>
+
+<script setup>
+import { onMounted, computed } from 'vue';
+import ChartsContainer from '../ChartsContainer.vue';
+import { useECharts } from '@/hooks/useEcharts.js';
+import { deptRanking } from '@/api/item/items'
+import { useTimeOut } from './useTimeOut'
+const content = ref(null)
+const datalist = ref([])
+const setChartsOptions = computed(() =>{
+  return {
+    backgroundColor: 'transparent',
+    grid: {
+      top: 50,
+      right: 20,
+      bottom: 30,
+      left: 40
+    },
+    legend: {
+      data: [ '已完成', '总任务数' ],
+      right: 'center',
+      top: 10,
+      textStyle: { color: '#fff' }
+    },
+    xAxis: {
+      type: 'category',
+      data: datalist.value.map(item => item.deptName),
+      axisLine: { lineStyle: { color: '#fff' } },
+      axisLabel: { color: '#fff' }
+    },
+    yAxis: {
+      type: 'value',
+      min: 0,
+      interval: 10,
+      max: Math.ceil(Math.max(datalist.value.map(item => item.totalTasks)) / 0.8),
+      axisLine: { lineStyle: { color: '#fff' } },
+      axisLabel: { color: '#fff' },
+      splitLine: { lineStyle: { color: '#fff' } }
+    },
+    tooltip: {
+      trigger: 'axis'
+    },
+    series: [
+      {
+        name: '已完成',
+        type: 'bar',
+        data: datalist.value.map(item => item.completedTasks),
+        itemStyle: { color: '#4CAF50' },
+        label: { show: true, position: 'top', color: '#fff' }
+      },
+      {
+        name: '总任务数',
+        type: 'bar',
+        data: datalist.value.map(item => item.totalTasks),
+        itemStyle: { color: '#2196F3' },
+        label: { show: true, position: 'top', color: '#fff' }
+      }
+    ]
+  }
+})
+
+useECharts(content, setChartsOptions);
+useTimeOut(() => {
+  deptRanking().then(res => {
+    datalist.value = res.data
+  })
+})
+
+</script>
+
+<style lang="scss" scoped></style>

src/views/dataBigScreen/dashboard/components/pageItems/HomePageOverview.vue

@@ -0,0 +1,658 @@
+<template>
+  <ChartsContainer title="整体情况">
+    <template #title>
+      <div class="download-section">
+        <el-button type="primary" size="small" @click="handleDownloadReport" :loading="downloadLoading">
+          下载整体报表
+        </el-button>
+      </div>
+    </template>
+
+    <div class="overview-content">
+      <!-- 选择区域 -->
+      <div class="selection-section">
+        <div class="selection-row" v-for="(row, rowIndex) in selectionRows" :key="rowIndex">
+          <div v-for="(item, index) in row" :key="index" class="selection-item">
+
+            <CustomStyleSelect type="tree" :propsConfig="{ value: 'id', showPrefix: false }" v-model="item.selectedId"
+              :options="departments" @change="handleSelectionChange(rowIndex * 2 + index, $event)" />
+          </div>
+        </div>
+      </div>
+
+      <!-- 雷达图 -->
+      <div class="radar-chart" ref="radarChartRef"></div>
+
+      <!-- 遍历展示的数据 -->
+      <div class="data-list" v-if="dataItems.length > 0">
+        <div class="data-item" v-for="(item, index) in dataItems" :key="index">
+          <div class="data-title" :style="{ color: '#70D3EE' }">{{ item.title }}</div>
+          <div class="data-values">
+            <div class="value-label" v-for="(data, dataIndex) in item.list" :key="dataIndex">
+              <div class="value">{{ data.value }}</div>
+              <div class="label">{{ data.label }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+
+  </ChartsContainer>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, watch, computed } from 'vue'
+import * as echarts from 'echarts'
+import ChartsContainer from '../ChartsContainer.vue'
+import CustomStyleSelect from './CustomStyleSelect.vue'
+import { getDeptUserTree } from '@/api/item/items'
+import { getHomePageDetail, getHomeReportDownload } from '@/api/largeScreen/largeScreen'
+
+const radarChartRef = ref(null)
+let radarChart = null
+
+// 下载相关变量
+const downloadLoading = ref(false)
+
+// 定义props，从父组件接收数据
+const props = defineProps({
+  timeRange: {
+    type: String,
+    default: 'year'
+  },
+  startDate: {
+    type: String,
+    default: ''
+  },
+  endDate: {
+    type: String,
+    default: ''
+  },
+  selectedRole: {
+    type: String,
+    default: 'individual'
+  }
+})
+
+// 遍历展示的数据
+const dataItems = ref([])
+
+// 选择相关数据
+const selectionItems = ref([
+
+])
+
+// 计算属性，将选择项分成两行，每行两个
+const selectionRows = computed(() => {
+  const rows = []
+  for (let i = 0; i < selectionItems.value.length; i += 2) {
+    rows.push(selectionItems.value.slice(i, i + 2))
+  }
+  return rows
+})
+
+const departments = ref([])
+
+// 计算日期范围（移植自HomePage.vue）
+const calculateDateRange = (timeRange, customStartDate, customEndDate) => {
+  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':
+      startDate.setDate(yesterday.getDate() - 6)
+      break
+    case 'month':
+      startDate.setDate(yesterday.getDate() - 29)
+      break
+    case 'quarter':
+      startDate.setDate(yesterday.getDate() - 89)
+      break
+    case 'halfYear':
+      startDate.setDate(yesterday.getDate() - 179)
+      break
+    case 'year':
+      startDate.setDate(yesterday.getDate() - 364)
+      break
+    case 'custom':
+      if (customStartDate && customEndDate) {
+        startDate = new Date(customStartDate)
+        endDate = new Date(customEndDate)
+      }
+      break
+    default:
+      startDate.setDate(yesterday.getDate() - 364)
+  }
+
+  return {
+    startDate: formatDateForInput(startDate),
+    endDate: formatDateForInput(endDate)
+  }
+}
+
+// 格式化日期为输入框格式
+const 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}`
+}
+
+// 监听时间参数变化
+watch(() => [props.timeRange, props.startDate, props.endDate, props.selectedRole], () => {
+  // 当时间参数变化时，重新获取数据
+  if (selectionItems.value.some(item => item.selectedId)) {
+    fetchHomePageDetailData()
+  }
+}, { immediate: true })
+
+// 更新雷达图数据
+const updateChartWithData = (data) => {
+  if (!radarChartRef.value) {
+    console.warn('雷达图容器未找到')
+    return
+  }
+
+  if (!radarChart) {
+    radarChart = echarts.init(radarChartRef.value)
+  }
+
+  // 根据接口数据更新雷达图
+  if (data && data.length > 0) {
+    // 使用Graph后缀的数据来显示雷达图
+    const seriesData = data.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: '#fff'
+        },
+        itemWidth: 12,
+        itemHeight: 12,
+        data: seriesData.map(item => item.name)
+      },
+      radar: {
+        shape: 'circle',
+        indicator: indicators,
+        splitNumber: 4,
+        center: ['50%', '45%'],
+        radius: '65%',
+        axisName: {
+          color: '#fff',
+          fontSize: 12
+        },
+        splitLine: {
+          lineStyle: {
+            color: ['rgba(255, 255, 255, 0.3)', 'rgba(255, 255, 255, 0.2)', 'rgba(255, 255, 255, 0.1)']
+          }
+        },
+        splitArea: {
+          show: true,
+          areaStyle: {
+            color: ['rgba(255, 255, 255, 0.1)', 'rgba(255, 255, 255, 0.05)']
+          }
+        },
+        axisLine: {
+          lineStyle: {
+            color: 'rgba(255, 255, 255, 0.5)'
+          }
+        }
+      },
+      series: [
+        {
+          name: '能力对比',
+          type: 'radar',
+          data: seriesData.map((item, index) => ({
+            value: item.value,
+            name: item.name,
+            areaStyle: {
+              color: getChartColor(index, 0.3)
+            },
+            lineStyle: {
+              color: getChartColor(index),
+              width: 2
+            },
+            itemStyle: {
+              color: getChartColor(index)
+            }
+          }))
+        }
+      ],
+      tooltip: {
+        show: false,
+        // trigger: 'item',
+        // formatter: function (params) {
+        //   const data = params.data
+        //   const name = params.name
+        //   const value = params.value
+
+        //   let tooltipHtml = `<div style="font-weight: bold; margin-bottom: 8px;">${name}</div>`
+
+        //   const labels = ['查获数量', '在岗时长', '巡检合格率', '抽问抽答', '培训答题']
+
+        //   value.forEach((val, index) => {
+        //     tooltipHtml += `<div style="display: flex; justify-content: space-between; margin: 4px 0;">
+        //         <span>${labels[index]}:</span>
+        //         <span style="font-weight: bold;">${val}</span>
+        //       </div>`
+        //   })
+
+        //   return tooltipHtml
+        // }
+      }
+    }
+
+    radarChart.setOption(option)
+  }
+}
+
+// 获取图表颜色
+const 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
+}
+// 获取部门和人员树数据
+const fetchDepartments = async () => {
+
+  try {
+    const res = await getDeptUserTree()
+    departments.value = res.data
+     
+    // 数据加载完成后，查找deptType为BRIGADE的对象
+    if (res.data && res.data.length > 0) {
+      // 查找deptType为BRIGADE的对象
+      const findBrigadeItems = (items) => {
+        const brigadeItems = []
+        for (const item of items) {
+          if (item.deptType === 'BRIGADE') {
+            brigadeItems.push(item)
+          }
+          if (item.children && item.children.length > 0) {
+            const childBrigadeItems = findBrigadeItems(item.children)
+            brigadeItems.push(...childBrigadeItems)
+          }
+        }
+        return brigadeItems
+      }
+
+      const brigadeItems = findBrigadeItems(res.data)
+      
+      // 设置前4个BRIGADE对象作为默认选项
+      if (brigadeItems.length > 0) {
+        for (let i = 0; i < Math.min(brigadeItems.length, 4); i++) {
+          selectionItems.value[i] = {
+            ...brigadeItems[i],
+            selectedId: brigadeItems[i].id,
+            selectedName: brigadeItems[i].label || brigadeItems[i].name
+          }
+        }
+        // 触发数据请求
+        fetchHomePageDetailData()
+      }
+    }
+  } catch (error) {
+    console.error('获取部门和人员树失败:', error)
+  }
+}
+
+// 选择变化处理
+const handleSelectionChange = (index, selectedItem) => {
+  console.log(selectedItem, "selectedItem")
+  if (selectedItem && selectedItem.value) {
+    // 查找选中的部门或人员信息
+    const findSelectedItem = (items, targetId) => {
+      for (const item of items) {
+        if (item.id === targetId) {
+          return item
+        }
+        if (item.children && item.children.length > 0) {
+          const found = findSelectedItem(item.children, targetId)
+          if (found) return found
+        }
+      }
+      return null
+    }
+
+    const itemInfo = findSelectedItem(departments.value, selectedItem.value)
+    if (itemInfo) {
+      selectionItems.value[index] = {
+        ...selectionItems.value[index],
+        selectedId: selectedItem.value,
+        selectedName: itemInfo.label || itemInfo.name
+      }
+    }
+  } else {
+    // 清空选择
+    selectionItems.value[index] = {
+      ...selectionItems.value[index],
+      selectedId: '',
+      selectedName: ''
+    }
+  }
+  // 触发数据请求
+  fetchHomePageDetailData()
+}
+
+// 获取首页详情数据
+const fetchHomePageDetailData = async () => {
+  // 构建参数数组
+  const params = []
+
+  // 计算开始和结束日期
+  let startDate = props.startDate
+  let endDate = props.endDate
+
+  // 如果使用预设时间范围，计算日期
+  if (props.timeRange !== 'custom' && (!startDate || !endDate)) {
+    const dateRange = calculateDateRange(props.timeRange)
+    startDate = dateRange.startDate
+    endDate = dateRange.endDate
+  }
+
+  for (const item of selectionItems.value) {
+    if (item.selectedId) {
+      // 查找选中的项目类型
+      const findItemType = (items, targetId) => {
+        for (const item of items) {
+          if (item.id === targetId) {
+            return item.nodeType === 'user' ? 'USER' : 'DEPT'
+          }
+          if (item.children && item.children.length > 0) {
+            const type = findItemType(item.children, targetId)
+            if (type) return type
+          }
+        }
+
+      }
+
+
+      const type = findItemType(departments.value, item.selectedId)
+
+      params.push({
+        startDate: startDate,
+        endDate: endDate,
+        type: type,
+        id: item.selectedId,
+        name: item.selectedName,
+        dataSource: props.selectedRole
+      })
+    }
+  }
+  console.log(params)
+  if (params.length > 0) {
+    try {
+      const res = await getHomePageDetail(params)
+      console.log('首页详情数据:', res)
+      // 处理响应数据，更新图表和数据显示
+      handleHomePageDetailResponse(res)
+    } catch (error) {
+      console.error('获取首页详情数据失败:', error)
+    }
+  } else {
+    // 如果没有选择任何项，清空显示的数据
+    dataItems.value = []
+    if (radarChart) {
+      radarChart.clear()
+    }
+  }
+}
+
+// 处理首页详情响应数据
+const handleHomePageDetailResponse = (res) => {
+  if (res.data && Array.isArray(res.data)) {
+    // 更新数据展示
+    dataItems.value = res.data.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 }
+        ]
+      }
+    })
+
+    // 更新雷达图数据
+    updateChartWithData(res.data)
+  }
+}
+
+const handleResize = () => {
+  if (radarChart) {
+    radarChart.resize()
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('resize', handleResize)
+  // 获取部门和人员树数据
+  fetchDepartments()
+})
+
+onUnmounted(() => {
+  if (radarChart) {
+    radarChart.dispose()
+  }
+  window.removeEventListener('resize', handleResize)
+})
+
+// 下载整体报表
+const handleDownloadReport = async () => {
+  try {
+    downloadLoading.value = true
+
+    // 构建下载参数
+    const downloadParams = {
+      startDate: props.startDate,
+      endDate: props.endDate,
+    }
+
+    // 调用下载接口
+    const response = await getHomeReportDownload(downloadParams)
+
+    // 处理下载响应 - 使用项目标准的blob处理方式
+    if (response) {
+      // 生成文件名
+      const fileName = `整体报表_${new Date().toISOString().slice(0, 10)}.xlsx`
+
+      // 使用file-saver的saveAs函数下载文件
+      const { saveAs } = await import('file-saver')
+      saveAs(response, fileName)
+    }
+
+  } catch (error) {
+    console.error('下载报表失败:', error)
+    // 这里可以添加错误提示
+  } finally {
+    downloadLoading.value = false
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.download-section {
+  display: flex;
+  justify-content: flex-end;
+  padding: 0 10px;
+
+
+  .el-button {
+    background: linear-gradient(135deg, #1CB6FF 0%, #0A8CD9 100%);
+    border: none;
+    border-radius: 4px;
+    font-size: 12px;
+    padding: 6px 12px;
+
+    &:hover {
+      background: linear-gradient(135deg, #0A8CD9 0%, #1CB6FF 100%);
+    }
+  }
+}
+
+.overview-content {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+
+  .selection-section {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    margin-bottom: 15px;
+
+    .selection-row {
+      display: flex;
+      gap: 15px;
+
+      .selection-item {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+
+        .selection-label {
+          font-size: 14px;
+          color: #70D3EE;
+          font-weight: bold;
+          text-align: center;
+        }
+
+        :deep(.custom-select) {
+          .el-input__wrapper {
+            background: #0C4F7A;
+            border: none;
+            box-shadow: none;
+
+            .el-input__inner {
+              color: #fff;
+              font-size: 12px;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .radar-chart {
+    height: 350px;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .data-list {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    overflow-y: auto;
+
+    .data-item {
+
+      background: rgba(255, 255, 255, 0.05);
+      border-radius: 6px;
+      padding: 11px 25px;
+      background: url('../../../../../assets/images/cardBg.png') no-repeat !important;
+      background-size: 100% 105% !important;
+
+
+      .data-title {
+        font-size: 16px;
+        font-weight: bold;
+        margin-bottom: 10px;
+        color: #70D3EE;
+      }
+
+      .data-values {
+        display: flex;
+        justify-content: space-around;
+
+        .value-label {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+
+          .value {
+            font-size: 17px;
+            // font-weight: bold;
+            color: #70D3EE;
+
+            margin-bottom: 2px;
+          }
+
+          .label {
+            font-size: 13px;
+            color: rgba(255, 255, 255, 0.7);
+          }
+        }
+      }
+    }
+  }
+}
+
+
+
+
+
+// /* 响应式设计 */
+// @media (max-width: 1280px) {
+//   .overview-content {
+//     .data-list {
+//       flex-wrap: wrap;
+
+//       .data-item {
+//         flex: 0 0 calc(50% - 5px);
+//         min-width: 120px;
+//       }
+//     }
+//   }
+// }
+
+// @media (max-width: 768px) {
+//   .overview-content {
+//     .data-list {
+//       .data-item {
+//         flex: 0 0 100%;
+//       }
+//     }
+//   }
+// }</style>

src/views/dataBigScreen/dashboard/components/pageItems/HomePageStats.vue

@@ -0,0 +1,543 @@
+<template>
+  <div class="stats-section">
+    <div v-for="(item, index) in props.typeDetailData" :key="index" class="stats-item">
+      <ChartsContainer :title="item.title">
+        <!-- 主要内容区域 -->
+        <div class="item-content">
+          <!-- 数量统计区域和问题整改区域 -->
+          <div class="top-section">
+            <!-- 数量统计区域 -->
+            <div class="stat-section">
+              <div class="stat-header">
+                <div class="stat-title">{{ item.statTitle }}</div>
+              </div>
+
+              <div class="data-grid">
+                <div v-for="(dataItem, dataIndex) in item.dataItems" :key="dataIndex" class="data-item">
+                  <div class="data-value">
+                    <img v-if="dataItem.isImage" :src="dataItem.value" class="data-image" />
+                    <span v-else :style="{ color: dataItem.color || '#fff' }">{{ 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>
+
+          <!-- 排名区域 -->
+          <div class="rank-section" v-if="item.rankList && 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">
+                <!-- <div class="progress-bar1" :style="{ width: rank.percentage + '%' }"></div> -->
+                <el-progress :percentage="Number(rank.percentage || 0)" :show-text="false" :stroke-width="10"
+                  color="#F9B83A" />
+                <div class="rank-info">
+                  <span :style="{ color: rank.type === 'station' ? '#ED9E3E' : '#5580F7' }">{{ rank.current }}</span>/{{
+                    rank.total }}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 大队和班组合格率排行 -->
+          <div class="rank-section">
+            <!-- 大队排名区域 -->
+            <div class="department-rank-container">
+              <div class="custom-title">
+                <div class="arrow-icon"></div>
+                <span>{{ item.title === '查获上报' ? '大队查获总数排名' : item.title == '抽问抽答' ? '大队正确率排名' : '大队合格率排名' }}</span>
+              </div>
+              <div v-for="(dept, index) in item.departmentRank" :key="'dept-' + index" class="rank-item">
+                <div class="rank-label">{{ dept.name }}</div>
+                <div class="rank-progress">
+                  <el-progress
+                    :percentage="item.title !== '查获上报' ? Number(dept.passRate || 0) : getPercentage(dept.passRate, item.departmentRank)"
+                    :show-text="false" :stroke-width="10" color="#F9B83A" />
+                  <div class="rank-info">
+                    <span style="color: #999999">{{ dept.passRate || 0 }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- 班组合格率排行 -->
+            <div class="team-rank-section">
+              <div class="rank-header">
+                <div class="rank-header-title">
+                  <div class="arrow-icon"></div>
+                  <div class="rank-title">{{ item.title === '查获上报' ? '班组查获总数排名' : item.title == '抽问抽答' ? '班组正确率排名' :
+                    '班组合格率排名' }}</div>
+                </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>
+
+              <!-- 班组排名显示 -->
+              <div class="team-rank-container">
+                <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">
+                      <el-progress
+                        :percentage="item.title !== '查获上报' ? Number(team.passRate || 0) : getPercentage(team.passRate, item.teamRank)"
+                        :show-text="false" :stroke-width="10" color="#A7C8FF" />
+                      <div class="rank-info">
+                        <span style="color: #999999">{{ team.passRate || 0 }}</span>
+                      </div>
+                    </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">
+                      <el-progress
+                        :percentage="item.title !== '查获上报' ? Number(team.passRate || 0) : getPercentage(team.passRate, item.bottomTeamRank)"
+                        :show-text="false" :stroke-width="10" color="#A7C8FF" />
+                      <div class="rank-info">
+                        <span style="color: #999999">{{ team.passRate || 0 }}</span>
+                      </div>
+                    </div>
+                  </div>
+                </template>
+              </div>
+            </div>
+
+          </div>
+        </div>
+      </ChartsContainer>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import ChartsContainer from '../ChartsContainer.vue'
+import { watch } from 'vue'
+import useUserStore from '@/store/modules/user'
+const userStore = useUserStore()
+const userRole = userStore.roles
+// 定义props，从父组件接收数据
+const props = defineProps({
+  typeDetailData: {
+    type: Array,
+    default: () => []
+  }
+})
+
+// 计算百分比：使用数组中的最大值作为分母
+const 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>
+.stats-section {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 10px;
+  height: 100%;
+}
+
+.stats-item {
+  height: 100%;
+
+  .chartsContainer {
+    :deep(.chartsContainer-content) {
+      padding: 10px 0px;
+    
+    }
+  }
+
+}
+
+.item-content {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .top-section {
+    display: flex;
+    gap: 0;
+    margin-bottom: 15px;
+
+    .stat-section {
+      flex: 1;
+      border-radius: 8px;
+      padding: 10px 25px;
+      background: url('../../../../../assets/images/cardBg.png') no-repeat !important;
+      background-size: 100% 105% !important;
+    }
+
+    .problem-rect-section {
+      padding: 6px 10px;
+      flex: 0.6;
+      margin-top: 0;
+      background: url('../../../../../assets/images/cardBg.png') no-repeat !important;
+      background-size: 100% 105% !important;
+    }
+  }
+
+  .stat-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 15px;
+  }
+
+  .stat-title {
+    font-size: 16px;
+    color: #7DE6FF;
+    font-weight: bold;
+  }
+
+  .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: 18px;
+    font-weight: bold;
+    color: #fff;
+    margin-bottom: 5px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 30px;
+
+    .data-image {
+      width: 35px;
+      height: 35px;
+    }
+  }
+
+  .data-label {
+    font-size: 12px;
+    color: rgba(255, 255, 255, 0.7);
+  }
+
+  .divider {
+    position: absolute;
+    right: -4%;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 1px;
+    height: 60%;
+    background: rgba(255, 255, 255, 0.3);
+  }
+
+  /* 问题整改区域样式 */
+  .problem-rect-section {
+    margin-top: 15px;
+  }
+
+  .problem-title {
+    font-size: 16px;
+    color: #7DE6FF;
+    font-weight: bold;
+    margin-bottom: 10px;
+  }
+
+  .problem-grid {
+    display: flex;
+    gap: 10px;
+  }
+
+  .problem-item {
+    flex: 1;
+    border-radius: 8px;
+    padding: 5px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+
+  // .left-item {
+  //   background: rgba(0, 174, 65, 0.2);
+  // }
+
+  // .right-item {
+  //   background: rgba(249, 96, 96, 0.2);
+  // }
+
+  .problem-value {
+    font-size: 20px;
+    font-weight: bold;
+    margin-bottom: 5px;
+    min-height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .left-item .problem-value {
+    color: #00AE41;
+  }
+
+  .right-item .problem-value {
+    color: #F96060;
+  }
+
+  .problem-label {
+    font-size: 12px;
+    color: rgba(255, 255, 255, 0.7);
+  }
+
+  /* 排名区域样式 */
+  .rank-section {
+    height: 100%;
+    padding: 0 15px;
+    // background: rgba(255, 255, 255, 0.05);
+    border-radius: 8px;
+
+  }
+
+  .custom-title {
+    display: flex;
+    align-items: center;
+    font-size: 15px;
+    color: #fff;
+    font-weight: bold;
+    margin-bottom: 10px;
+    margin-top: 15px;
+  }
+
+  .custom-title:first-child {
+    margin-top: 0;
+  }
+
+  .arrow-icon {
+    width: 0;
+    height: 0;
+    border-top: 8px solid transparent;
+    border-bottom: 8px solid transparent;
+    border-left: 10px solid #1CB6FF;
+    margin-right: 8px;
+  }
+
+  /* 排名头部样式 */
+  .rank-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+    margin-top: 15px;
+
+    .rank-header-title {
+      display: flex;
+
+      align-items: center;
+
+      .rank-title {
+        font-size: 15px;
+      }
+    }
+  }
+
+  .rank-header:first-child {
+    margin-top: 0;
+  }
+
+  .rank-title {
+    font-size: 14px;
+    color: #fff;
+    font-weight: bold;
+  }
+
+  .arrow-icon {
+    width: 0;
+    height: 0;
+    border-top: 6px solid transparent;
+    border-bottom: 6px solid transparent;
+    border-left: 6px solid #35D8FF;
+    margin-right: 8px;
+  }
+
+  .sort-buttons {
+    display: flex;
+
+    div:nth-child(1) {
+      border-radius: 3px 0 0 3px;
+    }
+
+    div:nth-child(2) {
+      border-radius: 0 3px 3px 0;
+    }
+  }
+
+  .sort-btn {
+    padding: 3px 9px;
+    font-size: 13px;
+    color: #999;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 3px;
+    cursor: pointer;
+    transition: all 0.3s;
+  }
+
+  .sort-btn.active {
+    color: #fff;
+    background: #1CB6FF;
+  }
+
+  .sort-btn:hover {
+    background: rgba(28, 182, 255, 0.3);
+  }
+
+  .rank-item {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+    padding: 0 17px;
+  }
+
+  .rank-item:last-child {
+    margin-bottom: 0;
+  }
+
+  /* 大队排名容器样式 */
+  .department-rank-container {
+
+    overflow-y: auto;
+    padding-right: 5px;
+    margin-bottom: 15px;
+  }
+
+  /* 班组合格率排行区域样式 */
+  .team-rank-section {
+    margin-top: 15px;
+  }
+
+  /* 班组排名容器样式 */
+  .team-rank-container {
+    // max-height: 200px;
+    overflow-y: auto;
+    padding-right: 5px;
+  }
+
+  /* 自定义滚动条样式 */
+  .department-rank-container::-webkit-scrollbar,
+  .team-rank-container::-webkit-scrollbar {
+    width: 4px;
+  }
+
+  .department-rank-container::-webkit-scrollbar-track,
+  .team-rank-container::-webkit-scrollbar-track {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 2px;
+  }
+
+  .department-rank-container::-webkit-scrollbar-thumb,
+  .team-rank-container::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.3);
+    border-radius: 2px;
+  }
+
+  .department-rank-container::-webkit-scrollbar-thumb:hover,
+  .team-rank-container::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.5);
+  }
+
+  .rank-label {
+    font-size: 14px;
+    color: rgba(255, 255, 255, 0.8);
+    width: 60px;
+    margin-right: 10px;
+  }
+
+  .rank-progress {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    position: relative;
+    gap: 10px;
+  }
+
+  :deep(.el-progress) {
+    flex: 1;
+    margin-right: 10px;
+  }
+
+  :deep(.el-progress-bar) {
+    padding-right: 0;
+  }
+
+  :deep(.el-progress-bar__outer) {
+    border-radius: 5px;
+    background-color: transparent !important;
+  }
+
+  :deep(.el-progress-bar__inner) {
+    border-radius: 5px;
+  }
+
+  .rank-info {
+    font-size: 13px;
+    color: #999;
+    min-width: 30px;
+    text-align: right;
+  }
+}
+
+// /* 响应式设计 */
+// @media (max-width: 1280px) {
+//   .team-rank-container {
+//     max-height: 200px;
+
+//   }
+
+// }
+</style>

src/views/dataBigScreen/dashboard/components/pageItems/HomePageSystemStatus.vue

@@ -0,0 +1,347 @@
+<template>
+  <div class="system-status">
+    <!-- 搜索条件 -->
+    <div class="search-conditions">
+      <div class="time-range-switch">
+        <div class="time-range-label">切换时间范围：</div>
+        <div class="time-range-buttons">
+          <button v-for="range in timeRanges" :key="range.value" :class="{ active: activeTimeRange === range.value }"
+            @click="handleTimeRangeChange(range.value)">
+            {{ range.label }}
+          </button>
+        </div>
+      </div>
+
+      <div class="custom-time-range">
+        <div class="custom-time-label">自定义时间范围：</div>
+        <div class="date-pickers" :class="{ 'custom-time-range-active': !!activeTimeRange }">
+          <el-date-picker class="date-picker" v-model="startDate" type="date" style="width:110px" placeholder="开始时间"
+            @change="handleDateChange" />
+          <span class="date-separator">-</span>
+          <el-date-picker class="date-picker" v-model="endDate" type="date" style="width:110px" placeholder="结束时间"
+            @change="handleDateChange" />
+        </div>
+      </div>
+    </div>
+
+    <!-- 今日上岗科长 -->
+    <div class="today-duty-section" v-if="dutySectionMaster">
+      <div class="duty-label">今日上岗科长：</div>
+      <div class="duty-name">{{ dutySectionMaster }}</div>
+    </div>
+
+    <!-- 遍历数组展示 -->
+    <div class="quantity-overview">
+      <div class="quantity-overview-item" v-for="item in attendanceItems" :key="item.id">
+        <div>{{ item.label }}</div>
+        <div style="font-size: 32px;">{{ item.value }}{{ item.unit }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted, computed } from 'vue'
+import { getAttendanceStats, getAccuracyStatistics, selectUserListByRoleKey } from '@/api/largeScreen/largeScreen'
+import useUserStore from '@/store/modules/user'
+
+// 定义事件
+const emit = defineEmits(['timeRangeChange', 'dateChange'])
+
+// 时间范围选项
+const timeRanges = [
+  { label: '近一周', value: 'week' },
+  { label: '近一月', value: 'month' },
+  { label: '近三月', value: 'quarter' },
+  { label: '近半年', value: 'halfYear' },
+  { label: '近一年', value: 'year' }
+]
+
+// 内部状态管理
+const activeTimeRange = ref('year')
+const startDate = ref('')
+const endDate = ref('')
+
+// 出勤相关数据
+const attendanceStats = ref({})
+const accuracyStatistics = ref({})
+const userStore = useUserStore()
+
+// 今日上岗科长数据
+const dutySectionMaster = ref('')
+
+// 获取今日上岗科长数据
+const fetchDutySectionMaster = async () => {
+  try {
+    // 调用接口获取今日上岗用户列表
+    const response = await selectUserListByRoleKey(['kezhang']) // 假设角色标识为'kezhang'
+
+    const userList = response.data || []
+
+    // 将数组中的userName拼接成字符串
+    if (userList.length > 0) {
+      const names = userList.map(user => user.nickName)
+      dutySectionMaster.value = names.join('、')
+    } else {
+      // 如果没有数据，使用默认值
+      dutySectionMaster.value = '暂无科长上岗'
+    }
+  } catch (error) {
+    console.error('获取今日上岗科长数据失败:', error)
+    // 出错时使用默认值
+    dutySectionMaster.value = ''
+  }
+}
+
+// 计算属性：用户角色
+const role = computed(() => {
+  return userStore.roles || []
+})
+
+// 计算属性：当前用户信息
+const currentUser = computed(() => {
+  return userStore.userInfo || {}
+})
+
+// 计算属性：是否为班组视图
+const isTeamView = computed(() => {
+  return role.value.includes('banzuzhang') ? false : role.value.includes('banzuzhang')
+})
+
+// 计算属性：是否为个人视图
+const isIndividualView = computed(() => {
+  return role.value.includes('banzuzhang') ? false : role.value.includes('SecurityCheck')
+})
+
+// 计算属性：出勤信息数组
+const attendanceItems = computed(() => {
+
+  let res = {}
+  if (role.value.includes('kezhang') || role.value.includes('test') || role.value.includes('zhijianke') || role.value.includes('admin')) {
+    res = attendanceStats.value.stationLeaderStats || {}
+    return [
+      { id: 1, label: `在岗大队`, value: res?.dutyDeptName, unit: '' },
+      { id: 2, label: '在岗班组', value: res?.onDutyTeamCount, unit: '' },
+      { id: 3, label: '在岗人员', value: res?.onDutyPersonnelCount, unit: '' },
+      { id: 4, label: '今日查获上报', value: res?.todaySeizureReportCount, unit: '' },
+      { id: 5, label: '今日巡检问题', value: res?.todayCheckCorrectionCount, unit: '' },
+      { id: 6, label: '今日抽问抽答', value: `${accuracyStatistics.value?.todayTaskCompletion?.completedCount || 0}/${accuracyStatistics.value?.todayTaskCompletion?.totalCount || 0}`, unit: '' }
+    ]
+  } else {
+    res = attendanceStats.value.teamLeaderStats || attendanceStats.value.securityCheckStats || {}
+
+    // 个人视图或非班组长角色
+    return [
+      { id: 1, label: '出勤班组', value: res?.attendanceTeamName, unit: '' },
+      { id: 2, label: '出勤通道', value: res?.attendanceChannel, unit: '' },
+      { id: 3, label: '出勤时间', value: res?.attendanceTime || res?.attendanceTimeTips, unit: '' }
+    ]
+  }
+})
+
+const handleTimeRangeChange = (range) => {
+  activeTimeRange.value = range
+  emit('timeRangeChange', range)
+}
+
+// 处理日期变化
+const handleDateChange = () => {
+  if (startDate.value && endDate.value) {
+    // 当选择自定义时间时，将activeTimeRange置为空
+    activeTimeRange.value = ''
+    emit('dateChange', {
+      startDate: startDate.value,
+      endDate: endDate.value
+    })
+  }
+}
+
+
+
+
+
+// 获取出勤统计数据
+const fetchAttendanceStats = async () => {
+  try {
+    const response = await getAttendanceStats({})
+    attendanceStats.value = response.data || {}
+  } catch (error) {
+    console.error('获取出勤统计数据失败:', error)
+  }
+}
+
+// 获取正确率统计数据
+const fetchAccuracyStatistics = async () => {
+  try {
+    const response = await getAccuracyStatistics({})
+    accuracyStatistics.value = response.data || {}
+  } catch (error) {
+    console.error('获取正确率统计数据失败:', error)
+  }
+}
+
+// 组件挂载时获取数据
+onMounted(() => {
+  fetchAttendanceStats()
+  fetchAccuracyStatistics()
+  fetchDutySectionMaster()
+})
+</script>
+
+<style lang="scss" scoped>
+.system-status {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  .search-conditions {
+    justify-content: center;
+
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    padding: 15px 15px 0 15px;
+    // background: rgba(255, 255, 255, 0.05);
+    border-radius: 8px;
+
+    .time-range-switch {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+
+      .time-range-label {
+        font-size: 14px;
+        color: #fff;
+        white-space: nowrap;
+      }
+
+      .time-range-buttons {
+        display: flex;
+        gap: 4px;
+
+        button {
+          padding: 3px 9px;
+          border: none;
+          background: rgba(255, 255, 255, 0.1);
+          color: #797979;
+          background-color: #0A3551;
+          border-radius: 4px;
+          cursor: pointer;
+          font-size: 12px;
+          transition: all 0.3s;
+
+          // &:hover {
+          //   background: rgba(255, 255, 255, 0.2);
+          // }
+
+          &.active {
+            background: #0C4F7A;
+
+            color: #fff;
+          }
+        }
+      }
+    }
+
+    .custom-time-range {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+
+      .custom-time-label {
+        font-size: 14px;
+        color: #fff;
+        white-space: nowrap;
+      }
+
+      .custom-time-range-active {
+        :deep(.el-input__wrapper) {
+          background-color: #0A3551 !important;
+          border: none;
+          box-shadow: none;
+
+          .el-input__inner {
+            color: #797979;
+          }
+        }
+      }
+
+      .date-pickers {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+
+     
+
+        .date-separator {
+          color: #fff;
+          font-size: 12px;
+        }
+
+        :deep(.el-input__icon) {
+          display: none;
+        }
+
+        :deep(.el-input__wrapper) {
+          background-color: #0C4F7A;
+          border: none;
+          box-shadow: none;
+
+          .el-input__inner {
+            // color: #797979;
+          }
+        }
+      }
+    }
+  }
+
+  .today-duty-section {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 15px;
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid #044878;
+    border-radius: 8px;
+    color: #fff;
+    font-size: 16px;
+
+    .duty-label {
+      font-weight: bold;
+      color: #35D8FF;
+    }
+
+    .duty-name {
+      color: #70D3EE;
+      font-weight: bold;
+    }
+  }
+
+  .quantity-overview {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    column-gap: 25px;
+    row-gap: 15px;
+    // padding: 20px 20px 10px;
+    box-sizing: border-box;
+    color: #fff;
+    font-size: 20px;
+
+    .quantity-overview-item {
+      flex: 0 0 calc(33.333% - 16.67px);
+      // min-height:100px;
+      background: #051E40;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      row-gap: 10px;
+      border-radius: 5px;
+      font-weight: bold;
+    }
+  }
+}
+</style>

src/views/dataBigScreen/dashboard/components/pageItems/HomePageWarning.vue

@@ -0,0 +1,149 @@
+<template>
+  <ChartsContainer title="紧急通知" class="home-page-warning">
+    <!-- 紧急通知 -->
+    <div class="urgent-notice" v-if="noticeList.length > 0">
+    
+  
+      <div class="notice-carousel">
+        <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>
+  </ChartsContainer>
+</template>
+
+<script setup>
+import ChartsContainer from '../ChartsContainer.vue'
+import { ref, onMounted, onUnmounted } from 'vue'
+import { listNotice } from '@/api/system/notice'
+
+// 紧急通知数据
+const noticeList = ref([])
+const currentIndex = ref(0)
+const currentNotice = ref(null)
+const timer = ref(null)
+
+// 获取公告数据
+const fetchNoticeData = async () => {
+  try {
+    const response = await listNotice({
+      status: '0',
+      noticeType: 1,
+      pageSize: 999
+    })
+
+    // 假设response.rows包含公告列表
+    noticeList.value = response.rows || []
+    if (noticeList.value.length > 0) {
+      currentNotice.value = noticeList.value[0]
+      if (timer.value) {
+        clearInterval(timer.value)
+      }
+      // 数据加载完成后启动轮播
+      startCarousel()
+    }
+  } catch (error) {
+    console.error('获取公告数据失败:', error)
+  }
+}
+
+// 开始轮播
+const startCarousel = () => {
+  if (noticeList.value.length <= 1) return
+
+  timer.value = setInterval(() => {
+    currentIndex.value = (currentIndex.value + 1) % noticeList.value.length
+    currentNotice.value = noticeList.value[currentIndex.value]
+  }, 3000) // 3秒轮播一次
+}
+
+// 组件挂载时获取数据
+onMounted(() => {
+  fetchNoticeData()
+})
+
+// 组件卸载时清理定时器
+onUnmounted(() => {
+  if (timer.value) {
+    clearInterval(timer.value)
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.home-page-warning {
+  width: 80%; /* 缩小宽度到80% */
+  max-width: 400px; /* 设置最大宽度 */
+  
+  :deep(.chartsContainer) {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .urgent-notice {
+    background: rgba(255, 255, 255, 0.05);
+    border: 2px solid #044878;
+    border-radius: 8px;
+    padding: 10px;
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    width: 100%;
+
+    .notice-title {
+      font-size: 16px;
+      font-weight: bold;
+      color: #35D8FF;
+      white-space: nowrap;
+    }
+
+    .divider {
+      width: 1px;
+      height: 20px;
+      background: #35D8FF;
+    }
+
+    .notice-carousel {
+      flex: 1;
+      overflow: hidden;
+      height: 24px;
+      line-height: 24px;
+      position: relative;
+
+      .notice-content {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        font-size: 14px;
+        color: #35D8FF;
+      }
+
+      // 上下滚动动画
+      .slide-up-down-enter-active,
+      .slide-up-down-leave-active {
+        transition: all 0.5s ease;
+      }
+
+      .slide-up-down-enter-from {
+        transform: translateY(24px);
+        opacity: 0;
+      }
+
+      .slide-up-down-leave-to {
+        transform: translateY(-24px);
+        opacity: 0;
+      }
+    }
+  }
+}
+</style>

src/views/dataBigScreen/dashboard/components/pageItems/InspectionTask.vue

@@ -0,0 +1,270 @@
+<template>
+  <div class="chartsContainer">
+    <div class="chartsContainer-title">巡检计划</div>
+    <div class="chartsContainer-list">
+      <div class="chartsContainer-content">
+        <div class="chartsContainer-content-top">
+          <div class="chartsContainer-content-name">计划安排总览</div>
+        </div>
+        <div class="chartsContainer-content-content" ref="lineChart" />
+      </div>
+
+      <div class="chartsContainer-content">
+        <div class="chartsContainer-content-top">
+          <div class="chartsContainer-content-name">日常任务检查指标累计分布</div>
+        </div>
+        <div class="chartsContainer-content-content" ref="radar" />
+      </div>
+
+      <div class="chartsContainer-content">
+        <div class="chartsContainer-content-top">
+          <div class="chartsContainer-content-name">任务明细统计</div>
+        </div>
+        <div class="chartsContainer-content-content">
+          <el-table v-auto-scroll :data="tableData" border style="width: 100%" height="100%">
+            <el-table-column prop="checkStartTime" label="开始时间" min-width="120" />
+            <el-table-column prop="taskName" label="任务名称" />
+            <el-table-column prop="checkedLevelDesc" label="检查级别" min-width="80" />
+            <el-table-column prop="ruleTypeDesc" label="执行频率" min-width="100">
+              <template #default=" scope ">
+                {{ scope.row.ruleTypeDesc }}{{ scope.row.ruleTypeNum || 0 }}次
+              </template>
+            </el-table-column>
+            <el-table-column prop="checkEndTime" label="结束时间" min-width="120" />
+          </el-table>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { planOverview, planDistribution, planStatistics } from '@/api/item/items'
+import { useTimeOut } from './useTimeOut';
+import { useECharts } from '@/hooks/useEcharts.js';
+import { ref, computed, reactive, inject } from 'vue'
+const provideParams = inject('provideParams')
+const lineChart = ref(null)
+const lineChartData = ref({})
+const setChartsOptions = computed(() => {
+  return {
+    tooltip: {
+      trigger: 'axis'
+    },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      data: Object.values(lineChartData.value)[0] ? Object.values(lineChartData.value)[0].map(item => item.date) : [],
+      axisLabel: {
+        color: '#fff',
+        rotate: 25,
+        fontSize: 12,
+      }
+    },
+    legend: {
+      data: Object.keys(lineChartData.value),
+      textStyle: {
+        color: '#fff'
+      }
+    },
+    yAxis: {
+      type: 'value',
+      axisLabel: {
+        color: '#fff',
+      }
+    },
+    series: Object.entries(lineChartData.value).map(([ key, vlaue ]) => ({
+      data: vlaue.map(item => item.total),
+      type: 'line',
+      smooth: true,
+      name: key
+    })),
+    grid: {
+      left: '5%',
+      right: '0%',
+      bottom: '10%',
+      top: '15%',
+      containLabel: true
+    }
+  };
+})
+useECharts(lineChart, setChartsOptions);
+
+const radar = ref(null)
+const radarData = reactive({
+  grounp: [],
+  data: [],
+  legend: []
+})
+const setRadarOptions = computed(() => {
+  return {
+    tooltip: {
+      trigger: 'item'
+    },
+    grid: {
+      top: '5%',
+      bottom: '5%',
+      left: '5%',
+      right: '5%'
+    },
+    radar: {
+      indicator: radarData.grounp,
+      axisName: {
+        color: '#fff'
+      },
+      radius: '60%',
+    },
+    series: [
+      {
+        type: 'radar',
+        data: radarData.data,
+        color: '#408CFF'
+      }
+    ]
+  }
+})
+useECharts(radar, setRadarOptions);
+
+const permutationRadarDataHandler = (result = []) => {
+  radarData.grounp = result.map(item => ({ text: item.name + ' ' + item.total }))
+  radarData.data = [{
+    name: '日常任务检查',
+    value: result.map(attr => attr.total),
+    // // 为每个数据系列设置不同的颜色
+    areaStyle: {
+      opacity: 0.5
+    },
+    lineStyle: {
+      width: 2
+    },
+    itemStyle: {
+      borderWidth: 2
+    }
+  }]
+}
+const tableData = ref([])
+useTimeOut(() => {
+  provideParams.value.deptId && planOverview({
+    startDate: provideParams.value.startDate,
+    endDate: provideParams.value.endDate,
+    deptId: provideParams.value.deptId === 'ALL' ? '' : provideParams.value.deptId
+  }).then(res => {
+    lineChartData.value = (res.data || []).reduce((cur, acc) => {
+      if (cur[ acc.typeDesc ]) {
+        cur[ acc.typeDesc ].push(acc)
+      } else {
+        cur[ acc.typeDesc ] = [ acc ]
+      }
+      return cur
+    }, {})
+  })
+  provideParams.value.deptId && planDistribution({
+    startDate: provideParams.value.startDate,
+    endDate: provideParams.value.endDate,
+    deptId: provideParams.value.deptId === 'ALL' ? '' : provideParams.value.deptId
+  }).then(res => {
+    permutationRadarDataHandler(res.data)
+  })
+  provideParams.value.deptId && planStatistics({
+    startDate: provideParams.value.startDate,
+    endDate: provideParams.value.endDate,
+    deptId: provideParams.value.deptId === 'ALL' ? '' : provideParams.value.deptId
+  }).then(res => {
+    tableData.value = res.data
+  })
+}, [provideParams])
+
+
+
+</script>
+
+<style lang="scss" scoped>
+.chartsContainer {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background: linear-gradient(to bottom, rgba(8, 97, 117, 0) 0%, #13a2d6 200%);
+  border-radius: 4px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  .chartsContainer-title {
+    height: 42px;
+    width: 100%;
+    background: linear-gradient(to right, #004387 0%, #090B18 100%);
+    border-left: 1px solid #1892CE;
+    line-height: 42px;
+    color: #fff;
+    font-weight: 900;
+    font-size: 20px;
+    text-indent: 1em;
+  }
+
+  .chartsContainer-list {
+    padding: 20px 15px 10px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    row-gap: 10px;
+    flex: 1;
+    overflow: hidden;
+  }
+
+  .chartsContainer-content {
+    display: flex;
+    flex-direction: column;
+    row-gap: 10px;
+    flex: 1;
+    overflow: hidden;
+
+    .chartsContainer-content-top {
+      display: flex;
+      align-items: center;
+      color: #78DEF5;
+
+      .chartsContainer-content-name {
+        color: #fff;
+        font-weight: bold;
+        font-size: 16px;
+        display: flex;
+        align-items: center;
+
+        &::before {
+          content: '';
+          display: inline-block;
+          border-left: 9px solid #1CB6FF;
+          border-top: 8px solid transparent;
+          border-right: 9px solid transparent;
+          border-bottom: 8px solid transparent;
+        }
+      }
+    }
+
+    .chartsContainer-content-describe {
+      color: #78DEF5;
+      font-size: 12px;
+      font-weight: bold;
+      display: flex;
+      align-items: center;
+    }
+
+    .chartsContainer-content-content {
+      flex: 1;
+      width: 100%;
+      --el-bg-color: transparent;
+      --el-fill-color-blank: transparent;
+      --el-border-color-lighter: #1887A6;
+      --el-text-color-regular: #fff;
+      --el-fill-color-light: #5e93a1;
+
+      :deep(.el-table) {
+        .el-table__header-wrapper th {
+          background-color: #1CA7C8 !important;
+          color: #fff;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/dataBigScreen/dashboard/components/pageItems/IssueRectification.vue

@@ -0,0 +1,304 @@
+<template>
+  <ChartsContainer title="问题整改">
+    <div class="content">
+      <div :class="type === 'station' ? 'content-left' : 'content-content'">
+        <div class="content-left-item" v-for=" item of correctionData " :key="item.title"
+          :style="`--color:${item.color}`">
+          <div class="content-left-item-title">{{ item.label }}</div>
+          <div class="content-left-item-number">{{ item.value }}</div>
+        </div>
+      </div>
+      <div v-if=" type === 'station' " class="content-right" ref="categoryStack">
+
+      </div>
+    </div>
+  </ChartsContainer>
+</template>
+
+<script setup>
+import ChartsContainer from '../ChartsContainer.vue';
+import { useTimeOut } from './useTimeOut';
+import { useECharts } from '@/hooks/useEcharts.js';
+import { ref, computed, reactive, inject } from 'vue'
+import { correction, correctionDistribution } from '@/api/item/items'
+const props = defineProps({
+  type: {
+    type: String,
+    default: 'station'
+  }
+})
+const provideParams = inject('provideParams')
+const correctionData = ref([])
+const categoryStack = ref(null)
+const categoryStackData = reactive({
+  yAxis: [],
+  onTimeCompletedCount: [],
+  overTimeCompletedCount: [],
+  onTimeUnfinishedCount: [],
+  overTimeUnfinishedCount: []
+})
+const setCategoryStackOptions = computed(() => {
+  return {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      },
+      formatter: function (params) {
+        return params[ 0 ].name + '<br/>' +
+          params[ 0 ].marker + params[ 0 ].seriesName + ': ' + (params[ 0 ].value || 0) + '<br/>' +
+          params[ 1 ].marker + params[ 1 ].seriesName + ': ' + (params[ 1 ].value || 0) + '<br/>' +
+          params[ 2 ].marker + params[ 2 ].seriesName + ': ' + (params[ 2 ].value || 0) + '<br/>' +
+          params[ 3 ].marker + params[ 3 ].seriesName + ': ' + (params[ 3 ].value || 0)
+      }
+    },
+    grid: {
+      left: '15%',
+      right: '10%',
+      bottom: '10%',
+      top: '5%',
+    },
+    xAxis: {
+      type: 'value',
+      show: true,
+      axisLabel: {
+        color: '#fff'
+      },
+      axisLine: {
+        show: true,
+      },
+      minInterval: 1,
+    },
+    yAxis: {
+      type: 'category',
+      data: categoryStackData.yAxis,
+      axisLabel: {
+        color: '#fff'
+      }
+    },
+    series: [
+      {
+        name: '按期已完成',
+        type: 'bar',
+        stack: 'total',
+        label: {
+          show: true
+        },
+        color: '#408CFF',
+        emphasis: {
+          focus: 'series'
+        },
+        data: categoryStackData.onTimeCompletedCount.map(item => item || undefined)
+      },
+      {
+        name: '超期已完成',
+        type: 'bar',
+        stack: 'total',
+        label: {
+          show: true
+        },
+        color: '#58A55C',
+        emphasis: {
+          focus: 'series'
+        },
+        data: categoryStackData.overTimeCompletedCount.map(item => item || undefined)
+      },
+      {
+        name: '按期整改中',
+        type: 'bar',
+        stack: 'total',
+        label: {
+          show: true
+        },
+        color: '#FFC061',
+        emphasis: {
+          focus: 'series'
+        },
+        data: categoryStackData.onTimeUnfinishedCount.map(item => item || undefined)
+      },
+      {
+        name: '超期整改中',
+        type: 'bar',
+        stack: 'total',
+        label: {
+          show: true
+        },
+        color: '#DD4D43',
+        emphasis: {
+          focus: 'series'
+        },
+        data: categoryStackData.overTimeUnfinishedCount.map(item => item || undefined)
+      },
+    ]
+  }
+})
+
+props.type === 'station' && useECharts(categoryStack, setCategoryStackOptions)
+
+useTimeOut(() => {
+  provideParams.value.checkedDepartmentId && correction({
+    startDate: provideParams.value.startDate,
+    endDate: provideParams.value.endDate,
+    checkedDepartmentId: provideParams.value.checkedDepartmentId === 'ALL' ? '' : provideParams.value.checkedDepartmentId
+  }).then(res => {
+    const data = res.data || {}
+    correctionData.value = [
+      {
+        label: '按期已完成',
+        value: data.onTimeCompletedCount || '0',
+        color: '#408CFF'
+      },
+      {
+        label: '超期已完成',
+        value: data.overTimeCompletedCount || '0',
+        color: '#58A55C'
+      },
+      {
+        label: '按期整改中',
+        value: data.onTimeUnfinishedCount || '0',
+        color: '#FFC061'
+      },
+      {
+        label: '超期整改中',
+        value: data.overTimeUnfinishedCount || '0',
+        color: '#DD4D43'
+      }
+    ]
+  })
+  props.type === 'station' && correctionDistribution({
+    startDate: provideParams.value.startDate,
+    endDate: provideParams.value.endDate,
+    checkedDepartmentId: provideParams.value.checkedDepartmentId === 'ALL' ? '' : provideParams.value.checkedDepartmentId
+  }).then(res => {
+    const yAxis = [];
+    const onTimeCompletedCount = [];
+    const overTimeCompletedCount = [];
+    const onTimeUnfinishedCount = [];
+    const overTimeUnfinishedCount = [];
+    (res.data || []).forEach(item => {
+      yAxis.push(item.deptName)
+      onTimeCompletedCount.push(item.onTimeCompletedCount)
+      overTimeCompletedCount.push(item.overTimeCompletedCount)
+      onTimeUnfinishedCount.push(item.onTimeUnfinishedCount)
+      overTimeUnfinishedCount.push(item.overTimeUnfinishedCount)
+    });
+    categoryStackData.yAxis = yAxis
+    categoryStackData.onTimeCompletedCount = onTimeCompletedCount
+    categoryStackData.overTimeCompletedCount = overTimeCompletedCount
+    categoryStackData.onTimeUnfinishedCount = onTimeUnfinishedCount
+    categoryStackData.overTimeUnfinishedCount = overTimeUnfinishedCount
+  })
+}, [ provideParams ])
+
+</script>
+
+<style lang="scss" scoped>
+.content {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+
+  .content-left {
+    display: flex;
+    flex-direction: column;
+    row-gap: 10px;
+
+    .content-left-item {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      justify-content: space-evenly;
+      color: #fff;
+      background: #051E40;
+      border-radius: 8px;
+      width: 140px;
+      background: url('../../../../../assets/images/cardBg.png') no-repeat !important;
+      background-size: 100% 105% !important;
+
+      .content-left-item-title {
+        font-size: 14px;
+        display: flex;
+        font-weight: bold;
+        align-items: center;
+        justify-content: center;
+
+        &::before {
+          content: '';
+          width: 12px;
+          height: 12px;
+          display: block;
+          border-radius: 50%;
+          margin-right: 10px;
+          background: var(--color);
+        }
+      }
+
+      .content-left-item-number {
+        font-weight: bold;
+        font-size: 24px;
+        width: 100%;
+        text-align: center;
+        color: var(--color);
+      }
+    }
+  }
+
+  .content-content {
+    display: flex;
+    column-gap: 15px;
+    flex-wrap: wrap;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    justify-content: center;
+    align-items: center;
+
+
+    .content-left-item {
+      display: flex;
+      width: calc(35%);
+      height: calc(30%);
+      flex-direction: column;
+      justify-content: space-evenly;
+      color: #fff;
+      border-radius: 8px;
+      padding: 10px 0;
+      background: url('../../../../../assets/images/cardBg.png') no-repeat !important;
+      background-size: 100% 105% !important;
+      overflow: hidden;
+
+      .content-left-item-title {
+        font-size: 14px;
+        display: flex;
+        font-weight: bold;
+        align-items: center;
+        justify-content: center;
+
+        &::before {
+          content: '';
+          width: 12px;
+          height: 12px;
+          display: block;
+          border-radius: 50%;
+          margin-right: 10px;
+          background: var(--color);
+        }
+      }
+
+      .content-left-item-number {
+        font-weight: bold;
+        font-size: 24px;
+        width: 100%;
+        text-align: center;
+        color: var(--color);
+      }
+    }
+  }
+
+  .content-right {
+    flex: 1;
+    height: 100%;
+  }
+}
+</style>

src/views/dataBigScreen/dashboard/components/pageItems/LearningGrowth.vue

@@ -0,0 +1,101 @@
+<template>
+  <ChartsContainer title="学习成长">
+    <div ref="content" style="height: 100%;">
+      <div class="content-row" v-if=" type ">
+        <div class="content-row-title">{{ rowTableItem.name }}</div>
+        <div class="content-row-list">
+          <div class="content-row-item">
+            <div>平均分</div>
+            <div>{{ rowTableItem.averageScore }}</div>
+          </div>
+          <div class="content-row-item">
+            <div>最高分</div>
+            <div>{{ rowTableItem.highestScore }}</div>
+          </div>
+          <div class="content-row-item">
+            <div>最低分</div>
+            <div>{{ rowTableItem.lowestScore }}</div>
+          </div>
+        </div>
+      </div>
+      <el-table v-auto-scroll v-else :data="tableData" border style="width: 100%" height="100%">
+        <el-table-column prop="name" label="部门" />
+        <el-table-column prop="averageScore" label="平均分" min-width="80" />
+        <el-table-column prop="highestScore" label="最高分" min-width="80" />
+        <el-table-column prop="lowestScore" label="最低分" min-width="80" />
+      </el-table>
+    </div>
+  </ChartsContainer>
+</template>
+
+<script setup>
+import ChartsContainer from '../ChartsContainer.vue';
+import { ref } from 'vue';
+import { getGrowthPortrait } from '@/api/item/items'
+import { useTimeOut } from '../pageItems/useTimeOut'
+const props = defineProps({
+  type: {
+    type: String,
+    default: '' // team, department, station
+  }
+})
+const tableData = ref([])
+const rowTableItem = ref({})
+const params = inject('provideParams')
+useTimeOut(() => {
+  let apiParams = {}
+  if (props.type === 'team') {
+    apiParams = { teamId: params.value.deptId }
+  } else if (props.type === 'department') {
+    apiParams = { departmentId: params.value.deptId }
+  } else if (props.type === 'personal') {
+    apiParams = { userId: params.value.deptId }
+  } else {
+    apiParams = { deptId: params.value.deptId }
+  }
+  params.value.deptId && getGrowthPortrait(apiParams).then(res => {
+    tableData.value = res.data
+    rowTableItem.value = (res.data || []).find(item => item.id == params.value.deptId) || {}
+  })
+}, [ params ])
+
+
+</script>
+
+<style lang="scss" scoped>
+.content-row {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  .content-row-title {
+    font-size: 14px;
+    color: #77DBF4;
+    height: 30px;
+  }
+
+  .content-row-list {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    justify-content: space-evenly;
+    row-gap: 15px;
+  }
+
+  .content-row-item {
+    flex: 1;
+    background: url('../../../../../assets/images/rowBg.png') no-repeat;
+    background-position: -10px;
+    background-size: calc(100% + 20px) 100%;
+    overflow: hidden;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    color: #fff;
+    font-size: 16px;
+    border-radius: 5px;
+    padding: 0 15px;
+    font-weight: bold;
+  }
+}
+</style>

src/views/dataBigScreen/dashboard/components/pageItems/PersonalTaskCompletionRank.vue

@@ -0,0 +1,44 @@
+<template>
+  <ChartsContainer  name="个人任务完成排行(Top10)">
+    <div ref="content" style="height: 100%;">
+      <el-table v-auto-scroll :data="tableData" border style="width: 100%" height="100%">
+        <el-table-column prop="date" label="排行" width="55" align="center">
+          <template #default="scope">
+            {{ scope.$index + 1 }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="userName" label="姓名" width="90"/>
+        <el-table-column prop="deptName" label="部门" width="90" />
+        <el-table-column prop="completedTasks" label="完成任务数" width="90" />
+        <el-table-column prop="avgScore" label="平均得分" width="90" />
+        <el-table-column prop="completionRate" label="完成率">
+          <template #default="scope">
+            <el-progress
+              :text-inside="true"
+              :stroke-width="16"
+              :percentage="scope.row.completionRate"
+              style="--el-border-color-lighter: #fff"
+              color="#58A55C"
+            />
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </ChartsContainer>
+</template>
+
+<script setup>
+import { onMounted } from 'vue';
+import ChartsContainer from '../ChartsContainer.vue';
+import { userRanking } from '@/api/item/items'
+import { useTimeOut } from './useTimeOut'
+const tableData = ref([])
+useTimeOut(() => {
+  userRanking().then(res => {
+    tableData.value = res.data
+  })
+})
+
+</script>
+
+<style lang="scss" scoped></style>

src/views/dataBigScreen/dashboard/components/pageItems/PersonnelOnDutySituation.vue

@@ -0,0 +1,170 @@
+<template>
+  <ChartsContainer title="人员在岗情况">
+    <div ref="pie" style="height: 60%;"></div>
+    <div ref="bar" style="height: 40%;"></div>
+  </ChartsContainer>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import ChartsContainer from '../ChartsContainer.vue';
+import { useECharts } from '@/hooks/useEcharts.js';
+
+const pie = ref(null)
+const bar = ref(null)
+const props = defineProps({
+  personnelCountInfo: {
+    type: Object,
+    default: () => ({
+      allData: 0, // 全部通道
+      openRate: 0, // 开放率
+      openData: 0,  // 开放通道数
+      closeData: 0, // 未开放通道数
+      barGrounp: [ 'T2航站楼', 'T1航站楼' ],
+      barOpenData: [ 0, 0 ],
+      barCloseData: [ -0, -0 ],
+      hasValidData: true
+    })
+  }
+})
+
+
+
+const setChartsOptions = computed(() => {
+  return {
+    graphic: [ {
+      type: 'text',
+      left: '52%',
+      top: '40%',
+      style: {
+        text: '在岗率',
+        font: 'bold 20px sans-serif',
+        fill: '#fff'
+      }
+    }, {
+      type: 'text',
+      left: '54%',
+      top: '50%',
+      style: {
+        text: (props.personnelCountInfo.openRate || 0) + '%',
+        font: 'bold 22px sans-serif',
+        fill: '#fff'
+      }
+    } ],
+    legend: {
+      data: [ "在岗", "空闲" ],
+      left: "left",
+      top: "center",
+      orient: "vertical",
+      textStyle: { color: "#fff" },
+    },
+    tooltip: {
+      trigger: 'item'
+    },
+    series: [ {
+      type: "pie",
+      radius: [ "50%", "70%" ],
+      center: [ "60%", "50%" ],
+      label: {
+        formatter: '{b}\n{c}',
+        color: '#fff',
+        fontSize: 14,
+      },
+      labelLine: {
+        length: 3
+      },
+      data: [
+        { value: props.personnelCountInfo.openData, name: "在岗", itemStyle: { color: "#408CFF" } },
+        { value: props.personnelCountInfo.closeData, name: "空闲", itemStyle: { color: "#A7C8FF" } }
+      ]
+    } ],
+    animation: false,
+    grid: {
+      top: 10,
+      bottom: 50,
+      left: 20,
+      right: 20
+    },
+  }
+})
+const setChartsOptionsBar = computed(() => {
+  return {
+    grid: {
+      top: 20,
+      bottom: 20,
+      left: 80,
+      right: 20
+    },
+    legend: { show: false },
+    xAxis: {
+      type: 'value',
+      position: 'bottom',
+      axisLine: { show: true, lineStyle: { color: '#fff' } },
+      axisTick: { show: false },
+      axisLabel: { show: false },
+      splitLine: { show: false },
+      min: -props.personnelCountInfo.allData || -10,
+      max: props.personnelCountInfo.allData || 10
+    },
+    yAxis: {
+      type: 'category',
+      data: props.personnelCountInfo.barGrounp,
+      axisLine: { show: false },
+      axisTick: { show: false },
+      axisLabel: {
+        color: '#fff',
+        fontSize: 14,
+        margin: 10
+      }
+    },
+    series: [
+      {
+        name: '在岗',
+        type: 'bar',
+        stack: 'total',
+        barWidth: 20,
+        itemStyle: { color: '#408CFF' },
+        label: {
+          show: true,
+          position: 'left',
+          color: '#fff',
+          formatter: function (params) {
+            return Math.abs(params.value)
+          }
+        },
+        data: props.personnelCountInfo.barOpenData // T2航站楼开放70，T1航站楼开放30
+      },
+      {
+        name: '空闲',
+        type: 'bar',
+        stack: 'total',
+        barWidth: 20,
+        itemStyle: { color: '#A7C8FF' },
+        label: {
+          show: true,
+          position: 'right',
+          color: '#fff',
+          formatter: function (params) {
+            return Math.abs(params.value)
+          }
+        },
+        data: props.personnelCountInfo.barCloseData  // T2航站楼未开放30，T1航站楼未开放70
+      }
+    ],
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: { type: 'shadow' },
+      formatter: function (params) {
+        return params[ 0 ].name + '<br/>' +
+          params[ 0 ].seriesName + ': ' + Math.abs(params[ 0 ].value) + '<br/>' +
+          params[ 1 ].seriesName + ': ' + Math.abs(params[ 1 ].value);
+      }
+    }
+  }
+})
+
+useECharts(pie, setChartsOptions);
+useECharts(bar, setChartsOptionsBar);
+</script>
+
+<style lang="scss" scoped></style>

src/views/dataBigScreen/dashboard/components/pageItems/ProblemDiscovery.vue

@@ -0,0 +1,252 @@
+<template>
+  <div class="chartsContainer">
+    <div class="chartsContainer-title">问题发现</div>
+    <div class="chartsContainer-list">
+      <div class="chartsContainer-content">
+        <div class="chartsContainer-content-top">
+          <div class="chartsContainer-content-name">总体问题分布</div>
+        </div>
+        <div class="chartsContainer-content-content" ref="pie" />
+      </div>
+
+      <div class="chartsContainer-content">
+        <div class="chartsContainer-content-top">
+          <div class="chartsContainer-content-name">问题分布对比</div>
+        </div>
+        <div class="chartsContainer-content-content" ref="radar" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { problemDistribution, problemComparison } from '@/api/item/items'
+import { useTimeOut } from './useTimeOut';
+import { useECharts } from '@/hooks/useEcharts.js';
+import { ref, computed, reactive, inject } from 'vue'
+const provideParams = inject('provideParams')
+const pie = ref(null)
+const pieData = ref([])
+const setChartsOptions = computed(() => {
+  return {
+    tooltip: {
+      trigger: 'item',
+      formatter: '{a} <br/>{b}: {c} ({d}%)'
+    },
+    legend: {
+      show: false
+    },
+    series: [
+      {
+        name: '问题分布',
+        type: 'pie',
+        radius: [ '0%', '50%' ], // 环形图设置
+        center: [ '50%', '50%' ],
+        data: pieData.value.map(item => {
+          return {
+            name: item.name,
+            value: item.total
+          }
+        }),
+        label: {
+          show: true,
+          formatter: function (params) {
+            return params.name + '\n' + params.percent + '%'
+          },
+          color: '#fff',
+          fontSize: 14,
+        },
+        labelLine: {
+          length: 10
+        },
+        emphasis: {
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: 'rgba(0, 0, 0, 0.5)'
+          }
+        }
+      }
+    ]
+  }
+})
+useECharts(pie, setChartsOptions);
+
+const radar = ref(null)
+const radarData = reactive({
+  grounp: [],
+  data: [],
+  legend: []
+})
+const setRadarOptions = computed(() => {
+  return {
+    tooltip: {
+      trigger: 'item'
+    },
+    legend: {
+      data: radarData.legend,
+      bottom: 0,
+      textStyle: { color: "#fff" },
+    },
+    grid: {
+      top: '5%',
+      bottom: '5%',
+      left: '5%',
+      right: '5%'
+    },
+    radar: {
+      indicator: radarData.grounp,
+      axisName: {
+        color: '#fff'
+      },
+       radius: '50%',
+    },
+    series: [
+      {
+        type: 'radar',
+        data: radarData.data,
+      }
+    ]
+  }
+})
+useECharts(radar, setRadarOptions);
+
+
+const permutationRadarDataHandler = (result = []) => {
+  const grounpObj = result.reduce((cur, acc) => {
+    if (cur[ acc.deptName ]) {
+      cur[ acc.deptName ].push(acc)
+    } else {
+      cur[ acc.deptName ] = [ acc ]
+    }
+    return cur
+  }, {})
+
+  const grounp = Object.entries(grounpObj)
+
+  radarData.legend = grounp.map(item => {
+    return item[ 0 ]
+  })
+
+
+  radarData.grounp = grounp[ 0 ] && grounp[ 0 ][ 1 ] ? grounp[ 0 ][ 1 ].map(item => ({ text: item.name })) : []
+  const color = ['#408CFF', '#58A55C', '#DD4D43', '#FAC858']
+  radarData.data = grounp.map((item, index) => {
+    return {
+      name: item[ 0 ],
+      value: item[ 1 ].map(attr => attr.total),
+      // // 为每个数据系列设置不同的颜色
+      color: color[ index % color.length ],
+      areaStyle: {
+        color: color[ index % color.length ],
+        opacity: 0.5
+      },
+      lineStyle: {
+        color: color[ index % color.length ],
+        width: 2
+      },
+      itemStyle: {
+        color: color[ index % color.length ],
+        borderWidth: 2
+      }
+    }
+  })
+}
+
+useTimeOut(() => {
+  provideParams.value.checkedDepartmentId &&  problemDistribution({
+    startDate: provideParams.value.startDate,
+    endDate: provideParams.value.endDate,
+    checkedDepartmentId: provideParams.value.checkedDepartmentId === 'ALL' ? '' : provideParams.value.checkedDepartmentId
+  }).then(res => {
+    pieData.value = res.data || []
+  })
+  provideParams.value.checkedDepartmentId &&  problemComparison({
+    startDate: provideParams.value.startDate,
+    endDate: provideParams.value.endDate,
+    checkedDepartmentId: provideParams.value.checkedDepartmentId === 'ALL' ? '' : provideParams.value.checkedDepartmentId
+  }).then(res => {
+    permutationRadarDataHandler(res.data)
+  })
+}, [provideParams])
+
+
+
+</script>
+
+<style lang="scss" scoped>
+.chartsContainer {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background: linear-gradient(to bottom, rgba(8, 97, 117, 0) 0%, #13a2d6 200%);
+  border-radius: 4px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  .chartsContainer-title {
+    height: 42px;
+    width: 100%;
+    background: linear-gradient(to right, #004387 0%, #090B18 100%);
+    border-left: 1px solid #1892CE;
+    line-height: 42px;
+    color: #fff;
+    font-weight: 900;
+    font-size: 20px;
+    text-indent: 1em;
+  }
+
+  .chartsContainer-list {
+    padding: 20px 15px 10px;
+    box-sizing: border-box;
+    display: flex;
+    column-gap: 20px;
+    flex: 1;
+    overflow: hidden;
+  }
+
+  .chartsContainer-content {
+    display: flex;
+    flex-direction: column;
+    row-gap: 10px;
+    flex: 1;
+    overflow: hidden;
+
+    .chartsContainer-content-top {
+      display: flex;
+      align-items: center;
+      color: #78DEF5;
+
+      .chartsContainer-content-name {
+        color: #fff;
+        font-weight: bold;
+        font-size: 16px;
+        display: flex;
+        align-items: center;
+
+        &::before {
+          content: '';
+          display: inline-block;
+          border-left: 9px solid #1CB6FF;
+          border-top: 8px solid transparent;
+          border-right: 9px solid transparent;
+          border-bottom: 8px solid transparent;
+        }
+      }
+    }
+
+    .chartsContainer-content-describe {
+      color: #78DEF5;
+      font-size: 12px;
+      font-weight: bold;
+      display: flex;
+      align-items: center;
+    }
+
+    .chartsContainer-content-content {
+      flex: 1;
+    }
+  }
+}
+</style>

src/views/dataBigScreen/dashboard/components/pageItems/QualificationCapability.vue

@@ -0,0 +1,202 @@
+<template>
+  <ChartsContainer title="资质能力">
+    <div style="height: 100%; overflow-y: auto;">
+      <div class="content-item">
+        <div class="item-label">资质等级：</div>
+        <div class="item-value">{{ localSystemData.qualificationLevelSum }}</div>
+      </div>
+      <div class="content-item">
+        <div class="item-label">可上岗岗位数：</div>
+        <div class="item-value">{{ localSystemData.availablePositionsSum }}</div>
+      </div>
+      <div class="content-item">
+        <div class="item-label">政治面貌：</div>
+        <div class="item-value">{{ localSystemData.politicalStatusSum }}</div>
+      </div>
+      <div class="content-item">
+        <div class="item-label">学历：</div>
+        <div class="item-value">{{ localSystemData.educationSum }}</div>
+      </div>
+      <div class="content-item">
+        <div class="item-label">平均年龄：</div>
+        <div class="item-value">{{ localSystemData.averageAge }}岁&nbsp;最高{{ localSystemData.maxAge }}岁&nbsp;最低{{
+          localSystemData.minAge }}岁</div>
+      </div>
+      <div class="content-item">
+        <div class="item-label">通过政审人数：</div>
+        <div class="item-value">{{ localSystemData.passedKoroughCountSum }}人</div>
+      </div>
+      <div class="content-item">
+        <div class="item-label">身体健康人数：</div>
+        <div class="item-value">{{ localSystemData.healthyCountSum }}人</div>
+      </div>
+      <div class="content-item">
+        <div class="item-label">行政处罚人数：</div>
+        <div class="item-value">{{ localSystemData.penalizedCountSum }}人</div>
+      </div>
+    </div>
+  </ChartsContainer>
+  <ChartsContainer title="工作履历">
+    <div style="height: 100%;  overflow-y: auto;">
+      <div class="content-item">
+        <div class="item-label">平均工作年限：</div>
+        <div class="item-value">{{ localSystemData && localSystemData.workYearsStats ? localSystemData.workYearsStats.averageWorkYears
+          || 0 : 0 }}</div>
+      </div>
+      <div class="content-item">
+        <div class="item-label">平均安检工作年限：</div>
+        <div class="item-value">{{ localSystemData && localSystemData.securityWorkYearsStats ?
+          localSystemData.securityWorkYearsStats.averageWorkYears || 0 : 0 }}</div>
+      </div>
+      <div class="content-item">
+        <div class="item-label">曾担任过班组长人数：</div>
+        <div class="item-value">{{ localSystemData && localSystemData.securityWorkPositionStats ?
+          localSystemData.securityWorkPositionStats.teamLeaderCount || 0 : 0 }}</div>
+      </div>
+      <div class="content-item">
+        <div class="item-label">工作奖励次数：</div>
+        <div class="item-value">{{ localSystemData && localSystemData.workRewardsStats ?
+          localSystemData.workRewardsStats.totalPersonTimes || 0 : 0 }}</div>
+      </div>
+      <div class="content-item">
+        <div class="item-label">工作处罚次数：</div>
+        <div class="item-value">{{ localSystemData && localSystemData.workPenaltiesStats ?
+          localSystemData.workPenaltiesStats.totalPersonTimes || 0 : 0 }}</div>
+      </div>
+    </div>
+  </ChartsContainer>
+</template>
+
+<script setup>
+import ChartsContainer from '../ChartsContainer.vue';
+import { ref, inject } from 'vue';
+import { getModuleMetrics } from '@/api/item/items'
+import { useTimeOut } from '../pageItems/useTimeOut'
+import { useDict } from '@/utils/dict'
+
+const {
+  sys_user_political_status,
+  sys_user_qualification_level,
+} = useDict('sys_user_political_status', 'sys_user_qualification_level')
+
+const localSystemData = ref({})
+const params = inject('provideParams')
+
+const handleDeptData = async (newVal) => {
+  // 检查newVal是否为null或undefined
+  if (!newVal || Object.values(newVal).length === 0) {
+    localSystemData.value = {};
+    return;
+  }
+  
+  const res = { ...newVal };
+  const { qualificationLevelStats, positionCompetencyStats, politicalStatusStats, educationStats, ageStats, politicalReviewStats, physicalHealthStats, administrativePenaltyStats } = newVal
+
+  // 检查qualificationLevelStats是否存在且是数组
+  if (!qualificationLevelStats || !Array.isArray(qualificationLevelStats)) {
+    return;
+  }
+
+  // 使用useDict获取资质等级字典
+  const qualificationDict = sys_user_qualification_level.value || []
+  let strArr = [];
+  qualificationLevelStats.map(item => {
+    strArr.push(`${item?.levelName} ${item.count}人`)
+  })
+  res.qualificationLevelSum = strArr.join('、')
+  // 按照字典顺序遍历，确保从一级开始显示
+  // for (const dictItem of qualificationDict) {
+  //   const statItem = qualificationLevelStats.find(item => item.levelName === dictItem.value)
+  //   if (statItem) {
+  //     res.qualificationLevelSum = `${res.qualificationLevelSum ? res.qualificationLevelSum + '、' : ''}${dictItem.label} ${statItem.count}人`
+  //   }
+  // }
+
+  let availablePositionsSum = []
+  for (const item of positionCompetencyStats) {
+    availablePositionsSum.push(`${item.postName} ${item.competentCount}人`)
+  }
+  res.availablePositionsSum = availablePositionsSum.join('、')
+
+  let politicalStatusArr = []
+  for (const item of politicalStatusStats) {
+    if (item.politicalStatus) {
+      let politicalStatus = sys_user_political_status.value.find(attr => attr.value === item.politicalStatus) || {}
+      politicalStatusArr.push({
+        politicalStatus: politicalStatus.label,
+        totalCount: item.totalCount
+      })
+    }
+  }
+  let politicalStatusObj = politicalStatusArr.find(item => item.politicalStatus === "中共党员")
+  if (politicalStatusObj) {
+    res.politicalStatusSum = `${politicalStatusObj.politicalStatus} ${politicalStatusObj.totalCount}人`
+  } else {
+    res.politicalStatusSum = '-';
+  }
+
+  // 处理学历统计信息
+  if (educationStats) {
+    const educationParts = [];
+
+    // 按学历层次从高到低排序显示
+    if (educationStats.masterCount > 0) {
+      educationParts.push(`硕士 ${educationStats.masterCount}人`);
+    }
+    if (educationStats.bachelorCount > 0) {
+      educationParts.push(`本科 ${educationStats.bachelorCount}人`);
+    }
+    if (educationStats.collegeCount > 0) {
+      educationParts.push(`专科 ${educationStats.collegeCount}人`);
+    }
+    if (educationStats.highSchoolCount > 0) {
+      educationParts.push(`高中 ${educationStats.highSchoolCount}人`);
+    }
+    if (educationStats.middleSchoolCount > 0) {
+      educationParts.push(`初中 ${educationStats.middleSchoolCount}人`);
+    }
+    if (educationStats.primarySchoolCount > 0) {
+      educationParts.push(`小学 ${educationStats.primarySchoolCount}人`);
+    }
+
+    res.educationSum = educationParts.length > 0 ? educationParts.join('、') : '-';
+  } else {
+    res.educationSum = '-';
+  }
+  res.averageAge = ageStats && ageStats.averageAge ? ageStats.averageAge : '-'
+  res.minAge = ageStats && ageStats.minAge ? ageStats.minAge : '-'
+  res.maxAge = ageStats && ageStats.maxAge ? ageStats.maxAge : '-'
+  res.passedKoroughCountSum = politicalReviewStats && politicalReviewStats.passedCount || 0;
+  res.healthyCountSum = physicalHealthStats && physicalHealthStats.healthyCount || 0;
+  res.penalizedCountSum = administrativePenaltyStats && administrativePenaltyStats.penalizedCount || 0;
+  localSystemData.value = res;
+}
+useTimeOut(() => {
+  params.value.deptId && sys_user_political_status.value && sys_user_qualification_level.value && getModuleMetrics({ deptId: params.value.deptId, userTypeStr: 'station' }).then(res => {
+    const { moduleResults = { system: {} } } = res.data
+    handleDeptData(moduleResults.system)
+  })
+}, [params, sys_user_political_status, sys_user_qualification_level])
+
+</script>
+
+<style lang="scss" scoped>
+.content-item {
+  display: flex;
+  column-gap: 5px;
+  margin-bottom: 8px;
+  font-size: 16px;
+
+  .item-label {
+    color: #fff;
+    font-weight: bold;
+    width: 10em;
+  }
+
+  .item-value {
+    color: #fefefe;
+    flex: 1;
+    text-align: end;
+  }
+}
+</style>

src/views/dataBigScreen/dashboard/components/pageItems/QualificationCapabilityPersonal.vue

@@ -0,0 +1,129 @@
+<template>
+  <ChartsContainer title="资质能力">
+    <div style="height: 100%; overflow-y: auto;">
+      <div class="content-item">
+        <div class="item-label">资质等级：</div>
+        <div class="item-value">{{ getLabel(localSystemData.qualificationLevel, sys_user_qualification_level) }}</div>
+      </div>
+      <div class="content-item">
+        <div class="item-label">可上岗岗位：</div>
+        <div class="item-value">{{ localSystemData.availablePositions }}</div>
+      </div>
+      <div class="content-item">
+        <div class="item-label">政治面貌：</div>
+        <div class="item-value">{{ getLabel(localSystemData.politicalStatus, sys_user_political_status) }}</div>
+      </div>
+      <div class="content-item">
+        <div class="item-label">学历：</div>
+        <div class="item-value">{{ getLabel(localSystemData.education, sys_user_schooling) }}</div>
+      </div>
+      <div class="content-item">
+        <div class="item-label">年龄：</div>
+        <div class="item-value">{{ localSystemData.age }}岁</div>
+      </div>
+      <div class="content-item">
+        <div class="item-label">是否通过政审：</div>
+        <div class="item-value">{{ localSystemData.isPoliticalReviewPassed ? '是' : '否' }}</div>
+      </div>
+      <div class="content-item">
+        <div class="item-label">身体健康情况：</div>
+        <div class="item-value">{{ !localSystemData.isHealthy ? '健康' : localSystemData.isHealthy }}</div>
+      </div>
+      <div class="content-item">
+        <div class="item-label">有无行政处罚：</div>
+        <div class="item-value">{{ !localSystemData.hasAdministrativePenalty ? '无' : localSystemData.hasAdministrativePenalty }}</div>
+      </div>
+    </div>
+  </ChartsContainer>
+  <ChartsContainer title="工作履历">
+    <div style="height: 100%;  overflow-y: auto;">
+      <div class="content-item">
+        <div class="item-label">工作年限：</div>
+        <div class="item-value">{{ localSystemData.workYears || 0 }}</div>
+      </div>
+      <div class="content-item">
+        <div class="item-label">安检工作年限：</div>
+        <div class="item-value">{{ localSystemData.securityWorkYears || 0 }}</div>
+      </div>
+      <div class="content-item">
+        <div class="item-label">曾任安检最高职务：</div>
+        <div class="item-value">{{ localSystemData.securityWorkPosition || '-' }}</div>
+      </div>
+      <div class="content-item">
+        <div class="item-label">工作奖励次数：</div>
+        <div class="item-value">{{ localSystemData.workRewards || 0  }}</div>
+      </div>
+      <div class="content-item">
+        <div class="item-label">工作处罚次数：</div>
+        <div class="item-value">{{ localSystemData.workPenalties || 0 }}</div>
+      </div>
+    </div>
+  </ChartsContainer>
+</template>
+
+<script setup>
+import ChartsContainer from '../ChartsContainer.vue';
+import { ref, inject } from 'vue';
+import { getModuleMetrics } from '@/api/item/items'
+import { useTimeOut } from '../pageItems/useTimeOut'
+import { useDict } from '@/utils/dict'
+const props = defineProps({
+  personal: {
+    type: Boolean,
+    default: false
+  }
+})
+const {
+  sys_user_political_status,
+  sys_user_qualification_level,
+  sys_user_schooling
+} = useDict('sys_user_political_status', 'sys_user_qualification_level', 'sys_user_schooling')
+
+const getLabel = (value, list = []) => {
+  const item = list.find(item => item.value.includes(value)) || {}
+  return item.label
+}
+
+const localSystemData = ref({})
+const params = inject('provideParams')
+
+const handleDeptData = async (newVal) => {
+  // 检查newVal是否为null或undefined
+  if (!newVal) {
+    localSystemData.value = {};
+    return;
+  }
+  localSystemData.value = {
+    ...newVal,
+    availablePositions: newVal.availablePositions.map(item => item.postName).join('、')
+  };
+}
+useTimeOut(() => {
+  params.value.deptId && getModuleMetrics({ userId: params.value.deptId, userTypeStr: 'personal' }).then(res => {
+    const { moduleResults = { system: {} } } = res.data
+    handleDeptData(moduleResults.system)
+  })
+}, [params])
+
+</script>
+
+<style lang="scss" scoped>
+.content-item {
+  display: flex;
+  column-gap: 5px;
+  margin-bottom: 8px;
+  font-size: 16px;
+
+  .item-label {
+    color: #fff;
+    font-weight: bold;
+    width: 10em;
+  }
+
+  .item-value {
+    color: #fefefe;
+    flex: 1;
+    text-align: end;
+  }
+}
+</style>

src/views/dataBigScreen/dashboard/components/pageItems/SectionTaskDetails.vue

@@ -0,0 +1,57 @@
+<template>
+  <ChartsContainer name="科级任务明细">
+    <template #other>
+      <span style="margin-right: 10px; font-size: 14px; white-space: nowrap;">{{ tableData.taskName || '' }} 每日{{ tableData.ruleTypeNum || 1
+        }}次</span>
+      <CustomStyleSelect :options="selectList" v-model="selectActive" />
+    </template>
+    <template #describe>
+      完成情况：{{ `${tableData.notStartedCount || 0}/${tableData.inProgressCount || 0}/${tableData.completedCount || 0}` }}
+    </template>
+    <div ref="content" style="height: 100%;">
+      <el-table v-auto-scroll :data="tableData.checkLargeScreenInspectionExecuteItemDtoList" border style="width: 100%" height="100%">
+        <el-table-column prop="userName" label="姓名" width="90" />
+        <el-table-column prop="completionPercentage" label="今日完成比例">
+          <template #default=" scope ">
+            <el-progress
+              :text-inside="true"
+              :stroke-width="16"
+              :percentage="scope.row.completionPercentage"
+              style="--el-border-color-lighter: #fff"
+              color="#58A55C" />
+          </template>
+        </el-table-column>
+        <el-table-column prop="checkOrderCount" label="整改单数" width="90" />
+        <el-table-column prop="rectificationOrderCount" label="不合格项数" width="100" />
+      </el-table>
+    </div>
+  </ChartsContainer>
+</template>
+
+<script setup>
+import ChartsContainer from '../ChartsContainer.vue';
+import CustomStyleSelect from './CustomStyleSelect.vue'
+import { computed, ref } from 'vue';
+
+const props = defineProps({
+  tableData: {
+    type: Array,
+    default: []
+  }
+})
+const selectActive = ref('')
+const selectList = computed(() => {
+  const options = props.tableData.map(item => {
+    return ({ label: item.taskName, value: item.taskCode })
+  })
+  selectActive.value = options[ 0 ] ? options[ 0 ].value : ''
+  return options || []
+})
+
+const tableData = computed(() => {
+  return props.tableData.find(item => item.taskCode === selectActive.value) || {}
+})
+
+</script>
+
+<style lang="scss" scoped></style>

src/views/dataBigScreen/dashboard/components/pageItems/SeizeDetails.vue

@@ -0,0 +1,354 @@
+<template>
+  <div class="chartsContainer">
+    <div class="chartsContainer-title">查获明细</div>
+    <div class="chartsContainer-list">
+      <div class="chartsContainer-content">
+        <div class="chartsContainer-content-top">
+          <div class="chartsContainer-content-name">违禁品类别</div>
+        </div>
+        <div class="chartsContainer-content-content" ref="pieCategory" />
+      </div>
+
+       <div class="chartsContainer-content">
+        <div class="chartsContainer-content-top">
+          <div class="chartsContainer-content-name">查获部位</div>
+        </div>
+        <div class="chartsContainer-content-content" ref="pieAppPosition" />
+      </div>
+
+       <div class="chartsContainer-content">
+        <div class="chartsContainer-content-top">
+          <div class="chartsContainer-content-name">安检岗位</div>
+        </div>
+        <div class="chartsContainer-content-content" ref="pieLargeScreenPost" />
+      </div>
+      
+      <div class="chartsContainer-content">
+        <div class="chartsContainer-content-top">
+          <div class="chartsContainer-content-name">查获时间分布</div>
+        </div>
+        <div class="chartsContainer-content-content" ref="lineChart" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { category, appPosition, largeScreenPost, appTimeSpan } from '@/api/item/items'
+import { useTimeOut } from './useTimeOut';
+import { useECharts } from '@/hooks/useEcharts.js';
+import { ref, computed, inject } from 'vue'
+const provideParams = inject('provideParams')
+const pieCategory = ref(null)
+const pieCategoryData = ref([])
+const setChartsOptions = computed(() => {
+  return {
+    tooltip: {
+      trigger: 'item',
+      formatter: '{a} <br/>{b}: {c} ({d}%)'
+    },
+    legend: {
+      show: false
+    },
+    series: [
+      {
+        name: '违禁品类别',
+        type: 'pie',
+        radius: [ '0%', '50%' ], // 环形图设置
+        center: [ '50%', '50%' ],
+        data: pieCategoryData.value.map(item => {
+          return {
+            name: item.name,
+            value: item.total
+          }
+        }),
+        label: {
+          show: true,
+          formatter: function (params) {
+            return params.name + '\n' + params.percent + '%'
+          },
+          color: '#fff',
+          fontSize: 14,
+        },
+        labelLine: {
+          length: 15
+        },
+        emphasis: {
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: 'rgba(0, 0, 0, 0.5)'
+          }
+        }
+      }
+    ]
+  }
+})
+useECharts(pieCategory, setChartsOptions);
+
+const pieAppPosition = ref(null)
+const pieAppPositionData = ref([])
+const setpieAppPositionOptions = computed(() => {
+  return {
+    tooltip: {
+      trigger: 'item',
+      formatter: '{a} <br/>{b}: {c} ({d}%)'
+    },
+    legend: {
+      show: false
+    },
+    series: [
+      {
+        name: '查获部位',
+        type: 'pie',
+        radius: [ '0%', '50%' ], // 环形图设置
+        center: [ '50%', '50%' ],
+        data: pieAppPositionData.value.map(item => {
+          return {
+            name: item.name,
+            value: item.total
+          }
+        }),
+        label: {
+          show: true,
+          formatter: function (params) {
+            return params.name + '\n' + params.percent + '%'
+          },
+          color: '#fff',
+          fontSize: 14,
+        },
+        labelLine: {
+          length: 15
+        },
+        emphasis: {
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: 'rgba(0, 0, 0, 0.5)'
+          }
+        }
+      }
+    ]
+  }
+})
+useECharts(pieAppPosition, setpieAppPositionOptions);
+
+const pieLargeScreenPost = ref(null)
+const pieLargeScreenPostData = ref([])
+const setpieLargeScreenPostOptions = computed(() => {
+  return {
+    tooltip: {
+      trigger: 'item',
+      formatter: '{a} <br/>{b}: {c} ({d}%)'
+    },
+    legend: {
+      show: false
+    },
+    series: [
+      {
+        name: '安检岗位',
+        type: 'pie',
+        radius: [ '0%', '50%' ], // 环形图设置
+        center: [ '50%', '50%' ],
+        data: pieLargeScreenPostData.value.map(item => {
+          return {
+            name: item.name,
+            value: item.total
+          }
+        }),
+        label: {
+          show: true,
+          formatter: function (params) {
+            return params.name + '\n' + params.percent + '%'
+          },
+          color: '#fff',
+          fontSize: 14,
+        },
+        labelLine: {
+          length: 15
+        },
+        emphasis: {
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: 'rgba(0, 0, 0, 0.5)'
+          }
+        }
+      }
+    ]
+  }
+})
+useECharts(pieLargeScreenPost, setpieLargeScreenPostOptions);
+
+
+const lineChart = ref(null)
+const lineChartData = ref([])
+const setlineChartOptions = computed(() => {
+  return {
+    tooltip: {
+      trigger: 'axis'
+    },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      data: lineChartData.value.map(item => item.hourOfDay),
+      axisLabel: {
+        color: '#fff',
+        rotate: 25,
+        fontSize: 12,
+      }
+    },
+    yAxis: {
+      type: 'value',
+      minInterval: 1,
+      max: Math.max(...lineChartData.value.map(item => item.total)) * 2,
+      axisLabel: {
+        color: '#fff',
+      }
+    },
+    series: {
+      data: lineChartData.value.map(item => item.total),
+      type: 'line',
+      smooth: true,
+    },
+    grid: {
+      left: '5%',
+      right: '0%',
+      bottom: '10%',
+      top: '5%',
+      containLabel: true
+    }
+  };
+})
+useECharts(lineChart, setlineChartOptions);
+
+useTimeOut(() => {
+  provideParams.value.inspectDepartmentId && category({
+    startDate: provideParams.value.startDate,
+    endDate: provideParams.value.endDate,
+    inspectDepartmentId: provideParams.value.inspectDepartmentId === 'ALL' ? '' : provideParams.value.inspectDepartmentId
+  }).then(res => {
+    pieCategoryData.value = (res.data || [])
+  })
+  provideParams.value.inspectDepartmentId && appPosition({
+    startDate: provideParams.value.startDate,
+    endDate: provideParams.value.endDate,
+    inspectDepartmentId: provideParams.value.inspectDepartmentId === 'ALL' ? '' : provideParams.value.inspectDepartmentId
+  }).then(res => {
+    pieAppPositionData.value = (res.data || [])
+  })
+  provideParams.value.inspectDepartmentId && largeScreenPost({
+    startDate: provideParams.value.startDate,
+    endDate: provideParams.value.endDate,
+    inspectDepartmentId: provideParams.value.inspectDepartmentId === 'ALL' ? '' : provideParams.value.inspectDepartmentId
+  }).then(res => {
+    pieLargeScreenPostData.value = (res.data || [])
+  })
+ provideParams.value.inspectDepartmentId &&  appTimeSpan({
+    startDate: provideParams.value.startDate,
+    endDate: provideParams.value.endDate,
+    inspectDepartmentId: provideParams.value.inspectDepartmentId === 'ALL' ? '' : provideParams.value.inspectDepartmentId
+  }).then(res => {
+    lineChartData.value = Array.isArray(res.data) ? Array.from({length: 24}, (_, index) => {
+      const item = res.data.find(item => Number(item.hourOfDay) === index)
+      if (item) {
+        return {
+          total: item.total,
+          hourOfDay: `${index}:00`
+        }
+      } else {
+        return {
+          total: 0,
+          hourOfDay: `${index}:00`
+        }
+      }
+    }) : []
+    
+  })
+}, [provideParams])
+
+
+
+</script>
+
+<style lang="scss" scoped>
+.chartsContainer {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background: linear-gradient(to bottom, rgba(8, 97, 117, 0) 0%, #13a2d6 200%);
+  border-radius: 4px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  .chartsContainer-title {
+    height: 42px;
+    width: 100%;
+    background: linear-gradient(to right, #004387 0%, #090B18 100%);
+    border-left: 1px solid #1892CE;
+    line-height: 42px;
+    color: #fff;
+    font-weight: 900;
+    font-size: 20px;
+    text-indent: 1em;
+  }
+
+  .chartsContainer-list {
+    padding: 20px 15px 10px;
+    box-sizing: border-box;
+    display: flex;
+    column-gap: 20px;
+    row-gap: 20px;
+    flex: 1;
+    overflow: hidden;
+    flex-wrap: wrap;
+  }
+
+  .chartsContainer-content {
+    display: flex;
+    flex-direction: column;
+    row-gap: 10px;
+    width: calc(50% - 10px);
+    height: calc(50% - 10px);
+    overflow: hidden;
+
+    .chartsContainer-content-top {
+      display: flex;
+      align-items: center;
+      color: #78DEF5;
+
+      .chartsContainer-content-name {
+        color: #fff;
+        font-weight: bold;
+        font-size: 16px;
+        display: flex;
+        align-items: center;
+
+        &::before {
+          content: '';
+          display: inline-block;
+          border-left: 9px solid #1CB6FF;
+          border-top: 8px solid transparent;
+          border-right: 9px solid transparent;
+          border-bottom: 8px solid transparent;
+        }
+      }
+    }
+
+    .chartsContainer-content-describe {
+      color: #78DEF5;
+      font-size: 12px;
+      font-weight: bold;
+      display: flex;
+      align-items: center;
+    }
+
+    .chartsContainer-content-content {
+      flex: 1;
+      width: 100%;
+      overflow: hidden;
+    }
+  }
+}
+</style>

src/views/dataBigScreen/dashboard/components/pageItems/StandardExecution.vue

@@ -0,0 +1,355 @@
+<template>
+  <ChartsContainer title="标准执行">
+    <div style="height: 100%; flex-direction: column; display: flex;">
+      <div class="cards-container">
+        <div class="card-item" v-for=" item in cardData " :key="item.label">
+          <div>{{ item.label }}</div>
+          <div :style="'--color:' + item.color">{{ item.value }}</div>
+        </div>
+      </div>
+      <div class="charts-container">
+        <div class="charts-container-item">
+          <div class="charts-container-name">问题分布项</div>
+          <div class="charts-container-content" ref="problem" v-show="radarData.grounp.length > 1" />
+          <div class="charts-container-content" v-show="radarData.grounp.length < 1" style="margin-top: 80px; text-align: center; color: #fff">
+            {{ radarData.grounp.length < 1 ? '暂无数据' : '' }}
+          </div>
+        </div>
+        <div class="charts-container-item">
+          <div class="charts-container-name">测试总错题数</div>
+          <div class="charts-container-content" ref="wrongAnswer"/>
+        </div>
+      </div>
+    </div>
+  </ChartsContainer>
+</template>
+
+<script setup>
+import ChartsContainer from '../ChartsContainer.vue';
+import { computed, ref, reactive } from 'vue';
+import { useTimeOut } from './useTimeOut';
+import { getSiteProfile, getDeptProfile, getUserProfile, getPortrait } from '@/api/item/items'
+import { useECharts } from '@/hooks/useEcharts.js';
+const props = defineProps({
+  type: {
+    type: String,
+    default: '' // team, department, station
+  }
+})
+const problem = ref(null)
+const wrongAnswer = ref(null)
+const portraitData = ref({
+})
+const profileData = ref({
+  rankingStats: {}
+})
+const params = inject('provideParams')
+const cardData = computed(() => {
+  return [
+    props.type ? { 
+      label: '巡检排名', 
+      value: `${portraitData.value.stationRanking || 0} / ${portraitData.value.stationTotal || 0}`, 
+      color: '#35D8FF' 
+    } : undefined,
+    { label: '巡检总问题数', value: portraitData.value.sumCount || 0, color: '#35D8FF' },
+    { label: '按期整改', value: portraitData.value.onTimeCompletedCount || 0, color: '#FFC061' },
+    { label: '超期整改', value: portraitData.value.overTimeCompletedCount || 0, color: '#DD4D43' },
+    props.type ? {
+      label: '测试排名',
+      value: `${profileData.value.rankingStats.siteRanking || 0} / ${profileData.value.rankingStats.siteTotalDepts || profileData.value.rankingStats.siteTotalUsers || 0 }`, 
+      color: '#35D8FF'
+    } : undefined,
+    !props.type ? {
+      label: '测试平均分',
+      value: profileData.value.scoreStats && profileData.value.scoreStats.totalAvgScore
+        || profileData.value.avgScore || 0, color: '#35D8FF'
+    } : undefined,
+    !props.type ? { label: '测试总错题数', value: profileData.value.totalErrors || 0, color: '#35D8FF' } : undefined,
+  ].filter(Boolean)
+})
+const radarData = reactive({
+  legend: [],
+  grounp: [],
+  data: []
+})
+const problemOption = computed(() => {
+  return {
+
+    legend: props.type ? {
+      show: false
+    } : {
+      data: radarData.legend,
+      top: 10,
+      textStyle: {
+        color: '#fff',
+        fontSize: 12
+      }
+    },
+    radar: {
+      indicator: radarData.grounp,
+      shape: 'polygon',
+      splitNumber: 4,
+      radius: '50%',
+      center: [ '50%', radarData.legend.length ? '60%' : '50%' ], // 缩小雷达图并居中，为label留出空间
+      axisName: {
+        color: '#fff',
+        fontSize: 12
+      },
+    },
+    series: [ {
+      type: 'radar',
+      data: radarData.data,
+      emphasis: {
+        lineStyle: {
+          width: 4
+        }
+      }
+    } ],
+    tooltip: {
+      trigger: 'item'
+    }
+  };
+})
+useECharts(problem, problemOption)
+
+const wrongAnswerData = reactive({
+  legend: [],
+  grounp: [
+    { text: '操作执行' },
+    { text: '传达学习' },
+    { text: '班组管理' },
+    { text: '工作纪律' },
+    { text: '设施设备' },
+    { text: '通道样貌' }
+  ],
+  data: []
+})
+const wrongAnswerOption = computed(() => {
+  return {
+    legend: {
+      data: wrongAnswerData.legend,
+      top: 15,
+      textStyle: {
+        color: '#fff',
+        fontSize: 12
+      }
+    },
+    radar: {
+      indicator: wrongAnswerData.grounp,
+      shape: 'polygon',
+      splitNumber: 4,
+      radius: '50%',
+      center: [ '50%', wrongAnswerData.legend.length ? '60%' : '50%' ], // 缩小雷达图并居中，为label留出空间
+      axisName: {
+        color: '#fff',
+        fontSize: 12
+      },
+    },
+    series: [ {
+      type: 'radar',
+      data: wrongAnswerData.data,
+      emphasis: {
+        lineStyle: {
+          width: 4
+        }
+      }
+    } ],
+    tooltip: {
+      trigger: 'item'
+    }
+  };
+})
+useECharts(wrongAnswer, wrongAnswerOption)
+const color = ['#408CFF', '#58A55C', '#DD4D43', '#FAC858']
+const problemRadarDataHandler = (result = []) => {
+  const grounpObj = result.reduce((cur, acc) => {
+    if (cur[ acc.deptName ]) {
+      cur[ acc.deptName ].push(acc)
+    } else {
+      cur[ acc.deptName ] = [ acc ]
+    }
+    return cur
+  }, {})
+
+  const grounp = Object.entries(grounpObj)
+
+  radarData.legend =grounp.length > 1 ? grounp.map(item => {
+    return item[ 0 ]
+  }) : []
+
+
+  radarData.grounp = grounp[ 0 ] && grounp[ 0 ][ 1 ] ? grounp[ 0 ][ 1 ].map(item => ({ text: item.name })) : []
+  radarData.data = grounp.map((item, index) => {
+    return {
+      name: props.type === 'team' ? '问题分布项' : item[ 0 ],
+      value: item[ 1 ].map(attr => attr.total),
+      // // 为每个数据系列设置不同的颜色
+      color: color[ index % color.length ],
+      areaStyle: {
+        opacity: 0.5,
+        color: color[ index % color.length ],
+      },
+      lineStyle: {
+        width: 2
+      },
+      itemStyle: {
+        borderWidth: 2,
+        color: color[ index % color.length ],
+      }
+    }
+  })
+}
+
+
+useTimeOut(() => {
+  if (!props.type) {
+    params.value.deptId && getSiteProfile({ siteId: params.value.deptId }).then(res => {
+      profileData.value = res.data
+      const { deptCategoryErrors = [] } = res.data
+
+      wrongAnswerData.legend = deptCategoryErrors.map(item => item.deptName)      
+      wrongAnswerData.data = deptCategoryErrors.map((item, index) => {
+        return {
+          name: item.deptName,
+          value: wrongAnswerData.grounp.map(attr => {
+            const rowData = item.categoryErrors.find(row => row.categoryName === attr.text) || { errorCount: 0 }
+            return rowData.errorCount
+          }),
+          areaStyle: {
+            opacity: 0.5,
+            color: color[ index % color.length ],
+          },
+          lineStyle: {
+            width: 2
+          },
+          itemStyle: {
+            borderWidth: 2,
+            color: color[ index % color.length ],
+          }
+        }
+      })
+    })
+  } else {
+    const invokerApi = props.type === 'department' ? 
+      params.value.deptId && getDeptProfile({ deptId: params.value.deptId || '' }) : 
+      props.type === 'personal' ? getUserProfile({ userId: params.value.deptId || '' }) : getUserProfile({ deptId: params.value.deptId || '' }) 
+    params.value.deptId  && invokerApi.then(res => {
+      profileData.value = res.data
+      const deptCategoryErrors = [res.data]
+
+      wrongAnswerData.legend = []
+      wrongAnswerData.data = deptCategoryErrors.map((item, index) => {
+        return {
+          name: item.deptName,
+          value: wrongAnswerData.grounp.map((attr, index) => {
+            const rowData = item.categoryErrors.find(row => row.categoryName === attr.text) || { errorCount: 0 }
+            return rowData.errorCount
+          }),
+          color: color[ index % color.length ],
+          areaStyle: {
+            opacity: 0.5,
+            color: color[ index % color.length ],
+          },
+          lineStyle: {
+            width: 2
+          },
+          itemStyle: {
+            borderWidth: 2,
+            color: color[ index % color.length ],
+          }
+        }
+      })
+    })
+  }
+  const portraitParams = {}
+  if (props.type === 'department') {
+    portraitParams.checkedDepartmentId = params.value.deptId
+  } else if (props.type === 'team') {
+    portraitParams.checkedTeamId = params.value.deptId
+  } else if (props.type === 'personal') {
+    portraitParams.checkedUserId = params.value.deptId
+  } else {
+    portraitParams.checkedSiteId = params.value.deptId
+  }
+
+  params.value.deptId && getPortrait(portraitParams).then(res => {
+    portraitData.value = res.data || {}
+    const { checkLargeScreenCommonDtoList = [] } = res.data || {}
+    problemRadarDataHandler(checkLargeScreenCommonDtoList.filter(item => item && item.deptName !== '总数'))
+  })
+}, [ params ])
+
+</script>
+
+<style lang="scss" scoped>
+.cards-container {
+  display: flex;
+  align-items: center;
+  column-gap: 15px;
+  padding-bottom: 15px;
+
+  .card-item {
+    flex: 1;
+    color: #fff;
+    font-weight: bold;
+    font-size: 18px;
+    text-align: center;
+    background: url('../../../../../assets/images/cardBg.png') no-repeat;
+    background-size: 100% 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    row-gap: 10px;
+    border-radius: 5px;
+    font-weight: bold;
+    padding: 10px 5px;
+
+    div:nth-child(1) {
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      min-width: 0;
+    }
+
+    div:nth-child(2) {
+      font-size: 20px;
+      color: var(--color)
+    }
+  }
+}
+
+.charts-container {
+  display: flex;
+  flex: 1;
+
+  .charts-container-item {
+    flex: 1;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .charts-container-name {
+    color: #fff;
+    font-weight: bold;
+    font-size: 16px;
+    display: flex;
+    align-items: center;
+
+    &::before {
+      content: '';
+      display: inline-block;
+      border-left: 9px solid #1CB6FF;
+      border-top: 8px solid transparent;
+      border-right: 9px solid transparent;
+      border-bottom: 8px solid transparent;
+    }
+  }
+
+  .charts-container-content {
+    flex: 1;
+    width: 100%;
+  }
+}
+</style>

src/views/dataBigScreen/dashboard/components/pageItems/StationTaskDetails.vue

@@ -0,0 +1,58 @@
+<template>
+  <ChartsContainer title="任务执行情况" name="站级任务明细">
+    <template #other>
+      <span style="margin-right: 10px; font-size: 14px; white-space: nowrap;">{{ tableData.taskName || '' }} 每日{{ tableData.ruleTypeNum || 1 }}次</span>
+      <CustomStyleSelect :options="selectList" v-model="selectActive"/>
+      
+    </template>
+    <template #describe>
+      完成情况：{{ `${tableData.notStartedCount || 0}/${tableData.inProgressCount || 0}/${tableData.completedCount || 0}` }}
+    </template>
+    <div ref="content" style="height: 100%;">
+      <el-table v-auto-scroll :data="tableData.checkLargeScreenInspectionExecuteItemDtoList" border style="width: 100%" height="100%">
+        <el-table-column prop="userName" label="姓名" width="90" />
+        <el-table-column prop="completionPercentage" label="今日完成比例">
+          <template #default="scope">
+            <el-progress
+              :text-inside="true"
+              :stroke-width="16"
+              :percentage="scope.row.completionPercentage"
+              style="--el-border-color-lighter: #fff"
+              color="#58A55C"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column prop="checkOrderCount" label="整改单数" width="90" />
+        <el-table-column prop="rectificationOrderCount" label="不合格项数" width="100" />
+      </el-table>
+    </div>
+  </ChartsContainer>
+</template>
+
+<script setup>
+import CustomStyleSelect from './CustomStyleSelect.vue'
+import ChartsContainer from '../ChartsContainer.vue';
+import { computed,  ref} from 'vue';
+
+const props = defineProps({
+  tableData: {
+    type: Array,
+    default: []
+  }
+})
+const selectActive = ref('')
+const selectList = computed(() => { 
+  const options = props.tableData.map(item => {
+    return ({ label: item.taskName, value: item.taskCode })
+  }) 
+  selectActive.value = options[0] ? options[0].value : ''
+  return options || []
+})
+
+const tableData = computed(() => {
+  return props.tableData.find(item => item.taskCode === selectActive.value) || {}
+})
+
+</script>
+
+<style lang="scss" scoped></style>

src/views/dataBigScreen/dashboard/components/pageItems/SubjectiveImpression.vue

@@ -0,0 +1,209 @@
+<template>
+  <ChartsContainer title="主观印象">
+    <div v-if=" props.type === 'personal' " style="height: 100%;">
+      <div class="chartsContainer-content" v-for=" ( item, index ) in pageData " :key="item.name">
+        <div class="chartsContainer-content-top">
+          <div class="chartsContainer-content-name">{{ item.name }}</div>
+        </div>
+        <div class="chartsContainer-content-content">
+          <el-tag
+            v-for=" attr in item.children "
+            :key="attr.name"
+            :color="colorList[ index % 5 ]"
+            size="large"
+            effect="dark">
+            {{ attr.name }} ( {{ attr.count }} )
+          </el-tag>
+        </div>
+      </div>
+    </div>
+    <div v-else ref="content" style="height: 100%;" />
+  </ChartsContainer>
+</template>
+
+<script setup>
+import ChartsContainer from '../ChartsContainer.vue';
+import { computed, ref } from 'vue';
+import { useTimeOut } from './useTimeOut';
+import { useECharts } from '@/hooks/useEcharts.js';
+import { getCollaborationProfile } from '@/api/item/items'
+const props = defineProps({
+  type: {
+    type: String,
+    default: '' // team, department, station
+  }
+})
+const content = ref(null)
+const pageData = ref([])
+const colorList = [
+  '#509430',
+  '#B99136',
+  '#157BC3',
+  '#9A60B4',
+  '#FC8452'
+]
+const chartData = ref({
+  outerData: [],
+  innerData: []
+})
+const params = inject('provideParams')
+const setOptions = computed(() => {
+  return {
+    tooltip: {
+      trigger: 'item',
+      formatter: '{b}: {c}次 ({d}%)'
+    },
+    legend: {
+      show: false
+    },
+    series: [
+      {
+        type: 'pie',
+        selectedMode: 'single',
+        radius: [ 0, '50%' ],
+        label: {
+          position: 'inner',
+          fontSize: 14,
+          fontWeight: 'bold',
+          show: true,
+          formatter: function (params) {
+            // 对四个字的中文分类名称进行折行处理
+            const name = params.name;
+            if (name && name.length === 4) {
+              return name.substring(0, 2) + '\n' + name.substring(2, 4);
+            }
+            return name;
+          }
+        },
+        labelLine: {
+          show: false
+        },
+        itemStyle: {
+          borderWidth: 2,
+          borderColor: '#fff'
+        },
+        data: chartData.value.innerData
+      },
+      {
+        type: 'pie',
+        radius: [ '55%', '75%' ],
+        label: {
+          position: 'outer',
+          show: true,
+          color: '#fff',
+          fontWeight: 'bold',
+          formatter: '{b}: {c}'
+        },
+        labelLine: {
+          show: true,
+          length: 10,
+          length2: 10
+        },
+        itemStyle: {
+          borderWidth: 2,
+          borderColor: '#fff'
+        },
+        data: chartData.value.outerData
+      }
+    ]
+  }
+})
+props.type !== 'personal' && useECharts(content, setOptions)
+useTimeOut(() => {
+  if (!params.value.deptId) return
+  if (props.type === 'personal') {
+    getCollaborationProfile({ userId: params.value.deptId }).then(res => {
+      const { subjectiveImpressionList = [] } = res.data
+      pageData.value = subjectiveImpressionList
+    })
+  } else {
+    getCollaborationProfile({ deptId: params.value.deptId }).then(res => {
+      const { subjectiveImpressionList = [] } = res.data
+      chartData.value = subjectiveImpressionList.reduce((cur, acc) => {
+        cur.innerData.push({
+          value: acc.count || 0,
+          name: acc.name
+        })
+        // 子项数据
+        if (acc.children && acc.children.length > 0) {
+          acc.children.forEach(child => {
+            cur.outerData.push({
+              value: child.count || 0,
+              name: child.name
+            });
+          });
+        }
+        return cur
+      }, {
+        outerData: [],
+        innerData: []
+      })
+    })
+  }
+
+}, [ params ])
+</script>
+
+<style lang="scss" scoped>
+.chartsContainer-content {
+  padding: 15px;
+  box-sizing: border-box;
+  display: flex;
+  width: 100%;
+  flex: 1;
+  flex-direction: column;
+  row-gap: 10px;
+  overflow: hidden;
+
+  .chartsContainer-content-top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    color: #78DEF5;
+
+    .chartsContainer-content-name {
+      color: #fff;
+      font-weight: bold;
+      font-size: 16px;
+      display: flex;
+      align-items: center;
+
+      &::before {
+        content: '';
+        display: inline-block;
+        border-left: 9px solid #1CB6FF;
+        border-top: 8px solid transparent;
+        border-right: 9px solid transparent;
+        border-bottom: 8px solid transparent;
+      }
+    }
+
+    .chartsContainer-content-other {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  .chartsContainer-content-describe {
+    color: #78DEF5;
+    font-size: 12px;
+    font-weight: bold;
+    display: flex;
+    align-items: center;
+  }
+
+  .chartsContainer-content-content {
+    flex: 1;
+    width: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+    display: flex;
+    flex-wrap: wrap;
+    column-gap: 10px;
+    row-gap: 10px;
+    :deep(.el-tag__content) {
+      font-weight: bold;
+    }
+  }
+}
+</style>

src/views/dataBigScreen/dashboard/components/pageItems/WorkDetails.vue

@@ -0,0 +1,150 @@
+<template>
+  <div class="chartsContainer">
+    <div class="chartsContainer-title">明细情况</div>
+    <div class="chartsContainer-list">
+      <div class="chartsContainer-content" v-for="(item, index) in detailsInfo " :key="item.name">
+        <div class="chartsContainer-content-top">
+          <div class="chartsContainer-content-name">{{ item.name }}</div>
+        </div>
+        <div class="chartsContainer-content-describe">
+          <CustomStyleSegmented v-model="item.stateActive" :options="item.stateOptions" />
+          <CustomStyleSelect style="margin-left: auto; margin-right: 10px; width: 140px;" :options="item.options"
+            v-model="item.active" @change="(row) => dataChange(row, index)"/>
+          <span>开放数量：{{ item.onDutyChannelCount || 0 }}</span>
+        </div>
+        <div class="chartsContainer-content-content">
+          <div style="height: 100%; overflow: hidden;" v-if="item.stateActive === item.stateOptions[0]">
+            <el-table v-auto-scroll :data="item.data"
+              border style="width: 100%" height="100%">
+              <el-table-column prop="channelName" label="通道名称" width="90">
+                <template #default=" scope ">
+                  {{ scope.row.channelName.split( '/' ).at( -1 ) }}
+                </template>
+              </el-table-column>
+              <el-table-column prop="onDutyTeamName" label="上岗班组" />
+              <el-table-column prop="onDutyTime" label="上岗时间" width="130" />
+              <el-table-column prop="onDutyCount" label="在岗人数" width="80" />
+            </el-table>
+          </div>
+          <div style="height: 100%; overflow: hidden;" v-if="item.stateActive === item.stateOptions[1]">
+            <el-table v-auto-scroll :data="item.waitList"
+              border style="width: 100%" height="100%">
+              <el-table-column prop="waitTeamName" label="待岗班组" width="100"/>
+              <el-table-column prop="waitCount" label="待岗人数" width="80" />
+              <el-table-column prop="checkOutTime" label="下通道时间" />
+            </el-table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import CustomStyleSelect from './CustomStyleSelect.vue'
+import CustomStyleSegmented from './CustomStyleSegmented.vue'
+
+
+const detailsInfo = defineModel({
+  default: []
+})
+
+const dataChange = (row, index) => {
+  detailsInfo.value[index].data = row.data
+}
+
+</script>
+
+<style lang="scss" scoped>
+.chartsContainer {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background: linear-gradient(to bottom, rgba(8, 97, 117, 0) 0%, #13a2d6 200%);
+  border-radius: 4px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  .chartsContainer-title {
+    height: 42px;
+    width: 100%;
+    background: linear-gradient(to right, #004387 0%, #090B18 100%);
+    border-left: 1px solid #1892CE;
+    line-height: 42px;
+    color: #fff;
+    font-weight: 900;
+    font-size: 20px;
+    text-indent: 1em;
+  }
+
+  .chartsContainer-list {
+    padding: 20px 15px 10px;
+    box-sizing: border-box;
+    display: flex;
+    column-gap: 20px;
+    flex: 1;
+    overflow: hidden;
+  }
+
+  .chartsContainer-content {
+    display: flex;
+    flex-direction: column;
+    row-gap: 10px;
+    flex: 1;
+    overflow: hidden;
+
+    .chartsContainer-content-top {
+      display: flex;
+      align-items: center;
+      color: #78DEF5;
+
+      .chartsContainer-content-name {
+        color: #fff;
+        font-weight: bold;
+        font-size: 16px;
+        display: flex;
+        align-items: center;
+
+        &::before {
+          content: '';
+          display: inline-block;
+          border-left: 9px solid #1CB6FF;
+          border-top: 8px solid transparent;
+          border-right: 9px solid transparent;
+          border-bottom: 8px solid transparent;
+        }
+      }
+    }
+
+    .chartsContainer-content-describe {
+      color: #78DEF5;
+      font-size: 12px;
+      font-weight: bold;
+      display: flex;
+      align-items: center;
+    }
+
+    .chartsContainer-content-content {
+      flex: 1;
+      overflow: hidden;
+      --el-bg-color: transparent;
+      --el-fill-color-blank: transparent;
+      --el-border-color-lighter: #1887A6;
+      --el-text-color-regular: #fff;
+      --el-fill-color-light: #5e93a1;
+
+      :deep(.el-table) {
+        .el-table__header-wrapper th {
+          background-color: #1CA7C8 !important;
+          color: #fff;
+        }
+
+        .cell {
+          font-weight: bold;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/dataBigScreen/dashboard/components/pageItems/WorkOutput.vue

@@ -0,0 +1,141 @@
+<template>
+  <ChartsContainer title="工作产出">
+    <div class="content-row" v-if=" type ">
+      <div class="content-row-list">
+        <div class="content-row-item">
+          <div>查获排名</div>
+          <div>{{ rank.rank || 0 }} / {{ rank.rankCount || 0 }}</div>
+        </div>
+        <div class="content-row-item">
+          <div>有效查获总数</div>
+          <div>{{ rowTableItem.effectiveSeizureCount.totalCount }}</div>
+        </div>
+        <div class="content-row-item">
+          <div>移交公安总数</div>
+          <div>{{ rowTableItem.referToPoliceCount.count }}</div>
+        </div>
+        <div class="content-row-item">
+          <div>故意隐匿总数</div>
+          <div>{{ rowTableItem.willfulConcealmentCount.count }}</div>
+        </div>
+      </div>
+    </div>
+    <div v-else ref="content" style="height: 100%;">
+      <el-table v-auto-scroll :data="tableData" border style="width: 100%" height="100%">
+        <el-table-column prop="deptName" label="统计维度" min-width="100" />
+        <el-table-column prop="effectiveSeizureCount" label="有效查获总数" />
+        <el-table-column prop="policeTotal" label="移交公安总数" min-width="100" />
+        <el-table-column prop="concealTotal" label="故意隐匿总数" min-width="100" />
+      </el-table>
+    </div>
+  </ChartsContainer>
+</template>
+
+<script setup>
+import ChartsContainer from '../ChartsContainer.vue';
+import { ref } from 'vue';
+import { getSiteStatistics, getModuleMetrics, getRankInfo } from '@/api/item/items'
+import { useTimeOut } from '../pageItems/useTimeOut'
+const props = defineProps({
+  type: {
+    type: String,
+    default: '', // department | team
+  },
+})
+const tableData = ref([])
+const rowTableItem = ref({
+  effectiveSeizureCount: {},
+  referToPoliceCount: {},
+  willfulConcealmentCount: {},
+})
+const rank = ref({})
+const params = inject('provideParams')
+useTimeOut(() => {
+  !props.type && params.value.deptId && getSiteStatistics({ deptId: params.value.deptId }).then(res => {
+    tableData.value = res.data
+  })
+  let apiParams = {}
+  if (props.type === 'personal') {
+    apiParams = { userId: params.value.deptId }
+  } else {
+    apiParams = { deptId: params.value.deptId }
+  }
+  props.type && params.value.deptId && getModuleMetrics({ ...apiParams, userTypeStr: props.type }).then(res => {
+    const { moduleResults } = res.data
+    if (!moduleResults || Object.keys(moduleResults).length === 0) {
+      moduleResults = {
+        item: {
+          effectiveSeizureCount: {},
+          referToPoliceCount: {},
+          willfulConcealmentCount: {},
+        }
+      }
+    }
+
+    if (props.type === 'personal') {
+      rowTableItem.value = {
+        effectiveSeizureCount: {
+          totalCount: moduleResults.item.effectiveSeizureCount
+        },
+        referToPoliceCount: {
+          count: moduleResults.item.referToPoliceCount
+        },
+        willfulConcealmentCount: {
+          count: moduleResults.item.willfulConcealmentCount
+        },
+      }
+    } else {
+      rowTableItem.value = moduleResults.item
+
+    }
+
+  })
+  props.type && params.value.deptId && getRankInfo({ ...apiParams, level: 'station' }).then(res => {
+    rank.value = res.data || {};
+  })
+}, [ params ])
+
+
+</script>
+
+<style lang="scss" scoped>
+.content-row {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  .content-row-title {
+    font-size: 14px;
+    color: #77DBF4;
+    height: 30px;
+  }
+
+  .content-row-list {
+    display: flex;
+    flex: 1;
+    row-gap: 30px;
+    column-gap: 30px;
+    flex-wrap: wrap;
+  }
+
+  .content-row-item {
+    width: calc(50% - 15px);
+    height: calc(50% - 15px);
+    background: url('../../../../../assets/images/cardBg.png') no-repeat;
+    background-size: 100% 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    align-items: center;
+    color: #fff;
+    font-size: 16px;
+    border-radius: 5px;
+    padding: 0 15px;
+    font-weight: bold;
+
+    &>div:nth-child(2) {
+      font-size: 24px;
+    }
+  }
+}
+</style>

src/views/dataBigScreen/dashboard/components/pageItems/WorkPortrait.vue

@@ -0,0 +1,540 @@
+<template>
+  <div class="chartsContainer">
+    <div class="chartsContainer-title">工作画像</div>
+    <div class="chartsContainer-list">
+      <div class="chartsContainer-content">
+        <div class="chartsContainer-content-top">
+          <div class="chartsContainer-content-name">通道开放趋势图</div>
+        </div>
+        <div class="chartsContainer-content-content" ref="channelChart" />
+      </div>
+
+      <div class="chartsContainer-content">
+        <div class="chartsContainer-content-top">
+          <div class="chartsContainer-content-name">查获趋势图</div>
+        </div>
+        <div class="chartsContainer-content-content" ref="seizure" />
+      </div>
+
+      <div class="chartsContainer-content">
+        <div class="chartsContainer-content-top">
+          <div class="chartsContainer-content-name">抽问抽答完成率趋势图</div>
+        </div>
+        <div class="chartsContainer-content-content" ref="levelRateChart" />
+      </div>
+
+      <div class="chartsContainer-content">
+        <div class="chartsContainer-content-top">
+          <div class="chartsContainer-content-name">查获审批时长统计</div>
+        </div>
+        <div class="chartsContainer-content-content">
+          <el-table v-auto-scroll :data="tableData" border style="width: 100%" height="100%">
+            <el-table-column prop="empty" label="指标" min-width="140" />
+            <el-table-column prop="duration" label="时长" />
+          </el-table>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { getChannelOpenTrendChart, getDurationChart, getSeizureTrendChart, getStationLevelRate, getDepartmentLevelRate } from '@/api/item/items'
+import { useTimeOut } from './useTimeOut';
+import { useECharts } from '@/hooks/useEcharts.js';
+import { ref, computed, reactive, inject } from 'vue'
+const dataZoom = [
+  {
+    type: 'slider', // 滑动条型数据区域缩放组件
+    show: true,
+    xAxisIndex: [ 0 ],
+    start: 0,
+    end: 100,
+    height: 20,
+    bottom: 10,
+    backgroundColor: '#f5f5f5',
+    dataBackground: {
+      lineStyle: {
+        color: '#00BCD4',
+        width: 1,
+        opacity: 0.5
+      },
+      areaStyle: {
+        color: 'rgba(0, 188, 212, 0.1)'
+      }
+    },
+    fillerColor: 'rgba(0, 188, 212, 0.2)',
+    borderColor: '#ddd',
+    textStyle: {
+      color: '#666'
+    }
+  },
+  {
+    type: 'inside', // 内置型数据区域缩放组件
+    xAxisIndex: [ 0 ],
+    start: 0,
+    end: 100,
+    zoomOnMouseWheel: true, // 支持鼠标滚轮缩放
+    moveOnMouseMove: true, // 支持鼠标拖拽平移
+    moveOnMouseWheel: false
+  }
+]
+const provideParams = inject('provideParams')
+const channelChart = ref(null)
+const channelChartData = ref([])
+const setChannelChartOptions = computed(() => {
+  return {
+    tooltip: {
+      trigger: 'axis',
+      formatter: function (params) {
+        let result = `日期: ${params[ 0 ].name}<br/>`
+        params.forEach(param => {
+          let value = param.value
+          if (param.seriesName === '开放时长') {
+            value = `${param.value}小时`
+          } else if (param.seriesName === '平均线') {
+            value = `平均值: ${param.value}`
+          }
+          result += `${param.marker} ${param.seriesName}: ${value}<br/>`
+        })
+        return result
+      }
+    },
+    legend: {
+      data: [ '通道开放数', '开放时长', '平均线' ],
+      left: 'center',
+      textStyle: {
+        fontSize: 12,
+        color: '#fff'
+      }
+    },
+    xAxis: {
+      type: 'category',
+      data: channelChartData.value.map(item => item.date),
+      axisLabel: {
+        rotate: 45, // 日期标签旋转45度，避免重叠
+        fontSize: 12,
+        color: '#fff'
+      }
+    },
+    yAxis: [
+      {
+        type: 'value',
+        name: '通道数',
+        position: 'left',
+        min: 0,
+        axisLine: {
+          lineStyle: {
+            color: '#fff'
+          }
+        },
+        axisLabel: {
+          formatter: '{value}',
+          color: "#fff"
+        }
+      },
+      {
+        type: 'value',
+        name: '时长(小时)',
+        position: 'right',
+        axisLine: {
+          lineStyle: {
+            color: '#fff'
+          }
+        },
+        axisLabel: {
+          formatter: '{value}',
+          color: "#fff"
+        }
+      }
+    ],
+    grid: {
+      left: '5%',
+      right: '5%',
+      top: '20%', // 增加顶部间距，降低y轴高度
+      bottom: '15%', // 为缩放控件留出空间
+      containLabel: true
+    },
+    dataZoom: dataZoom,
+    series: [
+      {
+        name: '通道开放数',
+        data: channelChartData.value.map(item => item.openCount || 0),
+        type: 'line',
+        smooth: true,
+        yAxisIndex: 0,
+        lineStyle: {
+          color: '#4CAF50',
+          width: 2
+        },
+        itemStyle: {
+          color: '#4CAF50'
+        },
+        areaStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [ {
+              offset: 0,
+              color: 'rgba(76, 175, 80, 0.3)'
+            }, {
+              offset: 1,
+              color: 'rgba(76, 175, 80, 0.1)'
+            } ]
+          }
+        }
+      },
+      {
+        name: '开放时长',
+        data: channelChartData.value.map(item => item.openDuration || 0),
+        type: 'line',
+        smooth: true,
+        yAxisIndex: 1,
+        lineStyle: {
+          color: '#2196F3',
+          width: 2
+        },
+        itemStyle: {
+          color: '#2196F3'
+        }
+      },
+      {
+        name: '平均线',
+        data: channelChartData.value.map(item => item.avg), // 为每个数据点创建相同的平均值
+        type: 'line',
+        yAxisIndex: 0,
+        lineStyle: {
+          color: '#FF9800',
+          width: 2,
+          type: 'dashed' // 虚线表示平均线
+        },
+        itemStyle: {
+          color: '#FF9800'
+        },
+        symbol: 'none', // 不显示数据点
+        label: {
+          show: true,
+          position: 'end',
+          formatter: `平均值: {c}`
+        }
+      }
+    ]
+  }
+})
+useECharts(channelChart, setChannelChartOptions);
+
+const seizure = ref(null)
+const seizureData = ref([])
+const setSeizureOptions = computed(() => {
+  return {
+    tooltip: {
+      trigger: 'axis',
+      formatter: function (params) {
+        const data = params[ 0 ]
+        return `日期: ${data.name}<br/>查获数量: ${data.value}`
+      }
+    },
+    xAxis: {
+      type: 'category',
+      data: seizureData.value.map(item => item.date),
+      axisLine: {
+        lineStyle: {
+          color: '#fff'
+        }
+      },
+      axisLabel: {
+        color: '#fff',
+        rotate: 45,
+        fontSize: 12,
+      }
+    },
+    yAxis: {
+      name: '查获数量',
+      type: 'value',
+      min: 0,
+      max: function () {
+        // 计算最大值并向上取整到最近的整数，确保五等分
+        const maxTotal = Math.max(...seizureData.value.map(item => item.total || 0), 5);
+        return Math.ceil(maxTotal / 5) * 5;
+      }(),
+      interval: function () {
+        // 固定为五等分
+        const maxTotal = Math.max(...seizureData.value.map(item => item.total || 0), 5);
+        return Math.ceil(maxTotal / 5);
+      }(),
+      axisLine: {
+        lineStyle: {
+          color: '#fff'
+        }
+      },
+      axisLabel: {
+        color: '#fff'
+      },
+      splitLine: {
+        lineStyle: {
+          color: '#fff'
+        }
+      }
+    },
+    grid: {
+      left: '5%',
+      right: '5%',
+      bottom: '15%', // 为缩放控件留出空间
+      containLabel: true
+    },
+    dataZoom: dataZoom,
+    series: [ {
+      name: '查获数量',
+      type: 'line',
+      smooth: true,
+      data: seizureData.value.map(item => item.total || 0),
+      lineStyle: {
+        width: 3,
+        color: '#D45046'
+      },
+      itemStyle: {
+        color: '#D45046'
+      },
+      areaStyle: {
+        color: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [ {
+            offset: 0,
+            color: 'rgba(255, 107, 107, 0.3)'
+          }, {
+            offset: 1,
+            color: 'rgba(255, 107, 107, 0.1)'
+          } ]
+        }
+      }
+    } ]
+  }
+})
+useECharts(seizure, setSeizureOptions);
+
+const selectedLevelType = ref('station')
+const levelRateChart = ref(null)
+const levelRateChartData = ref([])
+const setLevelRateChartOptions = computed(() => {
+  return {
+    tooltip: {
+      trigger: 'axis',
+      formatter: function (params) {
+        const data = params[ 0 ]
+        return `${data.name}<br/>已完成任务: ${data.value}`
+      }
+    },
+    xAxis: {
+      type: 'category',
+      data: levelRateChartData.value.map(item => item.date),
+      axisLabel: {
+        color: '#fff',
+        rotate: 45,
+        fontSize: 12,
+      },
+      axisTick: {
+        alignWithLabel: true
+      }
+    },
+    yAxis: {
+      name: '已完成任务',
+      type: 'value',
+      axisLine: {
+        lineStyle: {
+          color: '#fff'
+        }
+      },
+      axisLabel: {
+        color: '#fff'
+      },
+      splitLine: {
+        lineStyle: {
+          color: '#fff'
+        }
+      }
+    },
+    dataZoom: dataZoom,
+    series: [ {
+      name: '已完成任务',
+      data: levelRateChartData.value.map(item => item.completedTasks),
+      type: 'line',
+      smooth: true,
+      lineStyle: {
+        color: '#1CA7C8',
+        width: 3
+      },
+      itemStyle: {
+        color: '#1CA7C8'
+      },
+      areaStyle: {
+        color: 'rgba(0, 188, 212, 0.3)'
+      }
+    } ],
+    grid: {
+      left: '5%',
+      right: '5%',
+      bottom: '15%', // 增加底部空间给数据缩放组件
+      containLabel: true
+    }
+  }
+})
+useECharts(levelRateChart, setLevelRateChartOptions);
+
+//获取抽问抽答完成率
+const getLevelRateData = (paramsObj) => {
+  let params = {
+    startDate: paramsObj.startDate,
+    endDate: paramsObj.endDate,
+    deptId: paramsObj.inspectDepartmentId
+  }
+  selectedLevelType.value = paramsObj.inspectDepartmentId && String(paramsObj.inspectDepartmentId) !== 'ALL' ? '' : 'station' 
+  let api = selectedLevelType.value == 'station' ? getStationLevelRate : getDepartmentLevelRate
+  if (selectedLevelType.value == 'station') {
+    delete params.deptId
+    params.siteId = 100
+  }
+  api(params).then(res => {
+    levelRateChartData.value = res.data || []
+  })
+}
+
+const tableData = ref([])
+useTimeOut(() => {
+  provideParams.value.deptId && getChannelOpenTrendChart({
+    startTime: provideParams.value.startDate,
+    endTime: provideParams.value.endDate,
+    deptId: provideParams.value.deptId === 'ALL' ? '' : provideParams.value.deptId
+  }).then(res => {
+    channelChartData.value = (res.trend || []).map(item => {
+      return {
+        ...item,
+        avg: res.avg || 0
+      }
+    })
+  })
+  provideParams.value.deptId && getSeizureTrendChart({
+    startTime: provideParams.value.startDate,
+    endTime: provideParams.value.endDate,
+    deptId: provideParams.value.deptId === 'ALL' ? '' : provideParams.value.deptId
+  }).then(res => {
+    seizureData.value = res.data || []
+  })
+  provideParams.value.deptId && getLevelRateData(provideParams.value)
+  provideParams.value.deptId && getDurationChart({
+    startTime: provideParams.value.startDate,
+    endTime: provideParams.value.endDate,
+    deptId: provideParams.value.deptId === 'ALL' ? '' : provideParams.value.deptId
+  }).then(res => {
+    const data = res.data || {}
+    tableData.value = [
+      { empty: '平均审批时长', duration: data.averageDurationText || '-' },
+      { empty: '最长审批时常', duration: data.maxDurationText || '-' },
+      { empty: '最短审批时常', duration: data.minDurationText || '-' }
+    ]
+  })
+}, [provideParams])
+
+
+
+</script>
+
+<style lang="scss" scoped>
+.chartsContainer {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background: linear-gradient(to bottom, rgba(8, 97, 117, 0) 0%, #13a2d6 200%);
+  border-radius: 4px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  .chartsContainer-title {
+    height: 42px;
+    width: 100%;
+    background: linear-gradient(to right, #004387 0%, #090B18 100%);
+    border-left: 1px solid #1892CE;
+    line-height: 42px;
+    color: #fff;
+    font-weight: 900;
+    font-size: 20px;
+    text-indent: 1em;
+  }
+
+  .chartsContainer-list {
+    padding: 20px 15px 10px;
+    box-sizing: border-box;
+    display: flex;
+    column-gap: 20px;
+    flex: 1;
+    overflow: hidden;
+  }
+
+  .chartsContainer-content {
+    display: flex;
+    flex-direction: column;
+    row-gap: 10px;
+    flex: 1;
+    overflow: hidden;
+
+    .chartsContainer-content-top {
+      display: flex;
+      align-items: center;
+      color: #78DEF5;
+
+      .chartsContainer-content-name {
+        color: #fff;
+        font-weight: bold;
+        font-size: 16px;
+        display: flex;
+        align-items: center;
+
+        &::before {
+          content: '';
+          display: inline-block;
+          border-left: 9px solid #1CB6FF;
+          border-top: 8px solid transparent;
+          border-right: 9px solid transparent;
+          border-bottom: 8px solid transparent;
+        }
+      }
+    }
+
+    .chartsContainer-content-describe {
+      color: #78DEF5;
+      font-size: 12px;
+      font-weight: bold;
+      display: flex;
+      align-items: center;
+    }
+
+    .chartsContainer-content-content {
+      flex: 1;
+      width: 100%;
+      --el-bg-color: transparent;
+      --el-fill-color-blank: transparent;
+      --el-border-color-lighter: #1887A6;
+      --el-text-color-regular: #fff;
+      --el-fill-color-light: #5e93a1;
+
+      :deep(.el-table) {
+        .el-table__header-wrapper th {
+          background-color: #1CA7C8 !important;
+          color: #fff;
+        }
+
+        .cell {
+          font-weight: bold;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/dataBigScreen/dashboard/components/pageItems/index.js

@@ -0,0 +1,61 @@
+import StationTaskDetails from './StationTaskDetails.vue'
+import SectionTaskDetails from './SectionTaskDetails.vue'
+import ClassTaskDetails from './ClassTaskDetails.vue'
+import DataViewLeft from './DataViewLeft.vue'
+import ChannelsAndPersonnel from './ChannelsAndPersonnel.vue'
+import ChannelOpeningSituation from './ChannelOpeningSituation.vue'
+import PersonnelOnDutySituation from './PersonnelOnDutySituation.vue'
+import WorkDetails from './WorkDetails.vue'
+import ClassTaskCompletionRank from './ClassTaskCompletionRank.vue'
+import DepartmentalTaskCompletionRank from './DepartmentalTaskCompletionRank.vue'
+import PersonalTaskCompletionRank from './PersonalTaskCompletionRank.vue'
+import InspectionTask from './InspectionTask.vue'
+import SeizeDetails from './SeizeDetails.vue'
+import ProblemDiscovery from './ProblemDiscovery.vue'
+import IssueRectification from './IssueRectification.vue'
+import WorkPortrait from './WorkPortrait.vue'
+
+import QualificationCapability from './QualificationCapability.vue'
+import QualificationCapabilityPersonal from './QualificationCapabilityPersonal.vue'
+import Collaboration from './Collaboration.vue'
+import CollaborationPersonal from './CollaborationPersonal.vue'
+import StandardExecution from './StandardExecution.vue'
+import SubjectiveImpression from './SubjectiveImpression.vue'
+import Attendance from './Attendance.vue'
+import WorkOutput from './WorkOutput.vue'
+import LearningGrowth from './LearningGrowth.vue'
+import DepartmentInfo from './DepartmentInfo.vue'
+import CustomStyleSelect from './CustomStyleSelect.vue'
+export {
+  // dataViewTabs1
+  StationTaskDetails, // 站级任务明细
+  SectionTaskDetails, // 科级任务明细
+  ClassTaskDetails, // 班组级任务明细
+  DataViewLeft, // 任务执行情况工作画像
+  ChannelOpeningSituation, // 通道开放情况
+  PersonnelOnDutySituation, // 人员在岗情况
+  ChannelsAndPersonnel, // 通道及人员情况
+  WorkDetails, // 明细情况
+  ClassTaskCompletionRank, // 班组任务完成排行
+  DepartmentalTaskCompletionRank, // 部门任务完成排行
+  PersonalTaskCompletionRank, // 个人任务完成排行
+  // dataViewTabs2
+  InspectionTask, // 巡检任务
+  SeizeDetails, // 查获明细
+  ProblemDiscovery, // 问题发现
+  IssueRectification, // 问题整改
+  WorkPortrait, // 工作画像
+  // dataViewTabs3
+  QualificationCapability, // 资质能力
+  QualificationCapabilityPersonal,
+  Collaboration, // 协同配合
+  CollaborationPersonal, //
+  StandardExecution, //标准执行
+  SubjectiveImpression, //主观印象
+  Attendance, // 出勤投入
+  WorkOutput, // 工作产出
+  LearningGrowth, // 学习成长
+  DepartmentInfo, // 大队明细
+  // components
+  CustomStyleSelect
+}

src/views/dataBigScreen/dashboard/components/pageItems/useTimeOut.js

@@ -0,0 +1,33 @@
+
+import { ref, onMounted, onUnmounted, watch } from 'vue'
+
+export const useTimeOut = (func, depend = [], once = true) => {
+  const timeOutSelf = ref(null)
+
+  const invoker = () => {
+    
+    if (once) {
+      func()
+    } else {
+      func()
+      timeOutSelf.value = setTimeout(() => {
+        invoker()
+      }, 1000 * 60 * 5)
+    }
+  }
+
+  onMounted(() => {
+    if (depend.length) {
+      depend.forEach(item => {
+        watch(() => item.value, () => {
+          invoker()
+        }, { deep: true, immediate: true })
+      })
+    } else {
+      invoker()
+    }
+  })
+  onUnmounted(() => {
+    clearTimeout(timeOutSelf.value)
+  })
+}

src/views/dataBigScreen/dashboard/components/pageView/HomePage.vue

@@ -0,0 +1,700 @@
+<template>
+  <div class="content">
+    <div class="grid-container">
+      <!-- 左边区域 -->
+      <div class="left-section">
+        <!-- 上层：预警提示和系统状态左右布局 -->
+        <div class="top-section">
+          <HomePageWarning />
+          <HomePageSystemStatus @time-range-change="handleTimeRangeChange" @date-change="handleDateChange" />
+        </div>
+
+        <!-- <div class="bottom-section"> -->
+          <!-- 下层：统计卡片 -->
+          <HomePageStats :type-detail-data="typeDetailData" @sort-change="handleSortChange" />
+        <!-- </div> -->
+      </div>
+
+      <!-- 右边区域 -->
+      <div class="right-section">
+        <HomePageOverview :time-range="selectedTimeRange" :start-date="startDate" :end-date="endDate"
+          :selected-role="selectedRole" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted, computed } from 'vue'
+import HomePageWarning from '../pageItems/HomePageWarning.vue'
+import HomePageSystemStatus from '../pageItems/HomePageSystemStatus.vue'
+import HomePageStats from '../pageItems/HomePageStats.vue'
+import HomePageOverview from '../pageItems/HomePageOverview.vue'
+import useUserStore from '@/store/modules/user'
+import oneIcon from '@/assets/icons/one.png'
+import twoIcon from '@/assets/icons/two.png'
+import threeIcon from '@/assets/icons/three.png'
+import {
+  getHomePage,
+  getSeizureReport,
+  getAttendanceStats,
+  getAccuracyStatistics,
+  getSeizureRanking,
+  getCheckRanking
+} from '@/api/largeScreen/largeScreen'
+
+const userStore = useUserStore()
+const userRole = userStore.roles
+const currentUser = userStore.userInfo
+
+// 角色选择相关（移植自home-new页面）
+const selectedRole = ref('individual')
+
+// 时间选择相关数据
+const selectedTimeRange = ref('year')
+const startDate = ref('')
+const endDate = ref('')
+
+// 数据存储
+const inspectionData = ref({})
+const seizeData = ref({})
+const attendanceStats = ref({})
+const accuracyStatistics = ref({})
+const rankData = ref({
+  seizeRank: 0,
+  seizeModalType: 0,
+  answerRank: 0,
+  answerModalType: 0,
+  checkRank: 0,
+  checkModalType: 0
+})
+
+// 排序状态管理
+const sortStates = ref({
+  '查获上报': { teamSortType: 'asc', deptSortType: 'asc' },
+  '抽问抽答': { teamSortType: 'asc', deptSortType: 'asc' },
+  '巡检': { teamSortType: 'asc', deptSortType: 'asc' }
+})
+
+// 角色判断逻辑（移植自home-new页面）
+const isTeamView = computed(() => {
+  return userRole.includes('banzuzhang')
+})
+
+const isIndividualView = computed(() => {
+  return userRole.includes('SecurityCheck')
+})
+
+// 判断是否为科长角色
+const isKezhang = computed(() => {
+  return userRole.includes('kezhang')
+})
+
+// 判断是否为测试角色
+const isTestRole = computed(() => {
+
+  return userRole.includes('test') || userRole.includes('zhijianke') || userRole.includes('kezhang') || userRole.includes('admin')
+})
+
+// TypeDetail组件数据（移植自home-new页面）
+const typeDetailData = computed(() => {
+  return [
+    {
+      title: '查获上报',
+      linkText: isTestRole.value ? "" : seizePendingCount.value ? `${seizePendingCount.value}条数据待处理` : '',
+      // link: isTeamView.value || isKezhang.value ? '/pages/myToDoList/index' : '/pages/voiceSubmissionDraft/index',
+      statTitle: '查获数量',
+      dividerIndex: 0,
+      dataItems: getSeizeDataItems(),
+      // rankList: getSeizeRankList(),
+      departmentRank: seizeData.value.stationMasterData && seizeData.value.stationMasterData.brigadeRankings?.map(item => ({ ...item,passRate: item.seizureCount?.toFixed(2), name: item.brigadeName })) || [],
+      teamRank: seizeData.value.stationMasterData && seizeData.value.stationMasterData.topThreeTeamRankings?.map(item => ({ ...item, passRate: item.seizureCount?.toFixed(2), name: item.teamName })) || [],
+      bottomTeamRank: [{ passRate: 0, name: '无' }],
+      teamSortType: sortStates.value['查获上报'].teamSortType,
+      deptSortType: sortStates.value['查获上报'].deptSortType,
+      bottomTeamRank: seizeData.value.stationMasterData && seizeData.value.stationMasterData.botomThreeTeamRankings.map(item => ({ ...item, passRate: item.seizureCount.toFixed(2), name: item.teamName })),
+    },
+    {
+      title: '抽问抽答',
+      linkText: isIndividualView.value ? accuracyStatistics.value.hasPendingTask ? '待答题' : '' : '',
+      // link: '/pages/daily-exam/task-list/index',
+      statTitle: '正确率',
+      dividerIndex: 0,
+      dataItems: getQuestionDataItems(),
+      // rankList: getQuestionRankList(),
+      departmentRank: accuracyStatistics.value.topDepts && accuracyStatistics.value.topDepts?.map(item => ({ ...item, passRate: item.accuracy?.toFixed(2) })) || [],
+      teamRank: accuracyStatistics.value.topTeamsInSite && accuracyStatistics.value.topTeamsInSite?.map(item => ({ ...item, passRate: item.accuracy?.toFixed(2) })) || [],
+      bottomTeamRank: accuracyStatistics.value.bottomTeamsInSite && accuracyStatistics.value.bottomTeamsInSite?.map(item => ({ ...item, passRate: item.accuracy?.toFixed(2)})) || [],
+      teamSortType: sortStates.value['抽问抽答'].teamSortType,
+      deptSortType: sortStates.value['抽问抽答'].deptSortType
+    },
+    {
+      title: '巡检',
+      linkText: isTestRole.value ? "" : inspectionData.value.toDoNumber ? `${inspectionData.value.toDoNumber}条待处理任务` : "",
+      // link: '/pages/myToDoList/index',
+      statTitle: '合格率',
+      dividerIndex: 0,
+      dataItems: getInspectionDataItems(),
+      completed: inspectionData.value.doneNumber,
+      pending: inspectionData.value.doingNumber,
+      // rankList: getRankList(),
+      departmentRank: inspectionData.value.brigadeRankingList && inspectionData.value.brigadeRankingList?.map(item => ({ ...item, passRate: (item.passRate * 100)?.toFixed(2) })) || [],
+      teamRank: inspectionData.value.teamRankingList && inspectionData.value.teamRankingList?.map(item => ({ ...item, passRate: (item.passRate * 100)?.toFixed(2) })) || [],
+      bottomTeamRank: [{ passRate: 0, name: '无' }],
+      teamSortType: sortStates.value['巡检'].teamSortType,
+      deptSortType: sortStates.value['巡检'].deptSortType,
+      bottomTeamRank: inspectionData.value.reverseTeamRankingList && inspectionData.value.reverseTeamRankingList.map(item => ({ ...item, passRate: (item.passRate * 100).toFixed(2) })),
+    }
+  ]
+})
+
+// 待处理数量计算
+const seizePendingCount = computed(() => {
+  if (isIndividualView.value) {
+    const { securityCheckerData } = seizeData.value;
+    const { pendingCount } = securityCheckerData || {};
+    return pendingCount;
+  } else if (userRole.includes('kezhang')) {
+    const { sectionMasterData } = seizeData.value;
+    const { pendingCount } = sectionMasterData || {};
+    return pendingCount;
+  } else if (isTeamView.value) {
+    const { teamLeaderData } = seizeData.value;
+    const { pendingCount } = teamLeaderData || {}
+    return pendingCount;
+  }
+  return 0
+})
+
+
+
+// 时间范围变化处理
+const handleTimeRangeChange = (range) => {
+  selectedTimeRange.value = range
+  if (range !== 'custom') {
+
+    const { startDate: newStartDate, endDate: newEndDate } = calculateDateRange(range)
+    startDate.value = newStartDate
+    endDate.value = newEndDate
+  }
+  refreshData()
+}
+
+// 日期变化处理
+const handleDateChange = (dates) => {
+  startDate.value = dates.startDate
+  endDate.value = dates.endDate
+  selectedTimeRange.value = 'custom'
+  refreshData()
+}
+
+// 计算日期范围（移植自home-new页面）
+const calculateDateRange = (timeRange) => {
+
+  const today = new Date();
+  const yesterday = new Date(today);
+  yesterday.setDate(today.getDate() - 1);
+
+  let originStartDate = new Date(yesterday);
+  let originEndDate = new Date(yesterday);
+
+  switch (timeRange) {
+    case 'week':
+      // 近一周：从7天前到昨天
+      originStartDate.setDate(yesterday.getDate() - 6);
+      break;
+    case 'month':
+      // 近一月：从30天前到昨天
+      originStartDate.setDate(yesterday.getDate() - 29);
+      break;
+    case 'quarter':
+      // 近三月：从90天前到昨天
+      originStartDate.setDate(yesterday.getDate() - 89);
+      break;
+    case 'halfYear':
+      // 近半年：从180天前到昨天
+      originStartDate.setDate(yesterday.getDate() - 179);
+      break;
+    case 'year':
+      // 近一年：从365天前到昨天
+      originStartDate.setDate(yesterday.getDate() - 364);
+      break;
+    case 'custom':
+      // 自定义时间：使用用户选择的日期
+      if (startDate.value && endDate.value) {
+        originStartDate = new Date(startDate.value);
+        originEndDate = new Date(endDate.value);
+      }
+      break;
+    default:
+      // 默认近一周
+      originStartDate.setDate(yesterday.getDate() - 364);
+  }
+
+  return {
+    startDate: formatDateForInput(originStartDate),
+    endDate: formatDateForInput(originEndDate)
+  };
+}
+// 格式化日期为输入框格式
+const 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}`;
+}
+// 数据获取方法（移植自home-new页面）
+const getInspectionData = async () => {
+  try {
+    let params = {}
+
+    if (isIndividualView.value) {
+      params = { userId: currentUser.userId }
+    } else {
+      params = { deptId: currentUser.deptId }
+    }
+
+    const { startDate: calcStartDate, endDate: calcEndDate } = calculateDateRange(selectedTimeRange.value)
+
+    params.startDate = calcStartDate
+    params.endDate = calcEndDate
+
+    const res = await getHomePage(params)
+
+    inspectionData.value = res.data || {}
+  } catch (error) {
+    console.error("获取巡检数据失败:", error)
+  }
+}
+
+const getSeizeData = async () => {
+  try {
+    let params = {}
+    const { startDate: calcStartDate, endDate: calcEndDate } = calculateDateRange(selectedTimeRange.value)
+    params.startDate = calcStartDate
+    params.endDate = calcEndDate
+
+    if (!isTestRole.value) {
+      params.dataSource = selectedRole.value
+    }
+
+    const res = await getSeizureReport(params)
+    seizeData.value = res.data || {}
+  } catch (error) {
+    console.error("获取查获数据失败:", error)
+  }
+}
+
+const fetchAttendanceStats = async () => {
+  try {
+    let params = {}
+    const { startDate: calcStartDate, endDate: calcEndDate } = calculateDateRange(selectedTimeRange.value)
+    params.startDate = calcStartDate
+    params.endDate = calcEndDate
+
+    const res = await getAttendanceStats(params)
+    attendanceStats.value = res.data || {}
+  } catch (error) {
+    console.error("获取考勤统计数据失败:", error)
+  }
+}
+
+const fetchAccuracyStatistics = async () => {
+  try {
+    let params = {}
+    const { startDate: calcStartDate, endDate: calcEndDate } = calculateDateRange(selectedTimeRange.value)
+    params.startDate = calcStartDate
+    params.endDate = calcEndDate
+    params.dataSource = selectedRole.value
+    const res = await getAccuracyStatistics(params)
+    accuracyStatistics.value = res.data || {}
+  } catch (error) {
+    console.error("获取抽问抽答数据失败:", error)
+  }
+}
+
+const getRank = async () => {
+  try {
+    let params = {}
+    const { startDate: calcStartDate, endDate: calcEndDate } = calculateDateRange(selectedTimeRange.value)
+    params.startDate = calcStartDate
+    params.endDate = calcEndDate
+    params.dataSource = selectedRole.value
+
+    let idObj = {}
+    if (isIndividualView.value) {
+      idObj = { userId: currentUser.userId }
+    } else {
+      idObj = { deptId: currentUser.deptId }
+    }
+
+    const apiRequests = [getSeizureRanking(params)]
+
+    if (!isTestRole.value) {
+      apiRequests.push(getCheckRanking({ ...params, ...idObj }))
+    }
+
+    const results = await Promise.allSettled(apiRequests)
+    const [seizureRes] = results
+
+    // 处理第一个promise的结果（查获排名）
+    const seizureData = seizureRes?.status === 'fulfilled' ? seizureRes.value?.data : null
+    rankData.value.seizeRank = seizureData && seizureData[0]?.rank || 0
+    rankData.value.seizeModalType = seizureData && seizureData[0]?.medalType || 0
+
+    if (results.length > 1) {
+      // 处理第二个promise的结果（检查排名）
+      const checkResult = results[1];
+
+      const checkData = checkResult?.status === 'fulfilled' ? checkResult.value?.data : {}
+      const { checkLargeScreenHomePageRankingDto = {}, dailyTaskAccuracyRankingDto = {} } = checkData
+      rankData.value.checkRank = checkLargeScreenHomePageRankingDto?.rank || 0
+      rankData.value.checkModalType = checkLargeScreenHomePageRankingDto?.medalType || 0
+      rankData.value.answerRank = dailyTaskAccuracyRankingDto?.rank || 0
+      rankData.value.answerModalType = dailyTaskAccuracyRankingDto?.medalType || 0
+    }
+  } catch (error) {
+    console.error("获取排名数据失败:", error)
+  }
+}
+
+
+
+// 数据项获取方法（完整版，移植自home-new页面）
+const getInspectionDataItems = () => {
+  const { personalPassRate, teamPassRate, departmentPassRate, stationPassRate, teamRankingList, departmentRankingList } = inspectionData.value;
+  if (isIndividualView.value) {
+    // SecurityCheck角色：本人、班组平均数、本科平均数、本站平均数
+    return [
+      { label: '本人', value: ((personalPassRate || 0) * 100).toFixed(2) + '%', isImage: false },
+      { label: '班组平均数', value: ((teamPassRate || 0) * 100).toFixed(2) + '%', isImage: false, color: teamPassRate < personalPassRate ? '#00AE41' : '#F96060' },
+      { label: '本科平均数', value: ((departmentPassRate || 0) * 100).toFixed(2) + '%', isImage: false, color: departmentPassRate < personalPassRate ? '#00AE41' : '#F96060' },
+      { label: '本站平均数', value: ((stationPassRate || 0) * 100).toFixed(2) + '%', isImage: false, color: stationPassRate < personalPassRate ? '#00AE41' : '#F96060' }
+    ];
+  } else if (isTeamView.value) {
+    // banzuzhang角色：班组、本科平均数、本站平均数
+    return [
+      { label: '班组', value: ((teamPassRate || 0) * 100).toFixed(2) + '%', isImage: false },
+      { label: '本科平均数', value: ((departmentPassRate || 0) * 100).toFixed(2) + '%', isImage: false, color: departmentPassRate < teamPassRate ? '#00AE41' : '#F96060' },
+      { label: '本站平均数', value: ((stationPassRate || 0) * 100).toFixed(2) + '%', isImage: false, color: stationPassRate < teamPassRate ? '#00AE41' : '#F96060' }
+    ];
+  } else
+    // if (isKezhang.value) {
+    //   // kezhang角色：全科、本站平均数、前三名班组(isImage: true)
+    //   return [
+    //     { label: '全科', value: ((departmentPassRate || 0) * 100).toFixed(2) + '%', isImage: false },
+    //     { label: '本站平均数', value: ((stationPassRate || 0) * 100).toFixed(2) + '%', isImage: false, color: stationPassRate < departmentPassRate ? '#00AE41' : '#F96060' },
+    //     { label: getObjByRank(teamRankingList, 1).name, value: oneIcon, isImage: true },
+    //     { label: getObjByRank(teamRankingList, 2).name, value: twoIcon, isImage: true },
+    //     { label: getObjByRank(teamRankingList, 3).name, value: threeIcon, isImage: true }
+    //   ];
+    // } else
+    if (isTestRole.value) {
+      // test/zhijianke角色：全站、前三名的大队(isImage: true)
+      return [
+        { label: '全站', value: ((stationPassRate || 0) * 100).toFixed(2) + '%', isImage: false },
+        { label: getObjByRank(departmentRankingList, 1).name, value: oneIcon, isImage: true },
+        { label: getObjByRank(departmentRankingList, 2).name, value: twoIcon, isImage: true },
+        { label: getObjByRank(departmentRankingList, 3).name, value: threeIcon, isImage: true }
+      ];
+    } else {
+      // 默认角色：检查项、完成率
+      return [
+        { label: '检查项', value: '12', isImage: false },
+        { label: '完成率', value: '92%', isImage: false }
+      ];
+    }
+}
+
+//获取抽问抽答
+const getQuestionDataItems = () => {
+  const { personalAccuracy, teamAvgAccuracy, deptAvgAccuracy, siteAvgAccuracy, topDepts, topTeamsInDept } = accuracyStatistics.value;
+  if (isIndividualView.value) {
+    // SecurityCheck角色：本人、班组平均数、本科平均数、本站平均数
+    return [
+      { label: '本人', value: (personalAccuracy || 0) + '%', isImage: false },
+      { label: '班组平均数', value: (teamAvgAccuracy || 0) + '%', isImage: false, color: teamAvgAccuracy < personalAccuracy ? '#00AE41' : '#F96060' },
+      { label: '本科平均数', value: (deptAvgAccuracy || 0) + '%', isImage: false, color: deptAvgAccuracy < personalAccuracy ? '#00AE41' : '#F96060' },
+      { label: '本站平均数', value: (siteAvgAccuracy || 0) + '%', isImage: false, color: siteAvgAccuracy < personalAccuracy ? '#00AE41' : '#F96060' }
+    ];
+  } else if (isTeamView.value) {
+    // banzuzhang角色：班组、本科平均数、本站平均数
+    return [
+      { label: '班组', value: (teamAvgAccuracy || 0) + '%', isImage: false },
+      { label: '本科平均数', value: (deptAvgAccuracy || 0) + '%', isImage: false, color: deptAvgAccuracy < teamAvgAccuracy ? '#00AE41' : '#F96060' },
+      { label: '本站平均数', value: (siteAvgAccuracy || 0) + '%', isImage: false, color: siteAvgAccuracy < teamAvgAccuracy ? '#00AE41' : '#F96060' }
+    ];
+  } else
+    // if (isKezhang.value) {
+    //   // kezhang角色：全科、本站平均数、前三名班组(isImage: true)
+    //   return [
+    //     { label: '全科', value: (deptAvgAccuracy || 0) + '%', isImage: false, },
+    //     { label: '本站平均数', value: (siteAvgAccuracy || 0) + '%', isImage: false, color: siteAvgAccuracy < deptAvgAccuracy ? '#00AE41' : '#F96060' },
+    //     { label: getObjByRank(topTeamsInDept, 1).teamName, value: oneIcon, isImage: true },
+    //     { label: getObjByRank(topTeamsInDept, 2).teamName, value: twoIcon, isImage: true },
+    //     { label: getObjByRank(topTeamsInDept, 3).teamName, value: threeIcon, isImage: true }
+    //   ];
+    // } else 
+    if (isTestRole.value) {
+      // test/zhijianke角色：全站、前三名的大队(isImage: true)
+      return [
+        { label: '全站', value: (siteAvgAccuracy || 0) + '%', isImage: false },
+        { label: getObjByRank(topDepts, 1).name, value: oneIcon, isImage: true },
+        { label: getObjByRank(topDepts, 2).name, value: twoIcon, isImage: true },
+        { label: getObjByRank(topDepts, 3).name, value: threeIcon, isImage: true }
+      ];
+    } else {
+      // 默认角色：检查项、完成率
+      return [
+
+      ];
+    }
+}
+
+//根据角色获取查获数据项目组
+const getSeizeDataItems = () => {
+  
+  if (isIndividualView.value) {
+    // SecurityCheck角色：从securityCheckerData解构
+    const { securityCheckerData } = seizeData.value;
+    const { selfSeizureCount, teamAverage, departmentAverage, stationAverage } = securityCheckerData || {}
+
+    // SecurityCheck角色：本人、班组平均数、本科平均数、本站平均数
+    return [
+      { label: '本人', value: selfSeizureCount || 0, isImage: false },
+      { label: '班组平均数', value: teamAverage || 0, isImage: false, color: teamAverage < selfSeizureCount ? '#00AE41' : '#F96060' },
+      { label: '本科平均数', value: departmentAverage || 0, isImage: false, color: departmentAverage < selfSeizureCount ? '#00AE41' : '#F96060' },
+      { label: '本站平均数', value: (stationAverage && stationAverage.toFixed(2)) || 0, isImage: false, color: stationAverage < selfSeizureCount ? '#00AE41' : '#F96060' }
+    ];
+  } else if (isTeamView.value) {
+    // banzuzhang角色：从teamLeaderData解构
+    const { teamLeaderData } = seizeData.value;
+    const { departmentAverage, stationAverage, teamAverage } = teamLeaderData || {};
+    // banzuzhang角色：班组、本科平均数、本站平均数
+    return [
+      { label: '班组', value: teamAverage || 0, isImage: false },
+      { label: '本科平均数', value: departmentAverage || 0, isImage: false, color: departmentAverage < teamAverage ? '#00AE41' : '#F96060' },
+      { label: '本站平均数', value: (stationAverage && stationAverage.toFixed(2)) || 0, isImage: false, color: stationAverage < teamAverage ? '#00AE41' : '#F96060' }
+    ];
+  } else
+    // if (isKezhang.value) {
+    //   // kezhang角色：从securityCheckerData解构
+    //   const { sectionMasterData } = seizeData.value;
+    //   const { stationAverage, topThreeTeams, departmentAverage } = sectionMasterData || {}
+
+    //   // kezhang角色：全科、本站平均数、前三名班组(isImage: true)
+    //   return [
+    //     { label: '全科', value: departmentAverage || 0, isImage: false },
+    //     { label: '本站平均数', value: stationAverage?.toFixed(2) || 0, isImage: false, color: stationAverage?.toFixed(2) < departmentAverage ? '#00AE41' : '#F96060' },
+    //     { label: getObjByRank(topThreeTeams, 1).teamName, value: oneIcon, isImage: true },
+    //     { label: getObjByRank(topThreeTeams, 2).teamName, value: twoIcon, isImage: true },
+    //     { label: getObjByRank(topThreeTeams, 3).teamName, value: threeIcon, isImage: true }
+    //   ];
+    // } else
+    if (isTestRole.value) {
+      // test/zhijianke角色：从securityCheckerData解构
+      const { stationMasterData } = seizeData.value;
+      const { totalStationSeizure, brigadeRankings } = stationMasterData || {}
+
+      // 对departmentRankings数组按照seizureCount由大到小排序
+      const sortedDepartmentRankings = Array.isArray(brigadeRankings)
+        ? [...brigadeRankings].sort((a, b) => (b.seizureCount || 0) - (a.seizureCount || 0))
+        : [];
+
+      if (sortedDepartmentRankings.length == 0) {
+        return []
+      }
+      // test/zhijianke角色：全站、前三名的大队(isImage: true)
+      return [
+        { label: '全站', value: totalStationSeizure || 0, isImage: false },
+        { label: sortedDepartmentRankings[0].brigadeName, value: oneIcon, isImage: true },
+        { label: sortedDepartmentRankings[1].brigadeName, value: twoIcon, isImage: true },
+        { label: sortedDepartmentRankings[2].brigadeName, value: threeIcon, isImage: true }
+      ];
+    } else {
+      // 默认角色：检查项、完成率
+      return [
+        { label: '检查项', value: '12', isImage: false },
+        { label: '完成率', value: '92%', isImage: false }
+      ];
+    }
+}
+
+// 根据角色获取巡检排名列表
+const getRankList = () => {
+  const { teamRanking, teamTotal, departmentRanking, departmentTotal, stationRanking, stationTotal } = inspectionData.value;
+  // 根据角色返回不同的排名数据
+  if (isIndividualView.value) {
+    // 科长、SecurityCheck角色：显示班组、科级和站级排名
+    return [
+      { label: '班组排名', current: teamRanking || 0, total: teamTotal || 0, percentage: teamTotal ? ((teamRanking || 0) / teamTotal) * 100 : 0 },
+      { label: '科级排名', current: departmentRanking || 0, total: departmentTotal || 0, percentage: departmentTotal ? ((departmentRanking || 0) / departmentTotal) * 100 : 0 },
+      { label: '站级排名', current: stationRanking || 0, total: stationTotal || 0, percentage: stationTotal ? ((stationRanking || 0) / stationTotal) * 100 : 0, type: 'station' }
+    ];
+  } else if (isKezhang.value) {
+    return [
+      { label: '站级排名', current: stationRanking || 0, total: stationTotal || 0, percentage: stationTotal ? ((stationRanking || 0) / stationTotal) * 100 : 0, type: 'station' }
+    ];
+  } else if (isTeamView.value) {
+    // 班组长角色：显示科级和站级排名
+    return [
+      { label: '科级排名', current: departmentRanking || 0, total: departmentTotal || 0, percentage: departmentTotal ? ((departmentRanking || 0) / departmentTotal) * 100 : 0 },
+      { label: '站级排名', current: stationRanking || 0, total: stationTotal || 0, percentage: stationTotal ? ((stationRanking || 0) / stationTotal) * 100 : 0, type: 'station' }
+    ];
+  } else {
+    // 默认角色：显示个人排名
+    return [];
+  }
+}
+
+//获取抽问抽答排名
+const getQuestionRankList = () => {
+  // 根据角色返回不同的排名数据
+  if (isIndividualView.value) {
+    const { teamRanking, deptRanking, siteRanking } = accuracyStatistics.value;
+    // 科长、SecurityCheck角色：显示班组、科级和站级排名
+    return [
+      { label: '班组排名', current: teamRanking?.rank || 0, total: teamRanking?.total || 0, percentage: teamRanking?.total ? ((teamRanking.rank || 0) / teamRanking.total) * 100 : 0 },
+      { label: '科级排名', current: deptRanking?.rank || 0, total: deptRanking?.total || 0, percentage: deptRanking?.total ? ((deptRanking.rank || 0) / deptRanking.total) * 100 : 0 },
+      { label: '站级排名', current: siteRanking?.rank || 0, total: siteRanking?.total || 0, percentage: siteRanking?.total ? ((siteRanking.rank || 0) / siteRanking.total) * 100 : 0, type: 'station' }
+    ];
+  } else if (isKezhang.value) {
+    const { deptInSiteRanking } = accuracyStatistics.value;
+    return [
+      { label: '站级排名', current: deptInSiteRanking?.rank || 0, total: deptInSiteRanking?.total || 0, percentage: deptInSiteRanking?.total ? ((deptInSiteRanking?.rank || 0) / deptInSiteRanking?.total) * 100 : 0, type: 'station' }
+    ];
+  } else if (isTeamView.value) {
+    const { teamInDeptRanking, teamInSiteRanking } = accuracyStatistics.value;
+    // 班组长角色：显示科级和站级排名
+    return [
+      { label: '科级排名', current: teamInDeptRanking?.rank || 0, total: teamInDeptRanking?.total || 0, percentage: teamInDeptRanking?.total ? ((teamInDeptRanking.rank || 0) / teamInDeptRanking.total) * 100 : 0 },
+      { label: '站级排名', current: teamInSiteRanking?.rank || 0, total: teamInSiteRanking?.total || 0, percentage: teamInSiteRanking?.total ? ((teamInSiteRanking.rank || 0) / teamInSiteRanking.total) * 100 : 0, type: 'station' }
+    ];
+  } else {
+    // 默认角色：显示个人排名
+    return [];
+  }
+}
+
+// 根据角色获取巡检排名列表
+const getSeizeRankList = () => {
+  // 根据角色返回不同的排名数据
+  if (isIndividualView.value) {
+    const { securityCheckerData } = seizeData.value;
+    const { teamRanking, departmentRanking, stationRanking } = securityCheckerData || {}
+    // 科长、SecurityCheck角色：显示班组、科级和站级排名
+    return [
+      { label: '班组排名', current: teamRanking?.currentRank || 0, total: teamRanking?.totalItems || 0, percentage: teamRanking?.totalItems ? ((teamRanking.currentRank || 0) / teamRanking.totalItems) * 100 : 0 },
+      { label: '科级排名', current: departmentRanking?.currentRank || 0, total: departmentRanking?.totalItems || 0, percentage: departmentRanking?.totalItems ? ((departmentRanking.currentRank || 0) / departmentRanking.totalItems) * 100 : 0 },
+      { label: '站级排名', current: stationRanking?.currentRank || 0, total: stationRanking?.totalItems || 0, percentage: stationRanking?.totalItems ? ((stationRanking.currentRank || 0) / stationRanking.totalItems) * 100 : 0, type: 'station' }
+    ];
+  } else if (isKezhang.value) {
+    const { sectionMasterData } = seizeData.value;
+    const { stationRanking } = sectionMasterData || {};
+    // 科长、SecurityCheck角色：显示班组、科级和站级排名
+    return [
+      { label: '站级排名', current: stationRanking?.currentRank || 0, total: stationRanking?.totalItems || 0, percentage: stationRanking?.totalItems ? ((stationRanking.currentRank || 0) / stationRanking.totalItems) * 100 : 0, type: 'station' }
+    ];
+  } else if (isTeamView.value) {
+    const { teamLeaderData } = seizeData.value;
+    const { departmentRanking, stationRanking } = teamLeaderData || {}
+    // 班组长角色：显示科级和站级排名
+    return [
+      { label: '科级排名', current: departmentRanking?.currentRank || 0, total: departmentRanking?.totalItems || 0, percentage: departmentRanking?.totalItems ? ((departmentRanking.currentRank || 0) / departmentRanking.totalItems) * 100 : 0 },
+      { label: '站级排名', current: stationRanking?.currentRank || 0, total: stationRanking?.totalItems || 0, percentage: stationRanking?.totalItems ? ((stationRanking.currentRank || 0) / stationRanking.totalItems) * 100 : 0, type: 'station' }
+    ];
+  } else {
+    // 默认角色：显示个人排名
+    return [];
+  }
+}
+
+// 辅助方法：根据排名获取对象
+const getObjByRank = (arr, rank) => {
+  if (!Array.isArray(arr)) return {}
+  let res = arr.find(item => item.rank == rank)
+  return res || {}
+}
+
+// 处理排序变化
+const handleSortChange = (title, type, sortType) => {
+  if (sortStates.value[title]) {
+    if (type === 'team') {
+      sortStates.value[title].teamSortType = sortType
+    } else if (type === 'dept') {
+      sortStates.value[title].deptSortType = sortType
+    }
+  }
+}
+
+// 刷新数据
+const refreshData = async () => {
+  await Promise.allSettled([
+    getInspectionData(),
+    getSeizeData(),
+    fetchAttendanceStats(),
+    fetchAccuracyStatistics(),
+    getRank()
+  ])
+}
+
+onMounted(async () => {
+  // 初始化时间范围
+  const { startDate: initStartDate, endDate: initEndDate } = calculateDateRange(selectedTimeRange.value)
+  startDate.value = initStartDate
+  endDate.value = initEndDate
+
+  // 获取初始数据
+  await refreshData()
+
+
+})
+</script>
+
+<style lang="scss" scoped>
+.content {
+  height: 100%;
+  // background: linear-gradient(135deg, #0E4B71 0%, #037599 100%);
+  color: #fff;
+  padding: 20px;
+  box-sizing: border-box;
+  overflow: hidden;
+
+  .grid-container {
+    height: 100%;
+    display: flex;
+    gap: 20px;
+
+    .left-section {
+      flex: 2;
+      display: flex;
+      flex-direction: column;
+      gap: 15px;
+      overflow: hidden; /* 添加溢出控制 */
+
+      .top-section {
+        flex: 0.33; /* 降低上层区域高度比例 */
+        display: flex;
+        gap: 15px;
+        min-height: 150px; /* 设置最小高度 */
+
+        &>* {
+          flex: 1;
+        }
+      }
+
+      /* 为HomePageStats组件设置明确的高度比例 */
+      & > :last-child {
+        flex: 0.67; /* 增加下层区域高度比例 */
+        height: 100%;
+        overflow: hidden; /* 防止内容溢出 */
+      }
+    }
+
+    .right-section {
+      flex: 0.7;
+      height: 100%;
+    }
+  }
+}
+</style>

src/views/dataBigScreen/dashboard/components/pageView/OrganizationalPortrait.vue

@@ -0,0 +1,295 @@
+<template>
+  <div class="content">
+    <div class="content-top">
+      <div class="content-left">
+        <QualificationCapability />
+      </div>
+      <div class="content-center">
+        <div class="quantity-overview">
+          <div class="quantity-overview-item" v-for=" item in pageInfo " :key="item.label" :data-title="item.label">
+            <div>{{ item.desc }}</div>
+            <div style="font-size: 22px;">{{ item.value }}</div>
+          </div>
+        </div>
+        <Collaboration />
+      </div>
+      <div class="content-right">
+        <StandardExecution />
+        <SubjectiveImpression />
+      </div>
+    </div>
+    <div class="content-bottom">
+      <Attendance />
+      <WorkOutput />
+      <LearningGrowth />
+      <DepartmentInfo />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {
+  QualificationCapability,
+  Collaboration,
+  StandardExecution,
+  SubjectiveImpression,
+  Attendance,
+  WorkOutput,
+  LearningGrowth,
+  DepartmentInfo,
+  CustomStyleSelect
+} from '../pageItems';
+import { getOverview, getDeptUserTree } from '@/api/item/items'
+import moment from 'moment'
+import { useDict } from '@/utils/dict'
+import { useTimeOut } from '../pageItems/useTimeOut'
+import { provide, computed } from 'vue'
+
+const {
+  sys_user_working_style,
+  sys_user_personality_trait,
+  sys_user_capability_performance,
+  sys_user_interpersonal_interaction,
+  sys_user_growth_potential
+} = useDict('sys_user_working_style',
+  'sys_user_personality_trait',
+  'sys_user_capability_performance',
+  'sys_user_interpersonal_interaction',
+  'sys_user_growth_potential')
+
+const params = ref({
+  deptId: ''
+})
+const departments = ref([])
+const provideParams = computed(() => {
+  return {
+    deptId: params.value.deptId
+  }
+})
+try {
+  getDeptUserTree().then(res => {
+    departments.value = (res.data || []).map(item => {
+      return {
+        ...item,
+        value: item.id
+      }
+    })
+    params.value.deptId = departments.value[0] ? departments.value[0].value : 'ALL'
+  })
+} catch (err) {}
+
+
+
+provide('provideParams', provideParams)
+
+const infoNumber = ref({})
+const pageInfo = computed(() => {
+
+  return [
+    {
+      label: '资质能力',
+      desc: '高级资质等级人数',
+      value: infoNumber.value.qualificationLevel
+    },
+    {
+      label: '工作履历',
+      desc: '平均安检工作年限',
+      value: infoNumber.value.workYears
+    },
+    {
+      label: '出勤投入',
+      desc: '人均上岗时长',
+      value: (infoNumber.value.avgWorkingHours || 0) + 'h'
+    },
+    {
+      label: '工作产出',
+      desc: '有效查获数据',
+      value: infoNumber.value.avgSeizureCount
+    },
+    {
+      label: '标准执行',
+      desc: '巡检问题总次数',
+      value: infoNumber.value.checkCount
+    },
+    {
+      label: '学习成长',
+      desc: '平均分',
+      value: infoNumber.value.learningGrowthScore
+    },
+    {
+      label: '协调配合',
+      desc: '工作风格',
+      value: infoNumber.value.workingStyle
+    },
+    {
+      label: '主观印象',
+      desc: '高频词',
+      value: infoNumber.value.subjectiveImpression
+    },
+  ]
+})
+useTimeOut(() => {
+  getOverview({
+    ...provideParams.value
+  }).then((res) => {
+    const data = res.data || {}
+    let dictArr = [
+      ...sys_user_personality_trait.value,
+      ...sys_user_capability_performance.value,
+      ...sys_user_interpersonal_interaction.value,
+      ...sys_user_growth_potential.value
+    ]
+
+    const subjectiveImpression = dictArr.find(item => item.value === data.subjectiveImpression) || { label: data.subjectiveImpression };
+    const workingStyle = sys_user_working_style.value.find(item => item.value === data.workingStyle) || { label: data.workingStyle }
+    infoNumber.value = {
+      ...data,
+      subjectiveImpression: subjectiveImpression.label,
+      workingStyle: workingStyle.label
+    }
+  })
+}, [ provideParams ])
+
+</script>
+
+<style lang="scss" scoped>
+.content {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  row-gap: 15px;
+
+}
+
+.content-top {
+  flex: 1;
+  display: flex;
+  width: 100%;
+  column-gap: 30px;
+  overflow: hidden;
+
+  .content-left {
+   width: 30%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    row-gap: 15px;
+
+    &>*:nth-child(2) {
+      width: 100%;
+      height: 80%;
+    }
+  }
+
+  .content-center {
+    flex: 1;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    row-gap: 10px;
+    overflow: hidden;
+    padding-top: 20px;
+    box-sizing: border-box;
+
+    .userSelectParams {
+      display: flex;
+      column-gap: 30px;
+      --el-input-height: 40px;
+      
+      :deep(.el-select__wrapper) {
+        font-size: 16px;
+      }
+      :deep(.el-input) {
+        --el-input-height: 40px;
+        --el-input-inner-height: 40px;
+      }
+
+      &>*:nth-child(1) {
+        flex: 1;
+      }
+    }
+
+    .public-inheritance-style {
+      width: 100%;
+      display: flex;
+      column-gap: 10px;
+    }
+
+    .quantity-overview {
+      @extend .public-inheritance-style;
+      color: #fff;
+      font-size: 18px;
+      display: flex;
+      column-gap: 15px;
+      row-gap: 25px;
+      padding: 20px 0px 10px;
+      box-sizing: border-box;
+      flex-wrap: wrap;
+
+      .quantity-overview-item {
+        flex: calc(25% - 12px);
+        background: #051E40;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        row-gap: 5px;
+        padding-top: 25px;
+        padding-bottom: 10px;
+        border-radius: 5px;
+        font-weight: bold;
+        position: relative;
+
+        div {
+          overflow: hidden;
+          width: 100%;
+          text-align: center;
+        }
+
+        &::before {
+          display: block;
+          content: attr(data-title);
+          position: absolute;
+          white-space: nowrap;
+          padding: 2px 10px;
+          top: 0px;
+          left: 50%;
+          width: fit-content;
+          transform: translate(-50%, -50%);
+          background: #062047;
+          border: 1px solid #064371;
+          color: #32CDF4;
+          border-radius: 6px;
+        }
+      }
+    }
+  }
+
+  .content-right {
+    width: 30%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    row-gap: 15px;
+
+    &>*:nth-child(2) {
+      width: 100%;
+      height: 80%;
+    }
+
+  }
+}
+
+.content-bottom {
+  height: 30%;
+  display: flex;
+  column-gap: 15px;
+
+  &>*:nth-child(4) {
+    min-width: 40%;
+  }
+}
+</style>

src/views/dataBigScreen/dashboard/components/pageView/OrganizationalPortraitSectionLevel.vue

@@ -0,0 +1,449 @@
+<template>
+  <div class="content">
+    <div class="content-top">
+      <div class="content-left">
+        <div class="personal" v-if=" pageType === 'personal' ">
+          <div>
+            <QualificationCapabilityPersonal />
+          </div>
+          <div style="height: 280px;">
+            <Attendance type="personal" />
+          </div>
+        </div>
+        <div class="department" v-else>
+          <QualificationCapability />
+        </div>
+
+      </div>
+      <div class="content-center">
+        <div class="userSelectParams">
+          <CustomStyleSelect type="tree" :propsConfig="{ value: 'id', showPrefix: false }" v-model="params.deptId"
+            :options="departments" />
+        </div>
+        <div class="quantity-overview">
+          <div class="quantity-overview-item" v-for=" item in pageInfo " :key="item.label" :data-title="item.label">
+            <div>{{ item.desc }}</div>
+            <div style="font-size: 22px;">{{ getLabel( item.value, item.list ) }}</div>
+          </div>
+        </div>
+        <template v-if=" pageType === 'personal' ">
+          <div style="flex: 1; overflow: hidden;">
+            <CollaborationPersonal />
+          </div>
+          <div class="quantity-buttom">
+            <WorkOutput type="personal" />
+            <LearningGrowth type="personal" />
+          </div>
+        </template>
+        <Collaboration v-else />
+      </div>
+      <div class="content-right">
+        <!-- if 销毁组件 重制布局 -->
+        <template v-if="pageType === 'personal'">
+          <StandardExecution :type="pageType" />
+          <SubjectiveImpression :type="pageType" />
+        </template>
+        <template v-else>
+          <StandardExecution :type="pageType" />
+          <SubjectiveImpression :type="pageType" />
+        </template>
+      </div>
+    </div>
+    <div class="content-bottom" v-if=" pageType !== 'personal' ">
+      <Attendance :type="pageType" />
+      <WorkOutput :type="pageType" />
+      <LearningGrowth :type="pageType" />
+      <DepartmentInfo :type="pageType" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {
+  QualificationCapability,
+  Collaboration,
+  StandardExecution,
+  SubjectiveImpression,
+  Attendance,
+  WorkOutput,
+  LearningGrowth,
+  DepartmentInfo,
+  CustomStyleSelect,
+  CollaborationPersonal,
+  QualificationCapabilityPersonal
+} from '../pageItems';
+import { getOverview, getDeptUserTree } from '@/api/item/items'
+import moment from 'moment'
+import { useDict } from '@/utils/dict'
+import { useTimeOut } from '../pageItems/useTimeOut'
+import { provide, computed } from 'vue'
+
+const dictList = useDict(
+  'sys_user_working_style',
+  'sys_user_personality_trait',
+  'sys_user_capability_performance',
+  'sys_user_interpersonal_interaction',
+  'sys_user_growth_potential')
+
+const params = ref({
+  deptId: ''
+})
+const defaultIndex = ref(0)
+const flatDepartments = ref([])
+const pageType = computed(() => {
+  const item = flatDepartments.value.find(item => String(item.id) === String(params.value.deptId)) || { type: 'department' }
+  return item.type
+})
+
+const departments = ref([])
+const provideParams = computed(() => {
+  return {
+    deptId: params.value.deptId
+  }
+})
+
+try {
+  getDeptUserTree().then(res => {
+    const flatDepartmentsList = []
+    const appendItem = (list) => {
+      list.forEach(attr => {
+        let type = 'department'
+        if (attr.deptType === 'DEPARTMENT') {
+          type = 'department'
+        }
+        if (attr.deptType === 'TEAMS') {
+          type = 'team'
+        }
+        if (attr.nodeType === 'user') {
+          type = 'personal'
+        }
+        flatDepartmentsList.push({
+          id: attr.id,
+          type: type
+        })
+        if (attr.children && attr.children.length) {
+          appendItem(attr.children)
+        }
+      })
+    }
+    departments.value = res.data.reduce((cur, acc) => {
+      acc.children && acc.children.length && cur.push(...acc.children)
+      appendItem(acc.children)
+      return cur
+    }, [])
+    flatDepartments.value = flatDepartmentsList
+    params.value.deptId = departments.value[ 0 ] ? departments.value[ 0 ].id : ''
+  })
+} catch (err) { }
+
+
+
+
+provide('provideParams', provideParams)
+
+const infoNumber = ref({})
+const pageInfo = computed(() => {
+  return pageType.value === 'personal' ? [
+    {
+      label: '资质能力',
+      value: infoNumber.value.qualificationLevel
+    },
+    {
+      label: '工作履历',
+      desc: '安检工作年限',
+      value: infoNumber.value.workYears
+    },
+    {
+      label: '出勤投入',
+      desc: '上岗时长',
+      value: (infoNumber.value.avgWorkingHours || 0) + 'h'
+    },
+    {
+      label: '工作产出',
+      desc: '有效查获数据',
+      value: infoNumber.value.avgSeizureCount
+    },
+    {
+      label: '标准执行',
+      desc: '巡检问题总次数',
+      value: infoNumber.value.checkCount
+    },
+    {
+      label: '学习成长',
+      desc: '平均分',
+      value: infoNumber.value.learningGrowthScore
+    },
+    {
+      label: '协调配合',
+      desc: '工作风格',
+      value: infoNumber.value.workingStyle,
+      list: dictList.sys_user_working_style.value
+    },
+    {
+      label: '主观印象',
+      desc: '高频词',
+      value: infoNumber.value.subjectiveImpression,
+      list: [
+        ...dictList.sys_user_personality_trait.value,
+        ...dictList.sys_user_capability_performance.value,
+        ...dictList.sys_user_interpersonal_interaction.value,
+        ...dictList.sys_user_growth_potential.value
+      ]
+    },
+  ] : [
+    {
+      label: '资质能力',
+      desc: '高级资质等级人数',
+      value: infoNumber.value.qualificationLevel
+    },
+    {
+      label: '工作履历',
+      desc: '平均安检工作年限',
+      value: infoNumber.value.workYears
+    },
+    {
+      label: '出勤投入',
+      desc: '人均上岗时长',
+      value: (infoNumber.value.avgWorkingHours || 0) + 'h'
+    },
+    {
+      label: '工作产出',
+      desc: '有效查获数据',
+      value: infoNumber.value.avgSeizureCount
+    },
+    {
+      label: '标准执行',
+      desc: '巡检问题总次数',
+      value: infoNumber.value.checkCount
+    },
+    {
+      label: '学习成长',
+      desc: '平均分',
+      value: infoNumber.value.learningGrowthScore
+    },
+    {
+      label: '协调配合',
+      desc: '工作风格',
+      value: infoNumber.value.workingStyle,
+      list: dictList.sys_user_working_style.value
+    },
+    {
+      label: '主观印象',
+      desc: '高频词',
+      value: infoNumber.value.subjectiveImpression,
+      list: [
+        ...dictList.sys_user_personality_trait.value,
+        ...dictList.sys_user_capability_performance.value,
+        ...dictList.sys_user_interpersonal_interaction.value,
+        ...dictList.sys_user_growth_potential.value
+      ]
+    },
+  ]
+})
+const getLabel = (value, list = []) => {
+  const item = list.find(item => item.value.includes(value)) || { label: value }
+  return item.label
+}
+useTimeOut(() => {
+  getOverview(pageType.value === 'personal' ? { userId: provideParams.value.deptId } : {
+    ...provideParams.value
+  }).then((res) => {
+    const data = res.data || {}
+    infoNumber.value = {
+      ...data
+    }
+  })
+}, [ provideParams ])
+
+defineExpose({
+  next: () => {
+    defaultIndex.value++
+    if (defaultIndex.value === departments.value.length) {
+      return () => { // resetIndex
+        defaultIndex.value = 0
+      }
+    } else {
+      params.value.deptId = departments.value[ defaultIndex.value ] ? departments.value[ defaultIndex.value ].id : ''
+      return false
+    }
+  }
+})
+
+</script>
+
+<style lang="scss" scoped>
+.content {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  row-gap: 15px;
+
+}
+
+.content-top {
+  flex: 1;
+  display: flex;
+  width: 100%;
+  column-gap: 30px;
+  overflow: hidden;
+
+  .content-left {
+    width: 30%;
+    height: 100%;
+
+    .department {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      row-gap: 15px;
+
+      &>*:nth-child(2) {
+        width: 100%;
+        height: 70%;
+      }
+    }
+
+    .personal {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      row-gap: 15px;
+
+      &>div:nth-child(1) {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        row-gap: 15px;
+
+        &>*:nth-child(2) {
+          width: 100%;
+          height: 70%;
+        }
+      }
+    }
+
+  }
+
+  .content-center {
+    flex: 1;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    row-gap: 10px;
+    overflow: hidden;
+    padding-top: 20px;
+    box-sizing: border-box;
+
+    .userSelectParams {
+      display: flex;
+      column-gap: 30px;
+      --el-input-height: 40px;
+
+      :deep(.el-select__wrapper) {
+        font-size: 16px;
+      }
+
+      :deep(.el-input) {
+        font-size: 16px;
+        --el-input-height: 40px;
+        --el-input-inner-height: 40px;
+      }
+
+      &>*:nth-child(1) {
+        flex: 1;
+      }
+    }
+
+    .public-inheritance-style {
+      width: 100%;
+      display: flex;
+      column-gap: 10px;
+    }
+
+    .quantity-overview {
+      @extend .public-inheritance-style;
+      color: #fff;
+      font-size: 18px;
+      display: flex;
+      column-gap: 15px;
+      row-gap: 25px;
+      padding: 20px 0px 10px;
+      box-sizing: border-box;
+      flex-wrap: wrap;
+
+      .quantity-overview-item {
+        flex: calc(25% - 12px);
+        background: #051E40;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        row-gap: 5px;
+        padding-top: 25px;
+        padding-bottom: 10px;
+        border-radius: 5px;
+        font-weight: bold;
+        position: relative;
+
+        div {
+          overflow: hidden;
+          width: 100%;
+          text-align: center;
+        }
+
+        &::before {
+          display: block;
+          content: attr(data-title);
+          position: absolute;
+          white-space: nowrap;
+          padding: 2px 10px;
+          top: 0px;
+          left: 50%;
+          width: fit-content;
+          transform: translate(-50%, -50%);
+          background: #062047;
+          border: 1px solid #064371;
+          color: #32CDF4;
+          border-radius: 6px;
+        }
+      }
+    }
+
+    .quantity-buttom {
+      height: 280px;
+      display: flex;
+      column-gap: 15px;
+    }
+  }
+
+  .content-right {
+    width: 30%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    row-gap: 15px;
+
+    &>*:nth-child(2) {
+      width: 100%;
+      height: 80%;
+    }
+
+  }
+}
+
+.content-bottom {
+  height: 30%;
+  display: flex;
+  column-gap: 15px;
+
+  &>*:nth-child(4) {
+    min-width: 40%;
+  }
+}
+</style>

src/views/dataBigScreen/dashboard/components/pageView/QualityControl.vue

@@ -0,0 +1,248 @@
+<template>
+  <div class="content">
+    <div class="content-top">
+      <div class="content-left">
+        <InspectionTask />
+      </div>
+      <div class="content-center">
+        <div class="userSelectParams">
+          <CustomStyleSelect v-if="type === 'brigade'" v-model="params.inspectDepartmentId" :options="departments" />
+          <el-date-picker
+            v-model="params.time"
+            type="daterange"
+            range-separator="至"
+            value-format="YYYY-MM-DD"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间" />
+        </div>
+        <div class="quantity-overview">
+          <div class="quantity-overview-item">
+            <div>查获总数</div>
+            <div style="font-size: 24px;">{{ infoNumber.total }}</div>
+          </div>
+          <div class="quantity-overview-item">
+            <div>移交公安</div>
+            <div style="font-size: 24px;">{{ infoNumber.policeTotal }}</div>
+          </div>
+          <div class="quantity-overview-item">
+            <div>隐匿携带</div>
+            <div style="font-size: 24px;">{{ infoNumber.concealTotal }}</div>
+          </div>
+        </div>
+        <SeizeDetails />
+      </div>
+      <div class="content-right">
+        <ProblemDiscovery />
+        <IssueRectification :type="type" />
+      </div>
+    </div>
+    <div class="content-bottom">
+      <WorkPortrait />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {
+  InspectionTask,
+  SeizeDetails,
+  ProblemDiscovery,
+  IssueRectification,
+  WorkPortrait,
+  CustomStyleSelect
+} from '../pageItems';
+import { getAppTotalSome, getDeptList } from '@/api/item/items'
+import moment from 'moment'
+import { useTimeOut } from '../pageItems/useTimeOut'
+import { onMounted, onUnmounted, provide, computed } from 'vue'
+const props = defineProps({
+  type: {
+    type: String,
+    default: 'station'
+  }
+})
+
+const params = ref({
+  time: [moment().subtract(91, 'days').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')],
+  inspectDepartmentId: props.type === 'brigade' ? '' : 'ALL'
+})
+
+const provideParams = computed(() => {
+  return {
+    startDate: params.value.time && params.value.time[0] ? params.value.time[0] : undefined,
+    endDate:  params.value.time && params.value.time[1] ? params.value.time[1] : undefined,
+    inspectDepartmentId: params.value.inspectDepartmentId,
+    deptId: params.value.inspectDepartmentId,
+    checkedDepartmentId: params.value.inspectDepartmentId,
+  }
+})
+
+provide('provideParams', provideParams)
+
+const infoNumber = ref({})
+useTimeOut(() => {
+  getAppTotalSome({
+    startDate: provideParams.value.startDate,
+    endDate: provideParams.value.endDate,
+    inspectDepartmentId: provideParams.value.inspectDepartmentId === 'ALL' ? '' :  provideParams.value.inspectDepartmentId 
+  }).then(res => {
+    infoNumber.value = res.data
+  })
+}, [provideParams])
+const departments = ref(props.type === 'brigade' ? [] : [
+  { value: 'ALL', label: '全站' },
+])
+function buildBrigadeOptions (tree = []) {
+  const result = [];
+  function dfs (node, path = []) {
+    const currentPath = [ ...path, node.label ];
+    // 如果是 DEPARTMENT 节点
+    if (node.deptType === "BRIGADE") {
+      result.push({
+        text: currentPath.join(' / '),
+        value: node.id
+      });
+    }
+    // 继续递归子节点
+    if (node.children && Array.isArray(node.children)) {
+      node.children.forEach(child => dfs(child, currentPath));
+    }
+  }
+  tree.forEach(root => dfs(root));
+  return result;
+}
+const defaultIndex = ref(0)
+onMounted(() => {
+  props.type === 'brigade' && getDeptList().then(res => {
+    departments.value = [ ...departments.value, ...buildBrigadeOptions(res.data || []).map(item => ({
+      ...item,
+      label: item.text?.split('/')[ 1 ],
+      value: item.value.toString()
+    }))]
+    params.value.inspectDepartmentId = departments.value && departments.value[0] ? departments.value[0].value : ''
+  })
+})
+
+defineExpose({
+  next: () => {
+    defaultIndex.value++
+    if (defaultIndex.value === departments.value.length) {
+      return () => { // resetIndex
+        defaultIndex.value = 0
+      }
+    } else {
+      params.value.inspectDepartmentId = departments.value[ defaultIndex.value ] ? departments.value[ defaultIndex.value ].value : ''
+      return false
+    }
+  }
+})
+
+</script>
+
+<style lang="scss" scoped>
+.content {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  row-gap: 15px;
+  :deep(.el-select__wrapper) {
+    font-size: 16px;
+  }
+}
+
+.content-top {
+  flex: 1;
+  display: flex;
+  width: 100%;
+  column-gap: 10px;
+  overflow: hidden;
+
+  .content-left {
+    width: 30%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+
+    &>*:nth-child {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .content-center {
+    flex: 1;
+    // min-width: 800px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    row-gap: 10px;
+    overflow: hidden;
+
+    .userSelectParams {
+      display: flex;
+      column-gap: 30px;
+      padding: 20px 20px 0;
+      --el-input-height: 40px;
+      --el-font-size-base: 18px;
+      &>*:nth-child(1) {
+        flex: 1;
+      }
+
+      &>*:nth-child(2) {
+        flex: 2;
+      }
+    }
+
+    .public-inheritance-style {
+      width: 100%;
+      display: flex;
+      column-gap: 10px;
+    }
+
+    .quantity-overview {
+      @extend .public-inheritance-style;
+      height: 140px;
+      color: #fff;
+      font-size: 20px;
+      display: flex;
+      column-gap: 25px;
+      padding: 10px 20px 10px;
+      box-sizing: border-box;
+
+      .quantity-overview-item {
+        flex: 1;
+        height: 100%;
+        background: #051E40;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        row-gap: 10px;
+        border-radius: 5px;
+        font-weight: bold;
+      }
+    }
+  }
+
+  .content-right {
+    width: 30%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    row-gap: 15px;
+
+    &>*:nth-child {
+      width: 100%;
+      height: 50%;
+    }
+
+  }
+}
+
+.content-bottom {
+  height: 35%
+}
+</style>

src/views/dataBigScreen/dashboard/components/pageView/RealTimeStatus.vue

@@ -0,0 +1,148 @@
+<template>
+  <div class="content">
+    <div class="content-left">
+      <DataViewLeft />
+    </div>
+    <div class="content-center">
+      <div class="quantity-overview">
+        <div class="quantity-overview-item">
+          <div>今日总查获数</div>
+          <div style="font-size: 26px;">{{ infoNumber.total }}</div>
+        </div>
+        <div class="quantity-overview-item">
+          <div>今日移交公安</div>
+          <div style="font-size: 26px;">{{ infoNumber.policeTotal }}</div>
+        </div>
+        <div class="quantity-overview-item">
+          <div>今日隐匿携带</div>
+          <div style="font-size: 26px;">{{ infoNumber.concealTotal }}</div>
+        </div>
+      </div>
+      <ChannelsAndPersonnel />
+    </div>
+    <div class="content-right">
+      <ClassTaskCompletionRank />
+      <DepartmentalTaskCompletionRank />
+      <PersonalTaskCompletionRank />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {
+  DataViewLeft,
+  ChannelsAndPersonnel,
+  ClassTaskCompletionRank,
+  DepartmentalTaskCompletionRank,
+  PersonalTaskCompletionRank
+} from '../pageItems';
+import { getTotalSome } from '@/api/item/items'
+import { onMounted } from 'vue';
+import moment from 'moment'
+import { useTimeOut } from '../pageItems/useTimeOut'
+const infoNumber = ref({})
+useTimeOut(() => {
+  getTotalSome({
+    startDate: moment().format('YYYY-MM-DD'),
+    endDate: moment().format('YYYY-MM-DD'),
+  }).then(res => {
+    infoNumber.value = res.data
+  })
+})
+</script>
+
+<style lang="scss" scoped>
+.content {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  column-gap: 10px;
+  overflow: hidden;
+
+  .content-left {
+    width: 30%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+
+    &>*:nth-child(1) {
+      width: 100%;
+      height: 36%;
+    }
+
+    &>*:nth-child(2) {
+      width: 100%;
+      height: 32%;
+    }
+
+    &>*:nth-child(3) {
+      width: 100%;
+      height: 32%;
+    }
+  }
+
+  .content-center {
+    flex: 1;
+    min-width: 780px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    row-gap: 10px;
+    overflow: hidden;
+
+    .public-inheritance-style {
+      width: 100%;
+      display: flex;
+      column-gap: 10px;
+    }
+
+    .quantity-overview {
+      @extend .public-inheritance-style;
+      height: 140px;
+      color: #fff;
+      font-size: 20px;
+      display: flex;
+      column-gap: 25px;
+      padding: 20px 20px 10px;
+      box-sizing: border-box;
+
+      .quantity-overview-item {
+        flex: 1;
+        height: 100%;
+        background: #051E40;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        row-gap: 10px;
+        border-radius: 5px;
+        font-weight: bold;
+      }
+    }
+  }
+
+  .content-right {
+    width: 30%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+
+    &>*:nth-child(1) {
+      width: 100%;
+      height: 36%;
+    }
+
+    &>*:nth-child(2) {
+      width: 100%;
+      height: 32%;
+    }
+
+    &>*:nth-child(3) {
+      width: 100%;
+      height: 32%;
+    }
+  }
+}
+</style>

src/views/dataBigScreen/dashboard/index.vue

@@ -1,41 +1,49 @@
 <template>
-  <dashboard-container>
-    <top-title class="wow slideInDown" name="智慧大屏监控中心"></top-title>
-    <template #left>
-      <div class="item">
-        <!-- 重大违禁品情况 -->
-        <major-contraband-cases />
-      </div>
-      <div class="item">
-        <!-- 故意隐匿情况 -->
-        <deliberate-concealment />
-      </div>
-      <div class="item">
-        <div class="dashboard-title">查获类别分布</div>
-        <pie-chart />
-      </div>
-    </template>
+  <dashboard-container class="page" ref="page">
+    <top-title class="wow slideInDown" :name="'安检站分级质控监控大屏'" />
     <template #center>
-      <div class="item item-center">
-        <classification-of-seized-quantity />
-      </div>
-      <div class="item">
-        <!-- 查获排名 -->
-        <seized-ranking />
+      <div class="left">
+        <div :class="{ carouselItemBtn: true, carouselItemActive: activeIndex === 0 }" @click="setActiveItem(0)">首页看板
+        </div>
+        <div :class="{ carouselItemBtn: true, carouselItemActive: activeIndex === 1 }" @click="setActiveItem(1)">实时状态
+        </div>
+        <div :class="{ carouselItemBtn: true, carouselItemActive: activeIndex === 2 }" @click="setActiveItem(2)">站级质控
+        </div>
+        <div :class="{ carouselItemBtn: true, carouselItemActive: activeIndex === 3 }" @click="setActiveItem(3)">队级质控
+        </div>
       </div>
-    </template>
-    <template #right>
-      <div class="item">
-        <!-- 查获通道分布 -->
-        <channel-distribution />
+      <div class="right">
+        <div :class="{ carouselItemBtn: true, carouselItemActive: activeIndex === 4 }" @click="setActiveItem(4)">站级画像
+        </div>
+        <div :class="{ carouselItemBtn: true, carouselItemActive: activeIndex === 5 }" @click="setActiveItem(5)">队级画像
+        </div>
+        <!-- <div :class="{ carouselItemBtn: true, carouselItemActive: activeIndex === 6 || activeIndex === 7  }" @click="setActiveItem( 6 )">班组画像
+        </div> -->
+        <!-- <div :class="{ carouselItemBtn: true, carouselItemActive: activeIndex === 7 }" @click="setActiveItem( 7 )">个人画像
+        </div> -->
       </div>
-      <div class="item">
-        <div class="dashboard-title">查获时段分布</div>
-        <line-chart />
-      </div>
-      <div class="item">
-        <div class="dashboard-title">查获岗位分布</div>
-        <pie-radius-chart />
+      <div class="warp" ref="content">
+        <el-carousel style="height: 100%;" height="100%" :autoplay="false" motion-blur arrow="never"
+          indicator-position="none" interval="60000" ref="carousel">
+          <el-carousel-item>
+            <HomePage v-if="activeIndex === 0" />
+          </el-carousel-item>
+          <el-carousel-item>
+            <RealTimeStatus v-if="activeIndex === 1" />
+          </el-carousel-item>
+          <el-carousel-item>
+            <QualityControl v-if="activeIndex === 2" />
+          </el-carousel-item>
+          <el-carousel-item>
+            <QualityControl type="brigade" v-if="activeIndex === 3" ref="departmentQualityControl" />
+          </el-carousel-item>
+          <el-carousel-item>
+            <OrganizationalPortrait v-if="activeIndex === 4" />
+          </el-carousel-item>
+          <el-carousel-item>
+            <OrganizationalPortraitSectionLevel v-if="activeIndex === 5" ref="organizationalPortrait" />
+          </el-carousel-item>
+        </el-carousel>
       </div>
     </template>
   </dashboard-container>
@@ -43,44 +51,192 @@
 
 <script setup>
 import TopTitle from './TopTitle.vue';
-import PieChart from './PieChart.vue';
-import PieRadiusChart from './PieRadiusChart.vue';
-import LineChart from './LineChart.vue';
-import MajorContrabandCases from './MajorContrabandCases.vue';
-import SeizedRanking from './SeizedRanking.vue';
-import DeliberateConcealment from './DeliberateConcealment.vue';
-import ChannelDistribution from './ChannelDistribution.vue';
-import ClassificationOfSeizedQuantity from '@/views/dataBigScreen/dashboard/ClassificationOfSeizedQuantity.vue';
 import DashboardContainer from '@/views/dataBigScreen/dashboard/components/DashboardContainer.vue';
+import HomePage from './components/pageView/HomePage.vue';
+import RealTimeStatus from './components/pageView/RealTimeStatus.vue';
+import QualityControl from './components/pageView/QualityControl.vue';
+import OrganizationalPortrait from './components/pageView/OrganizationalPortrait.vue';
+import OrganizationalPortraitSectionLevel from './components/pageView/OrganizationalPortraitSectionLevel.vue';
+import { ref, computed, onMounted, onUnmounted } from 'vue';
+import { InactivityTimer } from './InactivityTimer.js'
+
+
+
+const page = ref(null)
+const carousel = ref(null)
+const content = ref(null)
+const departmentQualityControl = ref(null)
+const organizationalPortrait = ref(null)
+const setActiveItem = (index) => {
+  carousel.value.setActiveItem(index)
+}
+
+const activeIndex = computed(() => {
+  return carousel.value ? carousel.value.activeIndex : 7
+})
+
+const timer = new InactivityTimer({
+  timeout: 60000, // 60秒超时（1分钟）
+  warningTime: 5000, // 提前5秒警告
+  onTimeout: () => {
+    let switchPage = true
+    // 首页看板直接切换到下一个页面
+    if (activeIndex.value === 0) {
+      // 首页看板直接切换到实时状态
+      switchPage = true
+    }
+    else if (activeIndex.value === 3) {
+      switchPage = departmentQualityControl.value.next()
+    }
+    else if (activeIndex.value === 5) {
+      switchPage = organizationalPortrait.value.next()
+    }
+    if (typeof switchPage === 'function') {
+      switchPage()
+    }
+    carousel.value && switchPage && carousel.value.next()
+    timer.start();
+  },
+  onWarning: () => console.info('即将切换至下一张页面')
+});
+
+const setStyle = () => {
+  const root = document.querySelector(':root')
+  root.style.setProperty('--el-border-color-light', '#0D507A')
+  root.style.setProperty('--el-bg-color-overlay', '#0D507A')
+  root.style.setProperty('--el-box-shadow-light', 'none')
+  root.style.setProperty('--el-text-color-regular', '#fff')
+  root.style.setProperty('--el-fill-color-light', '#70CFE7')
+  root.style.setProperty('--el-datepicker-inrange-bg-color', '#0D507A')
+
+}
+
+const resetStyle = () => {
+  const root = document.querySelector(':root')
+  root.style.setProperty('--el-border-color-light', '#e4e7ed')
+  root.style.setProperty('--el-bg-color-overlay', '#ffffff')
+  root.style.setProperty('--el-box-shadow-light', '0px 0px 12px rgba(0, 0, 0, 0.12)')
+  root.style.setProperty('--el-text-color-regular', '#606266')
+  root.style.setProperty('--el-fill-color-light', '#f5f7fa')
+  root.style.setProperty('--el-datepicker-inrange-bg-color', '#fff')
+}
+
+
+onMounted(() => {
+  const pageRoot = page.value.getRoot()
+  function setCSSZoom(scale) {
+    const height = ((content.value.offsetHeight - (110 * scale)) / scale)
+    content.value.style.setProperty('height', height + 'px')
+    pageRoot.style.zoom = scale;
+  }
+  if (window.innerWidth < 1280) {
+    setCSSZoom(0.4)
+  }
+  if (window.innerWidth > 1280 && window.innerWidth <= 1440) {
+    setCSSZoom(0.6)
+  }
+  if (window.innerWidth > 1440 && window.innerWidth <= 1680) {
+    setCSSZoom(0.75)
+  }
+  if (window.innerWidth > 1680 && window.innerWidth < 1920) {
+    setCSSZoom(0.9)
+  }
+  if (window.innerWidth >= 1920) {
+    setCSSZoom(1)
+  }
+  setStyle()
+  // 启动定时器
+  timer.start();
+})
+onUnmounted(() => {
+  resetStyle()
+  // 停止定时器
+  timer.stop();
+  timer.clearTimer();
+})
 </script>
 
 <style lang="scss" scoped>
-.item {
-  width: calc(100% + -0px);
-  height: calc(33.33% - 8px);
-  position: relative;
-  background: linear-gradient(to bottom, rgba(8, 97, 117, 0) 0%, #13a2d6 200%);
-
-  &.item-center {
-    height: calc(66.66% - 4px);
-  }
+.warp {
+  height: calc(100vh);
+  box-sizing: border-box;
 }
 
-.dashboard-title {
-  position: relative;
+.left {
+  position: absolute;
+  top: 0;
+  left: 0;
   display: flex;
-  justify-content: space-between;
+  height: 59px;
   align-items: center;
-  flex-wrap: nowrap;
-  flex-direction: row;
-  z-index: 1;
-  align-content: flex-start;
-  background: url(/src/assets/images/titlebg-4340cf1c.png);
-  background-size: 100% 100%;
-  font-weight: 400;
-  font-size: 14px;
-  color: #fbffff;
-  padding: 0 20px;
-  height: 42px;
+  justify-items: flex-start;
+  padding: 0 15px;
+  column-gap: 8px;
+  background: #054066;
+  border-bottom: 1px solid #037599;
+}
+
+.right {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: flex;
+  height: 59px;
+  align-items: center;
+  justify-items: flex-end;
+  padding: 0 15px;
+  column-gap: 8px;
+  background: #054066;
+  border-bottom: 1px solid #037599;
+}
+
+.carouselItemBtn {
+  width: 126px;
+  height: 40px;
+  color: #B4E9FF;
+  font-weight: bold;
+  border-radius: 5px;
+  text-align: center;
+  text-indent: 6px;
+  line-height: 38px;
+  font-size: 18px;
+  background: url('../../../assets/images/btnBg.png') no-repeat;
+  background-size: cover;
+  cursor: pointer;
+}
+
+.carouselItemActive {
+  background: linear-gradient(to right 50%, #3398BE, #0B5883);
+  color: #fff;
+  background: url('../../../assets/images/btnActive.png') no-repeat;
+  background-size: cover;
 }
 </style>
+
+<style lang="scss">
+.page {
+  .wow {
+    .quantity-overview-item {
+      background: url('../../../assets/images/cardBg.png') no-repeat !important;
+      background-size: 100% 105% !important;
+    }
+  }
+}
+
+.userSelectParams {
+  --el-border-color-extra-light: #70CFE7;
+  --el-text-color-primary: #fff;
+  --el-fill-color-blank: #0D507A;
+  --el-border-color: #0D507A;
+}
+
+.el-popper {
+  --el-border-color-extra-light: #70CFE7;
+  //--el-fill-color-blank: #0D507A;
+  --el-border-color: #0D507A;
+}
+
+.el-message-box {
+  --el-text-color-regular: #606060;
+}
+</style>