数据修改

src/views/login/index.vue

@@ -1,288 +1,337 @@
 <template>
-  <div id="app">
+  <div class="login-container">
-    <div id="loader-wrapper">
+    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="on" label-position="left">
-      <div id="loader"></div>
+
-      <div class="loader-section section-left"></div>
+      <div class="title-container">
-      <div class="loader-section section-right"></div>
+        <h3 class="title">智慧工地后台管理系统</h3>
-      <div class="load_title">正在加载系统资源，请耐心等待</div>
       </div>
+
+      <el-form-item prop="username">
+        <span class="svg-container">
+          <svg-icon icon-class="user" />
+        </span>
+        <el-input
+          ref="username"
+          v-model="loginForm.username"
+          placeholder="请输入用户名"
+          name="username"
+          type="text"
+          tabindex="1"
+          autocomplete="on"
+        />
+      </el-form-item>
+
+      <el-tooltip v-model="capsTooltip" content="Caps lock is On" placement="right" manual>
+        <el-form-item prop="password">
+          <span class="svg-container">
+            <svg-icon icon-class="password" />
+          </span>
+          <el-input
+            :key="passwordType"
+            ref="password"
+            v-model="loginForm.password"
+            :type="passwordType"
+            placeholder="请输入密码"
+            name="password"
+            tabindex="2"
+            autocomplete="on"
+            @keyup.native="checkCapslock"
+            @blur="capsTooltip = false"
+            @keyup.enter.native="handleLogin"
+          />
+          <span class="show-pwd" @click="showPwd">
+            <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
+          </span>
+        </el-form-item>
+      </el-tooltip>
+
+      <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">登陆</el-button>
+
+      <!--      <div style="position:relative">-->
+      <!--        <div class="tips">-->
+      <!--          <span>Username : admin</span>-->
+      <!--          <span>Password : any</span>-->
+      <!--        </div>-->
+      <!--        <div class="tips">-->
+      <!--          <span style="margin-right:18px;">Username : editor</span>-->
+      <!--          <span>Password : any</span>-->
+      <!--        </div>-->
+
+      <!-- <el-button class="thirdparty-button" type="primary" @click="showDialog=true">
+        Or connect with
+      </el-button> -->
+      <!--      </div>-->
+    </el-form>
+
+    <el-dialog title="Or connect with" :visible.sync="showDialog">
+      Can not be simulated on local, so please combine you own business simulation! ! !
+      <br>
+      <br>
+      <br>
+      <social-sign />
+    </el-dialog>
   </div>
 </template>
-<style>
-html,
-body,
-#app {
-  height: 100%;
-  margin: 0px;
-  padding: 0px;
-}
-.chromeframe {
-  margin: 0.2em 0;
-  background: #ccc;
-  color: #000;
-  padding: 0.2em 0;
-}
 
