登录添加背景图片、故障预警添加路由、新增算法模型、DBscan、密度聚类页面、修改可靠性分析图表里的数据

src/App.vue

@@ -1,9 +1,9 @@
 <template>
   <!-- <div v-if="!showSisView && isLogined" class="main"> -->
-    <div  class="main">
+    <div  class="main" v-if="!showSisView && isLogined">
     <!-- <div v-if="token !==''" class="main"> -->
     <div class="header-body">
-      <div class="header-title">
+      <div class="header-title" >
         <svg
           version="1.1"
           xmlns="http://www.w3.org/2000/svg"
@@ -235,7 +235,7 @@ l16.229-16.229l16.229,16.229l42.867-42.867C115.034,45.228,109.133,42.189,102.956
         </svg>
       </div>
       <div class="header-menu-body">
-        <Header v-if="!showSisView && isLogined" @onMenuClick="HeaderMenuClick" />
+        <Header  @onMenuClick="HeaderMenuClick" />
       </div>
     </div>
     <div
@@ -244,12 +244,15 @@ l16.229-16.229l16.229,16.229l42.867-42.867C115.034,45.228,109.133,42.189,102.956
       @mouseenter="showMenu"
       @mouseleave="hideMenu"
     >
-      <Menu v-if="!showSisView && isLogined" :root="root" />
+      <Menu  :root="root" />
     </div>
     <div class="main-body">
       <router-view />
     </div>
   </div>
+  <div v-else class="login">
+    <login-page />
+  </div>
   <!-- <login-page v-if="!showSisView && !isLogined" @onLogin="login" /> -->
    <!-- <div v-else-if="token == ''">
     {{token}}
@@ -266,13 +269,13 @@ import Header from "@/views/layout/Header.vue";
 
 import { mapMutations } from "vuex";
 
-// import LoginPage from "./views/layout/login-page.vue";
+import LoginPage from "./views/layout/login-page.vue";
 import sisView from "./views/sisView/index.vue";
 export default {
   components: {
     Menu,
     Header,
-    // LoginPage,
+    LoginPage,
     sisView,
   },
 
@@ -287,7 +290,16 @@ export default {
       memuCloseTimeout: null,
     };
   },
-
+ beforeCreate(){
+   let authToken = localStorage.getItem('authToken')
+   console.log('authToken:', authToken)
+  if (authToken === null || authToken === "") {
+		// document.querySelector('body').setAttribute("style","background-image:url('./assets/login.jpg')")
+    document.querySelector('body').setAttribute("style","background-color:#040c0b;background-size:auto;background-image:url('./assets/login.jpg')")
+		} else {
+			document.querySelector('body').setAttribute("style","background-image:url('./assets/background.png');background-size:cover")
+		}
+ },
   created() {
     let that = this;
 
@@ -360,7 +372,7 @@ export default {
     $route(res) {
       console.log('resRoute:',res)
       this.showSisView = res.fullPath === "/sisView";
-      this.isLogined = res.path !=='/login'
+      // this.isLogined = res.path !=='/login'
     },
   },
 };
@@ -460,4 +472,15 @@ body {
     // }
   }
 }
+.login{
+  width: 100vw;
+  height: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  overflow: hidden;
+  background-image: url("./assets/login.jpg");
+  background-color: #040c0b;
+    opacity: 0.2;
+    position: absolute;
+}
 </style>

src/router/index.js

