Merge branch 'lili' of qw/12 into master

components.d.ts

@@ -29,7 +29,6 @@ declare module 'vue' {
     CrossSetionData2: typeof import('./src/components/irrpollution/crossSetionData2.vue')['default']
     CrossSetionTencentmap: typeof import('./src/components/irrpollution/crossSetionTencentmap.vue')['default']
     EffcdStatistics: typeof import('./src/components/soilcdStatistics/effcdStatistics.vue')['default']
-    ElAlert: typeof import('element-plus/es')['ElAlert']
     ElAside: typeof import('element-plus/es')['ElAside']
     ElAvatar: typeof import('element-plus/es')['ElAvatar']
     ElButton: typeof import('element-plus/es')['ElButton']
@@ -37,16 +36,12 @@ declare module 'vue' {
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
     ElContainer: typeof import('element-plus/es')['ElContainer']
-    ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDropdown: typeof import('element-plus/es')['ElDropdown']
     ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
     ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
-    ElForm: typeof import('element-plus/es')['ElForm']
-    ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElHeader: typeof import('element-plus/es')['ElHeader']
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElImage: typeof import('element-plus/es')['ElImage']
-    ElInput: typeof import('element-plus/es')['ElInput']
     ElMain: typeof import('element-plus/es')['ElMain']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
@@ -59,9 +54,6 @@ declare module 'vue' {
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
     ElTabs: typeof import('element-plus/es')['ElTabs']
-    ElTag: typeof import('element-plus/es')['ElTag']
-    ElTooltip: typeof import('element-plus/es')['ElTooltip']
-    ElUpload: typeof import('element-plus/es')['ElUpload']
     FluxcdStatictics: typeof import('./src/components/soilcdStatistics/fluxcdStatictics.vue')['default']
     HeavyMetalEnterprisechart: typeof import('./src/components/atmpollution/heavyMetalEnterprisechart.vue')['default']
     HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
@@ -87,7 +79,4 @@ declare module 'vue' {
     Waterdataline: typeof import('./src/components/irrpollution/waterdataline.vue')['default']
     WelcomeItem: typeof import('./src/components/WelcomeItem.vue')['default']
   }
-  export interface GlobalDirectives {
-    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
-  }
 }

src/components/atmpollution/airsampleLine.vue

@@ -170,7 +170,7 @@ const weightColumns = [
   { key: 'Cr_particulate', label: 'Cr mg/kg', type: 'number', width: '80px' },
   { key: 'As_particulate', label: 'As mg/kg', type: 'number', width: '80px' },
   { key: 'Cd_particulate', label: 'Cd mg/kg', type: 'number', width: '80px' },
-  { key: 'Hg_particulate', label: 'Hg mg/kg', type: 'number', width: '80px' },
+  { key: 'Hg_particulate', label: 'Hg mg/kg', type: 'number', width: '85px' },
   { key: 'Pb_particulate', label: 'Pb mg/kg', type: 'number', width: '80px' },
   { key: 'particle_weight', label: '颗粒物重量 mg', type: 'number', width: '140px' },
 ];

src/components/atmpollution/atmcompanymap.vue

@@ -63,7 +63,7 @@ onMounted(() => {
   }
 
   // 只加载乡镇级GeoJSON，并根据所属区县着色
-  fetch('/data/韶关市乡镇划分图.geojson')
+  fetch('http://localhost:8000/api/vector/export/all?table_name=town&format=geojson')
     .then(res => {
       if (!res.ok) throw new Error(`乡镇划分图加载失败：${res.status}`);
       return res.json();
@@ -71,7 +71,7 @@ onMounted(() => {
     .then(townshipGeojson => {
       L.geoJSON(townshipGeojson, {
         style: (feature) => {
-          const countyName = feature.properties.FXZQMC || '';
+          const countyName = feature.properties.county_name || '';
           
           return {
             fillColor: getDistrictColor(countyName), // 使用所属区县的颜色
@@ -83,7 +83,7 @@ onMounted(() => {
         },
         
       }).addTo(map);
-      console.log('✅ 乡镇划分图加载完成，已按所属区县着色');
+      //console.log('✅ 乡镇划分图加载完成，已按所属区县着色');
     })
     .catch(err => {
       console.error('❌ 乡镇划分图加载失败：', err);
@@ -105,7 +105,7 @@ onMounted(() => {
       
       const geoJSONData = JSON.parse(fixedText);
       
-      console.log('✅ 接口数据加载完成，共', geoJSONData.features.length, '条记录');
+      //console.log('✅ 接口数据加载完成，共', geoJSONData.features.length, '条记录');
       
       let markerCount = 0;
       geoJSONData.features.forEach((feature, idx) => {
@@ -146,7 +146,7 @@ onMounted(() => {
         }
       });
 
-      console.log(`✅ 成功创建 ${markerCount} 个有效标记`);
+      //console.log(`✅ 成功创建 ${markerCount} 个有效标记`);
     })
     .catch(err => {
       console.error('❌ 接口数据加载失败：', err);
@@ -156,7 +156,7 @@ onMounted(() => {
   map.on('load', () => {
     setTimeout(() => {
       map.invalidateSize();
-      console.log('✅ 地图尺寸已重新计算');
+      //console.log('✅ 地图尺寸已重新计算');
     }, 300);
   });
 

src/components/atmpollution/atmsamplemap.vue

@@ -149,18 +149,18 @@ onMounted(() => {
     "乳源": "#FF9F1C" // 可选：支持归一化后匹配（如GeoJSON是“乳源”时）
   };
 
-  // 加载区县边界（关键修改：匹配FXZQMC字段 + 归一化）
-  fetch('/data/韶关市乡镇划分图.geojson')
+  // 加载区县边界（关键修改：匹配FXZQMC字段 + 归一化）http://localhost:8000/api/vector/export/all?table_name=town&format=geojson
+  fetch('http://localhost:8000/api/vector/export/all?table_name=town_boundary&format=geojson')
     .then(res => {
       if (!res.ok) throw new Error(`区县边界加载失败：${res.status}`);
       return res.json();
     })
     .then(geojson => {
-      console.log('✅ 区县边界数据加载完成，要素数：', geojson.features.length);
+      //console.log('✅ 区县边界数据加载完成，要素数：', geojson.features.length);
       
       L.geoJSON(geojson, {
         style: (feature) => {
-          const rawDistrictName = feature.properties.FXZQMC || ''; // 从FXZQMC提取
+          const rawDistrictName = feature.properties.county_name || ''; // 从FXZQMC提取
           const normalizedName = normalizeDistrictName(rawDistrictName);
           
           // 优先精确匹配，再归一化匹配
@@ -186,16 +186,22 @@ onMounted(() => {
           const validJsonText = text.replace(/NaN/g, 'null');
           
           try {
-            const geojsonData = JSON.parse(validJsonText);
-            const atmosphereData = geojsonData.features.map(feature => feature.properties);
-            console.log('✅ 大气数据加载完成，记录数：', atmosphereData.length);
-            markers.value = []; 
-            
-            atmosphereData.forEach((item, idx) => {
-              try {
-                // 提取经纬度（兼容 properties 和 geometry）
-                let lat = item.latitude;
-                let lng = item.longitude;
+            return JSON.parse(validJsonText);
+          } catch (err) {
+            console.error('❌ JSON 解析失败（原始数据含非法值）：', err);
+            throw new Error('数据格式错误，请检查服务端返回');
+          }
+        })
+        .then(geojsonData => {
+          const atmosphereData = geojsonData.features.map(feature => feature.properties);
+          //console.log('✅ 大气数据加载完成，记录数：', atmosphereData.length);
+          markers.value = []; 
+          
+          atmosphereData.forEach((item, idx) => {
+            try {
+              // 提取经纬度（兼容 properties 和 geometry）
+              let lat = item.latitude;
+              let lng = item.longitude;
 
                 if (lat === undefined || lng === undefined) {
                   if (item.geometry && item.geometry.type === 'Point' && item.geometry.coordinates.length === 2) {
@@ -228,10 +234,6 @@ onMounted(() => {
                 console.error(`❌ 处理大气数据失败（第${idx}条）：`, err);
               }
             });
-          } catch (parseErr) {
-            console.error('❌ JSON 解析失败（原始数据含非法值）：', parseErr);
-            throw new Error('数据格式错误，请检查服务端返回');
-          }
         })
         .catch(err => {
           console.error('❌ 大气数据加载失败：', err);
@@ -251,7 +253,7 @@ watch(
     markers.value.forEach(({ marker, item }) => {
       marker.bindPopup(generatePopupContent(item, newMethod));
     });
-    console.log(`✅ 已切换为${newMethod === 'weight' ? '重量' : '体积'}计算方式，弹窗内容已更新`);
+    //console.log(`✅ 已切换为${newMethod === 'weight' ? '重量' : '体积'}计算方式，弹窗内容已更新`);
   }
 );
 </script>

src/components/atmpollution/heavyMetalEnterprisechart.vue

@@ -23,7 +23,7 @@
       ref="chartRef" 
       class="chart-box"
       :style="{ 
-        height: '500px', 
+        height: '100%', 
         border: '2px solid #1890ff', 
         position: 'relative' 
       }"
@@ -371,7 +371,7 @@ onUnmounted(() => window.removeEventListener('resize', handleResize));
 /* 图表容器 */
 .chart-box {
   width: 100%;
-  min-height: 500px !important; /* 强制最小高度 */
+  min-height: 500px ; /* 强制最小高度 */
   border-radius: 8px;
   overflow: hidden;
 }

src/components/detectionStatistics/atmsampleStatistics.vue

@@ -136,7 +136,7 @@ export default {
         log('发起新接口请求，获取统计数据...')
         // 使用 api8000 替代 axios
         const response = await api8000.get(apiUrl.value)
-        const apiData = response.data
+        const apiData = response.data.data
 
         // 从接口数据中提取每个重金属的统计量
         const stats = heavyMetals.map(metal => {

src/components/detectionStatistics/irrigationstatistics.vue

@@ -151,7 +151,7 @@ export default {
       try {
         // 使用api8000替代axios
         const response = await api8000.get(apiUrl.value);
-        statsData.value = response.data; 
+        statsData.value = response.data.data; 
         apiTimestamp.value = new Date().toLocaleString();
         initChart();
       } catch (err) {

src/components/irrpollution/waterassaydata2.vue

@@ -317,14 +317,14 @@ onUnmounted(() => {
 <style scoped>
 .region-average-chart {
   width: 100%;
-  height: 500px;
+  height: 100%;
   max-width: 1200px;
   margin: 0 auto;
   position: relative;
 }
 .chart-box {
   width: 100%;
-  height: 500px;
+  height: 100%;
   min-height: 400px;
   background-color: white;
   border-radius: 8px;

src/components/soilStatictics/reducedataStatistics.vue

@@ -173,7 +173,7 @@ export default {
         
         const option = {
           title: {
-            text: '随机样本点的pH值趋势图',
+            text: '酸化缓解样本点的pH值趋势图',
             left: 'center',
             top: 10
           },

src/components/soilcdStatistics/cropcdStatictics.vue

@@ -48,7 +48,8 @@
 <script setup>
 import { ref, onMounted, nextTick } from 'vue';
 import * as echarts from 'echarts';
-import { api8000 } from '@/utils/request'; // 导入 api8000 实例
+import { api8000 } from '@/utils/request'; // 导入 api8000 实例import {api8000} from '@/utils/request'
+
 
 // 图表实例引用
 const cdBarChart = ref(null);
@@ -116,14 +117,33 @@ const fieldConfig = {
   ]
 };
 
-// 数据请求（作物态Cd接口）
+
+// 数据请求 - 增强错误处理和调试
 const fetchData = async () => {
   try {
-    const apiUrl = '/api/vector/stats/CropCd_input_data'; // 相对路径
-    const response = await api8000.get(apiUrl); // 使用 api8000
-    return response.data;
+    isLoading.value = true;
+    const apiUrl = '/api/vector/stats/CropCd_input_data';
+    console.log('正在请求数据:', apiUrl);
+    
+    const response = await api8000.get(apiUrl);
+    console.log('API响应:', response);
+    
+    // 调试：输出响应结构
+    console.log('响应数据:', response.data);
+    
+    // 处理不同的响应格式
+    let processedData;
+    processedData = response.data.data;
+    
+    if (!processedData) {
+      throw new Error('无法解析API返回的数据结构');
+    }
+    
+    console.log('处理后的数据:', processedData);
+    return processedData;
   } catch (err) {
-    throw new Error('数据加载失败: ' + err.message);
+    console.error('数据请求失败:', err);
+    throw new Error(`数据加载失败: ${err.message || '网络或服务器错误'}`);
   }
 };
 

src/components/soilcdStatistics/effcdStatistics.vue

@@ -100,14 +100,31 @@ const fieldConfig = {
   ]
 };
 
-// 数据请求
 const fetchData = async () => {
   try {
-    // 使用 api8000 替代 axios
-    const res = await api8000.get("/api/vector/stats/EffCd_input_data");
-    return res.data;
+    isLoading.value = true;
+    const apiUrl = '/api/vector/stats/EffCd_input_data';
+    console.log('正在请求数据:', apiUrl);
+    
+    const response = await api8000.get(apiUrl);
+    console.log('API响应:', response);
+    
+    // 调试：输出响应结构
+    console.log('响应数据:', response.data);
+    
+    // 处理不同的响应格式
+    let processedData;
+    processedData = response.data.data;
+    
+    if (!processedData) {
+      throw new Error('无法解析API返回的数据结构');
+    }
+    
+    console.log('处理后的数据:', processedData);
+    return processedData;
   } catch (err) {
-    throw new Error('数据加载失败: ' + err.message);
+    console.error('数据请求失败:', err);
+    throw new Error(`数据加载失败: ${err.message || '网络或服务器错误'}`);
   }
 };
 

src/components/soilcdStatistics/fluxcdStatictics.vue

@@ -85,7 +85,6 @@ const fieldConfig = {
   ]
 };
 
-// 数据请求 - 增强错误处理和调试
 const fetchData = async () => {
   try {
     isLoading.value = true;
@@ -100,24 +99,7 @@ const fetchData = async () => {
     
     // 处理不同的响应格式
     let processedData;
-    if (response.data && typeof response.data === 'object') {
-      // 情况1: 直接返回统计对象
-      if (response.data.Initial_Cd || response.data.DQCJ_Cd) {
-        processedData = response.data;
-      }
-      // 情况2: 包含features数组
-      else if (response.data.features && Array.isArray(response.data.features)) {
-        processedData = response.data.features.map(f => f.properties);
-      }
-      // 情况3: 包含data数组
-      else if (response.data.data && Array.isArray(response.data.data)) {
-        processedData = response.data.data;
-      }
-      // 情况4: 数组直接返回
-      else if (Array.isArray(response.data)) {
-        processedData = response.data;
-      }
-    }
+    processedData = response.data.data;
     
     if (!processedData) {
       throw new Error('无法解析API返回的数据结构');
@@ -131,44 +113,33 @@ const fetchData = async () => {
   }
 };
 
-// 计算统计量 - 支持原始数据和预统计数据
-const calculateFieldStats = (data, fieldKey, fieldName) => {
-  // 如果已经是预统计好的数据
-  if (data[fieldKey] && typeof data[fieldKey] === 'object') {
-    const fieldStats = data[fieldKey];
-    return {
-      key: fieldKey,
-      name: fieldName,
-      min: fieldStats.min || null,
-      q1: fieldStats.q1 || null,
-      median: fieldStats.median || null,
-      q3: fieldStats.q3 || null,
-      max: fieldStats.max || null,
-      count: fieldStats.count || 0
-    };
-  }
-  
-  // 如果是原始数据数组，需要手动计算统计量
-  if (Array.isArray(data)) {
-    const values = data
-      .map(item => parseFloat(item[fieldKey]))
-      .filter(val => !isNaN(val) && val !== null);
-    
-    if (values.length === 0) {
-      return { key: fieldKey, name: fieldName, min: null, q1: null, median: null, q3: null, max: null, count: 0 };
-    }
-    
-    values.sort((a, b) => a - b);
-    const min = values[0];
-    const max = values[values.length - 1];
-    const median = values[Math.floor(values.length / 2)];
-    const q1 = values[Math.floor(values.length / 4)];
-    const q3 = values[Math.floor(values.length * 3 / 4)];
-    
-    return { key: fieldKey, name: fieldName, min, q1, median, q3, max, count: values.length };
+
+// 计算单个字段的统计量
+const calculateFieldStats = (statsData, fieldKey, fieldName) => {
+  // 从接口数据中获取当前字段的统计结果
+  const fieldStats = statsData[fieldKey]; 
+  if (!fieldStats) {
+    return { key: fieldKey, name: fieldName, min: null, q1: null, median: null, q3: null, max: null };
   }
-  
-  return { key: fieldKey, name: fieldName, min: null, q1: null, median: null, q3: null, max: null, count: 0 };
+
+  // 提取预统计值
+  let min = fieldStats.min;
+  let q1 = fieldStats.q1;
+  let median = fieldStats.median;
+  let q3 = fieldStats.q3;
+  let max = fieldStats.max;
+
+  // 强制校正统计量顺序（确保 min ≤ q1 ≤ median ≤ q3 ≤ max）
+  const sortedStats = [min, q1, median, q3, max].sort((a, b) => a - b);
+  return {
+    key: fieldKey,
+    name: fieldName,
+    min: sortedStats[0],
+    q1: sortedStats[1],
+    median: sortedStats[2],
+    q3: sortedStats[3],
+    max: sortedStats[4]
+  };
 };
 
 // 计算所有统计数据

src/utils/request.ts

@@ -1,9 +1,9 @@
 // src/utils/request.ts
 import axios from 'axios';
-import type { 
-  AxiosInstance, 
-  AxiosRequestConfig, 
-  AxiosResponse, 
+import type {
+  AxiosInstance,
+  AxiosRequestConfig,
+  AxiosResponse,
   AxiosError,
   InternalAxiosRequestConfig,
   AxiosRequestHeaders
@@ -19,24 +19,24 @@ interface CustomAxiosInstance extends AxiosInstance {
 
 // 创建API客户端
 export const api5000: CustomAxiosInstance = axios.create({
-  baseURL: isDevelopment 
-    ? 'http://localhost:5000' 
+  baseURL: isDevelopment
+    ? 'http://localhost:5000'
     : 'https://www.soilgd.com:5000',
   timeout: 100000,
   withCredentials: false  // 关键修改：除非需要cookie，否则设为false
 });
 
 export const api8000: CustomAxiosInstance = axios.create({
-  baseURL: isDevelopment 
-    ? 'http://localhost:8000' 
+  baseURL: isDevelopment
+    ? 'http://localhost:8000'
     : 'https://www.soilgd.com:8000',
   timeout: 100000,
   withCredentials: true
 });
 
 export const apiMain: CustomAxiosInstance = axios.create({
-  baseURL: isDevelopment 
-    ? 'http://localhost' 
+  baseURL: isDevelopment
+    ? 'http://localhost'
     : 'https://www.soilgd.com',
   timeout: 100000,
   withCredentials: true
@@ -48,9 +48,9 @@ function isGeoJSONResponse(response: AxiosResponse): boolean {
   const contentType = response.headers['content-type'] || '';
   return (
     contentType.includes('application/geo+json') ||
-    (contentType.includes('application/json') && 
-     (response.data?.type === 'FeatureCollection' || 
-      response.data?.type === 'Feature'))
+    (contentType.includes('application/json') &&
+      (response.data?.type === 'FeatureCollection' ||
+        response.data?.type === 'Feature'))
   );
 }
 
@@ -66,25 +66,25 @@ const setupInterceptors = (instance: CustomAxiosInstance) => {
         }
         config.headers.set('Authorization', `Bearer ${token}`);
       }
-      
+
       // 为GeoJSON请求设置Accept头
       if (config.url?.match(/\/geojson|\/vector/i)) {
         if (!config.headers) {
           config.headers = new axios.AxiosHeaders();
         }
         config.headers.set('Accept', 'application/geo+json, application/json');
-        
+
         // 为GeoJSON请求设置更长的超时时间
         if (!config.timeout || config.timeout < 180000) {
           config.timeout = 180000; // 3分钟
         }
       }
-      
+
       return config;
     },
     (error: AxiosError) => Promise.reject(error)
   );
-  
+
   // 响应拦截器
   instance.interceptors.response.use(
     (response: AxiosResponse) => {
@@ -93,7 +93,7 @@ const setupInterceptors = (instance: CustomAxiosInstance) => {
       const isBlob = response.config.responseType === 'blob';
       const isImage = contentType.includes('image/');
       const isJSON = contentType.includes('application/json');
-      
+
       console.log('响应处理:', {
         url: response.config.url,
         responseType: response.config.responseType,
@@ -102,23 +102,23 @@ const setupInterceptors = (instance: CustomAxiosInstance) => {
         isImage,
         isJSON
       });
-      
+
       // 1. 处理二进制响应（图片/文件下载）
       if (isBlob || isImage) {
         return response;
       }
-      
+
       // 2. 处理GeoJSON响应（新增部分）
       if (isGeoJSONResponse(response)) {
         console.log('检测到GeoJSON响应，返回完整响应对象');
         return response;
       }
-      
+
       // 3. 处理普通JSON响应
       if (isJSON) {
         return response;
       }
-      
+
       // 4. 其他类型响应
       return response;
     },

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

@@ -3,6 +3,7 @@
     <!-- 系统标题区域 -->
     <div class="header-section">
       <div class="header-content">
+        <div class="section-icon">📊</div>
         <h1 class="system-title">韶关市大气重金属污染采样</h1>
         <div class="calculation-selector">
           <span class="selector-title">采样方式：</span>
@@ -99,7 +100,10 @@ const toggleMapType = () => {
 
 /* 页眉区域 */
 .header-section {
-   text-align: center;
+   display: flex;
+  align-items: center;
+  gap: 15px;
+  margin-bottom: 20px;
   position: relative;
 }
 
@@ -110,18 +114,24 @@ const toggleMapType = () => {
 }
 
 .system-title {
-  color: #1a365d;
-  font-size: 2.8rem;
-  margin-bottom: 12px;
+  font-size: 2.2rem;
   font-weight: 700;
-  letter-spacing: 0.5px;
-  text-shadow: 0 2px 4px rgba(0,0,0,0.05);
+  color: #1a365d;
+  position: relative;
+  padding-left: 15px;
+  flex-grow: 1;
+  margin-right: 260px;
 }
 
-.system-subtitle {
-  font-size: 1.3rem;
-  color: #cbd5e0;
-  margin: 0;
+.system-title::after {
+  content: "";
+  position: absolute;
+  bottom: -8px;
+  left: 0;
+  width: 100px;
+  height: 4px;
+  background: linear-gradient(90deg, #4a9ef7, #3acfd5);
+  border-radius: 2px;
 }
 
 .calculation-selector {
@@ -129,6 +139,8 @@ const toggleMapType = () => {
   align-items: center;
   gap: 15px;
   margin-top: 20px;
+  margin-left: auto;
+  margin-right: 0;
 }
 
 .selector-icon {

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

@@ -3,6 +3,7 @@
     <!-- 页面标题区域 -->
     <div class="header-section">
       <div class="header-content">
+        <div class="section-icon">📊</div>
         <h1 class="system-title">韶关市涉重企业重金属排放调查</h1>
       </div>
     </div>
@@ -83,7 +84,10 @@ import HeavyMetalEnterprisechart from '@/components/atmpollution/heavyMetalEnter
 
 /* 页眉区域 */
 .header-section {
- text-align: center;
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  margin-bottom: 20px;
   position: relative;
 }
 
@@ -94,20 +98,27 @@ import HeavyMetalEnterprisechart from '@/components/atmpollution/heavyMetalEnter
 }
 
 .system-title {
-  color: #1a365d;
-  font-size: 2.8rem;
-  margin-bottom: 12px;
+  font-size: 2.2rem;
   font-weight: 700;
-  letter-spacing: 0.5px;
-  text-shadow: 0 2px 4px rgba(0,0,0,0.05);
+  color: #1a365d;
+  margin: 0;
+  position: relative;
+  padding-left: 15px;
+  flex-grow: 1;
 }
 
-.system-subtitle {
-  font-size: 1.3rem;
-  color: #cbd5e0;
-  margin: 10px 0 0;
+.system-title::after {
+  content: "";
+  position: absolute;
+  bottom: -8px;
+  left: 0;
+  width: 100px;
+  height: 4px;
+  background: linear-gradient(90deg, #4a9ef7, #3acfd5);
+  border-radius: 2px;
 }
 
+
 .header-actions {
   display: flex;
   gap: 15px;

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

@@ -89,7 +89,7 @@ import crosssectionmap from '@/components/irrpollution/crosssectionmap.vue';
   min-height: 100vh;
   background: linear-gradient(135deg, #f0f9ff 0%, #e6f7ff 100%);
   padding: 25px;
-  gap: 30px;
+  gap: 20px;
   position: relative;
   overflow-x: hidden;
 }
@@ -133,7 +133,7 @@ import crosssectionmap from '@/components/irrpollution/crosssectionmap.vue';
 .dashboard-section {
   display: flex;
   flex-direction: column;
-  gap: 20px;
+  margin-bottom: 30px;
 }
 
 /* 卡片设计 */
@@ -211,7 +211,6 @@ import crosssectionmap from '@/components/irrpollution/crosssectionmap.vue';
 .chart-header p {
   font-size: 1rem;
   color: #718096;
-  margin: 0;
 }
 
 /* 组件标题 */

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

@@ -1,13 +1,9 @@
 <template>
   <div class="page-container">
     <!-- 页眉设计 -->
-    <div class="header">
-      <div class="header-content">
-        <div class="header-left">
-          <h1>灌溉水采样点分析系统</h1>
-        </div>
-      </div>
-      <div class="header-divider"></div>
+    <div class="section-header">
+        <div class="section-icon">📊</div>
+        <h1 class="page-title">灌溉水采样点分析系统</h1>
     </div>
 
     <!-- 主内容区 -->
@@ -78,6 +74,27 @@ import irrwatermap from '@/components/irrpollution/irrwatermap.vue';
   overflow-x: hidden;
 }
 
+.page-title {
+  font-size: 2.2rem;
+  font-weight: 700;
+  color: #1a365d;
+  margin: 0;
+  position: relative;
+  padding-left: 15px;
+  flex-grow: 1;
+}
+
+.page-title::after {
+  content: "";
+  position: absolute;
+  bottom: -8px;
+  left: 0;
+  width: 100px;
+  height: 4px;
+  background: linear-gradient(90deg, #4a9ef7, #3acfd5);
+  border-radius: 2px;
+}
+
 /* 页眉样式 */
 .header {
   border-radius: 16px;
@@ -135,11 +152,6 @@ import irrwatermap from '@/components/irrpollution/irrwatermap.vue';
   font-weight: 500;
 }
 
-.header-divider {
-  height: 1px;
-  background: linear-gradient(90deg, transparent, #cbd5e0, transparent);
-}
-
 /* 主内容区 */
 .main-content {
   display: flex;
@@ -158,11 +170,11 @@ import irrwatermap from '@/components/irrpollution/irrwatermap.vue';
   align-items: center;
   gap: 15px;
   margin-bottom: 20px;
-  padding: 0 10px;
+  position: relative;
 }
 
 .section-icon {
-  font-size: 2rem;
+  font-size: 2.5rem;
   color: #3a9fd3;
 }