简柏林 / thingskit-scada · Commits

Commit 84ebe1b5db0638cb305122c0be51c1a4b0d1ad0e

Authored by ww
1 parent 8e8125a5

perf: index add loading

Inline Side-by-side
Showing 1 changed file with 303 additions and 166 deletions
... ... @@ -2,61 +2,62 @@
2 2 <meta http-equiv="X-UA-Compatible" content="IE=5"><![endif]-->
3 3 <!DOCTYPE html>
4 4 <html>
  5 +
5 6 <head>
6   - <!-- <title>Flowchart Maker &amp; Online Diagram Software</title>-->
7   - <title>thingskit 云组态</title>
8   - <meta charset="utf-8">
9   - <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
10   - <meta name="Description"
11   - content="diagrams.net is free online diagram software for making flowcharts, process diagrams, org charts, UML, ER and network diagrams">
12   - <meta name="Keywords" content="diagram, online, flow chart, flowchart maker, uml, erd">
13   - <meta itemprop="name" content="diagrams.net - free flowchart maker and diagrams online">
14   - <meta itemprop="description" content="diagrams.net is a free online diagramming application and flowchart maker . You can use it to create UML, entity relationship,
  7 + <!-- <title>Flowchart Maker &amp; Online Diagram Software</title>-->
  8 + <title>thingskit 云组态</title>
  9 + <meta charset="utf-8">
  10 + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  11 + <meta name="Description"
  12 + content="diagrams.net is free online diagram software for making flowcharts, process diagrams, org charts, UML, ER and network diagrams">
  13 + <meta name="Keywords" content="diagram, online, flow chart, flowchart maker, uml, erd">
  14 + <meta itemprop="name" content="diagrams.net - free flowchart maker and diagrams online">
  15 + <meta itemprop="description" content="diagrams.net is a free online diagramming application and flowchart maker . You can use it to create UML, entity relationship,
