| | |
| | | <script lang="ts" setup> |
| | | import {onMounted, onUnmounted, reactive, ref} from "vue" |
| | | import {useRouter,useRoute } from 'vue-router' |
| | | import {useRoute, useRouter} from 'vue-router' |
| | | import type {FormInstance, FormRules} from 'element-plus' |
| | | import { ElMessage } from "element-plus"; |
| | | import { Lock,Avatar } from '@element-plus/icons-vue' |
| | | import {ElMessage} from "element-plus"; |
| | | import request from '@/utils/request' |
| | | import userInfo from '@/stores/userInfo' |
| | | import { sendSock, createWebSocket, closeSock,global_callback1 } from "@/utils/webSocket" |
| | | |
| | | |
| | | const store=userInfo() |
| | | let ruleFormRef = ref<FormInstance>() |
| | |
| | | if (!formEl) return |
| | | formEl.validate((valid) => { |
| | | if (valid) { |
| | | loginLoadings.value=true |
| | | request.post('/user/login', |
| | | userForm).then((res) => { |
| | | if(res['code']==200){ |
| | | store.$patch({user:res.data}) |
| | | loginLoadings.value = true |
| | | request |
| | | .post('/userinfo/login', userForm) |
| | | .then((res) => { |
| | | if (res['code'] == 200) { |
| | | store.$patch({user: res.data}) |
| | | console.log(res.data) |
| | | |
| | | router.push('/main') |
| | | ElMessage.success(`登录成功`) |
| | | } else { |
| | | ElMessage.error(res['msg']) |
| | | loginLoadings.value=false |
| | | return false |
| | | } |
| | | }).catch(error => { |
| | | router.push('/main') |
| | | ElMessage.success(`登录成功`) |
| | | } else { |
| | | ElMessage.error(res['msg']) |
| | | loginLoadings.value = false |
| | | return false |
| | | } |
| | | }).catch(error => { |
| | | ElMessage.error("服务器连接失败") |
| | | loginLoadings.value=false |
| | | return false |
| | |
| | | <template> |
| | | <div class="mainDiv" > |
| | | <div id="main-login"> |
| | | <div id="img-div"> |
| | | <img id="img-pic" src="@/assets/img.png" alt=""> |
| | | <!-- <img |
| | | style="width: 100%; height: 99vh" |
| | | src="../../src/assets/background.jpg" |
| | | /> --> |
| | | <div> |
| | | <div style="position: absolute; left: 8vw; top: 6vw; "> |
| | | <img src="../../src/assets/3.png"> |
| | | </div> |
| | | <div style="position: absolute; left: 15vw; top: 22vw; font-size: 55px;color: rgba(29, 33, 41, 1);"> |
| | | 北玻MES系统 |
| | | </div> |
| | | </div> |
| | | <div id="div-login"> |
| | | <h2>北玻自动化ERP管理系统</h2> |
| | | <el-form |
| | | @submit.native.prevent |
| | | ref="ruleFormRef" |
| | |
| | | status-icon |
| | | :rules="rules" |
| | | > |
| | | <el-form-item label="用户:" prop="userId"> |
| | | <div id="center"> |
| | | <div style="color: rgba(78, 89, 105, 1);margin-bottom: 10px;">账号</div> |
| | | <el-form-item prop="userId"> |
| | | <el-input |
| | | style="width: 340px;" |
| | | v-model="userForm.userId" |
| | | type="text" |
| | | autocomplete="off" |
| | | :prefix-icon="Avatar" |
| | | placeholder="请输入你的账号" |
| | | placeholder="请输入账号" |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item label="密码:" prop="pass"> |
| | | <div style="color: rgba(78, 89, 105, 1);margin-bottom: 10px;">密码</div> |
| | | <el-form-item prop="pass"> |
| | | <el-input |
| | | style="width: 340px;" |
| | | v-model="userForm.pass" |
| | | type="password" |
| | | autocomplete="off" |
| | | :prefix-icon="Lock" |
| | | placeholder="请输入你的密码" |
| | | show-password |
| | | placeholder="请输入密码" |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item id="submitForm"> |
| | | <el-button |
| | | :loading="registerLoadings" |
| | | type="primary" |
| | | @click="register" |
| | | >注册 |
| | | </el-button> |
| | | <el-button |
| | | :loading="loginLoadings" |
| | | type="primary" |
| | | native-type="submit" |
| | | @click="submitForm(ruleFormRef)" |
| | | @keyup.enter.native="keyDown(e)" |
| | | plain |
| | | >登录 |
| | | </el-button> |
| | | <el-button |
| | | :loading="registerLoadings" |
| | | type="primary" |
| | | @click="register" |
| | | plain |
| | | >注册 |
| | | </el-button> |
| | | |
| | | </el-form-item> |
| | | </div> |
| | | </el-form> |
| | | </div> |
| | | </div> |
| | |
| | | |
| | | <style scoped> |
| | | .mainDiv{ |
| | | //background-color: #1890FF; |
| | | overflow: hidden; |
| | | min-width: 718px; |
| | | background-image: url("../../src/assets/background.jpg"); |
| | | |
| | | } |
| | | #main-login{ |
| | | margin: 150px auto 0 auto; |
| | | height: 60vh; |
| | | width: 70vw; |
| | | |
| | | //background-color: #f2f2f2; |
| | | height: 70vh; |
| | | width: 80vw; |
| | | } |
| | | #img-div{ |
| | | width: 55%; |
| | |
| | | } |
| | | #div-login{ |
| | | margin-top: 5%; |
| | | /* margin-top: 20%; */ |
| | | /* margin-left: 650px; */ |
| | | background-color: #fff; |
| | | float: right; |
| | | width: 40%; |
| | | height: 80%; |
| | | border-radius: 12px; |
| | | height: 60%; |
| | | min-width: 318px; |
| | | border-radius: 4px; |
| | | box-shadow: 0 8px 16px 0 rgba(0,0,0,0), 0 6px 5px 0 rgba(0,0,0,0.19); |
| | | } |
| | | h2{ |
| | | color: #1890FF; |
| | | width: 100%; |
| | | text-align: center; |
| | | margin-top: 20%; |
| | | #center{ |
| | | margin-top: -30px; |
| | | } |
| | | .el-form{ |
| | | width: 50%; |
| | | margin: 5% auto auto; |
| | | width: 60%; |
| | | margin: 20% auto auto; |
| | | } |
| | | #submitForm { |
| | | display: flex; |