251 lines
11 KiB
HTML
251 lines
11 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<base href="/"/>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>在线研修与考核系统</title>
|
||
<link rel="stylesheet" href="assets/crpm/js/layui/css/layui.css" />
|
||
<link rel="stylesheet" href="assets/crpm/fonts/font-awesome/css/font-awesome.css" />
|
||
<link rel="stylesheet" href="assets/crpm/index/index1/index1.css" />
|
||
<link rel="stylesheet" href="assets/crpm/index/index.css" />
|
||
</head>
|
||
<body>
|
||
<div id="app">
|
||
<div class="layui-layout layui-layout-admin">
|
||
<div class="layui-header">
|
||
<div class="layui-logo layui-hide-xs layui-bg-black">
|
||
在线研修与考核系统
|
||
</div>
|
||
<ul class="layui-nav layui-layout-right">
|
||
<li class="layui-nav-item layui-hide layui-show-sm-inline-block">
|
||
<a href="javascript:void(0);">管理员</a>
|
||
<dl class="layui-nav-child">
|
||
<dd><a href="javascript:void(0);">退出</a></dd>
|
||
</dl>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="layui-side layui-bg-black">
|
||
<div class="layui-side-scroll">
|
||
<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
|
||
<ul class="layui-nav layui-nav-tree" lay-filter="test">
|
||
<li class="layui-nav-item layui-nav-itemed">
|
||
<a href="javascript:void(0);" class="menu-item" id="menu-8f9226ef-988f-4657-9fe8-e0dd01088878" data-mod-id="3b6323bd-404e-4cdf-968a-35f35f0a13d0" data-url="route/pages/a4b8e0/list.html"><i class="fa fa-list"></i> 课程管理</a>
|
||
</li>
|
||
<li class="layui-nav-item layui-nav-itemed">
|
||
<a href="javascript:void(0);" class="menu-item" id="menu-d1215541-128a-4817-9f8f-aad5a65b9068" data-mod-id="0beba9b2-7184-4ff4-9295-81abc07f5c1e" data-url="route/pages/03f33a/list.html"><i class="fa fa-list"></i> 作业提交</a>
|
||
</li>
|
||
<li class="layui-nav-item layui-nav-itemed">
|
||
<a href="javascript:void(0);" class="menu-item" id="menu-6eaa071c-6961-4306-92f7-5d483a99d794" data-mod-id="62b1e139-3465-4584-8192-4b0aa930b298" data-url="route/pages/0f1aa2/list.html"><i class="fa fa-list"></i> 资源库管理</a>
|
||
</li>
|
||
<li class="layui-nav-item layui-nav-itemed">
|
||
<a href="javascript:void(0);" class="menu-item" id="menu-279cef4f-49c4-4ca7-aa04-481f249db2c0" data-mod-id="61aa880c-f032-4bf2-834a-9c465216f1b8" data-url="route/pages/e9eeb8/list.html"><i class="fa fa-list"></i> 成绩追踪</a>
|
||
</li>
|
||
<li class="layui-nav-item layui-nav-itemed">
|
||
<a href="javascript:void(0);" class="menu-item" id="menu-c74b133e-db7b-44c7-affd-587f5fbc560e" data-mod-id="6f1c1d2f-28cf-4f3d-9cb1-bce3376c0346" data-url="route/pages/3e568b/list.html"><i class="fa fa-list"></i> 课程反馈收集</a>
|
||
</li>
|
||
<li class="layui-nav-item layui-nav-itemed">
|
||
<a href="javascript:void(0);" class="menu-item" id="menu-e1d4ca3d-45e0-4459-909f-54c26a674b0e" data-mod-id="4d9bd4c4-09b2-46ad-a824-fe984895ceaa" data-url="route/pages/0f6341/list.html"><i class="fa fa-list"></i> 学习资料下载</a>
|
||
</li>
|
||
<li class="layui-nav-item layui-nav-itemed">
|
||
<a href="javascript:void(0);" class="menu-item" id="menu-1f206891-3216-41de-a870-ac04d17e196d" data-mod-id="1c982f2d-488e-41b6-a131-12e3dbd8e770" data-url="route/pages/b0e3d4/list.html"><i class="fa fa-list"></i> 学习进度监控</a>
|
||
</li>
|
||
<li class="layui-nav-item layui-nav-itemed">
|
||
<a href="javascript:void(0);" class="menu-item" id="menu-fb54072d-c700-43dd-ac76-47c7c10ac3d0" data-mod-id="2e5dfdc3-0375-48ca-9384-b03ce4d33510" data-url="route/pages/ef4baa/list.html"><i class="fa fa-list"></i> 用户管理</a>
|
||
</li>
|
||
<li class="layui-nav-item layui-nav-itemed">
|
||
<a href="javascript:void(0);" class="menu-item" id="menu-1e2bf386-2ce7-48ca-b8a3-01841da06459" data-mod-id="149ab081-4132-4b2b-b172-f79674cb6f91" data-url="route/pages/79a967/list.html"><i class="fa fa-list"></i> 通知公告</a>
|
||
</li>
|
||
<li class="layui-nav-item layui-nav-itemed">
|
||
<a href="javascript:void(0);" class="menu-item" id="menu-542bc053-c2bc-4375-b4a1-14a5889bd633" data-mod-id="52a602d7-725a-4e1f-97c6-e4d44e2a6886" data-url="route/pages/e14c8e/list.html"><i class="fa fa-list"></i> 权限设置</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="layui-body">
|
||
<!-- 内容主体区域 -->
|
||
<div style="padding: 15px">
|
||
<blockquote class="layui-elem-quote layui-text">
|
||
欢迎使用在线研修与考核系统
|
||
</blockquote>
|
||
<div class='homepage' id="homepage">
|
||
<div class='homepage-top' >
|
||
<div class='pieChart' id="pieChart"></div>
|
||
<div class='lineChart' id="lineChart"></div>
|
||
</div>
|
||
<div class='homepage-bot' >
|
||
<div id="barChart" class='barChart'></div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-card layui-panel page-iframe-container">
|
||
<iframe class="page-iframe" id="pageIframe" src="" style="display: none;"></iframe>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-footer"></div>
|
||
</div>
|
||
</div>
|
||
<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 () {
|
||
var element = layui.element;
|
||
var layer = layui.layer;
|
||
var util = layui.util;
|
||
var $ = layui.$;
|
||
var $win = $(window);
|
||
window['layer'] = layer;
|
||
|
||
var init = function() {
|
||
var $pageIframe = $('#pageIframe');
|
||
$pageIframe.css({
|
||
height: `${$win.height() - 200}px`
|
||
})
|
||
}
|
||
|
||
init();
|
||
var homepage = document.getElementById('homepage');
|
||
$(document).on('click', '.menu-item', function() {
|
||
var url = this.dataset.url;
|
||
var pageIframe = $('#pageIframe');
|
||
pageIframe.attr('src', url);
|
||
pageIframe.show();
|
||
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>
|
||
</html>
|