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.
487 lines
21 KiB
487 lines
21 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<title></title>
|
|
<meta charset="utf-8" />
|
|
<link rel="stylesheet" href="/js/layui/css/layui.css" media="all" />
|
|
<link rel="stylesheet" href="../../css/ztree/metro/ztree.css">
|
|
<style>
|
|
dl dd {
|
|
text-align: left;
|
|
}
|
|
|
|
.layui-form {
|
|
width: 100%
|
|
}
|
|
|
|
.select_1 {
|
|
width: 80px;
|
|
margin: 0 5px;
|
|
}
|
|
|
|
.select_2 {
|
|
width: 160px;
|
|
margin: 0 5px;
|
|
}
|
|
|
|
#dataTime_1 {
|
|
width: 260px;
|
|
margin: 0 5px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div style="margin:0 auto;text-align: center;">
|
|
<form class="layui-form" style="width: 100%">
|
|
<span id="orgName" style="line-height: 40px;font-size: 22px;font-weight: bold;text-indent : 20px;letter-spacing: 3px; "></span>
|
|
<div class="layui-input-inline select_1">
|
|
<select id="select_1" lay-filter="select_1"></select>
|
|
</div>
|
|
<span style="line-height: 40px;font-size: 22px;font-weight: bold;">年 车辆出入记录统计</span>
|
|
<div class="layui-input-inline">
|
|
<input type="checkbox" id="is_content" name='is_content' lay-filter="is_content" value="1" title="包含下级所属单位">
|
|
</div>
|
|
<div style="float: right;margin-right: 20px;">
|
|
<button id="exportWord" type="button" class="layui-btn">导出</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div id="echarts_1" style="width: 95%;height:350px;float: left"></div>
|
|
|
|
<div style="margin:0 auto;text-align: center;">
|
|
<form class="layui-form" style="float: right;width: 100%">
|
|
<div class="layui-input-inline select_2">
|
|
<select id="select_2" lay-filter="select_2" lay-search=""></select>
|
|
</div>
|
|
<div class="layui-input-inline">
|
|
<input type="text" class="layui-input" id="dataTime_1" placeholder="请选择查询的时间段">
|
|
</div>
|
|
<div class="layui-input-inline">
|
|
<span id="span_1" style="float: left;line-height: 40px;font-size: 22px;font-weight: bold;">车辆出入记录</span>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<div style="width: 90%;height: 500px;float: left;margin-left: 5%;">
|
|
<table id="carAccList" lay-filter="carAccList"></table>
|
|
</div>
|
|
|
|
<script type="text/javascript" src="/js/layui/layui.js"></script>
|
|
<script src="../../js/echarts.min.js"></script>
|
|
<script>
|
|
var userInfo = JSON.parse(window.sessionStorage.getItem("userInfo"));
|
|
var OrgId = "fbbb44bb458c4336a84e009df74c8598";
|
|
var OrgName = "";
|
|
if (userInfo != null) {
|
|
OrgId = userInfo.OrgID;
|
|
OrgName = userInfo.OrgName;
|
|
}
|
|
layui.use(['form', 'layer', 'table', 'laydate'], function () {
|
|
$ = layui.jquery,
|
|
form = layui.form,
|
|
layer = layui.layer,
|
|
table = layui.table,
|
|
laydate = layui.laydate;
|
|
|
|
|
|
//获取当前日期
|
|
var myDate = new Date();
|
|
var nowY = myDate.getFullYear();
|
|
var nowM = myDate.getMonth() + 1;
|
|
var lastY = nowY;
|
|
var lastM = nowM + 1;
|
|
if (nowM == "12") {
|
|
lastY = nowY + 1;
|
|
lastM = "1";
|
|
}
|
|
laydate.render({
|
|
elem: '#dataTime_1',
|
|
type: 'month',
|
|
//value: nowY + '-' + (nowM < 10 ? '0' + nowM : nowM) + ' - ' + lastY + '-' + (lastM < 10 ? "0" + lastM : lastM),
|
|
value: nowY + '-01 - ' + lastY + '-' + (lastM < 10 ? "0" + lastM : lastM),
|
|
isInitValue: true,
|
|
range: true,
|
|
done: function (value) {
|
|
if (value.indexOf(" - ") != -1 && $("#select_2").val() != null) {
|
|
var startDate = value.split(" - ")[0]
|
|
var endDate = value.split(" - ")[1];
|
|
work_obj.getStatisticsTra2($("#select_2").val(), startDate, endDate);
|
|
}
|
|
}
|
|
});
|
|
|
|
//监听年下拉框
|
|
form.on('select(select_1)', function (data) {
|
|
work_obj.getStatisticsTra(data.value);
|
|
})
|
|
|
|
//监听车辆下拉框
|
|
form.on('select(select_2)', function (data) {
|
|
var value = $("#dataTime_1").val();
|
|
if (value.indexOf(" - ") != -1 && $("#select_2").val() != null) {
|
|
var startDate = value.split(" - ")[0]
|
|
var endDate = value.split(" - ")[1];
|
|
work_obj.getStatisticsTra2($("#select_2").val(), startDate, endDate);
|
|
}
|
|
})
|
|
|
|
//监听包含下级复选框
|
|
form.on('checkbox(is_content)', function (data) {
|
|
work_obj.getStatisticsTra($("#select_1").val());
|
|
var value = $("#dataTime_1").val();
|
|
if (value.indexOf(" - ") != -1 && $("#select_2").val() != null) {
|
|
var startDate = value.split(" - ")[0]
|
|
var endDate = value.split(" - ")[1];
|
|
work_obj.getStatisticsTra2($("#select_2").val(), startDate, endDate);
|
|
}
|
|
});
|
|
|
|
|
|
|
|
$("#orgName").html(OrgName);
|
|
work_obj.selectYear("#select_1");
|
|
work_obj.getCarList();
|
|
work_obj.getStatisticsTra2("", nowY + "-01", lastY + "-" + (lastM < 10 ? "0" + lastM : lastM));
|
|
|
|
$("#exportWord").click(function () {
|
|
//load提交
|
|
var index = layer.msg('正在导出...请稍候', { icon: 16, time: false, shade: 0.2 });
|
|
var startDate = nowY + "-01";
|
|
var endDate = lastY + "-" + (lastM < 10 ? "0" + lastM : lastM);
|
|
var value = $("#dataTime_1").val();
|
|
var carNum = $("#select_2").val();
|
|
if (value.indexOf(" - ") != -1 && carNum != null) {
|
|
startDate = value.split(" - ")[0]
|
|
endDate = value.split(" - ")[1];
|
|
}
|
|
var is_content = "";
|
|
$("input:checkbox[name='is_content']:checked").each(function (i) {
|
|
is_content = $(this).val();
|
|
});
|
|
$.ajax({
|
|
type: "post",
|
|
url: "../../ashx/CarHandler.ashx",
|
|
data: {
|
|
Action: "htmlToWord",
|
|
by1: encodeURIComponent(getFullCanvasDataURL("echarts_1")),
|
|
carNum: carNum,
|
|
orgId: OrgId,
|
|
startDate: startDate,
|
|
endDate: endDate,
|
|
is_content: is_content
|
|
},
|
|
dataType: "json",
|
|
success: function (data) {
|
|
layer.close(index);
|
|
if (data != null && data != "") {
|
|
if (data.code == "0") {
|
|
window.location.href = "../../" + data.url;
|
|
} else {
|
|
layer.msg(data.msg);
|
|
}
|
|
} else {
|
|
layer.msg("导出失败请联系管理员");
|
|
}
|
|
}, error: function (e) {
|
|
console.log(e)
|
|
layer.close(index);
|
|
layer.msg(e.msg);
|
|
}
|
|
});
|
|
})
|
|
});
|
|
|
|
var work_obj = {
|
|
selectYear: function (id) {
|
|
var getyear = new Date().getFullYear();
|
|
for (var i = getyear; i > (getyear - 5); i--) {
|
|
$(id).append("<option value = '" + i + "'>" + i + "</option>");
|
|
}
|
|
$(id).find("option[value='" + getyear + "']").attr("selected", true);
|
|
$(id).val(getyear);
|
|
form.render('select', "select_1");
|
|
work_obj.getStatisticsTra(getyear);
|
|
},
|
|
getCarList: function () {
|
|
$(function () {
|
|
//获取机构下所有车辆
|
|
var is_content = "";
|
|
$("input:checkbox[name='is_content']:checked").each(function (i) {
|
|
is_content = $(this).val();
|
|
});
|
|
$.ajax({
|
|
type: "post",
|
|
url: "../../ashx/CarHandler.ashx",
|
|
data: {
|
|
Action: "CarList",
|
|
OrgId: OrgId,
|
|
page: 1,
|
|
limit: 99999,
|
|
is_content: is_content
|
|
},
|
|
dataType: "json",
|
|
success: function (result) {
|
|
var orgStr = "<option value=''>---所有车辆---</option>";
|
|
result.data.forEach(function (obj, index, arr) {
|
|
orgStr += "<option value='" + obj.CAR_NUM + "'>" + obj.CAR_NUM + "</option>";
|
|
});
|
|
$("#select_2").append(orgStr);
|
|
form.render('select');
|
|
}
|
|
});
|
|
})
|
|
},
|
|
|
|
getStatisticsTra: function (year) {
|
|
var is_content = "";
|
|
$("input:checkbox[name='is_content']:checked").each(function (i) {
|
|
is_content = $(this).val();
|
|
});
|
|
$.ajax({
|
|
type: "POST",
|
|
url: "../../ashx/CarHandler.ashx",
|
|
data: {
|
|
Action: 'StatisticsTra',
|
|
orgId: OrgId,
|
|
year: year,
|
|
is_content: is_content,
|
|
random: new Date().getTime()
|
|
},
|
|
dataType: "json",
|
|
success: function (res) {
|
|
var xData = [], serData1 = [], serData2 = [], serData3 = [], count = 0;
|
|
res.forEach(function (item) {
|
|
xData.push(item.MONTH);
|
|
serData1.push(item.ZQC);
|
|
serData2.push(item.GWC);
|
|
serData3.push(item.SJC);
|
|
});
|
|
echarts_obj.echarts_1_fun(xData, serData1, serData2, serData3);
|
|
}
|
|
});
|
|
},
|
|
|
|
getStatisticsTra2: function (carNum, startDate, endDate) {
|
|
var is_content = "";
|
|
$("input:checkbox[name='is_content']:checked").each(function (i) {
|
|
is_content = $(this).val();
|
|
});
|
|
table.render({
|
|
elem: '#carAccList',
|
|
url: '../../ashx/CarHandler.ashx',
|
|
where: {
|
|
Action: 'getCarAccListByTime',
|
|
carNum: carNum,
|
|
orgId: OrgId,
|
|
startDate: startDate,
|
|
endDate: endDate,
|
|
is_content: is_content
|
|
},
|
|
cellMinWidth: 95,
|
|
page: true
|
|
, toolbar: true
|
|
, defaultToolbar: ['filter', 'print', 'exports']
|
|
, limits: [10, 15, 20, 25],
|
|
limit: 15,
|
|
id: "traListTable",
|
|
cols: [[
|
|
{ field: 'ORG_NAME', title: '所属消防机构', minWidth: 60, align: "center" },
|
|
{ field: 'CAR_PLATE', title: '车牌号', minWidth: 60, align: "center" },
|
|
{ field: 'START_TIME', title: '时间', minWidth: 60, align: "center" },
|
|
{
|
|
field: 'INOROUT', title: '方向', minWidth: 60, align: "center", templet: function (d) {
|
|
if (d.INOROUT == "0") {
|
|
return ' <span class="layui-badge layui-bg-blue">进入</span>';
|
|
} else if (d.INOROUT == "1") {
|
|
return ' <span class="layui-badge layui-bg-green">离开</span>';
|
|
} else {
|
|
return ' <span class="layui-badge layui-bg-gray">未知</span>';
|
|
}
|
|
}
|
|
},
|
|
{
|
|
field: 'CLASS', title: '车辆类别', minWidth: 60, align: "center", templet: function (d) {
|
|
if (d.CLASS == "0") {
|
|
return '<span class="layui-badge layui-bg-green">公务车</span>';
|
|
}
|
|
else if (d.CLASS == "1") {
|
|
return '<span class="layui-badge layui-bg-orange">执勤车</span>';
|
|
}
|
|
else if (d.CLASS == "2") {
|
|
return '<span class="layui-badge layui-bg-blue">地方车</span>';
|
|
}
|
|
else {
|
|
return '<span class="layui-badge layui-bg-gray">无类型</span>';
|
|
}
|
|
}
|
|
},
|
|
]]
|
|
});
|
|
}
|
|
};
|
|
|
|
var echarts_obj = {
|
|
//按年统计车辆出入记录
|
|
echarts_1_fun: function (xData, serData1, serData2, serData3) {
|
|
var myChart1 = echarts.init(document.getElementById('echarts_1'));
|
|
option = {
|
|
legend: {
|
|
data: ["执勤车", "公务车", "地方车"],
|
|
left: '50%',
|
|
textStyle: {
|
|
color: 'white', //坐标的字体颜色
|
|
},
|
|
},
|
|
toolbox: {
|
|
show: true,
|
|
feature: {
|
|
dataView: { show: true, readOnly: false },
|
|
magicType: { show: true, type: ['line', 'bar'] },
|
|
restore: { show: true },
|
|
saveAsImage: { show: true }
|
|
}
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
xAxis: [{
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: 'white', //坐标轴的颜色
|
|
},
|
|
},
|
|
type: 'category',
|
|
data: xData
|
|
}],
|
|
yAxis: {
|
|
type: 'value',
|
|
name: '单位：次',
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: 'white', //坐标的字体颜色
|
|
},
|
|
formatter: '{value} (次)'
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: 'white', //坐标轴的颜色
|
|
},
|
|
name: '次数',
|
|
type: 'value',
|
|
scale: true,
|
|
},
|
|
minInterval: 1
|
|
},
|
|
color: ['#FFB800', '#009688', '#3079EA'],
|
|
series: [{
|
|
name: '执勤车',
|
|
type: 'bar',
|
|
data: serData1,
|
|
itemStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
|
offset: 0,
|
|
color: "rgba(255,184,0,1)" // 0% 处的颜色
|
|
}, {
|
|
offset: 1,
|
|
color: "rgba(247,222,156,0.9)" // 100% 处的颜色
|
|
}], false),
|
|
barBorderRadius: [10, 10, 0, 0],
|
|
label: {
|
|
show: true, //开启显示
|
|
position: 'top', //在上方显示
|
|
textStyle: { //数值样式
|
|
color: 'rgba(255,184,0,1)',
|
|
fontSize: 12
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
name: '公务车',
|
|
type: 'bar',
|
|
data: serData2,
|
|
itemStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
|
offset: 0,
|
|
color: "rgba(0,150,136,1)" // 0% 处的颜色
|
|
}, {
|
|
offset: 1,
|
|
color: "rgba(168,230,224,0.9)" // 100% 处的颜色
|
|
}], false),
|
|
barBorderRadius: [10, 10, 0, 0],
|
|
label: {
|
|
show: true, //开启显示
|
|
position: 'top', //在上方显示
|
|
textStyle: { //数值样式
|
|
color: 'rgba(0,150,136,1)',
|
|
fontSize: 12
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
name: '地方车',
|
|
type: 'bar',
|
|
data: serData3,
|
|
itemStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
|
offset: 0,
|
|
color: "rgba(48,121,234,1)" // 0% 处的颜色
|
|
}, {
|
|
offset: 1,
|
|
color: "rgba(173,202,247,0.9)" // 100% 处的颜色
|
|
}], false),
|
|
barBorderRadius: [10, 10, 0, 0],
|
|
label: {
|
|
show: true, //开启显示
|
|
position: 'top', //在上方显示
|
|
textStyle: { //数值样式
|
|
color: 'rgba(48,121,234,1)',
|
|
fontSize: 12
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}]
|
|
};
|
|
myChart1.setOption(option);
|
|
window.onresize = function () {
|
|
myChart.resize();
|
|
};
|
|
}
|
|
|
|
};
|
|
|
|
//将图形转成base64的图片
|
|
function getFullCanvasDataURL(divId) {
|
|
//将第一个画布作为基准。
|
|
var baseCanvas = $("#" + divId).find("canvas").first()[0];
|
|
if (!baseCanvas) {
|
|
return false;
|
|
};
|
|
var width = baseCanvas.width;
|
|
var height = baseCanvas.height;
|
|
var ctx = baseCanvas.getContext("2d");
|
|
//遍历，将后续的画布添加到在第一个上
|
|
$("#" + divId).find("canvas").each(function (i, canvasObj) {
|
|
if (i > 0) {
|
|
var canvasTmp = $(canvasObj)[0];
|
|
ctx.drawImage(canvasTmp, 0, 0, width, height);
|
|
}
|
|
});
|
|
//获取base64位的url
|
|
return baseCanvas.toDataURL();
|
|
}
|
|
|
|
|
|
</script>
|
|
<link rel="stylesheet" href="../../css/right-list.css" media="all" />
|
|
<link rel="stylesheet" href="../../css/bulletframebg.css" media="all" />
|
|
</body>
|
|
</html>
|
|
|