init: v3 init
This commit is contained in:
陈凯龙
@@ -1,126 +0,0 @@
|
||||
import { EChartsOption } from 'echarts'
|
||||
|
||||
export const lineOptions: EChartsOption = {
|
||||
xAxis: {
|
||||
data: [
|
||||
'一月',
|
||||
'二月',
|
||||
'三月',
|
||||
'四月',
|
||||
'五月',
|
||||
'六月',
|
||||
'七月',
|
||||
'八月',
|
||||
'九月',
|
||||
'十月',
|
||||
'十一月',
|
||||
'十二月'
|
||||
],
|
||||
boundaryGap: false,
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: 20,
|
||||
right: 20,
|
||||
bottom: 20,
|
||||
top: 30,
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross'
|
||||
},
|
||||
padding: [5, 10]
|
||||
},
|
||||
yAxis: {
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['预期', '实际']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '预期',
|
||||
smooth: true,
|
||||
type: 'line',
|
||||
data: [100, 120, 161, 134, 105, 160, 165, 114, 163, 185, 118, 123],
|
||||
animationDuration: 2800,
|
||||
animationEasing: 'cubicInOut'
|
||||
},
|
||||
{
|
||||
name: '实际',
|
||||
smooth: true,
|
||||
type: 'line',
|
||||
itemStyle: {},
|
||||
data: [120, 82, 91, 154, 162, 140, 145, 250, 134, 56, 99, 123],
|
||||
animationDuration: 2800,
|
||||
animationEasing: 'quadraticOut'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
export const pieOptions: EChartsOption = {
|
||||
title: {
|
||||
text: '用户访问来源',
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left',
|
||||
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '用户访问来源',
|
||||
type: 'pie',
|
||||
radius: '55%',
|
||||
center: ['50%', '60%'],
|
||||
data: [
|
||||
{ value: 335, name: '直接访问' },
|
||||
{ value: 310, name: '邮件营销' },
|
||||
{ value: 234, name: '联盟广告' },
|
||||
{ value: 135, name: '视频广告' },
|
||||
{ value: 1548, name: '搜索引擎' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
export const barOptions: EChartsOption = {
|
||||
title: {
|
||||
text: '每周用户活跃量',
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
||||
axisTick: {
|
||||
alignWithLabel: true
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '活跃量',
|
||||
data: [13253, 34235, 26321, 12340, 24643, 1322, 1324],
|
||||
type: 'bar'
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -1,33 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="10">
|
||||
<div class="chart__wrap">
|
||||
<echart :options="pieOptions" :height="'300px'" />
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="14">
|
||||
<div class="chart__wrap">
|
||||
<echart :options="barOptions" :height="'300px'" />
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="chart__wrap">
|
||||
<echart :options="lineOptions" :height="'300px'" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="Dashboard">
|
||||
import { lineOptions, pieOptions, barOptions } from './echart-data'
|
||||
import Echart from '_c/Echart/index.vue'
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.chart__wrap {
|
||||
padding: 10px;
|
||||
margin-bottom: 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 5px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,12 +0,0 @@
|
||||
<template>
|
||||
<div style="display: flex; padding: 20px; background: #fff; align-items: center">
|
||||
<div style="min-width: 200px">多层级缓存-页面1-1-1：</div>
|
||||
<el-input v-model="value" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="Menu111Demo">
|
||||
import { ref } from 'vue'
|
||||
|
||||
const value = ref<string>('')
|
||||
</script>
|
||||
@@ -1,12 +0,0 @@
|
||||
<template>
|
||||
<div style="display: flex; padding: 20px; background: #fff; align-items: center">
|
||||
<div style="min-width: 200px">多层级缓存-页面1-2：</div>
|
||||
<el-input v-model="value" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="Menu12Demo">
|
||||
import { ref } from 'vue'
|
||||
|
||||
const value = ref<string>('')
|
||||
</script>
|
||||
@@ -1,12 +0,0 @@
|
||||
<template>
|
||||
<div style="display: flex; padding: 20px; background: #fff; align-items: center">
|
||||
<div style="min-width: 200px">多层级缓存-页面2：</div>
|
||||
<el-input v-model="value" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="Menu2Demo">
|
||||
import { ref } from 'vue'
|
||||
|
||||
const value = ref<string>('')
|
||||
</script>
|
||||
@@ -1,194 +0,0 @@
|
||||
<script lang="tsx">
|
||||
import { defineComponent, ref, unref, reactive, watch } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import type { RouteLocationNormalizedLoaded, RouteRecordRaw } from 'vue-router'
|
||||
import { usePermissionStore } from '@/store/modules/permission'
|
||||
import { useAppStore } from '@/store/modules/app'
|
||||
import { ElNotification } from 'element-plus'
|
||||
import { useCache } from '@/hooks/web/useCache'
|
||||
const { wsCache } = useCache()
|
||||
|
||||
interface FormModule {
|
||||
userName: string
|
||||
passWord: string
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Login',
|
||||
setup() {
|
||||
const appStore = useAppStore()
|
||||
const permissionStore = usePermissionStore()
|
||||
const { currentRoute, addRoute, push } = useRouter()
|
||||
const loginForm = ref<Nullable<HTMLElement>>(null)
|
||||
const loading = ref<boolean>(false)
|
||||
const redirect = ref<string>('')
|
||||
const form = reactive<FormModule>({
|
||||
userName: '',
|
||||
passWord: ''
|
||||
})
|
||||
const rules = reactive<IObj>({
|
||||
userName: [{ required: true, message: '请输入账号' }],
|
||||
passWord: [{ required: true, message: '请输入密码' }]
|
||||
})
|
||||
|
||||
watch(
|
||||
() => currentRoute.value,
|
||||
(route: RouteLocationNormalizedLoaded) => {
|
||||
redirect.value = route?.query?.redirect as string
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
)
|
||||
|
||||
async function login(): Promise<void> {
|
||||
const formWrap = unref(loginForm) as any
|
||||
if (!formWrap) return
|
||||
formWrap.validate(async (valid: boolean) => {
|
||||
if (valid) {
|
||||
try {
|
||||
loading.value = true
|
||||
// 模拟登录接口之后返回角色信息
|
||||
wsCache.set(appStore.getUserInfo, form)
|
||||
permissionStore.generateRoutes().then(() => {
|
||||
permissionStore.getAddRouters.forEach(async (route) => {
|
||||
await addRoute(route as RouteRecordRaw) // 动态添加可访问路由表
|
||||
})
|
||||
permissionStore.setIsAddRouters(true)
|
||||
push({ path: redirect.value || '/' })
|
||||
})
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
} else {
|
||||
console.log('error submit!!')
|
||||
return false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
ElNotification({
|
||||
title: '提示',
|
||||
message: '账号 admin 为 前端 控制路由权限，账号 test 为 后端 控制路由权限。密码与账号相同',
|
||||
duration: 60000
|
||||
})
|
||||
|
||||
return () => {
|
||||
return (
|
||||
<div
|
||||
class="login-wrap"
|
||||
onKeydown={(event) => {
|
||||
if (event.code !== 'Enter') return
|
||||
// 停止事件传播
|
||||
event.stopPropagation()
|
||||
// 阻止该元素默认的 keyup 事件
|
||||
event.preventDefault()
|
||||
login()
|
||||
}}
|
||||
>
|
||||
<div class="login-con">
|
||||
<el-card class="box-card">
|
||||
{{
|
||||
header: () => <span class="login--header">登录</span>,
|
||||
default: () => (
|
||||
<el-form ref={loginForm} model={form} rules={rules} class="login-form">
|
||||
<el-form-item prop="userName">
|
||||
<el-input
|
||||
v-model={form.userName}
|
||||
placeholder="请输入账号 admin or test"
|
||||
class="form--input"
|
||||
>
|
||||
{{
|
||||
prefix: () => (
|
||||
<span class="svg-container">
|
||||
<svg-icon icon-class="user" />
|
||||
</span>
|
||||
)
|
||||
}}
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="passWord">
|
||||
<el-input
|
||||
v-model={form.passWord}
|
||||
show-password={true}
|
||||
minlength={3}
|
||||
maxlength={18}
|
||||
placeholder="请输入密码 admin or test"
|
||||
class="form--input"
|
||||
>
|
||||
{{
|
||||
prefix: () => (
|
||||
<span class="svg-container">
|
||||
<svg-icon icon-class="password" />
|
||||
</span>
|
||||
)
|
||||
}}
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
loading={loading.value}
|
||||
type="primary"
|
||||
class="login--button"
|
||||
onClick={login}
|
||||
>
|
||||
登录
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
)
|
||||
}}
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.login-wrap {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url('@/assets/img/login-bg.jpg');
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
|
||||
.box-card {
|
||||
width: 400px;
|
||||
|
||||
.login--header {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.svg-container {
|
||||
display: inline-block;
|
||||
width: 30px;
|
||||
color: #889aa4;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.form--input {
|
||||
width: 100%;
|
||||
|
||||
:deep(.el-input__inner) {
|
||||
padding-left: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.login--button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.login-con {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 160px;
|
||||
transform: translateY(-60%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user