|
|
@@ -1,8 +1,48 @@
|
|
|
<template>
|
|
|
<div style="padding:16px;">
|
|
|
<el-row :gutter="10" class="mb8">
|
|
|
+ <el-col :span="6">
|
|
|
+ <div class="flex">
|
|
|
+ <span class="seach-title">涉及的服务</span>
|
|
|
+ <el-select v-model="queryParams.service_name" size="small" clearable @change="handChange" @clear="handleQuery">
|
|
|
+ <el-option
|
|
|
+ v-for="item in serviceList"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.service_name"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <div class="flex">
|
|
|
+ <span class="seach-title">延迟范围 >=</span>
|
|
|
+ <el-input v-model="queryParams.duration" type="number" size="small" clearable placeholder="请输入延迟范围" @keyup.enter.native="handleQuery" @clear="handleQuery" />
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <div class="flex">
|
|
|
+ <span class="seach-title">错误率 >=</span>
|
|
|
+ <el-input v-model="queryParams.error_rate" type="number" size="small" clearable placeholder="请输入错误率" @keyup.enter.native="handleQuery" @clear="handleQuery" />
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <div class="flex">
|
|
|
+ <span class="seach-title">请求量 >=</span>
|
|
|
+ <el-input v-model="queryParams.request_total" type="number" size="small" clearable placeholder="请输入错误率" @keyup.enter.native="handleQuery" @clear="handleQuery" />
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="10" class="mb8 flex" style="margin-bottom: 10px;">
|
|
|
+ <el-col :span="4">
|
|
|
+ <el-checkbox v-model="queryParams.access_database" @change="handleQuery">涉及数据库</el-checkbox>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="2">
|
|
|
+ <el-checkbox v-model="queryParams.favor" @change="handleQuery">仅收藏</el-checkbox>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
<el-col :span="2">
|
|
|
- <div style="display:inline-block;vertical-align: middle;">
|
|
|
+ <div class="flex">
|
|
|
<el-dropdown
|
|
|
style="margin-left: 10px"
|
|
|
size="mini"
|
|
|
@@ -32,8 +72,7 @@
|
|
|
</div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
-
|
|
|
- <div v-if="serveceMapList.length>0" class="TableBox">
|
|
|
+ <div class="TableBox">
|
|
|
<el-table
|
|
|
ref="tableRef"
|
|
|
:key="isUpdate"
|
|
|
@@ -41,38 +80,38 @@
|
|
|
:data="serveceMapList"
|
|
|
@row-click="handleRowClick"
|
|
|
>
|
|
|
- <el-table-column v-if="colData[0].istrue" align="center" header-align="center" class-name="column_one" label="业务名" prop="name" :show-overflow-tooltip="true" />
|
|
|
- <el-table-column v-if="colData[4].istrue" header-align="center" align="center" label="请求总数" sortable prop="request_total" :show-overflow-tooltip="true">
|
|
|
+ <el-table-column v-if="colData[0].istrue" align="center" header-align="center" class-name="column_one" label="业务名" prop="name" :show-overflow-tooltip="true" />
|
|
|
+ <el-table-column v-if="colData[4].istrue" header-align="center" align="center" label="请求总数" sortable prop="request_total" :show-overflow-tooltip="true">
|
|
|
<template slot-scope="scope">
|
|
|
<div :class="scope.row.request_total!=0&&scope.row.request_total!= undefined?'table_bg':'table_bg_yellow'">
|
|
|
<div class="table-num-box">
|
|
|
- {{ scope.row.request_total== undefined?0:Number(scope.row.request_total).toFixed(2) }}
|
|
|
+ {{ scope.row.request_total== undefined?0:Number(scope.row.request_total).toFixed(2) }}
|
|
|
</div>
|
|
|
<div class="table-day-rate-box">
|
|
|
- <i v-show="processNumber(scope.row.request_total_dod).sign" :class="processNumber(scope.row.request_total_dod).sign == 'up'? 'el-icon-up up':'el-icon-down down'"></i>
|
|
|
+ <i v-show="processNumber(scope.row.request_total_dod).sign" :class="processNumber(scope.row.request_total_dod).sign == 'up'? 'el-icon-up up':'el-icon-down down'" />
|
|
|
<span>
|
|
|
- {{ scope.row.request_total_dod==undefined?0:getErrRate(processNumber(scope.row.request_total_dod).value)}}
|
|
|
+ {{ scope.row.request_total_dod==undefined?0:getErrRate(processNumber(scope.row.request_total_dod).value) }}
|
|
|
</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column v-if="colData[1].istrue" header-align="center" align="center" label="调用占比" prop="request_rate" :show-overflow-tooltip="true">
|
|
|
+ <el-table-column v-if="colData[1].istrue" header-align="center" align="center" label="调用占比" prop="request_rate" :show-overflow-tooltip="true">
|
|
|
<template slot-scope="scope">
|
|
|
<div class="table_bg">
|
|
|
<div class="table-num-box">
|
|
|
- {{getErrRate(scope.row.request_rate)}}
|
|
|
+ {{ getErrRate(scope.row.request_rate) }}
|
|
|
</div>
|
|
|
<div class="table-day-rate-box">
|
|
|
- <i v-show="processNumber(scope.row.request_rate_dod).sign" :class="processNumber(scope.row.request_rate_dod).sign == 'up'? 'el-icon-up up':'el-icon-down down'"></i>
|
|
|
+ <i v-show="processNumber(scope.row.request_rate_dod).sign" :class="processNumber(scope.row.request_rate_dod).sign == 'up'? 'el-icon-up up':'el-icon-down down'" />
|
|
|
<span>
|
|
|
- {{ scope.row.request_rate_dod==undefined?0:getErrRate(scope.row.request_rate_dod)}}
|
|
|
+ {{ scope.row.request_rate_dod==undefined?0:getErrRate(processNumber(scope.row.request_rate_dod).value) }}
|
|
|
</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column v-if="colData[2].istrue" header-align="center" align="center" label="SpanName" prop="span_name" :show-overflow-tooltip="true">
|
|
|
+ <el-table-column v-if="colData[2].istrue" header-align="center" align="center" label="SpanName" prop="span_name" :show-overflow-tooltip="true">
|
|
|
<template slot-scope="scope">
|
|
|
<span>{{ scope.row.span_name }}</span>
|
|
|
</template>
|
|
|
@@ -84,123 +123,93 @@
|
|
|
</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="错误率" sortable 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">
|
|
|
{{ getErrRate(scope.row.error_rate) }}
|
|
|
</div>
|
|
|
<div class="table-day-rate-box">
|
|
|
- <i v-show="processNumber(scope.row.error_rate_dod).sign" :class="processNumber(scope.row.error_rate_dod).sign == 'up'? 'el-icon-up up':'el-icon-down down'"></i>
|
|
|
+ <i v-show="processNumber(scope.row.error_rate_dod).sign" :class="processNumber(scope.row.error_rate_dod).sign == 'up'? 'el-icon-up up':'el-icon-down down'" />
|
|
|
<span>
|
|
|
- {{ scope.row.error_rate_dod==undefined?0:getErrRate(scope.row.error_rate_dod)}}
|
|
|
+ {{ scope.row.error_rate_dod==undefined?0:getErrRate(processNumber(scope.row.error_rate_dod).value) }}
|
|
|
</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column v-if="colData[6].istrue" header-align="center" align="center" label="最大延迟(ms)" sortable prop="max" :show-overflow-tooltip="true">
|
|
|
+ <el-table-column v-if="colData[6].istrue" header-align="center" align="center" label="最大延迟(ms)" sortable prop="max" :show-overflow-tooltip="true">
|
|
|
<template slot-scope="scope">
|
|
|
<div :class="scope.row.max<2000?'table_bg':'table_bg_red'">
|
|
|
{{ scope.row.max==undefined?0:Number(scope.row.max).toFixed(2) }}
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column v-if="colData[7].istrue" header-align="center" align="center" label="平均延迟(ms)" sortable prop="duration_average" :show-overflow-tooltip="true">
|
|
|
+ <el-table-column v-if="colData[7].istrue" header-align="center" align="center" label="平均延迟(ms)" sortable prop="duration_average" :show-overflow-tooltip="true">
|
|
|
<template slot-scope="scope">
|
|
|
<div :class="scope.row.duration_average<2000?'table_bg':'table_bg_red'">
|
|
|
<div class="table-num-box">
|
|
|
{{ scope.row.duration_average==undefined?0:Number(scope.row.duration_average).toFixed(2) }}
|
|
|
</div>
|
|
|
<div class="table-day-rate-box">
|
|
|
- <i v-show="processNumber(scope.row.duration_average_dod).sign" :class="processNumber(scope.row.duration_average_dod).sign == 'up'? 'el-icon-up up':'el-icon-down down'"></i>
|
|
|
+ <i v-show="processNumber(scope.row.duration_average_dod).sign" :class="processNumber(scope.row.duration_average_dod).sign == 'up'? 'el-icon-up up':'el-icon-down down'" />
|
|
|
<span>
|
|
|
- {{ scope.row.duration_average_dod==undefined?0:getErrRate(scope.row.duration_average_dod)}}
|
|
|
+ {{ scope.row.duration_average_dod==undefined?0:getErrRate(processNumber(scope.row.duration_average_dod).value) }}
|
|
|
</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</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 header-align="center" align="center" label="中位延迟222s" 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'"></i>
|
|
|
- <span>
|
|
|
- {{ scope.row.duration_median_dod==undefined?0:getErrRate(scope.row.duration_median_dod)}}
|
|
|
- </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>
|
|
|
- <!-- <template slot-scope="scope">
|
|
|
- <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" />
|
|
|
- <el-popover trigger="hover" placement="top">
|
|
|
- {{ scope.row.quantiles.p50!= undefined&&scope.row.quantiles.p50.length>0?timeConversion(scope.row.quantiles.p50[scope.row.quantiles.p50.length-1]):'' }}
|
|
|
- <div slot="reference" class="name-wrapper">
|
|
|
- <div class="P_box">{{ scope.row.quantiles.p50!= undefined&&scope.row.quantiles.p50.length>0?timeConversion(scope.row.quantiles.p50[scope.row.quantiles.p50.length-1]):'' }}</div>
|
|
|
- </div>
|
|
|
- </el-popover>
|
|
|
- </span>
|
|
|
- </template> -->
|
|
|
</el-table-column>
|
|
|
- <el-table-column v-if="colData[9].istrue" header-align="center" align="center" label="90分位延迟" prop="duration_p90" width="200">
|
|
|
+ <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'"></i>
|
|
|
+ <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(scope.row.duration_p90_dod)}}
|
|
|
+ {{ scope.row.duration_p90_dod==undefined?0:getErrRate(processNumber(scope.row.duration_p90_dod).value) }}
|
|
|
</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
- <!-- <template slot-scope="scope">
|
|
|
- <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" />
|
|
|
- <el-popover trigger="hover" placement="top">
|
|
|
- {{ scope.row.quantiles.p90!= undefined&&scope.row.quantiles.p90.length>0?timeConversion(scope.row.quantiles.p90[scope.row.quantiles.p90.length-1]):'' }}
|
|
|
- <div slot="reference" class="name-wrapper">
|
|
|
- <div class="P_box">{{ scope.row.quantiles.p90!= undefined&&scope.row.quantiles.p90.length>0?timeConversion(scope.row.quantiles.p90[scope.row.quantiles.p90.length-1]):'' }}</div>
|
|
|
- </div>
|
|
|
- </el-popover>
|
|
|
- </span>
|
|
|
- </template> -->
|
|
|
</el-table-column>
|
|
|
- <el-table-column v-if="colData[10].istrue" header-align="center" align="center" label="99分位延迟" prop="duration_p99" width="200">
|
|
|
+ <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'"></i>
|
|
|
+ <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(scope.row.duration_p99_dod)}}
|
|
|
+ {{ scope.row.duration_p99_dod==undefined?0:getErrRate(processNumber(scope.row.duration_p99_dod).value) }}
|
|
|
</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
- <!-- <template slot-scope="scope">
|
|
|
- <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" />
|
|
|
- <el-popover trigger="hover" placement="top">
|
|
|
- {{ scope.row.quantiles.p99!= undefined&&scope.row.quantiles.p90.length>0?timeConversion(scope.row.quantiles.p99[scope.row.quantiles.p99.length-1]):'' }}
|
|
|
- <div slot="reference" class="name-wrapper">
|
|
|
- <div class="P_box">{{ scope.row.quantiles.p99!= undefined&&scope.row.quantiles.p99.length>0?timeConversion(scope.row.quantiles.p99[scope.row.quantiles.p99.length-1]):'' }}</div>
|
|
|
- </div>
|
|
|
- </el-popover>
|
|
|
- </span>
|
|
|
- </template> -->
|
|
|
</el-table-column>
|
|
|
<el-table-column
|
|
|
label="操作"
|
|
|
@@ -262,7 +271,7 @@
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
<!-- 业务空间 -->
|
|
|
- <ServiceSpaceDrawer v-if="isShowServiceSpaceDrawer" :is-opendrawer="isShowServiceSpaceDrawer" :bussiness-id="currentBussinessId" :bussiness-name="currentBussinessName" @handleClose="handleClose"></ServiceSpaceDrawer>
|
|
|
+ <ServiceSpaceDrawer v-if="isShowServiceSpaceDrawer" :is-opendrawer="isShowServiceSpaceDrawer" :bussiness-id="currentBussinessId" :bussiness-name="currentBussinessName" @handleClose="handleClose" />
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -272,12 +281,9 @@ import { addUrlMapping, getNewBusinessList, listBizStats, getBizDetail, listBizG
|
|
|
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 echarts from 'echarts'
|
|
|
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 {
|
|
|
@@ -297,10 +303,10 @@ export default {
|
|
|
// "SpanName",
|
|
|
// "rpm",
|
|
|
'请求总数',
|
|
|
- "错误率",
|
|
|
+ '错误率',
|
|
|
// '最大延迟(ms)',
|
|
|
// "延迟比例",
|
|
|
- '中位延迟',
|
|
|
+ '中位延迟'
|
|
|
// '90分位延迟',
|
|
|
// '99分位延迟'
|
|
|
],
|
|
|
@@ -334,7 +340,6 @@ export default {
|
|
|
// 应用数据列表
|
|
|
appData: [],
|
|
|
// 遮罩层
|
|
|
- loading: false,
|
|
|
// 选中数组
|
|
|
ids: [],
|
|
|
// 非单个禁用
|
|
|
@@ -353,17 +358,18 @@ export default {
|
|
|
dateRange: [],
|
|
|
// 查询参数
|
|
|
queryParams: {
|
|
|
- app_alias:'',//应用别名
|
|
|
- service_name: null,//服务名称
|
|
|
- // duration:'',//最小延迟
|
|
|
- // error_rate:'',//最小错误率
|
|
|
- // request_total:'',//最低请求量
|
|
|
- // node_num:'',//最小节点数量
|
|
|
- // access_database: '',//是否涉及数据库
|
|
|
- // vip: true,//是否为重点业务
|
|
|
- // favor:'',//是否收藏
|
|
|
- page_num: 1,//当前页码
|
|
|
- page_size: 10,//每页条数
|
|
|
+ app_alias: '', // 应用别名
|
|
|
+ service_name: null, // 服务名称
|
|
|
+ duration: '', // 最小延迟
|
|
|
+ error_rate: '', // 最小错误率
|
|
|
+ request_total: '', // 最低请求量
|
|
|
+ node_num: '', // 最小节点数量
|
|
|
+ access_database: '', // 是否涉及数据库
|
|
|
+ favor: '', // 是否收藏
|
|
|
+ sort_field: '', // 支持 request_total(请求总数，调用占比)、error_rate(错误率)、duration_median(中位延迟)
|
|
|
+ sort_type: 'desc',
|
|
|
+ page_num: 1, // 当前页码
|
|
|
+ page_size: 10// 每页条数
|
|
|
},
|
|
|
// 表单参数
|
|
|
form: {
|
|
|
@@ -382,7 +388,7 @@ export default {
|
|
|
headers: { 'Authorization': 'Bearer ' + getToken() },
|
|
|
appsItem: {},
|
|
|
expands: [],
|
|
|
-
|
|
|
+ serviceList: [],
|
|
|
rowData: [],
|
|
|
serviceMapTimer: null,
|
|
|
BizStatsQuery: {
|
|
|
@@ -397,20 +403,31 @@ export default {
|
|
|
end_time: 1702972800,
|
|
|
start_time: 1702969200
|
|
|
},
|
|
|
+ serviceParams: {
|
|
|
+ app_id: '',
|
|
|
+ start_time: '',
|
|
|
+ end_time: '',
|
|
|
+ pageIndex: 1,
|
|
|
+ pageSize: 200
|
|
|
+ },
|
|
|
graphObj: [],
|
|
|
detailTitle: '',
|
|
|
detailObj: {},
|
|
|
myChartList: [],
|
|
|
myChartboxList: [],
|
|
|
myChartBox2List: [],
|
|
|
- currentBussinessId:'',//当前点击业务id
|
|
|
- currentBussinessName:'相关业务',//当前点击业务名字
|
|
|
+ currentBussinessId: '', // 当前点击业务id
|
|
|
+ currentBussinessName: '相关业务'// 当前点击业务名字
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
'$store.state.time.globalTimes': {
|
|
|
handler(newValue, oldValue) {
|
|
|
if (newValue) {
|
|
|
+ this.serviceParams.start_time = newValue.startTime
|
|
|
+ this.serviceParams.end_time = newValue.endTime
|
|
|
+ this.serviceParams.pageIndex = 1
|
|
|
+
|
|
|
this.queryParams.start_time = newValue.startTime
|
|
|
this.queryParams.end_time = newValue.endTime
|
|
|
this.BizStatsQuery.start_time = newValue.startTime
|
|
|
@@ -419,6 +436,8 @@ export default {
|
|
|
this.graphStatsQuery.end_time = newValue.endTime
|
|
|
this.queryParams.page_num = 1
|
|
|
this.serveceMapList = []
|
|
|
+
|
|
|
+ this.getServiceList() // 获取服务列表select
|
|
|
this.getList()
|
|
|
if (newValue.timeOut) {
|
|
|
if (newValue.timeOut == 1) {
|
|
|
@@ -446,16 +465,22 @@ export default {
|
|
|
},
|
|
|
created() {
|
|
|
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
|
|
|
+ this.serviceParams.end_time = end_time
|
|
|
+ this.BizStatsQuery.start_time = start_time
|
|
|
+ this.BizStatsQuery.end_time = end_time
|
|
|
this.appItem = storage.get('appsItem')
|
|
|
if (JSON.stringify(this.appItem) != '{}') {
|
|
|
this.appItem = storage.get('appsItem')
|
|
|
this.queryParams.app_alias = this.appItem.alias
|
|
|
+ this.serviceParams.app_id = this.appItem.id
|
|
|
this.getList()
|
|
|
this.$forceUpdate()
|
|
|
}
|
|
|
+ this.getServiceList() // 获取服务列表select
|
|
|
this.columnChange()
|
|
|
-
|
|
|
},
|
|
|
mounted() {
|
|
|
this.$forceUpdate()
|
|
|
@@ -467,69 +492,76 @@ export default {
|
|
|
this.disposeEcharts(this.myChartBox2List)
|
|
|
},
|
|
|
methods: {
|
|
|
- //判断数字是正是负还是零并给出标识
|
|
|
+ // 获取该业务的服务list
|
|
|
+ getServiceList() {
|
|
|
+ listService(this.serviceParams).then(res => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.serviceList = res.data.list
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 判断数字是正是负还是零并给出标识
|
|
|
processNumber(num) {
|
|
|
- let result = {
|
|
|
+ const result = {
|
|
|
value: num,
|
|
|
sign: ''
|
|
|
- };
|
|
|
+ }
|
|
|
if (num > 0) {
|
|
|
- result.sign = 'up';
|
|
|
+ result.sign = 'up'
|
|
|
} else if (num < 0) {
|
|
|
- result.value = Math.abs(num); // 返回绝对值
|
|
|
- result.sign = 'down';
|
|
|
+ result.value = Math.abs(num) // 返回绝对值
|
|
|
+ result.sign = 'down'
|
|
|
} else {
|
|
|
- result.sign = '';
|
|
|
+ result.sign = ''
|
|
|
}
|
|
|
- return result;
|
|
|
+ return result
|
|
|
},
|
|
|
- getErrRate(error_rate){
|
|
|
- let strErrorRate = numToString(error_rate)
|
|
|
+ getErrRate(error_rate) {
|
|
|
+ const strErrorRate = numToString(error_rate)
|
|
|
let length = 0
|
|
|
- if (strErrorRate !== '0'){
|
|
|
- let arr = strErrorRate.split('.')
|
|
|
+ if (strErrorRate !== '0') {
|
|
|
+ const arr = strErrorRate.split('.')
|
|
|
if (arr.length > 1) {
|
|
|
length = strErrorRate.split('.')[1].length
|
|
|
}
|
|
|
}
|
|
|
- if(error_rate == 0) {
|
|
|
+ if (error_rate == 0) {
|
|
|
return error_rate
|
|
|
- } else if (error_rate == 1){
|
|
|
+ } else if (error_rate == 1) {
|
|
|
return error_rate * 100 + '%'
|
|
|
- } else if (length<=2 ) {
|
|
|
+ } else if (length <= 2) {
|
|
|
return error_rate * 100 + '%'
|
|
|
} else {
|
|
|
return convertToPercentage(error_rate)
|
|
|
}
|
|
|
function numToString(num) {
|
|
|
- let str = num.toString();
|
|
|
+ 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;
|
|
|
+ const parts = str.split('e')
|
|
|
+ const base = parts[0]
|
|
|
+ const exp = parseInt(parts[1])
|
|
|
+ const decimalPlaces = base.split('.')[1]?.length || 0
|
|
|
+ const zerosNeeded = Math.abs(exp) - decimalPlaces
|
|
|
if (exp < 0) {
|
|
|
- str = '0.' + '0'.repeat(zerosNeeded) + base.replace('.', '');
|
|
|
+ str = '0.' + '0'.repeat(zerosNeeded) + base.replace('.', '')
|
|
|
} else {
|
|
|
- str = base + '0'.repeat(zerosNeeded);
|
|
|
+ str = base + '0'.repeat(zerosNeeded)
|
|
|
}
|
|
|
}
|
|
|
- return str;
|
|
|
+ return str
|
|
|
}
|
|
|
function convertToPercentage(value) {
|
|
|
- let bnValue = new BigNumber(value);
|
|
|
- let percentage = bnValue.multipliedBy(100);// 乘法运算
|
|
|
- let roundedPercentage = percentage.decimalPlaces(2, BigNumber.ROUND_FLOOR);// decimalPlaces保留小数位
|
|
|
+ const bnValue = new BigNumber(value)
|
|
|
+ const percentage = bnValue.multipliedBy(100)// 乘法运算
|
|
|
+ let roundedPercentage = percentage.decimalPlaces(2, BigNumber.ROUND_FLOOR)// decimalPlaces保留小数位
|
|
|
|
|
|
// 如果四舍五入后的值小于原始值，手动增加 0.01
|
|
|
- if (roundedPercentage.isLessThan(percentage)) {// 判断是否小于
|
|
|
- roundedPercentage = roundedPercentage.plus(0.01);
|
|
|
+ if (roundedPercentage.isLessThan(percentage)) { // 判断是否小于
|
|
|
+ roundedPercentage = roundedPercentage.plus(0.01)
|
|
|
}
|
|
|
|
|
|
- return `${roundedPercentage.toFixed(2)}%`;
|
|
|
+ return `${roundedPercentage.toFixed(2)}%`
|
|
|
}
|
|
|
-
|
|
|
},
|
|
|
handleUpdateName() {
|
|
|
this.open = true
|
|
|
@@ -548,6 +580,7 @@ export default {
|
|
|
Refresh(timeOut) {
|
|
|
this.serviceMapTimer = setInterval(() => {
|
|
|
this.getList()
|
|
|
+ this.getServiceList() // 获取服务列表select
|
|
|
}, timeOut)
|
|
|
},
|
|
|
handleClose() {
|
|
|
@@ -557,7 +590,7 @@ export default {
|
|
|
this.drawerDetail = false
|
|
|
},
|
|
|
handleRowClick(row, column, event) {
|
|
|
- this.currentBussinessId = row.id
|
|
|
+ this.currentBussinessId = row.id
|
|
|
this.currentBussinessName = row.name
|
|
|
this.isShowServiceSpaceDrawer = true
|
|
|
},
|
|
|
@@ -568,7 +601,7 @@ export default {
|
|
|
this.graphData = {}
|
|
|
if (res.code == 200) {
|
|
|
const arr = res.data
|
|
|
- console.log(10000001111,arr)
|
|
|
+ console.log(10000001111, arr)
|
|
|
if (arr.length > 0) {
|
|
|
const List = this.handelListBizData(arr)
|
|
|
this.graphData = List[0]
|
|
|
@@ -597,7 +630,7 @@ export default {
|
|
|
return data
|
|
|
},
|
|
|
handleData(data) {
|
|
|
- console.log(3000,data)
|
|
|
+ console.log(3000, data)
|
|
|
data.forEach((v, k) => {
|
|
|
v.id = v.biz_id
|
|
|
|
|
|
@@ -645,33 +678,39 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
- // 获取左侧table 数据
|
|
|
- getList(type) {
|
|
|
- this.loading = true
|
|
|
- this.myChartList = []
|
|
|
- this.myChartboxList = []
|
|
|
- this.myChartBox2List = []
|
|
|
- getNewBusinessList(this.queryParams).then(res => {
|
|
|
- if (res.code == 200) {
|
|
|
- this.serveceMapList = res.data.list || []
|
|
|
- this.tableCount = res.data.count || 0
|
|
|
- this.loading = false
|
|
|
- // if (res.data && res.data.list && res.data.list.length > 0) {
|
|
|
- // if (type === 'created') {
|
|
|
- // this.$refs.tableRef.setCurrentRow(this.serveceMapList[0])
|
|
|
- // this.childQueryParams.biz_id = res.data.list[0].id
|
|
|
- // this.sweetquanParams.biz_id = res.data.list[0].id
|
|
|
- // if (this.switchValue) {
|
|
|
- // this.getListBizGraph(res.data.list[0].id) // 获取右侧关系拓扑图数据
|
|
|
- // } else {
|
|
|
- // this.getSweetListFn()
|
|
|
- // }
|
|
|
- // this.handelgetBizDetail()
|
|
|
- // }
|
|
|
- // }
|
|
|
+ // 获取左侧table 数据
|
|
|
+ getList() {
|
|
|
+ const _this = this
|
|
|
+ this.loading = true
|
|
|
+ this.myChartList = []
|
|
|
+ this.myChartboxList = []
|
|
|
+ this.myChartBox2List = []
|
|
|
+ getNewBusinessList(this.queryParams).then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.serveceMapList = res.data.list || []
|
|
|
+ this.tableCount = res.data.total || 0
|
|
|
+ this.loading = false
|
|
|
+ if (_this.serveceMapList.length > 0) {
|
|
|
+ for (let i = 0; i < _this.serveceMapList.length; i++) {
|
|
|
+ this.BizStatsQuery.biz_id = _this.serveceMapList[i].id
|
|
|
+ listBizStats(this.BizStatsQuery).then(response => {
|
|
|
+ if (response.code == 200) {
|
|
|
+ if (response.data.biz_id != undefined) {
|
|
|
+ if (_this.serveceMapList[i].id == response.data.biz_id) {
|
|
|
+ _this.serveceMapList[i] = Object.assign({}, _this.serveceMapList[i], response.data)
|
|
|
+ _this.isUpdate = !_this.isUpdate
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
}
|
|
|
- })
|
|
|
- },
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$forceUpdate()
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
beforeUpload(file) {
|
|
|
const isRightSize = file.size / 1024 / 1024 < 2
|
|
|
if (!isRightSize) {
|
|
|
@@ -700,6 +739,10 @@ export default {
|
|
|
}
|
|
|
this.resetForm('form')
|
|
|
},
|
|
|
+ handChange(val) {
|
|
|
+ this.queryParams.service_name = val
|
|
|
+ this.handleQuery()
|
|
|
+ },
|
|
|
/** 搜索按钮操作 */
|
|
|
handleQuery() {
|
|
|
this.queryParams.page_num = 1
|
|
|
@@ -959,20 +1002,19 @@ export default {
|
|
|
]
|
|
|
}
|
|
|
|
|
|
- setTimeout(() => {
|
|
|
- const chartId = 'tiger-' + arguments[2] + '-trend-index' + arguments[1]
|
|
|
- let myChart = this.$echarts5.getInstanceByDom(document.getElementById(chartId))
|
|
|
+ setTimeout(() => { // tiger-five-trend-index
|
|
|
+ const chartId = 'tiger-' + 'five' + '-trend-index' + index
|
|
|
+
|
|
|
+ let myChart = that.$echarts5.getInstanceByDom(document.getElementById(chartId))
|
|
|
if (myChart == null) {
|
|
|
myChart = that.$echarts5.init(document.getElementById(chartId), 'macarons')
|
|
|
}
|
|
|
myChart.dispatchAction({ type: 'hideTip' })
|
|
|
- this.myChartList.push(myChart)
|
|
|
+ that.myChartList.push(myChart)
|
|
|
option && myChart.setOption(option, true)
|
|
|
// myChart.group = `index${row.id}`
|
|
|
- // this.$echarts5.connect(`index${row.id}`)
|
|
|
- }, 1000)
|
|
|
-
|
|
|
- // }
|
|
|
+ // that.$echarts5.connect(`index${row.id}`)
|
|
|
+ }, 3000)
|
|
|
},
|
|
|
drawEchartsp90(row, index) {
|
|
|
const that = this
|
|
|
@@ -1107,7 +1149,6 @@ export default {
|
|
|
// }
|
|
|
},
|
|
|
drawEchartsScale(row) {
|
|
|
- const _this = this
|
|
|
let myChartScale = this.$echarts5.getInstanceByDom(document.getElementById(chartId))
|
|
|
if (myChartScale == null) {
|
|
|
myChartScale = this.$echarts5.init(document.getElementById('scaleMain'))
|
|
|
@@ -1234,6 +1275,18 @@ export default {
|
|
|
}
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
+::v-deep .el-input--suffix .el-input__inner{
|
|
|
+ padding-right: 0;
|
|
|
+}
|
|
|
+.flex{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.seach-title{
|
|
|
+ width:100px;
|
|
|
+ display: inline-block;
|
|
|
+ margin-right: 10px;
|
|
|
+}
|
|
|
.iconfont {
|
|
|
font-family: "iconfont" !important;
|
|
|
font-size: 20px;
|
|
|
@@ -1366,6 +1419,9 @@ export default {
|
|
|
.el-icon-down:before{
|
|
|
content:'\e6eb'
|
|
|
}
|
|
|
+.TableBox{
|
|
|
+ margin-top:10px;
|
|
|
+}
|
|
|
.TableBox ::v-deep .el-table .cell{
|
|
|
line-height: 40px !important;
|
|
|
padding-left: 1px;
|
