重构帕累托分析功能，拆分为独立组件并优化交互逻辑

src/views/warehouse/WmsImportResult/EmptyContent.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="empty-content">
+    <el-empty description="请选择功能进行分析" />
+  </div>
+</template>
+
+<script setup>
+// 空内容组件，用于默认显示
+</script>
+
+<style scoped>
+.empty-content {
+  padding: 40px 0;
+  text-align: center;
+}
+</style>

src/views/warehouse/WmsImportResult/ParetoAnalysis.vue

@@ -0,0 +1,206 @@
+<template>
+  <div class="pareto-analysis-container">
+    <!-- 帕累托分析按钮 -->
+    <div style="margin-bottom: 10px;">
+      <el-button 
+        type="success" 
+        icon="ChatDotRound" 
+        @click="handleAIAnalysis"
+        :loading="aiAnalysisLoading"
+      >
+        AI分析
+      </el-button>
+    </div>
+    
+    <!-- 帕累托数据表格 -->
+    <el-table 
+      v-if="paretoData.length > 0" 
+      :data="paretoData" 
+      border 
+      style="width: 100%" 
+      stripe
+    >
+      <el-table-column prop="item_name" label="检测项" width="180" />
+      <el-table-column prop="defect_count" label="缺陷数" width="100" />
+      <el-table-column prop="defect_percentage" label="缺陷百分比" width="120">
+        <template #default="scope">
+          {{ scope.row.defect_percentage }}%
+        </template>
+      </el-table-column>
+      <el-table-column prop="cumulative_percentage" label="累计百分比" width="120">
+        <template #default="scope">
+          {{ scope.row.cumulative_percentage }}%
+        </template>
+      </el-table-column>
+      <el-table-column label="缺陷占比">
+        <template #default="scope">
+          <el-progress 
+            :percentage="scope.row.defect_percentage" 
+            :show-text="false"
+            :color="getProgressColor(scope.row.defect_percentage)"
+          />
+        </template>
+      </el-table-column>
+    </el-table>
+    
+    <!-- 统计信息 -->
+    <div v-if="paretoData.length > 0" class="statistics-info">
+      <p>数据范围: {{ dateRange.start_date }} 至 {{ dateRange.end_date }}</p>
+      <p>总计检测项: {{ paretoData.length }}</p>
+    </div>
+
+    <!-- AI分析结果对话框 -->
+    <el-dialog
+      v-model="aiDialogVisible"
+      title="AI分析结果"
+      width="60%"
+      :close-on-click-modal="false"
+    >
+      <div class="ai-analysis-content">
+        <el-input
+          v-model="aiAnalysisResult"
+          type="textarea"
+          :rows="15"
+          placeholder="AI分析结果将显示在这里"
+          readonly
+        />
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const props = defineProps({
+  selectedTimeRange: {
+    type: String,
+    default: '近1年'
+  },
+  paretoData: {
+    type: Array,
+    default: () => []
+  },
+  dateRange: {
+    type: Object,
+    default: () => ({
+      start_date: '',
+      end_date: ''
+    })
+  },
+  apiKey: {
+    type: String,
+    default: 'sk-4fa66e674e57479d961e4ad2036cbc52'
+  }
+})
+
+const emit = defineEmits(['ai-analysis-complete'])
+
+// AI分析相关状态
+const aiDialogVisible = ref(false)
+const aiAnalysisResult = ref("")
+const aiAnalysisLoading = ref(false)
+
+// 根据缺陷百分比设置进度条颜色
+function getProgressColor(percentage) {
+  if (percentage >= 30) return '#f56c6c'; // 红色 - 高缺陷率
+  if (percentage >= 15) return '#e6a23c'; // 橙色 - 中等缺陷率
+  if (percentage >= 5) return '#409eff';   // 蓝色 - 低缺陷率
+  return '#67c23a'; // 绿色 - 很低缺陷率
+}
+
+// AI分析功能
+async function handleAIAnalysis() {
+  if (props.paretoData.length === 0) {
+    emit('ai-analysis-complete', '请先获取帕累托分析数据')
+    return
+  }
+
+  aiAnalysisLoading.value = true
+  aiDialogVisible.value = true
+  aiAnalysisResult.value = '正在分析中，请稍候...'
+
+  try {
+    // 准备分析提示词
+    const prompt = `请分析以下帕累托分析数据，提供专业的质量控制见解：
+
+数据范围: ${props.dateRange.start_date} 至 ${props.dateRange.end_date}
+检测项目总数: ${props.paretoData.length}
+
+详细数据:
+${props.paretoData.map(item => 
+  `- ${item.item_name}: 缺陷数 ${item.defect_count}, 缺陷占比 ${item.defect_percentage}%, 累计占比 ${item.cumulative_percentage}%`
+).join('\n')}
+
+请从以下角度进行分析：
+1. 主要缺陷项及其影响程度
+2. 帕累托原理(80/20法则)在此数据中的体现
+3. 针对高缺陷率项的改进建议
+4. 质量控制重点优化方向`
+
+    // 调用DeepSeek API进行分析
+    const response = await fetch('https://api.deepseek.com/v1/chat/completions', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${props.apiKey}`
+      },
+      body: JSON.stringify({
+        model: 'deepseek-chat',
+        messages: [
+          {
+            role: 'system',
+            content: '你是一位专业的质量控制专家，擅长分析缺陷数据并提供专业的改进建议。'
+          },
+          {
+            role: 'user',
+            content: prompt
+          }
+        ],
+        temperature: 0.7,
+        max_tokens: 1500
+      })
+    })
+
+    if (!response.ok) {
+      throw new Error(`API调用失败: ${response.status}`)
+    }
+
+    const data = await response.json()
+    const analysisResult = data.choices[0].message.content
+    aiAnalysisResult.value = analysisResult
+    // 发送分析结果完成事件
+    emit('ai-analysis-complete', analysisResult)
+  } catch (error) {
+    console.error('AI分析失败:', error)
+    const errorMessage = `AI分析失败: ${error.message}\n\n请检查网络连接或稍后再试。`
+    aiAnalysisResult.value = errorMessage
+    // 发送分析结果失败事件
+    emit('ai-analysis-complete', errorMessage)
+  } finally {
+    aiAnalysisLoading.value = false
+  }
+}
+</script>
+
+<style scoped>
+.pareto-analysis-container {
+  width: 100%;
+}
+
+.statistics-info {
+  margin-top: 10px;
+  padding: 10px;
+  background-color: #f5f7fa;
+  border-radius: 4px;
+}
+
+.statistics-info p {
+  margin: 5px 0;
+  font-size: 14px;
+}
+
+.ai-analysis-content {
+  padding: 10px 0;
+}
+</style>

src/views/warehouse/WmsImportResult/index.vue

@@ -31,7 +31,7 @@
         <el-button
             type="primary"
             plain
-            @click="handleMinus"
+            @click="handlePareto"
             v-hasPermi="['warehouse:WmsImportResult:add']"
         >帕累托分析</el-button>
       </el-col>
@@ -69,70 +69,20 @@
       <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <!-- 质检数据显示区域 -->
+    <!-- 动态内容显示区域 -->
-    <el-row v-if="paretoData.length > 0" class="mb8">
+    <el-row class="mb8">
       <el-col :span="24">
-
+        <!-- 根据currentComponent动态切换组件 -->
-        
+        <component 
-        <el-table :data="paretoData" border style="width: 100%" stripe>
+          :is="currentComponent" 
-          <el-table-column prop="item_name" label="检测项" width="180" />
+          v-if="currentComponent"
-          <el-table-column prop="defect_count" label="缺陷数" width="100" />
+          :selected-time-range="queryForm.selectedTimeRange"
-          <el-table-column prop="defect_percentage" label="缺陷百分比" width="120">
+          :pareto-data="paretoData"
-            <template #default="scope">
+          :date-range="dateRange"
-              {{ scope.row.defect_percentage }}%
+          @ai-analysis-complete="handleAIAnalysisComplete"
-            </template>
+        />
-          </el-table-column>
-          <el-table-column prop="cumulative_percentage" label="累计百分比" width="120">
-            <template #default="scope">
-              {{ scope.row.cumulative_percentage }}%
-            </template>
-          </el-table-column>
-          <el-table-column label="缺陷占比">
-            <template #default="scope">
-              <el-progress 
-                :percentage="scope.row.defect_percentage" 
-                :show-text="false"
-                :color="getProgressColor(scope.row.defect_percentage)"
-              />
-            </template>
-          </el-table-column>
-        </el-table>
-        <div class="statistics-info">
-          <p>数据范围: {{ dateRange.start_date }} 至 {{ dateRange.end_date }}</p>
-          <p>总计检测项: {{ paretoData.length }}</p>
-        </div>
-        
-         <div style="margin-bottom: 10px;">
-          <el-button 
-            type="success" 
-            icon="ChatDotRound" 
-            @click="handleAIAnalysis"
-            :loading="aiAnalysisLoading"
-          >
-            AI分析
-          </el-button>
-        </div>
-
       </el-col>
     </el-row>
-
-    <!-- AI分析结果对话框 -->
-    <el-dialog
-      v-model="aiDialogVisible"
-      title="AI分析结果"
-      width="60%"
-      :close-on-click-modal="false"
-    >
-      <div class="ai-analysis-content">
-        <el-input
-          v-model="aiAnalysisResult"
-          type="textarea"
-          :rows="15"
-          placeholder="AI分析结果将显示在这里"
-          readonly
-        />
-      </div>
-    </el-dialog>
     
     <!-- 消息显示文本框 -->
     <el-row>
@@ -152,8 +102,10 @@
 </template>
 
 <script setup name="WmsImportResult">
-import { ref, reactive, toRefs, getCurrentInstance } from 'vue'
+import { ref, reactive, toRefs, getCurrentInstance, shallowRef } from 'vue'
 import { listWmsImportResult, getWmsImportResult, delWmsImportResult, addWmsImportResult, updateWmsImportResult } from "@/api/warehouse/WmsImportResult"
+import ParetoAnalysis from './ParetoAnalysis.vue'
+import EmptyContent from './EmptyContent.vue'
 
 const { proxy } = getCurrentInstance()
 
@@ -185,6 +137,9 @@ const aiDialogVisible = ref(false)
 const aiAnalysisResult = ref("")
 const aiAnalysisLoading = ref(false)
 
+// 当前显示的组件
+const currentComponent = shallowRef(EmptyContent)
+
 const data = reactive({
   form: {},
   queryParams: {
@@ -206,7 +161,7 @@ const data = reactive({
 const { queryParams, form, rules } = toRefs(data)
 
 
-function handleMinus() {
+function handlePareto() {
   // 根据选择的时间范围计算开始和结束日期
   const endDate = new Date();
   const startDate = new Date();
@@ -243,6 +198,8 @@ function handleMinus() {
           start_date: data.start_date,
           end_date: data.end_date
         };
+        // 切换到帕累托分析组件
+        currentComponent.value = ParetoAnalysis;
       }
     })
     .catch(error => {
@@ -251,7 +208,10 @@ function handleMinus() {
     })
 }
 
-
+// 处理AI分析完成事件
+function handleAIAnalysisComplete(result) {
+  message.value = result;
+}
 
 // getList()
 // 根据缺陷百分比设置进度条颜色