Skip to content

M
mindinsight

MindSpore / mindinsight

通知 8
Star 4
Fork 2
M
mindinsight
提交 dc7bbb8e 编写于 作者: M mindspore-ci-bot 提交者： Gitee
浏览文件
操作

!526 Traceability page, full data and sort button violent click event code processing optimization 

Merge pull request !526 from 秦君艳/databutton
上级 85032a3f 8e2dae56
隐藏空白更改
内联 并排
Showing with 202 addition and 160 deletion
mindinsight/ui/src/views/train-manage/data-traceback.vue
浏览文件 @ dc7bbb8e
...@@ -338,6 +338,9 @@ import Echarts from 'echarts'; ...@@ -338,6 +338,9 @@ import Echarts from 'echarts';
export default { export default {
data() { data() {
return { return {
tableSortTimer: null,
showAllTimer: null,
unhideTimer: null,
loading: true, loading: true,
errorData: true, errorData: true,
tagDialogShow: false, tagDialogShow: false,
...@@ -363,6 +366,7 @@ export default { ...@@ -363,6 +366,7 @@ export default {
recordsNumber: 0, recordsNumber: 0,
// Number of displayed records. // Number of displayed records.
showNumber: 0, showNumber: 0,
delayTime: 500,
selectArrayValue: [], selectArrayValue: [],
customizedColumnOptions: [], customizedColumnOptions: [],
// Set the type of customized // Set the type of customized
...@@ -852,37 +856,43 @@ export default { ...@@ -852,37 +856,43 @@ export default {
* Unhide * Unhide
*/ */
unhideRecords() { unhideRecords() {
this.showEchartPic = true; if (this.unhideTimer) {
this.$refs.table.clearSelection(); clearTimeout(this.unhideTimer);
if (this.parallelEchart) { this.unhideTimer = null;
this.parallelEchart.clear();
}
this.$store.commit('setHidenDirChecked', []);
if (this.hidenDirChecked.length) {
this.checkedSummary = [];
this.hidenDirChecked = [];
} }
this.checkOptions = []; this.unhideTimer = setTimeout(() => {
this.selectArrayValue = []; this.showEchartPic = true;
this.basearr = []; this.$refs.table.clearSelection();
const params = { if (this.parallelEchart) {
body: {}, this.parallelEchart.clear();
}; }
const tempParam = { this.$store.commit('setHidenDirChecked', []);
sorted_name: this.sortInfo.sorted_name, if (this.hidenDirChecked.length) {
sorted_type: this.sortInfo.sorted_type, this.checkedSummary = [];
}; this.hidenDirChecked = [];
this.summaryDirList = this.$store.state.summaryDirList; }
this.tableFilter.summary_dir = { this.checkOptions = [];
in: this.summaryDirList, this.selectArrayValue = [];
}; this.basearr = [];
params.body = Object.assign( const params = {
params.body, body: {},
this.chartFilter, };
tempParam, const tempParam = {
this.tableFilter, sorted_name: this.sortInfo.sorted_name,
); sorted_type: this.sortInfo.sorted_type,
this.queryLineagesData(params); };
this.summaryDirList = this.$store.state.summaryDirList;
this.tableFilter.summary_dir = {
in: this.summaryDirList,
};
params.body = Object.assign(
params.body,
this.chartFilter,
tempParam,
this.tableFilter,
);
this.queryLineagesData(params);
}, this.delayTime);
}, },
/** /**
* Input search filtering in the select module * Input search filtering in the select module
...@@ -1579,22 +1589,28 @@ export default { ...@@ -1579,22 +1589,28 @@ export default {
*/ */
echartShowAllData() { echartShowAllData() {
// The first page is displayed. // The first page is displayed.
this.initOver = false; if (this.showAllTimer) {
this.echartNoData = false; clearTimeout(this.showAllTimer);
this.showEchartPic = true; this.showAllTimer = null;
this.selectCheckAll = true;
// checkOptions initializate to an empty array
this.checkOptions = [];
this.selectArrayValue = [];
this.basearr = [];
this.pagination.currentPage = 1;
this.$store.commit('setSummaryDirList', undefined);
this.$store.commit('setSelectedBarList', []);
if (this.parallelEchart) {
this.parallelEchart.clear();
} }
this.$refs.table.clearSelection(); this.showAllTimer = setTimeout(() => {
this.init(); this.initOver = false;
this.echartNoData = false;
this.showEchartPic = true;
this.selectCheckAll = true;
// checkOptions initializate to an empty array
this.checkOptions = [];
this.selectArrayValue = [];
this.basearr = [];
this.pagination.currentPage = 1;
this.$store.commit('setSummaryDirList', undefined);
this.$store.commit('setSelectedBarList', []);
if (this.parallelEchart) {
this.parallelEchart.clear();
}
this.$refs.table.clearSelection();
this.init();
}, this.delayTime);
}, },
/** /**
...@@ -1649,25 +1665,31 @@ export default { ...@@ -1649,25 +1665,31 @@ export default {
* @param {Object} data * @param {Object} data
*/ */
tableSortChange(data) { tableSortChange(data) {
this.sortInfo.sorted_name = data.prop; if (this.tableSortTimer) {
this.sortInfo.sorted_type = data.order; clearTimeout(this.tableSortTimer);
const params = {}; this.tableSortTimer = null;
const tempParam = {
sorted_name: data.prop,
sorted_type: data.order,
};
this.checkOptions = [];
this.selectArrayValue = [];
this.basearr = [];
this.pagination.currentPage = 1;
this.summaryDirList = this.$store.state.summaryDirList;
if (this.summaryDirList) {
this.tableFilter.summary_dir = {in: this.summaryDirList};
} else {
this.tableFilter.summary_dir = undefined;
} }
params.body = Object.assign({}, tempParam, this.tableFilter); this.tableSortTimer = setTimeout(() => {
this.queryLineagesData(params); this.sortInfo.sorted_name = data.prop;
this.sortInfo.sorted_type = data.order;
const params = {};
const tempParam = {
sorted_name: data.prop,
sorted_type: data.order,
};
this.checkOptions = [];
this.selectArrayValue = [];
this.basearr = [];
this.pagination.currentPage = 1;
this.summaryDirList = this.$store.state.summaryDirList;
if (this.summaryDirList) {
this.tableFilter.summary_dir = {in: this.summaryDirList};
} else {
this.tableFilter.summary_dir = undefined;
}
params.body = Object.assign({}, tempParam, this.tableFilter);
this.queryLineagesData(params);
}, this.delayTime);
}, },
/** /**
...@@ -1946,6 +1968,9 @@ export default { ...@@ -1946,6 +1968,9 @@ export default {
* Destroy the page * Destroy the page
*/ */
destroyed() { destroyed() {
this.tableSortTimer = null;
this.showAllTimer = null;
this.unhideTimer = null;
if (this.dataCheckedSummary && this.dataCheckedSummary.length) { if (this.dataCheckedSummary && this.dataCheckedSummary.length) {
const summaryDirList = []; const summaryDirList = [];
this.dataCheckedSummary.forEach((item) => { this.dataCheckedSummary.forEach((item) => {
......
mindinsight/ui/src/views/train-manage/model-traceback.vue
浏览文件 @ dc7bbb8e
...@@ -365,6 +365,8 @@ export default { ...@@ -365,6 +365,8 @@ export default {
watch: {}, watch: {},
data() { data() {
return { return {
sortChangeTimer: null,
unhideRecordsTimer: null,
tagDialogShow: false, tagDialogShow: false,
errorData: true, errorData: true,
tagScope: {}, tagScope: {},
...@@ -375,6 +377,7 @@ export default { ...@@ -375,6 +377,7 @@ export default {
// Number of data records returned by the interface. // Number of data records returned by the interface.
recordsNumber: 0, recordsNumber: 0,
showNumber: 0, showNumber: 0,
delayTime: 500,
showEchartPic: true, showEchartPic: true,
hideRecord: false, hideRecord: false,
hidenDirChecked: [], hidenDirChecked: [],
...@@ -1430,58 +1433,64 @@ export default { ...@@ -1430,58 +1433,64 @@ export default {
* Unhide * Unhide
*/ */
unhideRecords() { unhideRecords() {
this.showEchartPic = true; if (this.unhideRecordsTimer) {
this.$refs.table.clearSelection(); clearTimeout(this.unhideRecordsTimer);
this.$store.commit('setHidenDirChecked', []); this.unhideRecordsTimer = null;
if (this.hidenDirChecked.length) {
this.checkedSummary = [];
this.hidenDirChecked = [];
} }
const params = { this.unhideRecordsTimer = setTimeout(() => {
body: {}, this.showEchartPic = true;
}; this.$refs.table.clearSelection();
const tempParam = { this.$store.commit('setHidenDirChecked', []);
sorted_name: this.sortInfo.sorted_name, if (this.hidenDirChecked.length) {
sorted_type: this.sortInfo.sorted_type, this.checkedSummary = [];
}; this.hidenDirChecked = [];
this.summaryDirList = this.$store.state.summaryDirList; }
this.tableFilter.summary_dir = { const params = {
in: this.summaryDirList, body: {},
}; };
params.body = Object.assign( const tempParam = {
params.body, sorted_name: this.sortInfo.sorted_name,
this.chartFilter, sorted_type: this.sortInfo.sorted_type,
tempParam, };
this.tableFilter, this.summaryDirList = this.$store.state.summaryDirList;
); this.tableFilter.summary_dir = {
RequestService.queryLineagesData(params).then( in: this.summaryDirList,
(res) => { };
if (res && res.data && res.data.object) { params.body = Object.assign(
this.errorData = false; params.body,
const list = this.setDataOfModel(res.data.object); this.chartFilter,
this.echart.allData = list; tempParam,
this.echart.brushData = list; this.tableFilter,
this.echart.showData = this.echart.brushData; );
this.$nextTick(() => { RequestService.queryLineagesData(params).then(
this.resizeChart(); (res) => {
this.initChart(); if (res && res.data && res.data.object) {
}); this.errorData = false;
const showList = list.slice( const list = this.setDataOfModel(res.data.object);
(this.pagination.currentPage - 1) * this.pagination.pageSize, this.echart.allData = list;
this.pagination.currentPage * this.pagination.pageSize, this.echart.brushData = list;
); this.echart.showData = this.echart.brushData;
this.table.data = showList; this.$nextTick(() => {
this.recordsNumber = this.table.data.length; this.resizeChart();
this.showNumber = this.table.data.length; this.initChart();
this.pagination.total = res.data.count || 0; });
} else { const showList = list.slice(
(this.pagination.currentPage - 1) * this.pagination.pageSize,
this.pagination.currentPage * this.pagination.pageSize,
);
this.table.data = showList;
this.recordsNumber = this.table.data.length;
this.showNumber = this.table.data.length;
this.pagination.total = res.data.count || 0;
} else {
this.errorData = true;
}
},
(error) => {
this.errorData = true; this.errorData = true;
} },
}, );
(error) => { }, this.delayTime);
this.errorData = true;
},
);
}, },
/** /**
...@@ -1489,56 +1498,62 @@ export default { ...@@ -1489,56 +1498,62 @@ export default {
* @param {Object} column current column * @param {Object} column current column
*/ */
sortChange(column) { sortChange(column) {
this.sortInfo.sorted_name = column.prop; if (this.sortChangeTimer) {
this.sortInfo.sorted_type = column.order; clearTimeout(this.sortChangeTimer);
this.recordsNumber = 0; this.sortChangeTimer = null;
this.showNumber = 0; }
this.getStoreList(); this.sortChangeTimer = setTimeout(() => {
const tempParam = { this.sortInfo.sorted_name = column.prop;
limit: this.pagination.pageSize, this.sortInfo.sorted_type = column.order;
offset: 0, this.recordsNumber = 0;
sorted_name: this.sortInfo.sorted_name, this.showNumber = 0;
sorted_type: this.sortInfo.sorted_type, this.getStoreList();
}; const tempParam = {
const params = {}; limit: this.pagination.pageSize,
params.body = Object.assign( offset: 0,
{}, sorted_name: this.sortInfo.sorted_name,
tempParam, sorted_type: this.sortInfo.sorted_type,
this.tableFilter, };
this.chartFilter || {}, const params = {};
); params.body = Object.assign(
RequestService.queryLineagesData(params) {},
.then( tempParam,
(res) => { this.tableFilter,
if (res && res.data && res.data.object) { this.chartFilter || {},
this.errorData = false; );
const list = this.setDataOfModel(res.data.object); RequestService.queryLineagesData(params)
const tempList = list.slice(0, this.pagination.pageSize); .then(
this.recordsNumber = tempList.length; (res) => {
if (this.hidenDirChecked.length) { if (res && res.data && res.data.object) {
this.hidenDirChecked.forEach((dir) => { this.errorData = false;
tempList.forEach((item, index) => { const list = this.setDataOfModel(res.data.object);
if (item.summary_dir === dir) { const tempList = list.slice(0, this.pagination.pageSize);
tempList.splice(index, 1); this.recordsNumber = tempList.length;
} if (this.hidenDirChecked.length) {
this.hidenDirChecked.forEach((dir) => {
tempList.forEach((item, index) => {
if (item.summary_dir === dir) {
tempList.splice(index, 1);
}
});
}); });
}); }
this.showNumber = tempList.length;
this.table.data = tempList;
this.pagination.total = res.data.count || 0;
this.pagination.currentPage = 1;
} else {
this.errorData = true;
} }
this.showNumber = tempList.length; },
this.table.data = tempList; (error) => {
this.pagination.total = res.data.count || 0;
this.pagination.currentPage = 1;
} else {
this.errorData = true; this.errorData = true;
} },
}, )
(error) => { .catch(() => {
this.errorData = true; this.errorData = true;
}, });
) }, this.delayTime);
.catch(() => {
this.errorData = true;
});
}, },
/** /**
...@@ -1986,6 +2001,8 @@ export default { ...@@ -1986,6 +2001,8 @@ export default {
* Destroy the page * Destroy the page
*/ */
destroyed() { destroyed() {
this.sortChangeTimer = null;
this.unhideRecordsTimer = null;
if (this.checkedSummary.length) { if (this.checkedSummary.length) {
const tempList = []; const tempList = [];
this.checkedSummary.forEach((item) => { this.checkedSummary.forEach((item) => {
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或