step4.php 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8"/>
  5. <title><?php echo $Title; ?> - <?php echo $Powered; ?></title>
  6. <link rel="stylesheet" href="./css/install.css?v=9.0"/>
  7. <script src="./js/jquery.js?v=9.0"></script>
  8. <link rel="stylesheet" href="./css/step4.css"/>
  9. <link rel="stylesheet" href="./css/theme-chalk.css">
  10. <script src="./js/vue2.6.11.js"></script>
  11. <script src="./js/element-ui.js?v=9.0"></script>
  12. </head>
  13. <body>
  14. <div class="wrap" id="step4">
  15. <div class="title">
  16. 安装进度
  17. </div>
  18. <!-- --><?php //require './templates/header.php';?>
  19. <section class="section">
  20. <div class="title">
  21. <h1>系统安装中,请稍等片刻...</h1>
  22. </div>
  23. <div class="progress">
  24. <el-progress :percentage="percentage" color="#37CA71" define-back-color="rgba(255,255,255,0.5)"
  25. :stroke-width="8"
  26. status="success"></el-progress>
  27. <div class="progress-msg" v-if="!isShow">
  28. <div id="loginner_item" class="msg p8">{{installList[installList.length]}}</div>
  29. <!-- <div class="open" @click="openList">查看详情</div>-->
  30. </div>
  31. </div>
  32. <div class="install" ref="install" id="log" v-show="isShow">
  33. <div id="loginner" class="item" v-for="(item,index) in installList" :key="index">
  34. <span>{{item.msg}}</span>
  35. <span>{{item.time}}</span>
  36. </div>
  37. </div>
  38. <div class="bottom tac"><a href="javascript:;" class="btn_old mid"><img class="shuaxin" src="./images/install/shuaxin.png"
  39. align="absmiddle"/>&nbsp;正在安装...</a></div>
  40. </section>
  41. <script type="text/javascript">
  42. var n = -1;
  43. var data = <?php echo json_encode($_POST);?>;
  44. $.ajaxSetup({cache: false});
  45. new Vue({
  46. el: '#step4',
  47. data() {
  48. return {percentage: 0, isShow: 0, installList: []}
  49. },
  50. mounted() {
  51. this.reloads(n);
  52. },
  53. methods: {
  54. reloads(n) {
  55. var url = "<?php echo $_SERVER['PHP_SELF']; ?>?step=4&install=1&n=" + n;
  56. $.ajax({
  57. type: "POST",
  58. url: url,
  59. data: data,
  60. dataType: 'json',
  61. beforeSend: () => {
  62. },
  63. success: (msg) => {
  64. this.percentage = Math.round((msg.n / msg.count) * 100) > 100 ? 100 : Math.round((msg.n / msg.count) * 100)
  65. if (msg.n >= 0) {
  66. $('#loginner_item').html(msg.msg);
  67. this.installList.push({
  68. msg: msg.msg,
  69. time: msg.time
  70. })
  71. this.$nextTick(e => {
  72. this.$refs.install.scrollTop = this.$refs.install.scrollHeight;
  73. })
  74. if (msg.n == '999999') {
  75. setTimeout(e => {
  76. this.gonext()
  77. }, 1000);
  78. return false;
  79. } else {
  80. this.reloads(msg.n);
  81. }
  82. } else {
  83. //alert('指定的数据库不存在,系统也无法创建,请先通过其他方式建立好数据库!');
  84. alert(msg.msg);
  85. }
  86. }
  87. });
  88. },
  89. openList() {
  90. this.isShow = true
  91. this.$nextTick(e => {
  92. this.$refs.install.scrollTop = this.$refs.install.scrollHeight;
  93. })
  94. },
  95. gonext() {
  96. window.location.href = '<?php echo $_SERVER['PHP_SELF']; ?>?step=5';
  97. }
  98. }
  99. })
  100. </script>
  101. </div>
  102. <?php require './templates/footer.php'; ?>
  103. </body>
  104. </html>