From 878ce80ef3ca88a2c108fbc713cd6ea461c44de1 Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期三, 13 十月 2021 13:51:03 +0800
Subject: [PATCH] 拓扑图

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

diff --git a/src/pages/settings/views/NetSettings.vue b/src/pages/settings/views/NetSettings.vue
index 1aa1240..5d283e1 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">
-            <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>
@@ -177,10 +178,13 @@
             </el-form>
           </div>
 
-          <div class="general-box">
-            <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">
@@ -414,6 +418,8 @@
         },
       ],
       value: "",
+      IPV4_hid: false,
+      IPV6_hid: false
     };
   },
   components: {
@@ -489,10 +495,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 = {
@@ -549,6 +560,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() {
@@ -814,11 +836,30 @@
     .wifi-detail {
       max-width: 600px;
       margin: 0 auto;
+      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;
         }
@@ -879,6 +920,7 @@
         line-height: 48px;
       }
       .ad {
+        margin-top: 10px;
         height: 32px;
         /* margin: 4px 0px 4px 5px; */
         /* border-radius: 5px; */

--
Gitblit v1.8.0