Skip to content

M
mindinsight

MindSpore / mindinsight

通知 8
Star 4
Fork 2
M
mindinsight
提交 10bf1b3a 编写于 作者: W WeiFeng-mindinsight
浏览文件
操作

fix profiling issues I1SQM6 I1SQMI I1SL3D

上级 3cfb8e72
显示空白变更内容
内联 并排
Showing with 571 addition and 435 deletion
mindinsight/ui/src/locales/en-us.json
浏览文件 @ 10bf1b3a
...@@ -232,10 +232,10 @@ ...@@ -232,10 +232,10 @@
"card": " ", "card": " ",
"searchByType": "Enter operator type", "searchByType": "Enter operator type",
"searchByName": "Enter operator name", "searchByName": "Enter operator name",
"operatorInfo":"Operator", "operatorInfo": "Operator",
"kernelInfo":"Kernel", "kernelInfo": "Kernel",
"searchByCoreName":"Enter kernel name", "searchByCoreName": "Enter kernel name",
"searchByCoreFullName":"Enter operator full name" "searchByCoreFullName": "Enter operator full name"
}, },
"profiling": { "profiling": {
"profilingDashboard": "Profiling Dashboard", "profilingDashboard": "Profiling Dashboard",
...@@ -392,8 +392,10 @@ ...@@ -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.", "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." "content32": "You can also locate an operator and view and analyze its execution time."
}, },
"countUnit": "times",
"unit": "ms/time", "unit": "ms/time",
"gpuunit": "us/time" "gpuunit": "us/time",
"chartTitle": "Average Time Consumption Ranking"
}, },
"hardwareVisual": { "hardwareVisual": {
"processor": "Ascend AI Processor", "processor": "Ascend AI Processor",
...@@ -449,7 +451,7 @@ ...@@ -449,7 +451,7 @@
"gridAccuracy": "Decimal places are reserved.", "gridAccuracy": "Decimal places are reserved.",
"inCorrectInput": "Invalid input.", "inCorrectInput": "Invalid input.",
"gridTableNoData": "No data in the table.", "gridTableNoData": "No data in the table.",
"cache":"CACHING" "cache": "CACHING"
}, },
"error": { "error": {
"50540000": "System error.", "50540000": "System error.",
......
mindinsight/ui/src/locales/zh-cn.json
浏览文件 @ 10bf1b3a
...@@ -391,8 +391,10 @@ ...@@ -391,8 +391,10 @@
"content31": "您可以通过时间线信息分析流切分方法是否合理、迭代间隙和拖尾时间是否过长等；", "content31": "您可以通过时间线信息分析流切分方法是否合理、迭代间隙和拖尾时间是否过长等；",
"content32": "也可以具体定位到某个算子，查看分析它的执行时间。" "content32": "也可以具体定位到某个算子，查看分析它的执行时间。"
}, },
"countUnit": "次",
"unit": "ms/次", "unit": "ms/次",
"gpuunit": "us/次" "gpuunit": "us/次",
"chartTitle": "平均耗时排行"
}, },
"hardwareVisual": { "hardwareVisual": {
"processor": "昇腾AI处理器", "processor": "昇腾AI处理器",
...@@ -428,14 +430,14 @@ ...@@ -428,14 +430,14 @@
"availableFree": "芯片空闲", "availableFree": "芯片空闲",
"availableBusy": "芯片已被占用或不可用", "availableBusy": "芯片已被占用或不可用",
"failQueryChip": "芯片信息查询有误", "failQueryChip": "芯片信息查询有误",
"name":"名称", "name": "名称",
"npu":"编号", "npu": "编号",
"available":"是否空闲", "available": "是否空闲",
"health":"健康状态", "health": "健康状态",
"ipAddress":"IP 地址", "ipAddress": "IP 地址",
"hbmUsage":"已用HBM内存(MB)", "hbmUsage": "已用HBM内存(MB)",
"power":"功率(W)", "power": "功率(W)",
"temp":"温度(℃)" "temp": "温度(℃)"
}, },
"components": { "components": {
"summaryTitle": "训练选择", "summaryTitle": "训练选择",
...@@ -448,7 +450,7 @@ ...@@ -448,7 +450,7 @@
"gridAccuracy": "保留小数位", "gridAccuracy": "保留小数位",
"inCorrectInput": "无效输入", "inCorrectInput": "无效输入",
"gridTableNoData": "表格无数据", "gridTableNoData": "表格无数据",
"cache":"正在加载" "cache": "正在加载"
}, },
"error": { "error": {
"50540000": "系统错误", "50540000": "系统错误",
......
mindinsight/ui/src/views/profiling-gpu/operator.vue
浏览文件 @ 10bf1b3a
...@@ -25,6 +25,7 @@ limitations under the License. ...@@ -25,6 +25,7 @@ limitations under the License.
:class="{fullScreen:fullScreen}" :class="{fullScreen:fullScreen}"
v-if="operatorCharts.data.length"> v-if="operatorCharts.data.length">
<div> <div>
<div class="chart-title">{{$t('profiling.chartTitle')}}</div>
<el-radio-group class="chart-radio-group" <el-radio-group class="chart-radio-group"
v-model="operatorCharts.type" v-model="operatorCharts.type"
@change="operatorChartChange" @change="operatorChartChange"
...@@ -99,13 +100,14 @@ limitations under the License. ...@@ -99,13 +100,14 @@ limitations under the License.
:property="ele" :property="ele"
:key="key" :key="key"
:sortable="ele === 'op_info' ? false : 'custom'" :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"> <template slot="header">
<div class="custom-label" <div class="custom-label"
:title="(ele==='op_total_time'||ele==='op_avg_time'||ele==='cuda_activity_cost_time') :title="getHeaderField(ele)">
?`${ele} (${$t('profiling.gpuunit')})`:ele"> {{getHeaderField(ele)}}
{{(ele==='op_total_time'||ele==='op_avg_time'||ele==='cuda_activity_cost_time')
?`${ele} (${$t('profiling.gpuunit')})`:ele}}
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
...@@ -126,8 +128,8 @@ limitations under the License. ...@@ -126,8 +128,8 @@ limitations under the License.
sortable> sortable>
<template slot="header"> <template slot="header">
<div class="custom-label" <div class="custom-label"
:title="(item==='total_time'||item==='avg_time')?`${item} (${$t('profiling.gpuunit')})`:item"> :title="getHeaderField(item)">
{{(item==='total_time'||item==='avg_time')?`${item} (${$t('profiling.gpuunit')})`:item}} {{getHeaderField(item)}}
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
...@@ -144,13 +146,14 @@ limitations under the License. ...@@ -144,13 +146,14 @@ limitations under the License.
:property="item" :property="item"
:key="$index" :key="$index"
:sortable="item === 'op_info' ? false : 'custom'" :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"> <template slot="header">
<div class="custom-label" <div class="custom-label"
:title="(item==='op_total_time'||item==='op_avg_time'||item==='cuda_activity_cost_time') :title="getHeaderField(item)">
?`${item} (${$t('profiling.gpuunit')})`:item"> {{getHeaderField(item)}}
{{(item==='op_total_time'||item==='op_avg_time'||item==='cuda_activity_cost_time')
?`${item} (${$t('profiling.gpuunit')})`:item}}
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
...@@ -180,6 +183,7 @@ limitations under the License. ...@@ -180,6 +183,7 @@ limitations under the License.
:class="{fullScreen:fullScreenKernel}" :class="{fullScreen:fullScreenKernel}"
v-if="coreCharts.data.length"> v-if="coreCharts.data.length">
<div> <div>
<div class="chart-title">{{$t('profiling.chartTitle')}}</div>
</div> </div>
<div class="cl-profiler-echarts"> <div class="cl-profiler-echarts">
<div class <div class
...@@ -225,13 +229,14 @@ limitations under the License. ...@@ -225,13 +229,14 @@ limitations under the License.
:property="item" :property="item"
:key="$index" :key="$index"
sortable="custom" 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"> <template slot="header">
<div class="custom-label" <div class="custom-label"
:title="(item==='total_duration'||item==='avg_duration'||item==='max_duration' :title="getHeaderField(item)">
|| item==='min_duration')?`${item} (${$t('profiling.gpuunit')})`:item"> {{getHeaderField(item)}}
{{(item==='total_duration'||item==='avg_duration'||item==='max_duration'||item==='min_duration')
?`${item} (${$t('profiling.gpuunit')})`:item}}
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
...@@ -363,6 +368,29 @@ export default { ...@@ -363,6 +368,29 @@ export default {
this.$bus.$off('collapse'); this.$bus.$off('collapse');
}, },
methods: { 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() { resizeEchart() {
if (this.operatorCharts.chartDom) { if (this.operatorCharts.chartDom) {
setTimeout(() => { setTimeout(() => {
...@@ -400,7 +428,16 @@ export default { ...@@ -400,7 +428,16 @@ export default {
this.getCoreList(true); 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(() => { this.$nextTick(() => {
const item = this.$refs['expandChild']; const item = this.$refs['expandChild'];
if (item && this.curActiveRow.rowItem) { if (item && this.curActiveRow.rowItem) {
...@@ -856,6 +893,8 @@ export default { ...@@ -856,6 +893,8 @@ export default {
setOption(chart) { setOption(chart) {
const option = {}; const option = {};
const maxLabelLength = 20; const maxLabelLength = 20;
const maxTooltipLen = 50;
if (!chart.type) { if (!chart.type) {
option.legend = { option.legend = {
data: [], data: [],
...@@ -871,17 +910,25 @@ export default { ...@@ -871,17 +910,25 @@ export default {
: chart.data[i].name; : chart.data[i].name;
legendStr = `{a|${i + 1}}{b|${name} ${chart.data[ legendStr = `{a|${i + 1}}{b|${name} ${chart.data[
i i
].value.toFixed(3)}}\n{c|${ ].value.toFixed(3)}}\n{c|}`;
chart.data[i].percent
? chart.data[i].percent.toFixed(2) + '%'
: ''
}}`;
} }
} }
return legendStr; return legendStr;
}, },
tooltip: { tooltip: {
show: true, 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, itemWidth: 18,
itemHeight: 18, itemHeight: 18,
...@@ -912,7 +959,16 @@ export default { ...@@ -912,7 +959,16 @@ export default {
option.tooltip = { option.tooltip = {
trigger: 'item', trigger: 'item',
formatter: (params) => { 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, confine: true,
}; };
...@@ -1049,26 +1105,24 @@ export default { ...@@ -1049,26 +1105,24 @@ export default {
<style lang="scss"> <style lang="scss">
.operator { .operator {
height: 100%; height: 100%;
} .clear {
.clear {
clear: both; clear: both;
} }
.el-tabs__item { .el-tabs__item {
color: #6c7280; color: #6c7280;
font-size: 16px;
line-height: 36px; line-height: 36px;
height: 36px; height: 36px;
} }
.el-tabs__item.is-active { .el-tabs__item.is-active {
color: #00a5a7; color: #00a5a7;
font-weight: bold; font-weight: bold;
} }
.operator-title { .operator-title {
padding: 0 15px; padding: 0 15px;
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
} }
.cl-profiler { .cl-profiler {
height: calc(100% - 21px); height: calc(100% - 21px);
overflow-y: auto; overflow-y: auto;
width: 100%; width: 100%;
...@@ -1099,6 +1153,10 @@ export default { ...@@ -1099,6 +1153,10 @@ export default {
} }
.cl-profiler-top { .cl-profiler-top {
height: 45%; height: 45%;
.chart-title {
float: left;
font-weight: bold;
}
} }
.cl-profiler-top.fullScreen { .cl-profiler-top.fullScreen {
display: none; display: none;
...@@ -1137,13 +1195,13 @@ export default { ...@@ -1137,13 +1195,13 @@ export default {
} }
.core-tab { .core-tab {
.cl-profiler-top { .cl-profiler-top {
height: calc(45% - 40px); height: 45%;
} }
.cl-profiler-bottom { .cl-profiler-bottom {
height: calc(55% + 40px); height: 55%;
} }
.cl-profiler-echarts { .cl-profiler-echarts {
height: 100%; height: calc(100% - 32px);
} }
.cl-profiler-bottom.fullScreen { .cl-profiler-bottom.fullScreen {
height: 100%; height: 100%;
...@@ -1270,5 +1328,6 @@ export default { ...@@ -1270,5 +1328,6 @@ export default {
padding-top: 10px; padding-top: 10px;
} }
} }
}
} }
</style> </style>
mindinsight/ui/src/views/profiling/data-process.vue
浏览文件 @ 10bf1b3a
...@@ -1293,7 +1293,7 @@ export default { ...@@ -1293,7 +1293,7 @@ export default {
.md-wrap { .md-wrap {
height: 100%; height: 100%;
background: #fff; background: #fff;
padding: 0 32px; padding: 0 16px;
.title { .title {
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
...@@ -1308,6 +1308,10 @@ export default { ...@@ -1308,6 +1308,10 @@ export default {
height: 100%; height: 100%;
} }
} }
.el-tabs__item.is-active {
color: #00a5a7;
font-weight: bold;
}
.md-top { .md-top {
height: 20%; height: 20%;
font-size: 0; font-size: 0;
......
mindinsight/ui/src/views/profiling/operator.vue
浏览文件 @ 10bf1b3a
...@@ -25,6 +25,7 @@ limitations under the License. ...@@ -25,6 +25,7 @@ limitations under the License.
:class="{fullScreen:fullScreen}" :class="{fullScreen:fullScreen}"
v-if="coreCharts.data.length"> v-if="coreCharts.data.length">
<div> <div>
<div class="chart-title">{{$t('profiling.chartTitle')}}</div>
<el-radio-group class="chart-radio-group" <el-radio-group class="chart-radio-group"
v-model="coreCharts.type" v-model="coreCharts.type"
@change="coreChartChange" @change="coreChartChange"
...@@ -105,8 +106,8 @@ limitations under the License. ...@@ -105,8 +106,8 @@ limitations under the License.
show-overflow-tooltip> show-overflow-tooltip>
<template slot="header"> <template slot="header">
<div class="custom-label" <div class="custom-label"
:title="ele==='avg_execution_time'?`${ele} (${$t('profiling.unit')})`:ele"> :title="getHeaderField(ele)">
{{ele==='avg_execution_time'?`${ele} (${$t('profiling.unit')})`:ele}} {{getHeaderField(ele)}}
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
...@@ -127,8 +128,8 @@ limitations under the License. ...@@ -127,8 +128,8 @@ limitations under the License.
sortable> sortable>
<template slot="header"> <template slot="header">
<div class="custom-label" <div class="custom-label"
:title="item==='execution_time'?`${item} (${$t('profiling.unit')})`:item"> :title="getHeaderField(item)">
{{item==='execution_time'?`${item} (${$t('profiling.unit')})`:item}} {{getHeaderField(item)}}
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
...@@ -151,8 +152,8 @@ limitations under the License. ...@@ -151,8 +152,8 @@ limitations under the License.
show-overflow-tooltip> show-overflow-tooltip>
<template slot="header"> <template slot="header">
<div class="custom-label" <div class="custom-label"
:title="item==='avg_execution_time'?`${item} (${$t('profiling.unit')})`:item"> :title="getHeaderField(item)">
{{item==='avg_execution_time'?`${item} (${$t('profiling.unit')})`:item}} {{getHeaderField(item)}}
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
...@@ -209,10 +210,8 @@ limitations under the License. ...@@ -209,10 +210,8 @@ limitations under the License.
show-overflow-tooltip> show-overflow-tooltip>
<template slot="header"> <template slot="header">
<div class="custom-label" <div class="custom-label"
:title="(item==='total_time' || item==='dispatch_time')? :title="getHeaderField(item)">
`${item} (${$t('profiling.unit')})`:item"> {{getHeaderField(item)}}
{{(item==='total_time' || item==='dispatch_time')?
`${item} (${$t('profiling.unit')})`:item}}
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
...@@ -359,6 +358,19 @@ export default { ...@@ -359,6 +358,19 @@ export default {
this.$bus.$off('collapse'); this.$bus.$off('collapse');
}, },
methods: { 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() { resizeEchart() {
if (this.coreCharts.chartDom) { if (this.coreCharts.chartDom) {
setTimeout(() => { setTimeout(() => {
...@@ -387,7 +399,15 @@ export default { ...@@ -387,7 +399,15 @@ export default {
this.getCpuList(true); 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(() => { this.$nextTick(() => {
const item = this.$refs['expandChild']; const item = this.$refs['expandChild'];
if (item && this.curActiveRow.rowItem) { if (item && this.curActiveRow.rowItem) {
...@@ -837,6 +857,8 @@ export default { ...@@ -837,6 +857,8 @@ export default {
setOption(chart) { setOption(chart) {
const option = {}; const option = {};
const maxLabelLength = 20; const maxLabelLength = 20;
const maxTooltipLen = 50;
if (!chart.type) { if (!chart.type) {
option.legend = { option.legend = {
data: [], data: [],
...@@ -859,6 +881,18 @@ export default { ...@@ -859,6 +881,18 @@ export default {
}, },
tooltip: { tooltip: {
show: true, 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, itemWidth: 18,
itemHeight: 18, itemHeight: 18,
...@@ -889,7 +923,16 @@ export default { ...@@ -889,7 +923,16 @@ export default {
option.tooltip = { option.tooltip = {
trigger: 'item', trigger: 'item',
formatter: (params) => { 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, confine: true,
}; };
...@@ -1101,26 +1144,24 @@ export default { ...@@ -1101,26 +1144,24 @@ export default {
<style lang="scss"> <style lang="scss">
.operator { .operator {
height: 100%; height: 100%;
} .clear {
.clear {
clear: both; clear: both;
} }
.el-tabs__item { .el-tabs__item {
color: #6c7280; color: #6c7280;
font-size: 16px;
line-height: 36px; line-height: 36px;
height: 36px; height: 36px;
} }
.el-tabs__item.is-active { .el-tabs__item.is-active {
color: #00a5a7; color: #00a5a7;
font-weight: bold; font-weight: bold;
} }
.operator-title { .operator-title {
padding: 0 15px; padding: 0 15px;
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
} }
.cl-profiler { .cl-profiler {
height: calc(100% - 21px); height: calc(100% - 21px);
overflow-y: auto; overflow-y: auto;
width: 100%; width: 100%;
...@@ -1151,6 +1192,10 @@ export default { ...@@ -1151,6 +1192,10 @@ export default {
} }
.cl-profiler-top { .cl-profiler-top {
height: 45%; height: 45%;
.chart-title {
float: left;
font-weight: bold;
}
} }
.cl-profiler-top.fullScreen { .cl-profiler-top.fullScreen {
display: none; display: none;
...@@ -1322,5 +1367,6 @@ export default { ...@@ -1322,5 +1367,6 @@ export default {
padding-top: 10px; padding-top: 10px;
} }
} }
}
} }
</style> </style>
mindinsight/ui/src/views/train-manage/summary-manage.vue
浏览文件 @ 10bf1b3a
...@@ -44,7 +44,8 @@ limitations under the License. ...@@ -44,7 +44,8 @@ limitations under the License.
stripe stripe
height="100%" height="100%"
tooltip-effect="light" tooltip-effect="light"
class="list-el-table"> class="list-el-table"
ref="table">
<el-table-column width="50" <el-table-column width="50"
type=index type=index
:label="$t('summaryManage.sorting')"> :label="$t('summaryManage.sorting')">
...@@ -132,12 +133,19 @@ export default { ...@@ -132,12 +133,19 @@ export default {
data: null, data: null,
type: 0, type: 0,
}, },
tableDom: null,
}; };
}, },
computed: {}, computed: {},
watch: {}, watch: {},
destroyed() { destroyed() {
window.removeEventListener('resize', this.closeMenu);
window.removeEventListener('mousewheel', this.closeMenu);
if (this.tableDom) {
this.tableDom.removeEventListener('scroll', this.closeMenu);
}
document.onclick = null; document.onclick = null;
document.onscroll = null;
}, },
activated() {}, activated() {},
mounted() { mounted() {
...@@ -145,6 +153,12 @@ export default { ...@@ -145,6 +153,12 @@ export default {
this.$nextTick(() => { this.$nextTick(() => {
this.init(); 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: { methods: {
...@@ -152,6 +166,9 @@ export default { ...@@ -152,6 +166,9 @@ export default {
document.onclick = () => { document.onclick = () => {
this.contextMenu.show = false; this.contextMenu.show = false;
}; };
document.onscroll = () => {
this.contextMenu.show = false;
};
const params = { const params = {
limit: this.pagination.pageSize, limit: this.pagination.pageSize,
...@@ -238,10 +255,13 @@ export default { ...@@ -238,10 +255,13 @@ export default {
}, },
rightClick(row, event, type) { rightClick(row, event, type) {
const maxWidth = 175;
this.contextMenu.data = row; this.contextMenu.data = row;
this.contextMenu.type = type; this.contextMenu.type = type;
this.contextMenu.left = event.x + 'px'; const width = document.getElementById('cl-summary-manage').clientWidth;
this.contextMenu.top = event.y + 'px'; 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; this.contextMenu.show = true;
}, },
...@@ -277,6 +297,9 @@ export default { ...@@ -277,6 +297,9 @@ export default {
window.open(routeUrl.href, '_blank'); window.open(routeUrl.href, '_blank');
} }
}, },
closeMenu() {
this.contextMenu.show = false;
},
}, },
components: {}, components: {},
}; };
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或