mirror of
https://github.com/PanJiaChen/vue-element-admin.git
synced 2025-04-06 03:57:53 +08:00
update route
This commit is contained in:
handsomewu
parent
7a8ee2a9b2
commit
b5bc579adc
@ -28,37 +28,13 @@ const chartsRouter = {
|
|||||||
path: 'show_policy',
|
path: 'show_policy',
|
||||||
component: () => import('@/views/route/show_policy.vue'),
|
component: () => import('@/views/route/show_policy.vue'),
|
||||||
name: 'ShowPolicy',
|
name: 'ShowPolicy',
|
||||||
meta: { title: '查看路由', noCache: true }
|
meta: { title: '路由策略管理', noCache: true }
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'show_steer',
|
path: 'show_steer',
|
||||||
component: () => import('@/views/route/show_steer'),
|
component: () => import('@/views/route/show_steer'),
|
||||||
name: 'ShowSteer',
|
name: 'ShowSteer',
|
||||||
meta: { title: '查看引导', noCache: true }
|
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 }
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,107 +1,171 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="show-policy">
|
<div class="policy-management">
|
||||||
<h2>SRv6路径: {{ selectedRouter }}</h2>
|
<div class="header">
|
||||||
|
<h2>路由策略管理</h2>
|
||||||
|
<el-button type="primary" @click="openAddPolicyDialog">添加策略</el-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- 路由器选择器 -->
|
|
||||||
<div class="router-selector">
|
<div class="router-selector">
|
||||||
<label for="router">选择路由器:</label>
|
<label for="router-select">选择路由器: </label>
|
||||||
<select v-model="selectedRouter" @change="fetchPolicyInfo">
|
<el-select v-model="selectedRouter" placeholder="选择路由器" @change="fetchPolicies">
|
||||||
<option value="r0">r0</option>
|
<el-option label="r0" value="r0" />
|
||||||
<option value="r3">r3</option>
|
<el-option label="r3" value="r3" />
|
||||||
<option value="r6">r6</option>
|
<el-option label="r6" value="r6" />
|
||||||
</select>
|
</el-select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 显示加载状态 -->
|
<el-table :data="policies" border style="width: 100%" height="400">
|
||||||
<div v-if="loading">加载路径信息...</div>
|
<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">
|
<el-dialog
|
||||||
<li v-for="(policy, index) in policyData" :key="index">
|
title="添加SRv6路由策略"
|
||||||
{{ policy }}
|
:visible.sync="isAddPolicyDialogVisible"
|
||||||
</li>
|
width="400px"
|
||||||
</ul>
|
@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>
|
||||||
|
|
||||||
<!-- 如果没有策略信息 -->
|
<el-form-item label="BSID" prop="bsid" :rules="[{ required: true, message: '请输入BSID', trigger: 'blur' }]">
|
||||||
<div v-else-if="!loading && policyData.length === 0">
|
<el-input v-model="policyForm.bsid" placeholder="fe00::1a" />
|
||||||
<p>No policy information available for the selected router.</p>
|
</el-form-item>
|
||||||
</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(逗号分隔)" />
|
||||||
<div v-if="error" class="error-message">
|
</el-form-item>
|
||||||
<p>Error loading policy information: {{ error }}</p>
|
</el-form>
|
||||||
|
|
||||||
|
<div slot="footer" class="dialog-footer">
|
||||||
|
<el-button @click="isAddPolicyDialogVisible = false">取消</el-button>
|
||||||
|
<el-button type="primary" @click="submitPolicy">添加路由</el-button>
|
||||||
</div>
|
</div>
|
||||||
|
</el-dialog>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { API_URL } from '@/config/APIconfig'
|
|
||||||
import axios from 'axios'
|
import axios from 'axios'
|
||||||
|
import { API_URL } from '@/config/APIconfig'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'ShowPolicy',
|
name: 'PolicyManagement',
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
selectedRouter: 'r0', // 默认选择 r0
|
selectedRouter: 'r0', // 默认路由器
|
||||||
policyData: [],
|
policies: [], // 存储策略信息
|
||||||
|
error: null,
|
||||||
loading: false,
|
loading: false,
|
||||||
error: null
|
isAddPolicyDialogVisible: false, // 控制弹窗显示
|
||||||
|
policyForm: {
|
||||||
|
router: '',
|
||||||
|
bsid: '',
|
||||||
|
sids: ''
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
// 组件挂载时请求默认路由器的策略信息
|
this.fetchPolicies()
|
||||||
this.fetchPolicyInfo()
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 请求 API 以获取策略信息
|
// 获取策略信息
|
||||||
fetchPolicyInfo() {
|
fetchPolicies() {
|
||||||
this.loading = true
|
axios.get(`${API_URL}/route/show_policy?router=${this.selectedRouter}`)
|
||||||
this.error = null
|
.then(response => {
|
||||||
axios
|
if (response.data.policies) {
|
||||||
.get(API_URL + `/route/show_policy`, { params: { router: this.selectedRouter }})
|
this.policies = response.data.policies
|
||||||
.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) => {
|
.catch(error => {
|
||||||
this.error = error.message || 'An error occurred while fetching policy data.'
|
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>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.show-policy {
|
.policy-management {
|
||||||
font-family: Arial, sans-serif;
|
font-family: Arial, sans-serif;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.router-selector {
|
.el-table {
|
||||||
margin-bottom: 20px;
|
margin-top: 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 {
|
.error-message {
|
||||||
color: red;
|
color: red;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.el-button {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,107 +1,168 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="show-steer">
|
<div class="steer-management">
|
||||||
<h2>流量引导: {{ selectedRouter }}</h2>
|
<div class="header">
|
||||||
|
<h2>引导策略管理</h2>
|
||||||
|
<el-button type="primary" @click="openAddPolicyDialog">添加引导</el-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- 路由器选择器 -->
|
|
||||||
<div class="router-selector">
|
<div class="router-selector">
|
||||||
<label for="router">选择路由器:</label>
|
<label for="router-select">选择路由器: </label>
|
||||||
<select v-model="selectedRouter" @change="fetchSteerInfo">
|
<el-select v-model="selectedRouter" placeholder="选择路由器" @change="fetchPolicies">
|
||||||
<option value="r0">r0</option>
|
<el-option label="r0" value="r0" />
|
||||||
<option value="r3">r3</option>
|
<el-option label="r3" value="r3" />
|
||||||
<option value="r6">r6</option>
|
<el-option label="r6" value="r6" />
|
||||||
</select>
|
</el-select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 显示加载状态 -->
|
<el-table :data="policies" border style="width: 100%" height="400">
|
||||||
<div v-if="loading">加载引导信息...</div>
|
<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">
|
<el-dialog
|
||||||
<li v-for="(policy, index) in policyData" :key="index">
|
title="添加SRv6引导策略"
|
||||||
{{ policy }}
|
:visible.sync="isAddPolicyDialogVisible"
|
||||||
</li>
|
width="400px"
|
||||||
</ul>
|
@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>
|
||||||
|
|
||||||
<!-- 如果没有策略信息 -->
|
<el-form-item label="BSID" prop="bsid" :rules="[{ required: true, message: '请输入BSID', trigger: 'blur' }]">
|
||||||
<div v-else-if="!loading && policyData.length === 0">
|
<el-input v-model="policyForm.bsid" placeholder="fe00::1a" />
|
||||||
<p>No steer information available for the selected router.</p>
|
</el-form-item>
|
||||||
</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" />
|
||||||
<div v-if="error" class="error-message">
|
</el-form-item>
|
||||||
<p>Error loading steer information: {{ error }}</p>
|
</el-form>
|
||||||
|
|
||||||
|
<div slot="footer" class="dialog-footer">
|
||||||
|
<el-button @click="isAddPolicyDialogVisible = false">取消</el-button>
|
||||||
|
<el-button type="primary" @click="submitPolicy">添加路由</el-button>
|
||||||
</div>
|
</div>
|
||||||
|
</el-dialog>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { API_URL } from '@/config/APIconfig'
|
|
||||||
import axios from 'axios'
|
import axios from 'axios'
|
||||||
|
import { API_URL } from '@/config/APIconfig'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'ShowSteer',
|
name: 'PolicyManagement',
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
selectedRouter: 'r0', // 默认选择 r0
|
selectedRouter: 'r0', // 默认路由器
|
||||||
policyData: [],
|
policies: [], // 存储策略信息
|
||||||
|
error: null,
|
||||||
loading: false,
|
loading: false,
|
||||||
error: null
|
isAddPolicyDialogVisible: false, // 控制弹窗显示
|
||||||
|
policyForm: {
|
||||||
|
router: '',
|
||||||
|
bsid: '',
|
||||||
|
ip: ''
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
// 组件挂载时请求默认路由器的策略信息
|
this.fetchPolicies()
|
||||||
this.fetchSteerInfo()
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 请求 API 以获取策略信息
|
// 获取策略信息
|
||||||
fetchSteerInfo() {
|
fetchPolicies() {
|
||||||
this.loading = true
|
axios.get(`${API_URL}/route/show_steer?router=${this.selectedRouter}`)
|
||||||
this.error = null
|
.then(response => {
|
||||||
axios
|
if (response.data.steer) {
|
||||||
.get(API_URL + `/route/show_steer`, { params: { router: this.selectedRouter }})
|
this.policies = response.data.steer
|
||||||
.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) => {
|
.catch(error => {
|
||||||
this.error = error.message || 'An error occurred while fetching policy data.'
|
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>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.show-steer {
|
.steer-management {
|
||||||
font-family: Arial, sans-serif;
|
font-family: Arial, sans-serif;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.router-selector {
|
.el-table {
|
||||||
margin-bottom: 20px;
|
margin-top: 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 {
|
.error-message {
|
||||||
color: red;
|
color: red;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.el-button {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user