CQ_JD
/
nazw


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>楼层</title>
    <link rel="stylesheet" href="css/floorcon.css">
    <!-- jquery-->
    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/urljson.js"></script>
</head>
<style>
    .container {
        position: relative;
        background-image: url(images/indexbgfloor.png);
        background-size: 100% 100%;
        width: 100%;
        /* min-height: 900px; */
        height: 100%;
    }

    .el-pagination {
        text-align: center;
    }

    .el-pagination.is-background .btn-next,
    .el-pagination.is-background .btn-prev,
    .el-pagination.is-background .el-pager li {
        background-color: #A6D2EC !important;
        color: #fff !important;
    }

    .el-pagination.is-background .el-pager li:not(.disabled).active {
        background-color: #2895FF !important;
    }

    .el-tab-pane {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .moxing .namebtn {
        padding: 0 5px;
        border-radius: 4px;
        font-size: 14px;
        color: #FFFFFF;
        background: #A7C4E0;
        text-shadow: 3px 1px 2px rgb(40 149 255 / 80%);
        position: absolute;
        cursor: pointer;
    }

    .moxing .namebtnl {
        padding: 0;
        background-color: rgb(239 41 19 / 40%);
        border-radius: 6px;
        line-height: 17px;
        font-size: 14px;
        color: #FFFFFF;
        position: absolute;
        text-shadow: 3px 1px 2px rgb(217 112 100 / 100%);
    }

    #lines {
        position: absolute;
        height: 150px;
        transition: top 0.3s;
        width: 0;
        border: 1px dashed #1A95EB;
        z-index: 111;
    }

    #lineh {
        position: absolute;
        height: 0;
        transition: top 0.3s;
        width: 100px;
        border: 1px dashed #1A95EB;
        z-index: 111;
    }

    #redio {
        width: 13px;
        height: 13px;
        background: #2896FF;
        border-radius: 50%;
        position: absolute;
        z-index: 111;
    }

    .vrdiv {
        width: 28px;
        height: 28px;
        position: absolute;
        cursor: pointer;
        background-image: url(images/logo-vr.png);
        background-size: 100% 100%;
    }

    .btable {
        height: calc(100% - 67px);
        /* margin-top: 20px; */
        background-color: #fff;
        /* padding: 15px 10px; */
        box-sizing: border-box;
    }

    .jysm {
        color: #2895FF;
        display: flex;
        align-items: center;
        font-weight: bold;
    }

    .btable table {
        margin-top: 10px;
        border: 1px solid #64A8F6;
    }

    .btable tr td {
        border: 1px solid #64A8F6;
        padding: 5px;
    }

    .btable tr td.tit {
        font-size: 16px;
        color: #64A8F6;
    }

    .global-dialog .el-dialog__body {
        max-height: calc(100vh - 300px);
        overflow: auto;
        padding: 0 20px !important;
        padding-bottom: 20px !important;
    }


    .sxqd::-webkit-scrollbar {
        width: 0;
    }

    .global-dialog .el-tabs__header {
        margin: 0 !important;
    }

    .global-dialog .el-dialog__title {
        color: #64A8F6 !important
    }

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

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

        .sxqd li {
            cursor: pointer;
            margin-top: 5px;
        }

        .zxfw {
            top: 66%;
        }

        .zxfw .button {
            width: 215px;
            height: 85px;
            line-height: 30px;
            margin-right: 13px;
        }

    }

    @media screen and (max-width:1800px) {
        .moxing {
            left: 100px;
        }

        .detailDiv {
            max-height: 500px;
        }

    }

    .hide {
        display: none;
    }

    .search {
        width: 249px;
        height: 40px !important;
        display: flex;
        position: absolute;
        right: 20px;
        top: 90px;
        z-index: 999;
    }

    .search input {
        width: calc(100% - 44px);
        overflow: unset;
        background: #A6D2EC;
        border: 0;
        /*清除自带的2px的边框*/
        padding: 0;
        /*清除自带的padding间距*/
        outline: none;
        /*清除input点击之后的黑色边框*/
        height: 40px;
        padding-left: 10px;
        color: #2895FF;
    }

    .search input::placeholder {
        color: #E7F7FF;
    }

    .search .btn {
        width: 44px;
        height: 40px;
        background: #2895FF;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .zwsj {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>

<body>
    <div style="width:100%;height:570px" class="header"></div>
    <div class="container hide" id="app">
        <div class="floorTabs">
            <div class="list" :class="{ active: currentFloor == tab.id }" v-for="(tab,index) in floorList" :key="index"
                @click="floorChange(tab.id)">
                {{tab.name}}
            </div>
            <div class="list" @click="backsw">返回室外</div>
        </div>
        <el-dialog title="窗口电话" class="global-dialog" :visible.sync="dialogVisible" width="60%"
            :before-close="handleClose" :close-on-click-modal="false">
            <div class="btable">
                <!-- <div class="jysm">
                        <div style="width: 2px;height: 14px;background-color: #2895FF;margin-right: 10px;"></div>
                        <div>简要说明</div>
                    </div> -->
                <table border="0" cellspacing="0" style="width: 100%;">
                    <tbody>
                        <tr>
                            <td class="tit">楼层</td>
                            <td class="tit">窗口名称</td>
                            <td class="tit">窗口号</td>
                            <td class="tit">对外咨询窗口电话</td>
                        </tr>
                        <tr>
                            <td class="tit" rowspan="2">一楼</td>
                            <td>社保卡窗口</td>
                            <td>1、2、3、4</td>
                            <td>023-62525236、023-62602939（确认为窗口咨询电话）</td>
                        </tr>
                        <tr>
                            <td>咨询窗口</td>
                            <td>一楼咨询台</td>
                            <td>023-62606771</td>
                        </tr>
                        <tr>
                            <td class="tit" rowspan="9">二楼</td>
                            <td>残联综合窗口</td>
                            <td>205</td>
                            <td>无</td>
                        </tr>
                        <tr>
                            <td>财政综合窗口</td>
                            <td>206</td>
                            <td>023-62988007</td>
                        </tr>
                        <tr>
                            <td>无差别综合窗口</td>
                            <td>207、209</td>
                            <td>023-62980273</td>
                        </tr>
                        <tr>
                            <td>一件事一次办</td>
                            <td>208</td>
                            <td>023-62980273</td>
                        </tr>
                        <tr>
                            <td>文旅综合窗口</td>
                            <td>210</td>
                            <td>023-62606250</td>
                        </tr>
                        <tr>
                            <td>档案综合窗口</td>
                            <td>211</td>
                            <td>023-62980244</td>
                        </tr>
                        <tr>
                            <td>卫健综合窗口</td>
                            <td>212-215</td>
                            <td>023-62980379</td>
                        </tr>
                        <tr>
                            <td>交通综合窗口</td>
                            <td>217-221</td>
                            <td>023-62982072</td>
                        </tr>
                        <tr>
                            <td>公安综合窗口</td>
                            <td>224-235</td>
                            <td>023-62985279</td>
                        </tr>
                        <tr>
                            <td class="tit" rowspan="17">三楼</td>
                            <td>经开区企业开办综合窗口</td>
                            <td>301-307</td>
                            <td>023-62980204，023-62980207</td>
                        </tr>
                        <tr>
                            <td>经开区立项用地规划综合窗口</td>
                            <td>308</td>
                            <td>023-62980243</td>
                        </tr>
                        <tr>
                            <td>经开区南岸区工程建设许可（小型建设项目）</td>
                            <td>310</td>
                            <td>023-62606752</td>
                        </tr>
                        <tr>
                            <td>经开区施工许可 竣工验收 综合窗口</td>
                            <td>311</td>
                            <td>023-62980249</td>
                        </tr>
                        <tr>
                            <td>南岸区施工许可 竣工验收 综合窗口 帮代办窗口</td>
                            <td>312</td>
                            <td>023-62606780</td>
                        </tr>
                        <tr>
                            <td>经开市政综合窗口</td>
                            <td>313</td>
                            <td>023-62789342</td>
                        </tr>
                        <tr>
                            <td>交通建设综合窗口</td>
                            <td>314</td>
                            <td>023-62392861</td>
                        </tr>
                        <tr>
                            <td>生态环境综合窗口</td>
                            <td>315</td>
                            <td>023-62606735</td>
                        </tr>
                        <tr>
                            <td>涉农事务综合窗口</td>
                            <td>316</td>
                            <td>023-62606735</td>
                        </tr>
                        <tr>
                            <td>发改委综合窗口</td>
                            <td>317</td>
                            <td>023-62606782</td>
                        </tr>
                        <tr>
                            <td>消防综合窗口</td>
                            <td>318</td>
                            <td>023-62606739</td>
                        </tr>
                        <tr>
                            <td>城市管理综合窗口</td>
                            <td>319-320</td>
                            <td>023-62606760</td>
                        </tr>
                        <tr>
                            <td>市政公用服务（水电气讯）综合窗口</td>
                            <td>321</td>
                            <td>无</td>
                        </tr>
                        <tr>
                            <td>经开区办不成事反应窗口</td>
                            <td>322</td>
                            <td>023-62606905</td>
                        </tr>
                        <tr>
                            <td>经开区项目帮代办综合窗口</td>
                            <td>324</td>
                            <td>023-62519346</td>
                        </tr>
                        <tr>
                            <td>经开区税务综合窗口</td>
                            <td>325</td>
                            <td>023-62980241</td>
                        </tr>
                        <tr>
                            <td>南岸区不动产登记综合窗口</td>
                            <td>322</td>
                            <td>无</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </el-dialog>
        <div id="lines" style="display: none;"></div>
        <div id="lineh" style="display: none;"></div>
        <div id="redio" style="display: none;"></div>
        <div class="detailDiv" style="display: none;" style="position: relative;">
            <div v-show="popupType == '1'">
                <div class="top">
                    <div style="font-weight: bold;font-size: 1.625rem;">{{btnName}}您可以办理：</div>
                    <div class="right" style="font-size: 1rem;">
                        <span>工作时间：</span>
                        <span>法定工作日 9:00-12:00 14:00-17:30</span>
                    </div>
                </div>
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="依申请公开" name="first">
                        <div class="ysqgk">
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="政策咨询" name="second">
                        <div class="ysqgk">
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="接待导引" name="third">
                        <div class="ysqgk">
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="帮代办申请" name="fourth">
                        <div class="ysqgk">
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
            <div v-show="popupType == '2'">
                <div class="search"><input type="text" placeholder="请输入关键字" v-model="inputValue">
                    <div class="btn" @click="searchData(1)"><img src="images/flsearch.png" alt=""></div>
                </div>
                <div class="top">
                    <div style="font-weight: bold;font-size: 1.625rem;white-space: nowrap;">{{btnName}}您可以办理：</div>
                    <div class="right" style="font-size: 1rem;" v-show="btnName!=='24h自助服务区'">
                        <span>工作时间：</span>
                        <span>法定工作日 9:00-12:00 14:00-17:30</span>
                    </div>
                </div>
                <el-tabs v-model="activeNametwo" @tab-click="handleClicktwo">
                    <el-tab-pane label="事项清单" name="sxqd">
                        <ul class="sxqd">
                            <div class="zwsj" v-if="!this.sxqdList||!this.sxqdList.length">暂无数据</div>
                            <li v-for="(item,index) in sxqdList">
                                <span @click="goToLink(item.addr)" v-if="item.addr">{{item.mattersName}}</span>
                                <span @click="goToLink('https://zwykb.cq.gov.cn/qxzz/naq/bszn/?rowGuid='+item.url)"
                                    v-else-if="item.url">{{item.mattersName}}</span>
                                <span v-else>{{item.mattersName}}</span>
                            </li>
                        </ul>
                        <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage"
                            :page-size="7" layout="prev, pager, next" :total="total" class="popuppage">
                        </el-pagination>

                    </el-tab-pane>
                    <el-tab-pane label="入驻部门" name="rzbm">
                        <div class="zwsj" v-if="!this.rzbmList||!this.rzbmList.length">暂无数据</div>
                        <ul class="sxqd" style="overflow-y: scroll;">
                            <li v-for="(item,index) in rzbmList">
                                <span>{{item.deptName}}</span>
                            </li>
                        </ul>
                    </el-tab-pane>
                </el-tabs>
            </div>
            <div v-show="popupType == '6'">
                <div class="top">
                    <div style="font-weight: bold;font-size: 1.625rem;">{{btnName}}您可以办理：</div>
                    <div class="right" style="font-size: 1rem;">
                        <span>工作时间：</span>
                        <span>法定工作日 9:00-12:00 14:00-17:30</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="moxing" v-show="currentFloor == 1">
            <div class="imgDiv">
                <img src="images/floordetail1.png" alt="">
                <img src="images/floorArowRigt.png" alt=""
                    style="position:absolute; left:52px;bottom: 73px;width: 40px;height: 34px;">
                <img src="images/floorArowTop.png" alt=""
                    style="position:absolute; right: 220px;top: 22px;width: 34px;height: 39px;">
                <div class="vrdiv" style="left: 176px;bottom: 110px;"
                    @click="window.open('https://www.cqna.gov.cn/vr/dating3/tour.html?startscene=1')"></div>
                <div class="vrdiv" style="left: 284px;bottom: 120px;"
                    @click="window.open('https://www.cqna.gov.cn/vr/dating3/tour.html?startscene=2')">
                </div>
                <div class="vrdiv" style="left: 277px;bottom: 69px;"
                    @click="window.open('https://www.cqna.gov.cn/vr/dating3/tour.html?startscene=3')">
                </div>
                <div class="vrdiv" style="left: 384px;bottom: 146px;"
                    @click="window.open('https://www.cqna.gov.cn/vr/dating3/tour.html?startscene=4')"></div>
                <div class="vrdiv" style="right: 240px;bottom: 103px;"
                    @click="window.open('https://www.cqna.gov.cn/vr/dating3/tour.html?startscene=5')"></div>
                <div class="vrdiv" style="right: 195px;top: 73px;"
                    @click="window.open('https://www.cqna.gov.cn/vr/dating3/tour.html?startscene=6')"></div>
                <div class="vrdiv" style="right: 284px;top: 99px;"
                    @click="window.open('https://www.cqna.gov.cn/vr/dating3/tour.html?startscene=7')"></div>
                <div class="namebtn threed" style="left: 150px;bottom: 88px;background-color: #D97064;
        text-shadow: 3px 1px 2px rgb(217 112 100 / 80%);" data-popupType="1">咨询台
                </div>
                <div class="namebtn threed" style="left: 217px;bottom: 119px;" data-popupType="2" data-id="12">政务公开专区
                </div>
                <div class="namebtn threed" style="left: 217px;bottom: 72px;" data-popupType="2" data-id="3">24h自助服务区
                </div>
                <div class="namebtn threed" style="left: 331px;bottom: 97px;" data-popupType="2" data-id="2">社保卡办理区
                </div>
                <div class="namebtnl threed" style="right: 220px;bottom: 82px;">免费婚检室</div>
                <div class="namebtnl threed" style="left: 470px;bottom: 203px;">领政厅</div>
                <div class="namebtnl threed" style="right: 88px;bottom: 194px;">婚姻家庭辅导室</div>
                <div class="namebtn threed" style="right: 110px;top: 54px;" data-popupType="2" data-id="1">婚姻登记处</div>
            </div>
            <div style="font-size: 26px;color: #004A93;">2号楼一楼婚姻登记处社保卡办理</div>
            <div style="font-size: 20px;color: #547596;">（您可以点击图中的按钮查看详情）</div>
        </div>
        <div class="moxing" v-show="currentFloor == 2">
            <div class="imgDiv">
                <img src="images/floordetail2.png" alt="">
                <div class="vrdiv" style="left: 360px;bottom: 120px;"
                    @click="window.open('https://www.cqna.gov.cn/vr/dating3/tour.html?startscene=9')"></div>
                <div class="vrdiv" style="left: 313px;bottom: 94px;"
                    @click="window.open('https://www.cqna.gov.cn/vr/dating3/tour.html?startscene=8')"></div>
                <div class="vrdiv" style="right: 216px;bottom: 156px;"
                    @click="window.open('https://www.cqna.gov.cn/vr/dating3/tour.html?startscene=10')"></div>
                <div class="vrdiv" style="right: 260px;top: 120px;"
                    @click="window.open('https://www.cqna.gov.cn/vr/dating3/tour.html?startscene=11')"></div>
                <div class="vrdiv" style="right: 226px;top: 33px;"
                    @click="window.open('https://www.cqna.gov.cn/vr/dating3/tour.html?startscene=12')"></div>
                <div class="vrdiv" style="right: 175px;top: 105px;"
                    @click="window.open('https://www.cqna.gov.cn/vr/dating3/tour.html?startscene=13')"></div>

                <div class="namebtnl threed" style="left: 286px;bottom: 91px;">自助服务区</div>
                <div class="namebtn threed" style="left: 326px;bottom: 215px;" data-popupType="2" data-id="4">公安综合办理区
                </div>
                <div class="namebtnl threed" style="right: 175px;bottom: 156px;">自助服务区</div>
                <div class="namebtn threed" style="right: 110px;top: 87px;" data-popupType="2" data-id="5">无差别综合办理区
                </div>
                <div class="namebtnl threed" style="right: 187px;top: 15px;">母婴室</div>
            </div>
            <div style="font-size: 26px;color: #004A93;">2号楼二楼无差别、区公安办理区</div>
            <div style="font-size: 20px;color: #547596;">（您可以点击图中的按钮查看详情）</div>
        </div>
        <div class="moxing" v-show="currentFloor == 3">
            <div class="imgDiv">
                <img src="images/floordetail3.png" alt="">
                <div class="vrdiv" style="right:240px;top: 33px;"
                    @click="window.open('https://www.cqna.gov.cn/vr/dating3/tour.html?startscene=14')"></div>
                <div class="vrdiv" style="right:201px;top: 84px;"
                    @click="window.open('https://www.cqna.gov.cn/vr/dating3/tour.html?startscene=15')"></div>
                <div class="vrdiv" style="right: 175px;top: 185px;"
                    @click="window.open('https://www.cqna.gov.cn/vr/dating3/tour.html?startscene=16')"></div>
                <div class="namebtnl threed"
                    style="left: 7px;bottom: 50px;display: flex;flex-direction: column;align-items: center;">
                    <span>314工程建设项目</span><span>审批会议室</span>
                </div>
                <div class="namebtn threed" style="left: 341px;top: 114px;" data-popupType="2" data-id="6">经开区企业开办办理区
                </div>
                <div class="namebtnl threed" style="right: 169px;top: 92px;">政务公开专区</div>
                <div class="namebtnl threed" style="right: 189px;top: 59px;">自助服务区</div>
                <div class="namebtn threed" style="right: 67px;top: 123px;" data-popupType="2" data-id="8">工程建设领域办理区
                </div>
                <div class="namebtn threed" style="right: 85px;top: 0;" data-popupType="2" data-id="7">不动产登记办理区</div>
            </div>
            <div style="font-size: 26px;color: #004A93;">2号楼三楼婚姻登记处社保卡办理</div>
            <div style="font-size: 20px;color: #547596;">（您可以点击图中的按钮查看详情）</div>
        </div>
        <div class="bottomBtn">
            <div class="btn active" id="threed" @click="showthreed">3D</div>
            <div class="btn" id="vrdiv" @click="showvrdiv">VR</div>
        </div>
        <div class="zxfw">
            <div style="color: #004A93;margin: 15px 0;">特色服务</div>
            <div class="buttonList">
                <div class="button" @click="goToLink('wyyy.html')">延时办</div>
                <div class="button" @click="goToLink('wybdb.html')">帮代办</div>
                <div class="button" @click="goToLink('qysmzq.html')">生命周期</div>
                <div class="button" @click="goToLink('https://www.cqna.gov.cn/zwgk_254/zfxxgkml/msjxjsbmp/index.html')">
                    免申即享</div>
                <div class="button" @click="goToLink('https://www.cqna.gov.cn/ghwd/znwd/index.html')">智能问答</div>
                <div class="button" @click="dialogVisible=true">窗口电话</div>
            </div>
        </div>
    </div>
    <div style="width:100%;" class="footer"></div>
</body>
<script>
    $(function () {
        /*公共部分
        * 导航栏
        * footer CopyRight
        */
        $(".header").load('https://www.cqna.gov.cn/ggbf_search/top/top_style.html');
        $(".footer").load('https://www.cqna.gov.cn/ggbf_search/ggyr/2022foot/bottomBlack.html');
    });
</script>
<!-- 引入 Vue -->
<script src="js/vue.min.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="css/index.css">
<!-- 引入组件库 -->
<script src="js/index.js"></script>
<script>
    var nowDiv = new Vue({
        el: "#app",
        data: function () {
            return {
                activeName: 'second',
                activeNametwo: 'rzbm',
                popupShow: false,
                btnName: '',
                currentFloor: 1,
                popupType: "other",
                currentPage: 1,
                total: 0,
                btnid: 1,
                dialogVisible: false,
                inputValue: '',
                floorList: [
                    {
                        id: 1,
                        name: "一楼"
                    },
                    {
                        id: 2,
                        name: "二楼"
                    },
                    {
                        id: 3,
                        name: "三楼"
                    },
                ],
                rzbmList: [],
                sxqdList: [
                    {
                        id: 1,
                        title: "残疾人证新办",
                        url: ""
                    },
                    {
                        id: 1,
                        title: "残疾人证换领",
                        url: ""
                    },
                    {
                        id: 1,
                        title: "残疾人证迁移",
                        url: ""
                    },
                    {
                        id: 1,
                        title: "残疾人证挂失补办",
                        url: ""
                    },
                    {
                        id: 1,
                        title: "残疾人证注销",
                        url: ""
                    },
                    {
                        id: 1,
                        title: "残疾类别/等级变更",
                        url: ""
                    }
                ]
            };
        },
        created() {
            this.unitBtnClick();
        },
        mounted() {
            const url = new URL(window.location.href);
            const id = url.searchParams.get('floorid');
            $('.threed').show();
            $('.vrdiv').hide();
            document.querySelector('#app').classList.remove('hide');
        },
        methods: {
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => { });
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                if (this.inputValue) {
                    this.searchData(val);
                } else {
                    this.getItemList(val, this.btnid)
                }
            },
            handleClick(tab, event) {
                console.log(tab, event);
            },
            searchData(val) {
                var that = this;
                this.currentPage = val;
                $.ajax({
                    url: conpath + "/handleBusiness/search",
                    type: "post",
                    contentType: 'application/json',
                    data: JSON.stringify({
                        "keyword": that.inputValue,
                        "currentPage": val,
                        "pageSize": 7,
                        "businessId": that.btnid
                    }),
                    dataType: "json",
                    success: function (data) {
                        that.sxqdList = data.data.handleMatters.slice(0, 7);
                        that.total = data.data.total;
                        that.rzbmList = data.data.handleDepts;
                    }
                })
            },
            goToLink(url) {
                if (url) {
                    window.open(url);
                }
            },
            floorChange(id) {
                this.currentFloor = id;
                this.popupType = 'other'
                this.popupShow = false;
                $('.threed').show();
                $('.vrdiv').hide();
                this.unitBtnClick();
                this.showthreed();
                var detailDivs = document.getElementsByClassName('detailDiv');
                detailDivs[0].style.display = 'none'; // 强制显示元素
            },
            showthreed() {
                $('.threed').show();
                $('.vrdiv').hide();
                $('#vrdiv').removeClass('active');
                $('#threed').addClass('active');
            },
            showvrdiv() {
                $('.threed').hide();
                $('.vrdiv').show();
                $('#threed').removeClass('active');
                $('#vrdiv').addClass('active');
                this.unitBtnClick();
                var detailDivs = document.getElementsByClassName('detailDiv');
                detailDivs[0].style.display = 'none'; // 强制显示元素
            },
            handleClicktwo() { },
            backsw() {
                window.location.href = "qjt.html"
            },
            unitBtnClick() {
                lines.style.display = 'none';
                lineh.style.display = 'none';
                redio.style.display = 'none';
            },
            getItemList(currentPage, businessId) {
                var that = this;
                $.ajax({
                    url: conpath + "/handleBusiness/query",
                    type: "post",
                    contentType: 'application/json',
                    data: JSON.stringify({
                        "currentPage": currentPage,
                        "pageSize": 7,
                        "businessId": businessId
                    }),
                    dataType: "json",
                    success: function (data) {
                        that.sxqdList = data.data.handleMatters;
                        that.total = data.data.total;
                    }
                })
            }
        }
    })
