html/js/monthReport.js

// 筛选弹框
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 += `<option value=''>请选择</option><option value="${
                 item.owner_id
             }">${
                 item.owner_name
             }</option>`
        })
        $('#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 = ` <tr>
                        <td>${companyInfo.ownerName}</td>
                        <td>${companyInfo.ownerAddress} </td>
                    </tr>`
                        $('#companyData').html(items);
                        $('#staticTime').html()
                    })();

                    //设备类型统计信息
                    (function() {
                        var typeList = data.typeList.deviceType;
                        let items = '';
                        let items2 = ''
                        typeList.forEach(function(item, key) {
                            items += ` <tr>
                        <td>${item.TypeName} </td>
                        <td>${item.Num}</td>
                        <td>${item.TransmissionModel}</td>
                        <td>${item.Business}</td>
                    </tr>`
                        })
                        items2 = ` <tr>
                    <td>统计总数</td>
                    <td>${data.typeList.deviceNum} </td>
                    <td ></td>
                    <td ></td>
                </tr>`
                        $('#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(` 目前数据反应：统计时段内水系统告警报告数量：<span>${waterAlarm.count}</span>条。报告数量良好。<br> 提示：消防水设备状态良好，需要保持。`)
                        } else {
                            $('.waterSummary').html(` 目前数据反应：统计时段内水系统告警报告数量：<span>${waterAlarm.count}</span>条。报告数量良好。<br> 提示：有一定的火系统隐患或存在系统故障，需要排查。`)
                        }

                        let items = '';
                        items = ` <tr>
                        <td>${waterAlarm.count}</td>
                        <td>${waterAlarm.sum} </td>
                        <td>${waterAlarm.count- waterAlarm.sum} </td>
                        <td>${waterAlarmRate}% </td>
                    </tr>`
                        $('#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(` 目前数据反应：火系统告警报告数量：<span>${fireAlarm.count}</span>条。报告数量良好。<br> 提示：消防火设备状态良好，需要保持 。`)
                        } else {
                            $('.fireSummary').html(` 目前数据反应：火系统告警报告数量：<span>${fireAlarm.count}</span>条。报告数量良好。<br> 提示：提示：有一定的火系统隐患或存在系统故障，需要排查。`)
                        }

                        let items = '';
                        items = ` <tr>
                        <td>${ fireAlarm.count}</td>
                        <td>${ fireAlarm.sum} </td>
                        <td>${ fireAlarm.count-  fireAlarm.sum} </td>
                        <td>${ fireAlarmRate}% </td>
                    </tr>`
                        $('#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(` 目前数据反应：统计时段内水系统告警报告数量：<span>${waterDeviceOnly.count}</span>条。报告数量良好。<br> 提示：数据接收情况稳定，需要保持。`)
                        } else {
                            $('.waterOnlySummary').html(` 目前数据反应：统计时段内水系统告警报告数量：<span>${waterDeviceOnly.count}</span>条。报告数量良好。<br> 提示：有一定的水系统隐患或存在系统故障，需要排查。`)
                        }

                        let items = '';
                        items = ` <tr>
                        <td>${ waterDeviceOnly.count}</td>
                        <td>${ waterDeviceOnly.sum} </td>
                        <td>${ waterDeviceOnly.count-  waterDeviceOnly.sum} </td>
                        <td>${ waterOnlyRate}% </td>
                    </tr>`
                        $('#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(` 目前数据反应：统计时段内火系统告警报告数量：<span>${fireOnlyRate}</span>条。报告数量良好。<br> 提示：数据接收情况稳定，需要保持。`)
                        } else {
                            $('.fireOnlySummary').html(` 目前数据反应：统计时段内火系统告警报告数量：<span>${fireOnlyRate}</span>条。报告数量良好。<br> 提示：有一定的火系统隐患或存在系统故障，需要排查。`)
                        }

                        let items = '';
                        items = ` <tr>
                        <td>${ fireOnly.count}</td>
                        <td>${ fireOnly.sum} </td>
                        <td>${ fireOnly.count-  fireOnly.sum} </td>
                        <td>${fireOnlyRate}% </td>
                    </tr>`
                        $('#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(` 目前数据反应：统计时段内烟感告警报告数量：<span>${smokeOnly.count}</span>条。报告数量良好。<br> 提示：数据接收情况稳定，需要保持。`)
                        } else {
                            $('.smokeOnlySummary').html(` 目前数据反应：统计时段内烟感告警报告数量：<span>${smokeOnly.count}</span>条。报告数量良好。<br> 提示：有一定的烟感隐患或存在系统故障，需要排查。`)
                        }


                        let items = '';
                        items = ` <tr>
                        <td>${ smokeOnly.count}</td>
                        <td>${ smokeOnly.sum} </td>
                        <td>${ smokeOnly.count-  smokeOnly.sum} </td>
                        <td>${ smokeOnlyRate}% </td>
                    </tr>`
                        $('#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();
    }
})()