Cold_DataV/static/js/D_Mode_1.js

$(window).load(function () {
    $(".loading").fadeOut()

    // 返回上一级 视图处理
    C_keys_list = C_keys.split(",")
    if (C_keys_list.length <= 1){
        $("#v_back").hide();
    }else {
        $("#v_back").show();
    }

})

/****/
$(document).ready(function () {
    var whei = $(window).width()
    $("html").css({fontSize: whei / 20})
    $(window).resize(function () {
        var whei = $(window).width()
        $("html").css({fontSize: whei / 20})
    });
});

// 返回
function f_v_back() {
    C_keys_list = C_keys.split(",")
    C_keys_list.pop()
    hrefurl = "?T_key="+C_keys_list.join(",")
    if (false != C_modex){
        hrefurl += "&T_mode="+C_modex
    }
    document.location.href = hrefurl
}

var V_kf_yd = 1
function f_kf_open() {
    $("#map_kf").css("opacity", 1);
    $("#v_trail").css("opacity", 0);
    $("#R_KF_Column").show();
    $("#R_YD_Column").hide();
    V_kf_yd = 1
    f_view()
}

function f_yd_open() {
    $("#map_kf").css("opacity", 0);
    $("#v_trail").css("opacity", 1);
    $("#R_KF_Column").hide();
    $("#R_YD_Column").show();
    V_kf_yd = 2
    f_view()
}

