diff --git a/mindinsight/ui/src/components/header.vue b/mindinsight/ui/src/components/header.vue index 5365f7dc..52f7f4cb 100644 --- a/mindinsight/ui/src/components/header.vue +++ b/mindinsight/ui/src/components/header.vue @@ -38,6 +38,7 @@ limitations under the License.
import('./views/train-manage/image.vue'), }, + { + path: '/train-manage/histogram', + component: () => import('./views/train-manage/histogram.vue'), + }, { path: '/train-manage/graph', component: () => import('./views/train-manage/graph.vue'), diff --git a/mindinsight/ui/src/services/request-service.js b/mindinsight/ui/src/services/request-service.js index cf4354d8..be099656 100644 --- a/mindinsight/ui/src/services/request-service.js +++ b/mindinsight/ui/src/services/request-service.js @@ -114,4 +114,11 @@ export default { params: params, }); }, + getHistogramData(params) { + return axios({ + method: 'get', + url: '/v1/mindinsight/datavisual/histograms', + params: params, + }); + }, }; diff --git a/mindinsight/ui/src/views/train-manage/scalar-compare.vue b/mindinsight/ui/src/views/train-manage/scalar-compare.vue index 9882f880..f25be297 100644 --- a/mindinsight/ui/src/views/train-manage/scalar-compare.vue +++ b/mindinsight/ui/src/views/train-manage/scalar-compare.vue @@ -809,16 +809,60 @@ export default { _this.$t('scalar.absoluteTime') + ''; let strBody = ''; + const runArr=[]; + const detialArr=[]; + let curStep=null; let dataCount = 0; params.forEach((parma) => { if (parma.componentIndex % 2 === 0) { + let addFlag=true; const curIndex = parseInt(parma.componentIndex / 2); - let curSerieOriData; + const curSerieOriData=_this.charData[curIndex] + ? _this.charData[curIndex].valueData + : null; - if (_this.charData[curIndex]) { - curSerieOriData = _this.charData[curIndex].valueData; + if (!curSerieOriData) { + return; + } + if (curStep===null) { + curStep=curSerieOriData.stepData[parma.dataIndex][0]; + } else { + if ( + curSerieOriData.stepData[parma.dataIndex][0]===curStep + ) { + const sameRunIndex=[]; + runArr.forEach((runName, index)=>{ + if (parma.seriesName === runName) { + sameRunIndex.push(index); + } + }); + if (sameRunIndex.length) { + sameRunIndex.forEach((sameIndex) => { + if ( + detialArr[sameIndex] && + detialArr[sameIndex].value === + curSerieOriData.stepData[parma.dataIndex][1] && + detialArr[sameIndex].wallTime === + curSerieOriData.absData[parma.dataIndex][0] + ) { + addFlag = false; + } + }); + } + } else { + addFlag = false; + } + } + if (addFlag) { dataCount++; + runArr.push(parma.seriesName); + detialArr.push({ + value: curSerieOriData.stepData[parma.dataIndex][1], + step: curSerieOriData.stepData[parma.dataIndex][0], + wallTime: curSerieOriData.absData[parma.dataIndex][0], + dataIndex: parma.dataIndex, + }); strBody += ` - -
-
{{$t("scalar.tagSelectTitle")}}
- -
- - {{$t('scalar.selectAll')}} -
- - - -
-
- - - - {{tagItem.label}} - - -
-
- -
{{$t("scalar.open")}}
-
{{$t("scalar.close")}}
-
-
-
- - - - {{tagItem.label}} - - -
-
+
+ > + +
+ :total="curFilterSamples.length">
@@ -190,30 +134,27 @@ import echarts from 'echarts'; import RequestService from '../../services/request-service'; import CommonProperty from '../../common/common-property'; import ScalarCompare from './scalar-compare'; +import multiselectGroupComponents from '../../components/multiselectGroup.vue'; export default { data() { return { - trainingJobId: '', firstNum: 0, // First time isActive: 0, // Horizontal axis selected value initOver: false, // Indicates whether the initialization is complete. autoUpdateTimer: null, // Automatic refresh timer - tagInput: '', // tag input value - valiableTagInput: '', // Last valid input for tag retrieval. - tagInputTimer: '', // tag Filtering Timing charResizeTimer: null, // Delay after the window size is changed multiSelectedTagNames: {}, // selected tag name - curFilterTagIndexArr: [], // Chart subscript - headTagFullScreen: false, // Indicates whether tag is expanded - tagOperateSelectAll: true, // tag selectAll + curFilterSamples: [], // list of chart that meet the current filter criteria tagOperateList: [], // Array selected by tag tagPropsList: [], // tag props propsList: [], // dataList props smoothValue: 0, // Initial smoothness of the slider + smoothValueNumber: 0, smoothSliderValueTimer: null, // Smoothness slider timer DomIdIndex: 0, // DomId num originDataArr: [], // Original data + oriDataDictionaries: {}, // Dictionary that contains all the current tags curPageArr: [], // data of the current page pageIndex: 0, // Current page number pageNum: 6, // Number of records per page @@ -225,8 +166,7 @@ export default { compare: false, // Comparison Page scalarCompare: this.$t('scalar')['comparison'], abort: false, // charts that have not been drawn. - tagOverRowFlag: false, // the value of tag is greater than one line - perSelectItemMarginBottom: 1, // bottom of each selection box + trainingJobId: this.$route.query.train_id, // ID of the current training job }; }, computed: { @@ -296,12 +236,6 @@ export default { this.smoothSliderValueTimer = null; } - // Delete the response delay of removing the tag input box - if (this.tagInputTimer) { - clearTimeout(this.tagInputTimer); - this.tagInputTimer = null; - } - // Remove Chart Calculation Delay if (this.charResizeTimer) { clearTimeout(this.charResizeTimer); @@ -315,27 +249,18 @@ export default { } }, mounted() { - this.$nextTick(() => { - if (this.$route.query && this.$route.query.train_id) { - this.trainingJobId = this.$route.query.train_id; - } else { - this.trainingJobId = ''; - this.$message.error(this.$t('trainingDashboard.invalidId')); - return; - } - // Adding a Listener - this.getCharMainContentwidth(); + // Adding a Listener + window.addEventListener('resize', this.resizeCallback, false); - // Initializing Data - this.getScalarsList(); + // Initializing Data + this.getScalarsList(); - this.firstNum = 1; + this.firstNum = 1; - // auto refresh - if (this.isTimeReload) { - this.autoUpdateSamples(); - } - }); + // auto refresh + if (this.isTimeReload) { + this.autoUpdateSamples(); + } }, methods: { /** @@ -364,42 +289,43 @@ export default { const data = res.data.train_jobs[0]; const runNmeColor = CommonProperty.commonColorArr[0]; data.tags.forEach((tagObj) => { - // Add the tag list - this.multiSelectedTagNames[tagObj] = true; - tempTagList.push({ - label: tagObj, - checked: true, - show: true, - }); - const sampleIndex = dataList.length; - this.curFilterTagIndexArr.push(sampleIndex); - - // Adding Chart Data - dataList.push({ - tagName: tagObj, - runNames: data.name, - colors: runNmeColor, - show: false, - updateFlag: false, - dataRemove: false, - fullScreen: false, - sampleIndex: sampleIndex, - domId: 'prDom' + this.DomIdIndex, - charData: { - oriData: [], - charOption: {}, - }, - zoomData: [null, null], - zoomDataTimer: null, - charObj: null, - }); - - propsList.push({ - tagName: tagObj, - runNames: data.name, - colors: '', - }); - this.DomIdIndex++; + if (!this.oriDataDictionaries[tagObj]) { + this.oriDataDictionaries[tagObj]=true; + // Add the tag list + tempTagList.push({ + label: tagObj, + checked: true, + show: true, + }); + const sampleIndex = dataList.length; + + // Adding Chart Data + dataList.push({ + tagName: tagObj, + runNames: data.name, + colors: runNmeColor, + show: false, + updateFlag: false, + dataRemove: false, + fullScreen: false, + sampleIndex: sampleIndex, + domId: 'prDom' + this.DomIdIndex, + charData: { + oriData: [], + charOption: {}, + }, + zoomData: [null, null], + zoomDataTimer: null, + charObj: null, + }); + + propsList.push({ + tagName: tagObj, + runNames: data.name, + colors: '', + }); + this.DomIdIndex++; + } }); this.tagOperateList = tempTagList; this.tagPropsList = JSON.parse(JSON.stringify(tempTagList)); @@ -411,16 +337,12 @@ export default { this.initOver = true; this.$nextTick(() => { + this.multiSelectedTagNames=this.$refs.multiselectGroupComponents.updateSelectedDic(); + + // Obtains data on the current page + this.updateTagInPage(); this.resizeCallback(); }); - - if (dataList.length) { - // Obtains data on the current page - this.getCurPageDataArr(); - - // Refresh the chart data on the current page - this.freshCurPageData(); - } }, this.requestErrorCallback) .catch((e) => { this.$message.error(this.$t('public.dataError')); @@ -429,15 +351,13 @@ export default { /** * Obtains data on a specified page - * @param {Boolen} fresh // Refresh Data - * @param {Boolen} newPageData // new chart on the current page * @param {Boolen} noPageIndexChange // The page number does not change */ - getCurPageDataArr(fresh, newPageData, noPageIndexChange) { + getCurPageDataArr(noPageIndexChange) { if (!noPageIndexChange) { - this.curPageArr.forEach((sampleObject) => { - sampleObject.show = false; + this.curPageArr.forEach((sampleItem) => { + sampleItem.show = false; }); } const startIndex = this.pageIndex * this.pageNum; @@ -445,159 +365,126 @@ export default { const curPageArr = []; for (let i = startIndex; i < endIndex; i++) { - const sampleIndex = this.curFilterTagIndexArr[i]; - if (sampleIndex !== undefined && this.originDataArr[sampleIndex]) { - this.originDataArr[sampleIndex].updateFlag = true; - this.originDataArr[sampleIndex].show = true; - curPageArr.push(this.originDataArr[sampleIndex]); + const sampleItem=this.curFilterSamples[i]; + if (sampleItem) { + sampleItem.updateFlag=true; + sampleItem.show=true; + curPageArr.push(sampleItem); } } - this.curPageArr = curPageArr; - if (fresh) { - this.$nextTick(() => { - this.freshCurPageData(newPageData); - }); - } + this.curPageArr = curPageArr; + this.updateCurPageSamples(); }, /** - * Updates data in a specified tag - * @param {Number} sampleIndex Chart subscript + * Load the data on the current page */ + updateCurPageSamples() { + this.curPageArr.forEach((sampleObject)=>{ + const sampleIndex=sampleObject.sampleIndex; + if (!sampleObject) { + return; + } + sampleObject.updateFlag = true; - updateSampleData(sampleIndex) { - const sampleObject = this.originDataArr[sampleIndex]; - if (!sampleObject) { - return; - } - sampleObject.updateFlag = true; - - const promiseArr = []; - - const params = { - train_id: this.trainingJobId, - tag: sampleObject.tagName, - }; - promiseArr.push(this.addPromise(params)); + const params = { + train_id: this.trainingJobId, + tag: sampleObject.tagName, + }; - Promise.all(promiseArr.map(function(promiseItem) { - return promiseItem.catch(function(err) { - return err; - }); - })) - .then((res) => { - // error - if (!res || !res.length) { - return; + RequestService.getScalarsSample(params).then((res)=>{ + // error + if (!res || !res.data || !res.data.metadatas) { + if (sampleObject.charObj) { + sampleObject.charObj.clear(); } - let scalarIndex = 0; - let hasInvalidData = false; - for (let i = 0; i < res.length; i++) { - if (!res[i] || !res[i].data) { - sampleObject.charObj.clear(); - return; - } + return; + } + let hasInvalidData = false; - if (sampleObject.charObj) { - sampleObject.charObj.showLoading(); - } + if (sampleObject.charObj) { + sampleObject.charObj.showLoading(); + } - const resData = res[i].data; - - const tempObject = { - valueData: { - stepData: [], - absData: [], - relativeData: [], - }, - logData: { - stepData: [], - absData: [], - relativeData: [], - }, - }; - let relativeTimeBench = 0; - if (resData.metadatas.length) { - relativeTimeBench = resData.metadatas[0].wall_time; - } + const resData = res.data; - // Initializing Chart Data - resData.metadatas.forEach((metaData) => { - if (metaData.value === null && !hasInvalidData) { - hasInvalidData = true; - } - tempObject.valueData.stepData.push([ - metaData.step, - metaData.value, - ]); - tempObject.valueData.absData.push([ - metaData.wall_time, - metaData.value, - ]); - tempObject.valueData.relativeData.push([ - metaData.wall_time - relativeTimeBench, - metaData.value, - ]); - const logValue = metaData.value >= 0 ? metaData.value : ''; - tempObject.logData.stepData.push([metaData.step, logValue]); - tempObject.logData.absData.push([metaData.wall_time, logValue]); - tempObject.logData.relativeData.push([ - metaData.wall_time - relativeTimeBench, - logValue, - ]); - }); + const tempObject = { + valueData: { + stepData: [], + absData: [], + relativeData: [], + }, + logData: { + stepData: [], + absData: [], + relativeData: [], + }, + }; + let relativeTimeBench = 0; + if (resData.metadatas.length) { + relativeTimeBench = resData.metadatas[0].wall_time; + } - sampleObject.charData.oriData[scalarIndex] = tempObject; - scalarIndex++; + // Initializing Chart Data + resData.metadatas.forEach((metaData) => { + if (metaData.value === null && !hasInvalidData) { + hasInvalidData = true; } - if (hasInvalidData) { - this.$set(this.originDataArr[sampleIndex], 'invalidData', true); - } - sampleObject.charData.charOption = this.formateCharOption( - sampleIndex, - ); + tempObject.valueData.stepData.push([ + metaData.step, + metaData.value, + ]); + tempObject.valueData.absData.push([ + metaData.wall_time, + metaData.value, + ]); + tempObject.valueData.relativeData.push([ + metaData.wall_time - relativeTimeBench, + metaData.value, + ]); + const logValue = metaData.value >= 0 ? metaData.value : ''; + tempObject.logData.stepData.push([metaData.step, logValue]); + tempObject.logData.absData.push([metaData.wall_time, logValue]); + tempObject.logData.relativeData.push([ + metaData.wall_time - relativeTimeBench, + logValue, + ]); + }); - this.$nextTick(() => { - if (sampleObject.charObj) { - sampleObject.charObj.hideLoading(); - } + sampleObject.charData.oriData[0] = tempObject; - // Draw chart - if (!this.compare) { - this.updateOrCreateChar(sampleIndex); - } else { - this.abort = true; - } - }); - }) - .catch((error) => {}); - }, + if (hasInvalidData) { + this.$set(sampleObject, 'invalidData', true); + } + sampleObject.charData.charOption = this.formateCharOption( + sampleIndex, + ); - /** - * add promise - * @param {Object} - * @return {Object} response || error - */ + this.$forceUpdate(); - addPromise(params) { - return new Promise((resolve, reject) => { - RequestService.getScalarsSample(params) - .then((res) => { - if (res) { - res.params = params; - resolve(res); - } - }) - .catch((error) => { - if (error) { - reject(error); - } - }); + this.$nextTick(() => { + if (sampleObject.charObj) { + sampleObject.charObj.hideLoading(); + } + + // Draw chart + if (!this.compare) { + this.updateOrCreateChar(sampleIndex); + } else { + this.abort = true; + } + }); + }).catch((e)=>{ + if (sampleObject.charObj) { + sampleObject.charObj.clear(); + } + }); }); }, + /** * Formatting Chart Data * @param {Number} sampleIndex Chart subscript @@ -1014,130 +901,25 @@ export default { }, 0); }, - /** - * tag select All - */ - - tagSelectAll() { - this.tagOperateSelectAll = !this.tagOperateSelectAll; - this.multiSelectedTagNames = {}; - - // Sets the tag option status. - if (this.tagOperateSelectAll) { - this.tagOperateList.forEach((tagItem) => { - if (tagItem.show) { - tagItem.checked = true; - this.multiSelectedTagNames[tagItem.label] = true; - } - }); - } else { - this.tagOperateList.forEach((tagItem) => { - if (tagItem.show) { - tagItem.checked = false; - } - }); - } - - // Update Chart - this.updateTagInPage(); - }, - - /** - * Tag filtering - */ - - filterByTagName() { - if (this.tagInputTimer) { - clearTimeout(this.tagInputTimer); - this.tagInputTimer = null; - } - this.tagInputTimer = setTimeout(() => { - let reg; - try { - reg = new RegExp(this.tagInput); - } catch (e) { - this.$message.warning(this.$t('public.regIllegal')); - return; - } - this.valiableTagInput = this.tagInput; - this.multiSelectedTagNames = {}; - let tagSelectAll = true; - - // Tag filter - this.tagOperateList.forEach((tagItem) => { - if (reg.test(tagItem.label)) { - tagItem.show = true; - if (tagItem.checked) { - this.multiSelectedTagNames[tagItem.label] = true; - } else { - tagSelectAll = false; - } - } else { - tagItem.show = false; - } - }); - - // Refresh the Select All button - this.tagOperateSelectAll = tagSelectAll; - // Update Chart - this.updateTagInPage(); - }, 500); - }, /** - * tag click - * @param {Object} tagItem Current tag + * Update Chart by tag + * @param {Boolean} noPageDataNumChange No new data is added or deleted */ - tagItemClick(tagItem) { - if (!tagItem) { - return; - } - tagItem.checked = !tagItem.checked; - - // refreshes the tag selection count - if (tagItem.checked) { - this.multiSelectedTagNames[tagItem.label] = true; - } else { - if (this.multiSelectedTagNames[tagItem.label]) { - delete this.multiSelectedTagNames[tagItem.label]; - } - } - - // Refresh the Select All button - let tagSellectAll = true; - this.tagOperateList.some((curTagItem) => { - if (curTagItem.show && !curTagItem.checked) { - tagSellectAll = false; - return true; + updateTagInPage(noPageDataNumChange) { + const curFilterSamples=[]; + // Obtains the chart subscript + this.originDataArr.forEach((sampleItem) => { + if (this.multiSelectedTagNames[sampleItem.tagName]) { + curFilterSamples.push(sampleItem); } }); - this.tagOperateSelectAll = tagSellectAll; - // Update Chart - this.updateTagInPage(); - }, - - /** - * Update Chart by tag - */ - - updateTagInPage() { - // Reset to the first page - this.pageIndex = 0; - const curFilterTagIndexArr = []; - if (JSON.stringify(this.multiSelectedTagNames) !== '{}') { - // Obtains the chart subscript - this.originDataArr.forEach((sampleObject) => { - if (this.multiSelectedTagNames[sampleObject.tagName]) { - curFilterTagIndexArr.push(sampleObject.sampleIndex); - } - }); - } - this.curFilterTagIndexArr = curFilterTagIndexArr; + this.curFilterSamples = curFilterSamples; // Obtains data on the current page - this.getCurPageDataArr(true, true); + this.getCurPageDataArr(noPageDataNumChange); }, /** @@ -1218,39 +1000,31 @@ export default { this.pageIndex = pageIndex - 1; // Load the data on the current page - this.getCurPageDataArr(true, true); + this.getCurPageDataArr(); }, /** - * Load the data on the current page - * @param {Boolen} newPageData new chart data exists on the current page + * the selected label is changed + * @param {Object} selectedItemDict Dictionary containing the selected tags */ - freshCurPageData(newPageData) { - this.curPageArr.forEach((sampleObject) => { - if (sampleObject.charObj && !newPageData) { - this.updateOrCreateChar(sampleObject.sampleIndex); - } else { - this.updateSampleData(sampleObject.sampleIndex); - } - }); + tagSelectedChanged(selectedItemDict) { + if (!selectedItemDict) { + return; + } + this.multiSelectedTagNames=selectedItemDict; + // Reset to the first page + this.pageIndex=0; + this.updateTagInPage(); }, + /** *window resize */ resizeCallback() { if (!this.compare) { - // Expand/Collapse show - - const tagSelectItemContent = this.$refs.tagSelectItemContent; - if (tagSelectItemContent) { - this.tagOverRowFlag = - tagSelectItemContent.clientHeight < - tagSelectItemContent.scrollHeight - this.perSelectItemMarginBottom; - } - if (this.charResizeTimer) { clearTimeout(this.charResizeTimer); this.charResizeTimer = null; @@ -1266,26 +1040,17 @@ export default { } }, - /** - * Add Listening - */ - - getCharMainContentwidth() { - window.addEventListener('resize', this.resizeCallback, false); - }, - - /** * Clear data */ clearAllData() { this.multiSelectedTagNames = {}; - this.curFilterTagIndexArr = []; - this.tagOperateSelectAll = true; + this.curFilterSamples = []; this.tagOperateList = []; this.pageIndex = 0; this.originDataArr = []; + this.oriDataDictionaries={}; this.curPageArr = []; this.tagPropsList = []; this.propsList = []; @@ -1316,18 +1081,6 @@ export default { } }, - /** - * - * Expand or collapse the tag list - */ - - toggleHeadTagFullScreen() { - this.headTagFullScreen = !this.headTagFullScreen; - if (!this.headTagFullScreen) { - this.resizeCallback(); - } - }, - /** * Delete the data that does not exist * @param {Object} oriData Original run and tag data @@ -1337,21 +1090,17 @@ export default { if (!oriData) { return false; } - const tagList = []; // tag list + const newTagDictionaries={}; // Index of the tag in the new data let dataRemoveFlag = false; - // Obtains the current tag and run list - oriData.tags.forEach((tagObj) => { - let sameTagIndex = tagList.indexOf(tagObj); - if (sameTagIndex === -1) { - sameTagIndex = tagList.length; - tagList.push(tagObj); - } + oriData.tags.forEach((tagName) => { + newTagDictionaries[tagName]=true; }); // Delete the tag that does not exist const oldTagListLength = this.tagOperateList.length; for (let i = oldTagListLength - 1; i >= 0; i--) { - if (tagList.indexOf(this.tagOperateList[i].label) === -1) { + if (!newTagDictionaries[this.tagOperateList[i].label]) { dataRemoveFlag = true; + delete this.oriDataDictionaries[this.tagOperateList[i].label]; this.tagOperateList.splice(i, 1); } } @@ -1361,17 +1110,9 @@ export default { for (let i = oldSampleLength - 1; i >= 0; i--) { const oldSample = this.originDataArr[i]; - - const sameTagIndex = tagList.indexOf(oldSample.tagName); - if (sameTagIndex === -1) { - this.originDataArr.splice(i, 1); + if (!newTagDictionaries[oldSample.tagName]) { dataRemoveFlag = true; - const loopLength = this.originDataArr.length; - for (let loopStart = i; loopStart < loopLength; loopStart++) { - if (this.originDataArr[loopStart]) { - this.originDataArr[loopStart].sampleIndex = loopStart; - } - } + this.originDataArr.splice(i, 1); } } @@ -1388,17 +1129,10 @@ export default { return false; } let dataAddFlag = false; - // oriData.forEach((runObj) => { const runColor = CommonProperty.commonColorArr[0]; oriData.tags.forEach((tagObj) => { - let sameTagIndex = -1; - this.tagOperateList.some((tagItem, tagIndex) => { - if (tagItem.label === tagObj) { - sameTagIndex = tagIndex; - return true; - } - }); - if (sameTagIndex === -1) { + if (!this.oriDataDictionaries[tagObj]) { + this.oriDataDictionaries[tagObj]=true; this.tagOperateList.push({ label: tagObj, checked: true, @@ -1432,46 +1166,7 @@ export default { }, /** - * Update the run and tag selection status and select all status - * obtain the charts that meet the conditions - * - */ - - updateRunAndTagSelectStateAndFilterResult() { - this.multiSelectedTagNames = {}; - // Update the tag selection status and select all status - let tagReg; - try { - tagReg = new RegExp(this.tagInput); - } catch (e) { - tagReg = new RegExp(this.valiableTagInput); - } - let tagSelectAll = true; - this.tagOperateList.forEach((tagItem) => { - if (tagReg.test(tagItem.label)) { - tagItem.show = true; - if (tagItem.checked) { - this.multiSelectedTagNames[tagItem.label] = true; - } else { - tagSelectAll = false; - } - } else { - tagItem.show = false; - } - }); - this.tagOperateSelectAll = tagSelectAll; - - // Update the charts that meet the filter criteria - this.curFilterTagIndexArr = []; - this.originDataArr.forEach((sampleObject) => { - if (this.multiSelectedTagNames[sampleObject.tagName]) { - this.curFilterTagIndexArr.push(sampleObject.sampleIndex); - } - }); - }, - - /** - * Updating Sliding Block Data + * Update all data * @param {Boolean} ignoreError whether ignore error tip */ @@ -1503,15 +1198,12 @@ export default { const tagAddFlag = this.checkNewDataAndComplete(data); this.$nextTick(() => { + this.multiSelectedTagNames=this.$refs.multiselectGroupComponents.updateSelectedDic(); + this.updateTagInPage(!tagRemoveFlag && !tagAddFlag); + this.resizeCallback(); }); - // Update the run and tag selection status and select all status - // obtain the charts that meet the conditions - - this.updateRunAndTagSelectStateAndFilterResult(); - const tagNumChange = tagRemoveFlag || tagAddFlag; - const tempTagList = []; const propsList = []; @@ -1533,7 +1225,6 @@ export default { }); this.tagPropsList = tempTagList; this.propsList = propsList; - this.getCurPageDataArr(true, true, !tagNumChange); }, this.requestErrorCallback) .catch((e) => { this.$message.error(this.$t('public.dataError')); @@ -1575,6 +1266,7 @@ export default { if (this.firstNum === 0) { return; } + this.smoothValueNumber=Number(val); if (this.smoothSliderValueTimer) { clearTimeout(this.smoothSliderValueTimer); this.smoothSliderValueTimer = null; @@ -1585,6 +1277,30 @@ export default { }, 500); }, + smoothValueChange(val) { + if (!isNaN(val)) { + if (Number(val)===0) { + this.smoothValue=0; + } + if (Number(val)<0) { + this.smoothValue=0; + this.smoothValueNumber=0; + } + if (Number(val)>0) { + if (Number(val)>0.99) { + this.smoothValue=0.99; + this.smoothValueNumber=0.99; + } else { + this.smoothValue=Number(val); + } + } + } + }, + + smoothValueBlur() { + this.smoothValueNumber=this.smoothValue; + }, + /** * Format Absolute Time * @param {String} time string @@ -1781,6 +1497,7 @@ export default { components: { ScalarButton, ScalarCompare, + multiselectGroupComponents, }, }; @@ -1788,8 +1505,9 @@ export default { .cl-scalar-manage { height: 100%; - .w261 { - width: 261px; + .w60 { + width: 60px; + margin-left: 20px; } .scalar-btn { @@ -1941,7 +1659,7 @@ export default { flex-shrink: 0; } .el-slider { - width: 500px; + width: 400px; flex-shrink: 0; .el-input.el-input--small {