Merge branch 'dev' of http://git.cestong.com.cn/cecf/observe-front into dev

src/views/business-analysis/topology/components/allBusinessCon.vue

@@ -160,7 +160,7 @@
             </div>
           </template>
         </el-table-column>
-        <el-table-column header-align="center" align="center" label="中位延迟222s" prop="duration_median" width="200">
+        <el-table-column v-if="colData[8].istrue" header-align="center" align="center" label="中位延迟" prop="duration_median" width="200">
           <template slot-scope="scope">
             <div :class="scope.row.duration_median<2000?'table_bg':'table_bg_red'" style="display:flex;">
               <div>
@@ -183,31 +183,43 @@
         </el-table-column>
         <el-table-column v-if="colData[9].istrue" header-align="center" align="center" label="90分位延迟" prop="duration_p90" width="200">
           <template slot-scope="scope">
-            <div :class="scope.row.duration_p90<2000?'table_bg':'table_bg_red'">
-              <div class="table-num-box">
-                {{ scope.row.duration_p90==undefined?0:Number(scope.row.duration_p90).toFixed(2) }}
-              </div>
-              <div class="table-day-rate-box">
-                <i v-show="processNumber(scope.row.duration_p90_dod).sign" :class="processNumber(scope.row.duration_p90_dod).sign == 'up'? 'el-icon-up up':'el-icon-down down'" />
-                <span>
-                  {{ scope.row.duration_p90_dod==undefined?0:getErrRate(processNumber(scope.row.duration_p90_dod).value) }}
-                </span>
+            <div :class="scope.row.duration_p90<2000?'table_bg':'table_bg_red'" style="display:flex;">
+              <div>
+                <div class="table-num-box">
+                  {{ scope.row.duration_p90==undefined?0:Number(scope.row.duration_p90).toFixed(2) }}
+                </div>
+                <div class="table-day-rate-box">
+                  <i v-show="processNumber(scope.row.duration_p90_dod).sign" :class="processNumber(scope.row.duration_p90_dod).sign == 'up'? 'el-icon-up up':'el-icon-down down'" />
+                  <span>
+                    {{ scope.row.duration_p90_dod==undefined?0:getErrRate(processNumber(scope.row.duration_p90_dod).value) }}
+                  </span>
+                </div>
               </div>
+              <span v-if="scope.row.quantiles!=undefined" style="display:flex;">
+                {{ drawEchartsp90(scope.row, scope.$index, 'nine') }}
+                <div :id="`tiger-nine-trend-index` + scope.$index" style="flex:1;padding-left:10px" class="tiger-trend-charts" />
+              </span>
             </div>
           </template>
         </el-table-column>
         <el-table-column v-if="colData[10].istrue" header-align="center" align="center" label="99分位延迟" prop="duration_p99" width="200">
           <template slot-scope="scope">
-            <div :class="scope.row.duration_p99<2000?'table_bg':'table_bg_red'">
-              <div class="table-num-box">
-                {{ scope.row.duration_p99==undefined?0:Number(scope.row.duration_p99).toFixed(2) }}
-              </div>
-              <div class="table-day-rate-box">
-                <i v-show="processNumber(scope.row.duration_p99_dod).sign" :class="processNumber(scope.row.duration_p99_dod).sign == 'up'? 'el-icon-up up':'el-icon-down down'" />
-                <span>
-                  {{ scope.row.duration_p99_dod==undefined?0:getErrRate(processNumber(scope.row.duration_p99_dod).value) }}
-                </span>
+            <div :class="scope.row.duration_p99<2000?'table_bg':'table_bg_red'" style="display:flex;">
+              <div>
+                <div class="table-num-box">
+                  {{ scope.row.duration_p99==undefined?0:Number(scope.row.duration_p99).toFixed(2) }}
+                </div>
+                <div class="table-day-rate-box">
+                  <i v-show="processNumber(scope.row.duration_p99_dod).sign" :class="processNumber(scope.row.duration_p99_dod).sign == 'up'? 'el-icon-up up':'el-icon-down down'" />
+                  <span>
+                    {{ scope.row.duration_p99_dod==undefined?0:getErrRate(processNumber(scope.row.duration_p99_dod).value) }}
+                  </span>
+                </div>
               </div>
+              <span v-if="scope.row.quantiles!=undefined" style="display:flex;">
+                {{ drawEchartsp99(scope.row, scope.$index, 'hundred') }}
+                <div :id="`tiger-hundred-trend-index` + scope.$index" style="flex:1;padding-left:10px" class="tiger-trend-charts" />
+              </span>
             </div>
           </template>
         </el-table-column>
@@ -306,7 +318,7 @@ export default {
         '错误率',
         // '最大延迟(ms)',
         // "延迟比例",
-        '中位延迟'
+        // '中位延迟'
         // '90分位延迟',
         // '99分位延迟'
       ],
