Merge branch 'nacyy' of http://8.155.30.116:3000/CQ_JD/nazw into nacyy

nngkxxdp/src/main/resources/static/naxsb/css/qjt.css

@@ -27,6 +27,34 @@ body {
     left: -58px;
 }
 
+.building-box-chekuchukou {
+    font-size: 12px;
+    width: 120px;
+    position: absolute;
+    top: 60px;
+    left: -60px;
+    background: #18A65A;
+    border-radius: 8px;
+    color: #fff;
+    padding: 4px;
+    box-sizing: border-box;
+}
+
+.chekuchukou-tit {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+}
+
+.chekuchukou-tit span:first-child {
+    font-weight: 600;
+}
+
+.chekuchukou-tit span:last-child {
+    text-decoration-line: underline;
+    cursor: pointer;
+}
+
 .building-text {
     background: #18A65A;
     color: #fff;
@@ -202,7 +230,8 @@ body {
     align-items: center;
     height: 33%;
 }
-.blsl .list:nth-child(2n){
+
+.blsl .list:nth-child(2n) {
     width: 52%;
 }
 
@@ -220,15 +249,18 @@ body {
     justify-content: space-between;
 }
 
-.blsl .list .right>span {
+.blsl .list .right>span,
+.pdgdf .list .right>span {
     white-space: nowrap;
 }
 
-.blsl .list .right .number {
+.blsl .list .right .number,
+.pdgdf .list .right .number {
     color: #5482F9;
 }
 
-.blsl .list .right .number span:first-child {
+.blsl .list .right .number span:first-child,
+.pdgdf .list .right .number span:first-child {
     font-weight: bold;
     font-size: 2.5rem;
     font-style: italic;
@@ -239,7 +271,37 @@ body {
     top: 58%;
 }
 
-.pdgdf .text {
+.pdgdf .floorcontent {
+    padding: .5rem;
+    box-sizing: border-box;
+}
+
+.pdgdf .list {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+}
+
+.pdgdf .list .img {
+    width: 25%;
+    height: 90%;
+    display: flex;
+    justify-content: flex-end;
+    margin-right: 0.625rem;
+}
+
+.pdgdf .list .img img {
+    width: 100%;
+    height: 100%;
+}
+
+.pdgdf .list .right .number span:first-child {
+    font-weight: bold;
+    font-size: 2.5rem;
+    font-style: italic;
+}
+
+/* .pdgdf .text {
     position: absolute;
     top: -5rem;
     left: 7rem;
@@ -247,7 +309,7 @@ body {
     flex-direction: column;
     font-size: 1rem;
     color: #1A95EB;
-}
+} */
 
 .qjttitle {
     width: 100%;
@@ -258,6 +320,243 @@ body {
     background-size: 100% 100%;
 }
 
+/* 区行政服务中心网点分布 start */
+.districtLevelBox {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 11;
+    width: 100vw;
+    height: 100vh;
+    background: #30313345;
+}
+
+.districtLevelContent {
+    position: absolute;
+    top: 10%;
+    left: 10%;
+    width: 80%;
+    height: 80vh;
+}
+
+.districtLevelbg,
+.districtLevelContent-box {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.districtLevelContent-box {
+    padding: 0 5%;
+    box-sizing: border-box;
+}
+
+.districtLevelContent-tit {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 5vh;
+    font-weight: bold;
+    font-size: 1.8rem;
+    color: #2895FF;
+}
+
+.districtLevelContent-tit img {
+    width: 1.2vw;
+    height: 1.2vw;
+    cursor: pointer;
+}
+
+.districtLevelLine {
+    width: 100%;
+    height: 24px;
+    margin: 2% 0 0 0;
+}
+
+.districtLevelList {
+    margin: 2% 0;
+    width: 100%;
+    overflow-y: auto;
+}
+
+.districtLevelFooter {
+    display: flex;
+    width: 100%;
+    justify-content: center;
+}
+
+.districtLevelFooter .el-pagination.is-background .btn-next,
+.el-pagination.is-background .btn-prev,
+.el-pagination.is-background .el-pager li {
+    background-color: #A6D2EC;
+    color: #fff;
+}
+
+.districtLevelList-col {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 3rem;
+}
+
+.districtLevelList-col img {
+    width: 5rem;
+    height: 5rem;
+}
+
+.districtLevelList-col .left {
+    margin: 0 2%;
+    width: calc(100% - 5rem);
+}
+
+.districtLevelList-col .left .span-col {
+    display: inline-flex;
+    font-weight: 400;
+    font-size: 1rem;
+    color: #333333;
+    width: 100%;
+}
+
+.districtLevelList-col .left .span-col.name {
+    font-weight: 400;
+    font-size: 1.2rem;
+    color: #2895FF;
+    margin-bottom: .2rem;
+}
+
+.districtLevelList-col .left .span-col .label {
+    white-space: nowrap;
+}
+
+/* 区行政服务中心网点分布 end */
+
+/* 公交详情弹窗 start */
+.transitBox .districtLevelContent {
+    width: 50vw;
+    left: 25%;
+    display: none;
+}
+
+.transitContent {
+    width: 100%;
+    height: 35%;
+}
+
+.transitFooter {
+    width: 90%;
+    height: 40%;
+    background: #fff;
+    margin: 0 5%;
+    padding: 2%;
+    box-sizing: border-box;
+}
+
+.transitContentList {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1.5rem 0;
+    box-sizing: border-box;
+    cursor: pointer;
+}
+
+.transitContentList .left {
+    padding: 0 5%;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-between;
+    width: calc(90% - 2rem);
+    border-right: 2px solid #33333341;
+}
+
+.transitContentList .right {
+    padding: 0 5%;
+    box-sizing: border-box;
+}
+
+.transitContentList .right img {
+    width: 2rem;
+    height: 1.5rem;
+}
+
+.transitContentList .left-col {
+    display: inline-flex;
+    flex-direction: column;
+    font-size: 1rem;
+}
+
+.transitContentList .left-col span:first-child {
+    font-weight: 400;
+    color: #2996FF;
+    display: inline-block;
+    margin-bottom: .8rem;
+}
+
+.transitFooter .transitRoute {
+    font-weight: 400;
+    font-size: 1rem;
+    color: #2996FF;
+    margin-bottom: .8rem;
+    display: flex;
+    align-items: center;
+}
+
+.transitFooter .transitRoute img {
+    width: 3.2rem;
+    height: .4rem;
+    margin: 0 .5rem;
+}
+
+.transitFooter .transitRouteContent {
+    font-size: .9rem;
+    color: #333333;
+}
+
+.transitFooter .transitRouteContent span:nth-child(2n) {
+    display: inline-block;
+    padding: 0 .6rem 0 .6rem;
+    border-right: 2px solid #333333;
+    box-sizing: border-box;
+}
+
+.transitFooter .transitRouteContent span:last-child {
+    display: inline-block;
+    margin: 0 0 0 .3rem;
+}
+
+.carRoute .greenRoute {
+    width: 100%;
+    height: .5rem;
+    border-radius: 9rem;
+    background: #4FB80D;
+    margin-top: 1.5rem;
+}
+
+.carRoute .nameRoute {
+    width: 98%;
+    margin: 1%;
+    display: flex;
+}
+
+.nameRouteItem {
+    font-size: 1rem;
+}
+
+.nameRouteItem .number {
+    font-size: .8rem;
+    width: 1rem;
+    text-align: center;
+    color: #999999;
+    margin-bottom: .3rem;
+}
+
+/* 公交详情弹窗 end */
+
 @keyframes counterAnimation {
     from {
         opacity: 0;

nngkxxdp/src/main/resources/static/naxsb/floorone.html

@@ -104,6 +104,35 @@
         cursor: pointer;
         background-image: url(https://www.cqna.gov.cn/syygapi/naxsb/images/logo-vr.png);
         background-size: 100% 100%;
+
+    }
+
+    .vrdiv .vrDname,
+    .vrdiv .vrDname2 {
+        position: absolute;
+        display: inline-flex;
+        flex-direction: column;
+        color: #2895FF;
+        font-size: 14px;
+        justify-content: center;
+        align-items: center;
+        right: -26px;
+        width: 80px;
+    }
+
+    .vrdiv .vrDname .vrNameLine,
+    .vrdiv .vrDname2 .vrNameLine {
+        display: inline-block;
+        border-left: 2px dashed #2895FF;
+        height: 36px;
+    }
+
+    .vrdiv .vrDname {
+        top: -50px;
+    }
+
+    .vrdiv .vrDname2 {
+        bottom: -50px;
     }
 
     .btable {
@@ -238,6 +267,110 @@
         align-items: center;
         justify-content: center;
     }
+
+    /* 楼层指引 start */
+    .floorGuide {
+        position: absolute;
+        left: 300px;
+        top: 60px;
+        width: 871px;
+        height: 730px;
+        z-index: 11;
+    }
+
+    .floorGuide .floorGuideBg {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    }
+
+    .floorGuide .floorGuideTit {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 70px;
+        font-weight: bold;
+        font-size: 26px;
+        color: #004A93;
+        display: flex;
+        align-items: center;
+    }
+
+    .floorGuideTit .floorGuideIcon {
+        width: 15px;
+        height: 24px;
+        margin: 0 13px 0 26px;
+    }
+
+    .floorGuideTit span {
+        line-height: 30px;
+        margin-bottom: 3px;
+    }
+
+    .floorGuide .floorGuideTable {
+        position: absolute;
+        top: 86px;
+        left: 44px;
+        width: calc(100% - 88px);
+    }
+
+    .floorGuideTable .floorGuide-row .el-col {
+        margin-bottom: 20px;
+        display: flex;
+        justify-content: start;
+    }
+
+    .floorGuideTable .floorNum-col,
+    .floorGuideTable .floorName-col {
+        line-height: 30px;
+        display: inline-block;
+        border-bottom: 1px solid #3D86CE;
+    }
+
+    .floorGuideTable .floorName-col {
+        font-weight: 400;
+        font-size: 24px;
+        color: #004A93;
+        width: 310px;
+    }
+
+    .floorGuideTable .floorNum-col {
+        font-weight: 400;
+        font-size: 22px;
+        color: #FFFFFF;
+        width: 60px;
+        height: 30px;
+        position: relative;
+        top: 0;
+        left: 0;
+    }
+
+    .floorNum-col img {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    }
+
+    .floorNum-col span {
+        position: absolute;
+        top: 0;
+        left: 0;
+        display: inline-flex;
+        height: 100%;
+        align-items: center;
+        margin: 0 0 0 7px;
+    }
+
+    .activeGuide {
+        background-color: #25A8AA !important;
+    }
+
+    /* 楼层指引 end */
 </style>
 
 <body>
@@ -249,6 +382,26 @@
                 {{tab.name}}
             </div>
             <div class="list" @click="backsw">返回室外</div>
+            <div class="list" :class="{ activeGuide: floorGuideShow }" @click="floorGuideShow=true">楼层指引</div>
+        </div>
+        <div class="floorGuide" v-show="floorGuideShow">
+            <img class="floorGuideBg" src="./images/floor-floorGuide-bg.png" alt="" srcset="">
+            <div class="floorGuideTit">
+                <img class="floorGuideIcon" src="./images/floor-floorGuide-icon.png" alt="" srcset="">
+                <span>2号楼楼层指引</span>
+            </div>
+            <div class="floorGuideTable">
+                <el-row :gutter="20" class="floorGuide-row">
+                    <el-col :span="12" v-for="item in floorGuideList" :key="item.floorNum">
+                        <span class="floorNum-col">
+                            <img src="./images/floor-floorGuide-numBg.png" alt="" srcset="">
+                            <span>{{item.floorNum}}</span>
+                        </span>
+                        <span class="floorName-col" v-if="item.name.length<=12">{{item.name}}</span>
+                        <span class="floorName-col" :title="item.name" v-else>{{item.name.substring(0,11)}}...</span>
+                    </el-col>
+                </el-row>
+            </div>
         </div>
         <el-dialog title="窗口电话" class="global-dialog" :visible.sync="dialogVisible" width="60%"
             :before-close="handleClose" :close-on-click-modal="false">
@@ -493,21 +646,33 @@
                 <img src="https://www.cqna.gov.cn/syygapi/naxsb/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>
+                    @click="window.open('https://www.cqna.gov.cn/vr/dating3/tour.html?startscene=1')">
+                    <span class="vrDname">大厅1<span class="vrNameLine"></span></span>
+                </div>
                 <div class="vrdiv" style="left: 284px;bottom: 120px;"
                     @click="window.open('https://www.cqna.gov.cn/vr/dating3/tour.html?startscene=2')">
+                    <span class="vrDname">自助服务区<span class="vrNameLine"></span></span>
                 </div>
                 <div class="vrdiv" style="left: 277px;bottom: 69px;"
                     @click="window.open('https://www.cqna.gov.cn/vr/dating3/tour.html?startscene=3')">
+                    <span class="vrDname2"><span class="vrNameLine"></span>大厅2</span>
                 </div>
                 <div class="vrdiv" style="left: 384px;bottom: 146px;"
-                    @click="window.open('https://www.cqna.gov.cn/vr/dating3/tour.html?startscene=4')"></div>
+                    @click="window.open('https://www.cqna.gov.cn/vr/dating3/tour.html?startscene=4')">
+                    <span class="vrDname">大厅电梯口<span class="vrNameLine"></span></span>
+                </div>
                 <div class="vrdiv" style="right: 240px;bottom: 103px;"
-                    @click="window.open('https://www.cqna.gov.cn/vr/dating3/tour.html?startscene=5')"></div>
+                    @click="window.open('https://www.cqna.gov.cn/vr/dating3/tour.html?startscene=5')">
+                    <span class="vrDname">过道<span class="vrNameLine"></span></span>
+                </div>
                 <div class="vrdiv" style="right: 195px;top: 73px;"
-                    @click="window.open('https://www.cqna.gov.cn/vr/dating3/tour.html?startscene=6')"></div>
+                    @click="window.open('https://www.cqna.gov.cn/vr/dating3/tour.html?startscene=6')">
+                    <span class="vrDname">婚姻登记处<span class="vrNameLine"></span></span>
+                </div>
                 <div class="vrdiv" style="right: 284px;top: 99px;"
-                    @click="window.open('https://www.cqna.gov.cn/vr/dating3/tour.html?startscene=7')"></div>
+                    @click="window.open('https://www.cqna.gov.cn/vr/dating3/tour.html?startscene=7')">
+                    <span class="vrDname">颁证厅<span class="vrNameLine"></span></span>
+                </div>
                 <div class="namebtnl threed" style="left: 150px;bottom: 88px;background-color: #D97064;
         text-shadow: 3px 1px 2px rgb(217 112 100 / 80%);">咨询台
                 </div>
@@ -529,17 +694,29 @@
             <div class="imgDiv">
                 <img src="https://www.cqna.gov.cn/syygapi/naxsb/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>
+                    @click="window.open('https://www.cqna.gov.cn/vr/dating3/tour.html?startscene=9')">
+                    <span class="vrDname">办事处2<span class="vrNameLine"></span></span>
+                </div>
                 <div class="vrdiv" style="left: 313px;bottom: 94px;"
-                    @click="window.open('https://www.cqna.gov.cn/vr/dating3/tour.html?startscene=8')"></div>
+                    @click="window.open('https://www.cqna.gov.cn/vr/dating3/tour.html?startscene=8')">
+                    <span class="vrDname2"><span class="vrNameLine"></span>办事处1</span>
+                </div>
                 <div class="vrdiv" style="right: 216px;bottom: 156px;"
-                    @click="window.open('https://www.cqna.gov.cn/vr/dating3/tour.html?startscene=10')"></div>
+                    @click="window.open('https://www.cqna.gov.cn/vr/dating3/tour.html?startscene=10')">
+                    <span class="vrDname2"><span class="vrNameLine"></span>办事处3</span>
+                </div>
                 <div class="vrdiv" style="right: 260px;top: 120px;"
-                    @click="window.open('https://www.cqna.gov.cn/vr/dating3/tour.html?startscene=11')"></div>
+                    @click="window.open('https://www.cqna.gov.cn/vr/dating3/tour.html?startscene=11')">
+                    <span class="vrDname">办事处4<span class="vrNameLine"></span></span>
+                </div>
                 <div class="vrdiv" style="right: 226px;top: 33px;"
-                    @click="window.open('https://www.cqna.gov.cn/vr/dating3/tour.html?startscene=12')"></div>
+                    @click="window.open('https://www.cqna.gov.cn/vr/dating3/tour.html?startscene=12')">
+                    <span class="vrDname">办事处5<span class="vrNameLine"></span></span>
+                </div>
                 <div class="vrdiv" style="right: 175px;top: 105px;"
-                    @click="window.open('https://www.cqna.gov.cn/vr/dating3/tour.html?startscene=13')"></div>
+                    @click="window.open('https://www.cqna.gov.cn/vr/dating3/tour.html?startscene=13')">
+                    <span class="vrDname">办事处6<span class="vrNameLine"></span></span>
+                </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">公安综合办理区
@@ -556,18 +733,24 @@
             <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>
+                    @click="window.open('https://www.cqna.gov.cn/vr/dating3/tour.html?startscene=14')">
+                    <span class="vrDname">电梯口<span class="vrNameLine"></span></span>
+                </div>
                 <div class="vrdiv" style="right:201px;top: 84px;"
-                    @click="window.open('https://www.cqna.gov.cn/vr/dating3/tour.html?startscene=15')"></div>
+                    @click="window.open('https://www.cqna.gov.cn/vr/dating3/tour.html?startscene=15')">
+                    <span class="vrDname">办事处1<span class="vrNameLine"></span></span>
+                </div>
                 <div class="vrdiv" style="right: 175px;top: 185px;"
-                    @click="window.open('https://www.cqna.gov.cn/vr/dating3/tour.html?startscene=16')"></div>
+                    @click="window.open('https://www.cqna.gov.cn/vr/dating3/tour.html?startscene=16')">
+                    <span class="vrDname">办事处2<span class="vrNameLine"></span></span>
+                </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: 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>
@@ -588,7 +771,8 @@
                 <div class="button" @click="goToLink('https://www.cqna.gov.cn/ykb_254/')">主题服务</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="goToLink('https://www.cqna.gov.cn/ghwd/znwd/index.html')">智能问答</div> -->
+                <div class="button" @click="goToLink('https://www.cqna.gov.cn/syygapi/naxsb/zwfwtyy.html')">体验员招募</div>
                 <div class="button" @click="dialogVisible=true">窗口电话</div>
             </div>
         </div>
@@ -725,7 +909,108 @@
                         title: "残疾类别/等级变更",
                         url: ""
                     }
+                ],
+                /* 楼层指引 start */
+                floorGuideShow: false,//楼层指引显示控制
+                floorGuideList: [
+                    {
+                        floorNum: '-1F',
+                        name: '地下车库'
+                    },
+                    {
+                        floorNum: '11F',
+                        name: '区商务委'
+                    },
+                    {
+                        floorNum: '-2F',
+                        name: '地下车库'
+                    },
+                    {
+                        floorNum: '12F',
+                        name: '区商务委、区违整办'
+                    },
+                    {
+                        floorNum: '1F',
+                        name: '区政务服务大厅'
+                    },
+                    {
+                        floorNum: '13F',
+                        name: '区交通运输委'
+                    },
+                    {
+                        floorNum: '2F',
+                        name: '区政务服务大厅'
+                    },
+                    {
+                        floorNum: '14F',
+                        name: '区道路运输事务中心'
+                    },
+                    {
+                        floorNum: '3F',
+                        name: '南岸区经开区政务大厅'
+                    },
+                    {
+                        floorNum: '15F',
+                        name: '区生态环境局'
+                    },
+                    {
+                        floorNum: '4F',
+                        name: '区公共资源交易中心'
+                    },
+                    {
+                        floorNum: '16F',
+                        name: '区生态环境局'
+                    },
+                    {
+                        floorNum: '5F',
+                        name: '南岸区经开区行政服务中心'
+                    },
+                    {
+                        floorNum: '17F',
+                        name: '区城管局、区生态环境局'
+                    },
+                    {
+                        floorNum: '6F',
+                        name: '区民政局'
+                    },
+                    {
+                        floorNum: '18F',
+                        name: '区城管局'
+                    },
+                    {
+                        floorNum: '7F',
+                        name: '区民政局'
+                    },
+                    {
+                        floorNum: '19F',
+                        name: '区城管局'
+                    },
+                    {
+                        floorNum: '8F',
+                        name: '区科技局、区民政局'
+                    },
+                    {
+                        floorNum: '20F',
+                        name: '区供销社'
+                    },
+                    {
+                        floorNum: '9F',
+                        name: '区文化旅游委、区工商联（区总商户）'
+                    },
+                    {
+                        floorNum: '21F',
+                        name: '重庆市南岸区隧道轨道交通建设服务中心'
+                    },
+                    {
+                        floorNum: '10F',
+                        name: '区文化旅游委'
+                    },
+                    {
+                        floorNum: '22F',
+                        name: ''
+                    },
                 ]
+                /* 楼层指引 end */
             };
         },
         created() {
@@ -737,6 +1022,10 @@
             $('.threed').show();
             $('.vrdiv').hide();
             document.querySelector('#app').classList.remove('hide');
+            // 启动整个文档点击事件监听
+            this.$nextTick(() => {
+                document.addEventListener("click", this.floorGuideHideFun, true);
+            });
         },
         methods: {
             handleClose(done) {
@@ -833,8 +1122,22 @@
                         that.total = data.data.total;
                     }
                 })
+            },
+            // 监听文档点击事件若不在楼层索引展示区则隐藏此弹窗
+            floorGuideHideFun(e) {
+                let parentNode = e.target.parentNode
+                if (parentNode.className != 'floorGuide'
+                    && parentNode.className != 'el-col el-col-12'
+                    && parentNode.className != 'floorGuideTable'
+                    && parentNode.className != 'floorNum-col'
+                    && parentNode.className != 'floorName-col'
+                    && this.floorGuideShow)
+                    this.floorGuideShow = false;
             }
-        }
+        },
+        beforeDestroy() {
+            document.removeEventListener("click", this.floorGuideHideFun); //页面销毁的时候移除事件
+        },
     })
 </script>
 <script>

nngkxxdp/src/main/resources/static/naxsb/mobile/flooroneMobile.html

@@ -364,22 +364,147 @@
         position: absolute;
         z-index: 111;
     }
