Skip to content

W
web-monitor
Commit 4d4c2a60 authored by zhongrong.yan's avatar zhongrong.yan
Browse files
Options

Merge branch 'dev_yzr' into 'dev' 

Dev yzr

See merge request !12
parents fafe7550 8b8ba6b7
Hide whitespace changes
Inline Side-by-side
Showing with 1264 additions and 161 deletions
src/api/baseData.js
View file @ 4d4c2a60
...@@ -3,6 +3,9 @@ import request from '@/utils/request' ...@@ -3,6 +3,9 @@ import request from '@/utils/request'
const path = { const path = {
deptList: '/dict/selectDeptItem', deptList: '/dict/selectDeptItem',
fsuList: '/dict/selectFsuItem', fsuList: '/dict/selectFsuItem',
OperateEnum: '/dict/selectOperationItem',
LeakyCablelEnum: '/dict/selectLeakyCablelItem',
MonitorEnum: '/dict/selectMonitorItem',
getTree: '/home/getTree', getTree: '/home/getTree',
} }
...@@ -14,6 +17,18 @@ export function fsuList() { ...@@ -14,6 +17,18 @@ export function fsuList() {
return request.post(path.fsuList, ...arguments) return request.post(path.fsuList, ...arguments)
} }
export function OperateEnum() {
return request.post(path.OperateEnum, ...arguments)
}
export function LeakyCablelEnum() {
return request.post(path.LeakyCablelEnum, ...arguments)
}
export function MonitorEnum() {
return request.post(path.MonitorEnum, ...arguments)
}
export function getTree() { export function getTree() {
return request.post(path.getTree, ...arguments) return request.post(path.getTree, ...arguments)
} }
......
src/components/orgTree.vue
View file @ 4d4c2a60
...@@ -84,7 +84,7 @@ export default { ...@@ -84,7 +84,7 @@ export default {
}, },
methods: { methods: {
handleClick(data) { handleClick(data) {
console.log(data); this.$emit('selectItem', data)
}, },
getInit() { getInit() {
getTree().then(res => { getTree().then(res => {
...@@ -97,13 +97,13 @@ export default { ...@@ -97,13 +97,13 @@ export default {
<div> <div>
<span style="padding-right:10px;"> <span style="padding-right:10px;">
<span style={{ marginRight: "5px", fontSize: "16px" }}> <span style={{ marginRight: "5px", fontSize: "16px" }}>
<svg-icon icon-class={data.iconName} />
</span> </span>
<span style={{ marginRight: "5px", fontSize: "16px" }}> <span style={{ marginRight: "5px", fontSize: "16px" }}>
{node.label} {node.label}
</span> </span>
</span> </span>
</div> </div>
// <svg-icon icon-class={data.iconName} />
); );
}, },
}, },
......
src/layout/index.vue
View file @ 4d4c2a60
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<navbar /> <navbar />
<div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" /> <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
<div :class="{sidebarHide: sidebar.hide}" class="main-container"> <div :class="{sidebarHide: sidebar.hide}" class="main-container">
<orgTree style="float:left" /> <!-- <orgTree style="float:left" /> -->
<div class="flex_clo"> <div class="flex_clo">
<Breadcrumb /> <Breadcrumb />
<app-main /> <app-main />
......
src/styles/common.scss
View file @ 4d4c2a60
...@@ -20,10 +20,18 @@ ...@@ -20,10 +20,18 @@
margin-left: 20px; margin-left: 20px;
} }
.ml300 {
margin-left: 320px;
}
.flex {
display: flex;
}
.flex_clo { .flex_clo {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 880px; // height: 880px;
} }
.leakage-cable .leakage-top{ .leakage-cable .leakage-top{
padding-right: 10px; padding-right: 10px;
......
src/utils/request.js
View file @ 4d4c2a60
...@@ -65,7 +65,7 @@ service.interceptors.response.use( ...@@ -65,7 +65,7 @@ service.interceptors.response.use(
location.href = location.href.replace(/#.+/, '') + '#/login' location.href = location.href.replace(/#.+/, '') + '#/login'
return return
} }
if (code == '501') { if (code == 501) {
!config.silence && !errorShowing && Message.error(message) !config.silence && !errorShowing && Message.error(message)
errorShowing = true errorShowing = true
setTimeout(() => { errorShowing = false }, 3000) setTimeout(() => { errorShowing = false }, 3000)
......
src/views/dashboard/api.js 0 → 100644
View file @ 4d4c2a60
import request from '@/utils/request'
const path = {
treeBaseInfo: '/home/treeBaseInfo',
}
export function treeBaseInfo() {
return request.post(path.treeBaseInfo, ...arguments)
}
src/views/dashboard/components/index.vue 0 → 100644
View file @ 4d4c2a60
<template>
<component :is="useEditComponent" :type="type" :curInfo="curInfo" @toUpdate="toUpdate" @cancel="cancel"></component>
</template>
<script>
import Type1 from './type1.vue'
import Type2 from './type2.vue'
import Type3 from './type3.vue'
import Type4 from './type4.vue'
import Type5 from './type5.vue'
export default {
data() {
return {
}
},
props: {
type: {
type: Number,
defualt: null
},
curInfo: {
type: Object,
default: () => {}
}
},
computed: {
useEditComponent() {
return `Type${this.type}`
},
},
components: {
Type1,
Type2,
Type3,
Type4,
Type5,
},
methods: {
toUpdate() {
this.$emit('toUpdate')
},
cancel() {
this.$emit('cancel')
},
}
}
</script>
\ No newline at end of file
src/views/dashboard/components/mixins.js 0 → 100644
View file @ 4d4c2a60
import { formInit } from '../const'
export const DetailMixins = {
data() {
return {
form: {},
formFunc: null,
}
},
watch: {
type: {
immediate: true,
handler(newV) {
this.formFunc = formInit(newV)
},
},
curInfo: {
immediate: true,
handler(newV) {
this.form = this.formFunc(newV)
},
},
},
props: {
curInfo: {
type: Object,
default: () => {},
},
type: {
type: Number,
defualt: null,
},
},
methods: {
},
}
src/views/dashboard/components/type1.vue 0 → 100644
View file @ 4d4c2a60
<template>
<div class="dashboard-container">
<!-- 首页 -->
<header class="header_title">张呼铁路客运专线信息</header>
<el-row :gutter="24">
<el-col :span="12" class="mb20">
<el-card shadow="never">
<div slot="header" class="clearfix posa">
<span>服务器信息</span>
</div>
<div>
<el-row class="text" :gutter="24">
<el-col :span="10">
<div class="item_name">服务器IP</div>
</el-col>
<el-col :span="10">
<div class="item_data">192.168.1.110</div>
</el-col>
</el-row>
<el-row class="text" :gutter="24">
<el-col :span="10">
<div class="item_name">操作系统</div>
</el-col>
<el-col :span="10">
<div class="item_data">Red Hat EnterpiseLin...</div>
</el-col>
</el-row>
<el-row class="text" :gutter="24">
<el-col :span="10">
<div class="item_name">系统软件版本</div>
</el-col>
<el-col :span="10">
<div class="item_data">192.168.1.110</div>
</el-col>
</el-row>
</div>
</el-card>
</el-col>
<el-col :span="12" class="mb20">
<el-card shadow="never">
<div slot="header" class="clearfix posa">
<span>当前状态</span>
</div>
<div>
<el-row class="text" :gutter="24">
<el-col :span="10">
<div class="item_name">设备状态</div>
</el-col>
<el-col :span="10">
<el-row :gutter="20">
<el-col :span="10" class="value_handle">告警</el-col>
<el-col :span="10"
><el-button class="alarmbtn" type="primary" size="mini"
>处理告警</el-button
></el-col
>
</el-row>
</el-col>
</el-row>
<el-row class="text" :gutter="24">
<el-col :span="10">
<div class="item_name">漏缆状态</div>
</el-col>
<el-col :span="10">
<el-row :gutter="20">
<el-col :span="10" class="value_handle">紧急告警</el-col>
<el-col :span="10"
><el-button class="alarmbtn" type="primary" size="mini"
>处理告警</el-button
></el-col
>
</el-row>
</el-col>
</el-row>
</div>
</el-card>
</el-col>
<el-col :span="12" class="mb20">
<el-card shadow="never">
<div slot="header" class="clearfix posa">
<span>管理员(admin)管理范围</span>
</div>
<div>
<el-row class="text" :gutter="24">
<el-col :span="10">
<div class="item_name">基站</div>
</el-col>
<el-col :span="10">
<div class="item_data">{{ form.type2 }}个</div>
</el-col>
</el-row>
<el-row class="text" :gutter="24">
<el-col :span="10">
<div class="item_name">FSU</div>
</el-col>
<el-col :span="10">
<div class="item_data">{{ form.type3 }}台</div>
</el-col>
</el-row>
<el-row class="text" :gutter="24">
<el-col :span="10">
<div class="item_name">监测设备</div>
</el-col>
<el-col :span="10">
<div class="item_data">{{ form.type4 }}台</div>
</el-col>
</el-row>
<el-row class="text" :gutter="24">
<el-col :span="10">
<div class="item_name">混缆</div>
</el-col>
<el-col :span="10">
<div class="item_data">{{ form.type5 }}根</div>
</el-col>
</el-row>
</div>
</el-card>
</el-col>
<el-col :span="12" class="mb20">
<el-card shadow="never">
<div slot="header" class="clearfix posa">
<span>基本信息</span>
<el-button
style="float: right; padding: 3px 0; margin-right: 20px"
type="text"
class="savebtn"
>保存</el-button
>
</div>
<div>
<el-row class="text" :gutter="24">
<el-col :span="10">
<div class="item_name">铁路名称</div>
</el-col>
<el-col :span="10">
<div>
<el-input
v-model="form.baseInfo.name"
clearable
placeholder="请输入内容"
></el-input
>
</div>
</el-col>
</el-row>
<el-row class="text" :gutter="24">
<el-col :span="10">
<div class="item_name">铁路起点站名</div>
</el-col>
<el-col :span="10">
<div>
<el-input
v-model="form.baseInfo.startPointName"
clearable
placeholder="请输入内容"
></el-input
>
</div>
</el-col>
</el-row>
<el-row class="text" :gutter="24">
<el-col :span="10">
<div class="item_name">铁路终点站名</div>
</el-col>
<el-col :span="10">
<div>
<el-input
v-model="form.baseInfo.endPointName"
clearable
placeholder="请输入内容"
></el-input
>
</div>
</el-col>
</el-row>
<el-row class="text" :gutter="24">
<el-col :span="10">
<div class="item_name">铁路总长度(公里)</div>
</el-col>
<el-col :span="10">
<div>
<el-input
v-model="form.baseInfo.totalLong"
clearable
placeholder="请输入内容"
>张呼铁路客运专线</el-input
>
</div>
</el-col>
</el-row>
</div>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
import { DetailMixins } from './mixins'
export default {
name: 'Dashboard',
mixins: [DetailMixins],
data() {
return {
}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.header_title {
font-size: 23px;
font-family: Source Han Sans CN;
font-weight: 500;
line-height: 40px;
text-align: center;
color: #0058ff;
letter-spacing: 10px;
opacity: 1;
margin-bottom: 20px;
}
::v-deep.el-card {
border: 1px solid #e3e3e3;
border-radius: 8px;
min-height: 243px;
.el-card__header {
font-size: 18px;
color: #333333;
font-weight: 500;
text-align: center;
background: rgba(226, 235, 255, 0.39);
opacity: 1;
}
.el-card__body {
padding: 0px;
}
}
.posa {
position: relative;
}
.savebtn {
position: absolute;
right: 2%;
}
// .el-col {
// margin-bottom: 20px;
// }
.text {
// display: flex;
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: 16px;
line-height: 16px;
color: #7e7e7e;
margin-top: 12px;
margin-bottom: 12px;
}
.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;
}
.value_handle {
color: red;
margin-right: 10px;
min-width: 52px;
}
.alarmbtn {
margin-top: 6px;
margin-bottom: 6px;
}
.el-card:last-child .text {
border-bottom: none !important;
}
}
</style>
src/views/dashboard/components/type2.vue 0 → 100644
View file @ 4d4c2a60
<template>
<div class="dashboard-container">
<!-- 首页 -->
<header class="header_title">张呼铁路客运专线信息</header>
<el-row :gutter="24">
<el-col :span="12" class="mb20">
<el-card shadow="never">
<div slot="header" class="clearfix posa">
<span>管理范围</span>
</div>
<div>
<el-row class="text" :gutter="24">
<el-col :span="10">
<div class="item_name">FSU</div>
</el-col>
<el-col :span="10">
<div class="item_data">{{ form.type3 }}台</div>
</el-col>
</el-row>
<el-row class="text" :gutter="24">
<el-col :span="10">
<div class="item_name">监测设备</div>
</el-col>
<el-col :span="10">
<div class="item_data">{{ form.type4 }}台</div>
</el-col>
</el-row>
<el-row class="text" :gutter="24">
<el-col :span="10">
<div class="item_name">混缆</div>
</el-col>
<el-col :span="10">
<div class="item_data">{{ form.type5 }}根</div>
</el-col>
</el-row>
</div>
</el-card>
</el-col>
<el-col :span="12" class="mb20">
<el-card shadow="never">
<div slot="header" class="clearfix posa">
<span>基础信息</span>
</div>
<div>
<el-row class="text" :gutter="24">
<el-col :span="10">
<div class="item_name">站点编号</div>
</el-col>
<el-col :span="10">
<div class="item_data">{{ form.baseInfo.siteCode }}</div>
</el-col>
</el-row>
<el-row class="text" :gutter="24">
<el-col :span="10">
<div class="item_name">站名</div>
</el-col>
<el-col :span="10">
<div class="item_data">{{ form.baseInfo.siteName }}</div>
</el-col>
</el-row>
<el-row class="text" :gutter="24">
<el-col :span="10">
<div class="item_name">站点地址</div>
</el-col>
<el-col :span="10">
<div class="item_data">{{ form.baseInfo.siteAddress }}</div>
</el-col>
</el-row>
<el-row class="text" :gutter="24">
<el-col :span="10">
<div class="item_name">所在铁路线</div>
</el-col>
<el-col :span="10">
<div class="item_data">{{ form.baseInfo.wayId }}</div>
</el-col>
</el-row>
<el-row class="text" :gutter="24">
<el-col :span="10">
<div class="item_name">站点所在局</div>
</el-col>
<el-col :span="10">
<div class="item_data">{{ form.baseInfo.siteArea }}</div>
</el-col>
</el-row>
<el-row class="text" :gutter="24">
<el-col :span="10">
<div class="item_name">站点所在段号</div>
</el-col>
<el-col :span="10">
<div class="item_data">{{ form.baseInfo.siteSectionCode }}</div>
</el-col>
</el-row>
<el-row class="text" :gutter="24">
<el-col :span="10">
<div class="item_name">站点所在铁路公里标</div>
</el-col>
<el-col :span="10">
<div class="item_data">{{ form.baseInfo.siteKmSign }}</div>
</el-col>
</el-row>
<el-row class="text" :gutter="24">
<el-col :span="10">
<div class="item_name">站点经度</div>
</el-col>
<el-col :span="10">
<div class="item_data">{{ form.baseInfo.siteLongitude }}</div>
</el-col>
</el-row>
<el-row class="text" :gutter="24">
<el-col :span="10">
<div class="item_name">站点纬度</div>
</el-col>
<el-col :span="10">
<div class="item_data">{{ form.baseInfo.siteLatitude }}</div>
</el-col>
</el-row>
<el-row class="text" :gutter="24">
<el-col :span="10">
<div class="item_name">站点监控时间</div>
</el-col>
<el-col :span="10">
<div class="item_data">Red Hat EnterpiseLin...</div>
</el-col>
</el-row>
<el-row class="text" :gutter="24">
<el-col :span="10">
<div class="item_name">漏缆个数</div>
</el-col>
<el-col :span="10">
<div class="item_data">Red Hat EnterpiseLin...</div>
</el-col>
</el-row>
<el-row class="text" :gutter="24">
<el-col :span="10">
<div class="item_name">天馈线个数</div>
</el-col>
<el-col :span="10">
<div class="item_data">Red Hat EnterpiseLin...</div>
</el-col>
</el-row>
<el-row class="text" :gutter="24">
<el-col :span="10">
<div class="item_name">站点其他信息</div>
</el-col>
<el-col :span="10">
<div class="item_data">{{ form.baseInfo.siteOtherMessage }}</div>
</el-col>
</el-row>
</div>
</el-card>
</el-col>
<el-col :span="12" class="mb20 specialCard">
<el-card shadow="never">
<div slot="header" class="clearfix posa">
<span>当前状态</span>
</div>
<div>
<el-row class="text" :gutter="24">
<el-col :span="10">
<div class="item_name">设备状态</div>
</el-col>
<el-col :span="10">
<div class="item_data">正常</div>
</el-col>
</el-row>
<el-row class="text" :gutter="24">
<el-col :span="10">
<div class="item_name">漏缆状态</div>
</el-col>
<el-col :span="10">
<div class="item_data">正常</div>
</el-col>
</el-row>
</div>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
import { DetailMixins } from './mixins'
export default {
name: 'Dashboard',
mixins: [DetailMixins],
data() {
return {
}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.header_title {
font-size: 23px;
font-family: Source Han Sans CN;
font-weight: 500;
line-height: 40px;
text-align: center;
color: #0058ff;
letter-spacing: 10px;
opacity: 1;
margin-bottom: 20px;
}
::v-deep.el-card {
border: 1px solid #e3e3e3;
border-radius: 8px;
// min-height: 243px;
.el-card__header {
font-size: 18px;
color: #333333;
font-weight: 500;
text-align: center;
background: rgba(226, 235, 255, 0.39);
opacity: 1;
}
.el-card__body {
padding: 0px;
}
}
.posa {
position: relative;
}
.specialCard {
position: absolute;
top: 300px;
}
.text {
// display: flex;
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: 16px;
line-height: 16px;
color: #7e7e7e;
margin-top: 12px;
margin-bottom: 12px;
}
.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/dashboard/components/type3.vue 0 → 100644
View file @ 4d4c2a60
<template>
<div class="dashboard-container">
<!-- 首页 -->
<header class="header_title">FSU</header>
<el-row :gutter="24">
<el-col :span="11" class="mb20">
<el-card shadow="never">
<div slot="header" class="clearfix posa">
<span>管理范围</span>
</div>
<div >
<el-row class="text" :gutter="24">
<el-col :span="10">
<div class="item_name">监测设备</div>
</el-col>
<el-col :span="10">
<div class="item_data">{{ form.type4 }}台</div>
</el-col>
</el-row>
<el-row class="text" :gutter="24">
<el-col :span="10">
<div class="item_name">混缆</div>
</el-col>
<el-col :span="10">
<div class="item_data">{{ form.type5 }}根</div>
</el-col>
</el-row>
</div>
</el-card>
</el-col>
<el-col :span="11" class="mb20">
<el-card shadow="never">
<div slot="header" class="clearfix posa">
<span>基础信息</span>
</div>
<div >
<el-row class="text" :gutter="24">
<el-col :span="10">
<div class="item_name">FSU身份编号</div>
</el-col>
<el-col :span="10">
<div class="item_data">{{ form.baseInfo.fsuCode }}</div>
</el-col>
</el-row>
<el-row class="text" :gutter="24">
<el-col :span="10">
<div class="item_name">FSU端口数</div>
</el-col>
<el-col :span="10">
<div class="item_data">{{ form.baseInfo.fsuPort}}</div>
</el-col>
</el-row>
<el-row class="text" :gutter="24">
<el-col :span="10">
<div class="item_name">设备名称</div>
</el-col>
<el-col :span="10">
<div class="item_data">{{ form.baseInfo.equipName }}</div>
</el-col>
</el-row>
<el-row class="text" :gutter="24">
<el-col :span="10">
<div class="item_name">IP地址</div>
</el-col>
<el-col :span="10">
<div class="item_data">{{ form.baseInfo.ip }}</div>
</el-col>
</el-row>
<el-row class="text" :gutter="24">
<el-col :span="10">
<div class="item_name">所在铁路线</div>
</el-col>
<el-col :span="10">
<div class="item_data">南昆客运专线</div>
</el-col>
</el-row>
<el-row class="text" :gutter="24">
<el-col :span="10">
<div class="item_name">所在站点</div>
</el-col>
<el-col :span="10">
<div class="item_data">81</div>
</el-col>
</el-row>
<el-row class="text" :gutter="24">
<el-col :span="10">
<div class="item_name">设备厂商</div>
</el-col>
<el-col :span="10">
<div class="item_data">{{ form.baseInfo.equipFactory }}</div>
</el-col>
</el-row>
<el-row class="text" :gutter="24">
<el-col :span="10">
<div class="item_name">设备备用方式</div>
</el-col>
<el-col :span="10">
<div class="item_data">{{ form.baseInfo.backupModeName }}</div>
</el-col>
</el-row>
<el-row class="text" :gutter="24">
<el-col :span="10">
<div class="item_name">通信方式</div>
</el-col>
<el-col :span="10">
<div class="item_data">{{ form.baseInfo.connectModeName }}</div>
</el-col>
</el-row>
<el-row class="text" :gutter="24">
<el-col :span="10">
<div class="item_name">设备类型</div>
</el-col>
<el-col :span="10">
<div class="item_data">{{ form.baseInfo.equipTypeName }}</div>
</el-col>
</el-row>
<el-row class="text" :gutter="24">
<el-col :span="10">
<div class="item_name">设备子类型</div>
</el-col>
<el-col :span="10">
<div class="item_data">{{ form.baseInfo.equipSubTypeName }}</div>
</el-col>
</el-row>
<el-row class="text" :gutter="24">
<el-col :span="10">
<div class="item_name">软件版本号</div>
</el-col>
<el-col :span="10">
<div class="item_data">{{ form.baseInfo.softVersion }}</div>
</el-col>
</el-row>
<el-row class="text" :gutter="24">
<el-col :span="10">
<div class="item_name">设备生产序列号</div>
</el-col>
<el-col :span="10">
<div class="item_data">{{ form.baseInfo.equipSerialNumber }}</div>
</el-col>
</el-row>
<el-row class="text" :gutter="24">
<el-col :span="10">
<div class="item_name">安装日期</div>
</el-col>
<el-col :span="10">
<div class="item_data">南昆客运专线</div>
</el-col>
</el-row>
<el-row class="text" :gutter="24">
<el-col :span="10">
<div class="item_name">维护日期</div>
</el-col>
<el-col :span="10">
<div class="item_data">南昆客运专线</div>
</el-col>
</el-row>
<el-row class="text" :gutter="24">
<el-col :span="10">
<div class="item_name">设备所铁路公里标</div>
</el-col>
<el-col :span="10">
<div class="item_data">{{ form.baseInfo.kmSign }}</div>
</el-col>
</el-row>
</div>
</el-card>
</el-col>
<el-col :span="11" class="mb20 specialCard">
<el-card shadow="never">
<div slot="header" class="clearfix posa">
<span>管理范围</span>
</div>
<div >
<el-row class="text" :gutter="24">
<el-col :span="10">
<div class="item_name">监测设备</div>
</el-col>
<el-col :span="10">
<div class="item_data">81</div>
</el-col>
</el-row>
<el-row class="text" :gutter="24">
<el-col :span="10">
<div class="item_name">混缆</div>
</el-col>
<el-col :span="10">
<div class="item_data">142根</div>
</el-col>
</el-row>
</div>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
import { DetailMixins } from './mixins'
export default {
name: 'Dashboard',
data() {
return {
}
},
mixins: [DetailMixins],
}
</script>
<style lang="scss" scoped>
.header_title {
font-size: 23px;
font-family: Source Han Sans CN;
font-weight: 500;
line-height: 40px;
text-align: center;
color: #0058ff;
letter-spacing: 10px;
opacity: 1;
margin-bottom: 20px;
}
::v-deep.el-card {
border: 1px solid #e3e3e3;
border-radius: 8px;
// min-height: 243px;
.el-card__header {
font-size: 18px;
color: #333333;
font-weight: 500;
text-align: center;
background: rgba(226, 235, 255, 0.39);
opacity: 1;
}
.el-card__body {
padding: 0px;
}
}
.specialCard {
position: absolute;
top: 240px;
}
.posa {
position: relative;
}
.text {
padding: 10px 20px 10px 20px;
border-bottom: 1px solid #e3e3e3;
&:last-child {
border-bottom: none;
}
.item_name,
.item_data {
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;
}
.el-card:last-child .text {
border-bottom: none !important;
}
}
</style>
src/views/dashboard/const.js
View file @ 4d4c2a60
export const listData = [ export const listData2 = [
{ {
title: '服务器信息', title: '管理范围',
list: [ list: [
{ {
name: '服务器IP', name: 'FSU',
value: '192.168.1.110', value: '20台',
}, },
{ {
name: '操作系统', name: '监测设备',
value: 'Red Hat EnterpiseLin...', value: '81台',
}, },
{ {
name: '系统软件版本', name: '混缆',
value: '192.168.1.110', value: '142根',
}, },
] ]
}, },
{ {
title: '当前状态', title: '基础信息',
list: [ list: [
{ {
handle: true, name: '站点编号',
name: '设备状态', value: '29',
value: '告警',
}, },
{ {
handle: true, name: '站名',
name: '漏缆状态', value: 'Red Hat EnterpiseLin...',
value: '紧急告警', },
}
]
},
{
title: '管理员(admin)管理范围',
list: [
{ {
name: '基站', name: '站点地址',
value: '20个', value: 'K556+614',
}, },
{ {
name: 'FSU', name: '所在铁路线',
value: '20台', value: '南昆客运专线',
}, },
{ {
name: '监测设备', name: '站点所在局',
value: '81台', value: '昆明铁路局.',
}, },
{ {
name: '混缆', name: '站点所在段号',
value: '142根', value: '通信段',
},
{
name: '站点所在铁路公里标',
value: '192.168.1.110',
},
{
name: '站点经度',
value: 'Red Hat EnterpiseLin...',
}, },
]
},
{
title: '基本信息',
option: true,
list: [
{ {
name: '铁路名称', name: '站点维度',
value: '张呼铁路客运专线', value: '192.168.1.110',
},
{
name: '站点监控时间',
value: 'Red Hat EnterpiseLin...',
},
{
name: '漏缆个数',
value: '192.168.1.110',
}, },
{ {
name: '铁路起点站名', name: '天馈线个数',
value: '张家口', value: 'Red Hat EnterpiseLin...',
}, },
{ {
name: '铁路终点站名', name: '站点其他信息',
value: '呼和浩特', value: '192.168.1.110',
}, },
]
},
{
title: '当前状态',
list: [
{ {
name: '铁路总长度(公里)', name: '设备状态',
value: '286.8', value: '正常',
}, },
{
name: '漏缆状态',
value: '正常',
}
] ]
}, },
]
export function formInit1(data = {}) {
return {
deviceStatus: null,
baseInfo: {
id: null,
name: "",
startPointName: "",
endPointName: "",
totalLong: null,
},
type2: 0,
type3: 0,
type4: 0,
type5: 0,
operateSystem: null,
...data
}
}
export function formInit2(data = {}) {
return {
deviceStatus: null,
baseInfo: {
createdBy: "",
lastModifiedBy: null,
creationTime: "",
lastModifiedTime: null,
id: null,
siteCode: "",
siteName: "",
siteAddress: "",
parentId: 0,
siteArea: "",
siteSectionCode: "",
siteKmSign: "",
siteLongitude: "",
siteLatitude: "",
siteOtherMessage: "",
wayId: 4,
},
...data
}
}
export function formInit3(data = {}) {
return {
deviceStatus: null,
baseInfo: {
fsuCode: "212",
fsuPort: 10,
equipName: "FSU4测试",
parentId: 17,
ip: "151511",
equipFactory: "测试",
backupModeName: null,
connectModeName: "整机备份",
equipTypeName: null,
equipSubTypeName: "以太网",
softVersion: "8451",
equipSerialNumber: "4651",
kmSign: "46511",
},
...data
}
}
export function formInit4(data = {}) {
return {
deviceStatus: null,
baseInfo: {
equipCode: "001",
equipName: 监测1,
equipFactory: "厂商001",
equipTypeName: null,
equipModeName: null,
equipSerialNumber: "001",
kmSign: "001",
installDate: "2022-02-24 12:25:24",
repairDate: '2022-02-24 12:25:24',
},
controlLimit: [
{
"sum": 1,
"type": "5"
}
],
...data
}
}
let formFuncData = {
1: formInit1,
2: formInit2,
3: formInit3,
4: formInit4,
};
] export function formInit(type) {
\ No newline at end of file return formFuncData[type];
}
\ No newline at end of file
src/views/dashboard/index.vue
View file @ 4d4c2a60
<template> <template>
<div class="dashboard-container"> <div class="dashboard-container">
<!-- 首页 --> <!-- 首页 -->
<header class="header_title">张呼铁路客运专线信息</header>
<el-row :gutter="24">
<el-col :span="12" v-for="item in listData" class="mb20">
<el-card shadow="never">
<div slot="header" class="clearfix posa">
<span>{{ item.title }}</span>
<el-button v-if="item.option" style="float: right; padding: 3px 0;margin-right:20px" type="text" class="savebtn">保存</el-button>
</div>
<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="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 class="alarmbtn" type="primary" size="mini">处理告警</el-button></el-col>
</el-row>
<div class="item_data" v-else>{{ k.value }}</div>
</el-col>
</el-row>
</div>
</el-card>
</el-col>
</el-row>
<div> <div>
<orgTree style="float:left" @selectItem="selectItem" />
<div class="ml300">
<type :type="type" :curInfo="curInfo" />
</div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { mapGetters } from 'vuex' import { treeBaseInfo } from './api'
import { listData } from './const' import orgTree from '@/components/orgTree.vue'
import Type from './components/index.vue'
export default { export default {
name: 'Dashboard', name: 'Dashboard',
data() { data() {
return { return {
listData, type: 1,
id:"", curInfo: {}
} }
}, },
components: {
orgTree,
Type
},
computed: { computed: {
...mapGetters([
'name'
])
}, },
mounted() {
this.getDetailNode(4)
},
methods: {
selectItem(data) {
this.type = data.type
this.getDetailNode(data.id)
},
getDetailNode(data) {
let param = {
type: this.type,
id: data
}
treeBaseInfo(param).then(res => {
let controlLimit = res.controlLimit
controlLimit.map(item => {
res[`type${item.type}`]= item.sum
})
this.curInfo = res
})
},
}
} }
</script> </script>
...@@ -64,13 +61,13 @@ export default { ...@@ -64,13 +61,13 @@ export default {
font-weight: 500; font-weight: 500;
line-height: 40px; line-height: 40px;
text-align: center; text-align: center;
color: #0058FF; color: #0058ff;
letter-spacing: 10px; letter-spacing: 10px;
opacity: 1; opacity: 1;
margin-bottom: 20px; margin-bottom: 20px;
} }
::v-deep.el-card { ::v-deep.el-card {
border: 1px solid #E3E3E3; border: 1px solid #e3e3e3;
border-radius: 8px; border-radius: 8px;
min-height: 243px; min-height: 243px;
.el-card__header { .el-card__header {
...@@ -83,14 +80,14 @@ export default { ...@@ -83,14 +80,14 @@ export default {
} }
.el-card__body { .el-card__body {
padding: 0px; padding: 0px;
}
} }
} .posa {
.posa{
position: relative; position: relative;
} }
.savebtn{ .savebtn {
position: absolute; position: absolute;
right:2%; right: 2%;
} }
// .el-col { // .el-col {
// margin-bottom: 20px; // margin-bottom: 20px;
...@@ -98,79 +95,75 @@ export default { ...@@ -98,79 +95,75 @@ export default {
.text { .text {
// display: flex; // display: flex;
padding: 10px 20px 10px 20px; padding: 10px 20px 10px 20px;
border-bottom: 1px solid #E3E3E3; border-bottom: 1px solid #e3e3e3;
&:last-child { &:last-child {
border-bottom: none; border-bottom: none;
} }
.item_name ,.item_data ,.value_handle { .item_name,
height: 16px; .item_data,
.value_handle {
height: 16px;
line-height: 16px; line-height: 16px;
margin-top: 12px; margin-top: 12px;
margin-bottom: 12px; margin-bottom: 12px;
} }
.item_name { .item_name {
width: 262px; width: 262px;
height: 16px; height: 16px;
line-height: 16px; line-height: 16px;
color:#7E7E7E; color: #7e7e7e;
margin-top: 12px; margin-top: 12px;
margin-bottom: 12px; margin-bottom: 12px;
} }
.item_data{ .item_data {
} }
.value_handle { .value_handle {
color:red; color: red;
margin-right: 10px; margin-right: 10px;
} }
.alarmbtn{ .alarmbtn {
margin-top: 6px; margin-top: 6px;
margin-bottom: 6px; margin-bottom: 6px;
} }
.el-card:last-child .text { .el-card:last-child .text {
border-bottom: none !important; border-bottom: none !important;
} }
} }
.text2 { .text2 {
// display: flex; // display: flex;
padding: 10px 20px 10px 20px; padding: 10px 20px 10px 20px;
border-bottom: 1px solid #E3E3E3; border-bottom: 1px solid #e3e3e3;
.item_name ,.item_data ,.value_handle { .item_name,
height: 16px; .item_data,
.value_handle {
height: 16px;
line-height: 16px; line-height: 16px;
margin-top: 12px; margin-top: 12px;
margin-bottom: 12px; margin-bottom: 12px;
} }
.item_name { .item_name {
width: 262px; width: 262px;
height: 16px; height: 16px;
line-height: 16px; line-height: 16px;
color:#7E7E7E; color: #7e7e7e;
margin-top: 12px; margin-top: 12px;
margin-bottom: 12px; margin-bottom: 12px;
} }
.item_data{ .item_data {
} }
.value_handle { .value_handle {
color:red; color: red;
margin-right: 10px; margin-right: 10px;
min-width: 52px; min-width: 52px;
} }
.alarmbtn{ .alarmbtn {
margin-top: 6px; margin-top: 6px;
margin-bottom: 6px; margin-bottom: 6px;
} }
.el-card:last-child .text { .el-card:last-child .text {
border-bottom: none !important; border-bottom: none !important;
}
} }
}
</style> </style>
src/views/maintain/api.js 0 → 100644
View file @ 4d4c2a60
import request from '@/utils/request'
const path = {
cableTypeEnum: 'equipParam/selectItem',
saveParam: 'equipParam/saveParam',
}
export function cableTypeEnum() {
return request.post(path.cableTypeEnum, ...arguments)
}
export function saveParam() {
return request.post(path.saveParam, ...arguments)
}
src/views/maintain/parameter/const.js 0 → 100644
View file @ 4d4c2a60
export const rules = {
equipType: [
{ required: true, message: '请选择漏缆型号', trigger: 'blur' }
],
normalAlarmLimit: [
{ required: true, message: '请输入一般告警门限', trigger: 'blur' }
],
majorAlarmLimit: [
{ required: true, message: '请输入重要告警门限', trigger: 'blur' }
],
emergAlarmLimit: [
{ required: true, message: '请输入紧急告警门限', trigger: 'blur' }
]
}
\ No newline at end of file
src/views/maintain/parameter/index.vue
View file @ 4d4c2a60
...@@ -6,34 +6,34 @@ ...@@ -6,34 +6,34 @@
</div> </div>
<el-form <el-form
ref="form" ref="form"
:model="formData" :model="form"
:rules="rules" :rules="rules"
label-width="200px" label-width="200px"
class="content-form" class="content-form"
> >
<el-form-item label="漏缆型号：" prop="code"> <el-form-item label="漏缆型号：" prop="equipType">
<el-select <el-select
v-model="formData.code" v-model="form.equipType"
style="width: 100%" style="width: 100%"
filterable filterable
placeholder="请选择漏缆型号" placeholder="请选择漏缆型号"
> >
<el-option <el-option
v-for="item in codeList" v-for="item in equipTypeList"
:key="item.value" :key="item.leakyCableMode"
:label="item.label" :label="item.leakyCableMode"
:value="item.value" :value="item.leakyCableMode"
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="一般告警门限：" prop="one"> <el-form-item label="一般告警门限：" prop="normalAlarmLimit">
<el-input v-model="formData.one" placeholder="请输入一般告警门限" /> <el-input v-model="form.normalAlarmLimit" placeholder="请输入一般告警门限" />
</el-form-item> </el-form-item>
<el-form-item label="重要告警门限：" prop="two"> <el-form-item label="重要告警门限：" prop="majorAlarmLimit">
<el-input v-model="formData.two" placeholder="请输入重要告警门限" /> <el-input v-model="form.majorAlarmLimit" placeholder="请输入重要告警门限" />
</el-form-item> </el-form-item>
<el-form-item label="紧急告警门限：" prop="three"> <el-form-item label="紧急告警门限：" prop="emergAlarmLimit">
<el-input v-model="formData.three" placeholder="请输入紧急告警门限" /> <el-input v-model="form.emergAlarmLimit" placeholder="请输入紧急告警门限" />
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
...@@ -51,45 +51,41 @@ ...@@ -51,45 +51,41 @@
</template> </template>
<script> <script>
import { rules } from './const'
import { cableTypeEnum, saveParam } from '../api'
export default { export default {
data() { data() {
return { return {
loading: false, loading: false,
formData: { form: {
code: '', equipType: '',
one: '', normalAlarmLimit: '',
two: '', majorAlarmLimit: '',
three: '' emergAlarmLimit: ''
}, },
rules: { rules,
code: [ equipTypeList: []
{ required: true, message: '请选择漏缆型号', trigger: 'blur' }
// { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
one: [
{ required: true, message: '请输入一般告警门限', trigger: 'blur' }
],
two: [
{ required: true, message: '请输入重要告警门限', trigger: 'blur' }
],
three: [
{ required: true, message: '请输入紧急告警门限', trigger: 'blur' }
]
},
codeList: []
} }
}, },
mounted() {
this.getLeakyCablel()
},
methods: { methods: {
reset() {
this.$refs.form.resetFields()
},
submit() { submit() {
this.$refs.form.validate((valid) => { this.$refs.form.validate((valid) => {
if (valid) { if (valid) {
console.log(this.formData) saveParam(this.form).then(res => {
this.$message.success('操作成功')
})
} }
}) })
} },
getLeakyCablel() {
cableTypeEnum().then(res => {
let list = res || []
this.equipTypeList = list
})
},
} }
} }
</script> </script>
......
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