登录接口

package-lock.json

@@ -11,6 +11,7 @@
         "axios": "^1.4.0",
         "core-js": "^3.8.3",
         "element-ui": "^2.15.13",
+        "sm-crypto": "^0.3.12",
         "vue": "^2.6.14",
         "vue-router": "^3.5.1",
         "vuex": "^3.6.2"
@@ -5992,6 +5993,11 @@
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
       "dev": true
     },
+    "node_modules/jsbn": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/jsbn/-/jsbn-1.1.0.tgz",
+      "integrity": "sha512-4bYVV3aAMtDTTu4+xsDYa6sy9GyJ69/amsu9sYF2zqjiEoZA5xJi3BrfX3uY+/IekIu7MwdObdbDWpoZdBv3/A=="
+    },
     "node_modules/jsesc": {
       "version": "2.5.2",
       "resolved": "https://registry.npmmirror.com/jsesc/-/jsesc-2.5.2.tgz",
@@ -8564,6 +8570,14 @@
         "node": ">=8"
       }
     },
+    "node_modules/sm-crypto": {
+      "version": "0.3.12",
+      "resolved": "https://registry.npmmirror.com/sm-crypto/-/sm-crypto-0.3.12.tgz",
+      "integrity": "sha512-272PBzB4PYaBdeGa41TH9ZlMGLPVRmS36Gs4FjmHwXIdihQypAbhhFWZTaa/3de69q2KfMme1M5O2W5+spAdrg==",
+      "dependencies": {
+        "jsbn": "^1.1.0"
+      }
+    },
     "node_modules/sockjs": {
       "version": "0.3.24",
       "resolved": "https://registry.npmmirror.com/sockjs/-/sockjs-0.3.24.tgz",
@@ -14588,6 +14602,11 @@
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
       "dev": true
     },
+    "jsbn": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/jsbn/-/jsbn-1.1.0.tgz",
+      "integrity": "sha512-4bYVV3aAMtDTTu4+xsDYa6sy9GyJ69/amsu9sYF2zqjiEoZA5xJi3BrfX3uY+/IekIu7MwdObdbDWpoZdBv3/A=="
+    },
     "jsesc": {
       "version": "2.5.2",
       "resolved": "https://registry.npmmirror.com/jsesc/-/jsesc-2.5.2.tgz",
@@ -16567,6 +16586,14 @@
       "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
       "dev": true
     },