// 视图数据改变
function f_view() {
    // 地图加载
    if (V_kf_yd == 1) {
        f_v_map();
    }
    // 轨迹加载
    if (C_json.Device.T_移动总数 > 0 && V_kf_yd == 2) {
        f_v_trail()
    }

    // 屏蔽按钮
    if(C_json.Device.T_库房总数 == 0){
        $("#v_open_KF").hide();
    }
    if(C_json.Device.T_移动总数 == 0){
        $("#v_open_YD").hide();
    }

    $("#T_公司名称").html(C_json.Company_name + "-冷链药品质量安全智慧平台")
    $("title").html(C_json.Company_name + "-冷链药品质量安全智慧平台")

    // 设备类
    $("#T_终端总数").html(C_json.Device.T_库房总数 + C_json.Device.T_移动总数)
    $("#T_库房总数").html(C_json.Device.T_库房总数)
    $("#T_移动总数").html(C_json.Device.T_移动总数)
    $("#T_移动总数s").html(C_json.Device.T_移动总数)

    $("#T_移动离线总数").html(C_json.Device.T_移动离线总数)
    $("#T_移动监控总数").html(C_json.Device.T_移动监控总数)

    // 报警类
    // $("#T_库房报警总数").html(C_json.Warning.T_库房报警总数)
    $("#T_库房未处理总数").html(C_json.Warning.T_库房未处理总数)
    $("#T_库房设备报警数_今天").html(C_json.Warning.T_库房设备报警数_今天)
    $("#T_库房报警设备数_今天").html(C_json.Warning.T_库房报警设备数_今天)
    // $("#T_库房设备报警数_昨天").html(C_json.Warning.T_库房设备报警数_昨天)
    // $("#T_库房设备报警数_近7天").html(C_json.Warning.T_库房设备报警数_近7天)
    // $("#T_库房设备报警数_本月").html(C_json.Warning.T_库房设备报警数_本月)
    // $("#T_库房设备报警数_上一月").html(C_json.Warning.T_库房设备报警数_上一月)

    // $("#T_移动警数总数").html(C_json.Warning.T_移动警数总数)
    $("#T_移动未处理总数").html(C_json.Warning.T_移动未处理总数)
    $("#T_移动设备报警数_今天").html(C_json.Warning.T_移动设备报警数_今天)
    $("#T_移动设备报警数_今天s").html(C_json.Warning.T_移动设备报警数_今天)
    // $("#T_移动设备报警数_昨天").html(C_json.Warning.T_移动设备报警数_昨天)
    // $("#T_移动设备报警数_近7天").html(C_json.Warning.T_移动设备报警数_近7天)
    // $("#T_移动设备报警数_本月").html(C_json.Warning.T_移动设备报警数_本月)
    // $("#T_移动设备报警数_上一月").html(C_json.Warning.T_移动设备报警数_上一月)

    w_x_ = parseInt(C_json.Warning.T_库房报警设备数_今天)
    if (w_x_ != 0) {
        w_x_ = w_x_ / (C_json.Device.T_库房总数)
        w_x_ *= 100
    }
    $("#T_今日库房报警率").html(w_x_.toFixed(1) + "%")


    $("#T_今日报警总数").html(parseInt(C_json.Warning.T_库房设备报警数_今天) + parseInt(C_json.Warning.T_移动设备报警数_今天))
    w_x_ = parseInt(C_json.Warning.T_库房报警设备数_今天) + parseInt(C_json.Warning.T_移动报警设备数_今天)
    if (w_x_ != 0) {
        w_x_ = w_x_ / (C_json.Device.T_库房总数 + C_json.Device.T_移动总数)
        w_x_ *= 100
    }
    $("#T_今日报警率").html(w_x_.toFixed(1) + "%")
    // $("#T_今日报警率").html(parseInt(w_x_) + "%")
    $("#T_今日未处理总数").html(parseInt(C_json.Warning.T_库房未处理总数) + parseInt(C_json.Warning.T_移动未处理总数))

    // 任务类
    $("#T_任务总数_今天").html(C_json.Task.T_任务总数_今天)
    $("#T_任务总数_今天s").html(C_json.Task.T_任务总数_今天)
    // $("#T_任务总数_昨天").html(C_json.Task.T_任务总数_昨天)
    // $("#T_任务总数_近7天").html(C_json.Task.T_任务总数_近7天)
    // $("#T_任务总数_本月").html(C_json.Task.T_任务总数_本月)
    // $("#T_任务总数_上一月").html(C_json.Task.T_任务总数_上一月)

    $("#T_任务设备数_今天").html(C_json.Task.T_任务设备数_今天)
    // $("#T_任务设备数_昨天").html(C_json.Task.T_任务设备数_昨天 )
    // $("#T_任务设备数_近7天").html(C_json.Task.T_任务设备数_近7天)
    // $("#T_任务设备数_本月").html(C_json.Task.T_任务设备数_本月 )
    // $("#T_任务设备数_上一月").html(C_json.Task.T_任务设备数_上一月)

    w_x_ = parseInt(C_json.Task.T_任务设备数_今天)
    if (w_x_ != 0) {
        w_x_ = w_x_ / C_json.Device.T_移动总数
        w_x_ *= 100
    }
    $("#T_今日闲置设备").html(w_x_.toFixed(1) + "%")
    $("#T_今日闲置设备s").html(w_x_.toFixed(1) + "%")


    // 报警统计
    try {
        $('#Company_Next_WarningG').liMarquee('destroy'); // 清除滚动
    }
    catch (e) {
        alert(e);
    }
    $("#Company_Next_WarningG").html("<ul id=\"Company_Next_WarningL\"></ul>")// 清除内容
    Company_Next_W_l = []
    f_Company_Next_报警统计(C_json)
    Company_Next_W_l = Company_Next_W_l.filter((value, index, self) => {
        return self.findIndex(p => p.name === value.name) === index;
    });
    Company_Next_W_l_r = Company_Next_W_l.sort((a, b) => b.Warning - a.Warning);
    for (var C_key in Company_Next_W_l_r){
        C_b = Company_Next_W_l_r[C_key]
        $("#Company_Next_WarningL").append("<li><p><span>" + C_b.name + "</span><span>" + (C_b.Device) + "</span><span>" + C_b.Warning + "%</span></p></li>")
    }
    // 开始滚动
    $('#Company_Next_WarningG').liMarquee({
        direction: 'up',//身上滚动
        runshort: false,//内容不足时不滚动
        scrollamount: 20//速度
    });

    // console.log("Company_Next_W_l:", Company_Next_W_l)
    // 图表
    echarts_报警设备数近7天曲线图()
    // echarts_设备报警率排名()
    echarts_探头报警率排名()
    if (V_kf_yd == 1) {
        echarts_库房端报警类型统计()
    } else {
        echarts_移动端任务曲线图()
    }

    // 任务统计
    $('#Company_Next_TaskG').liMarquee('destroy'); // 清除滚动
    $("#Company_Next_TaskG").html("<ul id=\"Company_Next_TaskL\"></ul>")// 清除内容
    Company_Next_T_l = []
    f_Company_Next_任务统计(C_json)
    Company_Next_T_l = Company_Next_T_l.filter((value, index, self) => {
        return self.findIndex(p => p.name === value.name) === index;
    });

    Company_Next_T_l_r = Company_Next_T_l.sort((a, b) => b.Task - a.Task);

    for (var C_key in Company_Next_T_l_r){
        C_b = Company_Next_T_l_r[C_key]
        $("#Company_Next_TaskL").append("<li><p><span>" + C_b.name + "</span><span>" + (C_b.Task) + "</span><span>" + C_b.DeviceT + "%</span></p></li>")

    }
    $('#Company_Next_TaskG').liMarquee({
        direction: 'up',//身上滚动
        runshort: false,//内容不足时不滚动
        scrollamount: 20//速度
    });



    // 中间 视图显示
    if (V_kf_yd === 1) {
        // 库房端
        $("#T_C_1").html(Company_Next_T_l.length)// 公司下一级统计
        $("#T_C_2").html(C_json.Warning.T_库房设备报警数_今天)// 公司下一级统计
        w_x_ = parseInt(C_json.Warning.T_库房报警设备数_今天)
        if (w_x_ != 0) {
            w_x_ = w_x_ / C_json.Device.T_库房总数
            w_x_ *= 100
        }
        $("#T_C_3").html(w_x_.toFixed(1) + "%")// 公司下一级统计

        $("#T_Cn_1").html("公司/门店 数量")
        $("#T_Cn_2").html("今日库房报警次数")
        $("#T_Cn_3").html("今日库房报警率")

    } else {
        // 移动端
        $("#T_C_1").html(Company_Next_T_l.length)// 公司下一级统计
        $("#T_C_2").html(C_json.Device.T_移动监控总数)// 公司下一级统计
        w_x_ = parseInt(C_json.Warning.T_移动报警设备数_今天)
        if (w_x_ != 0) {
            w_x_ = w_x_ / C_json.Device.T_移动总数
            w_x_ *= 100
        }
        $("#T_C_3").html(w_x_.toFixed(1) + "%")// 公司下一级统计

        $("#T_Cn_1").html("公司/门店 数量")
        $("#T_Cn_2").html("监控总数")
        $("#T_Cn_3").html("今日移动端报警率")

    }
    let isKf =true
    document.getElementById('transportButton').addEventListener('click', function (){
        console.log("点击了按钮")
        if (V_kf_yd === 1) {
            if (isKf){
                isKf = false
                document.getElementById('kf_Column').style.display="none"
                document.getElementById('yd_Column').style.display="block"
                document.getElementById('transportButton').innerText = '库房端'
                document.getElementById('title').innerText= "移动端汇总统计"

            }else{
                isKf = true
                document.getElementById('yd_Column').style.display="none"
                document.getElementById('kf_Column').style.display="block"
                document.getElementById('transportButton').innerText = '移动端'
                document.getElementById('title').innerText= "库房端汇总统计"
            }

        }
    })
}


