//响应式布局
$(window).load(function () {
    $(".loading").fadeOut()
})
$(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 chart1(data) {
    let myChart = echarts.init(document.getElementById('chart1'));
    let xAxis = [];
    let series_data = [];
    data.forEach(item => {
        if (item.X.length == 4) {
            xAxis.push(item.X + '年');
        }
        if (item.X.length == 2) {
            xAxis.push(item.X + '月');
        }
        if (item.X.length == 1) {
            xAxis.push(item.X + '季度');
        }
        series_data.push(item.C);
    });
    let option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: "shadow"
            }
        },
        grid: {
            left: '5%',
            top: '20%',
            right: '5%',
            bottom: '3%',
            containLabel: true
        },
        color: ['#23abca'],
        xAxis: [{
            data: xAxis,
            axisLine: chart_option().yAxis.axisLine
        }],
        yAxis: chart_option().yAxis,
        series: [{
            type: 'bar',
            data: series_data,
            barWidth: '35%', //柱子宽度
            itemStyle: {
                normal: {
                    opacity: 1,
                    barBorderRadius: [5, 5, 0, 0],
                    label: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            color: 'rgba(255,255,255,.6)'
                        }
                    }
                }
            }
        }

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

//实验完成率
function chart2(data) {
    let myChart = echarts.init(document.getElementById('chart2'));
    let list = [];
    data.forEach(item => {
        list.push({value: item.COUNT, name: item.TAG});
    });
    let option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: "shadow"
            }
        },
        series: [{
            type: 'pie',
            radius: ['40%', '70%'],
            label: {
                normal: {
                    show: true,
                    formatter: '{b}: {d}%',
                    fontSize: '14',
                    textStyle: {
                        color: 'rgba(255,255,255,.6)'
                    }
                }
            },
            data: list
        }

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

//样机信息:样机数量
function chart3(data) {
    let myChart = echarts.init(document.getElementById('chart3'));
    let xAxis = [];
    let series_data = [];
    data.forEach(item => {
        if (item.X.length>2) {
            xAxis.push(item.X);
        }
        if (item.X.length == 2) {
            xAxis.push(item.X + '月');
        }
        if (item.X.length == 1) {
            xAxis.push(item.X + '季度');
        }
        series_data.push(item.C);
    });
    let option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: "shadow"
            }
        },
        grid: {
            left: '5%',
            top: '15%',
            right: '5%',
            bottom: '3%',
            containLabel: true
        },
        color: ['rgb(33, 150, 243)'],
        xAxis: [{
            data: xAxis,
            axisLine: chart_option().yAxis.axisLine
        }],
        yAxis: chart_option().yAxis,
        series: [{
            type: 'bar',
            data: series_data,
            barWidth: '35%', //柱子宽度
            itemStyle: {
                normal: {
                    opacity: 1,
                    barBorderRadius: [5, 5, 0, 0],
                    label: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            color: 'rgba(255,255,255,.6)'
                        }
                    }
                }
            }
        }

        ]
    };
    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}
//样机信息:样机试验次数
function chart4(data) {
    let myChart = echarts.init(document.getElementById('chart4'));
    let xAxis = [];
    let series_data = [];
    data.forEach(item => {
        if (item.X.length>2) {
            xAxis.push(item.X);
        }
        if (item.X.length == 2) {
            xAxis.push(item.X + '月');
        }
        if (item.X.length == 1) {
            xAxis.push(item.X + '季度');
        }
        series_data.push(item.C);
    });
    let option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: "shadow"
            }
        },
        grid: {
            left: '5%',
            top: '20%',
            right: '5%',
            bottom: '3%',
            containLabel: true
        },
        color: ['#4CAF50'],
        xAxis: [{
            data: xAxis,
            axisLine: chart_option().yAxis.axisLine
        }],
        yAxis: chart_option().yAxis,
        series: [{
            type: 'bar',
            data: series_data,
            barWidth: '35%', //柱子宽度
            itemStyle: {
                normal: {
                    opacity: 1,
                    barBorderRadius: [5, 5, 0, 0],
                    label: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            color: 'rgba(255,255,255,.6)'
                        }
                    }
                }
            }
        }

        ]
    };
    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}
