2024-12-06 18:32:24 +08:00
|
|
|
|
let form, layer, laydate;
|
|
|
|
|
|
let user = getUser();
|
|
|
|
|
|
let myChart12 = echarts.init(document.getElementById('echarts-one'));
|
|
|
|
|
|
layui.use(['form', 'layer', 'laydate'], function () {
|
|
|
|
|
|
layer = layui.layer;
|
|
|
|
|
|
form = layui.form;
|
|
|
|
|
|
laydate = layui.laydate;
|
|
|
|
|
|
laydate.render({
|
|
|
|
|
|
elem: '#ID-laydate-rangeLinked',
|
|
|
|
|
|
range: ['#startDay', '#endDay'],
|
|
|
|
|
|
rangeLinked: true,
|
|
|
|
|
|
btns: ['confirm']
|
|
|
|
|
|
});
|
|
|
|
|
|
$('#startDay').val(getNowTime());
|
|
|
|
|
|
$('#endDay').val(getNowTime());
|
|
|
|
|
|
form.render();
|
|
|
|
|
|
getVioStatistics();
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
// 查询
|
|
|
|
|
|
function query() {
|
|
|
|
|
|
myChart12.dispose();
|
|
|
|
|
|
myChart12 = echarts.init(document.getElementById('echarts-one'));
|
|
|
|
|
|
getVioStatistics();
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function getVioStatistics() {
|
|
|
|
|
|
let param = {
|
|
|
|
|
|
startTime: $('#startDay').val(),
|
|
|
|
|
|
endTime: $('#endDay').val(),
|
|
|
|
|
|
currentUserId: user.userId + '',
|
|
|
|
|
|
isSup: user.isSup,
|
|
|
|
|
|
currentUserOrgId: user.orgId
|
|
|
|
|
|
};
|
|
|
|
|
|
$.ajax({
|
|
|
|
|
|
headers: {
|
|
|
|
|
|
"encrypt": sm3(JSON.stringify(param))
|
|
|
|
|
|
},
|
|
|
|
|
|
url: dataUrl + 'proteam/pot/superStatistics/getVioStatistics?token=' + token,
|
|
|
|
|
|
data: param,
|
|
|
|
|
|
type: 'POST',
|
|
|
|
|
|
async: true,
|
|
|
|
|
|
success: function (result) {
|
|
|
|
|
|
if (result.code === 200) {
|
|
|
|
|
|
initEchartsOne(result.data);
|
|
|
|
|
|
} else if (result.code === 401) {
|
|
|
|
|
|
logout(1)
|
|
|
|
|
|
}
|
|
|
|
|
|
}, error: function () {
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 导出
|
|
|
|
|
|
function exportExcel() {
|
|
|
|
|
|
let startTime = $("#startDay").val(),
|
|
|
|
|
|
endTime = $("#endDay").val(),
|
|
|
|
|
|
currentUserId = user.userId + '',
|
|
|
|
|
|
isSup = user.isSup,
|
|
|
|
|
|
currentUserOrgId = user.orgId;
|
|
|
|
|
|
let loadingMsg = layer.msg("数据导出中,请稍候...", { icon: 16, scrollbar: false, time: 0, });
|
|
|
|
|
|
let url = dataUrl + "proteam/pot/superStatistics/exportExcel?startTime=" + startTime + "&endTime=" + endTime + "¤tUserId=" + currentUserId + "&isSup=" + isSup + "¤tUserOrgId=" + currentUserOrgId + "&token=" + token;
|
|
|
|
|
|
let xhr = new XMLHttpRequest();
|
|
|
|
|
|
xhr.open("get", url, true);
|
|
|
|
|
|
xhr.responseType = "blob"; // 转换流
|
|
|
|
|
|
xhr.setRequestHeader("encrypt",
|
|
|
|
|
|
sm3(JSON.stringify({
|
|
|
|
|
|
startTime: startTime,
|
|
|
|
|
|
endTime: endTime,
|
|
|
|
|
|
currentUserId: currentUserId,
|
|
|
|
|
|
isSup: isSup,
|
|
|
|
|
|
currentUserOrgId: currentUserOrgId
|
|
|
|
|
|
})));
|
2024-12-13 18:24:28 +08:00
|
|
|
|
xhr.setRequestHeader('encryption','encryption');
|
|
|
|
|
|
xhr.setRequestHeader('token',token);
|
2024-12-06 18:32:24 +08:00
|
|
|
|
xhr.onload = function () {
|
|
|
|
|
|
layer.close(loadingMsg);
|
|
|
|
|
|
if (this.status === 200) {
|
|
|
|
|
|
let blob = this.response;
|
|
|
|
|
|
var a = document.createElement("a");
|
|
|
|
|
|
var url = window.URL.createObjectURL(blob);
|
|
|
|
|
|
a.href = url;
|
|
|
|
|
|
a.download = startTime + '至' + endTime + "违章统计" + ".xlsx"; // 文件名
|
|
|
|
|
|
} else {
|
|
|
|
|
|
layer.msg("服务异常,请稍后重试", { icon: 16, scrollbar: false, time: 2000 });
|
|
|
|
|
|
}
|
|
|
|
|
|
a.click();
|
|
|
|
|
|
window.URL.revokeObjectURL(url);
|
|
|
|
|
|
};
|
|
|
|
|
|
xhr.send();
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/*按违章等级统计-echarts*/
|
|
|
|
|
|
function initEchartsOne(list) {
|
|
|
|
|
|
let myData5 = []; // 地市
|
|
|
|
|
|
let fwrs = []; // 站班会数量
|
|
|
|
|
|
let xdrs = []; // 违章数量
|
|
|
|
|
|
let zhl = []; // 违章率
|
|
|
|
|
|
$.each(list, function (index, item) {
|
|
|
|
|
|
myData5.push(item.orgName);
|
|
|
|
|
|
fwrs.push(item.classNum);
|
|
|
|
|
|
xdrs.push(item.vioNum);
|
|
|
|
|
|
zhl.push(item.vioRate);
|
|
|
|
|
|
})
|
|
|
|
|
|
let option = {
|
|
|
|
|
|
backgroundColor: "transparent",
|
|
|
|
|
|
tooltip: {
|
|
|
|
|
|
trigger: "axis",
|
|
|
|
|
|
axisPointer: {
|
|
|
|
|
|
type: "shadow",
|
|
|
|
|
|
},
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: "#fff",
|
|
|
|
|
|
},
|
|
|
|
|
|
backgroundColor: "rgba(0, 58, 99, 0.8)", //设置背景颜色
|
|
|
|
|
|
borderColor: "rgba(0, 58, 99, 0.8)",
|
|
|
|
|
|
confine: true,
|
|
|
|
|
|
formatter: `{b}<br>{a}：{c}个<br>{a1}：{c1}个<br>{a2}：{c2}%`,
|
|
|
|
|
|
},
|
|
|
|
|
|
legend: {
|
|
|
|
|
|
itemWidth: 12,
|
|
|
|
|
|
itemHeight: 8,
|
|
|
|
|
|
itemGap: 20,
|
|
|
|
|
|
right: "2%",
|
|
|
|
|
|
top: "3%",
|
|
|
|
|
|
x: "center",
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
fontSize: 14,
|
|
|
|
|
|
color: "#000",
|
|
|
|
|
|
},
|
|
|
|
|
|
data: ["站班会数量", "违章数量", "违章占比"],
|
|
|
|
|
|
selectedMode: false,
|
|
|
|
|
|
},
|
|
|
|
|
|
grid: {
|
|
|
|
|
|
top: "8%",
|
|
|
|
|
|
left: "2%",
|
|
|
|
|
|
right: "2%",
|
|
|
|
|
|
bottom: "2%",
|
|
|
|
|
|
containLabel: true,
|
|
|
|
|
|
},
|
|
|
|
|
|
xAxis: {
|
|
|
|
|
|
type: "category",
|
|
|
|
|
|
data: myData5,
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
color: "#000",
|
|
|
|
|
|
interval: 0,
|
|
|
|
|
|
fontSize: 12,
|
|
|
|
|
|
},
|
|
|
|
|
|
axisLine: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
color: "rgba(127, 214, 255, .4)",
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
splitLine: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
},
|
|
|
|
|
|
axisTick: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
yAxis: [
|
|
|
|
|
|
{
|
|
|
|
|
|
type: "value",
|
|
|
|
|
|
name: "数量 / 个",
|
|
|
|
|
|
splitNumber: 5,
|
|
|
|
|
|
nameTextStyle: {
|
|
|
|
|
|
color: "#000",
|
|
|
|
|
|
fontSize: 12,
|
|
|
|
|
|
align: "center",
|
|
|
|
|
|
// padding: [0, 20, 5, 0],
|
|
|
|
|
|
},
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
formatter: "{value}",
|
|
|
|
|
|
color: "rgba(95, 187, 235, 1)",
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
fontSize: 14,
|
|
|
|
|
|
color: "#000",
|
|
|
|
|
|
lineHeight: 16,
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
axisTick: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
},
|
|
|
|
|
|
splitLine: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
color: "rgba(28, 130, 197, .3)",
|
|
|
|
|
|
type: "dashed",
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: "违章占比 / %",
|
|
|
|
|
|
splitNumber: 5,
|
|
|
|
|
|
max: 100,
|
|
|
|
|
|
type: "value",
|
|
|
|
|
|
nameTextStyle: {
|
|
|
|
|
|
color: "#000",
|
|
|
|
|
|
fontSize: 12,
|
|
|
|
|
|
align: "center",
|
|
|
|
|
|
// padding: [0, 0, 5, 0],
|
|
|
|
|
|
},
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
fontSize: 12,
|
|
|
|
|
|
color: "#000",
|
|
|
|
|
|
},
|
|
|
|
|
|
axisLine: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
},
|
|
|
|
|
|
axisTick: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
},
|
|
|
|
|
|
splitLine: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
series: [
|
|
|
|
|
|
{
|
|
|
|
|
|
name: "站班会数量",
|
|
|
|
|
|
type: "bar",
|
|
|
|
|
|
data: fwrs,
|
|
|
|
|
|
barWidth: "15px",
|
|
|
|
|
|
barGap: "50%",
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
borderColor: "#3681FF",
|
|
|
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
|
|
|
{
|
|
|
|
|
|
offset: 0,
|
|
|
|
|
|
color: "rgba(15, 51, 82, 1)",
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
offset: 1,
|
|
|
|
|
|
color: "rgba(0, 168, 255, 1)",
|
|
|
|
|
|
},
|
|
|
|
|
|
]),
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
label: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
position: "top",
|
|
|
|
|
|
fontSize: 12,
|
|
|
|
|
|
color: "#000",
|
|
|
|
|
|
offset: [0, -5],
|
|
|
|
|
|
formatter: "{c}",
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: "违章数量",
|
|
|
|
|
|
type: "bar",
|
|
|
|
|
|
data: xdrs,
|
|
|
|
|
|
barWidth: "15px",
|
|
|
|
|
|
barGap: "50%",
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
borderColor: "rgba(54, 234, 255, 1)",
|
|
|
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
|
|
|
{
|
|
|
|
|
|
offset: 0,
|
|
|
|
|
|
color: "rgba(15, 51, 82, 1)",
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
offset: 1,
|
|
|
|
|
|
color: "rgba(21, 219, 203, 1)",
|
|
|
|
|
|
},
|
|
|
|
|
|
]),
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
label: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
position: "top",
|
|
|
|
|
|
fontSize: 12,
|
|
|
|
|
|
color: "#000",
|
|
|
|
|
|
offset: [0, -5],
|
|
|
|
|
|
formatter: "{c}",
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: "违章占比",
|
|
|
|
|
|
type: "line",
|
|
|
|
|
|
yAxisIndex: 1,
|
|
|
|
|
|
showSymbol: true,
|
|
|
|
|
|
symbolSize: 8,
|
|
|
|
|
|
smooth: true,
|
|
|
|
|
|
symbol: "circle",
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
color: "#02D6B0",
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
color: "#02D6B0",
|
|
|
|
|
|
borderColor: "#fff",
|
|
|
|
|
|
borderWidth: 1,
|
|
|
|
|
|
},
|
|
|
|
|
|
areaStyle: {
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
color: new echarts.graphic.LinearGradient(
|
|
|
|
|
|
0,
|
|
|
|
|
|
0,
|
|
|
|
|
|
0,
|
|
|
|
|
|
1,
|
|
|
|
|
|
[
|
|
|
|
|
|
{
|
|
|
|
|
|
offset: 0,
|
|
|
|
|
|
color: "rgba(0, 255, 246, 0.5)",
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
offset: 1,
|
|
|
|
|
|
color: "rgba(0, 255, 246, 0)",
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
false
|
|
|
|
|
|
),
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
data: zhl, // 折线图的数据
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
};
|
|
|
|
|
|
myChart12.setOption(option, true);
|
|
|
|
|
|
window.addEventListener("resize", function () {
|
|
|
|
|
|
myChart12.resize();
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
