rev：前端样式
This commit is contained in:
Binary file not shown.
|
Before Width: | Height: | Size: 66 KiB After Width: | Height: | Size: 622 B |
@@ -1,99 +1,99 @@
|
|||||||
@import 'variables';
|
@import 'variables';
|
||||||
|
|
||||||
@mixin colorBtn($color) {
|
@mixin colorBtn($color) {
|
||||||
background: $color;
|
background: $color;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: $color;
|
color: $color;
|
||||||
|
|
||||||
&:before,
|
&:before,
|
||||||
&:after {
|
&:after {
|
||||||
background: $color;
|
background: $color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.blue-btn {
|
.blue-btn {
|
||||||
@include colorBtn($blue)
|
@include colorBtn($blue)
|
||||||
}
|
}
|
||||||
|
|
||||||
.light-blue-btn {
|
.light-blue-btn {
|
||||||
@include colorBtn($light-blue)
|
@include colorBtn($light-blue)
|
||||||
}
|
}
|
||||||
|
|
||||||
.red-btn {
|
.red-btn {
|
||||||
@include colorBtn($red)
|
@include colorBtn($red)
|
||||||
}
|
}
|
||||||
|
|
||||||
.pink-btn {
|
.pink-btn {
|
||||||
@include colorBtn($pink)
|
@include colorBtn($pink)
|
||||||
}
|
}
|
||||||
|
|
||||||
.green-btn {
|
.green-btn {
|
||||||
@include colorBtn($green)
|
@include colorBtn($green)
|
||||||
}
|
}
|
||||||
|
|
||||||
.tiffany-btn {
|
.tiffany-btn {
|
||||||
@include colorBtn($tiffany)
|
@include colorBtn($tiffany)
|
||||||
}
|
}
|
||||||
|
|
||||||
.yellow-btn {
|
.yellow-btn {
|
||||||
@include colorBtn($yellow)
|
@include colorBtn($yellow)
|
||||||
}
|
}
|
||||||
|
|
||||||
.pan-btn {
|
.pan-btn {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
padding: 14px 36px;
|
padding: 14px 36px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
border: none;
|
border: none;
|
||||||
outline: none;
|
outline: none;
|
||||||
transition: 600ms ease all;
|
transition: 600ms ease all;
|
||||||
position: relative;
|
position: relative;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
|
|
||||||
&:before,
|
&:before,
|
||||||
&:after {
|
&:after {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
transition: 600ms ease all;
|
transition: 600ms ease all;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:before,
|
&:before,
|
||||||
&:after {
|
&:after {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
height: 2px;
|
height: 2px;
|
||||||
width: 0;
|
width: 0;
|
||||||
transition: 400ms ease all;
|
transition: 400ms ease all;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
right: inherit;
|
right: inherit;
|
||||||
top: inherit;
|
top: inherit;
|
||||||
left: 0;
|
left: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.custom-button {
|
.custom-button {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 10px 15px;
|
padding: 10px 15px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,230 +1,230 @@
|
|||||||
.head-container {
|
.head-container {
|
||||||
padding-top: 4px;
|
padding-top: 4px;
|
||||||
padding-bottom: 6px;
|
padding-bottom: 6px;
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
|
|
||||||
.filter-item {
|
.filter-item {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
margin: 0 3px 10px 0;
|
margin: 0 3px 10px 0;
|
||||||
|
|
||||||
input {
|
input {
|
||||||
height: 30.5px;
|
height: 30.5px;
|
||||||
line-height: 30.5px;
|
line-height: 30.5px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-form-item-label {
|
.el-form-item-label {
|
||||||
margin: 0 3px 9px 0;
|
margin: 0 3px 9px 0;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #606266;
|
color: #606266;
|
||||||
line-height: 30.5px;
|
line-height: 30.5px;
|
||||||
padding: 0 7px 0 7px;
|
padding: 0 7px 0 7px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-button + .el-button {
|
.el-button + .el-button {
|
||||||
margin-left: 0 !important;
|
margin-left: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-select__caret.el-input__icon.el-icon-arrow-up {
|
.el-select__caret.el-input__icon.el-icon-arrow-up {
|
||||||
line-height: 30.5px;
|
line-height: 30.5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.date-item {
|
.date-item {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
height: 30.5px !important;
|
height: 30.5px !important;
|
||||||
width: 230px !important;
|
width: 230px !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-avatar {
|
.el-avatar {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background: #ccc;
|
background: #ccc;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
width: 32px;
|
width: 32px;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
line-height: 32px;
|
line-height: 32px;
|
||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo-con {
|
.logo-con {
|
||||||
height: 60px;
|
height: 60px;
|
||||||
padding: 13px 0 0;
|
padding: 13px 0 0;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
height: 32px;
|
height: 32px;
|
||||||
width: 135px;
|
width: 135px;
|
||||||
display: block;
|
display: block;
|
||||||
//margin: 0 auto;
|
//margin: 0 auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#el-login-footer {
|
#el-login-footer {
|
||||||
height: 40px;
|
height: 40px;
|
||||||
line-height: 40px;
|
line-height: 40px;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-family: Arial, serif;
|
font-family: Arial, serif;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#el-main-footer {
|
#el-main-footer {
|
||||||
background: none repeat scroll 0 0 white;
|
background: none repeat scroll 0 0 white;
|
||||||
border-top: 1px solid #e7eaec;
|
border-top: 1px solid #e7eaec;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
padding: 10px 6px 0 6px;
|
padding: 10px 6px 0 6px;
|
||||||
height: 33px;
|
height: 33px;
|
||||||
font-size: 0.7rem !important;
|
font-size: 0.7rem !important;
|
||||||
color: #7a8b9a;
|
color: #7a8b9a;
|
||||||
letter-spacing: 0.8px;
|
letter-spacing: 0.8px;
|
||||||
font-family: Arial, sans-serif !important;
|
font-family: Arial, sans-serif !important;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.eladmin-upload {
|
.eladmin-upload {
|
||||||
border: 1px dashed #c0ccda;
|
border: 1px dashed #c0ccda;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
height: 45px;
|
height: 45px;
|
||||||
line-height: 45px;
|
line-height: 45px;
|
||||||
width: 368px;
|
width: 368px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.my-blockquote {
|
.my-blockquote {
|
||||||
margin: 0 0 10px;
|
margin: 0 0 10px;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
line-height: 22px;
|
line-height: 22px;
|
||||||
border-left: 5px solid #00437B;
|
border-left: 5px solid #00437B;
|
||||||
border-radius: 0 2px 2px 0;
|
border-radius: 0 2px 2px 0;
|
||||||
background-color: #f2f2f2;
|
background-color: #f2f2f2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.my-code {
|
.my-code {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
border-left: 5px solid #ddd;
|
border-left: 5px solid #ddd;
|
||||||
color: #333;
|
color: #333;
|
||||||
font-family: Courier New, serif;
|
font-family: Courier New, serif;
|
||||||
font-size: 12px
|
font-size: 12px
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-tabs {
|
.el-tabs {
|
||||||
margin-bottom: 25px;
|
margin-bottom: 25px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
//修改侧边栏菜单颜色和高度
|
//修改侧边栏菜单颜色和高度
|
||||||
.el-menu-item, .el-submenu__title {
|
.el-menu-item, .el-submenu__title {
|
||||||
height: 40px !important;
|
height: 40px !important;
|
||||||
//background-color: #776020 !important;
|
//background-color: #776020 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
#app .sidebar-container .el-submenu .el-menu-item {
|
#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 .nest-menu .el-submenu > .el-submenu__title, #app .sidebar-container .el-submenu .el-menu-item {
|
||||||
}
|
}
|
||||||
|
|
||||||
#app .sidebar-container {
|
#app .sidebar-container {
|
||||||
//background-color: #544b32 !important;
|
//background-color: #544b32 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-form-item--small.el-form-item {
|
.el-form-item--small.el-form-item {
|
||||||
margin-bottom: 12px !important;
|
margin-bottom: 12px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-form-item--mini.el-form-item {
|
.el-form-item--mini.el-form-item {
|
||||||
margin-bottom: 10px !important;
|
margin-bottom: 10px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
//去除编辑文本框为数字时的上下箭头start
|
//去除编辑文本框为数字时的上下箭头start
|
||||||
.el-form--inline .el-form-item__content {
|
.el-form--inline .el-form-item__content {
|
||||||
width: auto !important;
|
width: auto !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="number"] {
|
input[type="number"] {
|
||||||
-moz-appearance: textfield;
|
-moz-appearance: textfield;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="number"]::-webkit-inner-spin-button,
|
input[type="number"]::-webkit-inner-spin-button,
|
||||||
input[type="number"]::-webkit-outer-spin-button {
|
input[type="number"]::-webkit-outer-spin-button {
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
//去除编辑文本框为数字时的上下箭头end
|
//去除编辑文本框为数字时的上下箭头end
|
||||||
|
|
||||||
//设置计数器文字居左
|
//设置计数器文字居左
|
||||||
.el-input-number--mini .el-input__inner {
|
.el-input-number--mini .el-input__inner {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-table:not(.el-table–scrollable-x) .el-table__fixed-right {
|
.el-table:not(.el-table–scrollable-x) .el-table__fixed-right {
|
||||||
height: 100% !important;
|
height: 100% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 修改弹出框距离
|
// 修改弹出框距离
|
||||||
.el-dialog__body {
|
.el-dialog__body {
|
||||||
padding-top: 0px !important;
|
padding-top: 0px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
//表格标题样式
|
//表格标题样式
|
||||||
.el-table {
|
.el-table {
|
||||||
.el-table__header-wrapper,
|
.el-table__header-wrapper,
|
||||||
.el-table__fixed-header-wrapper {
|
.el-table__fixed-header-wrapper {
|
||||||
th {
|
th {
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
background-color: #f5f5f5;
|
background-color: #f5f5f5;
|
||||||
color: #515a6e;
|
color: #515a6e;
|
||||||
height: 35px;
|
height: 35px;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
}
|
}
|
||||||
|
|
||||||
td {
|
td {
|
||||||
color: #f8f8f9;
|
color: #f8f8f9;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-table__body-wrapper {
|
.el-table__body-wrapper {
|
||||||
.el-button [class*="el-icon-"] + span {
|
.el-button [class*="el-icon-"] + span {
|
||||||
margin-left: 1px;
|
margin-left: 1px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
//表格固定列最后一行显示不全(https://mp.weixin.qq.com/s/HpoykJNtsynsW4UMHitZbQ)
|
//表格固定列最后一行显示不全(https://mp.weixin.qq.com/s/HpoykJNtsynsW4UMHitZbQ)
|
||||||
.el-table__fixed-right {
|
.el-table__fixed-right {
|
||||||
height: 100% !important;
|
height: 100% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
//表头与内容错位
|
//表头与内容错位
|
||||||
.el-table--scrollable-y .el-table__body-wrapper {
|
.el-table--scrollable-y .el-table__body-wrapper {
|
||||||
overflow-y: overlay !important;
|
overflow-y: overlay !important;
|
||||||
}
|
}
|
||||||
//左侧边框不显示start https://blog.csdn.net/m0_37922443/article/details/126487240
|
//左侧边框不显示start https://blog.csdn.net/m0_37922443/article/details/126487240
|
||||||
.el-table__row td:not(.is-hidden):last-child {
|
.el-table__row td:not(.is-hidden):last-child {
|
||||||
right: -1px;
|
right: -1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
thead th:not(.is-hidden):last-child {
|
thead th:not(.is-hidden):last-child {
|
||||||
right: -1px;
|
right: -1px;
|
||||||
}
|
}
|
||||||
//左侧边框不显示end
|
//左侧边框不显示end
|
||||||
|
|
||||||
|
|||||||
@@ -1,122 +1,122 @@
|
|||||||
// cover some element-ui styles
|
// cover some element-ui styles
|
||||||
|
|
||||||
.el-breadcrumb__inner,
|
.el-breadcrumb__inner,
|
||||||
.el-breadcrumb__inner a {
|
.el-breadcrumb__inner a {
|
||||||
font-weight: 400 !important;
|
font-weight: 400 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-upload {
|
.el-upload {
|
||||||
input[type="file"] {
|
input[type="file"] {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-upload__input {
|
.el-upload__input {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cell {
|
.cell {
|
||||||
.el-tag {
|
.el-tag {
|
||||||
margin-right: 0px;
|
margin-right: 0px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.small-padding {
|
.small-padding {
|
||||||
.cell {
|
.cell {
|
||||||
padding-left: 5px;
|
padding-left: 5px;
|
||||||
padding-right: 5px;
|
padding-right: 5px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.fixed-width {
|
.fixed-width {
|
||||||
.el-button--mini {
|
.el-button--mini {
|
||||||
padding: 7px 10px;
|
padding: 7px 10px;
|
||||||
width: 60px;
|
width: 60px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-col {
|
.status-col {
|
||||||
.cell {
|
.cell {
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
.el-tag {
|
.el-tag {
|
||||||
margin-right: 0px;
|
margin-right: 0px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// to fixed https://github.com/ElemeFE/element/issues/2461
|
// to fixed https://github.com/ElemeFE/element/issues/2461
|
||||||
.el-dialog {
|
.el-dialog {
|
||||||
transform: none;
|
transform: none;
|
||||||
left: 0;
|
left: 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
// refine element ui upload
|
// refine element ui upload
|
||||||
.upload-container {
|
.upload-container {
|
||||||
.el-upload {
|
.el-upload {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
.el-upload-dragger {
|
.el-upload-dragger {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 200px;
|
height: 200px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// dropdown
|
// dropdown
|
||||||
.el-dropdown-menu {
|
.el-dropdown-menu {
|
||||||
a {
|
a {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// fix date-picker ui bug in filter-item
|
// fix date-picker ui bug in filter-item
|
||||||
.el-range-editor.el-input__inner {
|
.el-range-editor.el-input__inner {
|
||||||
display: inline-flex !important;
|
display: inline-flex !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
// to fix el-date-picker css style
|
// to fix el-date-picker css style
|
||||||
.el-range-separator {
|
.el-range-separator {
|
||||||
box-sizing: content-box;
|
box-sizing: content-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-menu--collapse
|
.el-menu--collapse
|
||||||
> div
|
> div
|
||||||
> .el-submenu
|
> .el-submenu
|
||||||
> .el-submenu__title
|
> .el-submenu__title
|
||||||
.el-submenu__icon-arrow {
|
.el-submenu__icon-arrow {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-form-search {
|
.el-form-search {
|
||||||
float: right;
|
float: right;
|
||||||
.el-form-search-item {
|
.el-form-search-item {
|
||||||
margin-bottom: 0px;
|
margin-bottom: 0px;
|
||||||
.el-input__inner {
|
.el-input__inner {
|
||||||
width: 140px;
|
width: 140px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
el-table .el-table__cell {
|
el-table .el-table__cell {
|
||||||
padding: 8px 0;
|
padding: 8px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-table--medium .el-table__cell {
|
.el-table--medium .el-table__cell {
|
||||||
padding: 6px 0;
|
padding: 6px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-table--small .el-table__cell {
|
.el-table--small .el-table__cell {
|
||||||
padding: 3px 0;
|
padding: 3px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-table--mini .el-table__cell {
|
.el-table--mini .el-table__cell {
|
||||||
padding: 1px 0;
|
padding: 1px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-dialog__body {
|
.el-dialog__body {
|
||||||
padding: 20px 20px;
|
padding: 20px 20px;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,31 +1,31 @@
|
|||||||
/**
|
/**
|
||||||
* I think element-ui's default theme color is too light for long-term use.
|
* 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.
|
* So I modified the default color and you can modify it to your liking.
|
||||||
**/
|
**/
|
||||||
|
|
||||||
/* theme color */
|
/* theme color */
|
||||||
$--color-primary: #1890ff;
|
$--color-primary: #1890ff;
|
||||||
$--color-success: #13ce66;
|
$--color-success: #13ce66;
|
||||||
$--color-warning: #FFBA00;
|
$--color-warning: #FFBA00;
|
||||||
$--color-danger: #ff4949;
|
$--color-danger: #ff4949;
|
||||||
// $--color-info: #1E1E1E;
|
// $--color-info: #1E1E1E;
|
||||||
|
|
||||||
$--button-font-weight: 400;
|
$--button-font-weight: 400;
|
||||||
|
|
||||||
// $--color-text-regular: #1f2d3d;
|
// $--color-text-regular: #1f2d3d;
|
||||||
|
|
||||||
$--border-color-light: #dfe4ed;
|
$--border-color-light: #dfe4ed;
|
||||||
$--border-color-lighter: #e6ebf5;
|
$--border-color-lighter: #e6ebf5;
|
||||||
|
|
||||||
$--table-border:1px solid#dfe6ec;
|
$--table-border:1px solid#dfe6ec;
|
||||||
|
|
||||||
/* icon font path, required */
|
/* icon font path, required */
|
||||||
$--font-path: '~element-ui/lib/theme-chalk/fonts';
|
$--font-path: '~element-ui/lib/theme-chalk/fonts';
|
||||||
|
|
||||||
@import "../../../node_modules/element-ui/packages/theme-chalk/src/index";
|
@import "../../../node_modules/element-ui/packages/theme-chalk/src/index";
|
||||||
|
|
||||||
// the :export directive is the magic sauce for webpack
|
// the :export directive is the magic sauce for webpack
|
||||||
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
|
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
|
||||||
:export {
|
:export {
|
||||||
theme: $--color-primary;
|
theme: $--color-primary;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,183 +1,183 @@
|
|||||||
@import 'variables';
|
@import 'variables';
|
||||||
@import 'mixin';
|
@import 'mixin';
|
||||||
@import 'transition';
|
@import 'transition';
|
||||||
@import 'element-ui';
|
@import 'element-ui';
|
||||||
@import 'sidebar';
|
@import 'sidebar';
|
||||||
@import 'btn';
|
@import 'btn';
|
||||||
@import 'eladmin';
|
@import 'eladmin';
|
||||||
|
|
||||||
body {
|
body {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
text-rendering: optimizeLegibility;
|
text-rendering: optimizeLegibility;
|
||||||
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
|
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
label {
|
label {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
background-color: #eeeeee;
|
//background-color: #eeeeee;
|
||||||
}
|
}
|
||||||
|
|
||||||
#app {
|
#app {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
*,
|
*,
|
||||||
*:before,
|
*:before,
|
||||||
*:after {
|
*:after {
|
||||||
box-sizing: inherit;
|
box-sizing: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
.no-padding {
|
.no-padding {
|
||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.padding-content {
|
.padding-content {
|
||||||
padding: 4px 0;
|
padding: 4px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
a:focus,
|
a:focus,
|
||||||
a:active {
|
a:active {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
a,
|
a,
|
||||||
a:focus,
|
a:focus,
|
||||||
a:hover {
|
a:hover {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
div:focus {
|
div:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fr {
|
.fr {
|
||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fl {
|
.fl {
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pr-5 {
|
.pr-5 {
|
||||||
padding-right: 5px;
|
padding-right: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pl-5 {
|
.pl-5 {
|
||||||
padding-left: 5px;
|
padding-left: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.block {
|
.block {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pointer {
|
.pointer {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.inlineBlock {
|
.inlineBlock {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.clearfix {
|
.clearfix {
|
||||||
&:after {
|
&:after {
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 0;
|
font-size: 0;
|
||||||
content: " ";
|
content: " ";
|
||||||
clear: both;
|
clear: both;
|
||||||
height: 0;
|
height: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
aside {
|
aside {
|
||||||
background: #d40c70;
|
background: #d40c70;
|
||||||
padding: 8px 24px;
|
padding: 8px 24px;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
display: block;
|
display: block;
|
||||||
line-height: 32px;
|
line-height: 32px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
|
||||||
color: #2c3e50;
|
color: #2c3e50;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: #337ab7;
|
color: #337ab7;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: rgb(32, 160, 255);
|
color: rgb(32, 160, 255);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
//main-container全局样式
|
//main-container全局样式
|
||||||
.app-container {
|
.app-container {
|
||||||
padding: 10px 20px 45px 10px;
|
padding: 10px 20px 45px 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.components-container {
|
.components-container {
|
||||||
margin: 30px 50px;
|
margin: 30px 50px;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pagination-container {
|
.pagination-container {
|
||||||
margin-top: 30px;
|
margin-top: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-center {
|
.text-center {
|
||||||
text-align: center
|
text-align: center
|
||||||
}
|
}
|
||||||
|
|
||||||
.sub-navbar {
|
.sub-navbar {
|
||||||
height: 50px;
|
height: 50px;
|
||||||
line-height: 50px;
|
line-height: 50px;
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
padding-right: 20px;
|
padding-right: 20px;
|
||||||
transition: 600ms ease position;
|
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%);
|
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 {
|
.subtitle {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.draft {
|
&.draft {
|
||||||
background: #d0d0d0;
|
background: #d0d0d0;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.deleted {
|
&.deleted {
|
||||||
background: #d0d0d0;
|
background: #d0d0d0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.link-type,
|
.link-type,
|
||||||
.link-type:focus {
|
.link-type:focus {
|
||||||
color: #337ab7;
|
color: #337ab7;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: rgb(32, 160, 255);
|
color: rgb(32, 160, 255);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
//refine vue-multiselect plugin
|
//refine vue-multiselect plugin
|
||||||
.multiselect {
|
.multiselect {
|
||||||
line-height: 16px;
|
line-height: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.multiselect--active {
|
.multiselect--active {
|
||||||
z-index: 1000 !important;
|
z-index: 1000 !important;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,66 +1,66 @@
|
|||||||
@mixin clearfix {
|
@mixin clearfix {
|
||||||
&:after {
|
&:after {
|
||||||
content: "";
|
content: "";
|
||||||
display: table;
|
display: table;
|
||||||
clear: both;
|
clear: both;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin scrollBar {
|
@mixin scrollBar {
|
||||||
&::-webkit-scrollbar-track-piece {
|
&::-webkit-scrollbar-track-piece {
|
||||||
background: #d3dce6;
|
background: #d3dce6;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::-webkit-scrollbar {
|
&::-webkit-scrollbar {
|
||||||
width: 6px;
|
width: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::-webkit-scrollbar-thumb {
|
&::-webkit-scrollbar-thumb {
|
||||||
background: #99a9bf;
|
background: #99a9bf;
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin relative {
|
@mixin relative {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin pct($pct) {
|
@mixin pct($pct) {
|
||||||
width: #{$pct};
|
width: #{$pct};
|
||||||
position: relative;
|
position: relative;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin triangle($width, $height, $color, $direction) {
|
@mixin triangle($width, $height, $color, $direction) {
|
||||||
$width: $width/2;
|
$width: $width/2;
|
||||||
$color-border-style: $height solid $color;
|
$color-border-style: $height solid $color;
|
||||||
$transparent-border-style: $width solid transparent;
|
$transparent-border-style: $width solid transparent;
|
||||||
height: 0;
|
height: 0;
|
||||||
width: 0;
|
width: 0;
|
||||||
|
|
||||||
@if $direction==up {
|
@if $direction==up {
|
||||||
border-bottom: $color-border-style;
|
border-bottom: $color-border-style;
|
||||||
border-left: $transparent-border-style;
|
border-left: $transparent-border-style;
|
||||||
border-right: $transparent-border-style;
|
border-right: $transparent-border-style;
|
||||||
}
|
}
|
||||||
|
|
||||||
@else if $direction==right {
|
@else if $direction==right {
|
||||||
border-left: $color-border-style;
|
border-left: $color-border-style;
|
||||||
border-top: $transparent-border-style;
|
border-top: $transparent-border-style;
|
||||||
border-bottom: $transparent-border-style;
|
border-bottom: $transparent-border-style;
|
||||||
}
|
}
|
||||||
|
|
||||||
@else if $direction==down {
|
@else if $direction==down {
|
||||||
border-top: $color-border-style;
|
border-top: $color-border-style;
|
||||||
border-left: $transparent-border-style;
|
border-left: $transparent-border-style;
|
||||||
border-right: $transparent-border-style;
|
border-right: $transparent-border-style;
|
||||||
}
|
}
|
||||||
|
|
||||||
@else if $direction==left {
|
@else if $direction==left {
|
||||||
border-right: $color-border-style;
|
border-right: $color-border-style;
|
||||||
border-top: $transparent-border-style;
|
border-top: $transparent-border-style;
|
||||||
border-bottom: $transparent-border-style;
|
border-bottom: $transparent-border-style;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,209 +1,209 @@
|
|||||||
#app {
|
#app {
|
||||||
|
|
||||||
.main-container {
|
.main-container {
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
transition: margin-left .28s;
|
transition: margin-left .28s;
|
||||||
margin-left: $sideBarWidth;
|
margin-left: $sideBarWidth;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-container {
|
.sidebar-container {
|
||||||
transition: width 0.28s;
|
transition: width 0.28s;
|
||||||
width: $sideBarWidth !important;
|
width: $sideBarWidth !important;
|
||||||
background-color: $menuBg;
|
background-color: $menuBg;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
font-size: 0;
|
font-size: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index: 1001;
|
z-index: 1001;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
// reset element-ui css
|
// reset element-ui css
|
||||||
.horizontal-collapse-transition {
|
.horizontal-collapse-transition {
|
||||||
transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
|
transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.scrollbar-wrapper {
|
.scrollbar-wrapper {
|
||||||
overflow-x: hidden !important;
|
overflow-x: hidden !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-scrollbar__bar.is-vertical {
|
.el-scrollbar__bar.is-vertical {
|
||||||
right: 0;
|
right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-scrollbar {
|
.el-scrollbar {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.has-logo {
|
&.has-logo {
|
||||||
.el-scrollbar {
|
.el-scrollbar {
|
||||||
height: calc(100% - 50px);
|
height: calc(100% - 50px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.is-horizontal {
|
.is-horizontal {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.svg-icon {
|
.svg-icon {
|
||||||
margin-right: 16px;
|
margin-right: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-menu {
|
.el-menu {
|
||||||
border: none;
|
border: none;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
// menu hover
|
// menu hover
|
||||||
.submenu-title-noDropdown,
|
.submenu-title-noDropdown,
|
||||||
.el-submenu__title {
|
.el-submenu__title {
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: $menuHover !important;
|
background-color: $menuHover !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.is-active>.el-submenu__title {
|
.is-active>.el-submenu__title {
|
||||||
color: $subMenuActiveText !important;
|
color: $subMenuActiveText !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
& .nest-menu .el-submenu>.el-submenu__title,
|
& .nest-menu .el-submenu>.el-submenu__title,
|
||||||
& .el-submenu .el-menu-item {
|
& .el-submenu .el-menu-item {
|
||||||
min-width: $sideBarWidth !important;
|
min-width: $sideBarWidth !important;
|
||||||
background-color: $subMenuBg !important;
|
background-color: $subMenuBg !important;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: $subMenuHover !important;
|
background-color: $subMenuHover !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.hideSidebar {
|
.hideSidebar {
|
||||||
.sidebar-container {
|
.sidebar-container {
|
||||||
width: 54px !important;
|
width: 54px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-container {
|
.main-container {
|
||||||
margin-left: 54px;
|
margin-left: 54px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.submenu-title-noDropdown {
|
.submenu-title-noDropdown {
|
||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.el-tooltip {
|
.el-tooltip {
|
||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
|
|
||||||
.svg-icon {
|
.svg-icon {
|
||||||
margin-left: 20px;
|
margin-left: 20px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-submenu {
|
.el-submenu {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
&>.el-submenu__title {
|
&>.el-submenu__title {
|
||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
|
|
||||||
.svg-icon {
|
.svg-icon {
|
||||||
margin-left: 20px;
|
margin-left: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-submenu__icon-arrow {
|
.el-submenu__icon-arrow {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-menu--collapse {
|
.el-menu--collapse {
|
||||||
.el-submenu {
|
.el-submenu {
|
||||||
&>.el-submenu__title {
|
&>.el-submenu__title {
|
||||||
&>span {
|
&>span {
|
||||||
height: 0;
|
height: 0;
|
||||||
width: 0;
|
width: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-menu--collapse .el-menu .el-submenu {
|
.el-menu--collapse .el-menu .el-submenu {
|
||||||
min-width: $sideBarWidth !important;
|
min-width: $sideBarWidth !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
// mobile responsive
|
// mobile responsive
|
||||||
.mobile {
|
.mobile {
|
||||||
.main-container {
|
.main-container {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-container {
|
.sidebar-container {
|
||||||
transition: transform .28s;
|
transition: transform .28s;
|
||||||
width: $sideBarWidth !important;
|
width: $sideBarWidth !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.hideSidebar {
|
&.hideSidebar {
|
||||||
.sidebar-container {
|
.sidebar-container {
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
transition-duration: 0.3s;
|
transition-duration: 0.3s;
|
||||||
transform: translate3d(-$sideBarWidth, 0, 0);
|
transform: translate3d(-$sideBarWidth, 0, 0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.withoutAnimation {
|
.withoutAnimation {
|
||||||
|
|
||||||
.main-container,
|
.main-container,
|
||||||
.sidebar-container {
|
.sidebar-container {
|
||||||
transition: none;
|
transition: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// when menu collapsed
|
// when menu collapsed
|
||||||
.el-menu--vertical {
|
.el-menu--vertical {
|
||||||
&>.el-menu {
|
&>.el-menu {
|
||||||
.svg-icon {
|
.svg-icon {
|
||||||
margin-right: 16px;
|
margin-right: 16px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.nest-menu .el-submenu>.el-submenu__title,
|
.nest-menu .el-submenu>.el-submenu__title,
|
||||||
.el-menu-item {
|
.el-menu-item {
|
||||||
&:hover {
|
&:hover {
|
||||||
// you can use $subMenuHover
|
// you can use $subMenuHover
|
||||||
background-color: $menuHover !important;
|
background-color: $menuHover !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// the scroll bar appears when the subMenu is too long
|
// the scroll bar appears when the subMenu is too long
|
||||||
>.el-menu--popup {
|
>.el-menu--popup {
|
||||||
max-height: 100vh;
|
max-height: 100vh;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
|
||||||
&::-webkit-scrollbar-track-piece {
|
&::-webkit-scrollbar-track-piece {
|
||||||
background: #d3dce6;
|
background: #d3dce6;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::-webkit-scrollbar {
|
&::-webkit-scrollbar {
|
||||||
width: 6px;
|
width: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::-webkit-scrollbar-thumb {
|
&::-webkit-scrollbar-thumb {
|
||||||
background: #99a9bf;
|
background: #99a9bf;
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,48 +1,48 @@
|
|||||||
// global transition css
|
// global transition css
|
||||||
|
|
||||||
/* fade */
|
/* fade */
|
||||||
.fade-enter-active,
|
.fade-enter-active,
|
||||||
.fade-leave-active {
|
.fade-leave-active {
|
||||||
transition: opacity 0.28s;
|
transition: opacity 0.28s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fade-enter,
|
.fade-enter,
|
||||||
.fade-leave-active {
|
.fade-leave-active {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* fade-transform */
|
/* fade-transform */
|
||||||
.fade-transform-leave-active,
|
.fade-transform-leave-active,
|
||||||
.fade-transform-enter-active {
|
.fade-transform-enter-active {
|
||||||
transition: all .5s;
|
transition: all .5s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fade-transform-enter {
|
.fade-transform-enter {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transform: translateX(-30px);
|
transform: translateX(-30px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.fade-transform-leave-to {
|
.fade-transform-leave-to {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transform: translateX(30px);
|
transform: translateX(30px);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* breadcrumb transition */
|
/* breadcrumb transition */
|
||||||
.breadcrumb-enter-active,
|
.breadcrumb-enter-active,
|
||||||
.breadcrumb-leave-active {
|
.breadcrumb-leave-active {
|
||||||
transition: all .5s;
|
transition: all .5s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.breadcrumb-enter,
|
.breadcrumb-enter,
|
||||||
.breadcrumb-leave-active {
|
.breadcrumb-leave-active {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transform: translateX(20px);
|
transform: translateX(20px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.breadcrumb-move {
|
.breadcrumb-move {
|
||||||
transition: all .5s;
|
transition: all .5s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.breadcrumb-leave-active {
|
.breadcrumb-leave-active {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,48 +1,48 @@
|
|||||||
// base color
|
// base color
|
||||||
$blue:#324157;
|
$blue:#324157;
|
||||||
$light-blue:#3A71A8;
|
$light-blue:#3A71A8;
|
||||||
$red:#C03639;
|
$red:#C03639;
|
||||||
$pink: #E65D6E;
|
$pink: #E65D6E;
|
||||||
$green: #30B08F;
|
$green: #30B08F;
|
||||||
$tiffany: #4AB7BD;
|
$tiffany: #4AB7BD;
|
||||||
$yellow:#FEC171;
|
$yellow:#FEC171;
|
||||||
$panGreen: #30B08F;
|
$panGreen: #30B08F;
|
||||||
|
|
||||||
$base-logo-title-color: #ffffff;
|
$base-logo-title-color: #ffffff;
|
||||||
$base-logo-light-title-color: #001529;
|
$base-logo-light-title-color: #001529;
|
||||||
$base-menu-light-background:#ffffff;
|
$base-menu-light-background:#ffffff;
|
||||||
|
|
||||||
// sidebar
|
// sidebar
|
||||||
$menuText: #ffffff;
|
$menuText: #ffffff;
|
||||||
$menuActiveText:#409EFF;
|
$menuActiveText:#409EFF;
|
||||||
$subMenuActiveText: #ffffff; // https://github.com/ElemeFE/element/issues/12951
|
$subMenuActiveText: #ffffff; // https://github.com/ElemeFE/element/issues/12951
|
||||||
|
|
||||||
$menuBg: #001529; //https://cloud.tencent.com/developer/article/1753773
|
$menuBg: #001529; //https://cloud.tencent.com/developer/article/1753773
|
||||||
$menuHover:#4e5465;
|
$menuHover:#4e5465;
|
||||||
|
|
||||||
$base-menu-light-color:rgba(0,0,0,.70);
|
$base-menu-light-color:rgba(0,0,0,.70);
|
||||||
|
|
||||||
$subMenuBg:#000c17;
|
$subMenuBg:#000c17;
|
||||||
$subMenuHover:#4e5465;
|
$subMenuHover:#4e5465;
|
||||||
|
|
||||||
$sideBarWidth: 205px;
|
$sideBarWidth: 205px;
|
||||||
|
|
||||||
// the :export directive is the magic sauce for webpack
|
// the :export directive is the magic sauce for webpack
|
||||||
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
|
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
|
||||||
:export {
|
:export {
|
||||||
menuText: $menuText;
|
menuText: $menuText;
|
||||||
menuActiveText: $menuActiveText;
|
menuActiveText: $menuActiveText;
|
||||||
subMenuActiveText: $subMenuActiveText;
|
subMenuActiveText: $subMenuActiveText;
|
||||||
menuBg: $menuBg;
|
menuBg: $menuBg;
|
||||||
menuLightBackground: $base-menu-light-background;
|
menuLightBackground: $base-menu-light-background;
|
||||||
menuLightColor: $base-menu-light-color;
|
menuLightColor: $base-menu-light-color;
|
||||||
menuHover: $menuHover;
|
menuHover: $menuHover;
|
||||||
subMenuBg: $subMenuBg;
|
subMenuBg: $subMenuBg;
|
||||||
subMenuHover: $subMenuHover;
|
subMenuHover: $subMenuHover;
|
||||||
sideBarWidth: $sideBarWidth;
|
sideBarWidth: $sideBarWidth;
|
||||||
|
|
||||||
logoTitleColor: $base-logo-title-color;
|
logoTitleColor: $base-logo-title-color;
|
||||||
logoLightTitleColor: $base-logo-light-title-color
|
logoLightTitleColor: $base-logo-light-title-color
|
||||||
}
|
}
|
||||||
|
|
||||||
$base-sidebar-width: 2010px;
|
$base-sidebar-width: 2010px;
|
||||||
|
|||||||
@@ -134,6 +134,7 @@ import xg_agv_car from '@/views/acs/device/driver/agv/xg_agv_car.vue'
|
|||||||
import oven_inspect_site from '@/views/acs/device/driver/oven_inspect_site.vue'
|
import oven_inspect_site from '@/views/acs/device/driver/oven_inspect_site.vue'
|
||||||
import standard_stacker_device from '@/views/acs/device/driver/standard_stacker_device.vue'
|
import standard_stacker_device from '@/views/acs/device/driver/standard_stacker_device.vue'
|
||||||
import appearance_inspection_scanner_conveyor_device from '@/views/acs/device/driver/appearance_inspection_scanner_conveyor_device.vue'
|
import appearance_inspection_scanner_conveyor_device from '@/views/acs/device/driver/appearance_inspection_scanner_conveyor_device.vue'
|
||||||
|
import strip_conveyor_device from '@/views/acs/device/driver/strip_conveyor_device.vue'
|
||||||
export default {
|
export default {
|
||||||
name: 'DeviceConfig',
|
name: 'DeviceConfig',
|
||||||
components: {
|
components: {
|
||||||
@@ -194,6 +195,7 @@ export default {
|
|||||||
volume_two_manipulator,
|
volume_two_manipulator,
|
||||||
manipulator_cache,
|
manipulator_cache,
|
||||||
standard_stacker_device,
|
standard_stacker_device,
|
||||||
|
strip_conveyor_device,
|
||||||
appearance_inspection_scanner_conveyor_device
|
appearance_inspection_scanner_conveyor_device
|
||||||
},
|
},
|
||||||
dicts: ['device_type'],
|
dicts: ['device_type'],
|
||||||
|
|||||||
556
nladmin-ui/src/views/acs/device/driver/strip_conveyor_device.vue
Normal file
556
nladmin-ui/src/views/acs/device/driver/strip_conveyor_device.vue
Normal file
@@ -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>
|
||||||
Reference in New Issue
Block a user