var weizhi;
var timeshow = setInterval(setweizhi, 4000);
function setweizhi() {
    $.ajax({
        async: false,
        type: "POST",
        url: "/hxzkoa/setweizhi.do",
        dataType: 'json',
        success (data) {
            weizhi = data
        }
    });
}
//告警汇总加载
var reWs_k = []
var reWs_v = []
var reWs_kStr = $("#reWarningSummary_k").val()
var reWs_vStr = $("#reWarningSummary_v").val()
reWs_kStr = reWs_kStr.replace("[", "")
reWs_kStr = reWs_kStr.replace("]", "")
reWs_vStr = reWs_vStr.replace("[", "")
reWs_vStr = reWs_vStr.replace("]", "")
var reWs_k_temp = reWs_kStr.split(",")
var reWs_v_temp = reWs_vStr.split(",")
//删除开头空格
for (var i = 0; i < reWs_k_temp.length; i++) {
    if (reWs_k_temp[i][0] == " ") {
        reWs_k_temp[i] = reWs_k_temp[i].substr(1)
    }
    if (reWs_v_temp[i][0] == " ") {
        reWs_v_temp[i] = reWs_v_temp[i].substr(1)
    }
}
//给告警汇总设置颜色
var indicator = {}
indicator['告警区'] = "#FFD700"
indicator['SOS'] = "#DC143C"
indicator['低电量'] = "#008FFB"
var gaojing_color = []
//现场工种加载
var reA_k = []
var reA_v = []
var reA_kStr = $("#realAttendance_k").val()
var reA_vStr = $("#realAttendance_v").val()
console.log(reA_kStr)
console.log(reA_vStr)
reA_kStr = reA_kStr.replace("[", "")
reA_kStr = reA_kStr.replace("]", "")
reA_vStr = reA_vStr.replace("[", "")
reA_vStr = reA_vStr.replace("]", "")
var reA_k_temp = reA_kStr.split(",")
var reA_v_temp = reA_vStr.split(",")

//统计数据加载
var reT_k = []
var reT_v = []
var reT_kStr = $("#realtongji_k").val()
var reT_vStr = $("#realtongji_v").val()
reT_kStr = reT_kStr.replace("[", "")
reT_kStr = reT_kStr.replace("]", "")
reT_vStr = reT_vStr.replace("[", "")
reT_vStr = reT_vStr.replace("]", "")
var reT_k_temp = reT_kStr.split(",")
var reT_v_temp = reT_vStr.split(",")


//以上是完成string转array
//以上是把其他放到最后
//告警汇总加载
for (var i = 1; i < reWs_k_temp.length; i++) {
    reWs_k[i - 1] = reWs_k_temp[i]
    reWs_v[i - 1] = Number(reWs_v_temp[i])
    if (reWs_k[i - 1] != "告警区" && reWs_k[i - 1] != "SOS" && reWs_k[i - 1] != "低电量") {
        gaojing_color[i - 1] = "#008FFB"
    } else {
        gaojing_color[i - 1] = indicator[reWs_k[i - 1]]
    }

}
if (reWs_k_temp.length == 0) {
    //如果只有一个特殊处理
    reWs_k[0] = reWs_kStr
    reWs_v[0] = reWs_vStr
    if (reWs_k[0] != "告警区" && reWs_k[0] != "SOS" && reWs_k[0] != "低电量") {
        gaojing_color[0] = "#008FFB"
    } else {
        gaojing_color[0] = indicator[reWs_k[0]]
    }
} else {
    reWs_k[reWs_k_temp.length - 1] = reWs_k_temp[0]
    reWs_v[reWs_k_temp.length - 1] = Number(reWs_v_temp[0])
    if (reWs_k[reWs_k_temp.length - 1] != "告警区" && reWs_k[reWs_k_temp.length - 1] != "SOS" && reWs_k[reWs_k_temp.length - 1] != "低电量") {
        gaojing_color[reWs_k_temp.length - 1] = "#008FFB"
    } else {
        gaojing_color[reWs_k_temp.length - 1] = indicator[reWs_k[reWs_k_temp.length - 1]]
    }

}
//现场工种加载
for (var i = 1; i < reA_k_temp.length; i++) {
    reA_k[i - 1] = reA_k_temp[i]
    reA_v[i - 1] = Number(reA_v_temp[i])
}
if (reA_k_temp.length == 0) {
    //如果只有一个特殊处理
    reA_k[0] = reA_kStr
    reA_v[0] = reA_vStr
} else {
    reA_k[reA_k_temp.length - 1] = reA_k_temp[0]
    reA_v[reA_k_temp.length - 1] = Number(reA_v_temp[0])
}

