Cold_DataV/static/js/C_Mode_v3D_精简版.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();
    }

    f_kf_open()
})

/****/
$(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() {
    $("#v_3d").show();
    $("#v_trail").hide();
    $(".R_KF_Column").show();
    $(".R_YD_Column").hide();
    V_kf_yd = 1
    f_view()
}

function f_yd_open() {
    $("#v_3d").hide();
    $("#v_trail").show();
    $(".R_KF_Column").hide();
    $(".R_YD_Column").show();
    V_kf_yd = 2
    f_view()
}

// 视图数据改变
function f_view() {
    if(C_json == null) return

    // 3D加载
    f_v3d_loadProject(C_json.Company_v3d.split("|")[1])
    f_v_v3d()

    // 屏蔽按钮
    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_移动离线总数").html(C_json.Device.T_移动离线总数)
    $("#T_移动监控总数").html(C_json.Device.T_移动监控总数)
    $("#T_移动总数s").html(C_json.Device.T_移动总数)
    $("#T_移动设备报警数_今天s").html(C_json.Warning.T_移动设备报警数_今天)
    $("#T_任务总数_今天s").html(C_json.Task.T_任务总数_今天)
    w_x_ = parseInt(C_json.Warning.T_库房报警设备数_今天)
    if (w_x_ != 0) {
        w_x_ = w_x_ / (C_json.Device.T_库房总数)
        w_x_ *= 100
    }
    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
    }
    w_x_ = parseInt(C_json.Task.T_任务设备数_今天)
    if (w_x_ != 0) {
        w_x_ = w_x_ / C_json.Device.T_移动总数
        w_x_ *= 100
    }
    $("#T_今日闲置设备s").html(w_x_.toFixed(1) + "%")

    // 报警类
    // $("#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_移动设备报警数_昨天").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_任务总数_昨天").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_任务设备数_上一月)
    echarts_探头报警率排名()
    echarts_库房端报警类型统计()
    echarts_报警设备数近7天曲线图()
    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_C_1").html(C_json.Device.T_库房总数)// 公司下一级统计
    $("#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("今日库房报警率")

    // 设备列表
    $('#Company_DeviceG').liMarquee('destroy'); // 清除滚动
    $("#Company_DeviceL").html("")// 清除内容
    Company_Device_l = []
    f_Company_Device(C_json)
    // console.log("Company_Next_T_l:",Company_Next_T_l)
    // 开始滚动
    $('#Company_DeviceG').liMarquee({
        direction: 'up',//身上滚动
        runshort: false,//内容不足时不滚动
        scrollamount: 20//速度
    });
    let isKf =true
    document.getElementById('transportButton').addEventListener('click', function (){
        console.log("点击了按钮")
            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= "库房端汇总统计"
            }
    })
}
function Jump(){
    window.open("https://cold.coldbaozhida.com/#/dataDisplay/mapShow", '_blank');
}

function f_Company_Device(C_j) {

    for (var C_key in C_j.Device.DeviceList) {
        T_t = ""
        T_rh = ""

        C_b = C_j.Device.DeviceList[C_key]
        t_w_ = ""
        if (C_b.T_DeviceSensorParameter.T_free == 0){
            if (( C_b.T_DeviceSensorParameter.T_Tlower > C_b.T_DeviceSensorData.T_t) || ( C_b.T_DeviceSensorData.T_t > C_b.T_DeviceSensorParameter.T_Tupper)){
                t_w_ = " style='color: #f93fff' "
                console.log("温度超标", C_b.T_DeviceSensorParameter.T_Tlower , C_b.T_DeviceSensorData.T_t , C_b.T_DeviceSensorData.T_t , C_b.T_DeviceSensorParameter.T_Tupper)
            }
        }

        h_w_ = ""
        if (C_b.T_DeviceSensorParameter.T_free == 0){
            if (( C_b.T_DeviceSensorParameter.T_RHlower > C_b.T_DeviceSensorData.T_rh) || ( C_b.T_DeviceSensorData.T_rh > C_b.T_DeviceSensorParameter.T_RHupper)){
                h_w_ = " style='color: #f93fff' "
                console.log("湿度超标", C_b.T_DeviceSensorParameter.T_RHlower , C_b.T_DeviceSensorData.T_rh , C_b.T_DeviceSensorData.T_rh , C_b.T_DeviceSensorParameter.T_RHupper)
            }
        }


        T_t = C_b.T_DeviceSensorData.T_t + "°C"

        h_w_title = ""
        if(C_b.T_DeviceSensorData.T_rh == 0){
            T_rh = "无"
        }else {
            T_rh = C_b.T_DeviceSensorData.T_rh + "%"
            h_w_title = "  title=\""+C_b.T_DeviceSensorParameter.T_RHlower+"% ~ "+C_b.T_DeviceSensorParameter.T_RHupper+"%\" "
        }

        if(C_b.T_online != 1 && C_b.T_online_s != 1 ){
            T_t = "离线"
            T_rh = "离线"
            t_w_ = " style='color: rgba(255, 255, 255, .6)' "
            h_w_ = " style='color: rgba(255, 255, 255, .6)' "
        }

        $("#Company_DeviceL").append("<li onclick=\"f_d_onclick(\'"+C_b.T_3dview+"\')\"><p><span>" + C_b.T_name + "</span><span "+t_w_+"  title=\""+C_b.T_DeviceSensorParameter.T_Tlower+"°C ~ "+C_b.T_DeviceSensorParameter.T_Tupper+"°C\" >" + T_t + "</span><span "+h_w_+" "+h_w_title+">" + T_rh + "</span></p></li>")
    }

}
function f_d_onclick(T_3dview) {
    if(T_3dview.length > 0){
        f_DeviceonDblclick(T_3dview)
    }
}
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_库房端报警类型统计() {
    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);
    })

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

}
let isfull = true;

function Full() {
    const fullElements = document.getElementsByClassName('full');
    if (isfull) {
        for (let i = 0; i < fullElements.length; i++) {
            fullElements[i].classList.add('hidden');
        }
        isfull = false;
    } else {
        for (let i = 0; i < fullElements.length; i++) {
            fullElements[i].classList.remove('hidden');
        }
        isfull = true;
    }
}