-
- {{ item.name }}
-
-
+
+
+ {{$t('modelTraceback.displayColumn')}}
-
-
-
-
- {{ $t('scalar.selectAll') }}
-
-
-
-
+
+
+
+ {{ $t('modelTraceback.hide')}}
+
+ {{$t('modelTraceback.unhide')}}
+
+
+ v-show="!echartNoData && showTable">
+ :reserve-selection="true"
+ v-show="!echartNoData && showTable">
+
+
+
+
+ {{ scope.row.remark }}
+
+
+
+
+
+
+ {{ $t('modelTraceback.remarkValidation')}}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ $t('public.sure')}}
+
+
+ {{ $t('public.clear')}}
+
+
+ {{ $t('public.cancel')}}
+
+
+
+
+
+
+
+
-
-
+
+
+ {{ $t('modelTraceback.totalHide').replace(`{n}`,(recordsNumber-showNumber))}}
+
+
+
+
{{ $t('dataTraceback.noDataFound') }}
-
{{ $t('dataTraceback.noDataTips') }}
+
+ {{ $t('dataTraceback.click') }}
+ {{ $t('modelTraceback.showAllDataBtn') }}
+ {{ $t('dataTraceback.viewAllData') }}
+
@@ -176,9 +314,68 @@ import Echarts from 'echarts';
export default {
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'),
+ },
+ ],
+ selectCheckAll: true,
initOver: false, // Page initialization completed.
dataCheckedSummary: [],
selectedBarList: [],
+ // The selected summarydir list to hide.
+ hidenDirChecked: [],
+ showTable: false,
+ hideRecord: false,
+ // Whether to display the echart
+ showEchartPic: true,
+ checkOptions: [],
+ basearr: [],
+ sortInfo: {},
+ keyWord: '',
+ // Number of data records returned by the interface.
+ recordsNumber: 0,
+ // Number of displayed records.
+ showNumber: 0,
+ selectArrayValue: [],
customizedColumnOptions: [],
// Set the type of customized
customizedTypeObject: [],
@@ -225,7 +422,6 @@ export default {
showData: [],
},
text: this.$t('modelTraceback.summaryPath'),
- checkAll: false,
// Selected option
checkedSeries: [],
// fixed option
@@ -234,8 +430,6 @@ export default {
noFixedSeries: [],
// Array of all options
totalSeries: [],
- // Setting the style attributes of all boxes
- isIndeterminate: false,
// Page data
pagination: {
currentPage: 1,
@@ -333,11 +527,378 @@ export default {
computed: {},
mounted() {
document.title = this.$t('summaryManage.dataTraceback') + '-MindInsight';
+ document.addEventListener('click', this.blurFloat, true);
this.$nextTick(() => {
this.init();
});
},
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';
+ },
+
+ 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);
+ },
+
+ /**
+ * cancelChangeIcon
+ * @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) => {
+ this.selectArrayValue.push(item.value);
+ });
+
+ this.selectCheckAll = !this.selectCheckAll;
+ this.initChart();
+ const list = [];
+ this.checkOptions.forEach((item) => {
+ this.selectArrayValue.forEach((i) => {
+ if (i === item.value) {
+ list.push(i);
+ }
+ });
+ });
+
+ if (this.selectedBarList) {
+ const resultArray = this.hideDataMarkTableData();
+ this.table.column = this.dirPathList.concat(resultArray, list);
+ } else {
+ this.table.column = this.dirPathList.concat(list);
+ }
+ },
+
+ /**
+ * deselect all
+ */
+ deselectAll() {
+ this.selectArrayValue = [];
+ this.checkOptions.forEach((item) => {
+ if (item.disabled) {
+ this.selectArrayValue.push(item.value);
+ }
+ });
+ this.selectCheckAll = false;
+ this.initChart();
+ const list = [];
+ this.checkOptions.forEach((item) => {
+ this.selectArrayValue.forEach((i) => {
+ if (i === item.value) {
+ list.push(i);
+ }
+ });
+ });
+ if (this.selectedBarList) {
+ const resultArray = this.hideDataMarkTableData();
+ this.table.column = this.dirPathList.concat(resultArray, list);
+ } else {
+ this.table.column = this.dirPathList.concat(list);
+ }
+ },
+
+ /**
+ * Edit remarks
+ * @param {Object} row
+ */
+ editRemarks(row) {
+ row.editShow = false;
+ row.isError = false;
+ this.beforeEditValue = row.network;
+ },
+
+ /**
+ * 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.network = 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(() => {});
+ },
+
+ /**
+ * Hidden records
+ */
+ hiddenRecords() {
+ this.hideRecord = true;
+ if (this.dataCheckedSummary.length) {
+ this.dataCheckedSummary.forEach((i) => {
+ this.hidenDirChecked.push(i.summary_dir);
+ });
+ }
+ this.$store.commit('setHidenDirChecked', this.hidenDirChecked);
+ if (this.hidenDirChecked.length) {
+ const tempEchartData = this.echart.brushData.slice();
+ this.hidenDirChecked.forEach((dir) => {
+ tempEchartData.forEach((item, index) => {
+ if (item.summary_dir === dir) {
+ tempEchartData.splice(index, 1);
+ }
+ });
+ });
+ const tableTemp = this.table.data.slice();
+ this.hidenDirChecked.forEach((dir) => {
+ tableTemp.forEach((item, index) => {
+ if (item.summary_dir === dir) {
+ tableTemp.splice(index, 1);
+ }
+ });
+ });
+
+ this.dataCheckedSummary = [];
+ this.table.data = tableTemp;
+ this.showNumber = tableTemp.length;
+ this.echart.showData = tempEchartData;
+ 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 = [];
+ }
+ this.checkOptions = [];
+ this.selectArrayValue = [];
+ 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,
+ );
+ this.queryLineagesData(params);
+ },
+ /**
+ * 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 = {};
+ if (
+ item &&
+ item.label.toLowerCase().indexOf(queryString.toLowerCase()) >= 0
+ ) {
+ object.label = item.label;
+ object.value = item.value;
+ object.disabled = item.disabled;
+ list.push(object);
+ }
+ });
+ return list;
+ },
+
+ selectinputFocus() {
+ // the text box is restored to empty
+ this.keyWord = '';
+ this.checkOptions = this.basearr;
+ },
+
+ /**
+ * Select data in the table
+ */
+ selectValueChange() {
+ const templist = [];
+ this.basearr.forEach((item) => {
+ templist.push(item.label);
+ });
+ if (templist.length > this.selectArrayValue.length) {
+ this.selectCheckAll = false;
+ } else {
+ this.selectCheckAll = true;
+ }
+ this.initChart();
+ const list = [];
+ this.checkOptions.forEach((item) => {
+ this.selectArrayValue.forEach((i) => {
+ if (i === item.value) {
+ list.push(i);
+ }
+ });
+ });
+
+ if (this.selectedBarList) {
+ const resultArray = this.hideDataMarkTableData();
+ this.table.column = this.dirPathList.concat(resultArray, list);
+ } else {
+ this.table.column = this.dirPathList.concat(list);
+ }
+ },
+
/**
* init
*/
@@ -390,9 +951,21 @@ export default {
arrayTemp.push(obj);
});
}
- const totalBarArray = arrayTemp.concat(this.checkedSeries);
+ const list = [];
+ this.checkOptions.forEach((item) => {
+ this.selectArrayValue.forEach((i) => {
+ if (i === item.value) {
+ const obj = {};
+ obj.id = item.value;
+ obj.name = item.label;
+ list.push(obj);
+ }
+ });
+ });
+ const totalBarArray = arrayTemp.concat(list);
this.echart.showData.forEach((val, i) => {
- const item = {
+ let item = {};
+ item = {
lineStyle: {
normal: {
color: CommonProperty.commonColorArr[i % 10],
@@ -487,6 +1060,8 @@ export default {
window.addEventListener('resize', this.resizeChart, false);
this.parallelEchart.on('axisareaselected', (params) => {
+ this.recordsNumber = 0;
+ this.showNumber = 0;
const key = params.parallelAxisId;
const range = params.intervals[0] || [];
const [axisData] = parallelAxis.filter((i) => {
@@ -513,12 +1088,13 @@ export default {
});
// The summaryList value could not be saved in the destroy state.
this.dataCheckedSummary = [];
- this.tableFilter.summary_dir = {in: summaryList};
this.$store.commit('setSummaryDirList', summaryList);
+ this.tableFilter.summary_dir = {in: summaryList};
if (!tempList.length) {
this.summaryDirList = [];
this.lineagedata.serData = undefined;
- document.querySelector('#data-echart').style.display = 'none';
+ this.showTable = false;
+ this.echartNoData = true;
} else {
this.echart.showData = this.echart.brushData;
this.initChart();
@@ -528,6 +1104,7 @@ export default {
(this.pagination.currentPage - 1) * this.pagination.pageSize,
this.pagination.currentPage * this.pagination.pageSize,
);
+ this.showTable = true;
}
}
});
@@ -793,17 +1370,56 @@ export default {
if (this.noFixedSeries.length) {
this.setObjectValue(this.noFixedSeries, false);
}
+
+ const list1 = this.fixedSeries.concat(this.noFixedSeries);
+ list1.forEach((item, index) => {
+ this.checkOptions[index] = {};
+ this.basearr[index] = {};
+ this.checkOptions[index].label = item.name;
+ this.checkOptions[index].value = item.id;
+ if (this.createType[item.name]) {
+ this.checkOptions[index].disabled = true;
+ this.basearr[index].disabled = true;
+ }
+ this.basearr[index].label = item.name;
+ this.basearr[index].value = item.id;
+ });
+ this.checkOptions.forEach((item) => {
+ this.selectArrayValue.push(item.value);
+ });
+ this.hidenDirChecked = this.$store.state.hidenDirChecked || [];
this.echart.brushData = this.lineagedata.serData;
- this.echart.showData = this.echart.brushData;
- if (this.totalSeries.length) {
- document.querySelector('#data-echart').style.display = 'block';
+
+ if (this.hidenDirChecked.length) {
+ const listdada = this.lineagedata.serData.slice();
+ this.hidenDirChecked.forEach((item) => {
+ listdada.forEach((i, index) => {
+ if (i.summary_dir === item) {
+ listdada.splice(index, 1);
+ }
+ });
+ });
+
+ if (listdada.length) {
+ this.showEchartPic = true;
+ } else {
+ this.showEchartPic = false;
+ }
+ this.echart.showData = listdada;
+ } else {
+ this.echart.showData = this.echart.brushData;
+ this.showEchartPic = true;
}
+
this.setEchartValue();
this.initChart();
// Total number of pages in the table
this.pagination.total = res.data.count;
// Data encapsulation of the table
- this.setTableData();
+ let data = [];
+ data = this.setTableData();
+ this.table.data = data;
+ this.showTable = true;
if (this.selectedBarList) {
const resultArray = this.hideDataMarkTableData();
this.table.column = this.dirPathList.concat(
@@ -818,10 +1434,12 @@ export default {
},
(error) => {
this.initOver = true;
+ this.showEchartPic = false;
},
)
.catch(() => {
this.initOver = true;
+ this.showEchartPic = false;
});
},
@@ -835,11 +1453,6 @@ export default {
this.checkedSeries.push(nodeItem);
}
});
- if (this.checkedSeries.length == this.totalSeries.length) {
- this.checkAll = true;
- } else {
- this.checkAll = false;
- }
},
/**
@@ -857,43 +1470,18 @@ export default {
// The first page is displayed.
this.initOver = false;
this.echartNoData = false;
+ this.showEchartPic = true;
+ // checkOptions initializate to an empty array
+ this.checkOptions = [];
+ this.selectArrayValue = [];
this.pagination.currentPage = 1;
this.$store.commit('setSummaryDirList', undefined);
this.$store.commit('setSelectedBarList', []);
if (this.parallelEchart) {
this.parallelEchart.clear();
}
- document.querySelector('#data-echart').style.display = 'block';
this.$refs.table.clearSelection();
this.init();
- this.parallelEchart.resize();
- },
-
- /**
- * Select All
- */
- handleCheckAllChange() {
- // Selected option
- this.noFixedSeries.forEach((nodeItem) => {
- nodeItem.checked = this.checkAll;
- });
- this.$forceUpdate();
- this.getCheckedSerList();
- // Value assignment in the table column
- if (this.selectedBarList) {
- const resultArray = this.hideDataMarkTableData();
- this.table.column = this.dirPathList.concat(
- resultArray,
- this.checkedSeries.map((i) => i.id),
- );
- } else {
- this.table.column = this.dirPathList.concat(
- this.checkedSeries.map((i) => i.id),
- );
- }
-
- this.isIndeterminate = false;
- this.initChart();
},
/**
@@ -910,36 +1498,15 @@ export default {
return result;
},
- /**
- * The column options in the table are changed
- */
- handleCheckedSeriesChange() {
- this.$forceUpdate();
- this.getCheckedSerList();
- // Value assignment in the table column
- if (this.selectedBarList) {
- const resultArray = this.hideDataMarkTableData();
- this.table.column = this.dirPathList.concat(
- resultArray,
- this.checkedSeries.map((i) => i.id),
- );
- } else {
- this.table.column = this.dirPathList.concat(
- this.checkedSeries.map((i) => i.id),
- );
- }
-
- this.isIndeterminate =
- this.checkedSeries.length > this.fixedSeries.length && !this.checkAll;
- this.initChart();
- },
-
/**
* Selected rows of tables
* @param {Object} val
*/
handleSelectionChange(val) {
// summary_dir cannot be stored here.If it is not selected ,it cannot be stroed correctly.
+ if (this.hideRecord) {
+ return;
+ }
this.dataCheckedSummary = val;
if (val.length) {
this.echart.showData = val;
@@ -967,11 +1534,15 @@ export default {
* @param {Object} data
*/
tableSortChange(data) {
+ 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.pagination.currentPage = 1;
params.body = Object.assign({}, tempParam, this.tableFilter);
this.queryLineagesData(params);
@@ -983,20 +1554,34 @@ export default {
*/
handleCurrentChange(val) {
this.pagination.currentPage = val;
- this.setTableData();
+ this.table.data = this.setTableData();
},
/**
* Setting Table Data
+ * @return {Array}
*/
setTableData() {
+ let data = [];
// Table data encapsulation
const pathData = JSON.parse(JSON.stringify(this.echart.brushData));
// Obtain table data based on the page number and number of records.
- this.table.data = pathData.slice(
+ data = pathData.slice(
(this.pagination.currentPage - 1) * this.pagination.pageSize,
this.pagination.currentPage * this.pagination.pageSize,
);
+ this.recordsNumber = data.length;
+ if (this.hidenDirChecked.length) {
+ this.hidenDirChecked.forEach((dir) => {
+ data.forEach((item, index) => {
+ if (item.summary_dir === dir) {
+ data.splice(index, 1);
+ }
+ });
+ });
+ }
+ this.showNumber = data.length;
+ return data;
},
/**
@@ -1015,6 +1600,9 @@ export default {
nodeList: [],
children: false,
summary_dir: object.summary_dir,
+ remark: object.added_info.remark ? object.added_info.remark : '',
+ tag: object.added_info.tag,
+ showIcon: false,
};
if (JSON.stringify(object.dataset_graph) !== '{}') {
this.getSingleRunData(object.dataset_graph);
@@ -1038,7 +1626,14 @@ export default {
tempDic[nodeItem.name] = 0;
}
tempDic[nodeItem.name]++;
- const tempId = `${nodeItem.name}${tempDic[nodeItem.name]}`;
+ let tempId = '';
+ const createKey = Object.keys(this.createType);
+ if (createKey.includes(nodeItem.name)) {
+ tempId = nodeItem.name;
+ } else {
+ tempId = `${nodeItem.name}${tempDic[nodeItem.name]}`;
+ }
+
fullNodeList.splice(startIndex, 0, {
name: nodeItem.name,
id: tempId,
@@ -1057,11 +1652,20 @@ export default {
tempDic[nodeItem.name] = 0;
}
tempDic[nodeItem.name]++;
- fullNodeList.push({
- name: nodeItem.name,
- id: `${nodeItem.name}${tempDic[nodeItem.name]}`,
- });
- nodeItem.id = `${nodeItem.name}${tempDic[nodeItem.name]}`;
+ const createKey = Object.keys(this.createType);
+ if (createKey.includes(nodeItem.name)) {
+ fullNodeList.push({
+ name: nodeItem.name,
+ id: nodeItem.name,
+ });
+ nodeItem.id = nodeItem.name;
+ } else {
+ fullNodeList.push({
+ name: nodeItem.name,
+ id: `${nodeItem.name}${tempDic[nodeItem.name]}`,
+ });
+ nodeItem.id = `${nodeItem.name}${tempDic[nodeItem.name]}`;
+ }
});
}
});
@@ -1074,6 +1678,15 @@ export default {
});
curDataObj.children = objectData.children;
curDataObj.summary_dir = objectData.summary_dir;
+
+ // set remark value
+ curDataObj.remark = objectData.remark;
+ // set tag value
+ curDataObj.tag = objectData.tag;
+ curDataObj.showIcon = objectData.showIcon;
+ // set remark icon is show
+ curDataObj.editShow = true;
+ curDataObj.isError = false;
serData.push(curDataObj);
});
const formateData = {
@@ -1199,20 +1812,100 @@ export default {
};