326 lines
13 KiB
HTML
326 lines
13 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();
|
||
gczxt();
|
||
})
|
||
|
||
});
|
||
$("#sfxbm2").combotree({
|
||
url: 'parthandle?a=tree',
|
||
editable: false,
|
||
loadFilter: function (rows) {
|
||
return convert(rows);
|
||
},
|
||
formatter: function (node) {
|
||
var s = node.text;
|
||
if (node.children) {
|
||
s += ' <span style=\'color:blue\'>(' + node.children.length + ')</span>';
|
||
}
|
||
return s;
|
||
},
|
||
onSelect: function (node) {
|
||
$('#sfxr').combobox({
|
||
url: 'getuser?partid=' + node.id + '&a=combobox',
|
||
editable: false,
|
||
});
|
||
}
|
||
});
|
||
function gcpmsearch() {
|
||
var querydata = $('#fxrpms').serializeJSON();
|
||
$('#fxrpmtable').datagrid('load', querydata);
|
||
}
|
||
function gcpmexport() {
|
||
var data = $('#fxrpmtable').datagrid('getData');
|
||
var datalist = data.rows;
|
||
|
||
for (var j = 0, len = datalist.length; j < len; j++) {
|
||
var dic = datalist[j]
|
||
for (var key in dic) {
|
||
dic["观察人"] = dic["looker__name"]
|
||
dic["观察部门"] = dic["lookpart__partname"]
|
||
dic["行为观察数"] = dic["number"]
|
||
delete dic["looker__userid"];
|
||
delete dic["looker__name"]
|
||
delete dic["lookpart__partname"]
|
||
delete dic["number"]
|
||
}
|
||
}
|
||
JSONToCSVConvertor(JSON.stringify(datalist), "观察行为排名", true);
|
||
}
|
||
function behaviorDate()
|
||
{
|
||
var y = $("#year").val();
|
||
var m = $("#month").val();
|
||
var gcChart = echarts.init(document.getElementById("piecontainer"));
|
||
|
||
gcChart.setOption(option = {
|
||
title: {
|
||
text: '观察类型分布',
|
||
x: 'left'
|
||
},
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
||
},
|
||
legend: {
|
||
orient: 'vertical',
|
||
x: 'right',
|
||
y:'bottom',
|
||
data: []
|
||
},
|
||
toolbox: {
|
||
show: true,
|
||
feature: {
|
||
mark: { show: true },
|
||
dataView: { show: true, readOnly: false },
|
||
restore: { show: true },
|
||
saveAsImage: { show: true }
|
||
}
|
||
},
|
||
calculable: true,
|
||
series: [
|
||
{
|
||
name: '级别分布',
|
||
type: 'pie',
|
||
radius: '55%',
|
||
roseType: 'angle',
|
||
center: ['50%', '60%'],
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
show: false
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
}
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
show: true,
|
||
position: 'center',
|
||
textStyle: {
|
||
fontSize: '22',
|
||
fontWeight: 'bold'
|
||
}
|
||
}
|
||
}
|
||
},
|
||
data: []
|
||
}
|
||
]
|
||
});
|
||
gcChart.showLoading();
|
||
$.ajax({
|
||
type: "get",
|
||
async: true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
|
||
url: "api/obscount?a=gclxt&year=" + y + "&month=" + m, //请求发送
|
||
dataType: "json", //返回数据形式为json
|
||
success: function (data) {
|
||
//请求成功时执行该函数内容，data即为服务器返回的json对象
|
||
|
||
if (data) {
|
||
gcChart.hideLoading(); //隐藏加载动画
|
||
gcChart.setOption({
|
||
legend: { data: data.key },
|
||
series: {
|
||
name: '级别分布',
|
||
data: data.value,
|
||
}
|
||
}
|
||
);
|
||
|
||
}
|
||
},
|
||
error: function (errorMsg) {
|
||
gcChart.hideLoading();
|
||
}
|
||
});
|
||
|
||
}
|
||
|
||
|
||
function funTypeChange() {
|
||
behaviorDate();//饼图
|
||
}
|
||
function funTypeChange2() {
|
||
gczxt();
|
||
}
|
||
function gczxt() {//行为观察折线图
|
||
var y = $("#years").val();
|
||
//行为观察折线图
|
||
$.ajax({
|
||
type: "get",
|
||
async: true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
|
||
url: "api/obscount?a=gclzx&year=" + y, //请求发送
|
||
dataType: "json", //返回数据形式为json
|
||
success: function (data) {
|
||
//请求成功时执行该函数内容，data即为服务器返回的json对象
|
||
|
||
var gcChart2 = echarts.init(document.getElementById("piecontainer2"));
|
||
|
||
gcChart2.setOption(option = {
|
||
title: {
|
||
text: '行为观察折线图'
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
legend: {
|
||
data: ['人员的反映', '员工的位置', '个人防护装备', '工具和设备', '程序和标准', '人体工程学', '环境整洁']
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
toolbox: {
|
||
show: true,
|
||
feature: {
|
||
mark: { show: true },
|
||
dataView: { show: true, readOnly: false },
|
||
restore: { show: true },
|
||
saveAsImage: { show: true }
|
||
}
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
data: data.months
|
||
},
|
||
yAxis: {
|
||
type: 'value'
|
||
},
|
||
series: [
|
||
{
|
||
name: '人员的反映',
|
||
type: 'line',
|
||
stack: '总量',
|
||
data: data.userfy
|
||
},
|
||
{
|
||
name: '员工的位置',
|
||
type: 'line',
|
||
stack: '总量',
|
||
data: data.userwz
|
||
},
|
||
{
|
||
name: '个人防护装备',
|
||
type: 'line',
|
||
stack: '总量',
|
||
data: data.grfh
|
||
},
|
||
{
|
||
name: '工具和设备',
|
||
type: 'line',
|
||
stack: '总量',
|
||
data: data.gjhsb
|
||
},
|
||
{
|
||
name: '程序和标准',
|
||
type: 'line',
|
||
stack: '总量',
|
||
data: data.cxhbz
|
||
}
|
||
,
|
||
{
|
||
name: '人体工程学',
|
||
type: 'line',
|
||
stack: '总量',
|
||
data: data.rtgcx
|
||
},
|
||
{
|
||
name: '环境整洁',
|
||
type: 'line',
|
||
stack: '总量',
|
||
data: data.hjzj
|
||
}
|
||
]
|
||
});
|
||
},
|
||
error: function (errorMsg) {
|
||
gcChart2.hideLoading();
|
||
}
|
||
});
|
||
}
|
||
|
||
|
||
</script>
|
||
|
||
|
||
<div class="border" id="desktop" style="margin: 10px 10px 0 10px; background: #fff; overflow: auto;">
|
||
<!--行为观察统计-->
|
||
<select class="txtInput select3" id="years" name="years" style="width:100px;"></select><label>年</label>
|
||
<button class="btn btn-info" onclick="funTypeChange2()"> 查询</button>
|
||
<div id="piecontainer2" style="width:80%;margin:auto;height:400px;margin-bottom:100px;">
|
||
|
||
</div>
|
||
<div style="width:100%">
|
||
<select class="txtInput select3" id="year" name="year" style="width:100px;"></select><label>年</label>
|
||
<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="funTypeChange()"> 查询</button>
|
||
<div style="width:80%;margin:auto;height:400px;margin-bottom:100px;">
|
||
|
||
|
||
<div id="piecontainer" style="height:400px;width:100%">
|
||
|
||
</div>
|
||
</div>
|
||
<div style="width: 80%; margin:auto;margin-bottom:100px; ">
|
||
<table name="" id="fxrpmtable" class='easyui-datagrid' title="行为观察记录排名" data-options="rownumbers:true,singleSelect:true,striped: true,method:'get',url: 'api/obscount?a=gclxbg',toolbar:'#fxrpmbar'" style="height:400px">
|
||
<thead>
|
||
<tr>
|
||
|
||
<th data-options="field:'looker__userid',hidden:true">用户ID</th>
|
||
<th data-options="field:'looker__name',align:'right'" width="30%">观察记录人姓名</th>
|
||
<th data-options="field:'lookpart__partname',align:'right'" width="35%">观察部门</th>
|
||
<th data-options="field:'number',align:'right'" width="35%">行为观察数</th>
|
||
</tr>
|
||
</thead>
|
||
</table>
|
||
<div id='fxrpmbar'>
|
||
<form id="fxrpms">
|
||
<a onclick="gcpmsearch()" class='easyui-linkbutton' iconCls='fa-search' plain=true>查询</a>
|
||
<a onclick="gcpmexport()" class='easyui-linkbutton' iconCls='fa-upload' plain=true>导出</a>
|
||
<div>
|
||
<label>发现部门</label><input id="sfxbm2" name="fxbm" style="width:180px;height:22px" />
|
||
<label>起始时间</label><input id="sqssj" name="qssj" class="easyui-datebox" style="width:180px;height:22px" />
|
||
<label>结束时间</label><input id="sjssj" name="jssj" class="easyui-datebox" style="width:180px;height:22px" />
|
||
</div>
|
||
|
||
</form>
|
||
</div>
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|