修改输入通量页面

src/components/irrpollution/waterdataline.vue

@@ -3,7 +3,6 @@
     <div class="container mx-auto px-4 py-8">
     <div class="bg-white rounded-xl shadow-lg overflow-hidden">
       
-      
       <!-- 加载状态 -->
       <div v-if="loading" class="py-20 flex justify-center items-center">
         <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500"></div>
@@ -40,9 +39,9 @@
                 class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100 transition-colors"
                 @click="sortData(col.key)"
               >
-                <div class="flex items-center justify-between">
-                  {{ col.label }}
-                  <span v-if="sortKey === col.key" class="ml-1 text-gray-400">
+                <div class="flex items-center justify-between whitespace-nowrap overflow-hidden">
+                  <span class="truncate" :title="col.label">{{ col.label }}</span>
+                  <span v-if="sortKey === col.key" class="ml-1 text-gray-400 flex-shrink-0">
                     {{ sortOrder === 'asc' ? '↑' : '↓' }}
                   </span>
                 </div>
@@ -59,7 +58,13 @@
               >
                 <div class="flex items-center">
                   <div class="text-gray-900 font-medium">
-                    {{ item[col.key] !== null ? item[col.key] : '-' }}
+                    <!-- 格式化金属含量字段为小数点后六位 -->
+                    <template v-if="concentrationFields.includes(col.key) && item[col.key] !== null">
+                      {{ formatConcentration(item[col.key]) }}
+                    </template>
+                    <template v-else>
+                      {{ item[col.key] !== null ? item[col.key] : '-' }}
+                    </template>
                   </div>
                 </div>
               </td>
@@ -90,16 +95,15 @@
     </div>
   </div>
   </div>
-  
 </template>
 
 <script setup>
 import { ref, computed, onMounted } from 'vue';
 import axios from 'axios';
 
