新改动

.gitignore

@@ -11,6 +11,8 @@ node_modules
 dist
 dist-ssr
 *.local
+test-results
+playwright-report
 
 # Editor directories and files
 .vscode/*

e2e/example.spec.js

@@ -0,0 +1,23 @@
+import { test, expect } from '@playwright/test';
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('/');
+});
+
+test.describe('首页基础功能', () => {
+
+  test('页面标题正确', async ({ page }) => {
+    await expect(page).toHaveTitle(/乌拉海沟/);
+  });
+
+  test('顶部导航栏存在', async ({ page }) => {
+    const nav = page.locator('.top-nav').first();
+    await expect(nav).toBeAttached();
+  });
+
+  test('Cesium 地图容器存在', async ({ page }) => {
+    const map = page.locator('#cesiumContainer');
+    await expect(map).toBeAttached();
+  });
+
+});

package.json

@@ -6,7 +6,10 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui",
+    "test:e2e:debug": "playwright test --debug"
   },
   "dependencies": {
     "@antv/l7": "^2.28.14",

playwright.config.js

@@ -0,0 +1,32 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './e2e',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: 'html',
+  use: {
+    baseURL: 'http://localhost:5173',
+    trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: {
+        ...devices['Desktop Chrome'],
+        launchOptions: {
+          executablePath: 'C:\\Users\\15818\\AppData\\Local\\chrome-win64\\chrome.exe',
+        },
+      },
+    },
+  ],
+  webServer: {
+    command: 'npx vite',
+    url: 'http://localhost:5173',
+    reuseExistingServer: !process.env.CI,
+    timeout: 30000,
+  },
+});

src/components/DamDeformSection.vue

@@ -90,11 +90,13 @@ export default {
       time: 0,
       scale: 1,
       points: [
-        { id: 'D01', pos: '坝顶上游', xRatio: 0.15, horiz: 12.6, vert: 8.3, total: 15.1, normH: 15, normV: 10, status: 'normal' },
-        { id: 'D02', pos: '坝顶中部', xRatio: 0.30, horiz: 10.2, vert: 6.5, total: 12.1, normH: 15, normV: 10, status: 'normal' },
-        { id: 'D03', pos: '坝顶下游', xRatio: 0.45, horiz: 8.5, vert: 5.2, total: 10.0, normH: 15, normV: 10, status: 'normal' },
-        { id: 'D04', pos: '坝基上游', xRatio: 0.60, horiz: 4.2, vert: 3.8, total: 5.7, normH: 10, normV: 8, status: 'normal' },
-        { id: 'D05', pos: '坝基下游', xRatio: 0.75, horiz: 2.1, vert: 1.5, total: 2.6, normH: 10, normV: 8, status: 'normal' },
+        { id: 'J01', pos: 'GNSS基准站-01', xRatio: 0.10, horiz: 4.2, vert: 2.1, total: 4.7, normH: 15, normV: 10, status: 'normal' },
+        { id: 'J02', pos: 'GNSS基准站-02', xRatio: 0.22, horiz: 3.8, vert: 1.9, total: 4.2, normH: 15, normV: 10, status: 'normal' },
+        { id: 'S01', pos: 'GNSS监测站-01', xRatio: 0.34, horiz: 8.2, vert: 4.5, total: 9.4, normH: 15, normV: 10, status: 'normal' },
+        { id: 'S05', pos: 'GNSS监测站-05', xRatio: 0.46, horiz: 7.5, vert: 4.0, total: 8.5, normH: 15, normV: 10, status: 'normal' },
+        { id: 'S08', pos: 'GNSS监测站-08', xRatio: 0.58, horiz: 6.8, vert: 3.5, total: 7.6, normH: 15, normV: 10, status: 'normal' },
+        { id: 'S12', pos: 'GNSS监测站-12', xRatio: 0.70, horiz: 5.2, vert: 2.8, total: 5.9, normH: 15, normV: 10, status: 'normal' },
+        { id: 'B01', pos: '位移标点-01', xRatio: 0.82, horiz: 3.1, vert: 1.5, total: 3.4, normH: 10, normV: 8, status: 'normal' },
       ],
     }
   },

src/components/DamSeepageSection.vue

@@ -22,25 +22,6 @@
     </div>
 
     <!-- 指标行 -->
-    <div class="stats-row">
-      <div class="stat-item">
-        <span class="stat-label">库水位</span>
-        <span class="stat-value" style="color:#00d4ff;">{{ currentWaterLevel.toFixed(1) }}</span>
-        <span class="stat-unit">m</span>
-      </div>
-      <div class="stat-divider"></div>
-      <div class="stat-item">
-        <span class="stat-label">设计水位</span>
-        <span class="stat-value" style="color:#fbbf24;">{{ designWaterLevel }}</span>
-        <span class="stat-unit">m</span>
-      </div>
-      <div class="stat-divider"></div>
-      <div class="stat-item">
-        <span class="stat-label">实测渗压</span>
-        <span class="stat-value" :style="{ color: phreaticStatusColor }">{{ currentPhreaticRatio.toFixed(0) }}%</span>
-        <span class="stat-unit">阈值</span>
-      </div>
-    </div>
 
     <!-- Canvas 绘制区 -->
     <div class="canvas-wrapper">
@@ -99,17 +80,19 @@ export default {
       time: 0,
       // 水位参数（相对坝基高程，单位：m）
       baseWaterLevel: 8.5,       // 基准水位
-      designWaterLevel: 10.2,    // 设计水位
-      warningWaterLevel: 11.5,   // 警戒水位
       waveAmplitude: 0.3,        // 波动幅度
-      // 渗压计数据（沿坝体水平分布）
+      // 渗压计数据（沿坝体水平分布，共14支）
       gauges: [
-        { id: 'P05', pos: '坝体上游', xRatio: 0.30, measured: 8.2, design: 8.5, warning: 9.8, status: 'normal' },
-        { id: 'P06', pos: '坝体中部', xRatio: 0.47, measured: 6.8, design: 7.0, warning: 8.5, status: 'normal' },
-        { id: 'P07', pos: '坝体中后', xRatio: 0.64, measured: 4.5, design: 5.2, warning: 6.8, status: 'normal' },
-        { id: 'P08', pos: '坝体下游', xRatio: 0.82, measured: 2.8, design: 3.5, warning: 5.0, status: 'normal' },
+        { id: 'P01', pos: '坝基上游', xRatio: 0.15, measured: 8.5, design: 9.0, warning: 10.5, status: 'normal' },
+        { id: 'P02', pos: '坝基中上', xRatio: 0.25, measured: 7.8, design: 8.2, warning: 9.8, status: 'normal' },
+        { id: 'P03', pos: '坝基中部', xRatio: 0.35, measured: 6.5, design: 7.0, warning: 8.5, status: 'normal' },
+        { id: 'P04', pos: '坝基中下', xRatio: 0.45, measured: 5.2, design: 5.8, warning: 7.2, status: 'normal' },
+        { id: 'P05', pos: '坝体上游', xRatio: 0.30, measured: 7.5, design: 8.0, warning: 9.5, status: 'normal' },
+        { id: 'P06', pos: '坝体中部', xRatio: 0.47, measured: 6.0, design: 6.5, warning: 8.0, status: 'normal' },
+        { id: 'P07', pos: '坝体中后', xRatio: 0.64, measured: 4.2, design: 5.0, warning: 6.5, status: 'warning' },
+        { id: 'P08', pos: '坝体下游', xRatio: 0.82, measured: 2.5, design: 3.2, warning: 4.8, status: 'normal' },
       ],
-      // 浸润线抛物线控制点（基准值）
+      // 浸润线抛物线控制点（基准值，对应 baseWaterLevel）
       phreaticControlPoints: [
         { x: 0.20, y: 8.5 },   // 起始点（上游坝面附近）
         { x: 0.32, y: 7.2 },
@@ -118,8 +101,8 @@ export default {
         { x: 0.77, y: 2.8 },
         { x: 0.90, y: 1.5 },   // 结束点（下游坝面附近）
       ],
-      // 设计浸润线控制点（设计值）
-      designControlPoints: [
+      // 设计浸润线控制点（基准值，对应 baseWaterLevel）
+      baseDesignControlPoints: [
         { x: 0.20, y: 10.2 },
         { x: 0.32, y: 8.5 },
         { x: 0.47, y: 6.8 },
@@ -127,8 +110,8 @@ export default {
         { x: 0.77, y: 3.2 },
         { x: 0.90, y: 1.8 },
       ],
-      // 警戒浸润线控制点
-      warningControlPoints: [
+      // 警戒浸润线控制点（基准值，对应 baseWaterLevel）
+      baseWarningControlPoints: [
         { x: 0.20, y: 11.5 },
         { x: 0.32, y: 9.8 },
         { x: 0.47, y: 8.0 },
@@ -143,10 +126,36 @@ export default {
       // 基准水位 + 正弦波动模拟水位浮动
       return this.baseWaterLevel + Math.sin(this.time * 0.02) * this.waveAmplitude
     },
-    // 当前浸润线相对设计值的比例
+    // 水位比例因子：当前水位 / 基准水位
+    waterLevelFactor() {
+      return this.currentWaterLevel / this.baseWaterLevel
+    },
+    // 动态设计水位（随当前水位变化）
+    dynamicDesignWaterLevel() {
+      return parseFloat((this.baseDesignControlPoints[0].y * this.waterLevelFactor).toFixed(2))
+    },
+    // 动态警戒水位（随当前水位变化）
+    dynamicWarningWaterLevel() {
+      return parseFloat((this.baseWarningControlPoints[0].y * this.waterLevelFactor).toFixed(2))
+    },
+    // 动态设计浸润线控制点
+    dynamicDesignControlPoints() {
+      return this.baseDesignControlPoints.map(p => ({
+        x: p.x,
+        y: parseFloat((p.y * this.waterLevelFactor).toFixed(2))
+      }))
+    },
+    // 动态警戒浸润线控制点
+    dynamicWarningControlPoints() {
+      return this.baseWarningControlPoints.map(p => ({
+        x: p.x,
+        y: parseFloat((p.y * this.waterLevelFactor).toFixed(2))
+      }))
+    },
+    // 当前浸润线相对设计值的比例（基于动态设计线）
     currentPhreaticRatio() {
       const currentMaxY = Math.max(...this.phreaticControlPoints.map(p => p.y))
-      const designMaxY = Math.max(...this.designControlPoints.map(p => p.y))
+      const designMaxY = Math.max(...this.dynamicDesignControlPoints.map(p => p.y))
       return (currentMaxY / designMaxY) * 85 + Math.sin(this.time * 0.015) * 5
     },
     phreaticStatusColor() {
@@ -189,10 +198,15 @@ export default {
     },
     updateGaugeStatus() {
       const wl = this.currentWaterLevel
+      const dynamicDesignPts = this.dynamicDesignControlPoints
+      const dynamicWarningPts = this.dynamicWarningControlPoints
       this.gauges.forEach(g => {
         // 每个渗压计随水位浮动
         const fluctuation = Math.sin(this.time * 0.01 + g.xRatio * 5) * 0.15
         g.measured = this.getPhreaticY(g.xRatio) + fluctuation
+        // 根据当前水位动态计算该测点的设计值和警戒值
+        g.design = parseFloat(this.getPhreaticY(g.xRatio, dynamicDesignPts).toFixed(2))
+        g.warning = parseFloat(this.getPhreaticY(g.xRatio, dynamicWarningPts).toFixed(2))
         if (g.measured >= g.warning) g.status = 'danger'
         else if (g.measured >= g.design) g.status = 'warn'
         else g.status = 'normal'
@@ -387,11 +401,11 @@ export default {
       ctx.restore()
 
       // --- 浸润线（3条：实测、设计、警戒） ---
-      // 1. 警戒浸润线（虚线）
-      this.drawPhreaticLine(ctx, this.warningControlPoints, 'rgba(239, 68, 68, 0.5)', [5, 4], '警戒线')
+      // 1. 警戒浸润线（虚线，随水位动态变化）
+      this.drawPhreaticLine(ctx, this.dynamicWarningControlPoints, 'rgba(239, 68, 68, 0.5)', [5, 4], '警戒线')
 
-      // 2. 设计浸润线（虚线）
-      this.drawPhreaticLine(ctx, this.designControlPoints, 'rgba(251, 191, 36, 0.6)', [4, 3], '设计线')
+      // 2. 设计浸润线（虚线，随水位动态变化）
+      this.drawPhreaticLine(ctx, this.dynamicDesignControlPoints, 'rgba(251, 191, 36, 0.6)', [4, 3], '设计线')
 
       // 3. 实测浸润线（实线，带发光）
       // 实时调整实测线：受水位波动影响
@@ -556,6 +570,7 @@ export default {
   border-bottom: 1px solid rgba(0, 212, 255, 0.1);
   font-weight: normal;
   font-size: 11px;
+  white-space: nowrap;
 }
 .gauge-table td {
   color: #e0fcff;
@@ -564,6 +579,7 @@ export default {
   border-bottom: 1px solid rgba(0, 212, 255, 0.05);
   font-size: 11px;
   line-height: 1.8;
+  white-space: nowrap;
 }
 .gauge-table td.td-left {
   text-align: left;

src/components/HydrologyForecastPanel.vue

@@ -64,28 +64,28 @@
                 <div class="chart-header">
                   <div class="chart-title">乌拉海沟水库 —— 水位~库容关系曲线</div>
                 </div>
-                <canvas id="storageCapacityChart" width="300" height="198"></canvas>
+                <canvas id="storageCapacityChart" width="340" height="198"></canvas>
               </div>
               <div class="storage-info">
                 <div class="storage-info-item">
                   <span class="storage-info-label">死水位</span>
-                  <span class="storage-info-value">108.5m</span>
-                  <span class="storage-info-capacity">库容 860 万m³</span>
+                  <span class="storage-info-value">947.0m</span>
+                  <span class="storage-info-capacity">库容 76.0 万m³</span>
                 </div>
                 <div class="storage-info-item">
                   <span class="storage-info-label">正常蓄水位</span>
-                  <span class="storage-info-value highlight">114.0m</span>
-                  <span class="storage-info-capacity">库容 5060 万m³</span>
+                  <span class="storage-info-value highlight">977.50m</span>
+                  <span class="storage-info-capacity">库容 926.0 万m³</span>
                 </div>
                 <div class="storage-info-item">
-                  <span class="storage-info-label">防洪高水位</span>
-                  <span class="storage-info-value warning">116.8m</span>
-                  <span class="storage-info-capacity">库容 5900 万m³</span>
+                  <span class="storage-info-label">设计洪水位</span>
+                  <span class="storage-info-value warning">978.20m</span>
+                  <span class="storage-info-capacity">库容 960.0 万m³</span>
                 </div>
                 <div class="storage-info-item">
-                  <span class="storage-info-label">设计洪水位</span>
-                  <span class="storage-info-value danger">118.2m</span>
-                  <span class="storage-info-capacity">库容 6500 万m³</span>
+                  <span class="storage-info-label">校核洪水位</span>
+                  <span class="storage-info-value danger">978.56m</span>
+                  <span class="storage-info-capacity">总库容 978.0 万m³</span>
                 </div>
               </div>
             </div>
@@ -206,7 +206,7 @@
             <div class="flow-forecast-content">
               <div class="chart-box">
                 <div class="chart-title">{{ selectedTimeRange === '24h' ? '24' : selectedTimeRange === '48h' ? '48' : '72' }}小时流量监控</div>
-                <canvas id="forecastFlowChart" width="330" height="160"></canvas>
+                <canvas id="forecastFlowChart" width="340" height="160" style="position:static;"></canvas>
               </div>
             </div>
           </div>
@@ -727,8 +727,8 @@ export default {
         }
         this.storageCapacityChart = echarts.init(document.getElementById('storageCapacityChart'))
         
-        const waterLevels = [105, 106, 107, 108, 108.5, 109, 110, 111, 112, 113, 114, 115, 116, 116.8, 117.5, 118.2, 119, 120]
-        const capacities = [600, 650, 720, 800, 860, 950, 1250, 1650, 2200, 3300, 5060, 5400, 5700, 5900, 6150, 6500, 6700, 6900]
+        const waterLevels = [947.0, 948.0, 950.0, 955.0, 960.0, 965.0, 970.0, 973.0, 975.0, 977.5, 978.2, 978.56, 979.0]
+        const capacities = [76, 82, 105, 180, 280, 400, 550, 700, 820, 926, 960, 978, 995]
         
         const option = {
           animation: false,
@@ -773,8 +773,8 @@ export default {
               color: '#7bbef6',
               fontSize: 10
             },
-            min: 103,
-            max: 122,
+            min: 940,
+            max: 990,
             axisLine: {
               lineStyle: { color: '#7bbef6' }
             },
@@ -815,22 +815,22 @@ export default {
                 silent: true,
                 data: [
                   {
-                    yAxis: 108.5,
+                    yAxis: 947.0,
                     name: '死水位',
                     lineStyle: { color: '#ffd93d', width: 1, type: 'dashed' },
-                    label: { formatter: '死水位 108.5m', color: '#ffd93d', fontSize: 9, position: 'middle' }
+                    label: { formatter: '死水位 947.0m', color: '#ffd93d', fontSize: 9, position: 'middle' }
                   },
                   {
-                    yAxis: 114.0,
+                    yAxis: 977.5,
                     name: '正常蓄水位',
                     lineStyle: { color: '#00d4ff', width: 1, type: 'dashed' },
-                    label: { formatter: '正常蓄水位 114.0m', color: '#00d4ff', fontSize: 9, position: 'middle' }
+                    label: { formatter: '正常蓄水位 977.50m', color: '#00d4ff', fontSize: 9, position: 'middle' }
                   },
                   {
-                    yAxis: 116.8,
-                    name: '防洪高水位',
+                    yAxis: 978.2,
+                    name: '设计洪水位',
                     lineStyle: { color: '#ff6b6b', width: 1, type: 'dashed' },
-                    label: { formatter: '防洪高水位 116.8m', color: '#ff6b6b', fontSize: 9, position: 'middle' }
+                    label: { formatter: '设计洪水位 978.20m', color: '#ff6b6b', fontSize: 9, position: 'middle' }
                   }
                 ]
               }
@@ -1706,6 +1706,10 @@ export default {
   height: 180px;
 }
 
+.flow-forecast-content .chart-box {
+  height: 194px;
+}
+
 .extreme-water-level {
   margin-top: 2px;
 }
@@ -1816,8 +1820,9 @@ export default {
 .water-quality-section {
   display: flex;
   flex-direction: column;
-  gap: 2px;
-  margin-top: -12px;
+  gap: 6px;
+  margin-top: -6px;
+  padding-bottom: 4px;
 }
 
 .wq-sub-header {
@@ -1840,8 +1845,8 @@ export default {
 .wq-params-row {
   display: flex;
   justify-content: center;
-  gap: 3px;
-  margin-bottom: 3px;
+  gap: 6px;
+  margin-bottom: 6px;
 }
 
 .wq-params-row:last-child {

src/components/TopNav.vue

@@ -1,4 +1,4 @@
-<!-- 顶部导航栏：系统标题 + 六个导航按钮（综合首页/水情测报/工程安全/闸门控制/视频监控/生命周期） -->
+<!-- 顶部导航栏：系统标题 + 导航按钮（综合首页/水情测报/工程安全/闸门控制/管线安监/生命周期） -->
 <template>
   <div class="top-nav">
     <!-- 左侧日期时间 -->
@@ -44,10 +44,10 @@
     </div>
     <div
       class="sub-title right-2"
-      :class="{ active: activeButton === '视频监控' }"
-      @click="$emit('navigate', '视频监控')"
+      :class="{ active: activeButton === '管线安监' }"
+      @click="$emit('navigate', '管线安监')"
     >
-      视频监控
+      管线安监
     </div>
     <div
       class="sub-title right-3"

src/views/HomeView.vue

@@ -46,8 +46,8 @@
     </div>
     <!-- 闸门控制视图（内嵌模式，不重新加载地图） -->
     <GateControlView v-if="activeTab === '闸门控制'" :embedded="true" />
-    <!-- 视频监控视图 -->
-    <VideoMonitorView v-if="activeTab === '视频监控'" />
+    <!-- 管线安监视图 -->
+    <PipelineMonitorView v-if="activeTab === '管线安监'" />
     <!-- 工作台视图 -->
     <WorkspaceView v-if="activeTab === '工作台'" @backToDashboard="selectTab('流域总览')" />
     
@@ -65,8 +65,8 @@ import CesiumMap from '../components/CesiumMap.vue'
 import GradientOverlay from '../components/gradient-overlay.vue'
 import EngineeringSafetyView from './mainPages/EngineeringSafetyView.vue'
 import GateControlView from './mainPages/GateControlView.vue'
+import PipelineMonitorView from './mainPages/PipelineMonitorView.vue'
 import LifecycleView from './mainPages/LifecycleView.vue'
-import VideoMonitorView from './mainPages/VideoMonitorView.vue'
 import WorkspaceView from './mainPages/WorkspaceView.vue'
 import WaterResourceAllocationView from './admin/WaterResourceAllocationView.vue'
 import TopNav from '../components/TopNav.vue'
@@ -78,8 +78,8 @@ export default {
     HydrologyForecastView,
     EngineeringSafetyView,
     GateControlView,
+    PipelineMonitorView,
     LifecycleView,
-    VideoMonitorView,
     WorkspaceView,
     WaterResourceAllocationView,
     CesiumMap,
@@ -98,7 +98,7 @@ export default {
         '全生命周期管理': '生命周期',
         '工程安全运维': '工程安全',
         '水资源调度': '水资源调度',
-        '视频监控': '视频监控',
+        '管线安监': '管线安监',
         '工作台': '工作台'
       },
       tabButtonMap: {
@@ -108,7 +108,7 @@ export default {
         '工程安全': '工程安全运维',
         '水资源调度': '水资源调度',
         '闸门控制': '闸门控制',
-        '视频监控': '视频监控',
+        '管线安监': '管线安监',
         '工作台': '工作台'
       },
       simulationTime: 0,
@@ -175,7 +175,7 @@ export default {
       else if (button === '水资源调度') this.selectTab('水资源调度')
       else if (button === '生命周期') this.selectTab('全生命周期管理')
       else if (button === '闸门控制') this.selectTab('闸门控制')
-      else if (button === '视频监控') this.selectTab('视频监控')
+      else if (button === '管线安监') this.selectTab('管线安监')
       else if (button === '工作台') this.selectTab('工作台')
     },
     selectSecondaryTab(tab) {
@@ -220,7 +220,7 @@ export default {
 .dashboard {
   width: 100%;
   height: 100%;
-  overflow: hidden;
+  overflow: visible;
   position: relative;
 }
 

src/views/mainPages/EngineeringSafetyView.vue

@@ -14,7 +14,10 @@
               <div class="safety-eval-section">
                 <div class="safety-eval-top">
                   <span class="safety-eval-section-title">综合安全等级</span>
-                  <span class="safety-eval-grade grade-a">一类坝</span>
+                  <span class="safety-eval-grade grade-a">安全</span>
+                </div>
+                <div style="text-align:right;padding:0 10px 2px 0;">
+                  <span style="color:#fbbf24;font-size:11px;">系统评估参考值，非专业机构评定</span>
                 </div>
                 <div class="safety-eval-sub-row">
                   <div class="safety-eval-sub-card">
@@ -69,19 +72,19 @@
               <!-- 今日巡检统计 -->
               <div class="patrol-stats-row">
                 <div class="patrol-stat-item">
-                  <span class="patrol-stat-num">24</span>
+                  <span class="patrol-stat-num">16</span>
                   <span class="patrol-stat-label">今日应巡检</span>
                 </div>
                 <div class="patrol-stat-item">
-                  <span class="patrol-stat-num" style="color:#22c55e">18</span>
+                  <span class="patrol-stat-num" style="color:#22c55e">14</span>
                   <span class="patrol-stat-label">已完成</span>
                 </div>
                 <div class="patrol-stat-item">
-                  <span class="patrol-stat-num" style="color:#f59e0b">6</span>
+                  <span class="patrol-stat-num" style="color:#f59e0b">2</span>
                   <span class="patrol-stat-label">未完成</span>
                 </div>
                 <div class="patrol-stat-item">
-                  <span class="patrol-stat-num" style="color:#ef4444">2</span>
+                  <span class="patrol-stat-num" style="color:#22c55e">0</span>
                   <span class="patrol-stat-label">异常发现</span>
                 </div>
               </div>
@@ -125,7 +128,7 @@
                 </button>
               </div>
               <!-- 形变内容 -->
-              <div v-show="mergedTab === 'deform'" class="deform-section">
+              <div v-if="mergedTab === 'deform'" class="deform-section">
                 <div class="conclusion-row" style="margin-bottom:6px;">
                   <span class="conclusion-row-label">整体变形状态判定</span>
                   <span class="conclusion-row-value text-green">稳定</span>
@@ -134,7 +137,7 @@
               </div>
 
               <!-- 渗压内容 -->
-              <div v-show="mergedTab === 'seepage'" class="seepage-section">
+              <div v-if="mergedTab === 'seepage'" class="seepage-section">
                 <div class="conclusion-row" style="margin-bottom:6px;">
                   <span class="conclusion-row-label">渗流整体安全状态</span>
                   <span class="conclusion-row-value text-green">防渗正常</span>
@@ -157,15 +160,15 @@
               <!-- 设备完好率 + 仪表盘 -->
               <div class="device-stats-row">
                 <div class="device-stat-card">
-                  <div class="device-stat-percent">89.55%</div>
+                  <div class="device-stat-percent">96.94%</div>
                   <div class="device-stat-icon"><img src="/src/assets/images/小图标库水位.png" class="stat-icon-img" /></div>
                   <div class="device-stat-label">完好率</div>
                 </div>
                 <div class="device-gauge-section">
-                  <canvas id="deviceGaugeChart" width="140" height="150"></canvas>
+                  <canvas id="deviceGaugeChart" width="110" height="110"></canvas>
                 </div>
                 <div class="device-stat-card">
-                  <div class="device-stat-percent">84.36%</div>
+                  <div class="device-stat-percent">96.94%</div>
                   <div class="device-stat-icon"><img src="/src/assets/images/小图标库水位.png" class="stat-icon-img" /></div>
                   <div class="device-stat-label">运行期 完好率</div>
                 </div>
@@ -195,15 +198,15 @@
               <div class="monitor-divider"></div>
               <div class="threshold-summary">
                 <div class="threshold-stat">
-                  <span class="threshold-stat-value">6</span>
+                  <span class="threshold-stat-value">2</span>
                   <span class="threshold-stat-label">超阈值设备</span>
                 </div>
                 <div class="threshold-stat">
-                  <span class="threshold-stat-value" style="color:#fbbf24;">3</span>
+                  <span class="threshold-stat-value" style="color:#fbbf24;">0</span>
                   <span class="threshold-stat-label">临界设备</span>
                 </div>
                 <div class="threshold-stat">
-                  <span class="threshold-stat-value" style="color:#22c55e;">128</span>
+                  <span class="threshold-stat-value" style="color:#22c55e;">96</span>
                   <span class="threshold-stat-label">正常设备</span>
                 </div>
               </div>
@@ -343,70 +346,80 @@ export default {
   data() {
     return {
       // 监控摘要
-      activeSummaryCard: "变形检测",
+      activeSummaryCard: "变形监测",
       summaryPieChart: null,
       deviceGaugeChart: null,
       monitorSummaryList: [
-        { name: "变形检测", count: 42, progress: 82, color: "#62f6fb" },
-        { name: "渗流渗压", count: 28, progress: 65, color: "#a78bfa" },
-        { name: "应力应变", count: 16, progress: 45, color: "#fbbf24" },
+        { name: "变形监测", count: 75, progress: 82, color: "#62f6fb" },
+        { name: "渗流渗压", count: 17, progress: 65, color: "#a78bfa" },
+        { name: "水位流量", count: 7, progress: 45, color: "#fbbf24" },
       ],
       summaryPieMap: {
-        "变形检测": [
-          { name: "精密水准", value: 12, color: "#62f6fb" },
-          { name: "基岩变形计", value: 10, color: "#34d399" },
-          { name: "电磁沉降环", value: 8, color: "#fbbf24" },
-          { name: "测缝计", value: 7, color: "#f97316" },
-          { name: "多点位移计", value: 5, color: "#ef4444" },
+        "变形监测": [
+          { name: "GNSS位移监测站", value: 12, color: "#62f6fb" },
+          { name: "GNSS位移监测基准站", value: 3, color: "#34d399" },
+          { name: "大坝综合位移标点", value: 29, color: "#fbbf24" },
+          { name: "校核基准点", value: 4, color: "#f97316" },
+          { name: "工作基准点", value: 4, color: "#ef4444" },
+          { name: "高程引测", value: 1, color: "#a78bfa" },
+          { name: "多点位移计", value: 18, color: "#818cf8" },
+          { name: "测缝计", value: 4, color: "#c084fc" },
         ],
         "渗流渗压": [
-          { name: "渗压计", value: 10, color: "#a78bfa" },
-          { name: "量水堰", value: 7, color: "#818cf8" },
-          { name: "测压管", value: 6, color: "#c084fc" },
-          { name: "孔隙水压力计", value: 5, color: "#e879f9" },
+          { name: "渗压计", value: 14, color: "#a78bfa" },
+          { name: "MCU自动化采集设备", value: 1, color: "#818cf8" },
+          { name: "数据采集箱", value: 1, color: "#c084fc" },
+          { name: "振弦式读数仪", value: 1, color: "#e879f9" },
         ],
-        "应力应变": [
-          { name: "钢筋计", value: 6, color: "#fbbf24" },
-          { name: "应变计", value: 5, color: "#f59e0b" },
-          { name: "无应力计", value: 5, color: "#f97316" },
+        "水位流量": [
+          { name: "水尺", value: 2, color: "#62f6fb" },
+          { name: "流速仪", value: 2, color: "#34d399" },
+          { name: "水准仪", value: 1, color: "#fbbf24" },
+          { name: "经纬仪", value: 1, color: "#f97316" },
+          { name: "全站仪", value: 1, color: "#ef4444" },
         ],
       },
       // 设备清单树
       searchKey: "",
       treeData: [
         {
-          name: "大坝安全监测系统", expanded: true, children: [
+          name: "大坝安全监测系统", count: 98, expanded: true, children: [
             {
-              name: "主坝", expanded: true, children: [
-                {
-                  name: "变形监测", expanded: true, children: [
-                    { name: "坝顶", children: [{ name: "坝顶水平位移-01", children: [{ name: "R201YL1" }, { name: "R201YL2" }, { name: "R201YL3" }] }, { name: "坝顶水平位移-02", children: [{ name: "R201YL4" }, { name: "R201YL5" }, { name: "R201YL6" }] }, { name: "坝顶水平位移-03", children: [{ name: "R201YL7" }, { name: "R201YL8" }, { name: "R201YL9" }] }, { name: "坝顶水平位移-04", children: [{ name: "R201YL10" }, { name: "R201YL11" }, { name: "R201YL12" }] }, { name: "坝顶水平位移-05", children: [{ name: "R201YL13" }, { name: "R201YL14" }, { name: "R201YL15" }] }] },
-                    { name: "坝基", children: [{ name: "坝基垂直位移-01", children: [{ name: "B301YL1" }, { name: "B301YL2" }, { name: "B301YL3" }] }, { name: "坝基垂直位移-02", children: [{ name: "B301YL4" }, { name: "B301YL5" }, { name: "B301YL6" }] }, { name: "坝基垂直位移-03", children: [{ name: "B301YL7" }, { name: "B301YL8" }, { name: "B301YL9" }] }, { name: "坝基垂直位移-04", children: [{ name: "B301YL10" }, { name: "B301YL11" }, { name: "B301YL12" }] }, { name: "坝基垂直位移-05", children: [{ name: "B301YL13" }, { name: "B301YL14" }, { name: "B301YL15" }] }, { name: "坝基垂直位移-06", children: [{ name: "B301YL16" }, { name: "B301YL17" }, { name: "B301YL18" }] }] },
-                    { name: "左岸", children: [{ name: "库岸变形-B01", children: [{ name: "K401YL1" }, { name: "K401YL2" }, { name: "K401YL3" }] }, { name: "库岸变形-B02", children: [{ name: "K401YL4" }, { name: "K401YL5" }, { name: "K401YL6" }] }, { name: "库岸变形-B03", children: [{ name: "K401YL7" }, { name: "K401YL8" }, { name: "K401YL9" }] }, { name: "裂缝开合度-C01", children: [{ name: "F501YL1" }, { name: "F501YL2" }, { name: "F501YL3" }] }, { name: "裂缝开合度-C02", children: [{ name: "F501YL4" }, { name: "F501YL5" }, { name: "F501YL6" }] }] },
-                    { name: "右岸", children: [{ name: "库岸变形-B04", children: [{ name: "K401YL10" }, { name: "K401YL11" }, { name: "K401YL12" }] }, { name: "库岸变形-B05", children: [{ name: "K401YL13" }, { name: "K401YL14" }, { name: "K401YL15" }] }, { name: "裂缝开合度-C03", children: [{ name: "F501YL7" }, { name: "F501YL8" }, { name: "F501YL9" }] }] },
-                    { name: "坝肩", children: [{ name: "坝肩位移-J01", children: [{ name: "J601YL1" }, { name: "J601YL2" }, { name: "J601YL3" }] }, { name: "坝肩位移-J02", children: [{ name: "J601YL4" }, { name: "J601YL5" }, { name: "J601YL6" }] }, { name: "精密水准-S01", children: [{ name: "S701YL1" }, { name: "S701YL2" }, { name: "S701YL3" }] }] },
-                  ],
-                },
-                {
-                  name: "渗流监测", expanded: true, children: [
-                    { name: "坝基", children: [{ name: "渗流压力-P01", children: [{ name: "P801YL1" }, { name: "P801YL2" }, { name: "P801YL3" }] }, { name: "渗流压力-P02", children: [{ name: "P801YL4" }, { name: "P801YL5" }, { name: "P801YL6" }] }, { name: "渗流压力-P03", children: [{ name: "P801YL7" }, { name: "P801YL8" }, { name: "P801YL9" }] }, { name: "渗流压力-P04", children: [{ name: "P801YL10" }, { name: "P801YL11" }, { name: "P801YL12" }] }, { name: "绕坝渗流-S01", children: [{ name: "R901YL1" }, { name: "R901YL2" }, { name: "R901YL3" }] }, { name: "绕坝渗流-S02", children: [{ name: "R901YL4" }, { name: "R901YL5" }, { name: "R901YL6" }] }] },
-                    { name: "坝体", children: [{ name: "渗流压力-P05", children: [{ name: "P801YL13" }, { name: "P801YL14" }, { name: "P801YL15" }] }, { name: "渗流压力-P06", children: [{ name: "P801YL16" }, { name: "P801YL17" }, { name: "P801YL18" }] }, { name: "渗流压力-P07", children: [{ name: "P801YL19" }, { name: "P801YL20" }, { name: "P801YL21" }] }, { name: "渗流压力-P08", children: [{ name: "P801YL22" }, { name: "P801YL23" }, { name: "P801YL24" }] }] },
-                    { name: "廊道", children: [{ name: "廊道渗流-L01", children: [{ name: "L011YL1" }, { name: "L011YL2" }, { name: "L011YL3" }] }, { name: "廊道渗流-L02", children: [{ name: "L011YL4" }, { name: "L011YL5" }, { name: "L011YL6" }] }, { name: "廊道渗流-L03", children: [{ name: "L011YL7" }, { name: "L011YL8" }, { name: "L011YL9" }] }] },
-                  ],
-                },
-                {
-                  name: "应力应变", expanded: true, children: [
-                    { name: "坝体", children: [{ name: "钢筋应力-R01", children: [{ name: "G111YL1" }, { name: "G111YL2" }, { name: "G111YL3" }] }, { name: "钢筋应力-R02", children: [{ name: "G111YL4" }, { name: "G111YL5" }, { name: "G111YL6" }] }, { name: "钢筋应力-R03", children: [{ name: "G111YL7" }, { name: "G111YL8" }, { name: "G111YL9" }] }, { name: "钢筋应力-R04", children: [{ name: "G111YL10" }, { name: "G111YL11" }, { name: "G111YL12" }] }] },
-                    { name: "坝基", children: [{ name: "基岩应力-Y01", children: [{ name: "J121YL1" }, { name: "J121YL2" }, { name: "J121YL3" }] }, { name: "基岩应力-Y02", children: [{ name: "J121YL4" }, { name: "J121YL5" }, { name: "J121YL6" }] }, { name: "基岩应力-Y03", children: [{ name: "J121YL7" }, { name: "J121YL8" }, { name: "J121YL9" }] }] },
-                  ],
-                },
-                {
-                  name: "环境量监测", expanded: true, children: [
-                    { name: "库水位", children: [{ name: "库水位-W01", children: [{ name: "W131YL1" }, { name: "W131YL2" }, { name: "W131YL3" }] }, { name: "库水位-W02", children: [{ name: "W131YL4" }, { name: "W131YL5" }, { name: "W131YL6" }] }] },
-                    { name: "降雨量", children: [{ name: "雨量计-R01", children: [{ name: "Y141YL1" }, { name: "Y141YL2" }, { name: "Y141YL3" }] }, { name: "雨量计-R02", children: [{ name: "Y141YL4" }, { name: "Y141YL5" }, { name: "Y141YL6" }] }] },
-                    { name: "温度", children: [{ name: "温度计-T01", children: [{ name: "T151YL1" }, { name: "T151YL2" }, { name: "T151YL3" }] }, { name: "温度计-T02", children: [{ name: "T151YL4" }, { name: "T151YL5" }, { name: "T151YL6" }] }, { name: "温度计-T03", children: [{ name: "T151YL7" }, { name: "T151YL8" }, { name: "T151YL9" }] }] },
-                  ],
-                },
+              name: "变形监测(GNSS)", count: 53, expanded: true, children: [
+                { name: "GNSS位移监测基准站", count: 3, children: [{ name: "基准站-01" }, { name: "基准站-02" }, { name: "基准站-03" }] },
+                { name: "GNSS位移监测站", count: 12, children: [{ name: "监测站-01" }, { name: "监测站-02" }, { name: "监测站-03" }, { name: "监测站-04" }, { name: "监测站-05" }, { name: "监测站-06" }, { name: "监测站-07" }, { name: "监测站-08" }, { name: "监测站-09" }, { name: "监测站-10" }, { name: "监测站-11" }, { name: "监测站-12" }] },
+                { name: "大坝综合位移标点", count: 29 },
+                { name: "校核基准点", count: 4 },
+                { name: "工作基准点", count: 4 },
+                { name: "高程引测", count: 1 },
+              ],
+            },
+            {
+              name: "渗流监测", count: 17, expanded: true, children: [
+                { name: "渗压计", count: 14 },
+                { name: "测压管", count: 700, unit: "m" },
+                { name: "MCU自动化采集设备", count: 1 },
+                { name: "数据采集箱", count: 1 },
+                { name: "便携式振弦式读数仪", count: 1 },
+              ],
+            },
+            {
+              name: "放水洞变形监测", count: 22, expanded: true, children: [
+                { name: "多点位移计", count: 18 },
+                { name: "测缝计", count: 4 },
+              ],
+            },
+            {
+              name: "溢洪道监测", count: 4, expanded: true, children: [
+                { name: "水尺", count: 2 },
+                { name: "流速仪", count: 2 },
+              ],
+            },
+            {
+              name: "人工观测仪器", count: 3, expanded: true, children: [
+                { name: "水准仪", count: 1 },
+                { name: "经纬仪", count: 1 },
+                { name: "全站仪", count: 1 },
               ],
             },
           ],
@@ -415,18 +428,18 @@ export default {
       // 报警数据
       // 巡检记录
       patrolRecords: [
-        { id: "PR01", time: "08:30", point: "坝顶水平位移-01", person: "张建国", status: "正常" },
-        { id: "PR02", time: "08:45", point: "坝基垂直位移-03", person: "张建国", status: "正常" },
-        { id: "PR03", time: "09:10", point: "渗流压力-P05", person: "李卫东", status: "正常" },
-        { id: "PR04", time: "09:30", point: "绕坝渗流-S01", person: "李卫东", status: "正常" },
-        { id: "PR05", time: "09:55", point: "钢筋应力-R01", person: "王振华", status: "异常" },
-        { id: "PR06", time: "10:20", point: "基岩应力-Y02", person: "王振华", status: "正常" },
-        { id: "PR07", time: "10:40", point: "库水位-W01", person: "张建国", status: "正常" },
-        { id: "PR08", time: "11:00", point: "裂缝开合度-C01", person: "张建国", status: "正常" },
+        { id: "PR01", time: "08:30", point: "GNSS监测站-01", person: "张建国", status: "正常" },
+        { id: "PR02", time: "08:45", point: "GNSS监测站-05", person: "张建国", status: "正常" },
+        { id: "PR03", time: "09:10", point: "渗压计-P03", person: "李卫东", status: "正常" },
+        { id: "PR04", time: "09:30", point: "渗压计-P08", person: "李卫东", status: "正常" },
+        { id: "PR05", time: "09:55", point: "多点位移计-D03", person: "王振华", status: "正常" },
+        { id: "PR06", time: "10:20", point: "测缝计-F02", person: "王振华", status: "正常" },
+        { id: "PR07", time: "10:40", point: "水尺-W01", person: "张建国", status: "正常" },
+        { id: "PR08", time: "11:00", point: "GNSS基准站-J02", person: "张建国", status: "正常" },
       ],
       thresholdAlarms: [
-        { id: "T001", device: "钢筋应力-R01-03", threshold: "200 MPa", current: "246 MPa", over: "23%", level: "critical", time: "2026-06-08 11:00" },
-        { id: "T002", device: "基岩应力-Y02-05", threshold: "150 MPa", current: "172 MPa", over: "14.7%", level: "critical", time: "2026-06-08 10:10" },
+        { id: "T001", device: "渗压计-P07", threshold: "0.60 MPa", current: "0.68 MPa", over: "13.3%", level: "warning", time: "2026-06-08 11:00" },
+        { id: "T002", device: "测缝计-F03", threshold: "8 mm", current: "9.2 mm", over: "15%", level: "warning", time: "2026-06-08 10:10" },
       ],
       mergedTab: 'deform',
     };
@@ -534,14 +547,14 @@ export default {
            series: [{
              type: "gauge",
              center: ["50%", "55%"],
-             radius: "80%",
+             radius: "75%",
              startAngle: 210,
              endAngle: -30,
              min: 0,
-             max: 3000,
+             max: 120,
              splitNumber: 3,
-             progress: { show: true, width: 16, itemStyle: { color: { type: "linear", x: 0, y: 0, x2: 1, y2: 0, colorStops: [{ offset: 0, color: "#62f6fb" }, { offset: 0.5, color: "#a78bfa" }, { offset: 1, color: "#fbbf24" }] } } },
-              axisLine: { lineStyle: { width: 16, color: [[1, "rgba(255,255,255,0.08)"]] } },
+             progress: { show: true, width: 12, itemStyle: { color: { type: "linear", x: 0, y: 0, x2: 1, y2: 0, colorStops: [{ offset: 0, color: "#62f6fb" }, { offset: 0.5, color: "#a78bfa" }, { offset: 1, color: "#fbbf24" }] } } },
+              axisLine: { lineStyle: { width: 12, color: [[1, "rgba(255,255,255,0.08)"]] } },
              axisTick: { show: false },
              splitLine: { show: false },
              axisLabel: { show: false },
@@ -549,14 +562,14 @@ export default {
              anchor: { show: false },
              title: { show: false },
              detail: {
-                offsetCenter: [0, "20%"],
-                formatter: () => "{val|2,279}\n{label|在线仪器}",
+                offsetCenter: [0, "25%"],
+                formatter: () => "{val|98}\n{label|监测设备}",
                 rich: {
-                  val: { color: "#ffffff", fontSize: 22, fontWeight: "bold", lineHeight: 30 },
-                  label: { color: "#ffffff", fontSize: 15, lineHeight: 22 },
+                  val: { color: "#ffffff", fontSize: 16, fontWeight: "bold", lineHeight: 22 },
+                  label: { color: "#ffffff", fontSize: 11, lineHeight: 16 },
                 },
               },
-             data: [{ value: 2279, name: "" }],
+             data: [{ value: 98, name: "" }],
            }],
         });
       }
@@ -566,7 +579,7 @@ export default {
 </script>
 <style scoped>
 .safety-container { width: 100%; height: 100%; display: flex; flex-direction: column; position: relative; overflow: hidden; }
-.safety-scroll-area { position: absolute; left: 0; right: 0; top: 80px; bottom: 0; overflow-y: auto; overflow-x: hidden; z-index: 5; padding-bottom: 40px; pointer-events: none; display: flex; flex-direction: column; align-items: center; }
+.safety-scroll-area { position: absolute; left: 0; right: 0; top: 120px; bottom: 0; overflow-y: auto; overflow-x: hidden; z-index: 5; padding-bottom: 40px; pointer-events: none; display: flex; flex-direction: column; align-items: center; }
 .safety-scroll-area::-webkit-scrollbar { width: 4px; }
 .safety-scroll-area::-webkit-scrollbar-track { background: rgba(0,20,40,0.5); }
 .safety-scroll-area::-webkit-scrollbar-thumb { background: rgba(0,212,255,0.3); border-radius: 2px; }
@@ -574,19 +587,19 @@ export default {
 
 
 
-.left-sidebar { width: 420px; flex-shrink: 0; pointer-events: auto; display: flex; flex-direction: column; }
+.left-sidebar { width: 380px; flex-shrink: 0; pointer-events: auto; display: flex; flex-direction: column; }
 .right-sidebar { width: 380px; flex-shrink: 0; pointer-events: auto; display: flex; flex-direction: column; }
 .mt-10 { margin-top: 8px; }
 
 /* ========== Data Card ========== */
 .data-card { width: 100%; background: rgba(0,20,40,0.7); border-radius: 4px; overflow: hidden; box-shadow: 0 0 10px rgba(0,212,255,0.2); display: flex; flex-direction: column; }
 .left-sidebar .data-card { flex: unset; }
