检测计划统计弹窗下拉框内容调整

frontend/src/api/plan/interface/index.ts

@@ -75,6 +75,11 @@ export namespace Plan {
         unqualifiedCount: number;
     }
 
+    export interface PlanStatisticsOption {
+        id: string;
+        name: string;
+    }
+
     export interface PlanStatistics {
         planId: string;
         planName: string;
@@ -92,6 +97,8 @@ export namespace Plan {
         thirdOrMorePassRate: number;
         unqualifiedRate: number;
         itemDistributions: PlanStatisticsItem[];
+        manufacturerOptions: PlanStatisticsOption[];
+        devTypeOptions: PlanStatisticsOption[];
     }
 
   

frontend/src/views/plan/planList/components/planStatisticsPopup.vue

@@ -18,7 +18,7 @@
                             filterable
                             placeholder="全部"
                             class="filter-select"
-                            @change="reloadStatistics"
+                            @change="reloadStatistics('manufacturer')"
                         >
                             <el-option label="全部" value="" />
                             <el-option
@@ -35,7 +35,7 @@
                             filterable
                             placeholder="全部"
                             class="filter-select"
-                            @change="reloadStatistics"
+                            @change="reloadStatistics('devType')"
                         >
                             <el-option label="全部" value="" />
                             <el-option
@@ -81,16 +81,15 @@ import { computed, nextTick, onMounted, onUnmounted, reactive, ref } from 'vue'
 import * as echarts from 'echarts'
 import { ElMessage } from 'element-plus'
 import { getPlanStatistics } from '@/api/plan/plan'
-import { getPqDev } from '@/api/device/device'
 import type { Plan } from '@/api/plan/interface'
-import type { Device } from '@/api/device/interface/device'
-import { useDictStore } from '@/stores/modules/dict'
 
 interface SelectOption {
     id: string
     name: string
 }
 
+type FilterField = 'manufacturer' | 'devType'
+
 const emptyStatistics = (): Plan.PlanStatistics => ({
     planId: '',
     planName: '',
@@ -107,7 +106,9 @@ const emptyStatistics = (): Plan.PlanStatistics => ({
     secondPassRate: 0,
     thirdOrMorePassRate: 0,
     unqualifiedRate: 0,
-    itemDistributions: []
+    itemDistributions: [],
+    manufacturerOptions: [],
+    devTypeOptions: []
 })
 
 const dialogVisible = ref(false)
@@ -122,8 +123,7 @@ const filters = reactive({
     manufacturer: '',
     devType: ''
 })
-const dictStore = useDictStore()
+const manufacturerOptions = ref<SelectOption[]>([])
-const manufacturerOptions = computed<SelectOption[]>(() => dictStore.getDictData('Dev_Manufacturers') as SelectOption[])
 const devTypeOptions = ref<SelectOption[]>([])
 let rateChart: echarts.ECharts | null = null
 let itemChart: echarts.ECharts | null = null
@@ -172,16 +172,15 @@ const open = async (row: Partial<Plan.ReqPlan>) => {
     filters.devType = ''
     planName.value = row.name || ''
     dialogVisible.value = true
-    await loadFilterOptions()
     await loadStatistics()
 }
 
-const reloadStatistics = async () => {
+const reloadStatistics = async (changedField?: FilterField) => {
     if (!dialogVisible.value || !currentPlanId.value) return
-    await loadStatistics()
+    await loadStatistics(changedField)
 }
 
-const loadStatistics = async () => {
+const loadStatistics = async (changedField?: FilterField) => {
     loading.value = true
 
     try {
@@ -190,11 +189,21 @@ const loadStatistics = async () => {
             manufacturer: filters.manufacturer || undefined,
             devType: filters.devType || undefined
         })
+        const nextManufacturerOptions = data?.manufacturerOptions || []
+        const nextDevTypeOptions = data?.devTypeOptions || []
         Object.assign(statisticsData, {
             ...emptyStatistics(),
             ...data,
-            itemDistributions: data?.itemDistributions || []
+            itemDistributions: data?.itemDistributions || [],
+            manufacturerOptions: nextManufacturerOptions,
+            devTypeOptions: nextDevTypeOptions
         })
+        manufacturerOptions.value = nextManufacturerOptions
+        devTypeOptions.value = nextDevTypeOptions
+        if (clearInvalidFilters(changedField)) {
+            await loadStatistics()
+            return
+        }
         await nextTick()
         renderCharts()
     } catch (error) {
@@ -205,17 +214,21 @@ const loadStatistics = async () => {
     }
 }
 
-const loadFilterOptions = async () => {
+const clearInvalidFilters = (changedField?: FilterField) => {
-    if (devTypeOptions.value.length) return
+    let cleared = false
-    try {
+    if (
-        const { data } = await getPqDev()
+        changedField !== 'manufacturer' &&
-        devTypeOptions.value = ((data || []) as Device.ResDev[]).map(item => ({
+        filters.manufacturer &&
-            id: item.id,
+        !manufacturerOptions.value.some(item => item.id === filters.manufacturer)
-            name: item.name
+    ) {
-        }))
+        filters.manufacturer = ''
-    } catch (error) {
+        cleared = true
-        devTypeOptions.value = []
     }
+    if (changedField !== 'devType' && filters.devType && !devTypeOptions.value.some(item => item.id === filters.devType)) {
+        filters.devType = ''
+        cleared = true
+    }
+    return cleared
 }
 
 const renderCharts = () => {