Browse Source

首页登录

master
zhang_li 9 months ago
parent
commit
5fcfd0f8da
  1. 15
      api/index.js
  2. 16
      api/login.js
  3. 297
      pages/index.vue
  4. 211
      pages/login.vue

15
api/index.js

@ -0,0 +1,15 @@
import request from '@/utils/request'
// 获取首页数量信息
export function getCounts() {
return request({
url: '/eam/device-accounts/getCounts',
'method': 'GET'
})
}
// 获取首页代办信息
export function getToDoCountsByUser() {
return request({
url: '/eam/device-accounts/getToDoCountsByUser',
'method': 'GET'
})
}

16
api/login.js

@ -1,11 +1,15 @@
import request from '@/utils/request' import request from '@/utils/request'
// 登录方法 // 登录方法
export function login(username, password, captchaVerification) { export function login(username, password, captchaVerification,tenantName,rememberMe,code,uuid) {
const data = { const data = {
username, username,
password, password,
captchaVerification captchaVerification,
tenantName,
rememberMe,
code,
uuid,
} }
return request({ return request({
url: '/system/auth/login', url: '/system/auth/login',
@ -19,12 +23,18 @@ export function login(username, password, captchaVerification) {
// 获取用户详细信息 // 获取用户详细信息
export function getInfo() { export function getInfo() {
return request({
url: '/system/user/profile/get',
'method': 'GET'
})
}
// 获取权限
export function getPermissionInfo() {
return request({ return request({
url: '/system/auth/get-permission-info', url: '/system/auth/get-permission-info',
'method': 'GET' 'method': 'GET'
}) })
} }
// 退出方法 // 退出方法
export function logout() { export function logout() {
return request({ return request({

297
pages/index.vue

@ -1,24 +1,309 @@
<template> <template>
<view class="index-content"> <view class="index-content">
1 <u-navbar back-icon-color='#fff' back-icon-name=''
:background="{ background: 'rgba(64, 158,255,'+bgOpacity+')'}" back-text="" title-color='#fff'
:immersive='true' :border-bottom='false' title="首页">
<!-- <template v-slot:right>
<u-icon name="bell" color="#fff" size="36" style="padding-right: 30rpx;"
@click="open('/pages/notaic/index')"></u-icon>
</template> -->
</u-navbar>
<view class="top">
<image src="../static/images/mobile_bg.png" class="bg" mode=""></image>
<view class="top-box">
<view class="number">
<view class="number-item">
<view>{{counts.allCount || 0}}</view>
<view>设备总数</view>
</view>
<view class="number-item">
<view>{{counts.breakDownCount || 0}}</view>
<view>故障中设备</view>
</view>
<view class="number-item">
<view>{{counts.repairCount || 0}}</view>
<view>已报修设备</view>
</view>
</view>
<view class="status">
<view class="status-item">
<view>{{counts1.gongdan || 0}}</view>
<view>待接单</view>
</view>
<view class="status-item">
<view>{{counts1.yanzheng || 0}}</view>
<view>待验证</view>
</view>
<view class="status-item">
<view>{{counts1.shenpi || 0}}</view>
<view>待审核</view>
</view>
</view>
</view>
</view>
<view class="box">
<view class="" v-if=" $store.state.user.classType == 'DEVICE' || $store.state.user.classType == 'TECH' || !$store.state.user.classType">
<view class="title">设备维护</view>
<u-row gutter="16" style="padding:0px 20rpx ;">
<u-col span="3">
<view class="icon-item" @click="open('/pages/deviceReport/index?type=DEVICE')">
<image src="../static/images/icon4.svg" mode=""></image>
<view>设备报修</view>
</view>
</u-col>
<u-col span="3">
<view class="icon-item" @click="open('/pages/repairOrder/index?type=DEVICE')">
<image src="../static/images/icon5.svg" mode=""></image>
<view>维修工单</view>
</view>
</u-col>
<u-col span="3">
<view class="icon-item" @click="open('/pages/overhaulOrder/index?type=DEVICE')">
<image src="../static/images/icon3.svg" mode=""></image>
<view>检修工单</view>
</view>
</u-col>
<u-col span="3">
<view class="icon-item" @click="open('/pages/spotCheckOrder/addForm?type=DEVICE')">
<image src="../static/images/icon2.svg" mode=""></image>
<view>点检工单</view>
</view>
</u-col>
<u-col span="3">
<view class="icon-item" @click="open('/pages/upkeepOrder/index?type=DEVICE')">
<image src="../static/images/icon1.svg" mode=""></image>
<view>保养工单</view>
</view>
</u-col>
</u-row>
</view>
<view class="" v-if="$store.state.user.classType == 'MOLD' ">
<view class="title">模具维护</view>
<u-row gutter="16">
<u-col span="3">
<view class="icon-item" @click="open('/pages/deviceReport/index?type=MOLD')">
<image src="../static/images/icon4.svg" mode=""></image>
<view>设备报修</view>
</view>
</u-col>
<u-col span="3">
<view class="icon-item" @click="open('/pages/repairOrder/index?type=MOLD')">
<image src="../static/images/icon5.svg" mode=""></image>
<view>维修工单</view>
</view>
</u-col>
<u-col span="3">
<view class="icon-item" @click="open('/pages/overhaulOrder/index?type=MOLD')">
<image src="../static/images/icon2.svg" mode=""></image>
<view>检修工单</view>
</view>
</u-col>
<u-col span="3">
<view class="icon-item" @click="open('/pages/maintenWorkOrderList/index')">
<image src="../static/images/icon1.svg" mode=""></image>
<view>保养工单</view>
</view>
</u-col>
</u-row>
</view>
<view class="title">备件管理</view>
<u-row gutter="16">
<u-col span="3" v-if=" $store.state.user.role == 'all_approve' || $store.state.user.role == 'normal_approve'">
<view class="icon-item" @click="open('/pages/sparePartsApplicationApprove/index')">
<image src="../static/images/icon6.png" mode=""></image>
<view>领用申请审批</view>
</view>
</u-col>
<u-col span="3" v-else>
<view class="icon-item" @click="open('/pages/sparePartsApplication/index')">
<image src="../static/images/icon6.png" mode=""></image>
<view>领用申请</view>
</view>
</u-col>
<u-col span="3">
<view class="icon-item" @click="open('/pages/sparePartsServiceWorkOrderList/addForm?type=DEVICE')">
<image src="../static/images/icon5.svg" mode=""></image>
<view>维修工单</view>
</view>
</u-col>
</u-row>
</view>
</view> </view>
</template> </template>
<script> <script>
export default { data() { import {
return { getInfo
} from '@/api/login'
import {
getCounts,
getToDoCountsByUser
} from '@/api/index'
import {
getAccessToken
} from '@/utils/auth'
export default {
data() {
return {
bgOpacity: 0,
counts: '',
counts1: '',
} }
}, },
methods: { methods: {
open(url) {
this.$tab.navigateTo(url)
},
getCounts() {
getCounts().then(res => {
this.counts = res.data
})
},
getToDoCountsByUser() {
getToDoCountsByUser().then(res => {
this.counts1 = res.data
})
},
},
onLoad: async function() {
if (getAccessToken()) {
this.getCounts()
this.getToDoCountsByUser()
}
console.log( this.$store.state)
},
onPageScroll(e) {
if (e.scrollTop > 0) {
this.bgOpacity = e.scrollTop / 200;
} else {
this.bgOpacity = 0
}
}, },
onLoad: function() {},
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.index-content {
background-color: white;
min-height: 100vh;
}
.bg {
width: 100%;
}
.top {
position: relative;
image {
height: calc(var(--status-bar-height) + 410rpx);
}
}
.top-box {
position: absolute;
width: 100%;
bottom: 0px;
.number {
padding: 30rpx 80rpx 50rpx;
display: flex;
align-items: center;
justify-content: space-between;
.number-item {
text-align: center;
view {
&:nth-child(1) {
color: white;
font-size: 40rpx;
font-weight: bold;
}
&:nth-child(2) {
color: rgba(255, 255, 255, 0.7);
font-size: 28rpx;
margin-top: 10rpx;
}
}
}
}
.status {
margin: 0px 40rpx;
padding: 40rpx 0rpx;
background: white;
border-radius: 20rpx 20rpx 0px 0px;
display: flex;
align-items: center;
justify-content: space-between;
.status-item {
text-align: center;
position: relative;
flex: 1;
view {
&:nth-child(1) {
color: black;
font-size: 40rpx;
font-weight: bold;
}
&:nth-child(2) {
color: rgba(0, 0, 0, 0.5);
font-size: 28rpx;
margin-top: 10rpx;
}
}
&::after {
content: "";
border-right: 1px solid #dedede;
position: absolute;
height: 60rpx;
right: 0px;
top: 50%;
margin-top: -30rpx;
}
&:nth-last-child(1)::after {
border: none;
}
}
}
}
.box {
.title {
font-size: 32rpx;
font-weight: bold;
padding: 50rpx 50rpx 30rpx;
}
.icon-item {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin: 20rpx 0px;
image {
width: 80rpx;
height: 80rpx;
}
view {
margin-top: 20rpx;
color: #999999;
}
}
}
</style> </style>

211
pages/login.vue

@ -1,23 +1,232 @@
<template> <template>
<view class="normal-login-container"> <view class="normal-login-container">
<view class="logo-img">
<u-icon name="close" size="40" class="icon" @click="$tab.reLaunch('/pages/index')"></u-icon>
<view class="logo-title">
<view>智慧设备管理综合系统</view>
<view>让设备管理更智能更高效</view>
</view>
<image src="../static/images/banner/logo-banner.png" mode="widthFix"></image>
</view>
<view class="box">
<view class="box-shadow">
</view> </view>
<view class="logo-content">
<text class="title">您好欢迎登录</text>
</view>
<view class="login-form-content">
<view class="input-item-label">登录账号</view>
<view class="input-item flex align-center">
<input v-model="loginForm.username" class="input" type="text" placeholder="请输入账号" maxlength="30" />
</view>
<view class="input-item-label">登录密码</view>
<view class="input-item flex align-center">
<input v-model="loginForm.password" type="password" class="input" placeholder="请输入密码" maxlength="20" />
</view>
<view class="action-btn">
<button @click="handleLogin" class="login-btn cu-btn block bg-blue lg ">登录</button>
</view>
</view>
<view class="xieyi text-center">
<text class="text-grey1">登录即代表同意</text>
<text @click="handleUserAgrement" class="text-blue">用户协议</text>
<text @click="handlePrivacy" class="text-blue">隐私协议</text>
</view>
</view>
</view>
</template> </template>
<script> <script>
import * as loginApi from "@/api/login"
export default { export default {
name: 'Login', name: 'Login',
data() { data() {
return { return {
captchaEnabled: true, // TODO
globalConfig: getApp().globalData.config,
loginForm: {
tenantName:"闻荫源码",
username: "admin",
password: "123456",
captchaVerification: "",
rememberMe:false,
code:'1',
uuid:"APP"
}
} }
}, },
methods: { methods: {
//
handlePrivacy() {
let site = this.globalConfig.appInfo.agreements[0]
this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
},
//
handleUserAgrement() {
let site = this.globalConfig.appInfo.agreements[1]
this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
},
//
async handleLogin(params) {
if (this.loginForm.username === "") {
this.$modal.msgError("请输入您的账号")
} else if (this.loginForm.password === "") {
this.$modal.msgError("请输入您的密码")
} else {
await this.pwdLogin({})
//
// if (this.captchaEnabled) {
// this.$refs.verify.show()
// } else { //
// await this.pwdLogin({})
// }
}
},
//
async pwdLogin(captchaParams) {
this.$modal.loading("登录中,请耐心等待...")
//
this.$store.dispatch('Login', this.loginForm).then(async () => {
this.$modal.closeLoading()
await this.loginSuccess()
// this.$tab.reLaunch('/pages/index')
})
},
//
async loginSuccess(result) {
//
await this.$store.dispatch('GetPermissionInfo').then(res => {
// this.$tab.reLaunch('/pages/index')
})
await this.$store.dispatch('GetInfo').then(res => {
this.$tab.reLaunch('/pages/index')
})
}
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
page {
background-color: #ffffff;
}
.normal-login-container {
width: 100%;
.logo-content {
width: 100%;
font-size: 40rpx;
padding: 50rpx 80rpx 0rpx;
.title {
font-weight: bold;
color: #000000;
}
}
.box{
position: relative;
}
.box-shadow{
box-shadow: 0px -10rpx 16rpx rgba(64, 158, 254, 0.5);
width: 100%;
position: absolute;
height: 30rpx;
border-radius: 30rpx 30rpx 0px 0px ;
}
.logo-img {
background-color: #fafcff;
height: calc(var(--status-bar-height) + 400rpx);
position: relative;
.icon{
position: absolute;
top: calc(var(--status-bar-height) + 20rpx);
left: 40rpx;
}
.logo-title{
position: absolute;
left: 50rpx;
top: calc(var(--status-bar-height) + 80rpx);
z-index: 11;
view{
&:nth-child(1){
color: #409eff;
font-weight: bold;
font-size: 36rpx;
}
&:nth-child(2){
color: #999999;
font-size: 24rpx;
}
}
}
image {
width: 75%;
display: block;
position: absolute;
bottom: 0px;
right: 0px;
}
}
.login-form-content {
margin: 40rpx auto;
width: 80%;
.input-item-label {
font-size: 30rpx;
// font-weight: bold;
color: #888888;
}
.input-item {
margin: 20rpx auto 40rpx;
border: 1px solid #E4E4E4;
padding: 0px 20rpx;
height: 90rpx;
.icon {
font-size: 38rpx;
margin-left: 20rpx;
color: #999;
}
.input {
width: 100%;
font-size: 28rpx;
line-height: 40rpx;
text-align: left;
}
}
.login-btn {
margin-top: 80rpx;
height: 80rpx;
background: #409eff;
color: white;
}
}
.xieyi {
color: #333;
margin-top: 40rpx;
font-size: 24rpx;
}
.easyinput {
width: 100%;
}
}
.login-code-img {
height: 90rpx;
}
</style> </style>
Loading…
Cancel
Save