From e309dbbb906fbe00a942d9bd3c655cfdcabc3ce6 Mon Sep 17 00:00:00 2001
From: "851673013@qq.com" <851673013@qq.com>
Date: Sat, 25 Jun 2022 15:08:19 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9F=BA=E7=A1=80=E8=AE=BE=E6=96=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front/src/views/home/infrastructurePage.vue | 260 +++++++++++---------
 1 file changed, 144 insertions(+), 116 deletions(-)

diff --git a/front/src/views/home/infrastructurePage.vue b/front/src/views/home/infrastructurePage.vue
index c8b3c1fe..77619779 100644
--- a/front/src/views/home/infrastructurePage.vue
+++ b/front/src/views/home/infrastructurePage.vue
@@ -8,7 +8,7 @@
         <span
           v-for="itemContent in item.content"
           :key="itemContent"
-          @click="tabClick(index, itemContent)"
+          @click="tabClick(index, itemContent, itemContent)"
           :class="
             clickList[index].content.indexOf(itemContent) != -1 ? 'down' : ''
           "
@@ -69,7 +69,7 @@
         class="ant-table-striped"
         :dataSource="dataSource"
         :columns="columns"
-        :scroll="{ y: 600 }"
+        :scroll="{ y: tableHeight }"
         :rowClassName="
           (record, index) => (index % 2 === 1 ? 'table-striped' : null)
         "
@@ -79,7 +79,12 @@
           selectedRowKeys: selectedRowKeys,
           onChange: onSelectChange,
         }"
-      />
+      >
+        <template slot="status" slot-scope="text, record, index">
+          <span>正常</span>
+          <span>失效</span>
+        </template>
+      </a-table>
     </div>
   </div>
 </template>
@@ -115,20 +120,41 @@
   }
   let clickList = ref([]) //存储点击的tab
   init()
+  //表格的高度
+  let tableHeight = ref('600')
   //tab切换点击事件
-  const tabClick = (indexFather, name) => {
+  const tabClick = (indexFather, name, fatherName) => {
     if (clickList.value[indexFather].content.indexOf(name) != -1) {
-      // debugger
+      debugger
+      if (fatherName == '视频资源') {
+        debugger
+        tableHeight.value = 330
+      } else if (fatherName == '云资源') {
+        debugger
+        tableHeight.value = 600
+      } else if (fatherName == '感知资源') {
+        debugger
+        tableHeight.value = 330
+      }
       clickList.value[indexFather].content.splice(
         clickList.value[indexFather].content.indexOf(name),
         1
       )
     } else {
-      // debugger
+      debugger
+      if (fatherName == '视频资源') {
+        debugger
+        tableHeight.value = 330
+      } else if (fatherName == '云资源') {
+        debugger
+        tableHeight.value = 600
+      } else if (fatherName == '感知资源') {
+        debugger
+        tableHeight.value = 330
+      }
       clickList.value[indexFather].content[0] = name
     }
     console.log('clickList.value', clickList.value)
-    // debugger
   }
   const name = ref('')
   // 搜索框
@@ -294,129 +320,131 @@
   }
 </script>
 <style lang="less" scoped>
