diff --git a/nladmin-ui/public/favicon.ico b/nladmin-ui/public/favicon.ico
index fcb6999..63a1585 100644
Binary files a/nladmin-ui/public/favicon.ico and b/nladmin-ui/public/favicon.ico differ
diff --git a/nladmin-ui/src/assets/styles/btn.scss b/nladmin-ui/src/assets/styles/btn.scss
index 8f47f2c..f8103d0 100644
--- a/nladmin-ui/src/assets/styles/btn.scss
+++ b/nladmin-ui/src/assets/styles/btn.scss
@@ -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;
+}
diff --git a/nladmin-ui/src/assets/styles/eladmin.scss b/nladmin-ui/src/assets/styles/eladmin.scss
index 9eed7c5..5575c74 100644
--- a/nladmin-ui/src/assets/styles/eladmin.scss
+++ b/nladmin-ui/src/assets/styles/eladmin.scss
@@ -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
+
diff --git a/nladmin-ui/src/assets/styles/element-ui.scss b/nladmin-ui/src/assets/styles/element-ui.scss
index 5c72fb9..a35cfe8 100644
--- a/nladmin-ui/src/assets/styles/element-ui.scss
+++ b/nladmin-ui/src/assets/styles/element-ui.scss
@@ -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;
+}
diff --git a/nladmin-ui/src/assets/styles/element-variables.scss b/nladmin-ui/src/assets/styles/element-variables.scss
index a4f8c4a..9a646ff 100644
--- a/nladmin-ui/src/assets/styles/element-variables.scss
+++ b/nladmin-ui/src/assets/styles/element-variables.scss
@@ -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;
+}
diff --git a/nladmin-ui/src/assets/styles/index.scss b/nladmin-ui/src/assets/styles/index.scss
index 35a5c8e..a6212e7 100644
--- a/nladmin-ui/src/assets/styles/index.scss
+++ b/nladmin-ui/src/assets/styles/index.scss
@@ -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;
+}
diff --git a/nladmin-ui/src/assets/styles/mixin.scss b/nladmin-ui/src/assets/styles/mixin.scss
index 06fa061..64d9cf6 100644
--- a/nladmin-ui/src/assets/styles/mixin.scss
+++ b/nladmin-ui/src/assets/styles/mixin.scss
@@ -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;
+  }
+}
diff --git a/nladmin-ui/src/assets/styles/sidebar.scss b/nladmin-ui/src/assets/styles/sidebar.scss
index 17381fc..7f62c5d 100644
--- a/nladmin-ui/src/assets/styles/sidebar.scss
+++ b/nladmin-ui/src/assets/styles/sidebar.scss
@@ -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;
+    }
+  }
+}
diff --git a/nladmin-ui/src/assets/styles/transition.scss b/nladmin-ui/src/assets/styles/transition.scss
index 4cb27cc..25e7e18 100644
--- a/nladmin-ui/src/assets/styles/transition.scss
+++ b/nladmin-ui/src/assets/styles/transition.scss
@@ -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;
+}
diff --git a/nladmin-ui/src/assets/styles/variables.scss b/nladmin-ui/src/assets/styles/variables.scss
index 1d1c7bf..49d4d5c 100644
--- a/nladmin-ui/src/assets/styles/variables.scss
+++ b/nladmin-ui/src/assets/styles/variables.scss
@@ -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;
diff --git a/nladmin-ui/src/views/acs/device/config.vue b/nladmin-ui/src/views/acs/device/config.vue
index cc5f310..d009175 100644
--- a/nladmin-ui/src/views/acs/device/config.vue
+++ b/nladmin-ui/src/views/acs/device/config.vue
@@ -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 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 strip_conveyor_device from '@/views/acs/device/driver/strip_conveyor_device.vue'
 export default {
   name: 'DeviceConfig',
   components: {
@@ -194,6 +195,7 @@ export default {
     volume_two_manipulator,
     manipulator_cache,
     standard_stacker_device,
+    strip_conveyor_device,
     appearance_inspection_scanner_conveyor_device
   },
   dicts: ['device_type'],
diff --git a/nladmin-ui/src/views/acs/device/driver/strip_conveyor_device.vue b/nladmin-ui/src/views/acs/device/driver/strip_conveyor_device.vue
new file mode 100644
index 0000000..59f34e6
--- /dev/null
+++ b/nladmin-ui/src/views/acs/device/driver/strip_conveyor_device.vue
@@ -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>