Skip to content
Projects
Groups
Snippets
Help
Loading...
Sign in / Register
Toggle navigation
W
web-monitor
Project
Project
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
Administrator
web-monitor
Commits
4f7e366c
Commit
4f7e366c
authored
Jan 29, 2022
by
yanzhongrong
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
首页
parent
98b401fb
Show whitespace changes
Inline
Side-by-side
Showing
7 changed files
with
383 additions
and
17 deletions
+383
-17
index.js
src/const/index.js
+5
-0
index.js
src/router/index.js
+5
-5
common.scss
src/styles/common.scss
+6
-1
const.js
src/views/alarm/cableTime/const.js
+74
-0
index.vue
src/views/alarm/cableTime/index.vue
+144
-0
const.js
src/views/dashboard/const.js
+84
-0
index.vue
src/views/dashboard/index.vue
+65
-11
No files found.
src/const/index.js
0 → 100644
View file @
4f7e366c
export
const
alarmLeval
=
{
1
:
'紧急'
,
2
:
'重要'
,
3
:
'一般'
,
}
\ No newline at end of file
src/router/index.js
View file @
4f7e366c
...
...
@@ -58,18 +58,18 @@ export const constantRoutes = [
path
:
'/alarm'
,
component
:
Layout
,
redirect
:
'/dashboard'
,
name
:
'
监测实时状态
'
,
name
:
'
alarm
'
,
meta
:
{
title
:
'告警管理'
,
icon
:
'dashboard'
},
children
:
[
{
path
:
'
leakageCabl
e'
,
name
:
'
漏缆实时状态
'
,
component
:
()
=>
import
(
'@/views/
monitor/leakageCable
'
),
path
:
'
cableTim
e'
,
name
:
'
cableTime
'
,
component
:
()
=>
import
(
'@/views/
alarm/cableTime/index
'
),
meta
:
{
title
:
'漏缆监测告警'
}
},
{
path
:
'equipment'
,
name
:
'
设备实时状态
'
,
name
:
'
device
'
,
component
:
()
=>
import
(
'@/views/monitor/equipment'
),
meta
:
{
title
:
'设备连接告警'
}
}
...
...
src/styles/common.scss
View file @
4f7e366c
...
...
@@ -10,9 +10,14 @@
margin-bottom
:
10px
;
}
.mb20
{
margin-bottom
:
20px
;
}
.ml20
{
margin-left
:
20px
;
}
.flex_clo
{
display
:
flex
;
flex-direction
:
column
;
...
...
src/views/alarm/cableTime/const.js
0 → 100644
View file @
4f7e366c
import
{
alarmLeval
}
from
'@/const/index'
export
const
tableData
=
[
{
name
:
'STATION2未开通'
,
object
:
'漏缆FSU2_R1下行方向'
,
level
:
'紧急'
,
message
:
{
red
:
[
'距离:0米 驻波比:8.72'
],
green
:
[
'距离:18米 驻波比:1.07'
,
'距离:42米 驻波比:1.02'
],
black
:
[
'漏缆百米损耗:2.8'
]
},
uploadDate
:
'2022/12/18 11:51:12'
,
updateDate
:
'2022/12/18 11:51:12'
,
confirmUser
:
'--'
,
confirmTime
:
'--'
,
},
{
name
:
'STATION2未开通'
,
object
:
'漏缆FSU2_R1下行方向'
,
level
:
'紧急'
,
message
:
{
red
:
[
'距离:0米 驻波比:8.72'
],
green
:
[
'距离:18米 驻波比:1.07'
,
'距离:42米 驻波比:1.02'
],
black
:
[
'漏缆百米损耗:2.8'
]
},
uploadDate
:
'2022/12/18 11:51:12'
,
updateDate
:
'2022/12/18 11:51:12'
,
confirmUser
:
'--'
,
confirmTime
:
'--'
,
},
{
name
:
'STATION2未开通'
,
object
:
'漏缆FSU2_R1下行方向'
,
level
:
'重要'
,
message
:
{
red
:
[
'距离:0米 驻波比:8.72'
],
green
:
[
'距离:18米 驻波比:1.07'
,
'距离:42米 驻波比:1.02'
],
black
:
[
'漏缆百米损耗:2.8'
]
},
uploadDate
:
'2022/12/18 11:51:12'
,
updateDate
:
'2022/12/18 11:51:12'
,
confirmUser
:
'admin'
,
confirmTime
:
'2022/12/18 17:51:12'
,
},
{
name
:
'STATION2未开通'
,
object
:
'漏缆FSU2_R1下行方向'
,
level
:
'紧急'
,
message
:
{
red
:
[
'距离:0米 驻波比:8.72'
],
green
:
[
'距离:18米 驻波比:1.07'
,
'距离:42米 驻波比:1.02'
],
black
:
[
'漏缆百米损耗:2.8'
]
},
uploadDate
:
'2022/12/18 11:51:12'
,
updateDate
:
'2022/12/18 11:51:12'
,
confirmUser
:
'admin'
,
confirmTime
:
'2022/12/18 17:51:12'
,
},
{
name
:
'STATION2未开通'
,
object
:
'漏缆FSU2_R1下行方向'
,
level
:
'重要'
,
message
:
{
red
:
[
'距离:0米 驻波比:8.72'
],
green
:
[
'距离:18米 驻波比:1.07'
,
'距离:42米 驻波比:1.02'
],
black
:
[
'漏缆百米损耗:2.8'
]
},
uploadDate
:
'2022/12/18 11:51:12'
,
updateDate
:
'2022/12/18 11:51:12'
,
confirmUser
:
'--'
,
confirmTime
:
'--'
},
]
\ No newline at end of file
src/views/alarm/cableTime/index.vue
0 → 100644
View file @
4f7e366c
<
template
>
<!-- 漏缆实时状态 -->
<div
class=
"leakage-cable"
>
<div
class=
"leakage-top"
>
<el-tabs
v-model=
"activeName"
type=
"card"
>
<el-tab-pane
label=
"全部"
name=
"first"
>
全部
</el-tab-pane>
<el-tab-pane
label=
"已确认"
name=
"second"
>
已确认
</el-tab-pane>
<el-tab-pane
label=
"未确认"
name=
"third"
>
未确认
</el-tab-pane>
</el-tabs>
<div
class=
"operate-btn"
>
<el-button
type=
"primary"
size=
"small"
>
刷新
</el-button>
<el-button
type=
"primary"
size=
"small"
>
查询
</el-button>
<el-button
type=
"primary"
size=
"small"
>
导出
</el-button>
</div>
</div>
<div
style=
"color: #666666"
>
共5条数据
</div>
<el-table
:data=
"tableData"
style=
"width: 100%"
:cell-class-name=
"cellClassFn"
:header-cell-style=
"
{background:'#EAF1FE',color:'#666666'}">
<el-table-column
type=
"index"
label=
"序列号"
width=
"100"
align=
"center"
/>
<el-table-column
prop=
"name"
label=
"基站名称"
width=
"180"
align=
"center"
/>
<el-table-column
prop=
"object"
label=
"告警对象"
width=
"180"
align=
"center"
/>
<el-table-column
prop=
"level"
label=
"告警级别"
width=
"150"
align=
"center"
>
<template
slot-scope=
"scope"
>
<div>
{{
scope
.
row
.
level
}}
</div>
</
template
>
</el-table-column>
<el-table-column
prop=
"message"
label=
"告警信息"
align=
"center"
width=
"300"
>
<
template
slot-scope=
"scope"
>
<div
v-for=
"(item, index) in scope.row.message.red"
:key=
"index+'red'"
class=
"red message"
>
{{
item
}}
</div>
<div
v-for=
"(item, index) in scope.row.message.green"
:key=
"index+'green'"
class=
"green message"
>
{{
item
}}
</div>
<div
v-for=
"(item, index) in scope.row.message.black"
:key=
"index+'black'"
class=
"black message"
>
{{
item
}}
</div>
</
template
>
</el-table-column>
<el-table-column
prop=
"uploadDate"
label=
"最新上传时间"
align=
"center"
/>
<el-table-column
prop=
"updateDate"
label=
"状态变化时间"
align=
"center"
/>
<el-table-column
prop=
"confirmUser"
label=
"确认人"
align=
"center"
/>
<el-table-column
prop=
"confirmTime"
label=
"确认时间"
align=
"center"
/>
<el-table-column
fixed=
"right"
label=
"操作"
width=
"100"
>
<
template
slot-scope=
"scope"
>
<el-button
type=
"text"
size=
"small"
>
确认
</el-button>
</
template
>
</el-table-column>
</el-table>
<pagination
:limit=
"searchForm.pageSize"
:page=
"searchForm.pageNum"
:total=
"total"
class=
"pagination"
@
pagination=
"handlePageChange"
/>
</div>
</template>
<
script
>
import
Pagination
from
'@/components/Pagination'
import
{
tableData
}
from
'./const'
export
default
{
components
:
{
Pagination
},
data
()
{
return
{
activeName
:
'全部'
,
searchForm
:
{
pageNum
:
1
,
pageSize
:
10
},
total
:
10
,
tableData
};
},
methods
:
{
// 表格背景图颜色
cellClassFn
({
row
,
column
,
rowIndex
,
columnIndex
})
{
if
(
row
.
level
==
'紧急'
&&
column
.
label
==
'告警级别'
)
{
return
'emergency'
}
else
if
(
row
.
level
==
'重要'
&&
column
.
label
==
'告警级别'
)
{
return
'important'
}
if
(
rowIndex
%
2
==
1
)
{
return
'stripe'
}
},
handlePageChange
(
pageData
)
{
this
.
searchForm
.
pageSize
=
pageData
.
size
this
.
searchForm
.
pageNum
=
pageData
.
page
}
}
};
</
script
>
<
style
lang=
"scss"
scoped
>
.leakage-cable
{
.leakage-top
{
margin-bottom
:
20px
;
display
:
flex
;
align-items
:
flex-end
;
justify-content
:
space-between
;
}
&
:
:
v-deep
.
cell
{
color
:
#333333
;
}
.message
{
line-height
:
32px
;
}
.red
{
color
:
red
;
}
.green
{
color
:
green
;
}
.black
{
color
:
black
;
}
&
:
:
v-deep
.
stripe
{
background-color
:
#EAF1FE
;
}
&
:
:
v-deep
.
emergency
{
background-color
:
#f00
;
}
&
:
:
v-deep
.
important
{
background-color
:
#f89850
;
}
.page
{
display
:
flex
;
align-items
:
center
;
justify-content
:
center
;
margin
:
20px
0
;
.pageNum
{
margin
:
0
20px
;
}
}
}
</
style
>
src/views/dashboard/const.js
0 → 100644
View file @
4f7e366c
export
const
listData
=
[
{
title
:
'服务器信息'
,
list
:
[
{
name
:
'服务器IP'
,
value
:
'192.168.1.110'
,
},
{
name
:
'操作系统'
,
value
:
'Red Hat EnterpiseLin...'
,
},
{
name
:
'系统软件版本'
,
value
:
'192.168.1.110'
,
},
]
},
{
title
:
'当前状态'
,
list
:
[
{
handle
:
true
,
name
:
'设备状态'
,
value
:
'告警'
,
},
{
handle
:
true
,
name
:
'漏缆状态'
,
value
:
'紧急告警'
,
},
{
name
:
''
,
value
:
''
,
},
]
},
{
title
:
'管理员(admin)管理范围'
,
list
:
[
{
name
:
'基站'
,
value
:
'20个'
,
},
{
name
:
'FSU'
,
value
:
'20台'
,
},
{
name
:
'监测设备'
,
value
:
'81台'
,
},
{
name
:
'混缆'
,
value
:
'142根'
,
},
]
},
{
title
:
'服务器信息'
,
option
:
true
,
list
:
[
{
name
:
'铁路名称'
,
value
:
'张呼铁路客运专线'
,
},
{
name
:
'铁路起点站名'
,
value
:
'张家口'
,
},
{
name
:
'铁路终点站名'
,
value
:
'呼和浩特'
,
},
{
name
:
'铁路总长度(公里)'
,
value
:
'286.8'
,
},
]
},
]
\ No newline at end of file
src/views/dashboard/index.vue
View file @
4f7e366c
<
template
>
<div
class=
"dashboard-container"
>
<!--
<OrgTree
/>
-->
<!-- 首页 -->
<el-row
:gutter=
"24"
>
<el-col
:span=
"12"
v-for=
"item in listData"
class=
"mb20"
>
<el-card
shadow=
"never"
>
<div
slot=
"header"
class=
"clearfix"
>
<span>
{{
item
.
title
}}
</span>
<el-button
v-if=
"item.option"
style=
"float: right; padding: 3px 0"
type=
"text"
>
保存
</el-button>
</div>
<div
v-for=
"k in item.list"
:key=
"k.name"
class=
"text"
>
<el-row
:gutter=
"24"
>
<el-col
:span=
"10"
>
<div
class=
"item_name"
>
{{
k
.
name
}}
</div>
</el-col>
<el-col
:span=
"14"
>
<div
v-if=
"item.option"
>
<el-input
v-model=
"k.value"
clearable
placeholder=
"请输入内容"
>
{{
k
.
value
}}
</el-input>
</div>
<el-row
:gutter=
"20"
v-else-if=
"k.handle"
>
<el-col
:span=
"10"
class=
"value_handle"
>
{{
k
.
value
}}
</el-col>
<el-col
:span=
"10"
><el-button
size=
"mini"
type=
"primary"
>
处理告警
</el-button></el-col>
</el-row>
<div
v-else
>
{{
k
.
value
}}
</div>
</el-col>
</el-row>
</div>
</el-card>
</el-col>
</el-row>
<div>
</div>
</div>
</
template
>
<
script
>
import
{
mapGetters
}
from
'vuex'
import
OrgTree
from
'@/components/orgTree.vue'
import
{
listData
}
from
'./const'
export
default
{
name
:
'Dashboard'
,
components
:
{
OrgTree
data
()
{
return
{
listData
}
},
computed
:
{
...
mapGetters
([
...
...
@@ -22,13 +54,35 @@ export default {
</
script
>
<
style
lang=
"scss"
scoped
>
.dashboard
{
&
-container
{
margin
:
0px
;
::v-deep
.el-card
{
border
:
1px
solid
#E3E3E3
;
border-radius
:
8px
;
min-height
:
300px
;
.el-card__header
{
font-size
:
18px
;
color
:
#333333
;
font-weight
:
500
;
text-align
:
center
;
background
:
rgba
(
226
,
235
,
255
,
0
.39
);
opacity
:
1
;
}
}
// .el-col {
// margin-bottom: 20px;
// }
.text
{
// display: flex;
padding
:
20px
;
border-bottom
:
1px
solid
#E3E3E3
;
&
:last-child
{
border-bottom
:
none
;
}
.item_name
{
width
:
262px
;
}
&
-text
{
font-size
:
30px
;
line-height
:
46
px
;
.value_handle
{
color
:red
;
margin-right
:
10
px
;
}
}
</
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