更改首页“故障预测”改为“故障预测，故障诊断”

pdaaphm-admin/src/main/resources/application-druid.yml

@@ -6,9 +6,9 @@ spring:
         druid:
             # 主库数据源
             master:
-                url: jdbc:mysql://47.108.150.237:3306/pdaaphm?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8
+                url: jdbc:mysql://101.126.133.7:9006/pdaaphm?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8
                 username: root
-                password: w.cf123321
+                password: 404cf3eae29df38f
             # 从库数据源
             slave:
                 # 从数据源开关/默认关闭

pdaaphm-ui/src/views/index.scss

@@ -0,0 +1,256 @@
+.home {
+  width: 100%;
+  min-height: calc(100vh - 94px);
+  overflow: hidden;
+}
+
+.first {
+  width: 97%;
+  height: 210px;
+  margin: 20px;
+  // background-color: white;
+  border-radius: 15px;
+  overflow: hidden;
+}
+
+.chart {
+  display: flex;
+  justify-content: space-around;
+  margin-left: 30px;
+}
+
+.second {
+  width: 97%;
+  height: 440px;
+  margin: 50px 20px;
+  // overflow: hidden;
+  display: flex;
+  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;
+    }
+
+    .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(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(-50%);
+      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(50%);
+      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%;
+    }
+    .tag2 {
+      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: 125%;
+    }
+  }
+
+  .topPanel {
+    width: 100%;
+    height: 37%;
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 1.5%;
+  }
+
+  .bottomPanel {
+    width: 100%;
+    height: 37%;
+    display: flex;
+    justify-content: space-around;
+    margin-left: 6%;
+    margin-top: 1%;
+  }
+
+  .tPanel,
+  .bPanel {
+    // position: relative;
+    width: 18%;
+    height: 95%;
+    overflow: auto;
+    border: 2px solid transparent;
+    background-clip: padding-box;
+    box-shadow: 0 0 10px rgba(63, 155, 255, 0.5);
+    border-radius: 5%;
+  }
+}
+
+.file,
+.beforeFile {
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.file:hover {
+  color: #00aaff;
+}
+
+.square {
+  width: 90px;
+  height: 50px;
+  line-height: 50px;
+  text-align: center;
+  border-radius: 12px;
+  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;
+    top: 14%;
+    left: -17%;
+    transform: skew(20deg, 20deg) rotateZ(-45deg);
+  }
+}
+
+::-webkit-scrollbar {
+  display: none;
+}
+
+::v-deep .el-table__empty-block {
+  background-color: #0b333f !important;
+  border: #0b333f;
+}
+
+::v-deep .vxe-body--row {
+  background-color: #0b333f;
+  color: white;
+}
+
+::v-deep .vxe-table--body :hover {
+  background-color: #0b333f;
+}
+
+::v-deep .vxe-header--row {
+  background-color: #1e262f;
+  color: white;
+}
+.remark {
+  margin-top: 20px;
+  font-size: 1.2rem;
+  color: #fff;
+  margin-left: 10%;
+}
+
+.image-preview {
+  margin-left: 50%;
+  transform: translate(-50%, 0);
+}

pdaaphm-ui/src/views/index.vue

@@ -221,6 +221,7 @@
             @click="handleProcess(5)"
           >
             <div class="tag">故障预测</div>
+            <div class="tag2">故障诊断</div>
           </div>
         </div>
       </div>
@@ -950,247 +951,5 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.home {
-  width: 100%;
-  min-height: calc(100vh - 94px);
-  overflow: hidden;
-}
-
-.first {
-  width: 97%;
-  height: 210px;
-  margin: 20px;
-  // background-color: white;
-  border-radius: 15px;
-  overflow: hidden;
-}
-
-.chart {
-  display: flex;
-  justify-content: space-around;
-  margin-left: 30px;
-}
-
-.second {
-  width: 97%;
-  height: 440px;
-  margin: 50px 20px;
-  // overflow: hidden;
-  display: flex;
-  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;
-    }
-
-    .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(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(-50%);
-      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(50%);
-      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: 100%;
-    height: 37%;
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: 1.5%;
-  }
-
-  .bottomPanel {
-    width: 100%;
-    height: 37%;
-    display: flex;
-    justify-content: space-around;
-    margin-left: 6%;
-    margin-top: 1%;
-  }
-
-  .tPanel,
-  .bPanel {
-    // position: relative;
-    width: 18%;
-    height: 95%;
-    overflow: auto;
-    border: 2px solid transparent;
-    background-clip: padding-box;
-    box-shadow: 0 0 10px rgba(63, 155, 255, 0.5);
-    border-radius: 5%;
-  }
-}
-
-.file,
-.beforeFile {
-  cursor: pointer;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.file:hover {
-  color: #00aaff;
-}
-
-.square {
-  width: 90px;
-  height: 50px;
-  line-height: 50px;
-  text-align: center;
-  border-radius: 12px;
-  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;
-    top: 14%;
-    left: -17%;
-    transform: skew(20deg, 20deg) rotateZ(-45deg);
-  }
-}
-
-::-webkit-scrollbar {
-  display: none;
-}
-
-::v-deep .el-table__empty-block {
-  background-color: #0b333f !important;
-  border: #0b333f;
-}
-
-::v-deep .vxe-body--row {
-  background-color: #0b333f;
-  color: white;
-}
-
-::v-deep .vxe-table--body :hover {
-  background-color: #0b333f;
-}
-
-::v-deep .vxe-header--row {
-  background-color: #1e262f;
-  color: white;
-}
-.remark {
-  margin-top: 20px;
-  font-size: 1.2rem;
-  color: #fff;
-  margin-left: 10%;
-}
-
-.image-preview {
-  margin-left: 50%;
-  transform: translate(-50%, 0);
-}
+@import "./index.scss";
 </style>