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

package.json

@@ -57,6 +57,7 @@
     "@vue/composition-api": "^1.7.2",
     "awe-dnd": "^0.3.4",
     "axios": "0.21.1",
+    "bignumber.js": "^9.1.2",
     "clipboard": "2.0.6",
     "codemirror": "5.62.0",
     "core-js": "^3.33.0",

src/views/apps/components/Service.vue

@@ -1,23 +1,18 @@
 <template>
-    <!-- <div id="service" :style="{ height: height + 'px' }"> -->
       <div id="service">
-      <!-- @sort-change="handleSortChang" 需要后端进行排序时使用  :default-sort = "{prop: 'total', order: 'descending'}"-->
         <el-table
           v-loading="loading"
           :data="serveceMapListFavor"
-          @row-click="handleRowClick" 
+          @row-click="handleRowClick"
         >
           <el-table-column header-align="left" label="接口名" prop="name" align="left" :show-overflow-tooltip="true"/>
-          <!-- <el-table-column header-align="center" label="URL组" prop="url" align="left" :show-overflow-tooltip="true" /> -->
           <el-table-column header-align="center" label="rpm" prop="rpm" sortable align="center" :show-overflow-tooltip="true" width='80'>
             <template slot-scope="scope">
-                <!-- <span>{{ Number(scope.row.rpm).toFixed(2)}}</span> -->
                 <el-tag>{{ Number(scope.row.rpm).toFixed(2)}}</el-tag>
               </template>
           </el-table-column>
           <el-table-column header-align="center" label="count" prop="total" sortable align="center" width="100">
              <template slot-scope="scope">
-                <!-- <span>{{ Number(scope.row.rpm).toFixed(2)}}</span> -->
                 <el-tag>{{ Number(scope.row.total).toFixed(2)}}</el-tag>
               </template>
           </el-table-column>
@@ -27,40 +22,13 @@
                     <el-tag v-else type="danger">{{  Number(scope.row.error_rate).toFixed(2)}}</el-tag>
               </template>
           </el-table-column>
-          <!-- <el-table-column header-align="center" label="max(ms)" sortable prop="duration_stats" align="center" width="100">
-            <template slot-scope="scope">
-              <span>{{ Number(scope.row.max).toFixed(2)}}</span>
-            </template>
-          </el-table-column>
-          <el-table-column header-align="center" label="avg(ms)" sortable prop="duration_stats" align="center" width="100">
-            <template slot-scope="scope">
-              <span>{{ Number(scope.row.avg).toFixed(2)}}</span>
-            </template>
-          </el-table-column> -->
+
           <el-table-column header-align="center" label="延迟比例" prop="duration_stats" align="center">
               <template slot-scope="scope">
                 {{ drawEchartsp(scope.row, scope.$index, 'service') }}
                 <div :id="`tiger-service-trend-index` + scope.$index" class="tiger-trend-charts"></div>
               </template>
           </el-table-column>
-          <!-- <el-table-column header-align="center" label="P.50" prop="duration_stats" align="center">
-            <template slot-scope="scope">
-                {{ drawEchartsp5(scope.row, scope.$index, 'five') }}
-                <div :id="`tiger-five-trend-index` + scope.$index" class="tiger-trend-charts"></div>
-            </template>
-          </el-table-column>
-          <el-table-column header-align="center" label="P.95" prop="duration_stats" align="center">
-            <template slot-scope="scope">
-                {{ drawEchartsp9(scope.row, scope.$index, 'nine') }}
-                <div :id="`tiger-nine-trend-index` + scope.$index" class="tiger-trend-charts"></div>
-            </template>
-          </el-table-column>
-          <el-table-column header-align="center" label="P.99" prop="duration_stats" align="center">
-            <template slot-scope="scope">
-                {{ drawEchartsp99(scope.row, scope.$index, 'ninety') }}
-                <div :id="`tiger-ninety-trend-index` + scope.$index" class="tiger-trend-charts"></div>
-            </template>
-          </el-table-column> -->
         </el-table>
 
          <el-drawer
