CN-399 Detection--服务质量事件 指标变化曲线开发

src/assets/css/components/views/detections/detection-overview.scss

@@ -8,6 +8,18 @@
     display: flex;
     flex-direction: column;
 
+     .overview__metric {
+       display:flex;
+       flex-direction: row;
+       padding-top: 10px;
+
+       .metric__column {
+         display:flex;
+         flex-direction: column;
+         margin-right: 15px;
+       }
+     }
+
     .overview__title {
       padding: 10px 0;
       color: #333;
@@ -33,6 +45,19 @@
         color: #6B717B;
       }
 
+      .row__charts {
+        height: 20px;
+        width: 80px;
+      }
+
+      .row__content--metric {
+        display: flex;
+        flex-wrap: nowrap;
+        color: #666666;
+        font-size:14px;
+        font-weight: 400;
+      }
+
       .row__content {
         display: flex;
         color: #3976CB;

src/utils/api.js

@@ -93,7 +93,8 @@ export const api = {
       activeEntity: '/interface/detection/performance/filter/activeEntity',
       listBasic: '/interface/detection/performance/list/basic',
       listCount: '/interface/detection/performance/list/count',
-      overviewBasic: '/interface/detection/performance/detail/overview/basic'
+      overviewBasic: '/interface/detection/performance/detail/overview/basic',
+      metric:'/interface/detection/performance/detail/overview/metric'
     }
   }
 }

src/views/detections/options/detectionOptions.js

@@ -1,6 +1,7 @@
 import {
   chartColor,
-  tooLongFormatter
+  tooLongFormatter,
+  axisFormatter
 } from '@/views/charts/charts/tools'
 import unitConvert from '@/utils/unit-convert'
 import _ from 'lodash'
@@ -286,3 +287,76 @@ export const activeAttackBar = {
     barCategoryGap: '10%'
   }]
 }
+export const metricOption = {
+  tooltip: {
+    appendToBody: true,
+    trigger: 'axis',
+    textStyle: {
+      width: '20px',
+      overflow: 'truncate'
+    },
+    //formatter: axisFormatter,
+    show: true,
+    className: 'nz-chart-tooltip',
+    extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);max-width: 300px !important'
+  },
+  xAxis: {
+    type: 'time',
+    show: false
+  },
+  yAxis: {
+    type: 'value',
+    show: false
+  },
+  animation: false,
+  grid: {
+    left: 0,
+    bottom: 2,
+    top: 5,
+    right: 0
+  },
+  legend: {
+    show: false
+  },
+  series: [
+      {
+        name:'metric',
+        type: 'line',
+        legendHoverLink: false,
+        lineStyle: {
+          width: 1,
+          type:'dashed'
+        },
+        color: '#ec836c',
+        data: [],
+        showSymbol: false
+      },
+      {
+        name:'metric',
+        type: 'line',
+        legendHoverLink: false,
+        lineStyle: {
+          width: 1,
+          type:'solid'
+        },
+        areaStyle: {
+          color: 'rgba(244, 187, 174, 0.59)'
+        },
+        color: '#ec836c',
+        data: [],
+        showSymbol: false
+      },
+      {
+        name:'metric',
+        type: 'line',
+        legendHoverLink: false,
+        lineStyle: {
+          width: 1,
+          type:'dashed'
+        },
+        color: '#ec836c',
+        data: [],
+        showSymbol: false
+      }
+   ]
+}

src/views/detections/overview/DetectionPerformanceEventDomainOverview.vue

@@ -59,13 +59,45 @@
       <div class="overview__row">
         <div class="row__content row__content--link">{{$t('detections.viewAllRelated')}}</div>
       </div>
+      <div class="overview__metric">
+        <div class="metric__column">
+          <div class="overview__title">{{$t('detections.metric')}}</div>
+          <div class="overview__row">
+            <div class="row__content--metric ">{{detection.domain  || '-'}}</div>
+          </div>
+        </div>
+        <div class="metric__column">
+          <div class="overview__title">{{$t('detections.value')}}</div>
+          <div class="overview__row">
+            <div class="row__charts" id="detectionMetricChartDomain" ></div>
+          </div>
+        </div>
+        <div class="metric__column">
+          <div class="overview__title">{{$t('detections.startTime')}}</div>
+          <div class="overview__row">
+            <div class="row__content--metric ">{{dayJs.tz(detection.startTime*1000).format('YYYY-MM-DD HH:mm:ss') || '-'}}</div>
+          </div>
+        </div>
+        <div class="metric__column">
+          <div class="overview__title">{{$t('detections.endTime')}}</div>
+          <div class="overview__row">
+            <div class="row__content--metric ">{{dayJs.tz(detection.endTime*1000).format('YYYY-MM-DD HH:mm:ss') || '-'}}</div>
+          </div>
+        </div>
+      </div>
+
     </div>
   </div>
 </template>
 
 <script>
 import { api, getData } from '@/utils/api'
