反酸和降酸页面补充

src/views/User/HmOutFlux/atmosDeposition/airSampleData.vue

@@ -67,38 +67,7 @@
       </div>
     </div>
     
-<<<<<<< HEAD
   
-=======
-   <div class="calculation-selector">
-    <span class="selector-title"><!--i18n:atmosDeposition.airSampleData.button1-->{{ $t("atmosDeposition.airSampleData.button1") }}</span>
-    <select 
-      v-model="calculationMethod" 
-      class="calculation-select"
-    >
-      <option value="weight"><!--i18n:atmosDeposition.airSampleData.button2-->{{ $t("atmosDeposition.airSampleData.button2") }}</option>
-      <option value="volume"><!--i18n:atmosDeposition.airSampleData.button3-->{{ $t("atmosDeposition.airSampleData.button3") }}</option>
-    </select>
-  </div>
-
-   <div class="point-map">
-    <div class="component-title"><!--i18n:atmosDeposition.airSampleData.MapTitle-->{{ $t("atmosDeposition.airSampleData.MapTitle") }}</div>
-    <div class="map-holder">
-      <atmsamplemap :calculation-method="calculationMethod"/>
-     </div>
-   </div>
-
-  
-   <div class="point-line">
-    <div class="component-title"><!--i18n:atmosDeposition.airSampleData.LineTitle-->{{ $t("atmosDeposition.airSampleData.LineTitle") }}</div>
-    <AirsampleLine :calculation-method="calculationMethod"/>
-   </div>
-
-   <div>
-    <div class="component-title"><!--i18n:atmosDeposition.airSampleData.ChartTitle-->{{ $t("atmosDeposition.airSampleData.ChartTitle") }}</div>
-    <AirsampleChart :calculation-method="calculationMethod"/>
-   </div>
->>>>>>> origin/lili
   </div>
 </template>
 

src/views/User/HmOutFlux/atmosDeposition/heavyMetalEnterprise.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="page-container">
-<<<<<<< HEAD
     <!-- 页面标题区域 -->
     <div class="header-section">
       <div class="header-content">
@@ -67,26 +66,6 @@
         </div>
       </div>
     </div>
-=======
-    
-   <div class="point-map">
-    <div class="component-title"><!--i18n:atmosDeposition.heavyMetalEnterprise.MapTitle-->{{ $t("atmosDeposition.heavyMetalEnterprise.MapTitle")}}</div>
-    <div class="map-holder">
-      <atmcompanymap/>
-    </div>
-   </div>
-
-  
-   <div class="point-line">
-    <div class="component-title"><!--i18n:atmosDeposition.heavyMetalEnterprise.LineTitle-->{{ $t("atmosDeposition.heavyMetalEnterprise.LineTitle")}}</div>
-    <atmcompanyline/>
-   </div>
-
-   <div>
-    <div class="component-title"><!--i18n:atmosDeposition.heavyMetalEnterprise.ChartTitle-->{{ $t("atmosDeposition.heavyMetalEnterprise.ChartTitle")}}</div>
-    <HeavyMetalEnterprisechart/>
-   </div>
->>>>>>> origin/lili
   </div>
 </template>
 

src/views/User/HmOutFlux/irrigationWater/crossSection.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="cross-container">
-<<<<<<< HEAD
     <!-- 页面标题 -->
     <div class="section-header">
       <div class="section-icon">📊</div>
@@ -84,19 +83,6 @@
         </div>
       </div>
     </div>
-=======
-    <h3 class="table-title">{{ $t("irrigationwater.crosssection.crosssectionMapTitle") }}</h3>
-    <div class="map-holder"><crosssectionmap/></div>
-
-     <h3 class="table-title">{{ $t("irrigationwater.crosssection.crosssectionLineTitle") }}</h3>
-     <div><CrossSectionSamplelineData/></div>
-
-     <h3 class="table-title"> {{ $t("irrigationwater.crosssection.crosssectionRiverChartTitle") }}</h3>
-     <div><CrossSetionData1/></div>
-
-     <h3 class="table-title">{{ $t("irrigationwater.crosssection.crosssectionCityChartTitle") }}</h3>
-     <div><CrossSetionData2/></div>
->>>>>>> origin/lili
   </div>
 </template>
 