15 16 org charts, BPMN and BPM, database schema and networks. Also possible are telecommunication network, workflow, flowcharts, maps overlays and GIS, electronic
16 17 circuit and social network diagrams.">
17   - <meta itemprop="image"
18   - content="https://lh4.googleusercontent.com/-cLKEldMbT_E/Tx8qXDuw6eI/AAAAAAAAAAs/Ke0pnlk8Gpg/w500-h344-k/BPMN%2Bdiagram%2Brc2f.png">
19   - <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
20   - <meta name="msapplication-config" content="images/browserconfig.xml">
21   - <meta name="mobile-web-app-capable" content="yes">
22   - <meta name="theme-color" content="#d89000">
23   - <!-- crypto-js -->
24   - <script src="./js/plugin/crypto-js/crypto-js.js"></script>
25   - <!-- 持续话存储 -->
26   - <script src="./js/const/persistentStorage.js"></script>
27   - <!-- 全局变量 -->
28   - <script src="./js/const/const.js"></script>
29   - <!-- echarts -->
30   - <script src="./js/plugin/echarts/echarts.js"></script>
31   -
32   - <script src="./plugins/axios.min.js"></script>
33   - <!-- <script src="./js/jquery/jquery-3.3.1.min.js"></script>-->
34   - <link rel="stylesheet" href="https://cdnjs.loli.net/ajax/libs/layui/2.6.8/css/layui.min.css"
35   - integrity="sha512-iQBJbsNHXUcgEIgWThd2dr8tOdKPvICwqjPEZYY81z3eMya44A5MiAqfWSCh+Ee1YzNYkdrI982Qhwgr8LEYOQ=="
36   - crossorigin="anonymous" referrerpolicy="no-referrer"/>
37   - <script src="https://cdnjs.loli.net/ajax/libs/layui/2.6.8/layui.min.js"
38   - integrity="sha512-EKrFvch3qTzLFQgjbcjpsRmF8T3UCtc9ojtMAu6dvvP+bV8qYUDOaQ84nwYCkSLT7lbqGoya/Kf+8fyCBE0vRg=="
39   - crossorigin="anonymous" referrerpolicy="no-referrer"></script>
40   -
41   - <!-- 引入修改样式 -->
42   - <link rel="stylesheet" href="./styles/formatChange.css">
43   -
44   - <!-- 引入select.zTree及相关依赖 -->
45   - <!-- <link rel="stylesheet" href="./styles/zTreeStyle.css" type="text/css">-->
46   - <!-- <link rel="stylesheet" href="./styles/jquery.select.zTree.v1.5.css" type="text/css">-->
47   - <!-- <script type="text/javascript" src="./js/jquery.ztree.core.min.js"></script>-->
48   - <!-- <script type="text/javascript" src="./js/jquery.ztree.exhide.min.js"></script>-->
49   - <!-- <script type="text/javascript" src="./js/jquery.select.zTree.v1.5.min.js"></script>-->
50   -
51   - <!-- Axios -->
52   - <script src="./plugins/DefHttp.js"></script>
53   -
54   - <script src="./js/api/index.js"></script>
55   -
56   - <!-- act editor -->
57   - <script src="./js/plugin/ace/ace.js"></script>
58   -
59   - <script type="text/javascript">
  18 + <meta itemprop="image"
  19 + content="https://lh4.googleusercontent.com/-cLKEldMbT_E/Tx8qXDuw6eI/AAAAAAAAAAs/Ke0pnlk8Gpg/w500-h344-k/BPMN%2Bdiagram%2Brc2f.png">
  20 + <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  21 + <meta name="msapplication-config" content="images/browserconfig.xml">
  22 + <meta name="mobile-web-app-capable" content="yes">
  23 + <meta name="theme-color" content="#d89000">
  24 + <!-- crypto-js -->
  25 + <script src="./js/plugin/crypto-js/crypto-js.js"></script>
  26 + <!-- 持续话存储 -->
  27 + <script src="./js/const/persistentStorage.js"></script>
  28 + <!-- 全局变量 -->
  29 + <script src="./js/const/const.js"></script>
  30 + <!-- echarts -->
  31 + <script src="./js/plugin/echarts/echarts.js"></script>
  32 +
  33 + <script src="./plugins/axios.min.js"></script>
  34 + <!-- <script src="./js/jquery/jquery-3.3.1.min.js"></script>-->
  35 + <link rel="stylesheet" href="https://cdnjs.loli.net/ajax/libs/layui/2.6.8/css/layui.min.css"
  36 + integrity="sha512-iQBJbsNHXUcgEIgWThd2dr8tOdKPvICwqjPEZYY81z3eMya44A5MiAqfWSCh+Ee1YzNYkdrI982Qhwgr8LEYOQ=="
  37 + crossorigin="anonymous" referrerpolicy="no-referrer" />
  38 + <script src="https://cdnjs.loli.net/ajax/libs/layui/2.6.8/layui.min.js"
  39 + integrity="sha512-EKrFvch3qTzLFQgjbcjpsRmF8T3UCtc9ojtMAu6dvvP+bV8qYUDOaQ84nwYCkSLT7lbqGoya/Kf+8fyCBE0vRg=="
  40 + crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  41 +
  42 + <!-- 引入修改样式 -->
  43 + <link rel="stylesheet" href="./styles/formatChange.css">
  44 +
  45 + <!-- 引入select.zTree及相关依赖 -->
  46 + <!-- <link rel="stylesheet" href="./styles/zTreeStyle.css" type="text/css">-->
  47 + <!-- <link rel="stylesheet" href="./styles/jquery.select.zTree.v1.5.css" type="text/css">-->
  48 + <!-- <script type="text/javascript" src="./js/jquery.ztree.core.min.js"></script>-->
  49 + <!-- <script type="text/javascript" src="./js/jquery.ztree.exhide.min.js"></script>-->
  50 + <!-- <script type="text/javascript" src="./js/jquery.select.zTree.v1.5.min.js"></script>-->
  51 +
  52 + <!-- Axios -->
  53 + <script src="./plugins/DefHttp.js"></script>
  54 +
  55 + <script src="./js/api/index.js"></script>
  56 +
  57 + <!-- act editor -->
  58 + <script src="./js/plugin/ace/ace.js"></script>
  59 +
  60 + <script type="text/javascript">
