You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
607 lines
24 KiB
607 lines
24 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>营区一体化综合管理平台</title>
|
|
<link href="../layui/css/layui.css" rel="stylesheet" />
|
|
<link type="text/css" href="css/zhgl-style.css" rel="stylesheet" />
|
|
<script src="../js/jquery-2.1.3.min.js"></script>
|
|
<script src="../layui/layui.js"></script>
|
|
<script src="../js/echarts.min.js"></script>
|
|
<style>
|
|
.clearfix:after {
|
|
display: block;
|
|
clear: both;
|
|
content: "";
|
|
visibility: hidden;
|
|
height: 0;
|
|
}
|
|
|
|
.clearfix {
|
|
zoom: 1;
|
|
}
|
|
|
|
.con-newl {
|
|
width: 70%;
|
|
height: 100%;
|
|
font-size: 16px;
|
|
color: #0d09f1;
|
|
line-height: 36px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.con-newl span {
|
|
color: #02bdff;
|
|
}
|
|
|
|
/*.module-bottom-content {
|
|
width: 25%;
|
|
height: 100%;
|
|
margin-bottom: 20px;
|
|
float: left;
|
|
}*/
|
|
/*蓝色滚动条样式*/
|
|
::-webkit-scrollbar {
|
|
width: 7px; /*滚动条宽度*/
|
|
height: 7px; /*滚动条高度*/
|
|
background-color: white;
|
|
}
|
|
|
|
.zh-con::-webkit-scrollbar-thumb {
|
|
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
|
background-color: rgba(234, 233, 239, 0.55); /*滚动条的背景颜色*/
|
|
}
|
|
.zh-ryxx {
|
|
border: 1px solid #0c6f89;
|
|
background: rgba(12, 70, 100, 0.8);
|
|
color: #ffffff;
|
|
box-shadow: 0 0 10px #183a53;
|
|
}
|
|
.zh-tit {
|
|
color: #ffffff;
|
|
}
|
|
.con-newl {
|
|
color:#ffffff;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="zh-content" style="top:0px;">
|
|
<div class="zh-row1 clearfix">
|
|
<!-- 各科目参训总人数 -->
|
|
<div class="zh-ryxx fl" style="width: calc(20% - 30px);">
|
|
<div class="zh-tit" style="background: url(img/zh-icon1.png) left center no-repeat;">各科目参训总人数</div>
|
|
<div class="zh-con">
|
|
<div id="div1" class="con-newl clearfix" style="width: 100%; margin-top: 10px;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 训练统计 -->
|
|
<div class="zh-ryxx fl" style="width: calc(40.55% - 30px); margin: 0 15px;">
|
|
<div class="zh-tit" style="background: url(img/zh-icon2.png) left center no-repeat;">训练统计</div>
|
|
<div class="zh-con">
|
|
<div id="zh-xltj" style="width: 100%; height: 100%;"></div>
|
|
</div>
|
|
</div>
|
|
<!-- 训练分析 -->
|
|
<div class="zh-ryxx fr" style="width: calc(40.06% - 15px); margin-left: 15px; margin-right: 0;">
|
|
<div class="zh-tit" style="background: url(img/zh-icon3.png) left center no-repeat;">
|
|
训练分析
|
|
<form class="layui-form" style="float: right">
|
|
<div class="layui-form-item" style="margin-bottom:1px">
|
|
<div class="layui-inline" style="margin:0px,0px,0px,10px">
|
|
<div class="layui-input-inline" style="width:240px">
|
|
<input type="text" class="layui-input" id="trainDate" lay-filter="trainDate" placeholder="请选择日期">
|
|
</div>
|
|
<div class="layui-input-inline" style="width:180px;margin:0px,5px,0px,0px">
|
|
<select id="Subject_ID" lay-filter="Subject_ID" lay-search="" lay-verify="required" style="width: 80px"></select>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="zh-con">
|
|
<div id="zh-xlfx" style="width: 100%; height: 100%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="zh-row1" style="height: calc(53.61% - 30px);">
|
|
<!-- 个人训练档案 -->
|
|
<div class="zh-ryxx fr" style="width: 100%; float:left;">
|
|
<div class="zh-tit" style="background: url(img/zh-icon5.png) left center no-repeat;">
|
|
个人训练档案
|
|
<form class="layui-form" style="float: right">
|
|
<select id="Person_ID" lay-filter="Person_ID" style="width: 80px">
|
|
<option value="">--请选择--</option>
|
|
</select>
|
|
</form>
|
|
</div>
|
|
<div class="zh-con" style="overflow-x: auto">
|
|
<div id="zh-grxlda" style="width: 100%; height: 100%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<link rel="stylesheet" href="../../css/bulletframe.css" media="all" />
|
|
</body>
|
|
</html>
|
|
<script>
|
|
|
|
layui.use(['form', 'layer', 'table', 'laytpl', 'laydate', 'upload', 'element'], function () {
|
|
var form = layui.form,
|
|
layer = parent.layer === undefined ? layui.layer : top.layer,
|
|
//$ = layui.jquery,
|
|
laytpl = layui.laytpl,
|
|
table = layui.table,
|
|
upload = layui.upload,
|
|
laydate = layui.laydate,
|
|
element = layui.element;
|
|
var OrgId = JSON.parse(window.sessionStorage.getItem("userInfo")).OrgID;
|
|
var UserCode = JSON.parse(window.sessionStorage.getItem("userInfo")).UserCode;
|
|
|
|
//获取当前日期+星期
|
|
function getFormatDateAndWeek() {
|
|
var date = new Date();
|
|
var year = date.getFullYear();
|
|
var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
|
|
var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
|
|
var week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'][date.getDay()];
|
|
return year + "年" + month + "月" + day + "日 " + " " + week;
|
|
}
|
|
//获取当前日期区间(间隔30天)
|
|
function getFormatDate() {
|
|
var date = new Date();
|
|
var year = date.getFullYear();
|
|
var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
|
|
var premonth = date.getMonth() < 10 ? "0" + (date.getMonth()) : date.getMonth();
|
|
var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
|
|
return year + "-" + premonth + "-" + day + " - " + year + "-" + month + "-" + day;
|
|
}
|
|
var selectValue;
|
|
|
|
//时间区间
|
|
laydate.render({
|
|
elem: '#trainDate',
|
|
range: true,
|
|
value: getFormatDate(),
|
|
done: function (data, value) {
|
|
getDataf_xlfx(selectValue, data)
|
|
|
|
}
|
|
});
|
|
|
|
|
|
//各科目参训总人数
|
|
$.ajax({
|
|
type: "post",
|
|
url: "../../ashx/TScoreHandler.ashx",
|
|
data: { Action: "GetParticipants", OrgId: OrgId },
|
|
dataType: "json",
|
|
success: function (result) {
|
|
result.data.forEach(function (obj, index, arr) {
|
|
var pHtml = "<p><span>" + obj.SUBJECTNAME + "：</span><label>" + obj.TOTAL + "(人)</label></p>"
|
|
$("#div1").append(pHtml);
|
|
});
|
|
}
|
|
});
|
|
|
|
|
|
//训练统计
|
|
$.ajax({
|
|
type: "post",
|
|
url: "../../ashx/TScoreHandler.ashx",
|
|
data: { Action: "GetTrainingTimes", OrgId: OrgId },
|
|
dataType: "json",
|
|
success: function (result) {
|
|
result.data.forEach(function (obj, index, arr) {
|
|
echarts1(obj.SUBJECTNAME.split(','), obj.TOTAL.split(','));
|
|
});
|
|
}
|
|
});
|
|
var echarts1 = function (xdata, data) {
|
|
var echarts_xltj = echarts.init(document.getElementById('zh-xltj'));
|
|
var option = {
|
|
grid: {
|
|
top: '15%',
|
|
right: '3%',
|
|
left: '5%',
|
|
bottom: '12%'
|
|
},
|
|
xAxis: [{
|
|
type: 'category',
|
|
color: '#ffffff',
|
|
data: xdata,
|
|
axisPointer: {
|
|
type: 'line'
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#ffffff'
|
|
},
|
|
interval: 1,
|
|
},
|
|
axisLabel: {
|
|
margin: 20,
|
|
color: '#ffffff',
|
|
textStyle: {
|
|
fontSize: 12,
|
|
},
|
|
},
|
|
}],
|
|
yAxis: [{
|
|
min: 0,
|
|
name: '单位:(次)',
|
|
axisLabel: {
|
|
color: '#ffffff',
|
|
},
|
|
max: function (value) {
|
|
return value.max + 5;
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#ffffff'
|
|
}
|
|
}
|
|
}],
|
|
series: [{
|
|
type: 'bar',
|
|
data: data,
|
|
barWidth: '20px',
|
|
itemStyle: {
|
|
normal: {
|
|
color: { //图形颜色
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [{
|
|
offset: 0,
|
|
color: '#41E1D4' // 0% 处的颜色
|
|
}, {
|
|
offset: 1,
|
|
color: '#10A7DB' // 100% 处的颜色
|
|
}],
|
|
global: false // 缺省为 false
|
|
},
|
|
barBorderRadius: [30, 30, 0, 0],
|
|
shadowColor: 'rgba(0,255,225,1)',
|
|
shadowBlur: 4,
|
|
}
|
|
},
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
lineHeight: 30,
|
|
width: 70,
|
|
height: 25,
|
|
backgroundColor: 'rgba(0,120,255,1)',
|
|
borderRadius: 200,
|
|
position: ['-5', '-60'],
|
|
distance: 1,
|
|
formatter: [
|
|
' {d|●}{a|{c}次} \n {b|}'
|
|
].join(','),
|
|
rich: {
|
|
d: {
|
|
color: '#3CDDCF',
|
|
},
|
|
a: {
|
|
color: '#fff',
|
|
align: 'center',
|
|
},
|
|
b: {
|
|
width: 1,
|
|
height: 30,
|
|
borderWidth: 1,
|
|
borderColor: '#234e6c',
|
|
align: 'left'
|
|
},
|
|
}
|
|
}
|
|
}
|
|
}]
|
|
}
|
|
echarts_xltj.setOption(option);
|
|
}
|
|
|
|
|
|
//训练分析
|
|
var getDataf_xlfx = function (subjectId, trainDateInterval) {
|
|
$.ajax({
|
|
type: "post",
|
|
url: "../../ashx/TScoreHandler.ashx",
|
|
data: { Action: "GetTrainingResults", OrgId: OrgId, subjectid: subjectId, trainDateInterval: trainDateInterval },
|
|
dataType: "json",
|
|
success: function (result) {
|
|
result.data.forEach(function (obj, index, arr) {
|
|
echarts2(obj.ORG_NAME.split(','), obj.AVERAGE.split(','));
|
|
});
|
|
}
|
|
});
|
|
}
|
|
form.on('select(Subject_ID)', function (data) {
|
|
trainDateInterval = $("#trainDate").val();
|
|
getDataf_xlfx(data.value, trainDateInterval);
|
|
});
|
|
|
|
$.ajax({//获取训练科目
|
|
type: "post",
|
|
url: "../../ashx/TPlanHandler.ashx",
|
|
data: { Action: "GetSubject", OrgId: OrgId },
|
|
dataType: "json",
|
|
async: false,
|
|
success: function (result) {
|
|
var orgStr = "";
|
|
trainDateInterval = $("#trainDate").val();
|
|
result.data.forEach(function (obj, index, arr) {
|
|
if (index == 0) {
|
|
selectValue = obj.ID;
|
|
getDataf_xlfx(obj.ID,trainDateInterval);
|
|
}
|
|
orgStr += "<option value='" + obj.ID + "'>" + obj.NAME + "</option>";
|
|
});
|
|
$("#Subject_ID").append(orgStr);
|
|
form.render('select');
|
|
}
|
|
});
|
|
var echarts2 = function (xdata, data) {
|
|
var echarts_xlfx = echarts.init(document.getElementById('zh-xlfx'));
|
|
option = {
|
|
grid: {
|
|
top: '15%',
|
|
left: '5%',
|
|
right: '5%',
|
|
bottom: '15%',
|
|
},
|
|
tooltip: {
|
|
trigger: "axis",
|
|
formatter: function (params) {
|
|
let html = '';
|
|
params.forEach(v => {
|
|
html += `<div style="color: #ffffff;font-size: 14px;line-height: 24px">
|
|
<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#00b3f4;"></span>
|
|
${v.name} ${v.seriesName}：
|
|
<span style="color:#00b3f4;font-weight:700;font-size: 18px;margin-left:5px">${v.value}</span>
|
|
分`;
|
|
})
|
|
return html
|
|
},
|
|
extraCssText: 'background: rgba(225,225,225,0.1); border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #ffffff;',
|
|
|
|
},
|
|
xAxis: [{
|
|
type: 'category',
|
|
data: xdata,
|
|
axisLabel: {
|
|
margin: 20,
|
|
color: '#ffffff',
|
|
textStyle: {
|
|
fontSize: 12,
|
|
},
|
|
rotate: 20
|
|
},
|
|
boundaryGap: false,
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: 'rgba(255,255,255,1)'
|
|
}
|
|
}
|
|
}],
|
|
yAxis: [{
|
|
type: 'value',
|
|
min: 0,
|
|
max: 100,
|
|
splitNumber: 4,
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: 'rgba(255,255,255,0.1)'
|
|
}
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
show: false,
|
|
//margin: 20,
|
|
//color: '#59588D',
|
|
//textStyle: {
|
|
// fontSize: 12,
|
|
//},
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
}],
|
|
series: [{
|
|
name: '平均成绩',
|
|
type: 'line',
|
|
smooth: true, //是否平滑
|
|
showAllSymbol: true,
|
|
// symbol: 'image://./static/images/guang-circle.png',
|
|
symbol: 'circle',
|
|
symbolSize: 15,
|
|
label: {
|
|
show: true,
|
|
position: 'top',
|
|
textStyle: {
|
|
color: '#00b3f4',
|
|
}
|
|
},
|
|
itemStyle: {
|
|
color: "#00b3f4",
|
|
borderColor: "#fff",
|
|
borderWidth: 3,
|
|
shadowColor: 'rgba(0, 0, 0, .3)',
|
|
shadowBlur: 0,
|
|
shadowOffsetY: 2,
|
|
shadowOffsetX: 2,
|
|
},
|
|
areaStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
offset: 0,
|
|
color: 'rgba(0,179,244,0.3)'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: 'rgba(0,179,244,0)'
|
|
}
|
|
], false),
|
|
shadowColor: 'rgba(0,179,244, 0.9)',
|
|
shadowBlur: 20
|
|
}
|
|
},
|
|
data: data
|
|
}]
|
|
};
|
|
echarts_xlfx.setOption(option);
|
|
}
|
|
|
|
//个人档案
|
|
var getDataf_grda1 = function (usersUid) {
|
|
$.ajax({
|
|
type: "post",
|
|
url: "../../ashx/TScoreHandler.ashx",
|
|
data: { Action: "GetAverageByUsersUid", UsersUid: usersUid },
|
|
dataType: "json",
|
|
success: function (result) {
|
|
echarts3(result.data);
|
|
}
|
|
});
|
|
}
|
|
form.on('select(Person_ID)', function (data) {
|
|
getDataf_grda1(data.value);
|
|
});
|
|
$.ajax({//获取机构人员
|
|
type: "post",
|
|
url: "../../ashx/SysEmpHandler.ashx",
|
|
data: { Action: "getOrgEmpGroupSelectByOrgId", OrgId: OrgId },
|
|
dataType: "json",
|
|
async: false,
|
|
success: function (result) {
|
|
var personStr = "";
|
|
var flag = false;
|
|
var firstman = "";
|
|
result.data.forEach(function (obj, index, arr) {
|
|
if (obj.pid == "0") {
|
|
var pid = obj.id;
|
|
var pname = obj.name;
|
|
personStr += "<optgroup label=\"" + pname + "\">";
|
|
result.data.forEach(function (obj2, index2, arr2) {
|
|
if (obj2.pid != '0' && firstman == "") {
|
|
firstman = obj2.id;
|
|
}
|
|
if (UserCode == obj2.id) {
|
|
flag = true;
|
|
}
|
|
if (pid == obj2.pid) {
|
|
personStr += "<option value='" + obj2.id + "'>" + obj2.name + "</option>";
|
|
}
|
|
})
|
|
personStr += "</optgroup>";
|
|
}
|
|
});
|
|
$("#Person_ID").append(personStr);
|
|
form.render('select');
|
|
if (flag) {
|
|
$("#Person_ID").siblings("div.layui-form-select").find('dl').find("dd[lay-value='" + UserCode + "']").click();
|
|
} else {
|
|
$("#Person_ID").siblings("div.layui-form-select").find('dl').find("dd[lay-value='" + firstman + "']").click();
|
|
}
|
|
form.render('select');
|
|
}
|
|
});
|
|
var echarts3 = function (data) {
|
|
console.log(data);
|
|
$("#zh-grxlda").width("100%");
|
|
var number = data.length;
|
|
if (number > 5) {
|
|
$("#zh-grxlda").width($("#zh-grxlda").width() + (number - 5) * 300);
|
|
}
|
|
var echarts_grxlda = echarts.init(document.getElementById('zh-grxlda'));
|
|
var titleArr = [], seriesArr = [];
|
|
colors = [['#389af4', '#dfeaff'], ['#ff8c37', '#ffdcc3'], ['#ffc257', '#ffedcc'], ['#fd6f97', '#fed4e0'], ['#a181fc', '#e3d9fe']];
|
|
data.forEach(function (item, index) {
|
|
titleArr.push(
|
|
{
|
|
text: item.NAME,
|
|
subtext: "平均分",
|
|
left: index * parseInt(100 / number) + 10 + '%',
|
|
top: '80%',
|
|
textAlign: 'center',
|
|
textStyle: {
|
|
fontWeight: 'normal',
|
|
fontSize: '16',
|
|
color: colors[index % 5][0],
|
|
textAlign: 'center',
|
|
},
|
|
}
|
|
);
|
|
seriesArr.push(
|
|
{
|
|
name: item.NAME,
|
|
type: 'pie',
|
|
clockWise: false,
|
|
radius: [60, 70],
|
|
itemStyle: {
|
|
normal: {
|
|
color: colors[index % 5][0],
|
|
shadowColor: colors[index % 5][0],
|
|
shadowBlur: 0,
|
|
label: {
|
|
show: false
|
|
},
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
}
|
|
},
|
|
hoverAnimation: false,
|
|
center: [index * parseInt(100 / number) + 10 + '%', '50%'],
|
|
data: [{
|
|
value: item.VALUE,
|
|
label: {
|
|
normal: {
|
|
formatter: function (params) {
|
|
return params.value + '分';
|
|
},
|
|
position: 'center',
|
|
show: true,
|
|
textStyle: {
|
|
fontSize: '20',
|
|
fontWeight: 'bold',
|
|
color: colors[index % 5][0]
|
|
}
|
|
}
|
|
},
|
|
}, {
|
|
value: 100 - item.VALUE,
|
|
name: 'invisible',
|
|
itemStyle: {
|
|
normal: {
|
|
color: colors[index % 5][1]
|
|
},
|
|
emphasis: {
|
|
color: colors[index % 5][1]
|
|
}
|
|
}
|
|
}]
|
|
}
|
|
)
|
|
});
|
|
option = {
|
|
title: titleArr,
|
|
series: seriesArr
|
|
}
|
|
echarts_grxlda.setOption(option);
|
|
}
|
|
})
|
|
</script>
|
|
|
|
|