src/views/User/HmOutFlux/irrigationWater/irriWaterSampleData.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="page-container">
-<<<<<<< HEAD
     <!-- 页眉设计 -->
     <div class="header">
       <div class="header-content">
@@ -57,28 +56,6 @@
         </div>
       </div>
     </div>
-=======
-    
-  <div class="main-content">
-   <div class="point-map">
-    <div class="component-title">{{ $t('irrigationwater.point.pointMapTitle') }}</div>
-    <div class="map-holder">
-        <irrwatermap/>
-    </div>
-   </div>
-
-  
-   <div class="point-line">
-    <div class="component-title">{{ $t('irrigationwater.point.pointLineTitle') }}</div>
-    <Waterdataline/>
-   </div>
-
-   <div class="charts-line">
-    <div class="component-title">{{ $t('irrigationwater.point.pointChartTitle') }}</div>
-    <Waterassaydata2/>
-   </div>
-  </div>
->>>>>>> origin/lili
   </div>
 </template>
 

src/views/User/HmOutFlux/irrigationWater/samplingMethodDevice1.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="sampling-process">
-<<<<<<< HEAD
     <!-- 采样容器与过程部分 -->
     <div class="section-container">
       <div class="section-header">
@@ -106,54 +105,6 @@
             </div>
           </div>
         </div>
-=======
-    <!--i18n:irrigationwaterMethods.title1-->
-    <h2>{{ $t("irrigationwater.irrigationwaterMethods.title1") }}</h2>
-    <!--i18n:irrigationwaterMethods.content1-->
-    <p>
-      {{ $t("irrigationwater.irrigationwaterMethods.content1") }}
-    </p>
-
-    <div class="image-row">
-      <div class="image-container">
-        <el-image :src="image1" alt="采样容器" class="sampling-image"></el-image>
-        <!--i18n:irrigationwaterMethods.photo1-->
-        <p class="image-caption">{{ $t("irrigationwater.irrigationwaterMethods.photo1") }}</p>
-      </div>
-      <div class="image-container">
-        <el-image :src="image2" alt="采样现场" class="sampling-image"></el-image>
-        <!--i18n:irrigationwaterMethods.photo2-->
-        <p class="image-caption">{{ $t("irrigationwater.irrigationwaterMethods.photo2") }}</p>
-      </div>
-      <div class="image-container">
-        <el-image :src="image3" alt="灌溉水采样设备" class="sampling-image"></el-image>
-        <!--i18n:irrigationwaterMethods.photo3-->
-        <p class="image-caption">{{ $t("irrigationwater.irrigationwaterMethods.photo3") }}</p>
-      </div>
-    </div>
-    <!--i18n:irrigationwaterMethods.title2-->
-    <h2>{{ $t("irrigationwater.irrigationwaterMethods.title2") }}</h2>
-    <!--i18n:irrigationwaterMethods.content2-->
-    <p>
-      {{ $t("irrigationwater.irrigationwaterMethods.content2") }}
-    </p>
-
-    <div class="image-row">
-      <div class="image-container">
-        <el-image :src="fieldImage1" alt="工作人员采样现场" class="sampling-image"></el-image>
-        <!--i18n:irrigationwaterMethods.photo4-->
-        <p class="image-caption">{{ $t("irrigationwater.irrigationwaterMethods.photo4") }}</p>
-      </div>
-      <div class="image-container">
-        <el-image :src="fieldImage2" alt="工作人员采样现场" class="sampling-image"></el-image>
-        <!--i18n:irrigationwaterMethods.photo5-->
-        <p class="image-caption">{{ $t("irrigationwater.irrigationwaterMethods.photo5") }}</p>
-      </div>
-      <div class="image-container">
-        <el-image :src="fieldImage3" alt="工作人员采样现场" class="sampling-image"></el-image>
-        <!--i18n:irrigationwaterMethods.photo6-->
-        <p class="image-caption">{{ $t("irrigationwater.irrigationwaterMethods.photo6") }}</p>
->>>>>>> origin/lili
       </div>
     </div>
   </div>

