Skip to content

W
web-monitor
Commit 18d6d570 authored by neogcg's avatar neogcg
Browse files
Options

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

parents 5a4d6368 4d4c2a60
Hide whitespace changes
Inline Side-by-side
Showing with 1264 additions and 161 deletions
src/api/baseData.js
View file @ 18d6d570
......@@ -3,6 +3,9 @@ import request from '@/utils/request'
const path = {
deptList: '/dict/selectDeptItem',
fsuList: '/dict/selectFsuItem',
OperateEnum: '/dict/selectOperationItem',
LeakyCablelEnum: '/dict/selectLeakyCablelItem',
MonitorEnum: '/dict/selectMonitorItem',
getTree: '/home/getTree',
}
......@@ -14,6 +17,18 @@ export function fsuList() {
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() {
return request.post(path.getTree, ...arguments)
}
......
src/components/orgTree.vue
View file @ 18d6d570
......@@ -84,7 +84,7 @@ export default {
},
methods: {
handleClick(data) {
console.log(data);
this.$emit('selectItem', data)
},
getInit() {
getTree().then(res => {
......@@ -97,13 +97,13 @@ export default {
<div>
<span style="padding-right:10px;">
<span style={{ marginRight: "5px", fontSize: "16px" }}>
<svg-icon icon-class={data.iconName} />
</span>
<span style={{ marginRight: "5px", fontSize: "16px" }}>
{node.label}
</span>
</span>
</div>
// <svg-icon icon-class={data.iconName} />
);
},
},
......
src/layout/index.vue
View file @ 18d6d570
......@@ -3,7 +3,7 @@
<navbar />
<div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
<div :class="{sidebarHide: sidebar.hide}" class="main-container">
<orgTree style="float:left" />
<!-- <orgTree style="float:left" /> -->
<div class="flex_clo">
<Breadcrumb />
<app-main />
......
src/styles/common.scss
View file @ 18d6d570
......@@ -20,10 +20,18 @@
margin-left: 20px;
}
.ml300 {
margin-left: 320px;
}
.flex {
display: flex;
}
.flex_clo {
display: flex;
flex-direction: column;
height: 880px;
// height: 880px;
}
.leakage-cable .leakage-top{
padding-right: 10px;
......
src/utils/request.js
View file @ 18d6d570
......@@ -65,7 +65,7 @@ service.interceptors.response.use(
location.href = location.href.replace(/#.+/, '') + '#/login'
return
}
if (code == '501') {
if (code == 501) {
!config.silence && !errorShowing && Message.error(message)
errorShowing = true
setTimeout(() => { errorShowing = false }, 3000)
......
src/views/dashboard/api.js 0 → 100644
View file @ 18d6d570
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 @ 18d6d570
<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 @ 18d6d570
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 @ 18d6d570
<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 @ 18d6d570
<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 @ 18d6d570
<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 @ 18d6d570
export const listData = [
export const listData2 = [
{
title: '服务器信息',
title: '管理范围',
list: [
{
name: '服务器IP',
value: '192.168.1.110',
name: 'FSU',
value: '20台',
},
{
name: '操作系统',
value: 'Red Hat EnterpiseLin...',
name: '监测设备',
value: '81台',
},
{
name: '系统软件版本',
value: '192.168.1.110',
name: '混缆',
value: '142根',
},
]
},
{
title: '当前状态',
title: '基础信息',
list: [
{
handle: true,
name: '设备状态',
value: '告警',
name: '站点编号',
value: '29',
},
{
handle: true,
name: '漏缆状态',
value: '紧急告警',
}
]
},
{
title: '管理员(admin)管理范围',
list: [
name: '站名',
value: 'Red Hat EnterpiseLin...',
},
{
name: '基站',
value: '20个',
name: '站点地址',
value: 'K556+614',
},
{
name: 'FSU',
value: '20台',
name: '所在铁路线',
value: '南昆客运专线',
},
{
name: '监测设备',
value: '81台',
name: '站点所在局',
value: '昆明铁路局.',
},
{
name: '混缆',
value: '142根',
name: '站点所在段号',
value: '通信段',
},
{
name: '站点所在铁路公里标',
value: '192.168.1.110',
},
{
name: '站点经度',
value: 'Red Hat EnterpiseLin...',
},
]
},
{
title: '基本信息',
option: true,
list: [
{
name: '铁路名称',
value: '张呼铁路客运专线',
name: '站点维度',
value: '192.168.1.110',
},
{
name: '站点监控时间',
value: 'Red Hat EnterpiseLin...',
},
{
name: '漏缆个数',
value: '192.168.1.110',
},
{
name: '铁路起点站名',
value: '张家口',
name: '天馈线个数',
value: 'Red Hat EnterpiseLin...',
},
{
name: '铁路终点站名',
value: '呼和浩特',
name: '站点其他信息',
value: '192.168.1.110',
},
]
},
{
title: '当前状态',
list: [
{
name: '铁路总长度(公里)',
value: '286.8',
name: '设备状态',
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,
};
]
\ No newline at end of file
export function formInit(type) {
return formFuncData[type];
}
\ No newline at end of file
src/views/dashboard/index.vue
View file @ 18d6d570
<template>
<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>
<orgTree style="float:left" @selectItem="selectItem" />
<div class="ml300">
<type :type="type" :curInfo="curInfo" />
</div>
</div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import { listData } from './const'
import { treeBaseInfo } from './api'
import orgTree from '@/components/orgTree.vue'
import Type from './components/index.vue'
export default {
name: 'Dashboard',
data() {
return {
listData,
id:"",
type: 1,
curInfo: {}
}
},
components: {
orgTree,
Type
},
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>
......@@ -64,13 +61,13 @@ export default {
font-weight: 500;
line-height: 40px;
text-align: center;
color: #0058FF;
color: #0058ff;
letter-spacing: 10px;
opacity: 1;
margin-bottom: 20px;
}
::v-deep.el-card {
border: 1px solid #E3E3E3;
border: 1px solid #e3e3e3;
border-radius: 8px;
min-height: 243px;
.el-card__header {
......@@ -83,14 +80,14 @@ export default {
}
.el-card__body {
padding: 0px;
}
}
}
.posa{
.posa {
position: relative;
}
.savebtn{
.savebtn {
position: absolute;
right:2%;
right: 2%;
}
// .el-col {
// margin-bottom: 20px;
......@@ -98,79 +95,75 @@ export default {
.text {
// display: flex;
padding: 10px 20px 10px 20px;
border-bottom: 1px solid #E3E3E3;
border-bottom: 1px solid #e3e3e3;
&:last-child {
border-bottom: none;
}
.item_name ,.item_data ,.value_handle {
height: 16px;
.item_name,
.item_data,
.value_handle {
height: 16px;
line-height: 16px;
margin-top: 12px;
margin-top: 12px;
margin-bottom: 12px;
}
.item_name {
width: 262px;
height: 16px;
line-height: 16px;
color:#7E7E7E;
color: #7e7e7e;
margin-top: 12px;
margin-bottom: 12px;
}
.item_data{
.item_data {
}
.value_handle {
color:red;
color: red;
margin-right: 10px;
}
.alarmbtn{
margin-top: 6px;
.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;
border-bottom: 1px solid #e3e3e3;
.item_name,
.item_data,
.value_handle {
height: 16px;
line-height: 16px;
margin-top: 12px;
margin-top: 12px;
margin-bottom: 12px;
}
.item_name {
width: 262px;
height: 16px;
line-height: 16px;
color:#7E7E7E;
color: #7e7e7e;
margin-top: 12px;
margin-bottom: 12px;
}
.item_data{
.item_data {
}
.value_handle {
color:red;
color: red;
margin-right: 10px;
min-width: 52px;
}
.alarmbtn{
margin-top: 6px;
.alarmbtn {
margin-top: 6px;
margin-bottom: 6px;
}
.el-card:last-child .text {
border-bottom: none !important;
}
}
}
</style>
src/views/maintain/api.js 0 → 100644
View file @ 18d6d570
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 @ 18d6d570
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 @ 18d6d570
......@@ -6,34 +6,34 @@
</div>
<el-form
ref="form"
:model="formData"
:model="form"
:rules="rules"
label-width="200px"
class="content-form"
>
<el-form-item label="漏缆型号：" prop="code">
<el-form-item label="漏缆型号：" prop="equipType">
<el-select
v-model="formData.code"
v-model="form.equipType"
style="width: 100%"
filterable
placeholder="请选择漏缆型号"
>
<el-option
v-for="item in codeList"
:key="item.value"
:label="item.label"
:value="item.value"
v-for="item in equipTypeList"
:key="item.leakyCableMode"
:label="item.leakyCableMode"
:value="item.leakyCableMode"
/>
</el-select>
</el-form-item>
<el-form-item label="一般告警门限：" prop="one">
<el-input v-model="formData.one" placeholder="请输入一般告警门限" />
<el-form-item label="一般告警门限：" prop="normalAlarmLimit">
<el-input v-model="form.normalAlarmLimit" placeholder="请输入一般告警门限" />
</el-form-item>
<el-form-item label="重要告警门限：" prop="two">
<el-input v-model="formData.two" placeholder="请输入重要告警门限" />
<el-form-item label="重要告警门限：" prop="majorAlarmLimit">
<el-input v-model="form.majorAlarmLimit" placeholder="请输入重要告警门限" />
</el-form-item>
<el-form-item label="紧急告警门限：" prop="three">
<el-input v-model="formData.three" placeholder="请输入紧急告警门限" />
<el-form-item label="紧急告警门限：" prop="emergAlarmLimit">
<el-input v-model="form.emergAlarmLimit" placeholder="请输入紧急告警门限" />
</el-form-item>
</el-form>
</div>
......@@ -51,45 +51,41 @@
</template>
<script>
import { rules } from './const'
import { cableTypeEnum, saveParam } from '../api'
export default {
data() {
return {
loading: false,
formData: {
code: '',
one: '',
two: '',
three: ''
form: {
equipType: '',
normalAlarmLimit: '',
majorAlarmLimit: '',
emergAlarmLimit: ''
},
rules: {
code: [
{ 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: []
rules,
equipTypeList: []
}
},
mounted() {
this.getLeakyCablel()
},
methods: {
reset() {
this.$refs.form.resetFields()
},
submit() {
this.$refs.form.validate((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>
......
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