//统计数据加载
for (var i = 1; i < reT_k_temp.length; i++) {
    reT_k[i - 1] = reT_k_temp[i]
    reT_v[i - 1] = Number(reT_v_temp[i])
}
if (reT_k_temp.length == 0) {
    //如果只有一个特殊处理
    reT_k[0] = reT_kStr
    reT_v[0] = reT_vStr
} else {
    reT_k[reT_k_temp.length - 1] = reT_k_temp[0]
    reT_v[reT_k_temp.length - 1] = Number(reT_v_temp[0])
}

Apex.grid = {
    borderColor: '#191e3a'
}
Apex.track = {
    background: '#0e1726',
}
Apex.tooltip = {
    theme: 'dark'
}
// Simple Line

// var sline = {
//     chart: {
//         height: 250,
//         type: 'line',
//         zoom: {
//             enabled: false
//         },
//         toolbar: {
//             show: false,
//         }
//     },
//     dataLabels: {
//         enabled: false
//     },
//     stroke: {
//         curve: 'straight'
//     },
//     series: [{
//         name: "Desktops",
//         data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
//     }],
//     title: {
//         text: 'Product Trends by Month',
//         align: 'left'
//     },
//     grid: {
//         row: {
//             colors: ['#3b3f5c', 'transparent'], // takes an array which will be repeated on columns
//             opacity: 0.5
//         },
//     },
//     xaxis: {
//         categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
//     }
// }

// var chart = new ApexCharts(
//     document.querySelector("#s-line"),
//     sline
// );

// chart.render();


// Simple Line Area

// var sLineArea = {
//     chart: {
//         height: 250,
//         type: 'area',
//         toolbar: {
//             show: false,
//         }
//     },
//     dataLabels: {
//         enabled: false
//     },
//     stroke: {
//         curve: 'smooth'
//     },
//     series: [{
//         name: 'series1',
//         data: [31, 40, 28, 51, 42, 109, 100]
//     }, {
//         name: 'series2',
//         data: [11, 32, 45, 32, 34, 52, 41]
//     }],

//     xaxis: {
//         type: 'datetime',
//         categories: ["2018-09-19T00:00:00", "2018-09-19T01:30:00", "2018-09-19T02:30:00", "2018-09-19T03:30:00", "2018-09-19T04:30:00", "2018-09-19T05:30:00", "2018-09-19T06:30:00"],
//     },
//     tooltip: {
//         x: {
//             format: 'dd/MM/yy HH:mm'
//         },
//     }
// }

// var chart = new ApexCharts(
//     document.querySelector("#s-line-area"),
//     sLineArea
// );

// chart.render();

// Simple Column

var sCol = {
    colors: gaojing_color,
    chart: {
        height: 250,
        type: 'bar',
        toolbar: {
            show: false,
        }
    },
    plotOptions: {
        bar: {
            horizontal: false,
            columnWidth: '24%',
            distributed: true,
            //,endingShape: 'rounded'  
        },
    },
    dataLabels: {
        enabled: false,
    },
    stroke: {
        show: true,
        width: 2,
        colors: ['transparent']
    },
    series: [{
        name: '告警',
        data: reWs_v
    }],
    xaxis: {
        categories: reWs_k,
    },
    yaxis: {
        title: {
            text: ' (个)'
        }
    },
    fill: {
        opacity: 1

    },
    tooltip: {
        y: {
            formatter: function (val) {
                return val + " 个"
            }
        }
    }
}

