From 9be3c4c4436549b097b93667f3febd592e55480f Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期四, 14 十月 2021 13:51:12 +0800
Subject: [PATCH] 显示有几个算法单元

---
 src/pages/settings/views/NetSettings.vue |   80 ++++++++++++++++++++++++++++++----------
 1 files changed, 60 insertions(+), 20 deletions(-)

diff --git a/src/pages/settings/views/NetSettings.vue b/src/pages/settings/views/NetSettings.vue
index 84a1f90..de44c6d 100644
--- a/src/pages/settings/views/NetSettings.vue
+++ b/src/pages/settings/views/NetSettings.vue
@@ -79,7 +79,7 @@
             </div>
           </div>
         </div>
-        <div class="wifi-detail" v-if="activePage == 1 && inWifiDetail">
+        <div class="wifi-detail" v-if="activePage == 1 && inWifiDetail" ref="ipvHolder">
           <div class="title">鏃犵嚎缃戠粶</div>
           <div class="btns">
             <div class="cancel">鍒犻櫎</div>
@@ -91,7 +91,6 @@
 
             <el-form
               :model="wifiForm"
-              :rules="wifiFormRules"
               ref="wifiForm"
               class="join-form"
             >
@@ -119,12 +118,14 @@
 
           <switchBar
             :barName="`楂樼骇璁剧疆`"
-            @switchChange="highClassSetting"
             :value="isHighClass"
           ></switchBar>
 
-          <div class="general-box" style="margin-bottom: 20px">
-            <div class="in-title">IPV4</div>
+          <div class="general-box fold" :class="{'hidden':IPV4_hid}" >
+            <div class="in-title">IPV4 
+              <span class="icon iconfont icon-fold"
+               @click="toggleFold('IPV4_hid')">&#xe757;</span>
+            </div>
 
             <el-form :model="ipv4Form" :rules="ipv4FormRules" ref="ipv4Form">
               <el-form-item>
@@ -178,10 +179,13 @@
             </el-form>
           </div>
 
-          <div class="general-box" style="margin-bottom: 20px">
-            <div class="in-title">IPV6</div>
+          <div class="general-box fold" :class="{'hidden':IPV6_hid}" ref="ipv6Holder">
+            <div class="in-title">IPV6 
+              <span class="icon iconfont icon-fold"
+              @click="toggleFold('IPV6_hid')">&#xe757;</span>
+            </div>
 
-            <el-form :model="ipv6Form" :rules="ipv6FormRules" ref="ipv4Form">
+            <el-form :model="ipv6Form" :rules="ipv6FormRules" ref="ipv6Form">
               <el-form-item>
                 <div class="p-title">鏂规硶</div>
                 <el-select v-model="value" placeholder="璇烽�夋嫨" size="small" :popper-append-to-body="false">
@@ -204,18 +208,18 @@
                 <div class="p-title">鍓嶇紑</div>
                 <div style="display: flex; width: 100%">
                   <el-input
-                    v-model="wifiForm.password"
+                    v-model="ipv6Form.prefix"
                     placeholder
                     size="small"
                   ></el-input>
 
                   <div class="ad">
-                    <i class="el-icon-remove-outline"></i>
+                    <i class="el-icon-remove-outline" @click="minusPrefix"></i>
                   </div>
                   <div class="ad">
-                    <i class="el-icon-circle-plus-outline"></i>
+                    <i class="el-icon-circle-plus-outline" @click="+(ipv6Form.prefix)++"></i>
                   </div>
-                  <div class="ad"><i class="el-icon-refresh-left"></i></div>
+                  <div class="ad"><i class="el-icon-refresh-left" @click="ipv6Form.prefix=''"></i></div>
                 </div>
               </el-form-item>
 
@@ -415,6 +419,8 @@
         },
       ],
       value: "",
+      IPV4_hid: false,
+      IPV6_hid: false
     };
   },
   components: {
@@ -426,6 +432,10 @@
     this.fetchWireList();
   },
   methods: {
+    minusPrefix(){
+      debugger
+      this.ipv6Form.prefix
+    },
     switchNetCard(item) {
       if (item.active) {
         upNetCard({ ifname: item.name }).then(
@@ -490,10 +500,15 @@
       });
     },
     openRight(i) {
-      this.activePage = i;
+      if (i == 0) {
+        this.ruleForm.deviceName = "";
+        this.ruleForm.port = "";
+        this.getCurServer()
+      }      
       if (i == 1) {
         this.inWifiDetail = false;
       }
+      this.activePage = i;
     },
     saveWire(ifname) {
       let data = {
@@ -550,6 +565,17 @@
         this.openWireDetail(item);
       });
     },
+    toggleFold(tog) {
+    const demo = this.$refs.ipvHolder
+    if(!(this.IPV4_hid&&!this.IPV6_hid)){
+       setTimeout(() => {
+       demo.scrollIntoView({block: "end", inline: "nearest",behavior: 'smooth'})
+       }, 300);
+    }
+    this[tog] = !this[tog]
+     
+     
+     }
   },
   computed: {
     showStatus() {
@@ -822,17 +848,30 @@
     .wifi-detail {
       max-width: 454px;
       margin: 0 auto;
-      .title {
-        background: #f2f2f7;
-        border-radius: 8px;
-        height: 48px;
-        margin-bottom: 4px;
-      }
+      transition: all 0.3s linear 0s;
       .general-box {
+        overflow: hidden;
+        transition: all 0.3s linear 0s;
         background: #f2f2f7;
         border-radius: 8px;
         padding-bottom: 10px;
-
+        margin-bottom: 20px;
+        &.fold {
+        height: 342px;
+          .icon-fold {
+            display: inline-block;
+            font-size: 14px;
+            margin-left: 360px;
+            transition: all 0.3s linear 0s;
+            cursor: pointer;
+          }
+        }
+        &.hidden {
+        height: 34px;
+         .icon-fold {
+           transform: rotate(180deg);
+         }
+        }
         .el-form-item {
           margin-bottom: 0px;
         }
@@ -884,6 +923,7 @@
         line-height: 48px;
       }
       .ad {
+        margin-top: 10px;
         height: 32px;
         text-align: center;
         font-size: 17px;

--
Gitblit v1.8.0