Commit b1532e68 authored by yanzhongrong's avatar yanzhongrong

Merge branch 'dev' of http://39.105.40.203/root/web-monitor into dev

parents 0594891d fbcf17a0
<template> <template>
<!-- 漏缆实时状态 --> <!-- 漏缆实时状态 -->
<div class="leakage-cable"> <div class="leakage-cable">
<breadcrumb />
<div class="leakage-top"> <div class="leakage-top">
<div>
共6条数据
</div>
<div class="operate-btn"> <div class="operate-btn">
<el-button type="primary">刷新</el-button> <el-button type="primary">刷新</el-button>
<el-button type="primary">查询</el-button> <el-button type="primary">查询</el-button>
<el-button type="primary">导出</el-button> <el-button type="primary">导出</el-button>
</div> </div>
<div>
共6条数据
</div>
</div> </div>
<el-table :data="tableData" style="width: 100%" :cell-class-name="cellClassFn" :header-cell-style="{background:'#EAF1FE',color:'#000'}"> <el-table :data="tableData" style="width: 100%" :cell-class-name="cellClassFn" :header-cell-style="{background:'#EAF1FE',color:'#666666'}">
<el-table-column prop="equipment1" label="网元设备" align="center" /> <el-table-column prop="equipment1" label="网元设备" align="center" />
<el-table-column prop="state1" label="连接状态" align="center" /> <el-table-column prop="state1" label="连接状态" align="center" />
<el-table-column prop="equipment2" label="网元设备" align="center" /> <el-table-column prop="equipment2" label="网元设备" align="center" />
...@@ -19,18 +20,29 @@ ...@@ -19,18 +20,29 @@
<el-table-column prop="equipment3" label="网元设备" align="center" /> <el-table-column prop="equipment3" label="网元设备" align="center" />
<el-table-column prop="uploadDate" label="上传时间" align="center" /> <el-table-column prop="uploadDate" label="上传时间" align="center" />
</el-table> </el-table>
<div class="page"> <pagination
<el-button>上一页</el-button> :limit="searchForm.pageSize"
<span class="pageNum">2/5</span> :page="searchForm.pageNum"
<el-button>下一页</el-button> :total="total"
</div> class="pagination"
@pagination="handlePageChange"
/>
</div> </div>
</template> </template>
<script> <script>
import Breadcrumb from '@/components/Breadcrumb'
import Pagination from '@/components/Pagination'
export default { export default {
components: { Pagination, Breadcrumb },
data() { data() {
return { return {
searchForm: {
pageNum: 1,
pageSize: 10
},
total: 10,
tableData: [ tableData: [
{ {
equipment1: '监控中心LSC', equipment1: '监控中心LSC',
...@@ -149,8 +161,6 @@ export default { ...@@ -149,8 +161,6 @@ export default {
methods: { methods: {
// 表格背景图颜色 // 表格背景图颜色
cellClassFn({row, column, rowIndex, columnIndex}) { cellClassFn({row, column, rowIndex, columnIndex}) {
console.log(row, 'row')
console.log(column, 'column')
if ((row.state1 == '连接正常' && column.property == 'state1')) { if ((row.state1 == '连接正常' && column.property == 'state1')) {
return 'green' return 'green'
} }
...@@ -166,11 +176,9 @@ export default { ...@@ -166,11 +176,9 @@ export default {
return 'stripe' return 'stripe'
} }
}, },
handleSizeChange(val) { handlePageChange(pageData) {
console.log(`每页 ${val} 条`); this.searchForm.pageSize = pageData.size
}, this.searchForm.pageNum = pageData.page
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
} }
} }
}; };
...@@ -179,13 +187,13 @@ export default { ...@@ -179,13 +187,13 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.leakage-cable { .leakage-cable {
.leakage-top { .leakage-top {
margin: 20px; margin-bottom: 20px;
display: flex; display: flex;
align-items: center; align-items: flex-end;
justify-content: space-between; justify-content: space-between;
} }
& ::v-deep .cell { & ::v-deep .cell {
color: #000; color: #333333;
} }
& ::v-deep .stripe { & ::v-deep .stripe {
background-color: #EAF1FE; background-color: #EAF1FE;
......
<template> <template>
<!-- 漏缆实时状态 --> <!-- 漏缆实时状态 -->
<div class="leakage-cable"> <div class="leakage-cable">
<breadcrumb />
<div class="leakage-top"> <div class="leakage-top">
<div style="color: #666666">
共6条数据
</div>
<div class="operate-btn"> <div class="operate-btn">
<el-button type="primary">刷新</el-button> <el-button type="primary">刷新</el-button>
<el-button type="primary">查询</el-button> <el-button type="primary">查询</el-button>
<el-button type="primary">导出</el-button> <el-button type="primary">导出</el-button>
</div> </div>
<div>
共6条数据
</div>
</div> </div>
<el-table :data="tableData" style="width: 100%" :cell-class-name="cellClassFn" :header-cell-style="{background:'#EAF1FE',color:'#000'}"> <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 type="index" label="序列号" width="100" align="center" />
<el-table-column prop="name" label="基站名称" width="180" 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="object" label="告警对象" width="180" align="center" />
<el-table-column prop="level" label="告警级别" width="150" align="center"> <el-table-column prop="level" label="告警级别" width="150" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<div :class="scope.row.level == '重要'?'red':'orange'"> <div>
{{ scope.row.level }} {{ scope.row.level }}
</div> </div>
</template> </template>
...@@ -27,28 +28,39 @@ ...@@ -27,28 +28,39 @@
<div v-for="(item, index) in scope.row.message.red" :key="index+'red'" class="red message"> <div v-for="(item, index) in scope.row.message.red" :key="index+'red'" class="red message">
{{ item }} {{ item }}
</div> </div>
<div v-for="(item, index) in scope.row.message.green" :key="index+'red'" class="green message"> <div v-for="(item, index) in scope.row.message.green" :key="index+'green'" class="green message">
{{ item }} {{ item }}
</div> </div>
<div v-for="(item, index) in scope.row.message.black" :key="index+'red'" class="black message"> <div v-for="(item, index) in scope.row.message.black" :key="index+'black'" class="black message">
{{ item }} {{ item }}
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="uploadDate" label="最新上传时间" align="center" /> <el-table-column prop="uploadDate" label="最新上传时间" align="center" />
</el-table> </el-table>
<div class="page"> <pagination
<el-button>上一页</el-button> :limit="searchForm.pageSize"
<span class="pageNum">2/5</span> :page="searchForm.pageNum"
<el-button>下一页</el-button> :total="total"
</div> class="pagination"
@pagination="handlePageChange"
/>
</div> </div>
</template> </template>
<script> <script>
import Breadcrumb from '@/components/Breadcrumb'
import Pagination from '@/components/Pagination'
export default { export default {
components: { Pagination, Breadcrumb },
data() { data() {
return { return {
searchForm: {
pageNum: 1,
pageSize: 10
},
total: 10,
tableData: [ tableData: [
{ {
name: 'STATION2未开通', name: 'STATION2未开通',
...@@ -127,11 +139,9 @@ export default { ...@@ -127,11 +139,9 @@ export default {
return 'stripe' return 'stripe'
} }
}, },
handleSizeChange(val) { handlePageChange(pageData) {
console.log(`每页 ${val} 条`); this.searchForm.pageSize = pageData.size
}, this.searchForm.pageNum = pageData.page
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
} }
} }
}; };
...@@ -140,13 +150,13 @@ export default { ...@@ -140,13 +150,13 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.leakage-cable { .leakage-cable {
.leakage-top { .leakage-top {
margin: 20px; margin-bottom: 20px;
display: flex; display: flex;
align-items: center; align-items: flex-end;
justify-content: space-between; justify-content: space-between;
} }
& ::v-deep .cell { & ::v-deep .cell {
color: #000; color: #333333;
} }
.message { .message {
line-height: 32px; line-height: 32px;
......
<template> <template>
<div> <div>
<div class="title">修改基本信息</div>
<el-form ref="form" :model="form" label-width="100px" :rules="rules"> <el-form ref="form" :model="form" label-width="100px" :rules="rules">
<el-form-item label="用户名:" prop="name"> <el-form-item label="用户名:" prop="name">
<el-input v-model="form.name" /> <el-input v-model="form.name" />
...@@ -55,4 +56,19 @@ export default { ...@@ -55,4 +56,19 @@ export default {
margin-top: 50px; margin-top: 50px;
text-align: center; text-align: center;
} }
.title {
width: 100%;
height: 60px;
background: rgba(226, 235, 255, 0.39);
line-height: 60px;
font-size: 18px;
color: #333;
font-weight: 500;
text-align: center;
margin-bottom: 30px;
}
.el-form {
width: 500px;
margin: 0 auto;
}
</style> </style>
<template> <template>
<div> <div>
<div class="title">修改密码</div>
<el-form ref="form" :model="form" label-width="100px" :rules="rules"> <el-form ref="form" :model="form" label-width="100px" :rules="rules">
<el-form-item label="用户名:" prop="name"> <el-form-item label="用户名:" prop="name">
<el-input v-model="form.name" /> <el-input v-model="form.name" />
...@@ -67,4 +68,19 @@ export default { ...@@ -67,4 +68,19 @@ export default {
margin-top: 50px; margin-top: 50px;
text-align: center; text-align: center;
} }
.el-form {
width: 500px;
margin: 0 auto;
}
.title {
width: 100%;
height: 60px;
background: rgba(226, 235, 255, 0.39);
line-height: 60px;
font-size: 18px;
color: #333;
font-weight: 500;
text-align: center;
margin-bottom: 30px;
}
</style> </style>
...@@ -43,31 +43,21 @@ export default { ...@@ -43,31 +43,21 @@ export default {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.update-user-container {
width: 500px;
margin: 0 auto;
}
.header { .header {
display: flex; display: flex;
justify-content: center; justify-content: center;
margin: 30px 0 50px 0; margin-bottom: 30px;
.tab { .tab {
background: #f3f3f3;
display: flex; display: flex;
height: 40px;
border-radius: 10px;
cursor: pointer; cursor: pointer;
.tab-item { .tab-item {
width: 130px; margin: 0 50px;
line-height: 40px; padding-bottom: 10px;
text-align: center;
font-size: 14px;
color: #666666;
} }
.tab-active { .tab-active {
color: #fff; color: #038ed7;
background: #409eff; border-bottom: 1px solid #038ed7;
border-radius: 10px;
} }
} }
} }
......
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