board-yp/js/waterInner.js

/* 
     水系统打印页面echarts配置 及打印
*/


// 数据离散率挖掘1
(function() {
    var sortData = [{

        data: [
            [30, 35, 36, 40, 120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, 200, 180, 79, 82, 64, 43, 60, 19, 82, 64, 43, 60, 19, 34],
            [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38, 24, 52, 26, 27, 30, 35, 36, 40, 120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, ],
            [400, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 9, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 82, 64, 79, 82, 64, 4]
        ]
    }, ];

    var xData = function() {
        var data = [];
        for (var i = 1; i < 31; i++) {
            data.push(i);
        }
        return data;
    }();

    // 1. 实例化对象
    var myChart = echarts.init(document.querySelector("#divergenceChart1"));
    // 2.指定配置
    var option = {

        color: [{

                colorStops: [{
                    offset: 0,
                    color: '#F9860C' // 0% 处的颜色
                }, {
                    offset: 1,
                    color: '#fff' // 100% 处的颜色
                }],

            },

            {
                colorStops: [{
                    offset: 0,
                    color: '#07E1F1' // 0% 处的颜色
                }, {
                    offset: 1,
                    color: '#0456CB' // 100% 处的颜色
                }],

            },

            {
                colorStops: [{
                    offset: 0,
                    color: '#11F90C' // 0% 处的颜色
                }, {
                    offset: 1,
                    color: '#3FC713' // 100% 处的颜色
                }],

            }

        ],

        tooltip: {
            trigger: "axis",
            textStyle: {
                align: 'left' //图例左对齐
            },
            backgroundColor: '#12DFE0',
            formatter: '{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}<br />时间：2021年3月{b}日'

        },
        legend: {
            // 如果series 对象有name 值，则 legend可以不用写data
            itemGap: 20,
            itemHeight: 2,
            itemWidth: 15,
            icon: 'rect',
            textStyle: {
                color: "#aaa"
            },
            top: "bottom",
        },
        grid: {
            top: "0%",
            left: "1%",
            right: "1%",
            bottom: "15%",
            show: true, // 显示边框
            borderWidth: '0', //去除边框
            containLabel: true // 包含刻度文字在内
        },

        xAxis: {
            type: "category",
            boundaryGap: false,
            data: xData,
            axisTick: {
                show: false // 去除刻度线
            },
            axisLabel: {
                color: "#AADDFF" // 文本颜色
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,.3)'
                }
            },
            splitNumber: 8,
            splitLine: {
                show: false
            },
            splitArea: {
                show: true,
                areaStyle: {
                    color: ["rgba(250,250,250,0.05)", "rgba(250,250,250,0.0)"]
                }
            }
        },

        yAxis: {
            splitNumber: 8,
            type: "value",
            axisTick: {
                show: false // 去除刻度线
            },
            axisLabel: {
                show: false // 去除文本
            },
            axisLine: {
                show: false // 去除轴线
            },
            splitLine: {
                lineStyle: {
                    color: "#012f4a", // 分割线颜色
                    opacity: .2
                }
            }
        },
        series: [{
                symbol: "none",
                name: "方差",
                type: "line",
                data: sortData[0].data[0]
            },
            {
                symbol: "none",
                name: "标准差",
                type: "line",
                data: sortData[0].data[1]
            }, {
                symbol: "none",
                name: "平均值",
                type: "line",
                data: sortData[0].data[2]
            }
        ]
    };

    myChart.setOption(option);

    //echarts赋值到src
    var img1 = document.getElementById('divergenceChart1_img');
    setTimeout(function() {
        img1.src = myChart.getDataURL();
    }, 1000)

})();