src/views/User/acidModel/Calculation.vue

@@ -41,6 +41,7 @@
         </el-input>
       </el-form-item>
 
+      <!-- 修改：将pH改为CEC -->
       <el-form-item
         label="阳离子交换量(cmol/kg)"
         prop="CEC"
@@ -125,39 +126,34 @@
 <script setup lang="ts">
 import { reactive, ref, nextTick } from "vue";
 import { ElMessage } from "element-plus";
-import axios from "axios";
-import { useRouter } from "vue-router";
 import request from "../../../utils/request";
 
 // 定义表单数据接口
 interface Form {
   OM: number | null;
   CL: number | null;
-  CEC: number | null;
+  CEC: number | null; // 修改：将pH改为CEC
   H_plus: number | null;
   N: number | null;
   Al3_plus: number | null;
-  delta_ph: number | null;
 }
 
 const form = reactive<Form>({
   OM: null,
   CL: null,
-  CEC: null,
+  CEC: null, // 修改：将pH改为CEC
   H_plus: null,
   N: null,
   Al3_plus: null,
-  delta_ph: null,
 });
 
-const router = useRouter();
 const result = ref<number | null>(null);
 const dialogVisible = ref(false);
 const predictForm = ref<any>(null);
 const errorMessages = reactive<Record<string, string>>({
   OM: "",
   CL: "",
-  CEC: "",
+  CEC: "", // 修改：将pH改为CEC
   H_plus: "",
   N: "",
   Al3_plus: "",
@@ -197,7 +193,7 @@ const onSubmit = async () => {
   const inputConfigs = [
     { field: "OM" as keyof Form, min: 0, max: 30 },
     { field: "CL" as keyof Form, min: 50, max: 400 },
-    { field: "CEC" as keyof Form, min: 0, max: 15 },
+    { field: "CEC" as keyof Form, min: 0, max: 15 }, // 修改：将pH改为CEC
     { field: "H_plus" as keyof Form, min: 0, max: 1 },
     { field: "N" as keyof Form, min: 0, max: 0.2 },
     { field: "Al3_plus" as keyof Form, min: 0, max: 6 },
@@ -206,7 +202,7 @@ const onSubmit = async () => {
   let isValid = true;
   for (const config of inputConfigs) {
     const { field, min, max } = config;
-    const value = form[field]; // 现在 TypeScript 明白 field 是 keyof Form 类型
+    const value = form[field];
     if (value === null || !validateInput(value.toString(), min, max)) {
       isValid = false;
       errorMessages[field] = `输入值应在 ${min} 到 ${max} 之间且为有效数字`;
@@ -222,19 +218,19 @@ const onSubmit = async () => {
 
   console.log("开始计算...");
   const data = {
-    model_id: 25,
+    model_id: 24,
     parameters: {
-      OM: form.OM, // 土壤有机质
-      CL: form.CL, // 土壤粘粒
-      CEC: form.CEC, // 阳离子交换量
-      H: form.H_plus, // 交换性氢
-      N: form.N, // 水解氮
-      Al: form.Al3_plus, // 交换性铝
+      OM: form.OM,
+      CL: form.CL,
+      CEC: form.CEC, // 修改：将pH改为CEC
+      H_plus: form.H_plus,
+      N: form.N,
+      Al3_plus: form.Al3_plus,
     },
   };
 
   try {
-    const response = await request.post("/predict", data, {
+    const response = await request.post("http://127.0.0.1:5000/predict", data, {
       headers: {
         "Content-Type": "application/json",
       },
@@ -267,7 +263,7 @@ const onSubmit = async () => {
 const onDialogClose = () => {
   dialogVisible.value = false;
 
-  // 使用类型断言确保 key 是 keyof Form 类型
+  // 重置表单
   Object.keys(form).forEach((key) => {
     if (key in form) {
       const typedKey = key as keyof Form;
@@ -275,7 +271,7 @@ const onDialogClose = () => {
     }
   });
 
-  // 同样地处理 errorMessages
+  // 重置错误消息
   Object.keys(errorMessages).forEach((key) => {
     if (key in errorMessages) {
       const typedKey = key as keyof typeof errorMessages;
@@ -285,7 +281,7 @@ const onDialogClose = () => {
 
   nextTick(() => {
     if (predictForm.value) {
-      (predictForm.value as any).resetFields(); // 使用类型断言避免类型错误
+      (predictForm.value as any).resetFields();
     }
   });
 };
@@ -356,4 +352,4 @@ const onDialogClose = () => {
   border-color: #dcdfe6;
   color: #606266;
 }
-</style>
+</style>

src/views/User/acidModel/ModelIterationVisualization.vue

@@ -91,7 +91,7 @@ const calculateDataRange = (data: [number, number][]) => {
 // 获取折线图数据
 const fetchLineData = async () => {
   try {
-    const response = await request.get<HistoryDataResponse>(`/get-model-history/${props.lineChartPathParam}`);
+    const response = await request.get<HistoryDataResponse>(`http://127.0.0.1:5000/get-model-history/${props.lineChartPathParam}`);
     const data = response.data;
 
     const timestamps = data.timestamps;
@@ -145,7 +145,7 @@ const fetchLineData = async () => {
 // 获取散点图数据
 const fetchScatterData = async (modelId: number, optionRef: any) => {
   try {
-    const response = await request.get<ScatterDataResponse>(`/model-scatter-data/${modelId}`);
+    const response = await request.get<ScatterDataResponse>(`http://127.0.0.1:5000/model-scatter-data/${modelId}`);
     const data = response.data;
 
     const scatterData = data.scatter_data;
@@ -265,7 +265,7 @@ onUnmounted(() => {
       <!-- 中间代散点图表头 -->
       <h2 class="chart-header">中间代散点图</h2>
       <div class="chart-container">
-        <VueEcharts :option="ecMidScatterOption" ref="ecMidScatterOptionRef" />
+        <VueEcharts :option="ecMidScatterOption" ref="ecMid极简白OptionRef" />
       </div>
     </template>
     <template v-if="showFinalScatterChart">
@@ -287,12 +287,15 @@ onUnmounted(() => {
   width: 100%;
   height: 100%;
   gap: 20px;
+  color: #000;
+  background-color: white; /* 添加白色背景 */
 }
 
 .chart-header {
   font-size: 18px;
   font-weight: bold;
   margin-bottom: 10px;
+  color: #2c3e50;
 }
 
 .sub-title {
@@ -305,12 +308,37 @@ onUnmounted(() => {
   height: 450px;
   margin: 0 auto;
   margin-bottom: 20px;
+  background-color: white; /* 图表容器背景为白色 */
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 添加轻微阴影增强层次感 */
 }
 
 .VueEcharts {
   width: 100%;
   height: 100%;
   margin: 0 10px;
+  background-color: white; /* ECharts图表背景为白色 */
+}
+
+/* 确保图表内部也是白色背景 */
+:deep(.echarts) {
+  background-color: white;
+}
+
+/* 为图表标题添加样式 */
+:deep(.echarts-title) {
+  color: #2c3e50;
+  font-weight: bold;
+}
+
+/* 为坐标轴添加样式 */
+:deep(.echarts-axis) {
+  color: #666;
+}
+
+/* 为图例添加样式 */
+:deep(.echarts-legend) {
+  color: #333;
 }
 </style>
 

src/views/User/acidModel/SoilAcidReductionIterativeEvolution.vue

@@ -23,7 +23,7 @@ const showMidScatterChart = ref(true);
 const showFinalScatterChart = ref(true);
 
 // 直接在代码里定义好参数
-const lineChartPathParam = ref('reduce'); 
+const lineChartPathParam = ref('reflux'); 
 const initScatterModelId = ref(24);
 const midScatterModelId = ref(25);
 const finalScatterModelId = ref(26);

src/views/User/neutralizationModel/AcidNeutralizationModel.vue

@@ -271,7 +271,7 @@ const onSubmit = async () => {
   };
   console.log('提交的数据:', data);
   try {
-    const response = await request.post('/predict', data, {
+    const response = await request.post('http://127.0.0.1:5000/predict', data, {
       headers: {
         'Content-Type': 'application/json'
       }

src/views/User/neutralizationModel/ModelIterationVisualization.vue

@@ -91,7 +91,7 @@ const calculateDataRange = (data: [number, number][]) => {
 // 获取折线图数据
 const fetchLineData = async () => {
   try {
-    const response = await request.get<HistoryDataResponse>(`/get-model-history/${props.lineChartPathParam}`);
+    const response = await request.get<HistoryDataResponse>(`http://127.0.0.1:5000/get-model-history/${props.lineChartPathParam}`);
     const data = response.data;
 
     const timestamps = data.timestamps;
@@ -145,7 +145,7 @@ const fetchLineData = async () => {
 // 获取散点图数据
 const fetchScatterData = async (modelId: number, optionRef: any) => {
   try {
-    const response = await request.get<ScatterDataResponse>(`/model-scatter-data/${modelId}`);
+    const response = await request.get<ScatterDataResponse>(`http://127.0.0.1:5000/model-scatter-data/${modelId}`);
     const data = response.data;
 
     const scatterData = data.scatter_data;
@@ -245,7 +245,6 @@ onUnmounted(() => {
   window.removeEventListener('resize', resizeCharts);
 });
 </script>
-
 <template>
   <div class="container">
     <template v-if="showLineChart">
@@ -265,7 +264,7 @@ onUnmounted(() => {
       <!-- 中间代散点图表头 -->
       <h2 class="chart-header">中间代散点图</h2>
       <div class="chart-container">
-        <VueEcharts :option="ecMidScatterOption" ref="ecMidScatterOptionRef" />
+        <VueEcharts :option="ecMidScatterOption" ref="ecMid极简白OptionRef" />
       </div>
     </template>
     <template v-if="showFinalScatterChart">
@@ -287,12 +286,15 @@ onUnmounted(() => {
   width: 100%;
   height: 100%;
   gap: 20px;
+  color: #000;
+  background-color: white; /* 添加白色背景 */
 }
 
 .chart-header {
   font-size: 18px;
   font-weight: bold;
   margin-bottom: 10px;
+  color: #2c3e50;
 }
 
 .sub-title {
@@ -305,14 +307,38 @@ onUnmounted(() => {
   height: 450px;
   margin: 0 auto;
   margin-bottom: 20px;
+  background-color: white; /* 图表容器背景为白色 */
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 添加轻微阴影增强层次感 */
 }
 
 .VueEcharts {
   width: 100%;
   height: 100%;
   margin: 0 10px;
+  background-color: white; /* ECharts图表背景为白色 */
+}
+
+/* 确保图表内部也是白色背景 */
+:deep(.echarts) {
+  background-color: white;
 }
-</style>
 
+/* 为图表标题添加样式 */
+:deep(.echarts-title) {
+  color: #2c3e50;
+  font-weight: bold;
+}
+
+/* 为坐标轴添加样式 */
+:deep(.echarts-axis) {
+  color: #666;
+}
+
+/* 为图例添加样式 */
+:deep(.echarts-legend) {
+  color: #333;
+}
+</style>
 
 

src/views/User/neutralizationModel/SoilAcidificationIterativeEvolution.vue

@@ -23,7 +23,7 @@ const showMidScatterChart = ref(true);
 const showFinalScatterChart = ref(true);
 
 // 直接在代码里定义好参数
-const lineChartPathParam = ref('reflux'); 
+const lineChartPathParam = ref('reduce'); 
 const initScatterModelId = ref(17);
 const midScatterModelId = ref(18);
 const finalScatterModelId = ref(19);