12 changed files with 1594 additions and 1036 deletions
|
Before Width: | Height: | Size: 66 KiB After Width: | Height: | Size: 622 B |
@ -1,99 +1,99 @@ |
|||
@import 'variables'; |
|||
|
|||
@mixin colorBtn($color) { |
|||
background: $color; |
|||
|
|||
&:hover { |
|||
color: $color; |
|||
|
|||
&:before, |
|||
&:after { |
|||
background: $color; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.blue-btn { |
|||
@include colorBtn($blue) |
|||
} |
|||
|
|||
.light-blue-btn { |
|||
@include colorBtn($light-blue) |
|||
} |
|||
|
|||
.red-btn { |
|||
@include colorBtn($red) |
|||
} |
|||
|
|||
.pink-btn { |
|||
@include colorBtn($pink) |
|||
} |
|||
|
|||
.green-btn { |
|||
@include colorBtn($green) |
|||
} |
|||
|
|||
.tiffany-btn { |
|||
@include colorBtn($tiffany) |
|||
} |
|||
|
|||
.yellow-btn { |
|||
@include colorBtn($yellow) |
|||
} |
|||
|
|||
.pan-btn { |
|||
font-size: 14px; |
|||
color: #fff; |
|||
padding: 14px 36px; |
|||
border-radius: 8px; |
|||
border: none; |
|||
outline: none; |
|||
transition: 600ms ease all; |
|||
position: relative; |
|||
display: inline-block; |
|||
|
|||
&:hover { |
|||
background: #fff; |
|||
|
|||
&:before, |
|||
&:after { |
|||
width: 100%; |
|||
transition: 600ms ease all; |
|||
} |
|||
} |
|||
|
|||
&:before, |
|||
&:after { |
|||
content: ''; |
|||
position: absolute; |
|||
top: 0; |
|||
right: 0; |
|||
height: 2px; |
|||
width: 0; |
|||
transition: 400ms ease all; |
|||
} |
|||
|
|||
&::after { |
|||
right: inherit; |
|||
top: inherit; |
|||
left: 0; |
|||
bottom: 0; |
|||
} |
|||
} |
|||
|
|||
.custom-button { |
|||
display: inline-block; |
|||
line-height: 1; |
|||
white-space: nowrap; |
|||
cursor: pointer; |
|||
background: #fff; |
|||
color: #fff; |
|||
-webkit-appearance: none; |
|||
text-align: center; |
|||
box-sizing: border-box; |
|||
outline: 0; |
|||
margin: 0; |
|||
padding: 10px 15px; |
|||
font-size: 14px; |
|||
border-radius: 4px; |
|||
} |
|||
@import 'variables'; |
|||
|
|||
@mixin colorBtn($color) { |
|||
background: $color; |
|||
|
|||
&:hover { |
|||
color: $color; |
|||
|
|||
&:before, |
|||
&:after { |
|||
background: $color; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.blue-btn { |
|||
@include colorBtn($blue) |
|||
} |
|||
|
|||
.light-blue-btn { |
|||
@include colorBtn($light-blue) |
|||
} |
|||
|
|||
.red-btn { |
|||
@include colorBtn($red) |
|||
} |
|||
|
|||
.pink-btn { |
|||
@include colorBtn($pink) |
|||
} |
|||
|
|||
.green-btn { |
|||
@include colorBtn($green) |
|||
} |
|||
|
|||
.tiffany-btn { |
|||
@include colorBtn($tiffany) |
|||
} |
|||
|
|||
.yellow-btn { |
|||
@include colorBtn($yellow) |
|||
} |
|||
|
|||
.pan-btn { |
|||
font-size: 14px; |
|||
color: #fff; |
|||
padding: 14px 36px; |
|||
border-radius: 8px; |
|||
border: none; |
|||
outline: none; |
|||
transition: 600ms ease all; |
|||
position: relative; |
|||
display: inline-block; |
|||
|
|||
&:hover { |
|||
background: #fff; |
|||
|
|||
&:before, |
|||
&:after { |
|||
width: 100%; |
|||
transition: 600ms ease all; |
|||
} |
|||
} |
|||
|
|||
&:before, |
|||
&:after { |
|||
content: ''; |
|||
position: absolute; |
|||
top: 0; |
|||
right: 0; |
|||
height: 2px; |
|||
width: 0; |
|||
transition: 400ms ease all; |
|||
} |
|||
|
|||
&::after { |
|||
right: inherit; |
|||
top: inherit; |
|||
left: 0; |
|||
bottom: 0; |
|||
} |
|||
} |
|||
|
|||
.custom-button { |
|||
display: inline-block; |
|||
line-height: 1; |
|||
white-space: nowrap; |
|||
cursor: pointer; |
|||
background: #fff; |
|||
color: #fff; |
|||
-webkit-appearance: none; |
|||
text-align: center; |
|||
box-sizing: border-box; |
|||
outline: 0; |
|||
margin: 0; |
|||
padding: 10px 15px; |
|||
font-size: 14px; |
|||
border-radius: 4px; |
|||
} |
|||
|
|||
@ -1,230 +1,230 @@ |
|||
.head-container { |
|||
padding-top: 4px; |
|||
padding-bottom: 6px; |
|||
background-color: #ffffff; |
|||
border-radius: 4px; |
|||
|
|||
.filter-item { |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
margin: 0 3px 10px 0; |
|||
|
|||
input { |
|||
height: 30.5px; |
|||
line-height: 30.5px; |
|||
} |
|||
} |
|||
|
|||
.el-form-item-label { |
|||
margin: 0 3px 9px 0; |
|||
display: inline-block; |
|||
text-align: right; |
|||
vertical-align: middle; |
|||
font-size: 14px; |
|||
color: #606266; |
|||
line-height: 30.5px; |
|||
padding: 0 7px 0 7px; |
|||
} |
|||
|
|||
.el-button + .el-button { |
|||
margin-left: 0 !important; |
|||
} |
|||
|
|||
.el-select__caret.el-input__icon.el-icon-arrow-up { |
|||
line-height: 30.5px; |
|||
} |
|||
|
|||
.date-item { |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
margin-bottom: 10px; |
|||
height: 30.5px !important; |
|||
width: 230px !important; |
|||
} |
|||
} |
|||
|
|||
.el-avatar { |
|||
display: inline-block; |
|||
text-align: center; |
|||
background: #ccc; |
|||
color: #fff; |
|||
white-space: nowrap; |
|||
position: relative; |
|||
overflow: hidden; |
|||
vertical-align: middle; |
|||
width: 32px; |
|||
height: 32px; |
|||
line-height: 32px; |
|||
border-radius: 16px; |
|||
} |
|||
|
|||
.logo-con { |
|||
height: 60px; |
|||
padding: 13px 0 0; |
|||
|
|||
img { |
|||
height: 32px; |
|||
width: 135px; |
|||
display: block; |
|||
//margin: 0 auto; |
|||
} |
|||
} |
|||
|
|||
#el-login-footer { |
|||
height: 40px; |
|||
line-height: 40px; |
|||
position: fixed; |
|||
bottom: 0; |
|||
width: 100%; |
|||
text-align: center; |
|||
color: #fff; |
|||
font-family: Arial, serif; |
|||
font-size: 12px; |
|||
letter-spacing: 1px; |
|||
} |
|||
|
|||
#el-main-footer { |
|||
background: none repeat scroll 0 0 white; |
|||
border-top: 1px solid #e7eaec; |
|||
overflow: hidden; |
|||
padding: 10px 6px 0 6px; |
|||
height: 33px; |
|||
font-size: 0.7rem !important; |
|||
color: #7a8b9a; |
|||
letter-spacing: 0.8px; |
|||
font-family: Arial, sans-serif !important; |
|||
position: fixed; |
|||
bottom: 0; |
|||
z-index: 99; |
|||
width: 100%; |
|||
} |
|||
|
|||
.eladmin-upload { |
|||
border: 1px dashed #c0ccda; |
|||
border-radius: 5px; |
|||
height: 45px; |
|||
line-height: 45px; |
|||
width: 368px; |
|||
} |
|||
|
|||
.my-blockquote { |
|||
margin: 0 0 10px; |
|||
padding: 15px; |
|||
line-height: 22px; |
|||
border-left: 5px solid #00437B; |
|||
border-radius: 0 2px 2px 0; |
|||
background-color: #f2f2f2; |
|||
} |
|||
|
|||
.my-code { |
|||
position: relative; |
|||
padding: 15px; |
|||
line-height: 20px; |
|||
border-left: 5px solid #ddd; |
|||
color: #333; |
|||
font-family: Courier New, serif; |
|||
font-size: 12px |
|||
} |
|||
|
|||
.el-tabs { |
|||
margin-bottom: 25px; |
|||
} |
|||
|
|||
|
|||
//修改侧边栏菜单颜色和高度 |
|||
.el-menu-item, .el-submenu__title { |
|||
height: 40px !important; |
|||
//background-color: #776020 !important; |
|||
} |
|||
|
|||
#app .sidebar-container .el-submenu .el-menu-item { |
|||
} |
|||
|
|||
#app .sidebar-container .nest-menu .el-submenu > .el-submenu__title, #app .sidebar-container .el-submenu .el-menu-item { |
|||
} |
|||
|
|||
#app .sidebar-container { |
|||
//background-color: #544b32 !important; |
|||
} |
|||
|
|||
.el-form-item--small.el-form-item { |
|||
margin-bottom: 12px !important; |
|||
} |
|||
|
|||
.el-form-item--mini.el-form-item { |
|||
margin-bottom: 10px !important; |
|||
} |
|||
|
|||
//去除编辑文本框为数字时的上下箭头start |
|||
.el-form--inline .el-form-item__content { |
|||
width: auto !important; |
|||
} |
|||
|
|||
input[type="number"] { |
|||
-moz-appearance: textfield; |
|||
} |
|||
|
|||
input[type="number"]::-webkit-inner-spin-button, |
|||
input[type="number"]::-webkit-outer-spin-button { |
|||
-webkit-appearance: none; |
|||
} |
|||
|
|||
//去除编辑文本框为数字时的上下箭头end |
|||
|
|||
//设置计数器文字居左 |
|||
.el-input-number--mini .el-input__inner { |
|||
text-align: left; |
|||
} |
|||
|
|||
.el-table:not(.el-table–scrollable-x) .el-table__fixed-right { |
|||
height: 100% !important; |
|||
} |
|||
|
|||
// 修改弹出框距离 |
|||
.el-dialog__body { |
|||
padding-top: 0px !important; |
|||
} |
|||
|
|||
//表格标题样式 |
|||
.el-table { |
|||
.el-table__header-wrapper, |
|||
.el-table__fixed-header-wrapper { |
|||
th { |
|||
word-break: break-word; |
|||
background-color: #f5f5f5; |
|||
color: #515a6e; |
|||
height: 35px; |
|||
font-size: 13px; |
|||
} |
|||
|
|||
td { |
|||
color: #f8f8f9; |
|||
} |
|||
} |
|||
|
|||
.el-table__body-wrapper { |
|||
.el-button [class*="el-icon-"] + span { |
|||
margin-left: 1px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
//表格固定列最后一行显示不全(https://mp.weixin.qq.com/s/HpoykJNtsynsW4UMHitZbQ) |
|||
.el-table__fixed-right { |
|||
height: 100% !important; |
|||
} |
|||
|
|||
//表头与内容错位 |
|||
.el-table--scrollable-y .el-table__body-wrapper { |
|||
overflow-y: overlay !important; |
|||
} |
|||
//左侧边框不显示start https://blog.csdn.net/m0_37922443/article/details/126487240 |
|||
.el-table__row td:not(.is-hidden):last-child { |
|||
right: -1px; |
|||
} |
|||
|
|||
thead th:not(.is-hidden):last-child { |
|||
right: -1px; |
|||
} |
|||
//左侧边框不显示end |
|||
|
|||
.head-container { |
|||
padding-top: 4px; |
|||
padding-bottom: 6px; |
|||
background-color: #ffffff; |
|||
border-radius: 4px; |
|||
|
|||
.filter-item { |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
margin: 0 3px 10px 0; |
|||
|
|||
input { |
|||
height: 30.5px; |
|||
line-height: 30.5px; |
|||
} |
|||
} |
|||
|
|||
.el-form-item-label { |
|||
margin: 0 3px 9px 0; |
|||
display: inline-block; |
|||
text-align: right; |
|||
vertical-align: middle; |
|||
font-size: 14px; |
|||
color: #606266; |
|||
line-height: 30.5px; |
|||
padding: 0 7px 0 7px; |
|||
} |
|||
|
|||
.el-button + .el-button { |
|||
margin-left: 0 !important; |
|||
} |
|||
|
|||
.el-select__caret.el-input__icon.el-icon-arrow-up { |
|||
line-height: 30.5px; |
|||
} |
|||
|
|||
.date-item { |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
margin-bottom: 10px; |
|||
height: 30.5px !important; |
|||
width: 230px !important; |
|||
} |
|||
} |
|||
|
|||
.el-avatar { |
|||
display: inline-block; |
|||
text-align: center; |
|||
background: #ccc; |
|||
color: #fff; |
|||
white-space: nowrap; |
|||
position: relative; |
|||
overflow: hidden; |
|||
vertical-align: middle; |
|||
width: 32px; |
|||
height: 32px; |
|||
line-height: 32px; |
|||
border-radius: 16px; |
|||
} |
|||
|
|||
.logo-con { |
|||
height: 60px; |
|||
padding: 13px 0 0; |
|||
|
|||
img { |
|||
height: 32px; |
|||
width: 135px; |
|||
display: block; |
|||
//margin: 0 auto; |
|||
} |
|||
} |
|||
|
|||
#el-login-footer { |
|||
height: 40px; |
|||
line-height: 40px; |
|||
position: fixed; |
|||
bottom: 0; |
|||
width: 100%; |
|||
text-align: center; |
|||
color: #fff; |
|||
font-family: Arial, serif; |
|||
font-size: 12px; |
|||
letter-spacing: 1px; |
|||
} |
|||
|
|||
#el-main-footer { |
|||
background: none repeat scroll 0 0 white; |
|||
border-top: 1px solid #e7eaec; |
|||
overflow: hidden; |
|||
padding: 10px 6px 0 6px; |
|||
height: 33px; |
|||
font-size: 0.7rem !important; |
|||
color: #7a8b9a; |
|||
letter-spacing: 0.8px; |
|||
font-family: Arial, sans-serif !important; |
|||
position: fixed; |
|||
bottom: 0; |
|||
z-index: 99; |
|||
width: 100%; |
|||
} |
|||
|
|||
.eladmin-upload { |
|||
border: 1px dashed #c0ccda; |
|||
border-radius: 5px; |
|||
height: 45px; |
|||
line-height: 45px; |
|||
width: 368px; |
|||
} |
|||
|
|||
.my-blockquote { |
|||
margin: 0 0 10px; |
|||
padding: 15px; |
|||
line-height: 22px; |
|||
border-left: 5px solid #00437B; |
|||
border-radius: 0 2px 2px 0; |
|||
background-color: #f2f2f2; |
|||
} |
|||
|
|||
.my-code { |
|||
position: relative; |
|||
padding: 15px; |
|||
line-height: 20px; |
|||
border-left: 5px solid #ddd; |
|||
color: #333; |
|||
font-family: Courier New, serif; |
|||
font-size: 12px |
|||
} |
|||
|
|||
.el-tabs { |
|||
margin-bottom: 25px; |
|||
} |
|||
|
|||
|
|||
//修改侧边栏菜单颜色和高度 |
|||
.el-menu-item, .el-submenu__title { |
|||
height: 40px !important; |
|||
//background-color: #776020 !important; |
|||
} |
|||
|
|||
#app .sidebar-container .el-submenu .el-menu-item { |
|||
} |
|||
|
|||
#app .sidebar-container .nest-menu .el-submenu > .el-submenu__title, #app .sidebar-container .el-submenu .el-menu-item { |
|||
} |
|||
|
|||
#app .sidebar-container { |
|||
//background-color: #544b32 !important; |
|||
} |
|||
|
|||
.el-form-item--small.el-form-item { |
|||
margin-bottom: 12px !important; |
|||
} |
|||
|
|||
.el-form-item--mini.el-form-item { |
|||
margin-bottom: 10px !important; |
|||
} |
|||
|
|||
//去除编辑文本框为数字时的上下箭头start |
|||
.el-form--inline .el-form-item__content { |
|||
width: auto !important; |
|||
} |
|||
|
|||
input[type="number"] { |
|||
-moz-appearance: textfield; |
|||
} |
|||
|
|||
input[type="number"]::-webkit-inner-spin-button, |
|||
input[type="number"]::-webkit-outer-spin-button { |
|||
-webkit-appearance: none; |
|||
} |
|||
|
|||
//去除编辑文本框为数字时的上下箭头end |
|||
|
|||
//设置计数器文字居左 |
|||
.el-input-number--mini .el-input__inner { |
|||
text-align: left; |
|||
} |
|||
|
|||
.el-table:not(.el-table–scrollable-x) .el-table__fixed-right { |
|||
height: 100% !important; |
|||
} |
|||
|
|||
// 修改弹出框距离 |
|||
.el-dialog__body { |
|||
padding-top: 0px !important; |
|||
} |
|||
|
|||
//表格标题样式 |
|||
.el-table { |
|||
.el-table__header-wrapper, |
|||
.el-table__fixed-header-wrapper { |
|||
th { |
|||
word-break: break-word; |
|||
background-color: #f5f5f5; |
|||
color: #515a6e; |
|||
height: 35px; |
|||
font-size: 13px; |
|||
} |
|||
|
|||
td { |
|||
color: #f8f8f9; |
|||
} |
|||
} |
|||
|
|||
.el-table__body-wrapper { |
|||
.el-button [class*="el-icon-"] + span { |
|||
margin-left: 1px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
//表格固定列最后一行显示不全(https://mp.weixin.qq.com/s/HpoykJNtsynsW4UMHitZbQ) |
|||
.el-table__fixed-right { |
|||
height: 100% !important; |
|||
} |
|||
|
|||
//表头与内容错位 |
|||
.el-table--scrollable-y .el-table__body-wrapper { |
|||
overflow-y: overlay !important; |
|||
} |
|||
//左侧边框不显示start https://blog.csdn.net/m0_37922443/article/details/126487240 |
|||
.el-table__row td:not(.is-hidden):last-child { |
|||
right: -1px; |
|||
} |
|||
|
|||
thead th:not(.is-hidden):last-child { |
|||
right: -1px; |
|||
} |
|||
//左侧边框不显示end |
|||
|
|||
|
|||
@ -1,122 +1,122 @@ |
|||
// cover some element-ui styles |
|||
|
|||
.el-breadcrumb__inner, |
|||
.el-breadcrumb__inner a { |
|||
font-weight: 400 !important; |
|||
} |
|||
|
|||
.el-upload { |
|||
input[type="file"] { |
|||
display: none !important; |
|||
} |
|||
} |
|||
|
|||
.el-upload__input { |
|||
display: none; |
|||
} |
|||
|
|||
.cell { |
|||
.el-tag { |
|||
margin-right: 0px; |
|||
} |
|||
} |
|||
|
|||
.small-padding { |
|||
.cell { |
|||
padding-left: 5px; |
|||
padding-right: 5px; |
|||
} |
|||
} |
|||
|
|||
.fixed-width { |
|||
.el-button--mini { |
|||
padding: 7px 10px; |
|||
width: 60px; |
|||
} |
|||
} |
|||
|
|||
.status-col { |
|||
.cell { |
|||
padding: 0 10px; |
|||
text-align: center; |
|||
|
|||
.el-tag { |
|||
margin-right: 0px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// to fixed https://github.com/ElemeFE/element/issues/2461 |
|||
.el-dialog { |
|||
transform: none; |
|||
left: 0; |
|||
position: relative; |
|||
margin: 0 auto; |
|||
} |
|||
|
|||
// refine element ui upload |
|||
.upload-container { |
|||
.el-upload { |
|||
width: 100%; |
|||
|
|||
.el-upload-dragger { |
|||
width: 100%; |
|||
height: 200px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// dropdown |
|||
.el-dropdown-menu { |
|||
a { |
|||
display: block; |
|||
} |
|||
} |
|||
|
|||
// fix date-picker ui bug in filter-item |
|||
.el-range-editor.el-input__inner { |
|||
display: inline-flex !important; |
|||
} |
|||
|
|||
// to fix el-date-picker css style |
|||
.el-range-separator { |
|||
box-sizing: content-box; |
|||
} |
|||
|
|||
.el-menu--collapse |
|||
> div |
|||
> .el-submenu |
|||
> .el-submenu__title |
|||
.el-submenu__icon-arrow { |
|||
display: none; |
|||
} |
|||
|
|||
.el-form-search { |
|||
float: right; |
|||
.el-form-search-item { |
|||
margin-bottom: 0px; |
|||
.el-input__inner { |
|||
width: 140px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
el-table .el-table__cell { |
|||
padding: 8px 0; |
|||
} |
|||
|
|||
.el-table--medium .el-table__cell { |
|||
padding: 6px 0; |
|||
} |
|||
|
|||
.el-table--small .el-table__cell { |
|||
padding: 3px 0; |
|||
} |
|||
|
|||
.el-table--mini .el-table__cell { |
|||
padding: 1px 0; |
|||
} |
|||
|
|||
.el-dialog__body { |
|||
padding: 20px 20px; |
|||
} |
|||
// cover some element-ui styles |
|||
|
|||
.el-breadcrumb__inner, |
|||
.el-breadcrumb__inner a { |
|||
font-weight: 400 !important; |
|||
} |
|||
|
|||
.el-upload { |
|||
input[type="file"] { |
|||
display: none !important; |
|||
} |
|||
} |
|||
|
|||
.el-upload__input { |
|||
display: none; |
|||
} |
|||
|
|||
.cell { |
|||
.el-tag { |
|||
margin-right: 0px; |
|||
} |
|||
} |
|||
|
|||
.small-padding { |
|||
.cell { |
|||
padding-left: 5px; |
|||
padding-right: 5px; |
|||
} |
|||
} |
|||
|
|||
.fixed-width { |
|||
.el-button--mini { |
|||
padding: 7px 10px; |
|||
width: 60px; |
|||
} |
|||
} |
|||
|
|||
.status-col { |
|||
.cell { |
|||
padding: 0 10px; |
|||
text-align: center; |
|||
|
|||
.el-tag { |
|||
margin-right: 0px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// to fixed https://github.com/ElemeFE/element/issues/2461 |
|||
.el-dialog { |
|||
transform: none; |
|||
left: 0; |
|||
position: relative; |
|||
margin: 0 auto; |
|||
} |
|||
|
|||
// refine element ui upload |
|||
.upload-container { |
|||
.el-upload { |
|||
width: 100%; |
|||
|
|||
.el-upload-dragger { |
|||
width: 100%; |
|||
height: 200px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// dropdown |
|||
.el-dropdown-menu { |
|||
a { |
|||
display: block; |
|||
} |
|||
} |
|||
|
|||
// fix date-picker ui bug in filter-item |
|||
.el-range-editor.el-input__inner { |
|||
display: inline-flex !important; |
|||
} |
|||
|
|||
// to fix el-date-picker css style |
|||
.el-range-separator { |
|||
box-sizing: content-box; |
|||
} |
|||
|
|||
.el-menu--collapse |
|||
> div |
|||
> .el-submenu |
|||
> .el-submenu__title |
|||
.el-submenu__icon-arrow { |
|||
display: none; |
|||
} |
|||
|
|||
.el-form-search { |
|||
float: right; |
|||
.el-form-search-item { |
|||
margin-bottom: 0px; |
|||
.el-input__inner { |
|||
width: 140px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
el-table .el-table__cell { |
|||
padding: 8px 0; |
|||
} |
|||
|
|||
.el-table--medium .el-table__cell { |
|||
padding: 6px 0; |
|||
} |
|||
|
|||
.el-table--small .el-table__cell { |
|||
padding: 3px 0; |
|||
} |
|||
|
|||
.el-table--mini .el-table__cell { |
|||
padding: 1px 0; |
|||
} |
|||
|
|||
.el-dialog__body { |
|||
padding: 20px 20px; |
|||
} |
|||
|
|||
@ -1,31 +1,31 @@ |
|||
/** |
|||
* I think element-ui's default theme color is too light for long-term use. |
|||
* So I modified the default color and you can modify it to your liking. |
|||
**/ |
|||
|
|||
/* theme color */ |
|||
$--color-primary: #1890ff; |
|||
$--color-success: #13ce66; |
|||
$--color-warning: #FFBA00; |
|||
$--color-danger: #ff4949; |
|||
// $--color-info: #1E1E1E; |
|||
|
|||
$--button-font-weight: 400; |
|||
|
|||
// $--color-text-regular: #1f2d3d; |
|||
|
|||
$--border-color-light: #dfe4ed; |
|||
$--border-color-lighter: #e6ebf5; |
|||
|
|||
$--table-border:1px solid#dfe6ec; |
|||
|
|||
/* icon font path, required */ |
|||
$--font-path: '~element-ui/lib/theme-chalk/fonts'; |
|||
|
|||
@import "../../../node_modules/element-ui/packages/theme-chalk/src/index"; |
|||
|
|||
// the :export directive is the magic sauce for webpack |
|||
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass |
|||
:export { |
|||
theme: $--color-primary; |
|||
} |
|||
/** |
|||
* I think element-ui's default theme color is too light for long-term use. |
|||
* So I modified the default color and you can modify it to your liking. |
|||
**/ |
|||
|
|||
/* theme color */ |
|||
$--color-primary: #1890ff; |
|||
$--color-success: #13ce66; |
|||
$--color-warning: #FFBA00; |
|||
$--color-danger: #ff4949; |
|||
// $--color-info: #1E1E1E; |
|||
|
|||
$--button-font-weight: 400; |
|||
|
|||
// $--color-text-regular: #1f2d3d; |
|||
|
|||
$--border-color-light: #dfe4ed; |
|||
$--border-color-lighter: #e6ebf5; |
|||
|
|||
$--table-border:1px solid#dfe6ec; |
|||
|
|||
/* icon font path, required */ |
|||
$--font-path: '~element-ui/lib/theme-chalk/fonts'; |
|||
|
|||
@import "../../../node_modules/element-ui/packages/theme-chalk/src/index"; |
|||
|
|||
// the :export directive is the magic sauce for webpack |
|||
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass |
|||
:export { |
|||
theme: $--color-primary; |
|||
} |
|||
|
|||
@ -1,183 +1,183 @@ |
|||
@import 'variables'; |
|||
@import 'mixin'; |
|||
@import 'transition'; |
|||
@import 'element-ui'; |
|||
@import 'sidebar'; |
|||
@import 'btn'; |
|||
@import 'eladmin'; |
|||
|
|||
body { |
|||
height: 100%; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
-webkit-font-smoothing: antialiased; |
|||
text-rendering: optimizeLegibility; |
|||
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif; |
|||
} |
|||
|
|||
label { |
|||
font-weight: 700; |
|||
} |
|||
|
|||
html { |
|||
height: 100%; |
|||
box-sizing: border-box; |
|||
background-color: #eeeeee; |
|||
} |
|||
|
|||
#app { |
|||
height: 100%; |
|||
} |
|||
|
|||
*, |
|||
*:before, |
|||
*:after { |
|||
box-sizing: inherit; |
|||
} |
|||
|
|||
.no-padding { |
|||
padding: 0 !important; |
|||
} |
|||
|
|||
.padding-content { |
|||
padding: 4px 0; |
|||
} |
|||
|
|||
a:focus, |
|||
a:active { |
|||
outline: none; |
|||
} |
|||
|
|||
a, |
|||
a:focus, |
|||
a:hover { |
|||
cursor: pointer; |
|||
color: inherit; |
|||
text-decoration: none; |
|||
} |
|||
|
|||
div:focus { |
|||
outline: none; |
|||
} |
|||
|
|||
.fr { |
|||
float: right; |
|||
} |
|||
|
|||
.fl { |
|||
float: left; |
|||
} |
|||
|
|||
.pr-5 { |
|||
padding-right: 5px; |
|||
} |
|||
|
|||
.pl-5 { |
|||
padding-left: 5px; |
|||
} |
|||
|
|||
.block { |
|||
display: block; |
|||
} |
|||
|
|||
.pointer { |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.inlineBlock { |
|||
display: block; |
|||
} |
|||
|
|||
.clearfix { |
|||
&:after { |
|||
visibility: hidden; |
|||
display: block; |
|||
font-size: 0; |
|||
content: " "; |
|||
clear: both; |
|||
height: 0; |
|||
} |
|||
} |
|||
|
|||
aside { |
|||
background: #d40c70; |
|||
padding: 8px 24px; |
|||
margin-bottom: 20px; |
|||
border-radius: 2px; |
|||
display: block; |
|||
line-height: 32px; |
|||
font-size: 16px; |
|||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; |
|||
color: #2c3e50; |
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
|
|||
a { |
|||
color: #337ab7; |
|||
cursor: pointer; |
|||
|
|||
&:hover { |
|||
color: rgb(32, 160, 255); |
|||
} |
|||
} |
|||
} |
|||
|
|||
//main-container全局样式 |
|||
.app-container { |
|||
padding: 10px 20px 45px 10px; |
|||
} |
|||
|
|||
.components-container { |
|||
margin: 30px 50px; |
|||
position: relative; |
|||
} |
|||
|
|||
.pagination-container { |
|||
margin-top: 30px; |
|||
} |
|||
|
|||
.text-center { |
|||
text-align: center |
|||
} |
|||
|
|||
.sub-navbar { |
|||
height: 50px; |
|||
line-height: 50px; |
|||
position: relative; |
|||
width: 100%; |
|||
text-align: right; |
|||
padding-right: 20px; |
|||
transition: 600ms ease position; |
|||
background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%); |
|||
|
|||
.subtitle { |
|||
font-size: 20px; |
|||
color: #fff; |
|||
} |
|||
|
|||
&.draft { |
|||
background: #d0d0d0; |
|||
} |
|||
|
|||
&.deleted { |
|||
background: #d0d0d0; |
|||
} |
|||
} |
|||
|
|||
.link-type, |
|||
.link-type:focus { |
|||
color: #337ab7; |
|||
cursor: pointer; |
|||
|
|||
&:hover { |
|||
color: rgb(32, 160, 255); |
|||
} |
|||
} |
|||
|
|||
//refine vue-multiselect plugin |
|||
.multiselect { |
|||
line-height: 16px; |
|||
} |
|||
|
|||
.multiselect--active { |
|||
z-index: 1000 !important; |
|||
} |
|||
@import 'variables'; |
|||
@import 'mixin'; |
|||
@import 'transition'; |
|||
@import 'element-ui'; |
|||
@import 'sidebar'; |
|||
@import 'btn'; |
|||
@import 'eladmin'; |
|||
|
|||
body { |
|||
height: 100%; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
-webkit-font-smoothing: antialiased; |
|||
text-rendering: optimizeLegibility; |
|||
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif; |
|||
} |
|||
|
|||
label { |
|||
font-weight: 700; |
|||
} |
|||
|
|||
html { |
|||
height: 100%; |
|||
box-sizing: border-box; |
|||
//background-color: #eeeeee; |
|||
} |
|||
|
|||
#app { |
|||
height: 100%; |
|||
} |
|||
|
|||
*, |
|||
*:before, |
|||
*:after { |
|||
box-sizing: inherit; |
|||
} |
|||
|
|||
.no-padding { |
|||
padding: 0 !important; |
|||
} |
|||
|
|||
.padding-content { |
|||
padding: 4px 0; |
|||
} |
|||
|
|||
a:focus, |
|||
a:active { |
|||
outline: none; |
|||
} |
|||
|
|||
a, |
|||
a:focus, |
|||
a:hover { |
|||
cursor: pointer; |
|||
color: inherit; |
|||
text-decoration: none; |
|||
} |
|||
|
|||
div:focus { |
|||
outline: none; |
|||
} |
|||
|
|||
.fr { |
|||
float: right; |
|||
} |
|||
|
|||
.fl { |
|||
float: left; |
|||
} |
|||
|
|||
.pr-5 { |
|||
padding-right: 5px; |
|||
} |
|||
|
|||
.pl-5 { |
|||
padding-left: 5px; |
|||
} |
|||
|
|||
.block { |
|||
display: block; |
|||
} |
|||
|
|||
.pointer { |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.inlineBlock { |
|||
display: block; |
|||
} |
|||
|
|||
.clearfix { |
|||
&:after { |
|||
visibility: hidden; |
|||
display: block; |
|||
font-size: 0; |
|||
content: " "; |
|||
clear: both; |
|||
height: 0; |
|||
} |
|||
} |
|||
|
|||
aside { |
|||
background: #d40c70; |
|||
padding: 8px 24px; |
|||
margin-bottom: 20px; |
|||
border-radius: 2px; |
|||
display: block; |
|||
line-height: 32px; |
|||
font-size: 16px; |
|||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; |
|||
color: #2c3e50; |
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
|
|||
a { |
|||
color: #337ab7; |
|||
cursor: pointer; |
|||
|
|||
&:hover { |
|||
color: rgb(32, 160, 255); |
|||
} |
|||
} |
|||
} |
|||
|
|||
//main-container全局样式 |
|||
.app-container { |
|||
padding: 10px 20px 45px 10px; |
|||
} |
|||
|
|||
.components-container { |
|||
margin: 30px 50px; |
|||
position: relative; |
|||
} |
|||
|
|||
.pagination-container { |
|||
margin-top: 30px; |
|||
} |
|||
|
|||
.text-center { |
|||
text-align: center |
|||
} |
|||
|
|||
.sub-navbar { |
|||
height: 50px; |
|||
line-height: 50px; |
|||
position: relative; |
|||
width: 100%; |
|||
text-align: right; |
|||
padding-right: 20px; |
|||
transition: 600ms ease position; |
|||
background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%); |
|||
|
|||
.subtitle { |
|||
font-size: 20px; |
|||
color: #fff; |
|||
} |
|||
|
|||
&.draft { |
|||
background: #d0d0d0; |
|||
} |
|||
|
|||
&.deleted { |
|||
background: #d0d0d0; |
|||
} |
|||
} |
|||
|
|||
.link-type, |
|||
.link-type:focus { |
|||
color: #337ab7; |
|||
cursor: pointer; |
|||
|
|||
&:hover { |
|||
color: rgb(32, 160, 255); |
|||
} |
|||
} |
|||
|
|||
//refine vue-multiselect plugin |
|||
.multiselect { |
|||
line-height: 16px; |
|||
} |
|||
|
|||
.multiselect--active { |
|||
z-index: 1000 !important; |
|||
} |
|||
|
|||
@ -1,66 +1,66 @@ |
|||
@mixin clearfix { |
|||
&:after { |
|||
content: ""; |
|||
display: table; |
|||
clear: both; |
|||
} |
|||
} |
|||
|
|||
@mixin scrollBar { |
|||
&::-webkit-scrollbar-track-piece { |
|||
background: #d3dce6; |
|||
} |
|||
|
|||
&::-webkit-scrollbar { |
|||
width: 6px; |
|||
} |
|||
|
|||
&::-webkit-scrollbar-thumb { |
|||
background: #99a9bf; |
|||
border-radius: 20px; |
|||
} |
|||
} |
|||
|
|||
@mixin relative { |
|||
position: relative; |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
@mixin pct($pct) { |
|||
width: #{$pct}; |
|||
position: relative; |
|||
margin: 0 auto; |
|||
} |
|||
|
|||
@mixin triangle($width, $height, $color, $direction) { |
|||
$width: $width/2; |
|||
$color-border-style: $height solid $color; |
|||
$transparent-border-style: $width solid transparent; |
|||
height: 0; |
|||
width: 0; |
|||
|
|||
@if $direction==up { |
|||
border-bottom: $color-border-style; |
|||
border-left: $transparent-border-style; |
|||
border-right: $transparent-border-style; |
|||
} |
|||
|
|||
@else if $direction==right { |
|||
border-left: $color-border-style; |
|||
border-top: $transparent-border-style; |
|||
border-bottom: $transparent-border-style; |
|||
} |
|||
|
|||
@else if $direction==down { |
|||
border-top: $color-border-style; |
|||
border-left: $transparent-border-style; |
|||
border-right: $transparent-border-style; |
|||
} |
|||
|
|||
@else if $direction==left { |
|||
border-right: $color-border-style; |
|||
border-top: $transparent-border-style; |
|||
border-bottom: $transparent-border-style; |
|||
} |
|||
} |
|||
@mixin clearfix { |
|||
&:after { |
|||
content: ""; |
|||
display: table; |
|||
clear: both; |
|||
} |
|||
} |
|||
|
|||
@mixin scrollBar { |
|||
&::-webkit-scrollbar-track-piece { |
|||
background: #d3dce6; |
|||
} |
|||
|
|||
&::-webkit-scrollbar { |
|||
width: 6px; |
|||
} |
|||
|
|||
&::-webkit-scrollbar-thumb { |
|||
background: #99a9bf; |
|||
border-radius: 20px; |
|||
} |
|||
} |
|||
|
|||
@mixin relative { |
|||
position: relative; |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
@mixin pct($pct) { |
|||
width: #{$pct}; |
|||
position: relative; |
|||
margin: 0 auto; |
|||
} |
|||
|
|||
@mixin triangle($width, $height, $color, $direction) { |
|||
$width: $width/2; |
|||
$color-border-style: $height solid $color; |
|||
$transparent-border-style: $width solid transparent; |
|||
height: 0; |
|||
width: 0; |
|||
|
|||
@if $direction==up { |
|||
border-bottom: $color-border-style; |
|||
border-left: $transparent-border-style; |
|||
border-right: $transparent-border-style; |
|||
} |
|||
|
|||
@else if $direction==right { |
|||
border-left: $color-border-style; |
|||
border-top: $transparent-border-style; |
|||
border-bottom: $transparent-border-style; |
|||
} |
|||
|
|||
@else if $direction==down { |
|||
border-top: $color-border-style; |
|||
border-left: $transparent-border-style; |
|||
border-right: $transparent-border-style; |
|||
} |
|||
|
|||
@else if $direction==left { |
|||
border-right: $color-border-style; |
|||
border-top: $transparent-border-style; |
|||
border-bottom: $transparent-border-style; |
|||
} |
|||
} |
|||
|
|||
@ -1,209 +1,209 @@ |
|||
#app { |
|||
|
|||
.main-container { |
|||
min-height: 100%; |
|||
transition: margin-left .28s; |
|||
margin-left: $sideBarWidth; |
|||
position: relative; |
|||
} |
|||
|
|||
.sidebar-container { |
|||
transition: width 0.28s; |
|||
width: $sideBarWidth !important; |
|||
background-color: $menuBg; |
|||
height: 100%; |
|||
position: fixed; |
|||
font-size: 0; |
|||
top: 0; |
|||
bottom: 0; |
|||
left: 0; |
|||
z-index: 1001; |
|||
overflow: hidden; |
|||
|
|||
// reset element-ui css |
|||
.horizontal-collapse-transition { |
|||
transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out; |
|||
} |
|||
|
|||
.scrollbar-wrapper { |
|||
overflow-x: hidden !important; |
|||
} |
|||
|
|||
.el-scrollbar__bar.is-vertical { |
|||
right: 0; |
|||
} |
|||
|
|||
.el-scrollbar { |
|||
height: 100%; |
|||
} |
|||
|
|||
&.has-logo { |
|||
.el-scrollbar { |
|||
height: calc(100% - 50px); |
|||
} |
|||
} |
|||
|
|||
.is-horizontal { |
|||
display: none; |
|||
} |
|||
|
|||
a { |
|||
display: inline-block; |
|||
width: 100%; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.svg-icon { |
|||
margin-right: 16px; |
|||
} |
|||
|
|||
.el-menu { |
|||
border: none; |
|||
height: 100%; |
|||
width: 100% !important; |
|||
} |
|||
|
|||
// menu hover |
|||
.submenu-title-noDropdown, |
|||
.el-submenu__title { |
|||
&:hover { |
|||
background-color: $menuHover !important; |
|||
} |
|||
} |
|||
|
|||
.is-active>.el-submenu__title { |
|||
color: $subMenuActiveText !important; |
|||
} |
|||
|
|||
& .nest-menu .el-submenu>.el-submenu__title, |
|||
& .el-submenu .el-menu-item { |
|||
min-width: $sideBarWidth !important; |
|||
background-color: $subMenuBg !important; |
|||
|
|||
&:hover { |
|||
background-color: $subMenuHover !important; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.hideSidebar { |
|||
.sidebar-container { |
|||
width: 54px !important; |
|||
} |
|||
|
|||
.main-container { |
|||
margin-left: 54px; |
|||
} |
|||
|
|||
.submenu-title-noDropdown { |
|||
padding: 0 !important; |
|||
position: relative; |
|||
|
|||
.el-tooltip { |
|||
padding: 0 !important; |
|||
|
|||
.svg-icon { |
|||
margin-left: 20px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.el-submenu { |
|||
overflow: hidden; |
|||
|
|||
&>.el-submenu__title { |
|||
padding: 0 !important; |
|||
|
|||
.svg-icon { |
|||
margin-left: 20px; |
|||
} |
|||
|
|||
.el-submenu__icon-arrow { |
|||
display: none; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.el-menu--collapse { |
|||
.el-submenu { |
|||
&>.el-submenu__title { |
|||
&>span { |
|||
height: 0; |
|||
width: 0; |
|||
overflow: hidden; |
|||
visibility: hidden; |
|||
display: inline-block; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.el-menu--collapse .el-menu .el-submenu { |
|||
min-width: $sideBarWidth !important; |
|||
} |
|||
|
|||
// mobile responsive |
|||
.mobile { |
|||
.main-container { |
|||
margin-left: 0; |
|||
} |
|||
|
|||
.sidebar-container { |
|||
transition: transform .28s; |
|||
width: $sideBarWidth !important; |
|||
} |
|||
|
|||
&.hideSidebar { |
|||
.sidebar-container { |
|||
pointer-events: none; |
|||
transition-duration: 0.3s; |
|||
transform: translate3d(-$sideBarWidth, 0, 0); |
|||
} |
|||
} |
|||
} |
|||
|
|||
.withoutAnimation { |
|||
|
|||
.main-container, |
|||
.sidebar-container { |
|||
transition: none; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// when menu collapsed |
|||
.el-menu--vertical { |
|||
&>.el-menu { |
|||
.svg-icon { |
|||
margin-right: 16px; |
|||
} |
|||
} |
|||
|
|||
.nest-menu .el-submenu>.el-submenu__title, |
|||
.el-menu-item { |
|||
&:hover { |
|||
// you can use $subMenuHover |
|||
background-color: $menuHover !important; |
|||
} |
|||
} |
|||
|
|||
// the scroll bar appears when the subMenu is too long |
|||
>.el-menu--popup { |
|||
max-height: 100vh; |
|||
overflow-y: auto; |
|||
|
|||
&::-webkit-scrollbar-track-piece { |
|||
background: #d3dce6; |
|||
} |
|||
|
|||
&::-webkit-scrollbar { |
|||
width: 6px; |
|||
} |
|||
|
|||
&::-webkit-scrollbar-thumb { |
|||
background: #99a9bf; |
|||
border-radius: 20px; |
|||
} |
|||
} |
|||
} |
|||
#app { |
|||
|
|||
.main-container { |
|||
min-height: 100%; |
|||
transition: margin-left .28s; |
|||
margin-left: $sideBarWidth; |
|||
position: relative; |
|||
} |
|||
|
|||
.sidebar-container { |
|||
transition: width 0.28s; |
|||
width: $sideBarWidth !important; |
|||
background-color: $menuBg; |
|||
height: 100%; |
|||
position: fixed; |
|||
font-size: 0; |
|||
top: 0; |
|||
bottom: 0; |
|||
left: 0; |
|||
z-index: 1001; |
|||
overflow: hidden; |
|||
|
|||
// reset element-ui css |
|||
.horizontal-collapse-transition { |
|||
transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out; |
|||
} |
|||
|
|||
.scrollbar-wrapper { |
|||
overflow-x: hidden !important; |
|||
} |
|||
|
|||
.el-scrollbar__bar.is-vertical { |
|||
right: 0; |
|||
} |
|||
|
|||
.el-scrollbar { |
|||
height: 100%; |
|||
} |
|||
|
|||
&.has-logo { |
|||
.el-scrollbar { |
|||
height: calc(100% - 50px); |
|||
} |
|||
} |
|||
|
|||
.is-horizontal { |
|||
display: none; |
|||
} |
|||
|
|||
a { |
|||
display: inline-block; |
|||
width: 100%; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.svg-icon { |
|||
margin-right: 16px; |
|||
} |
|||
|
|||
.el-menu { |
|||
border: none; |
|||
height: 100%; |
|||
width: 100% !important; |
|||
} |
|||
|
|||
// menu hover |
|||
.submenu-title-noDropdown, |
|||
.el-submenu__title { |
|||
&:hover { |
|||
background-color: $menuHover !important; |
|||
} |
|||
} |
|||
|
|||
.is-active>.el-submenu__title { |
|||
color: $subMenuActiveText !important; |
|||
} |
|||
|
|||
& .nest-menu .el-submenu>.el-submenu__title, |
|||
& .el-submenu .el-menu-item { |
|||
min-width: $sideBarWidth !important; |
|||
background-color: $subMenuBg !important; |
|||
|
|||
&:hover { |
|||
background-color: $subMenuHover !important; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.hideSidebar { |
|||
.sidebar-container { |
|||
width: 54px !important; |
|||
} |
|||
|
|||
.main-container { |
|||
margin-left: 54px; |
|||
} |
|||
|
|||
.submenu-title-noDropdown { |
|||
padding: 0 !important; |
|||
position: relative; |
|||
|
|||
.el-tooltip { |
|||
padding: 0 !important; |
|||
|
|||
.svg-icon { |
|||
margin-left: 20px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.el-submenu { |
|||
overflow: hidden; |
|||
|
|||
&>.el-submenu__title { |
|||
padding: 0 !important; |
|||
|
|||
.svg-icon { |
|||
margin-left: 20px; |
|||
} |
|||
|
|||
.el-submenu__icon-arrow { |
|||
display: none; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.el-menu--collapse { |
|||
.el-submenu { |
|||
&>.el-submenu__title { |
|||
&>span { |
|||
height: 0; |
|||
width: 0; |
|||
overflow: hidden; |
|||
visibility: hidden; |
|||
display: inline-block; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.el-menu--collapse .el-menu .el-submenu { |
|||
min-width: $sideBarWidth !important; |
|||
} |
|||
|
|||
// mobile responsive |
|||
.mobile { |
|||
.main-container { |
|||
margin-left: 0; |
|||
} |
|||
|
|||
.sidebar-container { |
|||
transition: transform .28s; |
|||
width: $sideBarWidth !important; |
|||
} |
|||
|
|||
&.hideSidebar { |
|||
.sidebar-container { |
|||
pointer-events: none; |
|||
transition-duration: 0.3s; |
|||
transform: translate3d(-$sideBarWidth, 0, 0); |
|||
} |
|||
} |
|||
} |
|||
|
|||
.withoutAnimation { |
|||
|
|||
.main-container, |
|||
.sidebar-container { |
|||
transition: none; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// when menu collapsed |
|||
.el-menu--vertical { |
|||
&>.el-menu { |
|||
.svg-icon { |
|||
margin-right: 16px; |
|||
} |
|||
} |
|||
|
|||
.nest-menu .el-submenu>.el-submenu__title, |
|||
.el-menu-item { |
|||
&:hover { |
|||
// you can use $subMenuHover |
|||
background-color: $menuHover !important; |
|||
} |
|||
} |
|||
|
|||
// the scroll bar appears when the subMenu is too long |
|||
>.el-menu--popup { |
|||
max-height: 100vh; |
|||
overflow-y: auto; |
|||
|
|||
&::-webkit-scrollbar-track-piece { |
|||
background: #d3dce6; |
|||
} |
|||
|
|||
&::-webkit-scrollbar { |
|||
width: 6px; |
|||
} |
|||
|
|||
&::-webkit-scrollbar-thumb { |
|||
background: #99a9bf; |
|||
border-radius: 20px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
@ -1,48 +1,48 @@ |
|||
// global transition css |
|||
|
|||
/* fade */ |
|||
.fade-enter-active, |
|||
.fade-leave-active { |
|||
transition: opacity 0.28s; |
|||
} |
|||
|
|||
.fade-enter, |
|||
.fade-leave-active { |
|||
opacity: 0; |
|||
} |
|||
|
|||
/* fade-transform */ |
|||
.fade-transform-leave-active, |
|||
.fade-transform-enter-active { |
|||
transition: all .5s; |
|||
} |
|||
|
|||
.fade-transform-enter { |
|||
opacity: 0; |
|||
transform: translateX(-30px); |
|||
} |
|||
|
|||
.fade-transform-leave-to { |
|||
opacity: 0; |
|||
transform: translateX(30px); |
|||
} |
|||
|
|||
/* breadcrumb transition */ |
|||
.breadcrumb-enter-active, |
|||
.breadcrumb-leave-active { |
|||
transition: all .5s; |
|||
} |
|||
|
|||
.breadcrumb-enter, |
|||
.breadcrumb-leave-active { |
|||
opacity: 0; |
|||
transform: translateX(20px); |
|||
} |
|||
|
|||
.breadcrumb-move { |
|||
transition: all .5s; |
|||
} |
|||
|
|||
.breadcrumb-leave-active { |
|||
position: absolute; |
|||
} |
|||
// global transition css |
|||
|
|||
/* fade */ |
|||
.fade-enter-active, |
|||
.fade-leave-active { |
|||
transition: opacity 0.28s; |
|||
} |
|||
|
|||
.fade-enter, |
|||
.fade-leave-active { |
|||
opacity: 0; |
|||
} |
|||
|
|||
/* fade-transform */ |
|||
.fade-transform-leave-active, |
|||
.fade-transform-enter-active { |
|||
transition: all .5s; |
|||
} |
|||
|
|||
.fade-transform-enter { |
|||
opacity: 0; |
|||
transform: translateX(-30px); |
|||
} |
|||
|
|||
.fade-transform-leave-to { |
|||
opacity: 0; |
|||
transform: translateX(30px); |
|||
} |
|||
|
|||
/* breadcrumb transition */ |
|||
.breadcrumb-enter-active, |
|||
.breadcrumb-leave-active { |
|||
transition: all .5s; |
|||
} |
|||
|
|||
.breadcrumb-enter, |
|||
.breadcrumb-leave-active { |
|||
opacity: 0; |
|||
transform: translateX(20px); |
|||
} |
|||
|
|||
.breadcrumb-move { |
|||
transition: all .5s; |
|||
} |
|||
|
|||
.breadcrumb-leave-active { |
|||
position: absolute; |
|||
} |
|||
|
|||
@ -1,48 +1,48 @@ |
|||
// base color |
|||
$blue:#324157; |
|||
$light-blue:#3A71A8; |
|||
$red:#C03639; |
|||
$pink: #E65D6E; |
|||
$green: #30B08F; |
|||
$tiffany: #4AB7BD; |
|||
$yellow:#FEC171; |
|||
$panGreen: #30B08F; |
|||
|
|||
$base-logo-title-color: #ffffff; |
|||
$base-logo-light-title-color: #001529; |
|||
$base-menu-light-background:#ffffff; |
|||
|
|||
// sidebar |
|||
$menuText: #ffffff; |
|||
$menuActiveText:#409EFF; |
|||
$subMenuActiveText: #ffffff; // https://github.com/ElemeFE/element/issues/12951 |
|||
|
|||
$menuBg: #001529; //https://cloud.tencent.com/developer/article/1753773 |
|||
$menuHover:#4e5465; |
|||
|
|||
$base-menu-light-color:rgba(0,0,0,.70); |
|||
|
|||
$subMenuBg:#000c17; |
|||
$subMenuHover:#4e5465; |
|||
|
|||
$sideBarWidth: 205px; |
|||
|
|||
// the :export directive is the magic sauce for webpack |
|||
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass |
|||
:export { |
|||
menuText: $menuText; |
|||
menuActiveText: $menuActiveText; |
|||
subMenuActiveText: $subMenuActiveText; |
|||
menuBg: $menuBg; |
|||
menuLightBackground: $base-menu-light-background; |
|||
menuLightColor: $base-menu-light-color; |
|||
menuHover: $menuHover; |
|||
subMenuBg: $subMenuBg; |
|||
subMenuHover: $subMenuHover; |
|||
sideBarWidth: $sideBarWidth; |
|||
|
|||
logoTitleColor: $base-logo-title-color; |
|||
logoLightTitleColor: $base-logo-light-title-color |
|||
} |
|||
|
|||
$base-sidebar-width: 2010px; |
|||
// base color |
|||
$blue:#324157; |
|||
$light-blue:#3A71A8; |
|||
$red:#C03639; |
|||
$pink: #E65D6E; |
|||
$green: #30B08F; |
|||
$tiffany: #4AB7BD; |
|||
$yellow:#FEC171; |
|||
$panGreen: #30B08F; |
|||
|
|||
$base-logo-title-color: #ffffff; |
|||
$base-logo-light-title-color: #001529; |
|||
$base-menu-light-background:#ffffff; |
|||
|
|||
// sidebar |
|||
$menuText: #ffffff; |
|||
$menuActiveText:#409EFF; |
|||
$subMenuActiveText: #ffffff; // https://github.com/ElemeFE/element/issues/12951 |
|||
|
|||
$menuBg: #001529; //https://cloud.tencent.com/developer/article/1753773 |
|||
$menuHover:#4e5465; |
|||
|
|||
$base-menu-light-color:rgba(0,0,0,.70); |
|||
|
|||
$subMenuBg:#000c17; |
|||
$subMenuHover:#4e5465; |
|||
|
|||
$sideBarWidth: 205px; |
|||
|
|||
// the :export directive is the magic sauce for webpack |
|||
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass |
|||
:export { |
|||
menuText: $menuText; |
|||
menuActiveText: $menuActiveText; |
|||
subMenuActiveText: $subMenuActiveText; |
|||
menuBg: $menuBg; |
|||
menuLightBackground: $base-menu-light-background; |
|||
menuLightColor: $base-menu-light-color; |
|||
menuHover: $menuHover; |
|||
subMenuBg: $subMenuBg; |
|||
subMenuHover: $subMenuHover; |
|||
sideBarWidth: $sideBarWidth; |
|||
|
|||
logoTitleColor: $base-logo-title-color; |
|||
logoLightTitleColor: $base-logo-light-title-color |
|||
} |
|||
|
|||
$base-sidebar-width: 2010px; |
|||
|
|||
@ -0,0 +1,556 @@ |
|||
<template> |
|||
<!--标准版-输送机--> |
|||
<div> |
|||
<el-card class="box-card" shadow="never"> |
|||
<div slot="header" class="clearfix"> |
|||
<span class="role-span">设备协议：</span> |
|||
</div> |
|||
|
|||
<el-row> |
|||
<el-col :span="12"> |
|||
OpcServer: |
|||
<el-select |
|||
v-model="opc_id" |
|||
placeholder="无" |
|||
clearable |
|||
filterable |
|||
@change="changeOpc" |
|||
> |
|||
<el-option |
|||
v-for="item in dataOpcservers" |
|||
:key="item.opc_id" |
|||
:label="item.opc_name" |
|||
:value="item.opc_id" |
|||
/> |
|||
</el-select> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
PLC: |
|||
<el-select |
|||
v-model="plc_id" |
|||
placeholder="无" |
|||
clearable |
|||
@change="changePlc" |
|||
> |
|||
<el-option |
|||
v-for="item in dataOpcPlcs" |
|||
:key="item.plc_id" |
|||
:label="item.plc_name" |
|||
:value="item.plc_id" |
|||
/> |
|||
</el-select> |
|||
</el-col> |
|||
</el-row> |
|||
</el-card> |
|||
|
|||
<el-card class="box-card" shadow="never"> |
|||
<div slot="header" class="clearfix"> |
|||
<span class="role-span">指令相关：</span> |
|||
</div> |
|||
<el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="78px"> |
|||
<el-row> |
|||
<el-col :span="8"> |
|||
<el-form-item label="取货校验" label-width="150px"> |
|||
<el-switch v-model="form.ignore_pickup_check" /> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item label="放货校验" label-width="150px"> |
|||
<el-switch v-model="form.ignore_release_check" /> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
</el-form> |
|||
</el-card> |
|||
|
|||
<el-card class="box-card" shadow="never"> |
|||
<div slot="header" class="clearfix"> |
|||
<span class="role-span">输送系统：</span> |
|||
</div> |
|||
<el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="78px"> |
|||
<el-row> |
|||
<el-col :span="8"> |
|||
<el-form-item label="电气调度号" label-width="150px"> |
|||
<el-input v-model="form.address" /> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
</el-form> |
|||
</el-card> |
|||
|
|||
<el-card class="box-card" shadow="never"> |
|||
<div slot="header" class="clearfix"> |
|||
<span class="role-span">AGV相关：</span> |
|||
</div> |
|||
<el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="78px"> |
|||
<el-row> |
|||
<el-col :span="8"> |
|||
<el-form-item label="取货"> |
|||
<el-switch v-model="form.is_pickup" /> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item label="放货"> |
|||
<el-switch v-model="form.is_release" /> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
</el-form> |
|||
</el-card> |
|||
|
|||
<el-card class="box-card" shadow="never"> |
|||
<div slot="header" class="clearfix"> |
|||
<span class="role-span">PLC读取字段：</span> |
|||
</div> |
|||
<el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="78px"> |
|||
<el-table |
|||
v-loading="false" |
|||
:data="data1" |
|||
:max-height="550" |
|||
size="small" |
|||
style="width: 100%;margin-bottom: 15px" |
|||
> |
|||
|
|||
<el-table-column prop="name" label="用途" /> |
|||
<el-table-column prop="code" label="别名要求" /> |
|||
<el-table-column prop="db" label="DB块"> |
|||
<template slot-scope="scope"> |
|||
<el-input |
|||
v-model="data1[scope.$index].db" |
|||
size="mini" |
|||
class="edit-input" |
|||
@input="finishReadEdit(data1[scope.$index])" |
|||
/> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="dbr_value"> |
|||
<template slot="header"> |
|||
<el-link type="primary" :underline="false" @click.native="test_read1()">测试读</el-link> |
|||
</template> |
|||
<template slot-scope="scope"> |
|||
<el-input v-model="data1[scope.$index].dbr_value" size="mini" class="edit-input" /> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</el-form> |
|||
</el-card> |
|||
|
|||
<el-card class="box-card" shadow="never"> |
|||
<div slot="header" class="clearfix"> |
|||
<span class="role-span">PLC写入字段：</span> |
|||
</div> |
|||
<el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="78px"> |
|||
<el-table |
|||
v-loading="false" |
|||
:data="data2" |
|||
:max-height="550" |
|||
size="small" |
|||
style="width: 100%;margin-bottom: 15px" |
|||
> |
|||
|
|||
<el-table-column prop="name" label="用途" /> |
|||
<el-table-column prop="code" label="别名要求" /> |
|||
<el-table-column prop="db" label="DB块"> |
|||
<template slot-scope="scope"> |
|||
<el-input |
|||
v-model="data2[scope.$index].db" |
|||
size="mini" |
|||
class="edit-input" |
|||
@input="finishWriteEdit(data2[scope.$index])" |
|||
/> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="dbr_value2"> |
|||
<template slot="header"> |
|||
<el-link type="primary" :underline="false" @click.native="test_read2()">测试读</el-link> |
|||
</template> |
|||
<template slot-scope="scope"> |
|||
<el-input v-model="data2[scope.$index].dbr_value" size="mini" class="edit-input" /> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="dbw_value"> |
|||
<template slot="header"> |
|||
<el-link type="primary" :underline="false" @click.native="test_write1()">测试写</el-link> |
|||
</template> |
|||
<template slot-scope="scope"> |
|||
<el-input v-model="data2[scope.$index].dbw_value" size="mini" class="edit-input" /> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</el-form> |
|||
</el-card> |
|||
|
|||
<el-card class="box-card" shadow="never"> |
|||
<div slot="header" class="clearfix"> |
|||
<span class="role-span" /> |
|||
<el-button |
|||
:loading="false" |
|||
icon="el-icon-check" |
|||
size="mini" |
|||
style="float: right; padding: 6px 9px" |
|||
type="primary" |
|||
@click="doSubmit" |
|||
>保存 |
|||
</el-button> |
|||
</div> |
|||
</el-card> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { |
|||
queryDriverConfig, |
|||
updateConfig, |
|||
testRead, |
|||
testwrite |
|||
} from '@/api/acs/device/driverConfig' |
|||
import { selectOpcList } from '@/api/acs/device/opc' |
|||
import { selectPlcList } from '@/api/acs/device/opcPlc' |
|||
import { selectListByOpcID } from '@/api/acs/device/opcPlc' |
|||
|
|||
import crud from '@/mixins/crud' |
|||
import deviceCrud from '@/api/acs/device/device' |
|||
|
|||
export default { |
|||
name: 'BeltConveyor', |
|||
mixins: [crud], |
|||
props: { |
|||
parentForm: { |
|||
type: Object, |
|||
required: true |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
device_code: '', |
|||
device_id: '', |
|||
plc_id: '', |
|||
plc_code: '', |
|||
address: '', |
|||
opc_id: '', |
|||
opc_code: '', |
|||
configLoading: false, |
|||
dataOpcservers: [], |
|||
dataOpcPlcs: [], |
|||
deviceList: [], |
|||
data1: [], |
|||
data2: [], |
|||
form: { |
|||
inspect_in_stocck: true, |
|||
ignore_pickup_check: true, |
|||
ignore_release_check: true, |
|||
apply_task: true, |
|||
link_three_lamp: '', |
|||
manual_create_task: true, |
|||
is_pickup: true, |
|||
is_release: true, |
|||
link_device_code: [], |
|||
ship_device_update: true |
|||
}, |
|||
rules: {} |
|||
} |
|||
}, |
|||
created() { |
|||
this.$nextTick(() => { |
|||
// 从父表单获取设备编码 |
|||
this.device_id = this.$props.parentForm.device_id |
|||
this.device_code = this.$props.parentForm.device_code |
|||
queryDriverConfig( |
|||
this.device_id, |
|||
this.$props.parentForm.driver_code |
|||
).then((data) => { |
|||
// 给表单赋值，并且属性不能为空 |
|||
if (data.form) { |
|||
const arr = Object.keys(data.form) |
|||
// 不为空 |
|||
if (arr.length > 0) { |
|||
this.form = data.form |
|||
} |
|||
} |
|||
|
|||
// 给表单赋值，并且属性不能为空 |
|||
if (data.parentForm) { |
|||
const arr = Object.keys(data.parentForm) |
|||
// 不为空 |
|||
if (arr.length > 0) { |
|||
this.opc_code = data.parentForm.opc_code |
|||
this.plc_code = data.parentForm.plc_code |
|||
} |
|||
} |
|||
this.data1 = data.rs |
|||
this.data2 = data.ws |
|||
this.sliceItem() |
|||
}) |
|||
selectPlcList().then((data) => { |
|||
this.dataOpcPlcs = data |
|||
this.plc_id = this.$props.parentForm.opc_plc_id |
|||
}) |
|||
selectOpcList().then((data) => { |
|||
this.dataOpcservers = data |
|||
this.opc_id = this.$props.parentForm.opc_server_id |
|||
}) |
|||
deviceCrud.selectDeviceList().then((data) => { |
|||
this.deviceList = data |
|||
}) |
|||
}) |
|||
}, |
|||
methods: { |
|||
finishReadEdit(data) { |
|||
// 编辑的是code列,并且值包含mode |
|||
if (data.code.indexOf('mode') !== -1) { |
|||
const dbValue = data.db |
|||
// .之前的字符串 |
|||
const beforeStr = dbValue.match(/(\S*)\./)[1] |
|||
// .之后的字符串 |
|||
const afterStr = dbValue.match(/\.(\S*)/)[1] |
|||
// 取最后数字 |
|||
const endNumber = afterStr.substring(1) |
|||
// 最后为非数字 |
|||
if (isNaN(parseInt(endNumber))) { |
|||
return |
|||
} |
|||
for (const val in this.data1) { |
|||
if (this.data1[val].code.indexOf('mode') !== -1) { |
|||
this.data1[val].db = |
|||
beforeStr + |
|||
'.' + |
|||
afterStr.substring(0, 1) + |
|||
(parseInt(endNumber) + 0) |
|||
} |
|||
if (this.data1[val].code.indexOf('move') !== -1) { |
|||
this.data1[val].db = |
|||
beforeStr + |
|||
'.' + |
|||
afterStr.substring(0, 1) + |
|||
(parseInt(endNumber) + 1) |
|||
} |
|||
if (this.data1[val].code.indexOf('carrier_direction') !== -1) { |
|||
this.data1[val].db = |
|||
beforeStr + |
|||
'.' + |
|||
afterStr.substring(0, 1) + |
|||
(parseInt(endNumber) + 2) |
|||
} |
|||
if (this.data1[val].code.indexOf('error') !== -1) { |
|||
this.data1[val].db = |
|||
beforeStr + |
|||
'.' + |
|||
afterStr.substring(0, 1) + |
|||
(parseInt(endNumber) + 4) |
|||
} |
|||
if (this.data1[val].code.indexOf('task') !== -1) { |
|||
this.data1[val].db = |
|||
beforeStr + '.' + 'D' + (parseInt(endNumber) + 8) |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
finishWriteEdit(data) { |
|||
// 编辑的是code列,并且值包含mode |
|||
if (data.code.indexOf('to_command') !== -1) { |
|||
const dbValue = data.db |
|||
// .之前的字符串 |
|||
const beforeStr = dbValue.match(/(\S*)\./)[1] |
|||
// .之后的字符串 |
|||
const afterStr = dbValue.match(/\.(\S*)/)[1] |
|||
// 取最后数字 |
|||
const endNumber = afterStr.substring(1) |
|||
// 最后为非数字 |
|||
if (isNaN(parseInt(endNumber))) { |
|||
return |
|||
} |
|||
console.log(endNumber) |
|||
for (const val in this.data2) { |
|||
if (this.data2[val].code.indexOf('to_command') !== -1) { |
|||
this.data2[val].db = |
|||
beforeStr + |
|||
'.' + |
|||
afterStr.substring(0, 1) + |
|||
(parseInt(endNumber) + 0) |
|||
} |
|||
if (this.data2[val].code.indexOf('to_target') !== -1) { |
|||
this.data2[val].db = |
|||
beforeStr + |
|||
'.' + |
|||
afterStr.substring(0, 1) + |
|||
(parseInt(endNumber) + 2) |
|||
} |
|||
if (this.data2[val].code.indexOf('to_container_type') !== -1) { |
|||
this.data2[val].db = |
|||
beforeStr + |
|||
'.' + |
|||
afterStr.substring(0, 1) + |
|||
(parseInt(endNumber) + 4) |
|||
} |
|||
if (this.data2[val].code.indexOf('to_task') !== -1) { |
|||
this.data2[val].db = |
|||
beforeStr + '.' + 'D' + (parseInt(endNumber) + 6) |
|||
} |
|||
if (this.data2[val].code.indexOf('to_strap_times') !== -1) { |
|||
this.data2[val].db = |
|||
beforeStr + |
|||
'.' + |
|||
afterStr.substring(0, 1) + |
|||
(parseInt(endNumber) + 10) |
|||
} |
|||
if (this.data2[val].code.indexOf('to_length') !== -1) { |
|||
this.data2[val].db = |
|||
beforeStr + |
|||
'.' + |
|||
afterStr.substring(0, 1) + |
|||
(parseInt(endNumber) + 12) |
|||
} |
|||
if (this.data2[val].code.indexOf('to_weight') !== -1) { |
|||
this.data2[val].db = |
|||
beforeStr + |
|||
'.' + |
|||
afterStr.substring(0, 1) + |
|||
(parseInt(endNumber) + 14) |
|||
} |
|||
if (this.data2[val].code.indexOf('to_height') !== -1) { |
|||
this.data2[val].db = |
|||
beforeStr + |
|||
'.' + |
|||
afterStr.substring(0, 1) + |
|||
(parseInt(endNumber) + 16) |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
changeOpc(val) { |
|||
this.dataOpcservers.forEach((item) => { |
|||
if (item.opc_id === val) { |
|||
this.opc_code = item.opc_code |
|||
} |
|||
}) |
|||
|
|||
selectListByOpcID(val).then((data) => { |
|||
this.dataOpcPlcs = data |
|||
this.plc_id = '' |
|||
this.plc_code = '' |
|||
if (this.dataOpcPlcs && this.dataOpcPlcs.length > 0) { |
|||
this.plc_id = this.dataOpcPlcs[0].plc_id |
|||
this.plc_code = this.dataOpcPlcs[0].plc_code |
|||
} |
|||
this.sliceItem() |
|||
}) |
|||
}, |
|||
changePlc(val) { |
|||
this.dataOpcPlcs.forEach((item) => { |
|||
if (item.plc_id === val) { |
|||
this.plc_code = item.plc_code |
|||
this.sliceItem() |
|||
return |
|||
} |
|||
}) |
|||
}, |
|||
test_read1() { |
|||
testRead(this.data1, this.opc_id) |
|||
.then((data) => { |
|||
this.data1 = data |
|||
console.log(this.data1) |
|||
this.notify('操作成功!', 'success') |
|||
}) |
|||
.catch((err) => { |
|||
console.log(err.response.data.message) |
|||
}) |
|||
}, |
|||
test_write1() { |
|||
testwrite(this.data2, this.opc_id) |
|||
.then((data) => { |
|||
this.notify('操作成功!', 'success') |
|||
}) |
|||
.catch((err) => { |
|||
console.log(err.response.data.message) |
|||
}) |
|||
}, |
|||
test_read2() { |
|||
testRead(this.data2, this.opc_id) |
|||
.then((data) => { |
|||
this.data2 = data |
|||
console.log(this.data2) |
|||
this.notify('操作成功!', 'success') |
|||
}) |
|||
.catch((err) => { |
|||
console.log(err.response.data.message) |
|||
}) |
|||
}, |
|||
doSubmit() { |
|||
this.$refs['form'].validate((valid) => { |
|||
if (valid) { |
|||
this.configLoading = true |
|||
// 根据驱动类型判断是否为路由设备 |
|||
const parentForm = this.parentForm |
|||
parentForm.is_route = true |
|||
parentForm.plc_id = this.plc_id |
|||
parentForm.opc_id = this.opc_id |
|||
updateConfig(parentForm, this.form, this.data1, this.data2) |
|||
.then((res) => { |
|||
this.notify('保存成功', 'success') |
|||
this.configLoading = false |
|||
}) |
|||
.catch((err) => { |
|||
this.configLoading = false |
|||
console.log(err.response.data.message) |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
sliceItem() { |
|||
// 拼接DB的Item值 |
|||
this.data1.forEach((item) => { |
|||
const str = item.code |
|||
// 是否包含. |
|||
if (str.search('.') !== -1) { |
|||
// 截取最后一位 |
|||
item.code = |
|||
this.opc_code + |
|||
'.' + |
|||
this.plc_code + |
|||
'.' + |
|||
this.device_code + |
|||
'.' + |
|||
str.slice(str.lastIndexOf('.') + 1) |
|||
} else { |
|||
item.code = |
|||
this.opc_code + |
|||
'.' + |
|||
this.plc_code + |
|||
'.' + |
|||
this.device_code + |
|||
'.' + |
|||
item.code |
|||
} |
|||
}) |
|||
this.data2.forEach((item) => { |
|||
const str = item.code |
|||
// 是否包含. |
|||
if (str.search('.') !== -1) { |
|||
// 截取最后一位 |
|||
item.code = |
|||
this.opc_code + |
|||
'.' + |
|||
this.plc_code + |
|||
'.' + |
|||
this.device_code + |
|||
'.' + |
|||
str.slice(str.lastIndexOf('.') + 1) |
|||
} else { |
|||
item.code = |
|||
this.opc_code + |
|||
'.' + |
|||
this.plc_code + |
|||
'.' + |
|||
this.device_code + |
|||
'.' + |
|||
item.code |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
</style> |
|||
Loading…
Reference in new issue