+
+    /* 楼层指引 start */
+    .floorGuide {
+        width: 100vw;
+        position: relative;
+        top: 0;
+        left: 0;
+    }
+
+    .floorGuide .floorGuideBg {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    }
+
+    .floorGuide .floorGuideTit {
+        width: 100%;
+        height: 30px;
+        font-weight: bold;
+        font-size: 14px;
+        color: #004A93;
+        display: flex;
+        align-items: center;
+        position: relative;
+        top: 0;
+        left: 0;
+        z-index: 120;
+    }
+
+    .floorGuideTit .floorGuideIcon {
+        width: 8px;
+        height: 14px;
+        margin: 0 13px 0 26px;
+    }
+
+    .floorGuideTit span {
+        line-height: 30px;
+    }
+
+    .floorGuide .floorGuideTable {
+        width: calc(100% - 20px);
+        padding: 0 20px;
+        height: calc(100vh - 830px);
+        overflow-y: auto;
+    }
+
+    .floorGuideTable .floorGuide-row .el-col {
+        margin-bottom: 10px;
+        display: flex;
+        justify-content: start;
+    }
+
+    .floorGuideTable .floorNum-col,
+    .floorGuideTable .floorName-col {
+        line-height: 20px;
+        display: inline-block;
+        border-bottom: 1px solid #3D86CE;
+    }
+
+    .floorGuideTable .floorName-col {
+        font-weight: 400;
+        font-size: 14px;
+        color: #004A93;
+        width: calc(100% - 60px);
+    }
+
+    .floorGuideTable .floorNum-col {
+        font-weight: 400;
+        font-size: 12px;
+        color: #FFFFFF;
+        width: 40px;
+        height: 20px;
+        position: relative;
+        top: 0;
+        left: 0;
+    }
+
+    .floorNum-col img {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    }
+
+    .floorNum-col span {
+        position: absolute;
+        top: 0;
+        left: 0;
+        display: inline-flex;
+        height: 100%;
+        align-items: center;
+        margin: 0 0 0 7px;
+    }
+
+    .activeGuide {
+        background-color: #25A8AA !important;
+    }
+
+    /* 楼层指引 end */
 </style>
 
 <body>
     <div style="width:100%;" class="header"></div>
     <div class="container hide" id="app" style="">
         <div class="floorTabs">
