html/js/index.js

getIndexDate()

/* ajax请求数据 */
// setInterval(getIndexDate(), 1000)

// ajax请求
function getIndexDate(queryParam = {}) {



    ajaxRequest(INDEX_LIST, "POST", queryParam, function(result) {

        /* 饼图 */
        (function() {

            //饼图数据赋值
            var pie = result.pie;
            $("#loading").empty()
            var totalNum = 0;
            pie.forEach(function(value) {
                totalNum += value.value;
            })


            /* 饼图初始化 */
            var myChartPie = echarts.init(document.querySelector(".pie-bar .chart"));
            optionPie = {
                grid: {
                    // width:'20%'
                },

                title: [{
                    //text: '{name|3800}\n{val|设备总数}',
                    text: '{name|' + totalNum + '}\n{val|设备总数}',

                    top: 'center',
                    left: 'center',
                    textStyle: {
                        rich: {
                            name: {
                                fontSize: 25,
                                fontWeight: 'normal',
                                color: '#37FF01',
                            },
                            val: {
                                fontSize: 14,
                                fontWeight: 'bold',
                                color: '#02DDF2',
                            }
                        }
                    }
                }],
                tooltip: {
                    trigger: 'item',
                    formatter: function(params) {
                        return params.name + '：' + params.value + '<br>占比：' + params.percent.toFixed(2) + '%'
                    }
                },

                series: [{
                    label: {
                        "normal": {
                            "show": true,
                            "formatter": ' {b}：{c} '
                        },
                        "emphasis": {
                            "show": true
                        }
                    },
                    name: '访问来源',
                    radius: ['45%', '60%'],
                    type: 'pie', // 设置图表类型为饼图
                    // data: []
                    data: pie,
                }],
                color: ['#EAF665', '#FF5801', '#6F99FA']
            };
            myChartPie.setOption(optionPie);
            window.addEventListener("resize", function() {
                myChartPie.resize();
            });



        })();

        /* 柱状图 */
        (function() {

            //bar柱状图 赋值
            var bar = result.bar
            var barName = []
            var barValue = []

            for (var key in bar) {
                barName.push(key)
                barValue.push(bar[key])
            }

            /* 柱状图初始化*/
            var myChartBar = echarts.init(document.querySelector(".pie.chart"));
            var optionBar = {
                grid: {
                    left: '4%',
                    bottom: '16%',
                    top: '15',
                    // height: "70%",
                    // right: '4%',
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: "{b}  <br/> {c}",
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: 'line' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                textStyle: {
                    "color": "red",
                    "fontSize": 14 //20 14 15字体大小
                },
                //"color": ["#63caff", "#49beff", "#03387a"],
                color: ["rgba(0,212,233,.2)", "rgba(0,212,233,.2)"],
                xAxis: {
                    "nameTextStyle": {
                        "color": "#c0c3cd",
                        "padding": [0, 0, -10, 0],
                        "fontSize": 100
                    },
                    "axisLabel": {
                        "color": "#c0c3cd",
                        "fontSize": 14,
                        "interval": 0
                    },
                    "axisLine": {
                        "show": false
                    },
                    // "data": [],
                    "data": barName,
                    "type": "category"
                },
                yAxis: {
                    show: false
                },

                series: [{
                    // "data": [20, 40, 15],
                    "data": barValue,
                    "type": "bar",
                    "barMaxWidth": "auto",
                    "barWidth": 20,
                    "itemStyle": {
                        "color": '#00D4E9',
                        'barBorderRadius': [30, 30, 0, 0],
                    },
                    "label": { //aa标签数值
                        "show": true,
                        "position": "top",
                        "distance": 10, //标签数值的距离  20 40 15
                        "color": "#fff"
                    }
                }, {
                    "data": [100, 100, 100],
                    "type": "bar",
                    "barMaxWidth": "auto",
                    "barWidth": 20,
                    "barGap": "-100%",
                    "zlevel": -1
                }, ],
            };
            myChartBar.setOption(optionBar);
            window.addEventListener("resize", function() {
                myChartBar.resize();
            });



        })();

        /* 折线图 */
        (function() {

            //折线图数据赋值
            var line = result.line;
            var lineData = [];

            for (var key in line) {
                for (const key2 in line[key]) {
                    lineData.indexOf
                }
            }
            var lineDate = []
            var seriesData = []
            for (var key in line) {
                var lineKey = [];
                for (var date in line[key]) {
                    if ($.inArray(date, lineDate) == -1) {
                        lineDate.push(date)
                    }
                    lineKey.push(line[key][date])
                }
                seriesData.push({ 'name': key, 'data': lineKey });
            }
            // console.log(seriesData)
            /* 折线图初始化 */
            var myChart = echarts.init(document.querySelector(".line .chart"));
            var option = {
                legend: {
                    itemGap: 20, // 图例每项之间的间隔。    
                    icon: 'stack',
                    padding: 0, // 图例内边距
                    textStyle: {
                        color: '#fff',
                        align: 'center',
                    },
                },
                color: ['#6F99FA', '#FF5801', '#EAF665'],
                grid: {
                    bottom: '0',
                    right: '10',
                    left: '10',
                    top: '35',
                    containLabel: true,
                },
                tooltip: {
                    trigger: 'axis',
                    confine: true,
                    textStyle: {
                        fontSize: 12
                    }
                },
                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    // data: ["12：00", "13：00", "14：00", "15：00", "16：00", "17：00"],
                    data: lineDate,
                    "axisLabel": {
                        "color": "#c0c3cd",
                    },
                    "axisLine": {
                        lineStyle: {
                            color: 'rgba(0,130,255,.2)'
                        }
                    },
                    axisTick: {
                        show: false
                    },
                },
                yAxis: {
                    type: "value",
                    "axisLabel": {
                        "color": "#c0c3cd",
                    },
                    axisTick: {
                        show: false
                    },
                    "axisLine": {
                        lineStyle: {
                            color: 'rgba(0,130,255,.2)'
                        }
                    },
                    "splitLine": {
                        lineStyle: {
                            color: "rgba(255,255,255,.1)"
                        }
                    }
                },
                series: [{
                    // name: "火灾",
                    name: seriesData[0].name,
                    type: "line",
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(111,153,250,0.3)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(111,153,250,0)'
                                }
                            ], false),
                            shadowColor: 'rgba(111,153,250, 0.9)',
                            shadowBlur: 20
                        }
                    },
                    data: seriesData[0].data

                    //data: [1, 5, 8, 3, 3, 5]
                }, {
                    // name: "水系统",
                    name: seriesData[1].name,
                    type: "line",
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(255,88,1,0.3)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(255,88,1,0)'
                                }
                            ], false),
                            shadowColor: 'rgba(255,88,1, 0.9)',
                            shadowBlur: 20
                        }
                    },

                    //data: [9, 5, 3, 7, 6, 3]
                    data: seriesData[1].data
                }, {
                    //name: "烟雾",
                    name: seriesData[2].name,
                    type: "line",
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(234,246,101,0.3)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(234,246,101,0)'
                                }
                            ], false),
                            shadowColor: 'rgba(234,246,101, 0.9)',
                            shadowBlur: 20
                        }
                    },
                    data: seriesData[1].data
                        //data: [4, 6, 3, 9, 7, 3]
                }]
            };

            myChart.setOption(option);

            myChart.setOption(option);
            window.addEventListener("resize", function() {
                myChart.resize();
            });
        })();

        (function() {

            var pie = result.warning;
            var totalNum = pie.wait_handle + pie.is_handled;
            var data = [totalNum, pie.is_handled, pie.wait_handle]

            var myChartWaring = echarts.init(document.querySelector(".right-top .chart"));
            option = {
                grid: {
                    // width: '100%',
                    top: '15%',
                    right: '0%',
                    bottom: '0%',
                    left: '10%'
                },

                color: ['#6F99FA', '#EAF665', '#FF5801'],
                xAxis: [{
                    show: false
                }],
                yAxis: [{
                        axisTick: 'none',
                        axisLine: 'none',
                        axisLabel: {
                            verticalAlign: 'bottom',
                            align: 'left',
                            padding: [0, 0, 15, 5],
                            textStyle: {
                                color: '#FFFFFF',
                            }
                        },
                        data: ['总报警数', '已处置数', '待处置数'],

                    },
                    {
                        //左侧柱状图的Y轴
                        axisTick: 'none',
                        axisLine: 'none',
                        // data: [1357, 1260, 36],
                        data: data,
                        axisLabel: {
                            show: true,
                            verticalAlign: 'bottom',
                            align: 'right',
                            padding: [0, 45, 15, 0],
                            textStyle: {
                                color: '#fff',
                            },
                            formatter: function(value) {
                                return value + '个'
                            }
                        }
                    },

                ],
                series: [{
                        type: 'bar',
                        // data: [1357, , ],
                        data: [totalNum, , ],
                        barWidth: 10,
                        itemStyle: {},
                        z: 2
                    }, {
                        type: 'bar',
                        // data: [, 1260, ],
                        data: [, pie.is_handled, ],
                        barWidth: 10,
                        itemStyle: {},
                        z: 2
                    }, {
                        type: 'bar',
                        // data: [, , 36],
                        data: [, , pie.wait_handle],
                        barWidth: 10,
                        itemStyle: {},
                        z: 2
                    },
                    {
                        type: 'bar',
                        barGap: '-100%',
                        // data: [1054, 1054, 1054],
                        data: [totalNum, totalNum, totalNum],
                        barWidth: 10,
                        itemStyle: {
                            normal: {
                                color: 'rgba(255, 255, 255, 0.15)',
                                // barBorderRadius: 6,
                            }
                        },
                        z: 0
                    },
                ]
            };
            myChartWaring.setOption(option);
            window.addEventListener("resize", function() {
                myChartWaring.resize();
            });

        })();

        // 设备隐患
        (function() {
            var colorGroup = ['color-green', 'color-red', 'color-yellow', 'color-blue'];
            var handle = result.handle
            var items = '';
            handle.forEach(function(item, key) {
                items += ' <li><div><p class="num-huan ' + colorGroup[key] + '">' + item.value + '</p><p class="des-huan">' + item.name + '</p><div></li>';
            })
            $('#pop').html(items)

        })();

        // 异常设备数
        (function() {

            var colorGroup = ['color-green', 'color-red', 'color-yellow', 'color-blue'];
            var Abnormal = result.Abnormal;
            var items = '';

            Abnormal.forEach(function(item, key) {
                var processClassName = item.status == '超时' ? 'unprocess' : 'processed';
                items += ` <tr>
                    <td>${item.id}</td>
                    <td>${item.name}</td>
                    <td class="` + processClassName + `">${item.status}</td>
                    <td>${item.time}</td>
                </tr>`
            })
            $('.abnormal').html(items)

            // setInterval(getDate(), 1000)
        })();

    }, function(errorMsg) {
        alert("请求数据失败!");
    })
}

