CN-299 feat: detection布局

src/views/detections/DetectionList.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="entity-list" id="detectionList">
+    <div class="entity__loading" style="background: #eff2f5;opacity: .6;" v-show="loading">
+      <i class="el-icon-loading"></i>
+    </div>
+    <div class="entity-list__content">
+      <div class="entity-list--list">
+        <div class="no-data" v-if="noData">No data</div>
+        <div v-if="!isCollapse" @click="collapse" class="cn-entity__shadow"></div>
+        <detection-row
+            v-for="(data, index) in listData"
+            :detection="data"
+            :timeFilter="timeFilter"
+            :key="index"
+            :ref="`detectionRow${index}`"
+            :index="index"
+            @switchCollapse="switchCollapse"
+        ></detection-row>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import DetectionRow from '@/views/detections/DetectionRow'
+export default {
+  name: 'DetectionList',
+  components: {
+    DetectionRow
+  },
+  props: {
+    listData: Array,
+    from: String,
+    pageObj: Object,
+    loading: Boolean,
+    timeFilter: Object
+  },
+  data () {
+    return {
+      showDetail: false,
+      typeName: '',
+      detectionList: [],
+      isCollapse: true,
+      collapseIndex: 0,
+      tableId: 'detectionList',
+      listDataCopy: [],
+      noData: false
+    }
+  },
+  methods: {
+    switchCollapse (isCollapse, index) {
+      this.isCollapse = isCollapse
+      this.collapseIndex = index
+    },
+    collapse () {
+      this.isCollapse = true
+      this.$refs[`detectionRow${this.collapseIndex}`].collapse()
+    }
+  },
+  watch: {
+    listData: {
+      deep: true,
+      handler (n) {
+        if (!n || n.length === 0) {
+          this.timeout = setTimeout(() => {
+            this.noData = true
+          }, 500)
+        } else {
+          clearTimeout(this.timeout)
+          this.noData = false
+        }
+      }
+    }
+  }
+}
+</script>