|
@@ -5,7 +5,7 @@
|
|
|
<!-- 原始数据 -->
|
|
|
<div class="tPanel">
|
|
|
<el-table size="mini" :data="originalList">
|
|
|
- <el-table-column prop="dataName" label="数据" align="center">
|
|
|
+ <el-table-column prop="resultDataName" label="数据" align="center">
|
|
|
</el-table-column>
|
|
|
<el-table-column prop="status" label="状态" align="center">
|
|
|
</el-table-column>
|
|
@@ -14,10 +14,11 @@
|
|
|
<!-- 补全 -->
|
|
|
<div class="tPanel">
|
|
|
<el-table size="mini" :data="completionList">
|
|
|
- <el-table-column prop="dataName" label="数据" align="center">
|
|
|
+ <el-table-column prop="resultDataName" label="数据" align="center">
|
|
|
<template slot-scope="scope">
|
|
|
- <span class="file" @click="handleFile(scope.row.dataPath, scope.row.dataType)">{{ scope.row.dataName
|
|
|
- }}</span>
|
|
|
+ <span class="file" @click="handleFile(scope.row.resultDataId,scope.row.processType)">{{
|
|
|
+ scope.row.resultDataName
|
|
|
+ }}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column prop="status" label="状态" align="center">
|
|
@@ -27,10 +28,11 @@
|
|
|
<!-- 特征提取 -->
|
|
|
<div class="tPanel">
|
|
|
<el-table size="mini" :data="featureExtractionList">
|
|
|
- <el-table-column prop="dataName" label="数据" align="center">
|
|
|
+ <el-table-column prop="resultDataName" label="数据" align="center">
|
|
|
<template slot-scope="scope">
|
|
|
- <span class="file" @click="handleFile(scope.row.dataPath, scope.row.dataType)">{{ scope.row.dataName
|
|
|
- }}</span>
|
|
|
+ <span class="file" @click="handleFile(scope.row.resultDataId,scope.row.processType)">{{
|
|
|
+ scope.row.resultDataName
|
|
|
+ }}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column prop="status" label="状态" align="center">
|
|
@@ -40,9 +42,9 @@
|
|
|
<!-- 故障预测 -->
|
|
|
<div class="tPanel">
|
|
|
<el-table size="mini" :data="faultPredictionList">
|
|
|
- <el-table-column prop="dataName" label="数据" align="center">
|
|
|
+ <el-table-column prop="resultDataName" label="数据" align="center">
|
|
|
<template slot-scope="scope">
|
|
|
- <span class="file" @click="imgShow(scope.row.dataPath,scope.row.dataType)">{{ scope.row.dataName
|
|
|
+ <span class="file" @click="imgShow(scope.row.dataPath, scope.row.dataType)">{{ scope.row.resultDataName
|
|
|
}}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
@@ -92,7 +94,12 @@
|
|
|
<!-- 去噪 -->
|
|
|
<div class="bPanel">
|
|
|
<el-table size="mini" :data="denoisingList">
|
|
|
- <el-table-column prop="dataName" label="数据" align="center">
|
|
|
+ <el-table-column prop="resultDataName" label="数据" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span class="file" @click="handleFile(scope.row.resultDataId,scope.row.processType)">{{
|
|
|
+ scope.row.resultDataName
|
|
|
+ }}</span>
|
|
|
+ </template>
|
|
|
</el-table-column>
|
|
|
<el-table-column prop="status" label="状态" align="center">
|
|
|
</el-table-column>
|
|
@@ -101,10 +108,11 @@
|
|
|
<!-- 扩充 -->
|
|
|
<div class="bPanel">
|
|
|
<el-table size="mini" :data="expansionList">
|
|
|
- <el-table-column prop="dataName" label="数据" align="center">
|
|
|
+ <el-table-column prop="resultDataName" label="数据" align="center">
|
|
|
<template slot-scope="scope">
|
|
|
- <span class="file" @click="handleFile(scope.row.dataPath, scope.row.dataType)">{{ scope.row.dataName
|
|
|
- }}</span>
|
|
|
+ <span class="file" @click="handleFile(scope.row.resultDataId,scope.row.processType)">{{
|
|
|
+ scope.row.resultDataName
|
|
|
+ }}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column prop="status" label="状态" align="center">
|
|
@@ -114,10 +122,11 @@
|
|
|
<!-- 退化评估 -->
|
|
|
<div class="bPanel">
|
|
|
<el-table size="mini" :data="assessmentList">
|
|
|
- <el-table-column prop="dataName" label="数据" align="center">
|
|
|
+ <el-table-column prop="resultDataName" label="数据" align="center">
|
|
|
<template slot-scope="scope">
|
|
|
- <span class="file" @click="handleFile(scope.row.dataPath, scope.row.dataType)">{{ scope.row.dataName
|
|
|
- }}</span>
|
|
|
+ <span class="file" @click="handleFile(scope.row.resultDataId,scope.row.processType)">{{
|
|
|
+ scope.row.resultDataName
|
|
|
+ }}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column prop="status" label="状态" align="center">
|
|
@@ -138,14 +147,14 @@
|
|
|
<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 label="数据" prop="processType">
|
|
|
- <el-select v-model="form.data" placeholder="请选择执行的数据">
|
|
|
- <el-option v-for="(item, index) in optionalData" :key="index" :label="item.name"
|
|
|
+ <el-select v-model="form.processedDataId" placeholder="请选择执行的数据">
|
|
|
+ <el-option v-for="(item, index) in optionalData" :key="index" :label="item.dataName"
|
|
|
:value="item.id"></el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="算法" prop="processType">
|
|
|
- <el-select v-model="form.aglo" placeholder="请选择执行的算法">
|
|
|
- <el-option v-for="(item, index) in optionalAglo" :key="index" :label="item.name"
|
|
|
+ <el-select v-model="form.processAlgId" placeholder="请选择执行的算法">
|
|
|
+ <el-option v-for="(item, index) in optionalAglo" :key="index" :label="item.algName"
|
|
|
:value="item.id"></el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
@@ -156,20 +165,22 @@
|
|
|
</span>
|
|
|
</el-dialog>
|
|
|
<el-dialog title="数据展示" :visible.sync="fileShowVisible" width="80%" :close-on-click-modal="false">
|
|
|
- <el-button v-if="fileType !== '4'&& fileType!=='5'" style="margin-left:50px;" type="text" @click="changeShow">{{ isTableShow ?
|
|
|
- '表格展示'
|
|
|
- :
|
|
|
- '曲线展示'
|
|
|
- }}</el-button>
|
|
|
- <div v-if="isTableShow && fileType!=='5'">
|
|
|
+ <el-button v-if="fileType !== '4' && fileType !== '5'" style="margin-left:50px;" type="text"
|
|
|
+ @click="changeShow">{{
|
|
|
+ isTableShow ?
|
|
|
+ '表格展示'
|
|
|
+ :
|
|
|
+ '曲线展示'
|
|
|
+ }}</el-button>
|
|
|
+ <div v-if="isTableShow && fileType !== '5'">
|
|
|
<el-table :data="completionData" size="mini" style="width: 100%;height: 500px;overflow:scroll;">
|
|
|
<el-table-column v-for="(item, index) in completionHeadData" :key="index" align="center" :prop="'val' + index"
|
|
|
:label="item">
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
</div>
|
|
|
- <div v-if="!isTableShow && fileType!=='5'" ref="completionChartRef" style="width: 100%; height: 400px;"></div>
|
|
|
- <ImagePreview v-if="fileType==='5'" :src="imgPreviewUrl"></ImagePreview>
|
|
|
+ <div v-if="!isTableShow && fileType !== '5'" ref="completionChartRef" style="width: 100%; height: 400px;"></div>
|
|
|
+ <ImagePreview v-if="fileType === '5'" :src="imgPreviewUrl"></ImagePreview>
|
|
|
</el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
@@ -180,7 +191,7 @@ import RingChart from '@/views/homePage/ringChart'
|
|
|
import BarChart from '@/views/dashboard/BarChart'
|
|
|
import { getAlgConfigByType } from "@/api/system/algConfig";
|
|
|
import { getDataProcessByType, addProcess } from "@/api/system/process";
|
|
|
-import { getDataByType } from "@/api/system/data";
|
|
|
+import { getDataByType, getData } from "@/api/system/data";
|
|
|
import * as echarts from 'echarts';
|
|
|
export default {
|
|
|
name: 'Index',
|
|
@@ -207,17 +218,18 @@ export default {
|
|
|
optionalData: [],
|
|
|
optionalAglo: [],
|
|
|
form: {
|
|
|
- data: null,
|
|
|
- aglo: null
|
|
|
+ processedDataId: null,
|
|
|
+ processAlgId: null
|
|
|
},
|
|
|
// 对话框展示数据内容
|
|
|
completionData: [],
|
|
|
completionHeadData: [],
|
|
|
isTableShow: false,
|
|
|
- filePath: null,
|
|
|
+ resultFileId: null,
|
|
|
+ // filePath: null,
|
|
|
fileType: null,
|
|
|
chart: null,
|
|
|
- imgPreviewUrl:null
|
|
|
+ imgPreviewUrl: null
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
@@ -225,19 +237,25 @@ export default {
|
|
|
},
|
|
|
methods: {
|
|
|
getTableData() {
|
|
|
- getDataByType(1).then(res => {
|
|
|
+ // getDataProcessByType(0).then(res => {
|
|
|
+ // this.originalList = res.data
|
|
|
+ // })
|
|
|
+ getDataProcessByType(0).then(res => {
|
|
|
+ this.denoisingList = res.data
|
|
|
+ })
|
|
|
+ getDataProcessByType(1).then(res => {
|
|
|
this.completionList = res.data
|
|
|
})
|
|
|
- getDataByType(2).then(res => {
|
|
|
+ getDataProcessByType(2).then(res => {
|
|
|
this.expansionList = res.data
|
|
|
})
|
|
|
- getDataByType(3).then(res => {
|
|
|
+ getDataProcessByType(3).then(res => {
|
|
|
this.featureExtractionList = res.data
|
|
|
})
|
|
|
- getDataByType(4).then(res => {
|
|
|
+ getDataProcessByType(4).then(res => {
|
|
|
this.assessmentList = res.data
|
|
|
})
|
|
|
- getDataByType(5).then(res => {
|
|
|
+ getDataProcessByType(5).then(res => {
|
|
|
this.faultPredictionList = res.data
|
|
|
})
|
|
|
},
|
|
@@ -249,7 +267,7 @@ export default {
|
|
|
},
|
|
|
handleProcess(type) {
|
|
|
this.dialogVisible = true;
|
|
|
- getDataProcessByType(type).then(res => {
|
|
|
+ getDataByType(type).then(res => {
|
|
|
this.optionalData = res.data;
|
|
|
});
|
|
|
getAlgConfigByType(type).then(res => {
|
|
@@ -263,253 +281,269 @@ export default {
|
|
|
this.getTableData()
|
|
|
});
|
|
|
},
|
|
|
- handleFile(dataPath, dataType) {
|
|
|
- if (this.chart) {
|
|
|
- this.chart.dispose();
|
|
|
- this.chart = null
|
|
|
- }
|
|
|
- this.filePath = dataPath
|
|
|
- this.fileType = dataType
|
|
|
- const url = `${process.env.VUE_APP_BASE_API}${dataPath}`;
|
|
|
- this.fetchLogFile(url)
|
|
|
- .then((text) => {
|
|
|
- const color = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
|
|
|
- switch (dataType) {
|
|
|
- case '1':
|
|
|
- const returnData = this.handleFileData(text)
|
|
|
- const contentData = returnData.contentData
|
|
|
- const headData = returnData.headData
|
|
|
- this.fileShowVisible = true
|
|
|
- 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'
|
|
|
+ handleFile(resultDataId,processType) {
|
|
|
+ this.loading = true
|
|
|
+ this.resultFileId = resultDataId
|
|
|
+ this.fileType = processType
|
|
|
+ getData(resultDataId).then(res => {
|
|
|
+ // this.optionalData = res.dataPath;
|
|
|
+ const url = `${process.env.VUE_APP_BASE_API}${res.dataPath}`;
|
|
|
+ this.fetchLogFile(url)
|
|
|
+ .then((text) => {
|
|
|
+ if (this.chart) {
|
|
|
+ this.chart.dispose();
|
|
|
+ this.chart = null
|
|
|
+ }
|
|
|
+ const color = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
|
|
|
+ switch (res.dataType) {
|
|
|
+ case '0':
|
|
|
+ break;
|
|
|
+ case '1':
|
|
|
+ const returnData = this.handleFileData(text)
|
|
|
+ const contentData = returnData.contentData
|
|
|
+ const headData = returnData.headData
|
|
|
+ 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)
|
|
|
}
|
|
|
- },
|
|
|
- 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
|
|
|
+ }));
|
|
|
+ const option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis'
|
|
|
},
|
|
|
- {
|
|
|
- type: 'inside',
|
|
|
- start: 0,
|
|
|
- end: 100
|
|
|
- }
|
|
|
- ],
|
|
|
- series: series
|
|
|
- };
|
|
|
- this.chart.setOption(option);
|
|
|
- })
|
|
|
- break;
|
|
|
- case '2':
|
|
|
- const data = text.split("\r\n").filter(line => line.trim() !== '').map(row => row.split(','));
|
|
|
- data[0].shift();
|
|
|
- const completionHead = data[0];
|
|
|
- const completionContent = Array.from({ length: completionHead.length }, () => []);
|
|
|
- const timeData = []
|
|
|
- for (let i = 1; i < data.length; i++) {
|
|
|
- data[i].forEach((value, index) => {
|
|
|
- if (index === 0) {
|
|
|
- timeData.push(value)
|
|
|
- } else {
|
|
|
- completionContent[index - 1].push(Number(value));
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- this.fileShowVisible = true
|
|
|
- this.$nextTick(() => {
|
|
|
- this.chart = echarts.init(this.$refs.completionChartRef);
|
|
|
- // series数据
|
|
|
- const series = completionContent.map((lineData, index) => ({
|
|
|
- name: `${completionHead[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: timeData,
|
|
|
- name: 'time'
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- type: 'value',
|
|
|
- name: 'Value'
|
|
|
- },
|
|
|
- dataZoom: [
|
|
|
- {
|
|
|
- type: 'slider',
|
|
|
- start: 0,
|
|
|
- end: 100
|
|
|
+ legend: {
|
|
|
+ data: headData,
|
|
|
+ textStyle: {//图例文字的样式
|
|
|
+ color: '#fff'
|
|
|
+ }
|
|
|
},
|
|
|
- {
|
|
|
- type: 'inside',
|
|
|
- start: 0,
|
|
|
- end: 100
|
|
|
- }
|
|
|
- ],
|
|
|
- series: series
|
|
|
- };
|
|
|
- this.chart.setOption(option);
|
|
|
- })
|
|
|
- break;
|
|
|
- case '3':
|
|
|
- const ExtractionData = text.split("\r\n").filter(line => line.trim() !== '').map(row => row.split(','));
|
|
|
- ExtractionData[0].shift();
|
|
|
- const ExtractionHead = ExtractionData[0];
|
|
|
- const ExtractionContent = Array.from({ length: ExtractionHead.length }, () => []);
|
|
|
- const ExtractionTime = []
|
|
|
- for (let i = 1; i < ExtractionData.length; i++) {
|
|
|
- ExtractionData[i].forEach((value, index) => {
|
|
|
- if (index === 0) {
|
|
|
- ExtractionTime.push(value)
|
|
|
- } else {
|
|
|
- ExtractionContent[index - 1].push(Number(value));
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- 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: ExtractionTime,
|
|
|
- name: 'time'
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- type: 'value',
|
|
|
- name: 'Value'
|
|
|
- },
|
|
|
- dataZoom: [
|
|
|
- {
|
|
|
- type: 'slider',
|
|
|
- start: 0,
|
|
|
- end: 100
|
|
|
+ color: color,
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: contentData[0].map((_, index) => index), // 生成x轴下标
|
|
|
+ name: 'Index'
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ name: 'Value'
|
|
|
},
|
|
|
- {
|
|
|
- type: 'inside',
|
|
|
- start: 0,
|
|
|
- end: 100
|
|
|
+ dataZoom: [
|
|
|
+ {
|
|
|
+ type: 'slider',
|
|
|
+ start: 0,
|
|
|
+ end: 100
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'inside',
|
|
|
+ start: 0,
|
|
|
+ end: 100
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ series: series
|
|
|
+ };
|
|
|
+ this.chart.setOption(option);
|
|
|
+ })
|
|
|
+ break;
|
|
|
+ case '2':
|
|
|
+ const data = text.split("\r\n").filter(line => line.trim() !== '').map(row => row.split(','));
|
|
|
+ data[0].shift();
|
|
|
+ const completionHead = data[0];
|
|
|
+ const completionContent = Array.from({ length: completionHead.length }, () => []);
|
|
|
+ const timeData = []
|
|
|
+ for (let i = 1; i < data.length; i++) {
|
|
|
+ data[i].forEach((value, index) => {
|
|
|
+ if (index === 0) {
|
|
|
+ timeData.push(value)
|
|
|
+ } else {
|
|
|
+ completionContent[index - 1].push(Number(value));
|
|
|
}
|
|
|
- ],
|
|
|
- series: series
|
|
|
- };
|
|
|
- this.chart.setOption(option);
|
|
|
- })
|
|
|
- break;
|
|
|
- case '4':
|
|
|
- const assessmentData = this.handleFileData(text)
|
|
|
- const assessmentcontent = assessmentData.contentData
|
|
|
- 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'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.fileShowVisible = true
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.chart = echarts.init(this.$refs.completionChartRef);
|
|
|
+ // series数据
|
|
|
+ const series = completionContent.map((lineData, index) => ({
|
|
|
+ name: `${completionHead[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: timeData,
|
|
|
+ name: 'time'
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ name: 'Value'
|
|
|
+ },
|
|
|
+ dataZoom: [
|
|
|
+ {
|
|
|
+ type: 'slider',
|
|
|
+ start: 0,
|
|
|
+ end: 100
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'inside',
|
|
|
+ start: 0,
|
|
|
+ end: 100
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ series: series
|
|
|
+ };
|
|
|
+ this.chart.setOption(option);
|
|
|
+ })
|
|
|
+ break;
|
|
|
+ case '3':
|
|
|
+ const ExtractionData = text.split("\r\n").filter(line => line.trim() !== '').map(row => row.split(','));
|
|
|
+ ExtractionData[0].shift();
|
|
|
+ const ExtractionHead = ExtractionData[0];
|
|
|
+ const ExtractionContent = Array.from({ length: ExtractionHead.length }, () => []);
|
|
|
+ const ExtractionTime = []
|
|
|
+ for (let i = 1; i < ExtractionData.length; i++) {
|
|
|
+ ExtractionData[i].forEach((value, index) => {
|
|
|
+ if (index === 0) {
|
|
|
+ ExtractionTime.push(value)
|
|
|
+ } else {
|
|
|
+ ExtractionContent[index - 1].push(Number(value));
|
|
|
}
|
|
|
- },
|
|
|
- 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);
|
|
|
- })
|
|
|
- break;
|
|
|
- default:
|
|
|
- break;
|
|
|
- }
|
|
|
- })
|
|
|
- .catch((error) => {
|
|
|
- console.error("Failed to fetch the log file:", error);
|
|
|
- this.$modal.msgSuccess("文件读取错误");
|
|
|
- });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ 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: ExtractionTime,
|
|
|
+ name: 'time'
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ name: 'Value'
|
|
|
+ },
|
|
|
+ dataZoom: [
|
|
|
+ {
|
|
|
+ type: 'slider',
|
|
|
+ start: 0,
|
|
|
+ end: 100
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'inside',
|
|
|
+ start: 0,
|
|
|
+ end: 100
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ series: series
|
|
|
+ };
|
|
|
+ this.chart.setOption(option);
|
|
|
+ })
|
|
|
+ break;
|
|
|
+ case '4':
|
|
|
+ const assessmentData = this.handleFileData(text)
|
|
|
+ const assessmentcontent = assessmentData.contentData
|
|
|
+ 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);
|
|
|
+ })
|
|
|
+ break;
|
|
|
+ case '5':
|
|
|
+ break;
|
|
|
+ case '6':
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((error) => {
|
|
|
+ console.error("Failed to fetch the log file:", error);
|
|
|
+ this.$modal.msgSuccess("文件读取错误");
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ // this.filePath = dataPath
|
|
|
+ // this.fileType = dataType
|
|
|
+ // const url = `${process.env.VUE_APP_BASE_API}${dataPath}`;
|
|
|
+
|
|
|
},
|
|
|
// 读取文件内容
|
|
|
async fetchLogFile(url) {
|
|
@@ -540,27 +574,30 @@ export default {
|
|
|
changeShow() {
|
|
|
this.isTableShow = !this.isTableShow
|
|
|
if (!this.isTableShow) {
|
|
|
- this.handleFile(this.filePath, this.fileType)
|
|
|
+ this.handleFile(this.resultFileId)
|
|
|
} else {
|
|
|
- this.tableShow(this.filePath, this.fileType)
|
|
|
+ this.tableShow(this.resultFileId)
|
|
|
}
|
|
|
},
|
|
|
- tableShow(path, type) {
|
|
|
- const url = `${process.env.VUE_APP_BASE_API}${path}`;
|
|
|
- this.fetchLogFile(url)
|
|
|
- .then((text) => {
|
|
|
- const data = text.split("\r\n").filter(line => line.trim() !== '').map(row => row.split(','));
|
|
|
- this.completionHeadData = data.shift();
|
|
|
- this.completionData = data.map(row => {
|
|
|
- const rowData = {};
|
|
|
- for (let i = 0; i < this.completionHeadData.length; i++) {
|
|
|
- rowData[`val${i}`] = (row[i]) === 0 ? null : (row[i]);
|
|
|
- }
|
|
|
- return rowData;
|
|
|
+ tableShow(id) {
|
|
|
+ // const url = `${process.env.VUE_APP_BASE_API}${path}`;
|
|
|
+ getData(id).then(res => {
|
|
|
+ const url = `${process.env.VUE_APP_BASE_API}${res.dataPath}`;
|
|
|
+ this.fetchLogFile(url)
|
|
|
+ .then((text) => {
|
|
|
+ const data = text.split("\r\n").filter(line => line.trim() !== '').map(row => row.split(','));
|
|
|
+ this.completionHeadData = data.shift();
|
|
|
+ this.completionData = data.map(row => {
|
|
|
+ const rowData = {};
|
|
|
+ for (let i = 0; i < this.completionHeadData.length; i++) {
|
|
|
+ rowData[`val${i}`] = (row[i]) === 0 ? null : (row[i]);
|
|
|
+ }
|
|
|
+ return rowData;
|
|
|
+ })
|
|
|
})
|
|
|
- })
|
|
|
+ })
|
|
|
},
|
|
|
- imgShow(url,dataType){
|
|
|
+ imgShow(url, dataType) {
|
|
|
this.fileType = dataType
|
|
|
this.imgPreviewUrl = url
|
|
|
this.fileShowVisible = true
|