60 61 /**
61 62 * URL Parameters and protocol description are here:
62 63 *
... ... @@ -263,9 +264,9 @@
263 264 mxForceIncludes = true;
264 265 }
265 266 if (location.hostname == 'localhost' || location.hostname == '127.0.0.1' || location.hostname == '192.168.10.111') {
266   - drawDevUrl = `http://${ location.hostname }:3000/`;
267   - geBasePath = `http://${ location.hostname }:3000/js/grapheditor`;
268   - mxBasePath = `http://${ location.hostname }:3000/mxgraph`;
  267 + drawDevUrl = `http://${location.hostname}:3000/`;
  268 + geBasePath = `http://${location.hostname}:3000/js/grapheditor`;
  269 + mxBasePath = `http://${location.hostname}:3000/mxgraph`;
269 270 mxForceIncludes = true;
270 271 }
271 272 mxForceIncludes = false;
... ... @@ -335,90 +336,91 @@
335 336 status.innerHTML = 'Page could not be loaded. Please try refreshing.';
336 337 }
337 338 };
338   - </script>
339   - <link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/plgmlhohecdddhbmmkncjdmlhcmaachm">
340   - <link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png">
341   - <!-- <link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">-->
342   - <link rel="icon" type="image/png" sizes="32x32" href="images/logo-32x32.png">
343   - <link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
344   - <!-- <link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">-->
345   - <link rel="mask-icon" href="images/safari-pinned-tab.svg" color="#d89000">
346   - <link rel="stylesheet" type="text/css" href="styles/grapheditor.css">
347   - <link rel="preconnect" href="https://storage.googleapis.com">
348   - <link rel="canonical" href="https://app.diagrams.net">
349   - <link rel="manifest" href="images/manifest.json">
350   - <!-- <link rel="shortcut icon" href="favicon.ico">-->
351   - <link rel="shortcut icon" href="images/logo-16x16.ico">
352   - <style type="text/css">
353   - body {
354   - overflow: hidden;
355   - }
356   -
357   - div.picker {
358   - z-index: 10007;
359   - }
360   -
361   - .geSidebarContainer .geTitle input {
362   - font-size: 8pt;
363   - color: #606060;
364   - }
365   -
366   - .geBlock {
367   - z-index: -3;
368   - margin: 100px;
369   - margin-top: 40px;
370   - margin-bottom: 30px;
371   - padding: 20px;
372   - text-align: center;
373   - min-width: 50%;
374   - }
375   -
376   - .geBlock h1, .geBlock h2 {
377   - margin-top: 0px;
378   - padding-top: 0px;
379   - }
380   -
381   - .geEditor *:not(.geScrollable)::-webkit-scrollbar {
382   - width: 14px;
383   - height: 14px;
384   - }
385   -
386   - .geEditor ::-webkit-scrollbar-track {
387   - background-clip: padding-box;
388   - border: solid transparent;
389   - border-width: 1px;
390   - }
391   -
392   - .geEditor ::-webkit-scrollbar-corner {
393   - background-color: transparent;
394   - }
395   -
396   - .geEditor ::-webkit-scrollbar-thumb {
397   - background-color: rgba(0, 0, 0, .1);
398   - background-clip: padding-box;
399   - border: solid transparent;
400   - border-radius: 10px;
401   - }
402   -
403   - .geEditor ::-webkit-scrollbar-thumb:hover {
404   - background-color: rgba(0, 0, 0, .4);
405   - }
406   -
407   - .geTemplate {
408   - border: 1px solid transparent;
409   - display: inline-block;
410   - _display: inline;
411   - vertical-align: top;
412   - border-radius: 3px;
413   - overflow: hidden;
414   - font-size: 14pt;
415   - cursor: pointer;
416   - margin: 5px;
417   - }
418   - </style>
419   - <!-- Workaround for binary XHR in IE 9/10, see App.loadUrl -->
420   - <!--[if (IE 9)|(IE 10)]><!-->
421   - <script type="text/vbscript">
  339 + </script>
  340 + <link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/plgmlhohecdddhbmmkncjdmlhcmaachm">
  341 + <link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png">
  342 + <!-- <link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">-->
  343 + <link rel="icon" type="image/png" sizes="32x32" href="images/logo-32x32.png">
  344 + <link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
  345 + <!-- <link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">-->
  346 + <link rel="mask-icon" href="images/safari-pinned-tab.svg" color="#d89000">
  347 + <link rel="stylesheet" type="text/css" href="styles/grapheditor.css">
  348 + <link rel="preconnect" href="https://storage.googleapis.com">
  349 + <link rel="canonical" href="https://app.diagrams.net">
  350 + <link rel="manifest" href="images/manifest.json">
  351 + <!-- <link rel="shortcut icon" href="favicon.ico">-->
  352 + <link rel="shortcut icon" href="images/logo-16x16.ico">
  353 + <style type="text/css">
  354 + body {
  355 + overflow: hidden;
  356 + }
  357 +
  358 + div.picker {
  359 + z-index: 10007;
  360 + }
  361 +
  362 + .geSidebarContainer .geTitle input {
  363 + font-size: 8pt;
  364 + color: #606060;
  365 + }
  366 +
  367 + .geBlock {
  368 + z-index: -3;
  369 + margin: 100px;
  370 + margin-top: 40px;
  371 + margin-bottom: 30px;
  372 + padding: 20px;
  373 + text-align: center;
  374 + min-width: 50%;
  375 + }
  376 +
  377 + .geBlock h1,
  378 + .geBlock h2 {
  379 + margin-top: 0px;
  380 + padding-top: 0px;
  381 + }
  382 +
  383 + .geEditor *:not(.geScrollable)::-webkit-scrollbar {
  384 + width: 14px;
  385 + height: 14px;
  386 + }
  387 +
  388 + .geEditor ::-webkit-scrollbar-track {
  389 + background-clip: padding-box;
  390 + border: solid transparent;
  391 + border-width: 1px;
  392 + }
  393 +
  394 + .geEditor ::-webkit-scrollbar-corner {
  395 + background-color: transparent;
  396 + }
  397 +
  398 + .geEditor ::-webkit-scrollbar-thumb {
  399 + background-color: rgba(0, 0, 0, .1);
  400 + background-clip: padding-box;
  401 + border: solid transparent;
  402 + border-radius: 10px;
  403 + }
  404 +
  405 + .geEditor ::-webkit-scrollbar-thumb:hover {
  406 + background-color: rgba(0, 0, 0, .4);
  407 + }
  408 +
  409 + .geTemplate {
  410 + border: 1px solid transparent;
  411 + display: inline-block;
  412 + _display: inline;
  413 + vertical-align: top;
  414 + border-radius: 3px;
  415 + overflow: hidden;
  416 + font-size: 14pt;
  417 + cursor: pointer;
  418 + margin: 5px;
  419 + }
  420 + </style>
  421 + <!-- Workaround for binary XHR in IE 9/10, see App.loadUrl -->
  422 + <!--[if (IE 9)|(IE 10)]><!-->
  423 + <script type="text/vbscript">
422 424 Function mxUtilsBinaryToArray(Binary)
423 425 Dim i
424 426 ReDim byteArray(LenB(Binary))
... ... @@ -429,36 +431,171 @@
429 431 End Function
430 432
431 433 </script>
432   - <!--<![endif]-->
  434 + <!--<![endif]-->
  435 + <style>
  436 + figure {
  437 + position: absolute;
  438 + margin: auto;
  439 + top: 0;
  440 + bottom: 0;
  441 + left: 0;
  442 + right: 0;
  443 + width: 6.250em;
  444 + height: 6.250em;
  445 + animation: rotate 2.4s linear infinite;
  446 + }
  447 +
  448 + .white {
  449 + top: 0;
  450 + bottom: 0;
  451 + left: 0;
  452 + right: 0;
  453 + background: white;
  454 + animation: flash 2.4s linear infinite;
  455 + opacity: 0;
  456 + }
  457 +
  458 + .dot {
  459 + position: absolute;
  460 + margin: auto;
  461 + width: 2.4em;
  462 + height: 2.4em;
  463 + border-radius: 100%;
  464 + transition: all 1s ease;
  465 + }
  466 +
  467 + .dot:nth-child(2) {
  468 + top: 0;
  469 + bottom: 0;
  470 + left: 0;
  471 + background: #FF4444;
  472 + animation: dotsY 2.4s linear infinite;
  473 + }
  474 +
  475 + .dot:nth-child(3) {
  476 + left: 0;
  477 + right: 0;
  478 + top: 0;
  479 + background: #FFBB33;
  480 + animation: dotsX 2.4s linear infinite;
  481 + }
  482 +
  483 + .dot:nth-child(4) {
  484 + top: 0;
  485 + bottom: 0;
  486 + right: 0;
  487 + background: #99CC00;
  488 + animation: dotsY 2.4s linear infinite;
  489 + }
  490 +
  491 + .dot:nth-child(5) {
  492 + left: 0;
  493 + right: 0;
  494 + bottom: 0;
  495 + background: #33B5E5;
  496 + animation: dotsX 2.4s linear infinite;
  497 + }
  498 +
  499 + @keyframes rotate {
  500 + 0% {
  501 + transform: rotate(0);
  502 + }
  503 +
  504 + 10% {
  505 + width: 6.250em;
  506 + height: 6.250em;
  507 + }
  508 +
  509 + 66% {
  510 + width: 2.4em;
  511 + height: 2.4em;
  512 + }
  513 +
  514 + 100% {
  515 + transform: rotate(360deg);
  516 + width: 6.250em;
  517 + height: 6.250em;
  518 + }
  519 + }
  520 +
  521 + @keyframes dotsY {
  522 + 66% {
  523 + opacity: .1;
  524 + width: 2.4em;
  525 + }
  526 +
  527 + 77% {
  528 + opacity: 1;
  529 + width: 0;
  530 + }
  531 + }
  532 +
  533 + @keyframes dotsX {
  534 + 66% {
  535 + opacity: .1;
  536 + height: 2.4em;
  537 + }
  538 +
  539 + 77% {
  540 + opacity: 1;
  541 + height: 0;
  542 + }
  543 + }
  544 +
  545 + @keyframes flash {
  546 + 33% {
  547 + opacity: 0;
  548 + border-radius: 0%;
  549 + }
  550 +
  551 + 55% {
  552 + opacity: .6;
  553 + border-radius: 100%;
  554 + }
  555 +
  556 + 66% {
  557 + opacity: 0;
  558 + }
  559 + }
  560 + </style>
433 561 </head>
  562 +
434 563 <body class="geEditor">
435   -<div id="geInfo">
436   - <div class="geBlock">
437   - <h1>ThingsKit云组态启动中.......</h1>
438   - </div>
439   -</div>
440   -<script type="text/javascript">
441   - /**
442   - * Main
443   - */
444   - if (navigator.userAgent != null && navigator.userAgent.toLowerCase().indexOf(' electron/') >= 0 && typeof process !== 'undefined' && process.versions.electron < 5) {
445   - // Redirects old Electron app to latest version
446   - var div = document.getElementById('geInfo');
447   -
448   - if (div != null) {
449   - div.innerHTML = '<center><h2>You are using an out of date version of this app.<br>Please download the latest version ' +
450   - '<a href="https://github.com/jgraph/drawio-desktop/releases/latest" target="_blank">here</a>.</h2></center>';
451   - }
452   - } else {
453   - if (urlParams['dev'] != '1' && typeof document.createElement('canvas').getContext === "function") {
454   - window.addEventListener('load', function () {
455   - mxWinLoaded = true;
456   - checkAllLoaded();
457   - });
  564 + <div id="geInfo">
  565 + <div class="geBlock">
  566 + <h1>ThingsKit云组态启动中.......</h1>
  567 + </div>
  568 + <figure>
  569 + <div class="dot white"></div>
  570 + <div class="dot"></div>
  571 + <div class="dot"></div>
  572 + <div class="dot"></div>
  573 + <div class="dot"></div>
  574 + </figure>
  575 + </div>
  576 + <script type="text/javascript">
  577 + /**
  578 + * Main
  579 + */
  580 + if (navigator.userAgent != null && navigator.userAgent.toLowerCase().indexOf(' electron/') >= 0 && typeof process !== 'undefined' && process.versions.electron < 5) {
  581 + // Redirects old Electron app to latest version
  582 + var div = document.getElementById('geInfo');
  583 +
  584 + if (div != null) {
  585 + div.innerHTML = '<center><h2>You are using an out of date version of this app.<br>Please download the latest version ' +
  586 + '<a href="https://github.com/jgraph/drawio-desktop/releases/latest" target="_blank">here</a>.</h2></center>';
  587 + }
458 588 } else {
459   - App.main();
  589 + if (urlParams['dev'] != '1' && typeof document.createElement('canvas').getContext === "function") {
  590 + window.addEventListener('load', function () {
  591 + mxWinLoaded = true;
  592 + checkAllLoaded();
  593 + });
  594 + } else {
  595 + App.main();
  596 + }
460 597 }
461   - }
462   -</script>
  598 + </script>
463 599 </body>
  600 +
464 601 </html>
... ...