-            <div class="list" :class="{ active: currentFloor == tab.id }" v-for="(tab,index) in floorList" :key="index"
-                @click="floorChange(tab.id)">
+            <div class="list" :class="{ active: currentFloor == tab.id&&!floorGuideShow }"
+                v-for="(tab,index) in floorList" :key="index" @click="floorChange(tab.id)">
                 {{tab.name}}
             </div>
             <div class="list" @click="backsw">返回室外</div>
+            <div class="list" :class="{ activeGuide: floorGuideShow }" @click="floorGuideShow=!floorGuideShow">楼层指引
+            </div>
         </div>
-        <div class="bottomBtn">
+        <div class="bottomBtn" v-show="!floorGuideShow">
             <div class="btn active" id="threed" @click="showthreed">3D</div>
             <div class="btn" id="vrdiv" @click="showvrdiv">VR</div>
         </div>
+        <div class="floorGuide" v-show="floorGuideShow">
+            <img class="floorGuideBg" src="images/floor-floorGuide-bg.png" alt="" srcset="">
+            <div class="floorGuideTit">
+                <img class="floorGuideIcon" src="images/floor-floorGuide-icon.png" alt="" srcset="">
+                <span>2号楼楼层指引</span>
+            </div>
+            <div class="floorGuideTable">
+                <el-row :gutter="20" class="floorGuide-row">
+                    <el-col :span="24" v-for="item in floorGuideList" :key="item.floorNum">
+                        <span class="floorNum-col">
+                            <img src="images/floor-floorGuide-numBg.png" alt="" srcset="">
+                            <span>{{item.floorNum}}</span>
+                        </span>
+                        <span class="floorName-col">{{item.name}}</span>
+
+                        <!-- <span class="floorName-col" v-if="item.name.length<=12">{{item.name}}</span>
+                        <span class="floorName-col" :title="item.name" v-else>{{item.name.substring(0,11)}}...</span> -->
+                    </el-col>
+                </el-row>
+            </div>
+        </div>
         <el-dialog title="窗口电话" class="global-dialog" :visible.sync="dialogVisible" width="98%"
             :before-close="handleClose" :close-on-click-modal="false">
             <div class="btable">
