zc

.env.development

@@ -9,7 +9,7 @@ VUE_APP_ENV = 'development'
 # 1.8
 # VUE_APP_BASE_API =  '192.168.1.8:8080'
 # 韩
-# VUE_APP_BASE_API =  '192.168.1.20:8080'
+VUE_APP_BASE_API =  '192.168.1.20:8080'
 # 飞
 # VUE_APP_BASE_API =  '192.168.1.17:8080'
 # 高升
@@ -19,7 +19,7 @@ VUE_APP_ENV = 'development'
 # 43服务器
 # VUE_APP_BASE_API = '192.168.1.43/labSystem/'
 # 柴
- VUE_APP_BASE_API = '192.168.1.9:8080'
+# VUE_APP_BASE_API = '192.168.1.9:8080'
 # 暨大
 # VUE_APP_BASE_API = 'lab.sxitdlc.com/jndxlabSystem/'
 # 矿大-文昌

package.json

@@ -10,11 +10,13 @@
   "dependencies": {
     "axios": "^1.1.3",
     "core-js": "^3.8.3",
-    "crypto-js": "^4.1.1",
+    "crypto-js": "^4.2.0",
     "echarts": "^4.4.0",
     "element-ui": "^2.15.10",
     "flv.js": "^1.6.2",
     "jquery": "^3.6.1",
+    "js-cookie": "^3.0.5",
+    "js-md5": "^0.8.3",
     "mqtt": "^4.2.8",
     "node-sass": "^7.0.1",
     "qs": "^6.11.0",

src/api/login.js

@@ -0,0 +1,47 @@
+import request from '@/utils/request'
+
+
+// 登录方法
+export function login(account, password, code, uuid, userType) {
+    return request({
+        url: '/auth/login',
+        method: 'post',
+        data: { account, password, code, uuid,userType }
+    })
+}
+//获取认证信息
+export function authInfo(query) {
+    return request({
+        url: '/auth/info',
+        method: 'get',
+        params: query
+    })
+}
+
+// 获取验证码
+export function getCodeImg() {
+    return request({
+        url: '/auth/captcha',
+        method: 'get'
+    })
+}
+/*                分类获取公共配置
+* category        1.系统参数 2.公共配置
+* configType      1.基础配置 2.管控一体机 3.化学品终端 4.小程序配置 5.开发配置 6.首页配置
+*/
+export function getConfigByType(data) {
+    return request({
+        url: '/system/config/info/getConfigByType',
+        method: 'post',
+        data: data
+    })
+}
+
+// 查询公共配置
+export function configInfo(data) {
+    return request({
+        url: '/auth/configInfo',
+        method: 'get',
+        params: data
+    })
+}

src/router/index.js

@@ -1,4 +1,5 @@
 import index from '../views/index.vue';
+import login from '../views/login.vue';
 import CourtyardHome from '../views/courtyardManage/courtyardHome.vue';
 import AdmittanceDetail from '../views/courtyardManage/admittanceDetail.vue';
 import ControlDetail from '../views/courtyardManage/controlDetail.vue';
@@ -16,6 +17,14 @@ import ClassifyGradeDetail from '../views/courtyardManage/classifyGradeDetail.vu
 const router = [
     {
       path: '/',
+      component: login,
+      name: 'login',
+      meta: {
+         title: '实验室安全智能监测与控制系统',
+      },
+    },
+    {
+      path: '/home',
       component: index,
       name: 'index',
       meta: {

src/utils/request.js

@@ -1,4 +1,5 @@
 import axios from "axios";
+import router from '@/router'
 import { MessageBox, Message, Loading } from 'element-ui'
 import {tansParams,judgmentNetworkReturnAddress} from "@/utils/public";
 
@@ -67,19 +68,39 @@ serviceAxios.interceptors.response.use(res => {
         // 未设置状态码则默认成功状态
         const code = res.data.code || 200;
         // 获取错误信息
-        if (code == 5005) {
-            //无权限
-            MessageBox.confirm('没有相关权限,请联系管理员', '系统提示', {
-                    confirmButtonText: '确定',
-                    showCancelButton:false,
-                    closeOnClickModal:false,
-                    cancelButtonText: '取消',
-                    type: 'warning'
-                }
-            ).then(() => {
-                window.open(localStorage.getItem('pcUrl'),'_self')
-                return
-            }).catch(() => {});
+        if(code == 5002){
+            if(localStorage.getItem('token')){
+                localStorage.removeItem('token')
+                MessageBox.confirm('登录状态已过期，请重新登录', '系统提示', {
+                        confirmButtonText: '确定',
+                        showCancelButton:false,
+                        closeOnClickModal:false,
+                        cancelButtonText: '取消',
+                        type: 'warning'
+                    }
+                ).then(() => {
+                    console.log('跳转')
+                    this.$router.replace({ path: "/" }).catch(()=>{});
+                }).catch(() => {});
+            }
+        }else if (code == 5005) {
+            if(localStorage.getItem('token')){
+                //无权限
+                localStorage.removeItem('token')
+                MessageBox.confirm('没有相关权限,请联系管理员', '系统提示', {
+                        confirmButtonText: '确定',
+                        showCancelButton:false,
+                        closeOnClickModal:false,
+                        cancelButtonText: '取消',
+                        type: 'warning'
+                    }
+                ).then(() => {
+                    console.log('跳转')
+                    this.$router.replace({ path: "/" }).catch(()=>{});
+                }).catch(() => {});
+            }
+        }else if(code == 5007){
+            return res.data
         }else if (code != 200) {
             if(!messageData){
                 messageData = Message({
@@ -111,18 +132,20 @@ serviceAxios.interceptors.response.use(res => {
         }
         else if (message.includes("Request failed with status code")) {
             if(message.substr(message.length - 3) == 401){
-                localStorage.removeItem('token')
-                MessageBox.confirm('登录状态已过期，请重新登录', '系统提示', {
-                        confirmButtonText: '确定',
-                        showCancelButton:false,
-                        closeOnClickModal:false,
-                        cancelButtonText: '取消',
-                        type: 'warning'
-                    }
-                ).then(() => {
-                    window.open(localStorage.getItem('pcUrl'),'_self')
-                    return
-                }).catch(() => {});
+                if(localStorage.getItem('token')){
+                    localStorage.removeItem('token')
+                    MessageBox.confirm('登录状态已过期，请重新登录', '系统提示', {
+                            confirmButtonText: '确定',
+                            showCancelButton:false,
+                            closeOnClickModal:false,
+                            cancelButtonText: '取消',
+                            type: 'warning'
+                        }
+                    ).then(() => {
+                        console.log('跳转')
+                        this.$router.replace({ path: "/" }).catch(()=>{});
+                    }).catch(() => {});
+                }
             }else{
                 messageData = Message({
                     message: message,

src/views/index.vue

@@ -1,7 +1,7 @@
 <!--  -->
 <template>
   <div class="app-container">
-    <courtyard-home v-if="pageType"></courtyard-home>
+    <courtyard-home></courtyard-home>
   </div>
 </template>
 <script>
@@ -25,7 +25,7 @@ import {Decrypt} from "@/utils/secret";
     created () {
     },
     mounted () {
-        this.initialize()
+        // this.initialize()
     },
     methods: {
         initialize(){

src/views/login.vue

@@ -0,0 +1,565 @@
+<template>
+  <div class="login-page scrollbar-box">
+    <img class="logo-img" :src="rectangleLogo">
+    <div class="title-img-box">
+      <div>
+        <img class="title-img" src="@/assets/image/login/title_icon.png">
+      </div>
+    </div>
+    <div class="form-box">
+      <p class="form-title-p">登录</p>
+      <el-form ref="loginForm" :model="loginForm" class="login-form">
+        <div class="username-input-box" :class="userTypeCode == 1||userTypeCode == 4?'username-input-box-code':''">
+          <img src="@/assets/image/login/icon_dl_zh.png" alt="">
+          <input type="text" v-model="loginForm.username" placeholder="请输入账号" maxlength="20" @keyup.enter="handleLogin()">
+        </div>
+        <div class="password-input-box" :class="userTypeCode == 2||userTypeCode == 4?'username-input-box-code':''">
+          <img src="@/assets/image/login/icon_dl_mm.png" alt="">
+          <input type="password" v-model="loginForm.password" placeholder="请输入密码" maxlength="20" @keyup.enter="handleLogin()">
+        </div>
+        <p class="text-p">{{text}}</p>
+        <div class="code-input-box">
+          <div class="code-input-left-box" :class="userTypeCode == 3||userTypeCode == 5?'username-input-box-code':''">
+            <img src="@/assets/image/login/icon_dl_yzm.png" alt="">
+            <input type="text" v-model="loginForm.code" placeholder="请输入验证码" maxlength="4" @keyup.enter="handleLogin()">
+          </div>
+          <div class="login-code">
+            <img :src="codeUrl" @click="getCode" class="login-code-img"/>
+          </div>
+        </div>
+        <el-form-item>
+          <el-button
+                  class="form-button-p"
+                  :loading="loading"
+                  size="medium"
+                  height="50"
+                  @click.native.prevent="handleLogin()"
+          >
+            <span v-if="!loading">登 录</span>
+            <span v-else>登 录 中...</span>
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <p class="introduction-p">技术支持：江苏忠江智能科技有限公司</p>
+  </div>
+</template>
+
+<script>
+    import md5 from 'js-md5';
+    import Cookies from "js-cookie";
+    import { login,authInfo,getCodeImg,getConfigByType,configInfo} from "@/api/login";
+    import {Decrypt} from "@/utils/secret";
+
+    export default {
+        name: "Login",
+        data() {
+            return {
+                codeUrl: "",
+                cookiePassword: "",
+                type:1,
+                loginForm: {
+                    username: "",
+                    password: "",
+                    rememberMe: false,
+                    code: "",
+                    uuid: "",
+                },
+                loading: false,
+                // 验证码开关
+                captchaOnOff: true,
+                // 注册开关
+                register: false,
+                redirect: undefined,
+                text:"",
+                userTypeCode:"",
+                rectangleLogo:localStorage.getItem('rectangleLogo'),
+                //手机登录
+                loginType:1,
+                loginFormTwo:{
+                    username:"",
+                    password:"",
+                },
+                loginRulesTwo:{
+                    username: [
+                        { required: true, message: "请输入手机号码", trigger: "blur" },
+                        { required: true, message: "请输入手机号码", validator: this.spaceJudgment, trigger: "blur" }
+                    ],
+                    password: [
+                        { required: true, message: "请输入验证码", trigger: "blur" },
+                        { required: true, message: "请输入验证码", validator: this.spaceJudgment, trigger: "blur" }
+                    ],
+                },
+                textTwo:"",
+                codeNum:"",
+                timer:null,
+                codeButtonType:true,
+            };
+        },
+        watch: {
+            $route: {
+                handler: function(route) {
+                    this.redirect = route.query && route.query.redirect;
+                },
+                immediate: true
+            }
+        },
+        created() {
+            this.getCode();
+        },
+        mounted(){
+            this.configInfo();
+        },
+        methods: {
+            //获取公共配置数据
+            configInfo(){
+                let self = this;
+                configInfo({ type: '1,2,3' }).then(response => {
+                    let list = JSON.parse(response.data)
+                    let newData = {};
+                    list.forEach((item) => {
+                        let obj = JSON.parse(item.configValue)
+                        newData = {...newData,...obj}
+                    })
+                    setTimeout(function(){
+                        self.$set(self,'rectangleLogo',newData.rectangleLogo);
+                        localStorage.setItem('schoolName',newData.schoolName)
+                        localStorage.setItem('circularLogo',newData.circularLogo)
+                        localStorage.setItem('rectangleLogo',newData.rectangleLogo)
+                        localStorage.setItem('videoCover',newData.videoCover)
+                        localStorage.setItem('setSmartAlarmType',newData.smartLock)
+                    },200);
+                });
+            },
+            //获取开发配置
+            getExploitConfig(){
+                getConfigByType({ category: 2, configType: 5 }).then(response => {
+                    let obj = JSON.parse(response.data.configValue);
+                    //判定http或者https
+                    let urlText = window.location.href.split('://')[0]+'://';
+                    let outerNet = window.location.href.indexOf(obj.ipIdentify) == -1//true外网 false 内网
+                    if(outerNet){//外网
+                        //MQTT地址
+                        localStorage.setItem('mqttUrl','wss://'+Decrypt(obj.mqttExtranetUrl))
+                        //MQTT账号
+                        localStorage.setItem('mqttUser',Decrypt(obj.mqttExtranetUser))
+                        //MQTT密码
+                        localStorage.setItem('mqttPassword',Decrypt(obj.mqttExtranetPassword))
+                        //PC端回跳地址
+                        localStorage.setItem('pcUrl',urlText+obj.pcExtranetUrl)
+                    }else{
+                        //MQTT地址
+                        localStorage.setItem('mqttUrl','ws://'+Decrypt(obj.mqttIntranetUrl))
+                        //MQTT账号
+                        localStorage.setItem('mqttUser',Decrypt(obj.mqttIntranetUser))
+                        //MQTT密码
+                        localStorage.setItem('mqttPassword',Decrypt(obj.mqttIntranetPassword))
+                        //PC端回跳地址
+                        localStorage.setItem('pcUrl',urlText+obj.pcIntranetUrl)
+                    }
+                });
+            },
+            getCode() {
+                getCodeImg().then(res => {
+                    this.captchaOnOff = res.captchaOnOff === undefined ? true : res.captchaOnOff;
+                    if (this.captchaOnOff) {
+                        this.codeUrl = "data:image/gif;base64," + res.data.image;
+                        this.loginForm.uuid = res.data.uuid;
+                    }
+                });
+            },
+            handleLogin() {
+                let self = this;
+                //账号登录
+                if(this.loginForm.username.length<1){
+                    this.text = "*请输入账号";
+                    this.userTypeCode = "1";
+                    return
+                }else if(this.loginForm.password.length<1){
+                    this.text = "*请输入密码";
+                    this.userTypeCode = "2";
+                    return
+                }else if(!this.loginForm.code||this.loginForm.code.length<1){
+                    this.text = "*请输入验证码";
+                    this.userTypeCode = "3";
+                    return
+                }
+                this.text = "";
+                this.userTypeCode = "";
+                this.$refs.loginForm.validate(valid => {
+                    if (valid) {
+                        this.loading = true;
+                        if (this.loginForm.rememberMe) {
+                            Cookies.set("username", this.loginForm.username, { expires: 30 });
+                            Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
+                            Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
+                        } else {
+                            Cookies.remove("username");
+                            Cookies.remove("password");
+                            Cookies.remove('rememberMe');
+                        }
+                        this.login(this.loginForm);
+                    }
+                });
+            },
+            login(userInfo){
+                const account = userInfo.username.trim()
+                const password = md5(userInfo.password);
+                const code = userInfo.code
+                const uuid = userInfo.uuid
+                const userType = userInfo.userType
+                login(account, password, code, uuid, userType).then(res => {
+                    if(res.code == 200){
+                        if(res.data.userType != '2'){
+                            localStorage.setItem('userId',res.data.userId);
+                            localStorage.setItem('token',res.data.token);
+                            //身份字段规则转义 原定11老师 22学生  新版本后0系统1老师2学生,这里身份字段转义为旧版本规则
+                            localStorage.setItem('userType',res.data.userType==0||res.data.userType==1?'1':'2')
+                            this.getExploitConfig();
+                            this.fullScreen();
+                            this.$router.push({ path: this.redirect || "/home" }).catch(()=>{});
+                        }else{
+                            this.text = '该账号没有相关权限,请联系管理员.';
+                        }
+                    }else{
+                        if(res.code == 5007){
+                            this.userTypeCode = "4";
+                        }else if(res.code == 500){
+                            this.userTypeCode = "5";
+                        }
+                        this.text = res.message;
+                        this.loading = false;
+                        this.getCode();
+                    }
+                });
+            },
+            //全屏
+            fullScreen() {
+                var element = document.documentElement;
+                if (element.requestFullscreen) {
+                    element.requestFullscreen();
+                } else if (element.msRequestFullscreen) {
+                    element.msRequestFullscreen();
+                } else if (element.mozRequestFullScreen) {
+                    element.mozRequestFullScreen();
+                } else if (element.webkitRequestFullscreen) {
+                    element.webkitRequestFullscreen();
+                }
+            },
+            //退出全屏
+            exitFullscreen() {
+                if (document.exitFullscreen) {
+                    document.exitFullscreen();
+                } else if (document.msExitFullscreen) {
+                    document.msExitFullscreen();
+                } else if (document.mozCancelFullScreen) {
+                    document.mozCancelFullScreen();
+                } else if (document.webkitExitFullscreen) {
+                    document.webkitExitFullscreen();
+                }
+            },
+            /*******************手机登录*******************/
+            loginTypeClick(type){
+                if(type!=this.loginType){
+                    this.loginType = type;
+                }
+            },
+            getCodeOne() {
+                if(this.checkPhone(this.loginFormTwo.username)){
+                    if(this.codeButtonType){
+                        sendCode(this.loginFormTwo.username).then(response => {
+                            if(response.code != 200){
+                                this.textTwo = "*"+response.message;
+                                if(response.code == 530){
+                                    this.textTwo = "*"+response.message;
+                                }
+                            }else {
+                                this.textTwo = "";
+                                // this.msgSuccess('发送成功');
+                                this.codeButtonType = false;
+                                this.time();
+                            }
+                        });
+                    }
+                }
+            },
+            //定时器
+            time(){
+                let self = this;
+                let time = 30;
+                self.codeNum = parseInt(time);
+                this.timer = window.setInterval(refreshCount, 1000);
+                function refreshCount() {
+                    if(time<=0){
+                        self.codeNum = parseInt(time);
+                        self.codeButtonType = true;
+                        window.clearInterval(self.timer);
+                    }else{
+                        time--;
+                        self.codeNum = parseInt(time);
+                    }
+                }
+            },
+            //手机号验证
+            checkPhone(value) {
+                if (!value) {
+                    this.textTwo = '*手机号不能为空哦~';
+                    return false
+                } else {
+                    const reg = /^1[3|4|5|7|8|9][0-9]\d{8}$/;
+                    if (reg.test(value)) {
+                        this.textTwo = '';
+                        return true
+                    } else {
+                        this.textTwo = '*请输入正确的手机号码';
+                        return false
+                    }
+                }
+            },
+        },
+        beforeDestroy() {
+            //清除定时器
+            clearInterval(this.timer);
+        },
+        destroyed() {
+            //清除定时器
+            clearInterval(this.timer);
+        }
+    };
+</script>
+
+<style rel="stylesheet/scss" lang="scss">
+  .login-page{
+    height: 100%;
+    width:100%;
+    background-image: url("../assets/image/login/icon_dl_bbg.png");
+    background-repeat:no-repeat;
+    background-size: cover;
+    -webkit-background-size: cover;
+    -o-background-size: cover;
+    position: relative;
+    *{
+      margin:0;
+    }
+    .forgotPasswordBox{
+      margin-top:5px;
+      display: flex;
+      .forgotPasswordNull{
+        flex:1;
+      }
+      .forgotPassword{
+        text-align: center;
+        color:#ffffff;
+        font-size:14px;
+        cursor: pointer;
+      }
+      .forgotPassword:hover{
+        color:#00ffff;
+      }
+    }
+    .logo-img{
+      position: absolute;
+      top:29px;
+      left:52px;
+      width:250px;
+      height:55px;
+    }
+    .title-img-box{
+      position: absolute;
+      top:74px;
+      left:50%;
+      margin-left:-580px;
+      width:1180px;
+      height:230px;
+      div{
+        position: relative;
+        img{
+          width:1180px;
+          height:230px;
+        }
+        p{
+          position: absolute;
+          top:72px;
+          right:300px;
+          width:50px;
+          height:26px;
+          line-height:26px;
+          text-align: center;
+          background: #0045AF;
+          color:#fff;
+          font-size:14px;
+          border-radius:70px;
+        }
+      }
+    }
+    .form-box{
+      width:680px;
+      height:520px;
+      background-image: url("../assets/image/login/img_dlk_bg.png");
+      position: absolute;
+      top:290px;
+      left:50%;
+      margin-left:-340px;
+      .form-title-p{
+        line-height:52px;
+        font-size:24px;
+        text-align: center;
+        color:#fff;
+        font-weight:700;
+      }
+      .username-input-box-code:hover{
+        box-shadow: 0 0 4px 1px rgba(255,39,39,1)!important;
+      }
+      .username-input-box-code{
+        border: 1px solid #FF6A6A!important;
+      }
+      .username-input-box:hover{
+        box-shadow: 0 0 4px 1px rgba(0, 255, 252, 1);
+      }
+      .username-input-box{
+        width:480px;
+        height:60px;
+        border: 1px solid #00FFFC;
+        border-radius: 10px;
+        background: rgba(0, 13, 41, 0.2);
+        margin: 40px auto 32px;
+        display: flex;
+        overflow: hidden;
+        img{
+          height:20px;
+          width:20px;
+          margin:20px;
+        }
+        input:-webkit-autofill {
+          -webkit-box-shadow : 0 0 0 1000px rgba(1,25,67,1) inset !important;
+          -webkit-text-fill-color: #FFFFFF !important;
+        }
+        input{
+          flex:1;
+          border:none;
+          outline:none;
+          background-color: transparent !important;
+          color: #dedede;
+          font-size:16px;
+        }
+        ::placeholder{
+          color:#999999 ;
+          font-size:16px;
+        }
+      }
+      .password-input-box:hover{
+        box-shadow: 0 0 4px 1px rgba(0, 255, 252, 1);
+      }
+      .password-input-box{
+        width:480px;
+        height:60px;
+        border: 1px solid #00FFFC;
+        border-radius: 10px;
+        background: rgba(0, 13, 41, 0.2);
+        margin: 0 auto;
+        display: flex;
+        overflow: hidden;
+        img{
+          height:20px;
+          width:20px;
+          margin:20px;
+        }
+        input:-webkit-autofill {
+          -webkit-box-shadow : 0 0 0 1000px rgba(1,25,67,1) inset !important;
+          -webkit-text-fill-color: #FFFFFF !important;
+        }
+        input{
+          flex:1;
+          border:none;
+          outline:none;
+          background-color: transparent !important;
+          color: #dedede;
+          font-size:16px;
+        }
+        ::placeholder{
+          color:#999999 ;
+          font-size:16px;
+        }
+      }
+      .text-p{
+        width:480px;
+        height:59px;
+        line-height: 59px;
+        margin: 0 auto;
+        font-size: 14px;
+        font-family: Microsoft YaHei;
+        color: #DC1616;
+      }
+      .code-input-box{
+        width:480px;
+        height:60px;
+        display: flex;
+        margin: 0 auto;
+        .code-input-left-box:hover{
+          box-shadow: 0 0 4px 1px rgba(0, 255, 252, 1);
+        }
+        .code-input-left-box{
+          width:330px;
+          height:60px;
+          border: 1px solid #00FFFC;
+          border-radius: 10px;
+          background: rgba(0, 13, 41, 0.2);
+          display: flex;
+          overflow: hidden;
+          img{
+            height:20px;
+            width:20px;
+            margin:20px;
+          }
+          input:-webkit-autofill {
+            -webkit-box-shadow: 0 0 0 1000px white inset !important;
+          }
+          input{
+            flex:1;
+            border:none;
+            outline:none;
+            background-color: transparent !important;
+            color: #dedede;
+            font-size:16px;
+          }
+          ::placeholder{
+            color:#999999 ;
+            font-size:16px;
+          }
+        }
+        .login-code{
+          width:124px;
+          height:50px;
+          margin:6px 0 0 25px;
+          img {
+            width:124px;
+            height:50px;
+            cursor: pointer;
+            vertical-align: middle;
+          }
+        }
+      }
+      .form-button-p{
+        font-size:16px!important;
+        display: block!important;
+        width:480px!important;
+        height: 60px!important;
+        background: #0045AF!important;
+        color:#fff!important;
+        border:none!important;
+        border-radius: 10px!important;
+        margin:34px auto 0!important;
+      }
+    }
+    .introduction-p{
+      width:100%;
+      text-align: center;
+      color:#fff;
+      font-size:16px;
+      line-height:44px;
+      position: absolute;
+      left:0;
+      bottom:0;
+    }
+  }
+</style>