From 85b42e3b3326cd0a566691f01759d7bba30e5a69 Mon Sep 17 00:00:00 2001 From: TS-QD1 Date: Wed, 2 Jul 2025 16:33:04 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4index?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 2 + .../resources/static/route/pages/index.html | 1021 ++++++++++++++--- 2 files changed, 895 insertions(+), 128 deletions(-) diff --git a/.gitignore b/.gitignore index 69bb961..e23340f 100644 --- a/.gitignore +++ b/.gitignore @@ -38,3 +38,5 @@ mvnw* .mvn/** /src/main/resources/ftl/crpm/code/frontend-generate/ /src/main/resources/ftl/crpm/code/generate/ + +db/ \ No newline at end of file diff --git a/cxywztglxt/src/main/resources/static/route/pages/index.html b/cxywztglxt/src/main/resources/static/route/pages/index.html index 57a4ea1..26391fc 100644 --- a/cxywztglxt/src/main/resources/static/route/pages/index.html +++ b/cxywztglxt/src/main/resources/static/route/pages/index.html @@ -9,6 +9,361 @@ +
@@ -69,21 +424,303 @@
-
- 欢迎使用创新业务中台管理系统 -
-
-
-
-
+ +
+ +
+
+ + +
+
+ + +
-
-
+ + +
+ +
+
+
用户总数
+
+ +
+
+
1,254
+
+ 12.5% 相比上月 +
+
+ + +
+
+
在线接口
+
+ +
+
+
42
+
+ 5.0% 相比上月 +
+
+ + +
+
+
运行流程
+
+ +
+
+
18
+
+ 2.0% 相比上月 +
+
+ + +
+
+
系统消息
+
+ +
+
+
7
+
+ 3 相比昨日 +
+
-
-
- -
+ + +
+ +
+
+ 用户活跃度分析 +
+ + +
+
+
+
+ + +
+
+ 系统状态分布 +
+ + +
+
+
+
+
+ + +
+ +
+
+ 接口响应时间分析 +
+ + +
+
+
+
+ + +
+
+ 系统集成情况 +
+ + +
+
+
+
+
+ + +
+
+ 最近登录用户 +
+ + + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
用户名姓名角色登录时间IP地址设备状态
admin系统管理员管理员2023-06-15 09:32:45192.168.1.101Chrome/114.0在线
user1张三操作员2023-06-15 08:45:12192.168.1.102Firefox/113.0在线
user2李四分析师2023-06-15 07:58:33192.168.1.103Chrome/114.0在线
user3王五审核员2023-06-15 06:30:15192.168.1.104Edge/114.0离线
user4赵六操作员2023-06-15 05:42:28192.168.1.105Safari/16.4离线
+
+
+ + +
+
+ 系统组件状态 +
+ + + +
+
+
+
+
+
+
+
用户管理系统
+
ID: UM-2023001
+
+
+
+
正常运行
+
响应时间: 128ms
+
+
+ +
+
+
+
+
接口管理系统
+
ID: API-2023002
+
+
+
+
正常运行
+
响应时间: 215ms
+
+
+ +
+
+
+
+
流程引擎系统
+
ID: WF-2023003
+
+
+
+
维护中
+
预计完成: 1小时30分钟
+
+
+ +
+
+
+
+
消息通知系统
+
ID: MS-2023004
+
+
+
+
离线
+
已通知运维: 25分钟前
+
+
+ +
+
+
+
+
报表分析系统
+
ID: RS-2023005
+
+
+
+
正常运行
+
响应时间: 320ms
+
+
+
+
+
@@ -118,136 +755,264 @@ homepage.style.display = 'none'; }); }); - //折线图 - var lineChart = echarts.init(document.getElementById('lineChart')); - var optionLine = { - animation: false, + // 初始化图表 + document.addEventListener('DOMContentLoaded', function() { + // 用户活跃度图表 + const userActivityChart = echarts.init(document.getElementById('user-activity')); + userActivityChart.setOption({ title: { - //text: '销售时间统计',// - left: 'left', // Center align the title horizontally + text: '用户活跃度趋势', + left: 'center', + textStyle: { + color: '#333', + fontSize: 14 + } + }, + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'cross', + crossStyle: { + color: '#999' + } + } + }, + legend: { + data: ['登录次数', '操作次数', '在线时长(小时)'], + top: '10%', + left: 'center' + }, + grid: { + left: '3%', + right: '4%', + bottom: '3%', + containLabel: true }, xAxis: { type: 'category', boundaryGap: false, - data: ['2024-1', '2024-2', '2024-3', '2024-4', '2024-5', '2024-6', '2024-7'] + data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] }, - yAxis: { - type: 'value' - }, - tooltip: { - trigger: 'axis' // 设置触发类型为坐标轴触发 - }, - series: [{ - data: [820, 733, 901, 600, 1290, 500, 1320], - type: 'line', - smooth: true, - areaStyle: {} - }] - }; - lineChart.setOption(optionLine); - - var currentIndex = -1; - var interval = 1000; // 切换间隔时间，单位是毫秒 - var timer; // 定时器变量 + yAxis: [ + { + type: 'value', + name: '次数', + min: 0, + max: 200, + interval: 40 + }, + { + type: 'value', + name: '小时', + min: 0, + max: 100, + interval: 20 + } + ], + series: [ + { + name: '登录次数', + type: 'line', + data: [65, 78, 52, 91, 85, 102, 95] + }, + { + name: '操作次数', + type: 'line', + data: [128, 145, 110, 165, 170, 135, 120] + }, + { + name: '在线时长(小时)', + type: 'line', + yAxisIndex: 1, + data: [35, 42, 38, 45, 49, 32, 28] + } + ] + }); - // 自动触发选中状态并每隔1秒自动向下一个触发 - function startAutoPlay() { - timer = setInterval(function() { - var dataLen = optionLine.series[0].data.length; - // 取消之前高亮的图形 - lineChart.dispatchAction({ - type: 'downplay', - seriesIndex: 0, - dataIndex: currentIndex - }); - currentIndex = (currentIndex + 1) % dataLen; - // 高亮当前图形 - lineChart.dispatchAction({ - type: 'highlight', - seriesIndex: 0, - dataIndex: currentIndex - }); - // 显示 tooltip - lineChart.dispatchAction({ - type: 'showTip', - seriesIndex: 0, - dataIndex: currentIndex - }); - }, interval); - } - - // 开始自动播放 - startAutoPlay(); - - // 鼠标悬停在图表上时暂停自动播放 - lineChart.on('mouseover', function() { - clearInterval(timer); - }); - - // 鼠标离开图表区域时恢复自动播放 - lineChart.on('mouseout', function() { - startAutoPlay(); - }); - - // 饼状图 - var pieChart = echarts.init(document.getElementById('pieChart')); - var optionPie = { - animation: false, + // 系统状态饼图 + const systemStatusChart = echarts.init(document.getElementById('system-status')); + systemStatusChart.setOption({ title: { - //text: '订单占比系统',// - left: 'left' + text: '系统组件状态', + left: 'center', + textStyle: { + color: '#333', + fontSize: 14 + } }, tooltip: { - trigger: 'item' + trigger: 'item', + formatter: '{a}
{b}: {c} ({d}%)' }, - legend: { - orient: 'vertical', - left: 'right' - }, - series: [{ - name: '嘻嘻', - type: 'pie', - radius: ['60%', '70%'], - data: [ - {value: 150, name: 'data1'}, - {value: 274, name: 'data2'}, - {value: 310, name: 'data3'}, - {value: 335, name: 'data4'}, - {value: 400, name: 'data5'} - ] - }] - }; - pieChart.setOption(optionPie); - //柱状图 - var barChart = echarts.init(document.getElementById('barChart')); - var optionBar = { - animation: false, - title: { - // text: '收支情况'// - }, - tooltip: {}, legend: { - //data: ['收入', '支出'] ,// - data: ['data1', 'data2'] , - left: 'right' + orient: 'vertical', + left: 'left', + data: ['正常运行', '维护中', '离线', '警告'] + }, + series: [ + { + name: '系统状态', + type: 'pie', + radius: '55%', + center: ['50%', '60%'], + data: [ + {value: 65, name: '正常运行'}, + {value: 15, name: '维护中'}, + {value: 10, name: '离线'}, + {value: 10, name: '警告'} + ], + emphasis: { + itemStyle: { + shadowBlur: 10, + shadowOffsetX: 0, + shadowColor: 'rgba(0, 0, 0, 0.5)' + } + } + } + ] + }); + + // 接口响应时间图表 + const apiResponseChart = echarts.init(document.getElementById('api-response')); + apiResponseChart.setOption({ + title: { + text: '接口平均响应时间', + left: 'center', + textStyle: { + color: '#333', + fontSize: 14 + } + }, + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' + } }, xAxis: { - data: ['一月', '二月', '三月', '四月', '五月','六月','七月','八月','九月','十月','十一月','十二月',] + type: 'category', + data: ['用户管理', '权限验证', '数据查询', '报表生成', '消息推送', '文件上传', '系统配置'] }, - yAxis: {}, - series: [{ - name: 'data1', - type: 'bar', - data: [5, 20, 36, 10, 10,15,16,20,12,13,35,12] // 第一条柱状图的数据 - }, { - name: 'data2', - type: 'bar', - data: [15, 10, 25, 8, 15,8,30,12,11,18,25,12] // 第二条柱状图的数据 - }] - }; - barChart.setOption(optionBar); - - + yAxis: { + type: 'value', + name: '毫秒(ms)', + min: 0, + max: 500, + interval: 100 + }, + series: [ + { + name: '平均响应时间', + type: 'bar', + data: [128, 85, 210, 350, 150, 420, 95] + } + ] + }); + + // 系统集成图表 + const integrationChart = echarts.init(document.getElementById('system-integration')); + integrationChart.setOption({ + title: { + text: '系统集成情况', + left: 'center', + textStyle: { + color: '#333', + fontSize: 14 + } + }, + tooltip: { + trigger: 'item', + formatter: '{a}
{b}: {c} ({d}%)' + }, + legend: { + orient: 'vertical', + left: 'left', + data: ['成功', '失败', '部分成功'] + }, + series: [ + { + name: '集成状态', + type: 'pie', + radius: ['40%', '75%'], + data: [ + {value: 35, name: '成功'}, + {value: 5, name: '失败'}, + {value: 10, name: '部分成功'} + ] + } + ] + }); + + // 监听窗口大小变化，调整图表 + window.addEventListener('resize', function() { + userActivityChart.resize(); + systemStatusChart.resize(); + apiResponseChart.resize(); + integrationChart.resize(); + }); + + // 刷新按钮事件 + document.getElementById('refresh-btn').addEventListener('click', function() { + // 显示加载状态 + this.innerHTML = ' 刷新中...'; + this.disabled = true; + + // 模拟数据刷新 + setTimeout(() => { + // 更新图表数据 + userActivityChart.setOption({ + series: [ + { + data: userActivityChart.getOption().series[0].data.map(val => val * (0.9 + Math.random() * 0.2)) + }, + { + data: userActivityChart.getOption().series[1].data.map(val => val * (0.9 + Math.random() * 0.2)) + }, + { + data: userActivityChart.getOption().series[2].data.map(val => val * (0.9 + Math.random() * 0.2)) + } + ] + }); + + systemStatusChart.setOption({ + series: [ + { + data: [ + {value: Math.floor(Math.random() * 10 + 60), name: '正常运行'}, + {value: Math.floor(Math.random() * 5 + 10), name: '维护中'}, + {value: Math.floor(Math.random() * 5 + 5), name: '离线'}, + {value: Math.floor(Math.random() * 5 + 5), name: '警告'} + ] + } + ] + }); + + apiResponseChart.setOption({ + series: [ + { + data: apiResponseChart.getOption().series[0].data.map(val => val * (0.8 + Math.random() * 0.4)) + } + ] + }); + + integrationChart.setOption({ + series: [ + { + data: [ + {value: Math.floor(Math.random() * 10 + 30), name: '成功'}, + {value: Math.floor(Math.random() * 5 + 2), name: '失败'}, + {value: Math.floor(Math.random() * 5 + 8), name: '部分成功'} + ] + } + ] + }); + + // 恢复按钮状态 + this.innerHTML = ' 刷新数据'; + this.disabled = false; + }, 1000); + }); + });