@@ -319,7 +331,6 @@ export default {
         { title: '错误率', istrue: false },
         { title: '最大延迟(ms)', istrue: false },
         { title: '平均延迟(ms)', istrue: false },
-        // { title: "延迟比例", istrue: false },
         { title: '中位延迟', istrue: false },
         { title: '90分位延迟', istrue: false },
         { title: '99分位延迟', istrue: false }
@@ -464,7 +475,9 @@ export default {
     }
   },
   created() {
+    this.columnChange()
     this.$store.commit('time/setTimeFlag', false)
+
     const start_time = this.$store.state.time.globalTimes.startTime
     const end_time = this.$store.state.time.globalTimes.endTime
     this.serviceParams.start_time = start_time
@@ -477,10 +490,9 @@ export default {
       this.queryParams.app_alias = this.appItem.alias
       this.serviceParams.app_id = this.appItem.id
       this.getList()
-      this.$forceUpdate()
     }
     this.getServiceList() // 获取服务列表select
-    this.columnChange()
+    this.$forceUpdate()
   },
   mounted() {
     this.$forceUpdate()
@@ -1014,7 +1026,7 @@ export default {
         option && myChart.setOption(option, true)
         // myChart.group = `index${row.id}`
         // that.$echarts5.connect(`index${row.id}`)
-      }, 3000)
+      }, 5000)
     },
     drawEchartsp90(row, index) {
       const that = this
@@ -1319,8 +1331,8 @@ export default {
 .tiger-trend-charts {
    height: 40px;
   //  width:100px;
-   min-width: 80px;
-   max-width: 140px;
+   width: 140px;
+   max-width: 200px;
   }
   ::v-deep .el-icon-star-on{
     font-size: 16px;

src/views/business-analysis/topology/components/keyBusinessCon.vue

@@ -89,18 +89,24 @@
           </template>
         </el-table-column>
 
-        <el-table-column v-if="colData[8].istrue" header-align="center" align="center" label="中位延迟" prop="duration_median" width="200">
+        <el-table-column v-if="colData[8].istrue" header-align="center" align="center" label="中位延迟11" prop="duration_median" width="200">
           <template slot-scope="scope">
-            <div :class="scope.row.duration_median<2000?'table_bg':'table_bg_red'">
-              <div class="table-num-box">
-                {{ scope.row.duration_median==undefined?0:Number(scope.row.duration_median).toFixed(2) }}
-              </div>
-              <div class="table-day-rate-box">
-                <i v-show="processNumber(scope.row.duration_median_dod).sign" :class="processNumber(scope.row.duration_median_dod).sign == 'up'? 'el-icon-up up':'el-icon-down down'" />
-                <span>
-                  {{ scope.row.duration_median_dod==undefined?0:getErrRate(processNumber(scope.row.duration_median_dod).value) }}
-                </span>
+            <div :class="scope.row.duration_median<2000?'table_bg':'table_bg_red'" style="display:flex;">
+              <div>
+                <div class="table-num-box">
+                  {{ scope.row.duration_median==undefined?0:Number(scope.row.duration_median).toFixed(2) }}
+                </div>
+                <div class="table-day-rate-box">
+                  <i v-show="processNumber(scope.row.duration_median_dod).sign" :class="processNumber(scope.row.duration_median_dod).sign == 'up'? 'el-icon-up up':'el-icon-down down'" />
+                  <span>
+                    {{ scope.row.duration_median_dod==undefined?0:getErrRate(processNumber(scope.row.duration_median_dod).value) }}
+                  </span>
+                </div>
               </div>
+              <span v-if="scope.row.quantiles!=undefined" style="display:flex;">
+                {{ drawEchartsp5(scope.row, scope.$index, 'five') }}
+                <div :id="`tiger-five-trend-index` + scope.$index" style="flex:1;padding-left:10px" class="tiger-trend-charts" />
+              </span>
             </div>
           </template>
         </el-table-column>
@@ -865,19 +871,19 @@ export default {
       }
 
       setTimeout(() => {
-        const chartId = 'tiger-' + arguments[2] + '-trend-index' + arguments[1]
-        let myChart = this.$echarts5.getInstanceByDom(document.getElementById(chartId))
-        if (myChart == null) {
-          myChart = that.$echarts5.init(document.getElementById(chartId), 'macarons')
-        }
-        myChart.dispatchAction({ type: 'hideTip' })
-        this.myChartList.push(myChart)
-        option && myChart.setOption(option, true)
-        // myChart.group = `index${row.id}`
-        // this.$echarts5.connect(`index${row.id}`)
+        this.$nextTick(() => {
+          const chartId = 'tiger-' + arguments[2] + '-trend-index' + arguments[1]
+          let myChart = this.$echarts5.getInstanceByDom(document.getElementById(chartId))
+          if (myChart == null) {
+            myChart = that.$echarts5.init(document.getElementById(chartId), 'macarons')
+          }
+          myChart.dispatchAction({ type: 'hideTip' })
+          this.myChartList.push(myChart)
+          option && myChart.setOption(option, true)
+          // myChart.group = `index${row.id}`
+          // this.$echarts5.connect(`index${row.id}`)
+        })
       }, 1000)
-
-      // }
     },
     drawEchartsp90(row, index) {
       const that = this