Merge remote-tracking branch 'origin/master'

fuliqi

2024-04-02 84cab370f2421d6823021e93ecb0e1e47dce4410

Merge remote-tracking branch 'origin/master'

 src/assets/icons/logo.png

 src/assets/svg/login-bg.svg

New file
@@ -0,0 +1,17 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="6395" height="1079" viewBox="0 0 6395 1079">
  <defs>
    <clipPath id="clip-path">
      <rect  width="6395" height="1079" transform="translate(-5391)" fill="#fff"/>
    </clipPath>
    <linearGradient id="linear-gradient" x1="0.747" y1="0.222" x2="0.973" y2="0.807" gradientUnits="objectBoundingBox">
      <stop offset="0" stop-color="#2c41b4"/>
      <stop offset="1" stop-color="#1b4fab"/>
    </linearGradient>
  </defs>
  <g id="Mask_Group_1" data-name="Mask Group 1" transform="translate(5391)" clip-path="url(#clip-path)">
    <g id="Group_118" data-name="Group 118" transform="translate(-419.333 -1.126)">
      <path id="Path_142" data-name="Path 142" d="M6271.734-6.176s-222.478,187.809-55.349,583.254c44.957,106.375,81.514,205.964,84.521,277,8.164,192.764-156.046,268.564-156.046,268.564l-653.53-26.8L5475.065-21.625Z" transform="translate(-4876.383 0)" fill="#f1f5f8"/>
      <path id="Union_6" data-name="Union 6" d="M-2631.1,1081.8v-1.6H-8230.9V.022H-2631.1V0H-1871.4s-187.845,197.448-91.626,488.844c49.167,148.9,96.309,256.289,104.683,362.118,7.979,100.852-57.98,201.711-168.644,254.286-65.858,31.29-144.552,42.382-223.028,42.383C-2441.2,1147.632-2631.1,1081.8-2631.1,1081.8Z" transform="translate(3259.524 0.803)" fill="url(#linear-gradient)"/>
    </g>
  </g>
</svg>

 src/assets/svg/login-box-bg.svg