//设备资产:使用时长条形图
function chart5(data) {
    let myChart = echarts.init(document.getElementById('chart5'));
    let yAxis = [];
    let series_data = [];
    data.forEach(item => {
        yAxis.unshift(item.ITEM_EQKTX);
        series_data.unshift((item.ITEM_VTIME / 1440).toFixed(0));
    });
    let option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: "shadow"
            }
        },
        legend: {
            title: '使用时长条形图',
            textStyle: {
                color: 'rgba(255,255,255,.6)',
            },
        },
        grid: {
            left: '5%',
            top: '7%',
            right: '11%',
            bottom: '0%',
            containLabel: true
        },
        color: ['#23abca'],
        xAxis: [{
            type: 'value',
            show: false
        }],
        yAxis: {
            type: 'category',
            data: yAxis,
            nameTextStyle: {
                color: "rgba(255,255,255,.6)",
            },
            splitLine: {
                show: false
            },
            axisLine: { //坐标轴线
                show: false,
                lineStyle: {
                    color: "rgba(255,255,255,.6)",
                    width: 2,
                    type: "solid"
                },
            },
            axisTick: {
                show: false,//不显示坐标轴刻度线
            },
            axisLabel: {
                formatter: (value) => {
                    if (value.length > 8) {
                        value = value.substring(0, 8) + '...';
                    }
                    return value;
                },
                show: true,
                textStyle: {
                    color: "rgba(255,255,255,.6)",
                    fontSize: '12',
                },
            }
        },
        series: [{
            type: 'bar',
            data: series_data,
            barWidth: '35%', //柱子宽度
            name: '使用时长条形图',
            label: {
                show: true,
                position: 'right',
                textStyle: {
                    color: 'rgba(255,255,255,.6)',
                },
                formatter: (value) => {
                    return value.value + '天';
                },
            }
        }
        ]
    };
    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}

//设备资产:使用频次条形图
function chart6(data) {
    let myChart = echarts.init(document.getElementById('chart6'));
    let yAxis = [];
    let series_data = [];
    data.forEach(item => {
        yAxis.unshift(item.ITEM_EQKTX);
        series_data.unshift(item.ITEM_INVALUE);
    });
    let option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: "shadow"
            }
        },
        legend: {
            title: '使用频次条形图',
            textStyle: {
                color: 'rgba(255,255,255,.6)',
            },
        },
        grid: {
            left: '5%',
            top: '7%',
            right: '11%',
            bottom: '0%',
            containLabel: true
        },
        color: ['#FF9800'],
        xAxis: [{
            type: 'value',
            show: false
        }],
        yAxis: {
            type: 'category',
            data: yAxis,
            nameTextStyle: {
                color: "rgba(255,255,255,.6)",
            },
            splitLine: {
                show: false
            },
            axisLine: { //坐标轴线
                show: false,
                lineStyle: {
                    color: "rgba(255,255,255,.6)",
                    width: 2,
                    type: "solid"
                },
            },
            axisTick: {
                show: false,//不显示坐标轴刻度线
            },
            axisLabel: {
                formatter: (value) => {
                    if (value.length > 8) {
                        value = value.substring(0, 8) + '...';
                    }
                    return value;
                },
                show: true,
                textStyle: {
                    color: "rgba(255,255,255,.6)",
                    fontSize: '12',
                },
            }
        },
        series: [{
            type: 'bar',
            data: series_data,
            barWidth: '35%', //柱子宽度
            name: '使用频次条形图',
            label: {
                show: true,
                position: 'right',
                textStyle: {
                    color: 'rgba(255,255,255,.6)',
                },
                formatter: (value) => {
                    return value.value + '次';
                },
            }
        }
        ]
    };
    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}

