|
|
@@ -182,7 +182,7 @@
|
|
|
<el-dialog :title="title" :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false">
|
|
|
<el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
|
|
|
<el-form-item v-if="dialogType === 4" label="选择数据类型" label-width="120px">
|
|
|
- <el-radio-group v-removeAriaHidden v-model="type">
|
|
|
+ <el-radio-group v-removeAriaHidden v-model="type">
|
|
|
<el-radio :label="1">去噪</el-radio>
|
|
|
<el-radio :label="3">扩充</el-radio>
|
|
|
<!-- <el-radio :label="4">特征提取</el-radio> -->
|
|
|
@@ -278,10 +278,15 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
- this.getTableData()
|
|
|
+ this.getTableData();
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ if (this.chart != null && this.chart != "" && this.chart != undefined) {
|
|
|
+ this.chart.dispose();
|
|
|
+ this.chart = null
|
|
|
+ }
|
|
|
},
|
|
|
watch: {
|
|
|
- // fileShowVisible
|
|
|
fileShowVisible(value) {
|
|
|
if (!value) {
|
|
|
this.isTableShow = false
|
|
|
@@ -329,7 +334,7 @@ export default {
|
|
|
handleProcess(type) {
|
|
|
this.dialogVisible = true;
|
|
|
this.dialogType = type
|
|
|
- const relation = [[2, 0], [1, 2], [3, 1],[4, 1], [4, 3] , [5, 4], [6, 4]]
|
|
|
+ const relation = [[2, 0], [1, 2], [3, 1], [4, 1], [4, 3], [5, 4], [6, 4]]
|
|
|
const match = relation.find(item => item[0] === type)[1];
|
|
|
getDataByType(match).then(res => {
|
|
|
this.optionalData = res.data;
|
|
|
@@ -359,11 +364,10 @@ export default {
|
|
|
const url = `${process.env.VUE_APP_BASE_API}${res.data.dataPath}`;
|
|
|
this.fetchLogFile(url)
|
|
|
.then((text) => {
|
|
|
- if (this.chart) {
|
|
|
+ if (this.chart != null && this.chart != "" && this.chart != undefined) {
|
|
|
this.chart.dispose();
|
|
|
this.chart = null
|
|
|
}
|
|
|
- const color = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
|
|
|
switch (res.data.dataType) {
|
|
|
case '0':
|
|
|
const originalData = this.handleFileData(text)
|
|
|
@@ -372,59 +376,7 @@ export default {
|
|
|
this.fileShowVisible = true
|
|
|
this.loading = false
|
|
|
this.$nextTick(() => {
|
|
|
- this.chart = echarts.init(this.$refs.completionChartRef);
|
|
|
- // series数据
|
|
|
- const series = originalContent.map((lineData, index) => ({
|
|
|
- name: `${originalHead[index]}`,
|
|
|
- type: 'line',
|
|
|
- data: lineData,
|
|
|
- stack: 'Total',
|
|
|
- connectNulls: true, // 连接相邻的非空数据点
|
|
|
- markPoint: {
|
|
|
- data: lineData.map((value, idx) => ({
|
|
|
- value: value === 0 ? '缺失' : null,
|
|
|
- xAxis: idx,
|
|
|
- // yAxis: lineData[idx-1],
|
|
|
- yAxis: value,
|
|
|
- itemStyle: { color: color[index] } // 高亮显示缺失值
|
|
|
- })).filter(point => point.value)
|
|
|
- }
|
|
|
- }));
|
|
|
- const option = {
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis'
|
|
|
- },
|
|
|
- legend: {
|
|
|
- data: originalHead,
|
|
|
- textStyle: {//图例文字的样式
|
|
|
- color: '#fff'
|
|
|
- }
|
|
|
- },
|
|
|
- color: color,
|
|
|
- xAxis: {
|
|
|
- type: 'category',
|
|
|
- data: originalContent[0].map((_, index) => index),
|
|
|
- name: 'Index'
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- type: 'value',
|
|
|
- name: 'Value'
|
|
|
- },
|
|
|
- dataZoom: [
|
|
|
- {
|
|
|
- type: 'slider',
|
|
|
- start: 0,
|
|
|
- end: 100
|
|
|
- },
|
|
|
- {
|
|
|
- type: 'inside',
|
|
|
- start: 0,
|
|
|
- end: 100
|
|
|
- }
|
|
|
- ],
|
|
|
- series: series
|
|
|
- };
|
|
|
- this.chart.setOption(option);
|
|
|
+ this.handleChartOption(originalContent, originalHead, true)
|
|
|
})
|
|
|
break;
|
|
|
case '1':
|
|
|
@@ -434,59 +386,7 @@ export default {
|
|
|
this.fileShowVisible = true
|
|
|
this.loading = false
|
|
|
this.$nextTick(() => {
|
|
|
- this.chart = echarts.init(this.$refs.completionChartRef);
|
|
|
- // series数据
|
|
|
- const series = contentData.map((lineData, index) => ({
|
|
|
- name: `${headData[index]}`,
|
|
|
- type: 'line',
|
|
|
- data: lineData,
|
|
|
- stack: 'Total',
|
|
|
- connectNulls: true, // 连接相邻的非空数据点
|
|
|
- markPoint: {
|
|
|
- data: lineData.map((value, idx) => ({
|
|
|
- value: value === 0 ? '缺失' : null,
|
|
|
- xAxis: idx,
|
|
|
- // yAxis: lineData[idx-1],
|
|
|
- yAxis: value,
|
|
|
- itemStyle: { color: color[index] } // 高亮显示缺失值
|
|
|
- })).filter(point => point.value)
|
|
|
- }
|
|
|
- }));
|
|
|
- const option = {
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis'
|
|
|
- },
|
|
|
- legend: {
|
|
|
- data: headData,
|
|
|
- textStyle: {//图例文字的样式
|
|
|
- color: '#fff'
|
|
|
- }
|
|
|
- },
|
|
|
- color: color,
|
|
|
- xAxis: {
|
|
|
- type: 'category',
|
|
|
- data: contentData[0].map((_, index) => index), // 生成x轴下标
|
|
|
- name: 'Index'
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- type: 'value',
|
|
|
- name: 'Value'
|
|
|
- },
|
|
|
- dataZoom: [
|
|
|
- {
|
|
|
- type: 'slider',
|
|
|
- start: 0,
|
|
|
- end: 100
|
|
|
- },
|
|
|
- {
|
|
|
- type: 'inside',
|
|
|
- start: 0,
|
|
|
- end: 100
|
|
|
- }
|
|
|
- ],
|
|
|
- series: series
|
|
|
- };
|
|
|
- this.chart.setOption(option);
|
|
|
+ this.handleChartOption(contentData, headData, false)
|
|
|
})
|
|
|
break;
|
|
|
case '2':
|
|
|
@@ -495,50 +395,7 @@ export default {
|
|
|
const completionlHead = completionData.headData
|
|
|
this.fileShowVisible = true
|
|
|
this.$nextTick(() => {
|
|
|
- this.chart = echarts.init(this.$refs.completionChartRef);
|
|
|
- // series数据
|
|
|
- const series = completionContent.map((lineData, index) => ({
|
|
|
- name: `${completionlHead[index]}`,
|
|
|
- type: 'line',
|
|
|
- data: lineData,
|
|
|
- stack: 'Total',
|
|
|
- connectNulls: true, // 连接相邻的非空数据点
|
|
|
- }));
|
|
|
- const option = {
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis'
|
|
|
- },
|
|
|
- legend: {
|
|
|
- data: completionlHead,
|
|
|
- textStyle: {//图例文字的样式
|
|
|
- color: '#fff'
|
|
|
- }
|
|
|
- },
|
|
|
- color: color,
|
|
|
- xAxis: {
|
|
|
- type: 'category',
|
|
|
- data: completionContent[0].map((_, index) => index),
|
|
|
- name: 'Index'
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- type: 'value',
|
|
|
- name: 'Value'
|
|
|
- },
|
|
|
- dataZoom: [
|
|
|
- {
|
|
|
- type: 'slider',
|
|
|
- start: 0,
|
|
|
- end: 100
|
|
|
- },
|
|
|
- {
|
|
|
- type: 'inside',
|
|
|
- start: 0,
|
|
|
- end: 100
|
|
|
- }
|
|
|
- ],
|
|
|
- series: series
|
|
|
- };
|
|
|
- this.chart.setOption(option);
|
|
|
+ this.handleChartOption(completionContent, completionlHead, false)
|
|
|
})
|
|
|
break;
|
|
|
case '3':
|
|
|
@@ -547,50 +404,7 @@ export default {
|
|
|
const ExtractionHead = ExtractionData.headData
|
|
|
this.fileShowVisible = true
|
|
|
this.$nextTick(() => {
|
|
|
- this.chart = echarts.init(this.$refs.completionChartRef);
|
|
|
- // series数据
|
|
|
- const series = ExtractionContent.map((lineData, index) => ({
|
|
|
- name: `${ExtractionHead[index]}`,
|
|
|
- type: 'line',
|
|
|
- data: lineData,
|
|
|
- stack: 'Total',
|
|
|
- connectNulls: true, // 连接相邻的非空数据点
|
|
|
- }));
|
|
|
- const option = {
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis'
|
|
|
- },
|
|
|
- legend: {
|
|
|
- data: headData,
|
|
|
- textStyle: {//图例文字的样式
|
|
|
- color: '#fff'
|
|
|
- }
|
|
|
- },
|
|
|
- color: color,
|
|
|
- xAxis: {
|
|
|
- type: 'category',
|
|
|
- data: ExtractionContent[0].map((_, index) => index),
|
|
|
- name: 'Index'
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- type: 'value',
|
|
|
- name: 'Value'
|
|
|
- },
|
|
|
- dataZoom: [
|
|
|
- {
|
|
|
- type: 'slider',
|
|
|
- start: 0,
|
|
|
- end: 100
|
|
|
- },
|
|
|
- {
|
|
|
- type: 'inside',
|
|
|
- start: 0,
|
|
|
- end: 100
|
|
|
- }
|
|
|
- ],
|
|
|
- series: series
|
|
|
- };
|
|
|
- this.chart.setOption(option);
|
|
|
+ this.handleChartOption(ExtractionContent, ExtractionHead, false)
|
|
|
})
|
|
|
break;
|
|
|
case '4':
|
|
|
@@ -599,38 +413,7 @@ export default {
|
|
|
const assessmenthead = assessmentData.headData
|
|
|
this.fileShowVisible = true
|
|
|
this.$nextTick(() => {
|
|
|
- this.chart = echarts.init(this.$refs.completionChartRef);
|
|
|
- // series数据
|
|
|
- const series = assessmentcontent.map((lineData, index) => ({
|
|
|
- name: `${assessmenthead[index]}`,
|
|
|
- type: 'line',
|
|
|
- data: lineData,
|
|
|
- stack: 'Total',
|
|
|
- connectNulls: true, // 连接相邻的非空数据点
|
|
|
- }));
|
|
|
- const option = {
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis'
|
|
|
- },
|
|
|
- legend: {
|
|
|
- data: assessmenthead,
|
|
|
- textStyle: {//图例文字的样式
|
|
|
- color: '#fff'
|
|
|
- }
|
|
|
- },
|
|
|
- color: color,
|
|
|
- xAxis: {
|
|
|
- type: 'category',
|
|
|
- data: assessmentcontent[0].map((_, index) => index), // 生成x轴下标
|
|
|
- name: 'Index'
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- type: 'value',
|
|
|
- name: 'Value'
|
|
|
- },
|
|
|
- series: series
|
|
|
- };
|
|
|
- this.chart.setOption(option);
|
|
|
+ this.handleChartOption(assessmentcontent, assessmenthead, false)
|
|
|
})
|
|
|
break;
|
|
|
case '5':
|
|
|
@@ -691,16 +474,38 @@ export default {
|
|
|
return { contentData: completionContent, headData: completionHead, timeData }
|
|
|
},
|
|
|
// 图表设置
|
|
|
- handleChartOption(content, head) {
|
|
|
+ handleChartOption(content, head, ismarkPoint) {
|
|
|
+ const color = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
|
|
|
this.chart = echarts.init(this.$refs.completionChartRef);
|
|
|
// series数据
|
|
|
- const series = content.map((lineData, index) => ({
|
|
|
- name: `${head[index]}`,
|
|
|
- type: 'line',
|
|
|
- data: lineData,
|
|
|
- stack: 'Total',
|
|
|
- connectNulls: true, // 连接相邻的非空数据点
|
|
|
- }));
|
|
|
+ let series
|
|
|
+ if (ismarkPoint) {
|
|
|
+ series = content.map((lineData, index) => ({
|
|
|
+ name: `${head[index]}`,
|
|
|
+ type: 'line',
|
|
|
+ data: lineData,
|
|
|
+ stack: 'Total',
|
|
|
+ connectNulls: true, // 连接相邻的非空数据点
|
|
|
+ markPoint: {
|
|
|
+ data: lineData.map((value, idx) => ({
|
|
|
+ value: value === 0 ? '缺失' : null,
|
|
|
+ xAxis: idx,
|
|
|
+ // yAxis: lineData[idx-1],
|
|
|
+ yAxis: value,
|
|
|
+ itemStyle: { color: color[index] } // 高亮显示缺失值
|
|
|
+ })).filter(point => point.value)
|
|
|
+ }
|
|
|
+ }));
|
|
|
+ } else {
|
|
|
+ series = content.map((lineData, index) => ({
|
|
|
+ name: `${head[index]}`,
|
|
|
+ type: 'line',
|
|
|
+ data: lineData,
|
|
|
+ stack: 'Total',
|
|
|
+ connectNulls: true,
|
|
|
+
|
|
|
+ }));
|
|
|
+ }
|
|
|
const option = {
|
|
|
tooltip: {
|
|
|
trigger: 'axis'
|
