修改机器人页面

package-lock.json

@@ -12,6 +12,7 @@
         "axios": "^1.13.6",
         "cesium": "^1.139.1",
         "echarts": "^6.0.0",
+        "element-plus": "^2.13.5",
         "vue": "^3.5.25",
         "vue-router": "^5.0.3"
       },
@@ -134,6 +135,24 @@
         "node": ">=20.19.0"
       }
     },
+    "node_modules/@ctrl/tinycolor": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmmirror.com/@ctrl/tinycolor/-/tinycolor-4.2.0.tgz",
+      "integrity": "sha512-kzyuwOAQnXJNLS9PSyrk0CWk35nWJW/zl/6KvnTBMFK65gm7U1/Z5BqjxeapjZCIhQcM/DsrEmcbRwDyXyXK4A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@element-plus/icons-vue": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmmirror.com/@element-plus/icons-vue/-/icons-vue-2.3.2.tgz",
+      "integrity": "sha512-OzIuTaIfC8QXEPmJvB4Y4kw34rSXdCJzxcD1kFStBvr8bK6X1zQAYDo0CNMjojnfTqRQCJ0I7prlErcoRiET2A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.27.3",
       "resolved": "https://registry.npmmirror.com/@esbuild/aix-ppc64/-/aix-ppc64-0.27.3.tgz",
@@ -576,6 +595,31 @@
         "node": ">=18"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.7.5",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/core/-/core-1.7.5.tgz",
+      "integrity": "sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.11"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.7.6",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/dom/-/dom-1.7.6.tgz",
+      "integrity": "sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.7.5",
+        "@floating-ui/utils": "^0.2.11"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.11",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/utils/-/utils-0.2.11.tgz",
+      "integrity": "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==",
+      "license": "MIT"
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.13",
       "resolved": "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
@@ -621,6 +665,17 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@popperjs/core": {
+      "name": "@sxzz/popperjs-es",
+      "version": "2.11.8",
+      "resolved": "https://registry.npmmirror.com/@sxzz/popperjs-es/-/popperjs-es-2.11.8.tgz",
+      "integrity": "sha512-wOwESXvvED3S8xBmcPWHs2dUuzrE4XiZeFu7e1hROIJkm02a49N120pmOXxY33sBb6hArItm5W5tcg1cBtV+HQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@protobufjs/aspromise": {
       "version": "1.1.2",
       "resolved": "https://registry.npmmirror.com/@protobufjs/aspromise/-/aspromise-1.1.2.tgz",
@@ -1092,6 +1147,21 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/lodash": {
+      "version": "4.17.24",
+      "resolved": "https://registry.npmmirror.com/@types/lodash/-/lodash-4.17.24.tgz",
+      "integrity": "sha512-gIW7lQLZbue7lRSWEFql49QJJWThrTFFeIMJdp3eH4tKoxm1OvEPg02rm4wCCSHS0cL3/Fizimb35b7k8atwsQ==",
+      "license": "MIT"
+    },
+    "node_modules/@types/lodash-es": {
+      "version": "4.17.12",
+      "resolved": "https://registry.npmmirror.com/@types/lodash-es/-/lodash-es-4.17.12.tgz",
+      "integrity": "sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/lodash": "*"
+      }
+    },
     "node_modules/@types/node": {
       "version": "25.3.5",
       "resolved": "https://registry.npmmirror.com/@types/node/-/node-25.3.5.tgz",
@@ -1108,6 +1178,12 @@
       "license": "MIT",
       "optional": true
     },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.20",
+      "resolved": "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
+      "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==",
+      "license": "MIT"
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "6.0.4",
       "resolved": "https://registry.npmmirror.com/@vitejs/plugin-vue/-/plugin-vue-6.0.4.tgz",
@@ -1279,6 +1355,42 @@
       "integrity": "sha512-w7SR0A5zyRByL9XUkCfdLs7t9XOHUyJ67qPGQjOou3p6GvBeBW+AVjUUmlxtZ4PIYaRvE+1LmK44O4uajlZwcg==",
       "license": "MIT"
     },