var chartdd = new ApexCharts(
    document.querySelector("#s-col"),
    sCol
);
chartdd.render();

var timessss = setInterval(tiao,10000);
function tiao() {
    $.ajax({
        url: "/hxzkoa/setgaojingnum.do",
        type: "POST",
        dataType: "JSON",
        success(data3){
            chartdd.updateSeries([{
                name: '告警',
                data: data3
            }])
        }
    });
    // chartdd.render();
}


// Simple Column Stacked

// var sColStacked = {
//     chart: {
//         height: 250,
//         type: 'bar',
//         stacked: true,
//         toolbar: {
//             show: false,
//         }
//     },
//     responsive: [{
//         breakpoint: 480,
//         options: {
//             legend: {
//                 position: 'bottom',
//                 offsetX: -10,
//                 offsetY: 0
//             }
//         }
//     }],
//     plotOptions: {
//         bar: {
//             horizontal: false,
//         },
//     },
//     series: [{
//         name: 'PRODUCT A',
//         data: [44, 55, 41, 67, 22, 43]
//     }, {
//         name: 'PRODUCT B',
//         data: [13, 23, 20, 8, 13, 27]
//     }, {
//         name: 'PRODUCT C',
//         data: [11, 17, 15, 15, 21, 14]
//     }, {
//         name: 'PRODUCT D',
//         data: [21, 7, 25, 13, 22, 8]
//     }],
//     xaxis: {
//         type: 'datetime',
//         categories: ['01/01/2011 GMT', '01/02/2011 GMT', '01/03/2011 GMT', '01/04/2011 GMT', '01/05/2011 GMT', '01/06/2011 GMT'],
//     },
//     legend: {
//         position: 'right',
//         offsetY: 40
//     },
//     fill: {
//         opacity: 1
//     },
// }

// var chart = new ApexCharts(
//     document.querySelector("#s-col-stacked"),
//     sColStacked
// );

// chart.render();

// Simple Bar

// var sBar = {
//     chart: {
//         height: 250,
//         type: 'bar',
//         toolbar: {
//             show: false,
//         }
//     },
//     plotOptions: {
//         bar: {
//             horizontal: true,
//         }
//     },
//     dataLabels: {
//         enabled: false
//     },
//     series: [{
//         data: [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380]
//     }],
//     xaxis: {
//         categories: ['South Korea', 'Canada', 'United Kingdom', 'Netherlands', 'Italy', 'France', 'Japan', 'United States', 'China', 'Germany'],
//     }
// }

// var chart = new ApexCharts(
//     document.querySelector("#s-bar"),
//     sBar
// );

// chart.render();


// Mixed Chart

// var options = {
//     chart: {
//         height: 250,
//         type: 'line',
//         toolbar: {
//             show: false,
//         }
//     },
//     series: [{
//         name: 'Website Blog',
//         type: 'column',
//         data: [440, 505, 414, 671, 227, 413, 201, 352, 752, 320, 257, 160]
//     }, {
//         name: 'Social Media',
//         type: 'line',
//         data: [23, 42, 35, 27, 43, 22, 17, 31, 22, 22, 12, 16]
//     }],
//     stroke: {
//         width: [0, 4]
//     },
//     title: {
//         text: 'Traffic Sources'
//     },
//     labels: ['01 Jan 2001', '02 Jan 2001', '03 Jan 2001', '04 Jan 2001', '05 Jan 2001', '06 Jan 2001', '07 Jan 2001', '08 Jan 2001', '09 Jan 2001', '10 Jan 2001', '11 Jan 2001', '12 Jan 2001'],
//     xaxis: {
//         type: 'datetime'
//     },
//     yaxis: [{
//         title: {
//             text: 'Website Blog',
//         },

//     }, {
//         opposite: true,
//         title: {
//             text: 'Social Media'
//         }
//     }]

// }

// var chart = new ApexCharts(
//     document.querySelector("#mixed-chart"),
//     options
// );

