index.html 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215
  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="<%- mapurl %>/minemapapi/v2.1.0/minemap.css">
  13. <script src="<%- mapurl %>/minemapapi/v2.1.0/minemap.js"></script>
  14. <script>
  15. minemap.domainUrl = '<%- mapurl %>';
  16. minemap.dataDomainUrl = '<%- mapurl %>';
  17. minemap.serverDomainUrl = '<%- mapurl %>';
  18. minemap.spriteUrl = '<%- mapurl %>/minemapapi/v2.1.0/sprite/sprite';
  19. minemap.serviceUrl = '<%- mapurl %>/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. var index = 0;
  113. function refreshRem() {
  114. var docEl = doc.documentElement;
  115. var width = docEl.getBoundingClientRect().width;
  116. if (width / dpr > 5760) {
  117. width = 5760 * dpr;
  118. }
  119. var rem = width / 10;
  120. docEl.style.fontSize = rem + 'px';
  121. flexible.rem = win.rem = rem;
  122. var isMac = (navigator.platform == "Mac68K") || (navigator.platform == "MacPPC") || (navigator.platform == "Macintosh") || (navigator.platform == "MacIntel");
  123. var t = window.devicePixelRatio // 获取下载的缩放 125% -> 1.25 150% -> 1.5
  124. console.log(t)
  125. if (t != 1 && !isMac) { // 如果进行了缩放,也就是不是1
  126. setTimeout(() => {
  127. document.body.style.zoom = -0.6 * t + 1.55; // 就去修改页面的缩放比例,这个公式我自己算的,不准确,勉强。
  128. }, 3 * 1000)
  129. } else {
  130. document.body.style.zoom = "normal";
  131. }
  132. }
  133. // window.onresize = () => {
  134. // // refreshRem()
  135. // }
  136. win.addEventListener(
  137. 'resize',
  138. function() {
  139. // debugger
  140. clearTimeout(tid);
  141. tid = setTimeout(refreshRem, 300);
  142. },
  143. false,
  144. );
  145. win.addEventListener(
  146. 'pageshow',
  147. function(e) {
  148. if (e.persisted) {
  149. clearTimeout(tid);
  150. tid = setTimeout(refreshRem, 300);
  151. }
  152. },
  153. false,
  154. );
  155. if (doc.readyState === 'complete') {
  156. doc.body.style.fontSize = 12 * dpr + 'px';
  157. } else {
  158. doc.addEventListener(
  159. 'DOMContentLoaded',
  160. function(e) {
  161. doc.body.style.fontSize = 12 * dpr + 'px';
  162. },
  163. false,
  164. );
  165. }
  166. refreshRem();
  167. flexible.dpr = win.dpr = dpr;
  168. flexible.refreshRem = refreshRem;
  169. flexible.rem2px = function(d) {
  170. var val = parseFloat(d) * this.rem;
  171. if (typeof d === 'string' && d.match(/rem$/)) {
  172. val += 'px';
  173. }
  174. return val;
  175. };
  176. flexible.px2rem = function(d) {
  177. var val = parseFloat(d) / this.rem;
  178. if (typeof d === 'string' && d.match(/px$/)) {
  179. val += 'rem';
  180. }
  181. return val;
  182. };
  183. })(window, window['lib'] || (window['lib'] = {}));
  184. </script>
  185. </head>
  186. <body style="position: fixed;background-color: #112692;
  187. width: 100%;
  188. height: 100%;">
  189. <div id="app" style="height: 100%;"></div>
  190. <script type="module" src="/src/main.ts"></script>
  191. </body>
  192. </html>