Browse Source

登录-样式修改

dev
xuhuajiao 3 years ago
parent
commit
4283d0166d
  1. 5
      src/api/login.js
  2. 66
      src/router/index.js
  3. 2
      src/store/modules/user.js
  4. 72
      src/views/dashboard/AgencyData.vue
  5. 73
      src/views/dashboard/DeviceData.vue
  6. 44
      src/views/dashboard/PublishProcess.vue
  7. 2
      src/views/dashboard/ThemeGallery.vue
  8. 4
      src/views/device/deviceConfig.vue
  9. 4
      src/views/device/index.vue
  10. 10
      src/views/home.vue
  11. 32
      src/views/login.vue
  12. 8
      src/views/publishContent/urgentMessage/index.vue
  13. 6
      src/views/system/dept/index.vue
  14. 4
      src/views/system/role/index.vue
  15. 10
      src/views/system/user/index.vue

5
src/api/login.js

@ -1,12 +1,13 @@
import request from '@/utils/request'
export function login(phone, password, code, uuid) {
export function login(username, password, phone, code, uuid) {
return request({
url: 'auth/login',
method: 'post',
data: {
phone,
username,
password,
phone,
code,
uuid
}

66
src/router/index.js

@ -19,39 +19,39 @@ router.beforeEach((to, from, next) => {
NProgress.start()
next()
NProgress.done()
// if (getToken()) {
// // 已登录且要跳转的页面是登录页
// if (to.path === '/login') {
// next({ path: '/' })
// NProgress.done()
// } else {
// if (store.getters.roles.length === 0) { // 判断当前用户是否已拉取完user_info信息
// store.dispatch('GetInfo').then(() => { // 拉取user_info
// // 动态路由,拉取菜单
// loadMenus(next, to)
// }).catch(() => {
// store.dispatch('LogOut').then(() => {
// location.reload() // 为了重新实例化vue-router对象 避免bug
// })
// })
// // 登录时未拉取 菜单,在此处拉取
// } else if (store.getters.loadMenus) {
// // 修改成false,防止死循环
// store.dispatch('updateLoadMenus')
// loadMenus(next, to)
// } else {
// next()
// }
// }
// } else {
// /* has no token*/
// if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单,直接进入
// next()
// } else {
// next(`/login?redirect=${to.fullPath}`) // 否则全部重定向到登录页
// NProgress.done()
// }
// }
// if (getToken()) {
// // 已登录且要跳转的页面是登录页
// if (to.path === '/login') {
// next({ path: '/' })
// NProgress.done()
// } else {
// if (store.getters.roles.length === 0) { // 判断当前用户是否已拉取完user_info信息
// store.dispatch('GetInfo').then(() => { // 拉取user_info
// // 动态路由,拉取菜单
// loadMenus(next, to)
// }).catch(() => {
// store.dispatch('LogOut').then(() => {
// location.reload() // 为了重新实例化vue-router对象 避免bug
// })
// })
// // 登录时未拉取 菜单,在此处拉取
// } else if (store.getters.loadMenus) {
// // 修改成false,防止死循环
// store.dispatch('updateLoadMenus')
// loadMenus(next, to)
// } else {
// next()
// }
// }
// } else {
// /* has no token*/
// if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单,直接进入
// next()
// } else {
// next(`/login?redirect=${to.fullPath}`) // 否则全部重定向到登录页
// NProgress.done()
// }
// }
})
export const loadMenus = (next, to) => {

2
src/store/modules/user.js

@ -30,7 +30,7 @@ const user = {
Login({ commit }, userInfo) {
const rememberMe = userInfo.rememberMe
return new Promise((resolve, reject) => {
login(userInfo.phone, userInfo.password, userInfo.code, userInfo.uuid).then(res => {
login(userInfo.username, userInfo.password, userInfo.phone, userInfo.code, userInfo.uuid).then(res => {
setToken(res.token, rememberMe)
commit('SET_TOKEN', res.token)
setUserInfo(res.user, commit)

72
src/views/dashboard/AgencyData.vue

@ -1,39 +1,41 @@
<template>
<div class="home_item">
<div class="home_item_title">
<svg class="font-icon icon1" aria-hidden="true">
<use xlink:href="#icon-jigouxinxi" />
</svg>
<h4>机构数据</h4>
</div>
<div class="agency_warp">
<div class="agency_info">
<p>
<span>当前版本</span>普通版
</p>
<p>
<span>有效时间</span>2023-12-31
</p>
<p>
<span>联系人</span>周杰伦
</p>
<p>
<span>联系方式</span>15100701025
</p>
<el-col :xs="12" :sm="12" :lg="7" class="card-panel-col">
<div class="home_item">
<div class="home_item_title">
<svg class="font-icon icon1" aria-hidden="true">
<use xlink:href="#icon-jigouxinxi" />
</svg>
<h4>机构数据</h4>
</div>
<div class="agency_data">
<el-button type="primary" round class="upgrade_btn">升级</el-button>
<p>
屏幕数量
<span class="agency_num1">1</span>/10
</p>
<p>
管理人员
<span class="agency_num2">2</span>/10
</p>
<div class="agency_warp">
<div class="agency_info">
<p>
<span>当前版本</span>普通版
</p>
<p>
<span>有效时间</span>2023-12-31
</p>
<p>
<span>联系人</span>周杰伦
</p>
<p>
<span>联系方式</span>15100701025
</p>
</div>
<div class="agency_data">
<el-button type="primary" round class="upgrade_btn">升级</el-button>
<p>
屏幕数量
<span class="agency_num1">1</span>/10
</p>
<p>
管理人员
<span class="agency_num2">2</span>/10
</p>
</div>
</div>
</div>
</div>
</el-col>
</template>
<script>
@ -52,7 +54,7 @@ export default {
</script>
<style lang="scss" scoped>
.home_item {
width: 448px;
// width: 448px;
.icon1 {
width: 17px;
height: 17px;
@ -60,7 +62,7 @@ export default {
.agency_warp {
display: flex;
justify-content: space-between;
padding: 16px 22px 0 22px;
padding: 16px 0 0 0;
font-size: 14px;
line-height: 38px;
.agency_info {
@ -78,7 +80,7 @@ export default {
width: 108px;
height: 38px;
font-size: 14px;
margin: 8px 0 26px 0;
margin: 8px 0 30px 0;
}
.agency_num1 {
color: #09c3df;

73
src/views/dashboard/DeviceData.vue

@ -1,35 +1,37 @@
<template>
<div class="home_item">
<div class="home_item_title">
<svg class="font-icon icon1" aria-hidden="true">
<use xlink:href="#icon-shebeishuju" />
</svg>
<h4>设备信息</h4>
</div>
<div class="device_info">
<div class="info_item info1">
<span class="info_title">设备总数量</span>
<div class="info_total">
<span class="info_num">2</span>
<span></span>
</div>
</div>
<div class="info_item info2">
<span class="info_title">设备在线数量</span>
<div class="info_total">
<span class="info_num">1</span>
<span></span>
</div>
</div>
<div class="info_item info3">
<span class="info_title">设备离线数量</span>
<div class="info_total">
<span class="info_num">1</span>
<span></span>
</div>
<el-col :xs="12" :sm="12" :lg="9" class="card-panel-col">
<div class="home_item">
<div class="home_item_title">
<svg class="font-icon icon1" aria-hidden="true">
<use xlink:href="#icon-shebeishuju" />
</svg>
<h4>设备信息</h4>
</div>
<el-row :gutter="24" class="device_info">
<el-col :xs="24" :sm="24" :lg="8" class="info_item info1">
<span class="info_title">设备总数量</span>
<div class="info_total">
<span class="info_num">2</span>
<span></span>
</div>
</el-col>
<el-col :xs="24" :sm="24" :lg="8" class="info_item info2">
<span class="info_title">设备在线数量</span>
<div class="info_total">
<span class="info_num">1</span>
<span></span>
</div>
</el-col>
<el-col :xs="24" :sm="24" :lg="8" class="info_item info3">
<span class="info_title">设备离线数量</span>
<div class="info_total">
<span class="info_num">1</span>
<span></span>
</div>
</el-col>
</el-row>
</div>
</div>
</el-col>
</template>
<script>
@ -48,8 +50,8 @@ export default {
</script>
<style lang="scss" scoped>
.home_item {
width: 536px;
margin: 0 24px;
// width: 536px;
// margin: 0 24px;
.icon1 {
width: 16px;
height: 13px;
@ -58,7 +60,7 @@ export default {
.device_info {
display: flex;
justify-content: space-between;
padding: 18px 22px 0 22px;
padding: 18px 0 0 0;
.info_item {
position: relative;
font-size: 14px;
@ -68,15 +70,16 @@ export default {
color: #fff;
&.info1 {
background: url(~@/assets/images/home/s-j1.png) no-repeat left top;
background: url(~@/assets/images/home/s-j1.png) no-repeat center center;
background-size: 136px 141px;
}
&.info2 {
background: url(~@/assets/images/home/s-j2.png) no-repeat left top;
// margin: 0 10px;
background: url(~@/assets/images/home/s-j2.png) no-repeat center center;
background-size: 136px 141px;
}
&.info3 {
background: url(~@/assets/images/home/s-j3.png) no-repeat left top;
background: url(~@/assets/images/home/s-j3.png) no-repeat center center;
background-size: 136px 141px;
}
.info_total {

44
src/views/dashboard/PublishProcess.vue

@ -1,26 +1,28 @@
<template>
<div class="home_item">
<div class="home_item_title">
<svg class="font-icon icon1" aria-hidden="true">
<use xlink:href="#icon-fabuliucheng" />
</svg>
<h4>发布流程</h4>
</div>
<div class="publish_step">
<div class="step">
<img src="@/assets/images/home/s-t1.png" />
<el-button type="primary" round>设置时间</el-button>
</div>
<div class="step">
<img src="@/assets/images/home/s-t2.png" />
<el-button type="primary" round>选择内容</el-button>
</div>
<div class="step">
<img src="@/assets/images/home/s-t3.png" />
<el-button type="primary" round>选择设备</el-button>
<el-col :xs="12" :sm="12" :lg="8" class="card-panel-col">
<div class="home_item">
<div class="home_item_title">
<svg class="font-icon icon1" aria-hidden="true">
<use xlink:href="#icon-fabuliucheng" />
</svg>
<h4>发布流程</h4>
</div>
<el-row class="publish_step">
<el-col :xs="24" :sm="24" :lg="8" class="step">
<img src="@/assets/images/home/s-t1.png" />
<el-button type="primary" round>设置时间</el-button>
</el-col>
<el-col :xs="24" :sm="24" :lg="8" class="step">
<img src="@/assets/images/home/s-t2.png" />
<el-button type="primary" round>选择内容</el-button>
</el-col>
<el-col :xs="24" :sm="24" :lg="8" class="step">
<img src="@/assets/images/home/s-t3.png" />
<el-button type="primary" round>选择设备</el-button>
</el-col>
</el-row>
</div>
</div>
</el-col>
</template>
<script>
@ -39,7 +41,7 @@ export default {
</script>
<style lang="scss" scoped>
.home_item {
width: 576px;
// width: 576px;
.icon1 {
width: 15px;
height: 16px;

2
src/views/dashboard/ThemeGallery.vue

@ -71,7 +71,7 @@ export default {
img {
display: block;
width: 200px;
height: 282px;
height: 280px;
border: 1px solid #f0f0f0;
border-radius: 4px;
margin: 0 23px 24px 0;

4
src/views/device/deviceConfig.vue

@ -25,7 +25,7 @@
<el-table style="width: 100%;" :data="tableData" :header-cell-style="{ background: '#3a8aeb', color: '#fff' }" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" />
<el-table-column prop="id" label="设备ID" align="center" />
<el-table-column prop="account" label="设备账号" align="center" />
<el-table-column prop="account" label="设备账号" align="center" width="150" />
<el-table-column prop="name" label="设备名称" align="center" />
<el-table-column prop="orientation" label="设备方向" align="center" />
<el-table-column prop="period" label="配置周期" align="center" width="300" />
@ -35,7 +35,7 @@
</template>
</el-table-column>
<el-table-column prop="date" label="创建时间" align="center" width="200" />
<el-table-column fixed="right" label="操作" align="center">
<el-table-column fixed="right" label="操作" align="center" width="120">
<template slot-scope="scope">
<el-button
type="primary"

4
src/views/device/index.vue

@ -70,8 +70,8 @@
<el-button type="text" size="small" @click="handleClick(scope.row)">查看</el-button>
</template>
</el-table-column>
<el-table-column prop="date" label="创建时间" align="center" width="200" />
<el-table-column fixed="right" label="操作" align="center">
<el-table-column prop="date" label="创建时间" align="center" width="160" />
<el-table-column fixed="right" label="操作" align="center" width="120">
<template slot-scope="scope">
<el-button
type="primary"

10
src/views/home.vue

@ -1,16 +1,16 @@
<template>
<div class="dashboard-container">
<div class="dashboard-editor-container">
<el-row type="flex" class="row-bg" justify="space-between">
<!-- <el-col :span="6">
<el-row :gutter="24">
<!-- <el-col :xs="24" :sm="24" :lg="8">
<publish-process />
</el-col>
<el-col :span="6">
<el-col :xs="24" :sm="24" :lg="8">
<device-data />
</el-col>
<el-col :span="6">
<el-col :xs="24" :sm="24" :lg="8">
<agency-data />
</el-col>-->
</el-col> -->
<publish-process />
<device-data />

32
src/views/login.vue

@ -86,7 +86,8 @@ export default {
codeUrl: '',
cookiePass: '',
loginForm: {
phone: '',
username: '15902734788',
phone: '15902734788',
password: '',
rememberMe: false,
code: '',
@ -94,6 +95,7 @@ export default {
agree: false
},
loginRules: {
username: [{ required: true, trigger: 'blur', validator: validPhone }],
phone: [{ required: true, trigger: 'blur', validator: validPhone }],
password: [{ required: true, trigger: 'blur', message: '密码不能为空' }],
code: [{ required: true, trigger: 'change', message: '验证码不能为空' }],
@ -103,14 +105,14 @@ export default {
redirect: undefined
}
},
// watch: {
// $route: {
// handler: function (route) {
// this.redirect = route.query && route.query.redirect
// },
// immediate: true
// }
// },
watch: {
$route: {
handler: function(route) {
this.redirect = route.query && route.query.redirect
},
immediate: true
}
},
created() {
//
this.getCode()
@ -127,6 +129,7 @@ export default {
})
},
getCookie() {
const username = Cookies.get('username')
const phone = Cookies.get('phone')
let password = Cookies.get('password')
const rememberMe = Cookies.get('rememberMe')
@ -134,6 +137,7 @@ export default {
this.cookiePass = password === undefined ? '' : password
password = password === undefined ? this.loginForm.password : password
this.loginForm = {
username: username === undefined ? this.loginForm.username : username,
phone: phone === undefined ? this.loginForm.phone : phone,
password: password,
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
@ -146,12 +150,13 @@ export default {
handleLogin() {
this.$refs.loginForm.validate(valid => {
const user = {
phone: this.loginForm.phone,
username: this.loginForm.username,
password: this.loginForm.password,
rememberMe: this.loginForm.rememberMe,
phone: this.loginForm.phone,
code: this.loginForm.code,
uuid: this.loginForm.uuid,
agree: this.loginForm.agree
agree: this.loginForm.agree,
rememberMe: this.loginForm.rememberMe
}
if (user.password !== this.cookiePass) {
user.password = encrypt(user.password)
@ -159,14 +164,17 @@ export default {
if (valid) {
this.loading = true
if (user.rememberMe) {
Cookies.set('username', user.username, { expires: Config.passCookieExpires })
Cookies.set('phone', user.phone, { expires: Config.passCookieExpires })
Cookies.set('password', user.password, { expires: Config.passCookieExpires })
Cookies.set('rememberMe', user.rememberMe, { expires: Config.passCookieExpires })
} else {
Cookies.remove('username')
Cookies.remove('phone')
Cookies.remove('password')
Cookies.remove('rememberMe')
}
console.log(user)
this.$store
.dispatch('Login', user)
.then(() => {

8
src/views/publishContent/urgentMessage/index.vue

@ -11,7 +11,7 @@
>
<el-table-column type="selection" width="55" />
<el-table-column label="序号" type="index" align="center" prop="name" width="50" />
<el-table-column label="发布内容" align="center" prop="content" />
<el-table-column label="发布内容" align="center" prop="content" width="400" />
<el-table-column label="通知时间" align="center" prop="date" />
<el-table-column label="发布人" align="center" prop="user" />
<el-table-column label="状态" align="center" prop="enabled">
@ -19,7 +19,7 @@
<div :class="{ 'stop_txt': scope.row.enabled }">{{ scope.row.enabled ? '发布中' : '停止' }}</div>
</template>
</el-table-column>
<el-table-column label="操作" width="220px" align="center" fixed="right">
<el-table-column label="操作" width="120px" align="center" fixed="right">
<template slot-scope="scope">
<el-button
type="primary"
@ -62,7 +62,7 @@
{ required: true, message: '请输入文本内容', trigger: 'blur' }
]"
>
<el-input type="textarea" rows="6" v-model="form.content" style="width: 674px;" />
<el-input v-model="form.content" type="textarea" rows="6" style="width: 674px;" />
</el-form-item>
<el-form-item
label="文本大小"
@ -149,7 +149,7 @@ export default {
name: 'UrgentMessage',
components: { pagination },
cruds() {
return CRUD({ title: '部门', url: 'api/dept', crudMethod: { ...crudDept } })
return CRUD({ title: '部门', url: 'api/dept', crudMethod: { ...crudDept }})
},
mixins: [presenter(), header(), form(defaultForm), crud()],
data() {

6
src/views/system/dept/index.vue

@ -121,8 +121,8 @@
<div>{{ scope.row.enabled ? '已配置' : '未配置' }}</div>
</template>
</el-table-column>
<el-table-column prop="indate" align="center" label="有效时间" />
<el-table-column label="操作" width="220px" align="center" fixed="right">
<el-table-column prop="indate" align="center" label="有效时间" width="230px" />
<el-table-column label="操作" width="160px" align="center" fixed="right">
<template slot-scope="scope">
<el-button
type="primary"
@ -171,7 +171,7 @@ export default {
name: 'Dept',
components: { rrOperation, pagination },
cruds() {
return CRUD({ title: '部门', url: 'api/dept', crudMethod: { ...crudDept } })
return CRUD({ title: '部门', url: 'api/dept', crudMethod: { ...crudDept }})
},
mixins: [presenter(), header(), form(defaultForm), crud()],
//

4
src/views/system/role/index.vue

@ -119,7 +119,7 @@
>{{ tag.name }}</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" width="140" align="center" fixed="right">
<el-table-column label="操作" width="120" align="center" fixed="right">
<template slot-scope="scope">
<el-button
type="primary"
@ -160,7 +160,7 @@ export default {
name: 'Role',
components: { pagination, rrOperation },
cruds() {
return CRUD({ title: '角色', url: 'api/roles', sort: 'level,asc', crudMethod: { ...crudRoles } })
return CRUD({ title: '角色', url: 'api/roles', sort: 'level,asc', crudMethod: { ...crudRoles }})
},
mixins: [presenter(), header(), form(defaultForm), crud()],
data() {

10
src/views/system/user/index.vue

@ -47,10 +47,10 @@
>
<el-form ref="form" :inline="true" :model="form" size="small" label-width="100px">
<el-form-item
label="登录账号"
label="手机号"
prop="account"
:rules="[
{ required: true, message: '请输入登录账号', trigger: 'blur' }
{ required: true, message: '请输入手机号', trigger: 'blur' }
]"
>
<el-input v-model="form.account" style="width: 336px" />
@ -164,7 +164,7 @@
</el-table-column>
<el-table-column prop="createTime" width="135" label="创建日期" />
<!-- v-if="checkPer(['admin','user:edit','user:del'])" -->
<el-table-column label="操作" width="180" align="center" fixed="right">
<el-table-column label="操作" width="120" align="center" fixed="right">
<template slot-scope="scope">
<!-- <udOperation
:data="scope.row"
@ -207,7 +207,7 @@ export default {
name: 'User',
components: { rrOperation, pagination },
cruds() {
return CRUD({ title: '用户', url: 'api/users', crudMethod: { ...crudUser } })
return CRUD({ title: '用户', url: 'api/users', crudMethod: { ...crudUser }})
},
mixins: [presenter(), header(), form(defaultForm), crud()],
//
@ -279,7 +279,7 @@ export default {
created() {
// this.crud.msg.add = '123456'
},
mounted: function () {
mounted: function() {
const that = this
window.onresize = function temp() {
that.height = document.documentElement.clientHeight - 180 + 'px;'

Loading…
Cancel
Save