feat: npm下钻功能内容准备

src/views/charts2/charts/npm/NpmAppEventTable.vue

@@ -0,0 +1,157 @@
+<template>
+  <div class="npm-app-event">
+    <div class="metric-select" >
+      <el-select v-model="metric"
+                 class="option__select select-column"
+                 popper-class="option-popper metric-select"
+                 :popper-append-to-body="false"
+                 key="tabMetric"
+                 @change="changeMetric"
+                 size="mini"
+                 width="100">
+        <el-option
+                v-for="item in options"
+                :key="item.label"
+                :label="item.label"
+                :value="item.value"
+        />
+      </el-select>
+      <span>{{$t('network.metric')}}：</span>
+    </div>
+    <el-table
+            :id="`tabTable_${index}`"
+            :ref="`dataTable_${index}`"
+            :data="tableData"
+            class="npm-app-event-table"
+            height="100%"
+    >
+      <template v-for="(item, index) in customTableTitles" :key="index">
+        <el-table-column class="data-column" :min-width="columnWidth(index)">
+          <template #header>
+            <span class="data-column__span">{{$t(item.label)}}</span>
+          </template>
+          <template  #default="scope" :column="item">
+            <div class="data-app-event-table">
+              <template v-if="item.prop === 'applications'">
+                <span class="data-applications">{{$t(scope.row[item.prop])}}</span>
+              </template>
+              <template v-else-if="item.prop === 'severity'">
+                <template v-if="scope.row[item.prop]==='Critical'">
+                  <div v-for="item in 5" class="red-dot"></div>
+                </template>
+                <template v-else-if="scope.row[item.prop]==='High'">
+                  <div v-for="item in 4" class="red-dot"></div>
+                  <div class="grey-dot"></div>
+                </template>
+                <template v-else-if="scope.row[item.prop]==='Medium'">
+                  <div v-for="item in 3" class="red-dot"></div>
+                  <div v-for="item in 2" class="grey-dot"></div>
+                </template>
+                <template v-else-if="scope.row[item.prop]==='Low'">
+                  <div v-for="item in 2" class="red-dot"></div>
+                  <div v-for="item in 3" class="grey-dot"></div>
+                </template>
+                <template v-else-if="scope.row[item.prop]==='Info'">
+                  <div v-for="item in 1" class="red-dot"></div>
+                  <div v-for="item in 4" class="grey-dot"></div>
+                </template>
+                <span class="data-severity" >{{$t(scope.row[item.prop])}}</span>
+              </template>
+              <template v-else-if="item.prop === 'eventType'">
+                <span class="data-eventType" v-for="type in scope.row[item.prop]">{{type}}</span>
+              </template>
+              <template v-else-if="item.prop === 'eventCount'">
+                <span class="data-eventCount">{{scope.row[item.prop]}}</span>
+              </template>
+              <span v-else>-</span>
+            </div>
+          </template>
+        </el-table-column>
+      </template>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NpmAppEventTable',
+  data () {
+    return {
+      metric: 'Application',
+      options: [
+        {
+          value: 'Application',
+          label: 'Application'
+        },
+        {
+          value: 'Provider',
+          label: 'Provider'
+        }
+      ],
+      dotList: ['grey-dot', 'grey-dot', 'grey-dot', 'grey-dot', 'grey-dot'],
+      tableData: [
+        {
+          applications: 'Critical',
+          severity: 'Critical',
+          eventCount: 8,
+          eventType: ['dns error', 'http error', 'high dns response time']
+        }, {
+          applications: 'High',
+          severity: 'High',
+          eventCount: 8,
+          eventType: ['dns error']
+        }, {
+          applications: 'Critical',
+          severity: 'Critical',
+          eventCount: 8,
+          eventType: ['dns error', 'high dns response time']
+        }, {
+          applications: 'Medium',
+          severity: 'Medium',
+          eventCount: 8,
+          eventType: ['dns error', 'http error', 'high dns response time']
+        }, {
+          applications: 'Low',
+          severity: 'Low',
+          eventCount: 8,
+          eventType: ['http error', 'high dns response time']
+        }, {
+          applications: 'Info',
+          severity: 'Info',
+          eventCount: 8,
+          eventType: ['dns error', 'high dns response time']
+        }, {
+          applications: 'Critical',
+          severity: 'Critical',
+          eventCount: 8,
+          eventType: ['dns error', 'http error']
+        }, {
+          applications: 'Critical',
+          severity: 'Critical',
+          eventCount: 8,
+          eventType: ['dns error', 'http error', 'high dns response time']
+        }
+      ],
+      customTableTitles: [
+        { label: 'network.applications', prop: 'applications' },
+        { label: 'network.severity', prop: 'severity' },
+        { label: 'network.eventType', prop: 'eventType' },
+        { label: 'network.eventCount', prop: 'eventCount' }
+      ]
+    }
+  },
+  methods: {
+    columnWidth (index) {
+      if (index === 0 || index === 1) {
+        return '20%'
+      } else if (index === 2) {
+        return '35%'
+      } else if (index === 3) {
+        return '15%'
+      }
+    }
+  },
+  computed: {
+  }
+}
+</script>