-.infrastructrueBox {
-  width: 10.87rem;
-  padding: 0.2rem;
-  background: #f3f5f9;
-  .infrastructrue-tab {
-    background: #ffffff;
+  .infrastructrueBox {
+    width: 10.87rem;
     padding: 0.2rem;
-    border-bottom: 0.01rem solid rgba(150, 144, 144, 0.3);
-    span {
-      display: inline-block;
-      height: 0.24rem;
-      line-height: 0.24rem;
-      border: 0.01rem solid #cccccc;
-      border-radius: 0.12rem;
-      margin-left: 0.1rem;
-      text-align: center;
-      color: #666666;
-      cursor: pointer;
-      padding: 0 0.08rem;
-    }
-    .leftType {
-      margin: 0.1rem 0;
-    }
-    .down {
-      border: 0.01rem solid #0087ff;
-      color: #0087ff;
-    }
-    .tabBox {
-      margin-bottom: 0.16rem;
-    }
-    .tabBox:last-of-type {
-      margin-bottom: 0;
-    }
-  }
-  .infrastructrue-content {
-    display: flex;
-    justify-content: space-between;
-    padding: 0.14rem 0.2rem 0.1rem;
-    background: #ffffff;
-    .contentNum {
-      position: relative;
-      display: flex;
-      p {
+    background: #f3f5f9;
+    .infrastructrue-tab {
+      background: #ffffff;
+      padding: 0.2rem;
+      border-bottom: 0.01rem solid rgba(150, 144, 144, 0.3);
+      span {
+        display: inline-block;
+        height: 0.24rem;
+        font-size: 0.14rem;
+        line-height: 0.24rem;
+        border: 0;
+        border-radius: 0.12rem;
+        margin-left: 0.1rem;
+        text-align: center;
         color: #666666;
-        padding: 0;
-        margin: 0;
-        span {
-          color: #0087ff;
-          font-size: 0.2rem;
-          font-weight: 500;
-        }
+        cursor: pointer;
+        padding: 0 0.08rem;
       }
-      p:first-of-type {
-        padding-right: 0.16rem;
-        margin-right: 0.16rem;
+      .leftType {
+        margin: 0.1rem 0;
       }
-      .boundary {
-        position: absolute;
-        left: 0.9rem;
-        top: 0.07rem;
-        display: block;
-        width: 0.02rem;
-        border-radius: 0.01rem;
-        height: 0.2rem;
-        background: rgba(150, 144, 144, 0.3);
+      .down {
+        background: #0087ff;
+        color: #ffffff;
+      }
+      .tabBox {
+        height: 0.3rem;
+        margin-bottom: 0.16rem;
+      }
+      .tabBox:last-of-type {
+        margin-bottom: 0;
       }
     }
-    .contentRight {
-      position: relative;
+    .infrastructrue-content {
       display: flex;
       justify-content: space-between;
-      .boundary {
-        position: absolute;
-        left: 3.74rem;
-        top: 0.07rem;
-        display: block;
-        width: 0.02rem;
-        border-radius: 0.01rem;
-        height: 0.2rem;
-        background: rgba(150, 144, 144, 0.3);
-      }
-      .searchInput {
+      padding: 0.14rem 0.2rem 0.1rem;
+      background: #ffffff;
+      .contentNum {
+        position: relative;
         display: flex;
-        margin-right: 0.2rem;
-        .ant-input-search {
-          max-width: 4rem;
-        }
-        :deep(.ant-input) {
-          width: 2rem;
-          height: 0.36rem;
-          font-size: 0.14rem;
-          color: #b2b2b2;
-          background: #f5f5f5;
-        }
-        :deep(.ant-input-group-addon) {
-          display: inline-block;
-          margin-left: 0.1rem;
-          .ant-input-search-button {
-            width: 0.8rem;
-            height: 0.36rem;
-            background: #0558e1;
-            border-radius: 0.04rem;
-            font-size: 0.14rem;
+        p {
+          color: #666666;
+          padding: 0;
+          margin: 0;
+          span {
+            color: #0087ff;
+            font-size: 0.2rem;
+            font-weight: 500;
           }
         }
-        :deep(.ant-btn) {
-          background: #0558e1;
-          border-radius: 0.04rem;
+        p:first-of-type {
+          padding-right: 0.16rem;
+          margin-right: 0.16rem;
+        }
+        .boundary {
+          position: absolute;
+          left: 0.9rem;
+          top: 0.07rem;
+          display: block;
+          width: 0.02rem;
+          border-radius: 0.01rem;
+          height: 0.2rem;
+          background: rgba(150, 144, 144, 0.3);
         }
       }
-      .buttonAdd {
-        background: #0558e1;
-        border-radius: 0.04rem;
-        height: 0.36rem;
-        border-color: #0558e1;
-        margin-left: 0.1rem;
+      .contentRight {
+        position: relative;
+        display: flex;
+        justify-content: space-between;
+        .boundary {
+          position: absolute;
+          left: 3.74rem;
+          top: 0.07rem;
+          display: block;
+          width: 0.02rem;
+          border-radius: 0.01rem;
+          height: 0.2rem;
+          background: rgba(150, 144, 144, 0.3);
+        }
+        .searchInput {
+          display: flex;
+          margin-right: 0.2rem;
+          .ant-input-search {
+            max-width: 4rem;
+          }
+          :deep(.ant-input) {
+            width: 2rem;
+            height: 0.36rem;
+            font-size: 0.14rem;
+            color: #b2b2b2;
+            background: #f5f5f5;
+          }
+          :deep(.ant-input-group-addon) {
+            display: inline-block;
+            margin-left: 0.1rem;
+            .ant-input-search-button {
+              width: 0.8rem;
+              height: 0.36rem;
+              background: #0558e1;
+              border-radius: 0.04rem;
+              font-size: 0.14rem;
+            }
+          }
+          :deep(.ant-btn) {
+            background: #0558e1;
+            border-radius: 0.04rem;
+          }
+        }
+        .buttonAdd {
+          background: #0558e1;
+          border-radius: 0.04rem;
+          height: 0.36rem;
+          border-color: #0558e1;
+          margin-left: 0.1rem;
+        }
+      }
+    }
+    .infrastructrue-table {
+      .ant-table-striped :deep(.table-striped) td {
+        background-color: #fafafa;
       }
     }
   }
-  .infrastructrue-table {
-    .ant-table-striped :deep(.table-striped) td {
-      background-color: #fafafa;
-    }
-  }
-}
 </style>