修改

.gitignore

@@ -39,4 +39,4 @@ mvnw*
 /src/main/resources/ftl/crpm/code/frontend-generate/
 /src/main/resources/ftl/crpm/code/generate/
 
-db/
+/db/**

gcxxfbglxt/src/main/resources/static/assets/crpm/index/index2/index2.css

@@ -295,11 +295,9 @@
 .homepage{
   background:#f5f4f9;
   height: calc(100vh - 100px);
-  padding-left:10px;
+    padding: 10px;
-  padding-right:10px;
-  padding-bottom:10px;
   box-sizing:border-box;
-  
+  overflow: auto;
 }
 .homepage-top{
     padding-top:10px;

jyrycljcspglxt/src/main/resources/static/assets/crpm/index/index4/index4.css

@@ -287,8 +287,8 @@
   padding-right:10px;
   padding-bottom:10px;
   box-sizing:border-box;
-  border-radius:20px
+  border-radius:20px;
-  
+  overflow: auto;
 }
 .homepage-top{
     padding-top:10px;

rjdmaiznscxt/src/main/resources/static/route/pages/index.html

@@ -83,15 +83,21 @@
                 <div class="bottom">
                     <div class="content">
                         <div class='homepage' id="homepage">
-                  	<div class='homepage-top' >
+                            <div class="layui-row layui-col-space15">
-                  		<div id="barChartOne" class='barChartOne' ></div>
+                                <div class="layui-col-md6">
-                  		<div class='pieChart' id="pieChart"></div>
+                                    <div id="codeGenChart" style="width:100%;height:400px;"></div>
-                  	
+                                </div>
-                      
+                                <div class="layui-col-md6">
+                                    <div id="errorTypeChart" style="width:100%;height:400px;"></div>
+                                </div>
+                            </div>
+                            <div class="layui-row layui-col-space15" style="margin-top:15px;">
+                                <div class="layui-col-md6">
+                                    <div id="testTrendChart" style="width:100%;height:400px;"></div>
+                                </div>
+                                <div class="layui-col-md6">
+                                    <div id="deployChart" style="width:100%;height:400px;"></div>
                                 </div>
-                   	<div class='homepage-bot' >
-                      	<div id="barChartTwo" class='barChartTwo' ></div>
-                  		<div id="barChartThree" class='barChartThree' ></div>
                             </div>
                         </div>
                         <iframe class="page-iframe" id="pageIframe" src="" style="display: none;"></iframe>
@@ -100,10 +106,10 @@
             </div>
         </div>
     </div>
-<script src="assets/crpm/js/layui/layui.js"></script>
+    <script src="assets/crpm/js/layui/layui.js"></script>
-<script src="assets/crpm/js/echarts/echarts.min.js"></script>
+    <script src="assets/crpm/js/echarts/echarts.min.js"></script>
 
-<script>
+    <script>
         layui.use(['element', 'layer', 'util'], function () {
             var element = layui.element;
             var layer = layui.layer;
@@ -129,69 +135,122 @@
                 homepage.style.display = 'none';
             });
         });
-       //柱状图1
+        // 代码生成项目状态分布饼图
-    	var barChartOne =  echarts.init(document.getElementById('barChartOne'));
+        var codeGenChart = echarts.init(document.getElementById('codeGenChart'));
-      	var optionBarOne = {
+        var codeGenOption = {
-            animation: false, 
             title: {
-                //text: '业务核心数据'//
+                text: '代码生成项目状态分布',
-            },
+                left: 'center'
-            tooltip: {},
-            legend: {
-                //data: ['收入', '支出'] ,//
-              data: ['data1', 'data2'] ,
-              left: 'right'
-            },
-            xAxis: {
-                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] // 第二条柱状图的数据
-            }]
-        };
-        barChartOne.setOption(optionBarOne);
-       // 饼状图
-        var pieChart = echarts.init(document.getElementById('pieChart'));
-        var optionPie = {
-            animation: false, 
-            title: {
-                //text: '业务核心数据',//
-                left: 'left'
             },
             tooltip: {
-                trigger: 'item'
+                trigger: 'item',
+                formatter: '{a} <br/>{b}: {c} ({d}%)'
             },
             legend: {
                 orient: 'vertical',
-    			left: 'right'
+                left: 'left'
             },
             series: [{
-                //name: '嘻嘻',//
+                name: '项目状态',
                 type: 'pie',
-                 radius: ['50%', '70%'],
+                radius: '50%',
                 data: [
-                    {value: 150, name: 'data1'},
+                    {value: 10, name: '成功'},
-                    {value: 274, name: 'data2'},
+                    {value: 0, name: '失败'}
-                    {value: 310, name: 'data3'},
+                ],
-                    {value: 335, name: 'data4'},
+                emphasis: {
-                    {value: 400, name: 'data5'}
+                    itemStyle: {
-                ]
+                        shadowBlur: 10,
+                        shadowOffsetX: 0,
+                        shadowColor: 'rgba(0, 0, 0, 0.5)'
+                    }
+                }
             }]
         };
-        pieChart.setOption(optionPie);
+        codeGenChart.setOption(codeGenOption);
-       //柱状图2
+
-    	var barChartTwo =  echarts.init(document.getElementById('barChartTwo'));
+        // 错误类型分布柱状图
-      	var optionBarTwo = {
+        var errorTypeChart = echarts.init(document.getElementById('errorTypeChart'));
-            animation: false, 
+        var errorTypeOption = {
             title: {
-                //text: '业务核心数据'//
+                text: '错误类型分布统计',
+                left: 'center'
+            },
+            tooltip: {
+                trigger: 'axis',
+                axisPointer: {
+                    type: 'shadow'
+                }
+            },
+            xAxis: {
+                type: 'category',
+                data: ['运行时异常', '数据库异常', 'IO异常', '网络异常', '编译时异常'],
+                axisLabel: {
+                    rotate: 45
+                }
+            },
+            yAxis: {
+                type: 'value'
+            },
+            series: [{
+                name: '错误数量',
+                type: 'bar',
+                data: [6, 1, 1, 1, 1],
+                itemStyle: {
+                    color: '#ff6b6b'
+                }
+            }]
+        };
+        errorTypeChart.setOption(errorTypeOption);
+
+        // 测试用例执行趋势折线图
+        var testTrendChart = echarts.init(document.getElementById('testTrendChart'));
+        var testTrendOption = {
+            title: {
+                text: '测试用例执行趋势',
+                left: 'center'
+            },
+            tooltip: {
+                trigger: 'axis'
+            },
+            legend: {
+                data: ['通过', '失败'],
+                top: 30
+            },
+            xAxis: {
+                type: 'category',
+                data: ['5月1日', '5月5日', '5月10日', '5月15日', '5月20日', '5月25日', '5月30日', '6月2日', '6月5日', '6月10日']
+            },
+            yAxis: {
+                type: 'value'
+            },
+            series: [
+                {
+                    name: '通过',
+                    type: 'line',
+                    data: [49, 30, 98, 20, 40, 58, 30, 70, 43, 20],
+                    itemStyle: {
+                        color: '#4ecdc4'
+                    }
+                },
+                {
+                    name: '失败',
+                    type: 'line',
+                    data: [1, 0, 2, 5, 0, 2, 5, 0, 2, 0],
+                    itemStyle: {
+                        color: '#ff6b6b'
+                    }
+                }
+            ]
+        };
+        testTrendChart.setOption(testTrendOption);
+
+        // 部署成功率统计柱状图
+        var deployChart = echarts.init(document.getElementById('deployChart'));
+        var deployOption = {
+            title: {
+                text: '项目部署成功率统计',
+                left: 'center'
             },
             tooltip: {
                 trigger: 'axis',
@@ -200,91 +259,36 @@
                 }
             },
             legend: {
-    			data: ['Profit', 'Expenses', 'Income']
+                data: ['成功', '失败'],
-  			},
+                top: 30
-  			grid: {
-    			left: '3%',
-    			right: '4%',
-    			bottom: '3%',
-    			containLabel: true
-  			},
-  			xAxis: [
-    			{
-      			type: 'value'
-    			}
-  			],
-  			yAxis: [
-    			{
-      			type: 'category',
-      			axisTick: {
-       			 show: false
-      			},
-      			data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
-    			}
-  			],
-  			series: [
-    			{
-      			name: 'Profit',
-      			type: 'bar',
-      			label: {
-        			show: true,
-        			position: 'inside'
-      			},
-      			emphasis: {
-        			focus: 'series'
-      			},
-      			data: [200, 170, 240, 244, 200, 220, 210]
-    			},
-    			{
-      			name: 'Income',
-      			type: 'bar',
-      			stack: 'Total',
-      			label: {
-        			show: true
-      			},
-      			emphasis: {
-        			focus: 'series'
-      			},
-      			data: [320, 302, 341, 374, 390, 450, 420]
-    			},
-    			{
-      			name: 'Expenses',
-      			type: 'bar',
-      			stack: 'Total',
-      			label: {
-        			show: true,
-        			position: 'left'
-      			},
-      			emphasis: {
-        			focus: 'series'
-      			},
-      			data: [-120, -132, -101, -134, -190, -230, -210]
-    			}
-  			]
-        };
-        barChartTwo.setOption(optionBarTwo);
-       //柱状图3
-    	var barChartThree =  echarts.init(document.getElementById('barChartThree'));
-      	var optionBarThree = {
-            animation: false, 
-           title: {
-                //text: '业务核心数据'//
             },
             xAxis: {
                 type: 'category',
-    			data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+                data: ['生产环境', '测试环境', '预生产环境']
             },
             yAxis: {
                 type: 'value'
             },
             series: [
                 {
-      			data: [120, 200, 150, 80, 70, 110, 130],
+                    name: '成功',
-      			type: 'bar'
+                    type: 'bar',
+                    data: [4, 2, 2],
+                    itemStyle: {
+                        color: '#4ecdc4'
+                    }
+                },
+                {
+                    name: '失败',
+                    type: 'bar',
+                    data: [0, 2, 0],
+                    itemStyle: {
+                        color: '#ff6b6b'
+                    }
                 }
             ]
         };
-        barChartThree.setOption(optionBarThree);
+        deployChart.setOption(deployOption);
-</script>
+    </script>
 </body>
 </html>

sbewmxjxt/src/main/resources/static/route/pages/index.html

@@ -11,7 +11,7 @@
     <link rel="stylesheet" href="assets/crpm/index/index.css" />
 </head>
 <body>
-   <div class="system">
+<div class="system">
     <div class="top">
         <h3>设备二维码巡检系统</h3>
         <span>
@@ -69,13 +69,41 @@
             </div>
             <div class="content">
                 <div class="homepage" id="homepage">
-                <div class="homepage-top">
+                    <div class="layui-row layui-col-space15">
-                    <div class="lineChart1" id="lineChart1"></div>
+                        <div class="layui-col-md12">
+                            <div class="layui-card">
+                                <div class="layui-card-header">设备故障类型统计</div>
+                                <div class="layui-card-body">
+                                    <div id="repairCostChart" style="height: 300px;"></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="layui-row layui-col-space15" style="margin-top: 15px;">
+                        <div class="layui-col-md4">
+                            <div class="layui-card">
+                                <div class="layui-card-header">设备类型分布</div>
+                                <div class="layui-card-body">
+                                    <div id="equipmentTypeChart" style="height: 250px;"></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="layui-col-md4">
+                            <div class="layui-card">
+                                <div class="layui-card-header">巡检合格率统计</div>
+                                <div class="layui-card-body">
+                                    <div id="inspectionRateChart" style="height: 250px;"></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="layui-col-md4">
+                            <div class="layui-card">
+                                <div class="layui-card-header">异常报警级别分布</div>
+                                <div class="layui-card-body">
+                                    <div id="alarmLevelChart" style="height: 250px;"></div>
+                                </div>
+                            </div>
                         </div>
-                <div class="homepage-bottom">
-                    <div class="lineChart2" id="lineChart2"></div>
-                    <div class="pieChart" id="pieChart"></div>
-                    <div class="barChart" id="barChart"></div>
                     </div>
                 </div>
 
@@ -83,8 +111,8 @@
             </div>
         </div>
     </div>
-  </div>
+</div>
-  <script src="assets/crpm/js/echarts/echarts.min.js"></script>
+<script src="assets/crpm/js/echarts/echarts.min.js"></script>
 <script src="assets/crpm/js/layui/layui.js"></script>
 <script>
     layui.use(['element', 'layer', 'util'], function () {
@@ -116,157 +144,144 @@
         });
     });
 
-    //折线图
+    // 设备故障类型统计 - 柱状图
-        var lineChart = echarts.init(document.getElementById('lineChart1'));
+    var repairCostChart = echarts.init(document.getElementById('repairCostChart'));
-        var optionLine = {
+    var repairCostOption = {
         animation: false,
-            title: {
+        tooltip: {
-                //text: '销售时间统计',//
+            trigger: 'axis',
-               left: 'left', // Center align the title horizontally
+            formatter: '{b}: {c}次'
         },
         xAxis: {
             type: 'category',
-                boundaryGap: false,
+            data: ['液压系统漏油', '风机异响', '排气温度过高', '加热元件故障', '皮带打滑', '电机过载', '真空度不足', '切割精度下降', '振动值超标', '控制系统故障'],
-                data: ['2024-1', '2024-2', '2024-3', '2024-4', '2024-5', '2024-6', '2024-7']
+            axisLabel: {
+                rotate: 45
+            }
         },
         yAxis: {
-                type: 'value'
+            type: 'value',
-            },
+            name: '故障次数'
-            tooltip: {
-        		trigger: 'axis' // 设置触发类型为坐标轴触发
         },
         series: [{
-                data: [820, 733, 901, 600, 1290, 500, 1320],
+            name: '故障次数',
-                type: 'line',
+            type: 'bar',
-               smooth: true,
+            data: [2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
-              areaStyle: {}
+            itemStyle: {
+                color: '#1890ff'
+            }
         }]
     };
-        lineChart.setOption(optionLine); 
+    repairCostChart.setOption(repairCostOption);
 
-		var currentIndex = -1;
+    // 设备类型分布 - 饼图
-		var interval = 1000; // 切换间隔时间，单位是毫秒
+    var equipmentTypeChart = echarts.init(document.getElementById('equipmentTypeChart'));
-		var timer; // 定时器变量
+    var equipmentTypeOption = {
-
-		// 自动触发选中状态并每隔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();
-		});
-
-    //折线图2
-        var lineChart2 = echarts.init(document.getElementById('lineChart2'));
-        var optionLine = {
         animation: false,
-             xAxis: {
-                type: 'category',
-                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
-            },
-            yAxis: {
-                type: 'value'
-            },
-            series: [
-                {
-                data: [820, 932, 901, 934, 1290, 1330, 1320],
-                type: 'line',
-                smooth: true
-                }
-            ]
-        };
-        lineChart2.setOption(optionLine); 
-     
-		
-
-     // 饼状图
-        var pieChart = echarts.init(document.getElementById('pieChart'));
-        var optionPie = {
-          	animation: false,
-            title: {
-                //text: '订单占比系统',//
-                left: 'left'
-            },
         tooltip: {
-                trigger: 'item'
+            trigger: 'item',
+            formatter: '{a} <br/>{b}: {c}台 ({d}%)'
         },
         legend: {
             orient: 'vertical',
-    			left: 'right'
+            left: 'left'
         },
         series: [{
-                //name: '嘻嘻',//
+            name: '设备类型',
             type: 'pie',
-                 radius: ['60%', '70%'],
+            radius: '60%',
             data: [
-                    {value: 150, name: 'data1'},
+                {value: 4, name: '注塑机'},
-                    {value: 274, name: 'data2'},
+                {value: 4, name: '冷却塔'},
-                    {value: 310, name: 'data3'},
+                {value: 4, name: '压缩机'},
-                    {value: 335, name: 'data4'},
+                {value: 4, name: '烘干机'},
-                    {value: 400, name: 'data5'}
+                {value: 4, name: '传送带'},
-                ]
+                {value: 4, name: '搅拌机'},
+                {value: 4, name: '真空泵'},
+                {value: 4, name: '切割机'},
+                {value: 4, name: '风机'},
+                {value: 4, name: '包装机'}
+            ],
+            emphasis: {
+                itemStyle: {
+                    shadowBlur: 10,
+                    shadowOffsetX: 0,
+                    shadowColor: 'rgba(0, 0, 0, 0.5)'
+                }
+            }
         }]
     };
-        pieChart.setOption(optionPie);
+    equipmentTypeChart.setOption(equipmentTypeOption);
 
-        	//柱状图
+    // 巡检合格率统计 - 柱状图
-      	var barChart =  echarts.init(document.getElementById('barChart'));
+    var inspectionRateChart = echarts.init(document.getElementById('inspectionRateChart'));
-      	var optionBar = {
+    var inspectionRateOption = {
         animation: false,
-           title: {
+        tooltip: {
-                //xt: '收支情况'//
+            trigger: 'axis',
-            },
+            formatter: '{b}: {c}%'
-            tooltip: {},
-            legend: {
-                data: ['data1', 'data2'] ,
-              left: 'right'
         },
         xAxis: {
-                data: ['一月', '二月', '三月', '四月', '五月','六月','七月','八月','九月','十月','十一月','十二月',] 
+            type: 'category',
+            data: ['8月1日', '8月2日', '8月3日']
+        },
+        yAxis: {
+            type: 'value',
+            name: '合格率(%)',
+            max: 100
         },
-            yAxis: {},
         series: [{
-                name: 'data1',
+            name: '合格率',
             type: 'bar',
-                data: [5, 20, 36, 10, 10,15,16,20,12,13,35,12] // 第一条柱状图的数据
+            data: [100, 70, 70],
-            }, {
+            itemStyle: {
-                name: 'data2',
+                color: function(params) {
-                type: 'bar',
+                    return params.value >= 90 ? '#52c41a' : params.value >= 70 ? '#faad14' : '#ff4d4f';
-                data: [15, 10, 25, 8, 15,8,30,12,11,18,25,12] // 第二条柱状图的数据
+                }
+            }
         }]
     };
-        barChart.setOption(optionBar);
+    inspectionRateChart.setOption(inspectionRateOption);
+
+    // 异常报警级别分布 - 环形饼图
+    var alarmLevelChart = echarts.init(document.getElementById('alarmLevelChart'));
+    var alarmLevelOption = {
+        animation: false,
+        tooltip: {
+            trigger: 'item',
+            formatter: '{a} <br/>{b}: {c}次 ({d}%)'
+        },
+        legend: {
+            orient: 'vertical',
+            left: 'left'
+        },
+        series: [{
+            name: '报警级别',
+            type: 'pie',
+            radius: ['40%', '70%'],
+            data: [
+                {value: 8, name: '警告', itemStyle: {color: '#faad14'}},
+                {value: 8, name: '一般', itemStyle: {color: '#1890ff'}},
+                {value: 6, name: '严重', itemStyle: {color: '#ff4d4f'}}
+            ],
+            emphasis: {
+                itemStyle: {
+                    shadowBlur: 10,
+                    shadowOffsetX: 0,
+                    shadowColor: 'rgba(0, 0, 0, 0.5)'
+                }
+            }
+        }]
+    };
+    alarmLevelChart.setOption(alarmLevelOption);
+
+    // 响应式处理
+    window.addEventListener('resize', function() {
+        repairCostChart.resize();
+        equipmentTypeChart.resize();
+        inspectionRateChart.resize();
+        alarmLevelChart.resize();
+    });
 </script>
 </body>
 </html>

xtbgxt/src/main/resources/static/route/pages/index.html

@@ -84,12 +84,33 @@
                     欢迎使用协同办公系统
                 </blockquote>
                 <div class='homepage' id="homepage">
-                  	<div class='homepage-top' >
+                    <div class="layui-row layui-col-space15">
-                  		<div class='pieChart' id="pieChart"></div>
+                        <div class="layui-col-md6">
-              			<div class='lineChart' id="lineChart"></div>
+                            <div class="layui-card">
+                                <div class="layui-card-header">任务状态分布</div>
+                                <div class="layui-card-body">
+                                    <div id="taskStatusChart" style="height: 300px;"></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="layui-col-md6">
+                            <div class="layui-card">
+                                <div class="layui-card-header">月度活动趋势</div>
+                                <div class="layui-card-body">
+                                    <div id="monthlyTrendChart" style="height: 300px;"></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="layui-row layui-col-space15" style="margin-top: 15px;">
+                        <div class="layui-col-md12">
+                            <div class="layui-card">
+                                <div class="layui-card-header">部门人员分布</div>
+                                <div class="layui-card-body">
+                                    <div id="departmentChart" style="height: 350px;"></div>
+                                </div>
+                            </div>
                         </div>
-                   	<div class='homepage-bot' >
-                  		<div id="barChart" class='barChart'></div>
                     </div>
                 </div>
                 <div class="layui-card layui-panel page-iframe-container">
@@ -97,7 +118,7 @@
                 </div>
             </div>
         </div>
-<!--        <div class="layui-footer"></div>-->
+        <!--        <div class="layui-footer"></div>-->
     </div>
 </div>
 <script src="assets/crpm/js/echarts/echarts.min.js"></script>
@@ -128,135 +149,104 @@
             pageIframe.show();
             homepage.style.display = 'none';
         });
-    });
+
-     //折线图
+        // 任务状态分布饼图
-        var lineChart = echarts.init(document.getElementById('lineChart'));
+        var taskStatusChart = echarts.init(document.getElementById('taskStatusChart'));
-        var optionLine = {
+        var taskStatusOption = {
-            animation: false, 
-            title: {
-                //text: '销售时间统计',//
-               left: 'left', // Center align the title horizontally
-            },
-            xAxis: {
-                type: 'category',
-                boundaryGap: false,
-                data: ['2024-1', '2024-2', '2024-3', '2024-4', '2024-5', '2024-6', '2024-7']
-            },
-            yAxis: {
-                type: 'value'
-            },
             tooltip: {
-        		trigger: 'axis' // 设置触发类型为坐标轴触发
+                trigger: 'item',
-    		},
+                formatter: '{a} <br/>{b}: {c} ({d}%)'
-            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; // 定时器变量
-
-		// 自动触发选中状态并每隔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, 
-            title: {
-                //text: '订单占比系统',//
-                left: 'left'
-            },
-            tooltip: {
-                trigger: 'item'
             },
             legend: {
                 orient: 'vertical',
                 left: 'right'
             },
             series: [{
-                name: '嘻嘻',
+                name: '任务状态',
                 type: 'pie',
-                 radius: ['60%', '70%'],
+                radius: ['40%', '70%'],
                 data: [
-                    {value: 150, name: 'data1'},
+                    {value: 5, name: '已完成'},
-                    {value: 274, name: 'data2'},
+                    {value: 3, name: '进行中'},
-                    {value: 310, name: 'data3'},
+                    {value: 2, name: '未开始'}
-                    {value: 335, name: 'data4'},
+                ],
-                    {value: 400, name: 'data5'}
+                itemStyle: {
-                ]
+                    emphasis: {
+                        shadowBlur: 10,
+                        shadowOffsetX: 0,
+                        shadowColor: 'rgba(0, 0, 0, 0.5)'
+                    }
+                }
             }]
         };
-        pieChart.setOption(optionPie);
+        taskStatusChart.setOption(taskStatusOption);
-     	//柱状图
+
-      	var barChart =  echarts.init(document.getElementById('barChart'));
+        // 月度活动趋势折线图
-      	var optionBar = {
+        var monthlyTrendChart = echarts.init(document.getElementById('monthlyTrendChart'));
-            animation: false, 
+        var monthlyTrendOption = {
-           title: {
+            tooltip: {
-               // text: '收支情况'//
+                trigger: 'axis'
             },
-            tooltip: {},
             legend: {
-                //data: ['收入', '支出'] ,//
+                data: ['任务数量', '日程安排']
-              	data: ['data1', 'data2'] ,
-              left: 'right'
             },
             xAxis: {
-                data: ['一月', '二月', '三月', '四月', '五月','六月','七月','八月','九月','十月','十一月','十二月',] 
+                type: 'category',
+                boundaryGap: false,
+                data: ['1月', '2月']
+            },
+            yAxis: {
+                type: 'value'
             },
-            yAxis: {},
             series: [{
-                name: 'data1',
+                name: '任务数量',
-                type: 'bar',
+                type: 'line',
-                data: [5, 20, 36, 10, 10,15,16,20,12,13,35,12] // 第一条柱状图的数据
+                data: [5, 5],
+                smooth: true,
+                areaStyle: {}
             }, {
-                name: 'data2',
+                name: '日程安排',
-                type: 'bar',
+                type: 'line',
-                data: [15, 10, 25, 8, 15,8,30,12,11,18,25,12] // 第二条柱状图的数据
+                data: [5, 5],
+                smooth: true,
+                areaStyle: {}
             }]
         };
-        barChart.setOption(optionBar);
+        monthlyTrendChart.setOption(monthlyTrendOption);
+
+        // 部门人员分布柱状图
+        var departmentChart = echarts.init(document.getElementById('departmentChart'));
+        var departmentOption = {
+            tooltip: {
+                trigger: 'axis',
+                axisPointer: {
+                    type: 'shadow'
+                }
+            },
+            legend: {
+                data: ['人员数量']
+            },
+            xAxis: {
+                type: 'category',
+                data: ['生产部', '质检部', '采购部', '物流部', '技术部', '人事部', '财务部', '安环部', 'IT部']
+            },
+            yAxis: {
+                type: 'value'
+            },
+            series: [{
+                name: '人员数量',
+                type: 'bar',
+                data: [2, 1, 1, 1, 1, 1, 1, 1, 1],
+                itemStyle: {
+                    color: function(params) {
+                        var colorList = ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074'];
+                        return colorList[params.dataIndex];
+                    }
+                }
+            }]
+        };
+        departmentChart.setOption(departmentOption);
+    });
 
 
 </script>

zjkglxt/src/main/resources/static/route/pages/index.html

@@ -11,7 +11,7 @@
     <link rel="stylesheet" href="assets/crpm/index/index.css" />
 </head>
 <body>
- <div class="system">
+<div class="system">
     <div class="left">
         <div class="head">
             <div class='photo'>头像</div>
@@ -84,20 +84,57 @@
         <div class="bottom">
             <div class="content">
                 <div class='homepage' id="homepage">
-                  	<div class='homepage-top' >
+                    <div class="layui-row layui-col-space15">
-                  		<div class='pieChartOne' id="pieChartOne"></div>
+                        <div class="layui-col-md3">
-                  		<div class='pieChartTwo' id="pieChartTwo"></div>
+                            <div class="layui-card">
-                  		<div class='pieChartThree' id="pieChartThree"></div>
+                                <div class="layui-card-header">专家性别分布</div>
-                  		<div class='pieChartFour' id="pieChartFour"></div>
+                                <div class="layui-card-body">
+                                    <div id="genderChart" style="width: 100%; height: 250px;"></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="layui-col-md3">
+                            <div class="layui-card">
+                                <div class="layui-card-header">专业领域分布</div>
+                                <div class="layui-card-body">
+                                    <div id="fieldChart" style="width: 100%; height: 250px;"></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="layui-col-md3">
+                            <div class="layui-card">
+                                <div class="layui-card-header">职称分布</div>
+                                <div class="layui-card-body">
+                                    <div id="titleChart" style="width: 100%; height: 250px;"></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="layui-col-md3">
+                            <div class="layui-card">
+                                <div class="layui-card-header">专家评分分布</div>
+                                <div class="layui-card-body">
+                                    <div id="scoreChart" style="width: 100%; height: 250px;"></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="layui-row layui-col-space15" style="margin-top: 15px;">
+                        <div class="layui-col-md6">
+                            <div class="layui-card">
+                                <div class="layui-card-header">专家录入趋势</div>
+                                <div class="layui-card-body">
+                                    <div id="trendChart" style="width: 100%; height: 300px;"></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="layui-col-md6">
+                            <div class="layui-card">
+                                <div class="layui-card-header">专家活跃度统计</div>
+                                <div class="layui-card-body">
+                                    <div id="activityChart" style="width: 100%; height: 300px;"></div>
+                                </div>
                             </div>
-                   	<div class='homepage-center' >
-                  		<div class='lineChart' id="lineChart"></div>
-                  		<div id="pieChart" class='pieChart' ></div>
-
                         </div>
-                   	<div class='homepage-bot' >
-                  			<div class='barChartOne' id="barChartOne"></div>
-                  		<div class='barChartTwo' id="barChartTwo"></div>
                     </div>
                 </div>
                 <div class="layui-card layui-panel page-iframe-container">
@@ -107,7 +144,7 @@
         </div>
 
     </div>
-  </div>
+</div>
 <script src="assets/crpm/js/layui/layui.js"></script>
 <script src="assets/crpm/js/echarts/echarts.min.js"></script>
 
@@ -138,297 +175,122 @@
             homepage.style.display = 'none';
         });
     });
-      // 饼状图1
+    // 专家性别分布饼图
-        var pieChartOne = echarts.init(document.getElementById('pieChartOne'));
+    var genderChart = echarts.init(document.getElementById('genderChart'));
-        var optionPieOne = {
+    var genderOption = {
-          animation: false, 
+        tooltip: { trigger: 'item' },
-            tooltip: {
-                trigger: 'item'
-            },
-         
         series: [{
-                //name: '嘻嘻',//
             type: 'pie',
-                 radius: ['0%', '70%'],
+            radius: '60%',
             data: [
-                    {value: 150, name: 'data1'},
+                { value: 17, name: '男' },
-                    {value: 274, name: 'data2'},
+                { value: 14, name: '女' }
-                    {value: 310, name: 'data3'},
-                    {value: 335, name: 'data4'},
-                    {value: 400, name: 'data5'}
             ]
         }]
     };
-        pieChartOne.setOption(optionPieOne);
+    genderChart.setOption(genderOption);
-      // 饼状图2
-        var pieChartTwo = echarts.init(document.getElementById('pieChartTwo'));
-        var optionPieTwo = {
-          animation: false, 
-            tooltip: {
-                trigger: 'item'
-            },
 
+    // 专业领域分布饼图
+    var fieldChart = echarts.init(document.getElementById('fieldChart'));
+    var fieldOption = {
+        tooltip: { trigger: 'item' },
         series: [{
-                //name: '嘻嘻',//
             type: 'pie',
-                 radius: ['0%', '70%'],
+            radius: '60%',
             data: [
-                    {value: 200, name: 'data1'},
+                { value: 10, name: '医学' },
-                    {value: 300, name: 'data2'},
+                { value: 5, name: '建筑' },
-                    {value: 500, name: 'data3'},
+                { value: 4, name: '教育' },
-                    {value: 335, name: 'data4'},
+                { value: 4, name: '财务' },
-                    {value: 400, name: 'data5'}
+                { value: 8, name: 'IT技术' }
             ]
         }]
     };
-        pieChartTwo.setOption(optionPieTwo);
+    fieldChart.setOption(fieldOption);
-      // 饼状图3
-        var pieChartThree = echarts.init(document.getElementById('pieChartThree'));
-        var optionPieThree = {
-          animation: false, 
-            tooltip: {
-                trigger: 'item'
-            },
 
+    // 职称分布饼图
+    var titleChart = echarts.init(document.getElementById('titleChart'));
+    var titleOption = {
+        tooltip: { trigger: 'item' },
         series: [{
-                //name: '嘻嘻',//
             type: 'pie',
-                 radius: ['0%', '70%'],
+            radius: '60%',
             data: [
-                    {value: 100, name: 'data1'},
+                { value: 15, name: '高级' },
-                    {value: 274, name: 'data2'},
+                { value: 8, name: '中级' },
-                    {value: 310, name: 'data3'},
+                { value: 8, name: '初级' }
-                    {value: 600, name: 'data4'},
-                    {value: 100, name: 'data5'}
             ]
         }]
     };
-        pieChartThree.setOption(optionPieThree);
+    titleChart.setOption(titleOption);
-      // 饼状图4
-        var pieChartFour = echarts.init(document.getElementById('pieChartFour'));
-        var optionPieFour = {
-          animation: false, 
-            tooltip: {
-                trigger: 'item'
-            },
 
-            series: [{
+    // 专家评分分布柱状图
-                //name: '嘻嘻',//
+    var scoreChart = echarts.init(document.getElementById('scoreChart'));
-                type: 'pie',
+    var scoreOption = {
-                 radius: ['0%', '70%'],
+        tooltip: { trigger: 'axis' },
-                data: [
-                    {value: 150, name: 'data1'},
-                    {value: 274, name: 'data2'},
-                    {value: 500, name: 'data3'},
-                    {value: 335, name: 'data4'},
-                    {value: 400, name: 'data5'}
-                ]
-            }]
-        };
-        pieChartFour.setOption(optionPieFour);
-       //折线图
-        var lineChart = echarts.init(document.getElementById('lineChart'));
-        var optionLine = {
-            animation: false, 
-            title: {
-                //text: '业务核心数据',//
-               left: 'left', // Center align the title horizontally
-            },
         xAxis: {
             type: 'category',
-                boundaryGap: false,
+            data: ['88-89分', '90-94分', '95-96分']
-                data: ['2024-1', '2024-2', '2024-3', '2024-4', '2024-5', '2024-6', '2024-7']
-            },
-            yAxis: {
-                type: 'value'
-            },
-            tooltip: {
-        		trigger: 'axis' // 设置触发类型为坐标轴触发
         },
+        yAxis: { type: 'value' },
         series: [{
-                data: [820, 733, 901, 600, 1290, 500, 1320],
+            data: [3, 5, 2],
+            type: 'bar',
+            itemStyle: { color: '#5470c6' }
+        }]
+    };
+    scoreChart.setOption(scoreOption);
+    // 专家录入趋势曲线图
+    var trendChart = echarts.init(document.getElementById('trendChart'));
+    var trendOption = {
+        tooltip: { trigger: 'axis' },
+        xAxis: {
+            type: 'category',
+            data: ['1月1-5日', '1月10-15日', '1月20-25日', '2月1-5日', '2月10-15日', '2月20-25日']
+        },
+        yAxis: { type: 'value' },
+        series: [{
+            name: '新增专家',
+            data: [3, 3, 2, 3, 2, 2],
             type: 'line',
             smooth: true,
-              areaStyle: {}
+            areaStyle: { opacity: 0.3 }
         }]
     };
-        lineChart.setOption(optionLine); 
+    trendChart.setOption(trendOption);
-     
+    // 专家活跃度统计柱状图
-		var currentIndex = -1;
+    var activityChart = echarts.init(document.getElementById('activityChart'));
-		var interval = 1000; // 切换间隔时间，单位是毫秒
+    var activityOption = {
-		var timer; // 定时器变量
+        tooltip: { trigger: 'axis' },
-
+        legend: { data: ['参与项目数', '发表文章数'] },
-		// 自动触发选中状态并每隔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, 
-            title: {
-                //text: '订单占比系统',//
-                left: 'left'
-            },
-            tooltip: {
-                trigger: 'item'
-            },
-           	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);
-       //柱状图1
-    	var barChartOne =  echarts.init(document.getElementById('barChartOne'));
-      	var optionBarOne = {
-            animation: false, 
-           title: {
-                //text: '业务核心数据'//
-            },
-            tooltip: {},
-            legend: {
-                data: ['data1', 'data2'] ,
-              left: 'right'
-            },
         xAxis: {
-                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] // 第二条柱状图的数据
-            }]
-        };
-        barChartOne.setOption(optionBarOne);
-      //柱状图2
-    	var barChartTwo =  echarts.init(document.getElementById('barChartTwo'));
-      	var optionBarTwo = {
-            animation: false, 
-           title: {
-                //text: '业务核心数据'//
-            },
-           tooltip: {
-    			trigger: 'axis',
-    			axisPointer: {
-      			type: 'shadow'
-    			}
-  			},
-  			legend: {
-    			data: ['Profit', 'Expenses', 'Income']
-  			},
-  			grid: {
-    			left: '3%',
-    			right: '4%',
-    			bottom: '3%',
-    			containLabel: true
-  			},
-  			xAxis: [
-    			{
-      			type: 'value'
-    			}
-  			],
-  			yAxis: [
-    			{
             type: 'category',
-      			axisTick: {
+            data: ['人工智能', '大数据', '物联网', '区块链', '云计算']
-       			 show: false
         },
-      			data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+        yAxis: { type: 'value' },
-    			}
-  			],
         series: [
             {
-      			name: 'Profit',
+                name: '参与项目数',
                 type: 'bar',
-      			label: {
+                data: [15, 12, 18, 10, 14]
-        			show: true,
-        			position: 'inside'
-      			},
-      			emphasis: {
-        			focus: 'series'
-      			},
-      			data: [200, 170, 240, 244, 200, 220, 210]
             },
             {
-      			name: 'Income',
+                name: '发表文章数',
                 type: 'bar',
-      			stack: 'Total',
+                data: [30, 25, 22, 18, 27]
-      			label: {
-        			show: true
-      			},
-      			emphasis: {
-        			focus: 'series'
-      			},
-      			data: [320, 302, 341, 374, 390, 450, 420]
-    			},
-    			{
-      			name: 'Expenses',
-      			type: 'bar',
-      			stack: 'Total',
-      			label: {
-        			show: true,
-        			position: 'left'
-      			},
-      			emphasis: {
-        			focus: 'series'
-      			},
-      			data: [-120, -132, -101, -134, -190, -230, -210]
             }
         ]
     };
-        barChartTwo.setOption(optionBarTwo);
+    activityChart.setOption(activityOption);
+    // 窗口大小改变时重新调整图表
+    window.addEventListener('resize', function() {
+        genderChart.resize();
+        fieldChart.resize();
+        titleChart.resize();
+        scoreChart.resize();
+        trendChart.resize();
+        activityChart.resize();
+    });
 </script>
 </body>
 </html>

zxcpxt/src/main/resources/static/route/pages/index.html

@@ -69,17 +69,43 @@
                 <blockquote class="layui-elem-quote-index layui-text">
                     欢迎使用在线测评系统
                 </blockquote>
+                <!--数据统计代码写到这里 , 只允许2行 -->
                 <div class='homepage' id="homepage">
-                  	<div class='homepage-top' >
+                    <div class="layui-row layui-col-space15">
-                  		<div id="barChartOne" class='barChartOne' ></div>
+                        <div class="layui-col-md6">
-                  		<div class='pieChart' id="pieChart"></div>
+                            <div class="layui-card">
-                  		<div id="barChartTwo" class='barChartTwo' ></div>
+                                <div class="layui-card-header">考试参与情况统计</div>
-                      
+                                <div class="layui-card-body">
+                                    <div id="examParticipationChart" style="width: 100%; height: 300px;"></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="layui-col-md6">
+                            <div class="layui-card">
+                                <div class="layui-card-header">成绩分布统计</div>
+                                <div class="layui-card-body">
+                                    <div id="scoreDistributionChart" style="width: 100%; height: 300px;"></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="layui-row layui-col-space15" style="margin-top: 15px;">
+                        <div class="layui-col-md6">
+                            <div class="layui-card">
+                                <div class="layui-card-header">题目难度分布</div>
+                                <div class="layui-card-body">
+                                    <div id="difficultyChart" style="width: 100%; height: 300px;"></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="layui-col-md6">
+                            <div class="layui-card">
+                                <div class="layui-card-header">月度考试趋势</div>
+                                <div class="layui-card-body">
+                                    <div id="monthlyTrendChart" style="width: 100%; height: 300px;"></div>
+                                </div>
+                            </div>
                         </div>
-                   	<div class='homepage-bot' >
-                      	<div class='lineChart' id="lineChart"></div>
-                  		<div id="barChartThree" class='barChartThree' ></div>
-                  		<div id="funnelChart" class='funnelChart' ></div>
                     </div>
                 </div>
                 <div class="layui-card layui-panel page-iframe-container">
@@ -118,298 +144,94 @@
             pageIframe.show();
             homepage.style.display = 'none';
         });
-    });
+
-     //柱状图1
+        // 初始化数据统计图表
-    	var barChartOne =  echarts.init(document.getElementById('barChartOne'));
+        var initDataCharts = function() {
-      	var optionBarOne = {
+            // 考试参与情况饼图
-            animation: false, 
+            var examChart = echarts.init(document.getElementById('examParticipationChart'));
-           title: {
+            var examOption = {
-                //text: '业务核心数据'//
+                tooltip: { trigger: 'item' },
-            },
+                legend: { orient: 'vertical', left: 'left' },
-            tooltip: {},
-            legend: {
-                data: ['data1', 'data2'] ,
-              left: 'right'
-            },
-            xAxis: {
-                data: ['一月', '二月', '三月', '四月', '五月','六月','七月','八月','九月','十月','十一月','十二月',] 
-            },
-            yAxis: {},
                 series: [{
-                name: 'data1',
+                    name: '参与情况',
-                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] // 第二条柱状图的数据
-            }]
-        };
-        barChartOne.setOption(optionBarOne);
-       // 饼状图
-        var pieChart = echarts.init(document.getElementById('pieChart'));
-        var optionPie = {
-            animation: false, 
-            title: {
-                //text: '业务核心数据',//
-                left: 'left'
-            },
-            tooltip: {
-                trigger: 'item'
-            },
-           	legend: {
-    			orient: 'vertical',
-    			left: 'right'
-  		   	},
-            series: [{
-                //name: '嘻嘻',//
                     type: 'pie',
-                 radius: ['0%', '70%'],
+                    radius: '60%',
                     data: [
-                    {value: 150, name: 'data1'},
+                        { value: 86, name: '已参与' },
-                    {value: 274, name: 'data2'},
+                        { value: 24, name: '未参与' }
-                    {value: 310, name: 'data3'},
+                    ],
-                    {value: 335, name: 'data4'},
+                    emphasis: {
-                    {value: 400, name: 'data5'}
+                        itemStyle: {
+                            shadowBlur: 10,
+                            shadowOffsetX: 0,
+                            shadowColor: 'rgba(0, 0, 0, 0.5)'
+                        }
+                    }
+                }]
+            };
+            examChart.setOption(examOption);
+
+            // 成绩分布柱状图
+            var scoreChart = echarts.init(document.getElementById('scoreDistributionChart'));
+            var scoreOption = {
+                tooltip: { trigger: 'axis' },
+                xAxis: {
+                    type: 'category',
+                    data: ['90-100分', '80-89分', '70-79分', '60-69分', '60分以下']
+                },
+                yAxis: { type: 'value' },
+                series: [{
+                    name: '人数',
+                    data: [12, 28, 35, 18, 7],
+                    type: 'bar',
+                    itemStyle: { color: '#5470c6' }
+                }]
+            };
+            scoreChart.setOption(scoreOption);
+
+            // 题目难度分布环形图
+            var difficultyChart = echarts.init(document.getElementById('difficultyChart'));
+            var difficultyOption = {
+                tooltip: { trigger: 'item' },
+                legend: { orient: 'vertical', left: 'left' },
+                series: [{
+                    name: '题目难度',
+                    type: 'pie',
+                    radius: ['40%', '70%'],
+                    data: [
+                        { value: 45, name: '简单' },
+                        { value: 128, name: '中等' },
+                        { value: 67, name: '困难' }
                     ]
                 }]
             };
-        pieChart.setOption(optionPie);
+            difficultyChart.setOption(difficultyOption);
-       //柱状图2
+
-    	var barChartTwo =  echarts.init(document.getElementById('barChartTwo'));
+            // 月度考试趋势曲线图
-      	var optionBarTwo = {
+            var trendChart = echarts.init(document.getElementById('monthlyTrendChart'));
-            animation: false, 
+            var trendOption = {
-           title: {
+                tooltip: { trigger: 'axis' },
-                //text: '业务核心数据'//
-            },
-           tooltip: {
-    			trigger: 'axis',
-    			axisPointer: {
-      			type: 'shadow'
-    			}
-  			},
-  			legend: {
-    			data: ['Profit', 'Expenses', 'Income']
-  			},
-  			grid: {
-    			left: '3%',
-    			right: '4%',
-    			bottom: '3%',
-    			containLabel: true
-  			},
-  			xAxis: [
-    			{
-      			type: 'value'
-    			}
-  			],
-  			yAxis: [
-    			{
-      			type: 'category',
-      			axisTick: {
-       			 show: false
-      			},
-      			data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
-    			}
-  			],
-  			series: [
-    			{
-      			name: 'Profit',
-      			type: 'bar',
-      			label: {
-        			show: true,
-        			position: 'inside'
-      			},
-      			emphasis: {
-        			focus: 'series'
-      			},
-      			data: [200, 170, 240, 244, 200, 220, 210]
-    			},
-    			{
-      			name: 'Income',
-      			type: 'bar',
-      			stack: 'Total',
-      			label: {
-        			show: true
-      			},
-      			emphasis: {
-        			focus: 'series'
-      			},
-      			data: [320, 302, 341, 374, 390, 450, 420]
-    			},
-    			{
-      			name: 'Expenses',
-      			type: 'bar',
-      			stack: 'Total',
-      			label: {
-        			show: true,
-        			position: 'left'
-      			},
-      			emphasis: {
-        			focus: 'series'
-      			},
-      			data: [-120, -132, -101, -134, -190, -230, -210]
-    			}
-  			]
-        };
-        barChartTwo.setOption(optionBarTwo);
-       //折线图
-        var lineChart = echarts.init(document.getElementById('lineChart'));
-        var optionLine = {
-            animation: false, 
-            title: {
-                //text: '业务核心数据',//
-               left: 'left', // Center align the title horizontally
-            },
                 xAxis: {
                     type: 'category',
-                boundaryGap: false,
+                    data: ['1月', '2月', '3月', '4月', '5月', '6月']
-                data: ['2024-1', '2024-2', '2024-3', '2024-4', '2024-5', '2024-6', '2024-7']
-            },
-            yAxis: {
-                type: 'value'
-            },
-            tooltip: {
-        		trigger: 'axis' // 设置触发类型为坐标轴触发
                 },
+                yAxis: { type: 'value', name: '考试次数' },
                 series: [{
-                data: [820, 733, 901, 600, 1290, 500, 1320],
+                    name: '考试场次',
+                    data: [8, 12, 15, 18, 22, 25],
                     type: 'line',
                     smooth: true,
-              areaStyle: {}
+                    itemStyle: { color: '#91cc75' },
+                    areaStyle: { opacity: 0.3 }
                 }]
             };
-        lineChart.setOption(optionLine); 
+            trendChart.setOption(trendOption);
-     
-		var currentIndex = -1;
-		var interval = 1000; // 切换间隔时间，单位是毫秒
-		var timer; // 定时器变量
-
-		// 自动触发选中状态并每隔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();
-		});
-       //柱状图3
-    	var barChartThree =  echarts.init(document.getElementById('barChartThree'));
-      	var optionBarThree = {
-            animation: false, 
-           title: {
-                //text: '业务核心数据'//
-            },
-             xAxis: {
-    			type: 'category',
-    			data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
-  			},
-  			yAxis: {
-    			type: 'value'
-  			},
-  			series: [
-    			{
-      			data: [120, 200, 150, 80, 70, 110, 130],
-      			type: 'bar'
-    			}
-  			]
         };
-        barChartThree.setOption(optionBarThree);
+
-      //漏斗图
+        // 初始化图表
-      var funnelChart =  echarts.init(document.getElementById('funnelChart'));
+        initDataCharts();
-      	var optionFunnel = {
+    });
-            animation: false, 
+
-           title: {
-                text: ''
-            },
-            tooltip: {
-    			trigger: 'item',
-    			formatter: '{a} <br/>{b} : {c}%'
-  			},
- 			 			toolbox: {
-    			feature: {
-      			dataView: { readOnly: false },
-      			restore: {},
-      			saveAsImage: {}
-    		}			
-  			},
-  			legend: {
-    			data: ['Show', 'Click', 'Visit', 'Inquiry', 'Order']
-  			},
-  			series: [
-    			{
-      			name: 'Funnel',
-      			type: 'funnel',
-      			left: '10%',
-      			top: 60,
-      			bottom: 60,
-      			width: '80%',
-      			min: 0,
-      			max: 100,
-      			minSize: '0%',
-      			maxSize: '100%',
-      			sort: 'descending',
-      			gap: 2,
-      			label: {
-        			show: true,
-        			position: 'inside'
-      			},
-      			labelLine: {
-        			length: 10,
-        			lineStyle: {
-         			 width: 1,
-          			type: 'solid'
-        			}
-      			},
-      			itemStyle: {
-        			borderColor: '#fff',
-       			 borderWidth: 1
-      			},
-      			emphasis: {
-        			label: {
-          			fontSize: 20
-        			}
-      			},
-      			data: [
-        			{ value: 60, name: 'Visit' },
-        			{ value: 40, name: 'Inquiry' },
-        			{ value: 20, name: 'Order' },
-        			{ value: 80, name: 'Click' },
-        			{ value: 100, name: 'Show' }
-      			]
-    			}
-  			]
-        };
-        funnelChart.setOption(optionFunnel);
 </script>
 </body>
 </html>

zxyxykhxt/src/main/resources/static/route/pages/index.html

@@ -69,13 +69,43 @@
                 <blockquote class="layui-elem-quote layui-text">
                     欢迎使用在线研修与考核系统
                 </blockquote>
+                <!--数据统计代码写到这里 , 只允许2行 -->
                 <div class='homepage' id="homepage">
-                  	<div class='homepage-top' >
+                    <div class="layui-row layui-col-space15">
-                  		<div class='pieChart' id="pieChart"></div>
+                        <div class="layui-col-md6">
-              			<div class='lineChart' id="lineChart"></div>
+                            <div class="layui-card">
+                                <div class="layui-card-header">课程完成率统计</div>
+                                <div class="layui-card-body">
+                                    <div id="courseCompletionChart" style="width: 100%; height: 300px;"></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="layui-col-md6">
+                            <div class="layui-card">
+                                <div class="layui-card-header">成绩分布统计</div>
+                                <div class="layui-card-body">
+                                    <div id="gradeDistributionChart" style="width: 100%; height: 300px;"></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="layui-row layui-col-space15" style="margin-top: 15px;">
+                        <div class="layui-col-md6">
+                            <div class="layui-card">
+                                <div class="layui-card-header">学习时长趋势</div>
+                                <div class="layui-card-body">
+                                    <div id="studyTimeChart" style="width: 100%; height: 300px;"></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="layui-col-md6">
+                            <div class="layui-card">
+                                <div class="layui-card-header">课程反馈满意度</div>
+                                <div class="layui-card-body">
+                                    <div id="satisfactionChart" style="width: 100%; height: 300px;"></div>
+                                </div>
+                            </div>
                         </div>
-                   	<div class='homepage-bot' >
-                  		<div id="barChart" class='barChart'></div>
                     </div>
                 </div>
                 <div class="layui-card layui-panel page-iframe-container">
@@ -90,6 +120,7 @@
 
 <script src="assets/crpm/js/layui/layui.js"></script>
 <script>
+
     layui.use(['element', 'layer', 'util'], function () {
         var element = layui.element;
         var layer = layui.layer;
@@ -105,7 +136,92 @@
             })
         }
 
+        // 初始化图表
+        var initCharts = function() {
+            // 课程完成率饼图
+            var courseChart = echarts.init(document.getElementById('courseCompletionChart'));
+            var courseOption = {
+                tooltip: { trigger: 'item' },
+                legend: { orient: 'vertical', left: 'left' },
+                series: [{
+                    name: '完成情况',
+                    type: 'pie',
+                    radius: '50%',
+                    data: [
+                        { value: 197, name: '已完成' },
+                        { value: 350, name: '未完成' }
+                    ],
+                    emphasis: {
+                        itemStyle: {
+                            shadowBlur: 10,
+                            shadowOffsetX: 0,
+                            shadowColor: 'rgba(0, 0, 0, 0.5)'
+                        }
+                    }
+                }]
+            };
+            courseChart.setOption(courseOption);
+
+            // 成绩分布柱状图
+            var gradeChart = echarts.init(document.getElementById('gradeDistributionChart'));
+            var gradeOption = {
+                tooltip: { trigger: 'axis' },
+                xAxis: {
+                    type: 'category',
+                    data: ['90-100分', '80-89分', '70-79分', '60-69分', '60分以下']
+                },
+                yAxis: { type: 'value' },
+                series: [{
+                    name: '人数',
+                    data: [45, 78, 65, 32, 18],
+                    type: 'bar',
+                    itemStyle: { color: '#5470c6' }
+                }]
+            };
+            gradeChart.setOption(gradeOption);
+
+            // 学习时长趋势曲线图
+            var timeChart = echarts.init(document.getElementById('studyTimeChart'));
+            var timeOption = {
+                tooltip: { trigger: 'axis' },
+                xAxis: {
+                    type: 'category',
+                    data: ['1月', '2月', '3月', '4月', '5月', '6月']
+                },
+                yAxis: { type: 'value', name: '小时' },
+                series: [{
+                    name: '平均学习时长',
+                    data: [120, 145, 180, 210, 195, 230],
+                    type: 'line',
+                    smooth: true,
+                    itemStyle: { color: '#91cc75' }
+                }]
+            };
+            timeChart.setOption(timeOption);
+
+            // 满意度饼图
+            var satisfactionChart = echarts.init(document.getElementById('satisfactionChart'));
+            var satisfactionOption = {
+                tooltip: { trigger: 'item' },
+                legend: { orient: 'vertical', left: 'left' },
+                series: [{
+                    name: '满意度',
+                    type: 'pie',
+                    radius: ['40%', '70%'],
+                    data: [
+                        { value: 85, name: '非常满意' },
+                        { value: 45, name: '满意' },
+                        { value: 12, name: '一般' },
+                        { value: 3, name: '不满意' }
+                    ]
+                }]
+            };
+            satisfactionChart.setOption(satisfactionOption);
+        };
+
         init();
+        initCharts();
+
         var homepage = document.getElementById('homepage');
         $(document).on('click', '.menu-item', function() {
             var url = this.dataset.url;
@@ -115,135 +231,6 @@
             homepage.style.display = 'none';
         });
     });
-     //折线图
-        var lineChart = echarts.init(document.getElementById('lineChart'));
-        var optionLine = {
-            animation: false, 
-            title: {
-                //text: '销售时间统计',//
-               left: 'left', // Center align the title horizontally
-            },
-            xAxis: {
-                type: 'category',
-                boundaryGap: false,
-                data: ['2024-1', '2024-2', '2024-3', '2024-4', '2024-5', '2024-6', '2024-7']
-            },
-            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; // 定时器变量
-
-		// 自动触发选中状态并每隔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, 
-            title: {
-                //text: '订单占比系统',//
-                left: 'left'
-            },
-            tooltip: {
-                trigger: 'item'
-            },
-           	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'
-            },
-            xAxis: {
-                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);
-    
 
 </script>
 </body>