index.html 5.5 KB

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