// 渗漏隐患排查1
(function() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.querySelector("#hiddenCheckChart1"));
    var xData = ['三到四层', '四到五层', '七到八层', '三到四层', '四到五层', '七到八层', '八到九层', '九到十层', '三到四层', '四到五层', '七到八层', '八到九层', '九到十层', '三到四层', '四到五层', '七到八层', '八到九层'];

    var option = {
        backgroundColor: 'transparent',
        color: ['rgba(0,150,255,.5)', 'rgba(255,156,0,.5)'],
        tooltip: {
            //提示框组件
            trigger: 'axis',
            formatter: function(params) {
                var relVal = params[0].name;
                for (var i = 0, l = params.length; i < l; i++) {
                    relVal += '<br/>';
                    relVal += '<span style="display:inline-block;margin-right:5px;border-radius:2px;width:9px;height:9px;background-color:' + params[i].color + '"></span>';
                    relVal += params[i].seriesName + ' : ' + params[i].value;
                }
                return relVal;
            },
            axisPointer: {
                type: 'shadow',
            },
            textStyle: {

                fontStyle: 'normal',
                fontFamily: '微软雅黑',
                fontSize: 12,
            },
        },
        grid: {
            left: '0',
            right: '0',
            bottom: '40',
            top: '0',
            containLabel: true,
        },
        legend: {
            // 如果series 对象有name 值，则 legend可以不用写data
            itemGap: 20,
            itemHeight: 2,
            itemWidth: 15,
            icon: 'rect',
            textStyle: {
                color: "#AAA"
            },
            top: "bottom",
        },

        xAxis: [{
            type: 'category',
            //	boundaryGap: true,//坐标轴两边留白
            data: xData,
            axisLabel: {
                interval: 0,
                rotate: 340,
                // formatter: function(val) {
                //     return val.split("").join("\n");
                // }, //横轴信息文字竖直显示
                textStyle: {
                    color: '#AAA',
                    fontStyle: 'normal',
                    fontFamily: '微软雅黑',
                    fontSize: 12,
                },
            },

            axisTick: {
                //坐标轴刻度相关设置。
                show: false,
            },
            axisLine: {
                //坐标轴轴线相关设置

            },
            splitLine: {
                //坐标轴在 grid 区域中的分隔线。
                show: false,
            },
        }, ],
        yAxis: [{
            type: 'value',

            axisLabel: false,
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: "#012f4a", // 分割线颜色
                    opacity: .2
                }
            },
            boundaryGap: ['0', '10%'],
        }],
        series: [{
                name: '正常',
                type: 'bar',
                data: [400, 180, 40, 30, 31, 400, 180, 40, 30, 31, 400, 180, 40, 30, 31, 400, 180, 40, 30, 31, 400, 180, 40, 30, 31],
                barMaxWidth: '11',
                itemStyle: {
                    borderColor: "#0096FF",
                },
                barGap: '50%',
            },
            {
                name: '实际',
                type: 'bar',
                data: [500, 200, 50, 60, 36, 500, 200, 50, 60, 36, 500, 200, 50, 60, 36, 500, 200, 50, 60, 36, 500, 200, 50, 60, 36],
                barMaxWidth: '11',
                itemStyle: {
                    borderColor: "#FF9C00",
                },

            },

        ],
    };

    myChart.setOption(option);

    //echarts赋值到src
    var img1 = document.getElementById('hiddenCheckChart1_img');
    setTimeout(function() {
        img1.src = myChart.getDataURL();
    }, 1000)

})();


