refactor(portraitManagement): 统一精简运行数据组件代码

1. 移除三个页面中冗余的静态模拟数据和旧组件导入
2. 为deptProfile和teamProfile组件新增动态数据拉取逻辑
3. 统一组件结构，适配查询参数变化自动更新数据

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

@@ -1,33 +1,6 @@
 <template>
   <div class="operation-data">
     <div class="row">
-      <ProfilePassRate
-        :chartData1="passRatePassData"
-        :chartData2="passRateLineData"
-      />
-    </div>
-
-    <div class="row">
-      <ProfileSeizedInfo :chartData1="seizedTotal" />
-      <ProfileSeizedDistribution :chartData1="seizedDistributionData" />
-    </div>
-
-    <div class="row">
-      <ProfileDailySeizedLine :chartData1="dailyLineData" />
-      <ProfileDailySeizedArea
-        :chartData1="dailyAreaPersonA"
-        :chartData2="dailyAreaPersonB"
-        :chartData3="dailyAreaPersonC"
-        :chartData4="dailyAreaPersonD"
-        :chartData5="dailyAreaPersonE"
-      />
-    </div>
-
-    <div class="row">
-      <ProfileDailySeizedBar :chartData1="dailyBarData" />
-    </div>
-
-    <div class="row">
       <ChannelCheckChart :chartsData="chartsData" />
     </div>
     <div class="row">
@@ -73,16 +46,17 @@
     </div>
     <div class="row">
       <div class="col">
-        <SupervisionDistribution :chartsData="chartsData"/>
+        <SupervisionDistribution :chartsData="supervisionData"/>
       </div>
       <div class="col">
-        <InterceptionDistribution :chartsData="chartsData" />
+        <InterceptionDistribution :chartsData="interceptionData" />
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
+import { watch } from 'vue'
 import ChannelCheckChart from '../../components/ChannelCheckChart.vue';
 import SeizedInfo from '../../components/SeizedInfo.vue';
 import SeizedItems from '../../components/SeizedItems.vue';
@@ -97,32 +71,14 @@ 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 ProfilePassRate from '../../components/ProfilePassRate.vue';
-import ProfileSeizedInfo from '../../components/ProfileSeizedInfo.vue';
-import ProfileSeizedDistribution from '../../components/ProfileSeizedDistribution.vue';
-import ProfileDailySeizedLine from '../../components/ProfileDailySeizedLine.vue';
-import ProfileDailySeizedArea from '../../components/ProfileDailySeizedArea.vue';
-import ProfileDailySeizedBar from '../../components/ProfileDailySeizedBar.vue';
-
-
-const passRatePassData = ref([370, 352, 330, 387, 426, 342, 325, 384, 445, 407, 382, 401, 380, 464, 342, 443, 305, 394, 334, 430, 364, 362, 400, 420])
-const passRateLineData = ref([4.5, 5, 4, 6, 7, 5, 4, 6, 8, 7, 6, 7, 6, 8, 5, 7, 4, 6, 5, 7, 6, 6, 6.5, 7])
-
-const seizedTotal = ref(1658)
+import { realtimeInterceptionItem, supervisionProblemPosition } from '@/api/portraitManagement/portraitManagement';
 
