diff --git a/web/package-lock.json b/web/package-lock.json
index fde81a4..6c42539 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "core-js": "^3.6.5",
         "echarts": "^5.3.2",
+        "element-ui": "^2.15.14",
         "lib-flexible": "^0.3.2",
         "simple-peer": "^9.11.1",
         "vue": "^2.6.11"
@@ -3207,6 +3208,14 @@
       "integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==",
       "dev": true
     },
+    "node_modules/async-validator": {
+      "version": "1.8.5",
+      "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-1.8.5.tgz",
+      "integrity": "sha512-tXBM+1m056MAX0E8TL2iCjg8WvSyXu0Zc8LNtYqrVeyoL3+esHRZ4SieE9fKQyyU09uONjnMEjrNBMqT0mbvmA==",
+      "dependencies": {
+        "babel-runtime": "6.x"
+      }
+    },
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@@ -3304,6 +3313,11 @@
         "eslint": ">= 4.12.1"
       }
     },
+    "node_modules/babel-helper-vue-jsx-merge-props": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
+      "integrity": "sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg=="
+    },
     "node_modules/babel-loader": {
       "version": "8.4.1",
       "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.4.1.tgz",
@@ -3371,6 +3385,27 @@
         "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
       }
     },
+    "node_modules/babel-runtime": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
+      "integrity": "sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==",
+      "dependencies": {
+        "core-js": "^2.4.0",
+        "regenerator-runtime": "^0.11.0"
+      }
+    },
+    "node_modules/babel-runtime/node_modules/core-js": {
+      "version": "2.6.12",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
+      "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
+      "deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.",
+      "hasInstallScript": true
+    },
+    "node_modules/babel-runtime/node_modules/regenerator-runtime": {
+      "version": "0.11.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
+      "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -5566,7 +5601,6 @@
       "version": "1.5.2",
       "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-1.5.2.tgz",
       "integrity": "sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -6115,6 +6149,22 @@
       "integrity": "sha512-8AJUW6dh75Fm/ny8+kZKJzI1pgoE8bKLZlzDU2W1ENd+DXKJrx7I7l9hb8UWR4ojlnb5OlixMt00QWiYJoVw1w==",
       "dev": true
     },
+    "node_modules/element-ui": {
+      "version": "2.15.14",
+      "resolved": "https://registry.npmjs.org/element-ui/-/element-ui-2.15.14.tgz",
+      "integrity": "sha512-2v9fHL0ZGINotOlRIAJD5YuVB8V7WKxrE9Qy7dXhRipa035+kF7WuU/z+tEmLVPBcJ0zt8mOu1DKpWcVzBK8IA==",
+      "dependencies": {
+        "async-validator": "~1.8.1",
+        "babel-helper-vue-jsx-merge-props": "^2.0.0",
+        "deepmerge": "^1.2.0",
+        "normalize-wheel": "^1.0.1",
+        "resize-observer-polyfill": "^1.5.0",
+        "throttle-debounce": "^1.0.1"
+      },
+      "peerDependencies": {
+        "vue": "^2.5.17"
+      }
+    },
     "node_modules/elliptic": {
       "version": "6.6.1",
       "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.6.1.tgz",
@@ -10456,6 +10506,11 @@
         "node": ">=4"
       }
     },
+    "node_modules/normalize-wheel": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/normalize-wheel/-/normalize-wheel-1.0.1.tgz",
+      "integrity": "sha512-1OnlAPZ3zgrk8B91HyRj+eVv+kS5u+Z0SCsak6Xil/kmgEia50ga7zfkumayonZrImffAxPU/5WcyGhzetHNPA=="
+    },
     "node_modules/npm-run-path": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",
@@ -12939,6 +12994,11 @@
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
       "dev": true
     },
+    "node_modules/resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
     "node_modules/resolve": {
       "version": "1.22.10",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
@@ -14897,6 +14957,14 @@
         "node": ">=4.0.0"
       }
     },
