软测单独项目
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.
 
 
 
 
 
 

1559 lines
60 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" />
<link rel="stylesheet" href="../css/newtheme/layuiextend.css" />
<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: #fff;
line-height: 36px;
overflow-y: auto;
}
.con-newl span {
color: #00b3f4;
}
/*.module-bottom-content {
width: 25%;
height: 100%;
margin-bottom: 20px;
float: left;
}*/
/*蓝色滚动条样式*/
::-webkit-scrollbar {
width: 7px; /*滚动条宽度*/
height: 7px; /*滚动条高度*/
background-color: #01245c;
}
.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-con::-webkit-scrollbar-track-piece {
background-color: rgba(234, 233, 239, 0.55); /*滚动条的背景颜色*/
}
.layui-form-select dl {
background-color: #02203a;
color: #fff;
font-size: 14px;
}
.hl1 {
height: 100%;
}
</style>
</head>
<body>
<div class="zh-tit" style=" height:50px;">
<form class="layui-form" style="float: left">
查询条件
&nbsp;&nbsp;&nbsp;&nbsp;
<div class="layui-input-inline" style="width:240px">
<select id="sel_Org" lay-filter="sel_Org" style="width: 80px" lay-search>
</select>
</div>
&nbsp;&nbsp;&nbsp;&nbsp;
<div class="layui-input-inline" style="width:240px">
<select id="sel_Sub" lay-filter="sel_Sub" style="width: 80px">
</select>
</div>
&nbsp;&nbsp;&nbsp;&nbsp;
<div class="layui-input-inline" style="width:240px">
<input type="text" class="layui-input" id="sel_Day" lay-filter="sel_Day" placeholder="请选择日期">
</div>
</form>
</div>
<div class="zh-content" style="top: 0px; overflow-y: auto;">
<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 fl" style="width: calc(30% - 30px);">
<div class="zh-tit" style="background: url(img/zh-icon1.png) left center no-repeat;">训练走势</div>
<div class="zh-con">
<div id="xlzsecharts_s" style="width: 100%; height: 100%;overflow: auto"></div>
</div>
</div>
<div class="zh-ryxx fr" style="width: calc(70.06% - 15px); margin-left: 15px; margin-right: 0; ">
<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">
<div id="zh-grxlda" style="width: 100%;height: 100%;float: left;overflow-y: hidden;overflow-x: auto;white-space: nowrap;"></div>
</div>
</div>
</div>
<!-- 科目考核统计 -->
<div class="zh-row1" style="height: calc(60% );">
<div class="zh-ryxx fl" style="width: calc(100%); ">
<div class="zh-tit" style="background: url(img/zh-icon5.png) left center no-repeat;">
科目考核统计
</div>
<div class="zh-con">
<!--<div id="zh-grxlda" style="width: 1120px;height: 100%;float: left;overflow-y: hidden;overflow-x: auto;white-space: nowrap;"></div>-->
<div style="width:100%;clear:left;"></div>
<div class="layui-row hl1" style="height:100%; ">
<div class="layui-col-xs1 hl1"></div>
<div class="layui-col-xs2 hl1">
<div class="grid-demo grid-demo-bg1 hl1">
<div id="divKmtj1" style="width:100%; height:100%;"></div>
</div>
</div>
<div class="layui-col-xs2 hl1">
<div class="grid-demo hl1">
<div id="divKmtj2" style="width:100%; height:100%;"></div>
</div>
</div>
<div class="layui-col-xs2 hl1">
<div class="grid-demo grid-demo-bg1 hl1">
<div id="divKmtj3" style="width:100%; height:100%;"></div>
</div>
</div>
<div class="layui-col-xs2 hl1">
<div class="grid-demo hl1">
<div id="divKmtj4" style="width:100%; height:100%;"></div>
</div>
</div>
<div class="layui-col-xs2 hl1">
<div class="grid-demo hl1">
<div id="divKmtj5" style="width:100%; height:100%;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script src="../js/config.js"></script>
<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;
return "2020-01-01" + " - " + year + "-" + month + "-" + day;
}
var selectValue;
//时间区间
laydate.render({
elem: '#trainDate',
range: true,
value: getFormatDate(),
done: function (data, value) {
getDataf_xlfx(selectValue, data)
}
});
//科目考核统计 时间选择
laydate.render({
elem: '#sel_Day'
, type: 'month'
, max: 7 //7天后
//, value: new Date()
, change: function (value, date, endDate) {
//alert(value); //在控件上弹出value值
selTime = value;
UpdShowHGL();
}
});
//初始化树
$.ajax({
type: "post",
url: configData.url.zxUrl+"ashx/ZYSysEmpHandler.ashx",
data: { Action: "OrgDeptTree", OrgId: OrgId },
dataType: "json",
success: function (result) {
var orgStr = '<option value="">--请选择--</option>';
result.data.forEach(function (obj, index, arr) {
if (obj.TYPE == "org")
orgStr += "<option value='" + obj.ID + "'>" + obj.NAME + "</option>";
});
$("#sel_Org").append(orgStr);
form.render('select');
$("#sel_Org").siblings("div.layui-form-select").find('dl').find("dd[lay-value='" + OrgId + "']").click();
form.render('select');
}
});
//组织结构切换
form.on('select(sel_Org)', function (data) {
selOrg = data.value;
//console.log(selOrg);
// 各科参训人数
subjectEmpCount(selOrg);
//训练统计
subjectXLTJ(selOrg);
UpdSub(data.value);
UpdShowHGL();
});
//各科目参训总人数
function subjectEmpCount(pemOrgId) {
$("#div1").html("");
$.ajax({
type: "post",
url: configData.url.zxUrl+"ashx/ashx/ZYTScoreHandler.ashx",
data: { Action: "GetParticipants", OrgId: pemOrgId },
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);
});
}
});
}
//训练统计
function subjectXLTJ(penOrgId) {
$.ajax({
type: "post",
url: configData.url.zxUrl+"ashx/ashx/ZYTScoreHandler.ashx",
data: { Action: "GetTrainingTimes", OrgId: penOrgId },
dataType: "json",
success: function (result) {
var dataEnd = 100;
result.data.forEach(function (obj, index, arr) {
//if (obj.SUBJECTNAME.split(',').length > 10) { dataEnd = 8;}
dataEnd = 100 / (Math.floor(obj.SUBJECTNAME.split(',').length / 10) == 0 ? 1 : Math.floor(obj.SUBJECTNAME.split(',').length / 10));
echarts1(obj.SUBJECTNAME.split(','), obj.TOTAL.split(','), dataEnd);
});
}
});
}
var echarts1 = function (xdata, data, dataEnd) {
var echarts_xltj = echarts.init(document.getElementById('zh-xltj'));
var option = {
grid: {
top: '15%',
right: '3%',
left: '5%',
bottom: '20%'
},
tooltip: {
trigger: "axis",
formatter: function (params) {
let html = '';
params.forEach(v => {
html += `<div style="color: #fff;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: #333;',
},
xAxis: [{
type: 'category',
color: '#59588D',
data: xdata,
axisPointer: {
type: 'line'
},
axisLine: {
lineStyle: {
color: '#272456'
},
interval: 1,
},
axisLabel: {
color: '#fff',
textStyle: {
fontSize: 12,
},
interval: 0,
rotate: 40
},
}],
yAxis: [{
min: 0,
name: '单位:(次)',
nameTextStyle: {
color: "#fff",
fontSize: 12,
},
axisLabel: {
color: '#fff',
},
max: function (value) {
return value.max + 5;
},
splitLine: {
show: false,
}
}],
dataZoom: [
{
show: true,
realtime: true,
start: 0,
end: dataEnd,
height: 10,
bottom: 6
},
{
type: 'inside',
realtime: true,
start: 0,
end: dataEnd
}
],
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: configData.url.zxUrl+"ashx/ashx/ZYTScoreHandler.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: configData.url.zxUrl+"ashx/ashx/ZYTPlanHandler.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: #fff;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: #333;',
},
xAxis: [{
type: 'category',
data: xdata,
axisLabel: {
margin: 20,
color: '#fff',
textStyle: {
fontSize: 12,
},
rotate: 20
},
boundaryGap: false,
}],
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: '#fff',
//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 xlzsecharts_fun = function (xAxisData, yAxisData1, title, echartsId) {
//console.log(xAxisData, yAxisData1, title, echartsId);
let color = [
"#0090FF",
"#36CE9E",
"#FFC005",
"#FF515A",
"#8B5CFF",
"#00CA69"
];
const hexToRgba = (hex, opacity) => {
let rgbaColor = "";
let reg = /^#[\da-f]{6}$/i;
if (reg.test(hex)) {
rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
"0x" + hex.slice(3, 5)
)},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
}
return rgbaColor;
}
var echarts_xltj = echarts.init(document.getElementById(echartsId));
option = {
title: {
text: title,
top: '1%',
x: 'center',
textStyle: { color: '#00fcff', fontSize: '18' },
subtextStyle: { color: '#00fcff', fontSize: '14' }
},
color: color,
legend: {
right: 10,
top: 10,
name: title
},
tooltip: {
trigger: "axis",
formatter: function (params) {
let html = '';
params.forEach(v => {
html += `<div style="color: #fff;font-size: 14px;line-height: 24px">
<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[v.componentIndex]};"></span>
${v.name}
<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: #333;',
},
grid: {
//top: 100,
//containLabel: true,
top: '5%',
left: '10%',
right: '0%',
bottom: '10%',
},
xAxis: [{
type: "category",
boundaryGap: false,
axisLabel: {
formatter: '{value}',
textStyle: {
fontSize: 12,
color: "#fff"
},
rotate: 20,
interval: 0
},
axisLine: {
lineStyle: {
color: "#D9D9D9"
}
},
data: xAxisData
}],
yAxis: [{
type: "value",
name: '单位:分数',
axisLabel: {
textStyle: {
color: "#fff"
}
},
nameTextStyle: {
color: "#fff",
fontSize: 12,
lineHeight: 40
},
splitLine: {
show: false
},
axisLine: {
show: false
},
axisTick: {
show: false
},
max: 110
}],
series: [{
type: "line",
smooth: true,
// showSymbol: false,/
symbolSize: 8,
zlevel: 3,
lineStyle: {
normal: {
color: color[0],
shadowBlur: 3,
shadowColor: hexToRgba(color[0], 0.5),
shadowOffsetY: 8
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[{
offset: 0,
color: hexToRgba(color[0], 0.3)
},
{
offset: 1,
color: hexToRgba(color[0], 0.1)
}
],
false
),
shadowColor: hexToRgba(color[0], 0.1),
shadowBlur: 10
}
},
data: yAxisData1
}]
};
echarts_xltj.setOption(option);
}
var getxlzsData_fun = function (usersUid) {
$.ajax({
type: "post",
url: configData.url.zxUrl+"ashx/ashx/ZYTScoreHandler.ashx",
async: false,
data: {
Action: "GetHistoryScoreStaByUsersUid", UsersUid: usersUid, random: new Date().getTime()
},
dataType: "json",
success: function (res) {
//console.log(res.data);
$("#xlzsecharts_s").empty();
res.data.forEach(function (obj, index, arr) {
var echarts_html = "<div id=\"xlzseecharts_" + index + "\" style=\"width: 400px; height: 300px;\"></div>";
$("#xlzsecharts_s").append(echarts_html);
xlzsecharts_fun(obj.TRAINIGDATES.split(","), obj.ACHIEVEMENTS.split(","), obj.SUBJECTNAME, "xlzseecharts_" + index);
})
}
})
}
//个人档案
var getDataf_grda1 = function (usersUid) {
$.ajax({
type: "post",
url: configData.url.zxUrl+"ashx/ashx/ZYTScoreHandler.ashx",
data: { Action: "GetAverageByUsersUid", UsersUid: usersUid },
dataType: "json",
success: function (result) {
// console.log(result);
$("#zh-grxlda").empty();
result.data.forEach(function (obj, index, arr) {
var echarts_html = "<div id=\"grxldaecharts_" + index + "\" style=\"width: 380px; height: 280px;position: relative;display: inline-block;\"></div>";
$("#zh-grxlda").append(echarts_html);
echarts_fun(obj.NAME, obj.VALUE, "grxldaecharts_" + index);
})
//echarts3(result.data);
}
});
}
form.on('select(Person_ID)', function (data) {
getDataf_grda1(data.value);
getxlzsData_fun(data.value);
});
$.ajax({//获取机构人员
type: "post",
url: configData.url.zxUrl+"ashx/ashx/ZYSysEmpHandler.ashx",
data: { Action: "getOrgEmpGroupSelectByOrgId", OrgId: OrgId },
dataType: "json",
async: false,
success: function (result) {
var personStr = "";
var orgArr = [];
var flag = false;
var firstman = "";
result.data.forEach(function (obj, index, arr) {
if (obj.TYPE == "emp" && firstman == "") {
firstman = obj.ID;
}
if (UserCode == obj.ID) {
flag = true;
}
if (obj.PID == OrgId && (obj.TYPE == "org" || obj.TYPE == "dept")) {
personStr += "<optgroup label=\"" + obj.NAME + "\">";
var pid = obj.ID;
result.data.forEach(function (obj2) {
if (obj2.TYPE == "emp" && obj2.PID == pid) {
if (orgArr.indexOf(obj2.ID) == -1) {
orgArr.push(obj2.ID);
personStr += "<option value='" + obj2.ID + "'>" + obj2.NAME + "</option>";
}
}
})
personStr += "</optgroup>";
}
else {
if (orgArr.indexOf(obj.ID) == -1) {
orgArr.push(obj.ID);
personStr += "<option value='" + obj.ID + "'>" + obj.NAME + "</option>";
}
}
})
//var personStr = "";
//var flag = false;
//var firstman = "";
//result.data.forEach(function (obj, index, arr) {
// if (obj.ID == OrgId) {
// var pid = obj.ID;
// personStr += "<optgroup label=\"" + obj.NAME + "\">";
// result.data.forEach(function (obj2, index2, arr2) {
// if (obj2.PID != '0' && firstman == "") {
// firstman = obj2.ID;
// }
// if (UserCode == obj2.ID) {
// flag = true;
// }
// if ((obj2.TYPE == "org" || obj2.TYPE == "dept") && obj2.ID != pid) {
// var pid2 = obj2.ID;
// personStr += "<optgroup label=\"" + obj2.NAME + "\">";
// result.data.forEach(function (obj3) {
// if (pid2 == obj3.PID) {
// personStr += "<option value='" + obj3.ID + "'>" + obj3.NAME + "</option>";
// }
// })
// } else {
// 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 echarts_fun = function (name, value, echartsId) {
var echarts_xltj = echarts.init(document.getElementById(echartsId));
var labelData = [];
var labelData1 = [];
for (var i = 0; i < 80; ++i) {
labelData.push({
value: 1,
name: i,
itemStyle: {
normal: {
color: 'rgba(0,209,228,0)',
}
}
});
}
for (var i = 0; i < labelData.length; ++i) {
if (labelData[i].name < 15) {
labelData[i].itemStyle = {
normal: {
color: new echarts.graphic.LinearGradient(
0, 1, 0, 0,
[{
offset: 0,
color: '#6dfbff'
},
{
offset: 1,
color: '#02aeff'
}
]
)
},
}
}
}
for (var i = 0; i < 80; ++i) {
labelData1.push({
value: 1,
name: i,
itemStyle: {
normal: {
color: 'rgba(0,209,228,0)',
}
}
});
}
for (var i = 0; i < labelData1.length; ++i) {
if (labelData1[i].name < 80) {
labelData1[i].itemStyle = {
normal: {
color: '#464451',
},
}
}
}
function Pie() {
var dataArr = [];
for (var i = 0; i < 100; i++) {
if (i % 10 === 0) {
dataArr.push({
name: (i + 1).toString(),
value: 30,
itemStyle: {
normal: {
color: "rgba(0,255,255,1)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)",
}
}
})
} else {
dataArr.push({
name: (i + 1).toString(),
value: 100,
itemStyle: {
normal: {
color: "rgba(0,0,0,0)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
}
})
}
}
return dataArr
}
function Pie1() {
var dataArr = [];
for (var i = 0; i < 100; i++) {
if (i % 5 === 0) {
dataArr.push({
name: (i + 1).toString(),
value: 20,
itemStyle: {
normal: {
color: "rgba(0,255,255,1)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
}
})
} else {
dataArr.push({
name: (i + 1).toString(),
value: 100,
itemStyle: {
normal: {
color: "rgba(0,0,0,0)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
}
})
}
}
return dataArr
}
function Pie2() {
var dataArr = [];
for (var i = 0; i < 100; i++) {
if (i % 5 === 0) {
dataArr.push({
name: (i + 1).toString(),
value: 20,
itemStyle: {
normal: {
color: "rgba(0,255,255,.3)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
}
})
} else {
dataArr.push({
name: (i + 1).toString(),
value: 100,
itemStyle: {
normal: {
color: "rgba(0,0,0,0)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
}
})
}
}
return dataArr
}
function Pie3() {
var dataArr = [];
for (var i = 0; i < 100; i++) {
if (i % 10 === 0) {
dataArr.push({
name: (i + 1).toString(),
value: 30,
itemStyle: {
normal: {
color: "rgba(0,255,255,.5)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
}
})
} else {
dataArr.push({
name: (i + 1).toString(),
value: 100,
itemStyle: {
normal: {
color: "rgba(0,0,0,0)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
}
})
}
}
return dataArr
}
option = {
title: [{
text: value,
x: '48%',
y: '32%',
textAlign: 'center',
textStyle: {
fontSize: 24,
fontWeight: 800,
color: '#01ffea',
textAlign: 'center',
},
}, {
text: '平均分',
left: '43%',
top: '42%',
textStyle: {
fontSize: 14,
fontWeight: '400',
color: '#dafefe',
textAlign: 'left', //right
},
}, {
text: name,
left: '50%',
top: '77%',
textAlign: 'center',
textStyle: {
fontSize: '16',
fontWeight: '400',
color: '#00c0ff',
textAlign: 'center',
},
}],
polar: {
radius: ['47%', '42%'],
center: ['50%', '40%'],
},
angleAxis: {
max: 100,
show: false,
startAngle: 0,
},
radiusAxis: {
type: 'category',
show: true,
axisLabel: {
show: false,
},
axisLine: {
show: false,
},
axisTick: {
show: false
},
},
series: [
//里第二圈
{
name: '',
type: 'bar',
roundCap: true, //圆角
barWidth: 38,
showBackground: true,
backgroundStyle: {
color: '#464451',
},
data: [75],
coordinateSystem: 'polar',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
offset: 0,
color: '#0ff'
}, {
offset: 1,
color: '#02aeff'
}]),
}
}
},
//齿轮蓝圈
{
hoverAnimation: false,
name: 'bb',
type: 'pie',
z: 2,
data: labelData,
radius: ['50%', '60%'],
center: ['50%', '40%'],
zlevel: -2,
itemStyle: {
normal: {
borderColor: '#222222',
borderWidth: 1,
}
},
label: {
normal: {
position: 'inside',
show: false,
}
},
},
//齿轮灰圈
{
hoverAnimation: false,
type: 'pie',
z: 1,
data: labelData1,
radius: ['50%', '60%'],
center: ['50%', '40%'],
zlevel: -2,
itemStyle: {
normal: {
borderColor: '#222222',
borderWidth: 1,
}
},
label: {
normal: {
position: 'inside',
show: false,
}
},
},
//最里圈
{
type: 'pie',
radius: ['38%', '37%'],
center: ['50%', '40%'],
data: [{
hoverOffset: 1,
value: 100,
name: '',
itemStyle: {
color: '#ff6189',
},
label: {
show: false
},
labelLine: {
normal: {
smooth: true,
lineStyle: {
width: 0
}
}
},
hoverAnimation: false,
},
{
label: {
show: false
},
labelLine: {
normal: {
smooth: true,
lineStyle: {
width: 0
}
}
},
value: 100 - 75,
hoverAnimation: false,
itemStyle: {
color: '#3c3a48',
},
}
]
},
//外圈装饰
{
type: 'pie',
zlevel: 0,
silent: true,
radius: ['65%', '63.5%'],
center: ['50%', '40%'],
z: 1,
label: {
normal: {
show: false
},
},
labelLine: {
normal: {
show: false
}
},
data: Pie()
},
{
type: 'pie',
zlevel: 0,
silent: true,
startAngle: -150,
radius: ['63.5%', '62%'],
center: ['50%', '40%'],
z: 1,
label: {
normal: {
show: false
},
},
labelLine: {
normal: {
show: false
}
},
data: Pie3()
},
{
type: 'pie',
zlevel: 0,
silent: true,
startAngle: -140,
radius: ['65%', '63.5%'],
center: ['50%', '40%'],
z: 1,
label: {
normal: {
show: false
},
},
labelLine: {
normal: {
show: false
}
},
data: Pie()
},
{
type: 'pie',
zlevel: 0,
silent: true,
radius: ['63%', '61.5%'],
center: ['50%', '40%'],
z: 1,
label: {
normal: {
show: false
},
},
labelLine: {
normal: {
show: false
}
},
data: Pie1()
},
{
type: 'pie',
zlevel: 0,
silent: true,
startAngle: -140,
radius: ['63%', '61.5%'],
center: ['50%', '40%'],
z: 1,
label: {
normal: {
show: false
},
},
labelLine: {
normal: {
show: false
}
},
data: Pie2()
},
{
type: 'pie',
zlevel: 0,
silent: true,
startAngle: -147.5,
radius: ['63%', '61.5%'],
center: ['50%', '40%'],
z: 1,
label: {
normal: {
show: false
},
},
labelLine: {
normal: {
show: false
}
},
data: Pie2()
},
]
};
//console.log(option)
// 使用刚指定的配置项和数据显示图表。
echarts_xltj.setOption(option);
}
var option_KMTJ = {
series: [{
type: 'gauge',
center: ['50%', '50%'],
startAngle: 180,
endAngle: 0,
min: 0,
name: '合格率',
max: 100,
splitNumber: 5,
itemStyle: {
color: '#02BCFF',
shadowColor: 'rgba(0,138,255,0.45)',
shadowBlur: 10,
shadowOffsetX: 2,
shadowOffsetY: 2
},
progress: {
show: true,
roundCap: true,
width: 5
},
pointer: {
icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
length: '55%',
width: 5,
offsetCenter: [0, '5%']
},
axisLine: {
roundCap: true,
lineStyle: {
width: 5
}
},
axisTick: {
splitNumber: 2,
lineStyle: {
width: 2,
color: '#999'
}
},
splitLine: {
length: 5,
lineStyle: {
width: 3,
color: '#999'
}
},
axisLabel: {
distance: 5,
color: '#999',
fontSize: 14
},
title: {
show: false
},
detail: {
//backgroundColor: '#fff',
borderColor: 'red',
borderWidth: 0,
width: '100%',
lineHeight: 50,
height: 50,
borderRadius: 8,
offsetCenter: [0, '55%'],
valueAnimation: true,
formatter: function (value) {
return '{value|' + value.toFixed(0) + '}{unit|%}';
},
rich: {
value: {
fontSize: 30,
fontWeight: 'bolder',
color: 'red'
},
unit: {
fontSize: 25,
color: 'red',
padding: [0, 0, -1, 3]
}
}
},
data: [{
value: 80
}]
}]
};
//训练科目切换
form.on('select(sel_Sub)', function (data) {
//UpdSub(data.value);
selSub = data.value;
UpdShowHGL();
});
//获取个人训练项目
function UpdSub(pemOrgId) {
$.ajax({
type: "post",
url: configData.url.zxUrl+"ashx/ashx/ZYTPlanHandler.ashx",
data: { Action: "GetSubject", OrgId: pemOrgId },
async: false,
dataType: "json",
success: function (result) {
//console.log(result);
var orgStr = '<option value="">--请选择--</option>';
result.data.forEach(function (obj, index, arr) {
orgStr += "<option value='" + obj.ID + "'>" + obj.NAME + "</option>";
});
//console.log(orgStr);
$("#sel_Sub").html(orgStr);
//$("#sel_Sub").append(orgStr);
form.render('select');
$("#sel_Sub").siblings("div.layui-form-select").find('dl').find("dd[lay-value='" + pemOrgId + "']").click();
form.render('select');
}
})
};
function SetKMTJ(kmDiv, val, colorStr, showName) {
var echarts_kmtj = echarts.init(document.getElementById(kmDiv));
option_KMTJ.series[0].itemStyle.color = colorStr;
option_KMTJ.series[0].detail.formatter = function (value) {
return '{value|' + showName + value.toFixed(0) + '}{unit|%}';
};
option_KMTJ.series[0].data[0].value = val;
option_KMTJ.series[0].detail.rich.value.color = colorStr;
option_KMTJ.series[0].detail.rich.unit.color = colorStr;
//alert(option_KMTJ.series[0].detail.rich.unit.color);
//console.log('打印');
//console.log(option_KMTJ);
echarts_kmtj.setOption(option_KMTJ);
}
var index = 0;
//选定的查询优良率时间
var selTime = '';
//选定的组织ID
var selOrg = '';
//选定的科目ID
var selSub = '';
function UpdShowHGL() {
if (selSub.length < 1 || selOrg.length < 1 || selTime.length < 1) {
SetKMTJ('divKmtj1', 0, 'red', '满分率:');
SetKMTJ('divKmtj2', 0, '#FFFF00', '优秀率:');
SetKMTJ('divKmtj3', 0, '#7CFC00', '良好率:');
SetKMTJ('divKmtj4', 0, '#00BFFF', '达标率:');
SetKMTJ('divKmtj5', 0, '#696969', '不达标率:');
} else {
$.ajax({
type: "post",
url: configData.url.zxUrl+"ashx/ashx/ZYTScoreHandler.ashx",
data: { Action: "GetHomeResult", OrgId: selOrg, SubId: selSub, selTime: selTime },
dataType: "json",
success: function (result) {
//console.log(result);
SetKMTJ('divKmtj1', result.data.mf, 'red', '满分率:');
SetKMTJ('divKmtj2', result.data.yx, '#FFFF00', '优秀率:');
SetKMTJ('divKmtj3', result.data.lh, '#7CFC00', '良好率:');
SetKMTJ('divKmtj4', result.data.db, '#00BFFF', '达标率:');
SetKMTJ('divKmtj5', result.data.bdb, '#696969', '不达标率:');
}
});
}
}
})
</script>