@@ -539,6 +539,21 @@ const routes = [{
 	name: "fxzstmain",
 	component: () => import("../views/windAnalysis/fxzstmain.vue"),
 },
+{
+path:"/health/MalfunctionWarning/", //故障预警
+name:"MalfunctionWarning",
+component:() => import("../views/MalfunctionWarning/MalfunctionWarning.vue")
+},
+{
+	path:"/health/MalfunctionWarning/DBscan", //dbscan
+	name:"DBscan",
+	component:() => import("../views/MalfunctionWarning/DBscan.vue")
+},
+{
+	path:"/health/MalfunctionWarning/mdjl", //密度聚类
+	name:"mdjl",
+	component:() => import("../views/MalfunctionWarning/mdjl.vue")
+},
 /***********************************************************智慧检修************************************************************* */
 /***********************************************************安全管控************************************************************* */
 {
@@ -874,18 +889,18 @@ const router = createRouter({
 router.beforeEach((to, from, next) => {
 	next();
 });
-router.beforeEach((to, from, next) => {
-	if (to.path === '/login') {
-		next()
-	} else {
-		let authToken = localStorage.getItem('authToken')
-		console.log('authToken:', authToken)
-		if (authToken === null || authToken === "") {
-			next({ path: '/login' })
-		} else {
-			next()
-		}
-	}
-})
+// router.beforeEach((to, from, next) => {
+// 	if (to.path === '/login') {
+// 		next()
+// 	} else {
+// 		let authToken = localStorage.getItem('authToken')
+// 		console.log('authToken:', authToken)
+// 		if (authToken === null || authToken === "") {
+// 			next({ path: '/login' })
+// 		} else {
+// 			next()
+// 		}
+// 	}
+// })
 
 export default router;

src/views/MalfunctionWarning/MalfunctionWarning.vue

@@ -0,0 +1,186 @@
+<template>
+  <div class="decision-page-1">
+    <!-- 查询样式统一处理 样式在 assets/styles/form.less 文件中 -->
+    <div class="query mg-b-8">
+      <div class="query-items">
+        <div class="query-item">
+          <div class="lable">场站：</div>
+          <div class="search-input">
+            <el-select
+              v-model="value1"
+              @change="ChangZhanChange(value1)"
+              clearable
+              placeholder="请选择"
+              popper-class="select"
+            >
+              <el-option
+                v-for="item in ChangZhan"
+                :key="item.id"
+                :value="item.id"
+                :label="item.name"
+              >
+              </el-option>
+            </el-select>
+          </div>
+        </div>
+      </div>
+      <!-- <div class="query-actions">
+        <button class="btn green">搜索</button>
+        <button class="btn" @click="mxClick()">明细信息</button>
+        <button class="btn" @click="exportExcel()">导出</button>
+      </div> -->
+    </div>
+    <div class="actions mg-b-8">
+      <button
+        class="btn"
+        :class="TypeClass == 1 ? 'green' : ''"
+        @click="TypeClick(1)"
+      >
+        风场
+      </button>
+      <button
+        class="btn"
+        :class="TypeClass == 2 ? 'green' : ''"
+        @click="TypeClick(2)"
+      >
+        项目
+      </button>
+      <button
+        class="btn"
+        :class="TypeClass == 3 ? 'green' : ''"
+        @click="TypeClick(3)"
+      >
+        集电线路
+      </button>
+    </div>
+    <el-row :type="'flex'" class="content">
+      <el-col :span="12" class="pd-r-8">
+        <toolbar-panel title="风机绩效榜" :showLine="false">
+          <!-- <bar-line-chart
+            :height="'calc(100vh - 180px)'"
+            :bardata="bardata"
+            :lineData="lineData"
+            :color="barColor"
+            lineName="理论发电量"
+          /> -->
+        </toolbar-panel>
+      </el-col>
+      <el-col :span="12" class="pd-l-8">
+        <panel :title="'项目列表'" :showLine="false">
+          <!-- <div class="project-table">
+            <Table :data="tableData" :height="'calc(80vh - 50px)'">
+              <template v-slot:tr v-if="tableData.data.length > 0">
+                <tr>
+                  <td style="width: 50px">
+                    {{ tableDataEnd.index }}
+                  </td>
+                  <td style="width: 150px">
+                    {{ tableDataEnd.name }}
+                  </td>
+                  <td>
+                    {{ tableDataEnd.llfdl }}
+                  </td>
+                  <td>
+                    {{ tableDataEnd.sjfdl }}
+                  </td>
+                  <td>
+                    {{ tableDataEnd.speed }}
+                  </td>
+                  <td>
+                    {{ tableDataEnd.fjhjx }}
+                  </td>
+                  <td>
+                    {{ tableDataEnd.jhjx }}
+                  </td>
+                  <td style="width: 80px">
+                    {{ tableDataEnd.sl }}
+                  </td>
+                  <td>
+                    {{ tableDataEnd.xd }}
+                  </td>
+                  <td>
+                    {{ tableDataEnd.xn }}
+                  </td>
+                  <td>
+                    {{ tableDataEnd.fnlly }}
+                  </td>
+                </tr>
+              </template>
+            </Table>
+          </div> -->
+        </panel>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+<script>
+import Panel from "../../components/coms/panel/panel.vue";
+import partten from "@/helper/partten.js";
+export default{
+      components: {
+    Panel,
+    partten,
+  },
+  data(){
+      return{}
+  },
+  created(){},
+  methods:{},
+}
+</script>
+<style lang="less">
+.decision-page-1 {
+  .com-panel .panel-title {
+    line-height: 3.4259vh;
+  }
+
+  .tools {
+    display: flex;
+    line-height: 3.4259vh;
+
+    .tool-block {
+      display: flex;
+      align-items: center;
+      margin-left: 0.741vh;
+
+      .legend {
+        flex: auto;
+        width: 0.741vh;
+        height: 0.741vh;
+        margin-right: 0.741vh;
+
+        &.long {
+          width: 2.963vh;
+          height: 0.37vh;
+        }
+      }
+
+      .legend-text {
+        color: @gray-l;
+        font-size: @fontsize-s;
+      }
+    }
+  }
+
+  .project-table {
+    overflow: auto;
+
+    tbody {
+      height: calc(100vh - 24.5vh);
+    }
+
+    td {
+      color: #b2bdc0;
+    }
+  }
+
+  .contentMx {
+    width: 100%;
+    overflow-x: auto;
+  }
+
+  .activeMx {
+    width: 150%;
+  }
+}
+</style>

src/views/layout/Menu.vue

@@ -356,7 +356,7 @@ export default {
             {
               text: "故障诊断",
               icon: "svg-故障诊断",
-              path: "//health/gzzdmalfunctionDiagnose",
+              path: "/health/gzzd/malfunctionDiagnose",
               children: [
                 {
                   text: "故障诊断",
@@ -494,6 +494,28 @@ export default {
                 },
               ],
             },
+            {
+              text:"故障预警",
+              icon:"svg-预警记录",
+              path:"/health/MalfunctionWarning/",
+              // children:[
+              //   {
+              //     text:"算法类型",
+              //     icon:"svg-wind-site",
+              //     path:"",
+              //   },
+              //   {
+              //      text:"DBscan",
+              //     icon:"svg-wind-site",
+              //     path:"/health/MalfunctionWarning/DBscan",
+              //   },
+              //    {
+              //      text:"密度聚类",
+              //     icon:"svg-wind-site",
+              //     path:"/health/MalfunctionWarning/mdjl",
+              //   }
+              // ]
+            }
           ],
         },
         {

src/views/layout/login-page.vue

@@ -1,5 +1,11 @@
 <template>
   <div class="login-panel">
+     <!-- <el-image
+      style="width: 100px; height: 100px"
+      :src="url"
+      :fit="fit"
+    ></el-image> -->
+    <img src="../../assets/sislogo.png" />
     <el-form class="mg-b-16">
       <el-form-item class="mg-b-8">
         <el-input v-model="username" placeholder="请输入登录名"></el-input>
@@ -13,6 +19,7 @@
       </el-form-item>
     </el-form>
     <button style="width:100%;" class="btn" @click="Login">登录</button>
+     <!-- <button style="width:30%;float:right" class="btn" @click="Login">登录</button> -->
   </div>
 </template>
 <script>
@@ -22,6 +29,7 @@ export default {
       username: "",
       password: "",
       token: "",
+      url:"../../assets/sislogo.png",
     };
   },
   props: { token: "" },
@@ -34,7 +42,7 @@ export default {
       if (that.username !== "" && that.password !== "") {
         that.API.requestData({
           isMust: false, // 请求是否携带 token ，默认为 true ，可缺省
-          baseURL: "http://192.168.10.44:8082",
+          // baseURL: "http://192.168.10.15:8082",
           method: "POST", // 请求方式，默认为 GET ，可缺省
           subUrl: "sys/login", // 请求接口地址，必传项
           data: {
@@ -118,13 +126,28 @@ export default {
 
 <style lang="less">
 .login-panel {
-  width: 300px;
-  height: 200px;
-  position: absolute;
-  padding: 32px;
-  left: calc(50vw - 150px);
-  top: calc(50vh - 120px);
-  border: 1px solid @green;
-  border-radius: 8px;
+  // width: 300px;
+  // height: 200px;
+  // position: absolute;
+  // padding: 32px;
+  // left: calc(50vw - 150px);
+  // top: calc(50vh - 120px);
+  // // border: 1px solid @green;
+  // border:2px solid #fff;
+  // border-radius: 8px;
+  // background-image: url('../../assets/login.jpg')
+
+  width: 700px;
+    height: 300px;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    margin-left: -350px;
+    margin-top: -150px;
+    border-radius: 10px;
+    border: 1px solid #ccc;
+  .btn{
+        border: 1px solid #fff;
+  }
 }
 </style>