-// 适配接口的字段映射（关键修改点）
+// 适配接口的字段映射
 const displayColumns = ref([
-  { key: 'sample_number', label: '水样ID' }, // 原water_sample_ID对应接口的sample_number
+  { key: 'sample_number', label: '水样ID' },
   { key:'sampling_location',label:'地理位置'},
   { key: 'ph_value', label: 'PH值' },
   { key: 'cr_concentration', label: '铬含量(ug/L)' },
@@ -109,6 +113,15 @@ const displayColumns = ref([
   { key: 'pb_concentration', label: '铅含量(ug/L)' },
 ]);
 
+// 需要格式化为小数点后六位的字段
+const concentrationFields = [
+  'cr_concentration',
+  'as_concentration',
+  'cd_concentration',
+  'hg_concentration',
+  'pb_concentration'
+];
+
 // 状态管理
 const waterData = ref([]);
 const loading = ref(true);
@@ -116,7 +129,13 @@ const error = ref(null);
 const sortKey = ref('');
 const sortOrder = ref('asc');
 
-// 接口请求（关键修改点：URL和数据解析）
+// 格式化金属含量为小数点后六位
+const formatConcentration = (value) => {
+  const num = Number(value);
+  return isNaN(num) ? value : num.toFixed(6);
+};
+
+// 接口请求
 const fetchData = async () => {
   try {
     loading.value = true;
@@ -124,7 +143,6 @@ const fetchData = async () => {
     const response = await axios.get(
       'http://localhost:8000/api/vector/export/all?table_name=water_sampling_data'
     );
-    // 解析GeoJSON数据：提取features中的properties作为数据项
     waterData.value = response.data.features.map(feature => feature.properties);
   } catch (err) {
     error.value = err.message || '无法连接到服务器，请检查接口是否可用';
@@ -133,14 +151,14 @@ const fetchData = async () => {
   }
 };
 
-// 过滤全空行（逻辑保留，自动适配新字段）
+// 过滤全空行
 const filteredData = computed(() => {
   return waterData.value.filter(item => {
     return displayColumns.value.some(col => item[col.key] !== null && item[col.key] !== '-');
   });
 });
 
-// 排序功能（逻辑保留，自动适配新字段）
+// 排序功能
 const sortedData = computed(() => {
   if (!sortKey.value) return filteredData.value;
   
@@ -153,7 +171,7 @@ const sortedData = computed(() => {
   });
 });
 
-// 切换排序（逻辑保留）
+// 切换排序
 const sortData = (key) => {
   if (sortKey.value === key) {
     sortOrder.value = sortOrder.value === 'asc' ? 'desc' : 'asc';
@@ -163,7 +181,7 @@ const sortData = (key) => {
   }
 };
 
-// 组件挂载（逻辑保留）
+// 组件挂载
 onMounted(() => {
   fetchData();
 });
@@ -213,13 +231,13 @@ onMounted(() => {
 /* 表格 */
 table { 
   width: 100%; 
-  border-collapse: collapse; /* 合并边框线 */
+  border-collapse: collapse;
   background-color: white;
 }
 th, td {
-  border: 1px solid #d1d5db; /* 灰色边框 */
-  text-align: center; /* 内容居中 */
-  padding: 12px 8px; /* 内边距优化 */
+  border: 1px solid #d1d5db;
+  text-align: center;
+  padding: 12px 8px;
   font-size: 14px;
   background-color: white;
 }
@@ -227,6 +245,15 @@ th, td {
 .py-4 { padding: 1rem 0; }
 .hover\:bg-gray-50:hover { background-color: #f9fafb; }
 
+/* 表头样式优化 - 确保不换行 */
+th .truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 150px; /* 可根据实际调整 */
+  display: inline-block;
+}
+
 /* 响应式 */
 @media (max-width: 640px) {
   .container { padding: 32px 8px; }

src/locales/zh.json

@@ -96,11 +96,11 @@
     "airInputFluxTitle": "大气输入通量"
   },
   "agriInput": {
-    "Title": "农产品投入",
+    "Title": "农业投入品",
     "farmInputSamplingDescTitle": "采样说明",
-    "prodInputFluxTitle": "农产品输入通量"
+    "prodInputFluxTitle": "农业投入品输入通量"
   },
-  "Title": "区域土壤重金属污染风险评估",
+  "Title": "区域土壤重金属污染风险评估系统",
   "Menu": {
     "dataManagement": "数据管理",
     "infoManagement": "信息管理",

src/views/User/HmOutFlux/agriInput/farmInputSamplingDesc.vue

@@ -103,7 +103,7 @@
           <div class="testing-gallery">
             <div class="results-card">
               <div class="results-header">
-                <h3>各农业投入品重金属含量测试结果</h3>
+                <h3>各农业投入品重金属含量测试样例</h3>
                 <p>不同种类农业投入品中重金属含量对比分析</p>
               </div>
               <div class="image-container-proportional">
@@ -113,7 +113,7 @@
                   class="results-image-proportional">
                 </el-image>
               </div>
-              <p class="image-caption">图3-1 各农业投入品测试结果</p>
+              <p class="image-caption">图3-1 各农业投入品测试样例</p>
             </div>
             
             <div class="results-card">
@@ -193,10 +193,10 @@ export default {
   data() {
     return {
       image1: '/农业投入品使用情况.png',
-      image2: '/农业化肥采集.png',
-      image3: '/农药采集.png',
-      image4: '/农膜采集.png',
-      image5: '/有机肥采集.png',
+      image2: '/农业化肥采集(1).png',
+      image3: '/农药采集(1).png',
+      image4: '/农膜采集(1).png',
+      image5: '/有机肥采集(1).png',
       image6: '/各农业投入品测试结果.png',
       image7: '/农业投入品镉含量.png',
       image8: '/农业投入品用量计算方法.png',

src/views/User/HmOutFlux/agriInput/prodInputFlux.vue

@@ -4,68 +4,100 @@
     <el-card v-if="showInputForm" shadow="always" class="form-card">
       <div class="card-content">
         <div class="input-section">
-          <el-form label-width="250px" label-position="top">
+          <el-form label-width="250px" label-position="left">
             <div class="form-section">
-              <div class="input-group">
+              <!-- 单行布局，每行一个输入栏 -->
+              <div class="input-row">
                 <el-form-item label="氮肥镉含量平均值 (mg/kg)" class="form-item">
                   <el-input v-model="formData.f3_nitrogen_cd_content" placeholder="0.12"></el-input>
                 </el-form-item>
+              </div>
+              
+              <div class="input-row">
                 <el-form-item label="氮肥单位面积使用量 (t/ha/a)" class="form-item">
                   <el-input v-model="formData.nf_nitrogen_usage" placeholder="0.25"></el-input>
                 </el-form-item>
               </div>
-              <div class="input-group">
+              
+              <div class="input-row">
                 <el-form-item label="磷肥镉含量平均值 (mg/kg)" class="form-item">
                   <el-input v-model="formData.f4_phosphorus_cd_content" placeholder="0.85"></el-input>
                 </el-form-item>
+              </div>
+              
+              <div class="input-row">
                 <el-form-item label="磷肥单位面积使用量 (t/ha/a)" class="form-item">
                   <el-input v-model="formData.pf_phosphorus_usage" placeholder="0.15"></el-input>
                 </el-form-item>
               </div>
-              <div class="input-group">
+              
+              <div class="input-row">
                 <el-form-item label="钾肥镉含量平均值 (mg/kg)" class="form-item">
                   <el-input v-model="formData.f5_potassium_cd_content" placeholder="0.05"></el-input>
                 </el-form-item>
+              </div>
+              
+              <div class="input-row">
                 <el-form-item label="钾肥单位面积使用量 (t/ha/a)" class="form-item">
                   <el-input v-model="formData.kf_potassium_usage" placeholder="0.12"></el-input>
                 </el-form-item>
               </div>
-              <div class="input-group">
+              
+              <div class="input-row">
                 <el-form-item label="复合肥镉含量平均值 (mg/kg)" class="form-item">
                   <el-input v-model="formData.f6_compound_cd_content" placeholder="0.45"></el-input>
                 </el-form-item>
+              </div>
+              
+              <div class="input-row">
                 <el-form-item label="复合肥单位面积使用量 (t/ha/a)" class="form-item">
                   <el-input v-model="formData.cf_compound_usage" placeholder="0.30"></el-input>
                 </el-form-item>
               </div>
-              <div class="input-group">
+              
+              <div class="input-row">
                 <el-form-item label="有机肥镉含量平均值 (mg/kg)" class="form-item">
                   <el-input v-model="formData.f7_organic_cd_content" placeholder="0.22"></el-input>
                 </el-form-item>
+              </div>
+              
+              <div class="input-row">
                 <el-form-item label="有机肥单位面积使用量 (t/ha/a)" class="form-item">
                   <el-input v-model="formData.of_organic_usage" placeholder="2.50"></el-input>
                 </el-form-item>
               </div>
-              <div class="input-group">
+              
+              <div class="input-row">
                 <el-form-item label="农药镉含量 (mg/kg)" class="form-item">
                   <el-input v-model="formData.f8_pesticide_cd_content" placeholder="0.08"></el-input>
                 </el-form-item>
+              </div>
+              
+              <div class="input-row">
                 <el-form-item label="农药单位面积使用量 (t/ha/a)" class="form-item">
                   <el-input v-model="formData.p_pesticide_usage" placeholder="0.02"></el-input>
                 </el-form-item>
               </div>
-              <div class="input-group">
+              
+              <div class="input-row">
                 <el-form-item label="农家肥镉含量 (mg/kg)" class="form-item">
                   <el-input v-model="formData.f9_farmyard_cd_content" placeholder="0.15"></el-input>
                 </el-form-item>
+              </div>
+              
+              <div class="input-row">
                 <el-form-item label="农家肥单位面积使用量 (t/ha/a)" class="form-item">
                   <el-input v-model="formData.ff_farmyard_usage" placeholder="1.80"></el-input>
                 </el-form-item>
               </div>
-              <div class="input-group">
+              
+              <div class="input-row">
                 <el-form-item label="农膜镉含量 (mg/kg)" class="form-item">
                   <el-input v-model="formData.f10_film_cd_content" placeholder="0.03"></el-input>
                 </el-form-item>
+              </div>
+              
+              <div class="input-row">
                 <el-form-item label="农膜(存留)单位面积使用量 (t/ha/a)" class="form-item">
                   <el-input v-model="formData.af_film_usage" placeholder="0.05"></el-input>
                 </el-form-item>
@@ -74,6 +106,7 @@
           </el-form>
         </div>
         
+        <!-- 计算按钮放在页面最下方 -->
         <div class="button-section">
           <div class="button-bg"></div>
           <div class="bottom-overlay"></div>
@@ -103,17 +136,7 @@
       
       <!-- 自定义数据计算结果卡片 -->
       <el-card class="result-card" v-if="customResult.success">
-        <h3>农业投入Cd通量计算结果</h3>
-        <p>总通量: {{ customResult.data.total_cd_flux }} g/ha/a</p>
-        <el-table :data="customResultDetails" border>
-          <el-table-column prop="type" label="投入类型"></el-table-column>
-          <el-table-column prop="flux" label="Cd通量(g/ha/a)"></el-table-column>
-        </el-table>
-        <div class="chart-container">
-            <div ref="customPieChart" style="width: 100%; height: 400px;"></div>
-          </div>
-          
-        <!-- 添加地图展示区域 -->
+         <!-- 添加地图展示区域 -->
         <div class="map-container">
           <h3>空间分布图</h3>
           <div class="map-wrapper">
@@ -126,6 +149,14 @@
             </div>
           </div>
         </div>
+        <p>总通量: {{ customResult.data.total_cd_flux }} g/ha/a</p>
+        <el-table :data="customResultDetails" border>
+          <el-table-column prop="type" label="投入类型"></el-table-column>
+          <el-table-column prop="flux" label="Cd通量(g/ha/a)"></el-table-column>
+        </el-table>
+        <div class="chart-container">
+            <div ref="customPieChart" style="width: 100%; height: 400px;"></div>
+          </div>
       </el-card>
     </div>
   </div>
@@ -397,7 +428,6 @@ export default {
 </script>
 
 <style scoped>
-/* 样式部分保持不变，与之前相同 */
 .fertilizer-input-form {
   padding: 20px;
   display: flex;
@@ -408,54 +438,37 @@ export default {
 
 .form-card {
   width: 90%;
-  max-width: 1200px;
+  max-width: 800px; /* 减小宽度使整体更紧凑 */
   margin: 0 auto;
   background: linear-gradient(135deg, #FAFDFF, #FFFAA2);
   border: 1px solid #e6e6e6;
   border-radius: 12px;
   overflow: hidden;
-  box-shadow: 0 8px 24px rgba极端的(0, 0, 0, 0.1);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
 }
 
 .card-content {
   display: flex;
+  flex-direction: column;
   min-height: 600px;
 }
 
 .input-section {
-  width: 60%;
+  width: 90%;
   padding: 30px;
-  border-right: 1px dashed #c0c4cc;
+  flex: 1;
+  overflow-y: auto;
 }
 
 .button-section {
-  width: 40%;
+  width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 极端的30px;
+  padding: 30px;
   position: relative;
   overflow: hidden;
-}
-
-.button-bg {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-size: cover;
-  z-index: 0;
-}
-
-.bottom-overlay {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  height: 40%;
-  background: linear-gradient(to top, rgba(255, 255, 255, 0.5), transparent);
-  z-index: 1;
+  margin-top: auto; /* 将按钮推到页面底部 */
 }
 
 .form-section {
@@ -464,28 +477,31 @@ export default {
   height: 100%;
 }
 
-.input-group {
+.input-row {
   display: flex;
-  justify-content: space-between;
-  margin-bottom: 20px;
-  gap: 20px;
+  justify-content: center;
+  margin-bottom: 15px;
+  width: 100%;
 }
 
 .form-item {
-  flex: 1;
+  width: 100%; /* 宽度调整为100% */
   margin-bottom: 0;
   display: flex;
-  flex-direction: column;
-  align-items: flex-start;
+  flex-direction: row; /* 横向排列标签和输入框 */
+  align-items: center; /* 垂直居中 */
 }
 
+/* 增大标签字体 */
 .el-form-item__label {
-  font-size: 16px;
-  text-align: left;
-  margin-bottom: 8px;
+  font-size: 24px; /* 增大标签字体 */
+  text-align: left; /* 标签左对齐 */
+  margin-bottom: 0; /* 移除底部间距 */
   padding: 0 !important;
   font-weight: 600;
   color: #333;
+  width: 250px; /* 固定标签宽度 */
+  flex-shrink: 0; /* 防止标签被压缩 */
 }
 
 .el-input {
@@ -494,30 +510,33 @@ export default {
 
 :deep(.el-input) .el-input__inner {
   width: 100% !important;
-  padding: 12px 0;
+  padding: 12px 15px; /* 增加内边距 */
   border: none;
-  border-radius: 0;
-  background: transparent;
-  border-bottom: 1px solid #dcdfe6;
-  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
+  border-radius: 8px; /* 增加圆角 */
+  background: rgba(255, 255, 255, 0.9);
+  border: 1px solid #dcdfe6;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
   transition: all 0.3s ease;
+  font-size: 18px; /* 增大输入框字体 */
+  text-align: left; /* 输入文本左对齐 */
 }
 
 :deep(.el-input) .el-input__inner:focus {
-  border-bottom: 2px solid #409EFF;
-  box-shadow: 0 2px 0 rgba(64, 158, 255, 0.2);
-  background: rgba(64, 158, 255, 0.03);
+  border: 2px solid #409EFF;
+  box-shadow: 0 0 10px rgba(64, 158, 255, 0.2);
+  background: rgba(255, 255, 255, 1);
 }
 
 :deep(.el-input) .el-input__inner::placeholder {
   color: #a0a0a0;
   font-style: italic;
+  font-size: 16px; /* 增大占位符字体 */
 }
 
 .calculate-btn {
-  width: 100%;
-  max-width: 300px;
-  height: 200px;
+  width: 90%;
+  max-width: 350px;
+  height: 60px;
   border: none;
   border-radius: 25px !important;
   font-size: 24px;
@@ -540,7 +559,7 @@ export default {
 .calculate-btn:active {
   transform: scale(0.98);
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15),
-              0 2px 8px rgba(38, 176, 70, 极端的0.4) inset;
+              0 2px 8px rgba(38, 176, 70, 0.4) inset;
 }
 
 .btn-text {
@@ -574,7 +593,7 @@ export default {
 }
 
 .result-card {
-  width: 100%;
+  width: 90%;
   margin: 0 auto;
   padding: 20px;
   background: white;
@@ -586,11 +605,12 @@ export default {
   text-align: center;
   margin-bottom: 20px;
   color: #333;
+  font-size: 24px; /* 增大标题字体 */
 }
 
 .result-card p {
   margin: 10px 0;
-  font-size: 16px;
+  font-size: 18px; /* 增大字体 */
   text-align: center;
   font-weight: bold;
   color: #26B046;
@@ -616,6 +636,7 @@ export default {
   text-align: center;
   margin-bottom: 15px;
   color: #333;
+  font-size: 22px; /* 增大字体 */
 }
 
 .map-wrapper {
@@ -650,7 +671,7 @@ export default {
 
 .map-placeholder p {
   margin-bottom: 15px;
-  font-size: 16px;
+  font-size: 18px; /* 增大字体 */
   color: #666;
 }
 
@@ -659,7 +680,7 @@ export default {
   top: 20px;
   left: 20px;
   width: 120px;
-  font-size: 16px;
+  font-size: 18px; /* 增大字体 */
   padding: 10px;
   background: linear-gradient(to right, #8DF9F0, #26B046);
   color: white;
@@ -671,4 +692,30 @@ export default {
 .back-button:hover {
   background: linear-gradient(to right, #7de8df, #20a03d);
 }
+
+/* 响应式调整 */
+@media (max-width: 768px) {
+  .form-card {
+    width: 95%;
+    max-width: 100%;
+  }
+  
+  .el-form-item__label {
+    font-size: 20px; /* 在小屏幕上保持较大字体 */
+    width: 200px; /* 在小屏幕上减小标签宽度 */
+  }
+  
+  :deep(.el-input) .el-input__inner {
+    font-size: 16px;
+  }
+  
+  .calculate-btn {
+    height: 50px;
+    font-size: 20px;
+  }
+  
+  .btn-text {
+    font-size: 20px;
+  }
+}
 </style>

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

@@ -12,7 +12,7 @@
           <div class="step-icon">📊</div>
           <div class="step-content">
             <h3>污染源统计</h3>
-            <p>根据韶关市环保部门或政府官方网站公开资料及全国排污许可证管理信息平台，对韶关具有排污许可证的企业进行数据统计与调查分析</p>
+            <p>根据环保部门或政府官方网站公开资料及全国排污许可证管理信息平台，对具有排污许可证的企业进行数据统计与调查分析</p>
           </div>
         </div>
         
@@ -125,8 +125,8 @@
 export default {
   data() {
     return {
-      image1: '/大气干湿沉降示意图.png',
-      image2: '/干湿沉降收集装置.png',
+      image1: '/大气干湿沉降示意图(1).png',
+      image2: '/干湿沉降收集装置(1).png',
     };
   }
 };

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

@@ -3,7 +3,7 @@
     <div class="map-title">大气通量分布图</div>
     <div class="map-image-container">
       <img 
-        src="/大气通量.jpg" 
+        src="/大气通量(1).jpg" 
         alt="大气通量分布图" 
         class="map-image"
       >

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

@@ -83,12 +83,6 @@ import crosssectionmap from '@/components/irrpollution/crosssectionmap.vue';
 
 <style scoped>
 /* 基础样式重置 */
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
-}
 
 .cross-container {
   display: flex;

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

@@ -1,170 +1,212 @@
 <template>
-  <div class="irrigation-management" style="display: flex; justify-content: center;">
+  <div class="irrigation-management" style="display: flex; justify-content: center; height: 100%;">
     <!-- 计算页面 -->
-    <div v-if="showCalculation" class="page-container">
-      <el-card shadow="always" class="gradient-card">
-        <!-- 将单选按钮组改为多选框组 -->
-        <el-checkbox-group v-model="selectedLandTypes" style="width: 100%;">
-          <!-- 水田 -->
-          <el-row :gutter="20" style="margin-bottom: 10px; align-items: center;">
-            <el-col :span="6">
-              <div class="radio-container">
-                <el-checkbox label="water" border>水田</el-checkbox>
+    <div v-if="showCalculation" class="page-container" style="width: 100%; height: 100%;">
+      <el-card shadow="always" class="gradient-card" style="height: 100%;">
+        <div class="calculation-content">
+          <h2 class="page-title">灌溉水输入通量计算</h2>
+          
+          <!-- 将单选按钮组改为多选框组 -->
+          <div class="scrollable-content">
+            <el-checkbox-group v-model="selectedLandTypes" style="width: 100%;">
+              <!-- 水田 -->
+              <div class="land-type-section">
+                <div class="radio-container">
+                  <el-checkbox 
+                    label="water" 
+                    border 
+                    size="large"
+                    class="custom-checkbox"
+                  >
+                    <span class="checkbox-label">水田</span>
+                  </el-checkbox>
+                </div>
+                
+                <div class="input-group">
+                  <div class="input-row">
+                    <div class="input-title">灌溉水用量 (m³/亩/年)</div>
+                    <el-input
+                      v-model="irrigationWaterUsage"
+                      placeholder="请输入灌溉水用量"
+                      size="large"
+                    />
+                  </div>
+                  
+                  <div class="input-row">
+                    <div class="input-title">灌溉水有效利用率 (%)</div>
+                    <el-input
+                      v-model="irrigationEfficiency"
+                      placeholder="请输入灌溉水有效利用率"
+                      size="large"
+                    />
+                  </div>
+                </div>
               </div>
-            </el-col>
-            <el-col :span="9">
-              <div class="input-title">灌溉水用量 (m³/亩/年)</div>
-              <el-input
-                v-model="irrigationWaterUsage"
-                placeholder="请输入灌溉水用量"
-                style="margin-top: 10px;"
-              />
-            </el-col>
-            <el-col :span="9">
-              <div class='input-title'>灌溉水有效利用率 (%)</div>
-              <el-input
-                v-model="irrigationEfficiency"
-                placeholder="请输入灌溉水有效利用率"
-                style="margin-top: 10px;"
-              />
-            </el-col>
-          </el-row>
 
-          <!-- 水浇地 -->
-          <el-row :gutter="20" style="margin-bottom: 10px; align-items: center;">
-            <el-col :span="6">
-              <div class="radio-container">
-                <el-checkbox label="irrigated" border>水浇地</el-checkbox>
+              <!-- 水浇地 -->
+              <div class="land-type-section">
+                <div class="radio-container">
+                  <el-checkbox 
+                    label="irrigated" 
+                    border 
+                    size="large"
+                    class="custom-checkbox"
+                  >
+                    <span class="checkbox-label">水浇地</span>
+                  </el-checkbox>
+                </div>
+                
+                <div class="input-group">
+                  <div class="input-row">
+                    <div class="input-title">灌溉水用量 (m³/亩/年)</div>
+                    <el-input
+                      v-model="irrigatedWaterUsage"
+                      placeholder="请输入灌溉水用量"
+                      size="large"
+                    />
+                  </div>
+                  
+                  <div class="input-row">
+                    <div class="input-title">灌溉水有效利用率 (%)</div>
+                    <el-input
+                      v-model="irrigatedEfficiency"
+                      placeholder="请输入灌溉水有效利用率"
+                      size="large"
+                    />
+                  </div>
+                </div>
               </div>
-            </el-col>
-            <el-col :span="9">
-              <div class="input-title">灌溉水用量 (m³/亩/年)</div>
-              <el-input
-                v-model="irrigatedWaterUsage"
-                placeholder="请输入灌溉水用量"
-                style="margin-top: 10px;"
-              />
-            </el-col>
-            <el-col :span="9">
-              <div class="input-title">灌溉水有效利用率 (%)</div>
-              <el-input
-                v-model="irrigatedEfficiency"
-                placeholder="请输入灌溉水有效利用率"
-                style="margin-top: 10px;"
-              />
-            </el-col>
-          </el-row>
 
-          <!-- 旱地 -->
-          <el-row :gutter="20" style="margin-bottom: 10px; align-items: center;">
-            <el-col :span="6">
-              <div class="radio-container">
-                <el-checkbox label="dry" border>旱地</el-checkbox>
+              <!-- 旱地 -->
+              <div class="land-type-section">
+                <div class="radio-container">
+                  <el-checkbox 
+                    label="dry" 
+                    border 
+                    size="large"
+                    class="custom-checkbox"
+                  >
+                    <span class="checkbox-label">旱地</span>
+                  </el-checkbox>
+                </div>
+                
+                <div class="input-group">
+                  <div class="input-row">
+                    <div class="input-title">灌溉水用量 (m³/亩/年)</div>
+                    <el-input
+                      v-model="dryWaterUsage"
+                      placeholder="请输入灌溉水用量"
+                      size="large"
+                    />
+                  </div>
+                  
+                  <div class="input-row">
+                    <div class="input-title">灌溉水有效利用率 (%)</div>
+                    <el-input
+                      v-model="dryEfficiency"
+                      placeholder="请输入灌溉水有效利用率"
+                      size="large"
+                    />
+                  </div>
+                </div>
               </div>
-            </el-col>
-            <el-col :span="9">
-              <div class="input-title">灌溉水用量 (m³/亩/年)</div>
-              <el-input
-                v-model="dryWaterUsage"
-                placeholder="请输入灌溉水用量"
-                style="margin-top: 10px;"
-              />
-            </el-col>
-            <el-col :span="9">
-              <div class="input-title">灌溉水有效利用率 (%)</div>
-              <el-input
-                v-model="dryEfficiency"
-                placeholder="请输入灌溉水有效利用率"
-                style="margin-top: 10px;"
-              />
-            </el-col>
+            </el-checkbox-group>
+          </div>
+
+          <el-row justify="center" style="margin-top: 20px; margin-bottom: 20px;">
+            <el-button
+              class="calculate-btn"
+              @click="calculateFlux"
+              :loading="loading"
+              size="large"
+            >
+              计算灌溉水输入通量
+            </el-button>
           </el-row>
-        </el-checkbox-group>
-
-        <el-row justify="center" style="margin-top: 20px;">
-          <el-button
-            class="calculate-btn"
-            @click="calculateFlux"
-            :loading="loading"
-          >
-            计算灌溉水输入通量
-          </el-button>
-        </el-row>
+        </div>
       </el-card>
     </div>
 
     <!-- 结果页面 -->
-    <div v-if="showResults" class="page-container">
-      <el-card shadow="always" class="results-card">
-        <div class="results-header">
-          <el-button 
-          type="primary" 
-          @click="backToCalculation"
-          class="back-button">
-            返回计算
-          </el-button>
-          <div class="result-title">计算结果</div>
-        </div>
-        
-        <div class="results-container">
-          <!-- 图像区域（地图和直方图） -->
-          <div class="image-row">
-            <div class="image-container">
-              <div class="result-subtitle">Cd含量地图</div>
-              <div class="image-wrapper">
-                <img v-if="mapImageUrl" :src="mapImageUrl" alt="Cd含量地图" class="result-image">
-                <div v-else class="image-placeholder">地图加载中...</div>
+    <div v-if="showResults" class="page-container" style="width: 100%; height: 100%;">
+      <el-card shadow="always" class="results-card" style="height: 100%;">
+        <div class="results-content">
+          <div class="results-header">
+            <el-button 
+            type="primary" 
+            @click="backToCalculation"
+            class="back-button">
+              返回计算
+            </el-button>
+            <div class="result-title">计算结果</div>
+          </div>
+          
+          <!-- 添加滚动容器 -->
+          <div class="scrollable-results">
+            <div class="results-container">
+              <!-- 地图 -->
+              <div class="image-row">
+                <div class="image-container">
+                  <div class="result-subtitle">Cd含量地图</div>
+                  <div class="image-wrapper">
+                    <img v-if="mapImageUrl" :src="mapImageUrl" alt="Cd含量地图" class="result-image">
+                    <div v-else class="image-placeholder">地图加载中...</div>
+                  </div>
+                </div>
               </div>
-            </div>
-            
-            <div class="image-container">
-              <div class="result-subtitle">Cd含量分布直方图</div>
-              <div class="image-wrapper">
-                <img v-if="histogramImageUrl" :src="histogramImageUrl" alt="Cd含量地图" class="result-image">
-                <div v-else class="image-placeholder">直方图加载中...</div>
+              
+              <!-- 统计结果 -->
+              <el-row style="margin-top: 20px;">
+                <el-col :span="24">
+                  <div class="result-subtitle">统计结果</div>
+                  <div class="statistics-container">
+                    <!-- 基础统计表格 -->
+                    <el-table
+                      v-if="statisticsData"
+                      :data="[statisticsData]"
+                      border
+                      size="large"
+                      style="width: 100%; margin-bottom: 15px;"
+                    >
+                      <el-table-column prop="土地类型" label="土地类型" align="center"></el-table-column>
+                      <el-table-column prop="数据更新时间" label="数据更新时间" align="center"></el-table-column>
+                      <el-table-column prop="数据点总数" label="数据点总数" align="center"></el-table-column>
+                      <el-table-column prop="均值" label="均值" align="center" :formatter="formatNumber"></el-table-column>
+                      <el-table-column prop="中位数" label="中位数" align="center" :formatter="formatNumber"></el-table-column>
+                      <el-table-column prop="标准差" label="标准差" align="center" :formatter="formatNumber"></el-table-column>
+                      <el-table-column prop="最小值" label="最小值" align="center" :formatter="formatNumber"></el-table-column>
+                      <el-table-column prop="最大值" label="最大值" align="center" :formatter="format极简版Number"></el-table-column>
+                    </el-table>
+                    
+                    <!-- 分位数和形态统计表格 -->
+                    <el-table
+                      v-if="statisticsData"
+                      :data="[statisticsData]"
+                      border
+                      size="large"
+                      style="width: 100%; margin-bottom: 15px;"
+                    >
+                      <el-table-column prop="25%分位数" label="25%分位数" align="center" :formatter="formatNumber"></el-table-column>
+                      <el-table-column prop="75%分位数" label="75%分位数" align="center" :formatter="formatNumber"></el-table-column>
+                      <el-table-column prop="偏度" label="偏度" align="center" :formatter="formatNumber"></el-table-column>
+                      <el-table-column prop="峰度" label="峰度" align="center" :formatter="formatNumber"></el-table-column>
+                    </el-table>
+                  </div>
+                </el-col>
+              </el-row>
+              
+              <!-- 直方图 -->
+              <div class="image-row" style="margin-top: 20px;">
+                <div class="image-container">
+                  <div class="result-subtitle">Cd含量分布直方图</div>
+                  <div class="image-wrapper">
+                    <img v-if="histogramImageUrl" :src="histogramImageUrl" alt="Cd含量直方图" class="result-image">
+                    <div v-else class="image-placeholder">直方图加载中...</div>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
-          
-          <!-- 统计结果 -->
-          <el-row style="margin-top: 30px;">
-            <el-col :span="24">
-              <div class="result-subtitle">统计结果</div>
-              <div class="statistics-container">
-                <!-- 基础统计表格 -->
-                <el-table
-                  v-if="statisticsData"
-                  :data="[statisticsData]"
-                  border
-                  size="small"
-                  style="width: 100%; margin-bottom: 20px;"
-                >
-                  <el-table-column prop="土地类型" label="土地类型" align="center"></el-table-column>
-                  <el-table-column prop="数据更新时间" label="数据更新时间" align="center"></el-table-column>
-                  <el-table-column prop="数据点总数" label="数据点总数" align="center"></el-table-column>
-                  <el-table-column prop="均值" label="均值" align="center" :formatter="formatNumber"></el-table-column>
-                  <el-table-column prop="中位数" label="中位数" align="center" :formatter="formatNumber"></el-table-column>
-                  <el-table-column prop="标准差" label="标准差" align="center" :formatter="formatNumber"></el-table-column>
-                  <el-table-column prop="最小值" label="最小值" align="center" :formatter="formatNumber"></el-table-column>
-                  <el-table-column prop="最大值" label="最大值" align="center" :formatter="formatNumber"></el-table-column>
-                </el-table>
-                
-                <!-- 分位数和形态统计表格 -->
-                <el-table
-                  v-if="statisticsData"
-                  :data="[statisticsData]"
-                  border
-                  size="small"
-                  style="width: 100%; margin-bottom: 20px;"
-                >
-                  <el-table-column prop="25%分位数" label="25%分位数" align="center" :formatter="formatNumber"></el-table-column>
-                  <el-table-column prop="75%分位数" label="75%分位数" align="center" :formatter="formatNumber"></el-table-column>
-                  <el-table-column prop="偏度" label="偏度" align="center" :formatter="formatNumber"></el-table-column>
-                  <el-table-column prop="峰度" label="峰度" align="center" :formatter="formatNumber"></el-table-column>
-                </el-table>
-              </div>
-            </el-col>
-          </el-row>
         </div>
       </el-card>
     </div>
@@ -433,17 +475,31 @@ export default {
 </script>
 
 <style scoped>
-/* 保持原有样式不变，添加地图和直方图并列样式 */
+/* 调整样式，确保计算按钮可见且不需要滚动 */
+.irrigation-management {
+  height: 100vh;
+  overflow: hidden;
+}
+
+.page-container {
+  width: 90%;
+  height: 100%;
+  padding: 15px;
+  box-sizing: border-box;
+}
+
 .gradient-card {
   background: linear-gradient(
     135deg, 
     rgba(250, 253, 255, 0.8), 
     rgba(137, 223, 252, 0.8)
   );
-  width: 80%;
-  max-width: 800px;
-  padding: 25px;
+  width: 90%;
+  height: 100%;
+  padding: 20px;
   border-radius: 12px;
+  display: flex;
+  flex-direction: column;
 }
 
 .results-card {
@@ -456,27 +512,60 @@ export default {
   max-width: 1200px;
   padding: 30px;
   border-radius: 12px;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.calculation-content {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 新增：可滚动内容区域 */
+.scrollable-content {
+  flex: 1;
+  overflow-y: auto;
+  padding-right: 5px; /* 防止滚动条遮挡内容 */
+}
+
+/* 新增：结果页面可滚动区域 */
+.scrollable-results {
+  flex: 1;
+  overflow-y: auto;
+  padding-right: 5px; /* 防止滚动条遮挡内容 */
+}
+
+/* 增大字号 */
+.page-title {
+  text-align: center;
+  font-size: 28px; /* 增大 */
+  font-weight: bold;
+  margin-bottom: 15px;
+  color: #1a8cff;
 }
 
 .results-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 20px;
+  margin-bottom: 15px;
 }
 
 .result-title {
-  font-size: 24px;
+  font-size: 28px; /* 增大 */
   font-weight: bold;
   text-align: center;
   flex-grow: 1;
+  color: #1a8cff;
 }
 
 .input-title {
-  font-size: 12px;
+  font-size: 18px; /* 增大 */
   font-weight: 500;
   color: #606266;
-  margin-bottom: 5px;
+  margin-bottom: 10px;
   text-align: left;
 }
 
@@ -485,47 +574,51 @@ export default {
   justify-content: flex-start;
   align-items: center;
   height: 100%;
+  margin-bottom: 10px;
 }
 
 .calculate-btn {
   width: 100%;
-  max-width: 300px;
-  height: 42px;
+  max-width: 350px;
+  height: 45px;
   border-radius: 8px;
-  font-size: 1rem;
+  font-size: 18px; /* 增大 */
   font-weight: 600;
   background: linear-gradient(45deg, #1a8cff, #00cc99);
   color: white;
+  margin-top: 15px;
 }
 
 .results-container {
-  margin-top: 20px;
+  padding: 10px;
+  width: 100%; 
+  height: 100%;
 }
 
 .result-subtitle {
   text-align: center;
   font-weight: bold;
-  font-size: 20px;
+  font-size: 20px; /* 增大 */
   margin-bottom: 15px;
-  padding-bottom: 5px;
+  padding-bottom: 8px;
   border-bottom: 1px solid #eee;
+  color: #1a8cff;
 }
 
-/* 新增：地图和直方图并列样式 */
+/* 调整图像行样式 */
 .image-row {
-  display: flex;
-  gap: 20px;
-  margin-top: 30px;
+  margin-top: 20px;
+  height: auto; /* 自动高度 */
 }
 
 .image-container {
-  flex: 1;
+  width: 100%;
   display: flex;
   flex-direction: column;
 }
 
 .image-wrapper {
-  flex: 1;
+  height: 300px; /* 固定高度 */
   display: flex;
   justify-content: center;
   align-items: center;
@@ -533,8 +626,7 @@ export default {
   border-radius: 8px;
   overflow: hidden;
   background-color: #f8f8f8;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  height: 400px; /* 固定高度 */
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
 }
 
 .result-image {
@@ -551,20 +643,21 @@ export default {
   justify-content: center;
   color: #909399;
   font-style: italic;
-  font-size: 18px;
+  font-size: 20px; /* 增大 */
 }
 
 .statistics-container {
   background-color: rgba(255, 255, 255, 0.7);
-  border-radius: 12px;
-  padding: 25px;
+  border-radius: 8px;
+  padding: 15px;
 }
 
-/* 表格样式增强 */
+/* 表格样式增强 - 增大字号 */
 :deep(.el-table) {
-  margin-bottom: 25px;
-  border-radius: 10px;
+  margin-bottom: 15px;
+  border-radius: 8px;
   overflow: hidden;
+  font-size: 16px; /* 增大 */
 }
 
 :deep(.el-table__header) {
@@ -574,28 +667,131 @@ export default {
 :deep(.el-table th) {
   background-color: #f0f8ff;
   font-weight: bold;
+  font-size: 16px; /* 增大 */
 }
 
-/* 返回按钮样式 */
+/* 返回按钮样式 - 增大字号 */
 .back-button {
   position: absolute;
-  top: 20px;
-  left: 20px;
+  top: 15px;
+  left: 15px;
   width: 120px;
-  padding: 10px;
+  height: 40px;
+  padding: 8px;
+  font-size: 18px; /* 增大 */
   background: linear-gradient(to right, #8DF9F0, #26B046);
   color: white;
   border-radius: 20px;
 }
 
+/* 土地类型部分样式 */
+.land-type-section {
+  margin-bottom: 25px; /* 增加底部间距 */
+  padding: 15px;
+  background-color: rgba(255, 255, 255, 0.5);
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.input-group {
+  margin-left: 20px;
+  margin-top: 15px; /* 增加顶部间距 */
+}
+
+.input-row {
+  margin-bottom: 15px;
+}
+
+/* 多选框样式增强 */
+.custom-checkbox {
+  padding: 15px 20px;
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.7);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+  border: 2px solid #dcdfe6;
+}
+
+.custom-checkbox:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  border-color: #1a8cff;
+}
+
+.custom-checkbox.is-checked {
+  background-color: #e6f7ff;
+  border-color: #1a8cff;
+  box-shadow: 0 4px 12px rgba(26, 140, 255, 0.2);
+}
+
+.checkbox-label {
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+  margin-left: 10px;
+}
+
 /* 响应式调整 */
 @media (max-width: 992px) {
   .image-row {
-    flex-direction: column;
+    height: auto;
+  }
+  
+  .image-wrapper {
+    height: 250px; /* 减小高度 */
   }
   
   .image-container {
     width: 100%;
+    margin-bottom: 20px;
+  }
+  
+  .input-group {
+    margin-left: 0;
+  }
+  
+  .page-title,
+  .result-title {
+    font-size: 24px; /* 增大 */
+  }
+  
+  .result-subtitle {
+    font-size: 18px; /* 增大 */
+  }
+  
+  .custom-checkbox {
+    padding: 12px 15px;
+  }
+}
+
+@media (max-height: 800px) {
+  .land-type-section {
+    padding: 10px;
+    margin-bottom: 15px; /* 增加底部间距 */
+  }
+  
+  .input-row {
+    margin-bottom: 8px;
+  }
+  
+  .calculate-btn {
+    height: 40px;
+    font-size: 16px; /* 增大 */
+    margin-top: 10px;
+  }
+  
+  .image-wrapper {
+    height: 200px; /* 进一步减小高度 */
+  }
+  
+  /* 在低高度屏幕上减小土地类型区块间距 */
+  .land-type-section {
+    margin-bottom: 10px;
+  }
+  
+  /* 在低高度屏幕上减小输入组上边距 */
+  .input-group {
+    margin-top: 10px;
   }
 }
 </style>

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

@@ -114,12 +114,12 @@
 export default {
   data() {
     return {
-      image1: '/图1.png',
-      image2: '/图片2.png',
-      image3: '/图片3.png',
-      fieldImage1: '/图片4.jpg',
-      fieldImage2: '/图片5.jpg',
-      fieldImage3: '/图片6.jpg'
+      image1: '/图1(1).png',
+      image2: '/图片2(1).png',
+      image3: '/图片3(1).png',
+      fieldImage1: '/图片4(1).jpg',
+      fieldImage2: '/图片5(1).jpg',
+      fieldImage3: '/图片6(1).jpg'
     };
   }
 };