feat: 运行数据图表联调

src/api/portraitManagement/portraitManagement.js

@@ -43,4 +43,45 @@ export function getDeptPositionDistribution(data) {
 // 维度得分一览
 export function getDimensionScoreOverview(data) {
     return request({ url: '/score/dept-portrait/group-portrait', method: 'post', data })
+}
+
+// 1.查询每日通道过检率
+export function countLanePeakThroughput(data) {
+    return request({ url: '/ledger/operationLanePeakThroughput/countLanePeakThroughput', method: 'post', data })
+}
+// 2.查询当天开航每小时区域过检人数
+export function countStationHourlyThroughput(data) {
+    return request({ url: '/ledger/operationStationHourlyThroughput/countStationHourlyThroughput', method: 'get', data })
+}
+// 3.查获信息展示
+export function countSeizureInfoItem(data) {
+    return request({ url: '/ledger/seizureStats/countSeizureInfoItem', method: 'post', data })
+}
+// 4.查获物品分布
+export function countSeizeSubjectCategoryQuantity(data) {
+    return request({ url: '/ledger/seizureStats/countSeizeSubjectCategoryQuantity', method: 'post', data })
+}
+// 5.近30天查获数量（总表）
+export function countSeizureTotalQuantity(data) {
+    return request({ url: '/ledger/seizureStats/countSeizureTotalQuantity', method: 'post', data })
+}
+// 6.近30天查获数量（员工/小组/班组/部门）
+export function countSeizureSingleQuantity(data) {
+    return request({ url: '/ledger/seizureStats/countSeizureSingleQuantity', method: 'post', data })
+}
+// 7.查获工作区域分布
+export function countSeizeAreaQuantity(data) {
+    return request({ url: '/ledger/seizureStats/countSeizeAreaQuantity', method: 'post', data })
+}
+// 8.不安全事件物品分布
+export function countSeizureStatsItem(data) {
+    return request({ url: '/ledger/unsafeEvent/countSeizureStatsItem', method: 'post', data })
+}
+// 9.不安全事件类型分布
+export function countSeizureStatsType(data) {
+    return request({ url: '/ledger/unsafeEvent/countSeizureStatsType', method: 'post', data })
+}
+// 10.不安全事件岗位分布
+export function countSeizureStatsPost(data) {
+    return request({ url: '/ledger/unsafeEvent/countSeizureStatsPost', method: 'post', data })
 }

src/views/portraitManagement/components/ChannelCheckChart.vue

@@ -16,7 +16,6 @@ const props = defineProps({
   }
 })
 const setChartsOptionsBar = computed(() => {
-  const hours = Array.from({length: 24}, (_, i) => `${i.toString().padStart(2, '0')}:00`)
   return {
     grid: {
       top: 40,
@@ -26,7 +25,7 @@ const setChartsOptionsBar = computed(() => {
     },
     xAxis: {
       type: 'category',
-      data: hours,
+      data: props.chartsData.map(item => item.recordDate),
       axisLabel: { color: '#fff', fontSize: 14 },
       axisLine: { lineStyle: { color: '#344067' } }
     },
@@ -44,7 +43,7 @@ const setChartsOptionsBar = computed(() => {
         type: 'value',
         name: '数量',
         position: 'right',
-        max: Math.max(...props.chartsData.map(item => item.num)) + 100,
+        max: 'dataMax',
         axisLabel: { color: '#fff', fontSize: 14 },
         axisLine: {  lineStyle: { color: '#fff' } },
         splitLine: { show: false }
@@ -52,21 +51,10 @@ const setChartsOptionsBar = computed(() => {
     ],
     series: [
       {
-        name: '过检人数',
+        name: '本通道过检人数',
         type: 'bar',
         yAxisIndex: 1,
-        data: props.chartsData.map(item => item.num),
-        itemStyle: {
-          color: '#6DA6FE',
-          borderRadius: [2, 2, 0, 0],
-        },
-        barWidth: '20%'
-      },
-      {
-        name: '过检人数1',
-        type: 'bar',
-        yAxisIndex: 1,
-        data: props.chartsData.map(item => item.num1),
+        data: props.chartsData.map(item => item.totalRecord),
         itemStyle: {
           color: '#9963FB',
           borderRadius: [2, 2, 0, 0],
@@ -74,10 +62,10 @@ const setChartsOptionsBar = computed(() => {
         barWidth: '20%'
       },
       {
-        name: '过检人数2',
+        name: '过检总人数',
         type: 'bar',
         yAxisIndex: 1,
-        data: props.chartsData.map(item => item.num2),
+        data: props.chartsData.map(item => item.totalThroughput),
         itemStyle: {
           color: '#FCE661',
           borderRadius: [2, 2, 0, 0],
@@ -88,7 +76,7 @@ const setChartsOptionsBar = computed(() => {
         name: '过检率',
         type: 'line',
         yAxisIndex: 0,
-        data: props.chartsData.map(item => item.rate),
+        data: props.chartsData.map(item => item.throughputRate),
         smooth: true,
         itemStyle: { color: '#F801FA' },
         lineStyle: { color: '#F801FA' }

src/views/portraitManagement/components/EventItems.vue

@@ -31,18 +31,20 @@ const setChartsOptionsBar = computed(() => {
       textStyle: { color: '#fff' }
     },
     legend: {
-      top: 'center',
+      top: '10%',
       left: '0%',
       orient: 'vertical',
       textStyle: { color: '#fff' }
     },
     series: [{
       type: 'pie',
+      avoidLabelOverlap: true, 
       radius: ['40%', '60%'],
+      center: ['50%', '50%'], 
       data: props.chartsData.map(item => {
         return {
-          value: item.num,
-          name: item.name
+          value: item.itemNum,
+          name: item.itemName
         }
       }),
       label: { show: true, color: '#fff', fontSize: 16, lineHeight: 20, formatter: '{b}\n{c}'  },

src/views/portraitManagement/components/EventType.vue

@@ -31,7 +31,7 @@ const setChartsOptionsBar = computed(() => {
       textStyle: { color: '#fff' }
     },
     legend: {
-      top: 'center',
+      top: '10%',
       left: '0%',
       orient: 'vertical',
       textStyle: { color: '#fff' }
@@ -39,10 +39,11 @@ const setChartsOptionsBar = computed(() => {
     series: [{
       type: 'pie',
       radius: ['40%', '60%'],
+      center: ['50%', '50%'], 
       data: props.chartsData.map(item => {
         return {
-          value: item.num,
-          name: item.name
+          value: item.eventTypeNum,
+          name: item.eventTypeName
         }
       }),
       label: { show: true, color: '#fff', fontSize: 16, lineHeight: 20, formatter: '{b}\n{c}'  },

src/views/portraitManagement/components/EventWorkArea.vue

@@ -16,7 +16,7 @@ const props = defineProps({
   }
 })
 const setChartsOptionsBar = computed(() => {
-  const labels = props.chartsData.map(item => item.name)
+  const labels = props.chartsData.map(item => item.positionName)
   return {
     grid: {
       top: 50,
@@ -49,7 +49,7 @@ const setChartsOptionsBar = computed(() => {
       {
         name: '查获数量',
         type: 'bar',
-        data: props.chartsData.map(item => item.num),
+        data: props.chartsData.map(item => item.positionNum),
         itemStyle: {
           borderRadius: [5, 5, 0, 0],
           color: '#6DA6FE',

src/views/portraitManagement/components/SearchBar.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="ep-topbar" @click="visible = false">
+    <div class="ep-topbar-content">
     <div class="time-btns">
       <div :class="currentTime === 'week' ? 'primary' : 'default'" @click="selectTime('week')">近一周</div>
       <div :class="currentTime === 'month' ? 'primary' : 'default'" @click="selectTime('month')">近一月</div>
@@ -38,6 +39,7 @@
         </div>
       </div>
     </el-popover>
+    </div>
   </div>
 </template>
 
@@ -136,6 +138,7 @@ const searchHandler = (query = {}) => {
     }
   } else {
     emit('search', queryParams)
+    visible.value = false
   }
 }
 
@@ -212,14 +215,22 @@ defineExpose({
 
 <style lang="scss" scoped>
 .ep-topbar {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
+
   height: 60px;
-  padding: 0 15px;
-  box-sizing: border-box;
-  gap: 12px;
-  flex-wrap: wrap;
+  position: relative;
+
+  .ep-topbar-content {
+    position: absolute;
+    padding: 0 15px;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    box-sizing: border-box;
+    gap: 12px;
+    flex-wrap: wrap;
+    z-index: 1000;
+  }
 
   .time-btns {
     display: flex;

src/views/portraitManagement/components/SeizedInfo.vue

@@ -4,7 +4,7 @@
       <div class="svgIcon">
         <Svg></Svg>
         <div class="svgContent">
-          <div class="value">1658</div>
+          <div class="value">{{ chartsData.totalSeizeNum }}</div>
           <div class="tips">
             <span>查获总数</span>
             <span>(所有人员)</span>
@@ -27,7 +27,7 @@ const bar = ref(null)
 const props = defineProps({
   chartsData: {
     type: Object,
-    default: () => ([])
+    default: () => ({ totalSeizeNum: 0, itemList: [] })
   }
 })
 
@@ -74,17 +74,16 @@ const colors = [
 ]
 
 const setChartsOptionsBar = computed(() => {
-  const hours = ['等级1', '等级2', '等级3']
   return {
     grid: {
-      top: 30,
+      top: 20,
       bottom: 40,
-      left: 60,
-      right: 30
+      left: 35,
+      right: 15
     },
     xAxis: {
       type: 'category',
-      data: hours,
+      data: props.chartsData.itemList.map(item => item.name),
       axisLabel: { color: '#fff', fontSize: 14 },
       axisLine: { lineStyle: { color: '#344067' } }
     },
@@ -92,24 +91,23 @@ const setChartsOptionsBar = computed(() => {
       {
         type: 'value',
         position: 'left',
-        max: Math.max(...props.chartsData.map(item => item.num)) + 100,
         axisLabel: { color: '#fff', fontSize: 14 },
         axisLine: {  lineStyle: { color: '#fff' } },
-        splitLine: { show: false }
+        splitLine: { lineStyle: { color: '#344067' }  }
       }
     ],
     series: [
       {
-        name: '人数',
+        name: '查获数',
         type: 'bar',
-        data: props.chartsData.map(item => item.num),
+        data: props.chartsData.itemList.map(item => item.seizeNum),
         itemStyle: {
           color: (params) => {
             return colors[params.dataIndex % colors.length]
           },
           borderRadius: [5, 5, 0, 0],
         },
-        barWidth: '40px'
+        barWidth: '50%'
       },
     ],
     tooltip: {
@@ -129,7 +127,7 @@ useECharts(bar, setChartsOptionsBar);
   display: flex;
   width: 100%;
   height: 100%;
-  column-gap: 30px;
+  column-gap: 20px;
   .svgIcon {
     width: 280px;
     box-sizing: border-box;

src/views/portraitManagement/components/SeizedItems.vue

@@ -41,8 +41,8 @@ const setChartsOptionsBar = computed(() => {
       radius: ['40%', '70%'],
       data: props.chartsData.map(item => {
         return {
-          value: item.num,
-          name: item.name
+          value: item.itemNum,
+          name: item.itemName
         }
       }),
       label: { show: true, color: '#fff', fontSize: 16, lineHeight: 20, formatter: '{b}\n{c}'  },

src/views/portraitManagement/components/SeizedNum.vue

@@ -5,115 +5,99 @@
 </template>
 
 <script setup>
-import { computed } from 'vue';
-import Card from './card.vue';
-import { useECharts } from '@/hooks/useEcharts.js';
-const bar = ref(null)
-const props = defineProps({
-  chartsData: {
-    type: Object,
-    default: () => ([])
-  }
-})
-const setChartsOptionsBar = computed(() => {
-  return {
-    grid: {
-      top: 40,
-      bottom: 30,
-      left: 60,
-      right: 20
-    },
-    xAxis: {
-      type: 'category',
-      axisLabel: { show: false },
-      axisLine: { show: false },
-      boundaryGap: false
-    },
-    yAxis: [
-      {
-        type: 'value',
-        position: 'left',
-        axisLabel: { color: '#fff', fontSize: 14 },
-        axisLine: {  lineStyle: { color: '#fff' } },
-        splitLine: { lineStyle: { color: '#344067' } }
-      },
-    ],
-    series: [
-      {
-        name: '数量1',
-        type: 'line',
-        data: props.chartsData.map(item => item.num),
-        smooth: true,
-        itemStyle: { color: '#71B138' },
-        lineStyle: { color: '#71B138' },
-        areaStyle: { color: {
+  import { computed } from 'vue';
+  import Card from './card.vue';
+  import { useECharts } from '@/hooks/useEcharts.js';
+  const bar = ref(null)
+  const props = defineProps({
+    chartsData: {
+      type: Object,
+      default: () => ([])
+    }
+  })
+  const countryColors = ['#71B138', '#F801FA', '#6DA6FE', '#95E530', '#9963FB', '#FCE661', '#22C2CC', '#F76723']
+  const createItemConfig = (index) => {
+    const curColor = countryColors[index % countryColors.length] 
+    return {
+      type: 'line',
+      smooth: true,
+      itemStyle: { color: curColor },
+      lineStyle: { color: curColor },
+      areaStyle: {
+        color: {
           type: 'linear',
           x: 0,
           y: 0,
           x2: 0,
           y2: 1,
           colorStops: [{
-            offset: 0, color: '#71B138'
+            offset: 0, color: curColor
           }, {
-            offset: 1, color: '#71B13800'
+            offset: 1, color: curColor + '00'
           }],
           global: false
-        }}
+        }
+      }
+    }
+  }
+  const setChartsOptionsBar = computed(() => {
+    const group = props.chartsData.reduce((cur,acc) => {
+      let curItem = cur.find(item => item.groupName === acc.groupName)
+      if (curItem) {
+        curItem.seizeNums.push(acc.seizeQuantity)
+        curItem.recordDates.push(acc.recordDate)
+      } else {
+        curItem = {
+          groupName: acc.groupName,
+          seizeNums: [acc.seizeQuantity],
+          recordDates: [acc.recordDate]
+        }
+        cur.push(curItem)
+      }
+      return cur
+    }, [])
+    console.log(group);
+    
+    return {
+      grid: {
+        top: 40,
+        bottom: 30,
+        left: 60,
+        right: 20
       },
-      {
-        name: '数量2',
-        type: 'line',
-        data: props.chartsData.map(item => item.num1),
-        smooth: true,
-        itemStyle: { color: '#F801FA' },
-        lineStyle: { color: '#F801FA' },
-        areaStyle: { color: {
-          type: 'linear',
-          x: 0,
-          y: 0,
-          x2: 0,
-          y2: 1,
-          colorStops: [{
-            offset: 0, color: '#F801FA'
-          }, {
-            offset: 1, color: '#F801FA00'
-          }],
-          global: false
-        }}
+      xAxis: {
+        type: 'category',
+        axisLabel: { show: false },
+        axisLine: { show: false },
+        boundaryGap: false,
+        data: group.length ? group[0].recordDates : []
       },
-      {
-        name: '数量3',
-        type: 'line',
-        data: props.chartsData.map(item => item.num2),
-        smooth: true,
-        itemStyle: { color: '#6DA6FE' },
-        lineStyle: { color: '#6DA6FE' },
-        areaStyle: { color: {
-          type: 'linear',
-          x: 0,
-          y: 0,
-          x2: 0,
-          y2: 1,
-          colorStops: [{
-            offset: 0, color: '#6DA6FE'
-          }, {
-            offset: 1, color: '#6DA6FE00'
-          }],
-          global: false
-        }}
+      yAxis: [
+        {
+          type: 'value',
+          position: 'left',
+          axisLabel: { color: '#fff', fontSize: 14 },
+          axisLine: { lineStyle: { color: '#fff' } },
+          splitLine: { lineStyle: { color: '#344067' } }
+        },
+      ],
+      series: group.map((item, index) => {
+        return {
+          name: item.groupName,
+          data: item.seizeNums,
+          ...createItemConfig(index)
+        }
+      }),
+      tooltip: {
+        trigger: 'axis',
+        backgroundColor: 'rgba(13,80,122,1)',
+        borderColor: '#70CFE7',
+        textStyle: { color: '#fff' }
       }
-    ],
-    tooltip: {
-      trigger: 'axis',
-      backgroundColor: 'rgba(13,80,122,1)',
-      borderColor: '#70CFE7',
-      textStyle: { color: '#fff' }
     }
-  }
-})
-
-useECharts(bar, setChartsOptionsBar);
+  })
 
+  useECharts(bar, setChartsOptionsBar);
 </script>
 
 <style lang="scss" scoped></style>

src/views/portraitManagement/components/SeizedNumAll.vue

@@ -15,8 +15,9 @@ const props = defineProps({
     default: () => ([])
   }
 })
+
+
 const setChartsOptionsBar = computed(() => {
-  const hours = Array.from({length: 24}, (_, i) => `${i.toString().padStart(2, '0')}:00`)
   return {
     grid: {
       top: 40,
@@ -26,6 +27,7 @@ const setChartsOptionsBar = computed(() => {
     },
     xAxis: {
       type: 'category',
+      data: props.chartsData.map(item => item.recordDate ),
       axisLabel: { show: false },
       axisLine: { show: false },
       boundaryGap: false
@@ -43,7 +45,7 @@ const setChartsOptionsBar = computed(() => {
       {
         name: '查获数',
         type: 'line',
-        data: props.chartsData.map(item => item.num),
+        data: props.chartsData.map(item => item.seizeQuantity),
         smooth: true,
         itemStyle: { color: '#71B138' },
         lineStyle: { color: '#71B138' }

src/views/portraitManagement/components/SeizedWorkArea.vue

@@ -16,7 +16,7 @@ const props = defineProps({
   }
 })
 const setChartsOptionsBar = computed(() => {
-  const labels = props.chartsData.map(item => item.name)
+  const labels = props.chartsData.map(item => item.workArea)
   return {
     grid: {
       top: 50,
@@ -49,7 +49,7 @@ const setChartsOptionsBar = computed(() => {
       {
         name: '查获数量',
         type: 'bar',
-        data: props.chartsData.map(item => item.num),
+        data: props.chartsData.map(item => item.areaSeizeNum),
         itemStyle: {
           borderRadius: [5, 5, 0, 0],
           color: '#95E530',

src/views/portraitManagement/components/TestArea.vue

@@ -49,7 +49,7 @@ const setChartsOptionsBar = computed(() => {
       {
         name: '查获数量',
         type: 'bar',
-        data: props.chartsData.map(item => item.num),
+        data: props.chartsData.map(item => item.total),
         itemStyle: {
           borderRadius: [5, 5, 0, 0],
           color: '#9963FB',

src/views/portraitManagement/components/TestItems.vue

@@ -31,7 +31,7 @@ const setChartsOptionsBar = computed(() => {
       textStyle: { color: '#fff' }
     },
     legend: {
-      top: 'center',
+      top: '10%',
       left: '0%',
       orient: 'vertical',
       textStyle: { color: '#fff' }
@@ -41,7 +41,7 @@ const setChartsOptionsBar = computed(() => {
       radius: ['0%', '60%'],
       data: props.chartsData.map(item => {
         return {
-          value: item.num,
+          value: item.total,
           name: item.name
         }
       }),

src/views/portraitManagement/components/TestResult.vue

@@ -31,7 +31,7 @@ const setChartsOptionsBar = computed(() => {
       textStyle: { color: '#fff' }
     },
     legend: {
-      top: 'center',
+      top: '10%',
       left: '0%',
       orient: 'vertical',
       textStyle: { color: '#fff' }
@@ -41,7 +41,7 @@ const setChartsOptionsBar = computed(() => {
       radius: ['0%', '60%'],
       data: props.chartsData.map(item => {
         return {
-          value: item.num,
+          value: item.total,
           name: item.name
         }
       }),

src/views/portraitManagement/deptProfile/component/runData.vue

@@ -1,47 +1,47 @@
 <template>
   <div class="operation-data">
     <div class="row">
-      <ChannelCheckChart :chartsData="chartsData" />
+      <ChannelCheckChart :chartsData="channelCheckData" />
     </div>
     <div class="row">
       <div class="col">
-        <SeizedInfo :chartsData="chartsData"/>
+        <SeizedInfo :chartsData="countSeizureInfoItemData"/>
       </div>
       <div class="col">
-        <SeizedItems :chartsData="chartsData" />
+        <SeizedItems :chartsData="countSeizeSubjectCategoryQuantityData" />
       </div>
     </div>
     <div class="row">
       <div class="col">
-        <SeizedNumAll :chartsData="chartsData"/>
+        <SeizedNumAll :chartsData="countSeizureTotalQuantityData"/>
       </div>
       <div class="col">
-        <SeizedNum :chartsData="chartsData" />
+        <SeizedNum :chartsData="countSeizureSingleQuantityData" />
       </div>
     </div>
     <div class="row">
-      <SeizedWorkArea :chartsData="chartsData" />
+      <SeizedWorkArea :chartsData="countSeizeAreaQuantityData" />
     </div>
     <div class="row">
       <div class="col">
-        <EventItems :chartsData="chartsData"  />
+        <EventItems :chartsData="countSeizureStatsItemData"  />
       </div>
       <div class="col">
-        <EventType :chartsData="chartsData"  />
+        <EventType :chartsData="countSeizureStatsTypeData"  />
       </div>
       <div class="col">
-        <EventWorkArea :chartsData="chartsData"  />
+        <EventWorkArea :chartsData="countSeizureStatsPostData"  />
       </div>
     </div>
     <div class="row">
       <div class="col">
-        <TestItems :chartsData="chartsData"  />
+        <TestItems :chartsData="securityTestItemClassificationData"  />
       </div>
       <div class="col">
-        <TestResult :chartsData="chartsData"  />
+        <TestResult :chartsData="securityTestPassingStatusData"  />
       </div>
       <div class="col">
-        <TestArea :chartsData="chartsData"  />
+        <TestArea :chartsData="securityTestRegionData"  />
       </div>
     </div>
     <div class="row">
@@ -71,7 +71,23 @@ import TestResult from '../../components/TestResult.vue';
 import TestArea from '../../components/TestArea.vue';
 import SupervisionDistribution from '../../components/SupervisionDistribution.vue';
 import InterceptionDistribution from '../../components/InterceptionDistribution.vue';
-import { realtimeInterceptionItem, supervisionProblemPosition } from '@/api/portraitManagement/portraitManagement';
+import { 
+  countLanePeakThroughput,
+  countStationHourlyThroughput,
+  countSeizureInfoItem,
+  countSeizeSubjectCategoryQuantity,
+  countSeizureTotalQuantity,
+  countSeizureSingleQuantity,
+  countSeizeAreaQuantity,
+  countSeizureStatsItem,
+  countSeizureStatsType,
+  countSeizureStatsPost,
+  securityTestItemClassification,
+  securityTestPassingStatus,
+  securityTestRegion,
+  realtimeInterceptionItem,
+  supervisionProblemPosition,
+} from '@/api/portraitManagement/portraitManagement';
 
 const props = defineProps({
   queryParams: {
@@ -80,57 +96,116 @@ const props = defineProps({
   }
 })
 
-const chartsData = ref([
-  {
-    num: 370,
-    num1: 330,
-    num2: 120,
-    num3: 470,
-    num4: 570,
-    rate: 30,
-    name: '打火机'
-  },
-  {
-    num: 330,
-    num1: 430,
-    num2: 420,
-    num3: 430,
-    num4: 150,
-    rate: 60,
-    name: '火柴'
-  },
-  {
-    num: 410,
-    num1: 310,
-    num2: 220,
-    num3: 370,
-    num4: 510,
-    rate: 35,
-    name: '刀具'
-  },
-  {
-    num: 570,
-    num1: 440,
-    num2: 420,
-    num3: 410,
-    num4: 470,
-    rate: 80,
-    name: '充电宝'
-  },
-  {
-    num: 340,
-    num1: 330,
-    num2: 620,
-    num3: 370,
-    num4: 170,
-    rate: 60,
-    name: '烟火'
-  },
-])
+const channelCheckData = ref([])
+const invokerCountLanePeakThroughput = () => {
+  countLanePeakThroughput(props.queryParams).then(res => {
+    if (res.code === 200 && res.data) {
+      channelCheckData.value = res.data || []
+    }
+  })
+}
 
-const supervisionData = ref([])
-const interceptionData = ref([])
+const countSeizureInfoItemData = ref({ totalSeizeNum: 0, itemList: [] })
+const invokerCountSeizureInfoItem = () => {
+  countSeizureInfoItem(props.queryParams).then(res => {
+    if (res.code === 200 && res.data) {
+      countSeizureInfoItemData.value = res.data || { totalSeizeNum: 0, itemList: [] }
+    }
+  })
+}
+
+const countSeizeSubjectCategoryQuantityData = ref([])
+const invokerCountSeizeSubjectCategoryQuantity = () => {
+  countSeizeSubjectCategoryQuantity(props.queryParams).then(res => {
+    if (res.code === 200 && res.data) {
+      countSeizureInfoItemData.value = res.data || []
+    }
+  })
+}
+
+const countSeizureTotalQuantityData = ref([])
+const invokerCountSeizureTotalQuantity = () => {
+  countSeizureTotalQuantity(props.queryParams).then(res => {
+    if (res.code === 200 && res.data) {
+      countSeizureTotalQuantityData.value = res.data || []
+      console.log(countSeizureTotalQuantityData.value);
+      
+    }
+  })
+}
+
+const countSeizureSingleQuantityData = ref([])
+const invokerCountSeizureSingleQuantity = () => {
+  countSeizureSingleQuantity(props.queryParams).then(res => {
+    if (res.code === 200 && res.data) {
+      countSeizureSingleQuantityData.value = res.data || []
+    }
+  })
+}
 
+const countSeizeAreaQuantityData = ref([])
+const invokerCountSeizeAreaQuantity = () => {
+  countSeizeAreaQuantity(props.queryParams).then(res => {
+    if (res.code === 200 && res.data) {
+      countSeizeAreaQuantityData.value = res.data || []
+    }
+  })
+}
+
+const countSeizureStatsItemData = ref([])
+const invokerCountSeizureStatsItem = () => {
+  countSeizureStatsItem(props.queryParams).then(res => {
+    if (res.code === 200 && res.data) {
+      countSeizureStatsItemData.value = res.data || []
+    }
+  })
+}
+const countSeizureStatsTypeData = ref([])
+const invokerCountSeizureStatsType = () => {
+  countSeizureStatsType(props.queryParams).then(res => {
+    if (res.code === 200 && res.data) {
+      countSeizureStatsTypeData.value = res.data || []
+    }
+  })
+}
+const countSeizureStatsPostData = ref([])
+const invokerCountSeizureStatsPost = () => {
+  countSeizureStatsPost(props.queryParams).then(res => {
+    if (res.code === 200 && res.data) {
+      countSeizureStatsPostData.value = res.data || []
+    }
+  })
+}
+
+const securityTestItemClassificationData = ref([])
+const invokerSecurityTestItemClassification = () => {
+  securityTestItemClassification(props.queryParams).then(res => {
+    if (res.code === 200 && res.data) {
+      securityTestItemClassificationData.value = res.data || []
+    }
+  })
+}
+
+const securityTestPassingStatusData = ref([])
+const invokerSecurityTestPassingStatus = () => {
+    securityTestPassingStatus(props.queryParams).then(res => {
+    if (res.code === 200 && res.data) {
+      securityTestPassingStatusData.value = res.data || []
+    }
+  })
+}
+const securityTestRegionData = ref([])
+const invokerSecurityTestRegion = () => {
+    securityTestRegion(props.queryParams).then(res => {
+    if (res.code === 200 && res.data) {
+      securityTestRegionData.value = res.data || []
+    }
+  })
+}
+
+
+
+const supervisionData = ref([])
 const fetchSupervisionData = async () => {
   try {
     const res = await supervisionProblemPosition(props.queryParams)
@@ -145,6 +220,7 @@ const fetchSupervisionData = async () => {
   }
 }
 
+const interceptionData = ref([])
 const fetchInterceptionData = async () => {
   try {
     const res = await realtimeInterceptionItem(props.queryParams)
@@ -160,10 +236,22 @@ const fetchInterceptionData = async () => {
 }
 
 const fetchData = () => {
+
+  invokerCountLanePeakThroughput()
+  invokerCountSeizureInfoItem()
+  invokerCountSeizeSubjectCategoryQuantity()
+  invokerCountSeizureTotalQuantity()
+  invokerCountSeizureSingleQuantity()
+  invokerCountSeizeAreaQuantity()
+  invokerCountSeizureStatsItem()
+  invokerCountSeizureStatsType()
+  invokerCountSeizureStatsPost()
+  invokerSecurityTestItemClassification()
+  invokerSecurityTestPassingStatus()
+  invokerSecurityTestRegion()
   fetchSupervisionData()
   fetchInterceptionData()
 }
-
 watch(() => props.queryParams, () => {
   fetchData()
 }, { deep: true, immediate: true })
@@ -178,10 +266,13 @@ watch(() => props.queryParams, () => {
     display: flex;
     column-gap: 15px;
     height: 360px;
+    width: 100%;
+    overflow: hidden;
     margin-bottom: 15px;
     .col {
       flex: 1;
       height: 100%;
+      min-width: 0px;
       :deep(.info-card) {
         height: 100%;
       }

src/views/portraitManagement/groupProfile/component/runData.vue

@@ -1,47 +1,47 @@
 <template>
   <div class="operation-data">
     <div class="row">
-      <ChannelCheckChart :chartsData="chartsData" />
+      <ChannelCheckChart :chartsData="channelCheckData" />
     </div>
     <div class="row">
       <div class="col">
-        <SeizedInfo :chartsData="chartsData"/>
+        <SeizedInfo :chartsData="countSeizureInfoItemData"/>
       </div>
       <div class="col">
-        <SeizedItems :chartsData="chartsData" />
+        <SeizedItems :chartsData="countSeizeSubjectCategoryQuantityData" />
       </div>
     </div>
     <div class="row">
       <div class="col">
-        <SeizedNumAll :chartsData="chartsData"/>
+        <SeizedNumAll :chartsData="countSeizureTotalQuantityData"/>
       </div>
       <div class="col">
-        <SeizedNum :chartsData="chartsData" />
+        <SeizedNum :chartsData="countSeizureSingleQuantityData" />
       </div>
     </div>
     <div class="row">
-      <SeizedWorkArea :chartsData="chartsData" />
+      <SeizedWorkArea :chartsData="countSeizeAreaQuantityData" />
     </div>
     <div class="row">
       <div class="col">
-        <EventItems :chartsData="chartsData"  />
+        <EventItems :chartsData="countSeizureStatsItemData"  />
       </div>
       <div class="col">
-        <EventType :chartsData="chartsData"  />
+        <EventType :chartsData="countSeizureStatsTypeData"  />
       </div>
       <div class="col">
-        <EventWorkArea :chartsData="chartsData"  />
+        <EventWorkArea :chartsData="countSeizureStatsPostData"  />
       </div>
     </div>
     <div class="row">
       <div class="col">
-        <TestItems :chartsData="chartsData"  />
+        <TestItems :chartsData="securityTestItemClassificationData"  />
       </div>
       <div class="col">
-        <TestResult :chartsData="chartsData"  />
+        <TestResult :chartsData="securityTestPassingStatusData"  />
       </div>
       <div class="col">
-        <TestArea :chartsData="chartsData"  />
+        <TestArea :chartsData="securityTestRegionData"  />
       </div>
     </div>
     <div class="row">
@@ -71,7 +71,23 @@ import TestResult from '../../components/TestResult.vue';
 import TestArea from '../../components/TestArea.vue';
 import SupervisionDistribution from '../../components/SupervisionDistribution.vue';
 import InterceptionDistribution from '../../components/InterceptionDistribution.vue';
-import { realtimeInterceptionItem, supervisionProblemPosition } from '@/api/portraitManagement/portraitManagement';
+import { 
+  countLanePeakThroughput,
+  countStationHourlyThroughput,
+  countSeizureInfoItem,
+  countSeizeSubjectCategoryQuantity,
+  countSeizureTotalQuantity,
+  countSeizureSingleQuantity,
+  countSeizeAreaQuantity,
+  countSeizureStatsItem,
+  countSeizureStatsType,
+  countSeizureStatsPost,
+  securityTestItemClassification,
+  securityTestPassingStatus,
+  securityTestRegion,
+  realtimeInterceptionItem,
+  supervisionProblemPosition,
+} from '@/api/portraitManagement/portraitManagement';
 
 const props = defineProps({
   queryParams: {
@@ -80,57 +96,117 @@ const props = defineProps({
   }
 })
 
-const chartsData = ref([
-  {
-    num: 370,
-    num1: 330,
-    num2: 120,
-    num3: 470,
-    num4: 570,
-    rate: 30,
-    name: '打火机'
-  },
-  {
-    num: 330,
-    num1: 430,
-    num2: 420,
-    num3: 430,
-    num4: 150,
-    rate: 60,
-    name: '火柴'
-  },
-  {
-    num: 410,
-    num1: 310,
-    num2: 220,
-    num3: 370,
-    num4: 510,
-    rate: 35,
-    name: '刀具'
-  },
-  {
-    num: 570,
-    num1: 440,
-    num2: 420,
-    num3: 410,
-    num4: 470,
-    rate: 80,
-    name: '充电宝'
-  },
-  {
-    num: 340,
-    num1: 330,
-    num2: 620,
-    num3: 370,
-    num4: 170,
-    rate: 60,
-    name: '烟火'
-  },
-])
 
-const supervisionData = ref([])
-const interceptionData = ref([])
+const channelCheckData = ref([])
+const invokerCountLanePeakThroughput = () => {
+  countLanePeakThroughput(props.queryParams).then(res => {
+    if (res.code === 200 && res.data) {
+      channelCheckData.value = res.data || []
+    }
+  })
+}
+
+const countSeizureInfoItemData = ref({ totalSeizeNum: 0, itemList: [] })
+const invokerCountSeizureInfoItem = () => {
+  countSeizureInfoItem(props.queryParams).then(res => {
+    if (res.code === 200 && res.data) {
+      countSeizureInfoItemData.value = res.data || { totalSeizeNum: 0, itemList: [] }
+    }
+  })
+}
+
+const countSeizeSubjectCategoryQuantityData = ref([])
+const invokerCountSeizeSubjectCategoryQuantity = () => {
+  countSeizeSubjectCategoryQuantity(props.queryParams).then(res => {
+    if (res.code === 200 && res.data) {
+      countSeizureInfoItemData.value = res.data || []
+    }
+  })
+}
+
+const countSeizureTotalQuantityData = ref([])
+const invokerCountSeizureTotalQuantity = () => {
+  countSeizureTotalQuantity(props.queryParams).then(res => {
+    if (res.code === 200 && res.data) {
+      countSeizureTotalQuantityData.value = res.data || []
+      console.log(countSeizureTotalQuantityData.value);
+      
+    }
+  })
+}
+
+const countSeizureSingleQuantityData = ref([])
+const invokerCountSeizureSingleQuantity = () => {
+  countSeizureSingleQuantity(props.queryParams).then(res => {
+    if (res.code === 200 && res.data) {
+      countSeizureSingleQuantityData.value = res.data || []
+    }
+  })
+}
+
+const countSeizeAreaQuantityData = ref([])
+const invokerCountSeizeAreaQuantity = () => {
+  countSeizeAreaQuantity(props.queryParams).then(res => {
+    if (res.code === 200 && res.data) {
+      countSeizeAreaQuantityData.value = res.data || []
+    }
+  })
+}
+
+const countSeizureStatsItemData = ref([])
+const invokerCountSeizureStatsItem = () => {
+  countSeizureStatsItem(props.queryParams).then(res => {
+    if (res.code === 200 && res.data) {
+      countSeizureStatsItemData.value = res.data || []
+    }
+  })
+}
+const countSeizureStatsTypeData = ref([])
+const invokerCountSeizureStatsType = () => {
+  countSeizureStatsType(props.queryParams).then(res => {
+    if (res.code === 200 && res.data) {
+      countSeizureStatsTypeData.value = res.data || []
+    }
+  })
+}
+const countSeizureStatsPostData = ref([])
+const invokerCountSeizureStatsPost = () => {
+  countSeizureStatsPost(props.queryParams).then(res => {
+    if (res.code === 200 && res.data) {
+      countSeizureStatsPostData.value = res.data || []
+    }
+  })
+}
+
+const securityTestItemClassificationData = ref([])
+const invokerSecurityTestItemClassification = () => {
+  securityTestItemClassification(props.queryParams).then(res => {
+    if (res.code === 200 && res.data) {
+      securityTestItemClassificationData.value = res.data || []
+    }
+  })
+}
 
+const securityTestPassingStatusData = ref([])
+const invokerSecurityTestPassingStatus = () => {
+    securityTestPassingStatus(props.queryParams).then(res => {
+    if (res.code === 200 && res.data) {
+      securityTestPassingStatusData.value = res.data || []
+    }
+  })
+}
+const securityTestRegionData = ref([])
+const invokerSecurityTestRegion = () => {
+    securityTestRegion(props.queryParams).then(res => {
+    if (res.code === 200 && res.data) {
+      securityTestRegionData.value = res.data || []
+    }
+  })
+}
+
+
+
+const supervisionData = ref([])
 const fetchSupervisionData = async () => {
   try {
     const res = await supervisionProblemPosition(props.queryParams)
@@ -145,6 +221,7 @@ const fetchSupervisionData = async () => {
   }
 }
 
+const interceptionData = ref([])
 const fetchInterceptionData = async () => {
   try {
     const res = await realtimeInterceptionItem(props.queryParams)
@@ -160,10 +237,22 @@ const fetchInterceptionData = async () => {
 }
 
 const fetchData = () => {
+
+  invokerCountLanePeakThroughput()
+  invokerCountSeizureInfoItem()
+  invokerCountSeizeSubjectCategoryQuantity()
+  invokerCountSeizureTotalQuantity()
+  invokerCountSeizureSingleQuantity()
+  invokerCountSeizeAreaQuantity()
+  invokerCountSeizureStatsItem()
+  invokerCountSeizureStatsType()
+  invokerCountSeizureStatsPost()
+  invokerSecurityTestItemClassification()
+  invokerSecurityTestPassingStatus()
+  invokerSecurityTestRegion()
   fetchSupervisionData()
   fetchInterceptionData()
 }
-
 watch(() => props.queryParams, () => {
   fetchData()
 }, { deep: true, immediate: true })
@@ -178,10 +267,13 @@ watch(() => props.queryParams, () => {
     display: flex;
     column-gap: 15px;
     height: 360px;
+    width: 100%;
+    overflow: hidden;
     margin-bottom: 15px;
     .col {
       flex: 1;
       height: 100%;
+      min-width: 0px;
       :deep(.info-card) {
         height: 100%;
       }

src/views/portraitManagement/groupProfile/index.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="group-profile-page">
     <Page title="安检人事管理可视化大屏" :tabs="['能力画像', '运行数据']" @tab-change="handleTabChange">
-      <SearchBar v-model:visible="searchVisible" @search="handleSearch"  :deptType="'TEAMS'" />
+      <div style="margin-bottom: 30px;">
+        <SearchBar v-model:visible="searchVisible" @search="handleSearch"  :deptType="'TEAMS'" />
+      </div>
       <PentagonGroup :items="pentagonItems" />
       <Profile v-if="activeTab === 0" :query-params="queryParams" />
       <RunData v-else :query-params="queryParams"/>
@@ -11,7 +13,7 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import Page from '../components/page.vue'
 import SearchBar from '../components/SearchBar.vue'
 import Profile from './component/profile.vue'
@@ -27,7 +29,7 @@ const activeTab = ref(0)
 const searchVisible = ref(false)
 const queryParams = ref({})
 
-const pentagonItems = ref([
+const pentagonItems = computed(() => [
   {
     value: '88',
     label: '综合得分',
@@ -74,7 +76,7 @@ const pentagonItems = ref([
     bgGradientEnd: 'rgba(15,70,250,0.2)'
   },
   {
-    value: '周游波小组',
+    value: groupName.value,
     label: '',
     iconPath: zu02Icon,
     iconStyle: {
@@ -155,9 +157,10 @@ const pentagonItems = ref([
     bgGradientEnd: 'rgba(15,70,250,0.2)'
   }
 ])
-
+const groupName = ref('')
 const handleSearch = (params) => {
-  queryParams.value = params
+  queryParams.value = { startDate: params.beginTime, endDate: params.endTime, groupId: params.groupId}
+  groupName.value = params.groupName
 }
 
 const handleTabChange = (index) => {

src/views/portraitManagement/teamProfile/component/runData.vue

@@ -1,47 +1,47 @@
 <template>
   <div class="operation-data">
     <div class="row">
-      <ChannelCheckChart :chartsData="chartsData" />
+      <ChannelCheckChart :chartsData="channelCheckData" />
     </div>
     <div class="row">
       <div class="col">
-        <SeizedInfo :chartsData="chartsData"/>
+        <SeizedInfo :chartsData="countSeizureInfoItemData"/>
       </div>
       <div class="col">
-        <SeizedItems :chartsData="chartsData" />
+        <SeizedItems :chartsData="countSeizeSubjectCategoryQuantityData" />
       </div>
     </div>
     <div class="row">
       <div class="col">
-        <SeizedNumAll :chartsData="chartsData"/>
+        <SeizedNumAll :chartsData="countSeizureTotalQuantityData"/>
       </div>
       <div class="col">
-        <SeizedNum :chartsData="chartsData" />
+        <SeizedNum :chartsData="countSeizureSingleQuantityData" />
       </div>
     </div>
     <div class="row">
-      <SeizedWorkArea :chartsData="chartsData" />
+      <SeizedWorkArea :chartsData="countSeizeAreaQuantityData" />
     </div>
     <div class="row">
       <div class="col">
-        <EventItems :chartsData="chartsData"  />
+        <EventItems :chartsData="countSeizureStatsItemData"  />
       </div>
       <div class="col">
-        <EventType :chartsData="chartsData"  />
+        <EventType :chartsData="countSeizureStatsTypeData"  />
       </div>
       <div class="col">
-        <EventWorkArea :chartsData="chartsData"  />
+        <EventWorkArea :chartsData="countSeizureStatsPostData"  />
       </div>
     </div>
     <div class="row">
       <div class="col">
-        <TestItems :chartsData="chartsData"  />
+        <TestItems :chartsData="securityTestItemClassificationData"  />
       </div>
       <div class="col">
-        <TestResult :chartsData="chartsData"  />
+        <TestResult :chartsData="securityTestPassingStatusData"  />
       </div>
       <div class="col">
-        <TestArea :chartsData="chartsData"  />
+        <TestArea :chartsData="securityTestRegionData"  />
       </div>
     </div>
     <div class="row">
@@ -71,7 +71,23 @@ import TestResult from '../../components/TestResult.vue';
 import TestArea from '../../components/TestArea.vue';
 import SupervisionDistribution from '../../components/SupervisionDistribution.vue';
 import InterceptionDistribution from '../../components/InterceptionDistribution.vue';
-import { realtimeInterceptionItem, supervisionProblemPosition } from '@/api/portraitManagement/portraitManagement';
+import { 
+  countLanePeakThroughput,
+  countStationHourlyThroughput,
+  countSeizureInfoItem,
+  countSeizeSubjectCategoryQuantity,
+  countSeizureTotalQuantity,
+  countSeizureSingleQuantity,
+  countSeizeAreaQuantity,
+  countSeizureStatsItem,
+  countSeizureStatsType,
+  countSeizureStatsPost,
+  securityTestItemClassification,
+  securityTestPassingStatus,
+  securityTestRegion,
+  realtimeInterceptionItem,
+  supervisionProblemPosition,
+} from '@/api/portraitManagement/portraitManagement';
 
 const props = defineProps({
   queryParams: {
@@ -80,57 +96,117 @@ const props = defineProps({
   }
 })
 
-const chartsData = ref([
-  {
-    num: 370,
-    num1: 330,
-    num2: 120,
-    num3: 470,
-    num4: 570,
-    rate: 30,
-    name: '打火机'
-  },
-  {
-    num: 330,
-    num1: 430,
-    num2: 420,
-    num3: 430,
-    num4: 150,
-    rate: 60,
-    name: '火柴'
-  },
-  {
-    num: 410,
-    num1: 310,
-    num2: 220,
-    num3: 370,
-    num4: 510,
-    rate: 35,
-    name: '刀具'
-  },
-  {
-    num: 570,
-    num1: 440,
-    num2: 420,
-    num3: 410,
-    num4: 470,
-    rate: 80,
-    name: '充电宝'
-  },
-  {
-    num: 340,
-    num1: 330,
-    num2: 620,
-    num3: 370,
-    num4: 170,
-    rate: 60,
-    name: '烟火'
-  },
-])
 
-const supervisionData = ref([])
-const interceptionData = ref([])
+const channelCheckData = ref([])
+const invokerCountLanePeakThroughput = () => {
+  countLanePeakThroughput(props.queryParams).then(res => {
+    if (res.code === 200 && res.data) {
+      channelCheckData.value = res.data || []
+    }
+  })
+}
+
+const countSeizureInfoItemData = ref({ totalSeizeNum: 0, itemList: [] })
+const invokerCountSeizureInfoItem = () => {
+  countSeizureInfoItem(props.queryParams).then(res => {
+    if (res.code === 200 && res.data) {
+      countSeizureInfoItemData.value = res.data || { totalSeizeNum: 0, itemList: [] }
+    }
+  })
+}
+
+const countSeizeSubjectCategoryQuantityData = ref([])
+const invokerCountSeizeSubjectCategoryQuantity = () => {
+  countSeizeSubjectCategoryQuantity(props.queryParams).then(res => {
+    if (res.code === 200 && res.data) {
+      countSeizureInfoItemData.value = res.data || []
+    }
+  })
+}
+
+const countSeizureTotalQuantityData = ref([])
+const invokerCountSeizureTotalQuantity = () => {
+  countSeizureTotalQuantity(props.queryParams).then(res => {
+    if (res.code === 200 && res.data) {
+      countSeizureTotalQuantityData.value = res.data || []
+      console.log(countSeizureTotalQuantityData.value);
+      
+    }
+  })
+}
+
+const countSeizureSingleQuantityData = ref([])
+const invokerCountSeizureSingleQuantity = () => {
+  countSeizureSingleQuantity(props.queryParams).then(res => {
+    if (res.code === 200 && res.data) {
+      countSeizureSingleQuantityData.value = res.data || []
+    }
+  })
+}
+
+const countSeizeAreaQuantityData = ref([])
+const invokerCountSeizeAreaQuantity = () => {
+  countSeizeAreaQuantity(props.queryParams).then(res => {
+    if (res.code === 200 && res.data) {
+      countSeizeAreaQuantityData.value = res.data || []
+    }
+  })
+}
+
+const countSeizureStatsItemData = ref([])
+const invokerCountSeizureStatsItem = () => {
+  countSeizureStatsItem(props.queryParams).then(res => {
+    if (res.code === 200 && res.data) {
+      countSeizureStatsItemData.value = res.data || []
+    }
+  })
+}
+const countSeizureStatsTypeData = ref([])
+const invokerCountSeizureStatsType = () => {
+  countSeizureStatsType(props.queryParams).then(res => {
+    if (res.code === 200 && res.data) {
+      countSeizureStatsTypeData.value = res.data || []
+    }
+  })
+}
+const countSeizureStatsPostData = ref([])
+const invokerCountSeizureStatsPost = () => {
+  countSeizureStatsPost(props.queryParams).then(res => {
+    if (res.code === 200 && res.data) {
+      countSeizureStatsPostData.value = res.data || []
+    }
+  })
+}
+
+const securityTestItemClassificationData = ref([])
+const invokerSecurityTestItemClassification = () => {
+  securityTestItemClassification(props.queryParams).then(res => {
+    if (res.code === 200 && res.data) {
+      securityTestItemClassificationData.value = res.data || []
+    }
+  })
+}
 
+const securityTestPassingStatusData = ref([])
+const invokerSecurityTestPassingStatus = () => {
+    securityTestPassingStatus(props.queryParams).then(res => {
+    if (res.code === 200 && res.data) {
+      securityTestPassingStatusData.value = res.data || []
+    }
+  })
+}
+const securityTestRegionData = ref([])
+const invokerSecurityTestRegion = () => {
+    securityTestRegion(props.queryParams).then(res => {
+    if (res.code === 200 && res.data) {
+      securityTestRegionData.value = res.data || []
+    }
+  })
+}
+
+
+
+const supervisionData = ref([])
 const fetchSupervisionData = async () => {
   try {
     const res = await supervisionProblemPosition(props.queryParams)
@@ -145,6 +221,7 @@ const fetchSupervisionData = async () => {
   }
 }
 
+const interceptionData = ref([])
 const fetchInterceptionData = async () => {
   try {
     const res = await realtimeInterceptionItem(props.queryParams)
@@ -160,10 +237,22 @@ const fetchInterceptionData = async () => {
 }
 
 const fetchData = () => {
+
+  invokerCountLanePeakThroughput()
+  invokerCountSeizureInfoItem()
+  invokerCountSeizeSubjectCategoryQuantity()
+  invokerCountSeizureTotalQuantity()
+  invokerCountSeizureSingleQuantity()
+  invokerCountSeizeAreaQuantity()
+  invokerCountSeizureStatsItem()
+  invokerCountSeizureStatsType()
+  invokerCountSeizureStatsPost()
+  invokerSecurityTestItemClassification()
+  invokerSecurityTestPassingStatus()
+  invokerSecurityTestRegion()
   fetchSupervisionData()
   fetchInterceptionData()
 }
-
 watch(() => props.queryParams, () => {
   fetchData()
 }, { deep: true, immediate: true })
@@ -178,10 +267,13 @@ watch(() => props.queryParams, () => {
     display: flex;
     column-gap: 15px;
     height: 360px;
+    width: 100%;
+    overflow: hidden;
     margin-bottom: 15px;
     .col {
       flex: 1;
       height: 100%;
+      min-width: 0px;
       :deep(.info-card) {
         height: 100%;
       }