1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name=”SiteName” content=”重庆市南岸区人民政府”>
- <meta name="SiteDomain" content="http://www.cqna.gov.cn" />
- <meta name="SiteIDCode" content="5001080014">
- <meta name="ColumnName" content="政务全景通">
- <meta name="ColumnDescription" content="政务全景通" />
- <meta name="ColumnKeywords" content="政务全景通" />
- <meta name="ColumnType" content="政务全景通" />
- <title>政务全景通-重庆市南岸区人民政府网</title>
- <script src="https://www.cqna.gov.cn/syygapi/naxsb/3ddemo/three.js"></script>
- <script src="https://www.cqna.gov.cn/syygapi/naxsb/3ddemo/Detector.js"></script>
- <script src="https://www.cqna.gov.cn/syygapi/naxsb/3ddemo/examples/js/libs/stats.min.js"></script>
- <script src="https://www.cqna.gov.cn/syygapi/naxsb/3ddemo/examples/js/controls/OrbitControls.js"></script>
- <script src="https://www.cqna.gov.cn/syygapi/naxsb/3ddemo/examples/js/loaders/GLTFLoader.js"></script>
- <script src="https://www.cqna.gov.cn/syygapi/naxsb/3ddemo/examples/js/loaders/DRACOLoader.js"></script>
- <script src="https://www.cqna.gov.cn/syygapi/naxsb/3ddemo/examples/js/renderers/CSS3DRenderer.js"></script>
- <script src="https://www.cqna.gov.cn/syygapi/naxsb/3ddemo/examples/js/renderers/CSS2DRenderer.js"></script>
- <!-- 引入 Vue -->
- <script src="https://www.cqna.gov.cn/syygapi/naxsb/js/vue.min.js"></script>
- <!-- 引入样式 -->
- <link rel="stylesheet" href="https://www.cqna.gov.cn/syygapi/naxsb/css/index.css">
- <link rel="stylesheet" href="css/qjt.css">
- <!-- 引入组件库 -->
- <script src="https://www.cqna.gov.cn/syygapi/naxsb/js/index.js"></script>
- <script src="js/echarts.min.js"></script>
- <script src="https://www.cqna.gov.cn/syygapi/naxsb/js/jquery-3.5.1.min.js"></script>
- <script src="https://www.cqna.gov.cn/syygapi/naxsb/js/urljson.js"></script>
- <style>
- @media screen and (max-width:1600px) {
- html,
- body {
- font-size: 14px;
- }
- .qjttitle {
- height: 95px;
- }
- .nowtime {
- top: 50px;
- }
- }
- @media screen and (max-width:1300px) {
- html,
- body {
- font-size: 10px;
- }
- .qjttitle {
- height: 85px;
- }
- .nowtime {
- top: 45px;
- }
- }
- .building-box {
- cursor: pointer;
- }
- @keyframes blink {
- from {
- opacity: 1;
- }
- to {
- opacity: 0;
- }
- }
- .finger {
- position: absolute;
- top: -60px;
- right: 20px;
- color: #FF8000;
- font-size: 20px;
- }
- .top_t {
- padding: 10px 0;
- border-bottom: 1px solid #5482F9;
- height: 26px;
- justify-content: space-between;
- }
- .top_t,
- .bottom-t {
- width: 100%;
- display: flex;
- font-size: 18px;
- color: #5482F9;
- }
- .bottom-t {
- flex-direction: column;
- overflow-y: scroll;
- }
- .bottom-t::-webkit-scrollbar {
- display: none;
- /* Chrome, Safari 和 Opera */
- -ms-overflow-style: none;
- /* IE 和 Edge */
- scrollbar-width: none;
- /* Firefox */
- }
- .bottom-t .item {
- width: 100%;
- display: flex;
- font-size: 16px;
- padding: 10px 0;
- justify-content: space-between;
- border-bottom: 1px solid #5482F9;
- }
- .t1 {
- width: 70px;
- text-align: center;
- }
- .t1 span {
- background: #1D96E9;
- border: 1px solid #1D96E9;
- padding: 0 5px;
- border-radius: 2px;
- color: #fff;
- }
- .t2 {
- width: 100px;
- text-align: center;
- overflow: hidden;
- word-break: break-all;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
- .t3 {
- width: calc(100% - 230px);
- text-align: center;
- overflow: hidden;
- word-break: break-all;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
- /* 楼层指引 start */
- .floorGuide {
- position: absolute;
- left: calc(50% - 435px);
- 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);
- display: flex;
- justify-content: space-between;
- }
- .floorGuide-row {
- display: flex;
- flex-direction: column;
- width: 50%;
- }
- .floorGuideTable .floorGuide-row .el-col {
- margin-bottom: 20px;
- display: flex;
- justify-content: start;
- width: 100%;
- }
- .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;
- }
- /* 结束 */
- </style>
- </head>
- <body>
- <div style="width:100%;" class="header"></div>
- <div class="container" style="position: relative;">
- <div class="row">
- <div class="col-sm-12">
- <div class="model-container"
- style="background: linear-gradient(180deg, rgb(246, 250, 255) 10%, rgb(214, 224, 235) 70%);">
- <div class="model-view">
- <canvas id="canvas-model-view" style="width: 100%;height: 100%;">您的浏览器不支持canvas!</canvas>
- </div>
- <div id="qjt">
- <div class="qjttitle"></div>
- <div class="nowtime">{{currentTime }}</div>
- <div class="onefloor conList">
- <div class="floortitle">叫号数据</div>
- <div class="floorcontent">
- <div class="list blue">
- <div class="top radio">当前排队人数:</div>
- <div class="bottom">
- <img src="https://www.cqna.gov.cn/syygapi/naxsb/images/floor1.png" alt="">
- <div><span class="number" id="currWaitPeople2">-</span>
- <span>人</span>
- </div>
- </div>
- </div>
- <div class="list yellow">
- <div class="top radio">可办事项数量:</div>
- <div class="bottom">
- <img src="https://www.cqna.gov.cn/syygapi/naxsb/images/floor2.png" alt="">
- <div><span class="number" id="taskNum2">-</span>
- <span>项</span>
- </div>
- </div>
- </div>
- <div class="list green">
- <div class="top radio">平均等待时长:</div>
- <div class="bottom">
- <img src="https://www.cqna.gov.cn/syygapi/naxsb/images/floor3.png" alt="">
- <div><span class="number" id="waitTime2">-</span>
- <span>分钟</span>
- </div>
- </div>
- </div>
- <div class="list purple">
- <div class="top radio">窗口数:</div>
- <div class="bottom">
- <img src="https://www.cqna.gov.cn/syygapi/naxsb/images/floor4.png" alt="">
- <div><span class="number" id="winNum2">-</span>
- <span>个</span>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="twofloor conList">
- <div class="floortitle">实时办件详情</div>
- <div class="floorcontent" style="flex-wrap: nowrap;flex-direction: column;padding: 5px;">
- <div class="top_t">
- <div class="t1">状态</div>
- <div class="t2">受理部门</div>
- <div class="t3">办理名称</div>
- </div>
- <div style="width: 100%;height:100%;overflow:hidden;">
- <div class="bottom-t">
- <div class="item" v-for="(item, index) in bjxqList">
- <div class="title t1"><span
- v-if="item.state&&item.state=='在办'">{{item.state}}</span>
- <span style="background: #18A65A;border: 1px solid #18A65A;"
- v-else>{{item.state}}</span>
- </div>
- <div class="date t2" :title="item.acceptedDepartment">
- {{item.acceptedDepartment}}</div>
- <div class="date t3" :title="item.handlingName">
- {{item.handlingName?item.handlingName.split("—")[0]:''}}</div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="blsl conList">
- <div class="floortitle">累计办理数量</div>
- <div class="floorcontent">
- <div class="list">
- <div class="img">
- <img src="https://www.cqna.gov.cn/syygapi/naxsb/images/blsl4.png" alt="">
- </div>
- <div class="right">
- <span>本日办理数量</span>
- <div class="number">
- <span id="currDayTaskNum">324</span>
- <span>件</span>
- </div>
- </div>
- </div>
- <div class="list">
- <div class="img">
- <img src="https://www.cqna.gov.cn/syygapi/naxsb/images/blsl1.png" alt="">
- </div>
- <div class="right">
- <span>本周办理数量</span>
- <div class="number">
- <span id="currWeekTaskNum">7152</span>
- <span>件</span>
- </div>
- </div>
- </div>
- <div class="list">
- <div class="img">
- <img src="https://www.cqna.gov.cn/syygapi/naxsb/images/blsl2.png" alt="">
- </div>
- <div class="right">
- <span>本月办理数量</span>
- <div class="number">
- <span id="currMonthTaskNum">78</span>
- <span>件</span>
- </div>
- </div>
- </div>
- <div class="list">
- <div class="img">
- <img src="https://www.cqna.gov.cn/syygapi/naxsb/images/blsl3.png" alt="">
- </div>
- <div class="right">
- <span>本年办理数量</span>
- <div class="number">
- <span id="currYearTaskNum">78</span>
- <span>件</span>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="pdgdf conList">
- <div class="floortitle">区行政服务中心网点分布</div>
- <div class="floorcontent">
- <!-- <div id="pdgdfechart" style="width: 100%;height: 100%;"></div> -->
- <div class="list" @click="showDistrictLevel(1)">
- <div class="img">
- <img src="./images/districtLevelCenter.png" alt="">
- </div>
- <div class="right">
- <span>区级中心</span>
- <div class="number">
- <span>2</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>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>
- </div>
- <!-- 3号楼楼层指引 -->
- <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>3号楼楼层指引</span>
- </div>
- <div class="floorGuideTable">
- <el-row :gutter="20" class="floorGuide-row">
- <el-col :span="12" v-for="item in floorGuideList.slice(0,12)" :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>
- <el-row :gutter="20" class="floorGuide-row">
- <el-col :span="12" v-for="item in floorGuideList.slice(12,floorGuideList.length)"
- :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>
- <!-- 4号楼楼层指引 -->
- <div class="floorGuide" v-show="floorGuideShow4">
- <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>3号楼楼层指引</span>
- </div>
- <div class="floorGuideTable">
- <el-row :gutter="20" class="floorGuide-row">
- <el-col :span="12" v-for="item in floorGuideList4" :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>
- <!-- 区行政服务中心网点分布弹窗 -->
- <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 districtLevelLists">
- <div class="districtLevelList-col"
- :class="districtLevelNum=='2'?'districtLevelList-col2':''"
- @click="goHtmlFun(item.id)">
- <img :src="`./images/districtLevelList${districtLevelNum}.png`"
- alt="" srcset="">
- <div class="left">
- <span
- class="span-col name">{{index+(current-1)*10+1}}.{{item.dep}}</span>
- <span class="span-col">
- <span class="label">电话:</span>
- <span class="center" :title="item.tel"
- v-if="item.tel&&item.tel.length>28">{{item.tel.slice(0,
- 28)}}...</span>
- <span class="center" v-else>{{item.tel||'--'}}</span>
- </span>
- <span class="span-col">
- <span class="label">地址:</span>
- <span class="center" :title="item.address"
- v-if="item.address&&item.address.length>28">{{item.address.slice(0,
- 28)}}...</span>
- <span class="center" v-else>{{item.address}}</span>
- </span>
- </div>
- </div>
- </el-col>
- </el-row>
- </div>
- <div class="districtLevelFooter" ref="districtLevelFooter">
- <el-pagination :page-size="10" @current-change="currentChangeFun" background
- layout="prev, pager, next" :current-page="current"
- :total="districtLevelTotal">
- </el-pagination>
- </div>
- </div>
- </div>
- </div>
- <!-- 公交详情弹窗 -->
- <div id="transitTitPop" v-show="true"></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>
- </div>
- <div style="width:100%;" class="footer"></div>
- </body>
- <script>
- function isMobileUserAgent() {
- return /iphone|ipod|android.*mobile|windows.*phone|blackberry.*mobile/i.test(
- window.parent.navigator.userAgent.toLowerCase("")
- );
- }
- if (isMobileUserAgent()) {
- window.location = 'https://www.cqna.gov.cn/syygapi/naxsb/mobile/qjtMobile.html'
- }
- </script>
- <script>
- $(function () {
- $(".header").load('https://www.cqna.gov.cn/syygapi/naxsb/top/top_style.html');
- $(".footer").load('https://www.cqna.gov.cn/syygapi/naxsb/footer/footer.html');
- });
- </script>
- <script>
- var _this = this;
- // 判断浏览器是否支持 webgl
- if (!Detector.webgl) Detector.addGetWebGLMessage();
- let mwidth = window.innerWidth;
- let mheight = window.innerHeight;
- // 初始化场景
- let scene = new THREE.Scene();
- // 初始化摄像机
- let camera = new THREE.PerspectiveCamera(10, mwidth / mheight, 1, 1000000);
- // camera.position.set(90000, 41120, 81120);
- camera.position.set(50000, 71120, 51120);
- camera.lookAt(new THREE.Vector3(0, 0, 0));
- let renderer = new THREE.WebGLRenderer({
- canvas: document.getElementById("canvas-model-view"),
- antialias: true, // 设置抗锯齿
- alpha: true, // 背景透明
- autoClear: true,
- logarithmicDepthBuffer: true
- });
- renderer.setSize(mwidth, mheight);
- renderer.shadowMap.enabled = true;
- // 2D 文字渲染
- let css2Renderer = new THREE.CSS2DRenderer();
- css2Renderer.setSize(mwidth, mheight);
- css2Renderer.domElement.style.position = 'absolute';
- css2Renderer.domElement.style.top = '0px';
- css2Renderer.domElement.style.pointerEvents = 'none';
- document.body.appendChild(css2Renderer.domElement);
- // 四个方向的平行光
- // 环境光
- let ambient = new THREE.AmbientLight(0x404040, 0.1);
- scene.add(ambient);
- // var pointLight = new THREE.PointLight(0xf0e68c, 0.9, 12500);
- // pointLight.position.set(0, 8500, 0);
- // pointLight.castShadow = true;
- // pointLight.shadow.camera.near = 1;
- // pointLight.shadow.camera.far = 15000;
- // pointLight.shadow.mapSize.width = 10240;
- // pointLight.shadow.mapSize.height = 10240;
- // scene.add(pointLight);
- // 加载模型文件
- let gLTFLoader = new THREE.GLTFLoader()
- let dracoLoader = new THREE.DRACOLoader();
- dracoLoader.setDecoderPath('https://www.cqna.gov.cn/syygapi/naxsb/3ddemo/examples/js/libs/draco/gltf/');
- dracoLoader.setDecoderConfig({
- type: 'js'
- });
- gLTFLoader.setDRACOLoader(dracoLoader);
- gLTFLoader.load('./3ddemo/model/35.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 == 'tccrk') {
- const div = document.createElement('div');
- div.id = child.uuid;
- let html = '';
- html += '<div style="font-size: 12px; width: 110px; 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;">所有车位:650个</span>';
- html += '</div>';
- html += '<div class="building-line" style="border-left: 1px dashed #1D96E9; height: 100px; top: 170px;"></div>';
- html += '</div>';
- div.innerHTML = html;
- let tag = new THREE.CSS2DObject(div);
- child.add(tag);
- }
- if (child.material.name == 'tcc1') {
- const div = document.createElement('div');
- div.id = child.uuid;
- let html = '';
- html += '<div style="font-size: 12px; width: 100px; 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;">所有车位:57个</span>';
- html += '</div>';
- html += '<div class="building-line" style="border-left: 1px dashed #1D96E9; height: 100px; top: 170px;"></div>';
- html += '</div>';
- div.innerHTML = html;
- let tag = new THREE.CSS2DObject(div);
- child.add(tag);
- }
- if (child.material.name == 'tcc') {
- const div = document.createElement('div');
- div.id = child.uuid;
- let html = '';
- html += '<div style="font-size: 12px; width: 100px; 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;">所有车位:74个</span>';
- html += '</div>';
- html += '<div class="building-line" style="border-left: 1px dashed #1D96E9; height: 100px; top: 170px;"></div>';
- html += '</div>';
- div.innerHTML = html;
- let tag = new THREE.CSS2DObject(div);
- child.add(tag);
- }
- if (child.material.name == 'gongjiaoche') {
- 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 style="padding:5px 10px;font-size: 12px;background: #18A65A;width: 100px;top: 170px;position: absolute;display: flex;flex-direction: column;align-items: flex-start;color: #fff;">
- <div class="chekuchukou-tit"><span>天福路口公交车站</span></div>
- <div>144路</div>
- <div>180路</div>
- <div>188路</div>
- <div>345路</div>
- </div>`
- html += '<div class="building-line" style="border-left: 1px dashed #1D96E9; height: 100px; top: 170px;"></div>';
- html += '</div>';
- div.innerHTML = html;
- let tag = new THREE.CSS2DObject(div);
- child.add(tag);
- }
- }
- if (child.isMesh) {
- 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.name) {
- const div = document.createElement('div');
- div.id = child.uuid;
- div.style = 'color:red;';
- div.setAttribute("data", child.name);
- div.innerHTML = '<p data-name="' + child.name + '"></p>';
- let tag = new THREE.CSS2DObject(div);
- }
- // 一号楼
- if (child.name == 'yihaolou') {
- const div = document.createElement('div');
- div.id = child.uuid;
- let html = '';
- html += '<div class="building-box" style="width: 100px; top: 70px; left: -48px;">';
- html += '<div class="building-text" style="background: #1D96E9;">';
- html += '<span>1号楼</span><span style="font-size: 10px;">社保大厅、医保大厅</span>';
- html += '</div>';
- html += '<svg width="10" height="10"><polygon id="triangle" points="0,0 10,0 5,10" fill="#1D96E9"/></svg>';
- html += '</div>';
- html += '<div class="building-line" style="border-left: 1px dashed #1D96E9; height: 100px; top: 110px;"></div>';
- div.innerHTML = html;
- let tag = new THREE.CSS2DObject(div);
- child.add(tag);
- div.style.pointerEvents = 'auto';
- div.addEventListener('click', function (event) {
- window.location.href = 'floortow.html';
- });
- }
- // 二号楼
- if (child.name == 'erhaolou') {
- const div = document.createElement('div');
- div.id = child.uuid;
- let html = '';
- html += '<div class="building-box" style="width: 100px; top: 28px; left: -48px;">';
- // html += '<div class="finger" style="animation:blink 1s infinite;"><img src="images/finger.png">点我</div>';
- html += '<div class="building-text" style="background: #1D96E9;">';
- html += '<span>2号楼</span></span></span><span style="font-size: 10px;">南岸区政务服务中心</span>';
- html += '</div>';
- html += '<svg width="10" height="10"><polygon id="triangle" points="0,0 10,0 5,10" fill="#1D96E9"/></svg>';
- html += '</div>';
- html += '<div class="building-line" style="border-left: 1px dashed #1D96E9; height: 100px; top: 72px;"></div>';
- div.innerHTML = html;
- let tag = new THREE.CSS2DObject(div);
- child.add(tag);
- div.style.pointerEvents = 'auto';
- div.addEventListener('click', function (event) {
- window.location.href = 'https://www.cqna.gov.cn/syygapi/naxsb/floorone.html?floorid=' + 2;
- });
- }
- // 三号楼
- if (child.name == 'sanhaolou') {
- const div = document.createElement('div');
- div.id = child.uuid;
- let html = '';
- html += '<div class="building-box" style="width: 50px; top: 73px; left: -23px;">';
- html += '<div class="building-text" style="background: #1D96E9;">';
- html += '<span>3号楼</span><span style="font-size: 10px;"></span>';
- html += '</div>';
- html += '<svg width="10" height="10"><polygon id="triangle" points="0,0 10,0 5,10" fill="#1D96E9"/></svg>';
- html += '</div>';
- html += '<div class="building-line" style="border-left: 1px dashed #1D96E9; height: 100px; top: 90px;"></div>';
- div.innerHTML = html;
- let tag = new THREE.CSS2DObject(div);
- child.add(tag);
- div.style.pointerEvents = 'auto';
- div.addEventListener('click', function (event) {
- _this.nowDiv.floorGuideShow = true;
- });
- }
- // 四号楼
- if (child.name == 'sihaolou-Chrome') {
- const div = document.createElement('div');
- div.id = child.uuid;
- let html = '';
- html += '<div class="building-box">';
- // html += `<div class="text" style="top: -30px;left: 146px;position: absolute;display: flex;flex-direction: column;align-items: flex-start;color: #1A95EB;">
- // <span style="font-size: 18px;font-weight: bold;margin-bottom: 5px;">地铁6号线</span>
- // <span>邱家湾站2B出口</span>
- // <span>距离:800米</span>
- // <img src="https://www.cqna.gov.cn/syygapi/naxsb/images/qjtArrow.png" alt="" style="height: 1.75rem;">
- // </div>`
- html += '<div class="building-text">';
- html += '<span>4号楼</span><span style="font-size: 10px;">商务打印、小卖部、食堂</span>';
- html += '</div>';
- html += '<svg width="10" height="10"><polygon id="triangle" points="0,0 10,0 5,10" fill="#18A65A"/></svg>';
- html += '</div>';
- html += '<div class="building-line"></div>';
- div.innerHTML = html;
- let tag = new THREE.CSS2DObject(div);
- child.add(tag);
- div.style.pointerEvents = 'auto';
- div.addEventListener('click', function (event) {
- _this.nowDiv.floorGuideShow4 = true;
- });
- }
- }
- });
- scene.add(obj.scene);
- const box = new THREE.Box3().setFromObject(obj.scene);
- const center = new THREE.Vector3();
- box.getCenter(center);
- obj.scene.position.sub(center);
- document.getElementById('loading').style.display = 'none';
- render();
- }, function (xhr) {
- }, function (error) {
- })
- function render() {
- css2Renderer.render(scene, camera)
- renderer.render(scene, camera);
- }
- render();
- let controls = new THREE.OrbitControls(camera, renderer.domElement);
- controls.enableZoom = false
- controls.maxPolarAngle = Math.PI / 2
- controls.minPolarAngle = 0
- controls.addEventListener('change', render);
- let axisHelper = new THREE.AxisHelper(50050);
- </script>
- <script>
- var nowDiv = new Vue({
- el: '#qjt',
- data: function () {
- return {
- currentTime: "",
- bjxqList: [],
- /* 区行政服务中心网点分布 start*/
- districtLevelShow: false,
- floorGuideShow: false,//3楼层指引显示控制
- floorGuideList: [
- {
- floorNum: '-2F',
- name: '地下车库'
- },
- {
- floorNum: '-1F',
- name: '地下车库'
- },
- {
- floorNum: '1F',
- name: '重庆市正联实业发展有限公司、行政中心B区物管处'
- },
- {
- floorNum: '2F',
- name: '重庆药品交易所综合业务大厅'
- },
- {
- floorNum: '3F',
- name: '重庆药品交易所'
- },
- {
- floorNum: '4F',
- name: '重庆药品交易所'
- },
- {
- floorNum: '5F',
- name: '重庆市南岸区大数据应用发展管理局'
- },
- {
- floorNum: '6F',
- 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: '17F',
- name: '区委巡察办、区委巡察组'
- },
- {
- floorNum: '19F',
- name: '城建集团'
- },
- {
- floorNum: '20F',
- name: '城建集团'
- },
- {
- floorNum: '21F',
- name: '重庆市南岸区城乡要素流转服务中心、重庆市南岸区城乡融合建设发展有限公司'
- },
- {
- floorNum: '22F',
- name: '南岸区资产公司'
- },
- {
- floorNum: '23F',
- name: '重庆南宜城乡建设发展有限公司、重庆市幸福实业发展有限责任公司'
- },
- {
- floorNum: '25F',
- name: '重庆云开实业有限公司、重庆南投智能终端投资有限公司'
- }
- ],
- floorGuideShow4: false,//4楼层指引显示控制
- floorGuideList4: [
- {
- floorNum: '1F',
- name: '食堂'
- },
- {
- floorNum: '2F',
- name: '食堂'
- },
- {
- floorNum: '3F',
- name: '食堂'
- },
- {
- floorNum: '4F',
- name: ''
- }
- ],
- districtLevelTitle: '',
- districtLevelNum: -1,
- districtLevelList: [
- // {
- // name: '重庆市南岸区政务服务中心(江南新城中心)',
- // tel: '023-62980263',
- // address: '重庆市南岸区铜元局街道南坪西路36号(上海城嘉发跨贸中心 二楼)南岸区'
- // },
- // {
- // name: '重庆市南岸区政务服务中心(江南新城中心)',
- // tel: '023-62980263',
- // address: '重庆市南岸区铜元局街道南坪西路36号(上海城嘉发跨贸中心 二楼)南岸区'
- // },
- // {
- // name: '重庆市南岸区政务服务中心(江南新城中心)',
- // tel: '023-62980263',
- // address: '重庆市南岸区铜元局街道南坪西路36号(上海城嘉发跨贸中心 二楼)南岸区'
- // }
- ],
- addressVrUrlJson: {
- 414: 'https://www.cqna.gov.cn/vr/jiedao/csq/tour.html',
- 415: 'https://www.cqna.gov.cn/vr/jiedao/lmh/tour.html',
- 416: 'https://www.cqna.gov.cn/vr/jiedao/npz/tour.html',
- 417: 'https://www.cqna.gov.cn/vr/jiedao/twjd/tour.html',
- 418: 'https://www.cqna.gov.cn/vr/jiedao/ylz/tour.html',
- 419: 'https://www.cqna.gov.cn/vr/jiedao/jgs/tour.html',
- 420: 'https://www.cqna.gov.cn/vr/jiedao/gyd/tour.html',
- 421: 'https://www.cqna.gov.cn/vr/jiedao/hyl/tour.html',
- 422: 'https://www.cqna.gov.cn/vr/jiedao/ns/tour.html',
- 423: 'https://www.cqna.gov.cn/vr/jiedao/tsz/tour.html',
- 424: 'https://www.cqna.gov.cn/vr/jiedao/xkz/tour.html',
- 425: 'https://www.cqna.gov.cn/vr/jiedao/htx/tour.html',
- 426: 'https://cqna.gov.cn/vr/jiedao/np/tour.html',
- 427: 'https://www.cqna.gov.cn/vr/jiedao/tyj/tour.html',
- 428: 'https://www.cqna.gov.cn/vr/jiedao/dzs/tour.html',
- },
- districtLevelLists: [],
- districtLevelTotal: 0,
- districtLevelListHeight: "60%",
- current: 0,
- /* 区行政服务中心网点分布 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)
- },
- mounted() {
- // 启动整个文档点击事件监听
- this.$nextTick(() => {
- document.addEventListener("click", this.floorGuideHideFun, true);
- });
- },
- methods: {
- updateTime() {
- const now = new Date();
- const year = String(now.getFullYear()).padStart(4, '0');
- const month = String(now.getMonth() + 1).padStart(2, '0');
- const day = String(now.getDate()).padStart(2, '0');
- const hours = String(now.getHours()).padStart(2, '0');
- const minutes = String(now.getMinutes()).padStart(2, '0');
- const seconds = String(now.getSeconds()).padStart(2, '0');
- const formattedDateTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
- this.currentTime = formattedDateTime;
- },
- addKeyFrames(y) {
- let i = 0
- setInterval(function () {
- if (i >= y) return i = 0
- i++
- document.querySelector('.bottom-t').style.marginTop = `-${i}px`
- }, 50);
- },
- getSSbj() {
- let that = this;
- $.ajax({
- url: 'https://data.cqna.gov.cn:8088/kshapi/api/page2/top2',
- type: "get",
- dataType: "json",
- async: false,
- success: function (data) {
- var data = data.data;
- that.bjxqList = data.data;
- }
- });
- var height = document.querySelector('.item') ? document.querySelector('.item').clientHeight - 20 : 0;
- if (this.bjxqList.length) {
- this.addKeyFrames(height * this.bjxqList.length);
- }
- },
- // 区行政服务中心网点分布点击事件
- showDistrictLevel(num) {
- window.location.href = 'zwfwMap.html'
- },
- //服务中心分布点击事件
- goHtmlFun(id) {
- if (this.districtLevelNum == '2')
- window.open(this.addressVrUrlJson[id])
- },
- // 分页事件
- currentChangeFun(num) {
- this.current = num
- let numstar = num - 1, endNum = num
- this.districtLevelLists = this.districtLevelList.slice(10 * numstar, 10 * num)
- },
- // 关闭弹窗
- 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
- },
- // 监听文档点击事件若不在楼层索引展示区则隐藏此弹窗
- 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.floorGuideShow4))
- this.floorGuideShow = false;
- this.floorGuideShow4 = false;
- }
- },
- beforeDestroy() {
- document.removeEventListener("click", this.floorGuideHideFun); //页面销毁的时候移除事件
- },
- });
- </script>
- <script>
- var path = "https://www.cqna.gov.cn/data";
- function handlingNumber(area, timeType) {
- var data1 = ''
- $.ajax({
- url: path + "/department/getOfficeNumberByAreaInfo",
- dataType: "json",
- type: "get",
- cache: false,
- async: false,
- data: {
- "area": area,
- "timeType": timeType
- },
- success: function (data) {
- data1 = data.data
- },
- error: function () {
- alert('网络错误,请稍后再试!');
- }
- });
- return data1;
- }
- function animateValue(obj, start, end, duration) {
- let startTimestamp = null;
- const step = (timestamp) => {
- if (!startTimestamp) startTimestamp = timestamp;
- const progress = Math.min((timestamp - startTimestamp) / duration, 1);
- obj.innerHTML = Math.floor(progress * (end - start) + start);
- if (progress < 1) {
- window.requestAnimationFrame(step);
- } else {
- obj.classList.remove('animate');
- }
- };
- obj.classList.add('animate');
- window.requestAnimationFrame(step);
- }
- const time = 2 * 1000;
- let that = this;
- function getCurrentPerson() {
- $.ajax({
- url: conpath + "/qjt/",
- type: "get",
- dataType: "json",
- async: false,
- success: function (data) {
- const waitTime2 = document.getElementById('waitTime2');
- animateValue(waitTime2, 0, data.data[0], time);
- const currWaitPeople2 = document.getElementById('currWaitPeople2');
- animateValue(currWaitPeople2, 0, data.data[1], time);
- }
- })
- }
- getCurrentPerson();
- var intervalId = setInterval(getCurrentPerson, 1800000);
- function getCurrentItem() {
- $.ajax({
- url: conpath + "/solveAffairs/",
- type: "get",
- dataType: "json",
- async: false,
- success: function (data) {
- var data = data.data;
- const currDayTaskNumElement = document.getElementById('currDayTaskNum');
- animateValue(currDayTaskNumElement, 0, data[0], time);
- const currWeekTaskNumElement = document.getElementById('currWeekTaskNum');
- animateValue(currWeekTaskNumElement, 0, data[1], time);
- const currMonthTaskNumElement = document.getElementById('currMonthTaskNum');
- animateValue(currMonthTaskNumElement, 0, data[2], time);
- const currYearTaskNumElement = document.getElementById('currYearTaskNum');
- animateValue(currYearTaskNumElement, 0, data[3], time);
- }
- })
- }
- getCurrentItem();
- var intervalId1 = setInterval(getCurrentItem, 300000);
- window.addEventListener('beforeunload', function () {
- clearInterval(intervalId);
- clearInterval(intervalId1);
- });
- const taskNumElement2 = document.getElementById('taskNum2');
- animateValue(taskNumElement2, 0, 798, time);
- const winNumElement2 = document.getElementById('winNum2');
- animateValue(winNumElement2, 0, 78, time);
- </script>
- </html>
|