11 changed files with 416 additions and 106 deletions
|
After Width: | Height: | Size: 71 KiB |
@ -1,23 +1,56 @@ |
|||
<template> |
|||
<div class="flex items-center justify-between pr-5"> |
|||
<h1 class="text-lg font-medium py-3 px-6"> |
|||
<i |
|||
v-if="menu.show" |
|||
:class="{ 'text-gray-800': !menu.collapse, 'text-gray-400': menu.collapse }" |
|||
class="el-icon-guide mr-2" |
|||
@click="toggleCollapse" |
|||
></i> |
|||
{{ $route.meta.title || '智能大气腐蚀监测平台' }} |
|||
</h1> |
|||
|
|||
<el-dropdown> |
|||
<span class="flex items-center"> |
|||
<el-avatar class="mr-2" size="small" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar> |
|||
<div class="mr-3">{{ account }}</div> |
|||
<el-icon class="el-icon--right"> |
|||
<ArrowDown /> |
|||
</el-icon> |
|||
</span> |
|||
<template #dropdown> |
|||
<el-dropdown-menu> |
|||
<el-dropdown-item @click="openChangePassword">修改密码</el-dropdown-item> |
|||
<el-dropdown-item @click="signOut">退出登录</el-dropdown-item> |
|||
</el-dropdown-menu> |
|||
</template> |
|||
</el-dropdown> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { computed } from 'vue'; |
|||
import { useStore } from 'vuex'; |
|||
import { useRouter } from 'vue-router'; |
|||
import { ArrowDown } from '@element-plus/icons'; |
|||
|
|||
const store = useStore(); |
|||
const router = useRouter(); |
|||
const toggleCollapse = () => { |
|||
console.log('Toggle Collapse'); |
|||
store.commit('toggleCollapse'); |
|||
}; |
|||
const menu = computed(() => store.state.menu); |
|||
</script> |
|||
const account = computed(() => store.getters['user/account']); |
|||
|
|||
<template> |
|||
<h1 class="text-lg font-medium py-3 px-6 shadow"> |
|||
<i |
|||
class="el-icon-guide mr-2" |
|||
:class="{ 'text-gray-800': !menu.collapse, 'text-gray-400': menu.collapse }" |
|||
@click="toggleCollapse" |
|||
v-if="menu.show" |
|||
></i> |
|||
{{ $route.meta.title || '智能大气腐蚀监测平台' }} |
|||
</h1> |
|||
</template> |
|||
// 打开修改密码的页面 |
|||
function openChangePassword() { |
|||
router.push({ name: 'pw-change' }); |
|||
} |
|||
|
|||
// 退出登录 |
|||
function signOut() { |
|||
store.commit('user/setUser', null); |
|||
router.push({ name: 'signin' }); |
|||
} |
|||
</script> |
|||
|
|||
@ -0,0 +1,95 @@ |
|||
<script setup> |
|||
import { computed, ref } from 'vue'; |
|||
import { useStore } from 'vuex'; |
|||
import { useRoute, useRouter } from 'vue-router'; |
|||
import Navbar from 'components/navbar.vue'; |
|||
import zhCn from 'element-plus/lib/locale/lang/zh-cn'; |
|||
import { ElMessage } from 'element-plus'; |
|||
import { routes } from '@/routers/index.js'; |
|||
|
|||
const local = zhCn; |
|||
const store = useStore(); |
|||
const routeList = ref(routes); |
|||
const menu = computed(() => store.state.menu); |
|||
const activeMenuIndex = ref(0); |
|||
|
|||
// 验证 获取query中u参数 获取token |
|||
const route = useRoute(); |
|||
const router = useRouter(); |
|||
|
|||
// 获取设备数据 |
|||
const getDeviceData = async () => { |
|||
try { |
|||
await store.dispatch('device/getDevices'); |
|||
} catch (error) { |
|||
ElMessage.error(error || '获取设备信息失败'); |
|||
} |
|||
}; |
|||
|
|||
getDeviceData(); |
|||
|
|||
/** |
|||
* 打开页面 |
|||
* @param {string} path 页面路径 |
|||
*/ |
|||
function openPage(path) { |
|||
const { query } = route; |
|||
router.push({ |
|||
path, |
|||
query, |
|||
}); |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<el-config-provider :locale="local"> |
|||
<el-container> |
|||
<el-header style="padding: 0"> |
|||
<Navbar /> |
|||
</el-header> |
|||
<el-container class="overflow-hidden"> |
|||
<!-- <el-aside width="180px" v-if="menu.show"> --> |
|||
<el-aside v-if="menu.show" :width="!menu.collapse ? '200px' : '64px'"> |
|||
<el-menu :collapse="menu.collapse" :default-active="activeMenuIndex" class="el-menu-vertical-demo"> |
|||
<el-menu-item |
|||
v-for="(item, index) in routeList" |
|||
:key="item.name" |
|||
:index="index" |
|||
class="flex items-center" |
|||
@click="openPage(item.path)" |
|||
> |
|||
<i :class="item.meta.icon"></i> |
|||
<template #title>{{ item.meta.title }}</template> |
|||
</el-menu-item> |
|||
</el-menu> |
|||
</el-aside> |
|||
<el-main style="padding: 0"> |
|||
<div class="p-4"> |
|||
<router-view></router-view> |
|||
</div> |
|||
</el-main> |
|||
</el-container> |
|||
</el-container> |
|||
</el-config-provider> |
|||
</template> |
|||
|
|||
<style> |
|||
html, |
|||
body, |
|||
#app, |
|||
#app > section { |
|||
height: 100%; |
|||
} |
|||
|
|||
.el-menu { |
|||
min-height: 100%; |
|||
} |
|||
|
|||
.el-form--label-top .el-form-item__label { |
|||
padding-bottom: 0 !important; |
|||
} |
|||
|
|||
.el-form-item { |
|||
margin-bottom: 10px !important; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,114 @@ |
|||
<template> |
|||
<div class="wrap"> |
|||
<div class="content border rounded-md"> |
|||
<h1 class="text-2xl text-center font-bold mb-10 text-gray-700">智能大气腐蚀监测云平台</h1> |
|||
<el-form ref="passwordChangeFormRef" :model="passwordChangeForm" :rules="rules" label-width="70px" status-icon> |
|||
<el-form-item class="mb-3" label="账号" prop="account" style="margin-bottom: 22px !important"> |
|||
<el-input v-model="passwordChangeForm.account" type="text"></el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="旧密码" prop="passwordOld" style="margin-bottom: 22px !important"> |
|||
<el-input v-model="passwordChangeForm.passwordOld" type="password"></el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="新密码" prop="passwordNew" style="margin-bottom: 22px !important"> |
|||
<el-input v-model="passwordChangeForm.passwordNew" type="password"></el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item> |
|||
<el-button class="float-left" style="display: block; margin-bottom: 22px !important" type="primary" @click="onSubmit"> |
|||
确认修改 |
|||
</el-button> |
|||
<el-button class="float-right" type="text"> |
|||
<router-link to="signin">返回登录</router-link> |
|||
</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { reactive, ref } from 'vue'; |
|||
import { changePassword } from 'apis'; |
|||
import { ElMessage } from 'element-plus'; |
|||
import { useStore } from 'vuex'; |
|||
import { useRouter } from 'vue-router'; |
|||
|
|||
const store = useStore(); |
|||
const router = useRouter(); |
|||
const passwordChangeFormRef = ref(null); |
|||
const passwordChangeForm = reactive({ |
|||
account: '', |
|||
passwordOld: '', |
|||
passwordNew: '', |
|||
}); |
|||
|
|||
const rules = reactive({ |
|||
account: [ |
|||
{ |
|||
required: true, |
|||
message: '请输入账号', |
|||
trigger: 'blur', |
|||
}, |
|||
], |
|||
passwordOld: [ |
|||
{ |
|||
required: true, |
|||
message: '请输入旧密码', |
|||
trigger: 'blur', |
|||
}, |
|||
], |
|||
passwordNew: [ |
|||
{ |
|||
required: true, |
|||
message: '请输入新密码', |
|||
trigger: 'blur', |
|||
}, |
|||
], |
|||
}); |
|||
|
|||
// 提交 |
|||
function onSubmit() { |
|||
passwordChangeFormRef.value.validate(async valid => { |
|||
if (valid) { |
|||
try { |
|||
const params = { ...passwordChangeForm }; |
|||
const resData = await changePassword(params); |
|||
store.commit('user/setUser', resData); |
|||
ElMessage.success('修改成功'); |
|||
setTimeout(() => { |
|||
// 跳转到首页 |
|||
router.push({ name: 'signin' }); |
|||
}, 1000); |
|||
} catch (error) { |
|||
ElMessage.error(error); |
|||
} |
|||
} |
|||
}); |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.wrap { |
|||
width: 100%; |
|||
height: 100%; |
|||
overflow: hidden; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
background: url('@/assets/u1.jpg') no-repeat center center; |
|||
background-size: cover; |
|||
} |
|||
|
|||
.content { |
|||
width: 480px; |
|||
padding: 30px; |
|||
background: #fff; |
|||
} |
|||
|
|||
.content :deep(.el-form-item) { |
|||
display: flex; |
|||
margin-bottom: 22px !important; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,106 @@ |
|||
<template> |
|||
<div class="wrap"> |
|||
<div class="content border rounded-md"> |
|||
<h1 class="text-2xl text-center font-bold mb-10 text-gray-700">智能大气腐蚀监测云平台</h1> |
|||
<el-form ref="signInFormRef" :model="signInForm" :rules="rules" label-width="60px" status-icon> |
|||
<el-form-item class="mb-3" label="账号" prop="username" style="margin-bottom: 22px !important"> |
|||
<el-input v-model="signInForm.username" type="text"></el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="密码" prop="password" style="margin-bottom: 22px !important"> |
|||
<el-input v-model="signInForm.password" type="password"></el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item> |
|||
<el-button class="float-left" style="display: block; margin-bottom: 22px !important" type="primary" @click="onSubmit"> |
|||
立即登录 |
|||
</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { reactive, ref } from 'vue'; |
|||
import { signIn } from 'apis'; |
|||
import { ElMessage } from 'element-plus'; |
|||
import { useStore } from 'vuex'; |
|||
import { useRouter } from 'vue-router'; |
|||
|
|||
const store = useStore(); |
|||
const router = useRouter(); |
|||
const signInFormRef = ref(null); |
|||
const signInForm = reactive({ |
|||
username: '', |
|||
password: '', |
|||
}); |
|||
|
|||
const rules = reactive({ |
|||
username: [ |
|||
{ |
|||
required: true, |
|||
message: '请输入账号', |
|||
trigger: 'blur', |
|||
}, |
|||
], |
|||
password: [ |
|||
{ |
|||
required: true, |
|||
message: '请输入密码', |
|||
trigger: 'blur', |
|||
}, |
|||
], |
|||
}); |
|||
|
|||
// 提交 |
|||
function onSubmit() { |
|||
signInFormRef.value.validate(async valid => { |
|||
if (valid) { |
|||
try { |
|||
const params = { |
|||
client: 1, |
|||
data: { |
|||
identifier: signInForm.username, |
|||
credential: signInForm.password, |
|||
}, |
|||
type: 3, |
|||
}; |
|||
const resData = await signIn(params); |
|||
store.commit('user/setUser', resData); |
|||
ElMessage.success('登录成功， 欢迎回来'); |
|||
setTimeout(() => { |
|||
// 跳转到首页 |
|||
router.push({ name: 'overview' }); |
|||
}, 1000); |
|||
} catch (error) { |
|||
ElMessage.error(error); |
|||
} |
|||
} |
|||
}); |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.wrap { |
|||
width: 100%; |
|||
height: 100%; |
|||
overflow: hidden; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
background: url('@/assets/u1.jpg') no-repeat center center; |
|||
background-size: cover; |
|||
} |
|||
|
|||
.content { |
|||
width: 480px; |
|||
padding: 30px; |
|||
background: #fff; |
|||
} |
|||
|
|||
.content :deep(.el-form-item) { |
|||
display: flex; |
|||
margin-bottom: 22px !important; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue