Skip to content

W
web-monitor
Commit ccf9e422 authored by 许倩倩's avatar 许倩倩
Browse files
Options

监测实时状态

parent 464317a4
Show whitespace changes
Inline Side-by-side
Showing with 408 additions and 7 deletions
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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment