index.html 7.1 KB

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