zhangkun
/
ditie2.0_web


			
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753
							<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>数据</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link rel="stylesheet" href="~/Content/css/screendisplay/swiper.min.css">
    <link href="~/Content/css/screendisplay/style.css" rel="stylesheet" />

    <!-- Link Swiper's CSS -->

    <style>
        .swiper-container {
            padding-bottom: 5%;
            opacity: 0;
            transform: scale(0.5);
            -ms-transform: scale(0.5); /* IE 9 */
            -webkit-transform: scale(0.5); /* Safari 和 Chrome */
            -o-transform: scale(0.5); /* Opera */
            -moz-transform: scale(0.5);
        }

        .active .swiper-container {
            opacity: 1;
            transform: scale(1);
            -ms-transform: scale(1); /* IE 9 */
            -webkit-transform: scale(1); /* Safari 和 Chrome */
            -o-transform: scale(1); /* Opera */
            -moz-transform: scale(1);
            transition: all 0.8s;
            -moz-transition: all 0.8s; /* Firefox 4 */
            -webkit-transition: all 0.8s; /* Safari 和 Chrome */
            -o-transition: all 0.8s;
        }

        .swiper-slide {
            background-position: center;
            background-size: cover;
            width: 46%;
            height: 20.4vw;
            opacity: 0.5;
        }

        .swiper-slide-active {
            opacity: 1;
        }

        .swiper-slide img {
            display: block;
            width: 88%;
            margin: 0 auto;
            height: 15.5vw;
        }

        .swiper-pagination-bullet {
            width: 2vw;
            height: 2vw;
            text-align: center;
            line-height: 2vw;
            font-size: 18px;
            color: #519fed;
            opacity: 1;
            border: 1px solid #519fed;
            background: rgba(255, 255, 255, 0.01);
        }

        .swiper-pagination-bullet-active {
            width: 2.4vw;
            height: 2.4vw;
            line-height: 2.4vw;
            color: #4bb7e9;
            border: 2px solid #4bb7e9;
            background: rgba(255, 255, 255, 0.01);
        }

        .swiper-slide {
            background: url("/Content/images/screendisplay/slider_bg.png") no-repeat;
            background-size: 100% 100%;
        }
    </style>
    <script src="/Content/js/jquery-1.8.3.min.js"></script>
    <script src="/Content/dist/echarts.js" type="text/javascript"></script>
    <script src="/Content/dist/theme/dahua.js" type="text/javascript"></script>
    <script src="/Content/js/Report/moment.js"></script>
    <script src="/Content/js/Report/GetDate.js"></script>
    <script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: '/Content/dist'
            }
        });
        //获取坐席话务量报表
        function InitUserCallMonth(thisYear, thisMonth, ThisDateDept) {
            var thisTittle = thisYear + '年' + thisMonth + '月坐席话务量报表';
            $(".zxhwl").html(thisTittle);
            var bottom, dataModel;
            $.ajax({
                url: "/Report/CallTimeMathChartData",
                type: "get",
                contentType: "application/json",
                dataType: "text",
                cache: false,
                data: {
                    NowDateTime: new Date(), dateParty: ThisDateDept
                },
                success: function (result, status) {
                    if (status) {
                        dataModel = JSON.parse(result);
                        bottom = dataModel.bottom;
                        // 使用
                        require(
                        [
                    'echarts',
                    'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
                      , 'echarts/chart/line' // 使用柱状图就加载bar模块，按需加载
                        ],
                        function (ec) {
                            var dahuatheme
                            require(['echarts/theme/dahua'], function (theme) {
                                dahuatheme = theme;
                            });
                            // 基于准备好的dom，初始化echarts图表
                            var myChart = ec.init(document.getElementById('callMonth'), dahuatheme);
                            option = {
                                title: {
                                    show: false,
                                    text: '',
                                    subtext: ''
                                },
                                tooltip: {
                                    trigger: 'axis'
                                },
                                legend: {
                                    textStyle: {
                                        color: '#fff'          // 图例文字颜色
                                    },
                                    data: ['总通话次数', '接听电话次数', '呼出电话次数', '通话总时长', '平均通话时长']
                                },
                                toolbox: {
                                    show: false,
                                    feature: {
                                        dataView: { show: true, readOnly: false },
                                        magicType: { show: true, type: ['line', 'bar'] },
                                        restore: { show: true },
                                        saveAsImage: { show: true }
                                    }
                                },
                                calculable: true,
                                xAxis: [
                                    {
                                        type: 'category',
                                        axisLabel: {
                                            interval: 0,
                                            textStyle: {
                                                color: '#fff'
                                            }
                                        },
                                        data: eval(bottom)
                                    }
                                ],
                                yAxis: [
                                    {
                                        type: 'value',
                                        axisLabel: {
                                            interval: 0,
                                            textStyle: {
                                                color: '#fff'
                                            }
                                        }
                                    }
                                ],
                                series: [
                                    {
                                        name: '总通话次数',
                                        type: 'line',
                                        data: eval(dataModel.d1),
                                       
                                        markPoint: {
                                            data: [
                                                { type: 'max', name: '最大值' },
                                                { type: 'min', name: '最小值' }
                                            ]
                                        }
                                    },
                                    {
                                        name: '接听电话次数',
                                        type: 'line',
                                        data: eval(dataModel.d2),
                                        markPoint: {
                                            data: [
                                                { type: 'max', name: '最大值' },
                                                { type: 'min', name: '最小值' }
                                            ]
                                        }

                                    },
                                    {
                                        name: '呼出电话次数',
                                        type: 'line',
                                        data: eval(dataModel.d3),
                                        markPoint: {
                                            data: [
                                                { type: 'max', name: '最大值' },
                                                { type: 'min', name: '最小值' }
                                            ]
                                        }
                                    },
                                    {
                                        name: '通话总时长',
                                        type: 'line',
                                        data: eval(dataModel.d4),
                                        markPoint: {
                                            data: [
                                                { type: 'max', name: '最大值' },
                                                { type: 'min', name: '最小值' }
                                            ]
                                        }
                                    },
                                    {
                                        name: '平均通话时长',
                                        type: 'line',
                                        data: eval(dataModel.d5),
                                        markPoint: {
                                            data: [
                                                { type: 'max', name: '最大值' },
                                                { type: 'min', name: '最小值' }
                                            ]
                                        }
                                    }


                                ]
                            };
                            // 为echarts对象加载数据
                            myChart.setOption(option);
                        }
                    );
                    }


                }
            });


        }


        //获取坐席业务量报表
        function InitUserBussMonth(thisYear, thisMonth, ThisDateDept) {
            var thisTittle = thisYear + '年' + thisMonth + '月坐席业务量报表';
            $(".zxywl").html(thisTittle);
            var bottom, d1, d2, d3, d4, d5;
            $.ajax({
                url: "/Report/WorkOrderTypeUserMathChartData",
                type: "get",
                contentType: "application/json",
                dataType: "text",
                cache: false,
                data: {
                    NowDateTime: new Date(), dateParty: ThisDateDept
                },
                success: function (result, status) {
                    if (status) {
                        var dataModel = JSON.parse(result);

                        bottom = dataModel.bottom;
                        d1 = dataModel.d1;
                        d2 = dataModel.d2;
                        d3 = dataModel.d3;
                        d4 = dataModel.d4;
                        d5 = dataModel.d5;


                        // 使用
                        require(
                        [
                    'echarts',
                    'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
                      , 'echarts/chart/line' // 使用柱状图就加载bar模块，按需加载
                        ],
                        function (ec) {
                            var dahuatheme
                            require(['echarts/theme/dahua'], function (theme) {
                                dahuatheme = theme;
                            });
                            // 基于准备好的dom，初始化echarts图表
                            var myChart = ec.init(document.getElementById('bussMonth'), dahuatheme);
                            option = {
                                title: {
                                    show: false,
                                    text: '',
                                    subtext: ''

                                },
                                tooltip: {
                                    trigger: 'axis'
                                },
                                legend: {
                                    textStyle: {
                                        color: '#fff'          // 图例文字颜色
                                    },
                                    data: ['业务数量', '语音业务数量', '在线业务数量', '微信业务数量', '微博业务数量']
                                },
                                toolbox: {
                                    show: false,
                                    feature: {
                                        dataView: { show: true, readOnly: false },
                                        magicType: { show: true, type: ['line', 'bar'] },
                                        restore: { show: true },
                                        saveAsImage: { show: true }
                                    }
                                },
                                calculable: true,
                                xAxis: [
                                    {
                                        type: 'category',
                                        axisLabel: {
                                            interval: 0,
                                            textStyle: {
                                                color: '#fff'
                                            }
                                        },
                                        data: eval(bottom)
                                    }
                                ],
                                yAxis: [
                                    {
                                        type: 'value',
                                        axisLabel: {
                                            interval: 0,
                                            textStyle: {
                                                color: '#fff'
                                            }
                                        }
                                    }
                                ],
                                series: [
                                    {
                                        name: '业务数量',
                                        type: 'line',
                                        data: eval(d1),
                                        markPoint: {
                                            data: [
                                                { type: 'max', name: '最大值' },
                                                { type: 'min', name: '最小值' }
                                            ]
                                        }
                                        //,
                                        //markLine: {
                                        //    data: [
                                        //        { type: 'average', name: '平均值' }
                                        //    ]
                                        //}
                                    },
                                    {
                                        name: '语音业务数量',
                                        type: 'line',
                                        data: eval(d2),
                                        markPoint: {
                                            data: [
                                                { type: 'max', name: '最大值' },
                                                { type: 'min', name: '最小值' }
                                            ]
                                        }
                                        //,
                                        //markLine: {
                                        //    data: [
                                        //        { type: 'average', name: '平均值' }
                                        //    ]
                                        //}
                                    },
                                    {
                                        name: '在线业务数量',
                                        type: 'line',
                                        data: eval(d3),
                                        markPoint: {
                                            data: [
                                                { type: 'max', name: '最大值' },
                                                { type: 'min', name: '最小值' }
                                            ]
                                        }
                                        //,
                                        //markLine: {
                                        //    data: [
                                        //        { type: 'average', name: '平均值' }
                                        //    ]
                                        //}
                                    },
                                    {
                                        name: '微信业务数量',
                                        type: 'line',
                                        data: eval(d4),
                                        markPoint: {
                                            data: [
                                                { type: 'max', name: '最大值' },
                                                { type: 'min', name: '最小值' }
                                            ]
                                        }
                                        //,
                                        //markLine: {
                                        //    data: [
                                        //        { type: 'average', name: '平均值' }
                                        //    ]
                                        //}
                                    },
                                    {
                                        name: '微博业务数量',
                                        type: 'line',
                                        data: eval(d5),
                                        markPoint: {
                                            data: [
                                                { type: 'max', name: '最大值' },
                                                { type: 'min', name: '最小值' }
                                            ]
                                        }
                                        //,
                                        //markLine: {
                                        //    data: [
                                        //        { type: 'average', name: '平均值' }
                                        //    ]
                                        //}
                                    }
                                ]
                            };
                            // 为echarts对象加载数据
                            myChart.setOption(option);
                        }
                    );
                    }


                }
            });


        }

        //获取坐席处理量报表
        function InitUserWorkMonth(thisYear, thisMonth, ThisDateDept) {
            var thisTittle = thisYear + '年' + thisMonth + '月坐席处理量报表';
            $(".zxcll").html(thisTittle);
            var bottom, dataModel;
            $.ajax({
                url: "/Report/WorkOrderTrainFunctionMathChartData",
                type: "get",
                contentType: "application/json",
                dataType: "text",
                cache: false,
                data: {
                    NowDateTime: new Date(), dateParty: ThisDateDept
                },
                success: function (result, status) {
                    if (status) {
                        dataModel = JSON.parse(result);
                        bottom = dataModel.bottom;
                        // 使用
                        require(
                        [
                    'echarts',
                    'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
                      , 'echarts/chart/line' // 使用柱状图就加载bar模块，按需加载
                        ],
                        function (ec) {
                            var dahuatheme
                            require(['echarts/theme/dahua'], function (theme) {
                                dahuatheme = theme;
                            });
                            // 基于准备好的dom，初始化echarts图表
                            var myChart = ec.init(document.getElementById('workMonth'), dahuatheme);
                            option = {
                                title: {
                                    show: false,
                                    text: '',
                                    subtext: ''
                                },
                                tooltip: {
                                    trigger: 'axis'
                                },
                                legend: {
                                    textStyle: {
                                        color: '#fff'          // 图例文字颜色
                                    },
                                    data: ['业务数量', '语音业务数量', '在线业务数量', '微信业务数量', '微博业务数量']
                                },
                                toolbox: {
                                    show: false,
                                    feature: {
                                        dataView: { show: true, readOnly: false },
                                        magicType: { show: true, type: ['line', 'bar'] },
                                        restore: { show: true },
                                        saveAsImage: { show: true }
                                    }
                                },
                                calculable: true,
                                xAxis: [
                                    {
                                        type: 'category',
                                        axisLabel: {
                                            interval: 0,
                                            textStyle: {
                                                color: '#fff'
                                            }
                                        },
                                        data: eval(bottom)
                                    }
                                ],
                                yAxis: [
                                    {
                                        type: 'value',
                                        axisLabel: {
                                            interval: 0,
                                            textStyle: {
                                                color: '#fff'
                                            }
                                        }
                                    }
                                ],
                                series: [
                                    {
                                        name: '业务数量',
                                        type: 'line',
                                        data: eval(dataModel.d1),
                                        markPoint: {
                                            data: [
                                                { type: 'max', name: '最大值' },
                                                { type: 'min', name: '最小值' }
                                            ]
                                        }
                                    },
                                    {
                                        name: '咨询',
                                        type: 'line',
                                        data: eval(dataModel.d2),
                                        markPoint: {
                                            data: [
                                                { type: 'max', name: '最大值' },
                                                { type: 'min', name: '最小值' }
                                            ]
                                        }
                                    },
                                    {
                                        name: '建议',
                                        type: 'line',
                                        data: eval(dataModel.d3),
                                        markPoint: {
                                            data: [
                                                { type: 'max', name: '最大值' },
                                                { type: 'min', name: '最小值' }
                                            ]
                                        }
                                    },
                                    {
                                        name: '表扬',
                                        type: 'line',
                                        data: eval(dataModel.d4),
                                        markPoint: {
                                            data: [
                                                { type: 'max', name: '最大值' },
                                                { type: 'min', name: '最小值' }
                                            ]
                                        }
                                    },
                                    {
                                        name: '挂失',
                                        type: 'line',
                                        data: eval(dataModel.d5),
                                        markPoint: {
                                            data: [
                                                { type: 'max', name: '最大值' },
                                                { type: 'min', name: '最小值' }
                                            ]
                                        }
                                    }
                                    ,
                                    {
                                        name: '投诉',
                                        type: 'line',
                                        data: eval(dataModel.d6),
                                        markPoint: {
                                            data: [
                                                { type: 'max', name: '最大值' },
                                                { type: 'min', name: '最小值' }
                                            ]
                                        }
                                    }
                                    ,
                                    {
                                        name: '转办投诉',
                                        type: 'line',
                                        data: eval(dataModel.d7),
                                        markPoint: {
                                            data: [
                                                { type: 'max', name: '最大值' },
                                                { type: 'min', name: '最小值' }
                                            ]
                                        }
                                    }
                                    ,
                                    {
                                        name: '现场处理投诉',
                                        type: 'line',
                                        data: eval(dataModel.d8),
                                        markPoint: {
                                            data: [
                                                { type: 'max', name: '最大值' },
                                                { type: 'min', name: '最小值' }
                                            ]
                                        }
                                    }
                                    ,
                                    {
                                        name: '客服处理投诉',
                                        type: 'line',
                                        data: eval(dataModel.d9),
                                        markPoint: {
                                            data: [
                                                { type: 'max', name: '最大值' },
                                                { type: 'min', name: '最小值' }
                                            ]
                                        }
                                    }
                                ]
                            };
                            // 为echarts对象加载数据
                            myChart.setOption(option);
                        }
                    );
                    }


                }
            });


        }

        //来电时间分布
        function InitCallInMonth(divId, ThisDateDept) {

            var format, bottom, datas;
            $.ajax({
                url: "/Report/CallInMatchChartData",
                type: "get",
                contentType: "application/json",
                dataType: "text",
                cache: false,
                data: {
                    NowDateTime: new Date(), dateParty: ThisDateDept
                },
                success: function (result, status) {
                    if (status) {
                        var dataModel = JSON.parse(result);
                        format = dataModel.format;
                        bottom = JSON.parse(dataModel.bottom);
                        datas = JSON.parse(dataModel.datas);


                        // 使用
                        require(
                        [
                                'echarts',
                                'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载
                                'echarts/chart/line'
                        ],
                        function (ec) {
                            var dahuatheme
                            require(['echarts/theme/dahua'], function (theme) {
                                dahuatheme = theme;
                            });
                            // 基于准备好的dom，初始化echarts图表
                            var myChart = ec.init(document.getElementById(divId), dahuatheme);
                            option = {
                                title: {
                                    show: false,
                                    text: '',
                                    subtext: ''
                                },
                                tooltip: {
                                    trigger: 'axis'
                                },
                                legend: {
                                    textStyle: {
                                        color: '#fff'          // 图例文字颜色
                                    },
                                    data: ["数量"]
                                },
                                toolbox: {
                                    show: false,
                                    feature: {
                                        dataView: { show: true, readOnly: false },
                                        magicType: { show: true, type: ['line', 'bar'] },
                                        restore: { show: true },
                                        saveAsImage: { show: true }
                                    }
                                },
                                calculable: true,
                                xAxis: [
                                    {
                                        type: 'category',
                                        axisLabel: {
                                            interval: 0,
                                            textStyle: {
                                                color: '#fff'
                                            }
                                        },
                                        data: bottom
                                    }
                                ],
                                yAxis: [
                                    {
                                        type: 'value',

                                        axisLabel: {
                                            interval: 0,
                                            formatter: '{value} 个',
                                            textStyle: {
                                                color: '#fff'
                                            }
                                        }
                                    }
                                ],
                                series: [
                        {
                            name: '数量',
                            type: 'line',
                            data: datas,
                            markPoint: {
                                data: [
                                    { type: 'max', name: '最大值' },
                                    { type: 'min', name: '最小值' }
                                ]
                            }

                        }
                                ]
                            };
                            // 为echarts对象加载数据
                            myChart.setOption(option);
                        }
                    );
                    }


                }
            });


        }

        //业务种类
        function InitBussTypeMath(ThisDateDept) {

            var format, bottom, datas;
            $.ajax({
                url: "/Report/WorkOrderTypeMathChartData",
                type: "get",
                contentType: "application/json",
                dataType: "text",
                cache: false,
                data: {
                    NowDateTime: new Date(), dateParty: ThisDateDept
                },
                success: function (result, status) {
                    if (status) {
                        var dataModel = JSON.parse(result);
                        format = dataModel.format;
                        bottom = JSON.parse(dataModel.bottom);
                        datas = dataModel.datas;

                        var dataContent = "";
                        if (datas != null && eval(datas).length > 0) {
                            for (var i = eval(datas).length-1; i >=0 ; i--) {
                                dataContent += eval(datas)[i]["name"] + '：<span id="problem_id00">' + eval(datas)[i]["value"] + '</span> <br>';
                            }
                        }
                        $(".dataContent").html(dataContent);


                        // 使用
                        require(
                        [
                    'echarts',
                    'echarts/chart/pie' // 使用柱状图就加载bar模块，按需加载

                        ],
                        function (ec) {
                            var dahuatheme
                            require(['echarts/theme/dahua'], function (theme) {
                                dahuatheme = theme;
                            });
                            // 基于准备好的dom，初始化echarts图表
                            var myChart = ec.init(document.getElementById('bussTypeMatch'), dahuatheme);
                            option = {
                                title: {
                                    show: false,
                                    text: '',
                                    subtext: '',
                                    x: 'center'
                                },
                                tooltip: {
                                    trigger: 'item',
                                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                                },
                                toolbox: {
                                    show: false,
                                    feature: {
                                        dataView: {
                                            show: true,
                                            title: '数据视图',
                                            readOnly: true,
                                            lang: ['数据视图', '关闭', '刷新']
                                        },
                                        saveAsImage: {
                                            show: true,
                                            title: '保存为图片',
                                            type: 'png',
                                            lang: ['点击保存']
                                        }
                                    }
                                },
                                legend: {
                                    textStyle: {
                                        color: '#fff'          // 图例文字颜色
                                    },
                                    show: true,
                                    orient: 'horizontal',
                                    bottom: 20,
                                    data: bottom
                                },
                                series: [
                        {
                            name: '工单类型',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '55%'],
                            data: eval(datas)
                                ,
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                                ]
                            };
                            // 为echarts对象加载数据
                            myChart.setOption(option);
                        }
                    );
                    }


                }
            });


        }

        //业务渠道
        function InitBussFormMath(ThisDateDept) {

            var format, bottom, datas;
            $.ajax({
                url: "/Report/WorkOrderFromChartData",
                type: "get",
                contentType: "application/json",
                dataType: "text",
                cache: false,
                data: {
                    NowDateTime: new Date(), dateParty: ThisDateDept
                },
                success: function (result, status) {
                    if (status) {
                        var dataModel = JSON.parse(result);
                        format = dataModel.format;
                        bottom = JSON.parse(dataModel.bottom);
                        datas = dataModel.datas;


                        var dataContent = "";
                        if (datas != null && eval(datas).length > 0) {
                            for (var i = 0; i < eval(datas).length ; i++) {
                                dataContent += eval(datas)[i]["name"] + '：<span id="problem_id00">' + eval(datas)[i]["value"] + '</span> <br>';
                            }
                        }
                        $(".formContent").html(dataContent);

                        // 使用
                        require(
                        [
                    'echarts',
                    'echarts/chart/pie' // 使用柱状图就加载bar模块，按需加载

                        ],
                        function (ec) {
                            var dahuatheme
                            require(['echarts/theme/dahua'], function (theme) {
                                dahuatheme = theme;
                            });
                            // 基于准备好的dom，初始化echarts图表
                            var myChart = ec.init(document.getElementById('bussFormMatch'), dahuatheme);
                            option = {
                                title: {
                                    show: false,
                                    text: '',
                                    subtext: '',
                                    x: 'center'
                                },
                                tooltip: {
                                    trigger: 'item',
                                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                                },
                                toolbox: {
                                    show: false,
                                    feature: {
                                        dataView: {
                                            show: true,
                                            title: '数据视图',
                                            readOnly: true,
                                            lang: ['数据视图', '关闭', '刷新']
                                        },
                                        saveAsImage: {
                                            show: true,
                                            title: '保存为图片',
                                            type: 'png',
                                            lang: ['点击保存']
                                        }
                                    }
                                },
                                legend: {
                                    textStyle: {
                                        color: '#fff'          // 图例文字颜色
                                    },
                                    show: true,
                                    orient: 'horizontal',
                                    bottom: 20,
                                    data: bottom
                                },
                                series: [
                        {
                            name: '渠道',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '55%'],
                            data: eval(datas)
                                ,
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                                ]
                            };
                            // 为echarts对象加载数据
                            myChart.setOption(option);
                        }
                    );
                    }


                }
            });


        }

        //初始化业务报表
        function InitDate() {
            //当前月份的起始日期
            var thisMonthDept = getMonthStartDate() + '-' + getMonthEndDate();

            //获取坐席话务量报表
            InitUserCallMonth(nowYear, nowMonth + 1, thisMonthDept);
            //获取坐席业务量报表
            InitUserBussMonth(nowYear, nowMonth + 1, thisMonthDept);
            //获取坐席处理量报表
            InitUserWorkMonth(nowYear, nowMonth + 1, thisMonthDept);

            //年来电高峰趋势图
            InitCallInMonth("year", nowYear + "-01-01-" + getMonthEndDate());
            //月来电高峰趋势图
            InitCallInMonth("month", thisMonthDept);
            //周来电高峰趋势图
            InitCallInMonth("week", getWeekStartDate() + "-" + getWeekEndDate());
            //日来电高峰趋势图
            var thisDay = formatDate(new Date(nowYear, nowMonth, nowDay)) + "-" + formatDate(new Date(nowYear, nowMonth, nowDay));
            InitCallInMonth("day", thisDay);

            //业务种类
            InitBussTypeMath(thisDay);

            //业务渠道
            InitBussFormMath(thisDay);
            //开启计时器
             setTimeout("InitDate()", 5000)
        }
        InitDate();
    </script>