+    "node_modules/throttle-debounce": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-1.1.0.tgz",
+      "integrity": "sha512-XH8UiPCQcWNuk2LYePibW/4qL97+ZQ1AN3FNXwZRBNPPowo/NRU5fAlDCSNBJIYCKbioZfuYtMhG4quqoJhVzg==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/through": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
@@ -19552,6 +19620,14 @@
       "integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==",
       "dev": true
     },
+    "async-validator": {
+      "version": "1.8.5",
+      "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-1.8.5.tgz",
+      "integrity": "sha512-tXBM+1m056MAX0E8TL2iCjg8WvSyXu0Zc8LNtYqrVeyoL3+esHRZ4SieE9fKQyyU09uONjnMEjrNBMqT0mbvmA==",
+      "requires": {
+        "babel-runtime": "6.x"
+      }
+    },
     "asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@@ -19622,6 +19698,11 @@
         "resolve": "^1.12.0"
       }
     },
+    "babel-helper-vue-jsx-merge-props": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
+      "integrity": "sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg=="
+    },
     "babel-loader": {
       "version": "8.4.1",
       "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.4.1.tgz",
@@ -19673,6 +19754,27 @@
         "@babel/helper-define-polyfill-provider": "^0.6.3"
       }
     },
+    "babel-runtime": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
+      "integrity": "sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==",
+      "requires": {
+        "core-js": "^2.4.0",
+        "regenerator-runtime": "^0.11.0"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "2.6.12",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
+          "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ=="
+        },
+        "regenerator-runtime": {
+          "version": "0.11.1",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
+          "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
+        }
+      }
+    },
     "balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -21387,8 +21489,7 @@
     "deepmerge": {
       "version": "1.5.2",
       "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-1.5.2.tgz",
-      "integrity": "sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ==",
-      "dev": true
+      "integrity": "sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ=="
     },
     "default-gateway": {
       "version": "5.0.5",
@@ -21818,6 +21919,19 @@
       "integrity": "sha512-8AJUW6dh75Fm/ny8+kZKJzI1pgoE8bKLZlzDU2W1ENd+DXKJrx7I7l9hb8UWR4ojlnb5OlixMt00QWiYJoVw1w==",
       "dev": true
     },
+    "element-ui": {
+      "version": "2.15.14",
+      "resolved": "https://registry.npmjs.org/element-ui/-/element-ui-2.15.14.tgz",
+      "integrity": "sha512-2v9fHL0ZGINotOlRIAJD5YuVB8V7WKxrE9Qy7dXhRipa035+kF7WuU/z+tEmLVPBcJ0zt8mOu1DKpWcVzBK8IA==",
+      "requires": {
+        "async-validator": "~1.8.1",
+        "babel-helper-vue-jsx-merge-props": "^2.0.0",
+        "deepmerge": "^1.2.0",
+        "normalize-wheel": "^1.0.1",
+        "resize-observer-polyfill": "^1.5.0",
+        "throttle-debounce": "^1.0.1"
+      }
+    },
     "elliptic": {
       "version": "6.6.1",
       "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.6.1.tgz",
@@ -25174,6 +25288,11 @@
         "sort-keys": "^1.0.0"
       }
     },
+    "normalize-wheel": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/normalize-wheel/-/normalize-wheel-1.0.1.tgz",
+      "integrity": "sha512-1OnlAPZ3zgrk8B91HyRj+eVv+kS5u+Z0SCsak6Xil/kmgEia50ga7zfkumayonZrImffAxPU/5WcyGhzetHNPA=="
+    },
     "npm-run-path": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",
@@ -27174,6 +27293,11 @@
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
       "dev": true
     },
+    "resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
     "resolve": {
       "version": "1.22.10",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
@@ -28746,6 +28870,11 @@
         }
       }
     },
+    "throttle-debounce": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-1.1.0.tgz",
+      "integrity": "sha512-XH8UiPCQcWNuk2LYePibW/4qL97+ZQ1AN3FNXwZRBNPPowo/NRU5fAlDCSNBJIYCKbioZfuYtMhG4quqoJhVzg=="
+    },
     "through": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
