CN-240 feat: entity列表（行式）

src/assets/css/components/views/entityExplorer/entityList/entityList.scss

@@ -20,6 +20,15 @@
       display: flex;
       flex-direction: column;
       overflow: hidden auto;
+
+      .cn-entity__shadow {
+        position: fixed;
+        height: 100vh;
+        width: 100vw;
+        left: 0;
+        top: 0;
+        background-color: rgba(0, 0, 0, .2);
+      }
     }
   }
 }

src/assets/css/components/views/entityExplorer/entityList/row.scss

@@ -9,7 +9,21 @@
     align-items: flex-start;
     background-color: #F3F7FA;
 
-    i {
+    span {
+      transform: rotate(0);
+      transition: all linear .2s;
+      padding-top: 0;
+
+      &.reg-down {
+        padding-top: 2px;
+        transform: rotate(90deg);
+      }
+    }
+    span:hover {
+      cursor: pointer;
+    }
+
+    .cn-icon-arrow-right {
       color: #ADBCCA;
       font-size: 12px;
     }
@@ -47,6 +61,7 @@
 
       .cn-entity__header {
         font-size: 16px;
+        padding-bottom: 3px;
         color: #333333;
       }
       .cn-entity__body {
@@ -85,6 +100,10 @@
             padding: 0 30px;
             font-size: 12px;
             color: #3976CB;
+
+            &:hover {
+              cursor: pointer;
+            }
           }
         }
       }

src/views/entityExplorer/entityList/EntityList.vue

@@ -7,10 +7,12 @@
       <!-- 列表式 -->
       <template v-if="listMode === 'list'">
         <div class="entity-list--list">
+          <div v-if="isCollapse" class="cn-entity__shadow"></div>
           <entity-row
               v-for="(data, index) in listData"
               :entity="data"
               :key="index"
+              @showCollapse="showCollapse"
           ></entity-row>
         </div>
       </template>
@@ -68,7 +70,8 @@ export default {
     return {
       showDetail: false,
       typeName: '',
-      entityList: []
+      entityList: [],
+      isCollapse: false
     }
   },
   methods: {
@@ -96,6 +99,9 @@ export default {
     },
     entityDetail (params) {
       this.$emit('showDetail', { ...params, icon: this.iconClass })
+    },
+    showCollapse (isCollapse) {
+      this.isCollapse = isCollapse
     }
   }
 }

src/views/entityExplorer/entityList/Row.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="cn-entity--list">
+  <div class="cn-entity--list" :style="{zIndex: isCollapse ? 1 : 'unset'}">
     <!-- 左侧下拉按钮 -->
     <div class="cn-entity__collapse">
-      <span><i class="cn-icon cn-icon-arrow-right"></i></span>
+      <span @click="showCollapse" :class="{'reg-down': isCollapse}"><i class="cn-icon cn-icon-arrow-right"></i></span>
     </div>
     <div class="cn-entity__case">
       <div class="cn-entity__icon"><i :class="iconClass"></i></div>
@@ -65,26 +65,26 @@
               <!-- 通用字段 -->
               <div class="basic-info__item">
                 <i class="cn-icon cn-icon-rise"></i>
-                <span>{{$t('entities.risk')}}&nbsp;:&nbsp;&nbsp;</span>
+                <span>{{$t('entities.sentThroughput')}}&nbsp;:&nbsp;&nbsp;</span>
                 <span>{{entityData.bytesSentRate || '-'}}</span>
               </div>
               <div class="basic-info__item">
                 <i class="cn-icon cn-icon-fall"></i>
-                <span>{{$t('entities.risk')}}&nbsp;:&nbsp;&nbsp;</span>
+                <span>{{$t('entities.receivedThroughput')}}&nbsp;:&nbsp;&nbsp;</span>
                 <span>{{entityData.bytesReceivedRate || '-'}}</span>
               </div>
               <div class="basic-info__item">
                 <i class="cn-icon cn-icon-entity-alert"></i>
-                <span>{{$t('entities.risk')}}&nbsp;:&nbsp;&nbsp;</span>
+                <span>{{$t('entities.recentAlert')}}&nbsp;:&nbsp;&nbsp;</span>
                 <span>{{entityData.alertCount || '-'}}</span>
               </div>
               <div class="basic-info__item">
                 <i class="cn-icon cn-icon-safe"></i>
-                <span>{{$t('entities.risk')}}&nbsp;:&nbsp;&nbsp;</span>
+                <span>{{$t('entities.recentSecurity')}}&nbsp;:&nbsp;&nbsp;</span>
                 <span>{{entityData.securityCount || '-'}}</span>
               </div>
             </div>
-            <div class="show-detail">{{$t('overall.detail')}}>></div>
+            <div class="show-detail" :style="{visibility: isCollapse ? 'visible' : 'hidden'}">{{$t('overall.detail')}}>></div>
           </div>
           <div class="body__detail"></div>
         </div>
@@ -97,6 +97,17 @@
 import entityListMixin from './entityListMixin'
 export default {
   name: 'Row',
-  mixins: [entityListMixin]
+  mixins: [entityListMixin],
+  data () {
+    return {
+      isCollapse: false
+    }
+  },
+  methods: {
+    showCollapse () {
+      this.isCollapse = !this.isCollapse
+      this.$emit('showCollapse', this.isCollapse)
+    }
+  }
 }
 </script>