fix:添加审计和全局
This commit is contained in:
@@ -181,7 +181,7 @@
|
||||
<el-dialog
|
||||
v-model="formDialogVisible"
|
||||
:title="editOr ? '编辑镜像' : '上传镜像'"
|
||||
width="60%"
|
||||
width="45%"
|
||||
:before-close="handleDialogClose"
|
||||
>
|
||||
<el-form :model="form" label-width="120px" :rules="rules" ref="imageFormRef">
|
||||
@@ -195,12 +195,18 @@
|
||||
<el-form-item label="展示名称" prop="show_name">
|
||||
<el-input v-model="form.show_name" placeholder="请输入展示名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="分类ID" prop="class_id">
|
||||
<el-form-item label="分类" prop="image_class_id" v-if="editOr == true">
|
||||
<el-select v-model="form.image_class_id" placeholder="请选择分类">
|
||||
<el-option v-for="item in options" :key="item.class_id" :label="item.name" :value="item.class_id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="分类ID" prop="class_id">
|
||||
<el-input v-model="form.class_id" placeholder="请输入分类ID" />
|
||||
</el-form-item>
|
||||
<el-form-item label="分类名称" prop="class_name">
|
||||
<el-input v-model="form.class_name" placeholder="请输入分类名称" />
|
||||
</el-form-item>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="图标">
|
||||
<div class="image-icon-upload">
|
||||
<img v-if="form.image_ico" :src="mainUrl + form.image_ico" class="preview-icon" />
|
||||
@@ -391,7 +397,7 @@ import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { getServer } from '@/utils/acs/server'
|
||||
import {
|
||||
getMirrorList, uploadMirror, editMirror, delMirror,
|
||||
syncMirror, getUserMirrorList, pullMirror
|
||||
syncMirror, getUserMirrorList, pullMirror, getImageTypeList
|
||||
} from '@/utils/acs/mirror'
|
||||
import { uploadFile, getFileList } from '@/utils/acs/message'
|
||||
// import { message } from '@/utils/acs/message'
|
||||
@@ -410,6 +416,7 @@ const resetSearch = () => {
|
||||
searchForm.name = ''
|
||||
handleSearch()
|
||||
}
|
||||
const options = ref([])
|
||||
|
||||
// 表格数据
|
||||
const loading = ref(false)
|
||||
@@ -710,6 +717,20 @@ const addnet = (data) => {
|
||||
const delProt = (index) => {
|
||||
prot_data.value.splice(index, 1)
|
||||
}
|
||||
// 获取镜像分类列表
|
||||
const fetchCategoryList = async (serverId) => {
|
||||
try {
|
||||
const response = await getImageTypeList(serverId)
|
||||
if (response.data.code === 200) {
|
||||
options.value = response.data.data || []
|
||||
} else {
|
||||
ElMessage.error('获取镜像分类失败：' + response.data.message)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取镜像分类出错：', error)
|
||||
ElMessage.error('获取镜像分类列表失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 编辑镜像
|
||||
const handleEdit = async (data) => {
|
||||
@@ -722,6 +743,8 @@ const handleEdit = async (data) => {
|
||||
id: item.plan_id,
|
||||
}
|
||||
})
|
||||
await fetchCategoryList(data.server_id)
|
||||
|
||||
} else {
|
||||
planlist.value = []
|
||||
}
|
||||
@@ -904,6 +927,7 @@ const uploadImage = async () => {
|
||||
return acc
|
||||
}, {})
|
||||
form.env = JSON.stringify(env)
|
||||
form.class_id = form.image_class_id
|
||||
|
||||
if (editOr.value == true) {
|
||||
let res = await editMirror(form)
|
||||
|
||||
@@ -143,13 +143,13 @@
|
||||
<el-form-item label="镜像名称" prop="name">
|
||||
<el-input v-model="imageForm.name" placeholder="请输入镜像名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="文件路径" prop="path" v-if="!editOr">
|
||||
<el-form-item label="文件路径" prop="path" v-if="editOr == true">
|
||||
<el-input v-model="imageForm.path" placeholder="请输入镜像文件路径" />
|
||||
</el-form-item>
|
||||
<el-form-item label="展示名称" prop="show_name">
|
||||
<el-input v-model="imageForm.show_name" placeholder="请输入展示名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="分类" prop="class_id" v-if="!editOr">
|
||||
<el-form-item label="分类" prop="class_id" v-if="editOr == true">
|
||||
<el-select v-model="imageForm.class_id" placeholder="请选择分类" clearable style="width: 100%">
|
||||
<el-option v-for="item in categoryList" :key="item.class_id" :label="item.name" :value="item.class_id" />
|
||||
</el-select>
|
||||
|
||||
+188
-229
@@ -273,46 +273,18 @@
|
||||
|
||||
<div class="monitor-charts" v-loading="monitorLoading">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-col :span="24">
|
||||
<el-card class="chart-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>CPU使用率</span>
|
||||
<span>实时监控</span>
|
||||
<div class="monitor-stats">
|
||||
<span class="stat-item">CPU: {{ latestCpuUsage }}%</span>
|
||||
<span class="stat-item">内存: {{ latestMemoryUsage }}MB</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div ref="cpuChart" class="chart"></div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-card class="chart-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>内存使用率</span>
|
||||
</div>
|
||||
</template>
|
||||
<div ref="memoryChart" class="chart"></div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20" style="margin-top: 20px;">
|
||||
<el-col :span="12">
|
||||
<el-card class="chart-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>磁盘使用率</span>
|
||||
</div>
|
||||
</template>
|
||||
<div ref="diskChart" class="chart"></div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-card class="chart-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>网络流量</span>
|
||||
</div>
|
||||
</template>
|
||||
<div ref="networkChart" class="chart"></div>
|
||||
<div ref="realTimeChart" class="chart"></div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@@ -804,7 +776,8 @@ import {
|
||||
openInstance,
|
||||
pauseInstance,
|
||||
unpauseInstance,
|
||||
deleteInstance
|
||||
deleteInstance,
|
||||
getInstanceStatus
|
||||
} from '@/utils/acs/server';
|
||||
import {
|
||||
Mirrorinfo,
|
||||
@@ -867,14 +840,12 @@ const monitorDateRange = ref([
|
||||
new Date(new Date().getTime() - 24 * 60 * 60 * 1000), // 默认24小时前
|
||||
new Date() // 当前时间
|
||||
]);
|
||||
const cpuChart = ref(null);
|
||||
const memoryChart = ref(null);
|
||||
const diskChart = ref(null);
|
||||
const networkChart = ref(null);
|
||||
let cpuChartInstance = null;
|
||||
let memoryChartInstance = null;
|
||||
let diskChartInstance = null;
|
||||
let networkChartInstance = null;
|
||||
const realTimeChart = ref(null);
|
||||
let realTimeChartInstance = null;
|
||||
|
||||
// 最新的监控数据
|
||||
const latestCpuUsage = ref(0);
|
||||
const latestMemoryUsage = ref(0);
|
||||
|
||||
// 日期选择器快捷选项
|
||||
const dateRangeShortcuts = [
|
||||
@@ -1156,6 +1127,13 @@ const fetchDataVolumesList = async () => {
|
||||
volumesLoading.value = false;
|
||||
}
|
||||
};
|
||||
const fetchInstanceStatus = async () => {
|
||||
const res = await getInstanceStatus(route.query.instance_id);
|
||||
console.log("获取虚拟机状态",res)
|
||||
if (res && res.data && res.data.data.data.state === 200) {
|
||||
vmInfo.value.state = res.data.data;
|
||||
}
|
||||
};
|
||||
|
||||
// 初始化数据
|
||||
onMounted(() => {
|
||||
@@ -1173,6 +1151,7 @@ onMounted(() => {
|
||||
fetchNetworkRulesList();
|
||||
fetchSnapshotsList();
|
||||
fetchDataVolumesList();
|
||||
fetchInstanceStatus();
|
||||
|
||||
// 延迟初始化图表，确保DOM已经渲染
|
||||
setTimeout(() => {
|
||||
@@ -1738,148 +1717,152 @@ const getStatusText = (state) => {
|
||||
|
||||
// 初始化图表
|
||||
const initCharts = () => {
|
||||
if (!cpuChart.value || !memoryChart.value || !diskChart.value || !networkChart.value) return;
|
||||
if (!realTimeChart.value) return;
|
||||
|
||||
// 初始化CPU图表
|
||||
cpuChartInstance = echarts.init(cpuChart.value);
|
||||
const cpuOption = {
|
||||
tooltip: {
|
||||
formatter: '{a} <br/>{b} : {c}%'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'CPU',
|
||||
type: 'gauge',
|
||||
detail: { formatter: '{value}%' },
|
||||
data: [{ value: 0, name: '使用率' }],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 30,
|
||||
color: [
|
||||
[0.3, '#67C23A'],
|
||||
[0.7, '#E6A23C'],
|
||||
[1, '#F56C6C']
|
||||
]
|
||||
}
|
||||
}
|
||||
// 初始化实时监控图表
|
||||
realTimeChartInstance = echarts.init(realTimeChart.value);
|
||||
const realTimeOption = {
|
||||
title: {
|
||||
text: '实时监控数据',
|
||||
left: 'center',
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
color: '#303133'
|
||||
}
|
||||
]
|
||||
};
|
||||
cpuChartInstance.setOption(cpuOption);
|
||||
|
||||
// 初始化内存图表
|
||||
memoryChartInstance = echarts.init(memoryChart.value);
|
||||
const memoryOption = {
|
||||
tooltip: {
|
||||
formatter: '{a} <br/>{b} : {c}%'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '内存',
|
||||
type: 'gauge',
|
||||
detail: { formatter: '{value}%' },
|
||||
data: [{ value: 0, name: '使用率' }],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 30,
|
||||
color: [
|
||||
[0.3, '#67C23A'],
|
||||
[0.7, '#E6A23C'],
|
||||
[1, '#F56C6C']
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
memoryChartInstance.setOption(memoryOption);
|
||||
|
||||
// 初始化磁盘图表
|
||||
diskChartInstance = echarts.init(diskChart.value);
|
||||
const diskOption = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
||||
trigger: 'axis',
|
||||
formatter: function (params) {
|
||||
let result = params[0].axisValueLabel + '<br/>';
|
||||
params.forEach(param => {
|
||||
const unit = param.seriesName === 'CPU使用率' ? '%' : 'MB';
|
||||
result += `${param.marker}${param.seriesName}: ${param.value}${unit}<br/>`;
|
||||
});
|
||||
return result;
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left',
|
||||
data: ['已使用', '可用']
|
||||
data: ['CPU使用率', '内存使用量'],
|
||||
top: '10%'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '磁盘空间',
|
||||
type: 'pie',
|
||||
radius: '55%',
|
||||
center: ['50%', '60%'],
|
||||
data: [
|
||||
{ value: 0, name: '已使用' },
|
||||
{ value: 100, name: '可用' }
|
||||
],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
diskChartInstance.setOption(diskOption);
|
||||
|
||||
// 初始化网络流量图表
|
||||
networkChartInstance = echarts.init(networkChart.value);
|
||||
const networkOption = {
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
data: ['上传', '下载']
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: Array(10).fill('').map((_, i) => `${i}`)
|
||||
data: []
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
formatter: '{value} MB/s'
|
||||
}
|
||||
},
|
||||
series: [
|
||||
yAxis: [
|
||||
{
|
||||
name: '上传',
|
||||
type: 'line',
|
||||
data: Array(10).fill(0),
|
||||
areaStyle: {}
|
||||
type: 'value',
|
||||
name: 'CPU使用率(%)',
|
||||
position: 'left',
|
||||
axisLabel: {
|
||||
formatter: '{value}%'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '下载',
|
||||
type: 'value',
|
||||
name: '内存使用量(MB)',
|
||||
position: 'right',
|
||||
axisLabel: {
|
||||
formatter: '{value}MB'
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: 'CPU使用率',
|
||||
type: 'line',
|
||||
data: Array(10).fill(0),
|
||||
areaStyle: {}
|
||||
yAxisIndex: 0,
|
||||
data: [],
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
color: '#409EFF'
|
||||
},
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [{
|
||||
offset: 0, color: 'rgba(64, 158, 255, 0.3)'
|
||||
}, {
|
||||
offset: 1, color: 'rgba(64, 158, 255, 0.1)'
|
||||
}]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '内存使用量',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
data: [],
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
color: '#67C23A'
|
||||
},
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [{
|
||||
offset: 0, color: 'rgba(103, 194, 58, 0.3)'
|
||||
}, {
|
||||
offset: 1, color: 'rgba(103, 194, 58, 0.1)'
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
networkChartInstance.setOption(networkOption);
|
||||
realTimeChartInstance.setOption(realTimeOption);
|
||||
};
|
||||
|
||||
|
||||
const formatDateTime = (date) => {
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
const hours = String(date.getHours()).padStart(2, '0');
|
||||
const minutes = String(date.getMinutes()).padStart(2, '0');
|
||||
const seconds = String(date.getSeconds()).padStart(2, '0');
|
||||
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// 获取监控数据
|
||||
const fetchMonitorData = async () => {
|
||||
if (!monitorDateRange.value || !monitorDateRange.value[0] || !monitorDateRange.value[1]) return;
|
||||
|
||||
monitorLoading.value = true;
|
||||
try {
|
||||
const startTime = Math.floor(monitorDateRange.value[0].getTime() / 1000);
|
||||
const endTime = Math.floor(monitorDateRange.value[1].getTime() / 1000);
|
||||
// 将日期转换为 YYYY-MM-DD HH:MM:ss 格式
|
||||
|
||||
|
||||
const startTime = formatDateTime(monitorDateRange.value[0]);
|
||||
const endTime = formatDateTime(monitorDateRange.value[1]);
|
||||
|
||||
console.log('监控数据时间范围:', startTime, 'to', endTime);
|
||||
|
||||
const res = await getVirtualLog({
|
||||
id: route.query.instance_id,
|
||||
start_time: startTime,
|
||||
end_time: endTime
|
||||
});
|
||||
console.log("获取监控数据",res)
|
||||
|
||||
if (res && res.data && res.data.code === 200) {
|
||||
const monitorData = res.data.data;
|
||||
@@ -1899,78 +1882,45 @@ const fetchMonitorData = async () => {
|
||||
|
||||
// 更新图表数据
|
||||
const updateCharts = (data) => {
|
||||
if (!data) return;
|
||||
if (!data || !Array.isArray(data) || data.length === 0) return;
|
||||
|
||||
// 更新CPU图表
|
||||
if (cpuChartInstance && data.cpu) {
|
||||
const cpuUsage = data.cpu.current || 0;
|
||||
cpuChartInstance.setOption({
|
||||
series: [
|
||||
{
|
||||
data: [{ value: parseFloat(cpuUsage).toFixed(2), name: '使用率' }]
|
||||
}
|
||||
]
|
||||
});
|
||||
if (!realTimeChartInstance) return;
|
||||
|
||||
// 处理时间轴数据
|
||||
const timeLabels = data.map(item => {
|
||||
const date = new Date(item.time);
|
||||
return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
|
||||
});
|
||||
|
||||
// 处理CPU数据
|
||||
const cpuData = data.map(item => parseFloat(item.cpu_usage || 0).toFixed(2));
|
||||
|
||||
// 处理内存数据
|
||||
const memoryData = data.map(item => parseInt(item.memory_usage || 0));
|
||||
|
||||
// 更新最新数据显示
|
||||
if (data.length > 0) {
|
||||
const latestData = data[data.length - 1];
|
||||
latestCpuUsage.value = parseFloat(latestData.cpu_usage || 0).toFixed(2);
|
||||
latestMemoryUsage.value = parseInt(latestData.memory_usage || 0);
|
||||
}
|
||||
|
||||
// 更新内存图表
|
||||
if (memoryChartInstance && data.memory) {
|
||||
const memoryUsage = data.memory.usage_percent || 0;
|
||||
memoryChartInstance.setOption({
|
||||
series: [
|
||||
{
|
||||
data: [{ value: parseFloat(memoryUsage).toFixed(2), name: '使用率' }]
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
// 更新磁盘图表
|
||||
if (diskChartInstance && data.disk) {
|
||||
const used = data.disk.used || 0;
|
||||
const available = data.disk.available || 100;
|
||||
const total = used + available;
|
||||
const usedPercent = (used / total) * 100;
|
||||
const availablePercent = 100 - usedPercent;
|
||||
|
||||
diskChartInstance.setOption({
|
||||
series: [
|
||||
{
|
||||
data: [
|
||||
{ value: usedPercent.toFixed(2), name: '已使用' },
|
||||
{ value: availablePercent.toFixed(2), name: '可用' }
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
// 更新网络流量图表
|
||||
if (networkChartInstance && data.network) {
|
||||
const timestamps = data.network.timestamps || [];
|
||||
const upload = data.network.upload || [];
|
||||
const download = data.network.download || [];
|
||||
|
||||
// 格式化时间戳
|
||||
const formattedTimes = timestamps.map(ts => {
|
||||
const date = new Date(ts * 1000);
|
||||
return `${date.getHours()}:${date.getMinutes()}`;
|
||||
});
|
||||
|
||||
networkChartInstance.setOption({
|
||||
xAxis: {
|
||||
data: formattedTimes
|
||||
// 更新图表
|
||||
realTimeChartInstance.setOption({
|
||||
xAxis: {
|
||||
data: timeLabels
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'CPU使用率',
|
||||
data: cpuData
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: upload
|
||||
},
|
||||
{
|
||||
data: download
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
{
|
||||
name: '内存使用量',
|
||||
data: memoryData
|
||||
}
|
||||
]
|
||||
});
|
||||
};
|
||||
|
||||
// 处理日期范围变化
|
||||
@@ -2276,10 +2226,7 @@ const submitEditVolume = async () => {
|
||||
|
||||
// 调整图表大小
|
||||
const resizeCharts = () => {
|
||||
cpuChartInstance && cpuChartInstance.resize();
|
||||
memoryChartInstance && memoryChartInstance.resize();
|
||||
diskChartInstance && diskChartInstance.resize();
|
||||
networkChartInstance && networkChartInstance.resize();
|
||||
realTimeChartInstance && realTimeChartInstance.resize();
|
||||
};
|
||||
|
||||
// 监听窗口大小变化
|
||||
@@ -2291,10 +2238,7 @@ onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', resizeCharts);
|
||||
|
||||
// 销毁图表实例
|
||||
cpuChartInstance && cpuChartInstance.dispose();
|
||||
memoryChartInstance && memoryChartInstance.dispose();
|
||||
diskChartInstance && diskChartInstance.dispose();
|
||||
networkChartInstance && networkChartInstance.dispose();
|
||||
realTimeChartInstance && realTimeChartInstance.dispose();
|
||||
});
|
||||
|
||||
// 获取服务器列表
|
||||
@@ -2556,6 +2500,21 @@ const fetchServersList = async () => {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.monitor-stats {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
padding: 4px 12px;
|
||||
background-color: #f0f2f5;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.chart {
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
+1118
-17
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user