//向上滚动
function roll(t, tag) {
    //待完成试验滚动
    let ul1 = document.getElementById("comment1");
    let ul2 = document.getElementById("comment2");
    let ulbox = document.getElementById("marquee-view");
    ul2.innerHTML = ul1.innerHTML;
    ulbox.scrollTop = 0; // 开始无滚动时设为0
    let timer = setInterval(rollStart, t, tag); // 设置定时器，参数t用在这为间隔时间（单位毫秒），参数t越小，滚动速度越快
    // 鼠标移入div时暂停滚动
    ulbox.onmouseover = function () {
        clearInterval(timer);
    }
    // 鼠标移出div后继续滚动
    ulbox.onmouseout = function () {
        timer = setInterval(rollStart, t, tag);
    }
    //已完成试验滚动
    var a2_ul1 = document.getElementById("a2_comment1");
    var a2_ul2 = document.getElementById("a2_comment2");
    var a2_ulbox = document.getElementById("a2_marquee-view");
    a2_ul2.innerHTML = a2_ul1.innerHTML;
    a2_ulbox.scrollTop = 0; // 开始无滚动时设为0
    var timer2 = setInterval(rollStart, t, tag); // 设置定时器，参数t用在这为间隔时间（单位毫秒），参数t越小，滚动速度越快
    // 鼠标移入div时暂停滚动
    a2_ulbox.onmouseover = function () {
        clearInterval(timer2);
    }
    // 鼠标移出div后继续滚动
    a2_ulbox.onmouseout = function () {
        timer2 = setInterval(rollStart, t, tag);
    }

    //样机改装信息滚动
    var a3_ul1 = document.getElementById("a3_comment1");
    var a3_ul2 = document.getElementById("a3_comment2");
    var a3_ulbox = document.getElementById("a3_marquee-view");
    a3_ul2.innerHTML = a3_ul1.innerHTML;
    a3_ulbox.scrollTop = 0; // 开始无滚动时设为0
    var timer3 = setInterval(rollStart, t, tag); // 设置定时器，参数t用在这为间隔时间（单位毫秒），参数t越小，滚动速度越快
    // 鼠标移入div时暂停滚动
    a3_ulbox.onmouseover = function () {
        clearInterval(timer3);
    }
    // 鼠标移出div后继续滚动
    a3_ulbox.onmouseout = function () {
        timer3 = setInterval(rollStart, t, tag);
    }
}

// 开始滚动函数
function rollStart(index) {
    if (index == 1) {
        // 上面声明的DOM对象为局部对象需要再次声明
        let ul1 = document.getElementById("comment1");
        let ulbox = document.getElementById("marquee-view");
        // 正常滚动不断给scrollTop的值+1,当滚动高度大于列表内容高度时恢复为0
        if (ulbox.scrollTop >= ul1.scrollHeight) {
            ulbox.scrollTop = 0;
        } else {
            ulbox.scrollTop++;
        }
    }
    if (index == 2) {
        let a2_ul1 = document.getElementById("a2_comment1");
        let a2_ulbox = document.getElementById("a2_marquee-view");
        // 正常滚动不断给scrollTop的值+1,当滚动高度大于列表内容高度时恢复为0
        if (a2_ulbox.scrollTop >= a2_ul1.scrollHeight) {
            a2_ulbox.scrollTop = 0;
        } else {
            a2_ulbox.scrollTop++;
        }
    }
    if (index == 3) {
        let a3_ul1 = document.getElementById("a3_comment1");
        let a3_ulbox = document.getElementById("a3_marquee-view");
        // 正常滚动不断给scrollTop的值+1,当滚动高度大于列表内容高度时恢复为0
        if (a3_ulbox.scrollTop >= a3_ul1.scrollHeight) {
            a3_ulbox.scrollTop = 0;
        } else {
            a3_ulbox.scrollTop++;
        }
    }
}
