yf_zd
/
yfwlwCut


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112
							{% load staticfiles %}
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <link rel="stylesheet" href="{% static 'bigData/css/reset.css'%}" media="all">
    <link rel="stylesheet" href="{% static 'font-awesome/4.5.0/css/font-awesome.css'%}" media="all">
    <title>大数据平台</title>
    <style>
        /* 天气 */

        big {
            display: inline-block;
        }

        big.jpg80 {
            background-image: url(static/bigData/imgs/weatherPic.png);
            height: 80px;
            width: 80px;
        }

        big.d0 {
            background-position: 0 0;
        }

        big.d1 {
            background-position: -80px 0;
        }

        big.d2 {
            background-position: -160px 0;
        }

        big.d3 {
            background-position: -240px 0;
        }

        big.d4 {
            background-position: -320px 0;
        }

        big.d5 {
            background-position: -400px 0;
        }

        big.d6 {
            background-position: -480px 0;
        }

        big.d7 {
            background-position: -560px 0;
        }

        big.d8 {
            background-position: -640px 0;
        }

        big.d9 {
            background-position: 0 -80px;
        }

        big.d00 {
            background-position: 0 0;
        }

        big.d01 {
            background-position: -80px 0;
        }

        big.d02 {
            background-position: -160px 0;
        }

        big.d03 {
            background-position: -240px 0;
        }

        big.d04 {
            background-position: -320px 0;
        }

        big.d05 {
            background-position: -400px 0;
        }

        big.d06 {
            background-position: -480px 0;
        }

        big.d07 {
            background-position: -560px 0;
        }

        big.d08 {
            background-position: -640px 0;
        }

        big.d09 {
            background-position: 0 -80px;
        }

        big.d10 {
            background-position: -80px -80px;
        }

        big.d11 {
            background-position: -160px -80px;
        }

        big.d12 {
            background-position: -240px -80px;
        }

        big.d13 {
            background-position: -320px -80px;
        }

        big.d14 {
            background-position: -400px -80px;
        }

        big.d15 {
            background-position: -480px -80px;
        }

        big.d16 {
            background-position: -560px -80px;
        }

        big.d17 {
            background-position: -640px -80px;
        }

        big.d18 {
            background-position: 0 -160px;
        }

        /* 清除浮动 */

        .clearfix:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .clearfix {
            display: block;
        }

        table {
            width: 100%;
        }

        .font12 {
            font-size: 1.2vh;
        }

        .font14 {
            font-size: 1.4vh;
            line-height: 18px;
        }

        .font16 {
            font-size: 1.6vh;
        }

        .font18 {
            font-size: 1.8vh;
        }

        .font20 {
            font-size: 2vh;
        }

        html,
        body,
        #map {
            width: 100%;
            height: 100%;
            background: #01052d;
        }

        /* 地图 */

        .amap-icon img {
            width: 25px;
            height: 34px;
        }

        .caption {
            color: #fff;
            position: absolute;
            top: 10px;
            left: 25vw;
            right: 25vw;
            z-index: 99;
            text-align: center;
            /* overflow: hidden; */
            background: url(static/bigData/imgs/bigDataBj.png) no-repeat center;
            background-size: 100% 100%;
        }

        .caption:before {
            position: absolute;
            content: '';
            left: 0%;
            top: -20px;
            width: 170px;
            height: 50px;
            /* transform: scale(.5); */
            background: url(static/bigData/imgs/highlight.png) no-repeat center;
            background-size: 100%;
            animation: mymoveTop 10s 1s infinite alternate;
        }

        .caption:after {
            position: absolute;
            content: '';
            right: 2%;
            bottom: -25px;
            width: 170px;
            height: 50px;
            transform: scale(.5);
            background: url(static/bigData/imgs/highlight.png) no-repeat center;
            background-size: 100%;
            animation: mymoveBottom 10s 1s infinite alternate;
        }

        #box-title {
            line-height: 88px;
            font-size: 3vh;
        }

        @keyframes mymoveTop {
            0% {
                left: 0%;
                transform: scale(1.2)
            }
            100% {
                transform: scale(.5);
                left: 88%;
            }
        }

        @keyframes mymoveBottom {
            from {
                left: 80%;
                transform: scale(.5);
            }
            to {
                left: 5%;
                transform: scale(1.2);
            }
        }

        /* 内容展示框 */

        .boxPlace {
            position: absolute;
            color: White;
            z-index: 99;
            width: 24vw;
            background: rgba(7, 17, 27, 0.7)
        }

        .box .rightAnimate {
            top: 30%;
            transform: rotate(90deg);
            right: -48px;
            position: absolute;
            /* animation: mymoveBoxTop 5s 3s infinite alternate; */
        }

        .box.boxPlaceLeft:after {
            position: absolute;
            top: 12%;
            right: -22px;
            content: '';
            width: 42px;
            height: 45px;
            /* transform: scale(1.2); */
            background: url(static/bigData/imgs/highlight222.png) no-repeat center;
            background-size: 100%;
            animation: mymoveBoxTop 5s 1s infinite alternate;
        }

        .box.boxPlaceRight:after {
            position: absolute;
            top: 12%;
            left: -18px;
            content: '';
            width: 42px;
            height: 45px;
            /* transform: scale(1.2); */
            background: url(static/bigData/imgs/highlight222.png) no-repeat center;
            background-size: 100%;
            animation: mymoveBoxTop 5s 5s infinite alternate;
        }

        .box.boxPlaceBottom:before {
            position: absolute;
            bottom: -9px;
            left: 5px;
            content: '';
            width: 45px;
            height: 20px;
            background: url(static/bigData/imgs/highlight2.png) no-repeat center;
            background-size: 100%;
            z-index: 999;
            animation: mymoveBoxBottom 10s 3s infinite alternate;
        }

        @keyframes mymoveBoxTop {
            0% {
                top: 12%;
                /* transform: scale(1.2); */
            }

            100% {
                transform: scale(.8);
                top: 79%;
            }
        }

        @keyframes mymoveBoxBottom {
            0% {
                left: 1%;
                transform: scale(1);
            }

            100% {
                transform: scale(.5);
                left: 88%;
            }
        }

        @keyframes mymoveBoxLeft {
            0% {
                top: 20%;
                transform: scale(1.2) rotate(90deg);
            }

            100% {
                transform: scale(.8) rotate(90deg);
                top: 82%;
            }
        }

        #box1 {
            top: 1vh;
            left: 0px;
            height: 18vh;
        }

        #box2 {
            top: 21vh;
            left: 0px;
            height: 32vh;
        }

        #box3 {
            top: 55vh;
            left: 0px;
            height: 18vh;
        }

        #box4 {
            top: 74vh;
            left: 0px;
            height: 23vh;
        }

        #box5 {
            top: 1vh;
            right: 0px;
            height: 20vh;
        }

        #box6 {
            top: 22vh;
            right: 0px;
            height: 28vh;
        }

        #box7 {
            top: 51vh;
            right: 0px;
            height: 22vh;
        }

        #box8 {
            top: 74vh;
            right: 0px;
            height: 23vh;
        }

        #box9 {
            position: absolute;
            color: White;
            z-index: 99;
            top: 64vh;
            left: 25vw;
            right: 25vw;
            height: 33vh;
            /* border: 1px solid #2d92c6; */
            /* box-shadow: 0px 0px 5px 1px #1a6fa5; */
            background-size: 100% 100%;
        }

        /* 框内内容 */

        .innerBox {
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        #scrollParent {
            top: 3px;
            height: 98%;
        }

        /* 2框 */

        .jkCaption {
            line-height: 25px;
            /* border-left: 1px solid red; */
            padding-left: 10px;
            background: -webkit-linear-gradient(90deg, #059bed, rgba(0, 0, 0, 0));
            /* Safari 5.1 - 6.0 */
            background: -o-linear-gradient(90deg, #059bed, rgba(0, 0, 0, 0));
            /* Opera 11.1 - 12.0 */
            background: -moz-linear-gradient(90deg, #059bed, rgba(0, 0, 0, 0));
            /* Firefox 3.6 - 15 */
            background: linear-gradient(90deg, #059bed, rgba(0, 0, 0, 0));
            /* 标准的语法（必须放在最后） */
        }

        .jkcorner {
            width: 20px;
            height: 20px;
        }

        .jkcorner1 {
            float: right;
            border-top: 2px solid #72fafe;
            border-left: 2px solid #72fafe;
        }

        .jkcorner2 {
            border-top: 2px solid #72fafe;
            border-right: 2px solid #72fafe;
        }

        .jkcorner3 {
            float: right;
            border-bottom: 2px solid #72fafe;
            border-left: 2px solid #72fafe;
        }

        .jkcorner4 {
            border-bottom: 2px solid #72fafe;
            border-right: 2px solid #72fafe;
        }

        .jkBorderBox {
            width: 81%;
            height: 0;
            padding-bottom: 45%;
            position: absolute;
            border: 1px solid red;
        }

        /* 3框 */

        .echartsPieTable {
            height: 88%;
        }

        .echartsPieTable td {
            width: 50%;
            height: 100%
        }

        .pieEchartsItem {
            width: 90%;
            height: 100px
        }

        .kind {
            line-height: 18px;
            height: 22px;
        }

        .kind i {
            display: inline-block;
            width: 10px;
            height: 10px;
            background: red;
            vertical-align: middle;
        }

        /* 4框 */

        #scrollBar {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
        }

        .swiperList li {
            line-height: 35px;
            /* text-align: center; */
            padding: 0 25px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .swiperList a {
            color: #a3b5c5;
            /* color: #fff; */
        }

        .swiperList a:hover {
            text-decoration: underline;
        }

        /* 5框 */

        .weatcherTop,
        .weatcherBottom {
            padding: 0 2%;
            height: 50%;
        }

        .weatcherTop table,
        .weatcherBottom table {
            text-align: center;
        }

        .weatcherTop table td,
        .weatcherBottom table td {
            width: 25%;
        }

        #currCity {
            margin-bottom: 3px;
        }

        /* 6框 */

        .retrospectTop {
            text-align: center;
            margin: 15px 0;
        }

        .retrospectTop input {
            font-size: 1.4vh;
            height: 30px;
            border-radius: 4px;
            border: 1px solid #2d92c6;
            color: #ffffff;
            outline: 0;
            background: #07122087;
            width: 70%;
        }

        .retrospectTop button {
            font-size: 1.2vh;
            height: 30px;
            border-radius: 4px;
            border: 1px solid #2d92c6;
            color: #ffffff;
            outline: 0;
            background: #07122087;
            width: 15%;
            vertical-align: middle;
        }

        .retrospectTop button:hover {
            background: #25466f;
        }

        .retrospectBottom {
            margin: 0 2%
        }

        .timeline-item {
            position: relative;
            padding-bottom: 20px;
        }

        .timeline-item:before {
            content: '';
            position: absolute;
            left: 12px;
            top: 0;
            z-index: 0;
            width: 1px;
            height: 100%;
            background-color: #e6e6e6;
        }

        .timeline-item:last-child:before {
            display: none
        }

        .timeline-item i {
            position: absolute;
            left: 5px;
            top: 0;
            z-index: 10;
            width: 15px;
            height: 15px;
            line-height: 15px;
            background-color: rgba(0, 0, 0);
            color: #35d2f4;
            border-radius: 50%;
            text-align: center;
            cursor: pointer;
            border: 1px solid;
        }

        .timeline-item .timeline-content {
            padding-left: 25px;
        }

        .productionTable {
            width: 100%;
            height: 100%;
            line-height: 2.5vh;
            font-size: 1.8vh;
            font-weight: 700;
        }

        .leftProDuct {
            width: 40%;
            padding-left: 5%
        }

        .productionTitle {
            color: #3fd8d7;
            font-weight: normal;
            font-size: 1.6vh;
        }

        .exampleImg {
            height: 13.4vh;

        }

        .productionCursor,
        .exampleImg {
            cursor: pointer;
        }

        /* 1框 */

        .equipTable {
            width: 100%;
            height: 100%;
            text-align: center;
            margin-top: 5px;
        }

        .equipBox li {
            float: left;
            width: 50%;
        }

        .equipTable td>img {
            cursor: pointer;
            vertical-align: middle;
        }

        .borderCaptionBj {
            position: absolute;
            top: -3px;
            left: 0;
            right: 0;
            margin-left: 24.5%;
        }

        .borderAll:before {
            position: absolute;
            content: '　';
            color: red;
            left: 25%;
            top: -5px;
            right: 25%;
            text-align: center;
            background: #050d21 url(/static/bigData/imgs/captionBj.png) no-repeat center;
            background-size: 100%;
        }

        .borderAll .top {
            height: 0px;
            border: 1px solid #2d92c6;
            box-shadow: 0px 0px 5px 1px #1a6fa5;
            margin-right: 20px;
            /* width: 24.5%; */
        }

        .borderAll .bevel {
            height: 0px;
            border: 1px solid #2d92c6;
            width: 22px;
            transform: rotate(36deg);
            -o-transform: rotate(36deg);
            -moz-transform: rotate(36deg);
            -webkit-transform: rotate(36deg);
            box-shadow: 0px 0px 5px 1px #1a6fa5;
            position: absolute;
            right: -1px;
            top: 7px;
        }

        .borderAll .right {
            border: 1px solid #2d92c6;
            width: 0;
            box-shadow: 0px 0px 5px 1px #1a6fa5;
            position: absolute;
            right: 0;
            top: 15px;
            bottom: 0;
        }

        .borderAll .bottom {
            position: absolute;
            bottom: 0;
            border: 1px solid #2d92c6;
            width: 100%;
            box-shadow: 0px 0px 5px 1px #1a6fa5;
        }

        .borderAll .left {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            border: 1px solid #2d92c6;
            width: 0;
            box-shadow: 0px 0px 5px 1px #1a6fa5;
        }

        .equipLogo {
            width: 25px;
            height: 25px;
            border-radius: 50%;
            border-width: 0px;
            vertical-align: middle;
            /* text-align: center; */
            /* font-size: 12px; */
            /* color: blue; */
            /* background-color: rgb(255, 125, 0); */
            /* animation: 1s ease 0s infinite normal none running myfirst01; */
            display: inline-block;
        }

        .animate01 {
            background-color: #00e921;
            animation: 1s ease 0s infinite normal none running myfirst01;
        }

        .animate02 {
            background-color: #fffa02;
            animation: 1s ease 0s infinite normal none running myfirst02;
        }

        .animate03 {
            background-color: #4b1382;
            animation: 1s ease 0s infinite normal none running myfirst03;
        }

        .animate04 {
            background-color: #ff7d00;
            animation: 1s ease 0s infinite normal none running myfirst04;
        }

        .animate05 {
            background-color: #1b7ddd;
            animation: 1s ease 0s infinite normal none running myfirst05;
        }

        .equipItemBox {
            cursor: pointer;
        }

        .equipItemBox:hover {
            text-decoration: underline
        }

        /* 8框 */

        #box8 .productionVal {
            line-height: 36px;
            font-size: 18px;
        }

        #box8 .table1 {
            margin-top: 10px;
        }

        #box8 .table1,
        #box8 .table2 {
            height: 10vh;
            text-align: center
        }

        #box8 .table1 .productionTitle {
            color: #069aeb;
        }

        #box8 .table2 .productionVal {
            font-size: 24px;
        }

        #box9>ul {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 75%;
        }

        .category {
            float: left;
            min-width: 10%;
            max-width: 14%;
            line-height: 30px;
            border: 1px solid #2d92c6;
            box-shadow: 0px 0px 5px 1px #1a6fa5;

            transform: skew(-45deg);
            -ms-transform: skew(-45deg);
            /*IE9*/
            -moz-transform: skew(-45deg);
            /*Firefox*/
            -webkit-transform: skew(-45deg);
            /*Safari和chrome*/
            -o-transform: skew(-45deg);
            /*Opera*/
            background: linear-gradient(#00406b, rgba(0, 0, 0, 0.23), #003b63);
            background: -moz-linear-gradient(#00406b, rgba(0, 0, 0, 0.23), #003b63);
            background: -ms-linear-gradient(#00406b, rgba(0, 0, 0, 0.23), #003b63);
            background: -webkit-linear-gradient(#00406b, rgba(0, 0, 0, 0.23), #003b63);
            /* filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr="#11C3F9", endColorstr="#72C472", gradientType="1"); */
            margin-left: 20px;
            cursor: pointer;
        }

        .category.active {
            color: #4caf50;
        }

        .category>div {
            transform: skew(45deg);
            padding: 0 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

        }

        .echartsBox {
            border: 1px solid #2d92c6;
            box-shadow: 0px 0px 5px 1px #1a6fa5;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 68%;
            background: rgba(7, 17, 27, 0.7);
        }


        @keyframes myfirst01 {
            0% {
                -moz-box-shadow: 0px 0px 10px 2px #00e921;
                box-shadow: 0px 0px 10px 2px #00e921;
            }
            50% {
                -moz-box-shadow: 0px 0px 20px 2px #00e921;
                box-shadow: 0px 0px 20px 2px #00e921;
            }
            100% {
                -moz-box-shadow: 0px 0px 10px 2px #00e921;
                box-shadow: 0px 0px 10px 2px #00e921;
            }

        }

        @keyframes myfirst02 {
            0% {
                -moz-box-shadow: 0px 0px 10px 2px #fffa02;
                box-shadow: 0px 0px 10px 2px #fffa02;
            }
            50% {
                -moz-box-shadow: 0px 0px 20px 2px #fffa02;
                box-shadow: 0px 0px 20px 2px #fffa02;
            }
            100% {
                -moz-box-shadow: 0px 0px 10px 2px #fffa02;
                box-shadow: 0px 0px 10px 2px #fffa02;
            }

        }

        @keyframes myfirst03 {
            0% {
                -moz-box-shadow: 0px 0px 10px 2px #4b1382;
                box-shadow: 0px 0px 10px 2px #4b1382;
            }
            50% {
                -moz-box-shadow: 0px 0px 20px 2px #4b1382;
                box-shadow: 0px 0px 20px 2px #4b1382;
            }
            100% {
                -moz-box-shadow: 0px 0px 10px 2px #4b1382;
                box-shadow: 0px 0px 10px 2px #4b1382;
            }

        }

        @keyframes myfirst04 {
            0% {
                -moz-box-shadow: 0px 0px 10px 2px #ff7d00;
                box-shadow: 0px 0px 10px 2px #ff7d00;
            }
            50% {
                -moz-box-shadow: 0px 0px 20px 2px #ff7d00;
                box-shadow: 0px 0px 20px 2px #ff7d00;
            }
            100% {
                -moz-box-shadow: 0px 0px 10px 2px #ff7d00;
                box-shadow: 0px 0px 10px 2px #ff7d00;
            }

        }

        @keyframes myfirst05 {
            0% {
                -moz-box-shadow: 0px 0px 10px 2px #1b7ddd;
                box-shadow: 0px 0px 10px 2px #1b7ddd;
            }
            50% {
                -moz-box-shadow: 0px 0px 20px 2px #1b7ddd;
                box-shadow: 0px 0px 20px 2px #1b7ddd;
            }
            100% {
                -moz-box-shadow: 0px 0px 10px 2px #1b7ddd;
                box-shadow: 0px 0px 10px 2px #1b7ddd;
            }

        }

        /* 地图弹出框 */

        .custom-input-card {
            width: 18rem;
        }

        .custom-input-card .btn:last-child {
            margin-left: 1rem;
        }

        .content-window-card {
            position: relative;
            width: 23rem;
            padding: 0.75rem 0 0 1.25rem;
            box-shadow: none;
            bottom: 0;
            left: 0;
        }

        .content-window-card p {
            height: 2rem;
        }

        .input-card {
            background-color: #00000063;
        }

        .amap-info-content {
            background-color: #00000063;
            border: 1px solid #288bc0;
            box-shadow: 0px 0px 5px 0px #4bfafd;
            color: #fff;
        }

        .amap-info-contentContainer:hover .amap-info-outer {
            box-shadow: 0px 0px 5px 0px #4bfafd;
        }

        .bottom-center .amap-info-sharp {
            border-top: 8px solid #2d92c6;
        }

        /* layui弹出框式样覆盖 */

        div.layui-layer-title {
            /* background-color: #3495c7; */
            background-color: #1c658b;
            color: #fff;
            border-bottom: 1px solid #082d48;
        }

        .layui-layer-content {
            background: #082d48;
        }

        /* load */

        #load {
            width: 100%;
            height: 100%;
            position: absolute;
            background: url(../static/bigData/imgs/data08.png) no-repeat #061537;
            background-size: cover;
            top: 0;
            left: 0;
            z-index: 999;
        }

        #load .load_img {
            position: absolute;
            left: calc(50% - 182px);
            top: calc(50% - 182px);
        }

        .load_img img {
            position: absolute;
            left: 0;
            top: 0;
        }

        .load_img .jzxz1 {
            animation: xz1 8s infinite linear;
        }

        @keyframes xz1 {
            from {
                transform: rotate(0deg);
            }
            50% {
                transform: rotate(180deg);
            }
            to {
                transform: rotate(360deg);
            }
        }

        .load_img .jzxz2 {
            animation: xz2 7s infinite linear;
        }

        @keyframes xz2 {
            from {
                transform: rotate(0deg);
            }
            50% {
                transform: rotate(-180deg);
            }
            to {
                transform: rotate(-360deg);
            }
        }
    </style>
</head>

<body>
    <div id="load">
        <div class="load_img">
            <!-- 加载动画 -->
            <img class="jzxz1" src="{% static '/bigData/imgs/jzxz1.png'%}">
            <img class="jzxz2" src="{% static '/bigData/imgs/jzxz2.png'%}">
        </div>
    </div>
    <div id="map"></div>
    <!-- 标题 -->
    <div class="caption">
        <div id="box-title">智慧农业物联网大数据平台</div>
        <!-- <div id="animateBottom">
            <img src="{% static '/imgs/highlight.png'%}" width="180" alt="">
        </div> -->
    </div>
    <!-- 小框 -->
    <div id="box1" class="box boxPlace boxPlaceLeft boxPlaceBottom">
        <img src="{% static '/bigData/imgs/captionBj.png'%}" class="borderCaptionBj" width="50%" alt="">
        <div class="borderAll">
            <div class="top"></div>
            <div class="bevel"></div>
            <div class="right"></div>
            <div class="bottom"></div>
            <div class="left"></div>
        </div>
        <!-- <img src="{% static '/imgs/highlight.png'%}" class="rightAnimate" width="100" alt=""> -->
        <!-- <img src="{% static '/imgs/highlight.png'%}" class="bottomAnimate" width="130" alt=""> -->
        <table class="equipTable">
            <tr>
                <td>
                    <div class="equipItemBox" data-item="2">
                        <div class="equipLogo">
                            <img src="{% static '/bigData/imgs/icon1.svg'%}" width="100%" alt="">
                        </div>
                        &nbsp;杀虫灯
                        <span id="scdNum">873</span>台
                    </div>
                </td>
                <td>
                    <div class="equipItemBox" data-item="3">
                        <div class="equipLogo">
                            <img src="{% static '/bigData/imgs/icon2.svg'%}" width="100%" alt="">
                        </div>
                        &nbsp;测报灯
                        <span id="cbdNum">652</span>台
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="equipItemBox" data-item="5">
                        <div class="equipLogo">
                            <img src="{% static '/bigData/imgs/icon3.svg'%}" width="100%" alt="">
                        </div>
                        &nbsp;环境监测
                        <span id="qxzNum">434</span>台
                    </div>
                </td>
                <td>
                    <div class="equipItemBox" data-item="6">
                        <div class="equipLogo">
                            <img src="{% static '/bigData/imgs/icon4.svg'%}" width="100%" alt="">
                        </div>
                        &nbsp;孢子仪
                        <span id="bzyNum">251</span>台
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="equipItemBox" data-item="7">
                        <div class="equipLogo">
                            <img src="{% static '/bigData/imgs/icon5.svg'%}" width="100%" alt="">
                        </div>
                        &nbsp;监　控
                        <span id="jkNum">165</span>台
                    </div>
                </td>
                <td>
                    <div class="equipItemBox" data-item="all">
                        <!-- <div class="equipLogo"></div> -->
                        <img src="{% static '/bigData/imgs/locationIcon.png' %}" style="vertical-align: middle;" width="26" alt=""> &nbsp;全部设备
                    </div>
                </td>
            </tr>
        </table>
    </div>
    <div id="box2" class="box boxPlace">
        <div class="innerBox" style="">
            <div class="jkCaption">监控中心</div>
            <!-- <div>河南郑州</div> -->
            <table style="height:80%;margin-top:10px">
                <tr>
                    <td style="height:22px">
                        <div class="jkcorner jkcorner1"></div>
                    </td>
                    <td></td>
                    <td>
                        <div class="jkcorner jkcorner2"></div>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td style="width:80%">
                        <video id="myPlayer" poster="" controls playsInline webkit-playsinline autoplay style="width:100%;height: 20vh;">
                            <!-- <source src="rtmp://rtmp01open.ys7.com/openlive/18319fb1a08249d3a498c5cba3e8bdee.hd" type="" /> -->
                            <source src="http://hls01open.ys7.com/openlive/18319fb1a08249d3a498c5cba3e8bdee.hd.m3u8" type="application/x-mpegURL" />
                        </video>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td style="height:22px">
                        <div class="jkcorner jkcorner3"></div>
                    </td>
                    <td></td>
                    <td>
                        <div class="jkcorner jkcorner4"></div>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    </div>
    <div id="box3" class="box boxPlace">
        <div class="jkCaption">数据</div>
        <table class="echartsPieTable">
            <tr>
                <td>
                    <h2>图标1</h2>
                    <div style="width:60%;float: left;">
                        <div id="pie1" class="pieEchartsItem"></div>
                    </div>
                    <ul style="width:40%;float: left;">
                        <li class="kind">
                            <i>&nbsp;</i>
                            <span>&nbsp;服务站点</span>
                        </li>
                        <li class="kind">
                            <i>&nbsp;</i>
                            <span>&nbsp;服务站点</span>
                        </li>
                        <li class="kind">
                            <i>&nbsp;</i>
                            <span>&nbsp;服务站点</span>
                        </li>
                        <li class="kind">
                            <i>&nbsp;</i>
                            <span>&nbsp;服务站点</span>
                        </li>
                    </ul>
                </td>
                <td>
                    <h2>图标2</h2>
                    <div style="width:60%;float: left;">
                        <div id="pie2" class="pieEchartsItem"></div>
                    </div>
                    <ul style="width:40%;float: right;">
                        <li>2222222222</li>
                        <li>2</li>
                        <li>2</li>
                        <li>2</li>
                    </ul>
                </td>
            </tr>
        </table>
    </div>
    <div id="box4" class="box boxPlace boxPlace boxPlaceLeft boxPlaceBottom">
        <img src="{% static '/bigData/imgs/captionBj.png'%}" class="borderCaptionBj" width="50%" alt="">
        <div class="borderAll">
            <div class="top"></div>
            <div class="bevel"></div>
            <div class="right"></div>
            <div class="bottom"></div>
            <div class="left"></div>
        </div>
        <div class="innerBox" id="scrollParent">
            <ul class="swiperList" id="scrollBar">
                <li>
                    <a data-type="1" target="_blank">
                        <i class="fa fa-volume-up" aria-hidden="true"></i>
                        铜梁：推广可降解地膜治理农田“白色污染”
                    </a>
                </li>
                <li>
                    <a data-type="2" target="_blank">
                        <i class="fa fa-volume-up" aria-hidden="true"></i>
                        柳河县：推动秸秆还田配套项目建设
                    </a>
                </li>
                <li>
                    <a data-type="3" target="_blank">
                        <i class="fa fa-volume-up" aria-hidden="true"></i>
                        河南：发展特色蔬菜产业致富路
                    </a>
                </li>
                <li>
                    <a data-type="4" target="_blank">
                        <i class="fa fa-volume-up" aria-hidden="true"></i>
                        玉米、小麦绿色品种指标体系发布
                    </a>
                </li>
                <li>
                    <a data-type="5" target="_blank">
                        <i class="fa fa-volume-up" aria-hidden="true"></i>
                        7月19日，一场汇聚全球智慧农业人的盛会来啦
                    </a>
                </li>
                <li>
                    <a data-type="6" target="_blank">
                        <i class="fa fa-volume-up" aria-hidden="true"></i>
                        7月初总体农药价格行情走势
                    </a>
                </li>
                <li>
                    <a data-type="7" target="_blank">
                        <i class="fa fa-volume-up" aria-hidden="true"></i>
                        农村怪象：农民工看不起大学生，上学无用论盛行，风气不正何时消
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <div id="box5" class="box boxPlace boxPlaceRight boxPlaceBottom">
        <img src="{% static '/bigData/imgs/captionBj.png'%}" class="borderCaptionBj" width="50%" alt="">
        <div class="borderAll">
            <div class="top"></div>
            <div class="bevel"></div>
            <div class="right"></div>
            <div class="bottom"></div>
            <div class="left"></div>
        </div>
        <!-- <img src="{% static '/imgs/highlight.png'%}" class="leftAnimate" width="100" alt=""> -->
        <!-- <img src="{% static '/imgs/highlight.png'%}" class="bottomAnimate" width="130" alt=""> -->
        <!-- 天气 -->
        <div class="weatcherTop">
            <table style="height:100%">
                <tr>
                    <td>
                        <p class="font14" id="currCity"></p>
                        <p id="upTime"></p>
                    </td>
                    <td>
                        <big id="weatherIcon" class="jpg80" style="zoom: 50%;"></big>
                    </td>
                    <td>
                        <div id="temScope" class="font20"></div>
                    </td>
                    <td>
                        <div id="wea"></div>
                    </td>
                </tr>
            </table>
        </div>
        <div class="weatcherBottom">
            <table style="height:100%">
                <tr>
                    <td>
                        <p style="margin: 14px 0 4px;">风速</p>
                        <p class="font14" id="win_speed"></p>
                    </td>
                    <td>
                        <div>
                            <img src="{% static '/bigData/imgs/qw.png'%}" alt="">
                        </div>
                        <div id="currTem"></div>
                    </td>
                    <td>
                        <div>
                            <img src="{% static '/bigData/imgs/sd.png'%}" alt="">
                        </div>
                        <div id="humidity"></div>
                    </td>
                    <td>
                        <div>
                            <img src="{% static '/bigData/imgs/dnf.png'%}" alt="">
                        </div>
                        <div id="winGrade"></div>
                    </td>
                </tr>
            </table>
        </div>

    </div>
    <div id="box6" class="box boxPlace">
        <div class="jkCaption">农业物联网</div>
        <!-- 追溯 -->
        <div style="margin-top:4%;">
            <table class="productionTable">
                <tr>
                    <td class="leftProDuct productionCursor" onclick="reateMarke(equipInfo, 7)">
                        <div class="productionTitle">生产监控</div>
                        <div>354</div>
                    </td>
                    <td>
                        <div class="productionTitle">生态循环</div>
                        <div>368</div>
                    </td>
                </tr>
                <tr>
                    <td class="leftProDuct">
                        <div class="productionTitle">生产管理</div>
                        <div>567</div>
                    </td>
                    <td rowspan="2">
                        <div class="productionTitle">示范点：云飞展示基地</div>
                        <div>
                            <img src="{% static '/bigData/imgs/16062573.png'%}" class="exampleImg" onclick="mainModalEvent()" alt="">
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="leftProDuct">
                        <div class="productionTitle">安全追溯</div>
                        <div>1123</div>
                    </td>
                </tr>

            </table>
        </div>
    </div>
    <div id="box7" class="box boxPlace">
        <!-- <div class="jkCaption">农业物联网</div> -->
        <!-- 统计 -->
        <div id="barEcharts" style="height:100%"></div>
    </div>
    <div id="box8" class="box boxPlace">
        <!-- <div id="box8" class="box boxPlace boxPlaceRight boxPlaceBottom"> -->
        <!-- <img src="{% static '/imgs/captionBj.png'%}" class="borderCaptionBj" width="50%" alt="">
        <div class="borderAll">
            <div class="top"></div>
            <div class="bevel"></div>
            <div class="right"></div>
            <div class="bottom"></div>
            <div class="left"></div>
        </div> -->
        <!-- <img src="{% static '/imgs/highlight.png'%}" class="leftAnimate" width="100" alt=""> -->
        <!-- <img src="{% static '/imgs/highlight.png'%}" class="bottomAnimate" width="130" alt=""> -->
        <div class="jkCaption">农业数字</div>
        <div>
            <table class="table1" style="height:10vh;text-align:center">
                <tr>
                    <td>
                        <div class="productionTitle">品牌农企</div>
                        <div class="productionVal">54</div>
                    </td>
                    <td>
                        <div class="productionTitle">品牌农企</div>
                        <div class="productionVal">54</div>
                    </td>
                    <td>
                        <div class="productionTitle">品牌农企</div>
                        <div class="productionVal">54</div>
                    </td>
                    <td>
                        <div class="productionTitle">品牌农企</div>
                        <div class="productionVal">54</div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="productionTitle">品牌农企</div>
                        <div class="productionVal">54</div>
                    </td>
                    <td>
                        <div class="productionTitle">品牌农企</div>
                        <div class="productionVal">54</div>
                    </td>
                    <td>
                        <div class="productionTitle">品牌农企</div>
                        <div class="productionVal">54</div>
                    </td>
                    <td>
                        <div class="productionTitle">品牌农企</div>
                        <div class="productionVal">54</div>
                    </td>
                </tr>
            </table>
            <!-- <div class="jkCaption">农业数字</div> -->
            <table class="table2" style="height:10vh;text-align:center">
                <tr>
                    <td>
                        <div class="productionTitle">产值（亿）</div>
                        <div class="productionVal">123.5</div>
                    </td>
                    <td>
                        <div class="productionTitle">总收入（亿）</div>
                        <div class="productionVal">54.62</div>
                    </td>
                    <td>
                        <div class="productionTitle">人均收入（亿）</div>
                        <div class="productionVal">11152.31111</div>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <div id="box9" class="box">
        <ul class="clearfix" id="categoryTitle">
            <li class="category active">
                <div>智慧农业物联网大数据平台</div>
            </li>
            <li class="category">
                <div>大数据智农业物联网平台</div>
            </li>
            <li class="category">
                <div>农业物联网大数据平台</div>
            </li>
            <li class="category">
                <div>网大数据平台</div>
            </li>
            <li class="category">
                <div>5</div>
            </li>
        </ul>
        <div class="echartsBox">
            <div id="echarts" style="height:100%"></div>
        </div>
    </div>

    <!-- 加载地图JSAPI脚本 -->
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=3939967b919a8003377dd113fc445a3d&plugin=AMap.Geocoder"></script>
    <script src="{% static '/lib/js/jquery-2.1.4.min.js'%}"></script>
    <script src="{% static '/lib/layui/layui.js'%}"></script>
    <!-- <script src="{% static '/lib/weatherIcon.js'%}"></script> -->
    <!-- <script src="{% static '/lib/equipInfo.js'%}"></script> -->
    <script src="https://open.ys7.com/sdk/js/1.3/ezuikit.js"></script>
    <!-- <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script> -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts.js"></script>
    <script>
        var map = new AMap.Map('map', {
            resizeEnable: true, //是否监控地图容器尺寸变化
            zoom: 11, //初始化地图层级
            center: [113.397428, 39.90923] //初始化地图中心点
        });
        map.setMapStyle('amap://styles/darkblue');


        // 1框
        $('.equipTable').on('click', '.equipItemBox', function () {
            console.log($(this))
            console.log($(this).data('item'))
            reateMarke(equipInfo, $(this).data('item'))
        })
        // $.ajax({
        //     url: 'map',
        //     type: 'post',
        //     data: {
        //     },
        //     dataType: 'json',
        //     success: function (data) {
        //         // console.log(data);
        //         reateMarke(data, 'all')
        //     }
        // })
        // reateMarke(equipInfo, 'all')
        function reateMarke(capitals, all) {
            map.clearMap();  // 清除地图覆盖物
            var scd = 0, cbd = 0, bzy = 0, qxz = 0, jk = 0;
            for (var i = 0; i < capitals.length; i += 1) {
                if (capitals[i].equip_type == 2) {
                    scd++;
                    var bgColor = '#00e921';
                    var animationName = 'myfirst01';
                    var equipType = '杀虫灯';
                    var icon = 'static/imgs/icon1.svg';
                } else if (capitals[i].equip_type == 3) {
                    cbd++;
                    var bgColor = '#fffa02';
                    var animationName = 'myfirst02';
                    var equipType = '测报灯';
                    var icon = 'static/imgs/icon2.svg';
                } else if (capitals[i].equip_type == 5) {
                    qxz++;
                    var bgColor = '#4b1382';
                    var animationName = 'myfirst03';
                    var equipType = '环境监测';
                    var icon = 'static/imgs/icon3.svg';
                } else if (capitals[i].equip_type == 6) {
                    bzy++;
                    var bgColor = '#ff7d00';
                    var animationName = 'myfirst04';
                    var equipType = '孢子仪';
                    var icon = 'static/imgs/icon4.svg';
                } else if (capitals[i].equip_type == 7) {
                    jk++;
                    var bgColor = '#1b7ddd';
                    var animationName = 'myfirst05';
                    var equipType = '监控';
                    var icon = 'static/imgs/icon5.svg';
                }
                if (all == 'all') {
                    var currStatus = true;
                } else {
                    var currStatus = capitals[i].equip_type == all
                }
                if (capitals[i].lng && capitals[i].lat && currStatus　) {
                    // var text = new AMap.Text({
                    //     text: ' ',
                    //     anchor: 'center',
                    //     verticalAlign: 'middle', //middle 、bottom
                    //     draggable: false, //设置点标记是否可拖拽移动
                    //     cursor: 'pointer',
                    //     angle: 10,
                    //     style: {
                    //         'width': '10px',
                    //         'height': '10px',
                    //         'border-radius': '50%',
                    //         'border-width': 0,
                    //         'text-align': 'center',
                    //         'font-size': '12px',
                    //         'color': 'blue',
                    //         'background-color': bgColor,
                    //         // '-moz-box-shadow': '0px 0px 20px 2px '+capitals[i].color,
                    //         // 'box-shadow': '0px 0px 20px 2px '+capitals[i].color,
                    //         'animation': animationName + ' 1s infinite',
                    //         // 'animation': 'myfirst 1s infinite'
                    //     },
                    //     icon:'http://yingde.hoire.cn/Content/image/Ecommerce1.svg',
                    //     position: [parseFloat(capitals[i].lng), parseFloat(capitals[i].lat)]
                    //     // position:[120.11, 30.357574]
                    // })
                    var text = new AMap.Marker({
                        map: map,
                        position: [parseFloat(capitals[i].lng), parseFloat(capitals[i].lat)],
                        icon: icon, // 添加 Icon 图标 URL
                        title: "",
                        // extData:{type:12,id:'00000000-0000-0000-0000-000000000000'}  //用户自定义属性
                    });

                    //构建自定义信息窗体
                    var info = [];
                    info.push("<div class='input-card content-window-card'> ");
                    info.push("<div style=\"padding:7px 0px 0px 0px;\"><h4>" + equipType + "设备</h4>");
                    info.push("<p style=\"padding:7px 0px 0px 0px;\">设备IMEI :" + capitals[i].equip_id + "</p>");
                    info.push("<p class='input-item'>经度 : " + capitals[i].lng + "　纬度 : " + capitals[i].lat + "</p>");
                    info.push("<p class='input-item' id='currAddress'>地址 :</p></div></div>");
                    var content = info.join("");
                    var place = [parseFloat(capitals[i].lng), parseFloat(capitals[i].lat)]
                    addClickHandler(text, place, content) //标注点击事件
                    text.setMap(this.map); //将标注添加到地图上
                }
                if (i == capitals.length - 1) {
                    // $('#scdNum').html(scd);
                    // $('#cbdNum').html(cbd);
                    // $('#bzyNum').html(bzy);
                    // $('#qxzNum').html(qxz);
                    // $('#jkNum').html(jk);
                    // $('#allNum').html(capitals.length);
                }
                map.setFitView(); //标注在可视范围
            }

        }
        function addClickHandler(marker, place, content) {
            marker.on("mouseover", function (e) {
                // 根据经纬度查询地址
                var geocoder;
                geocoder = new AMap.Geocoder({});
                geocoder.getAddress(place, function (status, result) {
                    if (status === 'complete' && result.regeocode) {
                        var address = result.regeocode.formattedAddress;
                        $('#currAddress').html('地址 :' + address)
                    } else {
                        alert('根据经纬度查询地址失败')
                    }
                });
                //在指定位置打开信息窗体
                var infoWindow = new AMap.InfoWindow({
                    content: content, //使用默认信息窗体框样式，显示信息内容
                    offset: new AMap.Pixel(5, -15)
                });
                infoWindow.open(map, place)
            });
        }

        // 2框
        // var player = new EZUIPlayer('myPlayer');
        // player.on('error', function () {
        //     console.log('error');
        // });

        // 3框
        var myChart1 = echarts.init(document.getElementById('pie1'));
        var myChart2 = echarts.init(document.getElementById('pie2'));

        var pieoption = {
            grid: {
                top: 0,
                left: 0,
                bottom: 0,
                right: 0
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '80%',
                    data: [
                        { value: 335, name: '直接访问' },
                        { value: 310, name: '邮件营销' },
                        { value: 234, name: '联盟广告' },
                        { value: 135, name: '视频广告' },
                        { value: 1548, name: '搜索引擎' }
                    ],
                    hoverAnimation: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    itemStyle: {
                        //通常情况下：
                        normal: {
                            //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                            color: function (params) {

                                var colorList = [
                                    '#00FFFF', '#00FF00', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463',
                                ];
                                return colorList[params.dataIndex]

                            }
                        }
                    }
                }
            ]

        };

        // 为echarts对象加载数据 
        myChart1.setOption(pieoption);
        myChart2.setOption(pieoption);

        myChart1.on("click", pieConsole);
        //方法三：http://www.jb51.net/article/125820.htm
        function pieConsole(param) {
            console.log(param)
            //     获取data长度
            alert(option.series[0].data.length);
            //      获取地N个data的值
            // 　　alert(option.series[0].data[i]);
            //     获取series中param.dataIndex事件对应的值
            alert(param.value);
            alert(param.name);
            // alert(option.series[param.seriesIndex].data[param.dataIndex].value);
            // alert(option.series[param.seriesIndex].data[param.dataIndex].name);
            // 　　clickFunc(param.dataIndex);//执行点击效果,触发相应js函数
            //param具体包含的方法见 https://blog.csdn.net/allenjay11/article/details/76033232

            //刷新页面
            // location.reload();
            // window.location.reload();            
        }

        // 滚动文字4框
        var interval;
        var stap = 1;
        function txtScrollBar() {
            var num = $('#scrollBar li').length;  //共多少条
            var height = $('#scrollBar li').eq(0).height(); //每条高度
            var currentNum = Math.round($('#scrollParent').height() / height) //需要部位几个

            interval = setInterval(function () {
                $('#scrollBar li').eq(0).slideUp(function () {
                    $('#scrollBar').append($('#scrollBar li').eq(0));
                });
                $('#scrollBar li').show();
            }, 2500)
        }
        $('#scrollBar').on('mouseenter', 'li', function () {
            clearInterval(interval)
        })
        $('#scrollBar').on('mouseleave', 'li', function () {
            txtScrollBar()
        })
        txtScrollBar();

        $('#scrollBar li').on('click', function () {
            var currNum = $(this).find('a').data('type');
            //Ajax获取
            $.get('html_trans', { htmlnum: currNum }, function (str) {
                // console.log(str);
                layui.use('layer', function () {
                    var layer = layui.layer;
                    layer.open({
                        type: 1,
                        title: '农业资讯',
                        area: ['800px', '600px'],
                        offset: '100px',
                        shadeClose: true,
                        content: str,
                        zIndex: layer.zIndex, //重点1
                        success: function (layero) {
                            // layer.setTop(layero); //重点2
                        }
                    });

                });
            });
            var url = $(this).find('a').data('href');
            // layui.use('layer', function () {
            //     var layer = layui.layer;
            //     layer.open({
            //         type: 0,
            //         // shade: false,
            //         area: '500px',
            //         maxmin: true,
            //         content: 'http://www.layui.com',
            //         zIndex: layer.zIndex, //重点1
            //         success: function (layero) {
            //             layer.setTop(layero); //重点2
            //         }
            //     });

            // });
        })

        // 天气情况5框
        // $.ajax({
        //     url: 'weather',
        //     type: 'post',
        //     data: {
        //         addr: '郑州'
        //     },
        //     dataType: 'json',
        //     success: function (data) {
        //         console.log(data);
        //         $('#currCity').html(data.city);
        //         $('#upTime').html(data.date);
        //         var weatherImg = weatherIcon[data.wea]
        //         $('#weatherIcon').attr('class', 'jpg80 ' + weatherImg);
        //         $('#temScope').html(data.tem2 + '~' + data.tem1 + 'C°');
        //         $('#wea').html(data.wea);
        //         $('#win_speed').html(data.win_speed);
        //         $('#currTem').html('气温 ' + data.tem + 'C°');
        //         $('#humidity').html('湿度 ' + data.humidity);
        //         $('#winGrade').html(data.win + data.win_speed);
        //     }
        // })

        //  6框 追溯
        function mainModalEvent() {
            // $.ajax({
            //     url: 'zs_login',
            //     type: 'post',
            //     data: {
            //     },
            //     dataType: 'json',
            //     success: function (data) {
            //         // if(data == 0){  
            //               layui.use('layer', function () {
            //                 var layer = layui.layer;
            //                 layer.open({
            //                     type: 2,
            //                     title: '云飞展示基地',
            //                     area: ['70%', '70%'],
            //                     btn: false, //可以无限个按钮
            //                     // offset: '100px',
            //                     shadeClose: true,
            //                     content: 'data',
            //                     zIndex: layer.zIndex, //重点1
            //                     success: function (layero) {
            //                         // layer.setTop(layero); //重点2
            //                         // alert(1)
            //                     }
            //                 });

            //             });
            //         // }
            //     }
            // })
            // correct("http://127.0.0.1:8000/static/js/zs_login.js");
            // setTimeout(function(){

            layui.use('layer', function () {
                var layer = layui.layer;
                layer.open({
                    type: 2,
                    title: '云飞展示基地',
                    area: ['70%', '70%'],
                    btn: false, //可以无限个按钮
                    // offset: '100px',
                    shadeClose: true,
                    content: 'http://127.0.0.1:9000',
                    zIndex: layer.zIndex, //重点1
                    success: function (layero) {

                    }
                });

            });
            // },3000)


        }


        // 7框 柱形图 农村产业结构
        var myBarChart = echarts.init(document.getElementById('barEcharts'));
        // 指定图表的配置项和数据
        BarOption = {
            title: {
                text: '农村产业结构(亿元)',
                textStyle: {
                    color: '#3fd8d7'
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow',         // 默认为直线，可选为：'line' | 'shadow'
                    lineStyle: {          // 直线指示器样式设置
                        color: '#fff',
                        width: 2,
                        type: 'solid'
                    },
                    // shadowStyle: {                       // 阴影指示器样式设置
                    //     width: 'auto',                   // 阴影大小
                    //     color: 'rgba(150,150,150,0.3)'  // 阴影颜色
                    // }
                },
            },
            legend: {
                data: ['最高气温'],
            },
            toolbox: {
                show: true,
                feature: {
                    // mark: { show: true },
                    // dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar'], iconStyle: { borderColor: '#48fffe' } },
                    // restore: { show: true },
                    // saveAsImage: { show: true }
                    saveAsImage: { show: true, iconStyle: { borderColor: '#48fffe' } }
                }
            },
            grid: {
                x: '50',
                y: '50',
                x2: '50',
                y2: '50'
            },
            xAxis: [
                {
                    type: 'category',
                    data: ['农业', '林业', '牧业', '蔬菜', '烟草', '茶叶', '园林'],
                    axisLine: { lineStyle: { color: "#2b8dc2" } }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLine: { lineStyle: { color: "#2b8dc2" } },
                    splitLine: { show: false }
                }
            ],
            // color: ['#2d92c6'],
            series: [{
                name: '',
                type: 'bar',
                data: [10, 52, 200, 334, 390, 330, 220],
                barWidth: '50%',
                itemStyle: {
                    normal: {
                        // 随机显示
                        // color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}

                        // 定制显示（按顺序）
                        color: function (params) {
                            var colorList = ['#C33531', '#EFE42A', '#64BD3D', '#EE9201', '#29AAE3', '#B74AE5', '#0AAF9F', '#E89589', '#16A085', '#4A235A', '#C39BD3 ', '#F9E79F', '#BA4A00', '#ECF0F1', '#616A6B', '#EAF2F8', '#4A235A', '#3498DB'];
                            return colorList[params.dataIndex]
                        }
                    },
                },
            }]
        };
        myBarChart.setOption(BarOption);

        // 9框 标题切换
        // 2基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echarts'));
        // 指定图表的配置项和数据
        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'line',         // 默认为直线，可选为：'line' | 'shadow'
                    lineStyle: {          // 直线指示器样式设置
                        color: '#fff',
                        width: 2,
                        type: 'solid'
                    },
                    shadowStyle: {                       // 阴影指示器样式设置
                        width: 'auto',                   // 阴影大小
                        color: 'rgba(150,150,150,0.3)'  // 阴影颜色
                    }
                },
            },
            legend: {
                data: ['最高气温'],
            },
            toolbox: {
                show: true,
                feature: {
                    // mark: { show: true },
                    // dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar'] },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            grid: {
                x: '80',
                y: '30',
                x2: '30',
                y2: '30'
            },
            dataZoom: {
                show: false,
                realtime: true,
                dataBackgroundColor: 'rgba(144,197,237,0.2)'
                // fillerColor:'rgba(0,0,0,0)'
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: [],
                axisLine: { lineStyle: { color: "#2b8dc2" } }

            },
            yAxis: {
                type: 'value',
                axisLine: { lineStyle: { color: "#2b8dc2" } },
                splitLine: { show: false }
            },
            // color: ['#2d92c6'],
            series: [{
                name: '',
                data: [],
                type: 'line',
                // lineStyle: { color: "#red" },
                areaStyle: { color: "rgb(45, 146, 198,.5)" },
                itemStyle: {
                    normal: {
                        color: '#2d92c6',
                        lineStyle: {
                            color: '#2d92c6'
                        }
                    }
                }
            }]
        };

        // setTimeout(function(){


        $.ajax({
            url: 'environmentData',
            type: 'post',
            data: {},
            dataType: 'json',
            success: function (data) {
                // console.log(data)
                var res = data;
                var time = [];  //时间集合 --x轴
                var dataGather = [];   //数据集合 --y轴 
                var tabTitle = [];
                for (var i = 0; i < res.length; i++) {
                    time.unshift(res[i].upl_time);
                    // 种类集合
                    if (i == 0) {
                        for (var j = 0; j < res[i].unit.length; j++) {
                            tabTitle.push(res[i].unit[j][1] + '（' + res[i].unit[j][2] + '）'); //种类 --头部标签
                            // cols.push({ field: j, title: res[i].unit[j][1] + '（' + res[i].unit[j][2] + '）', sort: 'true', align: 'center', width: 100 });
                            var firstArr = [];
                            firstArr.unshift(res[i].unit[j][0]);
                            dataGather.push(firstArr);
                        }
                    } else {
                        for (var z = 0; z < res[i].unit.length; z++) {
                            dataGather[z].unshift(res[i].unit[z][0]);
                        }
                    }
                    if (i == res.length - 1) {
                        // tab选项卡切换
                        $('#categoryTitle').on('click', 'li', function () {
                            $('#categoryTitle li').removeClass('active');
                            $(this).addClass('active');
                            option.xAxis.data = time
                            var index = $(this).index();
                            option.series[0].data = dataGather[index]
                            var legend = tabTitle[index]
                            option.legend = { data: [legend], textStyle: { color: '#fff' } }
                            option.series[0].name = legend

                            myChart.setOption(option);
                            myChart.resize();
                        })
                        $('#categoryTitle li').eq(0).click();
                    }
                }
            }
        })

        // },2000)


        window.onresize = function () {
            myChart.resize();
            clearInterval(interval)
            txtScrollBar();
            myChart1.resize();
            myChart2.resize();
            myBarChart.resize();
        }
        //删除加载动画
        $('#load').fadeOut(1000)
        setTimeout(function () {
            $('#load').remove()
        }
        , 1100);
    </script>
</body>

</html>