index.html 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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
  9. rel="stylesheet"
  10. href="https://minedata.cn/minemapapi/v2.1.0/minemap.css"
  11. />
  12. <script src="https://minedata.cn/minemapapi/v2.1.0/minemap.js"></script>
  13. <script src="../webClient/defaultConfig.js"></script>
  14. <script src="../webClient/initWebSocket.js"></script>
  15. <script src="../webClient/webClient_initWnd.js"></script>
  16. <script>
  17. minemap.domainUrl = 'https://minedata.cn';
  18. minemap.dataDomainUrl = 'https://minedata.cn';
  19. minemap.serverDomainUrl = 'https://minedata.cn';
  20. minemap.spriteUrl = 'https://minedata.cn/minemapapi/v2.1.0/sprite/sprite';
  21. minemap.serviceUrl = 'https://minedata.cn/service/';
  22. /**
  23. * key、solution设置
  24. */
  25. minemap.key = '77ef70465c2d4888b3a5132523494b94';
  26. minemap.solution = 16857;
  27. </script>
  28. <script>
  29. (function (win, lib) {
  30. var doc = win.document;
  31. var docEl = doc.documentElement;
  32. var metaEl = doc.querySelector('meta[name="viewport"]');
  33. var flexibleEl = doc.querySelector('meta[name="flexible"]');
  34. var dpr = 0;
  35. var scale = 0;
  36. var tid;
  37. var flexible = lib.flexible || (lib.flexible = {});
  38. if (metaEl) {
  39. console.warn('将根据已有的meta标签来设置缩放比例');
  40. var match = metaEl
  41. .getAttribute('content')
  42. .match(/initial\-scale=([\d\.]+)/);
  43. if (match) {
  44. scale = parseFloat(match[1]);
  45. dpr = parseInt(1 / scale);
  46. }
  47. } else if (flexibleEl) {
  48. var content = flexibleEl.getAttribute('content');
  49. if (content) {
  50. var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
  51. var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
  52. if (initialDpr) {
  53. dpr = parseFloat(initialDpr[1]);
  54. scale = parseFloat((1 / dpr).toFixed(2));
  55. }
  56. if (maximumDpr) {
  57. dpr = parseFloat(maximumDpr[1]);
  58. scale = parseFloat((1 / dpr).toFixed(2));
  59. }
  60. }
  61. }
  62. if (!dpr && !scale) {
  63. var isAndroid = win.navigator.appVersion.match(/android/gi);
  64. var isIPhone = win.navigator.appVersion.match(/iphone/gi);
  65. var devicePixelRatio = win.devicePixelRatio;
  66. if (isIPhone) {
  67. // iOS下,对于2和3的屏,用2倍的方案,其余的用1倍方案
  68. if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
  69. dpr = 3;
  70. } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
  71. dpr = 2;
  72. } else {
  73. dpr = 1;
  74. }
  75. } else {
  76. // 其他设备下,仍旧使用1倍的方案
  77. dpr = 1;
  78. }
  79. scale = 1 / dpr;
  80. }
  81. docEl.setAttribute('data-dpr', dpr);
  82. if (!metaEl) {
  83. metaEl = doc.createElement('meta');
  84. metaEl.setAttribute('name', 'viewport');
  85. metaEl.setAttribute(
  86. 'content',
  87. 'initial-scale=' +
  88. scale +
  89. ', maximum-scale=' +
  90. scale +
  91. ', minimum-scale=' +
  92. scale +
  93. ', user-scalable=no',
  94. );
  95. if (docEl.firstElementChild) {
  96. docEl.firstElementChild.appendChild(metaEl);
  97. } else {
  98. var wrap = doc.createElement('div');
  99. wrap.appendChild(metaEl);
  100. doc.write(wrap.innerHTML);
  101. }
  102. }
  103. function refreshRem() {
  104. var width = docEl.getBoundingClientRect().width;
  105. if (width / dpr > 5760) {
  106. width = 5760 * dpr;
  107. }
  108. var rem = width / 10;
  109. docEl.style.fontSize = rem + 'px';
  110. flexible.rem = win.rem = rem;
  111. }
  112. win.addEventListener(
  113. 'resize',
  114. function () {
  115. clearTimeout(tid);
  116. tid = setTimeout(refreshRem, 300);
  117. },
  118. false,
  119. );
  120. win.addEventListener(
  121. 'pageshow',
  122. function (e) {
  123. if (e.persisted) {
  124. clearTimeout(tid);
  125. tid = setTimeout(refreshRem, 300);
  126. }
  127. },
  128. false,
  129. );
  130. if (doc.readyState === 'complete') {
  131. doc.body.style.fontSize = 12 * dpr + 'px';
  132. } else {
  133. doc.addEventListener(
  134. 'DOMContentLoaded',
  135. function (e) {
  136. doc.body.style.fontSize = 12 * dpr + 'px';
  137. },
  138. false,
  139. );
  140. }
  141. refreshRem();
  142. flexible.dpr = win.dpr = dpr;
  143. flexible.refreshRem = refreshRem;
  144. flexible.rem2px = function (d) {
  145. var val = parseFloat(d) * this.rem;
  146. if (typeof d === 'string' && d.match(/rem$/)) {
  147. val += 'px';
  148. }
  149. return val;
  150. };
  151. flexible.px2rem = function (d) {
  152. var val = parseFloat(d) / this.rem;
  153. if (typeof d === 'string' && d.match(/px$/)) {
  154. val += 'rem';
  155. }
  156. return val;
  157. };
  158. })(window, window['lib'] || (window['lib'] = {}));
  159. </script>
  160. </head>
  161. <body>
  162. <div id="app"></div>
  163. <script type="module" src="/src/main.ts"></script>
  164. </body>
  165. </html>