修改无人机页面增加三巡功能

src/views/InspectionView.vue

@@ -0,0 +1,955 @@
+<template>
+  <div class="inspection-view">
+    <!-- 左侧面板区域 -->
+    <div class="left-sidebar">
+      <!-- 左侧数据框容器 -->
+      <div class="left-container">
+        <!-- 左侧面板：运行状态 -->
+        <div class="data-card station-intro">
+          <div class="panel-header">
+            <h3>运行状态</h3>
+            <span class="more-btn" @click="showDetailModal = true">更多</span>
+          </div>
+          <div class="panel-content">
+            <div class="device-status-section">
+              <!-- 顶部状态指标 -->
+              <div class="top-status-indicators">
+                <div class="status-icon-item">
+                  <div class="status-icon">🤖</div>
+                  <div class="status-text">当前工作状态</div>
+                  <div class="status-state status-normal">自主巡检</div>
+                </div>
+                <div class="status-icon-item">
+                  <div class="status-icon">📋</div>
+                  <div class="status-text">巡检模式</div>
+                  <div class="status-state status-normal">定时自动</div>
+                </div>
+              </div>
+              
+              <!-- 详细信息 -->
+              <div class="device-details">
+                <div class="detail-row">
+                  <div class="detail-item">
+                    <span class="detail-label">定位系统:</span>
+                    <span class="detail-value">GPS16个</span>
+                  </div>
+                  <div class="detail-item">
+                    <span class="detail-label">实时位置:</span>
+                    <span class="detail-value">水位自记台</span>
+                  </div>
+                </div>
+                <div class="detail-row">
+                  <div class="detail-item">
+                    <span class="detail-label">电池电量:</span>
+                    <span class="detail-value status-normal">91%</span>
+                  </div>
+                  <div class="detail-item">
+                    <span class="detail-label">续航预估:</span>
+                    <span class="detail-value">420分钟</span>
+                  </div>
+                </div>
+                <div class="detail-row">
+                  <div class="detail-item">
+                    <span class="detail-label">本次行走里程:</span>
+                    <span class="detail-value">1200米</span>
+                  </div>
+                  <div class="detail-item">
+                    <span class="detail-label">累计行走里程:</span>
+                    <span class="detail-value">8500米</span>
+                  </div>
+                </div>
+                <div class="detail-row">
+                  <div class="detail-item">
+                    <span class="detail-label">云台姿态:</span>
+                    <span class="detail-value">水平: 45° / 俯仰: 15°</span>
+                  </div>
+                </div>
+                <div class="detail-row">
+                  <div class="detail-item">
+                    <span class="detail-label">通信信号:</span>
+                    <span class="detail-value status-normal">正常</span>
+                  </div>
+                </div>
+                <div class="detail-row">
+                  <div class="detail-item">
+                    <span class="detail-label">任务进度:</span>
+                    <span class="detail-value">75% (共8个巡检点)</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <!-- 右侧面板区域 -->
+    <div class="right-sidebar">
+      <!-- 右侧数据框容器 -->
+      <div class="right-container">
+        <!-- 右侧面板 1：巡检概况统计 -->
+        <div class="data-card data-card-1">
+          <div class="panel-header">
+            <h3>巡检概况统计</h3>
+          </div>
+          <div class="panel-content">
+            <div class="inspection-overview">
+              <div class="overview-stats">
+                <div class="stat-item">
+                  <div class="stat-label">今日巡检次数</div>
+                  <div class="stat-value">8次</div>
+                </div>
+                <div class="stat-item">
+                  <div class="stat-label">异常告警总数</div>
+                  <div class="stat-value status-abnormal">1项</div>
+                </div>
+                <div class="stat-item">
+                  <div class="stat-label">正常设备/点位</div>
+                  <div class="stat-value status-normal">12处</div>
+                </div>
+                <div class="stat-item">
+                  <div class="stat-label">异常设备/点位</div>
+                  <div class="stat-value status-warning">1处</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        
+        <!-- 右侧面板 2：巡检异常 -->
+        <div class="data-card data-card-2">
+          <div class="panel-header">
+            <h3>巡检异常</h3>
+          </div>
+          <div class="panel-content">
+            <div class="inspection-exceptions">
+              <div class="exceptions-scroll">
+                <div class="exception-item">
+                  <div class="exception-info">
+                    <div class="exception-location">消防区</div>
+                    <div class="exception-time">2026-03-16 14:30</div>
+                  </div>
+                  <div class="exception-label status-warning">灭火器压力低</div>
+                  <div class="exception-image">
+                    <img src="/src/assets/images/xunjian/4.png" alt="灭火器压力低" class="exception-img" />
+                  </div>
+                </div>
+                <div class="exception-item">
+                  <div class="exception-info">
+                    <div class="exception-location">地下水监测井</div>
+                    <div class="exception-time">2026-03-16 11:20</div>
+                  </div>
+                  <div class="exception-label status-warning">井盖轻微破损</div>
+                  <div class="exception-image">
+                    <img src="/src/assets/images/xunjian/5.png" alt="井盖轻微破损" class="exception-img" />
+                  </div>
+                </div>
+                <div class="exception-item">
+                  <div class="exception-info">
+                    <div class="exception-location">坡面径流场</div>
+                    <div class="exception-time">2026-03-16 09:45</div>
+                  </div>
+                  <div class="exception-label status-warning">导流管堵塞</div>
+                  <div class="exception-image">
+                    <img src="/src/assets/images/xunjian/3.png" alt="导流管堵塞" class="exception-img" />
+                  </div>
+                </div>
+                <div class="exception-item">
+                  <div class="exception-info">
+                    <div class="exception-location">缆道测流系统</div>
+                    <div class="exception-time">2026-03-16 08:15</div>
+                  </div>
+                  <div class="exception-label status-warning">控制箱异常</div>
+                  <div class="exception-image">
+                    <img src="/src/assets/images/xunjian/1.png" alt="控制箱异常" class="exception-img" />
+                  </div>
+                </div>
+                <div class="exception-item">
+                  <div class="exception-info">
+                    <div class="exception-location">水位自记台</div>
+                    <div class="exception-time">2026-03-15 16:30</div>
+                  </div>
+                  <div class="exception-label status-warning">渗水</div>
+                  <div class="exception-image">
+                    <img src="/src/assets/images/xunjian/2.png" alt="渗水" class="exception-img" />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const showDetailModal = ref(false)
+</script>
+
+<style scoped>
+.inspection-view {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  gap: 0;
+  padding: 0 20px;
+  justify-content: space-between;
+}
+
+/* 左侧面板 */
+.left-sidebar {
+  width: 350px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.left-container {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: 100%;
+  height: 100%;
+}
+
+/* 右侧面板 */
+.right-sidebar {
+  width: 350px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.right-container {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: 100%;
+  height: 100%;
+}
+
+/* 数据卡片样式 */
+.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);
+}
+
+.panel-header {
+  height: 50px;
+  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: 6px 20px 0;
+  cursor: pointer;
+}
+
+.panel-header h3 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: bold;
+  color: #e0fcff;
+  text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
+  padding-left: 20px;
+}
+
+.panel-content {
+  font-size: 14px;
+  line-height: 1.4;
+  width: 100%;
+  color: #ffffff;
+  padding: 15px;
+}
+
+.data-card-1 .panel-content {
+  padding: 10px 15px 15px;
+  display: flex;
+  flex-direction: column;
+}
+
+.station-intro {
+  height: 400px;
+}
+
+.station-intro .panel-content {
+  padding: 15px;
+  height: calc(100% - 50px);
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.video-monitor {
+  display: none;
+}
+
+/* 设备状态区域 */
+.device-status-section {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+/* 顶部状态指标 */
+.top-status-indicators {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  padding: 10px;
+  background: linear-gradient(135deg, rgba(0, 20, 40, 0.6), rgba(0, 10, 20, 0.6));
+  border: 1px solid rgba(0, 212, 255, 0.3);
+  border-radius: 8px;
+}
+
+/* 状态圆圈 */
+.status-circle {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  border: 2px solid #00d5ff;
+  background: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 0 15px rgba(0, 212, 255, 0.5);
+}
+
+.circle-inner {
+  text-align: center;
+  color: #00d5ff;
+}
+
+.circle-percentage {
+  font-size: 14px;
+  font-weight: bold;
+  text-shadow: 0 0 5px rgba(0, 212, 255, 0.8);
+}
+
+.circle-label {
+  font-size: 10px;
+  margin-top: 1px;
+}
+
+/* 状态图标项 */
+.status-icon-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 3px;
+  flex: 1;
+}
+
+.status-icon {
+  font-size: 20px;
+}
+
+.status-text {
+  color: #00d5ff;
+  font-size: 12px;
+  font-weight: bold;
+  text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
+}
+
+.status-state {
+  color: #00ff88;
+  font-size: 11px;
+  text-shadow: 0 0 5px rgba(0, 255, 136, 0.5);
+}
+
+/* 详细信息 */
+.device-details {
+  padding: 12px;
+  background: linear-gradient(135deg, rgba(0, 20, 40, 0.6), rgba(0, 10, 20, 0.6));
+  border: 1px solid rgba(0, 212, 255, 0.3);
+  border-radius: 8px;
+}
+
+.detail-row {
+  display: flex;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  margin-bottom: 8px;
+}
+
+.detail-row:last-child {
+  margin-bottom: 0;
+}
+
+.detail-item {
+  flex: 1;
+  min-width: 45%;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.detail-label {
+  color: #00d5ff;
+  font-size: 12px;
+  font-weight: bold;
+  text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
+}
+
+.detail-value {
+  color: #ffffff;
+  font-size: 12px;
+  text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
+}
+
+/* 机器人状态容器 */
+.robot-status-container {
+  margin-top: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.robot-bg {
+  position: relative;
+  width: 100%;
+  height: 180px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  border-radius: 0;
+}
+
+.robot-image {
+  width: 200px;
+  height: 200px;
+  object-fit: contain;
+  opacity: 0.9;
+  z-index: 1;
+}
+
+/* 视角选择按钮 */
+.view-buttons {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 15px;
+}
+
+.view-btn {
+  flex: 1;
+  height: 40px;
+  padding-top: 6px;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+/* 视角显示区域 */
+.view-display {
+  width: 100%;
+  height: 400px;
+  position: relative;
+  background: linear-gradient(135deg, rgba(0, 20, 40, 0.6), rgba(0, 10, 20, 0.6));
+  border: 1px solid rgba(0, 212, 255, 0.3);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.view-image-wrapper {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.view-image {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+
+.view-placeholder {
+  color: #00d5ff;
+  font-size: 16px;
+  text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
+}
+
+/* 任务详情容器 */
+.task-detail-container {
+  display: flex;
+  gap: 20px;
+  margin-bottom: 20px;
+}
+
+.task-detail-left {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.task-status {
+  color: #00ff88;
+  font-size: 14px;
+  font-weight: bold;
+  text-shadow: 0 0 5px rgba(0, 255, 136, 0.5);
+}
+
+.task-icon {
+  width: 60px;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, rgba(0, 20, 40, 0.6), rgba(0, 10, 20, 0.6));
+  border: 1px solid rgba(0, 212, 255, 0.3);
+  border-radius: 8px;
+}
+
+.task-icon img {
+  width: 40px;
+  height: 40px;
+  object-fit: contain;
+}
+
+.task-time {
+  color: #00d5ff;
+  font-size: 12px;
+  text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
+}
+
+.task-name {
+  color: #ffffff;
+  font-size: 14px;
+  font-weight: bold;
+  text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
+}
+
+.task-detail-right {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+}
+
+.gauge-container {
+  width: 120px;
+  height: 120px;
+}
+
+.task-location {
+  color: #00d5ff;
+  font-size: 12px;
+  text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
+  text-align: center;
+}
+
+/* 历史任务表格 */
+.history-table-header {
+  display: flex;
+  background: linear-gradient(135deg, rgba(0, 30, 60, 0.8), rgba(0, 15, 30, 0.8));
+  border: 1px solid rgba(0, 212, 255, 0.3);
+  border-radius: 4px 4px 0 0;
+  padding: 8px 10px;
+  font-weight: bold;
+  color: #00d5ff;
+  text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
+  font-size: 12px;
+}
+
+.history-table-container {
+  max-height: 250px;
+  overflow-y: auto;
+  border: 1px solid rgba(0, 212, 255, 0.3);
+  border-radius: 0 0 4px 4px;
+}
+
+.history-table {
+  width: 100%;
+}
+
+.history-table-body {
+  display: flex;
+  flex-direction: column;
+}
+
+.history-table-row {
+  display: flex;
+  padding: 8px 10px;
+  border-bottom: 1px solid rgba(0, 212, 255, 0.2);
+  font-size: 12px;
+}
+
+.history-table-row:last-child {
+  border-bottom: none;
+}
+
+.history-table-row:hover {
+  background: rgba(0, 212, 255, 0.1);
+}
+
+.history-table-col {
+  flex: 1;
+  color: #ffffff;
+  text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
+}
+
+.history-id-col {
+  flex: 0.8;
+}
+
+.history-area-col {
+  flex: 1.2;
+}
+
+.history-time-col {
+  flex: 1.2;
+}
+
+.history-status-col {
+  flex: 0.8;
+  color: #00ff88;
+  text-shadow: 0 0 5px rgba(0, 255, 136, 0.5);
+}
+
+.history-table-container::-webkit-scrollbar {
+  width: 6px;
+}
+
+.history-table-container::-webkit-scrollbar-track {
+  background: rgba(0, 20, 40, 0.3);
+  border-radius: 3px;
+}
+
+.history-table-container::-webkit-scrollbar-thumb {
+  background: rgba(0, 212, 255, 0.5);
+  border-radius: 3px;
+}
+
+.history-table-container::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 212, 255, 0.8);
+}
+
+/* 任务选择 */
+.task-selection {
+  margin-bottom: 15px;
+}
+
+.task-select {
+  width: 100%;
+  padding: 8px;
+  background: linear-gradient(135deg, rgba(0, 20, 40, 0.6), rgba(0, 10, 20, 0.6));
+  border: 1px solid rgba(0, 212, 255, 0.3);
+  border-radius: 4px;
+  color: #ffffff;
+  font-size: 14px;
+  text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
+}
+
+.task-select option {
+  background: rgba(0, 20, 40, 0.9);
+  color: #ffffff;
+}
+
+/* 测流成果图表 */
+.flow-chart-container {
+  width: 100%;
+  height: 250px;
+  position: relative;
+}
+
+.flow-chart {
+  width: 100%;
+  height: 100%;
+}
+
+/* 状态颜色编码 */
+.status-normal {
+  color: #00ff88;
+  text-shadow: 0 0 5px rgba(0, 255, 136, 0.5);
+}
+
+.status-warning {
+  color: #ffaa00;
+  text-shadow: 0 0 5px rgba(255, 170, 0, 0.5);
+}
+
+.status-abnormal {
+  color: #ff4444;
+  text-shadow: 0 0 5px rgba(255, 68, 68, 0.5);
+}
+
+/* 巡检概况统计 */
+.inspection-overview {
+  width: 100%;
+}
+
+.overview-stats {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 15px;
+  padding: 10px 0;
+}
+
+.stat-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 10px;
+  background: linear-gradient(135deg, rgba(0, 20, 40, 0.6), rgba(0, 10, 20, 0.6));
+  border: 1px solid rgba(0, 212, 255, 0.3);
+  border-radius: 8px;
+}
+
+.stat-label {
+  color: #00d5ff;
+  font-size: 12px;
+  font-weight: bold;
+  text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
+  margin-bottom: 5px;
+}
+
+.stat-value {
+  color: #ffffff;
+  font-size: 18px;
+  font-weight: bold;
+  text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
+}
+
+/* 重点监测区域状态 */
+.key-areas-status {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.area-status-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.area-status-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 12px;
+  background: linear-gradient(135deg, rgba(0, 20, 40, 0.6), rgba(0, 10, 20, 0.6));
+  border: 1px solid rgba(0, 212, 255, 0.3);
+  border-radius: 4px;
+}
+
+.area-name {
+  color: #00d5ff;
+  font-size: 12px;
+  font-weight: bold;
+  text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
+}
+
+.area-status {
+  color: #ffffff;
+  font-size: 12px;
+  text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
+}
+
+/* 告警信息 */
+.alerts-container {
+  width: 100%;
+}
+
+.alerts-container h4 {
+  margin: 0 0 10px 0;
+  color: #00d5ff;
+  font-size: 14px;
+  font-weight: bold;
+  text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
+}
+
+.alerts-scroll {
+  max-height: 120px;
+  overflow-y: auto;
+  border: 1px solid rgba(0, 212, 255, 0.3);
+  border-radius: 4px;
+  padding: 10px;
+  background: linear-gradient(135deg, rgba(0, 20, 40, 0.6), rgba(0, 10, 20, 0.6));
+}
+
+.alert-item {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  padding: 8px;
+  border-bottom: 1px solid rgba(0, 212, 255, 0.2);
+  margin-bottom: 8px;
+}
+
+.alert-item:last-child {
+  border-bottom: none;
+  margin-bottom: 0;
+}
+
+.alert-time {
+  color: #00d5ff;
+  font-size: 11px;
+  text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
+}
+
+.alert-content {
+  color: #ffffff;
+  font-size: 12px;
+  text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
+}
+
+.alerts-scroll::-webkit-scrollbar {
+  width: 6px;
+}
+
+.alerts-scroll::-webkit-scrollbar-track {
+  background: rgba(0, 20, 40, 0.3);
+  border-radius: 3px;
+}
+
+.alerts-scroll::-webkit-scrollbar-thumb {
+  background: rgba(0, 212, 255, 0.5);
+  border-radius: 3px;
+}
+
+.alerts-scroll::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 212, 255, 0.8);
+}
+
+
+
+/* 区域状态卡片 */
+.area-cards {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 10px;
+  margin-bottom: 15px;
+}
+
+.area-card {
+  background: linear-gradient(135deg, rgba(0, 20, 40, 0.6), rgba(0, 10, 20, 0.6));
+  border: 1px solid rgba(0, 212, 255, 0.3);
+  border-radius: 4px;
+  overflow: hidden;
+  height: 40px;
+  display: flex;
+  align-items: center;
+}
+
+.area-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 12px;
+  width: 100%;
+  background: rgba(0, 212, 255, 0.1);
+}
+
+.area-card-name {
+  color: #00d5ff;
+  font-size: 12px;
+  font-weight: bold;
+  text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
+}
+
+.area-card-status {
+  color: #ffffff;
+  font-size: 11px;
+  text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
+}
+
+/* 巡检异常 */
+.inspection-exceptions {
+  width: 100%;
+}
+
+.exceptions-scroll {
+  max-height: 300px;
+  overflow-y: auto;
+  padding-right: 5px;
+}
+
+.exceptions-scroll::-webkit-scrollbar {
+  width: 6px;
+}
+
+.exceptions-scroll::-webkit-scrollbar-track {
+  background: rgba(0, 20, 40, 0.3);
+  border-radius: 3px;
+}
+
+.exceptions-scroll::-webkit-scrollbar-thumb {
+  background: rgba(0, 212, 255, 0.5);
+  border-radius: 3px;
+}
+
+.exceptions-scroll::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 212, 255, 0.8);
+}
+
+.exception-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px;
+  background: linear-gradient(135deg, rgba(40, 0, 0, 0.6), rgba(20, 0, 0, 0.6));
+  border: 1px solid rgba(255, 170, 0, 0.3);
+  border-radius: 6px;
+  margin-bottom: 10px;
+  border-left: 3px solid #ffaa00;
+}
+
+.exception-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.exception-location {
+  color: #ffffff;
+  font-size: 13px;
+  font-weight: bold;
+  text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
+}
+
+.exception-time {
+  color: #00d5ff;
+  font-size: 11px;
+  text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
+}
+
+.exception-label {
+  font-size: 12px;
+  font-weight: bold;
+  padding: 4px 8px;
+  border-radius: 12px;
+  background: rgba(255, 170, 0, 0.2);
+  white-space: nowrap;
+}
+
+.exception-image {
+  width: 80px;
+  height: 80px;
+  border: 1px solid rgba(0, 212, 255, 0.3);
+  border-radius: 4px;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.exception-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+</style>

src/views/MeasurementView.vue

@@ -0,0 +1,633 @@
+<template>
+  <div class="measurement-view">
+    <!-- 左侧面板区域（无人机监控区） -->
+    <div class="left-sidebar">
+      <!-- 左侧数据框容器 -->
+      <div class="left-container">
+        <!-- 左侧面板1：无人机实时状态卡片 -->
+        <div class="data-card drone-status-card">
+          <div class="panel-header">
+            <h3>无人机状态</h3>
+            <span class="more-btn" @click="toggleCard('droneStatus')">▼</span>
+          </div>
+          <div class="panel-content" v-show="expandedCards.droneStatus">
+            <div class="drone-status-grid">
+              <div class="drone-status-item">
+                <div class="status-icon">🛸</div>
+                <div class="status-label">飞行状态</div>
+                <div class="status-value status-normal">巡测中</div>
+              </div>
+              <div class="drone-status-item">
+                <div class="status-icon">📍</div>
+                <div class="status-label">定位模式</div>
+                <div class="status-value">RTK 定位</div>
+              </div>
+              <div class="drone-status-item">
+                <div class="status-icon">🗺️</div>
+                <div class="status-label">当前位置</div>
+                <div class="status-value">河道测流断面</div>
+              </div>
+              <div class="drone-status-item">
+                <div class="status-icon">📏</div>
+                <div class="status-label">飞行高度</div>
+                <div class="status-value">50 m</div>
+              </div>
+              <div class="drone-status-item">
+                <div class="status-icon">💨</div>
+                <div class="status-label">飞行速度</div>
+                <div class="status-value">8 m/s</div>
+              </div>
+              <div class="drone-status-item">
+                <div class="status-icon">🔋</div>
+                <div class="status-label">电量</div>
+                <div class="status-value status-normal">85%</div>
+              </div>
+              <div class="drone-status-item">
+                <div class="status-icon">⏰</div>
+                <div class="status-label">续航时间</div>
+                <div class="status-value">45 分钟</div>
+              </div>
+              <div class="drone-status-item">
+                <div class="status-icon">📶</div>
+                <div class="status-label">通信信号</div>
+                <div class="status-value status-normal">正常</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        
+        <!-- 左侧面板 2：实时镜头画面卡片 -->
+        <div class="data-card camera-feed-card">
+          <div class="panel-header">
+            <h3>实时巡测镜头</h3>
+            <span class="more-btn" @click="toggleCard('cameraFeed')">▼</span>
+          </div>
+          <div class="panel-content" v-show="expandedCards.cameraFeed">
+            <div class="camera-feed-container">
+              <div class="camera-feed">
+                <img src="/src/assets/images/Heilin/机器人视角.png" alt="无人机实时画面" class="camera-image" />
+                <div class="camera-overlay camera-attitude">
+                  镜头姿态：水平 45° / 俯仰 -15°
+                </div>
+                <div class="camera-overlay camera-clarity">
+                  画面清晰度：<span class="status-normal">正常</span>
+                </div>
+                <div class="fullscreen-btn" @click="toggleFullscreen('camera')">⛶</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <!-- 右侧面板区域（测流业务数据区） -->
+    <div class="right-sidebar">
+      <!-- 右侧数据框容器 -->
+      <div class="right-container">
+        <!-- 右侧面板 1：实时测流结果卡片 -->
+        <div class="data-card measurement-results-card">
+          <div class="panel-header">
+            <h3>实时测流结果</h3>
+            <span class="more-btn" @click="toggleCard('measurementResults')">▼</span>
+          </div>
+          <div class="panel-content" v-show="expandedCards.measurementResults">
+            <div class="measurement-results">
+              <div class="measurement-time">
+                测量时间：2026-03-16 15:30
+              </div>
+              <div class="flow-values">
+                <div class="flow-item">
+                  <div class="flow-label">上游断面流量</div>
+                  <div class="flow-value">12.8 m³/s</div>
+                </div>
+                <div class="flow-item">
+                  <div class="flow-label">下游断面流量</div>
+                  <div class="flow-value">12.5 m³/s</div>
+                </div>
+              </div>
+              <div class="measurement-details">
+                <div class="detail-item">
+                  <span class="detail-label">断面平均流速：</span>
+                  <span class="detail-value">1.2 m/s</span>
+                </div>
+                <div class="detail-item">
+                  <span class="detail-label">水深：</span>
+                  <span class="detail-value">2.5 m</span>
+                </div>
+                <div class="detail-item">
+                  <span class="detail-label">测流方式：</span>
+                  <span class="detail-value">无人机雷达测流 📡</span>
+                </div>
+                <div class="detail-item">
+                  <span class="detail-label">数据状态：</span>
+                  <span class="detail-value status-normal">有效 ✅</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        
+        <!-- 右侧面板 2：历史测流任务列表卡片 -->
+        <div class="data-card history-tasks-card">
+          <div class="panel-header">
+            <h3>历史测流任务与结果</h3>
+            <span class="more-btn" @click="toggleCard('historyTasks')">▼</span>
+          </div>
+          <div class="panel-content" v-show="expandedCards.historyTasks">
+            <div class="history-table-container">
+              <div class="history-table-header">
+                <div class="history-table-col history-time-col">任务时间</div>
+                <div class="history-table-col history-section-col">断面</div>
+                <div class="history-table-col history-flow-col">流量</div>
+                <div class="history-table-col history-status-col">状态</div>
+              </div>
+              <div class="history-table-body">
+                <div class="history-table-row">
+                  <div class="history-table-col history-time-col">2026-03-16 10:20</div>
+                  <div class="history-table-col history-section-col">上游</div>
+                  <div class="history-table-col history-flow-col">12.8 m³/s</div>
+                  <div class="history-table-col history-status-col">
+                    <span class="status-normal">正常 ✅</span>
+                  </div>
+                </div>
+                <div class="history-table-row">
+                  <div class="history-table-col history-time-col">2026-03-16 09:10</div>
+                  <div class="history-table-col history-section-col">下游</div>
+                  <div class="history-table-col history-flow-col">12.5 m³/s</div>
+                  <div class="history-table-col history-status-col">
+                    <span class="status-normal">正常 ✅</span>
+                  </div>
+                </div>
+                <div class="history-table-row">
+                  <div class="history-table-col history-time-col">2026-03-15 16:30</div>
+                  <div class="history-table-col history-section-col">上游</div>
+                  <div class="history-table-col history-flow-col">11.9 m³/s</div>
+                  <div class="history-table-col history-status-col">
+                    <span class="status-normal">正常 ✅</span>
+                  </div>
+                </div>
+                <div class="history-table-row">
+                  <div class="history-table-col history-time-col">2026-03-15 14:20</div>
+                  <div class="history-table-col history-section-col">下游</div>
+                  <div class="history-table-col history-flow-col">11.7 m³/s</div>
+                  <div class="history-table-col history-status-col">
+                    <span class="status-warning">异常 ⚠️</span>
+                  </div>
+                </div>
+                <div class="history-table-row">
+                  <div class="history-table-col history-time-col">2026-03-15 10:15</div>
+                  <div class="history-table-col history-section-col">上游</div>
+                  <div class="history-table-col history-flow-col">11.5 m³/s</div>
+                  <div class="history-table-col history-status-col">
+                    <span class="status-normal">正常 ✅</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const expandedCards = ref({
+  droneStatus: true,
+  cameraFeed: true,
+  measurementResults: true,
+  historyTasks: true
+})
+
+const toggleCard = (card) => {
+  expandedCards.value[card] = !expandedCards.value[card]
+}
+
+const toggleFullscreen = (element) => {
+  // 实现全屏功能的逻辑
+  console.log(`Toggle fullscreen for ${element}`)
+}
+</script>
+
+<style scoped>
+.measurement-view {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  gap: 20px;
+  padding: 0 20px;
+  justify-content: space-between;
+}
+
+/* 左侧面板 */
+.left-sidebar {
+  width: 350px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.left-container {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: 100%;
+  height: 100%;
+}
+
+/* 右侧面板 */
+.right-sidebar {
+  width: 350px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.right-container {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: 100%;
+  height: 100%;
+}
+
+/* 数据卡片样式 */
+.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);
+  margin-bottom: 10px;
+}
+
+.panel-header {
+  height: 50px;
+  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: 6px 20px 0;
+  cursor: pointer;
+}
+
+.panel-header h3 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: bold;
+  color: #e0fcff;
+  text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
+  padding-left: 20px;
+}
+
+.more-btn {
+  color: #00d5ff;
+  font-size: 14px;
+  cursor: pointer;
+  text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
+}
+
+.panel-content {
+  font-size: 14px;
+  line-height: 1.4;
+  width: 100%;
+  color: #ffffff;
+  padding: 15px;
+}
+
+/* 无人机状态卡片 */
+.drone-status-card {
+  flex: 0 0 auto;
+}
+
+.drone-status-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(4, 1fr);
+  gap: 10px;
+  width: 100%;
+}
+
+.drone-status-item {
+  background: linear-gradient(135deg, rgba(0, 20, 40, 0.6), rgba(0, 10, 20, 0.6));
+  border: 1px solid rgba(0, 212, 255, 0.3);
+  border-radius: 6px;
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 5px;
+}
+
+.status-icon {
+  font-size: 24px;
+}
+
+.status-label {
+  color: #00d5ff;
+  font-size: 12px;
+  font-weight: bold;
+  text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
+}
+
+.status-value {
+  color: #ffffff;
+  font-size: 13px;
+  font-weight: bold;
+  text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
+}
+
+/* 实时镜头画面卡片 */
+.camera-feed-card {
+  flex: 1;
+}
+
+.camera-feed-container {
+  width: 100%;
+  height: 100%;
+}
+
+.camera-feed {
+  position: relative;
+  width: 100%;
+  height: 0;
+  padding-bottom: 56.25%; /* 16:9 比例 */
+  background: rgba(0, 10, 20, 0.8);
+  border: 1px solid rgba(0, 212, 255, 0.3);
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.camera-image {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.camera-overlay {
+  position: absolute;
+  background: rgba(0, 0, 0, 0.6);
+  color: #ffffff;
+  padding: 5px 10px;
+  font-size: 12px;
+  border-radius: 4px;
+}
+
+.camera-attitude {
+  top: 10px;
+  right: 10px;
+}
+
+.camera-clarity {
+  bottom: 10px;
+  right: 10px;
+}
+
+.fullscreen-btn {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  background: rgba(0, 0, 0, 0.6);
+  color: #ffffff;
+  padding: 5px;
+  font-size: 14px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+/* 实时测流结果卡片 */
+.measurement-results-card {
+  flex: 0 0 auto;
+}
+
+.measurement-results {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.measurement-time {
+  color: #00d5ff;
+  font-size: 13px;
+  text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
+  padding-bottom: 10px;
+  border-bottom: 1px solid rgba(0, 212, 255, 0.3);
+}
+
+.flow-values {
+  display: flex;
+  gap: 15px;
+}
+
+.flow-item {
+  flex: 1;
+  background: linear-gradient(135deg, rgba(0, 20, 40, 0.6), rgba(0, 10, 20, 0.6));
+  border: 1px solid rgba(0, 212, 255, 0.3);
+  border-radius: 6px;
+  padding: 15px;
+  text-align: center;
+}
+
+.flow-label {
+  color: #00d5ff;
+  font-size: 12px;
+  margin-bottom: 10px;
+  text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
+}
+
+.flow-value {
+  color: #00ff88;
+  font-size: 24px;
+  font-weight: bold;
+  text-shadow: 0 0 8px rgba(0, 255, 136, 0.8);
+}
+
+.measurement-details {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.measurement-details .detail-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px;
+  background: linear-gradient(135deg, rgba(0, 20, 40, 0.6), rgba(0, 10, 20, 0.6));
+  border: 1px solid rgba(0, 212, 255, 0.3);
+  border-radius: 4px;
+}
+
+.measurement-details .detail-label {
+  color: #00d5ff;
+  font-size: 13px;
+  font-weight: bold;
+  text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
+}
+
+.measurement-details .detail-value {
+  color: #ffffff;
+  font-size: 13px;
+  text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
+}
+
+/* 历史测流任务列表卡片 */
+.history-tasks-card {
+  flex: 1;
+}
+
+.history-table-container {
+  max-height: 300px;
+  overflow-y: auto;
+  border: 1px solid rgba(0, 212, 255, 0.3);
+  border-radius: 4px;
+}
+
+.history-table-header {
+  display: flex;
+  background: linear-gradient(135deg, rgba(0, 30, 60, 0.8), rgba(0, 15, 30, 0.8));
+  border-bottom: 1px solid rgba(0, 212, 255, 0.3);
+  padding: 10px;
+  font-weight: bold;
+  color: #00d5ff;
+  text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
+  font-size: 12px;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+.history-table-body {
+  display: flex;
+  flex-direction: column;
+}
+
+.history-table-row {
+  display: flex;
+  padding: 10px;
+  border-bottom: 1px solid rgba(0, 212, 255, 0.2);
+  font-size: 12px;
+}
+
+.history-table-row:nth-child(even) {
+  background: rgba(0, 20, 40, 0.3);
+}
+
+.history-table-row:last-child {
+  border-bottom: none;
+}
+
+.history-table-row:hover {
+  background: rgba(0, 212, 255, 0.1);
+}
+
+.history-table-col {
+  flex: 1;
+  color: #ffffff;
+  text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
+}
+
+.history-time-col {
+  flex: 1.2;
+  color: #00d5ff;
+  text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
+}
+
+.history-section-col {
+  flex: 0.8;
+}
+
+.history-flow-col {
+  flex: 1;
+}
+
+.history-status-col {
+  flex: 1;
+}
+
+/* 滚动条样式 */
+.history-table-container::-webkit-scrollbar {
+  width: 6px;
+}
+
+.history-table-container::-webkit-scrollbar-track {
+  background: rgba(0, 20, 40, 0.3);
+  border-radius: 3px;
+}
+
+.history-table-container::-webkit-scrollbar-thumb {
+  background: rgba(0, 212, 255, 0.5);
+  border-radius: 3px;
+}
+
+.history-table-container::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 212, 255, 0.8);
+}
+
+/* 状态颜色编码 */
+.status-normal {
+  color: #00ff88;
+  text-shadow: 0 0 5px rgba(0, 255, 136, 0.5);
+}
+
+.status-warning {
+  color: #ffaa00;
+  text-shadow: 0 0 5px rgba(255, 170, 0, 0.5);
+}
+
+.status-abnormal {
+  color: #ff4444;
+  text-shadow: 0 0 5px rgba(255, 68, 68, 0.5);
+}
+
+/* 动画 */
+@keyframes pulse {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.5;
+    transform: scale(1.1);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* 响应式设计 */
+@media (max-width: 1200px) {
+  .left-sidebar {
+    width: 45%;
+  }
+  
+  .right-sidebar {
+    width: 55%;
+  }
+}
+
+@media (max-width: 992px) {
+  .measurement-view {
+    flex-direction: column;
+  }
+  
+  .left-sidebar,
+  .right-sidebar {
+    width: 100%;
+  }
+  
+  .drone-status-grid {
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+  }
+}
+</style>

src/views/PatrolView.vue

@@ -0,0 +1,844 @@
+<template>
+  <div class="patrol-view">
+    <!-- 左侧面板区域 -->
+    <div class="left-sidebar">
+      <!-- 左侧数据框容器 -->
+      <div class="left-container">
+        <!-- 左侧面板1：设备状态（始终显示） -->
+        <div class="data-card station-intro">
+          <div class="panel-header">
+            <h3>安防巡查状态</h3>
+            <span class="more-btn" @click="showDetailModal = true">更多</span>
+          </div>
+          <div class="panel-content">
+            <div class="device-status-section">
+              <!-- 顶部状态指标 -->
+              <div class="top-status-indicators">
+                <div class="status-circle">
+                  <div class="circle-inner">
+                    <div class="circle-percentage">100%</div>
+                    <div class="circle-label">回传</div>
+                  </div>
+                </div>
+                <div class="status-icon-item">
+                  <div class="status-icon">🤖</div>
+                  <div class="status-text">机器人</div>
+                  <div class="status-state status-normal">安防巡查中</div>
+                </div>
+                <div class="status-icon-item">
+                  <div class="status-icon">📶</div>
+                  <div class="status-text">通信</div>
+                  <div class="status-state status-normal">正常</div>
+                </div>
+              </div>
+              
+              <!-- 详细信息 -->
+              <div class="device-details">
+                <div class="detail-row">
+                  <div class="detail-item">
+                    <span class="detail-label">巡查模式:</span>
+                    <span class="detail-value">定时自动</span>
+                  </div>
+                  <div class="detail-item">
+                    <span class="detail-label">GIS数量:</span>
+                    <span class="detail-value">16个</span>
+                  </div>
+                </div>
+                <div class="detail-row">
+                  <div class="detail-item">
+                    <span class="detail-label">实时位置:</span>
+                    <span class="detail-value">消防区</span>
+                  </div>
+                  <div class="detail-item">
+                    <span class="detail-label">电池状态:</span>
+                    <span class="detail-value status-normal">91% (续航: 420分钟)</span>
+                  </div>
+                </div>
+                <div class="detail-row">
+                  <div class="detail-item">
+                    <span class="detail-label">行走里程:</span>
+                    <span class="detail-value">本次: 1200米 / 累计: 8500米</span>
+                  </div>
+                  <div class="detail-item">
+                    <span class="detail-label">云台角度:</span>
+                    <span class="detail-value">水平: 45° / 俯仰: 15°</span>
+                  </div>
+                </div>
+                <div class="detail-row">
+                  <div class="detail-item">
+                    <span class="detail-label">巡查任务进度:</span>
+                    <span class="detail-value">75% (总路线: 8个巡查点)</span>
+                  </div>
+                </div>
+              </div>
+              
+              <!-- 机器人图片 -->
+              <div class="robot-status-container">
+                <div class="robot-bg">
+                  <img src="/src/assets/images/Heilin/机器人.png" alt="巡检机器人" class="robot-image" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        
+        <!-- 左侧面板 2：监控布局 -->
+        <div class="data-card video-monitor">
+          <div class="panel-header">
+            <h3>监控布局</h3>
+          </div>
+          <div class="panel-content">
+            <div class="view-display">
+              <div class="view-image-wrapper">
+                <img src="/src/assets/images/Heilin/导航.png" alt="监控布局" class="view-image" />
+              </div>
+              <div class="route-card">
+                <div class="route-header">
+                  <div class="route-info-item">
+                    <span class="route-info-label">监控点数:</span>
+                    <span class="route-info-value">16个</span>
+                  </div>
+                  <div class="route-info-item">
+                    <span class="route-info-label">在线状态:</span>
+                    <span class="route-info-value status-normal">16/16</span>
+                  </div>
+                </div>
+                <div class="route-path">
+                  <span class="route-path-label">覆盖区域:</span>
+                  <span class="route-path-value">站院、围墙、大门、消防区、水文设施</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <!-- 右侧面板区域 -->
+    <div class="right-sidebar">
+      <!-- 右侧数据框容器 -->
+      <div class="right-container">
+        <!-- 右侧面板 1：安防巡查概况 -->
+        <div class="data-card data-card-1">
+          <div class="panel-header">
+            <h3>安防巡查概况</h3>
+          </div>
+          <div class="panel-content">
+            <div class="inspection-overview">
+              <div class="overview-stats">
+                <div class="stat-item">
+                  <div class="stat-label">今日安防巡查次数</div>
+                  <div class="stat-value">8</div>
+                </div>
+                <div class="stat-item">
+                  <div class="stat-label">异常告警总数</div>
+                  <div class="stat-value status-warning">1</div>
+                </div>
+                <div class="stat-item">
+                  <div class="stat-label">院内安防正常</div>
+                  <div class="stat-value status-normal">12</div>
+                </div>
+                <div class="stat-item">
+                  <div class="stat-label">院内安防异常</div>
+                  <div class="stat-value status-abnormal">1</div>
+                </div>
+              </div>
+              
+              <div class="key-areas-status">
+                <h4>重点区域安防状态</h4>
+                <div class="area-status-list">
+                  <div class="area-status-item">
+                    <span class="area-name">站院环境</span>
+                    <span class="area-status status-normal">无异常</span>
+                  </div>
+                  <div class="area-status-item">
+                    <span class="area-name">围墙大门</span>
+                    <span class="area-status status-normal">门禁正常</span>
+                  </div>
+                  <div class="area-status-item">
+                    <span class="area-name">监控照明</span>
+                    <span class="area-status status-normal">运行正常</span>
+                  </div>
+                  <div class="area-status-item">
+                    <span class="area-name">消防设施</span>
+                    <span class="area-status status-warning">灭火器压力低</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        
+        <!-- 右侧面板 2：视频监控 -->
+        <div class="data-card data-card-2">
+          <div class="panel-header">
+            <h3>视频监控</h3>
+          </div>
+          <div class="panel-content">
+            <div class="video-grid">
+              <div class="video-item">
+                <div class="video-header">
+                  <span class="video-name">大门监控</span>
+                  <span class="video-status status-normal">正常</span>
+                </div>
+                <div class="video-placeholder">
+                  <img src="/src/assets/images/xunjian/1.png" alt="大门监控" class="video-image" />
+                </div>
+              </div>
+              <div class="video-item">
+                <div class="video-header">
+                  <span class="video-name">院内监控</span>
+                  <span class="video-status status-normal">正常</span>
+                </div>
+                <div class="video-placeholder">
+                  <img src="/src/assets/images/xunjian/2.png" alt="院内监控" class="video-image" />
+                </div>
+              </div>
+              <div class="video-item">
+                <div class="video-header">
+                  <span class="video-name">消防区</span>
+                  <span class="video-status status-warning">注意</span>
+                </div>
+                <div class="video-placeholder">
+                  <img src="/src/assets/images/xunjian/3.png" alt="消防区" class="video-image" />
+                </div>
+              </div>
+              <div class="video-item">
+                <div class="video-header">
+                  <span class="video-name">缆道区</span>
+                  <span class="video-status status-normal">正常</span>
+                </div>
+                <div class="video-placeholder">
+                  <img src="/src/assets/images/xunjian/4.png" alt="缆道区" class="video-image" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const showDetailModal = ref(false)
+</script>
+
+<style scoped>
+.patrol-view {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  gap: 20px;
+  padding: 0 20px;
+  justify-content: space-between;
+}
+
+/* 左侧面板 */
+.left-sidebar {
+  width: 350px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.left-container {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: 100%;
+  height: 100%;
+}
+
+/* 右侧面板 */
+.right-sidebar {
+  width: 350px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.right-container {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: 100%;
+  height: 100%;
+}
+
+/* 数据卡片样式 */
+.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);
+}
+
+.panel-header {
+  height: 50px;
+  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: 6px 20px 0;
+  cursor: pointer;
+}
+
+.panel-header h3 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: bold;
+  color: #e0fcff;
+  text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
+  padding-left: 20px;
+}
+
+.panel-content {
+  font-size: 14px;
+  line-height: 1.4;
+  width: 100%;
+  color: #ffffff;
+  padding: 15px;
+}
+
+.data-card-1 .panel-content {
+  padding: 10px 15px 15px;
+  display: flex;
+  flex-direction: column;
+}
+
+.station-intro {
+  min-height: 500px;
+}
+
+.station-intro .panel-content {
+  padding: 15px;
+}
+
+.video-monitor {
+  min-height: 500px;
+}
+
+/* 设备状态区域 */
+.device-status-section {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+/* 顶部状态指标 */
+.top-status-indicators {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  padding: 10px;
+  background: linear-gradient(135deg, rgba(0, 20, 40, 0.6), rgba(0, 10, 20, 0.6));
+  border: 1px solid rgba(0, 212, 255, 0.3);
+  border-radius: 8px;
+}
+
+/* 状态圆圈 */
+.status-circle {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  border: 2px solid #00d5ff;
+  background: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 0 15px rgba(0, 212, 255, 0.5);
+}
+
+.circle-inner {
+  text-align: center;
+  color: #00d5ff;
+}
+
+.circle-percentage {
+  font-size: 14px;
+  font-weight: bold;
+  text-shadow: 0 0 5px rgba(0, 212, 255, 0.8);
+}
+
+.circle-label {
+  font-size: 10px;
+  margin-top: 1px;
+}
+
+/* 状态图标项 */
+.status-icon-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 3px;
+  flex: 1;
+}
+
+.status-icon {
+  font-size: 20px;
+}
+
+.status-text {
+  color: #00d5ff;
+  font-size: 12px;
+  font-weight: bold;
+  text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
+}
+
+.status-state {
+  color: #00ff88;
+  font-size: 11px;
+  text-shadow: 0 0 5px rgba(0, 255, 136, 0.5);
+}
+
+/* 详细信息 */
+.device-details {
+  padding: 12px;
+  background: linear-gradient(135deg, rgba(0, 20, 40, 0.6), rgba(0, 10, 20, 0.6));
+  border: 1px solid rgba(0, 212, 255, 0.3);
+  border-radius: 8px;
+}
+
+.detail-row {
+  display: flex;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  margin-bottom: 8px;
+}
+
+.detail-row:last-child {
+  margin-bottom: 0;
+}
+
+.detail-item {
+  flex: 1;
+  min-width: 45%;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.detail-label {
+  color: #00d5ff;
+  font-size: 12px;
+  font-weight: bold;
+  text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
+}
+
+.detail-value {
+  color: #ffffff;
+  font-size: 12px;
+  text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
+}
+
+/* 机器人状态容器 */
+.robot-status-container {
+  margin-top: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.robot-bg {
+  position: relative;
+  width: 100%;
+  height: 180px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  border-radius: 0;
+}
+
+.robot-image {
+  width: 200px;
+  height: 200px;
+  object-fit: contain;
+  opacity: 0.9;
+  z-index: 1;
+}
+
+/* 视角显示区域 */
+.view-display {
+  width: 100%;
+  height: 400px;
+  position: relative;
+  background: linear-gradient(135deg, rgba(0, 20, 40, 0.6), rgba(0, 10, 20, 0.6));
+  border: 1px solid rgba(0, 212, 255, 0.3);
+  border-radius: 8px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.view-image-wrapper {
+  flex: 1;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.view-image {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+
+/* 巡查路线卡片样式 */
+.route-card {
+  margin: 10px;
+  padding: 10px;
+  background: linear-gradient(135deg, rgba(0, 20, 40, 0.6), rgba(0, 10, 20, 0.6));
+  border: 1px solid rgba(0, 212, 255, 0.3);
+  border-radius: 6px;
+  width: calc(100% - 20px);
+}
+
+.route-header {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 8px;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.route-info-item {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 13px;
+}
+
+.route-info-label {
+  font-weight: bold;
+  color: #00d5ff;
+  text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
+}
+
+.route-info-value {
+  color: #ffffff;
+  text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
+}
+
+.route-path {
+  margin-top: 8px;
+  padding-top: 8px;
+  border-top: 1px solid rgba(0, 212, 255, 0.3);
+}
+
+.route-path-label {
+  font-weight: bold;
+  color: #00d5ff;
+  text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
+  display: block;
+  margin-bottom: 5px;
+}
+
+.route-path-value {
+  color: #ffffff;
+  font-size: 14px;
+  font-weight: bold;
+  text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
+  display: block;
+}
+
+/* 巡检概况样式 */
+.inspection-overview {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.overview-stats {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 10px;
+  margin-bottom: 10px;
+}
+
+.stat-item {
+  background: linear-gradient(135deg, rgba(0, 20, 40, 0.6), rgba(0, 10, 20, 0.6));
+  border: 1px solid rgba(0, 212, 255, 0.3);
+  border-radius: 6px;
+  padding: 10px;
+  text-align: center;
+}
+
+.stat-label {
+  font-size: 12px;
+  color: #00d5ff;
+  margin-bottom: 5px;
+  text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
+}
+
+.stat-value {
+  font-size: 18px;
+  font-weight: bold;
+  text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
+}
+
+.key-areas-status h4,
+.recognition-results h4,
+.latest-alerts h4 {
+  color: #00d5ff;
+  font-size: 14px;
+  margin: 0 0 10px 0;
+  text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.key-areas-status h4::before,
+.recognition-results h4::before,
+.latest-alerts h4::before {
+  content: '●';
+  font-size: 10px;
+  color: #00d5ff;
+  animation: pulse 2s infinite;
+}
+
+.area-status-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.area-status-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px;
+  background: linear-gradient(135deg, rgba(0, 20, 40, 0.6), rgba(0, 10, 20, 0.6));
+  border: 1px solid rgba(0, 212, 255, 0.3);
+  border-radius: 4px;
+}
+
+.area-name {
+  color: #ffffff;
+  font-size: 13px;
+}
+
+.area-status {
+  font-size: 13px;
+  font-weight: bold;
+}
+
+/* 环境卡片样式 */
+.environment-cards {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+
+.env-card {
+  flex: 1;
+  background: linear-gradient(135deg, rgba(0, 20, 40, 0.6), rgba(0, 10, 20, 0.6));
+  border: 1px solid rgba(0, 212, 255, 0.3);
+  border-radius: 6px;
+  padding: 10px;
+  text-align: center;
+}
+
+.env-label {
+  font-size: 12px;
+  color: #00d5ff;
+  margin-bottom: 5px;
+  text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
+}
+
+.env-value {
+  font-size: 18px;
+  font-weight: bold;
+  color: #00ff88;
+  text-shadow: 0 0 8px rgba(0, 255, 136, 0.8);
+}
+
+/* 告警容器样式 */
+.alerts-container {
+  margin-top: 10px;
+}
+
+.alerts-scroll {
+  max-height: 120px;
+  overflow-y: auto;
+  padding-right: 5px;
+}
+
+.alerts-scroll::-webkit-scrollbar {
+  width: 6px;
+}
+
+.alerts-scroll::-webkit-scrollbar-track {
+  background: rgba(0, 20, 40, 0.3);
+  border-radius: 3px;
+}
+
+.alerts-scroll::-webkit-scrollbar-thumb {
+  background: rgba(0, 212, 255, 0.5);
+  border-radius: 3px;
+}
+
+.alerts-scroll::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 212, 255, 0.8);
+}
+
+/* 实时识别与告警样式 */
+.real-time-results {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.recognition-results {
+  margin-bottom: 10px;
+}
+
+.result-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px;
+  background: linear-gradient(135deg, rgba(0, 20, 40, 0.6), rgba(0, 10, 20, 0.6));
+  border: 1px solid rgba(0, 212, 255, 0.3);
+  border-radius: 4px;
+  margin-bottom: 8px;
+}
+
+.result-label {
+  color: #00d5ff;
+  font-size: 13px;
+  font-weight: bold;
+  text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
+}
+
+.result-value {
+  color: #ffffff;
+  font-size: 13px;
+}
+
+.latest-alerts {
+  margin-top: 10px;
+}
+
+.alert-item {
+  background: linear-gradient(135deg, rgba(40, 0, 0, 0.6), rgba(20, 0, 0, 0.6));
+  border: 1px solid rgba(255, 68, 68, 0.3);
+  border-radius: 6px;
+  padding: 10px;
+  margin-bottom: 10px;
+  border-left: 3px solid #ff4444;
+}
+
+.alert-time {
+  color: #ff4444;
+  font-size: 12px;
+  font-weight: bold;
+  margin-bottom: 5px;
+  text-shadow: 0 0 5px rgba(255, 68, 68, 0.5);
+}
+
+.alert-content {
+  color: #ffffff;
+  font-size: 13px;
+  line-height: 1.4;
+}
+
+/* 状态颜色编码 */
+.status-normal {
+  color: #00ff88;
+  text-shadow: 0 0 5px rgba(0, 255, 136, 0.5);
+}
+
+.status-warning {
+  color: #ffaa00;
+  text-shadow: 0 0 5px rgba(255, 170, 0, 0.5);
+}
+
+.status-abnormal {
+  color: #ff4444;
+  text-shadow: 0 0 5px rgba(255, 68, 68, 0.5);
+}
+
+/* 动画 */
+@keyframes pulse {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.5;
+    transform: scale(1.1);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* 视频监控 */
+.video-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(2, 1fr);
+  gap: 10px;
+  width: 100%;
+  height: 300px;
+}
+
+.video-item {
+  background: linear-gradient(135deg, rgba(0, 20, 40, 0.6), rgba(0, 10, 20, 0.6));
+  border: 1px solid rgba(0, 212, 255, 0.3);
+  border-radius: 4px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.video-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 12px;
+  background: rgba(0, 212, 255, 0.1);
+  height: 30px;
+  flex-shrink: 0;
+}
+
+.video-name {
+  color: #00d5ff;
+  font-size: 12px;
+  font-weight: bold;
+  text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
+}
+
+.video-status {
+  color: #ffffff;
+  font-size: 11px;
+  text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
+}
+
+.video-placeholder {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 10, 20, 0.8);
+  overflow: hidden;
+}
+
+.video-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+</style>

src/views/WaterCultureView.vue

@@ -8,6 +8,13 @@
       <div class="top-title"></div>
       <div class="system-title">数字孪生黑林小流域</div>
       
+      <!-- 顶部功能按钮 -->
+      <div class="top-function-buttons">
+        <div class="function-btn" @click="goToPatrol">巡查</div>
+        <div class="function-btn" @click="goToInspection">巡检</div>
+        <div class="function-btn" @click="goToMeasurement">巡测</div>
+      </div>
+      
       <!-- 顶部按钮 -->
       <div class="sub-title left-1" @click="goBack">
         首页
@@ -24,238 +31,12 @@
       
       <!-- 主要内容区域 -->
       <div class="main-content">
-        <!-- 左侧面板区域 -->
-        <div class="left-sidebar">
-          <!-- 左侧数据框容器 -->
-          <div class="left-container">
-            <!-- 左侧面板1：设备状态 -->
-            <div class="data-card station-intro">
-              <div class="panel-header">
-                <h3>设备状态</h3>
-                <span class="more-btn" @click="showDetailModal = true">更多</span>
-              </div>
-              <div class="panel-content">
-                <div class="device-status-section">
-                  <!-- 顶部状态指标 -->
-                  <div class="top-status-indicators">
-                    <div class="status-circle">
-                      <div class="circle-inner">
-                        <div class="circle-percentage">100%</div>
-                        <div class="circle-label">回传</div>
-                      </div>
-                    </div>
-                    <div class="status-icon-item">
-                      <div class="status-icon">🤖</div>
-                      <div class="status-text">机器人</div>
-                      <div class="status-state">工作中</div>
-                    </div>
-                    <div class="status-icon-item">
-                      <div class="status-icon">🏢</div>
-                      <div class="status-text">基站</div>
-                      <div class="status-state">运行中</div>
-                    </div>
-                  </div>
-                  
-                  <!-- 详细信息 -->
-                  <div class="device-details">
-                    <div class="detail-row">
-                      <div class="detail-item">
-                        <span class="detail-label">名称:</span>
-                        <span class="detail-value">巡检机器人</span>
-                      </div>
-                      <div class="detail-item">
-                        <span class="detail-label">类型:</span>
-                        <span class="detail-value">智能巡检型</span>
-                      </div>
-                    </div>
-                    <div class="detail-row">
-                      <div class="detail-item">
-                        <span class="detail-label">空调:</span>
-                        <span class="detail-value">制冷</span>
-                      </div>
-                      <div class="detail-item">
-                        <span class="detail-label">网速:</span>
-                        <span class="detail-value">513.8 kb/s</span>
-                      </div>
-                    </div>
-                    <div class="detail-row">
-                      <div class="detail-item">
-                        <span class="detail-label">电池:</span>
-                        <span class="detail-value">91%</span>
-                      </div>
-                      <div class="detail-item">
-                        <span class="detail-label">卫星:</span>
-                        <span class="detail-value">6</span>
-                      </div>
-                    </div>
-                  </div>
-                  
-                  <!-- 机器人图片 -->
-                  <div class="robot-status-container">
-                    <div class="robot-bg">
-                      <img src="/src/assets/images/Heilin/机器人.png" alt="巡检机器人" class="robot-image" />
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            
-            <!-- 左侧面板 2：视觉巡查 -->
-            <div class="data-card video-monitor">
-              <div class="panel-header">
-                <h3>视觉巡查</h3>
-              </div>
-              <div class="panel-content">
-                <!-- 巡查视角选择 -->
-                <div class="view-buttons">
-                  <div class="sub-title view-btn" @click="selectView('map')">
-                    地图
-                  </div>
-                  <div class="sub-title view-btn" @click="selectView('robot')">
-                    机器人
-                  </div>
-                </div>
-                
-                <!-- 视角显示区域 -->
-                <div class="view-display">
-                  <div class="view-image-wrapper">
-                    <img v-if="selectedView === 'map'" src="/src/assets/images/Heilin/导航.png" alt="地图视角" class="view-image" />
-                    <img v-else-if="selectedView === 'robot'" src="/src/assets/images/Heilin/机器人视角.png" alt="机器人视角" class="view-image" />
-                    <div v-else class="view-placeholder">
-                      请选择巡查视角
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      
-      <!-- 中间空间 -->
-      <div class="center-space">
-        <div class="poi-container">
-          <div class="poi-item" style="left: 512px; top: 704px;">
-            <div class="poi-label">巡检机器人</div>
-            <img src="/src/assets/images/Heilin/POI.png" alt="POI图标" class="poi-icon" />
-          </div>
-        </div>
+        <!-- 动态加载不同的视图组件 -->
+        <InspectionView v-if="currentMode === 'inspection'" />
+        <PatrolView v-else-if="currentMode === 'patrol'" />
+        <MeasurementView v-else-if="currentMode === 'measurement'" />
+        <InspectionView v-else />
       </div>
-      
-      <!-- 右侧面板区域 -->
-      <div class="right-sidebar">
-        <!-- 右侧数据框容器 -->
-        <div class="right-container">
-          <!-- 右侧面板 1：任务详情 -->
-          <div class="data-card data-card-1">
-            <div class="panel-header">
-              <h3>任务详情</h3>
-            </div>
-            <div class="panel-content">
-              <div class="task-detail-container">
-                <!-- 左侧：图标和文字 -->
-                <div class="task-detail-left">
-                  <div class="task-status">执行中..</div>
-                  <div class="task-icon">
-                    <img src="/src/assets/images/Heilin/icon/cap/缆道.png" alt="缆道图标" />
-                  </div>
-                  <div class="task-time">开始时间：2026-03-11 10:00</div>
-                  <div class="task-name">缆道巡检任务</div>
-                </div>
-                <!-- 右侧：仪表盘 -->
-                <div class="task-detail-right">
-                  <div id="taskGauge" class="gauge-container"></div>
-                  <div class="task-location">当前位置-水位自己台</div>
-                </div>
-              </div>
-              
-              <!-- 历史任务表格 -->
-                  <div class="history-table-header">
-                    <div class="history-table-col history-id-col">任务编号</div>
-                    <div class="history-table-col history-area-col">巡检区域</div>
-                    <div class="history-table-col history-time-col">执行时间</div>
-                    <div class="history-table-col history-status-col">完成状态</div>
-                  </div>
-              <div class="history-table-container">
-                <div class="history-table">
-                  <div class="history-table-body">
-                    <div class="history-table-row">
-                      <div class="history-table-col history-id-col">T20260310001</div>
-                      <div class="history-table-col history-area-col">全部区域</div>
-                      <div class="history-table-col history-time-col">2026-03-10 14:00</div>
-                      <div class="history-table-col history-status-col">已完成</div>
-                    </div>
-                    <div class="history-table-row">
-                      <div class="history-table-col history-id-col">T20260310002</div>
-                      <div class="history-table-col history-area-col">测验设备区</div>
-                      <div class="history-table-col history-time-col">2026-03-10 09:30</div>
-                      <div class="history-table-col history-status-col">已完成</div>
-                    </div>
-                    <div class="history-table-row">
-                      <div class="history-table-col history-id-col">T20260309001</div>
-                      <div class="history-table-col history-area-col">1号监测断面</div>
-                      <div class="history-table-col history-time-col">2026-03-09 16:00</div>
-                      <div class="history-table-col history-status-col">已完成</div>
-                    </div>
-                    <div class="history-table-row">
-                      <div class="history-table-col history-id-col">T20260308001</div>
-                      <div class="history-table-col history-area-col">汇水区</div>
-                      <div class="history-table-col history-time-col">2026-03-08 11:00</div>
-                      <div class="history-table-col history-status-col">已完成</div>
-                    </div>
-                    <div class="history-table-row">
-                      <div class="history-table-col history-id-col">T20260307001</div>
-                      <div class="history-table-col history-area-col">全部区域</div>
-                      <div class="history-table-col history-time-col">2026-03-07 15:30</div>
-                      <div class="history-table-col history-status-col">已完成</div>
-                    </div>
-                    <div class="history-table-row">
-                      <div class="history-table-col history-id-col">T20260306001</div>
-                      <div class="history-table-col history-area-col">测验设备区</div>
-                      <div class="history-table-col history-time-col">2026-03-06 10:00</div>
-                      <div class="history-table-col history-status-col">已完成</div>
-                    </div>
-                    <div class="history-table-row">
-                      <div class="history-table-col history-id-col">T20260305001</div>
-                      <div class="history-table-col history-area-col">1号监测断面</div>
-                      <div class="history-table-col history-time-col">2026-03-05 13:00</div>
-                      <div class="history-table-col history-status-col">已完成</div>
-                    </div>
-                    <div class="history-table-row">
-                      <div class="history-table-col history-id-col">T20260304001</div>
-                      <div class="history-table-col history-area-col">汇水区</div>
-                      <div class="history-table-col history-time-col">2026-03-04 09:00</div>
-                      <div class="history-table-col history-status-col">已完成</div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          
-          <!-- 右侧面板 2：测流结果 -->
-          <div class="data-card data-card-2">
-            <div class="panel-header">
-              <h3>测流结果</h3>
-            </div>
-            <div class="panel-content">
-              <!-- 任务选择 -->
-              <div class="task-selection">
-                <select v-model="selectedTask" class="task-select" @change="updateFlowChart">
-                  <option value="task1">任务1 - 2026-03-11 08:00</option>
-                  <option value="task2">任务2 - 2026-03-11 10:30</option>
-                  <option value="task3">任务3 - 2026-03-11 14:00</option>
-                </select>
-              </div>
-              
-              <!-- 测流成果图表 -->
-              <div class="flow-chart-container">
-                <div ref="flowChart" class="flow-chart"></div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     
     <!-- 渐变装饰层（四周暗角） -->
     <GradientOverlay />
@@ -357,34 +138,18 @@
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted } from 'vue'
+import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import GradientOverlay from '../components/gradient-overlay.vue'
-import * as echarts from 'echarts'
+import InspectionView from './InspectionView.vue'
+import PatrolView from './PatrolView.vue'
+import MeasurementView from './MeasurementView.vue'
 
 const router = useRouter()
 const showDetailModal = ref(false)
 
-// 视觉巡查相关变量
-const selectedView = ref('robot')
-const selectView = (view) => {
-  selectedView.value = view
-}
-
-// 巡检任务相关变量
-const selectedRoute = ref('route1')
-const taskArea = ref('all')
-const taskFrequency = ref('once')
-const taskItems = ref({
-  camera: true,
-  flow: true,
-  water: true
-})
-
-// 测流结果相关变量
-const selectedTask = ref('task1')
-const flowChart = ref(null)
-let flowChartInstance = null
+// 模式切换相关变量
+const currentMode = ref('inspection') // default, patrol, inspection, measurement
 
 const goBack = () => {
   router.push('/')
@@ -402,271 +167,20 @@ const goToHeilinStation = () => {
   router.push('/heilin-station')
 }
 
-const closeModal = () => {
-  showDetailModal.value = false
+const goToPatrol = () => {
+  currentMode.value = 'patrol'
 }
 
-const issueTask = () => {
-  // 这里可以添加任务下达的逻辑
-  console.log('下达任务:', {
-    area: taskArea.value,
-    frequency: taskFrequency.value,
-    items: taskItems.value
-  })
-  // 模拟任务下达成功
-  alert('任务下达成功！')
+const goToInspection = () => {
+  currentMode.value = 'inspection'
 }
 
-// 任务选择变化时更新图表
-const updateFlowChart = () => {
-  if (flowChartInstance) {
-    const option = getFlowChartOption(selectedTask.value)
-    flowChartInstance.setOption(option)
-  }
-}
-
-// 获取测流图表配置
-const getFlowChartOption = (taskId) => {
-  // 不同任务的流量数据（虚构的波动较大的数据）
-  const flowData = {
-    task1: [120, 190, 300, 250, 400, 350, 280, 420, 380, 500, 450, 320],
-    task2: [80, 200, 150, 300, 220, 400, 300, 250, 350, 280, 420, 380],
-    task3: [150, 250, 200, 350, 280, 450, 320, 300, 400, 350, 480, 420]
-  }
-  
-  return {
-    tooltip: {
-      trigger: 'axis',
-      axisPointer: {
-        type: 'cross',
-        label: {
-          backgroundColor: '#6a7985'
-        }
-      }
-    },
-    grid: {
-      left: '3%',
-      right: '4%',
-      bottom: '3%',
-      containLabel: true
-    },
-    xAxis: [
-      {
-        type: 'category',
-        boundaryGap: false,
-        data: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00'],
-        axisLine: {
-          lineStyle: {
-            color: 'rgba(0, 212, 255, 0.6)'
-          }
-        },
-        axisLabel: {
-          color: '#ffffff'
-        }
-      }
-    ],
-    yAxis: [
-      {
-        type: 'value',
-        name: '流量 (m³/s)',
-        nameTextStyle: {
-          color: '#00d5ff'
-        },
-        axisLine: {
-          lineStyle: {
-            color: 'rgba(0, 212, 255, 0.6)'
-          }
-        },
-        axisLabel: {
-          color: '#ffffff'
-        },
-        splitLine: {
-          lineStyle: {
-            color: 'rgba(0, 212, 255, 0.2)'
-          }
-        }
-      }
-    ],
-    series: [
-      {
-        name: '流量',
-        type: 'line',
-        stack: 'Total',
-        areaStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: 'rgba(0, 212, 255, 0.5)' },
-            { offset: 1, color: 'rgba(0, 212, 255, 0.1)' }
-          ])
-        },
-        emphasis: {
-          focus: 'series'
-        },
-        lineStyle: {
-          color: '#00d5ff',
-          width: 3,
-          shadowColor: 'rgba(0, 212, 255, 0.5)',
-          shadowBlur: 10
-        },
-        itemStyle: {
-          color: '#00d5ff',
-          borderColor: '#ffffff',
-          borderWidth: 2
-        },
-        data: flowData[taskId]
-      }
-    ]
-  }
+const goToMeasurement = () => {
+  currentMode.value = 'measurement'
 }
 
-// 初始化测流图表
-const initFlowChart = () => {
-  if (flowChart.value) {
-    // 清理旧实例
-    if (flowChartInstance) {
-      flowChartInstance.dispose()
-      flowChartInstance = null
-    }
-    
-    // 初始化ECharts实例
-    flowChartInstance = echarts.init(flowChart.value)
-    
-    // 设置图表选项
-    const option = getFlowChartOption(selectedTask.value)
-    flowChartInstance.setOption(option)
-    
-    // 监听窗口大小变化
-    window.addEventListener('resize', () => {
-      if (flowChartInstance) {
-        flowChartInstance.resize()
-      }
-    })
-  }
-}
-
-let taskGaugeChart = null
-
-onMounted(() => {
-  // 页面加载时的初始化逻辑
-  console.log('智能巡检页面加载完成')
-  
-  // 初始化仪表盘
-  initTaskGauge()
-  
-  // 初始化测流图表
-  setTimeout(() => {
-    initFlowChart()
-  }, 100)
-})
-
-onUnmounted(() => {
-  // 清理ECharts实例
-  if (taskGaugeChart) {
-    taskGaugeChart.dispose()
-    taskGaugeChart = null
-  }
-  
-  if (flowChartInstance) {
-    flowChartInstance.dispose()
-    flowChartInstance = null
-  }
-})
-
-const initTaskGauge = () => {
-  // 获取仪表盘容器
-  const gaugeContainer = document.getElementById('taskGauge')
-  if (gaugeContainer) {
-    console.log('Gauge container found:', gaugeContainer)
-    console.log('Container width:', gaugeContainer.clientWidth)
-    console.log('Container height:', gaugeContainer.clientHeight)
-    
-    // 确保容器有足够的高度
-    if (gaugeContainer.clientHeight === 0) {
-      gaugeContainer.style.height = '150px'
-      console.log('Set container height to 150px')
-    }
-    
-    // 清理旧实例
-    if (taskGaugeChart) {
-      taskGaugeChart.dispose()
-      taskGaugeChart = null
-    }
-    
-    // 初始化ECharts实例
-    taskGaugeChart = echarts.init(gaugeContainer)
-    console.log('ECharts instance initialized:', taskGaugeChart)
-    
-    // 配置仪表盘选项
-    const option = {
-      series: [
-        {
-          type: 'gauge',
-          startAngle: 180,
-          endAngle: 0,
-          pointer: {
-            show: true
-          },
-          progress: {
-            show: true,
-            overlap: false,
-            roundCap: true,
-            clip: false,
-            itemStyle: {
-              color: '#00d5ff'
-            }
-          },
-          axisLine: {
-            lineStyle: {
-              width: 10
-            }
-          },
-          splitLine: {
-            show: false
-          },
-          axisTick: {
-            show: false
-          },
-          axisLabel: {
-            show: false
-          },
-          detail: {
-            valueAnimation: true,
-            fontSize: 20,
-            offsetCenter: [0, '70%'],
-            color: '#00d5ff'
-          },
-          data: [
-            {
-              value: 75,
-              name: '任务进度',
-              title: {
-                show: true,
-                fontSize: 12,
-                offsetCenter: [0, '30%'],
-                color: '#ffffff'
-              }
-            }
-          ]
-        }
-      ]
-    }
-    
-    // 设置选项
-    taskGaugeChart.setOption(option)
-    console.log('Chart option set')
-    
-    // 立即调整图表大小
-    taskGaugeChart.resize()
-    console.log('Chart resized')
-    
-    // 监听窗口大小变化，调整图表大小
-    window.addEventListener('resize', () => {
-      if (taskGaugeChart) {
-        taskGaugeChart.resize()
-      }
-    })
-  } else {
-    console.error('Gauge container not found!')
-  }
+const closeModal = () => {
+  showDetailModal.value = false
 }
 </script>
 
@@ -737,6 +251,47 @@ const initTaskGauge = () => {
   pointer-events: none;
 }
 
+/* 顶部功能按钮 */
+.top-function-buttons {
+  position: absolute;
+  top: 90px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 30px;
+  z-index: 5;
+  align-items: center;
+  justify-content: center;
+}
+
+.function-btn {
+  width: 120px;
+  height: 50px;
+  background-image: url('/src/assets/images/顶部小标题.png');
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+  display: flex;
+  align-items: flex-start;
+  padding-top: 8px;
+  justify-content: center;
+  font-size: 16px;
+  font-weight: bold;
+  color: #e0fcff;
+  text-shadow: 0 0 5px rgba(0, 212, 255, 0.8);
+  cursor: pointer;
+  transition: transform 0.3s ease, opacity 0.3s ease;
+  padding: 8px 0 0 0;
+  margin: 0;
+  box-sizing: border-box;
+  text-align: center;
+}
+
+.function-btn:hover {
+  transform: scale(1.05);
+  opacity: 0.9;
+}
+
 /* 顶部按钮样式 */
 .sub-title {
   position: absolute;
@@ -802,7 +357,7 @@ const initTaskGauge = () => {
 .left-container {
   display: flex;
   flex-direction: column;
-  gap: 20px;
+  gap: 10px;
   width: 100%;
   height: 100%;
 }
@@ -812,13 +367,13 @@ const initTaskGauge = () => {
   width: 400px;
   display: flex;
   flex-direction: column;
-  gap: 20px;
+  gap: 10px;
 }
 
 .right-container {
   display: flex;
   flex-direction: column;
-  gap: 20px;
+  gap: 10px;
   width: 100%;
   height: 100%;
 }
@@ -884,7 +439,7 @@ const initTaskGauge = () => {
 .device-status-section {
   display: flex;
   flex-direction: column;
-  gap: 20px;
+  gap: 10px;
 }
 
 /* 顶部状态指标 */
@@ -1014,10 +569,8 @@ const initTaskGauge = () => {
 }
 
 .robot-image {
-  width: 200px;
-  height: 200px;
-  object-fit: contain;
-  opacity: 0.9;
+  width: 180px;
+  height: 180px;
   z-index: 1;
 }
 
@@ -1603,6 +1156,311 @@ const initTaskGauge = () => {
   background: rgba(0, 212, 255, 0.8);
 }
 
+/* 状态颜色编码 */
+.status-normal {
+  color: #00ff88;
+  text-shadow: 0 0 5px rgba(0, 255, 136, 0.5);
+}
+
+.status-warning {
+  color: #ffaa00;
+  text-shadow: 0 0 5px rgba(255, 170, 0, 0.5);
+}
+
+.status-abnormal {
+  color: #ff4444;
+  text-shadow: 0 0 5px rgba(255, 68, 68, 0.5);
+}
+
+/* 巡查路线信息样式 */
+.route-info {
+  margin-top: 10px;
+  padding: 10px;
+  background: linear-gradient(135deg, rgba(0, 20, 40, 0.6), rgba(0, 10, 20, 0.6));
+  border: 1px solid rgba(0, 212, 255, 0.3);
+  border-radius: 6px;
+}
+
+.route-item {
+  display: flex;
+  margin-bottom: 5px;
+  font-size: 14px;
+}
+
+.route-label {
+  font-weight: bold;
+  color: #00d5ff;
+  margin-right: 10px;
+  min-width: 40px;
+  text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
+}
+
+.route-value {
+  color: #ffffff;
+  flex: 1;
+  text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
+}
+
+/* 巡查路线卡片样式 */
+.route-card {
+  margin-top: 10px;
+  padding: 10px;
+  background: linear-gradient(135deg, rgba(0, 20, 40, 0.6), rgba(0, 10, 20, 0.6));
+  border: 1px solid rgba(0, 212, 255, 0.3);
+  border-radius: 6px;
+  width: 100%;
+}
+
+.route-header {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 8px;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.route-info-item {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 13px;
+}
+
+.route-info-label {
+  font-weight: bold;
+  color: #00d5ff;
+  text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
+}
+
+.route-info-value {
+  color: #ffffff;
+  text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
+}
+
+.route-path {
+  margin-top: 8px;
+  padding-top: 8px;
+  border-top: 1px solid rgba(0, 212, 255, 0.3);
+}
+
+.route-path-label {
+  font-weight: bold;
+  color: #00d5ff;
+  text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
+  display: block;
+  margin-bottom: 5px;
+}
+
+.route-path-value {
+  color: #ffffff;
+  font-size: 14px;
+  font-weight: bold;
+  text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
+  display: block;
+}
+
+/* 环境卡片样式 */
+.environment-cards {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+
+.env-card {
+  flex: 1;
+  background: linear-gradient(135deg, rgba(0, 20, 40, 0.6), rgba(0, 10, 20, 0.6));
+  border: 1px solid rgba(0, 212, 255, 0.3);
+  border-radius: 6px;
+  padding: 10px;
+  text-align: center;
+}
+
+.env-label {
+  font-size: 12px;
+  color: #00d5ff;
+  margin-bottom: 5px;
+  text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
+}
+
+.env-value {
+  font-size: 18px;
+  font-weight: bold;
+  color: #00ff88;
+  text-shadow: 0 0 8px rgba(0, 255, 136, 0.8);
+}
+
+/* 告警容器样式 */
+.alerts-container {
+  margin-top: 10px;
+}
+
+.alerts-scroll {
+  max-height: 120px;
+  overflow-y: auto;
+  padding-right: 5px;
+}
+
+.alerts-scroll::-webkit-scrollbar {
+  width: 6px;
+}
+
+.alerts-scroll::-webkit-scrollbar-track {
+  background: rgba(0, 20, 40, 0.3);
+  border-radius: 3px;
+}
+
+.alerts-scroll::-webkit-scrollbar-thumb {
+  background: rgba(0, 212, 255, 0.5);
+  border-radius: 3px;
+}
+
+.alerts-scroll::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 212, 255, 0.8);
+}
+
+/* 巡检概况样式 */
+.inspection-overview {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.overview-stats {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 10px;
+  margin-bottom: 10px;
+}
+
+.stat-item {
+  background: linear-gradient(135deg, rgba(0, 20, 40, 0.6), rgba(0, 10, 20, 0.6));
+  border: 1px solid rgba(0, 212, 255, 0.3);
+  border-radius: 6px;
+  padding: 10px;
+  text-align: center;
+}
+
+.stat-label {
+  font-size: 12px;
+  color: #00d5ff;
+  margin-bottom: 5px;
+  text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
+}
+
+.stat-value {
+  font-size: 18px;
+  font-weight: bold;
+  text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
+}
+
+.key-areas-status h4,
+.recognition-results h4,
+.latest-alerts h4 {
+  color: #00d5ff;
+  font-size: 14px;
+  margin: 0 0 10px 0;
+  text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.key-areas-status h4::before,
+.recognition-results h4::before,
+.latest-alerts h4::before {
+  content: '●';
+  font-size: 10px;
+  color: #00d5ff;
+  animation: pulse 2s infinite;
+}
+
+.area-status-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.area-status-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px;
+  background: linear-gradient(135deg, rgba(0, 20, 40, 0.6), rgba(0, 10, 20, 0.6));
+  border: 1px solid rgba(0, 212, 255, 0.3);
+  border-radius: 4px;
+}
+
+.area-name {
+  color: #ffffff;
+  font-size: 13px;
+}
+
+.area-status {
+  font-size: 13px;
+  font-weight: bold;
+}
+
+/* 实时识别与告警样式 */
+.real-time-results {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.recognition-results {
+  margin-bottom: 10px;
+}
+
+.result-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px;
+  background: linear-gradient(135deg, rgba(0, 20, 40, 0.6), rgba(0, 10, 20, 0.6));
+  border: 1px solid rgba(0, 212, 255, 0.3);
+  border-radius: 4px;
+  margin-bottom: 8px;
+}
+
+.result-label {
+  color: #00d5ff;
+  font-size: 13px;
+  font-weight: bold;
+  text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
+}
+
+.result-value {
+  color: #ffffff;
+  font-size: 13px;
+}
+
+.latest-alerts {
+  margin-top: 10px;
+}
+
+.alert-item {
+  background: linear-gradient(135deg, rgba(40, 0, 0, 0.6), rgba(20, 0, 0, 0.6));
+  border: 1px solid rgba(255, 68, 68, 0.3);
+  border-radius: 6px;
+  padding: 10px;
+  margin-bottom: 10px;
+  border-left: 3px solid #ff4444;
+}
+
+.alert-time {
+  color: #ff4444;
+  font-size: 12px;
+  font-weight: bold;
+  margin-bottom: 5px;
+  text-shadow: 0 0 5px rgba(255, 68, 68, 0.5);
+}
+
+.alert-content {
+  color: #ffffff;
+  font-size: 13px;
+  line-height: 1.4;
+}
+
 /* 中间空间 */
 .center-space {
   flex: 1;