+    "sm-crypto": {
+      "version": "0.3.12",
+      "resolved": "https://registry.npmmirror.com/sm-crypto/-/sm-crypto-0.3.12.tgz",
+      "integrity": "sha512-272PBzB4PYaBdeGa41TH9ZlMGLPVRmS36Gs4FjmHwXIdihQypAbhhFWZTaa/3de69q2KfMme1M5O2W5+spAdrg==",
+      "requires": {
+        "jsbn": "^1.1.0"
+      }
+    },
     "sockjs": {
       "version": "0.3.24",
       "resolved": "https://registry.npmmirror.com/sockjs/-/sockjs-0.3.24.tgz",

package.json

@@ -10,6 +10,7 @@
     "axios": "^1.4.0",
     "core-js": "^3.8.3",
     "element-ui": "^2.15.13",
+    "sm-crypto": "^0.3.12",
     "vue": "^2.6.14",
     "vue-router": "^3.5.1",
     "vuex": "^3.6.2"

src/api/login/login.js

@@ -1,15 +1,16 @@
 import request from "../../utils/request"
 export function loginOut(data) {
-    request({
+    return request({
         url: '/api/logout',
         method: "post",
         data
     })
 }
 export function login(data) {
-    request({
-        url: "",
+    return request({
+        url: "/api/login",
         method: "post",
+        headers: { 'content-type ': 'application/x-www-form-urlencoded' },
         data
-    })
-}
+    });
+}

src/main.js

@@ -3,7 +3,7 @@ import App from './App.vue'
 import router from './router'
 import store from './store'
 
-
+// import SmCrypto from '@/utils/SmCrypto.min.js'
 import '@/styles/index.scss' // global css
 
 //引入字体
@@ -15,7 +15,7 @@ import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
 //向Vue注册安装elementui
 Vue.use(ElementUI)
-
+// Vue.use(SmCrypto)
 Vue.config.productionTip = false
 
 new Vue({

src/styles/index.scss

@@ -16,7 +16,6 @@ body {
     // font-size: 10px;
     box-sizing: border-box;
   }
-  
   #app {
     height: 100%;
     // overflow-y: hidden;

src/utils/request.js

@@ -3,7 +3,8 @@ import { Message } from 'element-ui'
 
 // 请求url
 const service = axios.create({
-  baseURL: window.STATIC_CONFIG.proxyUrl, // url = base url + request url
+  // baseURL: window.STATIC_CONFIG.proxyUrl, // url = base url + request url
+  baseURL:"http://8.142.173.95:10086/",
   timeout: 15000 // request timeout
 })
 

src/views/dashboard/index.vue

@@ -1,6 +1,42 @@
 <template>
     <div>
         home
+        <!-- <button @click="detailsModal = true">测试打开模态框</button> -->
+        <!-- 详细信息 -->
+        <div>
+            <el-dialog :visible.sync="detailsModal" width="98%" top="1vh" :height="ceshi">
+                <div class="detailsTittle">
+                    <span>xxx-详细信息</span>
+                </div>
+                <div class="inDetailsBox">
+                    <div class="inBoxLeft">
+                        <el-input style="width: 300px;margin-top: 10px;" v-model="searchFast" placeholder="快速查找"></el-input>
+                        <div class="leftMes">
+                            <span>名称</span>
+                            <span>属于哪个终端</span>
+                        </div>
+                        <div class="leftMes">
+                            <span class="leftMesSpan">名称</span>
+                            <span>属于哪个终端</span>
+                        </div>
+                    </div>
+                    <div class="inBoxRight">
+                        <!-- 导航栏 -->
+                        <div class="navigationBox">
+                            <template v-for="(item, index) in modalList">
+                                <p :class="['tabCard', { active: selectedIndex === index }]" @click="goUrl(item, index)">
+                                    {{ item.name }}
+                                </p>
+                            </template>
+                        </div>
+                    </div>
+                </div>
+                <!-- <span slot="footer" class="dialog-footer">
+                    <el-button @click="detailsModal = false">取 消</el-button>
+                    <el-button type="primary" @click="detailsModal = false">确 定</el-button>
+                </span> -->
+            </el-dialog>
+        </div>
     </div>
 </template>
 
@@ -10,20 +46,121 @@ export default {
 
     data() {
         return {
-            
+            detailsModal: false,
+            searchFast: "",//详情模态框内快速搜索
+            modalList: [
+                {
+                    name: "装置关联关系",
+                    url: "1"
+                },
+                {
+                    name: "输入输出控制块",
+                    url: "2"
+                },
+                {
+                    name: "虚端子关系",
+                    url: "3"
+                },
+                {
+                    name: "基础信息",
+                    url: "4",
+                },
+                {
+                    name: "定值条目",
+                    url: "5"
+                },
+                {
+                    name: "信息点表",
+                    url: "6"
+                },
+                {
+                    name: "源文件",
+                    url: '7'
+                }
+            ],
+            selectedIndex: 0,//选中的背景
+            ceshi:"500px"
         };
     },
 
     mounted() {
-        
+
     },
 
     methods: {
-        
+        goUrl(item, index) {
+            this.selectedIndex = index;
+            // 执行你的跳转逻辑
+        }
     },
 };
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
+/* 模态框内左侧盒子 */
+.inBoxLeft {
+    width: 320px;
+    height: 530px;
+    background-color: #F3F5FA;
+    text-align: center;
+    overflow-y: auto;
+}
+
+.inDetailsBox {
+    margin-top: 10px;
+    display: flex;
+    justify-content: space-around;
+}
+
+/* 模态框内表头 */
+.detailsTittle {
+    width: 1400px;
+    height: 50px;
+    border-bottom: 1px solid blue;
+    margin: 0 auto;
+    text-align: center;
+}
+
+/* 名称和信息 */
+.leftMes {
+    margin: 5px 0;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+
+.leftMes span {
+    display: block;
+}
+
+/* 内导航栏 */
+.tabCard {
+    width: 100px;
+    height: 25px;
+    margin: 20px 0;
+    cursor: pointer;
+}
+.tabCard:hover {
+    color: skyblue;
+}
+.active {
+    width: 100px;
+    height: 25px;
+    background-color: blue;
+    color: white;
+    border-radius: 20px;
+}
 
+/* 内导航栏盒子 */
+.navigationBox {
+    width: 850px;
+    height: 30px;
+    border: 1px solid blue;
+    text-align: center;
+    line-height: 30px;
+    border-radius: 20px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
 </style>

src/views/login/Login.vue

@@ -13,7 +13,8 @@
                     </el-form-item>
                     <el-form-item class="loginItem">
                         <p class="loginItemP">密码</p>
-                        <input class="loginInput" v-model="form.password" @blur="passRule" placeholder="请输入密码" :type="inputType">
+                        <input class="loginInput" v-model="form.password" @blur="passRule" placeholder="请输入密码"
+                            :type="inputType">
                         <img class="imgEyes" src="../../assets/font/fluent：eye-20-regular.png" alt="" @click="changeType">
                         <p class="blurP" v-if="passBlur">密码不能为空</p>
                     </el-form-item>
@@ -28,6 +29,9 @@
 </template>
 
 <script>
+import { login } from '../../api/login/login.js'
+import sm from 'sm-crypto';
+import sms from '../../utils/SmCrypto.min.js'
 export default {
     data() {
         return {
@@ -38,7 +42,7 @@ export default {
             rememberUser: false,//是否记住账号
             userBlur: false,//用户名验证
             passBlur: false,//密码验证
-            inputType:"password",//密码输入框性质
+            inputType: "password",//密码输入框性质
         }
     },
     methods: {
@@ -59,11 +63,13 @@ export default {
             }
         },
         // 登录按钮
-        loginNow() {
+        async loginNow() {
             // console.log(this.form.username, this.form.password, 'login');
             if (this.form.username != '' && this.form.password != "") {
                 if (!this.userBlur && !this.passBlur) {
-                    this.$router.push("/")
+                    let res = await login({ login_account: this.form.username, pwd: this.form.password })
+                    // this.$router.push("/")
+                    console.log(res, '1');
                 } else {
                     this.$message({
                         message: '账号或密码错误',
@@ -95,12 +101,17 @@ export default {
             }
         },
         // ，密码框小眼睛
-        changeType(){
-            if(this.inputType === 'password'){
+        changeType() {
+            if (this.inputType === 'password') {
                 this.inputType = 'text'
-            }else{
+            } else {
                 this.inputType = 'password'
             }
+        },
+        encryptPassword(password) {
+            return sm.sm3(password);
+        },
+        getPassWord(str){
         }
     },
     created() {
@@ -111,14 +122,19 @@ export default {
 </script>
 
 <style scoped>
+p {
+    margin: 0;
+    padding: 0;
+}
+
 /* 整个大盒子css */
 .pageBox {
     width: 100vw;
     height: 100vh;
-    background-image: url("../../assets/loginBackground.png");
+    background-image: url("../../assets/loginNewBack.png");
     background-repeat: no-repeat;
-    background-size: 88%;
-    background-color: #14093E;
+    background-size: 100% 100%;
+    /* background-color: #14093E; */
     position: relative;
     overflow: hidden;
 }
@@ -128,7 +144,7 @@ export default {
     width: 640px;
     height: 650px;
     position: absolute;
-    top: 200px;
+    top: 140px;
     right: 0px;
 }
 
@@ -144,15 +160,17 @@ export default {
     opacity: 1;
     border: 1px solid #dbdbdb;
     background-color: transparent;
-    color: white;
+    /* color: white; */
     position: relative;
 }
+
 /* 密码框小眼睛css */
-.imgEyes{
+.imgEyes {
     position: absolute;
     top: 50px;
     right: 0px;
 }
+
 /* 表单内标题p标签css */
 .loginTitleP {
     width: 210px;
@@ -160,7 +178,7 @@ export default {
     font-size: 30px;
     font-family: PingFang SC-Medium, PingFang SC;
     font-weight: 500;
-    color: #FFFFFF;
+    /* color: #FFFFFF; */
     line-height: 35px;
     margin-left: 100px;
     margin-bottom: 52px;
@@ -173,7 +191,7 @@ export default {
     font-size: 20px;
     font-family: PingFang SC-Medium, PingFang SC;
     font-weight: 500;
-    color: #FFFFFF;
+    /* color: #FFFFFF; */
     line-height: 23px;
     margin-bottom: 12px;
 }
@@ -182,7 +200,7 @@ export default {
 .loginButton {
     width: 434px;
     height: 44px;
-    background: #6D58AA;
+    background: blue;
     border-radius: 5px 5px 5px 5px;
     opacity: 1;
     border: none;

yarn.lock

@@ -3515,6 +3515,11 @@ js-tokens@^4.0.0:
   resolved "https://registry.npmmirror.com/js-tokens/-/js-tokens-4.0.0.tgz"
   integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
 
+jsbn@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmmirror.com/jsbn/-/jsbn-1.1.0.tgz"
+  integrity sha512-4bYVV3aAMtDTTu4+xsDYa6sy9GyJ69/amsu9sYF2zqjiEoZA5xJi3BrfX3uY+/IekIu7MwdObdbDWpoZdBv3/A==
+
 jsesc@^2.5.1:
   version "2.5.2"
   resolved "https://registry.npmmirror.com/jsesc/-/jsesc-2.5.2.tgz"
@@ -4972,6 +4977,13 @@ slash@^3.0.0:
   resolved "https://registry.npmmirror.com/slash/-/slash-3.0.0.tgz"
   integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
 
+sm-crypto@^0.3.12:
+  version "0.3.12"
+  resolved "https://registry.npmmirror.com/sm-crypto/-/sm-crypto-0.3.12.tgz#c23ec52b5f8a23b2fc4e7467f5738a90cee7b0d2"
+  integrity sha512-272PBzB4PYaBdeGa41TH9ZlMGLPVRmS36Gs4FjmHwXIdihQypAbhhFWZTaa/3de69q2KfMme1M5O2W5+spAdrg==
+  dependencies:
+    jsbn "^1.1.0"
+
 sockjs@^0.3.24:
   version "0.3.24"
   resolved "https://registry.npmmirror.com/sockjs/-/sockjs-0.3.24.tgz"