|
|
@@ -1,68 +1,88 @@
|
|
|
<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-column>
|
|
|
+ <el-table-column prop="name" 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">
|
|
|
+ <div class="img yuanBg odd">
|
|
|
+ <div class="tag">原始数据</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="one">
|
|
|
+ <div class="img oneBg even" @click="handelDenoising">
|
|
|
+ <div class="tag">去噪</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="two">
|
|
|
+ <div class="img twoBg odd" @click="handelCompletion">
|
|
|
+ <div class="tag">扩充</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="three">
|
|
|
+ <div class="img threeBg even" @click="handelExpansion">
|
|
|
+ <div class="tag">补全</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="four">
|
|
|
+ <div class="img fourBg odd" @click="handelFeatureExtraction">
|
|
|
+ <div class="tag">特征提取</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="five">
|
|
|
+ <div class="img fiveBg even" @click="handelAssessment">
|
|
|
+ <div class="tag">退化评估</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="six">
|
|
|
+ <div class="img sixBg odd" @click="handelFaultPrediction">
|
|
|
+ <div class="tag">故障预测</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="final">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="bottomPanel">
|
|
|
+ <div class="bPanel">
|
|
|
+ <el-table size="mini" :data="tableData">
|
|
|
+ <el-table-column prop="date" label="数据">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="name" label="状态">
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <div class="bPanel"></div>
|
|
|
+ <div class="bPanel"></div>
|
|
|
+ <div class="bPanel"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<div class="first">
|
|
|
- <h4 style="margin:13px 0px 0px 20px">算法统计</h4>
|
|
|
+ <h4 style="margin:13px 0px 0px 20px;color: #fff;">算法统计</h4>
|
|
|
<div class="chart">
|
|
|
<RingChart />
|
|
|
<BarChart width="700px" />
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="second">
|
|
|
- <div class="left">
|
|
|
- <img :src="imageSrc" alt="My Image" />
|
|
|
- </div>
|
|
|
- <div class="right">
|
|
|
- <h4 style="margin:13px 0px 13px 20px">快捷入口</h4>
|
|
|
- <div class="enter">
|
|
|
- <el-card class="box-card algoSub" shadow="hover">
|
|
|
- <router-link to="/conf/subType">
|
|
|
- <div>
|
|
|
- <i class="icon el-icon-edit"></i>算法子类型配置
|
|
|
- </div>
|
|
|
- </router-link>
|
|
|
- </el-card>
|
|
|
- <el-card class="box-card input" shadow="hover">
|
|
|
- <router-link to="/conf/field">
|
|
|
- <div>
|
|
|
- <i class="icon el-icon-sort"></i>算法子类型输入输出配置
|
|
|
- </div>
|
|
|
- </router-link>
|
|
|
- </el-card>
|
|
|
- <el-card class="box-card data" shadow="hover">
|
|
|
- <router-link to="/algorithm/algorithm">
|
|
|
- <div>
|
|
|
- <i class="icon el-icon-set-up"></i>数据处理（去噪、补充、扩充）
|
|
|
- </div>
|
|
|
- </router-link>
|
|
|
- </el-card>
|
|
|
- <el-card class="box-card characteristic" shadow="hover">
|
|
|
- <router-link to="/algorithm/algorithm2">
|
|
|
- <div>
|
|
|
- <i class="icon el-icon-bangzhu"></i>特征提取
|
|
|
- </div>
|
|
|
- </router-link>
|
|
|
- </el-card>
|
|
|
- <el-card class="box-card fault" shadow="hover">
|
|
|
- <router-link to="/algorithm/algorithm3">
|
|
|
- <div>
|
|
|
- <i class="icon el-icon-timer"></i>故障预测（退化评估、故障预测）
|
|
|
- </div>
|
|
|
- </router-link>
|
|
|
- </el-card>
|
|
|
- <el-card class="box-card contrast" shadow="hover">
|
|
|
- <router-link to="/dataManage/contrast">
|
|
|
- <div>
|
|
|
- <i class="icon el-icon-c-scale-to-original"></i>数据对比
|
|
|
- </div>
|
|
|
- </router-link>
|
|
|
- </el-card>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- <div class="square">数据</div>
|
|
|
- <div class="diamond">
|
|
|
- <p class="diamond-p">是否为理想数据？</p>
|
|
|
- </div> -->
|
|
|
- </div>
|
|
|
+ <el-dialog title="选择数据" :visible.sync="dialogVisible" width="30%">
|
|
|
+ <span>这是一段信息</span>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="dialogVisible = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -82,6 +102,20 @@ export default {
|
|
|
// 版本号
|
|
|
version: '3.8.6',
|
|
|
imageSrc: '/流程图.png',
|
|
|
+ dialogVisible: false,
|
|
|
+ tableData: [{
|
|
|
+ date: 'xxxxxxx',
|
|
|
+ name: '已完成'
|
|
|
+ }, {
|
|
|
+ date: 'xxxxx',
|
|
|
+ name: '进行中'
|
|
|
+ }, {
|
|
|
+ date: 'xxxxx',
|
|
|
+ name: '已完成'
|
|
|
+ }, {
|
|
|
+ date: 'xxxx',
|
|
|
+ name: '已完成'
|
|
|
+ }]
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -91,99 +125,197 @@ export default {
|
|
|
handleSetLineChartData(type) {
|
|
|
this.$emit('handleSetLineChartData', type)
|
|
|
},
|
|
|
+ handelDenoising() {
|
|
|
+ this.dialogVisible = true
|
|
|
+ },
|
|
|
+ handelCompletion() {
|
|
|
+ this.dialogVisible = true
|
|
|
+ },
|
|
|
+ handelExpansion() {
|
|
|
+ this.dialogVisible = true
|
|
|
+ },
|
|
|
+ handelFeatureExtraction() {
|
|
|
+ this.dialogVisible = true
|
|
|
+ },
|
|
|
+ handelAssessment() {
|
|
|
+ this.dialogVisible = true
|
|
|
+ },
|
|
|
+ handelFaultPrediction() {
|
|
|
+ this.dialogVisible = true
|
|
|
+ }
|
|
|
},
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
.home {
|
|
|
- width: 100%; /* 设置宽度为100%，以充满父 div 的宽度 */
|
|
|
- min-height: calc(100vh - 84px); /* 设置高度为100%，以充满父 div 的高度 */
|
|
|
- background-color: #f4f4f4;
|
|
|
+ width: 100%;
|
|
|
+ /* 设置宽度为100%，以充满父 div 的宽度 */
|
|
|
+ min-height: calc(100vh - 84px);
|
|
|
+ /* 设置高度为100%，以充满父 div 的高度 */
|
|
|
+ // background-color: #f4f4f4;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
+
|
|
|
.first {
|
|
|
width: 97%;
|
|
|
- height: 300px;
|
|
|
+ height: 210px;
|
|
|
margin: 20px;
|
|
|
- background-color: white;
|
|
|
+ // background-color: white;
|
|
|
border-radius: 15px;
|
|
|
overflow: hidden;
|
|
|
+ // box-shadow: 0 0 10px rgba(63, 155, 255, 0.5);
|
|
|
+ // background: url("../assets/images/msgBg3.png") no-repeat center / contain;
|
|
|
}
|
|
|
+
|
|
|
.chart {
|
|
|
display: flex;
|
|
|
- justify-content: space-evenly;
|
|
|
+ justify-content: space-around;
|
|
|
margin-left: 30px;
|
|
|
}
|
|
|
+
|
|
|
.second {
|
|
|
width: 97%;
|
|
|
- height: 500px;
|
|
|
- margin: 20px;
|
|
|
- justify-content: space-between;
|
|
|
+ height: 440px;
|
|
|
+ margin: 50px 20px;
|
|
|
+ // overflow: hidden;
|
|
|
display: flex;
|
|
|
- .left {
|
|
|
- width: 73%;
|
|
|
- height: 500px;
|
|
|
- background-color: white;
|
|
|
- border-radius: 15px;
|
|
|
- overflow: hidden;
|
|
|
- img {
|
|
|
- width: 100%;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ .step {
|
|
|
+ width: 100%;
|
|
|
+ height: 120px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+
|
|
|
+ .yuan,
|
|
|
+ .one,
|
|
|
+ .two,
|
|
|
+ .three,
|
|
|
+ .four,
|
|
|
+ .five,
|
|
|
+ .six,
|
|
|
+ .final {
|
|
|
+ width: 12%;
|
|
|
height: 100%;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
- }
|
|
|
- .right {
|
|
|
- width: 26%;
|
|
|
- height: 500px;
|
|
|
- background-color: white;
|
|
|
- border-radius: 15px;
|
|
|
- overflow: hidden;
|
|
|
- .enter {
|
|
|
- width: 100%;
|
|
|
- height: 450px;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- font-size: 14px;
|
|
|
- cursor: pointer;
|
|
|
- .box-card {
|
|
|
- width: 85%;
|
|
|
- margin-bottom: 10px;
|
|
|
- :hover {
|
|
|
- transition: transform 0.1s; /* 添加过渡效果 */
|
|
|
- transform: scale(1.1); /* 鼠标悬停时放大 */
|
|
|
- }
|
|
|
- }
|
|
|
- .algoSub {
|
|
|
- border: 1px solid #ffdc60;
|
|
|
- color: #ffdc60;
|
|
|
- }
|
|
|
- .input {
|
|
|
- border: 1px solid #f44336;
|
|
|
- color: #f44336;
|
|
|
- }
|
|
|
- .data {
|
|
|
- border: 1px solid #02b608;
|
|
|
- color: #02b608;
|
|
|
- }
|
|
|
- .characteristic {
|
|
|
- border: 1px solid #770aed;
|
|
|
- color: #770aed;
|
|
|
- }
|
|
|
- .fault {
|
|
|
- border: 1px solid #df23cb;
|
|
|
- color: #df23cb;
|
|
|
- }
|
|
|
- .contrast {
|
|
|
- border: 1px solid #f14405;
|
|
|
- color: #f14405;
|
|
|
- }
|
|
|
+
|
|
|
+ .item {
|
|
|
+ margin-top: 10px;
|
|
|
+ margin-right: 40px;
|
|
|
}
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 40%;
|
|
|
+ height: 95%;
|
|
|
+ margin: 0 auto;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .img::after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateX(24%);
|
|
|
+ width: 180%;
|
|
|
+ height: 1px;
|
|
|
+ // background-color: #546882;
|
|
|
+ background-color: #00aaff;
|
|
|
+ box-shadow: 0 5px 15px rgba(0, 170, 255, 0.5);
|
|
|
+ }
|
|
|
+
|
|
|
+ .odd::before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ transform: translateY(-80%);
|
|
|
+ width: 1px;
|
|
|
+ height: 50%;
|
|
|
+ // background-color: #546882;
|
|
|
+ background-color: #00aaff;
|
|
|
+ box-shadow: 0 5px 15px rgba(0, 170, 255, 0.5);
|
|
|
+ }
|
|
|
+
|
|
|
+ .even::before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ transform: translateY(60%);
|
|
|
+ width: 1px;
|
|
|
+ height: 50%;
|
|
|
+ // background-color: #546882;00aaff
|
|
|
+ background-color: #00aaff;
|
|
|
+ box-shadow: 0 5px 15px rgba(0, 170, 255, 0.5);
|
|
|
+ }
|
|
|
+
|
|
|
+ .yuanBg {
|
|
|
+ background: url("../assets/images/yuan.png") no-repeat center / contain;
|
|
|
+ }
|
|
|
+
|
|
|
+ .oneBg {
|
|
|
+ background: url("../assets/images/one.png") no-repeat center / contain;
|
|
|
+ }
|
|
|
+
|
|
|
+ .twoBg {
|
|
|
+ background: url("../assets/images/two.png") no-repeat center / contain;
|
|
|
+ }
|
|
|
+
|
|
|
+ .threeBg {
|
|
|
+ background: url("../assets/images/three.png") no-repeat center / contain;
|
|
|
+ }
|
|
|
+
|
|
|
+ .fourBg {
|
|
|
+ background: url("../assets/images/four.png") no-repeat center / contain;
|
|
|
+ }
|
|
|
+
|
|
|
+ .fiveBg {
|
|
|
+ background: url("../assets/images/five.png") no-repeat center / contain;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sixBg {
|
|
|
+ background: url("../assets/images/six.png") no-repeat center / contain;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tag {
|
|
|
+ color: #fff;
|
|
|
+ background: linear-gradient(to right, rgba(8, 200, 236, 0), rgba(8, 200, 236, 0.8), rgba(8, 200, 236, 0.8), rgba(8, 200, 236, 0));
|
|
|
+ position: absolute;
|
|
|
+ top: -15px;
|
|
|
+ left: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .topPanel {
|
|
|
+ width: 90%;
|
|
|
+ height: 37%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 1.5%;
|
|
|
}
|
|
|
- .icon {
|
|
|
- font-size: 18px;
|
|
|
- margin: 0px 15px 0px 15px;
|
|
|
+
|
|
|
+ .bottomPanel {
|
|
|
+ width: 90%;
|
|
|
+ height: 37%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-left: 11%;
|
|
|
+ margin-top: 1%;
|
|
|
}
|
|
|
+
|
|
|
+ .tPanel,
|
|
|
+ .bPanel {
|
|
|
+ // position: relative;
|
|
|
+ width: 18%;
|
|
|
+ height: 95%;
|
|
|
+ overflow: auto;
|
|
|
+ // 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%;
|
|
|
+}
|
|
|
+
|
|
|
}
|
|
|
|
|
|
.square {
|
|
|
@@ -195,12 +327,14 @@ export default {
|
|
|
font-size: 14px;
|
|
|
border: 2px solid grey;
|
|
|
}
|
|
|
+
|
|
|
.diamond {
|
|
|
height: 100px;
|
|
|
width: 100px;
|
|
|
transform: rotateZ(45deg) skew(-20deg, -20deg);
|
|
|
position: relative;
|
|
|
border: 2px solid grey;
|
|
|
+
|
|
|
.diamond-p {
|
|
|
position: absolute;
|
|
|
width: 140px;
|
|
|
@@ -209,5 +343,8 @@ export default {
|
|
|
transform: skew(20deg, 20deg) rotateZ(-45deg);
|
|
|
}
|
|
|
}
|
|
|
-</style>
|
|
|
|
|
|
+::-webkit-scrollbar {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+</style>
|
