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);
            })
        }
    })
})


//时间日期选择
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() {
    //获取表单的值 并转换成对象
    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);
    //     layer.msg('添加成功!', { icon: 6 });
    //     $('#reportOutForm')[0].reset();

    //     layui.use('layer', function () {
    //         layerCreateIndex2 = layer.open({
    //             type: 1,
    //             title: false,
    //             closeBtn: 0,
    //             skin: 'yourclass',
    //             area: [
    //                 '700px', '800px'
    //             ],
    //             content: $(".reportContentOut"),
    //             success: function () {

    //                 console.log(result.data);
    //                 var data=result.data;
    //                 var deviceStatistic=data.deviceStatistic;//告警处理情况统计
    //                 var deviceOnly=data.deviceOnly; //设备离线情况统计

    //                 (function(){
    //                     var companyInfo=data.companyInfo;  //单位信息
    //                     $('#companyName').html(companyInfo.ownerName);
    //                 })();

    //                 (function(){
    //                     var typeList=data.typeList;  //设备类型统计信息
    //                     let items = '';
    //                     console.log(typeList)
    //                     typeList.forEach(function(item, key) {
    //                         items+= `
    //                         <tr>
    //                             <td>${item.TypeName} </td>
    //                             <td>${item.Num}</td>
    //                             <td>${item.TransmissionModel}</td>
    //                             <td>${item.Business}</td>
    //                         </tr>`
    //                     })
    //                     $('#typeList').html(items);

    //                 })()


    //                 //关闭弹框
    //                 $('.clsBtn,.cancel').click(function () {
    //                     window.open("./index.html");
    //                 })
    //             }
    //         })
    //     })
    // }, function(errorMsg) {
    //     alert("异常错误!");
    // })
})



//验证通过 请求ajax  
ajaxRequest(MONTH_REPORT, "POST", {
    'companyId': 10012,
    'startTime': 2021 - 04 - 01,
    'endTime': 2021 - 04 - 30
}, function(result) {
    // layer.close(layerCreateIndex);
    // layer.msg('添加成功!', { icon: 6 });
    $('#reportOutForm')[0].reset();

    layui.use('layer', function() {
        layerCreateIndex2 = layer.open({
            type: 1,
            title: false,
            closeBtn: 0,
            skin: 'yourclass',
            area: [
                '700px', '800px'
            ],
            content: $(".reportContentOut"),
            success: function() {

                console.log(result.data);
                var data = result.data;
                var deviceOnly = data.deviceOnly; //设备离线情况统计
                var companyInfo = data.companyInfo; //单位信息
                //  大标题
                (function() {
                    $('#companyName').html(companyInfo.ownerName);
                })();

                //设备类型统计信息
                (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() {
                    let items = '';
                    items = ` <tr>
                            <td>${companyInfo.ownerName}</td>
                            <td>${companyInfo.ownerAddress} </td>
                        </tr>`
                    $('#companyData').html(items);
                })();

                //告警处理情况统计
                (function() {
                    var deviceStatistic = data.deviceStatistic; //告警处理情况统计
                    var waterAlarm = deviceStatistic.waterAlarm;
                })();

                // 告警处理水系统折线图
                (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: ["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: "rgba(255, 255, 255, .1)",
                                },
                            },
                            // 文字的颜色
                            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: [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 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: ["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: "rgba(255, 255, 255, .1)",
                                },
                            },
                            // 文字的颜色
                            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: [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 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: ["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: "rgba(255, 255, 255, .1)",
                                },
                            },
                            // 文字的颜色
                            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: [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 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: ["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: "rgba(255, 255, 255, .1)",
                                },
                            },
                            // 文字的颜色
                            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: [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 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: ["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: "rgba(255, 255, 255, .1)",
                                },
                            },
                            // 文字的颜色
                            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: [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("./index.html");
                })
            }
        })
    })
}, 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();
    }
})()