-const seizedDistributionData = ref([
-  { value: 20, name: '打火机', itemStyle: { color: '#ff9f43' } },
-  { value: 30, name: '管制刀具', itemStyle: { color: '#ff6b6b' } },
-  { value: 50, name: '其他违禁品', itemStyle: { color: '#4da6ff' } }
-])
-
-const dailyLineData = ref([120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330])
-const dailyAreaPersonA = ref([120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330])
-const dailyAreaPersonB = ref([220, 182, 191, 234, 290, 330, 310, 123, 144, 210, 182, 191])
-const dailyAreaPersonC = ref([150, 232, 201, 154, 190, 330, 410, 201, 154, 190, 330, 410])
-const dailyAreaPersonD = ref([320, 332, 301, 334, 390, 330, 320, 332, 301, 334, 390, 330])
-const dailyAreaPersonE = ref([820, 932, 901, 934, 1290, 1330, 1320, 820, 932, 901, 934, 1290])
-const dailyBarData = ref([120, 200, 150, 80, 70, 110, 130, 90, 160, 140, 180])
+const props = defineProps({
+  queryParams: {
+    type: Object,
+    default: () => ({})
+  }
+})
 
 const chartsData = ref([
   {
@@ -171,6 +127,46 @@ const chartsData = ref([
     name: '烟火'
   },
 ])
+
+const supervisionData = ref([])
+const interceptionData = ref([])
+
+const fetchSupervisionData = async () => {
+  try {
+    const res = await supervisionProblemPosition(props.queryParams)
+    if (res.code === 200 && res.data) {
+      supervisionData.value = res.data.map(item => ({
+        num: item.total,
+        name: item.name
+      }))
+    }
+  } catch (error) {
+    console.error('获取各岗位监察问题分布数据失败', error)
+  }
+}
+
+const fetchInterceptionData = async () => {
+  try {
+    const res = await realtimeInterceptionItem(props.queryParams)
+    if (res.code === 200 && res.data) {
+      interceptionData.value = res.data.map(item => ({
+        num: item.total,
+        name: item.name
+      }))
+    }
+  } catch (error) {
+    console.error('获取实时质控拦截物品分布数据失败', error)
+  }
+}
+
+const fetchData = () => {
+  fetchSupervisionData()
+  fetchInterceptionData()
+}
+
+watch(() => props.queryParams, () => {
+  fetchData()
+}, { deep: true, immediate: true })
   
 
 </script>

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

@@ -1,33 +1,6 @@
 <template>
   <div class="operation-data">
     <div class="row">
-      <ProfilePassRate
-        :chartData1="passRatePassData"
-        :chartData2="passRateLineData"
-      />
-    </div>
-
-    <div class="row">
-      <ProfileSeizedInfo :chartData1="seizedTotal" />
-      <ProfileSeizedDistribution :chartData1="seizedDistributionData" />
-    </div>
-
-    <div class="row">
-      <ProfileDailySeizedLine :chartData1="dailyLineData" />
-      <ProfileDailySeizedArea
-        :chartData1="dailyAreaPersonA"
-        :chartData2="dailyAreaPersonB"
-        :chartData3="dailyAreaPersonC"
-        :chartData4="dailyAreaPersonD"
-        :chartData5="dailyAreaPersonE"
-      />
-    </div>
-
-    <div class="row">
-      <ProfileDailySeizedBar :chartData1="dailyBarData" />
-    </div>
-
-    <div class="row">
       <ChannelCheckChart :chartsData="chartsData" />
     </div>
     <div class="row">
@@ -98,12 +71,6 @@ 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 ProfilePassRate from '../../components/ProfilePassRate.vue';
-import ProfileSeizedInfo from '../../components/ProfileSeizedInfo.vue';
-import ProfileSeizedDistribution from '../../components/ProfileSeizedDistribution.vue';
-import ProfileDailySeizedLine from '../../components/ProfileDailySeizedLine.vue';
-import ProfileDailySeizedArea from '../../components/ProfileDailySeizedArea.vue';
-import ProfileDailySeizedBar from '../../components/ProfileDailySeizedBar.vue';
 import { realtimeInterceptionItem, supervisionProblemPosition } from '@/api/portraitManagement/portraitManagement';
 
 const props = defineProps({
@@ -113,25 +80,6 @@ const props = defineProps({
   }
 })
 
-const passRatePassData = ref([370, 352, 330, 387, 426, 342, 325, 384, 445, 407, 382, 401, 380, 464, 342, 443, 305, 394, 334, 430, 364, 362, 400, 420])
-const passRateLineData = ref([4.5, 5, 4, 6, 7, 5, 4, 6, 8, 7, 6, 7, 6, 8, 5, 7, 4, 6, 5, 7, 6, 6, 6.5, 7])
-
-const seizedTotal = ref(1658)
-
-const seizedDistributionData = ref([
-  { value: 20, name: '打火机', itemStyle: { color: '#ff9f43' } },
-  { value: 30, name: '管制刀具', itemStyle: { color: '#ff6b6b' } },
-  { value: 50, name: '其他违禁品', itemStyle: { color: '#4da6ff' } }
-])
-
-const dailyLineData = ref([120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330])
-const dailyAreaPersonA = ref([120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330])
-const dailyAreaPersonB = ref([220, 182, 191, 234, 290, 330, 310, 123, 144, 210, 182, 191])
-const dailyAreaPersonC = ref([150, 232, 201, 154, 190, 330, 410, 201, 154, 190, 330, 410])
-const dailyAreaPersonD = ref([320, 332, 301, 334, 390, 330, 320, 332, 301, 334, 390, 330])
-const dailyAreaPersonE = ref([820, 932, 901, 934, 1290, 1330, 1320, 820, 932, 901, 934, 1290])
-const dailyBarData = ref([120, 200, 150, 80, 70, 110, 130, 90, 160, 140, 180])
-
 const chartsData = ref([
   {
     num: 370,

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

@@ -1,33 +1,6 @@
 <template>
   <div class="operation-data">
     <div class="row">
-      <ProfilePassRate
-        :chartData1="passRatePassData"
-        :chartData2="passRateLineData"
-      />
-    </div>
-
-    <div class="row">
-      <ProfileSeizedInfo :chartData1="seizedTotal" />
-      <ProfileSeizedDistribution :chartData1="seizedDistributionData" />
-    </div>
-
-    <div class="row">
-      <ProfileDailySeizedLine :chartData1="dailyLineData" />
-      <ProfileDailySeizedArea
-        :chartData1="dailyAreaPersonA"
-        :chartData2="dailyAreaPersonB"
-        :chartData3="dailyAreaPersonC"
-        :chartData4="dailyAreaPersonD"
-        :chartData5="dailyAreaPersonE"
-      />
-    </div>
-
-    <div class="row">
-      <ProfileDailySeizedBar :chartData1="dailyBarData" />
-    </div>
-
-    <div class="row">
       <ChannelCheckChart :chartsData="chartsData" />
     </div>
     <div class="row">
@@ -73,16 +46,17 @@
     </div>
     <div class="row">
       <div class="col">
-        <SupervisionDistribution :chartsData="chartsData"/>
+        <SupervisionDistribution :chartsData="supervisionData"/>
       </div>
       <div class="col">
-        <InterceptionDistribution :chartsData="chartsData" />
+        <InterceptionDistribution :chartsData="interceptionData" />
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
+import { watch } from 'vue'
 import ChannelCheckChart from '../../components/ChannelCheckChart.vue';
 import SeizedInfo from '../../components/SeizedInfo.vue';
 import SeizedItems from '../../components/SeizedItems.vue';
@@ -97,32 +71,14 @@ 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 ProfilePassRate from '../../components/ProfilePassRate.vue';
-import ProfileSeizedInfo from '../../components/ProfileSeizedInfo.vue';
-import ProfileSeizedDistribution from '../../components/ProfileSeizedDistribution.vue';
-import ProfileDailySeizedLine from '../../components/ProfileDailySeizedLine.vue';
-import ProfileDailySeizedArea from '../../components/ProfileDailySeizedArea.vue';
-import ProfileDailySeizedBar from '../../components/ProfileDailySeizedBar.vue';
-
-
-const passRatePassData = ref([370, 352, 330, 387, 426, 342, 325, 384, 445, 407, 382, 401, 380, 464, 342, 443, 305, 394, 334, 430, 364, 362, 400, 420])
-const passRateLineData = ref([4.5, 5, 4, 6, 7, 5, 4, 6, 8, 7, 6, 7, 6, 8, 5, 7, 4, 6, 5, 7, 6, 6, 6.5, 7])
-
-const seizedTotal = ref(1658)
+import { realtimeInterceptionItem, supervisionProblemPosition } from '@/api/portraitManagement/portraitManagement';
 
-const seizedDistributionData = ref([
-  { value: 20, name: '打火机', itemStyle: { color: '#ff9f43' } },
-  { value: 30, name: '管制刀具', itemStyle: { color: '#ff6b6b' } },
-  { value: 50, name: '其他违禁品', itemStyle: { color: '#4da6ff' } }
-])
-
-const dailyLineData = ref([120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330])
-const dailyAreaPersonA = ref([120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330])
-const dailyAreaPersonB = ref([220, 182, 191, 234, 290, 330, 310, 123, 144, 210, 182, 191])
-const dailyAreaPersonC = ref([150, 232, 201, 154, 190, 330, 410, 201, 154, 190, 330, 410])
-const dailyAreaPersonD = ref([320, 332, 301, 334, 390, 330, 320, 332, 301, 334, 390, 330])
-const dailyAreaPersonE = ref([820, 932, 901, 934, 1290, 1330, 1320, 820, 932, 901, 934, 1290])
-const dailyBarData = ref([120, 200, 150, 80, 70, 110, 130, 90, 160, 140, 180])
+const props = defineProps({
+  queryParams: {
+    type: Object,
+    default: () => ({})
+  }
+})
 
 const chartsData = ref([
   {
@@ -171,6 +127,46 @@ const chartsData = ref([
     name: '烟火'
   },
 ])
+
+const supervisionData = ref([])
+const interceptionData = ref([])
+
+const fetchSupervisionData = async () => {
+  try {
+    const res = await supervisionProblemPosition(props.queryParams)
+    if (res.code === 200 && res.data) {
+      supervisionData.value = res.data.map(item => ({
+        num: item.total,
+        name: item.name
+      }))
+    }
+  } catch (error) {
+    console.error('获取各岗位监察问题分布数据失败', error)
+  }
+}
+
+const fetchInterceptionData = async () => {
+  try {
+    const res = await realtimeInterceptionItem(props.queryParams)
+    if (res.code === 200 && res.data) {
+      interceptionData.value = res.data.map(item => ({
+        num: item.total,
+        name: item.name
+      }))
+    }
+  } catch (error) {
+    console.error('获取实时质控拦截物品分布数据失败', error)
+  }
+}
+
+const fetchData = () => {
+  fetchSupervisionData()
+  fetchInterceptionData()
+}
+
+watch(() => props.queryParams, () => {
+  fetchData()
+}, { deep: true, immediate: true })
   
 
 </script>