New file
@@ -0,0 +1 @@
<svg id="a622e68e-7a65-46e9-94a9-d455de519afc" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="971.44" height="502" viewBox="0 0 971.44 502"><defs><linearGradient id="341b0e5e-a21f-44db-b85f-76180f33f0d3" x1="599.5" y1="668.05" x2="599.5" y2="199" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="gray" stop-opacity="0.25"/><stop offset="0.54" stop-color="gray" stop-opacity="0.12"/><stop offset="1" stop-color="gray" stop-opacity="0.1"/></linearGradient><linearGradient id="9c19d1ba-0c1d-4cca-8c15-e6f3831a5e67" x1="485.72" y1="258.88" x2="485.72" y2="71.12" xlink:href="#341b0e5e-a21f-44db-b85f-76180f33f0d3"/><linearGradient id="fe76f7c7-2126-4e48-920d-21143a22d340" x1="132" y1="515" x2="303" y2="515" xlink:href="#341b0e5e-a21f-44db-b85f-76180f33f0d3"/><linearGradient id="2cf89a04-5a05-413b-983a-d2bc296cbb5e" x1="933" y1="568.28" x2="1031" y2="568.28" xlink:href="#341b0e5e-a21f-44db-b85f-76180f33f0d3"/></defs><title>responsive</title><g opacity="0.7"><path d="M852.69,199H346.31A16.37,16.37,0,0,0,330,215.42V563.94a16.37,16.37,0,0,0,16.31,16.42H520.47v60.16h-7.94a8.3,8.3,0,0,0-8.27,8.33v12.07h16.21v7.14H678.53v-7.14h16.21V648.85a8.3,8.3,0,0,0-8.27-8.33H679V640h-.51V580.36H852.69A16.37,16.37,0,0,0,869,563.94V215.42A16.37,16.37,0,0,0,852.69,199Z" transform="translate(-114.28 -199)" fill="url(#341b0e5e-a21f-44db-b85f-76180f33f0d3)"/></g><rect x="407.72" y="371" width="156" height="92" fill="#bdbdbd"/><g opacity="0.1"><path d="M525.07,579H675.24c1.81-7.87,3.26-13,3.26-13h-157S523.11,571.11,525.07,579Z" transform="translate(-114.28 -199)"/></g><path d="M235.82,3h499.8a16.1,16.1,0,0,1,16.1,16.1V327a0,0,0,0,1,0,0h-532a0,0,0,0,1,0,0V19.1A16.1,16.1,0,0,1,235.82,3Z" fill="#535461"/><path d="M849.9,576H350.1A16.1,16.1,0,0,1,334,559.9V526H866v33.9A16.1,16.1,0,0,1,849.9,576Z" transform="translate(-114.28 -199)" fill="#bdbdbd"/><circle cx="485.72" cy="352" r="9" fill="#535461"/><path d="M399.89,436H571.55a8.17,8.17,0,0,1,8.17,8.17V456a0,0,0,0,1,0,0h-188a0,0,0,0,1,0,0V444.17A8.17,8.17,0,0,1,399.89,436Z" fill="#bdbdbd"/><g opacity="0.5"><rect x="320.72" y="71.12" width="330" height="187.76" rx="4.5" ry="4.5" fill="url(#9c19d1ba-0c1d-4cca-8c15-e6f3831a5e67)"/></g><rect x="324.95" y="72.5" width="321.54" height="183.96" rx="4.5" ry="4.5" fill="#fff"/><g opacity="0.5"><rect x="414.52" y="98.91" width="35.44" height="31.9" rx="4.5" ry="4.5" fill="#0960bd"/></g><rect x="460.59" y="98.91" width="95.69" height="3.54" rx="1.77" ry="1.77" fill="#e0e0e0"/><rect x="460.59" y="109.55" width="79.54" height="3.54" rx="1.77" ry="1.77" fill="#e0e0e0"/><g opacity="0.5"><rect x="414.52" y="148.53" width="35.44" height="31.9" rx="4.5" ry="4.5" fill="#0960bd"/></g><rect x="460.59" y="148.53" width="95.69" height="3.54" rx="1.77" ry="1.77" fill="#e0e0e0"/><rect x="460.59" y="159.16" width="95.69" height="3.54" rx="1.77" ry="1.77" fill="#e0e0e0"/><g opacity="0.5"><rect x="414.52" y="198.15" width="35.44" height="31.9" rx="4.5" ry="4.5" fill="#0960bd"/></g><rect x="460.59" y="198.15" width="95.69" height="3.54" rx="1.77" ry="1.77" fill="#e0e0e0"/><rect x="460.59" y="208.78" width="96.33" height="3.54" rx="1.59" ry="1.59" fill="#e0e0e0"/><line x1="485.72" y1="42" x2="485.72" y2="20" stroke="#0960bd" stroke-miterlimit="10" stroke-width="2"/><line x1="485.72" y1="79" x2="485.72" y2="50.13" stroke="#0960bd" stroke-miterlimit="10" stroke-width="2"/><circle cx="485.72" cy="79" r="4" fill="#0960bd"/><circle cx="485.72" cy="46" r="4" fill="none" stroke="#fff" stroke-miterlimit="10"/><line x1="485.72" y1="42" x2="485.72" y2="20" stroke="#0960bd" stroke-miterlimit="10" stroke-width="2"/><line x1="485.72" y1="79" x2="485.72" y2="50.13" stroke="#0960bd" stroke-miterlimit="10" stroke-width="2"/><circle cx="485.72" cy="79" r="4" fill="#0960bd"/><circle cx="485.72" cy="46" r="4" fill="none" stroke="#fff" stroke-miterlimit="10"/><line x1="485.72" y1="279" x2="485.72" y2="310" stroke="#0960bd" stroke-miterlimit="10" stroke-width="2"/><line x1="485.72" y1="251" x2="485.72" y2="279.87" stroke="#0960bd" stroke-miterlimit="10" stroke-width="2"/><circle cx="485.72" cy="251" r="4" fill="#0960bd"/><line x1="305.72" y1="168.5" x2="274.22" y2="168.5" stroke="#0960bd" stroke-miterlimit="10" stroke-width="2"/><line x1="333.22" y1="168.5" x2="304.35" y2="168.5" stroke="#0960bd" stroke-miterlimit="10" stroke-width="2"/><circle cx="333.22" cy="168.5" r="4" fill="#0960bd"/><g opacity="0.1"><rect x="408.22" y="435.5" width="156" height="3"/></g><g opacity="0.7"><path d="M293.48,566.06H221.08l1-8.14c20.46-18.37,33.69-67.31,33.69-67.31a6.78,6.78,0,0,0-.87.18c-12,2.42-20.54,7.35-26.51,13.28l2.54-21.66c37.8-8.14,52.79-58.14,52.79-58.14-24.12,5.35-39.16,13.63-48.5,21.49l3.72-31.82c25.56,8.77,52-37.82,52-37.82l-1-.21.5-.32-.76.27c-28.25-6.09-43.35,10.06-48.25,16.77l.37-3.12q-1.12,3-2.18,5.88h0l0,.08q-3,8.13-5.49,16.06l0,0h0q-2.17,6.77-4.06,13.4l0-.06s-1.17-28.46-31.18-35.95c0,0,3.15,62.07,26.93,51.91h0c-2.2,9-4,17.66-5.56,26.07h0q-1.49,8.21-2.6,16l-.14.16.14-.12-.06.41v0h0q-1,7.07-1.7,13.78c.46-8.62-1.11-33.52-30.45-56.92,0,0-39,68.54,27.5,82,.15.13.3.26.44.38l-.1-.31.6.13.27-3.52a369.39,369.39,0,0,0,.23,44.1h0c.07,1,.14,2,.21,2.95H141.37c-27.94,57.79,15.52,89.46,15.52,89.46h120C323.49,596.66,293.48,566.06,293.48,566.06Zm-78-65.68h0v0Z" transform="translate(-114.28 -199)" fill="url(#fe76f7c7-2126-4e48-920d-21143a22d340)"/></g><path d="M217,588s-19-83,23-190" transform="translate(-114.28 -199)" fill="none" stroke="#535461" stroke-miterlimit="10" stroke-width="3" opacity="0.6"/><path d="M143,563H290s29,37-16,92H158S116,617,143,563Z" transform="translate(-114.28 -199)" fill="#0960bd"/><path d="M237.89,403.5s14.61-26,49.61-18c0,0-28.93,49.26-55,33.13Z" transform="translate(-114.28 -199)" fill="#4db6ac"/><path d="M228.63,431.09S227.5,404.5,198.5,397.5c0,0,3,58,26,48.5Z" transform="translate(-114.28 -199)" fill="#4db6ac"/><path d="M219.15,470.36s5.35-27.86,61.35-39.86c0,0-17.86,57.62-63.93,55.31Z" transform="translate(-114.28 -199)" fill="#4db6ac"/><path d="M214.61,501.63s5.89-29.13-29.11-56.13c0,0-38,64.67,27.48,76.83Z" transform="translate(-114.28 -199)" fill="#4db6ac"/><path d="M213.56,541.67S209.5,500.5,253.5,492.5c0,0-16.07,57.49-40,67.74Z" transform="translate(-114.28 -199)" fill="#4db6ac"/><path d="M233,419s38-29,54-34" transform="translate(-114.28 -199)" fill="none" stroke="#535461" stroke-miterlimit="10" opacity="0.3"/><path d="M216.5,485.5s46-49,64-55" transform="translate(-114.28 -199)" fill="none" stroke="#535461" stroke-miterlimit="10" opacity="0.3"/><path d="M198.5,397.5s28,38,26,48" transform="translate(-114.28 -199)" fill="none" stroke="#535461" stroke-miterlimit="10" opacity="0.3"/><path d="M185.5,445.5s15,68,27,77" transform="translate(-114.28 -199)" fill="none" stroke="#535461" stroke-miterlimit="10" opacity="0.3"/><path d="M213.5,560.5s24-66,40-68" transform="translate(-114.28 -199)" fill="none" stroke="#535461" stroke-miterlimit="10" opacity="0.3"/><g opacity="0.1"><path d="M290,563H143c-.33.67-.65,1.34-1,2H285s28.29,36.11-14.4,90H274C319,600,290,563,290,563Z" transform="translate(-114.28 -199)"/></g><rect y="455.6" width="971.44" height="32.93" fill="#e0e0e0"/><rect x="41.16" y="488.53" width="889.11" height="13.47" fill="#e0e0e0"/><rect x="41.16" y="488.53" width="889.11" height="4.49" opacity="0.1"/><line x1="690.22" y1="168.5" x2="696.22" y2="168.5" stroke="#0960bd" stroke-miterlimit="10" stroke-width="2"/><line x1="637.22" y1="168.5" x2="682.1" y2="168.5" stroke="#0960bd" stroke-miterlimit="10" stroke-width="2"/><circle cx="637.22" cy="168.5" r="4" fill="#0960bd"/><circle cx="686.22" cy="168.5" r="4" fill="none" stroke="#fff" stroke-miterlimit="10"/><g opacity="0.7"><path d="M1027,643.88l.1-.15q.31-.48.61-1l.11-.19q.29-.49.55-1l.09-.17c.2-.39.39-.78.56-1.19h0a23.79,23.79,0,0,0,.94-2.51l.1-.33c.09-.31.18-.62.26-.93l.1-.44q.1-.42.18-.85c0-.16.06-.32.09-.48s.09-.56.13-.85,0-.33.06-.49.06-.61.08-.92c0-.14,0-.29,0-.43,0-.45,0-.91,0-1.36V548h-13.85V507.52h-17V548H988.39V489.86h-17V548H965V481.55h-17V548H933V630.6c0,13.48,11.21,24.4,25,24.4H1006a25.19,25.19,0,0,0,20.24-10.06l0,0Q1026.61,644.41,1027,643.88Z" transform="translate(-114.28 -199)" fill="url(#2cf89a04-5a05-413b-983a-d2bc296cbb5e)"/></g><rect x="835.72" y="321" width="16" height="100" fill="#535461"/><rect x="835.72" y="288" width="16" height="33" fill="#3ad29f"/><rect x="857.72" y="329" width="16" height="100" fill="#535461"/><rect x="857.72" y="296" width="16" height="33" fill="#4d8af0"/><rect x="884.72" y="346" width="16" height="100" fill="#535461"/><rect x="884.72" y="313" width="16" height="33" fill="#f55f44"/><path d="M821.72,352h92a0,0,0,0,1,0,0v79.5a23.5,23.5,0,0,1-23.5,23.5h-45a23.5,23.5,0,0,1-23.5-23.5V352A0,0,0,0,1,821.72,352Z" fill="#0960bd"/><g opacity="0.1"><path d="M936,551v4h88v79.5a23.39,23.39,0,0,1-5,14.49,23.45,23.45,0,0,0,9-18.49V551Z" transform="translate(-114.28 -199)"/></g></svg>

 src/views/login copy.vue

