269 lines
9.7 KiB
HTML
269 lines
9.7 KiB
HTML
|
||
<script>
|
||
var now = new Date();
|
||
$(function () {
|
||
year = now.getFullYear();
|
||
month = now.getMonth() + 1;
|
||
for (var i = 0; i < 5; i++) {
|
||
$('#year').append('<option value="' + (year - i) + '">' + (year - i) + '</option>');
|
||
$('#years').append('<option value="' + (year - i) + '">' + (year - i) + '</option>');
|
||
}
|
||
$.get('api/tool?a=servertime', function (res) {
|
||
$('#year').combobox().combobox('setValue', res.year);
|
||
$('#years').combobox().combobox('setValue', res.year);
|
||
$('#month').combobox().combobox('setValue', res.month);
|
||
behaviorDate();
|
||
trainstatistical();
|
||
})
|
||
|
||
});
|
||
|
||
function gcpmsearch() {
|
||
var querydata = $('#fxrpms').serializeJSON();
|
||
$('#fxrpmtable').datagrid('load', querydata);
|
||
}
|
||
//培训分析柱形图
|
||
function behaviorDate() {
|
||
var y = $("#year").val();
|
||
var gcChart = echarts.init(document.getElementById("piecontainer"));
|
||
|
||
gcChart.setOption(option = {
|
||
title: {
|
||
text: '培训数量趋势图',
|
||
x: 'left'
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||
}
|
||
},
|
||
legend: {
|
||
|
||
data: []
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月','9月','10月','11月','12月']
|
||
|
||
},
|
||
yAxis: {
|
||
type: 'value'
|
||
},
|
||
toolbox: {
|
||
show: true,
|
||
feature: {
|
||
mark: { show: true },
|
||
dataView: { show: true, readOnly: false },
|
||
restore: { show: true },
|
||
saveAsImage: { show: true }
|
||
}
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
|
||
|
||
});
|
||
gcChart.showLoading();
|
||
$.ajax({
|
||
type: "get",
|
||
async: true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
|
||
url: "api/trainfg?a=trainfig&year=" + y, //请求发送
|
||
dataType: "json", //返回数据形式为json
|
||
success: function (data) {
|
||
//请求成功时执行该函数内容，data即为服务器返回的json对象
|
||
console.log(data);
|
||
if (data) {
|
||
gcChart.hideLoading(); //隐藏加载动画
|
||
gcChart.setOption({
|
||
legend: { data: data.key },
|
||
series: [{
|
||
name: '公司级',
|
||
type: 'bar',
|
||
stack: '总量',
|
||
label: {
|
||
normal: {
|
||
show: true,
|
||
position: 'insideRight'
|
||
}
|
||
},
|
||
data: data.companylevel
|
||
},
|
||
{
|
||
name: '车间/工段级',
|
||
type: 'bar',
|
||
stack: '总量',
|
||
label: {
|
||
normal: {
|
||
show: true,
|
||
position: 'insideRight'
|
||
}
|
||
},
|
||
data: data.workshoplevel
|
||
},
|
||
{
|
||
name: '班组级',
|
||
type: 'bar',
|
||
stack: '总量',
|
||
label: {
|
||
normal: {
|
||
show: true,
|
||
position: 'insideRight'
|
||
}
|
||
},
|
||
data: data.teamlevel
|
||
},
|
||
{
|
||
name: '部门分厂级',
|
||
type: 'bar',
|
||
stack: '总量',
|
||
label: {
|
||
normal: {
|
||
show: true,
|
||
position: 'insideRight'
|
||
}
|
||
},
|
||
data: data.departmentlevel
|
||
}]
|
||
}
|
||
);
|
||
|
||
}
|
||
},
|
||
error: function (errorMsg) {
|
||
gcChart.hideLoading();
|
||
}
|
||
});
|
||
|
||
}
|
||
//培训分析扇形图
|
||
function trainstatistical() {
|
||
var y = $("#year").val();
|
||
var m = $("#month").val();
|
||
var gcChart = echarts.init(document.getElementById("piecontainer2"));
|
||
|
||
gcChart.setOption(option = {
|
||
title: {
|
||
text: '培训类型分布',
|
||
x: 'left'
|
||
},
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
||
},
|
||
legend: {
|
||
orient: 'vertical',
|
||
x: 'left',
|
||
y: 'bottom',
|
||
data: []
|
||
},
|
||
toolbox: {
|
||
show: true,
|
||
feature: {
|
||
mark: { show: true },
|
||
dataView: { show: true, readOnly: false },
|
||
restore: { show: true },
|
||
saveAsImage: { show: true }
|
||
}
|
||
},
|
||
calculable: true,
|
||
|
||
});
|
||
gcChart.showLoading();
|
||
$.ajax({
|
||
type: "get",
|
||
async: true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
|
||
url: "api/trainfg?a=traintype&year=" + y + "&month=" + m, //请求发送
|
||
dataType: "json", //返回数据形式为json
|
||
success: function (data) {
|
||
//请求成功时执行该函数内容，data即为服务器返回的json对象
|
||
console.log(data)
|
||
if (data) {
|
||
gcChart.hideLoading(); //隐藏加载动画
|
||
gcChart.setOption({
|
||
legend: {
|
||
orient: 'vertical',
|
||
left: 'left',
|
||
data: ['日常培训', '相关方培训', '在岗人员培训'] },
|
||
series: [{
|
||
name: '培训类型',
|
||
type: 'pie',
|
||
radius: '55%',
|
||
center: ['50%', '60%'],
|
||
data: [
|
||
{ value: data.daily, name: '日常培训' },
|
||
{ value: data.related, name: '相关方培训' },
|
||
{ value: data.jobuser, name: '在岗人员培训' }
|
||
],
|
||
itemStyle: {
|
||
emphasis: {
|
||
shadowBlur: 10,
|
||
shadowOffsetX: 0,
|
||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||
}
|
||
}
|
||
}]
|
||
}
|
||
);
|
||
|
||
}
|
||
},
|
||
error: function (errorMsg) {
|
||
gcChart.hideLoading();
|
||
}
|
||
});
|
||
}
|
||
|
||
function funTypeChange() {
|
||
behaviorDate();//
|
||
}
|
||
function funTypeChange2() {
|
||
trainstatistical();//
|
||
}
|
||
|
||
</script>
|
||
|
||
|
||
<div class="border" id="desktop" style="margin: 10px 10px 0 10px; background: #fff; overflow: auto;">
|
||
|
||
<div style="width:100%">
|
||
<div style="width:50%;float:left">
|
||
<select class="txtInput select3" id="year" name="year" style="width:100px;"></select><label>年</label>
|
||
|
||
<button class="btn btn-info" onclick="funTypeChange()"> 查询</button>
|
||
|
||
<div id="piecontainer" style="height:400px;width:100%">
|
||
|
||
</div>
|
||
</div>
|
||
<div style="width:50%;float:left">
|
||
|
||
<select class="txtInput select3" id="month" name="month" style="width:100px;">
|
||
<option value="1">1月</option>
|
||
<option value="2">2月</option>
|
||
<option value="3">3月</option>
|
||
<option value="4">4月</option>
|
||
<option value="5">5月</option>
|
||
<option value="6">6月</option>
|
||
<option value="7">7月</option>
|
||
<option value="8">8月</option>
|
||
<option value="9">9月</option>
|
||
<option value="10">10月</option>
|
||
<option value="11">11月</option>
|
||
<option value="12">12月</option>
|
||
</select>
|
||
<button class="btn btn-info" onclick="funTypeChange2()"> 查询</button>
|
||
|
||
<div id="piecontainer2" style="height:400px;width:100%">
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|