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.
1151 lines
81 KiB
1151 lines
81 KiB
9 months ago
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8" />
|
||
|
|
<title></title>
|
||
|
|
<link href="home/css/style.css" rel="stylesheet" media="all">
|
||
|
|
<script src="home/js/jquery-1.js"></script>
|
||
|
|
<script src="home/js/echarts.min.js"></script>
|
||
|
|
<!-- 数字计数器 -->
|
||
|
|
<link type="text/css" href="home/css/globle.css" rel="stylesheet" />
|
||
|
|
<script type="text/javascript" src="home/js/num.js"></script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<script>
|
||
|
|
var OrgId = "";
|
||
|
|
if (window.sessionStorage.getItem("userInfo") != null) {
|
||
|
|
userInfo = window.sessionStorage.getItem("userInfo");
|
||
|
|
} else {
|
||
|
|
var kn_root_c_cookie = $.cookie("kn_root_cookie");
|
||
|
|
var kn_root_c_cookie_json = "";
|
||
|
|
if (kn_root_c_cookie != undefined) {
|
||
|
|
kn_root_c_cookie_json = JSON.parse(kn_root_c_cookie)
|
||
|
|
}
|
||
|
|
if (kn_root_c_cookie != "" && kn_root_c_cookie != null && typeof kn_root_c_cookie == 'string') {
|
||
|
|
$.ajax({
|
||
|
|
type: "post",
|
||
|
|
url: "../ashx/SysUserHandler.ashx",
|
||
|
|
data: {
|
||
|
|
Action: "UserInfo2",
|
||
|
|
UsersUid: kn_root_c_cookie_json.usersUid,
|
||
|
|
random: new Date().getTime()//随机参数
|
||
|
|
},
|
||
|
|
async: false,
|
||
|
|
dataType: "json",
|
||
|
|
success: function (res) {
|
||
|
|
if (res.code == 1) {
|
||
|
|
userInfo = JSON.stringify(res.data);
|
||
|
|
window.sessionStorage.setItem("userInfo", JSON.stringify(res.data));
|
||
|
|
} else {
|
||
|
|
alert(res.msg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
} else {
|
||
|
|
alert("您未登录或登录超时请登录后使用");
|
||
|
|
window.close();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
OrgId = JSON.parse(window.sessionStorage.getItem("userInfo")).OrgID;
|
||
|
|
</script>
|
||
|
|
<div class="content clearfix">
|
||
|
|
<div class="con-left fl">
|
||
|
|
<!-- 车辆管理 -->
|
||
|
|
<div class="content-div fl">
|
||
|
|
<div class="content-div-tit">车辆管理</div>
|
||
|
|
<div class="content-con">
|
||
|
|
<div class="yqgl-nums">
|
||
|
|
<div class="zongshu fl">今日车辆总数</div>
|
||
|
|
<div id="dataNums"> </div>
|
||
|
|
<div id="dataNums2"> </div>
|
||
|
|
|
||
|
|
<div class="danwei fl">辆</div>
|
||
|
|
</div>
|
||
|
|
<div class="yqgl-cl">
|
||
|
|
<ul>
|
||
|
|
<li>
|
||
|
|
<div class="yqgl-cl-num vehicleoffice"></div>
|
||
|
|
<div class="yqgl-cl-name">公务车辆</div>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<div class="yqgl-cl-num vehicleduty"></div>
|
||
|
|
<div class="yqgl-cl-name">执勤车辆</div>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<div class="yqgl-cl-num vehiclesj"></div>
|
||
|
|
<div class="yqgl-cl-name">地方车辆</div>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
function homeCarSta() {
|
||
|
|
$.post("../ashx/CarHandler.ashx", {
|
||
|
|
Action: "homeCarSta",
|
||
|
|
Org_Id: OrgId,
|
||
|
|
random: new Date().getTime()//随机参数
|
||
|
|
}, function (res) {
|
||
|
|
if (res.code == 1) {
|
||
|
|
var num = res.data[0];
|
||
|
|
var vehicleoffice = num.GW;
|
||
|
|
$(".vehicleoffice").html(vehicleoffice);
|
||
|
|
var vehicleduty = num.ZQ;
|
||
|
|
$(".vehicleduty").html(vehicleduty);
|
||
|
|
var vehiclesj = num.SJ;
|
||
|
|
$(".vehiclesj").html(vehiclesj);
|
||
|
|
var countSum = vehicleoffice + vehicleduty + vehiclesj;
|
||
|
|
$("#dataNums").rollNumDaq({
|
||
|
|
deVal: countSum
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
|
||
|
|
}
|
||
|
|
}, "JSON");
|
||
|
|
}
|
||
|
|
homeCarSta();
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- 人员信息 -->
|
||
|
|
<div class="content-div fl" style=" margin-left: 20px; width: calc(33.33% - 40px);">
|
||
|
|
<div class="content-div-tit">人员信息</div>
|
||
|
|
<div class="content-con">
|
||
|
|
<div class="yqgl-nums">
|
||
|
|
<div class="zongshu fl">今日人员总数</div>
|
||
|
|
<div id="dataNumsa"> </div>
|
||
|
|
<div id="dataNums2"> </div>
|
||
|
|
<div class="danwei fl">人</div>
|
||
|
|
</div>
|
||
|
|
<div id="ryxx" style="width: 100%; height: calc(100% - 48px);"></div>
|
||
|
|
<script type="text/javascript">
|
||
|
|
function personSta() {
|
||
|
|
$.post("../ashx/SysEmpHandler.ashx", {
|
||
|
|
Action: "personSta",
|
||
|
|
Org_Id: OrgId,
|
||
|
|
random: new Date().getTime()//随机参数
|
||
|
|
}, function (res) {
|
||
|
|
|
||
|
|
if (res.code == 1) {
|
||
|
|
var num = res.data[0];
|
||
|
|
var numtotal = num.ZG + num.JY + num.XJ + num.QJ + num.XX + num.PX + num.BG + num.ZY + num.CC + num.CG + num.ZLBD + num.QT + num.KONG;
|
||
|
|
var zgnum = num.ZG;
|
||
|
|
var lgnum = numtotal - num.ZG;
|
||
|
|
|
||
|
|
$("#dataNumsa").rollNumDaq({
|
||
|
|
deVal: numtotal
|
||
|
|
});
|
||
|
|
|
||
|
|
// 基于准备好的dom，初始化echarts实例
|
||
|
|
var myChart = echarts.init(document.getElementById('ryxx'));
|
||
|
|
var res = [{
|
||
|
|
"label": "在岗",
|
||
|
|
"value": zgnum
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"label": "未在岗",
|
||
|
|
"value": lgnum
|
||
|
|
}
|
||
|
|
]
|
||
|
|
|
||
|
|
var border =
|
||
|
|
'data:image/png;base64,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
|
||
|
|
var man =
|
||
|
|
'home/img/onduty.png';
|
||
|
|
var woman =
|
||
|
|
'home/img/leave.png';
|
||
|
|
var color = ['#00FFFF', 'rgba(196,36,255,1)'];
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
var data = [];
|
||
|
|
for (var i = 0; i < res.length; i++) {
|
||
|
|
data.push({
|
||
|
|
value: res[i].value,
|
||
|
|
name: res[i].label,
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
borderWidth: 5,
|
||
|
|
shadowBlur: 20,
|
||
|
|
borderColor: color[i],
|
||
|
|
shadowColor: color[i]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
value: res[0].value / 10,
|
||
|
|
name: '',
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
label: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
labelLine: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
color: 'rgba(0, 0, 0, 0)',
|
||
|
|
borderColor: 'rgba(0, 0, 0, 0)',
|
||
|
|
borderWidth: 0
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
option = {
|
||
|
|
color,
|
||
|
|
graphic: {
|
||
|
|
elements: [{
|
||
|
|
type: 'image',
|
||
|
|
z: 3,
|
||
|
|
style: {
|
||
|
|
image: border,
|
||
|
|
width: 150,
|
||
|
|
height: 150
|
||
|
|
},
|
||
|
|
left: 'center',
|
||
|
|
top: 'center',
|
||
|
|
position: [100, 100]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
type: 'image',
|
||
|
|
z: 3,
|
||
|
|
style: {
|
||
|
|
image: man,
|
||
|
|
width: 56,
|
||
|
|
height: 56
|
||
|
|
},
|
||
|
|
left: '38%',
|
||
|
|
top: 'center'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
type: 'image',
|
||
|
|
z: 3,
|
||
|
|
style: {
|
||
|
|
image: woman,
|
||
|
|
width: 56,
|
||
|
|
height: 56
|
||
|
|
},
|
||
|
|
right: '38%',
|
||
|
|
top: 'center'
|
||
|
|
}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
toolbox: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
series: [{
|
||
|
|
name: '',
|
||
|
|
type: 'pie',
|
||
|
|
clockWise: false,
|
||
|
|
radius: [90, 95],
|
||
|
|
hoverAnimation: false,
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
label: {
|
||
|
|
show: true,
|
||
|
|
fontSize: 16,
|
||
|
|
formatter(params) {
|
||
|
|
return params.name ?
|
||
|
|
params.name + '\n' + params.value + '人' :
|
||
|
|
'';
|
||
|
|
}
|
||
|
|
},
|
||
|
|
labelLine: {
|
||
|
|
width: 10,
|
||
|
|
length: 30,
|
||
|
|
length2: 30,
|
||
|
|
show: true,
|
||
|
|
color: '#00ffff'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data
|
||
|
|
}]
|
||
|
|
};
|
||
|
|
// 使用刚指定的配置项和数据显示图表。
|
||
|
|
myChart.setOption(option);
|
||
|
|
} else {
|
||
|
|
|
||
|
|
}
|
||
|
|
}, "JSON");
|
||
|
|
}
|
||
|
|
personSta();
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- 报警信息 -->
|
||
|
|
<div class="content-div fr" style="margin-right: 0; margin-left: 20px;">
|
||
|
|
<div class="content-div-tit">报警信息</div>
|
||
|
|
<div class="content-con">
|
||
|
|
<div id="bjxx" style="width: 100%; height: 100%;"></div>
|
||
|
|
<script type="text/javascript">
|
||
|
|
function homeAlarmSta() {
|
||
|
|
var data = [];
|
||
|
|
$.post("../ashx/AlarmDataHandler.ashx", {
|
||
|
|
Action: "homeAlarmSta",
|
||
|
|
Org_Id: OrgId,
|
||
|
|
random: new Date().getTime()//随机参数
|
||
|
|
}, function (res) {
|
||
|
|
if (res.code == 1) {
|
||
|
|
var data = res.data[0];
|
||
|
|
|
||
|
|
// 基于准备好的dom，初始化echarts实例
|
||
|
|
var myChart = echarts.init(document.getElementById('bjxx'));
|
||
|
|
|
||
|
|
var category = [{
|
||
|
|
name: "人员不假外出",
|
||
|
|
value: data.PCQWG
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: "人员超期未归",
|
||
|
|
value: data.PFFWC
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: "车辆违规外出",
|
||
|
|
value: data.CCQWG
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: "车辆超时未归",
|
||
|
|
value: data.CCQWG
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: "车辆超速报警",
|
||
|
|
value: data.CCS
|
||
|
|
}
|
||
|
|
];
|
||
|
|
var compare = function (prop) {
|
||
|
|
return function (obj1, obj2) {
|
||
|
|
var val1 = obj1[prop];
|
||
|
|
var val2 = obj2[prop];
|
||
|
|
if (!isNaN(Number(val1)) && !isNaN(Number(val2))) {
|
||
|
|
val1 = Number(val1);
|
||
|
|
val2 = Number(val2);
|
||
|
|
}
|
||
|
|
if (val1 < val2) {
|
||
|
|
return -1;
|
||
|
|
} else if (val1 > val2) {
|
||
|
|
return 1;
|
||
|
|
} else {
|
||
|
|
return 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
category.sort(compare("value"));
|
||
|
|
var total = category[0].value == 0 ? 5 : category[0].value + 10;
|
||
|
|
|
||
|
|
var datas = [];
|
||
|
|
category.forEach(value => {
|
||
|
|
datas.push(value.value);
|
||
|
|
});
|
||
|
|
option = {
|
||
|
|
xAxis: {
|
||
|
|
max: total,
|
||
|
|
splitLine: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisLine: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisTick: {
|
||
|
|
show: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
left: 40,
|
||
|
|
top: 20, // 设置条形图的边距
|
||
|
|
right: 60,
|
||
|
|
bottom: 20
|
||
|
|
},
|
||
|
|
yAxis: [{
|
||
|
|
type: "category",
|
||
|
|
inverse: true,
|
||
|
|
data: category,
|
||
|
|
axisLine: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisTick: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
show: false
|
||
|
|
}
|
||
|
|
}],
|
||
|
|
series: [{
|
||
|
|
// 内
|
||
|
|
type: "bar",
|
||
|
|
barWidth: 14,
|
||
|
|
|
||
|
|
legendHoverLink: false,
|
||
|
|
silent: true,
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: function (params) {
|
||
|
|
var color;
|
||
|
|
if (params.dataIndex == 19) {
|
||
|
|
color = {
|
||
|
|
type: "linear",
|
||
|
|
x: 0,
|
||
|
|
y: 0,
|
||
|
|
x2: 1,
|
||
|
|
y2: 0,
|
||
|
|
colorStops: [{
|
||
|
|
offset: 0,
|
||
|
|
color: "#EB5118" // 0% 处的颜色
|
||
|
|
},
|
||
|
|
{
|
||
|
|
offset: 1,
|
||
|
|
color: "#F21F02" // 100% 处的颜色
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
} else if (params.dataIndex == 18) {
|
||
|
|
color = {
|
||
|
|
type: "linear",
|
||
|
|
x: 0,
|
||
|
|
y: 0,
|
||
|
|
x2: 1,
|
||
|
|
y2: 0,
|
||
|
|
colorStops: [{
|
||
|
|
offset: 0,
|
||
|
|
color: "#FFA048" // 0% 处的颜色
|
||
|
|
},
|
||
|
|
{
|
||
|
|
offset: 1,
|
||
|
|
color: "#B25E14" // 100% 处的颜色
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
} else if (params.dataIndex == 17) {
|
||
|
|
color = {
|
||
|
|
type: "linear",
|
||
|
|
x: 0,
|
||
|
|
y: 0,
|
||
|
|
x2: 1,
|
||
|
|
y2: 0,
|
||
|
|
colorStops: [{
|
||
|
|
offset: 0,
|
||
|
|
color: "#F8E972" // 0% 处的颜色
|
||
|
|
},
|
||
|
|
{
|
||
|
|
offset: 1,
|
||
|
|
color: "#E5C206" // 100% 处的颜色
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
color = {
|
||
|
|
type: "linear",
|
||
|
|
x: 0,
|
||
|
|
y: 0,
|
||
|
|
x2: 1,
|
||
|
|
y2: 0,
|
||
|
|
colorStops: [{
|
||
|
|
offset: 0,
|
||
|
|
color: "#147e9d" // 0% 处的颜色
|
||
|
|
},
|
||
|
|
{
|
||
|
|
offset: 1,
|
||
|
|
color: "#03eefd" // 100% 处的颜色
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return color;
|
||
|
|
},
|
||
|
|
}
|
||
|
|
},
|
||
|
|
label: {
|
||
|
|
normal: {
|
||
|
|
show: true,
|
||
|
|
position: [0, -24],
|
||
|
|
formatter: "{b}",
|
||
|
|
textStyle: {
|
||
|
|
color: "#fff",
|
||
|
|
fontSize: 14
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data: category,
|
||
|
|
z: 1,
|
||
|
|
animationEasing: "elasticOut"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
// 分隔
|
||
|
|
type: "pictorialBar",
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: "#061348"
|
||
|
|
}
|
||
|
|
},
|
||
|
|
symbolRepeat: "fixed",
|
||
|
|
symbolMargin: 6,
|
||
|
|
symbol: "rect",
|
||
|
|
symbolClip: true,
|
||
|
|
symbolSize: [1, 17],
|
||
|
|
symbolPosition: "start",
|
||
|
|
symbolOffset: [1, -1],
|
||
|
|
symbolBoundingData: this.total,
|
||
|
|
data: category,
|
||
|
|
z: 2,
|
||
|
|
animationEasing: "elasticOut"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
// 外边框
|
||
|
|
type: "pictorialBar",
|
||
|
|
symbol: "rect",
|
||
|
|
symbolBoundingData: total,
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: "none"
|
||
|
|
}
|
||
|
|
},
|
||
|
|
label: {
|
||
|
|
normal: {
|
||
|
|
formatter: (params) => {
|
||
|
|
var text;
|
||
|
|
if (params.dataIndex == 1) {
|
||
|
|
text = '{f| ' + params.data + '}';
|
||
|
|
} else if (params.dataIndex == 2) {
|
||
|
|
text = '{f| ' + params.data + '}';
|
||
|
|
} else if (params.dataIndex == 3) {
|
||
|
|
text = '{f| ' + params.data + '}';
|
||
|
|
} else {
|
||
|
|
text = '{f| ' + params.data + '}';
|
||
|
|
}
|
||
|
|
return text;
|
||
|
|
},
|
||
|
|
rich: {
|
||
|
|
f: {
|
||
|
|
color: "#03eefd",
|
||
|
|
fontSize: 14
|
||
|
|
}
|
||
|
|
},
|
||
|
|
position: 'right',
|
||
|
|
distance: 0, // 向右偏移位置
|
||
|
|
show: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data: datas,
|
||
|
|
z: 0,
|
||
|
|
animationEasing: "elasticOut"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: "外框",
|
||
|
|
type: "bar",
|
||
|
|
barGap: "-120%", // 设置外框粗细
|
||
|
|
data: [total, total, total, total, total, total, total, total, total, total, total, total, total, total,
|
||
|
|
total,
|
||
|
|
total, total, total, total, total
|
||
|
|
],
|
||
|
|
barWidth: 20,
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: "transparent", // 填充色
|
||
|
|
barBorderColor: "#1C4B8E", // 边框色
|
||
|
|
barBorderWidth: 1, // 边框宽度
|
||
|
|
// barBorderRadius: 0, //圆角半径
|
||
|
|
label: {
|
||
|
|
// 标签显示位置
|
||
|
|
show: false,
|
||
|
|
position: "top" // insideTop 或者横向的 insideLeft
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
z: 0
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
// 使用刚指定的配置项和数据显示图表。
|
||
|
|
myChart.setOption(option);
|
||
|
|
} else {
|
||
|
|
}
|
||
|
|
}, "JSON");
|
||
|
|
}
|
||
|
|
homeAlarmSta();
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="content-div fl" style="margin-top: 18px; margin-bottom: 0;">
|
||
|
|
<div class="content-div-tit">请假、用车统计</div>
|
||
|
|
<div class="content-con">
|
||
|
|
<div id="qjyctj" style="width: 100%; height: 100%;"></div>
|
||
|
|
<script type="text/javascript">
|
||
|
|
function homeleaveAndCarSta() {
|
||
|
|
var myChartLeaveCar = echarts.init(document.getElementById('qjyctj'));
|
||
|
|
var optionLeaveCar = {
|
||
|
|
grid: {
|
||
|
|
left: "3%",
|
||
|
|
right: "5%",
|
||
|
|
bottom: "2%",
|
||
|
|
top: "14%",
|
||
|
|
containLabel: true
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
|
||
|
|
trigger: 'axis',
|
||
|
|
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3)',
|
||
|
|
textStyle: {
|
||
|
|
color: '#fff',
|
||
|
|
},
|
||
|
|
axisPointer: {
|
||
|
|
type: 'shadow'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
|
||
|
|
top: '0%',
|
||
|
|
left: '35%',
|
||
|
|
itemWidth: 12,
|
||
|
|
itemHeight: 4,
|
||
|
|
data: ['请假次数', '用车次数'],
|
||
|
|
textStyle: {
|
||
|
|
color: '#fff',
|
||
|
|
}
|
||
|
|
},
|
||
|
|
xAxis: {
|
||
|
|
type: "category",
|
||
|
|
boundaryGap: true,
|
||
|
|
show: true,
|
||
|
|
axisLabel: {
|
||
|
|
interval: 0,
|
||
|
|
// show: true,
|
||
|
|
textStyle: {
|
||
|
|
color: "#0bbad0",
|
||
|
|
fontSize: 12
|
||
|
|
},
|
||
|
|
rotate: 20
|
||
|
|
},
|
||
|
|
axisLine: {
|
||
|
|
lineStyle: {
|
||
|
|
color: '#4a646f',
|
||
|
|
|
||
|
|
}
|
||
|
|
},
|
||
|
|
axisTick: {
|
||
|
|
show: true,
|
||
|
|
alignWithLabel: true,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
yAxis: {
|
||
|
|
type: 'value',
|
||
|
|
splitNumber: 5,
|
||
|
|
axisLabel: {
|
||
|
|
textStyle: {
|
||
|
|
color: '#0bbad0',
|
||
|
|
fontSize: 12
|
||
|
|
}
|
||
|
|
},
|
||
|
|
axisLine: {
|
||
|
|
lineStyle: {
|
||
|
|
color: 'transparent',
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
splitLine: {
|
||
|
|
show: true,
|
||
|
|
lineStyle: {
|
||
|
|
color: '#4a646f',
|
||
|
|
type: "dashed"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
series: [{
|
||
|
|
name: '请假次数',
|
||
|
|
type: 'bar',
|
||
|
|
// smooth: true,
|
||
|
|
/*stack: '使用情况',*/
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: "rgba(3,238,253,0.9)"
|
||
|
|
},
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
}, {
|
||
|
|
name: '用车次数',
|
||
|
|
type: 'bar',
|
||
|
|
// smooth: true,
|
||
|
|
/*stack: '使用情况',*/
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: "rgba(41,138,231,0.9)"
|
||
|
|
},
|
||
|
|
},
|
||
|
|
|
||
|
|
}]
|
||
|
|
};
|
||
|
|
myChartLeaveCar.setOption(optionLeaveCar);
|
||
|
|
|
||
|
|
//请假
|
||
|
|
var xdata = [], y1data = [], y2data = [];
|
||
|
|
$.post("../ashx/OaLeaveHandler.ashx", {
|
||
|
|
Action: "homeLeaveSta",
|
||
|
|
Org_Id: OrgId,
|
||
|
|
random: new Date().getTime()//随机参数
|
||
|
|
}, function (res) {
|
||
|
|
if (res.code == 1) {
|
||
|
|
res.data.forEach(function (value, index, array) {
|
||
|
|
xdata.push(value.RIQI);
|
||
|
|
y1data.push(value.NUM);
|
||
|
|
});
|
||
|
|
optionLeaveCar.xAxis.data = xdata;
|
||
|
|
optionLeaveCar.series[0].data = y1data;
|
||
|
|
myChartLeaveCar.setOption(optionLeaveCar);
|
||
|
|
} else {
|
||
|
|
}
|
||
|
|
}, "JSON");
|
||
|
|
//用车
|
||
|
|
var data = [];
|
||
|
|
$.post("../ashx/CarApplyHandler.ashx", {
|
||
|
|
Action: "homeApplySta",
|
||
|
|
Org_Id: OrgId,
|
||
|
|
random: new Date().getTime()//随机参数
|
||
|
|
}, function (res) {
|
||
|
|
if (res.code == 1) {
|
||
|
|
res.data.forEach(function (value, index, array) {
|
||
|
|
y2data.push(value.NUM);
|
||
|
|
});
|
||
|
|
optionLeaveCar.series[1].data = y2data;
|
||
|
|
myChartLeaveCar.setOption(optionLeaveCar);
|
||
|
|
} else {
|
||
|
|
}
|
||
|
|
}, "JSON");
|
||
|
|
}
|
||
|
|
homeleaveAndCarSta();
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="content-div fl" style="width: calc(33.33% - 40px); margin-left: 20px;margin-top: 18px; margin-bottom: 0;">
|
||
|
|
<div class="content-div-tit">查铺实到率</div>
|
||
|
|
<div class="content-con">
|
||
|
|
<div id="cpsdl" style="width: 100%; height: 100%;"></div>
|
||
|
|
<script type="text/javascript">
|
||
|
|
//查铺
|
||
|
|
// 基于准备好的dom，初始化echarts实例
|
||
|
|
var myChartInspect = echarts.init(document.getElementById('cpsdl'));
|
||
|
|
var chartData1 = [], chartData2 = [], chartData3 = [], chartData4 = [];
|
||
|
|
var optionInspect = {
|
||
|
|
grid: {
|
||
|
|
left: "3%",
|
||
|
|
right: "5%",
|
||
|
|
bottom: "2%",
|
||
|
|
top: "14%",
|
||
|
|
containLabel: true
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
|
||
|
|
trigger: 'axis',
|
||
|
|
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3)',
|
||
|
|
textStyle: {
|
||
|
|
color: '#fff',
|
||
|
|
},
|
||
|
|
axisPointer: {
|
||
|
|
type: 'shadow'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
|
||
|
|
top: '0%',
|
||
|
|
left: '35%',
|
||
|
|
itemWidth: 12,
|
||
|
|
itemHeight: 4,
|
||
|
|
data: ['总数', '实到', '缺席'],
|
||
|
|
textStyle: {
|
||
|
|
color: '#fff',
|
||
|
|
}
|
||
|
|
},
|
||
|
|
xAxis: {
|
||
|
|
type: "category",
|
||
|
|
boundaryGap: true,
|
||
|
|
show: true,
|
||
|
|
axisLabel: {
|
||
|
|
interval: 0,
|
||
|
|
// show: true,
|
||
|
|
textStyle: {
|
||
|
|
color: "#0bbad0",
|
||
|
|
fontSize: 10
|
||
|
|
},
|
||
|
|
rotate: 20
|
||
|
|
},
|
||
|
|
axisLine: {
|
||
|
|
lineStyle: {
|
||
|
|
color: '#4a646f',
|
||
|
|
|
||
|
|
}
|
||
|
|
},
|
||
|
|
axisTick: {
|
||
|
|
show: true,
|
||
|
|
alignWithLabel: true,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
yAxis: {
|
||
|
|
type: 'value',
|
||
|
|
splitNumber: 5,
|
||
|
|
axisLabel: {
|
||
|
|
textStyle: {
|
||
|
|
color: '#0bbad0',
|
||
|
|
fontSize: 12
|
||
|
|
}
|
||
|
|
},
|
||
|
|
axisLine: {
|
||
|
|
lineStyle: {
|
||
|
|
color: 'transparent',
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
splitLine: {
|
||
|
|
show: true,
|
||
|
|
lineStyle: {
|
||
|
|
color: '#4a646f',
|
||
|
|
type: "dashed"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
series: [{
|
||
|
|
name: '总数',
|
||
|
|
type: 'bar',
|
||
|
|
// smooth: true,
|
||
|
|
/*stack: '总量',*/
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: "rgba(3,238,253,0.9)"
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '实到',
|
||
|
|
type: 'bar',
|
||
|
|
// smooth: true,
|
||
|
|
/*stack: '总量',*/
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: "rgba(41,138,231,0.9)"
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '缺席',
|
||
|
|
type: 'bar',
|
||
|
|
// smooth: true,
|
||
|
|
stack: '总量',
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: "#5e2494"
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}]
|
||
|
|
|
||
|
|
};
|
||
|
|
myChartInspect.setOption(optionInspect);
|
||
|
|
function homeInspectStaSta() {
|
||
|
|
$.post("../ashx/FireInspectHandler.ashx", {
|
||
|
|
Action: "homeInspectSta",
|
||
|
|
OrgId: OrgId,
|
||
|
|
random: new Date().getTime()//随机参数
|
||
|
|
}, function (res) {
|
||
|
|
if (res.code == 1) {
|
||
|
|
res.data.forEach(function (value, index, array) {
|
||
|
|
chartData1.push(value.L_DATE);
|
||
|
|
chartData2.push(value.TOTAL);
|
||
|
|
chartData3.push(value.ONSHOW);
|
||
|
|
chartData4.push(Number(value.NOSHOW) + Number(value.LEAVE_NUM));
|
||
|
|
});
|
||
|
|
optionInspect.xAxis.data = chartData1;
|
||
|
|
optionInspect.series[0].data = chartData2;
|
||
|
|
optionInspect.series[1].data = chartData3;
|
||
|
|
optionInspect.series[2].data = chartData4;
|
||
|
|
myChartInspect.setOption(optionInspect);
|
||
|
|
}
|
||
|
|
}, "JSON");
|
||
|
|
}
|
||
|
|
|
||
|
|
homeInspectStaSta();
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="content-div fl" style="margin-left: 20px; margin-right: 0;margin-top: 18px; margin-bottom: 0;">
|
||
|
|
<div class="content-div-tit">人员考试分析</div>
|
||
|
|
<div class="content-con">
|
||
|
|
<div id="ryksfx" style="width: 100%; height: 100%;"></div>
|
||
|
|
<script type="text/javascript">
|
||
|
|
// 基于准备好的dom，初始化echarts实例
|
||
|
|
var myChart = echarts.init(document.getElementById('ryksfx'));
|
||
|
|
var dashedPic =
|
||
|
|
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAM8AAAAOBAMAAAB6G1V9AAAAD1BMVEX////Kysrk5OTj4+TJycoJ0iFPAAAAG0lEQVQ4y2MYBaNgGAMTQQVFOiABhlEwCugOAMqzCykGOeENAAAAAElFTkSuQmCC';
|
||
|
|
var color = ['#FF8700', '#ffc300', '#00e473', '#009DFF', '#9725d1'];
|
||
|
|
var arrName = [];
|
||
|
|
var arrValue = [];
|
||
|
|
var arrPercent = [];
|
||
|
|
var sum = 0;
|
||
|
|
var pieSeries = [],
|
||
|
|
lineYAxis = [];
|
||
|
|
var pieData = [];
|
||
|
|
function homeKS() {
|
||
|
|
$.ajax({
|
||
|
|
url: 'http://camp.xf365.cn:7080/political/exam/exam/score_echart',
|
||
|
|
//url: 'http://192.168.3.77:6066/political/exam/exam/score_echart',
|
||
|
|
type: 'post',
|
||
|
|
dataType: 'JSON',
|
||
|
|
data: { orgId: OrgId, random: new Date().getTime() },
|
||
|
|
success: function (res) {
|
||
|
|
if (res.code == 1) {
|
||
|
|
|
||
|
|
res.data.forEach((v, i) => {
|
||
|
|
sum += v.value;
|
||
|
|
})
|
||
|
|
// 图表option整理
|
||
|
|
res.data.forEach((v, i) => {
|
||
|
|
pieData.push({
|
||
|
|
value: v.value, name: v.name, itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: color[i],
|
||
|
|
shadowBlur: 10,
|
||
|
|
shadowColor: color[i]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
//arrName.push(v.name);
|
||
|
|
//arrValue.push(v.value);
|
||
|
|
/*arrPercent.push((v.value / sum * 100).toFixed(1) + "%");*/
|
||
|
|
})
|
||
|
|
|
||
|
|
var option = {
|
||
|
|
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'item',
|
||
|
|
formatter: "{a} <br/>{b} : {c}人({d}%)"
|
||
|
|
},
|
||
|
|
toolbox: {
|
||
|
|
show: true,
|
||
|
|
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
top: '-1%',
|
||
|
|
left: 'center',
|
||
|
|
textStyle: {
|
||
|
|
color: '#ffffff'
|
||
|
|
},
|
||
|
|
},
|
||
|
|
color: color,
|
||
|
|
grid: {
|
||
|
|
top: '0%',
|
||
|
|
bottom: '56%',
|
||
|
|
left: "30%",
|
||
|
|
containLabel: false
|
||
|
|
},
|
||
|
|
xAxis: [{
|
||
|
|
show: false
|
||
|
|
}],
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: '人员考试分析',
|
||
|
|
type: 'pie',
|
||
|
|
label: {
|
||
|
|
formatter: '{b}: {c}人({d}%)'
|
||
|
|
},
|
||
|
|
center: ['50%', '60%'],
|
||
|
|
radius: '57%',
|
||
|
|
data: pieData
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
// 使用刚指定的配置项和数据显示图表。
|
||
|
|
myChart.setOption(option);
|
||
|
|
} else {
|
||
|
|
var chartData = [{
|
||
|
|
name: "≥90",
|
||
|
|
value: 0,
|
||
|
|
unit: '人'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: "80~89",
|
||
|
|
value: 0,
|
||
|
|
unit: '人'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: "70~79",
|
||
|
|
value: 0,
|
||
|
|
unit: '人'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: "60~69",
|
||
|
|
value: 0,
|
||
|
|
unit: '人'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: "≤59",
|
||
|
|
value: 0,
|
||
|
|
unit: '人'
|
||
|
|
}
|
||
|
|
];
|
||
|
|
|
||
|
|
// 数据处理
|
||
|
|
chartData.forEach((v, i) => {
|
||
|
|
arrName.push(v.name);
|
||
|
|
arrValue.push(v.value);
|
||
|
|
sum = sum + v.value;
|
||
|
|
})
|
||
|
|
|
||
|
|
// 图表option整理
|
||
|
|
chartData.forEach((v, i) => {
|
||
|
|
pieData.push({
|
||
|
|
value: v.value, name: v.name, itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: color[i],
|
||
|
|
shadowBlur: 10,
|
||
|
|
shadowColor: color[i]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
v.percent = "0%";
|
||
|
|
})
|
||
|
|
|
||
|
|
var option = {
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'item',
|
||
|
|
formatter: "{a} <br/>{b} : {c}人({d}%)"
|
||
|
|
},
|
||
|
|
toolbox: {
|
||
|
|
show: true,
|
||
|
|
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
top: '0%',
|
||
|
|
left: 'center',
|
||
|
|
textStyle: {
|
||
|
|
color: '#ffffff'
|
||
|
|
},
|
||
|
|
},
|
||
|
|
color: color,
|
||
|
|
grid: {
|
||
|
|
top: '0%',
|
||
|
|
bottom: '56%',
|
||
|
|
left: "30%",
|
||
|
|
containLabel: false
|
||
|
|
},
|
||
|
|
xAxis: [{
|
||
|
|
show: false
|
||
|
|
}],
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: '人员考试分析',
|
||
|
|
type: 'pie',
|
||
|
|
label: {
|
||
|
|
formatter: '{b}: {c} ({d}%)'
|
||
|
|
},
|
||
|
|
radius: '57%',
|
||
|
|
data: pieData
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
// 使用刚指定的配置项和数据显示图表。
|
||
|
|
myChart.setOption(option);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
error: function (error) {
|
||
|
|
console.log(error)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
homeKS();
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="content-div fr" style="width: calc(25.53% - 40px); height: 100%; margin-right: 0; margin-left: 40px; margin-bottom: 0; background: url(home/img/under-divbg.png) no-repeat;background-size: 100% 100%;">
|
||
|
|
<div class="content-div-tit">下级机构执勤力量</div>
|
||
|
|
<div class="content-con">
|
||
|
|
<div class="personnum">
|
||
|
|
<ul>
|
||
|
|
<li>
|
||
|
|
<div class="personnum-img"><img src="home/img/personnum1.png"></div>
|
||
|
|
<div id="Subordinate_per_sum" class="personnum-num">34</div>
|
||
|
|
<div class="personnum-tit">人员总数</div>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<div class="personnum-img"><img src="home/img/personnum2.png"></div>
|
||
|
|
<div id="Subordinate_per_zg" class="personnum-num">32</div>
|
||
|
|
<div class="personnum-tit">在岗数</div>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<div class="personnum-img"><img src="home/img/personnum3.png"></div>
|
||
|
|
<div id="Subordinate_per_lg" class="personnum-num">2</div>
|
||
|
|
<div class="personnum-tit">离岗数</div>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="personnum" style="margin-top: 30px;">
|
||
|
|
<ul>
|
||
|
|
<li style="width: 25%;">
|
||
|
|
<div class="personnum-img"><img src="home/img/carnum1.png"></div>
|
||
|
|
<div id="Subordinate_car_sum" class="personnum-num">16</div>
|
||
|
|
<div class="personnum-tit">车辆总数</div>
|
||
|
|
</li>
|
||
|
|
<li style="width: 25%;">
|
||
|
|
<div class="personnum-img"><img src="home/img/carnum2.png"></div>
|
||
|
|
<div id="Subordinate_car_zq" class="personnum-num">14</div>
|
||
|
|
<div class="personnum-tit">执勤车</div>
|
||
|
|
</li>
|
||
|
|
<li style="width: 25%;">
|
||
|
|
<div class="personnum-img"><img src="home/img/carnum3.png"></div>
|
||
|
|
<div id="Subordinate_car_gw" class="personnum-num">2</div>
|
||
|
|
<div class="personnum-tit">公务车</div>
|
||
|
|
</li>
|
||
|
|
<li style="width: 25%;">
|
||
|
|
<div class="personnum-img"><img src="home/img/carnum4.png"></div>
|
||
|
|
<div id="Subordinate_car_sj" class="personnum-num">42</div>
|
||
|
|
<div class="personnum-tit">地方车</div>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="under-list">
|
||
|
|
<table cellpadding="0" cellspacing="0" border="0">
|
||
|
|
<tr class="tou">
|
||
|
|
<th>单位名称</th>
|
||
|
|
<th>人员总数</th>
|
||
|
|
<th>车辆总数</th>
|
||
|
|
</tr>
|
||
|
|
<tbody id="Subordinate_list">
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
function getSubordinateData() {
|
||
|
|
$.post("../ashx/CarHandler.ashx", {
|
||
|
|
Action: "getSubordinateData",
|
||
|
|
Org_Id: OrgId,
|
||
|
|
random: new Date().getTime()//随机参数
|
||
|
|
}, function (res) {
|
||
|
|
console.log(res);
|
||
|
|
var perData = res.perData;
|
||
|
|
var lgsum = perData[0].BG + perData[0].CC + perData[0].CG + perData[0].JY + perData[0].KONG + perData[0].PX + perData[0].QJ + perData[0].QT + perData[0].XJ + perData[0].XX + perData[0].ZLBD + perData[0].ZY;
|
||
|
|
$("#Subordinate_per_sum").html(34);
|
||
|
|
$("#Subordinate_per_zg").html(32);
|
||
|
|
$("#Subordinate_per_lg").html(2);
|
||
|
|
|
||
|
|
|
||
|
|
var carData = res.carData;
|
||
|
|
$("#Subordinate_car_sum").html(16);
|
||
|
|
$("#Subordinate_car_gw").html(2);
|
||
|
|
$("#Subordinate_car_zq").html(14);
|
||
|
|
$("#Subordinate_car_sj").html(carData[0].SJ);
|
||
|
|
|
||
|
|
var listData = res.listData;
|
||
|
|
var tableHtml = "";
|
||
|
|
listData.forEach(item => {
|
||
|
|
tableHtml += "<tr><td>" + item.ORG_NAME + "</td><td>" + item.PERNUM + "</td><td>" + item.CARNUM + "</td></tr>";
|
||
|
|
});
|
||
|
|
$("#Subordinate_list").html(tableHtml);
|
||
|
|
|
||
|
|
}, "JSON");
|
||
|
|
}
|
||
|
|
getSubordinateData();
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|