loading.html 7.2 KB

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