修改工情页面样式

src/views/waterStation/index.vue

@@ -10,13 +10,6 @@
           <div class="left-panel-3d">
             <m-card title="圩区统计" class="water-station-card water-station-card-top" :width="398" :height="280">
               <div class="stats-panel">
-                <div class="core-indicator">
-                  <div class="indicator-main">
-                    <span class="main-value">94</span>
-                    <span class="main-unit">个</span>
-                  </div>
-                  <div class="indicator-label">圩区总数</div>
-                </div>
                 <div class="stats-grid">
                   <div class="stat-item">
                     <div class="stat-value">18</div>
@@ -37,30 +30,26 @@
                 </div>
               </div>
             </m-card>
-            <m-card title="圩区信息" class="water-station-card water-station-card-bottom" :width="398" :height="520">
-              <div class="polder-list">
-                <div class="polder-list-header">
-                  <div class="header-item">序号</div>
-                  <div class="header-item">圩区名称</div>
-                  <div class="header-item">实时水位</div>
-                  <div class="header-item">控制水位</div>
-                  <div class="header-item">流量</div>
-                  <div class="header-item">运行情况</div>
-                </div>
-                <div class="polder-list-body">
-                  <div class="polder-item" v-for="(item, index) in polderList" :key="index">
-                    <div class="item-cell">{{ index + 1 }}</div>
-                    <div class="item-cell">{{ item.name }}</div>
-                    <div class="item-cell">{{ item.waterLevel }}</div>
-                    <div class="item-cell">{{ item.controlLevel }}</div>
-                    <div class="item-cell">{{ item.flow }}</div>
-                    <div class="item-cell">
-                      <div class="rate-bar">
-                        <div class="rate-fill" :style="{ width: item.rate }"></div>
-                        <span class="rate-text">{{ item.rate }}</span>
-                      </div>
-                    </div>
+            
+            <m-card title="流域工情" class="water-station-card water-station-card-bottom" :width="398" :height="500">
+              <div class="basin-work-panel">
+                <!-- 监测工程信息 -->
+                <div class="monitoring-project-info">
+                  <div class="monitoring-icon">
+                    <img src="@/assets/images/icon1.png" alt="监测工程图标" />
                   </div>
+                  <div class="monitoring-project-value">37座</div>
+                  <div class="monitoring-project-label">监测工程</div>
+                </div>
+                
+                <!-- 开泵台数和流量组合图表 -->
+                <div class="pump-chart-container">
+                  <VChart ref="pumpChart" :option="pumpChartOption" :autoresize="true" style="width: 100%; height: 100%;" />
+                </div>
+                
+                <!-- 排水量折线图 -->
+                <div class="drainage-chart-container">
+                  <VChart ref="drainageChart" :option="drainageChartOption" :autoresize="true" style="width: 100%; height: 100%;" />
                 </div>
               </div>
             </m-card>
@@ -71,7 +60,7 @@
         <div class="right-panel">
           <div class="right-panel-3d">
             <!-- 气象预警信息 -->
-            <m-card title="气象预警信息" class="water-station-card water-station-card-top" :width="398" :height="320">
+            <m-card title="气象预警信息" class="water-station-card water-station-card-top" :width="398" :height="280">
               <div class="weather-warning-panel">
                 <div class="warning-grid">
                   <div class="warning-item">
@@ -111,7 +100,7 @@
             </m-card>
             
             <!-- 预警统计 -->
-            <m-card title="预警统计" class="water-station-card water-station-card-bottom" :width="398" :height="240">
+            <m-card title="预警统计" class="water-station-card water-station-card-middle" :width="398" :height="180">
               <div class="warning-stats-panel">
                 <div class="stats-grid">
                   <div class="stat-card warning-stat">
@@ -129,6 +118,35 @@
                 </div>
               </div>
             </m-card>
+            
+            <!-- 圩区信息 -->
+            <m-card title="圩区信息" class="water-station-card water-station-card-bottom" :width="398" :height="420">
+              <div class="polder-list">
+                <div class="polder-list-header">
+                  <div class="header-item">序号</div>
+                  <div class="header-item">圩区名称</div>
+                  <div class="header-item">实时水位</div>
+                  <div class="header-item">控制水位</div>
+                  <div class="header-item">流量</div>
+                  <div class="header-item">运行情况</div>
+                </div>
+                <div class="polder-list-body">
+                  <div class="polder-item" v-for="(item, index) in polderList" :key="index">
+                    <div class="item-cell">{{ index + 1 }}</div>
+                    <div class="item-cell">{{ item.name }}</div>
+                    <div class="item-cell">{{ item.waterLevel }}</div>
+                    <div class="item-cell">{{ item.controlLevel }}</div>
+                    <div class="item-cell">{{ item.flow }}</div>
+                    <div class="item-cell">
+                      <div class="rate-bar">
+                        <div class="rate-fill" :style="{ width: item.rate }"></div>
+                        <span class="rate-text">{{ item.rate }}</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </m-card>
           </div>
         </div>
       </template>