@@ -523,7 +648,7 @@
                 </table>
             </div>
         </el-dialog>
-        <div class="moxing" v-show="currentFloor == 1">
+        <div class="moxing" v-show="currentFloor == 1&&!floorGuideShow">
             <div class="imgDiv">
                 <div class="redio floor1" style="left: 150px;bottom: 53px;"></div>
                 <div class="redio floor1" style="left: 143px;bottom: 36px;"></div>
@@ -576,7 +701,7 @@
             <div style="font-size: 14px;color: #004A93;text-align: center;">2号楼一楼婚姻登记处社保卡办理</div>
             <div style="font-size: 13px;color: #547596;text-align: center;">（您可以点击图中的按钮查看详情）</div>
         </div>
-        <div class="moxing" v-show="currentFloor == 2">
+        <div class="moxing" v-show="currentFloor == 2&&!floorGuideShow">
             <div class="imgDiv">
                 <div class="redio floor1" style="right: 92px;top: 34px;"></div>
                 <div class="redio floor1" style="right: 172px;top: 57px;"></div>
@@ -608,7 +733,7 @@
             <div style="font-size: 14px;color: #004A93;text-align: center;">2号楼二楼无差别、区公安办理区</div>
             <div style="font-size: 13px;color: #547596;text-align: center;">（您可以点击图中的按钮查看详情）</div>
         </div>
-        <div class="moxing" v-show="currentFloor == 3">
+        <div class="moxing" v-show="currentFloor == 3&&!floorGuideShow">
             <div class="imgDiv" style="display: flex;">
                 <div class="redio floor1" style="right: 94px;top: 35px;"></div>
                 <div class="redio floor1" style="right: 93px;top: 72px;"></div>
@@ -630,7 +755,7 @@
                     style="left: 10px;bottom: 16px;display: flex;flex-direction: column;align-items: center;">
                     <span>314工程建设项目</span><span>审批会议室</span>
                 </div>
-                <div class="namebtnl threed" style="right: 95px;top: 60px;">政务公开专区</div>
+                <!-- <div class="namebtnl threed" style="right: 95px;top: 60px;">政务公开专区</div> -->
                 <div class="namebtnl threed" style="right: 104px;top: 32px;">自助服务区</div>
                 <div class="namebtn threed" style="left: 135px;bottom: -38px;padding: 0 2px;" data-popupType="2"
                     data-id="8">工程建设领域办理区
@@ -746,7 +871,8 @@
                 <div class="button" @click="goToLink('https://www.cqna.gov.cn/ykb_254/')">主题服务</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="goToLink('https://www.cqna.gov.cn/ghwd/znwd/index.html')">智能问答</div> -->