// 公司下一级统计
Company_Next_W_l = []

function f_Company_Next_报警统计(C_j) {

    for (var C_key in C_j.Children) {
        C_b = C_j.Children[C_key]
        f_Company_Next_报警统计(C_b)
        if (C_b.Children.length != 0) continue;
        Warning = 0
        if (C_b.Warning.T_库房报警设备数_今天 > 0) {
            Warning = parseInt((C_b.Device.T_库房总数 + C_b.Device.T_移动总数) / C_b.Warning.T_库房报警设备数_今天)
        }
        // console.log({"name":C_b.Company_name,"Device":C_b.Device.T_库房总数+C_b.Device.T_移动总数,"Warning": Warning})

        Company_Next_W_l.push({
            "name": C_b.Company_name,
            "Device": C_b.Device.T_库房总数 + C_b.Device.T_移动总数,
            "Warning": Warning
        })
   }

}

// 公司下一级任务统计
Company_Next_T_l = []

function f_Company_Next_任务统计(C_j) {

    for (var C_key in C_j.Children) {
        C_b = C_j.Children[C_key]
        f_Company_Next_任务统计(C_b)
        if (C_b.Children.length != 0) continue;
        // console.log({"name":C_b.Company_name,"Device":C_b.Device.T_库房总数+C_b.Device.T_移动总数,"Warning": Warning})
        T_x_ = C_b.Task.T_任务设备数_今天
        if(T_x_ != 0){
            T_x_ = T_x_ / C_json.Device.T_移动总数
            T_x_ *= 100
        }

        Company_Next_T_l.push({
            "name": C_b.Company_name,
            "Task": C_b.Task.T_任务总数_今天,
            "DeviceT": T_x_.toFixed(1)
        })

    }


}

// 公司下一级统计
function f_Company_Next_公司下一级统计(C_j) {
    var Company_Next_num = 0
    for (var C_key in C_j.Children) {
        C_b = C_j.Children[C_key]
        Company_Next_num += f_Company_Next_公司下一级统计(C_b)
        if (C_b.Children.length != 0) continue;
        Company_Next_num += 1

    }
    return Company_Next_num
}

