Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
1
1
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
岑松青
1
Commits
357c657c
Commit
357c657c
authored
Jul 24, 2020
by
岑松青
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
dsada
parent
2875b3a8
Expand all
Show whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
286 additions
and
167 deletions
+286
-167
AlarmRecord.vue
src/views/AlarmRecord/AlarmRecord.vue
+0
-0
MonitorState.vue
src/views/MonitorState/MonitorState.vue
+71
-36
detail.vue
src/views/detail/detail.vue
+125
-74
home.vue
src/views/home/home.vue
+0
-0
login.vue
src/views/login.vue
+90
-57
No files found.
src/views/AlarmRecord/AlarmRecord.vue
View file @
357c657c
This diff is collapsed.
Click to expand it.
src/views/MonitorState/MonitorState.vue
View file @
357c657c
...
@@ -34,19 +34,25 @@
...
@@ -34,19 +34,25 @@
<el-col
:span=
"6"
:offset=
"12"
>
<el-col
:span=
"6"
:offset=
"12"
>
<div
class=
"grid-content1"
>
<div
class=
"grid-content1"
>
<el-input
<el-input
placeholder=
"请输入内容/编号"
suffix-icon=
"el-icon-search"
v-model=
"search"
></el-input>
placeholder=
"请输入内容/编号"
suffix-icon=
"el-icon-search"
v-model=
"search"
></el-input>
</div>
</div>
</el-col>
</el-col>
</el-row>
</el-row>
<el-row
:gutter=
"20"
>
<el-row
:gutter=
"20"
>
<el-col
:span=
"6"
>
<el-col
:span=
"6"
>
<div
class=
"grid-content2"
>
<div
class=
"grid-content2"
>
设备状态:
设备状态:
<el-select
size=
"mini"
v-model=
"value1"
multiple
placeholder=
"请选择"
>
<el-select
size=
"mini"
v-model=
"value1"
multiple
placeholder=
"请选择"
>
<el-option
<el-option
v-for=
"item in states"
v-for=
"item in states"
:key=
"item.value"
:key=
"item.value"
...
@@ -59,7 +65,12 @@
...
@@ -59,7 +65,12 @@
<el-col
:span=
"6"
>
<el-col
:span=
"6"
>
<div
class=
"grid-content2"
>
<div
class=
"grid-content2"
>
设备型号:
设备型号:
<el-select
size=
"mini"
v-model=
"value2"
multiple
placeholder=
"请选择"
>
<el-select
size=
"mini"
v-model=
"value2"
multiple
placeholder=
"请选择"
>
<el-option
<el-option
v-for=
"item in models"
v-for=
"item in models"
:key=
"item.value"
:key=
"item.value"
...
@@ -72,7 +83,12 @@
...
@@ -72,7 +83,12 @@
<el-col
:span=
"6"
>
<el-col
:span=
"6"
>
<div
class=
"grid-content2"
>
<div
class=
"grid-content2"
>
设备选择:
设备选择:
<el-select
size=
"mini"
v-model=
"value3"
multiple
placeholder=
"请选择"
>
<el-select
size=
"mini"
v-model=
"value3"
multiple
placeholder=
"请选择"
>
<el-option
<el-option
v-for=
"item in equipments"
v-for=
"item in equipments"
:key=
"item.value"
:key=
"item.value"
...
@@ -84,7 +100,9 @@
...
@@ -84,7 +100,9 @@
</el-col>
</el-col>
<el-col
:span=
"6"
>
<el-col
:span=
"6"
>
<div
class=
"grid-content2"
>
<div
class=
"grid-content2"
>
<el-button
type=
"primary"
class=
"bu"
size=
"mini"
>
搜索
</el-button>
<el-button
type=
"primary"
class=
"bu"
size=
"mini"
>
搜索
</el-button
>
<el-button
size=
"mini"
>
重置
</el-button>
<el-button
size=
"mini"
>
重置
</el-button>
</div>
</div>
</el-col>
</el-col>
...
@@ -92,25 +110,36 @@
...
@@ -92,25 +110,36 @@
<el-row>
<el-row>
<el-table
<el-table
ref=
"multipleTable"
ref=
"multipleTable"
:data=
"tableData.filter(data => !search || data.state.toLowerCase().includes(search.toLowerCase())||data.number.toLowerCase().includes(search.toLowerCase()))"
:data=
"
tableData.filter(
data =>
!search ||
data.state.toLowerCase().includes(search.toLowerCase()) ||
data.number.toLowerCase().includes(search.toLowerCase())
)
"
tooltip-effect=
"dark"
tooltip-effect=
"dark"
style=
"width: 100% "
style=
"width: 100% "
@
selection-change=
"handleSelectionChange"
@
selection-change=
"handleSelectionChange"
>
>
<el-table-column
align=
"center"
type=
"selection"
width=
"50"
></el-table-column>
<el-table-column
align=
"center"
type=
"selection"
width=
"50"
></el-table-column>
<el-table-column
align=
"center"
label=
"设备状态"
width=
"200"
>
<el-table-column
align=
"center"
label=
"设备状态"
width=
"200"
>
<template
slot-scope=
"scope"
>
<template
slot-scope=
"scope"
>
<div
v-if=
"scope.row.state
===
'正常'"
>
<div
v-if=
"scope.row.state
===
'正常'"
>
<el-tag
:type=
"'success'"
>
{{
scope
.
row
.
state
}}
</el-tag>
<el-tag
:type=
"'success'"
>
{{
scope
.
row
.
state
}}
</el-tag>
</div>
</div>
<div
v-else-if=
"scope.row.state
==
'报警'"
>
<div
v-else-if=
"scope.row.state
==
'报警'"
>
<el-tag
:type=
"'warning'"
>
{{
scope
.
row
.
state
}}
</el-tag>
<el-tag
:type=
"'warning'"
>
{{
scope
.
row
.
state
}}
</el-tag>
</div>
</div>
<div
v-else-if=
"scope.row.state
==
'故障'"
>
<div
v-else-if=
"scope.row.state
==
'故障'"
>
<el-tag
:type=
"'danger'"
>
{{
scope
.
row
.
state
}}
</el-tag>
<el-tag
:type=
"'danger'"
>
{{
scope
.
row
.
state
}}
</el-tag>
</div>
</div>
<div
v-else
>
<div
v-else
>
<el-tag
:type=
"'info'"
>
{{
scope
.
row
.
state
}}
</el-tag>
<el-tag
:type=
"'info'"
>
{{
scope
.
row
.
state
}}
</el-tag>
</div>
</div>
</
template
>
</
template
>
</el-table-column>
</el-table-column>
...
@@ -128,7 +157,9 @@
...
@@ -128,7 +157,9 @@
</el-table-column>
</el-table-column>
<el-table-column
align=
"center"
label=
"操作"
width=
"150"
>
<el-table-column
align=
"center"
label=
"操作"
width=
"150"
>
<
template
slot-scope=
"scope"
>
<
template
slot-scope=
"scope"
>
<el-button
@
click=
"detail(scope.row)"
type=
"text"
size=
"small"
>
参数详情
</el-button>
<el-button
@
click=
"detail(scope.row)"
type=
"text"
size=
"small"
>
参数详情
</el-button
>
</
template
>
</
template
>
</el-table-column>
</el-table-column>
</el-table>
</el-table>
...
@@ -143,10 +174,10 @@ import { ref, onMounted } from "@vue/composition-api";
...
@@ -143,10 +174,10 @@ import { ref, onMounted } from "@vue/composition-api";
import
{
router
}
from
"../../main"
;
import
{
router
}
from
"../../main"
;
export
default
{
export
default
{
setup
()
{
setup
()
{
const
tableData
=
[
const
tableData
=
[
{
{
state
:
"正常"
,
state
:
"正常"
,
number
:
"DLQ4
23"
,
number
:
"DLQ43
23"
,
model
:
"LTY-1"
,
model
:
"LTY-1"
,
location
:
"杭州市西湖区"
,
location
:
"杭州市西湖区"
,
area
:
"杭州市西湖区古荡湾"
,
area
:
"杭州市西湖区古荡湾"
,
...
@@ -154,7 +185,7 @@ export default {
...
@@ -154,7 +185,7 @@ export default {
},
},
{
{
state
:
"正常"
,
state
:
"正常"
,
number
:
"DLQ
423"
,
number
:
"DL3
423"
,
model
:
"LTY-1"
,
model
:
"LTY-1"
,
location
:
"杭州市西湖区"
,
location
:
"杭州市西湖区"
,
area
:
"杭州市西湖区古荡湾"
,
area
:
"杭州市西湖区古荡湾"
,
...
@@ -162,7 +193,7 @@ export default {
...
@@ -162,7 +193,7 @@ export default {
},
},
{
{
state
:
"故障"
,
state
:
"故障"
,
number
:
"DLQ42
3"
,
number
:
"DLQ45
3"
,
model
:
"LTY-1"
,
model
:
"LTY-1"
,
location
:
"杭州市西湖区"
,
location
:
"杭州市西湖区"
,
area
:
"杭州市西湖区古荡湾"
,
area
:
"杭州市西湖区古荡湾"
,
...
@@ -170,7 +201,7 @@ export default {
...
@@ -170,7 +201,7 @@ export default {
},
},
{
{
state
:
"正常"
,
state
:
"正常"
,
number
:
"DLQ4
23"
,
number
:
"DL
23"
,
model
:
"LTY-1"
,
model
:
"LTY-1"
,
location
:
"杭州市西湖区"
,
location
:
"杭州市西湖区"
,
area
:
"杭州市西湖区古荡湾"
,
area
:
"杭州市西湖区古荡湾"
,
...
@@ -208,8 +239,8 @@ export default {
...
@@ -208,8 +239,8 @@ export default {
area
:
"杭州市西湖区古荡湾"
,
area
:
"杭州市西湖区古荡湾"
,
collector
:
"LKT001"
collector
:
"LKT001"
}
}
]
];
const
equipments
=
[
const
equipments
=
[
{
{
value
:
"选项1"
,
value
:
"选项1"
,
label
:
"断路器1"
label
:
"断路器1"
...
@@ -226,8 +257,8 @@ export default {
...
@@ -226,8 +257,8 @@ export default {
value
:
"选项4"
,
value
:
"选项4"
,
label
:
"断路器4"
label
:
"断路器4"
}
}
]
];
const
models
=
[
const
models
=
[
{
{
value
:
"选项1"
,
value
:
"选项1"
,
label
:
"型号1"
label
:
"型号1"
...
@@ -244,8 +275,8 @@ export default {
...
@@ -244,8 +275,8 @@ export default {
value
:
"选项4"
,
value
:
"选项4"
,
label
:
"型号4"
label
:
"型号4"
}
}
]
];
const
states
=
[
const
states
=
[
{
{
value
:
"选项1"
,
value
:
"选项1"
,
label
:
"正常"
label
:
"正常"
...
@@ -262,22 +293,26 @@ export default {
...
@@ -262,22 +293,26 @@ export default {
value
:
"选项4"
,
value
:
"选项4"
,
label
:
"通讯中断"
label
:
"通讯中断"
}
}
]
];
function
detail
(
row
:
any
)
{
router
.
push
({
name
:
"detail"
,
params
:
{
obj
:
row
}
function
detail
()
{
});
router
.
push
({
name
:
"demo3"
});
}
}
const
loading
=
ref
<
boolean
>
(
false
);
const
loading
=
ref
<
boolean
>
(
false
);
const
value1
=
ref
<
any
>
([]);
const
value1
=
ref
<
any
>
([]);
const
value2
=
ref
<
any
>
([]);
const
value2
=
ref
<
any
>
([]);
const
value3
=
ref
<
any
>
([]);
const
value3
=
ref
<
any
>
([]);
const
multipleSelection
=
ref
<
any
>
([]);
const
multipleSelection
=
ref
<
any
>
([]);
return
{
return
{
loading
,
loading
,
search
:
""
,
search
:
""
,
msg
:
'test message'
,
tableData
,
tableData
,
detail
,
detail
,
states
,
states
,
...
...
src/views/detail/detail.vue
View file @
357c657c
<
template
>
<
template
>
<div
v-loading=
"loading"
>
<div
v-loading=
"loading"
>
<el-row>
<div><el-button
type=
"primary"
size=
"mini"
>
返回
</el-button></div>
<el-button
type=
"primary"
size=
"mini"
>
返回
</el-button>
<div
class=
"flex start "
style=
"margin-top: 10px"
>
</el-row>
<div
class=
"aside"
>
<el-container>
<div>
<el-aside
style=
"background:white; ;margin-right:15px;border-radius: 4px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)"
>
<div
style=
"text-align:center;margin-top:5%;margin-bottom:5% ;font-weight:bold"
>
{{
dd
.
number
}}
</div>
<div
style=
"margin-top:10px;margin-left:10px"
>
<div
class=
"bg"
>
<el-row
style=
"text-align:center;margin-bottom:5% ;font-weight:bold"
>
BOT0016
</el-row>
<div
class=
"text"
>
<el-row
>
<div>
设备型号:
</div>
<el-col
:span=
"10"
><div
><img
src=
"../../assets/device.png"
alt=
""
class=
"device"
></div></el-col>
<div>
12
</div>
<el-col
:span=
"7"
:offset=
"3"
><div>
设备型号:
</div><div>
12
</div><div
style=
"margin-top:10px"
>
采集器编号:
</div><div>
12
</div></el-col>
<div
style=
"margin-top:10px"
>
采集器编号:
</div>
</el-row>
<div>
12
</div>
<el-row
style=
"background:white;margin-top:5% "
>
</div>
<el-col
:span=
"10"
><div>
客户地址:
</div></el-col>
</div>
<el-col
:span=
"10"
:offset=
"2"
><div>
杭州市江干区
</div></el-col>
</div>
</el-row>
<el-form
ref=
"form"
:model=
"form"
label-width=
"100px"
size=
"mini"
>
<el-row
style=
"background:white;margin-top:5% "
>
<el-form-item
label=
"客户地址:"
>
<el-col
:span=
"10"
><div>
联系人:
</div></el-col>
<div>
杭州市江干区
</div>
<el-col
:span=
"10"
:offset=
"2"
><div>
张三
</div></el-col>
</el-form-item>
</el-row>
<el-form-item
label=
"联系人:"
>
<el-row
style=
"background:white;margin-top:5% "
>
<div>
张三
</div>
<el-col
:span=
"10"
><div>
联系方式:
</div></el-col>
</el-form-item>
<el-col
:span=
"10"
:offset=
"2"
><div>
1283948933
</div></el-col>
<el-form-item
label=
"联系方式:"
>
</el-row>
<div>
1283948933
</div>
<el-row
style=
"background:white;margin-top:5% "
>
</el-form-item>
<el-col
:span=
"10"
><div>
设备位置:
</div></el-col>
<el-form-item
label=
"设备位置:"
>
<el-col
:span=
"10"
:offset=
"2"
><div>
北楼一区
</div></el-col>
<div>
北楼一区
</div>
</el-row>
</el-form-item>
<el-row
style=
"background:white;margin-top:5% "
>
<el-form-item
label=
"监测区域:"
>
<el-col
:span=
"10"
><div>
监测区域:
</div></el-col>
<div>
北楼一区
</div>
<el-col
:span=
"10"
:offset=
"2"
><div>
北楼一区
</div></el-col>
</el-form-item>
</el-row>
<el-form-item
label=
"开机率:"
>
<el-row
style=
"background:white;margin-top:5% "
>
<div
style=
"width:80%;margin-top:8px"
><el-progress
<el-col
:span=
"10"
><div>
开机率:
</div></el-col>
:text-inside=
"true"
<el-col
:span=
"10"
:offset=
"2"
><div><el-progress
:text-inside=
"true"
:stroke-width=
"24"
:percentage=
"67"
status=
"success"
></el-progress></div></el-col>
:stroke-width=
"20"
</el-row>
:percentage=
"67"
<el-row
style=
"background:white;margin-top:50px "
justify=
"center"
><el-col
:span=
"3"
:offset=
"7"
><el-button
type=
"primary"
size=
"mini"
>
运行参数查看
</el-button></el-col></el-row>
status=
"success"
<el-row
style=
"background:white;margin-top:10px "
justify=
"center"
><el-col
:span=
"3"
:offset=
"7"
><el-button
type=
"primary"
size=
"mini"
>
运行时间统计
</el-button></el-col></el-row>
></el-progress></div>
</el-form-item>
</el-form-item>
<el-form-item
label=
"监测区域:"
>
<div>
北楼一区
</div>
</el-form-item>
</el-form-item>
<el-form-item
>
<div><el-button
type=
"primary"
size=
"mini"
>
运行参数查看
</el-button
></div>
</el-form-item>
<el-form-item
>
<div><el-button
type=
"primary"
size=
"mini"
>
运行时间统计
</el-button
></div>
</el-form-item>
</el-form>
</div>
</div>
</el-aside>
<div
class=
"flex column "
style=
"width:72%"
>
<el-container>
<div
class=
"header1"
>
运行时间:
</div>
<el-header
style=
"line-height:60px; height:60px; background:white;border-radius: 4px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)"
>
<div
class=
"main1"
>
<el-row
>
运行时间:
</el-row>
<div
class=
"butt"
>
</el-header>
<el-form
:inline=
"true"
>
<el-form-item>
<el-main
style=
"background:white;margin-top:10px ;border-radius: 4px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)"
>
<el-button
type=
"primary"
size=
"mini"
style=
"margin-right:20px"
>
实时参数列表
</el-button>
<el-row
style=
"background:white;margin-top:10px "
justify=
"center"
><el-col
:span=
"3"
:offset=
"8"
><el-button
type=
"primary"
size=
"mini"
>
实时参数列表
</el-button></el-col><el-col
:span=
"3"
><el-button
size=
"mini"
>
参数曲线监控
</el-button></el-col></el-row>
<el-button
size=
"mini"
>
参数曲线监控
</el-button>
<el-row
style=
"background:white;margin-top:5% "
>
</el-form-item>
<el-col
:span=
"5"
><div>
电流:
</div></el-col>
</el-form>
<el-col
:span=
"2"
:offset=
"1"
><div
class=
"it"
>
8.342342
</div></el-col>
</div>
<el-col
:span=
"5"
><div>
温度:
</div
></el-col>
<el-form
:inline=
"true"
>
<el-col
:span=
"2"
:offset=
"1"
><div
class=
"it"
>
8.342342
</div></el-col>
<el-form-item
label=
"电流:"
style=
"margin-right:200px;width:150px"
>
<el-col
:span=
"5"
><div>
断路器状态:
</div></el-col>
<div
class=
"it"
>
8.342342
</div>
<el-col
:span=
"2"
:offset=
"1"
><div
class=
"it"
>
8.342342
</div></el-col>
</el-form-item>
</el-row>
<el-form-item
label=
"温度:"
style=
"margin-right:200px;width:150px"
>
<el-row
style=
"background:white;margin-top:5% "
>
<div
class=
"it"
>
8.342342
</div>
<el-col
:span=
"5"
><div>
A相电压:
</div></el-col>
</el-form-item>
<el-col
:span=
"2"
:offset=
"1"
><div
class=
"it"
>
8.342342
</div></el-col>
<el-form-item
label=
"断路器状态:"
>
<el-col
:span=
"5"
><div>
B相电压:
</div
></el-col>
<div
class=
"it"
>
开
</div>
<el-col
:span=
"2"
:offset=
"1"
><div
class=
"it"
>
8.342342
</div></el-col>
</el-form-item>
<el-col
:span=
"5"
><div>
AB相线电流:
</div></el-col>
</el-form>
<el-col
:span=
"2"
:offset=
"1"
><div
class=
"it"
>
8.342342
</div></el-col>
<el-form
:inline=
"true"
>
</el-row>
<el-form-item
label=
"A相电压:"
style=
"margin-right:200px;width:150px"
>
<el-row
justify=
"center"
style=
"margin-top:300px"
><el-col
:span=
"3"
:offset=
"8"
><el-button
type=
"primary"
size=
"mini"
>
上一页
</el-button></el-col><el-col
:span=
"3"
><el-button
size=
"mini"
>
下一页
</el-button></el-col></el-row>
<div
class=
"it"
>
8.342342
</div>
</el-main>
</el-form-item>
</el-container>
<el-form-item
label=
"B相电压:"
style=
"margin-right:200px;width:150px"
>
</el-container>
<div
class=
"it"
>
8.342342
</div>
</el-form-item>
<el-form-item
label=
"AB相线电流:"
>
<div
class=
"it"
>
8.342342
</div>
</el-form-item>
</el-form>
<div
class=
"butt1"
>
<el-button
type=
"primary"
size=
"mini"
style=
"margin-right:20px"
>
上一页
</el-button>
<el-button
size=
"mini"
>
下一页
</el-button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</
template
>
</
template
>
<
script
lang=
"ts"
>
<
script
lang=
"ts"
>
import
{
ref
,
onMounted
}
from
'@vue/composition-api'
;
import
{
ref
,
onMounted
}
from
"@vue/composition-api"
;
import
{
router
}
from
'../../main'
;
export
default
{
export
default
{
setup
()
{
setup
()
{
const
loading
=
ref
<
boolean
>
(
false
);
const
loading
=
ref
<
boolean
>
(
false
);
return
{
const
dd
=
ref
<
any
>
()
loading
,
onMounted
(
function
()
{
dd
.
value
=
router
.
currentRoute
.
params
.
obj
// console.log(aa)
})
return
{
loading
,
dd
};
};
}
,
}
};
};
</
script
>
</
script
>
<
style
lang=
"scss"
>
<
style
lang=
"scss"
>
.it
{
.aside
{
border-radius
:
4px
;
box-shadow
:
0
2px
4px
rgba
(
0
,
0
,
0
,
.12
),
0
0
6px
rgba
(
0
,
0
,
0
,
.04
);
width
:
25%
;
background
:
white
;
margin-right
:
10px
;
}
.main1
{
padding-left
:
10px
;
background
:
white
;
margin-top
:
10px
;
border-radius
:
4px
;
box-shadow
:
0
2px
4px
rgba
(
0
,
0
,
0
,
.12
),
0
0
6px
rgba
(
0
,
0
,
0
,
.04
)}
.header1
{
line-height
:
60px
;
padding-left
:
10px
;
height
:
60px
;
background
:
white
;
border-radius
:
4px
;
box-shadow
:
0
2px
4px
rgba
(
0
,
0
,
0
,
.12
),
0
0
6px
rgba
(
0
,
0
,
0
,
.04
)}
.it
{
color
:
blue
;
color
:
blue
;
font-weight
:
bold
;
font-weight
:
bold
;
text-align
:
center
;
text-size-adjust
:
medium
;
text-size-adjust
:
medium
;
}
.butt
{
margin-left
:
35%
}
.butt1
{
margin-left
:
38%
;
margin-top
:
31%
;
margin-bottom
:
2%
;}
.bg
{
background-image
:
url(../../assets/device.png)
;
background-repeat
:
no-repeat
;
}
}
.device
{
.text
{
margin-left
:
60%
}
.device
{
height
:
60px
;
height
:
60px
;
overflow
:
hidden
;
overflow
:
hidden
;
cursor
:
pointer
;
cursor
:
pointer
;
}
}
</
style
>
</
style
>
src/views/home/home.vue
View file @
357c657c
This diff is collapsed.
Click to expand it.
src/views/login.vue
View file @
357c657c
...
@@ -2,29 +2,48 @@
...
@@ -2,29 +2,48 @@
<div
class=
"flex column center login"
v-loading=
"loading"
>
<div
class=
"flex column center login"
v-loading=
"loading"
>
<div
class=
"login-body vivify popIn flex center column"
>
<div
class=
"login-body vivify popIn flex center column"
>
<div
class=
"login-head flex column center align-center"
>
<div
class=
"login-head flex column center align-center"
>
<div
class=
"title1"
>
{{
loginTitle1
}}
</div>
<div
class=
"title1"
>
{{
loginTitle1
}}
</div>
<div
v-if=
"loginTitle2"
class=
"title2"
>
{{
loginTitle2
}}
</div>
<div
v-if=
"loginTitle2"
class=
"title2"
>
{{
loginTitle2
}}
</div>
</div>
</div>
<div
class=
"inner flex center align-center around"
>
<div
class=
"inner flex center align-center around"
>
<div
class=
"left"
>
<div
class=
"left"
>
<img
src=
"../assets/u90.png"
>
<img
src=
"../assets/u90.png"
/
>
</div>
</div>
<div
class=
"flex column right"
>
<div
class=
"flex column right"
>
<div
class=
"flex center"
>
<div
class=
"flex center"
>
<img
:src=
"loginLogo"
/>
<img
:src=
"loginLogo"
/>
</div>
</div>
<el-form
<el-form
label-position=
"left"
label-width=
"70px"
label-position=
"left"
class=
"flex column around"
ref=
"formRef"
:model=
"form"
:rules=
"rule"
>
label-width=
"70px"
class=
"flex column around"
ref=
"formRef"
:model=
"form"
:rules=
"rule"
>
<el-form-item
prop=
"username"
label=
"账户:"
>
<el-form-item
prop=
"username"
label=
"账户:"
>
<el-input
v-model=
"form.username"
autofocus
autocomplete=
"off"
placeholder=
"用户名"
@
keyup
.
enter
.
native=
"login($refs.formRef)"
/>
<el-input
v-model=
"form.username"
autofocus
autocomplete=
"off"
placeholder=
"用户名"
@
keyup
.
enter
.
native=
"login($refs.formRef)"
/>
</el-form-item>
</el-form-item>
<el-form-item
prop=
"pwd"
label=
"密码:"
>
<el-form-item
prop=
"pwd"
label=
"密码:"
>
<el-input
type=
"password"
autocomplete=
"off"
v-model=
"form.pwd"
placeholder=
"密 码"
@
keyup
.
enter
.
native=
"login($refs.formRef)"
/>
<el-input
type=
"password"
autocomplete=
"off"
v-model=
"form.pwd"
placeholder=
"密 码"
@
keyup
.
enter
.
native=
"login($refs.formRef)"
/>
</el-form-item>
</el-form-item>
<kit-err-channel
id=
"login"
style=
"margin-bottom: 5px"
/>
<kit-err-channel
id=
"login"
style=
"margin-bottom: 5px"
/>
<el-form-item>
<el-form-item>
<el-button
type=
"primary"
@
click=
"login($refs.formRef)"
>
登录
</el-button>
<el-button
type=
"primary"
@
click=
"login($refs.formRef)"
>
登录
</el-button
>
</el-form-item>
</el-form-item>
</el-form>
</el-form>
</div>
</div>
...
@@ -34,58 +53,67 @@
...
@@ -34,58 +53,67 @@
</div>
</div>
</
template
>
</
template
>
<
script
lang=
"ts"
>
<
script
lang=
"ts"
>
import
{
ref
,
Ref
,
onMounted
}
from
'@vue/composition-api'
;
import
{
ref
,
Ref
,
onMounted
}
from
"@vue/composition-api"
;
import
{
ElForm
}
from
'element-ui/types/form'
;
import
{
ElForm
}
from
"element-ui/types/form"
;
import
{
useLoading
}
from
'web-toolkit/src/service'
;
import
{
useLoading
}
from
"web-toolkit/src/service"
;
import
{
postService
,
storeUserInfo
,
updateStoreUserInfo
,
submitErrChanel
,
pushMsgErr
}
from
'web-toolkit/src/case-main'
;
import
{
import
{
loginTitle1
,
loginTitle2
,
loginLogo
,
schema
}
from
'@/main'
;
postService
,
import
{
router
}
from
'@/main'
;
storeUserInfo
,
import
{
Route
}
from
'vue-router'
;
updateStoreUserInfo
,
import
{
assert
}
from
'web-toolkit/src/utils/index'
;
submitErrChanel
,
import
{
Login
}
from
'@/dao/userDao'
;
pushMsgErr
}
from
"web-toolkit/src/case-main"
;
import
{
loginTitle1
,
loginTitle2
,
loginLogo
,
schema
}
from
"@/main"
;
import
{
router
}
from
"@/main"
;
import
{
Route
}
from
"vue-router"
;
import
{
assert
}
from
"web-toolkit/src/utils/index"
;
import
{
Login
}
from
"@/dao/userDao"
;
export
default
{
export
default
{
setup
()
{
setup
()
{
const
loading
=
ref
(
false
);
const
loading
=
ref
(
false
);
const
form
=
ref
({
username
:
''
,
pwd
:
''
});
const
form
=
ref
({
username
:
""
,
pwd
:
""
});
const
formRef
:
Ref
<
ElForm
|
null
>
=
ref
(
null
);
const
formRef
:
Ref
<
ElForm
|
null
>
=
ref
(
null
);
const
rule
=
{
const
rule
=
{
username
:
{
username
:
{
required
:
true
,
required
:
true
,
message
:
'请填写用户名'
,
message
:
"请填写用户名"
,
trigger
:
'none'
,
trigger
:
"none"
},
},
pwd
:
[{
pwd
:
[
{
required
:
true
,
required
:
true
,
message
:
'请填写密码'
,
message
:
"请填写密码"
,
trigger
:
'none'
,
trigger
:
"none"
},
{
},
type
:
'string'
,
{
type
:
"string"
,
min
:
6
,
min
:
6
,
message
:
'密码长度不能小于6位'
,
message
:
"密码长度不能小于6位"
,
trigger
:
'none'
,
trigger
:
"none"
}],
}
]
};
};
async
function
login
()
{
async
function
login
()
{
const
valid
=
await
(
formRef
.
value
as
ElForm
).
validate
();
const
valid
=
await
(
formRef
.
value
as
ElForm
).
validate
();
assert
(
valid
);
assert
(
valid
);
submitErrChanel
(
'login'
);
submitErrChanel
(
"login"
);
const
data
=
await
Login
({
const
data
=
await
Login
({
...
form
.
value
,
...
form
.
value
,
schema
,
schema
});
});
updateStoreUserInfo
(
data
as
any
);
updateStoreUserInfo
(
data
as
any
);
// 设置登录后回到登录前页面
// 设置登录后回到登录前页面
// @ts-ignore
// @ts-ignore
const
redirect
:
Route
=
{
const
redirect
:
Route
=
{
name
:
'index'
,
name
:
"index"
,
query
:
{}
,
query
:
{}
};
};
if
(
if
(
storeUserInfo
.
redirect
&&
storeUserInfo
.
redirect
&&
storeUserInfo
.
redirect
.
name
&&
storeUserInfo
.
redirect
.
name
&&
storeUserInfo
.
redirect
.
name
!==
'notFound'
&&
storeUserInfo
.
redirect
.
name
!==
"notFound"
&&
storeUserInfo
.
redirect
.
name
!==
'login'
storeUserInfo
.
redirect
.
name
!==
"login"
)
{
)
{
redirect
.
name
=
storeUserInfo
.
redirect
.
name
;
redirect
.
name
=
storeUserInfo
.
redirect
.
name
;
redirect
.
query
=
storeUserInfo
.
redirect
.
query
;
redirect
.
query
=
storeUserInfo
.
redirect
.
query
;
...
@@ -95,75 +123,80 @@ export default {
...
@@ -95,75 +123,80 @@ export default {
router
.
push
(
redirect
as
any
);
router
.
push
(
redirect
as
any
);
}
}
return
{
return
{
formRef
,
loginTitle1
,
loginTitle2
,
loginLogo
,
formRef
,
loading
,
form
,
rule
,
login
:
useLoading
(
loading
,
login
),
loginTitle1
,
loginTitle2
,
loginLogo
,
loading
,
form
,
rule
,
login
:
useLoading
(
loading
,
login
)
};
};
}
,
}
};
};
</
script
>
</
script
>
<
style
lang=
"scss"
scoped
>
<
style
lang=
"scss"
scoped
>
.login
{
.login
{
background
:
url("../assets/bg.jpg")
no-repeat
;
background
:
url("../assets/bg.jpg")
no-repeat
;
background-size
:
100%
100%
;
background-size
:
100%
100%
;
width
:
100vw
;
width
:
100vw
;
height
:
100vh
;
height
:
100vh
;
min-height
:
600px
;
min-height
:
600px
;
}
}
.login-body
{
.login-body
{
width
:
90vw
;
width
:
90vw
;
height
:
90vh
;
height
:
90vh
;
min-height
:
400px
;
min-height
:
400px
;
.login-head
{
.login-head
{
color
:
white
;
color
:
white
;
.title1
{
.title1
{
font-size
:
2.5rem
;
font-size
:
2.5rem
;
font-weight
:
700
;
font-weight
:
700
;
margin-bottom
:
10px
;
margin-bottom
:
10px
;
}
}
.title2
{
.title2
{
font-size
:
1.8rem
;
font-size
:
1.8rem
;
margin-bottom
:
2rem
;
margin-bottom
:
2rem
;
}
}
}
}
.inner
{
.inner
{
width
:
100%
;
width
:
100%
;
max-height
:
600px
;
max-height
:
600px
;
max-width
:
1000px
;
max-width
:
1000px
;
background
:
white
;
background
:
white
;
padding
:
2rem
2rem
;
padding
:
2rem
2rem
;
box-shadow
:
3px
3px
10px
rgba
(
$
color
:
#000
,
$
alpha
:
.5
);
box-shadow
:
3px
3px
10px
rgba
(
$
color
:
#000
,
$
alpha
:
0
.5
);
border-radius
:
10px
;
border-radius
:
10px
;
font-size
:
1rem
;
font-size
:
1rem
;
.left
{
.left
{
img
{
img
{
height
:
40vh
;
height
:
40vh
;
}
}
}
}
.right
{
.right
{
width
:
300px
;
width
:
300px
;
img
{
img
{
height
:
3.8rem
;
height
:
3.8rem
;
width
:
auto
;
width
:
auto
;
margin-bottom
:
3rem
;
margin-bottom
:
3rem
;
}
}
.el-input
{
.el-input
{
width
:
230px
;
width
:
230px
;
}
}
.el-button
{
.el-button
{
width
:
230px
;
width
:
230px
;
font-weight
:
600
;
font-weight
:
600
;
margin
:
0
auto
;
margin
:
0
auto
;
}
}
}
}
}
}
}
.login-support
{
}
.login-support
{
/*margin-top: 3vh;*/
/*margin-top: 3vh;*/
color
:
#fff
;
color
:
#fff
;
width
:
100%
;
width
:
100%
;
font-weight
:
700
;
font-weight
:
700
;
font-size
:
1.1rem
;
font-size
:
1.1rem
;
text-align
:
center
;
text-align
:
center
;
}
}
</
style
>
</
style
>
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment