CQ_JD
/
nazw


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name=”SiteName” content=”重庆市南岸区人民政府”>
    <meta name="SiteDomain" content="http://www.cqna.gov.cn" />
    <meta name="SiteIDCode" content="5001080014">
    <meta name="ColumnName" content="政务全景通">
    <meta name="ColumnDescription" content="政务全景通" />
    <meta name="ColumnKeywords" content="政务全景通" />
    <meta name="ColumnType" content="政务全景通" />
    <title>政务全景通-重庆市南岸区人民政府网</title>
    <script src="https://www.cqna.gov.cn/syygapi/naxsb/3ddemo/three.js"></script>
    <script src="https://www.cqna.gov.cn/syygapi/naxsb/3ddemo/Detector.js"></script>
    <script src="https://www.cqna.gov.cn/syygapi/naxsb/3ddemo/examples/js/libs/stats.min.js"></script>
    <script src="https://www.cqna.gov.cn/syygapi/naxsb/3ddemo/examples/js/controls/OrbitControls.js"></script>
    <script src="https://www.cqna.gov.cn/syygapi/naxsb/3ddemo/examples/js/loaders/GLTFLoader.js"></script>
    <script src="https://www.cqna.gov.cn/syygapi/naxsb/3ddemo/examples/js/loaders/DRACOLoader.js"></script>
    <script src="https://www.cqna.gov.cn/syygapi/naxsb/3ddemo/examples/js/renderers/CSS3DRenderer.js"></script>
    <script src="https://www.cqna.gov.cn/syygapi/naxsb/3ddemo/examples/js/renderers/CSS2DRenderer.js"></script>
    <!-- 引入 Vue -->
    <script src="https://www.cqna.gov.cn/syygapi/naxsb/js/vue.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://www.cqna.gov.cn/syygapi/naxsb/css/index.css">
    <link rel="stylesheet" href="css/qjt.css">
    <!-- 引入组件库 -->
    <script src="https://www.cqna.gov.cn/syygapi/naxsb/js/index.js"></script>
    <script src="js/echarts.min.js"></script>
    <script src="https://www.cqna.gov.cn/syygapi/naxsb/js/jquery-3.5.1.min.js"></script>
    <script src="https://www.cqna.gov.cn/syygapi/naxsb/js/urljson.js"></script>
    <style>
        @media screen and (max-width:1600px) {

            html,
            body {
                font-size: 14px;
            }

            .qjttitle {
                height: 95px;
            }

            .nowtime {
                top: 50px;
            }
        }

        @media screen and (max-width:1300px) {

            html,
            body {
                font-size: 10px;
            }

            .qjttitle {
                height: 85px;
            }

            .nowtime {
                top: 45px;
            }
        }

        .building-box {
            cursor: pointer;
        }

        @keyframes blink {
            from {
                opacity: 1;
            }

            to {
                opacity: 0;
            }
        }

        .finger {
            position: absolute;
            top: -60px;
            right: 20px;
            color: #FF8000;
            font-size: 20px;
        }

        .top_t {
            padding: 10px 0;
            border-bottom: 1px solid #5482F9;
            height: 26px;
            justify-content: space-between;
        }

        .top_t,
        .bottom-t {
            width: 100%;
            display: flex;
            font-size: 18px;
            color: #5482F9;
        }

        .bottom-t {
            flex-direction: column;
            overflow-y: scroll;
        }

        .bottom-t::-webkit-scrollbar {
            display: none;
            /* Chrome, Safari 和 Opera */
            -ms-overflow-style: none;
            /* IE 和 Edge */
            scrollbar-width: none;
            /* Firefox */
        }

        .bottom-t .item {
            width: 100%;
            display: flex;
            font-size: 16px;
            padding: 10px 0;
            justify-content: space-between;
            border-bottom: 1px solid #5482F9;
        }

        .t1 {
            width: 70px;
            text-align: center;
        }

        .t1 span {
            background: #1D96E9;
            border: 1px solid #1D96E9;
            padding: 0 5px;
            border-radius: 2px;
            color: #fff;
        }

        .t2 {
            width: 100px;
            text-align: center;
            overflow: hidden;
            word-break: break-all;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .t3 {
            width: calc(100% - 230px);
            text-align: center;
            overflow: hidden;
            word-break: break-all;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    </style>
</head>

<body>
    <div style="width:100%;" class="header"></div>
    <div class="container" style="position: relative;">
        <div class="row">
            <div class="col-sm-12">
                <div class="model-container"
                    style="background: linear-gradient(180deg, rgb(246, 250, 255) 10%, rgb(214, 224, 235) 70%);">
                    <div class="model-view">
                        <canvas id="canvas-model-view" style="width: 100%;height: 100%;">您的浏览器不支持canvas!</canvas>
                    </div>
                    <div id="qjt">
                        <div class="qjttitle"></div>
                        <div class="nowtime">{{currentTime }}</div>
                        <div class="onefloor conList">
                            <div class="floortitle">叫号数据</div>
                            <div class="floorcontent">
                                <div class="list blue">
                                    <div class="top radio">当前排队人数：</div>
                                    <div class="bottom">
                                        <img src="https://www.cqna.gov.cn/syygapi/naxsb/images/floor1.png" alt="">
                                        <div><span class="number" id="currWaitPeople2">-</span>
                                            <span>人</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="list yellow">
                                    <div class="top radio">可办事项数量：</div>
                                    <div class="bottom">
                                        <img src="https://www.cqna.gov.cn/syygapi/naxsb/images/floor2.png" alt="">
                                        <div><span class="number" id="taskNum2">-</span>
                                            <span>项</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="list green">
                                    <div class="top radio">平均等待时长：</div>
                                    <div class="bottom">
                                        <img src="https://www.cqna.gov.cn/syygapi/naxsb/images/floor3.png" alt="">
                                        <div><span class="number" id="waitTime2">-</span>
                                            <span>分钟</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="list purple">
                                    <div class="top radio">窗口数：</div>
                                    <div class="bottom">
                                        <img src="https://www.cqna.gov.cn/syygapi/naxsb/images/floor4.png" alt="">
                                        <div><span class="number" id="winNum2">-</span>
                                            <span>个</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="twofloor conList">
                            <div class="floortitle">实时办件详情</div>
                            <!-- <div class="floortitle">交通配套</div> -->
                            <div class="floorcontent" style="flex-wrap: nowrap;flex-direction: column;padding: 5px;">
                                <div class="top_t">
                                    <div class="t1">状态</div>
                                    <div class="t2">受理部门</div>
                                    <div class="t3">办理名称</div>
                                </div>
                                <div style="width: 100%;height:100%;overflow:hidden;">
                                    <div class="bottom-t">
                                        <div class="item" v-for="(item, index)  in bjxqList">
                                            <div class="title t1"><span
                                                    v-if="item.state&&item.state=='在办'">{{item.state}}</span>
                                                <span style="background: #18A65A;border: 1px solid #18A65A;"
                                                    v-else>{{item.state}}</span>
                                            </div>
                                            <div class="date t2" :title="item.acceptedDepartment">
                                                {{item.acceptedDepartment}}</div>
                                            <div class="date t3" :title="item.handlingName">
                                                {{item.handlingName?item.handlingName.split("—")[0]:''}}</div>
                                        </div>
                                    </div>
                                </div>
                                <!--  <div class="list blue">
                                    <div class="top radio">公交车站：</div>
                                    <div class="bottom">
                                        <img src="https://www.cqna.gov.cn/syygapi/naxsb/images/floor1.png" alt="">
                                        <div>
                                            <span>天福路口站</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="list yellow">
                                    <div class="top radio">公交线路：</div>
                                    <div class="bottom">
                                        <img src="https://www.cqna.gov.cn/syygapi/naxsb/images/floor2.png" alt="">
                                        <div>
                                            <span>144路 &nbsp; 180路 &nbsp; 188路 &nbsp; 345路</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="list green">
                                    <div class="top radio">停车场：</div>
                                    <div class="bottom">
                                        <img src="https://www.cqna.gov.cn/syygapi/naxsb/images/floor3.png" alt="">
                                        <div>
                                            <span style="white-space: nowrap;">行政中心室外/地下停车场</span><br />盛捷公寓停车场
                                        </div>
                                    </div>
                                </div>-->
                            </div>
                        </div>
                        <div class="blsl conList">
                            <div class="floortitle">累计办理数量</div>
                            <div class="floorcontent">
                                <div class="list">
                                    <div class="img">
                                        <img src="https://www.cqna.gov.cn/syygapi/naxsb/images/blsl4.png" alt="">
                                    </div>
                                    <div class="right">
                                        <span>本日办理数量</span>
                                        <div class="number">
                                            <span id="currDayTaskNum">324</span>
                                            <span>件</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="list">
                                    <div class="img">
                                        <img src="https://www.cqna.gov.cn/syygapi/naxsb/images/blsl1.png" alt="">
                                    </div>
                                    <div class="right">
                                        <span>本周办理数量</span>
                                        <div class="number">
                                            <span id="currWeekTaskNum">7152</span>
                                            <span>件</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="list">
                                    <div class="img">
                                        <img src="https://www.cqna.gov.cn/syygapi/naxsb/images/blsl2.png" alt="">
                                    </div>
                                    <div class="right">
                                        <span>本月办理数量</span>
                                        <div class="number">
                                            <span id="currMonthTaskNum">78</span>
                                            <span>件</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="list">
                                    <div class="img">
                                        <img src="https://www.cqna.gov.cn/syygapi/naxsb/images/blsl3.png" alt="">
                                    </div>
                                    <div class="right">
                                        <span>本年办理数量</span>
                                        <div class="number">
                                            <span id="currYearTaskNum">78</span>
                                            <span>件</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="pdgdf conList">
                            <div class="floortitle">大厅取号高低峰图</div>
                            <div class="floorcontent">
                                <div id="pdgdfechart" style="width: 100%;height: 100%;"></div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="loading">
            <i class="fa fa-spinner fa-spin fa-fw"></i>加载中...
        </div>
    </div>
    <div style="width:100%;" class="footer"></div>
</body>
<script>
    $(function () {
        /*公共部分
        * 导航栏
        * footer CopyRight
        */
        $(".header").load('https://www.cqna.gov.cn/syygapi/naxsb/top/top_style.html');
        $(".footer").load('https://www.cqna.gov.cn/syygapi/naxsb/footer/footer.html');
    });
</script>
<script src="https://www.cqna.gov.cn/syygapi/naxsb/js/jquery-3.5.1.min.js"></script>
<script>
    // 判断浏览器是否支持 webgl
    if (!Detector.webgl) Detector.addGetWebGLMessage();
    let mwidth = window.innerWidth;
    let mheight = window.innerHeight;
    // 初始化场景
    let scene = new THREE.Scene();
    // 初始化摄像机
    let camera = new THREE.PerspectiveCamera(10, mwidth / mheight, 1, 1000000);
    // camera.position.set(90000, 41120, 81120);
    camera.position.set(50000, 71120, 51120);
    camera.lookAt(new THREE.Vector3(0, 0, 0));
    let renderer = new THREE.WebGLRenderer({
        canvas: document.getElementById("canvas-model-view"),
        antialias: true, // 设置抗锯齿
        alpha: true, // 背景透明
        autoClear: true,
        logarithmicDepthBuffer: true
    });
    // 设置渲染器背景颜色
    //    renderer.setClearColor(0xCFD1D3, 0.0);
    renderer.setSize(mwidth, mheight);
    // 设置渲染编码为 RGB 模式编码
    //   renderer.outputEncoding = THREE.sRGBEncoding;
    // renderer.toneMapping = THREE.ACESFilmicToneMapping;
    //   renderer.toneMappingExposure = 2.0;
    renderer.shadowMap.enabled = true;

    // 2D 文字渲染
    let css2Renderer = new THREE.CSS2DRenderer();
    css2Renderer.setSize(mwidth, mheight);
    css2Renderer.domElement.style.position = 'absolute';
    css2Renderer.domElement.style.top = '0px';
    // 设置.pointerEvents=none，解决 HTM L元素标签对 threejs canvas 画布鼠标事件的遮挡
    css2Renderer.domElement.style.pointerEvents = 'none';
    document.body.appendChild(css2Renderer.domElement);

    // 四个方向的平行光
    // let directionalLight = new THREE.DirectionalLight(0xffffff, .2);
    // directionalLight.position.set(1, 0, 0);
    // let directionalLight3 = new THREE.DirectionalLight(0xffffff, .2);
    // directionalLight3.position.set(-1, 0, 0);
    // let directionalLight1 = new THREE.DirectionalLight(0xffffff, .2);
    // directionalLight1.position.set(0, 0, 1);
    // let directionalLight2 = new THREE.DirectionalLight(0xffffff, .2);
    // directionalLight2.position.set(0, 0, -1);
    // scene.add(directionalLight);
    // scene.add(directionalLight1);
    // scene.add(directionalLight2);
    // scene.add(directionalLight3);

    // 环境光
    let ambient = new THREE.AmbientLight(0x404040, 0.1);
    scene.add(ambient);


    var pointLight = new THREE.PointLight(0xf0e68c, 0.9, 12500);
    pointLight.position.set(0, 8500, 0);
    pointLight.castShadow = true;
    pointLight.shadow.camera.near = 1;
    pointLight.shadow.camera.far = 15000;
    pointLight.shadow.mapSize.width = 10240;
    pointLight.shadow.mapSize.height = 10240;
    scene.add(pointLight);


    // 加载模型文件
    let gLTFLoader = new THREE.GLTFLoader()
    let dracoLoader = new THREE.DRACOLoader();
    dracoLoader.setDecoderPath('https://www.cqna.gov.cn/syygapi/naxsb/3ddemo/examples/js/libs/draco/gltf/');
    dracoLoader.setDecoderConfig({
        type: 'js'
    });
    gLTFLoader.setDRACOLoader(dracoLoader);
    gLTFLoader.load('https://www.cqna.gov.cn/syygapi/naxsb/3ddemo/model/27.gltf', function (obj) {
        obj.scene.traverse(function (child) {
            if (child.isMesh) {
                // child.material.envMap = undefined;
                child.frustumCulled = false;
                child.castShadow = true;
                child.receiveShadow = true;
                child.material.emissive = child.material.color;
                child.material.emissiveMap = child.material.map;
                child.material.transparent = true;
                child.material.emissiveIntensity = 0.8;
                //    child.material.opacity = 0.8;
                //     child.material.color = 0xd2d2d2;
                if (child.name) {
                    const div = document.createElement('div');
                    div.id = child.uuid;
                    div.style = 'color:red;';
                    div.setAttribute("data", child.name);
                    div.innerHTML = '<p data-name="' + child.name + '"></p>';
                    let tag = new THREE.CSS2DObject(div);
                    // let tag = new THREE.CSS3DSprite(div);
                    // tag.position.set(0, 0, 0);
                    // child.add(tag);
                }
                // 一号楼
                if (child.name == 'yihaolou') {
                    const div = document.createElement('div');
                    div.id = child.uuid;
                    let html = '';
                    html += '<div class="building-box" style="width: 100px; top: 70px; left: -48px;">';
                    html += '<div class="building-text" style="background: #1D96E9;" onclick="handleClick()">';
                    html += '<span>1号楼</span><span style="font-size: 10px;">社保大厅、医保大厅</span>';
                    html += '</div>';
                    html += '<svg width="10" height="10"><polygon id="triangle" points="0,0 10,0 5,10" fill="#1D96E9"/></svg>';
                    html += '</div>';
                    html += '<div class="building-line" style="border-left: 1px dashed #1D96E9; height: 100px; top: 110px;"></div>';
                    html += `<div style="font-size: 12px;background: #18A65A;width: 100px;top: 326px;left: 58px;position: absolute;display: flex;flex-direction: column;align-items: flex-start;color: #fff;">
                                <span>地下停车场入口⬇</span>
                            </div>`
                    html += '<div class="building-line" style="border-left: 1px dashed #1D96E9; height: 100px; top: 326px;left: 58px;"></div>';
                    // html += '<div class="building-bottom" style="background: #1D96E9;"></div>';
                    div.innerHTML = html;
                    let tag = new THREE.CSS2DObject(div);
                    child.add(tag);


                }
                // 二号楼
                if (child.name == 'erhaolou') {
                    const div = document.createElement('div');
                    div.id = child.uuid;
                    let html = '';
                    html += '<div class="building-box" style="width: 100px; top: 28px; left: -48px;">';
                    html += '<div class="finger" style="animation:blink 1s infinite;"><img src="images/finger.png">点我</div>';
                    html += '<div class="building-text" style="background: #1D96E9;">';
                    html += '<span>2号楼</span></span></span><span style="font-size: 10px;">南岸区政务服务中心</span>';
                    html += '</div>';
                    html += '<svg width="10" height="10"><polygon id="triangle" points="0,0 10,0 5,10" fill="#1D96E9"/></svg>';
                    html += '</div>';
                    html += '<div class="building-line" style="border-left: 1px dashed #1D96E9; height: 100px; top: 72px;"></div>';
                    // html += '<div class="building-bottom" style="background: #1D96E9;"></div>';
                    div.innerHTML = html;
                    let tag = new THREE.CSS2DObject(div);
                    child.add(tag);
                    div.style.pointerEvents = 'auto';

                    div.addEventListener('click', function (event) {
                        window.location.href = 'https://www.cqna.gov.cn/syygapi/naxsb/floorone.html?floorid=' + 2;
                    });
                }
                // 三号楼
                if (child.name == 'sanhaolou') {
                    const div = document.createElement('div');
                    div.id = child.uuid;
                    let html = '';
                    html += '<div class="building-box" style="width: 50px; top: 73px; left: -23px;">';
                    html += '<div class="building-text" style="background: #1D96E9;">';
                    html += '<span>3号楼</span><span style="font-size: 10px;"></span>';
                    html += '</div>';
                    html += '<svg width="10" height="10"><polygon id="triangle" points="0,0 10,0 5,10" fill="#1D96E9"/></svg>';
                    html += '</div>';
                    html += '<div class="building-line" style="border-left: 1px dashed #1D96E9; height: 100px; top: 90px;"></div>';
                    // html += '<div class="building-bottom" style="background: #1D96E9;"></div>';
                    div.innerHTML = html;
                    let tag = new THREE.CSS2DObject(div);
                    child.add(tag);
                }
                // 四号楼
                if (child.name == 'sihaolou-Chrome') {
                    const div = document.createElement('div');
                    div.id = child.uuid;
                    let html = '';
                    html += '<div class="building-box">';
                    html += `<div class="text" style="top: -30px;left: 146px;position: absolute;display: flex;flex-direction: column;align-items: flex-start;color: #1A95EB;">
                                <span style="font-size: 18px;font-weight: bold;margin-bottom: 5px;">地铁6号线</span>
                                <span>邱家湾站2B出口</span>
                                <span>距离：800米</span>
                                <img src="https://www.cqna.gov.cn/syygapi/naxsb/images/qjtArrow.png" alt="" style="height: 1.75rem;">
                            </div>`
                    html += '<div class="building-text">';
                    html += '<span>4号楼</span><span style="font-size: 10px;">商务打印、小卖部、食堂</span>';
                    html += '</div>';
                    html += '<svg width="10" height="10"><polygon id="triangle" points="0,0 10,0 5,10" fill="#18A65A"/></svg>';
                    html += '</div>';
                    html += '<div class="building-line"></div>';
                    // html += '<div class="building-bottom"></div>';
                    div.innerHTML = html;
                    let tag = new THREE.CSS2DObject(div);
                    child.add(tag);
                }
                // ----
                // if (child.name == 'chewei-dizhuan') {
                if (child.name == 'chedao-chedao') {
                    const div = document.createElement('div');
                    div.id = child.uuid;
                    let html = '';
                    html += '<div style="font-size: 12px; width: 80px; text-align: center;">';
                    html += '<div class="building-text" style="background: #18A65A; margin-bottom: -2px;">';
                    html += '<span style="text-align: left;">停车场</span>';
                    html += '<span style="font-size: 10px; text-align: left;">空余车位：-</span>';
                    html += '<span style="font-size: 10px; text-align: left;">空余充电桩：-</span>';
                    html += '</div>';
                    // html += '<svg width="15" height="15"><polygon id="triangle" points="0,0 15,0 1,15" fill="#18A65A"/></svg>';
                    html += '</div>';
                    div.innerHTML = html;
                    let tag = new THREE.CSS2DObject(div);
                    child.add(tag);
                }
            }
        });
        scene.add(obj.scene);


        // 计算模型的统计中心
        const box = new THREE.Box3().setFromObject(obj.scene);
        const center = new THREE.Vector3();
        box.getCenter(center);
        // 将模型的统计中心与其本身的原始统计中心进行对齐
        obj.scene.position.sub(center);
        // 设置摄像机位置，使模型处于视角中心
        //camera.position.z = box.max.length() * 3;
        //camera.lookAt(obj.scene.position); // 确保摄像机看向模型

        document.getElementById('loading').style.display = 'none';
        render();
    }, function (xhr) {
    }, function (error) {
    })

    function render() {
        // 执行渲染操作
        css2Renderer.render(scene, camera)
        renderer.render(scene, camera);
    }

    render();
    // 创建控件对象
    let controls = new THREE.OrbitControls(camera, renderer.domElement);
    controls.enableZoom = false
    // controls.enableRotate = false
    controls.maxPolarAngle = Math.PI / 2
    controls.minPolarAngle = 0
    // 监听鼠标、键盘事件
    controls.addEventListener('change', render);
    // 辅助线
    let axisHelper = new THREE.AxisHelper(50050);
        // scene.add(axisHelper);
</script>
<script>
    // 初始化Vue实例
    new Vue({
        el: '#qjt',
        data: function () {
            return {
                currentTime: "",
                bjxqList: []
            };
        },
        created() {
            this.updateTime();
            setInterval(this.updateTime, 1000); // 每秒更新一次时间
            this.getSSbj();
        },
        beforeDestroy() {
            this.stopClock();
        },
        methods: {
            updateTime() {
                // 获取当前日期时间对象
                const now = new Date();

                // 获取年月日时分秒，并补零
                const year = String(now.getFullYear()).padStart(4, '0');
                const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份是从0开始的
                const day = String(now.getDate()).padStart(2, '0');
                const hours = String(now.getHours()).padStart(2, '0');
                const minutes = String(now.getMinutes()).padStart(2, '0');
                const seconds = String(now.getSeconds()).padStart(2, '0');

                // 组合成格式化的字符串
                const formattedDateTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
                this.currentTime = formattedDateTime;
            },
            addKeyFrames(y) {
                let i = 0
                setInterval(function () {
                    if (i >= y) return i = 0
                    i++
                    document.querySelector('.bottom-t').style.marginTop = `-${i}px`
                }, 50);
            },
            getSSbj() {
                let that = this;
                $.ajax({
                    url: 'https://data.cqna.gov.cn:8088/kshapi/api/page2/top2',
                    type: "get",
                    dataType: "json",
                    async: false,
                    success: function (data) {
                        var data = data.data;
                        that.bjxqList = data.data;
                    }
                });
                var height = document.querySelector('.item') ? document.querySelector('.item').clientHeight - 20 : 0;
                if (this.bjxqList.length) {
                    this.addKeyFrames(height * this.bjxqList.length);
                }
            }
        }
    });
</script>
<script>
    var chartDom = document.getElementById('pdgdfechart');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        color: ['#80FFA5'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:30'],
                axisLabel: {
                    color: 'rgba(26,149,235,0.5);' // 这里设置刻度字的颜色为蓝色
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '人次',
                nameTextStyle: {
                    color: "#2A6594",
                    fontSize: '14'
                },
                axisTick: {
                    show: true // 显示Y轴刻度线
                },
                axisLine: {
                    show: true
                },
                axisLabel: {
                    color: 'rgba(26,149,235,0.5);' // 这里设置刻度字的颜色为蓝色
                }
            }
        ],
        series: [
            {
                name: '大厅取号高低峰指数',
                type: 'line',
                stack: 'Total',
                smooth: true,
                lineStyle: {
                    width: 0
                },
                // showSymbol: false,
                areaStyle: {
                    opacity: 0.8,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgb(17 126 202)'
                        },
                        {
                            offset: 1,
                            color: 'rgb(192 215 231)'
                        }
                    ])
                },
                emphasis: {
                    focus: 'series'
                },
                data: [14, 72, 138, 150, 26, 2, 60, 154, 100, 44]
            }
        ]
    };

    option && myChart.setOption(option);
