Skip to content

M
mindinsight

MindSpore / mindinsight

通知 8
Star 4
Fork 2
M
mindinsight
提交 cfe41195 编写于 作者: P ph
浏览文件
操作

add histogram

上级 5c27dcc9
隐藏空白更改
内联 并排
Showing with 309 addition and 521 deletion
mindinsight/ui/src/components/header.vue
浏览文件 @ cfe41195
...@@ -38,6 +38,7 @@ limitations under the License. ...@@ -38,6 +38,7 @@ limitations under the License.
<div class="cl-header-right" <div class="cl-header-right"
v-if="this.$route.path.indexOf('/scalar') > 0 v-if="this.$route.path.indexOf('/scalar') > 0
|| this.$route.path.indexOf('/image') > 0 || this.$route.path.indexOf('/image') > 0
|| this.$route.path.indexOf('/histogram') > 0
|| this.$route.path.indexOf('/training-dashboard') > 0"> || this.$route.path.indexOf('/training-dashboard') > 0">
<!-- automatic refresh switch --> <!-- automatic refresh switch -->
<el-switch v-model="isTimeReload" <el-switch v-model="isTimeReload"
......
mindinsight/ui/src/locales/zh-cn.json
浏览文件 @ cfe41195
...@@ -7,7 +7,8 @@ ...@@ -7,7 +7,8 @@
"reset": "重置", "reset": "重置",
"tagFilterPlaceHolder": "请输入需要的标签(支持正则表达式)", "tagFilterPlaceHolder": "请输入需要的标签(支持正则表达式)",
"dataError": "获取到的数据异常", "dataError": "获取到的数据异常",
"regIllegal": "请输入正确的检索条件" "regIllegal": "请输入正确的检索条件",
"stayTuned": "敬请期待"
}, },
"symbols": { "symbols": {
"leftbracket": "(", "leftbracket": "(",
...@@ -99,6 +100,18 @@ ...@@ -99,6 +100,18 @@
"setBright": "亮度调整", "setBright": "亮度调整",
"setContrast": "对比度调整" "setContrast": "对比度调整"
}, },
"histogram": {
"titleText": "参数分布图",
"xAxisTitle": "水平轴",
"viewType": "直方图模式",
"centerValue": "中心值",
"step": "步骤",
"relativeTime": "相对时间",
"absoluteTime": "绝对时间",
"overlay": "覆盖",
"offset": "偏移",
"fullScreen": "切换全屏"
},
"dataMap": { "dataMap": {
"titleText": "数据图可视" "titleText": "数据图可视"
}, },
...@@ -146,11 +159,12 @@ ...@@ -146,11 +159,12 @@
"50545002": "请求API的HTTP方法错误", "50545002": "请求API的HTTP方法错误",
"50545005": "训练作业不存在", "50545005": "训练作业不存在",
"50545007": "Summary数据正在被加载，请等待Summary数据加载结束", "50545007": "Summary数据正在被加载，请等待Summary数据加载结束",
"50545009": "查询的节点不在图中", "50545009": "查询的节点不在图中，请刷新",
"5054500A": "训练作业ID进行URL解码失败", "5054500A": "训练作业ID进行URL解码失败",
"5054500C": "计算图不存在，请刷新", "5054500C": "计算图不存在，请刷新",
"5054500D": "图片数据不存在，请刷新", "5054500D": "图片数据不存在，请刷新",
"5054500E": "标量数据不存在，请刷新", "5054500E": "标量数据不存在，请刷新",
"5054500F": "参数分布图数据不存在，请刷新",
"50542082": "模型名称缺失", "50542082": "模型名称缺失",
"50542085": "模型名称不合法", "50542085": "模型名称不合法",
......
mindinsight/ui/src/router.js
浏览文件 @ cfe41195
...@@ -46,6 +46,10 @@ export default new Router({ ...@@ -46,6 +46,10 @@ export default new Router({
path: '/train-manage/image', path: '/train-manage/image',
component: () => import('./views/train-manage/image.vue'), component: () => import('./views/train-manage/image.vue'),
}, },
{
path: '/train-manage/histogram',
component: () => import('./views/train-manage/histogram.vue'),
},
{ {
path: '/train-manage/graph', path: '/train-manage/graph',
component: () => import('./views/train-manage/graph.vue'), component: () => import('./views/train-manage/graph.vue'),
......
mindinsight/ui/src/services/request-service.js
浏览文件 @ cfe41195
...@@ -114,4 +114,11 @@ export default { ...@@ -114,4 +114,11 @@ export default {
params: params, params: params,
}); });
}, },
getHistogramData(params) {
return axios({
method: 'get',
url: '/v1/mindinsight/datavisual/histograms',
params: params,
});
},
}; };
mindinsight/ui/src/views/train-manage/scalar-compare.vue
浏览文件 @ cfe41195
...@@ -809,16 +809,60 @@ export default { ...@@ -809,16 +809,60 @@ export default {
_this.$t('scalar.absoluteTime') + _this.$t('scalar.absoluteTime') +
'</td></tr>'; '</td></tr>';
let strBody = ''; let strBody = '';
const runArr=[];
const detialArr=[];
let curStep=null;
let dataCount = 0; let dataCount = 0;
params.forEach((parma) => { params.forEach((parma) => {
if (parma.componentIndex % 2 === 0) { if (parma.componentIndex % 2 === 0) {
let addFlag=true;
const curIndex = parseInt(parma.componentIndex / 2); const curIndex = parseInt(parma.componentIndex / 2);
let curSerieOriData; const curSerieOriData=_this.charData[curIndex]
? _this.charData[curIndex].valueData
: null;
if (_this.charData[curIndex]) { if (!curSerieOriData) {
curSerieOriData = _this.charData[curIndex].valueData; 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++; 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 += strBody +=
`<td style="border-radius:50%;width:15px;height:15px;vertical-align: middle;` + `<td style="border-radius:50%;width:15px;height:15px;vertical-align: middle;` +
`margin-right: 5px;background-color:` + `margin-right: 5px;background-color:` +
......
mindinsight/ui/src/views/train-manage/scalar.vue
浏览文件 @ cfe41195
...@@ -34,72 +34,10 @@ limitations under the License. ...@@ -34,72 +34,10 @@ limitations under the License.
<!--operation area --> <!--operation area -->
<div class="cl-eval-operate-content" <div class="cl-eval-operate-content"
v-show="!compare"> v-show="!compare">
<!-- tag select --> <multiselectGroupComponents ref="multiselectGroupComponents"
<div class="tag-select-content"> :checkListArr="tagOperateList"
<div class="title mr24">{{$t("scalar.tagSelectTitle")}}</div> @selectedChange="tagSelectedChanged"
<!-- Select All --> ></multiselectGroupComponents>
<div class="select-all mr24"
@click="tagSelectAll">
<span class="multiCheckBox-border multi-check-border"
:class="tagOperateSelectAll ? 'checkbox-checked' : 'checkbox-unchecked'"></span>
<span class="label-item select-disable">{{$t('scalar.selectAll')}}</span>
</div>
<!-- tag search -->
<el-input class="w261"
v-model="tagInput"
@input="filterByTagName"
v-if="headTagFullScreen"
:placeholder="$t('public.tagFilterPlaceHolder')"></el-input>
<!-- tag list -->
<div class="select-item-content"
v-if="!headTagFullScreen"
ref="tagSelectItemContent">
<div class="select-item"
v-for="(tagItem, tagIndex) in tagOperateList"
:key="tagIndex"
@click="tagItemClick(tagItem)"
v-show="tagItem.show">
<span class="multiCheckBox-border multi-check-border"
:class="tagItem.checked ? 'checkbox-checked' : 'checkbox-unchecked'"></span>
<span class="label-item">
<el-tooltip effect="dark"
popper-class="tooltip-show-content"
:content="tagItem.label"
placement="top">
<span class="select-disable">{{tagItem.label}}</span>
</el-tooltip>
</span>
</div>
</div>
<!-- tag Expand/Collapse -->
<div class="run-select-content-open"
@click="toggleHeadTagFullScreen"
v-if="tagOverRowFlag || tagInput"
v-show="!headTagFullScreen">{{$t("scalar.open")}}</div>
<div class="run-select-content-open"
@click="toggleHeadTagFullScreen"
v-if="tagOverRowFlag || headTagFullScreen"
v-show="headTagFullScreen">{{$t("scalar.close")}}</div>
</div>
<div class="run-select-content-all"
v-if="headTagFullScreen">
<div class="select-item"
v-for="(tagItem, tagIndex) in tagOperateList"
:key="tagIndex"
@click="tagItemClick(tagItem)"
v-show="tagItem.show">
<span class="multiCheckBox-border multi-check-border"
:class="tagItem.checked ? 'checkbox-checked' : 'checkbox-unchecked'"></span>
<span class="label-item">
<el-tooltip effect="dark"
popper-class="tooltip-show-content"
:content="tagItem.label"
placement="top">
<span class="select-disable">{{tagItem.label}}</span>
</el-tooltip>
</span>
</div>
</div>
</div> </div>
<!-- Slider --> <!-- Slider -->
<div class="cl-eval-slider-operate-content" <div class="cl-eval-slider-operate-content"
...@@ -119,7 +57,13 @@ limitations under the License. ...@@ -119,7 +57,13 @@ limitations under the License.
:step="0.01" :step="0.01"
:max="0.99" :max="0.99"
@input="updataInputValue" @input="updataInputValue"
show-input></el-slider> ></el-slider>
<el-input v-model="smoothValueNumber"
class="w60"
@input="smoothValueChange"
@blur="smoothValueBlur"
></el-input>
</div> </div>
<!-- Content display --> <!-- Content display -->
<div class="cl-eval-show-data-content" <div class="cl-eval-show-data-content"
...@@ -170,7 +114,7 @@ limitations under the License. ...@@ -170,7 +114,7 @@ limitations under the License.
:current-page="pageIndex + 1" :current-page="pageIndex + 1"
:page-size="pageNum" :page-size="pageNum"
layout="total, prev, pager, next, jumper" layout="total, prev, pager, next, jumper"
:total="curFilterTagIndexArr.length"> :total="curFilterSamples.length">
</el-pagination> </el-pagination>
</div> </div>
...@@ -190,30 +134,27 @@ import echarts from 'echarts'; ...@@ -190,30 +134,27 @@ import echarts from 'echarts';
import RequestService from '../../services/request-service'; import RequestService from '../../services/request-service';
import CommonProperty from '../../common/common-property'; import CommonProperty from '../../common/common-property';
import ScalarCompare from './scalar-compare'; import ScalarCompare from './scalar-compare';
import multiselectGroupComponents from '../../components/multiselectGroup.vue';
export default { export default {
data() { data() {
return { return {
trainingJobId: '',
firstNum: 0, // First time firstNum: 0, // First time
isActive: 0, // Horizontal axis selected value isActive: 0, // Horizontal axis selected value
initOver: false, // Indicates whether the initialization is complete. initOver: false, // Indicates whether the initialization is complete.
autoUpdateTimer: null, // Automatic refresh timer 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 charResizeTimer: null, // Delay after the window size is changed
multiSelectedTagNames: {}, // selected tag name multiSelectedTagNames: {}, // selected tag name
curFilterTagIndexArr: [], // Chart subscript curFilterSamples: [], // list of chart that meet the current filter criteria
headTagFullScreen: false, // Indicates whether tag is expanded
tagOperateSelectAll: true, // tag selectAll
tagOperateList: [], // Array selected by tag tagOperateList: [], // Array selected by tag
tagPropsList: [], // tag props tagPropsList: [], // tag props
propsList: [], // dataList props propsList: [], // dataList props
smoothValue: 0, // Initial smoothness of the slider smoothValue: 0, // Initial smoothness of the slider
smoothValueNumber: 0,
smoothSliderValueTimer: null, // Smoothness slider timer smoothSliderValueTimer: null, // Smoothness slider timer
DomIdIndex: 0, // DomId num DomIdIndex: 0, // DomId num
originDataArr: [], // Original data originDataArr: [], // Original data
oriDataDictionaries: {}, // Dictionary that contains all the current tags
curPageArr: [], // data of the current page curPageArr: [], // data of the current page
pageIndex: 0, // Current page number pageIndex: 0, // Current page number
pageNum: 6, // Number of records per page pageNum: 6, // Number of records per page
...@@ -225,8 +166,7 @@ export default { ...@@ -225,8 +166,7 @@ export default {
compare: false, // Comparison Page compare: false, // Comparison Page
scalarCompare: this.$t('scalar')['comparison'], scalarCompare: this.$t('scalar')['comparison'],
abort: false, // charts that have not been drawn. abort: false, // charts that have not been drawn.
tagOverRowFlag: false, // the value of tag is greater than one line trainingJobId: this.$route.query.train_id, // ID of the current training job
perSelectItemMarginBottom: 1, // bottom of each selection box
}; };
}, },
computed: { computed: {
...@@ -296,12 +236,6 @@ export default { ...@@ -296,12 +236,6 @@ export default {
this.smoothSliderValueTimer = null; 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 // Remove Chart Calculation Delay
if (this.charResizeTimer) { if (this.charResizeTimer) {
clearTimeout(this.charResizeTimer); clearTimeout(this.charResizeTimer);
...@@ -315,27 +249,18 @@ export default { ...@@ -315,27 +249,18 @@ export default {
} }
}, },
mounted() { mounted() {
this.$nextTick(() => { // Adding a Listener
if (this.$route.query && this.$route.query.train_id) { window.addEventListener('resize', this.resizeCallback, false);
this.trainingJobId = this.$route.query.train_id;
} else {
this.trainingJobId = '';
this.$message.error(this.$t('trainingDashboard.invalidId'));
return;
}
// Adding a Listener
this.getCharMainContentwidth();
// Initializing Data // Initializing Data
this.getScalarsList(); this.getScalarsList();
this.firstNum = 1; this.firstNum = 1;
// auto refresh // auto refresh
if (this.isTimeReload) { if (this.isTimeReload) {
this.autoUpdateSamples(); this.autoUpdateSamples();
} }
});
}, },
methods: { methods: {
/** /**
...@@ -364,42 +289,43 @@ export default { ...@@ -364,42 +289,43 @@ export default {
const data = res.data.train_jobs[0]; const data = res.data.train_jobs[0];
const runNmeColor = CommonProperty.commonColorArr[0]; const runNmeColor = CommonProperty.commonColorArr[0];
data.tags.forEach((tagObj) => { data.tags.forEach((tagObj) => {
// Add the tag list if (!this.oriDataDictionaries[tagObj]) {
this.multiSelectedTagNames[tagObj] = true; this.oriDataDictionaries[tagObj]=true;
tempTagList.push({ // Add the tag list
label: tagObj, tempTagList.push({
checked: true, label: tagObj,
show: true, checked: true,
}); show: true,
const sampleIndex = dataList.length; });
this.curFilterTagIndexArr.push(sampleIndex); const sampleIndex = dataList.length;
// Adding Chart Data // Adding Chart Data
dataList.push({ dataList.push({
tagName: tagObj, tagName: tagObj,
runNames: data.name, runNames: data.name,
colors: runNmeColor, colors: runNmeColor,
show: false, show: false,
updateFlag: false, updateFlag: false,
dataRemove: false, dataRemove: false,
fullScreen: false, fullScreen: false,
sampleIndex: sampleIndex, sampleIndex: sampleIndex,
domId: 'prDom' + this.DomIdIndex, domId: 'prDom' + this.DomIdIndex,
charData: { charData: {
oriData: [], oriData: [],
charOption: {}, charOption: {},
}, },
zoomData: [null, null], zoomData: [null, null],
zoomDataTimer: null, zoomDataTimer: null,
charObj: null, charObj: null,
}); });
propsList.push({ propsList.push({
tagName: tagObj, tagName: tagObj,
runNames: data.name, runNames: data.name,
colors: '', colors: '',
}); });
this.DomIdIndex++; this.DomIdIndex++;
}
}); });
this.tagOperateList = tempTagList; this.tagOperateList = tempTagList;
this.tagPropsList = JSON.parse(JSON.stringify(tempTagList)); this.tagPropsList = JSON.parse(JSON.stringify(tempTagList));
...@@ -411,16 +337,12 @@ export default { ...@@ -411,16 +337,12 @@ export default {
this.initOver = true; this.initOver = true;
this.$nextTick(() => { this.$nextTick(() => {
this.multiSelectedTagNames=this.$refs.multiselectGroupComponents.updateSelectedDic();
// Obtains data on the current page
this.updateTagInPage();
this.resizeCallback(); 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) }, this.requestErrorCallback)
.catch((e) => { .catch((e) => {
this.$message.error(this.$t('public.dataError')); this.$message.error(this.$t('public.dataError'));
...@@ -429,15 +351,13 @@ export default { ...@@ -429,15 +351,13 @@ export default {
/** /**
* Obtains data on a specified page * 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 * @param {Boolen} noPageIndexChange // The page number does not change
*/ */
getCurPageDataArr(fresh, newPageData, noPageIndexChange) { getCurPageDataArr(noPageIndexChange) {
if (!noPageIndexChange) { if (!noPageIndexChange) {
this.curPageArr.forEach((sampleObject) => { this.curPageArr.forEach((sampleItem) => {
sampleObject.show = false; sampleItem.show = false;
}); });
} }
const startIndex = this.pageIndex * this.pageNum; const startIndex = this.pageIndex * this.pageNum;
...@@ -445,159 +365,126 @@ export default { ...@@ -445,159 +365,126 @@ export default {
const curPageArr = []; const curPageArr = [];
for (let i = startIndex; i < endIndex; i++) { for (let i = startIndex; i < endIndex; i++) {
const sampleIndex = this.curFilterTagIndexArr[i]; const sampleItem=this.curFilterSamples[i];
if (sampleIndex !== undefined && this.originDataArr[sampleIndex]) { if (sampleItem) {
this.originDataArr[sampleIndex].updateFlag = true; sampleItem.updateFlag=true;
this.originDataArr[sampleIndex].show = true; sampleItem.show=true;
curPageArr.push(this.originDataArr[sampleIndex]); curPageArr.push(sampleItem);
} }
} }
this.curPageArr = curPageArr;
if (fresh) { this.curPageArr = curPageArr;
this.$nextTick(() => { this.updateCurPageSamples();
this.freshCurPageData(newPageData);
});
}
}, },
/** /**
* Updates data in a specified tag * Load the data on the current page
* @param {Number} sampleIndex Chart subscript
*/ */
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) { RequestService.getScalarsSample(params).then((res)=>{
return promiseItem.catch(function(err) { // error
return err; if (!res || !res.data || !res.data.metadatas) {
}); if (sampleObject.charObj) {
})) sampleObject.charObj.clear();
.then((res) => {
// error
if (!res || !res.length) {
return;
} }
let scalarIndex = 0; return;
let hasInvalidData = false; }
for (let i = 0; i < res.length; i++) { let hasInvalidData = false;
if (!res[i] || !res[i].data) {
sampleObject.charObj.clear();
return;
}
if (sampleObject.charObj) { if (sampleObject.charObj) {
sampleObject.charObj.showLoading(); sampleObject.charObj.showLoading();
} }
const resData = res[i].data; const resData = res.data;
const tempObject = {
valueData: {
stepData: [],
absData: [],
relativeData: [],
},
logData: {
stepData: [],
absData: [],
relativeData: [],
},
};
let relativeTimeBench = 0;
if (resData.metadatas.length) {
relativeTimeBench = resData.metadatas[0].wall_time;
}
// Initializing Chart Data const tempObject = {
resData.metadatas.forEach((metaData) => { valueData: {
if (metaData.value === null && !hasInvalidData) { stepData: [],
hasInvalidData = true; absData: [],
} relativeData: [],
tempObject.valueData.stepData.push([ },
metaData.step, logData: {
metaData.value, stepData: [],
]); absData: [],
tempObject.valueData.absData.push([ relativeData: [],
metaData.wall_time, },
metaData.value, };
]); let relativeTimeBench = 0;
tempObject.valueData.relativeData.push([ if (resData.metadatas.length) {
metaData.wall_time - relativeTimeBench, relativeTimeBench = resData.metadatas[0].wall_time;
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,
]);
});
sampleObject.charData.oriData[scalarIndex] = tempObject; // Initializing Chart Data
scalarIndex++; resData.metadatas.forEach((metaData) => {
if (metaData.value === null && !hasInvalidData) {
hasInvalidData = true;
} }
if (hasInvalidData) { tempObject.valueData.stepData.push([
this.$set(this.originDataArr[sampleIndex], 'invalidData', true); metaData.step,
} metaData.value,
sampleObject.charData.charOption = this.formateCharOption( ]);
sampleIndex, 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(() => { sampleObject.charData.oriData[0] = tempObject;
if (sampleObject.charObj) {
sampleObject.charObj.hideLoading();
}
// Draw chart if (hasInvalidData) {
if (!this.compare) { this.$set(sampleObject, 'invalidData', true);
this.updateOrCreateChar(sampleIndex); }
} else { sampleObject.charData.charOption = this.formateCharOption(
this.abort = true; sampleIndex,
} );
});
})
.catch((error) => {});
},
/** this.$forceUpdate();
* add promise
* @param {Object}
* @return {Object} response || error
*/
addPromise(params) { this.$nextTick(() => {
return new Promise((resolve, reject) => { if (sampleObject.charObj) {
RequestService.getScalarsSample(params) sampleObject.charObj.hideLoading();
.then((res) => { }
if (res) {
res.params = params; // Draw chart
resolve(res); if (!this.compare) {
} this.updateOrCreateChar(sampleIndex);
}) } else {
.catch((error) => { this.abort = true;
if (error) { }
reject(error); });
} }).catch((e)=>{
}); if (sampleObject.charObj) {
sampleObject.charObj.clear();
}
});
}); });
}, },
/** /**
* Formatting Chart Data * Formatting Chart Data
* @param {Number} sampleIndex Chart subscript * @param {Number} sampleIndex Chart subscript
...@@ -1014,130 +901,25 @@ export default { ...@@ -1014,130 +901,25 @@ export default {
}, 0); }, 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 * Update Chart by tag
* @param {Object} tagItem Current tag * @param {Boolean} noPageDataNumChange No new data is added or deleted
*/ */
tagItemClick(tagItem) { updateTagInPage(noPageDataNumChange) {
if (!tagItem) { const curFilterSamples=[];
return; // Obtains the chart subscript
} this.originDataArr.forEach((sampleItem) => {
tagItem.checked = !tagItem.checked; if (this.multiSelectedTagNames[sampleItem.tagName]) {
curFilterSamples.push(sampleItem);
// 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;
} }
}); });
this.tagOperateSelectAll = tagSellectAll;
// Update Chart this.curFilterSamples = curFilterSamples;
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;
// Obtains data on the current page // Obtains data on the current page
this.getCurPageDataArr(true, true); this.getCurPageDataArr(noPageDataNumChange);
}, },
/** /**
...@@ -1218,39 +1000,31 @@ export default { ...@@ -1218,39 +1000,31 @@ export default {
this.pageIndex = pageIndex - 1; this.pageIndex = pageIndex - 1;
// Load the data on the current page // Load the data on the current page
this.getCurPageDataArr(true, true); this.getCurPageDataArr();
}, },
/** /**
* Load the data on the current page * the selected label is changed
* @param {Boolen} newPageData new chart data exists on the current page * @param {Object} selectedItemDict Dictionary containing the selected tags
*/ */
freshCurPageData(newPageData) { tagSelectedChanged(selectedItemDict) {
this.curPageArr.forEach((sampleObject) => { if (!selectedItemDict) {
if (sampleObject.charObj && !newPageData) { return;
this.updateOrCreateChar(sampleObject.sampleIndex); }
} else { this.multiSelectedTagNames=selectedItemDict;
this.updateSampleData(sampleObject.sampleIndex); // Reset to the first page
} this.pageIndex=0;
}); this.updateTagInPage();
}, },
/** /**
*window resize *window resize
*/ */
resizeCallback() { resizeCallback() {
if (!this.compare) { if (!this.compare) {
// Expand/Collapse show
const tagSelectItemContent = this.$refs.tagSelectItemContent;
if (tagSelectItemContent) {
this.tagOverRowFlag =
tagSelectItemContent.clientHeight <
tagSelectItemContent.scrollHeight - this.perSelectItemMarginBottom;
}
if (this.charResizeTimer) { if (this.charResizeTimer) {
clearTimeout(this.charResizeTimer); clearTimeout(this.charResizeTimer);
this.charResizeTimer = null; this.charResizeTimer = null;
...@@ -1266,26 +1040,17 @@ export default { ...@@ -1266,26 +1040,17 @@ export default {
} }
}, },
/**
* Add Listening
*/
getCharMainContentwidth() {
window.addEventListener('resize', this.resizeCallback, false);
},
/** /**
* Clear data * Clear data
*/ */
clearAllData() { clearAllData() {
this.multiSelectedTagNames = {}; this.multiSelectedTagNames = {};
this.curFilterTagIndexArr = []; this.curFilterSamples = [];
this.tagOperateSelectAll = true;
this.tagOperateList = []; this.tagOperateList = [];
this.pageIndex = 0; this.pageIndex = 0;
this.originDataArr = []; this.originDataArr = [];
this.oriDataDictionaries={};
this.curPageArr = []; this.curPageArr = [];
this.tagPropsList = []; this.tagPropsList = [];
this.propsList = []; this.propsList = [];
...@@ -1316,18 +1081,6 @@ export default { ...@@ -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 * Delete the data that does not exist
* @param {Object} oriData Original run and tag data * @param {Object} oriData Original run and tag data
...@@ -1337,21 +1090,17 @@ export default { ...@@ -1337,21 +1090,17 @@ export default {
if (!oriData) { if (!oriData) {
return false; return false;
} }
const tagList = []; // tag list const newTagDictionaries={}; // Index of the tag in the new data
let dataRemoveFlag = false; let dataRemoveFlag = false;
// Obtains the current tag and run list oriData.tags.forEach((tagName) => {
oriData.tags.forEach((tagObj) => { newTagDictionaries[tagName]=true;
let sameTagIndex = tagList.indexOf(tagObj);
if (sameTagIndex === -1) {
sameTagIndex = tagList.length;
tagList.push(tagObj);
}
}); });
// Delete the tag that does not exist // Delete the tag that does not exist
const oldTagListLength = this.tagOperateList.length; const oldTagListLength = this.tagOperateList.length;
for (let i = oldTagListLength - 1; i >= 0; i--) { for (let i = oldTagListLength - 1; i >= 0; i--) {
if (tagList.indexOf(this.tagOperateList[i].label) === -1) { if (!newTagDictionaries[this.tagOperateList[i].label]) {
dataRemoveFlag = true; dataRemoveFlag = true;
delete this.oriDataDictionaries[this.tagOperateList[i].label];
this.tagOperateList.splice(i, 1); this.tagOperateList.splice(i, 1);
} }
} }
...@@ -1361,17 +1110,9 @@ export default { ...@@ -1361,17 +1110,9 @@ export default {
for (let i = oldSampleLength - 1; i >= 0; i--) { for (let i = oldSampleLength - 1; i >= 0; i--) {
const oldSample = this.originDataArr[i]; const oldSample = this.originDataArr[i];
if (!newTagDictionaries[oldSample.tagName]) {
const sameTagIndex = tagList.indexOf(oldSample.tagName);
if (sameTagIndex === -1) {
this.originDataArr.splice(i, 1);
dataRemoveFlag = true; dataRemoveFlag = true;
const loopLength = this.originDataArr.length; this.originDataArr.splice(i, 1);
for (let loopStart = i; loopStart < loopLength; loopStart++) {
if (this.originDataArr[loopStart]) {
this.originDataArr[loopStart].sampleIndex = loopStart;
}
}
} }
} }
...@@ -1388,17 +1129,10 @@ export default { ...@@ -1388,17 +1129,10 @@ export default {
return false; return false;
} }
let dataAddFlag = false; let dataAddFlag = false;
// oriData.forEach((runObj) => {
const runColor = CommonProperty.commonColorArr[0]; const runColor = CommonProperty.commonColorArr[0];
oriData.tags.forEach((tagObj) => { oriData.tags.forEach((tagObj) => {
let sameTagIndex = -1; if (!this.oriDataDictionaries[tagObj]) {
this.tagOperateList.some((tagItem, tagIndex) => { this.oriDataDictionaries[tagObj]=true;
if (tagItem.label === tagObj) {
sameTagIndex = tagIndex;
return true;
}
});
if (sameTagIndex === -1) {
this.tagOperateList.push({ this.tagOperateList.push({
label: tagObj, label: tagObj,
checked: true, checked: true,
...@@ -1432,46 +1166,7 @@ export default { ...@@ -1432,46 +1166,7 @@ export default {
}, },
/** /**
* Update the run and tag selection status and select all status * Update all data
* 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
* @param {Boolean} ignoreError whether ignore error tip * @param {Boolean} ignoreError whether ignore error tip
*/ */
...@@ -1503,15 +1198,12 @@ export default { ...@@ -1503,15 +1198,12 @@ export default {
const tagAddFlag = this.checkNewDataAndComplete(data); const tagAddFlag = this.checkNewDataAndComplete(data);
this.$nextTick(() => { this.$nextTick(() => {
this.multiSelectedTagNames=this.$refs.multiselectGroupComponents.updateSelectedDic();
this.updateTagInPage(!tagRemoveFlag && !tagAddFlag);
this.resizeCallback(); 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 tempTagList = [];
const propsList = []; const propsList = [];
...@@ -1533,7 +1225,6 @@ export default { ...@@ -1533,7 +1225,6 @@ export default {
}); });
this.tagPropsList = tempTagList; this.tagPropsList = tempTagList;
this.propsList = propsList; this.propsList = propsList;
this.getCurPageDataArr(true, true, !tagNumChange);
}, this.requestErrorCallback) }, this.requestErrorCallback)
.catch((e) => { .catch((e) => {
this.$message.error(this.$t('public.dataError')); this.$message.error(this.$t('public.dataError'));
...@@ -1575,6 +1266,7 @@ export default { ...@@ -1575,6 +1266,7 @@ export default {
if (this.firstNum === 0) { if (this.firstNum === 0) {
return; return;
} }
this.smoothValueNumber=Number(val);
if (this.smoothSliderValueTimer) { if (this.smoothSliderValueTimer) {
clearTimeout(this.smoothSliderValueTimer); clearTimeout(this.smoothSliderValueTimer);
this.smoothSliderValueTimer = null; this.smoothSliderValueTimer = null;
...@@ -1585,6 +1277,30 @@ export default { ...@@ -1585,6 +1277,30 @@ export default {
}, 500); }, 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 * Format Absolute Time
* @param {String} time string * @param {String} time string
...@@ -1781,6 +1497,7 @@ export default { ...@@ -1781,6 +1497,7 @@ export default {
components: { components: {
ScalarButton, ScalarButton,
ScalarCompare, ScalarCompare,
multiselectGroupComponents,
}, },
}; };
</script> </script>
...@@ -1788,8 +1505,9 @@ export default { ...@@ -1788,8 +1505,9 @@ export default {
.cl-scalar-manage { .cl-scalar-manage {
height: 100%; height: 100%;
.w261 { .w60 {
width: 261px; width: 60px;
margin-left: 20px;
} }
.scalar-btn { .scalar-btn {
...@@ -1941,7 +1659,7 @@ export default { ...@@ -1941,7 +1659,7 @@ export default {
flex-shrink: 0; flex-shrink: 0;
} }
.el-slider { .el-slider {
width: 500px; width: 400px;
flex-shrink: 0; flex-shrink: 0;
.el-input.el-input--small { .el-input.el-input--small {
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或