Почетна Преглед Помоћ
Пријавите се
qw
/
soilgd12
1
0
Креирај огранак 0
Датотеке Дискусије 0 Захтеви за спајање 1 Вики
Преглед изворни кода

补充反酸的水田旱地切换，修改网页标题

yangtaodemon пре 1 месец
родитељ
43df8ceed0
комит
c8b0b17b0c
5 измењених фајлова са 564 додато и 259 уклоњено
Један поглед Покажи статистику Diff
  1. 1 1
      index.html
  2. 6 0
      src/components/layout/AppLayout.vue
  3. 0 5
      src/components/layout/menuItems.ts
  4. 222 106
      src/views/User/acidModel/Calculation.vue
  5. 335 147
      src/views/User/acidModel/ModelIterationVisualization.vue

+ 1 - 1
index.html
Прегледај датотеку 

@@ -4,7 +4,7 @@
 
     <meta charset="UTF-8">
 
     <meta charset="UTF-8">
 
     <link rel="icon" href="/logo.ico">
 
     <link rel="icon" href="/logo.ico">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <title>区域土壤重金属评估</title>
 
+    <title>土壤酸化智能预测专家系统</title>
 
   </head>
 
   </head>
 
   <body>
 
   <body>
 
     <div id="app"></div>
 
     <div id="app"></div>

+ 6 - 0
src/components/layout/AppLayout.vue
Прегледај датотеку 

