fix: npm event 部分组件接口调试

src/assets/css/components/views/charts2/networkOverviewLine.scss

@@ -1,13 +1,11 @@
 .line.network {
   height: 100%;
   width: 100%;
-  position: relative;
   border: 1px solid #E2E5EC;
   border-radius: 4px;
   .chart-drawing {
     height: 80%;
     width: 100%;
-    top: 70px;
     .echarts-tooltip.echarts-tooltip-dark {
       .cn-chart-tooltip {
         display: flex;
@@ -21,18 +19,19 @@
       }
     }
   }
-  .line-select {
-    top: 20px;
-    right: 20px;
+  .line-header {
     display: flex;
-    position: absolute;
-    .line-select-metric {}
+    justify-content: space-between;
+    .line-select.line-header-right {
+      display: flex;
+      //flex: 1;
       .line-select__operation {
         .el-input__inner {
           width: 100px;
         }
       }
       .line-select-reference-line {
+        margin-right: 20px;
         .line-select__operation {
           .el-input__inner {
             width: 127px;
@@ -78,6 +77,7 @@
         margin-left: 20px;
       }
     }
+    .line-header-left {
       .line-value-active {
         position: absolute;
         height: 3px;
@@ -88,9 +88,9 @@
         transition: all linear .2s;
       }
       .line-value {
-    position: absolute;
-    top: 0;
-    left: 0;
+        //position: absolute;
+        //top: 0;
+        //left: 0;
         display: flex;
         .line-value-mpackets.mousemove-cursor {
           border-top: 4px solid #D3D0D8;
@@ -152,6 +152,9 @@
           }
         }
       }
+    }
+  }
+
 }
 .metric.el-select__popper,.reference-line.el-select__popper {
   top: 216px !important;

src/assets/css/components/views/charts2/npmEventsByType.scss

@@ -39,6 +39,9 @@
             height: 8px;
             margin-right: 5px;
           }
+          .npm-event-pie-legend-type-severity {
+            text-transform: capitalize;
+          }
           .critical {
             background: rgb(226,97,84);
           }

src/assets/css/components/views/charts2/npmEventsHeader.scss

@@ -43,6 +43,7 @@
         font-size: 12px;
         color: #575757;
         font-weight: 900;
+        text-transform: capitalize;
       }
     }
     .npm-header-body-total {

src/assets/css/components/views/charts2/npmRecentEvents.scss

@@ -37,6 +37,7 @@
       font-weight: 500;
       border-radius: 4px;
       padding: 0 6px;
+      text-transform: capitalize;
     }
     .critical {
       color: #E26154;

src/utils/api.js

@@ -161,10 +161,18 @@ export const api = {
       appPacketRetransPercent: '/interface/application/performance/overview/appPacketRetransPercent'
     },
     location: {
-
+      // 折线图
+      thoughput: '/interface/application/performance/location/thoughput',
+      tcpConnectionEstablishLatency: '/interface/application/performance/location/tcpConnectionEstablishLatency',
+      httpResponseLatency: '/interface/application/performance/location/httpResponseLatency',
+      sslHandshakeLatency: '/interface/application/performance/location/sslHandshakeLatency',
+      packetsLoss: '/interface/application/performance/location/packetsLoss',
+      packetsRetrains: '/interface/application/performance/location/packetsRetrains',
     },
     events: {
-
+      list: '/interface/overview/event/list',
+      recentEvents: '/interface/overview/event/recentEvents',
+      dimensionEvents: '/interface/overview/event/dimensionEvents'
     }
   }
 }

src/views/charts/charts/tools.js