// 设备报警率占比
function echarts_报警设备数近7天曲线图() {
    var myChart = echarts.init(document.getElementById('echarts_报警设备数近7天曲线图'));
    xAxis_data = []
    yAxis_data = []

    xAxis_data30 = []
    yAxis_data30 = []

    xAxis_data90 = []
    yAxis_data90 = []

    for (var C_key in C_json.Warning.T_报警设备数_近7天) {
        C_b = C_json.Warning.T_报警设备数_近7天[C_key]
        xAxis_data.push(C_key)
        yAxis_data.push(C_b)
    }
    for (var C_key in C_json.Warning.T_报警设备数_近30天) {
        C_b = C_json.Warning.T_报警设备数_近30天[C_key]
        xAxis_data30.push(C_key)
        yAxis_data30.push(C_b)
    }
    for (var C_key in C_json.Warning.T_报警设备数_近90天) {
        C_b = C_json.Warning.T_报警设备数_近90天[C_key]
        xAxis_data90.push(C_key)
        yAxis_data90.push(C_b)
    }
    let option = {
        // legend: {
        //     icon:"circle",
        //     top: "0",
        //     width:'100%',
        //     right: 'center',
        //     itemWidth: 10,
        //     itemHeight: 10,
        //     data: ['库房端'],
        //     textStyle: {
        //         color: "rgba(255,255,255,.5)" },
        // },

        tooltip: {
            trigger: 'axis',
            axisPointer: {
                lineStyle: {
                    color: '#dddc6b'
                }
            }
        },
        grid: {
            left: '0',
            top: '5',
            right: '15',
            bottom: '0',
            containLabel: true
        },

        xAxis: [{
            type: 'category',
            boundaryGap: false,
            axisLabel: {
                textStyle: {
                    color: "rgba(255,255,255,.5)",
                    //  fontSize:10
                },
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,.1)'
                }
            },
            data: xAxis_data

        }, {

            axisPointer: {show: false},
            axisLine: {show: false},
            position: 'bottom',
            offset: 20,

        }],
        yAxis: [{
            type: 'value',
            axisTick: {show: false},
            splitNumber: 4,
            axisLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,.1)'
                }
            },
            axisLabel: {
                textStyle: {
                    color: "rgba(255,255,255,.5)",
                    //fontSize:10
                },
            },

            splitLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,.1)',
                    type: 'dotted',
                }
            }
        }],
        series: [
            {
                name: '库房端',
                type: 'line',
                smooth: true,
                symbol: 'circle',
                symbolSize: 5,
                showSymbol: false,
                lineStyle: {
                    normal: {
                        color: 'rgba(31, 174, 234, 1)',
                        width: 2
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(31, 174, 234, 0.4)'
                        }, {
                            offset: 0.8,
                            color: 'rgba(31, 174, 234, 0.1)'
                        }], false),
                        shadowColor: 'rgba(0, 0, 0, 0.1)',
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#1f7eea',
                        borderColor: 'rgba(31, 174, 234, .1)',
                        borderWidth: 5
                    }
                },
                data: yAxis_data

            },
            // {
            //     name: '移动端',
            //     type: 'line',
            //     smooth: true,
            //     symbol: 'circle',
            //     symbolSize: 5,
            //     showSymbol: false,
            //     lineStyle: {
            //
            //         normal: {
            //             color: '#6bdd9b',
            //             width: 2
            //         }
            //     },
            //     areaStyle: {
            //         normal: {
            //             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            //                 offset: 0,
            //                 color: 'rgba(107, 221, 155, 0.4)'
            //             }, {
            //                 offset: 0.8,
            //                 color: 'rgba(107, 221, 155, 0.1)'
            //             }], false),
            //             shadowColor: 'rgba(0, 0, 0, 0.1)',
            //         }
            //     },
            //     itemStyle: {
            //         normal: {
            //             color: '#6bdd9b',
            //             borderColor: 'rgba(107, 221, 155, .1)',
            //             borderWidth: 5
            //         }
            //     },
            //     data: [ 5, 3, 7, 1, 8, 3, 5]
            //
            // },
        ]

    };

    let option1 = {
        // legend: {
        //     icon:"circle",
        //     top: "0",
        //     width:'100%',
        //     right: 'center',
        //     itemWidth: 10,
        //     itemHeight: 10,
        //     data: ['库房端'],
        //     textStyle: {
        //         color: "rgba(255,255,255,.5)" },
        // },

        tooltip: {
            trigger: 'axis',
            axisPointer: {
                lineStyle: {
                    color: '#dddc6b'
                }
            }
        },
        grid: {
            left: '0',
            top: '5',
            right: '15',
            bottom: '0',
            containLabel: true
        },

        xAxis: [{
            type: 'category',
            boundaryGap: false,
            axisLabel: {
                textStyle: {
                    color: "rgba(255,255,255,.5)",
                    //  fontSize:10
                },
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,.1)'
                }
            },
            data: xAxis_data30

        }, {

            axisPointer: {show: false},
            axisLine: {show: false},
            position: 'bottom',
            offset: 20,

        }],
        yAxis: [{
            type: 'value',
            axisTick: {show: false},
            splitNumber: 4,
            axisLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,.1)'
                }
            },
            axisLabel: {
                textStyle: {
                    color: "rgba(255,255,255,.5)",
                    //fontSize:10
                },
            },

            splitLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,.1)',
                    type: 'dotted',
                }
            }
        }],
        series: [
            {
                name: '库房端',
                type: 'line',
                smooth: true,
                symbol: 'circle',
                symbolSize: 5,
                showSymbol: false,
                lineStyle: {
                    normal: {
                        color: 'rgba(31, 174, 234, 1)',
                        width: 2
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(31, 174, 234, 0.4)'
                        }, {
                            offset: 0.8,
                            color: 'rgba(31, 174, 234, 0.1)'
                        }], false),
                        shadowColor: 'rgba(0, 0, 0, 0.1)',
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#1f7eea',
                        borderColor: 'rgba(31, 174, 234, .1)',
                        borderWidth: 5
                    }
                },
                data: yAxis_data30

            },
            // {
            //     name: '移动端',
            //     type: 'line',
            //     smooth: true,
            //     symbol: 'circle',
            //     symbolSize: 5,
            //     showSymbol: false,
            //     lineStyle: {
            //
            //         normal: {
            //             color: '#6bdd9b',
            //             width: 2
            //         }
            //     },
            //     areaStyle: {
            //         normal: {
            //             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            //                 offset: 0,
            //                 color: 'rgba(107, 221, 155, 0.4)'
            //             }, {
            //                 offset: 0.8,
            //                 color: 'rgba(107, 221, 155, 0.1)'
            //             }], false),
            //             shadowColor: 'rgba(0, 0, 0, 0.1)',
            //         }
            //     },
            //     itemStyle: {
            //         normal: {
            //             color: '#6bdd9b',
            //             borderColor: 'rgba(107, 221, 155, .1)',
            //             borderWidth: 5
            //         }
            //     },
            //     data: [ 5, 3, 7, 1, 8, 3, 5]
            //
            // },
        ]

    };

    let option2 = {
        // legend: {
        //     icon:"circle",
        //     top: "0",
        //     width:'100%',
        //     right: 'center',
        //     itemWidth: 10,
        //     itemHeight: 10,
        //     data: ['库房端'],
        //     textStyle: {
        //         color: "rgba(255,255,255,.5)" },
        // },

        tooltip: {
            trigger: 'axis',
            axisPointer: {
                lineStyle: {
                    color: '#dddc6b'
                }
            }
        },
        grid: {
            left: '0',
            top: '5',
            right: '15',
            bottom: '0',
            containLabel: true
        },

        xAxis: [{
            type: 'category',
            boundaryGap: false,
            axisLabel: {
                textStyle: {
                    color: "rgba(255,255,255,.5)",
                    //  fontSize:10
                },
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,.1)'
                }
            },
            data: xAxis_data90

        }, {

            axisPointer: {show: false},
            axisLine: {show: false},
            position: 'bottom',
            offset: 20,

        }],
        yAxis: [{
            type: 'value',
            axisTick: {show: false},
            splitNumber: 4,
            axisLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,.1)'
                }
            },
            axisLabel: {
                textStyle: {
                    color: "rgba(255,255,255,.5)",
                    //fontSize:10
                },
            },

            splitLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,.1)',
                    type: 'dotted',
                }
            }
        }],
        series: [
            {
                name: '库房端',
                type: 'line',
                smooth: true,
                symbol: 'circle',
                symbolSize: 5,
                showSymbol: false,
                lineStyle: {
                    normal: {
                        color: 'rgba(31, 174, 234, 1)',
                        width: 2
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(31, 174, 234, 0.4)'
                        }, {
                            offset: 0.8,
                            color: 'rgba(31, 174, 234, 0.1)'
                        }], false),
                        shadowColor: 'rgba(0, 0, 0, 0.1)',
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#1f7eea',
                        borderColor: 'rgba(31, 174, 234, .1)',
                        borderWidth: 5
                    }
                },
                data: yAxis_data90

            },
            // {
            //     name: '移动端',
            //     type: 'line',
            //     smooth: true,
            //     symbol: 'circle',
            //     symbolSize: 5,
            //     showSymbol: false,
            //     lineStyle: {
            //
            //         normal: {
            //             color: '#6bdd9b',
            //             width: 2
            //         }
            //     },
            //     areaStyle: {
            //         normal: {
            //             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            //                 offset: 0,
            //                 color: 'rgba(107, 221, 155, 0.4)'
            //             }, {
            //                 offset: 0.8,
            //                 color: 'rgba(107, 221, 155, 0.1)'
            //             }], false),
            //             shadowColor: 'rgba(0, 0, 0, 0.1)',
            //         }
            //     },
            //     itemStyle: {
            //         normal: {
            //             color: '#6bdd9b',
            //             borderColor: 'rgba(107, 221, 155, .1)',
            //             borderWidth: 5
            //         }
            //     },
            //     data: [ 5, 3, 7, 1, 8, 3, 5]
            //
            // },
        ]

    };


    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
    document.getElementById('days7').addEventListener('click', function (){
        myChart.setOption(option);
        document.getElementById('deviceWarning').innerText = '周设备报警曲线图';
    })
    document.getElementById('days30').addEventListener('click', function (){
        myChart.setOption(option1);
        document.getElementById('deviceWarning').innerText = '月设备报警曲线图';

    })
    document.getElementById('days120').addEventListener('click', function (){
        myChart.setOption(option2);
        document.getElementById('deviceWarning').innerText = '季度设备报警曲线图';
    })

    $(".sebtn a").click(function () {
        $(this).addClass("active").siblings().removeClass("active")
    })
    $(".sebtn a").eq(0).click(function () {
        myChart.setOption(option1);
    })
    $(".sebtn a").eq(1).click(function () {
        myChart.setOption(option2);
    })
    $(".sebtn a").eq(2).click(function () {
        myChart.setOption(option3);
    })

}