New file
@@ -0,0 +1,310 @@
<template>
  <div class="login">
    <div class="title-container">
      <h3 class="title">运维考核平台</h3>
    </div>
    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
      <h3 class="title">运维考核平台</h3>

      <el-form-item prop="username">
        <el-input
          v-model="loginForm.username"
          type="text"
          auto-complete="off"
          placeholder="账号"
        >
          <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          v-model="loginForm.password"
          type="password"
          auto-complete="off"
          placeholder="密码"
          @keyup.enter.native="handleLogin"
        >
          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
        </el-input>
      </el-form-item>
      <el-form-item prop="code" v-if="captchaEnabled">
        <el-input
          v-model="loginForm.code"
          auto-complete="off"
          placeholder="验证码"
          style="width: 63%"
          @keyup.enter.native="handleLogin"
        >
          <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
        </el-input>
        <div class="login-code">
          <img :src="codeUrl" @click="getCode" class="login-code-img"/>
        </div>
      </el-form-item>
      <el-checkbox v-model="loginForm.rememberMe" style=" margin:0px 0px 25px 0px;">记住密码</el-checkbox>
      <el-form-item style="width:100%;">
        <el-button
          :loading="loading"
          size="medium"
          type="primary"
          style="width:100%;"
          @click.native.prevent="handleLogin"
        >
          <span v-if="!loading">登 录</span>
          <span v-else>登 录 中...</span>
        </el-button>
        <div style="float: right;" v-if="register">
          <router-link class="link-type" :to="'/register'">立即注册</router-link>
        </div>
      </el-form-item>
    </el-form>

    <el-dialog title="为了您的账号安全,首次登陆请修改密码" :visible.sync="loginInfo.firstLogin==0">
         <el-form>
           <el-form-item label="新密码">
               <el-input v-model="newPassword" autocomplete="off"></el-input>
           </el-form-item>
            <el-form-item label="请确认密码">
               <el-input v-model="confirmPassword" autocomplete="off"></el-input>
            </el-form-item>
         </el-form>
         <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="updatePwd">确 定</el-button>
         </div>
    </el-dialog>
  </div>


