添加统计模块

src/views/User/cadmiumPrediction/CropCadmiumPrediction.vue

@@ -75,8 +75,9 @@
         </div>
         
         <div v-if="!loadingStats && statisticsData.length" class="stats-container">
-          <!-- 统计表格 -->
-         <el-table 
+          <!-- 基础统计表格 -->
+          <h4>基础统计信息</h4>
+          <el-table 
             :data="statisticsData" 
             style="width: 100%; margin-bottom: 20px;"
             border
@@ -87,6 +88,25 @@
             <el-table-column prop="unit" label="单位" min-width="100" />
             <el-table-column prop="description" label="描述" min-width="200" />
           </el-table>
+
+          <!-- 分布统计表格 -->
+          <h4>水稻镉含量分布统计</h4>
+          <el-table 
+            :data="distributionData" 
+            style="width: 100%; margin-bottom: 20px;"
+            border
+            stripe
+          >
+            <el-table-column prop="序号" label="序号" width="80" />
+            <el-table-column prop="分布区间" label="分布区间 (mg/kg)" min-width="150" />
+            <el-table-column prop="区间说明" label="区间说明" min-width="120" />
+            <el-table-column prop="数据点数量" label="数据点数量" min-width="120" />
+            <el-table-column prop="占比" label="占比 (%)" min-width="100">
+              <template #default="{ row }">
+                {{ row.占比 }}%
+              </template>
+            </el-table-column>
+          </el-table>
         </div>
         
         <div v-if="!loadingStats && !statisticsData.length" class="no-data">
@@ -133,6 +153,9 @@ export default {
       loadingHistogram: false,
       loadingStats: false,
       statisticsData: [],
+      distributionData: [],
+      distributionSummary: null,
+      distributionTotal: 0,
       modelInfo: {
         modelType: '',
         unit: '',
@@ -298,6 +321,13 @@ export default {
           const statsData = response.data;
           this.statisticsData = this.formatStatisticsData(statsData);
           
+          // 设置分布统计表格数据
+          if (statsData.data.分布统计表格 && statsData.data.分布统计表格.表格数据) {
+            this.distributionData = statsData.data.分布统计表格.表格数据;
+            this.distributionSummary = statsData.data.分布统计表格.汇总;
+            this.distributionTotal = statsData.data.分布统计表格.总数据点数;
+          }
+          
           // 设置模型信息
           this.modelInfo = {
             modelType: statsData.data.模型类型,
@@ -663,6 +693,55 @@ export default {
   animation: rotate 2s linear infinite;
 }
 
+/* 新增样式 */
+.summary-info {
+  margin-top: 20px;
+}
+
+.card-header {
+  font-weight: bold;
+  color: #409EFF;
+}
+
+.summary-items {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.summary-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 0;
+  border-bottom: 1px solid #ebeef5;
+}
+
+.summary-item:last-child {
+  border-bottom: none;
+}
+
+.summary-item .label {
+  font-weight: bold;
+  color: #606266;
+}
+
+.summary-item .value {
+  font-weight: bold;
+}
+
+.summary-item .value.safe {
+  color: #67C23A;
+}
+
+.summary-item .value.warning {
+  color: #E6A23C;
+}
+
+.summary-item .value.danger {
+  color: #F56C6C;
+}
+
 @keyframes rotate {
   from {
     transform: rotate(0deg);