From 03c4325919c4407753fb8d8f61088b64143d72ab Mon Sep 17 00:00:00 2001
From: gaoyuanwei <2826352639@qq.com>
Date: Sat, 25 Jun 2022 15:26:42 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9F=BA=E7=A1=80=E8=AE=BE=E6=96=BD-=E9=80=89?=
 =?UTF-8?q?=E4=B8=AD=E6=95=B0=E9=87=8F=E7=BB=91=E5=AE=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front/src/views/home/infrastructurePage.vue | 233 ++++++++++----------
 1 file changed, 112 insertions(+), 121 deletions(-)

diff --git a/front/src/views/home/infrastructurePage.vue b/front/src/views/home/infrastructurePage.vue
index 77619779..cd59abab 100644
--- a/front/src/views/home/infrastructurePage.vue
+++ b/front/src/views/home/infrastructurePage.vue
@@ -29,7 +29,7 @@
         <i class="boundary"></i>
         <p>
           已选
-          <span>22</span>
+          <span>{{ allClick.length }}</span>
           个
         </p>
       </div>
@@ -79,12 +79,7 @@
           selectedRowKeys: selectedRowKeys,
           onChange: onSelectChange,
         }"
-      >
-        <template slot="status" slot-scope="text, record, index">
-          <span>正常</span>
-          <span>失效</span>
-        </template>
-      </a-table>
+      ></a-table>
     </div>
   </div>
 </template>
@@ -125,15 +120,11 @@
   //tab切换点击事件
   const tabClick = (indexFather, name, fatherName) => {
     if (clickList.value[indexFather].content.indexOf(name) != -1) {
-      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(
@@ -141,15 +132,11 @@
         1
       )
     } else {
-      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
@@ -296,12 +283,16 @@
       key: 'address',
     },
   ])
-  // const selectedRowKeys =
+  const allClick = ref([])
+  const onSelectChange = (selectedRowKeys) => {
+    console.log('hahhahah', selectedRowKeys)
+    allClick.value = selectedRowKeys
+  }
   const pagination = ref({
     total: 0,
     pageSize: 10, //每页中显示10条数据
     showSizeChanger: true,
-    pageSizeOptions: ['5', '15', '30', '45'], //每页中显示的数据
+    pageSizeOptions: ['5', '10', '15', '20'], //每页中显示的数据
   })
   const queryParam = ref({
     page: 1, //第几页
@@ -320,131 +311,131 @@
   }
 </script>
 <style lang="less" scoped>
-  .infrastructrueBox {
-    width: 10.87rem;
+.infrastructrueBox {
+  width: 10.87rem;
+  padding: 0.2rem;
+  background: #f3f5f9;
+  .infrastructrue-tab {
+    background: #ffffff;
     padding: 0.2rem;
-    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;
+    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;
+      cursor: pointer;
+      padding: 0 0.08rem;
+    }
+    .leftType {
+      margin: 0.1rem 0;
+    }
+    .down {
+      background: #0087ff;
+      color: #ffffff;
+    }
+    .tabBox {
+      height: 0.3rem;
+      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 {
         color: #666666;
-        cursor: pointer;
-        padding: 0 0.08rem;
+        padding: 0;
+        margin: 0;
+        span {
+          color: #0087ff;
+          font-size: 0.2rem;
+          font-weight: 500;
+        }
       }
-      .leftType {
-        margin: 0.1rem 0;
+      p:first-of-type {
+        padding-right: 0.16rem;
+        margin-right: 0.16rem;
       }
-      .down {
-        background: #0087ff;
-        color: #ffffff;
-      }
-      .tabBox {
-        height: 0.3rem;
-        margin-bottom: 0.16rem;
-      }
-      .tabBox:last-of-type {
-        margin-bottom: 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);
       }
     }
-    .infrastructrue-content {
+    .contentRight {
+      position: relative;
       display: flex;
       justify-content: space-between;
-      padding: 0.14rem 0.2rem 0.1rem;
-      background: #ffffff;
-      .contentNum {
-        position: relative;
-        display: flex;
-        p {
-          color: #666666;
-          padding: 0;
-          margin: 0;
-          span {
-            color: #0087ff;
-            font-size: 0.2rem;
-            font-weight: 500;
-          }
-        }
-        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);
-        }
+      .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);
       }
-      .contentRight {
-        position: relative;
+      .searchInput {
         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);
+        margin-right: 0.2rem;
+        .ant-input-search {
+          max-width: 4rem;
         }
-        .searchInput {
-          display: flex;
-          margin-right: 0.2rem;
-          .ant-input-search {
-            max-width: 4rem;
-          }
-          :deep(.ant-input) {
-            width: 2rem;
+        :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;
-            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;
+            font-size: 0.14rem;
           }
         }
-        .buttonAdd {
+        :deep(.ant-btn) {
           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;
+      .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;
+    }
+  }
+}
 </style>