349 lines
11 KiB
JavaScript
349 lines
11 KiB
JavaScript
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
|
||
})));
|
||
xhr.setRequestHeader('encryption','encryption');
|
||
xhr.setRequestHeader('token',token);
|
||
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) {
|
||
/* list = [{orgName:'合肥',classNum:30,vioNum:3,vioRate:10},
|
||
{orgName:'芜湖',classNum:42,vioNum:5,vioRate:11},
|
||
{orgName:'滁州',classNum:11,vioNum:2,vioRate:18},
|
||
{orgName:'马鞍山',classNum:21,vioNum:3,vioRate:14},
|
||
{orgName:'宣城',classNum:21,vioNum:3,vioRate:14},
|
||
]; */
|
||
list = [{orgName:'合肥',classNum:15,vioNum:36,vioRate:51},
|
||
{orgName:'芜湖',classNum:12,vioNum:18,vioRate:30},
|
||
{orgName:'滁州',classNum:46,vioNum:23,vioRate:69},
|
||
{orgName:'马鞍山',classNum:22,vioNum:6,vioRate:28},
|
||
{orgName:'宣城',classNum:12,vioNum:3,vioRate:15},
|
||
];
|
||
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: ["站班会数量", "违章数量", "违章占比"],
|
||
// data: ["站班会数量", "异常上报数量", "上报占比"],
|
||
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: "违章占比 / %",
|
||
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: "违章数量",
|
||
// name: "异常上报数量",
|
||
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: "违章占比",
|
||
// name: "上报占比",
|
||
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();
|
||
});
|
||
} |