index.html 6.4 KB

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