// 跨设备数据关联1
(function() {

    var sortData = [{
        sortName: "喷淋末端与水泵启停关联",
        data: [
            // 两个数组是因为有两条线
            [24, 52, 60, 70, 80, 30, 95, 36, 40, 120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 82, 64, 43, 60, 19, 34],
            [40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 85, 80, 75, 70, 65, 60, 55, 50, 45, 40, 70, 80, 75, 70, 65, 60, 55, 50, 45, 40, ]
        ]
    }];

    var xData = function() {
        var data = [];
        for (var i = 1; i < 31; i++) {
            data.push(i);
        }
        return data;
    }();

    // 1. 实例化对象
    var myChart = echarts.init(document.querySelector("#deviceLinkChart1"));
    // 2.指定配置
    var option = {

        color: ["#FF9C00", "#0096FF"], // 通过这个color修改两条线的颜色
        tooltip: {
            trigger: "axis",
            textStyle: {
                align: 'left' //图例左对齐
            },
        },
        legend: {
            // 如果series 对象有name 值，则 legend可以不用写data
            itemGap: 20,
            itemHeight: 2,
            itemWidth: 15,
            icon: 'rect',
            textStyle: {
                color: "#aaa"
            },
            top: "bottom",
        },
        grid: {
            top: "0%",
            left: "1%",
            right: "1%",
            bottom: "15%",
            show: true, // 显示边框
            borderWidth: '0', //去除边框
            containLabel: true // 包含刻度文字在内
        },

        xAxis: {
            type: "category",
            boundaryGap: false,
            data: xData,
            axisTick: {
                show: false // 去除刻度线
            },
            axisLabel: {
                color: "#AADDFF" // 文本颜色
            },
            axisLine: {
                show: false // 去除轴线
            }
        },

        yAxis: {
            type: "value",
            axisTick: {
                show: false // 去除刻度线
            },
            axisLabel: {
                show: false // 去除文本
            },
            axisLine: {
                show: false // 去除轴线
            },
            lineStyle: {
                color: "#012f4a", // 分割线颜色
                opacity: .2
            }
        },
        series: [{
                symbol: "none",
                name: "水泵启动",
                type: "line",
                smooth: true, // true 可以让我们的折线显示带有弧度
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1, [{
                                    offset: 0,
                                    color: "rgba(255,156,0, 0.4)"
                                },
                                {
                                    offset: 0.8,
                                    color: "rgba(255,156,0, 0.3)"
                                }
                            ],
                            false
                        ),
                        shadowColor: "rgba(0, 0, 0, 0.1)"
                    }
                },


                data: sortData[0].data[0]
            },
            {
                symbol: "none",
                name: "水泵停止",
                type: "line",
                smooth: true,
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1, [{
                                    offset: 0,
                                    color: "rgba(0,150,255,0.5)"
                                },
                                {
                                    offset: 0.8,
                                    color: "rgba(0,150,255, 0.1)"
                                }
                            ],
                            false
                        ),
                        shadowColor: "rgba(0, 0, 0, 0.1)"
                    }
                },

                data: sortData[0].data[1]
            }
        ]
    };

    myChart.setOption(option);
    var img1 = document.getElementById('deviceLinkChart1_img');
    setTimeout(function() {
        img1.src = myChart.getDataURL();
    }, 1000)

})();

// 跨设备数据关联2
(function() {
    var sortData = [{
        sortName: "试验消火栓与屋顶水箱液位关联",
        data: [
            // 两个数组是因为有两条线
            [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38, 24, 52, 26, 27, 30, 35, 36, 40, 120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, ],
            [143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34, 40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 9, 191, 324, 290, 330, 310, 213, 180, ]
        ]
    }];

    var xData = function() {
        var data = [];
        for (var i = 1; i < 31; i++) {
            data.push(i);
        }
        return data;
    }();

    // 1. 实例化对象
    var myChart = echarts.init(document.querySelector("#deviceLinkChart2"));
    // 2.指定配置
    var option = {

        color: ["#FF9C00", "#0096FF"], // 通过这个color修改两条线的颜色
        tooltip: {
            trigger: "axis",
            textStyle: {
                align: 'left' //图例左对齐
            },
        },
        legend: {
            // 如果series 对象有name 值，则 legend可以不用写data
            itemGap: 20,
            itemHeight: 2,
            itemWidth: 15,
            icon: 'rect',
            textStyle: {
                color: "#aaa"
            },
            top: "bottom",
        },
        grid: {
            top: "0%",
            left: "1%",
            right: "1%",
            bottom: "15%",
            show: true, // 显示边框
            borderWidth: '0', //去除边框
            containLabel: true // 包含刻度文字在内
        },

        xAxis: {
            type: "category",
            boundaryGap: false,
            data: xData,
            axisTick: {
                show: false // 去除刻度线
            },
            axisLabel: {
                color: "#AADDFF" // 文本颜色
            },
            axisLine: {
                show: false // 去除轴线
            }
        },

        yAxis: {
            type: "value",
            axisTick: {
                show: false // 去除刻度线
            },
            axisLabel: {
                show: false // 去除文本
            },
            axisLine: {
                show: false // 去除轴线
            },
            splitLine: {
                lineStyle: {
                    color: "#012f4a", // 分割线颜色
                    opacity: .2
                }
            }
        },
        series: [{
                symbol: "none",
                name: "水泵启动",
                type: "line",
                smooth: true, // true 可以让我们的折线显示带有弧度
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1, [{
                                    offset: 0,
                                    color: "rgba(255,156,0, 0.4)"
                                },
                                {
                                    offset: 0.8,
                                    color: "rgba(255,156,0, 0.3)"
                                }
                            ],
                            false
                        ),
                        shadowColor: "rgba(0, 0, 0, 0.1)"
                    }
                },


                data: sortData[0].data[0]
            },
            {
                symbol: "none",
                name: "水泵停止",
                type: "line",
                smooth: true,
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1, [{
                                    offset: 0,
                                    color: "rgba(0,150,255,0.5)"
                                },
                                {
                                    offset: 0.8,
                                    color: "rgba(0,150,255, 0.1)"
                                }
                            ],
                            false
                        ),
                        shadowColor: "rgba(0, 0, 0, 0.1)"
                    }
                },

                data: sortData[0].data[1]
            }
        ]
    };

    myChart.setOption(option);
    var img1 = document.getElementById('deviceLinkChart2_img');
    setTimeout(function() {
        img1.src = myChart.getDataURL();
    }, 1000)
})();


