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

src/assets/css/components/components/entities/entities.scss

@@ -100,13 +100,11 @@
 
             i {
               font-size: 22px;
-              color: #23bf9a;
             }
           }
           .header__content {
             font-size: 22px;
             color: #333333;
-            font-family: PingFangSC-Medium;
             font-weight: 500;
             overflow: hidden;
             text-overflow: ellipsis;

src/assets/css/components/index.scss

@@ -15,3 +15,4 @@
 @import './views/entityExplorer/entityFilter';
 @import './views/entityExplorer/entityList/entityList';
 @import './views/entityExplorer/entityList/card';
+@import './views/entityExplorer/entityList/row';

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

@@ -35,6 +35,7 @@
   .explorer-container {
     display: flex;
     height: 100%;
+    overflow: hidden auto;
   }
   .explorer-foot {
     display: flex;

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

@@ -2,7 +2,6 @@
   display: flex;
   flex-direction: column;
   width: 280px;
-  padding-top: 10px;
   margin-right: 10px;
 
   .filter-case__header {
@@ -19,11 +18,11 @@
     flex-direction: column;
     border: 1px solid #E7EAED;
     margin-bottom: 10px;
-    padding: 0 15px;
     background-color: white;
 
     .filter__header {
       height: 46px;
+      margin: 0 15px;
       line-height: 46px;
       border-bottom: 1px solid #EFF2F5;
       font-size: 14px;
@@ -35,6 +34,7 @@
       .filter__row {
         display: flex;
         justify-content: space-between;
+        padding: 0 15px;
         height: 26px;
         align-items: center;
         cursor: pointer;

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

@@ -42,12 +42,11 @@
       width: 52px;
       height: 52px;
       border-radius: 50%;
-      background: #e8fbf9;
+      background-color: #F3F7FA;
-      border: 2px solid #e8fbf9;
 
       i {
         font-size: 22px;
-        color: #23bf9a;
+        color: #4E84B4;
       }
     }
     .header__content {

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

@@ -1,7 +1,6 @@
 .entity-list {
   width: calc(100% - 290px);
-  height: 100%;
+  flex: 1;
-  padding-top: 10px;
 
   .entity-list__content {
     height: 100%;
@@ -17,5 +16,10 @@
       width: calc(100% - 10px);
       overflow: hidden auto;
     }
+    .entity-list--list {
+      display: flex;
+      flex-direction: column;
+      overflow: hidden auto;
+    }
   }
 }

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

@@ -0,0 +1,93 @@
+.cn-entity--list {
+  display: flex;
+  .cn-entity__collapse {
+    margin-bottom: 1px;
+    padding-top: 30px;
+    width: 24px;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    background-color: #F3F7FA;
+
+    i {
+      color: #ADBCCA;
+      font-size: 12px;
+    }
+  }
+  .cn-entity__case {
+    flex: 1;
+    display: flex;
+    padding: 16px 0;
+    margin-bottom: 1px;
+    background-color: white;
+
+    .cn-entity__icon {
+      margin-left: 26px;
+      margin-right: 10px;
+      overflow: hidden;
+      display: flex;
+      justify-content: center;
+      justify-items: center;
+      align-items: center;
+      width: 52px;
+      height: 52px;
+      border-radius: 50%;
+      background-color: #F3F7FA;
+
+      i {
+        font-size: 22px;
+        color: #4E84B4;
+      }
+    }
+    .cn-entity__row {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      justify-content: center;
+
+      .cn-entity__header {
+        font-size: 16px;
+        color: #333333;
+      }
+      .cn-entity__body {
+        display: flex;
+        flex-direction: column;
+
+        .body__basic-info {
+          display: flex;
+          flex-direction: row;
+
+          .basic-info {
+            flex: 1;
+            display: flex;
+            flex-direction: row;
+
+            .basic-info__item {
+              padding-right: 40px;
+              i {
+                padding-right: 6px;
+                color: #8FA1BE;
+                font-size: 12px;
+              }
+              span {
+                font-size: 14px;
+              }
+              span:first-of-type {
+                color: #999;
+              }
+              span:last-of-type {
+                color: #666;
+              }
+            }
+          }
+          .show-detail {
+            flex-shrink: 0;
+            padding: 0 30px;
+            font-size: 12px;
+            color: #3976CB;
+          }
+        }
+      }
+    }
+  }
+}

src/assets/css/components/views/entityExplorer/search/explorerSearch.scss

@@ -6,6 +6,7 @@
   background-image: url('~@/assets/img/cn-explore-bg.svg');
   background-repeat: no-repeat;
   background-position: 0 100%;
+  margin-bottom: 10px;
 
   &.explorer-search--show-list {
     flex: 0 0 40px;

src/utils/constants.js

@@ -74,7 +74,7 @@ export const entityFilterType = {
     {
       column: 'city_distinct_count',
       labelI18nCode: 'overall.city',
-      icon: 'el-icon-s-home'
+      icon: 'cn-icon cn-icon-city'
     },
     {
       column: 'asn_distinct_count',

src/views/entityExplorer/entityList/Card.vue

@@ -128,61 +128,9 @@
 </template>
 
 <script>
-import _ from 'lodash'
+import entityListMixin from './entityListMixin'
 export default {
   name: 'Card',
-  props: {
+  mixins: [entityListMixin]
-    entity: Object
-  },
-  data () {
-    return {
-    }
-  },
-  methods: {
-    entityDetail (entity) {
-
-    },
-    queryTraffic () {
-
-    },
-    querySecurity () {
-
-    },
-    queryAlert () {
-
-    }
-  },
-  computed: {
-    iconClass () {
-      let className
-      switch (this.entityData.entityType) {
-        case ('ip'): {
-          className = 'cn-icon cn-icon-ip domain-blue'
-          break
-        }
-        case ('domain'): {
-          className = 'cn-icon cn-icon-domain domain-blue'
-          break
-        }
-        case ('app'): {
-          className = 'cn-icon cn-icon-app domain-blue'
-          break
-        }
-        default: break
-      }
-      return className
-    }
-  },
-  mounted () {
-    setTimeout(() => { this.queryTraffic() })
-    setTimeout(() => { this.querySecurity() })
-    setTimeout(() => { this.queryAlert() })
-  },
-  setup (props) {
-    const entityData = _.cloneDeep(props.entity)
-    return {
-      entityData
-    }
-  }
 }
 </script>

src/views/entityExplorer/entityList/Row.vue

@@ -1,9 +1,102 @@
 <template>
-
+  <div class="cn-entity--list">
+    <!-- 左侧下拉按钮 -->
+    <div class="cn-entity__collapse">
+      <span><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>
+      <div class="cn-entity__row">
+        <div class="cn-entity__header">{{entityData.ipAddr || entityData.domainName || entityData.appName || 'Unknown'}}</div>
+        <div class="cn-entity__body">
+          <div class="body__basic-info">
+            <div class="basic-info">
+              <template v-if="entityData.entityType === 'ip'">
+                <div class="basic-info__item">
+                  <i class="cn-icon cn-icon-country">$t('overall.country')&nbsp;:&nbsp;&nbsp;</i>
+                  <span>$t('overall.country')&nbsp;:&nbsp;&nbsp;</span>
+                  <span>{{entityData.ipLocationCountry || '-'}}</span>
+                </div>
+                <div class="basic-info__item">
+                  <i class="cn-icon cn-icon-position"></i>
+                  <span>$t('overall.region')&nbsp;:&nbsp;&nbsp;</span>
+                  <span>{{entityData.ipLocationProvince ? (entityData.ipLocationProvince + ', ' + entityData.ipLocationCity) : '-'}}</span>
+                </div>
+                <div class="basic-info__item">
+                  <i class="cn-icon cn-icon-cloud"></i>
+                  <span>$t('overall.asn')&nbsp;:&nbsp;&nbsp;</span>
+                  <span>{{entityData.ipAsn || '-'}}</span>
+                </div>
+              </template>
+              <template v-else-if="entityData.entityType === 'domain'">
+                <div class="basic-info__item">
+                  <i class="cn-icon cn-icon-category"></i>
+                  <span>{{$t('entities.domainDetail.categoryGroup')}}&nbsp;:&nbsp;&nbsp;</span>
+                  <span>{{entityData.domainCategoryGroup || '-'}}</span>
+                </div>
+                <div class="basic-info__item">
+                  <i class="cn-icon cn-icon-sub-category"></i>
+                  <span>{{$t('entities.category')}}&nbsp;:&nbsp;&nbsp;</span>
+                  <span>{{entityData.domainCategory || '-'}}</span>
+                </div>
+                <div class="basic-info__item">
+                  <i class="cn-icon cn-icon-credit"></i>
+                  <span>{{$t('entities.reputationLevel')}}&nbsp;:&nbsp;&nbsp;</span>
+                  <span>{{entityData.domainReputationScore || '-'}}</span>
+                </div>
+              </template>
+              <template v-else-if="entityData.entityType === 'app'">
+                <div class="basic-info__item">
+                  <i class="cn-icon cn-icon-id"></i>
+                  <span>{{$t('entities.category')}}&nbsp;:&nbsp;&nbsp;</span>
+                  <span>{{entityData.appId || '-'}}</span>
+                </div>
+                <div class="basic-info__item">
+                  <i class="cn-icon cn-icon-category"></i>
+                  <span>{{$t('entities.subcategory')}}&nbsp;:&nbsp;&nbsp;</span>
+                  <span>{{entityData.appCategory || '-'}}</span>
+                </div>
+                <div class="basic-info__item">
+                  <i class="cn-icon cn-icon-sub-category"></i>
+                  <span>{{$t('entities.risk')}}&nbsp;:&nbsp;&nbsp;</span>
+                  <span>{{entityData.appSubategory || '-'}}</span>
+                </div>
+              </template>
+              <!-- 通用字段 -->
+              <div class="basic-info__item">
+                <i class="cn-icon cn-icon-rise"></i>
+                <span>{{$t('entities.risk')}}&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>{{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>{{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>{{entityData.securityCount || '-'}}</span>
+              </div>
+            </div>
+            <div class="show-detail">{{$t('overall.detail')}}>></div>
+          </div>
+          <div class="body__detail"></div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
+import entityListMixin from './entityListMixin'
 export default {
-  name: 'Row'
+  name: 'Row',
+  mixins: [entityListMixin]
 }
 </script>

src/views/entityExplorer/entityList/entityListMixin.js

@@ -0,0 +1,53 @@
+import _ from 'lodash'
+
+export default {
+  props: {
+    entity: Object
+  },
+  data () {
+    return {
+      entityData: {}
+    }
+  },
+  computed: {
+    iconClass () {
+      let className
+      switch (this.entityData.entityType) {
+        case ('ip'): {
+          className = 'cn-icon cn-icon-ip'
+          break
+        }
+        case ('domain'): {
+          className = 'cn-icon cn-icon-domain'
+          break
+        }
+        case ('app'): {
+          className = 'cn-icon cn-icon-app'
+          break
+        }
+        default: break
+      }
+      return className
+    }
+  },
+  methods: {
+    entityDetail (entity) {
+
+    },
+    queryTraffic () {
+
+    },
+    querySecurity () {
+
+    },
+    queryAlert () {
+
+    }
+  },
+  mounted () {
+    this.entityData = _.cloneDeep(this.entity)
+    setTimeout(() => { this.queryTraffic() })
+    setTimeout(() => { this.querySecurity() })
+    setTimeout(() => { this.queryAlert() })
+  }
+}