-import { eventSeverityColor, topDomain } from '@/utils/constants'
+import { eventSeverityColor,unitTypes ,topDomain} from '@/utils/constants'
+import { getSecond } from '@/utils/date-util'
+import { get } from '@/utils/http'
+import * as echarts from 'echarts'
+import { metricOption } from '@/views/detections/options/detectionOptions'
+import { sortBy,reverseSortBy } from '@/utils/tools'
 export default {
   name: 'DetectionPerformanceEventDomainOverview',
   props: {
@@ -74,7 +106,11 @@ export default {
   data () {
     return {
       eventSeverityColor,
-      basicInfo: {}
+      basicInfo: {},
+      metricList:[[1435781430781, "1"], [1435781431781, "5"],[1435781432781, "5"], [1435781433781, "3"],[1435781434781, "4"], [1435781435781, "5"]],
+      metricChart: null,
+      searchStartTime:null,
+      searchEndTime:null
     }
   },
   computed: {
@@ -131,11 +167,75 @@ export default {
       this.queryBasic().then(responses => {
         responses && (this.basicInfo = responses)
       })
+
+      this.queryMetric().then(responses => {
+        responses && (this.metricList = responses.values)
+        this.initChart()
+      }).catch(error => {
+        console.log(error)
+      }).finally(() => {
+        setTimeout(() => {
+          try {
+            this.$nextTick(() => {
+              console.log(this.metricChart)
+              this.metricChart && this.metricChart.resize()
+            })
+          } catch (e) {}
+        }, 250)
+      })
+    },
+
+    initChart(){
+      this.metricChart = echarts.init(document.getElementById('detectionMetricChartDomain'))
+      this.chartOptionMetric = _.cloneDeep(this.chartOption)
+
+      this.metricList.sort(reverseSortBy(0))//将返回的数据按时间降序排序，方便找到实线和虚线的交点
+      let endIndex = (this.metricList). findIndex ((item) => item[0]  <=  1435781434781 );
+      endIndex = this.metricList.length-endIndex
+      //let endIndex = (this.metricList). findIndex ((item) => item[0]  <=  this.detection.endTime*1000 );
+
+      this.metricList.sort(sortBy(0))//将返回的数据按时间升序排序，方便找到实线和虚线的交点
+      let startIndex = (this.metricList). findIndex ((item) => item[0]  >=  1435781432781 );
+      //let startIndex = (this.metricList). findIndex ((item) => item[0]  >=  this.detection.startTime*1000 );
+
+      if(startIndex >-1 && endIndex >-1){
+        this.chartOptionMetric.series[0].data = this.metricList.slice(0,startIndex).map(v => [Number(v[0]), Number(v[1]), unitTypes.number])
+        this.chartOptionMetric.series[1].data = this.metricList.slice(startIndex-1,endIndex).map(v => [Number(v[0]), Number(v[1]), unitTypes.number])
+        this.chartOptionMetric.series[2].data = this.metricList.slice(endIndex-1,this.metricList.length).map(v => [Number(v[0]), Number(v[1]), unitTypes.number])
+      }
+
+      this.chartOptionMetric && this.metricChart.setOption(this.chartOptionMetric)
+      console.log(this.chartOptionMetric)
+    },
+
+    queryMetric() {
+      return new Promise((resolve, reject) => {
+        try {
+          let allTime = this.detection.endTime-this.detection.startTime
+          let nowTime = getSecond(new Date())
+          this.searchStartTime = this.detection.startTime-allTime/2
+          this.searchEndTime = _.min([nowTime,(this.detection.endTime+allTime/2)])
+
+          get(api.detection.performanceEvent.metric, {
+            domain: this.detection.domain,
+            startTime: this.searchStartTime*1000,
+            endTime: this.searchEndTime*1000,
+          }).then((response) => {
+            if (response.code === 200) {
+              resolve(response.data.result[0])
+            } else {
+              reject(response)
+            }
+          })
+        } catch (e) {
+          reject(e)
+        }
+      })
     },
     queryBasic () {
       return new Promise((resolve, reject) => {
         try {
-          getData(api.detection.performanceEvent.overviewBasic, { appName: this.detection.appName, startTime: this.detection.startTime }).then(data => {
+          getData(api.detection.performanceEvent.overviewBasic, { domain: this.detection.domain, startTime: this.detection.startTime }).then(data => {
             resolve(data[0])
           }).catch(error => {
             reject(error)
@@ -158,6 +258,11 @@ export default {
   },
   mounted () {
     this.query()
-  }
+  },
+  setup () {
+    return {
+      chartOption: metricOption,
+    }
+  },
 }
 </script>

src/views/detections/overview/DetectionPerformanceEventIpOverview.vue

@@ -50,12 +50,45 @@
       <div class="overview__row">
         <div class="row__content row__content--link">{{$t('detections.viewAllRelated')}}</div>
       </div>
+      <div class="overview__metric">
+        <div class="metric__column">
+          <div class="overview__title">{{$t('detections.metric')}}</div>
+          <div class="overview__row">
+            <div class="row__content--metric ">{{detection.serverIp  || '-'}}</div>
+          </div>
+        </div>
+        <div class="metric__column">
+          <div class="overview__title">{{$t('detections.value')}}</div>
+          <div class="overview__row">
+            <div class="row__charts"  id="detectionMetricChartIp" ></div>
+          </div>
+        </div>
+        <div class="metric__column">
+          <div class="overview__title">{{$t('detections.startTime')}}</div>
+          <div class="overview__row">
+            <div class="row__content--metric ">{{dayJs.tz(detection.startTime*1000).format('YYYY-MM-DD HH:mm:ss') || '-'}}</div>
+          </div>
+        </div>
+        <div class="metric__column">
+          <div class="overview__title">{{$t('detections.endTime')}}</div>
+          <div class="overview__row">
+            <div class="row__content--metric ">{{dayJs.tz(detection.endTime*1000).format('YYYY-MM-DD HH:mm:ss') || '-'}}</div>
+          </div>
+        </div>
+      </div>
+
     </div>
   </div>
 </template>
 
 <script>
 import { api, getData } from '@/utils/api'
+import { unitTypes } from '@/utils/constants'
+import { getSecond } from '@/utils/date-util'
+import { get } from '@/utils/http'
+import * as echarts from 'echarts'
+import { metricOption } from '@/views/detections/options/detectionOptions'
+import { sortBy,reverseSortBy } from '@/utils/tools'
 export default {
   name: 'DetectionPerformanceEventIpOverview',
   props: {
@@ -63,7 +96,11 @@ export default {
   },
   data () {
     return {
-      basicInfo: {}
+      basicInfo: {},
+      metricList:[[1435781430781, "1"], [1435781431781, "5"],[1435781432781, "5"], [1435781433781, "3"],[1435781434781, "4"], [1435781435781, "5"]],
+      metricChart: null,
+      searchStartTime:null,
+      searchEndTime:null
     }
   },
   computed: {
@@ -94,7 +131,71 @@ export default {
       this.queryBasic().then(responses => {
         responses && (this.basicInfo = responses)
       })
+      this.queryMetric().then(responses => {
+        responses && (this.metricList = responses.values)
+        this.initChart()
+      }).catch(error => {
+        console.log(error)
+      }).finally(() => {
+        setTimeout(() => {
+          try {
+            this.$nextTick(() => {
+              console.log(this.metricChart)
+              this.metricChart && this.metricChart.resize()
+            })
+          } catch (e) {}
+        }, 250)
+      })
     },
+
+    initChart(){
+      this.metricChart = echarts.init(document.getElementById('detectionMetricChartIp'))
+      this.chartOptionMetric = _.cloneDeep(this.chartOption)
+
+      this.metricList.sort(reverseSortBy(0))//将返回的数据按时间降序排序，方便找到实线和虚线的交点
+      let endIndex = (this.metricList). findIndex ((item) => item[0]  <=  1435781434781 );
+      endIndex = this.metricList.length-endIndex
+      //let endIndex = (this.metricList). findIndex ((item) => item[0]  <=  this.detection.endTime*1000 );
+
+      this.metricList.sort(sortBy(0))//将返回的数据按时间升序排序，方便找到实线和虚线的交点
+      let startIndex = (this.metricList). findIndex ((item) => item[0]  >=  1435781432781 );
+      //let startIndex = (this.metricList). findIndex ((item) => item[0]  >=  this.detection.startTime*1000 );
+
+      if(startIndex >-1 && endIndex >-1){
+        this.chartOptionMetric.series[0].data = this.metricList.slice(0,startIndex).map(v => [Number(v[0]), Number(v[1]), unitTypes.number])
+        this.chartOptionMetric.series[1].data = this.metricList.slice(startIndex-1,endIndex).map(v => [Number(v[0]), Number(v[1]), unitTypes.number])
+        this.chartOptionMetric.series[2].data = this.metricList.slice(endIndex-1,this.metricList.length).map(v => [Number(v[0]), Number(v[1]), unitTypes.number])
+      }
+
+      this.chartOptionMetric && this.metricChart.setOption(this.chartOptionMetric)
+      console.log(this.chartOptionMetric)
+    },
+
+    queryMetric() {
+      return new Promise((resolve, reject) => {
+        try {
+          let allTime = this.detection.endTime-this.detection.startTime
+          let nowTime = getSecond(new Date())
+          this.searchStartTime = this.detection.startTime-allTime/2
+          this.searchEndTime = _.min([nowTime,(this.detection.endTime+allTime/2)])
+
+          get(api.detection.performanceEvent.metric, {
+            domain: this.detection.domain,
+            startTime: this.searchStartTime*1000,
+            endTime: this.searchEndTime*1000,
+          }).then((response) => {
+            if (response.code === 200) {
+              resolve(response.data.result[0])
+            } else {
+              reject(response)
+            }
+          })
+        } catch (e) {
+          reject(e)
+        }
+      })
+    },
+
     queryBasic () {
       return new Promise((resolve, reject) => {
         try {
@@ -121,6 +222,11 @@ export default {
   },
   mounted () {
     this.query()
-  }
+  } ,
+  setup () {
+    return {
+      chartOption: metricOption,
+    }
+  },
 }
 </script>