@@ -477,7 +477,7 @@ export function stackedLineTooltipFormatter (params) {
     </span>`
     str += '</span>'
     str += `<span class="cn-chart-tooltip-value cn-chart-tooltip__color">
-        ${unitConvert(item.data[1], 'number').join(' ')}
+        ${unitConvert(item.data[1], item.value[2]).join(' ')}
     </span>`
     str += '</div>'
   })

src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue

@@ -2,7 +2,8 @@
   <div class="line network">
     <chart-no-data v-if="isNoData"></chart-no-data>
     <template v-else>
-      <div class="chart-drawing" v-show="showMarkLine" id="chart"></div>
+      <div class="line-header">
+        <div class="line-header-left">
           <div class="line-value-active" v-if="activeShow"></div>
           <div class="line-value">
             <div class="line-value-mpackets"
@@ -25,7 +26,8 @@
               </div>
             </div>
           </div>
-      <div class="line-select">
+        </div>
+        <div class="line-select line-header-right">
           <div class="line-select-metric">
             <span>{{$t('network.metric')}}:</span>
             <div class="line-select__operation">
@@ -54,6 +56,8 @@
             </div>
           </div>
         </div>
+      </div>
+      <div class="chart-drawing" v-show="showMarkLine" id="chart"></div>
     </template>
   </div>
 </template>

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

@@ -2,58 +2,46 @@
  <div class="npm-header">
   <div class="npm-header-body" v-for="(item, index) in chartData" :key="index">
     <div class="npm-header-body-severity">
-      <div class="npm-header-body-severity-icon" :class="iconClass(item)"></div>
-      <div class="npm-header-body-severity-value">{{item.severity}}</div>
+      <div class="npm-header-body-severity-icon" :class="item.eventSeverity"></div>
+      <div class="npm-header-body-severity-value">{{item.eventSeverity}}</div>
     </div>
-    <div class="npm-header-body-total">{{item.total}}</div>
+    <div class="npm-header-body-total">{{item.count}}</div>
   </div>
  </div>
 </template>
 
 <script>
+import { getSecond } from '@/utils/date-util'
+import { get } from '@/utils/http'
+import { api } from '@/utils/api'
+
 export default {
   name: 'NpmEventsHeader',
+  props: {
+    chart: Object,
+    timeFilter: Object
+  },
   data () {
     return {
-      chartData: [
-        { severity: 'Critical', total: 12 },
-        { severity: 'High', total: 32 },
-        { severity: 'Medium', total: 12 },
-        { severity: 'Low', total: 21 },
-        { severity: 'Info', total: 18 }
-      ]
+      chartData: []
     }
   },
-  computed: {
-    iconClass () {
-      return function (row) {
-        let className
-        switch (row.severity) {
-          case ('Critical'): {
-            className = 'critical'
-            break
+  methods: {
+    recentEventsListData () {
+      const params = {
+        startTime: getSecond(this.timeFilter.startTime),
+        endTime: getSecond(this.timeFilter.endTime),
+        type: 'severity'
       }
-          case ('High'): {
-            className = 'high'
-            break
-          }
-          case ('Info'): {
-            className = 'info'
-            break
-          }
-          case ('Medium'): {
-            className = 'medium'
-            break
-          }
-          case ('Low'): {
-            className = 'low'
-            break
-          }
-          default: break
-        }
-        return className
+      get(api.npm.events.list, params).then(res => {
+        if (res.code === 200) {
+          this.chartData = res.data.result
         }
+      })
     }
+  },
+  mounted () {
+    this.recentEventsListData()
   }
 }
 </script>

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

@@ -15,10 +15,10 @@
           </template>
           <template  #default="scope" :column="item">
             <div class="data-recent-table">
-              <template v-if="item.prop === 'severity'">
-                <span class="data-recent-table-severity" :class="iconClass(scope.row)">{{$t(scope.row[item.prop])}}</span>
+              <template v-if="item.prop === 'eventSeverity'">
+                <span class="data-recent-table-severity" :class="scope.row[item.prop]">{{$t(scope.row[item.prop])}}</span>
               </template>
-              <template v-else-if="item.prop === 'entity'">
+              <template v-else-if="item.prop === 'eventKey'">
                 <span class="data-recent-table-entity">{{$t(scope.row[item.prop])}}</span>
               </template>
               <template v-else-if="item.prop === 'eventType'">
@@ -35,82 +35,42 @@
 </template>
 
 <script>
+import { get } from '@/utils/http'
+import { api } from '@/utils/api'
+import { getSecond } from '@/utils/date-util'
+
 export default {
   name: 'NpmRecentEvents',
+  props: {
+    chart: Object,
+    timeFilter: Object
+  },
   data () {
     return {
-      tableData: [
-        {
-          severity: 'Critical',
-          entity: 'command adn control',
-          eventType: 'dns error'
-        }, {
-          severity: 'High',
-          entity: 'command adn control',
-          eventType: 'dns error'
-        }, {
-          severity: 'Critical',
-          entity: 'command adn control',
-          eventType: 'dns error'
-        }, {
-          severity: 'Medium',
-          entity: 'command adn control',
-          eventType: 'dns error'
-        }, {
-          severity: 'Low',
-          entity: 'command adn control',
-          eventType: 'dns error'
-        }, {
-          severity: 'Info',
-          entity: 'command adn control',
-          eventType: 'dns error'
-        }, {
-          severity: 'Critical',
-          entity: 'command adn control',
-          eventType: 'dns error'
-        }, {
-          severity: 'Critical',
-          entity: 'command adn control',
-          eventType: 'dns error'
-        }
-      ],
+      tableData: [],
       customTableTitles: [
-        { label: 'network.severity', prop: 'severity' },
-        { label: 'network.entity', prop: 'entity' },
+        { label: 'network.severity', prop: 'eventSeverity' },
+        { label: 'network.entity', prop: 'eventKey' },
         { label: 'detections.eventType', prop: 'eventType' }
       ]
     }
   },
-  computed: {
-    iconClass () {
-      return function (row) {
-        let className
-        switch (row.severity) {
-          case ('Critical'): {
-            className = 'critical'
-            break
+  methods: {
+    recentEventsListData () {
+      const params = {
+        startTime: getSecond(this.timeFilter.startTime),
+        endTime: getSecond(this.timeFilter.endTime),
+        limit: 1
       }
-          case ('High'): {
-            className = 'high'
-            break
-          }
-          case ('Info'): {
-            className = 'info'
-            break
-          }
-          case ('Medium'): {
-            className = 'medium'
-            break
-          }
-          case ('Low'): {
-            className = 'low'
-            break
-          }
-          default: break
-        }
-        return className
+      get(api.npm.events.recentEvents, params).then(res => {
+        if (res.code === 200) {
+          this.tableData = res.data.result
         }
+      })
     }
+  },
+  mounted () {
+    this.recentEventsListData()
   }
 }
 </script>