</template>

<script>
import { getCodeImg ,getInfo} from "@/api/login";
import Cookies from "js-cookie";
import { encrypt, decrypt } from '@/utils/jsencrypt'
import { updateUserPwd } from "@/api/system/user";

export default {
  //新增对象、变量
  name: "Login",
  data() {
    const equalToPassword = (rule, value, callback) => {
          if (this.newPassword !== value) {
            callback(new Error("两次输入的密码不一致"));
          } else {
            callback();
          }
        };
    const validatePassword = (rule, value, callback) => {
          var regex = /(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[\W_])/;
              if (value.length < 8 || value.length > 10) {
                callback(new Error('请输入8-10位大写字母+小写字母+数字+特殊字符'));
              }
              else if (!regex.test(value)) {
                callback(new Error("请输入8-10位大写字母+小写字母+数字+特殊字符"));
              } else {
                callback();
              }
            };
    return {
      codeUrl: "",
      loginForm: {
        username: "admin",
        password: "admin123",
        rememberMe: false,
        code: "",
        uuid: ""
      },
      loginInfo: {
          firstLogin: 1
      },
      newPassword: undefined,
      confirmPassword: undefined,
      loginRules: {
        username: [
          { required: true, trigger: "blur", message: "请输入您的账号" }
        ],
        password: [
          { required: true, trigger: "blur", message: "请输入您的密码" }
        ],
        code: [{ required: true, trigger: "change", message: "请输入验证码" }]
      },
      rules: {
        newPassword: [
          { required: true, message: "新密码不能为空", trigger: "blur" },
          { required: true, validator: validatePassword, trigger: "blur" }
        ],
        confirmPassword: [
          { required: true, message: "确认密码不能为空", trigger: "blur" },
          { required: true, validator: equalToPassword, trigger: "blur" }
        ]
      },
      loading: false,
      // 验证码开关
      captchaEnabled: true,
      // 注册开关
      register: false,
      redirect: undefined
    };
  },
  watch: {
    $route: {
      handler: function(route) {
        console.log(route);
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true
    }
  },
  created() {
    this.getCode();
    this.getCookie();
  },
  methods: {
    getCode() {
      getCodeImg().then(res => {
        this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
        if (this.captchaEnabled) {
          this.codeUrl = "data:image/gif;base64," + res.img;
          this.loginForm.uuid = res.uuid;
        }
      });
    },
    getCookie() {
      const username = Cookies.get("username");
      const password = Cookies.get("password");
      const rememberMe = Cookies.get('rememberMe')
      this.loginForm = {
        username: username === undefined ? this.loginForm.username : username,
        password: password === undefined ? this.loginForm.password : decrypt(password),
        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
      };
    },
    handleLogin() {
      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.$store.dispatch("Login", this.loginForm).then((res) => {
              getInfo().then(loginInfo => {
              this.loginInfo = loginInfo.user
              //如果返回为1正常跳转
              if(this.loginInfo.firstLogin == 1){
                this.$router.push({ path: "/" }).catch(()=>{});
                return;
                this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
              } else {
                 localStorage.setItem('firstLogin',0)
              }
              }).catch(()=>{})
          }).catch(() => {
            this.loading = false;
            if (this.captchaEnabled) {
              this.getCode();
            }
          });
         }
       });
      },
    // 新增修改方法
    updatePwd(){
      updateUserPwd("", this.newPassword, 0).then(response => {
          // 修改完成将firstLogin改为1
        localStorage.setItem('firstLogin', 1)
        this.$modal.msgSuccess("修改成功");
        this.$router.push({ path: this.redirect || "/" }).catch(() => {});
      }).catch((e) => {
        console.info(e)
          });
        }
       }
     };
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

