Skip to content

M
mindinsight

MindSpore / mindinsight

通知 7
Star 3
Fork 2
M
mindinsight
提交 63d12fa9 编写于 作者: W WeiFeng-mindinsight
浏览文件
操作

fix profiling issues I1SQM6 I1SQMI I1SL3D

上级 1e0088bd
隐藏空白更改
内联 并排
Showing with 571 addition and 435 deletion
mindinsight/ui/src/locales/en-us.json
浏览文件 @ 63d12fa9
......@@ -232,10 +232,10 @@
"card": " ",
"searchByType": "Enter operator type",
"searchByName": "Enter operator name",
"operatorInfo":"Operator",
"kernelInfo":"Kernel",
"searchByCoreName":"Enter kernel name",
"searchByCoreFullName":"Enter operator full name"
"operatorInfo": "Operator",
"kernelInfo": "Kernel",
"searchByCoreName": "Enter kernel name",
"searchByCoreFullName": "Enter operator full name"
},
"profiling": {
"profilingDashboard": "Profiling Dashboard",
......@@ -392,8 +392,10 @@
"content31": "You can analyze whether the flow tiling policy is proper and whether the step interval and tail time are too long based on the timeline information.",
"content32": "You can also locate an operator and view and analyze its execution time."
},
"countUnit": "times",
"unit": "ms/time",
"gpuunit": "us/time"
"gpuunit": "us/time",
"chartTitle": "Average Time Consumption Ranking"
},
"hardwareVisual": {
"processor": "Ascend AI Processor",
......@@ -449,7 +451,7 @@
"gridAccuracy": "Decimal places are reserved.",
"inCorrectInput": "Invalid input.",
"gridTableNoData": "No data in the table.",
"cache":"CACHING"
"cache": "CACHING"
},
"error": {
"50540000": "System error.",
......
mindinsight/ui/src/locales/zh-cn.json
浏览文件 @ 63d12fa9
......@@ -391,8 +391,10 @@
"content31": "您可以通过时间线信息分析流切分方法是否合理、迭代间隙和拖尾时间是否过长等；",
"content32": "也可以具体定位到某个算子，查看分析它的执行时间。"
},
"countUnit": "次",
"unit": "ms/次",
"gpuunit": "us/次"
"gpuunit": "us/次",
"chartTitle": "平均耗时排行"
},
"hardwareVisual": {
"processor": "昇腾AI处理器",
......@@ -428,14 +430,14 @@
"availableFree": "芯片空闲",
"availableBusy": "芯片已被占用或不可用",
"failQueryChip": "芯片信息查询有误",
"name":"名称",
"npu":"编号",
"available":"是否空闲",
"health":"健康状态",
"ipAddress":"IP 地址",
"hbmUsage":"已用HBM内存(MB)",
"power":"功率(W)",
"temp":"温度(℃)"
"name": "名称",
"npu": "编号",
"available": "是否空闲",
"health": "健康状态",
"ipAddress": "IP 地址",
"hbmUsage": "已用HBM内存(MB)",
"power": "功率(W)",
"temp": "温度(℃)"
},
"components": {
"summaryTitle": "训练选择",
......@@ -448,7 +450,7 @@
"gridAccuracy": "保留小数位",
"inCorrectInput": "无效输入",
"gridTableNoData": "表格无数据",
"cache":"正在加载"
"cache": "正在加载"
},
"error": {
"50540000": "系统错误",
......
mindinsight/ui/src/views/profiling-gpu/operator.vue
浏览文件 @ 63d12fa9
......@@ -25,6 +25,7 @@ limitations under the License.
:class="{fullScreen:fullScreen}"
v-if="operatorCharts.data.length">
<div>
<div class="chart-title">{{$t('profiling.chartTitle')}}</div>
<el-radio-group class="chart-radio-group"
v-model="operatorCharts.type"
@change="operatorChartChange"
......@@ -99,13 +100,14 @@ limitations under the License.
:property="ele"
:key="key"
:sortable="ele === 'op_info' ? false : 'custom'"
show-overflow-tooltip>
:min-width="(ele === 'op_type') ? 100 : (ele === 'op_name') ?
120 : (ele === 'op_full_name') ? 150 : '' "
:show-overflow-tooltip="(ele === 'op_full_name'||ele === 'op_name'
||ele==='op_type') ? false : true">
<template slot="header">
<div class="custom-label"
:title="(ele==='op_total_time'||ele==='op_avg_time'||ele==='cuda_activity_cost_time')
?`${ele} (${$t('profiling.gpuunit')})`:ele">
{{(ele==='op_total_time'||ele==='op_avg_time'||ele==='cuda_activity_cost_time')
?`${ele} (${$t('profiling.gpuunit')})`:ele}}
:title="getHeaderField(ele)">
{{getHeaderField(ele)}}
</div>
</template>
</el-table-column>
......@@ -126,8 +128,8 @@ limitations under the License.
sortable>
<template slot="header">
<div class="custom-label"
:title="(item==='total_time'||item==='avg_time')?`${item} (${$t('profiling.gpuunit')})`:item">
{{(item==='total_time'||item==='avg_time')?`${item} (${$t('profiling.gpuunit')})`:item}}
:title="getHeaderField(item)">
{{getHeaderField(item)}}
</div>
</template>
</el-table-column>
......@@ -144,13 +146,14 @@ limitations under the License.
:property="item"
:key="$index"
:sortable="item === 'op_info' ? false : 'custom'"
show-overflow-tooltip>
:min-width="(item === 'op_type') ? 100 : (item === 'op_name')
? 120 : (item === 'op_full_name') ? 150 : '' "
:show-overflow-tooltip="(item === 'op_full_name' || item === 'op_name'
|| item === 'op_type') ? false : true">
<template slot="header">
<div class="custom-label"
:title="(item==='op_total_time'||item==='op_avg_time'||item==='cuda_activity_cost_time')
?`${item} (${$t('profiling.gpuunit')})`:item">
{{(item==='op_total_time'||item==='op_avg_time'||item==='cuda_activity_cost_time')
?`${item} (${$t('profiling.gpuunit')})`:item}}
:title="getHeaderField(item)">
{{getHeaderField(item)}}
</div>
</template>
</el-table-column>
......@@ -180,6 +183,7 @@ limitations under the License.
:class="{fullScreen:fullScreenKernel}"
v-if="coreCharts.data.length">
<div>
<div class="chart-title">{{$t('profiling.chartTitle')}}</div>
</div>
<div class="cl-profiler-echarts">
<div class
......@@ -225,13 +229,14 @@ limitations under the License.
:property="item"
:key="$index"
sortable="custom"
show-overflow-tooltip>
:min-width="(item === 'type') ? 100 : (item === 'name' || item === 'op_full_name')
? 150 : '' "
:show-overflow-tooltip="(item === 'op_full_name' || item === 'name'
||item === 'type') ? false : true">
<template slot="header">
<div class="custom-label"
:title="(item==='total_duration'||item==='avg_duration'||item==='max_duration'
|| item==='min_duration')?`${item} (${$t('profiling.gpuunit')})`:item">
{{(item==='total_duration'||item==='avg_duration'||item==='max_duration'||item==='min_duration')
?`${item} (${$t('profiling.gpuunit')})`:item}}
:title="getHeaderField(item)">
{{getHeaderField(item)}}
</div>
</template>
</el-table-column>
......@@ -363,6 +368,29 @@ export default {
this.$bus.$off('collapse');
},
methods: {
getHeaderField(key) {
const maps = {
total_time: 'total_time (us)',
avg_time: `avg_time (${this.$t('profiling.gpuunit')})`,
op_total_time: 'op_total_time (us)',
op_avg_time: `op_avg_time (${this.$t('profiling.gpuunit')})`,
max_duration: 'max_duration (us)',
min_duration: 'min_duration (us)',
avg_duration: 'avg_duration (us)',
total_duration: 'total_duration (us)',
proportion: 'total_time_proportion (%)',
cuda_activity_cost_time: 'cuda_activity_cost_time (us)',
cuda_activity_call_count: `cuda_activity_call_count (${this.$t(
'profiling.countUnit',
)})`,
type_occurrences: `type_occurrences (${this.$t(
'profiling.countUnit',
)})`,
op_occurrences: `op_occurrences (${this.$t('profiling.countUnit')})`,
occurrences: `occurrences (${this.$t('profiling.countUnit')})`,
};
return maps[key] ? maps[key] : key;
},
resizeEchart() {
if (this.operatorCharts.chartDom) {
setTimeout(() => {
......@@ -400,7 +428,16 @@ export default {
this.getCoreList(true);
}
},
opTypeSortChange() {
/**
* Operators type sort
* @param {Object} sort Sort data
*/
opTypeSortChange(sort) {
this.op_sort_condition = {
name: sort.prop,
type: sort.order,
};
this.$nextTick(() => {
const item = this.$refs['expandChild'];
if (item && this.curActiveRow.rowItem) {
......@@ -856,6 +893,8 @@ export default {
setOption(chart) {
const option = {};
const maxLabelLength = 20;
const maxTooltipLen = 50;
if (!chart.type) {
option.legend = {
data: [],
......@@ -871,17 +910,25 @@ export default {
: chart.data[i].name;
legendStr = `{a|${i + 1}}{b|${name} ${chart.data[
i
].value.toFixed(3)}}\n{c|${
chart.data[i].percent
? chart.data[i].percent.toFixed(2) + '%'
: ''
}}`;
].value.toFixed(3)}}\n{c|}`;
}
}
return legendStr;
},
tooltip: {
show: true,
formatter: (params) => {
let name = params.name;
name = name.replace(/</g, '< ');
const breakCount = Math.ceil(name.length / maxTooltipLen);
let str = '';
for (let i = 0; i < breakCount; i++) {
const temp = name.substr(i * maxTooltipLen, maxTooltipLen);
str += str ? '<br/>' + temp : temp;
}
return str;
},
},
itemWidth: 18,
itemHeight: 18,
......@@ -912,7 +959,16 @@ export default {
option.tooltip = {
trigger: 'item',
formatter: (params) => {
return `${params.marker} ${params.data.name} ${params.percent}%`;
const name = params.data.name.replace(/</g, '< ');
const strTemp = `${name} ${params.percent.toFixed(2) + '%'}`;
const breakCount = Math.ceil(strTemp.length / maxTooltipLen);
let str = '';
for (let i = 0; i < breakCount; i++) {
const temp = strTemp.substr(i * maxTooltipLen, maxTooltipLen);
str += str ? '<br/>' + temp : temp;
}
return str;
},
confine: true,
};
......@@ -1049,225 +1105,228 @@ export default {
<style lang="scss">
.operator {
height: 100%;
}
.clear {
clear: both;
}
.el-tabs__item {
color: #6c7280;
font-size: 16px;
line-height: 36px;
height: 36px;
}
.el-tabs__item.is-active {
color: #00a5a7;
font-weight: bold;
}
.operator-title {
padding: 0 15px;
font-size: 16px;
font-weight: bold;
}
.cl-profiler {
height: calc(100% - 21px);
overflow-y: auto;
width: 100%;
background: #fff;
padding: 0 16px;
overflow: hidden;
.custom-label {
max-width: calc(100% - 25px);
padding: 0;
vertical-align: middle;
}
.el-tabs {
height: 100%;
.el-tabs__header {
margin-bottom: 10px;
}
}
.el-tabs__content {
height: calc(100% - 46px);
}
.el-tab-pane {
height: 100%;
.clear {
clear: both;
}
.cl-search-box {
float: right;
margin-bottom: 10px;
margin-right: 20px;
.el-tabs__item {
color: #6c7280;
line-height: 36px;
height: 36px;
}
.cl-profiler-top {
height: 45%;
.el-tabs__item.is-active {
color: #00a5a7;
font-weight: bold;
}
.cl-profiler-top.fullScreen {
display: none;
}
.cl-profiler-bottom {
height: 55%;
padding-top: 10px;
.fullScreen {
float: right;
margin-top: 5px;
cursor: pointer;
}
.operator-title {
padding: 0 15px;
font-size: 16px;
font-weight: bold;
}
.cl-profiler-bottom.fullScreen {
height: 100%;
}
.core-search-type {
float: right;
width: 130px;
margin-right: 10px;
}
.cl-profiler-echarts {
.cl-profiler {
height: calc(100% - 21px);
overflow-y: auto;
width: 100%;
height: calc(100% - 32px);
display: inline-block;
position: relative;
overflow: auto;
#core-echarts,
#operator-echarts {
width: 100%;
background: #fff;
padding: 0 16px;
overflow: hidden;
.custom-label {
max-width: calc(100% - 25px);
padding: 0;
vertical-align: middle;
}
.el-tabs {
height: 100%;
min-width: 1300px;
min-height: 306px;
overflow: hidden;
.el-tabs__header {
margin-bottom: 10px;
}
}
.el-tabs__content {
height: calc(100% - 46px);
}
.el-tab-pane {
height: 100%;
}
.cl-search-box {
float: right;
margin-bottom: 10px;
margin-right: 20px;
}
}
.core-tab {
.cl-profiler-top {
height: calc(45% - 40px);
height: 45%;
.chart-title {
float: left;
font-weight: bold;
}
}
.cl-profiler-bottom {
height: calc(55% + 40px);
.cl-profiler-top.fullScreen {
display: none;
}
.cl-profiler-echarts {
height: 100%;
.cl-profiler-bottom {
height: 55%;
padding-top: 10px;
.fullScreen {
float: right;
margin-top: 5px;
cursor: pointer;
}
}
.cl-profiler-bottom.fullScreen {
height: 100%;
}
}
.chart-radio-group {
float: right;
}
.el-radio-group {
.el-radio-button--small .el-radio-button__inner {
height: 30px;
width: 70px;
font-size: 14px;
line-height: 10px;
.core-search-type {
float: right;
width: 130px;
margin-right: 10px;
}
}
.cl-profiler-bar {
display: inline-block;
width: calc(100% - 400px);
vertical-align: top;
height: 100%;
padding: 20px;
}
.cl-profiler-table-type {
display: inline-block;
width: calc(100% - 400px);
vertical-align: top;
height: 100%;
}
.el-pagination {
margin: 7px 0;
float: right;
}
.details-data-list {
.el-table {
th {
padding: 10px 0;
border-top: 1px solid #ebeef5;
.cell {
border-left: 1px solid #d9d8dd;
height: 14px;
line-height: 14px;
}
.cl-profiler-echarts {
width: 100%;
height: calc(100% - 32px);
display: inline-block;
position: relative;
overflow: auto;
#core-echarts,
#operator-echarts {
width: 100%;
height: 100%;
min-width: 1300px;
min-height: 306px;
overflow: hidden;
}
th:first-child {
.cell {
border-left: none;
}
}
.core-tab {
.cl-profiler-top {
height: 45%;
}
th:nth-child(2),
td:nth-child(2) {
max-width: 30%;
.cl-profiler-bottom {
height: 55%;
}
td {
padding: 8px 0;
.cl-profiler-echarts {
height: calc(100% - 32px);
}
.cl-profiler-bottom.fullScreen {
height: 100%;
}
}
.el-table__row--level-0 td:first-child:after {
width: 20px;
height: 1px;
background: #ebeef5;
z-index: 11;
position: absolute;
left: 0;
bottom: -1px;
content: '';
display: block;
.chart-radio-group {
float: right;
}
.el-table__row--level-1 {
td {
padding: 4px 0;
position: relative;
.el-radio-group {
.el-radio-button--small .el-radio-button__inner {
height: 30px;
width: 70px;
font-size: 14px;
line-height: 10px;
}
td:first-child::before {
width: 42px;
background: #f0fdfd;
border-right: 2px #00a5a7 solid;
z-index: 10;
}
.cl-profiler-bar {
display: inline-block;
width: calc(100% - 400px);
vertical-align: top;
height: 100%;
padding: 20px;
}
.cl-profiler-table-type {
display: inline-block;
width: calc(100% - 400px);
vertical-align: top;
height: 100%;
}
.el-pagination {
margin: 7px 0;
float: right;
}
.details-data-list {
.el-table {
th {
padding: 10px 0;
border-top: 1px solid #ebeef5;
.cell {
border-left: 1px solid #d9d8dd;
height: 14px;
line-height: 14px;
}
}
th:first-child {
.cell {
border-left: none;
}
}
th:nth-child(2),
td:nth-child(2) {
max-width: 30%;
}
td {
padding: 8px 0;
}
}
.el-table__row--level-0 td:first-child:after {
width: 20px;
height: 1px;
background: #ebeef5;
z-index: 11;
position: absolute;
left: 0;
top: -1px;
bottom: 0px;
bottom: -1px;
content: '';
display: block;
}
}
.el-table__row--level-1 {
td {
padding: 4px 0;
position: relative;
}
td:first-child::before {
width: 42px;
background: #f0fdfd;
border-right: 2px #00a5a7 solid;
z-index: 10;
position: absolute;
left: 0;
top: -1px;
bottom: 0px;
content: '';
display: block;
}
}
.el-table__row--level-1:first-child {
td:first-child::before {
bottom: 0;
.el-table__row--level-1:first-child {
td:first-child::before {
bottom: 0;
}
}
}
}
.el-table__expanded-cell[class*='cell'] {
padding: 0;
}
.expand-table {
position: relative;
padding-left: 44px;
}
.expand-table::before {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
background: #f0fdfd;
width: 42px;
border-right: 2px #00a5a7 solid;
}
.el-radio-button:last-child .el-radio-button__inner,
.el-radio-button:first-child .el-radio-button__inner {
border-radius: 0;
}
.image-noData {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
p {
font-size: 16px;
padding-top: 10px;
.el-table__expanded-cell[class*='cell'] {
padding: 0;
}
.expand-table {
position: relative;
padding-left: 44px;
}
.expand-table::before {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
background: #f0fdfd;
width: 42px;
border-right: 2px #00a5a7 solid;
}
.el-radio-button:last-child .el-radio-button__inner,
.el-radio-button:first-child .el-radio-button__inner {
border-radius: 0;
}
.image-noData {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
p {
font-size: 16px;
padding-top: 10px;
}
}
}
}
......
mindinsight/ui/src/views/profiling/data-process.vue
浏览文件 @ 63d12fa9
......@@ -1293,7 +1293,7 @@ export default {
.md-wrap {
height: 100%;
background: #fff;
padding: 0 32px;
padding: 0 16px;
.title {
font-size: 16px;
font-weight: bold;
......@@ -1308,6 +1308,10 @@ export default {
height: 100%;
}
}
.el-tabs__item.is-active {
color: #00a5a7;
font-weight: bold;
}
.md-top {
height: 20%;
font-size: 0;
......
mindinsight/ui/src/views/profiling/operator.vue
浏览文件 @ 63d12fa9
......@@ -25,6 +25,7 @@ limitations under the License.
:class="{fullScreen:fullScreen}"
v-if="coreCharts.data.length">
<div>
<div class="chart-title">{{$t('profiling.chartTitle')}}</div>
<el-radio-group class="chart-radio-group"
v-model="coreCharts.type"
@change="coreChartChange"
......@@ -105,8 +106,8 @@ limitations under the License.
show-overflow-tooltip>
<template slot="header">
<div class="custom-label"
:title="ele==='avg_execution_time'?`${ele} (${$t('profiling.unit')})`:ele">
{{ele==='avg_execution_time'?`${ele} (${$t('profiling.unit')})`:ele}}
:title="getHeaderField(ele)">
{{getHeaderField(ele)}}
</div>
</template>
</el-table-column>
......@@ -127,8 +128,8 @@ limitations under the License.
sortable>
<template slot="header">
<div class="custom-label"
:title="item==='execution_time'?`${item} (${$t('profiling.unit')})`:item">
{{item==='execution_time'?`${item} (${$t('profiling.unit')})`:item}}
:title="getHeaderField(item)">
{{getHeaderField(item)}}
</div>
</template>
</el-table-column>
......@@ -151,8 +152,8 @@ limitations under the License.
show-overflow-tooltip>
<template slot="header">
<div class="custom-label"
:title="item==='avg_execution_time'?`${item} (${$t('profiling.unit')})`:item">
{{item==='avg_execution_time'?`${item} (${$t('profiling.unit')})`:item}}
:title="getHeaderField(item)">
{{getHeaderField(item)}}
</div>
</template>
</el-table-column>
......@@ -209,10 +210,8 @@ limitations under the License.
show-overflow-tooltip>
<template slot="header">
<div class="custom-label"
:title="(item==='total_time' || item==='dispatch_time')?
`${item} (${$t('profiling.unit')})`:item">
{{(item==='total_time' || item==='dispatch_time')?
`${item} (${$t('profiling.unit')})`:item}}
:title="getHeaderField(item)">
{{getHeaderField(item)}}
</div>
</template>
</el-table-column>
......@@ -359,6 +358,19 @@ export default {
this.$bus.$off('collapse');
},
methods: {
getHeaderField(key) {
const maps = {
execution_time: `execution_time (${this.$t('profiling.unit')})`,
avg_execution_time: `avg_execution_time (${this.$t('profiling.unit')})`,
execution_frequency: `execution_frequency (${this.$t(
'profiling.countUnit',
)})`,
percent: 'percent (%)',
total_time: 'total_time (ms)',
dispatch_time: 'dispatch_time (ms)',
};
return maps[key] ? maps[key] : key;
},
resizeEchart() {
if (this.coreCharts.chartDom) {
setTimeout(() => {
......@@ -387,7 +399,15 @@ export default {
this.getCpuList(true);
}
},
opTypeSortChange() {
/**
* Operators type sort
* @param {Object} sort Sort data
*/
opTypeSortChange(sort) {
this.op_sort_condition = {
name: sort.prop,
type: sort.order,
};
this.$nextTick(() => {
const item = this.$refs['expandChild'];
if (item && this.curActiveRow.rowItem) {
......@@ -837,6 +857,8 @@ export default {
setOption(chart) {
const option = {};
const maxLabelLength = 20;
const maxTooltipLen = 50;
if (!chart.type) {
option.legend = {
data: [],
......@@ -859,6 +881,18 @@ export default {
},
tooltip: {
show: true,
formatter: (params) => {
let name = params.name;
name = name.replace(/</g, '< ');
const breakCount = Math.ceil(name.length / maxTooltipLen);
let str = '';
for (let i = 0; i < breakCount; i++) {
const temp = name.substr(i * maxTooltipLen, maxTooltipLen);
str += str ? '<br/>' + temp : temp;
}
return str;
},
},
itemWidth: 18,
itemHeight: 18,
......@@ -889,7 +923,16 @@ export default {
option.tooltip = {
trigger: 'item',
formatter: (params) => {
return `${params.marker} ${params.data.name} ${params.percent}%`;
const name = params.data.name.replace(/</g, '< ');
const strTemp = `${name} ${params.percent.toFixed(2) + '%'}`;
const breakCount = Math.ceil(strTemp.length / maxTooltipLen);
let str = '';
for (let i = 0; i < breakCount; i++) {
const temp = strTemp.substr(i * maxTooltipLen, maxTooltipLen);
str += str ? '<br/>' + temp : temp;
}
return str;
},
confine: true,
};
......@@ -1101,225 +1144,228 @@ export default {
<style lang="scss">
.operator {
height: 100%;
}
.clear {
clear: both;
}
.el-tabs__item {
color: #6c7280;
font-size: 16px;
line-height: 36px;
height: 36px;
}
.el-tabs__item.is-active {
color: #00a5a7;
font-weight: bold;
}
.operator-title {
padding: 0 15px;
font-size: 16px;
font-weight: bold;
}
.cl-profiler {
height: calc(100% - 21px);
overflow-y: auto;
width: 100%;
background: #fff;
padding: 0 16px;
overflow: hidden;
.custom-label {
max-width: calc(100% - 25px);
padding: 0;
vertical-align: middle;
}
.el-tabs {
height: 100%;
.el-tabs__header {
margin-bottom: 10px;
}
}
.el-tabs__content {
height: calc(100% - 46px);
}
.el-tab-pane {
height: 100%;
.clear {
clear: both;
}
.cl-search-box {
float: right;
margin-bottom: 10px;
margin-right: 20px;
.el-tabs__item {
color: #6c7280;
line-height: 36px;
height: 36px;
}
.cl-profiler-top {
height: 45%;
.el-tabs__item.is-active {
color: #00a5a7;
font-weight: bold;
}
.cl-profiler-top.fullScreen {
display: none;
.operator-title {
padding: 0 15px;
font-size: 16px;
font-weight: bold;
}
.cl-profiler-bottom {
height: 55%;
padding-top: 10px;
.fullScreen {
.cl-profiler {
height: calc(100% - 21px);
overflow-y: auto;
width: 100%;
background: #fff;
padding: 0 16px;
overflow: hidden;
.custom-label {
max-width: calc(100% - 25px);
padding: 0;
vertical-align: middle;
}
.el-tabs {
height: 100%;
.el-tabs__header {
margin-bottom: 10px;
}
}
.el-tabs__content {
height: calc(100% - 46px);
}
.el-tab-pane {
height: 100%;
}
.cl-search-box {
float: right;
margin-top: 5px;
cursor: pointer;
margin-bottom: 10px;
margin-right: 20px;
}
}
.cl-profiler-bottom.fullScreen {
height: 100%;
}
.cpu-tab {
.cl-profiler-top {
height: calc(36% + 32px);
height: 45%;
.chart-title {
float: left;
font-weight: bold;
}
}
.cl-profiler-top.fullScreen {
display: none;
}
.cl-profiler-bottom {
height: 100%;
height: 55%;
padding-top: 10px;
.fullScreen {
float: right;
margin-top: 5px;
cursor: pointer;
}
}
}
.cl-profiler-echarts {
width: 100%;
height: calc(100% - 32px);
display: inline-block;
position: relative;
overflow: auto;
#cpu-echarts,
#core-echarts {
width: 100%;
.cl-profiler-bottom.fullScreen {
height: 100%;
min-width: 1300px;
min-height: 306px;
overflow: hidden;
}
}
.chart-radio-group {
float: right;
}
.el-radio-group {
.el-radio-button--small .el-radio-button__inner {
height: 30px;
width: 70px;
font-size: 14px;
line-height: 10px;
}
}
.cl-profiler-bar {
display: inline-block;
width: calc(100% - 400px);
vertical-align: top;
height: 100%;
padding: 20px;
}
.cl-profiler-table-type {
display: inline-block;
width: calc(100% - 400px);
vertical-align: top;
height: 100%;
}
.el-pagination {
margin: 7px 0;
float: right;
}
.details-data-list {
.el-table {
th {
padding: 10px 0;
border-top: 1px solid #ebeef5;
.cell {
border-left: 1px solid #d9d8dd;
height: 14px;
line-height: 14px;
}
.cpu-tab {
.cl-profiler-top {
height: calc(36% + 32px);
}
th:first-child {
.cell {
border-left: none;
}
.cl-profiler-bottom {
height: 100%;
}
th:nth-child(2),
td:nth-child(2) {
max-width: 30%;
}
.cl-profiler-echarts {
width: 100%;
height: calc(100% - 32px);
display: inline-block;
position: relative;
overflow: auto;
#cpu-echarts,
#core-echarts {
width: 100%;
height: 100%;
min-width: 1300px;
min-height: 306px;
overflow: hidden;
}
td {
padding: 8px 0;
}
.chart-radio-group {
float: right;
}
.el-radio-group {
.el-radio-button--small .el-radio-button__inner {
height: 30px;
width: 70px;
font-size: 14px;
line-height: 10px;
}
}
.el-table__row--level-0 td:first-child:after {
width: 20px;
height: 1px;
background: #ebeef5;
z-index: 11;
position: absolute;
left: 0;
bottom: -1px;
content: '';
display: block;
.cl-profiler-bar {
display: inline-block;
width: calc(100% - 400px);
vertical-align: top;
height: 100%;
padding: 20px;
}
.cl-profiler-table-type {
display: inline-block;
width: calc(100% - 400px);
vertical-align: top;
height: 100%;
}
.el-pagination {
margin: 7px 0;
float: right;
}
.el-table__row--level-1 {
td {
padding: 4px 0;
position: relative;
.details-data-list {
.el-table {
th {
padding: 10px 0;
border-top: 1px solid #ebeef5;
.cell {
border-left: 1px solid #d9d8dd;
height: 14px;
line-height: 14px;
}
}
th:first-child {
.cell {
border-left: none;
}
}
th:nth-child(2),
td:nth-child(2) {
max-width: 30%;
}
td {
padding: 8px 0;
}
}
td:first-child::before {
width: 42px;
background: #f0fdfd;
border-right: 2px #00a5a7 solid;
z-index: 10;
.el-table__row--level-0 td:first-child:after {
width: 20px;
height: 1px;
background: #ebeef5;
z-index: 11;
position: absolute;
left: 0;
top: -1px;
bottom: 0px;
bottom: -1px;
content: '';
display: block;
}
}
.el-table__row--level-1 {
td {
padding: 4px 0;
position: relative;
}
td:first-child::before {
width: 42px;
background: #f0fdfd;
border-right: 2px #00a5a7 solid;
z-index: 10;
position: absolute;
left: 0;
top: -1px;
bottom: 0px;
content: '';
display: block;
}
}
.el-table__row--level-1:first-child {
td:first-child::before {
bottom: 0;
.el-table__row--level-1:first-child {
td:first-child::before {
bottom: 0;
}
}
.el-dialog__title {
font-weight: bold;
}
.el-dialog__body {
max-height: 500px;
padding-top: 10px;
overflow: auto;
.details-data-title {
margin-bottom: 20px;
}
}
}
.el-dialog__title {
font-weight: bold;
.el-table__expanded-cell[class*='cell'] {
padding: 0;
}
.el-dialog__body {
max-height: 500px;
padding-top: 10px;
overflow: auto;
.details-data-title {
margin-bottom: 20px;
}
.expand-table {
position: relative;
padding-left: 44px;
}
}
.el-table__expanded-cell[class*='cell'] {
padding: 0;
}
.expand-table {
position: relative;
padding-left: 44px;
}
.expand-table::before {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
background: #f0fdfd;
width: 42px;
border-right: 2px #00a5a7 solid;
}
.el-radio-button:last-child .el-radio-button__inner,
.el-radio-button:first-child .el-radio-button__inner {
border-radius: 0;
}
.image-noData {
width: 100%;
height: 450px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
p {
font-size: 16px;
padding-top: 10px;
.expand-table::before {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
background: #f0fdfd;
width: 42px;
border-right: 2px #00a5a7 solid;
}
.el-radio-button:last-child .el-radio-button__inner,
.el-radio-button:first-child .el-radio-button__inner {
border-radius: 0;
}
.image-noData {
width: 100%;
height: 450px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
p {
font-size: 16px;
padding-top: 10px;
}
}
}
}
......
mindinsight/ui/src/views/train-manage/summary-manage.vue
浏览文件 @ 63d12fa9
......@@ -44,7 +44,8 @@ limitations under the License.
stripe
height="100%"
tooltip-effect="light"
class="list-el-table">
class="list-el-table"
ref="table">
<el-table-column width="50"
type=index
:label="$t('summaryManage.sorting')">
......@@ -132,12 +133,19 @@ export default {
data: null,
type: 0,
},
tableDom: null,
};
},
computed: {},
watch: {},
destroyed() {
window.removeEventListener('resize', this.closeMenu);
window.removeEventListener('mousewheel', this.closeMenu);
if (this.tableDom) {
this.tableDom.removeEventListener('scroll', this.closeMenu);
}
document.onclick = null;
document.onscroll = null;
},
activated() {},
mounted() {
......@@ -145,6 +153,12 @@ export default {
this.$nextTick(() => {
this.init();
});
setTimeout(() => {
window.addEventListener('resize', this.closeMenu, false);
window.addEventListener('mousewheel', this.closeMenu, false);
this.tableDom = this.$refs.table.bodyWrapper;
this.tableDom.addEventListener('scroll', this.closeMenu, false);
}, 300);
},
methods: {
......@@ -152,6 +166,9 @@ export default {
document.onclick = () => {
this.contextMenu.show = false;
};
document.onscroll = () => {
this.contextMenu.show = false;
};
const params = {
limit: this.pagination.pageSize,
......@@ -238,10 +255,13 @@ export default {
},
rightClick(row, event, type) {
const maxWidth = 175;
this.contextMenu.data = row;
this.contextMenu.type = type;
this.contextMenu.left = event.x + 'px';
this.contextMenu.top = event.y + 'px';
const width = document.getElementById('cl-summary-manage').clientWidth;
const left = Math.min(width - maxWidth, event.clientX + window.scrollX);
this.contextMenu.left = left + 'px';
this.contextMenu.top = event.clientY + window.scrollY + 'px';
this.contextMenu.show = true;
},
......@@ -277,6 +297,9 @@ export default {
window.open(routeUrl.href, '_blank');
}
},
closeMenu() {
this.contextMenu.show = false;
},
},
components: {},
};
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或