qjt.html 31 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765
  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. </style>
  136. </head>
  137. <body>
  138. <div style="width:100%;" class="header"></div>
  139. <div class="container" style="position: relative;">
  140. <div class="row">
  141. <div class="col-sm-12">
  142. <div class="model-container"
  143. style="background: linear-gradient(180deg, rgb(246, 250, 255) 10%, rgb(214, 224, 235) 70%);">
  144. <div class="model-view">
  145. <canvas id="canvas-model-view" style="width: 100%;height: 100%;">您的浏览器不支持canvas!</canvas>
  146. </div>
  147. <div id="qjt">
  148. <div class="qjttitle"></div>
  149. <div class="nowtime">{{currentTime }}</div>
  150. <div class="onefloor conList">
  151. <div class="floortitle">叫号数据</div>
  152. <div class="floorcontent">
  153. <div class="list blue">
  154. <div class="top radio">当前排队人数:</div>
  155. <div class="bottom">
  156. <img src="https://www.cqna.gov.cn/syygapi/naxsb/images/floor1.png" alt="">
  157. <div><span class="number" id="currWaitPeople2">-</span>
  158. <span>人</span>
  159. </div>
  160. </div>
  161. </div>
  162. <div class="list yellow">
  163. <div class="top radio">可办事项数量:</div>
  164. <div class="bottom">
  165. <img src="https://www.cqna.gov.cn/syygapi/naxsb/images/floor2.png" alt="">
  166. <div><span class="number" id="taskNum2">-</span>
  167. <span>项</span>
  168. </div>
  169. </div>
  170. </div>
  171. <div class="list green">
  172. <div class="top radio">平均等待时长:</div>
  173. <div class="bottom">
  174. <img src="https://www.cqna.gov.cn/syygapi/naxsb/images/floor3.png" alt="">
  175. <div><span class="number" id="waitTime2">-</span>
  176. <span>分钟</span>
  177. </div>
  178. </div>
  179. </div>
  180. <div class="list purple">
  181. <div class="top radio">窗口数:</div>
  182. <div class="bottom">
  183. <img src="https://www.cqna.gov.cn/syygapi/naxsb/images/floor4.png" alt="">
  184. <div><span class="number" id="winNum2">-</span>
  185. <span>个</span>
  186. </div>
  187. </div>
  188. </div>
  189. </div>
  190. </div>
  191. <div class="twofloor conList">
  192. <div class="floortitle">实时办件详情</div>
  193. <div class="floorcontent" style="flex-wrap: nowrap;flex-direction: column;padding: 5px;">
  194. <div class="top_t">
  195. <div class="t1">状态</div>
  196. <div class="t2">受理部门</div>
  197. <div class="t3">办理名称</div>
  198. </div>
  199. <div style="width: 100%;height:100%;overflow:hidden;">
  200. <div class="bottom-t">
  201. <div class="item" v-for="(item, index) in bjxqList">
  202. <div class="title t1"><span
  203. v-if="item.state&&item.state=='在办'">{{item.state}}</span>
  204. <span style="background: #18A65A;border: 1px solid #18A65A;"
  205. v-else>{{item.state}}</span>
  206. </div>
  207. <div class="date t2" :title="item.acceptedDepartment">
  208. {{item.acceptedDepartment}}</div>
  209. <div class="date t3" :title="item.handlingName">
  210. {{item.handlingName?item.handlingName.split("—")[0]:''}}</div>
  211. </div>
  212. </div>
  213. </div>
  214. </div>
  215. </div>
  216. <div class="blsl conList">
  217. <div class="floortitle">累计办理数量</div>
  218. <div class="floorcontent">
  219. <div class="list">
  220. <div class="img">
  221. <img src="https://www.cqna.gov.cn/syygapi/naxsb/images/blsl4.png" alt="">
  222. </div>
  223. <div class="right">
  224. <span>本日办理数量</span>
  225. <div class="number">
  226. <span id="currDayTaskNum">324</span>
  227. <span>件</span>
  228. </div>
  229. </div>
  230. </div>
  231. <div class="list">
  232. <div class="img">
  233. <img src="https://www.cqna.gov.cn/syygapi/naxsb/images/blsl1.png" alt="">
  234. </div>
  235. <div class="right">
  236. <span>本周办理数量</span>
  237. <div class="number">
  238. <span id="currWeekTaskNum">7152</span>
  239. <span>件</span>
  240. </div>
  241. </div>
  242. </div>
  243. <div class="list">
  244. <div class="img">
  245. <img src="https://www.cqna.gov.cn/syygapi/naxsb/images/blsl2.png" alt="">
  246. </div>
  247. <div class="right">
  248. <span>本月办理数量</span>
  249. <div class="number">
  250. <span id="currMonthTaskNum">78</span>
  251. <span>件</span>
  252. </div>
  253. </div>
  254. </div>
  255. <div class="list">
  256. <div class="img">
  257. <img src="https://www.cqna.gov.cn/syygapi/naxsb/images/blsl3.png" alt="">
  258. </div>
  259. <div class="right">
  260. <span>本年办理数量</span>
  261. <div class="number">
  262. <span id="currYearTaskNum">78</span>
  263. <span>件</span>
  264. </div>
  265. </div>
  266. </div>
  267. </div>
  268. </div>
  269. <div class="pdgdf conList">
  270. <div class="floortitle">大厅取号高低峰图</div>
  271. <div class="floorcontent">
  272. <div id="pdgdfechart" style="width: 100%;height: 100%;"></div>
  273. </div>
  274. </div>
  275. </div>
  276. </div>
  277. </div>
  278. </div>
  279. <div id="loading">
  280. <i class="fa fa-spinner fa-spin fa-fw"></i>加载中...
  281. </div>
  282. </div>
  283. <div style="width:100%;" class="footer"></div>
  284. </body>
  285. <script>
  286. $(function () {
  287. $(".header").load('https://www.cqna.gov.cn/syygapi/naxsb/top/top_style.html');
  288. $(".footer").load('https://www.cqna.gov.cn/syygapi/naxsb/footer/footer.html');
  289. });
  290. </script>
  291. <script src="https://www.cqna.gov.cn/syygapi/naxsb/js/jquery-3.5.1.min.js"></script>
  292. <script>
  293. // 判断浏览器是否支持 webgl
  294. if (!Detector.webgl) Detector.addGetWebGLMessage();
  295. let mwidth = window.innerWidth;
  296. let mheight = window.innerHeight;
  297. // 初始化场景
  298. let scene = new THREE.Scene();
  299. // 初始化摄像机
  300. let camera = new THREE.PerspectiveCamera(10, mwidth / mheight, 1, 1000000);
  301. // camera.position.set(90000, 41120, 81120);
  302. camera.position.set(50000, 71120, 51120);
  303. camera.lookAt(new THREE.Vector3(0, 0, 0));
  304. let renderer = new THREE.WebGLRenderer({
  305. canvas: document.getElementById("canvas-model-view"),
  306. antialias: true, // 设置抗锯齿
  307. alpha: true, // 背景透明
  308. autoClear: true,
  309. logarithmicDepthBuffer: true
  310. });
  311. renderer.setSize(mwidth, mheight);
  312. renderer.shadowMap.enabled = true;
  313. // 2D 文字渲染
  314. let css2Renderer = new THREE.CSS2DRenderer();
  315. css2Renderer.setSize(mwidth, mheight);
  316. css2Renderer.domElement.style.position = 'absolute';
  317. css2Renderer.domElement.style.top = '0px';
  318. css2Renderer.domElement.style.pointerEvents = 'none';
  319. document.body.appendChild(css2Renderer.domElement);
  320. // 四个方向的平行光
  321. // 环境光
  322. let ambient = new THREE.AmbientLight(0x404040, 0.1);
  323. scene.add(ambient);
  324. var pointLight = new THREE.PointLight(0xf0e68c, 0.9, 12500);
  325. pointLight.position.set(0, 8500, 0);
  326. pointLight.castShadow = true;
  327. pointLight.shadow.camera.near = 1;
  328. pointLight.shadow.camera.far = 15000;
  329. pointLight.shadow.mapSize.width = 10240;
  330. pointLight.shadow.mapSize.height = 10240;
  331. scene.add(pointLight);
  332. // 加载模型文件
  333. let gLTFLoader = new THREE.GLTFLoader()
  334. let dracoLoader = new THREE.DRACOLoader();
  335. dracoLoader.setDecoderPath('https://www.cqna.gov.cn/syygapi/naxsb/3ddemo/examples/js/libs/draco/gltf/');
  336. dracoLoader.setDecoderConfig({
  337. type: 'js'
  338. });
  339. gLTFLoader.setDRACOLoader(dracoLoader);
  340. gLTFLoader.load('https://www.cqna.gov.cn/syygapi/naxsb/3ddemo/model/27.gltf', function (obj) {
  341. obj.scene.traverse(function (child) {
  342. if (child.isMesh) {
  343. child.frustumCulled = false;
  344. child.castShadow = true;
  345. child.receiveShadow = true;
  346. child.material.emissive = child.material.color;
  347. child.material.emissiveMap = child.material.map;
  348. child.material.transparent = true;
  349. child.material.emissiveIntensity = 0.8;
  350. if (child.name) {
  351. const div = document.createElement('div');
  352. div.id = child.uuid;
  353. div.style = 'color:red;';
  354. div.setAttribute("data", child.name);
  355. div.innerHTML = '<p data-name="' + child.name + '"></p>';
  356. let tag = new THREE.CSS2DObject(div);
  357. }
  358. // 一号楼
  359. if (child.name == 'yihaolou') {
  360. const div = document.createElement('div');
  361. div.id = child.uuid;
  362. let html = '';
  363. html += '<div class="building-box" style="width: 100px; top: 70px; left: -48px;">';
  364. html += '<div class="building-text" style="background: #1D96E9;" onclick="handleClick()">';
  365. html += '<span>1号楼</span><span style="font-size: 10px;">社保大厅、医保大厅</span>';
  366. html += '</div>';
  367. html += '<svg width="10" height="10"><polygon id="triangle" points="0,0 10,0 5,10" fill="#1D96E9"/></svg>';
  368. html += '</div>';
  369. html += '<div class="building-line" style="border-left: 1px dashed #1D96E9; height: 100px; top: 110px;"></div>';
  370. 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;">
  371. <span>地下停车场入口⬇</span>
  372. </div>`
  373. html += '<div class="building-line" style="border-left: 1px dashed #1D96E9; height: 100px; top: 326px;left: 58px;"></div>';
  374. div.innerHTML = html;
  375. let tag = new THREE.CSS2DObject(div);
  376. child.add(tag);
  377. }
  378. // 二号楼
  379. if (child.name == 'erhaolou') {
  380. const div = document.createElement('div');
  381. div.id = child.uuid;
  382. let html = '';
  383. html += '<div class="building-box" style="width: 100px; top: 28px; left: -48px;">';
  384. html += '<div class="finger" style="animation:blink 1s infinite;"><img src="images/finger.png">点我</div>';
  385. html += '<div class="building-text" style="background: #1D96E9;">';
  386. html += '<span>2号楼</span></span></span><span style="font-size: 10px;">南岸区政务服务中心</span>';
  387. html += '</div>';
  388. html += '<svg width="10" height="10"><polygon id="triangle" points="0,0 10,0 5,10" fill="#1D96E9"/></svg>';
  389. html += '</div>';
  390. html += '<div class="building-line" style="border-left: 1px dashed #1D96E9; height: 100px; top: 72px;"></div>';
  391. div.innerHTML = html;
  392. let tag = new THREE.CSS2DObject(div);
  393. child.add(tag);
  394. div.style.pointerEvents = 'auto';
  395. div.addEventListener('click', function (event) {
  396. window.location.href = 'https://www.cqna.gov.cn/syygapi/naxsb/floorone.html?floorid=' + 2;
  397. });
  398. }
  399. // 三号楼
  400. if (child.name == 'sanhaolou') {
  401. const div = document.createElement('div');
  402. div.id = child.uuid;
  403. let html = '';
  404. html += '<div class="building-box" style="width: 50px; top: 73px; left: -23px;">';
  405. html += '<div class="building-text" style="background: #1D96E9;">';
  406. html += '<span>3号楼</span><span style="font-size: 10px;"></span>';
  407. html += '</div>';
  408. html += '<svg width="10" height="10"><polygon id="triangle" points="0,0 10,0 5,10" fill="#1D96E9"/></svg>';
  409. html += '</div>';
  410. html += '<div class="building-line" style="border-left: 1px dashed #1D96E9; height: 100px; top: 90px;"></div>';
  411. div.innerHTML = html;
  412. let tag = new THREE.CSS2DObject(div);
  413. child.add(tag);
  414. }
  415. // 四号楼
  416. if (child.name == 'sihaolou-Chrome') {
  417. const div = document.createElement('div');
  418. div.id = child.uuid;
  419. let html = '';
  420. html += '<div class="building-box">';
  421. html += `<div class="text" style="top: -30px;left: 146px;position: absolute;display: flex;flex-direction: column;align-items: flex-start;color: #1A95EB;">
  422. <span style="font-size: 18px;font-weight: bold;margin-bottom: 5px;">地铁6号线</span>
  423. <span>邱家湾站2B出口</span>
  424. <span>距离:800米</span>
  425. <img src="https://www.cqna.gov.cn/syygapi/naxsb/images/qjtArrow.png" alt="" style="height: 1.75rem;">
  426. </div>`
  427. html += '<div class="building-text">';
  428. html += '<span>4号楼</span><span style="font-size: 10px;">商务打印、小卖部、食堂</span>';
  429. html += '</div>';
  430. html += '<svg width="10" height="10"><polygon id="triangle" points="0,0 10,0 5,10" fill="#18A65A"/></svg>';
  431. html += '</div>';
  432. html += '<div class="building-line"></div>';
  433. div.innerHTML = html;
  434. let tag = new THREE.CSS2DObject(div);
  435. child.add(tag);
  436. }
  437. if (child.name == 'chedao-chedao') {
  438. const div = document.createElement('div');
  439. div.id = child.uuid;
  440. let html = '';
  441. html += '<div style="font-size: 12px; width: 80px; text-align: center;">';
  442. html += '<div class="building-text" style="background: #18A65A; margin-bottom: -2px;">';
  443. html += '<span style="text-align: left;">停车场</span>';
  444. html += '<span style="font-size: 10px; text-align: left;">空余车位:-</span>';
  445. html += '<span style="font-size: 10px; text-align: left;">空余充电桩:-</span>';
  446. html += '</div>';
  447. html += '</div>';
  448. div.innerHTML = html;
  449. let tag = new THREE.CSS2DObject(div);
  450. child.add(tag);
  451. }
  452. }
  453. });
  454. scene.add(obj.scene);
  455. const box = new THREE.Box3().setFromObject(obj.scene);
  456. const center = new THREE.Vector3();
  457. box.getCenter(center);
  458. obj.scene.position.sub(center);
  459. document.getElementById('loading').style.display = 'none';
  460. render();
  461. }, function (xhr) {
  462. }, function (error) {
  463. })
  464. function render() {
  465. css2Renderer.render(scene, camera)
  466. renderer.render(scene, camera);
  467. }
  468. render();
  469. let controls = new THREE.OrbitControls(camera, renderer.domElement);
  470. controls.enableZoom = false
  471. controls.maxPolarAngle = Math.PI / 2
  472. controls.minPolarAngle = 0
  473. controls.addEventListener('change', render);
  474. let axisHelper = new THREE.AxisHelper(50050);
  475. </script>
  476. <script>
  477. new Vue({
  478. el: '#qjt',
  479. data: function () {
  480. return {
  481. currentTime: "",
  482. bjxqList: []
  483. };
  484. },
  485. created() {
  486. this.updateTime();
  487. setInterval(this.updateTime, 1000);
  488. this.getSSbj();
  489. },
  490. beforeDestroy() {
  491. this.stopClock();
  492. },
  493. methods: {
  494. updateTime() {
  495. const now = new Date();
  496. const year = String(now.getFullYear()).padStart(4, '0');
  497. const month = String(now.getMonth() + 1).padStart(2, '0');
  498. const day = String(now.getDate()).padStart(2, '0');
  499. const hours = String(now.getHours()).padStart(2, '0');
  500. const minutes = String(now.getMinutes()).padStart(2, '0');
  501. const seconds = String(now.getSeconds()).padStart(2, '0');
  502. const formattedDateTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
  503. this.currentTime = formattedDateTime;
  504. },
  505. addKeyFrames(y) {
  506. let i = 0
  507. setInterval(function () {
  508. if (i >= y) return i = 0
  509. i++
  510. document.querySelector('.bottom-t').style.marginTop = `-${i}px`
  511. }, 50);
  512. },
  513. getSSbj() {
  514. let that = this;
  515. $.ajax({
  516. url: 'https://data.cqna.gov.cn:8088/kshapi/api/page2/top2',
  517. type: "get",
  518. dataType: "json",
  519. async: false,
  520. success: function (data) {
  521. var data = data.data;
  522. that.bjxqList = data.data;
  523. }
  524. });
  525. var height = document.querySelector('.item') ? document.querySelector('.item').clientHeight - 20 : 0;
  526. if (this.bjxqList.length) {
  527. this.addKeyFrames(height * this.bjxqList.length);
  528. }
  529. }
  530. }
  531. });
  532. </script>
  533. <script>
  534. var chartDom = document.getElementById('pdgdfechart');
  535. var myChart = echarts.init(chartDom);
  536. var option;
  537. option = {
  538. color: ['#80FFA5'],
  539. tooltip: {
  540. trigger: 'axis',
  541. axisPointer: {
  542. type: 'cross',
  543. label: {
  544. backgroundColor: '#6a7985'
  545. }
  546. }
  547. },
  548. grid: {
  549. left: '3%',
  550. right: '4%',
  551. bottom: '3%',
  552. containLabel: true
  553. },
  554. xAxis: [
  555. {
  556. type: 'category',
  557. boundaryGap: false,
  558. data: ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:30'],
  559. axisLabel: {
  560. color: 'rgba(26,149,235,0.5);' // 这里设置刻度字的颜色为蓝色
  561. }
  562. }
  563. ],
  564. yAxis: [
  565. {
  566. type: 'value',
  567. name: '人次',
  568. nameTextStyle: {
  569. color: "#2A6594",
  570. fontSize: '14'
  571. },
  572. axisTick: {
  573. show: true // 显示Y轴刻度线
  574. },
  575. axisLine: {
  576. show: true
  577. },
  578. axisLabel: {
  579. color: 'rgba(26,149,235,0.5);' // 这里设置刻度字的颜色为蓝色
  580. }
  581. }
  582. ],
  583. series: [
  584. {
  585. name: '大厅取号高低峰指数',
  586. type: 'line',
  587. stack: 'Total',
  588. smooth: true,
  589. lineStyle: {
  590. width: 0
  591. },
  592. areaStyle: {
  593. opacity: 0.8,
  594. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  595. {
  596. offset: 0,
  597. color: 'rgb(17 126 202)'
  598. },
  599. {
  600. offset: 1,
  601. color: 'rgb(192 215 231)'
  602. }
  603. ])
  604. },
  605. emphasis: {
  606. focus: 'series'
  607. },
  608. data: [14, 72, 138, 150, 26, 2, 60, 154, 100, 44]
  609. }
  610. ]
  611. };
  612. option && myChart.setOption(option);
  613. </script>
  614. <script>
  615. var path = "https://www.cqna.gov.cn/data";
  616. function handlingNumber(area, timeType) {
  617. var data1 = ''
  618. $.ajax({
  619. url: path + "/department/getOfficeNumberByAreaInfo",
  620. dataType: "json",
  621. type: "get",
  622. cache: false,
  623. async: false,
  624. data: {
  625. "area": area,
  626. "timeType": timeType
  627. },
  628. success: function (data) {
  629. data1 = data.data
  630. },
  631. error: function () {
  632. alert('网络错误,请稍后再试!');
  633. }
  634. });
  635. return data1;
  636. }
  637. function animateValue(obj, start, end, duration) {
  638. let startTimestamp = null;
  639. const step = (timestamp) => {
  640. if (!startTimestamp) startTimestamp = timestamp;
  641. const progress = Math.min((timestamp - startTimestamp) / duration, 1);
  642. obj.innerHTML = Math.floor(progress * (end - start) + start);
  643. if (progress < 1) {
  644. window.requestAnimationFrame(step);
  645. } else {
  646. obj.classList.remove('animate');
  647. }
  648. };
  649. obj.classList.add('animate');
  650. window.requestAnimationFrame(step);
  651. }
  652. const time = 2 * 1000;
  653. let that = this;
  654. function getCurrentPerson() {
  655. $.ajax({
  656. url: conpath + "/qjt/",
  657. type: "get",
  658. dataType: "json",
  659. async: false,
  660. success: function (data) {
  661. const waitTime2 = document.getElementById('waitTime2');
  662. animateValue(waitTime2, 0, data.data[0], time);
  663. const currWaitPeople2 = document.getElementById('currWaitPeople2');
  664. animateValue(currWaitPeople2, 0, data.data[1], time);
  665. }
  666. })
  667. }
  668. getCurrentPerson();
  669. var intervalId = setInterval(getCurrentPerson, 1800000);
  670. function getCurrentItem() {
  671. $.ajax({
  672. url: conpath + "/solveAffairs/",
  673. type: "get",
  674. dataType: "json",
  675. async: false,
  676. success: function (data) {
  677. var data = data.data;
  678. const currDayTaskNumElement = document.getElementById('currDayTaskNum');
  679. animateValue(currDayTaskNumElement, 0, data[0], time);
  680. const currWeekTaskNumElement = document.getElementById('currWeekTaskNum');
  681. animateValue(currWeekTaskNumElement, 0, data[1], time);
  682. const currMonthTaskNumElement = document.getElementById('currMonthTaskNum');
  683. animateValue(currMonthTaskNumElement, 0, data[2], time);
  684. const currYearTaskNumElement = document.getElementById('currYearTaskNum');
  685. animateValue(currYearTaskNumElement, 0, data[3], time);
  686. }
  687. })
  688. }
  689. getCurrentItem();
  690. var intervalId1 = setInterval(getCurrentItem, 300000);
  691. window.addEventListener('beforeunload', function () {
  692. clearInterval(intervalId);
  693. clearInterval(intervalId1);
  694. });
  695. const taskNumElement2 = document.getElementById('taskNum2');
  696. animateValue(taskNumElement2, 0, 798, time);
  697. const winNumElement2 = document.getElementById('winNum2');
  698. animateValue(winNumElement2, 0, 78, time);
  699. </script>
  700. </html>