// 设备报警率占比
function echarts_设备报警率排名() {
    var myChart = echarts.init(document.getElementById('echarts_设备报警率排名'));
    // option = {
    //     legend: {
    //         icon:"circle",
    //         top: "0",
    //         width:'100%',
    //         right: 'center',
    //         itemWidth: 10,
    //         itemHeight: 10,
    //         data: ['库房端', '移动端'],
    //         textStyle: {
    //             color: "rgba(255,255,255,.5)" },
    //     },
    //
    //     tooltip: {
    //         trigger: 'axis',
    //         axisPointer: {
    //             lineStyle: {
    //                 color: '#dddc6b'
    //             }
    //         }
    //     },
    //     grid: {
    //         left: '0',
    //         top: '30',
    //         right: '10',
    //         bottom: '-15',
    //         containLabel: true
    //     },
    //
    //     xAxis: [{
    //         type: 'category',
    //         boundaryGap: false,
    //         axisLabel:  {
    //             textStyle: {
    //                 color: "rgba(255,255,255,.5)",
    //                 //  fontSize:10
    //             },
    //         },
    //         axisLine: {
    //             lineStyle: {
    //                 color: 'rgba(255,255,255,.1)'
    //             }
    //         },
    //         data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    //
    //     }, {
    //
    //         axisPointer: {show: false},
    //         axisLine: {  show: false},
    //         position: 'bottom',
    //         offset: 20,
    //
    //
    //
    //     }],
    //
    //     yAxis: [{
    //         type: 'value',
    //         axisTick: {show: false},
    //         splitNumber: 4,
    //         axisLine: {
    //             lineStyle: {
    //                 color: 'rgba(255,255,255,.1)'
    //             }
    //         },
    //         axisLabel:  {
    //             textStyle: {
    //                 color: "rgba(255,255,255,.5)",
    //                 //fontSize:10
    //             },
    //         },
    //
    //         splitLine: {
    //             lineStyle: {
    //                 color: 'rgba(255,255,255,.1)',
    //                 type: 'dotted',
    //             }
    //         }
    //     }],
    //     series: [
    //         {
    //             name: '库房端',
    //             type: 'line',
    //             smooth: true,
    //             symbol: 'circle',
    //             symbolSize: 5,
    //             showSymbol: false,
    //             lineStyle: {
    //
    //                 normal: {
    //                     color: 'rgba(31, 174, 234, 1)',
    //                     width: 2
    //                 }
    //             },
    //             areaStyle: {
    //                 normal: {
    //                     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
    //                         offset: 0,
    //                         color: 'rgba(31, 174, 234, 0.4)'
    //                     }, {
    //                         offset: 0.8,
    //                         color: 'rgba(31, 174, 234, 0.1)'
    //                     }], false),
    //                     shadowColor: 'rgba(0, 0, 0, 0.1)',
    //                 }
    //             },
    //             itemStyle: {
    //                 normal: {
    //                     color: '#1f7eea',
    //                     borderColor: 'rgba(31, 174, 234, .1)',
    //                     borderWidth: 5
    //                 }
    //             },
    //             data: [3, 6, 3, 6, 3, 9, 3]
    //
    //         },
    //         {
    //             name: '移动端',
    //             type: 'line',
    //             smooth: true,
    //             symbol: 'circle',
    //             symbolSize: 5,
    //             showSymbol: false,
    //             lineStyle: {
    //
    //                 normal: {
    //                     color: '#6bdd9b',
    //                     width: 2
    //                 }
    //             },
    //             areaStyle: {
    //                 normal: {
    //                     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
    //                         offset: 0,
    //                         color: 'rgba(107, 221, 155, 0.4)'
    //                     }, {
    //                         offset: 0.8,
    //                         color: 'rgba(107, 221, 155, 0.1)'
    //                     }], false),
    //                     shadowColor: 'rgba(0, 0, 0, 0.1)',
    //                 }
    //             },
    //             itemStyle: {
    //                 normal: {
    //                     color: '#6bdd9b',
    //                     borderColor: 'rgba(107, 221, 155, .1)',
    //                     borderWidth: 5
    //                 }
    //             },
    //             data: [ 5, 3, 7, 1, 8, 3, 5]
    //
    //         },
    //     ]
    //
    // };
    yAxis_data = []
    series_data = []
    Company_Next_W_l_ = Company_Next_W_l.sort((a, b) => a.Warning - b.Warning).slice(-10);

    for (var C_key in Company_Next_W_l_) {
        C_b = Company_Next_W_l_[C_key]
        if(C_b.Warning > 0){
            yAxis_data.push(C_b.name)
            series_data.push(C_b.Warning)
        }

    }

    option = {
        // title: {
        //     text: 'World Population'
        // },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        // legend: {},
        grid: {
            top: '0%',
            left: '0%',
            right: '0%',
            bottom: '0%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01],
            show: false
        },
        yAxis: {
            type: 'category',
            data: yAxis_data
        },
        series: [
            {
                name: '报警率',
                type: 'bar',
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                        { offset: 0, color: '#596db0' },
                        { offset: 0.5, color: '#4a63b4' },
                        { offset:1, color: '#435eb7' }
                    ])
                },

                data: series_data
            }
        ]
    };
    // option = {
    //     legend: {
    //         icon: "circle",
    //         top: "0",
    //         width: '100%',
    //         right: 'center',
    //         itemWidth: 10,
    //         itemHeight: 10,
    //         // textStyle: {
    //         //     color: "rgba(255,255,255,.5)"
    //         // },
    //     },
    //
    //     tooltip: {
    //         trigger: 'axis',
    //         axisPointer: {
    //             lineStyle: {
    //                 color: '#dddc6b'
    //             }
    //         }
    //     },
    //     grid: {
    //         left: '0',
    //         top: '30',
    //         right: '0',
    //         bottom: '-15',
    //         containLabel: true
    //     },
    //
    //     dataset: [
    //         {
    //             dimensions: ['name', 'Device', "Warning"],
    //             // source: [
    //             //     ['11111111', 41],
    //             //     ['22222222', 241],
    //             //     ['333333333', 341],
    //             //     ['4444444444', 141],
    //             //     ['555555555', 421],
    //             //     ['666666666', 141],
    //             //     ['77777777', 241],
    //             //     ['8888888888', 411],
    //             //     ['9999999', 421],
    //             //     ['123123123', 414],
    //             //     ['456456456', 431],
    //             //
    //             // ]
    //             source: Company_Next_W_l,
    //         },
    //         {
    //             transform: {
    //                 type: 'sort',
    //                 config: {dimension: 'Warning', order: 'desc'}
    //             }
    //         }
    //     ],
    //     xAxis: {
    //         type: 'category',
    //         axisLabel: {interval: 0, rotate: 30},
    //         max: 6 // only the largest 3 bars will be displayed
    //     },
    //     yAxis: {},
    //     series: {
    //         type: 'bar',
    //         encode: {x: 'name', y: 'Warning'},
    //         datasetIndex: 1
    //     }
    // };

    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
    $(".sebtn a").click(function () {
        $(this).addClass("active").siblings().removeClass("active")
    })
    $(".sebtn a").eq(0).click(function () {
        myChart.setOption(option1);
    })
    $(".sebtn a").eq(1).click(function () {
        myChart.setOption(option2);
    })
    $(".sebtn a").eq(2).click(function () {
        myChart.setOption(option3);
    })

}
function echarts_探头报警率排名() {
    var myChart = echarts.init(document.getElementById('echarts_探头报警率排名'));
    yAxis_data = []
    series_data = []

    yAxis_dataMonth = []
    series_dataMonth = []

    yAxis_dataQuarter = []
    series_dataQuarter = []
    // Company_Next_W_l_ = Company_Next_W_l.sort((a, b) => a.Warning - b.Warning).slice(-10);
    //每日排名
    let dataOneday = [];
    for (var C_key in C_json.Warning.T_探头报警类型统计) {
        C_b = C_json.Warning.T_探头报警类型统计[C_key]
        dataOneday.push([C_key, C_b])
    }
    dataOneday.sort((a, b) => a[1] - b[1]);
    dataOneday.forEach(([key, value]) => {
        yAxis_data.push(key)
        series_data.push(value)
    });
    //月度排名
    let dataMonth = [];
    for (var C_key in C_json.Warning.T_探头报警类型统计_30天) {
        C_b = C_json.Warning.T_探头报警类型统计_30天[C_key]
        dataMonth.push([C_key, C_b])
    }
    dataMonth.sort((a, b) => a[1] - b[1]);
    dataMonth.forEach(([key, value]) => {
        yAxis_dataMonth.push(key)
        series_dataMonth.push(value)
    });

    //季度排名
    let dataQuarter = [];
    for (var C_key in C_json.Warning.T_探头报警类型统计_90天) {
        C_b = C_json.Warning.T_探头报警类型统计_90天[C_key]
        dataQuarter.push([C_key, C_b]);
    }
    dataQuarter.sort((a, b) => a[1] - b[1]);
    dataQuarter.forEach(([key, value]) => {
        yAxis_dataQuarter.push(key);
        series_dataQuarter.push(value);
    });

    let option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            top: '0%',
            left: '0%',
            right: '0%',
            bottom: '0%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01],
            show: false
        },
        yAxis: {
            type: 'category',
            data: yAxis_data
        },
        series: [
            {
                name: '报警数量',
                type: 'bar',
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                        {offset: 0, color: '#596db0'},
                        {offset: 0.5, color: '#4a63b4'},
                        {offset: 1, color: '#435eb7'}
                    ])
                },

                data: series_data
            }
        ]
    };

    let option1 = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            top: '0%',
            left: '0%',
            right: '0%',
            bottom: '0%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01],
            show: false
        },
        yAxis: {
            type: 'category',
            data: yAxis_dataMonth
        },
        series: [
            {
                name: '报警数量',
                type: 'bar',
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                        {offset: 0, color: '#596db0'},
                        {offset: 0.5, color: '#4a63b4'},
                        {offset: 1, color: '#435eb7'}
                    ])
                },

                data: series_dataMonth
            }
        ]
    };

    let option2 = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            top: '0%',
            left: '0%',
            right: '0%',
            bottom: '0%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01],
            show: false
        },
        yAxis: {
            type: 'category',
            data: yAxis_dataQuarter
        },
        series: [
            {
                name: '报警数量',
                type: 'bar',
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                        {offset: 0, color: '#596db0'},
                        {offset: 0.5, color: '#4a63b4'},
                        {offset: 1, color: '#435eb7'}
                    ])
                },

                data: series_dataQuarter
            }
        ]
    };
    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
    document.getElementById('onedays').addEventListener('click', function (){
        myChart.setOption(option);
        document.getElementById('deviceRanking').innerText = '每日探头报警率排名';
    })
    document.getElementById('month').addEventListener('click', function (){
        myChart.setOption(option1);
        document.getElementById('deviceRanking').innerText = '月探头报警率排名';

    })
    document.getElementById('quarter').addEventListener('click', function (){
        myChart.setOption(option2);
        document.getElementById('deviceRanking').innerText = '季度探头报警率排名';
    })

    $(".sebtn a").click(function () {
        $(this).addClass("active").siblings().removeClass("active")
    })
    $(".sebtn a").eq(0).click(function () {
        myChart.setOption(option1);
    })
    $(".sebtn a").eq(1).click(function () {
        myChart.setOption(option2);
    })
    $(".sebtn a").eq(2).click(function () {
        myChart.setOption(option3);
    })

}
// 移动端任务曲线图
function echarts_移动端任务曲线图() {
    var myChart = echarts.init(document.getElementById('echarts_移动端任务曲线图'));
    xAxis_data = []
    yAxis_data = []
    for (var C_key in C_json.Task.T_任务总数_近7天) {
        xAxis_data.push(C_key)
        yAxis_data.push(C_json.Task.T_任务总数_近7天[C_key])
    }

    option = {
        // legend: {
        //     icon:"circle",
        //     top: "0",
        //     width:'100%',
        //     right: 'center',
        //     itemWidth: 10,
        //     itemHeight: 10,
        //     textStyle: {
        //         color: "rgba(255,255,255,.5)" },
        // },

        tooltip: {
            trigger: 'axis',
            axisPointer: {
                lineStyle: {
                    color: '#dddc6b'
                }
            }
        },
        grid: {
            left: '0',
            top: '5',
            right: '17',
            bottom: '0',
            containLabel: true
        },

        xAxis: [{
            type: 'category',
            boundaryGap: false,
            axisLabel: {
                textStyle: {
                    color: "rgba(255,255,255,.5)",
                    //  fontSize:10
                },
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,.1)'
                }
            },
            data: xAxis_data // ['周一', '周二', '周三', '周四', '周五', '周六', '周日']

        }, {

            axisPointer: {show: false},
            axisLine: {show: false},
            position: 'bottom',
            offset: 20,


        }],

        yAxis: [{
            type: 'value',
            axisTick: {show: false},
            splitNumber: 4,
            axisLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,.1)'
                }
            },
            axisLabel: {
                textStyle: {
                    color: "rgba(255,255,255,.5)",
                    //fontSize:10
                },
            },

            splitLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,.1)',
                    type: 'dotted',
                }
            }
        }],
        series: [
            {
                // radius: ['40%', '70%'],
                // center: ['50%', '74%'],
                name: '任务次数',
                type: 'line',
                smooth: true,
                symbol: 'circle',
                symbolSize: 5,
                showSymbol: false,
                containLabel: true,
                lineStyle: {
                    normal: {
                        color: 'rgba(31, 174, 234, 1)',
                        width: 2
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(31, 174, 234, 0.4)'
                        }, {
                            offset: 0.8,
                            color: 'rgba(31, 174, 234, 0.1)'
                        }], false),
                        shadowColor: 'rgba(0, 0, 0, 0.1)',
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#1f7eea',
                        borderColor: 'rgba(31, 174, 234, .1)',
                        borderWidth: 5
                    }
                },
                data: yAxis_data // [3, 6, 3, 6, 3, 9, 3]
            },
        ]

    };


    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
    $(".sebtn a").click(function () {
        $(this).addClass("active").siblings().removeClass("active")
    })
    $(".sebtn a").eq(0).click(function () {
        myChart.setOption(option1);
    })
    $(".sebtn a").eq(1).click(function () {
        myChart.setOption(option2);
    })
    $(".sebtn a").eq(2).click(function () {
        myChart.setOption(option3);
    })

}

