Skip to content

W
web-monitor
Commit 2bab14bc authored by 许倩倩's avatar 许倩倩
Browse files
Options

表格悬浮色

parents 035404b3 b1532e68
Expand all Show whitespace changes
Inline Side-by-side
Showing with 12934 additions and 564 deletions
.gitignore
View file @ 2bab14bc
......@@ -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 @ 2bab14bc
<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/components/Tree.vue deleted 100644 → 0
View file @ 035404b3
<template>
<div>
<el-tree
ref="elTree"
class="el-select-tree__list"
:default-expanded-keys="defaultExpandedKeys"
:show-checkbox="multiple"
:expand-on-click-node="multiple"
:style="{ 'min-width': minWidth + 'px' }"
@node-click="nodeClick"
@check-change="checkChange"
:data="data"
:props="props"
:node-key="propsValue"
:default-expand-all="defaultExpandAll"
:check-strictly="checkStrictly"
:lazy="lazy"
:load="load"
:icon-class="iconClass"
:indent="indent"
:accordion="accordion"
:filter-node-method="filterNode"
:auto-expand-parent="autoExpandParent"
:render-content="renderContent"
:render-after-expand="renderAfterExpand"
>
<span
slot-scope="{ data }"
class="el-select-tree__item"
:class="treeItemClass(data)"
>
<template v-if="data.type === 1">
<svg-icon icon-class="org" />
<span class="ml10" :title="data[propsLabel]">{{
data[propsLabel]
}}</span>
</template>
<template v-else-if="data.type === 2">
<svg-icon
:icon-class="`car_${data.data.carstatus}`"
/>
<span class="ml10" :title="data[propsLabel]">{{ data[propsLabel] }}</span>
</template>
<template v-else-if="data.type === 3">
<svg-icon
icon-class="human"
/>
<span class="ml10" :title="data[propsLabel]">{{ data[propsLabel] }}</span>
</template>
<template v-else-if="hasChannel">
<svg-icon
icon-class="camera"
/>
<span class="ml10" :title="data[propsLabel]">{{ data[propsLabel] }}</span>
</template>
</span>
</el-tree>
</div>
</template>
<script>
import Emitter from 'element-ui/lib/mixins/emitter'
import {
addResizeListener,
removeResizeListener
} from 'element-ui/lib/utils/resize-event'
export default {
name: 'tree',
data() {
return {
minWidth: 0
}
},
mixins: [Emitter],
model: {
prop: 'value',
event: 'change'
},
props: {
data: {
type: Array,
default() {
return []
}
},
props: {
type: Object,
default() {
return {
value: 'value',
label: 'label',
children: 'children',
disabled: 'disabled',
isLeaf: 'isLeaf'
};
}
},
canFilter: Boolean,
filterText: String,
checkStrictly: Boolean,
nodeKey: String,
defaultExpandAll: Boolean,
lazy: Boolean,
load: Function,
iconClass: String,
indent: Number,
accordion: Boolean,
autoExpandParent: {
type: Boolean,
default: true
},
renderContent: Function,
renderAfterExpand: Boolean,
// [el-tree] forwarding parameters end
multiple: Boolean,
value: {
type: [Number, String, Array, Object],
default: ''
},
},
computed: {
propsValue() {
return this.nodeKey || this.props.value || 'value'
},
propsLabel() {
return this.props.label || 'label'
},
propsIsLeaf() {
return this.props.isLeaf || 'isLeaf'
},
defaultExpandedKeys() {
return Array.isArray(this.value)
? this.value
: this.value || this.value === 0
? [this.value]
: []
}
},
watch: {
value: {
immediate: true,
handler(val) {
if(val.length > 0) {
this.setSelected()
}
}
},
data: {
immediate: true,
handler(val) {
if(val.length > 0) {
this.setSelected()
}
}
},
filterText: {
immediate: true,
handler(val) {
if (this.canFilter && this.$refs.elTree) {
this.$refs.elTree.filter(val)
}
}
}
},
methods: {
filterNode(value, data, node) {
if(!value){
return true
}
if(data.label.indexOf(value) !==-1) {
return true
}
return this.checkBelongToChooseNode(value, data, node)
},
checkBelongToChooseNode(value, data, node) {
const level = node.level
let parentData = node.parent
let index =0
while(index < level -1) {
if(parentData.data.label.indexOf(value) !==-1) {
return true
}
parentData = parentData.parent
index ++
}
return false
},
valueChange(value, node) {
this.$emit('change', value, node)
},
clear() {
if (this.multiple) {
this.valueChange([])
this.$nextTick(() => {
this.$refs.elTree.setCheckedKeys([])
})
} else {
this.valueChange('')
}
this.$emit('clear')
},
nodeClick(data, _, component) {
const children = data[this.props.children]
const value = data[this.propsValue]
if (
((children && children.length) ||
(this.lazy && !data[this.propsIsLeaf])) &&
!this.checkStrictly
) {
component.handleExpandIconClick()
} else if (!this.multiple && !data.disabled) {
if (value !== this.value) {
this.valueChange(value, data)
}
}
},
checkChange() {
const elTree = this.$refs.elTree
const leafOnly = !this.checkStrictly
const keys = elTree.getCheckedKeys(leafOnly)
const nodes = elTree.getCheckedNodes(leafOnly)
this.valueChange(keys, nodes)
},
setSelected() {
this.$nextTick(() => {
const elTree = this.$refs.elTree
if (!elTree) return
if (this.multiple) {
elTree.setCheckedKeys(this.value)
this.checkChange()
} else {
const selectedNode = elTree.getNode(this.value)
this.valueChange(this.value, selectedNode)
}
})
},
treeItemClass(data) {
return {
'is-selected': this.multiple
? false
: data[this.propsValue] === this.value,
'is-disabled': data.disabled
}
},
handleResize() {
// set the `tree` default `min-width`
// border's width is 2px
this.minWidth = this.$el.clientWidth - 2
}
},
mounted() {
this.setSelected()
addResizeListener(this.$el, this.handleResize)
},
beforeDestroy() {
if (this.$el && this.handleResize) {
removeResizeListener(this.$el, this.handleResize)
}
}
}
</script>
\ No newline at end of file
src/components/orgTree.vue
View file @ 2bab14bc
<template>
<div class="el-select-tree">
<el-popover
ref="elPopover"
v-model="visible"
transition="el-zoom-in-top"
popper-class="el-select-tree__popover"
trigger="click"
:disabled="disabled"
:placement="placement"
:width="popoverWidth"
@after-enter="handleScroll()"
<el-row class="tree_header mb10">
<el-col>
<el-select v-model="value" placeholder="请选择" size="mini">
<el-option
v-for="item in options"
:key="item.id"
:label="item.label"
:value="item.id"
>
<div class="card-board">
<el-input
v-model="keyword"
:placeholder="searchPlaceholder"
:size="size"
clearable>
</el-input>
<!-- scrollbar wrap -->
<el-scrollbar
wrap-class="el-select-dropdown__wrap"
view-class="el-select-dropdown__list"
ref="scrollbar"
</el-option>
</el-select>
</el-col>
<el-col class="ml20">
<el-button type="primary" icon="el-icon-s-unfold" size="mini">展开</el-button>
</el-col>
<el-col>
<el-button type="primary" size="mini" icon="el-icon-refresh-right">刷新</el-button>
</el-col>
</el-row>
<el-tree
v-loading="loading"
ref="vuetree"
:props="defaultProps"
:data="data"
:render-content="renderContent"
:default-expand-all = 'true'
nodeKey="id"
class="el-tree"
:current-node-key='id'
:expand-on-click-node="false"
@node-click="handleClick"
>
<tree
ref="tree"
v-model="valueInner"
@change="change"
:canFilter="canFilter"
:filterText="keyword"
:checkStrictly="checkStrictly"
:defaultExpandAll=true
:data="treeData">
</tree>
</el-scrollbar>
</div>
<!-- trigger input -->
<el-input
v-model="selectedLabel"
ref="reference"
slot="reference"
readonly
:style="selectStyle"
:validate-event="false"
:size="size"
:class="{
'is-active': visible,
'is-selected': selectedLabel,
'is-clearable': clearable
}"
:disabled="disabled"
:placeholder="placeholder"
>
<i
v-if="clearable"
@click.stop="clear()"
slot="suffix"
class="el-input__icon el-input__icon-close el-icon-circle-close"
></i>
<i
slot="suffix"
class="el-input__icon el-input__icon-arrow-down el-icon-arrow-down"
></i>
</el-input>
</el-popover>
</el-tree>
</div>
</template>
<script>
import {
TreeMixin,
} from '@/mixins/tree'
import { mapGetters } from 'vuex'
export default {
data() {
return {
canFilter: true
value: '',
options: [
{
id: 0,
label: '手动监控'
},
{
id: 1,
label: '自动监控'
}
],
data: [
{
id: 0,
label: '张呼铁路客运专线',
children: [
{
id: 1,
label: 'STATION1未开通',
children: [{
label: '三级 1-1-1'
}]
},
{
id: 2,
label: 'STATION2未开通',
children: [{
label: '三级 1-1-1'
}]
},
{
id: 3,
label: '(7)VLCB-ZZT02',
children: [{
id: 4,
label: 'PSU(现场管理单元)',
children: [{
id: 5,
label: '漏缆K362+784张...'
},
{
id: 6,
label: '漏缆K362+784张...'
}]
},
{
id: 7,
label: '故障定位单位_K3...',
children: [{
id: 8,
label: '漏缆K362+784张...'
},
{
id:9,
label: '漏缆K362+784张...'
}]
}]
},
]
}
],
defaultProps: {
children: 'children',
label: 'label'
},
loading: false,
}
},
name: 'org-tree',
mixins: [TreeMixin],
computed: {
...mapGetters('tree', [
'treeData',
])
},
methods: {
handleClick(data) {
console.log(data);
},
renderContent (h, {node, data, store}) {
return (
<div>
<span style="padding-right:10px;" id={data.id} >
<span style={{ color: data.myColor, marginRight: '5px', fontSize: '16px' }}><svg-icon icon-class="org" /></span>
<span style={{ color: data.myColor, marginRight: '5px', fontSize: '16px' }}>{node.label}</span>
</span>
</div>
)
},
}
}
</script>
......@@ -96,87 +138,21 @@ export default {
@import '@/styles/variables';
.el-select-tree {
border: 1px dotted;
display: inline-block;
.el-input__icon {
cursor: pointer;
transition: transform 0.3s;
&-close {
display: none;
}
}
.el-input__inner {
cursor: pointer;
padding-right: 30px;
}
.el-input {
&:hover:not(.is-disabled) {
.el-input__inner {
// border-color: $--input-border-color-hover;
}
&.is-selected.is-clearable {
.el-input__icon {
&-close {
display: inline-block;
}
&-arrow-down {
display: none;
}
}
}
}
&.is-active {
.el-input__icon-arrow-down {
transform: rotate(-180deg);
}
.el-input__inner {
// border-color: $--button-primary-border-color;
}
}
}
&__popover {
padding: 0 !important;
// extends el-select-dropdown - start
// border: $--select-dropdown-border !important;
// border-radius: $--border-radius-base !important;
// extends el-select-dropdown - end
.popper__arrow {
left: 35px !important;
width: 300px;
height: calc(100vh - 10px);
background: rgba(238, 247, 254, 0.39);
.tree_header {
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
height: 44px;
background: rgba(196, 214, 255, 0.39);
opacity: 1;
box-sizing: border-box;
}
.el-tree-node__expand-icon.is-leaf {
cursor: pointer;
}
}
&__list {
overflow-y: auto;
// scroll style - start
&::-webkit-scrollbar-track-piece {
background: #d3dce6;
}
&::-webkit-scrollbar {
width: 4px;
}
&::-webkit-scrollbar-thumb {
background: #99a9bf;
}
// scroll style - end
}
&__item {
position: relative;
white-space: nowrap;
// padding-right: $spacing-medium;
&.is-selected {
// color: $--select-option-selected-font-color;
font-weight: bolder;
}
&.is-disabled {
// color: $--font-color-disabled-base;
cursor: not-allowed;
}
}
// border: 1px dotted;
// display: inline-block;
}
</style>
\ No newline at end of file
src/icons/svg/org.svg 0 → 100644
View file @ 2bab14bc
<svg id="ic_dashboard" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<defs>
<style>
.cls-1 {
fill: none;
}
.cls-2 {
fill: #666;
}
</style>
</defs>
<g id="home">
<path id="路径_372" data-name="路径 372" class="cls-1" d="M0,0H24V24H0Z"/>
</g>
<path id="Shape" class="cls-2" d="M13,20H1a1,1,0,0,1-1-1V6.5a2,2,0,0,1,2-2H6V2A2,2,0,0,1,8,0h4a2,2,0,0,1,2,2V9h4a2,2,0,0,1,2,2v8a1,1,0,0,1-1,1Zm5-2V11H14v7ZM8,18h4V11q0-.03,0-.059V2H8ZM2,18H6V6.5H2Z" transform="translate(2 2)"/>
</svg>
src/main.js
View file @ 2bab14bc
......@@ -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/mixins/tree.js deleted 100644 → 0
View file @ 035404b3
import Tree from "@/components/Tree";
export const TreeMixin = {
model: {
prop: "value",
event: "change",
},
props: {
clearable: Boolean,
selectWidth: Number,
popoverWidth: Number,
placement: {
type: String,
default: "bottom-start",
},
disabled: Boolean,
placeholder: {
type: String,
default: "请选择",
},
searchPlaceholder: {
type: String,
default: "请输入",
},
size: {
type: String,
default: "small",
},
multiple: { type: Boolean, default: false },
value: {
type: [Number, String, Array, Object],
default: "",
},
},
data() {
return {
visible: false,
checkStrictly: true,
selectedNode: null,
keyword: "",
};
},
components: {
Tree,
},
watch: {
value(newV) {
if (!newV) {
this.selectedNode = null
}
}
},
mounted() {
this.init && this.init();
},
computed: {
valueInner: {
get() {
return this.value;
},
set(val) {
this.$emit("change", val);
},
},
selectedLabel() {
if (!this.selectedNode) return "";
return this.selectedNode.label;
},
selectStyle() {
if (this.selectWidth) {
return {
width: this.selectWidth + "px",
};
}
},
},
methods: {
change(value, data) {
if (!value.leaf && this.ignoreParentChoose) return;
if (data) {
this.selectedNode = data;
}
this.$emit("change", value, data);
if (!this.multiple) {
this.visible = false;
}
},
valueChange(value, node) {
this.$emit("change", value, node);
},
clear() {
if (this.multiple) {
this.valueChange([]);
} else {
this.visible = false;
this.valueChange("");
this.selectedNode = null;
}
},
// 触发滚动条的重置
handleScroll() {
this.$refs.scrollbar && this.$refs.scrollbar.handleScroll();
},
},
};
export function travelTree(treeData, idKey, labelKey) {
let len = treeData.length;
for (let i = 0; i < len; i++) {
let curData = treeData[i];
if (curData.children && curData.children.length) {
curData.label = `${curData.data[labelKey]}(${curData.children.length})`;
travelTree(curData.children, idKey, labelKey);
} else {
curData.label = curData.data[labelKey];
}
curData.value = curData.data[idKey];
}
}
src/router/index.js
View file @ 2bab14bc
......@@ -68,35 +68,65 @@ export const constantRoutes = [
{
path: '/setting',
component: Layout,
redirect: '/dashboard',
children: [{
path: 'setting',
redirect: '/setting/add',
name: 'Setting',
component: () => import('@/views/dashboard/index'),
meta: { title: '配置管理', icon: 'dashboard' }
}]
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',
redirect: '/maintain/oneself',
name: 'Maintain',
component: () => import('@/views/dashboard/index'),
meta: { title: '维护管理', icon: 'dashboard' }
}]
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',
......@@ -115,12 +145,21 @@ export const constantRoutes = [
path: '/user',
component: Layout,
redirect: '/dashboard',
children: [{
path: 'user',
name: 'User',
component: () => import('@/views/dashboard/index'),
meta: { title: '用户管理', icon: 'dashboard' }
}]
meta: { title: '用户管理', icon: 'dashboard' },
children: [{
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/common.scss 0 → 100644
View file @ 2bab14bc
/**
公共样式
*/
.ml10 {
margin-left: 10px;
}
.mb10 {
margin-bottom: 10px;
}
.ml20 {
margin-left: 20px;
}
\ No newline at end of file
src/styles/element-ui.scss
View file @ 2bab14bc
......@@ -47,3 +47,25 @@
.el-range-separator {
box-sizing: content-box;
}
.el-pagination {
margin-top: 20px;
}
.el-tree {
background: rgba(249, 249, 249, 0.39);
}
.el-tree-node__content {
height: 40px;
}
.el-tree-node__expand-icon {
color: rgba(0, 98, 255, 0.39);
}
// button
.el-button--primary {
color: #fff;
background: rgba(11, 65, 177);
opacity: 1;
border-radius: 4px;
}
src/styles/index.scss
View file @ 2bab14bc
......@@ -3,6 +3,7 @@
@import './transition.scss';
@import './element-ui.scss';
@import './sidebar.scss';
@import './common.scss';
body {
height: 100%;
......@@ -12,6 +13,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/dashboard/index.vue
View file @ 2bab14bc
......@@ -23,7 +23,7 @@ export default {
<style lang="scss" scoped>
.dashboard {
&-container {
margin: 30px;
margin: 0px;
}
&-text {
font-size: 30px;
......
src/views/maintain/oneself/index.vue 0 → 100644
View file @ 2bab14bc
<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 @ 2bab14bc
<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 @ 2bab14bc
<template>
<!-- 漏缆实时状态 -->
<div class="leakage-cable">
<breadcrumb />
<div class="leakage-top">
<div>
共6条数据
</div>
<div class="operate-btn">
<el-button type="primary">刷新</el-button>
<el-button type="primary">查询</el-button>
<el-button type="primary">导出</el-button>
</div>
</div>
<el-table :data="tableData" style="width: 100%" :cell-class-name="cellClassFn" :header-cell-style="{background:'#EAF1FE',color:'#666666'}">
<el-table-column prop="equipment1" label="网元设备" align="center" />
<el-table-column prop="state1" label="连接状态" align="center" />
<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>
<pagination
:limit="searchForm.pageSize"
:page="searchForm.pageNum"
:total="total"
class="pagination"
@pagination="handlePageChange"
/>
</div>
</template>
<script>
import Breadcrumb from '@/components/Breadcrumb'
import Pagination from '@/components/Pagination'
export default {
components: { Pagination, Breadcrumb },
data() {
return {
searchForm: {
pageNum: 1,
pageSize: 10
},
total: 10,
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}) {
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'
}
},
handlePageChange(pageData) {
this.searchForm.pageSize = pageData.size
this.searchForm.pageNum = pageData.page
}
}
};
</script>
<style lang="scss" scoped>
.leakage-cable {
.leakage-top {
margin-bottom: 20px;
display: flex;
align-items: flex-end;
justify-content: space-between;
}
& ::v-deep .cell {
color: #333333;
}
& ::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 @ 2bab14bc
<template>
<!-- 漏缆实时状态 -->
<div class="leakage-cable">
<breadcrumb />
<div class="leakage-top">
<div style="color: #666666">
共6条数据
</div>
<div class="operate-btn">
<el-button type="primary">刷新</el-button>
<el-button type="primary">查询</el-button>
<el-button type="primary">导出</el-button>
</div>
</div>
<el-table :data="tableData" style="width: 100%" :cell-class-name="cellClassFn" :header-cell-style="{background:'#EAF1FE',color:'#666666'}">
<el-table-column type="index" label="序列号" width="100" align="center" />
<el-table-column prop="name" label="基站名称" width="180" align="center" />
<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>
{{ 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+'green'" class="green message">
{{ item }}
</div>
<div v-for="(item, index) in scope.row.message.black" :key="index+'black'" class="black message">
{{ item }}
</div>
</template>
</el-table-column>
<el-table-column prop="uploadDate" label="最新上传时间" align="center" />
</el-table>
<pagination
:limit="searchForm.pageSize"
:page="searchForm.pageNum"
:total="total"
class="pagination"
@pagination="handlePageChange"
/>
</div>
</template>
<script>
import Breadcrumb from '@/components/Breadcrumb'
import Pagination from '@/components/Pagination'
export default {
components: { Pagination, Breadcrumb },
data() {
return {
searchForm: {
pageNum: 1,
pageSize: 10
},
total: 10,
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'
}
},
handlePageChange(pageData) {
this.searchForm.pageSize = pageData.size
this.searchForm.pageNum = pageData.page
}
}
};
</script>
<style lang="scss" scoped>
.leakage-cable {
.leakage-top {
margin-bottom: 20px;
display: flex;
align-items: flex-end;
justify-content: space-between;
}
& ::v-deep .cell {
color: #333333;
}
.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 @ 2bab14bc
<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 @ 2bab14bc
<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 @ 2bab14bc
<template>
<div>
<div class="title">修改基本信息</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;
}
.title {
width: 100%;
height: 60px;
background: rgba(226, 235, 255, 0.39);
line-height: 60px;
font-size: 18px;
color: #333;
font-weight: 500;
text-align: center;
margin-bottom: 30px;
}
.el-form {
width: 500px;
margin: 0 auto;
}
</style>
src/views/user/updateUser/components/password.vue 0 → 100644
View file @ 2bab14bc
<template>
<div>
<div class="title">修改密码</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;
}
.el-form {
width: 500px;
margin: 0 auto;
}
.title {
width: 100%;
height: 60px;
background: rgba(226, 235, 255, 0.39);
line-height: 60px;
font-size: 18px;
color: #333;
font-weight: 500;
text-align: center;
margin-bottom: 30px;
}
</style>
src/views/user/updateUser/index.vue 0 → 100644
View file @ 2bab14bc
<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>
.header {
display: flex;
justify-content: center;
margin-bottom: 30px;
.tab {
display: flex;
cursor: pointer;
.tab-item {
margin: 0 50px;
padding-bottom: 10px;
}
.tab-active {
color: #038ed7;
border-bottom: 1px solid #038ed7;
}
}
}
</style>
src/views/user/userList/index.vue 0 → 100644
View file @ 2bab14bc
<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 @ 2bab14bc
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