loading.html 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257
  1. <!DOCTYPE html>
  2. <html lang="en">
  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>Document</title>
  8. <style>
  9. body {
  10. height:300px;
  11. margin: 0;
  12. padding: 0;
  13. overflow: hidden;
  14. background: rgba(238, 235, 235, 0.5);
  15. background-image: url('./xlfs_jm_bg.png');
  16. background-size:100% 100%;
  17. background-repeat: no-repeat;
  18. }
  19. .loadP {
  20. margin-top:0px;
  21. font-size: 30px;
  22. text-align: center;
  23. color: rgb(254, 254, 254);
  24. }
  25. .jueming{
  26. font-size: 30px;
  27. text-align: center;
  28. color: rgb(254, 254, 254);
  29. }
  30. .loadRe{
  31. text-align: center;
  32. font-size: 14px;
  33. color:#ffffff ;
  34. }
  35. .logo{
  36. display: block;
  37. text-align: left;
  38. margin-top:10px
  39. }
  40. .progressBox{
  41. flex: 1;
  42. padding-top: 0.3rem;
  43. padding-right: 0.2rem;
  44. position: relative;
  45. }
  46. .progress {
  47. height: 0.3rem;
  48. overflow: hidden;
  49. background: -webkit-repeating-linear-gradient(
  50. 0deg,
  51. #e9e9e9 0,
  52. #e9e9e9 4px,
  53. #ffffff 4px,
  54. #ffffff 8px
  55. );
  56. }
  57. .progress_bar {
  58. height: 0.3rem;
  59. background: -webkit-repeating-linear-gradient(
  60. 0deg,
  61. #3071fd 0,
  62. #3071fd 4px,
  63. #ffffff 4px,
  64. #ffffff 8px
  65. );
  66. position: absolute;
  67. left: 0;
  68. top: 0.3rem;
  69. }
  70. .progress-bar {
  71. margin-top: 120px;
  72. width: 100%;
  73. height: 2px;
  74. overflow: hidden;
  75. box-sizing: border-box;
  76. border-radius: 24px;
  77. background-color: rgba(180, 160, 120, .2);
  78. position: relative;
  79. }
  80. .progress-bg {
  81. width: 20%;
  82. height: 100%;
  83. overflow: hidden;
  84. box-sizing: border-box;
  85. /* background-image: #00BFFF 25%; */
  86. background-image: linear-gradient(135deg, #36B1D1 25%, #36B1D1 0, #36B1D1 50%, #36B1D1 0, #36B1D1 75%, #36B1D1 0);
  87. animation: panoramic 20s linear infinite;
  88. background-size: 32px 100%;
  89. }
  90. @keyframes panoramic {
  91. to {
  92. background-position: 200% 0;
  93. }
  94. }
  95. .company {
  96. text-align: right;
  97. margin-top: 20px;
  98. font-size: 12px;
  99. font-family: PingFang SC;
  100. font-weight: 400;
  101. color: #FEFEFE;
  102. line-height: 15px;
  103. opacity: 0.8;
  104. margin-bottom: 2px;
  105. }
  106. .website {
  107. margin-top: 2px;
  108. text-align: right;
  109. font-size: 12px;
  110. font-family: PingFang SC;
  111. font-weight: 400;
  112. color: #FEFEFE;
  113. line-height: 15px;
  114. opacity: 0.6;
  115. }
  116. </style>
  117. </head>
  118. <body>
  119. <div class="logo">&nbsp;&nbsp;<img src="./logo_icon.png"></div>
  120. <p class="loadP"><span>决明科技</span></p>
  121. <!-- <p><div class="progressBox">
  122. <div class="progress"></div>
  123. <div class="progress_bar" style=" width: 40%" ></div>
  124. </div>
  125. </p> -->
  126. <p class="loadRe"> <span id="dian"></span><span id="dianFor"></span></p>
  127. <div class="progress-bar">
  128. <div class="progress-bg" id="pro"></div>
  129. </div>
  130. <!-- <p class="jimigou" id="jimigou">检测到加密狗,软件启动中</p> -->
  131. <p class="company">北京决明科技有限公司&nbsp;&nbsp;&nbsp;&nbsp;</p>
  132. <p class="website">www.jue-ming.com&nbsp;&nbsp;&nbsp;&nbsp;</p>
  133. <!-- <img width="400px";height='300px' src="./xlfs_jm_bg.png" alt="" srcset=""> -->
  134. </body>
  135. </html>
  136. <script>
  137. let dian = document.getElementById('dian')
  138. let dianNum = ''
  139. let dianFor=document.getElementById('dianFor')
  140. let dianForNum=''
  141. let count=0
  142. const { ipcRenderer } = window.require('electron');
  143. function startserve(val) {
  144. ipcRenderer.send("main-windows-python-exe", {
  145. type: val,
  146. });
  147. };
  148. function showMainWindows() {
  149. ipcRenderer.send("close-loading-window", {
  150. isClose: true,
  151. });
  152. };
  153. ipcRenderer.on("main-windows-python-exe-run", (event, arg) => {
  154. console.log(arg)
  155. if (arg.type === "exe") {
  156. dian.innerHTML = "python服务启动完成";
  157. startserve("dbInit");
  158. dian.innerHTML = "数据库正在初始化";
  159. let qq = document.getElementById('pro')
  160. qq.style.width = '40%'
  161. }
  162. if (arg.type === "dbInit") {
  163. dian.innerHTML = "数据库初始化完成";
  164. startserve("startDb");
  165. dian.innerHTML = "数据库启动中";
  166. let qq = document.getElementById('pro')
  167. qq.style.width = '60%'
  168. }
  169. if (arg.type === "startDb") {
  170. dian.innerHTML = "数据库启动完成";
  171. startserve("startJar");
  172. dian.innerHTML = "后台服务启动中";
  173. let qq = document.getElementById('pro')
  174. qq.style.width = '90%'
  175. }
  176. if (arg.type === "startJar") {
  177. let qq = document.getElementById('pro')
  178. qq.style.width = '100%'
  179. dian.innerHTML = "后台服务启动完成";
  180. //this.startserve("webGlobal");
  181. showMainWindows()
  182. }
  183. // if (arg.type === "webGlobal") {
  184. // //可以关闭动画,打开mainwindows
  185. // this.showMainWindows();
  186. // }
  187. });
  188. window.onload = function () {
  189. startserve("exe");
  190. dian.innerHTML = "python服务正在启动中";
  191. setInterval(() => {
  192. count = count + 1
  193. dianForNum = dianForNum + '.'
  194. dianFor.innerHTML = dianForNum;
  195. if (count == 4) {
  196. dianForNum = ''
  197. count=0;
  198. }
  199. }, 1000);
  200. }
  201. // function startserve(val) {
  202. // ipcRenderer.send("main-windows-python-exe", {
  203. // type: val,
  204. // });
  205. // };
  206. // function showMainWindows() {
  207. // ipcRenderer.send("close-loading-window", {
  208. // isClose: true,
  209. // });
  210. // };
  211. // let count = 0;
  212. // let time = setInterval(() => {
  213. // count = count + 1
  214. // dianNum = dianNum + '.'
  215. // dian.innerHTML = dianNum;
  216. // if (count == 4) {
  217. // dianNum = ''
  218. // }
  219. // if (count == 6) {
  220. // clearInterval(time)
  221. // }
  222. // }, 500);
  223. // console.log(ipcRenderer.sendSync('test3', '我是渲染进程')); // prints "我是主进程"
  224. // ipcRenderer.on('test2', function (event, arg) {
  225. // console.log(arg); // prints "我是主进程的test1"
  226. // });
  227. // ipcRenderer.send('test1', '我是渲染进程的test2');
  228. </script>