$light_gray:#eee;
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-image: url("../assets/images/login-background.jpg");
  background-size: cover;
}
.title {

  margin: 0px auto 30px auto;
  text-align: center;
  color: #707070;
}

.login-form {
  border-radius: 6px;
  background: #ffffff;
  width: 400px;
  padding: 25px 25px 5px 25px;
  .el-input {
    height: 38px;
    input {
      height: 38px;
    }
  }
  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 2px;
  }
}
.login-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}
.login-code {
  width: 33%;
  height: 38px;
  float: right;
  img {
    cursor: pointer;
    vertical-align: middle;
  }
}
.el-login-footer {
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: Arial;
  font-size: 12px;
  letter-spacing: 1px;
}
.login-code-img {
  height: 38px;
}
.title-container {
  position: absolute;
  transform: translateY(-400%);
  left: 35%;
  .title {
    font-size: 40px;
    color: $light_gray;
    margin: 0px auto 20px auto;
    text-align: center;
    font-weight: bold;
    letter-spacing: 20px;
  }
}
</style>

 src/views/login.vue

@@ -1,84 +1,76 @@
<template>
  <div class="login">
    <div class="title-container">
      <h3 class="title">自贡公安天网运维平台</h3>
    </div>
    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
      <h3 class="title">自贡公安天网运维平台</h3>

      <el-form-item prop="username">
        <el-input
          v-model="loginForm.username"
          type="text"
          auto-complete="off"
          placeholder="账号"
        >
          <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          v-model="loginForm.password"
          type="password"
          auto-complete="off"
          placeholder="密码"
          @keyup.enter.native="handleLogin"
        >
          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
        </el-input>
      </el-form-item>
      <el-form-item prop="code" v-if="captchaEnabled">
        <el-input
          v-model="loginForm.code"
          auto-complete="off"
          placeholder="验证码"
          style="width: 63%"
          @keyup.enter.native="handleLogin"
        >
          <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
        </el-input>
        <div class="login-code">
          <img :src="codeUrl" @click="getCode" class="login-code-img"/>
    <div class="login-container">
      <div class="login-wrapper">
        <div class="info-wrapper enter-x">
          <div class="title-wrapper">
            <div class="logo">
              <img src="../assets/icons/logo.png" alt="">
            </div>
            <p class="title">运维考核平台</p>
          </div>
          <div class="logo-wrapper">
            <img src="../assets/svg/login-box-bg.svg" alt="">
          </div>
        </div>
      </el-form-item>
      <el-checkbox v-model="loginForm.rememberMe" style=" margin:0px 0px 25px 0px;">记住密码</el-checkbox>
      <el-form-item style="width:100%;">
        <el-button
          :loading="loading"
          size="medium"
          type="primary"
          style="width:100%;"
          @click.native.prevent="handleLogin"
        >
          <span v-if="!loading">登 录</span>
          <span v-else>登 录 中...</span>
        </el-button>
        <div style="float: right;" v-if="register">
          <router-link class="link-type" :to="'/register'">立即注册</router-link>
        </div>
      </el-form-item>
    </el-form>

    <el-dialog title="为了您的账号安全,首次登陆请修改密码" :visible.sync="loginInfo.firstLogin==0">
         <el-form>
           <el-form-item label="新密码">
               <el-input v-model="newPassword" autocomplete="off"></el-input>
           </el-form-item>
            <el-form-item label="请确认密码">
               <el-input v-model="confirmPassword" autocomplete="off"></el-input>
        <div class="form-wrapper">
          <h1 class="title">登录</h1>
          <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
            <el-form-item prop="username">
              <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
                <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
              </el-input>
            </el-form-item>
         </el-form>
         <div slot="footer" class="dialog-footer">
            <el-form-item prop="password">
              <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码"
                @keyup.enter.native="handleLogin">
                <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
              </el-input>
            </el-form-item>
            <el-form-item prop="code" v-if="captchaEnabled">
              <el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 63%"
                @keyup.enter.native="handleLogin">
                <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
              </el-input>
              <div class="login-code">
                <img :src="codeUrl" @click="getCode" class="login-code-img" />
              </div>
            </el-form-item>
            <el-checkbox v-model="loginForm.rememberMe" style=" margin:0px 0px 25px 0px;">记住密码</el-checkbox>
            <el-form-item style="width:100%;">
              <el-button :loading="loading" size="medium" type="primary" style="width:100%;"
                @click.native.prevent="handleLogin">
                <span v-if="!loading">登 录</span>
                <span v-else>登 录 中...</span>
              </el-button>
              <div style="float: right;" v-if="register">
                <router-link class="link-type" :to="'/register'">立即注册</router-link>
              </div>
            </el-form-item>
          </el-form>
        </div>
        <el-dialog title="为了您的账号安全,首次登陆请修改密码" :visible.sync="loginInfo.firstLogin == 0">
          <el-form>
            <el-form-item label="新密码">
              <el-input v-model="newPassword" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="请确认密码">
              <el-input v-model="confirmPassword" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="updatePwd">确 定</el-button>
         </div>
    </el-dialog>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>


