Skip to content

W
web-monitor
Commit 2b8449f7 authored by neogcg's avatar neogcg
Browse files
Options

样式修改

parent a3aa099c
Hide whitespace changes
Inline Side-by-side
Showing with 462 additions and 156 deletions
dist.zip 0 → 100644
View file @ 2b8449f7
File added
dist1.zip 0 → 100644
View file @ 2b8449f7
File added
src/components/orgTree.vue
View file @ 2b8449f7
......@@ -209,7 +209,7 @@ export default {
.el-select-tree {
width: 300px;
height: calc(100vh - 10px);
background: rgba(238, 247, 254, 0.39);
background: rgba(255, 255, 255, 1);
.tree_header {
display: flex;
justify-content: center;
......@@ -224,4 +224,7 @@ export default {
// border: 1px dotted;
// display: inline-block;
}
.el-tree-node.is-current > .el-tree-node__content {
background-color: #deeaff !important;
}
</style>
\ No newline at end of file
src/layout/components/AppMain.vue
View file @ 2b8449f7
......@@ -20,13 +20,13 @@ export default {
<style scoped>
.app-main {
margin: 0 20px 20px 20px;
padding: 20px;
margin: 0 0px 20px 20px;
padding: 20px 20px 20px 20px;
background: #fff;
border-radius: 8px;
/*50 = navbar */
min-height: calc(100vh - 50px);
width: 100%;
width: 98%;
position: relative;
overflow: hidden;
}
......
src/layout/components/Navbar.vue
View file @ 2b8449f7
......@@ -11,8 +11,9 @@
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item divided @click.native="logout">
<span style="display:block;">退出</span>
<span style="display:block;">退出登录</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<span style="color: white; padding-right: 10px"> {{ dateTime }}</span>
......@@ -115,7 +116,7 @@ export default {
line-height: 50px;
position: absolute;
top: 5px;
right: 20px;
right: 30px;
&:focus {
outline: none;
......@@ -163,4 +164,34 @@ export default {
}
}
}
.el-dropdown-menu__item{
color:#B2DDFF;
}
.el-popper[x-placement^=bottom] {
margin-top: 5px;
}
.el-dropdown-menu__item--divided{
border:none;
margin-top: 0;
}
.el-dropdown-menu__item--divided:before{
content: '';
height: 6px;
display: none;
margin: 0;
background-color: transparent;
}
</style>
<style>
.el-popper .popper__arrow{
display: none !important;
}
.el-dropdown-menu{
padding:5px 0;
background: #2066f9;
}
.el-dropdown-menu__item:not(.is-disabled):hover{
background-color: #1a52c7;
color: #fff;
}
</style>
src/router/index.js
View file @ 2b8449f7
......@@ -188,7 +188,13 @@ export const constantRoutes = [
name: 'UserList',
component: () => import('@/views/user/userList'),
meta: { title: '用户信息列表' }
}
},
{
path: 'userLog',
name: 'UserLog',
component: () => import('@/views/user/userLog'),
meta: { title: '用户操作日志' }
},
]
},
// 404 page must be placed at the end !!!
......
src/styles/common.scss
View file @ 2b8449f7
......@@ -22,3 +22,6 @@
display: flex;
flex-direction: column;
}
.leakage-cable .leakage-top{
padding-right: 10px;
}
src/styles/element-ui.scss
View file @ 2b8449f7
......@@ -71,7 +71,7 @@
// button
.el-button--primary {
color: #fff;
background: rgba(11, 65, 177);
background: #2066F9 !important;
opacity: 1;
border-radius: 4px;
}
......
src/styles/sidebar.scss
View file @ 2b8449f7
......@@ -207,6 +207,7 @@
&:hover {
// you can use $subMenuHover
background-color: $menuHover !important;
color:#fff !important;
}
}
......
src/styles/variables.scss
View file @ 2b8449f7
// sidebar
$menuText:#fff;
$menuActiveText:#333;
$subMenuActiveText:#fff; //https://github.com/ElemeFE/element/issues/12951
$menuText:#B2DDFF;//标题未选中颜色
$menuActiveText:#fff;//标题选中
$subMenuActiveText:#fff; //子菜单选中颜色//https://github.com/ElemeFE/element/issues/12951
$menuBg:#2066F9;
$menuHover:#263445;
$menuBg:#2066F9;//标题背景
$menuHover:#1a52c7;//标题悬浮色
$subMenuBg:#1f2d3d;
$subMenuHover:#001528;
$subMenuBg:#2066F9;
$subMenuHover:#1a52c7;
$sideBarWidth: 120px;
......
src/views/alarm/cableTime/index.vue
View file @ 2b8449f7
<template>
<!-- 漏缆实时状态 -->
<div class="leakage-cable">
<div class="leakage-top">
<el-button-group>
<div class="leakage-cable"><el-button-group>
<el-button v-for="item in tabs" :key="item.key" :type="activeName === item.key ? 'primary' : ''" @click="changeType(item)">{{ item.label }}</el-button>
</el-button-group>
<div class="leakage-top">
<div style="color: #666666">
共5条数据
</div>
<div class="operate-btn">
<el-button type="primary">刷新</el-button>
<el-button type="primary">查询</el-button>
<el-button type="primary">导出</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" />
......
src/views/alarm/device/index.vue
View file @ 2b8449f7
<template>
<!-- 漏缆实时状态 -->
<div class="leakage-cable">
<div class="leakage-top">
<el-button-group>
<div class="leakage-cable">
<el-button-group>
<el-button v-for="item in tabs" :key="item.key" :type="activeName === item.key ? 'primary' : ''" @click="changeType(item)">{{ item.label }}</el-button>
</el-button-group>
<div class="leakage-top">
<div style="color: #666666">共6条数据</div>
<div class="operate-btn">
<el-button type="primary">刷新</el-button>
<el-button type="primary">查询</el-button>
<el-button type="primary">导出</el-button>
</div>
</div>
<div>
共6条数据
</div>
<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="state1" label="连接状态" align="center" />
......
src/views/dashboard/index.vue
View file @ 2b8449f7
......@@ -9,20 +9,20 @@
<span>{{ item.title }}</span>
<el-button v-if="item.option" style="float: right; padding: 3px 0;margin-right:20px" type="text">保存</el-button>
</div>
<div v-for="k in item.list" :key="k.name" class="text">
<div v-for="k in item.list" :key="k.name" :class="item.list.length<=2? 'text2' : '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" size="mini" clearable placeholder="请输入内容">{{ k.value }}</el-input>
<el-col :span="10">
<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 type="primary" size="mini">处理告警</el-button></el-col>
<el-col :span="10"><el-button class="alarmbtn" type="primary" size="mini">处理告警</el-button></el-col>
</el-row>
<div v-else>{{ k.value }}</div>
<div class="item_data" v-else>{{ k.value }}</div>
</el-col>
</el-row>
</div>
......@@ -69,7 +69,7 @@ export default {
::v-deep.el-card {
border: 1px solid #E3E3E3;
border-radius: 8px;
min-height: 300px;
min-height: 243px;
.el-card__header {
font-size: 18px;
color: #333333;
......@@ -78,25 +78,88 @@ export default {
background: rgba(226, 235, 255, 0.39);
opacity: 1;
}
.el-card__body {
padding: 0px;
}
}
// .el-col {
// margin-bottom: 20px;
// }
.text {
// display: flex;
padding: 20px;
padding: 10px 20px 10px 20px;
border-bottom: 1px solid #E3E3E3;
&:last-child {
border-bottom: none;
}
.item_name ,.item_data ,.value_handle {
height: 16px;
line-height: 16px;
margin-top: 12px;
margin-bottom: 12px;
}
.item_name {
width: 262px;
height: 26px;
line-height: 1;
height: 16px;
line-height: 16px;
color:#7E7E7E;
margin-top: 12px;
margin-bottom: 12px;
}
.item_data{
}
.value_handle {
color:red;
margin-right: 10px;
}
.alarmbtn{
margin-top: 6px;
margin-bottom: 6px;
}
.el-card:last-child .text {
border-bottom: none !important;
}
}
.text2 {
// display: flex;
padding: 10px 20px 10px 20px;
border-bottom: 1px solid #E3E3E3;
.item_name ,.item_data ,.value_handle {
height: 16px;
line-height: 16px;
margin-top: 12px;
margin-bottom: 12px;
}
.item_name {
width: 262px;
height: 16px;
line-height: 16px;
color:#7E7E7E;
margin-top: 12px;
margin-bottom: 12px;
}
.item_data{
}
.value_handle {
color:red;
margin-right: 10px;
}
.alarmbtn{
margin-top: 6px;
margin-bottom: 6px;
}
.el-card:last-child .text {
border-bottom: none !important;
}
}
</style>
src/views/history/deviceLinkRepair/index.vue
View file @ 2b8449f7
......@@ -34,11 +34,11 @@
</el-table-column>
<el-table-column prop="netDevice2" label="网元设备" align="center">
</el-table-column>
<el-table-column prop="repairPerson" label="网元设备" align="center">
<el-table-column prop="repairPerson" label="维修人员信息" align="center">
</el-table-column>
<el-table-column
prop="linkRepairDate"
label="链接告警维修时间"
label="连接告警维修时间"
align="center"
/>
......
src/views/setting/statistics/index.vue
View file @ 2b8449f7
<template>
<div class="statistics">
<div class="header">
<div class="header-left">
<el-button-group>
<el-button v-for="item in tabs" :key="item.key" :type="activeName === item.key ? 'primary' : ''" @click="changeType(item)">{{ item.label }}</el-button>
</el-button-group>
</div>
<div class="header-right">
<div class="leakage-cable">
<el-button-group>
<el-button
v-for="item in tabs"
:key="item.key"
:type="activeName === item.key ? 'primary' : ''"
@click="changeType(item)"
>{{ item.label }}</el-button
>
</el-button-group>
<div class="leakage-top">
<div style="color: #666666">共10条数据</div>
<div class="operate-btn">
<el-button
:type="multipleSelection.length ? 'primary' : 'info'"
:disabled="!multipleSelection.length"
@click="delData"
>删除</el-button>
>删除</el-button
>
<el-button type="primary" @click="refresh">刷新</el-button>
<el-button type="primary" @click="query">查询</el-button>
<el-button
type="primary"
@click="exportData"
>导出</el-button>
<el-button type="primary" @click="exportData">导出</el-button>
</div>
</div>
<el-table
......@@ -28,7 +32,12 @@
style="width: 100%"
:row-class-name="tableRowClassName"
:row-style="{ height: '50px' }"
:header-cell-style="{background:'#eaf1fe',color:'#000', fontWeight: 700, height: '50px'}"
:header-cell-style="{
background: '#eaf1fe',
color: '#000',
fontWeight: 700,
height: '50px',
}"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
......@@ -53,11 +62,9 @@
align="center"
>
<template slot-scope="{ row }">
<el-link
type="primary"
:underline="false"
@click="handleView(row)"
>查看</el-link>
<el-link type="primary" :underline="false" @click="handleView(row)"
>查看</el-link
>
</template>
</el-table-column>
</el-table>
......@@ -72,148 +79,169 @@
</template>
<script>
import Pagination from '@/components/Pagination'
import Pagination from "@/components/Pagination";
export default {
components: { Pagination },
data() {
return {
searchForm: {
pageNum: 1,
pageSize: 10
pageSize: 10,
},
total: 10,
activeName: '0',
activeName: "0",
tabs: [
{
label: '铁路线',
key: '0'
label: "铁路线",
key: "0",
},
{
label: '站点',
key: '1'
label: "站点",
key: "1",
},
{
label: 'FSU',
key: '2'
label: "FSU",
key: "2",
},
{
label: '检测设备',
key: '3'
label: "检测设备",
key: "3",
},
{
label: '漏缆',
key: '4'
label: "漏缆",
key: "4",
},
{
label: '天馈线',
key: '5'
}
label: "天馈线",
key: "5",
},
],
tableData: [
{
name: '张呼铁路客运专线',
start: '张家口',
end: '呼和浩特',
long: 286.8
name: "张呼铁路客运专线",
start: "张家口",
end: "呼和浩特",
long: 286.8,
},
{
name: '张呼铁路客运专线',
start: '张家口',
end: '呼和浩特',
long: 286.8
name: "张呼铁路客运专线",
start: "张家口",
end: "呼和浩特",
long: 286.8,
},
{
name: '张呼铁路客运专线',
start: '张家口',
end: '呼和浩特',
long: 286.8
name: "张呼铁路客运专线",
start: "张家口",
end: "呼和浩特",
long: 286.8,
},
{
name: '张呼铁路客运专线',
start: '张家口',
end: '呼和浩特',
long: 286.8
name: "张呼铁路客运专线",
start: "张家口",
end: "呼和浩特",
long: 286.8,
},
{
name: '张呼铁路客运专线',
start: '张家口',
end: '呼和浩特',
long: 286.8
name: "张呼铁路客运专线",
start: "张家口",
end: "呼和浩特",
long: 286.8,
},
{
name: '张呼铁路客运专线',
start: '张家口',
end: '呼和浩特',
long: 286.8
name: "张呼铁路客运专线",
start: "张家口",
end: "呼和浩特",
long: 286.8,
},
{
name: '张呼铁路客运专线',
start: '张家口',
end: '呼和浩特',
long: 286.8
name: "张呼铁路客运专线",
start: "张家口",
end: "呼和浩特",
long: 286.8,
},
{
name: '张呼铁路客运专线',
start: '张家口',
end: '呼和浩特',
long: 286.8
name: "张呼铁路客运专线",
start: "张家口",
end: "呼和浩特",
long: 286.8,
},
{
name: '张呼铁路客运专线',
start: '张家口',
end: '呼和浩特',
long: 286.8
name: "张呼铁路客运专线",
start: "张家口",
end: "呼和浩特",
long: 286.8,
},
{
name: '张呼铁路客运专线',
start: '张家口',
end: '呼和浩特',
long: 286.8
}
name: "张呼铁路客运专线",
start: "张家口",
end: "呼和浩特",
long: 286.8,
},
],
multipleSelection: []
}
multipleSelection: [],
};
},
methods: {
tableRowClassName({ row, rowIndex }) {
return rowIndex % 2 === 0 ? '' : 'single-row'
return rowIndex % 2 === 0 ? "" : "single-row";
},
changeType(item) {
this.activeName = item.key
this.activeName = item.key;
},
delData() {},
refresh() {},
query() {},
exportData() {},
handleSelectionChange(val) {
this.multipleSelection = val
this.multipleSelection = val;
},
handleView() {},
handlePageChange(pageData) {
this.searchForm.pageSize = pageData.size
this.searchForm.pageNum = pageData.page
}
}
}
this.searchForm.pageSize = pageData.size;
this.searchForm.pageNum = pageData.page;
},
},
};
</script>
<style lang="scss" >
.el-table th.el-table__cell>.cell {
color: #747679;
<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;
}
& ::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>
<style lang="scss">
.statistics-table {
padding-top: 50px;
.single-row {
background: #f1f6ff;
}
}
.statistics {
padding: 10px;
.header {
display: flex;
justify-content: space-between;
.header-right {
}
td {
padding: 5px !important;
}
}
</style>
src/views/user/userList/index.vue
View file @ 2b8449f7
<template>
<div>
<el-row class="header">
<el-col :span="4">
<div class="message">共<span>5</span>条数据</div>
</el-col>
<el-col :span="2" :offset="18">
<el-button type="primary">添加新用户</el-button>
</el-col>
</el-row>
<div class="leakage-cable">
<div class="leakage-top">
<div style="color: #666666">共10条数据</div>
<div class="operate-btn">
<el-button type="primary" >添加新用户</el-button>
</div>
</div>
<el-table
v-loading="loading"
:data="tableData"
......@@ -105,14 +105,34 @@ export default {
}
</script>
<style lang="scss" scoped>
.message {
display: inline-block;
margin-top: 20px;
font-size: 16px;
color:#666666;
}
.header {
margin-bottom: 20px;
.leakage-cable {
.leakage-top {
margin-bottom: 20px;
display: flex;
align-items: flex-end;
justify-content: space-between;
}
& ::v-deep .cell {
color: #333333;
}
& ::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>
<style lang="scss">
......@@ -124,4 +144,4 @@ export default {
padding: 5px !important;
}
}
</style>
</style>
\ No newline at end of file
src/views/user/userLog/index.vue 0 → 100644
View file @ 2b8449f7
<template>
<!-- 用户操作日志 -->
<div class="leakage-cable">
<div class="leakage-top">
<div style="color: #666666">共6条数据</div>
<div class="operate-btn">
<!-- <el-button
:type="multipleSelection.length ? 'primary' : 'info'"
:disabled="!multipleSelection.length"
>删除</el-button
> -->
<el-button type="primary">刷新</el-button>
<el-button type="primary">查询</el-button>
<el-button type="primary">导出</el-button>
</div>
</div>
<el-table
:data="tableData"
style="width: 100%"
:header-cell-style="{ background: '#EAF1FE', color: '#666666' }"
@selection-change="handleSelectionChange"
>
<el-table-column prop="name" label="用户名" align="center" />
<el-table-column prop="operatingClass" label="操作类别" align="center" />
<el-table-column prop="operatingObject" label="操作对象" align="center" />
<el-table-column prop="objectName" label="对象名称" align="center" />
<el-table-column
prop="operatingContent"
label="操作内容"
align="center"
/>
<el-table-column prop="operatingeRsult" label="操作结果" align="center" />
<el-table-column prop="operatingDate" label="操作时间" align="center" />
</el-table>
<pagination
:limit="searchForm.pageSize"
:page="searchForm.pageNum"
:total="total"
class="pagination"
@pagination="handlePageChange"
/>
</div>
</template>
<script>
import Pagination from "@/components/Pagination";
export default {
props: [],
components: {
Pagination,
},
data() {
return {
multipleSelection: [],
searchForm: {
pageNum: 1,
pageSize: 10,
},
total: 10,
tableData: [
{
name: "admin",
operatingClass: "修改",
operatingObject: "FSU",
objectName: "FSU_193.168.1.20",
operatingContent: "修改FSU现场管理单位",
operatingeRsult: "成功",
operatingDate: "2022/12/18 11:59:42",
},
{
name: "admin",
operatingClass: "告警确认",
operatingObject: "故障定位设备",
objectName: "故障定位单位_12",
operatingContent: "确认连接告警",
operatingeRsult: "失败",
operatingDate: "2022/12/18 12:24:15",
},
{
name: "admin",
operatingClass: "修改",
operatingObject: "FSU",
objectName: "FSU_193.168.1.20",
operatingContent: "修改FSU现场管理单位",
operatingeRsult: "成功",
operatingDate: "2022/12/18 11:59:42",
},
{
name: "admin",
operatingClass: "告警确认",
operatingObject: "故障定位设备",
objectName: "故障定位单位_12",
operatingContent: "确认连接告警",
operatingeRsult: "失败",
operatingDate: "2022/12/18 12:24:15",
},
{
name: "admin",
operatingClass: "修改",
operatingObject: "FSU",
objectName: "FSU_193.168.1.20",
operatingContent: "修改FSU现场管理单位",
operatingeRsult: "成功",
operatingDate: "2022/12/18 11:59:42",
},
{
name: "admin",
operatingClass: "告警确认",
operatingObject: "故障定位设备",
objectName: "故障定位单位_12",
operatingContent: "确认连接告警",
operatingeRsult: "失败",
operatingDate: "2022/12/18 12:24:15",
},
],
};
},
computed: {},
methods: {
handleSelectionChange(val) {
this.multipleSelection = val;
},
handlePageChange(pageData) {
this.searchForm.pageSize = pageData.size;
this.searchForm.pageNum = pageData.page;
},
},
mounted() {},
};
</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;
}
.page {
display: flex;
align-items: center;
justify-content: center;
margin: 20px 0;
.pageNum {
margin: 0 20px;
}
}
}
</style>
\ No newline at end of file
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