</script>
<script>
    var that = this;
    document.querySelectorAll('.namebtn').forEach(function (element) {
        element.addEventListener('click', function (event) {

            var detailDivs = document.getElementsByClassName('detailDiv');
            detailDivs[0].style.display = 'block'; // 强制显示元素

            var offset2 = $(detailDivs[0]).offset(); // 获取偏移量

            that.nowDiv.popupShow = true;
            //弹窗的宽高
            var element2 = document.getElementsByClassName('detailDiv');
            var offset2 = $('.detailDiv').offset();
            var rect = element2[0].getBoundingClientRect();
            var height2 = rect.top;
            var left2 = rect.left;

            //图中按钮的位置
            var rect1 = this.getBoundingClientRect();
            var top1 = rect1.top;
            var left1 = rect1.left;
            var width1 = rect1.width;

            var widthDiff = left2 - left1;
            var heightDiff = top1 - height2;

            var lines = document.getElementById('lines');
            var lineh = document.getElementById('lineh');
            var redio = document.getElementById('redio');

            lines.style.display = 'block';
            lineh.style.display = 'block';
            redio.style.display = 'block';

            //横线的位置
            lineh.style.width = widthDiff - width1 / 2 + 'px';
            lineh.style.left = left1 + width1 / 2 + 'px';
            lineh.style.top = top1 - heightDiff + 93.5 + 'px';

            //竖线的位置
            lines.style.height = heightDiff - 100 + 'px';
            var nowLeft = left1 + width1 / 2;
            lines.style.left = nowLeft - 1 + 'px';
            lines.style.top = top1 - heightDiff + 93.5 + 'px';
            //点的位置
            redio.style.top = top1 - 15 + 'px';
            redio.style.left = nowLeft - 6.5 + 'px';

            //获取弹窗内容
            var popupType = element.getAttribute('data-popupType');
            that.nowDiv.popupType = popupType ? popupType : "other";
            //初始化tab栏
            that.nowDiv.activeNametwo = "sxqd";
            that.nowDiv.inputValue = '';
            var id = element.getAttribute('data-id');
            that.nowDiv.currentPage = 1;
            if (id && id != 12) {
                $('#tab-rzbm').css('display', 'inline-block')
                $('.popuppage').css('display', 'block')
                $('.search').css('display', 'flex')
                that.nowDiv.btnid = id;
                $.ajax({
                    url: conpath + "/handleBusiness/" + id,
                    type: "get",
                    dataType: "json",
                    success: function (data) {
                        var value = data.data;
                        that.nowDiv.btnName = value.handleBusiness.handleName;
                        that.nowDiv.rzbmList = value.handleDepts;
                    }
                })
                that.nowDiv.getItemList(1, id)
            } else if (id && id == 12) {
                $('#tab-rzbm').css('display', 'none')
                $('.popuppage').css('display', 'none')
                $('.search').css('display', 'none')
                that.nowDiv.btnName = '政务公开专区';
                that.nowDiv.rzbmList = [];
                that.nowDiv.sxqdList = [{
                    id: 1,
                    mattersName: '政府信息公开指南',
                    addr: 'https://www.cqna.gov.cn/zwgk_254/zfxxgkzn/qzfgkzn/202402/t20240202_12897323.html'
                },
                {
                    id: 2,
                    mattersName: '政府信息公开申请表',
                    addr: 'https://www.cqna.gov.cn/zwgk_254/zfxxgkzn/qzfgkzn/202402/t20240202_12897323.html'
                },
                {
                    id: 3,
                    mattersName: '依申请公开流程图',
                    addr: 'https://www.cqna.gov.cn/zwgk_254/ysqgk/202310/t20231008_12406289.html'
                },
                {
                    id: 4,
                    mattersName: '重庆市南岸区人民政府行政规范性文件',
                    addr: 'https://www.cqna.gov.cn/zwgk_254/zfxxgkml/zcwj/xzgfxwjk/'
                },
                {
                    id: 5,
                    mattersName: '中华人民共和国国务院公报',
                    addr: 'https://www.gov.cn/gongbao/2024/issue_11606/'
                },
                {
                    id: 6,
                    mattersName: '重庆市人民政府公报',
                    addr: 'https://www.cq.gov.cn/zwgk/zfxxgkml/zfgb/2024/'
                }
                ];
            } else {
                $('.search').css('display', 'flex')
                $('#tab-rzbm').css('display', 'inline-block')
                $('.popuppage').css('display', 'block')
                that.nowDiv.btnName = '';
            }
        });
    });
</script>

</html>