</template>

<script>
import { getCodeImg ,getInfo} from "@/api/login";
import { getCodeImg, getInfo } from "@/api/login";
import Cookies from "js-cookie";
import { encrypt, decrypt } from '@/utils/jsencrypt'
import { updateUserPwd } from "@/api/system/user";
@@ -88,34 +80,34 @@
  name: "Login",
  data() {
    const equalToPassword = (rule, value, callback) => {
          if (this.newPassword !== value) {
            callback(new Error("两次输入的密码不一致"));
          } else {
            callback();
          }
        };
      if (this.newPassword !== value) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      }
    };
    const validatePassword = (rule, value, callback) => {
          var regex = /(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[\W_])/;
              if (value.length < 8 || value.length > 10) {
                callback(new Error('请输入8-10位大写字母+小写字母+数字+特殊字符'));
              }
              else if (!regex.test(value)) {
                callback(new Error("请输入8-10位大写字母+小写字母+数字+特殊字符"));
              } else {
                callback();
              }
            };
      var regex = /(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[\W_])/;
      if (value.length < 8 || value.length > 10) {
        callback(new Error('请输入8-10位大写字母+小写字母+数字+特殊字符'));
      }
      else if (!regex.test(value)) {
        callback(new Error("请输入8-10位大写字母+小写字母+数字+特殊字符"));
      } else {
        callback();
      }
    };
    return {
      codeUrl: "",
      loginForm: {
        username: "admin",
        password: "admin123",
        username: "",
        password: "",
        rememberMe: false,
        code: "",
        uuid: ""
      },
      loginInfo: {
          firstLogin: 1
        firstLogin: 1
      },
      newPassword: undefined,
      confirmPassword: undefined,
@@ -148,7 +140,7 @@
  },
  watch: {
    $route: {
      handler: function(route) {
      handler: function (route) {
        console.log(route);
        this.redirect = route.query && route.query.redirect;
      },
@@ -195,90 +187,182 @@
          }

          this.$store.dispatch("Login", this.loginForm).then((res) => {
              getInfo().then(loginInfo => {
            getInfo().then(loginInfo => {
              this.loginInfo = loginInfo.user
              //如果返回为1正常跳转
              if(this.loginInfo.firstLogin == 1){
                this.$router.push({ path: "/" }).catch(()=>{});
              if (this.loginInfo.firstLogin == 1) {
                this.$router.push({ path: "/" }).catch(() => { });
                return;
                this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
                this.$router.push({ path: this.redirect || "/" }).catch(() => { });
              } else {
                 localStorage.setItem('firstLogin',0)
                localStorage.setItem('firstLogin', 0)
              }
              }).catch(()=>{})
            }).catch(() => { })
          }).catch(() => {
            this.loading = false;
            if (this.captchaEnabled) {
              this.getCode();
            }
          });
         }
       });
      },
        }
      });
    },
    // 新增修改方法
    updatePwd(){
    updatePwd() {
      updateUserPwd("", this.newPassword, 0).then(response => {
          // 修改完成将firstLogin改为1
        // 修改完成将firstLogin改为1
        localStorage.setItem('firstLogin', 1)
        this.$modal.msgSuccess("修改成功");
        this.$router.push({ path: this.redirect || "/" }).catch(() => {});
        this.$router.push({ path: this.redirect || "/" }).catch(() => { });
      }).catch((e) => {
        console.info(e)
          });
        }
       }
     };
      });
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
$light_gray: #eee;

$light_gray:#eee;
.login {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-image: url("../assets/images/login-background.jpg");
  background-size: cover;
}
.title {
  // background-image: url("../assets/images/login-background.jpg");
  // background-size: cover;

  margin: 0px auto 30px auto;
  text-align: center;
  color: #707070;
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin-left: -48%;
    background-image: url('../assets/svg/login-bg.svg');
    background-repeat: no-repeat;
    background-position: 100%;
    background-size: auto 100%;
  }
}

