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
ccf9e422
Commit
ccf9e422
authored
Jan 28, 2022
by
许倩倩
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
监测实时状态
parent
464317a4
Show whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
408 additions
and
7 deletions
+408
-7
main.js
src/main.js
+1
-1
index.js
src/router/index.js
+16
-6
equipment.vue
src/views/monitor/equipment.vue
+209
-0
leakageCable.vue
src/views/monitor/leakageCable.vue
+182
-0
No files found.
src/main.js
View file @
ccf9e422
...
@@ -4,7 +4,7 @@ import 'normalize.css/normalize.css' // A modern alternative to CSS resets
...
@@ -4,7 +4,7 @@ import 'normalize.css/normalize.css' // A modern alternative to CSS resets
import
ElementUI
from
'element-ui'
import
ElementUI
from
'element-ui'
import
'element-ui/lib/theme-chalk/index.css'
import
'element-ui/lib/theme-chalk/index.css'
import
locale
from
'element-ui/lib/locale/lang/
en
'
// lang i18n
import
locale
from
'element-ui/lib/locale/lang/
zh-CN
'
// lang i18n
import
'@/styles/index.scss'
// global css
import
'@/styles/index.scss'
// global css
...
...
src/router/index.js
View file @
ccf9e422
...
@@ -80,12 +80,22 @@ export const constantRoutes = [
...
@@ -80,12 +80,22 @@ export const constantRoutes = [
path
:
'/monitor'
,
path
:
'/monitor'
,
component
:
Layout
,
component
:
Layout
,
redirect
:
'/dashboard'
,
redirect
:
'/dashboard'
,
children
:
[{
name
:
'监测实时状态'
,
path
:
'monitor'
,
meta
:
{
title
:
'监测实时状态'
,
icon
:
'dashboard'
},
name
:
'Monitor'
,
children
:
[
component
:
()
=>
import
(
'@/views/dashboard/index'
),
{
meta
:
{
title
:
'监测实时状态'
,
icon
:
'dashboard'
}
path
:
'leakageCable'
,
}]
name
:
'漏缆实时状态'
,
component
:
()
=>
import
(
'@/views/monitor/leakageCable'
),
meta
:
{
title
:
'漏缆实时状态'
}
},
{
path
:
'equipment'
,
name
:
'设备实时状态'
,
component
:
()
=>
import
(
'@/views/monitor/equipment'
),
meta
:
{
title
:
'设备实时状态'
}
}
]
},
},
{
{
path
:
'/maintain'
,
path
:
'/maintain'
,
...
...
src/views/monitor/equipment.vue
0 → 100644
View file @
ccf9e422
<
template
>
<!-- 漏缆实时状态 -->
<div
class=
"leakage-cable"
>
<div
class=
"leakage-top"
>
<div
class=
"operate-btn"
>
<el-button
type=
"primary"
>
刷新
</el-button>
<el-button
type=
"primary"
>
查询
</el-button>
<el-button
type=
"primary"
>
导出
</el-button>
</div>
<div>
共6条数据
</div>
</div>
<el-table
:data=
"tableData"
style=
"width: 100%"
:cell-class-name=
"cellClassFn"
:header-cell-style=
"
{background:'#EAF1FE',color:'#000'}">
<el-table-column
prop=
"equipment1"
label=
"网元设备"
align=
"center"
/>
<el-table-column
prop=
"state1"
label=
"连接状态"
align=
"center"
/>
<el-table-column
prop=
"equipment2"
label=
"网元设备"
align=
"center"
/>
<el-table-column
prop=
"state2"
label=
"连接状态"
align=
"center"
/>
<el-table-column
prop=
"equipment3"
label=
"网元设备"
align=
"center"
/>
<el-table-column
prop=
"uploadDate"
label=
"上传时间"
align=
"center"
/>
</el-table>
<div
class=
"page"
>
<el-button>
上一页
</el-button>
<span
class=
"pageNum"
>
2/5
</span>
<el-button>
下一页
</el-button>
</div>
</div>
</
template
>
<
script
>
export
default
{
data
()
{
return
{
tableData
:
[
{
equipment1
:
'监控中心LSC'
,
state1
:
'连接正常'
,
equipment2
:
'现场管理单元 K65+308'
,
state2
:
'连接异常'
,
equipment3
:
'天馈线A_K4563_535'
,
uploadDate
:
'2022/12/18 11:51:12'
},
{
equipment1
:
'监控中心LSC'
,
state1
:
'连接异常'
,
equipment2
:
'现场管理单元 K65+308'
,
state2
:
'连接正常'
,
equipment3
:
'天馈线A_K4563_535'
,
uploadDate
:
'2022/12/18 11:51:12'
},{
equipment1
:
'监控中心LSC'
,
state1
:
'连接异常'
,
equipment2
:
'现场管理单元 K65+308'
,
state2
:
'连接异常'
,
equipment3
:
'天馈线A_K4563_535'
,
uploadDate
:
'2022/12/18 11:51:12'
},{
equipment1
:
'监控中心LSC'
,
state1
:
'连接正常'
,
equipment2
:
'现场管理单元 K65+308'
,
state2
:
'连接异常'
,
equipment3
:
'天馈线A_K4563_535'
,
uploadDate
:
'2022/12/18 11:51:12'
},
{
equipment1
:
'监控中心LSC'
,
state1
:
'连接异常'
,
equipment2
:
'现场管理单元 K65+308'
,
state2
:
'连接正常'
,
equipment3
:
'天馈线A_K4563_535'
,
uploadDate
:
'2022/12/18 11:51:12'
},{
equipment1
:
'监控中心LSC'
,
state1
:
'连接异常'
,
equipment2
:
'现场管理单元 K65+308'
,
state2
:
'连接异常'
,
equipment3
:
'天馈线A_K4563_535'
,
uploadDate
:
'2022/12/18 11:51:12'
},{
equipment1
:
'监控中心LSC'
,
state1
:
'连接正常'
,
equipment2
:
'现场管理单元 K65+308'
,
state2
:
'连接异常'
,
equipment3
:
'天馈线A_K4563_535'
,
uploadDate
:
'2022/12/18 11:51:12'
},
{
equipment1
:
'监控中心LSC'
,
state1
:
'连接异常'
,
equipment2
:
'现场管理单元 K65+308'
,
state2
:
'连接正常'
,
equipment3
:
'天馈线A_K4563_535'
,
uploadDate
:
'2022/12/18 11:51:12'
},{
equipment1
:
'监控中心LSC'
,
state1
:
'连接异常'
,
equipment2
:
'现场管理单元 K65+308'
,
state2
:
'连接异常'
,
equipment3
:
'天馈线A_K4563_535'
,
uploadDate
:
'2022/12/18 11:51:12'
},{
equipment1
:
'监控中心LSC'
,
state1
:
'连接正常'
,
equipment2
:
'现场管理单元 K65+308'
,
state2
:
'连接异常'
,
equipment3
:
'天馈线A_K4563_535'
,
uploadDate
:
'2022/12/18 11:51:12'
},
{
equipment1
:
'监控中心LSC'
,
state1
:
'连接异常'
,
equipment2
:
'现场管理单元 K65+308'
,
state2
:
'连接正常'
,
equipment3
:
'天馈线A_K4563_535'
,
uploadDate
:
'2022/12/18 11:51:12'
},{
equipment1
:
'监控中心LSC'
,
state1
:
'连接异常'
,
equipment2
:
'现场管理单元 K65+308'
,
state2
:
'连接异常'
,
equipment3
:
'天馈线A_K4563_535'
,
uploadDate
:
'2022/12/18 11:51:12'
},{
equipment1
:
'监控中心LSC'
,
state1
:
'连接正常'
,
equipment2
:
'现场管理单元 K65+308'
,
state2
:
'连接异常'
,
equipment3
:
'天馈线A_K4563_535'
,
uploadDate
:
'2022/12/18 11:51:12'
},
{
equipment1
:
'监控中心LSC'
,
state1
:
'连接异常'
,
equipment2
:
'现场管理单元 K65+308'
,
state2
:
'连接正常'
,
equipment3
:
'天馈线A_K4563_535'
,
uploadDate
:
'2022/12/18 11:51:12'
},{
equipment1
:
'监控中心LSC'
,
state1
:
'连接异常'
,
equipment2
:
'现场管理单元 K65+308'
,
state2
:
'连接异常'
,
equipment3
:
'天馈线A_K4563_535'
,
uploadDate
:
'2022/12/18 11:51:12'
}
],
};
},
methods
:
{
// 表格背景图颜色
cellClassFn
({
row
,
column
,
rowIndex
,
columnIndex
})
{
console
.
log
(
row
,
'row'
)
console
.
log
(
column
,
'column'
)
if
((
row
.
state1
==
'连接正常'
&&
column
.
property
==
'state1'
))
{
return
'green'
}
if
((
row
.
state1
==
'连接异常'
&&
column
.
property
==
'state1'
))
{
return
'red'
}
if
((
row
.
state2
==
'连接正常'
&&
column
.
property
==
'state2'
))
{
return
'green'
}
else
if
((
row
.
state2
==
'连接异常'
&&
column
.
property
==
'state2'
))
{
return
'red'
}
if
(
rowIndex
%
2
==
1
)
{
return
'stripe'
}
},
handleSizeChange
(
val
)
{
console
.
log
(
`每页
${
val
}
条`
);
},
handleCurrentChange
(
val
)
{
console
.
log
(
`当前页:
${
val
}
`
);
}
}
};
</
script
>
<
style
lang=
"scss"
scoped
>
.leakage-cable
{
.leakage-top
{
margin
:
20px
;
display
:
flex
;
align-items
:
center
;
justify-content
:
space-between
;
}
&
:
:
v-deep
.
cell
{
color
:
#000
;
}
&
:
:
v-deep
.
stripe
{
background-color
:
#EAF1FE
;
}
&
:
:
v-deep
.
red
{
background-color
:
#f00
;
}
&
:
:
v-deep
.
green
{
background-color
:
green
;
}
.page
{
display
:
flex
;
align-items
:
center
;
justify-content
:
center
;
margin
:
20px
0
;
.pageNum
{
margin
:
0
20px
;
}
}
}
</
style
>
src/views/monitor/leakageCable.vue
0 → 100644
View file @
ccf9e422
<
template
>
<!-- 漏缆实时状态 -->
<div
class=
"leakage-cable"
>
<div
class=
"leakage-top"
>
<div
class=
"operate-btn"
>
<el-button
type=
"primary"
>
刷新
</el-button>
<el-button
type=
"primary"
>
查询
</el-button>
<el-button
type=
"primary"
>
导出
</el-button>
</div>
<div>
共6条数据
</div>
</div>
<el-table
:data=
"tableData"
style=
"width: 100%"
:cell-class-name=
"cellClassFn"
:header-cell-style=
"
{background:'#EAF1FE',color:'#000'}">
<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
:class=
"scope.row.level == '重要'?'red':'orange'"
>
{{
scope
.
row
.
level
}}
</div>
</
template
>
</el-table-column>
<el-table-column
prop=
"message"
label=
"告警信息"
align=
"center"
>
<
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+'red'"
class=
"green message"
>
{{
item
}}
</div>
<div
v-for=
"(item, index) in scope.row.message.black"
:key=
"index+'red'"
class=
"black message"
>
{{
item
}}
</div>
</
template
>
</el-table-column>
<el-table-column
prop=
"uploadDate"
label=
"最新上传时间"
align=
"center"
/>
</el-table>
<div
class=
"page"
>
<el-button>
上一页
</el-button>
<span
class=
"pageNum"
>
2/5
</span>
<el-button>
下一页
</el-button>
</div>
</div>
</template>
<
script
>
export
default
{
data
()
{
return
{
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'
},
{
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'
},{
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'
},{
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'
},{
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'
},{
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'
}
],
};
},
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'
}
},
handleSizeChange
(
val
)
{
console
.
log
(
`每页
${
val
}
条`
);
},
handleCurrentChange
(
val
)
{
console
.
log
(
`当前页:
${
val
}
`
);
}
}
};
</
script
>
<
style
lang=
"scss"
scoped
>
.leakage-cable
{
.leakage-top
{
margin
:
20px
;
display
:
flex
;
align-items
:
center
;
justify-content
:
space-between
;
}
&
:
:
v-deep
.
cell
{
color
:
#000
;
}
.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
>
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