Эх сурвалжийг харах

Merge branch 'ding' of qw/12 into master

Ding 2 сар өмнө
parent
commit
4b568b60fd

+ 3 - 3
src/locales/zh.json

@@ -140,17 +140,17 @@
   },
   "strawRemoval": {
     "Title": "秸秆移除",
-    "samplingDesc2": "秸秆移除说明",
+    "samplingDesc2": "秸秆移除采样说明",
     "strawRemovalInputFlux": "秸秆移除输出通量"
   },
   "subsurfaceLeakage": {
     "Title": "地下渗漏",
-    "samplingDesc3": "地下渗漏说明",
+    "samplingDesc3": "地下渗漏采样说明",
     "subsurfaceLeakageInputFlux": "地下渗漏输出通量"
   },
   "surfaceRunoff": {
     "Title": "地表径流",
-    "samplingDesc4": "地表径流说明",
+    "samplingDesc4": "地表径流采样说明",
     "surfaceRunoffInputFlux": "地表径流输出通量"
   },
   "mapView": {

+ 23 - 21
src/views/User/cadmiumPrediction/CropCadmiumPrediction.vue

@@ -201,6 +201,9 @@ export default {
     this.fetchLatestResults();
     this.fetchStatistics();
     this.initTownshipMap();
+    
+    // 添加窗口调整事件监听
+    window.addEventListener('resize', this.handleResize);
   },
 
   beforeDestroy() {
@@ -211,6 +214,9 @@ export default {
       this.townshipMapInstance.dispose();
       this.townshipMapInstance = null;
     }
+    
+    // 移除窗口调整事件监听
+    window.removeEventListener('resize', this.handleResize);
   },
   methods: {
     // 触发文件选择
@@ -397,7 +403,9 @@ export default {
         this.loadingTownshipMap = true;
         // 步骤1:加载本地 GeoJSON 边界文件
         await this.loadLocalGeoJson();
-        // 步骤2:渲染边界地图(不关联接口数据)
+        // 步骤2:等待DOM更新完成
+        await this.$nextTick();
+        // 步骤3:渲染边界地图(不关联接口数据)
         this.renderTownshipMap();
       } catch (error) {
         console.error('乡镇边界加载失败:', error);
@@ -552,10 +560,12 @@ export default {
       // 5. 渲染地图
       this.townshipMapInstance.setOption(option);
 
-      // 6. 监听窗口 resize(地图自适应)
-      window.addEventListener('resize', () => {
-        this.townshipMapInstance && this.townshipMapInstance.resize();
-      });
+      // 6. 关键修复:添加延迟resize确保地图正确渲染
+      setTimeout(() => {
+        if (this.townshipMapInstance) {
+          this.townshipMapInstance.resize();
+        }
+      }, 100);
     },
     
     // 上传并计算
@@ -732,7 +742,9 @@ export default {
     
     // 处理窗口大小变化
     handleResize() {
-      if (this.distributionChart) this.distributionChart.resize();
+      if (this.townshipMapInstance) {
+        this.townshipMapInstance.resize();
+      }
     },
   }
 };
@@ -750,28 +762,18 @@ export default {
   box-sizing: border-box;
 }
 
-/* 新增:乡镇地图样式 */
-.township-map-section {
-  background-color: rgba(255, 255, 255, 0.8);
-  border-radius: 8px;
-  padding: 15px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
-  position: relative;
-  min-height: 500px; /* 与原有地图高度一致 */
-  backdrop-filter: blur(5px);
-  margin-bottom: 20px; /* 与下方地图间距 */
-}
 
 .township-map-container {
-  width: 1000px;
-  height: 500px; /* 减去标题高度 */
-  min-height: 470px;
+  width: 90%; /* 使用百分比宽度 */
+  max-width: 1000px; /* 最大宽度限制 */
+  height: 500px;
   border-radius: 4px;
   background-color: #fff;
+  margin: 15px auto; /* 上下15px,水平自动居中 */
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
 
-
 .toolbar {
   display: flex;
   flex-direction: column;

+ 1 - 0
src/views/login/loginView.vue

@@ -518,6 +518,7 @@ onMounted(() => {
   width: 100%;
   padding: 15px 10px;
   margin-bottom: 20px;
+  max-width: 600px; /* 限制最大宽度 */
 }
 
 /* 错误提示样式 */