+                <div class="button" @click="goToLink('https://www.cqna.gov.cn/syygapi/naxsb/zwfwtyy.html')">体验员招募</div>
                 <div class="button" @click="dialogVisible=true">窗口电话</div>
             </div>
         </div>
@@ -872,7 +998,110 @@
                         title: "残疾类别/等级变更",
                         url: ""
                     }
+                ],
+                /* 楼层指引 start */
+                floorGuideShow: false,//楼层指引显示控制
+                floorGuideList: [
+                    {
+                        floorNum: '-1F',
+                        name: '地下车库'
+                    },
+                    {
+                        floorNum: '-2F',
+                        name: '地下车库'
+                    },
+                    {
+                        floorNum: '1F',
+                        name: '区政务服务大厅'
+                    },
+                    {
+                        floorNum: '2F',
+                        name: '区政务服务大厅'
+                    },
+                    {
+                        floorNum: '3F',
+                        name: '南岸区经开区政务大厅'
+                    },
+                    {
+                        floorNum: '4F',
+                        name: '区公共资源交易中心'
+                    },
+
+                    {
+                        floorNum: '5F',
+                        name: '南岸区经开区行政服务中心'
+                    },
+                    {
+                        floorNum: '6F',
+                        name: '区民政局'
+                    },
+                    {
+                        floorNum: '7F',
+                        name: '区民政局'
+                    },
+
+                    {
+                        floorNum: '8F',
+                        name: '区科技局、区民政局'
+                    },
+                    {
+                        floorNum: '9F',
+                        name: '区文化旅游委、区工商联（区总商户）'
+                    },
+                    {
+                        floorNum: '10F',
+                        name: '区文化旅游委'
+                    },
+                    {
+                        floorNum: '11F',
+                        name: '区商务委'
+                    },
+                    {
+                        floorNum: '12F',
+                        name: '区商务委、区违整办'
+                    },
+                    {
+                        floorNum: '13F',
+                        name: '区交通运输委'
+                    },
+                    {
+                        floorNum: '14F',
+                        name: '区道路运输事务中心'
+                    },
+                    {
+                        floorNum: '15F',
+                        name: '区生态环境局'
+                    },
+                    {
+                        floorNum: '16F',
+                        name: '区生态环境局'
+                    },
+                    {
+                        floorNum: '17F',
+                        name: '区城管局、区生态环境局'
+                    },
+                    {
+                        floorNum: '18F',
+                        name: '区城管局'
+                    },
+                    {
+                        floorNum: '19F',
+                        name: '区城管局'
+                    },
+                    {
+                        floorNum: '20F',
+                        name: '区供销社'
+                    },
+                    {
+                        floorNum: '21F',
+                        name: '重庆市南岸区隧道轨道交通建设服务中心'
+                    },
+                    {
+                        floorNum: '22F',
+                        name: ''
+                    },
                 ]