// chart.render();


// Donut Chart


var donutChart = {
    chart: {
        height: 250,
        type: 'donut',
        toolbar: {
            show: false,
        }
    },
    stroke: {
        colors: '#0e1726'
    },
    series: reA_v,
    labels: reA_k,
    responsive: [{
        breakpoint: 480,
        options: {
            chart: {
                width: 200
            },
            legend: {
                position: 'bottom'
            }
        }
    }]
}

var donut = new ApexCharts(
    document.querySelector("#donut-chart"),
    donutChart
);

donut.render();
var timesss = setInterval(quan,10000);
function quan() {
    $.ajax({
        url: "/hxzkoa/setgongzhongnum.do",
        type: "POST",
        dataType: "JSON",
        success(data2){
            //donut.updateSeries(data2)
            donut.updateOptions({
            	series: data2[1],
                labels: data2[0]
            })
        }
    });
}


// PolarArea Chart

var polarAreaChart = {
    chart: {
        height: 250,
        type: 'polarArea',
        toolbar: {
            show: false,
        }
    },
    dataLabels: {
        enabled: true,
        background: {
          enabled: true,
          borderRadius:1,
        }
      },
    stroke: {
        colors: '#0e1726'
    },
    series: reT_v,
    labels: reT_k,
    responsive: [{
        breakpoint: 480,
        options: {
            chart: {
                width: 200
            },
            legend: {
                position: 'bottom'
            }
        }
    }]
}

var chart = new ApexCharts(
    document.querySelector("#polarArea-chart"),
    polarAreaChart
);
chart.render();
var times = setInterval(leida,10000);
function leida() {
    $.ajax({
        url: "/hxzkoa/settongjishuju.do",
        type: "POST",
        dataType: "JSON",
        success(data) {
            chart.updateOptions({
            	series: data[1],
                labels: data[0]
            })
        }
    });
}



var wasdData = [10, 41, 35, 51, 49, 62, 69, 91, 148];
var wasdOptions = {
    series: [{
        name: "报文",
        data: wasdData,
    }],
    chart: {
        id: 'realtime',
        height: 300,
        width: 400,
        type: 'line',
        zoom: {
            enabled: false
        },
        animations: {
            enabled: true,
            easing: 'linear',
            dynamicAnimation: {
                speed: 10000
            }
        },
        toolbar: {
            show: false
        },
        zoom: {
            enabled: false
        }
    },
    dataLabels: {
        enabled: false
    },
    stroke: {
        curve: 'smooth'
    },
    // title: {
    //     text: 'Real-time location',
    //     align: 'left'
    // },
    markers: {
        size: 0
    },
    legend: {
        show: false
    },
    grid: {
        row: {
            colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
            opacity: 0.5
        },
    },
    xaxis: {
        range: 7
        // categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
    },
    yaxis: {
        max: 1000
    },
};
var wasdChart = new ApexCharts(document.getElementById('wasd'), wasdOptions);
wasdChart.render();

window.setInterval(function () {
    wasdData.push(weizhi);
    wasdChart.updateSeries([{
        data: wasdData
    }])
}, 10000)


// Radial Chart

// var radialChart = {
//     chart: {
//         height: 250,
//         type: 'radialBar',
//         toolbar: {
//             show: false,
//         }
//     },
//     plotOptions: {
//         radialBar: {
//             dataLabels: {
//                 name: {
//                     fontSize: '22px',
//                 },
//                 value: {
//                     fontSize: '16px',
//                 },
//                 total: {
//                     show: true,
//                     label: 'Total',
//                     formatter: function (w) {
//                         // By default this function returns the average of all series. The below is just an example to show the use of custom formatter function
//                         return 249
//                     }
//                 }
//             }
//         }
//     },
//     series: [44, 55, 67, 83],
//     labels: ['Apples', 'Oranges', 'Bananas', 'Berries'],
// }

// var chart = new ApexCharts(
//     document.querySelector("#radial-chart"),
//     radialChart
// );

// chart.render();