// 数据波动关联
(function() {

    var sortData = [{
        data: [
            [30, 70, 100, 120, 130, 190, 200, 230, 120, 100, 90, 80, 59, 30],
        ]
    }];

    var xData = ['一到二层', '二到三层', '三到四层', '四到五层', '五到六层', '六到七层', '七到八层', '八到九层', '九到十层', '十到十一层', '十一到十二层', '十二到十三层']
        // 1. 实例化对象
    var myChart = echarts.init(document.querySelector("#dataChangeChart1"));
    // 2.指定配置
    var option = {

        color: ["#FE92B3"], // 通过这个color修改三条线的颜色
        tooltip: {
            trigger: "axis",
            textStyle: {
                align: 'left' //图例左对齐
            },
            // backgroundColor: '#12DFE0',
            // formatter: '{a0}: {c0}<br />{b}'

        },
        legend: false,
        grid: {
            top: "0%",
            left: "1%",
            right: "1%",
            bottom: "1%",
            show: true, // 显示边框
            borderWidth: '0', //去除边框
            containLabel: true, // 不包含刻度文字在内
        },

        xAxis: {
            type: "category",
            boundaryGap: false,
            data: xData,
            axisTick: {
                show: false // 去除刻度线
            },
            axisLabel: {
                color: "#AADDFF", // 文本颜色
                interval: 0,
                rotate: 340,
                // formatter: function(val) {
                //     return val.split("").join("\n");
                // }, //横轴信息文字竖直显示
            },
            axisLine: {
                show: false // 去除轴线
            }
        },

        yAxis: {
            splitNumber: 8,
            type: "value",
            axisTick: {
                show: false // 去除刻度线
            },
            axisLabel: {
                show: false // 去除文本
            },
            axisLine: {
                show: false // 去除轴线
            },
            splitLine: {
                lineStyle: {
                    color: "#012f4a", // 分割线颜色
                    opacity: .2
                }
            }
        },
        series: [{
            symbol: "none",
            name: "异常水压值",
            type: "line",
            smooth: true,
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1, [{
                                offset: 0,
                                color: "rgba(255,147,180,.6)"
                            },
                            {
                                offset: 0.8,
                                color: "rgba(255,147,180, 0.4)"
                            }
                        ],
                        false
                    ),
                }
            },

            data: sortData[0].data[0]
        }]
    };

    myChart.setOption(option);
    var img1 = document.getElementById('dataChangeChart1_img');
    setTimeout(function() {
        img1.src = myChart.getDataURL();
    }, 1000)


})();


// 打印
(function() {

    $("#btnPrint").click(function() {
        print_detail()
    });

    var print_detail = function() {

        //打印前echarts图表转换成图片 start   
        $('#divergenceChart1_img').show()
        $('#divergenceChart1').hide()

        $('#hiddenCheckChart1_img').show()
        $('#hiddenCheckChart1').hide()

        $('#deviceLinkChart1_img,#deviceLinkChart2_img').show()
        $('#deviceLinkChart1,#deviceLinkChart2').hide()

        $('#dataChangeChart1_img').show()
        $('#dataChangeChart1').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();
    }
})()