+                /* 楼层指引 end */
             };
         },
         created() {
@@ -928,6 +1157,7 @@
                 }
             },
             floorChange(id) {
+                this.floorGuideShow = false;
                 this.currentFloor = id;
                 this.popupType = 'other'
                 this.popupShow = false;

nngkxxdp/src/main/resources/static/naxsb/mobile/qjtMobile.html

@@ -30,7 +30,7 @@
     <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>
-         * {
+        * {
             margin: 0;
             padding: 0;
         }
@@ -48,6 +48,7 @@
         body {
             font-size: 14px;
         }
+
         .building-box {
             cursor: pointer;
         }
@@ -84,6 +85,7 @@
             position: absolute;
             top: 186px;
             left: -58px;
+            z-index: 12;
         }
 
         .building-text {
@@ -175,7 +177,8 @@
             align-items: center;
             margin-top: 10px;
         }
-        .floorcontent .bottom span:first-child{
+
+        .floorcontent .bottom span:first-child {
             font-size: 20px;
             font-weight: 600;
             font-style: italic;
@@ -224,11 +227,13 @@
             color: #8954FF;
         }
 
-        .blsl .list {
+        .blsl .list,
+        .pdgdf .list {
             width: 44%;
             display: flex;
             align-items: center;
             height: 33%;
+            box-sizing: border-box;
         }
 
         .blsl .list .img {
@@ -240,28 +245,44 @@
             margin-right: 5px;
         }
 
-        .blsl .list .right {
+        .blsl .list .right,
+        .pdgdf .list .right {
             display: flex;
             flex-direction: column;
             justify-content: space-between;
             height: 75%;
         }
 
-        .blsl .list .right>span {
+        .blsl .list .right>span,
+        .pdgdf .list .right>span {
             white-space: nowrap;
             font-size: 14px;
         }
 
-        .blsl .list .right .number {
+        .blsl .list .right .number,
+        .pdgdf .list .right .number {
             color: #5482F9;
             font-size: 10px;
         }
 
-        .blsl .list .right .number span:first-child {
+        .blsl .list .right .number span:first-child,
+        .pdgdf .list .right .number span:first-child {
             font-weight: bold;
             font-size: 20px;
             font-style: italic;
         }
+
+
+        .pdgdf .list .img {
+            /* width: 30%; */
+            height: 60%;
+        }
+
+        .pdgdf .list .img img {
+            /* width: 100%; */
+            height: 100%;
+        }
+
         .top_t {
             padding: 10px 0;
             border-bottom: 1px solid #5482F9;
@@ -330,6 +351,94 @@
             white-space: nowrap;
             text-overflow: ellipsis;
         }
+
+        /* 区行政服务中心网点分布 start */
+        .districtLevel {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100vw;
+            height: 100vh;
+            background: #30313345;
+            z-index: 122;
+        }
+
+        .districtContent {
+            position: absolute;
+            top: 10%;
+            left: 5%;
+            height: 80%;
+            width: 90%;
+        }
+
+        .districtContent-bg,
+        .districtContent-content {
+            position: absolute;
+            top: 0;
+            left: 0;
+            height: 100%;
+            width: 100%;
+        }
+
+        .districtContent-content {
+            padding: 0 6%;
+            box-sizing: border-box;
+        }
+
+        .districtContent-content-top {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 18px;
+            color: #2895FF;
+            margin: 30px 0 10px 0;
+            box-sizing: border-box;
+            padding: 0 1%;
+        }
+
+        .districtContent-content-top img {
+            width: 16px;
+            height: 16px;
+        }
+
+        .districtContent-content-line {
+            width: 100%;
+            height: 12px;
+        }
+
+        .districtContent-content-bottom {
+            width: 100%;
+            height: calc(100% - 120px);
+            overflow-y: auto;
+        }
+
+        .districtContent-content-list {
+            width: 100%;
+            display: flex;
+            margin-bottom: 15px;
+        }
+
+        .districtContent-content-list img {
+            width: 36px;
+            height: 36px;
+            margin-right: 10px;
+        }
+
+        .list-content div {
+            display: flex;
+            font-size: 12px;
+        }
+
+        .list-content div:first-child {
+            font-size: 16px;
+            color: #2895FF;
+        }
+
+        .list-content div span:first-child {
+            white-space: nowrap;
+        }
+
+        /* 区行政服务中心网点分布 end */
     </style>
 </head>
 
@@ -469,12 +578,86 @@
                             </div>
                         </div>
                         <div class="pdgdf conList">
-                            <div class="floortitle">大厅取号高低峰图</div>
+                            <div class="floortitle">区行政服务中心网点分布</div>
                             <div class="floorcontent">
-                                <div id="pdgdfechart" style="width: 100%;height: 100%;"></div>
+                                <!-- <div id="pdgdfechart" style="width: 100%;height: 100%;"></div> -->
+                                <div class="floorcontent">
+                                    <div class="list" @click="showDistrictLevel(1)">
+                                        <div class="img">
+                                            <img src="images/pdgdf1.png" alt="">
+                                        </div>
+                                        <div class="right">
+                                            <span>区级中心</span>
+                                            <div class="number">
+                                                <span>3</span>
+                                                <span>个</span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="list" @click="showDistrictLevel(2)">
+                                        <div class="img">
+                                            <img src="images/pdgdf2.png" alt="">
+                                        </div>
+                                        <div class="right">
+                                            <span>镇街便民服务中心</span>
+                                            <div class="number">
+                                                <span>15</span>
+                                                <span>个</span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="list" @click="showDistrictLevel(3)">
+                                        <div class="img">
+                                            <img src="images/pdgdf3.png" alt="">
+                                        </div>
+                                        <div class="right">
+                                            <span>便民服务站</span>
+                                            <div class="number">
+                                                <span>153</span>
+                                                <span>个</span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="list" @click="showDistrictLevel(4)">
+                                        <div class="img">
+                                            <img src="images/pdgdf4.png" alt="">
+                                        </div>
+                                        <div class="right">
+                                            <span>分中心</span>
+                                            <div class="number">
+                                                <span>2</span>
+                                                <span>个</span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
                             </div>
 
                         </div>
+                        <div class="districtLevel" v-show="districtLevelShow">
+                            <div class="districtContent">
+                                <img class="districtContent-bg" src="images/pdgdfBg.png" alt="" srcset="">
+                                <div class="districtContent-content">
+                                    <div class="districtContent-content-top">
+                                        <span></span>
+                                        <span>{{districtLevelTitle}}</span>
+                                        <img @click="districtLevelShow=false" src="images/pdgdfClose.png" alt="">
+                                    </div>
+                                    <img class="districtContent-content-line" src="images/pdgdfLine.png" alt="">
+                                    <div class="districtContent-content-bottom">
+                                        <div class="districtContent-content-list"
+                                            v-for="(item,index) in districtLevelList" :key="index">
+                                            <img :src="`images/pdgdfIcon${districtLevelNum}.png`" alt="" srcset="">
+                                            <div class="list-content">
+                                                <div>{{index+1}}.{{item.name}}</div>
+                                                <div><span>电话：</span><span>{{item.tel}}</span></div>
+                                                <div><span>地址：</span><span>{{item.address}}</span></div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -512,7 +695,7 @@
         autoClear: true,
         logarithmicDepthBuffer: true
     });
-    renderer.setSize(mwidth, 1.4*mwidth);
+    renderer.setSize(mwidth, 1.4 * mwidth);
     renderer.shadowMap.enabled = true;
 
     // 2D 文字渲染
@@ -600,7 +783,7 @@
                     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="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>';
@@ -638,12 +821,12 @@
                     div.id = child.uuid;
                     let html = '';
                     html += '<div class="building-box" style="top: 73px;">';
-                    html += `<div class="text" style="top: -51px;left: 146px;position: absolute;display: flex;flex-direction: column;align-items: flex-start;color: #1A95EB;">
-                                <span style="font-size: 16px;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="">
-                            </div>`
+                    // html += `<div class="text" style="top: -51px;left: 146px;position: absolute;display: flex;flex-direction: column;align-items: flex-start;color: #1A95EB;">
+                    //             <span style="font-size: 16px;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="">
+                    //         </div>`
                     html += '<div class="building-text">';
                     html += '<span>4号楼</span><span style="font-size: 10px;">商务打印、小卖部、食堂</span>';
                     html += '</div>';
@@ -709,7 +892,29 @@
         el: '#qjt',
         data: function () {
             return {
-                bjxqList: []
+                bjxqList: [],
+                /*  区行政服务中心网点分布 start*/
+                districtLevelShow: false,
+                districtLevelTitle: '',
+                districtLevelNum: -1,
+                districtLevelList: [
+                    {
+                        name: '重庆市南岸区政务服务中心（江南新城中心）',
+                        tel: '023-62980263',
+                        address: '重庆市南岸区铜元局街道南坪西路36号（上海城嘉发跨贸中心          二楼）南岸区'
+                    },
+                    {
+                        name: '重庆市南岸区政务服务中心（江南新城中心）',
+                        tel: '023-62980263',
+                        address: '重庆市南岸区铜元局街道南坪西路36号（上海城嘉发跨贸中心          二楼）南岸区'
+                    },
+                    {
+                        name: '重庆市南岸区政务服务中心（江南新城中心）',
+                        tel: '023-62980263',
+                        address: '重庆市南岸区铜元局街道南坪西路36号（上海城嘉发跨贸中心          二楼）南岸区'
+                    }
+                ],
+                /*  区行政服务中心网点分布 end*/
             };
         },
         created() {
@@ -743,92 +948,98 @@
                 if (this.bjxqList.length) {
                     this.addKeyFrames(height * this.bjxqList.length);
                 }
+            },
+            // 区行政服务中心网点分布点击事件
+            showDistrictLevel(num) {
+                this.districtLevelShow = true
+                this.districtLevelNum = num
+                this.districtLevelTitle = { 1: '区级中心', 2: '镇街便民服务中心', 3: '便民服务站', 4: '分中心' }[num]
             }
         }
     });
 </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
-                },
-                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);
+    // 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
+    //             },
+    //             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";

nngkxxdp/src/main/resources/static/naxsb/qjt.html

@@ -289,16 +289,165 @@
                             </div>
                         </div>
                         <div class="pdgdf conList">
-                            <div class="floortitle">大厅取号高低峰图</div>
+                            <div class="floortitle">区行政服务中心网点分布</div>
                             <div class="floorcontent">
-                                <div id="pdgdfechart" style="width: 100%;height: 100%;"></div>
+                                <!-- <div id="pdgdfechart" style="width: 100%;height: 100%;"></div> -->
+                                <div class="list" @click="showDistrictLevel(1)">
+                                    <div class="img">
+                                        <img src="./images/districtLevelCenter.png" alt="">
+                                    </div>
+                                    <div class="right">
+                                        <span>区级中心</span>
+                                        <div class="number">
+                                            <span>3</span>
+                                            <span>个</span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="list" @click="showDistrictLevel(2)">
+                                    <div class="img">
+                                        <img src="./images/townStreet.png" alt="">
+                                    </div>
+                                    <div class="right">
+                                        <span>镇街便民服务中心</span>
+                                        <div class="number">
+                                            <span>15</span>
+                                            <span>个</span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="list" @click="showDistrictLevel(3)">
+                                    <div class="img">
+                                        <img src="./images/convenienceServiceStation.png" alt="">
+                                    </div>
+                                    <div class="right">
+                                        <span>便民服务站</span>
+                                        <div class="number">
+                                            <span>153</span>
+                                            <span>个</span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="list" @click="showDistrictLevel(4)">
+                                    <div class="img">
+                                        <img src="./images/subCenter.png" alt="">
+                                    </div>
+                                    <div class="right">
+                                        <span>分中心</span>
+                                        <div class="number">
+                                            <span>2</span>
+                                            <span>个</span>
+                                        </div>
+                                    </div>
+                                </div>
                             </div>
 
                         </div>
