mirror of
https://github.com/PanJiaChen/vue-element-admin.git
synced 2025-04-05 19:41:51 +08:00
update route
This commit is contained in:
handsomewu
parent
7a8ee2a9b2
commit
b5bc579adc
@ -28,37 +28,13 @@ const chartsRouter = {
|
||||
path: 'show_policy',
|
||||
component: () => import('@/views/route/show_policy.vue'),
|
||||
name: 'ShowPolicy',
|
||||
meta: { title: '查看路由', noCache: true }
|
||||
meta: { title: '路由策略管理', noCache: true }
|
||||
},
|
||||
{
|
||||
path: 'show_steer',
|
||||
component: () => import('@/views/route/show_steer'),
|
||||
name: 'ShowSteer',
|
||||
meta: { title: '查看引导', noCache: true }
|
||||
},
|
||||
{
|
||||
path: 'add_policy',
|
||||
component: () => import('@/views/route/add_policy.vue'),
|
||||
name: 'AddPolicy',
|
||||
meta: { title: '添加路由', noCache: true }
|
||||
},
|
||||
{
|
||||
path: 'steer',
|
||||
component: () => import('@/views/route/steer.vue'),
|
||||
name: 'Steer',
|
||||
meta: { title: '更新引导', noCache: true }
|
||||
},
|
||||
{
|
||||
path: 'del_steer',
|
||||
component: () => import('@/views/route/del_steer.vue'),
|
||||
name: 'DelSteer',
|
||||
meta: { title: '删除引导', noCache: true }
|
||||
},
|
||||
{
|
||||
path: 'del_policy',
|
||||
component: () => import('@/views/route/del_policy.vue'),
|
||||
name: 'DelPolicy',
|
||||
meta: { title: '删除路由', noCache: true }
|
||||
meta: { title: '引导策略管理', noCache: true }
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -1,107 +1,171 @@
|
||||
<template>
|
||||
<div class="show-policy">
|
||||
<h2>SRv6路径: {{ selectedRouter }}</h2>
|
||||
<div class="policy-management">
|
||||
<div class="header">
|
||||
<h2>路由策略管理</h2>
|
||||
<el-button type="primary" @click="openAddPolicyDialog">添加策略</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 路由器选择器 -->
|
||||
<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>
|
||||
<label for="router-select">选择路由器: </label>
|
||||
<el-select v-model="selectedRouter" placeholder="选择路由器" @change="fetchPolicies">
|
||||
<el-option label="r0" value="r0" />
|
||||
<el-option label="r3" value="r3" />
|
||||
<el-option label="r6" value="r6" />
|
||||
</el-select>
|
||||
</div>
|
||||
|
||||
<!-- 显示加载状态 -->
|
||||
<div v-if="loading">加载路径信息...</div>
|
||||
<el-table :data="policies" border style="width: 100%" height="400">
|
||||
<el-table-column label="BSID" prop="BSID" />
|
||||
<el-table-column label="行为" prop="Behavior" />
|
||||
<el-table-column label="类型" prop="Type" />
|
||||
<el-table-column label="FIB 表" prop="FIB_table" />
|
||||
<el-table-column label="Segment 列表" prop="Segment_Lists" />
|
||||
<el-table-column label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="danger" icon="el-icon-delete" @click="deletePolicy(scope.row.BSID)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 列表形式展示策略信息 -->
|
||||
<ul v-if="!loading && policyData.length > 0" class="policy-list">
|
||||
<li v-for="(policy, index) in policyData" :key="index">
|
||||
{{ policy }}
|
||||
</li>
|
||||
</ul>
|
||||
<!-- 添加策略弹窗 -->
|
||||
<el-dialog
|
||||
title="添加SRv6路由策略"
|
||||
:visible.sync="isAddPolicyDialogVisible"
|
||||
width="400px"
|
||||
@close="resetForm"
|
||||
>
|
||||
<el-form ref="policyForm" :model="policyForm" label-width="100px">
|
||||
<el-form-item label="路由器" prop="router" :rules="[{ required: true, message: '请选择路由器', trigger: 'blur' }]">
|
||||
<el-select v-model="policyForm.router" placeholder="选择路由器">
|
||||
<el-option label="r0" value="r0" />
|
||||
<el-option label="r3" value="r3" />
|
||||
<el-option label="r6" value="r6" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 如果没有策略信息 -->
|
||||
<div v-else-if="!loading && policyData.length === 0">
|
||||
<p>No policy information available for the selected router.</p>
|
||||
</div>
|
||||
<el-form-item label="BSID" prop="bsid" :rules="[{ required: true, message: '请输入BSID', trigger: 'blur' }]">
|
||||
<el-input v-model="policyForm.bsid" placeholder="fe00::1a" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 错误信息 -->
|
||||
<div v-if="error" class="error-message">
|
||||
<p>Error loading policy information: {{ error }}</p>
|
||||
</div>
|
||||
<el-form-item label="SID列表" prop="sids" :rules="[{ required: true, message: '请输入SID', trigger: 'blur' }]">
|
||||
<el-input v-model="policyForm.sids" placeholder="fc00:1::a,fc00:2::a(逗号分隔)" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="isAddPolicyDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="submitPolicy">添加路由</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { API_URL } from '@/config/APIconfig'
|
||||
import axios from 'axios'
|
||||
import { API_URL } from '@/config/APIconfig'
|
||||
|
||||
export default {
|
||||
name: 'ShowPolicy',
|
||||
name: 'PolicyManagement',
|
||||
data() {
|
||||
return {
|
||||
selectedRouter: 'r0', // 默认选择 r0
|
||||
policyData: [],
|
||||
selectedRouter: 'r0', // 默认路由器
|
||||
policies: [], // 存储策略信息
|
||||
error: null,
|
||||
loading: false,
|
||||
error: null
|
||||
isAddPolicyDialogVisible: false, // 控制弹窗显示
|
||||
policyForm: {
|
||||
router: '',
|
||||
bsid: '',
|
||||
sids: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 组件挂载时请求默认路由器的策略信息
|
||||
this.fetchPolicyInfo()
|
||||
this.fetchPolicies()
|
||||
},
|
||||
methods: {
|
||||
// 请求 API 以获取策略信息
|
||||
fetchPolicyInfo() {
|
||||
this.loading = true
|
||||
this.error = null
|
||||
axios
|
||||
.get(API_URL + `/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.'
|
||||
// 获取策略信息
|
||||
fetchPolicies() {
|
||||
axios.get(`${API_URL}/route/show_policy?router=${this.selectedRouter}`)
|
||||
.then(response => {
|
||||
if (response.data.policies) {
|
||||
this.policies = response.data.policies
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
this.error = error.message || 'An error occurred while fetching policy data.'
|
||||
.catch(error => {
|
||||
console.error('获取策略数据失败:', error)
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false
|
||||
},
|
||||
// 删除策略
|
||||
deletePolicy(bsid) {
|
||||
axios.delete(`${API_URL}/route/del_policy?router=${this.selectedRouter}`, {
|
||||
data: {
|
||||
bsid: bsid // 将 bsid 放在请求体中
|
||||
}
|
||||
})
|
||||
.then(response => {
|
||||
if (response.data.success) {
|
||||
this.$message.success('删除成功')
|
||||
this.fetchPolicies() // 刷新策略列表
|
||||
} else {
|
||||
this.$message.error('删除失败')
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('删除策略失败:', error)
|
||||
this.$message.error('删除失败')
|
||||
})
|
||||
},
|
||||
// 打开添加策略弹窗
|
||||
openAddPolicyDialog() {
|
||||
this.isAddPolicyDialogVisible = true
|
||||
},
|
||||
// 提交添加策略
|
||||
submitPolicy() {
|
||||
axios.post(`${API_URL}/route/add_policy?router=${this.policyForm.router}`, {
|
||||
bsid: this.policyForm.bsid,
|
||||
sids: this.policyForm.sids
|
||||
})
|
||||
.then(response => {
|
||||
if (response.data.success) {
|
||||
this.$message.success('添加成功')
|
||||
this.isAddPolicyDialogVisible = false
|
||||
this.fetchPolicies() // 刷新策略列表
|
||||
} else {
|
||||
this.$message.error('添加失败')
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('添加策略失败:', error)
|
||||
this.$message.error('添加失败')
|
||||
})
|
||||
},
|
||||
// 重置表单
|
||||
resetForm() {
|
||||
this.policyForm.bsid = ''
|
||||
this.policyForm.sids = ''
|
||||
this.policyForm.router = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.show-policy {
|
||||
.policy-management {
|
||||
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;
|
||||
.el-table {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,107 +1,168 @@
|
||||
<template>
|
||||
<div class="show-steer">
|
||||
<h2>流量引导: {{ selectedRouter }}</h2>
|
||||
<div class="steer-management">
|
||||
<div class="header">
|
||||
<h2>引导策略管理</h2>
|
||||
<el-button type="primary" @click="openAddPolicyDialog">添加引导</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 路由器选择器 -->
|
||||
<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>
|
||||
<label for="router-select">选择路由器: </label>
|
||||
<el-select v-model="selectedRouter" placeholder="选择路由器" @change="fetchPolicies">
|
||||
<el-option label="r0" value="r0" />
|
||||
<el-option label="r3" value="r3" />
|
||||
<el-option label="r6" value="r6" />
|
||||
</el-select>
|
||||
</div>
|
||||
|
||||
<!-- 显示加载状态 -->
|
||||
<div v-if="loading">加载引导信息...</div>
|
||||
<el-table :data="policies" border style="width: 100%" height="400">
|
||||
<el-table-column label="BSID" prop="BSID" />
|
||||
<el-table-column label="目标IP" prop="Traffic" />
|
||||
<el-table-column label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="danger" icon="el-icon-delete" @click="deletePolicy(scope.row.Traffic)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 列表形式展示策略信息 -->
|
||||
<ul v-if="!loading && policyData.length > 0" class="steer-list">
|
||||
<li v-for="(policy, index) in policyData" :key="index">
|
||||
{{ policy }}
|
||||
</li>
|
||||
</ul>
|
||||
<!-- 添加策略弹窗 -->
|
||||
<el-dialog
|
||||
title="添加SRv6引导策略"
|
||||
:visible.sync="isAddPolicyDialogVisible"
|
||||
width="400px"
|
||||
@close="resetForm"
|
||||
>
|
||||
<el-form ref="policyForm" :model="policyForm" label-width="100px">
|
||||
<el-form-item label="路由器" prop="router" :rules="[{ required: true, message: '请选择路由器', trigger: 'blur' }]">
|
||||
<el-select v-model="policyForm.router" placeholder="选择路由器">
|
||||
<el-option label="r0" value="r0" />
|
||||
<el-option label="r3" value="r3" />
|
||||
<el-option label="r6" value="r6" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 如果没有策略信息 -->
|
||||
<div v-else-if="!loading && policyData.length === 0">
|
||||
<p>No steer information available for the selected router.</p>
|
||||
</div>
|
||||
<el-form-item label="BSID" prop="bsid" :rules="[{ required: true, message: '请输入BSID', trigger: 'blur' }]">
|
||||
<el-input v-model="policyForm.bsid" placeholder="fe00::1a" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 错误信息 -->
|
||||
<div v-if="error" class="error-message">
|
||||
<p>Error loading steer information: {{ error }}</p>
|
||||
</div>
|
||||
<el-form-item label="目标IP" prop="sids" :rules="[{ required: true, message: '请输入IP', trigger: 'blur' }]">
|
||||
<el-input v-model="policyForm.ip" placeholder="10.0.10.0/24" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="isAddPolicyDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="submitPolicy">添加路由</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { API_URL } from '@/config/APIconfig'
|
||||
import axios from 'axios'
|
||||
import { API_URL } from '@/config/APIconfig'
|
||||
|
||||
export default {
|
||||
name: 'ShowSteer',
|
||||
name: 'PolicyManagement',
|
||||
data() {
|
||||
return {
|
||||
selectedRouter: 'r0', // 默认选择 r0
|
||||
policyData: [],
|
||||
selectedRouter: 'r0', // 默认路由器
|
||||
policies: [], // 存储策略信息
|
||||
error: null,
|
||||
loading: false,
|
||||
error: null
|
||||
isAddPolicyDialogVisible: false, // 控制弹窗显示
|
||||
policyForm: {
|
||||
router: '',
|
||||
bsid: '',
|
||||
ip: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 组件挂载时请求默认路由器的策略信息
|
||||
this.fetchSteerInfo()
|
||||
this.fetchPolicies()
|
||||
},
|
||||
methods: {
|
||||
// 请求 API 以获取策略信息
|
||||
fetchSteerInfo() {
|
||||
this.loading = true
|
||||
this.error = null
|
||||
axios
|
||||
.get(API_URL + `/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.'
|
||||
// 获取策略信息
|
||||
fetchPolicies() {
|
||||
axios.get(`${API_URL}/route/show_steer?router=${this.selectedRouter}`)
|
||||
.then(response => {
|
||||
if (response.data.steer) {
|
||||
this.policies = response.data.steer
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
this.error = error.message || 'An error occurred while fetching policy data.'
|
||||
.catch(error => {
|
||||
console.error('获取引导策略数据失败:', error)
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false
|
||||
},
|
||||
// 删除策略
|
||||
deletePolicy(ip) {
|
||||
axios.delete(`${API_URL}/route/del_steer?router=${this.selectedRouter}`, {
|
||||
data: {
|
||||
ip_prefix: ip
|
||||
}
|
||||
})
|
||||
.then(response => {
|
||||
if (response.data.success) {
|
||||
this.$message.success('删除成功')
|
||||
this.fetchPolicies() // 刷新策略列表
|
||||
} else {
|
||||
this.$message.error('删除失败')
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('删除引导失败:', error)
|
||||
this.$message.error('删除失败')
|
||||
})
|
||||
},
|
||||
// 打开添加策略弹窗
|
||||
openAddPolicyDialog() {
|
||||
this.isAddPolicyDialogVisible = true
|
||||
},
|
||||
// 提交添加策略
|
||||
submitPolicy() {
|
||||
axios.post(`${API_URL}/route/steer?router=${this.policyForm.router}`, {
|
||||
bsid: this.policyForm.bsid,
|
||||
ip_prefix: this.policyForm.ip
|
||||
})
|
||||
.then(response => {
|
||||
if (response.data.success) {
|
||||
this.$message.success('添加成功')
|
||||
this.isAddPolicyDialogVisible = false
|
||||
this.fetchPolicies() // 刷新策略列表
|
||||
} else {
|
||||
this.$message.error('添加失败')
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('添加引导策略失败:', error)
|
||||
this.$message.error('添加失败')
|
||||
})
|
||||
},
|
||||
// 重置表单
|
||||
resetForm() {
|
||||
this.policyForm.bsid = ''
|
||||
this.policyForm.ip = ''
|
||||
this.policyForm.router = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.show-steer {
|
||||
.steer-management {
|
||||
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;
|
||||
.el-table {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user