//园区实时报警统计 时间获取
(function() {
    time();
    var t = null;
    t = setTimeout(time, 1000);

    function time() {
        clearTimeout(t); //清除定时器
        dt = new Date();
        var h = Appendzero(dt.getHours()).toString().split(""); //获取时
        var m = Appendzero(dt.getMinutes()).toString().split(""); //获取分
        // var aa = h.toString().split("");
        // var bb = m.toString(h).split("");
        var times = h.concat(m)
        var list = "";
        for (var i = 0; i < times.length; i++) {
            list += `<div class="total-square">${times[i]}</div> `
        }
        document.querySelector(".total-squares").innerHTML = list;
        t = setTimeout(time, 1000); //设定定时器，循环运行
    }
    //个位数补零
    function Appendzero(obj) {
        if (obj < 10) return "0" + obj;
        else return obj;
    }
})();

// 实时告警信息
(function() {
    function getDate() {
        $.ajax({

            url: "data/pie.json",
            type: "GET",
            dataType: "json", //返回数据格式为json
            beforeSend: function(XMLHttpRequest) {
                // $("#loading").html("<img src='images/loading.gif' />")
            },
            success: function(result) {
                var warningInfo = result.warningInfo;
                var items = '';

                warningInfo.forEach(function(item, key) {
                    var statusMessage = item.status ? '已处理' : '未处理';
                    var processClassName = item.status ? 'processed' : 'unprocess';

                    items += ` <tr>
                    <td>${item.id}</td>
                    <td>${item.time}</td>
                    <td> ${item.type} </td>
                    <td>${item.details} </td>
                    <td class="` + processClassName + `">${statusMessage}</td>
                </tr>`

                })
                $('.warning-info').html(items)
            },
            error: function(errorMsg) {
                //   alert("图表请求数据失败!");
                $("#loading").empty();
                //  myChart1.hideLoading();
            }
        });
    }
    getDate()
        // setInterval(getDate(), 1000)
})();