@@ -229,6 +229,12 @@ const tabs = computed(() => {
 
         label: t('Menu.mapcalulate'),
 
         label: t('Menu.mapcalulate'),
 
         icon: "el-icon-data-analysis",
 
         icon: "el-icon-data-analysis",
 
         routes: ["/shaoguan_acidmodelmap","nanxiong_acidmodelmap"],
 
         routes: ["/shaoguan_acidmodelmap","nanxiong_acidmodelmap"],
 
+      },
 
+       {
 
+        name: "agentDialog",
 
+        label: "土壤酸化AI智能体",
 
+        icon: "el-icon-help-filled",
 
+        routes: ["/AgentDialog"],
 
       },
 
       },
 
       {
 
       {
 
         name: "Calculation",
 
         name: "Calculation",

+ 0 - 5
src/components/layout/menuItems.ts
Прегледај датотеку 

@@ -60,11 +60,6 @@ export const tabMenuMap: Record<string, MenuItem[]> = {
 
       index: "/pHPrediction",
 
       index: "/pHPrediction",
 
       label: "Menu.soilPH Prediction",
 
       label: "Menu.soilPH Prediction",
 
       icon: Location
 
       icon: Location
 
-    },
 
-    {
 
-      index: "/AgentDialog",
 
-      label: "土壤酸化AI智能体",
 
-      icon: HelpFilled
 
     }
 
     }
 
   ],
 
   ],
 
   Calculation: [
 
   Calculation: [

+ 222 - 106
src/views/User/acidModel/Calculation.vue
Прегледај датотеку 

@@ -2,71 +2,56 @@
 
   <el-card class="box-card">
 
   <el-card class="box-card">
 
     <template #header>
 
     <template #header>
 
       <div class="card-header">
 
       <div class="card-header">
 
-        <span>{{ $t('Calculation.refluxTitle') }}</span>
 
+        <span>反酸模型</span>
 
+        <div class="mode-switch">
 
+          <el-button type="primary" :class="['mode-button', 'dry-mode', currentMode === 'dry' ? 'active' : '']"
 
+            @click="setMode('dry')" icon="el-icon-crop" round>旱地</el-button>
 
+          <el-button type="primary" :class="['mode-button', 'paddy-mode', currentMode === 'paddy' ? 'active' : '']"
 
+            @click="setMode('paddy')" icon="el-icon-watermelon" round>水田</el-button>
 
+        </div>
 
       </div>
 
       </div>
 
     </template>
 
     </template>
 
 
 
-    <el-form
 
-      :model="form"
 
-      ref="predictForm"
 
-      label-width="240px"
 
-      label-position="left"
 
-    >
 
-      <el-form-item :label="$t('Calculation.exchangeableHydrogen')" prop="H" :error="errorMessages.H" required>
 
-        <el-input
 
-          v-model="form.H"
 
-          size="large"
 
-          :placeholder="$t('Calculation.reflux.exchangeableHydrogenPlaceholder')"
 
-          @input="handleInput('H', $event, 0, 5)"
 
-        ></el-input>
 
+    <el-form :model="form" ref="predictForm" label-width="240px" label-position="left" class="form-container"
 
+      :class="currentMode === 'dry' ? 'dry-form' : 'paddy-form'">
 
+      <!-- 旱地模式下显示交换性氢 -->
 
+      <el-form-item v-if="currentMode === 'dry'" label="交换性氢(cmol/kg)" prop="H" :error="errorMessages.H" required>
 
+        <el-input v-model="form.H" size="large" placeholder="请输入交换性氢0~5(cmol/kg)"
 
+          @input="handleInput('H', $event, 0, 5)"></el-input>
 
       </el-form-item>
 
       </el-form-item>
 
-      <el-form-item :label="$t('Calculation.exchangeableAluminum')" prop="Al" :error="errorMessages.Al" required>
 
-        <el-input
 
-          v-model="form.Al"
 
-          size="large"
 
-          :placeholder="$t('Calculation.reflux.exchangeableAluminumPlaceholder')"
 
-          @input="handleInput('Al', $event, 0, 10)"
 
-        ></el-input>
 
+      <el-form-item label="交换性铝(cmol/kg)" prop="Al" :error="errorMessages.Al" required>
 
+        <el-input v-model="form.Al" size="large" placeholder="请输入交换性铝0~10(cmol/kg)"
 
+          @input="handleInput('Al', $event, 0, 10)"></el-input>
 
       </el-form-item>
 
       </el-form-item>
 
-      <el-form-item :label="$t('Calculation.soilOrganicMatter')" prop="OM" :error="errorMessages.OM" required>
 
-        <el-input
 
-          v-model="form.OM"
 
-          size="large"
 
-          :placeholder="$t('Calculation.reflux.soilOrganicMatterPlaceholder')"
 
-          @input="handleInput('OM', $event, 0, 35)"
 
-        ></el-input>
 
+      <el-form-item label="土壤有机质(g/kg)" prop="OM" :error="errorMessages.OM" required>
 
+        <el-input v-model="form.OM" size="large" placeholder="请输入土壤有机质0~35(g/kg)"
 
+          @input="handleInput('OM', $event, 0, 35)"></el-input>
 
       </el-form-item>
 
       </el-form-item>
 
-      <el-form-item :label="$t('Calculation.nitrate')" prop="NO3" :error="errorMessages.NO3" required>
 
-        <el-input
 
-          v-model="form.NO3"
 
-          size="large"
 
-          :placeholder="$t('Calculation.reflux.nitratePlaceholder')"
 
-          @input="handleInput('NO3', $event, 0, 70)"
 
-        ></el-input>
 
+      <el-form-item label="硝酸盐(mg/kg)" prop="NO3" :error="errorMessages.NO3" required>
 
+        <el-input v-model="form.NO3" size="large" placeholder="请输入硝酸盐0~70(mg/kg)"
 
+          @input="handleInput('NO3', $event, 0, 70)"></el-input>
 
       </el-form-item>
 
       </el-form-item>
 
-      <el-form-item :label="$t('Calculation.ammoniumSalt')" prop="NH4" :error="errorMessages.NH4" required>
 
-        <el-input
 
-          v-model="form.NH4"
 
-          size="large"
 
-          :placeholder="$t('Calculation.reflux.ammoniumSaltPlaceholder')"
 
-          @input="handleInput('NH4', $event, 0, 20)"
 
-        ></el-input>
 
+      <el-form-item label="铵盐(mg/kg)" prop="NH4" :error="errorMessages.NH4" required>
 
+        <el-input v-model="form.NH4" size="large" placeholder="请输入铵盐0~20(mg/kg)"
 
+          @input="handleInput('NH4', $event, 0, 20)"></el-input>
 
       </el-form-item>
 
       </el-form-item>
 
-      <el-form-item :label="$t('Calculation.cationExchangeCapacity')" prop="CEC" :error="errorMessages.CEC" required>
 
-        <el-input
 
-          v-model="form.CEC"
 
-          size="large"
 
-          :placeholder="$t('Calculation.reflux.cationExchangeCapacityPlaceholder')"
 
-          @input="handleInput('CEC', $event, 0, 20)"
 
-        ></el-input>
 
+      <el-form-item label="阳离子交换量(cmol/kg)" prop="CEC" :error="errorMessages.CEC" required>
 
+        <el-input v-model="form.CEC" size="large" placeholder="请输入阳离子交换量0~20(cmol/kg)"
 
+          @input="handleInput('CEC', $event, 0, 20)"></el-input>
 
+      </el-form-item>
 
+      <!-- 水田模式下显示FeO -->
 
+      <el-form-item v-if="currentMode === 'paddy'" label="氧化铁(g/kg)" prop="FeO" :error="errorMessages.FeO" required>
 
+        <el-input v-model="form.FeO" size="large" placeholder="请输入氧化铁 0~50(g/kg)"
 
+          @input="handleInput('FeO', $event, 0, 50)"></el-input>
 
       </el-form-item>
 
       </el-form-item>
 
 
 
-      <el-button type="primary" @click="onSubmit" class="onSubmit">{{ $t('Calculation.calculateButton') }}</el-button>
 
+      <el-button type="primary" @click="onSubmit" class="onSubmit">计算</el-button>
 
 
 
-      <el-dialog v-model="dialogVisible" @close="onDialogClose" :close-on-click-modal="false" width="500px" align-center :title="$t('Calculation.resultTitle')">
 
+      <el-dialog v-model="dialogVisible" @close="onDialogClose" :close-on-click-modal="false" width="500px" align-center
 
+        title="计算结果">
 
         <span class="dialog-class">ΔpH: {{ result }}</span>
 
         <span class="dialog-class">ΔpH: {{ result }}</span>
 
         <template #footer>
 
         <template #footer>
 
-          <el-button @click="dialogVisible = false">{{ $t('Calculation.closeButton') }}</el-button>
 
+          <el-button @click="dialogVisible = false">关闭</el-button>
 
         </template>
 
         </template>
 
       </el-dialog>
 
       </el-dialog>
 
     </el-form>
 
     </el-form>
 
@@ -74,12 +59,12 @@
 
 </template>
 
 </template>
 
 
 
 <script setup lang="ts">
 
 <script setup lang="ts">
 
-import { reactive, ref, nextTick, onMounted } from "vue";
 
-import { ElMessage } from "element-plus";
 
-import { api5000 } from "../../../utils/request";
 
-import { useI18n } from 'vue-i18n';
 
+import { reactive, ref, nextTick, onMounted } from 'vue';
 
+import { ElMessage } from 'element-plus';
 
+import { api5000 } from '../../../utils/request'; // 使用api5000
 
 
 
-const { t } = useI18n();
 
+// 计算模式类型
 
+type CalculationMode = 'dry' | 'paddy';
 
 
 
 // 表单接口 - 根据文档修改
 
 // 表单接口 - 根据文档修改
 
 interface Form {
 
 interface Form {
 
@@ -89,6 +74,7 @@ interface Form {
 
   NO3: number | null;
 
   NO3: number | null;
 
   NH4: number | null;
 
   NH4: number | null;
 
   CEC: number | null;
 
   CEC: number | null;
 
+  FeO?: number | null; // 水田模式下的参数
 
 }
 
 }
 
 
 
 // 表单数据 - 根据文档修改
 
 // 表单数据 - 根据文档修改
 
@@ -99,43 +85,62 @@ const form = reactive<Form>({
 
   NO3: null,
 
   NO3: null,
 
   NH4: null,
 
   NH4: null,
 
   CEC: null,
 
   CEC: null,
 
+  FeO: null, // 水田模式下的参数
 
 });
 
 });
 
 
 
 const result = ref<number | null>(null);
 
 const result = ref<number | null>(null);
 
 const dialogVisible = ref(false);
 
 const dialogVisible = ref(false);
 
 const predictForm = ref<any>(null);
 
 const predictForm = ref<any>(null);
 
 const errorMessages = reactive<Record<string, string>>({
 
 const errorMessages = reactive<Record<string, string>>({
 
-  H: "",
 
-  Al: "",
 
-  OM: "",
 
-  NO3: "",
 
-  NH4: "",
 
-  CEC: "",
 
+  H: '',
 
+  Al: '',
 
+  OM: '',
 
+  NO3: '',
 
+  NH4: '',
 
+  CEC: '',
 
+  FeO: '', // 水田模式下的参数错误信息
 
 });
 
 });
 
 
 
+// 计算模式状态 - 默认旱地模式
 
+const currentMode = ref<CalculationMode>('dry');
 
+
 
+// 设置计算模式
 
+const setMode = (mode: CalculationMode) => {
 
+  if (currentMode.value === mode) return;
 
+  currentMode.value = mode;
 
+  // 切换模式时重置表单
 
+  Object.keys(form).forEach((key) => (form[key as keyof Form] = null));
 
+  Object.keys(errorMessages).forEach((key) => (errorMessages[key as keyof typeof errorMessages] = ''));
 
+  nextTick(() => {
 
+    if (predictForm.value) (predictForm.value as any).resetFields();
 
+  });
 
+};
 
+
 
 // 当前选中模型
 
 // 当前选中模型
 
-const selectedModelId = ref<number>(35); // 根据文档修改为 35
 
-const selectedModelName = ref<string>("反酸预测模型");
 
+const selectedModelId = ref<number>(35); // 根据文档修改为35
 
+const selectedModelName = ref<string>('反酸预测模型');
 
 
 
 // 输入校验
 
 // 输入校验
 
 const handleInput = (field: keyof Form, event: Event, min: number, max: number) => {
 
 const handleInput = (field: keyof Form, event: Event, min: number, max: number) => {
 
   const target = event.target as HTMLInputElement;
 
   const target = event.target as HTMLInputElement;
 
-  let value = target.value.replace(/[^0-9.]/g, "");
 
+  let value = target.value.replace(/[^0-9.]/g, '');
 
   (form as any)[field] = value ? parseFloat(value) : null;
 
   (form as any)[field] = value ? parseFloat(value) : null;
 
 
 
   if (!value) {
 
   if (!value) {
 
-    errorMessages[field] = "";
 
+    errorMessages[field] = '';
 
     return;
 
     return;
 
   }
 
   }
 
 
 
   const numValue = parseFloat(value);
 
   const numValue = parseFloat(value);
 
-  errorMessages[field] = (isNaN(numValue) || numValue < min || numValue > max)
 
-    ? t('Calculation.validationRange', { min, max })
 
-    : "";
 
+  errorMessages[field] =
 
+    isNaN(numValue) || numValue < min || numValue > max ? `输入值应在 ${min} 到 ${max} 之间且为有效数字` : '';
 
 };
 
 };
 
 
 
-const validateInput = (value: string, min: number, max: number): boolean => {
 
-  const numValue = parseFloat(value);
 
+const validateInput = (value: number | null | undefined, min: number, max: number): boolean => {
 
+  if (value === null || value === undefined) {
 
+    return false;
 
+  }
 
+  const numValue = typeof value === 'string' ? parseFloat(value) : value;
 
   return !isNaN(numValue) && numValue >= min && numValue <= max;
 
   return !isNaN(numValue) && numValue >= min && numValue <= max;
 
 };
 
 };
 
 
 
@@ -148,72 +153,94 @@ const fetchSelectedModel = async () => {
 
       selectedModelName.value = resp.data.data.model_name;
 
       selectedModelName.value = resp.data.data.model_name;
 
     }
 
     }
 
   } catch (error) {
 
   } catch (error) {
 
-    console.warn("获取当前模型失败，使用默认 model_id:", selectedModelId.value);
 
+    console.warn('获取当前模型失败，使用默认 model_id:', selectedModelId.value);
 
   }
 
   }
 
 };
 
 };
 
 
 
 // 计算方法 - 根据文档修改参数
 
 // 计算方法 - 根据文档修改参数
 
 const onSubmit = async () => {
 
 const onSubmit = async () => {
 
-  // 输入校验 - 根据新字段修改
 
-  const inputConfigs = [
 
-    { field: "H" as keyof Form, min: 0, max: 5 },
 
-    { field: "Al" as keyof Form, min: 0, max: 10},
 
-    { field: "OM" as keyof Form, min: 0, max: 35 },
 
-    { field: "NO3" as keyof Form, min: 0, max: 70 },
 
-    { field: "NH4" as keyof Form, min: 0, max: 20 },
 
-    { field: "CEC" as keyof Form, min: 0, max: 20 },
 
-  ];
 
+  // 根据当前模式设置需要验证的参数
 
+  let inputConfigs;
 
+  if (currentMode.value === 'dry') {
 
+    inputConfigs = [
 
+      { field: 'H' as keyof Form, min: 0, max: 5 },
 
+      { field: 'Al' as keyof Form, min: 0, max: 10 },
 
+      { field: 'OM' as keyof Form, min: 0, max: 35 },
 
+      { field: 'NO3' as keyof Form, min: 0, max: 70 },
 
+      { field: 'NH4' as keyof Form, min: 0, max: 20 },
 
+      { field: 'CEC' as keyof Form, min: 0, max: 20 },
 
+    ];
 
+  } else {
 
+    inputConfigs = [
 
+      { field: 'Al' as keyof Form, min: 0, max: 10 },
 
+      { field: 'OM' as keyof Form, min: 0, max: 35 },
 
+      { field: 'NO3' as keyof Form, min: 0, max: 70 },
 
+      { field: 'NH4' as keyof Form, min: 0, max: 20 },
 
+      { field: 'CEC' as keyof Form, min: 0, max: 20 },
 
+      { field: 'FeO' as keyof Form, min: 0, max: 50 },
 
+    ];
 
+  }
 
 
 
   let isValid = true;
 
   let isValid = true;
 
   for (const config of inputConfigs) {
 
   for (const config of inputConfigs) {
 
     const { field, min, max } = config;
 
     const { field, min, max } = config;
 
     const value = form[field];
 
     const value = form[field];
 
-    if (value === null || !validateInput(value.toString(), min, max)) {
 
+    if (!validateInput(value, min, max)) {
 
       isValid = false;
 
       isValid = false;
 
-      errorMessages[field] = t('Calculation.validationRange', { min, max });
 
+      errorMessages[field] = `输入值应在 ${min} 到 ${max} 之间且为有效数字`;
 
     } else {
 
     } else {
 
-      errorMessages[field] = "";
 
+      errorMessages[field] = '';
 
     }
 
     }
 
   }
 
   }
 
 
 
   if (!isValid) {
 
   if (!isValid) {
 
-    ElMessage.error(t('Calculation.validationError'));
 
+    ElMessage.error('输入值不符合要求，请检查输入');
 
     return;
 
     return;
 
   }
 
   }
 
 
 
-  // 根据文档修改参数结构
 
+  // 根据当前模式设置参数结构和model_id
 
   const data = {
 
   const data = {
 
-    model_id: selectedModelId.value,
 
-    parameters: {
 
-      H: form.H,
 
-      Al: form.Al,
 
-      OM: form.OM,
 
-      NO3: form.NO3,
 
-      NH4: form.NH4,
 
-      CEC: form.CEC,
 
-    },
 
+    model_id: currentMode.value === 'dry' ? 35 : 36,
 
+    parameters:
 
+      currentMode.value === 'dry'
 
+        ? {
 
+          H: form.H,
 
+          Al: form.Al,
 
+          OM: form.OM,
 
+          NO3: form.NO3,
 
+          NH4: form.NH4,
 
+          CEC: form.CEC,
 
+        }
 
+        : {
 
+          CEC: form.CEC,
 
+          NH4: form.NH4,
 
+          NO3: form.NO3,
 
+          Al: form.Al,
 
+          FeO: form.FeO,
 
+          OM: form.OM,
 
+        },
 
   };
 
   };
 
-  
+
 
   try {
 
   try {
 
     const response = await api5000.post('/predict', data, {
 
     const response = await api5000.post('/predict', data, {
 
       headers: {
 
       headers: {
 
-        "Content-Type": "application/json",
 
+        'Content-Type': 'application/json',
 
       },
 
       },
 
     });
 
     });
 
     if (response.data && response.data.result && response.data.result.length > 0) {
 
     if (response.data && response.data.result && response.data.result.length > 0) {
 
       result.value = parseFloat(response.data.result[0].toFixed(2));
 
       result.value = parseFloat(response.data.result[0].toFixed(2));
 
       dialogVisible.value = true;
 
       dialogVisible.value = true;
 
     } else {
 
     } else {
 
-      ElMessage.error(t('Calculation.invalidResult'));
 
+      ElMessage.error('未获取到有效的预测结果');
 
     }
 
     }
 
   } catch (error: any) {
 
   } catch (error: any) {
 
-    console.error("请求失败:", error);
 
+    console.error('请求失败:', error);
 
     if (error.response) {
 
     if (error.response) {
 
-      ElMessage.error(`${t('Calculation.requestFailed')}${error.response.status}`);
 
+      ElMessage.error(`请求失败，状态码: ${error.response.status}`);
 
     } else if (error.request) {
 
     } else if (error.request) {
 
-      ElMessage.error(t('Calculation.noResponse'));
 
+      ElMessage.error('请求发送成功，但没有收到响应');
 
     } else {
 
     } else {
 
-      ElMessage.error(`${t('Calculation.requestError')}${error.message}`);
 
+      ElMessage.error('请求过程中发生错误: ' + error.message);
 
     }
 
     }
 
   }
 
   }
 
 };
 
 };
 
