indexMobile.html 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>数据中心-重庆市南岸区人民政府网</title>
  8. <link rel="stylesheet" href="css/conmon.css">
  9. <link rel="stylesheet" href="css/indexMbile.css">
  10. <style>
  11. html {
  12. overflow-y: scroll;
  13. }
  14. :root {
  15. overflow-y: auto;
  16. overflow-x: hidden;
  17. }
  18. :root body {
  19. position: absolute;
  20. }
  21. body {
  22. width: 100vw;
  23. overflow: hidden;
  24. }
  25. #whlyEchar {
  26. width: 100vw;
  27. height: 510px;
  28. }
  29. #shjzEchar {
  30. width: 100vw;
  31. height: 710px;
  32. }
  33. #jylyPerEchar,
  34. #jylySchoolEchar {
  35. width: 100vw;
  36. height: 500px;
  37. }
  38. #wsylchar {
  39. width: 100vw;
  40. height: 710px;
  41. }
  42. #other1,
  43. #other2 {
  44. width: 99vw;
  45. height: 500px;
  46. border: 1px solid #ccc;
  47. border-top: none;
  48. }
  49. #ylryEchar {
  50. width: 100vw;
  51. height: 710px;
  52. margin: auto;
  53. }
  54. #zlrsEchar {
  55. width: 100vw;
  56. height: 710px;
  57. margin: auto;
  58. }
  59. </style>
  60. </head>
  61. <body>
  62. <div style="width:100%;height:280px" id="header"></div>
  63. <div class="main">
  64. <div class="menu" id="menu">
  65. <ul class="tabs">
  66. <li data-name="shbz" style="margin-top: -4px;">
  67. <div class="list">
  68. <img src="images/menu_shbz.png" alt="" style="width: 22px;height: 21px;"
  69. data-name="shbz"><span>社会保障</span>
  70. </div>
  71. </li>
  72. <li data-name="whlx">
  73. <div class="list"><img src="images/menu_whlx.png" alt="" style="width: 17px;height: 21px;"
  74. data-name="whlx"><span>文化旅游</span>
  75. </div>
  76. </li>
  77. <li data-name="wsyl">
  78. <div class="list"><img src="images/menu_wsyl.png" alt="" style="width: 25px;height: 24px;"
  79. data-name="wsyl"><span>卫生医疗</span>
  80. </div>
  81. </li>
  82. <li data-name="shjz">
  83. <div class="list"><img src="images/menu_shjz.png" alt="" style="width: 26px;height: 22px;"
  84. data-name="shjz"><span>社会救助</span>
  85. </div>
  86. </li>
  87. <li data-name="jyly">
  88. <div class="list"><img src="images/menu_jyly.png" alt="" style="width: 34px;height: 28px;"
  89. data-name="jyly"><span>教育领域</span>
  90. </div>
  91. </li>
  92. </ul>
  93. </div>
  94. <div class="content">
  95. <div class="items div-shbz" style="display: none;">
  96. <div class="year" style="position: relative;">
  97. <span>年份:</span>
  98. <select id="year">
  99. <option value="2021">2021年</option>
  100. <option value="2022">2022年</option>
  101. </select>
  102. <img src="images/arrow.png" alt="" style="position: absolute;right: 10px;">
  103. </div>
  104. <ul class="itemData">
  105. <li>
  106. <img src="images/content_icon_one.png" alt="">
  107. <div class="right">
  108. <div>城镇新增就业人数</div>
  109. <div class="bottom">
  110. <div class="number">3.8</div>
  111. <div class="unit">万人</div>
  112. </div>
  113. </div>
  114. </li>
  115. <li>
  116. <img src="images/content_icon_two.png" alt="">
  117. <div class="right">
  118. <div>城镇登记失业人员就业人数</div>
  119. <div class="bottom">
  120. <div class="number">0.93</div>
  121. <div class="unit">万人</div>
  122. </div>
  123. </div>
  124. </li>
  125. <li>
  126. <img src="images/content_icon_three.png" alt="">
  127. <div class="right">
  128. <div>城镇登记失业率</div>
  129. <div class="bottom">
  130. <div class="number">-</div>
  131. <div class="unit">%</div>
  132. </div>
  133. </div>
  134. </li>
  135. <li>
  136. <img src="images/content_icon_four.png" alt="">
  137. <div class="right">
  138. <div>创业贷款发放金额</div>
  139. <div class="bottom">
  140. <div class="number">2466</div>
  141. <div class="unit">万元</div>
  142. </div>
  143. </div>
  144. </li>
  145. <li>
  146. <img src="images/content_icon_five.png" alt="">
  147. <div class="right">
  148. <div>参加职业技能鉴定</div>
  149. <div class="bottom">
  150. <div class="number">7489</div>
  151. <div class="unit">人</div>
  152. </div>
  153. </div>
  154. </li>
  155. <li>
  156. <img src="images/content_icon_six.png" alt="">
  157. <div class="right">
  158. <div>补贴性职业培训人数</div>
  159. <div class="bottom">
  160. <div class="number">0.74</div>
  161. <div class="unit">万人</div>
  162. </div>
  163. </div>
  164. </li>
  165. </ul>
  166. <div class="shbzTablem">
  167. <div style="text-align: center;width:100%;font-size: 20px;color: #333333;margin: 20px auto;">劳动争议案件
  168. </div>
  169. <ul class="title">
  170. <li style="width: 121px;">年份</li>
  171. <li><span>纠纷总数</span><span>(件)</span></li>
  172. <li><span>涉及人数</span><span>(个)</span></li>
  173. </ul>
  174. <ul class="number">
  175. <li>2022</li>
  176. <li>4246</li>
  177. <li>4300</li>
  178. </ul>
  179. <div class="title">
  180. <li style="width: 121px;"><span>结案数量</span><span>(件)</span></li>
  181. <li><span>仲裁裁决</span><span>(件)</span></li>
  182. <li><span>结案率</span><span>(%)</span></li>
  183. </div>
  184. <div class="number">
  185. <li>3697</li>
  186. <li>318</li>
  187. <li>87</li>
  188. </div>
  189. </div>
  190. </div>
  191. <div class="items div-whwl" style="display: none;">
  192. <div class="range">
  193. <button class="thisMonth click" style="border-radius: 4px 0px 0px 4px;border-right: none;"
  194. onlick="thisMonth()">本月</button>
  195. <button class="cumulat" style="border-radius: 0px 4px 4px 0px;border-left: none;">累计</button>
  196. </div>
  197. <div class="wsylTable">
  198. <ul class="title">
  199. <li style="width: 100px;">范围</li>
  200. <li><span>旅游总收入</span><span>(万元)</span></li>
  201. <li><span>旅游从业人数</span><span>(人)</span></li>
  202. </ul>
  203. <ul class="number">
  204. <li style="width: 100px;">当月</li>
  205. <li>322450</li>
  206. <li>31012</li>
  207. </ul>
  208. </div>
  209. <div style="overflow-x: scroll;">
  210. <div id="whlyEchar"></div>
  211. </div>
  212. </div>
  213. <div class="items div-wsyl" style="display: none;">
  214. <!-- <div class="cont" style="left: 58px;bottom: 146px;">
  215. <div class="detail" style="background-image: url(images/bg-1.png);">
  216. <ul class="list ylfirst">
  217. <li><span>医疗卫生机构数:</span><span>628</span></li>
  218. <li><span>医院:</span><span>46</span></li>
  219. <li><span>卫生院:</span><span>7</span></li>
  220. <li><span>社区卫生服务中心(站):</span><span>46</span></li>
  221. <li><span>疾控中心:</span><span>1</span></li>
  222. <li><span>妇幼保健院:</span><span>1</span></li>
  223. <li><span>医疗卫生机构床位数:</span><span>17208</span></li>
  224. <li><span>医院、卫生院床位数:</span><span>7178</span></li>
  225. <li><span>保健院床位数:</span><span>30</span></li>
  226. <li><span>每千人口医院、卫生院床位数:</span><span>5.66</span></li>
  227. </ul>
  228. </div>
  229. <img src="images/content_tipone.png" alt="">
  230. </div>
  231. <div class="cont" style="left: 478px;bottom: 154px;">
  232. <div class="detail" style="background-image: url(images/bg-2.png);">
  233. <ul class="list ylsecond">
  234. <li><span>卫生技术人员(人):</span><span>10856</span></li>
  235. <li><span>执业(助理)医师(人):</span><span>4267</span></li>
  236. <li><span>注册护士(人):</span><span>6589</span></li>
  237. <li><span>每千人口执业(助理)医师(人):</span><span>3.36</span></li>
  238. <li><span>每千人口注册护士(人):</span><span>5.19</span></li>
  239. </ul>
  240. </div>
  241. <img src="images/content_tiptwo.png" alt="">
  242. </div>
  243. <div class="cont" style="left: 894px;bottom: 270px;">
  244. <div class="detail" style="background-image: url(images/bg-3.png);">
  245. <ul class="list ylthird">
  246. <li><span>总诊疗人次(万人次):</span><span>288.2</span></li>
  247. <li><span>门急诊人次(人次):</span><span>280.0</span></li>
  248. <li><span>入院人次(万人次):</span><span>11.3</span></li>
  249. <li><span>出院人次(万人次):</span><span>11.3</span></li>
  250. </ul>
  251. </div>
  252. <img src="images/content_tipthree.png" alt="">
  253. </div> -->
  254. <ul class="title">
  255. <li class="list select" data-type="1" id="zdsh">医疗机构、床位数</li>
  256. <li class="list" data-type="2">医疗卫生人员</li>
  257. <li class="list" data-type="3">诊疗人数</li>
  258. </ul>
  259. <div class="yljgcws">
  260. <div class="left">
  261. <div id="wsylchar"></div>
  262. </div>
  263. <div class="right">
  264. <div>
  265. <div class="title">2021</div>
  266. <div id="other1"></div>
  267. </div>
  268. <div>
  269. <div class="title">2022</div>
  270. <div id="other2"></div>
  271. </div>
  272. </div>
  273. </div>
  274. <div class="ylry" id="ylryEchar"></div>
  275. <div class="zlrs" id="zlrsEchar"></div>
  276. </div>
  277. <div class="items div-shjz" style="display: none;">
  278. <ul class="title">
  279. <li class="list select" id="zdsh" data-type="1">最低生活保障数据</li>
  280. <li class="list" data-type="2">特困人员救助供养数据</li>
  281. <li class="list" data-type="3">临时救助数据</li>
  282. </ul>
  283. <div id="shjzEchar"></div>
  284. </div>
  285. <div class="items div-jyly" style="display: none;">
  286. <div class="year" style="position: relative;">
  287. <span>年份:</span>
  288. <select id="yearl">
  289. <option value="2019">2019年</option>
  290. <option value="2020">2020年</option>
  291. <option value="2021">2021年</option>
  292. </select>
  293. <img src="images/arrow.png" alt="" style="position: absolute;right: 10px;">
  294. </div>
  295. <div class="title">学生人数与学校数统计</div>
  296. <div id="jylyPerEchar"></div>
  297. <div id="jylySchoolEchar"></div>
  298. <div class="other">
  299. <div class="title">学前教育其他数据</div>
  300. <ul class="itemData">
  301. </ul>
  302. </div>
  303. <div class="jylyTable" id="jylyTableM">
  304. </div>
  305. </div>
  306. </div>
  307. </div>
  308. </div>
  309. <div style="width:100%;" id="footer"></div>
  310. </body>
  311. <script src="js/jquery-3.5.1.min.js"></script>
  312. <script src="js/echarts.min.js"></script>
  313. <!-- 社会保障数据js -->
  314. <script src="js/socialSecurity.js"></script>
  315. <!-- 社会救助数据js -->
  316. <script src="js/socialAssistanceMobile.js"></script>
  317. <!-- 文化文旅数据js -->
  318. <script src="js/culturalTourismMobile.js"></script>
  319. <!-- 卫生医疗数据js -->
  320. <script src="js/healthCareNewMobile.js"></script>
  321. <!-- 教育领域数据js -->
  322. <script src="js/education.js"></script>
  323. <script>
  324. // 判断进入的参数值
  325. function GetQueryString(name) {
  326. var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
  327. var r = window.location.search.substr(1).match(reg);
  328. if (r != null) return unescape(r[2]); return null;
  329. }
  330. var type = GetQueryString("id");
  331. var tapsIndex = "";
  332. if (type == 1) {
  333. tapsIndex = 0;
  334. socialSecurity();
  335. } else if (type == 2) {
  336. tapsIndex = 1;
  337. culturalTourism();
  338. }
  339. else if (type == 3) {
  340. tapsIndex = 2;
  341. healthCareNew();
  342. }
  343. else if (type == 4) {
  344. tapsIndex = 3;
  345. socialAssistance();
  346. }
  347. else if (type == 5) {
  348. tapsIndex = 4;
  349. education();
  350. document.getElementById('menu').scrollLeft = 300;
  351. }
  352. var tapsContItem = $('.content .items');
  353. var tabsArrow = $('.menu .tabs .arrow');
  354. var tabsImg = $('.menu .tabs img');
  355. var tapsTitleLi = $('.menu .tabs li');
  356. tapsTitleLi.each(function (index) {
  357. if (tapsIndex == index) {
  358. $(this).addClass('click');
  359. } else {
  360. $(this).removeClass('click');
  361. }
  362. });
  363. tapsContItem.each(function (index) {
  364. if (tapsIndex == index) {
  365. $(this).show();
  366. } else {
  367. $(this).hide();
  368. }
  369. })
  370. tabsArrow.each(function (index) {
  371. if (tapsIndex == index) {
  372. $(this).css('visibility', 'inherit');
  373. } else {
  374. $(this).css('visibility', 'hidden');
  375. }
  376. })
  377. tabsImg.each(function (index) {
  378. var name = $(this).data('name');
  379. if (tapsIndex == index) {
  380. $(this).attr('src', 'images/menu_' + name + 'p.png');
  381. } else {
  382. $(this).attr('src', 'images/menu_' + name + '.png');
  383. }
  384. })
  385. </script>
  386. <script>
  387. $(function () {
  388. // 导航栏切换
  389. var tapsIndex = 0;
  390. $('.menu .tabs').on('click', 'li', function () {
  391. var tapsContItem = $('.content .items');
  392. var tapsTitleLi = $('.menu .tabs li');
  393. var tabsImg = $('.menu .tabs img');
  394. var tabsArrow = $('.menu .tabs .arrow');
  395. tapsTitleLi.removeClass('click');
  396. $(this).addClass('click');
  397. tapsTitleLi.each(function (index) {
  398. var classStr = $(this).attr('class');
  399. if (classStr && classStr.indexOf('click') != -1) {
  400. tapsIndex = index;
  401. if (index == 0) {
  402. socialSecurity();
  403. } else if (index == 1) {
  404. culturalTourism();
  405. } else if (index == 2) {
  406. healthCareNew();
  407. } else if (index == 3) {
  408. socialAssistance();
  409. } else if (index == 4) {
  410. education();
  411. }
  412. }
  413. });
  414. tapsContItem.each(function (index) {
  415. if (tapsIndex == index) {
  416. $(this).show();
  417. } else {
  418. $(this).hide();
  419. }
  420. })
  421. tabsArrow.each(function (index) {
  422. if (tapsIndex == index) {
  423. $(this).css('visibility', 'inherit');
  424. } else {
  425. $(this).css('visibility', 'hidden');
  426. }
  427. })
  428. tabsImg.each(function (index) {
  429. var name = $(this).data('name');
  430. if (tapsIndex == index) {
  431. $(this).attr('src', 'images/menu_' + name + 'p.png');
  432. } else {
  433. $(this).attr('src', 'images/menu_' + name + '.png');
  434. }
  435. })
  436. });
  437. });
  438. //社会救助菜单导航
  439. $('.div-shjz .title').on('click', 'li', function () {
  440. var tapsTitleLi = $('.div-shjz .title li');
  441. tapsTitleLi.removeClass('select');
  442. $(this).addClass('select');
  443. })
  444. //卫生医疗菜单导航
  445. $('.div-wsyl .title').on('click', 'li', function () {
  446. var tapsTitleLi = $('.div-wsyl .title li');
  447. tapsTitleLi.removeClass('select');
  448. $(this).addClass('select');
  449. })
  450. </script>
  451. <script>
  452. setHeader()
  453. setFooter()
  454. function setHeader() {
  455. $("#header").load("https://www.cqna.gov.cn/ggbf_search/ggyr/2022top/head.html")
  456. }
  457. function setFooter() {
  458. $("#footer").load("https://www.cqna.gov.cn/ggbf_search/ggyr/2022foot/foot.html")
  459. }
  460. </script>
  461. </html>