From 4aa13af3c74cf57d70bad9c4bc53b2c26e04fb5d Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期三, 26 一月 2022 13:46:53 +0800
Subject: [PATCH] 集群管理搜索集群

---
 src/pages/settings/views/clusterManagement.vue            |   80 +++-
 src/pages/systemSettings/components/ClusterManagement.vue |    1 
 src/api/clusterManage.ts                                  |    1 
 src/pages/vindicate/index/App.vue                         |   15 
 src/pages/vindicate/views/sysInfo.vue                     |    2 
 src/api/system.ts                                         |   55 +++
 src/pages/vindicate/views/backUp.vue                      |  225 +++++++++----
 src/pages/desktop/index/components/Desktop.vue            |  292 +++++++++++++++++
 src/pages/vindicate/views/updateSettings.vue              |    2 
 src/pages/settings/views/deviceInfo.vue                   |    2 
 src/pages/vindicate/views/restartSettings.vue             |  256 +++++++--------
 11 files changed, 680 insertions(+), 251 deletions(-)

diff --git a/src/api/clusterManage.ts b/src/api/clusterManage.ts
index 690d640..3c5300a 100644
--- a/src/api/clusterManage.ts
+++ b/src/api/clusterManage.ts
@@ -76,7 +76,6 @@
   })
 };
 
-// 閫�鍑洪泦缇�
 export const leave = (query: any) => {
   return request({
     url: "/data/api-v/cluster/leave",
diff --git a/src/api/system.ts b/src/api/system.ts
index e1cc118..bc85f5c 100644
--- a/src/api/system.ts
+++ b/src/api/system.ts
@@ -440,6 +440,8 @@
     data: qs.stringify(query)
   })
 }
+
+// 
 export const uploadKey = (data: any) => {
   return request({
     url: "/version/authorization/upload",
@@ -447,3 +449,56 @@
     data
   })
 }
+
+export const getBakConfig = () => {
+  return request({
+    url: "/version/autoBak/config",
+    method: "get"
+  })
+}
+export const getSmsCode = (query: any) => {
+  return request({
+    url: "/version/auth/shop/smsCode",
+    method: "get",
+    params: query,
+  })
+}
+
+export const loginShopInSmart = (data: any) => {
+  return request({
+    url: "/version/auth/shop/login",
+    method: "post",
+    data: qs.stringify(data)
+  })
+}
+export const setBakConfig = (data: any) => {
+  return request({
+    url: "/version/autoBak/saveConf",
+    method: "post",
+    data
+  })
+}
+
+export const backupRN = (data: any) => {
+  return request({
+    url: "/version/autoBak/backupRN",
+    method: "post",
+    data
+  })
+}
+
+export const recoverBackup = (data: any) => {
+  return request({
+    url: "/version/autoBak/recover",
+    method: "post",
+    data: qs.stringify(data)
+  })
+}
+
+export const getBackupList = () => {
+  return request({
+    url: "/version/autoBak/list",
+    method: "get"
+  })
+}
+
diff --git a/src/pages/desktop/index/components/Desktop.vue b/src/pages/desktop/index/components/Desktop.vue
index e9e9615..e9e0548 100644
--- a/src/pages/desktop/index/components/Desktop.vue
+++ b/src/pages/desktop/index/components/Desktop.vue
@@ -14,9 +14,7 @@
       <span v-if="!snExpire" class="text"
         >璇曠敤鐗堝皻鏈縺娲伙紝浠呮敮鎸侀儴鍒嗗姛鑳戒娇鐢紝濡傞渶浣跨敤鍏ㄩ儴鍔熻兘锛岃灏藉揩婵�娲荤郴缁熴��</span
       >
-      <span v-else class="text"
-        >SmartAIOS 璇曠敤鏈熷凡鍒版湡锛岃鎮ㄥ敖蹇縺娲荤郴缁�</span
-      >
+      <span v-else class="text">SmartAIOS 璇曠敤鏈熷凡鍒版湡锛岃鎮ㄥ敖蹇縺娲荤郴缁�</span>
       <span class="go-to" @click="gotoActive">鍓嶅線婵�娲�</span>
       <span class="icon iconfont" @click="showFreeVersion = false"
         >&#xe61b;</span
@@ -31,17 +29,79 @@
       :close-on-click-modal="false"
       :close-on-press-escape="false"
     >
+      <el-dialog
+        width="30%"
+        title="璐︽埛婵�娲�"
+        :visible.sync="innerVisible"
+        append-to-body
+        class="inner-login-dialog"
+      >
+        <div class="info">
+          璇疯緭鍏ヤ綘鍦⊿martAI鍟嗗煄璐︽埛鐨勬墜鏈哄彿骞跺畬鎴愰獙璇佺爜鏍¢獙锛屽疄鐜扮郴缁熸縺娲伙紒
+        </div>
+        <div class="login-content">
+          <el-form
+            :model="phone"
+            status-icon
+            :rules="phoneCodeRule"
+            :validate-on-rule-change="false"
+            ref="phoneLogin"
+            class="demo-ruleForm"
+          >
+            <el-form-item prop="phoneNum" style="margin-top: 20px">
+              <el-input
+                v-model="phone.phoneNum"
+                style="width: 380px"
+                placeholder="璇疯緭鍏ユ墜鏈哄彿"
+              >
+                <i slot="prefix" class="el-icon-mobile-phone"></i>
+              </el-input>
+            </el-form-item>
+            <el-form-item prop="verifyCode">
+              <el-input
+                @keyup.enter.native="phoneLogin"
+                v-model="phone.verifyCode"
+                autocomplete="off"
+                style="width: 254px"
+                placeholder="璇疯緭鍏ラ獙璇佺爜"
+              >
+                <i slot="prefix" class="el-icon-message"></i>
+              </el-input>
+              <el-button
+                class="code-btn"
+                style="margin-left: 15px"
+                :disabled="codeDisabled"
+                @click="getCode"
+                >{{ codeMsg }}</el-button
+              >
+            </el-form-item>
+          </el-form>
+        </div>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="activeDialog = false">鍙栨秷</el-button>
+          <el-button type="primary" @click="loginShop">纭畾</el-button>
+        </span>
+      </el-dialog>
       <div class="ver"><span class="ver-text">鐗堟湰锛�</span>{{ version }}</div>
       <div class="ver">
         <span class="ver-text">鐘舵�侊細</span>{{ versionState }}
       </div>
       <el-divider></el-divider>
       <div class="info">
