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.
1719 lines
119 KiB
1719 lines
119 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
|
||
|
|
}
|
||
|
|
},
|
||
|
|
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: 'line',
|
||
|
|
// smooth: true,
|
||
|
|
stack: '使用情况',
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: "rgba(3,238,253,0.9)"
|
||
|
|
},
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
}, {
|
||
|
|
name: '用车次数',
|
||
|
|
type: 'line',
|
||
|
|
// 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">
|
||
|
|
//查铺
|
||
|
|
function homeInspectStaSta() {
|
||
|
|
$.post("../ashx/FireInspectHandler.ashx", {
|
||
|
|
Action: "homeInspectSta",
|
||
|
|
OrgId: OrgId,
|
||
|
|
random: new Date().getTime()//随机参数
|
||
|
|
}, function (res) {
|
||
|
|
if (res.code == 1) {
|
||
|
|
// 基于准备好的dom，初始化echarts实例
|
||
|
|
var myChart = echarts.init(document.getElementById('cpsdl'));
|
||
|
|
var chartData = [];
|
||
|
|
for (var i = res.data.length - 1; i > -1; i--) {
|
||
|
|
var obj = {
|
||
|
|
name: res.data[i].L_DATE,
|
||
|
|
value: res.data[i].TOTAL,
|
||
|
|
value1: res.data[i].ONSHOW,
|
||
|
|
value2: Number(res.data[i].NOSHOW) + Number(res.data[i].LEAVE_NUM)
|
||
|
|
};
|
||
|
|
chartData.push(obj);
|
||
|
|
}
|
||
|
|
var option = {
|
||
|
|
title: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
show: true,
|
||
|
|
trigger: 'axis', //axis , item
|
||
|
|
backgroundColor: 'rgba(0,15,78,0.6)',
|
||
|
|
borderColor: '#00afff',
|
||
|
|
borderWidth: 1,
|
||
|
|
borderRadius: 0,
|
||
|
|
textStyle: {
|
||
|
|
color: "#fff",
|
||
|
|
fontSize: 13,
|
||
|
|
align: 'left'
|
||
|
|
},
|
||
|
|
axisPointer: {
|
||
|
|
type: 'line', //'line' | 'cross' | 'shadow' | 'none
|
||
|
|
lineStyle: {
|
||
|
|
width: 1,
|
||
|
|
type: 'dotted',
|
||
|
|
color: 'rgba(46,149,230,.9)'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
show: true,
|
||
|
|
orient: 'horizontal', //'vertical'
|
||
|
|
data: ['实到', '缺席', '总数'],
|
||
|
|
icon: 'circle',
|
||
|
|
selectedMode: true,
|
||
|
|
itemWidth: 10,
|
||
|
|
itemHeight: 10,
|
||
|
|
itemGap: 20,
|
||
|
|
textStyle: {
|
||
|
|
fontSize: 14,
|
||
|
|
color: '#ffffff'
|
||
|
|
},
|
||
|
|
x: 'center',
|
||
|
|
y: '0'
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
top: '15%',
|
||
|
|
right: '5%',
|
||
|
|
bottom: '10%',
|
||
|
|
left: '8%'
|
||
|
|
},
|
||
|
|
xAxis: {
|
||
|
|
type: 'category',
|
||
|
|
axisLabel: {
|
||
|
|
show: true,
|
||
|
|
interval: 0, //类目间隔 设置为 1，表示『隔一个标签显示一个标签』
|
||
|
|
textStyle: {
|
||
|
|
color: '#0bbad0',
|
||
|
|
fontSize: 13
|
||
|
|
},
|
||
|
|
formatter: '{value}'
|
||
|
|
},
|
||
|
|
axisLine: {
|
||
|
|
lineStyle: {
|
||
|
|
color: 'rgba(15,45,134,.9)'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
axisTick: {
|
||
|
|
show: false //坐标轴小标记
|
||
|
|
},
|
||
|
|
data: (function (data) {
|
||
|
|
var arr = [];
|
||
|
|
data.forEach(function (items) {
|
||
|
|
arr.push(items.name); //name
|
||
|
|
});
|
||
|
|
return arr;
|
||
|
|
})(chartData) //载入横坐标数据
|
||
|
|
},
|
||
|
|
yAxis: {
|
||
|
|
axisLabel: {
|
||
|
|
show: true,
|
||
|
|
textStyle: {
|
||
|
|
color: '#0bbad0',
|
||
|
|
fontSize: 13
|
||
|
|
},
|
||
|
|
interval: 0, //类目间隔 设置为 1，表示『隔一个标签显示一个标签』
|
||
|
|
margin: 10,
|
||
|
|
//formatter: '{value}'
|
||
|
|
},
|
||
|
|
splitNumber: 5, //y轴刻度设置(值越大刻度越小)
|
||
|
|
axisLine: { //y轴线
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
splitLine: {
|
||
|
|
show: true,
|
||
|
|
lineStyle: {
|
||
|
|
color: 'rgba(15,45,134,.6)', //横向网格线颜色
|
||
|
|
width: 1
|
||
|
|
}
|
||
|
|
},
|
||
|
|
axisTick: {
|
||
|
|
show: false //坐标轴小标记
|
||
|
|
}
|
||
|
|
},
|
||
|
|
series: [{
|
||
|
|
name: '总数',
|
||
|
|
type: 'scatter',
|
||
|
|
stack: '总量',
|
||
|
|
label: {
|
||
|
|
normal: {
|
||
|
|
show: false,
|
||
|
|
position: 'top',
|
||
|
|
textStyle: {
|
||
|
|
color: '#9bc8ff',
|
||
|
|
fontSize: 12
|
||
|
|
},
|
||
|
|
formatter: '{c}' //图形上显示数字
|
||
|
|
}
|
||
|
|
},
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: 'rgba(255,55,135,1)', //颜色
|
||
|
|
}
|
||
|
|
},
|
||
|
|
symbol: 'circle', //circle, rect, roundRect, triangle, pin, diamond, arrow
|
||
|
|
symbolPosition: 'end',
|
||
|
|
symbolSize: 30,
|
||
|
|
symbolOffset: [0, '-120%'],
|
||
|
|
data: (function (data) {
|
||
|
|
var arr = [];
|
||
|
|
data.forEach(function (items) {
|
||
|
|
var itemName = items.name,
|
||
|
|
itemValue = items.value,
|
||
|
|
itemStyle = itemValue / 1.5; //console.log(itemStyle)
|
||
|
|
arr.push({
|
||
|
|
name: itemName,
|
||
|
|
value: itemValue,
|
||
|
|
symbolSize: itemStyle
|
||
|
|
})
|
||
|
|
});
|
||
|
|
return arr;
|
||
|
|
})(chartData) //载入数据并设置图形尺寸
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '实到',
|
||
|
|
type: 'pictorialBar',
|
||
|
|
barWidth: 40,
|
||
|
|
stack: '总量',
|
||
|
|
label: {
|
||
|
|
normal: {
|
||
|
|
show: false,
|
||
|
|
position: 'top',
|
||
|
|
textStyle: {
|
||
|
|
color: '#9bc8ff',
|
||
|
|
fontSize: 12
|
||
|
|
},
|
||
|
|
formatter: '{c}' //图形上显示数字
|
||
|
|
}
|
||
|
|
},
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: {
|
||
|
|
type: 'linear',
|
||
|
|
x: 0,
|
||
|
|
y: 0,
|
||
|
|
x2: 0,
|
||
|
|
y2: 1,
|
||
|
|
colorStops: [{
|
||
|
|
offset: 0,
|
||
|
|
color: 'rgba(142,48,255,1)' // 0% 处的颜色
|
||
|
|
}, {
|
||
|
|
offset: 1,
|
||
|
|
color: 'rgba(142,48,255,.2)' // 100% 处的颜色
|
||
|
|
}],
|
||
|
|
globalCoord: false // 缺省为 false
|
||
|
|
}, //渐变颜色
|
||
|
|
}
|
||
|
|
},
|
||
|
|
symbol: 'path://M12.000,-0.000 C12.000,-0.000 16.074,60.121 22.731,60.121 C26.173,60.121 -3.234,60.121 0.511,60.121 C7.072,60.121 12.000,-0.000 12.000,-0.000 Z',
|
||
|
|
data: (function (data) {
|
||
|
|
var arr = [];
|
||
|
|
data.forEach(function (items) {
|
||
|
|
arr.push(items.value1); //value
|
||
|
|
});
|
||
|
|
return arr;
|
||
|
|
})(chartData) //载入数据
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '缺席',
|
||
|
|
type: 'pictorialBar',
|
||
|
|
barWidth: 40,
|
||
|
|
stack: '总量',
|
||
|
|
label: {
|
||
|
|
normal: {
|
||
|
|
show: false,
|
||
|
|
position: 'top',
|
||
|
|
textStyle: {
|
||
|
|
color: '#9bc8ff',
|
||
|
|
fontSize: 12
|
||
|
|
},
|
||
|
|
formatter: '{c}' //图形上显示数字
|
||
|
|
}
|
||
|
|
},
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: {
|
||
|
|
type: 'linear',
|
||
|
|
x: 0,
|
||
|
|
y: 0,
|
||
|
|
x2: 0,
|
||
|
|
y2: 1,
|
||
|
|
colorStops: [{
|
||
|
|
offset: 0,
|
||
|
|
color: 'rgba(3,238,253,1)' // 0% 处的颜色
|
||
|
|
}, {
|
||
|
|
offset: 1,
|
||
|
|
color: 'rgba(3,238,253,.2)' // 100% 处的颜色
|
||
|
|
}],
|
||
|
|
globalCoord: false // 缺省为 false
|
||
|
|
}, //渐变颜色
|
||
|
|
}
|
||
|
|
},
|
||
|
|
symbol: 'path://M12.000,-0.000 C12.000,-0.000 16.074,60.121 22.731,60.121 C26.173,60.121 -3.234,60.121 0.511,60.121 C7.072,60.121 12.000,-0.000 12.000,-0.000 Z',
|
||
|
|
data: (function (data) {
|
||
|
|
var arr = [];
|
||
|
|
data.forEach(function (items) {
|
||
|
|
arr.push(items.value2); //value
|
||
|
|
});
|
||
|
|
return arr;
|
||
|
|
})(chartData) //载入数据
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
|
||
|
|
var app = {
|
||
|
|
curIndex: -1,
|
||
|
|
};
|
||
|
|
setInterval(() => {
|
||
|
|
var dataLen = chartData.length;
|
||
|
|
|
||
|
|
// 取消之前高亮的图形
|
||
|
|
myChart.dispatchAction({
|
||
|
|
type: 'downplay',
|
||
|
|
seriesIndex: 0,
|
||
|
|
dataIndex: app.curIndex
|
||
|
|
});
|
||
|
|
|
||
|
|
app.curIndex = (app.curIndex + 1) % dataLen;
|
||
|
|
|
||
|
|
// 高亮当前图形
|
||
|
|
myChart.dispatchAction({
|
||
|
|
type: 'highlight',
|
||
|
|
seriesIndex: 0,
|
||
|
|
dataIndex: app.curIndex,
|
||
|
|
});
|
||
|
|
|
||
|
|
// 显示 tooltip
|
||
|
|
myChart.dispatchAction({
|
||
|
|
type: 'showTip',
|
||
|
|
seriesIndex: 0,
|
||
|
|
dataIndex: app.curIndex
|
||
|
|
});
|
||
|
|
|
||
|
|
}, 3000);
|
||
|
|
|
||
|
|
// 使用刚指定的配置项和数据显示图表。
|
||
|
|
myChart.setOption(option);
|
||
|
|
} else {
|
||
|
|
// 基于准备好的dom，初始化echarts实例
|
||
|
|
var myChart = echarts.init(document.getElementById('cpsdl'));
|
||
|
|
var chartData = [];
|
||
|
|
var option = {
|
||
|
|
title: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
show: true,
|
||
|
|
trigger: 'axis', //axis , item
|
||
|
|
backgroundColor: 'rgba(0,15,78,0.6)',
|
||
|
|
borderColor: '#00afff',
|
||
|
|
borderWidth: 1,
|
||
|
|
borderRadius: 0,
|
||
|
|
textStyle: {
|
||
|
|
color: "#fff",
|
||
|
|
fontSize: 13,
|
||
|
|
align: 'left'
|
||
|
|
},
|
||
|
|
axisPointer: {
|
||
|
|
type: 'line', //'line' | 'cross' | 'shadow' | 'none
|
||
|
|
lineStyle: {
|
||
|
|
width: 1,
|
||
|
|
type: 'dotted',
|
||
|
|
color: 'rgba(46,149,230,.9)'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
show: true,
|
||
|
|
orient: 'horizontal', //'vertical'
|
||
|
|
data: ['实到', '缺席', '总数'],
|
||
|
|
icon: 'circle',
|
||
|
|
selectedMode: true,
|
||
|
|
itemWidth: 10,
|
||
|
|
itemHeight: 10,
|
||
|
|
itemGap: 20,
|
||
|
|
textStyle: {
|
||
|
|
fontSize: 14,
|
||
|
|
color: '#ffffff'
|
||
|
|
},
|
||
|
|
x: 'center',
|
||
|
|
y: '0'
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
top: '15%',
|
||
|
|
right: '5%',
|
||
|
|
bottom: '10%',
|
||
|
|
left: '8%'
|
||
|
|
},
|
||
|
|
xAxis: {
|
||
|
|
type: 'category',
|
||
|
|
axisLabel: {
|
||
|
|
show: true,
|
||
|
|
interval: 0, //类目间隔 设置为 1，表示『隔一个标签显示一个标签』
|
||
|
|
textStyle: {
|
||
|
|
color: '#0bbad0',
|
||
|
|
fontSize: 13
|
||
|
|
},
|
||
|
|
formatter: '{value}'
|
||
|
|
},
|
||
|
|
axisLine: {
|
||
|
|
lineStyle: {
|
||
|
|
color: 'rgba(15,45,134,.9)'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
axisTick: {
|
||
|
|
show: false //坐标轴小标记
|
||
|
|
},
|
||
|
|
data: (function (data) {
|
||
|
|
var arr = [];
|
||
|
|
data.forEach(function (items) {
|
||
|
|
arr.push(items.name); //name
|
||
|
|
});
|
||
|
|
return arr;
|
||
|
|
})(chartData) //载入横坐标数据
|
||
|
|
},
|
||
|
|
yAxis: {
|
||
|
|
axisLabel: {
|
||
|
|
show: true,
|
||
|
|
textStyle: {
|
||
|
|
color: '#0bbad0',
|
||
|
|
fontSize: 13
|
||
|
|
},
|
||
|
|
interval: 0, //类目间隔 设置为 1，表示『隔一个标签显示一个标签』
|
||
|
|
margin: 10,
|
||
|
|
//formatter: '{value}'
|
||
|
|
},
|
||
|
|
splitNumber: 5, //y轴刻度设置(值越大刻度越小)
|
||
|
|
axisLine: { //y轴线
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
splitLine: {
|
||
|
|
show: true,
|
||
|
|
lineStyle: {
|
||
|
|
color: 'rgba(15,45,134,.6)', //横向网格线颜色
|
||
|
|
width: 1
|
||
|
|
}
|
||
|
|
},
|
||
|
|
axisTick: {
|
||
|
|
show: false //坐标轴小标记
|
||
|
|
}
|
||
|
|
},
|
||
|
|
series: [{
|
||
|
|
name: '总数',
|
||
|
|
type: 'scatter',
|
||
|
|
stack: '总量',
|
||
|
|
label: {
|
||
|
|
normal: {
|
||
|
|
show: false,
|
||
|
|
position: 'top',
|
||
|
|
textStyle: {
|
||
|
|
color: '#9bc8ff',
|
||
|
|
fontSize: 12
|
||
|
|
},
|
||
|
|
formatter: '{c}' //图形上显示数字
|
||
|
|
}
|
||
|
|
},
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: 'rgba(255,55,135,1)', //颜色
|
||
|
|
}
|
||
|
|
},
|
||
|
|
symbol: 'circle', //circle, rect, roundRect, triangle, pin, diamond, arrow
|
||
|
|
symbolPosition: 'end',
|
||
|
|
symbolSize: 30,
|
||
|
|
symbolOffset: [0, '-120%'],
|
||
|
|
data: (function (data) {
|
||
|
|
var arr = [];
|
||
|
|
data.forEach(function (items) {
|
||
|
|
var itemName = items.name,
|
||
|
|
itemValue = items.value,
|
||
|
|
itemStyle = itemValue / 1.5; //console.log(itemStyle)
|
||
|
|
arr.push({
|
||
|
|
name: itemName,
|
||
|
|
value: itemValue,
|
||
|
|
symbolSize: itemStyle
|
||
|
|
})
|
||
|
|
});
|
||
|
|
return arr;
|
||
|
|
})(chartData) //载入数据并设置图形尺寸
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '实到',
|
||
|
|
type: 'pictorialBar',
|
||
|
|
barWidth: 40,
|
||
|
|
stack: '总量',
|
||
|
|
label: {
|
||
|
|
normal: {
|
||
|
|
show: false,
|
||
|
|
position: 'top',
|
||
|
|
textStyle: {
|
||
|
|
color: '#9bc8ff',
|
||
|
|
fontSize: 12
|
||
|
|
},
|
||
|
|
formatter: '{c}' //图形上显示数字
|
||
|
|
}
|
||
|
|
},
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: {
|
||
|
|
type: 'linear',
|
||
|
|
x: 0,
|
||
|
|
y: 0,
|
||
|
|
x2: 0,
|
||
|
|
y2: 1,
|
||
|
|
colorStops: [{
|
||
|
|
offset: 0,
|
||
|
|
color: 'rgba(142,48,255,1)' // 0% 处的颜色
|
||
|
|
}, {
|
||
|
|
offset: 1,
|
||
|
|
color: 'rgba(142,48,255,.2)' // 100% 处的颜色
|
||
|
|
}],
|
||
|
|
globalCoord: false // 缺省为 false
|
||
|
|
}, //渐变颜色
|
||
|
|
}
|
||
|
|
},
|
||
|
|
symbol: 'path://M12.000,-0.000 C12.000,-0.000 16.074,60.121 22.731,60.121 C26.173,60.121 -3.234,60.121 0.511,60.121 C7.072,60.121 12.000,-0.000 12.000,-0.000 Z',
|
||
|
|
data: (function (data) {
|
||
|
|
var arr = [];
|
||
|
|
data.forEach(function (items) {
|
||
|
|
arr.push(items.value1); //value
|
||
|
|
});
|
||
|
|
return arr;
|
||
|
|
})(chartData) //载入数据
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '缺席',
|
||
|
|
type: 'pictorialBar',
|
||
|
|
barWidth: 40,
|
||
|
|
stack: '总量',
|
||
|
|
label: {
|
||
|
|
normal: {
|
||
|
|
show: false,
|
||
|
|
position: 'top',
|
||
|
|
textStyle: {
|
||
|
|
color: '#9bc8ff',
|
||
|
|
fontSize: 12
|
||
|
|
},
|
||
|
|
formatter: '{c}' //图形上显示数字
|
||
|
|
}
|
||
|
|
},
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: {
|
||
|
|
type: 'linear',
|
||
|
|
x: 0,
|
||
|
|
y: 0,
|
||
|
|
x2: 0,
|
||
|
|
y2: 1,
|
||
|
|
colorStops: [{
|
||
|
|
offset: 0,
|
||
|
|
color: 'rgba(3,238,253,1)' // 0% 处的颜色
|
||
|
|
}, {
|
||
|
|
offset: 1,
|
||
|
|
color: 'rgba(3,238,253,.2)' // 100% 处的颜色
|
||
|
|
}],
|
||
|
|
globalCoord: false // 缺省为 false
|
||
|
|
}, //渐变颜色
|
||
|
|
}
|
||
|
|
},
|
||
|
|
symbol: 'path://M12.000,-0.000 C12.000,-0.000 16.074,60.121 22.731,60.121 C26.173,60.121 -3.234,60.121 0.511,60.121 C7.072,60.121 12.000,-0.000 12.000,-0.000 Z',
|
||
|
|
data: (function (data) {
|
||
|
|
var arr = [];
|
||
|
|
data.forEach(function (items) {
|
||
|
|
arr.push(items.value2); //value
|
||
|
|
});
|
||
|
|
return arr;
|
||
|
|
})(chartData) //载入数据
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
|
||
|
|
var app = {
|
||
|
|
curIndex: -1,
|
||
|
|
};
|
||
|
|
setInterval(() => {
|
||
|
|
var dataLen = chartData.length;
|
||
|
|
|
||
|
|
// 取消之前高亮的图形
|
||
|
|
myChart.dispatchAction({
|
||
|
|
type: 'downplay',
|
||
|
|
seriesIndex: 0,
|
||
|
|
dataIndex: app.curIndex
|
||
|
|
});
|
||
|
|
|
||
|
|
app.curIndex = (app.curIndex + 1) % dataLen;
|
||
|
|
|
||
|
|
// 高亮当前图形
|
||
|
|
myChart.dispatchAction({
|
||
|
|
type: 'highlight',
|
||
|
|
seriesIndex: 0,
|
||
|
|
dataIndex: app.curIndex,
|
||
|
|
});
|
||
|
|
|
||
|
|
// 显示 tooltip
|
||
|
|
myChart.dispatchAction({
|
||
|
|
type: 'showTip',
|
||
|
|
seriesIndex: 0,
|
||
|
|
dataIndex: app.curIndex
|
||
|
|
});
|
||
|
|
|
||
|
|
}, 3000);
|
||
|
|
|
||
|
|
// 使用刚指定的配置项和数据显示图表。
|
||
|
|
myChart.setOption(option);
|
||
|
|
}
|
||
|
|
}, "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'];
|
||
|
|
var arrName = [];
|
||
|
|
var arrValue = [];
|
||
|
|
var sum = 0;
|
||
|
|
var pieSeries = [],
|
||
|
|
lineYAxis = [];
|
||
|
|
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) => {
|
||
|
|
pieSeries.push({
|
||
|
|
name: '学历',
|
||
|
|
type: 'pie',
|
||
|
|
clockWise: false,
|
||
|
|
hoverAnimation: false,
|
||
|
|
radius: [85 - i * 15 + '%', 77 - i * 15 + '%'],
|
||
|
|
center: ["30%", "50%"],
|
||
|
|
label: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
data: [{
|
||
|
|
value: v.value,
|
||
|
|
name: v.name
|
||
|
|
}, {
|
||
|
|
value: sum - v.value,
|
||
|
|
name: '',
|
||
|
|
itemStyle: {
|
||
|
|
color: "rgba(0,0,0,0)"
|
||
|
|
}
|
||
|
|
}]
|
||
|
|
});
|
||
|
|
pieSeries.push({
|
||
|
|
name: '',
|
||
|
|
type: 'pie',
|
||
|
|
silent: true,
|
||
|
|
z: 1,
|
||
|
|
clockWise: false, //顺时加载
|
||
|
|
hoverAnimation: false, //鼠标移入变大
|
||
|
|
radius: [85 - i * 15 + '%', 77 - i * 15 + '%'],
|
||
|
|
center: ["30%", "50%"],
|
||
|
|
label: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
data: [{
|
||
|
|
value: 7.5,
|
||
|
|
itemStyle: {
|
||
|
|
color: "rgba(255,255,255,0.1)" //圆环颜色
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
value: 2.5,
|
||
|
|
name: '',
|
||
|
|
itemStyle: {
|
||
|
|
color: "rgba(0,0,0,0)"
|
||
|
|
}
|
||
|
|
}]
|
||
|
|
});
|
||
|
|
v.percent = (v.value / sum * 100).toFixed(1) + "%";
|
||
|
|
lineYAxis.push({
|
||
|
|
value: i,
|
||
|
|
textStyle: {
|
||
|
|
rich: {
|
||
|
|
circle: {
|
||
|
|
color: color[i],
|
||
|
|
padding: [0, 10]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
})
|
||
|
|
|
||
|
|
var option = {
|
||
|
|
color: color,
|
||
|
|
grid: {
|
||
|
|
top: '5%',
|
||
|
|
bottom: '56%',
|
||
|
|
left: "30%",
|
||
|
|
containLabel: false
|
||
|
|
},
|
||
|
|
yAxis: [{
|
||
|
|
type: 'category',
|
||
|
|
inverse: true,
|
||
|
|
axisLine: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisTick: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
formatter: function (params) {
|
||
|
|
var item = res.data[params];
|
||
|
|
var percent = item.percent
|
||
|
|
if (percent == "NaN%") {
|
||
|
|
percent = "0%"
|
||
|
|
}
|
||
|
|
return '{line|}{circle|●}{name|' + item.name + '}{bd||}{percent|' + percent + '}{value|' + item.value +
|
||
|
|
'}{unit|人}'
|
||
|
|
},
|
||
|
|
interval: 0,
|
||
|
|
inside: true,
|
||
|
|
textStyle: {
|
||
|
|
color: "#ffffff", //元字颜色
|
||
|
|
fontSize: 14,
|
||
|
|
rich: {
|
||
|
|
line: {
|
||
|
|
width: 120,
|
||
|
|
height: 2, //标线高度
|
||
|
|
backgroundColor: "rgba(255,255,255,0.1)", //标线颜色
|
||
|
|
},
|
||
|
|
name: {
|
||
|
|
color: '#ffffff',
|
||
|
|
fontSize: 14,
|
||
|
|
},
|
||
|
|
bd: {
|
||
|
|
color: '#ffffff',
|
||
|
|
padding: [0, 10],
|
||
|
|
fontSize: 14,
|
||
|
|
},
|
||
|
|
percent: {
|
||
|
|
color: '#ffffff',
|
||
|
|
fontSize: 14,
|
||
|
|
},
|
||
|
|
value: {
|
||
|
|
color: '#ffffff',
|
||
|
|
fontSize: 14,
|
||
|
|
fontWeight: 500,
|
||
|
|
padding: [0, 0, 0, 20]
|
||
|
|
},
|
||
|
|
unit: {
|
||
|
|
fontSize: 14
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
show: true
|
||
|
|
},
|
||
|
|
data: lineYAxis
|
||
|
|
}],
|
||
|
|
xAxis: [{
|
||
|
|
show: false
|
||
|
|
}],
|
||
|
|
series: pieSeries
|
||
|
|
};
|
||
|
|
// 使用刚指定的配置项和数据显示图表。
|
||
|
|
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) => {
|
||
|
|
pieSeries.push({
|
||
|
|
name: '学历',
|
||
|
|
type: 'pie',
|
||
|
|
clockWise: false,
|
||
|
|
hoverAnimation: false,
|
||
|
|
radius: [85 - i * 15 + '%', 77 - i * 15 + '%'],
|
||
|
|
center: ["30%", "50%"],
|
||
|
|
label: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
data: [{
|
||
|
|
value: v.value,
|
||
|
|
name: v.name
|
||
|
|
}, {
|
||
|
|
value: sum - v.value,
|
||
|
|
name: '',
|
||
|
|
itemStyle: {
|
||
|
|
color: "rgba(0,0,0,0)"
|
||
|
|
}
|
||
|
|
}]
|
||
|
|
});
|
||
|
|
pieSeries.push({
|
||
|
|
name: '',
|
||
|
|
type: 'pie',
|
||
|
|
silent: true,
|
||
|
|
z: 1,
|
||
|
|
clockWise: false, //顺时加载
|
||
|
|
hoverAnimation: false, //鼠标移入变大
|
||
|
|
radius: [85 - i * 15 + '%', 77 - i * 15 + '%'],
|
||
|
|
center: ["30%", "50%"],
|
||
|
|
label: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
data: [{
|
||
|
|
value: 7.5,
|
||
|
|
itemStyle: {
|
||
|
|
color: "rgba(255,255,255,0.1)" //圆环颜色
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
value: 2.5,
|
||
|
|
name: '',
|
||
|
|
itemStyle: {
|
||
|
|
color: "rgba(0,0,0,0)"
|
||
|
|
}
|
||
|
|
}]
|
||
|
|
});
|
||
|
|
v.percent = "0%";
|
||
|
|
lineYAxis.push({
|
||
|
|
value: i,
|
||
|
|
textStyle: {
|
||
|
|
rich: {
|
||
|
|
circle: {
|
||
|
|
color: color[i],
|
||
|
|
padding: [0, 10]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
})
|
||
|
|
|
||
|
|
var option = {
|
||
|
|
color: color,
|
||
|
|
grid: {
|
||
|
|
top: '5%',
|
||
|
|
bottom: '56%',
|
||
|
|
left: "30%",
|
||
|
|
containLabel: false
|
||
|
|
},
|
||
|
|
yAxis: [{
|
||
|
|
type: 'category',
|
||
|
|
inverse: true,
|
||
|
|
axisLine: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisTick: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
formatter: function (params) {
|
||
|
|
var item = chartData[params];
|
||
|
|
var percent = item.percent;
|
||
|
|
if (percent == "NaN%") {
|
||
|
|
percent = "0%"
|
||
|
|
}
|
||
|
|
return '{line|}{circle|●}{name|' + item.name + '}{bd||}{percent|' + percent + '}{value|' + item.value +
|
||
|
|
'}{unit|人}'
|
||
|
|
},
|
||
|
|
interval: 0,
|
||
|
|
inside: true,
|
||
|
|
textStyle: {
|
||
|
|
color: "#ffffff", //元字颜色
|
||
|
|
fontSize: 14,
|
||
|
|
rich: {
|
||
|
|
line: {
|
||
|
|
width: 120,
|
||
|
|
height: 2, //标线高度
|
||
|
|
backgroundColor: "rgba(255,255,255,0.1)", //标线颜色
|
||
|
|
},
|
||
|
|
name: {
|
||
|
|
color: '#ffffff',
|
||
|
|
fontSize: 14,
|
||
|
|
},
|
||
|
|
bd: {
|
||
|
|
color: '#ffffff',
|
||
|
|
padding: [0, 10],
|
||
|
|
fontSize: 14,
|
||
|
|
},
|
||
|
|
percent: {
|
||
|
|
color: '#ffffff',
|
||
|
|
fontSize: 14,
|
||
|
|
},
|
||
|
|
value: {
|
||
|
|
color: '#ffffff',
|
||
|
|
fontSize: 14,
|
||
|
|
fontWeight: 500,
|
||
|
|
padding: [0, 0, 0, 20]
|
||
|
|
},
|
||
|
|
unit: {
|
||
|
|
fontSize: 14
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
show: true
|
||
|
|
},
|
||
|
|
data: lineYAxis
|
||
|
|
}],
|
||
|
|
xAxis: [{
|
||
|
|
show: false
|
||
|
|
}],
|
||
|
|
series: pieSeries
|
||
|
|
};
|
||
|
|
// 使用刚指定的配置项和数据显示图表。
|
||
|
|
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">55</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">13</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">42</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">55</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">13</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">42</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(perData[0].ZG + lgsum);
|
||
|
|
$("#Subordinate_per_zg").html(perData[0].ZG);
|
||
|
|
$("#Subordinate_per_lg").html(lgsum);
|
||
|
|
|
||
|
|
|
||
|
|
var carData = res.carData;
|
||
|
|
$("#Subordinate_car_sum").html(carData[0].GW + carData[0].ZQ + carData[0].SJ);
|
||
|
|
$("#Subordinate_car_gw").html(carData[0].GW);
|
||
|
|
$("#Subordinate_car_zq").html(carData[0].ZQ);
|
||
|
|
$("#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>
|