+                        <!-- 区行政服务中心网点分布弹窗 -->
+                        <div class="districtLevelBox" v-show="districtLevelShow">
+                            <div class="districtLevelContent">
+                                <img class="districtLevelbg" src="./images/districtLevelbg.png" alt="" srcset="">
+                                <div class="districtLevelContent-box" ref="districtLevelContent">
+                                    <div class="districtLevelContent-tit" ref="districtLevelTit">
+                                        <span></span>
+                                        <span>区行政服务中心网点分布——{{districtLevelTitle}}</span>
+                                        <img @click="clearDistrictLevel" src="./images/districtLevelClear.png" alt=""
+                                            srcset="">
+                                    </div>
+                                    <img class="districtLevelLine" ref="districtLevelLine"
+                                        src="./images/districtLevelLine.png" alt="">
+                                    <div class="districtLevelList" ref="districtLevelList"
+                                        :style="`height:${districtLevelListHeight}`">
+                                        <el-row>
+                                            <el-col :span="12" v-for="(item,index) in districtLevelList">
+                                                <div class="districtLevelList-col">
+                                                    <img :src="`./images/districtLevelList${districtLevelNum}.png`"
+                                                        alt="" srcset="">
+                                                    <div class="left">
+                                                        <span class="span-col name">{{index+1}}.{{item.name}}</span>
+                                                        <span class="span-col">
+                                                            <span class="label">电话：</span>
+                                                            <span class="center">{{item.tel}}</span>
+                                                        </span>
+                                                        <span class="span-col">
+                                                            <span class="label">地址：</span>
+                                                            <span class="center">{{item.address}}</span>
+                                                        </span>
+                                                    </div>
+                                                </div>
+                                            </el-col>
+                                        </el-row>
+                                    </div>
+                                    <div class="districtLevelFooter" ref="districtLevelFooter">
+                                        <el-pagination :page-size="10" background layout="prev, pager, next"
+                                            :total="districtLevelTotal">
+                                        </el-pagination>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <!-- 公交详情弹窗 -->
+                        <div id="transitTitPop" v-show="false"></div>
+                        <div class="districtLevelBox transitBox" id="transitBox" v-show="transitPopShow">
+                            <div class="districtLevelContent" id="transitContent">
+                                <img class="districtLevelbg" src="./images/districtLevelbg.png" alt="" srcset="">
+                                <div class="districtLevelContent-box">
+                                    <div class="districtLevelContent-tit">
+                                        <span></span>
+                                        <span>天福路口站</span>
+                                        <img @click="transitClearFun" src="./images/districtLevelClear.png" alt=""
+                                            srcset="">
+                                    </div>
+                                    <img class="districtLevelLine" src="./images/districtLevelLine.png" alt="">
+                                    <div class="transitContent">
+                                        <div class="transitContentList" v-for="(item,index) in transitList"
+                                            :key="item.id"
+                                            :style="`border-bottom:${index == transitList.length-1?0:'1px solid #33333341'}`"
+                                            @click="transitContentListClickFun(item)">
+                                            <div class="left">
+                                                <span
+                                                    class="left-col"><span>{{item.name}}</span><span>下一站：{{item.nextTransit}}</span></span>
+                                                <span class="left-col"><span>--</span><span>等待发出</span></span>
+                                            </div>
+                                            <div class="right"
+                                                @click="transitJson.routeOrder = !transitJson.routeOrder">
+                                                <img src="./images/transitChange.png" alt="">
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="transitFooter" v-show="transitShow">
+                                        <div class="transitRoute">
+                                            {{transitJson.routeOrder?transitJson.start:transitJson.end}}
+                                            <img src="./images/blueArrow.png" alt="" srcset="">
+                                            {{transitJson.routeOrder?transitJson.end:transitJson.start}}
+                                        </div>
+                                        <div class="transitRouteContent">
+                                            <span>首 {{transitJson.startTime}}</span>
+                                            <span>末 {{transitJson.endTime}}</span>
+                                            <span>票价{{transitJson.ticketPrice}}元</span>
+                                        </div>
+                                        <div class="carRoute">
+                                            <div class="greenRoute"></div>
+                                            <div class="nameRoute">
+                                                <div class="nameRouteItem" v-for="(item,index) in transitRouteList"
+                                                    :key="index"
+                                                    :style="`width:${ index==transitRouteList.length-1?'2%':98/(transitRouteList.length-1)}%`">
+                                                    <div class="number">{{index+1}}</div>
+                                                    <div v-for="colItem in item.name" :key="colItem">
+                                                        {{colItem}}
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
         </div>
+
         <div id="loading">
             <i class="fa fa-spinner fa-spin fa-fw"></i>加载中...
         </div>
@@ -380,8 +529,57 @@
         type: 'js'
     });
     gLTFLoader.setDRACOLoader(dracoLoader);
