mes-ai-admin-backend-ui/src/view/login/index.vue

<template>
  <div id="userLayout" class="w-full h-full relative">
    <div
      class="rounded-lg flex items-center justify-evenly w-full h-full bg-white md:w-screen md:h-screen md:bg-[#194bfb]"
    >
      <div class="md:w-3/5 w-10/12 h-full flex items-center justify-evenly">
        <div
          class="oblique h-[130%] w-3/5 bg-white transform -rotate-12 absolute -ml-52"
        />
        <!-- 分割斜块 -->
        <div
          class="z-[999] pt-12 pb-10 md:w-96 w-full rounded-lg flex flex-col justify-between box-border"
        >
          <div>
            <!--LOGO-->
            <div class="flex items-center justify-center" style="height:100px;width: 100px;margin-left: 110px;" >
              <!-- <img class="w-48 h-16" :src="`/src/assets/dacheng.jpg`" alt /> -->
              <!-- <img class="w-48 h-48" :src="`https://reachingkayo.com/Uploads/62f88d57efb9d749.jpg`" alt width="400px" height="400px"/> -->
            </div>
            <div class="mb-9">
              <p class="text-center text-3xl font-bold">
                AI云图像包装设计系统
              </p>
            </div>
            <el-form
              ref="loginForm"
              :model="loginFormData"
              :rules="rules"
              :validate-on-rule-change="false"
              @keyup.enter="submitForm"
            >
              <el-form-item prop="username" class="mb-6">
                <el-input
                  v-model="loginFormData.username"
                  size="large"
                  placeholder="请输入用户名"
                  suffix-icon="user"
                />
              </el-form-item>
              <el-form-item prop="password" class="mb-6">
                <el-input
                  v-model="loginFormData.password"
                  show-password
                  size="large"
                  type="password"
                  placeholder="请输入密码"
                />
              </el-form-item>
              <!-- <el-form-item
                v-if="loginFormData.openCaptcha"
                prop="captcha"
                class="mb-6"
              >
                <div class="flex w-full justify-between">
                  <el-input
                    v-model="loginFormData.captcha"
                    placeholder="请输入验证码"
                    size="large"
                    class="flex-1 mr-5"
                  />
                  <div class="w-1/3 h-11 bg-[#c3d4f2] rounded">
                    <img
                      v-if="picPath"
                      class="w-full h-full"
                      :src="picPath"
                      alt="请输入验证码"
                      @click="loginVerify()"
                    />
                  </div>
                </div>
              </el-form-item> -->
              <el-form-item class="mb-6">
                <el-button
                  class="shadow shadow-blue-600 h-11 w-full"
                  type="primary"
                  size="large"
                  @click="submitForm"
                  >登 录</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
      <div class="hidden md:block w-1/2 h-full float-right bg-[#194bfb]">
        <img
          class="h-full"
          src="@/assets/login_right_banner.jpg"
          alt="banner"
        />
      </div>
    </div>

    <BottomInfo class="left-0 right-0 absolute bottom-3 mx-auto w-full z-20">
      <div class="links items-center justify-center gap-2 hidden md:flex">
        <a href="http://doc.henrongyi.top/" target="_blank">
          <img src="@/assets/docs.png" class="w-8 h-8" alt="文档" />
        </a>
        <a href="https://support.qq.com/product/371961" target="_blank">
          <img src="@/assets/kefu.png" class="w-8 h-8" alt="客服" />
        </a>
        <a
          href="https://github.com/flipped-aurora/gin-vue-admin"
          target="_blank"
        >
          <img src="@/assets/github.png" class="w-8 h-8" alt="github" />
        </a>
        <a href="https://space.bilibili.com/322210472" target="_blank">
          <img src="@/assets/video.png" class="w-8 h-8" alt="视频站" />
        </a>
      </div>
    </BottomInfo>
	
	<!-- 添加的中间信息 -->
	<!-- <div class="absolute bottom-10 left-[45%] transform -translate-x-1/2 text-center">
	  <p>联系电话：竺工 13958052363</p>
	</div> -->

	
  </div>
</template>
<script setup>
// import { captcha } from "@/api/user";
import { checkDB } from "@/api/initdb";
import BottomInfo from "@/view/layout/bottomInfo/bottomInfo.vue";
import { reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import { useUserStore } from "@/pinia/modules/user";
import {getMachineMac} from '@/api/jixiaoguanli/jitairibaobiao'
defineOptions({
  name: "Login",
});

const router = useRouter();
// 验证函数
const checkUsername = (rule, value, callback) => {
  if (value.length < 3) {
    return callback(new Error("请输入正确的用户名"));
  } else {
    callback();
  }
};
const checkPassword = (rule, value, callback) => {
  if (value.length < 6) {
    return callback(new Error("请输入正确的密码"));
  } else {
    callback();
  }
};

// 获取验证码
const loginVerify = () => {
  // captcha({}).then(async (ele) => {
  //   rules.captcha.push({
  //     max: ele.data.captchaLength,
  //     min: ele.data.captchaLength,
  //     message: `请输入${ele.data.captchaLength}位验证码`,
  //     trigger: "blur",
  //   });
  //   picPath.value = ele.data.picPath;
  //   loginFormData.captchaId = ele.data.captchaId;
  //   loginFormData.openCaptcha = ele.data.openCaptcha;
  //   // console.log();
  // });
};
loginVerify();


// 登录相关操作
const loginForm = ref(null);
const picPath = ref("");
const loginFormData = reactive({
  username: "",
  password: "",
  captcha: "443188",
  captchaId: "0FZfnUtAOrdXvTETkJRc",
  openCaptcha: false,
});
const rules = reactive({
  username: [{ validator: checkUsername, trigger: "blur" }],
  password: [{ validator: checkPassword, trigger: "blur" }],
  // captcha: [
  //   {
  //     message: "验证码格式不正确",
  //     trigger: "blur",
  //   },
  // ],
});


const userStore = useUserStore();
const login = async () => {
  return await userStore.LoginIn(loginFormData);
};
const submitForm = () => {
  loginForm.value.validate(async (v) => {
    if (v) {
      const flag = await login();
      if (!flag) {
        loginVerify();
      }
    } else {
      ElMessage({
        type: "error",
        message: "请正确填写登录信息",
        showClose: true,
      });
      loginVerify();
      return false;
    }
  });
};



// 跳转初始化
const checkInit = async () => {
  const res = await checkDB();
  if (res.code === 0) {
    if (res.data?.needInit) {
      userStore.NeedInit();
      router.push({ name: "Init" });
    } else {
      ElMessage({
        type: "info",
        message: "已配置数据库信息，无法初始化",
      });
    }
  }
};

const GetAddr = () => {
  var xmlhttp = null;
  var res;
  if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  // 设置回调函数
  xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      res = eval("(" + xmlhttp.response + ")");
      let result = "";
      for (let i = 0; i < res.macAddress.length; i++) {
        if (i % 2 === 0 && i !== 0) {
          result += "-"; // 根据实际需求修改分隔符
        }
        result += res.macAddress[i];
      }

    }
  };
  // 打开一个连接
  xmlhttp.open("get", "http://127.0.0.1:8090/init");
  // 发送请求
  xmlhttp.send();
};
// 在页面加载时获取MAC地址并进行自动登录
GetAddr();






// userStore.LoginIn2({
// 	   username: "CF01#",
// 	   password: "123456",
// 	   captcha: "443188",
// 	   captchaId: "0FZfnUtAOrdXvTETkJRc",
// 	   openCaptcha: false,
// 	 });
</script>