Skip to content

W
web-monitor
Commit a4463412 authored by yanzhongrong's avatar yanzhongrong
Browse files
Options

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

parents 74e54464 4a45fdfe
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 12714 additions and 27 deletions
.gitignore
View file @ a4463412
......@@ -6,7 +6,7 @@ yarn-debug.log*
yarn-error.log*
package-lock.json
tests/**/coverage/
.history
# Editor directories and files
.idea
.vscode
......
src/components/Pagination/index.vue 0 → 100644
View file @ a4463412
<template>
<div class="pagination-wraper">
<el-pagination
background
layout="prev, pager, next"
prev-text="上一页"
next-text="下一页"
:total="total"
:page-sizes="pageSizes"
:page-size.sync="pageSize"
:current-page.sync="currentPage"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</template>
<script>
export default {
props: {
total: {
required: true,
type: Number,
default: 0
},
page: {
type: Number,
default: 1
},
limit: {
type: Number,
default: 10
},
pageSizes: {
type: Array,
default() {
return [5, 10, 20, 30]
}
}
},
computed: {
currentPage: {
get() {
return this.page
},
set(val) {
this.$emit('update:page', val)
}
},
pageSize: {
get() {
return this.limit
},
set(val) {
this.$emit('update:limit', val)
}
}
},
methods: {
handleSizeChange(val) {
this.$emit('pagination', { page: this.currentPage, size: val })
},
handleCurrentChange(val) {
// 解决有时切换每页显示条数时，偶尔会出现无数据的情况
setTimeout(() => {
this.$emit('pagination', { page: val, size: this.limit })
}, 0)
}
}
}
</script>
<style lang="scss" scoped>
.pagination-wraper {
text-align: center;
}
</style>
src/main.js
View file @ a4463412
......@@ -4,7 +4,7 @@ import 'normalize.css/normalize.css' // A modern alternative to CSS resets
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import locale from 'element-ui/lib/locale/lang/en' // lang i18n
import locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n
import '@/styles/index.scss' // global css
......
src/router/index.js
View file @ a4463412
......@@ -68,35 +68,65 @@ export const constantRoutes = [
{
path: '/setting',
component: Layout,
redirect: '/dashboard',
children: [{
path: 'setting',
name: 'Setting',
component: () => import('@/views/dashboard/index'),
meta: { title: '配置管理', icon: 'dashboard' }
}]
redirect: '/setting/add',
name: 'Setting',
meta: { title: '配置管理', icon: 'example' },
children: [
{
path: 'add',
name: 'settingAdd',
component: () => import('@/views/setting/add/index'),
meta: { title: '手动添加配置', icon: 'table' }
},
{
path: 'statistics',
name: 'settingAtatistics',
component: () => import('@/views/setting/statistics/index'),
meta: { title: '配置信息统计', icon: 'tree' }
}
]
},
{
path: '/monitor',
component: Layout,
redirect: '/dashboard',
children: [{
path: 'monitor',
name: 'Monitor',
component: () => import('@/views/dashboard/index'),
meta: { title: '监测实时状态', icon: 'dashboard' }
}]
name: '监测实时状态',
meta: { title: '监测实时状态', icon: 'dashboard' },
children: [
{
path: 'leakageCable',
name: '漏缆实时状态',
component: () => import('@/views/monitor/leakageCable'),
meta: { title: '漏缆实时状态' }
},
{
path: 'equipment',
name: '设备实时状态',
component: () => import('@/views/monitor/equipment'),
meta: { title: '设备实时状态' }
}
]
},
{
path: '/maintain',
component: Layout,
redirect: '/dashboard',
children: [{
path: 'maintain',
name: 'Maintain',
component: () => import('@/views/dashboard/index'),
meta: { title: '维护管理', icon: 'dashboard' }
}]
redirect: '/maintain/oneself',
name: 'Maintain',
meta: { title: '维护管理', icon: 'example' },
children: [
{
path: 'oneself',
name: 'MaintainOneself',
component: () => import('@/views/maintain/oneself/index'),
meta: { title: '设备本身维护', icon: 'table' }
},
{
path: 'parameter',
name: 'MaintainParameter',
component: () => import('@/views/maintain/parameter/index'),
meta: { title: '设备告警参数设置', icon: 'tree' }
}
]
},
{
path: '/history',
......@@ -113,12 +143,21 @@ export const constantRoutes = [
path: '/user',
component: Layout,
redirect: '/dashboard',
name: 'User',
meta: { title: '用户管理', icon: 'dashboard' },
children: [{
path: 'user',
name: 'User',
component: () => import('@/views/dashboard/index'),
meta: { title: '用户管理', icon: 'dashboard' }
}]
path: 'updateUser',
name: 'UpdateUser',
component: () => import('@/views/user/updateUser'),
meta: { title: '个人信息管理', icon: 'dashboard' }
},
{
path: 'userList',
name: 'UserList',
component: () => import('@/views/user/userList'),
meta: { title: '用户信息列表', icon: 'dashboard' }
}
]
},
{
......
src/styles/element-ui.scss
View file @ a4463412
......@@ -47,3 +47,7 @@
.el-range-separator {
box-sizing: content-box;
}
.el-pagination {
margin-top: 20px;
}
src/styles/index.scss
View file @ a4463412
......@@ -12,6 +12,13 @@ body {
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
}
.jbs-table-header {
background-color: #eaf1fe!important;
color:#000;
font-size:16px;
font-weight: 400;
}
label {
font-weight: 700;
}
......
src/views/maintain/oneself/index.vue 0 → 100644
View file @ a4463412
<template>
<div class="oneself">
<Breadcrumb />
<div class="oneself-title">温馨提示：系统如无异常，请勿操作此界面</div>
<el-form ref="form1" :model="formData1" :rules="rules1" label-width="200px" class="oneself-form">
<el-form-item label="服务器IP地址" prop="ip">
<el-input v-model="formData1.ip" style="width: 300px" placeholder="请输入服务器IP地址" />
</el-form-item>
<el-form-item label="基站名称" prop="baseStation">
<el-select v-model="formData1.baseStation" style="width: 300px" filterable placeholder="请选择基站">
<el-option
v-for="item in baseStationList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="FSU" prop="fsu">
<el-select v-model="formData1.fsu" style="width: 300px" filterable placeholder="请选择FSU">
<el-option
v-for="item in fsuList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="设备类型配置" prop="type">
<el-select v-model="formData1.type" style="width: 300px" filterable placeholder="请选择设备类型配置">
<el-option
v-for="item in typeList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-form>
<el-form ref="form2" :model="formData2" :rules="rules2" label-width="200px" class="oneself-form">
<el-form-item label="设备配置下发" prop="type">
<el-radio-group v-model="formData2.type">
<el-row style="margin-bottom: 10px">
<el-radio :label="1">复位重启FSU</el-radio>
<el-radio :label="2">常规测试>>
<el-input-number v-model="formData2.routineNum" size="small" :min="0" />
</el-radio>
</el-row>
<el-row>
<el-radio :label="3">请求实时连接</el-radio>
<el-radio :label="4">自检测试>>
<el-input-number v-model="formData2.selfNum" size="small" :min="0" />
</el-radio>
</el-row>
</el-radio-group>
<el-button class="btn" style="width: 120px" type="primary" :loading="loading3" @click="sendContent">发送查询内容</el-button>
</el-form-item>
</el-form>
<el-form ref="form3" :model="formData3" :rules="rules3" label-width="200px" class="oneself-form">
<el-form-item label="设备运行参数配置下发" prop="issue">
<el-select v-model="formData3.issue" style="width: 300px" filterable placeholder="请选择配置下发类型">
<el-option
v-for="item in issueList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<el-button style="width: 120px" class="btn" type="primary" :loading="loading2" @click="sendData">发送数据</el-button>
</el-form-item>
</el-form>
<div class="oneself-tips">当前未向服务器下发指令！</div>
</div>
</template>
<script>
import Breadcrumb from '@/components/Breadcrumb'
export default {
components: { Breadcrumb },
data() {
return {
baseStationList: [],
fsuList: [],
typeList: [],
issueList: [],
formData1: {
ip: '',
baseStation: '',
fsu: '',
type: ''
},
rules1: {
ip: [
{ required: true, message: '请输入服务器IP地址', trigger: 'blur' }
],
baseStation: [
{ required: true, message: '请选择基站名称', trigger: 'blur' }
],
fsu: [
{ required: true, message: '请选择FSU', trigger: 'blur' }
],
type: [
{ required: true, message: '请选择设备配置类型', trigger: 'blur' }
]
},
formData2: {
type: 1,
routineNum: 0,
selfNum: 0
},
rules2: {
type: [
{ required: true, message: '请选择', trigger: 'blur' }
]
},
loading3: false,
formData3: {
issue: ''
},
rules3: {
issue: [
{ required: true, message: '请选择配置下发类型', trigger: 'blur' }
]
}
}
},
methods: {
sendContent() {
this.$refs.form2.validate((valid) => {
if (valid) {
console.log(this.formData2)
}
})
},
sendData() {
this.$refs.form3.validate((valid) => {
if (valid) {
console.log(this.formData3)
}
})
}
}
}
</script>
<style lang="scss" scoped>
.oneself {
.oneself-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;
}
.oneself-form {
margin: 20px auto;
width: 750px;
.btn {
float: right;
}
}
.oneself-tips {
text-align: center;
padding-top: 50px;
}
}
</style>
src/views/maintain/parameter/index.vue 0 → 100644
View file @ a4463412
<template>
<div class="parameter">
<Breadcrumb />
<div class="parameter-title">
温馨提示：告警门限参数设置，数据如无异常，请勿修改告警门限参数！
</div>
<el-form
ref="form"
:model="formData"
:rules="rules"
label-width="200px"
class="parameter-form"
>
<el-form-item label="漏缆型号" prop="code">
<el-select
v-model="formData.code"
style="width: 100%"
filterable
placeholder="请选择漏缆型号"
>
<el-option
v-for="item in codeList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="一般告警门限" prop="one">
<el-input v-model="formData.one" placeholder="请输入一般告警门限" />
</el-form-item>
<el-form-item label="重要告警门限" prop="two">
<el-input v-model="formData.two" placeholder="请输入重要告警门限" />
</el-form-item>
<el-form-item label="紧急告警门限" prop="three">
<el-input v-model="formData.three" placeholder="请输入紧急告警门限" />
</el-form-item>
</el-form>
<div class="parameter-btn">
<el-button
type="primary"
:loading="loading"
@click="submit"
>确认修改</el-button>
</div>
<div class="parameter-tips">当前未修改漏缆告警门限参数</div>
</div>
</template>
<script>
import Breadcrumb from '@/components/Breadcrumb'
export default {
components: { Breadcrumb },
data() {
return {
loading: false,
formData: {
code: '',
one: '',
two: '',
three: ''
},
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: []
}
},
methods: {
reset() {
this.$refs.form.resetFields()
},
submit() {
this.$refs.form.validate((valid) => {
if (valid) {
console.log(this.formData)
}
})
}
}
}
</script>
<style lang="scss" scoped>
.parameter-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;
}
.parameter-form {
margin: 20px auto;
width: 600px;
}
.parameter-btn {
text-align: center;
}
.parameter-tips {
text-align: center;
padding-top: 50px;
}
</style>
src/views/monitor/equipment.vue 0 → 100644
View file @ a4463412
<template>
<!-- 漏缆实时状态 -->
<div class="leakage-cable">
<div class="leakage-top">
<div class="operate-btn">
<el-button type="primary">刷新</el-button>
<el-button type="primary">查询</el-button>
<el-button type="primary">导出</el-button>
</div>
<div>
共6条数据
</div>
</div>
<el-table :data="tableData" style="width: 100%" :cell-class-name="cellClassFn" :header-cell-style="{background:'#EAF1FE',color:'#000'}">
<el-table-column prop="equipment1" label="网元设备" align="center" />
<el-table-column prop="state1" label="连接状态" align="center" />
<el-table-column prop="equipment2" label="网元设备" align="center" />
<el-table-column prop="state2" label="连接状态" align="center" />
<el-table-column prop="equipment3" label="网元设备" align="center" />
<el-table-column prop="uploadDate" label="上传时间" align="center" />
</el-table>
<div class="page">
<el-button>上一页</el-button>
<span class="pageNum">2/5</span>
<el-button>下一页</el-button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{
equipment1: '监控中心LSC',
state1: '连接正常',
equipment2: '现场管理单元 K65+308',
state2: '连接异常',
equipment3: '天馈线A_K4563_535',
uploadDate: '2022/12/18 11:51:12'
},
{
equipment1: '监控中心LSC',
state1: '连接异常',
equipment2: '现场管理单元 K65+308',
state2: '连接正常',
equipment3: '天馈线A_K4563_535',
uploadDate: '2022/12/18 11:51:12'
},{
equipment1: '监控中心LSC',
state1: '连接异常',
equipment2: '现场管理单元 K65+308',
state2: '连接异常',
equipment3: '天馈线A_K4563_535',
uploadDate: '2022/12/18 11:51:12'
},{
equipment1: '监控中心LSC',
state1: '连接正常',
equipment2: '现场管理单元 K65+308',
state2: '连接异常',
equipment3: '天馈线A_K4563_535',
uploadDate: '2022/12/18 11:51:12'
},
{
equipment1: '监控中心LSC',
state1: '连接异常',
equipment2: '现场管理单元 K65+308',
state2: '连接正常',
equipment3: '天馈线A_K4563_535',
uploadDate: '2022/12/18 11:51:12'
},{
equipment1: '监控中心LSC',
state1: '连接异常',
equipment2: '现场管理单元 K65+308',
state2: '连接异常',
equipment3: '天馈线A_K4563_535',
uploadDate: '2022/12/18 11:51:12'
},{
equipment1: '监控中心LSC',
state1: '连接正常',
equipment2: '现场管理单元 K65+308',
state2: '连接异常',
equipment3: '天馈线A_K4563_535',
uploadDate: '2022/12/18 11:51:12'
},
{
equipment1: '监控中心LSC',
state1: '连接异常',
equipment2: '现场管理单元 K65+308',
state2: '连接正常',
equipment3: '天馈线A_K4563_535',
uploadDate: '2022/12/18 11:51:12'
},{
equipment1: '监控中心LSC',
state1: '连接异常',
equipment2: '现场管理单元 K65+308',
state2: '连接异常',
equipment3: '天馈线A_K4563_535',
uploadDate: '2022/12/18 11:51:12'
},{
equipment1: '监控中心LSC',
state1: '连接正常',
equipment2: '现场管理单元 K65+308',
state2: '连接异常',
equipment3: '天馈线A_K4563_535',
uploadDate: '2022/12/18 11:51:12'
},
{
equipment1: '监控中心LSC',
state1: '连接异常',
equipment2: '现场管理单元 K65+308',
state2: '连接正常',
equipment3: '天馈线A_K4563_535',
uploadDate: '2022/12/18 11:51:12'
},{
equipment1: '监控中心LSC',
state1: '连接异常',
equipment2: '现场管理单元 K65+308',
state2: '连接异常',
equipment3: '天馈线A_K4563_535',
uploadDate: '2022/12/18 11:51:12'
},{
equipment1: '监控中心LSC',
state1: '连接正常',
equipment2: '现场管理单元 K65+308',
state2: '连接异常',
equipment3: '天馈线A_K4563_535',
uploadDate: '2022/12/18 11:51:12'
},
{
equipment1: '监控中心LSC',
state1: '连接异常',
equipment2: '现场管理单元 K65+308',
state2: '连接正常',
equipment3: '天馈线A_K4563_535',
uploadDate: '2022/12/18 11:51:12'
},{
equipment1: '监控中心LSC',
state1: '连接异常',
equipment2: '现场管理单元 K65+308',
state2: '连接异常',
equipment3: '天馈线A_K4563_535',
uploadDate: '2022/12/18 11:51:12'
}
],
};
},
methods: {
// 表格背景图颜色
cellClassFn({row, column, rowIndex, columnIndex}) {
console.log(row, 'row')
console.log(column, 'column')
if ((row.state1 == '连接正常' && column.property == 'state1')) {
return 'green'
}
if ((row.state1 == '连接异常' && column.property == 'state1')) {
return 'red'
}
if ((row.state2 == '连接正常' && column.property == 'state2')) {
return 'green'
} else if ((row.state2 == '连接异常' && column.property == 'state2')) {
return 'red'
}
if (rowIndex%2 == 1) {
return 'stripe'
}
},
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
}
}
};
</script>
<style lang="scss" scoped>
.leakage-cable {
.leakage-top {
margin: 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
& ::v-deep .cell {
color: #000;
}
& ::v-deep .stripe {
background-color: #EAF1FE;
}
& ::v-deep .red {
background-color: #f00;
}
& ::v-deep .green {
background-color: green;
}
.page {
display: flex;
align-items: center;
justify-content: center;
margin: 20px 0;
.pageNum {
margin: 0 20px;
}
}
}
</style>
src/views/monitor/leakageCable.vue 0 → 100644
View file @ a4463412
<template>
<!-- 漏缆实时状态 -->
<div class="leakage-cable">
<div class="leakage-top">
<div class="operate-btn">
<el-button type="primary">刷新</el-button>
<el-button type="primary">查询</el-button>
<el-button type="primary">导出</el-button>
</div>
<div>
共6条数据
</div>
</div>
<el-table :data="tableData" style="width: 100%" :cell-class-name="cellClassFn" :header-cell-style="{background:'#EAF1FE',color:'#000'}">
<el-table-column type="index" label="序列号" width="100" align="center" />
<el-table-column prop="name" label="基站名称" width="180" align="center" />
<el-table-column prop="object" label="告警对象" width="180" align="center" />
<el-table-column prop="level" label="告警级别" width="150" align="center">
<template slot-scope="scope">
<div :class="scope.row.level == '重要'?'red':'orange'">
{{ scope.row.level }}
</div>
</template>
</el-table-column>
<el-table-column prop="message" label="告警信息" align="center">
<template slot-scope="scope">
<div v-for="(item, index) in scope.row.message.red" :key="index+'red'" class="red message">
{{ item }}
</div>
<div v-for="(item, index) in scope.row.message.green" :key="index+'red'" class="green message">
{{ item }}
</div>
<div v-for="(item, index) in scope.row.message.black" :key="index+'red'" class="black message">
{{ item }}
</div>
</template>
</el-table-column>
<el-table-column prop="uploadDate" label="最新上传时间" align="center" />
</el-table>
<div class="page">
<el-button>上一页</el-button>
<span class="pageNum">2/5</span>
<el-button>下一页</el-button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{
name: 'STATION2未开通',
object: '漏缆FSU2_R1下行方向',
level: '紧急',
message: {
red: ['距离：0米 驻波比：8.72'],
green: ['距离：18米 驻波比：1.07', '距离：42米 驻波比：1.02'],
black: ['漏缆百米损耗：2.8']
},
uploadDate: '2022/12/18 11:51:12'
},
{
name: 'STATION2未开通',
object: '漏缆FSU2_R1下行方向',
level: '紧急',
message: {
red: ['距离：0米 驻波比：8.72'],
green: ['距离：18米 驻波比：1.07', '距离：42米 驻波比：1.02'],
black: ['漏缆百米损耗：2.8']
},
uploadDate: '2022/12/18 11:51:12'
},{
name: 'STATION2未开通',
object: '漏缆FSU2_R1下行方向',
level: '紧急',
message: {
red: ['距离：0米 驻波比：8.72'],
green: ['距离：18米 驻波比：1.07', '距离：42米 驻波比：1.02'],
black: ['漏缆百米损耗：2.8']
},
uploadDate: '2022/12/18 11:51:12'
},{
name: 'STATION2未开通',
object: '漏缆FSU2_R1下行方向',
level: '紧急',
message: {
red: ['距离：0米 驻波比：8.72'],
green: ['距离：18米 驻波比：1.07', '距离：42米 驻波比：1.02'],
black: ['漏缆百米损耗：2.8']
},
uploadDate: '2022/12/18 11:51:12'
},{
name: 'STATION2未开通',
object: '漏缆FSU2_R1下行方向',
level: '紧急',
message: {
red: ['距离：0米 驻波比：8.72'],
green: ['距离：18米 驻波比：1.07', '距离：42米 驻波比：1.02'],
black: ['漏缆百米损耗：2.8']
},
uploadDate: '2022/12/18 11:51:12'
},{
name: 'STATION2未开通',
object: '漏缆FSU2_R1下行方向',
level: '重要',
message: {
red: ['距离：0米 驻波比：8.72'],
green: ['距离：18米 驻波比：1.07', '距离：42米 驻波比：1.02'],
black: ['漏缆百米损耗：2.8']
},
uploadDate: '2022/12/18 11:51:12'
}
],
};
},
methods: {
// 表格背景图颜色
cellClassFn({row, column, rowIndex, columnIndex}) {
if (row.level == '紧急' && column.label == '告警级别') {
return 'emergency'
} else if (row.level == '重要' && column.label == '告警级别') {
return 'important'
}
if (rowIndex%2 == 1) {
return 'stripe'
}
},
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
}
}
};
</script>
<style lang="scss" scoped>
.leakage-cable {
.leakage-top {
margin: 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
& ::v-deep .cell {
color: #000;
}
.message {
line-height: 32px;
}
.red {
color: red;
}
.green {
color: green;
}
.black {
color: black;
}
& ::v-deep .stripe {
background-color: #EAF1FE;
}
& ::v-deep .emergency {
background-color: #f00;
}
& ::v-deep .important {
background-color: #f89850;
}
.page {
display: flex;
align-items: center;
justify-content: center;
margin: 20px 0;
.pageNum {
margin: 0 20px;
}
}
}
</style>
src/views/setting/add/index.vue 0 → 100644
View file @ a4463412
<template>
<div class="add">
<breadcrumb />
<div class="add-tab">
<el-tabs v-model="activeName" :stretc="true">
<el-tab-pane
v-for="item in tabs"
:key="item.key"
:label="item.label"
:name="item.key"
/>
</el-tabs>
</div>
<div class="add-content">
<div class="add-content-title">添加铁路信息</div>
<el-form ref="form" :model="formData" :rules="rules" label-width="200px" class="add-content-form">
<el-form-item label="铁路名" prop="name">
<el-input v-model="formData.name" placeholder="请输入铁路名" />
</el-form-item>
<el-form-item label="铁路线起点站名" prop="start">
<el-input v-model="formData.start" placeholder="请输入铁路线起点站名" />
</el-form-item>
<el-form-item label="铁路线终点站名" prop="end">
<el-input v-model="formData.end" placeholder="请输入铁路线终点站名" />
</el-form-item>
<el-form-item label="铁路全长（公里）" prop="long">
<el-input v-model="formData.long" placeholder="请输入铁路全长公里数" />
</el-form-item>
</el-form>
<div class="add-content-btn">
<el-button type="primary" @click="reset">重置</el-button>
<el-button type="primary" @click="submit">确认提交</el-button>
</div>
</div>
</div>
</template>
<script>
import Breadcrumb from '@/components/Breadcrumb'
export default {
components: { Breadcrumb },
data() {
return {
activeName: '0',
tabs: [
{
label: '铁路线',
key: '0'
},
{
label: '站点',
key: '1'
},
{
label: 'FSU',
key: '2'
},
{
label: '检测设备',
key: '3'
},
{
label: '漏缆',
key: '4'
},
{
label: '天馈线',
key: '5'
}
],
formData: {
name: '',
start: '',
end: '',
long: ''
},
rules: {
name: [
{ required: true, message: '请输入铁路名', trigger: 'blur' }
// { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
start: [
{ required: true, message: '请输入铁路线起点站名', trigger: 'blur' }
],
end: [
{ required: true, message: '请输入铁路线终点站名', trigger: 'blur' }
],
long: [
{ required: true, message: '请输入铁路全长公里数', trigger: 'blur' }
]
}
}
},
methods: {
reset() {
this.$refs.form.resetFields()
},
submit() {
this.$refs.form.validate((valid) => {
if (valid) {
console.log(this.formData)
}
})
}
}
}
</script>
<style lang="scss" scoped>
.add-tab {
// width: 600px;
margin: 0 auto;
}
::v-deep .el-tabs__nav {
display: flex;
width: 100%;
.el-tabs__item {
flex: 1;
text-align: center;
font-size: 18px;
color: #333;
}
}
.add-content {
display: flex;
flex-direction: column;
align-items: center;
.add-content-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;
}
.add-content-form {
padding-top: 20px;
width: 600px;
}
}
</style>
src/views/setting/statistics/index.vue 0 → 100644
View file @ a4463412
<template>
<div class="statistics">
<Breadcrumb />
<div class="header">
<div class="header-left">
<!-- <el-tabs v-model="activeName" type="border-card">
<el-tab-pane
v-for="item in tabs"
:key="item.key"
:label="item.label"
:name="item.key"
/>
</el-tabs> -->
<el-button
v-for="item in tabs"
:key="item.key"
:type="activeName === item.key ? 'primary' : ''"
@click="changeType(item)"
>{{ item.label }}</el-button>
</div>
<div class="header-right">
<el-button
:type="multipleSelection.length ? 'primary' : 'info'"
:disabled="!multipleSelection.length"
@click="delData"
>删除</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>
</div>
</div>
<el-table
ref="multipleTable"
class="statistics-table"
:data="tableData"
tooltip-effect="dark"
style="width: 100%"
:row-class-name="tableRowClassName"
:row-style="{ 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" />
<el-table-column prop="name" label="铁路名称" align="center" />
<el-table-column prop="start" label="铁路起点站名" align="center" />
<el-table-column
prop="end"
label="铁路终点站名"
show-overflow-tooltip
align="center"
/>
<el-table-column
prop="long"
label="铁路总长度（公里）"
show-overflow-tooltip
align="center"
/>
<el-table-column
prop="action"
label="详细信息"
show-overflow-tooltip
align="center"
>
<template slot-scope="{ row }">
<el-link
type="primary"
:underline="false"
@click="handleView(row)"
>查看</el-link>
</template>
</el-table-column>
</el-table>
<pagination
:limit="searchForm.pageSize"
:page="searchForm.pageNum"
:total="total"
class="pagination"
@pagination="handlePageChange"
/>
</div>
</template>
<script>
import Pagination from '@/components/Pagination'
import Breadcrumb from '@/components/Breadcrumb'
export default {
components: { Pagination, Breadcrumb },
data() {
return {
searchForm: {
pageNum: 1,
pageSize: 10
},
total: 10,
activeName: '0',
tabs: [
{
label: '铁路线',
key: '0'
},
{
label: '站点',
key: '1'
},
{
label: 'FSU',
key: '2'
},
{
label: '检测设备',
key: '3'
},
{
label: '漏缆',
key: '4'
},
{
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
}
],
multipleSelection: []
}
},
methods: {
tableRowClassName({ row, rowIndex }) {
return rowIndex % 2 === 0 ? '' : 'single-row'
},
changeType(item) {
this.activeName = item.key
},
delData() {},
refresh() {},
query() {},
exportData() {},
toggleSelection(rows) {
if (rows) {
rows.forEach((row) => {
this.$refs.multipleTable.toggleRowSelection(row)
})
} else {
this.$refs.multipleTable.clearSelection()
}
},
handleSelectionChange(val) {
this.multipleSelection = val
},
handleView() {},
handlePageChange(pageData) {
this.searchForm.pageSize = pageData.size
this.searchForm.pageNum = pageData.page
}
}
}
</script>
<style lang="scss" >
.el-table th.el-table__cell>.cell {
color: #747679;
}
.statistics-table {
padding-top: 50px;
.single-row {
background: #f1f6ff;
}
}
.statistics {
.header {
display: flex;
justify-content: space-between;
.header-right {
}
}
}
</style>
src/views/user/updateUser/components/baseInfo.vue 0 → 100644
View file @ a4463412
<template>
<div>
<el-form ref="form" :model="form" label-width="100px" :rules="rules">
<el-form-item label="用户名:" prop="name">
<el-input v-model="form.name" />
</el-form-item>
<el-form-item label="所在部门:" prop="depart">
<el-input v-model="form.depart" />
</el-form-item>
<el-form-item label="电话号码:">
<el-input v-model="form.tel" />
</el-form-item>
<el-form-item label="邮箱:">
<el-input v-model="form.email" />
</el-form-item>
</el-form>
<div class="btn">
<el-button type="primary" @click="confirm">确认修改</el-button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
form: {
name: 'admin',
depart: '',
tel: '',
email: ''
},
rules: {
name: { required: true, message: '请输入用户名', trigger: 'blur' },
depart: { required: true, message: '请输入所在部门', trigger: 'blur' }
}
}
},
methods: {
confirm() {
this.$refs.form.validate((valid) => {
if (valid) {
// alert('submit!');
} else {
console.log('error submit!!')
return false
}
})
}
}
}
</script>
<style lang="scss" scoped>
.btn {
margin-top: 50px;
text-align: center;
}
</style>
src/views/user/updateUser/components/password.vue 0 → 100644
View file @ a4463412
<template>
<div>
<el-form ref="form" :model="form" label-width="100px" :rules="rules">
<el-form-item label="用户名:" prop="name">
<el-input v-model="form.name" />
</el-form-item>
<el-form-item label="原密码:" prop="oldPass">
<el-input v-model="form.oldPass" />
</el-form-item>
<el-form-item label="新密码:" prop="newPass">
<el-input v-model="form.newPass" />
</el-form-item>
<el-form-item label="确认新密码:" prop="confirmPwd">
<el-input v-model="form.confirmPwd" />
</el-form-item>
</el-form>
<div class="btn">
<el-button type="primary" @click="confirm">确认修改</el-button>
</div>
</div>
</template>
<script>
export default {
data() {
var validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入新密码'))
} else if (value !== this.form.newPass) {
callback(new Error('两次输入密码不一致!'))
} else {
callback()
}
}
return {
form: {
name: 'admin',
oldPass: '',
newPass: '',
confirmPwd: ''
},
rules: {
name: { required: true, message: '请输入用户名', trigger: 'blur' },
oldPass: { required: true, message: '请输入原密码', trigger: 'blur' },
newPass: { required: true, message: '请输入新密码', trigger: 'blur' },
confirmPwd: [{ required: true, validator: validatePass2, trigger: 'blur' }]
}
}
},
methods: {
confirm() {
this.$refs.form.validate((valid) => {
if (valid) {
// alert('submit!');
} else {
console.log('error submit!!')
return false
}
})
}
}
}
</script>
<style lang="scss" scoped>
.btn {
margin-top: 50px;
text-align: center;
}
</style>
src/views/user/updateUser/index.vue 0 → 100644
View file @ a4463412
<template>
<div>
<breadcrumb />
<div class="update-user-container">
<div class="header">
<div class="tab">
<div v-for="(item,index) in options" :key="item.id" class="tab-item" :class="tabIndex === index ? 'tab-active' : ''" @click="radioChange(item.value,index)">
{{ item.name }}
</div>
</div>
</div>
<base-info v-if="tabIndex === 0" />
<password v-if="tabIndex === 1" />
</div>
</div>
</template>
<script>
import Breadcrumb from '@/components/Breadcrumb'
import baseInfo from '../updateUser/components/baseInfo.vue'
import Password from '../updateUser/components/password.vue'
export default {
components: { Breadcrumb, baseInfo, Password },
data() {
return {
options: [{
name: '修改基本信息',
value: 1
},
{
name: '修改密码',
value: 2
}],
tabIndex: 0
}
},
methods: {
radioChange(val, index) {
this.tabIndex = index
}
}
}
</script>
<style lang="scss" scoped>
.update-user-container {
width: 500px;
margin: 0 auto;
}
.header {
display: flex;
justify-content: center;
margin: 30px 0 50px 0;
.tab {
background: #f3f3f3;
display: flex;
height: 40px;
border-radius: 10px;
cursor: pointer;
.tab-item {
width: 130px;
line-height: 40px;
text-align: center;
font-size: 14px;
color: #666666;
}
.tab-active {
color: #fff;
background: #409eff;
border-radius: 10px;
}
}
}
</style>
src/views/user/userList/index.vue 0 → 100644
View file @ a4463412
<template>
<div>
<breadcrumb />
<el-row class="header">
<el-col :span="4">
<div class="message">共<span>{{ total }}</span>条数据</div>
</el-col>
<el-col :span="2" :offset="18">
<el-button type="primary">添加新用户</el-button>
</el-col>
</el-row>
<el-table v-loading="loading" class="jbs-table" :data="tableData" border style="width: 100%" header-cell-class-name="jbs-table-header">
<el-table-column type="index" label="用户编号" align="center" width="100" />
<el-table-column prop="name" label="用户名" align="center" />
<el-table-column prop="realName" label="真实姓名" align="center" />
<el-table-column prop="dept" label="用户部门" align="center" />
<el-table-column prop="phone" label="电话号码" align="center" />
<el-table-column prop="email" label="邮箱" align="center" />
<el-table-column label="操作" align="center">
<template>
<el-button type="text">修改密码</el-button>
<el-button type="text">修改基本信息</el-button>
</template>
</el-table-column>
</el-table>
<pagination
:limit="searchForm.pageSize"
:page="searchForm.pageNum"
:total="total"
class="pagination"
@pagination="handlePageChange"
/>
</div>
</template>
<script>
import Pagination from '@/components/Pagination'
import Breadcrumb from '@/components/Breadcrumb'
export default {
components: {
Pagination,
Breadcrumb
},
data() {
return {
searchForm: {
pageNum: 1,
pageSize: 10
},
tableData: [
{
name: 'admin',
realName: '张三',
dept: 'NetWork',
phone: '13912451245',
email: '123456@163.com'
},
{
name: 'admin',
realName: '张三',
dept: 'NetWork',
phone: '13912451245',
email: '123456@163.com'
},
{
name: 'admin',
realName: '张三',
dept: 'NetWork',
phone: '13912451245',
email: '123456@163.com'
},
{
name: 'admin',
realName: '张三',
dept: 'NetWork',
phone: '13912451245',
email: '123456@163.com'
},
{
name: 'admin',
realName: '张三',
dept: 'NetWork',
phone: '13912451245',
email: '123456@163.com'
}
],
total: 5,
loading: false
}
},
methods: {
handlePageChange(pageData) {
this.searchForm.pageSize = pageData.size
this.searchForm.pageNum = pageData.page
}
}
}
</script>
<style lang="scss" scoped>
.message {
display: inline-block;
margin-top: 20px;
font-size: 14px;
color:#666666;
span {
font-size: 18px;
color: #409eff;
}
}
.header {
margin: 20px 0;
}
</style>
yarn.lock 0 → 100644
View file @ a4463412
This diff is collapsed.
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