Pārlūkot izejas kodu

边界接口修改1.0

yes-yes-yes-k 3 mēneši atpakaļ
vecāks
revīzija
5d9503f4e6

+ 1 - 1
src/components/atmpollution/airsampleLine.vue

@@ -168,7 +168,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' },
 ];

+ 6 - 6
src/components/atmpollution/atmcompanymap.vue

@@ -62,7 +62,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();
@@ -70,7 +70,7 @@ onMounted(() => {
     .then(townshipGeojson => {
       L.geoJSON(townshipGeojson, {
         style: (feature) => {
-          const countyName = feature.properties.FXZQMC || '';
+          const countyName = feature.properties.county_name || '';
           
           return {
             fillColor: getDistrictColor(countyName), // 使用所属区县的颜色
@@ -82,7 +82,7 @@ onMounted(() => {
         },
         
       }).addTo(map);
-      console.log('✅ 乡镇划分图加载完成,已按所属区县着色');
+      //console.log('✅ 乡镇划分图加载完成,已按所属区县着色');
     })
     .catch(err => {
       console.error('❌ 乡镇划分图加载失败:', err);
@@ -102,7 +102,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) => {
@@ -143,7 +143,7 @@ onMounted(() => {
         }
       });
 
-      console.log(`✅ 成功创建 ${markerCount} 个有效标记`);
+      //console.log(`✅ 成功创建 ${markerCount} 个有效标记`);
     })
     .catch(err => {
       console.error('❌ 接口数据加载失败:', err);
@@ -153,7 +153,7 @@ onMounted(() => {
   map.on('load', () => {
     setTimeout(() => {
       map.invalidateSize();
-      console.log('✅ 地图尺寸已重新计算');
+      //console.log('✅ 地图尺寸已重新计算');
     }, 300);
   });
 

+ 6 - 6
src/components/atmpollution/atmsamplemap.vue

@@ -148,18 +148,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);
           
           // 优先精确匹配,再归一化匹配
@@ -193,7 +193,7 @@ onMounted(() => {
         })
         .then(geojsonData => {
           const atmosphereData = geojsonData.features.map(feature => feature.properties);
-          console.log('✅ 大气数据加载完成,记录数:', atmosphereData.length);
+          //console.log('✅ 大气数据加载完成,记录数:', atmosphereData.length);
           markers.value = []; 
           
           atmosphereData.forEach((item, idx) => {
@@ -252,7 +252,7 @@ watch(
     markers.value.forEach(({ marker, item }) => {
       marker.bindPopup(generatePopupContent(item, newMethod));
     });
-    console.log(`✅ 已切换为${newMethod === 'weight' ? '重量' : '体积'}计算方式,弹窗内容已更新`);
+    //console.log(`✅ 已切换为${newMethod === 'weight' ? '重量' : '体积'}计算方式,弹窗内容已更新`);
   }
 );
 </script>

+ 2 - 2
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' 
       }"
@@ -370,7 +370,7 @@ onUnmounted(() => window.removeEventListener('resize', handleResize));
 /* 图表容器 */
 .chart-box {
   width: 100%;
-  min-height: 500px !important; /* 强制最小高度 */
+  min-height: 500px ; /* 强制最小高度 */
   border-radius: 8px;
   overflow: hidden;
 }

+ 2 - 2
src/components/irrpollution/waterassaydata2.vue

@@ -279,14 +279,14 @@ onUnmounted(() => window.removeEventListener('resize', resizeHandler));
 <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;

+ 1 - 1
src/components/soilStatictics/reducedataStatistics.vue

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

+ 22 - 10
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 {

+ 21 - 10
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;

+ 2 - 3
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;
 }
 
 /* 组件标题 */

+ 26 - 14
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;
 }