new Vue({
    el: '#all',
    data: function() {
        return {
            data1: {
                OrganName: "攀枝花市幼儿园",
                TerritoryAreaCount: 0,
                ClassCount: 0,
                WorkersNumber: 0,
                TeachNumber: 0,
                StudentNumber: 0,

            },
            token: "",
            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: function(
        //     type,
        //     url,
        //     data,
        //     headers
        // ) {
        //     if (data) {
        //         data = {}
        //     }
        //     if (headers) {
        //         headers = {
        //             'content-type': 'application/json',
        //             'Authorization': "Bearer " + this.token,
        //         }
        //     }
        //     return new Promise(function resolve() {
        //         $.ajax({
        //             type: type,
        //             url: url,
        //             data: data,
        //             headers: headers,
        //             success: function(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.token = window.sessionStorage.getItem("token")
            // let data = await this.request(
            //         "GET",
            //         `${this.url}/admin/bigdata/getorganinfo`, {
            //             EquipmentID: window.guid
            //         }
            //     )
            let that = this
            layui.config({
                base: "/webconfig/layuiJs/"
            }).use(['jquery', 'form', 'laydate', 'utils', 'basic', 'layui_list'], function() {
                AjaxGet(
                    that.url + "/admin/bigdata/getorganinfo", {
                        EquipmentID: window.guid
                    },
                    function(res) {
                        // console.log(res, 132)
                        var data = res
                        if (data.data) {
                            that.data1.OrganName = data.data.OrganName
                            that.data1.TerritoryAreaCount = data.data.TerritoryAreaCount
                            that.data1.ClassCount = data.data.ClassCount
                            that.data1.WorkersNumber = data.data.WorkersNumber
                            that.data1.TeachNumber = data.data.TeachNumber
                            that.data1.StudentNumber = data.data.StudentNumber
                        }
                        that.Charts1();
                        that.charts2();
                        that.charts3();
                        that.charts4();
                        that.charts5();
                    }
                );
            });
        },
        Charts1: function() {
            let chartDom = document.getElementById('echarts1');
            let myChart = echarts.init(chartDom);
            let option;

            let that = this
            layui.config({
                base: "/webconfig/layuiJs/"
            }).use(['jquery', 'form', 'laydate', 'utils', 'basic', 'layui_list'], function() {
                AjaxGet(
                    that.url + "/admin/bigdata/getoutintoschoolinfo", {
                        EquipmentID: window.guid
                    },
                    function(res) {
                        var data = res
                        let dataStudent
                        let dataTeacher
                            //console.log(data)
                            //let dataStudent = [0,31, 580, 146,0,11,12,0,0,0,10, 31, 10, 91, 628,49, 0];
                            //let dataTeacher = [8, 56, 98, 34, 6, 0, 0, 0, 1, 0, 0, 3, 4, 12, 120, 27, 10];
                        if (data.data) {
                            dataStudent = data.data.StudentNumber ? data.data.StudentNumber : [];
                            dataTeacher = data.data.TeachNumber ? data.data.TeachNumber : [];
                        }
                        option = {
                            color: ['#02dcfd', "#f96e00", "#0178e9", "rgb(255, 230, 88)", "#ff01ff", "#f9ad12"],
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                data: ["学生", '教师'],
                                y: "bottom",
                                textStyle: {
                                    color: '#5380b4'
                                }
                            },
                            grid: {
                                left: '1%',
                                right: '1%',
                                bottom: '10%',
                                containLabel: true
                            },
                            xAxis: {
                                type: 'category',
                                // boundaryGap:false,
                                axisLabel: {
                                    textStyle: {
                                        color: '#fff'
                                    },
                                },
                                splitLine: {
                                    show: true,
                                    lineStyle: {
                                        color: ['#151d3d']
                                    }
                                },
                                data: ["06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22"]
                            },
                            yAxis: {
                                show: true,
                                type: 'value',
                                axisLabel: {
                                    formatter: "{value}人",
                                    color: '#fff'
                                },
                                splitLine: {
                                    lineStyle: {
                                        color: ['#151d3d']
                                    }
                                },
                            },
                            series: [{
                                    name: '学生',
                                    smooth: true,
                                    type: 'line',
                                    symbolSize: 1,
                                    data: dataStudent,
                                },
                                {
                                    name: '教师',
                                    smooth: true,
                                    type: 'line',
                                    symbolSize: 1,
                                    data: dataTeacher,
                                }
                            ]
                        };

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

        },
        charts2: function() {
            let chartDom = document.getElementById('echarts2');
            let myChart = echarts.init(chartDom);
            let option;
            let that = this
            layui.config({
                base: "/webconfig/layuiJs/"
            }).use(['jquery', 'form', 'laydate', 'utils', 'basic', 'layui_list'], function() {
                AjaxGet(
                    that.url + "/admin/bigdata/getenteringschoolinfostatistics", {
                        EquipmentID: window.guid
                    },
                    function(res) {
                        // console.log(res, 132)
                        var data = res
                        let todayData
                            //let todayData = [4, 11, 15, 942, 942, 957]

                        if (data.data) {
                            todayData = [data.data.MatterLeave, data.data.SickLeave, data.data.NotYet, data.data.OutSchool, data.data.EnteringSchool, data.data.StudentNumber]
                        }
                        option = {
                            tooltip: {
                                trigger: 'axis',
                                //axisPointer: {
                                //    type: 'shadow'
                                //},
                                formatter: function(params) {
                                    return params[0].name + "：" + params[0].value + "人";
                                },
                            },
                            legend: {
                                show: true,
                                // data: ['2021年']
                            },
                            grid: {
                                left: '4%',
                                right: '8%',
                                bottom: '3%',
                                containLabel: true
                            },
                            xAxis: {
                                show: false,
                            },
                            yAxis: {
                                type: 'category',
                                data: ['事假', '病假', '未到', '今日离园', '今日入园', "总人数"],
                                axisLabel: {
                                    color: '#03d1f3'
                                },
                                splitLine: {
                                    lineStyle: {
                                        color: ['rgba(0,0,0,1)']
                                    }
                                },
                            },
                            series: [{
                                // name: '2021年',
                                type: 'bar',
                                barWidth: 15,
                                data: todayData,
                                //顶部数字展示pzr
                                itemStyle: {
                                    emphasis: {
                                        barBorderRadius: [100, 100, 100, 100],
                                        label: {
                                            show: true,
                                            position: "right",
                                            color: "#fff"
                                        }
                                    },
                                    normal: {
                                        //柱形图圆角，初始化效果
                                        barBorderRadius: [100, 100, 100, 100],
                                        // color:new echarts.graphic.LinearGradient(
                                        //     0, 0, 1, 0,
                                        //     [
                                        //         {offset: 0, color: '#011135'},
                                        //         {offset: 0.5, color: '#01367b'},
                                        //         {offset: 1, color: '#0178e9'}
                                        //     ]
                                        // ),
                                        color: function(params) {
                                            var colorList1 = new echarts.graphic.LinearGradient(
                                                0, 0, 1, 0, [
                                                    { offset: 0, color: '#011135' },
                                                    { offset: 0.5, color: '#01367b' },
                                                    { offset: 1, color: '#0178e9' }
                                                ]
                                            );
                                            var colorList2 = new echarts.graphic.LinearGradient(
                                                0, 0, 1, 0, [
                                                    { offset: 0, color: '#051130' },
                                                    { offset: 0.5, color: '#734a1a' },
                                                    { offset: 1, color: '#f96e00' }
                                                ]
                                            );
                                            var colorList3 = new echarts.graphic.LinearGradient(
                                                0, 0, 1, 0, [
                                                    { offset: 0, color: '#031133' },
                                                    { offset: 0.5, color: '#2a7262' },
                                                    { offset: 1, color: '#45e190' }
                                                ]
                                            );
                                            var colorList = [colorList1, colorList2, colorList3]
                                            return colorList[params.dataIndex % colorList.length];
                                        },
                                        label: {
                                            show: true,
                                            position: "right",
                                            color: "#fff"
                                        }
                                    }
                                },
                            }]
                        };

                        option && myChart.setOption(option);
                    }
                );
            });
        },
        charts3: function() {
            var chartDom = document.getElementById('echarts3');
            var myChart = echarts.init(chartDom);
            var option;
            let that = this
            layui.config({
                base: "/webconfig/layuiJs/"
            }).use(['jquery', 'form', 'laydate', 'utils', 'basic', 'layui_list'], function() {
                AjaxGet(
                    that.url + "/admin/bigdata/getteacherattendanceinfo", {
                        EquipmentID: window.guid
                    },
                    function(res) {
                        // console.log(res, 132)
                        var data = res
                        let dataChuqing

                        //let dataChuqing = [
                        //    { value: 43, name: '到校 EnteringSchool' },
                        //    { value: 12, name: '公假 PublicLeave' },
                        //    { value: 3, name: '事假 MatterLeave' },
                        //    { value: 3, name: '病假 SickLeave' },
                        //    { value: 4, name: '迟到 Late' },
                        //    { value: 7, name: '早退 LeaveEarly' },
                        //    { value: 19, name: '未到校 NotYet' }
                        //]
                        if (data.data) {
                            dataChuqing = [
                                { value: data.data.EnteringSchool ? data.data.EnteringSchool : 0, name: '到校 EnteringSchool' },
                                { value: data.data.PublicLeave ? data.data.PublicLeave : 0, name: '公假 PublicLeave' },
                                { value: data.data.MatterLeave ? data.data.MatterLeave : 0, name: '事假 MatterLeave' },
                                { value: data.data.SickLeave ? data.data.SickLeave : 0, name: '病假 SickLeave' },
                                { value: data.data.Late ? data.data.Late : 0, name: '迟到 Late' },
                                { value: data.data.LeaveEarly ? data.data.LeaveEarly : 0, name: '早退 LeaveEarly' },
                                { value: data.data.NotYet ? data.data.NotYet : 0, name: '未到校 NotYet' }
                            ]
                        }
                        option = {
                            tooltip: {
                                trigger: 'item',
                                formatter: function(params) {
                                    return params.data.name.split(" ")[0] + "：" + params.data.value + "人";
                                },
                            },
                            series: [{
                                type: 'pie',
                                radius: ['40%', '50%'],
                                avoidLabelOverlap: false,
                                minAngle: 20,
                                label: {
                                    show: true
                                },
                                itemStyle: {
                                    normal: {
                                        label: {
                                            show: true,
                                            textStyle: { color: '#00affd', fontSize: "14" },
                                            formatter: function(val) { //让series 中的文字进行换行
                                                return val.name.split(" ")[0] + "\n" + val.percent + "%";
                                            }
                                        },
                                        color: function(params) {
                                            var colorList = ["#00f6fe", "#f36ff9", "#f8b019", "#fe6e82", "#08b16b"]
                                            return colorList[params.dataIndex % colorList.length];
                                        },
                                        labelLine: {
                                            // smooth: true,
                                            length: 30,
                                            length1: 10
                                        },
                                    },
                                    emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)',
                                        textColor: '#000'
                                    }
                                },
                                data: dataChuqing
                            }]
                        };

                        option && myChart.setOption(option);
                    }
                );
            });
        },
        charts4: function() {
            var chartDom = document.getElementById('echarts4');
            var myChart = echarts.init(chartDom);
            var option;
            let that = this
            layui.config({
                base: "/webconfig/layuiJs/"
            }).use(['jquery', 'form', 'laydate', 'utils', 'basic', 'layui_list'], function() {
                AjaxGet(
                    that.url + "/admin/bigdata/getclassattendanceinfo", {
                        EquipmentID: window.guid
                    },
                    function(res) {
                        console.log(res, 132)
                        var data1 = res
                        var data
                        var yMax = 10000;
                        var dataShadow = [];
                        //var data = [
                        //    { value: 98.54, name: '实幼大一班' },
                        //    { value: 94.22, name: '建幼小三班' },
                        //    { value: 87.43, name: '建幼小二班' },
                        //    { value: 85.89, name: '建幼小四班' },
                        //    { value: 79.34, name: '建幼中一班' },
                        //    { value: 71.11, name: '建幼大一班' },
                        //    { value: 69.22, name: '实幼中三班' },
                        //    { value: 64.65, name: '实幼小二班' },
                        //    { value: 62.98, name: '建幼大三班' },
                        //    { value: 60.14, name: '建幼中三班' },
                        var dataAxis = ['第一', '第二', '第三', '第四', '第五', '第六', '第七', '第八', '第九', '第十'];
                        var str = '{Circle|}'
                        var data = []
                        if (data1.data) {
                            dataAxis = []
                            for (let i = 0; i < data1.data.length; i++) {
                                data.push({ value: data1.data[i].Rate, name: data1.data[i].Name })
                                dataAxis.push(data1.data[i].Name)
                            }
                        }
                        for (var i = 0; i < data.length; i++) {
                            dataShadow.push(yMax);
                        }

                        option = {
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                    type: 'shadow'
                                },
                                formatter: function(params) {
                                    return '第' + (params[0].dataIndex + 1) + "：" + "</br>" + params[0].name + "：" + params[0].value + "%" + "</br>"
                                },
                            },
                            xAxis: {
                                data: dataAxis,
                                axisLabel: {
                                    interval: 0,
                                    rotate: 40,
                                    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']
                                    }
                                },
                            },
                            dataZoom: [{
                                type: 'inside'
                            }],
                            series: [{
                                type: 'bar',
                                showBackground: true,
                                stack: '总量',
                                barWidth: 30,
                                barMinHeight: 30,
                                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: 18.4,
                                                    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: data
                            }]
                        };

                        // Enable data zoom when user click bar.
                        var zoomSize = 4;
                        myChart.on('click', function(params) {
                            // console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
                            myChart.dispatchAction({
                                type: 'dataZoom',
                                startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
                                endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
                            });
                        });

                        option && myChart.setOption(option);
                    }
                );
            });
        },
        charts5: function() {
            var chartDom = document.getElementById('echarts5');
            var myChart = echarts.init(chartDom);
            var option;
            let that = this
            layui.config({
                base: "/webconfig/layuiJs/"
            }).use(['jquery', 'form', 'laydate', 'utils', 'basic', 'layui_list'], function() {
                AjaxGet(
                    that.url + "/admin/bigdata/getalertandwarninginfo", {
                        EquipmentID: window.guid
                    },
                    function(res) {
                        // console.log(res, 132)
                        var data1 = res
                        let tixindata
                            //let tixindata = [
                            //    {value: 104,name: '晨检异常',},
                            //    {value: 431,name: '通知消息',},
                            //    {value: 64, name: '亲子任务',},
                            //    {value: 276,name: '班级动态',},
                            //    {value: 76,name: '园长信箱',},
                            //]
                        if (data1.data) {
                            tixindata = [
                                { value: data1.data.Abnormality ? data1.data.Abnormality : 0, name: '晨检异常' },
                                { value: data1.data.ClassDynamic ? data1.data.ClassDynamic : 0, name: '班级动态' },
                                { value: data1.data.GardenerMailbox ? data1.data.GardenerMailbox : 0, name: '园长信箱' },
                                { value: data1.data.PaternityTask ? data1.data.PaternityTask : 0, name: '亲子任务' },
                                { value: data1.data.Notice ? data1.data.Notice : 0, name: '通知消息' },
                            ]

                        }
                        option = {
                            tooltip: {
                                trigger: 'item',
                                formatter: function(params) {
                                    return params.data.name.split(" ")[0] + "：" + params.percent + "%";
                                },
                            },
                            series: [{
                                type: 'pie',
                                radius: '42%',
                                center: ['50%', '50%'],
                                selectedMode: 'single',
                                data: tixindata,
                                minAngle: 10,
                                itemStyle: {
                                    normal: {
                                        color: function(params) {
                                            var colorList = ["#59adff", "#258aed", "#006fdd", "#74f3fd", "#1368bd", "#267afe", "#0067cd"]
                                            return colorList[params.dataIndex % colorList.length];
                                        },
                                        labelLine: {
                                            length: 20,
                                            length1: 10
                                        },
                                        label: {
                                            formatter: function(val) {
                                                var str = val.name + "-" + val.value + "次"
                                                str = str.split("-").join("\n")
                                                return str
                                            },
                                            rich: {
                                                value: {
                                                    width: 14,
                                                    align: 'left'
                                                }
                                            },
                                            textStyle: { color: '#00affd', fontSize: "14" },

                                        },
                                    },
                                    emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)',
                                        textColor: '#000'
                                    }
                                },
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }]
                        };

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