-        濡傛灉杩樻病鏈変骇鍝佸瘑閽ワ紝浣犲彲浠ヤ娇鐢ㄦ墜鏈烘壂鐮佹垨鍓嶅線姝ら摼鎺�
-        <a href="http://apps.smartai.com" target="_blank"
+        濡傛灉鎮ㄥ凡杩炴帴鍒癐nternet骞朵笖宸茶喘涔颁骇鍝佸瘑閽ワ紝鍙互灏濊瘯楠岃瘉SmartAI鍟嗗煄璐︽埛婵�娲荤郴缁熴��
+        <div>
+          <el-button type="primary" @click="innerVisible = true">
+            璐︽埛婵�娲�
+          </el-button>
+        </div>
+      </div>
+      <div class="info">
+        濡傛灉鎮ㄦ湭杩炴帴Internet鎴栨縺娲诲け璐ワ紝鍙皾璇曠绾挎縺娲伙紝浣跨敤鎵嬫満鎵爜璐拱浜у搧鎴栭獙璇丼martAI鍟嗗煄璐︽埛婵�娲荤郴缁熴��
+        <!-- <a href="http://apps.smartai.com" target="_blank"
           >http://apps.smartai.com</a
         >
-        璐拱銆�
+        濡傛灉杩樻病鏈変骇鍝佸瘑閽ワ紝浣犲彲浠ヤ娇鐢ㄦ墜鏈烘壂鐮佹垨鍓嶅線姝ら摼鎺�
+        璐拱銆� -->
       </div>
       <img class="qr-code-img" src="/version/offline/qrcode" />
       <el-divider></el-divider>
@@ -73,7 +133,66 @@
       </div>
 
       <span slot="footer" class="dialog-footer">
-        <el-button v-if="!snExpire" @click="activeDialog = false">缁х画璇曠敤</el-button>
+        <el-button v-if="!snExpire" @click="activeDialog = false"
+          >缁х画璇曠敤</el-button
+        >
+        <el-button v-else @click="quit">閫�鍑虹櫥褰�</el-button>
+        <el-button type="primary" @click="activateVersion">婵�娲�</el-button>
+      </span>
+    </el-dialog>
+
+    <el-dialog
+      title="鎴戠殑璁㈠崟"
+      :visible.sync="innerDialog"
+      width="750px"
+      :show-close="false"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      custom-class="my-order"
+    >
+      <div class="tip">
+        <i class="el-icon-info"></i>
+        <span> 璇锋鏌ヨ鍗曚俊鎭紝纭鏃犺鍚庡啀婵�娲荤郴缁熴�� </span>
+      </div>
+
+      <div class="order-list">
+        <div class="order-card">
+          <div class="head">
+            <el-checkbox v-model="checked">
+              <span>璁㈠崟ID锛歿{ 22322323423 }}</span>
+            </el-checkbox>
+
+            <span>锟{ 111 }} 鍏�</span>
+          </div>
+          <div class="desc">
+            <div>绯荤粺鐗堟湰锛歿{ 22322323423 }}</div>
+            <div>閫氶亾鏁伴噺锛歿{ 22322323423 }}</div>
+            <div>鎽勫儚鏈烘暟閲忥細{{ 22322323423 }}</div>
+            <div>鏈嶅姟鏃堕暱锛歿{ 22322323423 }}</div>
+          </div>
+        </div>
+
+        <div class="order-card">
+          <div class="head">
+            <el-checkbox v-model="checked">
+              <span>璁㈠崟ID锛歿{ 31423233423 }}</span>
+            </el-checkbox>
+
+            <span>锟{ 111 }} 鍏�</span>
+          </div>
+          <div class="desc">
+            <div>绯荤粺鐗堟湰锛歿{ 22322323423 }}</div>
+            <div>閫氶亾鏁伴噺锛歿{ 22322323423 }}</div>
+            <div>鎽勫儚鏈烘暟閲忥細{{ 22322323423 }}</div>
+            <div>鏈嶅姟鏃堕暱锛歿{ 22322323423 }}</div>
+          </div>
+        </div>
+      </div>
+
+      <span slot="footer" class="dialog-footer">
+        <el-button v-if="!snExpire" @click="activeDialog = false"
+          >鍙栨秷婵�娲�</el-button
+        >
         <el-button v-else @click="quit">閫�鍑虹櫥褰�</el-button>
         <el-button type="primary" @click="activateVersion">婵�娲�</el-button>
       </span>
@@ -84,11 +203,14 @@
 <script>
 import DFrame from "./DFrame";
 import Safari from "./Safari";
+import { isPhone } from "../../../../scripts/validate.ts";
 import {
   getActiveQrCode,
   getSN,
   activateVersion,
   uploadKey,
+  getSmsCode,
+  loginShopInSmart,
 } from "@/api/system";
 export default {
   name: "Desktop",
@@ -100,24 +222,87 @@
     return {
       showFreeVersion: false,
       activeDialog: false,
+      countdown: 60,innerDialog: false,
       version: "SmartAI璇曠敤鐗�",
+      codeMsg: "鑾峰彇楠岃瘉鐮�",
       versionState: "灏氭湭婵�娲�",
       secrectKey: "",
-      snExpire: false
+      codeDisabled: false,
+      innerVisible: false,
+      snExpire: false,
+      timer: null,
+      phone: {
+        phoneNum: "",
+        verifyCode: "",
+      },
+      phoneCodeRule: {
+        phoneNum: [{ validator: isPhone, trigger: "change" }],
+        verifyCode: [
+          { required: true, message: "璇疯緭鍏ラ獙璇佺爜", trigger: "change" },
+        ],
+      },
     };
   },