// 库房端报警类型统计
function echarts_库房端报警类型统计() {
    const myChart = echarts.init(document.getElementById('echarts_库房端报警类型统计'));
    data = []
    datas = []
    data_num = 0
    data_nums = 0
    for (var C_key in C_json.Warning.T_库房报警类型统计) {
        data_num += C_json.Warning.T_库房报警类型统计[C_key]
        data.push({value: C_json.Warning.T_库房报警类型统计[C_key], name: C_key})
        console.log("C_json.Warning.T_库房报警类型统计",C_json.Warning.T_库房报警类型统计)
    }
    for (var C_key in C_json.Warning.T_移动报警类型统计) {
        data_nums += C_json.Warning.T_移动报警类型统计[C_key]
        datas.push({value: C_json.Warning.T_移动报警类型统计[C_key], name: C_key})
        console.log("C_json.Warning.T_移动报警类型统计",data_nums)
    }
    data.push({
        // make an record to fill the bottom 50%
        value: data_num,
        itemStyle: {
            // stop the chart from rendering this piece
            color: 'none',
            decal: {
                symbol: 'none'
            }
        },
        label: {
            show: false
        }
    })


    let option = {
        tooltip: {
            trigger: 'item'
        },
        // legend: {
        //     top: '5%',
        //     left: 'center',
        //     // doesn't perfectly work with our tricks, disable it
        //     selectedMode: false
        // },

        color: ['#45C2E0', '#C1EBDD', '#c0a9fa', '#75bef3', '#FF9393', '#e9aaff', '#ffc1a7'],
        series: [
            {
                name: '报警类型',
                type: 'pie',
                radius: ['40%', '70%'],
                center: ['50%', '74%'],
                // adjust the start angle
                startAngle: 180,
                label: {
                    color: "#C1EBDD",
                    show: true,
                    formatter(param) {
                        // correct the percentage
                        return param.name + ' (' + param.percent * 2 + '%)';
                    }
                },
                data: data
            }
        ]
    };
    let option2 = {
        tooltip: {
            trigger: 'item'
        },

        color: ['#0f7dec', '#07c5ea', '#e3378d', '#ff0000', '#FF9393', '#e9aaff', '#ffc1a7'],
        series: [
            {
                name: '报警类型',
                type: 'pie',
                radius: ['40%', '70%'],
                center: ['50%', '74%'],
                // adjust the start angle
                startAngle: 360,
                label: {
                    color: "#C1EBDD",
                    show: true,
                    formatter(param) {
                        // correct the percentage
                        return param.name + ' (' + param.percent * 2 + '%)';
                    }
                },
                data: [{
                    value: data_nums,
                    itemStyle: {
                        color: 'none',
                        decal: {
                            symbol: 'none'
                        }
                    },
                    label: {
                        show: false
                    }
                }, ...datas]
            }
        ]
    }
    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
    //添加按钮点击切换
    let isoption = true
    document.getElementById('transportChartButton').addEventListener('click', function (){
        if (isoption===true){
            myChart.setOption(option2);
            document.getElementById('transportChartButton').innerText = '库房端'
            document.getElementById('kftitle').innerText = '移动端报警类型统计'
            isoption=false
        }else{
            myChart.setOption(option);
            document.getElementById('transportChartButton').innerText = '移动端'
            document.getElementById('kftitle').innerText = '库房端报警类型统计'
            isoption = true
        }
    })
    $(".sebtn a").click(function () {
        $(this).addClass("active").siblings().removeClass("active")
    })
    $(".sebtn a").eq(0).click(function () {
        myChart.setOption(option1);
    })
    $(".sebtn a").eq(1).click(function () {
        myChart.setOption(option2);
    })
    $(".sebtn a").eq(2).click(function () {
        myChart.setOption(option3);
    })

}