@@ -258,6 +276,221 @@ const resourceList = ref([
   { name: '阳澄湖水源地', type: '湖泊', capacity: '2000万m³', rate: '92%' }
 ])
 
+// 开泵台数和流量组合图表配置
+const pumpChart = ref(null)
+const pumpChartOption = ref({
+  grid: {
+    left: '1%',
+    top: '15%',
+    right: '5%',
+    bottom: '15%',
+    height: '70%',
+    containLabel: true
+  },
+  tooltip: {
+    trigger: 'axis',
+    backgroundColor: 'rgba(0, 20, 40, 0.9)',
+    borderColor: 'rgba(48, 220, 255, 0.5)',
+    textStyle: {
+      color: '#fff'
+    }
+  },
+  legend: {
+    data: ['开泵台数', '开泵流量'],
+    textStyle: {
+      color: 'rgba(255, 255, 255, 0.8)',
+      fontSize: 10
+    },
+    top: 0
+  },
+  xAxis: {
+    type: 'category',
+    data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'],
+    axisLine: {
+      lineStyle: {
+        color: 'rgba(48, 220, 255, 0.6)'
+      }
+    },
+    axisLabel: {
+      color: 'rgba(255, 255, 255, 0.8)',
+      fontSize: 10
+    }
+  },
+  yAxis: [
+    {
+      type: 'value',
+      name: '台数',
+      nameTextStyle: {
+        color: 'rgba(255, 255, 255, 0.8)',
+        fontSize: 10
+      },
+      axisLine: {
+        lineStyle: {
+          color: 'rgba(48, 220, 255, 0.6)'
+        }
+      },
+      axisLabel: {
+        color: 'rgba(255, 255, 255, 0.8)',
+        fontSize: 10
+      },
+      splitLine: {
+        lineStyle: {
+          color: 'rgba(48, 220, 255, 0.2)'
+        }
+      }
+    },
+    {
+      type: 'value',
+      name: '流量(m³/s)',
+      nameTextStyle: {
+        color: 'rgba(255, 255, 255, 0.8)',
+        fontSize: 10
+      },
+      axisLine: {
+        lineStyle: {
+          color: 'rgba(255, 107, 107, 0.6)'
+        }
+      },
+      axisLabel: {
+        color: 'rgba(255, 255, 255, 0.8)',
+        fontSize: 10
+      },
+      splitLine: {
+        show: false
+      }
+    }
+  ],
+  series: [
+    {
+      name: '开泵台数',
+      type: 'bar',
+      data: [0, 1, 2, 2, 1, 0],
+      barWidth: '40%',
+      itemStyle: {
+        color: '#30dcff',
+        shadowColor: 'rgba(48, 220, 255, 0.6)',
+        shadowBlur: 5
+      }
+    },
+    {
+      name: '开泵流量',
+      type: 'line',
+      yAxisIndex: 1,
+      data: [0, 1.5, 3.2, 3.0, 1.6, 0],
+      smooth: true,
+      symbol: 'none',
+      lineStyle: {
+        color: '#ff6b6b',
+        width: 2,
+        shadowColor: 'rgba(255, 107, 107, 0.6)',
+        shadowBlur: 5
+      },
+      areaStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: 'rgba(255, 107, 107, 0.3)'
+          },
+          {
+            offset: 1,
+            color: 'rgba(255, 107, 107, 0.1)'
+          }
+        ])
+      }
+    }
+  ]
+})
+
+// 排水量折线图配置
+const drainageChart = ref(null)
+const drainageChartOption = ref({
+  grid: {
+    left: '1%',
+    top: '10%',
+    right: '5%',
+    bottom: '15%',
+    containLabel: true
+  },
+  tooltip: {
+    trigger: 'axis',
+    backgroundColor: 'rgba(0, 20, 40, 0.9)',
+    borderColor: 'rgba(48, 220, 255, 0.5)',
+    textStyle: {
+      color: '#fff'
+    }
+  },
+  legend: {
+    data: ['当日排水量'],
+    textStyle: {
+      color: 'rgba(255, 255, 255, 0.8)',
+      fontSize: 10
+    },
+    top: 0
+  },
+  xAxis: {
+    type: 'category',
+    data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'],
+    axisLine: {
+      lineStyle: {
+        color: 'rgba(48, 220, 255, 0.6)'
+      }
+    },
+    axisLabel: {
+      color: 'rgba(255, 255, 255, 0.8)',
+      fontSize: 10
+    }
+  },
+  yAxis: {
+    type: 'value',
+    name: '万m³',
+    nameTextStyle: {
+      color: 'rgba(255, 255, 255, 0.8)',
+      fontSize: 10
+    },
+    axisLine: {
+      lineStyle: {
+        color: 'rgba(48, 220, 255, 0.6)'
+      }
+    },
+    axisLabel: {
+      color: 'rgba(255, 255, 255, 0.8)',
+      fontSize: 10
+    },
+    splitLine: {
+      lineStyle: {
+        color: 'rgba(48, 220, 255, 0.2)'
+      }
+    }
+  },
+  series: [
+    {
+      name: '当日排水量',
+      type: 'line',
+      data: [0, 0.1, 0.3, 0.5, 0.7, 0.9],
+      smooth: true,
+      symbol: 'none',
+      lineStyle: {
+        color: '#4ecdc4',
+        width: 2,
+        shadowColor: 'rgba(78, 205, 196, 0.6)',
+        shadowBlur: 5
+      },
+      areaStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: 'rgba(78, 205, 196, 0.3)'
+          },
+          {
+            offset: 1,
+            color: 'rgba(78, 205, 196, 0.1)'
+          }
+        ])
+      }
+    }
+  ]
+})
+
 // 计算是否显示圩区总览
 const isOverview = computed(() => {
   return !props.selectedPolderDetail && !props.showHydrologyDetail
@@ -462,6 +695,10 @@ watch(
     flex-shrink: 0;
   }
   
+  &.water-station-card-middle {
+    flex-shrink: 0;
+  }
+  
   &.water-station-card-bottom {
     flex: 1;
     min-height: 200px;
@@ -479,37 +716,7 @@ watch(
   border-radius: 6px;
 }
 
-.core-indicator {
-  text-align: center;
-  padding: 12px;
-  background: linear-gradient(135deg, rgba(48, 220, 255, 0.25) 0%, rgba(0, 191, 255, 0.2) 100%);
-  border-radius: 8px;
-  border: 1px solid rgba(48, 220, 255, 0.4);
-}
-
-.indicator-main {
-  margin-bottom: 3px;
-}
-
-.main-value {
-  font-size: 32px;
-  font-weight: 700;
-  color: #30DCFF;
-  font-family: "D-DIN";
-  text-shadow: 0 0 20px rgba(48, 220, 255, 0.5);
-}
 
-.main-unit {
-  font-size: 16px;
-  color: rgba(48, 220, 255, 0.8);
-  font-weight: 600;
-}
-
-.indicator-label {
-  color: rgba(255, 255, 255, 0.8);
-  font-size: 11px;
-  letter-spacing: 1px;
-}
 
 .stats-grid {
   display: grid;
@@ -811,5 +1018,72 @@ watch(
   }
 }
 
+.basin-work-panel {
+  height: 100%;
+  padding: 15px;
+  box-sizing: border-box;
+  background: rgba(0, 30, 60, 0.5);
+  border-radius: 6px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.monitoring-project-info {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 180, 255, 0.25);
+  border: 1px solid rgba(48, 220, 255, 0.4);
+  border-radius: 6px;
+  padding: 12px;
+  
+  .monitoring-icon {
+    width: 24px;
+    height: 24px;
+    margin-right: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+  }
+  
+  .monitoring-project-value {
+    font-size: 18px;
+    font-weight: bold;
+    color: #30dcff;
+    font-family: "D-DIN";
+    margin-right: 8px;
+    text-shadow: 0 0 10px rgba(48, 220, 255, 0.5);
+  }
+  
+  .monitoring-project-label {
+    font-size: 11px;
+    color: rgba(255, 255, 255, 0.7);
+    letter-spacing: 1px;
+  }
+}
+
+.pump-chart-container {
+  flex: 1;
+  min-height: 200px;
+}
+
+.drainage-chart-container {
+  flex: 1;
+  min-height: 200px;
+}
+
+.pump-chart-container :deep(.echarts-container),
+.drainage-chart-container :deep(.echarts-container) {
+  width: 100% !important;
+  height: 100% !important;
+}
+
 
 </style>