-
@@ -131,6 +339,72 @@ export default {
watch: {},
data() {
return {
+ iconValue: 0,
+ imageList: [
+ {
+ number: 1,
+ iconAdd: require('@/assets/images/icon1.svg'),
+ },
+ {
+ number: 2,
+ iconAdd: require('@/assets/images/icon2.svg'),
+ },
+ {
+ number: 3,
+ iconAdd: require('@/assets/images/icon3.svg'),
+ },
+ {
+ number: 4,
+ iconAdd: require('@/assets/images/icon4.svg'),
+ },
+ {
+ number: 5,
+ iconAdd: require('@/assets/images/icon5.svg'),
+ },
+ {
+ number: 6,
+ iconAdd: require('@/assets/images/icon6.svg'),
+ },
+ {
+ number: 7,
+ iconAdd: require('@/assets/images/icon7.svg'),
+ },
+ {
+ number: 8,
+ iconAdd: require('@/assets/images/icon8.svg'),
+ },
+ {
+ number: 9,
+ iconAdd: require('@/assets/images/icon9.svg'),
+ },
+ {
+ number: 10,
+ iconAdd: require('@/assets/images/icon10.svg'),
+ },
+ ],
+ // Select all
+ selectCheckAll: true,
+ // Number of data records returned by the interface.
+ recordsNumber: 0,
+ showNumber: 0,
+ showEchartPic: true,
+ hideRecord: false,
+ hidenDirChecked: [],
+ beforeEditValue: '',
+ keyWord: '',
+ basearr: [],
+ labelObj: {metric: '', userDefined: ''},
+ userOptions: [],
+ metricOptions: [],
+ hyperOptions: [],
+ otherTypeOptions: [],
+ checkOptions: [],
+ selectArrayValue: [],
+ // metric list
+ metricList: [],
+ userDefinedList: [],
+ hyperList: [],
+ summaryList: [],
table: {},
summaryDirList: undefined,
text: this.$t('modelTraceback.summaryPath'),
@@ -180,6 +454,7 @@ export default {
computed: {},
mounted() {
document.title = this.$t('summaryManage.modelTraceback') + '-MindInsight';
+ document.addEventListener('click', this.blurFloat, true);
this.$store.commit('setSelectedBarList', []);
this.getStoreList();
this.pagination.pageChange = (page) => {
@@ -191,6 +466,280 @@ export default {
});
},
methods: {
+ blurFloat(event) {
+ const domArr = document.querySelectorAll('.icon-dialog');
+ const isActiveDom = event.path.some((item) => {
+ return item.className === 'icon-dialog';
+ });
+ if (!isActiveDom) {
+ domArr.forEach((item) => {
+ item.style.display = 'none';
+ });
+ }
+ },
+
+ /**
+ * Display of the icon dialog box
+ * @param {Object} row
+ */
+ showAllIcon(row) {
+ this.iconValue = 0;
+ if (row.showIcon) {
+ row.showIcon = false;
+ const classArr = document.querySelectorAll('.icon-border');
+
+ classArr.forEach((item) => {
+ item.classList.remove('icon-border');
+ });
+ return;
+ }
+ row.showIcon = true;
+ const e = window.event;
+ document.getElementById('icon-dialog').style.top = e.clientY + 'px';
+ },
+
+ /**
+ * icon value change
+ * @param {Object} row
+ * @param {Number} num
+ * @param {Object} event
+ */
+ iconValueChange(row, num, event) {
+ const classWrap = event.path.find((item) => {
+ return item.className === 'icon-dialog';
+ });
+ const classArr = classWrap.querySelectorAll('.icon-border');
+ classArr.forEach((item) => {
+ item.classList.remove('icon-border');
+ });
+ const htmDom = event.path.find((item) => {
+ return item.nodeName === 'DIV';
+ });
+ htmDom.classList.add('icon-border');
+ this.iconValue = num;
+ },
+ /**
+ * Save the modification of the icon.
+ * @param {Object} row
+ */
+ iconChangeSave(row) {
+ row.showIcon = false;
+ if (row.tag == this.iconValue || this.iconValue == 0) {
+ return;
+ }
+ row.tag = this.iconValue;
+ const id = row.summary_dir;
+ document.getElementById(id).src = require('@/assets/images/icon' +
+ this.iconValue +
+ '.svg');
+ const params = {
+ train_id: row.summary_dir,
+ body: {
+ tag: row.tag,
+ },
+ };
+ this.putChangeToLineagesData(params);
+ },
+ // clear icon
+ clearIcon(row) {
+ row.showIcon = false;
+ this.iconValue = 0;
+ row.tag = 0;
+ const params = {
+ train_id: row.summary_dir,
+ body: {
+ tag: row.tag,
+ },
+ };
+ this.putChangeToLineagesData(params);
+ },
+ /**
+ * cancel save
+ * @param {Object} row
+ */
+ cancelChangeIcon(row) {
+ const classArr = document.querySelectorAll('.icon-border');
+ classArr.forEach((item) => {
+ item.classList.remove('icon-border');
+ });
+ row.showIcon = false;
+ },
+
+ /**
+ * Select all
+ */
+ allSelect() {
+ if (this.selectCheckAll) {
+ return;
+ }
+ this.selectArrayValue = [];
+ this.checkOptions.forEach((item) => {
+ item.options.forEach((option) => {
+ this.selectArrayValue.push(option.label);
+ });
+ });
+ this.selectCheckAll = !this.selectCheckAll;
+ let allList = [];
+ const listA = [this.$t('modelTraceback.summaryPath')];
+ allList = this.selectArrayValue.concat(listA);
+ // Set selected of the column data in the table to false;
+ Object.keys(this.table.columnOptions).filter((i) => {
+ this.table.columnOptions[i].selected = false;
+ });
+ allList.forEach((item) => {
+ Object.keys(this.table.columnOptions).filter((i) => {
+ const labelValue = this.table.columnOptions[i].label;
+ if (labelValue == item) {
+ this.table.columnOptions[i].selected = true;
+ }
+ });
+ });
+ this.initChart();
+ this.initColumm();
+ this.$nextTick(() => {
+ this.$refs.table.doLayout();
+ });
+ },
+
+ /**
+ * deselect all
+ */
+ deselectAll() {
+ this.selectArrayValue = [];
+ this.checkOptions.forEach((item) => {
+ item.options.forEach((option) => {
+ if (option.disabled) {
+ this.selectArrayValue.push(option.label);
+ }
+ });
+ });
+ this.selectCheckAll = false;
+ let allList = [];
+ const listA = [this.$t('modelTraceback.summaryPath')];
+ allList = this.selectArrayValue.concat(listA);
+ // Set selected to false for these columns in the table.
+ Object.keys(this.table.columnOptions).filter((i) => {
+ this.table.columnOptions[i].selected = false;
+ });
+ allList.forEach((item) => {
+ Object.keys(this.table.columnOptions).filter((i) => {
+ const labelValue = this.table.columnOptions[i].label;
+ if (labelValue == item) {
+ this.table.columnOptions[i].selected = true;
+ }
+ });
+ });
+ this.initChart();
+ this.initColumm();
+ },
+ /**
+ * Edit remarks
+ * @param {Object} row
+ */
+ editRemarks(row) {
+ row.editShow = false;
+ row.isError = false;
+ this.beforeEditValue = row.remark;
+ },
+
+ /**
+ * Save remarks
+ * @param {Object} row
+ */
+ saveRemarksValue(row) {
+ const tagValidation = new RegExp('^[a-zA-Z0-9\u4e00-\u9fa5_.-]{1,128}$');
+ const result = row.remark.length ? tagValidation.test(row.remark) : true;
+ if (result) {
+ row.isError = false;
+ row.editShow = true;
+ const params = {
+ train_id: row.summary_dir,
+ body: {
+ remark: row.remark,
+ },
+ };
+ this.putChangeToLineagesData(params);
+ } else {
+ row.isError = true;
+ }
+ },
+
+ /**
+ * Cancel save editing
+ * @param {Object} row
+ */
+ cancelRemarksValue(row) {
+ row.editShow = true;
+ row.remark = this.beforeEditValue;
+ row.isError = false;
+ },
+
+ /**
+ *After the remark or tag is modified, invoke the interface and save the modification.
+ * @param {Object} params
+ */
+ putChangeToLineagesData(params) {
+ RequestService.putLineagesData(params)
+ .then(
+ (res) => {
+ if (res) {
+ this.$message.success(this.$t('modelTraceback.changeSuccess'));
+ }
+ },
+ (error) => {},
+ )
+ .catch(() => {});
+ },
+
+ selectinputFocus() {
+ this.keyWord = '';
+ this.checkOptions = this.basearr;
+ },
+ /**
+ * Input search filtering in the select module.
+ */
+ myfilter() {
+ const queryString = this.keyWord;
+ const restaurants = this.basearr;
+ const results = queryString
+ ? this.createFilter(queryString, restaurants)
+ : restaurants;
+ this.checkOptions = results;
+ },
+
+ /**
+ *Input search filtering in the select module.
+ * @param {String} queryString
+ * @param {Array} restaurants
+ * @return {Array}
+ */
+ createFilter(queryString, restaurants) {
+ const list = [];
+ restaurants.forEach((item) => {
+ const object = {};
+ const options = [];
+ if (item.options) {
+ item.options.forEach((item) => {
+ if (
+ item.label.toLowerCase().indexOf(queryString.toLowerCase()) >= 0
+ ) {
+ const tempObj = {};
+ tempObj.label = item.label;
+ tempObj.value = item.value;
+ tempObj.disabled = item.disabled;
+ options.push(tempObj);
+ }
+ });
+ }
+ if (options.length > 0) {
+ object.label = item.label;
+ object.options = options;
+ list.push(object);
+ }
+ });
+ return list;
+ },
+
getStoreList() {
this.summaryDirList = this.$store.state.summaryDirList;
if (this.summaryDirList) {
@@ -261,10 +810,11 @@ export default {
required: false,
},
}, // All options of the column in the table
- column: [], // Table Column
+ otherColumn: [], // Table Column
mandatoryColumn: [], // Mandatory Table Column
optionalColumn: [], // Optional Table Column
data: [],
+ // no checked list
optionsNotInCheckbox: [
'summary_dir',
'train_dataset_path',
@@ -281,12 +831,33 @@ export default {
indeterminate: false,
};
this.keysOfMixed = [];
+
+ this.userOptions = [];
+ this.metricOptions = [];
+ // metric list
+ this.metricList = [];
+ // User-defined list
+ this.userDefinedList = [];
+ // hyper list
+ this.hyperList = [];
+ this.summaryList = [];
+ this.hyperOptions = [];
+ this.otherTypeOptions = [];
+ this.checkOptions = [];
+ this.selectArrayValue = [];
+ // Obtain the hidden summary_dir list after initialization.
+ this.hidenDirChecked = this.$store.state.hidenDirChecked || [];
this.queryLineagesData(true);
},
/**
* Column initialization
*/
initColumm() {
+ this.metricList = [];
+ this.userDefinedList = [];
+ // hyper list
+ this.hyperList = [];
+ this.summaryList = [];
this.table.mandatoryColumn = Object.keys(this.table.columnOptions).filter(
(i) => {
return this.table.columnOptions[i].required;
@@ -297,12 +868,44 @@ export default {
return !this.table.columnOptions[i].required;
},
);
- this.table.column = Object.keys(this.table.columnOptions).filter((i) => {
- return !this.table.optionsNotInTable.includes(i);
+ const columnList = Object.keys(this.table.columnOptions).filter((i) => {
+ return (
+ !this.table.optionsNotInTable.includes(i) &&
+ this.table.columnOptions[i].selected
+ );
+ });
+ const metricArray = [];
+ const userDefinedArray = [];
+ const columnArray = [];
+ const hyperArray = [];
+ columnList.forEach((item) => {
+ if (item.indexOf('metric/') == 0) {
+ metricArray.push(item);
+ } else if (item.indexOf('user_defined/') == 0) {
+ userDefinedArray.push(item);
+ } else if (
+ item == 'epoch' ||
+ item == 'batch_size' ||
+ item == 'learning_rate'
+ ) {
+ hyperArray.push(item);
+ } else {
+ columnArray.push(item);
+ }
});
+ this.showTable = true;
+ this.table.otherColumn = columnArray;
+ this.metricList = metricArray;
+ this.userDefinedList = userDefinedArray;
+ // hyper list
+ this.hyperList = hyperArray;
+
this.table.selectedColumn = this.table.optionalColumn;
this.table.selectAll = true;
this.showTable = true;
+ this.$nextTick(() => {
+ this.$refs.table.doLayout();
+ });
},
/**
* Querying All Model Version Information
@@ -355,20 +958,121 @@ export default {
this.keysOfStringValue.push(i);
}
if (i.startsWith(this.replaceStr.userDefined)) {
+ this.labelObj.userDefined = 'userDefined';
customized[i].label = customized[i].label.replace(
this.replaceStr.userDefined,
'[U]',
);
+ const userDefinedObject = {value: '', label: ''};
+ userDefinedObject.value = customized[i].label;
+ userDefinedObject.label = customized[i].label;
+ this.userOptions.push(userDefinedObject);
} else if (i.startsWith(this.replaceStr.metric)) {
customized[i].label = customized[i].label.replace(
this.replaceStr.metric,
'[M]',
);
+ this.labelObj.metric = 'metric';
+ const metricObject = {value: '', label: ''};
+ metricObject.value = customized[i].label;
+ metricObject.label = customized[i].label;
+ metricObject.disabled = true;
+ this.metricOptions.push(metricObject);
}
});
this.haveCustomizedParams = true;
}
+ this.checkOptions = [
+ {
+ label: '',
+ options: [
+ {
+ value: this.$t('modelTraceback.dataProcess'),
+ label: this.$t('modelTraceback.dataProcess'),
+ disabled: true,
+ },
+ ],
+ },
+ ];
+ this.basearr = [
+ {
+ label: '',
+ options: [
+ {
+ value: this.$t('modelTraceback.dataProcess'),
+ label: this.$t('modelTraceback.dataProcess'),
+ disabled: true,
+ },
+ ],
+ },
+ ];
+ if (this.labelObj.metric) {
+ const metricTemp = {
+ label: 'Metric',
+ options: this.metricOptions,
+ };
+ this.checkOptions.push(metricTemp);
+ this.basearr.push(metricTemp);
+ }
+ if (this.labelObj.userDefined) {
+ const userTemp = {
+ label: 'UserDefined',
+ options: this.userOptions,
+ };
+ this.checkOptions.push(userTemp);
+ this.basearr.push(userTemp);
+ }
+ Object.keys(this.table.columnOptions).forEach((item) => {
+ if (
+ item !== 'epoch' &&
+ item !== 'learning_rate' &&
+ item !== 'batch_size'
+ ) {
+ const index = this.table.optionsNotInCheckbox.indexOf(
+ item,
+ );
+ if (index < 0) {
+ const otherType = {value: '', label: ''};
+ otherType.value = this.table.columnOptions[item].label;
+ otherType.label = this.table.columnOptions[item].label;
+ if (
+ otherType.value === 'loss' ||
+ otherType.value === '网络' ||
+ otherType.value === '优化器'
+ ) {
+ otherType.disabled = true;
+ }
+ this.otherTypeOptions.push(otherType);
+ }
+ } else {
+ const hyperObject = {value: '', label: ''};
+ hyperObject.value = this.table.columnOptions[item].label;
+ hyperObject.label = this.table.columnOptions[item].label;
+ this.hyperOptions.push(hyperObject);
+ }
+ });
+ if (this.hyperOptions.length) {
+ const hyperTemp = {
+ label: this.$t('modelTraceback.hyperLabel'),
+ options: this.hyperOptions,
+ };
+ this.checkOptions.push(hyperTemp);
+ this.basearr.push(hyperTemp);
+ }
+ if (this.otherTypeOptions.length) {
+ const otherTemp = {
+ label: this.$t('modelTraceback.otherLabel'),
+ options: this.otherTypeOptions,
+ };
+ this.checkOptions.push(otherTemp);
+ this.basearr.push(otherTemp);
+ }
}
+ this.checkOptions.forEach((item) => {
+ item.options.forEach((option) => {
+ this.selectArrayValue.push(option.label);
+ });
+ });
this.table.columnOptions = Object.assign(
{
summary_dir: {
@@ -386,7 +1090,28 @@ export default {
this.$store.commit('customizedColumnOptions', customized);
this.noData = !res.data.object.length;
- this.echart.showData = this.echart.brushData = this.echart.allData = list;
+ this.showEchartPic = !!res.data.object.length;
+ if (this.hidenDirChecked.length) {
+ const tempEchartData = this.setDataOfModel(res.data.object);
+ this.hidenDirChecked.forEach((dir) => {
+ tempEchartData.forEach((item, index) => {
+ if (item.summary_dir == dir) {
+ tempEchartData.splice(index, 1);
+ }
+ });
+ });
+ if (tempEchartData.length == 0) {
+ this.showEchartPic = false;
+ } else {
+ this.showEchartPic = true;
+ this.echart.allData = tempEchartData;
+ this.echart.brushData = tempEchartData;
+ }
+ } else {
+ this.echart.allData = list;
+ this.echart.brushData = list;
+ }
+ this.echart.showData = this.echart.brushData;
Object.keys(this.table.columnOptions).forEach((i) => {
this.table.columnOptions[i].selected = true;
const flag = list.some((val) => {
@@ -411,17 +1136,46 @@ export default {
});
this.initColumm();
this.initChart();
+ const tempList = list.slice(0, this.pagination.pageSize);
+ 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;
+ } else {
+ const tempList = list.slice(0, this.pagination.pageSize);
+ this.recordsNumber = tempList.length;
+ this.hidenDirChecked = this.$store.state.hidenDirChecked || [];
+ 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.table.data = list.slice(0, this.pagination.pageSize);
this.pagination.total = res.data.count || 0;
} else {
this.noData = allData;
+ this.showEchartPic = !allData;
}
},
(error) => {
if (allData) {
this.noData = allData;
+ this.showEchartPic = !allData;
}
},
)
@@ -437,7 +1191,17 @@ export default {
const modelLineageList = [];
data.forEach((item) => {
if (item.model_lineage) {
+ item.model_lineage.editShow = true;
+ item.model_lineage.isError = false;
item.model_lineage.summary_dir = item.summary_dir;
+ item.model_lineage.remark = item.added_info.remark
+ ? item.added_info.remark
+ : '';
+ item.model_lineage.tag = item.added_info.tag
+ ? item.added_info.tag
+ : 0;
+ item.model_lineage.showIcon = false;
+
const modelData = JSON.parse(JSON.stringify(item.model_lineage));
modelData.model_size = parseFloat(
((modelData.model_size || 0) / 1024 / 1024).toFixed(2),
@@ -471,44 +1235,14 @@ export default {
return modelLineageList;
},
- /**
- * The column options in the table are changed.
- */
- columnSelectionChange() {
- this.table.optionalColumn.forEach((key) => {
- this.table.columnOptions[key].selected = false;
- });
- this.table.selectedColumn.forEach((key) => {
- this.table.columnOptions[key].selected = true;
- });
-
- const columnCount =
- Object.keys(this.table.columnOptions).length -
- this.table.optionsNotInCheckbox.length;
-
- this.table.column = Object.keys(this.table.columnOptions).filter((i) => {
- return (
- this.table.columnOptions[i].selected &&
- !this.table.optionsNotInTable.includes(i)
- );
- });
-
- this.table.selectAll =
- this.table.selectedColumn
- .concat(this.table.mandatoryColumn)
- .filter((i) => {
- return !this.table.optionsNotInCheckbox.includes(i);
- }).length === columnCount;
-
- this.table.isIndeterminate =
- this.table.selectedColumn.length > 0 && !this.table.selectAll;
- this.initChart();
- },
/**
* Selected data in the table
* @param {Array} list Selected data in the table
*/
selectionChange(list = []) {
+ if (this.hideRecord) {
+ return;
+ }
this.echart.showData = list.length ? list : this.echart.brushData;
this.initChart();
this.checkedSummary = list;
@@ -520,6 +1254,135 @@ export default {
in: summaryDirFilter,
};
},
+
+ /**
+ * Selected data in the table
+ */
+ selectValueChange() {
+ const list = [];
+ this.basearr.forEach((item) => {
+ item.options.forEach((option) => {
+ list.push(option.label);
+ });
+ });
+ if (list.length > this.selectArrayValue.length) {
+ this.selectCheckAll = false;
+ } else {
+ this.selectCheckAll = true;
+ }
+ let allList = [];
+ const listA = [this.$t('modelTraceback.summaryPath')];
+ allList = this.selectArrayValue.concat(listA);
+ Object.keys(this.table.columnOptions).filter((i) => {
+ this.table.columnOptions[i].selected = false;
+ });
+ allList.forEach((item) => {
+ Object.keys(this.table.columnOptions).filter((i) => {
+ const labelValue = this.table.columnOptions[i].label;
+ if (labelValue == item) {
+ this.table.columnOptions[i].selected = true;
+ }
+ });
+ });
+ this.initChart();
+ this.initColumm();
+ },
+
+ /**
+ * Hidden records
+ */
+ hiddenRecords() {
+ this.hideRecord = true;
+ if (this.checkedSummary.length) {
+ this.checkedSummary.forEach((i) => {
+ this.hidenDirChecked.push(i.summary_dir);
+ });
+ }
+ this.checkedSummary = [];
+ this.summaryDirList = this.$store.state.summaryDirList;
+ this.tableFilter.summary_dir = {
+ in: this.summaryDirList,
+ };
+ this.$store.commit('setHidenDirChecked', this.hidenDirChecked);
+ if (this.hidenDirChecked.length) {
+ const tempEchartData = this.echart.brushData;
+ this.hidenDirChecked.forEach((dir) => {
+ tempEchartData.forEach((item, index) => {
+ if (item.summary_dir == dir) {
+ tempEchartData.splice(index, 1);
+ }
+ });
+ });
+ const tableTemp = this.table.data;
+ this.hidenDirChecked.forEach((dir) => {
+ tableTemp.forEach((item, index) => {
+ if (item.summary_dir == dir) {
+ tableTemp.splice(index, 1);
+ }
+ });
+ });
+ this.table.data = tableTemp;
+ this.showNumber = tableTemp.length;
+ this.echart.showData = tempEchartData;
+ // Restore the style of the table selection box.
+ this.$refs.table.clearSelection();
+ if (this.echart.showData.length > 0) {
+ this.initChart();
+ } else {
+ this.showEchartPic = false;
+ }
+ }
+ this.hideRecord = false;
+ },
+ /**
+ * Unhide
+ */
+ unhideRecords() {
+ this.showEchartPic = true;
+ this.$refs.table.clearSelection();
+ this.$store.commit('setHidenDirChecked', []);
+ if (this.hidenDirChecked.length) {
+ this.checkedSummary = [];
+ this.hidenDirChecked = [];
+ }
+ const params = {
+ body: {},
+ };
+ const tempParam = {
+ sorted_name: this.sortInfo.sorted_name,
+ sorted_type: this.sortInfo.sorted_type,
+ };
+ this.summaryDirList = this.$store.state.summaryDirList;
+ this.tableFilter.summary_dir = {
+ in: this.summaryDirList,
+ };
+ params.body = Object.assign(
+ params.body,
+ this.chartFilter,
+ tempParam,
+ this.tableFilter,
+ );
+ RequestService.queryLineagesData(params).then(
+ (res) => {
+ if (res && res.data && res.data.object) {
+ const list = this.setDataOfModel(res.data.object);
+ this.echart.allData = list;
+ this.echart.brushData = list;
+ this.echart.showData = this.echart.brushData;
+ this.initChart();
+ this.table.data = list.slice(
+ (this.pagination.currentPage - 1) * this.pagination.pageSize,
+ this.pagination.currentPage * this.pagination.pageSize,
+ );
+ this.recordsNumber = this.table.data.length;
+ this.showNumber = this.table.data.length;
+ this.pagination.total = res.data.count || 0;
+ }
+ },
+ (error) => {},
+ );
+ },
+
/**
* Sort data in the table
* @param {Object} column current column
@@ -555,6 +1418,7 @@ export default {
)
.catch(() => {});
},
+
/**
* Initializing the Eechart
*/
@@ -567,7 +1431,8 @@ export default {
});
const data = [];
this.echart.showData.forEach((i, index) => {
- const item = {
+ let item = {};
+ item = {
lineStyle: {
normal: {
color: CommonProperty.commonColorArr[index % 10],
@@ -710,6 +1575,9 @@ export default {
// select use api
this.echart.chart.on('axisareaselected', (params) => {
+ // key of mixed item
+ this.recordsNumber = 0;
+ this.showNumber = 0;
const key = params.parallelAxisId;
if (
this.keysOfMixed &&
@@ -820,9 +1688,17 @@ export default {
}
const list = this.setDataOfModel(res.data.object);
+ if (this.hidenDirChecked.length) {
+ this.hidenDirChecked.forEach((dir) => {
+ list.forEach((item, index) => {
+ if (item.summary_dir === dir) {
+ list.splice(index, 1);
+ }
+ });
+ });
+ }
const summaryDirList = list.map((i) => i.summary_dir);
this.$store.commit('setSummaryDirList', summaryDirList);
-
this.echart.showData = this.echart.brushData = list;
this.initChart();
this.getTableList(tableParams);
@@ -831,6 +1707,7 @@ export default {
this.$store.commit('setSummaryDirList', []);
this.checkedSummary = [];
this.noData = true;
+ this.showEchartPic = false;
}
},
(error) => {},
@@ -849,7 +1726,20 @@ export default {
(res) => {
if (res && res.data && res.data.object && res.data.object.length) {
const list = this.setDataOfModel(res.data.object);
- this.table.data = list.slice(0, this.pagination.pageSize);
+
+ if (this.hidenDirChecked.length) {
+ this.hidenDirChecked.forEach((dir) => {
+ list.forEach((item, index) => {
+ if (item.summary_dir === dir) {
+ list.splice(index, 1);
+ }
+ });
+ });
+ }
+ const tempList = list.slice(0, this.pagination.pageSize);
+ this.recordsNumber = tempList.length;
+ this.showNumber = tempList.length;
+ this.table.data = tempList;
this.pagination.currentPage = 1;
this.pagination.total = this.echart.brushData.length;
this.$refs.table.clearSelection();
@@ -879,23 +1769,7 @@ export default {
this.init();
this.$refs.table.clearSelection();
},
- /**
- * Select all columns in the table.
- * @param {Boolean} value Select All
- */
- checkboxSelectAll(value) {
- this.table.optionalColumn.forEach((key) => {
- this.table.columnOptions[key].selected = value;
- });
- this.table.selectedColumn = value ? this.table.optionalColumn : [];
- this.table.column = this.table.mandatoryColumn
- .concat(value ? this.table.optionalColumn : [])
- .filter((i) => {
- return !this.table.optionsNotInTable.includes(i);
- });
- this.table.isIndeterminate = false;
- this.initChart();
- },
+
/**
* Jump to the training dashboard
* @param {String} id
@@ -958,6 +1832,9 @@ export default {
this.echart.chart.resize();
},
},
+ /**
+ * Destroy the page
+ */
destroyed() {
if (this.checkedSummary.length) {
const tempList = [];
@@ -971,14 +1848,161 @@ export default {
this.echart.chart.clear();
this.echart.chart = null;
}
+ document.removeEventListener('resize', this.blurFloat);
},
};
-
+
-
{{ $t('modelTraceback.showAllData') }}
+ v-show="!noData&&showEchartPic">[U]: {{$t('modelTraceback.userDefined')}}
- [M]: {{$t('modelTraceback.metric')}}
+
+
- {{ table.columnOptions[item].label }}
-
-{{ $t('scalar.selectAll') }}
-
-
- {{ table.columnOptions[item].label }}
-
+
+
- {{$t('modelTraceback.displayColumn')}}
+
+
+
+
+
+
+
+
+
+
+
[U]: {{$t('modelTraceback.userDefined')}}
+ [M]: {{$t('modelTraceback.metric')}}
+ -
+
+
+ {{$t('modelTraceback.hide')}}
+ {{$t('modelTraceback.unhide')}}
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ formatNumber(key, scope.row[key]) }}
+
+
+
+
+
+
+
+
-
+ {{scope.column.label}}
+
+
+
+ {{formatNumber(key,scope.row[key])}}
+
+
+ {{scope.column.label}}
+
+
+
+ {{formatNumber(key,scope.row[key])}}
+
+
+ {{scope.column.label}}
+
+
+
+ {{formatNumber(key,scope.row[key])}}
+
+ {{scope.row.remark}}
+
+
+
+
+
+ {{$t('modelTraceback.remarkValidation')}}
+
+
+
+ ![]()
+ ![]()
+
+
+
+
+
+
+
+
+
+ ![]()
+
+
+ {{$t('public.sure')}}
+ {{$t('public.clear')}}
+ {{$t('public.cancel')}}
+
+
+
+
+
+
+
@@ -114,7 +318,11 @@ limitations under the License.
{{ $t('public.noData') }}
{{ $t('modelTraceback.noDataFound') }}
-{{ $t('modelTraceback.noDataTips') }}
++ {{ $t('modelTraceback.click') }} + {{ $t('modelTraceback.showAllDataBtn') }} + {{ $t('modelTraceback.viewAllData') }} +