-.left-sidebar .data-card:first-child .card-body { max-height: 155px; overflow-y: auto; }
+.left-sidebar .data-card:first-child .card-body { max-height: 175px; overflow-y: auto; }
 .card-header { height: 38px; background-image: url("/src/assets/images/数据小标题.png"); background-size: 100% 100%; background-position: center; background-repeat: no-repeat; display: flex; align-items: flex-start; justify-content: space-between; padding: 4px 12px 0; }
 .card-title { font-size: 13px; font-weight: bold; color: #e0fcff; margin: 0; text-shadow: 0 0 5px rgba(0,212,255,0.5); padding-left: 25px; padding-right: 25px; }
 .card-body { padding: 8px; min-height: auto; font-size: 12px; line-height: 1.4; margin-top: -4px; }
 .card-body.chart-body { padding: 3px 8px 4px; }
-.card-body.card-body-tight { padding: 3px 8px 4px; height: 100%; }
+.card-body.card-body-tight { padding: 1px 6px 2px; height: 100%; }
 
 /* ========== Safety Evaluation ========== */
 .safety-eval-section { background: rgba(0,20,40,0.5); border-radius: 4px; border: 1px solid rgba(0,212,255,0.12); padding: 6px 10px; display: flex; flex-direction: column; gap: 5px; }
@@ -612,13 +625,23 @@ export default {
 .safety-eval-time { margin-left: auto; color: #7bbef6; font-size: 10px; white-space: nowrap; }
 
 /* ========== Device Stats + Gauge ========== */
-.device-stats-row { display: flex; gap: 3px; align-items: center; }
-.device-stat-card { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; border-radius: 4px; padding: 4px 3px; }
-.device-stat-percent { color: #e0fcff; font-size: 17px; font-weight: bold; }
+.device-stats-row { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
+.monitor-summary-row { display: flex; gap: 4px; margin-bottom: 3px; }
+.monitor-summary-card { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; background: rgba(0,20,40,0.5); border-radius: 4px; border: 1px solid rgba(0,212,255,0.12); padding: 5px 3px; cursor: pointer; transition: all 0.2s; }
+.monitor-summary-card:hover { border-color: rgba(0,212,255,0.35); background: rgba(0,30,60,0.6); }
+.monitor-summary-card.active { border-color: rgba(0,212,255,0.6); background: rgba(0,40,80,0.7); box-shadow: 0 0 8px rgba(0,212,255,0.2); }
+.summary-pie-area { background: rgba(0,20,40,0.4); border-radius: 4px; border: 1px solid rgba(0,212,255,0.1); padding: 1px; margin-bottom: 3px; text-align: center; }
+.progress-ring { flex-shrink: 0; }
+.progress-ring-bg { fill: none; stroke: rgba(255,255,255,0.08); stroke-width: 3; }
+.progress-ring-fill { fill: none; stroke-width: 3; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 24px 24px; }
+.monitor-summary-name { color: #7bbef6; font-size: 10px; }
+.monitor-summary-count { font-size: 16px; font-weight: bold; }
+.device-stat-card { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; border-radius: 4px; padding: 2px 3px; }
+.device-stat-percent { color: #e0fcff; font-size: 14px; font-weight: bold; }
 .device-stat-icon { display: flex; align-items: center; justify-content: center; height: 28px; }
-.stat-icon-img { height: auto; width: auto; max-height: none; }
-.device-stat-label { color: #ffffff; font-size: 11px; white-space: nowrap; }
-.device-gauge-section { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; margin: 0; }
+.stat-icon-img { height: auto; width: auto; max-height: 28px; }
+.device-stat-label { color: #ffffff; font-size: 10px; white-space: nowrap; }
+.device-gauge-section { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; margin: 0; line-height: 0; }
 
 /* ========== Monitor Summary ========== */
 .monitor-divider { height: 1px; background: rgba(0,212,255,0.15); margin: 3px 0; }
@@ -652,23 +675,23 @@ export default {
 .patrol-row-status.status-abnormal { color: #ef4444; background: rgba(239,68,68,0.15); }
 
 /* ========== Threshold Alarm ========== */
-.threshold-summary { display: flex; gap: 4px; margin-bottom: 3px; }
+.threshold-summary { display: flex; gap: 4px; margin: 4px 0; }
 .threshold-stat { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 4px 3px; background: rgba(0,20,40,0.4); border-radius: 4px; border: 1px solid rgba(0,212,255,0.1); }
 .threshold-stat-value { font-size: 19px; font-weight: bold; color: #ef4444; line-height: 1.1; }
 .threshold-stat-label { font-size: 10px; color: #7bbef6; margin-top: 1px; }
-.threshold-item { padding: 4px 5px; border-radius: 3px; border: 1px solid transparent; margin-bottom: 2px; }
+.threshold-item { padding: 3px 5px; border-radius: 3px; border: 1px solid transparent; margin-bottom: 2px; }
 .threshold-item.threshold-critical { background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.2); }
 .threshold-item.threshold-warning { background: rgba(251,191,36,0.06); border-color: rgba(251,191,36,0.15); }
-.threshold-item-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; }
-.threshold-device { color: #e0fcff; font-size: 11px; font-weight: bold; }
-.threshold-tag { font-size: 9px; padding: 0 5px; border-radius: 2px; line-height: 16px; }
+.threshold-item-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1px; }
+.threshold-device { color: #e0fcff; font-size: 10px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.threshold-tag { font-size: 9px; padding: 0 4px; border-radius: 2px; line-height: 14px; }
 .tag-critical { background: rgba(239,68,68,0.2); color: #ef4444; }
 .tag-warning { background: rgba(251,191,36,0.2); color: #fbbf24; }
-.threshold-item-body { display: flex; gap: 3px; margin-bottom: 1px; }
-.threshold-metric { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 1px 3px; background: rgba(0,20,40,0.3); border-radius: 2px; }
-.tm-label { color: #7bbef6; font-size: 9px; }
-.tm-value { color: #e0fcff; font-size: 11px; font-weight: bold; }
-.threshold-item-time { color: #7bbef6; font-size: 9px; text-align: right; }
+.threshold-item-body { display: flex; gap: 2px; margin-bottom: 0; }
+.threshold-metric { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 0 3px; background: rgba(0,20,40,0.3); border-radius: 2px; }
+.tm-label { color: #7bbef6; font-size: 8px; line-height: 12px; }
+.tm-value { color: #e0fcff; font-size: 10px; font-weight: bold; line-height: 14px; }
+.threshold-item-time { color: #7bbef6; font-size: 8px; text-align: right; line-height: 14px; }
 
 /* ========== Deformation & Seepage Section ========== */
 .deform-section,

src/views/mainPages/GateControlView.vue

@@ -88,9 +88,14 @@
           <div class="data-card env-card">
             <div class="panel-header">
               <h3>闸室监控</h3>
+              <div class="chamber-tabs">
+                <span class="chamber-tab" :class="{ active: chamberTab === 'intake' }" @click="chamberTab = 'intake'">引水口</span>
+                <span class="chamber-tab" :class="{ active: chamberTab === 'outlet' }" @click="chamberTab = 'outlet'">放水洞</span>
+              </div>
             </div>
             <div class="panel-content">
-              <div class="env-grid">
+              <!-- 引水口闸室 -->
+              <div v-if="chamberTab === 'intake'" class="env-grid">
                 <div class="env-cell">
                   <span class="env-label">闸室温度</span>
                   <div class="mini-gauge">
@@ -160,6 +165,77 @@
                   </div>
                 </div>
               </div>
+              <!-- 放水洞闸室 -->
+              <div v-if="chamberTab === 'outlet'" class="env-grid">
+                <div class="env-cell">
+                  <span class="env-label">闸室温度</span>
+                  <div class="mini-gauge">
+                    <svg viewBox="0 0 40 20" class="gauge-svg">
+                      <path d="M6 18 A14 14 0 0 1 34 18" fill="none" stroke="rgba(255,255,255,0.15)" stroke-width="3" stroke-linecap="round"/>
+                      <path d="M6 18 A14 14 0 0 1 34 18" fill="none" stroke="#00d4ff" stroke-width="3" stroke-linecap="round" stroke-dasharray="18 100"/>
+                    </svg>
+                    <span class="gauge-value">24.8°C</span>
+                  </div>
+                </div>
+                <div class="env-cell">
+                  <span class="env-label">闸室湿度</span>
+                  <div class="mini-gauge">
+                    <svg viewBox="0 0 40 20" class="gauge-svg">
+                      <path d="M6 18 A14 14 0 0 1 34 18" fill="none" stroke="rgba(255,255,255,0.15)" stroke-width="3" stroke-linecap="round"/>
+                      <path d="M6 18 A14 14 0 0 1 34 18" fill="none" stroke="#00d4ff" stroke-width="3" stroke-linecap="round" stroke-dasharray="35 100"/>
+                    </svg>
+                    <span class="gauge-value">72.5%</span>
+                  </div>
+                </div>
+                <div class="env-cell">
+                  <span class="env-label">闸井积水</span>
+                  <div class="env-progress">
+                    <div class="progress-bar-bg">
+                      <div class="progress-bar-fill" style="width: 22%"></div>
+                    </div>
+                    <span class="progress-status normal">22%</span>
+                  </div>
+                </div>
+                <div class="env-cell">
+                  <span class="env-label">供电</span>
+                  <div class="supply-group">
+                    <span class="supply-badge primary">市电 220V</span>
+                    <span class="supply-badge backup">备用</span>
+                  </div>
+                </div>
+                <div class="env-cell">
+                  <span class="env-label">主通讯链路</span>
+                  <div class="signal-row">
+                    <span class="signal-icon online">在线</span>
+                    <div class="signal-bar"><div class="signal-fill" style="width: 88%"></div></div>
+                    <span class="signal-text">88%</span>
+                  </div>
+                </div>
+                <div class="env-cell">
+                  <span class="env-label">备用通讯链路</span>
+                  <div class="signal-row">
+                    <span class="signal-icon online">在线</span>
+                    <div class="signal-bar"><div class="signal-fill" style="width: 76%"></div></div>
+                    <span class="signal-text">76%</span>
+                  </div>
+                </div>
+                <div class="env-cell">
+                  <span class="env-label">全站告警</span>
+                  <div class="env-alarm-row">
+                    <span class="env-alarm-num">1</span>
+                    <span class="env-alarm-unit">条</span>
+                  </div>
+                </div>
+                <div class="env-cell">
+                  <span class="env-label">设备在线率</span>
+                  <div class="env-progress">
+                    <div class="progress-bar-bg">
+                      <div class="progress-bar-fill" style="width: 100%"></div>
+                    </div>
+                    <span class="rate-text-sm">100%</span>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
 
@@ -195,221 +271,93 @@
       <!-- ========== 右侧面板 ========== -->
       <div class="right-sidebar">
         <div class="right-container">
-          <!-- 右侧数据框 1：1# 弧形钢闸门 -->
+          <!-- 右侧数据框 1：引水口闸室（3个螺杆闸） -->
           <div class="data-card gate-card">
             <div class="panel-header">
-              <h3>1# 弧形钢闸门</h3>
+              <h3>引水口闸</h3>
             </div>
             <div class="panel-content">
-              <div class="info-grid">
-                <div class="info-cell">
-                  <span class="info-label">编号</span>
-                  <span class="info-text">G01</span>
-                </div>
-                <div class="info-cell">
-                  <span class="info-label">结构类型</span>
-                  <span class="info-text">弧形钢闸门</span>
-                </div>
-                <div class="info-cell">
-                  <span class="info-label">最大开度</span>
-                  <span class="info-text">8.0 m</span>
-                </div>
-                <div class="info-cell">
-                  <span class="info-label">过流流量</span>
-                  <span class="info-text">120 m³/s</span>
-                </div>
-              </div>
-              <div class="section-divider"></div>
-              <div class="section-title">启闭机工况</div>
-              <div class="machine-status-row">
-                <span class="state-badge running">运行中</span>
-                <span class="machine-label">负载率</span>
-                <div class="load-bar">
-                  <div class="progress-bar-bg"><div class="progress-bar-fill" style="width: 68%"></div></div>
-                  <span class="load-text">68%</span>
-                </div>
-              </div>
-              <div class="machine-grid">
-                <div class="machine-item">
-                  <span class="machine-label">电压</span>
-                  <span class="machine-value">AC 380V</span>
-                </div>
-                <div class="machine-item">
-                  <span class="machine-label">电流</span>
-                  <span class="machine-value">45.2 A</span>
+              <div class="gate-chamber-info">
+                <div class="chamber-stat">
+                  <span class="chamber-stat-label">闸室状态</span>
+                  <span class="chamber-stat-value" style="color:#22c55e;">运行中</span>
                 </div>
-                <div class="machine-item">
-                  <span class="machine-label">功率</span>
-                  <span class="machine-value">18.5 kW</span>
+                <div class="chamber-stat">
+                  <span class="chamber-stat-label">闸门类型</span>
+                  <span class="chamber-stat-value">螺杆闸</span>
                 </div>
-                <div class="machine-item">
-                  <span class="machine-label">运行时长</span>
-                  <span class="machine-value">1,280 h</span>
+                <div class="chamber-stat">
+                  <span class="chamber-stat-label">闸门数量</span>
+                  <span class="chamber-stat-value">3 扇</span>
                 </div>
               </div>
               <div class="section-divider"></div>
-              <div class="section-title">开度</div>
-              <div class="opening-row">
-                <div class="opening-item">
-                  <span class="opening-label-sm">实时</span>
-                  <span class="opening-value">4.96 m</span>
-                </div>
-                <div class="opening-item">
-                  <span class="opening-label-sm">目标</span>
-                  <span class="opening-value">5.0 m</span>
-                </div>
-                <div class="opening-item">
-                  <span class="opening-label-sm">偏差</span>
-                  <span class="opening-value deviation">-0.04 m</span>
-                </div>
-              </div>
-              <div class="section-divider"></div>
-              <div class="section-title">安全保护</div>
-              <div class="safety-grid">
-                <div class="safety-item">
-                  <span class="safety-icon normal">&#10003;</span>
-                  <span class="safety-text">上限位</span>
-                </div>
-                <div class="safety-item">
-                  <span class="safety-icon normal">&#10003;</span>
-                  <span class="safety-text">下限位</span>
-                </div>
-                <div class="safety-item">
-                  <span class="safety-icon normal">&#10003;</span>
-                  <span class="safety-text">渗漏监测</span>
-                </div>
-                <div class="safety-item">
-                  <span class="safety-icon normal">&#10003;</span>
-                  <span class="safety-text">密封状态</span>
-                </div>
-                <div class="safety-item">
-                  <span class="safety-icon warning">!</span>
-                  <span class="safety-text">超载保护</span>
-                </div>
-                <div class="safety-item">
-                  <span class="safety-icon normal">&#10003;</span>
-                  <span class="safety-text">紧急停机</span>
+              <div class="section-title">螺杆闸运行状态</div>
+              <div v-for="(gate, idx) in screwGates" :key="idx" class="screw-gate-row">
+                <div class="screw-gate-header">
+                  <span class="screw-gate-name">{{ gate.name }}</span>
+                  <span :class="['state-badge', gate.status === '运行中' ? 'running' : 'standby']">{{ gate.status }}</span>
+                </div>
+                <div class="screw-gate-cards">
+                  <div class="screw-gate-card">
+                    <span class="screw-card-label">开度</span>
+                    <span class="screw-card-value">{{ gate.opening }}</span>
+                  </div>
+                  <div class="screw-gate-card">
+                    <span class="screw-card-label">目标</span>
+                    <span class="screw-card-value">{{ gate.target }}</span>
+                  </div>
+                  <div class="screw-gate-card">
+                    <span class="screw-card-label">负载</span>
+                    <span class="screw-card-value">{{ gate.load }}</span>
+                  </div>
                 </div>
               </div>
-              <div class="section-divider"></div>
-              <div class="section-title">操作记录</div>
-              <div class="operation-row">
-                <span class="op-label">开启</span>
-                <span class="op-divider">|</span>
-                <span class="op-label">09:15</span>
-                <span class="op-divider">|</span>
-                <span class="op-label">时长</span>
-                <span class="op-value">8 min</span>
-              </div>
             </div>
           </div>
 
-          <!-- 右侧数据框 2：2# 平面钢闸门 -->
+          <!-- 右侧数据框 2：放水洞闸 -->
           <div class="data-card gate-card">
             <div class="panel-header">
-              <h3>2# 平面钢闸门</h3>
+              <h3>放水洞闸</h3>
             </div>
             <div class="panel-content">
-              <div class="info-grid">
-                <div class="info-cell">
-                  <span class="info-label">编号</span>
-                  <span class="info-text">G02</span>
+              <div class="gate-chamber-info">
+                <div class="chamber-stat">
+                  <span class="chamber-stat-label">闸室状态</span>
+                  <span class="chamber-stat-value" style="color:#22c55e;">运行中</span>
                 </div>
-                <div class="info-cell">
-                  <span class="info-label">结构类型</span>
-                  <span class="info-text">平面钢闸门</span>
+                <div class="chamber-stat">
+                  <span class="chamber-stat-label">闸门类型</span>
+                  <span class="chamber-stat-value">放水闸</span>
                 </div>
-                <div class="info-cell">
-                  <span class="info-label">最大开度</span>
-                  <span class="info-text">6.0 m</span>
-                </div>
-                <div class="info-cell">
-                  <span class="info-label">过流流量</span>
-                  <span class="info-text">80 m³/s</span>
+                <div class="chamber-stat">
+                  <span class="chamber-stat-label">闸门数量</span>
+                  <span class="chamber-stat-value">2 孔</span>
                 </div>
               </div>
               <div class="section-divider"></div>
-              <div class="section-title">启闭机工况</div>
-              <div class="machine-status-row">
-                <span class="state-badge standby">待机</span>
-                <span class="machine-label">负载率</span>
-                <div class="load-bar">
-                  <div class="progress-bar-bg"><div class="progress-bar-fill" style="width: 25%"></div></div>
-                  <span class="load-text">25%</span>
-                </div>
-              </div>
-              <div class="machine-grid">
-                <div class="machine-item">
-                  <span class="machine-label">电压</span>
-                  <span class="machine-value">AC 380V</span>
-                </div>
-                <div class="machine-item">
-                  <span class="machine-label">电流</span>
-                  <span class="machine-value">12.8 A</span>
-                </div>
-                <div class="machine-item">
-                  <span class="machine-label">功率</span>
-                  <span class="machine-value">5.2 kW</span>
-                </div>
-                <div class="machine-item">
-                  <span class="machine-label">运行时长</span>
-                  <span class="machine-value">860 h</span>
-                </div>
-              </div>
-              <div class="section-divider"></div>
-              <div class="section-title">开度</div>
-              <div class="opening-row">
-                <div class="opening-item">
-                  <span class="opening-label-sm">实时</span>
-                  <span class="opening-value">2.52 m</span>
-                </div>
-                <div class="opening-item">
-                  <span class="opening-label-sm">目标</span>
-                  <span class="opening-value">2.7 m</span>
-                </div>
-                <div class="opening-item">
-                  <span class="opening-label-sm">偏差</span>
-                  <span class="opening-value deviation">-0.18 m</span>
-                </div>
-              </div>
-              <div class="section-divider"></div>
-              <div class="section-title">安全保护</div>
-              <div class="safety-grid">
-                <div class="safety-item">
-                  <span class="safety-icon normal">&#10003;</span>
-                  <span class="safety-text">上限位</span>
-                </div>
-                <div class="safety-item">
-                  <span class="safety-icon normal">&#10003;</span>
-                  <span class="safety-text">下限位</span>
-                </div>
-                <div class="safety-item">
-                  <span class="safety-icon normal">&#10003;</span>
-                  <span class="safety-text">渗漏监测</span>
-                </div>
-                <div class="safety-item">
-                  <span class="safety-icon warning">!</span>
-                  <span class="safety-text">密封状态</span>
-                </div>
-                <div class="safety-item">
-                  <span class="safety-icon normal">&#10003;</span>
-                  <span class="safety-text">超载保护</span>
-                </div>
-                <div class="safety-item">
-                  <span class="safety-icon normal">&#10003;</span>
-                  <span class="safety-text">紧急停机</span>
+              <div class="section-title">放水闸运行状态</div>
+              <div v-for="(gate, idx) in outletGates" :key="idx" class="screw-gate-row">
+                <div class="screw-gate-header">
+                  <span class="screw-gate-name">{{ gate.name }}</span>
+                  <span :class="['state-badge', gate.status === '运行中' ? 'running' : 'standby']">{{ gate.status }}</span>
+                </div>
+                <div class="screw-gate-cards">
+                  <div class="screw-gate-card">
+                    <span class="screw-card-label">开度</span>
+                    <span class="screw-card-value">{{ gate.opening }}</span>
+                  </div>
+                  <div class="screw-gate-card">
+                    <span class="screw-card-label">目标</span>
+                    <span class="screw-card-value">{{ gate.target }}</span>
+                  </div>
+                  <div class="screw-gate-card">
+                    <span class="screw-card-label">流量</span>
+                    <span class="screw-card-value">{{ gate.flow }}</span>
+                  </div>
                 </div>
               </div>
-              <div class="section-divider"></div>
-              <div class="section-title">操作记录</div>
-              <div class="operation-row">
-                <span class="op-label">关闭</span>
-                <span class="op-divider">|</span>
-                <span class="op-label">10:20</span>
-                <span class="op-divider">|</span>
-                <span class="op-label">时长</span>
-                <span class="op-value">6 min</span>
-              </div>
             </div>
           </div>
 
@@ -557,6 +505,7 @@
 
 <script setup>
 import { useRouter } from 'vue-router'
+import { ref } from 'vue'
 import GradientOverlay from '../../components/gradient-overlay.vue'
 import TopNav from '../../components/TopNav.vue'
 import CesiumMap from '../../components/CesiumMap.vue'
@@ -568,6 +517,8 @@ const props = defineProps({
   }
 })
 
+const chamberTab = ref('intake')
+
 const router = useRouter()
 
 const handleNav = (button) => {
@@ -575,6 +526,17 @@ const handleNav = (button) => {
   else if (button === '水情测报') router.push({ path: '/', query: { tab: '水情测报' } })
   else if (button === '工程安全') router.push({ path: '/', query: { tab: '工程安全' } })
 }
+
+const outletGates = [
+  { name: '1#闸门', status: '运行中', opening: '2.18 m', target: '2.5 m', flow: '25 m³/s', lastOp: '开启', lastTime: '08:45' },
+  { name: '2#闸门', status: '待机', opening: '0.00 m', target: '0.0 m', flow: '0 m³/s', lastOp: '关闭', lastTime: '昨日 16:30' },
+]
+
+const screwGates = [
+  { name: '引水闸1#（螺杆闸）', status: '运行中', opening: '3.25 m', target: '3.5 m', load: '62%', lastOp: '开启', lastTime: '09:10' },
+  { name: '引水闸2#（螺杆闸）', status: '运行中', opening: '2.80 m', target: '3.0 m', load: '55%', lastOp: '调节', lastTime: '08:30' },
+  { name: '引水闸3#（螺杆闸）', status: '待机', opening: '0.00 m', target: '0.0 m', load: '0%', lastOp: '关闭', lastTime: '昨日 17:00' },
+]
 </script>
 
 <style scoped>
@@ -689,12 +651,20 @@ const handleNav = (button) => {
 }
 
 .panel-content {
-  font-size: 13px;
-  line-height: 1;
+  font-size: 14px;
+  line-height: 1.3;
   width: 100%;
   color: #ffffff;
   background: transparent;
   padding: 8px 10px;
+  overflow-y: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  flex: 1;
+  min-height: 0;
+}
+.panel-content::-webkit-scrollbar {
+  display: none;
 }
 
 /* ---- 调度计划与指令 ---- */
@@ -710,14 +680,14 @@ const handleNav = (button) => {
 }
 
 .dispatch-label {
-  font-size: 13px;
+  font-size: 14px;
   color: #62f6fb;
 }
 
 .mode-badge {
   padding: 4px 14px;
   border-radius: 4px;
-  font-size: 12px;
+  font-size: 13px;
   font-weight: bold;
 }
 
@@ -738,20 +708,20 @@ const handleNav = (button) => {
 }
 
 .scheme-label {
-  font-size: 13px;
+  font-size: 14px;
   color: #62f6fb;
   min-width: 65px;
 }
 
 .scheme-value {
-  font-size: 13px;
+  font-size: 14px;
   color: #ffffff;
 }
 
 .status-tag {
   padding: 2px 8px;
   border-radius: 3px;
-  font-size: 11px;
+  font-size: 12px;
   font-weight: bold;
 }
 
@@ -766,7 +736,7 @@ const handleNav = (button) => {
 }
 
 .section-title {
-  font-size: 12px;
+  font-size: 13px;
   font-weight: bold;
   color: #00d4ff;
   margin-bottom: 4px;
@@ -888,6 +858,37 @@ const handleNav = (button) => {
 .env-card {
   min-height: 100px;
 }
+.env-card .panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: 0px;
+  height: 40px;
+}
+.env-card .panel-header h3 {
+  padding-right: 16px;
+}
+.chamber-tabs {
+  display: flex;
+  gap: 2px;
+}
+.chamber-tab {
+  font-size: 11px;
+  color: rgba(123, 190, 246, 0.7);
+  padding: 2px 8px;
+  border-radius: 3px;
+  cursor: pointer;
+  border: 1px solid rgba(0, 212, 255, 0.15);
+  background: rgba(0, 20, 40, 0.4);
+  transition: all 0.2s;
+}
+.chamber-tab.active {
+  color: #00d4ff;
+  background: rgba(0, 212, 255, 0.15);
+  border-color: rgba(0, 212, 255, 0.4);
+  padding-top: 0px;
+  flex-direction: column;
+}
 
 .env-grid {
   display: grid;
@@ -905,7 +906,7 @@ const handleNav = (button) => {
 }
 
 .env-label {
-  font-size: 11px;
+  font-size: 12px;
   color: #62f6fb;
 }
 
@@ -968,7 +969,7 @@ const handleNav = (button) => {
 }
 
 .env-alarm-unit {
-  font-size: 11px;
+  font-size: 12px;
   color: #a0c4e0;
 }
 
@@ -988,7 +989,7 @@ const handleNav = (button) => {
 }
 
 .progress-status {
-  font-size: 11px;
+  font-size: 12px;
   white-space: nowrap;
 }
 
@@ -1004,7 +1005,7 @@ const handleNav = (button) => {
 .supply-badge {
   padding: 3px 10px;
   border-radius: 3px;
-  font-size: 11px;
+  font-size: 12px;
   font-weight: bold;
 }
 
@@ -1051,7 +1052,7 @@ const handleNav = (button) => {
 }
 
 .signal-text {
-  font-size: 11px;
+  font-size: 12px;
   color: #a0c4e0;
 }
 
@@ -1078,7 +1079,7 @@ const handleNav = (button) => {
 }
 
 .stat-label {
-  font-size: 11px;
+  font-size: 12px;
   color: #a0c4e0;
 }
 
@@ -1098,6 +1099,9 @@ const handleNav = (button) => {
 /* ---- 右侧闸门卡片 ---- */
 .gate-card {
   min-height: 200px;
+  max-height: 400px;
+  display: flex;
+  flex-direction: column;
 }
 
 .info-grid {
@@ -1115,12 +1119,12 @@ const handleNav = (button) => {
 }
 
 .info-label {
-  font-size: 12px;
+  font-size: 13px;
   color: #62f6fb;
 }
 
 .info-text {
-  font-size: 12px;
+  font-size: 13px;
   color: #ffffff;
 }
 
@@ -1140,12 +1144,12 @@ const handleNav = (button) => {
 }
 
 .opening-label-sm {
-  font-size: 12px;
+  font-size: 13px;
   color: #a0c4e0;
 }
 
 .opening-value {
-  font-size: 13px;
+  font-size: 14px;
   font-weight: bold;
   color: #ffffff;
 }
@@ -1205,7 +1209,7 @@ const handleNav = (button) => {
 }
 
 .load-text {
-  font-size: 12px;
+  font-size: 13px;
   font-weight: bold;
   color: #00d4ff;
   min-width: 30px;
@@ -1227,12 +1231,12 @@ const handleNav = (button) => {
 }
 
 .machine-label {
-  font-size: 12px;
+  font-size: 13px;
   color: #62f6fb;
 }
 
 .machine-value {
-  font-size: 12px;
+  font-size: 13px;
   color: #ffffff;
   font-weight: bold;
 }
@@ -1254,13 +1258,13 @@ const handleNav = (button) => {
 }
 
 .safety-icon {
-  width: 14px;
-  height: 14px;
+  width: 16px;
+  height: 16px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 9px;
+  font-size: 10px;
   font-weight: bold;
   flex-shrink: 0;
 }
@@ -1269,7 +1273,7 @@ const handleNav = (button) => {
 .safety-icon.warning { background: rgba(255, 170, 0, 0.2); color: #ffaa00; }
 
 .safety-text {
-  font-size: 11px;
+  font-size: 12px;
   color: #a0c4e0;
 }
 
@@ -1284,17 +1288,17 @@ const handleNav = (button) => {
 }
 
 .op-label {
-  font-size: 12px;
+  font-size: 13px;
   color: #62f6fb;
 }
 
 .op-divider {
-  font-size: 12px;
+  font-size: 13px;
   color: rgba(255,255,255,0.2);
 }
 
 .op-value {
-  font-size: 12px;
+  font-size: 13px;
   color: #ffffff;
   font-weight: bold;
 }
@@ -1304,6 +1308,78 @@ const handleNav = (button) => {
   min-height: 150px;
 }
 
+/* ---- 引水口闸室（螺杆闸） ---- */
+.gate-chamber-info {
+  display: flex;
+  gap: 6px;
+  margin-bottom: 4px;
+}
+.chamber-stat {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  background: rgba(0, 20, 40, 0.5);
+  border: 1px solid rgba(0, 212, 255, 0.1);
+  border-radius: 3px;
+  padding: 3px 2px;
+}
+.chamber-stat-label {
+  font-size: 12px;
+  color: rgba(123, 190, 246, 0.7);
+}
+.chamber-stat-value {
+  font-size: 14px;
+  font-weight: bold;
+  color: #e0fcff;
+}
+.screw-gate-row {
+  background: rgba(0, 20, 40, 0.4);
+  border: 1px solid rgba(0, 212, 255, 0.08);
+  border-radius: 3px;
+  padding: 5px 8px;
+  margin-bottom: 4px;
+}
+.screw-gate-row:last-child {
+  margin-bottom: 0;
+}
+.screw-gate-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 4px;
+}
+.screw-gate-name {
+  font-size: 13px;
+  font-weight: bold;
+  color: #e0fcff;
+}
+.screw-gate-cards {
+  display: flex;
+  gap: 4px;
+}
+.screw-gate-card {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  background: rgba(0, 40, 80, 0.25);
+  border: 1px solid rgba(0, 212, 255, 0.12);
+  border-radius: 4px;
+  padding: 6px 2px;
+}
+.screw-card-label {
+  font-size: 11px;
+  color: rgba(123, 190, 246, 0.6);
+}
+.screw-card-value {
+  font-size: 14px;
+  font-weight: bold;
+  color: #e0fcff;
+}
+
 .alarm-scroll {
   display: flex;
   flex-direction: column;
@@ -1323,9 +1399,9 @@ const handleNav = (button) => {
   display: flex;
   align-items: center;
   gap: 4px;
-  padding: 3px 6px;
+  padding: 4px 6px;
   border-radius: 3px;
-  font-size: 10px;
+  font-size: 12px;
   border: 1px solid transparent;
 }
 
@@ -1347,13 +1423,13 @@ const handleNav = (button) => {
 .alarm-time {
   color: #a0c4e0;
   min-width: 32px;
-  font-size: 10px;
+  font-size: 11px;
 }
 
 .alarm-level {
   padding: 1px 5px;
   border-radius: 2px;
-  font-size: 9px;
+  font-size: 10px;
   font-weight: bold;
   min-width: 24px;
   text-align: center;
@@ -1366,17 +1442,17 @@ const handleNav = (button) => {
 .alarm-device {
   color: #ffffff;
   min-width: 40px;
-  font-size: 10px;
+  font-size: 12px;
 }
 
 .alarm-desc {
   color: #a0c4e0;
   flex: 1;
-  font-size: 10px;
+  font-size: 12px;
 }
 
 .alarm-status {
-  font-size: 8px;
+  font-size: 10px;
   padding: 0 4px;
   border-radius: 2px;
 }
@@ -1387,33 +1463,33 @@ const handleNav = (button) => {
 .log-list {
   display: flex;
   flex-direction: column;
-  gap: 2px;
-  max-height: 160px;
+  gap: 3px;
+  max-height: 130px;
   overflow-y: auto;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
+  scrollbar-width: thin;
+  -ms-overflow-style: auto;
   margin-bottom: 3px;
 }
 
 .log-row {
   display: flex;
   align-items: center;
-  padding: 3px 6px;
+  padding: 5px 6px;
   background: rgba(0, 40, 80, 0.15);
   border-radius: 3px;
-  font-size: 11px;
+  font-size: 12px;
 }
 
 .log-time {
   color: #a0c4e0;
   width: 13%;
-  font-size: 11px;
+  font-size: 12px;
 }
 
 .log-operator {
   color: #62f6fb;
   width: 16%;
-  font-size: 11px;
+  font-size: 12px;
   text-align: center;
   letter-spacing: 0.5em;
 }
@@ -1421,23 +1497,23 @@ const handleNav = (button) => {
 .log-gate {
   color: #ffffff;
   width: 18%;
-  font-size: 11px;
+  font-size: 12px;
 }
 
 .log-action {
   color: #a0c4e0;
   width: 13%;
-  font-size: 11px;
+  font-size: 12px;
 }
 
 .log-source {
   color: #a0c4e0;
   width: 13%;
-  font-size: 11px;
+  font-size: 12px;
 }
 
 .log-result {
-  font-size: 8px;
+  font-size: 10px;
   padding: 0 4px;
   border-radius: 2px;
   text-align: center;
@@ -1467,7 +1543,7 @@ const handleNav = (button) => {
 }
 
 .supplement-label {
-  font-size: 10px;
+  font-size: 11px;
   color: #a0c4e0;
   text-align: center;
 }

src/views/mainPages/LifecycleView.vue

@@ -511,7 +511,7 @@ const handleNodeClick = (data) => {
 }
 
 const constructionEvents = [
-  { date: '2022-07 — 2024-06', title: '主体工程建设', desc: '乌拉海沟水库工程正式开工建设，历时24个月完成坝体填筑、混凝土浇筑及基础处理工程。总库容978万m³，最大坝高71.15m。', image: reservoirImage },
+  { date: '2022-07 — 2024-06', title: '主体工程建设', desc: '乌拉海沟水库工程正式开工建设，历时24个月完成坝体填筑、混凝土浇筑及基础处理工程。总库容978万m³，最大坝高71.07m。', image: reservoirImage },
   { date: '2024-07 — 2024-10', title: '金属结构安装', desc: '完成闸门、启闭机、引水管道（10.94km）及金属结构设备的安装调试工作。' },
   { date: '2024-08 — 2024-11', title: '安全监测系统建设', desc: '完成大坝安全监测系统（变形、渗流、应力应变）的安装与调试，实现数据自动采集。' },
   { date: '2024-12', title: '下闸蓄水验收', desc: '通过下闸蓄水阶段验收，水库开始蓄水运行。总投资3.6386亿元。' }

src/views/mainPages/OverviewView.vue

@@ -17,12 +17,12 @@
               <img src="/src/assets/images/乌拉海沟水库.png" alt="乌拉海沟水库" />
             </div>
             <div class="reservoir-info">
-              <p><span class="info-label">基本情况：</span>属于平原区水库（中型）</p>
-              <p><span class="info-label">工程等别：</span>Ⅰ等</p>
+              <p><span class="info-label">基本情况：</span>属小（1）型Ⅳ等工程，具有人畜饮水、工业供水、灌溉功能的综合性水利工程</p>
+              <p><span class="info-label">工程等别：</span>Ⅳ等</p>
               <p><span class="info-label">水利主管部门：</span>第四师水利局</p>
               <p><span class="info-label">管理部门：</span>第四师水利管理处</p>
               <p><span class="info-label">所在地：</span>第四师乌拉海沟 经度：87°25′00″ 纬度：44°09′00″</p>
-              <p><span class="info-label">主要功能：</span>防洪、灌溉、供水、生态、旅游、养殖</p>
+              <p><span class="info-label">主要功能：</span>人畜饮水、工业供水、灌溉</p>
             </div>
           </div>
       </div>
@@ -44,7 +44,7 @@
               <div class="feature-info">
                 <div class="feature-name">总库容</div>
                 <div class="feature-data">
-                  <span class="feature-value">6500</span>
+                  <span class="feature-value">978.0</span>
                   <span class="feature-unit">万m³</span>
                 </div>
               </div>
@@ -56,7 +56,7 @@
               <div class="feature-info">
                 <div class="feature-name">死库容</div>
                 <div class="feature-data">
-                  <span class="feature-value">860</span>
+                  <span class="feature-value">76.0</span>
                   <span class="feature-unit">万m³</span>
                 </div>
               </div>
@@ -68,7 +68,7 @@
               <div class="feature-info">
                 <div class="feature-name">死水位</div>
                 <div class="feature-data">
-                  <span class="feature-value">108.5</span>
+                  <span class="feature-value">947.0</span>
                   <span class="feature-unit">m</span>
                 </div>
               </div>
@@ -80,7 +80,7 @@
               <div class="feature-info">
                 <div class="feature-name">设计洪水位</div>
                 <div class="feature-data">
-                  <span class="feature-value">118.2</span>
+                  <span class="feature-value">978.20</span>
                   <span class="feature-unit">m</span>
                 </div>
               </div>
@@ -90,9 +90,9 @@
                 <img src="/src/assets/images/水电站大坝工程.png" alt="icon" />
               </div>
               <div class="feature-info">
-                <div class="feature-name">防洪高水位</div>
+                <div class="feature-name">正常蓄水位</div>
                 <div class="feature-data">
-                  <span class="feature-value">116.8</span>
+                  <span class="feature-value">977.50</span>
                   <span class="feature-unit">m</span>
                 </div>
               </div>
@@ -104,23 +104,11 @@
               <div class="feature-info">
                 <div class="feature-name">调节库容</div>
                 <div class="feature-data">
-                  <span class="feature-value">4200</span>
+                  <span class="feature-value">850.0</span>
                   <span class="feature-unit">万m³</span>
                 </div>
               </div>
             </div>
-            <div class="feature-item">
-              <div class="feature-icon-small">
-                <img src="/src/assets/images/水电站大坝工程.png" alt="icon" />
-              </div>
-              <div class="feature-info">
-                <div class="feature-name">正常蓄水位</div>
-                <div class="feature-data">
-                  <span class="feature-value">114.0</span>
-                  <span class="feature-unit">m</span>
-                </div>
-              </div>
-            </div>
             <div class="feature-item">
               <div class="feature-icon-small">
                 <img src="/src/assets/images/水电站大坝工程.png" alt="icon" />
@@ -128,7 +116,7 @@
               <div class="feature-info">
                 <div class="feature-name">校核洪水位</div>
                 <div class="feature-data">
-                  <span class="feature-value">119.5</span>
+                  <span class="feature-value">978.56</span>
                   <span class="feature-unit">m</span>
                 </div>
               </div>
@@ -157,7 +145,7 @@
                 <div class="feature-info">
                   <div class="feature-name">坝型</div>
                   <div class="feature-data">
-                    <span class="feature-value">均值混凝土</span>
+                    <span class="feature-value">黏土心墙坝</span>
                   </div>
                 </div>
               </div>
@@ -168,7 +156,18 @@
                 <div class="feature-info">
                   <div class="feature-name">坝顶总长度(m)</div>
                   <div class="feature-data">
-                    <span class="feature-value">5400</span>
+                    <span class="feature-value">485.39</span>
+                  </div>
+                </div>
+              </div>
+              <div class="feature-item">
+                <div class="feature-icon-small">
+                  <img src="/src/assets/images/水电站大坝工程.png" alt="icon" />
+                </div>
+                <div class="feature-info">
+                  <div class="feature-name">最大坝高(m)</div>
+                  <div class="feature-data">
+                    <span class="feature-value">71.07</span>
                   </div>
                 </div>
               </div>
@@ -179,7 +178,29 @@
                 <div class="feature-info">
                   <div class="feature-name">坝顶高程(m)</div>
                   <div class="feature-data">
-                    <span class="feature-value">487.37</span>
+                    <span class="feature-value">979.8</span>
+                  </div>
+                </div>
+              </div>
+              <div class="feature-item">
+                <div class="feature-icon-small">
+                  <img src="/src/assets/images/水电站大坝工程.png" alt="icon" />
+                </div>
+                <div class="feature-info">
+                  <div class="feature-name">坝顶宽度(m)</div>
+                  <div class="feature-data">
+                    <span class="feature-value">10.0</span>
+                  </div>
+                </div>
+              </div>
+              <div class="feature-item">
+                <div class="feature-icon-small">
+                  <img src="/src/assets/images/水电站大坝工程.png" alt="icon" />
+                </div>
+                <div class="feature-info">
+                  <div class="feature-name">防浪墙顶高程(m)</div>
+                  <div class="feature-data">
+                    <span class="feature-value">981.0</span>
                   </div>
                 </div>
               </div>
@@ -198,7 +219,50 @@
     
     <!-- 右侧数据 -->
     <div class="right-sidebar">
-      
+
+      <!-- 天气预报卡片 -->
+      <div class="data-card mt-20">
+        <div class="card-header">
+          <h3 class="card-title">天气预报</h3>
+        </div>
+        <div class="card-body">
+          <!-- 第一行：今日天气 -->
+          <div class="weather-today-row">
+            <div class="weather-icon-box">
+              <span class="weather-icon-big">{{ weatherData.icon }}</span>
+              <span class="weather-temp-big">{{ weatherData.temperature }}°C</span>
+            </div>
+            <div class="weather-desc-box">
+              <span class="weather-desc-text">{{ weatherData.description }}</span>
+              <span class="weather-update-time">更新于 {{ weatherData.updateTime }}</span>
+            </div>
+            <div class="weather-details-group">
+              <div class="weather-detail">
+                <span class="wd-label">湿度</span>
+                <span class="wd-value">{{ weatherData.humidity }}%</span>
+              </div>
+              <div class="weather-detail">
+                <span class="wd-label">风速</span>
+                <span class="wd-value">{{ weatherData.windSpeed }}m/s</span>
+              </div>
+              <div class="weather-detail">
+                <span class="wd-label">降雨</span>
+                <span class="wd-value">{{ weatherData.rainProbability }}%</span>
+              </div>
+            </div>
+          </div>
+          <div class="weather-divider"></div>
+          <!-- 第二行：预报 -->
+          <div class="weather-forecast-row">
+            <div v-for="(day, index) in weatherForecast" :key="index" class="forecast-day">
+              <span class="forecast-day-name">{{ day.day }}</span>
+              <span class="forecast-day-icon">{{ day.icon }}</span>
+              <span class="forecast-day-temp">{{ day.high }}°/{{ day.low }}°</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
       <!-- 最新调度卡片 -->
       <div class="data-card mt-20">
         <div class="card-header">
@@ -253,9 +317,20 @@
               </div>
             </div>
           </div>
+          <!-- 水量统计 -->
+          <div class="water-stats-row">
+            <div class="water-stat-card">
+              <div class="water-stat-label">当日供水（万m³）</div>
+              <div class="water-stat-value">502</div>
+            </div>
+            <div class="water-stat-card">
+              <div class="water-stat-label">当日排水（万m³）</div>
+              <div class="water-stat-value">0</div>
+            </div>
+          </div>
         </div>
       </div>
-      
+
       <!-- 水库监测卡片 -->
       <div class="data-card mt-20">
         <div class="card-header">
@@ -275,17 +350,6 @@
               <div class="monitor-chart-desc">库水位在监测时段内稳定维持在约 113.0m，无明显波动</div>
             </div>
           </div>
-          <!-- 水量统计卡片 -->
-          <div class="water-stats-row">
-            <div class="water-stat-card">
-              <div class="water-stat-label">当日供水（万m³）</div>
-              <div class="water-stat-value">502</div>
-            </div>
-            <div class="water-stat-card">
-              <div class="water-stat-label">当日排水（万m³）</div>
-              <div class="water-stat-value">0</div>
-            </div>
-          </div>
         </div>
       </div>
       
@@ -349,8 +413,8 @@
             <img src="/src/assets/images/乌拉海沟水库.png" alt="乌拉海沟水库" />
           </div>
           <div class="modal-text">
-            <p><span class="info-label">基本情况：</span>属于平原区水库（中型）</p>
-            <p><span class="info-label">工程等别：</span>Ⅰ等</p>
+            <p><span class="info-label">基本情况：</span>属小（1）型Ⅳ等工程，具有人畜饮水、工业供水、灌溉功能的综合性水利工程</p>
+            <p><span class="info-label">工程等别：</span>Ⅳ等</p>
             <p><span class="info-label">水利主管部门：</span>第四师水利局</p>
             <p><span class="info-label">管理部门：</span>第四师水利管理处</p>
             <p><span class="info-label">所在地：</span>第四师乌拉海沟 经度：87°25′00″ 纬度：44°09′00″</p>
@@ -362,7 +426,20 @@
             <p style="padding-left:12px;">主体工程开工：2004年04月01日</p>
             <p style="padding-left:12px;">下闸蓄水：2005年06月02日</p>
             <p style="padding-left:12px;">竣工验收：2005年09月02日</p>
-            <p><span class="info-label">主要功能：</span>防洪、灌溉、供水、生态、旅游、养殖</p>
+            <p><span class="info-label">主要功能：</span>人畜饮水、工业供水、灌溉</p>
+            <div class="info-section-title">工程特征：</div>
+            <p style="padding-left:12px;">正常蓄水位：977.50m，相应库容926.0万m³</p>
+            <p style="padding-left:12px;">死水位：947.0m，相应库容76.0万m³</p>
+            <p style="padding-left:12px;">设计洪水位：978.20m，相应库容960.0万m³</p>
+            <p style="padding-left:12px;">校核洪水位：978.56m，总库容978.0万m³</p>
+            <div class="info-section-title">大坝特征：</div>
+            <p style="padding-left:12px;">坝型：黏土心墙坝，坝长485.39m，最大坝高71.07m</p>
+            <p style="padding-left:12px;">坝顶高程979.8m，坝顶宽度10.0m</p>
+            <p style="padding-left:12px;">防浪墙顶高程981.0m</p>
+            <div class="info-section-title">建筑物：</div>
+            <p style="padding-left:12px;">放水洞：位于左岸，全长660m，隧洞断面2.0m×2.5m</p>
+            <p style="padding-left:12px;">溢洪道：无闸控制，侧堰进水，全长452.0m，最大下泄73.3m³/s</p>
+            <p style="padding-left:12px;">放水渠：长度821m，梯形断面，设计流量2.0m³/s</p>
           </div>
         </div>
       </div>
@@ -394,6 +471,21 @@ export default {
       flowChart: null,
       capacityChart: null,
       waterLevelTrendChart: null,
+      // 天气数据
+      weatherData: {
+        icon: '⛅',
+        temperature: 28,
+        description: '多云',
+        humidity: 65,
+        windSpeed: 3.2,
+        rainProbability: 30,
+        updateTime: '14:00'
+      },
+      weatherForecast: [
+        { day: '今天', icon: '⛅', high: 32, low: 22 },
+        { day: '明天', icon: '🌧️', high: 28, low: 20 },
+        { day: '后天', icon: '☀️', high: 35, low: 24 }
+      ],
     }
   },
   mounted() {
@@ -746,7 +838,7 @@ export default {
             axisPointer: { type: 'cross' }
           },
           legend: {
-            data: ['降雨量', '融雪水量', '库水位'],
+            data: ['降雨量', '上游取水', '库水位'],
             textStyle: { color: '#7bbef6' },
             bottom: '0%',
             itemWidth: 12,
@@ -792,13 +884,13 @@ export default {
           ],
           series: [
             {
-              name: '融雪水量',
+              name: '上游取水',
               type: 'bar',
               yAxisIndex: 0,
               barWidth: 6,
               data: [-0.3, -0.2, -0.2, -0.5, -1.2, -2.0, -1.8, -0.8],
               itemStyle: {
-                color: '#ffffff',
+                color: '#22c55e',
                 borderRadius: [0, 0, 2, 2]
               }
             },
@@ -883,7 +975,7 @@ export default {
 }
 
 .mt-20 {
-  margin-top: 10px;
+  margin-top: 6px;
 }
 
 /* 核心监测数据卡片样式 */
@@ -946,8 +1038,9 @@ export default {
 
 .card-body {
   font-size: var(--fs-body);
-  line-height: 1.6;
-  margin-top: -10px;
+  line-height: 1.3;
+  padding-left: 10px;
+  padding-right: 10px;
 }
 
 .forecast-card .card-body {
@@ -1313,8 +1406,8 @@ export default {
 /* 乌拉海水库简介样式 */
 .reservoir-image {
   width: 100%;
-  height: 130px;
-  margin-bottom: 4px;
+  height: 100px;
+  margin-bottom: 3px;
   border-radius: 4px;
   overflow: hidden;
   border: 1px solid rgba(0, 212, 255, 0.3);
@@ -1336,7 +1429,7 @@ export default {
   margin: 0;
   color: #e0fcff;
   font-size: 12px;
-  line-height: 1.8;
+  line-height: 1.4;
 }
 
 .info-label {
@@ -1383,7 +1476,7 @@ export default {
 .dam-feature-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 6px;
+  gap: 3px;
 }
 
 .dam-feature-grid .feature-name {
@@ -1499,14 +1592,14 @@ export default {
 .feature-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 6px;
+  gap: 3px;
 }
 
 .feature-item {
   display: flex;
   align-items: center;
-  gap: 6px;
-  padding: 4px 8px;
+  gap: 3px;
+  padding: 2px 5px;
   background-image: url('/src/assets/images/卡片背景.png');
   background-size: 100% 100%;
   background-position: center;
@@ -1514,9 +1607,9 @@ export default {
 }
 
 .feature-icon-small {
-  width: 28px;
-  height: 28px;
-  border-radius: 4px;
+  width: 22px;
+  height: 22px;
+  border-radius: 3px;
   overflow: hidden;
   flex-shrink: 0;
 }
@@ -1819,8 +1912,8 @@ export default {
   align-items: center;
   justify-content: center;
   gap: 8px;
-  height: 30px;
-  margin: 8px 0;
+  height: 24px;
+  margin: 4px 0;
   border: 1px solid rgba(0, 213, 255, 0.3);
   border-radius: 4px;
 }
@@ -1847,16 +1940,17 @@ export default {
   display: flex;
   align-items: center;
   gap: 4px;
-  padding: 3px 6px;
+  padding: 2px 10px;
   background-image: url('/src/assets/images/卡片背景2.png');
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;
+  height: 36px;
 }
 
 .dispatch-level-icon {
-  width: 40px;
-  height: 40px;
+  width: 30px;
+  height: 30px;
   flex-shrink: 0;
   display: flex;
   align-items: center;
@@ -1893,7 +1987,7 @@ export default {
 /* 水库监测卡片样式 */
 .water-stats-row {
   display: flex;
-  gap: 8px;
+  gap: 4px;
 }
 
 .water-stat-card {
@@ -1902,12 +1996,12 @@ export default {
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  padding: 4px 16px;
+  padding: 2px 12px;
   background-image: url('/src/assets/images/卡片背景2.png');
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;
-  height: 50px;
+  height: 36px;
 }
 
 .water-stat-label {
@@ -1928,8 +2022,8 @@ export default {
 }
 
 .reservoir-monitor-section {
-  margin-bottom: 12px;
-  padding-bottom: 12px;
+  margin-bottom: 6px;
+  padding-bottom: 6px;
   border-bottom: 1px solid rgba(0, 212, 255, 0.15);
 }
 
@@ -1943,8 +2037,8 @@ export default {
   display: flex;
   align-items: center;
   gap: 4px;
-  margin: 6px 0 8px;
-  padding: 4px 8px;
+  margin: 2px 0 4px;
+  padding: 2px 6px;
   background: rgba(0, 20, 40, 0.5);
   border-radius: 3px;
   border: 1px solid rgba(0, 212, 255, 0.15);
@@ -1966,8 +2060,8 @@ export default {
   background: rgba(0, 20, 40, 0.4);
   border-radius: 4px;
   border: 1px solid rgba(0, 212, 255, 0.15);
-  padding: 6px;
-  margin-bottom: 8px;
+  padding: 4px;
+  margin-bottom: 4px;
 }
 
 .monitor-chart-box:last-child {
@@ -1978,14 +2072,14 @@ export default {
   color: #7bbef6;
     font-size: var(--fs-label);  font-weight: var(--fw-label);
   font-weight: bold;
-  margin-bottom: 2px;
+  margin-bottom: 1px;
 }
 
 .monitor-chart-desc {
   color: #62f6fb;
   font-size: 11px;
   line-height: 1.5;
-  margin-top: 4px;
+  margin-top: 2px;
   text-align: center;
 }
 
@@ -2178,4 +2272,95 @@ export default {
   height: 100%;
   object-fit: cover;
 }
+
+/* ========== 天气预报 ========== */
+.weather-today-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 2px 0;
+}
+.weather-icon-box {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+  margin-left: 5px;
+}
+.weather-icon-big {
+  font-size: 26px;
+  line-height: 1;
+}
+.weather-temp-big {
+  font-size: 20px;
+  font-weight: bold;
+  color: #00d4ff;
+}
+.weather-desc-box {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  flex-shrink: 0;
+}
+.weather-desc-text {
+  font-size: 12px;
+  color: #e0fcff;
+}
+.weather-update-time {
+  font-size: 9px;
+  color: rgba(123, 190, 246, 0.6);
+}
+.weather-details-group {
+  display: flex;
+  gap: 3px;
+  flex: 1;
+  justify-content: flex-end;
+}
+.weather-detail {
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1px;
+  background: rgba(0, 20, 40, 0.5);
+  border: 1px solid rgba(0, 212, 255, 0.1);
+  border-radius: 3px;
+  padding: 2px 6px;
+}
+.wd-label {
+  font-size: 10px;
+  color: rgba(123, 190, 246, 0.7);
+}
+.wd-value {
+  font-size: 12px;
+  font-weight: bold;
+  color: #e0fcff;
+}
+.weather-divider {
+  height: 1px;
+  background: rgba(0, 212, 255, 0.12);
+  margin: 4px 0;
+}
+.weather-forecast-row {
+  display: flex;
+  justify-content: space-around;
+}
+.forecast-day {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 0 2px 0;
+}
+.forecast-day-name {
+  font-size: 10px;
+  color: rgba(123, 190, 246, 0.8);
+}
+.forecast-day-icon {
+  font-size: 14px;
+  line-height: 1;
+}
+.forecast-day-temp {
+  font-size: 10px;
+  color: #e0fcff;
+}
 </style>

src/views/mainPages/PipelineMonitorView.vue

@@ -0,0 +1,871 @@
+<!-- 管线安监大屏：数据仪表板风格 -->
+<template>
+  <div class="dashboard">
+    <div class="pipeline-scroll-area">
+      <div class="main-content">
+        <!-- ========== 左侧面板 ========== -->
+        <div class="left-sidebar">
+          <!-- 左1：引水口闸 -->
+          <div class="data-card">
+            <div class="panel-header">
+              <h3 class="card-title">引水口闸</h3>
+            </div>
+            <div class="panel-content">
+              <div class="gate-chamber-info">
+                <div class="chamber-stat">
+                  <span class="chamber-stat-label">闸室状态</span>
+                  <span class="chamber-stat-value" style="color:#22c55e;">运行中</span>
+                </div>
+                <div class="chamber-stat">
+                  <span class="chamber-stat-label">闸门类型</span>
+                  <span class="chamber-stat-value">螺杆闸</span>
+                </div>
+                <div class="chamber-stat">
+                  <span class="chamber-stat-label">闸门数量</span>
+                  <span class="chamber-stat-value">3 扇</span>
+                </div>
+              </div>
+              <div class="section-divider"></div>
+              <div class="section-title">螺杆闸运行状态</div>
+              <div v-for="(gate, idx) in screwGates" :key="idx" class="screw-gate-row">
+                <div class="screw-gate-header">
+                  <span class="screw-gate-name">{{ gate.name }}</span>
+                  <span :class="['state-badge', gate.status === '运行中' ? 'running' : 'standby']">{{ gate.status }}</span>
+                </div>
+                <div class="screw-gate-cards">
+                  <div class="screw-gate-card">
+                    <span class="screw-card-label">开度</span>
+                    <span class="screw-card-value">{{ gate.opening }}</span>
+                  </div>
+                  <div class="screw-gate-card">
+                    <span class="screw-card-label">目标</span>
+                    <span class="screw-card-value">{{ gate.target }}</span>
+                  </div>
+                  <div class="screw-gate-card">
+                    <span class="screw-card-label">负载</span>
+                    <span class="screw-card-value">{{ gate.load }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+        </div>
+
+        <!-- ========== 右侧面板：引水管廊流量监测 ========== -->
+        <div class="right-sidebar">
+          <!-- 右1：引水管廊流量监测 -->
+          <div class="data-card">
+            <div class="panel-header">
+              <h3 class="card-title">引水管廊流量监测</h3>
+            </div>
+            <div class="panel-content">
+              <!-- 核心流量指标 -->
+              <div class="flow-kpi-bar">
+                <div class="flow-kpi-item">
+                  <div class="flow-kpi-icon" style="border-color:rgba(0,212,255,0.3);">
+                    <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="#00d4ff" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
+                  </div>
+                  <div class="flow-kpi-body">
+                    <span class="flow-kpi-label">进水流量</span>
+                    <span class="flow-kpi-val">{{ flowPoints[0].value }} <small>m³/s</small></span>
+                  </div>
+                </div>
+                <div class="flow-kpi-divider"></div>
+                <div class="flow-kpi-item">
+                  <div class="flow-kpi-icon" style="border-color:rgba(34,197,94,0.3);">
+                    <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="#22c55e" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
+                  </div>
+                  <div class="flow-kpi-body">
+                    <span class="flow-kpi-label">出水流量</span>
+                    <span class="flow-kpi-val" style="color:#22c55e;">{{ flowPoints[1].value }} <small>m³/s</small></span>
+                  </div>
+                </div>
+                <div class="flow-kpi-divider"></div>
+                <div class="flow-kpi-item">
+                  <div class="flow-kpi-icon" style="border-color:rgba(251,191,36,0.3);">
+                    <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="#fbbf24" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
+                  </div>
+                  <div class="flow-kpi-body">
+                    <span class="flow-kpi-label">累计输水</span>
+                    <span class="flow-kpi-val" style="color:#fbbf24;">{{ totalInflow }} <small>万m³</small></span>
+                  </div>
+                </div>
+              </div>
+
+              <div class="section-divider"></div>
+
+              <!-- 监测点状态 -->
+              <div class="section-title">管线工况</div>
+              <div class="pipeline-status-grid">
+                <div class="pipeline-status-item">
+                  <div class="ps-left">
+                    <span class="ps-dot normal"></span>
+                    <span class="ps-name">1# 流量计</span>
+                  </div>
+                  <div class="ps-right">
+                    <span class="ps-val">8.5</span>
+                    <span class="ps-unit">m³/s</span>
+                    <span class="ps-badge normal">正常</span>
+                  </div>
+                </div>
+                <div class="pipeline-status-item">
+                  <div class="ps-left">
+                    <span class="ps-dot normal"></span>
+                    <span class="ps-name">2# 流量计</span>
+                  </div>
+                  <div class="ps-right">
+                    <span class="ps-val">4.3</span>
+                    <span class="ps-unit">m³/s</span>
+                    <span class="ps-badge normal">正常</span>
+                  </div>
+                </div>
+              </div>
+
+              <div class="section-divider"></div>
+              <div class="section-title">1# 流量计过程线</div>
+              <div id="inletFlowChart" style="width:100%;height:100px;overflow:visible;"></div>
+              <div class="section-title" style="margin-top:6px;">2# 流量计过程线</div>
+              <div id="outletFlowChart" style="width:100%;height:100px;overflow:visible;"></div>
+            </div>
+          </div>
+          <!-- 右2：压力监测 -->
+          <div class="data-card">
+            <div class="panel-header">
+              <h3 class="card-title">压力监测</h3>
+            </div>
+            <div class="panel-content">
+              <div class="monitor-summary">
+                <div class="summary-stat">
+                  <span class="summary-label">监测点数</span>
+                  <span class="summary-value">6</span>
+                </div>
+                <div class="summary-stat">
+                  <span class="summary-label">最高压力</span>
+                  <span class="summary-value" style="color:#fbbf24;">1.28 MPa</span>
+                </div>
+                <div class="summary-stat">
+                  <span class="summary-label">平均压力</span>
+                  <span class="summary-value" style="color:#00d4ff;">0.87 MPa</span>
+                </div>
+              </div>
+              <div class="section-divider"></div>
+              <div class="section-title">实时压力数据</div>
+              <div class="pressure-list">
+                <div v-for="(p, idx) in pressurePoints" :key="idx" class="pressure-item" :class="['p-' + p.status, { active: activePressureIdx === idx }]" @click="selectPressure(idx)">
+                  <div class="pressure-left">
+                    <span class="pressure-dot" :class="'p-' + p.status"></span>
+                    <span class="pressure-name">{{ p.name }}</span>
+                  </div>
+                  <div class="pressure-right">
+                    <span class="pressure-value">{{ p.value }}</span>
+                    <span class="pressure-unit">MPa</span>
+                    <span class="pressure-badge" :class="'p-' + p.status">{{ p.statusText }}</span>
+                  </div>
+                </div>
+              </div>
+              <div class="section-divider"></div>
+              <div class="section-title">压力趋势 — {{ pressurePoints[activePressureIdx].name }}</div>
+              <div id="pressureTrendChart" style="width:100%;height:130px;overflow:visible;"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+
+export default {
+  name: 'PipelineMonitorView',
+  data() {
+    return {
+      totalInflow: 126.5,
+      activePressureIdx: 0,
+      pressurePoints: [
+        { name: '主管线入口', value: '1.20', status: 'normal', statusText: '正常', trend: [1.18, 1.19, 1.20, 1.20, 1.21, 1.20, 1.19, 1.20, 1.21, 1.22, 1.20, 1.20] },
+        { name: 'A段管线', value: '1.05', status: 'normal', statusText: '正常', trend: [1.02, 1.03, 1.04, 1.06, 1.05, 1.05, 1.04, 1.06, 1.07, 1.05, 1.05, 1.05] },
+        { name: 'B段管线', value: '0.88', status: 'normal', statusText: '正常', trend: [0.85, 0.86, 0.87, 0.88, 0.88, 0.87, 0.88, 0.89, 0.88, 0.88, 0.87, 0.88] },
+        { name: 'C段管线', value: '0.95', status: 'normal', statusText: '正常', trend: [0.92, 0.93, 0.94, 0.95, 0.95, 0.94, 0.95, 0.96, 0.95, 0.95, 0.94, 0.95] },
+        { name: '分支A', value: '0.72', status: 'warn', statusText: '偏高', trend: [0.65, 0.66, 0.68, 0.70, 0.71, 0.72, 0.72, 0.73, 0.72, 0.72, 0.71, 0.72] },
+        { name: '分支B', value: '0.45', status: 'normal', statusText: '正常', trend: [0.43, 0.44, 0.44, 0.45, 0.45, 0.44, 0.45, 0.46, 0.45, 0.45, 0.44, 0.45] },
+      ],
+      screwGates: [
+        { name: '引水闸1#（螺杆闸）', status: '运行中', opening: '3.25 m', target: '3.5 m', load: '62%', lastOp: '开启', lastTime: '09:10' },
+        { name: '引水闸2#（螺杆闸）', status: '运行中', opening: '2.80 m', target: '3.0 m', load: '55%', lastOp: '调节', lastTime: '08:30' },
+        { name: '引水闸3#（螺杆闸）', status: '待机', opening: '0.00 m', target: '0.0 m', load: '0%', lastOp: '关闭', lastTime: '昨日 17:00' },
+      ],
+      flowPoints: [
+        { name: '进水流量', value: '8.5', percent: 85 },
+        { name: '出水流量', value: '4.3', percent: 43 },
+      ],
+      inletFlow: [8.2, 8.3, 8.4, 8.5, 8.6, 8.7, 8.6, 8.5, 8.4, 8.5, 8.4, 8.3, 8.5, 8.6, 8.7, 8.8, 8.7, 8.6, 8.5, 8.4, 8.5, 8.6, 8.5, 8.4],
+      outletFlow: [3.8, 3.9, 4.0, 4.1, 4.2, 4.3, 4.2, 4.1, 4.0, 4.1, 4.2, 4.3, 4.4, 4.3, 4.2, 4.1, 4.0, 4.1, 4.2, 4.3, 4.2, 4.1, 4.0, 3.9],
+      pressureChart: null,
+      inletChart: null,
+      outletChart: null,
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initPressureChart()
+      this.initInletChart()
+      this.initOutletChart()
+    })
+  },
+  watch: {
+    activePressureIdx() {
+      this.$nextTick(() => {
+        this.updatePressureChart()
+      })
+    }
+  },
+  beforeUnmount() {
+    if (this.pressureChart) this.pressureChart.dispose()
+    if (this.inletChart) this.inletChart.dispose()
+    if (this.outletChart) this.outletChart.dispose()
+  },
+  methods: {
+    selectPressure(idx) {
+      this.activePressureIdx = idx
+    },
+    initPressureChart() {
+      const el = document.getElementById('pressureTrendChart')
+      if (!el) return
+      this.pressureChart = echarts.init(el)
+      this.updatePressureChart()
+    },
+    updatePressureChart() {
+      if (!this.pressureChart) return
+      const trend = this.pressurePoints[this.activePressureIdx].trend
+      const timeLabels = ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00']
+      const min = Math.min(...trend)
+      const max = Math.max(...trend)
+      const padding = (max - min) * 0.15 || 0.05
+      this.pressureChart.setOption({
+         animation: false,
+         grid: { left: 42, right: 8, top: 8, bottom: 20 },
+         xAxis: {
+           type: 'category',
+           data: timeLabels,
+           boundaryGap: false,
+           axisLine: { lineStyle: { color: 'rgba(0,212,255,0.2)' } },
+           axisLabel: { color: 'rgba(123,190,246,0.5)', fontSize: 10, interval: 2 },
+           splitLine: { show: false }
+         },
+         yAxis: {
+           type: 'value',
+           min: parseFloat((min - padding).toFixed(2)),
+           max: parseFloat((max + padding).toFixed(2)),
+           splitNumber: 3,
+           axisLine: { show: false },
+           axisLabel: { color: 'rgba(123,190,246,0.5)', fontSize: 10 },
+           splitLine: { lineStyle: { color: 'rgba(0,212,255,0.08)' } }
+         },
+        series: [{
+          type: 'line',
+          data: trend,
+          smooth: true,
+          symbol: 'circle',
+          symbolSize: 4,
+          lineStyle: { color: '#00d4ff', width: 2 },
+          itemStyle: { color: '#00d4ff' },
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: 'rgba(0,212,255,0.3)' },
+              { offset: 1, color: 'rgba(0,212,255,0.02)' }
+            ])
+          }
+        }],
+        tooltip: {
+          trigger: 'axis',
+          confine: false,
+          appendToBody: true,
+          backgroundColor: 'rgba(0,20,40,0.9)',
+          borderColor: '#00d4ff',
+          borderWidth: 1,
+          textStyle: { color: '#ffffff', fontSize: 12 },
+          padding: [8, 12],
+          extraCssText: 'z-index:99999;pointer-events:auto;box-shadow:0 4px 16px rgba(0,0,0,0.6);border-radius:4px;',
+          position: function(point) {
+            return [point[0] + 10, point[1] - 40]
+          },
+          formatter: function(params) {
+            const p = params[0]
+            return '<div style="font-weight:bold;margin-bottom:2px;color:#00d4ff;">' + p.axisValue + '</div><div style="color:#ffffff;">' + p.marker + ' <span style="font-weight:bold;">' + p.value + '</span> MPa</div>'
+          }
+        },
+        axisPointer: {
+          type: 'cross',
+          label: {
+            backgroundColor: 'rgba(0,212,255,0.2)',
+            color: '#ffffff',
+            fontSize: 10,
+            padding: [2, 6],
+            borderRadius: 2
+          },
+          crossStyle: { color: 'rgba(0,212,255,0.3)' },
+          lineStyle: { color: 'rgba(0,212,255,0.3)', type: 'dashed', width: 1 }
+        }
+      })
+    },
+    initInletChart() {
+      const el = document.getElementById('inletFlowChart')
+      if (!el) return
+      this.inletChart = echarts.init(el)
+      const timeLabels = ['08', '09', '10', '11', '12', '13', '14', '15', '16']
+      const data = [8.2, 8.4, 8.5, 8.7, 8.8, 8.7, 8.6, 8.5, 8.4]
+      this.inletChart.setOption({
+        animation: false,
+        grid: { left: 40, right: 8, top: 8, bottom: 18 },
+        xAxis: {
+          type: 'category',
+          data: timeLabels,
+          boundaryGap: false,
+          axisLine: { lineStyle: { color: 'rgba(0,212,255,0.2)' } },
+          axisLabel: { color: 'rgba(123,190,246,0.5)', fontSize: 9 },
+          splitLine: { show: true, lineStyle: { color: 'rgba(0,212,255,0.12)', type: 'dashed' } }
+        },
+        yAxis: {
+          type: 'value',
+          min: 7.0, max: 10.0,
+          splitNumber: 3,
+          axisLine: { show: false },
+          axisLabel: { color: 'rgba(123,190,246,0.5)', fontSize: 9 },
+          splitLine: { show: true, lineStyle: { color: 'rgba(0,212,255,0.15)', type: 'dashed' } }
+        },
+        series: [{
+          type: 'line',
+          data: data,
+          smooth: true,
+          symbol: 'circle',
+          symbolSize: 3,
+          lineStyle: { color: '#00d4ff', width: 1.5 },
+          itemStyle: { color: '#00d4ff' },
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: 'rgba(0,212,255,0.25)' },
+              { offset: 1, color: 'rgba(0,212,255,0.01)' }
+            ])
+          }
+        }],
+        tooltip: {
+          trigger: 'axis',
+          confine: false,
+          appendToBody: true,
+          backgroundColor: 'rgba(0,20,40,0.9)',
+          borderColor: '#00d4ff',
+          borderWidth: 1,
+          textStyle: { color: '#ffffff', fontSize: 12 },
+          padding: [8, 12],
+          extraCssText: 'z-index:99999;pointer-events:auto;box-shadow:0 4px 16px rgba(0,0,0,0.6);border-radius:4px;',
+          position: function(point) {
+            return [point[0] + 10, point[1] - 40]
+          },
+          formatter: function(params) {
+            const p = params[0]
+            return '<div style="font-weight:bold;margin-bottom:2px;color:#00d4ff;">' + p.axisValue + ':00</div><div style="color:#ffffff;">' + p.marker + ' <span style="font-weight:bold;">' + p.value + '</span> m³/s</div>'
+          }
+        },
+        axisPointer: {
+          type: 'cross',
+          label: {
+            backgroundColor: 'rgba(0,212,255,0.2)',
+            color: '#ffffff',
+            fontSize: 10,
+            padding: [2, 6],
+            borderRadius: 2
+          },
+          crossStyle: { color: 'rgba(0,212,255,0.3)' },
+          lineStyle: { color: 'rgba(0,212,255,0.3)', type: 'dashed', width: 1 }
+        }
+      })
+    },
+    initOutletChart() {
+      const el = document.getElementById('outletFlowChart')
+      if (!el) return
+      this.outletChart = echarts.init(el)
+      const timeLabels = ['08', '09', '10', '11', '12', '13', '14', '15', '16']
+      const data = [4.0, 4.1, 4.3, 4.4, 4.3, 4.2, 4.1, 4.0, 3.9]
+      this.outletChart.setOption({
+        animation: false,
+        grid: { left: 40, right: 8, top: 8, bottom: 18 },
+        xAxis: {
+          type: 'category',
+          data: timeLabels,
+          boundaryGap: false,
+          axisLine: { lineStyle: { color: 'rgba(0,212,255,0.2)' } },
+          axisLabel: { color: 'rgba(123,190,246,0.5)', fontSize: 9 },
+          splitLine: { show: true, lineStyle: { color: 'rgba(0,212,255,0.12)', type: 'dashed' } }
+        },
+        yAxis: {
+          type: 'value',
+          min: 2.5, max: 5.5,
+          splitNumber: 3,
+          axisLine: { show: false },
+          axisLabel: { color: 'rgba(123,190,246,0.5)', fontSize: 9 },
+          splitLine: { show: true, lineStyle: { color: 'rgba(0,212,255,0.15)', type: 'dashed' } }
+        },
+        series: [{
+          type: 'line',
+          data: data,
+          smooth: true,
+          symbol: 'circle',
+          symbolSize: 3,
+          lineStyle: { color: '#22c55e', width: 1.5 },
+          itemStyle: { color: '#22c55e' },
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: 'rgba(34,197,94,0.2)' },
+              { offset: 1, color: 'rgba(34,197,94,0.01)' }
+            ])
+          }
+        }],
+        tooltip: {
+          trigger: 'axis',
+          confine: false,
+          appendToBody: true,
+          backgroundColor: 'rgba(0,20,40,0.9)',
+          borderColor: '#22c55e',
+          borderWidth: 1,
+          textStyle: { color: '#ffffff', fontSize: 12 },
+          padding: [8, 12],
+          extraCssText: 'z-index:99999;pointer-events:auto;box-shadow:0 4px 16px rgba(0,0,0,0.6);border-radius:4px;',
+          position: function(point) {
+            return [point[0] + 10, point[1] - 40]
+          },
+          formatter: function(params) {
+            const p = params[0]
+            return '<div style="font-weight:bold;margin-bottom:2px;color:#22c55e;">' + p.axisValue + ':00</div><div style="color:#ffffff;">' + p.marker + ' <span style="font-weight:bold;">' + p.value + '</span> m³/s</div>'
+          }
+        },
+        axisPointer: {
+          type: 'cross',
+          label: {
+            backgroundColor: 'rgba(34,197,94,0.2)',
+            color: '#ffffff',
+            fontSize: 10,
+            padding: [2, 6],
+            borderRadius: 2
+          },
+          crossStyle: { color: 'rgba(34,197,94,0.3)' },
+          lineStyle: { color: 'rgba(34,197,94,0.3)', type: 'dashed', width: 1 }
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.dashboard {
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+  position: relative;
+}
+
+.pipeline-scroll-area {
+  position: absolute;
+  left: 0; right: 0; top: 0; bottom: 0;
+  overflow: visible;
+  z-index: 5;
+  display: flex;
+  flex-direction: column;
+  pointer-events: none;
+}
+.pipeline-scroll-area::-webkit-scrollbar { width: 4px; }
+.pipeline-scroll-area::-webkit-scrollbar-track { background: rgba(0,20,40,0.5); }
+.pipeline-scroll-area::-webkit-scrollbar-thumb { background: rgba(0,212,255,0.3); border-radius: 2px; }
+
+.main-content {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  height: 100%;
+  padding: 130px 20px 20px;
+  gap: 20px;
+  overflow: visible;
+  z-index: 3;
+  pointer-events: none;
+}
+
+/* ========== 两侧面板 ========== */
+.left-sidebar,
+.right-sidebar {
+  width: 350px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  flex-shrink: 0;
+  pointer-events: auto;
+}
+
+.right-sidebar {
+  margin-top: -40px;
+}
+
+/* ========== 数据卡片（增强） ========== */
+.data-card {
+  width: 100%;
+  background: rgba(0, 20, 40, 0.7);
+  border-radius: 6px;
+  overflow: visible;
+  box-shadow: 0 0 15px rgba(0, 212, 255, 0.15), inset 0 0 30px rgba(0, 212, 255, 0.02);
+  display: flex;
+  flex-direction: column;
+  border: 1px solid rgba(0, 212, 255, 0.1);
+  pointer-events: auto;
+}
+
+.panel-header {
+  height: 40px;
+  background-image: url('/src/assets/images/数据小标题.png');
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 12px;
+  flex-shrink: 0;
+}
+
+.card-title {
+  font-size: 13px;
+  font-weight: bold;
+  color: #ffffff;
+  margin: 0;
+  text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
+  padding-left: 25px;
+  padding-right: 25px;
+}
+
+.panel-content {
+  padding: 8px;
+  font-size: 12px;
+  line-height: 1.4;
+  overflow: visible;
+  flex: 1;
+}
+
+/* ========== 监控摘要 ========== */
+.monitor-summary {
+  display: flex;
+  gap: 6px;
+  margin-bottom: 4px;
+}
+.summary-stat {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  background: rgba(0, 20, 40, 0.5);
+  border: 1px solid rgba(0, 212, 255, 0.1);
+  border-radius: 3px;
+  padding: 4px 2px;
+}
+.summary-label {
+  font-size: 10px;
+  color: rgba(123, 190, 246, 0.7);
+}
+.summary-value {
+  font-size: 14px;
+  font-weight: bold;
+  color: #e0fcff;
+}
+
+/* ========== 压力列表 ========== */
+.section-divider {
+  height: 1px;
+  background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.25), transparent);
+  margin: 5px 0;
+}
+
+.section-title {
+  font-size: 12px;
+  font-weight: bold;
+  color: #ffffff;
+  margin-bottom: 5px;
+  padding-left: 6px;
+  border-left: 2px solid #00d4ff;
+}
+
+.pressure-list {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.pressure-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 5px 10px;
+  background: rgba(0, 20, 40, 0.4);
+  border: 1px solid rgba(0, 212, 255, 0.08);
+  border-radius: 5px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+.pressure-item:hover {
+  border-color: rgba(0, 212, 255, 0.25);
+  background: rgba(0, 30, 60, 0.5);
+}
+.pressure-item.p-warn {
+  border-color: rgba(251, 191, 36, 0.3);
+  background: rgba(251, 191, 36, 0.06);
+}
+.pressure-item.active {
+  border-color: rgba(0, 212, 255, 0.5);
+  background: rgba(0, 212, 255, 0.12);
+  box-shadow: 0 0 8px rgba(0, 212, 255, 0.15);
+}
+.pressure-left {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.pressure-dot {
+  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
+  box-shadow: 0 0 4px currentColor;
+}
+.pressure-dot.normal { background: #22c55e; }
+.pressure-dot.p-warn { background: #fbbf24; }
+.pressure-name {
+  font-size: 11px;
+  color: rgba(123, 190, 246, 0.8);
+}
+.pressure-right {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.pressure-value {
+  font-size: 14px;
+  font-weight: bold;
+  color: #e0fcff;
+}
+.pressure-unit {
+  font-size: 10px;
+  color: rgba(123, 190, 246, 0.5);
+}
+.pressure-badge {
+  font-size: 9px;
+  padding: 1px 5px;
+  border-radius: 2px;
+}
+.pressure-badge.p-normal { color: #22c55e; background: rgba(34, 197, 94, 0.15); }
+.pressure-badge.p-warn { color: #fbbf24; background: rgba(251, 191, 36, 0.15); }
+
+/* ========== 引水管廊流量监测 ========== */
+ /* 核心流量指标栏 */
+.flow-kpi-bar {
+  display: flex;
+  align-items: stretch;
+  background: rgba(0, 20, 40, 0.4);
+  border: 1px solid rgba(0, 212, 255, 0.1);
+  border-radius: 6px;
+  overflow: visible;
+}
+.flow-kpi-item {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 5px 5px;
+}
+.flow-kpi-icon {
+  width: 22px;
+  height: 22px;
+  border-radius: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid;
+  flex-shrink: 0;
+  background: rgba(0, 20, 40, 0.3);
+}
+.flow-kpi-body {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+}
+.flow-kpi-label {
+  font-size: 9px;
+  color: rgba(123, 190, 246, 0.5);
+  white-space: nowrap;
+}
+.flow-kpi-val {
+  font-size: 16px;
+  font-weight: bold;
+  color: #e0fcff;
+  line-height: 1.1;
+}
+.flow-kpi-val small {
+  font-size: 9px;
+  font-weight: normal;
+  color: rgba(123, 190, 246, 0.4);
+}
+.flow-kpi-divider {
+  width: 1px;
+  background: rgba(0, 212, 255, 0.12);
+  flex-shrink: 0;
+}
+
+/* 管线工况列表 */
+.pipeline-status-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.pipeline-status-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 5px 10px;
+  background: rgba(0, 20, 40, 0.3);
+  border: 1px solid rgba(0, 212, 255, 0.06);
+  border-radius: 5px;
+  transition: all 0.2s ease;
+}
+.pipeline-status-item:hover {
+  border-color: rgba(0, 212, 255, 0.15);
+  background: rgba(0, 30, 60, 0.4);
+}
+.ps-left {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+}
+.ps-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.ps-dot.normal { background: #22c55e; box-shadow: 0 0 4px #22c55e; }
+.ps-dot.warn { background: #fbbf24; box-shadow: 0 0 4px #fbbf24; }
+.ps-dot.critical { background: #ef4444; box-shadow: 0 0 4px #ef4444; }
+.ps-name {
+  font-size: 11px;
+  color: rgba(123, 190, 246, 0.8);
+}
+.ps-right {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.ps-val {
+  font-size: 13px;
+  font-weight: bold;
+  color: #e0fcff;
+}
+.ps-unit {
+  font-size: 9px;
+  color: rgba(123, 190, 246, 0.4);
+  width: 26px;
+}
+.ps-badge {
+  font-size: 9px;
+  padding: 1px 6px;
+  border-radius: 3px;
+  font-weight: bold;
+}
+.ps-badge.normal { color: #22c55e; background: rgba(34, 197, 94, 0.12); }
+.ps-badge.warn { color: #fbbf24; background: rgba(251, 191, 36, 0.12); }
+
+/* 流量趋势（过程线） */
+.flow-trend-chart { width: 100%; }
+
+/* ========== 流量趋势 ========== */
+
+/* ========== 引水口闸 ========== */
+.gate-chamber-info {
+  display: flex;
+  gap: 6px;
+  margin-bottom: 4px;
+}
+.chamber-stat {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  background: rgba(0, 20, 40, 0.5);
+  border: 1px solid rgba(0, 212, 255, 0.1);
+  border-radius: 3px;
+  padding: 3px 2px;
+}
+.chamber-stat-label {
+  font-size: 12px;
+  color: rgba(123, 190, 246, 0.7);
+}
+.chamber-stat-value {
+  font-size: 14px;
+  font-weight: bold;
+  color: #e0fcff;
+}
+.screw-gate-row {
+  background: rgba(0, 20, 40, 0.4);
+  border: 1px solid rgba(0, 212, 255, 0.08);
+  border-radius: 5px;
+  padding: 6px 10px;
+  margin-bottom: 6px;
+  transition: all 0.2s ease;
+}
+.screw-gate-row:hover {
+  border-color: rgba(0, 212, 255, 0.2);
+  background: rgba(0, 30, 60, 0.5);
+}
+.screw-gate-row:last-child {
+  margin-bottom: 0;
+}
+.screw-gate-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 6px;
+}
+.screw-gate-name {
+  font-size: 12px;
+  font-weight: bold;
+  color: #e0fcff;
+}
+.state-badge {
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 11px;
+  font-weight: bold;
+}
+.state-badge.running { background: rgba(255, 170, 0, 0.15); color: #ffaa00; border: 1px solid rgba(255, 170, 0, 0.3); }
+.state-badge.standby { background: rgba(0, 255, 136, 0.15); color: #00ff88; border: 1px solid rgba(0, 255, 136, 0.3); }
+.screw-gate-cards {
+  display: flex;
+  gap: 5px;
+}
+.screw-gate-card {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  background: rgba(0, 40, 80, 0.25);
+  border: 1px solid rgba(0, 212, 255, 0.1);
+  border-radius: 5px;
+  padding: 6px 2px;
+}
+.screw-card-label {
+  font-size: 11px;
+  color: rgba(123, 190, 246, 0.6);
+}
+.screw-card-value {
+  font-size: 14px;
+  font-weight: bold;
+  color: #e0fcff;
+}
+</style>

src/views/mainPages/WorkspaceView.vue

@@ -55,6 +55,58 @@
         <!-- 闸门控制页面 -->
         <GateControlAdminView v-if="activeMenu === '闸门控制'" />
 
+        <!-- 视频监控 -->
+        <div v-if="activeMenu === '视频监控'" class="video-monitor-page">
+          <div class="video-section-top">
+            <div class="glass-card video-gallery-card">
+              <div class="card-header">
+                <span class="card-title">视频画面</span>
+                <div class="card-actions">
+                  <el-radio-group v-model="currentSplit" size="small">
+                    <el-radio-button :value="1">单屏</el-radio-button>
+                    <el-radio-button :value="4">四分屏</el-radio-button>
+                    <el-radio-button :value="9">九分屏</el-radio-button>
+                  </el-radio-group>
+                </div>
+              </div>
+              <div class="card-body">
+                <div class="video-grid-ws" :class="'grid-' + currentSplit">
+                  <div v-for="(cell, idx) in gridCells" :key="idx" class="video-cell-ws">
+                    <div class="video-placeholder-ws">
+                      <div class="video-cell-header">
+                        <span class="video-cell-name">{{ cell.name }}</span>
+                        <span class="video-cell-time">{{ currentTime }}</span>
+                      </div>
+                      <div class="video-cell-preview">
+                        <el-icon :size="32" color="#409eff"><VideoCamera /></el-icon>
+                      </div>
+                      <div class="video-cell-footer">
+                        <el-tag size="small" type="success" effect="dark" round>● 录制中</el-tag>
+                        <span class="quality-badge">1080P</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="glass-card camera-list-card-ws">
+              <div class="card-header">
+                <span class="card-title">摄像头列表</span>
+              </div>
+              <div class="card-body">
+                <div class="camera-list-ws">
+                  <div v-for="(point, index) in cameraPoints" :key="index" class="camera-item-ws" :class="{ active: activeCameraIndex === index }" @click="selectCamera(index)">
+                    <el-icon :size="14" :color="point.online ? '#22c55e' : '#ef4444'"><VideoCamera /></el-icon>
+                    <span class="camera-name-ws">{{ point.name }}</span>
+                    <el-tag :type="point.online ? 'success' : 'danger'" size="small" effect="plain">{{ point.online ? '在线' : '离线' }}</el-tag>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
         <!-- 巡检计划页面 -->
         <PatrolPlanView v-if="activeMenu === 'patrol-plan'" />
 
@@ -332,7 +384,7 @@
 </template>
 
 <script>
-import { Search, Warning } from '@element-plus/icons-vue'
+import { Search, Warning, VideoCamera } from '@element-plus/icons-vue'
 import DeviceMaintainView from '../admin/DeviceMaintainView.vue'
 import PatrolPlanView from '../admin/PatrolPlanView.vue'
 import PatrolRecordView from '../admin/PatrolRecordView.vue'
@@ -351,7 +403,7 @@ import SysLogView from '../admin/SysLogView.vue'
 
 export default {
   name: 'WorkspaceView',
-  components: { Search, Warning, DeviceMaintainView, PatrolPlanView, PatrolRecordView, PatrolHiddenView, WaterRainView, HydroHistoryView, WaterResourceAllocationView, GateControlAdminView, BenefitSummaryView, ArchiveFilesView, ArchiveOrdersView, ArchiveLifecycleView, SysRoleView, SysUserView, SysLogView },
+  components: { Search, Warning, VideoCamera, DeviceMaintainView, PatrolPlanView, PatrolRecordView, PatrolHiddenView, WaterRainView, HydroHistoryView, WaterResourceAllocationView, GateControlAdminView, BenefitSummaryView, ArchiveFilesView, ArchiveOrdersView, ArchiveLifecycleView, SysRoleView, SysUserView, SysLogView },
   data() {
     return {
       currentDate: '',
@@ -368,6 +420,7 @@ export default {
         { name: '日常巡检', children: [{ id: 'patrol-plan', name: '巡检计划' }, { id: 'patrol-record', name: '巡检记录' }, { id: 'patrol-hidden', name: '隐患台账' }] },
         { name: '设备运维', children: [] },
         { name: '闸门控制', children: [] },
+        { name: '视频监控', children: [] },
         { name: '水雨情监测', children: [{ id: 'hydro-realtime', name: '实时监测' }, { id: 'hydro-history', name: '历史数据' }] },
         { name: '水资源调度', children: [{ id: 'water-supply', name: '供水水量' }, { id: 'water-eco', name: '生态补水' }] },
         { name: '工程效益', children: [] },
@@ -381,9 +434,9 @@ export default {
       },
       // 实时水情数据
       waterDataCards: [
-        { title: '库水位', value: '18.52', unit: 'm', icon: '🌊', iconBg: 'linear-gradient(135deg, #dbeafe, #93c5fd)', updateTime: '14:30 更新' },
-        { title: '汛限水位', value: '22.00', unit: 'm', icon: '📏', iconBg: 'linear-gradient(135deg, #fef3c7, #fcd34d)', updateTime: '设计值' },
-        { title: '库容', value: '2350.8', unit: '万m³', icon: '💧', iconBg: 'linear-gradient(135deg, #cffafe, #67e8f9)', updateTime: '14:30 更新' },
+        { title: '库水位', value: '977.50', unit: 'm', icon: '🌊', iconBg: 'linear-gradient(135deg, #dbeafe, #93c5fd)', updateTime: '14:30 更新' },
+        { title: '汛限水位', value: '978.20', unit: 'm', icon: '📏', iconBg: 'linear-gradient(135deg, #fef3c7, #fcd34d)', updateTime: '设计值' },
+        { title: '库容', value: '926.0', unit: '万m³', icon: '💧', iconBg: 'linear-gradient(135deg, #cffafe, #67e8f9)', updateTime: '14:30 更新' },
         { title: '入库流量', value: '8.5', unit: 'm³/s', icon: '📥', iconBg: 'linear-gradient(135deg, #dcfce7, #86efac)', updateTime: '14:30 更新' },
         { title: '出库流量', value: '12.8', unit: 'm³/s', icon: '📤', iconBg: 'linear-gradient(135deg, #fce7f3, #f9a8d4)', updateTime: '14:30 更新' },
         { title: '实时雨量', value: '2.5', unit: 'mm', icon: '🌧️', iconBg: 'linear-gradient(135deg, #e0e7ff, #a5b4fc)', updateTime: '14:30 更新' }
@@ -455,12 +508,23 @@ export default {
         { name: '工业水量', value: '8.7', unit: '万m³', trend: 3.8 },
         { name: '生态补水量', value: '15.2', unit: '万m³', trend: 12.5 },
         { name: '防汛处置次数', value: '3', unit: '次', trend: -25.0 }
-      ]
+      ],
+      // 视频监控数据
+      cameraPoints: [
+        { name: '大坝上游', online: true },
+        { name: '大坝下游', online: true },
+        { name: '溢洪道', online: true },
+        { name: '工作闸门', online: false },
+        { name: '进水口', online: true },
+        { name: '出水口', online: false }
+      ],
+      activeCameraIndex: 0,
+      currentSplit: 1
     }
   },
   computed: {
     isHomePage() {
-      const subPages = ['设备运维', '闸门控制', '工程效益', 'patrol-plan', 'patrol-record', 'patrol-hidden', 'hydro-realtime', 'hydro-history', 'archive-files', 'archive-orders', 'archive-lifecycle', 'sys-role', 'sys-user', 'sys-log']
+      const subPages = ['设备运维', '闸门控制', '视频监控', '工程效益', 'patrol-plan', 'patrol-record', 'patrol-hidden', 'hydro-realtime', 'hydro-history', 'archive-files', 'archive-orders', 'archive-lifecycle', 'sys-role', 'sys-user', 'sys-log']
       const waterPages = ['water-supply', 'water-eco']
       return ![...subPages, ...waterPages].includes(this.activeMenu)
     },
@@ -469,6 +533,17 @@ export default {
     },
     isBenefitActive() {
       return this.activeMenu === '工程效益'
+    },
+    gridCells() {
+      const count = this.currentSplit
+      const cells = []
+      for (let i = 0; i < count; i++) {
+        const idx = this.activeCameraIndex
+        const baseName = this.cameraPoints[idx]?.name || '摄像头'
+        const label = count === 1 ? baseName : `${baseName} (${i + 1})`
+        cells.push({ name: label })
+      }
+      return cells
     }
   },
   mounted() {
@@ -501,6 +576,9 @@ export default {
     },
     handleQuickAccess(name) {
       console.log('快捷功能:', name)
+    },
+    selectCamera(index) {
+      this.activeCameraIndex = index
     }
   }
 }
@@ -1195,4 +1273,120 @@ export default {
 ::-webkit-scrollbar-track { background: transparent; }
 ::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.3); border-radius: 3px; }
 ::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, 0.5); }
+
+/* ==================== 工作台视频监控 ==================== */
+.video-monitor-page {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.video-section-top {
+  display: flex;
+  gap: 16px;
+  flex: 1;
+  min-height: 0;
+}
+.video-gallery-card {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+.video-gallery-card .card-body {
+  flex: 1;
+  padding: 12px;
+  overflow: auto;
+}
+.video-grid-ws {
+  display: grid;
+  gap: 8px;
+  height: 100%;
+}
+.video-grid-ws.grid-1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
+.video-grid-ws.grid-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
+.video-grid-ws.grid-9 { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; }
+.video-cell-ws {
+  background: #0f1923;
+  border-radius: 8px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid rgba(148, 163, 184, 0.15);
+}
+.video-placeholder-ws {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  position: relative;
+}
+.video-cell-header {
+  display: flex;
+  justify-content: space-between;
+  padding: 6px 10px;
+  background: rgba(0,0,0,0.3);
+}
+.video-cell-name {
+  font-size: 12px;
+  color: #e2e8f0;
+  font-weight: 600;
+}
+.video-cell-time {
+  font-size: 11px;
+  color: rgba(148, 163, 184, 0.7);
+}
+.video-cell-preview {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.video-cell-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 4px 10px;
+  background: rgba(0,0,0,0.2);
+}
+.quality-badge {
+  font-size: 10px;
+  color: rgba(148, 163, 184, 0.6);
+}
+.camera-list-card-ws {
+  width: 260px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+}
+.camera-list-card-ws .card-body {
+  flex: 1;
+  padding: 8px;
+  overflow: auto;
+}
+.camera-list-ws {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.camera-item-ws {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 10px;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s;
+  background: rgba(0,0,0,0.02);
+  border: 1px solid transparent;
+}
+.camera-item-ws:hover {
+  background: rgba(59, 130, 246, 0.06);
+}
+.camera-item-ws.active {
+  background: rgba(59, 130, 246, 0.1);
+  border-color: rgba(59, 130, 246, 0.3);
+}
+.camera-name-ws {
+  flex: 1;
+  font-size: 13px;
+  color: #334155;
+}
 </style>

大坝安全监测设备筛查报告.md

@@ -0,0 +1,198 @@
+# 61团乌拉海沟水库工程 — 大坝安全监测设备筛查报告
+
+> 本文档基于《61团乌拉海沟水库工程清单》第1.4节（大坝安全监测）内容筛选整理。
+
+---
+
+## 一、核心监测设备汇总（按类型）
+
+### 渗流/渗压监测
+*监测坝体坝基渗流压力变化*
+
+| 编码 | 设备名称 | 规格/描述 | 单位 | 数量 |
+|------|----------|----------|:----:|:----:|
+| 1.4.1.1 | 渗压计 | 测量范围：0MPa～0.75MPa可选 | 支 | 14 |
+| 1.4.1.2 | 测压管 | φ50镀锌钢管含加工（加工工艺详见施工图） | m | 700 |
+| 1.4.1.3 | 测压管钻孔 | 测压管钻孔 | m | 700 |
+
+**小计：1414**
+
+### GNSS位移监测
+*北斗GNSS卫星定位监测坝体水平和垂直位移*
+
+| 编码 | 设备名称 | 规格/描述 | 单位 | 数量 |
+|------|----------|----------|:----:|:----:|
+| 1.4.2.1 | GNSS位移监测基准站 | 可以监测垂直位移和水平位移，及经纬度定位。具有北斗定位功能和4G全网通通讯功能，具有以太网或485通讯接口； | 套 | 3 |
+| 1.4.2.6 | GNSS位移监测站 | 可以监测垂直位移和水平位移，及经纬度定位。具有北斗定位功能和4G全网通通讯功能，具有以太网或485通讯接口； | 套 | 12 |
+
+**小计：15**
+
+### 人工位移/变形观测
+*人工水准测量观测坝体位移变形*
+
+| 编码 | 设备名称 | 规格/描述 | 单位 | 数量 |
+|------|----------|----------|:----:|:----:|
+| 1.4.2.15 | 大坝综合位移标点（人工观测） | 大坝综合位移标点（人工观测） | 个 | 29 |
+| 1.4.2.16 | 校核基准点 | 校核基准点 | 个 | 4 |
+| 1.4.2.17 | 工作基准点 | 工作基准点 | 个 | 4 |
+| 1.4.2.18 | 高程引测 | 高程引测 | 套 | 1 |
+
+**小计：38**
+
+### 放水洞变形监测
+*振弦式位移计、测缝计监测放水洞变形*
+
+| 编码 | 设备名称 | 规格/描述 | 单位 | 数量 |
+|------|----------|----------|:----:|:----:|
+| 1.4.4.1 | 多点位移计 | 仪器类型：振弦式或电位器式； | 套 | 18 |
+| 1.4.4.2 | 测缝计 | 类型：差动电阻式；三向测缝计 | 套 | 4 |
+
+**小计：22**
+
+### 水位/流量监测
+*监测溢洪道水位和流速*
+
+| 编码 | 设备名称 | 规格/描述 | 单位 | 数量 |
+|------|----------|----------|:----:|:----:|
+| 1.4.3.1 | 水尺 | 采用不锈钢反光水尺，宽20公分 | 套 | 2 |
+| 1.4.3.2 | 流速仪 | 流速范围：0.03～20m/s，流速测量精度：±0.01m/s，±1%FS，测量方向：自动识别水流方向，内置垂直角度校正 | 套 | 2 |
+
+**小计：4**
+
+### 自动化数据采集设备
+*MCU自动化采集传感器数据*
+
+| 编码 | 设备名称 | 规格/描述 | 单位 | 数量 |
+|------|----------|----------|:----:|:----:|
+| 1.4.1.7 | 自动化采集设备MCU | 接入传感器类型：MCU传感器/各类RS485输出的传感器 | 台 | 1 |
+| 1.4.1.12 | 数据采集箱 | 550*400*300，柜内含空开、集线槽、防雷模块等 | 台 | 1 |
+
+**小计：2**
+
+### 人工观测仪器
+*人工观测仪器设备*
+
+| 编码 | 设备名称 | 规格/描述 | 单位 | 数量 |
+|------|----------|----------|:----:|:----:|
+| 1.4.2.19 | 水准仪 | 每公里往返测高差中数的标准误差：±3.0mm，望远镜：成像正像；放大倍率：30倍；补偿器：工作范围：±5；底盘全圆刻度值：360度，最小分度间隙1度。圆水准器角 | 台 | 1 |
+| 1.4.2.20 | 经纬仪 | 望远镜，镜筒长度：155mm；物镜孔径：45mm；放大倍率：30倍；视距：≥1.3m，乘常数：100；电子测角，测量方式:绝对编码，底盘直径：71；精度：2″， | 台 | 1 |
+| 1.4.2.21 | 全站仪 | 距离测量： | 台 | 1 |
+
+**小计：3**
+
+---
+
+## 二、辅助配套设施
+
+> 包括监测立杆、监测柜、电源、防雷、通讯、电缆、土建等配套。
+
+| 编码 | 设备名称 | 规格/描述 | 单位 | 数量 |
+|------|----------|----------|:----:|:----:|
+| 1.4 | 大坝安全监测系统 |  | 项 | 1 |
+| 1.4.1 | 渗流压力监测 |  | 项 | 1 |
+| 1.4.1.4 | 管口保护装置 | 不锈钢材质，400*400*400 | 个 | 14 |
+| 1.4.1.5 | 专用四芯屏蔽电缆 | 水工屏蔽电缆，与监测设备配套 | m | 1300 |
+| 1.4.1.6 | 电缆保护管 | DN32镀锌钢管（含直接/弯头） | m | 750 |
+| 1.4.1.8 | 通讯模块 | 向上4G全网通通讯，向下485接口通讯，数据透传，宽电压输入：9-36V供电 | 台 | 1 |
+| 1.4.1.9 | 通讯卡及通信费用 | 3年 | 张 | 1 |
+| 1.4.1.10 | 太阳能供电系统 | 满足设备供电需求 | 套 | 1 |
+| 1.4.1.11 | 供电转换模块 | 能够接入市电和太阳能供电，两者之间可以互相备用，具有充电保护功能，电源输出12V | 套 | 1 |
+| 1.4.1.13 | 监测房 | 彩钢房2m*2m，含基础 | 间 | 1 |
+| 1.4.1.14 | 配电箱 | 550*400*300（含空开、漏电保护、防雷、浪涌保护） | 台 | 1 |
+| 1.4.1.15 | 电缆 | YJV22  3*4 | 米 | 400 |
+| 1.4.1.16 | 防雷设施 | 含设备和接地。设备：最大放电电流>40KA，标称放电电流>15KA，电压保护水平>1.5KV，接地<10欧姆 | 套 | 1 |
+| 1.4.1.17 | 便携式振弦式仪器读数仪 | 频率测量范围：400Hz—4500Hz | 台 | 1 |
+| 1.4.1.18 | 人工比测 | 3年，按照规范观测 | 项 | 1 |
+| 1.4.1.19 | 资料分析 | 3年，按照规范进行资料分析； | 项 | 1 |
+| 1.4.2 | 大坝表面变形观测 |  | 项 | 1 |
+| 1.4.2.2 | 监测立杆 | φ219立杆，高2米；基础600*600*800 | 套 | 3 |
+| 1.4.2.3 | 监测柜 | 500*400*300，柜内含空开、集线槽、防雷模块等 | 套 | 3 |
+| 1.4.2.4 | 太阳能供电系统 | 满足设备供电需求，太阳能板100W，蓄电池100AH | 套 | 3 |
+| 1.4.2.5 | 围栏 | 2米*2米 | 套 | 3 |
+| 1.4.2.7 | 监测立杆 | φ219立杆，高2米；基础600*600*800 | 套 | 12 |
+| 1.4.2.8 | 监测柜 | 500*400*300，柜内含空开、集线槽、防雷模块等 | 套 | 12 |
+| 1.4.2.9 | 供电电源 | RVV2*2.5 | 米 | 1500 |
+| 1.4.2.10 | 通讯线缆 | RVVP2*1.5 | 米 | 1500 |
+| 1.4.2.11 | 太阳能供电系统 | 满足设备供电需求，太阳能板100W，蓄电池100AH | 套 | 12 |
+| 1.4.2.12 | 供电转换模块 | 能够接入市电和太阳能供电，两者之间可以互相备用，具有充电保护功能，电源输出12V | 套 | 12 |
+| 1.4.2.13 | 防雷设施 | ≤10欧姆，接地扁铁40*4，接地极∠50*5*2500 | 套 | 12 |
+| 1.4.2.14 | 通讯卡及通信费用 | 3年 | 张 | 14 |
+| 1.4.3 | 溢洪道安全监测 |  | 项 | 1 |
+| 1.4.4 | 放水洞安全监测 |  |  | 1 |
+
+---
+
+## 三、分类统计汇总
+
+| 监测类别 | 监测内容 | 主要设备 | 设备数量 |
+|----------|----------|----------|:--------:|
+| 渗流/渗压监测 | 坝体坝基渗流压力 | 渗压计、测压管 | 14 |
+| GNSS位移监测 | 坝体水平/垂直位移 | GNSS监测站、基准站 | 15 |
+| 人工位移/变形观测 | 人工水准观测 | 位移标点、校核基准点 | 38 |
+| 放水洞变形监测 | 放水洞变形 | 多点位移计、测缝计 | 22 |
+| 水位/流量监测 | 溢洪道水位/流速 | 水尺、流速仪 | 4 |
+| 自动化数据采集 | 数据自动采集 | MCU、数据采集箱 | 2 |
+| 人工观测仪器 | 人工测量 | 水准仪、经纬仪、全站仪 | 3 |
+
+---
+
+## 四、重点设备说明
+
+### 4.1 渗流压力监测（1.4.1）
+
+- **渗压计**：14支，测量范围0~0.75MPa，用于监测坝体坝基渗流压力
+- **测压管**：700m（含钻孔700m），φ50镀锌钢管
+- **MCU自动化采集设备**：1台，接入传感器类型包括MCU传感器和各类RS485输出传感器
+- **便携式振弦式仪器读数仪**：1台，频率测量范围400Hz~4500Hz，用于人工比测
+
+### 4.2 GNSS位移监测系统（1.4.2）
+
+- **GNSS位移监测基准站**：3套，含北斗定位功能，作为变形监测基准
+- **GNSS位移监测站**：12套，监测坝体垂直位移和水平位移
+- **大坝综合位移标点（人工观测）**：29个，用于人工水准测量校核
+- **校核基准点**：4个，**工作基准点**：4个，**高程引测**：1套
+
+### 4.3 放水洞变形监测（1.4.4）
+
+- **多点位移计**：18套，振弦式或电位器式，3测点，量程12mm
+- **测缝计**：4套，差动电阻式，三向测缝计
+
+### 4.4 溢洪道监测（1.4.3）
+
+- **不锈钢反光水尺**：2套，宽20cm，用于溢洪道水位观测
+- **流速仪**：2套，流速范围0.03~20m/s
+
+### 4.5 人工观测仪器
+
+- **水准仪**：1台，每公里往返测±3.0mm精度
+- **经纬仪**：1台，精度2″
+- **全站仪**：1台，棱镜±(2mm+2ppm)精度
+
+---
+
+## 附录：大坝安全监测硬件设备清单
+
+| 序号 | 监测类别 | 设备名称 | 编码 | 单位 | 数量 |
+|:----:|----------|----------|------|:----:|:----:|
+| 1 | 渗流/渗压监测 | 渗压计 | 1.4.1.1 | 支 | 14 |
+| 2 | GNSS位移监测 | GNSS位移监测基准站 | 1.4.2.1 | 套 | 3 |
+| 3 | GNSS位移监测 | GNSS位移监测站 | 1.4.2.6 | 套 | 12 |
+| 4 | 人工位移/变形观测 | 大坝综合位移标点（人工观测） | 1.4.2.15 | 个 | 29 |
+| 5 | 人工位移/变形观测 | 校核基准点 | 1.4.2.16 | 个 | 4 |
+| 6 | 人工位移/变形观测 | 工作基准点 | 1.4.2.17 | 个 | 4 |
+| 7 | 人工位移/变形观测 | 高程引测 | 1.4.2.18 | 套 | 1 |
+| 8 | 放水洞变形监测 | 多点位移计 | 1.4.4.1 | 套 | 18 |
+| 9 | 放水洞变形监测 | 测缝计 | 1.4.4.2 | 套 | 4 |
+| 10 | 水位/流量监测 | 水尺 | 1.4.3.1 | 套 | 2 |
+| 11 | 水位/流量监测 | 流速仪 | 1.4.3.2 | 套 | 2 |
+| 12 | 自动化数据采集 | 自动化采集设备MCU | 1.4.1.7 | 台 | 1 |
+| 13 | 自动化数据采集 | 数据采集箱 | 1.4.1.12 | 台 | 1 |
+| 14 | 人工观测仪器 | 水准仪 | 1.4.2.19 | 台 | 1 |
+| 15 | 人工观测仪器 | 经纬仪 | 1.4.2.20 | 台 | 1 |
+| 16 | 人工观测仪器 | 全站仪 | 1.4.2.21 | 台 | 1 |
+
+**合计：98 个/台/套**
+
+---
+
+*报告生成时间：2025年*

系统改造任务清单.md

@@ -0,0 +1,224 @@
+# 水库综合管理平台系统改造任务清单
+
+> 基于客户会议纪要整理，2026-06-24
+
+---
+
+## T1 — 首页（流域总览）添加天气预报模块
+
+| 项目 | 内容 |
+|------|------|
+| **优先级** | 高 |
+| **涉及文件** | `src/views/mainPages/OverviewView.vue` |
+| **状态** | ⏳ 待开发 |
+
+**需求说明：**
+流域总览页面（综合首页）左侧新增天气预报模块，展示内容包括：
+- 天气图标（晴/阴/雨/雪）
+- 当前温度
+- 湿度、风速
+- 逐小时/逐日预报信息
+
+**参考：** 工作台已有气象数据（WorkspaceView.vue 中 weatherData），可复用接口逻辑或 UI 样式。
+
+---
+
+## T2 — 渗压监测设计线和警戒线随水位动态变化
+
+| 项目 | 内容 |
+|------|------|
+| **优先级** | 高 |
+| **涉及文件** | `src/components/DamSeepageSection.vue` |
+| **状态** | ⏳ 待开发 |
+
+**需求说明：**
+当前设计线（designWaterLevel = 10.2m）和警戒线（warningWaterLevel = 11.5m）是固定硬编码值，客户要求：
+- 设计线和警戒线应根据当前实际水位**动态偏移**
+- 建立水位 → 设计线 / 警戒线的映射关系
+  - 方案一：当前水位 ± 固定差值
+  - 方案二：多段线性插值表
+
+**改造要点：**
+- DamSeepageSection.vue 中 `designControlPoints` 和 `warningControlPoints` 不再使用固定值
+- 根据 `currentWaterLevel` 实时计算对应控制点 Y 值
+- Canvas 绘制逻辑适配动态线
+
+---
+
+## T3 — 核查并修正设备类型
+
+| 项目 | 内容 |
+|------|------|
+| **优先级** | 高 |
+| **涉及文件** | `src/views/mainPages/EngineeringSafetyView.vue` |
+| **状态** | ⏳ 待开发 |
+
+**需求说明：**
+客户指出系统中某些设备类型实际上并不存在，需要：
+1. 全面梳理设备清单（tree 数据）和设备类型
+2. 移除不存在的设备类型
+3. 修正设备清单数据
+
+**关联数据：**
+- EngineeringSafetyView.vue 中的设备清单树（tree / searchKey / filteredTree）
+- 设备类型枚举列表
+- 设备台账相关数据
+
+---
+
+## T4 — 安全评估等级修改为参考值
+
+| 项目 | 内容 |
+|------|------|
+| **优先级** | 高 |
+| **涉及文件** | `src/views/mainPages/EngineeringSafetyView.vue` |
+| **状态** | ⏳ 待开发 |
+
+**需求说明：**
+当前显示 "综合安全等级 → 一类坝"，客户指出系统只能提供**参考评估**，不能直接评定为一类坝（需专业机构评定）。
+
+**改造方案（二选一）：**
+- 方案 A：等级名称改为 **"安全" / "健康" / "关注" / "危险"** 等参考性表述
+- 方案 B：保持等级显示，但在 UI 上标注 **"（参考值）"** 或 **"系统评估，仅供参考"**
+
+**影响位置：**
+- EngineeringSafetyView.vue 中 `<span class="safety-eval-grade grade-a">一类坝</span>` 所在区域
+- 安全评估结论相关文案
+
+---
+
+## T5 — 闸门控制改造（引水闸 + 放水闸）
+
+| 项目 | 内容 |
+|------|------|
+| **优先级** | 高 |
+| **涉及文件** | `src/views/mainPages/GateControlView.vue` |
+| **状态** | ⏳ 待开发 |
+
+**需求说明：**
+闸门控制页面结构需要重新调整：
+
+**闸室划分：**
+| 闸室 | 说明 |
+|------|------|
+| 引水口闸室 | 包含 3 个螺杆闸 |
+| 放水洞闸室 | 包含放水闸 |
+
+**右侧面板改动：**
+- ❌ 移除原有的 "1# 弧形钢闸门" 和 "2# 平面钢闸门"
+- ✅ 改为展示：
+  - **引水闸（3 个螺杆闸）** — 分别展示开度、工况、安全状态
+  - **放水闸** — 展示开度、工况、安全状态
+
+**左侧及中间部分：**
+- 调度计划与指令 → 保留
+- 闸室监控 → 根据新闸室结构调整
+- Cesium 地图 → 保留不变
+
+---
+
+## T6 — 视频监控移入工作台
+
+| 项目 | 内容 |
+|------|------|
+| **优先级** | 高 |
+| **涉及文件** | `src/views/mainPages/VideoMonitorView.vue`、`src/views/mainPages/WorkspaceView.vue`、`src/views/HomeView.vue` |
+| **状态** | ⏳ 待开发 |
+
+**需求说明：**
+
+### 前台大屏
+- 从 HomeView.vue 的 tab 导航中移除"视频监控"入口
+- 原有视频监控位置（tab 切换）将被 T7 的"管线安监"替代
+
+### 工作台
+- WorkspaceView.vue 的左侧菜单新增"视频监控"菜单项
+- 视频监控模块嵌入工作台内容区
+- **样式要求：** 工作台是蓝白 B 端风格，视频监控模块的 UI **必须与工作台风格统一**
+  - 不可直接套用大屏深色科技风
+  - 使用 Element Plus 组件体系
+  - 配色、字体、间距与工作台一致
+
+---
+
+## T7 — 原视频监控位置改为管线安监大屏
+
+| 项目 | 内容 |
+|------|------|
+| **优先级** | 高 |
+| **涉及文件** | 新建 `src/views/mainPages/PipelineMonitorView.vue`（示例名）、`src/views/HomeView.vue` |
+| **状态** | ⏳ 待开发 |
+
+**需求说明：**
+原视频监控 tab 位置替换为"管线安监"大屏页面，整体保持大屏深色科技风设计。
+
+**页面布局：**
+```
+┌─────────────────────────────────────────┐
+│            管线安监（标题）               │
+├──────────┬──────────────────┬───────────┤
+│ 压力监测  │  中间展示区域     │ 流量监测   │
+│ 6个监测点 │  （地图/系统图）  │ 2个监测点   │
+│          │                  │           │
+│ 点1: xMPa │  来水总量        │ 点1: xm³/s│
+│ 点2: xMPa │  xxx 万m³       │ 点2: xm³/s│
+│ 点3: xMPa │                  │           │
+│ 点4: xMPa │                  │           │
+│ 点5: xMPa │                  │           │
+│ 点6: xMPa │                  │           │
+├──────────┴──────────────────┴───────────┤
+│       压力趋势 / 流量趋势图表              │
+└─────────────────────────────────────────┘
+```
+
+**数据展示：**
+- 6 个管网压力监测点
+- 2 个流量监测点
+- 来水总量
+- 压力监测数据（实时值、趋势）
+- 流量监测数据（实时值、趋势）
+
+---
+
+## T8 — 工作台首页新增每日实时数据统计卡片（支持导出简报）
+
+| 项目 | 内容 |
+|------|------|
+| **优先级** | 高 |
+| **涉及文件** | `src/views/mainPages/WorkspaceView.vue` |
+| **状态** | ⏳ 待开发 |
+
+**需求说明：**
+工作台首页（首页 dashboard 区域）新增一个统计卡片模块，内容涵盖：
+
+### 数据项
+| 数据类别 | 具体内容 |
+|----------|----------|
+| 值班信息 | 值班人员、交接班时间 |
+| 气象数据 | 气温、天气状况 |
+| 库水位 | 2点、8点、14点、20点水位（每6小时） |
+| 雨量 | 8:00 ~ 次日8:00 累计雨量 |
+| 出入库 | 最大流量、最小流量、平均流量、总出入库日水量 |
+| 瞬时流量 | 2点、8点、14点、20点瞬时流量（m³/s） |
+| 其他 | 降雨、水质、管线压力 |
+| 自定义检查 | 检查事项等自定义检查项 |
+
+### 导出功能
+- 支持**导出生成简报**（PDF / Excel 格式）
+- 简报模板包含上述所有数据项
+- 可自定义简报标题和备注
+
+---
+
+## 进度总览
+
+| 编号 | 任务 | 优先级 | 涉及端 | 状态 |
+|------|------|--------|--------|------|
+| T1 | 首页添加天气预报 | 高 | 前台大屏 | ⏳ |
+| T2 | 渗压监测线动态变化 | 高 | 前台大屏 | ⏳ |
+| T3 | 设备类型修正 | 高 | 全系统 | ⏳ |
+| T4 | 安全评估改为参考值 | 高 | 前台大屏 | ⏳ |
+| T5 | 闸门控制改造 | 高 | 前台大屏 | ⏳ |
+| T6 | 视频监控移入工作台 | 高 | 前台+后台 | ⏳ |
+| T7 | 管线安监大屏 | 高 | 前台大屏 | ⏳ |
+| T8 | 每日数据统计卡片+导出 | 高 | 后台工作台 | ⏳ |