|
@@ -4,33 +4,37 @@
|
|
<div class="topPanel">
|
|
<div class="topPanel">
|
|
<div class="tPanel">
|
|
<div class="tPanel">
|
|
<el-table size="mini" :data="originalList">
|
|
<el-table size="mini" :data="originalList">
|
|
- <el-table-column prop="name" label="数据">
|
|
|
|
|
|
+ <el-table-column prop="dataName" label="数据" align="center">
|
|
</el-table-column>
|
|
</el-table-column>
|
|
- <el-table-column prop="status" label="状态">
|
|
|
|
|
|
+ <el-table-column prop="status" label="状态" align="center">
|
|
</el-table-column>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-table>
|
|
</div>
|
|
</div>
|
|
<div class="tPanel">
|
|
<div class="tPanel">
|
|
<el-table size="mini" :data="completionList">
|
|
<el-table size="mini" :data="completionList">
|
|
- <el-table-column prop="name" label="数据">
|
|
|
|
|
|
+ <el-table-column prop="dataName" label="数据" align="center">
|
|
|
|
+ <template slot-scope="scope">
|
|
|
|
+ <span class="file" @click="handleFile(scope.row.dataPath, scope.row.dataType)">{{ scope.row.dataName
|
|
|
|
+ }}</span>
|
|
|
|
+ </template>
|
|
</el-table-column>
|
|
</el-table-column>
|
|
- <el-table-column prop="status" label="状态">
|
|
|
|
|
|
+ <el-table-column prop="status" label="状态" align="center">
|
|
</el-table-column>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-table>
|
|
</div>
|
|
</div>
|
|
<div class="tPanel">
|
|
<div class="tPanel">
|
|
<el-table size="mini" :data="featureExtractionList">
|
|
<el-table size="mini" :data="featureExtractionList">
|
|
- <el-table-column prop="name" label="数据">
|
|
|
|
|
|
+ <el-table-column prop="dataName" label="数据" align="center">
|
|
</el-table-column>
|
|
</el-table-column>
|
|
- <el-table-column prop="status" label="状态">
|
|
|
|
|
|
+ <el-table-column prop="status" label="状态" align="center">
|
|
</el-table-column>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-table>
|
|
</div>
|
|
</div>
|
|
<div class="tPanel">
|
|
<div class="tPanel">
|
|
<el-table size="mini" :data="faultPredictionList">
|
|
<el-table size="mini" :data="faultPredictionList">
|
|
- <el-table-column prop="name" label="数据">
|
|
|
|
|
|
+ <el-table-column prop="dataName" label="数据" align="center">
|
|
</el-table-column>
|
|
</el-table-column>
|
|
- <el-table-column prop="status" label="状态">
|
|
|
|
|
|
+ <el-table-column prop="status" label="状态" align="center">
|
|
</el-table-column>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-table>
|
|
</div>
|
|
</div>
|
|
@@ -71,32 +75,29 @@
|
|
<div class="tag">故障预测</div>
|
|
<div class="tag">故障预测</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- <!-- <div class="final">
|
|
|
|
-
|
|
|
|
- </div> -->
|
|
|
|
</div>
|
|
</div>
|
|
<div class="bottomPanel">
|
|
<div class="bottomPanel">
|
|
<div class="bPanel">
|
|
<div class="bPanel">
|
|
<el-table size="mini" :data="denoisingList">
|
|
<el-table size="mini" :data="denoisingList">
|
|
- <el-table-column prop="name" label="数据">
|
|
|
|
|
|
+ <el-table-column prop="dataName" label="数据" align="center">
|
|
</el-table-column>
|
|
</el-table-column>
|
|
- <el-table-column prop="status" label="状态">
|
|
|
|
|
|
+ <el-table-column prop="status" label="状态" align="center">
|
|
</el-table-column>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-table>
|
|
</div>
|
|
</div>
|
|
<div class="bPanel">
|
|
<div class="bPanel">
|
|
<el-table size="mini" :data="expansionList">
|
|
<el-table size="mini" :data="expansionList">
|
|
- <el-table-column prop="name" label="数据">
|
|
|
|
|
|
+ <el-table-column prop="dataName" label="数据" align="center">
|
|
</el-table-column>
|
|
</el-table-column>
|
|
- <el-table-column prop="status" label="状态">
|
|
|
|
|
|
+ <el-table-column prop="status" label="状态" align="center">
|
|
</el-table-column>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-table>
|
|
</div>
|
|
</div>
|
|
<div class="bPanel">
|
|
<div class="bPanel">
|
|
<el-table size="mini" :data="assessmentList">
|
|
<el-table size="mini" :data="assessmentList">
|
|
- <el-table-column prop="name" label="数据">
|
|
|
|
|
|
+ <el-table-column prop="dataName" label="数据" align="center">
|
|
</el-table-column>
|
|
</el-table-column>
|
|
- <el-table-column prop="status" label="状态">
|
|
|
|
|
|
+ <el-table-column prop="status" label="状态" align="center">
|
|
</el-table-column>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-table>
|
|
</div>
|
|
</div>
|
|
@@ -131,6 +132,13 @@
|
|
<el-button type="primary" @click="submitHandle()">确 定</el-button>
|
|
<el-button type="primary" @click="submitHandle()">确 定</el-button>
|
|
</span>
|
|
</span>
|
|
</el-dialog>
|
|
</el-dialog>
|
|
|
|
+ <el-dialog title="数据展示" :visible.sync="fileShowVisible" width="80%" :close-on-click-modal="false">
|
|
|
|
+ <el-button style="margin-left:50px;" type="text" @click="changeShow">{{ isTableShow ? '表格展示' : '曲线展示' }}</el-button>
|
|
|
|
+ <div v-if="isTableShow">
|
|
|
|
+ 表格展示
|
|
|
|
+ </div>
|
|
|
|
+ <div v-else ref="completionChartRef" style="width: 100%; height: 400px;"></div>
|
|
|
|
+ </el-dialog>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
@@ -139,8 +147,9 @@ import CountTo from 'vue-count-to'
|
|
import RingChart from '@/views/homePage/ringChart'
|
|
import RingChart from '@/views/homePage/ringChart'
|
|
import BarChart from '@/views/dashboard/BarChart'
|
|
import BarChart from '@/views/dashboard/BarChart'
|
|
import { getAlgConfigByType } from "@/api/system/algConfig";
|
|
import { getAlgConfigByType } from "@/api/system/algConfig";
|
|
-import { getDataProcessByType,addProcess } from "@/api/system/process";
|
|
|
|
|
|
+import { getDataProcessByType, addProcess } from "@/api/system/process";
|
|
import { getDataByType } from "@/api/system/data";
|
|
import { getDataByType } from "@/api/system/data";
|
|
|
|
+import * as echarts from 'echarts';
|
|
export default {
|
|
export default {
|
|
name: 'Index',
|
|
name: 'Index',
|
|
components: {
|
|
components: {
|
|
@@ -151,8 +160,10 @@ export default {
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
rules: {},
|
|
rules: {},
|
|
- title:'选择数据',
|
|
|
|
|
|
+ title: '选择数据',
|
|
|
|
+ baseUrl: process.env.VUE_APP_BASE_API,
|
|
dialogVisible: false,
|
|
dialogVisible: false,
|
|
|
|
+ fileShowVisible: false,
|
|
originalList: [],
|
|
originalList: [],
|
|
denoisingList: [],
|
|
denoisingList: [],
|
|
completionList: [],
|
|
completionList: [],
|
|
@@ -165,7 +176,12 @@ export default {
|
|
form: {
|
|
form: {
|
|
data: null,
|
|
data: null,
|
|
aglo: null
|
|
aglo: null
|
|
- }
|
|
|
|
|
|
+ },
|
|
|
|
+ // 对话框展示数据内容
|
|
|
|
+ completionData: [],
|
|
|
|
+ isTableShow: false,
|
|
|
|
+ filePath: null,
|
|
|
|
+ fileType: null
|
|
}
|
|
}
|
|
},
|
|
},
|
|
created() {
|
|
created() {
|
|
@@ -195,29 +211,6 @@ export default {
|
|
handleSetLineChartData(type) {
|
|
handleSetLineChartData(type) {
|
|
this.$emit('handleSetLineChartData', type)
|
|
this.$emit('handleSetLineChartData', type)
|
|
},
|
|
},
|
|
- // handelDenoising() {
|
|
|
|
- // this.dialogVisible = true
|
|
|
|
- // },
|
|
|
|
- // handelCompletion() {
|
|
|
|
- // this.title='选择扩充数据'
|
|
|
|
- // this.handleProcess(1)
|
|
|
|
- // },
|
|
|
|
- // handelExpansion() {
|
|
|
|
- // this.title='选择补全数据'
|
|
|
|
- // this.handleProcess(2)
|
|
|
|
- // },
|
|
|
|
- // handelFeatureExtraction() {
|
|
|
|
- // this.title='选择特征提取数据'
|
|
|
|
- // this.handleProcess(3)
|
|
|
|
- // },
|
|
|
|
- // handelAssessment() {
|
|
|
|
- // this.title='选择退化评估数据'
|
|
|
|
- // this.handleProcess(4)
|
|
|
|
- // },
|
|
|
|
- // handelFaultPrediction() {
|
|
|
|
- // this.title='选择故障预测数据'
|
|
|
|
- // this.handleProcess(5)
|
|
|
|
- // },
|
|
|
|
handleProcess(type) {
|
|
handleProcess(type) {
|
|
this.dialogVisible = true;
|
|
this.dialogVisible = true;
|
|
getDataProcessByType(type).then(res => {
|
|
getDataProcessByType(type).then(res => {
|
|
@@ -227,12 +220,129 @@ export default {
|
|
this.optionalAglo = res.data;
|
|
this.optionalAglo = res.data;
|
|
});
|
|
});
|
|
},
|
|
},
|
|
- submitHandle(){
|
|
|
|
|
|
+ submitHandle() {
|
|
addProcess(this.form).then(response => {
|
|
addProcess(this.form).then(response => {
|
|
this.$modal.msgSuccess("开始执行");
|
|
this.$modal.msgSuccess("开始执行");
|
|
this.dialogVisible = false;
|
|
this.dialogVisible = false;
|
|
this.getTableData()
|
|
this.getTableData()
|
|
});
|
|
});
|
|
|
|
+ },
|
|
|
|
+ handleFile(dataPath, dataType) {
|
|
|
|
+ this.filePath = dataPath
|
|
|
|
+ this.fileType = dataType
|
|
|
|
+ const url = `${process.env.VUE_APP_BASE_API}${dataPath}`;
|
|
|
|
+ this.fetchLogFile(url)
|
|
|
|
+ .then((text) => {
|
|
|
|
+ // console.log("text",text);
|
|
|
|
+ switch (dataType) {
|
|
|
|
+ case '1':
|
|
|
|
+ console.log("11",);
|
|
|
|
+ const color = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
|
|
|
|
+ const returnData = this.handleFileData(text)
|
|
|
|
+ const contentData = returnData.contentData
|
|
|
|
+ console.log("contentData", contentData);
|
|
|
|
+ const headData = returnData.headData
|
|
|
|
+ console.log("headData", headData);
|
|
|
|
+ this.fileShowVisible = true
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
+ const 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'
|
|
|
|
+ },
|
|
|
|
+ series: series
|
|
|
|
+ };
|
|
|
|
+
|
|
|
|
+ // 设置图表配置
|
|
|
|
+ chart.setOption(option);
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+ break;
|
|
|
|
+
|
|
|
|
+ default:
|
|
|
|
+ break;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ // this.fileShowData = text.split("\r\n");
|
|
|
|
+ // this.handleLineChart(this.fileShowData);
|
|
|
|
+ // this.fileVisible = true;
|
|
|
|
+ })
|
|
|
|
+ .catch((error) => {
|
|
|
|
+ console.error("Failed to fetch the log file:", error);
|
|
|
|
+ this.$modal.msgSuccess("文件读取错误");
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ // 读取文件内容
|
|
|
|
+ async fetchLogFile(url) {
|
|
|
|
+ try {
|
|
|
|
+ const response = await fetch(url, { method: "GET" });
|
|
|
|
+ if (!response.ok) {
|
|
|
|
+ throw new Error(`HTTP error! status: ${response.status}`);
|
|
|
|
+ }
|
|
|
|
+ return await response.text();
|
|
|
|
+ } catch (error) {
|
|
|
|
+ throw error;
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ // 对数据的处理
|
|
|
|
+ handleFileData(fileData) {
|
|
|
|
+ // 每行数据转换成数组、过滤出存在的空白行、将没行数据按照,号分割
|
|
|
|
+ const data = fileData.split("\r\n").filter(line => line.trim() !== '').map(row => row.split(','));
|
|
|
|
+ const headData = data[0];
|
|
|
|
+ console.log("data", data);
|
|
|
|
+ const contentData = Array.from({ length: headData.length }, () => []);
|
|
|
|
+ // debugger
|
|
|
|
+ for (let i = 1; i < data.length; i++) { // 从 1 开始,跳过表头
|
|
|
|
+ data[i].forEach((value, index) => {
|
|
|
|
+ contentData[index].push(Number(value));
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ return { contentData, headData }
|
|
|
|
+ },
|
|
|
|
+ // 切换表格/曲线展示
|
|
|
|
+ changeShow() {
|
|
|
|
+ this.isTableShow = !this.isTableShow
|
|
|
|
+ if (!this.isTableShow) {
|
|
|
|
+ this.handleFile(this.filePath, this.fileType)
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+
|
|
}
|
|
}
|
|
},
|
|
},
|
|
}
|
|
}
|
|
@@ -315,7 +425,8 @@ export default {
|
|
background-color: #00aaff;
|
|
background-color: #00aaff;
|
|
box-shadow: 0 5px 15px rgba(0, 170, 255, 0.5);
|
|
box-shadow: 0 5px 15px rgba(0, 170, 255, 0.5);
|
|
}
|
|
}
|
|
- .noAfter::after{
|
|
|
|
|
|
+
|
|
|
|
+ .noAfter::after {
|
|
content: none;
|
|
content: none;
|
|
}
|
|
}
|
|
|
|
|
|
@@ -412,6 +523,14 @@ export default {
|
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+.file {
|
|
|
|
+ cursor: pointer;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.file:hover {
|
|
|
|
+ color: #00aaff;
|
|
|
|
+}
|
|
|
|
+
|
|
.square {
|
|
.square {
|
|
width: 90px;
|
|
width: 90px;
|
|
height: 50px;
|
|
height: 50px;
|