qjt.html 63 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta name=”SiteName” content=”重庆市南岸区人民政府”>
  7. <meta name="SiteDomain" content="http://www.cqna.gov.cn" />
  8. <meta name="SiteIDCode" content="5001080014">
  9. <meta name="ColumnName" content="政务全景通">
  10. <meta name="ColumnDescription" content="政务全景通" />
  11. <meta name="ColumnKeywords" content="政务全景通" />
  12. <meta name="ColumnType" content="政务全景通" />
  13. <title>政务全景通-重庆市南岸区人民政府网</title>
  14. <script src="https://www.cqna.gov.cn/syygapi/naxsb/3ddemo/three.js"></script>
  15. <script src="https://www.cqna.gov.cn/syygapi/naxsb/3ddemo/Detector.js"></script>
  16. <script src="https://www.cqna.gov.cn/syygapi/naxsb/3ddemo/examples/js/libs/stats.min.js"></script>
  17. <script src="https://www.cqna.gov.cn/syygapi/naxsb/3ddemo/examples/js/controls/OrbitControls.js"></script>
  18. <script src="https://www.cqna.gov.cn/syygapi/naxsb/3ddemo/examples/js/loaders/GLTFLoader.js"></script>
  19. <script src="https://www.cqna.gov.cn/syygapi/naxsb/3ddemo/examples/js/loaders/DRACOLoader.js"></script>
  20. <script src="https://www.cqna.gov.cn/syygapi/naxsb/3ddemo/examples/js/renderers/CSS3DRenderer.js"></script>
  21. <script src="https://www.cqna.gov.cn/syygapi/naxsb/3ddemo/examples/js/renderers/CSS2DRenderer.js"></script>
  22. <!-- 引入 Vue -->
  23. <script src="https://www.cqna.gov.cn/syygapi/naxsb/js/vue.min.js"></script>
  24. <!-- 引入样式 -->
  25. <link rel="stylesheet" href="https://www.cqna.gov.cn/syygapi/naxsb/css/index.css">
  26. <link rel="stylesheet" href="css/qjt.css">
  27. <!-- 引入组件库 -->
  28. <script src="https://www.cqna.gov.cn/syygapi/naxsb/js/index.js"></script>
  29. <script src="js/echarts.min.js"></script>
  30. <script src="https://www.cqna.gov.cn/syygapi/naxsb/js/jquery-3.5.1.min.js"></script>
  31. <script src="https://www.cqna.gov.cn/syygapi/naxsb/js/urljson.js"></script>
  32. <style>
  33. @media screen and (max-width:1600px) {
  34. html,
  35. body {
  36. font-size: 14px;
  37. }
  38. .qjttitle {
  39. height: 95px;
  40. }
  41. .nowtime {
  42. top: 50px;
  43. }
  44. }
  45. @media screen and (max-width:1300px) {
  46. html,
  47. body {
  48. font-size: 10px;
  49. }
  50. .qjttitle {
  51. height: 85px;
  52. }
  53. .nowtime {
  54. top: 45px;
  55. }
  56. }
  57. .building-box {
  58. cursor: pointer;
  59. }
  60. @keyframes blink {
  61. from {
  62. opacity: 1;
  63. }
  64. to {
  65. opacity: 0;
  66. }
  67. }
  68. .finger {
  69. position: absolute;
  70. top: -60px;
  71. right: 20px;
  72. color: #FF8000;
  73. font-size: 20px;
  74. }
  75. .top_t {
  76. padding: 10px 0;
  77. border-bottom: 1px solid #5482F9;
  78. height: 26px;
  79. justify-content: space-between;
  80. }
  81. .top_t,
  82. .bottom-t {
  83. width: 100%;
  84. display: flex;
  85. font-size: 18px;
  86. color: #5482F9;
  87. }
  88. .bottom-t {
  89. flex-direction: column;
  90. overflow-y: scroll;
  91. }
  92. .bottom-t::-webkit-scrollbar {
  93. display: none;
  94. /* Chrome, Safari 和 Opera */
  95. -ms-overflow-style: none;
  96. /* IE 和 Edge */
  97. scrollbar-width: none;
  98. /* Firefox */
  99. }
  100. .bottom-t .item {
  101. width: 100%;
  102. display: flex;
  103. font-size: 16px;
  104. padding: 10px 0;
  105. justify-content: space-between;
  106. border-bottom: 1px solid #5482F9;
  107. }
  108. .t1 {
  109. width: 70px;
  110. text-align: center;
  111. }
  112. .t1 span {
  113. background: #1D96E9;
  114. border: 1px solid #1D96E9;
  115. padding: 0 5px;
  116. border-radius: 2px;
  117. color: #fff;
  118. }
  119. .t2 {
  120. width: 100px;
  121. text-align: center;
  122. overflow: hidden;
  123. word-break: break-all;
  124. white-space: nowrap;
  125. text-overflow: ellipsis;
  126. }
  127. .t3 {
  128. width: calc(100% - 230px);
  129. text-align: center;
  130. overflow: hidden;
  131. word-break: break-all;
  132. white-space: nowrap;
  133. text-overflow: ellipsis;
  134. }
  135. /* 楼层指引 start */
  136. .floorGuide {
  137. position: absolute;
  138. left: calc(50% - 435px);
  139. top: 60px;
  140. width: 871px;
  141. height: 730px;
  142. z-index: 11;
  143. }
  144. .floorGuide .floorGuideBg {
  145. position: absolute;
  146. top: 0;
  147. left: 0;
  148. width: 100%;
  149. height: 100%;
  150. }
  151. .floorGuide .floorGuideTit {
  152. position: absolute;
  153. top: 0;
  154. left: 0;
  155. width: 100%;
  156. height: 70px;
  157. font-weight: bold;
  158. font-size: 26px;
  159. color: #004A93;
  160. display: flex;
  161. align-items: center;
  162. }
  163. .floorGuideTit .floorGuideIcon {
  164. width: 15px;
  165. height: 24px;
  166. margin: 0 13px 0 26px;
  167. }
  168. .floorGuideTit span {
  169. line-height: 30px;
  170. margin-bottom: 3px;
  171. }
  172. .floorGuide .floorGuideTable {
  173. position: absolute;
  174. top: 86px;
  175. left: 44px;
  176. width: calc(100% - 88px);
  177. display: flex;
  178. justify-content: space-between;
  179. }
  180. .floorGuide-row {
  181. display: flex;
  182. flex-direction: column;
  183. width: 50%;
  184. }
  185. .floorGuideTable .floorGuide-row .el-col {
  186. margin-bottom: 20px;
  187. display: flex;
  188. justify-content: start;
  189. width: 100%;
  190. }
  191. .floorGuideTable .floorNum-col,
  192. .floorGuideTable .floorName-col {
  193. line-height: 30px;
  194. display: inline-block;
  195. border-bottom: 1px solid #3D86CE;
  196. }
  197. .floorGuideTable .floorName-col {
  198. font-weight: 400;
  199. font-size: 24px;
  200. color: #004A93;
  201. width: 310px;
  202. }
  203. .floorGuideTable .floorNum-col {
  204. font-weight: 400;
  205. font-size: 22px;
  206. color: #FFFFFF;
  207. width: 60px;
  208. height: 30px;
  209. position: relative;
  210. top: 0;
  211. left: 0;
  212. }
  213. .floorNum-col img {
  214. position: absolute;
  215. top: 0;
  216. left: 0;
  217. width: 100%;
  218. height: 100%;
  219. }
  220. .floorNum-col span {
  221. position: absolute;
  222. top: 0;
  223. left: 0;
  224. display: inline-flex;
  225. height: 100%;
  226. align-items: center;
  227. margin: 0 0 0 7px;
  228. }
  229. /* 结束 */
  230. </style>
  231. </head>
  232. <body>
  233. <div style="width:100%;" class="header"></div>
  234. <div class="container" style="position: relative;">
  235. <div class="row">
  236. <div class="col-sm-12">
  237. <div class="model-container"
  238. style="background: linear-gradient(180deg, rgb(246, 250, 255) 10%, rgb(214, 224, 235) 70%);">
  239. <div class="model-view">
  240. <canvas id="canvas-model-view" style="width: 100%;height: 100%;">您的浏览器不支持canvas!</canvas>
  241. </div>
  242. <div id="qjt">
  243. <div class="qjttitle"></div>
  244. <div class="nowtime">{{currentTime }}</div>
  245. <div class="onefloor conList">
  246. <div class="floortitle">叫号数据</div>
  247. <div class="floorcontent">
  248. <div class="list blue">
  249. <div class="top radio">当前排队人数:</div>
  250. <div class="bottom">
  251. <img src="https://www.cqna.gov.cn/syygapi/naxsb/images/floor1.png" alt="">
  252. <div><span class="number" id="currWaitPeople2">-</span>
  253. <span>人</span>
  254. </div>
  255. </div>
  256. </div>
  257. <div class="list yellow">
  258. <div class="top radio">可办事项数量:</div>
  259. <div class="bottom">
  260. <img src="https://www.cqna.gov.cn/syygapi/naxsb/images/floor2.png" alt="">
  261. <div><span class="number" id="taskNum2">-</span>
  262. <span>项</span>
  263. </div>
  264. </div>
  265. </div>
  266. <div class="list green">
  267. <div class="top radio">平均等待时长:</div>
  268. <div class="bottom">
  269. <img src="https://www.cqna.gov.cn/syygapi/naxsb/images/floor3.png" alt="">
  270. <div><span class="number" id="waitTime2">-</span>
  271. <span>分钟</span>
  272. </div>
  273. </div>
  274. </div>
  275. <div class="list purple">
  276. <div class="top radio">窗口数:</div>
  277. <div class="bottom">
  278. <img src="https://www.cqna.gov.cn/syygapi/naxsb/images/floor4.png" alt="">
  279. <div><span class="number" id="winNum2">-</span>
  280. <span>个</span>
  281. </div>
  282. </div>
  283. </div>
  284. </div>
  285. </div>
  286. <div class="twofloor conList">
  287. <div class="floortitle">实时办件详情</div>
  288. <div class="floorcontent" style="flex-wrap: nowrap;flex-direction: column;padding: 5px;">
  289. <div class="top_t">
  290. <div class="t1">状态</div>
  291. <div class="t2">受理部门</div>
  292. <div class="t3">办理名称</div>
  293. </div>
  294. <div style="width: 100%;height:100%;overflow:hidden;">
  295. <div class="bottom-t">
  296. <div class="item" v-for="(item, index) in bjxqList">
  297. <div class="title t1"><span
  298. v-if="item.state&&item.state=='在办'">{{item.state}}</span>
  299. <span style="background: #18A65A;border: 1px solid #18A65A;"
  300. v-else>{{item.state}}</span>
  301. </div>
  302. <div class="date t2" :title="item.acceptedDepartment">
  303. {{item.acceptedDepartment}}</div>
  304. <div class="date t3" :title="item.handlingName">
  305. {{item.handlingName?item.handlingName.split("—")[0]:''}}</div>
  306. </div>
  307. </div>
  308. </div>
  309. </div>
  310. </div>
  311. <div class="blsl conList">
  312. <div class="floortitle">累计办理数量</div>
  313. <div class="floorcontent">
  314. <div class="list">
  315. <div class="img">
  316. <img src="https://www.cqna.gov.cn/syygapi/naxsb/images/blsl4.png" alt="">
  317. </div>
  318. <div class="right">
  319. <span>本日办理数量</span>
  320. <div class="number">
  321. <span id="currDayTaskNum">324</span>
  322. <span>件</span>
  323. </div>
  324. </div>
  325. </div>
  326. <div class="list">
  327. <div class="img">
  328. <img src="https://www.cqna.gov.cn/syygapi/naxsb/images/blsl1.png" alt="">
  329. </div>
  330. <div class="right">
  331. <span>本周办理数量</span>
  332. <div class="number">
  333. <span id="currWeekTaskNum">7152</span>
  334. <span>件</span>
  335. </div>
  336. </div>
  337. </div>
  338. <div class="list">
  339. <div class="img">
  340. <img src="https://www.cqna.gov.cn/syygapi/naxsb/images/blsl2.png" alt="">
  341. </div>
  342. <div class="right">
  343. <span>本月办理数量</span>
  344. <div class="number">
  345. <span id="currMonthTaskNum">78</span>
  346. <span>件</span>
  347. </div>
  348. </div>
  349. </div>
  350. <div class="list">
  351. <div class="img">
  352. <img src="https://www.cqna.gov.cn/syygapi/naxsb/images/blsl3.png" alt="">
  353. </div>
  354. <div class="right">
  355. <span>本年办理数量</span>
  356. <div class="number">
  357. <span id="currYearTaskNum">78</span>
  358. <span>件</span>
  359. </div>
  360. </div>
  361. </div>
  362. </div>
  363. </div>
  364. <div class="pdgdf conList">
  365. <div class="floortitle">区行政服务中心网点分布</div>
  366. <div class="floorcontent">
  367. <!-- <div id="pdgdfechart" style="width: 100%;height: 100%;"></div> -->
  368. <div class="list" @click="showDistrictLevel(1)">
  369. <div class="img">
  370. <img src="./images/districtLevelCenter.png" alt="">
  371. </div>
  372. <div class="right">
  373. <span>区级中心</span>
  374. <div class="number">
  375. <span>2</span>
  376. <span>个</span>
  377. </div>
  378. </div>
  379. </div>
  380. <div class="list" @click="showDistrictLevel(4)">
  381. <div class="img">
  382. <img src="./images/subCenter.png" alt="">
  383. </div>
  384. <div class="right">
  385. <span>分中心</span>
  386. <div class="number">
  387. <span>3</span>
  388. <span>个</span>
  389. </div>
  390. </div>
  391. </div>
  392. <div class="list" @click="showDistrictLevel(2)">
  393. <div class="img">
  394. <img src="./images/townStreet.png" alt="">
  395. </div>
  396. <div class="right">
  397. <span>镇街便民服务中心</span>
  398. <div class="number">
  399. <span>15</span>
  400. <span>个</span>
  401. </div>
  402. </div>
  403. </div>
  404. <div class="list" @click="showDistrictLevel(3)">
  405. <div class="img">
  406. <img src="./images/convenienceServiceStation.png" alt="">
  407. </div>
  408. <div class="right">
  409. <span>村社便民服务站</span>
  410. <div class="number">
  411. <span>153</span>
  412. <span>个</span>
  413. </div>
  414. </div>
  415. </div>
  416. </div>
  417. </div>
  418. <!-- 3号楼楼层指引 -->
  419. <div class="floorGuide" v-show="floorGuideShow">
  420. <img class="floorGuideBg" src="./images/floor-floorGuide-bg.png" alt="" srcset="">
  421. <div class="floorGuideTit">
  422. <img class="floorGuideIcon" src="./images/floor-floorGuide-icon.png" alt="" srcset="">
  423. <span>3号楼楼层指引</span>
  424. </div>
  425. <div class="floorGuideTable">
  426. <el-row :gutter="20" class="floorGuide-row">
  427. <el-col :span="12" v-for="item in floorGuideList.slice(0,12)" :key="item.floorNum">
  428. <span class="floorNum-col">
  429. <img src="./images/floor-floorGuide-numBg.png" alt="" srcset="">
  430. <span>{{item.floorNum}}</span>
  431. </span>
  432. <span class="floorName-col" v-if="item.name.length<=12">{{item.name}}</span>
  433. <span class="floorName-col" :title="item.name"
  434. v-else>{{item.name.substring(0,11)}}...</span>
  435. </el-col>
  436. </el-row>
  437. <el-row :gutter="20" class="floorGuide-row">
  438. <el-col :span="12" v-for="item in floorGuideList.slice(12,floorGuideList.length)"
  439. :key="item.floorNum">
  440. <span class="floorNum-col">
  441. <img src="./images/floor-floorGuide-numBg.png" alt="" srcset="">
  442. <span>{{item.floorNum}}</span>
  443. </span>
  444. <span class="floorName-col" v-if="item.name.length<=12">{{item.name}}</span>
  445. <span class="floorName-col" :title="item.name"
  446. v-else>{{item.name.substring(0,11)}}...</span>
  447. </el-col>
  448. </el-row>
  449. </div>
  450. </div>
  451. <!-- 4号楼楼层指引 -->
  452. <div class="floorGuide" v-show="floorGuideShow4">
  453. <img class="floorGuideBg" src="./images/floor-floorGuide-bg.png" alt="" srcset="">
  454. <div class="floorGuideTit">
  455. <img class="floorGuideIcon" src="./images/floor-floorGuide-icon.png" alt="" srcset="">
  456. <span>3号楼楼层指引</span>
  457. </div>
  458. <div class="floorGuideTable">
  459. <el-row :gutter="20" class="floorGuide-row">
  460. <el-col :span="12" v-for="item in floorGuideList4" :key="item.floorNum">
  461. <span class="floorNum-col">
  462. <img src="./images/floor-floorGuide-numBg.png" alt="" srcset="">
  463. <span>{{item.floorNum}}</span>
  464. </span>
  465. <span class="floorName-col" v-if="item.name.length<=12">{{item.name}}</span>
  466. <span class="floorName-col" :title="item.name"
  467. v-else>{{item.name.substring(0,11)}}...</span>
  468. </el-col>
  469. </el-row>
  470. </div>
  471. </div>
  472. <!-- 区行政服务中心网点分布弹窗 -->
  473. <div class="districtLevelBox" v-show="districtLevelShow">
  474. <div class="districtLevelContent">
  475. <img class="districtLevelbg" src="./images/districtLevelbg.png" alt="" srcset="">
  476. <div class="districtLevelContent-box" ref="districtLevelContent">
  477. <div class="districtLevelContent-tit" ref="districtLevelTit">
  478. <span></span>
  479. <span>区行政服务中心网点分布——{{districtLevelTitle}}</span>
  480. <img @click="clearDistrictLevel" src="./images/districtLevelClear.png" alt=""
  481. srcset="">
  482. </div>
  483. <img class="districtLevelLine" ref="districtLevelLine"
  484. src="./images/districtLevelLine.png" alt="">
  485. <div class="districtLevelList" ref="districtLevelList"
  486. :style="`height:${districtLevelListHeight}`">
  487. <el-row>
  488. <el-col :span="12" v-for="(item,index) in districtLevelLists">
  489. <div class="districtLevelList-col"
  490. :class="districtLevelNum=='2'?'districtLevelList-col2':''"
  491. @click="goHtmlFun(item.id)">
  492. <img :src="`./images/districtLevelList${districtLevelNum}.png`"
  493. alt="" srcset="">
  494. <div class="left">
  495. <span
  496. class="span-col name">{{index+(current-1)*10+1}}.{{item.dep}}</span>
  497. <span class="span-col">
  498. <span class="label">电话:</span>
  499. <span class="center" :title="item.tel"
  500. v-if="item.tel&&item.tel.length>28">{{item.tel.slice(0,
  501. 28)}}...</span>
  502. <span class="center" v-else>{{item.tel||'--'}}</span>
  503. </span>
  504. <span class="span-col">
  505. <span class="label">地址:</span>
  506. <span class="center" :title="item.address"
  507. v-if="item.address&&item.address.length>28">{{item.address.slice(0,
  508. 28)}}...</span>
  509. <span class="center" v-else>{{item.address}}</span>
  510. </span>
  511. </div>
  512. </div>
  513. </el-col>
  514. </el-row>
  515. </div>
  516. <div class="districtLevelFooter" ref="districtLevelFooter">
  517. <el-pagination :page-size="10" @current-change="currentChangeFun" background
  518. layout="prev, pager, next" :current-page="current"
  519. :total="districtLevelTotal">
  520. </el-pagination>
  521. </div>
  522. </div>
  523. </div>
  524. </div>
  525. <!-- 公交详情弹窗 -->
  526. <div id="transitTitPop" v-show="true"></div>
  527. <div class="districtLevelBox transitBox" id="transitBox" v-show="transitPopShow">
  528. <div class="districtLevelContent" id="transitContent">
  529. <img class="districtLevelbg" src="./images/districtLevelbg.png" alt="" srcset="">
  530. <div class="districtLevelContent-box">
  531. <div class="districtLevelContent-tit">
  532. <span></span>
  533. <span>天福路口站</span>
  534. <img @click="transitClearFun" src="./images/districtLevelClear.png" alt=""
  535. srcset="">
  536. </div>
  537. <img class="districtLevelLine" src="./images/districtLevelLine.png" alt="">
  538. <div class="transitContent">
  539. <div class="transitContentList" v-for="(item,index) in transitList"
  540. :key="item.id"
  541. :style="`border-bottom:${index == transitList.length-1?0:'1px solid #33333341'}`"
  542. @click="transitContentListClickFun(item)">
  543. <div class="left">
  544. <span
  545. class="left-col"><span>{{item.name}}</span><span>下一站:{{item.nextTransit}}</span></span>
  546. <span class="left-col"><span>--</span><span>等待发出</span></span>
  547. </div>
  548. <div class="right"
  549. @click="transitJson.routeOrder = !transitJson.routeOrder">
  550. <img src="./images/transitChange.png" alt="">
  551. </div>
  552. </div>
  553. </div>
  554. <div class="transitFooter" v-show="transitShow">
  555. <div class="transitRoute">
  556. {{transitJson.routeOrder?transitJson.start:transitJson.end}}
  557. <img src="./images/blueArrow.png" alt="" srcset="">
  558. {{transitJson.routeOrder?transitJson.end:transitJson.start}}
  559. </div>
  560. <div class="transitRouteContent">
  561. <span>首 {{transitJson.startTime}}</span>
  562. <span>末 {{transitJson.endTime}}</span>
  563. <span>票价{{transitJson.ticketPrice}}元</span>
  564. </div>
  565. <div class="carRoute">
  566. <div class="greenRoute"></div>
  567. <div class="nameRoute">
  568. <div class="nameRouteItem" v-for="(item,index) in transitRouteList"
  569. :key="index"
  570. :style="`width:${ index==transitRouteList.length-1?'2%':98/(transitRouteList.length-1)}%`">
  571. <div class="number">{{index+1}}</div>
  572. <div v-for="colItem in item.name" :key="colItem">
  573. {{colItem}}
  574. </div>
  575. </div>
  576. </div>
  577. </div>
  578. </div>
  579. </div>
  580. </div>
  581. </div>
  582. </div>
  583. </div>
  584. </div>
  585. </div>
  586. <div id="loading">
  587. <i class="fa fa-spinner fa-spin fa-fw"></i>加载中...
  588. </div>
  589. </div>
  590. <div style="width:100%;" class="footer"></div>
  591. </body>
  592. <script>
  593. function isMobileUserAgent() {
  594. return /iphone|ipod|android.*mobile|windows.*phone|blackberry.*mobile/i.test(
  595. window.parent.navigator.userAgent.toLowerCase("")
  596. );
  597. }
  598. if (isMobileUserAgent()) {
  599. window.location = 'https://www.cqna.gov.cn/syygapi/naxsb/mobile/qjtMobile.html'
  600. }
  601. </script>
  602. <script>
  603. $(function () {
  604. $(".header").load('https://www.cqna.gov.cn/syygapi/naxsb/top/top_style.html');
  605. $(".footer").load('https://www.cqna.gov.cn/syygapi/naxsb/footer/footer.html');
  606. });
  607. </script>
  608. <script>
  609. var _this = this;
  610. // 判断浏览器是否支持 webgl
  611. if (!Detector.webgl) Detector.addGetWebGLMessage();
  612. let mwidth = window.innerWidth;
  613. let mheight = window.innerHeight;
  614. // 初始化场景
  615. let scene = new THREE.Scene();
  616. // 初始化摄像机
  617. let camera = new THREE.PerspectiveCamera(10, mwidth / mheight, 1, 1000000);
  618. // camera.position.set(90000, 41120, 81120);
  619. camera.position.set(50000, 71120, 51120);
  620. camera.lookAt(new THREE.Vector3(0, 0, 0));
  621. let renderer = new THREE.WebGLRenderer({
  622. canvas: document.getElementById("canvas-model-view"),
  623. antialias: true, // 设置抗锯齿
  624. alpha: true, // 背景透明
  625. autoClear: true,
  626. logarithmicDepthBuffer: true
  627. });
  628. renderer.setSize(mwidth, mheight);
  629. renderer.shadowMap.enabled = true;
  630. // 2D 文字渲染
  631. let css2Renderer = new THREE.CSS2DRenderer();
  632. css2Renderer.setSize(mwidth, mheight);
  633. css2Renderer.domElement.style.position = 'absolute';
  634. css2Renderer.domElement.style.top = '0px';
  635. css2Renderer.domElement.style.pointerEvents = 'none';
  636. document.body.appendChild(css2Renderer.domElement);
  637. // 四个方向的平行光
  638. // 环境光
  639. let ambient = new THREE.AmbientLight(0x404040, 0.1);
  640. scene.add(ambient);
  641. // var pointLight = new THREE.PointLight(0xf0e68c, 0.9, 12500);
  642. // pointLight.position.set(0, 8500, 0);
  643. // pointLight.castShadow = true;
  644. // pointLight.shadow.camera.near = 1;
  645. // pointLight.shadow.camera.far = 15000;
  646. // pointLight.shadow.mapSize.width = 10240;
  647. // pointLight.shadow.mapSize.height = 10240;
  648. // scene.add(pointLight);
  649. // 加载模型文件
  650. let gLTFLoader = new THREE.GLTFLoader()
  651. let dracoLoader = new THREE.DRACOLoader();
  652. dracoLoader.setDecoderPath('https://www.cqna.gov.cn/syygapi/naxsb/3ddemo/examples/js/libs/draco/gltf/');
  653. dracoLoader.setDecoderConfig({
  654. type: 'js'
  655. });
  656. gLTFLoader.setDRACOLoader(dracoLoader);
  657. gLTFLoader.load('./3ddemo/model/35.gltf', function (obj) {
  658. obj.scene.traverse(function (child) {
  659. if (child.material && child.material.name) {
  660. child.frustumCulled = false;
  661. child.castShadow = true;
  662. child.receiveShadow = true;
  663. child.material.emissive = child.material.color;
  664. child.material.emissiveMap = child.material.map;
  665. child.material.transparent = true;
  666. child.material.emissiveIntensity = 0.8;
  667. if (child.material.name == 'tccrk') {
  668. const div = document.createElement('div');
  669. div.id = child.uuid;
  670. let html = '';
  671. html += '<div style="font-size: 12px; width: 110px; text-align: center;position: relative;">';
  672. html += '<div class="building-text" style="background: #18A65A; margin-bottom: -2px;position: absolute;top:170px">';
  673. html += '<span style="text-align: left;">地下停车场</span>';
  674. html += '<span style="font-size: 10px; text-align: left;">所有车位:650个</span>';
  675. html += '</div>';
  676. html += '<div class="building-line" style="border-left: 1px dashed #1D96E9; height: 100px; top: 170px;"></div>';
  677. html += '</div>';
  678. div.innerHTML = html;
  679. let tag = new THREE.CSS2DObject(div);
  680. child.add(tag);
  681. }
  682. if (child.material.name == 'tcc1') {
  683. const div = document.createElement('div');
  684. div.id = child.uuid;
  685. let html = '';
  686. html += '<div style="font-size: 12px; width: 100px; text-align: center;position: relative;">';
  687. html += '<div class="building-text" style="background: #18A65A; margin-bottom: -2px;position: absolute;top:170px">';
  688. html += '<span style="text-align: left;">停车场</span>';
  689. html += '<span style="font-size: 10px; text-align: left;">所有车位:57个</span>';
  690. html += '</div>';
  691. html += '<div class="building-line" style="border-left: 1px dashed #1D96E9; height: 100px; top: 170px;"></div>';
  692. html += '</div>';
  693. div.innerHTML = html;
  694. let tag = new THREE.CSS2DObject(div);
  695. child.add(tag);
  696. }
  697. if (child.material.name == 'tcc') {
  698. const div = document.createElement('div');
  699. div.id = child.uuid;
  700. let html = '';
  701. html += '<div style="font-size: 12px; width: 100px; text-align: center;position: relative;">';
  702. html += '<div class="building-text" style="background: #18A65A; margin-bottom: -2px;position: absolute;top:170px">';
  703. html += '<span style="text-align: left;">停车场</span>';
  704. html += '<span style="font-size: 10px; text-align: left;">所有车位:74个</span>';
  705. html += '</div>';
  706. html += '<div class="building-line" style="border-left: 1px dashed #1D96E9; height: 100px; top: 170px;"></div>';
  707. html += '</div>';
  708. div.innerHTML = html;
  709. let tag = new THREE.CSS2DObject(div);
  710. child.add(tag);
  711. }
  712. if (child.material.name == 'gongjiaoche') {
  713. const div = document.createElement('div');
  714. div.id = child.uuid;
  715. let html = '';
  716. html += '<div style="font-size: 12px; width: 80px; text-align: center;position: relative;">';
  717. 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;">
  718. <div class="chekuchukou-tit"><span>天福路口公交车站</span></div>
  719. <div>144路</div>
  720. <div>180路</div>
  721. <div>188路</div>
  722. <div>345路</div>
  723. </div>`
  724. html += '<div class="building-line" style="border-left: 1px dashed #1D96E9; height: 100px; top: 170px;"></div>';
  725. html += '</div>';
  726. div.innerHTML = html;
  727. let tag = new THREE.CSS2DObject(div);
  728. child.add(tag);
  729. }
  730. }
  731. if (child.isMesh) {
  732. child.frustumCulled = false;
  733. child.castShadow = true;
  734. child.receiveShadow = true;
  735. child.material.emissive = child.material.color;
  736. child.material.emissiveMap = child.material.map;
  737. child.material.transparent = true;
  738. child.material.emissiveIntensity = 0.8;
  739. if (child.name) {
  740. const div = document.createElement('div');
  741. div.id = child.uuid;
  742. div.style = 'color:red;';
  743. div.setAttribute("data", child.name);
  744. div.innerHTML = '<p data-name="' + child.name + '"></p>';
  745. let tag = new THREE.CSS2DObject(div);
  746. }
  747. // 一号楼
  748. if (child.name == 'yihaolou') {
  749. const div = document.createElement('div');
  750. div.id = child.uuid;
  751. let html = '';
  752. html += '<div class="building-box" style="width: 100px; top: 70px; left: -48px;">';
  753. html += '<div class="building-text" style="background: #1D96E9;">';
  754. html += '<span>1号楼</span><span style="font-size: 10px;">社保大厅、医保大厅</span>';
  755. html += '</div>';
  756. html += '<svg width="10" height="10"><polygon id="triangle" points="0,0 10,0 5,10" fill="#1D96E9"/></svg>';
  757. html += '</div>';
  758. html += '<div class="building-line" style="border-left: 1px dashed #1D96E9; height: 100px; top: 110px;"></div>';
  759. div.innerHTML = html;
  760. let tag = new THREE.CSS2DObject(div);
  761. child.add(tag);
  762. div.style.pointerEvents = 'auto';
  763. div.addEventListener('click', function (event) {
  764. window.location.href = 'floortow.html';
  765. });
  766. }
  767. // 二号楼
  768. if (child.name == 'erhaolou') {
  769. const div = document.createElement('div');
  770. div.id = child.uuid;
  771. let html = '';
  772. html += '<div class="building-box" style="width: 100px; top: 28px; left: -48px;">';
  773. // html += '<div class="finger" style="animation:blink 1s infinite;"><img src="images/finger.png">点我</div>';
  774. html += '<div class="building-text" style="background: #1D96E9;">';
  775. html += '<span>2号楼</span></span></span><span style="font-size: 10px;">南岸区政务服务中心</span>';
  776. html += '</div>';
  777. html += '<svg width="10" height="10"><polygon id="triangle" points="0,0 10,0 5,10" fill="#1D96E9"/></svg>';
  778. html += '</div>';
  779. html += '<div class="building-line" style="border-left: 1px dashed #1D96E9; height: 100px; top: 72px;"></div>';
  780. div.innerHTML = html;
  781. let tag = new THREE.CSS2DObject(div);
  782. child.add(tag);
  783. div.style.pointerEvents = 'auto';
  784. div.addEventListener('click', function (event) {
  785. window.location.href = 'https://www.cqna.gov.cn/syygapi/naxsb/floorone.html?floorid=' + 2;
  786. });
  787. }
  788. // 三号楼
  789. if (child.name == 'sanhaolou') {
  790. const div = document.createElement('div');
  791. div.id = child.uuid;
  792. let html = '';
  793. html += '<div class="building-box" style="width: 50px; top: 73px; left: -23px;">';
  794. html += '<div class="building-text" style="background: #1D96E9;">';
  795. html += '<span>3号楼</span><span style="font-size: 10px;"></span>';
  796. html += '</div>';
  797. html += '<svg width="10" height="10"><polygon id="triangle" points="0,0 10,0 5,10" fill="#1D96E9"/></svg>';
  798. html += '</div>';
  799. html += '<div class="building-line" style="border-left: 1px dashed #1D96E9; height: 100px; top: 90px;"></div>';
  800. div.innerHTML = html;
  801. let tag = new THREE.CSS2DObject(div);
  802. child.add(tag);
  803. div.style.pointerEvents = 'auto';
  804. div.addEventListener('click', function (event) {
  805. _this.nowDiv.floorGuideShow = true;
  806. });
  807. }
  808. // 四号楼
  809. if (child.name == 'sihaolou-Chrome') {
  810. const div = document.createElement('div');
  811. div.id = child.uuid;
  812. let html = '';
  813. html += '<div class="building-box">';
  814. // html += `<div class="text" style="top: -30px;left: 146px;position: absolute;display: flex;flex-direction: column;align-items: flex-start;color: #1A95EB;">
  815. // <span style="font-size: 18px;font-weight: bold;margin-bottom: 5px;">地铁6号线</span>
  816. // <span>邱家湾站2B出口</span>
  817. // <span>距离:800米</span>
  818. // <img src="https://www.cqna.gov.cn/syygapi/naxsb/images/qjtArrow.png" alt="" style="height: 1.75rem;">
  819. // </div>`
  820. html += '<div class="building-text">';
  821. html += '<span>4号楼</span><span style="font-size: 10px;">商务打印、小卖部、食堂</span>';
  822. html += '</div>';
  823. html += '<svg width="10" height="10"><polygon id="triangle" points="0,0 10,0 5,10" fill="#18A65A"/></svg>';
  824. html += '</div>';
  825. html += '<div class="building-line"></div>';
  826. div.innerHTML = html;
  827. let tag = new THREE.CSS2DObject(div);
  828. child.add(tag);
  829. div.style.pointerEvents = 'auto';
  830. div.addEventListener('click', function (event) {
  831. _this.nowDiv.floorGuideShow4 = true;
  832. });
  833. }
  834. }
  835. });
  836. scene.add(obj.scene);
  837. const box = new THREE.Box3().setFromObject(obj.scene);
  838. const center = new THREE.Vector3();
  839. box.getCenter(center);
  840. obj.scene.position.sub(center);
  841. document.getElementById('loading').style.display = 'none';
  842. render();
  843. }, function (xhr) {
  844. }, function (error) {
  845. })
  846. function render() {
  847. css2Renderer.render(scene, camera)
  848. renderer.render(scene, camera);
  849. }
  850. render();
  851. let controls = new THREE.OrbitControls(camera, renderer.domElement);
  852. controls.enableZoom = false
  853. controls.maxPolarAngle = Math.PI / 2
  854. controls.minPolarAngle = 0
  855. controls.addEventListener('change', render);
  856. let axisHelper = new THREE.AxisHelper(50050);
  857. </script>
  858. <script>
  859. var nowDiv = new Vue({
  860. el: '#qjt',
  861. data: function () {
  862. return {
  863. currentTime: "",
  864. bjxqList: [],
  865. /* 区行政服务中心网点分布 start*/
  866. districtLevelShow: false,
  867. floorGuideShow: false,//3楼层指引显示控制
  868. floorGuideList: [
  869. {
  870. floorNum: '-2F',
  871. name: '地下车库'
  872. },
  873. {
  874. floorNum: '-1F',
  875. name: '地下车库'
  876. },
  877. {
  878. floorNum: '1F',
  879. name: '重庆市正联实业发展有限公司、行政中心B区物管处'
  880. },
  881. {
  882. floorNum: '2F',
  883. name: '重庆药品交易所综合业务大厅'
  884. },
  885. {
  886. floorNum: '3F',
  887. name: '重庆药品交易所'
  888. },
  889. {
  890. floorNum: '4F',
  891. name: '重庆药品交易所'
  892. },
  893. {
  894. floorNum: '5F',
  895. name: '重庆市南岸区大数据应用发展管理局'
  896. },
  897. {
  898. floorNum: '6F',
  899. name: '重庆市南岸区大健康产业发展促进中心、重庆联合利丰供应链管理有限公司'
  900. },
  901. {
  902. floorNum: '8F',
  903. name: '重庆市南岸区统计局'
  904. },
  905. {
  906. floorNum: '9F',
  907. name: '重庆市南岸区医疗保障局'
  908. },
  909. {
  910. floorNum: '10F',
  911. name: '重庆市南岸区医疗保障局'
  912. },
  913. {
  914. floorNum: '11F',
  915. name: '重庆市南岸区国有资产监督管理委员会'
  916. },
  917. {
  918. floorNum: '12F',
  919. name: '重庆市南岸区体育发展中心'
  920. },
  921. {
  922. floorNum: '13F',
  923. name: '重庆市南岸区农业农村委员会'
  924. },
  925. {
  926. floorNum: '14F',
  927. name: '重庆市南岸区农业农村委员会'
  928. },
  929. {
  930. floorNum: '15F',
  931. name: '重庆市南岸区农业农村委员会'
  932. },
  933. {
  934. floorNum: '17F',
  935. name: '区委巡察办、区委巡察组'
  936. },
  937. {
  938. floorNum: '19F',
  939. name: '城建集团'
  940. },
  941. {
  942. floorNum: '20F',
  943. name: '城建集团'
  944. },
  945. {
  946. floorNum: '21F',
  947. name: '重庆市南岸区城乡要素流转服务中心、重庆市南岸区城乡融合建设发展有限公司'
  948. },
  949. {
  950. floorNum: '22F',
  951. name: '南岸区资产公司'
  952. },
  953. {
  954. floorNum: '23F',
  955. name: '重庆南宜城乡建设发展有限公司、重庆市幸福实业发展有限责任公司'
  956. },
  957. {
  958. floorNum: '25F',
  959. name: '重庆云开实业有限公司、重庆南投智能终端投资有限公司'
  960. }
  961. ],
  962. floorGuideShow4: false,//4楼层指引显示控制
  963. floorGuideList4: [
  964. {
  965. floorNum: '1F',
  966. name: '食堂'
  967. },
  968. {
  969. floorNum: '2F',
  970. name: '食堂'
  971. },
  972. {
  973. floorNum: '3F',
  974. name: '食堂'
  975. },
  976. {
  977. floorNum: '4F',
  978. name: ''
  979. }
  980. ],
  981. districtLevelTitle: '',
  982. districtLevelNum: -1,
  983. districtLevelList: [
  984. // {
  985. // name: '重庆市南岸区政务服务中心(江南新城中心)',
  986. // tel: '023-62980263',
  987. // address: '重庆市南岸区铜元局街道南坪西路36号(上海城嘉发跨贸中心 二楼)南岸区'
  988. // },
  989. // {
  990. // name: '重庆市南岸区政务服务中心(江南新城中心)',
  991. // tel: '023-62980263',
  992. // address: '重庆市南岸区铜元局街道南坪西路36号(上海城嘉发跨贸中心 二楼)南岸区'
  993. // },
  994. // {
  995. // name: '重庆市南岸区政务服务中心(江南新城中心)',
  996. // tel: '023-62980263',
  997. // address: '重庆市南岸区铜元局街道南坪西路36号(上海城嘉发跨贸中心 二楼)南岸区'
  998. // }
  999. ],
  1000. addressVrUrlJson: {
  1001. 414: 'https://www.cqna.gov.cn/vr/jiedao/csq/tour.html',
  1002. 415: 'https://www.cqna.gov.cn/vr/jiedao/lmh/tour.html',
  1003. 416: 'https://www.cqna.gov.cn/vr/jiedao/npz/tour.html',
  1004. 417: 'https://www.cqna.gov.cn/vr/jiedao/twjd/tour.html',
  1005. 418: 'https://www.cqna.gov.cn/vr/jiedao/ylz/tour.html',
  1006. 419: 'https://www.cqna.gov.cn/vr/jiedao/jgs/tour.html',
  1007. 420: 'https://www.cqna.gov.cn/vr/jiedao/gyd/tour.html',
  1008. 421: 'https://www.cqna.gov.cn/vr/jiedao/hyl/tour.html',
  1009. 422: 'https://www.cqna.gov.cn/vr/jiedao/ns/tour.html',
  1010. 423: 'https://www.cqna.gov.cn/vr/jiedao/tsz/tour.html',
  1011. 424: 'https://www.cqna.gov.cn/vr/jiedao/xkz/tour.html',
  1012. 425: 'https://www.cqna.gov.cn/vr/jiedao/htx/tour.html',
  1013. 426: 'https://cqna.gov.cn/vr/jiedao/np/tour.html',
  1014. 427: 'https://www.cqna.gov.cn/vr/jiedao/tyj/tour.html',
  1015. 428: 'https://www.cqna.gov.cn/vr/jiedao/dzs/tour.html',
  1016. },
  1017. districtLevelLists: [],
  1018. districtLevelTotal: 0,
  1019. districtLevelListHeight: "60%",
  1020. current: 0,
  1021. /* 区行政服务中心网点分布 end*/
  1022. /* 公交详情start */
  1023. transitPopShow: false,
  1024. transitShow: false,
  1025. transitTime: null,
  1026. transitList: [
  1027. {
  1028. name: '144路',
  1029. nextTransit: '广福道',
  1030. id: '1'
  1031. },
  1032. {
  1033. name: '144路',
  1034. nextTransit: '广福道',
  1035. id: '2'
  1036. }
  1037. ],
  1038. transitJson: {
  1039. start: "响水路",
  1040. end: "江南交通换乘枢纽",
  1041. startTime: "06:00",
  1042. endTime: "19:00",
  1043. ticketPrice: "2",
  1044. routeOrder: true//true表示顺序 false逆序
  1045. },
  1046. transitRouteList: [
  1047. {
  1048. name: '响水路',
  1049. },
  1050. {
  1051. name: '南坪南路',
  1052. },
  1053. {
  1054. name: '四公里立交',
  1055. },
  1056. {
  1057. name: '茶园内环站',
  1058. },
  1059. {
  1060. name: '玉马路',
  1061. },
  1062. {
  1063. name: '江南小区',
  1064. },
  1065. {
  1066. name: '广福大道',
  1067. },
  1068. {
  1069. name: '天福路口',
  1070. },
  1071. {
  1072. name: '广福大道中段',
  1073. },
  1074. {
  1075. name: '广福大道中段',
  1076. }
  1077. ,
  1078. {
  1079. name: '江南交通换乘枢纽',
  1080. }
  1081. ]
  1082. /* 公交详情end */
  1083. };
  1084. },
  1085. created() {
  1086. this.updateTime();
  1087. setInterval(this.updateTime, 1000);
  1088. this.getSSbj();
  1089. this.showTransitBoxFun()
  1090. },
  1091. beforeDestroy() {
  1092. this.stopClock();
  1093. if (this.districtLevelShow)
  1094. window.removeEventListener("resize", this.getDistrictLevelListHeight);
  1095. clearInterval(this.transitTime)
  1096. },
  1097. mounted() {
  1098. // 启动整个文档点击事件监听
  1099. this.$nextTick(() => {
  1100. document.addEventListener("click", this.floorGuideHideFun, true);
  1101. });
  1102. },
  1103. methods: {
  1104. updateTime() {
  1105. const now = new Date();
  1106. const year = String(now.getFullYear()).padStart(4, '0');
  1107. const month = String(now.getMonth() + 1).padStart(2, '0');
  1108. const day = String(now.getDate()).padStart(2, '0');
  1109. const hours = String(now.getHours()).padStart(2, '0');
  1110. const minutes = String(now.getMinutes()).padStart(2, '0');
  1111. const seconds = String(now.getSeconds()).padStart(2, '0');
  1112. const formattedDateTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
  1113. this.currentTime = formattedDateTime;
  1114. },
  1115. addKeyFrames(y) {
  1116. let i = 0
  1117. setInterval(function () {
  1118. if (i >= y) return i = 0
  1119. i++
  1120. document.querySelector('.bottom-t').style.marginTop = `-${i}px`
  1121. }, 50);
  1122. },
  1123. getSSbj() {
  1124. let that = this;
  1125. $.ajax({
  1126. url: 'https://data.cqna.gov.cn:8088/kshapi/api/page2/top2',
  1127. type: "get",
  1128. dataType: "json",
  1129. async: false,
  1130. success: function (data) {
  1131. var data = data.data;
  1132. that.bjxqList = data.data;
  1133. }
  1134. });
  1135. var height = document.querySelector('.item') ? document.querySelector('.item').clientHeight - 20 : 0;
  1136. if (this.bjxqList.length) {
  1137. this.addKeyFrames(height * this.bjxqList.length);
  1138. }
  1139. },
  1140. // 区行政服务中心网点分布点击事件
  1141. showDistrictLevel(num) {
  1142. window.location.href = 'zwfwMap.html'
  1143. },
  1144. //服务中心分布点击事件
  1145. goHtmlFun(id) {
  1146. if (this.districtLevelNum == '2')
  1147. window.open(this.addressVrUrlJson[id])
  1148. },
  1149. // 分页事件
  1150. currentChangeFun(num) {
  1151. this.current = num
  1152. let numstar = num - 1, endNum = num
  1153. this.districtLevelLists = this.districtLevelList.slice(10 * numstar, 10 * num)
  1154. },
  1155. // 关闭弹窗
  1156. clearDistrictLevel() {
  1157. this.districtLevelShow = false
  1158. window.removeEventListener("resize", this.getDistrictLevelListHeight);
  1159. },
  1160. // 控制车辆信息详情展示区域的显示
  1161. transitContentListClickFun(item) {
  1162. this.transitShow = true
  1163. },
  1164. // 获取网点分布弹窗内容高度
  1165. getDistrictLevelListHeight() {
  1166. this.$nextTick(() => {
  1167. const districtLevelContentHeight = this.$refs.districtLevelContent.offsetHeight;
  1168. const districtLevelFooterHeight = this.$refs.districtLevelFooter.offsetHeight;
  1169. this.districtLevelListHeight =
  1170. (districtLevelContentHeight - this.$refs.districtLevelList.offsetTop - districtLevelFooterHeight - districtLevelContentHeight * 0.1) + 'px'
  1171. });
  1172. },
  1173. // 监听控制公交详情显示
  1174. showTransitBoxFun() {
  1175. let _this = this
  1176. this.transitTime = setInterval(() => {
  1177. if (document.getElementById('transitTitPop').innerText == "true") {
  1178. _this.transitPopShow = true
  1179. document.getElementById('transitContent').style.display = "block"
  1180. }
  1181. }, 100)
  1182. },
  1183. // 关闭公交弹窗
  1184. transitClearFun() {
  1185. document.getElementById('transitTitPop').innerText = ""
  1186. this.transitPopShow = false
  1187. },
  1188. // 监听文档点击事件若不在楼层索引展示区则隐藏此弹窗
  1189. floorGuideHideFun(e) {
  1190. let parentNode = e.target.parentNode
  1191. if (parentNode.className != 'floorGuide'
  1192. && parentNode.className != 'el-col el-col-12'
  1193. && parentNode.className != 'floorGuideTable'
  1194. && parentNode.className != 'floorNum-col'
  1195. && parentNode.className != 'floorName-col'
  1196. && (this.floorGuideShow || this.floorGuideShow4))
  1197. this.floorGuideShow = false;
  1198. this.floorGuideShow4 = false;
  1199. }
  1200. },
  1201. beforeDestroy() {
  1202. document.removeEventListener("click", this.floorGuideHideFun); //页面销毁的时候移除事件
  1203. },
  1204. });
  1205. </script>
  1206. <script>
  1207. var path = "https://www.cqna.gov.cn/data";
  1208. function handlingNumber(area, timeType) {
  1209. var data1 = ''
  1210. $.ajax({
  1211. url: path + "/department/getOfficeNumberByAreaInfo",
  1212. dataType: "json",
  1213. type: "get",
  1214. cache: false,
  1215. async: false,
  1216. data: {
  1217. "area": area,
  1218. "timeType": timeType
  1219. },
  1220. success: function (data) {
  1221. data1 = data.data
  1222. },
  1223. error: function () {
  1224. alert('网络错误,请稍后再试!');
  1225. }
  1226. });
  1227. return data1;
  1228. }
  1229. function animateValue(obj, start, end, duration) {
  1230. let startTimestamp = null;
  1231. const step = (timestamp) => {
  1232. if (!startTimestamp) startTimestamp = timestamp;
  1233. const progress = Math.min((timestamp - startTimestamp) / duration, 1);
  1234. obj.innerHTML = Math.floor(progress * (end - start) + start);
  1235. if (progress < 1) {
  1236. window.requestAnimationFrame(step);
  1237. } else {
  1238. obj.classList.remove('animate');
  1239. }
  1240. };
  1241. obj.classList.add('animate');
  1242. window.requestAnimationFrame(step);
  1243. }
  1244. const time = 2 * 1000;
  1245. let that = this;
  1246. function getCurrentPerson() {
  1247. $.ajax({
  1248. url: conpath + "/qjt/",
  1249. type: "get",
  1250. dataType: "json",
  1251. async: false,
  1252. success: function (data) {
  1253. const waitTime2 = document.getElementById('waitTime2');
  1254. animateValue(waitTime2, 0, data.data[0], time);
  1255. const currWaitPeople2 = document.getElementById('currWaitPeople2');
  1256. animateValue(currWaitPeople2, 0, data.data[1], time);
  1257. }
  1258. })
  1259. }
  1260. getCurrentPerson();
  1261. var intervalId = setInterval(getCurrentPerson, 1800000);
  1262. function getCurrentItem() {
  1263. $.ajax({
  1264. url: conpath + "/solveAffairs/",
  1265. type: "get",
  1266. dataType: "json",
  1267. async: false,
  1268. success: function (data) {
  1269. var data = data.data;
  1270. const currDayTaskNumElement = document.getElementById('currDayTaskNum');
  1271. animateValue(currDayTaskNumElement, 0, data[0], time);
  1272. const currWeekTaskNumElement = document.getElementById('currWeekTaskNum');
  1273. animateValue(currWeekTaskNumElement, 0, data[1], time);
  1274. const currMonthTaskNumElement = document.getElementById('currMonthTaskNum');
  1275. animateValue(currMonthTaskNumElement, 0, data[2], time);
  1276. const currYearTaskNumElement = document.getElementById('currYearTaskNum');
  1277. animateValue(currYearTaskNumElement, 0, data[3], time);
  1278. }
  1279. })
  1280. }
  1281. getCurrentItem();
  1282. var intervalId1 = setInterval(getCurrentItem, 300000);
  1283. window.addEventListener('beforeunload', function () {
  1284. clearInterval(intervalId);
  1285. clearInterval(intervalId1);
  1286. });
  1287. const taskNumElement2 = document.getElementById('taskNum2');
  1288. animateValue(taskNumElement2, 0, 798, time);
  1289. const winNumElement2 = document.getElementById('winNum2');
  1290. animateValue(winNumElement2, 0, 78, time);
  1291. </script>
  1292. </html>