</head>

<body>
    <!--    <div class="bg"><img src="/Content/images/screendisplay/bg.jpg"></div> -->
    <!--  <canvas id="canvas" style="position: absolute; top: 0; width: 100%"></canvas> -->
    <div class="bg01"> </div>

    <div class="main" id="pt_top" style="padding: 0">
        <img src="/Content/images/screendisplay/logo.png" class="logo">

        <div class="date_div">
            <div class="date" id="date"><label></label><time></time></div>
        </div>
        <div class="tit">
            <div class="tit_div">
                <h1>网络化信息服务平台</h1>
                <h2>Network  information service platform</h2>
            </div>

        </div>

        <div class="left01">

            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">

                        <div class="sj_tit zxhwl"></div>
                        <div id="callMonth" style="border:0px;width:100%;height:80%;"></div>
                    </div>
                    <div class="swiper-slide">

                        <div class="sj_tit zxywl"></div>
                        <div id="bussMonth" style="border:0px;width:100%;height:80%;"></div>
                    </div>
                    <div class="swiper-slide">
                        <div class="sj_tit zxcll"></div>
                        <div id="workMonth" style="border:0px;width:100%;height:80%;"></div>

                    </div>
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
            </div>
        </div>
        <div class="right01">

            <div class="right_cont01" style="width: 100% !important">
                <div class="right_cont01_left" style="width:100px!important;">
                    <h1>业务种类</h1>
                    <p class="dataContent">
                       
                    </p>
                </div>
                <div class="right_cont01_right" style="width:calc(100%-100px)!important;height:240px;">
                    <div id="bussTypeMatch" style="border:0px;width:100%;height:100%;"></div>
                </div>
            </div>
            <div class="right_cont02" style="width: 100% !important">
                >
                <div class="right_cont01_left" style="width:100px!important;">
                    <h1>业务种类</h1>
                    <p class="formContent">
                      
                    </p>
                </div>
                <div class="right_cont01_right" style="width:calc(100%-100px)!important;height:240px;">
                    <div id="bussFormMatch" style="border:0px;width:100%;height:100%;"></div>
                </div>
            </div>

        </div>


    </div>

    <div class="main">
        <div class="bt_left" id="bt_left">
            <div class="bt_tit">本年来电高峰时间分布</div>
            <div id="year" style="border:0px;width:100%;height:80%;"></div>
        </div>
        <div class="bt_mid" id="bt_mid">
            <a href="iframe.html" target="_blank">
                <div class="bt_tit">本月来电高峰时间分布</div>
                <div id="month" style="border:0px;width:100%;height:80%;"></div>
            </a>
        </div>
        <div class="bt_right">
            <div class="bt_tit">本周来电高峰时间分布</div>
            <div id="week" style="border:0px;width:100%;height:80%;"></div>
        </div>
        <div class="bt_right">
            <div class="bt_tit">今日来电高峰时间分布</div>
            <div id="day" style="border:0px;width:100%;height:80%;"></div>
        </div>


    </div>

    <!-- 在线人数 -->
    <div class="layer" id="layer_people" onclick="document.getElementById('layer_people').className='layer'">
        <div>
            <div class="layer-content">
                <!--         <i class="close-layer" onclick="document.getElementById('layer_people').className='layer'">x</i> -->
                <div class="bt_tit01">在线人数</div>
                <div class="layer_people">

                    <div class="sj">
                        <img src="/Content/images/screendisplay/bt01_blue.png" class="blue">
                        <img src="/Content/images/screendisplay/bt01_red.png" class="red">
                    </div>
                </div>

            </div>
        </div>
    </div>

    <!-- 业务指标 -->
    <!-- <div class="layer" id="layer_ywzb" onclick="document.getElementById('layer_ywzb').className='layer'">
        <div>
            <div class="layer-content" style="width:70%;">
                <i class="close-layer" onclick="document.getElementById('layer_ywzb').className='layer'">x</i>
                <div class="bt_tit01">业务指标</div>
                <div class="layer_ywzb">
                    <img src="/Content/images/screendisplay/bt02_img.jpg" style="width: 90%">
                </div>
            </div>
        </div>
    </div> -->
    <canvas id="canv" width="845" height="917" style="position: fixed; width: 100%; height: 100%; top: 0; z-index: -1"></canvas>

    <!-- 加载动画  -->
    <div class="loaders" id="loader">
        <div class="loader">
            <div class="loader-inner ball-spin-fade-loader">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
    </div>
    <!-- 加载动画 结束 -->


    <script src="/Content/js/screendisplay/zepto.min.js"></script>
    <!--         <script type="text/javascript" src="js/canvas.js"></script> -->
    <script src="/Content/js/screendisplay/swiper.min.js"></script>
    <!-- Initialize Swiper -->
    <script>
        window.onload = function (event) {
            $(".main").addClass("active")
            $("#loader").hide();


        }
        //var h=$(window).height()

        window.onresize = function () {
            var h = $(window).height()
            if (h > 920) {
                $("#pt_top").css({ "padding": "2.5vw 0 2vw 0" })
                $(".tit").css({ "padding": "1.5vw 0 2vw 0" })
                $(".logo").css({ "top": "4vw" })
                console.log($(window).height())
            } else {
                $("#pt_top").css({ "padding": "0%" })
                $(".tit").css({ "padding": "1.5vw 0 0vw 0" })
                $(".logo").css({ "top": "1.4vw" })
            }

        }


        //判断浏览器是否全屏


        $(document).on('keydown', function (e) {
            var e = event || window.event || arguments.callee.caller.arguments[0];
            if (e && e.keyCode == 122) {//捕捉F11键盘动作
                e.preventDefault();  //阻止F11默认动作
                var el = document.documentElement;
                var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen;//定义不同浏览器的全屏API　　　　　　//执行全屏
                if (typeof rfs != "undefined" && rfs) {
                    rfs.call(el);
                } else if (typeof window.ActiveXObject != "undefined") {
                    var wscript = new ActiveXObject("WScript.Shell");
                    if (wscript != null) {
                        wscript.SendKeys("{F11}");
                    }
                }　　　　　　//监听不同浏览器的全屏事件，并件执行相应的代码
                document.addEventListener("webkitfullscreenchange", function () {//
                    if (document.webkitIsFullScreen) {
                        //全屏后要执行的代码
                        $("#pt_top").css({ "padding": "2.5vw 0 2vw 0" })
                        $(".tit").css({ "padding": "1.5vw 0 2vw 0" })
                        $(".logo").css({ "top": "4vw" })
                    } else {
                        //退出全屏后要执行的代码
                        $("#pt_top").css({ "padding": "0%" })
                        $(".tit").css({ "padding": "1.5vw 0 0vw 0" })
                        $(".logo").css({ "top": "1.4vw" })
                    }
                }, false);

                document.addEventListener("fullscreenchange", function () {
                    if (document.fullscreen) {
                        //全屏后执行的代码
                        $("#pt_top").css({ "padding": "2.5vw 0 2vw 0" })
                        $(".tit").css({ "padding": "1.5vw 0 2vw 0" })
                        $(".logo").css({ "top": "4vw" })
                    } else {
                        //退出全屏后要执行的代码
                        $("#pt_top").css({ "padding": "0%" })
                        $(".tit").css({ "padding": "1.5vw 0 0vw 0" })
                        $(".logo").css({ "top": "1.4vw" })
                    }
                }, false);

                document.addEventListener("mozfullscreenchange", function () {
                    if (document.mozFullScreen) {
                        //全屏后要执行的代码
                        $("#pt_top").css({ "padding": "2.5vw 0 2vw 0" })
                        $(".tit").css({ "padding": "1.5vw 0 2vw 0" })
                        $(".logo").css({ "top": "4vw" })
                    } else {
                        //退出全屏后要执行的代码
                        $("#pt_top").css({ "padding": "0%" })
                        $(".tit").css({ "padding": "1.5vw 0 0vw 0" })
                        $(".logo").css({ "top": "1.4vw" })
                    }
                }, false);

                document.addEventListener("msfullscreenchange", function () {
                    if (document.msFullscreenElement) {
                        //全屏后要执行的代码
                        $("#pt_top").css({ "padding": "2.5vw 0 2vw 0" })
                        $(".tit").css({ "padding": "1.5vw 0 2vw 0" })
                        $(".logo").css({ "top": "4vw" })
                    } else {
                        //退出全屏后要执行的代码
                        $("#pt_top").css({ "padding": "0%" })
                        $(".tit").css({ "padding": "1.5vw 0 0vw 0" })
                        $(".logo").css({ "top": "1.4vw" })
                    }
                }, false)
            }
        })


        // 判断各种浏览器，找到正确的方法


        // document.addEventListener('fullscreenchange', function(){ alert("全屏") });

        // document.addEventListener('webkitfullscreenchange', function(){ alert("全屏") });

        // document.addEventListener('mozfullscreenchange', function(){alert("全屏") });

        // document.addEventListener('MSFullscreenChange', function(){ alert("全屏") });


        // W3C Method:
        // 找到适合浏览器的全屏方法


        // 启动全屏!
        //launchFullScreen(document.documentElement); // 整个网页


        var swiper = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            paginationClickable: true,
            autoplay: 3000,
            initialSlide: 1,
            paginationBulletRender: function (index, className) {
                return '<span class="' + className + '">' + (index + 1) + '</span>';
            },
            effect: 'coverflow',
            grabCursor: true,
            centeredSlides: true,
            slidesPerView: 'auto',
            coverflow: {
                rotate: -20,
                stretch: 0,
                depth: 200,
                modifier: 1.5,
                slideShadows: true
            }
        });
        //$("#bt_left").click(function () {
        //    $("#layer_people").addClass("active")
        //})

        // $("#bt_mid").click(function() {
        //     // $("#layer_ywzb").addClass("active")
        //    // window.location="iframe.html"
        //     window.open ("iframe.html")
        // })

        // 日期
        var d = new Date()
        var day = d.getDate()
        var month = d.getMonth() + 1
        var year = d.getFullYear()
        // year + "/" + month + "/" + day
        $("#date label").html(year + "/" + month + "/" + day)


        function checkTime(i) {
            if (i < 10) {
                i = "0" + i
            }
            return i
        }
        var h = checkTime(d.getHours())
        var m = checkTime(d.getMinutes())

        $("#date time").html(h + ":" + m)


        // 问题监控
        // var number=Math.floor(Math.random()*3)
        // console.log(number)

        function getRandomInt(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }

        console.log(getRandomInt(-2, 2))


        //setInterval(function () {
        //    var problem_id00 = parseInt($("#problem_id00").text());
        //    problem_id00 += getRandomInt(-1, 2);

        //    var problem_id01 = parseInt($("#problem_id01").text());
        //    problem_id01 += getRandomInt(-1, 2);

        //    var problem_id02 = parseInt($("#problem_id02").text());
        //    problem_id02 += getRandomInt(-1, 2);

        //    var problem_id03 = parseInt($("#problem_id03").text());
        //    problem_id03 += getRandomInt(-1, 2);

        //    var problem_id04 = parseInt($("#problem_id04").text());
        //    problem_id04 += getRandomInt(-1, 2);


        //    $("#problem_id00").text(problem_id00)
        //    $("#problem_id01").text(problem_id01)
        //    $("#problem_id02").text(problem_id02)
        //    $("#problem_id03").text(problem_id03)
        //    $("#problem_id04").text(problem_id04)


        //    var event_id00 = parseInt($("#event_id00").text());
        //    event_id00 += getRandomInt(0, 2);

        //    var event_id01 = parseInt($("#event_id01").text());
        //    event_id01 += getRandomInt(-1, 3);

        //    var event_id02 = parseInt($("#event_id02").text());
        //    event_id02 += getRandomInt(-1, 3);

        //    var event_id03 = parseInt($("#event_id03").text());
        //    event_id03 += getRandomInt(-1, 3);

        //    var event_id04 = parseInt($("#event_id04").text());
        //    event_id04 += getRandomInt(-1, 3);
        //    $("#event_id00").text(event_id00)
        //    $("#event_id01").text(event_id01)
        //    $("#event_id02").text(event_id02)
        //    $("#event_id03").text(event_id03)
        //    $("#event_id04").text(event_id04)
        //}, 3000)


    </script>


    <!-- 离子动画 -->
    <script>
        var num = 100;
        var w = window.innerWidth;
        var h = window.innerHeight;
        var max = 100;
        var _x = 0;
        var _y = 0;
        var _z = 150;
        var dtr = function (d) {
            return d * Math.PI / 180;
        };

        var rnd = function () {
            return Math.sin(Math.floor(Math.random() * 360) * Math.PI / 180);
        };
        var dist = function (p1, p2, p3) {
            return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2) + Math.pow(p2.z - p1.z, 2));
        };

        var cam = {
            obj: {
                x: _x,
                y: _y,
                z: _z
            },
            dest: {
                x: 0,
                y: 0,
                z: 1
            },
            dist: {
                x: 0,
                y: 0,
                z: 200
            },
            ang: {
                cplane: 0,
                splane: 0,
                ctheta: 0,
                stheta: 0
            },
            zoom: 1,
            disp: {
                x: w / 2,
                y: h / 2,
                z: 0
            },
            upd: function () {
                cam.dist.x = cam.dest.x - cam.obj.x;
                cam.dist.y = cam.dest.y - cam.obj.y;
                cam.dist.z = cam.dest.z - cam.obj.z;
                cam.ang.cplane = -cam.dist.z / Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.z * cam.dist.z);
                cam.ang.splane = cam.dist.x / Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.z * cam.dist.z);
                cam.ang.ctheta = Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.z * cam.dist.z) / Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.y * cam.dist.y + cam.dist.z * cam.dist.z);
                cam.ang.stheta = -cam.dist.y / Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.y * cam.dist.y + cam.dist.z * cam.dist.z);
            }
        };

        var trans = {
            parts: {
                sz: function (p, sz) {
                    return {
                        x: p.x * sz.x,
                        y: p.y * sz.y,
                        z: p.z * sz.z
                    };
                },
                rot: {
                    x: function (p, rot) {
                        return {
                            x: p.x,
                            y: p.y * Math.cos(dtr(rot.x)) - p.z * Math.sin(dtr(rot.x)),
                            z: p.y * Math.sin(dtr(rot.x)) + p.z * Math.cos(dtr(rot.x))
                        };
                    },
                    y: function (p, rot) {
                        return {
                            x: p.x * Math.cos(dtr(rot.y)) + p.z * Math.sin(dtr(rot.y)),
                            y: p.y,
                            z: -p.x * Math.sin(dtr(rot.y)) + p.z * Math.cos(dtr(rot.y))
                        };
                    },
                    z: function (p, rot) {
                        return {
                            x: p.x * Math.cos(dtr(rot.z)) - p.y * Math.sin(dtr(rot.z)),
                            y: p.x * Math.sin(dtr(rot.z)) + p.y * Math.cos(dtr(rot.z)),
                            z: p.z
                        };
                    }
                },
                pos: function (p, pos) {
                    return {
                        x: p.x + pos.x,
                        y: p.y + pos.y,
                        z: p.z + pos.z
                    };
                }
            },
            pov: {
                plane: function (p) {
                    return {
                        x: p.x * cam.ang.cplane + p.z * cam.ang.splane,
                        y: p.y,
                        z: p.x * -cam.ang.splane + p.z * cam.ang.cplane
                    };
                },
                theta: function (p) {
                    return {
                        x: p.x,
                        y: p.y * cam.ang.ctheta - p.z * cam.ang.stheta,
                        z: p.y * cam.ang.stheta + p.z * cam.ang.ctheta
                    };
                },
                set: function (p) {
                    return {
                        x: p.x - cam.obj.x,
                        y: p.y - cam.obj.y,
                        z: p.z - cam.obj.z
                    };
                }
            },
            persp: function (p) {
                return {
                    x: p.x * cam.dist.z / p.z * cam.zoom,
                    y: p.y * cam.dist.z / p.z * cam.zoom,
                    z: p.z * cam.zoom,
                    p: cam.dist.z / p.z
                };
            },
            disp: function (p, disp) {
                return {
                    x: p.x + disp.x,
                    y: -p.y + disp.y,
                    z: p.z + disp.z,
                    p: p.p
                };
            },
            steps: function (_obj_, sz, rot, pos, disp) {
                var _args = trans.parts.sz(_obj_, sz);
                _args = trans.parts.rot.x(_args, rot);
                _args = trans.parts.rot.y(_args, rot);
                _args = trans.parts.rot.z(_args, rot);
                _args = trans.parts.pos(_args, pos);
                _args = trans.pov.plane(_args);
                _args = trans.pov.theta(_args);
                _args = trans.pov.set(_args);
                _args = trans.persp(_args);
                _args = trans.disp(_args, disp);
                return _args;
            }
        };

        (function () {
            "use strict";
            var threeD = function (param) {
                this.transIn = {};
                this.transOut = {};
                this.transIn.vtx = (param.vtx);
                this.transIn.sz = (param.sz);
                this.transIn.rot = (param.rot);
                this.transIn.pos = (param.pos);
            };

            threeD.prototype.vupd = function () {
                this.transOut = trans.steps(

                    this.transIn.vtx,
                    this.transIn.sz,
                    this.transIn.rot,
                    this.transIn.pos,
                    cam.disp
                );
            };

            var Build = function () {
                this.vel = 0.04;
                this.lim = 360;
                this.diff = 200;
                this.initPos = 100;
                this.toX = _x;
                this.toY = _y;
                this.go();
            };

            Build.prototype.go = function () {
                this.canvas = document.getElementById("canv");
                this.canvas.width = window.innerWidth;
                this.canvas.height = window.innerHeight;
                this.$ = canv.getContext("2d");
                this.$.globalCompositeOperation = 'source-over';
                this.varr = [];
                this.dist = [];
                this.calc = [];

                for (var i = 0, len = num; i < len; i++) {
                    this.add();
                }

                this.rotObj = {
                    x: 0,
                    y: 0,
                    z: 0
                };
                this.objSz = {
                    x: w / 5,
                    y: h / 5,
                    z: w / 5
                };
            };

            Build.prototype.add = function () {
                this.varr.push(new threeD({
                    vtx: {
                        x: rnd(),
                        y: rnd(),
                        z: rnd()
                    },
                    sz: {
                        x: 0,
                        y: 0,
                        z: 0
                    },
                    rot: {
                        x: 20,
                        y: -20,
                        z: 0
                    },
                    pos: {
                        x: this.diff * Math.sin(360 * Math.random() * Math.PI / 180),
                        y: this.diff * Math.sin(360 * Math.random() * Math.PI / 180),
                        z: this.diff * Math.sin(360 * Math.random() * Math.PI / 180)
                    }
                }));
                this.calc.push({
                    x: 360 * Math.random(),
                    y: 360 * Math.random(),
                    z: 360 * Math.random()
                });
            };

            Build.prototype.upd = function () {
                cam.obj.x += (this.toX - cam.obj.x) * 0.05;
                cam.obj.y += (this.toY - cam.obj.y) * 0.05;
            };

            Build.prototype.draw = function () {
                this.$.clearRect(0, 0, this.canvas.width, this.canvas.height);
                cam.upd();
                this.rotObj.x += 0.1;
                this.rotObj.y += 0.1;
                this.rotObj.z += 0.1;

                for (var i = 0; i < this.varr.length; i++) {
                    for (var val in this.calc[i]) {
                        if (this.calc[i].hasOwnProperty(val)) {
                            this.calc[i][val] += this.vel;
                            if (this.calc[i][val] > this.lim) this.calc[i][val] = 0;
                        }
                    }

                    this.varr[i].transIn.pos = {
                        x: this.diff * Math.cos(this.calc[i].x * Math.PI / 180),
                        y: this.diff * Math.sin(this.calc[i].y * Math.PI / 180),
                        z: this.diff * Math.sin(this.calc[i].z * Math.PI / 180)
                    };
                    this.varr[i].transIn.rot = this.rotObj;
                    this.varr[i].transIn.sz = this.objSz;
                    this.varr[i].vupd();
                    if (this.varr[i].transOut.p < 0) continue;
                    var g = this.$.createRadialGradient(this.varr[i].transOut.x, this.varr[i].transOut.y, this.varr[i].transOut.p, this.varr[i].transOut.x, this.varr[i].transOut.y, this.varr[i].transOut.p * 2);
                    this.$.globalCompositeOperation = 'lighter';
                    g.addColorStop(0, 'hsla(255, 255%, 255%, 1)');
                    g.addColorStop(.5, 'hsla(' + (i + 2) + ',85%, 40%,1)');
                    g.addColorStop(1, 'hsla(' + (i) + ',85%, 40%,.5)');
                    this.$.fillStyle = g;
                    this.$.beginPath();
                    this.$.arc(this.varr[i].transOut.x, this.varr[i].transOut.y, this.varr[i].transOut.p * 2, 0, Math.PI * 2, false);
                    this.$.fill();
                    this.$.closePath();
                }
            };
            Build.prototype.anim = function () {
                window.requestAnimationFrame = (function () {
                    return window.requestAnimationFrame ||
                        function (callback, element) {
                            window.setTimeout(callback, 1000 / 60);
                        };
                })();
                var anim = function () {
                    this.upd();
                    this.draw();
                    window.requestAnimationFrame(anim);
                }.bind(this);
                window.requestAnimationFrame(anim);
            };

            Build.prototype.run = function () {
                this.anim();

                window.addEventListener('mousemove', function (e) {
                    this.toX = (e.clientX - this.canvas.width / 2) * -0.8;
                    this.toY = (e.clientY - this.canvas.height / 2) * 0.8;
                }.bind(this));
                window.addEventListener('touchmove', function (e) {
                    e.preventDefault();
                    this.toX = (e.touches[0].clientX - this.canvas.width / 2) * -0.8;
                    this.toY = (e.touches[0].clientY - this.canvas.height / 2) * 0.8;
                }.bind(this));
                window.addEventListener('mousedown', function (e) {
                    for (var i = 0; i < 100; i++) {
                        this.add();
                    }
                }.bind(this));
                window.addEventListener('touchstart', function (e) {
                    e.preventDefault();
                    for (var i = 0; i < 100; i++) {
                        this.add();
                    }
                }.bind(this));
            };
            var app = new Build();
            app.run();
        })();
        window.addEventListener('resize', function () {
            document.getElementById('canv').width = w = window.innerWidth;
            document.getElementById('canv').height = h = window.innerHeight;
        }, false);
    </script>

</body>

</html>