登录功能实现

src/store/index.js

@@ -65,8 +65,12 @@ export default new Vuex.Store({
   state: {
     projectName:"鑫海数字矿山后台管理系统",
     platformName:"鑫海数字矿山后台管理平台",
+    user:"",
   },
   mutations: {
+    changeUser(userName){
+      state.user = userName;
+    }
   },
   actions: {
   },

src/views/homepage.vue

@@ -5,7 +5,7 @@
       <span>{{ $store.state.platformName }}</span>
       <div class="userInformationBar">
         <div style="margin-right:10px;">
-          <span>{{userName}}</span>
+          <span>{{$store.state.user}}</span>
           <span class="iconfont icon-xiajiantou xiajiantou" style="font-size:18px;"></span>
         </div>
         <el-button type="primary" circle @click="handleFullScreen()" size="small" style="margin-right:10px;"><span :class="quanping"></span></el-button>

src/views/login.vue

@@ -5,21 +5,24 @@
       <div class="loginTitle">登录窗口</div>
       <div class="loginText">欢迎登录后台系统</div>
       <div class="loginInoputs">
-        <div class="userInpBody">
-          <div class="userIcon"><img src="../imgs/yonghuming.png"></div>
-          <input type="text" id="userInp" placeholder="输入你的用户名" v-model="loginForm.username">
-        </div>
-        <div class="passWordInpBody">
-          <div class="passWordIcon"><img src="../imgs/mima.png"></div>
-          <input type="password" id="passWordInp" placeholder="输入你的密码" v-model="loginForm.password">
-        </div>
+        <el-form ref="loginForm" :model="loginForm">
+          <el-form-item class="userInpBody">
+            <div class="userIcon"><img src="../imgs/yonghuming.png"></div>
+            <el-input v-model="loginForm.username" id="userInp" placeholder="输入你的用户名"></el-input>
+          </el-form-item>
+          <el-form-item class="passWordInpBody">
+            <div class="passWordIcon"><img src="../imgs/mima.png"></div>
+            <el-input type="password" v-model="loginForm.password" id="passWordInp" placeholder="输入你的密码"></el-input>
+          </el-form-item>
+        </el-form>
         <button class="loginBtn" @click="LoginInitiation">安全登录</button>
       </div>
     </div>
   </div>
 </template>
 <script>
-import { httpGet } from "@/common/httpBean.js"
+import { httpGet, httpPost,httpPostForJson } from "@/common/httpBean.js"
+import axios from "axios"
 import {login,code} from "@/axios/api.js"
 import {encrypt} from "@/utils/rsaEncrypt.js"
 import Cookies from 'js-cookie'
@@ -39,13 +42,12 @@ export default {
      // 获取验证码
     this.getCode()
     // 获取用户名密码等Cookie
-    //this.getCookie()
+    this.getCookie()
   },
   methods:{
      getCode() {
        httpGet(code).then(res=> {
-          //console.log(res.uuid);
-          this.uuid = res.uuid;
+          this.loginForm.uuid = res.uuid;
        });
     },
     getCookie() {
@@ -63,10 +65,8 @@ export default {
       if(this.loginForm.userName == "" || this.loginForm.password == ""){
           alert("请输入正确的用户名或密码!")
       }else{
-        httpGet(login).then( res => {
-          console.log(res);
-          this.$refs.loginForm.validate(valid => {
-            const user = {
+        this.$refs.loginForm.validate( valid => {
+          const user = {
               username: this.loginForm.username,
               password: this.loginForm.password,
               uuid: this.loginForm.uuid
@@ -74,7 +74,20 @@ export default {
             if (user.password !== this.cookiePass) {
               user.password = encrypt(user.password)
             }
-            if (valid) {
+            if(valid){
+              httpPostForJson(login, user).then( res =>{
+                //console.log(res);
+                if(res.user.user.enabled){
+                  //this.$store.commit('changeUser',res.user.user.nickName);
+                  this.$router.push({path: 'homepage/mineMonitoring'});
+                }else{
+                  // console.log(res);
+                  this.$message({
+                    message: "用户名密码错误",
+                    type: 'error'
+                });
+                }
+              })
               this.loading = true
               if (user.rememberMe) {
                 Cookies.set('username', user.username, { expires: Config.passCookieExpires })
@@ -83,13 +96,11 @@ export default {
                 Cookies.remove('username')
                 Cookies.remove('password')
               }
-            } else {
-              console.log('error submit!!')
-              return false
-            }
-          })
+          } else {
+            console.log('error submit!!')
+            return false
+          }
         })
-        this.$router.push({path: 'homepage/mineMonitoring'});
       }
     }
   }
@@ -150,11 +161,13 @@ export default {
   height: 300px;
 }
 .userInpBody{
-  display: flex;
   padding: 2px;
   border: 1px solid rgb(18,70,113);
   margin-bottom: 20px;
 }
+.el-form-item__content{
+  display: flex;
+}
 .userIcon{
   padding: 15px;
   box-sizing: border-box;
@@ -163,16 +176,16 @@ export default {
   background-color: rgb(18,70,113);
 }
 #userInp{
-  margin-left: 10px;
+  height: 100%;
   width: 80%;
   background: none;
 	outline: none;
 	border: none;
   font-size: 20px;
   color: rgb(47,213,255);
-  letter-spacing: 3px;
+  letter-spacing: 2px;
 }
-::-webkit-input-placeholder { /* WebKit browsers */
+.el-input input::-webkit-input-placeholder {
   color:rgb(47,213,255);
 }
 .passWordInpBody{
@@ -189,14 +202,14 @@ export default {
   background-color: rgb(18,70,113);
 }
 #passWordInp{
-  margin-left: 10px;
+  height: 100%;
   width: 80%;
   background: none;
 	outline: none;
 	border: none;
   font-size: 20px;
   color: rgb(47,213,255);
-  letter-spacing: 3px;
+  letter-spacing: 2px;
 }
 .loginBtn{
   width: 100%;

src/views/mineMonitoring.vue

@@ -18,7 +18,7 @@
             </div>
           </div>
           <div class="intelligentDispatchRight">
-            <img src="../imgs/zhinengpaidan.png" style="margin-left:33px;">
+            <img src="../imgs/zhinengpaidan.png" style="margin-left:33px;" class="xuanzhuanAll">
             <div style="color:#28F7FF;font-size:28px;text-align: center;">{{$store.state.a.intelligentDispatch.name}}</div>
             <img src="../imgs/juxing2.png" style="margin:10px 0px 0px 80px;">
           </div>
@@ -39,7 +39,7 @@
             </div>
           </div>
           <div class="environmentalMonitoringRight">
-            <img src="../imgs/huanjingjiance.png" style="margin-left:33px;">
+            <img src="../imgs/huanjingjiance.png" style="margin-left:33px;" class="xuanzhuanAll">
             <div style="color:#28F7FF;font-size:28px;text-align: center;">{{$store.state.a.environmentalMonitoring.name}}</div>
             <img src="../imgs/juxing2.png" style="margin:10px 0px 0px 80px;">
           </div>
@@ -60,7 +60,7 @@
             </div>
           </div>
           <div class="locationSystemRight">
-            <img src="../imgs/dingweixitong.png" style="margin-left:33px;">
+            <img src="../imgs/dingweixitong.png" style="margin-left:33px;" class="xuanzhuanAll">
             <div style="color:#28F7FF;font-size:28px;text-align: center;">{{$store.state.a.locationSystem.name}}</div>
             <img src="../imgs/juxing2.png" style="margin:10px 0px 0px 80px;">
           </div>
@@ -69,7 +69,7 @@
       <!-- 边坡在线监测 -->
       <div class="slopeMonitoring">
           <div class="slopeMonitoringRight">
-            <img src="../imgs/bianpojiance.png" style="margin-left:33px;">
+            <img src="../imgs/bianpojiance.png" style="margin-left:33px;" class="xuanzhuanAll">
             <div style="color:#28F7FF;font-size:28px;text-align: center;">{{$store.state.a.slopeMonitoring.name}}</div>
             <img src="../imgs/juxing2.png" style="margin:10px 0px 0px 80px;">
           </div>
@@ -90,7 +90,7 @@
       <!-- 生产自动化 -->
       <div class="productionAutomation">
           <div class="productionAutomationRight">
-            <img src="../imgs/shengchanzidonghua.png" style="margin-left:33px;">
+            <img src="../imgs/shengchanzidonghua.png" style="margin-left:33px;" class="xuanzhuanAll">
             <div style="color:#28F7FF;font-size:28px;text-align: center;">{{$store.state.a.productionAutomation.name}}</div>
             <img src="../imgs/juxing2.png" style="margin:10px 0px 0px 80px;">
           </div>
@@ -285,6 +285,14 @@ export default {
 .intelligentDispatchRight{
   width: 170px;
 }
+.xuanzhuanAll{
+  animation:xuanzhuan 6s linear infinite;
+}
+/* @keyframes xuanzhuan{       
+	0%{-webkit-transform:rotate(0deg);} 
+	50%{-webkit-transform:rotate(-180deg);} 
+	100%{-webkit-transform:rotate(-360deg);}
+} */
 /* 环境监测 */
 .environmentalMonitoring{
   top: 60%;

src/views/videoSurveillance/videoSetting.vue

 <template>
-  <div>
-      <span>监控设置</span>
+  <div class="iframeBody">
+
+    <div class="leftMenuBar">
+      <div style="color:#071E4C;font-weight:600;font-size:20px;margin-bottom:20px;">监控设置</div>
+      <div style="color:#071E4C;font-weight:600;font-size:17px;">
+        <div v-for="(item,index) in videoAreaArray" :key="index" style="margin-bottom:10px;cursor: pointer;" :class="index == videoAreaIndex ? 'leftMenuSelected' : '' " @click="videoMenuIndex(index)">
+          <span class="el-icon-camera-solid"> {{item}}</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="rightVideoBox">
+      
+    </div>
+
   </div>
 </template>
 
 <script>
 export default {
+  data(){
+    return{
+      videoAreaArray:["采区监控","厂区监控","办公室监控","办公室监控1","办公室监控2"],
+      videoAreaIndex:0,
 
+    }
+  },
+  methods:{
+    videoMenuIndex(index){
+      this.videoAreaIndex = index;
+    }
+  },
+  
 }
 </script>
 
-<style>
-
+<style scoped>
+*{
+  margin: 0;
+  padding: 0;
+}
+.iframeBody{
+  height: 100%;
+  display: flex;
+  width: 100%;
+}
+.leftMenuBar{
+  width: 10%;
+  height: 100%;
+  background-color: white;
+  padding: 20px;
+  box-sizing: border-box;
+}
+.rightVideoBox{
+  width: 90%;
+  height: 100%;
+  background-color: sandybrown;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.leftMenuSelected{
+  color: rgb(0,82,255);
+}
+.sonVideoBox{
+  width: 49.8%;
+  height: 49.8%;
+  border: 1px solid red;
+}
 </style>
\ No newline at end of file

src/views/videoSurveillance/videoShow.vue

 <template>
   <div class="iframeBody">
+
     <div class="leftMenuBar">
       <div style="color:#071E4C;font-weight:600;font-size:20px;margin-bottom:20px;">视频监控区域</div>
       <div style="color:#071E4C;font-weight:600;font-size:17px;">
@@ -10,7 +11,9 @@
     </div>
 
     <div class="rightVideoBox">
+      <div v-for="(item,index) in rightVideoBoxArray" :key="index" class="sonVideoBox">
 
+      </div>
     </div>
 
   </div>
@@ -22,6 +25,7 @@ export default {
     return{
       videoAreaArray:["采区监控","厂区监控","办公室监控","办公室监控1","办公室监控2"],
       videoAreaIndex:0,
+      rightVideoBoxArray:[4,4,4,4],
     }
   },
   methods:{
@@ -35,7 +39,6 @@ export default {
 
 <style scoped>
 *{
-  
   margin: 0;
   padding: 0;
 }
@@ -54,9 +57,17 @@ export default {
 .rightVideoBox{
   width: 90%;
   height: 100%;
-  background-color: bisque;
+  background-color: white;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
 }
 .leftMenuSelected{
   color: rgb(0,82,255);
 }
+.sonVideoBox{
+  width: 49.8%;
+  height: 49.8%;
+  border: 1px solid red;
+}
 </style>
\ No newline at end of file