-  mounted() {
+  created() {
     this.validateSn();
   },
   methods: {
-    quit(){
-      this.$emit("quit")
+    quit() {
+      this.$emit("quit");
     },
     validateSn() {
       getSN().then((res) => {
         this.snExpire = res.data.expire;
         this.showFreeVersion = res.data.sn == "" || res.data.expire;
       });
+    },
+    getValidStr() {
+      if (this.countdown > 0 && this.countdown <= 60) {
+        this.countdown--;
+        if (this.countdown !== 0) {
+          this.codeMsg = "閲嶆柊鍙戦��(" + this.countdown + ")";
+        } else {
+          clearInterval(this.timer);
+          this.codeMsg = "鑾峰彇楠岃瘉鐮�";
+          this.countdown = 60;
+          this.timer = null;
+          this.codeDisabled = false;
+        }
+      }
+    },
+    loginShop(){
+      loginShopInSmart({
+        phoneNum:this.phone.phoneNum,
+        verifyCode
+      })
+    },
+    // 鑾峰彇楠岃瘉鐮�
+    getCode() {
+      // 楠岃瘉鐮�60绉掑�掕鏃�
+      var pattern = /^1[345789]\d{9}$/;
+      if (this.phone.phoneNum == "") {
+        this.$refs['phoneLogin'].fields[0].validateMessage = "璇疯緭鍏ユ墜鏈哄彿";
+        this.$refs['phoneLogin'].fields[0].validateState = "error";
+        return;
+      }
+      if (!pattern.test(this.phone.phoneNum)) {
+        this.$refs['phoneLogin'].fields[0].validateMessage = "鎵嬫満鍙风爜鏍煎紡鏈夎";
+        this.$refs['phoneLogin'].fields[0].validateState = "error";
+        return;
+      }
+      if (!this.timer) {
+        this.codeDisabled = true;
+        this.getValidStr();
+        this.timer = setInterval(this.getValidStr, 1000);
+        getSmsCode({ phoneNum: this.phone.phoneNum })
+          .then((res) => {
+            this.gotCode = true;
+          })
+          .catch((err) => {
+            this.$refs['phoneLogin'].fields[0].validateMessage = err.data.msg;
+            this.$refs['phoneLogin'].fields[0].validateState = "error";
+          });
+      }
     },
     activateVersion() {
       if (this.secrectKey.trim() == "") {
@@ -126,7 +311,7 @@
       }
       activateVersion({ code: this.secrectKey.trim() })
         .then((res) => {
-          debugger
+          debugger;
           if (res.code == 200) {
             this.$notify.success("婵�娲绘垚鍔�");
             this.validateSn();
@@ -227,6 +412,89 @@
     font-size: 15px;
   }
 }
+.inner-login-dialog {
+  .info {
+    padding: 0 30px;
+  }
+  .el-dialog__body {
+    text-align: left;
+  }
+}
+.login-content {
+  box-sizing: border-box;
+  padding: 0 30px;
+  .el-input__inner {
+    -webkit-appearance: none;
+    background-color: #ffffff;
+    background-image: none;
+    border-radius: 4px;
+    border: 1px solid #dcdfe6;
+    box-sizing: border-box;
+    color: #606266;
+    display: inline-block;
+    font-size: 16px;
+    border-radius: 5px;
+    height: 40px;
+    line-height: 40px;
+    outline: none;
+    padding: 0 15px;
+    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+    width: 100%;
+  }
+}
+.el-dialog.my-order {
+  .tip {
+    width: auto;
+    height: 40px;
+    background: rgb(145, 213, 255, 0.2);
+    box-sizing: border-box;
+    border: 1px rgb(145, 213, 255) solid;
+    display: flex;
+    padding: 0 10px;
+    border-radius: 5px;
+    align-items: center;
+    i {
+      margin-right: 5px;
+      font-size: 16px;
+      color: rgb(24, 144, 255);
+    }
+    span {
+      font-size: 14px;
+    }
+  }
+  .order-list {
+    margin: 20px 0;
+
+    .order-card {
+      height: 150px;
+      background: #fff;
+      margin-bottom: 15px;
+
+      border-radius: 8px;
+      box-shadow: 0px 0px 4px rgb(0 0 0 / 25%);
+      .head {
+        height: 40px;
+        line-height: 40px;
+        text-align: left;
+        box-sizing: border-box;
+        padding: 0 20px;
+        border-bottom: 1px rgba(242, 242, 242, 1) solid;
+        font-size: 14px;
+        display: flex;
+        justify-content: space-between;
+      }
+      .desc {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-evenly;
+        height: 110px;
+        text-align: left;
+        box-sizing: border-box;
+        padding: 0 20px;
+      }
+    }
+  }
+}
 .warn-tag {
   width: 640px;
   text-align: left;
diff --git a/src/pages/settings/views/clusterManagement.vue b/src/pages/settings/views/clusterManagement.vue
index 34d0f46..5115d54 100644
--- a/src/pages/settings/views/clusterManagement.vue
+++ b/src/pages/settings/views/clusterManagement.vue
@@ -93,7 +93,11 @@
     </div>
     <!-- !showCurCluster || !isHasColony -->
     <div class="cluster-content" v-if="!showCurCluster || !isHasColony">
-      <div class="cluster-center" ref="left" v-if="!showCurCluster || !isHasColony">
+      <div
+        class="cluster-center"
+        ref="left"
+        v-if="!showCurCluster || !isHasColony"
+      >
         <div
           class="menu-item"
           :class="activePage == i ? 'menu-item-active' : ''"
@@ -158,15 +162,14 @@
             :rules="joinExistRules"
             ref="joinForm"
             class="join-form"
-         
             v-loading="joinLoading"
           >
-            <el-form-item  prop="clusterid">
+            <el-form-item prop="clusterid">
               <div class="p-title">闆嗙兢ID</div>
               <el-input v-model="joinForm.clusterid" size="small"></el-input>
             </el-form-item>
 
-            <el-form-item  prop="clusterip">
+            <el-form-item prop="clusterip">
               <div class="p-title">IP鍦板潃</div>
               <el-input
                 v-model="joinForm.clusterip"
@@ -175,7 +178,7 @@
                 autocomplete="new-password"
               ></el-input>
             </el-form-item>
-            <el-form-item  prop="clusterpwd">
+            <el-form-item prop="clusterpwd">
               <div class="p-title">闆嗙兢瀵嗙爜</div>
               <el-input
                 v-model="joinForm.clusterpwd"
@@ -202,9 +205,20 @@
               </el-input>
             </el-form-item>
           </el-form>
-           <div class="btns">
-        <div class="ok" @click="join('joinForm')">鍔犲叆闆嗙兢</div>
-      </div>
+          <div class="clu-list">
+            <div
+              class="clu-item"
+              v-for="(item, index) in members"
+              :key="index"
+              @click="pickNode(index)"
+            >
+              <i class="iconfont">&#xe727;</i>
+              {{ item.Address }}
+            </div>
+          </div>
+          <div class="btns">
+            <div class="ok" @click="join('joinForm')">鍔犲叆闆嗙兢</div>
+          </div>
         </div>
       </div>
     </div>
@@ -224,7 +238,7 @@
   joinCluster,
 } from "@/api/clusterManage";
 // import cloudNode from "../components/CloudNode";
-import NetNode from '../components/NetNode'
+import NetNode from "../components/NetNode";
 import ipInput from "../components/IPInput";
 import { isIPv4 } from "@/scripts/validate";
 
@@ -256,6 +270,7 @@
       activePage: 0,
       inputIp: "",
       serverIp: "",
+      pickedNodeI: null,
       members: [],
       virtualIp: "192.168.1.188",
       searchDis: false,
@@ -287,20 +302,20 @@
         clustername: [
           { required: true, message: "璇疯緭鍏ラ泦缇ゅ悕绉�", trigger: "blur" },
         ],
-        clusterpwd: [{ validator: checkPwd, trigger: "blur" }],
+        clusterpwd: [{ validator: checkPwd, required: true }],
         virtualIp: [{ required: true, validator: isIPv4, trigger: "change" }],
       },
       joinExistRules: {
         clusterid: [{ validator: checkID, trigger: "blur" }],
         clusterip: [{ validator: isIPv4, trigger: "blur" }],
-        clusterpwd: [{ validator: checkPwd, trigger: "blur" }],
+        clusterpwd: [{ validator: checkPwd, required: true }],
       },
     };
   },
   components: {
     // cloudNode,
     NetNode,
-    ipInput
+    ipInput,
   },
   mounted() {
     this.findCluster();
@@ -312,6 +327,9 @@
     clearInterval(this.intervalTimer);
   },
   methods: {
+    pickNode(index) {
+      // this.pickedNodeI=index
+    },
     async createCluster(json) {
       let res = await createSerfCluster(json);
       this.$notify({
@@ -357,21 +375,20 @@
       });
     },
     join(formName) {
-      debugger
       let _this = this;
       this.$refs[formName].validate((valid) => {
-      debugger
         if (valid) {
-      debugger
           _this.joinLoading = true;
-          let nodeIps = _this.members.map((i) => {
-            return i.Address;
-          });
+          // let nodeIps = _this.members.map((i) => {
+          //   return i.Address;
+          // });
+          debugger;
           let data = {
             clusterId: _this.joinForm.clusterid,
             password: _this.joinForm.clusterpwd,
             nodeIps: [_this.joinForm.clusterip],
           };
+          debugger;
           _this
             .joinCluster(data)
             .then(() => {
@@ -625,7 +642,7 @@
 }
 .cluster-guanli {
   margin: 0 auto;
-width: 760px; 
+  width: 760px;
   padding: 0 10px;
   .btns {
     margin-top: 30px !important;
@@ -644,6 +661,7 @@
       margin-top: 0;
     }
   }
+
   .cloud {
     width: 100%;
     display: flex;
@@ -781,7 +799,27 @@
       > .el-form-item__label:before {
       display: none;
     }
-
+    .clu-list {
+      background: #f2f2f7;
+      border-radius: 8px;
+      margin-top: 20px;
+      .clu-item {
+        border-radius: 8px;
+        height: 40px;
+        // cursor: pointer;
+        line-height: 40px;
+        text-align: left;
+        padding: 0 20px;
+        font-size: 14px;
+        .iconfont {
+          margin-right: 8px;
+        }
+      }
+      // .clu-item:hover {
+      //   background: var(--colorCard);
+      //   color: #fff;
+      // }
+    }
     .el-form-item__content {
       line-height: 48px;
       display: flex;
@@ -813,7 +851,7 @@
       left: 20px;
     }
     .el-form-item {
-    margin-bottom: 10px;
+      margin-bottom: 10px;
       .el-input__inner {
         background-color: #ffffff;
         border: 2px solid transparent;
diff --git a/src/pages/settings/views/deviceInfo.vue b/src/pages/settings/views/deviceInfo.vue
index 1514332..e47205f 100644
--- a/src/pages/settings/views/deviceInfo.vue
+++ b/src/pages/settings/views/deviceInfo.vue
@@ -54,7 +54,7 @@
 </template>
 
 <script>
-import { saveAlarmConfig, getDevInfo } from "@/api/system";
+import { getDevInfo } from "@/api/system";
 import { uploadSound, getSoundList, deleteSound } from "@/api/event";
 
 export default {
diff --git a/src/pages/systemSettings/components/ClusterManagement.vue b/src/pages/systemSettings/components/ClusterManagement.vue
index d215224..de81c3b 100644
--- a/src/pages/systemSettings/components/ClusterManagement.vue
+++ b/src/pages/systemSettings/components/ClusterManagement.vue
@@ -511,7 +511,6 @@
     async search(json) {
       let res = await search(json);
       if (res && res.success) {
-        console.log(res, "鎼滅储闆嗙兢");
         this.searchNum = res.data;
       }
       this.searchDis = true;
diff --git a/src/pages/vindicate/index/App.vue b/src/pages/vindicate/index/App.vue
index ee839c1..90264c0 100644
--- a/src/pages/vindicate/index/App.vue
+++ b/src/pages/vindicate/index/App.vue
@@ -26,13 +26,13 @@
       style="width: 100%"
       ref="view_0"
     ></updateSettings>
-    <!-- <back-up v-if="activePage == 3" style="width: 100%"></back-up> -->
+    <back-up v-if="activePage == 3" style="width: 100%"></back-up>
     <restartSettings
       v-if="activePage == 2"
       style="width: 100%"
       ref="view_2"
     ></restartSettings>
-    <sysInfo v-if="activePage == 3" style="width: 100%" ref="view_3"></sysInfo>
+    <sysInfo v-if="activePage == 4" style="width: 100%" ref="view_3"></sysInfo>
   </div>
 
   <div
@@ -99,7 +99,7 @@
 import { getUrlKey } from "@/api/utils";
 import systemClean from "../views/systemClean";
 import updateSettings from "../views/updateSettings";
-// import BackUp from "../views/backUp";
+import BackUp from "../views/backUp";
 import restartSettings from "../views/restartSettings";
 import sysInfo from "../views/sysInfo";
 export default {
@@ -107,7 +107,7 @@
   components: {
     systemClean,
     updateSettings,
-    //   BackUp,
+      BackUp,
     restartSettings,
     sysInfo,
   },
@@ -126,6 +126,7 @@
           img_white: "/images/vindicate/绯荤粺娓呯悊-鐧�.png",
           img_welcome: "/images/vindicate/绯荤粺娓呯悊.png",
         },
+        
         {
           name: "閲嶅惎璁剧疆",
           img_black: "/images/vindicate/閲嶅惎璁剧疆-榛�.png",
@@ -133,6 +134,12 @@
           img_welcome: "/images/vindicate/閲嶅惎璁剧疆.png",
         },
         {
+          name: "澶囦唤杩樺師",
+          img_black: "/images/vindicate/绯荤粺娓呯悊-榛�.png",
+          img_white: "/images/vindicate/绯荤粺娓呯悊-鐧�.png",
+          img_welcome: "/images/vindicate/绯荤粺娓呯悊.png",
+        },
+        {
           name: "绯荤粺淇℃伅",
           img_black: "/images/vindicate/绯荤粺淇℃伅-榛�.png",
           img_white: "/images/vindicate/绯荤粺淇℃伅-鐧�.png",
diff --git a/src/pages/vindicate/views/backUp.vue b/src/pages/vindicate/views/backUp.vue
index 075b2a4..e82e73c 100644
--- a/src/pages/vindicate/views/backUp.vue
+++ b/src/pages/vindicate/views/backUp.vue
@@ -2,14 +2,18 @@
   <div class="all">
     <div class="backup-content">
       <div class="backup-center" ref="left">
-        <div class="menu-item" @click="openRight(i)"  v-for="(item, i) in tabList"  :class="activePage == i ? 'menu-item-active' : ''"
-          :key="i">
+        <div
+          class="menu-item"
+          @click="openRight(i)"
+          v-for="(item, i) in tabList"
+          :class="activePage == i ? 'menu-item-active' : ''"
+          :key="i"
+        >
           <div class="con">
             <span class="icon iconfont">{{ item.icon }}</span>
             <span class="menu-text">{{ item.name }}</span>
           </div>
         </div>
-        
       </div>
       <div class="backup-right">
         <div class="auto" v-if="activePage == 0">
@@ -24,14 +28,18 @@
           </div>
           <div class="bar">
             <div class="name">澶囦唤鐩綍</div>
-            <input type="file" id="file_input" webkitdirectory directory />
+            <!-- <input type="file" id="file_input" webkitdirectory directory /> -->
+            <el-input
+              v-model="dir"
+              :placeholder="'璇疯緭鍏ュ浠界洰褰�'"
+              size="small"
+            ></el-input>
           </div>
           <div class="bar">
             <div class="name">澶囦唤闂撮殧 / 澶�</div>
             <el-input
-              v-model="interval"
+              v-model.number="interval"
               :placeholder="'璇疯緭鍏ュぉ鏁�'"
-              @change="handleChange"
               size="small"
             ></el-input>
             <!-- :controls="false" -->
@@ -39,9 +47,8 @@
           <div class="bar">
             <div class="name">澶囦唤鏁版嵁淇濆瓨鏃堕棿 / 澶�</div>
             <el-input
-              v-model="lifeSpan"
+              v-model.number="lifeSpan"
               placeholder="璇疯緭鍏ュぉ鏁�"
-              @change="handleChange"
               size="small"
             ></el-input>
           </div>
@@ -51,6 +58,10 @@
               >绔嬪嵆澶囦唤</el-button
             >
           </div>
+
+          <el-button class="save-btn" type="primary" @click="saveBakConfig"
+            >淇濆瓨</el-button
+          >
         </div>
         <div class="recover" v-if="activePage == 1">
           <div class="title">鏄剧ず澶囦唤鐨勬枃浠惰寖鍥达細{{ 5 }}</div>
@@ -62,9 +73,9 @@
           </div>
 
           <div class="bar" v-for="(item, i) in fileList" :key="i">
-            <span class="time">{{ item.time }}</span>
-            <span class="time">{{ item.name }}</span>
-            <span class="operation">鎭㈠</span>
+            <span class="time">{{ item }}</span>
+            <span class="time">{{ item }}</span>
+            <span class="operation" @click="recoverFile(item)">鎭㈠</span>
           </div>
         </div>
       </div>
@@ -73,70 +84,121 @@
 </template>
 
 <script>
+import {
+  getBakConfig,
+  setBakConfig,
+  backupRN,
+  getBackupList,
+  recoverBackup,
+} from "@/api/system";
 export default {
   mounted() {},
+  created() {
+    this.getBakConfig();
+    this.getBakFileList();
+  },
   data() {
     return {
-       tabList: [
+      tabList: [
         { name: "鑷姩澶囦唤璁剧疆", icon: "\ue6f2" },
         { name: "浠庡浠戒腑鎭㈠", icon: "\ue6db" },
       ],
-      fileList: [
-        { time: "2010-10-02 12:30:09", name: "鏂囦欢1" },
-        { time: "2010-10-02 12:30:09", name: "鏂囦欢12121212121" },
-        { time: "2010-10-02", name: "鏂囦欢2211" },
-        { time: "2011", name: "澶囦唤鏂囦欢2" },
-      ],
+      warnSpn: "\ue71c",
+      fileList: [],
       activePage: 0,
-      interval: "",
-      lifeSpan: "",
-      options: [
-        {
-          value: "閫夐」1",
-          label: "鎵嬪姩",
-        },
-        {
-          value: "閫夐」2",
-          label: "鑷姩",
-        },
-      ],
-      isBackUp: true,
+      interval: null,
+      lifeSpan: null,
+      dir: "",
+      isBackUp: false,
     };
   },
   methods: {
+    getBakFileList() {
+      getBackupList().then((res) => {
+        this.fileList = res.data;
+      });
+    },
+    getBakConfig() {
+      getBakConfig().then((res) => {
+        this.isBackUp = res.data.enable;
+        this.lifeSpan = res.data.saveDays;
+        this.interval = res.data.period;
+        this.dir = res.data.dir;
+      });
+    },
     openRight(i) {
       this.activePage = i;
     },
     handleChange() {},
     backUpNow() {
-      this.$confirm("鎮ㄦ槸鍚︾‘璁ょ珛鍗冲浠芥墍鏈夊簲鐢ㄧ殑閰嶇疆鏁版嵁锛�", "绔嬪嵆澶囦唤", {
+      const h = this.$createElement;
+      const icon = this.$msgbox({
+        title: "",
+        message: h(
+          "div",
+          {
+            style:
+              "display: flex;  flex-direction: column; justify-content: center; align-items: center;",
+          },
+          [
+            h("span", { class: "icon iconfont warn-icon" }, `${this.warnSpn}`),
+            h("span", { class: "warn-title" }, "绔嬪嵆澶囦唤"),
+            h(
+              "span",
+              { class: "warn-dec" },
+              "纭绔嬪嵆澶囦唤鎵�鏈夊簲鐢ㄧ殑閰嶇疆鏁版嵁锛�"
+            ),
+          ]
+        ),
+        showCancelButton: true,
         confirmButtonText: "纭畾",
         cancelButtonText: "鍙栨秷",
       }).then(() => {
-        this.$message({
-          type: "success",
-          message: "澶囦唤鎴愬姛",
-        });
+        backupRN({
+          enable: this.isBackUp,
+          dir: this.dir,
+          period: this.interval,
+          saveDays: this.lifeSpan,
+        })
+          .then((res) => {
+            if (res.code == 200) {
+              this.$notify.success(res.msg);
+            } else {
+              this.$notify.error(res.msg);
+            }
+          })
+          .catch((err) => {
+            this.$notify.error(err.msg);
+          });
       });
-      //  .then((resp) => {
-      //         if (resp.success) {
-      //           this.$message({
-      //             type: "success",
-      //             message: "鍒犻櫎鏁版嵁鎴愬姛",
-      //           });
-      //           this.loading = false;
-      //         }
-      //       })
-      //       .catch((err) => {
-      //         this.$message({
-      //           type: "error",
-      //           message: "鍒犻櫎鏁版嵁澶辫触锛�",
-      //         });
-      //         this.loading = false;
-      //       });
+    },
+    recoverFile(bakDir) {
+      recoverBackup({bakDir}).then((res) => {
+        debugger
+        res.data
+      })
+    },
+    saveBakConfig() {
+      setBakConfig({
+        enable: this.isBackUp,
+        dir: this.dir,
+        period: this.interval,
+        saveDays: this.lifeSpan,
+      })
+        .then((res) => {
+          if (res.code == 200) {
+            this.$notify.success(res.msg);
+            this.getBakConfig();
+          } else {
+            this.$notify.error(res.msg);
+          }
+        })
+        .catch((err) => {
+          this.$notify.error(err.msg);
+        });
     },
     switchChange(val) {
-      console.log(val);
+      this.saveBakConfig();
     },
   },
 };
@@ -144,7 +206,7 @@
 <style lang="scss">
 .all {
   width: 100%;
-  background-color: #FBFAFF;
+  background-color: #fbfaff;
 }
 
 .backup-content {
@@ -154,44 +216,55 @@
   flex: 1;
   flex-basis: auto;
   box-sizing: border-box;
-  border-top:2px solid #E1E0E6 ;
-  border-left:2px solid #E1E0E6 ;
+  border-top: 4px solid rgb(242, 242, 247);
+  border-left: 4px solid rgb(242, 242, 247);
+
   .backup-center {
     height: 100%;
-    width: 280px;
+    width: 300px;
     overflow: auto;
     box-sizing: border-box;
     flex-shrink: 0;
-    padding: 10px;
-    border-right: 5px solid #f8f8f8;
+    padding: 9px 10px 0 10px;
+    border-right: 4px solid rgb(242, 242, 247);
     .menu-item {
       background-color: #f8f8f8;
-      height: 50px;
-      margin-bottom: 10px;
+      height: 56px;
+      margin-bottom: 4px;
       border-radius: 8px;
-      line-height: 50px;
+      line-height: 56px;
       box-sizing: border-box;
       font-size: 14px;
       cursor: pointer;
-      padding: 0 20px;
+      padding: 0 15px;
       display: flex;
       justify-content: space-between;
       .con {
         .iconfont {
+          font-size: 20px;
+          line-height: 32px;
+          width: 32px;
+          height: 26px;
           margin-right: 10px;
+          color: #333;
         }
         .menu-text {
-          font-size: 15px;
+          font-size: 16px;
+          font-weight: 700;
         }
       }
     }
     .menu-item-active {
-      color: #fff;
-      background-color: var(--colorCard);
+      background-color: var(--colorCard) !important;
+      .iconfont {
+        color: #fff !important;
+      }
+      .menu-text {
+        color: #fff;
+      }
     }
     .menu-item:hover {
-      color: #fff;
-      background-color: var(--colorCard);
+      background-color: #f2f2f7;
     }
   }
   .backup-right {
@@ -200,7 +273,6 @@
     overflow: auto;
     box-sizing: border-box;
     position: relative;
-    padding: 20px 40px;
     .el-form-item.is-required:not(.is-no-asterisk)
       > .el-form-item__label:before,
     .el-form-item.is-required:not(.is-no-asterisk)
@@ -303,7 +375,7 @@
           text-align: left;
         }
         .operation {
-          color: rgba(26, 115, 232, 1);
+          color: var(--colorCard);
           cursor: pointer;
           width: 10%;
           text-align: right;
@@ -311,15 +383,12 @@
       }
     }
     .save-btn {
-      background-color: #3d68e1;
-      width: 240px;
+      width: 251px;
       height: 40px;
-      margin: 0 auto;
-      border-radius: 10px;
-      color: #fff;
-      line-height: 40px;
-      font-size: 14px;
-      margin-top: 20px;
+      margin-top: 80px;
+      background: var(--colorCard) !important;
+      border: 1px solid var(--colorCard) !important;
+      border-radius: 25px;
     }
   }
 }
diff --git a/src/pages/vindicate/views/restartSettings.vue b/src/pages/vindicate/views/restartSettings.vue
index 7eb6c19..f93c4d5 100644
--- a/src/pages/vindicate/views/restartSettings.vue
+++ b/src/pages/vindicate/views/restartSettings.vue
@@ -1,9 +1,10 @@
 <template>
-  <div class="restart" 
-   v-loading="loading"
-   :element-loading-text="loadingText"
-   element-loading-spinner="restart-loading"
-   element-loading-background="rgba(0, 0, 0, 0.35)"
+  <div
+    class="restart"
+    v-loading="loading"
+    :element-loading-text="loadingText"
+    element-loading-spinner="restart-loading"
+    element-loading-background="rgba(0, 0, 0, 0.35)"
   >
     <div class="restart-set">
       <div class="t">閲嶅惎璁剧疆</div>
@@ -111,8 +112,8 @@
       timer: null,
       probeSum: 0,
       cronText: "",
-      loading:false,
-      loadingText:"鏅鸿兘璁$畻鑺傜偣姝e湪閲嶅惎锛岃鑰愬績绛夊緟......",
+      loading: false,
+      loadingText: "鏅鸿兘璁$畻鑺傜偣姝e湪閲嶅惎锛岃鑰愬績绛夊緟......",
       cronValueObj: {
         min: "*",
         hour: "*",
@@ -201,7 +202,7 @@
     },
     restart() {
       const h = this.$createElement;
-      const icon = this.$msgbox( {
+      const icon = this.$msgbox({
         title: "",
         message: h(
           "div",
@@ -220,7 +221,7 @@
         cancelButtonText: "鍙栨秷",
       }).then(() => {
         this.loading = true;
-        this.loadingText = "鏅鸿兘璁$畻鑺傜偣姝e湪閲嶅惎锛岃鑰愬績绛夊緟..."
+        this.loadingText = "鏅鸿兘璁$畻鑺傜偣姝e湪閲嶅惎锛岃鑰愬績绛夊緟...";
         rebootServer()
           .then((rsp) => {
             this.probeServer(this.reLogin);
@@ -338,7 +339,7 @@
 <style lang="scss">
 .all {
   width: 100%;
-  background-color: #FBFAFF;
+  background-color: #fbfaff;
 }
 .restart {
   margin: 0 auto;
@@ -351,18 +352,18 @@
   border-left: 4px solid #f2f2f7;
   .t {
     height: 48px;
-    background: #F2F2F7;
+    background: #f2f2f7;
     box-sizing: border-box;
     text-align: left;
     width: 100%;
     padding: 10px 20px;
     line-height: 32px;
-    border-radius:8px ;
+    border-radius: 8px;
   }
   .bar {
     height: 50px;
     width: 100%;
-    background: #F2F2F7;
+    background: #f2f2f7;
     min-width: 300px;
     display: flex;
     justify-content: space-between;
@@ -373,16 +374,16 @@
     margin-top: 4px;
     margin-bottom: 4px;
     .reset-btn {
-     width: 150px;
-     height: 32px;
-     border-radius: 20px;
-     background: rgba(78, 148, 255, 0.1) !important;
-     border: 1px solid var(--colorCard);
-     color: #333333;
-     font-weight: bold;
-     font-size: 14px;
+      width: 150px;
+      height: 32px;
+      border-radius: 20px;
+      background: rgba(78, 148, 255, 0.1) !important;
+      border: 1px solid var(--colorCard);
+      color: #333333;
+      font-weight: bold;
+      font-size: 14px;
     }
-    
+
     .name {
       min-width: 150px;
       text-align: left;
@@ -404,32 +405,30 @@
     .el-date-editor.el-input__inner {
       width: 100%;
     }
-
-    
   }
-  
+
   .el-select {
-      width: 509px;
-      height: 32px;
-     
-      input {
-         background: #FBFAFF !important;
-         border-radius: 20px !important;
-         text-align: center;
-      }
+    width: 509px;
+    height: 32px;
+
+    input {
+      background: #fbfaff !important;
+      border-radius: 20px !important;
+      text-align: center;
     }
+  }
   .el-date-editor {
     width: 509px;
     height: 32px;
-      input {
-         background: #FBFAFF !important;
-         border-radius: 20px !important;
-         text-align: center;
-      }
+    input {
+      background: #fbfaff !important;
+      border-radius: 20px !important;
+      text-align: center;
+    }
 
-      .el-input__prefix {
-        left: 215px !important;
-      } 
+    .el-input__prefix {
+      left: 215px !important;
+    }
   }
   .save-btn {
     width: 251px;
@@ -442,105 +441,104 @@
 }
 
 .restartTimePicker {
-    width: 509px !important;
-    background-color: #FBFAFF !important;
-    margin-top:8px !important;
-   /*  .popper__arrow::after {
+  width: 509px !important;
+  background-color: #fbfaff !important;
+  margin-top: 8px !important;
+  /*  .popper__arrow::after {
     display: none !important;
   } */
-  }
+}
 </style>
 
 <style lang="scss">
 .warn-icon {
-    color: #fe6d68;
-    font-size: 40px;
-    margin-top: 11px;
+  color: #fe6d68;
+  font-size: 40px;
+  margin-top: 11px;
+}
+.warn-title {
+  font-weight: bold;
+  font-size: 16px;
+  margin: 6px;
+  line-height: 22px;
+}
+.warn-dec {
+  font-weight: bold;
+  font-size: 14px;
+  color: #828282;
+  line-height: 20px;
+}
+.el-message-box__headerbtn {
+  top: 12px;
+}
+.el-message-box__headerbtn .el-message-box__close {
+  color: #333333;
+  font-weight: bold;
+}
+.el-message-box__btns {
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+  .el-button:focus,
+  .el-button:hover {
+    background-color: none;
+    border: none;
   }
-  .warn-title {
-    font-weight: bold;
-    font-size: 16px;
-    margin: 6px;
-    line-height: 22px;
-  }
-  .warn-dec {
-    font-weight: bold;
-    font-size: 14px;
-    color: #828282;
-    line-height: 20px;
-  }
-   .el-message-box__headerbtn {
-    top: 12px;
-  }
-  .el-message-box__headerbtn .el-message-box__close {
-    color: #333333;
-    font-weight: bold;
-  }
-  .el-message-box__btns {
-    display: flex;
-    justify-content: center;
-    margin-top: 20px;
-    .el-button:focus,
-    .el-button:hover {
-      background-color: none;
-      border: none;
+  button {
+    width: 175px;
+    height: 40px;
+    border-radius: 25px;
+    span {
+      font-size: 16px;
+      font-weight: 700;
     }
-    button {
-      width: 175px;
-      height: 40px;
-      border-radius: 25px;
-      span {
-        font-size: 16px;
-        font-weight: 700;
-      }
-      &:hover {
-        border: 1px solid var(--colorCard) !important;
-      }
-    }
-    button:first-child {
-      background-color: #e0e0e0;
-      span {
-        color: #333333;
-      }
-    }
-    button:last-child {
-      background-color: var(--colorCard) !important;
+    &:hover {
       border: 1px solid var(--colorCard) !important;
-      span { 
-         color: #fff;
-      }
     }
-   } 
-
-   .restart  .el-loading-mask .el-loading-spinner {
-     top: 40%;
-   }
-
- .restart  .el-loading-mask .el-loading-spinner .el-loading-text {
-     font-size: 16px;
-     font-weight: bold;
-     color: #FFFFFF;
-     margin-top:20px ;
-   }
-
-  .restart .el-loading-mask .restart-loading {
-    background-image: url("/images/desktop/safari.png");
-    display: block;
-    width: 50px;
-    height: 50px;
-    margin-bottom:20px ;   
-    background-size:50px ;
-    margin: 0 auto;
-    animation: rotate 6s linear infinite;
   }
+  button:first-child {
+    background-color: #e0e0e0;
+    span {
+      color: #333333;
+    }
+  }
+  button:last-child {
+    background-color: var(--colorCard) !important;
+    border: 1px solid var(--colorCard) !important;
+    span {
+      color: #fff;
+    }
+  }
+}
 
-  
-@keyframes rotate{
-	0%{
-		transform: rotateZ(0deg);/*浠�0搴﹀紑濮�*/
-	}
-	100%{
-		transform: rotateZ(360deg);/*360搴︾粨鏉�*/
-	}
+.restart .el-loading-mask .el-loading-spinner {
+  top: 40%;
+}
+
+.restart .el-loading-mask .el-loading-spinner .el-loading-text {
+  font-size: 16px;
+  font-weight: bold;
+  color: #ffffff;
+  margin-top: 20px;
+}
+
+.restart .el-loading-mask .restart-loading {
+  background-image: url("/images/desktop/safari.png");
+  display: block;
+  width: 50px;
+  height: 50px;
+  margin-bottom: 20px;
+  background-size: 50px;
+  margin: 0 auto;
+  animation: rotate 6s linear infinite;
+}
+
+@keyframes rotate {
+  0% {
+    transform: rotateZ(0deg); /*浠�0搴﹀紑濮�*/
+  }
+  100% {
+    transform: rotateZ(360deg); /*360搴︾粨鏉�*/
+  }
 }
 </style>
diff --git a/src/pages/vindicate/views/sysInfo.vue b/src/pages/vindicate/views/sysInfo.vue
index 88d08e5..25d1cea 100644
--- a/src/pages/vindicate/views/sysInfo.vue
+++ b/src/pages/vindicate/views/sysInfo.vue
@@ -125,7 +125,6 @@
           this.expireTime = res.data.expireTime;
           this.serializedNumber = res.data.sn;
           this.q = res.data.q;
-          debugger
         }
       });
     },
@@ -174,7 +173,6 @@
         a.download = "key.txt";
         a.click();
         window.URL.revokeObjectURL(url);
-          debugger
         this.refreshSn();
         window.parent.postMessage({ msg: "checkSN" }, "*");
         this.$notify.success("瀵煎嚭鎴愬姛");
diff --git a/src/pages/vindicate/views/updateSettings.vue b/src/pages/vindicate/views/updateSettings.vue
index aeb3ad3..55dfb1a 100644
--- a/src/pages/vindicate/views/updateSettings.vue
+++ b/src/pages/vindicate/views/updateSettings.vue
@@ -182,7 +182,6 @@
 <script>
 import {
   getDevInfo,
-  doUpgrade,
   checkNewVersion,
   upgradeNewVersion,
   uploadUpgradePkg,
@@ -390,7 +389,6 @@
     flex-shrink: 0;
     padding: 9px 10px 0 10px;
     border-right: 4px solid rgb(242, 242, 247);
-
     .menu-item {
       height: 56px;
       margin-bottom: 4px;

--
Gitblit v1.8.0