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,137 +19,142 @@
       }
     }
   }
-  .line-select {
+  .line-header {
-    top: 20px;
-    right: 20px;
     display: flex;
-    position: absolute;
+    justify-content: space-between;
-    .line-select-metric {}
+    .line-select.line-header-right {
-    .line-select__operation {
-      .el-input__inner {
-        width: 100px;
-      }
-    }
-    .line-select-reference-line {
-      .line-select__operation {
-        .el-input__inner {
-          width: 127px;
-        }
-      }
-    }
-    .line-select-metric,.line-select-reference-line {
       display: flex;
-      align-items: center;
+      //flex: 1;
-      span {
-        font-size: 12px;
-        color: #575757;
-        font-weight: 400;
-        margin-right: 3px;
-      }
       .line-select__operation {
-        height: 24px;
-        margin-left: 3px;
-        box-shadow: none;
-        border-radius: 2px;
         .el-input__inner {
-          padding-left: 4px;
+          width: 100px;
-          line-height: 24px;
-          height: 24px;
-          font-size: 12px;
-          color: #2C72C6;
-          font-weight: 400;
         }
-        .el-input__suffix {
+      }
-          display: flex;
+      .line-select-reference-line {
-          .el-input__suffix-inner {
+        margin-right: 20px;
+        .line-select__operation {
+          .el-input__inner {
+            width: 127px;
+          }
+        }
+      }
+      .line-select-metric,.line-select-reference-line {
+        display: flex;
+        align-items: center;
+        span {
+          font-size: 12px;
+          color: #575757;
+          font-weight: 400;
+          margin-right: 3px;
+        }
+        .line-select__operation {
+          height: 24px;
+          margin-left: 3px;
+          box-shadow: none;
+          border-radius: 2px;
+          .el-input__inner {
+            padding-left: 4px;
             line-height: 24px;
-            .el-select__caret {
+            height: 24px;
+            font-size: 12px;
+            color: #2C72C6;
+            font-weight: 400;
+          }
+          .el-input__suffix {
+            display: flex;
+            .el-input__suffix-inner {
               line-height: 24px;
-              width: 16px;
+              .el-select__caret {
-              color: #575757;
+                line-height: 24px;
+                width: 16px;
+                color: #575757;
+              }
+            }
+          }
+        }
+      }
+      .line-select-reference-line {
+        margin-left: 20px;
+      }
+    }
+    .line-header-left {
+      .line-value-active {
+        position: absolute;
+        height: 3px;
+        border-radius: 4px 0 0 0;
+        background: #046ECA;
+        top: 0;
+        z-index: 1;
+        transition: all linear .2s;
+      }
+      .line-value {
+        //position: absolute;
+        //top: 0;
+        //left: 0;
+        display: flex;
+        .line-value-mpackets.mousemove-cursor {
+          border-top: 4px solid #D3D0D8;
+          z-index: 0;
+        }
+        .line-value-mpackets {
+          cursor: pointer;
+          padding: 16px 0 0 20px;
+          border-top: 4px solid transparent;
+          .line-value-unit {
+            .line-value-unit-number {
+              font-family: Helvetica-Bold;
+              font-size: 28px;
+              color: #353636;
+              margin-right: 4px;
+            }
+            .line-value-unit-number2 {
+              font-size: 0;
+              span {
+                font-size: 12px;
+                color: #575757;
+                font-weight: 400;
+              }
+            }
+          }
+          .line-value-mpackets-name {
+            position: relative;
+            display: flex;
+            .mpackets-name {
+              flex: 1;
+              padding-left: 19px;
+            }
+            .total,.inbound,.outbound,.internal,.through,.other {
+              width: 14px;
+              height: 14px;
+              border-radius: 50%;
+              position: absolute;
+              top: 50%;
+              margin-top: -7px;
+            }
+            .total {
+              background: #00A7AB;
+            }
+            .inbound {
+              background: #7FA054;
+            }
+            .outbound {
+              background: #35ADDA;
+            }
+            .internal {
+              background: #E48F3E;
+            }
+            .through {
+              background: #9FBC1D;
+            }
+            .other {
+              background: #98709B;
             }
           }
         }
       }
     }
-    .line-select-reference-line {
-      margin-left: 20px;
-    }
-  }
-  .line-value-active {
-    position: absolute;
-    height: 3px;
-    border-radius: 4px 0 0 0;
-    background: #046ECA;
-    top: 0;
-    z-index: 1;
-    transition: all linear .2s;
-  }
-  .line-value {
-    position: absolute;
-    top: 0;
-    left: 0;
-    display: flex;
-    .line-value-mpackets.mousemove-cursor {
-      border-top: 4px solid #D3D0D8;
-      z-index: 0;
-    }
-    .line-value-mpackets {
-      cursor: pointer;
-      padding: 16px 0 0 20px;
-      border-top: 4px solid transparent;
-      .line-value-unit {
-        .line-value-unit-number {
-          font-family: Helvetica-Bold;
-          font-size: 28px;
-          color: #353636;
-          margin-right: 4px;
-        }
-        .line-value-unit-number2 {
-          font-size: 0;
-          span {
-            font-size: 12px;
-            color: #575757;
-            font-weight: 400;
-          }
-        }
-      }
-      .line-value-mpackets-name {
-        position: relative;
-        display: flex;
-        .mpackets-name {
-          flex: 1;
-          padding-left: 19px;
-        }
-        .total,.inbound,.outbound,.internal,.through,.other {
-          width: 14px;
-          height: 14px;
-          border-radius: 50%;
-          position: absolute;
-          top: 50%;
-          margin-top: -7px;
-        }
-        .total {
-          background: #00A7AB;
-        }
-        .inbound {
-          background: #7FA054;
-        }
-        .outbound {
-          background: #35ADDA;
-        }
-        .internal {
-          background: #E48F3E;
-        }
-        .through {
-          background: #9FBC1D;
-        }
-        .other {
-          background: #98709B;
-        }
-      }
-    }
   }
+
 }
 .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,58 +2,62 @@
   <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-value-active" v-if="activeShow"></div>
+        <div class="line-header-left">
-      <div class="line-value">
+          <div class="line-value-active" v-if="activeShow"></div>
-        <div class="line-value-mpackets"
+          <div class="line-value">
-             v-show="item.show"
+            <div class="line-value-mpackets"
-             :class=" {'is-active': activeShow === item.class, 'mousemove-cursor': mousemoveCursor === item.class}"
+                 v-show="item.show"
-             v-for="(item, index) in mpackets"
+                 :class=" {'is-active': activeShow === item.class, 'mousemove-cursor': mousemoveCursor === item.class}"
-             :key="index"
+                 v-for="(item, index) in mpackets"
-             @mouseenter="mouseenter(item)"
+                 :key="index"
-             @mouseleave="mouseleave(item)"
+                 @mouseenter="mouseenter(item)"
-             @click="activeChange(item, index)">
+                 @mouseleave="mouseleave(item)"
-          <div class="line-value-mpackets-name">
+                 @click="activeChange(item, index)">
-            <div :class="item.class"></div>
+              <div class="line-value-mpackets-name">
-            <div class="mpackets-name">{{$t(item.name)}}</div>
+                <div :class="item.class"></div>
-          </div>
+                <div class="mpackets-name">{{$t(item.name)}}</div>
-          <div class="line-value-unit">
+              </div>
-            <span class="line-value-unit-number">{{unitConvert(item.analysis.avg, unitTypes.number)[0]}}</span>
+              <div class="line-value-unit">
-            <span class="line-value-unit-number2">
+                <span class="line-value-unit-number">{{unitConvert(item.analysis.avg, unitTypes.number)[0]}}</span>
+                <span class="line-value-unit-number2">
             <span>{{unitConvert(item.analysis.avg, unitTypes.number)[1]}}</span><span v-if="item.unitType">{{item.unitType}}</span>
           </span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="line-select line-header-right">
+          <div class="line-select-metric">
+            <span>{{$t('network.metric')}}:</span>
+            <div class="line-select__operation">
+              <el-select
+                  size="mini"
+                  v-model="value1"
+                  popper-class="metric"
+                  @change="metricSelectChange"
+              >
+                <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
+              </el-select>
+            </div>
+          </div>
+          <div class="line-select-reference-line">
+            <span>{{$t('network.referenceLine')}}:</span>
+            <div class="line-select__operation">
+              <el-select
+                  size="mini"
+                  v-model="value2"
+                  :disabled="!activeShow"
+                  popper-class="reference-line"
+                  @change="referenceSelectChange"
+              >
+                <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"></el-option>
+              </el-select>
+            </div>
           </div>
         </div>
       </div>
-      <div class="line-select">
+      <div class="chart-drawing" v-show="showMarkLine" id="chart"></div>
-        <div class="line-select-metric">
-          <span>{{$t('network.metric')}}:</span>
-          <div class="line-select__operation">
-            <el-select
-                size="mini"
-                v-model="value1"
-                popper-class="metric"
-                @change="metricSelectChange"
-            >
-              <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
-            </el-select>
-          </div>
-        </div>
-        <div class="line-select-reference-line">
-          <span>{{$t('network.referenceLine')}}:</span>
-          <div class="line-select__operation">
-            <el-select
-                size="mini"
-                v-model="value2"
-                :disabled="!activeShow"
-                popper-class="reference-line"
-                @change="referenceSelectChange"
-            >
-              <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"></el-option>
-            </el-select>
-          </div>
-        </div>
-      </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-icon" :class="item.eventSeverity"></div>
-      <div class="npm-header-body-severity-value">{{item.severity}}</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: [
+      chartData: []
-        { severity: 'Critical', total: 12 },
-        { severity: 'High', total: 32 },
-        { severity: 'Medium', total: 12 },
-        { severity: 'Low', total: 21 },
-        { severity: 'Info', total: 18 }
-      ]
     }
   },
-  computed: {
+  methods: {
-    iconClass () {
+    recentEventsListData () {
-      return function (row) {
+      const params = {
-        let className
+        startTime: getSecond(this.timeFilter.startTime),
-        switch (row.severity) {
+        endTime: getSecond(this.timeFilter.endTime),
-          case ('Critical'): {
+        type: 'severity'
-            className = 'critical'
-            break
-          }
-          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'">
+              <template v-if="item.prop === 'eventSeverity'">
-                <span class="data-recent-table-severity" :class="iconClass(scope.row)">{{$t(scope.row[item.prop])}}</span>
+                <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: [
+      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'
-        }
-      ],
       customTableTitles: [
-        { label: 'network.severity', prop: 'severity' },
+        { label: 'network.severity', prop: 'eventSeverity' },
-        { label: 'network.entity', prop: 'entity' },
+        { label: 'network.entity', prop: 'eventKey' },
         { label: 'detections.eventType', prop: 'eventType' }
       ]
     }
   },
-  computed: {
+  methods: {
-    iconClass () {
+    recentEventsListData () {
-      return function (row) {
+      const params = {
-        let className
+        startTime: getSecond(this.timeFilter.startTime),
-        switch (row.severity) {
+        endTime: getSecond(this.timeFilter.endTime),
-          case ('Critical'): {
+        limit: 1
-            className = 'critical'
-            break
-          }
-          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>