jifuning
/
yangchangwan


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508250925102511251225132514251525162517251825192520252125222523252425252526252725282529253025312532253325342535253625372538253925402541254225432544254525462547254825492550255125522553255425552556255725582559256025612562256325642565256625672568256925702571257225732574257525762577257825792580258125822583258425852586258725882589259025912592259325942595259625972598259926002601260226032604260526062607260826092610261126122613261426152616261726182619262026212622262326242625262626272628262926302631263226332634263526362637263826392640264126422643264426452646264726482649265026512652265326542655265626572658265926602661266226632664266526662667266826692670267126722673267426752676267726782679268026812682268326842685268626872688268926902691269226932694269526962697269826992700270127022703270427052706270727082709271027112712271327142715271627172718271927202721272227232724272527262727272827292730273127322733273427352736273727382739274027412742274327442745274627472748274927502751275227532754275527562757275827592760276127622763276427652766276727682769277027712772277327742775277627772778277927802781278227832784278527862787278827892790279127922793279427952796279727982799280028012802280328042805280628072808280928102811281228132814281528162817281828192820282128222823282428252826282728282829283028312832283328342835283628372838283928402841284228432844284528462847284828492850285128522853285428552856285728582859286028612862286328642865286628672868286928702871287228732874287528762877287828792880288128822883288428852886288728882889289028912892289328942895289628972898289929002901290229032904290529062907290829092910291129122913291429152916291729182919292029212922292329242925292629272928292929302931293229332934293529362937293829392940294129422943294429452946294729482949295029512952295329542955295629572958295929602961296229632964296529662967296829692970297129722973297429752976297729782979298029812982298329842985298629872988298929902991299229932994299529962997299829993000300130023003300430053006300730083009301030113012301330143015301630173018301930203021302230233024302530263027302830293030303130323033303430353036303730383039304030413042304330443045304630473048304930503051305230533054305530563057305830593060306130623063306430653066306730683069307030713072307330743075307630773078307930803081308230833084308530863087308830893090309130923093309430953096309730983099310031013102310331043105310631073108310931103111311231133114311531163117311831193120312131223123312431253126312731283129313031313132313331343135313631373138313931403141314231433144314531463147314831493150315131523153315431553156315731583159316031613162316331643165316631673168316931703171317231733174317531763177317831793180318131823183318431853186318731883189319031913192319331943195319631973198
							<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"
    />
    <meta
      name="format-detection"
      content="telephone=no,email=no,date=no,address=no"
    />
    <meta name="format-detection" content="telephone=no" />
    <title>二维码详情</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/QRcode.css"/>

    <link rel="stylesheet" href="../../css/swiper.css" />
    <link rel="stylesheet" href="../../css/animate.css" />
    <link rel="stylesheet" type="text/css" href="../../css/popoPicker.css" />
    <link
      rel="stylesheet"
      type="text/css"
      href="../../script/H5/mobileSelect.css"
    />
    <link rel="stylesheet" href="../../css/select.css" />
    <link rel="stylesheet" href="../../css/addRecode.css" />
    <style>
      .overflow {
        overflow: hidden;
        height: 100%;
      }
      html,
      body {
        overflow-x: hidden;
      }
      p {
        width: auto;
        margin: 0;
        padding: 0;
        text-align: justify;
        font-size: 14px;
        /*text-indent: 30px!important;*/
      }
      * {
        box-sizing: border-box;
      }
      .hide {
        display: none;
      }
      .qrcode-wrap {
        /*padding-top: 5px;*/
        background: #fff;
      }
      .col {
        padding: 0 10px;
        position: relative;
      }
      .col-file {
        padding: 0 10px;
        position: relative;
      }
      .col-file label {
        color: #333;
        font-size: 16px;
        padding: 15px 0;
        position: relative;
        padding-left: 15px;
        width: 100%;
      }

      .file-title-add {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: solid 1px #ecf0f1;
      }


      .file-title-add img {
        display: block;
        width: 14px;
        height: 14px;
      }

      .col label {
        color: #333;
        font-size: 16px;
        padding: 15px 0;
        position: relative;
        padding-left: 15px;
        width: 100%;
      }

      .col-file label:before {
        content: '';
        position: absolute;
        top: 13px;
        left: 0;
        width: 3px;
        height: 26px;
        background: #009fe8;
      }
      .col label:before {
        content: '';
        position: absolute;
        top: 13px;
        left: 0;
        width: 3px;
        height: 26px;
        background: #009fe8;
      }
      .col-file label:after {
        content: '';
        position: absolute;
        top: 13px;
        left: 0;
        width: 3px;
        height: 26px;
        background: #009fe8;
      }
      .col label:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background: #ecf0f1;
      }
      .content {
        padding: 15px 0;
        color: #333;
        font-size: 14px;
      }
      .content p {
        color: #333;
      }
      .col img {
        width: 100%;
        border-radius: 5px;
      }
      .col .swiper-slide img {
        width: 100%;
        height: 209px;
        object-fit: cover;
      }
      /*线*/
      .line {
        height: 3px;
        width: 100%;
        background: #ecf0f1;
      }
      /*轮播*/
      .api_page_text {
        bottom: 0;
      }
      .swiper-pagination-fraction {
        width: 20%;
        left: inherit;
        right: 10px;
        bottom: 5px;
        color: #fff;
        z-index: 1001;
      }
      .api_page_text {
        position: absolute;
        width: 100%;
        bottom: 0;
        left: 0;
        z-index: 1000;
        background: rgba(0, 0, 0, 0.2);
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
      }
      .content .api_banner_info {
        font-size: 14px;
        width: 75%;
        height: 30px;
        padding-left: 5px;
        line-height: 30px;
        color: #fff;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      /*一行两张*/
      .img-atls {
        padding: 15px 0;
        display: -webkit-flex;
        display: flex;
        justify-content: space-between;
        -webkit-justify-content: space-between;
        flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        align-items: center;
      }
      .img-atls li {
        width: 47%;
        height: 100px;
        margin-bottom: 10px;
      }
      .img-atls img {
        width: 100%;
        height: 100%;
        border-radius: 5px;
        object-fit: cover;
      }

      .col-file .img-atls3 {
        display: flex;
        flex-wrap: wrap;
      }

      /*.col-file .img-atls3 li:first-child {
        margin-left: 0
      }*/

      .col-file .img-atls3 li {
        width: 31%;
        height: 100px;
        border-radius: 5px;
        margin: 5px 0 5px 7px;
      }

      .col-file .img-atls3 li img {
        width: 100%;
        height: 100%;
        display: block;
        border-radius: 5px;
        object-fit: cover;
      }
      /*文件*/
      .file-item {
        padding: 15px;
        display: -webkit-flex;
        display: flex;
        justify-content: flex-start;
        -webkit-justify-content: flex-start;
        flex-wrap: nowrap;
        -webkit-flex-wrap: nowrap;
        align-items: center;
        font-size: 14px;
        position: relative;
      }
      .file-item:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background: #ecf0f1;
      }
      .file-item:last-child:after {
        height: 0;
      }


      .file-item img {
        width: 45px;
        height: 45px;
        border-radius: 45px;
        margin-right: 15px;
        /*object-fit: contain;*/
        border-radius: 0;
      }
      .file-info {
        min-width: 0;
        width: 100%;
      }
      .file-info p {
        font-weight: 400;
        font-size: 14px;
        width: auto;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-wrap: normal;
        word-break: break-all;
        color: #333;
      }
      .file-info span {
        font-size: 12px;
        color: #999;
      }
      /*链接*/
      .file-info .link-title {
        width: 80%;
      }
      .more {
        position: absolute;
        top: 25px;
        right: 10px;
        width: 12px;
        height: 12px;
        background: url('../../image/more.png') center no-repeat;
        background-size: cover;
      }
      /*一行两项*/
      .link-items {
        display: -webkit-flex;
        display: flex;
        justify-content: flex-start;
        -webkit-justify-content: flex-start;
        flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        align-items: center;
      }
      .link-item {
        min-width: 0;
        width: 50%;
        padding: 15px 10px;
        display: -webkit-flex;
        display: flex;
        justify-content: flex-start;
        -webkit-justify-content: flex-start;
        flex-wrap: nowrap;
        -webkit-flex-wrap: nowrap;
        align-items: center;
        position: relative;
      }
      .link-item img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-right: 10px;
      }
      .link-item span {
        font-weight: 400;
        font-size: 14px;
        width: auto;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-wrap: normal;
        word-break: break-all;
      }
      .link-item:nth-child(odd):before {
        content: '';
        position: absolute;
        top: 15px;
        right: 0;
        width: 1px;
        height: 50px;
        background: #ecf0f1;
      }
      /*一行三项*/
      .type3 {
        display: -webkit-flex;
        display: flex;
        justify-content: flex-start;
        -webkit-justify-content: flex-start;
        flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        align-items: center;
        padding: 15px 0;
      }
      .type3 li {
        width: 33.3333333333333%;
        text-align: center;
        font-size: 14px;
        color: #333;
        margin-bottom: 10px;
      }
      .type3 img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin: auto;
        margin-bottom: 10px;
      }
      .type3 p {
        font-weight: 400;
        font-size: 14px;
        width: auto;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-wrap: normal;
        word-break: break-all;
        padding: 0 10px;
        color: #333;
        text-align: center;
      }
      /*一行四项*/
      .col .type4 li {
        width: 25%;
      }
      /*视频*/
      .col video {
        width: 100%;
        height: 400px;
      }
      /*铭牌*/
      .nameplate-li {
        display: -webkit-flex;
        display: flex;
        justify-content: flex-start;
        -webkit-justify-content: flex-start;
        flex-wrap: nowrap;
        -webkit-flex-wrap: nowrap;
        padding: 10px 0;
        font-size: 14px;
        position: relative;
      }
      .nameplate-li p {
        width: 30%;
      }
      .nameplate-li p:last-child {
        width: 70%;
      }
      .border {
        color: #999;
      }
      .border:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background: #ecf0f1;
      }
      .img-tilte {
        margin-top: 10px;
        line-height: 1.8;
      }
      .img-tilte span {
        display: inline;
      }
      .text span {
        display: inline;
      }
      /*添加记录*/
      .add-recode {
        width: 100%;
        position: fixed;
        bottom: 0;
        left: 0;
        padding: 20px 0;
        background: #009fe8;
        color: #fff;
        font-size: 18px;
        z-index: 900;
      }
      .module-box {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.4);
        z-index: 1000;
        transition: 0.1s;
      }
      .recode-content {
        position: absolute;
        bottom: 0;
        left: 2%;
        width: 96%;
        height: 345px;
        z-index: 999;
        transition: 0.1s;
      }
      .recode-content p {
        background: #009fe8;
        padding: 15px 0;
        text-align: center;
        color: #fff;
        font-size: 15px;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
      }
      .recode-itmes {
        background: #fff;
        height: 230px;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        padding-left: 10px;
        overflow-y: scroll;
      }
      .recode-itmes::-webkit-scrollbar {
        display: none;
      }
      .recode-itme {
        padding: 15px 0;
        color: #333;
        font-size: 14px;
        position: relative;
      }
      .recode-itme:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background: #ecf0f1;
      }
      .recode-itme span {
        display: block;
        width: 80%;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
      .recode-itme i {
        position: absolute;
        top: 16px;
        right: 10px;
        width: 12px;
        height: 12px;
        background: url('../../image/more.png') center no-repeat;
        background-size: cover;
      }
      .close-recode {
        display: block;
        padding: 15px 0;
        text-align: center;
        color: #333;
        border-radius: 8px;
        background: #fff;
        margin-top: 8px;
        font-size: 16px;
      }
      /*浏览记录*/
      .browse-items {
        display: -webkit-flex;
        display: flex;
        justify-content: flex-start;
        -webkit-justify-content: flex-start;
        flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        align-items: center;
      }
      .browse-info {
        padding-top: 15px;
      }
      .browse-item {
        width: 20%;
        font-size: 14px;
        color: #333;
        text-align: center;
        margin-bottom: 10px;
      }
      .browse-item img {
        width: 100%;
        border-radius: 50%;
        object-fit: cover;
        margin: auto;
        margin-bottom: 5px;
      }
      .browse-item p {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        min-width: 0;
      }
      .browse-item span {
        display: block;
        color: #fff;
        /*background: red;*/
        text-align: center;
        margin: auto;
        margin-bottom: 9px;
        border-radius: 50%;
      }
      /*浏览弹出框*/
      .modular {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        z-index: 1000;
      }
      .box {
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        background: #fff;
        position: absolute;
        top: -10%;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        width: 270px;
        height: 220px;
        z-index: 200;
        padding: 20px 10px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
      }
      .header-img {
        text-align: center;
      }
      .header-img img {
        width: 60px;
        height: 60px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        margin: auto;
      }
      .header-img p {
        text-align: center;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
      }
      .header-img {
        margin-bottom: 10px;
      }
      .personal-info p {
        padding: 5px 0;
        text-align: center;
        font-size: 14px;
        color: #333;
      }
      .personal-info .times {
        color: #727472;
      }
      /*记录列表*/
      .recode-wraps {
        width: 95%;
        border: 1px dashed #ecf0f1;
        margin: auto;
        margin-top: 10px;
        border-radius: 5px;
        padding-bottom: 5px;
      }
      .time {
        background: #31a5ff;
        padding: 5px 10px;
        font-size: 14px;
        display: inline-block;
        color: #fff;
        border-radius: 10px;
        position: relative;
        margin-bottom: 5px;
      }
      .name {
        color: #000;
        font-size: 14px;
        /*font-weight: bold;*/
        line-height: 1.6;
      }
      .main {
        padding-left: 50px;
        position: relative;
        padding-bottom: 10px;
      }
      .main:after {
        content: '';
        position: absolute;
        top: 0;
        left: 30px;
        width: 2px;
        background: #31a5ff;
        height: 100%;
      }
      .main:before {
        content: '';
        position: absolute;
        top: 5px;
        left: 23px;
        width: 15px;
        background: #31a5ff;
        height: 15px;
        border-radius: 50%;
      }
      /*三角形*/
      .Triangle {
        position: absolute;
        top: 5px;
        left: -14px;
        width: 0;
        height: 0;
        border-width: 8px;
        border-style: solid;
        border-color: transparent #31a5ff transparent transparent;
        transform: rotate(360deg);
      }
      .recode-img {
        display: inline-block;
        width: 38px;
        height: 46px;
        background: url('../../icon/recode.png') center no-repeat;
        background-size: contain;
        position: relative;
        left: 12px;
        top: 9px;
      }
      .recodeTitle {
        display: block;
        margin-top: 3px;
      }
      .state1 {
        padding-left: 50px;
        position: relative;
      }
      .stop {
        position: absolute;
        top: 6px;
        left: 23px;
        width: 15px;
        height: 15px;
        background: url('../../icon/stop.png') center no-repeat;
        background-size: contain;
        z-index: 800;
      }
      .state1:after {
        content: '';
        position: absolute;
        top: -2px;
        left: 30px;
        width: 2px;
        background: #31a5ff;
        height: 10px;
      }
      .recode-more {
        padding: 20px;
        text-align: center;
      }
      /*点击浏览图片*/
      .gallery {
        display: none;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: #000000;
        z-index: 10000;
      }
      .gallery-img {
        position: absolute;
        top: 30px;
        right: 0;
        bottom: 30px;
        left: 0;
        background: center center no-repeat;
        background-size: contain;
      }
      /*echarts*/
      .left {
        position: relative;
        width: 100%;
        height: 35px;
        margin-bottom: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: nowrap;
        padding-left: ;
      }
      .left input {
        flex: 1;
        height: 35px;
        border: 1px solid #ccc;
        padding: 0 20px 0 10px;
        outline: none;
        background: #fff;
        border-radius: 3px;
      }
      .left #radioSelect {
        flex: 1;
        height: 35px;
        line-height: 34px;
        border: 1px solid #ccc;
        padding: 0 20px 0 10px;
        background: #fff;
        border-radius: 3px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .left span {
        flex: 0 0 80px;
      }
      .Echartsmain {
        text-align: center;
        width: 100%;
      }
      .icos {
        position: absolute;
        top: 10px;
        right: 8px;
        width: 18px;
        height: 13px;
        background: url(../../icon/ico.png) no-repeat;
        background-size: cover;
      }
      .btnSelect {
        text-align: center;
        padding-bottom: 20px;
      }
      .btnSelect button {
        height: 35px;
        line-height: 34px;
        width: 80px;
        border: 1px solid #009fe8;
        background: #009fe8;
        color: #fff;
        border-radius: 3px;
      }
      /*部分记录列表*/
      /*name*/
      .date-lists {
        width: 100%;
        padding: 10px 0;
        overflow-x: scroll;
        white-space: nowrap;
        box-sizing: border-box;
      }
      .date-lists::-webkit-scrollbar {
        display: none;
      }
      .date-wrap {
        width: 100%;
        box-sizing: border-box;
        background: #fff;
        position: relative;
      }
      .date-wrap:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background: #f0f0f0;
      }
      .date-lists li {
        margin-right: 10px;
        border: 1px solid #f0f0f0;
        padding: 0 10px;
        height: 32px;
        line-height: 31px;
        border-radius: 5px;
        color: #ccc;
        display: inline-block;
      }
      .date-lists .active {
        background: #009fe8;
        color: #fff;
      }
      .no_data {
        text-align: center;
        color: #999;
        font-size: 15px;
        padding: 20px 0;
      }
      /*弹出*/
      .module-box1 {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: rgba(0, 159, 232, 0.9);
      }
      .module-box1:after {
        content: '点击输入密码查看';
        width: 100%;
        height: 23px;
        position: absolute;
        top: -45px;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        color: #fff;
        font-size: 16px;
        text-align: center;
      }
      .module-box1:before {
        content: '';
        width: 50px;
        height: 50px;
        position: absolute;
        top: 45px;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        background: url('../../icon/key.png') no-repeat;
        background-size: cover;
      }
      /*工资密码*/
      .wages-layout {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9999;
      }
      .wages {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 300px;
        height: 200px;
        margin: auto;
        background: #fff;
        border-radius: 5px;
        padding: 10px;
      }
      .wages-title {
        text-align: center;
        font-size: 18px;
      }
      .wages-wrap {
        padding: 15px 10px 0 10px;
        box-sizing: border-box;
      }
      .wages-wrap input {
        width: 100%;
        height: 35px;
        border: 1px solid #e8e8e8;
        border-radius: 5px;
        padding-left: 10px;
        box-sizing: border-box;
      }
      .btn-term {
        text-align: center;
        margin-top: 20px;
        position: absolute;
        bottom: 10px;
        left: 0;
        width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
      }
      .btn-term button {
        width: 49%;
        padding: 10px 0;
        text-align: center;
        border-radius: 3px;
      }
      .btn-close {
        border: 1px solid #e8e8e8;
      }
      .btn-close:active {
        background: #e8e8e8;
      }
      .btn-confirm:active {
        background: rgba(0, 159, 232, 0.7);
        border: 1px solid rgba(0, 159, 232, 0.7);
      }
      .btn-confirm {
        margin-top: 10px;
        border: 1px solid #009fe8;
        background: #009fe8;
        color: #fff;
      }
      .Tips {
        color: #6c6f74;
        font-size: 12px;
        padding: 0 10px;
        margin-top: 20px;
      }

      /*图片上传  图集上传*/

      .container-Load_QrCode {
        position: relative;
      }

      .fileToUpload {
        position: absolute;
        overflow: hidden;
        right: 0;
        top: 0;
        opacity: 0;
      }

      .camera-area,
      .camera-area-imgthree {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .camera-area img,
      .camera-area-imgthree img,
      .camera-area-link img{
        width: 35px;
        height: 35px;
      }
      /* 新增链接 */

      .form-data {
        text-align: left;
        /*height: 200px;*/
      }
      .add-link-form-item {
        padding: 5px 0
      }

      .add-link-form-item label {
        text-align: left;
      }

      .icon-img-list img {
        width: 100px;
        height: 100px;
        display: none;
        border-radius: 100px;
        padding-top: 5px;
      }

    </style>
  </head>
  <body>
    <!--  b直接显示的wrap-->
    <div class="recode-warp" style="display: none;">
      <div class="recode_contents">
        <div class="template_my_record">
          <p class="template_name"></p>
          <p class="my_record" onclick="my_recode()">我的记录</p>
        </div>
        <div id="position_warp"></div>
        <div id="recode_content"></div>
      </div>
    </div>
    <!--  a类型 1.底部，2.图标，3.列表-->
    <div class="a-recodeWrap">
      <div class="a-recodeWrap3" id="add_recodes_list"></div>
      <div class="a-recodeWrap2" id="add_recodes_icon"></div>
    </div>
    <!--二维码详情-->
    <div
      class="qrcode-wrap"
      id="qrcode_wrap"
      style="margin-bottom: 60px;"
    ></div>
    <!--浏览信息弹出框-->
    <div class="modular hide animated" id="myModal">
      <div class="box">
        <div class="header-img">
          <!--<img src="http://jiewei-php-files.oss-cn-qingdao.aliyuncs.com/avatar/avatar_15038412.png" alt="">-->
        </div>
        <div class="personal-info">
          <p class="name"></p>
          <p class="dep"></p>
          <p class="times"></p>
        </div>
      </div>
    </div>
    <!--    点击浏览图片-->
    <div class="gallery">
      <span class="gallery-img"></span>
    </div>
    <!--    模块权限验证-->
    <div class="wages-layout" id="wages-layout" style="display: none;">
        <div class="wages">
            <h3 class="wages-title">模块权限验证</h3>
            <div class="wages-wrap">
                <input type="password" placeholder="请输入模块密码" class="password">
                <p class="Tips-p" style="color:red;font-size:12px;margin-top:5px;"></p>
            </div>
            <div class="Tips">
                <span>友情提示：该密码为用户模块密码。</span>
            </div>
            <div class="btn-term">
                <button type="button" name="button" class="btn-close" onclick="closeWages()">取消</button>
                <button type="button" name="button" class="btn-confirm" onclick="Jurisdiction()">确认</button>
            </div>
        </div>
    </div>
  </body>
</html>
<script type="text/template" id="addRecodeTemplate">
  <!-- 是否开启定位 -->
  {{?it.position == true}}
    {{=getLonLat(false)}}
  {{?}}
  <!-- 状态-->
  {{?it.recordStatusList != "" && it.recordStatusList != null}}
    {{ for(var i= 0;i<it.recordStatusList.length;i++) { }}
      <div class="modula state">
          <label class="title isOptionals" isOptional="true">
              {{=it.recordStatusList[i].statusContent}}:
              <span>*</span>
          </label>
          <div class="text-input input-recode">
              <input type="text" placeholder="请选择{{=it.recordStatusList[i].statusContent}}" statusId="{{=it.recordStatusList[i].statusId}}" class="isOptional input moreStatusA" id="moreStatus{{=it.recordStatusList[i].id}}" readonly>
              <i class="ico"></i>
          </div>
      </div>
      {{?it.recordStatusList[i].choseType === 'checkbox'}}
        {{=statusCheckbox('moreStatus'+it.recordStatusList[i].id,it.recordStatusList[i].statusItemList,it.recordStatusList[i].statusContent)}}
      {{??}}
        {{=statusRadio('moreStatus'+it.recordStatusList[i].id,it.recordStatusList[i].statusItemList,it.recordStatusList[i].statusContent)}}
      {{?}}
    {{ } }}
  {{??it.statusName !=""}}
    <div class="modula state">
        <label class="title isOptionals" isOptional="true">
            {{=it.statusName}}:
            <span>*</span>
        </label>
        <div class="text-input input-recode">
            <input type="text" placeholder="请输入{{=it.statusName}}" class="isOptional input statusContent">
        </div>
    </div>
  {{?}}
  <!-- 记录项 -->
  {{ for(var key in it.inputList) { }}
    <div class="row_col">
      <label style="display:{{=key==""?'none':'block'}}">{{=key}}</label>
      <div class="content" style="padding-top:15px;">
        {{ for(var i=0;i<it.inputList[key].length;i++) { }}
            {{?it.inputList[key][i].inputType === 'text'}}
              <div class="modula text">
                  <label class="title isOptionals" isOptional="{{=it.inputList[key][i].isOptional}}">
                      <span style="display:{{=it.inputList[key][i].isOptional== true?'inline-block':'none'}}">*</span>
                      {{=it.inputList[key][i].inputName}}：
                  </label>
                  <div class="text-input input-recode">
                      <textarea oninput="Oninput(this)" placeholder="请输入{{=it.inputList[key][i].inputName}}" style="padding: 10px 15px" recordTrem-id="{{=it.inputList[key][i].id}}" class="isOptional input recordTrems textarea"></textarea>
                  </div>
              </div>
            {{??it.inputList[key][i].inputType === 'date_auto'}}
              <div class="modula text">
                  <label class="title isOptionals" isOptional="{{=it.inputList[key][i].isOptional}}">
                      <span style="display:{{=it.inputList[key][i].isOptional== true?'inline-block':'none'}}">*</span>
                      {{=it.inputList[key][i].inputName}}：
                  </label>
                  <div class="text-input input-recode">
                      <input type="text" readonly value="{{=getYearMonthDate()}}" class="isOptional input recordTrems" recordTrem-id="{{=it.inputList[key][i].id}}">
                  </div>
              </div>
            {{??it.inputList[key][i].inputType === 'dateTime_auto'}}
              <div class="modula text">
                  <label class="title isOptionals" isOptional="{{=it.inputList[key][i].isOptional}}">
                      <span style="display:{{=it.inputList[key][i].isOptional== true?'inline-block':'none'}}">*</span>
                      {{=it.inputList[key][i].inputName}}：
                  </label>
                  <div class="text-input input-recode">
                      <input type="text" readonly value="{{=getYearMonthDateTime()}}" class="isOptional input recordTrems" recordTrem-id="{{=it.inputList[key][i].id}}">
                  </div>
              </div>
            {{??it.inputList[key][i].inputType === 'text_phone'}}
              <div class="modula text">
                  <label class="title isOptionals" isOptional="{{=it.inputList[key][i].isOptional}}">
                      <span style="display:{{=it.inputList[key][i].isOptional== true?'inline-block':'none'}}">*</span>
                      {{=it.inputList[key][i].inputName}}：
                  </label>
                  <div class="text-input input-recode">
                      <input type="tel" placeholder="请填写手机号" value="{{=JSON.parse($api.getStorage('data')).data.user.mobile == null?'':JSON.parse($api.getStorage('data')).data.user.mobile}}" class="isOptional input recordTrems" recordTrem-id="{{=it.inputList[key][i].id}}">
                  </div>
              </div>
            {{??it.inputList[key][i].inputType === 'text_id'}}
              <div class="modula text">
                  <label class="title isOptionals" isOptional="{{=it.inputList[key][i].isOptional}}">
                      <span style="display:{{=it.inputList[key][i].isOptional== true?'inline-block':'none'}}">*</span>
                      {{=it.inputList[key][i].inputName}}：
                  </label>
                  <div class="text-input input-recode">
                      <input type="text" placeholder="请填写身份证号"  value="{{=JSON.parse($api.getStorage('data')).data.user.identity_card == null?'':JSON.parse($api.getStorage('data')).data.user.identity_card }}" class="isOptional input recordTrems" recordTrem-id="{{=it.inputList[key][i].id}}">
                  </div>
              </div>
            {{??it.inputList[key][i].inputType === 'company_auto'}}
              <div class="modula text">
                  <label class="title isOptionals" isOptional="{{=it.inputList[key][i].isOptional}}">
                      <span style="display:{{=it.inputList[key][i].isOptional== true?'inline-block':'none'}}">*</span>
                      {{=it.inputList[key][i].inputName}}：
                  </label>
                  <div class="text-input input-recode">
                      <input type="text" readonly value="{{=JSON.parse($api.getStorage('data')).data.user.section}}" class="isOptional input recordTrems" recordTrem-id="{{=it.inputList[key][i].id}}">
                  </div>
              </div>
            {{??it.inputList[key][i].inputType === 'dateTime'}}
              <div class="modula date-time">
                  <label class="title isOptionals" isOptional="{{=it.inputList[key][i].isOptional}}">
                      <span style="display:{{=it.inputList[key][i].isOptional== true?'inline-block':'none'}}">*</span>
                      {{=it.inputList[key][i].inputName}}：
                  </label>
                  <div class="text-input input-recode">
                      <input type="datetime-local" data-datetime="true" class="isOptional input recordTrems" recordTrem-id="{{=it.inputList[key][i].id}}">
                  </div>
              </div>
            {{??it.inputList[key][i].inputType === 'date'}}
              <div class="modula date">
                  <label class="title isOptionals" isOptional="{{=it.inputList[key][i].isOptional}}">
                      <span style="display:{{=it.inputList[key][i].isOptional== true?'inline-block':'none'}}">*</span>
                      {{=it.inputList[key][i].inputName}}：
                  </label>
                  <div class="text-input input-recode">
                      <input type="date" class="isOptional input recordTrems" recordTrem-id="{{=it.inputList[key][i].id}}">
                  </div>
              </div>
            {{??it.inputList[key][i].inputType === 'file'}}
              <div class="modula file-warp">
                  <label class="title" isOptional="{{=it.inputList[key][i].isOptional}}">
                      <span style="display:{{=it.inputList[key][i].isOptional== true?'inline-block':'none'}}">*</span>
                      {{=it.inputList[key][i].inputName}}：
                  </label>
                  <div class="text-input input-recode file-items-add fileList_warp" recordTrem-id="{{=it.inputList[key][i].id}}">
                     <div class="upload file-width" onclick="getFile(this,'file')">
                         <img src="../../image/upload.png" alt="">
                     </div>
                  </div>
              </div>
            {{??it.inputList[key][i].inputType === 'mp3'}}
              <div class="modula audio-warp">
                  <h4 class="title" isOptional="{{=it.inputList[key][i].isOptional}}">
                    <span style="display:{{=it.inputList[key][i].isOptional== true?'inline-block':'none'}}">*</span>
                    {{=it.inputList[key][i].inputName}}：
                  </h4>
                  <div class="text-input input-recode mp3_wrap" recordTrem-id="{{=it.inputList[key][i].id}}">
                      <div class="upload-audio">
                        <span class="upload-btn" onclick="getFile(this,'mp3')"></span>
                        <button type="button" class="del-btn hide" onclick="delAudio(this)">删除</button>
                      </div>
                      <div class="audio-content">

                      </div>
                  </div>
              </div>
            {{??it.inputList[key][i].inputType === 'number'}}
              <div class="modula number">
                  <label class="title isOptionals" isOptional="{{=it.inputList[key][i].isOptional}}">
                    <span style="display:{{=it.inputList[key][i].isOptional== true?'inline-block':'none'}}">*</span>
                    {{=it.inputList[key][i].inputName}}：
                  </label>
                  <div class="text-input input-recode">
                      <input type="number" placeholder="请输入{{=it.inputList[key][i].inputName}}" recordTrem-id="{{=it.inputList[key][i].id}}" class="isOptional input recordTrems">
                  </div>
              </div>
            {{??it.inputList[key][i].inputType === 'photo'}}
              <div class="modula img-warp">
                  <label class="title" isOptional="{{=it.inputList[key][i].isOptional}}">
                      <span style="display:{{=it.inputList[key][i].isOptional== true?'inline-block':'none'}}">*</span>
                      {{=it.inputList[key][i].inputName}}：
                  </label>
                  <div class="text-input input-recode file-items-add img-items photoFile" isOptional="{{=it.inputList[key][i].isOptional}}" recordTrem-id="{{=it.inputList[key][i].id}}">
                      <div class="upload file-width" onclick="uploadImg('{{=it.inputList[key][i].businessType}}',this)">
                          <img src="../../image/upload.png" alt="">
                      </div>
                  </div>
              </div>
            {{??it.inputList[key][i].inputType === 'radio'}}
              <div class="modula radio">
                  <label class="title isOptionals" isOptional="{{=it.inputList[key][i].isOptional}}">
                    <span style="display:{{=it.inputList[key][i].isOptional== true?'inline-block':'none'}}">*</span>
                    {{=it.inputList[key][i].inputName}}：
                  </label>
                  <div class="text-input input-recode">
                      <input type="text" placeholder="请选择" class="isOptional input changeInput" recordTrem-id="{{=it.inputList[key][i].id}}" id="radio{{=i}}" readonly>
                      <i class="ico"></i>
                  </div>
              </div>
              {{=radioRecord('radio'+i,it.inputList[key][i].inputItemList)}}
            {{??it.inputList[key][i].inputType === 'video'}}
              <div class="modula vedio-warp">
                  <h4 class="title isOptionals" isOptional="{{=it.inputList[key][i].isOptional}}">
                    <span style="display:{{=it.inputList[key][i].isOptional== true?'inline-block':'none'}}">*</span>
                    {{=it.inputList[key][i].inputName}}：
                  </h4>
                  <div class="text-input input-recode mp4_wrap" recordTrem-id="{{=it.inputList[key][i].id}}">
                      <div class="upload-audio">
                          <span class="upload-btn1" onclick="getFile(this,'mp4')"></span>
                          <button type="button" class="del-btn hide" onclick="delVedio(this)">删除</button>
                      </div>
                      <div class="audio-content">

                      </div>
                  </div>
              </div>
            {{??it.inputList[key][i].inputType === 'checkbox'}}
              <div class="modula checkbox">
                  <label class="title isOptionals" isOptional="{{=it.inputList[key][i].isOptional}}">
                    <span style="display:{{=it.inputList[key][i].isOptional== true?'inline-block':'none'}}">*</span>
                    {{=it.inputList[key][i].inputName}}：
                  </label>
                  <div class="text-input input-recode">
                      <input type="text" placeholder="请选择" class="isOptional input changeInput" recordTrem-id="{{=it.inputList[key][i].id}}"  id="checkbox{{=i}}" readonly>
                      <i class="ico"></i>
                  </div>
              </div>
              {{=checkboxRecord('checkbox'+i,it.inputList[key][i].inputItemList)}}
            {{?}}
        {{ } }}
      </div>
    </div>
  {{ } }}
  <!-- 检查项 -->
  {{?it.checkItemList != ""}}
    {{ for(var i= 0;i<it.checkItemList.length;i++) { }}
      <div class="modula checkbox-term">
        <label class="title" style="margin-bottom: 0">
            {{=it.checkItemList[i].group.groupName}}：
        </label>
        <div class="radio-wrap">
          {{?it.checkItemList[i].group.checkType == 'radio'}}
            {{ for(var t=0;t<it.checkItemList[i].checkItemList.length;t++) { }}
              <label>
                <input class="aui-radio checked" type="radio" value="{{=it.checkItemList[i].checkItemList[t].id}}" name="{{=it.checkItemList[i].group.groupName}}">
                {{=it.checkItemList[i].checkItemList[t].itemValue}}
              </label>
            {{ } }}
          {{??}}
            {{ for(var t=0;t<it.checkItemList[i].checkItemList.length;t++) { }}
              <label>
                <input class="aui-checkbox checked" type="checkbox" value="{{=it.checkItemList[i].checkItemList[t].id}}" name="{{=it.checkItemList[i].group.groupName}}">
                {{=it.checkItemList[i].checkItemList[t].itemValue}}
              </label>
            {{ } }}
          {{?}}
        </div>
      </div>
    {{ } }}
  {{?}}
  <button type="button" name="button" class="submit-btn" onclick="submitRecode()">提交记录</button>
</script>
<script type="text/template" id="mapTemplate">
  <div class="position flex-space-between">
      <div class="map-name flex-start">
        <i class="ico-map"></i>
        <div class="names">
          <p class="map1">{{=it.address}}</p>
        </div>
      </div>
      <p class="again" onclick="getLonLat(true)">重新定位</p>
  </div>
</script>
<script type="text/template" id="templateQrcode">
  {{~it:value}}
    <!-- 文本 -->
        {{?value.pageRelation.businessType === 'TEXT'}}
          <div class="col text">
            <label class="{{=value.textVo.title==null?'hide':(value.textVo.title == ""?'hide':'')}}">{{=value.textVo.title}}</label>
            <div class="content" style="line-height:1.8">{{=base64.decode(value.textVo.dataContent)}}</div>
            {{?value.pageRelation.permissionType == '3'}}
              <div class="module-box1" onclick="openWages(this,'{{=value.pageRelation.permissionValue}}')"></div>
            {{?}}
          </div>
          <div class="line"></div>
        {{??value.pageRelation.businessType === 'IMAGE_TEXT'}}
          <div class="col">
            <label class="{{=value.imageText.title==null?'hide':(value.imageText.title == ""?'hide':'')}}">{{=value.imageText.title}}</label>
            <div class="content" style="{{=value.imageText.imageUrl==""?'padding-top:0':''}}">
              <img src="{{=value.imageText.imageUrl}}" alt="">
              <div class="img-tilte" style="{{=value.imageText.imageUrl==""?'margin-top:0':''}}">{{=base64.decode(value.imageText.dataContent)}}</div>
            </div>
            {{?value.pageRelation.permissionType == '3'}}
              <div class="module-box1" onclick="openWages(this,'{{=value.pageRelation.permissionValue}}')"></div>
            {{?}}
          </div>
          <div class="line"></div>
        {{??value.pageRelation.businessType === 'PICTURE' && value.pictureList!="" && value.pictureList!=null}}
          {{?value.pictureList[0].imageType == 10}}
            <div class="col">
              <label style="display:{{=value.pictureList[0].title==null?'none':(value.pictureList[0].title == ""?'none':'block')}}">{{=value.pictureList[0].title}}</label>
              <div class="content">
                <div class="swiper-container">
                  <div class="swiper-wrapper" id="age_list">
                    {{ for(var i = 0;i<value.pictureList.length;i++) { }}
                      <div class="swiper-slide" onclick="openLink('{{=value.pictureList[i].imageLinking}}', '{{=value.pictureList[i].imageUrl}}','{{=value.pictureList[i].imageTitle == ""?'':(value.pictureList[i].imageTitle==null?'':(value.pictureList[i].imageTitle == 'null'?'':value.pictureList[i].imageTitle))}}')">
                        <a href="javascript:;" style="display:block">
                          <img src="{{=value.pictureList[i].imageUrl}}" style="display:block;width:100%" alt="">
                        </a>
                        <div class="api_page_text">
                          <p class="api_banner_info">{{=value.pictureList[i].imageTitle == ""?'':(value.pictureList[i].imageTitle==null?'':(value.pictureList[i].imageTitle == 'null'?'':value.pictureList[i].imageTitle))}}</p>
                        </div>
                      </div>
                    {{ } }}
                  </div>
                  <div class="swiper-pagination swiper-pagination-fraction" id="api_page"></div>
                </div>
              </div>
              {{?value.pageRelation.permissionType == '3'}}
                <div class="module-box1" onclick="openWages(this,'{{=value.pageRelation.permissionValue}}')"></div>
              {{?}}
            </div>
            <div class="line"></div>
          {{??value.pictureList[0].imageType == 11}}
          <div class="col-file">
              <div class="file-title-add">
                <label style="display:{{=value.pictureList[0].title==null?'none':(value.pictureList[0].title == ""?'none':'block')}}">{{=value.pictureList[0].title}}</label>
                {{? value.mantFlag}}
                  <div class="container-Load_QrCode" style="display:{{=value.pictureList[0].title==null?'none':(value.pictureList[0].title == ""?'none':'block')}}">
                      <div
                        onclick="qrCodeListUploadImg('{{=value.pageRelation.businessId}}','{{=value.pictureList[0].title}}','{{=value.pictureList[0].imageType}}','{{=value.pictureList.length}}')"
                        class="camera-area-imgthree"
                        >
                        <img src="../../image/shangchuan.png" alt="">
                      </div>
                  </div>
                {{?}}
              </div>
              <ul class="img-atls">
                {{ for(var i = 0;i<value.pictureList.length;i++) { }}
                    <li onclick="openLink('{{=value.pictureList[i].imageLinking}}', '{{=value.pictureList[i].imageUrl}}','{{=value.pictureList[i].imageTitle}}')">
                      <img src="{{=value.pictureList[i].imageUrl}}" alt="">
                    </li>
                {{ } }}
              </ul>
              {{?value.pageRelation.permissionType == '3'}}
                <div class="module-box1" onclick="openWages(this,'{{=value.pageRelation.permissionValue}}')"></div>
              {{?}}
          </div>
            <div class="line"></div>
          {{??value.pictureList[0].imageType == 12}}
            <div class="col-file">
                <div class="file-title-add">
                  <label style="display:{{=value.pictureList[0].title==null?'none':(value.pictureList[0].title == ""?'none':'block')}}">{{=value.pictureList[0].title}}</label>
                  {{? value.mantFlag}}
                    <div class="container-Load_QrCode" style="display:{{=value.pictureList[0].title==null?'none':(value.pictureList[0].title == ""?'none':'block')}}">
                        <div
                          class="camera-area-imgthree"
                          onclick="qrCodeListUploadImg('{{=value.pageRelation.businessId}}','{{=value.pictureList[0].title}}','{{=value.pictureList[0].imageType}}','{{=value.pictureList.length}}')">
                          <img src="../../image/shangchuan.png" alt="">
                        </div>
                    </div>
                  {{?}}
                </div>
                <ul class="img-atls3">
                  {{ for(var i = 0;i<value.pictureList.length;i++) { }}
                      <li onclick="openLink('{{=value.pictureList[i].imageLinking}}', '{{=value.pictureList[i].imageUrl}}','{{=value.pictureList[i].imageTitle}}')">
                        <img src="{{=value.pictureList[i].imageUrl}}" alt="">
                      </li>
                  {{ } }}
                </ul>
                {{?value.pageRelation.permissionType == '3'}}
                  <div class="module-box1" onclick="openWages(this,'{{=value.pageRelation.permissionValue}}')"></div>
                {{?}}
            </div>
            <div class="line"></div>
          {{?}}
        <!-- **** -->
        {{??value.pageRelation.businessType === 'VIDEO' && value.videoList !="" && value.videoList !=null}}
          <div class="col">
            <div class="content">
              <video controls="" x5-video-player-type="h5" poster="" loop="">
                <source src="{{=value.videoList[0].videoUrl}}" type="video/mp4">
              </video>
            </div>
            {{?value.pageRelation.permissionType == '3'}}
              <div class="module-box1" onclick="openWages(this,'{{=value.pageRelation.permissionValue}}')"></div>
            {{?}}
          </div>
          <div class="line"></div>
        {{??value.pageRelation.businessType === 'LINKS' && value.linksList != "" && value.linksList != null}}
          {{?value.linksList[0].types ==11}}
            <div class="col-file">
              <div class="file-title-add">
                <label style="display:{{=value.linksList[0].title==null?'none':(value.linksList[0].title == ""?'none':'block')}}">{{=value.linksList[0].title}}</label>
                {{? value.mantFlag}}
                  <div
                    style="display:{{=value.linksList[0].title==null?'none':(value.linksList[0].title == ""?'none':'block')}}"
                    class="camera-area-link"
                    onclick="qrCodeListUploadLink('{{=value.pageRelation.businessId}}','{{=value.linksList[0].title}}','{{=value.linksList[0].types}}','{{=value.linksList.length}}')">
                    <img src="../../image/shangchuan.png" alt="">
                  </div>
                {{?}}
              </div>
              <ul class="file-items">
                {{ for(var i = 0;i<value.linksList.length;i++) { }}
                  <li class="file-item" onclick="openLink('{{=value.linksList[i].linkUrl}}','','{{=value.linksList[i].linkName}}')" style="padding:10px 5px">
                    <!-- style="height:auto;" -->
                    <img src="{{=value.linksList[i].imageUrl=='../../static/images/link.png'?'../../icon/link.png':(value.linksList[i].imageUrl==null?'../../icon/link.png':(value.linksList[i].imageUrl==""?'../../icon/link.png':value.linksList[i].imageUrl))}}"  alt="">
                    <div class="file-info">
                      <p class="link-title">{{=value.linksList[i].linkName}}</p>
                    </div>
                    <i class="more"></i>
                  </li>
                {{ } }}
              </ul>
              {{?value.pageRelation.permissionType == '3'}}
                <div class="module-box1" onclick="openWages(this,'{{=value.pageRelation.permissionValue}}')"></div>
              {{?}}
            </div>
            <div class="line"></div>
          {{??value.linksList[0].types == 12}}
            <div class="col">
              <div class="file-title-add">
                <label style="display:{{=value.linksList[0].title==null?'none':(value.linksList[0].title == ""?'none':'block')}}">{{=value.linksList[0].title}}</label>
                {{? value.mantFlag}}
                  <div
                    style="display:{{=value.linksList[0].title==null?'none':(value.linksList[0].title == ""?'none':'block')}}"
                    class="camera-area-link"
                    onclick="qrCodeListUploadLink('{{=value.pageRelation.businessId}}','{{=value.linksList[0].title}}','{{=value.linksList[0].types}}',,'{{=value.linksList.length}}')">
                    <img src="../../image/shangchuan.png" alt="">
                  </div>
                {{?}}
              </div>
              <ul class="link-items">
                {{ for(var i = 0;i<value.linksList.length;i++) { }}
                  <li class="link-item" onclick="openLink('{{=value.linksList[i].linkUrl}}','','{{=value.linksList[i].linkName}}')">
                    <img src="{{=value.linksList[i].imageUrl=='../../static/images/link.png'?'../../icon/link.png':(value.linksList[i].imageUrl==null?'../../icon/link.png':(value.linksList[i].imageUrl==""?'../../icon/link.png':value.linksList[i].imageUrl))}}" alt="">
                    <span class="link-title">{{=value.linksList[i].linkName}}</span>
                  </li>
                {{ } }}
              </ul>
              {{?value.pageRelation.permissionType == '3'}}
                <div class="module-box1" onclick="openWages(this,'{{=value.pageRelation.permissionValue}}')"></div>
              {{?}}
            </div>
            <div class="line"></div>
          {{??value.linksList[0].types == 13}}
            <div class="col">
              <div class="file-title-add">
                <label style="display:{{=value.linksList[0].title==null?'none':(value.linksList[0].title == ""?'none':'block')}}">{{=value.linksList[0].title}}</label>
                {{? value.mantFlag}}
                  <div
                    style="display:{{=value.linksList[0].title==null?'none':(value.linksList[0].title == ""?'none':'block')}}"
                    class="camera-area-link"
                    onclick="qrCodeListUploadLink('{{=value.pageRelation.businessId}}','{{=value.linksList[0].title}}','{{=value.linksList[0].types}}',,'{{=value.linksList.length}}')">
                    <img src="../../image/shangchuan.png" alt="">
                  </div>
                {{?}}
              </div>
              <ul class="type3">
                {{ for(var i = 0;i<value.linksList.length;i++) { }}
                  <li onclick="openLink('{{=value.linksList[i].linkUrl}}','','{{=value.linksList[i].linkName}}')">
                    <img src="{{=value.linksList[i].imageUrl=='../../static/images/link.png'?'../../icon/link.png':(value.linksList[i].imageUrl==null?'../../icon/link.png':(value.linksList[i].imageUrl==""?'../../icon/link.png':value.linksList[i].imageUrl))}}" alt="">
                    <p>{{=value.linksList[i].linkName}}</p>
                  </li>
                {{ } }}
              </ul>
              {{?value.pageRelation.permissionType == '3'}}
                <div class="module-box1" onclick="openWages(this,'{{=value.pageRelation.permissionValue}}')"></div>
              {{?}}
            </div>
            <div class="line"></div>
          {{??value.linksList[0].types == 14}}
            <div class="col">
              <div class="file-title-add">
                <label style="display:{{=value.linksList[0].title==null?'none':(value.linksList[0].title == ""?'none':'block')}}">{{=value.linksList[0].title}}</label>
                {{? value.mantFlag}}
                  <div
                    style="display:{{=value.linksList[0].title==null?'none':(value.linksList[0].title == ""?'none':'block')}}"
                    class="camera-area-link"
                    onclick="qrCodeListUploadLink('{{=value.pageRelation.businessId}}','{{=value.linksList[0].title}}','{{=value.linksList[0].types}}','{{=value.linksList}}')">
                    <img src="../../image/shangchuan.png" alt="">
                  </div>
                {{?}}
              </div>
              <ul class="type3 type4">
                {{ for(var i= 0;i<value.linksList.length;i++) { }}
                  <li onclick="openLink('{{=value.linksList[i].linkUrl}}','','{{=value.linksList[i].linkName}}')">
                    <img src="{{=value.linksList[i].imageUrl=='../../static/images/link.png'?'../../icon/link.png':(value.linksList[i].imageUrl==null?'../../icon/link.png':(value.linksList[i].imageUrl==""?'../../icon/link.png':value.linksList[i].imageUrl))}}" alt="">
                    <p>{{=value.linksList[i].linkName}}</p>
                  </li>
                {{ } }}
              </ul>
              {{?value.pageRelation.permissionType == '3'}}
                <div class="module-box1" onclick="openWages(this,'{{=value.pageRelation.permissionValue}}')"></div>
              {{?}}
            </div>
            <div class="line"></div>
          {{?}}
          <!-- TODO // 上传文件
          // 浏览手机文件夹,获取文件路径 -->
        {{??value.pageRelation.businessType === 'FILE' && value.fileList !="" && value.fileList != null}}
          <div class="col-file">
            <div class="file-title-add">
              <label style="display:{{=value.fileList[value.fileList.length-1].title==null?'none':(value.fileList[value.fileList.length-1].title == ""?'none':'block')}}">{{=value.fileList[value.fileList.length-1].title}}</label>
              <div class="container-Load_QrCode" style="display:{{=value.fileList[value.fileList.length-1].title==null?'none':(value.fileList[value.fileList.length-1].title == ""?'none':'block')}}">
                  {{? value.mantFlag}}
                    <div
                      class="camera-area"
                      onclick="qrCodeListUpload('{{=value.pageRelation.businessId}}','{{=value.fileList.length}}')">
                      <img src="../../image/shangchuan.png" alt="">
                      <!-- <span>上传</span> -->
                    <input
                      type="file"
                      name=""
                      class="fileToUpload"
                      id=""
                      style="overflow: hidden;"
                    />
                    </div>
                  {{?}}
              </div>
            </div>
            <ul class="file-items file-item-type-ul">
              {{ for(var i = 0;i<value.fileList.length;i++) { }}
                {{?value.fileList[i].fileName.endsWith('doc') || value.fileList[i].fileName.endsWith('docx')}}
                  <li class="file-item file-item-type"  onclick="browseFile('{{=value.fileList[i].filePath}}')">
                    <img src="../../icon/doc.png" alt="" style="width:40px;height:40px;">
                    <div class="file-info">
                      <p>{{=value.fileList[i].fileName}}</p>
                      <span>{{=value.fileList[i].fileSize}}</span>
                    </div>
                  </li>
                {{??value.fileList[i].fileName.endsWith('ppt') || value.fileList[i].fileName.endsWith('ptx')}}
                  <li class="file-item file-item-type" onclick="browseFile('{{=value.fileList[i].filePath}}')">
                    <img src="../../icon/ppt.png" alt="" style="width:40px;height:40px;">
                    <div class="file-info">
                      <p>{{=value.fileList[i].fileName}}</p>
                      <span>{{=value.fileList[i].fileSize}}</span>
                    </div>
                  </li>
                {{??value.fileList[i].fileName.endsWith('pdf')}}
                  <li class="file-item file-item-type" onclick="browseFile('{{=value.fileList[i].filePath}}')">
                    <img src="../../icon/pdf.png" alt="" style="width:40px;height:40px;">
                    <div class="file-info">
                      <p>{{=value.fileList[i].fileName}}</p>
                      <span>{{=value.fileList[i].fileSize}}</span>
                    </div>
                  </li>
                {{??value.fileList[i].fileName.endsWith('zip') || value.fileList[i].fileName.endsWith('rar')}}
                  <li class="file-item file-item-type" onclick="browseFile('{{=value.fileList[i].filePath}}',true)">
                    <img src="../../icon/zip.png" alt="" style="width:40px;height:40px;">
                    <div class="file-info">
                      <p>{{=value.fileList[i].fileName}}</p>
                      <span>{{=value.fileList[i].fileSize}}</span>
                    </div>
                  </li>
                {{??value.fileList[i].fileName.endsWith('xlsx') || value.fileList[i].fileName.endsWith('xls') }}
                  <li class="file-item file-item-type" onclick="browseFile('{{=value.fileList[i].filePath}}')">
                    <img src="../../icon/lsx.png" alt="" style="width:40px;height:40px;">
                    <div class="file-info">
                      <p>{{=value.fileList[i].fileName}}</p>
                      <span>{{=value.fileList[i].fileSize}}</span>
                    </div>
                  </li>
                {{??}}
                  <li class="file-item" onclick="browseFile('{{=value.fileList[i].filePath}}')">
                  <img src="../../icon/OTHER.png" alt="" style="width:40px;height:40px;">
                  <div class="file-info">
                    <p>{{=value.fileList[i].fileName}}</p>
                    <span>{{=value.fileList[i].fileSize}}</span>
                  </div>
                </li>
                {{?}}
              {{ } }}
            </ul>
            {{?value.pageRelation.permissionType == '3'}}
              <div class="module-box1" onclick="openWages(this,'{{=value.pageRelation.permissionValue}}')"></div>
            {{?}}
          </div>
          <div class="line"></div>
        {{??value.pageRelation.businessType === 'EQUIPMENT' && value.equipmentList !="" && value.equipmentList != null}}
        <div class="col" style="margin-bottom:5px">
          <label style="display:{{=value.equipmentList[0].title==null?'none':(value.equipmentList[0].title == ""?'none':'block')}}">{{=value.equipmentList[0].title}}</label>
          <ul class="nameplate">
            <li class="nameplate-li">
              <p>名称</p>
              <p>内容</p>
            </li>
            {{ for(var i = 0;i<value.equipmentList.length;i++) { }}
              <li class="nameplate-li border">
                <p>{{=value.equipmentList[i].paramName}}</p>
                <p>{{=value.equipmentList[i].paramContent}}</p>
              </li>
            {{ } }}
          </ul>
          {{?value.pageRelation.permissionType == '3'}}
            <div class="module-box1" onclick="openWages(this,'{{=value.pageRelation.permissionValue}}')"></div>
          {{?}}
        </div>
        <div class="line"></div>
      {{?}}
    {{~}}
    <!-- 添加记录模版 -->
    <div id="add_recodes"></div>
    <!-- Echarts -->
    <div class="Echarts col" id="Echarts" style="display:none"></div>
    <div class="line"></div>
    <!-- 显示部分记录列表 -->
    <div class="recodeContent">
      <div class="date-wrap" id="date_wrap"></div>
      <div id="recodes"></div>
    </div>
    <!-- 浏览信息   -->
    <div class="line"></div>
    <div class="col">
    <label>浏览记录</label>
    <div class="browse-info">
      <ul class="browse-items" id="browse_items"></ul>
    </div>
  </div>
</script>
<!-- 浏览记录列表 -->
<script type="text/template" id="browseTl">
  {{~it:value:index}}
   {{?index < 14}}
     {{?value.name != "" && value.name != null}}
       {{?value.img == null}}
         <li class="browse-item" onclick="openModular('{{=value.name}}','{{=value.img}}','{{=value.department}}','{{=value.createDate}}')">
           <span style="width: {{=imgSize()}}px;height:{{=imgSize()}}px;line-height:{{=imgSize()}}px;background-color:#{{=Math.random().toString(16).slice(2,8)}}">{{=value.name.substr(value.name.length-1,1)}}</span>
           <p style="text-align: center;">{{=value.name}}</p>
         </li>
       {{??}}
         <li class="browse-item" onclick="openModular('{{=value.name}}','{{=value.img}}','{{=value.department}}','{{=value.createDate}}')">
           <img src="{{=value.img.substr(value.img, 4) == 'http'?value.img:urlphp+value.img}}" style="width: {{=imgSize()}}px;height:{{=imgSize()}}px" alt="">
           <p style="text-align: center;">{{=value.name}}</p>
         </li>
       {{?}}
     {{?}}
   {{?}}
  {{~}}
  <li class="browse-item" onclick="moreBrowse()">
    <span style="width: {{=imgSize()}}px;height:{{=imgSize()}}px;line-height:{{=imgSize()}}px;color:#333;border:1px solid #ECF0F1;">更多</span>
    <p style="visibility: hidden;">更多</p>
  </li>
</script>
<!-- 添加记录列表 底部弹出-->
<script type="text/template" id="addTemplate">
  <button type="button" name="button" class="add-recode" onclick="openRecode()">添加记录</button>
   <div class="module-box hide">
     <div class="recode-content">
       <p>请选择你要添加的内容</p>
       <ul class="recode-itmes">
         {{~it:value}}
             <li class="recode-itme" onclick="openAddRecode('{{=value.templateName}}', '{{=value.id}}','{{=value.editFlag}}','{{=value.parentId}}')">
               <span>{{=value.templateName}}</span>
               <i></i>
             </li>
         {{~}}
       </ul>
       <a href="javascript:;" class="close-recode" onclick="closeRecode()">取消</a>
     </div>
   </div>
</script>
<!-- 添加记录 图标类型 -->
<script type="text/template" id="addTemplate_icon">
  <ul class="a-recodeWrap-ul-icon">
    {{~it:value}}
      <li onclick="openAddRecode('{{=value.templateName}}', '{{=value.id}}','{{=value.editFlag}}','{{=value.parentId}}')">
          <img src="{{=value.iconUrl == null?'../../icon/link.png':value.iconUrl}}" alt="">
          <span>{{=value.templateName}}</span>
      </li>
    {{~}}
  </ul>
</script>
<!-- 添加记录 列表类型 -->
<script type="text/template" id="addTemplate_list">
  <ul class="a-recodeWrap-ul">
    {{~it:value}}
      <li onclick="openAddRecode('{{=value.templateName}}', '{{=value.id}}','{{=value.editFlag}}','{{=value.parentId}}')">
          {{=value.templateName}}
          <i class="a-addRecode"></i>
      </li>
    {{~}}
  </ul>
</script>

<!-- Echarts -->
<script type="text/template" id="templateReocde">
  <label>统计</label>
  <div class="Echartsmain">
    <canvas id="container" height="0"></canvas>
    <canvas id="container1" height="0" style="display:none;"></canvas>
  </div>
  <div class="left flex-start selectTime1" style="margin-top:15px;">
    <span>起始时间： </span>
    <input type="text" name="start_date" placeholder="选择开始日期" readonly="readonly" class="startTime">
  </div>
  <div class="left flex-start endTime1">
    <span>结束时间： </span>
    <input type="text" name="end_date" placeholder="选择开始日期" readonly="readonly" class="endTime">
  </div>
  <div class="left flex-start screen">
    <span>统计项： </span>
    <div id="radioSelect">请选择</div>
    <i class="icos"></i>
  </div>
  <div class="left flex-start screenSelectType">
    <span>图表类型： </span>
    <input type="text" placeholder="请选择" value="饼图" class="SelectType" readonly>
    <i class="icos"></i>
  </div>
  <div class="btnSelect">
    <button type="button" onclick="switchEcharts()">统计</button>
  </div>
</script>
<script type="text/javascript" src="../../script/api.js"></script>
<!-- 记录模版名称 -->
<script type="text/template" id="TemplateName">
  <div class="col">
    <label>记录列表</label>
    <ul class="date-lists flex-start">
      {{~it:value:index}}
            {{?index == 0}}
              <li class="active" onclick="randomSwitchBtn(this,'{{=value.parentId}}')">{{=value.templateName}}</li>
            {{??}}
              <li onclick="randomSwitchBtn(this,'{{=value.parentId}}')">{{=value.templateName}}</li>
            {{?}}
        {{~}}
    </ul>
  </div>
</script>
<!-- 部分记录列表 -->
<script type="text/template" id="recodeTemplate">
  <div class="col">
    <div class="recodes-wrap">
      {{=it ==""?'<p class="no_data">暂无数据<p>':''}}
      {{~it:value:index}}
        {{?index<5}}
           <div class="recode-wraps">
                 <span class="recode-img"></span>
               <div class="recode-list">
                  {{ for (var t=0;t<value.length;t++) { }}
                     <div class="main" onclick="openRecordDe('{{=value[t].recordParentId}}')">
                         <p class="time">
                             {{=value[t].createDate}}
                             <span class="Triangle"></span>
                             <span class="recodeTitle">{{=value[t].templateName}}</span>
                         </p>
                         <p class="name">{{=value[t].createName}}</p>
                         <div class="name">
                           {{?value[t].recordStatusInstanceList != null}}
                             {{ for(var i= 0;i<value[t].recordStatusInstanceList.length;i++){ }}
                               <div class="state-items">
                                 <p class="state-title" style="width:auto;display:{{=value[t].statusName == ""?'none':'inline-block'}}">{{=value[t].recordStatusInstanceList[i].statusName}}：</p>
                                   {{ for(var j= 0;j<value[t].recordStatusInstanceList[i].recordStatusInstanceItemList.length;j++){ }}
                                     {{?value[t].recordStatusInstanceList[i].recordStatusInstanceItemList.length == 1}}
                                       <span>{{=value[t].recordStatusInstanceList[i].recordStatusInstanceItemList[j].statusContent}}</span>
                                     {{??}}
                                       <span>{{=value[t].recordStatusInstanceList[i].recordStatusInstanceItemList[j].statusContent}},</span>
                                     {{?}}
                                   {{ } }}
                                </div>
                              {{ } }}
                            {{??}}
                              <div class="state-items">
                                <p class="state-title" style="width:auto;display:{{=value[t].statusName == ""?'none':'inline-block'}}">{{=value[t].statusName}}:</p>
                                <span>{{=value[t].statusContent}}</span>
                               </div>
                            {{?}}
                         </div>
                     </div>
                     {{?t == value.length-1}}
                     {{?value[value.length-1].continueStatus == false}}
                         <div class="state1">
                             <p class="time">
                                 结束：{{=value[t].createDate}}
                                 <span class="Triangle" style="top:6px;"></span>
                             </p>
                             <i class="stop"></i>
                         </div>
                       {{??}}
                         <div class="state1 wait">
                             <p class="time" style="background:#F7A329">
                                 等待处理......
                                 <span class="Triangle" style="top:6px;border-color: transparent #F7A329 transparent transparent;"></span>
                             </p>
                             <i class="stop" style="background: url('../../icon/Continue.png')  center no-repeat;background-size: contain;"></i>
                         </div>
                       {{?}}
                     {{?}}
                 {{ } }}
               </div>
           </div>
        {{?}}
      {{~}}
    </div>
    <div class="recode-more" onclick="openBrowseRecordItem('记录列表')">查看更多</div>
  </div>
</script>
<script type="text/javascript" src="../../script/base64.js"></script>
<script type="text/javascript" src="../../script/doT.min.js"></script>
<script type="text/javascript" src="../../script/swiper.min.js"></script>
<script type="text/javascript" src="../../script/f2.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script src="../../script/popoPicker.js" charset="utf-8"></script>
<script src="../../script/H5/mobileSelect.min.js" charset="utf-8"></script>
<script type="text/javascript" src="../../script/select.js"></script>
<script src="../../script/addRecode.js" charset="utf-8"></script>
<script src="../../script/config.js" charset="utf-8"></script>
<script type="text/javascript" src="../../script/aui-dialog.js" ></script>
<script type="text/javascript">
(function($) {
    $.extend($.fn, {
      fileUpload: function(opts, callback) {
        this.each(function() {
          var $self = $(this);
          var doms = {
            fileToUpload: $self.find('.fileToUpload'),
            thumb: $self.find('.thumb'),
            progress: $self.find('.upload-progress'),
          };
          var funs = {
            //选择文件，获取文件大小，也可以在这里获取文件格式，限制用户上传非要求格式的文件
            fileSelected: function() {
              var files = doms.fileToUpload[0].files;
              var type = doms.fileToUpload[0].files[0].name.split('.')[1];
              var count = files.length;
              for (var index = 0; index < count; index++) {
                var file = files[index];
                var fileSize = 0;
                if (file.size > 1024 * 1024)
                  fileSize =
                    (
                      Math.round((file.size * 100) / (1024 * 1024)) / 100
                    ).toString() + 'MB';
                else
                  fileSize =
                    (Math.round((file.size * 100) / 1024) / 100).toString() +
                    'KB';
              }
              if (
                type == 'xls' ||
                type == 'ppt' ||
                type == 'pptx' ||
                type == 'xlsx' ||
                type == 'doc' ||
                type == 'docx' ||
                type == 'zip' ||
                type == 'rar' ||
                type == 'pdf' || 'jpg'
              ) {
                setTimeout(function() {
                  funs.uploadFile();
                }, 300);
              } else {
                alert('选择文件格式不正确');
              }
            },
            //异步上传文件
            uploadFile: function() {
              var fd = new FormData(); //创建表单数据对象
              var files = doms.fileToUpload[0].files;
              var count = files.length;
              for (var index = 0; index < count; index++) {
                var file = files[index];
                fd.append(opts.file, file); //将文件添加到表单数据中
                //   funs.previewImage(file); //上传前预览图片，也可以通过其他方法预览txt
              }
              var xhr = new XMLHttpRequest();
              xhr.upload.addEventListener(
                'progress',
                funs.uploadProgress,
                false
              ); //监听上传进度
              xhr.addEventListener('load', funs.uploadComplete, false);
              xhr.addEventListener('error', opts.uploadFailed, false);
              xhr.open('POST', opts.url);
              xhr.send(fd);
            },
            uploadProgress: function(evt) {
              if (evt.lengthComputable) {
                var percentComplete = Math.round(
                  (evt.loaded * 100) / evt.total
                );
                doms.progress.html(percentComplete.toString() + '%');
              }
            },
            uploadComplete: function(evt) {
              callback(evt.target.responseText);
            },
          };
          doms.fileToUpload.on('change', function() {
            doms.progress.find('span').width('0');
            funs.fileSelected();
          });
        });
      },
    });
  })(Zepto);

  var base64 = new Base64();
  var dialog = new auiDialog({});
  var pageId = '',
    organizationIds = '',
    recodeTeamId = '',
    name = '',
    uuid = '',
    topSpace = 0,
    startDate = '',
    endDate = '',
    echartsType = 1,
    mobileSelect = '',
    implementOne = true,
    token = '',
    headers,
    recodeData = [{id: '1', value: '暂无数据'}], //统计记录列表数据;
    imgServerData = {},
    mantFlag;
    // handlePutLinkUrl = {};
  apiready = function () {
    $apis.UILoading('browseQrcodeDe');
    UIAlbumBrowser = api.require('UIAlbumBrowser');
    var info = $api.getStorage('data');
    userName = name = JSON.parse(info).data.user.name;
    userId = uuid = JSON.parse(info).data.user.staff_num;
    token = JSON.parse(info).data.access_token || '';
    headers = {
        "Authorization": "Bearer " + token
    };
    pageId = api.pageParam.pageId;
    departmentId = organizationIds = JSON.parse(info).data.user.section_id;
    api.addEventListener({
        name: 'handAddLinkUrl'
    }, function(ret, err) {
        $api.val($api.dom('#linkUrl'),`${URLjavaLink}/assets/html/QRcoddetails/index.html?name=&uuid=&pageId=${ret.value.pageId}&departmentID=`);
    });
    QrDetails()
      .then((ret) => {
        // 添加浏览人数
        return addDrowse();
      })
      .then((ret) => {
        // 浏览人数
        return browseNum();
      })
      .then((ret) => {
        // 浏览人数
        $apis.html(browse_items, '#browseTl', ret.data);
      })
      .catch((err) => {});
  };

  // 二维码详情
  let QrDetails = () => {
    return new Promise((resolve, reject) => {
      var parm = {
        pageId: pageId,
        sourceType: '',
        organizationIds: organizationIds,
        userId: uuid,
        userName: name,
      };
      $http.fnReuestDataNologing(
        UrlRouter.getQrcodeDe,
        '',
        'get',
        parm,
        function (ret, err) {
          if (ret.code === '200') {
            var showMoudle = true;
            mantFlag = ret.data.mantFlag;
            //TODO
            ret.data.pageItemList.forEach(function(item) {
              item.mantFlag = mantFlag
            })
            $apis.html(qrcode_wrap, '#templateQrcode', ret.data.pageItemList);
            if (ret.data.pageRecordAppVo != null) {
                $('.recode-warp').show()
                pageRecordParentId = ret.data.pageRecordAppVo.parentId;
                templateId = ret.data.pageRecordAppVo.recordTemplate.id
                templateName = ret.data.pageRecordAppVo.recordTemplate.templateName
                $('.template_name').html(templateName)
                $apis.html(recode_content, '#addRecodeTemplate', ret.data.pageRecordAppVo.recordTemplate);
            } else {
                for (var i = 0; i < ret.data.pageItemList.length; i++) {
                    if (ret.data.pageItemList[i].pageRelation.businessType === 'RECORD' && ret.data.pageItemList[i].pageRecordList != "" && ret.data.pageItemList[i].pageRecordList != null) {
                        showMoudle = false
                    }
                }
            }
            if (showMoudle === false) {
              // 能填写逻辑
              if (ret.data.addFlag == true && ret.data.othersFlag == true) {
                if (ret.data.pageItemShowIndex1.length > 0 ) {
                    $apis.html(add_recodes, '#addTemplate', ret.data.pageItemShowIndex1);
                }
                if (ret.data.pageItemShowIndex2.length > 0) {
                    $apis.html(add_recodes_icon, '#addTemplate_icon', ret.data.pageItemShowIndex2);
                }
                if (ret.data.pageItemShowIndex3.length > 0) {
                    $apis.html(add_recodes_list, '#addTemplate_list', ret.data.pageItemShowIndex3);
                }
              }else if (ret.data.othersFlag == false) {
                // 所有人都能查看和填写
                if (ret.data.pageItemShowIndex1.length > 0 ) {
                    $apis.html(add_recodes, '#addTemplate', ret.data.pageItemShowIndex1);
                }
                if (ret.data.pageItemShowIndex2.length > 0) {
                    $apis.html(add_recodes_icon, '#addTemplate_icon', ret.data.pageItemShowIndex2);
                }
                if (ret.data.pageItemShowIndex3.length > 0) {
                    $apis.html(add_recodes_list, '#addTemplate_list', ret.data.pageItemShowIndex3);
                }
                TemplateName()
              }

            }
            var showMoudle1 = true
            for (var i = 0; i < ret.data.pageItemList.length; i++) {
                if (ret.data.pageItemList[i].pageRelation.businessType === 'RECORD' && ret.data.pageItemList[i].pageRecordList != "" && ret.data.pageItemList[i].pageRecordList != null) {
                    showMoudle1 = false
                }
            }
            if (showMoudle1 === false) {
              // 查看人权限
                if (ret.data.viewFlag == true && ret.data.othersFlag == true) {
                  TemplateName()
                }else if (ret.data.othersFlag == false) {
                  TemplateName()
                }
                $apis.html(Echarts, '#templateReocde', '');
                timeSelectrecode()
                setTimeout(() => {
                    var date = new Date();
                    var year = date.getFullYear()
                    var month = date.getMonth() + 1
                    month = month < 10 ? '0' + month : month
                    var d = date.getDate();
                    d = d < 10 ? '0' + d : d
                    startDate = year + "-" + month + "-01"
                    endDate = year + "-" + month + "-" + d
                    $('.startTime').val(startDate)
                    $('.endTime').val(endDate)
                    selectRecode(pageId, startDate, endDate)
                }, 1000)
            }
            $apis.swiper('.swiper-container', true, 'fraction');
            $apis.CloseUILoading();
            resolve(ret);
          } else {
            reject(err);
          }
        }
      );
    });
  };


  // 添加链接
  function qrCodeListUploadLink(parentId,title,types,linksList) {
    // http://colliery.nxjiewei.com/assets/html/QRcoddetails/index.html?name=&uuid=&pageId=d7a62c0f72b746d58a59747f99e1c305&departmentID=
    let msg = `<div class="form-data">
        <div class="add-link-form-item">
            <label class="column-title">名称：</label>
            <input type="text" name="" value="" placeholder="请输入名称" class="inputBox colimn-input input-s font-s link-name">
        </div>
        <div class="add-link-form-item">
          <label class="column-title">上传链接图标：</label>
          <h6 onclick="linkItemAddImg()">
            <div class="aui-btn aui-btn-info"><span class="aui-iconfont aui-icon-plus" ></span>上传图片</div>
            <div class="icon-img-list">
               <img />
            </div>
          </h6>
        </div>
        <div>
        <div class="add-link-form-item">
            <label class="column-title">链接：</label>
            <input type="text" name="" value="" placeholder="请输入链接" class="inputBox colimn-input input-s font-s link-url" id="linkUrl" onclick="handleSetLinkUrl()">
        </div>
    </div>`

    dialog.alert({
        title: "新增链接",
        msg: msg,
        buttons: ['取消','确定']
    },function(ret){
        if(ret.buttonIndex == 2) {
          if($('.link-name').val() == '') {
            api.toast({
                msg: '请输入链接标题',
                duration: 2000,
                location: 'top'
            });
          } else if ($('.link-url').val() == '') {
            api.toast({
                msg: '请输入链接',
                duration: 2000,
                location: 'top'
            });
          } else if ($('.link-name').val() != '' && $('.link-url').val() != '') {

            let params = [
              {
                deleteFlag: false,
                id: '',
                imageUrl: imgServerData.fullURL,
                linkName: $('.link-name').val(),
                linkUrl: $('.link-url').val(),
                numIndex: Number(linksList)+1,
                pageId: pageId,
                parentId: parentId,
                title: title,
                types: types
              }
            ]
            api.ajax({
               url: UrlRouter.addLinks,
               method: 'post',
               headers: {
                   'Content-Type': 'application/json;charset=utf-8'
               },
               data: {
                  body: params
              }
           }, function(ret, err) {
               if (ret.code == 200 || ret.code == 203) {
                   QrDetails()
               } else {
                   // console.log(JSON.stringify(err));
               }
           });
          }
        }
    })
  }

  // 输入链接地址时  跳转二维码搜索页面
  function handleSetLinkUrl() {
    // e.stopPropagation();
    let pageParam = {
      type: 'addLinkUrl'
    }
    $event.openWin('search_win','../page/search_win',pageParam,'')
  }

  // 添加链接时 添加图片
  function linkItemAddImg() {
    api.getPicture({
        sourceType: 'library'
    }, function(ret, err){
        if(ret && ret.data!=""){
              $http.fileUploadRequest(UrlRouter.uploadFile,'post',{file:ret.data})
                .then(res => {
                  if(res.code == 200) {
                    $('.icon-img-list').css({display: 'block'})
                    $(".icon-img-list img").css({display: 'block'})
                    $(".icon-img-list img").attr('src', res.data.fullURL);
                    imgServerData = res.data;
                  }
                })
        }
    });
  }

  // 添加图集
  function qrCodeListUploadImg(parentId,title,imageType,pictureList) {
    api.getPicture({
        sourceType: 'library'
    }, function(ret, err){
        if(ret && ret.data!=""){
             uploadHeadAtlas(ret.data,parentId,title,imageType,pictureList);;
        }else{
            //  console.log(JSON.stringify(err));
        }
    });

  }

  // 图片上传成功后，开始调用添加图集方法
  function uploadHeadAtlas(imgUrl,parentId,title,imageType,pictureList) {
    $http.fileUploadRequest(UrlRouter.uploadFile,'post',{file:imgUrl})
      .then(res => {
        let params= [
          {
            id: '',
            pageId: pageId,
            title: title,
            imageName: res.data.fileName,
            imageUrl: res.data.fullURL,
            imageLinking: '',
            pageRelationId: '',
            imageType: imageType,
            deleteFlag: false,
            parentId: parentId,
            numIndex: Number(pictureList)+1
          }
        ]
        api.ajax({
            url: UrlRouter.addPicture,
            method: 'post',
            headers: {
                'Content-Type': 'application/json;charset=utf-8'
            },
            data: {
               body: params
           }
        },function(ret, err){
            if (ret.code == 200 || ret.code == 203) {
                QrDetails()
            } else {
                // console.log(JSON.stringify(err));
            }
        });
      })
  }

  // 文件上传
 function qrCodeListUpload(parentId,fileList) {
   $('.camera-area').fileUpload({url: UrlRouter.uploadFile,file: 'file'},
       function(res) {
         let resData = JSON.parse(res);
         let params =[
           {
             deleteFlag: false,
             fileName: resData.data.fileName,
             filePath: resData.data.fullURL,
             fileSize: bytesToSize(resData.data.size),
             id: '',
             numIndex: Number(fileList)+1,
             pageId: pageId,
             parentId: parentId,
             title: ''
           }
         ]
         api.toast({
           msg: '上传中',
           duration: 2000,
           location: 'top',
         });
         api.ajax({
            url: UrlRouter.addFile,
            method: 'post',
            headers: {
                'Content-Type': 'application/json;charset=utf-8'
            },
            data: {
               body: params
           }
        }, function(ret, err) {
            if (ret.code == 200 || ret.code == 203) {
                QrDetails()
            } else {
                // console.log(JSON.stringify(err));
            }
        });
       }
     );
 }
  // 上传文件 文件格式为PPT PTX lsx doc等格式
  function uploadFile(el, fileUrl) {
    $http
      .fileUploadRequest(UrlRouter.uploadFile, 'post', {file: fileUrl})
      .then((ret) => {
        if (ret.code === '200') {
          api.toast({
            msg: '上传成功',
            duration: 2000,
            location: 'top',
          });
          var fileType = ret.data.fileName.substr(
            ret.data.fileName.length - 3,
            3
          );
          if (
            fileType == 'ppt' ||
            fileType == 'ptx' ||
            fileType == 'lsx' ||
            fileType == 'xls' ||
            fileType == 'doc' ||
            fileType == 'ocx' ||
            fileType == 'zip' ||
            fileType == 'rar' ||
            fileType == 'pdf'
          ) {
            var html = `<li class="file-item file-item" file-Url="${
              ret.data.fullURL
            }" file-Name="${ret.data.fileName}">
                          <img src="../../icon/${ret.data.fullURL.substr(
                            ret.data.fullURL.length - 3,
                            3
                          )}.png" style="width:40px;height:40px;"/>
                          <div class="file-info">
                            <p>${ret.data.fileName}</p>
                          </div>
                      </li>`;
            $api.before($api.dom('.file-item-type'), html);
          } else {
            api.toast({
              msg: '文件格式不对',
              duration: 2000,
              location: 'top',
            });
          }
        } else {
          api.toast({
            msg: '上传失败',
            duration: 2000,
            location: 'top',
          });
        }
      })
      .catch((err) => {
        api.toast({
          msg: '网络错误',
          duration: 2000,
          location: 'top',
        });
      });
  }
  // 添加浏览人数
  function addDrowse() {
    return new Promise(function (resolve, reject) {
      var data = {
        "createBy": "",
        "createDate": "",
        "id": "",
        "userId": uuid,
        "pageId": pageId,
        "status": "CREATE",
      };
      $http.requestData(UrlRouter.addPageUser, 'post',data)
      .then(res => {
        if(res.code === '200') {
          resolve(res);
        }
      }).catch(err => {
        reject(err)
      })
    });
  }
  // 浏览人数
  function browseNum() {
    return new Promise(function (resolve, reject) {
      $http.fnReuestDataNologing(
        UrlRouter.getPageUserByPageId + pageId,
        '',
        'get',
        '',
        function (ret, err) {
          if (ret.code === '200') {
            resolve(ret);
          } else {
            reject(err);
          }
        }
      );
    });
  }
  // 浏览人员详情
  function openModular(name, img, dep, time) {
    $('.modular').show();
    $('.box').addClass('animated bounceInDown');
    setTimeout(function () {
      $('.box').removeClass('animated bounceInDown');
    }, 1000);
    if (img == 'null') {
      $('.box')
        .find('.header-img')
        .html(
          ` <p style="background:#${Math.random()
            .toString(16)
            .slice(
              2,
              8
            )};width: 60px;height: 60px;line-height:60px;margin: auto">${name.substr(
            name.length - 1,
            1
          )}</p>`
        );
    } else {
      var url = img.substr(img, 4);
      if (url == 'http') {
        $('.box').find('.header-img').html(`<img src="${img}">`);
      } else {
        $('.box')
          .find('.header-img')
          .html(`<img src="${urlphp + img}">`);
      }
    }
    $('.box')
      .find('.name')
      .html('姓名：' + name);
    $('.box')
      .find('.dep')
      .html('部门：' + dep);
    $('.box')
      .find('.times')
      .html('最新浏览时间：' + time);
  }
  $('body').on('click', function (e) {
    if (event.target == document.getElementById('myModal')) {
      $('#myModal').hide();
    }
  });
  // 查看更多浏览记录
  function moreBrowse() {
    var parm = {
      id: pageId,
    };
    $event.openTabLayout('moreBrowse', 'moreBrowse', '浏览记录', parm);
  }
  // 打开记录列表(add)
  function openRecode() {
    $api.removeCls($api.dom('.module-box'), 'hide');
    $api.addCls($api.dom('.add-recode'), 'hide');
    BodyScroll(true);
  }
  // 关闭记录列表(add)
  function closeRecode() {
    $api.addCls($api.dom('.module-box'), 'hide');
    $api.removeCls($api.dom('.add-recode'), 'hide');
    BodyScroll(false);
  }
  // 记录模版列表
  var num = 0;
  function TemplateName() {
    $http.fnReuestDataNologing(
      UrlRouter.selectRecordByGetPageId + pageId,
      '',
      'get',
      '',
      function (ret, err) {
        if (ret.code == '200' && ret.data != '') {
          $apis.html(date_wrap, '#TemplateName', ret.data);
          recodeList(ret.data[0].parentId);
        }
      }
    );
  }
  // 记录列表
  function recodeList(data) {
    var parm = {
      pageId: pageId,
      pageRecordParentId: data,
      pageNumber: 1,
      pageSize: 5,
    };
    $http.fnReuestDataNologing(
      UrlRouter.getPageRecordInstanceList,
      '',
      'get',
      parm,
      function (ret, err) {
        if (ret.code == '200') {
          $apis.html(recodes, '#recodeTemplate', ret.data);
        }
      }
    );
  }
  // 切换模版名称
  function randomSwitchBtn(tag, ParentId) {
    if (tag == $api.dom('.date-lists li.active')) return;
    var eFootLis = $api.domAll('.date-lists li');
    index = 0;
    for (var i = 0, len = eFootLis.length; i < len; i++) {
      if (tag == eFootLis[i]) {
        index = i;
      } else {
        $api.removeCls(eFootLis[i], 'active');
      }
    }
    $api.addCls(eFootLis[index], 'active');
    recodeList(ParentId);
  }
  // 动态计算浏览人数img大小
  function imgSize() {
    var width = document.body.clientWidth;
    return width / 5 - 23;
  }
  // 上传文件  TODO
  function browseFileUpload(el, type) {
    // var fileBrowser = api.require('fileBrowser');
    // fileBrowser.open(function (ret) {
    //   if (ret) {
    //     var type = ret.name.substring(ret.name.lastIndexOf('.'));
    //     if (
    //       type === '.xls' ||
    //       type === '.ppt' ||
    //       type === '.pptx' ||
    //       type === '.xlsx' ||
    //       type === '.doc' ||
    //       type === '.docx' ||
    //       type === '.zip' ||
    //       type === '.rar' ||
    //       type === '.pdf'
    //     ) {
    //       setTimeout(function () {
    //         uploadFile(el, ret.url);
    //       }, 500);
    //     } else if (type === '.mp3') {
    //       setTimeout(function () {
    //         uploadAudio(el, ret.url);
    //       }, 500);
    //     } else if (type === '.mp4') {
    //       setTimeout(function () {
    //         uploadVedio(el, ret.url);
    //       }, 500);
    //     } else {
    //       alert('选择文件格式不正确');
    //     }
    //   }
    // });
    // fileBrowser.skin({
    //   skin: 1,
    // });
  }
  // 文件在线浏览
  function browseFile(paths, flag) {
    api.download(
      {
        url: paths,
        report: true,
        cache: true,
        allowResume: true,
      },
      function (ret, err) {
        if (ret.state == 1) {
          if (!flag) {
            var superFile = api.require('superFile');
            superFile.open({path: ret.savePath});
          }
          setTimeout(function () {
            api.toast({
              msg: '下载成功',
              duration: 2000,
              location: 'top',
            });
          }, 100);
        } else {
        }
      }
    );
  }
  // 链接跳转
  function openLink(path, imgUrl, title) {
    var num = path.indexOf('?'),
      sPath = path.substr(num + 1);
    var arr = sPath.split('&');
    if (sPath === '') {
      var $galleryImg = $('.gallery-img');
      var $gallery = $('.gallery');
      $galleryImg.attr('style', 'background-image: url("' + imgUrl + '");');
      $gallery.show();
      $gallery.on('click', function () {
        $gallery.hide();
      });
    } else if (arr[0].slice(0, 7) == 'pageId=') {
      var parm = {
        pageId: arr[0].substring(7),
        organizationIds: organizationIds,
        title: title,
      };
      $event.openWin(
        'browseQrcode_win' + Math.random(),
        'browseQrcode_win',
        parm,
        ''
      );
    } else if (arr[0].slice(0, 5) == 'name=') {
      var parm = {
        pageId: arr[2].substring(7),
        organizationIds: organizationIds,
        title: title,
      };
      $event.openWin(
        'browseQrcode_win' + Math.random(),
        'browseQrcode_win',
        parm,
        ''
      );
    } else if (path.indexOf('order::') === 0) {
      var pageParam = {
        id: path.substring(7),
        title: '工单审批',
      };
      $event.openWin(
        'changeFill_win' + Math.random(),
        '../wordorder/changefillword_win',
        pageParam,
        ''
      );
    } else if (path.indexOf('token::') === 0) {
      $event.openWin(
        'browseUrl' + Math.random(),
        'browseUrl',
        {url: path.substring(7) + '&token=' + token},
        title
      );
    } else {
      $event.openWin('browseUrl' + Math.random(), 'browseUrl', {url: path}, '');
    }
  }
  //跳转到添加记录
  function openAddRecode(title, pageRecordId,editFlag,parentId) {
    if (editFlag != 'false') {
      var param = {
        pageId: pageId,
        pageRecordId: pageRecordId,
        createBy: uuid,
        createName: name,
        recordTrueID: parentId,
        organizationIds: organizationIds,
      };
      $event.openTabLayout(
        'addRecode' + Math.random(),
        'addRecode',
        title,
        param
      );
    }else {
      api.alert({
          title: '提示',
          msg: '填写记录次数以用完，请联系管理员',
      });
    }
  }
  // 记录列表跳转
  function openBrowseRecordItem(title) {
    $event.openTabLayout('recodeItem' + Math.random(), 'recodeItem', title, {
      id: pageId,
      departmentID: organizationIds,
      name: name,
      uuid: uuid,
    });
  }
  // 记录详情
  function openRecordDe(id) {
    $event.openTabLayout(
      'recodeDetails' + Math.random(),
      'recodeDetails',
      '记录详情',
      {recordParentId: id}
    );
    // $event.openWin('browseRecodeDe'+Math.random(),'browseRecodeDe',{id:id,departmentID:organizationIds,name:name,uuid:uuid},'');
  }
  // 遮罩层下面内容不让滚动
  function BodyScroll(isState) {
    var bodyDoc = document.body;
    if (isState) {
      topSpace = window.scrollY;
      bodyDoc.style.position = 'fixed';
      bodyDoc.style.width = '100%';
      bodyDoc.style.top = -topSpace + 'px';
    } else {
      bodyDoc.style.position = '';
      bodyDoc.style.top = '';
      window.scrollTo(0, topSpace);
    }
  }
  // 根据时间查询记录列表
  let timeSelectrecode = () => {
    var startTime = '',
      endTime = '';
    new popoDateTime('.startTime', {
      container: '.selectTime1',
      background: 'light',
      time: false,
      save: function (data) {
        startTime = data;
        startDate = data;
        if (startTime && endTime) {
          selectRecode(pageId, startTime, endTime);
        }
      },
    });
    new popoDateTime('.endTime', {
      container: '.endTime1',
      background: 'light',
      time: false,
      save: function (data) {
        endTime = data;
        endDate = data;
        if (startTime && endTime) {
          selectRecode(pageId, startTime, endTime);
        }
      },
    });
    dropDown();
  };
  // Echarts
  let selectRecode = (pageId, startTime, endTime) => {
    $http.fnReuestDataNologing(
      UrlRouter.getSearchPageRecordInstance +
        pageId +
        '/' +
        startTime +
        '/' +
        endTime,
      '',
      'get',
      '',
      (ret, err) => {
        if (ret && ret.code === '200') {
          if (ret.data.length == 0) {
            $('#Echarts').hide();
            recodeData = [{id: 0, value: '暂无数据'}];
            recodeTeamId = '';
            mobileSelect.updateWheel(0, recodeData);
            mobileSelect.locatePostion(0, 0);
            $('#radioSelect').html('请选择');
          } else {
            $('#Echarts').show();
            var data = ret.data.map((item) => {
              return {
                id:
                  item.itemId +
                  '/' +
                  item.pageId +
                  '/' +
                  item.pageRecordParentId +
                  '::' +
                  item.flag,
                value: item.templateName + '-' + item.name,
              };
            });
            $('#radioSelect').html(data[0].value);
            recodeTeamId = data[0].id;
            mobileSelect.updateWheel(0, data);
            mobileSelect.locatePostion(0, 0);
            if (implementOne) {
              implementOne = false;
              selectStatue(recodeTeamId, 1, startDate, endDate);
            }
          }
        }
      }
    );
  };
  // 切换图表类型
  let switchEcharts = () => {
    if (recodeTeamId == '') {
      api.toast({
        msg: '请选择记录项',
        duration: 2000,
        location: 'top',
      });
    } else {
      selectStatue(recodeTeamId, echartsType, startDate, endDate);
    }
  };
  //Echarts 点击记录项统计
  let selectStatue = (data, type, startTime, endTime) => {
    if (data.substring(data.length - 1) == 1) {
      statusEcharts(
        data.substring(0, data.lastIndexOf('::')),
        type,
        startTime,
        endTime
      );
    } else {
      recodeEcharts(
        data.substring(0, data.lastIndexOf('::')),
        type,
        startTime,
        endTime
      );
    }
  };
  // 状态项统计
  let statusEcharts = (value, type, startTime, endTime) => {
    $http.fnReuestDataNologing(
      UrlRouter.selectPageStatusPercet +
        '/' +
        value +
        '/' +
        startTime +
        '/' +
        endTime,
      '',
      'get',
      '',
      (ret, err) => {
        if (ret && ret.code === '200') {
          var data = ret.data;
          var heightCanvas = 300;
          var map = {};
          for (var i = 0; i < data.length; i++) {
            if (i > 1) {
              heightCanvas += 30;
            }
            map[data[i].name] =
              data[i].value + '%' + '(' + data[i].count + '次)';
          }
          if (type == 1) {
            $('#container').show();
            $('#container1').hide();
            const chart = new F2.Chart({
              id: 'container',
              height: heightCanvas,
              appendPadding: [10, 0, 20, 0],
              pixelRatio: window.devicePixelRatio,
            });
            chart.source(data);
            chart.legend({
              position: 'bottom',
              itemFormatter: function itemFormatter(val) {
                return val + ' ' + map[val];
              },
            });
            chart.tooltip(false);
            chart.coord('polar', {
              transposed: true,
              innerRadius: 0.4,
              radius: 0.85,
            });
            chart.axis(false);
            // 配置文本饼图
            chart.pieLabel({
              sidePadding: 0,
              label1: function label1(data) {
                return {
                  text: data.name,
                  fill: '#808080',
                };
              },
              label2: function label2(data) {
                return {
                  fill: '#000000',
                  text: data.count + '次',
                  fontWeight: 500,
                  fontSize: 10,
                };
              },
            });
            chart
              .interval()
              .position('st*value')
              .color('name')
              .adjust('stack')
              .style({
                lineWidth: 1,
                stroke: '#fff',
                lineJoin: 'round',
                lineCap: 'round',
              })
              .animate({
                appear: {
                  duration: 1200,
                  easing: 'bounceOut',
                },
              });
            chart.render();
          } else {
            $('#container').hide();
            $('#container1').show();
            const chart = new F2.Chart({
              id: 'container1',
              height: 300,
              pixelRatio: window.devicePixelRatio,
            });
            chart.source(data, {
              sales: {
                tickCount: 5,
              },
            });
            chart.tooltip({
              showItemMarker: false,
              onShow: function onShow(ev) {
                const items = ev.items;
                items[0].name = null;
                items[0].name = items[0].title;
                items[0].value = items[0].value + '次';
              },
            });
            chart.interval().position('name*count');
            chart.render();
          }
        }
      }
    );
  };
  // 记录统计
  let recodeEcharts = (recordInstanceId, type, startTime, endTime) => {
    $http.fnReuestDataNologing(
      UrlRouter.selectPageRecodePercet +
        recordInstanceId +
        '/' +
        startTime +
        '/' +
        endTime,
      '',
      'get',
      '',
      (ret, err) => {
        if (ret && ret.code === '200') {
          var data = ret.data;
          var heightCanvas = 300;
          var map = {};
          for (var i = 0; i < data.length; i++) {
            if (i > 1) {
              heightCanvas += 40;
            }
            map[data[i].name] =
              data[i].value + '%' + '(' + data[i].count + '次)';
          }
          if (type == 1) {
            $('#container').show();
            $('#container1').hide();
            const chart = new F2.Chart({
              id: 'container',
              height: heightCanvas,
              appendPadding: [10, 0, 20, 0],
              pixelRatio: window.devicePixelRatio,
            });
            chart.source(data);
            chart.legend({
              position: 'bottom',
              itemFormatter: function itemFormatter(val) {
                return val + ' ' + map[val];
              },
            });
            chart.tooltip(false);
            chart.coord('polar', {
              transposed: true,
              innerRadius: 0.4,
              radius: 0.85,
            });
            chart.axis(false);
            // 配置文本饼图
            chart.pieLabel({
              sidePadding: 0,
              activeShape: true,
              triggerOn: 'touchstart',
              label1: function label1(data) {
                return {
                  text: data.name,
                  fill: '#808080',
                };
              },
              label2: function label2(data) {
                return {
                  fill: '#000000',
                  text: data.count + '次',
                  fontWeight: 500,
                  fontSize: 10,
                };
              },
              onClick: function onClick(ev) {
                const {data} = ev;
                if (data && data.typeValue == 'radio') {
                  var params = {
                    pageId: data.pageId,
                    pageRecordParentId: data.pageRecordParentId,
                    startTime: startTime,
                    endTime: endTime,
                    inputValue: data.inputValue,
                    type: '',
                  };
                  $event.openTabLayout(
                    'echartLevel' + Math.random(),
                    'echartLevel',
                    data.name,
                    params
                  );
                }
              },
            });
            chart
              .interval()
              .position('st*value')
              .color('name')
              .adjust('stack')
              .style({
                lineWidth: 1,
                stroke: '#fff',
                lineJoin: 'round',
                lineCap: 'round',
              })
              .animate({
                appear: {
                  duration: 1200,
                  easing: 'bounceOut',
                },
              });
            chart.render();
          } else {
            $('#container').hide();
            $('#container1').show();
            const chart = new F2.Chart({
              id: 'container1',
              height: 300,
              pixelRatio: window.devicePixelRatio,
            });
            chart.source(data, {
              sales: {
                tickCount: 5,
              },
            });
            chart.tooltip({
              showItemMarker: false,
              onShow: function onShow(ev) {
                const items = ev.items;
                items[0].name = null;
                items[0].name = items[0].title;
                items[0].value = items[0].value + '次';
              },
            });
            chart.interval().position('name*count');
            chart.render();
          }
        }
      }
    );
  };
  // 下拉记录控件
  let dropDown = () => {
    mobileSelect = new MobileSelect({
      trigger: '#radioSelect',
      title: '统计项',
      wheels: [{data: recodeData}],
      position: [0, 0],
      callback: function (indexArr, data) {
        recodeTeamId = data[0].id;
      },
    });
    new popoPicker('.SelectType', {
      container: '.screenSelectType',
      wheels: [
        {
          infinite: false,
          data: [
            {value: 1, display: '饼图'},
            {value: 2, display: '柱状图'},
          ],
        },
      ],
      background: 'light',
      save: function (data) {
        echartsType = data.result[0].value;
      },
    });
  };
  // 添加记录
  // 上传文件
  // 浏览手机文件夹,获取文件路径
  function getFile(el, type) {
    var fileBrowser = api.require('fileBrowser');
    fileBrowser.open(function (ret) {
      if (ret) {
        var type = ret.name.substring(ret.name.lastIndexOf('.'));
        if (
          type === '.xls' ||
          type === '.ppt' ||
          type === '.pptx' ||
          type === '.xlsx' ||
          type === '.doc' ||
          type === '.docx' ||
          type === '.zip' ||
          type === '.rar' ||
          type === '.pdf'
        ) {
          setTimeout(function () {
            uploadFile(el, ret.url);
          }, 500);
        } else if (type === '.mp3') {
          setTimeout(function () {
            uploadAudio(el, ret.url);
          }, 500);
        } else if (type === '.mp4') {
          setTimeout(function () {
            uploadVedio(el, ret.url);
          }, 500);
        } else {
          alert('选择文件格式不正确');
        }
      }
    });
    fileBrowser.skin({
      skin: 1,
    });
  }
  // textarea根据文字多少自适应高度
  function Oninput(that) {
    $(that).height(that.scrollHeight);
  }
  // 我的记录
  function my_recode() {
    $event.openTabLayout(
      'echartLevel' + Math.random(),
      'echartLevel',
      '我的记录',
      {type: 'my', pageId: pageId}
    );
  }
  // 模块权限
  // 当前模块
  var moduleThat;
  var passwordValue = ''
  function openWages(that,value) {
      passwordValue = value
      moduleThat = that
      $('.password').val('');
      $('.Tips-p').html('');
      $('.wages-layout').show();
      $('.wages').addClass('animated bounceInDown');
      setTimeout(function() {
          $('.wages').removeClass('animated bounceInDown')
      }, 1000);
  }
  window.onclick = function(event) {
      if (event.target == document.getElementById('wages-layout')) {
          $('.wages-layout').hide();
      }
  }
  function closeWages() {
      $('.wages-layout').hide();
  };
  // 模块权限验证
  function Jurisdiction() {
      if (passwordValue === $('.password').val()) {
        $('.wages-layout').hide();
        $('.Tips-p').html('');
        $(moduleThat).hide()
      }else {
        $('.Tips-p').html('密码错误，请重新输入！')
      }
  }
</script>