-#loader-wrapper {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 999999;
-}
-
-#loader {
-  display: block;
-  position: relative;
-  left: 50%;
-  top: 50%;
-  width: 150px;
-  height: 150px;
-  margin: -75px 0 0 -75px;
-  border-radius: 50%;
-  border: 3px solid transparent;
-  border-top-color: #FFF;
-  -webkit-animation: spin 2s linear infinite;
-  -ms-animation: spin 2s linear infinite;
-  -moz-animation: spin 2s linear infinite;
-  -o-animation: spin 2s linear infinite;
-  animation: spin 2s linear infinite;
-  z-index: 1001;
-}
-
-#loader:before {
-  content: "";
-  position: absolute;
-  top: 5px;
-  left: 5px;
-  right: 5px;
-  bottom: 5px;
-  border-radius: 50%;
-  border: 3px solid transparent;
-  border-top-color: #FFF;
-  -webkit-animation: spin 3s linear infinite;
-  -moz-animation: spin 3s linear infinite;
-  -o-animation: spin 3s linear infinite;
-  -ms-animation: spin 3s linear infinite;
-  animation: spin 3s linear infinite;
-}
-
-#loader:after {
-  content: "";
-  position: absolute;
-  top: 15px;
-  left: 15px;
-  right: 15px;
-  bottom: 15px;
-  border-radius: 50%;
-  border: 3px solid transparent;
-  border-top-color: #FFF;
-  -moz-animation: spin 1.5s linear infinite;
-  -o-animation: spin 1.5s linear infinite;
-  -ms-animation: spin 1.5s linear infinite;
-  -webkit-animation: spin 1.5s linear infinite;
-  animation: spin 1.5s linear infinite;
-}
-
-
-@-webkit-keyframes spin {
-  0% {
-    -webkit-transform: rotate(0deg);
-    -ms-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-  100% {
-    -webkit-transform: rotate(360deg);
-    -ms-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes spin {
-  0% {
-    -webkit-transform: rotate(0deg);
-    -ms-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-  100% {
-    -webkit-transform: rotate(360deg);
-    -ms-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-}
-
-
-#loader-wrapper .loader-section {
-  position: fixed;
-  top: 0;
-  width: 51%;
-  height: 100%;
-  background: #7171C6;
-  z-index: 1000;
-  -webkit-transform: translateX(0);
-  -ms-transform: translateX(0);
-  transform: translateX(0);
-}
-
-#loader-wrapper .loader-section.section-left {
-  left: 0;
-}
-
-#loader-wrapper .loader-section.section-right {
-  right: 0;
-}
-
-
-.loaded #loader-wrapper .loader-section.section-left {
-  -webkit-transform: translateX(-100%);
-  -ms-transform: translateX(-100%);
-  transform: translateX(-100%);
-  -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
-  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
-}
-
-.loaded #loader-wrapper .loader-section.section-right {
-  -webkit-transform: translateX(100%);
-  -ms-transform: translateX(100%);
-  transform: translateX(100%);
-  -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
-  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
-}
-
-.loaded #loader {
-  opacity: 0;
-  -webkit-transition: all 0.3s ease-out;
-  transition: all 0.3s ease-out;
-}
-
-.loaded #loader-wrapper {
-  visibility: hidden;
-  -webkit-transform: translateY(-100%);
-  -ms-transform: translateY(-100%);
-  transform: translateY(-100%);
-  -webkit-transition: all 0.3s 1s ease-out;
-  transition: all 0.3s 1s ease-out;
-}
-
-.no-js #loader-wrapper {
-  display: none;
-}
-
-.no-js h1 {
-  color: #222222;
-}
-
-#loader-wrapper .load_title {
-  font-family: 'Open Sans';
-  color: #FFF;
-  font-size: 19px;
-  width: 100%;
-  text-align: center;
-  z-index: 9999999999999;
-  position: absolute;
-  top: 60%;
-  opacity: 1;
-  line-height: 30px;
-}
-
-#loader-wrapper .load_title span {
-  font-weight: normal;
-  font-style: italic;
-  font-size: 13px;
-  color: #FFF;
-  opacity: 0.5;
-}
-</style>
 <script>