-    gLTFLoader.load('https://www.cqna.gov.cn/syygapi/naxsb/3ddemo/model/27.gltf', function (obj) {
+    gLTFLoader.load('./3ddemo/model/33.gltf', function (obj) {
+
         obj.scene.traverse(function (child) {
+
+            if (child.material && child.material.name) {
+                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;
+                if (child.material.name == 'ckck') {
+                    const div = document.createElement('div');
+                    div.id = child.uuid;
+                    let html = '';
+                    html += '<div style="font-size: 12px; width: 80px; text-align: center;position: relative;">';
+                    html += '<div class="building-text" style="background: #18A65A; margin-bottom: -2px;position: absolute;top:170px">';
+                    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 += '</div>';
+                    div.innerHTML = html;
+                    let tag = new THREE.CSS2DObject(div);
+                    child.add(tag);
+                }
+                if (child.material.name == 'gongjiaochezhan') {
+
+                    const div = document.createElement('div');
+                    div.id = child.uuid;
+                    let html = `
+                        <div class="building-box-chekuchukou">
+                            <div class="chekuchukou-tit"><span>公交车站</span><span id="busDetails">详情</span></div>
+                            <div>144路：即将到达</div>
+                            <div>180路：车已到站</div>
+                            <div>188路：9分钟</div>
+                            <div>345路：2分钟</div>
+                        </div>
+                    `;
+                    div.innerHTML = html;
+                    let tag = new THREE.CSS2DObject(div);
+                    child.add(tag);
+                    div.style.pointerEvents = 'auto';
+
+                    // div.addEventListener('click', function (event) {
+                    //     document.getElementById('transitTitPop').innerText = "true"
+                    // });
+
+                }
+            }
             if (child.isMesh) {
                 child.frustumCulled = false;
                 child.castShadow = true;
@@ -391,6 +589,7 @@
                 child.material.transparent = true;
                 child.material.emissiveIntensity = 0.8;
                 if (child.name) {
+                    // console.log(child, 'child', child.name);
                     const div = document.createElement('div');
                     div.id = child.uuid;
                     div.style = 'color:red;';
@@ -398,6 +597,7 @@
                     div.innerHTML = '<p data-name="' + child.name + '"></p>';
                     let tag = new THREE.CSS2DObject(div);
                 }
+
                 // 一号楼
                 if (child.name == 'yihaolou') {
                     const div = document.createElement('div');
@@ -410,10 +610,14 @@
                     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>
+                    html += `<div style="font-size: 12px;width: 100px;top: 326px;left: 58px;position: absolute;display: flex;flex-direction: column;align-items: flex-start;color: #fff;">
+                                <div class="building-text" style="background: #18A65A; margin-bottom: -2px;">
+                                <span style="text-align: left;">停车场</span>
+                                <span style="font-size: 10px; text-align: left;">空余车位：-</span>
+                                <span style="font-size: 10px; text-align: left;">空余充电桩：-</span>
+                                </div>
                             </div>`
-                    html += '<div class="building-line" style="border-left: 1px dashed #1D96E9; height: 100px; top: 326px;left: 58px;"></div>';
+                    // html += '<div class="building-line" style="border-left: 1px dashed #1D96E9; height: 100px; top: 326px;left: 58px;"></div>';
                     div.innerHTML = html;
                     let tag = new THREE.CSS2DObject(div);
                     child.add(tag);
@@ -430,7 +634,7 @@
                     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="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>';
@@ -468,12 +672,12 @@
                     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="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>';
@@ -484,7 +688,8 @@
                     let tag = new THREE.CSS2DObject(div);
                     child.add(tag);
                 }
-                if (child.name == 'chedao-chedao') {
+                if (child.name == 'chekuchukou') {
+                    // console.log(child, 'child', child.name);
                     const div = document.createElement('div');
                     div.id = child.uuid;
                     let html = '';
@@ -512,6 +717,13 @@
         obj.scene.position.sub(center);
 
         document.getElementById('loading').style.display = 'none';
+        // 公交详情加点事件
+        setTimeout(() => {
+            document.getElementById('busDetails').addEventListener('click', function (event) {
+                document.getElementById('transitTitPop').innerText = "true"
+            });
+        }, 300)
+
         render();
     }, function (xhr) {
     }, function (error) {
@@ -540,16 +752,105 @@
         data: function () {
             return {
                 currentTime: "",
-                bjxqList: []
+                bjxqList: [],
+                /*  区行政服务中心网点分布 start*/
+                districtLevelShow: false,
+                districtLevelTitle: '',
+                districtLevelNum: -1,
+                districtLevelList: [
+                    {
+                        name: '重庆市南岸区政务服务中心（江南新城中心）',
+                        tel: '023-62980263',
+                        address: '重庆市南岸区铜元局街道南坪西路36号（上海城嘉发跨贸中心          二楼）南岸区'
+                    },
+                    {
+                        name: '重庆市南岸区政务服务中心（江南新城中心）',
+                        tel: '023-62980263',
+                        address: '重庆市南岸区铜元局街道南坪西路36号（上海城嘉发跨贸中心          二楼）南岸区'
+                    },
+                    {
+                        name: '重庆市南岸区政务服务中心（江南新城中心）',
+                        tel: '023-62980263',
+                        address: '重庆市南岸区铜元局街道南坪西路36号（上海城嘉发跨贸中心          二楼）南岸区'
+                    }
+                ],
+                districtLevelTotal: 0,
+                districtLevelListHeight: "60%",
+                /*  区行政服务中心网点分布 end*/
+                /*  公交详情start */
+                transitPopShow: false,
+                transitShow: false,
+                transitTime: null,
+                transitList: [
+                    {
+                        name: '144路',
+                        nextTransit: '广福道',
+                        id: '1'
+                    },
+                    {
+                        name: '144路',
+                        nextTransit: '广福道',
+                        id: '2'
+                    }
+                ],
+                transitJson: {
+                    start: "响水路",
+                    end: "江南交通换乘枢纽",
+                    startTime: "06:00",
+                    endTime: "19:00",
+                    ticketPrice: "2",
+                    routeOrder: true//true表示顺序 false逆序
+                },
+                transitRouteList: [
+                    {
+                        name: '响水路',
+                    },
+                    {
+                        name: '南坪南路',
+                    },
+                    {
+                        name: '四公里立交',
+                    },
+                    {
+                        name: '茶园内环站',
+                    },
+                    {
+                        name: '玉马路',
+                    },
+                    {
+                        name: '江南小区',
+                    },
+                    {
+                        name: '广福大道',
+                    },
+                    {
+                        name: '天福路口',
+                    },
+                    {
+                        name: '广福大道中段',
+                    },
+                    {
+                        name: '广福大道中段',
+                    }
+                    ,
+                    {
+                        name: '江南交通换乘枢纽',
+                    }
+                ]
+                /*  公交详情end */
             };
         },
         created() {
             this.updateTime();
             setInterval(this.updateTime, 1000);
             this.getSSbj();
+            this.showTransitBoxFun()
         },
         beforeDestroy() {
             this.stopClock();
+            if (this.districtLevelShow)
+                window.removeEventListener("resize", this.getDistrictLevelListHeight);
+            clearInterval(this.transitTime)
         },
         methods: {
             updateTime() {
@@ -589,11 +890,53 @@
                 if (this.bjxqList.length) {
                     this.addKeyFrames(height * this.bjxqList.length);
                 }
+            },
+            // 区行政服务中心网点分布点击事件
+            showDistrictLevel(num) {
+                this.districtLevelShow = true
+                this.districtLevelNum = num
+                this.districtLevelTitle = { 1: '区级中心', 2: '镇街便民服务中心', 3: '便民服务站', 4: '分中心' }[num]
+                this.districtLevelTotal = { 1: 3, 2: 15, 3: 153, 4: 2 }[num]
+                this.getDistrictLevelListHeight()
+                window.addEventListener("resize", this.getDistrictLevelListHeight);
+            },
+            // 关闭弹窗
+            clearDistrictLevel() {
+                this.districtLevelShow = false
+                window.removeEventListener("resize", this.getDistrictLevelListHeight);
+            },
+            // 控制车辆信息详情展示区域的显示
+            transitContentListClickFun(item) {
+                this.transitShow = true
+            },
+            // 获取网点分布弹窗内容高度
+            getDistrictLevelListHeight() {
+                this.$nextTick(() => {
+                    const districtLevelContentHeight = this.$refs.districtLevelContent.offsetHeight;
+                    const districtLevelFooterHeight = this.$refs.districtLevelFooter.offsetHeight;
+                    this.districtLevelListHeight =
+                        (districtLevelContentHeight - this.$refs.districtLevelList.offsetTop - districtLevelFooterHeight - districtLevelContentHeight * 0.1) + 'px'
+                });
+            },
+            // 监听控制公交详情显示
+            showTransitBoxFun() {
+                let _this = this
+                this.transitTime = setInterval(() => {
+                    if (document.getElementById('transitTitPop').innerText == "true") {
+                        _this.transitPopShow = true
+                        document.getElementById('transitContent').style.display = "block"
+                    }
+                }, 100)
+            },
+            // 关闭公交弹窗
+            transitClearFun() {
+                document.getElementById('transitTitPop').innerText = ""
+                this.transitPopShow = false
             }
         }
     });
 </script>
-<script>
+<!-- <script>
     var chartDom = document.getElementById('pdgdfechart');
     var myChart = echarts.init(chartDom);
     var option;
@@ -675,7 +1018,7 @@
     };
 
     option && myChart.setOption(option);
-</script>
+</script> -->
 <script>
     var path = "https://www.cqna.gov.cn/data";
 

nngkxxdp/src/main/resources/static/naxsb/zwfwtyy.html

@@ -232,7 +232,7 @@
             <div class=" title">往期回顾</div>
             <div style="width: 100%;margin-top: 20px;">
                 <el-carousel :interval="4000" type="card" height="501px">
-                    <el-carousel-item v-for="item in 6" :key="item">
+                    <el-carousel-item v-for="item in 1" :key="item">
                         <img class="medium" src="images/gwhg1.png"></img>
                     </el-carousel-item>
                 </el-carousel>