new Vue({
    el: '#all',
    data: function() {
        return {
            token: "",
            length1: 9,
            classTotal: 0,
            dataFood: {
                Recipes_recommend: 0,
                Recipes_Foods: 0,
                RecipesImg: 0,
                RecipeMsg: 0,
            },
            url: utils.adminUrl + "/api",
            url1: "http://localhost:50011/api"
        }
    },

    mounted: function() {
        this.token = sessionStorage.getItem("token"); //与API交互
        //班级运行情况
        this.getData();
        this.changeWindow();
        this.navTo()
    },
    methods: {
        // 请求数据
        // request({
        //     type,
        //     url,
        //     data = {},
        //     headers = {
        //         'content-type': 'application/json',
        //         'Authorization': "Bearer " + this.token,
        //     }
        // }) {
        //     return new Promise(resolve => {
        //         $.ajax({
        //             type,
        //             url,
        //             data,
        //             headers,
        //             success(data) {
        //                 resolve(data);
        //             }
        //         });
        //     });
        // },
        changeWindow: function() {
            window.onresize = function() {
                setTimeout(function() {
                    window.location.reload();
                }, 200)
            }
        },
        navTo: function () {
            document.getElementById("html5").href = '/WebApp/EverydayData/wisdomMedic.html?EquipmentID=' + window.guid
            document.getElementById("html1").href = '/WebApp/EverydayData/everdayData.html?EquipmentID=' + window.guid
            document.getElementById("html2").href = '/WebApp/EverydayData/kindergartenThings.html?EquipmentID=' + window.guid
            document.getElementById("html3").href = '/WebApp/EverydayData/careEducation.html?EquipmentID=' + window.guid
            document.getElementById("html4").href = '/WebApp/EverydayData/homeInteraction.html?EquipmentID=' + window.guid

        },
        getData: function() {

            this.charts2();
            this.charts3();
            let that = this
            layui.config({
                base: "/webconfig/layuiJs/"
            }).use(['jquery', 'form', 'laydate', 'utils', 'basic', 'layui_list'], function() {
                AjaxGet(
                    that.url + "/admin/bigdata/getbabyrecipe", {
                        EquipmentID: window.guid
                    },
                    function(res) {
                        // console.log(res, 132)
                        var data2 = res
                        if (data2.data) {
                            that.dataFood.Recipes_recommend = data2.data.Recipes_recommend
                            that.dataFood.Recipes_Foods = data2.data.Recipes_Foods
                            that.dataFood.RecipesImg = data2.data.RecipesImg
                            that.dataFood.RecipeMsg = data2.data.RecipeMsg
                        }
                    }
                );
            });
            this.charts4();
            this.charts5();
            layui.config({
                base: "/webconfig/layuiJs/"
            }).use(['jquery', 'form', 'laydate', 'utils', 'basic', 'layui_list'], function() {
                AjaxGet(
                    that.url + "/admin/bigdata/getdevelopmentevaluationstatistics", {
                        EquipmentID: window.guid
                    },
                    function(res) {
                        // console.log(res, 132)
                        var data1 = res
                        if (data1.data) {
                            for (let i = 0; i < data1.data.length; i++) {

                                if (data1.data[i].ClassType == -1) {
                                    that.Charts1('echarts6' + (i + 1), {
                                        title: "托班",
                                        complete: data1.data[i].Complete,
                                        unfinished: data1.data[i].Notcomplete
                                    });
                                } else if (data1.data[i].ClassType == 0) {
                                    that.Charts1('echarts6' + (i + 1), {
                                        title: "小班",
                                        complete: data1.data[i].Complete,
                                        unfinished: data1.data[i].Notcomplete
                                    });
                                } else if (data1.data[i].ClassType == 1) {
                                    that.Charts1('echarts6' + (i + 1), {
                                        title: "中班",
                                        complete: data1.data[i].Complete,
                                        unfinished: data1.data[i].Notcomplete
                                    });
                                } else if (data1.data[i].ClassType == 2) {
                                    that.Charts1('echarts6' + (i + 1), {
                                        title: "大班",
                                        complete: data1.data[i].Complete,
                                        unfinished: data1.data[i].Notcomplete
                                    });
                                }
                            }
                        }
                    }
                );
            });
            layui.config({
                base: "/webconfig/layuiJs/"
            }).use(['jquery', 'form', 'laydate', 'utils', 'basic', 'layui_list'], function() {
                AjaxGet(
                    that.url + "/admin/bigdata/getpatrolstatistics", {
                        EquipmentID: window.guid
                    },
                    function(res) {
                        // console.log(res, 132)
                        var data = res
                        if (data.data) {
                            that.length1 = data.data.List.length
                            if (that.length1 > 9) {
                                that.length1 = 9
                            }
                            that.classTotal = data.data.ClassNumber
                            that.Charts1('echarts01', {
                                title: "活动计划",
                                complete: data.data.List[0] && data.data.List[0].Complete ? data.data.List[0].Complete : '',
                                unfinished: data.data.List[0] && data.data.List[0].NotComplete ? data.data.List[0].NotComplete : ''
                            });
                            for (let i = 1; i < data.data.List.length; i++) {
                                if (data.data.List.length > 9 && i > 1) {
                                    that.Charts1('echarts0' + i, {
                                        title: data.data.List[i] && data.data.List[i].Title ? data.data.List[i].Title : '',
                                        complete: data.data.List[i] && data.data.List[i].Complete ? data.data.List[i].Complete : '',
                                        unfinished: data.data.List[i] && data.data.List[i].NotComplete ? data.data.List[i].NotComplete : ''
                                    });
                                }
                            }
                        }
                    }
                );
            });

        },
        Charts1: function(str, data) {
            var chartDom = document.getElementById(str);
            var myChart = echarts.init(chartDom);
            var option;
            option = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    bottom: "0",
                    left: 'center',
                    textStyle: {
                        fontSize: 12, //字体大小
                        color: '#ffffff' //字体颜色
                    }
                },
                title: {
                    text: data.title,
                    left: "center",
                    top: "center",
                    textStyle: {
                        //文字颜色
                        color: '#00CAFF',
                        //字体风格,'normal','italic','oblique'
                        fontStyle: 'normal',
                        //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
                        fontWeight: 'bold',
                        //字体系列
                        fontFamily: 'sans-serif',
                        //字体大小
                        fontSize: 15
                    }
                },
                grid: {
                    top: "5%",
                    left: '5%',
                    right: '4%',
                    bottom: '20%',
                    containLabel: true
                },
                series: [{
                    name: data.title + ':',
                    type: 'pie',
                    radius: ['45%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    itemStyle: {
                        emphasis: {
                            label: {
                                show: false,
                            }
                        },
                        normal: {
                            color: function(params) {
                                // var colorList = ["#4B81FC", "#C9D57B"]
                                // return colorList[params.dataIndex % colorList.length];
                                var colorList = [{
                                        c1: '#3E7DFC',
                                        c2: '#4D82FC'
                                    },
                                    {
                                        c1: '#03CACC',
                                        c2: '#FED866'
                                    }
                                ]
                                return new echarts.graphic.LinearGradient(1, 1, 0, 0, [{ //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                                    offset: 0,
                                    color: colorList[params.dataIndex].c1
                                }, {
                                    offset: 1,
                                    color: colorList[params.dataIndex].c2
                                }])
                            },
                        },
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: data.complete, name: '已完成' },
                        { value: data.unfinished, name: '未完成' },
                    ]
                }]
            };
            option && myChart.setOption(option);
        },
        charts2: function() {
            var chartDom = document.getElementById('echarts2');
            var myChart = echarts.init(chartDom);
            var option;
            let that = this
            var data1 = [
                { value: 13, name: '食谱总数' },
                { value: 14, name: '菜品数' },
                { value: 24, name: '食谱照片数' },
                { value: 17, name: '食谱建议数' },
            ]
            layui.config({
                base: "/webconfig/layuiJs/"
            }).use(['jquery', 'form', 'laydate', 'utils', 'basic', 'layui_list'], function() {
                AjaxGet(
                    that.url + "/admin/bigdata/getbabyrecipe", {
                        EquipmentID: window.guid
                    },
                    function(res) {
                        // console.log(res, 132)
                        var data = res
                        if (data.data) {
                            data1[0].value = data.data.Recipes_recommend
                            data1[1].value = data.data.Recipes_Foods
                            data1[2].value = data.data.RecipesImg
                            data1[3].value = data.data.RecipeMsg
                        }

                        option = {
                            tooltip: {
                                trigger: 'item'
                            },
                            toolbox: {
                                show: true,
                            },
                            series: [{
                                name: '宝宝食谱',
                                type: 'pie',
                                radius: ['20%', '70%'],
                                center: ['50%', '50%'],
                                roseType: 'radius', //radius半径模式 area面积模式
                                itemStyle: {
                                    borderRadius: 5,
                                    normal: {
                                        color: function(params) {
                                            // var colorList = ["#4B81FC", "#C9D57B"]
                                            // return colorList[params.dataIndex % colorList.length];
                                            var colorList = [{
                                                    c1: '#0FD5F9',
                                                    c2: '#0487ED'
                                                },
                                                {
                                                    c1: '#0666E8',
                                                    c2: '#0487ED'
                                                },
                                                {
                                                    c1: '#A2FFD0',
                                                    c2: '#3EB076'
                                                },
                                                {
                                                    c1: '#FFFE95',
                                                    c2: '#C1C049'
                                                }
                                            ]
                                            return new echarts.graphic.LinearGradient(1, 1, 0, 0, [{ //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                                                offset: 0,
                                                color: colorList[params.dataIndex].c1
                                            }, {
                                                offset: 1,
                                                color: colorList[params.dataIndex].c2
                                            }])
                                        },
                                    },
                                },
                                label: {
                                    show: false
                                },
                                emphasis: {
                                    label: {
                                        show: false
                                    }
                                },
                                data: data1
                            }]
                        };

                        option && myChart.setOption(option);
                    }
                );
            });


        },
        charts3: function() {
            var chartDom = document.getElementById('echarts3');
            var myChart = echarts.init(chartDom);
            var option;
            var dataAxis = ['早餐', '早点', '午餐', '午点', '晚餐'];
            var data1 = [
                { value: 30, name: '早餐' },
                { value: 20, name: '早点' },
                { value: 60, name: '午餐' },
                { value: 30, name: '午点' },
                { value: 40, name: '晚餐' },
            ];
            let that = this
            layui.config({
                base: "/webconfig/layuiJs/"
            }).use(['jquery', 'form', 'laydate', 'utils', 'basic', 'layui_list'], function() {
                AjaxGet(
                    that.url + "/admin/bigdata/getbabyrecipe", {
                        EquipmentID: window.guid
                    },
                    function(res) {
                        // console.log(res, 132)
                        var data = res
                        var str = '{Circle|}'
                        if (data.data) {
                            data1[0].value = data.data.Date[0]
                            data1[1].value = data.data.Date[1]
                            data1[2].value = data.data.Date[2]
                            data1[3].value = data.data.Date[3]
                            data1[4].value = data.data.Date[4]
                        }

                        option = {
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                    type: 'shadow'
                                },
                                formatter: function(params) {
                                    return params[0].axisValueLabel + "：" + params[0].value + "种" + "</br>"
                                },
                            },
                            xAxis: {
                                data: dataAxis,
                                axisLabel: {
                                    // inside: true,
                                    textStyle: {
                                        color: '#fff'
                                    }
                                },
                                axisTick: {
                                    show: false
                                },
                                axisLine: {
                                    show: false
                                },
                                z: 10
                            },
                            yAxis: {
                                type: 'value',
                                // max: 100,
                                axisLine: {
                                    show: false
                                },
                                axisTick: {
                                    show: false
                                },
                                axisLabel: {
                                    formatter: "{value}",
                                    color: '#fff'
                                },
                                splitLine: {
                                    lineStyle: {
                                        color: ['#151d3d']
                                    }
                                },
                            },
                            series: [{
                                type: 'bar',
                                showBackground: true,
                                stack: '总量',
                                barWidth: 20,
                                barMinHeight: 20,

                                itemStyle: {
                                    normal: {
                                        barBorderRadius: [12, 12, 12, 12],
                                        color: new echarts.graphic.LinearGradient(
                                            0, 1, 0, 0, [
                                                { offset: 0, color: '#1bc6f5' },
                                                { offset: 0.5, color: '#1dadee' },
                                                { offset: 1, color: '#207ce2' }
                                            ]
                                        ),
                                        label: {
                                            show: true,
                                            position: [-1, 0],
                                            color: "#fff",
                                            formatter: str,
                                            rich: {
                                                Circle: {
                                                    height: 12.8,
                                                    backgroundColor: {
                                                        image: '/webconfig/images/everdayData/circle1.png'
                                                    }
                                                },
                                            }
                                        }
                                    },

                                },
                                emphasis: {
                                    itemStyle: {
                                        barBorderRadius: [12, 12, 12, 12],
                                        color: new echarts.graphic.LinearGradient(
                                            0, 1, 0, 0, [
                                                { offset: 0, color: '#1bc6f5' },
                                                { offset: 0.5, color: '#1dadee' },
                                                { offset: 1, color: '#207ce2' }
                                            ]
                                        ),
                                    }
                                },
                                data: data1
                            }]
                        };

                        option && myChart.setOption(option);
                    }
                );
            });

        },
        charts4: function() {
            var chartDom = document.getElementById('echarts4');
            var myChart = echarts.init(chartDom);
            var option;
            var data1 = [
                { value: 17, name: '未完成周计划班数' },
                { value: 23, name: '完成周计划班数' },
            ]
            let that = this
            layui.config({
                base: "/webconfig/layuiJs/"
            }).use(['jquery', 'form', 'laydate', 'utils', 'basic', 'layui_list'], function() {
                AjaxGet(
                    that.url + "/admin/bigdata/getweeklyplan", {
                        EquipmentID: window.guid
                    },
                    function(res) {
                        // console.log(res, 132)
                        var data = res
                        if (data.data) {
                            data1[0].value = data.data.NotComplete
                            data1[1].value = data.data.Complete
                        }
                        option = {
                            tooltip: {
                                trigger: 'item'
                            },
                            legend: {
                                orient: 'vertical',
                                bottom: "center",
                                right: '0',
                                textStyle: {
                                    fontSize: 12, //字体大小
                                    color: '#ffffff' //字体颜色
                                }
                            },
                            title: {
                                text: "周计划",
                                left: "center",
                                top: "center",
                                textStyle: {
                                    //文字颜色
                                    color: '#FFFFFF',
                                    //字体风格,'normal','italic','oblique'
                                    fontStyle: 'normal',
                                    //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
                                    fontWeight: 'bold',
                                    //字体系列
                                    fontFamily: 'sans-serif',
                                    //字体大小
                                    fontSize: 20
                                }
                            },
                            grid: {
                                top: "5%",
                                left: '5%',
                                right: '4%',
                                bottom: '20%',
                                containLabel: true
                            },
                            series: [{
                                name: '周计划:',
                                type: 'pie',
                                radius: ['45%', '70%'],
                                avoidLabelOverlap: false,
                                label: {
                                    show: false,
                                    position: 'center'
                                },
                                itemStyle: {
                                    emphasis: {
                                        label: {
                                            show: false,
                                        }
                                    },
                                    normal: {
                                        color: function(params) {
                                            // var colorList = ["#4B81FC", "#C9D57B"]
                                            // return colorList[params.dataIndex % colorList.length];
                                            var colorList = [{
                                                    c1: '#3E7DFC',
                                                    c2: '#4D82FC'
                                                },
                                                {
                                                    c1: '#391E85',
                                                    c2: '#A877F4'
                                                }
                                            ]
                                            return new echarts.graphic.LinearGradient(1, 1, 0, 0, [{ //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                                                offset: 0,
                                                color: colorList[params.dataIndex].c1
                                            }, {
                                                offset: 1,
                                                color: colorList[params.dataIndex].c2
                                            }])
                                        },
                                    },
                                },
                                labelLine: {
                                    show: false
                                },
                                data: data1
                            }]
                        };
                        option && myChart.setOption(option);
                    }
                );
            });

        },
        charts5: function() {
            var chartDom = document.getElementById('echarts5');
            var myChart = echarts.init(chartDom);
            var option;
            var data1 = [11, 11, 7, 7, 7]
            var data2 = [8, 8, 6, 11, 11]

            let that = this
            layui.config({
                base: "/webconfig/layuiJs/"
            }).use(['jquery', 'form', 'laydate', 'utils', 'basic', 'layui_list'], function() {
                AjaxGet(
                    that.url + "/admin/bigdata/geteducationresearchstatistics", {
                        EquipmentID: window.guid
                    },
                    function(res) {
                        // console.log(res, 132)
                        var data = res
                        if (data.data) {
                            data1 = data.data.Award
                            data2 = data.data.CEH
                        }
                        option = {
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                                }
                            },
                            legend: {
                                data: ['继续教育', '科研获奖'],
                                x: 'center', //可设定图例在左、右、居中
                                y: 'top', //可设定图例在上、下、居中
                                padding: [0, 0, 0, 45], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
                                textStyle: {
                                    fontSize: 14, //字体大小
                                    color: '#ffffff' //字体颜色
                                }
                            },
                            grid: {
                                left: '5%',
                                right: '6%',
                                bottom: '3%',
                                containLabel: true
                            },
                            xAxis: [{
                                type: 'category',
                                data: ['国家级', '省级', '地市级', '县级', '校级'],
                                axisTick: {
                                    alignWithLabel: true
                                },
                                axisLabel: {
                                    // inside: true,
                                    textStyle: {
                                        color: '#00FFFF'
                                    }
                                },
                            }],
                            yAxis: [{
                                type: 'value',
                                axisLine: {
                                    show: false
                                },
                                axisTick: {
                                    show: false
                                },
                                axisLabel: {
                                    formatter: "{value}人",
                                    color: '#fff'
                                },
                                splitLine: {
                                    lineStyle: {
                                        color: ['#081868'],
                                    }
                                },
                            }],
                            series: [{
                                    name: '继续教育',
                                    type: "bar",
                                    barWidth: 20,
                                    barGap: "0%",
                                    itemStyle: {
                                        color: new echarts.graphic.LinearGradient(
                                            0, 1, 0, 0, [
                                                { offset: 0, color: '#0336FF' },
                                                { offset: 0.7, color: '#01B4FF' },
                                                { offset: 1, color: '#01B4FF' }
                                            ]
                                        ),
                                    },
                                    data: data1
                                },
                                {
                                    name: '科研获奖',
                                    type: "bar",
                                    barWidth: 20,
                                    barGap: "0%",
                                    itemStyle: {
                                        normal: {
                                            color: new echarts.graphic.LinearGradient(
                                                0, 1, 0, 0, [
                                                    { offset: 0, color: '#EF6E18' },
                                                    { offset: 0.7, color: '#FCC204' },
                                                    { offset: 1, color: '#FCC204' }
                                                ]
                                            ),
                                        }
                                    },
                                    data: data2
                                }
                            ]
                        };
                        option && myChart.setOption(option);
                    }
                );
            });


        },
        charts6: function(str, data) {
            var chartDom = document.getElementById(str);
            var myChart = echarts.init(chartDom);
            var option;
            option = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    bottom: "0",
                    left: 'center',
                    textStyle: {
                        fontSize: 12, //字体大小
                        color: '#ffffff' //字体颜色
                    }
                },
                title: {
                    text: data.title,
                    left: "center",
                    top: "center",
                    textStyle: {
                        //文字颜色
                        color: '#00CAFF',
                        //字体风格,'normal','italic','oblique'
                        fontStyle: 'normal',
                        //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
                        fontWeight: 'bold',
                        //字体系列
                        fontFamily: 'sans-serif',
                        //字体大小
                        fontSize: 15
                    }
                },
                grid: {
                    top: "5%",
                    left: '5%',
                    right: '4%',
                    bottom: '20%',
                    containLabel: true
                },
                series: [{
                    name: data.title + ':',
                    type: 'pie',
                    radius: ['45%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    itemStyle: {
                        emphasis: {
                            label: {
                                show: false,
                            }
                        },
                        normal: {
                            color: function(params) {
                                // var colorList = ["#4B81FC", "#C9D57B"]
                                // return colorList[params.dataIndex % colorList.length];
                                var colorList = [{
                                        c1: '#EF6E18',
                                        c2: '#FCC204'
                                    },
                                    {
                                        c1: '#0336FF',
                                        c2: '#01B4FF'
                                    }
                                ]
                                return new echarts.graphic.LinearGradient(1, 1, 0, 0, [{ //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                                    offset: 0,
                                    color: colorList[params.dataIndex].c1
                                }, {
                                    offset: 1,
                                    color: colorList[params.dataIndex].c2
                                }])
                            },
                        },
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: data.complete, name: '完成评测' },
                        { value: data.unfinished, name: '未完成评测' },
                    ]
                }]
            };
            option && myChart.setOption(option);
        }
    }
})