修改水环境页面

src/views/waterStation/BusinessBg.vue

@@ -264,6 +264,8 @@ const currentImage = computed(() => {
 const backgroundImage = computed(() => {
   if (props.activeTab === 'resource') {
     return new URL("@/assets/images/水资源.png", import.meta.url).href
+  } else if (props.activeTab === 'environment') {
+    return new URL("@/assets/images/水质背景.png", import.meta.url).href
   } else {
     return new URL("@/assets/images/圩区.png", import.meta.url).href
   }

src/views/waterStation/WaterEnvironment.vue

@@ -34,33 +34,41 @@
           </div>
         </m-card>
         
-        <!-- 水质趋势 -->
-        <m-card title="水质趋势" class="water-environment-card water-environment-card-bottom" :width="398" :height="480">
-          <div class="water-quality-trend">
-            <div class="trend-chart">
-              <div class="chart-header">
-                <div class="chart-title">近7日水质变化</div>
-                <div class="chart-legend">
-                  <div class="legend-item">
-                    <div class="legend-color" style="background: #00d4ff;"></div>
-                    <span>优Ⅲ</span>
-                  </div>
-                  <div class="legend-item">
-                    <div class="legend-color" style="background: #ffaa00;"></div>
-                    <span>Ⅳ</span>
-                  </div>
-                  <div class="legend-item">
-                    <div class="legend-color" style="background: #ff4444;"></div>
-                    <span>劣Ⅴ</span>
-                  </div>
-                </div>
+        <!-- 污染源监控 -->
+        <m-card title="污染源监控" class="water-environment-card water-environment-card-bottom" :width="398" :height="480">
+          <div class="pollution-monitor">
+            <div class="pollution-stats">
+              <div class="pollution-item">
+                <div class="pollution-title">工业污染源</div>
+                <div class="pollution-value">12</div>
+                <div class="pollution-unit">个</div>
+              </div>
+              <div class="pollution-item">
+                <div class="pollution-title">生活污染源</div>
+                <div class="pollution-value">28</div>
+                <div class="pollution-unit">个</div>
+              </div>
+              <div class="pollution-item">
+                <div class="pollution-title">农业污染源</div>
+                <div class="pollution-value">15</div>
+                <div class="pollution-unit">个</div>
+              </div>
+            </div>
+            <div class="pollution-list">
+              <div class="pollution-list-header">
+                <div class="header-item">污染源名称</div>
+                <div class="header-item">类型</div>
+                <div class="header-item">排放量</div>
+                <div class="header-item">状态</div>
               </div>
-              <div class="chart-body">
-                <div class="chart-bar" v-for="(item, index) in trendData" :key="index">
-                  <div class="bar-wrapper">
-                    <div class="bar-fill" :style="{ height: item.height, background: item.color }"></div>
+              <div class="pollution-list-body">
+                <div class="pollution-item-row" v-for="(item, index) in pollutionList" :key="index">
+                  <div class="item-cell">{{ item.name }}</div>
+                  <div class="item-cell">{{ item.type }}</div>
+                  <div class="item-cell">{{ item.emission }}</div>
+                  <div class="item-cell">
+                    <div class="status-badge" :class="item.statusClass">{{ item.status }}</div>
                   </div>
-                  <div class="bar-label">{{ item.date }}</div>
                 </div>
               </div>
             </div>
@@ -73,8 +81,27 @@
     <div class="right-panel">
       <div class="right-panel-3d">
         <!-- 水质站点分布 -->
-        <m-card title="水质站点分布" class="water-environment-card water-environment-card-top" :width="398" :height="350">
+        <m-card title="水质站点分布" class="water-environment-card water-environment-card-full" :width="398" :height="810">
           <div class="station-distribution">
+            <!-- 区域水质评价 -->
+            <div class="area-quality-evaluation">
+              <div class="evaluation-title">区域水质评价</div>
+              <div class="evaluation-stats">
+                <div class="evaluation-item">
+                  <div class="evaluation-label">总体水质状况</div>
+                  <div class="evaluation-value good">良好</div>
+                </div>
+                <div class="evaluation-item">
+                  <div class="evaluation-label">主要污染因子</div>
+                  <div class="evaluation-value">氨氮</div>
+                </div>
+                <div class="evaluation-item">
+                  <div class="evaluation-label">达标率</div>
+                  <div class="evaluation-value">92%</div>
+                </div>
+              </div>
+            </div>
+            
             <div class="distribution-stats">
               <div class="stat-item excellent">
                 <div class="stat-icon">优</div>
@@ -107,47 +134,6 @@
             </div>
           </div>
         </m-card>
-        
-        <!-- 污染源监控 -->
-        <m-card title="污染源监控" class="water-environment-card water-environment-card-bottom" :width="398" :height="450">
-          <div class="pollution-monitor">
-            <div class="pollution-stats">
-              <div class="pollution-item">
-                <div class="pollution-title">工业污染源</div>
-                <div class="pollution-value">12</div>
-                <div class="pollution-unit">个</div>
-              </div>
-              <div class="pollution-item">
-                <div class="pollution-title">生活污染源</div>
-                <div class="pollution-value">28</div>
-                <div class="pollution-unit">个</div>
-              </div>
-              <div class="pollution-item">
-                <div class="pollution-title">农业污染源</div>
-                <div class="pollution-value">15</div>
-                <div class="pollution-unit">个</div>
-              </div>
-            </div>
-            <div class="pollution-list">
-              <div class="pollution-list-header">
-                <div class="header-item">污染源名称</div>
-                <div class="header-item">类型</div>
-                <div class="header-item">排放量</div>
-                <div class="header-item">状态</div>
-              </div>
-              <div class="pollution-list-body">
-                <div class="pollution-item-row" v-for="(item, index) in pollutionList" :key="index">
-                  <div class="item-cell">{{ item.name }}</div>
-                  <div class="item-cell">{{ item.type }}</div>
-                  <div class="item-cell">{{ item.emission }}</div>
-                  <div class="item-cell">
-                    <div class="status-badge" :class="item.statusClass">{{ item.status }}</div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </m-card>
       </div>
     </div>
   </div>
@@ -185,7 +171,17 @@ const stationList = ref([
   { name: '斜塘', level: 'Ⅲ类', levelClass: 'level-good', score: '85' },
   { name: '赵库', level: 'Ⅱ类', levelClass: 'level-excellent', score: '90' },
   { name: '兵希(浏)', level: 'Ⅲ类', levelClass: 'level-good', score: '82' },
-  { name: '大直', level: 'Ⅳ类', levelClass: 'level-poor', score: '68' }
+  { name: '大直', level: 'Ⅳ类', levelClass: 'level-poor', score: '68' },
+  { name: '周市', level: 'Ⅱ类', levelClass: 'level-excellent', score: '94' },
+  { name: '陆家', level: 'Ⅲ类', levelClass: 'level-good', score: '87' },
+  { name: '张浦', level: 'Ⅱ类', levelClass: 'level-excellent', score: '91' },
+  { name: '千灯', level: 'Ⅲ类', levelClass: 'level-good', score: '83' },
+  { name: '淀山湖', level: 'Ⅱ类', levelClass: 'level-excellent', score: '93' },
+  { name: '花桥', level: 'Ⅲ类', levelClass: 'level-good', score: '84' },
+  { name: '锦溪', level: 'Ⅱ类', levelClass: 'level-excellent', score: '95' },
+  { name: '周庄', level: 'Ⅲ类', levelClass: 'level-good', score: '86' },
+  { name: '玉山', level: 'Ⅱ类', levelClass: 'level-excellent', score: '92' },
+  { name: '蓬朗', level: 'Ⅲ类', levelClass: 'level-good', score: '81' }
 ])
 
 const pollutionList = ref([
@@ -499,6 +495,48 @@ const pollutionList = ref([
   border-radius: 6px;
 }
 
+.area-quality-evaluation {
+  padding: 12px;
+  background: rgba(0, 100, 150, 0.3);
+  border: 1px solid rgba(48, 220, 255, 0.3);
+  border-radius: 6px;
+  margin-bottom: 8px;
+  
+  .evaluation-title {
+    color: #30DCFF;
+    font-size: 14px;
+    font-weight: bold;
+    margin-bottom: 10px;
+  }
+  
+  .evaluation-stats {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 10px;
+  }
+  
+  .evaluation-item {
+    text-align: center;
+    
+    .evaluation-label {
+      font-size: 11px;
+      color: rgba(255, 255, 255, 0.8);
+      margin-bottom: 5px;
+    }
+    
+    .evaluation-value {
+      font-size: 16px;
+      font-weight: bold;
+      color: #30DCFF;
+      font-family: "D-DIN";
+      
+      &.good {
+        color: #00ff88;
+      }
+    }
+  }
+}
+
 .distribution-stats {
   display: grid;
   grid-template-columns: repeat(3, 1fr);