//实时告警信息 （websocket实时推送）
(function() {
    var arrData = [];
    var wsUri = "wss://iot.usky.cn:55120";

    function initWebSocket() {
        try {
            if (typeof MozWebSocket == 'function')
                WebSocket = MozWebSocket;
            websocket = new WebSocket(wsUri);
            websocket.onopen = function(evt) {
                var json = {};
                json.agentid = 'admin';
                // console.log("Connected.");
                (function() {})()
                websocket.send(JSON.stringify(json));
            };
            websocket.onclose = function(evt) {
                // console.log("DisConnected.");
                (function() {})()
                initWebSocket();
            };
            websocket.onmessage = function(evt) {
                var warningInfo = eval('(' + evt.data + ')');
                if (warningInfo.dwtype) {
                    arrData.push(warningInfo)
                        // console.log('arrData')
                        // console.log(arrData)
                }
                var items = '';
                arrData.forEach(function(item, index) {
                    items += ` <tr>
                    <td >${index+1}</td>
                    <td >${item.time}</td>
                    <td >${item.dwtype} </td>
                    <td title="${item.evtname}"> ${item.evtname}</td>
                    <td >${item.insertid} </td>
                </tr>`
                })
                $('.warning-info').html(items)
            };
            websocket.onerror = function(evt) {
                // console.log("Error:", evt.data);
                (function() {})()
            };
        } catch (exception) {
            // console.log("Exception:", exception);
            (function() {})()
        }
    }
    initWebSocket();
})()