.login-container {
  margin: 0 auto;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
  padding: 0 20px;
}

.login-wrapper {
  display: flex;
  height: 100%;
}

.info-wrapper {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;

  .logo-wrapper {
    transform: translateX(-80px);
    opacity: 0;
    animation: enter-x 0.3s ease forwards;

    img {
      width: 50%;
    }
  }

  .title-wrapper {
    transform: translateX(-80px);
    opacity: 0;
    animation: enter-x 0.3s ease forwards;
    animation-delay: 0.1s;
    display: flex;
    align-items: center;
    margin-bottom: 50px;

    .title {
      text-align: left;
      font-size: 30px;
      color: #fff;
      margin-left: 10px;
    }
  }
}

.form-wrapper {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .title {
    transform: translateX(80px);
    opacity: 0;
    animation: enter-x 0.3s ease forwards;
  }

  .login-form {
    transform: translateX(80px);
    opacity: 0;
    animation: enter-x 0.3s ease forwards;
    animation-delay: 0.1s;
  }
}



.login-form {
  border-radius: 6px;
  background: #ffffff;
  width: 400px;
  padding: 25px 25px 5px 25px;

  .el-input {
    height: 38px;

    input {
      height: 38px;
    }
  }

  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 2px;
  }
}

.login-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}

.login-code {
  width: 33%;
  height: 38px;
  float: right;

  img {
    cursor: pointer;
    vertical-align: middle;
  }
}

.el-login-footer {
  height: 40px;
  line-height: 40px;
@@ -291,13 +375,16 @@
  font-size: 12px;
  letter-spacing: 1px;
}

.login-code-img {
  height: 38px;
}

.title-container {
  position: absolute;
  transform: translateY(-400%);
  left: 35%;

  .title {
    font-size: 40px;
    color: $light_gray;
@@ -307,4 +394,42 @@
    letter-spacing: 20px;
  }
}

@media (min-width: 640px) {
  .login-container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .login-container {
    max-width: 768px;
  }
}


@media (min-width: 1024px) {
  .login-container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .login-container {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .login-container {
    max-width: 1536px;
  }
}

@keyframes enter-x {
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
</style>

 src/views/screen/components/screen-examine/components/examine-chart.vue

@@ -59,7 +59,7 @@

    .hola-item {
      flex-shrink: 0;
      width: 220px;
      width: 180px;
      height: 180px;
    }
  }

 src/views/screen/components/screen-table/index.vue

@@ -99,7 +99,7 @@
.table-container {
  width: 100%;
  // flex: 1;
  height: 380px;
  height: 350px;
  position: relative;
  background: rgba(67, 102, 155, 0.3);
  border: 1px solid rgba(47, 91, 157, 0.8);

 src/views/screen/components/screen-title/index.vue

@@ -5,7 +5,7 @@
        <img src="@/assets/images/screen/header_bg.png" class="width-img" alt="">
      </div>
      <div class="header-text">
        自贡市运维考核大屏
        运维考核大屏
      </div>
    </div>
  </div>
@@ -38,4 +38,4 @@
  color: #fff;
  font-size: 24px;
}
</style>
</style>

 src/views/screen/components/screen-wrapper/index.vue

@@ -6,18 +6,18 @@
    </div>
    <div class="wrapper-content">
      <div class="left-container wrapper">
        <screen-face></screen-face>
        <screen-car></screen-car>
        <screen-video></screen-video>
        <screen-face class="animate-enter-x enter-left"></screen-face>
        <screen-car class="animate-enter-x enter-left animate-delay-1"></screen-car>
        <screen-video class="animate-enter-x enter-left animate-delay-2"></screen-video>
      </div>
      <div class="center-container center-wrapper">
        <screen-map></screen-map>
        <screen-table></screen-table>
        <screen-table class="animate-enter-y enter-top"></screen-table>
        <!-- <screen-detection></screen-detection> -->

      </div>
      <div class="right-container wrapper">
        <screen-examine></screen-examine>
        <screen-examine class="animate-enter-x enter-right"></screen-examine>
      </div>
    </div>
  </div>
@@ -56,6 +56,7 @@
  right: 20px;
  top: 40px;
}

.wrapper-container {
  width: 100%;
  height: 100%;
@@ -78,7 +79,7 @@
}

.wrapper {
  width: 25%;
  width: 20%;
  height: 100%;
  box-sizing: border-box;
  padding: 0 10px;
@@ -94,8 +95,9 @@
    padding-right: 0;
  }
}

