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

src/views/business-analysis/analysisDetail/components/Topo.vue

@@ -637,6 +637,7 @@ export default {
   bottom:30px;
   z-index: 1001;
   transition: all .3s;
+  padding: 16px;
 }
 .full{
   width:32px;

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

@@ -70,13 +70,12 @@
   </div>
 </template>
 <script>
-import { listBiz, addUrlMapping, updateBiz, getBizDetail, listBizGraph, getSweetList } from '@/api/mapping'
+import { getBizDetail, listBizGraph, getSweetList } from '@/api/mapping'
 import Topo from '../../analysisDetail/components/Topo.vue'
 import storage from '@/utils/storage'
 import LinkDetailsDrawer from '../../../service/InterfaceDetail/components/LinkDetailsDrawer.vue'
 import NodeDetailDrawer from '../../../service/InterfaceDetail/components/NodeDetailDrawer.vue'
 import NodeG6Charts from '../../../service/InterfaceDetail/components/NodeG6Charts.vue'
-import { string } from 'clipboard'
 export default {
   components: {
     Topo,
@@ -89,11 +88,11 @@ export default {
       type: Boolean,
       default: false
     },
-    bussinessId:{
+    bussinessId: {
       type: Number,
       default: 1
     },
-    bussinessName:{
+    bussinessName: {
       type: String,
       default: ''
     }
@@ -216,9 +215,9 @@ export default {
       this.sweetquanParams.start_time = start_time
       this.sweetquanParams.end_time = end_time
       this.sweetquanParams.biz_id = this.bussinessId
-      //获取右侧数据
+      // 获取右侧数据
       this.handelgetBizDetail()
-      //获取甜甜圈数据
+      // 获取甜甜圈数据
       this.getSweetListFn(this.bussinessId)
     }
   },

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

@@ -1,6 +1,6 @@
 <template>
   <div style="padding:16px;">
-    <el-row :gutter="10" class="mb8">
+    <el-row :gutter="10" class="mb8" style="display: flex;align-items: center;">
       <el-col :span="5">
         <div class="flex">
           <span class="seach-title">涉及的服务</span>
@@ -17,20 +17,20 @@
       <el-col :span="5">
         <div class="flex">
           <span class="seach-title">延迟范围 >=</span>
-          <el-input v-model="queryParams.duration" style="width: 70%" type="number" size="small" clearable placeholder="请输入延迟范围" @keyup.enter.native="handleQuery" @clear="handleQuery" />
+          <el-input v-model="queryParams.duration" style="width: 70%" size="small" clearable placeholder="请输入延迟范围" @keyup.enter.native="handleQuery" @clear="handleQuery" />
         </div>
       </el-col>
       <el-col :span="5">
         <div class="flex">
           <span class="seach-title">错误率 >=</span>
-          <!-- <el-input v-model="queryParams.error_rate" style="width: 70%" type="number" size="small" clearable placeholder="请输入0-1之间的小数" @keyup.enter.native="handleQuery" @clear="handleQuery" /> -->
-          <el-input-number size="small" controls-position="right"  style="width: 70%" v-model="queryParams.error_rate" :step="0.1" :min="0" :max="1"  clearable placeholder="请输入0-1之间的小数" @keyup.enter.native="handleQuery" ></el-input-number>
+          <el-input v-model="queryParams.error_rate" style="width: 70%" size="small" clearable placeholder="请输入0-1之间的小数" @keyup.enter.native="handleQuery" @clear="handleQuery" />
+          <!-- <el-input-number size="small" controls-position="right"  style="width: 70%" v-model="queryParams.error_rate" :step="0.1" :min="0" :max="1"  clearable placeholder="请输入0-1之间的小数" @keyup.enter.native="handleQuery" ></el-input-number> -->
         </div>
       </el-col>
       <el-col :span="5">
         <div class="flex">
           <span class="seach-title">请求量 >=</span>
-          <el-input v-model="queryParams.request_total" style="width: 70%" type="number" size="small" clearable placeholder="请输入请求量" @keyup.enter.native="handleQuery" @clear="handleQuery" />
+          <el-input v-model="queryParams.request_total" style="width: 70%"  size="small" clearable placeholder="请输入请求量" @keyup.enter.native="handleQuery" @clear="handleQuery" />
         </div>
       </el-col>
       <el-col :span="4">
@@ -122,7 +122,7 @@
             </div>
           </template>
         </el-table-column>
-        <el-table-column v-if="colData[5].istrue" header-align="center" align="center" label="错误率" sortable prop="error_rate" :show-overflow-tooltip="true">
+        <el-table-column v-if="colData[5].istrue" header-align="center" align="center" label="错误率" prop="error_rate" :show-overflow-tooltip="true">
           <template slot-scope="scope">
             <div :class="scope.row.error_rate==0?'table_bg':'table_bg_red'">
               <div class="table-num-box">
@@ -175,7 +175,7 @@
               </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" />
+                <div :id="`allBussiness-five-trend-index` + scope.$index" style="flex:1;padding-left:10px; height: 40px;width: 120px; max-width: 200px;" class="tiger-trend-charts" />
               </span>
             </div>
           </template>
@@ -196,7 +196,7 @@
               </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" />
+                <div :id="`allBussiness-nine-trend-index` + scope.$index" style="flex:1;padding-left:10px" class="tiger-trend-charts" />
               </span>
             </div>
           </template>
@@ -217,7 +217,7 @@
               </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" />
+                <div :id="`allBussiness-hundred-trend-index` + scope.$index" style="flex:1;padding-left:10px" class="tiger-trend-charts" />
               </span>
             </div>
           </template>
@@ -287,19 +287,17 @@
 
 <script>
 import ServiceSpaceDrawer from './ServiceSpaceDrawer.vue'
-import { addUrlMapping, getNewBusinessList, listBizStats, getBizDetail, listBizGraph, updateBiz, delBiz, favorBiz } from '@/api/mapping'
+import { addUrlMapping, getNewBusinessList, listBizStats, listBizGraph, updateBiz, delBiz, favorBiz } from '@/api/mapping'
 import { formatJson } from '@/utils'
 import storage from '@/utils/storage'
 // import bus from '@/utils/bus'
 import { listService } from '@/api/service'
 import { getToken } from '@/utils/auth'
 import resize from '../../mixins/resize'
-import Topo from './Topo'
 import BigNumber from 'bignumber.js'
 export default {
   name: 'allBusinessCon',
   components: {
-    Topo,
     ServiceSpaceDrawer
   },
   mixins: [resize],
@@ -316,7 +314,7 @@ export default {
         '错误率',
         // '最大延迟(ms)',
         // "延迟比例",
-        // '中位延迟'
+        '中位延迟'
         // '90分位延迟',
         // '99分位延迟'
       ],
@@ -1012,7 +1010,7 @@ export default {
       }
 
       setTimeout(() => { // tiger-five-trend-index
-        const chartId = 'tiger-' + 'five' + '-trend-index' + index
+        const chartId = 'allBussiness-' + 'five' + '-trend-index' + index
 
         let myChart = that.$echarts5.getInstanceByDom(document.getElementById(chartId))
         if (myChart == null) {
@@ -1078,7 +1076,7 @@ export default {
       }
 
       setTimeout(() => {
-        const chartId = 'tiger-' + arguments[2] + '-trend-index' + arguments[1]
+        const chartId = 'allBussiness-' + arguments[2] + '-trend-index' + arguments[1]
         let myChartbox = this.$echarts5.getInstanceByDom(document.getElementById(chartId))
         if (myChartbox == null) {
           myChartbox = that.$echarts5.init(document.getElementById(chartId), 'ninebox')
@@ -1144,7 +1142,7 @@ export default {
       }
 
       setTimeout(() => {
-        const chartId = 'tiger-' + arguments[2] + '-trend-index' + arguments[1]
+        const chartId = 'allBussiness-' + arguments[2] + '-trend-index' + arguments[1]
         let myChartBox2 = this.$echarts5.getInstanceByDom(document.getElementById(chartId))
         if (myChartBox2 == null) {
           myChartBox2 = that.$echarts5.init(document.getElementById(chartId), 'hundredbox')
@@ -1287,6 +1285,9 @@ export default {
 ::v-deep .el-input--suffix .el-input__inner{
   padding-right: 0;
 }
+::v-deep .el-checkbox__label{
+  font-size: 12px;
+}
 .flex{
   display: flex;
   align-items: center;

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

@@ -52,7 +52,7 @@
             </div>
           </template>
         </el-table-column>
-        <el-table-column v-if="colData[5].istrue" header-align="center" align="center" label="错误率" sortable prop="error_rate" :show-overflow-tooltip="true">
+        <el-table-column v-if="colData[5].istrue" header-align="center" align="center" label="错误率" prop="error_rate" :show-overflow-tooltip="true">
           <template slot-scope="scope">
             <div :class="scope.row.error_rate==0?'table_bg':'table_bg_red'">
               <div class="table-num-box">
@@ -70,7 +70,15 @@
         <el-table-column header-align="center" align="center" label="最大延迟(ms)" sortable prop="duration_max" :show-overflow-tooltip="true">
           <template slot-scope="scope">
             <div :class="scope.row.duration_max<2000?'table_bg':'table_bg_red'">
-              {{ scope.row.duration_max==undefined?0:Number(scope.row.duration_max).toFixed(2) }}
+              <div class="table-num-box">
+                {{ scope.row.duration_max==undefined?0:Number(scope.row.duration_max).toFixed(2) }}
+              </div>
+              <div class="table-day-rate-box">
+                <i v-show="processNumber(scope.row.duration_max_dod).sign" :class="processNumber(scope.row.duration_max_dod).sign == 'up'? 'el-icon-up up':'el-icon-down down'" />
+                <span>
+                  {{ scope.row.duration_max_dod==undefined?0:getErrRate(processNumber(scope.row.duration_max_dod).value) }}
+                </span>
+              </div>
             </div>
           </template>
         </el-table-column>
@@ -106,7 +114,7 @@
               </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" />
+                <div :id="`keyBuiness-five-trend-index` + scope.$index" style="flex:1;padding-left:10px; height: 40px;width: 120px; max-width: 200px;" class="tiger-trend-charts" />
               </span>
             </div>
           </template>
@@ -184,12 +192,10 @@ import storage from '@/utils/storage'
 
 import { getToken } from '@/utils/auth'
 import resize from '../../mixins/resize'
-import Topo from './Topo'
 import BigNumber from 'bignumber.js'
 export default {
   name: 'keyBusinessCon',
   components: {
-    Topo,
     ServiceSpaceDrawer
   },
   mixins: [resize],
@@ -219,7 +225,6 @@ export default {
         { title: '错误率', istrue: false },
         { title: '最大延迟(ms)', istrue: false },
         { title: '平均延迟(ms)', istrue: false },
-        // { title: "延迟比例", istrue: false },
         { title: '中位延迟', istrue: false }
       ],
       isUpdate: false,
@@ -363,6 +368,7 @@ export default {
     this.columnChange()
   },
   mounted() {
+    // window.addEventListener('resize', this.onResize)
     this.$forceUpdate()
   },
   beforeDestroy() {
@@ -575,10 +581,13 @@ export default {
                 }
               })
             }
+            this.$nextTick(() => {
+              this.$forceUpdate()
+            })
+            setTimeout(() => {
+              this.$forceUpdate()
+            }, 0)
           }
-          this.$nextTick(() => {
-            this.$forceUpdate()
-          })
         }
       })
     },
@@ -816,7 +825,7 @@ export default {
         myChart.resize()
       })
     },
-    drawEchartsp5(row, index) {
+    drawEchartsp5(row, index, name) {
       const that = this
       let obj = {}
       obj = row
@@ -870,7 +879,7 @@ export default {
 
       setTimeout(() => {
         this.$nextTick(() => {
-          const chartId = 'tiger-' + arguments[2] + '-trend-index' + arguments[1]
+          const chartId = 'keyBuiness-' + 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')

src/views/business-analysis/topology/systemTab.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="system-tab-content">
-    <el-tabs class="customTab" v-model="activeName">
-    <el-tab-pane v-for="tab in tabs" :key="tab.name" :name="tab.name">
-      <span slot="label">
-        <el-button size="small" round class="ob-header-btn">{{ tab.label }}</el-button>
-      </span>
-      <component :is="tab.component" />
-    </el-tab-pane>
-  </el-tabs>
+    <el-tabs v-model="activeName" class="customTab">
+      <el-tab-pane v-for="tab in tabs" :key="tab.name" :name="tab.name">
+        <span slot="label">
+          <el-button size="small" round class="ob-header-btn">{{ tab.label }}</el-button>
+        </span>
+        <component :is="tab.component" />
+      </el-tab-pane>
+    </el-tabs>
   </div>
 </template>
 <script>
@@ -16,10 +16,10 @@ import KeyBusinessCon from './components/keyBusinessCon.vue'
 import AllBusinessCon from './components/allBusinessCon.vue'
 export default {
   components: {
-  TopoCon,
-  KeyBusinessCon,
-  AllBusinessCon
-},
+    TopoCon,
+    KeyBusinessCon,
+    AllBusinessCon
+  },
   data() {
     return {
       activeName: 'topoCon',
@@ -27,22 +27,22 @@ export default {
         {
           name: 'topoCon',
           label: '动态拓扑',
-          component: 'TopoCon', // 组件名称
+          component: 'TopoCon' // 组件名称
         },
         {
           name: 'keyBusinessCon',
           label: '重点业务',
-          component: 'KeyBusinessCon', // 组件名称
+          component: 'KeyBusinessCon' // 组件名称
         },
         {
           name: 'allBusinessCon',
           label: '业务总览',
-          component: 'AllBusinessCon', // 组件名称
-        },
+          component: 'AllBusinessCon' // 组件名称
+        }
       ]
-    };
+    }
   }
-};
+}
 </script>
 <style lang="scss" scoped>
 .system-tab-content{