shiran/ApiServer-Web-admin_dashboard_pc
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:对接ACS容器和虚拟机

Browse Source
This commit is contained in:
2256907009
2025-09-11 22:57:54 +08:00
parent 67ce6f66ac
commit d9021caca2
18 changed files with 13389 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/acs/nodes/VmDetail.vue
+148 -10
View File
@@ -141,6 +141,11 @@
<!-- 操作按钮 -->
<div class="action-buttons">
<el-button
type="primary" @click="handleOpen">
<el-icon><VideoPlay /></el-icon>开通
</el-button>
<el-button
type="success"
:disabled="vmInfo.state == 2 || vmInfo.state == 0 || vmInfo.state == 1 || vmInfo.state == 4 || vmInfo.state == 5 || vmInfo.state == 6"
@@ -155,6 +160,20 @@
>
<el-icon><VideoPause /></el-icon>关机
</el-button>
<el-button
type="info"
:disabled="vmInfo.state != 2"
@click="handlePause"
>
<el-icon><VideoPause /></el-icon>暂停
</el-button>
<el-button
type="success"
:disabled="vmInfo.state != 7"
@click="handleUnpause"
>
<el-icon><VideoPlay /></el-icon>恢复
</el-button>
<el-button
type="info"
:disabled="vmInfo.state != 2"
@@ -189,13 +208,20 @@
>
<el-icon><Warning /></el-icon>退出救援模式
</el-button>
<el-button
type="danger"
:disabled="vmInfo.state == 0 || vmInfo.state == 1 || vmInfo.state == 4 || vmInfo.state == 5 || vmInfo.state == 6"
@click="handleDelete"
>
<el-icon><Delete /></el-icon>删除虚拟机
</el-button>
</div>
<!-- 主要内容区域 -->
<div class="content-wrapper">
<el-tabs type="border-card" class="main-tabs">
<el-tabs type="border-card" class="main-tabs" v-model="activeTabName" @tab-click="handleTabClick">
<!-- 虚拟机操作日志 -->
<el-tab-pane label="虚拟机操作日志">
<el-tab-pane label="虚拟机操作日志" name="0">
<div class="tab-header">
<h3 class="tab-title">操作日志</h3>
</div>
@@ -229,7 +255,7 @@
</el-tab-pane>
<!-- 实例监控 -->
<el-tab-pane label="实例监控">
<el-tab-pane label="实例监控" name="1">
<div class="tab-header">
<h3 class="tab-title">实例监控</h3>
<div class="date-filter">
@@ -294,7 +320,7 @@
</el-tab-pane>
<!-- 虚拟机网络管理 -->
<el-tab-pane label="虚拟机网络管理">
<el-tab-pane label="虚拟机网络管理" name="2">
<div class="tab-header">
<h3 class="tab-title">网络管理</h3>
<el-button
@@ -360,7 +386,7 @@
</el-tab-pane>
<!-- 端口管理 -->
<el-tab-pane label="端口管理">
<el-tab-pane label="端口管理" name="3">
<div class="tab-header">
<h3 class="tab-title">端口列表</h3>
<el-button
@@ -414,7 +440,7 @@
</el-tab-pane>
<!-- 快照列表 -->
<el-tab-pane label="快照列表">
<el-tab-pane label="快照列表" name="4">
<div class="tab-header">
<h3 class="tab-title">快照管理</h3>
<el-button
@@ -463,7 +489,7 @@
</el-tab-pane>
<!-- 数据卷信息 -->
<el-tab-pane label="数据卷信息">
<el-tab-pane label="数据卷信息" name="5">
<div class="tab-header">
<h3 class="tab-title">数据卷列表</h3>
<el-button
@@ -774,7 +800,11 @@ import {
addVolume,
deleteVolume,
updateVolume,
getInstanceList
getInstanceList,
openInstance,
pauseInstance,
unpauseInstance,
deleteInstance
} from '@/utils/acs/server';
import {
Mirrorinfo,
@@ -798,6 +828,14 @@ const route = useRoute();
const vmInfo = ref({});
const loading = ref(false);
// 标签页相关
const activeTabName = ref('0'); // 默认选中第一个标签
// 处理标签页点击
const handleTabClick = (tab) => {
localStorage.setItem('vmDetailActiveTab', tab.index);
};
// 端口管理
const portsList = ref([]);
const portsLoading = ref(false);
@@ -1004,6 +1042,17 @@ const reinstallRules = {
const reinstalling = ref(false);
const imagesList = ref([]);
//开通虚拟机
const handleOpen = async () => {
const res = await openInstance(route.query.instance_id)
console.log("开通虚拟机",res)
if (res.data.code === 200) {
ElMessage.success(res.data.msg);
} else {
ElMessage.error(res.data.msg);
}
}
// 获取镜像列表
const fetchImagesList = async () => {
try {
@@ -1111,6 +1160,12 @@ const fetchDataVolumesList = async () => {
// 初始化数据
onMounted(() => {
if (route.query.instance_id) {
// 恢复上次选中的标签页
const savedTab = localStorage.getItem('vmDetailActiveTab');
if (savedTab) {
activeTabName.value = savedTab;
}
fetchVmInfo();
fetchPortsList();
fetchLogsList();
@@ -1424,6 +1479,83 @@ const handleExitRescue = async () => {
}
};
// 暂停虚拟机
const handlePause = async () => {
try {
ElMessageBox.confirm('确定要暂停该虚拟机吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(async () => {
const formData = new FormData();
const res = await pauseInstance(formData, route.query.instance_id);
if (res && res.data && res.data.code === 200) {
ElMessage.success('暂停指令已发送');
setTimeout(() => {
fetchVmInfo();
}, 2000);
} else {
ElMessage.error('暂停失败: ' + (res.data.message || '未知错误'));
}
}).catch(() => {});
} catch (error) {
console.error('暂停虚拟机出错:', error);
ElMessage.error('暂停虚拟机出错');
}
};
// 恢复虚拟机
const handleUnpause = async () => {
try {
ElMessageBox.confirm('确定要恢复该虚拟机吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(async () => {
const res = await unpauseInstance(route.query.instance_id);
if (res && res.data && res.data.code === 200) {
ElMessage.success('恢复指令已发送');
setTimeout(() => {
fetchVmInfo();
}, 2000);
} else {
ElMessage.error('恢复失败: ' + (res.data.message || '未知错误'));
}
}).catch(() => {});
} catch (error) {
console.error('恢复虚拟机出错:', error);
ElMessage.error('恢复虚拟机出错');
}
};
// 删除虚拟机
const handleDelete = async () => {
try {
ElMessageBox.confirm('确定要删除该虚拟机吗？此操作不可恢复！', '警告', {
confirmButtonText: '确定删除',
cancelButtonText: '取消',
type: 'error',
dangerouslyUseHTMLString: true,
message: '<div style="color: red; font-weight: bold;">⚠️ 警告：删除虚拟机将永久删除所有数据，此操作不可恢复！</div>'
}).then(async () => {
const formData = new FormData();
const res = await deleteInstance(route.query.instance_id, formData);
if (res && res.data && res.data.code === 200) {
ElMessage.success('虚拟机已删除');
// 删除成功后返回虚拟机列表页面
setTimeout(() => {
router.push('/acs/nodes');
}, 2000);
} else {
ElMessage.error('删除失败: ' + (res.data.message || '未知错误'));
}
}).catch(() => {});
} catch (error) {
console.error('删除虚拟机出错:', error);
ElMessage.error('删除虚拟机出错');
}
};
function statusMap(data) {
const statusMap = {
0: "未支付",
@@ -1432,7 +1564,8 @@ function statusMap(data) {
3: "关机",
4: "重装中",
5: "正在创建快照",
6: "正在恢复快照"
6: "正在恢复快照",
7: "已暂停"
};
return statusMap[data] || "未知状态";
}
@@ -1454,7 +1587,8 @@ function statusColor(data) {
3: "secondary", // 关机
4: "info", // 重装中
5: "primary", // 正在创建快照
6: "info" // 正在恢复快照
6: "info", // 正在恢复快照
7: "warning" // 已暂停
};
return statusMap[data] || "default"; // 默认颜色类名
}
@@ -1571,6 +1705,8 @@ const getStatusType = (state) => {
return 'success';
} else if (state == 4 || state == 5 || state == 6) {
return 'warning';
} else if (state == 7) {
return 'info'; // 暂停状态
} else {
return 'danger';
}
@@ -1593,6 +1729,8 @@ const getStatusText = (state) => {
return '创建快照中';
case 6:
return '恢复快照中';
case 7:
return '已暂停';
default:
return '未知状态';
}