diff --git a/src/components/layout/Breadcrumb.vue b/src/components/layout/Breadcrumb.vue index 639ffa3..2e653c0 100644 --- a/src/components/layout/Breadcrumb.vue +++ b/src/components/layout/Breadcrumb.vue @@ -37,13 +37,18 @@ const iconMap = { 'tags': 'List', 'statistics': 'PieChart', 'visits': 'DataAnalysis', - 'performance': 'DataAnalysis' + 'performance': 'DataAnalysis', + 'servers': 'Setting', + 'server': 'Setting', + 'vm': 'Setting', + 'container': 'Setting' } // 生成面包屑数据 const breadcrumbs = computed(() => { // 当前路由的完整路径 const currentPath = route.path + const currentQuery = route.query // 按照路径层级生成面包屑 const pathSegments = currentPath.split('/').filter(segment => segment !== '') @@ -56,7 +61,90 @@ const breadcrumbs = computed(() => { icon: 'HomeFilled' }) - // 构建剩余的面包屑 + // 特殊处理服务器相关页面 + if (currentPath.includes('/servers/')) { + // 处理服务器详情页面 + if (currentPath === '/servers/server') { + // 构建完整的路径，包含查询参数，用于面包屑导航 + const fullPath = currentQuery.server_id ? + `${currentPath}?server_id=${currentQuery.server_id}&type=${currentQuery.type || ''}` : + currentPath + + result.push({ + path: fullPath, + title: '服务器详情', + icon: 'Setting' + }) + } else if (currentPath === '/servers/vm') { + const fullPath = currentQuery.server_id ? + `${currentPath}?server_id=${currentQuery.server_id}&type=${currentQuery.type || ''}` : + currentPath + + result.push({ + path: fullPath, + title: '虚拟机详情', + icon: 'Setting' + }) + } else if (currentPath === '/servers/container') { + const fullPath = currentQuery.server_id ? + `${currentPath}?server_id=${currentQuery.server_id}&type=${currentQuery.type || ''}` : + currentPath + + result.push({ + path: fullPath, + title: '容器详情', + icon: 'Setting' + }) + } else if (currentPath === '/servers/container/console') { + // 添加容器详情面包屑 + const containerPath = currentQuery.server_id ? + `/servers/container?server_id=${currentQuery.server_id}&type=${currentQuery.type || ''}` : + '/servers/container' + + result.push({ + path: containerPath, + title: '容器详情', + icon: 'Setting' + }) + + // 添加当前页面面包屑 + const consolePath = currentQuery.server_id ? + `${currentPath}?server_id=${currentQuery.server_id}&type=${currentQuery.type || ''}` : + currentPath + + result.push({ + path: consolePath, + title: '终端容器', + icon: 'Setting' + }) + } else if (currentPath === '/servers/container/files') { + // 添加容器详情面包屑 + const containerPath = currentQuery.server_id ? + `/servers/container?server_id=${currentQuery.server_id}&type=${currentQuery.type || ''}` : + '/servers/container' + + result.push({ + path: containerPath, + title: '容器详情', + icon: 'Setting' + }) + + // 添加当前页面面包屑 + const filesPath = currentQuery.server_id ? + `${currentPath}?server_id=${currentQuery.server_id}&type=${currentQuery.type || ''}` : + currentPath + + result.push({ + path: filesPath, + title: '容器文件管理', + icon: 'Setting' + }) + } + + return result + } + + // 构建剩余的面包屑（非服务器页面的常规处理） let currentPathBuilder = '' for (let i = 0; i < pathSegments.length; i++) { @@ -73,6 +161,7 @@ const breadcrumbs = computed(() => { title: matchedRoute.meta.title, icon: segmentIcon }) + } else if (segment) { // 如果没有匹配的路由，但有路径段，也添加到面包屑 result.push({ diff --git a/src/config/menus.js b/src/config/menus.js index 9ed7679..0085fb3 100644 --- a/src/config/menus.js +++ b/src/config/menus.js @@ -45,5 +45,20 @@ export const menus = [ // { path: '/system/operation-log', title: '操作日志' }, { path: '/system/domain-whitelist', title: '域名白名单' } ] + },{ + path: '/audit', + title: '站点审计', + icon: 'Monitor', + children: [ + { path: '/audit/all', title: '所有站点' }, + { path: '/audit/violation', title: '违规站点' } + ] + },{ + path:'/setting', + title:'全局设置管理', + icon:'Setting', + children:[ + {path:'/setting/global',title:'全局设置'} + ] } ] \ No newline at end of file diff --git a/src/router/index.js b/src/router/index.js index f33fd74..5ff23a4 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -41,6 +41,7 @@ const routes = [ }, component: () => import('../views/ticket/TicketChat.vue'), }, + // ACS管理路由 { path: 'acs', @@ -139,22 +140,23 @@ const routes = [ title: '系统管理', icon: 'Setting' }, - redirect: '/system/users', + redirect: '/system/domain-whitelist', children: [ - { - path: 'users', - name: 'Users', - component: () => import('../views/system/Users.vue'), - meta: { - title: '用户管理' - } - }, - { - path: 'operation-log', - name: 'OperationLog', - component: OperationLog, - meta: { title: '操作日志' } - }, + // 注释掉的用户管理和操作日志路由，与菜单配置保持一致 + // { + // path: 'users', + // name: 'Users', + // component: () => import('../views/system/Users.vue'), + // meta: { + // title: '用户管理' + // } + // }, + // { + // path: 'operation-log', + // name: 'OperationLog', + // component: OperationLog, + // meta: { title: '操作日志' } + // }, { path: 'domain-whitelist', name: 'DomainWhitelist', @@ -163,6 +165,54 @@ const routes = [ } ] }, + // 站点审计路由 + { + path: 'audit', + name: 'Audit', + meta: { + title: '站点审计', + icon: 'Monitor' + }, + redirect: '/audit/all', + children: [ + { + path: 'all', + name: 'AuditAll', + component: () => import('../views/audit/AllSites.vue'), + meta: { + title: '所有站点' + } + }, + { + path: 'violation', + name: 'AuditViolation', + component: () => import('../views/audit/ViolationSites.vue'), + meta: { + title: '违规站点' + } + } + ] + }, + // 全局设置管理路由 + { + path: 'setting', + name: 'Setting', + meta: { + title: '全局设置管理', + icon: 'Setting' + }, + redirect: '/setting/global', + children: [ + { + path: 'global', + name: 'GlobalSetting', + component: () => import('../views/setting/GlobalSetting.vue'), + meta: { + title: '全局设置' + } + } + ] + }, // 个人中心路由 { path: 'profile', diff --git a/src/utils/acs/audit.js b/src/utils/acs/audit.js index dc84395..7c83abb 100644 --- a/src/utils/acs/audit.js +++ b/src/utils/acs/audit.js @@ -3,13 +3,13 @@ import {http2} from "@/utils/request.js"; /**获取所有站点 */ export const getSiteList = (data) => { - return http2.get(`/v1/admin/audit/list?page=${data.page}&count=${data.count}&key=${data.key}`) + return http2.get(`/v1/admin/audit/list?page=${data.page}&server_id=${data.server_id}&user_id=${data.user_id}&count=${data.count}&key=${data.key}`) } /**手动触发站点审计 */ export const auditSite = () => { return http2.get(`/v1/admin/audit/start`) } -/**删除违规网页审计 */ +/**删除违规网页审计 传入参数： web_key 站点名*/ export const delAudit = (data) => { return http2.post(`/v1/admin/audit/delete`,data,{ headers: { diff --git a/src/utils/acs/server.js b/src/utils/acs/server.js index faa4603..dfa217c 100644 --- a/src/utils/acs/server.js +++ b/src/utils/acs/server.js @@ -410,6 +410,10 @@ export const getRealDisk = data => { export const getTraffic = data => { return http2.get(`/v1/admin/server/get_server_bandwidth?server_id=${data}`); }; +/**获取服务器总流量信息 */ +export const getTotalTraffic = data => { + return http2.get(`/v1/admin/server/get_server_total_bandwidth?server_id=${data}`); +}; /**获取版本更新 */ export const getVersion = () => { return http2.get(`/v1/admin/version`); diff --git a/src/utils/request.js b/src/utils/request.js index d4bf37b..5634548 100644 --- a/src/utils/request.js +++ b/src/utils/request.js @@ -72,7 +72,7 @@ class Request { // break // } // } - return error.response.data + return error.response } ) } diff --git a/src/views/acs/images/ContainerImages.vue b/src/views/acs/images/ContainerImages.vue index 46f0ed9..91c995c 100644 --- a/src/views/acs/images/ContainerImages.vue +++ b/src/views/acs/images/ContainerImages.vue @@ -181,7 +181,7 @@ @@ -195,12 +195,18 @@ - + + + + + + +
@@ -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) diff --git a/src/views/acs/images/VmImages.vue b/src/views/acs/images/VmImages.vue index fa585f9..e6bb9b4 100644 --- a/src/views/acs/images/VmImages.vue +++ b/src/views/acs/images/VmImages.vue @@ -143,13 +143,13 @@ - + - + diff --git a/src/views/acs/nodes/VmDetail.vue b/src/views/acs/nodes/VmDetail.vue index d36b3ae..441984c 100644 --- a/src/views/acs/nodes/VmDetail.vue +++ b/src/views/acs/nodes/VmDetail.vue @@ -273,46 +273,18 @@
- + -
- - - - - -
- - - - - - - -
- - - - - -
+
@@ -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}
{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}
{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}
{b} : {c} ({d}%)' + trigger: 'axis', + formatter: function (params) { + let result = params[0].axisValueLabel + '
'; + params.forEach(param => { + const unit = param.seriesName === 'CPU使用率' ? '%' : 'MB'; + result += `${param.marker}${param.seriesName}: ${param.value}${unit}
`; + }); + 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; } diff --git a/src/views/acs/nodes/server.vue b/src/views/acs/nodes/server.vue index d87c122..2ad550e 100644 --- a/src/views/acs/nodes/server.vue +++ b/src/views/acs/nodes/server.vue @@ -3,6 +3,14 @@
+ + 返回 +

服务器详情

-
+
@@ -86,8 +94,356 @@
+ +
+
+
+ + 硬件信息 + + ({{ diskInfo.length }}个设备) + +
+ +
+ + + + + +
+
+ +
+
+ + 实际硬件划分 +
+
+ + + + +
+
+ +
+
+ + 流量信息 +
+
+ + + + +
+
+ +
+
+ + 历史总流量统计 + 已加载 +
+
+ +
+
总体统计
+
+
+
历史总流量
+
{{ totalTrafficInfo.total_traffic || '0.00 GB' }}
+
+
+
平均日流量
+
{{ totalTrafficInfo.avg_daily_traffic || '0.00 GB' }}
+
+
+
流量趋势
+
{{ totalTrafficInfo.traffic_trend || '稳定' }}
+
+
+
+ + +
+
上下行流量分布
+
+
+
下行总流量
+
{{ totalTrafficInfo.download_traffic || '0.00 GB' }}
+
+
+
上行总流量
+
{{ totalTrafficInfo.upload_traffic || '0.00 GB' }}
+
+
+
峰值单向流量
+
{{ totalTrafficInfo.peak_traffic || '0.00 GB' }}
+
+
+
+ + +
+
原始数据 ({{ totalTrafficInfo.unit }})
+
+
+
下行字节数
+
{{ totalTrafficInfo.rx_bytes?.toLocaleString() || '0' }}
+
+
+
上行字节数
+
{{ totalTrafficInfo.tx_bytes?.toLocaleString() || '0' }}
+
+
+
+
+
+ + +
+
+ + 历史总流量统计 + + {{ TypeData === 'dockerContainer' ? '不支持' : '不可用' }} + +
+
+
+
状态
+
{{ totalTrafficErrorMessage }}
+
+ + + + +
+
+
+ - +
@@ -617,7 +973,11 @@ import { addFloatingIp, delFloatingIp, addFloatingIpBatch, - selectServerPlan + selectServerPlan, + getDiskInfo, + getRealDisk, + getTraffic, + getTotalTraffic } from "@/utils/acs/server"; import { ElMessage, ElNotification } from 'element-plus'; import { copyDomText } from "@/utils/hide"; @@ -634,7 +994,15 @@ import { Cpu as CpuIcon, Location, Setting, - Search + Search, + ArrowLeft, + CircleCheckFilled, + Files, + Box, + PieChart, + FolderOpened, + DataAnalysis, + WarningFilled } from '@element-plus/icons-vue'; // 组件引入 @@ -646,15 +1014,178 @@ const route = useRoute(); let serverMessage = ref({}); const specLoading = ref(false); +// 新增的数据状态 +const diskInfo = ref([]); // 修改为数组，因为API返回的是磁盘设备数组 +const realDiskInfo = ref({}); +const trafficInfo = ref({}); +const totalTrafficInfo = ref({}); +const loading = ref(false); +const isTotalTrafficError = ref(false); +const totalTrafficErrorMessage = ref(''); + +// 返回按钮功能 +const goBack = () => { + router.back(); +}; + +// 格式化文件大小显示 +const formatSize = (sizeInGB) => { + if (typeof sizeInGB !== 'number') return '0'; + return sizeInGB.toFixed(2); +}; + +// 根据使用率获取进度条颜色 +const getUsageColor = (percent) => { + if (percent >= 90) return '#F56C6C'; // 红色 + if (percent >= 80) return '#E6A23C'; // 橙色 + if (percent >= 60) return '#409EFF'; // 蓝色 + return '#67C23A'; // 绿色 +}; + +// 新增的辅助函数 +const getTotalCapacity = () => { + if (!diskInfo.value || !Array.isArray(diskInfo.value)) return '0.00'; + const total = diskInfo.value.reduce((sum, disk) => sum + (disk.total_gb || 0), 0); + return formatSize(total); +}; + +const getTotalUsed = () => { + if (!diskInfo.value || !Array.isArray(diskInfo.value)) return '0.00'; + const used = diskInfo.value.reduce((sum, disk) => sum + (disk.used_gb || 0), 0); + return formatSize(used); +}; + +const getAverageUsage = () => { + if (!diskInfo.value || !Array.isArray(diskInfo.value) || diskInfo.value.length === 0) return 0; + const avgUsage = diskInfo.value.reduce((sum, disk) => sum + (disk.percent || 0), 0) / diskInfo.value.length; + return parseFloat(avgUsage.toFixed(1)); +}; + +const getDeviceStatusType = (percent) => { + if (percent >= 90) return 'danger'; + if (percent >= 80) return 'warning'; + if (percent >= 60) return 'info'; + return 'success'; +}; + +const getDeviceStatusText = (percent) => { + if (percent >= 90) return '严重'; + if (percent >= 80) return '警告'; + if (percent >= 60) return '注意'; + return '正常'; +}; + +const getUsageClass = (percent) => { + if (percent >= 90) return 'usage-critical'; + if (percent >= 80) return 'usage-warning'; + if (percent >= 60) return 'usage-medium'; + return 'usage-normal'; +}; + +const getUsageIconClass = (percent) => { + if (percent >= 90) return 'critical'; + if (percent >= 80) return 'warning'; + if (percent >= 60) return 'medium'; + return 'normal'; +}; + +// 格式化实际硬件划分数值 +const formatRealDiskValue = (value) => { + if (typeof value === 'number') { + return value.toFixed(0); // 显示整数 + } + if (typeof value === 'string' && !isNaN(value)) { + return parseFloat(value).toFixed(0); + } + return value || '0'; +}; + +// 格式化流量字节数 +const formatTrafficBytes = (bytes, unit = 'bytes') => { + if (typeof bytes !== 'number') return '0'; + + const sizes = ['B', 'KB', 'MB', 'GB', 'TB']; + if (bytes === 0) return '0 B'; + + const i = Math.floor(Math.log(bytes) / Math.log(1024)); + const formattedSize = (bytes / Math.pow(1024, i)).toFixed(2); + + return `${formattedSize} ${sizes[i]}`; +}; + +// 格式化网络速率 +const formatNetworkSpeed = (mbps) => { + if (typeof mbps !== 'number') return '0 Mbps'; + + if (mbps < 1) { + return `${(mbps * 1000).toFixed(2)} Kbps`; + } else if (mbps >= 1000) { + return `${(mbps / 1000).toFixed(2)} Gbps`; + } else { + return `${mbps.toFixed(2)} Mbps`; + } +}; + +// 格式化流量字节数为GB显示 +const formatTrafficBytesToGB = (bytes) => { + if (typeof bytes !== 'number' || bytes === 0) return '0.00'; + + const gb = bytes / (1024 * 1024 * 1024); + if (gb < 0.01) { + // 小于0.01GB时显示MB + const mb = bytes / (1024 * 1024); + return mb < 0.01 ? '< 0.01 MB' : `${mb.toFixed(2)} MB`; + } else if (gb >= 1024) { + // 大于1024GB时显示TB + const tb = gb / 1024; + return `${tb.toFixed(2)} TB`; + } else { + return `${gb.toFixed(2)} GB`; + } +}; + +// 计算平均每日流量（这里是一个简化的计算，实际可能需要更复杂的逻辑） +const calculateAvgDaily = (totalBytes) => { + if (typeof totalBytes !== 'number' || totalBytes === 0) return '0.00 GB'; + + // 假设按30天计算平均值（实际应该根据服务器运行时间计算） + const avgDaily = totalBytes / 30; + return formatTrafficBytesToGB(avgDaily); +}; + +// 分析流量趋势 +const getTotalTrafficTrend = (rxBytes, txBytes) => { + if (typeof rxBytes !== 'number' || typeof txBytes !== 'number') return '无数据'; + + const total = rxBytes + txBytes; + if (total === 0) return '无流量'; + + const rxPercent = (rxBytes / total) * 100; + const txPercent = (txBytes / total) * 100; + + if (rxPercent > 70) { + return '下行为主'; + } else if (txPercent > 70) { + return '上行为主'; + } else { + return '均衡使用'; + } +}; + // 初始化数据的函数 const initData = async () => { try { + loading.value = true; TypeData.value = route.query.type; // 重置数据状态 serverMessage.value = {}; spec_list.value = []; user_servers.value = []; floatList.value = []; + diskInfo.value = []; // 重置为空数组 + realDiskInfo.value = {}; + trafficInfo.value = {}; + totalTrafficInfo.value = {}; // 获取服务器信息 let res = await selectServer({ server_id: route.query.server_id }); @@ -668,6 +1199,19 @@ const initData = async () => { }); } + // 并行获取服务器硬件和流量信息（不阻塞主要功能） + Promise.allSettled([ + getDiskInfoData(), + getRealDiskData(), + getTrafficData(), + getTotalTrafficData() + ]).then(results => { + const failedRequests = results.filter(result => result.status === 'rejected'); + if (failedRequests.length > 0) { + console.warn(`${failedRequests.length} 个API请求失败，但不影响主要功能`); + } + }); + // 获取浮动IP列表 await getFloating(); @@ -677,9 +1221,7 @@ const initData = async () => { // 获取用户信息并设置用户类型 try { const userInfoRes = await getUserInfo(); - console.log("获取用户信息", userInfoRes); if (userInfoRes && userInfoRes.data ) { - console.log("获取用户信息", userInfoRes); localStorage.setItem("user_id", userInfoRes.data.user_id); } } catch (error) { @@ -692,32 +1234,25 @@ const initData = async () => { let cons = await getContainer(containerBox); if (cons && cons.data) { user_servers.value = cons.data.data || []; - // user_servers.value = cons.data.data.forEach(async item => { - // item.plan_name = await selectServerPlan({ - // server_type: 'dockerContainer', - // plan_id: item.plan_id - // }) - // } - // ) for (const item of user_servers.value){ try{ const res = await selectServerPlan({ server_type: 'dockerContainer', plan_id: item.plan_id }) - console.log("获取容器规格：", res); item.plan_name = res.data.data.name; }catch(error){ console.error("获取容器列表失败:", error); ElMessage.error("获取容器列表失败"); } } - console.log("获取容器列表", user_servers.value); total.value = cons.data.count || 0; } } catch (error) { console.error("初始化数据失败:", error); ElMessage.error("加载数据失败，请刷新页面重试"); + } finally { + loading.value = false; } }; @@ -738,6 +1273,328 @@ onMounted(() => { const TypeData = ref(""); +// 获取服务器硬件信息 +const getDiskInfoData = async () => { + try { + const res = await getDiskInfo(route.query.server_id); + console.log("获取服务器硬件信息完整响应:", res); + + if (res && res.data) { + console.log("响应数据结构:", res.data); + + // 检查多层嵌套结构 + let diskData = null; + + if (res.data.code === 200) { + // 容器服务器：检查 res.data.data (单个对象) + if (TypeData.value === 'dockerContainer') { + if (res.data.data && typeof res.data.data === 'object' && !Array.isArray(res.data.data)) { + // 容器服务器返回单个磁盘对象，转换为数组格式以统一处理 + const containerDisk = res.data.data.data; + diskData = [{ + device: containerDisk.path || '/var/lib/docker', + total_gb: (containerDisk.total || 0) / (1024 * 1024 * 1024), + used_gb: (containerDisk.used || 0) / (1024 * 1024 * 1024), + free_gb: (containerDisk.free || 0) / (1024 * 1024 * 1024), + percent: containerDisk.total > 0 ? ((containerDisk.used / containerDisk.total) * 100).toFixed(1) : 0 + }]; + console.log("容器服务器磁盘数据:", diskData); + } + } + // 虚拟机服务器：检查数组结构 + else { + // 检查 res.data.data.data (双层data嵌套) + if (res.data.data && res.data.data.data && Array.isArray(res.data.data.data)) { + diskData = res.data.data.data; + console.log("虚拟机服务器-双层data嵌套的数组数据:", diskData); + } + // 检查 res.data.data (单层data嵌套) + else if (res.data.data && Array.isArray(res.data.data)) { + diskData = res.data.data; + console.log("虚拟机服务器-单层data嵌套的数组数据:", diskData); + } + // 检查直接在res.data下的数组 + else if (Array.isArray(res.data)) { + diskData = res.data; + console.log("虚拟机服务器-直接数组数据:", diskData); + } + } + } + + if (diskData && Array.isArray(diskData) && diskData.length > 0) { + diskInfo.value = diskData; + console.log("设置硬件信息数据:", diskData); + } else { + diskInfo.value = '暂无数据'; + console.log("未找到有效的硬件数据"); + } + } else { + diskInfo.value = '响应格式错误'; + console.log("响应格式不正确"); + } + } catch (error) { + console.error("获取服务器硬件信息失败:", error); + diskInfo.value = '接口异常'; + } +}; + +// 获取服务器实际划分硬件信息 +const getRealDiskData = async () => { + try { + const res = await getRealDisk(route.query.server_id); + + + if (res && res.data && res.data.code === 200) { + const data = res.data.data; + + + if (data && typeof data === 'object') { + // 处理新的数据结构 + realDiskInfo.value = { + allocated_disk: data.desk || 0, + unit: data.unit || 'GB', + // 如果将来有其他字段，可以在这里添加 + allocated_cpu: data.cpu || '暂无数据', + allocated_memory: data.memory || '暂无数据', + remaining_resources: data.remaining || '暂无数据' + }; + } else { + realDiskInfo.value = { + allocated_disk: '暂无数据', + unit: 'GB', + allocated_cpu: '暂无数据', + allocated_memory: '暂无数据', + remaining_resources: '暂无数据' + }; + } + } else { + realDiskInfo.value = { + allocated_disk: '暂无数据', + unit: 'GB', + allocated_cpu: '暂无数据', + allocated_memory: '暂无数据', + remaining_resources: '暂无数据' + }; + } + } catch (error) { + console.error("获取服务器实际硬件信息失败:", error); + realDiskInfo.value = { + allocated_disk: '接口异常', + unit: 'GB', + allocated_cpu: '接口异常', + allocated_memory: '接口异常', + remaining_resources: '接口异常' + }; + } +}; + +// 获取服务器流量信息 +const getTrafficData = async () => { + try { + const res = await getTraffic(route.query.server_id); + console.log("获取服务器流量信息完整响应:", res); + + if (res && res.data && res.data.code === 200) { + // 处理不同服务器类型的数据结构 + let trafficData = null; + + if (TypeData.value === 'dockerContainer') { + // 容器服务器：检查 res.data.data (直接对象) + if (res.data.data && typeof res.data.data === 'object') { + trafficData = res.data.data.data; + console.log("容器服务器流量数据:", trafficData); + } + } else { + // 虚拟机服务器：处理双层嵌套的数据结构 + if (res.data.data && res.data.data.code === 200 && res.data.data.data) { + trafficData = res.data.data.data; + } else if (res.data.data) { + trafficData = res.data.data; + } + console.log("虚拟机服务器流量数据:", trafficData); + } + + if (trafficData && typeof trafficData === 'object') { + if (TypeData.value === 'dockerContainer') { + // 容器服务器数据格式: {recv: "7.15", sent: "1.14", unit: "KB/s"} + trafficInfo.value = { + // 实时速率 (容器返回的是速率数据) + rx_speed: parseFloat(trafficData.recv) || 0, // 下行速率 + tx_speed: parseFloat(trafficData.sent) || 0, // 上行速率 + unit: trafficData.unit || 'KB/s', // 速率单位 + + // 格式化显示 + rx_speed_display: `${trafficData.recv || '0'} ${trafficData.unit || 'KB/s'}`, + tx_speed_display: `${trafficData.sent || '0'} ${trafficData.unit || 'KB/s'}`, + + // 容器没有累计流量数据，设为不可用 + rx_total: '不支持', + tx_total: '不支持', + today_traffic: '实时监控', + upload_traffic: `${trafficData.sent || '0'} ${trafficData.unit || 'KB/s'}`, + download_traffic: `${trafficData.recv || '0'} ${trafficData.unit || 'KB/s'}` + }; + } else { + // 虚拟机服务器数据格式 (原有逻辑) + trafficInfo.value = { + // 流量总量 + rx_total: trafficData.rx || 0, // 下行总流量 bytes + tx_total: trafficData.tx || 0, // 上行总流量 bytes + unit: trafficData.unit || 'bytes', // 单位 + + // 实时速率 + rx_speed: trafficData.mbps?.rx || 0, // 下行速率 Mbps + tx_speed: trafficData.mbps?.tx || 0, // 上行速率 Mbps + + // 为兼容性保留原字段 + today_traffic: formatTrafficBytes(trafficData.rx + trafficData.tx, trafficData.unit), + upload_traffic: formatTrafficBytes(trafficData.tx, trafficData.unit), + download_traffic: formatTrafficBytes(trafficData.rx, trafficData.unit) + }; + } + } else { + trafficInfo.value = { + rx_total: '暂无数据', + tx_total: '暂无数据', + rx_speed: '暂无数据', + tx_speed: '暂无数据', + unit: 'bytes', + today_traffic: '暂无数据', + upload_traffic: '暂无数据', + download_traffic: '暂无数据' + }; + } + } else { + trafficInfo.value = { + rx_total: '暂无数据', + tx_total: '暂无数据', + rx_speed: '暂无数据', + tx_speed: '暂无数据', + unit: 'bytes', + today_traffic: '暂无数据', + upload_traffic: '暂无数据', + download_traffic: '暂无数据' + }; + } + } catch (error) { + console.error("获取服务器流量信息失败:", error); + trafficInfo.value = { + rx_total: '接口异常', + tx_total: '接口异常', + rx_speed: '接口异常', + tx_speed: '接口异常', + unit: 'bytes', + today_traffic: '接口异常', + upload_traffic: '接口异常', + download_traffic: '接口异常' + }; + } +}; + +// 获取服务器总流量信息 +const getTotalTrafficData = async () => { + try { + isTotalTrafficError.value = false; + totalTrafficErrorMessage.value = ''; + + // 容器服务器不支持总流量统计 + if (TypeData.value === 'dockerContainer') { + console.log("容器服务器不支持总流量统计功能"); + isTotalTrafficError.value = true; + totalTrafficErrorMessage.value = '容器服务器不支持此功能'; + return; + } + + const res = await getTotalTraffic(route.query.server_id); + console.log("获取服务器总流量信息完整响应:", res); + + if (res && res.data && res.data.code === 200) { + // 处理嵌套的数据结构：res.data.data.data + let trafficData = null; + + if (res.data.data && res.data.data.code === 200 && res.data.data.data) { + trafficData = res.data.data.data; + } else if (res.data.data) { + trafficData = res.data.data; + } + + console.log("解析到的总流量数据:", trafficData); + + if (trafficData && typeof trafficData === 'object') { + // 根据实际返回的数据结构处理 + const rxBytes = trafficData.rx || 0; // 下行流量 bytes + const txBytes = trafficData.tx || 0; // 上行流量 bytes + const totalBytes = rxBytes + txBytes; // 总流量 + const unit = trafficData.unit || 'bytes'; // 单位 + + totalTrafficInfo.value = { + // 原始数据 + rx_bytes: rxBytes, + tx_bytes: txBytes, + total_bytes: totalBytes, + unit: unit, + + // 格式化后的显示数据 + total_traffic: formatTrafficBytesToGB(totalBytes), + download_traffic: formatTrafficBytesToGB(rxBytes), + upload_traffic: formatTrafficBytesToGB(txBytes), + + // 计算一些统计数据（这里可以根据需要添加更多计算逻辑） + avg_daily_traffic: calculateAvgDaily(totalBytes), + peak_traffic: formatTrafficBytesToGB(Math.max(rxBytes, txBytes)), + traffic_trend: getTotalTrafficTrend(rxBytes, txBytes) + }; + } else { + // 数据格式不正确时的默认值 + totalTrafficInfo.value = { + total_traffic: '暂无数据', + download_traffic: '暂无数据', + upload_traffic: '暂无数据', + avg_daily_traffic: '暂无数据', + peak_traffic: '暂无数据', + traffic_trend: '暂无数据' + }; + } + } else { + // API返回非200状态码，设置默认值 + totalTrafficInfo.value = { + total_traffic: '暂无数据', + download_traffic: '暂无数据', + upload_traffic: '暂无数据', + avg_daily_traffic: '暂无数据', + peak_traffic: '暂无数据', + traffic_trend: '暂无数据' + }; + } + } catch (error) { + console.error("获取服务器总流量信息失败:", error); + + // 设置错误状态 + isTotalTrafficError.value = true; + + // 改进错误类型检测 + if (error.message?.includes('CORS') || + error.message?.includes('blocked') || + error.name === 'TypeError' || + error.code === 'ERR_NETWORK' || + (error.response && error.response.status === 0)) { + console.warn("CORS或网络错误，显示友好提示"); + totalTrafficErrorMessage.value = '接口暂时不可用 (网络限制)'; + } else if (error.response?.status === 404) { + totalTrafficErrorMessage.value = '总流量接口不存在'; + } else if (error.response?.status >= 500) { + totalTrafficErrorMessage.value = '服务器内部错误'; + } else if (error.response?.status === 403) { + totalTrafficErrorMessage.value = '权限不足'; + } else { + totalTrafficErrorMessage.value = '接口暂不可用'; + } + + // 不显示错误消息，避免打扰用户 + console.warn(`总流量API请求失败: ${totalTrafficErrorMessage.value}`, error); + } +}; + //获取服务器实例规格 const GetSpecs = async () => { specLoading.value = true; @@ -947,7 +1804,7 @@ const editSpec = async () => { server_id: route.query.server_id, server_type:TypeData.value }); - console.log("添加实例规格：",res) + if (res.data.code == 200) { ElNotification({ @@ -1222,6 +2079,18 @@ import { ElMessageBox } from 'element-plus'; box-shadow: 0 0 6px rgba(245, 108, 108, 0.8); } +/* 返回按钮样式 */ +.back-btn { + font-size: 16px; + color: #409EFF; + padding: 8px 0; + margin-right: 16px; +} + +.back-btn:hover { + color: #66b1ff; +} + /* 服务器信息卡片 */ .server-info { display: grid; @@ -1230,6 +2099,14 @@ import { ElMessageBox } from 'element-plus'; margin-bottom: 24px; } +/* 服务器详细信息卡片 */ +.server-detail-info { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 16px; + margin-bottom: 24px; +} + .info-card { background: white; border-radius: 8px; @@ -1292,6 +2169,178 @@ import { ElMessageBox } from 'element-plus'; color: #409EFF; } +/* 硬件信息样式 - 符合整体设计风格 */ +.device-count { + color: #909399; + font-size: 14px; + font-weight: normal; + margin-left: 8px; +} + +.hardware-summary { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); + gap: 16px; + margin-bottom: 20px; + padding-bottom: 16px; + border-bottom: 1px solid #ebeef5; +} + +.summary-item { + text-align: center; +} + +.hardware-devices { + display: flex; + flex-direction: column; + gap: 16px; +} + +.device-item { + padding: 16px; + background-color: #fafbfc; + border-radius: 6px; + border: 1px solid #e4e7ed; +} + +.device-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 12px; +} + +.device-title { + display: flex; + align-items: center; + font-size: 14px; + font-weight: 600; + color: #409EFF; +} + +.device-title .el-icon { + margin-right: 6px; + font-size: 16px; +} + +.device-details { + margin-top: 12px; +} + +.detail-row { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); + gap: 12px; + margin-bottom: 12px; +} + +.usage-progress { + margin-top: 8px; +} + +/* 使用率状态颜色类 */ +.info-value.usage-normal { + color: #67C23A; + font-weight: 600; +} + +.info-value.usage-medium { + color: #409EFF; + font-weight: 600; +} + +.info-value.usage-warning { + color: #E6A23C; + font-weight: 600; +} + +.info-value.usage-critical { + color: #F56C6C; + font-weight: 600; +} + +/* 实际硬件划分样式 */ +.highlight-item { + padding: 8px; + background-color: #f0f9ff; + border-radius: 4px; + border-left: 3px solid #409EFF; + margin-bottom: 16px; +} + +/* 流量信息样式 */ +.traffic-section { + margin-bottom: 20px; +} + +.traffic-section:last-child { + margin-bottom: 0; +} + +.section-title { + font-size: 14px; + font-weight: 600; + + margin-bottom: 12px; + padding-bottom: 4px; + border-bottom: 1px solid #ebeef5; +} + +.traffic-speed-grid, +.traffic-total-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); + gap: 12px; +} + +.traffic-total-grid { + grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); +} + +.traffic-distribution { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); + gap: 12px; +} + +.raw-data { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); + gap: 12px; + padding: 12px; + background-color: #fafbfc; + border-radius: 6px; + border: 1px solid #e4e7ed; + font-family: 'Courier New', monospace; +} + +.raw-data .info-value { + font-size: 13px; + color: #606266; +} + +.traffic-note { + margin-top: 8px; +} + +/* 旧样式保持兼容 */ +.usage-high { + color: #F56C6C; + font-weight: 600; +} + +.usage-medium { + color: #E6A23C; + font-weight: 600; +} + +/* 错误状态样式 */ +.error-status { + color: #F56C6C; + font-weight: 600; + font-size: 14px; +} + /* 主要内容区域 */ .chart-section { margin-bottom: 24px; @@ -1373,7 +2422,7 @@ import { ElMessageBox } from 'element-plus'; .section-title { font-size: 16px; font-weight: 600; - color: #409EFF; + margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px dashed #ebeef5; @@ -1420,6 +2469,10 @@ import { ElMessageBox } from 'element-plus'; .info-card.location-info { grid-column: span 2; } + + .server-detail-info { + grid-template-columns: 1fr; + } } @media screen and (max-width: 768px) { @@ -1429,10 +2482,23 @@ import { ElMessageBox } from 'element-plus'; gap: 16px; } + .page-header .left { + flex-wrap: wrap; + } + + .back-btn { + margin-right: 8px; + margin-bottom: 8px; + } + .server-info { grid-template-columns: 1fr; } + .server-detail-info { + grid-template-columns: 1fr; + } + .info-card.location-info { grid-column: auto; } @@ -1451,5 +2517,40 @@ import { ElMessageBox } from 'element-plus'; width: 100%; justify-content: space-between; } + + /* 硬件信息响应式 */ + .hardware-summary { + grid-template-columns: 1fr; + gap: 12px; + } + + .detail-row { + grid-template-columns: 1fr; + gap: 8px; + } + + .device-item { + padding: 12px; + } + + .device-header { + flex-direction: column; + align-items: flex-start; + gap: 8px; + } + + /* 流量信息响应式 */ + .traffic-speed-grid, + .traffic-total-grid, + .traffic-distribution { + grid-template-columns: 1fr; + gap: 8px; + } + + .raw-data { + grid-template-columns: 1fr; + gap: 8px; + padding: 8px; + } } \ No newline at end of file diff --git a/src/views/audit/AllSites.vue b/src/views/audit/AllSites.vue new file mode 100644 index 0000000..863d643 --- /dev/null +++ b/src/views/audit/AllSites.vue @@ -0,0 +1,709 @@ + + + + + diff --git a/src/views/audit/ViolationSites.vue b/src/views/audit/ViolationSites.vue new file mode 100644 index 0000000..a0eb6ec --- /dev/null +++ b/src/views/audit/ViolationSites.vue @@ -0,0 +1,1041 @@ + + + + + diff --git a/src/views/setting/GlobalSetting.vue b/src/views/setting/GlobalSetting.vue new file mode 100644 index 0000000..cb8a19a --- /dev/null +++ b/src/views/setting/GlobalSetting.vue @@ -0,0 +1,474 @@ + + + + + diff --git a/vite.config.js b/vite.config.js index 8f40121..e0b3c1a 100644 --- a/vite.config.js +++ b/vite.config.js @@ -13,6 +13,7 @@ export default defineConfig({ optimizeDeps: { include: ['monaco-editor'] }, + build: { rollupOptions: { output: {