修改
This commit is contained in:
lyp
commit
71ee67d75c
2
.gitignore
vendored
2
.gitignore
vendored
@ -39,4 +39,4 @@ mvnw*
|
|||||||
/src/main/resources/ftl/crpm/code/frontend-generate/
|
/src/main/resources/ftl/crpm/code/frontend-generate/
|
||||||
/src/main/resources/ftl/crpm/code/generate/
|
/src/main/resources/ftl/crpm/code/generate/
|
||||||
|
|
||||||
db/
|
/db/**
|
||||||
BIN
gcckglxt/db/aimzdb.mv.db
Normal file
BIN
gcckglxt/db/aimzdb.mv.db
Normal file
Binary file not shown.
BIN
gcsbyxjkglxt/db/aimzdb.mv.db
Normal file
BIN
gcsbyxjkglxt/db/aimzdb.mv.db
Normal file
Binary file not shown.
File diff suppressed because it is too large
Load Diff
BIN
gcscsbsjcjyjkxt/db/aimzdb.mv.db
Normal file
BIN
gcscsbsjcjyjkxt/db/aimzdb.mv.db
Normal file
Binary file not shown.
File diff suppressed because it is too large
Load Diff
@ -295,11 +295,9 @@
|
|||||||
.homepage{
|
.homepage{
|
||||||
background:#f5f4f9;
|
background:#f5f4f9;
|
||||||
height: calc(100vh - 100px);
|
height: calc(100vh - 100px);
|
||||||
padding-left:10px;
|
padding: 10px;
|
||||||
padding-right:10px;
|
|
||||||
padding-bottom:10px;
|
|
||||||
box-sizing:border-box;
|
box-sizing:border-box;
|
||||||
|
overflow: auto;
|
||||||
}
|
}
|
||||||
.homepage-top{
|
.homepage-top{
|
||||||
padding-top:10px;
|
padding-top:10px;
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -287,8 +287,8 @@
|
|||||||
padding-right:10px;
|
padding-right:10px;
|
||||||
padding-bottom:10px;
|
padding-bottom:10px;
|
||||||
box-sizing:border-box;
|
box-sizing:border-box;
|
||||||
border-radius:20px
|
border-radius:20px;
|
||||||
|
overflow: auto;
|
||||||
}
|
}
|
||||||
.homepage-top{
|
.homepage-top{
|
||||||
padding-top:10px;
|
padding-top:10px;
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
BIN
qysczyjhxt/db/aimzdb.mv.db
Normal file
BIN
qysczyjhxt/db/aimzdb.mv.db
Normal file
Binary file not shown.
File diff suppressed because it is too large
Load Diff
@ -73,218 +73,222 @@
|
|||||||
<a href="javascript:void(0);" class="menu-item" id="menu-6bb66c9f-c610-405b-8de7-77b4642e0521" data-mod-id="03a15d9e-9e4c-46c2-94bd-46a129d04c95" data-url="route/pages/169191/list.html"><i class="fa fa-rocket"></i> 代码部署</a>
|
<a href="javascript:void(0);" class="menu-item" id="menu-6bb66c9f-c610-405b-8de7-77b4642e0521" data-mod-id="03a15d9e-9e4c-46c2-94bd-46a129d04c95" data-url="route/pages/169191/list.html"><i class="fa fa-rocket"></i> 代码部署</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="right">
|
<div class="right">
|
||||||
<div class="top">
|
<div class="top">
|
||||||
<div class="headline">
|
<div class="headline">
|
||||||
欢迎使用软件代码AI智能生成系统
|
欢迎使用软件代码AI智能生成系统
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="bottom">
|
|
||||||
<div class="content">
|
|
||||||
<div class='homepage' id="homepage">
|
|
||||||
<div class='homepage-top' >
|
|
||||||
<div id="barChartOne" class='barChartOne' ></div>
|
|
||||||
<div class='pieChart' id="pieChart"></div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class='homepage-bot' >
|
</div>
|
||||||
<div id="barChartTwo" class='barChartTwo' ></div>
|
<div class="bottom">
|
||||||
<div id="barChartThree" class='barChartThree' ></div>
|
<div class="content">
|
||||||
|
<div class='homepage' id="homepage">
|
||||||
|
<div class="layui-row layui-col-space15">
|
||||||
|
<div class="layui-col-md6">
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
<iframe class="page-iframe" id="pageIframe" src="" style="display: none;"></iframe>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<iframe class="page-iframe" id="pageIframe" src="" style="display: none;"></iframe>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</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>
|
|
||||||
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() {
|
<script>
|
||||||
var $pageIframe = $('#pageIframe');
|
layui.use(['element', 'layer', 'util'], function () {
|
||||||
$pageIframe.css({
|
var element = layui.element;
|
||||||
height: `${$win.height() - 200}px`
|
var layer = layui.layer;
|
||||||
})
|
var util = layui.util;
|
||||||
}
|
var $ = layui.$;
|
||||||
|
var $win = $(window);
|
||||||
|
window['layer'] = layer;
|
||||||
|
|
||||||
init();
|
var init = function() {
|
||||||
var homepage = document.getElementById('homepage');
|
var $pageIframe = $('#pageIframe');
|
||||||
$(document).on('click', '.menu-item', function() {
|
$pageIframe.css({
|
||||||
var url = this.dataset.url;
|
height: `${$win.height() - 200}px`
|
||||||
var pageIframe = $('#pageIframe');
|
})
|
||||||
pageIframe.attr('src', url);
|
}
|
||||||
pageIframe.show();
|
|
||||||
homepage.style.display = 'none';
|
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';
|
||||||
|
});
|
||||||
});
|
});
|
||||||
});
|
// 代码生成项目状态分布饼图
|
||||||
//柱状图1
|
var codeGenChart = echarts.init(document.getElementById('codeGenChart'));
|
||||||
var barChartOne = echarts.init(document.getElementById('barChartOne'));
|
var codeGenOption = {
|
||||||
var optionBarOne = {
|
|
||||||
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] // 第二条柱状图的数据
|
|
||||||
}]
|
|
||||||
};
|
|
||||||
barChartOne.setOption(optionBarOne);
|
|
||||||
// 饼状图
|
|
||||||
var pieChart = echarts.init(document.getElementById('pieChart'));
|
|
||||||
var optionPie = {
|
|
||||||
animation: false,
|
|
||||||
title: {
|
title: {
|
||||||
//text: '业务核心数据',//
|
text: '代码生成项目状态分布',
|
||||||
left: 'left'
|
left: 'center'
|
||||||
},
|
},
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'item'
|
trigger: 'item',
|
||||||
|
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
orient: 'vertical',
|
||||||
|
left: 'left'
|
||||||
},
|
},
|
||||||
legend: {
|
|
||||||
orient: 'vertical',
|
|
||||||
left: 'right'
|
|
||||||
},
|
|
||||||
series: [{
|
series: [{
|
||||||
//name: '嘻嘻',//
|
name: '项目状态',
|
||||||
type: 'pie',
|
type: 'pie',
|
||||||
radius: ['50%', '70%'],
|
radius: '50%',
|
||||||
data: [
|
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: {
|
title: {
|
||||||
//text: '业务核心数据'//
|
text: '错误类型分布统计',
|
||||||
|
left: 'center'
|
||||||
},
|
},
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'axis',
|
trigger: 'axis',
|
||||||
axisPointer: {
|
axisPointer: {
|
||||||
type: 'shadow'
|
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);
|
|
||||||
//柱状图3
|
|
||||||
var barChartThree = echarts.init(document.getElementById('barChartThree'));
|
|
||||||
var optionBarThree = {
|
|
||||||
animation: false,
|
|
||||||
title: {
|
|
||||||
//text: '业务核心数据'//
|
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
data: ['运行时异常', '数据库异常', 'IO异常', '网络异常', '编译时异常'],
|
||||||
},
|
axisLabel: {
|
||||||
yAxis: {
|
rotate: 45
|
||||||
type: 'value'
|
}
|
||||||
},
|
},
|
||||||
series: [
|
yAxis: {
|
||||||
{
|
type: 'value'
|
||||||
data: [120, 200, 150, 80, 70, 110, 130],
|
},
|
||||||
type: 'bar'
|
series: [{
|
||||||
}
|
name: '错误数量',
|
||||||
]
|
type: 'bar',
|
||||||
|
data: [6, 1, 1, 1, 1],
|
||||||
|
itemStyle: {
|
||||||
|
color: '#ff6b6b'
|
||||||
|
}
|
||||||
|
}]
|
||||||
};
|
};
|
||||||
barChartThree.setOption(optionBarThree);
|
errorTypeChart.setOption(errorTypeOption);
|
||||||
</script>
|
|
||||||
|
// 测试用例执行趋势折线图
|
||||||
|
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',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['成功', '失败'],
|
||||||
|
top: 30
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: ['生产环境', '测试环境', '预生产环境']
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value'
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '成功',
|
||||||
|
type: 'bar',
|
||||||
|
data: [4, 2, 2],
|
||||||
|
itemStyle: {
|
||||||
|
color: '#4ecdc4'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '失败',
|
||||||
|
type: 'bar',
|
||||||
|
data: [0, 2, 0],
|
||||||
|
itemStyle: {
|
||||||
|
color: '#ff6b6b'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
deployChart.setOption(deployOption);
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,90 +1,118 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<base href="/"/>
|
<base href="/"/>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>设备二维码巡检系统</title>
|
<title>设备二维码巡检系统</title>
|
||||||
<link rel="stylesheet" href="assets/crpm/js/layui/css/layui.css" />
|
<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/fonts/font-awesome/css/font-awesome.css" />
|
||||||
<link rel="stylesheet" href="assets/crpm/index/index9/index9.css" />
|
<link rel="stylesheet" href="assets/crpm/index/index9/index9.css" />
|
||||||
<link rel="stylesheet" href="assets/crpm/index/index.css" />
|
<link rel="stylesheet" href="assets/crpm/index/index.css" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="system">
|
<div class="system">
|
||||||
<div class="top">
|
<div class="top">
|
||||||
<h3>设备二维码巡检系统</h3>
|
<h3>设备二维码巡检系统</h3>
|
||||||
<span>
|
<span>
|
||||||
<em><a href="javascript:void(0);">退出系统</a></em>
|
<em><a href="javascript:void(0);">退出系统</a></em>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="bottom">
|
<div class="bottom">
|
||||||
<div class="left">
|
<div class="left">
|
||||||
<div class="head">
|
<div class="head">
|
||||||
<img src="" alt="">
|
<img src="" alt="">
|
||||||
<h4>账号名称</h4>
|
<h4>账号名称</h4>
|
||||||
<em>管理人员</em>
|
<em>管理人员</em>
|
||||||
</div>
|
</div>
|
||||||
<ul class="layui-nav layui-nav-tree" lay-filter="test">
|
<ul class="layui-nav layui-nav-tree" lay-filter="test">
|
||||||
<li class="layui-nav-item layui-nav-itemed">
|
<li class="layui-nav-item layui-nav-itemed">
|
||||||
<a href="javascript:void(0);" class="menu-item" id="menu-6b3f61af-9077-4d32-ba17-06323c5b4d54" data-mod-id="d48fd3fe-9f7a-427c-a106-5bd8f9cd2bf5" data-url="route/pages/c49755/list.html"><i class="fa fa-list"></i> 二维码生成</a>
|
<a href="javascript:void(0);" class="menu-item" id="menu-6b3f61af-9077-4d32-ba17-06323c5b4d54" data-mod-id="d48fd3fe-9f7a-427c-a106-5bd8f9cd2bf5" data-url="route/pages/c49755/list.html"><i class="fa fa-list"></i> 二维码生成</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="layui-nav-item layui-nav-itemed">
|
<li class="layui-nav-item layui-nav-itemed">
|
||||||
<a href="javascript:void(0);" class="menu-item" id="menu-96019713-af90-47ff-ba6e-7ed5d4baf283" data-mod-id="1f6f942f-4c57-4825-9f71-6a085dc590cb" data-url="route/pages/d80717/list.html"><i class="fa fa-list"></i> 扫码识别</a>
|
<a href="javascript:void(0);" class="menu-item" id="menu-96019713-af90-47ff-ba6e-7ed5d4baf283" data-mod-id="1f6f942f-4c57-4825-9f71-6a085dc590cb" data-url="route/pages/d80717/list.html"><i class="fa fa-list"></i> 扫码识别</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="layui-nav-item layui-nav-itemed">
|
<li class="layui-nav-item layui-nav-itemed">
|
||||||
<a href="javascript:void(0);" class="menu-item" id="menu-115eb185-b9b2-410f-8f21-74b1ce9c9b50" data-mod-id="3c794b06-da8b-4d6d-8a5e-8433bbebf325" data-url="route/pages/cdfd45/list.html"><i class="fa fa-list"></i> 巡检记录</a>
|
<a href="javascript:void(0);" class="menu-item" id="menu-115eb185-b9b2-410f-8f21-74b1ce9c9b50" data-mod-id="3c794b06-da8b-4d6d-8a5e-8433bbebf325" data-url="route/pages/cdfd45/list.html"><i class="fa fa-list"></i> 巡检记录</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="layui-nav-item layui-nav-itemed">
|
<li class="layui-nav-item layui-nav-itemed">
|
||||||
<a href="javascript:void(0);" class="menu-item" id="menu-ca584a01-b210-45da-9960-c25d06f0f821" data-mod-id="8f5fce1b-0402-4726-85e1-50103ca923ad" data-url="route/pages/bb6cd1/list.html"><i class="fa fa-list"></i> 异常报警</a>
|
<a href="javascript:void(0);" class="menu-item" id="menu-ca584a01-b210-45da-9960-c25d06f0f821" data-mod-id="8f5fce1b-0402-4726-85e1-50103ca923ad" data-url="route/pages/bb6cd1/list.html"><i class="fa fa-list"></i> 异常报警</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="layui-nav-item layui-nav-itemed">
|
<li class="layui-nav-item layui-nav-itemed">
|
||||||
<a href="javascript:void(0);" class="menu-item" id="menu-1cc7e958-9def-4955-b868-2cef8fabe56c" data-mod-id="e688d5be-1580-4d76-8fbc-e947ea014957" data-url="route/pages/178cdf/list.html"><i class="fa fa-list"></i> 维修管理</a>
|
<a href="javascript:void(0);" class="menu-item" id="menu-1cc7e958-9def-4955-b868-2cef8fabe56c" data-mod-id="e688d5be-1580-4d76-8fbc-e947ea014957" data-url="route/pages/178cdf/list.html"><i class="fa fa-list"></i> 维修管理</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="layui-nav-item layui-nav-itemed">
|
<li class="layui-nav-item layui-nav-itemed">
|
||||||
<a href="javascript:void(0);" class="menu-item" id="menu-edffd15d-aec0-4a7d-ba66-2b7c06e0c899" data-mod-id="8afa47e6-331d-4d59-8bde-7cc52882b7da" data-url="route/pages/c85e75/list.html"><i class="fa fa-list"></i> 保养计划</a>
|
<a href="javascript:void(0);" class="menu-item" id="menu-edffd15d-aec0-4a7d-ba66-2b7c06e0c899" data-mod-id="8afa47e6-331d-4d59-8bde-7cc52882b7da" data-url="route/pages/c85e75/list.html"><i class="fa fa-list"></i> 保养计划</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="layui-nav-item layui-nav-itemed">
|
<li class="layui-nav-item layui-nav-itemed">
|
||||||
<a href="javascript:void(0);" class="menu-item" id="menu-33c922cd-ec5c-43ce-bcf3-7be9b34ee18d" data-mod-id="9169f599-6e3c-4d7c-8f92-c6e26b4456e3" data-url="route/pages/460879/list.html"><i class="fa fa-list"></i> 设备台账</a>
|
<a href="javascript:void(0);" class="menu-item" id="menu-33c922cd-ec5c-43ce-bcf3-7be9b34ee18d" data-mod-id="9169f599-6e3c-4d7c-8f92-c6e26b4456e3" data-url="route/pages/460879/list.html"><i class="fa fa-list"></i> 设备台账</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="layui-nav-item layui-nav-itemed">
|
<li class="layui-nav-item layui-nav-itemed">
|
||||||
<a href="javascript:void(0);" class="menu-item" id="menu-c1cff805-9630-431d-9a3e-b29cc48298af" data-mod-id="72db61a2-ee34-4923-8101-cc46faafe8b0" data-url="route/pages/3aa3bd/list.html"><i class="fa fa-list"></i> 备件库存</a>
|
<a href="javascript:void(0);" class="menu-item" id="menu-c1cff805-9630-431d-9a3e-b29cc48298af" data-mod-id="72db61a2-ee34-4923-8101-cc46faafe8b0" data-url="route/pages/3aa3bd/list.html"><i class="fa fa-list"></i> 备件库存</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="layui-nav-item layui-nav-itemed">
|
<li class="layui-nav-item layui-nav-itemed">
|
||||||
<a href="javascript:void(0);" class="menu-item" id="menu-b7ac72a8-01ae-4c26-81da-157926b93f04" data-mod-id="65dafa15-90e4-43b9-86bd-d2a9415910b7" data-url="route/pages/b98900/list.html"><i class="fa fa-list"></i> 权限管理</a>
|
<a href="javascript:void(0);" class="menu-item" id="menu-b7ac72a8-01ae-4c26-81da-157926b93f04" data-mod-id="65dafa15-90e4-43b9-86bd-d2a9415910b7" data-url="route/pages/b98900/list.html"><i class="fa fa-list"></i> 权限管理</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="layui-nav-item layui-nav-itemed">
|
<li class="layui-nav-item layui-nav-itemed">
|
||||||
<a href="javascript:void(0);" class="menu-item" id="menu-6f3c0a83-1ad3-49de-8721-6ca05cff772d" data-mod-id="8896feba-1561-4aad-86e2-e8273224aed7" data-url="route/pages/ade5a9/list.html"><i class="fa fa-list"></i> 操作日志</a>
|
<a href="javascript:void(0);" class="menu-item" id="menu-6f3c0a83-1ad3-49de-8721-6ca05cff772d" data-mod-id="8896feba-1561-4aad-86e2-e8273224aed7" data-url="route/pages/ade5a9/list.html"><i class="fa fa-list"></i> 操作日志</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="layui-nav-item layui-nav-itemed">
|
<li class="layui-nav-item layui-nav-itemed">
|
||||||
<a href="javascript:void(0);" class="menu-item" id="menu-1d7b26a6-15c8-4dab-8ba2-6bfe246df869" data-mod-id="62b312d5-644a-44a6-a5d8-8243473eac60" data-url="route/pages/17fbb1/list.html"><i class="fa fa-list"></i> 二维码更新</a>
|
<a href="javascript:void(0);" class="menu-item" id="menu-1d7b26a6-15c8-4dab-8ba2-6bfe246df869" data-mod-id="62b312d5-644a-44a6-a5d8-8243473eac60" data-url="route/pages/17fbb1/list.html"><i class="fa fa-list"></i> 二维码更新</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="right">
|
<div class="right">
|
||||||
<div class="top">
|
<div class="top">
|
||||||
<div class="headline">
|
<div class="headline">
|
||||||
欢迎使用设备二维码巡检系统
|
欢迎使用设备二维码巡检系统
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div class="homepage" id="homepage">
|
<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>
|
<div class="layui-card">
|
||||||
<div class="homepage-bottom">
|
<div class="layui-card-header">设备故障类型统计</div>
|
||||||
<div class="lineChart2" id="lineChart2"></div>
|
<div class="layui-card-body">
|
||||||
<div class="pieChart" id="pieChart"></div>
|
<div id="repairCostChart" style="height: 300px;"></div>
|
||||||
<div class="barChart" id="barChart"></div>
|
</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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<iframe class="page-iframe" id="pageIframe" src="" style="display: none;"></iframe>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<iframe class="page-iframe" id="pageIframe" src="" style="display: none;"></iframe>
|
|
||||||
</div>
|
</div>
|
||||||
</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 src="assets/crpm/js/layui/layui.js"></script>
|
||||||
<script>
|
<script>
|
||||||
layui.use(['element', 'layer', 'util'], function () {
|
layui.use(['element', 'layer', 'util'], function () {
|
||||||
@ -112,161 +140,148 @@
|
|||||||
pageIframe.attr('src', url);
|
pageIframe.attr('src', url);
|
||||||
pageIframe.show();
|
pageIframe.show();
|
||||||
homepage.style.display = 'none';
|
homepage.style.display = 'none';
|
||||||
content.style.backgroundColor = '#FFF'
|
content.style.backgroundColor = '#FFF'
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
//折线图
|
// 设备故障类型统计 - 柱状图
|
||||||
var lineChart = echarts.init(document.getElementById('lineChart1'));
|
var repairCostChart = echarts.init(document.getElementById('repairCostChart'));
|
||||||
var optionLine = {
|
var repairCostOption = {
|
||||||
animation: false,
|
animation: false,
|
||||||
title: {
|
tooltip: {
|
||||||
//text: '销售时间统计',//
|
trigger: 'axis',
|
||||||
left: 'left', // Center align the title horizontally
|
formatter: '{b}: {c}次'
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
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'
|
},
|
||||||
},
|
yAxis: {
|
||||||
tooltip: {
|
type: 'value',
|
||||||
trigger: 'axis' // 设置触发类型为坐标轴触发
|
name: '故障次数'
|
||||||
},
|
},
|
||||||
series: [{
|
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);
|
}]
|
||||||
|
};
|
||||||
var currentIndex = -1;
|
repairCostChart.setOption(repairCostOption);
|
||||||
var interval = 1000; // 切换间隔时间，单位是毫秒
|
|
||||||
var timer; // 定时器变量
|
|
||||||
|
|
||||||
// 自动触发选中状态并每隔1秒自动向下一个触发
|
// 设备类型分布 - 饼图
|
||||||
function startAutoPlay() {
|
var equipmentTypeChart = echarts.init(document.getElementById('equipmentTypeChart'));
|
||||||
timer = setInterval(function() {
|
var equipmentTypeOption = {
|
||||||
var dataLen = optionLine.series[0].data.length;
|
animation: false,
|
||||||
// 取消之前高亮的图形
|
tooltip: {
|
||||||
lineChart.dispatchAction({
|
trigger: 'item',
|
||||||
type: 'downplay',
|
formatter: '{a} <br/>{b}: {c}台 ({d}%)'
|
||||||
seriesIndex: 0,
|
},
|
||||||
dataIndex: currentIndex
|
legend: {
|
||||||
});
|
orient: 'vertical',
|
||||||
currentIndex = (currentIndex + 1) % dataLen;
|
left: 'left'
|
||||||
// 高亮当前图形
|
},
|
||||||
lineChart.dispatchAction({
|
series: [{
|
||||||
type: 'highlight',
|
name: '设备类型',
|
||||||
seriesIndex: 0,
|
type: 'pie',
|
||||||
dataIndex: currentIndex
|
radius: '60%',
|
||||||
});
|
data: [
|
||||||
// 显示 tooltip
|
{value: 4, name: '注塑机'},
|
||||||
lineChart.dispatchAction({
|
{value: 4, name: '冷却塔'},
|
||||||
type: 'showTip',
|
{value: 4, name: '压缩机'},
|
||||||
seriesIndex: 0,
|
{value: 4, name: '烘干机'},
|
||||||
dataIndex: currentIndex
|
{value: 4, name: '传送带'},
|
||||||
});
|
{value: 4, name: '搅拌机'},
|
||||||
}, interval);
|
{value: 4, name: '真空泵'},
|
||||||
}
|
{value: 4, name: '切割机'},
|
||||||
|
{value: 4, name: '风机'},
|
||||||
// 开始自动播放
|
{value: 4, name: '包装机'}
|
||||||
startAutoPlay();
|
],
|
||||||
|
emphasis: {
|
||||||
// 鼠标悬停在图表上时暂停自动播放
|
itemStyle: {
|
||||||
lineChart.on('mouseover', function() {
|
shadowBlur: 10,
|
||||||
clearInterval(timer);
|
shadowOffsetX: 0,
|
||||||
});
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||||
|
|
||||||
// 鼠标离开图表区域时恢复自动播放
|
|
||||||
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);
|
};
|
||||||
|
equipmentTypeChart.setOption(equipmentTypeOption);
|
||||||
|
|
||||||
|
|
||||||
// 饼状图
|
// 巡检合格率统计 - 柱状图
|
||||||
var pieChart = echarts.init(document.getElementById('pieChart'));
|
var inspectionRateChart = echarts.init(document.getElementById('inspectionRateChart'));
|
||||||
var optionPie = {
|
var inspectionRateOption = {
|
||||||
animation: false,
|
animation: false,
|
||||||
title: {
|
tooltip: {
|
||||||
//text: '订单占比系统',//
|
trigger: 'axis',
|
||||||
left: 'left'
|
formatter: '{b}: {c}%'
|
||||||
},
|
},
|
||||||
tooltip: {
|
xAxis: {
|
||||||
trigger: 'item'
|
type: 'category',
|
||||||
},
|
data: ['8月1日', '8月2日', '8月3日']
|
||||||
legend: {
|
},
|
||||||
orient: 'vertical',
|
yAxis: {
|
||||||
left: 'right'
|
type: 'value',
|
||||||
},
|
name: '合格率(%)',
|
||||||
series: [{
|
max: 100
|
||||||
//name: '嘻嘻',//
|
},
|
||||||
type: 'pie',
|
series: [{
|
||||||
radius: ['60%', '70%'],
|
name: '合格率',
|
||||||
data: [
|
type: 'bar',
|
||||||
{value: 150, name: 'data1'},
|
data: [100, 70, 70],
|
||||||
{value: 274, name: 'data2'},
|
itemStyle: {
|
||||||
{value: 310, name: 'data3'},
|
color: function(params) {
|
||||||
{value: 335, name: 'data4'},
|
return params.value >= 90 ? '#52c41a' : params.value >= 70 ? '#faad14' : '#ff4d4f';
|
||||||
{value: 400, name: 'data5'}
|
}
|
||||||
]
|
}
|
||||||
}]
|
}]
|
||||||
};
|
};
|
||||||
pieChart.setOption(optionPie);
|
inspectionRateChart.setOption(inspectionRateOption);
|
||||||
|
|
||||||
//柱状图
|
// 异常报警级别分布 - 环形饼图
|
||||||
var barChart = echarts.init(document.getElementById('barChart'));
|
var alarmLevelChart = echarts.init(document.getElementById('alarmLevelChart'));
|
||||||
var optionBar = {
|
var alarmLevelOption = {
|
||||||
animation: false,
|
animation: false,
|
||||||
title: {
|
tooltip: {
|
||||||
//xt: '收支情况'//
|
trigger: 'item',
|
||||||
},
|
formatter: '{a} <br/>{b}: {c}次 ({d}%)'
|
||||||
tooltip: {},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
data: ['data1', 'data2'] ,
|
orient: 'vertical',
|
||||||
left: 'right'
|
left: 'left'
|
||||||
},
|
},
|
||||||
xAxis: {
|
series: [{
|
||||||
data: ['一月', '二月', '三月', '四月', '五月','六月','七月','八月','九月','十月','十一月','十二月',]
|
name: '报警级别',
|
||||||
},
|
type: 'pie',
|
||||||
yAxis: {},
|
radius: ['40%', '70%'],
|
||||||
series: [{
|
data: [
|
||||||
name: 'data1',
|
{value: 8, name: '警告', itemStyle: {color: '#faad14'}},
|
||||||
type: 'bar',
|
{value: 8, name: '一般', itemStyle: {color: '#1890ff'}},
|
||||||
data: [5, 20, 36, 10, 10,15,16,20,12,13,35,12] // 第一条柱状图的数据
|
{value: 6, name: '严重', itemStyle: {color: '#ff4d4f'}}
|
||||||
}, {
|
],
|
||||||
name: 'data2',
|
emphasis: {
|
||||||
type: 'bar',
|
itemStyle: {
|
||||||
data: [15, 10, 25, 8, 15,8,30,12,11,18,25,12] // 第二条柱状图的数据
|
shadowBlur: 10,
|
||||||
}]
|
shadowOffsetX: 0,
|
||||||
};
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||||
barChart.setOption(optionBar);
|
}
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
};
|
||||||
|
alarmLevelChart.setOption(alarmLevelOption);
|
||||||
|
|
||||||
|
// 响应式处理
|
||||||
|
window.addEventListener('resize', function() {
|
||||||
|
repairCostChart.resize();
|
||||||
|
equipmentTypeChart.resize();
|
||||||
|
inspectionRateChart.resize();
|
||||||
|
alarmLevelChart.resize();
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,14 +1,14 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<base href="/"/>
|
<base href="/"/>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>协同办公系统</title>
|
<title>协同办公系统</title>
|
||||||
<link rel="stylesheet" href="assets/crpm/js/layui/css/layui.css" />
|
<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/fonts/font-awesome/css/font-awesome.css" />
|
||||||
<link rel="stylesheet" href="assets/crpm/index/index1/index1.css" />
|
<link rel="stylesheet" href="assets/crpm/index/index1/index1.css" />
|
||||||
<link rel="stylesheet" href="assets/crpm/index/index.css" />
|
<link rel="stylesheet" href="assets/crpm/index/index.css" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app">
|
<div id="app">
|
||||||
@ -25,9 +25,9 @@
|
|||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li class="layui-nav-item topTitlec">
|
<li class="layui-nav-item topTitlec">
|
||||||
<div>
|
<div>
|
||||||
<div class="topTitle "><i class="layui-icon layui-icon-user topicon"></i>角色管理</div>
|
<div class="topTitle "><i class="layui-icon layui-icon-user topicon"></i>角色管理</div>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li class="layui-nav-item layui-hide layui-show-sm-inline-block">
|
<li class="layui-nav-item layui-hide layui-show-sm-inline-block">
|
||||||
<a href="javascript:void(0);">管理员</a>
|
<a href="javascript:void(0);">管理员</a>
|
||||||
@ -83,21 +83,42 @@
|
|||||||
<blockquote class="layui-elem-quote layui-text">
|
<blockquote class="layui-elem-quote layui-text">
|
||||||
欢迎使用协同办公系统
|
欢迎使用协同办公系统
|
||||||
</blockquote>
|
</blockquote>
|
||||||
<div class='homepage' id="homepage">
|
<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>
|
||||||
<div class='homepage-bot' >
|
<div class="layui-row layui-col-space15" style="margin-top: 15px;">
|
||||||
<div id="barChart" class='barChart'></div>
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="layui-card layui-panel page-iframe-container">
|
<div class="layui-card layui-panel page-iframe-container">
|
||||||
<iframe class="page-iframe" id="pageIframe" src="" style="display: none;"></iframe>
|
<iframe class="page-iframe" id="pageIframe" src="" style="display: none;"></iframe>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="layui-footer"></div>-->
|
<!-- <div class="layui-footer"></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>
|
||||||
@ -120,145 +141,114 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
init();
|
init();
|
||||||
var homepage = document.getElementById('homepage');
|
var homepage = document.getElementById('homepage');
|
||||||
$(document).on('click', '.menu-item', function() {
|
$(document).on('click', '.menu-item', function() {
|
||||||
var url = this.dataset.url;
|
var url = this.dataset.url;
|
||||||
var pageIframe = $('#pageIframe');
|
var pageIframe = $('#pageIframe');
|
||||||
pageIframe.attr('src', url);
|
pageIframe.attr('src', url);
|
||||||
pageIframe.show();
|
pageIframe.show();
|
||||||
homepage.style.display = 'none';
|
homepage.style.display = 'none';
|
||||||
});
|
});
|
||||||
});
|
|
||||||
//折线图
|
// 任务状态分布饼图
|
||||||
var lineChart = echarts.init(document.getElementById('lineChart'));
|
var taskStatusChart = echarts.init(document.getElementById('taskStatusChart'));
|
||||||
var optionLine = {
|
var taskStatusOption = {
|
||||||
animation: false,
|
tooltip: {
|
||||||
title: {
|
trigger: 'item',
|
||||||
//text: '销售时间统计',//
|
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
||||||
left: 'left', // Center align the title horizontally
|
},
|
||||||
|
legend: {
|
||||||
|
orient: 'vertical',
|
||||||
|
left: 'right'
|
||||||
|
},
|
||||||
|
series: [{
|
||||||
|
name: '任务状态',
|
||||||
|
type: 'pie',
|
||||||
|
radius: ['40%', '70%'],
|
||||||
|
data: [
|
||||||
|
{value: 5, name: '已完成'},
|
||||||
|
{value: 3, name: '进行中'},
|
||||||
|
{value: 2, name: '未开始'}
|
||||||
|
],
|
||||||
|
itemStyle: {
|
||||||
|
emphasis: {
|
||||||
|
shadowBlur: 10,
|
||||||
|
shadowOffsetX: 0,
|
||||||
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
};
|
||||||
|
taskStatusChart.setOption(taskStatusOption);
|
||||||
|
|
||||||
|
// 月度活动趋势折线图
|
||||||
|
var monthlyTrendChart = echarts.init(document.getElementById('monthlyTrendChart'));
|
||||||
|
var monthlyTrendOption = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['任务数量', '日程安排']
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
boundaryGap: false,
|
boundaryGap: false,
|
||||||
data: ['2024-1', '2024-2', '2024-3', '2024-4', '2024-5', '2024-6', '2024-7']
|
data: ['1月', '2月']
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
type: 'value'
|
type: 'value'
|
||||||
},
|
},
|
||||||
tooltip: {
|
|
||||||
trigger: 'axis' // 设置触发类型为坐标轴触发
|
|
||||||
},
|
|
||||||
series: [{
|
series: [{
|
||||||
data: [820, 733, 901, 600, 1290, 500, 1320],
|
name: '任务数量',
|
||||||
type: 'line',
|
type: 'line',
|
||||||
smooth: true,
|
data: [5, 5],
|
||||||
areaStyle: {}
|
smooth: true,
|
||||||
|
areaStyle: {}
|
||||||
|
}, {
|
||||||
|
name: '日程安排',
|
||||||
|
type: 'line',
|
||||||
|
data: [5, 5],
|
||||||
|
smooth: true,
|
||||||
|
areaStyle: {}
|
||||||
}]
|
}]
|
||||||
};
|
};
|
||||||
lineChart.setOption(optionLine);
|
monthlyTrendChart.setOption(monthlyTrendOption);
|
||||||
|
|
||||||
var currentIndex = -1;
|
|
||||||
var interval = 1000; // 切换间隔时间，单位是毫秒
|
|
||||||
var timer; // 定时器变量
|
|
||||||
|
|
||||||
// 自动触发选中状态并每隔1秒自动向下一个触发
|
// 部门人员分布柱状图
|
||||||
function startAutoPlay() {
|
var departmentChart = echarts.init(document.getElementById('departmentChart'));
|
||||||
timer = setInterval(function() {
|
var departmentOption = {
|
||||||
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: {
|
tooltip: {
|
||||||
trigger: 'item'
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow'
|
||||||
|
}
|
||||||
},
|
},
|
||||||
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: {
|
legend: {
|
||||||
//data: ['收入', '支出'] ,//
|
data: ['人员数量']
|
||||||
data: ['data1', 'data2'] ,
|
|
||||||
left: 'right'
|
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
data: ['一月', '二月', '三月', '四月', '五月','六月','七月','八月','九月','十月','十一月','十二月',]
|
type: 'category',
|
||||||
|
data: ['生产部', '质检部', '采购部', '物流部', '技术部', '人事部', '财务部', '安环部', 'IT部']
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value'
|
||||||
},
|
},
|
||||||
yAxis: {},
|
|
||||||
series: [{
|
series: [{
|
||||||
name: 'data1',
|
name: '人员数量',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
data: [5, 20, 36, 10, 10,15,16,20,12,13,35,12] // 第一条柱状图的数据
|
data: [2, 1, 1, 1, 1, 1, 1, 1, 1],
|
||||||
}, {
|
itemStyle: {
|
||||||
name: 'data2',
|
color: function(params) {
|
||||||
type: 'bar',
|
var colorList = ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074'];
|
||||||
data: [15, 10, 25, 8, 15,8,30,12,11,18,25,12] // 第二条柱状图的数据
|
return colorList[params.dataIndex];
|
||||||
|
}
|
||||||
|
}
|
||||||
}]
|
}]
|
||||||
};
|
};
|
||||||
barChart.setOption(optionBar);
|
departmentChart.setOption(departmentOption);
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,33 +1,33 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<base href="/"/>
|
<base href="/"/>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>专家库管理系统</title>
|
<title>专家库管理系统</title>
|
||||||
<link rel="stylesheet" href="assets/crpm/js/layui/css/layui.css" />
|
<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/fonts/font-awesome/css/font-awesome.css" />
|
||||||
<link rel="stylesheet" href="assets/crpm/index/index7/index7.css" />
|
<link rel="stylesheet" href="assets/crpm/index/index7/index7.css" />
|
||||||
<link rel="stylesheet" href="assets/crpm/index/index.css" />
|
<link rel="stylesheet" href="assets/crpm/index/index.css" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="system">
|
<div class="system">
|
||||||
<div class="left">
|
<div class="left">
|
||||||
<div class="head">
|
<div class="head">
|
||||||
<div class='photo'>头像</div>
|
<div class='photo'>头像</div>
|
||||||
<h5>账号名称</h5>
|
<h5>账号名称</h5>
|
||||||
<ul class="layui-nav layui-layout-right">
|
<ul class="layui-nav layui-layout-right">
|
||||||
<li class="layui-nav-item ">
|
<li class="layui-nav-item ">
|
||||||
<div >
|
<div >
|
||||||
<div class="topTitle"></i>资源配置</div>
|
<div class="topTitle"></i>资源配置</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li class="layui-nav-item topTitlec">
|
<li class="layui-nav-item topTitlec">
|
||||||
<div>
|
<div>
|
||||||
<div class="topTitle ">角色管理</div>
|
<div class="topTitle ">角色管理</div>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li class="layui-nav-item layui-hide layui-show-sm-inline-block">
|
<li class="layui-nav-item layui-hide layui-show-sm-inline-block">
|
||||||
<a href="javascript:void(0);">管理员</a>
|
<a href="javascript:void(0);">管理员</a>
|
||||||
<dl class="layui-nav-child">
|
<dl class="layui-nav-child">
|
||||||
@ -35,82 +35,119 @@
|
|||||||
</dl>
|
</dl>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<ul class="layui-nav layui-nav-tree" lay-filter="test">
|
<ul class="layui-nav layui-nav-tree" lay-filter="test">
|
||||||
<li class="layui-nav-item layui-nav-itemed">
|
<li class="layui-nav-item layui-nav-itemed">
|
||||||
<a href="javascript:void(0);" class="menu-item" id="menu-44022fe2-9bd9-45e6-94b8-b0dd2c29c1c6" data-mod-id="61170ab0-bb9b-40df-b6a4-56b35c4c91fa" data-url="route/pages/f56928/list.html"><i class="fa fa-user-md"></i> 专家信息管理</a>
|
<a href="javascript:void(0);" class="menu-item" id="menu-44022fe2-9bd9-45e6-94b8-b0dd2c29c1c6" data-mod-id="61170ab0-bb9b-40df-b6a4-56b35c4c91fa" data-url="route/pages/f56928/list.html"><i class="fa fa-user-md"></i> 专家信息管理</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="layui-nav-item layui-nav-itemed">
|
<li class="layui-nav-item layui-nav-itemed">
|
||||||
<a href="javascript:void(0);" class="menu-item" id="menu-b0e6572d-1490-4ecc-8141-b344cafb391d" data-mod-id="d26b32ef-0fd0-4752-9704-9d3e5e4b0090" data-url="route/pages/adbccf/list.html"><i class="fa fa-sitemap"></i> 专家分类</a>
|
<a href="javascript:void(0);" class="menu-item" id="menu-b0e6572d-1490-4ecc-8141-b344cafb391d" data-mod-id="d26b32ef-0fd0-4752-9704-9d3e5e4b0090" data-url="route/pages/adbccf/list.html"><i class="fa fa-sitemap"></i> 专家分类</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="layui-nav-item layui-nav-itemed">
|
<li class="layui-nav-item layui-nav-itemed">
|
||||||
<a href="javascript:void(0);" class="menu-item" id="menu-2ebed04d-756f-43e0-966c-12704ab2dcb2" data-mod-id="629c2e68-49f9-4506-968b-b93ba3d5e768" data-url="route/pages/a11c9c/list.html"><i class="fa fa-pencil-square-o"></i> 专家录入</a>
|
<a href="javascript:void(0);" class="menu-item" id="menu-2ebed04d-756f-43e0-966c-12704ab2dcb2" data-mod-id="629c2e68-49f9-4506-968b-b93ba3d5e768" data-url="route/pages/a11c9c/list.html"><i class="fa fa-pencil-square-o"></i> 专家录入</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="layui-nav-item layui-nav-itemed">
|
<li class="layui-nav-item layui-nav-itemed">
|
||||||
<a href="javascript:void(0);" class="menu-item" id="menu-a48e4c33-8ab8-4b31-bfb7-98bfb06e0105" data-mod-id="0148cc94-3c06-45c9-b0bc-bfa74fc78b7f" data-url="route/pages/eec4e2/list.html"><i class="fa fa-search"></i> 专家查询</a>
|
<a href="javascript:void(0);" class="menu-item" id="menu-a48e4c33-8ab8-4b31-bfb7-98bfb06e0105" data-mod-id="0148cc94-3c06-45c9-b0bc-bfa74fc78b7f" data-url="route/pages/eec4e2/list.html"><i class="fa fa-search"></i> 专家查询</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="layui-nav-item layui-nav-itemed">
|
<li class="layui-nav-item layui-nav-itemed">
|
||||||
<a href="javascript:void(0);" class="menu-item" id="menu-df57af51-a0c7-4389-b5f8-ca59a0b757ca" data-mod-id="b1e54c91-5f7e-4cb7-bc45-49171c01d0e6" data-url="route/pages/f69afb/list.html"><i class="fa fa-edit"></i> 专家编辑</a>
|
<a href="javascript:void(0);" class="menu-item" id="menu-df57af51-a0c7-4389-b5f8-ca59a0b757ca" data-mod-id="b1e54c91-5f7e-4cb7-bc45-49171c01d0e6" data-url="route/pages/f69afb/list.html"><i class="fa fa-edit"></i> 专家编辑</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="layui-nav-item layui-nav-itemed">
|
<li class="layui-nav-item layui-nav-itemed">
|
||||||
<a href="javascript:void(0);" class="menu-item" id="menu-015e923b-2255-46e7-9dd2-c81927e955b8" data-mod-id="e310c6c9-9956-4b76-931e-acf710e1dde9" data-url="route/pages/785671/list.html"><i class="fa fa-bar-chart"></i> 数据统计</a>
|
<a href="javascript:void(0);" class="menu-item" id="menu-015e923b-2255-46e7-9dd2-c81927e955b8" data-mod-id="e310c6c9-9956-4b76-931e-acf710e1dde9" data-url="route/pages/785671/list.html"><i class="fa fa-bar-chart"></i> 数据统计</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="layui-nav-item layui-nav-itemed">
|
<li class="layui-nav-item layui-nav-itemed">
|
||||||
<a href="javascript:void(0);" class="menu-item" id="menu-4af88b9e-bb61-40a3-9a0b-94ec18666bad" data-mod-id="25d75895-1877-4a20-b785-68e6af45ed9c" data-url="route/pages/90b4d4/list.html"><i class="fa fa-users"></i> 用户管理</a>
|
<a href="javascript:void(0);" class="menu-item" id="menu-4af88b9e-bb61-40a3-9a0b-94ec18666bad" data-mod-id="25d75895-1877-4a20-b785-68e6af45ed9c" data-url="route/pages/90b4d4/list.html"><i class="fa fa-users"></i> 用户管理</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="layui-nav-item layui-nav-itemed">
|
<li class="layui-nav-item layui-nav-itemed">
|
||||||
<a href="javascript:void(0);" class="menu-item" id="menu-7e02d418-ec12-4d61-a52b-6843573a6f67" data-mod-id="fb65f91d-e66c-4bbc-a421-f3b1e3dea4b5" data-url="route/pages/eac73e/list.html"><i class="fa fa-lock"></i> 角色权限</a>
|
<a href="javascript:void(0);" class="menu-item" id="menu-7e02d418-ec12-4d61-a52b-6843573a6f67" data-mod-id="fb65f91d-e66c-4bbc-a421-f3b1e3dea4b5" data-url="route/pages/eac73e/list.html"><i class="fa fa-lock"></i> 角色权限</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="layui-nav-item layui-nav-itemed">
|
<li class="layui-nav-item layui-nav-itemed">
|
||||||
<a href="javascript:void(0);" class="menu-item" id="menu-1dc8e61f-4ad0-4a06-84c6-17e5e2c713e2" data-mod-id="395b8568-d943-476a-ae43-72617ca97100" data-url="route/pages/1c4881/list.html"><i class="fa fa-file-text-o"></i> 系统日志</a>
|
<a href="javascript:void(0);" class="menu-item" id="menu-1dc8e61f-4ad0-4a06-84c6-17e5e2c713e2" data-mod-id="395b8568-d943-476a-ae43-72617ca97100" data-url="route/pages/1c4881/list.html"><i class="fa fa-file-text-o"></i> 系统日志</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="layui-nav-item layui-nav-itemed">
|
<li class="layui-nav-item layui-nav-itemed">
|
||||||
<a href="javascript:void(0);" class="menu-item" id="menu-3f3ab373-629d-4d6a-925e-2e5fe7371433" data-mod-id="37c97c78-4246-4121-937e-8800ec38d0f6" data-url="route/pages/9fbf43/list.html"><i class="fa fa-bullhorn"></i> 通知公告</a>
|
<a href="javascript:void(0);" class="menu-item" id="menu-3f3ab373-629d-4d6a-925e-2e5fe7371433" data-mod-id="37c97c78-4246-4121-937e-8800ec38d0f6" data-url="route/pages/9fbf43/list.html"><i class="fa fa-bullhorn"></i> 通知公告</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="right">
|
<div class="right">
|
||||||
<div class="top">
|
<div class="top">
|
||||||
<div class="row1">
|
<div class="row1">
|
||||||
<h4>专家库管理系统</h4>
|
<h4>专家库管理系统</h4>
|
||||||
</div>
|
</div>
|
||||||
<div class="row2">
|
<div class="row2">
|
||||||
<div class="headline">
|
<div class="headline">
|
||||||
|
|
||||||
<h5>欢迎使用专家库管理系统</h5>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="bottom">
|
|
||||||
<div class="content">
|
|
||||||
<div class='homepage' id="homepage">
|
|
||||||
<div class='homepage-top' >
|
|
||||||
<div class='pieChartOne' id="pieChartOne"></div>
|
|
||||||
<div class='pieChartTwo' id="pieChartTwo"></div>
|
|
||||||
<div class='pieChartThree' id="pieChartThree"></div>
|
|
||||||
<div class='pieChartFour' id="pieChartFour"></div>
|
|
||||||
</div>
|
|
||||||
<div class='homepage-center' >
|
|
||||||
<div class='lineChart' id="lineChart"></div>
|
|
||||||
<div id="pieChart" class='pieChart' ></div>
|
|
||||||
|
|
||||||
|
<h5>欢迎使用专家库管理系统</h5>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottom">
|
||||||
|
<div class="content">
|
||||||
|
<div class='homepage' id="homepage">
|
||||||
|
<div class="layui-row layui-col-space15">
|
||||||
|
<div class="layui-col-md3">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">专家性别分布</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>
|
||||||
<div class='homepage-bot' >
|
<div class="layui-row layui-col-space15" style="margin-top: 15px;">
|
||||||
<div class='barChartOne' id="barChartOne"></div>
|
<div class="layui-col-md6">
|
||||||
<div class='barChartTwo' id="barChartTwo"></div>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="layui-card layui-panel page-iframe-container">
|
<div class="layui-card layui-panel page-iframe-container">
|
||||||
<iframe class="page-iframe" id="pageIframe" src="" style="display: none;"></iframe>
|
<iframe class="page-iframe" id="pageIframe" src="" style="display: none;"></iframe>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</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 () {
|
layui.use(['element', 'layer', 'util'], function () {
|
||||||
var element = layui.element;
|
var element = layui.element;
|
||||||
@ -128,307 +165,132 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
init();
|
init();
|
||||||
var homepage = document.getElementById('homepage');
|
var homepage = document.getElementById('homepage');
|
||||||
|
|
||||||
$(document).on('click', '.menu-item', function() {
|
$(document).on('click', '.menu-item', function() {
|
||||||
var url = this.dataset.url;
|
var url = this.dataset.url;
|
||||||
var pageIframe = $('#pageIframe');
|
var pageIframe = $('#pageIframe');
|
||||||
pageIframe.attr('src', url);
|
pageIframe.attr('src', url);
|
||||||
pageIframe.show();
|
pageIframe.show();
|
||||||
homepage.style.display = 'none';
|
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: {
|
series: [{
|
||||||
trigger: 'item'
|
type: 'pie',
|
||||||
},
|
radius: '60%',
|
||||||
|
data: [
|
||||||
series: [{
|
{ value: 17, name: '男' },
|
||||||
//name: '嘻嘻',//
|
{ value: 14, name: '女' }
|
||||||
type: 'pie',
|
]
|
||||||
radius: ['0%', '70%'],
|
}]
|
||||||
data: [
|
};
|
||||||
{value: 150, name: 'data1'},
|
genderChart.setOption(genderOption);
|
||||||
{value: 274, name: 'data2'},
|
|
||||||
{value: 310, name: 'data3'},
|
|
||||||
{value: 335, name: 'data4'},
|
|
||||||
{value: 400, name: 'data5'}
|
|
||||||
]
|
|
||||||
}]
|
|
||||||
};
|
|
||||||
pieChartOne.setOption(optionPieOne);
|
|
||||||
// 饼状图2
|
|
||||||
var pieChartTwo = echarts.init(document.getElementById('pieChartTwo'));
|
|
||||||
var optionPieTwo = {
|
|
||||||
animation: false,
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'item'
|
|
||||||
},
|
|
||||||
|
|
||||||
series: [{
|
|
||||||
//name: '嘻嘻',//
|
|
||||||
type: 'pie',
|
|
||||||
radius: ['0%', '70%'],
|
|
||||||
data: [
|
|
||||||
{value: 200, name: 'data1'},
|
|
||||||
{value: 300, name: 'data2'},
|
|
||||||
{value: 500, name: 'data3'},
|
|
||||||
{value: 335, name: 'data4'},
|
|
||||||
{value: 400, name: 'data5'}
|
|
||||||
]
|
|
||||||
}]
|
|
||||||
};
|
|
||||||
pieChartTwo.setOption(optionPieTwo);
|
|
||||||
// 饼状图3
|
|
||||||
var pieChartThree = echarts.init(document.getElementById('pieChartThree'));
|
|
||||||
var optionPieThree = {
|
|
||||||
animation: false,
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'item'
|
|
||||||
},
|
|
||||||
|
|
||||||
series: [{
|
|
||||||
//name: '嘻嘻',//
|
|
||||||
type: 'pie',
|
|
||||||
radius: ['0%', '70%'],
|
|
||||||
data: [
|
|
||||||
{value: 100, name: 'data1'},
|
|
||||||
{value: 274, name: 'data2'},
|
|
||||||
{value: 310, name: 'data3'},
|
|
||||||
{value: 600, name: 'data4'},
|
|
||||||
{value: 100, name: 'data5'}
|
|
||||||
]
|
|
||||||
}]
|
|
||||||
};
|
|
||||||
pieChartThree.setOption(optionPieThree);
|
|
||||||
// 饼状图4
|
|
||||||
var pieChartFour = echarts.init(document.getElementById('pieChartFour'));
|
|
||||||
var optionPieFour = {
|
|
||||||
animation: false,
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'item'
|
|
||||||
},
|
|
||||||
|
|
||||||
series: [{
|
|
||||||
//name: '嘻嘻',//
|
|
||||||
type: 'pie',
|
|
||||||
radius: ['0%', '70%'],
|
|
||||||
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: ['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() {
|
var fieldChart = echarts.init(document.getElementById('fieldChart'));
|
||||||
timer = setInterval(function() {
|
var fieldOption = {
|
||||||
var dataLen = optionLine.series[0].data.length;
|
tooltip: { trigger: 'item' },
|
||||||
// 取消之前高亮的图形
|
series: [{
|
||||||
lineChart.dispatchAction({
|
type: 'pie',
|
||||||
type: 'downplay',
|
radius: '60%',
|
||||||
seriesIndex: 0,
|
data: [
|
||||||
dataIndex: currentIndex
|
{ value: 10, name: '医学' },
|
||||||
});
|
{ value: 5, name: '建筑' },
|
||||||
currentIndex = (currentIndex + 1) % dataLen;
|
{ value: 4, name: '教育' },
|
||||||
// 高亮当前图形
|
{ value: 4, name: '财务' },
|
||||||
lineChart.dispatchAction({
|
{ value: 8, name: 'IT技术' }
|
||||||
type: 'highlight',
|
]
|
||||||
seriesIndex: 0,
|
}]
|
||||||
dataIndex: currentIndex
|
};
|
||||||
});
|
fieldChart.setOption(fieldOption);
|
||||||
// 显示 tooltip
|
|
||||||
lineChart.dispatchAction({
|
|
||||||
type: 'showTip',
|
|
||||||
seriesIndex: 0,
|
|
||||||
dataIndex: currentIndex
|
|
||||||
});
|
|
||||||
}, interval);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 开始自动播放
|
// 职称分布饼图
|
||||||
startAutoPlay();
|
var titleChart = echarts.init(document.getElementById('titleChart'));
|
||||||
|
var titleOption = {
|
||||||
|
tooltip: { trigger: 'item' },
|
||||||
|
series: [{
|
||||||
|
type: 'pie',
|
||||||
|
radius: '60%',
|
||||||
|
data: [
|
||||||
|
{ value: 15, name: '高级' },
|
||||||
|
{ value: 8, name: '中级' },
|
||||||
|
{ value: 8, name: '初级' }
|
||||||
|
]
|
||||||
|
}]
|
||||||
|
};
|
||||||
|
titleChart.setOption(titleOption);
|
||||||
|
|
||||||
// 鼠标悬停在图表上时暂停自动播放
|
// 专家评分分布柱状图
|
||||||
lineChart.on('mouseover', function() {
|
var scoreChart = echarts.init(document.getElementById('scoreChart'));
|
||||||
clearInterval(timer);
|
var scoreOption = {
|
||||||
});
|
tooltip: { trigger: 'axis' },
|
||||||
|
xAxis: {
|
||||||
// 鼠标离开图表区域时恢复自动播放
|
type: 'category',
|
||||||
lineChart.on('mouseout', function() {
|
data: ['88-89分', '90-94分', '95-96分']
|
||||||
startAutoPlay();
|
},
|
||||||
});
|
yAxis: { type: 'value' },
|
||||||
// 饼状图
|
series: [{
|
||||||
var pieChart = echarts.init(document.getElementById('pieChart'));
|
data: [3, 5, 2],
|
||||||
var optionPie = {
|
type: 'bar',
|
||||||
animation: false,
|
itemStyle: { color: '#5470c6' }
|
||||||
title: {
|
}]
|
||||||
//text: '订单占比系统',//
|
};
|
||||||
left: 'left'
|
scoreChart.setOption(scoreOption);
|
||||||
},
|
// 专家录入趋势曲线图
|
||||||
tooltip: {
|
var trendChart = echarts.init(document.getElementById('trendChart'));
|
||||||
trigger: 'item'
|
var trendOption = {
|
||||||
},
|
tooltip: { trigger: 'axis' },
|
||||||
legend: {
|
xAxis: {
|
||||||
orient: 'vertical',
|
type: 'category',
|
||||||
left: 'right'
|
data: ['1月1-5日', '1月10-15日', '1月20-25日', '2月1-5日', '2月10-15日', '2月20-25日']
|
||||||
},
|
},
|
||||||
series: [{
|
yAxis: { type: 'value' },
|
||||||
//name: '嘻嘻',//
|
series: [{
|
||||||
type: 'pie',
|
name: '新增专家',
|
||||||
radius: ['60%', '70%'],
|
data: [3, 3, 2, 3, 2, 2],
|
||||||
data: [
|
type: 'line',
|
||||||
{value: 150, name: 'data1'},
|
smooth: true,
|
||||||
{value: 274, name: 'data2'},
|
areaStyle: { opacity: 0.3 }
|
||||||
{value: 310, name: 'data3'},
|
}]
|
||||||
{value: 335, name: 'data4'},
|
};
|
||||||
{value: 400, name: 'data5'}
|
trendChart.setOption(trendOption);
|
||||||
]
|
// 专家活跃度统计柱状图
|
||||||
}]
|
var activityChart = echarts.init(document.getElementById('activityChart'));
|
||||||
};
|
var activityOption = {
|
||||||
pieChart.setOption(optionPie);
|
tooltip: { trigger: 'axis' },
|
||||||
//柱状图1
|
legend: { data: ['参与项目数', '发表文章数'] },
|
||||||
var barChartOne = echarts.init(document.getElementById('barChartOne'));
|
xAxis: {
|
||||||
var optionBarOne = {
|
type: 'category',
|
||||||
animation: false,
|
data: ['人工智能', '大数据', '物联网', '区块链', '云计算']
|
||||||
title: {
|
},
|
||||||
//text: '业务核心数据'//
|
yAxis: { type: 'value' },
|
||||||
},
|
series: [
|
||||||
tooltip: {},
|
{
|
||||||
legend: {
|
name: '参与项目数',
|
||||||
data: ['data1', 'data2'] ,
|
|
||||||
left: 'right'
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
data: ['一月', '二月', '三月', '四月', '五月','六月','七月','八月','九月','十月','十一月','十二月',]
|
|
||||||
},
|
|
||||||
yAxis: {},
|
|
||||||
series: [{
|
|
||||||
name: 'data1',
|
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
data: [5, 20, 36, 10, 10,15,16,20,12,13,35,12] // 第一条柱状图的数据
|
data: [15, 12, 18, 10, 14]
|
||||||
}, {
|
|
||||||
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',
|
name: '发表文章数',
|
||||||
axisPointer: {
|
type: 'bar',
|
||||||
type: 'shadow'
|
data: [30, 25, 22, 18, 27]
|
||||||
}
|
}
|
||||||
},
|
]
|
||||||
legend: {
|
};
|
||||||
data: ['Profit', 'Expenses', 'Income']
|
activityChart.setOption(activityOption);
|
||||||
},
|
// 窗口大小改变时重新调整图表
|
||||||
grid: {
|
window.addEventListener('resize', function() {
|
||||||
left: '3%',
|
genderChart.resize();
|
||||||
right: '4%',
|
fieldChart.resize();
|
||||||
bottom: '3%',
|
titleChart.resize();
|
||||||
containLabel: true
|
scoreChart.resize();
|
||||||
},
|
trendChart.resize();
|
||||||
xAxis: [
|
activityChart.resize();
|
||||||
{
|
});
|
||||||
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);
|
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,14 +1,14 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<base href="/"/>
|
<base href="/"/>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>在线测评系统</title>
|
<title>在线测评系统</title>
|
||||||
<link rel="stylesheet" href="assets/crpm/js/layui/css/layui.css" />
|
<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/fonts/font-awesome/css/font-awesome.css" />
|
||||||
<link rel="stylesheet" href="assets/crpm/index/index3/index3.css" />
|
<link rel="stylesheet" href="assets/crpm/index/index3/index3.css" />
|
||||||
<link rel="stylesheet" href="assets/crpm/index/index.css" />
|
<link rel="stylesheet" href="assets/crpm/index/index.css" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app">
|
<div id="app">
|
||||||
@ -69,19 +69,45 @@
|
|||||||
<blockquote class="layui-elem-quote-index layui-text">
|
<blockquote class="layui-elem-quote-index layui-text">
|
||||||
欢迎使用在线测评系统
|
欢迎使用在线测评系统
|
||||||
</blockquote>
|
</blockquote>
|
||||||
|
<!--数据统计代码写到这里 , 只允许2行 -->
|
||||||
<div class='homepage' id="homepage">
|
<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>
|
||||||
<div class='homepage-bot' >
|
<div class="layui-row layui-col-space15" style="margin-top: 15px;">
|
||||||
<div class='lineChart' id="lineChart"></div>
|
<div class="layui-col-md6">
|
||||||
<div id="barChartThree" class='barChartThree' ></div>
|
<div class="layui-card">
|
||||||
<div id="funnelChart" class='funnelChart' ></div>
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="layui-card layui-panel page-iframe-container">
|
<div class="layui-card layui-panel page-iframe-container">
|
||||||
<iframe class="page-iframe" id="pageIframe" src="" style="display: none;"></iframe>
|
<iframe class="page-iframe" id="pageIframe" src="" style="display: none;"></iframe>
|
||||||
</div>
|
</div>
|
||||||
@ -92,9 +118,9 @@
|
|||||||
</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 () {
|
layui.use(['element', 'layer', 'util'], function () {
|
||||||
var element = layui.element;
|
var element = layui.element;
|
||||||
var layer = layui.layer;
|
var layer = layui.layer;
|
||||||
var util = layui.util;
|
var util = layui.util;
|
||||||
@ -110,306 +136,102 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
init();
|
init();
|
||||||
var homepage = document.getElementById('homepage');
|
var homepage = document.getElementById('homepage');
|
||||||
$(document).on('click', '.menu-item', function() {
|
$(document).on('click', '.menu-item', function() {
|
||||||
var url = this.dataset.url;
|
var url = this.dataset.url;
|
||||||
var pageIframe = $('#pageIframe');
|
var pageIframe = $('#pageIframe');
|
||||||
pageIframe.attr('src', url);
|
pageIframe.attr('src', url);
|
||||||
pageIframe.show();
|
pageIframe.show();
|
||||||
homepage.style.display = 'none';
|
homepage.style.display = 'none';
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 初始化数据统计图表
|
||||||
|
var initDataCharts = function() {
|
||||||
|
// 考试参与情况饼图
|
||||||
|
var examChart = echarts.init(document.getElementById('examParticipationChart'));
|
||||||
|
var examOption = {
|
||||||
|
tooltip: { trigger: 'item' },
|
||||||
|
legend: { orient: 'vertical', left: 'left' },
|
||||||
|
series: [{
|
||||||
|
name: '参与情况',
|
||||||
|
type: 'pie',
|
||||||
|
radius: '60%',
|
||||||
|
data: [
|
||||||
|
{ value: 86, name: '已参与' },
|
||||||
|
{ value: 24, name: '未参与' }
|
||||||
|
],
|
||||||
|
emphasis: {
|
||||||
|
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: '困难' }
|
||||||
|
]
|
||||||
|
}]
|
||||||
|
};
|
||||||
|
difficultyChart.setOption(difficultyOption);
|
||||||
|
|
||||||
|
// 月度考试趋势曲线图
|
||||||
|
var trendChart = echarts.init(document.getElementById('monthlyTrendChart'));
|
||||||
|
var trendOption = {
|
||||||
|
tooltip: { trigger: 'axis' },
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: ['1月', '2月', '3月', '4月', '5月', '6月']
|
||||||
|
},
|
||||||
|
yAxis: { type: 'value', name: '考试次数' },
|
||||||
|
series: [{
|
||||||
|
name: '考试场次',
|
||||||
|
data: [8, 12, 15, 18, 22, 25],
|
||||||
|
type: 'line',
|
||||||
|
smooth: true,
|
||||||
|
itemStyle: { color: '#91cc75' },
|
||||||
|
areaStyle: { opacity: 0.3 }
|
||||||
|
}]
|
||||||
|
};
|
||||||
|
trendChart.setOption(trendOption);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 初始化图表
|
||||||
|
initDataCharts();
|
||||||
});
|
});
|
||||||
//柱状图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);
|
|
||||||
// 饼状图
|
|
||||||
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%'],
|
|
||||||
data: [
|
|
||||||
{value: 150, name: 'data1'},
|
|
||||||
{value: 274, name: 'data2'},
|
|
||||||
{value: 310, name: 'data3'},
|
|
||||||
{value: 335, name: 'data4'},
|
|
||||||
{value: 400, name: 'data5'}
|
|
||||||
]
|
|
||||||
}]
|
|
||||||
};
|
|
||||||
pieChart.setOption(optionPie);
|
|
||||||
//柱状图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: {
|
|
||||||
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: ['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();
|
|
||||||
});
|
|
||||||
//柱状图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'));
|
|
||||||
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>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,14 +1,14 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<base href="/"/>
|
<base href="/"/>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>在线研修与考核系统</title>
|
<title>在线研修与考核系统</title>
|
||||||
<link rel="stylesheet" href="assets/crpm/js/layui/css/layui.css" />
|
<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/fonts/font-awesome/css/font-awesome.css" />
|
||||||
<link rel="stylesheet" href="assets/crpm/index/index1/index1.css" />
|
<link rel="stylesheet" href="assets/crpm/index/index1/index1.css" />
|
||||||
<link rel="stylesheet" href="assets/crpm/index/index.css" />
|
<link rel="stylesheet" href="assets/crpm/index/index.css" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app">
|
<div id="app">
|
||||||
@ -69,15 +69,45 @@
|
|||||||
<blockquote class="layui-elem-quote layui-text">
|
<blockquote class="layui-elem-quote layui-text">
|
||||||
欢迎使用在线研修与考核系统
|
欢迎使用在线研修与考核系统
|
||||||
</blockquote>
|
</blockquote>
|
||||||
<div class='homepage' id="homepage">
|
<!--数据统计代码写到这里 , 只允许2行 -->
|
||||||
<div class='homepage-top' >
|
<div class='homepage' id="homepage">
|
||||||
<div class='pieChart' id="pieChart"></div>
|
<div class="layui-row layui-col-space15">
|
||||||
<div class='lineChart' id="lineChart"></div>
|
<div class="layui-col-md6">
|
||||||
|
<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>
|
||||||
<div class='homepage-bot' >
|
<div class="layui-row layui-col-space15" style="margin-top: 15px;">
|
||||||
<div id="barChart" class='barChart'></div>
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="layui-card layui-panel page-iframe-container">
|
<div class="layui-card layui-panel page-iframe-container">
|
||||||
<iframe class="page-iframe" id="pageIframe" src="" style="display: none;"></iframe>
|
<iframe class="page-iframe" id="pageIframe" src="" style="display: none;"></iframe>
|
||||||
</div>
|
</div>
|
||||||
@ -90,6 +120,7 @@
|
|||||||
|
|
||||||
<script src="assets/crpm/js/layui/layui.js"></script>
|
<script src="assets/crpm/js/layui/layui.js"></script>
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
layui.use(['element', 'layer', 'util'], function () {
|
layui.use(['element', 'layer', 'util'], function () {
|
||||||
var element = layui.element;
|
var element = layui.element;
|
||||||
var layer = layui.layer;
|
var layer = layui.layer;
|
||||||
@ -105,146 +136,102 @@
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 初始化图表
|
||||||
|
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();
|
init();
|
||||||
var homepage = document.getElementById('homepage');
|
initCharts();
|
||||||
|
|
||||||
|
var homepage = document.getElementById('homepage');
|
||||||
$(document).on('click', '.menu-item', function() {
|
$(document).on('click', '.menu-item', function() {
|
||||||
var url = this.dataset.url;
|
var url = this.dataset.url;
|
||||||
var pageIframe = $('#pageIframe');
|
var pageIframe = $('#pageIframe');
|
||||||
pageIframe.attr('src', url);
|
pageIframe.attr('src', url);
|
||||||
pageIframe.show();
|
pageIframe.show();
|
||||||
homepage.style.display = 'none';
|
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>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user