|
@@ -1,19 +1,39 @@
|
|
|
<template>
|
|
|
<div class="home">
|
|
|
-
|
|
|
<div class="second">
|
|
|
<div class="topPanel">
|
|
|
<div class="tPanel">
|
|
|
- <el-table size="mini" :data="tableData">
|
|
|
- <el-table-column prop="date" label="数据">
|
|
|
+ <el-table size="mini" :data="originalList">
|
|
|
+ <el-table-column prop="name" label="数据">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="status" label="状态">
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <div class="tPanel">
|
|
|
+ <el-table size="mini" :data="completionList">
|
|
|
+ <el-table-column prop="name" label="数据">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="status" label="状态">
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <div class="tPanel">
|
|
|
+ <el-table size="mini" :data="featureExtractionList">
|
|
|
+ <el-table-column prop="name" label="数据">
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="name" label="状态">
|
|
|
+ <el-table-column prop="status" label="状态">
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <div class="tPanel">
|
|
|
+ <el-table size="mini" :data="faultPredictionList">
|
|
|
+ <el-table-column prop="name" label="数据">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="status" label="状态">
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
</div>
|
|
|
- <div class="tPanel"></div>
|
|
|
- <div class="tPanel"></div>
|
|
|
- <div class="tPanel"></div>
|
|
|
</div>
|
|
|
<div class="step">
|
|
|
<div class="yuan">
|
|
@@ -22,51 +42,66 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="one">
|
|
|
- <div class="img oneBg even" @click="handelDenoising">
|
|
|
+ <div class="img oneBg even" @click="handleProcess(0)">
|
|
|
<div class="tag">去噪</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="two">
|
|
|
- <div class="img twoBg odd" @click="handelCompletion">
|
|
|
+ <div class="img twoBg odd" @click="handleProcess(1)">
|
|
|
<div class="tag">扩充</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="three">
|
|
|
- <div class="img threeBg even" @click="handelExpansion">
|
|
|
+ <div class="img threeBg even" @click="handleProcess(2)">
|
|
|
<div class="tag">补全</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="four">
|
|
|
- <div class="img fourBg odd" @click="handelFeatureExtraction">
|
|
|
+ <div class="img fourBg odd" @click="handleProcess(3)">
|
|
|
<div class="tag">特征提取</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="five">
|
|
|
- <div class="img fiveBg even" @click="handelAssessment">
|
|
|
+ <div class="img fiveBg even" @click="handleProcess(4)">
|
|
|
<div class="tag">退化评估</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="six">
|
|
|
- <div class="img sixBg odd" @click="handelFaultPrediction">
|
|
|
+ <div class="img sixBg odd noAfter" style="content: none;" @click="handleProcess(5)">
|
|
|
<div class="tag">故障预测</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="final">
|
|
|
+ <!-- <div class="final">
|
|
|
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
</div>
|
|
|
<div class="bottomPanel">
|
|
|
<div class="bPanel">
|
|
|
- <el-table size="mini" :data="tableData">
|
|
|
- <el-table-column prop="date" label="数据">
|
|
|
+ <el-table size="mini" :data="denoisingList">
|
|
|
+ <el-table-column prop="name" label="数据">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="status" label="状态">
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <div class="bPanel">
|
|
|
+ <el-table size="mini" :data="expansionList">
|
|
|
+ <el-table-column prop="name" label="数据">
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="name" label="状态">
|
|
|
+ <el-table-column prop="status" label="状态">
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
</div>
|
|
|
- <div class="bPanel"></div>
|
|
|
- <div class="bPanel"></div>
|
|
|
- <div class="bPanel"></div>
|
|
|
+ <div class="bPanel">
|
|
|
+ <el-table size="mini" :data="assessmentList">
|
|
|
+ <el-table-column prop="name" label="数据">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="status" label="状态">
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="first">
|
|
@@ -76,11 +111,24 @@
|
|
|
<BarChart width="700px" />
|
|
|
</div>
|
|
|
</div>
|
|
|
- <el-dialog title="选择数据" :visible.sync="dialogVisible" width="30%">
|
|
|
- <span>这是一段信息</span>
|
|
|
+ <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"
|
|
|
+ :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"
|
|
|
+ :value="item.id"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
<span slot="footer" class="dialog-footer">
|
|
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
|
|
- <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
|
|
|
+ <el-button type="primary" @click="submitHandle()">确 定</el-button>
|
|
|
</span>
|
|
|
</el-dialog>
|
|
|
</div>
|
|
@@ -90,6 +138,9 @@
|
|
|
import CountTo from 'vue-count-to'
|
|
|
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";
|
|
|
export default {
|
|
|
name: 'Index',
|
|
|
components: {
|
|
@@ -99,49 +150,89 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- // 版本号
|
|
|
- version: '3.8.6',
|
|
|
- imageSrc: '/流程图.png',
|
|
|
+ rules: {},
|
|
|
+ title:'选择数据',
|
|
|
dialogVisible: false,
|
|
|
- tableData: [{
|
|
|
- date: 'xxxxxxx',
|
|
|
- name: '已完成'
|
|
|
- }, {
|
|
|
- date: 'xxxxx',
|
|
|
- name: '进行中'
|
|
|
- }, {
|
|
|
- date: 'xxxxx',
|
|
|
- name: '已完成'
|
|
|
- }, {
|
|
|
- date: 'xxxx',
|
|
|
- name: '已完成'
|
|
|
- }]
|
|
|
+ originalList: [],
|
|
|
+ denoisingList: [],
|
|
|
+ completionList: [],
|
|
|
+ expansionList: [],
|
|
|
+ featureExtractionList: [],
|
|
|
+ assessmentList: [],
|
|
|
+ faultPredictionList: [],
|
|
|
+ optionalData: [],
|
|
|
+ optionalAglo: [],
|
|
|
+ form: {
|
|
|
+ data: null,
|
|
|
+ aglo: null
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
+ created() {
|
|
|
+ this.getTableData()
|
|
|
+ },
|
|
|
methods: {
|
|
|
+ getTableData() {
|
|
|
+ getDataByType(1).then(res => {
|
|
|
+ this.completionList = res.data
|
|
|
+ })
|
|
|
+ getDataByType(2).then(res => {
|
|
|
+ this.expansionList = res.data
|
|
|
+ })
|
|
|
+ getDataByType(3).then(res => {
|
|
|
+ this.featureExtractionList = res.data
|
|
|
+ })
|
|
|
+ getDataByType(4).then(res => {
|
|
|
+ this.assessmentList = res.data
|
|
|
+ })
|
|
|
+ getDataByType(5).then(res => {
|
|
|
+ this.faultPredictionList = res.data
|
|
|
+ })
|
|
|
+ },
|
|
|
goTarget(href) {
|
|
|
window.open(href, '_blank')
|
|
|
},
|
|
|
handleSetLineChartData(type) {
|
|
|
this.$emit('handleSetLineChartData', type)
|
|
|
},
|
|
|
- handelDenoising() {
|
|
|
- this.dialogVisible = true
|
|
|
- },
|
|
|
- handelCompletion() {
|
|
|
- this.dialogVisible = true
|
|
|
- },
|
|
|
- handelExpansion() {
|
|
|
- this.dialogVisible = true
|
|
|
- },
|
|
|
- handelFeatureExtraction() {
|
|
|
- this.dialogVisible = true
|
|
|
+ // 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) {
|
|
|
+ this.dialogVisible = true;
|
|
|
+ getDataProcessByType(type).then(res => {
|
|
|
+ this.optionalData = res.data;
|
|
|
+ });
|
|
|
+ getAlgConfigByType(type).then(res => {
|
|
|
+ this.optionalAglo = res.data;
|
|
|
+ });
|
|
|
},
|
|
|
- handelAssessment() {
|
|
|
- this.dialogVisible = true
|
|
|
- },
|
|
|
- handelFaultPrediction() {
|
|
|
- this.dialogVisible = true
|
|
|
+ submitHandle(){
|
|
|
+ addProcess(this.form).then(response => {
|
|
|
+ this.$modal.msgSuccess("开始执行");
|
|
|
+ this.dialogVisible = false;
|
|
|
+ this.getTableData()
|
|
|
+ });
|
|
|
}
|
|
|
},
|
|
|
}
|
|
@@ -217,18 +308,21 @@ export default {
|
|
|
content: "";
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
- transform: translateX(24%);
|
|
|
- width: 180%;
|
|
|
+ transform: translateX(26%);
|
|
|
+ width: 200%;
|
|
|
height: 1px;
|
|
|
// background-color: #546882;
|
|
|
background-color: #00aaff;
|
|
|
box-shadow: 0 5px 15px rgba(0, 170, 255, 0.5);
|
|
|
}
|
|
|
+ .noAfter::after{
|
|
|
+ content: none;
|
|
|
+ }
|
|
|
|
|
|
.odd::before {
|
|
|
content: "";
|
|
|
position: absolute;
|
|
|
- transform: translateY(-80%);
|
|
|
+ transform: translateY(-50%);
|
|
|
width: 1px;
|
|
|
height: 50%;
|
|
|
// background-color: #546882;
|
|
@@ -240,7 +334,7 @@ export default {
|
|
|
content: "";
|
|
|
position: absolute;
|
|
|
bottom: 0;
|
|
|
- transform: translateY(60%);
|
|
|
+ transform: translateY(50%);
|
|
|
width: 1px;
|
|
|
height: 50%;
|
|
|
// background-color: #546882;00aaff
|
|
@@ -286,7 +380,7 @@ export default {
|
|
|
}
|
|
|
|
|
|
.topPanel {
|
|
|
- width: 90%;
|
|
|
+ width: 100%;
|
|
|
height: 37%;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
@@ -294,11 +388,11 @@ export default {
|
|
|
}
|
|
|
|
|
|
.bottomPanel {
|
|
|
- width: 90%;
|
|
|
+ width: 100%;
|
|
|
height: 37%;
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- margin-left: 11%;
|
|
|
+ justify-content: space-around;
|
|
|
+ margin-left: 6%;
|
|
|
margin-top: 1%;
|
|
|
}
|
|
|
|
|
@@ -311,10 +405,10 @@ export default {
|
|
|
// background: url("../assets/images/msgBg3.png") no-repeat center / contain;
|
|
|
// background: rgba(0, 0, 0, 0.15);
|
|
|
border: 2px solid transparent;
|
|
|
- background-clip: padding-box;
|
|
|
- box-shadow: 0 0 10px rgba(63, 155, 255, 0.5);
|
|
|
- border-radius: 5%;
|
|
|
-}
|
|
|
+ background-clip: padding-box;
|
|
|
+ box-shadow: 0 0 10px rgba(63, 155, 255, 0.5);
|
|
|
+ border-radius: 5%;
|
|
|
+ }
|
|
|
|
|
|
}
|
|
|
|
|
@@ -347,4 +441,9 @@ export default {
|
|
|
::-webkit-scrollbar {
|
|
|
display: none;
|
|
|
}
|
|
|
+
|
|
|
+::v-deep .el-table__empty-block {
|
|
|
+ background-color: #0b333f !important;
|
|
|
+ border: #0b333f;
|
|
|
+}
|
|
|
</style>
|