// 筛选弹框
var layer = layui.layer;
var layerCreateIndex = '';
var layerCreateIndex2 = '';
layui.use('layer', function() {
layerCreateIndex = layer.open({
type: 1,
title: false,
closeBtn: 0,
// shadeClose: true,
skin: 'yourclass',
area: [
'380px', '300px'
],
content: $(".reportOut"),
success: function() {
$('.clsBtn,.cancel').click(function() {
layer.close(layerCreateIndex);
//关闭弹框
window.open(`${BASEURL}view/mainframe.jsp`);
})
}
})
})
//时间日期选择
layui.use([
'form', 'layedit', 'laydate'
], function() {});
layui.use('laydate', function() {
var laydate = layui.laydate;
// 开始日期
var insStart = laydate.render({
elem: '#startTime',
trigger: 'click',
value: '2021-04-01',
isInitValue: true,
done: function(value, date) { // 更新结束日期的最小日期
insEnd.config.min = lay.extend({}, date, {
month: date.month - 1
});
// 自动弹出结束日期的选择器
insEnd.config.elem[0].focus();
}
});
// 结束日期
var insEnd = laydate.render({
elem: '#endTime',
trigger: 'click',
value: '2021-04-30',
done: function(value, date) { // 更新开始日期的最大日期
insStart.config.max = lay.extend({}, date, {
month: date.month - 1
});
}
});
});
// 单位下拉 ajax请求
getNameList()
function getNameList() {
ajaxRequest(DEVICE_TYPE_COMPANYLIST, "POST", {}, function(result) {
let data = result.RESULT;
let items = '';
data.forEach(function(item, key) {
items += ``
})
$('#getNameList').html(items);
}, function(errorMsg) {
alert("请求数据失败!");
})
}
/* 筛选提交发送请求 */
$('#nextStep').click(function() {
var startTimes = $('#startTime').val();
var endTimes = $('#endTime').val();
//获取表单的值 并转换成对象
let allParam = serializeArrayToObj($("#reportOutForm").serializeArray());
//验证数据是否为空
let res = validParamIsEmpty(allParam, {
"startTime": "请选择开始日期",
"endTime": "请选择结束日期",
"companyId": "请选择建筑物",
});
if (res.code == -1) {
alert(res.msg);
return;
}
//验证通过 请求ajax
ajaxRequest(MONTH_REPORT, "POST", allParam, function(result) {
// layer.close(layerCreateIndex);
$('#reportOutForm')[0].reset();
layui.use('layer', function() {
layerCreateIndex2 = layer.open({
type: 1,
title: false,
closeBtn: 0,
skin: 'yourclass',
area: [
'700px', '700px'
],
content: $(".reportContentOut"),
success: function() {
var data = result.data;
var companyInfo = data.companyInfo; //单位信息
var deviceStatistic = data.deviceStatistic; //告警处理
var deviceOnly = data.deviceOnly; //设备离线情况统计
//大标题和时间动态赋值
(function() {
$('#companyName').html(companyInfo.ownerName);
$('#staticTime').text(`${startTimes}日 到 ${endTimes}日`);
})();
//单位信息
(function() {
let items = '';
items = `
| ${companyInfo.ownerName} |
${companyInfo.ownerAddress} |
`
$('#companyData').html(items);
$('#staticTime').html()
})();
//设备类型统计信息
(function() {
var typeList = data.typeList.deviceType;
let items = '';
let items2 = ''
typeList.forEach(function(item, key) {
items += `
| ${item.TypeName} |
${item.Num} |
${item.TransmissionModel} |
${item.Business} |
`
})
items2 = `
| 统计总数 |
${data.typeList.deviceNum} |
|
|
`
$('#typeList').html(items + items2);
})();
// 告警处理水系统
(function() {
var waterAlarm = JSON.parse(deviceStatistic.waterAlarm);
waterAlarm = waterAlarm.RESULT[0];
var waterAlarmRate = waterAlarm.count ? (waterAlarm.sum / waterAlarm.count) * 100 : 100;
if (waterAlarmRate == 100) {
$('.waterSummary').html(` 目前数据反应：统计时段内水系统告警报告数量：${waterAlarm.count}条。报告数量良好。
提示：消防水设备状态良好，需要保持。`)
} else {
$('.waterSummary').html(` 目前数据反应：统计时段内水系统告警报告数量：${waterAlarm.count}条。报告数量良好。
提示：有一定的火系统隐患或存在系统故障，需要排查。`)
}
let items = '';
items = `
| ${waterAlarm.count} |
${waterAlarm.sum} |
${waterAlarm.count- waterAlarm.sum} |
${waterAlarmRate}% |
`
$('#water_statistics').html(items);
(function() {
var myChart = echarts.init(document.querySelector("#waterChart1"));
var option = {
tooltip: {
trigger: "axis",
},
legend: {
data: ["水系统"],
bottom: "0",
textStyle: {
color: "#0184d5",
fontSize: "12",
},
},
grid: {
left: "10",
right: "10",
top: "30",
bottom: "30",
containLabel: true,
},
xAxis: [{
type: "category",
boundaryGap: false,
data: waterAlarm.day_list,
// data: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "26", "28", "29", "30"],
axisLabel: {
textStyle: {
color: "rgba(255, 255, 255, .3)",
fontSize: 12,
},
axisLine: {
lineStyle: {
color: "rgba(255, 255, 255, .1)",
},
},
},
}, ],
yAxis: [{
type: "value",
// 去除刻度线
axisTick: {
show: false,
},
// y轴的线颜色
axisLine: {
lineStyle: {
color: "#444",
opacity: .3
},
},
// 文字的颜色
axisLabel: {
textStyle: {
color: "rgba(255, 255, 255, .6)",
fontSize: 12,
},
},
// 修改分割线的颜色
splitLine: {
lineStyle: {
color: "#aaa", // 分割线颜色
opacity: .5
}
},
}, ],
series: [{
name: "水系统",
type: "line",
smooth: true,
// 单独修改当前线条的样式
lineStyle: {
color: "#0184d5",
width: 2,
},
areaStyle: {
// 渐变色，只需要复制即可
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1, [{
offset: 0,
color: "rgba(1, 132, 213, 0.4)", // 渐变色的起始颜色
},
{
offset: 0.8,
color: "rgba(1, 132, 213, 0.1)", // 渐变线的结束颜色
},
],
false
),
// 影子效果
shadowColor: "rgba(0, 0, 0, 0.1)",
},
// 设置拐点形状
symbol: "circle",
// 拐点大小
symbolSize: 8,
// 刚开始时不显示拐点，鼠标经过才显示
showSymbol: false,
// 设置拐点颜色以及边框
itemStyle: {
color: "#0184d5",
borderColor: "rgba(221, 220, 107, .1)",
borderWidth: 12,
},
data: waterAlarm.count_list
// data: [30, 40, 30, 40, 30, 40, 30, 60, 20, 40, 30, 40, 30, 40, 30, 40, 30, 60, 20, 40, 30, 40, 30, 40, 30, 40, 20, 50, 40, 30, 40, 20, 50, 40, 30, ]
}],
};
myChart.setOption(option);
//echarts赋值到src
var img1 = document.getElementById('waterChart1_img');
setTimeout(function() {
img1.src = myChart.getDataURL();
}, 1200)
})();
})();
// 告警处理火系统
(function() {
var fireAlarm = JSON.parse(deviceStatistic.fireAlarm);
fireAlarm = fireAlarm.RESULT[0];
$('#fireCount').html(fireAlarm.count)
var fireAlarmRate = fireAlarm.count ? (fireAlarm.sum / fireAlarm.count) * 100 : 100;
if (fireAlarmRate == 100) {
$('.fireSummary').html(` 目前数据反应：火系统告警报告数量：${fireAlarm.count}条。报告数量良好。
提示：消防火设备状态良好，需要保持 。`)
} else {
$('.fireSummary').html(` 目前数据反应：火系统告警报告数量：${fireAlarm.count}条。报告数量良好。
提示：提示：有一定的火系统隐患或存在系统故障，需要排查。`)
}
let items = '';
items = `
| ${ fireAlarm.count} |
${ fireAlarm.sum} |
${ fireAlarm.count- fireAlarm.sum} |
${ fireAlarmRate}% |
`
$('#fire_statistics').html(items);
(function() {
var myChart = echarts.init(document.querySelector("#fireChart1"));
var option = {
tooltip: {
trigger: "axis",
},
legend: {
data: ["火系统"],
bottom: "0",
textStyle: {
color: "#ed3f35",
fontSize: "12",
},
},
grid: {
left: "10",
right: "10",
top: "30",
bottom: "30",
containLabel: true,
},
xAxis: [{
type: "category",
boundaryGap: false,
data: fireAlarm.day_list,
// data: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "26", "28", "29", "30"],
axisLabel: {
textStyle: {
color: "rgba(255, 255, 255, .3)",
fontSize: 12,
},
axisLine: {
lineStyle: {
color: "red",
},
},
},
}, ],
yAxis: [{
type: "value",
// 去除刻度线
axisTick: {
show: false,
},
// y轴的线颜色
axisLine: {
lineStyle: {
color: "#444",
opacity: .3
},
},
// 文字的颜色
axisLabel: {
textStyle: {
color: "rgba(255, 255, 255, .6)",
fontSize: 12,
},
},
// 修改分割线的颜色
splitLine: {
lineStyle: {
color: "#aaa", // 分割线颜色
opacity: .5
}
},
}, ],
series: [{
name: "火系统",
type: "line",
smooth: true,
// 单独修改当前线条的样式
lineStyle: {
color: "#ed3f35",
width: 2,
},
areaStyle: {
// 渐变色，只需要复制即可
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1, [{
offset: 0,
color: "rgba(237,63,53, 0.4)", // 渐变色的起始颜色
},
{
offset: 0.8,
color: "rgba(237,63,53, 0.1)", // 渐变线的结束颜色
},
],
false
),
// 影子效果
shadowColor: "rgba(0, 0, 0, 0.1)",
},
// 设置拐点形状
symbol: "circle",
// 拐点大小
symbolSize: 8,
// 刚开始时不显示拐点，鼠标经过才显示
showSymbol: false,
// 设置拐点颜色以及边框
itemStyle: {
color: "#ed3f35",
borderColor: "rgba(221, 220, 107, .1)",
borderWidth: 12,
},
data: fireAlarm.count_list
// data: [130, 10, 20, 40, 30, 40, 80, 60, 20, 40, 90, 40, 20, 140, 30, 40, 130, 20, 20, 40, 80, 70, 30, 40, 30, 120, 20, 99, 50, 20, ],
}, ],
};
myChart.setOption(option);
//echarts赋值到src
var img1 = document.getElementById('fireChart1_img');
setTimeout(function() {
img1.src = myChart.getDataURL();
}, 1200)
})();
})();
// 设备离线水系统
(function() {
var waterDeviceOnly = JSON.parse(deviceOnly.waterDeviceOnly);
waterDeviceOnly = waterDeviceOnly.RESULT[0];
var waterOnlyRate = waterDeviceOnly.count ? (waterDeviceOnly.sum / waterDeviceOnly.count) * 100 : 100;
if (waterOnlyRate == 100) {
$('.waterOnlySummary').html(` 目前数据反应：统计时段内水系统告警报告数量：${waterDeviceOnly.count}条。报告数量良好。
提示：数据接收情况稳定，需要保持。`)
} else {
$('.waterOnlySummary').html(` 目前数据反应：统计时段内水系统告警报告数量：${waterDeviceOnly.count}条。报告数量良好。
提示：有一定的水系统隐患或存在系统故障，需要排查。`)
}
let items = '';
items = `
| ${ waterDeviceOnly.count} |
${ waterDeviceOnly.sum} |
${ waterDeviceOnly.count- waterDeviceOnly.sum} |
${ waterOnlyRate}% |
`
$('#waterDeviceOnly').html(items);
(function() {
var myChart = echarts.init(document.querySelector("#waterOnlyChart"));
var option = {
tooltip: {
trigger: "axis",
},
legend: {
data: ["水系统"],
bottom: "0",
textStyle: {
color: "#0184d5",
fontSize: "12",
},
},
grid: {
left: "10",
right: "10",
top: "30",
bottom: "30",
containLabel: true,
},
xAxis: [{
type: "category",
boundaryGap: false,
data: waterDeviceOnly.day_list,
// data: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "26", "28", "29", "30"],
axisLabel: {
textStyle: {
color: "rgba(255, 255, 255, .3)",
fontSize: 12,
},
axisLine: {
lineStyle: {
color: "red",
},
},
},
}, ],
yAxis: [{
type: "value",
// 去除刻度线
axisTick: {
show: false,
},
// y轴的线颜色
axisLine: {
lineStyle: {
color: "#444",
opacity: .3
},
},
// 文字的颜色
axisLabel: {
textStyle: {
color: "rgba(255, 255, 255, .6)",
fontSize: 12,
},
},
// 修改分割线的颜色
splitLine: {
lineStyle: {
color: "#aaa", // 分割线颜色
opacity: .5
}
},
}, ],
series: [{
name: "水系统",
type: "line",
smooth: true,
// 单独修改当前线条的样式
lineStyle: {
color: "#0184d5",
width: 2,
},
areaStyle: {
// 渐变色，只需要复制即可
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1, [{
offset: 0,
color: "rgba(1, 132, 213, 0.4)", // 渐变色的起始颜色
},
{
offset: 0.8,
color: "rgba(1, 132, 213, 0.1)", // 渐变线的结束颜色
},
],
false
),
// 影子效果
shadowColor: "rgba(0, 0, 0, 0.1)",
},
// 设置拐点形状
symbol: "circle",
// 拐点大小
symbolSize: 8,
// 刚开始时不显示拐点，鼠标经过才显示
showSymbol: false,
// 设置拐点颜色以及边框
itemStyle: {
color: "#0184d5",
borderColor: "rgba(221, 220, 107, .1)",
borderWidth: 12,
},
data: waterDeviceOnly.count_list,
// data: [30, 40, 30, 40, 30, 40, 30, 60, 20, 40, 30, 40, 30, 40, 30, 40, 30, 60, 20, 40, 30, 40, 30, 40, 30, 40, 20, 50, 40, 30]
}],
};
myChart.setOption(option);
//echarts赋值到src
var img1 = document.getElementById('waterOnlyChart_img');
setTimeout(function() {
img1.src = myChart.getDataURL();
}, 1200)
})();
})();
// 设备离线火系统
(function() {
var fireOnly = JSON.parse(deviceOnly.fireOnly);
fireOnly = fireOnly.RESULT[0];
$('#fireOnlyCount').html(fireOnly.count);
var fireOnlyRate = fireOnly.count ? (fireOnly.sum / fireOnly.count) * 100 : 100;
if (fireOnlyRate == 100) {
$('.fireOnlySummary').html(` 目前数据反应：统计时段内火系统告警报告数量：${fireOnlyRate}条。报告数量良好。
提示：数据接收情况稳定，需要保持。`)
} else {
$('.fireOnlySummary').html(` 目前数据反应：统计时段内火系统告警报告数量：${fireOnlyRate}条。报告数量良好。
提示：有一定的火系统隐患或存在系统故障，需要排查。`)
}
let items = '';
items = `
| ${ fireOnly.count} |
${ fireOnly.sum} |
${ fireOnly.count- fireOnly.sum} |
${fireOnlyRate}% |
`
$('#fireOnly').html(items);
(function() {
var myChart = echarts.init(document.querySelector("#fireOnlyChart"));
var option = {
tooltip: {
trigger: "axis",
},
legend: {
data: ["火系统"],
bottom: "0",
textStyle: {
color: "#ed3f35",
fontSize: "12",
},
},
grid: {
left: "10",
right: "10",
top: "30",
bottom: "30",
containLabel: true,
},
xAxis: [{
type: "category",
boundaryGap: false,
data: fireOnly.day_list,
// data: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "26", "28", "29", "30"],
axisLabel: {
textStyle: {
color: "rgba(255, 255, 255, .3)",
fontSize: 12,
},
axisLine: {
lineStyle: {
color: "red",
},
},
},
}, ],
yAxis: [{
type: "value",
// 去除刻度线
axisTick: {
show: false,
},
// y轴的线颜色
axisLine: {
lineStyle: {
color: "#444",
opacity: .3
},
},
// 文字的颜色
axisLabel: {
textStyle: {
color: "rgba(255, 255, 255, .6)",
fontSize: 12,
},
},
// 修改分割线的颜色
splitLine: {
lineStyle: {
color: "#aaa", // 分割线颜色
opacity: .5
}
},
}, ],
series: [{
name: "火系统",
type: "line",
smooth: true,
// 单独修改当前线条的样式
lineStyle: {
color: "#ed3f35",
width: 2,
},
areaStyle: {
// 渐变色，只需要复制即可
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1, [{
offset: 0,
color: "rgba(237,63,53, 0.4)", // 渐变色的起始颜色
},
{
offset: 0.8,
color: "rgba(237,63,53, 0.1)", // 渐变线的结束颜色
},
],
false
),
// 影子效果
shadowColor: "rgba(0, 0, 0, 0.1)",
},
// 设置拐点形状
symbol: "circle",
// 拐点大小
symbolSize: 8,
// 刚开始时不显示拐点，鼠标经过才显示
showSymbol: false,
// 设置拐点颜色以及边框
itemStyle: {
color: "#ed3f35",
borderColor: "rgba(221, 220, 107, .1)",
borderWidth: 12,
},
data: fireOnly.count_list,
// data: [130, 10, 20, 40, 30, 40, 80, 60, 20, 40, 90, 40, 20, 140, 30, 40, 130, 20, 20, 40, 80, 70, 30, 40, 30, 120, 20, 99, 50, 20, ],
}, ],
};
myChart.setOption(option);
//echarts赋值到src
var img1 = document.getElementById('fireOnlyChart_img');
setTimeout(function() {
img1.src = myChart.getDataURL();
}, 1200)
})();
})();
// 设备离线烟感
(function() {
var smokeOnly = JSON.parse(deviceOnly.smokeOnly);
smokeOnly = smokeOnly.RESULT[0];
$('#somkeOnlyCount').html(smokeOnly.count);
var smokeOnlyRate = smokeOnly.count ? (smokeOnly.sum / smokeOnly.count) * 100 : 100;
if (smokeOnlyRate == 100) {
$('.smokeOnlySummary').html(` 目前数据反应：统计时段内烟感告警报告数量：${smokeOnly.count}条。报告数量良好。
提示：数据接收情况稳定，需要保持。`)
} else {
$('.smokeOnlySummary').html(` 目前数据反应：统计时段内烟感告警报告数量：${smokeOnly.count}条。报告数量良好。
提示：有一定的烟感隐患或存在系统故障，需要排查。`)
}
let items = '';
items = `
| ${ smokeOnly.count} |
${ smokeOnly.sum} |
${ smokeOnly.count- smokeOnly.sum} |
${ smokeOnlyRate}% |
`
$('#smokeOnly').html(items);
(function() {
var myChart = echarts.init(document.querySelector("#smokeOnlyChart"));
var option = {
tooltip: {
trigger: "axis",
},
legend: {
data: ["烟感"],
bottom: "0",
textStyle: {
color: "#F4A460",
fontSize: "12",
},
},
grid: {
left: "10",
right: "10",
top: "30",
bottom: "30",
containLabel: true,
},
xAxis: [{
type: "category",
boundaryGap: false,
data: smokeOnly.day_list,
// data: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "26", "28", "29", "30"],
axisLabel: {
textStyle: {
color: "rgba(255, 255, 255, .3)",
fontSize: 12,
},
axisLine: {
lineStyle: {
color: "red",
},
},
},
}, ],
yAxis: [{
type: "value",
// 去除刻度线
axisTick: {
show: false,
},
// y轴的线颜色
axisLine: {
lineStyle: {
color: "#444",
opacity: .3
},
},
// 文字的颜色
axisLabel: {
textStyle: {
color: "rgba(255, 255, 255, .6)",
fontSize: 12,
},
},
// 修改分割线的颜色
splitLine: {
lineStyle: {
color: "#aaa", // 分割线颜色
opacity: .5
}
},
}, ],
series: [{
name: "烟感",
type: "line",
smooth: true,
// 单独修改当前线条的样式
lineStyle: {
color: "#F4A460",
width: 2,
},
areaStyle: {
// 渐变色，只需要复制即可
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1, [{
offset: 0,
color: "rgba(244,164,96, 0.4)", // 渐变色的起始颜色
},
{
offset: 0.8,
color: "rgba(244,164,96, 0.1)", // 渐变线的结束颜色
},
],
false
),
// 影子效果
shadowColor: "rgba(0, 0, 0, 0.1)",
},
// 设置拐点形状
symbol: "circle",
// 拐点大小
symbolSize: 8,
// 刚开始时不显示拐点，鼠标经过才显示
showSymbol: false,
// 设置拐点颜色以及边框
itemStyle: {
color: "#F4A460",
borderColor: "rgba(221, 220, 107, .1)",
borderWidth: 12,
},
data: smokeOnly.count_list,
// data: [130, 10, 20, 40, 30, 40, 80, 60, 20, 40, 90, 40, 20, 140, 30, 40, 130, 20, 20, 40, 80, 70, 30, 40, 30, 120, 20, 99, 50, 20, ],
}, ],
};
myChart.setOption(option);
//echarts赋值到src
var img1 = document.getElementById('smokeOnlyChart_img');
setTimeout(function() {
img1.src = myChart.getDataURL();
}, 1200)
})();
})();
//关闭弹框
$('.clsBtn,.cancel').click(function() {
window.open(`${BASEURL}view/mainframe.jsp`);
})
}
})
})
}, function(errorMsg) {
alert("异常错误!");
});
});
// 打印
(function() {
$("#btnPrint").click(function() {
print_detail()
});
var print_detail = function() {
//打印前echarts图表转换成图片 start
$('#waterChart1_img,#fireChart1_img,#waterOnlyChart_img,#fireOnlyChart_img,#smokeOnlyChart_img').show()
$('#waterChart1,#fireChart1,#waterOnlyChart,#fireOnlyChart,#smokeOnlyChart').hide()
// end
var div1_label1 = document.getElementById('printArea').innerHTML;
var hkey_key;
var hkey_root = 'HKEY_CURRENT_USER';
var hkey_path = '\\Software\\Micorsoft\\Internet Explorer\\PageSetup\\';
var print_win = window.open('打印窗口', '_blank');
var div = document.createElement('div');
div.setAttribute('width', '100%');
div.setAttribute('height', '100%');
var div_print = document.createElement('div');
div_print.setAttribute('style', 'width:595px;height:842px;padding:50px 20px;margin:0px auto 0px auto');
div_print.innerHTML = div1_label1;
div.appendChild(div_print);
print_win.document.write(div.innerHTML);
print_win.document.close();
try {
var RegWsh = new ActiveXObject('WScript.Shell');
hkey_key = 'header';
RegWsh.RegWrite(hkey_root + hkey_path + hkey_key, '');
hkey_key = 'footer';
RegWsh.RegWrite(hkey_root + hkey_path + hkey_key, '');
} catch (e) {}
print_win.print();
print_win.close();
}
})()