CQ_JD
/
nazw


			
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453
							<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>南岸区大屏</title>
    <link rel="stylesheet" type="text/css" href="css/index.css"/>
    <style type="text/css">
        html,
        body {
            width: 1150px;
            padding: 0;
            margin: 0;
        }

        .one-title {
            height: 20%;
            width: 100%;
            background-image: url(img/nanan-title.png);
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

        @font-face {
            font-family: RUIZIZHENYANTIMIANFEISHANGYONG;
            src: url(./font/RUIZIZHENYANTIMIANFEISHANGYONG-2.TTF);
        }

        /* 第三名动画 */

        .div1 {
            height: 72px;
            position: relative;
            margin-top: 22px;
        }

        .div2 {
            width: 100%;
            height: 72px;
            background: none;
            position: absolute;
            left: 0;
            bottom: 0;
        }

        .mask {
            width: 100%;
            /* height: 72px; */
            /* 高度是变量 */
            position: absolute;
            left: 0;
            top: 0;
            /* top是变量 */
            */
        }

        .mask {
            animation: animate 5s ease infinite;
            overflow: hidden;
        }

        @keyframes animate {
            from {
                height: 0px;
                top: 72px;
                opacity: 0;
            }

            to {
                height: 72px;
                top: 0px;
                opacity: 1;
            }
        }

        /* 第一名动画 */
        .divOne {
            height: 92px;
            position: relative;
            margin-top: 2px;
            overflow: hidden;
        }

        .divTwo {
            width: 100%;
            height: 92px;
            background: none;
            position: absolute;
            left: 0;
            bottom: 0;
        }

        .maskOne {
            width: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }

        .maskOne {
            animation: animateOne 6s 2s ease infinite;
            overflow: hidden;
            opacity: 0;
        }

        @keyframes animateOne {
            from {
                height: 0px;
                top: 92px;
                opacity: 0;
            }

            to {
                height: 92px;
                top: 0px;
                opacity: 1;
            }
        }

        /* 第三名动画 */

        .divT {
            height: 52px;
            position: relative;
            margin-top: 42px;
            overflow: hidden;

        }

        .divThri {
            width: 100%;
            height: 52px;
            background: none;
            position: absolute;
            left: 0;
            bottom: 0;
        }

        .maskTwo {
            width: 100%;
            /* height: 72px; */
            /* 高度是变量 */
            position: absolute;
            left: 0;
            top: 0;
            /* top是变量 */
            */
        }

        .maskTwo {
            animation: animateTwo 6s ease infinite;
            overflow: hidden;
        }

        @keyframes animateTwo {
            from {
                height: 0px;
                top: 52px;
                opacity: 0;
            }

            to {
                height: 52px;
                top: 0px;
                opacity: 1;
            }
        }

        .logo {
            background-image: none;
            text-align: left;
            padding-left: 20px;
            font-family: RUIZIZHENYANTIMIANFEISHANGYONG;
            color: #333;
            background-color: #fff;
            box-sizing: border-box;
            width: 50%;
            letter-spacing: 4px;
        }

        .OneList {

            top: 15px;
        }

        .all {
            width: 1150px;
            position: relative;
            background-color: #EAF1F8;
            min-width: 1150px;
        }

        .topList .title {
            color: #333;
            text-shadow: none;
            position: relative;
        }

        .reportPartsPieList div {
            background-image: none;
            width: 177px;
            margin-top: 20px;

        }

        .commentsList {

            margin: 0;
            display: inline-block;
        }

        .commentsList > div {
            height: 60px;
            width: 100%;
            background-image: none;
            background-size: 100% 100%;
            display: inline-flex;
            align-items: center;
            background-repeat: no-repeat;
            margin-bottom: 0px;
        }

        .bookBarTxt span {
            vertical-align: top;
        }

        .num {
            color: #333;
            font-size: 12px;
        }

        .linghtBlue {
            color: #333;
            font-size: 12px;
            font-weight: bold;
        }

        .commentsList span:last-child {

            font-size: 12px;
            color: #999;
        }

        .itemAll > div > span:not(:last-child) {
            background-image: none;
            background-color: rgba(182, 182, 182, 0.3);
            height: 100%;
            display: inline-block;
            width: 54px;
            line-height: 80px;
            text-align: center;
            font-size: 40px;
            color: #999;
            margin-right: 2px;
        }

        .bookDetail-main li {
            color: #333;
            font-weight: bold;
            width: 17%;
        }

        .lineCon {
            background-image: url(./img/lightList.png);
            background-size: 100% 100%;
            background-repeat: no-repeat;
            width: 60%;
            height: 185px;
            margin: 20px auto;
            position: relative;
            margin-left: 110px;
        }

        .bookDetail-stu,
        .bookDetail-allstu {
            padding: 1px;
            color: #fff;
        }

        .listCon {
            left: -77px;

        }

        .bookDetail-main ul li:first-child {
            width: 30px;
        }

        .licontainerGow {
            padding-left: 0px;

        }

        .licontainer {
            height: 300px;

        }

        .topList .title::after {
            content: '';
            position: absolute;
            width: 10px;
            height: 10px;
            background-color: orange;
            border-radius: 50%;
            top: 9px;
            left: -15px;
            box-shadow: 0 0 10px #f7f7f7, 0 0 20px orange, 0 0 30px orange;
        }

        .topList .title::after {
            content: '';
            position: absolute;
            width: 10px;
            height: 10px;
            background-color: #0990F8;
            border-radius: 50%;
            top: 9px;
            left: -15px;
            box-shadow: 0 0 10px #f7f7f7, 0 0 20px #0990F8, 0 0 30px #0990F8;
        }

        .bookBar {

            border-bottom: 5px solid #ccc;

        }

        .Topblue {
            color: #999;
        }

        .topOne ul,
        .topTwo ul,
        .topThri ul {
            color: #333;
            width: 70%;
        }

        .lineCon img {
            position: absolute;
            width: 120px;
            height: 120px;
            top: 89px;
            left: -34px;
            opacity: 0.6;
            animation: rotate 15s linear infinite;
        }

        .topList img {
            margin: 52px 30px 0 40px;
            width: 50px;
            height: 50px;
        }

        .topList {
            background: #fff;
        }

        .topList i {
            font-size: 20px;
            font-weight: bold;

        }

        .topList li {
            position: relative;
        }

        .topList li:not(:last-child)::before {
            content: '';
            position: absolute;
            width: 1px;
            height: 30px;
            /* border-right: 1px solid red; */
            background-color: #ccc;
            right: -7px;
            top: 17px;
            box-shadow: 0 0 10px #f7f7f7, 0 0 20px #ccc, 0 0 30px #ccc;

        }

        .bookDetail-title span {

            background-color: #333;

        }

        .topOne,
        .topTwo,
        .topThri {
            background-image: none;

        }

        .topTwo::before {
            content: '';
            position: absolute;
            width: 1px;
            height: 90px;
            background-color: #999;
            right: 5px;
            top: 60px;
        }

        .topOne::before {
            content: '';
            position: absolute;
            width: 1px;
            height: 90px;
            background-color: #999;
            right: 5px;
            top: 60px;
        }

        .bookDetail,
        .allInOne,
        .reportParts,
        .itemAll,
        .departmentDetail,
        .comments,
        .line {
            background-image: none;
            background-color: #fff;
        }

        .bookDetail-title {
            color: #333;
        }

        .bookDetail-title:nth-of-type(2) {
            margin-top: 10px;
        }

        .allInOne .title,
        .bookDetail .title,
        .reportParts .title,
        .departmentDetail .title,
        .comments .title,
        .itemAll .title,
        .line .title {
            color: #333;
            text-align: left;
            text-shadow: none;
            margin-left: 10px;
        }

        .bookDetailOne {
            margin-top: 0px;
        }

        .bookBarTxt,
        .bookBar-topTxt {
            font-size: 18px;
            color: #333;

        }

        .itemAll > div > span:last-child {
            color: #999;
        }

        .allInOne-conB div,
        .allInOne-conT div {
            width: 48%;
            height: 100px;
            background-image: url(./img/lightBlue.png);

            background-size: 100% 100%;
            line-height: 100px;
            display: flex;
            justify-content: space-around;
        }

        .allInOne-conB div,
        .allInOne-conT div:nth-last-of-type(2) {
            background-image: url(./img/lightOrange.png);

        }

        .allInOne-conB div,
        .allInOne-conT div:nth-last-of-type(3) {

            background-image: url(./img/lightBluel.png);

        }

        .allInOne-con > div.allInOne-conB > div:nth-child(2) {
            background-image: url(./img/lightGreen.png);
        }

        .reportPartsPieList {
            margin-top: 0px;
        }

        .bookBarTxt {
            font-size: 14px;
        }

        .link-list {
            border: 0.01rem solid #2a89ec;
            text-align: center;
            height: 20px;
            margin-bottom: 5px;
            font-size: 12px;
            line-height: 20px;
            border-radius: 5px;

        }

        a {
            color: #fff;
        }

        .link-list a {
            color: #2a89ec;
        }

        .link-list:hover {
            background-color: #2a89ec;
            color: #fff;

        }

        .link-list:hover a {
            color: #fff;

        }
    </style>
</head>
<body onload="southload()">
<div class="all all_enter_show">
    <div
            style="display: flex;justify-content: space-between;background-color: #fff;border-bottom: 2px solid #C1C1C1;;">
        <div class="logo">
            南岸区政务服务数据统计分析
        </div>
        <div class="showTime" style="position: inherit;margin-top: 31px;color: #0990F8;">
            <div class="timeDeatil" style="line-height: 42px;">10:12:23</div>
            <div class="dateLine" style="line-height: 42px;margin-right: 10px;">|</div>
            <div>
                <p class="dateMon">星期四</p>
                <p class="dateDeatil">2021-09-12</p>
            </div>
        </div>
    </div>

    <div class="main-container">
        <div class="topList">
            <div class="topOne" id="week">
                <p class="title">本周办件数</p>
                <img src='img/listWeek-icon.png'>
                <ul>
                    <li><span class="Topblue">申报</span><br/><i class="numChange" id="weekDeclare">0</i>
                    </li>
                    <li><span class="Topblue">受理</span><br/><i class="numChange" id="weekAcceptance">0</i>
                    </li>
                    <li><span class="Topblue">办结</span><br/><i class="numChange" id="weekConclude">0</i></li>
                </ul>

            </div>
            <div class="topTwo" id="year">
                <p class="title">本年办件数</p>
                <img src="img/listYear-icon.png">
                <ul>
                    <li><span class="Topblue">申报</span><br/><i class="numChange" id="yearDeclare">0</i>
                    </li>
                    <li><span class="Topblue">受理</span><br/><i class="numChange" id="yearAcceptance">0</i>
                    </li>
                    <li><span class="Topblue">办结</span><br/><i class="numChange" id="yearConclude">0</i></li>
                </ul>
            </div>
            <div class="topThri" id="month">
                <p class="title">本月办件数</p>
                <img src="img/listMonth-icon.png">
                <ul>
                    <li><span class="Topblue">申报</span><br/><i class="numChange" id="monthDeclare">0</i>
                    </li>
                    <li><span class="Topblue">受理</span><br/><i class="numChange" id="monthAcceptance">0</i>
                    </li>
                    <li><span class="Topblue">办结</span><br/><i class="numChange" id="monthConclude">0</i>
                    </li>
                </ul>
            </div>
        </div>
        <div class="bottomList">
            <div class="Bottomone">
                <div class="bookDetail">
                    <div class="title">部门办件情况</div>
                    <div class="bookDetailOne">
                        <div class="bookDetail-title">
                            <span></span>
                            本月部门办件排序
                        </div>
                        <div class="booktop">
                            <div class="bookBar">
                                <div class="div1">
                                    <!-- <div id="chartsAll"></div> -->
                                    <div class="mask">
                                        <div class="bookBar-topTxt" id="second_number">2500件</div>
                                        <div class="div2">
                                            <div class="fontNum">2</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="divOne">
                                    <!-- <div id="chartsAll"></div> -->
                                    <div class="maskOne">
                                        <div class="bookBar-topTxt" id="first_number"><img
                                                src="img/皇冠.png">3500件
                                        </div>
                                        <div class="divTwo">
                                            <div class="fontNumOne">1</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="divT">
                                    <!-- <div id="chartsAll"></div> -->
                                    <div class="maskTwo">
                                        <div class="bookBar-topTxt" id="third_number">1100件</div>
                                        <div class="divThri">
                                            <div class="fontNumTwo">3</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="bookBarTxt">
                                <span id="second_name">区医保局</span>
                                <span id="first_name">区人社局 </span>
                                <span id="third_name">区市场监管局 </span>
                            </div>
                        </div>
                    </div>
                    <div class="bookDetailOne">
                        <div class="bookDetail-title" style="margin-top: 10px;">
                            <span></span>
                            事项排序
                        </div>
                        <div class="booktop">
                            <div class="bookBar detailOne">
                                <div class="div1">
                                    <div class="mask">
                                        <div class="bookBar-topTxt" id="matter_sort_two_number">1927件</div>
                                        <div class="div2">
                                            <div class="fontNum">2</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="divOne">
                                    <div class="maskOne">
                                        <div class="bookBar-topTxt" id="matter_sort_one_number"><img
                                                src="img/皇冠.png"></div>
                                        <div class="divTwo">
                                            <div class="fontNumOne">1</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="divT">
                                    <div class="maskTwo">
                                        <div class="bookBar-topTxt" id="matter_sort_three_number">1461件</div>
                                        <div class="divThri">
                                            <div class="fontNumTwo">3</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="bookBarTxt">
                                <span id="matter_sort_two">个体工商户注销登记</span>
                                <span id="matter_sort_one">个体工商户设立登记 </span>
                                <span id="matter_sort_three">内资企业及分支机构变更登记 </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="departmentDetail" id="good_or_bad">
                    <div class="title">好差评</div>
                    <div style="width:100%;display:flex;justify-content: space-evenly;">
                        <div class="link-box r" style="width:90px;margin:0 10px;">
                            <div class="link-list">
                                <a href="https://zwykb.cq.gov.cn/cbl/grzx/?my-work/my-works"
                                   target="_blank">评价我的办件</a>
                            </div>
                            <div class="link-list">
                                <a href="https://zwykb.cq.gov.cn/cbl/grzx/?my-work/my-works"
                                   target="_blank">评价窗口人员</a>
                            </div>
                            <div class="link-list">
                                <a href="https://zwykb.cq.gov.cn/hcp/pj/" target="_blank">评价办事指南</a>
                            </div>
                            <div class="link-list">
                                <a href="https://zwykb.cq.gov.cn/hcp/?comment/commentWorkGuide"
                                   target="_blank">评价服务应用</a>
                            </div>
                            <div class="link-list">
                                <a href="https://zwykb.cq.gov.cn/cbl/grzx/?my-papers" target="_blank">评价电子证照</a>
                            </div>
                        </div>
                        <div class="commentsList">
                            <div>
                                <img src="img/评价总量小元素.png"
                                     style="margin-left: 10px;margin-top: 9px;width: 44px;">
                                <div class="" style="margin-left:23px;">
                                    <p class="num">本年评价总量</p>
                                    <i class="linghtBlue"><span id="timer20">205165</span><span>条</span></i>
                                </div>
                            </div>
                            </br>
                            <div>
                                <img src="img/满意度小元素.png"
                                     style="margin-left: 10px;margin-top: 9px;width: 44px;">
                                <div class="" style="margin-left: 23px;">
                                    <p class="num">满意度</p>
                                    <i class="linghtBlue"><span id="timer21">100</span>%<span></span></i>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="commentsBar" id="main" style="width: 100%;height:100px;">

                    </div>
                </div>
            </div>
            <div class="Bottomtwo">
                <div class="allInOne">
                    <div class="title">一窗通办</div>
                    <div class="allInOne-con">
                        <div class="allInOne-conT">
                            <div><span style="color: #fff;font-size: 16px;">申请数</span>
                                <i id="timer10" class="numChange"
                                   style="color: #fff;font-size: 24px;font-weight: bold;">52400</i>
                            </div>
                            <div><span style="color: #fff;font-size: 16px;">办件数</span>
                                <i id="timer11" class="numChange"
                                   style="color: #fff;font-size: 24px;font-weight: bold;">52387</i>
                            </div>
                        </div>
                        <div class="allInOne-conB">
                            <div><span style="color: #fff;font-size: 16px;">不予受理数</span>
                                <i id="timer12" class="numChange"
                                   style="color: #fff;font-size: 24px;font-weight: bold;">13</i>
                            </div>
                            <div><span style="color: #fff;font-size: 16px;">办结数</span>
                                <i id="timer13" class="numChange"
                                   style="color: #fff;font-size: 24px;font-weight: bold;">52307</i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="comments">
                    <div class="title">实时办件详情</div>

                    <div class="bookDetail-main">
                        <ul style="display: flex;margin-top: 21px;">
                            <li>状态</li>
                            <li>受理部门</li>
                            <li>办理名称</li>
                            <li>受理日期</li>
                            <li>承诺日期</li>
                        </ul>
                        <div class="licontainer">
                            <div class="licontainerGow" id="handling_info">
                                <!-- <ul style="display: flex;">
                                    <li><span class="bookDetail-stu">在办</span></li>
                                    <li>市场监管局</li>
                                    <li class="txtOverHidden">个体工商户设立登记</li>
                                    <li class="txtOverHidden">2021.05.07</li>
                                    <li class="txtOverHidden">2021.05.08</li>
                                </ul>
                                <ul style="display: flex;">
                                    <li><span class="bookDetail-allstu">办结</span></li>
                                    <li>市场监管局</li>
                                    <li class="txtOverHidden">关于*个体工商户注销登记的业务</li>
                                    <li>2021.05.07</li>
                                    <li>2021.05.08</li>
                                </ul>
                                <ul style="display: flex;">
                                    <li><span class="bookDetail-allstu">办结</span></li>
                                    <li>南岸区交通局</li>
                                    <li class="txtOverHidden">网络预约出租汽车车辆许可</li>
                                    <li>2021.05.07</li>
                                    <li>2021.05.08</li>
                                </ul>
                                <ul style="display: flex;">
                                    <li><span class="bookDetail-allstu">办结</span></li>
                                    <li>区卫健委</li>
                                    <li class="txtOverHidden">（含外国医师来华短期行医许可，台湾地区医师在大陆短期行医许可，香港、澳门特别行政区医师在内地短期行医许可）（同一执业地点多执业机构备案）</li>
                                    <li>2021.05.07</li>
                                    <li>2021.05.08</li>
                                </ul>
                                <ul style="display: flex;">
                                    <li><span class="bookDetail-allstu">办结</span></li>
                                    <li>卫健委</li>
                                    <li class="txtOverHidden">关于重庆艾美齿口腔诊所有限公司南岸六公里口腔诊所医疗机构执业登记（申请变更法定代表人或主要负责人）的业务</li>
                                    <li>2021.05.07</li>
                                    <li>2021.05.08</li>
                                </ul>
                                <ul style="display: flex;">
                                    <li><span class="bookDetail-allstu">办结</span></li>
                                    <li>区卫健委</li>
                                    <li class="txtOverHidden">含外国医师来华短期行医许可，台湾地区医师在大陆短期行医许可，香港、澳门特别行政区医师在内地短期行医许可）（变更执业地点）</li>
                                    <li>2021.05.07</li>
                                    <li>2021.05.08</li>
                                </ul>
                                <ul style="display: flex;">
                                    <li><span class="bookDetail-allstu">办结</span></li>
                                    <li>卫健委</li>
                                    <li class="txtOverHidden">关于廖英公共场所卫生许可（除饭馆、咖啡馆、酒吧、茶座等）（注销）的业务</li>
                                    <li>2021.05.07</li>
                                    <li>2021.05.08</li>
                                </ul>
                                <ul style="display: flex;">
                                    <li><span class="bookDetail-allstu">办结</span></li>
                                    <li>卫健委</li>
                                    <li class="txtOverHidden">关于刘强医师执业注册（含外国医师来华短期行医许可，台湾地区医师在大陆短期行医许可，香港、澳门特别行政区医师在内地短期行医许可）（注销医师执业注册备案）的业务</li>
                                    <li>2021.05.07</li>
                                    <li>2021.05.08</li>
                                </ul>
                                <ul style="display: flex;">
                                    <li><span class="bookDetail-allstu">办结</span></li>
                                    <li>市场监管局</li>
                                    <li class="txtOverHidden">关于南岸区今朝醉烟酒商行个体工商户设立登记的业务</li>
                                    <li>2021.05.07</li>
                                    <li>2021.05.08</li>
                                </ul>
                                <ul style="display: flex;">
                                    <li><span class="bookDetail-allstu">办结</span></li>
                                    <li>卫健委</li>
                                    <li class="txtOverHidden">关于朱树权医师执业注册（含外国医师来华短期行医许可，台湾地区医师在大陆短期行医许可，香港、澳门特别行政区医师在内地短期行医许可）（变更执业地点）的业务</li>
                                    <li>2021.05.07</li>
                                    <li>2021.05.08</li>
                                </ul>

                                <ul style="display: flex;">
                                    <li><span class="bookDetail-allstu">办结</span></li>
                                    <li>卫健委</li>
                                    <li class="txtOverHidden">关于陈小刚公共场所卫生许可（除饭馆、咖啡馆、酒吧、茶座等）（新办）的业务</li>
                                    <li>2021.04.30</li>
                                    <li>2021.05.06</li>
                                </ul>
                                <ul style="display: flex;">
                                    <li><span class="bookDetail-allstu">办结</span></li>
                                    <li>卫健委</li>
                                    <li class="txtOverHidden">关于张京川医师执业注册（含外国医师来华短期行医许可，台湾地区医师在大陆短期行医许可，香港、澳门特别行政区医师在内地短期行医许可）（同一执业地点多执业机构备案）的业务</li>
                                    <li>2021.05.07</li>
                                    <li>2021.05.08</li>
                                </ul>

                                <ul style="display: flex;">
                                    <li><span class="bookDetail-allstu">办结</span></li>
                                    <li>文化旅游委</li>
                                    <li class="txtOverHidden">关于重庆广亦辰文化关于重庆广亦辰文化 ...</li>
                                    <li>2021.04.02</li>
                                    <li>2021.04.08</li>
                                </ul>
                                <ul style="display: flex;">
                                    <li><span class="bookDetail-allstu">办结</span></li>
                                    <li>文化旅游委</li>
                                    <li class="txtOverHidden">关于重庆广亦辰文化关于重庆广亦辰文化 ...</li>
                                    <li>2021.05.07</li>
                                    <li>2021.05.08</li>
                                </ul>
                                <ul style="display: flex;">
                                    <li><span class="bookDetail-stu">在办</span></li>
                                    <li>文化旅游委</li>
                                    <li class="txtOverHidden">关于重庆广亦辰文化关于重庆广亦辰文化 ...</li>
                                    <li>2021.05.07</li>
                                    <li>2021.05.08</li>
                                </ul>
                                <ul style="display: flex;">
                                    <li><span class="bookDetail-stu">在办</span></li>
                                    <li>文化旅游委</li>
                                    <li class="txtOverHidden">关于重庆广亦辰文化关于重庆广亦辰文化 ...</li>
                                    <li>2021.05.07</li>
                                    <li>2021.05.08</li>
                                </ul>
-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="Bottomthri">
                <div class="reportParts">
                    <div class="title">互联网申报情况</div>
                    <div class="" style="display: flex;">
                        <div class="reportPartsPie" id="Piecontainer" style="height: 200px;margin-top:0px;">

                        </div>
                        <!-- 		<div class="circular"></div> -->

                        <div class="reportPartsPieList" id="web">
                            <div class="circular"
                                 style="width: 10px; height: 10px; margin-top: 49px;margin-left: 35px;background-color:#E6A51A ;position: absolute;border-radius: 50%;">
                            </div>
                            <div>

                                <p class="borderweb" style="font-size: 16px;color: #E6A51A;"></p>
                                <span style="font-size: 16px;
    color: #333;
    margin-left: 15px;
    width: 35px;
    word-break: break-all;
    
    display: inline-block;
    line-height: 19px;">网上申报</span>
                                <span id="timer14" class="numChange"
                                      style="font-size: 20px;color: #333;margin-left: 15px;">29801</span>
                                <i style="font-size: 16px;color: #999;">件</i>
                            </div>
                            <div>
                                <div class="circular"
                                     style="width: 10px; height: 10px; margin-top: 32px;margin-left: 15px; background-color:#1585f7; position: absolute;border-radius: 50%;">
                                </div>
                                <p class="borderwindow" style="font-size: 16px;color: #333;"></p>
                                <span style=" margin-left: 15px;
    width: 35px;
    word-break: break-all;
  
    display: inline-block;
    line-height: 19px;">窗口申报</span>
                                <span id="timer15" class="numChange"
                                      style="font-size: 20px;color: #333;margin-left: 15px;">15834</span>
                                <i style="font-size: 16px;color: #999;">件</i>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="itemAll">
                    <div class="title">南岸区政务服务事项总数</div>
                    <div class="itemAllnum" id="totals">
                        <span>0</span>
                        <span>0</span>
                        <span style="color:#0990f8;">6</span>
                        <span style="color:#0990f8;">7</span>
                        <span style="color:#0990f8;">0</span>
                        <span style="color:#0990f8;">6</span>
                        <span style="color:#0990f8;">0</span>
                        <span>项</span>
                    </div>
                </div>
                <div class="line">
                    <div class="title">
                        一件事一次办
                    </div>
                    <div class="lineCon">
                        <img src="img/lightCir.png">
                        <div class="listCon">
                            <p style="color: #333;font-size: 18px;">套餐数量</p>
                            <p><span id="timer16" class="numChange"
                                     style="color: #333;font-size: 28px;">258</span><span
                                    style="color: #999;margin-left: 8px;font-size: 16px;">件</span></p>
                        </div>
                        <div class="OneList">
                            <span style="margin-right:-2px;color: #333;font-size: 13px;">减环节</span>
                            <span id="timer17" class="numChange"
                                  style="color: #333;font-size: 14px;">1622</span>
                            <span style="color: #999;font-size: 12px;">件</span>
                        </div>
                        <div class="TwoList">
                            <span style="margin-right:7px;color: #333;font-size: 13px;">减跑动</span>
                            <span id="timer18" class="numChange" style="color: #333;font-size: 14px;">799</span>
                            <span style="color: #999;font-size: 12px;">件</span>
                        </div>
                        <div class="ThriList">
                            <span style="margin-right:7px;color: #333;font-size: 13px;">减材料</span>
                            <span id="timer19" class="numChange" style="color: #333;font-size: 14px;">465</span>
                            <span style="color: #999;font-size: 12px;">件</span>
                        </div>
                    </div>
                </div>


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

</div>
<script src="js/highcharts.js"></script>
<script src="js/highcharts-3d.js"></script>
<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
<script src="js/grid-light.js"></script>
<script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/south.js"></script>
<script id="_trs_ta_js" src="//ta.trs.cn/c/js/ta.js?mpid=3973" async="async" defer="defer"></script>
<!--<script>-->
<!--    // PC端 移动端 跳转-->
<!--    var is_mobi = navigator.userAgent.toLowerCase().match(/(ipod|iphone|android|coolpad|mmp|smartphone|midp|wap|xoom|symbian|j2me|blackberry|wince)/i) != null;-->
<!--    if (is_mobi) {-->
<!--        window.parent.location.href = "enter_showLightMobile.html";-->
<!--    }-->
<!--</script>-->
<script>
    var data = '';

    //网络窗口加载加载
    $("#web").ready(function () {
        // stop
        // setInterval( "initMain1()", iFrequency1 );  // run
        get()
    });
    console.log(window.setInterval("get()", 1000 * 5));

    function get() {
        data = handlingNumber(1, 3)
        $("#timer14").html(data.applicationNumberNetwork)
        $("#timer15").html(data.applicationNumberWindow)
        var webCount = (data.applicationNumberNetwork / (data.applicationNumberWindow + data.applicationNumberNetwork))
            .toFixed(
                10) * 100

        // 基于准备好的容器(这里的容器是id为chart1的div)，初始化echarts实例
        var chart1 = echarts.init(document.getElementById("Piecontainer"));
        option = {
            tooltip: {
                trigger: 'item'
            },
            // legend: {
            //     top: '5%',
            //     left: 'center'
            // },
            title: {
                text: '网上申报率（' + webCount.toFixed(3).slice(0, -1) + '%）',
                x: 'center',
                y: 'top',
                textAlign: 'left',
                // 主标题文本样式设置
                textStyle: {
                    fontSize: 13,
                    fontWeight: 'bolder',
                    color: '#fff'
                }
            },
            series: [{
                name: '申报件数',
                type: 'pie',
                radius: ['30%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: false,
                        fontSize: '80',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [{
                    value: data.applicationNumberWindow,
                    name: '窗口申报',
                    itemStyle: {
                        color: '#128CD4'
                    }
                },
                    {
                        value: data.applicationNumberNetwork,
                        name: '网上申报',
                        itemStyle: {
                            color: '#CB9217'
                        }
                    },

                ]
            }]
        };
        // option.legend[0].selected[params.name] = true;

        // 使用刚指定的配置项和数据显示图表
        chart1.setOption(option)


        //   var chart = Highcharts.chart('Piecontainer', {

        // 	chart: {

        // 		type: 'pie',
        // 		// color: {
        // 		//   radialGradient: { cx: 0.5, cy: 0.5, r: 0.5 },
        // 		//   stops: [
        // 		//      [0, '#003399'],
        // 		//      [1, '#3366AA']
        // 		//   ]
        // 		// },

        // 		options3d: {
        // 			enabled: true,
        // 			alpha: 60, //内旋角度
        // 			beta: 0, //外旋角度
        // 			// depth:600,


        // 		}

        // 	},

        //      credits: {
        //                enabled:false
        //      },
        // 	title: {
        // 		text: '网上申报率（'+  webCount.toFixed(3).slice(0,-1)+'%）',
        // 		style: {
        // 			color: "#fff"
        // 		},
        // 		x: -5,
        // 		y: 60

        // 	},
        // 	plotOptions: {
        // 		pie: {
        // 			innerSize: 40, //饼图变为环形图
        // 			depth: 50, //定义饼图的高度
        // 			dataLabels: {
        // 				enabled: false,
        // 				// 通过 format 或 formatter 来格式化数据标签显示
        // 				//format: '值: {point.y} 占比 {point.percentage} %',
        // 				formatter: function() {
        // 					//this 为当前的点（扇区）对象，可以通过  console.log(this) 来查看详细信息
        // 					return '<b>' + this.point.name + '</b> ' + '<br/>' + '(' + Highcharts.numberFormat(this.percentage, 1) +
        // 						'% )';
        // 				}
        // 			}

        // 		},
        // 		showInLegend: true


        // 	},
        // 	tooltip: {
        // 		formatter: function() {
        // 			return '<b>' + this.point.name + '</b>: ' + Highcharts.numberFormat(this.percentage, 1) + '% (' +
        // 				Highcharts.numberFormat(this.y, 0, ',') + ' 个)';
        // 		}
        // 	},

        // 	series: [{

        // 		data: [
        // 			['网上申报', data.applicationNumberNetwork],
        // 			['窗口申报', data.applicationNumberWindow],

        // 		]
        // 	}]
        // });
    }

    function initBar() {
        var json = ''
        $.ajax({
            url: path + "/goodOrbad/getGoodOrBadByYearAndArea", //url地址
            dataType: "json", //返回的数据类型
            type: "get", //发起请求的方式
            async: false,
            data: {
                "area": 1
            },
            success: function (data) {

                json = data.data

                $("#timer20").html(json.veryDissatisfied + json.notSatisfied + json.basicSatisfied + json
                    .satisfied + json.great)
                var goods = (json.good / json.goodOrBad).toFixed(10) * 100;
                $("#timer21").html(goods.toFixed(3).slice(0, -1))
            },


            error: function () {
                alert('网络错误，请稍后再试！');
            }
        });
        return json
    }

    function getBar(json) {


        return {

            grid: { //坐标轴的位置
                top: '5%',
                left: '0px',
                bottom: '3%',
                containLabel: true, //包含文字
                y2: 140
            },
            // grid: {
            // 	y2: 140
            // },

            xAxis: {
                type: 'value',
                position: 'top',
                axisLabel: {
                    show: true,
                    color: function (value, index) {
                        return '#46689b'
                    },
                    fontSize: 15,
                },
                max: 700000,
                min: 0,
                splitNumber: 2,
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisLabel: {
                    interval: 0
                },
            },
            yAxis: {
                type: 'category',
                data: ['非常不满意', '不满意', '基本满意', '满意', ' 非常满意'],
                axisLabel: {
                    show: true,
                    interval: 0,
                    color: function (value, index) {
                        return '#46689b'
                    },
                    fontSize: 14,
                },
                axisTick: {
                    show: false
                },

                splitLine: {
                    show: false
                },
            },
            tooltip: {
                trigger: 'axis',
                axisPoniter: {
                    type: 'line',
                    z: 0,
                    lineStyle: {
                        width: 36,
                        color: '#2d3443'
                    }
                }
            },
            animationEasing: 'linear',
            series: [{
                animationDelay: function (idx) {
                    return idx * 500;
                },


                name: '访问来源',
                type: 'bar',
                barWidth: 16,
                radius: '65%',
                label: {
                    show: true,
                    position: 'right',
                    textStyle: {
                        color: '#46689b',
                    }


                },
                itemStyle: {
                    barBorderRadius: [0, 8, 8, 0],
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                        offset: 0,
                        color: '#0042FD'
                    }, //柱图渐变色
                        {
                            offset: 0.5,
                            color: '#0092F8'
                        }, //柱图渐变色
                        {
                            offset: 1,
                            color: '#00EAF1'
                        },
                    ])
                },
                data: [
                    json.veryDissatisfied, json.notSatisfied, json.basicSatisfied, json.satisfied, json.great
                ]
            }]


        }
    }

    var json = initBar();
    var dailyBarOption = getBar(json);
    var myChart1 = echarts.init(document.getElementById('main'));
    myChart1.setOption(dailyBarOption);


    setInterval(function () {
        var json1 = initBar();
        myChart1.dispose();
        $(".commentsBar").html("");
        myChart1 = echarts.init(document.getElementById('main'));
        myChart1.setOption(getBar(json1));
    }, 8000);
    // 计时器
    // window.onload = function() {
    // 	//点击开始建 开始计数
    // 	var count = 5000;
    // 	var timer = null //timer变量记录定时器setInterval的返回值
    // 	timer = setInterval(function() {
    // 		count++;
    // 		count = showNum(count);
    // 		var listNum = String(count).split('');
    // 		var allnumList = $('.itemAllnum span');
    // 		for (var i = 0; i < allnumList.length - 1; i++) {
    // 			var con = listNum[i];
    // 			$(allnumList[i]).text(con);
    // 			// allnumList[i].innerText(con);
    // 			// console.log(allnumList[i])
    // 		}
    // 		// 需要改变页面上时分秒的值
    // 		if (count > 9999) {
    // 			clearInterval(timer)
    // 		}

    // 	}, 1000)
    // 	//封装一个处理单位数字的函数
    // 	function showNum(num) {
    // 		if (num < 1000000) {
    // 			return '000' + num
    // 		}
    // 		return num
    // 	}
    // }

    function countDown(maxtime, endNum, step, fn) {
        var timer = setInterval(function () {
            if (maxtime < endNum) {
                msg = maxtime;
                fn(msg);
                maxtime++;
            } else {
                clearInterval(timer);
            }
        }, step);
    }

    // countDown(146, 1000, 3000, function(msg) {
    // 	$('#timer10').text(msg);
    // })
    // countDown(176, 800, 5000, function(msg) {
    // 	$('#timer11').text(msg);
    // })
    // countDown(256, 900, 1000, function(msg) {
    // 	$('#timer12').text(msg);
    // })
    // countDown(146, 700, 2000, function(msg) {
    // 	$('#timer13').text(msg);
    // })
    // countDown(1000, 4000, 1000, function(msg) {
    // 	$('#timer14').text(msg);
    // })
    // countDown(46, 400, 2000, function(msg) {
    // 	$('#timer15').text(msg);
    // })
    // countDown(0, 30, 3000, function(msg) {
    // 	$('#timer16').text(msg);
    // })
    // countDown(11, 99, 6000, function(msg) {
    // 	$('#timer17').text(msg);
    // })
    // countDown(32, 99, 7000, function(msg) {
    // 	$('#timer18').text(msg);
    // })
    // countDown(17, 99, 2000, function(msg) {
    // 	$('#timer19').text(msg);
    // })
    // countDown(342, 15421, 3000, function(msg) {
    // 	$('#timer20').text(msg);
    // })
    // countDown(3, 100, 7000, function(msg) {
    // 	$('#timer21').text(msg);
    // })


    //时间
    var t = null;
    t = setTimeout(time, 1000); //開始运行
    function time() {
        clearTimeout(t); //清除定时器
        dt = new Date();
        var y = dt.getFullYear();
        var mt = showDateNum(dt.getMonth() + 1);
        var day = showDateNum(dt.getDate());
        var mon = showMonNum(dt.getDay()); //获取星期
        var h = showDateNum(dt.getHours()); //获取时;
        var m = showDateNum(dt.getMinutes()); //获取分
        var s = showDateNum(dt.getSeconds()); //获取秒
        document.querySelector(".timeDeatil").innerHTML = h + ':' + m + ':' + s;
        document.querySelector(".dateMon").innerHTML = mon;
        document.querySelector(".dateDeatil").innerHTML = y + '-' + mt + '-' + day;
        t = setTimeout(time, 1000); //设定定时器，循环运行
    }

    //处理日期数字
    function showDateNum(num) {
        if (num < 10) {
            return '0' + num
        }
        return num
    }

    //处理星期
    function showMonNum(num) {
        switch (num) {

            case 1:

                num = '星期一';

                break;

            case 2:

                num = '星期二';

                break;

            case 3:
                num = '星期三';
                break;
            case 4:
                num = '星期四';
                break;
            case 5:
                num = '星期五';
                break;
            case 6:
                num = '星期六';
                break;
            case 0:
                num = '星期日';
                break;
        }
        return num
    }
</script>


</body>
</html>