schedule and route

src/router/index.js

@@ -96,14 +96,14 @@ export const constantRoutes = [
     ]
   },
   {
-    path: '/guide',
+    path: '/schedule',
     component: Layout,
-    redirect: '/guide/index',
+    redirect: '/schedule/index',
     children: [
       {
         path: 'index',
-        component: () => import('@/views/guide/index'),
+        component: () => import('@/views/schedule/index'),
-        name: 'Guide',
+        name: 'Schedule',
         meta: { title: '调度决策', icon: 'guide', noCache: true }
       }
     ]

src/router/modules/charts.js

@@ -3,49 +3,61 @@
 import Layout from '@/layout'
 
 const chartsRouter = {
-  path: '/charts',
+  path: '/route',
   component: Layout,
   redirect: 'noRedirect',
-  name: 'Charts',
+  name: 'Route',
   meta: {
     title: '路由控制',
     icon: 'tree'
   },
   children: [
     {
-      path: 'keyboard',
+      path: 'show_paths',
-      component: () => import('@/views/charts/keyboard'),
+      component: () => import('@/views/route/show_paths'),
-      name: 'KeyboardChart',
+      name: 'ShowPaths',
       meta: { title: '查看最短路径', noCache: true }
     },
     {
-      path: 'keyboard',
+      path: 'show_sid',
-      component: () => import('@/views/charts/keyboard'),
+      component: () => import('@/views/route/show_sid'),
-      name: 'KeyboardChart',
+      name: 'ShowSID',
       meta: { title: '查看SID', noCache: true }
     },
     {
-      path: 'line',
+      path: 'show_policy',
-      component: () => import('@/views/charts/line'),
+      component: () => import('@/views/route/show_policy.vue'),
-      name: 'LineChart',
+      name: 'ShowPolicy',
       meta: { title: '查看路由', noCache: true }
     },
     {
-      path: 'mix-chart',
+      path: 'show_steer',
-      component: () => import('@/views/charts/mix-chart'),
+      component: () => import('@/views/route/show_steer'),
-      name: 'MixChart',
+      name: 'ShowSteer',
+      meta: { title: '查看引导', noCache: true }
+    },
+    {
+      path: 'add_policy',
+      component: () => import('@/views/route/add_policy.vue'),
+      name: 'AddPolicy',
       meta: { title: '添加路由', noCache: true }
     },
     {
-      path: 'mix-chart',
+      path: 'steer',
-      component: () => import('@/views/charts/mix-chart'),
+      component: () => import('@/views/route/steer.vue'),
-      name: 'MixChart',
+      name: 'Steer',
       meta: { title: '更新引导', noCache: true }
     },
     {
-      path: 'mix-chart',
+      path: 'del_steer',
-      component: () => import('@/views/charts/mix-chart'),
+      component: () => import('@/views/route/del_steer.vue'),
-      name: 'MixChart',
+      name: 'DelSteer',
+      meta: { title: '删除引导', noCache: true }
+    },
+    {
+      path: 'del_policy',
+      component: () => import('@/views/route/del_policy.vue'),
+      name: 'DelPolicy',
       meta: { title: '删除路由', noCache: true }
     }
   ]

src/views/route/add_policy.vue

@@ -0,0 +1,135 @@
+<template>
+  <div class="add-policy">
+    <h2>添加SRv6路由策略</h2>
+
+    <!-- 输入表单 -->
+    <form @submit.prevent="submitPolicy">
+      <div class="form-group">
+        <label for="router">路由器</label>
+        <select id="router" v-model="router" required>
+          <option disabled value="">选择路由器</option>
+          <option value="r0">路由器r0</option>
+          <option value="r3">路由器r3</option>
+          <option value="r6">路由器r6</option>
+        </select>
+      </div>
+
+      <div class="form-group">
+        <label for="bsid">绑定 SID (BSID)</label>
+        <input id="bsid" v-model="bsid" type="text" required placeholder="fe00::1a">
+      </div>
+
+      <div class="form-group">
+        <label for="sids">SIDs (逗号分隔)</label>
+        <input id="sids" v-model="sids" type="text" required placeholder="fc00:1::a,fc00:2::a">
+      </div>
+
+      <button type="submit">添加路由</button>
+    </form>
+
+    <!-- 显示结果 -->
+    <div v-if="resultMessage" class="result-message">
+      <p><strong>{{ resultMessage }}</strong></p>
+      <pre>{{ result }}</pre>
+    </div>
+
+    <!-- 错误消息 -->
+    <div v-if="error" class="error-message">
+      <p>Error: {{ error }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+
+export default {
+  data() {
+    return {
+      router: '', // 路由器选择
+      bsid: '', // BSID
+      sids: '', // SIDs
+      resultMessage: '', // 返回的消息
+      result: '', // 返回的详细结果
+      error: null // 错误消息
+    }
+  },
+  methods: {
+    async submitPolicy() {
+      try {
+        const data = {
+          bsid: this.bsid,
+          sids: this.sids
+        }
+
+        const response = await axios.post(`http://localhost:5060/route/add_policy?router=${this.router}`, data, {
+          headers: { 'Content-Type': 'application/json' }
+        })
+
+        this.resultMessage = response.data.message
+        this.result = response.data.result.join('\n') // 格式化结果信息
+        this.error = null
+      } catch (error) {
+        this.error = error.message
+        this.resultMessage = ''
+        this.result = ''
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.add-policy {
+  max-width: 600px;
+  margin: 0 auto;
+  padding: 20px;
+  font-family: Arial, sans-serif;
+}
+
+.form-group {
+  margin-bottom: 15px;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 5px;
+}
+
+.form-group input, .form-group select {
+  width: 100%;
+  padding: 8px;
+  margin-bottom: 5px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+button {
+  padding: 10px 20px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: #0056b3;
+}
+
+.result-message, .error-message {
+  margin-top: 20px;
+  padding: 10px;
+  border-radius: 4px;
+}
+
+.result-message {
+  background-color: #e7f4e4;
+  color: #3c763d;
+}
+
+.error-message {
+  background-color: #f8d7da;
+  color: #721c24;
+}
+</style>

src/views/route/del_policy.vue

@@ -0,0 +1,144 @@
+<template>
+  <div class="del-policy">
+    <h2>删除 SRv6 策略</h2>
+
+    <!-- 表单 -->
+    <form @submit.prevent="submitDelPolicy">
+      <div class="form-group">
+        <label for="router">选择路由器</label>
+        <select id="router" v-model="router" required>
+          <option disabled value="">选择路由器</option>
+          <option value="r0">路由器r0</option>
+          <option value="r3">路由器r3</option>
+          <option value="r6">路由器r6</option>
+        </select>
+      </div>
+
+      <div class="form-group">
+        <label for="bsid">BSID</label>
+        <input
+          id="bsid"
+          v-model="bsid"
+          type="text"
+          required
+          placeholder="请输入 Binding SID，如 fe00:1::1"
+        >
+      </div>
+
+      <button type="submit">删除策略</button>
+    </form>
+
+    <!-- 显示结果 -->
+    <div v-if="resultMessage" class="result-message">
+      <p><strong>{{ resultMessage }}</strong></p>
+      <pre>{{ result }}</pre>
+    </div>
+
+    <!-- 错误消息 -->
+    <div v-if="error" class="error-message">
+      <p>错误: {{ error }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+
+export default {
+  data() {
+    return {
+      router: '', // 选择的路由器
+      bsid: '', // Binding SID
+      resultMessage: '', // 返回的消息
+      result: '', // 返回的详细结果
+      error: null // 错误消息
+    }
+  },
+  methods: {
+    async submitDelPolicy() {
+      try {
+        // 删除请求需要的 body 数据
+        const data = {
+          bsid: this.bsid
+        }
+
+        // 发送 DELETE 请求
+        const response = await axios.delete(
+          `http://localhost:5060/route/del_policy?router=${this.router}`,
+          {
+            headers: { 'Content-Type': 'application/json' },
+            data
+          }
+        )
+
+        // 处理返回结果
+        this.resultMessage = response.data.message
+        this.result = response.data.result.join('\n') // 格式化返回结果
+        this.error = null
+      } catch (error) {
+        // 处理错误
+        this.error = error.message
+        this.resultMessage = ''
+        this.result = ''
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.del-policy {
+  max-width: 600px;
+  margin: 0 auto;
+  padding: 20px;
+  font-family: Arial, sans-serif;
+}
+
+.form-group {
+  margin-bottom: 15px;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 5px;
+}
+
+.form-group input,
+.form-group select {
+  width: 100%;
+  padding: 8px;
+  margin-bottom: 5px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+button {
+  padding: 10px 20px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: #0056b3;
+}
+
+.result-message,
+.error-message {
+  margin-top: 20px;
+  padding: 10px;
+  border-radius: 4px;
+}
+
+.result-message {
+  background-color: #e7f4e4;
+  color: #3c763d;
+}
+
+.error-message {
+  background-color: #f8d7da;
+  color: #721c24;
+}
+</style>

src/views/route/del_steer.vue

@@ -0,0 +1,144 @@
+<template>
+  <div class="del-steer-policy">
+    <h2>删除引导策略</h2>
+
+    <!-- 表单 -->
+    <form @submit.prevent="submitDelSteerPolicy">
+      <div class="form-group">
+        <label for="router">选择路由器</label>
+        <select id="router" v-model="router" required>
+          <option disabled value="">选择路由器</option>
+          <option value="r0">路由器r0</option>
+          <option value="r3">路由器r3</option>
+          <option value="r6">路由器r6</option>
+        </select>
+      </div>
+
+      <div class="form-group">
+        <label for="ip_prefix">目标IP</label>
+        <input
+          id="ip_prefix"
+          v-model="ip_prefix"
+          type="text"
+          required
+          placeholder="请输入目标 IP，如 10.10.0.0/24"
+        >
+      </div>
+
+      <button type="submit">删除引导策略</button>
+    </form>
+
+    <!-- 显示结果 -->
+    <div v-if="resultMessage" class="result-message">
+      <p><strong>{{ resultMessage }}</strong></p>
+      <pre>{{ result }}</pre>
+    </div>
+
+    <!-- 错误消息 -->
+    <div v-if="error" class="error-message">
+      <p>错误: {{ error }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+
+export default {
+  data() {
+    return {
+      router: '', // 选择的路由器
+      ip_prefix: '', // IP 前缀
+      resultMessage: '', // 返回的消息
+      result: '', // 返回的详细结果
+      error: null // 错误消息
+    }
+  },
+  methods: {
+    async submitDelSteerPolicy() {
+      try {
+        // 删除请求需要的 body 数据
+        const data = {
+          ip_prefix: this.ip_prefix
+        }
+
+        // 发送 DELETE 请求
+        const response = await axios.delete(
+          `http://localhost:5060/route/del_steer?router=${this.router}`,
+          {
+            headers: { 'Content-Type': 'application/json' },
+            data
+          }
+        )
+
+        // 处理返回结果
+        this.resultMessage = response.data.message
+        this.result = response.data.result.join('\n') // 格式化返回结果
+        this.error = null
+      } catch (error) {
+        // 处理错误
+        this.error = error.message
+        this.resultMessage = ''
+        this.result = ''
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.del-steer-policy {
+  max-width: 600px;
+  margin: 0 auto;
+  padding: 20px;
+  font-family: Arial, sans-serif;
+}
+
+.form-group {
+  margin-bottom: 15px;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 5px;
+}
+
+.form-group input,
+.form-group select {
+  width: 100%;
+  padding: 8px;
+  margin-bottom: 5px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+button {
+  padding: 10px 20px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: #0056b3;
+}
+
+.result-message,
+.error-message {
+  margin-top: 20px;
+  padding: 10px;
+  border-radius: 4px;
+}
+
+.result-message {
+  background-color: #e7f4e4;
+  color: #3c763d;
+}
+
+.error-message {
+  background-color: #f8d7da;
+  color: #721c24;
+}
+</style>

src/views/route/show_paths.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="show-paths">
+    <h2>最短路径信息</h2>
+    <!-- 检查是否在加载状态 -->
+    <div v-if="loading">加载中...</div>
+
+    <!-- 如果有路径数据则显示 -->
+    <div v-else>
+      <ul v-if="paths.length > 0">
+        <li v-for="(path, index) in paths" :key="index">{{ path }}</li>
+      </ul>
+
+      <!-- 如果没有路径数据则显示消息 -->
+      <div v-else>
+        <p>未找到</p>
+      </div>
+    </div>
+
+    <!-- 错误消息 -->
+    <div v-if="error" class="error-message">
+      <p>加载路径错误: {{ error }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+
+export default {
+  name: 'ShowPaths',
+  data() {
+    return {
+      paths: [],
+      loading: false,
+      error: null
+    }
+  },
+  mounted() {
+    // 组件挂载时请求路径数据
+    this.fetchPaths()
+  },
+  methods: {
+    // 请求 API 以获取路径信息
+    fetchPaths() {
+      this.loading = true
+      this.error = null
+      axios
+        .get('http://localhost:5060/route/show_paths')
+        .then((response) => {
+          // 检查响应中是否有 paths 数据
+          if (response.data && response.data.paths) {
+            this.paths = response.data.paths
+          } else {
+            this.error = 'No paths data found in the response.'
+          }
+        })
+        .catch((error) => {
+          this.error = error.message || 'An error occurred while fetching paths.'
+        })
+        .finally(() => {
+          this.loading = false
+        })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.show-paths {
+  font-family: Arial, sans-serif;
+  padding: 20px;
+}
+
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+li {
+  margin-bottom: 10px;
+}
+
+.error-message {
+  color: red;
+  font-weight: bold;
+}
+</style>

src/views/route/show_policy.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="show-policy">
+    <h2>SRv6路径: {{ selectedRouter }}</h2>
+
+    <!-- 路由器选择器 -->
+    <div class="router-selector">
+      <label for="router">选择路由器:</label>
+      <select v-model="selectedRouter" @change="fetchPolicyInfo">
+        <option value="r0">r0</option>
+        <option value="r3">r3</option>
+        <option value="r6">r6</option>
+      </select>
+    </div>
+
+    <!-- 显示加载状态 -->
+    <div v-if="loading">加载路径信息...</div>
+
+    <!-- 列表形式展示策略信息 -->
+    <ul v-if="!loading && policyData.length > 0" class="policy-list">
+      <li v-for="(policy, index) in policyData" :key="index">
+        {{ policy }}
+      </li>
+    </ul>
+
+    <!-- 如果没有策略信息 -->
+    <div v-else-if="!loading && policyData.length === 0">
+      <p>No policy information available for the selected router.</p>
+    </div>
+
+    <!-- 错误信息 -->
+    <div v-if="error" class="error-message">
+      <p>Error loading policy information: {{ error }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+
+export default {
+  name: 'ShowPolicy',
+  data() {
+    return {
+      selectedRouter: 'r0', // 默认选择 r0
+      policyData: [],
+      loading: false,
+      error: null
+    }
+  },
+  mounted() {
+    // 组件挂载时请求默认路由器的策略信息
+    this.fetchPolicyInfo()
+  },
+  methods: {
+    // 请求 API 以获取策略信息
+    fetchPolicyInfo() {
+      this.loading = true
+      this.error = null
+      axios
+        .get(`http://localhost:5060/route/show_policy`, { params: { router: this.selectedRouter }})
+        .then((response) => {
+          if (response.data && response.data.policies) {
+            this.policyData = response.data.policies // 保存策略数据
+          } else {
+            this.policyData = []
+            this.error = 'No policy data found in the response.'
+          }
+        })
+        .catch((error) => {
+          this.error = error.message || 'An error occurred while fetching policy data.'
+        })
+        .finally(() => {
+          this.loading = false
+        })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.show-policy {
+  font-family: Arial, sans-serif;
+  padding: 20px;
+}
+
+.router-selector {
+  margin-bottom: 20px;
+}
+
+ul.policy-list {
+  list-style-type: none;
+  padding-left: 0;
+}
+
+ul.policy-list li {
+  background-color: #ffffff;
+  margin-bottom: 5px;
+  padding: 5px;
+  border: 1px solid #ffffff;
+}
+
+.error-message {
+  color: red;
+  font-weight: bold;
+}
+</style>

src/views/route/show_sid.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="show-sid">
+    <h2>SID信息</h2>
+
+    <!-- 下拉选择路由器 -->
+    <div class="router-selector">
+      <label for="router">选择路由器:</label>
+      <select v-model="selectedRouter" @change="fetchSIDInfo">
+        <option value="r0">r0</option>
+        <option value="r3">r3</option>
+        <option value="r6">r6</option>
+      </select>
+    </div>
+
+    <!-- 显示加载提示 -->
+    <div v-if="loading">加载SID信息...</div>
+
+    <!-- 列表形式展示 SID 信息 -->
+    <ul v-if="!loading && sidData.length > 0" class="sid-list">
+      <li v-for="(sid, index) in sidData" :key="index">
+        {{ sid }}
+      </li>
+    </ul>
+
+    <!-- 如果没有 SID 数据则显示消息 -->
+    <div v-else-if="!loading && sidData.length === 0">
+      <p>No SID information available for the selected router.</p>
+    </div>
+
+    <!-- 错误信息 -->
+    <div v-if="error" class="error-message">
+      <p>Error loading SID information: {{ error }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+
+export default {
+  name: 'ShowSID',
+  data() {
+    return {
+      selectedRouter: 'r0', // 默认选择 r0
+      sidData: [],
+      loading: false,
+      error: null
+    }
+  },
+  mounted() {
+    // 组件挂载时请求默认路由器的 SID 信息
+    this.fetchSIDInfo()
+  },
+  methods: {
+    // 请求 API 以获取 SID 信息
+    fetchSIDInfo() {
+      this.loading = true
+      this.error = null
+      axios
+        .get(`http://localhost:5060/route/show_sid`, { params: { router: this.selectedRouter }})
+        .then((response) => {
+          if (response.data && response.data.localsids) {
+            this.sidData = response.data.localsids // 保存 SID 数据
+          } else {
+            this.sidData = []
+            this.error = 'No SID data found in the response.'
+          }
+        })
+        .catch((error) => {
+          this.error = error.message || 'An error occurred while fetching SID data.'
+        })
+        .finally(() => {
+          this.loading = false
+        })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.show-sid {
+  font-family: Arial, sans-serif;
+  padding: 20px;
+}
+
+.router-selector {
+  margin-bottom: 20px;
+}
+
+ul.sid-list {
+  list-style-type: none;
+  padding-left: 0;
+}
+
+ul.sid-list li {
+  background-color: #ffffff;
+  margin-bottom: 5px;
+  padding: 5px;
+  border: 1px solid #ffffff;
+}
+.error-message {
+  color: red;
+  font-weight: bold;
+}
+</style>

src/views/route/show_steer.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="show-steer">
+    <h2>流量引导: {{ selectedRouter }}</h2>
+
+    <!-- 路由器选择器 -->
+    <div class="router-selector">
+      <label for="router">选择路由器:</label>
+      <select v-model="selectedRouter" @change="fetchSteerInfo">
+        <option value="r0">r0</option>
+        <option value="r3">r3</option>
+        <option value="r6">r6</option>
+      </select>
+    </div>
+
+    <!-- 显示加载状态 -->
+    <div v-if="loading">加载引导信息...</div>
+
+    <!-- 列表形式展示策略信息 -->
+    <ul v-if="!loading && policyData.length > 0" class="steer-list">
+      <li v-for="(policy, index) in policyData" :key="index">
+        {{ policy }}
+      </li>
+    </ul>
+
+    <!-- 如果没有策略信息 -->
+    <div v-else-if="!loading && policyData.length === 0">
+      <p>No steer information available for the selected router.</p>
+    </div>
+
+    <!-- 错误信息 -->
+    <div v-if="error" class="error-message">
+      <p>Error loading steer information: {{ error }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+
+export default {
+  name: 'ShowSteer',
+  data() {
+    return {
+      selectedRouter: 'r0', // 默认选择 r0
+      policyData: [],
+      loading: false,
+      error: null
+    }
+  },
+  mounted() {
+    // 组件挂载时请求默认路由器的策略信息
+    this.fetchSteerInfo()
+  },
+  methods: {
+    // 请求 API 以获取策略信息
+    fetchSteerInfo() {
+      this.loading = true
+      this.error = null
+      axios
+        .get(`http://localhost:5060/route/show_steer`, { params: { router: this.selectedRouter }})
+        .then((response) => {
+          if (response.data && response.data.steering_policies) {
+            this.policyData = response.data.steering_policies // 保存策略数据
+          } else {
+            this.policyData = []
+            this.error = 'No policy data found in the response.'
+          }
+        })
+        .catch((error) => {
+          this.error = error.message || 'An error occurred while fetching policy data.'
+        })
+        .finally(() => {
+          this.loading = false
+        })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.show-steer {
+  font-family: Arial, sans-serif;
+  padding: 20px;
+}
+
+.router-selector {
+  margin-bottom: 20px;
+}
+
+ul.steer-list {
+  list-style-type: none;
+  padding-left: 0;
+}
+
+ul.steer-list li {
+  background-color: #ffffff;
+  margin-bottom: 5px;
+  padding: 5px;
+  border: 1px solid #ffffff;
+}
+
+.error-message {
+  color: red;
+  font-weight: bold;
+}
+</style>

src/views/route/steer.vue

@@ -0,0 +1,135 @@
+<template>
+  <div class="steer-policy">
+    <h2>更新引导策略</h2>
+
+    <!-- 输入表单 -->
+    <form @submit.prevent="submitSteerPolicy">
+      <div class="form-group">
+        <label for="router">路由器</label>
+        <select id="router" v-model="router" required>
+          <option disabled value="">选择路由器</option>
+          <option value="r0">路由器r0</option>
+          <option value="r3">路由器r3</option>
+          <option value="r6">路由器r6</option>
+        </select>
+      </div>
+
+      <div class="form-group">
+        <label for="bsid">绑定SID (BSID)</label>
+        <input id="bsid" v-model="bsid" type="text" required placeholder="fe00::1a">
+      </div>
+
+      <div class="form-group">
+        <label for="ip_prefix">目标IP</label>
+        <input id="ip_prefix" v-model="ip_prefix" type="text" required placeholder="10.10.0.0/24">
+      </div>
+
+      <button type="submit">添加引导策略</button>
+    </form>
+
+    <!-- 显示结果 -->
+    <div v-if="resultMessage" class="result-message">
+      <p><strong>{{ resultMessage }}</strong></p>
+      <pre>{{ result }}</pre>
+    </div>
+
+    <!-- 错误消息 -->
+    <div v-if="error" class="error-message">
+      <p>Error: {{ error }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+
+export default {
+  data() {
+    return {
+      router: '', // 路由器选择
+      bsid: '', // BSID
+      ip_prefix: '', // IP Prefix
+      resultMessage: '', // 返回的消息
+      result: '', // 返回的详细结果
+      error: null // 错误消息
+    }
+  },
+  methods: {
+    async submitSteerPolicy() {
+      try {
+        const data = {
+          bsid: this.bsid,
+          ip_prefix: this.ip_prefix
+        }
+
+        const response = await axios.post(`http://localhost:5060/route/steer?router=${this.router}`, data, {
+          headers: { 'Content-Type': 'application/json' }
+        })
+
+        this.resultMessage = response.data.message
+        this.result = response.data.result.join('\n') // 格式化结果信息
+        this.error = null
+      } catch (error) {
+        this.error = error.message
+        this.resultMessage = ''
+        this.result = ''
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.steer-policy {
+  max-width: 600px;
+  margin: 0 auto;
+  padding: 20px;
+  font-family: Arial, sans-serif;
+}
+
+.form-group {
+  margin-bottom: 15px;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 5px;
+}
+
+.form-group input, .form-group select {
+  width: 100%;
+  padding: 8px;
+  margin-bottom: 5px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+button {
+  padding: 10px 20px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: #0056b3;
+}
+
+.result-message, .error-message {
+  margin-top: 20px;
+  padding: 10px;
+  border-radius: 4px;
+}
+
+.result-message {
+  background-color: #e7f4e4;
+  color: #3c763d;
+}
+
+.error-message {
+  background-color: #f8d7da;
+  color: #721c24;
+}
+</style>

src/views/schedule/index.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="schedule-decision">
+    <h2>调度决策</h2>
+
+    <!-- 表格展示平均资源和评分 -->
+    <table class="decision-table">
+      <thead>
+        <tr>
+          <th>集群</th>
+          <th>平均空闲CPU (%)</th>
+          <th>平均空闲内存 (bytes)</th>
+          <th>平均空闲存储 (bytes)</th>
+          <th>分数</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(resource, index) in averageResources" :key="index" :class="{ best: clusters[index] === bestCluster }">
+          <td>{{ clusters[index] }}</td>
+          <td>{{ resource[0].toFixed(2) }}</td>
+          <td>{{ resource[1].toFixed(0).toLocaleString() }}</td>
+          <td>{{ resource[2].toFixed(0).toLocaleString() }}</td>
+          <td>{{ scores[index].toFixed(2) }}</td>
+        </tr>
+      </tbody>
+    </table>
+
+    <!-- 最佳集群展示 -->
+    <div class="best-cluster">
+      <h3>最佳集群: {{ bestCluster }}</h3>
+    </div>
+
+    <!-- 错误消息 -->
+    <div v-if="error" class="error-message">
+      <p>Error loading schedule data: {{ error }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+
+export default {
+  name: 'ScheduleDecision',
+  data() {
+    return {
+      clusters: ['hosta', 'hostb'],
+      averageResources: [],
+      scores: [],
+      bestCluster: '',
+      error: null
+    }
+  },
+  mounted() {
+    this.fetchScheduleDecision()
+  },
+  methods: {
+    fetchScheduleDecision() {
+      axios
+        .get('http://localhost:5060/schedule')
+        .then((response) => {
+          const data = response.data
+          this.averageResources = data.average_resource || []
+          this.scores = data.scores || []
+          this.bestCluster = data.best_cluster || ''
+        })
+        .catch((error) => {
+          this.error = error.message || 'An error occurred while fetching schedule data.'
+        })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.schedule-decision {
+  font-family: Arial, sans-serif;
+  padding: 20px;
+}
+
+table.decision-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: 20px;
+}
+
+table.decision-table th, table.decision-table td {
+  padding: 10px;
+  border: 1px solid #ddd;
+  text-align: center;
+}
+
+table.decision-table tr.best {
+  background-color: #e0f7fa;
+}
+
+.best-cluster h3 {
+  color: #00796b;
+}
+
+.error-message {
+  color: red;
+  font-weight: bold;
+}
+</style>