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
Show whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
589 additions
and
391 deletions
+589
-391
AlarmRecord.vue
src/views/AlarmRecord/AlarmRecord.vue
+127
-111
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
+176
-113
login.vue
src/views/login.vue
+90
-57
No files found.
src/views/AlarmRecord/AlarmRecord.vue
View file @
357c657c
...
@@ -10,9 +10,11 @@
...
@@ -10,9 +10,11 @@
<el-col
:span=
"6"
:offset=
"12"
>
<el-col
:span=
"6"
:offset=
"12"
>
<div
class=
"content"
>
<div
class=
"content"
>
<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>
...
@@ -27,19 +29,24 @@
...
@@ -27,19 +29,24 @@
size=
"mini"
size=
"mini"
v-model=
"value1"
v-model=
"value1"
type=
"daterange"
type=
"daterange"
unlink-panels
unlink-panels
range-separator=
"-"
range-separator=
"-"
start-placeholder=
"开始日期"
start-placeholder=
"开始日期"
end-placeholder=
"结束日期"
end-placeholder=
"结束日期"
:picker-options=
"pickerOptions"
>
:picker-options=
"pickerOptions"
>
</el-date-picker>
</el-date-picker>
</div>
</div>
</el-col>
</el-col>
<el-col
:span=
"5"
>
<el-col
:span=
"5"
>
<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"
...
@@ -52,7 +59,12 @@
...
@@ -52,7 +59,12 @@
<el-col
:span=
"5"
>
<el-col
:span=
"5"
>
<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 devices"
v-for=
"item in devices"
:key=
"item.value"
:key=
"item.value"
...
@@ -72,12 +84,17 @@
...
@@ -72,12 +84,17 @@
<el-row>
<el-row>
<el-table
<el-table
ref=
"multipleTable"
ref=
"multipleTable"
:data=
"tableData.filter(data => !search || data.model.toLowerCase().includes(search.toLowerCase())||data.number.toLowerCase().includes(search.toLowerCase()))"
:data=
"
tableData.filter(
data =>
!search ||
data.model.toLowerCase().includes(search.toLowerCase()) ||
data.number.toLowerCase().includes(search.toLowerCase())
)
"
tooltip-effect=
"dark"
tooltip-effect=
"dark"
style=
"width: 100% "
style=
"width: 100% "
>
>
<el-table-column
align=
"center"
label=
"设备编号"
width=
"110"
>
<el-table-column
align=
"center"
label=
"设备编号"
width=
"110"
>
<template
slot-scope=
"scope"
>
{{
scope
.
row
.
number
}}
</
template
>
<template
slot-scope=
"scope"
>
{{
scope
.
row
.
number
}}
</
template
>
</el-table-column>
</el-table-column>
...
@@ -89,11 +106,11 @@
...
@@ -89,11 +106,11 @@
</el-table-column>
</el-table-column>
<el-table-column
align=
"center"
label=
"报警类型"
width=
"110"
>
<el-table-column
align=
"center"
label=
"报警类型"
width=
"110"
>
<
template
slot-scope=
"scope"
>
<
template
slot-scope=
"scope"
>
<div
v-if=
"scope.row.type===
'一般'"
>
<div
v-if=
"scope.row.type ===
'一般'"
>
<div
style=
"color:orange"
>
{{
scope
.
row
.
type
}}
</div>
<div
style=
"color:orange"
>
{{
scope
.
row
.
type
}}
</div>
</div>
</div>
<div
v-else
>
<div
v-else
>
<div
style=
"color:red"
>
{{
scope
.
row
.
type
}}
</div>
<div
style=
"color:red"
>
{{
scope
.
row
.
type
}}
</div>
</div>
</div>
</
template
>
</
template
>
</el-table-column>
</el-table-column>
...
@@ -108,14 +125,14 @@
...
@@ -108,14 +125,14 @@
</el-table-column>
</el-table-column>
<el-table-column
align=
"center"
label=
"处理状态"
width=
"110"
>
<el-table-column
align=
"center"
label=
"处理状态"
width=
"110"
>
<
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
>
<div
v-else
>
<el-tag
:type=
"'danger'"
>
{{
scope
.
row
.
state
}}
</el-tag>
<el-tag
:type=
"'danger'"
>
{{
scope
.
row
.
state
}}
</el-tag>
</div>
</div>
</
template
>
</
template
>
</el-table-column>
</el-table-column>
...
@@ -128,14 +145,16 @@
...
@@ -128,14 +145,16 @@
<el-table-column
align=
"center"
label=
"操作"
width=
"110"
>
<el-table-column
align=
"center"
label=
"操作"
width=
"110"
>
<
template
slot-scope=
"scope"
>
<
template
slot-scope=
"scope"
>
<el-button
@
click=
"sure(scope.row)"
type=
"text"
size=
"small"
>
设备参数快照
</el-button>
<el-button
@
click=
"sure(scope.row)"
type=
"text"
size=
"small"
>
设备参数快照
</el-button
>
</
template
>
</
template
>
</el-table-column>
</el-table-column>
</el-table>
</el-table>
</el-row>
</el-row>
</el-main>
</el-main>
<el-footer
style=
"margin:0 auto"
>
<el-footer
style=
"margin:0 auto"
>
<el-row
>
<el-row
>
<el-pagination
<el-pagination
@
size-change=
"handleSizeChange"
@
size-change=
"handleSizeChange"
@
current-change=
"handleCurrentChange"
@
current-change=
"handleCurrentChange"
...
@@ -152,7 +171,7 @@
...
@@ -152,7 +171,7 @@
</div>
</div>
</template>
</template>
<
script
lang=
"ts"
>
<
script
lang=
"ts"
>
import
{
ref
,
onMounted
}
from
'@vue/composition-api'
;
import
{
ref
,
onMounted
}
from
"@vue/composition-api"
;
export
default
{
export
default
{
setup
()
{
setup
()
{
...
@@ -160,10 +179,10 @@ export default {
...
@@ -160,10 +179,10 @@ export default {
console
.
log
(
`当前页:
${
val
}
`
);
console
.
log
(
`当前页:
${
val
}
`
);
}
}
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
>
([]);
const
models
=
[
const
models
=
[
{
{
value
:
"选项1"
,
value
:
"选项1"
,
label
:
"型号1"
label
:
"型号1"
...
@@ -180,8 +199,8 @@ export default {
...
@@ -180,8 +199,8 @@ export default {
value
:
"选项4"
,
value
:
"选项4"
,
label
:
"型号4"
label
:
"型号4"
}
}
]
];
const
devices
=
[
const
devices
=
[
{
{
value
:
"选项1"
,
value
:
"选项1"
,
label
:
"断路器1"
label
:
"断路器1"
...
@@ -198,144 +217,141 @@ export default {
...
@@ -198,144 +217,141 @@ export default {
value
:
"选项4"
,
value
:
"选项4"
,
label
:
"断路器4"
label
:
"断路器4"
}
}
]
];
const
tableData
=
[
const
tableData
=
[
{
{
number
:
"LKT15456"
,
number
:
"LKT15456"
,
model
:
"DL01"
,
model
:
"DL01"
,
AlarmNum
:
'program'
,
AlarmNum
:
"program"
,
type
:
'一般'
,
type
:
"一般"
,
location
:
'车间1'
,
location
:
"车间1"
,
area
:
'一楼办公室'
,
area
:
"一楼办公室"
,
content
:
'电压不稳定'
,
content
:
"电压不稳定"
,
state
:
"待处理"
,
state
:
"待处理"
,
time
:
'2020/7/20 12:00:03'
,
time
:
"2020/7/20 12:00:03"
,
person
:
"王邹"
,
person
:
"王邹"
},
},
{
{
number
:
"LKT15456"
,
number
:
"LKT15456"
,
model
:
"DL01"
,
model
:
"DL01"
,
AlarmNum
:
'program'
,
AlarmNum
:
"program"
,
type
:
'重要'
,
type
:
"重要"
,
location
:
'车间1'
,
location
:
"车间1"
,
area
:
'一楼办公室'
,
area
:
"一楼办公室"
,
content
:
'电压不稳定'
,
content
:
"电压不稳定"
,
state
:
"待处理"
,
state
:
"待处理"
,
time
:
'2020/7/20 12:00:03'
,
time
:
"2020/7/20 12:00:03"
,
person
:
"王邹"
,
person
:
"王邹"
},
},
{
{
number
:
"LKT15456"
,
number
:
"LKT15456"
,
model
:
"DL01"
,
model
:
"DL01"
,
AlarmNum
:
'program'
,
AlarmNum
:
"program"
,
type
:
'一般'
,
type
:
"一般"
,
location
:
'车间1'
,
location
:
"车间1"
,
area
:
'一楼办公室'
,
area
:
"一楼办公室"
,
content
:
'电压不稳定'
,
content
:
"电压不稳定"
,
state
:
"已处理"
,
state
:
"已处理"
,
time
:
'2020/7/20 12:00:03'
,
time
:
"2020/7/20 12:00:03"
,
person
:
"王邹"
,
person
:
"王邹"
},
},
{
{
number
:
"LKT15456"
,
number
:
"LKT15456"
,
model
:
"DL01"
,
model
:
"DL01"
,
AlarmNum
:
'program'
,
AlarmNum
:
"program"
,
type
:
'一般'
,
type
:
"一般"
,
location
:
'车间1'
,
location
:
"车间1"
,
area
:
'一楼办公室'
,
area
:
"一楼办公室"
,
content
:
'电压不稳定'
,
content
:
"电压不稳定"
,
state
:
"未处理"
,
state
:
"未处理"
,
time
:
'2020/7/20 12:00:03'
,
time
:
"2020/7/20 12:00:03"
,
person
:
"王邹"
,
person
:
"王邹"
},
},
{
{
number
:
"LKT15456"
,
number
:
"LKT15456"
,
model
:
"DL01"
,
model
:
"DL01"
,
AlarmNum
:
'program'
,
AlarmNum
:
"program"
,
type
:
'一般'
,
type
:
"一般"
,
location
:
'车间1'
,
location
:
"车间1"
,
area
:
'一楼办公室'
,
area
:
"一楼办公室"
,
content
:
'电压不稳定'
,
content
:
"电压不稳定"
,
state
:
"待处理"
,
state
:
"待处理"
,
time
:
'2020/7/20 12:00:03'
,
time
:
"2020/7/20 12:00:03"
,
person
:
"王邹"
,
person
:
"王邹"
},
},
{
{
number
:
"LKT15456"
,
number
:
"LKT15456"
,
model
:
"DL01"
,
model
:
"DL01"
,
AlarmNum
:
'program'
,
AlarmNum
:
"program"
,
type
:
'一般'
,
type
:
"一般"
,
location
:
'车间1'
,
location
:
"车间1"
,
area
:
'一楼办公室'
,
area
:
"一楼办公室"
,
content
:
'电压不稳定'
,
content
:
"电压不稳定"
,
state
:
"待处理"
,
state
:
"待处理"
,
time
:
'2020/7/20 12:00:03'
,
time
:
"2020/7/20 12:00:03"
,
person
:
"王邹"
,
person
:
"王邹"
},
},
{
{
number
:
"LKT15456"
,
number
:
"LKT15456"
,
model
:
"DL01"
,
model
:
"DL01"
,
AlarmNum
:
'program'
,
AlarmNum
:
"program"
,
type
:
'一般'
,
type
:
"一般"
,
location
:
'车间1'
,
location
:
"车间1"
,
area
:
'一楼办公室'
,
area
:
"一楼办公室"
,
content
:
'电压不稳定'
,
content
:
"电压不稳定"
,
state
:
"待处理"
,
state
:
"待处理"
,
time
:
'2020/7/20 12:00:03'
,
time
:
"2020/7/20 12:00:03"
,
person
:
"王邹"
,
person
:
"王邹"
}
},
];
]
const
loading
=
ref
<
boolean
>
(
false
);
const
loading
=
ref
<
boolean
>
(
false
);
const
pickerOptions
=
{
const
pickerOptions
=
{
shortcuts
:
[{
shortcuts
:
[
text
:
'最近一周'
,
{
text
:
"最近一周"
,
onClick
(
picker
)
{
onClick
(
picker
)
{
const
end
=
new
Date
();
const
end
=
new
Date
();
const
start
=
new
Date
();
const
start
=
new
Date
();
start
.
setTime
(
start
.
getTime
()
-
3600
*
1000
*
24
*
7
);
start
.
setTime
(
start
.
getTime
()
-
3600
*
1000
*
24
*
7
);
picker
.
$emit
(
'pick'
,
[
start
,
end
]);
picker
.
$emit
(
"pick"
,
[
start
,
end
]);
}
}
},
{
},
text
:
'最近一个月'
,
{
text
:
"最近一个月"
,
onClick
(
picker
)
{
onClick
(
picker
)
{
const
end
=
new
Date
();
const
end
=
new
Date
();
const
start
=
new
Date
();
const
start
=
new
Date
();
start
.
setTime
(
start
.
getTime
()
-
3600
*
1000
*
24
*
30
);
start
.
setTime
(
start
.
getTime
()
-
3600
*
1000
*
24
*
30
);
picker
.
$emit
(
'pick'
,
[
start
,
end
]);
picker
.
$emit
(
"pick"
,
[
start
,
end
]);
}
}
},
{
},
text
:
'最近三个月'
,
{
text
:
"最近三个月"
,
onClick
(
picker
)
{
onClick
(
picker
)
{
const
end
=
new
Date
();
const
end
=
new
Date
();
const
start
=
new
Date
();
const
start
=
new
Date
();
start
.
setTime
(
start
.
getTime
()
-
3600
*
1000
*
24
*
90
);
start
.
setTime
(
start
.
getTime
()
-
3600
*
1000
*
24
*
90
);
picker
.
$emit
(
'pick'
,
[
start
,
end
]);
picker
.
$emit
(
"pick"
,
[
start
,
end
]);
}
}
}]
}
]
};
};
return
{
return
{
loading
,
loading
,
search
:
''
,
search
:
""
,
tableData
,
tableData
,
currentPage1
:
1
,
currentPage1
:
1
,
handleCurrentChange
,
handleCurrentChange
,
num
:
1
,
num
:
1
,
devices
,
devices
,
models
,
models
,
pickerOptions
,
pickerOptions
,
value2
,
value2
,
value1
,
value1
,
value3
,
value3
};
};
}
,
}
};
};
</
script
>
</
script
>
<
style
lang=
"scss"
>
<
style
lang=
"scss"
>
...
...
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
<
template
>
<
template
>
<div
v-loading=
"loading"
>
<div
v-loading=
"loading"
>
<el-container>
<el-container>
<el-aside
style=
"background:white;width:75% ;margin-right:2%;border-radius: 4px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)"
>
<el-aside
<div
style=
"margin-top:10px;margin-left:10px"
>
style=
"background:white;width:75% ;margin-right:2%;border-radius: 4px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)"
<el-row
style=
"text-align:left;margin-bottom:5% ;font-weight:bold;"
>
设备状态统计实时监测
</el-row>
>
<el-row
class=
"row-bg"
>
<div
style=
"margin-top:10px;margin-left:10px"
>
<el-row
style=
"text-align:left;margin-bottom:5% ;font-weight:bold;"
>
设备状态统计实时监测
</el-row
>
<el-row
class=
"row-bg"
>
<el-col
:span=
"4"
>
<el-col
:span=
"4"
>
<div
class=
"grid-content bg-blue"
>
设备总数
</div>
<div
class=
"grid-content bg-blue"
>
设备总数
</div>
<div
class=
"grid-content bg-blue big"
>
4545台
</div>
<div
class=
"grid-content bg-blue big"
>
4545台
</div>
...
@@ -26,51 +30,89 @@
...
@@ -26,51 +30,89 @@
<div
class=
"grid-content bg-grey big"
>
422台
</div>
<div
class=
"grid-content bg-grey big"
>
422台
</div>
</el-col>
</el-col>
</el-row>
</el-row>
<el-row
>
<el-row>
<el-col
><div
><img
src=
"../../assets/map.png"
alt=
""
class=
"map"
></div></el-col>
<el-col
><div><img
src=
"../../assets/map.png"
alt=
""
class=
"map"
/></div
></el-col>
</el-row>
</el-row>
</div>
</div>
</el-aside>
</el-aside>
<el-container>
<el-container>
<el-header
style=
" height:280px; margin-bottom:5%;background:white;border-radius: 4px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)"
>
<el-header
<el-row
style=
"text-align:left;margin-bottom:5% ;font-weight:bold;"
>
巡检通知
</el-row>
style=
" height:280px; margin-bottom:5%;background:white;border-radius: 4px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)"
<el-row
><div
v-for=
"(item,i) in infos"
class=
"info"
><el-col
:span=
"1"
style=
" margin-top:12px;width: 25px;height: 25px;border: 1px solid #314659;color:white;background:#314659;border-radius:50%;text-align:center;line-height:25px"
>
{{
item
.
id
}}
</el-col>
>
<el-col
:span=
"0.3"
class=
"infos"
>
{{
item
.
location
}}
</el-col>
<el-row
style=
"text-align:left;margin-bottom:5% ;font-weight:bold;"
<el-col
:span=
"0.3"
class=
"infos"
>
<div
><el-button
@
click=
"detail(scope.row)"
type=
"text"
size=
"small"
><div
>
{{
item
.
operation
}}
</div></el-button></div></el-col>
>
巡检通知
</el-row
</div></el-row>
>
</el-header>
<el-row
><div
v-for=
"(item, i) in infos"
class=
"info"
>
<el-col
:span=
"1"
style=
" margin-top:12px;width: 25px;height: 25px;border: 1px solid #314659;color:white;background:#314659;border-radius:50%;text-align:center;line-height:25px"
>
{{
item
.
id
}}
</el-col
>
<el-col
:span=
"0.3"
class=
"infos"
>
{{
item
.
location
}}
</el-col>
<el-col
:span=
"0.3"
class=
"infos"
>
<div>
<el-button
@
click=
"detail(scope.row)"
type=
"text"
size=
"small"
><div>
{{
item
.
operation
}}
</div></el-button
>
</div></el-col
>
</div></el-row
>
</el-header>
<el-main
style=
" overflow: hidden;height:280px; background:white;border-radius: 4px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)"
>
<el-main
<el-row
style=
"text-align:left;margin-bottom:5% ;font-weight:bold;"
>
区域耗能统计
</el-row>
style=
" overflow: hidden;height:280px; background:white;border-radius: 4px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)"
<el-row
><v-chart
autoresize
:options=
"option"
style=
"width: 100%;"
/></el-row>
>
</el-main>
<el-row
style=
"text-align:left;margin-bottom:5% ;font-weight:bold;"
</el-container>
>
区域耗能统计
</el-row
</el-container>
>
<el-container
style=
"margin-top:1%"
>
<el-row
<el-aside
style=
"width:49% ;margin-right:2% ; overflow: hidden; background:white;border-radius: 4px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)"
>
><v-chart
autoresize
:options=
"option"
style=
"width: 100%;"
<el-row
style=
"text-align:left;margin-bottom:2% ;font-weight:bold;"
>
今日能耗实时统计
</el-row>
/></el-row>
<el-row
><v-chart
autoresize
:options=
"option1"
style=
"width: 100%;"
/></el-row>
</el-main>
</el-container>
</el-container>
<el-container
style=
"margin-top:1%"
>
<el-aside
style=
"width:49% ;margin-right:2% ; overflow: hidden; background:white;border-radius: 4px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)"
>
<el-row
style=
"text-align:left;margin-bottom:2% ;font-weight:bold;"
>
今日能耗实时统计
</el-row
>
<el-row
><v-chart
autoresize
:options=
"option1"
style=
"width: 100%;"
/></el-row>
</el-aside>
</el-aside>
<el-main
style=
"overflow: hidden; background:white;border-radius: 4px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)"
>
<el-main
<el-row
style=
"text-align:left;margin-bottom:2% ;font-weight:bold;"
>
今日报警次数统计
</el-row>
style=
"overflow: hidden; background:white;border-radius: 4px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)"
<el-row
><v-chart
autoresize
:options=
"option2"
style=
"width: 100%;"
/></el-row>
>
<el-row
style=
"text-align:left;margin-bottom:2% ;font-weight:bold;"
>
今日报警次数统计
</el-row
>
<el-row
><v-chart
autoresize
:options=
"option2"
style=
"width: 100%;"
/></el-row>
</el-main>
</el-main>
</el-container>
</el-container>
</div>
</div>
</
template
>
</
template
>
<
script
lang=
"ts"
>
<
script
lang=
"ts"
>
import
{
ref
,
onMounted
}
from
'@vue/composition-api'
;
import
{
ref
,
onMounted
}
from
"@vue/composition-api"
;
export
default
{
export
default
{
setup
()
{
setup
()
{
var
labelRight
=
{
var
labelRight
=
{
position
:
'right'
position
:
"right"
};
};
const
option
=
{
const
option
=
{
tooltip
:
{
tooltip
:
{
trigger
:
'axis'
,
trigger
:
"axis"
,
axisPointer
:
{
// 坐标轴指示器,坐标轴触发有效
axisPointer
:
{
type
:
'shadow'
// 默认为直线,可选为:'line' | 'shadow'
// 坐标轴指示器,坐标轴触发有效
type
:
"shadow"
// 默认为直线,可选为:'line' | 'shadow'
}
}
},
},
grid
:
{
grid
:
{
...
@@ -78,67 +120,79 @@ const option = {
...
@@ -78,67 +120,79 @@ const option = {
bottom
:
5
bottom
:
5
},
},
xAxis
:
{
xAxis
:
{
type
:
'value'
,
type
:
"value"
,
position
:
'top'
,
position
:
"top"
,
splitLine
:
{
splitLine
:
{
lineStyle
:
{
lineStyle
:
{
type
:
'dashed'
type
:
"dashed"
}
}
}
}
},
},
yAxis
:
{
yAxis
:
{
type
:
'category'
,
type
:
"category"
,
axisLine
:
{
show
:
false
},
axisLine
:
{
show
:
false
},
axisLabel
:
{
show
:
false
},
axisLabel
:
{
show
:
false
},
axisTick
:
{
show
:
false
},
axisTick
:
{
show
:
false
},
splitLine
:
{
show
:
false
},
splitLine
:
{
show
:
false
},
max
:
5
,
max
:
5
,
data
:
[
'孵化器2幢'
,
'孵化器2幢'
,
'孵化器2幢'
,
'孵化器2幢'
,
'孵化器1幢'
],
data
:
[
"孵化器2幢"
,
"孵化器2幢"
,
"孵化器2幢"
,
"孵化器2幢"
,
"孵化器1幢"
]
},
},
series
:
[
series
:
[
{
{
name
:
'用电'
,
name
:
"用电"
,
type
:
'bar'
,
type
:
"bar"
,
stack
:
'总量'
,
stack
:
"总量"
,
label
:
{
label
:
{
show
:
true
,
show
:
true
,
formatter
:
'{b}'
formatter
:
"{b}"
},
},
data
:
[
data
:
[
{
value
:
-
0.07
,
label
:
labelRight
},
{
value
:
-
0.07
,
label
:
labelRight
},
{
value
:
-
0.09
,
label
:
labelRight
},
{
value
:
-
0.09
,
label
:
labelRight
},
0.2
,
0.44
,
0.2
,
{
value
:
-
0.23
,
label
:
labelRight
},
0.44
,
{
value
:
-
0.23
,
label
:
labelRight
},
0.08
,
0.08
,
{
value
:
-
0.17
,
label
:
labelRight
},
{
value
:
-
0.17
,
label
:
labelRight
},
0.47
,
0.47
,
{
value
:
-
0.36
,
label
:
labelRight
},
{
value
:
-
0.36
,
label
:
labelRight
},
0.18
0.18
]
]
}
}
]
]
};
};
const
option1
=
{
const
option1
=
{
color
:
[
'#3398DB'
],
color
:
[
"#3398DB"
],
tooltip
:
{
tooltip
:
{
trigger
:
'axis'
,
trigger
:
"axis"
,
axisPointer
:
{
// 坐标轴指示器,坐标轴触发有效
axisPointer
:
{
type
:
'shadow'
// 默认为直线,可选为:'line' | 'shadow'
// 坐标轴指示器,坐标轴触发有效
type
:
"shadow"
// 默认为直线,可选为:'line' | 'shadow'
}
}
},
},
grid
:
{
grid
:
{
left
:
'3%'
,
left
:
"3%"
,
right
:
'4%'
,
right
:
"4%"
,
bottom
:
'3%'
,
bottom
:
"3%"
,
containLabel
:
true
containLabel
:
true
},
},
xAxis
:
[
xAxis
:
[
{
{
type
:
'category'
,
type
:
"category"
,
data
:
[
'9:00'
,
'10:00'
,
'11:00'
,
'12:00'
,
'13:00'
,
'14:00'
,
'15:00'
,
'16:00'
,
'17:00'
,
'18:00'
],
data
:
[
"9:00"
,
"10:00"
,
"11:00"
,
"12:00"
,
"13:00"
,
"14:00"
,
"15:00"
,
"16:00"
,
"17:00"
,
"18:00"
],
axisTick
:
{
axisTick
:
{
alignWithLabel
:
true
alignWithLabel
:
true
}
}
...
@@ -146,76 +200,81 @@ const option1={
...
@@ -146,76 +200,81 @@ const option1={
],
],
yAxis
:
[
yAxis
:
[
{
{
type
:
'value'
type
:
"value"
}
}
],
],
series
:
[
series
:
[
{
{
name
:
'能耗'
,
name
:
"能耗"
,
type
:
'bar'
,
type
:
"bar"
,
barWidth
:
'60%'
,
barWidth
:
"60%"
,
data
:
[
10
,
52
,
200
,
334
,
390
,
330
,
220
,
435
,
656
,
232
]
data
:
[
10
,
52
,
200
,
334
,
390
,
330
,
220
,
435
,
656
,
232
]
}
}
]
]
};
};
const
option2
=
{
const
option2
=
{
tooltip
:
{
tooltip
:
{
trigger
:
'axis'
,
trigger
:
"axis"
,
axisPointer
:
{
// 坐标轴指示器,坐标轴触发有效
axisPointer
:
{
type
:
'shadow'
// 默认为直线,可选为:'line' | 'shadow'
// 坐标轴指示器,坐标轴触发有效
type
:
"shadow"
// 默认为直线,可选为:'line' | 'shadow'
}
}
},
},
xAxis
:
{
xAxis
:
{
type
:
'category'
,
type
:
"category"
,
boundaryGap
:
false
,
boundaryGap
:
false
,
data
:
[
'9:00'
,
'10:00'
,
'11:00'
,
'12:00'
,
'13:00'
,
'14:00'
,
'15:00'
,
'16:00'
,
'17:00'
,
'18:00'
]
data
:
[
"9:00"
,
"10:00"
,
"11:00"
,
"12:00"
,
"13:00"
,
"14:00"
,
"15:00"
,
"16:00"
,
"17:00"
,
"18:00"
]
},
},
yAxis
:
{
yAxis
:
{
type
:
'value'
type
:
"value"
},
},
series
:
[{
series
:
[
name
:
'次数'
,
{
data
:
[
820
,
932
,
901
,
934
,
1290
,
1330
,
1320
,
2312
,
5435
,
2121
],
name
:
"次数"
,
type
:
'line'
,
data
:
[
820
,
932
,
901
,
934
,
1290
,
1330
,
1320
,
2312
,
5435
,
2121
],
type
:
"line"
,
areaStyle
:
{}
areaStyle
:
{}
}]
}
};
const
infos
=
[{
id
:
'1'
,
location
:
'孵化器2幢一层'
,
operation
:
'日常巡检'
},
{
id
:
'2'
,
location
:
'孵化器2幢一层'
,
operation
:
'日常巡检'
},
{
id
:
'3'
,
location
:
'孵化器2幢一层'
,
operation
:
'日常巡检'
},
{
id
:
'4'
,
location
:
'孵化器2幢一层'
,
operation
:
'日常巡检'
},
{
id
:
'5'
,
location
:
'孵化器2幢一层'
,
operation
:
'日常巡检'
},
]
]
};
const
infos
=
[
{
id
:
"1"
,
location
:
"孵化器2幢一层"
,
operation
:
"日常巡检"
},
{
id
:
"2"
,
location
:
"孵化器2幢一层"
,
operation
:
"日常巡检"
},
{
id
:
"3"
,
location
:
"孵化器2幢一层"
,
operation
:
"日常巡检"
},
{
id
:
"4"
,
location
:
"孵化器2幢一层"
,
operation
:
"日常巡检"
},
{
id
:
"5"
,
location
:
"孵化器2幢一层"
,
operation
:
"日常巡检"
}
];
const
loading
=
ref
<
boolean
>
(
false
);
const
loading
=
ref
<
boolean
>
(
false
);
return
{
return
{
loading
,
loading
,
infos
,
infos
,
option
,
option
,
option1
,
option1
,
option2
,
option2
,
labelRight
,
labelRight
};
};
}
,
}
};
};
</
script
>
</
script
>
<
style
lang=
"scss"
>
<
style
lang=
"scss"
>
.map
{
.map
{
margin-left
:
5%
;
margin-left
:
5%
;
width
:
90%
;
width
:
90%
;
overflow
:
hidden
;
overflow
:
hidden
;
cursor
:
pointer
;
cursor
:
pointer
;
}
}
.grid-content
{
.grid-content
{
text-align
:
center
;
text-align
:
center
;
line-height
:
30px
;
line-height
:
30px
;
}
}
...
@@ -244,6 +303,10 @@ const option1={
...
@@ -244,6 +303,10 @@ const option1={
padding
:
10px
0
;
padding
:
10px
0
;
background-color
:
#f9fafc
;
background-color
:
#f9fafc
;
}
}
.info
{
line-height
:
50px
;}
.info
{
.infos
{
padding
:
0
25px
;}
line-height
:
50px
;
}
.infos
{
padding
:
0
25px
;
}
</
style
>
</
style
>
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