.center-wrapper {
  width: 50%;
  width: 60%;
  height: 100%;
  box-sizing: border-box;
  padding: 0 10px;
@@ -103,4 +105,47 @@
  flex-direction: column;
  justify-content: space-between;
}
.animate-enter-x {
  animation: enter-x 0.4s ease forwards;
}
.animate-enter-y {
  animation: enter-y 0.4s ease forwards;
}
.enter-left {
  transform: translateX(-100px);
  opacity: 0;
}
.enter-right {
  transform: translateX(100px);
  opacity: 0;
}
.enter-top {
  transform: translateY(100px);
  opacity: 0;
}
.animate-delay-1 {
  animation-delay: 0.1s;
}

.animate-delay-2 {
  animation-delay: 0.3s;
}

.animate-delay-3 {
  animation-delay: 0.5s;
}

@keyframes enter-x {
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes enter-y {
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>

 src/views/system/contract/index.vue

@@ -4,7 +4,7 @@
    <el-row>
      <el-col :span="8" v-for="(item) in tableData" :key="o" style="margin: 10px;width: 30%;">
        <el-card :body-style="{ padding: '0px' }">
          <img src="https://img2.baidu.com/it/u=68398439,1553004927&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=357" class="image">
          <el-image style="width: 420px;height: 187px;" :preview-src-list="['https://img2.baidu.com/it/u=68398439,1553004927&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=357']" fit="cover" src="https://img2.baidu.com/it/u=68398439,1553004927&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=357" class="image"/>
          <div style="padding: 14px;">
            <span>{{ item.companyName }}</span>
            <span class="time" style="margin-left: 10px;">{{ item.deptName }}</span>

 src/views/system/data-manage/index.vue

@@ -162,8 +162,7 @@

<style scoped>
.container {
  margin-left: 100px;
  margin-right: 100px;
  margin-top: 10px;
  width: 90%;
  margin: 10px auto;
}
</style>

 src/views/system/video/index.vue

@@ -209,7 +209,6 @@

<script>
import { listMonitor, getMonitor, delMonitor, addMonitor, updateMonitor } from "@/api/platform/video-monitor";
import {getCountyList} from "@/api/platform/region";
export default {
  name: "Monitor",
  dicts: ['sys_normal_disable', 'platform_yes_no','camera_state'],
@@ -264,6 +263,7 @@
        installedTime: null,
        managementUnit: null,
        defaultOrder: null,
        cameraFunType: 1,
      },
      // 表单参数
      form: {},

 src/views/system/work-order/index.vue

@@ -30,17 +30,23 @@
    </el-form>

    <el-row>
      <el-col :span="8" v-for="item in workOrderList" :key="item" style="margin: 10px;width: 20%;">
      <el-col :span="8" v-for="item in workOrderList" :key="item" style="width: 390px;margin-left: 40px;margin-top:20px;">
        <el-card :body-style="{ padding: '0px' }">
          <img src="https://img2.baidu.com/it/u=68398439,1553004927&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=357" class="image">
          <div style="padding: 14px;">
            <span>{{ item.unitName }}</span>
            <span class="time">{{ item.ywPeopleName }}</span>
            <div class="bottom clearfix">
              <span style="font-size: 13px;">处理时间</span>
              <time class="time">{{ item.ywHandleTime }}</time>
            </div>
            <div class="bottom clearfix">
          <el-image :preview-src-list="['https://img2.baidu.com/it/u=68398439,1553004927&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=357']" fit="cover" src="https://img2.baidu.com/it/u=68398439,1553004927&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=357" class="image"/>
          <div style="padding-right: 10px;padding-top: 10px;float: right;">
            <el-row>
              <el-col class="time" :span="24">运维人员：{{ item.ywPeopleName }}</el-col>
            </el-row>
            <el-row style="margin-top: 5px">
              <el-col class="time" :span="24">运维单位：{{ item.unitName }}</el-col>
            </el-row>
            <el-row style="margin-top: 5px">
              <el-col :span="24" class="time">工单编号：{{ item.workOrderNo }}</el-col>
            </el-row>
            <el-row style="margin-top: 5px">
              <el-col :span="24" class="time">处理时间：{{ item.ywHandleTime }}</el-col>
            </el-row>
            <el-row>
              <el-button
                size="mini"
                type="text"
@@ -57,12 +63,12 @@
              <!--            type="text"-->
              <!--            @click="handleYwResult(scope.row)"-->
              <!--          >运维结果</el-button>-->
              <el-button
                size="mini"
                type="text"
                @click="handleCheckResult(item)"
                v-hasPermi="['work:order:result']"
              >检测结果</el-button>
<!--              <el-button-->
<!--                size="mini"-->
<!--                type="text"-->
<!--                @click="handleCheckResult(item)"-->
<!--                v-hasPermi="['work:order:result']"-->
<!--              >检测结果</el-button>-->
              <el-button
                size="mini"
                type="text"
@@ -73,7 +79,7 @@
                type="text"
                @click="handleReport(item)"
              >事后报备</el-button>
            </div>
            </el-row>
          </div>
        </el-card>
      </el-col>
@@ -743,27 +749,11 @@
.time {
  font-size: 13px;
  color: #999;
  margin-left: 10px;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}


.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
  width: 125px;
  height: 125px;
  padding: 10px;
}
</style>