@@ -222,7 +249,7 @@ const onSubmit = async () => {
 
 const onDialogClose = () => {
 
 const onDialogClose = () => {
 
   dialogVisible.value = false;
 
   dialogVisible.value = false;
 
   Object.keys(form).forEach((key) => (form[key as keyof Form] = null));
 
   Object.keys(form).forEach((key) => (form[key as keyof Form] = null));
 
-  Object.keys(errorMessages).forEach((key) => (errorMessages[key as keyof typeof errorMessages] = ""));
 
+  Object.keys(errorMessages).forEach((key) => (errorMessages[key as keyof typeof errorMessages] = ''));
 
   nextTick(() => {
 
   nextTick(() => {
 
     if (predictForm.value) (predictForm.value as any).resetFields();
 
     if (predictForm.value) (predictForm.value as any).resetFields();
 
   });
 
   });
 
@@ -242,6 +269,7 @@ onMounted(() => {
 
   background-color: #f0f5ff;
 
   background-color: #f0f5ff;
 
   border-radius: 10px;
 
   border-radius: 10px;
 
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 
+  transition: all 0.3s ease;
 
 }
 
 }
 
 
 
 .card-header {
 
 .card-header {
 
@@ -249,10 +277,63 @@ onMounted(() => {
 
   text-align: center;
 
   text-align: center;
 
   color: #333;
 
   color: #333;
 
   margin-bottom: 30px;
 
   margin-bottom: 30px;
 
+  display: flex;
 
+  justify-content: space-between;
 
+  align-items: center;
 
+}
 
+
 
+/* 模式切换按钮样式 */
 
+.mode-switch {
 
+  margin-left: auto;
 
+  display: flex;
 
+  gap: 10px;
 
+}
 
+
 
+.mode-button {
 
+  transition: all 0.3s ease;
 
+  font-weight: bold;
 
+  background-color: #cccccc;
 
+  border-color: #cccccc;
 
+  color: #666666;
 
+}
 
+
 
+.mode-button:hover {
 
+  background-color: #b3b3b3;
 
+  border-color: #b3b3b3;
 
+}
 
+
 
+.mode-button.active {
 
+  opacity: 1;
 
+  transform: scale(1.05);
 
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
 
+}
 
+
 
+.dry-mode.active {
 
+  background-color: #2e7d32;
 
+  border-color: #2e7d32;
 
+  color: white;
 
+}
 
+
 
+.dry-mode.active:hover {
 
+  background-color: #388e3c;
 
+  border-color: #388e3c;
 
+}
 
+
 
+.paddy-mode.active {
 
+  background-color: #0d47a1;
 
+  border-color: #0d47a1;
 
+  color: white;
 
+}
 
+
 
+.paddy-mode.active:hover {
 
+  background-color: #1565c0;
 
+  border-color: #1565c0;
 
 }
 
 }
 
 
 
 .el-form-item {
 
 .el-form-item {
 
   margin-bottom: 20px;
 
   margin-bottom: 20px;
 
+  transition: all 0.3s ease;
 
+  animation: fadeIn 0.5s ease;
 
 }
 
 }
 
 
 
 :deep(.el-form-item__label) {
 
 :deep(.el-form-item__label) {
 
@@ -260,6 +341,40 @@ onMounted(() => {
 
   color: #666;
 
   color: #666;
 
 }
 
 }
 
 
 
+/* 表单容器过渡效果 */
 
+.form-container {
 
+  transition: all 0.3s ease;
 
+}
 
+
 
+/* 旱地模式表单样式 */
 
+.dry-form {
 
+  --form-bg: rgba(240, 245, 255, 0.9);
 
+}
 
+
 
+/* 水田模式表单样式 */
 
+.paddy-form {
 
+  --form-bg: rgba(220, 240, 255, 0.9);
 
+}
 
+
 
+/* 表单淡入动画 */
 
+@keyframes fadeIn {
 
+  from {
 
+    opacity: 0;
 
+    transform: translateY(10px);
 
+  }
 
+
 
+  to {
 
+    opacity: 1;
 
+    transform: translateY(0);
 
+  }
 
+}
 
+
 
+/* 输入框焦点样式 */
 
+:deep(.el-input__inner:focus) {
 
+  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
 
+  border-color: #2196f3;
 
+}
 
+
 
 .model-info {
 
 .model-info {
 
   text-align: center;
 
   text-align: center;
 
   margin-bottom: 20px;
 
   margin-bottom: 20px;
 
@@ -290,7 +405,8 @@ onMounted(() => {
 
   display: flex;
 
   display: flex;
 
   justify-content: center;
 
   justify-content: center;
 
   align-items: center;
 
   align-items: center;
 
-  height: 100%; /* 确保容器占满对话框内容区域 */
 
+  height: 100%;
 
+  /* 确保容器占满对话框内容区域 */
 
   font-size: 22px;
 
   font-size: 22px;
 
 }
 
 }
 
 
 
@@ -299,4 +415,4 @@ onMounted(() => {
 
     --el-form-label-width: 100px;
 
     --el-form-label-width: 100px;
 
   }
 
   }
 
 }
 
 }
 
-</style>
 
+</style>

+ 335 - 147
src/views/User/acidModel/ModelIterationVisualization.vue
Прегледај датотеку 

@@ -1,11 +1,8 @@
 
-<script setup lang='ts'>
 
+<script setup lang="ts">
 
 import { ref, onMounted, nextTick, onUnmounted, watch } from 'vue';
 
 import { ref, onMounted, nextTick, onUnmounted, watch } from 'vue';
 
 import VueEcharts from 'vue-echarts';
 
 import VueEcharts from 'vue-echarts';
 
 import 'echarts';
 
 import 'echarts';
 
 import { api5000 } from '../../../utils/request';
 
 import { api5000 } from '../../../utils/request';
 
-import { useI18n } from 'vue-i18n';
 
-
 
-const { t } = useI18n()
 
 
 
 interface HistoryDataItem {
 
 interface HistoryDataItem {
 
   dataset_id: number;
 
   dataset_id: number;
 
@@ -35,36 +32,36 @@ interface ScatterDataResponse {
 
 const props = defineProps({
 
 const props = defineProps({
 
   showLineChart: {
 
   showLineChart: {
 
     type: Boolean,
 
     type: Boolean,
 
-    default: true
 
+    default: true,
 
   },
 
   },
 
   showInitScatterChart: {
 
   showInitScatterChart: {
 
     type: Boolean,
 
     type: Boolean,
 
-    default: true
 
+    default: true,
 
   },
 
   },
 
   showMidScatterChart: {
 
   showMidScatterChart: {
 
     type: Boolean,
 
     type: Boolean,
 
-    default: true
 
+    default: true,
 
   },
 
   },
 
   showFinalScatterChart: {
 
   showFinalScatterChart: {
 
     type: Boolean,
 
     type: Boolean,
 
-    default: true
 
+    default: true,
 
   },
 
   },
 
   lineChartPathParam: {
 
   lineChartPathParam: {
 
     type: String,
 
     type: String,
 
-    default: 'reduce'
 
+    default: 'reflux',
 
   },
 
   },
 
   initScatterModelId: {
 
   initScatterModelId: {
 
     type: Number,
 
     type: Number,
 
-    default: 6
 
+    default: 6,
 
   },
 
   },
 
   midScatterModelId: {
 
   midScatterModelId: {
 
     type: Number,
 
     type: Number,
 
-    default: 7
 
+    default: 7,
 
   },
 
   },
 
   finalScatterModelId: {
 
   finalScatterModelId: {
 
     type: Number,
 
     type: Number,
 
-    default: 17
 
-  }
 
+    default: 17,
 
+  },
 
 });
 
 });
 
 
 
 // 定义响应式变量
 
 // 定义响应式变量
 
@@ -84,29 +81,37 @@ const learningCurveImageUrl = ref('');
 
 const dataIncreaseCurveImageUrl = ref('');
 
 const dataIncreaseCurveImageUrl = ref('');
 
 const selectedModelType = ref('rf'); // 默认选择随机森林
 
 const selectedModelType = ref('rf'); // 默认选择随机森林
 
 
 
+// 新增：土地类型选择
 
+const selectedLandType = ref('dryland'); // 默认选择旱地
 
+
 
 // 模型类型选项
 
 // 模型类型选项
 
 const modelTypeOptions = [
 
 const modelTypeOptions = [
 
-  { label: t('ModelIteration.randomForest'), value: 'rf' },
 
-  { label: t('ModelIteration.xgboost'), value: 'xgbr' },
 
-  { label: t('ModelIteration.gradientBoosting'), value: 'gbst' },
 
+  { label: '随机森林', value: 'rf' },
 
+  { label: 'XGBoost', value: 'xgbr' },
 
+  { label: '梯度提升', value: 'gbst' },
 
 ];
 
 ];
 
 
 
+// 土地类型验证
 
+const validateLandType = (landType: string): boolean => {
 
+  return ['dryland', 'paddy_field'].includes(landType);
 
+};
 
+
 
 // 计算数据范围的函数
 
 // 计算数据范围的函数
 
 const calculateDataRange = (data: [number, number][]) => {
 
 const calculateDataRange = (data: [number, number][]) => {
 
-  const xValues = data.map(item => item[0]);
 
-  const yValues = data.map(item => item[1]);
 
+  const xValues = data.map((item) => item[0]);
 
+  const yValues = data.map((item) => item[1]);
 
   return {
 
   return {
 
     xMin: Math.min(...xValues),
 
     xMin: Math.min(...xValues),
 
     xMax: Math.max(...xValues),
 
     xMax: Math.max(...xValues),
 
     yMin: Math.min(...yValues),
 
     yMin: Math.min(...yValues),
 
-    yMax: Math.max(...yValues)
 
+    yMax: Math.max(...yValues),
 
   };
 
   };
 
 };
 
 };
 
 
 
 // 获取折线图数据
 
 // 获取折线图数据
 
 const fetchLineData = async () => {
 
 const fetchLineData = async () => {
 
   try {
 
   try {
 
-    const response = await api5000.get<HistoryDataResponse>(`/get-model-history/${props.lineChartPathParam}`);    
+    const response = await api5000.get<HistoryDataResponse>(`/get-model-history/${props.lineChartPathParam}`);
 
     const data = response.data;
 
     const data = response.data;
 
 
 
     const timestamps = data.timestamps;
 
     const timestamps = data.timestamps;
 
@@ -120,36 +125,36 @@ const fetchLineData = async () => {
 
       performanceScores[item.model_name].push(score);
 
       performanceScores[item.model_name].push(score);
 
     });
 
     });
 
 
 
-    const series = Object.keys(performanceScores).map(modelName => ({
 
+    const series = Object.keys(performanceScores).map((modelName) => ({
 
       name: modelName,
 
       name: modelName,
 
       type: 'line',
 
       type: 'line',
 
-      data: performanceScores[modelName]
 
+      data: performanceScores[modelName],
 
     }));
 
     }));
 
 
 
     ecLineOption.value = {
 
     ecLineOption.value = {
 
       tooltip: {
 
       tooltip: {
 
-        trigger: 'axis'
 
+        trigger: 'axis',
 
       },
 
       },
 
       legend: {
 
       legend: {
 
-        data: Object.keys(performanceScores)
 
+        data: Object.keys(performanceScores),
 
       },
 
       },
 
       grid: {
 
       grid: {
 
-        left: '3%',
 
-        right: '17%',
 
+        left: '22%',
 
+        right: '22%',
 
         bottom: '3%',
 
         bottom: '3%',
 
-        containLabel: true
 
+        containLabel: true,
 
       },
 
       },
 
       xAxis: {
 
       xAxis: {
 
-        name: t('ModelIteration.modelIteration'),
 
+        name: '模型迭代',
 
         type: 'category',
 
         type: 'category',
 
         boundaryGap: false,
 
         boundaryGap: false,
 
-        data: timestamps.map((_, index) => `${index + 1}代`)
 
+        data: timestamps.map((_, index) => `${index + 1}代`),
 
       },
 
       },
 
       yAxis: {
 
       yAxis: {
 
         name: 'Score (R^2)',
 
         name: 'Score (R^2)',
 
-        type: 'value'
 
+        type: 'value',
 
       },
 
       },
 
-      series
 
+      series,
 
     };
 
     };
 
     console.log('ecLineOption updated:', ecLineOption.value);
 
     console.log('ecLineOption updated:', ecLineOption.value);
 
   } catch (error) {
 
   } catch (error) {
 
@@ -163,7 +168,10 @@ const fetchScatterData = async (modelId: number, optionRef: any) => {
 
     const response = await api5000.get<ScatterDataResponse>(`/model-scatter-data/${modelId}`);
 
     const response = await api5000.get<ScatterDataResponse>(`/model-scatter-data/${modelId}`);
 
     const data = response.data;
 
     const data = response.data;
 
 
 
-    const scatterData = data.scatter_data;
 
+    // 将数据点格式化为两位小数，并明确指定类型为[number, number][]
 
+    const scatterData: [number, number][] = data.scatter_data.map(
 
+      ([x, y]) => [parseFloat(x.toFixed(2)), parseFloat(y.toFixed(2))] as [number, number]
 
+    );
 
     const range = calculateDataRange(scatterData);
 
     const range = calculateDataRange(scatterData);
 
     const padding = 0.1;
 
     const padding = 0.1;
 
     const xMin = range.xMin - Math.abs(range.xMin * padding);
 
     const xMin = range.xMin - Math.abs(range.xMin * padding);
 
@@ -177,29 +185,36 @@ const fetchScatterData = async (modelId: number, optionRef: any) => {
 
       tooltip: {
 
       tooltip: {
 
         trigger: 'axis',
 
         trigger: 'axis',
 
         axisPointer: {
 
         axisPointer: {
 
-          type: 'cross'
 
-        }
 
+          type: 'cross',
 
+        },
 
+        formatter: function (params: any) {
 
+          if (params.length > 0) {
 
+            const data = params[0].data;
 
+            return `True Values: ${data[0]}<br/>Predicted Values: ${data[1]}`;
 
+          }
 
+          return '';
 
+        },
 
       },
 
       },
 
       legend: {
 
       legend: {
 
-        data: ['True vs Predicted']
 
+        data: ['True vs Predicted'],
 
       },
 
       },
 
       grid: {
 
       grid: {
 
-        left: '3%',
 
-        right: '22%',
 
+        left: '15%',
 
+        right: '15%',
 
         bottom: '3%',
 
         bottom: '3%',
 
-        containLabel: true
 
+        containLabel: true,
 
       },
 
       },
 
       xAxis: {
 
       xAxis: {
 
         name: 'True Values',
 
         name: 'True Values',
 
         type: 'value',
 
         type: 'value',
 
-        min: min,
 
-        max: max
 
+        min: parseFloat(min.toFixed(2)),
 
+        max: parseFloat(max.toFixed(2)),
 
       },
 
       },
 
       yAxis: {
 
       yAxis: {
 
         name: 'Predicted Values',
 
         name: 'Predicted Values',
 
         type: 'value',
 
         type: 'value',
 
         min: parseFloat(min.toFixed(2)),
 
         min: parseFloat(min.toFixed(2)),
 
-        max: parseFloat(max.toFixed(2))
 
+        max: parseFloat(max.toFixed(2)),
 
       },
 
       },
 
       series: [
 
       series: [
 
         {
 
         {
 
@@ -209,23 +224,23 @@ const fetchScatterData = async (modelId: number, optionRef: any) => {
 
           symbolSize: 10,
 
           symbolSize: 10,
 
           itemStyle: {
 
           itemStyle: {
 
             color: '#1f77b4',
 
             color: '#1f77b4',
 
-            opacity: 0.7
 
-          }
 
+            opacity: 0.7,
 
+          },
 
         },
 
         },
 
         {
 
         {
 
           name: 'Trendline',
 
           name: 'Trendline',
 
           type: 'line',
 
           type: 'line',
 
           data: [
 
           data: [
 
             [min, min],
 
             [min, min],
 
-            [max, max]
 
+            [max, max],
 
           ],
 
           ],
 
           lineStyle: {
 
           lineStyle: {
 
             type: 'dashed',
 
             type: 'dashed',
 
             color: '#ff7f0e',
 
             color: '#ff7f0e',
 
-            width: 2
 
-          }
 
-        }
 
-      ]
 
+            width: 2,
 
+          },
 
+        },
 
+      ],
 
     };
 
     };
 
   } catch (error) {
 
   } catch (error) {
 
     console.error('获取散点图数据失败:', error);
 
     console.error('获取散点图数据失败:', error);
 
@@ -235,14 +250,21 @@ const fetchScatterData = async (modelId: number, optionRef: any) => {
 
 // 新增：获取学习曲线图片
 
 // 新增：获取学习曲线图片
 
 const fetchLearningCurveImage = async () => {
 
 const fetchLearningCurveImage = async () => {
 
   try {
 
   try {
 
+    // 验证土地类型参数
 
+    if (!validateLandType(selectedLandType.value)) {
 
+      console.error('无效的土地类型参数:', selectedLandType.value);
 
+      return;
 
+    }
 
+
 
     const response = await api5000.get('/latest-learning-curve', {
 
     const response = await api5000.get('/latest-learning-curve', {
 
       params: {
 
       params: {
 
-        data_type: 'reduce',
 
-        model_type: selectedModelType.value
 
+        data_type: 'reflux',
 
+        model_type: selectedModelType.value,
 
+        land_type: selectedLandType.value,
 
       },
 
       },
 
-      responseType: 'blob'
 
+      responseType: 'blob',
 
     });
 
     });
 
-    
+
 
     const blob = new Blob([response.data], { type: 'image/png' });
 
     const blob = new Blob([response.data], { type: 'image/png' });
 
     learningCurveImageUrl.value = URL.createObjectURL(blob);
 
     learningCurveImageUrl.value = URL.createObjectURL(blob);
 
   } catch (error) {
 
   } catch (error) {
 
@@ -253,13 +275,20 @@ const fetchLearningCurveImage = async () => {
 
 // 新增：获取数据增长曲线图片
 
 // 新增：获取数据增长曲线图片
 
 const fetchDataIncreaseCurveImage = async () => {
 
 const fetchDataIncreaseCurveImage = async () => {
 
   try {
 
   try {
 
+    // 验证土地类型参数
 
+    if (!validateLandType(selectedLandType.value)) {
 
+      console.error('无效的土地类型参数:', selectedLandType.value);
 
+      return;
 
+    }
 
+
 
     const response = await api5000.get('/latest-data-increase-curve', {
 
     const response = await api5000.get('/latest-data-increase-curve', {
 
       params: {
 
       params: {
 
-        data_type: 'reduce',
 
+        data_type: 'reflux',
 
+        land_type: selectedLandType.value,
 
       },
 
       },
 
-      responseType: 'blob'
 
+      responseType: 'blob',
 
     });
 
     });
 
-    
+
 
     const blob = new Blob([response.data], { type: 'image/png' });
 
     const blob = new Blob([response.data], { type: 'image/png' });
 
     dataIncreaseCurveImageUrl.value = URL.createObjectURL(blob);
 
     dataIncreaseCurveImageUrl.value = URL.createObjectURL(blob);
 
   } catch (error) {
 
   } catch (error) {
 
@@ -273,6 +302,14 @@ watch(selectedModelType, () => {
 
   fetchDataIncreaseCurveImage();
 
   fetchDataIncreaseCurveImage();
 
 });
 
 });
 
 
 
+// 监听土地类型变化，重新获取图片和散点图数据
 
+watch(selectedLandType, () => {
 
+  fetchLearningCurveImage();
 
+  fetchDataIncreaseCurveImage();
 
+  const modelId = selectedLandType.value === 'dryland' ? 35 : 36;
 
+  fetchScatterData(modelId, ecInitScatterOption);
 
+});
 
+
 
 // 定义调整图表大小的函数
 
 // 定义调整图表大小的函数
 
 const resizeCharts = () => {
 
 const resizeCharts = () => {
 
   nextTick(() => {
 
   nextTick(() => {
 
@@ -285,7 +322,10 @@ const resizeCharts = () => {
 
 
 
 onMounted(async () => {
 
 onMounted(async () => {
 
   if (props.showLineChart) await fetchLineData();
 
   if (props.showLineChart) await fetchLineData();
 
-  if (props.showInitScatterChart) await fetchScatterData(props.initScatterModelId, ecInitScatterOption);
 
+
 
+  // 根据土地类型选择初始散点图模型ID
 
+  const initialModelId = selectedLandType.value === 'dryland' ? 35 : 36;
 
+  if (props.showInitScatterChart) await fetchScatterData(initialModelId, ecInitScatterOption);
 
   if (props.showMidScatterChart) await fetchScatterData(props.midScatterModelId, ecMidScatterOption);
 
   if (props.showMidScatterChart) await fetchScatterData(props.midScatterModelId, ecMidScatterOption);
 
   if (props.showFinalScatterChart) await fetchScatterData(props.finalScatterModelId, ecFinalScatterOption);
 
   if (props.showFinalScatterChart) await fetchScatterData(props.finalScatterModelId, ecFinalScatterOption);
 
 
 
@@ -303,7 +343,7 @@ onMounted(async () => {
 
 // 组件卸载时移除事件监听器
 
 // 组件卸载时移除事件监听器
 
 onUnmounted(() => {
 
 onUnmounted(() => {
 
   window.removeEventListener('resize', resizeCharts);
 
   window.removeEventListener('resize', resizeCharts);
 
-  
+
 
   // 清理Blob URL
 
   // 清理Blob URL
 
   if (learningCurveImageUrl.value) {
 
   if (learningCurveImageUrl.value) {
 
     URL.revokeObjectURL(learningCurveImageUrl.value);
 
     URL.revokeObjectURL(learningCurveImageUrl.value);
 
@@ -316,30 +356,26 @@ onUnmounted(() => {
 
 
 
 <template>
 
 <template>
 
   <div class="container">
 
   <div class="container">
 
-    <template v-if="showInitScatterChart">
 
-      <!-- 散点图 -->
 
-      <h2 class="chart-header">{{ $t('ModelIteration.scatterPlotTitle') }}</h2>
 
-      <div class="chart-container">
 
-        <VueEcharts :option="ecInitScatterOption" ref="ecInitScatterOptionRef" />
 
+    <!-- 主标题区域，包含标题和土地类型按钮组 -->
 
+    <div class="main-title-row">
 
+      <h1 class="main-title">模型迭代可视化</h1>
 
+      <div class="land-type-buttons">
 
+        <button :class="['land-button', 'dryland-button', selectedLandType === 'dryland' ? 'active' : '']"
 
+          @click="selectedLandType = 'dryland'">
 
+          旱地
 
+        </button>
 
+        <button :class="['land-button', 'paddy-button', selectedLandType === 'paddy_field' ? 'active' : '']"
 
+          @click="selectedLandType = 'paddy_field'">
 
+          水田
 
+        </button>
 
       </div>
 
       </div>
 
-    </template>
 
+    </div>
 
 
 
-    <h2 class="chart-header">{{ $t('ModelIteration.modelPerformanceAnalysis') }}</h2>
 
-    <!-- 模型性能分析部分 -->
 
-    <div class="analysis-section">
 
-       <!-- 数据增长曲线模块 -->
 
-      <div class="chart-module">
 
-        <h2 class="chart-header">{{ $t('ModelIteration.dataIncreaseCurve') }}</h2>
 
-        <div class="image-chart-item">
 
-          <div class="image-container">
 
-            <img v-if="dataIncreaseCurveImageUrl" :src="dataIncreaseCurveImageUrl" :alt="$t('ModelIteration.dataIncreaseCurve')" >
 
-            <div v-else class="image-placeholder">{{ $t('ModelIteration.loading') }}</div>
 
-          </div>
 
-        </div>
 
-      </div>
 
-      <!-- 学习曲线模块 -->
 
-      <div class="chart-module">
 
-        <h2 class="chart-header">{{ $t('ModelIteration.learningCurve') }}</h2>
 
+    <!-- 学习曲线模块 - 移到最上方 -->
 
+    <div class="chart-module">
 
+      <!-- 学习曲线标题和模型选择器在同一行 -->
 
+      <div class="chart-title-row">
 
+        <h2 class="chart-header">学习曲线</h2>
 
         <div class="model-selector-wrapper">
 
         <div class="model-selector-wrapper">
 
           <select v-model="selectedModelType" class="model-select">
 
           <select v-model="selectedModelType" class="model-select">
 
             <option v-for="option in modelTypeOptions" :key="option.value" :value="option.value">
 
             <option v-for="option in modelTypeOptions" :key="option.value" :value="option.value">
 
@@ -347,14 +383,35 @@ onUnmounted(() => {
 
             </option>
 
             </option>
 
           </select>
 
           </select>
 
         </div>
 
         </div>
 
-        <div class="image-chart-item">
 
-          <div class="image-container">
 
-            <img v-if="learningCurveImageUrl" :src="learningCurveImageUrl" :alt="$t('ModelIteration.learningCurve')" >
 
-            <div v-else class="image-placeholder">{{ $t('ModelIteration.loading') }}</div>
 
-          </div>
 
+      </div>
 
+      <div class="chart-container">
 
+        <div class="image-container">
 
+          <img v-if="learningCurveImageUrl" :src="learningCurveImageUrl" alt="学习曲线" />
 
+          <div v-else class="image-placeholder">加载中...</div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+
 
+    <!-- 数据增长曲线模块 - 移到中间 -->
 
+    <div class="chart-module">
 
+      <h2 class="chart-header">数据增长曲线</h2>
 
+      <div class="chart-container">
 
+        <div class="image-container">
 
+          <img v-if="dataIncreaseCurveImageUrl" :src="dataIncreaseCurveImageUrl" alt="数据增长曲线" />
 
+          <div v-else class="image-placeholder">加载中...</div>
 
         </div>
 
         </div>
 
       </div>
 
       </div>
 
     </div>
 
     </div>
 
+
 
+    <!-- 散点图模块 - 移到最下方 -->
 
+    <template v-if="showInitScatterChart">
 
+      <div class="chart-module">
 
+        <h2 class="chart-header">散点图</h2>
 
+        <div class="chart-container">
 
+          <VueEcharts :option="ecInitScatterOption" ref="ecInitScatterOptionRef" />
 
+        </div>
 
+      </div>
 
+    </template>
 
   </div>
 
   </div>
 
 </template>
 
 </template>
 
 
 
@@ -363,19 +420,37 @@ onUnmounted(() => {
 
   display: flex;
 
   display: flex;
 
   flex-direction: column;
 
   flex-direction: column;
 
   align-items: center;
 
   align-items: center;
 
-  justify-content: center;
 
   width: 100%;
 
   width: 100%;
 
-  height: 100%;
 
-  gap: 20px;
 
+  gap: 30px;
 
   color: #000;
 
   color: #000;
 
   background-color: white;
 
   background-color: white;
 
+  padding: 20px;
 
+}
 
+
 
+/* 主标题样式 */
 
+.main-title {
 
+  font-size: 28px;
 
+  font-weight: bold;
 
+  color: #2c3e50;
 
+  text-align: center;
 
+  margin: 0;
 
 }
 
 }
 
 
 
 .chart-header {
 
 .chart-header {
 
   font-size: 18px;
 
   font-size: 18px;
 
   font-weight: bold;
 
   font-weight: bold;
 
-  margin-bottom: 10px;
 
   color: #2c3e50;
 
   color: #2c3e50;
 
+  margin: 0;
 
+}
 
+
 
+/* 图表标题行 - 用于放置标题和模型选择器 */
 
+.chart-title-row {
 
+  display: flex;
 
+  justify-content: center;
 
+  align-items: center;
 
+  width: 100%;
 
+  margin-bottom: 10px;
 
+  gap: 20px;
 
 }
 
 }
 
 
 
 .sub-title {
 
 .sub-title {
 
@@ -383,42 +458,45 @@ onUnmounted(() => {
 
   font-weight: 700;
 
   font-weight: 700;
 
 }
 
 }
 
 
 
-.chart-container {
 
+.chart-module {
 
   width: 85%;
 
   width: 85%;
 
+  display: flex;
 
+  flex-direction: column;
 
+  align-items: center;
 
+  gap: 10px;
 
+}
 
+
 
+.chart-container {
 
+  width: 100%;
 
   height: 450px;
 
   height: 450px;
 
-  margin: 0 auto;
 
-  margin-bottom: 20px;
 
   background-color: white;
 
   background-color: white;
 
   border-radius: 8px;
 
   border-radius: 8px;
 
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 
+  display: flex;
 
+  flex-direction: column;
 
+  overflow: hidden;
 
 }
 
 }
 
 
 
 .VueEcharts {
 
 .VueEcharts {
 
   width: 100%;
 
   width: 100%;
 
   height: 100%;
 
   height: 100%;
 
-  margin: 0 10px;
 
   background-color: white;
 
   background-color: white;
 
 }
 
 }
 
 
 
-/* 新增：图片图表样式 */
 
-.image-charts-section {
 
-  width: 90%;
 
-  margin: 30px auto;
 
-  padding: 20px;
 
+/* 图片容器样式 - 与散点图尺寸一致 */
 
+.image-container {
 
+  width: 100%;
 
+  height: 450px;
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
   background-color: #f8f9fa;
 
   background-color: #f8f9fa;
 
-  border-radius: 8px;
 
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 
+  overflow: hidden;
 
 }
 
 }
 
 
 
-.model-type-selector {
 
-  margin: 20px 0;
 
-  text-align: center;
 
-}
 
-
 
-.model-type-selector label {
 
-  margin-right: 10px;
 
-  font-weight: bold;
 
-  color: #2c3e50;
 
+/* 模型选择器样式 */
 
+.model-selector-wrapper {
 
+  margin: 0;
 
 }
 
 }
 
 
 
 .model-select {
 
 .model-select {
 
@@ -427,39 +505,15 @@ onUnmounted(() => {
 
   border-radius: 4px;
 
   border-radius: 4px;
 
   background-color: white;
 
   background-color: white;
 
   font-size: 14px;
 
   font-size: 14px;
 
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 
+  cursor: pointer;
 
+  transition: border-color 0.3s ease;
 
 }
 
 }
 
 
 
-.image-charts-container {
 
-  display: grid;
 
-  grid-template-columns: 1fr 1fr;
 
-  gap: 30px;
 
-  margin-top: 20px;
 
-}
 
-
 
-.image-chart-item {
 
-  background-color: white;
 
-  padding: 20px;
 
-  border-radius: 8px;
 
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 
-}
 
-
 
-.image-chart-title {
 
-  font-size: 16px;
 
-  font-weight: bold;
 
-  margin-bottom: 15px;
 
-  color: #2c3e50;
 
-  text-align: center;
 
-}
 
-
 
-.image-container {
 
-  width: 100%;
 
-  height: 400px;
 
-  display: flex;
 
-  align-items: center;
 
-  justify-content: center;
 
-  background-color: #f8f9fa;
 
-  border-radius: 4px;
 
-  overflow: hidden;
 
+.model-select:focus {
 
+  outline: none;
 
+  border-color: #3498db;
 
+  box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
 
 }
 
 }
 
 
 
 .image-container img {
 
 .image-container img {
 
@@ -494,19 +548,153 @@ onUnmounted(() => {
 
   color: #333;
 
   color: #333;
 
 }
 
 }
 
 
 
+/* 土地类型按钮样式 */
 
+.main-title-row {
 
+  display: flex;
 
+  justify-content: space-between;
 
+  align-items: center;
 
+  width: 100%;
 
+  margin-bottom: 20px;
 
+  flex-wrap: wrap;
 
+  gap: 10px;
 
+}
 
+
 
+.land-type-buttons {
 
+  display: flex;
 
+  gap: 10px;
 
+}
 
+
 
+.land-button {
 
+  padding: 8px 16px;
 
+  border: none;
 
+  border-radius: 4px;
 
+  font-size: 14px;
 
+  font-weight: 500;
 
+  cursor: pointer;
 
+  transition: all 0.3s ease;
 
+}
 
+
 
+.dryland-button {
 
+  background-color: #f0f0f0;
 
+  color: #666;
 
+  border: 1px solid #ddd;
 
+}
 
+
 
+.dryland-button.active {
 
+  background-color: #d4edda;
 
+  color: #155724;
 
+  border-color: #c3e6cb;
 
+}
 
+
 
+.paddy-button {
 
+  background-color: #f0f0f0;
 
+  color: #666;
 
+  border: 1px solid #ddd;
 
+}
 
+
 
+.paddy-button.active {
 
+  background-color: #cce7ff;
 
+  color: #004085;
 
+  border-color: #b3d7ff;
 
+}
 
+
 
+.land-button:not(.active) {
 
+  background-color: #e9ecef;
 
+  color: #6c757d;
 
+}
 
+
 
+/* 主标题行样式 */
 
+.main-title-row {
 
+  display: flex;
 
+  justify-content: center;
 
+  align-items: center;
 
+  width: 85%;
 
+  margin-bottom: 10px;
 
+  flex-wrap: wrap;
 
+  gap: 15px;
 
+}
 
+
 
+/* 土地类型按钮组样式 */
 
+.land-type-buttons {
 
+  display: flex;
 
+  gap: 10px;
 
+}
 
+
 
+.land-button {
 
+  padding: 10px 20px;
 
+  border: 2px solid transparent;
 
+  border-radius: 25px;
 
+  font-size: 16px;
 
+  font-weight: 600;
 
+  cursor: pointer;
 
+  transition: all 0.3s ease;
 
+  outline: none;
 
+}
 
+
 
+.dryland-button {
 
+  background-color: #8B4513;
 
+  color: white;
 
+}
 
+
 
+.paddy-button {
 
+  background-color: #1E90FF;
 
+  color: white;
 
+}
 
+
 
+.land-button:not(.active) {
 
+  background-color: #ddd;
 
+  color: #666;
 
+}
 
+
 
+.land-button.active {
 
+  border-color: #333;
 
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
 
+}
 
+
 
+.land-button:hover:not(.active) {
 
+  background-color: #ccc;
 
+  color: #333;
 
+}
 
+
 
 /* 响应式设计 */
 
 /* 响应式设计 */
 
 @media (max-width: 768px) {
 
 @media (max-width: 768px) {
 
-  .image-charts-container {
 
-    grid-template-columns: 1fr;
 
+  .container {
 
+    padding: 10px;
 
+    gap: 20px;
 
   }
 
   }
 
-  
-  .image-container {
 
-    height: 300px;
 
+
 
+  .main-title {
 
+    font-size: 24px;
 
   }
 
   }
 
-  
-  .chart-container {
 
+
 
+  .chart-module {
 
     width: 95%;
 
     width: 95%;
 
+  }
 
+
 
+  .main-title-row {
 
+    width: 95%;
 
+    flex-direction: column;
 
+    align-items: flex-start;
 
+    gap: 10px;
 
+  }
 
+
 
+  .chart-container,
 
+  .image-container {
 
     height: 400px;
 
     height: 400px;
 
   }
 
   }
 
+
 
+  .chart-title-row {
 
+    flex-direction: column;
 
+    align-items: flex-start;
 
+    gap: 10px;
 
+  }
 
+
 
+  .model-selector-wrapper {
 
+    width: 100%;
 
+  }
 
+
 
+  .model-select {
 
+    width: 100%;
 
+  }
 
 }
 
 }
 
-</style>
 
+</style>