diff --git a/web/package.json b/web/package.json
index 12398fb..085f5e8 100644
--- a/web/package.json
+++ b/web/package.json
@@ -10,6 +10,7 @@
   "dependencies": {
     "core-js": "^3.6.5",
     "echarts": "^5.3.2",
+    "element-ui": "^2.15.14",
     "lib-flexible": "^0.3.2",
     "simple-peer": "^9.11.1",
     "vue": "^2.6.11"
diff --git a/web/src/App.vue b/web/src/App.vue
index 6518b25..5813dab 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -1,20 +1,16 @@
 <template>
   <div id="app">
-   <WebRTC />
-   <div id="ui">
-   <TopBar @open-task-modal="openTaskModal" />
-   <LeftPane />
-   <RightPane />
-   <TaskModal ref="taskModal" />
-   </div>
+    <WebRTC />
+    <div id="ui">
+      <TopBar @open-task-modal="openTaskModal" />
+      <TaskModal ref="taskModal" />
+    </div>
   </div>
 </template>
 
 <script>
 import WebRTC from './components/WebRTC.vue'
 import TopBar from './components/TopBar.vue'
-import LeftPane from "./components/LeftPane.vue"
-import RightPane from "./components/RightPane.vue"
 import TaskModal from './components/TaskModal.vue'
 
 export default {
@@ -22,40 +18,34 @@ export default {
   components: {
     WebRTC,
     TopBar,
-    LeftPane,
-    RightPane,
     TaskModal,
   },
   methods: {
     openTaskModal() {
       this.$refs.taskModal.openModal();
     },
-  },
-  mounted()
-  {
-    //this.webrtc.load();
   }
 }
 </script>
 
 <style>
-html,body
-{
+html, body {
   width: 100%;
   height: 100%;
   margin: 0;
   padding: 0;
   overflow: hidden;
 }
+
 #app {
   height: 100%;
 }
-#ui
-{
-  position:absolute;
-  width:100%;
-  left:0;
-  top:0;
+
+#ui {
+  position: absolute;
+  width: 100%;
+  left: 0;
+  top: 0;
   pointer-events: none;
 }
 </style>
diff --git a/web/src/components/TaskModal.vue b/web/src/components/TaskModal.vue
index 0fe7f3e..ecfa186 100644
--- a/web/src/components/TaskModal.vue
+++ b/web/src/components/TaskModal.vue
@@ -8,12 +8,22 @@
       <div class="search-area">
         <div class="search-item">
           <label for="year">年度:</label>
-          <input type="number" v-model="year" class="year-input" @change="handleChangeYear" />
+          <el-date-picker
+            v-model="year"
+            type="year"
+            placeholder="选择年"
+            format="yyyy"
+            value-format="yyyy"
+            @change="handleChangeYear"
+            class="year-picker"
+          />
         </div>
         <div class="search-item">
           <label for="taskName">任务名称:</label>
           <select v-model="taskName" class="task-select">
-            <option value="xxx任务">xxx任务</option>
+            <option v-for="task in taskList" :key="task.id" :value="task.value">
+              {{ task.label }}
+            </option>
           </select>
         </div>
         <button class="search-btn" @click="handleSearch">查询</button>
@@ -32,14 +42,17 @@
           </thead>
           <tbody>
             <tr v-for="(task, index) in tasks" :key="index">
-              <td>{{ task.date }}</td>
-              <td>{{ task.gameCount }}</td>
-              <td>{{ task.practiceDay }}</td>
-              <td>{{ task.paramFlightCount }}</td>
-              <td>{{ task.paramModel }}</td>
+              <td>{{ task.date || 'N/A' }}</td>
+              <td>{{ task.gameCount || 0 }}</td>
+              <td>{{ task.practiceDay || 0 }}</td>
+              <td>{{ task.paramFlightCount || 0 }}</td>
+              <td>{{ task.paramModel || 'N/A' }}</td>
             </tr>
           </tbody>
         </table>
+        <div v-if="tasks.length === 0" class="no-data">
+          暂无数据
+        </div>
       </div>
       <div class="footer">
         <label class="effect-checkbox">
@@ -57,23 +70,40 @@
 
 <script>
 import webrtc from '../webrtc';
+import { DatePicker } from 'element-ui';
 
 export default {
   name: 'TaskModal',
+  components: {
+    'el-date-picker': DatePicker
+  },
   data() {
     return {
       isVisible: false,
-      year: new Date().getFullYear(),
+      year: new Date().getFullYear().toString(),
       taskName: '',
       showEffect: false,
-      tasks: [
-        { date: '2025-11-10', gameCount: 1, practiceDay: 3, paramFlightCount: 65, paramModel: 'J-11,模型-7' },
-      ],
-      originalTasks: [
-        { date: '2025-11-10', gameCount: 1, practiceDay: 3, paramFlightCount: 65, paramModel: 'J-11,模型-7' },
+      tasks: [],
+      originalTasks: [],
+      taskList: [
+        { 
+          id: 1, 
+          value: 'J-11,模型-7', 
+          label: 'J-11,模型-7' 
+        },
       ],
     };
   },
+  watch: {
+    year(newVal) {
+      const yearNum = parseInt(newVal);
+      if (yearNum < 2000) {
+        this.year = String(2000);
+      } else if (yearNum > 2100) {
+        this.year = String(2100);
+      }
+    }
+  },
   methods: {
     openModal() {
       this.isVisible = true;
@@ -100,55 +130,154 @@ export default {
       this.closeModal();
     },
     initData() {
-      this.originalTasks = [
-        { date: '2025-11-10', gameCount: 1, practiceDay: 3, paramFlightCount: 65, paramModel: 'J-11,模型-7' },
-        { date: '2025-11-11', gameCount: 2, practiceDay: 4, paramFlightCount: 75, paramModel: 'J-11,模型-8' },
-        { date: '2025-11-12', gameCount: 1, practiceDay: 3, paramFlightCount: 65, paramModel: 'J-11,模型-9' },
-      ];
-      this.tasks = [...this.originalTasks];
+      // const data = {
+      //     command: "LoadScenario"
+      //   }
+      //   webrtc.webrtc.emitUIInter(data);
+      // this.originalTasks = [
+      //   { date: '2025-11-10', gameCount: 1, practiceDay: 3, paramFlightCount: 65, paramModel: 'J-11,模型-7' },
+      //   { date: '2025-11-11', gameCount: 2, practiceDay: 4, paramFlightCount: 75, paramModel: 'J-11,模型-8' },
+      //   { date: '2025-11-12', gameCount: 1, practiceDay: 3, paramFlightCount: 65, paramModel: 'J-11,模型-9' },
+      // ];
+      // this.tasks = [...this.originalTasks];
+    },
+    formatTimestamp(timestamp) {
+      try {
+        // 确保 timestamp 是数字
+        const ts = Number(timestamp) - 15607766499;
+        if (isNaN(ts)) {
+          console.warn('Invalid timestamp:', timestamp);
+          return 'Invalid Date';
+        }
+        
+        const date = new Date(ts * 1000); // 转换为毫秒
+        if (date.toString() === 'Invalid Date') {
+          console.warn('Invalid date from timestamp:', ts);
+          return 'Invalid Date';
+        }
+        
+        const year = date.getFullYear();
+        const month = String(date.getMonth() + 1).padStart(2, '0');
+        const day = String(date.getDate()).padStart(2, '0');
+        return `${year}-${month}-${day}`;
+      } catch (error) {
+        console.error('Error formatting timestamp:', error);
+        return 'Error';
+      }
     },
     handleSearch() {
-      this.tasks = this.originalTasks.filter(task => {
-        const yearMatch = task.date.includes(this.year.toString());
-        const taskNameMatch = !this.taskName || task.paramModel.includes(this.taskName);
-        return yearMatch && taskNameMatch;
-      });
+      const currentTaskName = this.taskName;
+      
+      if (!currentTaskName) {
+        console.warn('Task name is empty');
+        return;
+      }
 
       try {
-        const data = {
-          command: "LoadScenario"
-        }
-        webrtc.webrtc.emitUIInter(data);
+        webrtc.webrtc.emitUIInter({
+          command: "SelectScenarioTask",
+          task: currentTaskName
+        });
+        
+        // 添加调试日志
+        console.log('Sending request with task:', currentTaskName);
+        
+        webrtc.webrtc.addResponseEventListener('SelectScenarioTask', (response) => {
+          console.log('SelectScenarioTask response1111:', response);
+          
+          try {
+            const parsedResponse = JSON.parse(response);
+            console.log('Parsed response:', parsedResponse, Array.isArray(parsedResponse.data));
+            if (parsedResponse.response === 'SelectScenarioTaskResponse' && Array.isArray(parsedResponse.data)) {
+              console.log('Parsed response:', parsedResponse);
+              this.tasks = parsedResponse.data.map(item => {
+                const mappedItem = {
+                  date: this.formatTimestamp(Number(item.timestamp)),
+                  gameCount: Number(item.bc) || 0,
+                  practiceDay: Number(item.yxr) || 0,
+                  paramFlightCount: 0,
+                  paramModel: ''
+                };
+                console.log('Mapped item:', mappedItem);
+                return mappedItem;
+              });
+              
+              console.log('Updated tasks array:', this.tasks);
+              
+              // 强制更新视图
+              this.$forceUpdate();
+            } else {
+              console.warn('Invalid response format:', parsedResponse);
+              this.tasks = [];
+            }
+          } catch (parseError) {
+            console.error('Error parsing response:', parseError);
+            this.tasks = [];
+          }
+          
+          webrtc.webrtc.removeResponseEventListener('SelectScenarioTask');
+        });
       } catch (error) {
-        console.error('Error in emitCommand:', error);
+        console.error('Error in emitUIInter:', error);
+        this.tasks = [];
       }
     },
     handleReset() {
-      this.year = new Date().getFullYear();
+      this.year = String(new Date().getFullYear());
       this.taskName = '';
       this.tasks = [...this.originalTasks];
-
+      
       try {
-        webrtc.webrtc.emitCommand("ResetTask", {});
+        webrtc.webrtc.emitUIInter({
+          ResetTask: true
+        });
       } catch (error) {
-        console.error('Error in emitCommand:', error);
+        console.error('Error in emitUIInter:', error);
       }
     },
     handleChangeYear() {
-      const data = {
-        command: "LoadScenarioTask",
-        year: this.year
-      };
-
       try {
-        webrtc.webrtc.emitUIInter(data);
+        webrtc.webrtc.emitUIInter({
+          command: "LoadScenarioTask",
+          year: this.year
+        });
+        webrtc.webrtc.addResponseEventListener('LoadScenarioTask', (response) => {
+          console.log('LoadScenarioTask response:222', response);
+          const parsedResponse = JSON.parse(response);
+          if (parsedResponse.response === 'LoadScenarioTaskResponse' && parsedResponse.data) {
+            if (Array.isArray(parsedResponse.data) && parsedResponse.data.length > 0) {
+              this.taskList = parsedResponse.data.map(task => ({
+                id: task,
+                value: task,
+                label: task
+              }));
+              
+              if (this.taskList.length > 0) {
+                this.taskName = this.taskList[0].value;
+              } else {
+                this.taskName = '';
+              }
+            } else {
+              console.warn('Response data is empty or not an array');
+              this.taskName = '';
+              this.taskList = [];
+            }
+          }
+          webrtc.webrtc.removeResponseEventListener('LoadScenarioTask');
+        });
       } catch (error) {
-        console.error('Error in emitCommand:', error);
+        console.error('Error in emitUIInter:', error);
       }
     },
   },
   created() {
     this.initData();
+  },
+  mounted() {
+    // 初始化时立即获取数据
+    if (this.taskName) {
+      this.handleSearch();
+    }
   }
 };
 </script>
@@ -211,15 +340,37 @@ h2 {
   display: flex;
   align-items: center;
   gap: 4px;
+  position: relative;
 }
 
 .search-item label {
   font-size: 12px;
-  white-space: nowrap;
+  margin-right: 4px;
+  color: #fff;
 }
 
-.year-input {
-  width: 60px;
+.year-picker {
+  width: 100px !important;
+}
+
+/* 覆盖 element-ui 默认样式 */
+:deep(.el-input__inner) {
+  background-color: #1e2c42 !important;
+  border: 1px solid #3a4b66 !important;
+  color: white !important;
+  height: 24px !important;
+  line-height: 24px !important;
+  font-size: 12px !important;
+}
+
+:deep(.el-input__icon) {
+  line-height: 24px !important;
+  color: #fff !important;
+}
+
+:deep(.el-input__prefix),
+:deep(.el-input__suffix) {
+  top: 0 !important;
 }
 
 .task-select {
@@ -342,4 +493,16 @@ button:hover {
 .table-container::-webkit-scrollbar-track {
   background: #1e2c42;
 }
+
+.year-picker:focus {
+  outline: none;
+  border-color: #1890ff;
+}
+
+.no-data {
+  text-align: center;
+  padding: 20px;
+  color: #999;
+  font-size: 12px;
+}
 </style>
diff --git a/web/src/components/TopBar.vue b/web/src/components/TopBar.vue
index a61454f..fc17282 100644
--- a/web/src/components/TopBar.vue
+++ b/web/src/components/TopBar.vue
@@ -1,99 +1,154 @@
 <template>
     <div id="top_bar">
         <div id="top_bar_left">
-            <span>XXXXXXX管理平台</span>
+            <span class="time">{{ currentTime }}</span>
+            <span class="date">{{ currentDate }}<br>{{ currentDay }}</span>
+        </div>
+        <div id="top_bar_center">
+            <span>KZDK战术分析系统</span>
         </div>
         <div id="top_bar_right">
-            <span class="time">19:00</span>
-            <span class="date">2022年5月8日<br>星期天</span>
-             <span class="temp">10-15℃</span>
-            <span class="weather">晴转多云<br>微风≤2级</span>
             <button @click="openTaskModal" class="open-modal-button">打开任务选择</button>
         </div>
     </div>
 </template>
+
 <script>
 export default {
-    name:'TopBar',
+    name: 'TopBar',
+    data() {
+        return {
+            currentTime: '',
+            currentDate: '',
+            currentDay: '',
+            timer: null
+        }
+    },
     methods: {
         openTaskModal() {
             this.$emit('open-task-modal');
         },
+        updateTime() {
+            const now = new Date();
+            
+            // 更新时间 - 24小时制，添加秒
+            const hours = String(now.getHours()).padStart(2, '0');
+            const minutes = String(now.getMinutes()).padStart(2, '0');
+            const seconds = String(now.getSeconds()).padStart(2, '0');
+            this.currentTime = `${hours}:${minutes}:${seconds}`;
+            
+            // 更新日期
+            const year = now.getFullYear();
+            const month = String(now.getMonth() + 1).padStart(2, '0');
+            const date = String(now.getDate()).padStart(2, '0');
+            this.currentDate = `${year}年${month}月${date}日`;
+            
+            // 更新星期
+            const days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
+            this.currentDay = days[now.getDay()];
+        }
+    },
+    mounted() {
+        // 初始化时间
+        this.updateTime();
+        
+        // 每秒更新一次
+        this.timer = setInterval(() => {
+            this.updateTime();
+        }, 1000); // 1000毫秒 = 1秒
+    },
+    beforeDestroy() {
+        if (this.timer) {
+            clearInterval(this.timer);
+            this.timer = null;
+        }
     }
 }
 </script>
+
 <style>
-#top_bar
-{
-    width:100%;
+#top_bar {
+    width: 100%;
     color: white;
     pointer-events: auto;
+    background: linear-gradient(to right, #1a2942, #141e30);
+    height: 60px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 20px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
 }
-#top_bar_left
-{
-    float:left;
-    width:723px;
-    height:100px;
-    background: url('../assets/images/top_bar_left_bg.png') no-repeat;
-    background-size: cover;
-    font-size:50px;
-    text-align:left;
-    font-weight: bold;
-    padding-left: 50px;
-    line-height:80px;
-}
-#top_bar_right
-{
-    float:right;
-    width:914px;
-    height:70px;
-     background: url('../assets/images/top_bar_right_bg.png') no-repeat;
-    background-size: cover;
-    line-height: 70px;
 
+#top_bar_left {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    min-width: 300px;
+    padding-left: 40px;
 }
-#top_bar_right .time
-{
-    float:left;
-    margin-left: 100px;
-    font-size: 35px;
-   font-weight: bold;
+
+#top_bar_center {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: 24px;
+    font-weight: bold;
+    color: #4bb5ff;
 }
-#top_bar_right .date
-{
-    float:left;
-    margin-left: 10px;
-    font-size: 25px;
-    line-height: 30px;
-    padding-top:5px;
+
+#top_bar_right {
+    display: flex;
+    align-items: center;
+    min-width: 300px;
+    justify-content: center;
+    padding-right: 40px;
 }
-#top_bar_right .temp
-{
-    float:left;
-    margin-left: 160px;
-    font-size: 35px;
-   font-weight: bold;
+
+#top_bar_right .time {
+    font-size: 24px;
+    font-weight: normal;
+    color: #4bb5ff;
+    display: flex;
+    align-items: center;
 }
-#top_bar_right .weather
-{
-    float:left;
-    margin-left: 10px;
-    font-size: 25px;
-    line-height: 30px;
-    padding-top:5px;
+
+.time {
+    font-size: 24px;
+    color: #4bb5ff;
+    font-family: 'Arial', sans-serif;
+    letter-spacing: 1px;
 }
-.open-modal-button {
-    float: right;
-    margin-right: 20px;
-    padding: 10px 20px;
+
+.date {
     font-size: 16px;
-    background-color: #007bff;
+    color: #4bb5ff;
+    text-align: left;
+    line-height: 1.2;
+}
+
+.open-modal-button {
+    background-color: #0066ff;
     color: white;
     border: none;
-    border-radius: 5px;
     cursor: pointer;
+    padding: 6px 20px;
+    height: 36px;
+    font-size: 16px;
+    border-radius: 4px;
+    transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 40px;
 }
+
 .open-modal-button:hover {
-    background-color: #0056b3;
+    background-color: #0052cc;
+}
+
+.open-modal-button:active {
+    background-color: #004080;
+    transform: scale(0.98);
 }
 </style>
\ No newline at end of file
diff --git a/web/src/main.js b/web/src/main.js
index a02e090..da959fb 100644
--- a/web/src/main.js
+++ b/web/src/main.js
@@ -3,6 +3,10 @@ import Vue from 'vue'
 import App from './App.vue'
 import webrtc from './webrtc'
 import * as echarts from 'echarts'
+import 'element-ui/lib/theme-chalk/index.css'
+import { DatePicker } from 'element-ui'
+
+Vue.use(DatePicker)
 Vue.prototype.webrtc = webrtc.webrtc
 Vue.prototype.echarts = echarts
 Vue.config.productionTip = false
diff --git a/web/src/webrtc.js b/web/src/webrtc.js
index 9d00f2b..43570e1 100644
--- a/web/src/webrtc.js
+++ b/web/src/webrtc.js
@@ -485,7 +485,7 @@ function addResponseEventListener(name, listener) {
 }
 
 function removeResponseEventListener(name) {
-    responseEventListeners.remove(name);
+    responseEventListeners.delete(name);
 }
 
 // Must be kept in sync with PixelStreamingProtocol::EToPlayerMsg C++ enum.
@@ -1865,7 +1865,7 @@ function connect() {
     }
     // ws = new WebSocket("ws://localhost/");
     // ws = new WebSocket(window.location.href.replace('http://', 'ws://').replace('https://', 'wss://'));
-    let connectionUrl = window.location.href.replace('http://', 'ws://').replace('https://', 'wss://').replace(/:\d+/, ':8000');
+    let connectionUrl = window.location.href.replace('http://', 'ws://').replace('https://', 'wss://').replace(/:\d+/, '');
     console.log(`Creating a websocket connection to: ${connectionUrl}`);
     ws = new WebSocket(connectionUrl);
     ws.attemptStreamReconnection = true;
@@ -1942,7 +1942,9 @@ let webrtc =
     playVideo: playVideoStream,
     resizePlayer: resizePlayerStyle,
     emitUIInter: emitUIInteraction,
-    emitCommand: emitCommand
+    emitCommand: emitCommand,
+    addResponseEventListener: addResponseEventListener,
+    removeResponseEventListener: removeResponseEventListener
 }
 
 export default