基础设施

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,7 +320,7 @@
   }
 </script>
 <style lang="less" scoped>
-.infrastructrueBox {
+  .infrastructrueBox {
     width: 10.87rem;
     padding: 0.2rem;
     background: #f3f5f9;
@@ -305,8 +331,9 @@
       span {
         display: inline-block;
         height: 0.24rem;
+        font-size: 0.14rem;
         line-height: 0.24rem;
-      border: 0.01rem solid #cccccc;
+        border: 0;
         border-radius: 0.12rem;
         margin-left: 0.1rem;
         text-align: center;
@@ -318,10 +345,11 @@
         margin: 0.1rem 0;
       }
       .down {
-      border: 0.01rem solid #0087ff;
+        background: #0087ff;
-      color: #0087ff;
+        color: #ffffff;
       }
       .tabBox {
+        height: 0.3rem;
         margin-bottom: 0.16rem;
       }
       .tabBox:last-of-type {
@@ -418,5 +446,5 @@
         background-color: #fafafa;
       }
     }
-}
+  }
 </style>