@@ -282,11 +250,11 @@ export default {
     },
     handleRowClick(row, column, event){
       this.drawer=true;
-      this.$nextTick(() =>{ 
+      this.$nextTick(() =>{
         this.drawEchartsScale(row);
-       }) 
+       })
       setTimeout(()=>{
-        
+
         this.childQueryParams.id = row.id;
         this.childQueryParams.kind = row.kind;
         this.handelgetUrlMappingRange();
@@ -384,7 +352,7 @@ export default {
       myChartScale.getZr().on('click', params => {
         let data = storage.get('paramsValue')
         let timestamp = moment(data[0].name).unix();
-        
+
         _this.childQueryParams.start_time = timestamp
         _this.childQueryParams.end_time =timestamp
         _this.handelgetUrlMappingRange();
@@ -396,7 +364,7 @@ export default {
       },timeOut)
     },
     handleSortChang(column, prop, order) {
-      
+
       prop = column.prop
       order = column.order
       if (this.order !== '' && this.order !== prop + 'Order') {

src/views/business-analysis/analysis/components/AnalysisMap.vue

@@ -68,7 +68,8 @@
         <el-table-column v-if="colData[5].istrue" header-align="center" label="errRate" sortable prop="error_rate" align="right" :show-overflow-tooltip="true">
           <template slot-scope="scope">
             <div :class="scope.row.error_rate==0?'table_bg':'table_bg_red'">
-              {{ scope.row.error_rate==0?scope.row.error_rate:Number(scope.row.error_rate).toFixed(2) }}
+              {{getErrRate(scope.row.error_rate)}}
+              <!-- {{ scope.row.error_rate==0?scope.row.error_rate:Number(scope.row.error_rate).toFixed(2) }} -->
             </div>
           </template>
         </el-table-column>
@@ -302,6 +303,7 @@ import resize from '../../mixins/resize'
 import moment from 'moment'
 // import elTableInfiniteScroll from 'el-table-infinite-scroll';
 import Topo from './Topo'
+import BigNumber from 'bignumber.js'
 export default {
   name: 'ServiceMap',
   components: {
@@ -483,11 +485,11 @@ export default {
       this.BizStatsQuery.end_time = end_time
       this.childQueryParams.start_time = start_time
       this.childQueryParams.end_time = end_time
-
       this.getList()
       this.$forceUpdate()
     }
     this.columnChange()
+
   },
   mounted() {
     this.$forceUpdate()
@@ -499,6 +501,54 @@ export default {
     this.disposeEcharts(this.myChartBox2List)
   },
   methods: {
+    getErrRate(error_rate){
+      let strErrorRate = numToString(error_rate)
+      let length = 0
+      if (strErrorRate !== '0'){
+        let arr = strErrorRate.split('.')
+        if (arr.length > 1) {
+          length = strErrorRate.split('.')[1].length
+        }
+      }
+      if(error_rate == 0) {
+        return error_rate
+      } else if (error_rate == 1){
+        return error_rate * 100 + '%'
+      } else if (length<=2 ) {
+        return error_rate * 100 + '%'
+      } else {
+        return convertToPercentage(error_rate)
+      }
+      function numToString(num) {
+        let str = num.toString();
+        if (str.includes('e')) {
+          let parts = str.split('e');
+          let base = parts[0];
+          let exp = parseInt(parts[1]);
+          let decimalPlaces = base.split('.')[1]?.length || 0;
+          let zerosNeeded = Math.abs(exp) - decimalPlaces;
+          if (exp < 0) {
+            str = '0.' + '0'.repeat(zerosNeeded) + base.replace('.', '');
+          } else {
+            str = base + '0'.repeat(zerosNeeded);
+          }
+        }
+        return str;
+      }
+      function convertToPercentage(value) {
+        let bnValue = new BigNumber(value);
+        let percentage = bnValue.multipliedBy(100);// 乘法运算
+        let roundedPercentage = percentage.decimalPlaces(2, BigNumber.ROUND_FLOOR);// decimalPlaces保留小数位
+
+        // 如果四舍五入后的值小于原始值，手动增加 0.01
+        if (roundedPercentage.isLessThan(percentage)) {// 判断是否小于
+          roundedPercentage = roundedPercentage.plus(0.01);
+        }
+
+        return `${roundedPercentage.toFixed(2)}%`;
+      }
+
+    },
     handleUpdateName() {
       this.open = true
       this.form = this.detailObj
@@ -642,7 +692,7 @@ export default {
         }
       }
     },
-    getList() {
+    getList() {// 解析列表的table 数据
       this.loading = true
       const _this = this
       this.myChartList = []

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

@@ -505,7 +505,6 @@ export default {
       if (typeof onInit === 'function') {
         onInit(graph)
       }
-      console.log('graph.node------99999-------', data)
       graph.data(data)
       graph.render()
       // 让画布内容适应视口

src/views/business-analysis/analysisDetail/index.vue

@@ -2,7 +2,7 @@
   <BasicLayout>
     <template #wrapper>
       <el-card class="box-card" style="flex:1;">
-        <div style="margin-bottom:16px;">
+        <div >
           <el-page-header @back="back">
             <div slot="content">
               <span style="font-size:18px;margin-right:16px;">{{ detailTitle }}</span>
@@ -14,14 +14,30 @@
             </div>
           </el-page-header>
         </div>
-        <div style="margin-bottom:16px;">
+        <div >
           <div class="flexWrap">
             <div class="flex-left">
-              <div v-if="JSON.stringify(graphData)!=&quot;{}&quot;" v-loading="loading">
-                <div style="font-size:14px;font-weight:bold;text-align:right">
-                  <svg-icon :icon-class="isFull?'exit-fullscreen':'fullscreen'" @click.native.prevent="clickFull" />
+              <div class="ob-switch-box">
+                <el-switch
+                  v-model="switchValue"
+                  active-color="#165DFF"
+                  inactive-color="#C9CDD4"
+                  @change="handelSwitch"
+                />
+              </div>
+              <div v-if="switchValue">
+                <div v-if="JSON.stringify(graphData)!=&quot;{}&quot;" v-loading="loading">
+                  <div style="font-size:14px;font-weight:bold;text-align:right">
+                    <svg-icon :icon-class="isFull?'exit-fullscreen':'fullscreen'" @click.native.prevent="clickFull" />
+                  </div>
+                  <Topo ref="topo" :graph-data="graphData" topo-id="container" @changeState="clickRowHandleNode" />
+                </div>
+              </div>
+              <div v-else style="position:relative;height: 100%;">
+                <div v-if="isLoading" v-loading="isLoading" class="loading-overlay"></div>
+                <div v-else>
+                  <NodeG6Charts v-if="sweetGraphData && Object.keys(sweetGraphData).length > 0" :chart-content-id="'serviceDrawerContainer'" :graph-data="sweetGraphData" />
                 </div>
-                <Topo ref="topo" :graph-data="graphData" topo-id="container" @changeState="clickRowHandleNode" />
               </div>
             </div>
             <div class="flex-right">
@@ -85,7 +101,7 @@
         <el-drawer
           :visible.sync="drawer"
           direction="rtl"
-          size="40%"
+          size="50%"
           @close="drawerClose"
         >
           <h4 slot="title" style="font-size:16px">{{ detailData.name }}</h4>
@@ -108,6 +124,7 @@
                   </div>
                   <div class="node-details-info-field">
                     <div class="node-details-info-field-label truncate w50" style="width:50%">所属服务:</div>
+                    <!--  目前后端没返回服务别名，中文名的字段 -->
                     <div class="node-details-info-field-value truncate w50" style="width:50%;color:#1890ff;cursor: pointer;" @click="gotoPathService(&quot;/service/serviceDetail/index&quot;,detailData.service_name)">
                       {{ detailData.service_name }}
                     </div>
@@ -206,13 +223,15 @@
 </template>
 <script>
 import storage from '@/utils/storage'
-import { getBizDetail, listBizGraph, updateBiz, listBiz, bizNodeStats, bizNodeName, bizNodeSpans } from '@/api/mapping'
+import { getBizDetail, listBizGraph, updateBiz, listBiz, bizNodeStats, bizNodeName, bizNodeSpans, getSweetList, addUrlMapping, listBizStats } from '@/api/mapping'
 import Topo from './components/Topo'
 import resize from '../mixins/resize'
 import moment from 'moment'
+import NodeG6Charts from '../../service/InterfaceDetail/components/NodeG6Charts.vue'
 export default {
   components: {
-    Topo
+    Topo,
+    NodeG6Charts
   },
   mixins: [resize],
   data() {
@@ -291,7 +310,21 @@ export default {
       nodeCount: 0,
       nodeloading: false,
       checked: false,
-      onlyException: false
+      onlyException: false,
+      switchValue: false,
+      isLoading: false,
+      sweetquanParams: {
+        biz_id: 0,
+        start_time: '',
+        end_time: ''
+      },
+      sweetGraphData:{},
+      appItem: {},
+      chartQuantiles: {
+        biz_id: null,
+        start_time: '',
+        end_time: ''
+      }
     }
   },
   watch: {
@@ -309,11 +342,21 @@ export default {
 
           this.queryStats.start_time = newValue.startTime
           this.queryStats.end_time = newValue.endTime
+          this.sweetquanParams.start_time = newValue.startTime
+          this.sweetquanParams.end_time = newValue.endTime
+
+          this.chartQuantiles.start_time = newValue.startTime
+          this.chartQuantiles.end_time = newValue.endTime
 
           this.querySpans.pageIndex = 1
-          this.getList()
-          this.handelgetBizDetail()
-          this.getListBizGraph(this.$route.query.id)
+          this.getList() // 获取前一个页面-解析列表的table 数据
+          this.handelgetBizDetail()// 获取table 表格
+          //
+          if (this.switchValue) {
+            this.getListBizGraph(this.$route.query.id)// 获取紧凑树接口
+          } else {
+            this.getSweetListFn() // 获取甜甜圈接口
+          }
           if (newValue.timeOut) {
             if (newValue.timeOut == 1) {
               clearInterval(this.timer)
@@ -342,28 +385,60 @@ export default {
 
     this.queryStats.start_time = start_time
     this.queryStats.end_time = end_time
+    this.sweetquanParams.start_time = start_time
+    this.sweetquanParams.end_time = end_time
 
+    this.chartQuantiles.start_time = start_time
+    this.chartQuantiles.end_time = end_time
+
+    this.appItem = storage.get('appsItem')
     this.detailObj = storage.get('detailObj')
     if (this.$route.query.id != undefined) {
       this.childQueryParams.biz_id = this.$route.query.id
+      this.chartQuantiles.biz_id = this.$route.query.id
       this.detailTitle = this.$route.query.name
-      this.queryParams.app_id = this.$route.query.id
+      this.queryParams.app_id = this.appItem.id
+      this.sweetquanParams.biz_id = this.$route.query.id
       this.handelgetBizDetail()
-      this.getListBizGraph(this.$route.query.id)
+      this.getList()
+      if (this.switchValue) {
+        this.getListBizGraph(this.$route.query.id)
+      } else {
+        this.getSweetListFn()
+      }
+
     }
   },
   mounted() {
-    this.$nextTick(() => {
-      if (document.getElementById('scaleMain')){
-        this.drawEchartsScale(this.detailObj)
-      }
-    })
+    // this.$nextTick(() => {
+    //   if (document.getElementById('scaleMain')){
+    //     this.drawEchartsScale(this.detailObj)
+    //   }
+    // })
   },
   beforeDestroy() {
     clearInterval(this.timer)
     this.graphData = {}
   },
   methods: {
+    handelSwitch() {
+      if (this.switchValue) {
+        this.getListBizGraph(this.sweetquanParams.biz_id)
+      } else {
+        this.getSweetListFn()
+      }
+    },
+    async getSweetListFn() {
+      this.isLoading = true
+      this.sweetGraphData = {}
+      const res = await getSweetList(this.sweetquanParams)
+      if (res && res.code === 200) {
+        this.sweetGraphData = res.data
+      } else {
+        this.sweetGraphData = {}
+      }
+      this.isLoading = false
+    },
     gotoPathService(path, service_name) {
       const href = this.$router.resolve({
         path: path,
@@ -414,7 +489,7 @@ export default {
     },
     getNodeStats() {
       bizNodeStats(this.queryStats).then(res => {
-        if (res.code == 200) {
+        if (res&& res.code == 200) {
           this.nodeStats = res.data
         }
       })
@@ -459,6 +534,7 @@ export default {
     handleUpdateName() {
       this.open = true
       this.form = this.detailObj
+      delete this.form.quantiles
     },
     /** 提交按钮 */
     submitForm: function() {
@@ -473,10 +549,6 @@ export default {
                 this.$router.push({
                   path: '/business-analysis/analysis/index'
                 })
-                // this.queryParams.pageIndex =1;
-                // this.serveceMapList=[];
-                // this.tempList=[];
-                // this.getList()
               } else {
                 this.msgError(response.msg)
               }
@@ -503,12 +575,28 @@ export default {
       this.open = false
       this.reset()
     },
-    getList() {
+    getList() { // 获取前一个页面-解析列表的table 数据
       listBiz(this.queryParams).then(res => {
         if (res.code == 200) {
           for (let i = 0; i < res.data.list.length; i++) {
-            if (res.data.list[i].id = this.this.$route.query.id) {
+            if (res.data.list[i].id == this.$route.query.id) {
               this.detailTitle = res.data.list[i].name
+              this.detailObj = res.data.list[i]
+
+              listBizStats(this.chartQuantiles).then(response => {
+                if (response.code == 200) {
+                  if (response.data.biz_id != undefined) {
+                    if (this.detailObj.id == response.data.biz_id) {
+                      this.detailObj = Object.assign({}, this.detailObj, response.data)
+                      storage.set('detailObj', this.detailObj)
+                      setTimeout(()=>{
+                        this.drawEchartsScale(this.detailObj)
+                      },100)
+                    }
+                  }
+                }
+              })
+
             }
           }
         }
@@ -538,7 +626,7 @@ export default {
         path: '/business-analysis/analysis/index'
       })
     },
-    handelgetBizDetail() {
+    handelgetBizDetail() {// 获取table 表格
       this.tableLoading = true
       getBizDetail(this.childQueryParams).then(res => {
         if (res.code == 200) {
@@ -583,7 +671,10 @@ export default {
     },
     drawEchartsScale(row) {
       const _this = this
-      const myChartScale = this.$echarts5.init(document.getElementById('scaleMain'))
+      let myChartScale = this.$echarts5.getInstanceByDom(document.getElementById('scaleMain'));
+      if (myChartScale == undefined) {
+        myChartScale = this.$echarts5.init(document.getElementById('scaleMain'));
+      }
       // 绘制趋势echarts
       const option = {
         tooltip: {
@@ -744,6 +835,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 .node-details{
+
   .node-details-content{
     // width:420px;
     padding:0 36px;
@@ -794,6 +886,11 @@ export default {
     width:50%;
   }
 }
+.ob-switch-box{
+  text-align: right;
+  width: 100%;
+  margin-bottom: 10px;
+}
 ::v-deep .el-drawer__header {
   padding:16px;
   background:#1890ff;

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

@@ -683,6 +683,7 @@ export default {
         var dataIndex = params.dataIndex
         var seriesIndex = params.seriesIndex
         var service_name = data.serivce_data[dataIndex]
+         // todo 目前后端没返回服务别名
         that.$router.push({
           path: '/service/serviceDetail/index',
           query: {

src/views/index/index.vue

@@ -65,10 +65,12 @@
                   placeholder="请输入url"
                   @select="handleSelect"
                 >
-                  <template slot-scope="{ item }">
-                    <div v-show="item.Route">
-                      <span>{{ item.Route }}</span>
-                      <div class="ob-select-right">
+                  <template slot-scope="{ item, $index }">
+                    <div v-show="item.Route"  class="ob-select-box">
+                      <el-tooltip placement="bottom" effect="dark"  :content="item.Route"  >
+                        <span class="ob-select-title"  ref="KnowledgeContent">{{ item.Route }}</span>
+                      </el-tooltip>
+                      <div >
                         <el-tag size="mini" type="success" class="ob-tag-right">{{ item.Method }}</el-tag>
                         <el-tag size="mini">{{ item.ServiceName }}</el-tag>
                       </div>
@@ -267,7 +269,8 @@ export default {
         pageSize: 100
       },
       pageTotal: 0,
-      openMonitor: false
+      openMonitor: false,
+      isShowTooltip: false
     }
   },
   computed: {
@@ -325,6 +328,11 @@ export default {
     clearInterval(this.appTimer)
   },
   methods: {
+    onMouseOver (i) {
+      const parentWidth = this.$refs.KnowledgeContent[i]?.parentNode?.offsetWidth // 获取当前元素父级可视宽度
+      const contentWidth = this.$refs.KnowledgeContent[i]?.offsetWidth // 获取当前元素可视宽度
+      this.isShowTooltip = contentWidth <= parentWidth
+    },
     async logout() {
       this.$confirm('确定注销并退出系统吗？', '提示', {
         confirmButtonText: '确定',
@@ -512,6 +520,7 @@ export default {
     handleSelect(item) {
       // 处理选中项
       const obj = this.appList.filter(m => m.alias === item.AppAlias)[0]
+      console.log('item..----', item.AppAlias,  item.$index)
       storage.set('appsItem', obj)
       const rowItem = {
         method: item.Method,
@@ -801,8 +810,17 @@ export default {
       font-weight: bold;
       font-size: 18px;
     }
-    .ob-select-right{
-      float:right;
+    .ob-select-title{
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      display: inline-block;
+      max-width: 70%;
+    }
+    .ob-select-box{
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
     }
     .ob-tag-right{
       margin-right: 10px;

src/views/service/Interface/components/InterfaceMap.vue

@@ -132,9 +132,8 @@
         <el-table-column v-if="colData[6].istrue" header-align="center" label="errRate" sortable prop="error_rate" align="right" :show-overflow-tooltip="true">
           <template slot-scope="scope">
             <div :class="scope.row.error_rate==0?'table_bg':'table_bg_red'">
-              <!-- <el-tag v-if="scope.row.error_rate==0">{{  scope.row.error_rate }}</el-tag>
-                  <el-tag v-else type="danger">{{  Number(scope.row.error_rate).toFixed(2)}}</el-tag> -->
-              {{ scope.row.error_rate==0?scope.row.error_rate:Number(scope.row.error_rate).toFixed(2) }}
+              {{getErrRate(scope.row.error_rate)}}
+              <!-- {{ scope.row.error_rate==0?scope.row.error_rate:Number(scope.row.error_rate).toFixed(2) }} -->
             </div>
           </template>
         </el-table-column>
@@ -360,6 +359,7 @@ import { getToken } from '@/utils/auth'
 // import echarts from 'echarts'
 import resize from './mixins/resize'
 import moment from 'moment'
+import BigNumber from 'bignumber.js'
 export default {
   name: 'ServiceMap',
   mixins: [resize],
@@ -555,6 +555,58 @@ export default {
     this.disposeEcharts(this.myChartBox2List)
   },
   methods: {
+    getErrRate(error_rate){
+      let strErrorRate = numToString(error_rate)
+      let length = 0
+      if (strErrorRate !== '0'){
+        let arr = strErrorRate.split('.')
+        if (arr.length > 1) {
+          length = strErrorRate.split('.')[1].length
+        }
+      }
+      if(error_rate == 0) {
+        return error_rate
+      } else if (error_rate == 1){
+        return error_rate * 100 + '%'
+      } else if (length<=2 ) {
+        return error_rate * 100 + '%'
+      } else {
+        return convertToPercentage(error_rate)
+      }
+      //  0.00000000000000000003---->3e-20
+      function numToString(num) {
+        let str = num.toString();
+        if (str.includes('e')) {
+          let parts = str.split('e');
+          let base = parts[0];
+          let exp = parseInt(parts[1]);
+          let decimalPlaces = base.split('.')[1]?.length || 0;
+          let zerosNeeded = Math.abs(exp) - decimalPlaces;
+          if (exp < 0) {
+            str = '0.' + '0'.repeat(zerosNeeded) + base.replace('.', '');
+          } else {
+            str = base + '0'.repeat(zerosNeeded);
+          }
+        }
+        return str;
+      }
+      function convertToPercentage(value) {
+        let bnValue = new BigNumber(value);
+        let percentage = bnValue.multipliedBy(100);// 乘法运算
+        let roundedPercentage = percentage.decimalPlaces(2, BigNumber.ROUND_FLOOR);// decimalPlaces保留小数位
+
+        // 如果四舍五入后的值小于原始值，手动增加 0.01
+        if (roundedPercentage.isLessThan(percentage)) {// 判断是否小于
+          roundedPercentage = roundedPercentage.plus(0.01);
+        }
+
+        return `${roundedPercentage.toFixed(2)}%`;
+      }
+
+
+
+
+    },
     handChange(val) {
       this.queryParams.service_name = val
       this.handleQuery()

src/views/service/Interface/components/Service.vue

@@ -1,23 +1,18 @@
 <template>
-    <!-- <div id="service" :style="{ height: height + 'px' }"> -->
       <div id="service">
-      <!-- @sort-change="handleSortChang" 需要后端进行排序时使用   :default-sort = "{prop: 'total', order: 'descending'}"-->
         <el-table
           v-loading="loading"
           :data="serveceMapListFavor"
-          @row-click="handleRowClick" 
+          @row-click="handleRowClick"
         >
           <el-table-column header-align="left" label="接口名" prop="name" align="left" :show-overflow-tooltip="true"/>
-          <!-- <el-table-column header-align="center" label="URL组" prop="url" align="left" :show-overflow-tooltip="true" /> -->
           <el-table-column header-align="center" label="rpm" prop="rpm" sortable align="center" :show-overflow-tooltip="true" width='80'>
             <template slot-scope="scope">
-                <!-- <span>{{ Number(scope.row.rpm).toFixed(2)}}</span> -->
                 <el-tag>{{ Number(scope.row.rpm).toFixed(2)}}</el-tag>
               </template>
           </el-table-column>
           <el-table-column header-align="center" label="count" prop="total" sortable align="center" width="100">
              <template slot-scope="scope">
-                <!-- <span>{{ Number(scope.row.rpm).toFixed(2)}}</span> -->
                 <el-tag>{{ Number(scope.row.total).toFixed(2)}}</el-tag>
               </template>
           </el-table-column>
@@ -27,40 +22,12 @@
                     <el-tag v-else type="danger">{{  Number(scope.row.error_rate).toFixed(2)}}</el-tag>
               </template>
           </el-table-column>
-          <!-- <el-table-column header-align="center" label="max(ms)" sortable prop="duration_stats" align="center" width="100">
-            <template slot-scope="scope">
-              <span>{{ Number(scope.row.max).toFixed(2)}}</span>
-            </template>
-          </el-table-column>
-          <el-table-column header-align="center" label="avg(ms)" sortable prop="duration_stats" align="center" width="100">
-            <template slot-scope="scope">
-              <span>{{ Number(scope.row.avg).toFixed(2)}}</span>
-            </template>
-          </el-table-column> -->
           <el-table-column header-align="center" label="延迟比例" prop="duration_stats" align="center">
               <template slot-scope="scope">
                 {{ drawEchartsp(scope.row, scope.$index, 'service') }}
                 <div :id="`tiger-service-trend-index` + scope.$index" class="tiger-trend-charts"></div>
               </template>
           </el-table-column>
-          <!-- <el-table-column header-align="center" label="P.50" prop="duration_stats" align="center">
-            <template slot-scope="scope">
-                {{ drawEchartsp5(scope.row, scope.$index, 'five') }}
-                <div :id="`tiger-five-trend-index` + scope.$index" class="tiger-trend-charts"></div>
-            </template>
-          </el-table-column>
-          <el-table-column header-align="center" label="P.95" prop="duration_stats" align="center">
-            <template slot-scope="scope">
-                {{ drawEchartsp9(scope.row, scope.$index, 'nine') }}
-                <div :id="`tiger-nine-trend-index` + scope.$index" class="tiger-trend-charts"></div>
-            </template>
-          </el-table-column>
-          <el-table-column header-align="center" label="P.99" prop="duration_stats" align="center">
-            <template slot-scope="scope">
-                {{ drawEchartsp99(scope.row, scope.$index, 'ninety') }}
-                <div :id="`tiger-ninety-trend-index` + scope.$index" class="tiger-trend-charts"></div>
-            </template>
-          </el-table-column> -->
         </el-table>
 
          <el-drawer
@@ -105,16 +72,6 @@
                     <el-tag v-if="scope.row.duration<2000" type="info">{{ scope.row.duration }}</el-tag>
                 </template>
               </el-table-column>
-              <!-- <el-table-column header-align="center" label="max(ms)" sortable="custom" prop="duration_stats" align="center" width="100">
-                <template slot-scope="scope">
-                  <span>{{ Number(scope.row.max).toFixed(2)}}</span>
-                </template>
-              </el-table-column>
-              <el-table-column header-align="center" label="avg(ms)" sortable="custom" prop="duration_stats" align="center" width="100">
-                <template slot-scope="scope">
-                  <span>{{ Number(scope.row.avg).toFixed(2)}}</span>
-                </template>
-              </el-table-column> -->
             </el-table>
             <pagination
               v-show="total>0"
@@ -129,10 +86,8 @@
 </template>
 
 <script>
-import { listUrlMapping, addUrlMapping, getUrlMapping, updateUrlMapping, delUrlMapping, favor,getUrlMappingRange,favorList } from '@/api/mapping'
-import { formatJson } from '@/utils'
+import { getUrlMappingRange,favorList } from '@/api/mapping'
 import storage from '@/utils/storage'
-import bus from '@/utils/bus'
 
 import { getToken } from '@/utils/auth'
 // import echarts from 'echarts'
@@ -267,7 +222,7 @@ export default {
       })
     },
     goto(row){
-      
+
       let datetime = Date.parse(row.datetime)/1000;
       let href = this.$router.resolve({
         path:'/latency/index',
@@ -284,11 +239,11 @@ export default {
     },
     handleRowClick(row, column, event){
       this.drawer=true;
-      this.$nextTick(() =>{ 
+      this.$nextTick(() =>{
         this.drawEchartsScale(row);
-       }) 
+       })
       setTimeout(()=>{
-        
+
         this.childQueryParams.id = row.id;
         this.childQueryParams.kind = row.kind;
         this.handelgetUrlMappingRange();
@@ -404,7 +359,7 @@ export default {
         // }
         let data = storage.get('paramsValue')
         let timestamp = moment(data[0].name).unix();
-        
+
         _this.childQueryParams.start_time = timestamp
         _this.childQueryParams.end_time =timestamp
         _this.handelgetUrlMappingRange();
@@ -416,7 +371,7 @@ export default {
       },timeOut)
     },
     handleSortChang(column, prop, order) {
-      
+
       prop = column.prop
       order = column.order
       if (this.order !== '' && this.order !== prop + 'Order') {

src/views/service/InterfaceDetail/components/NodeDetailDrawer.vue

@@ -23,6 +23,7 @@
                 </div>
                 <div class="node-details-info-field">
                   <div class="node-details-info-field-label w50" style="width:20%">所属服务:</div>
+                  <!--  目前后端没返回服务别名，中文名的字段 -->
                   <div
                     class="node-details-info-field-value w50"
                     style="width:70%;color:#1890ff;cursor: pointer;"
@@ -102,7 +103,7 @@
                         type="success"
                         effect="dark"
                       >{{ scope.row.code }}</el-tag>
-                      <el-tag v-else color="#F53F3F" style="color:white" type="danger">{{ scope.row.code }}</el-tag>
+                      <el-tag v-else color="#F53F3F" style="color:white; border-color: rgb(245, 63, 63);" type="danger">{{ scope.row.code }}</el-tag>
                     </span>
                   </template>
                 </el-table-column>
@@ -305,7 +306,7 @@ export default {
     },
     getNodeStats() {
       bizNodeStats(this.queryStats).then(res => {
-        if (res.code == 200) {
+        if (res && res.code == 200) {
           this.nodeStats = res.data
         }
       })

src/views/service/InterfaceDetail/components/NodeG6Charts.vue

@@ -38,218 +38,229 @@ export default {
       /**
      * by Shiwu
      */
-      data.edges.forEach(edge => {
-        edge.label = `${edge.relation}`
-      })
+      if (data) {
 
-      const colors = {
-        'err': '#F44C4C',
-        'ok': '#53F44C'
-      }
-      const imgObj = {
-        cpp: require('../../../../assets/G6-icons/cpp.svg'),
-        dotnet: require('../../../../assets/G6-icons/dot-net.svg'),
-        erlang: require('../../../../assets/G6-icons/erlang.svg'),
-        go: require('../../../../assets/G6-icons/go.svg'),
-        java: require('../../../../assets/G6-icons/java.svg'),
-        nodejs: require('../../../../assets/G6-icons/nodejs.svg'),
-        php: require('../../../../assets/G6-icons/php.svg'),
-        python: require('../../../../assets/G6-icons/python.svg'),
-        ruby: require('../../../../assets/G6-icons/ruby.svg'),
-        rust: require('../../../../assets/G6-icons/rust.svg'),
-        swift: require('../../../../assets/G6-icons/swift.svg'),
-        webjs: require('../../../../assets/G6-icons/webjs.svg'),
-        mysql: require('../../../../assets/G6-icons/mysql.svg'),
-        oracle: require('../../../../assets/G6-icons/oracle.svg'),
-        postgresql: require('../../../../assets/G6-icons/postgresql.svg'),
-        hive: require('../../../../assets/G6-icons/hive.svg'),
-        progress: require('../../../../assets/G6-icons/progress.svg'),
-        hsqldb: require('../../../../assets/G6-icons/hsqldb.svg'),
-        kafka: require('../../../../assets/G6-icons/kafka.svg'),
-        rabbitmq: require('../../../../assets/G6-icons/rabbitmq.svg'),
-        rocketmq: require('../../../../assets/G6-icons/rocketmq.svg'),
-        activemq: require('../../../../assets/G6-icons/activemq.svg'),
-        servicebus: require('../../../../assets/G6-icons/serviceBus.svg'),
-        client: require('../../../../assets/G6-icons/client.svg'),
-        aws_sqs: require('../../../../assets/G6-icons/aws.svg'),
-        default: require(`../../../../assets/G6-icons/default.svg`)
-      } 
-      data.nodes.forEach(node => {
-        node.donutColorMap = colors
-        node.size = 0
-        node.label = node.name
-        node.iconType = node.type
-        node.donutAttrs = node.attrs// donutAttrs
-        Object.keys(node.donutAttrs).forEach(key => {
-          node.size += Number(node.donutAttrs[key])
+        data.edges && data.edges.length > 0 && data.edges.forEach(edge => {
+          edge.label = `${edge.relation}`
         })
-        node.size = Math.sqrt(node.size) * 60
-        delete node.type
-      })
 
-      const legendData = {
-        nodes: [{
-          id: 'err',
-          label: 'Err',
-          order: 0,
-          style: {
-            fill: '#F44C4C'
-          }
-        }, {
-          id: 'ok',
-          label: '0k',
-          order: 2,
-          style: {
-            fill: '#53F44C'
-          }
-        }]
-      }
-      const tooltip = new G6.Tooltip({
-        // offsetX and offsetY include the padding of the parent container
-        offsetX: 20,
-        offsetY: 30,
-        itemTypes: ['node'],
-        getContent: (e) => {
-          const outDiv = document.createElement('div')
-          // outDiv.style.padding = '0px 0px 20px 0px';
-          const nodeName = e.item.getModel().name
-          const item = e.item.getModel()
-          outDiv.innerHTML = `
-            <div style="margin-bottom:8px box-shadow: rgb(174, 174, 174) 0px 0px 10px;
-              width: fit-content;
-              color: #fff;
-              border-radius = 4px;">
-              <span style='display:inline-block;width:120px;text-align:right;'>Ok：</span>
-              <span style='display:inline-block;'>${item}</span>
-            </div>
-            <div style="margin-bottom:8px">
-              <span style='display:inline-block;width:120px;text-align:right;'>Err：</span>
-              <span style='display:inline-block;'>${item}</span>
-            </div>
-           `
-          return outDiv
-        },
-        shouldBegin: (e) => {
-          if (e.target.get('name') === 'name-shape' || e.target.get('name') === 'mask-label-shape') return true
-          return false
+        const colors = {
+          'err': '#F44C4C',
+          'ok': '#53F44C'
         }
-      })
-      const legend = new G6.Legend({
-        data: legendData,
-        align: 'center',
-        layout: 'horizontal', // vertical
-        position: 'top-left',
-        vertiSep: 12,
-        horiSep: 24,
-        offsetY: -24,
-        padding: [4, 8, 4, 8],
-        containerStyle: {
-          fill: '#ccc',
-          lineWidth: 1
-        },
-        title: ' ',
-        titleConfig: {
-          offsetY: -8
+        const imgObj = {
+          cpp: require('../../../../assets/G6-icons/cpp.svg'),
+          dotnet: require('../../../../assets/G6-icons/dot-net.svg'),
+          erlang: require('../../../../assets/G6-icons/erlang.svg'),
+          go: require('../../../../assets/G6-icons/go.svg'),
+          java: require('../../../../assets/G6-icons/java.svg'),
+          nodejs: require('../../../../assets/G6-icons/nodejs.svg'),
+          php: require('../../../../assets/G6-icons/php.svg'),
+          python: require('../../../../assets/G6-icons/python.svg'),
+          ruby: require('../../../../assets/G6-icons/ruby.svg'),
+          rust: require('../../../../assets/G6-icons/rust.svg'),
+          swift: require('../../../../assets/G6-icons/swift.svg'),
+          webjs: require('../../../../assets/G6-icons/webjs.svg'),
+          mysql: require('../../../../assets/G6-icons/mysql.svg'),
+          oracle: require('../../../../assets/G6-icons/oracle.svg'),
+          postgresql: require('../../../../assets/G6-icons/postgresql.svg'),
+          hive: require('../../../../assets/G6-icons/hive.svg'),
+          progress: require('../../../../assets/G6-icons/progress.svg'),
+          hsqldb: require('../../../../assets/G6-icons/hsqldb.svg'),
+          kafka: require('../../../../assets/G6-icons/kafka.svg'),
+          rabbitmq: require('../../../../assets/G6-icons/rabbitmq.svg'),
+          rocketmq: require('../../../../assets/G6-icons/rocketmq.svg'),
+          activemq: require('../../../../assets/G6-icons/activemq.svg'),
+          servicebus: require('../../../../assets/G6-icons/serviceBus.svg'),
+          client: require('../../../../assets/G6-icons/client.svg'),
+          aws_sqs: require('../../../../assets/G6-icons/aws.svg'),
+          default: require(`../../../../assets/G6-icons/default.svg`)
         }
 
-      })
-      this.$nextTick(() => {
-        const container = document.getElementById('serviceDrawerContainer')
-        const width = container.scrollWidth
-        const height = container.scrollHeight || 500
-        const graph = new G6.Graph({
-          container: 'serviceDrawerContainer',
-          width,
-          height,
-          fitView: data.nodes.length > 2 ? true:false,
-          maxZoom: 8, // 默认值是10
-          minZoom: 0.02, // 默认值是0.02
-          // translate the graph to align the canvas's center, support by v3.5.1
-          fitCenter: true,
-          plugins: [legend],
-          modes: {
-            default: ['drag-canvas', 'drag-node', 'zoom-canvas',
-              {
-                type: 'tooltip', // 提示框
-                // offset:0,
-                formatText(model) {
-                // 提示框文本内容
-                  return `<div  style="background-color: rgba(0,0,0, 0.65);  box-shadow: rgb(174, 174, 174) 0px 0px 10px;
-              width: fit-content;
-              color: #fff;
-              padding: 10px;
-              border-radius:4px;">
-                <div style="margin-bottom:8px">
-                  <span >Ok：</span>
-                  <span>${model.attrs.ok == '0.00000' ? 0 : model.attrs.ok == '1.00000' ? 1 : model.attrs.ok}</span>
-                </div>
-                <div>
-                  <span >Err：</span>
-                  <span>${model.attrs.err == '0.00000'? 0: (model.attrs.err == '1.00000' ? 1 : model.attrs.err)}</span>
-                </div>
-                </div>`
-                }
-              }
-            ] // 启用拖拽画布和缩放画布的交互模式
-          },
-          layout: {
-            type: 'radial',
-            focusNode: 'li',
-            linkDistance: 200,
-            unitRadius: 200,
-            preventOverlap: true, // 防止节点重叠
-            nodeSpacing: 500,
-            // 防碰撞必须设置nodeSize或size,否则不生效，由于节点的size设置了40，虽然节点不碰撞了，但是节点之间的距离很近，label几乎都挤在一起，所以又重新设置了大一点的nodeSize,这样效果会好很多
-            nodeSize: 60,
-            strictRadial:false,
-            linkDistance: data.nodes.length>6? 400 : 200 // 指定边距离为150
-          },
-          defaultEdge: {
+        data.nodes && data.nodes.length > 0 && data.nodes.forEach(node => {
+          node.donutColorMap = colors
+          node.size = 0
+          node.label = node.name
+          node.iconType = node.type
+          node.donutAttrs = node.attrs// donutAttrs
+          Object.keys(node.donutAttrs).forEach(key => {
+            node.size += Number(node.donutAttrs[key])
+          })
+          node.size = Math.sqrt(node.size) * 60
+          delete node.type
+        })
+
+        const legendData = {
+          nodes: [{
+            id: 'err',
+            label: 'Err',
+            order: 0,
             style: {
-              endArrow: true
-            },
-            labelCfg: { // 标签文本配置项
-              autoRotate: true,
-              style: {
-                stroke: '#fff',
-                lineWidth: 5
-              }
+              fill: '#F44C4C'
             }
-          },
-          defaultNode: {
-            type: 'donut',
+          }, {
+            id: 'ok',
+            label: '0k',
+            order: 2,
             style: {
-              lineWidth: 0,
-              cursor: 'pointer'
-            },
-            labelCfg: {
-              position: 'bottom',
-              autoRotate: true,
+              fill: '#53F44C'
             }
+          }]
+        }
+        const tooltip = new G6.Tooltip({
+          // offsetX and offsetY include the padding of the parent container
+          offsetX: 20,
+          offsetY: 30,
+          itemTypes: ['node'],
+          getContent: (e) => {
+            const outDiv = document.createElement('div')
+            // outDiv.style.padding = '0px 0px 20px 0px';
+            const nodeName = e.item.getModel().name
+            const item = e.item.getModel()
+            outDiv.innerHTML = `
+              <div style="margin-bottom:8px box-shadow: rgb(174, 174, 174) 0px 0px 10px;
+                width: fit-content;
+                color: #fff;
+                border-radius = 4px;">
+                <span style='display:inline-block;width:120px;text-align:right;'>Ok：</span>
+                <span style='display:inline-block;'>${item}</span>
+              </div>
+              <div style="margin-bottom:8px">
+                <span style='display:inline-block;width:120px;text-align:right;'>Err：</span>
+                <span style='display:inline-block;'>${item}</span>
+              </div>
+            `
+            return outDiv
+          },
+          shouldBegin: (e) => {
+            if (e.target.get('name') === 'name-shape' || e.target.get('name') === 'mask-label-shape') return true
+            return false
           }
         })
-        // 节点配置中使用
-        graph.node((node) => {
-          return {
-            icon: {
-              show: true,
-              // 使用函数动态指定图标路径 imgObj[node.iconType] || imgObj.default
-              img: imgObj[node.iconType] || imgObj.default
-            }
-          };
-        });
-        graph.data(data)
-        graph.render()
-        graph.on('node:mouseenter', (evt) => {
-          const { item } = evt
-          graph.setItemState(item, 'active', true)
+        const legend = new G6.Legend({
+          data: legendData,
+          align: 'center',
+          layout: 'horizontal', // vertical
+          position: 'bottom-left',
+          vertiSep: 12,
+          horiSep: 24,
+          offsetY: -24,
+          padding: [4, 8, 4, 8],
+          containerStyle: {
+            fill: '#ccc',
+            lineWidth: 1
+          },
+          title: ' ',
+          titleConfig: {
+            offsetY: -8
+          }
+
         })
+        this.$nextTick(() => {
+          const container = document.getElementById('serviceDrawerContainer')
+          const width = container.scrollWidth
+          const height = container.scrollHeight || 500
+          const graph = new G6.Graph({
+            container: 'serviceDrawerContainer',
+            width,
+            height,
+            fitView: data.nodes.length > 2 ? true:false,
+            maxZoom: 8, // 默认值是10
+            minZoom: 0.02, // 默认值是0.02
+            // translate the graph to align the canvas's center, support by v3.5.1
+            fitCenter: true,
+            plugins: [legend],
+            modes: {
+              default: ['drag-canvas', 'drag-node', 'zoom-canvas',
+                {
+                  type: 'tooltip', // 提示框
+                  // offset:0,
+                  formatText(model) {
+                  // 提示框文本内容
+                    return `<div  style="background-color: rgba(0,0,0, 0.65);  box-shadow: rgb(174, 174, 174) 0px 0px 10px;
+                width: fit-content;
+                color: #fff;
+                padding: 10px;
+                border-radius:4px;">
+                  <div style="margin-bottom:8px">
+                    <span >Ok：</span>
+                    <span>${model.attrs.ok == '0.00000' ? 0 : model.attrs.ok == '1.00000' ? 1 : model.attrs.ok}</span>
+                  </div>
+                  <div>
+                    <span >Err：</span>
+                    <span>${model.attrs.err == '0.00000'? 0: (model.attrs.err == '1.00000' ? 1 : model.attrs.err)}</span>
+                  </div>
+                  </div>`
+                  }
+                }
+              ] // 启用拖拽画布和缩放画布的交互模式
+            },
+            layout: {
+              type: 'radial',
+              focusNode: 'li',
+              linkDistance: 200,
+              unitRadius: 200,
+              preventOverlap: true, // 防止节点重叠
+              nodeSpacing: 500,
+              // 防碰撞必须设置nodeSize或size,否则不生效，由于节点的size设置了40，虽然节点不碰撞了，但是节点之间的距离很近，label几乎都挤在一起，所以又重新设置了大一点的nodeSize,这样效果会好很多
+              nodeSize: 60,
+              strictRadial:false,
+              linkDistance: data.nodes.length>6? 400 : 200 // 指定边距离为150
+            },
+            defaultEdge: {
+              style: {
+                endArrow: true
+              },
+              labelCfg: { // 标签文本配置项
+                autoRotate: true,
+                style: {
+                  stroke: '#fff',
+                  lineWidth: 5
+                }
+              }
+            },
+            defaultNode: {
+              type: 'donut',
+              style: {
+                lineWidth: 0,
+                cursor: 'pointer'
+              },
+              labelCfg: {
+                position: 'bottom',
+                autoRotate: true,
+              }
+            }
+          })
+          // 节点配置中使用
+          graph.node((node) => {
+            return {
+              icon: {
+                show: true,
+                // 使用函数动态指定图标路径 imgObj[node.iconType] || imgObj.default
+                img: imgObj[node.iconType] || imgObj.default
+              }
+            };
+          });
+          graph.data(data)
+          graph.render()
+          graph.on('node:mouseenter', (evt) => {
+            const { item } = evt
+            graph.setItemState(item, 'active', true)
+          })
 
-        graph.on('node:mouseleave', (evt) => {
-          const { item } = evt
-          graph.setItemState(item, 'active', false)
+          graph.on('node:mouseleave', (evt) => {
+            const { item } = evt
+            graph.setItemState(item, 'active', false)
+          })
+          graph.on('node:click', (evt) => {
+            const { item } = evt;
+            const node = item._cfg.model
+            console.log('item-----', node)
+            // graph.setItemState(item, 'selected', true);
+          });
         })
-      })
+      }
+
     }
   }
 
@@ -258,6 +269,6 @@ export default {
 <style lang="scss" scoped>
 .node-chart-content{
     width:100%;
-    height:600px;
+    max-height:600px;
 }
 </style>

src/views/service/InterfaceDetail/index.vue

@@ -15,8 +15,8 @@
           <div class="service-header">
             <div class="service-header-left" @click="goDrawer">
               <span class="fontSize18">基本信息:</span>
-              <div style="width:100%"><p class="service-header-p"><span class="service-span-right">所属应用： </span><span class="service-span-left">{{ baseInfoObj.app_name }} ({{ appItem.alias }})</span></p></div>
-              <div style="width:100%"><p class="service-header-p" ><span class="service-span-right">所属服务：</span><span class="service-span-left" style="color: #165DFF;"> {{getServiceName}} </span></p></div>
+              <div style="width:100%"><p class="service-header-p"><span class="service-span-right">所属应用： </span><el-tooltip class="item" effect="dark" :content="baseInfoObj.app_name +'('+ appItem.alias +')'" placement="top"><span class="service-span-left">{{ baseInfoObj.app_name }} ({{ appItem.alias }})</span></el-tooltip></p></div>
+              <div style="width:100%"><p class="service-header-p" ><span class="service-span-right">所属服务：</span><el-tooltip class="item" effect="dark" :content="getServiceName" placement="top"><span class="service-span-left" style="color: #165DFF;"> {{getServiceName}} </span></el-tooltip></p></div>
             </div>
             <div class="service-header-right">
               <div class="service-header-rightcol">
@@ -37,7 +37,7 @@
                 <el-tooltip placement="bottom" effect="dark" :visible-arrow="false">
                   <div slot="content">
                     <i class="dot" />
-                    <span>{{ digitsObj.error_rate }}</span>
+                    <span>{{ digitsObj.error_rate || 0 }}</span>
                   </div>
                   <div>
                     <div>
@@ -474,6 +474,8 @@ export default {
     font-size:0.2rem;;
     margin-bottom: 0;
     margin-top:10px;
+    display: flex;
+    align-items: center;
     span{
       display: inline-block;
     }
@@ -484,6 +486,9 @@ export default {
     .service-span-left{
       text-align: left;
       width:70%;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
   }
 .interface-service-header{

src/views/service/InterfaceSublist/index.vue

@@ -29,12 +29,12 @@
               <el-tooltip placement="bottom" effect="dark" :visible-arrow="false">
                 <div slot="content">
                   <i class="dot" />
-                  <span>{{ digitsObj.error_rate }}</span>
+                  <span>{{ digitsObj.error_rate || 0 }}</span>
                 </div>
                 <div class="border-bottom">
                   <div class="block-box px-3 py-4">
                     <div class="col-tit">错误率</div>
-                    <div class="col-con">{{ digitsObj.error_rate }}</div>
+                    <div class="col-con">{{ digitsObj.error_rate || 0 }}</div>
                   </div>
                 </div>
               </el-tooltip>

src/views/service/service/components/Service.vue

@@ -1,23 +1,18 @@
 <template>
-    <!-- <div id="service" :style="{ height: height + 'px' }"> -->
       <div id="service">
-      <!-- @sort-change="handleSortChang" 需要后端进行排序时使用 -->
         <el-table
           v-loading="loading"
           :data="serveceMapListFavor"
-          @row-click="handleRowClick" 
+          @row-click="handleRowClick"
         >
           <el-table-column header-align="left" label="接口名" prop="name" align="left" :show-overflow-tooltip="true"/>
-          <!-- <el-table-column header-align="center" label="URL组" prop="url" align="left" :show-overflow-tooltip="true" /> -->
           <el-table-column header-align="center" label="rpm" prop="rpm" sortable align="center" :show-overflow-tooltip="true" width='80'>
             <template slot-scope="scope">
-                <!-- <span>{{ Number(scope.row.rpm).toFixed(2)}}</span> -->
                 <el-tag>{{ Number(scope.row.rpm).toFixed(2)}}</el-tag>
               </template>
           </el-table-column>
           <el-table-column header-align="center" label="count" prop="total" sortable align="center" width="100">
              <template slot-scope="scope">
-                <!-- <span>{{ Number(scope.row.rpm).toFixed(2)}}</span> -->
                 <el-tag>{{ Number(scope.row.total).toFixed(2)}}</el-tag>
               </template>
           </el-table-column>
@@ -27,40 +22,12 @@
                     <el-tag v-else type="danger">{{  Number(scope.row.error_rate).toFixed(2)}}</el-tag>
               </template>
           </el-table-column>
-          <!-- <el-table-column header-align="center" label="max(ms)" sortable prop="duration_stats" align="center" width="100">
-            <template slot-scope="scope">
-              <span>{{ Number(scope.row.max).toFixed(2)}}</span>
-            </template>
-          </el-table-column>
-          <el-table-column header-align="center" label="avg(ms)" sortable prop="duration_stats" align="center" width="100">
-            <template slot-scope="scope">
-              <span>{{ Number(scope.row.avg).toFixed(2)}}</span>
-            </template>
-          </el-table-column> -->
           <el-table-column header-align="center" label="延迟比例" prop="duration_stats" align="center">
               <template slot-scope="scope">
                 {{ drawEchartsp(scope.row, scope.$index, 'service') }}
                 <div :id="`tiger-service-trend-index` + scope.$index" class="tiger-trend-charts"></div>
               </template>
           </el-table-column>
-          <!-- <el-table-column header-align="center" label="P.50" prop="duration_stats" align="center">
-            <template slot-scope="scope">
-                {{ drawEchartsp5(scope.row, scope.$index, 'five') }}
-                <div :id="`tiger-five-trend-index` + scope.$index" class="tiger-trend-charts"></div>
-            </template>
-          </el-table-column>
-          <el-table-column header-align="center" label="P.95" prop="duration_stats" align="center">
-            <template slot-scope="scope">
-                {{ drawEchartsp9(scope.row, scope.$index, 'nine') }}
-                <div :id="`tiger-nine-trend-index` + scope.$index" class="tiger-trend-charts"></div>
-            </template>
-          </el-table-column>
-          <el-table-column header-align="center" label="P.99" prop="duration_stats" align="center">
-            <template slot-scope="scope">
-                {{ drawEchartsp99(scope.row, scope.$index, 'ninety') }}
-                <div :id="`tiger-ninety-trend-index` + scope.$index" class="tiger-trend-charts"></div>
-            </template>
-          </el-table-column> -->
         </el-table>
 
          <el-drawer
@@ -105,16 +72,6 @@
                     <el-tag v-if="scope.row.duration<2000" type="info">{{ scope.row.duration }}</el-tag>
                 </template>
               </el-table-column>
-              <!-- <el-table-column header-align="center" label="max(ms)" sortable="custom" prop="duration_stats" align="center" width="100">
-                <template slot-scope="scope">
-                  <span>{{ Number(scope.row.max).toFixed(2)}}</span>
-                </template>
-              </el-table-column>
-              <el-table-column header-align="center" label="avg(ms)" sortable="custom" prop="duration_stats" align="center" width="100">
-                <template slot-scope="scope">
-                  <span>{{ Number(scope.row.avg).toFixed(2)}}</span>
-                </template>
-              </el-table-column> -->
             </el-table>
             <pagination
               v-show="total>0"
@@ -129,10 +86,8 @@
 </template>
 
 <script>
-import { listUrlMapping, addUrlMapping, getUrlMapping, updateUrlMapping, delUrlMapping, favor,getUrlMappingRange,favorList } from '@/api/mapping'
-import { formatJson } from '@/utils'
+import { getUrlMappingRange,favorList } from '@/api/mapping'
 import storage from '@/utils/storage'
-import bus from '@/utils/bus'
 
 import { getToken } from '@/utils/auth'
 // import echarts from 'echarts'
@@ -283,11 +238,11 @@ export default {
     },
     handleRowClick(row, column, event){
       this.drawer=true;
-      this.$nextTick(() =>{ 
+      this.$nextTick(() =>{
         this.drawEchartsScale(row);
-       }) 
+       })
       setTimeout(()=>{
-        
+
         this.childQueryParams.id = row.id;
         this.childQueryParams.kind = row.kind;
         this.handelgetUrlMappingRange();
@@ -403,7 +358,7 @@ export default {
         // }
         let data = storage.get('paramsValue')
         let timestamp = moment(data[0].name).unix();
-        
+
         _this.childQueryParams.start_time = timestamp
         _this.childQueryParams.end_time =timestamp
         _this.handelgetUrlMappingRange();
@@ -415,7 +370,7 @@ export default {
       },timeOut)
     },
     handleSortChang(column, prop, order) {
-      
+
       prop = column.prop
       order = column.order
       if (this.order !== '' && this.order !== prop + 'Order') {

src/views/service/service/index.vue

@@ -83,9 +83,8 @@
             <el-table-column v-if="colData[5].istrue" header-align="center" label="errRate" sortable prop="error_rate" align="right" :show-overflow-tooltip="true">
               <template slot-scope="scope">
                 <div :class="scope.row.error_rate==0?'table_bg':'table_bg_red'">
-                  <!-- <el-tag v-if="scope.row.error_rate==0">{{  scope.row.error_rate }}</el-tag>
-                  <el-tag v-else type="danger">{{  Number(scope.row.error_rate).toFixed(2)}}</el-tag> -->
-                  {{ scope.row.error_rate==0?scope.row.error_rate:Number(scope.row.error_rate).toFixed(2) }}
+                  <!-- {{ scope.row.error_rate==0?scope.row.error_rate:Number(scope.row.error_rate).toFixed(2) }} -->
+                  {{ getErrRate(scope.row.error_rate) }}
                 </div>
               </template>
             </el-table-column>
@@ -233,7 +232,7 @@ import ServiceMap from './components/ServiceMap.vue'
 import { listService, listServiceStats, digitsService, updateService, addService, serviceAppsScore, serviceBar } from '@/api/service'
 import storage from '@/utils/storage'
 import resize from './mixins/resize'
-
+import BigNumber from 'bignumber.js'
 export default {
   components: {
     ServiceMap
@@ -420,7 +419,53 @@ export default {
     this.disposeEcharts(this.myChartBox2List)
   },
   methods: {
+    getErrRate(error_rate){
+      let strErrorRate = numToString(error_rate) //0.17857142857142858
+      console.log('strErrorRate---', strErrorRate)
+      let length = 0
+      if (strErrorRate !== '0'){
+        let arr = strErrorRate.split('.')
+        if (arr.length > 1) {
+          length = arr[1].length
+        }
+      }
+      if(error_rate == 0) {
+        return error_rate
+      } else if (error_rate == 1){
+        return error_rate * 100 + '%'
+      } else if (length<=2 ) {
+        return error_rate * 100 + '%'
+      } else {
+        return convertToPercentage(error_rate)
+      }
+      function numToString(num) {
+        let str = num.toString();
+        if (str.includes('e')) {
+          let parts = str.split('e');
+          let base = parts[0];
+          let exp = parseInt(parts[1]);
+          let decimalPlaces = base.split('.')[1]?.length || 0;
+          let zerosNeeded = Math.abs(exp) - decimalPlaces;
+          if (exp < 0) {
+            str = '0.' + '0'.repeat(zerosNeeded) + base.replace('.', '');
+          } else {
+            str = base + '0'.repeat(zerosNeeded);
+          }
+        }
+        return str;
+      }
+      function convertToPercentage(value) {
+        let bnValue = new BigNumber(value);
+        let percentage = bnValue.multipliedBy(100);// 乘法运算
+        let roundedPercentage = percentage.decimalPlaces(2, BigNumber.ROUND_FLOOR);// decimalPlaces保留小数位
 
+        // 如果四舍五入后的值小于原始值，手动增加 0.01
+        if (roundedPercentage.isLessThan(percentage)) {// 判断是否小于
+          roundedPercentage = roundedPercentage.plus(0.01);
+        }
+        return `${roundedPercentage.toFixed(2)}%`;
+      }
+    },
     getDigitsService() {
       digitsService(this.digitsQuery).then((res) => {
         if (res.code == 200) {
@@ -451,7 +496,7 @@ export default {
         path: '/service/serviceDetail/index',
         query: {
           id: row.id,
-          name: name,
+          name: row.name,
           service_name: row.service_name
         }
       })
@@ -923,6 +968,7 @@ export default {
         var dataIndex = params.dataIndex
         var seriesIndex = params.seriesIndex
         var service_name = data.serivce_data[dataIndex]
+        // 目前后端没有返回中文名
         that.$router.push({
           path: '/service/serviceDetail/index',
           query: {

src/views/service/serviceDetail/index.vue

@@ -7,7 +7,7 @@
           <!-- <el-button type="primary" icon="el-icon-refresh-left" size="mini" @click='back' plain>返回</el-button> -->
           <el-page-header @back="back">
             <div slot="content">
-              <span style="font-size:18px;">{{ name }} {{ spansQuery.service_name }}</span>
+              <span style="font-size:18px;">{{ cnName }}【 {{ spansQuery.service_name }} 】</span>
             </div>
           </el-page-header>
         </div>
@@ -405,7 +405,7 @@ export default {
       },
       compareChart: null,
       errorChart: null,
-      name: '',
+      cnName: '',
       statsQuery: {
         id: 0,
         start_time: '',
@@ -480,7 +480,7 @@ export default {
     }
 
     if (this.$route.query.name != undefined) {
-      this.name = this.$route.query.name
+      this.cnName = this.$route.query.name
     }
 
     const strr = window.location.href
@@ -651,13 +651,7 @@ export default {
           }
         ]
       }
-      // this.$nextTick(() => {
-      //   let myChartScale = this.$echarts5.init(document.getElementById('scale'));
       myChartScale.setOption(option)
-      //   myChartScale.resize();
-      // });
-      // myChartScale.on('click',params=>{
-      // })
       myChartScale.getZr().off('click')
       myChartScale.getZr().on('click', params => {
         const data = storage.get('paramsValue')
@@ -672,7 +666,7 @@ export default {
       var arr = url.substr(url.indexOf('?') + 1).split('&')
       arr.forEach(item => {
         var tmp = item.split('=')
-        json[tmp[0]] = tmp[1]
+        json[tmp[0]] = decodeURIComponent(tmp[1])
       })
       return json
     },
@@ -804,33 +798,6 @@ export default {
               }
             },
             barWidth: 8,
-            // markLine: {
-            //   label:{
-            //     formatter: '{b}',
-            //     backgroundColor:"#5A6FC0",
-            //     color:"#fff",
-            //     padding:[4,8]
-            //   },
-            //   lineStyle: {
-            //     type: "dashed",
-            //     color: "#5A6FC0",
-            //     width:2
-            //   },
-            //   data: [
-            //       {
-            //           name: 'p50',
-            //           xAxis:data.buckets[data.current.quantile_indexes.p50],
-            //       },
-            //       {
-            //           name: 'p90',
-            //           xAxis:data.buckets[data.current.quantile_indexes.p90],
-            //       },
-            //       {
-            //           name: 'p99',
-            //           xAxis:data.buckets[data.current.quantile_indexes.p99],
-            //       },
-            //   ]
-            // },
             data: data.current != undefined ? data.current : []
           },
           {
@@ -844,36 +811,6 @@ export default {
             lineStyle: {
               width: 3
             },
-            // markLine: {
-            //     name: "",
-            //     // symbol: ["none", "none"], //去掉箭头
-            //     lineStyle: {
-            //         type: "dashed",
-            //         color: "#9ECA7E",
-            //         width:2
-            //     },
-            //     label: {
-            //         formatter: '{b}',
-            //         backgroundColor:"#9ECA7E",
-            //         color:"#fff",
-            //         padding:[4,8]
-            //     },
-            //     data: [
-            //       {
-            //         name: 'p50',
-            //         xAxis:data.buckets[data.previous.quantile_indexes.p50],
-            //       },
-            //       {
-            //         name: 'p90',
-            //         xAxis:data.buckets[data.previous.quantile_indexes.p90],
-            //       },
-            //       {
-            //         name: 'p99',
-            //         xAxis:data.buckets[data.previous.quantile_indexes.p99],
-            //       }
-            //     ], //这里设置false是隐藏不了的，可以设置为-1
-            // },
-
             data: data.forward != undefined ? data.forward : []
           }
         ]
@@ -881,47 +818,12 @@ export default {
 
       this.compareChart.group = 'group1'
       this.$echarts5.connect('group1')
-      //  window.addEventListener('resize', () => {
-      //   this.compareChart.resize()
-      // })
-      // let that = this
-      // that.compareChart.on('mousemove', (params) => {
-
-      //     let index1 = params.name
-      //     // 饼状图
-      //     that.errorChart.dispatchAction({
-      //       type: 'highlight',
-      //       // seriesIndex: 0,
-      //       name: index1
-      //     })
-      // })
-      // // 1.悬停离开桑基图，饼状一高光消失
-      // that.compareChart.on('mouseout', (params) => {
-      //   let index1 = params.name
-      //   that.errorChart.dispatchAction({
-      //     type: 'downplay',
-      //     // seriesIndex: 0,
-      //     name: index1
-      //   })
-      // })
-      // // 1.悬停桑基图，饼状一tooltip提示
-      // that.compareChart.on('mousemove', (params) => {
-      //   let index1 = params.name
-      //   that.errorChart.dispatchAction({
-      //     type: 'showTip',
-      //     // seriesIndex: 0,
-      //     name: index1
-      //   })
-      // })
-      // // this.compareChart.connect([this.errorChart]);
     },
     getErrorRateCompare() {
       serviceErrors(this.timeQuery).then(res => {
         if (res.code == 200) {
           this.errorRateObj = res.data
-          // if(this.errorRateObj.current.length>0){
           this.initErrorRateCompareChart(this.errorRateObj)
-          // }
         }
       })
     },
@@ -962,13 +864,8 @@ export default {
         },
         xAxis: [
           {
-            // type: 'value',
             type: 'category',
             data: data.time
-            // axisPointer: {
-            //   type: 'shadow'
-            // },
-
           }
         ],
         yAxis: [
@@ -986,33 +883,6 @@ export default {
               }
             },
             barWidth: 8,
-            // markLine: {
-            //   label:{
-            //     formatter: '{b}',
-            //     backgroundColor:"#5A6FC0",
-            //     color:"#fff",
-            //     padding:[4,8]
-            //   },
-            //   lineStyle: {
-            //     type: "dashed",
-            //     color: "#5A6FC0",
-            //     width:2
-            //   },
-            //   data: [
-            //       {
-            //           name: 'p50',
-            //           xAxis:data.buckets[data.current.quantile_indexes.p50],
-            //       },
-            //       {
-            //           name: 'p90',
-            //           xAxis:data.buckets[data.current.quantile_indexes.p90],
-            //       },
-            //       {
-            //           name: 'p99',
-            //           xAxis:data.buckets[data.current.quantile_indexes.p99],
-            //       },
-            //   ]
-            // },
             data: data.current != undefined ? data.current : []
           },
           {
@@ -1026,36 +896,6 @@ export default {
             lineStyle: {
               width: 3
             },
-            // markLine: {
-            //     name: "",
-            //     // symbol: ["none", "none"], //去掉箭头
-            //     lineStyle: {
-            //         type: "dashed",
-            //         color: "#9ECA7E",
-            //         width:2
-            //     },
-            //     label: {
-            //         formatter: '{b}',
-            //         backgroundColor:"#9ECA7E",
-            //         color:"#fff",
-            //         padding:[4,8]
-            //     },
-            //     data: [
-            //       {
-            //         name: 'p50',
-            //         xAxis:data.buckets[data.previous.quantile_indexes.p50],
-            //       },
-            //       {
-            //         name: 'p90',
-            //         xAxis:data.buckets[data.previous.quantile_indexes.p90],
-            //       },
-            //       {
-            //         name: 'p99',
-            //         xAxis:data.buckets[data.previous.quantile_indexes.p99],
-            //       }
-            //     ], //这里设置false是隐藏不了的，可以设置为-1
-            // },
-
             data: data.forward != undefined ? data.forward : []
           }
         ]
@@ -1063,40 +903,6 @@ export default {
 
       this.errorChart.group = 'group1'
       this.$echarts5.connect('group1')
-
-      // window.addEventListener('resize', () => {
-      //   this.errorChart.resize()
-      // })
-      // let that = this
-      // that.errorChart.on('mousemove', (params) => {
-      //     let index1 = params.name
-      //     // 饼状图
-      //     that.compareChart.dispatchAction({
-      //       type: 'highlight',
-      //       seriesIndex: 0,
-      //       name: index1
-      //     })
-      // })
-      // // 1.悬停离开桑基图，饼状一高光消失
-      // that.errorChart.on('mouseout', (params) => {
-      //   let index1 = params.name
-      //   that.compareChart.dispatchAction({
-      //     type: 'downplay',
-      //     seriesIndex: 0,
-      //     name: index1
-      //   })
-      // })
-      // // 1.悬停桑基图，饼状一tooltip提示
-      // that.errorChart.on('mousemove', (params) => {
-      //   let index1 = params.name
-      //   that.compareChart.dispatchAction({
-      //     type: 'showTip',
-      //     seriesIndex: 0,
-      //     name: index1
-      //   })
-      // })
-
-      // this.errorChart.connect([this.compareChart]);
     },
     back() {
       this.$router.push({