node configure增改接近完成，删除后端还没做
This commit is contained in:
Yu Sun
228
src/views/scada/scadaConfigure/index.vue
Normal file
228
src/views/scada/scadaConfigure/index.vue
Normal file
@@ -0,0 +1,228 @@
|
||||
<template>
|
||||
<d2-container>
|
||||
<d2-crud
|
||||
ref="d2Crud"
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
:rowHandle="rowHandle"
|
||||
add-title="新增节点"
|
||||
edit-title="修改节点信息"
|
||||
:add-template="addTemplate"
|
||||
:edit-template="editTemplate"
|
||||
:form-options="formOptions"
|
||||
:add-rules="addRules"
|
||||
@row-add="handleRowAdd"
|
||||
@row-edit="handleRowEdit"
|
||||
@row-remove="handleRowRemove"
|
||||
@dialog-cancel="handleDialogCancel">
|
||||
<el-button slot="header" style="margin-bottom: 5px" @click="addRow">新增</el-button>
|
||||
</d2-crud>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { assign, each, pickBy, startsWith } from 'lodash'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
columns: [
|
||||
{
|
||||
title: '序号',
|
||||
key: 'id'
|
||||
},
|
||||
{
|
||||
title: '节点编码',
|
||||
key: 'code'
|
||||
},
|
||||
{
|
||||
title: '节点名称',
|
||||
key: 'name'
|
||||
},
|
||||
{
|
||||
title: '类型',
|
||||
key: 'type'
|
||||
},
|
||||
{
|
||||
title: '流程',
|
||||
key: 'flow_code'
|
||||
},
|
||||
{
|
||||
title: '工序编码',
|
||||
key: 'process_code'
|
||||
},
|
||||
{
|
||||
title: '工作站',
|
||||
key: 'workstation'
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
key: 'create_time'
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
key: 'note'
|
||||
}
|
||||
],
|
||||
data: [],
|
||||
rowHandle: {
|
||||
minWidth: '200',
|
||||
edit: {
|
||||
icon: 'el-icon-edit',
|
||||
text: '编辑',
|
||||
size: 'small',
|
||||
show (index, row) {
|
||||
if (row.showEditButton) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
},
|
||||
remove: {
|
||||
icon: 'el-icon-delete',
|
||||
size: 'small',
|
||||
fixed: 'right',
|
||||
confirm: true,
|
||||
show (index, row) {
|
||||
if (row.showRemoveButton) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
}
|
||||
},
|
||||
addTemplate: {
|
||||
code: {
|
||||
title: '节点编码'
|
||||
},
|
||||
name: {
|
||||
title: '节点名称'
|
||||
},
|
||||
type: {
|
||||
title: '类型',
|
||||
value: '',
|
||||
component: {
|
||||
name: 'el-select',
|
||||
options: [
|
||||
{
|
||||
value: 'text',
|
||||
label: '字符串'
|
||||
},
|
||||
{
|
||||
value: 'int',
|
||||
label: '整数'
|
||||
},
|
||||
{
|
||||
value: 'float8',
|
||||
label: '浮点数'
|
||||
},
|
||||
{
|
||||
value: 'bool',
|
||||
label: '逻辑值'
|
||||
}
|
||||
],
|
||||
span: 12
|
||||
}
|
||||
},
|
||||
flow_code: {
|
||||
title: '流程'
|
||||
},
|
||||
process_code: {
|
||||
title: '工序编码'
|
||||
},
|
||||
workstation: {
|
||||
title: '工作站'
|
||||
},
|
||||
note: {
|
||||
title: '备注'
|
||||
}
|
||||
},
|
||||
editTemplate: {
|
||||
name: {
|
||||
title: '节点名称'
|
||||
},
|
||||
flow_code: {
|
||||
title: '流程'
|
||||
},
|
||||
workstation: {
|
||||
title: '工作站'
|
||||
},
|
||||
note: {
|
||||
title: '备注'
|
||||
}
|
||||
},
|
||||
formOptions: {
|
||||
labelWidth: '80px',
|
||||
labelPosition: 'left',
|
||||
saveLoading: false
|
||||
},
|
||||
addRules: {
|
||||
code: [{ required: true, type: 'string', message: '节点编码必须填写', trigger: 'blur' }],
|
||||
name: [{ required: true, type: 'string', message: '节点名称必须填写', trigger: 'blur' }],
|
||||
type: [{ required: true, message: '必须指定节点类型', trigger: 'blur' }],
|
||||
process_code: [{ required: true, type: 'string', message: '工序编码必须填写', trigger: 'blur' }]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async getNodes () {
|
||||
try {
|
||||
const res = await this.$api.QUERY_NODE()
|
||||
this.data = each(res, (o) => (
|
||||
assign(o, {
|
||||
showEditButton: true,
|
||||
showRemoveButton: true
|
||||
})
|
||||
))
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
}
|
||||
},
|
||||
// 普通的新增
|
||||
addRow () {
|
||||
this.$refs.d2Crud.showDialog({
|
||||
mode: 'add'
|
||||
})
|
||||
},
|
||||
async handleRowAdd (row) {
|
||||
this.formOptions.saveLoading = true
|
||||
await this.$api.ADD_NODE(assign(row, { action: 'add_node' }))
|
||||
this.$message({
|
||||
message: '添加成功',
|
||||
type: 'success'
|
||||
})
|
||||
this.formOptions.saveLoading = false
|
||||
},
|
||||
async handleRowEdit ({ index, row }) {
|
||||
this.formOptions.saveLoading = true
|
||||
await this.$api.UPDATE_NODE(assign(pickBy(row, (v, k) => (!startsWith(k, 'show'))), { action: 'update_node' }))
|
||||
this.$message({
|
||||
message: '编辑成功',
|
||||
type: 'success'
|
||||
})
|
||||
this.formOptions.saveLoading = false
|
||||
},
|
||||
handleRowRemove ({ index, row }, done) {
|
||||
setTimeout(() => {
|
||||
console.log(index)
|
||||
console.log(row)
|
||||
this.$message({
|
||||
message: '删除成功',
|
||||
type: 'success'
|
||||
})
|
||||
done()
|
||||
}, 300)
|
||||
},
|
||||
handleDialogCancel (done) {
|
||||
this.$message({
|
||||
message: '取消保存',
|
||||
type: 'warning'
|
||||
})
|
||||
done()
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.getNodes()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
0
src/views/scada/scadaQuery/index.vue
Normal file
0
src/views/scada/scadaQuery/index.vue
Normal file
24
src/views/system/error/404/index.vue
Normal file
24
src/views/system/error/404/index.vue
Normal file
@@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<p class="page_title">404 page not found</p>
|
||||
<el-button class="d2-mt" @click="$router.replace({ path: '/' })">
|
||||
返回首页
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page {
|
||||
background: #303133;
|
||||
background-blend-mode: multiply,multiply;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
.page_title {
|
||||
font-size: 20px;
|
||||
color: #FFF;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
6
src/views/system/function/redirect/index.js
Normal file
6
src/views/system/function/redirect/index.js
Normal file
@@ -0,0 +1,6 @@
|
||||
export default {
|
||||
beforeRouteEnter (to, from, next) {
|
||||
next(instance => instance.$router.replace(JSON.parse(from.params.route)))
|
||||
},
|
||||
render: h => h()
|
||||
}
|
||||
7
src/views/system/function/refresh/index.js
Normal file
7
src/views/system/function/refresh/index.js
Normal file
@@ -0,0 +1,7 @@
|
||||
export default {
|
||||
beforeRouteEnter (to, from, next) {
|
||||
from.meta[`__stamp-${from.path}`] = Date.now()
|
||||
next(instance => instance.$router.replace({ path: from.fullPath, meta: from.meta }))
|
||||
},
|
||||
render: h => h()
|
||||
}
|
||||
57
src/views/system/index/components/d2-badge/index.vue
Normal file
57
src/views/system/index/components/d2-badge/index.vue
Normal file
@@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<div class="d2-badge">
|
||||
<p v-for="(group, groupIndex) of badges" :key="groupIndex" align="center">
|
||||
<a v-for="(badge, badgeIndex) of group" :key="badgeIndex" :href="badge.link" target="_blank">
|
||||
<img :src="badge.img"/>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const linkD2Admin = 'https://github.com/d2-projects/d2-admin'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
badges: [
|
||||
[
|
||||
{ img: 'https://img.shields.io/github/stars/d2-projects/d2-admin.svg', link: `${linkD2Admin}/stargazers` },
|
||||
{ img: 'https://img.shields.io/github/forks/d2-projects/d2-admin.svg', link: `${linkD2Admin}/network/members` },
|
||||
{ img: 'https://img.shields.io/github/issues/d2-projects/d2-admin.svg', link: `${linkD2Admin}/issues` },
|
||||
{ img: 'https://img.shields.io/github/issues-closed/d2-projects/d2-admin.svg', link: `${linkD2Admin}/issues?q=is%3Aissue+is%3Aclosed` },
|
||||
{ img: 'https://img.shields.io/github/issues-pr/d2-projects/d2-admin.svg', link: `${linkD2Admin}/pulls` },
|
||||
{ img: 'https://img.shields.io/github/issues-pr-closed/d2-projects/d2-admin.svg', link: `${linkD2Admin}/pulls?q=is%3Apr+is%3Aclosed` },
|
||||
{ img: 'https://img.shields.io/github/last-commit/d2-projects/d2-admin.svg', link: linkD2Admin }
|
||||
],
|
||||
[
|
||||
{ img: 'https://github.com/d2-projects/d2-admin/workflows/Deploy%20https%3A%2F%2Fd2.pub/badge.svg', link: `${linkD2Admin}/actions?query=workflow%3A%22Deploy+https%3A%2F%2Fd2.pub%22` },
|
||||
{ img: 'https://github.com/d2-projects/d2-admin/workflows/Deploy%20https%3A%2F%2Fcdn.d2.pub/badge.svg', link: `${linkD2Admin}/actions?query=workflow%3A%22Deploy+https%3A%2F%2Fcdn.d2.pub%22` },
|
||||
{ img: 'https://github.com/d2-projects/d2-admin/workflows/Deploy%20Github/badge.svg', link: `${linkD2Admin}/actions?query=workflow%3A%22Deploy+Github%22` },
|
||||
{ img: 'https://api.netlify.com/api/v1/badges/a5dd4bbd-da3f-4145-98a9-8012577bdcf5/deploy-status', link: 'https://app.netlify.com/sites/d2-admin/deploys' }
|
||||
],
|
||||
[
|
||||
{ img: 'https://visitor-badge.glitch.me/badge?page_id=d2-projects.d2-admin', link: linkD2Admin },
|
||||
{ img: 'https://img.shields.io/github/release/d2-projects/d2-admin.svg', link: `${linkD2Admin}/releases` }
|
||||
]
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.d2-badge {
|
||||
margin-bottom: 20px;
|
||||
p {
|
||||
margin: 0px;
|
||||
margin-bottom: 2px;
|
||||
&:last-child {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
img {
|
||||
display: inline-block;
|
||||
margin: 0px 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
2162
src/views/system/index/components/d2-help/image/qq.svg
Normal file
2162
src/views/system/index/components/d2-help/image/qq.svg
Normal file
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 84 KiB |
707
src/views/system/index/components/d2-help/image/we.svg
Normal file
707
src/views/system/index/components/d2-help/image/we.svg
Normal file
@@ -0,0 +1,707 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" width="468" height="468" viewBox="0 0 468 468">
|
||||
<desc></desc>
|
||||
<rect width="468" height="468" fill="#ffffff" cx="0" cy="0" />
|
||||
<defs>
|
||||
<rect id="p" width="12" height="12" />
|
||||
</defs>
|
||||
<g fill="#000000">
|
||||
<use x="12" y="12" xlink:href="#p" />
|
||||
<use x="24" y="12" xlink:href="#p" />
|
||||
<use x="36" y="12" xlink:href="#p" />
|
||||
<use x="48" y="12" xlink:href="#p" />
|
||||
<use x="60" y="12" xlink:href="#p" />
|
||||
<use x="72" y="12" xlink:href="#p" />
|
||||
<use x="84" y="12" xlink:href="#p" />
|
||||
<use x="108" y="12" xlink:href="#p" />
|
||||
<use x="144" y="12" xlink:href="#p" />
|
||||
<use x="156" y="12" xlink:href="#p" />
|
||||
<use x="180" y="12" xlink:href="#p" />
|
||||
<use x="204" y="12" xlink:href="#p" />
|
||||
<use x="240" y="12" xlink:href="#p" />
|
||||
<use x="264" y="12" xlink:href="#p" />
|
||||
<use x="276" y="12" xlink:href="#p" />
|
||||
<use x="288" y="12" xlink:href="#p" />
|
||||
<use x="300" y="12" xlink:href="#p" />
|
||||
<use x="348" y="12" xlink:href="#p" />
|
||||
<use x="372" y="12" xlink:href="#p" />
|
||||
<use x="384" y="12" xlink:href="#p" />
|
||||
<use x="396" y="12" xlink:href="#p" />
|
||||
<use x="408" y="12" xlink:href="#p" />
|
||||
<use x="420" y="12" xlink:href="#p" />
|
||||
<use x="432" y="12" xlink:href="#p" />
|
||||
<use x="444" y="12" xlink:href="#p" />
|
||||
<use x="12" y="24" xlink:href="#p" />
|
||||
<use x="84" y="24" xlink:href="#p" />
|
||||
<use x="108" y="24" xlink:href="#p" />
|
||||
<use x="132" y="24" xlink:href="#p" />
|
||||
<use x="144" y="24" xlink:href="#p" />
|
||||
<use x="168" y="24" xlink:href="#p" />
|
||||
<use x="192" y="24" xlink:href="#p" />
|
||||
<use x="216" y="24" xlink:href="#p" />
|
||||
<use x="228" y="24" xlink:href="#p" />
|
||||
<use x="240" y="24" xlink:href="#p" />
|
||||
<use x="264" y="24" xlink:href="#p" />
|
||||
<use x="276" y="24" xlink:href="#p" />
|
||||
<use x="336" y="24" xlink:href="#p" />
|
||||
<use x="348" y="24" xlink:href="#p" />
|
||||
<use x="372" y="24" xlink:href="#p" />
|
||||
<use x="444" y="24" xlink:href="#p" />
|
||||
<use x="12" y="36" xlink:href="#p" />
|
||||
<use x="36" y="36" xlink:href="#p" />
|
||||
<use x="48" y="36" xlink:href="#p" />
|
||||
<use x="60" y="36" xlink:href="#p" />
|
||||
<use x="84" y="36" xlink:href="#p" />
|
||||
<use x="108" y="36" xlink:href="#p" />
|
||||
<use x="120" y="36" xlink:href="#p" />
|
||||
<use x="180" y="36" xlink:href="#p" />
|
||||
<use x="192" y="36" xlink:href="#p" />
|
||||
<use x="204" y="36" xlink:href="#p" />
|
||||
<use x="216" y="36" xlink:href="#p" />
|
||||
<use x="240" y="36" xlink:href="#p" />
|
||||
<use x="252" y="36" xlink:href="#p" />
|
||||
<use x="264" y="36" xlink:href="#p" />
|
||||
<use x="276" y="36" xlink:href="#p" />
|
||||
<use x="324" y="36" xlink:href="#p" />
|
||||
<use x="372" y="36" xlink:href="#p" />
|
||||
<use x="396" y="36" xlink:href="#p" />
|
||||
<use x="408" y="36" xlink:href="#p" />
|
||||
<use x="420" y="36" xlink:href="#p" />
|
||||
<use x="444" y="36" xlink:href="#p" />
|
||||
<use x="12" y="48" xlink:href="#p" />
|
||||
<use x="36" y="48" xlink:href="#p" />
|
||||
<use x="48" y="48" xlink:href="#p" />
|
||||
<use x="60" y="48" xlink:href="#p" />
|
||||
<use x="84" y="48" xlink:href="#p" />
|
||||
<use x="120" y="48" xlink:href="#p" />
|
||||
<use x="144" y="48" xlink:href="#p" />
|
||||
<use x="168" y="48" xlink:href="#p" />
|
||||
<use x="192" y="48" xlink:href="#p" />
|
||||
<use x="204" y="48" xlink:href="#p" />
|
||||
<use x="216" y="48" xlink:href="#p" />
|
||||
<use x="288" y="48" xlink:href="#p" />
|
||||
<use x="300" y="48" xlink:href="#p" />
|
||||
<use x="312" y="48" xlink:href="#p" />
|
||||
<use x="324" y="48" xlink:href="#p" />
|
||||
<use x="336" y="48" xlink:href="#p" />
|
||||
<use x="372" y="48" xlink:href="#p" />
|
||||
<use x="396" y="48" xlink:href="#p" />
|
||||
<use x="408" y="48" xlink:href="#p" />
|
||||
<use x="420" y="48" xlink:href="#p" />
|
||||
<use x="444" y="48" xlink:href="#p" />
|
||||
<use x="12" y="60" xlink:href="#p" />
|
||||
<use x="36" y="60" xlink:href="#p" />
|
||||
<use x="48" y="60" xlink:href="#p" />
|
||||
<use x="60" y="60" xlink:href="#p" />
|
||||
<use x="84" y="60" xlink:href="#p" />
|
||||
<use x="132" y="60" xlink:href="#p" />
|
||||
<use x="144" y="60" xlink:href="#p" />
|
||||
<use x="156" y="60" xlink:href="#p" />
|
||||
<use x="168" y="60" xlink:href="#p" />
|
||||
<use x="180" y="60" xlink:href="#p" />
|
||||
<use x="192" y="60" xlink:href="#p" />
|
||||
<use x="204" y="60" xlink:href="#p" />
|
||||
<use x="240" y="60" xlink:href="#p" />
|
||||
<use x="276" y="60" xlink:href="#p" />
|
||||
<use x="300" y="60" xlink:href="#p" />
|
||||
<use x="324" y="60" xlink:href="#p" />
|
||||
<use x="372" y="60" xlink:href="#p" />
|
||||
<use x="396" y="60" xlink:href="#p" />
|
||||
<use x="408" y="60" xlink:href="#p" />
|
||||
<use x="420" y="60" xlink:href="#p" />
|
||||
<use x="444" y="60" xlink:href="#p" />
|
||||
<use x="12" y="72" xlink:href="#p" />
|
||||
<use x="84" y="72" xlink:href="#p" />
|
||||
<use x="108" y="72" xlink:href="#p" />
|
||||
<use x="168" y="72" xlink:href="#p" />
|
||||
<use x="180" y="72" xlink:href="#p" />
|
||||
<use x="192" y="72" xlink:href="#p" />
|
||||
<use x="228" y="72" xlink:href="#p" />
|
||||
<use x="264" y="72" xlink:href="#p" />
|
||||
<use x="288" y="72" xlink:href="#p" />
|
||||
<use x="300" y="72" xlink:href="#p" />
|
||||
<use x="324" y="72" xlink:href="#p" />
|
||||
<use x="336" y="72" xlink:href="#p" />
|
||||
<use x="348" y="72" xlink:href="#p" />
|
||||
<use x="372" y="72" xlink:href="#p" />
|
||||
<use x="444" y="72" xlink:href="#p" />
|
||||
<use x="12" y="84" xlink:href="#p" />
|
||||
<use x="24" y="84" xlink:href="#p" />
|
||||
<use x="36" y="84" xlink:href="#p" />
|
||||
<use x="48" y="84" xlink:href="#p" />
|
||||
<use x="60" y="84" xlink:href="#p" />
|
||||
<use x="72" y="84" xlink:href="#p" />
|
||||
<use x="84" y="84" xlink:href="#p" />
|
||||
<use x="108" y="84" xlink:href="#p" />
|
||||
<use x="132" y="84" xlink:href="#p" />
|
||||
<use x="156" y="84" xlink:href="#p" />
|
||||
<use x="180" y="84" xlink:href="#p" />
|
||||
<use x="204" y="84" xlink:href="#p" />
|
||||
<use x="228" y="84" xlink:href="#p" />
|
||||
<use x="252" y="84" xlink:href="#p" />
|
||||
<use x="276" y="84" xlink:href="#p" />
|
||||
<use x="300" y="84" xlink:href="#p" />
|
||||
<use x="324" y="84" xlink:href="#p" />
|
||||
<use x="348" y="84" xlink:href="#p" />
|
||||
<use x="372" y="84" xlink:href="#p" />
|
||||
<use x="384" y="84" xlink:href="#p" />
|
||||
<use x="396" y="84" xlink:href="#p" />
|
||||
<use x="408" y="84" xlink:href="#p" />
|
||||
<use x="420" y="84" xlink:href="#p" />
|
||||
<use x="432" y="84" xlink:href="#p" />
|
||||
<use x="444" y="84" xlink:href="#p" />
|
||||
<use x="108" y="96" xlink:href="#p" />
|
||||
<use x="180" y="96" xlink:href="#p" />
|
||||
<use x="192" y="96" xlink:href="#p" />
|
||||
<use x="216" y="96" xlink:href="#p" />
|
||||
<use x="240" y="96" xlink:href="#p" />
|
||||
<use x="276" y="96" xlink:href="#p" />
|
||||
<use x="300" y="96" xlink:href="#p" />
|
||||
<use x="312" y="96" xlink:href="#p" />
|
||||
<use x="348" y="96" xlink:href="#p" />
|
||||
<use x="36" y="108" xlink:href="#p" />
|
||||
<use x="48" y="108" xlink:href="#p" />
|
||||
<use x="60" y="108" xlink:href="#p" />
|
||||
<use x="84" y="108" xlink:href="#p" />
|
||||
<use x="108" y="108" xlink:href="#p" />
|
||||
<use x="120" y="108" xlink:href="#p" />
|
||||
<use x="144" y="108" xlink:href="#p" />
|
||||
<use x="180" y="108" xlink:href="#p" />
|
||||
<use x="192" y="108" xlink:href="#p" />
|
||||
<use x="204" y="108" xlink:href="#p" />
|
||||
<use x="228" y="108" xlink:href="#p" />
|
||||
<use x="276" y="108" xlink:href="#p" />
|
||||
<use x="312" y="108" xlink:href="#p" />
|
||||
<use x="324" y="108" xlink:href="#p" />
|
||||
<use x="348" y="108" xlink:href="#p" />
|
||||
<use x="360" y="108" xlink:href="#p" />
|
||||
<use x="372" y="108" xlink:href="#p" />
|
||||
<use x="384" y="108" xlink:href="#p" />
|
||||
<use x="420" y="108" xlink:href="#p" />
|
||||
<use x="432" y="108" xlink:href="#p" />
|
||||
<use x="444" y="108" xlink:href="#p" />
|
||||
<use x="24" y="120" xlink:href="#p" />
|
||||
<use x="36" y="120" xlink:href="#p" />
|
||||
<use x="72" y="120" xlink:href="#p" />
|
||||
<use x="168" y="120" xlink:href="#p" />
|
||||
<use x="204" y="120" xlink:href="#p" />
|
||||
<use x="252" y="120" xlink:href="#p" />
|
||||
<use x="276" y="120" xlink:href="#p" />
|
||||
<use x="288" y="120" xlink:href="#p" />
|
||||
<use x="300" y="120" xlink:href="#p" />
|
||||
<use x="312" y="120" xlink:href="#p" />
|
||||
<use x="336" y="120" xlink:href="#p" />
|
||||
<use x="348" y="120" xlink:href="#p" />
|
||||
<use x="444" y="120" xlink:href="#p" />
|
||||
<use x="36" y="132" xlink:href="#p" />
|
||||
<use x="84" y="132" xlink:href="#p" />
|
||||
<use x="108" y="132" xlink:href="#p" />
|
||||
<use x="120" y="132" xlink:href="#p" />
|
||||
<use x="132" y="132" xlink:href="#p" />
|
||||
<use x="144" y="132" xlink:href="#p" />
|
||||
<use x="180" y="132" xlink:href="#p" />
|
||||
<use x="192" y="132" xlink:href="#p" />
|
||||
<use x="204" y="132" xlink:href="#p" />
|
||||
<use x="216" y="132" xlink:href="#p" />
|
||||
<use x="228" y="132" xlink:href="#p" />
|
||||
<use x="252" y="132" xlink:href="#p" />
|
||||
<use x="312" y="132" xlink:href="#p" />
|
||||
<use x="324" y="132" xlink:href="#p" />
|
||||
<use x="336" y="132" xlink:href="#p" />
|
||||
<use x="372" y="132" xlink:href="#p" />
|
||||
<use x="384" y="132" xlink:href="#p" />
|
||||
<use x="396" y="132" xlink:href="#p" />
|
||||
<use x="420" y="132" xlink:href="#p" />
|
||||
<use x="432" y="132" xlink:href="#p" />
|
||||
<use x="444" y="132" xlink:href="#p" />
|
||||
<use x="48" y="144" xlink:href="#p" />
|
||||
<use x="120" y="144" xlink:href="#p" />
|
||||
<use x="156" y="144" xlink:href="#p" />
|
||||
<use x="180" y="144" xlink:href="#p" />
|
||||
<use x="216" y="144" xlink:href="#p" />
|
||||
<use x="228" y="144" xlink:href="#p" />
|
||||
<use x="240" y="144" xlink:href="#p" />
|
||||
<use x="264" y="144" xlink:href="#p" />
|
||||
<use x="276" y="144" xlink:href="#p" />
|
||||
<use x="288" y="144" xlink:href="#p" />
|
||||
<use x="324" y="144" xlink:href="#p" />
|
||||
<use x="336" y="144" xlink:href="#p" />
|
||||
<use x="372" y="144" xlink:href="#p" />
|
||||
<use x="384" y="144" xlink:href="#p" />
|
||||
<use x="396" y="144" xlink:href="#p" />
|
||||
<use x="432" y="144" xlink:href="#p" />
|
||||
<use x="444" y="144" xlink:href="#p" />
|
||||
<use x="24" y="156" xlink:href="#p" />
|
||||
<use x="36" y="156" xlink:href="#p" />
|
||||
<use x="60" y="156" xlink:href="#p" />
|
||||
<use x="84" y="156" xlink:href="#p" />
|
||||
<use x="168" y="156" xlink:href="#p" />
|
||||
<use x="192" y="156" xlink:href="#p" />
|
||||
<use x="204" y="156" xlink:href="#p" />
|
||||
<use x="240" y="156" xlink:href="#p" />
|
||||
<use x="264" y="156" xlink:href="#p" />
|
||||
<use x="300" y="156" xlink:href="#p" />
|
||||
<use x="312" y="156" xlink:href="#p" />
|
||||
<use x="324" y="156" xlink:href="#p" />
|
||||
<use x="360" y="156" xlink:href="#p" />
|
||||
<use x="372" y="156" xlink:href="#p" />
|
||||
<use x="384" y="156" xlink:href="#p" />
|
||||
<use x="396" y="156" xlink:href="#p" />
|
||||
<use x="408" y="156" xlink:href="#p" />
|
||||
<use x="420" y="156" xlink:href="#p" />
|
||||
<use x="432" y="156" xlink:href="#p" />
|
||||
<use x="444" y="156" xlink:href="#p" />
|
||||
<use x="24" y="168" xlink:href="#p" />
|
||||
<use x="36" y="168" xlink:href="#p" />
|
||||
<use x="48" y="168" xlink:href="#p" />
|
||||
<use x="60" y="168" xlink:href="#p" />
|
||||
<use x="96" y="168" xlink:href="#p" />
|
||||
<use x="120" y="168" xlink:href="#p" />
|
||||
<use x="192" y="168" xlink:href="#p" />
|
||||
<use x="216" y="168" xlink:href="#p" />
|
||||
<use x="228" y="168" xlink:href="#p" />
|
||||
<use x="240" y="168" xlink:href="#p" />
|
||||
<use x="252" y="168" xlink:href="#p" />
|
||||
<use x="312" y="168" xlink:href="#p" />
|
||||
<use x="324" y="168" xlink:href="#p" />
|
||||
<use x="336" y="168" xlink:href="#p" />
|
||||
<use x="348" y="168" xlink:href="#p" />
|
||||
<use x="360" y="168" xlink:href="#p" />
|
||||
<use x="384" y="168" xlink:href="#p" />
|
||||
<use x="408" y="168" xlink:href="#p" />
|
||||
<use x="420" y="168" xlink:href="#p" />
|
||||
<use x="12" y="180" xlink:href="#p" />
|
||||
<use x="36" y="180" xlink:href="#p" />
|
||||
<use x="84" y="180" xlink:href="#p" />
|
||||
<use x="96" y="180" xlink:href="#p" />
|
||||
<use x="108" y="180" xlink:href="#p" />
|
||||
<use x="120" y="180" xlink:href="#p" />
|
||||
<use x="132" y="180" xlink:href="#p" />
|
||||
<use x="144" y="180" xlink:href="#p" />
|
||||
<use x="168" y="180" xlink:href="#p" />
|
||||
<use x="180" y="180" xlink:href="#p" />
|
||||
<use x="192" y="180" xlink:href="#p" />
|
||||
<use x="204" y="180" xlink:href="#p" />
|
||||
<use x="228" y="180" xlink:href="#p" />
|
||||
<use x="240" y="180" xlink:href="#p" />
|
||||
<use x="252" y="180" xlink:href="#p" />
|
||||
<use x="264" y="180" xlink:href="#p" />
|
||||
<use x="276" y="180" xlink:href="#p" />
|
||||
<use x="288" y="180" xlink:href="#p" />
|
||||
<use x="300" y="180" xlink:href="#p" />
|
||||
<use x="312" y="180" xlink:href="#p" />
|
||||
<use x="324" y="180" xlink:href="#p" />
|
||||
<use x="336" y="180" xlink:href="#p" />
|
||||
<use x="348" y="180" xlink:href="#p" />
|
||||
<use x="372" y="180" xlink:href="#p" />
|
||||
<use x="408" y="180" xlink:href="#p" />
|
||||
<use x="432" y="180" xlink:href="#p" />
|
||||
<use x="444" y="180" xlink:href="#p" />
|
||||
<use x="12" y="192" xlink:href="#p" />
|
||||
<use x="24" y="192" xlink:href="#p" />
|
||||
<use x="60" y="192" xlink:href="#p" />
|
||||
<use x="96" y="192" xlink:href="#p" />
|
||||
<use x="108" y="192" xlink:href="#p" />
|
||||
<use x="120" y="192" xlink:href="#p" />
|
||||
<use x="156" y="192" xlink:href="#p" />
|
||||
<use x="180" y="192" xlink:href="#p" />
|
||||
<use x="192" y="192" xlink:href="#p" />
|
||||
<use x="204" y="192" xlink:href="#p" />
|
||||
<use x="216" y="192" xlink:href="#p" />
|
||||
<use x="228" y="192" xlink:href="#p" />
|
||||
<use x="288" y="192" xlink:href="#p" />
|
||||
<use x="300" y="192" xlink:href="#p" />
|
||||
<use x="324" y="192" xlink:href="#p" />
|
||||
<use x="360" y="192" xlink:href="#p" />
|
||||
<use x="372" y="192" xlink:href="#p" />
|
||||
<use x="384" y="192" xlink:href="#p" />
|
||||
<use x="396" y="192" xlink:href="#p" />
|
||||
<use x="432" y="192" xlink:href="#p" />
|
||||
<use x="72" y="204" xlink:href="#p" />
|
||||
<use x="84" y="204" xlink:href="#p" />
|
||||
<use x="132" y="204" xlink:href="#p" />
|
||||
<use x="144" y="204" xlink:href="#p" />
|
||||
<use x="156" y="204" xlink:href="#p" />
|
||||
<use x="180" y="204" xlink:href="#p" />
|
||||
<use x="216" y="204" xlink:href="#p" />
|
||||
<use x="240" y="204" xlink:href="#p" />
|
||||
<use x="264" y="204" xlink:href="#p" />
|
||||
<use x="276" y="204" xlink:href="#p" />
|
||||
<use x="300" y="204" xlink:href="#p" />
|
||||
<use x="312" y="204" xlink:href="#p" />
|
||||
<use x="324" y="204" xlink:href="#p" />
|
||||
<use x="360" y="204" xlink:href="#p" />
|
||||
<use x="372" y="204" xlink:href="#p" />
|
||||
<use x="396" y="204" xlink:href="#p" />
|
||||
<use x="420" y="204" xlink:href="#p" />
|
||||
<use x="432" y="204" xlink:href="#p" />
|
||||
<use x="444" y="204" xlink:href="#p" />
|
||||
<use x="24" y="216" xlink:href="#p" />
|
||||
<use x="36" y="216" xlink:href="#p" />
|
||||
<use x="48" y="216" xlink:href="#p" />
|
||||
<use x="72" y="216" xlink:href="#p" />
|
||||
<use x="120" y="216" xlink:href="#p" />
|
||||
<use x="168" y="216" xlink:href="#p" />
|
||||
<use x="180" y="216" xlink:href="#p" />
|
||||
<use x="192" y="216" xlink:href="#p" />
|
||||
<use x="276" y="216" xlink:href="#p" />
|
||||
<use x="288" y="216" xlink:href="#p" />
|
||||
<use x="348" y="216" xlink:href="#p" />
|
||||
<use x="360" y="216" xlink:href="#p" />
|
||||
<use x="384" y="216" xlink:href="#p" />
|
||||
<use x="12" y="228" xlink:href="#p" />
|
||||
<use x="24" y="228" xlink:href="#p" />
|
||||
<use x="36" y="228" xlink:href="#p" />
|
||||
<use x="60" y="228" xlink:href="#p" />
|
||||
<use x="84" y="228" xlink:href="#p" />
|
||||
<use x="96" y="228" xlink:href="#p" />
|
||||
<use x="132" y="228" xlink:href="#p" />
|
||||
<use x="156" y="228" xlink:href="#p" />
|
||||
<use x="168" y="228" xlink:href="#p" />
|
||||
<use x="180" y="228" xlink:href="#p" />
|
||||
<use x="204" y="228" xlink:href="#p" />
|
||||
<use x="228" y="228" xlink:href="#p" />
|
||||
<use x="252" y="228" xlink:href="#p" />
|
||||
<use x="264" y="228" xlink:href="#p" />
|
||||
<use x="276" y="228" xlink:href="#p" />
|
||||
<use x="288" y="228" xlink:href="#p" />
|
||||
<use x="312" y="228" xlink:href="#p" />
|
||||
<use x="336" y="228" xlink:href="#p" />
|
||||
<use x="432" y="228" xlink:href="#p" />
|
||||
<use x="444" y="228" xlink:href="#p" />
|
||||
<use x="24" y="240" xlink:href="#p" />
|
||||
<use x="48" y="240" xlink:href="#p" />
|
||||
<use x="60" y="240" xlink:href="#p" />
|
||||
<use x="108" y="240" xlink:href="#p" />
|
||||
<use x="120" y="240" xlink:href="#p" />
|
||||
<use x="168" y="240" xlink:href="#p" />
|
||||
<use x="180" y="240" xlink:href="#p" />
|
||||
<use x="192" y="240" xlink:href="#p" />
|
||||
<use x="264" y="240" xlink:href="#p" />
|
||||
<use x="276" y="240" xlink:href="#p" />
|
||||
<use x="300" y="240" xlink:href="#p" />
|
||||
<use x="324" y="240" xlink:href="#p" />
|
||||
<use x="348" y="240" xlink:href="#p" />
|
||||
<use x="396" y="240" xlink:href="#p" />
|
||||
<use x="432" y="240" xlink:href="#p" />
|
||||
<use x="444" y="240" xlink:href="#p" />
|
||||
<use x="12" y="252" xlink:href="#p" />
|
||||
<use x="24" y="252" xlink:href="#p" />
|
||||
<use x="72" y="252" xlink:href="#p" />
|
||||
<use x="84" y="252" xlink:href="#p" />
|
||||
<use x="108" y="252" xlink:href="#p" />
|
||||
<use x="120" y="252" xlink:href="#p" />
|
||||
<use x="132" y="252" xlink:href="#p" />
|
||||
<use x="144" y="252" xlink:href="#p" />
|
||||
<use x="156" y="252" xlink:href="#p" />
|
||||
<use x="168" y="252" xlink:href="#p" />
|
||||
<use x="216" y="252" xlink:href="#p" />
|
||||
<use x="252" y="252" xlink:href="#p" />
|
||||
<use x="264" y="252" xlink:href="#p" />
|
||||
<use x="288" y="252" xlink:href="#p" />
|
||||
<use x="300" y="252" xlink:href="#p" />
|
||||
<use x="324" y="252" xlink:href="#p" />
|
||||
<use x="360" y="252" xlink:href="#p" />
|
||||
<use x="372" y="252" xlink:href="#p" />
|
||||
<use x="384" y="252" xlink:href="#p" />
|
||||
<use x="396" y="252" xlink:href="#p" />
|
||||
<use x="408" y="252" xlink:href="#p" />
|
||||
<use x="420" y="252" xlink:href="#p" />
|
||||
<use x="432" y="252" xlink:href="#p" />
|
||||
<use x="444" y="252" xlink:href="#p" />
|
||||
<use x="12" y="264" xlink:href="#p" />
|
||||
<use x="48" y="264" xlink:href="#p" />
|
||||
<use x="60" y="264" xlink:href="#p" />
|
||||
<use x="72" y="264" xlink:href="#p" />
|
||||
<use x="96" y="264" xlink:href="#p" />
|
||||
<use x="120" y="264" xlink:href="#p" />
|
||||
<use x="180" y="264" xlink:href="#p" />
|
||||
<use x="192" y="264" xlink:href="#p" />
|
||||
<use x="204" y="264" xlink:href="#p" />
|
||||
<use x="216" y="264" xlink:href="#p" />
|
||||
<use x="228" y="264" xlink:href="#p" />
|
||||
<use x="252" y="264" xlink:href="#p" />
|
||||
<use x="276" y="264" xlink:href="#p" />
|
||||
<use x="360" y="264" xlink:href="#p" />
|
||||
<use x="384" y="264" xlink:href="#p" />
|
||||
<use x="432" y="264" xlink:href="#p" />
|
||||
<use x="12" y="276" xlink:href="#p" />
|
||||
<use x="24" y="276" xlink:href="#p" />
|
||||
<use x="60" y="276" xlink:href="#p" />
|
||||
<use x="72" y="276" xlink:href="#p" />
|
||||
<use x="84" y="276" xlink:href="#p" />
|
||||
<use x="144" y="276" xlink:href="#p" />
|
||||
<use x="156" y="276" xlink:href="#p" />
|
||||
<use x="192" y="276" xlink:href="#p" />
|
||||
<use x="216" y="276" xlink:href="#p" />
|
||||
<use x="228" y="276" xlink:href="#p" />
|
||||
<use x="240" y="276" xlink:href="#p" />
|
||||
<use x="252" y="276" xlink:href="#p" />
|
||||
<use x="288" y="276" xlink:href="#p" />
|
||||
<use x="312" y="276" xlink:href="#p" />
|
||||
<use x="324" y="276" xlink:href="#p" />
|
||||
<use x="336" y="276" xlink:href="#p" />
|
||||
<use x="372" y="276" xlink:href="#p" />
|
||||
<use x="444" y="276" xlink:href="#p" />
|
||||
<use x="48" y="288" xlink:href="#p" />
|
||||
<use x="60" y="288" xlink:href="#p" />
|
||||
<use x="96" y="288" xlink:href="#p" />
|
||||
<use x="132" y="288" xlink:href="#p" />
|
||||
<use x="144" y="288" xlink:href="#p" />
|
||||
<use x="168" y="288" xlink:href="#p" />
|
||||
<use x="192" y="288" xlink:href="#p" />
|
||||
<use x="216" y="288" xlink:href="#p" />
|
||||
<use x="372" y="288" xlink:href="#p" />
|
||||
<use x="384" y="288" xlink:href="#p" />
|
||||
<use x="432" y="288" xlink:href="#p" />
|
||||
<use x="444" y="288" xlink:href="#p" />
|
||||
<use x="12" y="300" xlink:href="#p" />
|
||||
<use x="36" y="300" xlink:href="#p" />
|
||||
<use x="48" y="300" xlink:href="#p" />
|
||||
<use x="84" y="300" xlink:href="#p" />
|
||||
<use x="96" y="300" xlink:href="#p" />
|
||||
<use x="108" y="300" xlink:href="#p" />
|
||||
<use x="132" y="300" xlink:href="#p" />
|
||||
<use x="144" y="300" xlink:href="#p" />
|
||||
<use x="216" y="300" xlink:href="#p" />
|
||||
<use x="228" y="300" xlink:href="#p" />
|
||||
<use x="240" y="300" xlink:href="#p" />
|
||||
<use x="252" y="300" xlink:href="#p" />
|
||||
<use x="264" y="300" xlink:href="#p" />
|
||||
<use x="300" y="300" xlink:href="#p" />
|
||||
<use x="312" y="300" xlink:href="#p" />
|
||||
<use x="324" y="300" xlink:href="#p" />
|
||||
<use x="348" y="300" xlink:href="#p" />
|
||||
<use x="372" y="300" xlink:href="#p" />
|
||||
<use x="396" y="300" xlink:href="#p" />
|
||||
<use x="420" y="300" xlink:href="#p" />
|
||||
<use x="444" y="300" xlink:href="#p" />
|
||||
<use x="12" y="312" xlink:href="#p" />
|
||||
<use x="24" y="312" xlink:href="#p" />
|
||||
<use x="72" y="312" xlink:href="#p" />
|
||||
<use x="108" y="312" xlink:href="#p" />
|
||||
<use x="132" y="312" xlink:href="#p" />
|
||||
<use x="144" y="312" xlink:href="#p" />
|
||||
<use x="192" y="312" xlink:href="#p" />
|
||||
<use x="204" y="312" xlink:href="#p" />
|
||||
<use x="228" y="312" xlink:href="#p" />
|
||||
<use x="240" y="312" xlink:href="#p" />
|
||||
<use x="264" y="312" xlink:href="#p" />
|
||||
<use x="300" y="312" xlink:href="#p" />
|
||||
<use x="336" y="312" xlink:href="#p" />
|
||||
<use x="348" y="312" xlink:href="#p" />
|
||||
<use x="360" y="312" xlink:href="#p" />
|
||||
<use x="384" y="312" xlink:href="#p" />
|
||||
<use x="444" y="312" xlink:href="#p" />
|
||||
<use x="12" y="324" xlink:href="#p" />
|
||||
<use x="48" y="324" xlink:href="#p" />
|
||||
<use x="84" y="324" xlink:href="#p" />
|
||||
<use x="108" y="324" xlink:href="#p" />
|
||||
<use x="120" y="324" xlink:href="#p" />
|
||||
<use x="132" y="324" xlink:href="#p" />
|
||||
<use x="156" y="324" xlink:href="#p" />
|
||||
<use x="168" y="324" xlink:href="#p" />
|
||||
<use x="216" y="324" xlink:href="#p" />
|
||||
<use x="240" y="324" xlink:href="#p" />
|
||||
<use x="264" y="324" xlink:href="#p" />
|
||||
<use x="300" y="324" xlink:href="#p" />
|
||||
<use x="324" y="324" xlink:href="#p" />
|
||||
<use x="336" y="324" xlink:href="#p" />
|
||||
<use x="348" y="324" xlink:href="#p" />
|
||||
<use x="372" y="324" xlink:href="#p" />
|
||||
<use x="384" y="324" xlink:href="#p" />
|
||||
<use x="396" y="324" xlink:href="#p" />
|
||||
<use x="432" y="324" xlink:href="#p" />
|
||||
<use x="444" y="324" xlink:href="#p" />
|
||||
<use x="12" y="336" xlink:href="#p" />
|
||||
<use x="48" y="336" xlink:href="#p" />
|
||||
<use x="60" y="336" xlink:href="#p" />
|
||||
<use x="108" y="336" xlink:href="#p" />
|
||||
<use x="168" y="336" xlink:href="#p" />
|
||||
<use x="180" y="336" xlink:href="#p" />
|
||||
<use x="204" y="336" xlink:href="#p" />
|
||||
<use x="240" y="336" xlink:href="#p" />
|
||||
<use x="252" y="336" xlink:href="#p" />
|
||||
<use x="300" y="336" xlink:href="#p" />
|
||||
<use x="324" y="336" xlink:href="#p" />
|
||||
<use x="336" y="336" xlink:href="#p" />
|
||||
<use x="348" y="336" xlink:href="#p" />
|
||||
<use x="360" y="336" xlink:href="#p" />
|
||||
<use x="384" y="336" xlink:href="#p" />
|
||||
<use x="432" y="336" xlink:href="#p" />
|
||||
<use x="12" y="348" xlink:href="#p" />
|
||||
<use x="36" y="348" xlink:href="#p" />
|
||||
<use x="48" y="348" xlink:href="#p" />
|
||||
<use x="60" y="348" xlink:href="#p" />
|
||||
<use x="72" y="348" xlink:href="#p" />
|
||||
<use x="84" y="348" xlink:href="#p" />
|
||||
<use x="96" y="348" xlink:href="#p" />
|
||||
<use x="120" y="348" xlink:href="#p" />
|
||||
<use x="132" y="348" xlink:href="#p" />
|
||||
<use x="168" y="348" xlink:href="#p" />
|
||||
<use x="180" y="348" xlink:href="#p" />
|
||||
<use x="204" y="348" xlink:href="#p" />
|
||||
<use x="216" y="348" xlink:href="#p" />
|
||||
<use x="240" y="348" xlink:href="#p" />
|
||||
<use x="252" y="348" xlink:href="#p" />
|
||||
<use x="264" y="348" xlink:href="#p" />
|
||||
<use x="276" y="348" xlink:href="#p" />
|
||||
<use x="300" y="348" xlink:href="#p" />
|
||||
<use x="312" y="348" xlink:href="#p" />
|
||||
<use x="348" y="348" xlink:href="#p" />
|
||||
<use x="360" y="348" xlink:href="#p" />
|
||||
<use x="372" y="348" xlink:href="#p" />
|
||||
<use x="384" y="348" xlink:href="#p" />
|
||||
<use x="396" y="348" xlink:href="#p" />
|
||||
<use x="420" y="348" xlink:href="#p" />
|
||||
<use x="432" y="348" xlink:href="#p" />
|
||||
<use x="108" y="360" xlink:href="#p" />
|
||||
<use x="132" y="360" xlink:href="#p" />
|
||||
<use x="144" y="360" xlink:href="#p" />
|
||||
<use x="180" y="360" xlink:href="#p" />
|
||||
<use x="192" y="360" xlink:href="#p" />
|
||||
<use x="204" y="360" xlink:href="#p" />
|
||||
<use x="240" y="360" xlink:href="#p" />
|
||||
<use x="252" y="360" xlink:href="#p" />
|
||||
<use x="276" y="360" xlink:href="#p" />
|
||||
<use x="312" y="360" xlink:href="#p" />
|
||||
<use x="336" y="360" xlink:href="#p" />
|
||||
<use x="348" y="360" xlink:href="#p" />
|
||||
<use x="396" y="360" xlink:href="#p" />
|
||||
<use x="432" y="360" xlink:href="#p" />
|
||||
<use x="12" y="372" xlink:href="#p" />
|
||||
<use x="24" y="372" xlink:href="#p" />
|
||||
<use x="36" y="372" xlink:href="#p" />
|
||||
<use x="48" y="372" xlink:href="#p" />
|
||||
<use x="60" y="372" xlink:href="#p" />
|
||||
<use x="72" y="372" xlink:href="#p" />
|
||||
<use x="84" y="372" xlink:href="#p" />
|
||||
<use x="132" y="372" xlink:href="#p" />
|
||||
<use x="144" y="372" xlink:href="#p" />
|
||||
<use x="168" y="372" xlink:href="#p" />
|
||||
<use x="216" y="372" xlink:href="#p" />
|
||||
<use x="264" y="372" xlink:href="#p" />
|
||||
<use x="276" y="372" xlink:href="#p" />
|
||||
<use x="324" y="372" xlink:href="#p" />
|
||||
<use x="336" y="372" xlink:href="#p" />
|
||||
<use x="348" y="372" xlink:href="#p" />
|
||||
<use x="372" y="372" xlink:href="#p" />
|
||||
<use x="396" y="372" xlink:href="#p" />
|
||||
<use x="408" y="372" xlink:href="#p" />
|
||||
<use x="432" y="372" xlink:href="#p" />
|
||||
<use x="444" y="372" xlink:href="#p" />
|
||||
<use x="12" y="384" xlink:href="#p" />
|
||||
<use x="84" y="384" xlink:href="#p" />
|
||||
<use x="120" y="384" xlink:href="#p" />
|
||||
<use x="156" y="384" xlink:href="#p" />
|
||||
<use x="168" y="384" xlink:href="#p" />
|
||||
<use x="180" y="384" xlink:href="#p" />
|
||||
<use x="228" y="384" xlink:href="#p" />
|
||||
<use x="324" y="384" xlink:href="#p" />
|
||||
<use x="348" y="384" xlink:href="#p" />
|
||||
<use x="396" y="384" xlink:href="#p" />
|
||||
<use x="12" y="396" xlink:href="#p" />
|
||||
<use x="36" y="396" xlink:href="#p" />
|
||||
<use x="48" y="396" xlink:href="#p" />
|
||||
<use x="60" y="396" xlink:href="#p" />
|
||||
<use x="84" y="396" xlink:href="#p" />
|
||||
<use x="108" y="396" xlink:href="#p" />
|
||||
<use x="132" y="396" xlink:href="#p" />
|
||||
<use x="168" y="396" xlink:href="#p" />
|
||||
<use x="180" y="396" xlink:href="#p" />
|
||||
<use x="192" y="396" xlink:href="#p" />
|
||||
<use x="204" y="396" xlink:href="#p" />
|
||||
<use x="216" y="396" xlink:href="#p" />
|
||||
<use x="228" y="396" xlink:href="#p" />
|
||||
<use x="240" y="396" xlink:href="#p" />
|
||||
<use x="252" y="396" xlink:href="#p" />
|
||||
<use x="264" y="396" xlink:href="#p" />
|
||||
<use x="276" y="396" xlink:href="#p" />
|
||||
<use x="300" y="396" xlink:href="#p" />
|
||||
<use x="312" y="396" xlink:href="#p" />
|
||||
<use x="336" y="396" xlink:href="#p" />
|
||||
<use x="348" y="396" xlink:href="#p" />
|
||||
<use x="360" y="396" xlink:href="#p" />
|
||||
<use x="372" y="396" xlink:href="#p" />
|
||||
<use x="384" y="396" xlink:href="#p" />
|
||||
<use x="396" y="396" xlink:href="#p" />
|
||||
<use x="420" y="396" xlink:href="#p" />
|
||||
<use x="432" y="396" xlink:href="#p" />
|
||||
<use x="12" y="408" xlink:href="#p" />
|
||||
<use x="36" y="408" xlink:href="#p" />
|
||||
<use x="48" y="408" xlink:href="#p" />
|
||||
<use x="60" y="408" xlink:href="#p" />
|
||||
<use x="84" y="408" xlink:href="#p" />
|
||||
<use x="108" y="408" xlink:href="#p" />
|
||||
<use x="180" y="408" xlink:href="#p" />
|
||||
<use x="252" y="408" xlink:href="#p" />
|
||||
<use x="264" y="408" xlink:href="#p" />
|
||||
<use x="300" y="408" xlink:href="#p" />
|
||||
<use x="312" y="408" xlink:href="#p" />
|
||||
<use x="372" y="408" xlink:href="#p" />
|
||||
<use x="396" y="408" xlink:href="#p" />
|
||||
<use x="408" y="408" xlink:href="#p" />
|
||||
<use x="12" y="420" xlink:href="#p" />
|
||||
<use x="36" y="420" xlink:href="#p" />
|
||||
<use x="48" y="420" xlink:href="#p" />
|
||||
<use x="60" y="420" xlink:href="#p" />
|
||||
<use x="84" y="420" xlink:href="#p" />
|
||||
<use x="108" y="420" xlink:href="#p" />
|
||||
<use x="120" y="420" xlink:href="#p" />
|
||||
<use x="168" y="420" xlink:href="#p" />
|
||||
<use x="180" y="420" xlink:href="#p" />
|
||||
<use x="204" y="420" xlink:href="#p" />
|
||||
<use x="228" y="420" xlink:href="#p" />
|
||||
<use x="264" y="420" xlink:href="#p" />
|
||||
<use x="276" y="420" xlink:href="#p" />
|
||||
<use x="300" y="420" xlink:href="#p" />
|
||||
<use x="324" y="420" xlink:href="#p" />
|
||||
<use x="336" y="420" xlink:href="#p" />
|
||||
<use x="348" y="420" xlink:href="#p" />
|
||||
<use x="360" y="420" xlink:href="#p" />
|
||||
<use x="384" y="420" xlink:href="#p" />
|
||||
<use x="420" y="420" xlink:href="#p" />
|
||||
<use x="444" y="420" xlink:href="#p" />
|
||||
<use x="12" y="432" xlink:href="#p" />
|
||||
<use x="84" y="432" xlink:href="#p" />
|
||||
<use x="144" y="432" xlink:href="#p" />
|
||||
<use x="168" y="432" xlink:href="#p" />
|
||||
<use x="180" y="432" xlink:href="#p" />
|
||||
<use x="192" y="432" xlink:href="#p" />
|
||||
<use x="228" y="432" xlink:href="#p" />
|
||||
<use x="240" y="432" xlink:href="#p" />
|
||||
<use x="252" y="432" xlink:href="#p" />
|
||||
<use x="276" y="432" xlink:href="#p" />
|
||||
<use x="300" y="432" xlink:href="#p" />
|
||||
<use x="336" y="432" xlink:href="#p" />
|
||||
<use x="348" y="432" xlink:href="#p" />
|
||||
<use x="360" y="432" xlink:href="#p" />
|
||||
<use x="372" y="432" xlink:href="#p" />
|
||||
<use x="444" y="432" xlink:href="#p" />
|
||||
<use x="12" y="444" xlink:href="#p" />
|
||||
<use x="24" y="444" xlink:href="#p" />
|
||||
<use x="36" y="444" xlink:href="#p" />
|
||||
<use x="48" y="444" xlink:href="#p" />
|
||||
<use x="60" y="444" xlink:href="#p" />
|
||||
<use x="72" y="444" xlink:href="#p" />
|
||||
<use x="84" y="444" xlink:href="#p" />
|
||||
<use x="132" y="444" xlink:href="#p" />
|
||||
<use x="168" y="444" xlink:href="#p" />
|
||||
<use x="204" y="444" xlink:href="#p" />
|
||||
<use x="216" y="444" xlink:href="#p" />
|
||||
<use x="240" y="444" xlink:href="#p" />
|
||||
<use x="252" y="444" xlink:href="#p" />
|
||||
<use x="276" y="444" xlink:href="#p" />
|
||||
<use x="288" y="444" xlink:href="#p" />
|
||||
<use x="300" y="444" xlink:href="#p" />
|
||||
<use x="324" y="444" xlink:href="#p" />
|
||||
<use x="336" y="444" xlink:href="#p" />
|
||||
<use x="372" y="444" xlink:href="#p" />
|
||||
<use x="384" y="444" xlink:href="#p" />
|
||||
<use x="408" y="444" xlink:href="#p" />
|
||||
<use x="420" y="444" xlink:href="#p" />
|
||||
<use x="432" y="444" xlink:href="#p" />
|
||||
<use x="444" y="444" xlink:href="#p" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 27 KiB |
78
src/views/system/index/components/d2-help/index.vue
Normal file
78
src/views/system/index/components/d2-help/index.vue
Normal file
@@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-button type="primary" @click="dialogVisible = true" plain round>
|
||||
<d2-icon name="question-circle-o" class="d2-mr-5"/>
|
||||
需要帮助吗
|
||||
</el-button>
|
||||
<el-dialog
|
||||
title="帮助"
|
||||
width="600px"
|
||||
:visible.sync="dialogVisible"
|
||||
:append-to-body="true">
|
||||
<div style="margin-top: -25px;">
|
||||
<h2 class="d2-mt-0">
|
||||
这里有一些参考资料
|
||||
</h2>
|
||||
<el-button-group>
|
||||
<el-button @click="$open('https://d2.pub/zh/doc/d2-admin')">
|
||||
<d2-icon name="book" class="d2-mr-5"/>
|
||||
文档
|
||||
</el-button>
|
||||
<el-button @click="$open('https://github.com/d2-projects/d2-admin/issues?q=is%3Aissue+is%3Aclosed')">
|
||||
<d2-icon name="question" class="d2-mr-5"/>
|
||||
历史提问
|
||||
</el-button>
|
||||
<el-button @click="$open('https://github.com/d2-projects/d2-admin/issues/new/choose')">
|
||||
<d2-icon name="plus" class="d2-mr-5"/>
|
||||
提交问题
|
||||
</el-button>
|
||||
</el-button-group>
|
||||
<h2>询问其它使用者或作者</h2>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<img src="./image/qq.svg" style="width: 100%;">
|
||||
<div class="d2-help--qr-info">
|
||||
请使用手机 QQ 扫面上方二维码<br/>
|
||||
1群 806395827 (满) | 2群 592981556
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<img src="./image/we.svg" style="width: 100%;">
|
||||
<div class="d2-help--qr-info">
|
||||
请使用手机微信扫面上方二维码<br/>
|
||||
添加作者微信好友，邀请加入微信群
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
dialogVisible: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.d2-help--qr-info {
|
||||
background-color: #f4f4f5;
|
||||
color: #909399;
|
||||
width: 100%;
|
||||
padding: 8px 16px;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
opacity: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: opacity .2s;
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 9.0 KiB |
50
src/views/system/index/components/d2-page-cover/index.vue
Normal file
50
src/views/system/index/components/d2-page-cover/index.vue
Normal file
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<div class="d2-page-cover">
|
||||
<div class="d2-page-cover__logo">
|
||||
<slot/>
|
||||
</div>
|
||||
<p class="d2-page-cover__title">D2 Admin {{$version}}</p>
|
||||
<p class="d2-page-cover__sub-title">优雅的中后台集成方案</p>
|
||||
<p class="d2-page-cover__build-time">FINAL BUILD TIME {{$buildTime}}</p>
|
||||
<slot name="footer"/>
|
||||
<a target="blank" href="https://github.com/d2-projects/d2-admin">
|
||||
<img
|
||||
style="position: absolute; top: 0; right: 0; border: 0; width: 150px;"
|
||||
src="./image/darkblue@2x.png"
|
||||
alt="Fork me on GitHub">
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.d2-page-cover {
|
||||
@extend %full;
|
||||
@extend %unable-select;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.d2-page-cover__logo {
|
||||
img {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
.d2-page-cover__title {
|
||||
margin: 0px;
|
||||
margin-bottom: 20px;
|
||||
font-weight: bold;
|
||||
color: $color-text-main;
|
||||
}
|
||||
.d2-page-cover__sub-title {
|
||||
margin: 0px;
|
||||
margin-bottom: 5px;
|
||||
color: $color-text-normal;
|
||||
}
|
||||
.d2-page-cover__build-time {
|
||||
margin: 0px;
|
||||
margin-bottom: 10px;
|
||||
font-size: 12px;
|
||||
color: $color-text-placehoder;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
BIN
src/views/system/index/image/qr@2x.png
Normal file
BIN
src/views/system/index/image/qr@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
3
src/views/system/index/index.js
Normal file
3
src/views/system/index/index.js
Normal file
@@ -0,0 +1,3 @@
|
||||
import page from './page'
|
||||
|
||||
export default page
|
||||
65
src/views/system/index/page.vue
Normal file
65
src/views/system/index/page.vue
Normal file
@@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<d2-container class="page">
|
||||
<d2-page-cover>
|
||||
<d2-icon-svg class="logo" name="d2-admin"/>
|
||||
<template slot="footer">
|
||||
<div class="btn-group">
|
||||
<span class="btn-group__btn" @click="$open('https://github.com/d2-projects')">开源组织</span> |
|
||||
<span class="btn-group__btn" @click="$open('https://d2.pub/zh/doc/d2-admin')">文档</span> |
|
||||
<span class="btn-group__btn" @click="$open('https://github.com/d2-projects/d2-admin-start-kit')">简化版</span> |
|
||||
<span class="btn-group__btn" @click="$open('https://juejin.im/user/57a48b632e958a006691b946/posts')">掘金</span> |
|
||||
<el-popover :width="172" trigger="hover">
|
||||
<p class="d2-mt-0 d2-mb-10">今日前端</p>
|
||||
<img src="./image/qr@2x.png" style="width: 172px;">
|
||||
<span slot="reference" class="btn-group__btn btn-group__btn--link">
|
||||
<d2-icon name="weixin"/>
|
||||
微信公众号
|
||||
</span>
|
||||
<p style="font-size: 12px; margin-top: 0px; margin-bottom: 0px;">
|
||||
官方公众号，主要推送前端技术类文章、框架资源、学习教程，以及 D2 系列项目更新信息
|
||||
</p>
|
||||
</el-popover>
|
||||
</div>
|
||||
<d2-badge/>
|
||||
<d2-help/>
|
||||
</template>
|
||||
</d2-page-cover>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import D2Badge from './components/d2-badge'
|
||||
import D2Help from './components/d2-help'
|
||||
import D2PageCover from './components/d2-page-cover'
|
||||
export default {
|
||||
components: {
|
||||
D2Badge,
|
||||
D2Help,
|
||||
D2PageCover
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page {
|
||||
.logo {
|
||||
width: 120px;
|
||||
}
|
||||
.btn-group {
|
||||
color: $color-text-placehoder;
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
margin-top: 0px;
|
||||
margin-bottom: 20px;
|
||||
.btn-group__btn {
|
||||
color: $color-text-sub;
|
||||
&:hover {
|
||||
color: $color-text-main;
|
||||
}
|
||||
&.btn-group__btn--link {
|
||||
color: $color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
120
src/views/system/log/index.vue
Normal file
120
src/views/system/log/index.vue
Normal file
@@ -0,0 +1,120 @@
|
||||
<template>
|
||||
<d2-container>
|
||||
<el-table
|
||||
:data="log"
|
||||
size="mini"
|
||||
style="width: 100%"
|
||||
empty-text="暂无日志信息"
|
||||
stripe>
|
||||
<!-- 时间 -->
|
||||
<el-table-column
|
||||
prop="time"
|
||||
label="Time"
|
||||
width="140">
|
||||
</el-table-column>
|
||||
<!-- 信息 -->
|
||||
<el-table-column
|
||||
prop="message"
|
||||
label="Message">
|
||||
</el-table-column>
|
||||
<!-- 触发页面 -->
|
||||
<el-table-column
|
||||
label="Url"
|
||||
align="center"
|
||||
min-width="200">
|
||||
<template slot-scope="scope">
|
||||
{{get(scope.row, 'meta.url')}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- 触发组件 -->
|
||||
<el-table-column
|
||||
label="Tag"
|
||||
align="center"
|
||||
min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<el-tag
|
||||
v-if="get(scope.row, 'meta.instance.$vnode.componentOptions.tag')"
|
||||
type="info"
|
||||
size="mini">
|
||||
<{{get(scope.row, 'meta.instance.$vnode.componentOptions.tag')}}>
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- 查看详情 -->
|
||||
<el-table-column
|
||||
fixed="right"
|
||||
align="center"
|
||||
label="More"
|
||||
width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="mini"
|
||||
@click="handleShowMore(scope.row)">
|
||||
<d2-icon name="eye"/>
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-button
|
||||
slot="footer"
|
||||
type="primary"
|
||||
size="mini"
|
||||
:loading="uploading"
|
||||
@click="handleUpload">
|
||||
<d2-icon name="cloud-upload"/>
|
||||
Upload {{log.length}} log data
|
||||
</el-button>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
import { get } from 'lodash'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
uploading: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState('d2admin/log', [
|
||||
'log'
|
||||
])
|
||||
},
|
||||
methods: {
|
||||
get,
|
||||
handleShowMore (log) {
|
||||
// 打印一条日志的所有信息到控制台
|
||||
this.$notify({
|
||||
type: 'info',
|
||||
title: '日志详情',
|
||||
message: '完整的日志内容已经打印到控制台'
|
||||
})
|
||||
this.$log.capsule('D2Admin', 'handleShowMore', 'primary')
|
||||
console.group(log.message)
|
||||
console.log('time: ', log.time)
|
||||
console.log('type: ', log.type)
|
||||
console.log(log.meta)
|
||||
console.groupEnd()
|
||||
},
|
||||
// 日志上传
|
||||
handleUpload () {
|
||||
this.uploading = true
|
||||
this.$notify({
|
||||
type: 'info',
|
||||
title: '日志上传',
|
||||
message: `开始上传${this.log.length}条日志`
|
||||
})
|
||||
setTimeout(() => {
|
||||
this.uploading = false
|
||||
this.$notify({
|
||||
type: 'success',
|
||||
title: '日志上传',
|
||||
message: '上传成功'
|
||||
})
|
||||
}, 3000)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
BIN
src/views/system/login/image/login-code.png
Normal file
BIN
src/views/system/login/image/login-code.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
BIN
src/views/system/login/image/logo@2x.png
Normal file
BIN
src/views/system/login/image/logo@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
3
src/views/system/login/index.js
Normal file
3
src/views/system/login/index.js
Normal file
@@ -0,0 +1,3 @@
|
||||
import page from './page'
|
||||
|
||||
export default page
|
||||
485
src/views/system/login/page.vue
Normal file
485
src/views/system/login/page.vue
Normal file
@@ -0,0 +1,485 @@
|
||||
<template>
|
||||
<div class="page-login">
|
||||
<div class="page-login--layer page-login--layer-area">
|
||||
<ul class="circles">
|
||||
<li v-for="n in 10" :key="n"></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div
|
||||
class="page-login--layer page-login--layer-time"
|
||||
flex="main:center cross:center">
|
||||
{{time}}
|
||||
</div>
|
||||
<div class="page-login--layer">
|
||||
<div
|
||||
class="page-login--content"
|
||||
flex="dir:top main:justify cross:stretch box:justify">
|
||||
<div class="page-login--content-header">
|
||||
<p class="page-login--content-header-motto">
|
||||
时间是一切财富中最宝贵的财富
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="page-login--content-main"
|
||||
flex="dir:top main:center cross:center">
|
||||
<!-- logo -->
|
||||
<img class="page-login--logo" src="./image/logo@2x.png">
|
||||
<!-- form -->
|
||||
<div class="page-login--form">
|
||||
<el-card shadow="never">
|
||||
<el-form
|
||||
ref="loginForm"
|
||||
label-position="top"
|
||||
:rules="rules"
|
||||
:model="formLogin"
|
||||
size="default">
|
||||
<el-form-item prop="username">
|
||||
<el-input
|
||||
type="text"
|
||||
v-model="formLogin.username"
|
||||
placeholder="用户名">
|
||||
<i slot="prepend" class="fa fa-user-circle-o"></i>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<el-input
|
||||
type="password"
|
||||
v-model="formLogin.password"
|
||||
placeholder="密码">
|
||||
<i slot="prepend" class="fa fa-keyboard-o"></i>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="code">
|
||||
<el-input
|
||||
type="text"
|
||||
v-model="formLogin.code"
|
||||
placeholder="验证码">
|
||||
<template slot="append">
|
||||
<img class="login-code" src="./image/login-code.png">
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-button
|
||||
size="default"
|
||||
@click="submit"
|
||||
type="primary"
|
||||
class="button-login">
|
||||
登录
|
||||
</el-button>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<p
|
||||
class="page-login--options"
|
||||
flex="main:justify cross:center">
|
||||
<span><d2-icon name="question-circle"/> 忘记密码</span>
|
||||
<span>注册用户</span>
|
||||
</p>
|
||||
<!-- quick login -->
|
||||
<el-button class="page-login--quick" size="default" type="info" @click="dialogVisible = true">
|
||||
快速选择用户（测试功能）
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-login--content-footer">
|
||||
<p class="page-login--content-footer-locales">
|
||||
<a
|
||||
v-for="language in $languages"
|
||||
:key="language.value"
|
||||
@click="onChangeLocale(language.value)">
|
||||
{{ language.label }}
|
||||
</a>
|
||||
</p>
|
||||
<p class="page-login--content-footer-copyright">
|
||||
Copyright
|
||||
<d2-icon name="copyright"/>
|
||||
2018 D2 Projects 开源组织出品
|
||||
<a href="https://github.com/FairyEver">
|
||||
@FairyEver
|
||||
</a>
|
||||
</p>
|
||||
<p class="page-login--content-footer-options">
|
||||
<a href="#">帮助</a>
|
||||
<a href="#">隐私</a>
|
||||
<a href="#">条款</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog
|
||||
title="快速选择用户"
|
||||
:visible.sync="dialogVisible"
|
||||
width="400px">
|
||||
<el-row :gutter="10" style="margin: -20px 0px -10px 0px;">
|
||||
<el-col v-for="(user, index) in users" :key="index" :span="8">
|
||||
<div class="page-login--quick-user" @click="handleUserBtnClick(user)">
|
||||
<d2-icon name="user-circle-o"/>
|
||||
<span>{{user.name}}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dayjs from 'dayjs'
|
||||
import { mapActions } from 'vuex'
|
||||
import localeMixin from '@/locales/mixin.js'
|
||||
export default {
|
||||
mixins: [
|
||||
localeMixin
|
||||
],
|
||||
data () {
|
||||
return {
|
||||
timeInterval: null,
|
||||
time: dayjs().format('HH:mm:ss'),
|
||||
// 快速选择用户
|
||||
dialogVisible: false,
|
||||
users: [
|
||||
{
|
||||
name: 'Admin',
|
||||
username: 'admin',
|
||||
password: 'admin'
|
||||
},
|
||||
{
|
||||
name: 'Editor',
|
||||
username: 'editor',
|
||||
password: 'editor'
|
||||
},
|
||||
{
|
||||
name: 'User1',
|
||||
username: 'user1',
|
||||
password: 'user1'
|
||||
}
|
||||
],
|
||||
// 表单
|
||||
formLogin: {
|
||||
username: 'admin',
|
||||
password: 'admin',
|
||||
code: 'v9am'
|
||||
},
|
||||
// 表单校验
|
||||
rules: {
|
||||
username: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入用户名',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
password: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入密码',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
code: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入验证码',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.timeInterval = setInterval(() => {
|
||||
this.refreshTime()
|
||||
}, 1000)
|
||||
},
|
||||
beforeDestroy () {
|
||||
clearInterval(this.timeInterval)
|
||||
},
|
||||
methods: {
|
||||
...mapActions('d2admin/account', [
|
||||
'login'
|
||||
]),
|
||||
refreshTime () {
|
||||
this.time = dayjs().format('HH:mm:ss')
|
||||
},
|
||||
/**
|
||||
* @description 接收选择一个用户快速登录的事件
|
||||
* @param {Object} user 用户信息
|
||||
*/
|
||||
handleUserBtnClick (user) {
|
||||
this.formLogin.username = user.username
|
||||
this.formLogin.password = user.password
|
||||
this.submit()
|
||||
},
|
||||
/**
|
||||
* @description 提交表单
|
||||
*/
|
||||
// 提交登录信息
|
||||
submit () {
|
||||
this.$refs.loginForm.validate((valid) => {
|
||||
if (valid) {
|
||||
// 登录
|
||||
// 注意 这里的演示没有传验证码
|
||||
// 具体需要传递的数据请自行修改代码
|
||||
this.login({
|
||||
username: this.formLogin.username,
|
||||
password: this.formLogin.password
|
||||
})
|
||||
.then(() => {
|
||||
// 重定向对象不存在则返回顶层路径
|
||||
this.$router.replace(this.$route.query.redirect || '/')
|
||||
})
|
||||
} else {
|
||||
// 登录表单校验失败
|
||||
this.$message.error('表单校验失败，请检查')
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.page-login {
|
||||
@extend %unable-select;
|
||||
$backgroundColor: #F0F2F5;
|
||||
// ---
|
||||
background-color: $backgroundColor;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
// 层
|
||||
.page-login--layer {
|
||||
@extend %full;
|
||||
overflow: auto;
|
||||
}
|
||||
.page-login--layer-area {
|
||||
overflow: hidden;
|
||||
}
|
||||
// 时间
|
||||
.page-login--layer-time {
|
||||
font-size: 24em;
|
||||
font-weight: bold;
|
||||
color: rgba(0, 0, 0, 0.03);
|
||||
overflow: hidden;
|
||||
}
|
||||
// 登陆页面控件的容器
|
||||
.page-login--content {
|
||||
height: 100%;
|
||||
min-height: 500px;
|
||||
}
|
||||
// header
|
||||
.page-login--content-header {
|
||||
padding: 1em 0;
|
||||
.page-login--content-header-motto {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
color: $color-text-normal;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
// main
|
||||
.page-login--logo {
|
||||
width: 240px;
|
||||
margin-bottom: 2em;
|
||||
margin-top: -2em;
|
||||
}
|
||||
// 登录表单
|
||||
.page-login--form {
|
||||
width: 280px;
|
||||
// 卡片
|
||||
.el-card {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
// 登录按钮
|
||||
.button-login {
|
||||
width: 100%;
|
||||
}
|
||||
// 输入框左边的图表区域缩窄
|
||||
.el-input-group__prepend {
|
||||
padding: 0px 14px;
|
||||
}
|
||||
.login-code {
|
||||
height: 40px - 2px;
|
||||
display: block;
|
||||
margin: 0px -20px;
|
||||
border-top-right-radius: 2px;
|
||||
border-bottom-right-radius: 2px;
|
||||
}
|
||||
// 登陆选项
|
||||
.page-login--options {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
font-size: 14px;
|
||||
color: $color-primary;
|
||||
margin-bottom: 15px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.page-login--quick {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
// 快速选择用户面板
|
||||
.page-login--quick-user {
|
||||
@extend %flex-center-col;
|
||||
padding: 10px 0px;
|
||||
border-radius: 4px;
|
||||
&:hover {
|
||||
background-color: $color-bg;
|
||||
i {
|
||||
color: $color-text-normal;
|
||||
}
|
||||
span {
|
||||
color: $color-text-normal;
|
||||
}
|
||||
}
|
||||
i {
|
||||
font-size: 36px;
|
||||
color: $color-text-sub;
|
||||
}
|
||||
span {
|
||||
font-size: 12px;
|
||||
margin-top: 10px;
|
||||
color: $color-text-sub;
|
||||
}
|
||||
}
|
||||
// footer
|
||||
.page-login--content-footer {
|
||||
padding: 1em 0;
|
||||
.page-login--content-footer-locales {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
margin-bottom: 15px;
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
text-align: center;
|
||||
color: $color-text-normal;
|
||||
a {
|
||||
color: $color-text-normal;
|
||||
margin: 0 .5em;
|
||||
&:hover {
|
||||
color: $color-text-main;
|
||||
}
|
||||
}
|
||||
}
|
||||
.page-login--content-footer-copyright {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
margin-bottom: 10px;
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
text-align: center;
|
||||
color: $color-text-normal;
|
||||
a {
|
||||
color: $color-text-normal;
|
||||
}
|
||||
}
|
||||
.page-login--content-footer-options {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
text-align: center;
|
||||
a {
|
||||
color: $color-text-normal;
|
||||
margin: 0 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 背景
|
||||
.circles {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
li {
|
||||
position: absolute;
|
||||
display: block;
|
||||
list-style: none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: #FFF;
|
||||
animation: animate 25s linear infinite;
|
||||
bottom: -200px;
|
||||
@keyframes animate {
|
||||
0%{
|
||||
transform: translateY(0) rotate(0deg);
|
||||
opacity: 1;
|
||||
border-radius: 0;
|
||||
}
|
||||
100%{
|
||||
transform: translateY(-1000px) rotate(720deg);
|
||||
opacity: 0;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
&:nth-child(1) {
|
||||
left: 15%;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
left: 5%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
animation-delay: 2s;
|
||||
animation-duration: 12s;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
left: 70%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
animation-delay: 4s;
|
||||
}
|
||||
&:nth-child(4) {
|
||||
left: 40%;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
animation-delay: 0s;
|
||||
animation-duration: 18s;
|
||||
}
|
||||
&:nth-child(5) {
|
||||
left: 65%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
&:nth-child(6) {
|
||||
left: 75%;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
animation-delay: 3s;
|
||||
}
|
||||
&:nth-child(7) {
|
||||
left: 35%;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
animation-delay: 7s;
|
||||
}
|
||||
&:nth-child(8) {
|
||||
left: 50%;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
animation-delay: 15s;
|
||||
animation-duration: 45s;
|
||||
}
|
||||
&:nth-child(9) {
|
||||
left: 20%;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
animation-delay: 2s;
|
||||
animation-duration: 35s;
|
||||
}
|
||||
&:nth-child(10) {
|
||||
left: 85%;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
animation-delay: 0s;
|
||||
animation-duration: 11s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user