Merge branch 'blockingData' into dev

# Conflicts:
#	src/hooks/chart.js

src/api/blockingData/blockingDataScreen.js

@@ -204,6 +204,14 @@ export function certificateDistribution(query) {
         params: query
     })
 }
+//查询开机人员年限分布列表全量
+export function tenureListAll(query) {
+    return request({
+        url: '/blocked/tenure/listAll',
+        method: 'get',
+        params: query
+    })
+}
 //大队开机人员证书分布
 export function brigadeCertificateDistribution(query) {
     return request({
@@ -244,6 +252,22 @@ export function outsideRateStats(query) {
         params: query
     })
 }
+//月考成绩统计
+export function monthlyAssessment(query) {
+    return request({
+        url: '/blocked/missReview/screen/monthlyAssessment',
+        method: 'get',
+        params: query
+    })
+}
+//本月自测有无漏检统计
+export function selfTestHasMissCheck(query) {
+    return request({
+        url: '/blocked/missReview/screen/selfTestHasMissCheck',
+        method: 'get',
+        params: query
+    })
+}
 //查询两楼每日查堵走势
 export function dailyTerminalTrend(query) {
     return request({

src/views/blockingData/blockingDataScreen/components/ModuleBrigadeOne.vue

@@ -6,7 +6,7 @@
           <div class="stat-card-inner">
             <div class="stat-left">
               <div class="stat-label">查堵总数</div>
-              <div class="stat-value">819</div>
+              <div class="stat-value">{{ statValue || 0 }}</div>
               <div class="stat-unit">起</div>
             </div>
           </div>
@@ -47,12 +47,20 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, watch } from 'vue'
 import * as echarts from 'echarts'
 import ModuleContainer from './ModuleContainer.vue'
 import { useEcharts } from '@/hooks/chart.js'
+import { formatDateHy } from '@/utils/index.js'
+import {
+  dailyTerminalTrend,
+  dailyTerminalLuggageTrend,
+  terminalBlockedStats,
+  timePeriodLuggageStats,
+  dailyTerminalRateTrend,
+  brigadeItemDistribution
+} from '@/api/blockingData/blockingDataScreen'
 
-// 接收筛选参数
 const props = defineProps({
   filterParams: {
     type: Object,
@@ -60,6 +68,27 @@ const props = defineProps({
   }
 })
 
+const loading = ref(false)
+const statValue = ref(0)
+
+const processFilterParams = (params) => {
+  const { dateRange, ...rest } = params
+  const processed = { ...rest }
+
+  if (dateRange && Array.isArray(dateRange) && dateRange.length === 2) {
+    processed.startTime = formatDateHy(dateRange[0])
+    processed.endTime = formatDateHy(dateRange[1])
+  }
+  if (processed.brigadeId == 'all') {
+    delete processed.brigadeId
+  }
+  if (processed.terminalId == 'all') {
+    delete processed.terminalId
+  }
+
+  return processed
+}
+
 const chart1 = ref(null)
 const chart2 = ref(null)
 const chart3 = ref(null)
@@ -74,6 +103,97 @@ const { setOption: setOption4 } = useEcharts(chart4)
 const { setOption: setOption5 } = useEcharts(chart5)
 const { setOption: setOption6 } = useEcharts(chart6)
 
+const fetchData = async () => {
+  loading.value = true
+  try {
+    const processedParams = processFilterParams(props.filterParams)
+    const [trendRes, luggageRes, blockedRes, timeRes, rateRes, itemRes] = await Promise.allSettled([
+      dailyTerminalTrend(processedParams),
+      dailyTerminalLuggageTrend(processedParams),
+      terminalBlockedStats(processedParams),
+      timePeriodLuggageStats(processedParams),
+      dailyTerminalRateTrend(processedParams),
+      brigadeItemDistribution(processedParams)
+    ])
+
+    if (trendRes.value?.data) {
+      const dates = trendRes.value.data.map(item => item.statDate?.split('T')[0] || item.date || item.name || '')
+      const t1TravelData = trendRes.value.data.map(item => item.t1TravelBlockedCount || 0)
+      const t2TravelData = trendRes.value.data.map(item => item.t2TravelBlockedCount || 0)
+      const t1WalkData = trendRes.value.data.map(item => item.t1WalkBlockedCount || 0)
+      const t2WalkData = trendRes.value.data.map(item => item.t2WalkBlockedCount || 0)
+      setOption1(multiLineChartOption(dates, [
+        { name: 'T1旅检查堵件数', data: t1TravelData, color: '#3b82f6' },
+        { name: 'T2旅检查堵件数', data: t2TravelData, color: '#22c55e' },
+        { name: 'T1行检查堵件数', data: t1WalkData, color: '#f97316' },
+        { name: 'T2行检查堵件数', data: t2WalkData, color: '#ec4899' }
+      ]))
+    }
+
+    if (luggageRes.value?.data) {
+      const dates = luggageRes.value.data.map(item => item.statDate?.split('T')[0] || item.date || item.name || '')
+      const t1TravelData = luggageRes.value.data.map(item => item.t1TravelBagCount || 0)
+      const t2TravelData = luggageRes.value.data.map(item => item.t2TravelBagCount || 0)
+      const t1WalkData = luggageRes.value.data.map(item => item.t1WalkBagCount || 0)
+      const t2WalkData = luggageRes.value.data.map(item => item.t2WalkBagCount || 0)
+      setOption2(multiLineChartOption(dates, [
+        { name: 'T1旅检过检行李数', data: t1TravelData, color: '#3b82f6' },
+        { name: 'T2旅检过检行李数', data: t2TravelData, color: '#22c55e' },
+        { name: 'T1行检过检行李数', data: t1WalkData, color: '#f97316' },
+        { name: 'T2行检过检行李数', data: t2WalkData, color: '#ec4899' }
+      ]))
+    }
+
+    if (blockedRes.value?.data) {
+      const blockedData = [
+        { name: 'T1', value: blockedRes.value.data.t1BlockedCount || 0 },
+        { name: 'T2', value: blockedRes.value.data.t2BlockedCount || 0 }
+      ]
+      setOption3(horizontalBarChartOption(blockedData, '#3b82f6'))
+      const total = blockedRes.value.data.totalBlockedCount || 0
+      statValue.value = total
+    }
+
+    if (timeRes.value?.data) {
+      const timePeriods = timeRes.value.data.map(item => item.timePeriod || '')
+      const avgLuggageData = timeRes.value.data.map(item => item.avgLuggageCount || 0)
+      const avgBlockedData = timeRes.value.data.map(item => item.avgBlockedCount || 0)
+      setOption4(barLineChartOption(timePeriods, avgLuggageData, avgBlockedData))
+    }
+
+    if (rateRes.value?.data) {
+      const dates = rateRes.value.data.map(item => item.statDate?.split('T')[0] || item.date || item.name || '')
+      const t1TravelRate = rateRes.value.data.map(item => item.t1TravelBlockRate || 0)
+      const t2TravelRate = rateRes.value.data.map(item => item.t2TravelBlockRate || 0)
+      const t1WalkRate = rateRes.value.data.map(item => item.t1WalkBlockRate || 0)
+      const t2WalkRate = rateRes.value.data.map(item => item.t2WalkBlockRate || 0)
+      setOption5(multiLineChartOption(dates, [
+        { name: 'T1旅检万分率', data: t1TravelRate, color: '#3b82f6' },
+        { name: 'T2旅检万分率', data: t2TravelRate, color: '#22c55e' },
+        { name: 'T1行检万分率', data: t1WalkRate, color: '#f97316' },
+        { name: 'T2行检万分率', data: t2WalkRate, color: '#ec4899' }
+      ]))
+    }
+
+    if (itemRes.value?.data) {
+      const colors = ['#3b82f6', '#22c55e', '#f97316', '#ec4899', '#8b5cf6', '#10b981', '#f59e0b', '#ef4444']
+      const itemData = itemRes.value.data.map((item, index) => ({
+        name: item.missCheckItem ,
+        value: item.count 
+      }))
+      setOption6(pieChartOption(itemData, colors))
+    }
+  } catch (error) {
+    console.error('获取数据失败:', error)
+  } finally {
+    loading.value = false
+  }
+}
+
+watch(() => props.filterParams, () => {
+  fetchData()
+}, { deep: true })
+
 const xAxisData = Array.from({ length: 30 }, (_, i) => `${i + 1}日`)
 
 const generateData = (count, min, max) => {
@@ -84,26 +204,28 @@ const generateData = (count, min, max) => {
   return data
 }
 
-const lineChartOption = (data, color, title) => ({
+const multiLineChartOption = (xAxisData, series) => ({
   grid: { left: '10%', top: '15%', right: '5%', bottom: '15%', containLabel: true },
   xAxis: { type: 'category', data: xAxisData, axisLine: { lineStyle: { color: '#999' } }, axisLabel: { fontSize: 10, color: '#666' } },
   yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { fontSize: 10, color: '#666' }, splitLine: { lineStyle: { color: '#eee' } } },
-  series: [{ name: title, type: 'line', smooth: true, symbol: 'circle', symbolSize: 6, data: data, itemStyle: { color: color }, lineStyle: { color: color } }]
+  legend: { 
+    data: series.map(s => s.name),
+    top: '0%',
+    textStyle: { fontSize: 10 }
+  },
+  series: series.map(s => ({
+    name: s.name,
+    type: 'line',
+    smooth: true,
+    symbol: 'circle',
+    symbolSize: 6,
+    data: s.data,
+    itemStyle: { color: s.color },
+    lineStyle: { color: s.color }
+  }))
 })
 
-const areaChartOption = (data, color) => ({
-  grid: { left: '10%', top: '15%', right: '5%', bottom: '15%', containLabel: true },
-  xAxis: { type: 'category', data: xAxisData, axisLine: { lineStyle: { color: '#999' } }, axisLabel: { fontSize: 10, color: '#666' } },
-  yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { fontSize: 10, color: '#666' }, splitLine: { lineStyle: { color: '#eee' } } },
-  series: [{ type: 'line', smooth: true, symbol: 'circle', symbolSize: 6, data: data, itemStyle: { color: color }, lineStyle: { color: color }, areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: color + '40' }, { offset: 1, color: color + '10' }]) } }]
-})
 
-const barChartOption = (data, color) => ({
-  grid: { left: '15%', top: '15%', right: '5%', bottom: '15%', containLabel: true },
-  xAxis: { type: 'category', data: data.map(d => d.name), axisLine: { lineStyle: { color: '#999' } }, axisLabel: { fontSize: 10, color: '#666' } },
-  yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { fontSize: 10, color: '#666' }, splitLine: { lineStyle: { color: '#eee' } } },
-  series: [{ type: 'bar', data: data.map(d => d.value), itemStyle: { color: color }, barWidth: 20 }]
-})
 
 const horizontalBarChartOption = (data, color) => ({
   grid: { left: '20%', top: '15%', right: '5%', bottom: '15%', containLabel: true },
@@ -112,46 +234,55 @@ const horizontalBarChartOption = (data, color) => ({
   series: [{ type: 'bar', data: data.map(d => d.value), itemStyle: { color: color }, barWidth: 15 }]
 })
 
+const barLineChartOption = (xAxisData, barData, lineData) => ({
+  grid: { left: '10%', top: '15%', right: '5%', bottom: '15%', containLabel: true },
+  xAxis: { type: 'category', data: xAxisData, axisLine: { lineStyle: { color: '#999' } }, axisLabel: { fontSize: 10, color: '#666' } },
+  yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { fontSize: 10, color: '#666' }, splitLine: { lineStyle: { color: '#eee' } } },
+  legend: { 
+    data: ['平均过检行李数', '平均查堵件数'],
+    top: '0%',
+    textStyle: { fontSize: 10 }
+  },
+  series: [
+    {
+      name: '平均过检行李数',
+      type: 'bar',
+      data: barData,
+      itemStyle: { color: '#3b82f6' },
+      barWidth: 20
+    },
+    {
+      name: '平均查堵件数',
+      type: 'line',
+      smooth: true,
+      symbol: 'circle',
+      symbolSize: 6,
+      data: lineData,
+      itemStyle: { color: '#ec4899' },
+      lineStyle: { color: '#ec4899' }
+    }
+  ]
+})
+
 const pieChartOption = (data, colors) => ({
   color: colors,
+  legend: { 
+    show: true,
+    textStyle: { fontSize: 10 }
+  },
+  tooltip: { trigger: 'item' },
   series: [{
     type: 'pie',
     radius: '65%',
     center: ['50%', '55%'],
     data: data,
-    label: { show: true, formatter: '{b}\n{c}%', fontSize: 10 }
+    label: { show: true, formatter: '{b}', fontSize: 10 }
   }]
 })
 
 onMounted(() => {
-  setOption1(lineChartOption(generateData(30, 5, 20), '#3b82f6', '查堵数量'))
-  setOption2(areaChartOption(generateData(30, 10000, 30000), '#22c55e'))
-  setOption3(horizontalBarChartOption([{ name: 'T1', value: 388 }, { name: 'T2', value: 431 }], '#3b82f6'))
-  
-  const timeData = [
-    { name: '02:00-04:00', value: 20 },
-    { name: '04:00-06:00', value: 45 },
-    { name: '06:00-08:00', value: 80 },
-    { name: '08:00-10:00', value: 110 },
-    { name: '10:00-12:00', value: 95 },
-    { name: '12:00-14:00', value: 85 },
-    { name: '14:00-16:00', value: 100 },
-    { name: '16:00-18:00', value: 120 },
-    { name: '18:00-20:00', value: 115 },
-    { name: '20:00-22:00', value: 80 },
-    { name: '22:00-24:00', value: 45 }
-  ]
-  setOption4(barChartOption(timeData, '#3b82f6'))
+  fetchData()
   
-  setOption5(lineChartOption(generateData(30, 0.5, 3.0), '#ec4899', '查堵万分率'))
-  
-  setOption6(pieChartOption([
-    { name: '水果刀', value: 1.02 },
-    { name: '警棍', value: 0.37 },
-    { name: '甩棍', value: 0.52 },
-    { name: '打火机', value: 50.52 },
-    { name: '其他', value: 47.57 }
-  ], ['#3b82f6', '#22c55e', '#f97316', '#ec4899', '#8b5cf6']))
 })
 </script>
 
@@ -236,20 +367,19 @@ onMounted(() => {
   flex: 1;
   background: #fff;
   border-radius: 6px;
-  padding: 10px;
+  padding: 15px;
   border: 1px solid #eee;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
   display: flex;
   flex-direction: column;
-  min-height: 200px;
+  min-height: 280px;
 }
 
 .chart-title {
-  font-size: 14px;
-  color: #333;
+ font-size: 17px;
+  color: black;
   margin-bottom: 5px;
   text-align: left;
-  font-weight: 500;
 }
 
 .echarts {

src/views/blockingData/blockingDataScreen/components/ModuleBrigadeThree.vue

@@ -16,12 +16,16 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, watch } from 'vue'
 import * as echarts from 'echarts'
 import ModuleContainer from './ModuleContainer.vue'
 import { useEcharts } from '@/hooks/chart.js'
+import { formatDateHy } from '@/utils/index.js'
+import {
+  selfTestHasMissCheck,
+  monthlyAssessment
+} from '@/api/blockingData/blockingDataScreen'
 
-// 接收筛选参数
 const props = defineProps({
   filterParams: {
     type: Object,
@@ -29,36 +33,97 @@ const props = defineProps({
   }
 })
 
+const loading = ref(false)
+
+const processFilterParams = (params) => {
+  const { dateRange, ...rest } = params
+  const processed = { ...rest }
+
+  if (dateRange && Array.isArray(dateRange) && dateRange.length === 2) {
+    processed.startTime = formatDateHy(dateRange[0])
+    processed.endTime = formatDateHy(dateRange[1])
+  }
+  if (processed.brigadeId == 'all') {
+    delete processed.brigadeId
+  }
+  if (processed.terminalId == 'all') {
+    delete processed.terminalId
+  }
+
+  return processed
+}
+
 const chart1 = ref(null)
 const chart2 = ref(null)
 
 const { setOption: setOption1 } = useEcharts(chart1)
 const { setOption: setOption2 } = useEcharts(chart2)
 
+const fetchData = async () => {
+  loading.value = true
+  try {
+    const processedParams = processFilterParams(props.filterParams)
+    const [missCheckRes, assessmentRes] = await Promise.all([
+      selfTestHasMissCheck(processedParams),
+      monthlyAssessment(processedParams)
+    ])
+
+    if (missCheckRes.data) {
+      const colors = ['#22c55e', '#3b82f6', '#f97316']
+      const missCheckData = missCheckRes.data.map(item => ({
+        name: item.name || item.level || '未知',
+        value: item.total || item.count || 0
+      }))
+      setOption1(ringChartOption(missCheckData, colors))
+    }
+
+    if (assessmentRes.data) {
+      const colors = ['#22c55e', '#3b82f6', '#fbbf24', '#ef4444']
+      const assessmentData = assessmentRes.data.map(item => ({
+        name: item.level || item.name || '',
+        value: item.total || 0
+      }))
+      setOption2(ringChartOption(assessmentData, colors))
+    }
+  } catch (error) {
+    console.error('获取数据失败:', error)
+  } finally {
+    loading.value = false
+  }
+}
+
+watch(() => props.filterParams, () => {
+  fetchData()
+}, { deep: true })
+
 const ringChartOption = (data, colors) => ({
   color: colors,
+  tooltip: { trigger: 'item', formatter: '{b}: {c}' },
+  legend: {
+    data: data.map(item => item.name),
+    top: '0%',
+    textStyle: { fontSize: 10 }
+  },
   series: [{
     type: 'pie',
     radius: ['40%', '65%'],
     center: ['50%', '55%'],
     data: data,
-    label: { show: true, formatter: '{b}\n{c}%', fontSize: 10 }
+    label: {
+      show: true,
+      formatter: (params) => {
+        const total = data.reduce((sum, item) => sum + item.value, 0)
+        const percentage = ((params.value / total) * 100).toFixed(2)
+        return `${params.name}\n${params.value}(${percentage}%)`
+      },
+      fontSize: 10
+    }
   }]
 })
 
 onMounted(() => {
-  setOption1(ringChartOption([
-    { name: '漏检次数≤3次', value: 65.2 },
-    { name: '漏检次数4-6次', value: 22.8 },
-    { name: '漏检次数≥7次', value: 12.0 }
-  ], ['#22c55e', '#3b82f6', '#f97316']))
-
-  setOption2(ringChartOption([
-    { name: '优秀(90-100分)', value: 35.4 },
-    { name: '良好(80-89分)', value: 42.1 },
-    { name: '合格(70-79分)', value: 18.3 },
-    { name: '不合格(<70分)', value: 4.2 }
-  ], ['#22c55e', '#3b82f6', '#fbbf24', '#ef4444']))
+  fetchData()
+
 })
 </script>
 
@@ -86,15 +151,14 @@ onMounted(() => {
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
   display: flex;
   flex-direction: column;
-  min-height: 200px;
+  min-height: 280px;
 }
 
 .chart-title {
-  font-size: 14px;
-  color: #333;
+  font-size: 17px;
+  color: black;
   margin-bottom: 5px;
   text-align: left;
-  font-weight: 500;
 }
 
 .echarts {

src/views/blockingData/blockingDataScreen/components/ModuleBrigadeTwo.vue

@@ -15,7 +15,7 @@
           <rank-list :rank-data="rankData3" title="查堵-员工排行榜" header-label="排名" header-name="被回查人" header-count="计数" />
         </div>
       </div>
-      
+
       <div class="chart-row">
         <div class="chart-item">
           <div class="chart-title">查堵男女比例</div>
@@ -30,7 +30,7 @@
           <div ref="chart6" class="echarts"></div>
         </div>
       </div>
-      
+
       <div class="chart-row">
         <div class="chart-item">
           <div class="chart-title">查堵物品位置</div>
@@ -39,19 +39,19 @@
         <div class="chart-item">
           <div class="chart-title">查堵-困难图像数</div>
           <div class="number-display">
-            <div class="number-value">819</div>
+            <div class="number-value">{{ difficultValue || 0 }}</div>
             <div class="number-unit">幅</div>
           </div>
         </div>
         <div class="chart-item">
           <div class="chart-title">查堵-简单图像数</div>
           <div class="number-display">
-            <div class="number-value">819</div>
+            <div class="number-value">{{ simpleValue || 0 }}</div>
             <div class="number-unit">幅</div>
           </div>
         </div>
       </div>
-      
+
       <div class="chart-row">
         <div class="chart-item">
           <div class="chart-title">查堵-主管分管次数</div>
@@ -62,7 +62,7 @@
           <div ref="chart11" class="echarts"></div>
         </div>
       </div>
-      
+
       <div class="chart-row">
         <div class="chart-item">
           <div class="chart-title">查堵人员开机年限分布</div>
@@ -78,13 +78,27 @@
 </template>
 
 <script setup>
-import { ref, onMounted, reactive } from 'vue'
+import { ref, onMounted, reactive, watch } from 'vue'
 import * as echarts from 'echarts'
 import ModuleContainer from './ModuleContainer.vue'
 import RankList from './RankList.vue'
 import { useEcharts } from '@/hooks/chart.js'
+import { formatDateHy } from '@/utils/index.js'
+import {
+  brigadeSupervisorRanking,
+  brigadeTeamLeaderRanking,
+  brigadeReviewedUserRanking,
+  brigadeGenderDistribution,
+  brigadeCertificateDistributionDetail,
+  personnelCertificateBase,
+  brigadeItemLocationDistribution,
+  brigadeDifficultyDistribution,
+  brigadeSupervisorDistribution,
+  brigadeMissCheckReasonDistribution,
+  brigadeOperatingYearsDistribution,
+  tenureListAll
+} from '@/api/blockingData/blockingDataScreen'
 
-// 接收筛选参数
 const props = defineProps({
   filterParams: {
     type: Object,
@@ -92,6 +106,31 @@ const props = defineProps({
   }
 })
 
+const loading = ref(false)
+const rankData1 = reactive([])
+const rankData2 = reactive([])
+const rankData3 = reactive([])
+const difficultValue = ref(0)
+const simpleValue = ref(0)
+
+const processFilterParams = (params) => {
+  const { dateRange, ...rest } = params
+  const processed = { ...rest }
+
+  if (dateRange && Array.isArray(dateRange) && dateRange.length === 2) {
+    processed.startTime = formatDateHy(dateRange[0])
+    processed.endTime = formatDateHy(dateRange[1])
+  }
+  if (processed.brigadeId == 'all') {
+    delete processed.brigadeId
+  }
+  if (processed.terminalId == 'all') {
+    delete processed.terminalId
+  }
+
+  return processed
+}
+
 const chart4 = ref(null)
 const chart5 = ref(null)
 const chart6 = ref(null)
@@ -110,54 +149,224 @@ const { setOption: setOption11 } = useEcharts(chart11)
 const { setOption: setOption12 } = useEcharts(chart12)
 const { setOption: setOption13 } = useEcharts(chart13)
 
-const rankData1 = reactive([
-  { name: '李鑫锋', value: 102 },
-  { name: '李学玲', value: 94 },
-  { name: '郑杰', value: 80 },
-  { name: '郭仁吉', value: 69 },
-  { name: '计沐', value: 67 },
-  { name: '方园', value: 62 },
-  { name: '符鑫日', value: 59 }
-])
-
-const rankData2 = reactive([
-  { name: '李雪琦', value: 44 },
-  { name: '林瑞玉', value: 42 },
-  { name: '吴明文', value: 40 },
-  { name: '吕吕俊', value: 36 },
-  { name: '潘任', value: 31 },
-  { name: '吴亚琪', value: 30 }
-])
-
-const rankData3 = reactive([
-  { name: '梁其松', value: 18 },
-  { name: '王名顺', value: 18 },
-  { name: '陈艳丽', value: 16 },
-  { name: '刘振华', value: 16 },
-  { name: '黄建成', value: 15 },
-  { name: '简句学', value: 15 },
-  { name: '郭可奇', value: 14 }
-])
+const fetchData = async () => {
+  loading.value = true
+  try {
+    const processedParams = processFilterParams(props.filterParams)
+    const [supervisorRes, teamRes, userRes, genderRes, certDetailRes, certBaseRes, locationRes, difficultyRes, supervisorDistRes, reasonRes, yearsRes, tenureRes] = await Promise.allSettled([
+      brigadeSupervisorRanking(processedParams),
+      brigadeTeamLeaderRanking(processedParams),
+      brigadeReviewedUserRanking(processedParams),
+      brigadeGenderDistribution(processedParams),
+      brigadeCertificateDistributionDetail(processedParams),
+      personnelCertificateBase(processedParams),
+      brigadeItemLocationDistribution(processedParams),
+      brigadeDifficultyDistribution(processedParams),
+      brigadeSupervisorDistribution(processedParams),
+      brigadeMissCheckReasonDistribution(processedParams),
+      brigadeOperatingYearsDistribution(processedParams),
+      tenureListAll(processedParams)
+    ])
+
+    if (supervisorRes.value?.data) {
+      rankData1.length = 0
+      supervisorRes.value.data.slice(0, 10).forEach(item => {
+        rankData1.push({
+          name: item.supervisorName || item.name || '',
+          value: item.count || item.value || 0
+        })
+      })
+    }
+
+    if (teamRes.value?.data) {
+      rankData2.length = 0
+      teamRes.value.data.slice(0, 10).forEach(item => {
+        rankData2.push({
+          name: item.teamLeaderName || item.name || '',
+          value: item.count || item.value || 0
+        })
+      })
+    }
+
+    if (userRes.value?.data) {
+      rankData3.length = 0
+      userRes.value.data.slice(0, 10).forEach(item => {
+        rankData3.push({
+          name: item.userName || item.name || '',
+          value: item.count || item.value || 0
+        })
+      })
+    }
+
+    if (genderRes.value?.data) {
+      const genderData = genderRes.value.data.map(item => ({
+        name: item.gender || item.name || '',
+        value: item.percentage || item.value || 0
+      }))
+      setOption4(pieChartOption(genderData, ['#ec4899', '#3b82f6']))
+    }
+
+    if (certDetailRes.value?.data) {
+      const certData = certDetailRes.value.data.map(item => ({
+        name: item.certificateLevel || item.name || '',
+        value: item.percentage || item.value || 0
+      }))
+      setOption5(pieChartOption(certData, ['#22c55e', '#3b82f6']))
+    }
+
+    if (certBaseRes.value?.data) {
+      const baseData = certBaseRes.value.data.map(item => ({
+        name: item.certificateLevel || item.name || '',
+        value: item.percentage || item.value || 0
+      }))
+      setOption6(pieChartOption(baseData, ['#22c55e', '#3b82f6']))
+    }
+
+    if (locationRes.value?.data) {
+      const colors = ['#8b5cf6', '#ec4899', '#f97316', '#22c55e', '#3b82f6', '#14b8a6', '#ef4444', '#fbbf24', '#6366f1', '#06b6d4', '#84cc16', '#e11d48']
+      const locationData = locationRes.value.data.map(item => ({
+        name: item.itemLocation || item.name || '',
+        value: item.percentage || item.value || 0
+      }))
+      setOption7(donutChartOption(locationData, colors))
+    }
+
+    if (difficultyRes.value?.data) {
+      let difficult = 0
+      let simple = 0
+      difficultyRes.value.data.forEach(item => {
+        if (item.difficultyLevel === '难') {
+          difficult = item.count || item.value || 0
+        } else if (item.difficultyLevel === '简单') {
+          simple = item.count || item.value || 0
+        }
+      })
+      difficultValue.value = difficult
+      simpleValue.value = simple
+    }
+
+    if (supervisorDistRes.value?.data) {
+      const colors = ['#3b82f6', '#22c55e', '#f97316', '#ec4899', '#8b5cf6', '#14b8a6', '#ef4444', '#fbbf24', '#6366f1', '#06b6d4', '#84cc16', '#e11d48', '#a855f7', '#f59e0b']
+      const supervisorData = supervisorDistRes.value.data.map(item => ({
+        name: item.supervisorName || item.name || '',
+        value: item.percentage || item.value || 0
+      }))
+      setOption10(donutChartOption(supervisorData, colors))
+    }
+
+    if (reasonRes.value?.data) {
+      const colors = ['#3b82f6', '#22c55e', '#f97316', '#ec4899', '#8b5cf6', '#14b8a6', '#ef4444', '#fbbf24']
+      const reasonData = reasonRes.value.data.map(item => ({
+        name: item.missCheckReasonCategory || '',
+        value: item.count || 0
+      }))
+      setOption11(pieChartOption(reasonData, colors))
+    }
+
+    if (yearsRes.value?.data) {
+      const colors = ['#3b82f6', '#22c55e', '#f97316', '#ec4899', '#8b5cf6', '#14b8a6']
+      const yearsData = yearsRes.value.data.map(item => ({
+        name: item.operatingYears || '',
+        value: item.count || 0
+      }))
+      setOption12(pieChartOption(yearsData, colors))
+    }
+
+    if (tenureRes.value?.data) {
+      const xAxisData = tenureRes.value.data.map(item => item.brigadeName || '')
+      const seriesData = [
+        {
+          name: '5年及以上',
+          data: tenureRes.value.data.map(item => item.cntGe5Year || 0),
+          color: '#3b82f6'
+        },
+        {
+          name: '4年',
+          data: tenureRes.value.data.map(item => item.cnt4Years || 0),
+          color: '#22c55e'
+        },
+        {
+          name: '3年',
+          data: tenureRes.value.data.map(item => item.cnt3Years || 0),
+          color: '#f97316'
+        },
+        {
+          name: '2年',
+          data: tenureRes.value.data.map(item => item.cnt2Years || 0),
+          color: '#ec4899'
+        },
+        {
+          name: '1年',
+          data: tenureRes.value.data.map(item => item.cnt1Years || 0),
+          color: '#8b5cf6'
+        },
+        {
+          name: '不足1年',
+          data: tenureRes.value.data.map(item => item.cntLt1Year || 0),
+          color: '#14b8a6'
+        }
+      ]
+      setOption13(multiSeriesBarChartOption(xAxisData, seriesData))
+    }
+  } catch (error) {
+    console.error('获取数据失败:', error)
+  } finally {
+    loading.value = false
+  }
+}
+
+watch(() => props.filterParams, () => {
+  fetchData()
+}, { deep: true })
 
 const pieChartOption = (data, colors) => ({
   color: colors,
+  tooltip: { trigger: 'item', formatter: '{b}: {c}' },
+  legend: {
+    data: data.map(item => item.name),
+    top: '0%',
+    textStyle: { fontSize: 10 }
+  },
   series: [{
     type: 'pie',
     radius: ['40%', '65%'],
     center: ['50%', '55%'],
     data: data,
-    label: { show: true, formatter: '{b}\n{c}%', fontSize: 10 }
+    label: {
+      show: true,
+      formatter: (params) => {
+        const total = data.reduce((sum, item) => sum + item.value, 0)
+        const percentage = ((params.value / total) * 100).toFixed(2)
+        return `${params.name}\n${params.value}(${percentage}%)`
+      },
+      fontSize: 10
+    }
   }]
 })
 
 const donutChartOption = (data, colors) => ({
   color: colors,
+  tooltip: { trigger: 'item', formatter: '{b}: {c}' },
+  legend: {
+    data: data.map(item => item.name),
+    top: '0%',
+    textStyle: { fontSize: 10 }
+  },
   series: [{
     type: 'pie',
     radius: ['30%', '55%'],
     center: ['50%', '55%'],
     data: data,
-    label: { show: true, formatter: '{b}', fontSize: 10, position: 'outside' }
+    label: {
+      show: true,
+      position: 'outside',
+      formatter: (params) => {
+        const total = data.reduce((sum, item) => sum + item.value, 0)
+        const percentage = ((params.value / total) * 100).toFixed(2)
+        return `${params.name} ${params.value}(${percentage}%)`
+      },
+      fontSize: 10
+    }
   }]
 })
 
@@ -168,81 +377,37 @@ const multiBarChartOption = (data, color) => ({
   series: [{ type: 'bar', data: data.map(d => d.value), itemStyle: { color: color }, barWidth: 20 }]
 })
 
+const multiSeriesBarChartOption = (xAxisData, series) => ({
+  grid: { left: '10%', top: '15%', right: '5%', bottom: '15%', containLabel: true },
+  xAxis: {
+    type: 'category',
+    data: xAxisData,
+    axisLine: { lineStyle: { color: '#999' } },
+    axisLabel: { fontSize: 10, color: '#666' }
+  },
+  yAxis: {
+    type: 'value',
+    axisLine: { lineStyle: { color: '#999' } },
+    axisLabel: { fontSize: 10, color: '#666' },
+    splitLine: { lineStyle: { color: '#eee' } }
+  },
+  legend: {
+    data: series.map(s => s.name),
+    top: '0%',
+    textStyle: { fontSize: 10 }
+  },
+  series: series.map(s => ({
+    name: s.name,
+    type: 'bar',
+    data: s.data,
+    itemStyle: { color: s.color },
+    barWidth: 15
+  }))
+})
+
 onMounted(() => {
-  setOption4(pieChartOption([
-    { name: '女', value: 52.26 },
-    { name: '男', value: 47.74 }
-  ], ['#ec4899', '#3b82f6']))
-
-  setOption5(pieChartOption([
-    { name: '高级', value: 49.81 },
-    { name: '中级', value: 50.19 }
-  ], ['#22c55e', '#3b82f6']))
-
-  setOption6(pieChartOption([
-    { name: '高级证书', value: 1.59 },
-    { name: '中级证书', value: 98.41 }
-  ], ['#22c55e', '#3b82f6']))
-
-  setOption7(donutChartOption([
-    { name: '中下', value: 6.35 },
-    { name: '中间', value: 11.85 },
-    { name: '右下', value: 7.74 },
-    { name: '右上', value: 7.56 },
-    { name: '左中', value: 7.26 },
-    { name: '左上', value: 6.61 },
-    { name: '左上', value: 11.16 },
-    { name: '右下', value: 6.45 },
-    { name: '右上', value: 12.42 },
-    { name: '中下', value: 7.41 },
-    { name: '右上', value: 6.11 },
-    { name: '左上', value: 10.24 }
-  ], ['#8b5cf6', '#ec4899', '#f97316', '#22c55e', '#3b82f6', '#14b8a6', '#ef4444', '#fbbf24', '#6366f1', '#06b6d4', '#84cc16', '#e11d48']))
-
-  setOption10(donutChartOption([
-    { name: '赵德峰', value: 12.46 },
-    { name: '刘佳', value: 7.94 },
-    { name: '郑晓华', value: 7.94 },
-    { name: '谢金艳', value: 7.82 },
-    { name: '潘仁芳', value: 7.33 },
-    { name: '张庆林', value: 7.2 },
-    { name: '陈颖', value: 7.2 },
-    { name: '李学芬', value: 7.2 },
-    { name: '李俊峰', value: 7.08 },
-    { name: '周雪梅', value: 7.08 },
-    { name: '刘旭', value: 6.46 },
-    { name: '李丽', value: 6.46 },
-    { name: '任静', value: 6.46 },
-    { name: '张静', value: 6.46 }
-  ], ['#3b82f6', '#22c55e', '#f97316', '#ec4899', '#8b5cf6', '#14b8a6', '#ef4444', '#fbbf24', '#6366f1', '#06b6d4', '#84cc16', '#e11d48', '#a855f7', '#f59e0b']))
-
-  setOption11(pieChartOption([
-    { name: '问题判断不清，未按规范检查导致漏检', value: 23.20 },
-    { name: '未按规范检查导致漏检', value: 7.04 },
-    { name: '判断不清，漏检', value: 6.48 },
-    { name: '未能辨别危险品', value: 5.92 },
-    { name: '未能辨别危险品', value: 5.92 },
-    { name: '未能辨别危险品', value: 2.88 },
-    { name: '简单漏检未能认真判断', value: 21.23 },
-    { name: '未能辨别危险品', value: 27.34 }
-  ], ['#3b82f6', '#22c55e', '#f97316', '#ec4899', '#8b5cf6', '#14b8a6', '#ef4444', '#fbbf24']))
-
-  setOption12(pieChartOption([
-    { name: '5年及5年以上', value: 30.71 },
-    { name: '4年人员数', value: 18.68 },
-    { name: '3年人员数', value: 22.47 },
-    { name: '2年人员数', value: 14.75 },
-    { name: '1年人员数', value: 6.76 },
-    { name: '不足1年人员数', value: 6.63 }
-  ], ['#3b82f6', '#22c55e', '#f97316', '#ec4899', '#8b5cf6', '#14b8a6']))
-
-  setOption13(multiBarChartOption([
-    { name: '安检一大队', value: 104 },
-    { name: '安检二大队', value: 39 },
-    { name: '安检三大队', value: 14 },
-    { name: '安检四大队', value: 13 },
-    { name: '安检五大队', value: 12 }
-  ], '#3b82f6'))
+  fetchData()
+
 })
 </script>
 
@@ -265,20 +430,19 @@ onMounted(() => {
   flex: 1;
   background: #fff;
   border-radius: 6px;
-  padding: 10px;
+  padding: 15px;
   border: 1px solid #eee;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
   display: flex;
   flex-direction: column;
-  min-height: 200px;
+  min-height: 280px;
 }
 
 .chart-title {
-  font-size: 14px;
-  color: #333;
+  font-size: 17px;
+  color: black;
   margin-bottom: 5px;
   text-align: left;
-  font-weight: 500;
 }
 
 .echarts {
@@ -303,7 +467,7 @@ onMounted(() => {
 
 .number-unit {
   font-size: 14px;
-  color: #666;
+  color: #3b82f6;
   margin-top: 5px;
 }
-</style>
+</style>

src/views/blockingData/blockingDataScreen/components/ModuleFour.vue

@@ -4,21 +4,21 @@
       <div class="chart-row">
         <div class="chart-item">
           <div class="chart-title">T1航站楼放行速率</div>
-          <div ref="chart1" class="echarts"></div>
+          <div ref="rateChart1" class="echarts"></div>
         </div>
         <div class="chart-item">
           <div class="chart-title">T2航站楼放行速率</div>
-          <div ref="chart2" class="echarts"></div>
+          <div ref="rateChart2" class="echarts"></div>
         </div>
       </div>
       <div class="chart-row">
         <div class="chart-item">
           <div class="chart-title">大队总平均速率对比（国内）</div>
-          <div ref="chart3" class="echarts"></div>
+          <div ref="rateChart3" class="echarts"></div>
         </div>
         <div class="chart-item">
           <div class="chart-title">大队总平均速率对比（国际+中转）</div>
-          <div ref="chart4" class="echarts"></div>
+          <div ref="rateChart4" class="echarts"></div>
         </div>
       </div>
     </div>
@@ -26,10 +26,12 @@
 </template>
 
 <script setup>
-import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
 import * as echarts from 'echarts'
 import ModuleContainer from './ModuleContainer.vue'
 import { useEcharts } from '@/hooks/chart.js'
+import { t1RateStats, t2RateStats, insideRateStats, outsideRateStats } from '@/api/blockingData/blockingDataScreen.js'
+import { formatDateHy } from '@/utils/index.js'
 
 // 接收筛选参数
 const props = defineProps({
@@ -39,147 +41,336 @@ const props = defineProps({
   }
 })
 
-const chart1 = ref(null)
-const chart2 = ref(null)
-const chart3 = ref(null)
-const chart4 = ref(null)
+const rateChart1 = ref(null)
+const rateChart2 = ref(null)
+const rateChart3 = ref(null)
+const rateChart4 = ref(null)
 
-const { setOption: setOption1 } = useEcharts(chart1)
-const { setOption: setOption2 } = useEcharts(chart2)
-const { setOption: setOption3 } = useEcharts(chart3)
-const { setOption: setOption4 } = useEcharts(chart4)
+const { setOption: setOption1 } = useEcharts(rateChart1)
+const { setOption: setOption2 } = useEcharts(rateChart2)
+const { setOption: setOption3 } = useEcharts(rateChart3)
+const { setOption: setOption4 } = useEcharts(rateChart4)
 
-const generateData = () => {
-  const data = []
-  for (let i = 0; i < 30; i++) {
-    data.push(Math.floor(Math.random() * 60) + 120)
+// 处理filterParams，将dateRange拆分为startTime和endTime
+const processFilterParams = (params) => {
+  const { dateRange, ...rest } = params
+  const processed = { ...rest }
+
+  if (dateRange && Array.isArray(dateRange) && dateRange.length === 2) {
+    processed.startDate = formatDateHy(dateRange[0])
+    processed.endDate = formatDateHy(dateRange[1])
+  }
+  if (processed.brigadeId == 'all') {
+    delete processed.brigadeId
+  }
+  if (processed.terminalId == 'all') {
+    delete processed.terminalId
   }
-  return data
-}
 
-const xAxisData = []
-for (let i = 1; i <= 30; i++) {
-  xAxisData.push(i + '日')
+  return processed
 }
 
-const lineChartOption = (data1, data2, color1, color2) => ({
-  grid: {
-    left: '10%',
-    top: '15%',
-    right: '5%',
-    bottom: '15%',
-    containLabel: true
-  },
-  xAxis: {
-    type: 'category',
-    data: xAxisData,
-    axisLine: { lineStyle: { color: '#999' } },
-    axisLabel: { fontSize: 10, color: '#666' }
-  },
-  yAxis: {
-    type: 'value',
-    axisLine: { lineStyle: { color: '#999' } },
-    axisLabel: { fontSize: 10, color: '#666' },
-    splitLine: { lineStyle: { color: '#eee' } }
-  },
-  legend: {
-    top: 0,
-    right: 10,
-    textStyle: { fontSize: 10 }
-  },
-  series: [
-    {
-      name: '高峰期时段',
-      type: 'line',
-      smooth: true,
-      symbol: 'circle',
-      symbolSize: 6,
-      data: data1,
-      itemStyle: { color: color1 },
-      areaStyle: {
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-          { offset: 0, color: color1 + '40' },
-          { offset: 1, color: color1 + '10' }
-        ])
-      }
-    },
-    {
-      name: '非高峰期时段',
-      type: 'line',
-      smooth: true,
-      symbol: 'circle',
-      symbolSize: 6,
-      data: data2,
-      itemStyle: { color: color2 },
-      areaStyle: {
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-          { offset: 0, color: color2 + '40' },
-          { offset: 1, color: color2 + '10' }
-        ])
-      }
+// 数据加载函数
+const loadData = async () => {
+  try {
+    const queryParams = processFilterParams(props.filterParams)
+    console.log('查询参数:', queryParams)
+
+    // 并行请求所有速率数据
+    const [t1RateRes, t2RateRes, insideRateRes, outsideRateRes] = await Promise.allSettled([
+      t1RateStats(queryParams),
+      t2RateStats(queryParams),
+      insideRateStats(queryParams),
+      outsideRateStats(queryParams)
+    ])
+
+    console.log('T1速率响应:', t1RateRes)
+    console.log('T2速率响应:', t2RateRes)
+    console.log('国内速率响应:', insideRateRes)
+    console.log('国际中转速率响应:', outsideRateRes)
+
+    // T1航站楼放行速率
+    const t1RateData = t1RateRes?.value?.data || []
+    console.log('T1速率数据:', t1RateData)
+    console.log('T1速率数据长度:', t1RateData.length)
+    console.log('T1速率数据类型:', typeof t1RateData)
+    console.log('T1速率数据是否为数组:', Array.isArray(t1RateData))
+    console.log('T1速率数据:', t1RateData)
+    if (t1RateData.length > 0) {
+      const dates = [...new Set(t1RateData.map(d => d.statDate))].sort()
+      
+      const seriesData = [
+        {
+          name: 'T1-A区速率（高峰期时段）',
+          type: 'line',
+          data: dates.map(date => {
+            const item = t1RateData.find(d => d.statDate === date)
+            return item ? item.t1AAreaRatePeak : 0
+          }),
+          itemStyle: { color: '#3b82f6' },
+          lineStyle: { width: 3 },
+          symbol: 'circle',
+          symbolSize: 8
+        },
+        {
+          name: 'T1-B区速率（高峰期时段）',
+          type: 'line',
+          data: dates.map(date => {
+            const item = t1RateData.find(d => d.statDate === date)
+            return item ? item.t1BAreaRatePeak : 0
+          }),
+          itemStyle: { color: '#22c55e' },
+          lineStyle: { width: 3 },
+          symbol: 'circle',
+          symbolSize: 8
+        }
+      ]
+
+      console.log('准备设置T1图表选项')
+      console.log('日期数据:', dates)
+      console.log('系列数据:', seriesData)
+
+      setOption1({
+        tooltip: {
+          trigger: 'axis',
+          formatter: function(params) {
+            let result = params[0].name + '<br/>'
+            params.forEach(param => {
+              result += `${param.marker} ${param.seriesName}: ${param.value} 件/小时<br/>`
+            })
+            return result
+          }
+        },
+        legend: {
+          data: ['T1-A区速率（高峰期时段）', 'T1-B区速率（高峰期时段）']
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          data: dates,
+          axisLabel: {
+            rotate: 45
+          }
+        },
+        yAxis: {
+          type: 'value',
+          name: '速率',
+          axisLabel: {
+            formatter: '{value} 件/小时'
+          }
+        },
+        series: seriesData
+      })
+      console.log('T1图表设置完成')
     }
-  ]
-})
 
-const barLineChartOption = (data1, data2, data3, colors) => ({
-  grid: {
-    left: '10%',
-    top: '15%',
-    right: '5%',
-    bottom: '15%',
-    containLabel: true
-  },
-  xAxis: {
-    type: 'category',
-    data: xAxisData,
-    axisLine: { lineStyle: { color: '#999' } },
-    axisLabel: { fontSize: 10, color: '#666', rotate: 45 }
-  },
-  yAxis: {
-    type: 'value',
-    axisLine: { lineStyle: { color: '#999' } },
-    axisLabel: { fontSize: 10, color: '#666' },
-    splitLine: { lineStyle: { color: '#eee' } }
-  },
-  legend: {
-    top: 0,
-    right: 10,
-    textStyle: { fontSize: 10 }
-  },
-  series: [
-    {
-      name: '安检三大队',
-      type: 'bar',
-      data: data1,
-      itemStyle: { color: colors[0] },
-      barWidth: 8
-    },
-    {
-      name: '安检二大队',
-      type: 'line',
-      smooth: true,
-      symbol: 'circle',
-      symbolSize: 6,
-      data: data2,
-      itemStyle: { color: colors[1] }
-    },
-    {
-      name: '安检一大队',
-      type: 'line',
-      smooth: true,
-      symbol: 'circle',
-      symbolSize: 6,
-      data: data3,
-      itemStyle: { color: colors[2] }
+    // T2航站楼放行速率
+    const t2RateData = t2RateRes?.value?.data || []
+    if (t2RateData.length > 0) {
+      const dates = [...new Set(t2RateData.map(d => d.statDate))].sort()
+      
+      const seriesData = [
+        {
+          name: 'T2-国内速率（高峰期时段）',
+          type: 'line',
+          data: dates.map(date => {
+            const item = t2RateData.find(d => d.statDate === date)
+            return item ? item.t2DomesticRatePeak : 0
+          }),
+          itemStyle: { color: '#3b82f6' },
+          lineStyle: { width: 3 },
+          symbol: 'circle',
+          symbolSize: 8
+        },
+        {
+          name: 'T2-国际速率（高峰期时段）',
+          type: 'line',
+          data: dates.map(date => {
+            const item = t2RateData.find(d => d.statDate === date)
+            return item ? item.t2InternationalRatePeak : 0
+          }),
+          itemStyle: { color: '#22c55e' },
+          lineStyle: { width: 3 },
+          symbol: 'circle',
+          symbolSize: 8
+        }
+      ]
+
+      setOption2({
+        tooltip: {
+          trigger: 'axis',
+          formatter: function(params) {
+            let result = params[0].name + '<br/>'
+            params.forEach(param => {
+              result += `${param.marker} ${param.seriesName}: ${param.value} 件/小时<br/>`
+            })
+            return result
+          }
+        },
+        legend: {
+          data: ['T2-国内速率（高峰期时段）', 'T2-国际速率（高峰期时段）']
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          data: dates,
+          axisLabel: {
+            rotate: 45
+          }
+        },
+        yAxis: {
+          type: 'value',
+          name: '速率',
+          axisLabel: {
+            formatter: '{value} 件/小时'
+          }
+        },
+        series: seriesData
+      })
     }
-  ]
-})
+
+    // 大队总平均速率对比（国内）
+    const insideRateData = insideRateRes?.value?.data || []
+    if (insideRateData.length > 0) {
+      const dates = [...new Set(insideRateData.map(d => d.statDate))].sort()
+      const brigadeNames = [...new Set(insideRateData.map(d => d.dutyBrigadeName))]
+      
+      const seriesData = brigadeNames.map((brigade, index) => ({
+        name: brigade,
+        type: 'line',
+        data: dates.map(date => {
+          const item = insideRateData.find(d => d.statDate === date && d.dutyBrigadeName === brigade)
+          return item ? item.avgRatePeak : 0
+        }),
+        itemStyle: {
+          color: ['#3b82f6', '#22c55e', '#f97316', '#ec4899', '#8b5cf6'][index % 5]
+        },
+        lineStyle: { width: 3 },
+        symbol: 'circle',
+        symbolSize: 8
+      }))
+
+      setOption3({
+        tooltip: {
+          trigger: 'axis',
+          formatter: function(params) {
+            let result = params[0].name + '<br/>'
+            params.forEach(param => {
+              result += `${param.marker} ${param.seriesName}: ${param.value} 件/小时<br/>`
+            })
+            return result
+          }
+        },
+        legend: {
+          data: brigadeNames
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          data: dates,
+          axisLabel: {
+            rotate: 45
+          }
+        },
+        yAxis: {
+          type: 'value',
+          name: '速率',
+          axisLabel: {
+            formatter: '{value} 件/小时'
+          }
+        },
+        series: seriesData
+      })
+    }
+
+    // 大队总平均速率对比（国际+中转）
+    const outsideRateData = outsideRateRes?.value?.data || []
+    if (outsideRateData.length > 0) {
+      const dates = [...new Set(outsideRateData.map(d => d.statDate))].sort()
+      const brigadeNames = [...new Set(outsideRateData.map(d => d.dutyBrigadeName))]
+      
+      const seriesData = brigadeNames.map((brigade, index) => ({
+        name: brigade,
+        type: 'line',
+        data: dates.map(date => {
+          const item = outsideRateData.find(d => d.statDate === date && d.dutyBrigadeName === brigade)
+          return item ? item.avgRatePeak : 0
+        }),
+        itemStyle: {
+          color: ['#3b82f6', '#22c55e', '#f97316', '#ec4899', '#8b5cf6'][index % 5]
+        },
+        lineStyle: { width: 3 },
+        symbol: 'circle',
+        symbolSize: 8
+      }))
+
+      setOption4({
+        tooltip: {
+          trigger: 'axis',
+          formatter: function(params) {
+            let result = params[0].name + '<br/>'
+            params.forEach(param => {
+              result += `${param.marker} ${param.seriesName}: ${param.value} 件/小时<br/>`
+            })
+            return result
+          }
+        },
+        legend: {
+          data: brigadeNames
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          data: dates,
+          axisLabel: {
+            rotate: 45
+          }
+        },
+        yAxis: {
+          type: 'value',
+          name: '速率',
+          axisLabel: {
+            formatter: '{value} 件/小时'
+          }
+        },
+        series: seriesData
+      })
+    }
+
+  } catch (error) {
+    console.error('加载速率数据失败:', error)
+  }
+}
+
+// 监听筛选参数变化
+watch(() => props.filterParams, () => {
+  loadData()
+}, { deep: true })
+
+
 
 onMounted(() => {
-  setOption1(lineChartOption(generateData(), generateData(), '#3b82f6', '#22c55e'))
-  setOption2(lineChartOption(generateData(), generateData(), '#2563eb', '#16a34a'))
-  setOption3(barLineChartOption(generateData(), generateData(), generateData(), ['#3b82f6', '#22c55e', '#f97316']))
-  setOption4(barLineChartOption(generateData(), generateData(), generateData(), ['#3b82f6', '#22c55e', '#f97316']))
+  loadData()
 })
 </script>
 
@@ -195,6 +386,8 @@ onMounted(() => {
   flex: 1;
   display: flex;
   gap: 10px;
+  min-height: 400px;
+  height: 400px;
 }
 
 .chart-item {
@@ -203,10 +396,11 @@ onMounted(() => {
   flex-direction: column;
   background: #fff;
   border-radius: 6px;
-  padding: 8px;
-
+  padding: 15px;
   border: 1px solid #eee;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  min-height: 350px;
+  height: 100%;
 }
 
 .chart-title {
@@ -219,6 +413,7 @@ onMounted(() => {
 .echarts {
   flex: 1;
   width: 100%;
-  min-height: 0;
+  min-height: 300px;
+  height: 300px;
 }
 </style>

src/views/blockingData/blockingDataScreen/components/ModuleOne.vue

@@ -432,51 +432,533 @@ const loadData = async () => {
     console.log(itemDistRes, areaDistRes, 55555)
     const itemDistData = itemDistRes?.value?.data || []
     if (itemDistData.length > 0) {
-      setOption7(ringPieOption(
-        itemDistData.map(d => ({ name: d.name, value: d.value })),
-        ['#3b82f6', '#22c55e', '#f97316', '#ec4899', '#8b5cf6', '#14b8a6']
-      ))
+      setOption7({
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b}: {c} ({d}%)'
+        },
+        legend: {
+          orient: 'vertical',
+          left: 'left',
+          data: itemDistData.map(d => d.missCheckItem)
+        },
+        series: [
+          {
+            name: '查堵物品分布',
+            type: 'pie',
+            radius: ['40%', '70%'],
+            avoidLabelOverlap: false,
+            itemStyle: {
+              
+              borderColor: '#fff',
+              borderWidth: 2
+            },
+            // label: {
+            //   show: true,
+            //   position: 'center'
+            // },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: '18',
+                fontWeight: 'bold'
+              }
+            },
+            labelLine: {
+              show: true
+            },
+            data: itemDistData.map((d, index) => ({
+              value: d.count,
+              name: d.missCheckItem,
+              itemStyle: {
+                color: ['#3b82f6', '#22c55e', '#f97316', '#ec4899', '#8b5cf6', '#14b8a6'][index % 6]
+              }
+            }))
+          }
+        ]
+      })
     }
 
 
-    const areaDistData = areaDistRes?.value?.data || []
-    if (areaDistData.length > 0) {
-      setOption8(ringPieOption(
-        areaDistData.map(d => ({ name: d.name, value: d.value })),
-        ['#3b82f6', '#22c55e', '#f97316', '#ec4899', '#8b5cf6', '#14b8a6']
-      ))
-    }
+    const areaDistData = areaDistRes?.value?.data || {}
+    
+    // 提取数据
+    const brigadeNames = areaDistData.brigadeNames || []
+    const luggageDataList = areaDistData.luggageDataList || []
+    const blockedDataList = areaDistData.blockedDataList || []
+    
+    // 柱状图数据（过检行李数）
+    const barSeries = [
+      {
+        name: 'T1旅检行李数',
+        type: 'bar',
+        data: brigadeNames.map(brigade => {
+          const item = luggageDataList.find(d => d.brigadeName === brigade)
+          return item ? item.t1PassengerLuggageCount : 0
+        }),
+        itemStyle: { color: '#3b82f6' }
+      },
+      {
+        name: 'T2旅检行李数',
+        type: 'bar',
+        data: brigadeNames.map(brigade => {
+          const item = luggageDataList.find(d => d.brigadeName === brigade)
+          return item ? item.t2PassengerLuggageCount : 0
+        }),
+        itemStyle: { color: '#22c55e' }
+      },
+      {
+        name: 'T1行检行李数',
+        type: 'bar',
+        data: brigadeNames.map(brigade => {
+          const item = luggageDataList.find(d => d.brigadeName === brigade)
+          return item ? item.t1CargoLuggageCount : 0
+        }),
+        itemStyle: { color: '#f97316' }
+      },
+      {
+        name: 'T2行检行李数',
+        type: 'bar',
+        data: brigadeNames.map(brigade => {
+          const item = luggageDataList.find(d => d.brigadeName === brigade)
+          return item ? item.t2CargoLuggageCount : 0
+        }),
+        itemStyle: { color: '#ec4899' }
+      }
+    ]
+    
+    // 折线图数据（查堵数）
+    const lineSeries = [
+      {
+        name: 'T1旅检查堵数',
+        type: 'line',
+        yAxisIndex: 1,
+        data: brigadeNames.map(brigade => {
+          const item = blockedDataList.find(d => d.brigadeName === brigade)
+          return item ? item.t1PassengerBlockedCount : 0
+        }),
+        itemStyle: { color: '#3b82f6' },
+        lineStyle: { width: 3 },
+        symbol: 'circle',
+        symbolSize: 8
+      },
+      {
+        name: 'T2旅检查堵数',
+        type: 'line',
+        yAxisIndex: 1,
+        data: brigadeNames.map(brigade => {
+          const item = blockedDataList.find(d => d.brigadeName === brigade)
+          return item ? item.t2PassengerBlockedCount : 0
+        }),
+        itemStyle: { color: '#22c55e' },
+        lineStyle: { width: 3 },
+        symbol: 'circle',
+        symbolSize: 8
+      },
+      {
+        name: 'T1行检查堵数',
+        type: 'line',
+        yAxisIndex: 1,
+        data: brigadeNames.map(brigade => {
+          const item = blockedDataList.find(d => d.brigadeName === brigade)
+          return item ? item.t1CargoBlockedCount : 0
+        }),
+        itemStyle: { color: '#f97316' },
+        lineStyle: { width: 3 },
+        symbol: 'circle',
+        symbolSize: 8
+      },
+      {
+        name: 'T2行检查堵数',
+        type: 'line',
+        yAxisIndex: 1,
+        data: brigadeNames.map(brigade => {
+          const item = blockedDataList.find(d => d.brigadeName === brigade)
+          return item ? item.t2CargoBlockedCount : 0
+        }),
+        itemStyle: { color: '#ec4899' },
+        lineStyle: { width: 3 },
+        symbol: 'circle',
+        symbolSize: 8
+      }
+    ]
+    
+    setOption8({
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'cross'
+        },
+        formatter: function(params) {
+          let result = params[0].name + '<br/>'
+          params.forEach(param => {
+            if (param.seriesType === 'bar') {
+              result += `${param.marker} ${param.seriesName}: ${param.value.toLocaleString()} 件<br/>`
+            } else {
+              result += `${param.marker} ${param.seriesName}: ${param.value} 次<br/>`
+            }
+          })
+          return result
+        }
+      },
+      legend: {
+        data: [
+          'T1旅检行李数', 'T2旅检行李数', 'T1行检行李数', 'T2行检行李数',
+          'T1旅检查堵数', 'T2旅检查堵数', 'T1行检查堵数', 'T2行检查堵数'
+        ]
+      },
+      grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true
+      },
+      xAxis: {
+        type: 'category',
+        data: brigadeNames,
+        axisLabel: {
+          rotate: 45
+        }
+      },
+      yAxis: [
+        {
+          type: 'value',
+          name: '行李数',
+          position: 'left',
+          axisLine: {
+            lineStyle: {
+              color: '#3b82f6'
+            }
+          },
+          axisLabel: {
+            formatter: '{value} 件'
+          }
+        },
+        {
+          type: 'value',
+          name: '查堵数',
+          position: 'right',
+          axisLine: {
+            lineStyle: {
+              color: '#ec4899'
+            }
+          },
+          axisLabel: {
+            formatter: '{value} 次'
+          }
+        }
+      ],
+      series: [...barSeries, ...lineSeries]
+    })
 
 
     // 查堵类型分布
     const discDistRes = await discriminationDistribution(queryParams)
     const discDistData = discDistRes.data || []
-    setOption9(barChartOption(discDistData, '#3b82f6'))
+    
+    // 按discriminationType分组数据
+    const groupedData = {}
+    discDistData.forEach(item => {
+      if (!groupedData[item.discriminationType]) {
+        groupedData[item.discriminationType] = []
+      }
+      groupedData[item.discriminationType].push(item)
+    })
+    
+    // 提取所有missCheckItem作为横坐标
+    const allMissCheckItems = [...new Set(discDistData.map(d => d.missCheckItem))]
+    
+    // 为每个discriminationType创建数据系列
+    const seriesData = Object.keys(groupedData).map((type, index) => {
+      const data = allMissCheckItems.map(item => {
+        const found = groupedData[type].find(d => d.missCheckItem === item)
+        return found ? found.count : 0
+      })
+      return {
+        name: type,
+        type: 'bar',
+        data: data,
+        itemStyle: {
+          color: ['#3b82f6', '#22c55e', '#f97316', '#ec4899', '#8b5cf6', '#14b8a6'][index % 6]
+        }
+      }
+    })
+    
+    setOption9({
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'shadow'
+        }
+      },
+      legend: {
+        data: Object.keys(groupedData)
+      },
+      grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true
+      },
+      xAxis: {
+        type: 'category',
+        data: allMissCheckItems,
+        axisLabel: {
+          rotate: 45
+        }
+      },
+      yAxis: {
+        type: 'value'
+      },
+      series: seriesData
+    })
 
     // 查堵时间段过检行李数及万分率
     const timePeriodRes = await timePeriodStats(queryParams)
     const timePeriodData = timePeriodRes.data || []
-    setOption10(dualAxisBarChartOption(
-      timePeriodData.map(d => d.luggageCount),
-      timePeriodData.map(d => d.rate),
-      '#3b82f6',
-      '#ec4899'
-    ))
+    
+    setOption10({
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'cross'
+        },
+        formatter: function(params) {
+          let result = params[0].name + '<br/>'
+          params.forEach(param => {
+            if (param.seriesName === '过检行李数') {
+              result += `${param.marker} ${param.seriesName}: ${param.value} 件<br/>`
+            } else {
+              result += `${param.marker} ${param.seriesName}: ${param.value} ‰<br/>`
+            }
+          })
+          return result
+        }
+      },
+      legend: {
+        data: ['过检行李数', '查堵万分率']
+      },
+      grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true
+      },
+      xAxis: {
+        type: 'category',
+        data: timePeriodData.map(d => d.timePeriod),
+        axisLabel: {
+          rotate: 45
+        }
+      },
+      yAxis: [
+        {
+          type: 'value',
+          name: '过检行李数',
+          position: 'left',
+          axisLine: {
+            lineStyle: {
+              color: '#3b82f6'
+            }
+          },
+          axisLabel: {
+            formatter: '{value} 件'
+          }
+        },
+        {
+          type: 'value',
+          name: '查堵万分率',
+          position: 'right',
+          axisLine: {
+            lineStyle: {
+              color: '#ec4899'
+            }
+          },
+          axisLabel: {
+            formatter: '{value} ‰'
+          }
+        }
+      ],
+      series: [
+        {
+          name: '过检行李数',
+          type: 'bar',
+          yAxisIndex: 0,
+          data: timePeriodData.map(d => d.totalLuggageCount),
+          itemStyle: {
+            color: '#3b82f6'
+          }
+        },
+        {
+          name: '查堵万分率',
+          type: 'line',
+          yAxisIndex: 1,
+          data: timePeriodData.map(d => d.blockRate),
+          itemStyle: {
+            color: '#ec4899'
+          },
+          lineStyle: {
+            width: 3
+          },
+          symbol: 'circle',
+          symbolSize: 8
+        }
+      ]
+    })
 
     // 每日过检行李数及万分率
     const dailyLuggageRes = await dailyLuggageAndRate(queryParams)
     const dailyLuggageData = dailyLuggageRes.data || []
-    setOption11(dualAxisBarChartOption(
-      dailyLuggageData.map(d => d.luggageCount),
-      dailyLuggageData.map(d => d.rate),
-      '#3b82f6',
-      '#ec4899'
-    ))
+    
+    setOption11({
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'cross'
+        },
+        formatter: function(params) {
+          let result = params[0].name + '<br/>'
+          params.forEach(param => {
+            if (param.seriesName === '过检行李数') {
+              result += `${param.marker} ${param.seriesName}: ${param.value} 件<br/>`
+            } else {
+              result += `${param.marker} ${param.seriesName}: ${param.value} ‰<br/>`
+            }
+          })
+          return result
+        }
+      },
+      legend: {
+        data: ['过检行李数', '查堵万分率']
+      },
+      grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true
+      },
+      xAxis: {
+        type: 'category',
+        data: dailyLuggageData.map(d => d.timePeriod),
+        axisLabel: {
+          rotate: 45
+        }
+      },
+      yAxis: [
+        {
+          type: 'value',
+          name: '过检行李数',
+          position: 'left',
+          axisLine: {
+            lineStyle: {
+              color: '#3b82f6'
+            }
+          },
+          axisLabel: {
+            formatter: '{value} 件'
+          }
+        },
+        {
+          type: 'value',
+          name: '查堵万分率',
+          position: 'right',
+          axisLine: {
+            lineStyle: {
+              color: '#ec4899'
+            }
+          },
+          axisLabel: {
+            formatter: '{value} ‰'
+          }
+        }
+      ],
+      series: [
+        {
+          name: '过检行李数',
+          type: 'bar',
+          yAxisIndex: 0,
+          data: dailyLuggageData.map(d => d.totalLuggageCount),
+          itemStyle: {
+            color: '#3b82f6'
+          }
+        },
+        {
+          name: '查堵万分率',
+          type: 'line',
+          yAxisIndex: 1,
+          data: dailyLuggageData.map(d => d.blockRate),
+          itemStyle: {
+            color: '#ec4899'
+          },
+          lineStyle: {
+            width: 3
+          },
+          symbol: 'circle',
+          symbolSize: 8
+        }
+      ]
+    })
 
     // AI复查图像总数
     const aiImageRes = await aiImageStats(queryParams)
     const aiImageData = aiImageRes.data || []
-    setOption12(lineChartOption(aiImageData.map(d => d.value), '#14b8a6', 'AI复查图像数'))
+    
+    setOption12({
+      tooltip: {
+        trigger: 'axis',
+        formatter: function(params) {
+          return `${params[0].name}<br/>AI复查图像数: ${params[0].value} 张`
+        }
+      },
+      grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true
+      },
+      xAxis: {
+        type: 'category',
+        data: aiImageData.map(d => d.statDate ? d.statDate.split('T')[0] : ''),
+        axisLabel: {
+          rotate: 45
+        }
+      },
+      yAxis: {
+        type: 'value',
+        name: '图像数',
+        axisLabel: {
+          formatter: '{value} 张'
+        }
+      },
+      series: [
+        {
+          name: 'AI复查图像数',
+          type: 'line',
+          data: aiImageData.map(d => d.totalBlockedCount),
+          itemStyle: {
+            color: '#14b8a6'
+          },
+          lineStyle: {
+            width: 3
+          },
+          symbol: 'circle',
+          symbolSize: 8,
+          areaStyle: {
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                { offset: 0, color: 'rgba(20, 184, 166, 0.3)' },
+                { offset: 1, color: 'rgba(20, 184, 166, 0.1)' }
+              ]
+            }
+          }
+        }
+      ]
+    })
 
     // AI漏判和误判图像总数
     const [aiMissRes, aiErrorRes] = await Promise.all([
@@ -487,8 +969,121 @@ const loadData = async () => {
     const aiMissData = aiMissRes.data || []
     const aiErrorData = aiErrorRes.data || []
 
-    setOption13(lineChartOption(aiMissData.map(d => d.value), '#ef4444', 'AI漏判图像数'))
-    setOption14(lineChartOption(aiErrorData.map(d => d.value), '#f97316', 'AI误判图像数'))
+    // AI漏判图像数
+    setOption13({
+      tooltip: {
+        trigger: 'axis',
+        formatter: function(params) {
+          return `${params[0].name}<br/>AI漏判图像数: ${params[0].value} 张`
+        }
+      },
+      grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true
+      },
+      xAxis: {
+        type: 'category',
+        data: aiMissData.map(d => d.statDate ? d.statDate.split('T')[0] : ''),
+        axisLabel: {
+          rotate: 45
+        }
+      },
+      yAxis: {
+        type: 'value',
+        name: '图像数',
+        axisLabel: {
+          formatter: '{value} 张'
+        }
+      },
+      series: [
+        {
+          name: 'AI漏判图像数',
+          type: 'line',
+          data: aiMissData.map(d => d.totalBlockedCount),
+          itemStyle: {
+            color: '#ef4444'
+          },
+          lineStyle: {
+            width: 3
+          },
+          symbol: 'circle',
+          symbolSize: 8,
+          areaStyle: {
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                { offset: 0, color: 'rgba(239, 68, 68, 0.3)' },
+                { offset: 1, color: 'rgba(239, 68, 68, 0.1)' }
+              ]
+            }
+          }
+        }
+      ]
+    })
+
+    // AI误判图像数
+    setOption14({
+      tooltip: {
+        trigger: 'axis',
+        formatter: function(params) {
+          return `${params[0].name}<br/>AI误判图像数: ${params[0].value} 张`
+        }
+      },
+      grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true
+      },
+      xAxis: {
+        type: 'category',
+        data: aiErrorData.map(d => d.statDate ? d.statDate.split('T')[0] : ''),
+        axisLabel: {
+          rotate: 45
+        }
+      },
+      yAxis: {
+        type: 'value',
+        name: '图像数',
+        axisLabel: {
+          formatter: '{value} 张'
+        }
+      },
+      series: [
+        {
+          name: 'AI误判图像数',
+          type: 'line',
+          data: aiErrorData.map(d => d.totalBlockedCount),
+          itemStyle: {
+            color: '#f97316'
+          },
+          lineStyle: {
+            width: 3
+          },
+          symbol: 'circle',
+          symbolSize: 8,
+          areaStyle: {
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                { offset: 0, color: 'rgba(249, 115, 22, 0.3)' },
+                { offset: 1, color: 'rgba(249, 115, 22, 0.1)' }
+              ]
+            }
+          }
+        }
+      ]
+    })
 
   } catch (error) {
     console.error('加载数据失败:', error)
@@ -793,17 +1388,17 @@ onMounted(() => {
   flex: 1;
   background: #fff;
   border-radius: 6px;
-  padding: 10px;
+  padding: 15px;
   border: 1px solid #eee;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
   display: flex;
   flex-direction: column;
-  min-height: 200px;
+  min-height: 280px;
 }
 
 .chart-row.full-width .chart-item {
   flex: none;
-  height: 200px;
+  height: 280px;
 }
 
 .chart-title {

src/views/blockingData/blockingDataScreen/components/ModuleThree.vue

@@ -14,10 +14,12 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, watch } from 'vue'
 import * as echarts from 'echarts'
 import ModuleContainer from './ModuleContainer.vue'
 import { useEcharts } from '@/hooks/chart.js'
+import { monthlyAssessment, selfTestHasMissCheck } from '@/api/blockingData/blockingDataScreen.js'
+import { formatDateHy } from '@/utils/index.js'
 
 // 接收筛选参数
 const props = defineProps({
@@ -33,8 +35,78 @@ const chart2 = ref(null)
 const { setOption: setOption1 } = useEcharts(chart1)
 const { setOption: setOption2 } = useEcharts(chart2)
 
+// 处理filterParams，将dateRange拆分为startTime和endTime
+const processFilterParams = (params) => {
+  const { dateRange, ...rest } = params
+  const processed = { ...rest }
+
+  if (dateRange && Array.isArray(dateRange) && dateRange.length === 2) {
+    processed.startDate = formatDateHy(dateRange[0])
+    processed.endDate = formatDateHy(dateRange[1])
+  }
+  if (processed.brigadeId == 'all') {
+    delete processed.brigadeId
+  }
+  if (processed.terminalId == 'all') {
+    delete processed.terminalId
+  }
+
+  return processed
+}
+
+// 数据加载函数
+const loadData = async () => {
+  try {
+    const queryParams = processFilterParams(props.filterParams)
+
+    // 并行请求培训质控数据
+    const [selfTestRes, monthlyAssessmentRes] = await Promise.allSettled([
+      selfTestHasMissCheck(queryParams),
+      monthlyAssessment(queryParams)
+    ])
+
+    // 查堵-人员自测漏检次数（总累积）
+    const selfTestData = selfTestRes?.value?.data || []
+    
+    if (selfTestData.length > 0) {
+      setOption1(ringPieOption(
+        selfTestData.map(item => ({
+          name: item.name || item.level || '未知',
+          value: item.total || item.count || 0
+        })),
+        ['#3b82f6', '#22c55e', '#f97316', '#cbd5e1']
+      ))
+    }
+
+    // 查堵培训-人员月考成绩（总累积）
+    const monthlyAssessmentData = monthlyAssessmentRes?.value?.data || []
+    if (monthlyAssessmentData.length > 0) {
+      setOption2(ringPieOption(
+        monthlyAssessmentData.map(item => ({
+          name: item.name || item.grade || '未知',
+          value: item.total || item.count || 0
+        })),
+        ['#64748b', '#ef4444', '#22c55e', '#3b82f6', '#cbd5e1']
+      ))
+    }
+
+  } catch (error) {
+    console.error('加载培训质控数据失败:', error)
+  }
+}
+
+// 监听筛选参数变化
+watch(() => props.filterParams, () => {
+  loadData()
+}, { deep: true })
+
 const ringPieOption = (data, colors, centerOffset = ['50%', '55%']) => ({
   color: colors,
+  legend: {
+    data: data.map(item => item.name),
+    top: '0%',
+    textStyle: { fontSize: 10 }
+  },
   series: [{
     type: 'pie',
     radius: ['45%', '70%'],
@@ -54,20 +126,7 @@ const ringPieOption = (data, colors, centerOffset = ['50%', '55%']) => ({
 })
 
 onMounted(() => {
-  setOption1(ringPieOption([
-    { name: '4次', value: 26 },
-    { name: '3次', value: 9 },
-    { name: '2次', value: 8 },
-    { name: '空白', value: 57 }
-  ], ['#3b82f6', '#22c55e', '#f97316', '#cbd5e1']))
-  
-  setOption2(ringPieOption([
-    { name: '本月未开展', value: 12 },
-    { name: '不合格', value: 8 },
-    { name: '合格', value: 13 },
-    { name: '优秀', value: 6 },
-    { name: '空白', value: 61 }
-  ], ['#64748b', '#ef4444', '#22c55e', '#3b82f6', '#cbd5e1']))
+  loadData()
 })
 </script>
 
@@ -83,11 +142,13 @@ onMounted(() => {
   flex: 1;
   background: #fff;
   border-radius: 6px;
-  padding: 10px;
+  padding: 15px;
   border: 1px solid #eee;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
   display: flex;
   flex-direction: column;
+  min-height: 350px;
+  height: 100%;
 }
 
 .chart-title {
@@ -100,6 +161,7 @@ onMounted(() => {
 .echarts {
   flex: 1;
   width: 100%;
-  min-height: 0;
+  min-height: 300px;
+  height: 300px;
 }
 </style>

src/views/blockingData/blockingDataScreen/components/ModuleTwo.vue

@@ -44,11 +44,11 @@
 
       <div class="extra-row">
         <div class="chart-card">
-          <div class="chart-title">大队开机人员查堵分布</div>
+          <div class="chart-title">大队开机人员年限分布</div>
           <div ref="chart6" class="echarts"></div>
         </div>
         <div class="chart-card">
-          <div class="chart-title">大队开机人员查堵分布</div>
+          <div class="chart-title">大队开机人员证书分布</div>
           <div ref="chart7" class="echarts"></div>
         </div>
       </div>
@@ -57,12 +57,24 @@
 </template>
 
 <script setup>
-import { ref, onMounted, reactive } from 'vue'
+import { ref, onMounted, reactive, watch } from 'vue'
 import * as echarts from 'echarts'
 import ModuleContainer from './ModuleContainer.vue'
 import RankList from './RankList.vue'
 import { useEcharts } from '@/hooks/chart.js'
-
+import {
+  supervisorRanking,
+  teamLeaderRanking,
+  reviewedUserRanking,
+  itemLocationDistribution,
+  missCheckReasonDistribution,
+  brigadeOperatingYearsDistribution,
+  brigadeGenderDistribution,
+  brigadeDifficultyDistribution,
+  brigadeCertificateDistribution,
+  tenureListAll
+} from '@/api/blockingData/blockingDataScreen.js'
+import { formatDateHy } from '@/utils/index.js'
 // 接收筛选参数
 const props = defineProps({
   filterParams: {
@@ -86,50 +98,218 @@ const { setOption: setOption4 } = useEcharts(chart4)
 const { setOption: setOption5 } = useEcharts(chart5)
 const { setOption: setOption6 } = useEcharts(chart6)
 const { setOption: setOption7 } = useEcharts(chart7)
+// 处理filterParams，将dateRange拆分为startTime和endTime
+const processFilterParams = (params) => {
+  const { dateRange, ...rest } = params
+  const processed = { ...rest }
+
+  if (dateRange && Array.isArray(dateRange) && dateRange.length === 2) {
+    processed.startTime = formatDateHy(dateRange[0])
+    processed.endTime = formatDateHy(dateRange[1])
+  }
+  if (processed.brigadeId == 'all') {
+    delete processed.brigadeId
+  }
+  if (processed.terminalId == 'all') {
+    delete processed.terminalId
+  }
+
+  return processed
+}
+// 数据加载函数
+const loadData = async () => {
+  try {
+    const queryParams = processFilterParams(props.filterParams)
+
+    // 排行榜数据
+    const [supervisorRankRes, teamLeaderRankRes, reviewedUserRankRes] = await Promise.allSettled([
+      supervisorRanking(queryParams),
+      teamLeaderRanking(queryParams),
+      reviewedUserRanking(queryParams)
+    ])
+    
+    // 更新排行榜数据
+    if (supervisorRankRes?.value?.data) {
+      rankData1.splice(0, rankData1.length, ...supervisorRankRes.value.data.map((item, index) => ({
+        name: item.name || '未知',
+        value: item.totalCount || 0
+      })))
+    }
+
+    if (teamLeaderRankRes?.value?.data) {
+      rankData2.splice(0, rankData2.length, ...teamLeaderRankRes.value.data.map((item, index) => ({
+        name: item.name || '未知',
+        value: item.totalCount || 0
+      })))
+    }
+
+    if (reviewedUserRankRes?.value?.data) {
+      rankData3.splice(0, rankData3.length, ...reviewedUserRankRes.value.data.map((item, index) => ({
+        name: item.name || '未知',
+        value: item.totalCount || 0
+      })))
+    }
+
+    // 图表数据
+    const [itemLocationRes, missCheckReasonRes, operatingYearsRes, genderRes, difficultyRes, certificateRes, tenureListRes] = await Promise.allSettled([
+      itemLocationDistribution(queryParams),
+      missCheckReasonDistribution(queryParams),
+      brigadeOperatingYearsDistribution(queryParams),
+      brigadeGenderDistribution(queryParams),
+      brigadeDifficultyDistribution(queryParams),
+      brigadeCertificateDistribution(queryParams),
+      tenureListAll(queryParams)
+    ])
+
+    // 设置图表数据
+    setOption1(pieOption(
+      itemLocationRes?.value?.data?.map(item => ({
+        name: item.itemLocation || '未知',
+        value: item.count || 0
+      })) || [],
+      ['#3b82f6', '#22c55e', '#f97316', '#ec4899', '#8b5cf6', '#14b8a6', '#64748b']
+    ))
+
+    setOption2(pieOption(
+      missCheckReasonRes?.value?.data?.map(item => ({
+        name: item.name || item.reason || '未知',
+        value: item.value || item.count || 0
+      })) || [],
+      ['#ef4444', '#f97316', '#eab308', '#22c55e', '#3b82f6', '#64748b'],
+      true
+    ))
+
+    setOption3(barOption(
+      operatingYearsRes?.value?.data?.map(item => ({
+        name: item.operatingYears || '未知',
+        value: item.count || 0
+      })) || [],
+      ['#3b82f6', '#60a5fa', '#93c5fd', '#bfdbfe', '#dbeafe', '#eff6ff']
+    ))
+
+    setOption4(pieOption(
+      genderRes?.value?.data?.map(item => ({
+        name: item.gender || '未知',
+        value: item.count || 0
+      })) || [],
+      ['#3b82f6', '#ec4899']
+    ))
+
+    setOption5(pieOption(
+      difficultyRes?.value?.data?.map(item => ({
+        name: item.difficultyLevel || '未知',
+        value: item.count || 0
+      })) || [],
+      ['#93c5fd', '#3b82f6', '#64748b', '#e2e8f0']
+    ))
+
+    // 大队开机人员年限分布
+    const tenureListData = tenureListRes?.value?.data || []
+    if (tenureListData.length > 0) {
+      const categories = [...new Set(tenureListData.map(item => item.brigadeName))]
+      const tenureLevels = [
+        { name: '1年', key: 'cnt1Years' },
+        { name: '2年', key: 'cnt2Years' },
+        { name: '3年', key: 'cnt3Years' },
+        { name: '4年', key: 'cnt4Years' },
+        { name: '5年', key: 'cntGe5Year' }
+      ]
+      
+      const seriesData = tenureLevels.map(level => ({
+        name: level.name,
+        type: 'bar',
+        data: categories.map(brigade => {
+          const item = tenureListData.find(d => d.brigadeName === brigade)
+          return item ? item[level.key] : 0
+        }),
+        itemStyle: {
+          color: ['#3b82f6', '#22c55e', '#f97316', '#ec4899', '#8b5cf6'][tenureLevels.indexOf(level) % 5]
+        },
+        barWidth: 15
+      }))
+
+      setOption6({
+        grid: { left: '15%', top: '10%', right: '5%', bottom: '15%', containLabel: true },
+        xAxis: { 
+          type: 'category', 
+          data: categories, 
+          axisLabel: { fontSize: 9 },
+          axisTick: {
+            alignWithLabel: true
+          }
+        },
+        yAxis: { type: 'value', axisLabel: { fontSize: 9 } },
+        legend: { top: 0, right: 10, textStyle: { fontSize: 9 } },
+        series: seriesData
+      })
+    }
+
+    // 大队开机人员证书分布
+    const certificateData = certificateRes?.value?.data || []
+    if (certificateData.length > 0) {
+      const certificateCategories = ['高级证书', '中级证书', '初级证书']
+      const brigadeNames = [...new Set(certificateData.map(item => item.brigadeName))]
+      
+      const certificateSeriesData = brigadeNames.map((brigadeName, index) => {
+        const brigadeData = certificateData.find(d => d.brigadeName === brigadeName)
+        return {
+          name: brigadeName,
+          type: 'bar',
+          data: [
+            brigadeData?.seniorCount || 0,
+            brigadeData?.middleCount || 0,
+            brigadeData?.juniorCount || 0
+          ],
+          itemStyle: {
+            color: ['#3b82f6', '#22c55e', '#f97316', '#ec4899', '#8b5cf6', '#14b8a6'][index % 6]
+          },
+          barWidth: 20
+        }
+      })
+
+      setOption7({
+        grid: { left: '15%', top: '10%', right: '5%', bottom: '15%', containLabel: true },
+        xAxis: { 
+          type: 'category', 
+          data: certificateCategories, 
+          axisLabel: { fontSize: 10 },
+          axisLine: { lineStyle: { color: '#999' } }
+        },
+        yAxis: { 
+          type: 'value', 
+          axisLabel: { fontSize: 10 },
+          axisLine: { lineStyle: { color: '#999' } },
+          splitLine: { lineStyle: { color: '#eee' } }
+        },
+        legend: { 
+          top: 0, 
+          right: 10, 
+          textStyle: { fontSize: 10 } 
+        },
+        series: certificateSeriesData
+      })
+    }
+
+  } catch (error) {
+    console.error('加载数据失败:', error)
+  }
+}
+
+// 监听筛选参数变化
+watch(() => props.filterParams, () => {
+  loadData()
+}, { deep: true })
 
 const rankData1 = reactive([
-  { name: '李主管', value: 110 },
-  { name: '李海峰', value: 102 },
-  { name: '李华波', value: 94 },
-  { name: '方星星', value: 80 },
-  { name: '郭仁昌', value: 69 },
-  { name: '陈晓明', value: 67 },
-  { name: '万国', value: 62 },
-  { name: '杨高星', value: 60 },
-  { name: '符昌国', value: 59 },
-  { name: '李星国', value: 57 },
-  { name: '周良志', value: 56 },
-  { name: '杨旭', value: 53 }
+  
 ])
 
 const rankData2 = reactive([
-  { name: '李智辉', value: 44 },
-  { name: '林明玉', value: 42 },
-  { name: '吴帮文', value: 40 },
-  { name: '杨玉艳', value: 37 },
-  { name: '符玉玲', value: 37 },
-  { name: '黄登', value: 36 },
-  { name: '梁品俊', value: 35 },
-  { name: '陈勤丽', value: 35 },
-  { name: '潘政生', value: 34 },
-  { name: '周民伦', value: 34 },
-  { name: '王明星', value: 33 },
-  { name: '林文海', value: 33 }
+  
 ])
 
 const rankData3 = reactive([
-  { name: '梁翠兰', value: 21 },
-  { name: '陈秀强', value: 20 },
-  { name: '李国', value: 19 },
-  { name: '梁其佐', value: 18 },
-  { name: '王名标', value: 18 },
-  { name: '李书帆', value: 17 },
-  { name: '李亚峰', value: 17 },
-  { name: '杨燕钰', value: 16 },
-  { name: '刘燕萍', value: 16 },
-  { name: '庄伟', value: 16 },
-  { name: '黄富伦', value: 15 },
-  { name: '唐甸宇', value: 15 }
+ 
 ])
 
 const pieOption = (data, colors, isRing = false) => ({
@@ -177,54 +357,7 @@ const stackBarOption = (data, colors) => ({
 })
 
 onMounted(() => {
-  setOption1(pieOption([
-    { name: '包上', value: 10 },
-    { name: '包中', value: 15 },
-    { name: '包下', value: 12 },
-    { name: '左上', value: 18 },
-    { name: '左中', value: 20 },
-    { name: '左下', value: 15 },
-    { name: '右下', value: 10 }
-  ], ['#3b82f6', '#22c55e', '#f97316', '#ec4899', '#8b5cf6', '#14b8a6', '#64748b']))
-  setOption2(pieOption([
-    { name: '未注意到部位以及未仔细判图', value: 25 },
-    { name: '图像特征难以发现', value: 20 },
-    { name: '判图难度较大', value: 18 },
-    { name: '图像中判清物品', value: 15 },
-    { name: '判图不清，未能有效识别物品', value: 12 },
-    { name: '其他', value: 10 }
-  ], ['#ef4444', '#f97316', '#eab308', '#22c55e', '#3b82f6', '#64748b'], true))
-  setOption3(barOption([
-    { name: '6年及以上', value: 77 },
-    { name: '4-6年', value: 25 },
-    { name: '3年', value: 18 },
-    { name: '2年', value: 30 },
-    { name: '1年', value: 69 },
-    { name: '1年以下', value: 12 }
-  ], ['#3b82f6', '#60a5fa', '#93c5fd', '#bfdbfe', '#dbeafe', '#eff6ff']))
-  setOption4(pieOption([
-    { name: '男', value: 63 },
-    { name: '女', value: 37 }
-  ], ['#3b82f6', '#ec4899']))
-  setOption5(pieOption([
-    { name: '简单', value: 52 },
-    { name: '难', value: 30 },
-    { name: '未评判', value: 12 },
-    { name: '空白', value: 6 }
-  ], ['#93c5fd', '#3b82f6', '#64748b', '#e2e8f0']))
-  setOption6(stackBarOption([
-    { name: '6年及以上人数', data: [30, 25, 22] },
-    { name: '4-6年人数', data: [15, 20, 18] },
-    { name: '3年人数', data: [10, 12, 15] },
-    { name: '2年人数', data: [12, 15, 13] },
-    { name: '1年人数', data: [25, 30, 28] },
-    { name: '不足1年人数', data: [5, 8, 10] }
-  ], ['#3b82f6', '#22c55e', '#f97316', '#ec4899', '#8b5cf6', '#14b8a6']))
-  setOption7(stackBarOption([
-    { name: '安检一大队', data: [135, 120] },
-    { name: '安检二大队', data: [90, 110] },
-    { name: '安检三大队', data: [70, 130] }
-  ], ['#3b82f6', '#22c55e', '#f97316']))
+  loadData()
 })
 </script>
 
@@ -262,12 +395,12 @@ onMounted(() => {
   flex: 1;
   background: #fff;
   border-radius: 6px;
-  padding: 8px;
+  padding: 15px;
   border: 1px solid #eee;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
   display: flex;
   flex-direction: column;
-  min-height: 120px;
+  min-height: 280px;
 }
 
 .chart-title {
@@ -324,6 +457,6 @@ onMounted(() => {
 .echarts {
   flex: 1;
   width: 100%;
-  min-height: 100px;
+  min-height: 250px;
 }
 </style>

src/views/blockingData/blockingDataScreen/components/RankList.vue

@@ -6,7 +6,7 @@
       <span class="header-count">{{ headerCount }}</span>
     </div>
     <div class="rank-list-body">
-      <div v-for="(item, index) in rankData" :key="index" class="rank-item" :class="'rank-item-' + getRankClass(index)">
+      <div v-for="(item, index) in rankData" :key="index" class="rank-item" :class="getItemClass(index)">
         <span class="rank-number" :class="'rank-number-' + getRankClass(index)">NO.{{ index + 1 }}</span>
         <div class="rank-info">
           <span class="rank-name">{{ item.name }}</span>
@@ -61,18 +61,25 @@ const getRankClass = (index) => {
 const getProgressWidth = (value, max) => {
   return (value / max) * 100
 }
+
+const getItemClass = (index) => {
+  const baseClass = 'rank-item rank-item-' + getRankClass(index)
+  if (index < 3) return baseClass
+  const isGray = (index - 3) % 2 === 0
+  return baseClass + (isGray ? ' rank-item-gray' : '')
+}
 </script>
 
 <style lang="less" scoped>
 .rank-list-container {
   width: 100%;
-  height: 100%;
+  height: 300px; /* 固定高度 */
   background: #fff;
   border-radius: 8px;
   border: 1px solid #e5e7eb;
-  // padding: 16px;
   display: flex;
   flex-direction: column;
+  overflow: hidden; /* 防止容器溢出 */
 }
 
 .rank-list-header {
@@ -80,7 +87,8 @@ const getProgressWidth = (value, max) => {
   align-items: center;
   padding: 8px;
   border-bottom: 1px solid #e5e7eb;
-  margin-bottom: 8px;
+ 
+  flex-shrink: 0; /* 防止头部被压缩 */
 }
 
 .header-label {
@@ -107,15 +115,40 @@ const getProgressWidth = (value, max) => {
 
 .rank-list-body {
   flex: 1;
-  overflow-y: auto;
+  overflow-y: auto; /* 启用垂直滚动 */
+
+  
+  /* 自定义滚动条样式 */
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+  
+  &::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 3px;
+  }
+  
+  &::-webkit-scrollbar-thumb {
+    background: #c1c1c1;
+    border-radius: 3px;
+  }
+  
+  &::-webkit-scrollbar-thumb:hover {
+    background: #a8a8a8;
+  }
 }
 
 .rank-item {
   display: flex;
   align-items: center;
   padding: 10px;
+  border-radius: 4px;
+  
+  min-height: 40px; /* 最小高度确保项目可见 */
+}
 
-  // transition: background-color 0.2s;
+.rank-item:last-child {
+  margin-bottom: 0;
 }
 
 .rank-item-first {
@@ -134,12 +167,18 @@ const getProgressWidth = (value, max) => {
   background-color: #f9fafb;
 }
 
+.rank-item-gray {
+  background-color: #f3f4f6;
+}
+
 .rank-number {
-  //width: 80px;
   font-weight: bold;
   font-size: 15px;
   padding: 4px 8px;
   border-radius: 4px;
+  margin-right: 8px;
+  min-width: 60px;
+  text-align: center;
 }
 
 .rank-number-first {
@@ -175,6 +214,9 @@ const getProgressWidth = (value, max) => {
   color: #1f2937;
   font-weight: 500;
   min-width: 80px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .rank-bar {
@@ -213,5 +255,6 @@ const getProgressWidth = (value, max) => {
   font-size: 15px;
   font-weight: 600;
   color: #1f2937;
+  margin-left: 8px;
 }
 </style>

src/views/blockingData/blockingDataScreen/index.vue

@@ -38,7 +38,7 @@
           <span class="filter-label">漏检物品：</span>
           <el-tree-select v-model="filterParams.missCheckItem" :data="missedItemOptions"
             :props="{ value: 'id', label: 'name', children: 'children', disabled: data => data.children && data.children.length > 0 }"
-            value-key="id" placeholder="请选择漏检物品" check-strictly style="width: 200px" />
+            value-key="id" placeholder="请选择漏检物品" check-strictly style="width: 200px" clearable @change="missCheckItemChange"/>
         </div>
 
         <div class="filter-item">
@@ -47,17 +47,17 @@
             <el-option v-for="item in brigadeOptions" :key="item.value" :label="item.label" :value="item.value" />
           </el-select>
         </div>
-        <div class="filter-actions">
+        <!-- <div class="filter-actions">
           <el-button type="primary" @click="handleFilter">查询</el-button>
           <el-button @click="resetFilter">重置</el-button>
-        </div>
+        </div> -->
       </div>
 
 
     </div>
 
     <div class="screen-content">
-      <div v-if="filterParams.brigadeId" class="grid-layout">
+      <div v-if="filterParams.brigadeId=='all'" class="grid-layout">
         <div class="grid-item">
           <module-one :filter-params="filterParams" />
         </div>
@@ -131,9 +131,23 @@ function getMissedItemOptions() {
   })
 }
 const terminalChange = (value) => {
+  if(!value){
+    filterParams.terminal = ''
+    filterParams.terminalId = ''
+    return;
+  }
+
   filterParams.terminal = terminalOptions.value.find(item => item.value === value).label
 }
 
+const missCheckItemChange = (value) => { 
+  if(!value){
+    filterParams.missCheckItem = ''
+    return;
+
+  }
+}
+
 // 树形数据处理函数
 function handleTree(data, id, parentId) {
   const result = []