+    "node_modules/@vueuse/core": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-12.0.0.tgz",
+      "integrity": "sha512-C12RukhXiJCbx4MGhjmd/gH52TjJsc3G0E0kQj/kb19H3Nt6n1CA4DRWuTdWWcaFRdlTe0npWDS942mvacvNBw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.20",
+        "@vueuse/metadata": "12.0.0",
+        "@vueuse/shared": "12.0.0",
+        "vue": "^3.5.13"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-12.0.0.tgz",
+      "integrity": "sha512-Yzimd1D3sjxTDOlF05HekU5aSGdKjxhuhRFHA7gDWLn57PRbBIh+SF5NmjhJ0WRgF3my7T8LBucyxdFJjIfRJQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmmirror.com/@vueuse/shared/-/shared-12.0.0.tgz",
+      "integrity": "sha512-3i6qtcq2PIio5i/vVYidkkcgvmTjCqrf26u+Fd4LhnbBmIT6FN8y6q/GJERp8lfcB9zVEfjdV0Br0443qZuJpw==",
+      "license": "MIT",
+      "dependencies": {
+        "vue": "^3.5.13"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/@zip.js/zip.js": {
       "version": "2.8.22",
       "resolved": "https://registry.npmmirror.com/@zip.js/zip.js/-/zip.js-2.8.22.tgz",
@@ -1334,6 +1446,12 @@
         "url": "https://github.com/sponsors/sxzz"
       }
     },
+    "node_modules/async-validator": {
+      "version": "4.2.5",
+      "resolved": "https://registry.npmmirror.com/async-validator/-/async-validator-4.2.5.tgz",
+      "integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==",
+      "license": "MIT"
+    },
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
@@ -1470,6 +1588,12 @@
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
       "license": "MIT"
     },
+    "node_modules/dayjs": {
+      "version": "1.11.19",
+      "resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.19.tgz",
+      "integrity": "sha512-t5EcLVS6QPBNqM2z8fakk/NKel+Xzshgt8FFKAn+qwlD1pzZWxh0nVCrvFK7ZDb6XucZeF9z8C7CBWTRIVApAw==",
+      "license": "MIT"
+    },
     "node_modules/debug": {
       "version": "2.6.9",
       "resolved": "https://registry.npmmirror.com/debug/-/debug-2.6.9.tgz",
@@ -1578,6 +1702,31 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/element-plus": {
+      "version": "2.13.5",
+      "resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.13.5.tgz",
+      "integrity": "sha512-dmY24fhSREfZN/PuUt0YZigMso7wWzl+B5o+YKNN15kQIn/0hzamsPU+ebj9SES0IbUqsLX1wkrzYmzU8VrVOQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@ctrl/tinycolor": "^4.2.0",
+        "@element-plus/icons-vue": "^2.3.2",
+        "@floating-ui/dom": "^1.0.1",
+        "@popperjs/core": "npm:@sxzz/popperjs-es@^2.11.7",
+        "@types/lodash": "^4.17.20",
+        "@types/lodash-es": "^4.17.12",
+        "@vueuse/core": "12.0.0",
+        "async-validator": "^4.2.5",
+        "dayjs": "^1.11.19",
+        "lodash": "^4.17.23",
+        "lodash-es": "^4.17.23",
+        "lodash-unified": "^1.0.3",
+        "memoize-one": "^6.0.0",
+        "normalize-wheel-es": "^1.2.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.3.0"
+      }
+    },
     "node_modules/encodeurl": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/encodeurl/-/encodeurl-2.0.0.tgz",