</script>
<script>
    var path = "https://www.cqna.gov.cn/data";

    //办件数加载
    function handlingNumber(area, timeType) {
        var data1 = ''
        $.ajax({
            url: path + "/department/getOfficeNumberByAreaInfo", //url地址
            dataType: "json", //返回的数据类型
            type: "get", //发起请求的方式
            cache: false,
            async: false,
            data: {
                "area": area,
                "timeType": timeType
            },
            success: function (data) {
                data1 = data.data
            },


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

        return data1;
    }

    function animateValue(obj, start, end, duration) {
        let startTimestamp = null;
        const step = (timestamp) => {
            if (!startTimestamp) startTimestamp = timestamp;
            const progress = Math.min((timestamp - startTimestamp) / duration, 1);
            obj.innerHTML = Math.floor(progress * (end - start) + start);
            if (progress < 1) {
                window.requestAnimationFrame(step);
            } else {
                obj.classList.remove('animate');
            }
        };
        obj.classList.add('animate');
        window.requestAnimationFrame(step);
    }
    const time = 2 * 1000;
    let that = this;

    //获取当前排队人数和分钟数
    function getCurrentPerson() {
        $.ajax({
            url: conpath + "/qjt/",
            type: "get",
            dataType: "json",
            async: false,
            success: function (data) {
                const waitTime2 = document.getElementById('waitTime2');
                animateValue(waitTime2, 0, data.data[0], time);
                const currWaitPeople2 = document.getElementById('currWaitPeople2');
                animateValue(currWaitPeople2, 0, data.data[1], time);

            }
        })
    }
    getCurrentPerson();
    // 获取定时器的ID，以便之后可以清除它
    var intervalId = setInterval(getCurrentPerson, 1800000);

    //获取当前办理数量
    function getCurrentItem() {
        $.ajax({
            url: conpath + "/solveAffairs/",
            type: "get",
            dataType: "json",
            async: false,
            success: function (data) {
               var data = data.data;
               const currDayTaskNumElement = document.getElementById('currDayTaskNum');
               animateValue(currDayTaskNumElement, 0, data[0], time);
               const currWeekTaskNumElement = document.getElementById('currWeekTaskNum');
               animateValue(currWeekTaskNumElement, 0, data[1], time);
               const currMonthTaskNumElement = document.getElementById('currMonthTaskNum');
               animateValue(currMonthTaskNumElement, 0, data[2], time);
               const currYearTaskNumElement = document.getElementById('currYearTaskNum');
               animateValue(currYearTaskNumElement, 0, data[3], time);
            }
        })
    }
    getCurrentItem();
    // 获取定时器的ID，以便之后可以清除它
    var intervalId1 = setInterval(getCurrentItem, 300000);

    // 当用户离开页面时清除定时器
    window.addEventListener('beforeunload', function () {
        clearInterval(intervalId);
        clearInterval(intervalId1);
    });
    // // 1号楼当前排队人数
    // const currWaitPeopleElement = document.getElementById('currWaitPeople');
    // animateValue(currWaitPeopleElement, 0, 12, time);
    // // 1号楼可办事项数量
    // const taskNumElement = document.getElementById('taskNum');
    // animateValue(taskNumElement, 0, 798, time);
    // // 1号楼平均等待时长
    // const waitTimeElement = document.getElementById('waitTime');
    // animateValue(waitTimeElement, 0, 2, time);
    // // 1号楼窗口数
    // const winNumElement = document.getElementById('winNum');
    // animateValue(winNumElement, 0, 28, time);
    // 2号楼当前排队人数
    // const currWaitPeopleElement2 = document.getElementById('currWaitPeople2');
    // animateValue(currWaitPeopleElement2, 0, 6, time);
    // 2号楼可办事项数量
    const taskNumElement2 = document.getElementById('taskNum2');
    animateValue(taskNumElement2, 0, 798, time);
    // 2号楼窗口数
    const winNumElement2 = document.getElementById('winNum2');
    animateValue(winNumElement2, 0, 78, time);


    // //本月加载
    // var data = handlingNumber(1, 2)
    // let date = new Date()
    // const nowWeek = date.getDay();
    // const noMonth = date.getDate()
    // const noyear = date.getFullYear()
    // const currWeekTaskNumElement = document.getElementById('currWeekTaskNum');
    // if (nowWeek > 5 || nowWeek === 0) {
    //     animateValue(currWeekTaskNumElement, 0, 5 * 324, time);
    // } else {
    //     animateValue(currWeekTaskNumElement, 0, nowWeek * 324, time);
    // }
    // // // 本月办理数量
    // const currMonthTaskNumElement = document.getElementById('currMonthTaskNum');
    // animateValue(currMonthTaskNumElement, 0, ((parseInt(noMonth / 7)) * 5 + noMonth % 7) * 324, time);
    // // 本年办理数量
    // const month = date.getMonth()
    // const currYearTaskNumElement = document.getElementById('currYearTaskNum');
    // animateValue(currYearTaskNumElement, 0, ((month * 22) * 324) + (((parseInt(noMonth / 7)) * 5 + noMonth % 7) * 324), time);


    // //本周加载
    // var data = handlingNumber(1, 1)
    // // 本周办理数量
    // const currTaskNumElement = document.getElementById('currDayTaskNum');
    // animateValue(currTaskNumElement, 0, data.acceptNumber, time);
    // //本年加载
    // var data = handlingNumber(1, 3)
</script>

</html>