-//import { getToken } from '@/utils/auth'
+import { validUsername } from '@/utils/validate'
+import SocialSign from './components/SocialSignin'
+import {sm2} from 'sm-crypto';
 export default {
-  name: "YwglLogin",
+  name: 'Login',
+  components: { SocialSign },
   data() {
+    const validateUsername = (rule, value, callback) => {
+      if (!validUsername(value)) {
+        callback(new Error('请输入正确的用户名'))
+      } else {
+        callback()
+      }
+    }
+    const validatePassword = (rule, value, callback) => {
+      if (value.length < 6) {
+        callback(new Error('密码不能小于6位'))
+      } else {
+        callback()
+      }
+    }
     return {
-      loginRules: {},
       loginForm: {
-        username: "",
+        username: '',
-        password: "",
+        password: ''
-        rememberMe: false,
-        code: "",
-        uuid: "",
       },
+      loginRules: {
+        username: [{ required: true,message:"请输入用户名", trigger: 'blur', }],
+        password: [{ required: true,message:"请输入密码",  trigger: 'blur',}]
+      },
+      passwordType: 'password',
+      capsTooltip: false,
+      public_key:"04211520e8dc6d2051e67e6e770bd5550268c98105cd3b5b58e9c65958e78e627442343c9f237e01b3f316b1b63d7ddd70a8e6c0690a84c620b2903cb44cdfbe64",
+      private_key:"00f98c8d29d2177ca303106b26adfedf3f8c74cb12fc67c4b42ade0b5d1cb43b1c",
       loading: false,
-      // 验证码开关
+      showDialog: false,
-      captchaOnOff: true,
-      // 注册开关
-      register: false,
       redirect: undefined,
-    };
+      otherQuery: {}
+    }
   },
   watch: {
     $route: {
-      handler: function (route) {
+      handler: function(route) {
-        this.redirect = route.query && route.query.redirect;
+        const query = route.query
+        if (query) {
+          this.redirect = query.redirect
+          this.otherQuery = this.getOtherQuery(query)
+        }
       },
-      immediate: true,
+      immediate: true
-    },
+    }
-  },beforeRouteEnter (to, from, next) {
-    console.log('从 ' + from.path + ' 进入ywgllogin');
-    next(); // 必须调用next()来解决路由守卫的promise
   },
   created() {
-    //平台单独的登录  2024年4月16日11:23:58
+    // window.addEventListener('storage', this.afterQRScan)
-    this.getLoginByNameAndTokenJ();
+  },
+  mounted() {
+    if (this.loginForm.username === '') {
+      this.$refs.username.focus()
+    } else if (this.loginForm.password === '') {
+      this.$refs.password.focus()
+    }
+  },
+  destroyed() {
+    // window.removeEventListener('storage', this.afterQRScan)
   },
   methods: {
-    /**
+    checkCapslock(e) {
-     * 只传递token
+      const { key } = e
-     */
+      this.capsTooltip = key && key.length === 1 && (key >= 'A' && key <= 'Z')
-    getLoginByNameAndTokenJ() {
+    },
-      console.log(window.location.href);
+    showPwd() {
-      let url=window.location.href.split("?");
+      if (this.passwordType === 'password') {
-      let tokens='';
+        this.passwordType = ''
-      if(url.length>1){
+      } else {
-        let params=url[1].split("#");
+        this.passwordType = 'password'
-        if(params.length>0){
-          params=params[0].split("=");
-          if(params.length>1){
-            tokens=params[1]
       }
+      this.$nextTick(() => {
+        this.$refs.password.focus()
+      })
+    },
+    handleLogin() {
+      debugger
+      this.$refs.loginForm.validate(valid => {
+        if (valid) {
+          this.loading = true
+          console.log(123);
+          let jmU=sm2.doEncrypt(this.loginForm.username,this.public_key,0);
+          let jmP=sm2.doEncrypt(this.loginForm.password,this.public_key,0);
+          let copydata={
+            username: "04"+jmU,
+            password: "04"+jmP
           }
-      }
+          console.log(copydata);
-      if(!tokens){
+          this.$store.dispatch('user/login', copydata)
-        tokens = this.$route.query.token;
+            .then(() => {
-      }
+              this.otherQuery.formLogin=true;
-      console.log(tokens)
+              this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
-      //调用登录的接口
-      if (tokens) {
-        //转圈圈，不要看到登陆页面，无感体验
-        this.loading = true;
-        let loginForm = {
-          token: tokens,
-          loginType: 333
-        };
-        console.log(loginForm);
-        console.log("开始登录..")
-        //执行另一套登录操作
-        this.$store.dispatch('user/sgccLogin', loginForm).then(() => {
-          console.log("登录成功了..")
-          this.$router.replace({path: "/#/home" || "/"}).catch(() => {
-          });
               this.loading = false
             })
             .catch(() => {
+
               this.loading = false
             })
-
-
-        //   this.$message.error("用户token为空");
         } else {
-        window.location.href = 'http://sgwpdm.ah.sgcc.com.cn/';
+          console.log('error submit!!')
-        // console.log("tick为空..")
+          return false
         }
+      })
     },
-  },
+    getOtherQuery(query) {
-};
+      return Object.keys(query).reduce((acc, cur) => {
+        if (cur !== 'redirect') {
+          acc[cur] = query[cur]
+        }
+        return acc
+      }, {})
+    }
+    // afterQRScan() {
+    //   if (e.key === 'x-admin-oauth-code') {
+    //     const code = getQueryObject(e.newValue)
+    //     const codeMap = {
+    //       wechat: 'code',
+    //       tencent: 'code'
+    //     }
+    //     const type = codeMap[this.auth_type]
+    //     const codeName = code[type]
+    //     if (codeName) {
+    //       this.$store.dispatch('LoginByThirdparty', codeName).then(() => {
+    //         this.$router.push({ path: this.redirect || '/' })
+    //       })
+    //     } else {
+    //       alert('第三方登录失败')
+    //     }
+    //   }
+    // }
+  }
+}
 </script>
 
-<style rel="stylesheet/scss" lang="scss">
+<style lang="scss">
+/* 修复input 背景不协调 和光标变色 */
+/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
+
+$bg:#283443;
+$light_gray:#fff;
+$cursor: #fff;
+
+@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
+  .login-container .el-input input {
+    color: $cursor;
+  }
+}
+
+/* reset element-ui css */
+.login-container {
+  .el-input {
+    display: inline-block;
+    height: 47px;
+    width: 85%;
+
+    input {
+      background: transparent;
+      border: 0px;
+      -webkit-appearance: none;
+      border-radius: 0px;
+      padding: 12px 5px 12px 15px;
+      color: $light_gray;
+      height: 47px;
+      caret-color: $cursor;
+
+      &:-webkit-autofill {
+        box-shadow: 0 0 0px 1000px $bg inset !important;
+        -webkit-text-fill-color: $cursor !important;
+      }
+    }
+  }
+
+  .el-form-item {
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    background: rgba(0, 0, 0, 0.1);
+    border-radius: 5px;
+    color: #454545;
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+$bg:#2d3a4b;
+$dark_gray:#889aa4;
+$light_gray:#eee;
+
+.login-container {
+  min-height: 100%;
+  width: 100%;
+  background-color: $bg;
+  overflow: hidden;
+
+  .login-form {
+    position: relative;
+    width: 520px;
+    max-width: 100%;
+    padding: 160px 35px 0;
+    margin: 0 auto;
+    overflow: hidden;
+  }
+
+  .tips {
+    font-size: 14px;
+    color: #fff;
+    margin-bottom: 10px;
+
+    span {
+      &:first-of-type {
+        margin-right: 16px;
+      }
+    }
+  }
+
+  .svg-container {
+    padding: 6px 5px 6px 15px;
+    color: $dark_gray;
+    vertical-align: middle;
+    width: 30px;
+    display: inline-block;
+  }
+
+  .title-container {
+    position: relative;
+
+    .title {
+      font-size: 26px;
+      color: $light_gray;
+      margin: 0px auto 40px auto;
+      text-align: center;
+      font-weight: bold;
+    }
+  }
+
+  .show-pwd {
+    position: absolute;
+    right: 10px;
+    top: 7px;
+    font-size: 16px;
+    color: $dark_gray;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .thirdparty-button {
+    position: absolute;
+    right: 0;
+    bottom: 6px;
+  }
+
+  @media only screen and (max-width: 470px) {
+    .thirdparty-button {
+      display: none;
+    }
+  }
+}
 </style>

src/views/login/ywgllogin.vue

@@ -236,6 +236,7 @@ export default {
      * 只传递token
      */
     getLoginByNameAndTokenJ() {
+      debugger
       console.log(window.location.href);
       let url=window.location.href.split("?");
       let tokens='';
@@ -271,8 +272,6 @@ export default {
           .catch(() => {
             this.loading = false
           })
-
-
      //   this.$message.error("用户token为空");
       } else {
         window.location.href = 'http://sgwpdm.ah.sgcc.com.cn/';

vue.config.js

@@ -24,7 +24,7 @@ module.exports = {
    * In most cases please use '/' !!!
    * Detail: https://cli.vuejs.org/config/#publicpath
    */
-  publicPath: process.env.ENV === 'production' ? '/zhgd-ht/' : '/zhgd-ht/',
+  publicPath: process.env.ENV === 'production' ? '/gdwebs/zhgd-ht/' : '/gdwebs/zhgd-ht/',
   outputDir: 'dist',
   assetsDir: 'static',
   lintOnSave: false,
@@ -37,7 +37,7 @@ module.exports = {
       [process.env.VUE_APP_BASE_API]: {
       //  target: `http://36.33.26.201:19090/zhgd`,
        // target: `http://27.50.49.56:8000/zhgd`,
-        target: `http://192.168.0.38:13030/zhgd`,
+        target: `http://192.168.0.7:19090/zhgd`,
      //   target: `http://11.158.16.194:21624/zhgd`,
         changeOrigin: true,
         pathRewrite: {