@@ -2045,6 +2194,29 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
+    "node_modules/lodash": {
+      "version": "4.17.23",
+      "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.23.tgz",
+      "integrity": "sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w==",
+      "license": "MIT"
+    },
+    "node_modules/lodash-es": {
+      "version": "4.17.23",
+      "resolved": "https://registry.npmmirror.com/lodash-es/-/lodash-es-4.17.23.tgz",
+      "integrity": "sha512-kVI48u3PZr38HdYz98UmfPnXl2DXrpdctLrFLCd3kOx1xUkOmpFPx7gCWWM5MPkL/fD8zb+Ph0QzjGFs4+hHWg==",
+      "license": "MIT"
+    },
+    "node_modules/lodash-unified": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/lodash-unified/-/lodash-unified-1.0.3.tgz",
+      "integrity": "sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/lodash-es": "*",
+        "lodash": "*",
+        "lodash-es": "*"
+      }
+    },
     "node_modules/long": {
       "version": "5.3.2",
       "resolved": "https://registry.npmmirror.com/long/-/long-5.3.2.tgz",
@@ -2084,6 +2256,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/memoize-one": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmmirror.com/memoize-one/-/memoize-one-6.0.0.tgz",
+      "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==",
+      "license": "MIT"
+    },
     "node_modules/mersenne-twister": {
       "version": "1.1.0",
       "resolved": "https://registry.npmmirror.com/mersenne-twister/-/mersenne-twister-1.1.0.tgz",
@@ -2190,6 +2368,12 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/normalize-wheel-es": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz",
+      "integrity": "sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/nosleep.js": {
       "version": "0.12.0",
       "resolved": "https://registry.npmmirror.com/nosleep.js/-/nosleep.js-0.12.0.tgz",

package.json

@@ -13,6 +13,7 @@
     "axios": "^1.13.6",
     "cesium": "^1.139.1",
     "echarts": "^6.0.0",
+    "element-plus": "^2.13.5",
     "vue": "^3.5.25",
     "vue-router": "^5.0.3"
   },

src/views/WaterCultureView.vue

@@ -118,10 +118,12 @@
                 
                 <!-- 视角显示区域 -->
                 <div class="view-display">
-                  <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 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>
@@ -165,95 +167,64 @@
                   <div class="task-location">当前位置-水位自己台</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="warning-section">
-                <h4>预警报警信息</h4>
-                <div class="warning-list">
-                  <div class="warning-item urgent">
-                    <div class="warning-id">预警编号：W20260311001</div>
-                    <div class="warning-info">
-                      <span>类型：流量异常</span>
-                      <span>位置：1号监测断面</span>
-                      <span>时间：2026-03-11 08:30</span>
-                      <span>等级：紧急</span>
-                    </div>
-                    <div class="warning-status">未处置</div>
-                  </div>
-                  <div class="warning-item normal">
-                    <div class="warning-id">预警编号：W20260311002</div>
-                    <div class="warning-info">
-                      <span>类型：传感器异常</span>
-                      <span>位置：测验设备区</span>
-                      <span>时间：2026-03-11 07:15</span>
-                      <span>等级：一般</span>
-                    </div>
-                    <div class="warning-status">已处置</div>
-                  </div>
-                </div>
-              </div>
               
-              <!-- 成果展示 -->
-              <div class="result-section" style="margin-top: 20px;">
-                <h4>成果展示</h4>
-                
-                <!-- 异常成果 -->
-                <div class="result-group">
-                  <h5>异常成果</h5>
-                  <div class="abnormal-list">
-                    <div class="abnormal-item">
-                      <div class="abnormal-id">异常编号：A20260311001</div>
-                      <div class="abnormal-info">
-                        <span>类型：流速传感器数据漂移</span>
-                        <span>位置：1号监测断面</span>
-                        <span>时间：2026-03-11 06:45</span>
-                      </div>
-                      <div class="abnormal-image">
-                        <img src="/src/assets/images/Heilin/图5.jpeg" alt="异常现场" class="abnormal-img" />
-                      </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>
-                
-                <!-- 数据成果 -->
-                <div class="result-group" style="margin-top: 15px;">
-                  <h5>数据成果</h5>
-                  <div class="data-result">
-                    <div class="data-item">
-                      <span class="data-label">实时瞬时流量：</span>
-                      <span class="data-value">0.28 m³/s</span>
+              <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="data-item">
-                      <span class="data-label">当日平均流量：</span>
-                      <span class="data-value">0.25 m³/s</span>
+                    <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="data-item">
-                      <span class="data-label">巡检周期流量汇总：</span>
-                      <span class="data-value">6.0 m³</span>
+                    <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="data-item">
-                      <span class="data-label">水位：</span>
-                      <span class="data-value">32.15 m</span>
+                    <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="data-item">
-                      <span class="data-label">pH值：</span>
-                      <span class="data-value normal">7.2（正常）</span>
+                    <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="data-item">
-                      <span class="data-label">浊度：</span>
-                      <span class="data-value normal">15 NTU（正常）</span>
+                    <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="data-item">
-                      <span class="data-label">溶解氧：</span>
-                      <span class="data-value normal">8.5 mg/L（正常）</span>
+                    <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>
@@ -261,43 +232,24 @@
             </div>
           </div>
           
-          <!-- 右侧面板 3：历史任务 -->
-          <div class="data-card data-card-3">
+          <!-- 右侧面板 2：测流结果 -->
+          <div class="data-card data-card-2">
             <div class="panel-header">
-              <h3>历史任务</h3>
+              <h3>测流结果</h3>
             </div>
             <div class="panel-content">
-              <div class="history-list">
-                <div class="history-item">
-                  <div class="history-id">任务编号：T20260310001</div>
-                  <div class="history-info">
-                    <span>巡检区域：全部区域</span>
-                    <span>执行时间：2026-03-10 14:00</span>
-                    <span>完成状态：已完成</span>
-                    <span>核心成果：无异常</span>
-                  </div>
-                  <button class="history-btn">查看详情</button>
-                </div>
-                <div class="history-item">
-                  <div class="history-id">任务编号：T20260310002</div>
-                  <div class="history-info">
-                    <span>巡检区域：测验设备区</span>
-                    <span>执行时间：2026-03-10 09:30</span>
-                    <span>完成状态：已完成</span>
-                    <span>核心成果：发现传感器异常</span>
-                  </div>
-                  <button class="history-btn">查看详情</button>
-                </div>
-                <div class="history-item">
-                  <div class="history-id">任务编号：T20260309001</div>
-                  <div class="history-info">
-                    <span>巡检区域：1号监测断面</span>
-                    <span>执行时间：2026-03-09 16:00</span>
-                    <span>完成状态：已完成</span>
-                    <span>核心成果：无异常</span>
-                  </div>
-                  <button class="history-btn">查看详情</button>
-                </div>
+              <!-- 任务选择 -->
+              <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>
@@ -414,7 +366,7 @@ const router = useRouter()
 const showDetailModal = ref(false)
 
 // 视觉巡查相关变量
-const selectedView = ref('')
+const selectedView = ref('robot')
 const selectView = (view) => {
   selectedView.value = view
 }
@@ -429,6 +381,11 @@ const taskItems = ref({
   water: true
 })
 
+// 测流结果相关变量
+const selectedTask = ref('task1')
+const flowChart = ref(null)
+let flowChartInstance = null
+
 const goBack = () => {
   router.push('/')
 }
@@ -460,6 +417,132 @@ const issueTask = () => {
   alert('任务下达成功！')
 }
 
+// 任务选择变化时更新图表
+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 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(() => {
@@ -468,6 +551,11 @@ onMounted(() => {
   
   // 初始化仪表盘
   initTaskGauge()
+  
+  // 初始化测流图表
+  setTimeout(() => {
+    initFlowChart()
+  }, 100)
 })
 
 onUnmounted(() => {
@@ -476,6 +564,11 @@ onUnmounted(() => {
     taskGaugeChart.dispose()
     taskGaugeChart = null
   }
+  
+  if (flowChartInstance) {
+    flowChartInstance.dispose()
+    flowChartInstance = null
+  }
 })
 
 const initTaskGauge = () => {
@@ -771,6 +864,8 @@ const initTaskGauge = () => {
 
 .data-card-1 .panel-content {
   padding: 10px 15px 15px;
+  display: flex;
+  flex-direction: column;
 }
 
 .station-intro {
@@ -1359,75 +1454,153 @@ const initTaskGauge = () => {
   color: #ff4444;
 }
 
-/* 历史任务区域 */
-.history-list {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
+/* 测流结果区域 */
+.task-selection {
+  margin-bottom: 10px;
 }
 
-.history-item {
-  background: linear-gradient(135deg, rgba(0, 20, 40, 0.6), rgba(0, 10, 20, 0.6));
+.task-select {
+  width: 100%;
+  background: linear-gradient(135deg, rgba(0, 20, 40, 0.8), rgba(0, 10, 20, 0.8));
+  color: #ffffff !important;
+  border: 1px solid rgba(0, 212, 255, 0.4);
   border-radius: 6px;
-  padding: 12px;
-  border-left: 3px solid #00d5ff;
-  border: 1px solid rgba(0, 212, 255, 0.2);
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
+  padding: 10px;
+  font-size: 14px;
   transition: all 0.3s ease;
+  cursor: pointer;
 }
 
-.history-item:hover {
-  border-color: rgba(0, 212, 255, 0.5);
+.task-select:hover {
+  border-color: rgba(0, 212, 255, 0.8);
   box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
 }
 
-.history-id {
-  color: #00ff88;
-  font-size: 14px;
-  font-weight: bold;
-  text-shadow: 0 0 5px rgba(0, 255, 136, 0.5);
+.task-select:focus {
+  outline: none;
+  border-color: rgba(0, 212, 255, 0.8);
+  box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
+}
+
+.task-select option {
+  background: rgba(0, 20, 40, 0.9);
+  color: #ffffff !important;
+  padding: 10px;
+}
+
+.flow-chart-container {
+  width: 100%;
+  height: 200px;
+  background: linear-gradient(135deg, rgba(0, 20, 40, 0.6), rgba(0, 10, 20, 0.6));
+  border: 1px solid rgba(0, 212, 255, 0.2);
+  border-radius: 6px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.flow-chart {
+  width: 100%;
+  height: 100%;
 }
 
-.history-info {
+/* 历史任务区域 */
+.history-table-container {
+  width: 100%;
+  height: 150px;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.history-table {
+  width: 100%;
   display: flex;
   flex-direction: column;
-  gap: 5px;
+  position: relative;
 }
 
-.history-info span {
-  color: #ffffff;
-  font-size: 12px;
+.history-table-header {
   display: flex;
-  align-items: center;
-  gap: 8px;
+  background: linear-gradient(135deg, rgba(0, 60, 120, 0.6), rgba(0, 30, 60, 0.6));
+  border: 1px solid rgba(0, 212, 255, 0.3);
+  border-radius: 6px 6px 0 0;
+  padding: 7px;
+  z-index: 10;
 }
 
-.history-info span::before {
-  content: '▸';
-  font-size: 10px;
+.history-table-col {
+  flex: 1;
   color: #00d5ff;
+  text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
+  text-align: center;
+  font-size: 13px;
+}
+
+.history-id-col {
+  flex: 1.5;
 }
 
-.history-btn {
-  background: linear-gradient(90deg, rgba(0, 212, 255, 0.2), rgba(0, 66, 122, 0.2));
+.history-area-col {
+  flex: 1;
+}
+
+.history-time-col {
+  flex: 1;
+}
+
+.history-status-col {
+  flex: 1;
+}
+
+.history-table-body {
+  border: 1px solid rgba(0, 212, 255, 0.3);
+  border-top: none;
+  border-radius: 0 0 6px 6px;
+  overflow: hidden;
+}
+
+.history-table-row {
+  display: flex;
+  padding: 10px;
+  border-bottom: 1px solid rgba(0, 212, 255, 0.2);
+  background: linear-gradient(135deg, rgba(0, 20, 40, 0.6), rgba(0, 10, 20, 0.6));
+  transition: all 0.3s ease;
+}
+
+.history-table-row:last-child {
+  border-bottom: none;
+}
+
+.history-table-row:hover {
+  background: linear-gradient(135deg, rgba(0, 30, 60, 0.6), rgba(0, 20, 40, 0.6));
+  border-color: rgba(0, 212, 255, 0.5);
+  box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
+}
+
+.history-table-row .history-table-col {
   color: #ffffff;
-  border: 1px solid rgba(0, 212, 255, 0.4);
-  border-radius: 6px;
-  padding: 8px 16px;
+  text-align: center;
   font-size: 12px;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  align-self: flex-end;
-  text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
 }
 
-.history-btn:hover {
-  background: linear-gradient(90deg, rgba(0, 212, 255, 0.4), rgba(0, 66, 122, 0.4));
-  border-color: rgba(0, 212, 255, 0.8);
-  box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
-  transform: translateY(-1px);
+/* 自定义滚动条样式 */
+.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);
 }
 
 /* 中间空间 */
@@ -1772,15 +1945,11 @@ const initTaskGauge = () => {
 }
 
 .data-card-1 {
-  min-height: 250px;
+  min-height: 450px;
 }
 
 .data-card-2 {
-  min-height: 200px;
-}
-
-.data-card-3 {
-  min-height: 290px;
+  min-height: 350px;
 }
 
 /* 任务详情相关样式 */
@@ -1806,7 +1975,7 @@ const initTaskGauge = () => {
 }
 
 .task-status {
-  font-size: 25px;
+  font-size: 18px;
   font-weight: bold;
   color: #00d5ff;
   text-shadow: 0 0 5px rgba(0, 212, 255, 0.8);
@@ -1921,10 +2090,20 @@ const initTaskGauge = () => {
   margin-top: 2px;
 }
 
+.view-image-wrapper {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .view-image {
   width: 100%;
   height: 100%;
   object-fit: cover;
+  object-position: center;
 }
 
 .view-placeholder {