diff --git a/.dockerignore b/.dockerignore
new file mode 100644
index 0000000..438e12d
--- /dev/null
+++ b/.dockerignore
@@ -0,0 +1,7 @@
+.vscode/
+.idea/
+node_modules/
+dist/
+**/*.log
+LICENSE
+README.md
diff --git a/.drone.yml b/.drone.yml
new file mode 100644
index 0000000..f456860
--- /dev/null
+++ b/.drone.yml
@@ -0,0 +1,41 @@
+---
+kind: pipeline
+type: docker
+name: default
+
+steps:
+- name: build
+  image: docker:dind
+  volumes:
+  - name: dockersock
+    path: /var/run/docker.sock
+  - name: dockerconfig
+    path: /root/.docker
+  commands:
+  - docker build -t harbor.picaiba.com/mes/mes-cigs-ui ./ && docker push harbor.picaiba.com/mes/mes-cigs-ui
+
+- name: deploy
+  image: harbor.picaiba.com/tools/kubectl:1.19.8
+  commands:
+  - echo "172.27.0.20 lb.kubesphere.local" >> /etc/hosts
+  #- echo "52.74.223.119 github.com" >> /etc/hosts
+  - sleep 1
+  - kubectl scale --replicas=0 deployment/mes-ui -n mes-cigs
+  - sleep 3
+  - kubectl scale --replicas=1 deployment/mes-ui -n mes-cigs
+  depends_on:
+  - build
+
+volumes:
+- name: dockersock
+  host:
+    path: /var/run/docker.sock
+- name: dockerconfig
+  host:
+    path: /root/.docker
+
+trigger:
+  branch:
+  - develop
+  event:
+  - push
diff --git a/.env.development b/.env.development
index de583d0..55d9fb2 100644
--- a/.env.development
+++ b/.env.development
@@ -2,4 +2,16 @@
 ENV = 'development'
 
 # base api
-VUE_APP_BASE_API = '/dev-api'
+# 这里修改成api服务器地址
+VUE_APP_BASE_API = '/api'
+
+# vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,
+# to control whether the babel-plugin-dynamic-import-node plugin is enabled.
+# It only does one thing by converting all import() to require().
+# This configuration can significantly increase the speed of hot updates,
+# when you have a large number of pages.
+# Detail:  https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/babel-preset-app/index.js
+
+VUE_CLI_BABEL_TRANSPILE_MODULES = true
+VUE_APP_REPORT_DESIGN_URL = 'http://127.0.0.1:8080/ureport/designer'
+VUE_APP_REPORT_VIEW_URL = 'http://127.0.0.1:8080/ureport/preview'
diff --git a/.env.production b/.env.production
index 80c8103..aec3a79 100644
--- a/.env.production
+++ b/.env.production
@@ -2,5 +2,6 @@
 ENV = 'production'
 
 # base api
-VUE_APP_BASE_API = '/prod-api'
-
+VUE_APP_BASE_API = '/api'
+VUE_APP_REPORT_DESIGN_URL = '/ureport/designer'
+VUE_APP_REPORT_VIEW_URL = '/ureport/preview'
\ No newline at end of file
diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
deleted file mode 100644
index d540802..0000000
--- a/.github/FUNDING.yml
+++ /dev/null
@@ -1,4 +0,0 @@
-# These are supported funding model platforms
-
-patreon: panjiachen
-custom: https://panjiachen.github.io/vue-element-admin-site/donate
diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
deleted file mode 100644
index 1a114bc..0000000
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ /dev/null
@@ -1,33 +0,0 @@
----
-name: Bug report（报告问题）
-about: Create a report to help us improve
----
-<!--
-    注意：为更好的解决你的问题，请参考模板提供完整信息，准确描述问题，信息不全的 issue 将被关闭。
-
-    Note: In order to better solve your problem, please refer to the template to provide complete information, accurately describe the problem, and the incomplete information issue will be closed.
--->
-
-
-## Bug report（问题描述）
-
-#### Steps to reproduce（问题复现步骤）
-<!--
-1. [xxx]
-2. [xxx]
-3. [xxxx]
--->
-
-#### Screenshot or Gif（截图或动态图）
-
-
-#### Link to minimal reproduction（最小可在线还原demo）
-
-<!--
-Please only use Codepen, JSFiddle, CodeSandbox or a github repo
--->
-
-#### Other relevant information（格外信息）
-- Your OS:
-- Node.js version:
-- vue-element-admin version:
diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md
deleted file mode 100644
index c33d10d..0000000
--- a/.github/ISSUE_TEMPLATE/feature_request.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-name: Feature Request（新功能建议）
-about: Suggest an idea for this project
----
-
-## Feature request（新功能建议）
-
diff --git a/.github/ISSUE_TEMPLATE/question.md b/.github/ISSUE_TEMPLATE/question.md
deleted file mode 100644
index 7608354..0000000
--- a/.github/ISSUE_TEMPLATE/question.md
+++ /dev/null
@@ -1,35 +0,0 @@
----
-name: Question（提问）
-about: Asking questions about use
----
-
-## Question（提问）
-
-<!--
-    提问之前，请确定你已经过自己的努力，尝试解决过这个问题。
-    若是代码相关问题，请不要只截图，请提供在线 demo，以便节约彼此的时间。
-
-    Before asking a question, please make sure that you have tried your best to solve this problem.
-    If it's a code-related issue, please don't just take screenshots. Please provide an online demo to save each other's time.
--->
-
-#### Steps to reproduce（问题复现步骤）
-<!--
-1. [xxx]
-2. [xxx]
-3. [xxxx]
--->
-
-#### Screenshot or Gif（截图或动态图）
-
-
-#### Link to minimal reproduction（最小可在线还原demo）
-
-<!--
-Please only use Codepen, JSFiddle, CodeSandbox or a github repo
--->
-
-#### Other relevant information（格外信息）
-- Your OS:
-- Node.js version:
-- vue-element-admin version:
diff --git a/.gitignore b/.gitignore
index 78a752d..7dd5617 100644
--- a/.gitignore
+++ b/.gitignore
@@ -21,3 +21,5 @@ selenium-debug.log
 
 package-lock.json
 yarn.lock
+/.env.development
+/vue.config.js
diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..d6f19f4
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,12 @@
+FROM node:12 AS builder
+WORKDIR /app
+ADD package.json /app/
+RUN npm install \
+    --registry=https://registry.npm.taobao.org \
+    --disturl=https://npm.taobao.org/dist
+ADD . /app
+RUN npm run build:prod
+
+FROM busybox
+LABEL maintainer thomas.hairong@gmail.com
+COPY --from=builder /app/dist /html
\ No newline at end of file
diff --git a/QR.png b/QR.png
new file mode 100644
index 0000000..cd55834
Binary files /dev/null and b/QR.png differ
diff --git a/README.md b/README.md
index ca7bf26..f45f259 100644
--- a/README.md
+++ b/README.md
@@ -1,10 +1,50 @@
+<!--
+ * @Author: gtz
+ * @Date: 2021-01-27 10:07:42
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-04-22 09:58:18
+ * @Description: file content
+-->
 # Readme
 
-页面原型地址： http://rp.picaiba.com/qj/2021-9-22
+
+页面原型地址： http://rp.picaiba.com/mes/2020-12-29
 
 element 表单生成工具： https://mrhj.gitee.io/form-generator/#/
 
+***
+
+* 顶栏右上角设置的配置在 @/layout/components/Navbar.vue 中
+* 富文本编辑器中 右上角上传图片的目标地址需要修改，在@/components/Tinymce/components/EditorImage.vue 中
+
+
 ##### echarts封装
 * 考虑使用mixin加入部分功能
 * option配置分离，再复用
 * 定义统一输入的数据格式（通过props？）
+
+##### 国际化注意事项
+* 所有methodbtn的tableBtn配置中的btnName写成下种形式，具体配置项在@/lang/i18n.js 中，若无想要的自行添加
+```
+  btnName: 'btn.edit'
+```
+* 所有hidden不为true的路由的mate中的title，写成下种形式，位置同上
+```
+  meta: { title: routerTitle.dashboard.dashboard?.[language] || routerTitle.dashboard.dashboard.en, icon: 'dashboard', affix: true }
+```
+* 所有table页引入国际化组件，表格配置项中label写成下种形式，具体配置需自行到@/lang/en.js 和@/lang/zh.js 中添加
+```
+  import i18n from '@/lang'
+  const tableProps = [{
+    ...
+    label: i18n.t('userManage.userId'),
+    ...
+  }]
+```
+
+##### 切换主题色
+* 主题样式文件应使用本地文件，不应使用element云上的（目前尝试使用本地可能因为缓存策略导致切换主题色仅第一次生效，目前仍保留使用element云上的样式文件）
+
+##### 备注
+* 废品报废添加时间隐藏，质量检测计划检测速率、检测内容隐藏
+test
\ No newline at end of file
diff --git a/babel.config.js b/babel.config.js
index fb82b27..6604e8d 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,14 +1,26 @@
+/*
+ * @Date: 2020-12-14 09:07:03
+ * @LastEditors: guo
+ * @LastEditTime: 2020-12-29 21:34:11
+ * @FilePath: \basic-admin\babel.config.js
+ * @Description: 修改babel配置
+ * preset-env用于适配浏览器（最新4个版本）
+ * transform-runtime 用于识别一些比较新的js语法
+ */
 module.exports = {
   presets: [
-    // https://github.com/vuejs/vue-cli/tree/master/packages/@vue/babel-preset-app
-    '@vue/cli-plugin-babel/preset'
+    ['@babel/preset-env', {
+      'useBuiltIns': 'usage',
+      'debug': true,
+      'targets': [
+        'last 4 versions'
+      ]
+    }],
+    '@vue/app'
   ],
-  'env': {
-    'development': {
-      // babel-plugin-dynamic-import-node plugin only does one thing by converting all import() to require().
-      // This plugin can significantly increase the speed of hot updates, when you have a large number of pages.
-      // https://panjiachen.github.io/vue-element-admin-site/guide/advanced/lazy-loading.html
-      'plugins': ['dynamic-import-node']
-    }
-  }
+  plugins: [
+    ['@babel/plugin-transform-runtime', {
+      'corejs': 3
+    }]
+  ]
 }
diff --git a/default.conf b/default.conf
new file mode 100644
index 0000000..52f7bbf
--- /dev/null
+++ b/default.conf
@@ -0,0 +1,50 @@
+server {
+  listen 80 default_server;
+  listen [::]:80 default_server;
+
+  root /usr/share/nginx/html;
+  index index.html index.htm;
+
+  location / {
+    try_files $uri $uri/ @rewrites;
+  }
+
+  location /spc/ {
+    proxy_pass http://58.210.206.230:8000/;
+  }
+
+  location /api {
+    access_log off;
+    add_header Access-Control-Allow-Origin        * always;
+    add_header Access-Control-Allow-Methods       GET,OPTIONS,POST,GET,PUT,DELETE always;
+    add_header Access-Control-Allow-Headers       $http_access_control_request_headers;
+    add_header Access-Control-Allow-Credentials   true;
+    add_header Access-Control-Max-Age             1800;
+
+    if ($request_method = OPTIONS){
+       add_header Access-Control-Allow-Origin        * always;
+       add_header Access-Control-Allow-Methods       GET,OPTIONS,POST,GET,PUT,DELETE always;
+       add_header Access-Control-Allow-Headers       $http_access_control_request_headers;
+       add_header Access-Control-Allow-Credentials   true;
+       add_header Access-Control-Max-Age             1800;
+       return                                        204;
+    }
+
+    proxy_set_header Host $host;
+    proxy_set_header X-Real-IP $remote_addr;
+    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+    proxy_buffering off;
+    proxy_pass http://mes:9090/api;
+    proxy_http_version 1.1;
+  }
+
+  location @rewrites {
+    rewrite ^(.+)$ /index.html last;
+  }
+
+  location ~* \.(?:ico|css|js|gif|jpe?g|png)$ {
+    expires max;
+    add_header Pragma public;
+    add_header Cache-Control "public, must-revalidate, proxy-revalidate";
+  }
+}
diff --git a/mock/article.js b/mock/article.js
index 23d8ba5..50218ae 100644
--- a/mock/article.js
+++ b/mock/article.js
@@ -1,4 +1,4 @@
-const Mock = require('mockjs')
+import Mock from 'mockjs'
 
 const List = []
 const count = 100
@@ -27,7 +27,7 @@ for (let i = 0; i < count; i++) {
   }))
 }
 
-module.exports = [
+export default [
   {
     url: '/vue-element-admin/article/list',
     type: 'get',
diff --git a/mock/index.js b/mock/index.js
index 2eed65d..196e292 100644
--- a/mock/index.js
+++ b/mock/index.js
@@ -1,10 +1,10 @@
-const Mock = require('mockjs')
-const { param2Obj } = require('./utils')
+import Mock from 'mockjs'
+import { param2Obj } from '../src/utils'
 
-const user = require('./user')
-const role = require('./role')
-const article = require('./article')
-const search = require('./remote-search')
+import user from './user'
+import role from './role'
+import article from './article'
+import search from './remote-search'
 
 const mocks = [
   ...user,
@@ -16,7 +16,7 @@ const mocks = [
 // for front mock
 // please use it cautiously, it will redefine XMLHttpRequest,
 // which will cause many of your third-party libraries to be invalidated(like progress event).
-function mockXHR() {
+export function mockXHR() {
   // mock patch
   // https://github.com/nuysoft/Mock/issues/300
   Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.send
@@ -54,7 +54,4 @@ function mockXHR() {
   }
 }
 
-module.exports = {
-  mocks,
-  mockXHR
-}
+export default mocks
diff --git a/mock/mock-server.js b/mock/mock-server.js
index 8941ec0..806fdac 100644
--- a/mock/mock-server.js
+++ b/mock/mock-server.js
@@ -8,7 +8,7 @@ const mockDir = path.join(process.cwd(), 'mock')
 
 function registerRoutes(app) {
   let mockLastIndex
-  const { mocks } = require('./index.js')
+  const { default: mocks } = require('./index.js')
   const mocksForServer = mocks.map(route => {
     return responseFake(route.url, route.type, route.response)
   })
@@ -44,6 +44,9 @@ const responseFake = (url, type, respond) => {
 }
 
 module.exports = app => {
+  // es6 polyfill
+  require('@babel/register')
+
   // parse app.body
   // https://expressjs.com/en/4x/api.html#req.body
   app.use(bodyParser.json())
diff --git a/mock/remote-search.js b/mock/remote-search.js
index 8fc4926..60809cb 100644
--- a/mock/remote-search.js
+++ b/mock/remote-search.js
@@ -1,4 +1,4 @@
-const Mock = require('mockjs')
+import Mock from 'mockjs'
 
 const NameList = []
 const count = 100
@@ -10,7 +10,7 @@ for (let i = 0; i < count; i++) {
 }
 NameList.push({ name: 'mock-Pan' })
 
-module.exports = [
+export default [
   // username search
   {
     url: '/vue-element-admin/search/user',
diff --git a/mock/role/index.js b/mock/role/index.js
index 4643f00..d957493 100644
--- a/mock/role/index.js
+++ b/mock/role/index.js
@@ -1,6 +1,6 @@
-const Mock = require('mockjs')
-const { deepClone } = require('../utils')
-const { asyncRoutes, constantRoutes } = require('./routes.js')
+import Mock from 'mockjs'
+import { deepClone } from '../../src/utils/index.js'
+import { asyncRoutes, constantRoutes } from './routes.js'
 
 const routes = deepClone([...constantRoutes, ...asyncRoutes])
 
@@ -35,7 +35,7 @@ const roles = [
   }
 ]
 
-module.exports = [
+export default [
   // mock get all routes form server
   {
     url: '/vue-element-admin/routes',
diff --git a/mock/role/routes.js b/mock/role/routes.js
index d33f162..d718919 100644
--- a/mock/role/routes.js
+++ b/mock/role/routes.js
@@ -1,6 +1,6 @@
 // Just a mock data
 
-const constantRoutes = [
+export const constantRoutes = [
   {
     path: '/redirect',
     component: 'layout/Layout',
@@ -72,7 +72,7 @@ const constantRoutes = [
   }
 ]
 
-const asyncRoutes = [
+export const asyncRoutes = [
   {
     path: '/permission',
     component: 'layout/Layout',
@@ -523,8 +523,3 @@ const asyncRoutes = [
 
   { path: '*', redirect: '/404', hidden: true }
 ]
-
-module.exports = {
-  constantRoutes,
-  asyncRoutes
-}
diff --git a/mock/user.js b/mock/user.js
index d82e079..859bd6f 100644
--- a/mock/user.js
+++ b/mock/user.js
@@ -23,7 +23,7 @@ const users = {
   }
 }
 
-module.exports = [
+export default [
   // user login
   {
     url: '/vue-element-admin/user/login',
diff --git a/mock/utils.js b/mock/utils.js
deleted file mode 100644
index f909a29..0000000
--- a/mock/utils.js
+++ /dev/null
@@ -1,48 +0,0 @@
-/**
- * @param {string} url
- * @returns {Object}
- */
-function param2Obj(url) {
-  const search = decodeURIComponent(url.split('?')[1]).replace(/\+/g, ' ')
-  if (!search) {
-    return {}
-  }
-  const obj = {}
-  const searchArr = search.split('&')
-  searchArr.forEach(v => {
-    const index = v.indexOf('=')
-    if (index !== -1) {
-      const name = v.substring(0, index)
-      const val = v.substring(index + 1, v.length)
-      obj[name] = val
-    }
-  })
-  return obj
-}
-
-/**
- * This is just a simple version of deep copy
- * Has a lot of edge cases bug
- * If you want to use a perfect deep copy, use lodash's _.cloneDeep
- * @param {Object} source
- * @returns {Object}
- */
-function deepClone(source) {
-  if (!source && typeof source !== 'object') {
-    throw new Error('error arguments', 'deepClone')
-  }
-  const targetObj = source.constructor === Array ? [] : {}
-  Object.keys(source).forEach(keys => {
-    if (source[keys] && typeof source[keys] === 'object') {
-      targetObj[keys] = deepClone(source[keys])
-    } else {
-      targetObj[keys] = source[keys]
-    }
-  })
-  return targetObj
-}
-
-module.exports = {
-  param2Obj,
-  deepClone
-}
diff --git a/package.json b/package.json
index 02f68e2..2f2edfc 100644
--- a/package.json
+++ b/package.json
@@ -1,87 +1,30 @@
 {
   "name": "vue-element-admin",
-  "version": "4.4.0",
+  "version": "4.2.1",
   "description": "A magical vue admin. An out-of-box UI solution for enterprise applications. Newest development stack of vue. Lots of awesome features",
   "author": "Pan <panfree23@gmail.com>",
+  "license": "MIT",
   "scripts": {
     "dev": "vue-cli-service serve",
-    "lint": "eslint --ext .js,.vue src",
     "build:prod": "vue-cli-service build",
     "build:stage": "vue-cli-service build --mode staging",
     "preview": "node build/index.js --preview",
-    "new": "plop",
-    "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml",
+    "lint": "eslint --ext .js,.vue src",
     "test:unit": "jest --clearCache && vue-cli-service test:unit",
-    "test:ci": "npm run lint && npm run test:unit"
+    "test:ci": "npm run lint && npm run test:unit",
+    "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml",
+    "new": "plop"
   },
-  "dependencies": {
-    "axios": "0.18.1",
-    "clipboard": "2.0.4",
-    "codemirror": "5.45.0",
-    "core-js": "3.6.5",
-    "driver.js": "0.9.5",
-    "dropzone": "5.5.1",
-    "echarts": "4.2.1",
-    "element-ui": "2.13.2",
-    "file-saver": "2.0.1",
-    "fuse.js": "3.4.4",
-    "js-cookie": "2.2.0",
-    "jsonlint": "1.6.3",
-    "jszip": "3.2.1",
-    "normalize.css": "7.0.0",
-    "nprogress": "0.2.0",
-    "path-to-regexp": "2.4.0",
-    "screenfull": "4.2.0",
-    "script-loader": "0.7.2",
-    "sortablejs": "1.8.4",
-    "tui-editor": "1.3.3",
-    "vue": "2.6.10",
-    "vue-count-to": "1.0.13",
-    "vue-router": "3.0.2",
-    "vue-splitpane": "1.0.4",
-    "vuedraggable": "2.20.0",
-    "vuex": "3.1.0",
-    "xlsx": "0.14.1"
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
   },
-  "devDependencies": {
-    "@vue/cli-plugin-babel": "4.4.4",
-    "@vue/cli-plugin-eslint": "4.4.4",
-    "@vue/cli-plugin-unit-jest": "4.4.4",
-    "@vue/cli-service": "4.4.4",
-    "@vue/test-utils": "1.0.0-beta.29",
-    "autoprefixer": "9.5.1",
-    "babel-eslint": "10.1.0",
-    "babel-jest": "23.6.0",
-    "babel-plugin-dynamic-import-node": "2.3.3",
-    "chalk": "2.4.2",
-    "chokidar": "2.1.5",
-    "connect": "3.6.6",
-    "eslint": "6.7.2",
-    "eslint-plugin-vue": "6.2.2",
-    "html-webpack-plugin": "3.2.0",
-    "husky": "1.3.1",
-    "lint-staged": "8.1.5",
-    "mockjs": "1.0.1-beta3",
-    "plop": "2.3.0",
-    "runjs": "4.3.2",
-    "sass": "1.26.2",
-    "sass-loader": "8.0.2",
-    "script-ext-html-webpack-plugin": "2.1.3",
-    "serve-static": "1.13.2",
-    "svg-sprite-loader": "4.1.3",
-    "svgo": "1.2.0",
-    "vue-template-compiler": "2.6.10"
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions"
-  ],
-  "bugs": {
-    "url": "https://github.com/PanJiaChen/vue-element-admin/issues"
-  },
-  "engines": {
-    "node": ">=8.9",
-    "npm": ">= 3.0.0"
+  "lint-staged": {
+    "src/**/*.{js,vue}": [
+      "eslint --fix",
+      "git add"
+    ]
   },
   "keywords": [
     "vue",
@@ -92,20 +35,94 @@
     "admin-template",
     "management-system"
   ],
-  "license": "MIT",
-  "lint-staged": {
-    "src/**/*.{js,vue}": [
-      "eslint --fix",
-      "git add"
-    ]
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/PanJiaChen/vue-element-admin.git"
-  }
+  },
+  "bugs": {
+    "url": "https://github.com/PanJiaChen/vue-element-admin/issues"
+  },
+  "dependencies": {
+    "axios": "0.18.1",
+    "clipboard": "2.0.4",
+    "codemirror": "5.45.0",
+    "desandro-matches-selector": "^2.0.2",
+    "driver.js": "0.9.5",
+    "dropzone": "5.5.1",
+    "echarts": "4.2.1",
+    "element-ui": "2.13.0",
+    "ev-emitter": "^2.1.0",
+    "file-saver": "2.0.1",
+    "fizzy-ui-utils": "^3.0.0",
+    "fuse.js": "3.4.4",
+    "get-size": "^2.0.3",
+    "js-cookie": "2.2.0",
+    "jsonlint": "1.6.3",
+    "jszip": "3.2.1",
+    "lodash": "^4.17.15",
+    "masonry-layout": "^4.2.2",
+    "moment": "^2.27.0",
+    "normalize.css": "7.0.0",
+    "nprogress": "0.2.0",
+    "outlayer": "^2.1.1",
+    "path-to-regexp": "2.4.0",
+    "screenfull": "4.2.0",
+    "script-loader": "0.7.2",
+    "showdown": "1.9.0",
+    "sortablejs": "1.8.4",
+    "tui-editor": "1.4.10",
+    "viewerjs": "^1.6.1",
+    "vue": "2.6.10",
+    "vue-bus": "^1.2.1",
+    "vue-count-to": "1.0.13",
+    "vue-i18n": "^8.22.2",
+    "vue-perfect-scrollbar": "^0.2.1",
+    "vue-router": "3.0.2",
+    "vue-splitpane": "1.0.4",
+    "vuedraggable": "2.20.0",
+    "vuex": "3.1.0",
+    "xlsx": "0.14.1"
+  },
+  "devDependencies": {
+    "@babel/core": "7.0.0",
+    "@babel/plugin-transform-runtime": "^7.12.10",
+    "@babel/preset-env": "^7.12.11",
+    "@babel/register": "7.0.0",
+    "@babel/runtime-corejs3": "^7.12.5",
+    "@vue/cli-plugin-babel": "3.5.3",
+    "@vue/cli-plugin-eslint": "^3.9.1",
+    "@vue/cli-plugin-unit-jest": "3.5.3",
+    "@vue/cli-service": "3.5.3",
+    "@vue/test-utils": "1.0.0-beta.29",
+    "autoprefixer": "^9.5.1",
+    "babel-core": "7.0.0-bridge.0",
+    "babel-eslint": "10.0.1",
+    "babel-jest": "23.6.0",
+    "chalk": "2.4.2",
+    "chokidar": "2.1.5",
+    "connect": "3.6.6",
+    "eslint": "5.15.3",
+    "eslint-plugin-vue": "5.2.2",
+    "html-webpack-plugin": "3.2.0",
+    "husky": "1.3.1",
+    "lint-staged": "8.1.5",
+    "mockjs": "1.0.1-beta3",
+    "plop": "2.3.0",
+    "runjs": "^4.3.2",
+    "sass": "^1.26.10",
+    "sass-loader": "^7.1.0",
+    "script-ext-html-webpack-plugin": "2.1.3",
+    "serve-static": "^1.13.2",
+    "svg-sprite-loader": "4.1.3",
+    "svgo": "1.2.0",
+    "vue-template-compiler": "2.6.10"
+  },
+  "engines": {
+    "node": ">=8.9",
+    "npm": ">= 3.0.0"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions"
+  ]
 }
diff --git a/plop-templates/table/index.hbs b/plop-templates/table/index.hbs
new file mode 100644
index 0000000..5851db4
--- /dev/null
+++ b/plop-templates/table/index.hbs
@@ -0,0 +1,89 @@
+{{#if template}}
+<template>
+  <div class="{{ name }}-container">
+    <base-table :table-config="tableProps" :table-data="list" :is-loading="listLoading">
+      <method-btn slot="handleBtn" :method-list="tableBtn" @clickBtn="handleClick" />
+    </base-table>
+    <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
+  </div>
+</template>
+{{/if}}
+
+{{#if script}}
+<script>
+// edit here
+const tableBtn = [{
+  type: 'edit',
+  btnName: 'btn.edit'
+}, {
+  type: 'delete',
+  btnName: 'btn.delete'
+}]
+const tableProps = [{
+  prop: '',
+  label: '',
+  width: '',
+  filter: null,
+  subcomponent: null,
+  align: ''
+}]
+import BaseTable from '@/components/BaseTable'
+// edit here
+import { fetchList } from '@/api/article'
+
+import Pagination from '@/components/Pagination'
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+export default {
+  name: '{{ properCase name }}',
+  props: {},
+  components: { Pagination, BaseTable, MethodBtn },
+  data() {
+    return {
+      tableBtn,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        current: 1,
+        size: 10
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  mounted() {},
+  methods: {
+    handleClick(raw) {
+
+    },
+    getList() {
+      this.listLoading = true
+      // edit here
+      fetchList(this.listQuery).then(response => {
+        this.list = response.data.records
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    }
+  }
+}
+</script>
+{{/if}}
+
+{{#if style}}
+<style lang="scss" scoped>
+.{{ name }}-container {
+
+}
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
+{{/if}}
diff --git a/plop-templates/table/prompt.js b/plop-templates/table/prompt.js
new file mode 100644
index 0000000..3408edf
--- /dev/null
+++ b/plop-templates/table/prompt.js
@@ -0,0 +1,55 @@
+const { notEmpty } = require('../utils.js')
+
+module.exports = {
+  description: 'generate a table-view',
+  prompts: [{
+    type: 'input',
+    name: 'name',
+    message: 'input table name please',
+    validate: notEmpty('name')
+  },
+  {
+    type: 'checkbox',
+    name: 'blocks',
+    message: 'Blocks:',
+    choices: [{
+      name: '<template>',
+      value: 'template',
+      checked: true
+    },
+    {
+      name: '<script>',
+      value: 'script',
+      checked: true
+    },
+    {
+      name: 'style',
+      value: 'style',
+      checked: true
+    }
+    ],
+    validate(value) {
+      if (value.indexOf('script') === -1 && value.indexOf('template') === -1) {
+        return 'View require at least a <script> or <template> tag.'
+      }
+      return true
+    }
+  }
+  ],
+  actions: data => {
+    const name = '{{name}}'
+    const actions = [{
+      type: 'add',
+      path: `src/views/${name}/index.vue`,
+      templateFile: 'plop-templates/table/index.hbs',
+      data: {
+        name: name,
+        template: data.blocks.includes('template'),
+        script: data.blocks.includes('script'),
+        style: data.blocks.includes('style')
+      }
+    }]
+
+    return actions
+  }
+}
diff --git a/plop-templates/utils.js b/plop-templates/utils.js
index 0498753..0310ca0 100644
--- a/plop-templates/utils.js
+++ b/plop-templates/utils.js
@@ -1,2 +1,9 @@
-exports.notEmpty = name => v =>
-  !v || v.trim() === '' ? `${name} is required` : true
+exports.notEmpty = name => {
+  return v => {
+    if (!v || v.trim === '') {
+      return `${name} is required`
+    } else {
+      return true
+    }
+  }
+}
diff --git a/plopfile.js b/plopfile.js
index 57387bf..035ccfa 100644
--- a/plopfile.js
+++ b/plopfile.js
@@ -1,9 +1,11 @@
 const viewGenerator = require('./plop-templates/view/prompt')
 const componentGenerator = require('./plop-templates/component/prompt')
 const storeGenerator = require('./plop-templates/store/prompt.js')
+const tableGenerator = require('./plop-templates/table/prompt.js')
 
 module.exports = function(plop) {
   plop.setGenerator('view', viewGenerator)
   plop.setGenerator('component', componentGenerator)
   plop.setGenerator('store', storeGenerator)
+  plop.setGenerator('tablepage', tableGenerator)
 }
diff --git a/public/Lodap.zip b/public/Lodap.zip
new file mode 100644
index 0000000..8351195
Binary files /dev/null and b/public/Lodap.zip differ
diff --git a/public/favicon.ico b/public/favicon.ico
index 34b63ac..f0387bf 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/public/index.html b/public/index.html
index e918500..86d4b45 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,3 +1,10 @@
+<!--
+ * @Author: gtz
+ * @Date: 2021-01-27 10:07:42
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-02-24 10:15:28
+ * @Description: file content
+-->
 <!DOCTYPE html>
 <html>
   <head>
diff --git a/src/App.vue b/src/App.vue
index ec9032c..b63a3b2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,6 +6,8 @@
 
 <script>
 export default {
-  name: 'App'
+  name: 'App',
+  mounted() {
+  }
 }
 </script>
diff --git a/src/api/art-manage/art.js b/src/api/art-manage/art.js
new file mode 100644
index 0000000..fb7f034
--- /dev/null
+++ b/src/api/art-manage/art.js
@@ -0,0 +1,126 @@
+import request from '@/utils/request'
+
+export function list(data) {
+  return request({
+    url: '/process/process-flow/page',
+    method: 'post',
+    data
+  })
+}
+export function getInfo(data) {
+  return request({
+    url: '/process/process-flow/get',
+    method: 'post',
+    data
+  })
+}
+export function enabled(data) {
+  return request({
+    url: '/process/process-flow/enabled',
+    method: 'post',
+    data
+  })
+}
+export function del(data) {
+  return request({
+    url: '/process/process-flow/delete',
+    method: 'post',
+    data
+  })
+}
+export function update(data) {
+  return request({
+    url: '/process/process-flow/update',
+    method: 'post',
+    data
+  })
+}
+export function add(data) {
+  return request({
+    url: '/process/process-flow/add',
+    method: 'post',
+    data
+  })
+}
+// 获取基板列表
+export function listSubstrate(data) {
+  return request({
+    url: '/process/process-flow/substrateList',
+    method: 'post',
+    data
+  })
+}
+// 获取BOM列表
+export function listBom(data) {
+  return request({
+    url: '/process/process-flow/bomList',
+    method: 'post',
+    data
+  })
+}
+
+// 获取某个设备下的bom
+export function listEquipmentBom(data) {
+  return request({
+    url: 'process/process-flow-equipment/equipmentBomList',
+    method: 'post',
+    data
+  })
+}
+// 获取所有设备的bom
+export function listAllEquipmentBom(data) {
+  return request({
+    url: '/process/process-flow-equipment/allEquipmentBomList',
+    method: 'post',
+    data
+  })
+}
+// 获取某个设备下的配方
+export function listEquipmentRecipe(data) {
+  return request({
+    url: 'process/process-flow-equipment/equipmentRecipeList',
+    method: 'post',
+    data
+  })
+}
+// 获取所有设备下的配方
+export function listAllEquipmentRecipe(data) {
+  return request({
+    url: '/process/process-flow-equipment/allEquipmentRecipeList',
+    method: 'post',
+    data
+  })
+}
+// 保存某个工艺下的所有节点
+export function addProcessFlows(data) {
+  return request({
+    url: 'process/process-flow-equipment/add',
+    method: 'post',
+    data
+  })
+}
+// 获取工艺流程下所有节点
+export function listProcessFlowNode(data) {
+  return request({
+    url: '/process/process-flow-equipment/list',
+    method: 'post',
+    data
+  })
+}
+
+// 获取工序列表
+export function listProcess(data) {
+  return request({
+    url: '/process/work-sequence/list',
+    method: 'post',
+    data
+  })
+}
+
+// 获取工艺自动code
+export function getCode() {
+  return request({
+    url: '/process/process-flow/getCode',
+    method: 'post'
+  })
+}
diff --git a/src/api/art-manage/process.js b/src/api/art-manage/process.js
new file mode 100644
index 0000000..5b24338
--- /dev/null
+++ b/src/api/art-manage/process.js
@@ -0,0 +1,49 @@
+/*
+ * @Author: gtz
+ * @Date: 2021-04-06 20:20:10
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-04-07 16:14:47
+ * @Description: file content
+ */
+
+import request from '@/utils/request'
+
+export function list(data) {
+  return request({
+    url: '/process/work-sequence/page',
+    method: 'post',
+    data
+  })
+}
+
+export function getInfo(data) {
+  return request({
+    url: '/process/work-sequence/get',
+    method: 'post',
+    data
+  })
+}
+
+export function del(data) {
+  return request({
+    url: '/process/work-sequence/delete',
+    method: 'post',
+    data
+  })
+}
+
+export function update(data) {
+  return request({
+    url: '/process/work-sequence/update',
+    method: 'post',
+    data
+  })
+}
+
+export function add(data) {
+  return request({
+    url: '/process/work-sequence/add',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/api/basic.js b/src/api/basic.js
new file mode 100644
index 0000000..8e080e3
--- /dev/null
+++ b/src/api/basic.js
@@ -0,0 +1,13 @@
+/*
+ * @Date: 2021-01-21 17:30:30
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-03-01 14:04:42
+ * @FilePath: \basic-admin\src\api\basic.js
+ * @Description: 基础功能接口定义
+ */
+
+// import request from '@/utils/request'
+
+export const uploadPath = '/api/common/attachment/uploadFileFormData'
+export const uploadOnePath = '/api/common/attachment/uploadFile'
+export const cloudPath = 'http://mes.picaiba.com'
diff --git a/src/api/basicData/AlarmManagement/alarmInfo.js b/src/api/basicData/AlarmManagement/alarmInfo.js
new file mode 100644
index 0000000..e672d89
--- /dev/null
+++ b/src/api/basicData/AlarmManagement/alarmInfo.js
@@ -0,0 +1,55 @@
+/*
+ * @Author: zwq
+ * @Date: 2020-12-29 16:00:14
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-02-01 10:58:22
+ * @Description:
+ */
+import request from '@/utils/request'
+
+export function alarmInfoList(data) { // 获取报警信息信息列表
+  return request({
+    url: '/basic/alarm/page',
+    method: 'post',
+    data
+  })
+}
+
+export function alarmInfoDetail(id) { // 获取报警信息信息单条数据
+  return request({
+    url: '/basic/alarm/get',
+    method: 'post',
+    data: { id }
+  })
+}
+
+export function alarmInfoUpdate(data) { // 更新报警信息信息单条数据
+  return request({
+    url: '/basic/alarm/update',
+    method: 'post',
+    data
+  })
+}
+
+export function alarmInfoAdd(data) { // 新增报警信息信息单条数据
+  return request({
+    url: '/basic/alarm/add',
+    method: 'post',
+    data
+  })
+}
+
+export function alarmInfoCode() { // 获取报警信息信息code
+  return request({
+    url: '/basic/alarm/get-code',
+    method: 'post'
+  })
+}
+
+export function alarmInfoDelete(id) { // 删除报警信息信息单条数据
+  return request({
+    url: '/basic/alarm/delete',
+    method: 'post',
+    data: { id }
+  })
+}
diff --git a/src/api/basicData/AlarmManagement/alarmLevel.js b/src/api/basicData/AlarmManagement/alarmLevel.js
new file mode 100644
index 0000000..d674a00
--- /dev/null
+++ b/src/api/basicData/AlarmManagement/alarmLevel.js
@@ -0,0 +1,55 @@
+/*
+ * @Author: zwq
+ * @Date: 2020-12-29 16:00:14
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-01-16 15:44:55
+ * @Description:
+ */
+import request from '@/utils/request'
+
+export function alarmLevelList(data) { // 获取报警等级信息列表
+  return request({
+    url: '/basic/alarm-grade/page',
+    method: 'post',
+    data
+  })
+}
+
+export function alarmLevelDetail(id) { // 获取报警等级信息单条数据
+  return request({
+    url: '/basic/alarm-grade/get',
+    method: 'post',
+    data: { id }
+  })
+}
+
+export function alarmLevelUpdate(data) { // 更新报警等级信息单条数据
+  return request({
+    url: '/basic/alarm-grade/update',
+    method: 'post',
+    data
+  })
+}
+
+export function alarmLevelAdd(data) { // 新增报警等级信息单条数据
+  return request({
+    url: '/basic/alarm-grade/add',
+    method: 'post',
+    data
+  })
+}
+
+export function alarmLevelCode() { // 获取报警等级信息code
+  return request({
+    url: '/basic/alarm-grade/get-code',
+    method: 'post'
+  })
+}
+
+export function alarmLevelDelete(id) { // 删除报警等级信息单条数据
+  return request({
+    url: '/basic/alarm-grade/delete',
+    method: 'post',
+    data: { id }
+  })
+}
diff --git a/src/api/basicData/AlarmManagement/alarmType.js b/src/api/basicData/AlarmManagement/alarmType.js
new file mode 100644
index 0000000..11a91ea
--- /dev/null
+++ b/src/api/basicData/AlarmManagement/alarmType.js
@@ -0,0 +1,55 @@
+/*
+ * @Author: zwq
+ * @Date: 2020-12-29 16:00:14
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-01-16 15:45:10
+ * @Description:
+ */
+import request from '@/utils/request'
+
+export function alarmTypeList(data) { // 获取报警类型信息列表
+  return request({
+    url: '/basic/alarm-type/page',
+    method: 'post',
+    data
+  })
+}
+
+export function alarmTypeDetail(id) { // 获取报警类型信息单条数据
+  return request({
+    url: '/basic/alarm-type/get',
+    method: 'post',
+    data: { id }
+  })
+}
+
+export function alarmTypeUpdate(data) { // 更新报警类型信息单条数据
+  return request({
+    url: '/basic/alarm-type/update',
+    method: 'post',
+    data
+  })
+}
+
+export function alarmTypeAdd(data) { // 新增报警类型信息单条数据
+  return request({
+    url: '/basic/alarm-type/add',
+    method: 'post',
+    data
+  })
+}
+
+export function alarmTypeCode() { // 获取报警类型信息code
+  return request({
+    url: '/basic/alarm-type/get-code',
+    method: 'post'
+  })
+}
+
+export function alarmTypeDelete(id) { // 删除报警类型信息单条数据
+  return request({
+    url: '/basic/alarm-type/delete',
+    method: 'post',
+    data: { id }
+  })
+}
diff --git a/src/api/basicData/Cache/area.js b/src/api/basicData/Cache/area.js
new file mode 100644
index 0000000..6453cde
--- /dev/null
+++ b/src/api/basicData/Cache/area.js
@@ -0,0 +1,55 @@
+/*
+ * @Author: zwq
+ * @Date: 2020-12-29 16:00:14
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-01-27 16:42:27
+ * @Description:
+ */
+import request from '@/utils/request'
+
+export function areaList(data) { // 获取缓存区区域信息列表
+  return request({
+    url: '/basic/area/page',
+    method: 'post',
+    data
+  })
+}
+
+export function areaDetail(id) { // 获取缓存区区域信息单条数据
+  return request({
+    url: '/basic/area/get',
+    method: 'post',
+    data: { id }
+  })
+}
+
+export function areaUpdate(data) { // 更新缓存区区域信息单条数据
+  return request({
+    url: '/basic/area/update',
+    method: 'post',
+    data
+  })
+}
+
+export function areaAdd(data) { // 新增缓存区区域信息单条数据
+  return request({
+    url: '/basic/area/add',
+    method: 'post',
+    data
+  })
+}
+
+export function areaCode() { // 获取缓存区区域信息code
+  return request({
+    url: '/basic/area/get-code',
+    method: 'post'
+  })
+}
+
+export function areaDelete(id) { // 删除缓存区区域信息单条数据
+  return request({
+    url: '/basic/area/delete',
+    method: 'post',
+    data: { id }
+  })
+}
diff --git a/src/api/basicData/Cache/cache.js b/src/api/basicData/Cache/cache.js
new file mode 100644
index 0000000..ef098d8
--- /dev/null
+++ b/src/api/basicData/Cache/cache.js
@@ -0,0 +1,55 @@
+/*
+ * @Author: zwq
+ * @Date: 2020-12-29 16:00:14
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-01-20 15:31:32
+ * @Description:
+ */
+import request from '@/utils/request'
+
+export function cacheList(data) { // 获取缓存区信息列表
+  return request({
+    url: '/basic/cache/page',
+    method: 'post',
+    data
+  })
+}
+
+export function cacheDetail(id) { // 获取缓存区信息单条数据
+  return request({
+    url: '/basic/cache/get',
+    method: 'post',
+    data: { id }
+  })
+}
+
+export function cacheUpdate(data) { // 更新缓存区信息单条数据
+  return request({
+    url: '/basic/cache/update',
+    method: 'post',
+    data
+  })
+}
+
+export function cacheAdd(data) { // 新增缓存区信息单条数据
+  return request({
+    url: '/basic/cache/add',
+    method: 'post',
+    data
+  })
+}
+
+export function cacheCode() { // 获取缓存区信息code
+  return request({
+    url: '/basic/cache/get-code',
+    method: 'post'
+  })
+}
+
+export function cacheDelete(id) { // 删除缓存区信息单条数据
+  return request({
+    url: '/basic/cache/delete',
+    method: 'post',
+    data: { id }
+  })
+}
diff --git a/src/api/basicData/Cache/location.js b/src/api/basicData/Cache/location.js
new file mode 100644
index 0000000..908ace1
--- /dev/null
+++ b/src/api/basicData/Cache/location.js
@@ -0,0 +1,55 @@
+/*
+ * @Author: zwq
+ * @Date: 2020-12-29 16:00:14
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-01-28 09:38:31
+ * @Description:
+ */
+import request from '@/utils/request'
+
+export function locationList(data) { // 获取库位信息列表
+  return request({
+    url: '/basic/stock/page',
+    method: 'post',
+    data
+  })
+}
+
+export function locationDetail(id) { // 获取库位信息单条数据
+  return request({
+    url: '/basic/stock/get',
+    method: 'post',
+    data: { id }
+  })
+}
+
+export function locationUpdate(data) { // 更新库位信息单条数据
+  return request({
+    url: '/basic/stock/update',
+    method: 'post',
+    data
+  })
+}
+
+export function locationAdd(data) { // 新增库位信息单条数据
+  return request({
+    url: '/basic/stock/add',
+    method: 'post',
+    data
+  })
+}
+
+export function locationCode() { // 获取库位信息code
+  return request({
+    url: '/basic/stock/get-code',
+    method: 'post'
+  })
+}
+
+export function locationDelete(id) { // 删除库位信息单条数据
+  return request({
+    url: '/basic/stock/delete',
+    method: 'post',
+    data: { id }
+  })
+}
diff --git a/src/api/basicData/Cache/shelf.js b/src/api/basicData/Cache/shelf.js
new file mode 100644
index 0000000..e1ceb3a
--- /dev/null
+++ b/src/api/basicData/Cache/shelf.js
@@ -0,0 +1,55 @@
+/*
+ * @Author: zwq
+ * @Date: 2020-12-29 16:00:14
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-25 09:28:58
+ * @Description:
+ */
+import request from '@/utils/request'
+
+export function shelfList(data) { // 获取货架信息列表
+  return request({
+    url: '/basic/shelf/page',
+    method: 'post',
+    data
+  })
+}
+
+export function shelfDetail(id) { // 获取货架信息单条数据
+  return request({
+    url: '/basic/shelf/get',
+    method: 'post',
+    data: { id }
+  })
+}
+
+export function shelfUpdate(data) { // 更新货架信息单条数据
+  return request({
+    url: '/basic/shelf/update',
+    method: 'post',
+    data
+  })
+}
+
+export function shelfAdd(data) { // 新增货架信息单条数据
+  return request({
+    url: '/basic/shelf/add',
+    method: 'post',
+    data
+  })
+}
+
+export function shelfCode() { // 获取货架信息code
+  return request({
+    url: '/basic/shelf/get-code',
+    method: 'post'
+  })
+}
+
+export function shelfDelete(id) { // 删除货架信息单条数据
+  return request({
+    url: '/basic/shelf/delete',
+    method: 'post',
+    data: { id }
+  })
+}
diff --git a/src/api/basicData/Cache/storageBox.js b/src/api/basicData/Cache/storageBox.js
new file mode 100644
index 0000000..b49dfc0
--- /dev/null
+++ b/src/api/basicData/Cache/storageBox.js
@@ -0,0 +1,70 @@
+/*
+ * @Author: zwq
+ * @Date: 2020-12-29 16:00:14
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-07-21 14:29:10
+ * @Description:
+ */
+import request from '@/utils/request'
+
+export function storageBoxList(data) { // 获取存储箱列表
+  return request({
+    url: '/basic/storage-tank/page',
+    method: 'post',
+    data
+  })
+}
+
+export function storageBoxDetail(id) { // 获取存储箱单条数据
+  return request({
+    url: '/basic/storage-tank/get',
+    method: 'post',
+    data: { id }
+  })
+}
+
+export function storageBoxUpdate(data) { // 更新存储箱单条数据
+  return request({
+    url: '/basic/storage-tank/update',
+    method: 'post',
+    data
+  })
+}
+
+export function storageBoxAdd(data) { // 新增存储箱单条数据
+  return request({
+    url: '/basic/storage-tank/add',
+    method: 'post',
+    data
+  })
+}
+
+export function storageBoxCode() { // 获取存储箱code
+  return request({
+    url: '/basic/storage-tank/get-code',
+    method: 'post'
+  })
+}
+
+export function storageBoxDelete(id) { // 删除存储箱单条数据
+  return request({
+    url: '/basic/storage-tank/delete',
+    method: 'post',
+    data: { id }
+  })
+}
+
+export function PositionDetailInfoAdd(data) { // 新增存储箱地址单条数据
+  return request({
+    url: '/basic/storage-tank-site/add',
+    method: 'post',
+    data
+  })
+}
+export function PositionDetailInfoList(data) { // 获取存储箱地址列表
+  return request({
+    url: '/basic/storage-tank-site/page',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/api/basicData/CodeRules.js b/src/api/basicData/CodeRules.js
new file mode 100644
index 0000000..f14d0e4
--- /dev/null
+++ b/src/api/basicData/CodeRules.js
@@ -0,0 +1,55 @@
+/*
+ * @Author: zwq
+ * @Date: 2020-12-29 16:00:14
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-01-29 10:38:02
+ * @Description:
+ */
+import request from '@/utils/request'
+
+export function CodeRulesList(data) { // 获取编码规则列表
+  return request({
+    url: '/basic/code-rule/page',
+    method: 'post',
+    data
+  })
+}
+
+export function CodeRulesDetail(id) { // 获取编码规则单条数据
+  return request({
+    url: '/basic/code-rule/get',
+    method: 'post',
+    data: { id }
+  })
+}
+
+export function CodeRulesUpdate(data) { // 更新编码规则单条数据
+  return request({
+    url: '/basic/code-rule/update',
+    method: 'post',
+    data
+  })
+}
+
+export function CodeRulesAdd(data) { // 新增编码规则单条数据
+  return request({
+    url: '/basic/code-rule/add',
+    method: 'post',
+    data
+  })
+}
+
+export function CodeRulesCode() { // 获取编码规则code
+  return request({
+    url: '/basic/code-rule/get-code',
+    method: 'post'
+  })
+}
+
+export function CodeRulesDelete(id) { // 删除编码规则单条数据
+  return request({
+    url: '/basic/code-rule/delete',
+    method: 'post',
+    data: { id }
+  })
+}
diff --git a/src/api/basicData/CodeRulesAttr.js b/src/api/basicData/CodeRulesAttr.js
new file mode 100644
index 0000000..afd8df9
--- /dev/null
+++ b/src/api/basicData/CodeRulesAttr.js
@@ -0,0 +1,55 @@
+/*
+ * @Author: zwq
+ * @Date: 2020-12-29 16:00:14
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-02-02 11:08:34
+ * @Description:
+ */
+import request from '@/utils/request'
+
+export function CodeRulesAttrList(data) { // 获取编码规则属性列表
+  return request({
+    url: '/basic/code-rule-arrt/page',
+    method: 'post',
+    data
+  })
+}
+
+export function CodeRulesAttrDetail(id) { // 获取编码规则属性单条数据
+  return request({
+    url: '/basic/code-rule-arrt/get',
+    method: 'post',
+    data: { id }
+  })
+}
+
+export function CodeRulesAttrUpdate(data) { // 更新编码规则属性单条数据
+  return request({
+    url: '/basic/code-rule-arrt/update',
+    method: 'post',
+    data
+  })
+}
+
+export function CodeRulesAttrAdd(data) { // 新增编码规则属性单条数据
+  return request({
+    url: '/basic/code-rule-arrt/add',
+    method: 'post',
+    data
+  })
+}
+
+export function CodeRulesAttrCode() { // 获取编码规则属性code
+  return request({
+    url: '/basic/code-rule-arrt/get-code',
+    method: 'post'
+  })
+}
+
+export function CodeRulesAttrDelete(id) { // 删除编码规则属性单条数据
+  return request({
+    url: '/basic/code-rule-arrt/delete',
+    method: 'post',
+    data: { id }
+  })
+}
diff --git a/src/api/basicData/CustomerSupplier/customer.js b/src/api/basicData/CustomerSupplier/customer.js
new file mode 100644
index 0000000..0202646
--- /dev/null
+++ b/src/api/basicData/CustomerSupplier/customer.js
@@ -0,0 +1,55 @@
+/*
+ * @Author: zwq
+ * @Date: 2020-12-29 16:00:14
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-01-12 19:55:30
+ * @Description:
+ */
+import request from '@/utils/request'
+
+export function customerList(data) { // 获取客户列表
+  return request({
+    url: '/basic/customer/page',
+    method: 'post',
+    data
+  })
+}
+
+export function customerDetail(id) { // 获取客户单条数据
+  return request({
+    url: '/basic/customer/get',
+    method: 'post',
+    data: { id }
+  })
+}
+
+export function customerUpdate(data) { // 更新客户单条数据
+  return request({
+    url: '/basic/customer/update',
+    method: 'post',
+    data
+  })
+}
+
+export function customerAdd(data) { // 新增客户单条数据
+  return request({
+    url: '/basic/customer/add',
+    method: 'post',
+    data
+  })
+}
+
+export function customerCode() { // 获取客户code
+  return request({
+    url: '/basic/customer/get-code',
+    method: 'post'
+  })
+}
+
+export function customerDelete(id) { // 删除客户单条数据
+  return request({
+    url: '/basic/customer/delete',
+    method: 'post',
+    data: { id }
+  })
+}
diff --git a/src/api/basicData/CustomerSupplier/supplier.js b/src/api/basicData/CustomerSupplier/supplier.js
new file mode 100644
index 0000000..c3bbe71
--- /dev/null
+++ b/src/api/basicData/CustomerSupplier/supplier.js
@@ -0,0 +1,55 @@
+/*
+ * @Author: zwq
+ * @Date: 2020-12-29 16:00:14
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-01-12 19:56:00
+ * @Description:
+ */
+import request from '@/utils/request'
+
+export function supplierList(data) { // 获取供应商列表
+  return request({
+    url: '/basic/supplier/page',
+    method: 'post',
+    data
+  })
+}
+
+export function supplierDetail(id) { // 获取供应商单条数据
+  return request({
+    url: '/basic/supplier/get',
+    method: 'post',
+    data: { id }
+  })
+}
+
+export function supplierUpdate(data) { // 更新供应商单条数据
+  return request({
+    url: '/basic/supplier/update',
+    method: 'post',
+    data
+  })
+}
+
+export function supplierAdd(data) { // 新增供应商单条数据
+  return request({
+    url: '/basic/supplier/add',
+    method: 'post',
+    data
+  })
+}
+
+export function supplierCode() { // 获取供应商code
+  return request({
+    url: '/basic/supplier/get-code',
+    method: 'post'
+  })
+}
+
+export function supplierDelete(id) { // 删除供应商单条数据
+  return request({
+    url: '/basic/supplier/delete',
+    method: 'post',
+    data: { id }
+  })
+}
diff --git a/src/api/basicData/Equipment/equipmentAlarm.js b/src/api/basicData/Equipment/equipmentAlarm.js
new file mode 100644
index 0000000..b6c85d5
--- /dev/null
+++ b/src/api/basicData/Equipment/equipmentAlarm.js
@@ -0,0 +1,55 @@
+/*
+ * @Author: zwq
+ * @Date: 2020-12-29 16:00:14
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-12 15:40:20
+ * @Description:
+ */
+import request from '@/utils/request'
+
+export function equipmentAlarmList(data) { // 获取设备报警列表
+  return request({
+    url: '/basic/equipment-alarm/page',
+    method: 'post',
+    data
+  })
+}
+
+export function equipmentAlarmDetail(id) { // 获取设备报警单条数据
+  return request({
+    url: '/basic/equipment-alarm/get',
+    method: 'post',
+    data: { id }
+  })
+}
+
+export function equipmentAlarmUpdate(data) { // 更新设备报警单条数据
+  return request({
+    url: '/basic/equipment-alarm/update',
+    method: 'post',
+    data
+  })
+}
+
+export function equipmentAlarmAdd(data) { // 新增设备报警单条数据
+  return request({
+    url: '/basic/equipment-alarm/add',
+    method: 'post',
+    data
+  })
+}
+
+export function equipmentAlarmCode() { // 获取设备报警code
+  return request({
+    url: '/basic/equipment-alarm/get-code',
+    method: 'post'
+  })
+}
+
+export function equipmentAlarmDelete(id) { // 删除设备报警单条数据
+  return request({
+    url: '/basic/equipment-alarm/delete',
+    method: 'post',
+    data: { id }
+  })
+}
diff --git a/src/api/basicData/Equipment/equipmentAlarmAttr.js b/src/api/basicData/Equipment/equipmentAlarmAttr.js
new file mode 100644
index 0000000..c85a2fa
--- /dev/null
+++ b/src/api/basicData/Equipment/equipmentAlarmAttr.js
@@ -0,0 +1,55 @@
+/*
+ * @Author: zwq
+ * @Date: 2020-12-29 16:00:14
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-02-02 16:00:23
+ * @Description:
+ */
+import request from '@/utils/request'
+
+export function equipmentAlarmAttrList(data) { // 获取设备报警列表
+  return request({
+    url: '/basic/equipment-alarm-type/page',
+    method: 'post',
+    data
+  })
+}
+
+export function equipmentAlarmAttrDetail(id) { // 获取设备报警单条数据
+  return request({
+    url: '/basic/equipment-alarm-type/get',
+    method: 'post',
+    data: { id }
+  })
+}
+
+export function equipmentAlarmAttrUpdate(data) { // 更新设备报警单条数据
+  return request({
+    url: '/basic/equipment-alarm-type/update',
+    method: 'post',
+    data
+  })
+}
+
+export function equipmentAlarmAttrAdd(data) { // 新增设备报警单条数据
+  return request({
+    url: '/basic/equipment-alarm-type/add',
+    method: 'post',
+    data
+  })
+}
+
+export function equipmentAlarmAttrCode() { // 获取设备报警code
+  return request({
+    url: '/basic/equipment-alarm-type/get-code',
+    method: 'post'
+  })
+}
+
+export function equipmentAlarmAttrDelete(id) { // 删除设备报警单条数据
+  return request({
+    url: '/basic/equipment-alarm-type/delete',
+    method: 'post',
+    data: { id }
+  })
+}
diff --git a/src/api/basicData/Equipment/equipmentDetectArea.js b/src/api/basicData/Equipment/equipmentDetectArea.js
new file mode 100644
index 0000000..8a4d3de
--- /dev/null
+++ b/src/api/basicData/Equipment/equipmentDetectArea.js
@@ -0,0 +1,63 @@
+/*
+ * @Author: zwq
+ * @Date: 2021-01-29 09:39:04
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-06-10 15:22:55
+ * @Description:
+ */
+
+import request from '@/utils/request'
+
+export function equipmentDetectAreaList(data) { // 获取设备区域列表
+  return request({
+    url: '/basic/detect-distribution-area/page',
+    method: 'post',
+    data
+  })
+}
+
+export function equipmentDetectTreeList() { // 获取检测设备树形图
+  return request({
+    url: '/basic/detect-distribution-area/detect-area',
+    method: 'post'
+  })
+}
+
+export function equipmentDetectAreaDetail(id) { // 获取设备区域单条数据
+  return request({
+    url: '/basic/detect-distribution-area/get',
+    method: 'post',
+    data: { id }
+  })
+}
+
+export function equipmentDetectAreaUpdate(data) { // 更新设备区域单条数据
+  return request({
+    url: '/basic/detect-distribution-area/update',
+    method: 'post',
+    data
+  })
+}
+
+export function equipmentDetectAreaAdd(data) { // 新增设备区域单条数据
+  return request({
+    url: '/basic/detect-distribution-area/add',
+    method: 'post',
+    data
+  })
+}
+
+export function equipmentDetectAreaCode() { // 获取设备区域code
+  return request({
+    url: '/basic/detect-distribution-area/get-code',
+    method: 'post'
+  })
+}
+
+export function equipmentDetectAreaDelete(id) { // 删除设备区域单条数据
+  return request({
+    url: '/basic/detect-distribution-area/delete',
+    method: 'post',
+    data: { id }
+  })
+}
diff --git a/src/api/basicData/Equipment/equipmentDetectAreaAttr.js b/src/api/basicData/Equipment/equipmentDetectAreaAttr.js
new file mode 100644
index 0000000..3590144
--- /dev/null
+++ b/src/api/basicData/Equipment/equipmentDetectAreaAttr.js
@@ -0,0 +1,56 @@
+/*
+ * @Author: zwq
+ * @Date: 2021-01-29 09:39:04
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-05-28 09:44:01
+ * @Description:
+ */
+
+import request from '@/utils/request'
+
+export function equipmentDetectAreaAttrList(data) { // 获取设备关联列表
+  return request({
+    url: '/basic/detect-equ-area-re/page',
+    method: 'post',
+    data
+  })
+}
+
+export function equipmentDetectAreaAttrDetail(id) { // 获取设备关联单条数据
+  return request({
+    url: '/basic/detect-equ-area-re/get',
+    method: 'post',
+    data: { id }
+  })
+}
+
+export function equipmentDetectAreaAttrUpdate(data) { // 更新设备关联单条数据
+  return request({
+    url: '/basic/detect-equ-area-re/update',
+    method: 'post',
+    data
+  })
+}
+
+export function equipmentDetectAreaAttrAdd(data) { // 新增设备关联单条数据
+  return request({
+    url: '/basic/detect-equ-area-re/add',
+    method: 'post',
+    data
+  })
+}
+
+export function equipmentDetectAreaAttrCode() { // 获取设备关联code
+  return request({
+    url: '/basic/detect-equ-area-re/get-code',
+    method: 'post'
+  })
+}
+
+export function equipmentDetectAreaAttrDelete(id) { // 删除设备关联单条数据
+  return request({
+    url: '/basic/detect-equ-area-re/delete',
+    method: 'post',
+    data: { id }
+  })
+}
diff --git a/src/api/basicData/Equipment/equipmentDetectAreaSystem.js b/src/api/basicData/Equipment/equipmentDetectAreaSystem.js
new file mode 100644
index 0000000..66ab4e6
--- /dev/null
+++ b/src/api/basicData/Equipment/equipmentDetectAreaSystem.js
@@ -0,0 +1,56 @@
+/*
+ * @Author: zwq
+ * @Date: 2021-01-29 09:39:04
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-05-21 10:26:40
+ * @Description:
+ */
+
+import request from '@/utils/request'
+
+export function equipmentDetectAreaSystemList(data) { // 获取设备关联列表
+  return request({
+    url: '/basic/detect-area-system/page',
+    method: 'post',
+    data
+  })
+}
+
+export function equipmentDetectAreaSystemDetail(id) { // 获取设备关联单条数据
+  return request({
+    url: '/basic/detect-area-system/get',
+    method: 'post',
+    data: { id }
+  })
+}
+
+export function equipmentDetectAreaSystemUpdate(data) { // 更新设备关联单条数据
+  return request({
+    url: '/basic/detect-area-system/update',
+    method: 'post',
+    data
+  })
+}
+
+export function equipmentDetectAreaSystemAdd(data) { // 新增设备关联单条数据
+  return request({
+    url: '/basic/detect-area-system/add',
+    method: 'post',
+    data
+  })
+}
+
+export function equipmentDetectAreaSystemCode() { // 获取设备关联code
+  return request({
+    url: '/basic/detect-area-system/get-code',
+    method: 'post'
+  })
+}
+
+export function equipmentDetectAreaSystemDelete(id) { // 删除设备关联单条数据
+  return request({
+    url: '/basic/detect-area-system/delete',
+    method: 'post',
+    data: { id }
+  })
+}
diff --git a/src/api/basicData/Equipment/equipmentDetectAreaSystemAttr.js b/src/api/basicData/Equipment/equipmentDetectAreaSystemAttr.js
new file mode 100644
index 0000000..36adb70
--- /dev/null
+++ b/src/api/basicData/Equipment/equipmentDetectAreaSystemAttr.js
@@ -0,0 +1,56 @@
+/*
+ * @Author: zwq
+ * @Date: 2021-01-29 09:39:04
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-05-28 10:47:41
+ * @Description:
+ */
+
+import request from '@/utils/request'
+
+export function DetectAreaSystemAttrList(data) { // 获取设备关联列表
+  return request({
+    url: '/basic/detect-equipment-area/page',
+    method: 'post',
+    data
+  })
+}
+
+export function DetectAreaSystemAttrDetail(id) { // 获取设备关联单条数据
+  return request({
+    url: '/basic/detect-equipment-area/get',
+    method: 'post',
+    data: { id }
+  })
+}
+
+export function DetectAreaSystemAttrUpdate(data) { // 更新设备关联单条数据
+  return request({
+    url: '/basic/detect-equipment-area/update',
+    method: 'post',
+    data
+  })
+}
+
+export function DetectAreaSystemAttrAdd(data) { // 新增设备关联单条数据
+  return request({
+    url: '/basic/detect-equipment-area/add',
+    method: 'post',
+    data
+  })
+}
+
+export function DetectAreaSystemAttrCode() { // 获取设备关联code
+  return request({
+    url: '/basic/detect-equipment-area/get-code',
+    method: 'post'
+  })
+}
+
+export function DetectAreaSystemAttrDelete(id) { // 删除设备关联单条数据
+  return request({
+    url: '/basic/detect-equipment-area/delete',
+    method: 'post',
+    data: { id }
+  })
+}
diff --git a/src/api/basicData/Equipment/equipmentDetectParam.js b/src/api/basicData/Equipment/equipmentDetectParam.js
new file mode 100644
index 0000000..f2a1373
--- /dev/null
+++ b/src/api/basicData/Equipment/equipmentDetectParam.js
@@ -0,0 +1,56 @@
+/*
+ * @Author: zwq
+ * @Date: 2021-01-29 09:39:04
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-04-08 15:56:09
+ * @Description:
+ */
+
+import request from '@/utils/request'
+
+export function equipmentDetectParamList(data) { // 获取设备参数列表
+  return request({
+    url: '/basic/detect-equipment-param/page',
+    method: 'post',
+    data
+  })
+}
+
+export function equipmentDetectParamDetail(id) { // 获取设备参数单条数据
+  return request({
+    url: '/basic/detect-equipment-param/get',
+    method: 'post',
+    data: { id }
+  })
+}
+
+export function equipmentDetectParamUpdate(data) { // 更新设备参数单条数据
+  return request({
+    url: '/basic/detect-equipment-param/update',
+    method: 'post',
+    data
+  })
+}
+
+export function equipmentDetectParamAdd(data) { // 新增设备参数单条数据
+  return request({
+    url: '/basic/detect-equipment-param/add',
+    method: 'post',
+    data
+  })
+}
+
+export function equipmentDetectParamCode() { // 获取设备参数code
+  return request({
+    url: '/basic/detect-equipment-param/get-code',
+    method: 'post'
+  })
+}
+
+export function equipmentDetectParamDelete(id) { // 删除设备参数单条数据
+  return request({
+    url: '/basic/detect-equipment-param/delete',
+    method: 'post',
+    data: { id }
+  })
+}
diff --git a/src/api/basicData/Equipment/equipmentDetectSystem.js b/src/api/basicData/Equipment/equipmentDetectSystem.js
new file mode 100644
index 0000000..4be975f
--- /dev/null
+++ b/src/api/basicData/Equipment/equipmentDetectSystem.js
@@ -0,0 +1,55 @@
+/*
+ * @Author: zwq
+ * @Date: 2020-12-29 16:00:14
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-05-21 10:03:53
+ * @Description:
+ */
+import request from '@/utils/request'
+
+export function equipmentDetectSystemList(data) { // 获取检测系统列表
+  return request({
+    url: '/basic/detect-system/page',
+    method: 'post',
+    data
+  })
+}
+
+export function equipmentDetectSystemDetail(id) { // 获取检测系统单条数据
+  return request({
+    url: '/basic/detect-system/get',
+    method: 'post',
+    data: { id }
+  })
+}
+
+export function equipmentDetectSystemUpdate(data) { // 更新检测系统单条数据
+  return request({
+    url: '/basic/detect-system/update',
+    method: 'post',
+    data
+  })
+}
+
+export function equipmentDetectSystemAdd(data) { // 新增检测系统单条数据
+  return request({
+    url: '/basic/detect-system/add',
+    method: 'post',
+    data
+  })
+}
+
+export function equipmentDetectSystemCode() { // 获取检测系统code
+  return request({
+    url: '/basic/detect-system/get-code',
+    method: 'post'
+  })
+}
+
+export function equipmentDetectSystemDelete(id) { // 删除检测系统单条数据
+  return request({
+    url: '/basic/detect-system/delete',
+    method: 'post',
+    data: { id }
+  })
+}
diff --git a/src/api/basicData/Equipment/equipmentGroup.js b/src/api/basicData/Equipment/equipmentGroup.js
new file mode 100644
index 0000000..360fd86
--- /dev/null
+++ b/src/api/basicData/Equipment/equipmentGroup.js
@@ -0,0 +1,57 @@
+/*
+ * @Author: zwq
+ * @Date: 2021-01-29 09:39:04
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-05-13 10:34:03
+ * @Description:
+ */
+
+import request from '@/utils/request'
+
+export function equipmentGroupList(data) { // 获取设备分组列表
+  return request({
+    url: '/equipment/equipment-group/findAll',
+    method: 'post',
+    data
+  })
+}
+
+export function equipmentGroupDetail(id) { // 获取设备分组列表
+  return request({
+    url: '/equipment/equipment-group/findById',
+    method: 'post',
+    data: { id }
+  })
+}
+
+export function equipmentGroupUpdate(data) { // 更新设备分组单条数据
+  return request({
+    url: '/equipment/equipment-group/update',
+    method: 'post',
+    data
+  })
+}
+
+export function equipmentGroupAdd(data) { // 新增设备分组单条数据
+  return request({
+    url: '/equipment/equipment-group/create',
+    method: 'post',
+    data
+  })
+}
+
+export function equipmentGroupGetCode(data) { // 获取随机生成的设备编码
+  return request({
+    url: '/equipment/equipment-group/getCode',
+    method: 'post',
+    data
+  })
+}
+
+export function equipmentGroupDelete(id) { // 删除设备分组单条数据
+  return request({
+    url: '/equipment/equipment-group/delete',
+    method: 'post',
+    data: { id }
+  })
+}
diff --git a/src/api/basicData/Equipment/equipmentInfo.js b/src/api/basicData/Equipment/equipmentInfo.js
new file mode 100644
index 0000000..7b40c7a
--- /dev/null
+++ b/src/api/basicData/Equipment/equipmentInfo.js
@@ -0,0 +1,71 @@
+/*
+ * @Author: zwq
+ * @Date: 2020-12-29 16:00:14
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-12 09:40:01
+ * @Description:
+ */
+import request from '@/utils/request'
+
+export function equipmentInfoList(data) { // 获取设备信息列表
+  return request({
+    url: '/basic/equipment/page',
+    method: 'post',
+    data
+  })
+}
+
+export function equipmentInfoDetail(id) { // 获取设备信息单条数据
+  return request({
+    url: '/basic/equipment/get',
+    method: 'post',
+    data: { id }
+  })
+}
+
+export function equipmentInfoUpdate(data) { // 更新设备信息单条数据
+  return request({
+    url: '/basic/equipment/update',
+    method: 'post',
+    data
+  })
+}
+
+export function equipmentInfoAdd(data) { // 新增设备信息单条数据
+  return request({
+    url: '/basic/equipment/add',
+    method: 'post',
+    data
+  })
+}
+
+export function equipmentInfoCode() { // 获取设备信息code
+  return request({
+    url: '/basic/equipment/get-code',
+    method: 'post'
+  })
+}
+
+export function equipmentInfoDelete(id) { // 删除设备信息单条数据
+  return request({
+    url: '/basic/equipment/delete',
+    method: 'post',
+    data: { id }
+  })
+}
+
+export function equipmentInfoFileAdd(data) { // 设备信息上传
+  return request({
+    url: '/basic/equipment-file/update-file',
+    method: 'post',
+    data
+  })
+}
+
+export function getEquipmentInfoFile(data) { // 设备信息下载
+  return request({
+    url: '/basic/equipment-file/get-by-param',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/api/basicData/Equipment/equipmentInfoAttr.js b/src/api/basicData/Equipment/equipmentInfoAttr.js
new file mode 100644
index 0000000..e7ed725
--- /dev/null
+++ b/src/api/basicData/Equipment/equipmentInfoAttr.js
@@ -0,0 +1,55 @@
+/*
+ * @Author: zwq
+ * @Date: 2020-12-29 16:00:14
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-01-20 12:00:52
+ * @Description:
+ */
+import request from '@/utils/request'
+
+export function equipmentInfoAttrList(data) { // 获取设备属性列表
+  return request({
+    url: '/basic/equipment-attr/page',
+    method: 'post',
+    data
+  })
+}
+
+export function equipmentInfoAttrDetail(id) { // 获取设备属性单条数据
+  return request({
+    url: '/basic/equipment-attr/get',
+    method: 'post',
+    data: { id }
+  })
+}
+
+export function equipmentInfoAttrUpdate(data) { // 更新设备属性单条数据
+  return request({
+    url: '/basic/equipment-attr/update',
+    method: 'post',
+    data
+  })
+}
+
+export function equipmentInfoAttrAdd(data) { // 新增设备属性单条数据
+  return request({
+    url: '/basic/equipment-attr/add',
+    method: 'post',
+    data
+  })
+}
+
+export function equipmentInfoAttrCode() { // 获取设备属性code
+  return request({
+    url: '/basic/equipment-attr/get-code',
+    method: 'post'
+  })
+}
+
+export function equipmentInfoAttrDelete(id) { // 删除设备属性单条数据
+  return request({
+    url: '/basic/equipment-attr/delete',
+    method: 'post',
+    data: { id }
+  })
+}
diff --git a/src/api/basicData/Equipment/equipmentLink.js b/src/api/basicData/Equipment/equipmentLink.js
new file mode 100644
index 0000000..8c413a9
--- /dev/null
+++ b/src/api/basicData/Equipment/equipmentLink.js
@@ -0,0 +1,72 @@
+/*
+ * @Author: zwq
+ * @Date: 2020-12-29 16:00:14
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-12 09:25:09
+ * @Description:
+ */
+import request from '@/utils/request'
+
+export function equipmentLinkList(data) { // 获取连线设备列表
+  return request({
+    url: '/basic/connecting-device/page',
+    method: 'post',
+    data
+  })
+}
+
+export function equipmentLinkDetail(id) { // 获取连线设备单条数据
+  return request({
+    url: '/basic/connecting-device/get',
+    method: 'post',
+    data: { id }
+  })
+}
+
+export function equipmentLinkUpdate(data) { // 更新连线设备单条数据
+  return request({
+    url: '/basic/connecting-device/update',
+    method: 'post',
+    data
+  })
+}
+
+export function equipmentLinkAdd(data) { // 新增连线设备单条数据
+  return request({
+    url: '/basic/connecting-device/add',
+    method: 'post',
+    data
+  })
+}
+
+export function equipmentLinkCode() { // 获取连线设备code
+  return request({
+    url: '/basic/connecting-device/get-code',
+    method: 'post'
+  })
+}
+
+export function equipmentLinkDelete(id) { // 删除连线设备单条数据
+  return request({
+    url: '/basic/connecting-device/delete',
+    method: 'post',
+    data: { id }
+  })
+}
+
+export function equipmentLinkFileAdd(data) { // 连线设备上传
+  return request({
+    url: '/basic/connecting-device-file/update-file',
+    method: 'post',
+    data
+  })
+}
+
+export function getEquipmentLinkFile(data) { // 连线设备下载
+  return request({
+    url: '/basic/connecting-device-file/get-by-param',
+    method: 'post',
+    data
+  })
+}
+
diff --git a/src/api/basicData/Equipment/equipmentLinkAttr.js b/src/api/basicData/Equipment/equipmentLinkAttr.js
new file mode 100644
index 0000000..39005a0
--- /dev/null
+++ b/src/api/basicData/Equipment/equipmentLinkAttr.js
@@ -0,0 +1,55 @@
+/*
+ * @Author: zwq
+ * @Date: 2020-12-29 16:00:14
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-01-20 10:35:56
+ * @Description:
+ */
+import request from '@/utils/request'
+
+export function equipmentLinkAttrList(data) { // 获取连线设备属性列表
+  return request({
+    url: '/basic/connecting-device-attr/page',
+    method: 'post',
+    data
+  })
+}
+
+export function equipmentLinkAttrDetail(id) { // 获取连线设备属性单条数据
+  return request({
+    url: '/basic/connecting-device-attr/get',
+    method: 'post',
+    data: { id }
+  })
+}
+
+export function equipmentLinkAttrUpdate(data) { // 更新连线设备属性单条数据
+  return request({
+    url: '/basic/connecting-device-attr/update',
+    method: 'post',
+    data
+  })
+}
+
+export function equipmentLinkAttrAdd(data) { // 新增连线设备属性单条数据
+  return request({
+    url: '/basic/connecting-device-attr/add',
+    method: 'post',
+    data
+  })
+}
+
+export function equipmentLinkAttrCode() { // 获取连线设备属性code
+  return request({
+    url: '/basic/connecting-device-attr/get-code',
+    method: 'post'
+  })
+}
+
+export function equipmentLinkAttrDelete(id) { // 删除连线设备属性单条数据
+  return request({
+    url: '/basic/connecting-device-attr/delete',
+    method: 'post',
+    data: { id }
+  })
+}
diff --git a/src/api/basicData/Equipment/equipmentType.js b/src/api/basicData/Equipment/equipmentType.js
new file mode 100644
index 0000000..3f075b7
--- /dev/null
+++ b/src/api/basicData/Equipment/equipmentType.js
@@ -0,0 +1,78 @@
+/*
+ * @Author: zwq
+ * @Date: 2020-12-29 16:00:14
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-11 18:56:39
+ * @Description:
+ */
+import request from '@/utils/request'
+
+export function equipmentTypeList(data) { // 获取设备类型列表
+  return request({
+    url: '/basic/equipment-type/page',
+    method: 'post',
+    data
+  })
+}
+
+export function equipmentTypeDetail(id) { // 获取设备类型单条数据
+  return request({
+    url: '/basic/equipment-type/get',
+    method: 'post',
+    data: { id }
+  })
+}
+
+export function equipmentTypeUpdate(data) { // 更新设备类型单条数据
+  return request({
+    url: '/basic/equipment-type/update',
+    method: 'post',
+    data
+  })
+}
+
+export function equipmentTypeAdd(data) { // 新增设备类型单条数据
+  return request({
+    url: '/basic/equipment-type/add',
+    method: 'post',
+    data
+  })
+}
+
+export function equipmentTypeCode() { // 获取设备类型code
+  return request({
+    url: '/basic/equipment-type/get-code',
+    method: 'post'
+  })
+}
+
+export function equipmentTypeDelete(id) { // 删除设备类型单条数据
+  return request({
+    url: '/basic/equipment-type/delete',
+    method: 'post',
+    data: { id }
+  })
+}
+
+export function equipmentTypeListAll() { // 获取全部设备类型层级关系
+  return request({
+    url: '/basic/equipment-type/list-all',
+    method: 'post'
+  })
+}
+
+export function equipmentTypeFileAdd(data) { // 新增设备类型上传
+  return request({
+    url: '/basic/equipment-type-file/update-file',
+    method: 'post',
+    data
+  })
+}
+
+export function getEquipmentTypeFile(data) { // 获取设备类型上传列表
+  return request({
+    url: '/basic/equipment-type-file/get-by-param',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/api/basicData/Equipment/maintenanceCycle.js b/src/api/basicData/Equipment/maintenanceCycle.js
new file mode 100644
index 0000000..a80957a
--- /dev/null
+++ b/src/api/basicData/Equipment/maintenanceCycle.js
@@ -0,0 +1,55 @@
+/*
+ * @Author: zwq
+ * @Date: 2020-12-29 16:00:14
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-01-19 19:59:16
+ * @Description:
+ */
+import request from '@/utils/request'
+
+export function maintenanceCycleList(data) { // 获取保养列表
+  return request({
+    url: '/basic/maintenance-period/page',
+    method: 'post',
+    data
+  })
+}
+
+export function maintenanceCycleDetail(id) { // 获取保养单条数据
+  return request({
+    url: '/basic/maintenance-period/get',
+    method: 'post',
+    data: { id }
+  })
+}
+
+export function maintenanceCycleUpdate(data) { // 更新保养单条数据
+  return request({
+    url: '/basic/maintenance-period/update',
+    method: 'post',
+    data
+  })
+}
+
+export function maintenanceCycleAdd(data) { // 新增保养单条数据
+  return request({
+    url: '/basic/maintenance-period/add',
+    method: 'post',
+    data
+  })
+}
+
+export function maintenanceCycleCode() { // 获取保养code
+  return request({
+    url: '/basic/maintenance-period/get-code',
+    method: 'post'
+  })
+}
+
+export function maintenanceCycleDelete(id) { // 删除保养单条数据
+  return request({
+    url: '/basic/maintenance-period/delete',
+    method: 'post',
+    data: { id }
+  })
+}
diff --git a/src/api/basicData/Equipment/maintenanceType.js b/src/api/basicData/Equipment/maintenanceType.js
new file mode 100644
index 0000000..b4a5855
--- /dev/null
+++ b/src/api/basicData/Equipment/maintenanceType.js
@@ -0,0 +1,55 @@
+/*
+ * @Author: zwq
+ * @Date: 2020-12-29 16:00:14
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-01-19 19:52:52
+ * @Description:
+ */
+import request from '@/utils/request'
+
+export function maintenanceTypeList(data) { // 获取维修列表
+  return request({
+    url: '/basic/maintenance-type/page',
+    method: 'post',
+    data
+  })
+}
+
+export function maintenanceTypeDetail(id) { // 获取维修单条数据
+  return request({
+    url: '/basic/maintenance-type/get',
+    method: 'post',
+    data: { id }
+  })
+}
+
+export function maintenanceTypeUpdate(data) { // 更新维修单条数据
+  return request({
+    url: '/basic/maintenance-type/update',
+    method: 'post',
+    data
+  })
+}
+
+export function maintenanceTypeAdd(data) { // 新增维修单条数据
+  return request({
+    url: '/basic/maintenance-type/add',
+    method: 'post',
+    data
+  })
+}
+
+export function maintenanceTypeCode() { // 获取维修code
+  return request({
+    url: '/basic/maintenance-type/get-code',
+    method: 'post'
+  })
+}
+
+export function maintenanceTypeDelete(id) { // 删除维修单条数据
+  return request({
+    url: '/basic/maintenance-type/delete',
+    method: 'post',
+    data: { id }
+  })
+}
diff --git a/src/api/basicData/Equipment/spareParts.js b/src/api/basicData/Equipment/spareParts.js
new file mode 100644
index 0000000..338b760
--- /dev/null
+++ b/src/api/basicData/Equipment/spareParts.js
@@ -0,0 +1,56 @@
+/*
+ * @Author: zwq
+ * @Date: 2021-01-29 09:39:04
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-01-29 09:40:21
+ * @Description:
+ */
+
+import request from '@/utils/request'
+
+export function sparePartsList(data) { // 获取备品备件列表
+  return request({
+    url: '/basic/tool-spare-part/page',
+    method: 'post',
+    data
+  })
+}
+
+export function sparePartsDetail(id) { // 获取备品备件单条数据
+  return request({
+    url: '/basic/tool-spare-part/get',
+    method: 'post',
+    data: { id }
+  })
+}
+
+export function sparePartsUpdate(data) { // 更新备品备件单条数据
+  return request({
+    url: '/basic/tool-spare-part/update',
+    method: 'post',
+    data
+  })
+}
+
+export function sparePartsAdd(data) { // 新增备品备件单条数据
+  return request({
+    url: '/basic/tool-spare-part/add',
+    method: 'post',
+    data
+  })
+}
+
+export function sparePartsCode() { // 获取备品备件code
+  return request({
+    url: '/basic/tool-spare-part/get-code',
+    method: 'post'
+  })
+}
+
+export function sparePartsDelete(id) { // 删除备品备件单条数据
+  return request({
+    url: '/basic/tool-spare-part/delete',
+    method: 'post',
+    data: { id }
+  })
+}
diff --git a/src/api/basicData/EquipmentScrapGrade.js b/src/api/basicData/EquipmentScrapGrade.js
new file mode 100644
index 0000000..5005c61
--- /dev/null
+++ b/src/api/basicData/EquipmentScrapGrade.js
@@ -0,0 +1,48 @@
+/*
+ * @Author: zwq
+ * @Date: 2020-12-29 16:00:14
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-07-06 11:10:22
+ * @Description:
+ */
+import request from '@/utils/request'
+
+export function EquipmentScrapGradeList(data) { // 获取废片等级列表
+  return request({
+    url: '/basic/equipment-scraps-grade/pageForEquipmentGrade',
+    method: 'post',
+    data
+  })
+}
+
+export function EquipmentScrapGradeDetail(id) { // 获取废片等级单条数据
+  return request({
+    url: '/basic/equipment-scraps-grade/get',
+    method: 'post',
+    data: { id }
+  })
+}
+
+export function EquipmentScrapGradeUpdate(data) { // 更新废片等级单条数据
+  return request({
+    url: '/basic/equipment-scraps-grade/update',
+    method: 'post',
+    data
+  })
+}
+
+export function EquipmentScrapGradeAdd(data) { // 新增废片等级单条数据
+  return request({
+    url: '/basic/equipment-scraps-grade/add',
+    method: 'post',
+    data
+  })
+}
+
+export function EquipmentScrapGradeDelete(id) { // 删除废片等级单条数据
+  return request({
+    url: '/basic/equipment-scraps-grade/delete',
+    method: 'post',
+    data: { id }
+  })
+}
diff --git a/src/api/basicData/FactoryManagement/factory.js b/src/api/basicData/FactoryManagement/factory.js
new file mode 100644
index 0000000..f4f7806
--- /dev/null
+++ b/src/api/basicData/FactoryManagement/factory.js
@@ -0,0 +1,58 @@
+/*
+ * @Author: zwq
+ * @Date: 2020-12-29 16:00:14
+ * @LastEditors: zwq
+ * @LastEditTime: 2020-12-30 11:54:24
+ * @Description:
+ */
+import request from '@/utils/request'
+
+export function factoryList(data) { // 获取工厂列表
+  return request({
+    url: '/basic/factory/page',
+    method: 'post',
+    data
+  })
+}
+
+export function factoryDetail(id) { // 获取工厂单条数据
+  const data = {
+    'id': id
+  }
+  return request({
+    url: '/basic/factory/get',
+    method: 'post',
+    data
+  })
+}
+
+export function factoryUpdate(data) { // 更新工厂单条数据
+  return request({
+    url: '/basic/factory/update',
+    method: 'post',
+    data
+  })
+}
+
+export function factoryAdd(data) { // 新增工厂单条数据
+  return request({
+    url: '/basic/factory/add',
+    method: 'post',
+    data
+  })
+}
+
+export function factoryCode() { // 获取工厂code
+  return request({
+    url: '/basic/factory/get-code',
+    method: 'post'
+  })
+}
+
+export function factoryDelete(id) { // 删除工厂单条数据
+  return request({
+    url: '/basic/factory/delete',
+    method: 'post',
+    data: { id }
+  })
+}
diff --git a/src/api/basicData/FactoryManagement/line.js b/src/api/basicData/FactoryManagement/line.js
new file mode 100644
index 0000000..e625382
--- /dev/null
+++ b/src/api/basicData/FactoryManagement/line.js
@@ -0,0 +1,55 @@
+/*
+ * @Author: zwq
+ * @Date: 2020-12-29 16:00:14
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-01-12 10:57:09
+ * @Description:
+ */
+import request from '@/utils/request'
+
+export function lineList(data) { // 获取产线列表
+  return request({
+    url: '/basic/production-line/page',
+    method: 'post',
+    data
+  })
+}
+
+export function lineDetail(id) { // 获取产线单条数据
+  return request({
+    url: '/basic/production-line/get',
+    method: 'post',
+    data: { id }
+  })
+}
+
+export function lineUpdate(data) { // 更新产线单条数据
+  return request({
+    url: '/basic/production-line/update',
+    method: 'post',
+    data
+  })
+}
+
+export function lineAdd(data) { // 新增产线单条数据
+  return request({
+    url: '/basic/production-line/add',
+    method: 'post',
+    data
+  })
+}
+
+export function lineCode() { // 获取产线code
+  return request({
+    url: '/basic/production-line/get-code',
+    method: 'post'
+  })
+}
+
+export function lineDelete(id) { // 删除产线单条数据
+  return request({
+    url: '/basic/production-line/delete',
+    method: 'post',
+    data: { id }
+  })
+}
diff --git a/src/api/basicData/FactoryManagement/section.js b/src/api/basicData/FactoryManagement/section.js
new file mode 100644
index 0000000..ced3dc5
--- /dev/null
+++ b/src/api/basicData/FactoryManagement/section.js
@@ -0,0 +1,55 @@
+/*
+ * @Author: zwq
+ * @Date: 2020-12-29 16:00:14
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-01-12 10:56:44
+ * @Description:
+ */
+import request from '@/utils/request'
+
+export function sectionList(data) { // 获取工段列表
+  return request({
+    url: '/basic/workshop-section/page',
+    method: 'post',
+    data
+  })
+}
+
+export function sectionDetail(id) { // 获取工段单条数据
+  return request({
+    url: '/basic/workshop-section/get',
+    method: 'post',
+    data: { id }
+  })
+}
+
+export function sectionUpdate(data) { // 更新工段单条数据
+  return request({
+    url: '/basic/workshop-section/update',
+    method: 'post',
+    data
+  })
+}
+
+export function sectionAdd(data) { // 新增工段单条数据
+  return request({
+    url: '/basic/workshop-section/add',
+    method: 'post',
+    data
+  })
+}
+
+export function sectionCode() { // 获取工段code
+  return request({
+    url: '/basic/workshop-section/get-code',
+    method: 'post'
+  })
+}
+
+export function sectionDelete(id) { // 删除工段单条数据
+  return request({
+    url: '/basic/workshop-section/delete',
+    method: 'post',
+    data: { id }
+  })
+}
diff --git a/src/api/basicData/GroupModule/group.js b/src/api/basicData/GroupModule/group.js
new file mode 100644
index 0000000..2da00f3
--- /dev/null
+++ b/src/api/basicData/GroupModule/group.js
@@ -0,0 +1,55 @@
+/*
+ * @Author: zwq
+ * @Date: 2020-12-29 16:00:14
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-01-12 15:38:59
+ * @Description:
+ */
+import request from '@/utils/request'
+
+export function groupList(data) { // 获取班组列表
+  return request({
+    url: '/basic/team/page',
+    method: 'post',
+    data
+  })
+}
+
+export function groupDetail(id) { // 获取班组单条数据
+  return request({
+    url: '/basic/team/get',
+    method: 'post',
+    data: { id }
+  })
+}
+
+export function groupUpdate(data) { // 更新班组单条数据
+  return request({
+    url: '/basic/team/update',
+    method: 'post',
+    data
+  })
+}
+
+export function groupAdd(data) { // 新增班组单条数据
+  return request({
+    url: '/basic/team/add',
+    method: 'post',
+    data
+  })
+}
+
+export function groupCode() { // 获取班组code
+  return request({
+    url: '/basic/team/get-code',
+    method: 'post'
+  })
+}
+
+export function groupDelete(id) { // 删除班组单条数据
+  return request({
+    url: '/basic/team/delete',
+    method: 'post',
+    data: { id }
+  })
+}
diff --git a/src/api/basicData/GroupModule/groupAttr.js b/src/api/basicData/GroupModule/groupAttr.js
new file mode 100644
index 0000000..9c73527
--- /dev/null
+++ b/src/api/basicData/GroupModule/groupAttr.js
@@ -0,0 +1,55 @@
+/*
+ * @Author: zwq
+ * @Date: 2020-12-29 16:00:14
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-02-08 09:51:54
+ * @Description:
+ */
+import request from '@/utils/request'
+
+export function groupAttrList(data) { // 获取班组列表
+  return request({
+    url: '/basic/team-det/page',
+    method: 'post',
+    data
+  })
+}
+
+export function groupAttrDetail(id) { // 获取班组单条数据
+  return request({
+    url: '/basic/team-det/get',
+    method: 'post',
+    data: { id }
+  })
+}
+
+export function groupAttrUpdate(data) { // 更新班组单条数据
+  return request({
+    url: '/basic/team-det/update',
+    method: 'post',
+    data
+  })
+}
+
+export function groupAttrAdd(data) { // 新增班组单条数据
+  return request({
+    url: '/basic/team-det/add',
+    method: 'post',
+    data
+  })
+}
+
+export function groupAttrCode() { // 获取班组code
+  return request({
+    url: '/basic/team-det/get-code',
+    method: 'post'
+  })
+}
+
+export function groupAttrDelete(data) { // 删除班组单条数据
+  return request({
+    url: '/basic/team-det/delete',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/api/basicData/GroupModule/major.js b/src/api/basicData/GroupModule/major.js
new file mode 100644
index 0000000..2cb7354
--- /dev/null
+++ b/src/api/basicData/GroupModule/major.js
@@ -0,0 +1,55 @@
+/*
+ * @Author: zwq
+ * @Date: 2020-12-29 16:00:14
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-01-12 16:38:42
+ * @Description:
+ */
+import request from '@/utils/request'
+
+export function majorList(data) { // 获取专业列表
+  return request({
+    url: '/basic/major/page',
+    method: 'post',
+    data
+  })
+}
+
+export function majorDetail(id) { // 获取专业单条数据
+  return request({
+    url: '/basic/major/get',
+    method: 'post',
+    data: { id }
+  })
+}
+
+export function majorUpdate(data) { // 更新专业单条数据
+  return request({
+    url: '/basic/major/update',
+    method: 'post',
+    data
+  })
+}
+
+export function majorAdd(data) { // 新增专业单条数据
+  return request({
+    url: '/basic/major/add',
+    method: 'post',
+    data
+  })
+}
+
+export function majorCode() { // 获取专业code
+  return request({
+    url: '/basic/major/get-code',
+    method: 'post'
+  })
+}
+
+export function majorDelete(id) { // 删除专业单条数据
+  return request({
+    url: '/basic/major/delete',
+    method: 'post',
+    data: { id }
+  })
+}
diff --git a/src/api/basicData/GroupModule/staff.js b/src/api/basicData/GroupModule/staff.js
new file mode 100644
index 0000000..aeccfd4
--- /dev/null
+++ b/src/api/basicData/GroupModule/staff.js
@@ -0,0 +1,75 @@
+/*
+ * @Author: zwq
+ * @Date: 2020-12-29 16:00:14
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-04-17 16:04:51
+ * @Description:
+ */
+import request from '@/utils/request'
+
+export function staffList(data) { // 获取员工列表
+  return request({
+    url: '/basic/worker/page',
+    method: 'post',
+    data
+  })
+}
+
+export function staffDetail(id) { // 获取员工单条数据
+  return request({
+    url: '/basic/worker/get',
+    method: 'post',
+    data: { id }
+  })
+}
+
+export function staffUpdate(data) { // 更新员工单条数据
+  return request({
+    url: '/basic/worker/update',
+    method: 'post',
+    data
+  })
+}
+
+export function staffAdd(data) { // 新增员工单条数据
+  return request({
+    url: '/basic/worker/add',
+    method: 'post',
+    data
+  })
+}
+
+export function staffCode() { // 获取员工code
+  return request({
+    url: '/basic/worker/get-code',
+    method: 'post'
+  })
+}
+
+export function staffDelete(id) { // 删除员工单条数据
+  return request({
+    url: '/basic/worker/delete',
+    method: 'post',
+    data: { id }
+  })
+}
+
+export function workerList(data) { // 添加组员列表
+  return request({
+    url: '/basic/team-det/workerList',
+    method: 'post',
+    data
+  })
+}
+
+export function getRoleList() {
+  return request({
+    url: '/basic/platform-dict/selectPlatformDictDataListByPage',
+    method: 'post',
+    data: {
+      dictTypeId: '1383318968677273601',
+      current: 1,
+      size: 999
+    }
+  })
+}
diff --git a/src/api/basicData/Materials/material.js b/src/api/basicData/Materials/material.js
new file mode 100644
index 0000000..1816509
--- /dev/null
+++ b/src/api/basicData/Materials/material.js
@@ -0,0 +1,55 @@
+/*
+ * @Author: zwq
+ * @Date: 2020-12-29 16:00:14
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-01-15 16:03:31
+ * @Description:
+ */
+import request from '@/utils/request'
+
+export function materialList(data) { // 获取物料信息列表
+  return request({
+    url: '/basic/material/page',
+    method: 'post',
+    data
+  })
+}
+
+export function materialDetail(id) { // 获取物料信息单条数据
+  return request({
+    url: '/basic/material/get',
+    method: 'post',
+    data: { id }
+  })
+}
+
+export function materialUpdate(data) { // 更新物料信息单条数据
+  return request({
+    url: '/basic/material/update',
+    method: 'post',
+    data
+  })
+}
+
+export function materialAdd(data) { // 新增物料信息单条数据
+  return request({
+    url: '/basic/material/add',
+    method: 'post',
+    data
+  })
+}
+
+export function materialCode() { // 获取物料信息code
+  return request({
+    url: '/basic/material/get-code',
+    method: 'post'
+  })
+}
+
+export function materialDelete(id) { // 删除物料信息单条数据
+  return request({
+    url: '/basic/material/delete',
+    method: 'post',
+    data: { id }
+  })
+}
diff --git a/src/api/basicData/Materials/materialAttr.js b/src/api/basicData/Materials/materialAttr.js
new file mode 100644
index 0000000..c68ae2e
--- /dev/null
+++ b/src/api/basicData/Materials/materialAttr.js
@@ -0,0 +1,55 @@
+/*
+ * @Author: zwq
+ * @Date: 2020-12-29 16:00:14
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-01-16 12:09:29
+ * @Description:
+ */
+import request from '@/utils/request'
+
+export function materialAttrList(data) { // 获取物料属性列表
+  return request({
+    url: '/basic/material-attr/page',
+    method: 'post',
+    data
+  })
+}
+
+export function materialAttrDetail(id) { // 获取物料属性单条数据
+  return request({
+    url: '/basic/material-attr/get',
+    method: 'post',
+    data: { id }
+  })
+}
+
+export function materialAttrUpdate(data) { // 更新物料属性单条数据
+  return request({
+    url: '/basic/material-attr/update',
+    method: 'post',
+    data
+  })
+}
+
+export function materialAttrAdd(data) { // 新增物料属性单条数据
+  return request({
+    url: '/basic/material-attr/add',
+    method: 'post',
+    data
+  })
+}
+
+export function materialAttrCode() { // 获取物料属性code
+  return request({
+    url: '/basic/material-attr/get-code',
+    method: 'post'
+  })
+}
+
+export function materialAttrDelete(id) { // 删除物料属性单条数据
+  return request({
+    url: '/basic/material-attr/delete',
+    method: 'post',
+    data: { id }
+  })
+}
diff --git a/src/api/basicData/Materials/materialsType.js b/src/api/basicData/Materials/materialsType.js
new file mode 100644
index 0000000..37c220c
--- /dev/null
+++ b/src/api/basicData/Materials/materialsType.js
@@ -0,0 +1,55 @@
+/*
+ * @Author: zwq
+ * @Date: 2020-12-29 16:00:14
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-01-16 11:52:14
+ * @Description:
+ */
+import request from '@/utils/request'
+
+export function materialsTypeList(data) { // 获取物料类型列表
+  return request({
+    url: '/basic/material-type/page',
+    method: 'post',
+    data
+  })
+}
+
+export function materialsTypeDetail(id) { // 获取物料类型单条数据
+  return request({
+    url: '/basic/material-type/get',
+    method: 'post',
+    data: { id }
+  })
+}
+
+export function materialsTypeUpdate(data) { // 更新物料类型单条数据
+  return request({
+    url: '/basic/material-type/update',
+    method: 'post',
+    data
+  })
+}
+
+export function materialsTypeAdd(data) { // 新增物料类型单条数据
+  return request({
+    url: '/basic/material-type/add',
+    method: 'post',
+    data
+  })
+}
+
+export function materialsTypeCode() { // 获取物料类型code
+  return request({
+    url: '/basic/material-type/get-code',
+    method: 'post'
+  })
+}
+
+export function materialsTypeDelete(id) { // 删除物料类型单条数据
+  return request({
+    url: '/basic/material-type/delete',
+    method: 'post',
+    data: { id }
+  })
+}
diff --git a/src/api/basicData/ProductAttr.js b/src/api/basicData/ProductAttr.js
new file mode 100644
index 0000000..2caf4ef
--- /dev/null
+++ b/src/api/basicData/ProductAttr.js
@@ -0,0 +1,55 @@
+/*
+ * @Author: zwq
+ * @Date: 2020-12-29 16:00:14
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-01-29 10:47:49
+ * @Description:
+ */
+import request from '@/utils/request'
+
+export function productList(data) { // 获取产品信息列表
+  return request({
+    url: '/basic/product-arrt/page',
+    method: 'post',
+    data
+  })
+}
+
+export function productDetail(id) { // 获取产品信息单条数据
+  return request({
+    url: '/basic/product-arrt/get',
+    method: 'post',
+    data: { id }
+  })
+}
+
+export function productUpdate(data) { // 更新产品信息单条数据
+  return request({
+    url: '/basic/product-arrt/update',
+    method: 'post',
+    data
+  })
+}
+
+export function productAdd(data) { // 新增产品信息单条数据
+  return request({
+    url: '/basic/product-arrt/add',
+    method: 'post',
+    data
+  })
+}
+
+export function productCode() { // 获取产品信息code
+  return request({
+    url: '/basic/product-arrt/get-code',
+    method: 'post'
+  })
+}
+
+export function productDelete(id) { // 删除产品信息单条数据
+  return request({
+    url: '/basic/product-arrt/delete',
+    method: 'post',
+    data: { id }
+  })
+}
diff --git a/src/api/basicData/ProductPool.js b/src/api/basicData/ProductPool.js
new file mode 100644
index 0000000..9aafead
--- /dev/null
+++ b/src/api/basicData/ProductPool.js
@@ -0,0 +1,62 @@
+/*
+ * @Author: zwq
+ * @Date: 2020-12-29 16:00:14
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-01-25 09:59:10
+ * @Description:
+ */
+import request from '@/utils/request'
+
+export function ProductPoolList(data) { // 获取产品池列表
+  return request({
+    url: '/basic/product/page',
+    method: 'post',
+    data
+  })
+}
+
+export function ProductPoolDetail(id) { // 获取产品池单条数据
+  return request({
+    url: '/basic/product/get',
+    method: 'post',
+    data: { id }
+  })
+}
+
+export function ProductPoolUpdate(data) { // 更新产品池单条数据
+  return request({
+    url: '/basic/product/update',
+    method: 'post',
+    data
+  })
+}
+
+export function ProductPoolAdd(data) { // 新增产品池单条数据
+  return request({
+    url: '/basic/product/add',
+    method: 'post',
+    data
+  })
+}
+
+export function ProductPoolCode() { // 获取产品池code
+  return request({
+    url: '/basic/product/get-code',
+    method: 'post'
+  })
+}
+
+export function ProductPoolDelete(id) { // 删除产品池单条数据
+  return request({
+    url: '/basic/product/delete',
+    method: 'post',
+    data: { id }
+  })
+}
+
+export function ProductPoolUnit() { // 获取产品池单位数据
+  return request({
+    url: '/common/data-dictionary/sysDictDataList',
+    method: 'post'
+  })
+}
diff --git a/src/api/basicData/Scrap/ScrapInfo.js b/src/api/basicData/Scrap/ScrapInfo.js
new file mode 100644
index 0000000..6942d0b
--- /dev/null
+++ b/src/api/basicData/Scrap/ScrapInfo.js
@@ -0,0 +1,58 @@
+/*
+ * @Author: zwq
+ * @Date: 2020-12-29 16:00:14
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-10 14:25:18
+ * @Description:
+ */
+import request from '@/utils/request'
+
+export function scrapInfoList(data) { // 获取报废信息列表
+  return request({
+    url: '/basic/scrap-information/page',
+    method: 'post',
+    data
+  })
+}
+
+export function scrapInfoDetail(id) { // 获取报废信息单条数据
+  const data = {
+    'id': id
+  }
+  return request({
+    url: '/basic/scrap-information/get',
+    method: 'post',
+    data
+  })
+}
+
+export function scrapInfoUpdate(data) { // 更新报废信息单条数据
+  return request({
+    url: '/basic/scrap-information/update',
+    method: 'post',
+    data
+  })
+}
+
+export function scrapInfoAdd(data) { // 新增报废信息单条数据
+  return request({
+    url: '/basic/scrap-information/add',
+    method: 'post',
+    data
+  })
+}
+
+export function scrapInfoCode() { // 获取报废信息code
+  return request({
+    url: '/basic/scrap-information/get-code',
+    method: 'post'
+  })
+}
+
+export function scrapInfoDelete(id) { // 删除报废信息单条数据
+  return request({
+    url: '/basic/scrap-information/delete',
+    method: 'post',
+    data: { id }
+  })
+}
diff --git a/src/api/basicData/Scrap/ScrapType.js b/src/api/basicData/Scrap/ScrapType.js
new file mode 100644
index 0000000..5a69925
--- /dev/null
+++ b/src/api/basicData/Scrap/ScrapType.js
@@ -0,0 +1,58 @@
+/*
+ * @Author: zwq
+ * @Date: 2020-12-29 16:00:14
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-10 14:25:59
+ * @Description:
+ */
+import request from '@/utils/request'
+
+export function scrapTypeList(data) { // 获取报废类型列表
+  return request({
+    url: '/basic/scrap-type-information/page',
+    method: 'post',
+    data
+  })
+}
+
+export function scrapTypeDetail(id) { // 获取报废类型单条数据
+  const data = {
+    'id': id
+  }
+  return request({
+    url: '/basic/scrap-type-information/get',
+    method: 'post',
+    data
+  })
+}
+
+export function scrapTypeUpdate(data) { // 更新报废类型单条数据
+  return request({
+    url: '/basic/scrap-type-information/update',
+    method: 'post',
+    data
+  })
+}
+
+export function scrapTypeAdd(data) { // 新增报废类型单条数据
+  return request({
+    url: '/basic/scrap-type-information/add',
+    method: 'post',
+    data
+  })
+}
+
+export function scrapTypeCode() { // 获取报废类型code
+  return request({
+    url: '/basic/scrap-type-information/get-code',
+    method: 'post'
+  })
+}
+
+export function scrapTypeDelete(id) { // 删除报废类型单条数据
+  return request({
+    url: '/basic/scrap-type-information/delete',
+    method: 'post',
+    data: { id }
+  })
+}
diff --git a/src/api/basicData/ScrapInfo.js b/src/api/basicData/ScrapInfo.js
new file mode 100644
index 0000000..f66ee27
--- /dev/null
+++ b/src/api/basicData/ScrapInfo.js
@@ -0,0 +1,55 @@
+/*
+ * @Author: zwq
+ * @Date: 2020-12-29 16:00:14
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-01-18 14:48:49
+ * @Description:
+ */
+import request from '@/utils/request'
+
+export function ScrapInfoList(data) { // 获取废品报废信息列表
+  return request({
+    url: '/basic/scrap/page',
+    method: 'post',
+    data
+  })
+}
+
+export function ScrapInfoDetail(id) { // 获取废品报废信息单条数据
+  return request({
+    url: '/basic/scrap/get',
+    method: 'post',
+    data: { id }
+  })
+}
+
+export function ScrapInfoUpdate(data) { // 更新废品报废信息单条数据
+  return request({
+    url: '/basic/scrap/update',
+    method: 'post',
+    data
+  })
+}
+
+export function ScrapInfoAdd(data) { // 新增废品报废信息单条数据
+  return request({
+    url: '/basic/scrap/add',
+    method: 'post',
+    data
+  })
+}
+
+export function ScrapInfoCode() { // 获取废品报废信息code
+  return request({
+    url: '/basic/scrap/get-code',
+    method: 'post'
+  })
+}
+
+export function ScrapInfoDelete(id) { // 删除废品报废信息单条数据
+  return request({
+    url: '/basic/scrap/delete',
+    method: 'post',
+    data: { id }
+  })
+}
diff --git a/src/api/basicData/StateConfig.js b/src/api/basicData/StateConfig.js
new file mode 100644
index 0000000..f7208da
--- /dev/null
+++ b/src/api/basicData/StateConfig.js
@@ -0,0 +1,55 @@
+/*
+ * @Author: zwq
+ * @Date: 2020-12-29 16:00:14
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-01-13 16:11:45
+ * @Description:
+ */
+import request from '@/utils/request'
+
+export function StateConfigList(data) { // 获取状态列表
+  return request({
+    url: '/basic/configure-display/page',
+    method: 'post',
+    data
+  })
+}
+
+export function StateConfigDetail(id) { // 获取状态单条数据
+  return request({
+    url: '/basic/configure-display/get',
+    method: 'post',
+    data: { id }
+  })
+}
+
+export function StateConfigUpdate(data) { // 更新状态单条数据
+  return request({
+    url: '/basic/configure-display/update',
+    method: 'post',
+    data
+  })
+}
+
+export function StateConfigAdd(data) { // 新增状态单条数据
+  return request({
+    url: '/basic/configure-display/add',
+    method: 'post',
+    data
+  })
+}
+
+export function StateConfigCode() { // 获取状态code
+  return request({
+    url: '/basic/configure-display/get-code',
+    method: 'post'
+  })
+}
+
+export function StateConfigDelete(id) { // 删除状态单条数据
+  return request({
+    url: '/basic/configure-display/delete',
+    method: 'post',
+    data: { id }
+  })
+}
diff --git a/src/api/basicData/dataDictionary.js b/src/api/basicData/dataDictionary.js
new file mode 100644
index 0000000..99540ee
--- /dev/null
+++ b/src/api/basicData/dataDictionary.js
@@ -0,0 +1,48 @@
+/*
+ * @Author: zwq
+ * @Date: 2020-12-29 16:00:14
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-05-19 15:57:56
+ * @Description:
+ */
+import request from '@/utils/request'
+
+export function dataDictionaryDataList(data) { // 获取字典类型列表
+  return request({
+    url: '/basic/platform-dict/selectPlatformDictDataListByPage',
+    method: 'post',
+    data
+  })
+}
+
+export function dataDictionaryDataDetail(id) { // 获取字典类型单条数据
+  return request({
+    url: '/basic/platform-dict/selectPlatformDictDataById',
+    method: 'post',
+    data: { id }
+  })
+}
+
+export function dataDictionaryDataUpdate(data) { // 更新字典类型单条数据
+  return request({
+    url: '/basic/platform-dict/updatePlatformDictData',
+    method: 'post',
+    data
+  })
+}
+
+export function dataDictionaryDataAdd(data) { // 新增字典类型单条数据
+  return request({
+    url: '/basic/platform-dict/savePlatformDictData',
+    method: 'post',
+    data
+  })
+}
+
+export function dataDictionaryDataDelete(id) { // 删除字典类型单条数据
+  return request({
+    url: '/basic/platform-dict/deletePlatformDictData',
+    method: 'post',
+    data: { id }
+  })
+}
diff --git a/src/api/basicData/dataDictionaryType.js b/src/api/basicData/dataDictionaryType.js
new file mode 100644
index 0000000..614c1fc
--- /dev/null
+++ b/src/api/basicData/dataDictionaryType.js
@@ -0,0 +1,48 @@
+/*
+ * @Author: zwq
+ * @Date: 2020-12-29 16:00:14
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-04-16 12:51:29
+ * @Description:
+ */
+import request from '@/utils/request'
+
+export function dataDictionaryTypeList(data) { // 获取字典类型列表
+  return request({
+    url: '/basic/platform-dict/selectPlatformDictTypeListByPage',
+    method: 'post',
+    data
+  })
+}
+
+export function dataDictionaryTypeDetail(id) { // 获取字典类型单条数据
+  return request({
+    url: '/basic/platform-dict/selectDictTypeById',
+    method: 'post',
+    data: { id }
+  })
+}
+
+export function dataDictionaryTypeUpdate(data) { // 更新字典类型单条数据
+  return request({
+    url: '/basic/platform-dict/updatePlatformDictType',
+    method: 'post',
+    data
+  })
+}
+
+export function dataDictionaryTypeAdd(data) { // 新增字典类型单条数据
+  return request({
+    url: '/basic/platform-dict/savePlatformDictType',
+    method: 'post',
+    data
+  })
+}
+
+export function dataDictionaryTypeDelete(id) { // 删除字典类型单条数据
+  return request({
+    url: '/basic/platform-dict/deletePlatformDictType',
+    method: 'post',
+    data: { id }
+  })
+}
diff --git a/src/api/basicData/visual.js b/src/api/basicData/visual.js
new file mode 100644
index 0000000..a5df345
--- /dev/null
+++ b/src/api/basicData/visual.js
@@ -0,0 +1,90 @@
+/*
+ * @Author: gtz
+ * @Date: 2021-02-27 17:23:17
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-03-25 16:21:36
+ * @Description: file content
+ */
+
+import request from '@/utils/request'
+
+// 获取可视化布局图列表
+export function VisualList(data) {
+  return request({
+    url: '/visual/visual/page',
+    method: 'post',
+    data
+  })
+}
+
+// 获取设备数据字典
+export function eqList(data) {
+  return request({
+    url: '/basic/equipment/page',
+    method: 'post',
+    data
+  })
+}
+
+// 获取库位列表
+export function locationList(data) {
+  return request({
+    url: '/basic/stock/list',
+    method: 'post',
+    data
+  })
+}
+
+// 获取可视化布局图信息单条数据
+export function VisualDetail(id) {
+  return request({
+    url: '/visual/visual/get',
+    method: 'post',
+    data: { id }
+  })
+}
+
+// 更新可视化布局图信息单条数据
+export function VisualUpdate(data) {
+  return request({
+    url: '/visual/visual/update',
+    method: 'post',
+    data
+  })
+}
+
+// 新增可视化布局图信息单条数据
+export function VisualAdd(data) {
+  return request({
+    url: '/visual/visual/add',
+    method: 'post',
+    data
+  })
+}
+
+// 删除可视化布局图单条数据
+export function VisualDelete(id) {
+  return request({
+    url: '/visual/visual/delete',
+    method: 'post',
+    data: { id }
+  })
+}
+
+// 获取可视化实时信息
+export function VisualEqData(data) {
+  return request({
+    url: '/visual/visual/equipmentStatusList',
+    method: 'post',
+    data
+  })
+}
+
+// 获取可视化库位信息
+export function VisualLocationData(data) {
+  return request({
+    url: '/visual/visual/stroageBoxForStockList',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/api/dict/index.js b/src/api/dict/index.js
new file mode 100644
index 0000000..37b2e3a
--- /dev/null
+++ b/src/api/dict/index.js
@@ -0,0 +1,373 @@
+/*
+ * @Date: 2021-01-21 18:08:29
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-12 10:11:14
+ * @FilePath: \basic-admin\src\api\dict\index.js
+ * @Description: 数据字典定义
+ */
+// import request from '@/utils/request'
+import { requestWithCache } from '@/utils/request'
+
+// 获取设备列表列表
+export function getDictDevice(data) {
+  return requestWithCache({
+    url: '/basic/equipment/page',
+    method: 'post',
+    data
+  }).then(res => {
+    if (res.code === 0) {
+      return res.data.records
+    } else {
+      return []
+    }
+  })
+}
+
+// 获取设备类型列表
+export function getDictDeviceType(data) {
+  return requestWithCache({
+    url: '/common/data-dictionary/equipmentTypeList',
+    method: 'post',
+    data
+  }).then(res => {
+    if (res.code === 0) {
+      return res.data
+    } else {
+      return []
+    }
+  })
+}
+
+// 获取物料列表
+export function getDictBom(data) {
+  return requestWithCache({
+    url: '/basic/material/page',
+    method: 'post',
+    data
+  }).then(res => {
+    if (res.code === 0) {
+      return res.data.records
+    } else {
+      return []
+    }
+  })
+}
+
+// 获取供应商列表
+export function getDictSupplier(data) {
+  return requestWithCache({
+    url: '/common/data-dictionary/supplierList',
+    method: 'post',
+    data
+  }).then(res => {
+    if (res.code === 0) {
+      return res.data
+    } else {
+      return []
+    }
+  })
+}
+
+// 获取单位列表
+export function getDictUnit(data) {
+  return requestWithCache({
+    url: '/basic/platform-dict/selectPlatformDictDataListByPage',
+    method: 'post',
+    data: {
+      current: 1,
+      size: 999,
+      dictTypeId: '1392033901169348609'
+    }
+  }).then(res => {
+    if (res.code === 0) {
+      return res.data
+    } else {
+      return []
+    }
+  })
+}
+
+// 获取物料列表
+export function getDictMaterial(data) {
+  return requestWithCache({
+    url: '/material/material-date/materialList',
+    method: 'post',
+    data
+  }).then(res => {
+    if (res.code === 0) {
+      return res.data
+    } else {
+      return []
+    }
+  })
+}
+
+// 获取维修类型
+export function getDictRepairType(data) {
+  return requestWithCache({
+    url: '/basic/maintenance-type/page',
+    method: 'post',
+    data: {
+      current: 1,
+      enabled: 1,
+      size: 999
+    }
+  }).then(res => {
+    if (res.code === 0) {
+      return res.data.records.map(item => {
+        return {
+          id: item.id,
+          name: item.name
+        }
+      })
+    } else {
+      return []
+    }
+  })
+}
+
+// 获取员工列表
+export function getDictWorker() {
+  return requestWithCache({
+    url: '/basic/worker/page',
+    method: 'post',
+    data: {
+      current: 1,
+      size: 999
+    }
+  }).then(res => {
+    if (res.code === 0) {
+      return res.data.records.map(item => {
+        return {
+          id: item.id,
+          name: item.name,
+          telephone: item.telephone ? item.telephone : ''
+        }
+      })
+    } else {
+      return []
+    }
+  })
+}
+
+// 获取基础备品备件列表
+export function getDictSparepart(data) {
+  return requestWithCache({
+    url: '/basic/tool-spare-part/page',
+    method: 'post',
+    data: {
+      current: 1,
+      size: 999
+    }
+  }).then(res => {
+    if (res.code === 0) {
+      return res.data.records.map(item => {
+        return {
+          id: item.id,
+          name: item.name + (item.model ? ' - ' + item.model : '')
+        }
+      })
+    } else {
+      return []
+    }
+  })
+}
+
+// 获取备件型号
+export function getDictModel(data) {
+  return requestWithCache({
+    url: '/basic/tool-spare-part/list',
+    method: 'post',
+    data: {
+      current: 1,
+      size: 999,
+      ...data
+    }
+  }).then(res => {
+    if (res.code === 0) {
+      return res.data.records.map(item => {
+        return {
+          id: item.id,
+          name: item.name
+        }
+      })
+    } else {
+      return []
+    }
+  })
+}
+
+// 质量---报废： 报废原因
+export function scrapReasonList(data) {
+  return requestWithCache({
+    url: '/basic/scrap-information/page',
+    method: 'post',
+    data: {
+      current: 1,
+      size: 999
+    }
+  }).then(res => {
+    if (res.code === 0) {
+      return res.data.records.map(item => {
+        return {
+          id: item.id,
+          name: item.scrap
+        }
+      })
+    } else {
+      return []
+    }
+  })
+}
+
+// 获取故障等级
+export function faultLevelList(data) {
+  return requestWithCache({
+    url: '/common/data-dictionary-business/findAllByTypeOrCategory',
+    method: 'post',
+    subname: 'faultLevelList',
+    data: {
+      current: 1,
+      dataCategory: '故障',
+      dataType: '状况',
+      enabled: 1,
+      size: 999
+    }
+  }).then(res => {
+    if (res.code === 0) {
+      return res.data.records.map(item => {
+        return {
+          id: item.id,
+          name: item.dataValue
+        }
+      })
+    } else {
+      return []
+    }
+  })
+}
+
+// 获取保养周期
+export function maintainPeriod(data) {
+  return requestWithCache({
+    url: '/basic/platform-dict/selectPlatformDictDataListByPage',
+    method: 'post',
+    data: {
+      current: 1,
+      enabled: 1,
+      size: 999,
+      dictTypeId: '1393406291017252866'
+    }
+  }).then(res => {
+    if (res.code === 0) {
+      return res.data.records.map(item => {
+        return {
+          id: item.id,
+          name: item.dataName
+        }
+      })
+    } else {
+      return []
+    }
+  })
+}
+
+// 质量检测计划 获取检测频率
+export function detectionPeriod(data) {
+  return requestWithCache({
+    url: '/common/data-dictionary-business/findAllByTypeOrCategory',
+    method: 'post',
+    subname: 'detectionPeriod',
+    data: {
+      current: 1,
+      dataCategory: '时间',
+      dataType: '频率',
+      enabled: 1,
+      size: 999
+    }
+  }).then(res => {
+    if (res.code === 0) {
+      return res.data.records.map(item => {
+        return {
+          id: item.id,
+          name: item.dataValue
+        }
+      })
+    } else {
+      return []
+    }
+  })
+}
+
+// 获取设备类型的参数
+export function equipmentTypeParam(id) {
+  return requestWithCache({
+    url: '/equipment/equipment-parameter/findAllByIdOrName',
+    method: 'post',
+    data: {
+      current: 1,
+      equipmentTypeId: id,
+      size: 999
+    }
+  }).then(res => {
+    if (res.code === 0) {
+      return res.data.records.map(item => {
+        return {
+          id: item.id,
+          name: item.paramName
+        }
+      })
+    } else {
+      return []
+    }
+  })
+}
+
+// 获取设备状态
+
+export function statusList(id) {
+  return requestWithCache({
+    url: '/basic/configure-display/page',
+    method: 'post',
+    data: {
+      current: 1,
+      size: 999
+    }
+  }).then(res => {
+    if (res.code === 0) {
+      return res.data.records.map(item => {
+        return {
+          id: item.id,
+          name: item.status
+        }
+      })
+    } else {
+      return []
+    }
+  })
+}
+
+// 获取角色列表
+export function workerRoleList() {
+  return requestWithCache({
+    url: '/basic/platform-dict/selectPlatformDictDataListByPage',
+    method: 'post',
+    data: {
+      dictTypeId: '1383318968677273601',
+      current: 1,
+      size: 999
+    }
+  }).then(res => {
+    if (res.code === 0) {
+      return res.data.records.map(item => {
+        return {
+          id: item.id,
+          name: item.dataName
+        }
+      })
+    } else {
+      return []
+    }
+  })
+}
+
diff --git a/src/api/equipment/bom.js b/src/api/equipment/bom.js
new file mode 100644
index 0000000..aac5fdf
--- /dev/null
+++ b/src/api/equipment/bom.js
@@ -0,0 +1,108 @@
+/*
+ * @Date: 2021-01-05 15:25:38
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-04-21 13:26:36
+ * @FilePath: \basic-admin\src\api\equipment\bom.js
+ * @Description: 设备管理——设备物料bom管理 接口定义
+ */
+import request from '@/utils/request'
+
+// 获取物料bom列表
+export function getBOMList(data) {
+  return request({
+    url: '/equipment/equipment-bom/findAllByEQNameOrEQCodeOrMaterialNameWithPage',
+    method: 'post',
+    data
+  })
+}
+
+// 新增物料bom
+export function addBOM(data) {
+  return request({
+    url: '/equipment/equipment-bom/create',
+    method: 'post',
+    data
+  })
+}
+
+// 修改物料bom
+export function editBOM(data) {
+  return request({
+    url: '/equipment/equipment-bom/update',
+    method: 'post',
+    data
+  })
+}
+
+// 删除物料bom
+export function delBOM(data) {
+  return request({
+    url: '/equipment/equipment-bom/delete',
+    method: 'post',
+    data
+  })
+}
+
+// 根据id获取物料bom
+export function getBOMInfo(data) {
+  return request({
+    url: '/equipment/equipment-bom/findById',
+    method: 'post',
+    data
+  })
+}
+
+// 获取设备物料bom列表
+export function getDeviceBOMList(data) {
+  return request({
+    url: '/equipment/equipment-bom-detail/findAllByEQBomIdWithPage',
+    method: 'post',
+    data
+  })
+}
+
+// 新增设备物料bom
+export function addDeviceBOM(data) {
+  return request({
+    url: '/equipment/equipment-bom-detail/create',
+    method: 'post',
+    data
+  })
+}
+
+// 修改设备物料bom
+export function editDeviceBOM(data) {
+  return request({
+    url: '/equipment/equipment-bom-detail/update',
+    method: 'post',
+    data
+  })
+}
+
+// 删除设备物料bom
+export function delDeviceBOM(data) {
+  return request({
+    url: '/equipment/equipment-bom-detail/delete',
+    method: 'post',
+    data
+  })
+}
+
+// 根据id获取设备物料bom详细
+export function getDeviceBOMInfo(data) {
+  return request({
+    url: '/equipment/equipment-bom-detail/findById',
+    method: 'post',
+    data
+  })
+}
+
+// 获取基础物料
+
+export function getMaterialList(data) {
+  return request({
+    url: '/basic/material/page',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/api/equipment/eqManager.js b/src/api/equipment/eqManager.js
new file mode 100644
index 0000000..9e7d55d
--- /dev/null
+++ b/src/api/equipment/eqManager.js
@@ -0,0 +1,80 @@
+/*
+ * @Author: gtz
+ * @Date: 2021-04-16 16:23:35
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-04-17 15:59:16
+ * @Description: file content
+ */
+
+import request from '@/utils/request'
+
+// 获取设备管理员列表
+export function page(data) {
+  return request({
+    url: '/equipment/equipment-operator-relation/findAll',
+    method: 'post',
+    data
+  })
+}
+
+// 添加设备管理员
+export function add(data) {
+  return request({
+    url: '/equipment/equipment-operator-relation/create',
+    method: 'post',
+    data
+  })
+}
+
+// 编辑设备管理员
+export function edit(data) {
+  return request({
+    url: '/equipment/equipment-operator-relation/update',
+    method: 'post',
+    data
+  })
+}
+
+// 删除设备管理员
+export function del(data) {
+  return request({
+    url: '/equipment/equipment-operator-relation/delete',
+    method: 'post',
+    data
+  })
+}
+
+// 获取设备管理员详情
+export function getInfo(data) {
+  return request({
+    url: '/equipment/equipment-operator-relation/findById',
+    method: 'post',
+    data
+  })
+}
+
+export function getWorkerList(data) {
+  return request({
+    url: '/basic/worker/page',
+    method: 'post',
+    data
+  })
+}
+
+export function getEqList(data) {
+  return request({
+    url: '/basic/equipment/page',
+    method: 'post',
+    data
+  })
+}
+
+export function getRoleList() {
+  return request({
+    url: '/equipment/equipment-operator-relation/findAllOperator',
+    method: 'post',
+    data: {
+      roleId: '1410037914748780545'
+    }
+  })
+}
diff --git a/src/api/equipment/equipmentParams.js b/src/api/equipment/equipmentParams.js
new file mode 100644
index 0000000..a81961f
--- /dev/null
+++ b/src/api/equipment/equipmentParams.js
@@ -0,0 +1,18 @@
+/*
+ * @Author: gtz
+ * @Date: 2021-06-17 15:20:52
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-06-17 15:23:05
+ * @Description: file content
+ */
+
+import request from '@/utils/request'
+
+// 获取设备管理员列表
+export function getEqList(data) {
+  return request({
+    url: '/material/substrate-tree/getTree',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/api/equipment/index.js b/src/api/equipment/index.js
new file mode 100644
index 0000000..a532c6f
--- /dev/null
+++ b/src/api/equipment/index.js
@@ -0,0 +1,27 @@
+/*
+ * @Date: 2021-01-14 19:17:57
+ * @LastEditors: guo
+ * @LastEditTime: 2021-01-14 19:56:16
+ * @FilePath: \basic-admin\src\api\equipment\index.js
+ * @Description: 设备部分基础接口
+ */
+
+import request from '@/utils/request'
+
+// 获取设备状态配置列表
+export function getStatusSettingList(data) {
+  return request({
+    url: '/equipment/equipment/list',
+    method: 'post',
+    data
+  })
+}
+
+// 修改设备状态配置
+export function editStatusSetting(data) {
+  return request({
+    url: '/equipment/equipment/updateById',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/api/equipment/maintain.js b/src/api/equipment/maintain.js
new file mode 100644
index 0000000..30a8a7a
--- /dev/null
+++ b/src/api/equipment/maintain.js
@@ -0,0 +1,134 @@
+/*
+ * @Date: 2021-01-15 17:42:07
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-12 10:31:01
+ * @FilePath: \basic-admin\src\api\equipment\maintain.js
+ * @Description: 保养计划 & 保养记录 接口定义
+ */
+import request from '@/utils/request'
+
+// 获取保养计划列表
+export function getMaintainPlanList(data) {
+  return request({
+    url: '/equipment/equipment-maintenace-plan/list',
+    method: 'post',
+    data
+  })
+}
+
+// 添加保养计划
+export function addMaintainPlan(data) {
+  return request({
+    url: '/equipment/equipment-maintenace-plan/create',
+    method: 'post',
+    data
+  })
+}
+
+// 编辑保养计划
+export function editMaintainPlan(data) {
+  return request({
+    url: '/equipment/equipment-maintenace-plan/update',
+    method: 'post',
+    data
+  })
+}
+
+// 删除保养计划
+export function delMaintainPlan(data) {
+  return request({
+    url: '/equipment/equipment-maintenace-plan/delete',
+    method: 'post',
+    data
+  })
+}
+
+// 获取保养计划详情
+export function getMaintainPlan(data) {
+  return request({
+    url: '/equipment/equipment-maintenace-plan/list',
+    method: 'post',
+    data
+  })
+}
+
+// 获取保养日志列表
+export function getMaintainLogList(data) {
+  return request({
+    url: '/equipment/equipment-maintenace-log/list',
+    method: 'post',
+    data
+  })
+}
+
+// 获取独立的保养日志列表
+export function getSingleMaintainLogList(data) {
+  return request({
+    url: '/equipment/equipment-maintenace-log/listForOnlyLog',
+    method: 'post',
+    data
+  })
+}
+
+// 添加保养日志
+export function addMaintainLog(data) {
+  return request({
+    url: '/equipment/equipment-maintenace-log/create',
+    method: 'post',
+    data
+  })
+}
+
+// 编辑保养日志
+export function editMaintainLog(data) {
+  return request({
+    url: '/equipment/equipment-maintenace-log/update',
+    method: 'post',
+    data
+  })
+}
+
+// 删除保养日志
+export function delMaintainLog(data) {
+  return request({
+    url: '/equipment/equipment-maintenace-log/delete',
+    method: 'post',
+    data
+  })
+}
+
+// 获取保养日志详情
+export function getMaintainLog(data) {
+  return request({
+    url: '/equipment/equipment-maintenace-log/findById',
+    method: 'post',
+    data
+  })
+}
+
+// 获取设备列表
+export function getEqList(data) {
+  return request({
+    url: '/basic/equipment/page',
+    method: 'post',
+    data
+  })
+}
+
+// 获取保养计划单号
+export function getPlanCode(data) {
+  return request({
+    url: '/equipment/equipment-maintenace-plan/getEquipmentMaintenancePlanCode',
+    method: 'post',
+    data
+  })
+}
+
+// 获取保养记录单号
+export function getLogCode(data) {
+  return request({
+    url: '/equipment/equipment-maintenace-plan/getEquipmentMaintenancePlanCode',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/api/equipment/monitoring.js b/src/api/equipment/monitoring.js
new file mode 100644
index 0000000..d346963
--- /dev/null
+++ b/src/api/equipment/monitoring.js
@@ -0,0 +1,17 @@
+/*
+ * @Date: 2021-02-01 19:01:56
+ * @LastEditors: guo
+ * @LastEditTime: 2021-02-01 19:02:43
+ * @FilePath: \basic-admin\src\api\equipment\monitoring.js
+ * @Description: 设备监控
+ */
+import request from '@/utils/request'
+
+// 获取设备监控列表
+export function getDeviceMonitoringList(data) {
+  return request({
+    url: '/equipment/monitor/list',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/api/equipment/param.js b/src/api/equipment/param.js
new file mode 100644
index 0000000..e51da8c
--- /dev/null
+++ b/src/api/equipment/param.js
@@ -0,0 +1,187 @@
+/*
+ * @Date: 2021-02-01 19:33:11
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-04-23 15:45:32
+ * @FilePath: \basic-admin\src\api\equipment\param.js
+ * @Description: 设备类型参数
+ */
+import request from '@/utils/request'
+
+// 获取设备类型列表
+export function getDeviceList(data) {
+  return request({
+    url: '/basic/equipment/page',
+    method: 'post',
+    data
+  })
+}
+
+// 获取设备类型详情
+export function getDeviceInfo(data) {
+  return request({
+    url: '/basic/equipment/get',
+    method: 'post',
+    data
+  })
+}
+
+// 获取设备类型参数列表
+export function getDeviceParamList(data) {
+  return request({
+    url: '/equipment/equipment-parameter/findAllByIdOrName',
+    method: 'post',
+    data
+  })
+}
+
+// 新增设备类型参数
+export function addDeviceParam(data) {
+  return request({
+    url: '/equipment/equipment-parameter/create',
+    method: 'post',
+    data
+  })
+}
+
+// 编辑设备类型参数
+export function editDeviceParam(data) {
+  return request({
+    url: '/equipment/equipment-parameter/update',
+    method: 'post',
+    data
+  })
+}
+
+// 删除设备类型参数
+export function delDeviceParam(data) {
+  return request({
+    url: '/equipment/equipment-parameter/delete',
+    method: 'post',
+    data
+  })
+}
+
+// 查询设备类型参数
+export function getDeviceParam(data) {
+  return request({
+    url: '/equipment/equipment-parameter/findById',
+    method: 'post',
+    data
+  })
+}
+
+// 获取设备类型参数code
+export function getDeviceParamCode(data) {
+  return request({
+    url: '/equipment/equipment-parameter/getEquipmentParamCode',
+    method: 'post',
+    data
+  })
+}
+
+// 获取设备类型参数 事件配置列表
+export function getDeviceEventSettingList(data) {
+  return request({
+    url: '/equipment/equipment-event/findAllByIdOrName',
+    method: 'post',
+    data
+  })
+}
+
+// 获取设备类型参数 事件配置详细
+export function getDeviceEventSetting(data) {
+  return request({
+    url: '/equipment/equipment-event/findById',
+    method: 'post',
+    data
+  })
+}
+
+// 添加设备类型参数事件配置
+export function addDeviceEventSetting(data) {
+  return request({
+    url: '/equipment/equipment-event/create',
+    method: 'post',
+    data
+  })
+}
+
+// 编辑设备类型参数事件配置
+export function editDeviceEventSetting(data) {
+  return request({
+    url: 'equipment/equipment-event/update',
+    method: 'post',
+    data
+  })
+}
+
+// 删除设备类型参数事件配置
+export function delDeviceEventSetting(data) {
+  return request({
+    url: '/equipment/equipment-event/delete',
+    method: 'post',
+    data
+  })
+}
+
+// 获取设备类型参数事件code
+export function getDeviceEventCode(data) {
+  return request({
+    url: '/equipment/equipment-event/getEquipmentEventCode',
+    method: 'post',
+    data
+  })
+}
+
+// 获取设备类型报警列表
+export function getDeviceAlarmSettingList(data) {
+  return request({
+    url: '/equipment/equipment-manage-alarm/findAllByALID',
+    method: 'post',
+    data
+  })
+}
+// 获取设备类型报警详细
+export function getDeviceAlarmSetting(data) {
+  return request({
+    url: '/equipment/equipment-manage-alarm/findById',
+    method: 'post',
+    data
+  })
+}
+
+// 新增设备类型报警详细
+export function addDeviceAlarmSetting(data) {
+  return request({
+    url: '/equipment/equipment-manage-alarm/create',
+    method: 'post',
+    data
+  })
+}
+
+// 编辑设备类型报警详细
+export function editDeviceAlarmSetting(data) {
+  return request({
+    url: '/equipment/equipment-manage-alarm/update',
+    method: 'post',
+    data
+  })
+}
+
+// 删除设备类型报警详细
+export function delDeviceAlarmSetting(data) {
+  return request({
+    url: '/equipment/equipment-manage-alarm/delete',
+    method: 'post',
+    data
+  })
+}
+
+// 获取设备类型报警编码
+export function getDeviceAlarmCode(data) {
+  return request({
+    url: '/equipment/equipment-manage-alarm/getEquipmentAlarmCode',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/api/equipment/process.js b/src/api/equipment/process.js
new file mode 100644
index 0000000..e4528a1
--- /dev/null
+++ b/src/api/equipment/process.js
@@ -0,0 +1,16 @@
+/*
+ * @Author: your name
+ * @Date: 2021-06-29 17:25:28
+ * @LastEditTime: 2021-06-30 09:06:28
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \mt-bus-fe\src\api\equipment\process.js
+ */
+import request from '@/utils/request'
+export function getProcess(data) {
+  return request({
+    url: '/equipment/substrate-equipment-event-parameter/getAllEquipmentEventParameter',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/api/equipment/recipe.js b/src/api/equipment/recipe.js
new file mode 100644
index 0000000..cebd226
--- /dev/null
+++ b/src/api/equipment/recipe.js
@@ -0,0 +1,108 @@
+/*
+ * @Date: 2021-01-28 15:01:57
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-04-20 10:50:48
+ * @FilePath: \basic-admin\src\api\equipment\recipe.js
+ * @Description: 设备配方设置
+ */
+
+import request from '@/utils/request'
+
+// 获取设备配方CODE
+export function getDeviceRecipeCode(data) {
+  return request({
+    url: '/equipment/equipment-recipe/getEquipmentRecipeCode',
+    method: 'post',
+    data
+  })
+}
+
+// 获取设备配方列表
+export function getDeviceRecipeList(data) {
+  return request({
+    url: '/equipment/equipment-recipe/findAllByEquipmentTypeAndRecipeName',
+    method: 'post',
+    data
+  })
+}
+
+// 新建设备配方
+export function addDeviceRecipe(data) {
+  return request({
+    url: '/equipment/equipment-recipe/create',
+    method: 'post',
+    data
+  })
+}
+
+// 编辑设备配方
+export function editDeviceRecipe(data) {
+  return request({
+    url: '/equipment/equipment-recipe/update',
+    method: 'post',
+    data
+  })
+}
+
+// 删除设备配方
+export function delDeviceRecipe(data) {
+  return request({
+    url: '/equipment/equipment-recipe/delete',
+    method: 'post',
+    data
+  })
+}
+
+// 获取设备配方
+export function getDeviceRecipe(data) {
+  return request({
+    url: '/equipment/equipment-recipe/findById',
+    method: 'post',
+    data
+  })
+}
+
+// 根据id获取设备配方参数列表
+export function getDeviceRecipeParamList(data) {
+  return request({
+    url: '/equipment/equipment-recipe-parameter/findAllByRecipeIdWithPage',
+    method: 'post',
+    data
+  })
+}
+
+// 新增设备配方参数
+export function addDeviceRecipeParam(data) {
+  return request({
+    url: '/equipment/equipment-recipe-parameter/create',
+    method: 'post',
+    data
+  })
+}
+
+// 修改设备配方参数
+export function editDeviceRecipeParam(data) {
+  return request({
+    url: '/equipment/equipment-recipe-parameter/update',
+    method: 'post',
+    data
+  })
+}
+
+// 删除设备配方参数
+export function delDeviceRecipeParam(data) {
+  return request({
+    url: '/equipment/equipment-recipe-parameter/delete',
+    method: 'post',
+    data
+  })
+}
+
+// 获取设备配方参数详细 (等待接口补全)
+export function getDeviceRecipeParam(data) {
+  return request({
+    url: '/equipment/equipment-recipe-parameter/findById',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/api/equipment/repair.js b/src/api/equipment/repair.js
new file mode 100644
index 0000000..701b7aa
--- /dev/null
+++ b/src/api/equipment/repair.js
@@ -0,0 +1,62 @@
+/*
+ * @Date: 2021-01-12 14:29:35
+ * @LastEditors: guo
+ * @LastEditTime: 2021-03-01 10:02:07
+ * @FilePath: \basic-admin\src\api\equipment\repair.js
+ * @Description: 设备维修管理 接口定义
+ */
+import request from '@/utils/request'
+
+// 获取设备维修列表
+export function getRepairList(data) {
+  return request({
+    url: '/equipment/equipment-repair/findAllByMaintenanceStatusOrTime',
+    method: 'post',
+    data
+  })
+}
+
+// 新增设备维护信息
+export function addRepairInfo(data) {
+  return request({
+    url: '/equipment/equipment-repair/create',
+    method: 'post',
+    data
+  })
+}
+
+// 删除设备维护信息
+export function delRepairInfo(data) {
+  return request({
+    url: '/equipment/equipment-repair/delete',
+    method: 'post',
+    data
+  })
+}
+
+// 修改设备维护信息
+export function editRepairInfo(data) {
+  return request({
+    url: '/equipment/equipment-repair/update',
+    method: 'post',
+    data
+  })
+}
+
+// 获取维修信息详细
+export function getRepairInfo(data) {
+  return request({
+    url: '/equipment/equipment-repair/findById',
+    method: 'post',
+    data
+  })
+}
+
+// 获取维修单号code
+export function getCode() {
+  return request({
+    url: '/equipment/equipment-repair/getEquipmentRepairCode',
+    method: 'post'
+  })
+}
+
diff --git a/src/api/equipment/spare.js b/src/api/equipment/spare.js
new file mode 100644
index 0000000..5cf8fd4
--- /dev/null
+++ b/src/api/equipment/spare.js
@@ -0,0 +1,62 @@
+/*
+ * @Date: 2021-01-05 15:25:38
+ * @LastEditors: guo
+ * @LastEditTime: 2021-03-16 13:49:23
+ * @FilePath: \basic-admin\src\api\equipment\spare.js
+ * @Description: 设备管理——备品备件管理
+ */
+import request from '@/utils/request'
+
+// 获取备品备件列表
+export function getSpareList(data) {
+  return request({
+    url: '/equipment/spare-parts/page',
+    method: 'post',
+    data
+  })
+}
+
+// 新增备品备件
+export function addSapre(data) {
+  return request({
+    url: '/equipment/spare-parts/create',
+    method: 'post',
+    data
+  })
+}
+
+// 修改备品备件
+export function editSpare(data) {
+  return request({
+    url: '/equipment/spare-parts/update',
+    method: 'post',
+    data
+  })
+}
+
+// 删除备品备件
+export function delSpare(data) {
+  return request({
+    url: '/equipment/spare-parts/delete',
+    method: 'post',
+    data
+  })
+}
+
+// 获取备品备件详情
+export function getSpareInfo(data) {
+  return request({
+    url: '/equipment/spare-parts/findById',
+    method: 'post',
+    data
+  })
+}
+
+// 获取备件型号
+export function getSpareModel(data) {
+  return request({
+    url: '/basic/tool-spare-part/list',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/api/factory-manage/abnormalAlarm.js b/src/api/factory-manage/abnormalAlarm.js
new file mode 100644
index 0000000..59d9fc8
--- /dev/null
+++ b/src/api/factory-manage/abnormalAlarm.js
@@ -0,0 +1,62 @@
+/*
+ * @Author: gtz
+ * @Date: 2021-03-21 15:14:22
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-03-21 18:13:56
+ * @Description: file content
+ */
+import request from '@/utils/request'
+
+// 获取告警列表
+export function list(data) {
+  return request({
+    url: '/team/team-alarmHandle/page',
+    method: 'post',
+    data
+  })
+}
+
+// id获取告警
+export function getInfo(data) {
+  return request({
+    url: '/team/team-alarmHandle/get',
+    method: 'post',
+    data
+  })
+}
+
+// 删除告警
+export function del(data) {
+  return request({
+    url: '/team/team-alarmHandle/delete',
+    method: 'post',
+    data
+  })
+}
+
+// 新增告警
+export function add(data) {
+  return request({
+    url: '/team/team-alarmHandle/add',
+    method: 'post',
+    data
+  })
+}
+
+// 更新告警
+export function update(data) {
+  return request({
+    url: '/team/team-alarmHandle/update',
+    method: 'post',
+    data
+  })
+}
+
+// 获取员工列表
+export function getWorkerList(data) {
+  return request({
+    url: '/basic/worker/page',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/api/file.js b/src/api/file.js
new file mode 100644
index 0000000..268eabe
--- /dev/null
+++ b/src/api/file.js
@@ -0,0 +1,30 @@
+/*
+ * @Author: gtz
+ * @Date: 2021-02-27 16:05:34
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-03-11 20:10:43
+ * @Description: file content
+ */
+
+import request from '@/utils/request'
+
+// 获取文件流
+export function getUrl(params) {
+  return request({
+    url: '/common/attachment/downloadFile',
+    method: 'get',
+    responseType: 'blob',
+    params,
+    timeout: 60000
+  })
+}
+
+// 上传文件
+export function UploadFile(data, params) {
+  return request({
+    url: '/common/attachment/uploadFile',
+    method: 'post',
+    data,
+    params: { typeCode: params }
+  })
+}
diff --git a/src/api/material-manage/batch.js b/src/api/material-manage/batch.js
new file mode 100644
index 0000000..86c66c6
--- /dev/null
+++ b/src/api/material-manage/batch.js
@@ -0,0 +1,63 @@
+/*
+ * @Author: gtz
+ * @Date: 2021-01-27 10:07:42
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-03-30 16:58:47
+ * @Description: file content
+ */
+import request from '@/utils/request'
+
+export function list(data) {
+  return request({
+    url: '/material/material-date/page',
+    method: 'post',
+    data
+  })
+}
+
+export function getInfo(data) {
+  return request({
+    url: '/material/material-date/get',
+    method: 'post',
+    data
+  })
+}
+
+export function getByCode(data) {
+  return request({
+    url: '/material/material-date/getByCode',
+    method: 'post',
+    data
+  })
+}
+
+export function del(data) {
+  return request({
+    url: '/material/material-date/delete',
+    method: 'post',
+    data
+  })
+}
+
+export function update(data) {
+  return request({
+    url: '/material/material-date/update',
+    method: 'post',
+    data
+  })
+}
+
+export function add(data) {
+  return request({
+    url: '/material/material-date/add',
+    method: 'post',
+    data
+  })
+}
+
+export function getCode() {
+  return request({
+    url: '/material/material-date/getCode',
+    method: 'post'
+  })
+}
diff --git a/src/api/material-manage/bom-list.js b/src/api/material-manage/bom-list.js
new file mode 100644
index 0000000..d6295cb
--- /dev/null
+++ b/src/api/material-manage/bom-list.js
@@ -0,0 +1,41 @@
+import request from '@/utils/request'
+
+export function list(data) {
+  return request({
+    url: '/material/material-bom-detail/page',
+    method: 'post',
+    data
+  })
+}
+
+export function getInfo(data) {
+  return request({
+    url: '/material/material-bom-detail/get',
+    method: 'post',
+    data
+  })
+}
+
+export function del(data) {
+  return request({
+    url: '/material/material-bom-detail/delete',
+    method: 'post',
+    data
+  })
+}
+
+export function add(data) {
+  return request({
+    url: '/material/material-bom-detail/add',
+    method: 'post',
+    data
+  })
+}
+
+export function update(data) {
+  return request({
+    url: '/material/material-bom-detail/update',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/api/material-manage/bom.js b/src/api/material-manage/bom.js
new file mode 100644
index 0000000..e7653a7
--- /dev/null
+++ b/src/api/material-manage/bom.js
@@ -0,0 +1,55 @@
+/*
+ * @Author: gtz
+ * @Date: 2021-01-27 10:07:42
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-03-30 16:31:18
+ * @Description: file content
+ */
+import request from '@/utils/request'
+
+export function list(data) {
+  return request({
+    url: 'material/material-bom/page',
+    method: 'post',
+    data
+  })
+}
+
+export function getInfo(data) {
+  return request({
+    url: '/material/material-bom/get',
+    method: 'post',
+    data
+  })
+}
+
+export function del(data) {
+  return request({
+    url: '/material/material-bom/delete',
+    method: 'post',
+    data
+  })
+}
+
+export function add(data) {
+  return request({
+    url: '/material/material-bom/add',
+    method: 'post',
+    data
+  })
+}
+
+export function getCode() {
+  return request({
+    url: '/material/material-bom/getCode',
+    method: 'post'
+  })
+}
+
+export function update(data) {
+  return request({
+    url: '/material/material-bom/update',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/api/material-manage/currentConsume.js b/src/api/material-manage/currentConsume.js
new file mode 100644
index 0000000..040cb0c
--- /dev/null
+++ b/src/api/material-manage/currentConsume.js
@@ -0,0 +1,24 @@
+/*
+ * @Author: gtz
+ * @Date: 2021-04-28 11:26:59
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-04-28 11:27:53
+ * @Description: file content
+ */
+import request from '@/utils/request'
+
+export function list(data) {
+  return request({
+    url: '/material/equipment-material-replace/page',
+    method: 'post',
+    data
+  })
+}
+
+export function getMaterialBatchList(data) {
+  return request({
+    url: '/material/material-date/page',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/api/material-manage/historyConsume.js b/src/api/material-manage/historyConsume.js
new file mode 100644
index 0000000..040cb0c
--- /dev/null
+++ b/src/api/material-manage/historyConsume.js
@@ -0,0 +1,24 @@
+/*
+ * @Author: gtz
+ * @Date: 2021-04-28 11:26:59
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-04-28 11:27:53
+ * @Description: file content
+ */
+import request from '@/utils/request'
+
+export function list(data) {
+  return request({
+    url: '/material/equipment-material-replace/page',
+    method: 'post',
+    data
+  })
+}
+
+export function getMaterialBatchList(data) {
+  return request({
+    url: '/material/material-date/page',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/api/material-manage/material.js b/src/api/material-manage/material.js
new file mode 100644
index 0000000..20a6a39
--- /dev/null
+++ b/src/api/material-manage/material.js
@@ -0,0 +1,17 @@
+import request from '@/utils/request'
+
+export function list(data) {
+  return request({
+    url: 'material/material-date/materialList',
+    method: 'post',
+    data
+  })
+}
+export function listEquipment(data) {
+  return request({
+    url: 'material/equipment-material-replace/equipmentList',
+    method: 'post',
+    data
+  })
+}
+
diff --git a/src/api/material-manage/refueling.js b/src/api/material-manage/refueling.js
new file mode 100644
index 0000000..54bc88e
--- /dev/null
+++ b/src/api/material-manage/refueling.js
@@ -0,0 +1,41 @@
+import request from '@/utils/request'
+
+export function list(data) {
+  return request({
+    url: '/material/equipment-material-replace/page',
+    method: 'post',
+    data
+  })
+}
+
+export function getInfo(data) {
+  return request({
+    url: '/material/equipment-material-replace/get',
+    method: 'post',
+    data
+  })
+}
+
+export function del(data) {
+  return request({
+    url: 'material/equipment-material-replace/delete',
+    method: 'post',
+    data
+  })
+}
+
+export function add(data) {
+  return request({
+    url: '/material/equipment-material-replace/add',
+    method: 'post',
+    data
+  })
+}
+
+export function update(data) {
+  return request({
+    url: '/material/equipment-material-replace/update',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/api/material-manage/report.js b/src/api/material-manage/report.js
new file mode 100644
index 0000000..45688f8
--- /dev/null
+++ b/src/api/material-manage/report.js
@@ -0,0 +1,26 @@
+/*
+ * @Author: your name
+ * @Date: 2021-04-26 11:15:51
+ * @LastEditTime: 2021-05-25 16:26:13
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \mt-bus-fe\src\api\material-manage\report.js
+ */
+import request from '@/utils/request'
+
+export function getTreeList(data) {
+  return request({
+    url: '/material/substrate-tree/getTree',
+    method: 'post',
+    data
+  })
+}
+
+export function getData(data) {
+  return request({
+    url: '/material/substrate-tree/list',
+    method: 'post',
+    data
+  })
+}
+
diff --git a/src/api/menu.js b/src/api/menu.js
new file mode 100644
index 0000000..16b6cb6
--- /dev/null
+++ b/src/api/menu.js
@@ -0,0 +1,80 @@
+/*
+ * @Date: 2020-12-28 20:46:53
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-04-25 14:52:11
+ * @FilePath: \basic-admin\src\api\menu.js
+ * @Description: 菜单api接口定义
+ */
+import request from '@/utils/request'
+
+// 获取菜单列表
+export function getMenuList(data) {
+  return request({
+    url: '/upms/menu/list',
+    method: 'post',
+    data
+  })
+}
+
+// 获取菜单详情
+export function getMenuDetail(id) {
+  return request({
+    url: '/upms/menu/get',
+    method: 'post',
+    data: { id }
+  })
+}
+
+// 新增菜单
+export function addMenu(data) {
+  return request({
+    url: '/upms/menu/add',
+    method: 'post',
+    data
+  })
+}
+
+// 删除菜单
+export function delMenu(id) {
+  return request({
+    url: '/upms/menu/delete',
+    method: 'post',
+    data: { id }
+  })
+}
+
+// 启停菜单
+export function enableMenu(data) {
+  return request({
+    url: '/upms/menu/enabled',
+    method: 'post',
+    data
+  })
+}
+
+// 修改菜单
+export function editMenu(data) {
+  return request({
+    url: '/upms/menu/update',
+    method: 'post',
+    data
+  })
+}
+
+// 菜单-角色关联授权
+export function saveRoleMenu(data) {
+  return request({
+    url: '/upms/menu/saveRoleMenu',
+    method: 'post',
+    data
+  })
+}
+
+// 菜单-角色关联获取
+export function listByRole(id) {
+  return request({
+    url: '/upms/menu/listByRole',
+    method: 'post',
+    data: { id }
+  })
+}
diff --git a/src/api/orderManage/erpToMes.js b/src/api/orderManage/erpToMes.js
new file mode 100644
index 0000000..c0698aa
--- /dev/null
+++ b/src/api/orderManage/erpToMes.js
@@ -0,0 +1,40 @@
+/*
+ * @Author: zwq
+ * @Date: 2021-06-24 15:44:43
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-07-19 15:14:23
+ * @Description:
+ */
+
+import request from '@/utils/request'
+
+export function erpToMesMaterialList(data) { // 获取列表
+  return request({
+    url: '/order/erp-to-mes-materials-info/page',
+    method: 'post',
+    data
+  })
+}
+
+export function erpToMesMaterialBomList(data) { // 获取列表
+  return request({
+    url: '/order/erp-to-mes-materials-bom-info/page',
+    method: 'post',
+    data
+  })
+}
+export function erpToMesOrderList(data) { // 获取列表
+  return request({
+    url: '/order/erp-to-mes-order-info/page',
+    method: 'post',
+    data
+  })
+}
+
+export function mesToErpAdd(data) { // 新增mesToErp单条数据
+  return request({
+    url: '/order/mes-to-erp-order/add',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/api/orderManage/infoTrack/infoTrack.js b/src/api/orderManage/infoTrack/infoTrack.js
new file mode 100644
index 0000000..82becee
--- /dev/null
+++ b/src/api/orderManage/infoTrack/infoTrack.js
@@ -0,0 +1,54 @@
+/*
+ * @Author: zwq
+ * @Date: 2020-12-29 16:00:14
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-30 18:05:12
+ * @Description:
+ */
+import request from '@/utils/request'
+
+export function equipmentEventTrackList(data) { // 获取设备事件追溯列表
+  return request({
+    url: '/order/wo-equipment-event-param/page',
+    method: 'post',
+    data
+  })
+}
+
+export function equipmentParametersTrackList(data) { // 获取设备参数追溯列表
+  return request({
+    url: '/order/wo-equipment-event-param/page-equipment-param-review',
+    method: 'post',
+    data
+  })
+}
+export function processSubstrateDataTrackList(data) { // 获取加工基板数据追溯列表
+  return request({
+    url: '/order/wo-substrate/page-review',
+    method: 'post',
+    data
+  })
+}
+export function substrateParametersTrackList(data) { // 获取基板参数追溯表
+  return request({
+    url: '/order/wo-equipment-event-param/page-substrate-param',
+    method: 'post',
+    data
+  })
+}
+
+export function substrateEquipmentList(data) { // 获取基板设备追溯列表
+  return request({
+    url: '/order/wo-equipment-event-param/substrate-equipment-exchanage',
+    method: 'post',
+    data
+  })
+}
+
+export function substrateEquipmentDetail(data) { // 获取基板设备追溯详情
+  return request({
+    url: '/order/wo-equipment-event-param/view-device-parameters',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/api/orderManage/order/order.js b/src/api/orderManage/order/order.js
new file mode 100644
index 0000000..f50c37e
--- /dev/null
+++ b/src/api/orderManage/order/order.js
@@ -0,0 +1,74 @@
+/*
+ * @Author: zwq
+ * @Date: 2020-12-29 16:00:14
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-21 16:45:02
+ * @Description:
+ */
+import request from '@/utils/request'
+
+export function orderList(data) { // 获取订单列表
+  return request({
+    url: '/order/order/page',
+    method: 'post',
+    data
+  })
+}
+
+export function orderDetail(id) { // 获取订单单条数据
+  const data = {
+    'id': id
+  }
+  return request({
+    url: '/order/order/get',
+    method: 'post',
+    data
+  })
+}
+
+export function orderUpdate(data) { // 更新订单单条数据
+  return request({
+    url: '/order/order/update',
+    method: 'post',
+    data
+  })
+}
+
+export function orderAdd(data) { // 新增订单单条数据
+  return request({
+    url: '/order/order/add',
+    method: 'post',
+    data
+  })
+}
+
+export function orderCode() { // 获取订单code
+  return request({
+    url: '/order/order/get-code',
+    method: 'post'
+  })
+}
+
+export function orderDelete(id) { // 删除订单单条数据
+  return request({
+    url: '/order/order/delete',
+    method: 'post',
+    data: { id }
+  })
+}
+
+export function reportList(data) { // 获取订单报工信息
+  return request({
+    url: '/order/wo-completion-report/page',
+    method: 'post',
+    data
+  })
+}
+
+export function getPower(data) {
+  return request({
+    url: '/order/work-order-power/page',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/api/orderManage/powerClassification.js b/src/api/orderManage/powerClassification.js
new file mode 100644
index 0000000..0d3b4a8
--- /dev/null
+++ b/src/api/orderManage/powerClassification.js
@@ -0,0 +1,66 @@
+/*
+ * @Author: zwq
+ * @Date: 2020-12-29 16:00:14
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-05-28 15:38:19
+ * @Description:
+ */
+import request from '@/utils/request'
+
+export function powerClassificationList(data) { // 获取powerClassification列表
+  return request({
+    url: '/order/power-classification/page',
+    method: 'post',
+    data
+  })
+}
+
+export function powerClassificationTree(data) { // 获取powerClassification列表
+  return request({
+    url: '/order/power-classification/tree',
+    method: 'post',
+    data
+  })
+}
+
+export function powerClassificationDetail(id) { // 获取powerClassification单条数据
+  const data = {
+    'id': id
+  }
+  return request({
+    url: '/order/power-classification/get',
+    method: 'post',
+    data
+  })
+}
+
+export function powerClassificationUpdate(data) { // 更新powerClassification单条数据
+  return request({
+    url: '/order/power-classification/update',
+    method: 'post',
+    data
+  })
+}
+
+export function powerClassificationAdd(data) { // 新增powerClassification单条数据
+  return request({
+    url: '/order/power-classification/add',
+    method: 'post',
+    data
+  })
+}
+
+export function powerClassificationCode() { // 获取powerClassificationcode
+  return request({
+    url: '/order/power-classification/get-code',
+    method: 'post'
+  })
+}
+
+export function powerClassificationDelete(id) { // 删除powerClassification单条数据
+  return request({
+    url: '/order/power-classification/delete',
+    method: 'post',
+    data: { id }
+  })
+}
diff --git a/src/api/orderManage/substrateBatch.js b/src/api/orderManage/substrateBatch.js
new file mode 100644
index 0000000..baeeaf3
--- /dev/null
+++ b/src/api/orderManage/substrateBatch.js
@@ -0,0 +1,58 @@
+/*
+ * @Author: zwq
+ * @Date: 2020-12-29 16:00:14
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-30 18:06:31
+ * @Description:
+ */
+import request from '@/utils/request'
+
+export function substrateBatchList(data) { // 获取基板批次列表
+  return request({
+    url: '/order/substrate-batch-info/page',
+    method: 'post',
+    data
+  })
+}
+
+export function substrateBatchDetail(id) { // 获取基板批次单条数据
+  const data = {
+    'id': id
+  }
+  return request({
+    url: '/order/substrate-batch-info/get',
+    method: 'post',
+    data
+  })
+}
+
+export function substrateBatchUpdate(data) { // 更新基板批次单条数据
+  return request({
+    url: '/order/substrate-batch-info/update',
+    method: 'post',
+    data
+  })
+}
+
+export function substrateBatchAdd(data) { // 新增基板批次单条数据
+  return request({
+    url: '/order/substrate-batch-info/add',
+    method: 'post',
+    data
+  })
+}
+
+export function substrateBatchCode() { // 获取基板批次code
+  return request({
+    url: '/order/substrate-batch-info/get-code',
+    method: 'post'
+  })
+}
+
+export function substrateBatchDelete(id) { // 删除基板批次单条数据
+  return request({
+    url: '/order/substrate-batch-info/delete',
+    method: 'post',
+    data: { id }
+  })
+}
diff --git a/src/api/orderManage/substrateBatchAttr.js b/src/api/orderManage/substrateBatchAttr.js
new file mode 100644
index 0000000..f271f4b
--- /dev/null
+++ b/src/api/orderManage/substrateBatchAttr.js
@@ -0,0 +1,58 @@
+/*
+ * @Author: zwq
+ * @Date: 2020-12-29 16:00:14
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-30 18:34:26
+ * @Description:
+ */
+import request from '@/utils/request'
+
+export function substrateBatchAttrList(data) { // 获取基板批次列表
+  return request({
+    url: '/order/sub-batch-info-attr/page',
+    method: 'post',
+    data
+  })
+}
+
+export function substrateBatchAttrDetail(id) { // 获取基板批次单条数据
+  const data = {
+    'id': id
+  }
+  return request({
+    url: '/order/sub-batch-info-attr/get',
+    method: 'post',
+    data
+  })
+}
+
+export function substrateBatchAttrUpdate(data) { // 更新基板批次单条数据
+  return request({
+    url: '/order/sub-batch-info-attr/update',
+    method: 'post',
+    data
+  })
+}
+
+export function substrateBatchAttrAdd(data) { // 新增基板批次单条数据
+  return request({
+    url: '/order/sub-batch-info-attr/add',
+    method: 'post',
+    data
+  })
+}
+
+export function substrateBatchAttrCode() { // 获取基板批次code
+  return request({
+    url: '/order/sub-batch-info-attr/get-code',
+    method: 'post'
+  })
+}
+
+export function substrateBatchAttrDelete(id) { // 删除基板批次单条数据
+  return request({
+    url: '/order/sub-batch-info-attr/delete',
+    method: 'post',
+    data: { id }
+  })
+}
diff --git a/src/api/orderManage/workOrder/workOrder.js b/src/api/orderManage/workOrder/workOrder.js
new file mode 100644
index 0000000..340a188
--- /dev/null
+++ b/src/api/orderManage/workOrder/workOrder.js
@@ -0,0 +1,117 @@
+/*
+ * @Author: zwq
+ * @Date: 2020-12-29 16:00:14
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-20 10:30:39
+ * @Description:
+ */
+import request from '@/utils/request'
+
+export function workOrderList(data) { // 获取工单列表
+  return request({
+    url: '/order/work-order/page',
+    method: 'post',
+    data
+  })
+}
+
+export function workOrderDetail(id) { // 获取工单单条数据
+  const data = {
+    'id': id
+  }
+  return request({
+    url: '/order/work-order/get',
+    method: 'post',
+    data
+  })
+}
+
+export function workOrderUpdate(data) { // 更新工单单条数据
+  return request({
+    url: '/order/work-order/update',
+    method: 'post',
+    data
+  })
+}
+
+export function workOrderAdd(data) { // 新增工单单条数据
+  return request({
+    url: '/order/work-order/add',
+    method: 'post',
+    data
+  })
+}
+
+export function workOrderCode() { // 获取工单code
+  return request({
+    url: '/order/work-order/get-code',
+    method: 'post'
+  })
+}
+
+export function workOrderDelete(id) { // 删除工单单条数据
+  return request({
+    url: '/order/work-order/delete',
+    method: 'post',
+    data: { id }
+  })
+}
+
+export function workOrderIssueList(data) { // 获取工单下发列表
+  return request({
+    url: '/order/wo-sync/page',
+    method: 'post',
+    data
+  })
+}
+
+export function packagingBoxList(data) { // 获取包装基板列表
+  return request({
+    url: '/order/wo-packaging-box-substrate/page',
+    method: 'post',
+    data
+  })
+}
+
+export function packagingList(data) { // 获取包装标签列表
+  return request({
+    url: '/order/wo-packaging-box/page',
+    method: 'post',
+    data
+  })
+}
+
+export function packagingDetail(id) { // 获取包装标签详情
+  const data = {
+    'id': id
+  }
+  return request({
+    url: '/order/wo-packaging-box/get',
+    method: 'post',
+    data
+  })
+}
+
+export function syncAdd(data) { // 新增下发工单单条数据
+  return request({
+    url: '/order/wo-sync/add',
+    method: 'post',
+    data
+  })
+}
+
+export function packagingInventoryList(data) { // 获取包装清单列表
+  return request({
+    url: '/order/wo-packaging-box/page-for-inventory',
+    method: 'post',
+    data
+  })
+}
+
+export function updateForStatus(data) { // 激活
+  return request({
+    url: '/order/work-order/updateForStatus',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/api/org.js b/src/api/org.js
new file mode 100644
index 0000000..9199156
--- /dev/null
+++ b/src/api/org.js
@@ -0,0 +1,60 @@
+/*
+ * @Date: 2021-01-04 17:34:38
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-04-12 14:23:30
+ * @FilePath: \basic-admin\src\api\org.js
+ * @Description: 框架基础模块——组织结构
+ */
+import request from '@/utils/request'
+
+// 获取组织结构列表
+export function getOrgList(data) {
+  return request({
+    url: '/upms/org/page',
+    method: 'post',
+    data
+  })
+}
+
+export function getOrgDetail(id) { // 获取组织结构单条数据
+  return request({
+    url: '/upms/org/get',
+    method: 'post',
+    data: { id }
+  })
+}
+
+// export function getOrgAllList(data) {
+//   return request({
+//     url: '/upms/org/list',
+//     method: 'post',
+//     data
+//   })
+// }
+
+// 添加组织结构
+export function addOrg(data) {
+  return request({
+    url: '/upms/org/add',
+    method: 'post',
+    data
+  })
+}
+
+// 修改组织
+export function editOrg(data) {
+  return request({
+    url: '/upms/org/update',
+    method: 'post',
+    data
+  })
+}
+
+// 删除组织结构
+export function delOrg(id) {
+  return request({
+    url: '/upms/org/delete',
+    method: 'post',
+    data: { id }
+  })
+}
diff --git a/src/api/packing-manage/packing-label.js b/src/api/packing-manage/packing-label.js
new file mode 100644
index 0000000..68ffbef
--- /dev/null
+++ b/src/api/packing-manage/packing-label.js
@@ -0,0 +1,42 @@
+import request from '@/utils/request'
+
+export function page(data) {
+  return request({
+    url: '/report/print-model/page',
+    method: 'post',
+    data
+  })
+}
+
+export function del(data) {
+  return request({
+    url: '/report/print-model/delete',
+    method: 'post',
+    data
+  })
+}
+
+export function add(data) {
+  return request({
+    url: '/report/print-model/add',
+    method: 'post',
+    data
+  })
+}
+
+export function update(data) {
+  return request({
+    url: '/report/print-model/update',
+    method: 'post',
+    data
+  })
+}
+
+export function getInfo(data) {
+  return request({
+    url: '/report/print-model/get',
+    method: 'post',
+    data
+  })
+}
+
diff --git a/src/api/quality-manage/detecParam.js b/src/api/quality-manage/detecParam.js
new file mode 100644
index 0000000..76f6b47
--- /dev/null
+++ b/src/api/quality-manage/detecParam.js
@@ -0,0 +1,63 @@
+/*
+ * @Author: zwq
+ * @Date: 2020-12-29 16:00:14
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-04-15 09:07:22
+ * @Description:
+ */
+import request from '@/utils/request'
+
+export function detecParamList(data) { // 获取检测参数列表
+  return request({
+    url: '/quality/offline-detec-param/displayAllDetectEQ',
+    method: 'post',
+    data
+  })
+}
+
+export function detecParamDetail(data) { // 获取单条数据
+  return request({
+    url: '/quality/offline-detec-param/page',
+    method: 'post',
+    data
+  })
+}
+
+export function ParamDetail(id) { // 获取单条数据
+  return request({
+    url: '/quality/offline-detec-param/findById',
+    method: 'post',
+    data: { id }
+  })
+}
+
+export function detecParamUpdate(data) { // 更新单条数据
+  return request({
+    url: '/quality/offline-detec-param/update',
+    method: 'post',
+    data
+  })
+}
+
+export function detecParamAdd(data) { // 新增单条数据
+  return request({
+    url: '/quality/offline-detec-param/create',
+    method: 'post',
+    data
+  })
+}
+
+export function detecParamCode() { // 获取code
+  return request({
+    url: '/quality/offline-detec-param/getGeneratorCode',
+    method: 'get'
+  })
+}
+
+export function detecParamDelete(id) { // 删除单条数据
+  return request({
+    url: '/quality/offline-detec-param/delete',
+    method: 'post',
+    data: { id }
+  })
+}
diff --git a/src/api/quality-manage/detecRegistration.js b/src/api/quality-manage/detecRegistration.js
new file mode 100644
index 0000000..05508f4
--- /dev/null
+++ b/src/api/quality-manage/detecRegistration.js
@@ -0,0 +1,56 @@
+/*
+ * @Author: zwq
+ * @Date: 2020-12-29 16:00:14
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-05-25 15:57:55
+ * @Description:
+ */
+import request from '@/utils/request'
+
+export function detecRegistrationList(data) { // 获取检测登记列表
+  return request({
+    url: '/quality/offline-detec-register/page',
+    method: 'post',
+    data
+  })
+}
+
+export function detecRegistrationDetail(id) { // 获取检测登记单条数据
+  return request({
+    url: '/quality/offline-detec-register/findById',
+    method: 'post',
+    data: { id }
+  })
+}
+
+export function detecRegistrationUpdate(data) { // 更新检测登记单条数据
+  return request({
+    url: '/quality/offline-detec-register/update',
+    method: 'post',
+    data
+  })
+}
+
+export function detecRegistrationAdd(data) { // 新增检测登记单条数据
+  return request({
+    url: '/quality/offline-detec-register/create',
+    method: 'post',
+    data
+  })
+}
+
+export function detecRegistrationDelete(id) { // 删除检测登记单条数据
+  return request({
+    url: '/quality/offline-detec-register/delete',
+    method: 'post',
+    data: { id }
+  })
+}
+
+export function getDetecRegistrationList(data) { // 获取检测登记列表
+  return request({
+    url: '/quality/offline-detec-register/page',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/api/quality-manage/knowledge.js b/src/api/quality-manage/knowledge.js
new file mode 100644
index 0000000..c60f6d0
--- /dev/null
+++ b/src/api/quality-manage/knowledge.js
@@ -0,0 +1,48 @@
+/*
+ * @Author: your name
+ * @Date: 2021-07-12 15:44:43
+ * @LastEditTime: 2021-07-14 13:51:48
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \mt-bus-fe\src\api\quality-manage\knowledge.js
+ */
+import request from '@/utils/request'
+export function getKnowList(data) {
+  return request({
+    url: '/equipment/maintenance-knowledge/findAllByTitle',
+    method: 'post',
+    data
+  })
+}
+
+export function getDataById(data) {
+  return request({
+    url: '/equipment/maintenance-knowledge/findAllById',
+    method: 'post',
+    data
+  })
+}
+
+export function addKnowledge(data) {
+  return request({
+    url: '/equipment/maintenance-knowledge/create',
+    method: 'post',
+    data
+  })
+}
+
+export function updateData(data) {
+  return request({
+    url: '/equipment/maintenance-knowledge/update',
+    method: 'post',
+    data
+  })
+}
+
+export function delData(data) {
+  return request({
+    url: '/equipment/maintenance-knowledge/delete',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/api/quality-manage/plan.js b/src/api/quality-manage/plan.js
new file mode 100644
index 0000000..69aa4ce
--- /dev/null
+++ b/src/api/quality-manage/plan.js
@@ -0,0 +1,109 @@
+import request from '@/utils/request'
+
+// 质量检测计划
+export function getPlanList(data) {
+  return request({
+    url: '/quality/quality-inspection-plan/page',
+    method: 'post',
+    data
+  })
+}
+
+export function getPlanInfo(data) {
+  return request({
+    url: '/quality/quality-inspection-plan/findById',
+    method: 'post',
+    data
+  })
+}
+
+export function addPlanInfo(data) {
+  return request({
+    url: '/quality/quality-inspection-plan/create',
+    method: 'post',
+    data
+  })
+}
+
+export function editPlanInfo(data) {
+  return request({
+    url: '/quality/quality-inspection-plan/update',
+    method: 'post',
+    data
+  })
+}
+
+export function delPlanInfo(data) {
+  return request({
+    url: '/quality/quality-inspection-plan/delete',
+    method: 'post',
+    data
+  })
+}
+
+// 质量检测计划参数设置
+export function getPlanParamList(data) {
+  return request({
+    url: '/basic/detect-equipment-area/list-param-by-detect-distribution-area-id',
+    method: 'post',
+    data
+  })
+}
+
+export function getPlanParamInfo(data) {
+  return request({
+    url: '/basic/detect-equipment-area/get',
+    method: 'post',
+    data
+  })
+}
+
+export function addPlanParamInfo(data) {
+  return request({
+    url: '/basic/detect-equipment-area/create',
+    method: 'post',
+    data
+  })
+}
+
+export function editPlanParamInfo(data) {
+  return request({
+    url: '/basic/detect-equipment-area/update',
+    method: 'post',
+    data
+  })
+}
+
+export function delPlanParamInfo(data) {
+  return request({
+    url: '/basic/detect-equipment-area/delete',
+    method: 'post',
+    data
+  })
+}
+
+// 质量检测计划下发
+export function sendPlan(data) {
+  return request({
+    url: '/quality/issue-test-plan/create',
+    method: 'post',
+    data
+  })
+}
+
+export function sentPlanList(data) {
+  return request({
+    url: '/quality/issue-test-plan/page',
+    method: 'post',
+    data
+  })
+}
+
+// 获取下发区域
+export function getArea(data) {
+  return request({
+    url: '/basic/detect-distribution-area/page',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/api/quality-manage/scrap.js b/src/api/quality-manage/scrap.js
new file mode 100644
index 0000000..95becf4
--- /dev/null
+++ b/src/api/quality-manage/scrap.js
@@ -0,0 +1,66 @@
+/*
+ * @Date: 2021-03-15 10:27:40
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-09 14:35:26
+ * @FilePath: \basic-admin\src\api\quality-manage\scrap.js
+ * @Description:
+ */
+import request from '@/utils/request'
+
+export function getScrapList(data) {
+  return request({
+    url: '/quality/scrap/page',
+    method: 'post',
+    data
+  })
+}
+
+export function delScrapInfo(data) {
+  return request({
+    url: '/quality/scrap/delete',
+    method: 'post',
+    data
+  })
+}
+
+export function editScrapInfo(data) {
+  return request({
+    url: '/quality/scrap/update',
+    method: 'post',
+    data
+  })
+}
+
+export function addScrapInfo(data) {
+  return request({
+    url: '/quality/scrap/create',
+    method: 'post',
+    data
+  })
+}
+export function getScrapInfo(data) {
+  return request({
+    url: '/quality/scrap/findById',
+    method: 'post',
+    data
+  })
+}
+
+// 废品报废 原因
+export function getscrapReason(data) {
+  return request({
+    url: '/basic/scrap-information/get',
+    method: 'post',
+    data
+  })
+}
+
+// 根据设备id查询肺片等级
+export function getScrap(id) {
+  return request({
+    url: '/basic/equipment-scraps-grade/getScrapsGradeByEquipmentId',
+    method: 'post',
+    data: { id }
+  })
+}
+
diff --git a/src/api/quality-manage/scrapCategoryStatistics.js b/src/api/quality-manage/scrapCategoryStatistics.js
new file mode 100644
index 0000000..1cc78f4
--- /dev/null
+++ b/src/api/quality-manage/scrapCategoryStatistics.js
@@ -0,0 +1,25 @@
+/*
+ * @Date: 2021-03-15 10:27:40
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-09 14:35:26
+ * @FilePath: \basic-admin\src\api\quality-manage\scrap.js
+ * @Description:
+ */
+import request from '@/utils/request'
+
+export function getList(data) {
+  return request({
+    url: '/quality/scrap/findReportByEquipmentId',
+    method: 'post',
+    data
+  })
+}
+
+// 废品报废 原因
+export function getscrapReason(data) {
+  return request({
+    url: '/basic/scrap-information/get',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/api/report-manage/formSort.js b/src/api/report-manage/formSort.js
new file mode 100644
index 0000000..789a2ec
--- /dev/null
+++ b/src/api/report-manage/formSort.js
@@ -0,0 +1,56 @@
+/*
+ * @Author: gtz
+ * @Date: 2021-04-01 09:24:20
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-04-16 13:24:51
+ * @Description: file content
+ */
+import request from '@/utils/request'
+
+export function page(data) {
+  return request({
+    url: '/report/report-sheet-category/page',
+    method: 'post',
+    data
+  })
+}
+
+export function list(data) {
+  return request({
+    url: '/report/report-sheet-category/list',
+    method: 'post',
+    data
+  })
+}
+
+export function del(data) {
+  return request({
+    url: '/report/report-sheet-category/delete',
+    method: 'post',
+    data
+  })
+}
+
+export function update(data) {
+  return request({
+    url: '/report/report-sheet-category/update',
+    method: 'post',
+    data
+  })
+}
+
+export function add(data) {
+  return request({
+    url: '/report/report-sheet-category/add',
+    method: 'post',
+    data
+  })
+}
+
+export function getData(data) {
+  return request({
+    url: '/report/report-sheet-category/get',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/api/report-manage/report.js b/src/api/report-manage/report.js
new file mode 100644
index 0000000..ada2957
--- /dev/null
+++ b/src/api/report-manage/report.js
@@ -0,0 +1,49 @@
+/*
+ * @Author: gtz
+ * @Date: 2021-03-07 18:39:03
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-04-22 20:03:49
+ * @Description: file content
+ */
+import request from '@/utils/request'
+
+export function page(data) {
+  return request({
+    url: '/report/report-sheet/page',
+    method: 'post',
+    data
+  })
+}
+
+export function del(data) {
+  return request({
+    url: '/report/report-sheet/delete',
+    method: 'post',
+    data
+  })
+}
+
+export function getInfo(data) {
+  return request({
+    url: '/report/report-sheet/get',
+    method: 'post',
+    data
+  })
+}
+
+export function update(data) {
+  return request({
+    url: '/report/report-sheet/update',
+    method: 'post',
+    data
+  })
+}
+
+// 报表分类列表
+export function listCategory(data) {
+  return request({
+    url: '/report/report-sheet-category/list',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/api/role.js b/src/api/role.js
index 959bbd2..4d2a51b 100644
--- a/src/api/role.js
+++ b/src/api/role.js
@@ -1,38 +1,87 @@
+/*
+ * @Date: 2020-12-14 09:07:03
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-07-21 15:48:05
+ * @FilePath: \basic-admin\src\api\role.js
+ * @Description: 角色权限api接口定义
+ */
 import request from '@/utils/request'
 
-export function getRoutes() {
+// 获取角色详细信息
+export function getRoleInfo(data) {
   return request({
-    url: '/vue-element-admin/routes',
-    method: 'get'
-  })
-}
-
-export function getRoles() {
-  return request({
-    url: '/vue-element-admin/roles',
-    method: 'get'
-  })
-}
-
-export function addRole(data) {
-  return request({
-    url: '/vue-element-admin/role',
+    url: `/upms/role/get`,
     method: 'post',
     data
   })
 }
 
-export function updateRole(id, data) {
+export function RoleCode() { // 获取code
   return request({
-    url: `/vue-element-admin/role/${id}`,
-    method: 'put',
+    url: '/upms/role/get-code',
+    method: 'post'
+  })
+}
+
+// 获取角色列表
+export function getRoleList(data) {
+  return request({
+    url: '/upms/role/list',
+    method: 'post',
     data
   })
 }
 
-export function deleteRole(id) {
+// 添加角色
+export function addRole(data) {
   return request({
-    url: `/vue-element-admin/role/${id}`,
-    method: 'delete'
+    url: '/upms/role/add',
+    method: 'post',
+    data
+  })
+}
+
+// 修改角色
+export function updateRole(data) {
+  return request({
+    url: '/upms/role/update',
+    method: 'post',
+    data
+  })
+}
+
+// 删除角色
+export function deleteRole(data) {
+  return request({
+    url: `/upms/role/delete`,
+    method: 'post',
+    data
+  })
+}
+
+// 启停角色
+export function enableRole(data) {
+  return request({
+    url: `/upms/role/enabled`,
+    method: 'post',
+    data
+  })
+}
+
+// 用户-角色关联授权
+export function saveUserRole(data) {
+  return request({
+    url: '/upms/role/saveUserRole',
+    method: 'post',
+    data
+  })
+}
+
+// 用户-角色关联获取
+export function listByUser(id) {
+  return request({
+    url: '/upms/role/listByUser',
+    method: 'post',
+    data: { id }
   })
 }
diff --git a/src/api/team-manage/team-plan.js b/src/api/team-manage/team-plan.js
new file mode 100644
index 0000000..711fd2e
--- /dev/null
+++ b/src/api/team-manage/team-plan.js
@@ -0,0 +1,105 @@
+import request from '@/utils/request'
+
+/**
+  *
+  * @param {
+  "current": 1,
+  "enabled": 1,
+  "handoverStatus": 0,
+  "id": 1,
+  "keywords": "白班1",
+  "planHandoverBegTime": "2021-01-07T12:20:43",
+  "planHandoverEndTime": "2021-01-07T12:20:43",
+  "planOnlineBegTime": "2021-01-07T12:20:43",
+  "planOnlineEndTime": "2021-01-07T12:20:43",
+  "planTeamId": 1,
+  "size": 10
+}
+  */
+export function page(data) {
+  return request({
+    url: '/team/team-record-plan/page',
+    method: 'post',
+    data
+  })
+}
+
+export function offlineUpdate(data) {
+  return request({
+    url: '/team/team-record/offlineUpdate',
+    method: 'post',
+    data
+  })
+}
+// 获取所有的专业
+export function planProfessionVoList(data) {
+  return request({
+    url: '/team/team-record-plan/planProfessionVoList',
+    method: 'post',
+    data
+  })
+}
+// 获取所有的员工
+export function planWorkerVoList(data) {
+  return request({
+    url: '/team/team-record-plan/planWorkerVoList',
+    method: 'post',
+    data
+  })
+}
+
+// 获取所有的员工
+export function add(data) {
+  return request({
+    url: '/team/team-record-plan/add',
+    method: 'post',
+    data
+  })
+}
+
+export function update(data) {
+  return request({
+    url: '/team/team-record-plan/update',
+    method: 'post',
+    data
+  })
+}
+
+export function getInfo(data) {
+  return request({
+    url: '/team/team-record-plan/get',
+    method: 'post',
+    data
+  })
+}
+/**
+ *
+ * @param {获取计划班组下拉} data
+ */
+export function planTeamSelectList(data) {
+  return request({
+    url: 'team/team-record-plan/planTeamSelectList',
+    method: 'post',
+    data
+  })
+}
+
+/**
+ *
+ * @param {获取计划班组下拉} data
+ */
+export function planTeamSelectListNew(data) {
+  return request({
+    url: 'team/team-record-plan/planTeamSelectListNew',
+    method: 'post',
+    data
+  })
+}
+
+export function del(data) {
+  return request({
+    url: '/team/team-record-plan/delete',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/api/team-manage/team.js b/src/api/team-manage/team.js
new file mode 100644
index 0000000..662edfc
--- /dev/null
+++ b/src/api/team-manage/team.js
@@ -0,0 +1,133 @@
+/*
+ * @Author: your name
+ * @Date: 2021-07-09 17:04:34
+ * @LastEditTime: 2021-07-14 13:51:35
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \mt-bus-fe\src\api\team-manage\team.js
+ */
+import request from '@/utils/request'
+
+export function list(data) {
+  return request({
+    url: '/team/team-record/page',
+    method: 'post',
+    data
+  })
+}
+
+export function getInfo(data) {
+  return request({
+    url: '/team/team-record/get',
+    method: 'post',
+    data
+  })
+}
+// 获取所有的员工
+export function add(data) {
+  return request({
+    url: '/team/team-record/add',
+    method: 'post',
+    data
+  })
+}
+
+export function offlineUpdate(data) {
+  return request({
+    url: '/team/team-record/offlineUpdate',
+    method: 'post',
+    data
+  })
+}
+
+// 获取所有的专业
+export function professionVoList(data) {
+  return request({
+    url: 'team/team-record/professionVoList',
+    method: 'post',
+    data
+  })
+}
+// 获取所有的员工
+export function workerVoList(data) {
+  return request({
+    url: '/team/team-record/workerVoList',
+    method: 'post',
+    data
+  })
+}
+
+export function teamSelectList(data) {
+  return request({
+    url: 'team/team-record/teamSelectList',
+    method: 'post',
+    data
+  })
+}
+
+export function del(data) {
+  return request({
+    url: '/team/team-record/delete',
+    method: 'post',
+    data
+  })
+}
+
+export function pageMajor(data) {
+  return request({
+    url: '/basic/major/page',
+    method: 'post',
+    data
+  })
+}
+
+export function pageWork(data) {
+  return request({
+    url: '/basic/worker/page',
+    method: 'post',
+    data
+  })
+}
+
+// 获取事件日志列表
+export function showLogPage(data) {
+  return request({
+    url: '/team/team-event-log-detail/page',
+    method: 'post',
+    data
+  })
+}
+
+// 删除事件日志信息
+export function delData(data) {
+  return request({
+    url: '/team/team-event-log-detail/delete',
+    method: 'post',
+    data
+  })
+}
+
+// 获取事件日志单挑信息
+export function getDataById(data) {
+  return request({
+    url: '/team/team-event-log-detail/get',
+    method: 'post',
+    data
+  })
+}
+
+export function addLog(data) {
+  return request({
+    url: '/team/team-event-log-detail/add',
+    method: 'post',
+    data
+  })
+}
+
+export function updateLog(data) {
+  return request({
+    url: '/team/team-event-log-detail/update',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/api/tree.js b/src/api/tree.js
new file mode 100644
index 0000000..eb329e0
--- /dev/null
+++ b/src/api/tree.js
@@ -0,0 +1,17 @@
+/*
+ * @Author: gtz
+ * @Date: 2021-04-25 14:31:11
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-06-16 09:45:14
+ * @Description: file content
+ */
+import request from '@/utils/request'
+
+// 获取树形结构
+export function getTreeList(data) {
+  return request({
+    url: `/material/substrate-tree/getTree`,
+    method: 'post',
+    data
+  })
+}
diff --git a/src/api/user.js b/src/api/user.js
index b8b8741..0521416 100644
--- a/src/api/user.js
+++ b/src/api/user.js
@@ -1,24 +1,117 @@
+/*
+ * @Date: 2020-12-14 09:07:03
+ * @LastEditors: guo
+ * @LastEditTime: 2021-01-11 09:40:09
+ * @FilePath: \basic-admin\src\api\user.js
+ * @Description: 用户管理 & 登录用户的相关api接口定义
+ */
 import request from '@/utils/request'
 
 export function login(data) {
-  return request({
-    url: '/vue-element-admin/user/login',
-    method: 'post',
-    data
+  const dto = Object.assign(data, {
+    appType: 1,
+    userType: 1
   })
-}
-
-export function getInfo(token) {
   return request({
-    url: '/vue-element-admin/user/info',
-    method: 'get',
-    params: { token }
+    url: '/passport/login',
+    method: 'post',
+    data: dto
   })
 }
 
 export function logout() {
   return request({
-    url: '/vue-element-admin/user/logout',
+    url: '/api/session/invalidateSessionByMobile',
     method: 'post'
   })
 }
+// 获取当前登录的用户信息
+export function getUserInfo(data) {
+  return request({
+    url: '/passport/getLoginUser',
+    method: 'post',
+    data
+  })
+}
+
+// 修改当前用户密码
+export function editUserPW(data) {
+  return request({
+    url: '/upms/user/modifyPassword',
+    method: 'post',
+    data
+  })
+}
+
+// 当前用户 找回密码
+export function findUserPW(data) {
+  return request({
+    url: '/upms/user/findPassword',
+    method: 'post',
+    data
+  })
+}
+
+// 下面为：用户管理列表
+// 获取用户列表 （根据需求可以考虑换成带分页的 /upms/user/page）
+export function getUserList(data) {
+  return request({
+    url: '/upms/user/page',
+    method: 'post',
+    data
+  })
+}
+
+// 新增用户
+export function addUser(data) {
+  return request({
+    url: '/upms/user/add',
+    method: 'post',
+    data
+  })
+}
+
+// 删除用户
+export function delUser(data) {
+  return request({
+    url: '/upms/user/delete',
+    method: 'post',
+    data
+  })
+}
+
+// 修改用户信息
+export function editUser(data) {
+  return request({
+    url: '/upms/user/update',
+    method: 'post',
+    data
+  })
+}
+
+// 获取用户详细信息
+export function getUserDetail(data) {
+  return request({
+    url: '/upms/user/get',
+    method: 'post',
+    data
+  })
+}
+
+// 管理员重置用户的密码
+export function resetUserPW(data) {
+  return request({
+    url: '/upms/user/resetPassword',
+    method: 'post',
+    data
+  })
+}
+
+// 启停用户信息
+export function enableUser(data) {
+  return request({
+    url: '/upms/user/enabled',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/assets/img/1.jpg b/src/assets/img/1.jpg
new file mode 100644
index 0000000..005bc57
Binary files /dev/null and b/src/assets/img/1.jpg differ
diff --git a/src/assets/img/Toughenedfurnace.png b/src/assets/img/Toughenedfurnace.png
new file mode 100644
index 0000000..80263bd
Binary files /dev/null and b/src/assets/img/Toughenedfurnace.png differ
diff --git a/src/assets/img/back.jpg b/src/assets/img/back.jpg
new file mode 100644
index 0000000..61df5c8
Binary files /dev/null and b/src/assets/img/back.jpg differ
diff --git a/src/assets/img/back.png b/src/assets/img/back.png
new file mode 100644
index 0000000..e9d7d39
Binary files /dev/null and b/src/assets/img/back.png differ
diff --git a/src/assets/img/back1.png b/src/assets/img/back1.png
new file mode 100644
index 0000000..8b811db
Binary files /dev/null and b/src/assets/img/back1.png differ
diff --git a/src/assets/img/cnbm.png b/src/assets/img/cnbm.png
new file mode 100644
index 0000000..ed7d3fd
Binary files /dev/null and b/src/assets/img/cnbm.png differ
diff --git a/src/assets/img/head-w.png b/src/assets/img/head-w.png
new file mode 100644
index 0000000..85dca60
Binary files /dev/null and b/src/assets/img/head-w.png differ
diff --git a/src/assets/img/head.png b/src/assets/img/head.png
new file mode 100644
index 0000000..0e5d248
Binary files /dev/null and b/src/assets/img/head.png differ
diff --git a/src/assets/img/login-back.jpg b/src/assets/img/login-back.jpg
new file mode 100644
index 0000000..cfed13e
Binary files /dev/null and b/src/assets/img/login-back.jpg differ
diff --git a/src/assets/img/login-new.jpg b/src/assets/img/login-new.jpg
new file mode 100644
index 0000000..b39ac14
Binary files /dev/null and b/src/assets/img/login-new.jpg differ
diff --git a/src/assets/img/status.png b/src/assets/img/status.png
new file mode 100644
index 0000000..283cdd4
Binary files /dev/null and b/src/assets/img/status.png differ
diff --git a/src/assets/libs/LodopFuncs.js b/src/assets/libs/LodopFuncs.js
new file mode 100644
index 0000000..5f81be7
--- /dev/null
+++ b/src/assets/libs/LodopFuncs.js
@@ -0,0 +1,155 @@
+
+/* eslint-disable */
+let CreatedOKLodop7766 = null; 
+let  CLodopIsLocal;
+
+//= ===判断是否需要 Web打印服务CLodop:===
+//= ==(不支持插件的浏览器版本需要用它)===
+export function needCLodop() {
+  try {
+    const ua = navigator.userAgent;
+    if (ua.match(/Windows\sPhone/i))
+    { return true; }
+    if (ua.match(/iPhone|iPod|iPad/i))
+    { return true; }
+    if (ua.match(/Android/i))
+    { return true; }
+    if (ua.match(/Edge\D?\d+/i))
+    { return true; }
+
+    const verTrident = ua.match(/Trident\D?\d+/i);
+    const verIE = ua.match(/MSIE\D?\d+/i);
+    let verOPR = ua.match(/OPR\D?\d+/i);
+    let verFF = ua.match(/Firefox\D?\d+/i);
+    const x64 = ua.match(/x64/i);
+    if ((!verTrident) && (!verIE) && (x64))
+    { return true; }
+    if (verFF) {
+      verFF = verFF[0].match(/\d+/);
+      if ((verFF[0] >= 41) || (x64))
+      { return true; }
+    } else if (verOPR) {
+      verOPR = verOPR[0].match(/\d+/);
+      if (verOPR[0] >= 32)
+      { return true; }
+    } else if ((!verTrident) && (!verIE)) {
+      let verChrome = ua.match(/Chrome\D?\d+/i);
+      if (verChrome) {
+        verChrome = verChrome[0].match(/\d+/);
+        if (verChrome[0] >= 41)
+        { return true; }
+      }
+    }
+    return false;
+  } catch (err) {
+    return true;
+  }
+}
+
+//= ===页面引用CLodop云打印必须的JS文件,用双端口(8000和18000）避免其中某个被占用：====
+if (needCLodop()) {
+  const src1 = 'http://localhost:8000/CLodopfuncs.js?priority=1';
+  const src2 = 'http://localhost:18000/CLodopfuncs.js?priority=0';
+
+  const head = document.head || document.getElementsByTagName('head')[0] || document.documentElement;
+  let oscript = document.createElement('script');
+  oscript.src = src1;
+  head.insertBefore(oscript, head.firstChild);
+  oscript = document.createElement('script');
+  oscript.src = src2;
+  head.insertBefore(oscript, head.firstChild);
+  CLodopIsLocal = !!((src1 + src2).match(/\/\/localho|\/\/127.0.0./i));
+}
+
+//= ===获取LODOP对象的主过程：====
+export function getLodop(oOBJECT, oEMBED) {
+  // const strHtmInstall = "<br><font color='#FF00FF'>打印控件未安装!点击这里<a href='http://www.lodop.net/demolist/install_lodop32.exe' target='_self'>执行安装</a>,安装后请刷新页面或重新进入。</font>";
+  // const strHtmUpdate = "<br><font color='#FF00FF'>打印控件需要升级!点击这里<a href='http://www.lodop.net/demolist/install_lodop32.exe' target='_self'>执行升级</a>,升级后请重新进入。</font>";
+  // const strHtm64_Install = "<br><font color='#FF00FF'>打印控件未安装!点击这里<a href='http://www.lodop.net/demolist/install_lodop64.exe' target='_self'>执行安装</a>,安装后请刷新页面或重新进入。</font>";
+  // const strHtm64_Update = "<br><font color='#FF00FF'>打印控件需要升级!点击这里<a href='http://www.lodop.net/demolist/install_lodop64.exe' target='_self'>执行升级</a>,升级后请重新进入。</font>";
+  const strHtmInstall = "";
+  const strHtmUpdate = "";
+  const strHtm64_Install = "";
+  const strHtm64_Update = "";
+  const strHtmFireFox = "<br><br><font color='#FF00FF'>（注意：如曾安装过Lodop旧版附件npActiveXPLugin,请在【工具】->【附加组件】->【扩展】中先卸它）</font>";
+  const strHtmChrome = "<br><br><font color='#FF00FF'>(如果此前正常，仅因浏览器升级或重安装而出问题，需重新执行以上安装）</font>";
+  // const strCLodopInstall_1 = "<br><font color='#FF00FF'>Web打印服务CLodop未安装启动，点击这里<a href='http://www.lodop.net/demolist/CLodop_Setup_for_Win32NT.exe' target='_self'>下载执行安装</a>";
+  const strCLodopInstall_1 = "";
+  const strCLodopInstall_2 = "<br>（若此前已安装过，可<a href='CLodop.protocol:setup' target='_self'>点这里直接再次启动</a>）";  
+  const strCLodopInstall_3 = '，成功后请刷新本页面。</font>';
+  // const strCLodopUpdate = "<br><font color='#FF00FF'>Web打印服务CLodop需升级!点击这里<a href='http://www.lodop.net/download/Lodop6.226_Clodop3.075.zip' target='_self'>执行升级</a>,升级后请刷新页面。</font>";
+  // const strCLodopUpdate = "<br><font color='#FF00FF'>Web打印服务需下载驱动!点击这里<a href='http://www.lodop.net/download/Lodop6.226_Clodop3.075.zip' target='_self'>下载安装</a>,升级后请刷新页面。</font>";
+  const strCLodopUpdate = "";
+  let LODOP;
+  try {
+    const ua = navigator.userAgent;
+    const isIE = !!(ua.match(/MSIE/i)) || !!(ua.match(/Trident/i));
+    if (needCLodop()) {
+      try {
+        LODOP = getCLodop();
+      } catch (err) {}
+      if (!LODOP && document.readyState !== 'complete') {
+        alert('网页还没下载完毕，请稍等一下再操作.');
+        return;
+      }
+      if (!LODOP) {
+        document.getElementById('lodopPrintTips').innerHTML = strCLodopUpdate + (CLodopIsLocal ? strCLodopInstall_2 : '') 
+        + strCLodopInstall_3;
+        return;
+      }
+      if (CLODOP.CVERSION < '3.0.7.5') {
+        document.getElementById('lodopPrintTips').innerHTML = strCLodopUpdate;
+      }
+      if (oEMBED && oEMBED.parentNode)
+      { oEMBED.parentNode.removeChild(oEMBED); }
+      if (oOBJECT && oOBJECT.parentNode)
+      { oOBJECT.parentNode.removeChild(oOBJECT); }
+
+    } else {
+      var is64IE = isIE && !!(ua.match(/x64/i));
+      //= ====如果页面有Lodop就直接使用，没有则新建:==========
+      if (oOBJECT || oEMBED) {
+        if (isIE)
+        { LODOP = oOBJECT; }
+        else
+        { LODOP = oEMBED; }
+      } else if (!CreatedOKLodop7766) {
+        LODOP = document.createElement('object');
+        LODOP.setAttribute('width', 0);
+        LODOP.setAttribute('height', 0);
+        LODOP.setAttribute('style', 'position:absolute;left:0px;top:-100px;width:0px;height:0px;');
+        if (isIE)
+        { LODOP.setAttribute('classid', 'clsid:2105C259-1E0C-4534-8141-A753534CB4CA'); }
+        else
+        { LODOP.setAttribute('type', 'application/x-print-lodop'); }
+        document.documentElement.appendChild(LODOP);
+        CreatedOKLodop7766 = LODOP;
+      } else
+      { LODOP = CreatedOKLodop7766; }
+      //= ====Lodop插件未安装时提示下载地址:==========
+      if ((!LODOP) || (!LODOP.VERSION)) {
+        if (ua.indexOf('Chrome') >= 0)
+        { document.getElementById('lodopPrintTips').innerHTML = strHtmChrome;}
+        if (ua.indexOf('Firefox') >= 0)
+        { document.getElementById('lodopPrintTips').innerHTML = strHtmFireFox; }
+        document.getElementById('lodopPrintTips').innerHTML = (is64IE ? strHtm64_Install : strHtmInstall);
+        return LODOP;
+      }
+    }
+    if (LODOP.VERSION < '6.2.2.6') {
+      if (!needCLodop())
+      { document.getElementById('lodopPrintTips').innerHTML = (is64IE ? strHtm64_Update : strHtmUpdate); }
+      return LODOP;
+    }
+    //= ==如下空白位置适合调用统一功能(如注册语句、语言选择等):==
+
+    //LODOP.SET_LICENSES("","13528A153BAEE3A0254B9507DCDE2839","","");
+    LODOP.SET_LICENSES("中建材轻工业自动化研究所有限公司","9475EC59D4A0EDFD94E4CABC35371EF0962","中建材輕工業自動化研究所有限公司","BAE54D29718D6641CC2BB8B3517DE30BA31");
+    LODOP.SET_LICENSES("THIRD LICENSE","","China Building Materials Light Industry Automation Research Institute Co., Ltd.","D5EE28A4D38B9A43824992DBBAE2749494A");
+    //= ======================================================
+    return LODOP;
+  } catch (err) {
+    alert(`getLodop出错:${err}`);
+  }
+}
+
diff --git a/src/components/BaseTable/index.bak.vue b/src/components/BaseTable/index.bak.vue
new file mode 100644
index 0000000..35531d9
--- /dev/null
+++ b/src/components/BaseTable/index.bak.vue
@@ -0,0 +1,87 @@
+<!--
+ * @Date: 2020-12-14 09:07:03
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-04-26 13:26:28
+ * @FilePath: \basic-admin\src\components\BaseTable\index.vue
+ * @Description:
+-->
+<template>
+  <div>
+    <el-table v-loading="isLoading" :data="renderData" :stripe="true" border fit highlight-current-row style="width: 100%">
+      <el-table-column v-if="page && limit" prop="_pageIndex" :label="'tableHeader.index' | i18nFilter" width="70" align="center" />
+      <el-table-column
+        v-for="item in tableConfig"
+        :key="item.prop"
+        v-bind="item"
+      >
+        <template slot-scope="scope">
+
+          <component :is="item.subcomponent" v-if="item.subcomponent" :inject-data="{...scope.row, ...item}" @emitData="emitData" />
+          <span v-else>{{ scope.row[item.prop] | commonFilter(item.filter) }}</span>
+
+        </template>
+      </el-table-column>
+      <slot name="content" />
+      <slot name="handleBtn" />
+    </el-table>
+  </div>
+</template>
+<script>
+import { isObject, isString } from 'lodash'
+export default {
+  name: 'BaseTable',
+  filters: {
+    commonFilter: (source, filterType = a => a) => {
+      return filterType(source)
+    }
+  },
+  props: {
+    tableData: {
+      type: Array,
+      required: true,
+      validator: val => val.filter(item => !isObject(item)).length === 0
+    },
+    tableConfig: {
+      type: Array,
+      required: true,
+      validator: val => val.filter(item => !isString(item.prop) || !isString(item.label)).length === 0
+    },
+    isLoading: {
+      type: Boolean,
+      required: false
+    },
+    page: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+    limit: {
+      type: Number,
+      required: false,
+      default: 0
+    }
+  },
+  data() {
+    return {
+
+    }
+  },
+  computed: {
+    renderData() {
+      return this.tableData.map((item, index) => {
+        return {
+          ...item,
+          _pageIndex: (this.page - 1) * this.limit + index + 1
+        }
+      })
+    }
+  },
+  methods: {
+    emitData(val) {
+      this.$emit('emitFun', val)
+    }
+  }
+}
+</script>
+<style>
+</style>
diff --git a/src/components/BaseTable/index.vue b/src/components/BaseTable/index.vue
new file mode 100644
index 0000000..3ded0be
--- /dev/null
+++ b/src/components/BaseTable/index.vue
@@ -0,0 +1,139 @@
+<!--
+ * @Date: 2020-12-14 09:07:03
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-06-22 09:07:41
+ * @FilePath: \basic-admin\src\components\BaseTable\index.vue
+ * @Description:
+-->
+<template>
+  <div class="base-table-container">
+    <div class="setting">
+      <el-popover
+        placement="bottom-start"
+        width="200"
+        trigger="click"
+      >
+        <div class="setting-box">
+          <el-checkbox
+            v-for="(item, index) in tableConfig"
+            :key="'cb' + index"
+            v-model="selectedBox[index]"
+            :label="item.label"
+          />
+        </div>
+        <i slot="reference" class="el-icon-s-tools" />
+      </el-popover>
+    </div>
+    <el-table v-loading="isLoading" :header-cell-style="{background:'#eef1f6',color:'#606266',height: '56px'}" :data="renderData" :stripe="true" fit highlight-current-row style="width: 100%">
+      <el-table-column v-if="page && limit" prop="_pageIndex" :label="'tableHeader.index' | i18nFilter" width="70" align="center" />
+      <el-table-column
+        v-for="item in renderTableHeadList"
+        :key="item.prop"
+        v-bind="item"
+      >
+        <template slot-scope="scope">
+
+          <component :is="item.subcomponent" v-if="item.subcomponent" :inject-data="{...scope.row, ...item}" @emitData="emitData" />
+          <span v-else>{{ scope.row[item.prop] | commonFilter(item.filter) }}</span>
+
+        </template>
+      </el-table-column>
+      <slot name="content" />
+      <slot name="handleBtn" />
+    </el-table>
+  </div>
+</template>
+<script>
+import { isObject, isString } from 'lodash'
+export default {
+  name: 'BaseTable',
+  filters: {
+    commonFilter: (source, filterType = a => a) => {
+      return filterType(source)
+    }
+  },
+  props: {
+    tableData: {
+      type: Array,
+      required: true,
+      validator: val => val.filter(item => !isObject(item)).length === 0
+    },
+    tableConfig: {
+      type: Array,
+      required: true,
+      validator: val => val.filter(item => !isString(item.prop) || !isString(item.label)).length === 0
+    },
+    isLoading: {
+      type: Boolean,
+      required: false
+    },
+    page: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+    limit: {
+      type: Number,
+      required: false,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      tableConfigBak: [],
+      selectedBox: new Array(20).fill(true)
+    }
+  },
+  computed: {
+    renderData() {
+      return this.tableData.map((item, index) => {
+        return {
+          ...item,
+          _pageIndex: (this.page - 1) * this.limit + index + 1
+        }
+      })
+    },
+    renderTableHeadList() {
+      return this.tableConfig.filter((item, index) => {
+        return this.selectedBox[index]
+      })
+    }
+  },
+  beforeMount() {
+    this.selectedBox = new Array(20).fill(true)
+  },
+  // mounted() {
+  //   this.tableConfigBak = cloneDeep(this.tableConfig).map(item => {
+  //     return {
+  //       ...item,
+  //       selected: true
+  //     }
+  //   })
+  // },
+  methods: {
+    emitData(val) {
+      this.$emit('emitFun', val)
+    }
+  }
+}
+</script>
+<style lang="scss">
+@import "~@/styles/index.scss";
+.base-table-container {
+  .el-table {
+    border-top: 1px solid #dfe6ec;
+  }
+}
+.setting {
+  text-align: right;
+  padding: 15px;
+  .setting-box {
+    width: 100px;
+  }
+  i {
+    color: #aaa;
+    @extend .pointer;
+  }
+}
+
+</style>
diff --git a/src/components/BaseTable/subcomponents/CheckDetail.vue b/src/components/BaseTable/subcomponents/CheckDetail.vue
new file mode 100644
index 0000000..24dd48b
--- /dev/null
+++ b/src/components/BaseTable/subcomponents/CheckDetail.vue
@@ -0,0 +1,31 @@
+<!--
+ * @Date: 2021-01-07 20:09:37
+ * @LastEditors: guo
+ * @LastEditTime: 2021-01-07 20:27:56
+ * @FilePath: \basic-admin\src\components\BaseTable\subcomponents\CheckDetail.vue
+ * @Description:
+-->
+<template>
+  <span>
+    <el-button type="text" size="small" @click="emitClick">{{ 'btn.detail' | i18nFilter }}</el-button>
+  </span>
+</template>
+
+<script>
+export default {
+  props: {
+    injectData: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  methods: {
+    emitClick() {
+      console.log(this.injectData)
+      // if (url) {
+      //   this.$createPicReview({ url })
+      // }
+    }
+  }
+}
+</script>
diff --git a/src/components/BaseTable/subcomponents/CheckPic.vue b/src/components/BaseTable/subcomponents/CheckPic.vue
new file mode 100644
index 0000000..3ef9c96
--- /dev/null
+++ b/src/components/BaseTable/subcomponents/CheckPic.vue
@@ -0,0 +1,32 @@
+<!--
+ * @Date: 2020-12-14 09:07:03
+ * @LastEditors: guo
+ * @LastEditTime: 2021-01-07 20:22:17
+ * @FilePath: \basic-admin\src\components\BaseTable\subcomponents\CheckPic.vue
+ * @Description: 修改查看图片组件的传参形式
+-->
+<template>
+  <span>
+    <el-button type="text" size="small" @click="checkPic(injectData)">{{ 'btn.see' | i18nFilter }}</el-button>
+  </span>
+</template>
+
+<script>
+export default {
+  props: {
+    injectData: {
+      type: Object,
+      default: () => ({
+        url: ''
+      })
+    }
+  },
+  methods: {
+    checkPic(url) {
+      if (url) {
+        this.$createPicReview({ url })
+      }
+    }
+  }
+}
+</script>
diff --git a/src/components/BaseTable/subcomponents/ColorSqua.vue b/src/components/BaseTable/subcomponents/ColorSqua.vue
new file mode 100644
index 0000000..48c5b6b
--- /dev/null
+++ b/src/components/BaseTable/subcomponents/ColorSqua.vue
@@ -0,0 +1,36 @@
+<!--
+ * @Date: 2021-02-20 10:45:21
+ * @LastEditors: guo
+ * @LastEditTime: 2021-03-24 11:05:35
+ * @FilePath: \basic-admin\src\components\BaseTable\subcomponents\ColorSqua.vue
+ * @Description:
+-->
+<template>
+  <div class="color-squa" :style="{'background-color': injectData.equipmentStatusColor}" @click="emitClick" />
+</template>
+
+<script>
+export default {
+  props: {
+    injectData: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  methods: {
+    emitClick() {
+      console.log(this.injectData)
+      // if (url) {
+      //   this.$createPicReview({ url })
+      // }
+    }
+  }
+}
+</script>
+<style lang="scss">
+  .color-squa {
+    height: 15px;
+    width: 15px;
+    display: inline-block;
+  }
+</style>
diff --git a/src/components/BaseTable/subcomponents/DataDictFilter.vue b/src/components/BaseTable/subcomponents/DataDictFilter.vue
new file mode 100644
index 0000000..c0cf98c
--- /dev/null
+++ b/src/components/BaseTable/subcomponents/DataDictFilter.vue
@@ -0,0 +1,48 @@
+<!--
+ * @Date: 2021-02-20 10:45:21
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-04-13 15:07:05
+ * @FilePath: \basic-admin\src\components\BaseTable\subcomponents\ColorSqua.vue
+ * @Description:
+-->
+<template>
+  <span @click="emitClick">
+    {{ result }}
+  </span>
+</template>
+
+<script>
+import { dictChange } from '@/utils'
+export default {
+  props: {
+    injectData: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      dict: {}
+    }
+  },
+  computed: {
+    result() {
+      return this.dict[this.injectData[this.injectData.prop]] || '-'
+    }
+  },
+  created() {
+    this.getDict()
+  },
+  methods: {
+    emitClick() {
+      console.log(this.injectData)
+    },
+    async getDict() {
+      if (this.injectData.filter) {
+        const result = await this.injectData.filter()
+        this.dict = dictChange(result, { key: 'id', value: 'name' })
+      }
+    }
+  }
+}
+</script>
diff --git a/src/components/BaseTable/subcomponents/MethodBtn.vue b/src/components/BaseTable/subcomponents/MethodBtn.vue
new file mode 100644
index 0000000..cf4b2d7
--- /dev/null
+++ b/src/components/BaseTable/subcomponents/MethodBtn.vue
@@ -0,0 +1,94 @@
+<!--
+ * @Date: 2020-12-14 09:07:03
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-06-21 12:07:42
+ * @FilePath: \basic-admin\src\components\BaseTable\subcomponents\MethodBtn.vue
+ * @Description: table右侧方法组件
+-->
+<template>
+  <el-table-column
+    v-if="methodList.length > 0"
+    slot="handleBtn"
+    prop="operation"
+    :label="'tableHeader.operation' | i18nFilter"
+    :width="trueWidth"
+    align="center"
+    :fixed="isFixed ? 'right' : false"
+  >
+    <template slot-scope="scope">
+      <span
+        v-for="(item, index) in methodList"
+        :key="'btn' + index"
+      >
+        <el-button
+          v-show="item.showParam ? (item.showParam.type === 'unequal' ?
+            scope.row[item.showParam.name] !== item.showParam.value : item.showParam.type === 'equal' ?
+              scope.row[item.showParam.name] === item.showParam.value : item.showParam.type === 'more' ?
+                scope.row[item.showParam.name] > item.showParam.value : item.showParam.type === 'less' ?
+                  scope.row[item.showParam.name] < item.showParam.value : item.showParam.type === 'indexof' ?
+                    item.showParam.value.indexof(scope.row[item.showParam.name]) >= 0 : false
+          ) : true"
+          type="text"
+          :style="{color:(item.type === 'delete' ? '#D40000' : '#1990FF')}"
+          style="font-size:14px"
+          size="mini"
+          @click="clickButton({
+            data: scope.row,
+            type: item.type
+          })"
+        >{{ item.btnName | i18nFilter }}</el-button>
+        <span v-if="index < methodList.length-1" style="margin:0 3px">|</span>
+      </span>
+    </template>
+
+  </el-table-column>
+</template>
+
+<script>
+
+/**
+ * 传入的组件prop格式
+ * methodList<MethodItem> = []
+ * Interface MethodItem = {
+ *  btnName: string,
+ *  type: string,
+ *  callback: function (选用)
+ * }
+ *
+ */
+export default {
+  props: {
+    methodList: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    width: {
+      type: Number,
+      default: () => 0
+    },
+    isFixed: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    trueWidth() {
+      return this.width ? this.width : this.methodList.length * 80
+    }
+  },
+  methods: {
+    clickButton(raw) {
+      this.$emit('clickBtn', {
+        data: raw.data,
+        type: raw.type
+      })
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>
diff --git a/src/components/Breadcrumb/index.vue b/src/components/Breadcrumb/index.vue
index e224ff7..16c15d8 100644
--- a/src/components/Breadcrumb/index.vue
+++ b/src/components/Breadcrumb/index.vue
@@ -1,9 +1,18 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-01-27 10:07:42
+ * @LastEditTime: 2021-01-28 16:26:15
+ * @LastEditors: gtz
+ * @Description: In User Settings Edit
+ * @FilePath: \mt-bus-fe\src\components\Breadcrumb\index.vue
+-->
 <template>
   <el-breadcrumb class="app-breadcrumb" separator="/">
     <transition-group name="breadcrumb">
       <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
-        <span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="no-redirect">{{ item.meta.title }}</span>
-        <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
+        <span v-if="item.redirect==='noRedirect'||index==levelList.length-1">{{ item.meta.title }}</span>
+        <span v-else class="no-redirect">{{ item.meta.title }}</span>
+        <!-- @click.prevent="handleLink(item)" -->
       </el-breadcrumb-item>
     </transition-group>
   </el-breadcrumb>
@@ -33,12 +42,12 @@ export default {
   methods: {
     getBreadcrumb() {
       // only show routes with meta.title
-      let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
-      const first = matched[0]
+      const matched = this.$route.matched.filter(item => item.meta && item.meta.title)
+      // const first = matched[0]
 
-      if (!this.isDashboard(first)) {
-        matched = [{ path: '/dashboard', meta: { title: 'Dashboard' }}].concat(matched)
-      }
+      // if (!this.isDashboard(first)) {
+      //   matched = [{ path: '/dashboard', meta: { title: 'Dashboard' }}].concat(matched)
+      // }
 
       this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
     },
diff --git a/src/components/Charts/BarChart/index.vue b/src/components/Charts/BarChart/index.vue
new file mode 100644
index 0000000..98e56db
--- /dev/null
+++ b/src/components/Charts/BarChart/index.vue
@@ -0,0 +1,77 @@
+<template>
+  <div ref="chart" :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import echarts from 'echarts'
+import resize from '../mixins/resize'
+import { simpleChart } from '../option'
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '200px'
+    },
+    height: {
+      type: String,
+      default: '200px'
+    },
+    sizeRatio: {
+      type: Number,
+      default: 1
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    testData() {
+      return [{
+        name: 'series1',
+        data: [{
+          name: '07/20',
+          value: 10
+        }, {
+          name: '07/21',
+          value: 11
+        }]
+      }, {
+        name: 'series2',
+        data: [{
+          name: '07/20',
+          value: 13
+        }, {
+          name: '07/21',
+          value: 15
+        }]
+      }]
+    },
+    initChart() {
+      this.chart = echarts.init(this.$refs.chart)
+      this.chart.setOption(simpleChart(this.testData(), 1, {
+        type: 'line',
+        yAxisName: '大小',
+        showLegend: true
+      }))
+    }
+  }
+}
+</script>
diff --git a/src/components/Charts/option.js b/src/components/Charts/option.js
new file mode 100644
index 0000000..7cc0f86
--- /dev/null
+++ b/src/components/Charts/option.js
@@ -0,0 +1,98 @@
+/**
+ *
+ * @param {*} seriesData 传入的数据
+ * @param {*} ratio 放大倍率，用于调整图表中字体大小
+ * @param {*} option 附带的一些配置，可配置为柱状图或者折线图等等
+ */
+export function simpleChart(seriesData = {
+  name: '数据系列名',
+  data: [{
+    name: '类目名',
+    value: 123
+  }]
+}, ratio = 1, option = {
+  type: 'bar',
+  showLegend: false,
+  yAxisName: '',
+  xAxisName: ''
+}) {
+  const xAxisCateList = seriesData[0].data.map(item => item.name)
+  const seriesNameList = seriesData.map(item => item.name)
+  return {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: { // 坐标轴指示器，坐标轴触发有效
+        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+      }
+    },
+    // color: colorList,
+    legend: {
+      show: option.showLegend,
+      data: seriesNameList,
+      bottom: '-5',
+      textStyle: {
+        color: '#eee',
+        fontSize: 14 * ratio
+      },
+      itemWidth: 25 * ratio,
+      itemHeight: 14 * ratio
+    },
+    grid: {
+      top: '10%',
+      left: '6%',
+      right: '4%',
+      bottom: '8%',
+      containLabel: true
+    },
+    yAxis: {
+      type: 'value',
+      name: option.yAxisName,
+      nameGap: 15,
+      nameTextStyle: {
+        color: '#fff',
+        fontSize: 12 * ratio,
+        padding: [0, 30, 0, 0]
+      },
+      axisLine: {
+        show: false
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          type: 'dashed',
+          color: 'rgba(255,255,255,0.4)'
+        }
+      },
+      axisLabel: {
+        margin: 15,
+        textStyle: {
+          color: '#eee',
+          fontSize: 14 * ratio
+        }
+      }
+    },
+    xAxis: {
+      type: 'category',
+      name: option.xAxisName,
+      axisLine: {
+        show: false
+      },
+      axisLabel: {
+        margin: 15,
+        textStyle: {
+          color: '#eee',
+          fontSize: 14 * ratio
+        }
+      },
+      data: xAxisCateList
+    },
+    series: seriesData.map(item => {
+      return {
+        name: item.name,
+        type: option.type,
+        data: item.data,
+        barMaxWidth: 30 * ratio
+      }
+    })
+  }
+}
diff --git a/src/components/DndList/index.vue b/src/components/DndList/index.vue
deleted file mode 100644
index 23ca006..0000000
--- a/src/components/DndList/index.vue
+++ /dev/null
@@ -1,166 +0,0 @@
-<template>
-  <div class="dndList">
-    <div :style="{width:width1}" class="dndList-list">
-      <h3>{{ list1Title }}</h3>
-      <draggable :set-data="setData" :list="list1" group="article" class="dragArea">
-        <div v-for="element in list1" :key="element.id" class="list-complete-item">
-          <div class="list-complete-item-handle">
-            {{ element.id }}[{{ element.author }}] {{ element.title }}
-          </div>
-          <div style="position:absolute;right:0px;">
-            <span style="float: right ;margin-top: -20px;margin-right:5px;" @click="deleteEle(element)">
-              <i style="color:#ff4949" class="el-icon-delete" />
-            </span>
-          </div>
-        </div>
-      </draggable>
-    </div>
-    <div :style="{width:width2}" class="dndList-list">
-      <h3>{{ list2Title }}</h3>
-      <draggable :list="list2" group="article" class="dragArea">
-        <div v-for="element in list2" :key="element.id" class="list-complete-item">
-          <div class="list-complete-item-handle2" @click="pushEle(element)">
-            {{ element.id }} [{{ element.author }}] {{ element.title }}
-          </div>
-        </div>
-      </draggable>
-    </div>
-  </div>
-</template>
-
-<script>
-import draggable from 'vuedraggable'
-
-export default {
-  name: 'DndList',
-  components: { draggable },
-  props: {
-    list1: {
-      type: Array,
-      default() {
-        return []
-      }
-    },
-    list2: {
-      type: Array,
-      default() {
-        return []
-      }
-    },
-    list1Title: {
-      type: String,
-      default: 'list1'
-    },
-    list2Title: {
-      type: String,
-      default: 'list2'
-    },
-    width1: {
-      type: String,
-      default: '48%'
-    },
-    width2: {
-      type: String,
-      default: '48%'
-    }
-  },
-  methods: {
-    isNotInList1(v) {
-      return this.list1.every(k => v.id !== k.id)
-    },
-    isNotInList2(v) {
-      return this.list2.every(k => v.id !== k.id)
-    },
-    deleteEle(ele) {
-      for (const item of this.list1) {
-        if (item.id === ele.id) {
-          const index = this.list1.indexOf(item)
-          this.list1.splice(index, 1)
-          break
-        }
-      }
-      if (this.isNotInList2(ele)) {
-        this.list2.unshift(ele)
-      }
-    },
-    pushEle(ele) {
-      for (const item of this.list2) {
-        if (item.id === ele.id) {
-          const index = this.list2.indexOf(item)
-          this.list2.splice(index, 1)
-          break
-        }
-      }
-      if (this.isNotInList1(ele)) {
-        this.list1.push(ele)
-      }
-    },
-    setData(dataTransfer) {
-      // to avoid Firefox bug
-      // Detail see : https://github.com/RubaXa/Sortable/issues/1012
-      dataTransfer.setData('Text', '')
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.dndList {
-  background: #fff;
-  padding-bottom: 40px;
-  &:after {
-    content: "";
-    display: table;
-    clear: both;
-  }
-  .dndList-list {
-    float: left;
-    padding-bottom: 30px;
-    &:first-of-type {
-      margin-right: 2%;
-    }
-    .dragArea {
-      margin-top: 15px;
-      min-height: 50px;
-      padding-bottom: 30px;
-    }
-  }
-}
-
-.list-complete-item {
-  cursor: pointer;
-  position: relative;
-  font-size: 14px;
-  padding: 5px 12px;
-  margin-top: 4px;
-  border: 1px solid #bfcbd9;
-  transition: all 1s;
-}
-
-.list-complete-item-handle {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  margin-right: 50px;
-}
-
-.list-complete-item-handle2 {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  margin-right: 20px;
-}
-
-.list-complete-item.sortable-chosen {
-  background: #4AB7BD;
-}
-
-.list-complete-item.sortable-ghost {
-  background: #30B08F;
-}
-
-.list-complete-enter,
-.list-complete-leave-active {
-  opacity: 0;
-}
-</style>
diff --git a/src/components/DragSelect/index.vue b/src/components/DragSelect/index.vue
deleted file mode 100644
index 47f4247..0000000
--- a/src/components/DragSelect/index.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<template>
-  <el-select ref="dragSelect" v-model="selectVal" v-bind="$attrs" class="drag-select" multiple v-on="$listeners">
-    <slot />
-  </el-select>
-</template>
-
-<script>
-import Sortable from 'sortablejs'
-
-export default {
-  name: 'DragSelect',
-  props: {
-    value: {
-      type: Array,
-      required: true
-    }
-  },
-  computed: {
-    selectVal: {
-      get() {
-        return [...this.value]
-      },
-      set(val) {
-        this.$emit('input', [...val])
-      }
-    }
-  },
-  mounted() {
-    this.setSort()
-  },
-  methods: {
-    setSort() {
-      const el = this.$refs.dragSelect.$el.querySelectorAll('.el-select__tags > span')[0]
-      this.sortable = Sortable.create(el, {
-        ghostClass: 'sortable-ghost', // Class name for the drop placeholder,
-        setData: function(dataTransfer) {
-          dataTransfer.setData('Text', '')
-          // to avoid Firefox bug
-          // Detail see : https://github.com/RubaXa/Sortable/issues/1012
-        },
-        onEnd: evt => {
-          const targetRow = this.value.splice(evt.oldIndex, 1)[0]
-          this.value.splice(evt.newIndex, 0, targetRow)
-        }
-      })
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.drag-select {
-  ::v-deep {
-    .sortable-ghost {
-      opacity: .8;
-      color: #fff !important;
-      background: #42b983 !important;
-    }
-
-    .el-tag {
-      cursor: pointer;
-    }
-  }
-}
-</style>
diff --git a/src/components/Dropzone/index.vue b/src/components/Dropzone/index.vue
deleted file mode 100644
index bad9eb9..0000000
--- a/src/components/Dropzone/index.vue
+++ /dev/null
@@ -1,297 +0,0 @@
-<template>
-  <div :id="id" :ref="id" :action="url" class="dropzone">
-    <input type="file" name="file">
-  </div>
-</template>
-
-<script>
-import Dropzone from 'dropzone'
-import 'dropzone/dist/dropzone.css'
-// import { getToken } from 'api/qiniu';
-
-Dropzone.autoDiscover = false
-
-export default {
-  props: {
-    id: {
-      type: String,
-      required: true
-    },
-    url: {
-      type: String,
-      required: true
-    },
-    clickable: {
-      type: Boolean,
-      default: true
-    },
-    defaultMsg: {
-      type: String,
-      default: '上传图片'
-    },
-    acceptedFiles: {
-      type: String,
-      default: ''
-    },
-    thumbnailHeight: {
-      type: Number,
-      default: 200
-    },
-    thumbnailWidth: {
-      type: Number,
-      default: 200
-    },
-    showRemoveLink: {
-      type: Boolean,
-      default: true
-    },
-    maxFilesize: {
-      type: Number,
-      default: 2
-    },
-    maxFiles: {
-      type: Number,
-      default: 3
-    },
-    autoProcessQueue: {
-      type: Boolean,
-      default: true
-    },
-    useCustomDropzoneOptions: {
-      type: Boolean,
-      default: false
-    },
-    defaultImg: {
-      default: '',
-      type: [String, Array]
-    },
-    couldPaste: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {
-      dropzone: '',
-      initOnce: true
-    }
-  },
-  watch: {
-    defaultImg(val) {
-      if (val.length === 0) {
-        this.initOnce = false
-        return
-      }
-      if (!this.initOnce) return
-      this.initImages(val)
-      this.initOnce = false
-    }
-  },
-  mounted() {
-    const element = document.getElementById(this.id)
-    const vm = this
-    this.dropzone = new Dropzone(element, {
-      clickable: this.clickable,
-      thumbnailWidth: this.thumbnailWidth,
-      thumbnailHeight: this.thumbnailHeight,
-      maxFiles: this.maxFiles,
-      maxFilesize: this.maxFilesize,
-      dictRemoveFile: 'Remove',
-      addRemoveLinks: this.showRemoveLink,
-      acceptedFiles: this.acceptedFiles,
-      autoProcessQueue: this.autoProcessQueue,
-      dictDefaultMessage: '<i style="margin-top: 3em;display: inline-block" class="material-icons">' + this.defaultMsg + '</i><br>Drop files here to upload',
-      dictMaxFilesExceeded: '只能一个图',
-      previewTemplate: '<div class="dz-preview dz-file-preview">  <div class="dz-image" style="width:' + this.thumbnailWidth + 'px;height:' + this.thumbnailHeight + 'px" ><img style="width:' + this.thumbnailWidth + 'px;height:' + this.thumbnailHeight + 'px" data-dz-thumbnail /></div>  <div class="dz-details"><div class="dz-size"><span data-dz-size></span></div> <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>  <div class="dz-error-message"><span data-dz-errormessage></span></div>  <div class="dz-success-mark"> <i class="material-icons">done</i> </div>  <div class="dz-error-mark"><i class="material-icons">error</i></div></div>',
-      init() {
-        const val = vm.defaultImg
-        if (!val) return
-        if (Array.isArray(val)) {
-          if (val.length === 0) return
-          val.map((v, i) => {
-            const mockFile = { name: 'name' + i, size: 12345, url: v }
-            this.options.addedfile.call(this, mockFile)
-            this.options.thumbnail.call(this, mockFile, v)
-            mockFile.previewElement.classList.add('dz-success')
-            mockFile.previewElement.classList.add('dz-complete')
-            vm.initOnce = false
-            return true
-          })
-        } else {
-          const mockFile = { name: 'name', size: 12345, url: val }
-          this.options.addedfile.call(this, mockFile)
-          this.options.thumbnail.call(this, mockFile, val)
-          mockFile.previewElement.classList.add('dz-success')
-          mockFile.previewElement.classList.add('dz-complete')
-          vm.initOnce = false
-        }
-      },
-      accept: (file, done) => {
-        /* 七牛*/
-        // const token = this.$store.getters.token;
-        // getToken(token).then(response => {
-        //   file.token = response.data.qiniu_token;
-        //   file.key = response.data.qiniu_key;
-        //   file.url = response.data.qiniu_url;
-        //   done();
-        // })
-        done()
-      },
-      sending: (file, xhr, formData) => {
-        // formData.append('token', file.token);
-        // formData.append('key', file.key);
-        vm.initOnce = false
-      }
-    })
-
-    if (this.couldPaste) {
-      document.addEventListener('paste', this.pasteImg)
-    }
-
-    this.dropzone.on('success', file => {
-      vm.$emit('dropzone-success', file, vm.dropzone.element)
-    })
-    this.dropzone.on('addedfile', file => {
-      vm.$emit('dropzone-fileAdded', file)
-    })
-    this.dropzone.on('removedfile', file => {
-      vm.$emit('dropzone-removedFile', file)
-    })
-    this.dropzone.on('error', (file, error, xhr) => {
-      vm.$emit('dropzone-error', file, error, xhr)
-    })
-    this.dropzone.on('successmultiple', (file, error, xhr) => {
-      vm.$emit('dropzone-successmultiple', file, error, xhr)
-    })
-  },
-  destroyed() {
-    document.removeEventListener('paste', this.pasteImg)
-    this.dropzone.destroy()
-  },
-  methods: {
-    removeAllFiles() {
-      this.dropzone.removeAllFiles(true)
-    },
-    processQueue() {
-      this.dropzone.processQueue()
-    },
-    pasteImg(event) {
-      const items = (event.clipboardData || event.originalEvent.clipboardData).items
-      if (items[0].kind === 'file') {
-        this.dropzone.addFile(items[0].getAsFile())
-      }
-    },
-    initImages(val) {
-      if (!val) return
-      if (Array.isArray(val)) {
-        val.map((v, i) => {
-          const mockFile = { name: 'name' + i, size: 12345, url: v }
-          this.dropzone.options.addedfile.call(this.dropzone, mockFile)
-          this.dropzone.options.thumbnail.call(this.dropzone, mockFile, v)
-          mockFile.previewElement.classList.add('dz-success')
-          mockFile.previewElement.classList.add('dz-complete')
-          return true
-        })
-      } else {
-        const mockFile = { name: 'name', size: 12345, url: val }
-        this.dropzone.options.addedfile.call(this.dropzone, mockFile)
-        this.dropzone.options.thumbnail.call(this.dropzone, mockFile, val)
-        mockFile.previewElement.classList.add('dz-success')
-        mockFile.previewElement.classList.add('dz-complete')
-      }
-    }
-
-  }
-}
-</script>
-
-<style scoped>
-    .dropzone {
-        border: 2px solid #E5E5E5;
-        font-family: 'Roboto', sans-serif;
-        color: #777;
-        transition: background-color .2s linear;
-        padding: 5px;
-    }
-
-    .dropzone:hover {
-        background-color: #F6F6F6;
-    }
-
-    i {
-        color: #CCC;
-    }
-
-    .dropzone .dz-image img {
-        width: 100%;
-        height: 100%;
-    }
-
-    .dropzone input[name='file'] {
-        display: none;
-    }
-
-    .dropzone .dz-preview .dz-image {
-        border-radius: 0px;
-    }
-
-    .dropzone .dz-preview:hover .dz-image img {
-        transform: none;
-        filter: none;
-        width: 100%;
-        height: 100%;
-    }
-
-    .dropzone .dz-preview .dz-details {
-        bottom: 0px;
-        top: 0px;
-        color: white;
-        background-color: rgba(33, 150, 243, 0.8);
-        transition: opacity .2s linear;
-        text-align: left;
-    }
-
-    .dropzone .dz-preview .dz-details .dz-filename span, .dropzone .dz-preview .dz-details .dz-size span {
-        background-color: transparent;
-    }
-
-    .dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
-        border: none;
-    }
-
-    .dropzone .dz-preview .dz-details .dz-filename:hover span {
-        background-color: transparent;
-        border: none;
-    }
-
-    .dropzone .dz-preview .dz-remove {
-        position: absolute;
-        z-index: 30;
-        color: white;
-        margin-left: 15px;
-        padding: 10px;
-        top: inherit;
-        bottom: 15px;
-        border: 2px white solid;
-        text-decoration: none;
-        text-transform: uppercase;
-        font-size: 0.8rem;
-        font-weight: 800;
-        letter-spacing: 1.1px;
-        opacity: 0;
-    }
-
-    .dropzone .dz-preview:hover .dz-remove {
-        opacity: 1;
-    }
-
-    .dropzone .dz-preview .dz-success-mark, .dropzone .dz-preview .dz-error-mark {
-        margin-left: -40px;
-        margin-top: -50px;
-    }
-
-    .dropzone .dz-preview .dz-success-mark i, .dropzone .dz-preview .dz-error-mark i {
-        color: white;
-        font-size: 5rem;
-    }
-</style>
diff --git a/src/components/GithubCorner/index.vue b/src/components/GithubCorner/index.vue
deleted file mode 100644
index 970faaf..0000000
--- a/src/components/GithubCorner/index.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-  <a href="https://github.com/PanJiaChen/vue-element-admin" target="_blank" class="github-corner" aria-label="View source on Github">
-    <svg
-      width="80"
-      height="80"
-      viewBox="0 0 250 250"
-      style="fill:#40c9c6; color:#fff;"
-      aria-hidden="true"
-    >
-      <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" />
-      <path
-        d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
-        fill="currentColor"
-        style="transform-origin: 130px 106px;"
-        class="octo-arm"
-      />
-      <path
-        d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
-        fill="currentColor"
-        class="octo-body"
-      />
-    </svg>
-  </a>
-</template>
-
-<style scoped>
-.github-corner:hover .octo-arm {
-  animation: octocat-wave 560ms ease-in-out
-}
-
-@keyframes octocat-wave {
-  0%,
-  100% {
-    transform: rotate(0)
-  }
-  20%,
-  60% {
-    transform: rotate(-25deg)
-  }
-  40%,
-  80% {
-    transform: rotate(10deg)
-  }
-}
-
-@media (max-width:500px) {
-  .github-corner:hover .octo-arm {
-    animation: none
-  }
-  .github-corner .octo-arm {
-    animation: octocat-wave 560ms ease-in-out
-  }
-}
-</style>
diff --git a/src/components/HeaderSearch/index.vue b/src/components/HeaderSearch/index.vue
index 6026ebb..c4e180a 100644
--- a/src/components/HeaderSearch/index.vue
+++ b/src/components/HeaderSearch/index.vue
@@ -7,6 +7,7 @@
       :remote-method="querySearch"
       filterable
       default-first-option
+      clearable
       remote
       placeholder="Search"
       class="header-search-select"
diff --git a/src/components/ImageCropper/index.vue b/src/components/ImageCropper/index.vue
index 65a4262..13ae9a1 100644
--- a/src/components/ImageCropper/index.vue
+++ b/src/components/ImageCropper/index.vue
@@ -248,7 +248,6 @@ export default {
       // 浏览器是否支持该控件
       isSupported,
       // 浏览器是否支持触屏事件
-      // eslint-disable-next-line no-prototype-builtins
       isSupportTouch: document.hasOwnProperty('ontouchstart'),
       // 步骤
       step: 1, // 1选择文件 2剪裁 3上传
diff --git a/src/components/JsonEditor/index.vue b/src/components/JsonEditor/index.vue
deleted file mode 100644
index c05b090..0000000
--- a/src/components/JsonEditor/index.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<template>
-  <div class="json-editor">
-    <textarea ref="textarea" />
-  </div>
-</template>
-
-<script>
-import CodeMirror from 'codemirror'
-import 'codemirror/addon/lint/lint.css'
-import 'codemirror/lib/codemirror.css'
-import 'codemirror/theme/rubyblue.css'
-require('script-loader!jsonlint')
-import 'codemirror/mode/javascript/javascript'
-import 'codemirror/addon/lint/lint'
-import 'codemirror/addon/lint/json-lint'
-
-export default {
-  name: 'JsonEditor',
-  /* eslint-disable vue/require-prop-types */
-  props: ['value'],
-  data() {
-    return {
-      jsonEditor: false
-    }
-  },
-  watch: {
-    value(value) {
-      const editorValue = this.jsonEditor.getValue()
-      if (value !== editorValue) {
-        this.jsonEditor.setValue(JSON.stringify(this.value, null, 2))
-      }
-    }
-  },
-  mounted() {
-    this.jsonEditor = CodeMirror.fromTextArea(this.$refs.textarea, {
-      lineNumbers: true,
-      mode: 'application/json',
-      gutters: ['CodeMirror-lint-markers'],
-      theme: 'rubyblue',
-      lint: true
-    })
-
-    this.jsonEditor.setValue(JSON.stringify(this.value, null, 2))
-    this.jsonEditor.on('change', cm => {
-      this.$emit('changed', cm.getValue())
-      this.$emit('input', cm.getValue())
-    })
-  },
-  methods: {
-    getValue() {
-      return this.jsonEditor.getValue()
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.json-editor {
-  height: 100%;
-  position: relative;
-
-  ::v-deep {
-    .CodeMirror {
-      height: auto;
-      min-height: 300px;
-    }
-
-    .CodeMirror-scroll {
-      min-height: 300px;
-    }
-
-    .cm-s-rubyblue span.cm-string {
-      color: #F08047;
-    }
-  }
-}
-</style>
diff --git a/src/components/Kanban/index.vue b/src/components/Kanban/index.vue
deleted file mode 100644
index 82f7dd7..0000000
--- a/src/components/Kanban/index.vue
+++ /dev/null
@@ -1,99 +0,0 @@
-<template>
-  <div class="board-column">
-    <div class="board-column-header">
-      {{ headerText }}
-    </div>
-    <draggable
-      :list="list"
-      v-bind="$attrs"
-      class="board-column-content"
-      :set-data="setData"
-    >
-      <div v-for="element in list" :key="element.id" class="board-item">
-        {{ element.name }} {{ element.id }}
-      </div>
-    </draggable>
-  </div>
-</template>
-
-<script>
-import draggable from 'vuedraggable'
-
-export default {
-  name: 'DragKanbanDemo',
-  components: {
-    draggable
-  },
-  props: {
-    headerText: {
-      type: String,
-      default: 'Header'
-    },
-    options: {
-      type: Object,
-      default() {
-        return {}
-      }
-    },
-    list: {
-      type: Array,
-      default() {
-        return []
-      }
-    }
-  },
-  methods: {
-    setData(dataTransfer) {
-      // to avoid Firefox bug
-      // Detail see : https://github.com/RubaXa/Sortable/issues/1012
-      dataTransfer.setData('Text', '')
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-.board-column {
-  min-width: 300px;
-  min-height: 100px;
-  height: auto;
-  overflow: hidden;
-  background: #f0f0f0;
-  border-radius: 3px;
-
-  .board-column-header {
-    height: 50px;
-    line-height: 50px;
-    overflow: hidden;
-    padding: 0 20px;
-    text-align: center;
-    background: #333;
-    color: #fff;
-    border-radius: 3px 3px 0 0;
-  }
-
-  .board-column-content {
-    height: auto;
-    overflow: hidden;
-    border: 10px solid transparent;
-    min-height: 60px;
-    display: flex;
-    justify-content: flex-start;
-    flex-direction: column;
-    align-items: center;
-
-    .board-item {
-      cursor: pointer;
-      width: 100%;
-      height: 64px;
-      margin: 5px 0;
-      background-color: #fff;
-      text-align: left;
-      line-height: 54px;
-      padding: 5px 10px;
-      box-sizing: border-box;
-      box-shadow: 0px 1px 3px 0 rgba(0, 0, 0, 0.2);
-    }
-  }
-}
-</style>
-
diff --git a/src/components/LangSelect/index.vue b/src/components/LangSelect/index.vue
new file mode 100644
index 0000000..a70e9a5
--- /dev/null
+++ b/src/components/LangSelect/index.vue
@@ -0,0 +1,53 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-01-27 10:07:42
+ * @LastEditTime: 2021-02-24 11:13:53
+ * @LastEditors: gtz
+ * @Description: In User Settings Edit
+ * @FilePath: \mt-bus-fe\src\components\LangSelect\index.vue
+-->
+<template>
+  <el-dropdown trigger="click" class="international" @command="handleSetLanguage">
+    <div>
+      <svg-icon class-name="international-icon" icon-class="language" />
+    </div>
+    <el-dropdown-menu slot="dropdown">
+      <el-dropdown-item :disabled="language==='zh'" command="zh">
+        中文
+      </el-dropdown-item>
+      <el-dropdown-item :disabled="language==='en'" command="en">
+        English
+      </el-dropdown-item>
+      <!-- <el-dropdown-item :disabled="language==='es'" command="es">
+        Español
+      </el-dropdown-item>
+      <el-dropdown-item :disabled="language==='ja'" command="ja">
+        日本語
+      </el-dropdown-item> -->
+    </el-dropdown-menu>
+  </el-dropdown>
+</template>
+
+<script>
+export default {
+  computed: {
+    language() {
+      return this.$store.getters.language
+    }
+  },
+  methods: {
+    handleSetLanguage(lang) {
+      this.$i18n.locale = lang
+      this.$store.dispatch('app/setLanguage', lang)
+      this.$message({
+        message: 'Switch Language Success',
+        type: 'success',
+        duration: 2000,
+        onClose: () => {
+          location.reload()
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/src/components/ListDialog/index.js b/src/components/ListDialog/index.js
new file mode 100644
index 0000000..5eeab7a
--- /dev/null
+++ b/src/components/ListDialog/index.js
@@ -0,0 +1,11 @@
+import Vue from 'vue'
+// 按照方法调用vue组件，用完即销毁
+const ListDialogConstrctor = Vue.extend(require('./main.vue').default)
+// 定义原型方法
+Vue.prototype.$createListReview = (options) => {
+  const instance = new ListDialogConstrctor({
+    data: options
+  })
+  instance.vm = instance.$mount()
+  document.getElementById('app').appendChild(instance.vm.$el)
+}
diff --git a/src/components/ListDialog/main.vue b/src/components/ListDialog/main.vue
new file mode 100644
index 0000000..fa45d9c
--- /dev/null
+++ b/src/components/ListDialog/main.vue
@@ -0,0 +1,38 @@
+<!--
+ * @Date: 2020-12-14 09:07:03
+ * @LastEditors: guo
+ * @LastEditTime: 2020-12-16 15:10:51
+ * @FilePath: \basic-admin\src\components\ListDialog\main.vue
+ * @Description:
+-->
+<template>
+  <el-dialog :visible="visible" :destroy-on-close="true" :before-close="handleClose" title="查看子变量">
+    <el-table :data="list" border stripe>
+      <el-table-column prop="vt" label="数据类型" />
+      <el-table-column prop="val" label="数据值" />
+    </el-table>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: 'ListDialog',
+  data() {
+    return {
+      visible: true,
+      list: []
+    }
+  },
+  methods: {
+    handleClose() {
+      this.$destroy(true)
+      this.$el.parentNode.removeChild(this.$el)
+    }
+  }
+}
+</script>
+<style>
+#root-pic {
+  display: none;
+}
+</style>
diff --git a/src/components/MarkdownEditor/default-options.js b/src/components/MarkdownEditor/default-options.js
deleted file mode 100644
index 303aa13..0000000
--- a/src/components/MarkdownEditor/default-options.js
+++ /dev/null
@@ -1,31 +0,0 @@
-// doc: https://nhnent.github.io/tui.editor/api/latest/ToastUIEditor.html#ToastUIEditor
-export default {
-  minHeight: '200px',
-  previewStyle: 'vertical',
-  useCommandShortcut: true,
-  useDefaultHTMLSanitizer: true,
-  usageStatistics: false,
-  hideModeSwitch: false,
-  toolbarItems: [
-    'heading',
-    'bold',
-    'italic',
-    'strike',
-    'divider',
-    'hr',
-    'quote',
-    'divider',
-    'ul',
-    'ol',
-    'task',
-    'indent',
-    'outdent',
-    'divider',
-    'table',
-    'image',
-    'link',
-    'divider',
-    'code',
-    'codeblock'
-  ]
-}
diff --git a/src/components/MarkdownEditor/index.vue b/src/components/MarkdownEditor/index.vue
deleted file mode 100644
index 1a8a01e..0000000
--- a/src/components/MarkdownEditor/index.vue
+++ /dev/null
@@ -1,118 +0,0 @@
-<template>
-  <div :id="id" />
-</template>
-
-<script>
-// deps for editor
-import 'codemirror/lib/codemirror.css' // codemirror
-import 'tui-editor/dist/tui-editor.css' // editor ui
-import 'tui-editor/dist/tui-editor-contents.css' // editor content
-
-import Editor from 'tui-editor'
-import defaultOptions from './default-options'
-
-export default {
-  name: 'MarkdownEditor',
-  props: {
-    value: {
-      type: String,
-      default: ''
-    },
-    id: {
-      type: String,
-      required: false,
-      default() {
-        return 'markdown-editor-' + +new Date() + ((Math.random() * 1000).toFixed(0) + '')
-      }
-    },
-    options: {
-      type: Object,
-      default() {
-        return defaultOptions
-      }
-    },
-    mode: {
-      type: String,
-      default: 'markdown'
-    },
-    height: {
-      type: String,
-      required: false,
-      default: '300px'
-    },
-    language: {
-      type: String,
-      required: false,
-      default: 'en_US' // https://github.com/nhnent/tui.editor/tree/master/src/js/langs
-    }
-  },
-  data() {
-    return {
-      editor: null
-    }
-  },
-  computed: {
-    editorOptions() {
-      const options = Object.assign({}, defaultOptions, this.options)
-      options.initialEditType = this.mode
-      options.height = this.height
-      options.language = this.language
-      return options
-    }
-  },
-  watch: {
-    value(newValue, preValue) {
-      if (newValue !== preValue && newValue !== this.editor.getValue()) {
-        this.editor.setValue(newValue)
-      }
-    },
-    language(val) {
-      this.destroyEditor()
-      this.initEditor()
-    },
-    height(newValue) {
-      this.editor.height(newValue)
-    },
-    mode(newValue) {
-      this.editor.changeMode(newValue)
-    }
-  },
-  mounted() {
-    this.initEditor()
-  },
-  destroyed() {
-    this.destroyEditor()
-  },
-  methods: {
-    initEditor() {
-      this.editor = new Editor({
-        el: document.getElementById(this.id),
-        ...this.editorOptions
-      })
-      if (this.value) {
-        this.editor.setValue(this.value)
-      }
-      this.editor.on('change', () => {
-        this.$emit('input', this.editor.getValue())
-      })
-    },
-    destroyEditor() {
-      if (!this.editor) return
-      this.editor.off('change')
-      this.editor.remove()
-    },
-    setValue(value) {
-      this.editor.setValue(value)
-    },
-    getValue() {
-      return this.editor.getValue()
-    },
-    setHtml(value) {
-      this.editor.setHtml(value)
-    },
-    getHtml() {
-      return this.editor.getHtml()
-    }
-  }
-}
-</script>
diff --git a/src/components/Pagination/index.vue b/src/components/Pagination/index.vue
index c815e13..8fccb8a 100644
--- a/src/components/Pagination/index.vue
+++ b/src/components/Pagination/index.vue
@@ -81,7 +81,7 @@ export default {
       }
     },
     handleCurrentChange(val) {
-      this.$emit('pagination', { page: val, limit: this.pageSize })
+      this.$emit('pagination', { current: val, limit: this.pageSize })
       if (this.autoScroll) {
         scrollTo(0, 800)
       }
diff --git a/src/components/PanThumb/index.vue b/src/components/PanThumb/index.vue
deleted file mode 100644
index 1bcf417..0000000
--- a/src/components/PanThumb/index.vue
+++ /dev/null
@@ -1,142 +0,0 @@
-<template>
-  <div :style="{zIndex:zIndex,height:height,width:width}" class="pan-item">
-    <div class="pan-info">
-      <div class="pan-info-roles-container">
-        <slot />
-      </div>
-    </div>
-    <!-- eslint-disable-next-line -->
-    <div :style="{backgroundImage: `url(${image})`}" class="pan-thumb"></div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'PanThumb',
-  props: {
-    image: {
-      type: String,
-      required: true
-    },
-    zIndex: {
-      type: Number,
-      default: 1
-    },
-    width: {
-      type: String,
-      default: '150px'
-    },
-    height: {
-      type: String,
-      default: '150px'
-    }
-  }
-}
-</script>
-
-<style scoped>
-.pan-item {
-  width: 200px;
-  height: 200px;
-  border-radius: 50%;
-  display: inline-block;
-  position: relative;
-  cursor: default;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-}
-
-.pan-info-roles-container {
-  padding: 20px;
-  text-align: center;
-}
-
-.pan-thumb {
-  width: 100%;
-  height: 100%;
-  background-position: center center;
-  background-size: cover;
-  border-radius: 50%;
-  overflow: hidden;
-  position: absolute;
-  transform-origin: 95% 40%;
-  transition: all 0.3s ease-in-out;
-}
-
-/* .pan-thumb:after {
-  content: '';
-  width: 8px;
-  height: 8px;
-  position: absolute;
-  border-radius: 50%;
-  top: 40%;
-  left: 95%;
-  margin: -4px 0 0 -4px;
-  background: radial-gradient(ellipse at center, rgba(14, 14, 14, 1) 0%, rgba(125, 126, 125, 1) 100%);
-  box-shadow: 0 0 1px rgba(255, 255, 255, 0.9);
-} */
-
-.pan-info {
-  position: absolute;
-  width: inherit;
-  height: inherit;
-  border-radius: 50%;
-  overflow: hidden;
-  box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.05);
-}
-
-.pan-info h3 {
-  color: #fff;
-  text-transform: uppercase;
-  position: relative;
-  letter-spacing: 2px;
-  font-size: 18px;
-  margin: 0 60px;
-  padding: 22px 0 0 0;
-  height: 85px;
-  font-family: 'Open Sans', Arial, sans-serif;
-  text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
-}
-
-.pan-info p {
-  color: #fff;
-  padding: 10px 5px;
-  font-style: italic;
-  margin: 0 30px;
-  font-size: 12px;
-  border-top: 1px solid rgba(255, 255, 255, 0.5);
-}
-
-.pan-info p a {
-  display: block;
-  color: #333;
-  width: 80px;
-  height: 80px;
-  background: rgba(255, 255, 255, 0.3);
-  border-radius: 50%;
-  color: #fff;
-  font-style: normal;
-  font-weight: 700;
-  text-transform: uppercase;
-  font-size: 9px;
-  letter-spacing: 1px;
-  padding-top: 24px;
-  margin: 7px auto 0;
-  font-family: 'Open Sans', Arial, sans-serif;
-  opacity: 0;
-  transition: transform 0.3s ease-in-out 0.2s, opacity 0.3s ease-in-out 0.2s, background 0.2s linear 0s;
-  transform: translateX(60px) rotate(90deg);
-}
-
-.pan-info p a:hover {
-  background: rgba(255, 255, 255, 0.5);
-}
-
-.pan-item:hover .pan-thumb {
-  transform: rotate(-110deg);
-}
-
-.pan-item:hover .pan-info p a {
-  opacity: 1;
-  transform: translateX(0px) rotate(0deg);
-}
-</style>
diff --git a/src/components/PicReview/index.js b/src/components/PicReview/index.js
new file mode 100644
index 0000000..e6080b9
--- /dev/null
+++ b/src/components/PicReview/index.js
@@ -0,0 +1,11 @@
+import Vue from 'vue'
+// 按照方法调用vue组件，用完即销毁
+const PicConstrctor = Vue.extend(require('./main.vue').default)
+// 定义原型方法
+Vue.prototype.$createPicReview = (options) => {
+  const instance = new PicConstrctor({
+    data: options
+  })
+  instance.vm = instance.$mount()
+  document.getElementById('app').appendChild(instance.vm.$el)
+}
diff --git a/src/components/PicReview/main.vue b/src/components/PicReview/main.vue
new file mode 100644
index 0000000..33e15c1
--- /dev/null
+++ b/src/components/PicReview/main.vue
@@ -0,0 +1,41 @@
+<template>
+  <div>
+    <img id="root-pic" ref="targetImg" :src="url">
+  </div>
+</template>
+
+<script>
+import Viewer from 'viewerjs'
+import 'viewerjs/dist/viewer.css'
+export default {
+  name: 'PicDialog',
+  data() {
+    return {
+      instance: null,
+      url: null
+    }
+  },
+  mounted() {
+    this.instance = new Viewer(this.$refs.targetImg, {
+      inline: false,
+      navbar: false,
+      // viewed() {
+      //   this.instance.zoomTo(1)
+      // },
+      hidden: () => {
+        console.log('destroy')
+        this.instance.destroy()
+        this.$destroy(true)
+        this.$el.parentNode.removeChild(this.$el)
+      }
+    })
+    this.instance.show()
+    console.log(this.instance)
+  }
+}
+</script>
+<style>
+#root-pic {
+  display: none;
+}
+</style>
diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue
index 55e8c1e..43d0a12 100644
--- a/src/components/RightPanel/index.vue
+++ b/src/components/RightPanel/index.vue
@@ -2,7 +2,7 @@
   <div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
     <div class="rightPanel-background" />
     <div class="rightPanel">
-      <div class="handle-button" :style="{'top':buttonTop+'px','background-color':theme}" @click="show=!show">
+      <div class="handle-button" :style="{'bottom':buttonBottom+'px','background-color':theme}" @click="show=!show">
         <i :class="show?'el-icon-close':'el-icon-setting'" />
       </div>
       <div class="rightPanel-items">
@@ -22,8 +22,8 @@ export default {
       default: false,
       type: Boolean
     },
-    buttonTop: {
-      default: 250,
+    buttonBottom: {
+      default: 55,
       type: Number
     }
   },
diff --git a/src/components/Share/DropdownMenu.vue b/src/components/Share/DropdownMenu.vue
deleted file mode 100644
index d194a51..0000000
--- a/src/components/Share/DropdownMenu.vue
+++ /dev/null
@@ -1,103 +0,0 @@
-<template>
-  <div :class="{active:isActive}" class="share-dropdown-menu">
-    <div class="share-dropdown-menu-wrapper">
-      <span class="share-dropdown-menu-title" @click.self="clickTitle">{{ title }}</span>
-      <div v-for="(item,index) of items" :key="index" class="share-dropdown-menu-item">
-        <a v-if="item.href" :href="item.href" target="_blank">{{ item.title }}</a>
-        <span v-else>{{ item.title }}</span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    items: {
-      type: Array,
-      default: function() {
-        return []
-      }
-    },
-    title: {
-      type: String,
-      default: 'vue'
-    }
-  },
-  data() {
-    return {
-      isActive: false
-    }
-  },
-  methods: {
-    clickTitle() {
-      this.isActive = !this.isActive
-    }
-  }
-}
-</script>
-
-<style lang="scss" >
-$n: 9; //和items.length 相同
-$t: .1s;
-.share-dropdown-menu {
-  width: 250px;
-  position: relative;
-  z-index: 1;
-  height: auto!important;
-  &-title {
-    width: 100%;
-    display: block;
-    cursor: pointer;
-    background: black;
-    color: white;
-    height: 60px;
-    line-height: 60px;
-    font-size: 20px;
-    text-align: center;
-    z-index: 2;
-    transform: translate3d(0,0,0);
-  }
-  &-wrapper {
-    position: relative;
-  }
-  &-item {
-    text-align: center;
-    position: absolute;
-    width: 100%;
-    background: #e0e0e0;
-    color: #000;
-    line-height: 60px;
-    height: 60px;
-    cursor: pointer;
-    font-size: 18px;
-    overflow: hidden;
-    opacity: 1;
-    transition: transform 0.28s ease;
-    &:hover {
-      background: black;
-      color: white;
-    }
-    @for $i from 1 through $n {
-      &:nth-of-type(#{$i}) {
-        z-index: -1;
-        transition-delay: $i*$t;
-        transform: translate3d(0, -60px, 0);
-      }
-    }
-  }
-  &.active {
-    .share-dropdown-menu-wrapper {
-      z-index: 1;
-    }
-    .share-dropdown-menu-item {
-      @for $i from 1 through $n {
-        &:nth-of-type(#{$i}) {
-          transition-delay: ($n - $i)*$t;
-          transform: translate3d(0, ($i - 1)*60px, 0);
-        }
-      }
-    }
-  }
-}
-</style>
diff --git a/src/components/SizeSelect/index.vue b/src/components/SizeSelect/index.vue
deleted file mode 100644
index e88065b..0000000
--- a/src/components/SizeSelect/index.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<template>
-  <el-dropdown trigger="click" @command="handleSetSize">
-    <div>
-      <svg-icon class-name="size-icon" icon-class="size" />
-    </div>
-    <el-dropdown-menu slot="dropdown">
-      <el-dropdown-item v-for="item of sizeOptions" :key="item.value" :disabled="size===item.value" :command="item.value">
-        {{
-          item.label }}
-      </el-dropdown-item>
-    </el-dropdown-menu>
-  </el-dropdown>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      sizeOptions: [
-        { label: 'Default', value: 'default' },
-        { label: 'Medium', value: 'medium' },
-        { label: 'Small', value: 'small' },
-        { label: 'Mini', value: 'mini' }
-      ]
-    }
-  },
-  computed: {
-    size() {
-      return this.$store.getters.size
-    }
-  },
-  methods: {
-    handleSetSize(size) {
-      this.$ELEMENT.size = size
-      this.$store.dispatch('app/setSize', size)
-      this.refreshView()
-      this.$message({
-        message: 'Switch Size Success',
-        type: 'success'
-      })
-    },
-    refreshView() {
-      // In order to make the cached page re-rendered
-      this.$store.dispatch('tagsView/delAllCachedViews', this.$route)
-
-      const { fullPath } = this.$route
-
-      this.$nextTick(() => {
-        this.$router.replace({
-          path: '/redirect' + fullPath
-        })
-      })
-    }
-  }
-
-}
-</script>
diff --git a/src/components/ThemePicker/index.css b/src/components/ThemePicker/index.css
new file mode 100644
index 0000000..1d7a4fa
--- /dev/null
+++ b/src/components/ThemePicker/index.css
@@ -0,0 +1 @@
+@charset "UTF-8";.el-pagination--small .arrow.disabled,.el-table .hidden-columns,.el-table td.is-hidden>*,.el-table th.is-hidden>*,.el-table--hidden{visibility:hidden}.el-input__suffix,.el-tree.is-dragging .el-tree-node__content *{pointer-events:none}.el-dropdown .el-dropdown-selfdefine:focus:active,.el-dropdown .el-dropdown-selfdefine:focus:not(.focusing),.el-message__closeBtn:focus,.el-message__content:focus,.el-popover:focus,.el-popover:focus:active,.el-popover__reference:focus:hover,.el-popover__reference:focus:not(.focusing),.el-rate:active,.el-rate:focus,.el-tooltip:focus:hover,.el-tooltip:focus:not(.focusing),.el-upload-list__item.is-success:active,.el-upload-list__item.is-success:not(.focusing):focus{outline-width:0}@font-face{font-family:element-icons;src:url(fonts/element-icons.woff) format("woff"),url(fonts/element-icons.ttf) format("truetype");font-weight:400;font-display:"auto";font-style:normal}[class*=" el-icon-"],[class^=el-icon-]{font-family:element-icons!important;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;vertical-align:baseline;display:inline-block;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.el-icon-ice-cream-round:before{content:"\e6a0"}.el-icon-ice-cream-square:before{content:"\e6a3"}.el-icon-lollipop:before{content:"\e6a4"}.el-icon-potato-strips:before{content:"\e6a5"}.el-icon-milk-tea:before{content:"\e6a6"}.el-icon-ice-drink:before{content:"\e6a7"}.el-icon-ice-tea:before{content:"\e6a9"}.el-icon-coffee:before{content:"\e6aa"}.el-icon-orange:before{content:"\e6ab"}.el-icon-pear:before{content:"\e6ac"}.el-icon-apple:before{content:"\e6ad"}.el-icon-cherry:before{content:"\e6ae"}.el-icon-watermelon:before{content:"\e6af"}.el-icon-grape:before{content:"\e6b0"}.el-icon-refrigerator:before{content:"\e6b1"}.el-icon-goblet-square-full:before{content:"\e6b2"}.el-icon-goblet-square:before{content:"\e6b3"}.el-icon-goblet-full:before{content:"\e6b4"}.el-icon-goblet:before{content:"\e6b5"}.el-icon-cold-drink:before{content:"\e6b6"}.el-icon-coffee-cup:before{content:"\e6b8"}.el-icon-water-cup:before{content:"\e6b9"}.el-icon-hot-water:before{content:"\e6ba"}.el-icon-ice-cream:before{content:"\e6bb"}.el-icon-dessert:before{content:"\e6bc"}.el-icon-sugar:before{content:"\e6bd"}.el-icon-tableware:before{content:"\e6be"}.el-icon-burger:before{content:"\e6bf"}.el-icon-knife-fork:before{content:"\e6c1"}.el-icon-fork-spoon:before{content:"\e6c2"}.el-icon-chicken:before{content:"\e6c3"}.el-icon-food:before{content:"\e6c4"}.el-icon-dish-1:before{content:"\e6c5"}.el-icon-dish:before{content:"\e6c6"}.el-icon-moon-night:before{content:"\e6ee"}.el-icon-moon:before{content:"\e6f0"}.el-icon-cloudy-and-sunny:before{content:"\e6f1"}.el-icon-partly-cloudy:before{content:"\e6f2"}.el-icon-cloudy:before{content:"\e6f3"}.el-icon-sunny:before{content:"\e6f6"}.el-icon-sunset:before{content:"\e6f7"}.el-icon-sunrise-1:before{content:"\e6f8"}.el-icon-sunrise:before{content:"\e6f9"}.el-icon-heavy-rain:before{content:"\e6fa"}.el-icon-lightning:before{content:"\e6fb"}.el-icon-light-rain:before{content:"\e6fc"}.el-icon-wind-power:before{content:"\e6fd"}.el-icon-baseball:before{content:"\e712"}.el-icon-soccer:before{content:"\e713"}.el-icon-football:before{content:"\e715"}.el-icon-basketball:before{content:"\e716"}.el-icon-ship:before{content:"\e73f"}.el-icon-truck:before{content:"\e740"}.el-icon-bicycle:before{content:"\e741"}.el-icon-mobile-phone:before{content:"\e6d3"}.el-icon-service:before{content:"\e6d4"}.el-icon-key:before{content:"\e6e2"}.el-icon-unlock:before{content:"\e6e4"}.el-icon-lock:before{content:"\e6e5"}.el-icon-watch:before{content:"\e6fe"}.el-icon-watch-1:before{content:"\e6ff"}.el-icon-timer:before{content:"\e702"}.el-icon-alarm-clock:before{content:"\e703"}.el-icon-map-location:before{content:"\e704"}.el-icon-delete-location:before{content:"\e705"}.el-icon-add-location:before{content:"\e706"}.el-icon-location-information:before{content:"\e707"}.el-icon-location-outline:before{content:"\e708"}.el-icon-location:before{content:"\e79e"}.el-icon-place:before{content:"\e709"}.el-icon-discover:before{content:"\e70a"}.el-icon-first-aid-kit:before{content:"\e70b"}.el-icon-trophy-1:before{content:"\e70c"}.el-icon-trophy:before{content:"\e70d"}.el-icon-medal:before{content:"\e70e"}.el-icon-medal-1:before{content:"\e70f"}.el-icon-stopwatch:before{content:"\e710"}.el-icon-mic:before{content:"\e711"}.el-icon-copy-document:before{content:"\e718"}.el-icon-full-screen:before{content:"\e719"}.el-icon-switch-button:before{content:"\e71b"}.el-icon-aim:before{content:"\e71c"}.el-icon-crop:before{content:"\e71d"}.el-icon-odometer:before{content:"\e71e"}.el-icon-time:before{content:"\e71f"}.el-icon-bangzhu:before{content:"\e724"}.el-icon-close-notification:before{content:"\e726"}.el-icon-microphone:before{content:"\e727"}.el-icon-turn-off-microphone:before{content:"\e728"}.el-icon-position:before{content:"\e729"}.el-icon-postcard:before{content:"\e72a"}.el-icon-message:before{content:"\e72b"}.el-icon-chat-line-square:before{content:"\e72d"}.el-icon-chat-dot-square:before{content:"\e72e"}.el-icon-chat-dot-round:before{content:"\e72f"}.el-icon-chat-square:before{content:"\e730"}.el-icon-chat-line-round:before{content:"\e731"}.el-icon-chat-round:before{content:"\e732"}.el-icon-set-up:before{content:"\e733"}.el-icon-turn-off:before{content:"\e734"}.el-icon-open:before{content:"\e735"}.el-icon-connection:before{content:"\e736"}.el-icon-link:before{content:"\e737"}.el-icon-cpu:before{content:"\e738"}.el-icon-thumb:before{content:"\e739"}.el-icon-female:before{content:"\e73a"}.el-icon-male:before{content:"\e73b"}.el-icon-guide:before{content:"\e73c"}.el-icon-news:before{content:"\e73e"}.el-icon-price-tag:before{content:"\e744"}.el-icon-discount:before{content:"\e745"}.el-icon-wallet:before{content:"\e747"}.el-icon-coin:before{content:"\e748"}.el-icon-money:before{content:"\e749"}.el-icon-bank-card:before{content:"\e74a"}.el-icon-box:before{content:"\e74b"}.el-icon-present:before{content:"\e74c"}.el-icon-sell:before{content:"\e6d5"}.el-icon-sold-out:before{content:"\e6d6"}.el-icon-shopping-bag-2:before{content:"\e74d"}.el-icon-shopping-bag-1:before{content:"\e74e"}.el-icon-shopping-cart-2:before{content:"\e74f"}.el-icon-shopping-cart-1:before{content:"\e750"}.el-icon-shopping-cart-full:before{content:"\e751"}.el-icon-smoking:before{content:"\e752"}.el-icon-no-smoking:before{content:"\e753"}.el-icon-house:before{content:"\e754"}.el-icon-table-lamp:before{content:"\e755"}.el-icon-school:before{content:"\e756"}.el-icon-office-building:before{content:"\e757"}.el-icon-toilet-paper:before{content:"\e758"}.el-icon-notebook-2:before{content:"\e759"}.el-icon-notebook-1:before{content:"\e75a"}.el-icon-files:before{content:"\e75b"}.el-icon-collection:before{content:"\e75c"}.el-icon-receiving:before{content:"\e75d"}.el-icon-suitcase-1:before{content:"\e760"}.el-icon-suitcase:before{content:"\e761"}.el-icon-film:before{content:"\e763"}.el-icon-collection-tag:before{content:"\e765"}.el-icon-data-analysis:before{content:"\e766"}.el-icon-pie-chart:before{content:"\e767"}.el-icon-data-board:before{content:"\e768"}.el-icon-data-line:before{content:"\e76d"}.el-icon-reading:before{content:"\e769"}.el-icon-magic-stick:before{content:"\e76a"}.el-icon-coordinate:before{content:"\e76b"}.el-icon-mouse:before{content:"\e76c"}.el-icon-brush:before{content:"\e76e"}.el-icon-headset:before{content:"\e76f"}.el-icon-umbrella:before{content:"\e770"}.el-icon-scissors:before{content:"\e771"}.el-icon-mobile:before{content:"\e773"}.el-icon-attract:before{content:"\e774"}.el-icon-monitor:before{content:"\e775"}.el-icon-search:before{content:"\e778"}.el-icon-takeaway-box:before{content:"\e77a"}.el-icon-paperclip:before{content:"\e77d"}.el-icon-printer:before{content:"\e77e"}.el-icon-document-add:before{content:"\e782"}.el-icon-document:before{content:"\e785"}.el-icon-document-checked:before{content:"\e786"}.el-icon-document-copy:before{content:"\e787"}.el-icon-document-delete:before{content:"\e788"}.el-icon-document-remove:before{content:"\e789"}.el-icon-tickets:before{content:"\e78b"}.el-icon-folder-checked:before{content:"\e77f"}.el-icon-folder-delete:before{content:"\e780"}.el-icon-folder-remove:before{content:"\e781"}.el-icon-folder-add:before{content:"\e783"}.el-icon-folder-opened:before{content:"\e784"}.el-icon-folder:before{content:"\e78a"}.el-icon-edit-outline:before{content:"\e764"}.el-icon-edit:before{content:"\e78c"}.el-icon-date:before{content:"\e78e"}.el-icon-c-scale-to-original:before{content:"\e7c6"}.el-icon-view:before{content:"\e6ce"}.el-icon-loading:before{content:"\e6cf"}.el-icon-rank:before{content:"\e6d1"}.el-icon-sort-down:before{content:"\e7c4"}.el-icon-sort-up:before{content:"\e7c5"}.el-icon-sort:before{content:"\e6d2"}.el-icon-finished:before{content:"\e6cd"}.el-icon-refresh-left:before{content:"\e6c7"}.el-icon-refresh-right:before{content:"\e6c8"}.el-icon-refresh:before{content:"\e6d0"}.el-icon-video-play:before{content:"\e7c0"}.el-icon-video-pause:before{content:"\e7c1"}.el-icon-d-arrow-right:before{content:"\e6dc"}.el-icon-d-arrow-left:before{content:"\e6dd"}.el-icon-arrow-up:before{content:"\e6e1"}.el-icon-arrow-down:before{content:"\e6df"}.el-icon-arrow-right:before{content:"\e6e0"}.el-icon-arrow-left:before{content:"\e6de"}.el-icon-top-right:before{content:"\e6e7"}.el-icon-top-left:before{content:"\e6e8"}.el-icon-top:before{content:"\e6e6"}.el-icon-bottom:before{content:"\e6eb"}.el-icon-right:before{content:"\e6e9"}.el-icon-back:before{content:"\e6ea"}.el-icon-bottom-right:before{content:"\e6ec"}.el-icon-bottom-left:before{content:"\e6ed"}.el-icon-caret-top:before{content:"\e78f"}.el-icon-caret-bottom:before{content:"\e790"}.el-icon-caret-right:before{content:"\e791"}.el-icon-caret-left:before{content:"\e792"}.el-icon-d-caret:before{content:"\e79a"}.el-icon-share:before{content:"\e793"}.el-icon-menu:before{content:"\e798"}.el-icon-s-grid:before{content:"\e7a6"}.el-icon-s-check:before{content:"\e7a7"}.el-icon-s-data:before{content:"\e7a8"}.el-icon-s-opportunity:before{content:"\e7aa"}.el-icon-s-custom:before{content:"\e7ab"}.el-icon-s-claim:before{content:"\e7ad"}.el-icon-s-finance:before{content:"\e7ae"}.el-icon-s-comment:before{content:"\e7af"}.el-icon-s-flag:before{content:"\e7b0"}.el-icon-s-marketing:before{content:"\e7b1"}.el-icon-s-shop:before{content:"\e7b4"}.el-icon-s-open:before{content:"\e7b5"}.el-icon-s-management:before{content:"\e7b6"}.el-icon-s-ticket:before{content:"\e7b7"}.el-icon-s-release:before{content:"\e7b8"}.el-icon-s-home:before{content:"\e7b9"}.el-icon-s-promotion:before{content:"\e7ba"}.el-icon-s-operation:before{content:"\e7bb"}.el-icon-s-unfold:before{content:"\e7bc"}.el-icon-s-fold:before{content:"\e7a9"}.el-icon-s-platform:before{content:"\e7bd"}.el-icon-s-order:before{content:"\e7be"}.el-icon-s-cooperation:before{content:"\e7bf"}.el-icon-bell:before{content:"\e725"}.el-icon-message-solid:before{content:"\e799"}.el-icon-video-camera:before{content:"\e772"}.el-icon-video-camera-solid:before{content:"\e796"}.el-icon-camera:before{content:"\e779"}.el-icon-camera-solid:before{content:"\e79b"}.el-icon-download:before{content:"\e77c"}.el-icon-upload2:before{content:"\e77b"}.el-icon-upload:before{content:"\e7c3"}.el-icon-picture-outline-round:before{content:"\e75f"}.el-icon-picture-outline:before{content:"\e75e"}.el-icon-picture:before{content:"\e79f"}.el-icon-close:before{content:"\e6db"}.el-icon-check:before{content:"\e6da"}.el-icon-plus:before{content:"\e6d9"}.el-icon-minus:before{content:"\e6d8"}.el-icon-help:before{content:"\e73d"}.el-icon-s-help:before{content:"\e7b3"}.el-icon-circle-close:before{content:"\e78d"}.el-icon-circle-check:before{content:"\e720"}.el-icon-circle-plus-outline:before{content:"\e723"}.el-icon-remove-outline:before{content:"\e722"}.el-icon-zoom-out:before{content:"\e776"}.el-icon-zoom-in:before{content:"\e777"}.el-icon-error:before{content:"\e79d"}.el-icon-success:before{content:"\e79c"}.el-icon-circle-plus:before{content:"\e7a0"}.el-icon-remove:before{content:"\e7a2"}.el-icon-info:before{content:"\e7a1"}.el-icon-question:before{content:"\e7a4"}.el-icon-warning-outline:before{content:"\e6c9"}.el-icon-warning:before{content:"\e7a3"}.el-icon-goods:before{content:"\e7c2"}.el-icon-s-goods:before{content:"\e7b2"}.el-icon-star-off:before{content:"\e717"}.el-icon-star-on:before{content:"\e797"}.el-icon-more-outline:before{content:"\e6cc"}.el-icon-more:before{content:"\e794"}.el-icon-phone-outline:before{content:"\e6cb"}.el-icon-phone:before{content:"\e795"}.el-icon-user:before{content:"\e6e3"}.el-icon-user-solid:before{content:"\e7a5"}.el-icon-setting:before{content:"\e6ca"}.el-icon-s-tools:before{content:"\e7ac"}.el-icon-delete:before{content:"\e6d7"}.el-icon-delete-solid:before{content:"\e7c9"}.el-icon-eleme:before{content:"\e7c7"}.el-icon-platform-eleme:before{content:"\e7ca"}.el-icon-loading{-webkit-animation:rotating 2s linear infinite;animation:rotating 2s linear infinite}.el-icon--right{margin-left:5px}.el-icon--left{margin-right:5px}@-webkit-keyframes rotating{0%{-webkit-transform:rotateZ(0);transform:rotateZ(0)}100%{-webkit-transform:rotateZ(360deg);transform:rotateZ(360deg)}}@keyframes rotating{0%{-webkit-transform:rotateZ(0);transform:rotateZ(0)}100%{-webkit-transform:rotateZ(360deg);transform:rotateZ(360deg)}}.el-pagination{white-space:nowrap;padding:2px 5px;color:#303133;font-weight:700}.el-pagination::after,.el-pagination::before{display:table;content:""}.el-pagination::after{clear:both}.el-pagination button,.el-pagination span:not([class*=suffix]){display:inline-block;font-size:13px;min-width:35.5px;height:28px;line-height:28px;vertical-align:top;-webkit-box-sizing:border-box;box-sizing:border-box}.el-pagination .el-input__inner{text-align:center;-moz-appearance:textfield;line-height:normal}.el-pagination .el-input__suffix{right:0;-webkit-transform:scale(.8);transform:scale(.8)}.el-pagination .el-select .el-input{width:100px;margin:0 5px}.el-pagination .el-select .el-input .el-input__inner{padding-right:25px;border-radius:3px}.el-pagination button{border:none;padding:0 6px;background:0 0}.el-pagination button:focus{outline:0}.el-pagination button:hover{color:#409EFF}.el-pagination button:disabled{color:#C0C4CC;background-color:#FFF;cursor:not-allowed}.el-pagination .btn-next,.el-pagination .btn-prev{background:center center no-repeat #FFF;background-size:16px;cursor:pointer;margin:0;color:#303133}.el-pagination .btn-next .el-icon,.el-pagination .btn-prev .el-icon{display:block;font-size:12px;font-weight:700}.el-pagination .btn-prev{padding-right:12px}.el-pagination .btn-next{padding-left:12px}.el-pagination .el-pager li.disabled{color:#C0C4CC;cursor:not-allowed}.el-pager li,.el-pager li.btn-quicknext:hover,.el-pager li.btn-quickprev:hover{cursor:pointer}.el-pagination--small .btn-next,.el-pagination--small .btn-prev,.el-pagination--small .el-pager li,.el-pagination--small .el-pager li.btn-quicknext,.el-pagination--small .el-pager li.btn-quickprev,.el-pagination--small .el-pager li:last-child{border-color:transparent;font-size:12px;line-height:22px;height:22px;min-width:22px}.el-pagination--small .more::before,.el-pagination--small li.more::before{line-height:24px}.el-pagination--small button,.el-pagination--small span:not([class*=suffix]){height:22px;line-height:22px}.el-pagination--small .el-pagination__editor,.el-pagination--small .el-pagination__editor.el-input .el-input__inner{height:22px}.el-pagination__sizes{margin:0 10px 0 0;font-weight:400;color:#606266}.el-pagination__sizes .el-input .el-input__inner{font-size:13px;padding-left:8px}.el-pagination__sizes .el-input .el-input__inner:hover{border-color:#409EFF}.el-pagination__total{margin-right:10px;font-weight:400;color:#606266}.el-pagination__jump{margin-left:24px;font-weight:400;color:#606266}.el-pagination__jump .el-input__inner{padding:0 3px}.el-pagination__rightwrapper{float:right}.el-pagination__editor{line-height:18px;padding:0 2px;height:28px;text-align:center;margin:0 2px;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:3px}.el-pager,.el-pagination.is-background .btn-next,.el-pagination.is-background .btn-prev{padding:0}.el-pagination__editor.el-input{width:50px}.el-pagination__editor.el-input .el-input__inner{height:28px}.el-pagination__editor .el-input__inner::-webkit-inner-spin-button,.el-pagination__editor .el-input__inner::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.el-pagination.is-background .btn-next,.el-pagination.is-background .btn-prev,.el-pagination.is-background .el-pager li{margin:0 5px;background-color:#f4f4f5;color:#606266;min-width:30px;border-radius:2px}.el-pagination.is-background .btn-next.disabled,.el-pagination.is-background .btn-next:disabled,.el-pagination.is-background .btn-prev.disabled,.el-pagination.is-background .btn-prev:disabled,.el-pagination.is-background .el-pager li.disabled{color:#C0C4CC}.el-pagination.is-background .el-pager li:not(.disabled):hover{color:#409EFF}.el-pagination.is-background .el-pager li:not(.disabled).active{background-color:#409EFF;color:#FFF}.el-dialog,.el-pager li{background:#FFF;-webkit-box-sizing:border-box}.el-pagination.is-background.el-pagination--small .btn-next,.el-pagination.is-background.el-pagination--small .btn-prev,.el-pagination.is-background.el-pagination--small .el-pager li{margin:0 3px;min-width:22px}.el-pager,.el-pager li{vertical-align:top;margin:0;display:inline-block}.el-pager{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;list-style:none;font-size:0}.el-date-table,.el-table th{-webkit-user-select:none;-moz-user-select:none}.el-pager .more::before{line-height:30px}.el-pager li{padding:0 4px;font-size:13px;min-width:35.5px;height:28px;line-height:28px;box-sizing:border-box;text-align:center}.el-menu--collapse .el-menu .el-submenu,.el-menu--popup{min-width:200px}.el-pager li.btn-quicknext,.el-pager li.btn-quickprev{line-height:28px;color:#303133}.el-pager li.btn-quicknext.disabled,.el-pager li.btn-quickprev.disabled{color:#C0C4CC}.el-pager li.active+li{border-left:0}.el-pager li:hover{color:#409EFF}.el-pager li.active{color:#409EFF;cursor:default}@-webkit-keyframes v-modal-in{0%{opacity:0}}@-webkit-keyframes v-modal-out{100%{opacity:0}}.el-dialog{position:relative;margin:0 auto 50px;border-radius:2px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.3);box-shadow:0 1px 3px rgba(0,0,0,.3);box-sizing:border-box;width:50%}.el-dialog.is-fullscreen{width:100%;margin-top:0;margin-bottom:0;height:100%;overflow:auto}.el-dialog__wrapper{position:fixed;top:0;right:0;bottom:0;left:0;overflow:auto;margin:0}.el-dialog__header{padding:20px 20px 10px}.el-dialog__headerbtn{position:absolute;top:20px;right:20px;padding:0;background:0 0;border:none;outline:0;cursor:pointer;font-size:16px}.el-dialog__headerbtn .el-dialog__close{color:#909399}.el-dialog__headerbtn:focus .el-dialog__close,.el-dialog__headerbtn:hover .el-dialog__close{color:#409EFF}.el-dialog__title{line-height:24px;font-size:18px;color:#303133}.el-dialog__body{padding:30px 20px;color:#606266;font-size:14px;word-break:break-all}.el-dialog__footer{padding:10px 20px 20px;text-align:right;-webkit-box-sizing:border-box;box-sizing:border-box}.el-dialog--center{text-align:center}.el-dialog--center .el-dialog__body{text-align:initial;padding:25px 25px 30px}.el-dialog--center .el-dialog__footer{text-align:inherit}.dialog-fade-enter-active{-webkit-animation:dialog-fade-in .3s;animation:dialog-fade-in .3s}.dialog-fade-leave-active{-webkit-animation:dialog-fade-out .3s;animation:dialog-fade-out .3s}@-webkit-keyframes dialog-fade-in{0%{-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0);opacity:0}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}@keyframes dialog-fade-in{0%{-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0);opacity:0}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}@-webkit-keyframes dialog-fade-out{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}100%{-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0);opacity:0}}@keyframes dialog-fade-out{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}100%{-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0);opacity:0}}.el-autocomplete{position:relative;display:inline-block}.el-autocomplete-suggestion{margin:5px 0;-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px 0 rgba(0,0,0,.1);border-radius:4px;border:1px solid #E4E7ED;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:#FFF}.el-dropdown-menu,.el-menu--collapse .el-submenu .el-menu{z-index:10;-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1)}.el-autocomplete-suggestion__wrap{max-height:280px;padding:10px 0;-webkit-box-sizing:border-box;box-sizing:border-box}.el-autocomplete-suggestion__list{margin:0;padding:0}.el-autocomplete-suggestion li{padding:0 20px;margin:0;line-height:34px;cursor:pointer;color:#606266;font-size:14px;list-style:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.el-autocomplete-suggestion li.highlighted,.el-autocomplete-suggestion li:hover{background-color:#F5F7FA}.el-autocomplete-suggestion li.divider{margin-top:6px;border-top:1px solid #000}.el-autocomplete-suggestion li.divider:last-child{margin-bottom:-6px}.el-autocomplete-suggestion.is-loading li{text-align:center;height:100px;line-height:100px;font-size:20px;color:#999}.el-autocomplete-suggestion.is-loading li::after{display:inline-block;content:"";height:100%;vertical-align:middle}.el-autocomplete-suggestion.is-loading li:hover{background-color:#FFF}.el-autocomplete-suggestion.is-loading .el-icon-loading{vertical-align:middle}.el-dropdown{display:inline-block;position:relative;color:#606266;font-size:14px}.el-dropdown .el-button-group{display:block}.el-dropdown .el-button-group .el-button{float:none}.el-dropdown .el-dropdown__caret-button{padding-left:5px;padding-right:5px;position:relative;border-left:none}.el-dropdown .el-dropdown__caret-button::before{content:'';position:absolute;display:block;width:1px;top:5px;bottom:5px;left:0;background:rgba(255,255,255,.5)}.el-dropdown .el-dropdown__caret-button.el-button--default::before{background:rgba(220,223,230,.5)}.el-dropdown .el-dropdown__caret-button:hover::before{top:0;bottom:0}.el-dropdown .el-dropdown__caret-button .el-dropdown__icon{padding-left:0}.el-dropdown__icon{font-size:12px;margin:0 3px}.el-dropdown-menu{position:absolute;top:0;left:0;padding:10px 0;margin:5px 0;background-color:#FFF;border:1px solid #EBEEF5;border-radius:4px;box-shadow:0 2px 12px 0 rgba(0,0,0,.1)}.el-dropdown-menu__item{list-style:none;line-height:36px;padding:0 20px;margin:0;font-size:14px;color:#606266;cursor:pointer;outline:0}.el-dropdown-menu__item:focus,.el-dropdown-menu__item:not(.is-disabled):hover{background-color:#ecf5ff;color:#66b1ff}.el-dropdown-menu__item i{margin-right:5px}.el-dropdown-menu__item--divided{position:relative;margin-top:6px;border-top:1px solid #EBEEF5}.el-dropdown-menu__item--divided:before{content:'';height:6px;display:block;margin:0 -20px;background-color:#FFF}.el-dropdown-menu__item.is-disabled{cursor:default;color:#bbb;pointer-events:none}.el-dropdown-menu--medium{padding:6px 0}.el-dropdown-menu--medium .el-dropdown-menu__item{line-height:30px;padding:0 17px;font-size:14px}.el-dropdown-menu--medium .el-dropdown-menu__item.el-dropdown-menu__item--divided{margin-top:6px}.el-dropdown-menu--medium .el-dropdown-menu__item.el-dropdown-menu__item--divided:before{height:6px;margin:0 -17px}.el-dropdown-menu--small{padding:6px 0}.el-dropdown-menu--small .el-dropdown-menu__item{line-height:27px;padding:0 15px;font-size:13px}.el-dropdown-menu--small .el-dropdown-menu__item.el-dropdown-menu__item--divided{margin-top:4px}.el-dropdown-menu--small .el-dropdown-menu__item.el-dropdown-menu__item--divided:before{height:4px;margin:0 -15px}.el-dropdown-menu--mini{padding:3px 0}.el-dropdown-menu--mini .el-dropdown-menu__item{line-height:24px;padding:0 10px;font-size:12px}.el-dropdown-menu--mini .el-dropdown-menu__item.el-dropdown-menu__item--divided{margin-top:3px}.el-dropdown-menu--mini .el-dropdown-menu__item.el-dropdown-menu__item--divided:before{height:3px;margin:0 -10px}.el-menu{border-right:solid 1px #e6e6e6;list-style:none;position:relative;margin:0;padding-left:0;background-color:#FFF}.el-menu--horizontal>.el-menu-item:not(.is-disabled):focus,.el-menu--horizontal>.el-menu-item:not(.is-disabled):hover,.el-menu--horizontal>.el-submenu .el-submenu__title:hover{background-color:#fff}.el-menu::after,.el-menu::before{display:table;content:""}.el-menu::after{clear:both}.el-menu.el-menu--horizontal{border-bottom:solid 1px #e6e6e6}.el-menu--horizontal{border-right:none}.el-menu--horizontal>.el-menu-item{float:left;height:60px;line-height:60px;margin:0;border-bottom:2px solid transparent;color:#909399}.el-menu--horizontal>.el-menu-item a,.el-menu--horizontal>.el-menu-item a:hover{color:inherit}.el-menu--horizontal>.el-submenu{float:left}.el-menu--horizontal>.el-submenu:focus,.el-menu--horizontal>.el-submenu:hover{outline:0}.el-menu--horizontal>.el-submenu:focus .el-submenu__title,.el-menu--horizontal>.el-submenu:hover .el-submenu__title{color:#303133}.el-menu--horizontal>.el-submenu.is-active .el-submenu__title{border-bottom:2px solid #409EFF;color:#303133}.el-menu--horizontal>.el-submenu .el-submenu__title{height:60px;line-height:60px;border-bottom:2px solid transparent;color:#909399}.el-menu--horizontal>.el-submenu .el-submenu__icon-arrow{position:static;vertical-align:middle;margin-left:8px;margin-top:-3px}.el-menu--horizontal .el-menu .el-menu-item,.el-menu--horizontal .el-menu .el-submenu__title{background-color:#FFF;float:none;height:36px;line-height:36px;padding:0 10px;color:#909399}.el-menu--horizontal .el-menu .el-menu-item.is-active,.el-menu--horizontal .el-menu .el-submenu.is-active>.el-submenu__title{color:#303133}.el-menu--horizontal .el-menu-item:not(.is-disabled):focus,.el-menu--horizontal .el-menu-item:not(.is-disabled):hover{outline:0;color:#303133}.el-menu--horizontal>.el-menu-item.is-active{border-bottom:2px solid #409EFF;color:#303133}.el-menu--collapse{width:64px}.el-menu--collapse>.el-menu-item [class^=el-icon-],.el-menu--collapse>.el-submenu>.el-submenu__title [class^=el-icon-]{margin:0;vertical-align:middle;width:24px;text-align:center}.el-menu--collapse>.el-menu-item .el-submenu__icon-arrow,.el-menu--collapse>.el-submenu>.el-submenu__title .el-submenu__icon-arrow{display:none}.el-menu--collapse>.el-menu-item span,.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-item.is-active i{color:inherit}.el-menu--collapse .el-submenu{position:relative}.el-menu--collapse .el-submenu .el-menu{position:absolute;margin-left:5px;top:0;left:100%;border:1px solid #E4E7ED;border-radius:2px;box-shadow:0 2px 12px 0 rgba(0,0,0,.1)}.el-menu-item,.el-submenu__title{height:56px;line-height:56px;position:relative;-webkit-box-sizing:border-box;white-space:nowrap;list-style:none}.el-menu--collapse .el-submenu.is-opened>.el-submenu__title .el-submenu__icon-arrow{-webkit-transform:none;transform:none}.el-menu--popup{z-index:100;border:none;padding:5px 0;border-radius:2px;-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px 0 rgba(0,0,0,.1)}.el-menu--popup-bottom-start{margin-top:5px}.el-menu--popup-right-start{margin-left:5px;margin-right:5px}.el-menu-item{font-size:14px;color:#303133;padding:0 20px;cursor:pointer;-webkit-transition:border-color .3s,background-color .3s,color .3s;transition:border-color .3s,background-color .3s,color .3s;box-sizing:border-box}.el-menu-item *{vertical-align:middle}.el-menu-item i{color:#909399}.el-menu-item:focus,.el-menu-item:hover{outline:0;background-color:#ecf5ff}.el-menu-item.is-disabled{opacity:.25;cursor:not-allowed;background:0 0!important}.el-menu-item [class^=el-icon-]{margin-right:5px;width:24px;text-align:center;font-size:18px;vertical-align:middle}.el-menu-item.is-active{color:#409EFF}.el-menu-item.is-active i{color:inherit}.el-submenu{list-style:none;margin:0;padding-left:0}.el-submenu__title{font-size:14px;color:#303133;padding:0 20px;cursor:pointer;-webkit-transition:border-color .3s,background-color .3s,color .3s;transition:border-color .3s,background-color .3s,color .3s;box-sizing:border-box}.el-submenu__title *{vertical-align:middle}.el-submenu__title i{color:#909399}.el-submenu__title:focus,.el-submenu__title:hover{outline:0;background-color:#ecf5ff}.el-submenu__title.is-disabled{opacity:.25;cursor:not-allowed;background:0 0!important}.el-submenu__title:hover{background-color:#ecf5ff}.el-submenu .el-menu{border:none}.el-submenu .el-menu-item{height:50px;line-height:50px;padding:0 45px;min-width:200px}.el-submenu__icon-arrow{position:absolute;top:50%;right:20px;margin-top:-7px;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;font-size:12px}.el-submenu.is-active .el-submenu__title{border-bottom-color:#409EFF}.el-submenu.is-opened>.el-submenu__title .el-submenu__icon-arrow{-webkit-transform:rotateZ(180deg);transform:rotateZ(180deg)}.el-submenu.is-disabled .el-menu-item,.el-submenu.is-disabled .el-submenu__title{opacity:.25;cursor:not-allowed;background:0 0!important}.el-submenu [class^=el-icon-]{vertical-align:middle;margin-right:5px;width:24px;text-align:center;font-size:18px}.el-menu-item-group>ul{padding:0}.el-menu-item-group__title{padding:7px 0 7px 20px;line-height:normal;font-size:12px;color:#909399}.el-radio-button__inner,.el-radio-group{display:inline-block;line-height:1;vertical-align:middle}.horizontal-collapse-transition .el-submenu__title .el-submenu__icon-arrow{-webkit-transition:.2s;transition:.2s;opacity:0}.el-radio-group{font-size:0}.el-radio-button{position:relative;display:inline-block;outline:0}.el-radio-button__inner{white-space:nowrap;background:#FFF;border:1px solid #DCDFE6;font-weight:500;border-left:0;color:#606266;-webkit-appearance:none;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;outline:0;margin:0;position:relative;cursor:pointer;-webkit-transition:all .3s cubic-bezier(.645,.045,.355,1);transition:all .3s cubic-bezier(.645,.045,.355,1);padding:12px 20px;font-size:14px;border-radius:0}.el-radio-button__inner.is-round{padding:12px 20px}.el-radio-button__inner:hover{color:#409EFF}.el-radio-button__inner [class*=el-icon-]{line-height:.9}.el-radio-button__inner [class*=el-icon-]+span{margin-left:5px}.el-radio-button:first-child .el-radio-button__inner{border-left:1px solid #DCDFE6;border-radius:4px 0 0 4px;-webkit-box-shadow:none!important;box-shadow:none!important}.el-radio-button__orig-radio{opacity:0;outline:0;position:absolute;z-index:-1}.el-radio-button__orig-radio:checked+.el-radio-button__inner{color:#FFF;background-color:#409EFF;border-color:#409EFF;-webkit-box-shadow:-1px 0 0 0 #409EFF;box-shadow:-1px 0 0 0 #409EFF}.el-radio-button__orig-radio:disabled+.el-radio-button__inner{color:#C0C4CC;cursor:not-allowed;background-image:none;background-color:#FFF;border-color:#EBEEF5;-webkit-box-shadow:none;box-shadow:none}.el-radio-button__orig-radio:disabled:checked+.el-radio-button__inner{background-color:#F2F6FC}.el-radio-button:last-child .el-radio-button__inner{border-radius:0 4px 4px 0}.el-popover,.el-radio-button:first-child:last-child .el-radio-button__inner{border-radius:4px}.el-radio-button--medium .el-radio-button__inner{padding:10px 20px;font-size:14px;border-radius:0}.el-radio-button--medium .el-radio-button__inner.is-round{padding:10px 20px}.el-radio-button--small .el-radio-button__inner{padding:9px 15px;font-size:12px;border-radius:0}.el-radio-button--small .el-radio-button__inner.is-round{padding:9px 15px}.el-radio-button--mini .el-radio-button__inner{padding:7px 15px;font-size:12px;border-radius:0}.el-radio-button--mini .el-radio-button__inner.is-round{padding:7px 15px}.el-radio-button:focus:not(.is-focus):not(:active):not(.is-disabled){-webkit-box-shadow:0 0 2px 2px #409EFF;box-shadow:0 0 2px 2px #409EFF}.el-switch{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;font-size:14px;line-height:20px;height:20px;vertical-align:middle}.el-switch__core,.el-switch__label{display:inline-block;cursor:pointer}.el-switch.is-disabled .el-switch__core,.el-switch.is-disabled .el-switch__label{cursor:not-allowed}.el-switch__label{-webkit-transition:.2s;transition:.2s;height:20px;font-size:14px;font-weight:500;vertical-align:middle;color:#303133}.el-switch__label.is-active{color:#409EFF}.el-switch__label--left{margin-right:10px}.el-switch__label--right{margin-left:10px}.el-switch__label *{line-height:1;font-size:14px;display:inline-block}.el-switch__input{position:absolute;width:0;height:0;opacity:0;margin:0}.el-switch__core{margin:0;position:relative;width:40px;height:20px;border:1px solid #DCDFE6;outline:0;border-radius:10px;-webkit-box-sizing:border-box;box-sizing:border-box;background:#DCDFE6;-webkit-transition:border-color .3s,background-color .3s;transition:border-color .3s,background-color .3s;vertical-align:middle}.el-switch__core:after{content:"";position:absolute;top:1px;left:1px;border-radius:100%;-webkit-transition:all .3s;transition:all .3s;width:16px;height:16px;background-color:#FFF}.el-switch.is-checked .el-switch__core{border-color:#409EFF;background-color:#409EFF}.el-switch.is-checked .el-switch__core::after{left:100%;margin-left:-17px}.el-switch.is-disabled{opacity:.6}.el-switch--wide .el-switch__label.el-switch__label--left span{left:10px}.el-switch--wide .el-switch__label.el-switch__label--right span{right:10px}.el-switch .label-fade-enter,.el-switch .label-fade-leave-active{opacity:0}.el-select-dropdown{position:absolute;z-index:1001;border:1px solid #E4E7ED;border-radius:4px;background-color:#FFF;-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px 0 rgba(0,0,0,.1);-webkit-box-sizing:border-box;box-sizing:border-box;margin:5px 0}.el-select-dropdown.is-multiple .el-select-dropdown__item.selected{color:#409EFF;background-color:#FFF}.el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover{background-color:#F5F7FA}.el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after{position:absolute;right:20px;font-family:element-icons;content:"\e6da";font-size:12px;font-weight:700;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.el-select-dropdown .el-scrollbar.is-empty .el-select-dropdown__list{padding:0}.el-select-dropdown__empty{padding:10px 0;margin:0;text-align:center;color:#999;font-size:14px}.el-select-dropdown__wrap{max-height:274px}.el-select-dropdown__list{list-style:none;padding:6px 0;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box}.el-select-dropdown__item{font-size:14px;padding:0 20px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#606266;height:34px;line-height:34px;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer}.el-select-dropdown__item.is-disabled{color:#C0C4CC;cursor:not-allowed}.el-select-dropdown__item.is-disabled:hover{background-color:#FFF}.el-select-dropdown__item.hover,.el-select-dropdown__item:hover{background-color:#F5F7FA}.el-select-dropdown__item.selected{color:#409EFF;font-weight:700}.el-select-group{margin:0;padding:0}.el-select-group__wrap{position:relative;list-style:none;margin:0;padding:0}.el-select-group__wrap:not(:last-of-type){padding-bottom:24px}.el-select-group__wrap:not(:last-of-type)::after{content:'';position:absolute;display:block;left:20px;right:20px;bottom:12px;height:1px;background:#E4E7ED}.el-select-group__title{padding-left:20px;font-size:12px;color:#909399;line-height:30px}.el-select-group .el-select-dropdown__item{padding-left:20px}.el-select{display:inline-block;position:relative}.el-select .el-select__tags>span{display:contents}.el-select:hover .el-input__inner{border-color:#C0C4CC}.el-select .el-input__inner{cursor:pointer;padding-right:35px}.el-select .el-input__inner:focus{border-color:#409EFF}.el-select .el-input .el-select__caret{color:#C0C4CC;font-size:14px;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;-webkit-transform:rotateZ(180deg);transform:rotateZ(180deg);cursor:pointer}.el-select .el-input .el-select__caret.is-reverse{-webkit-transform:rotateZ(0);transform:rotateZ(0)}.el-select .el-input .el-select__caret.is-show-close{font-size:14px;text-align:center;-webkit-transform:rotateZ(180deg);transform:rotateZ(180deg);border-radius:100%;color:#C0C4CC;-webkit-transition:color .2s cubic-bezier(.645,.045,.355,1);transition:color .2s cubic-bezier(.645,.045,.355,1)}.el-select .el-input .el-select__caret.is-show-close:hover{color:#909399}.el-select .el-input.is-disabled .el-input__inner{cursor:not-allowed}.el-select .el-input.is-disabled .el-input__inner:hover{border-color:#E4E7ED}.el-select .el-input.is-focus .el-input__inner{border-color:#409EFF}.el-select>.el-input{display:block}.el-select__input{border:none;outline:0;padding:0;margin-left:15px;color:#666;font-size:14px;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:28px;background-color:transparent}.el-select__input.is-mini{height:14px}.el-select__close{cursor:pointer;position:absolute;top:8px;z-index:1000;right:25px;color:#C0C4CC;line-height:18px;font-size:14px}.el-select__close:hover{color:#909399}.el-select__tags{position:absolute;line-height:normal;white-space:normal;z-index:1;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap}.el-select .el-tag__close{margin-top:-2px}.el-select .el-tag{-webkit-box-sizing:border-box;box-sizing:border-box;border-color:transparent;margin:2px 0 2px 6px;background-color:#f0f2f5}.el-select .el-tag__close.el-icon-close{background-color:#C0C4CC;right:-7px;top:0;color:#FFF}.el-select .el-tag__close.el-icon-close:hover{background-color:#909399}.el-table,.el-table__expanded-cell{background-color:#FFF}.el-select .el-tag__close.el-icon-close::before{display:block;-webkit-transform:translate(0,.5px);transform:translate(0,.5px)}.el-table{position:relative;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:1;-ms-flex:1;flex:1;width:100%;max-width:100%;font-size:14px;color:#606266}.el-table--mini,.el-table--small,.el-table__expand-icon{font-size:12px}.el-table__empty-block{min-height:60px;text-align:center;width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.el-table__empty-text{line-height:60px;width:50%;color:#909399}.el-table__expand-column .cell{padding:0;text-align:center}.el-table__expand-icon{position:relative;cursor:pointer;color:#666;-webkit-transition:-webkit-transform .2s ease-in-out;transition:-webkit-transform .2s ease-in-out;transition:transform .2s ease-in-out;transition:transform .2s ease-in-out,-webkit-transform .2s ease-in-out;height:20px}.el-table__expand-icon--expanded{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.el-table__expand-icon>.el-icon{position:absolute;left:50%;top:50%;margin-left:-5px;margin-top:-5px}.el-table__expanded-cell[class*=cell]{padding:20px 50px}.el-table__expanded-cell:hover{background-color:transparent!important}.el-table__placeholder{display:inline-block;width:20px}.el-table__append-wrapper{overflow:hidden}.el-table--fit{border-right:0;border-bottom:0}.el-table--fit td.gutter,.el-table--fit th.gutter{border-right-width:1px}.el-table--scrollable-x .el-table__body-wrapper{overflow-x:auto}.el-table--scrollable-y .el-table__body-wrapper{overflow-y:auto}.el-table thead{color:#909399;font-weight:500}.el-table thead.is-group th{background:#F5F7FA}.el-table th,.el-table tr{background-color:#FFF}.el-table td,.el-table th{padding:12px 0;min-width:0;-webkit-box-sizing:border-box;box-sizing:border-box;text-overflow:ellipsis;vertical-align:middle;position:relative;text-align:left}.el-table td.is-center,.el-table th.is-center{text-align:center}.el-table td.is-right,.el-table th.is-right{text-align:right}.el-table td.gutter,.el-table th.gutter{width:15px;border-right-width:0;border-bottom-width:0;padding:0}.el-table--medium td,.el-table--medium th{padding:10px 0}.el-table--small td,.el-table--small th{padding:8px 0}.el-table--mini td,.el-table--mini th{padding:6px 0}.el-table .cell,.el-table--border td:first-child .cell,.el-table--border th:first-child .cell{padding-left:10px}.el-table tr input[type=checkbox]{margin:0}.el-table td,.el-table th.is-leaf{border-bottom:1px solid #EBEEF5}.el-table th.is-sortable{cursor:pointer}.el-table th{overflow:hidden;-ms-user-select:none;user-select:none}.el-table th>.cell{display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;vertical-align:middle;padding-left:10px;padding-right:10px;width:100%}.el-table th>.cell.highlight{color:#409EFF}.el-table th.required>div::before{display:inline-block;content:"";width:8px;height:8px;border-radius:50%;background:#ff4d51;margin-right:5px;vertical-align:middle}.el-table td div{-webkit-box-sizing:border-box;box-sizing:border-box}.el-table td.gutter{width:0}.el-table .cell{-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;white-space:normal;word-break:break-all;line-height:23px;padding-right:10px}.el-table .cell.el-tooltip{white-space:nowrap;min-width:50px}.el-table--border,.el-table--group{border:1px solid #EBEEF5}.el-table--border::after,.el-table--group::after,.el-table::before{content:'';position:absolute;background-color:#EBEEF5;z-index:1}.el-table--border::after,.el-table--group::after{top:0;right:0;width:1px;height:100%}.el-table::before{left:0;bottom:0;width:100%;height:1px}.el-table--border{border-right:none;border-bottom:none}.el-table--border.el-loading-parent--relative{border-color:transparent}.el-table--border td,.el-table--border th,.el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed{border-right:1px solid #EBEEF5}.el-table--border th.gutter:last-of-type{border-bottom:1px solid #EBEEF5;border-bottom-width:1px}.el-table--border th,.el-table__fixed-right-patch{border-bottom:1px solid #EBEEF5}.el-table__fixed,.el-table__fixed-right{position:absolute;top:0;left:0;overflow-x:hidden;overflow-y:hidden;-webkit-box-shadow:0 0 10px rgba(0,0,0,.12);box-shadow:0 0 10px rgba(0,0,0,.12)}.el-table__fixed-right::before,.el-table__fixed::before{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background-color:#EBEEF5;z-index:4}.el-table__fixed-right-patch{position:absolute;top:-1px;right:0;background-color:#FFF}.el-table__fixed-right{top:0;left:auto;right:0}.el-table__fixed-right .el-table__fixed-body-wrapper,.el-table__fixed-right .el-table__fixed-footer-wrapper,.el-table__fixed-right .el-table__fixed-header-wrapper{left:auto;right:0}.el-table__fixed-header-wrapper{position:absolute;left:0;top:0;z-index:3}.el-table__fixed-footer-wrapper{position:absolute;left:0;bottom:0;z-index:3}.el-table__fixed-footer-wrapper tbody td{border-top:1px solid #EBEEF5;background-color:#F5F7FA;color:#606266}.el-table__fixed-body-wrapper{position:absolute;left:0;top:37px;overflow:hidden;z-index:3}.el-table__body-wrapper,.el-table__footer-wrapper,.el-table__header-wrapper{width:100%}.el-table__footer-wrapper{margin-top:-1px}.el-table__footer-wrapper td{border-top:1px solid #EBEEF5}.el-table__body,.el-table__footer,.el-table__header{table-layout:fixed;border-collapse:separate}.el-table__footer-wrapper,.el-table__header-wrapper{overflow:hidden}.el-table__footer-wrapper tbody td,.el-table__header-wrapper tbody td{background-color:#F5F7FA;color:#606266}.el-table__body-wrapper{overflow:hidden;position:relative}.el-table__body-wrapper.is-scrolling-left~.el-table__fixed,.el-table__body-wrapper.is-scrolling-none~.el-table__fixed,.el-table__body-wrapper.is-scrolling-none~.el-table__fixed-right,.el-table__body-wrapper.is-scrolling-right~.el-table__fixed-right{-webkit-box-shadow:none;box-shadow:none}.el-picker-panel,.el-table-filter{-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1)}.el-table__body-wrapper .el-table--border.is-scrolling-right~.el-table__fixed-right{border-left:1px solid #EBEEF5}.el-table .caret-wrapper{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:34px;width:24px;vertical-align:middle;cursor:pointer;overflow:initial;position:relative}.el-table .sort-caret{width:0;height:0;border:5px solid transparent;position:absolute;left:7px}.el-table .sort-caret.ascending{border-bottom-color:#C0C4CC;top:5px}.el-table .sort-caret.descending{border-top-color:#C0C4CC;bottom:7px}.el-table .ascending .sort-caret.ascending{border-bottom-color:#409EFF}.el-table .descending .sort-caret.descending{border-top-color:#409EFF}.el-table .hidden-columns{position:absolute;z-index:-1}.el-table--striped .el-table__body tr.el-table__row--striped td{background:#FAFAFA}.el-table--striped .el-table__body tr.el-table__row--striped.current-row td{background-color:#ecf5ff}.el-table__body tr.hover-row.current-row>td,.el-table__body tr.hover-row.el-table__row--striped.current-row>td,.el-table__body tr.hover-row.el-table__row--striped>td,.el-table__body tr.hover-row>td{background-color:#F5F7FA}.el-table__body tr.current-row>td{background-color:#ecf5ff}.el-table__column-resize-proxy{position:absolute;left:200px;top:0;bottom:0;width:0;border-left:1px solid #EBEEF5;z-index:10}.el-table__column-filter-trigger{display:inline-block;line-height:34px;cursor:pointer}.el-table__column-filter-trigger i{color:#909399;font-size:12px;-webkit-transform:scale(.75);transform:scale(.75)}.el-table--enable-row-transition .el-table__body td{-webkit-transition:background-color .25s ease;transition:background-color .25s ease}.el-table--enable-row-hover .el-table__body tr:hover>td{background-color:#F5F7FA}.el-table--fluid-height .el-table__fixed,.el-table--fluid-height .el-table__fixed-right{bottom:0;overflow:hidden}.el-table [class*=el-table__row--level] .el-table__expand-icon{display:inline-block;width:20px;line-height:20px;height:20px;text-align:center;margin-right:3px}.el-table-column--selection .cell{padding-left:14px;padding-right:14px}.el-table-filter{border:1px solid #EBEEF5;border-radius:2px;background-color:#FFF;box-shadow:0 2px 12px 0 rgba(0,0,0,.1);-webkit-box-sizing:border-box;box-sizing:border-box;margin:2px 0}.el-date-table td,.el-date-table td div{height:30px;-webkit-box-sizing:border-box}.el-table-filter__list{padding:5px 0;margin:0;list-style:none;min-width:100px}.el-table-filter__list-item{line-height:36px;padding:0 10px;cursor:pointer;font-size:14px}.el-table-filter__list-item:hover{background-color:#ecf5ff;color:#66b1ff}.el-table-filter__list-item.is-active{background-color:#409EFF;color:#FFF}.el-table-filter__content{min-width:100px}.el-table-filter__bottom{border-top:1px solid #EBEEF5;padding:8px}.el-table-filter__bottom button{background:0 0;border:none;color:#606266;cursor:pointer;font-size:13px;padding:0 3px}.el-date-table td.in-range div,.el-date-table td.in-range div:hover,.el-date-table.is-week-mode .el-date-table__row.current div,.el-date-table.is-week-mode .el-date-table__row:hover div{background-color:#F2F6FC}.el-table-filter__bottom button:hover{color:#409EFF}.el-table-filter__bottom button:focus{outline:0}.el-table-filter__bottom button.is-disabled{color:#C0C4CC;cursor:not-allowed}.el-table-filter__wrap{max-height:280px}.el-table-filter__checkbox-group{padding:10px}.el-table-filter__checkbox-group label.el-checkbox{display:block;margin-right:5px;margin-bottom:8px;margin-left:5px}.el-table-filter__checkbox-group .el-checkbox:last-child{margin-bottom:0}.el-date-table{font-size:12px;-ms-user-select:none;user-select:none}.el-date-table.is-week-mode .el-date-table__row:hover td.available:hover{color:#606266}.el-date-table.is-week-mode .el-date-table__row:hover td:first-child div{margin-left:5px;border-top-left-radius:15px;border-bottom-left-radius:15px}.el-date-table.is-week-mode .el-date-table__row:hover td:last-child div{margin-right:5px;border-top-right-radius:15px;border-bottom-right-radius:15px}.el-date-table td{width:32px;padding:4px 0;box-sizing:border-box;text-align:center;cursor:pointer;position:relative}.el-date-table td div{padding:3px 0;box-sizing:border-box}.el-date-table td span{width:24px;height:24px;display:block;margin:0 auto;line-height:24px;position:absolute;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);border-radius:50%}.el-date-table td.next-month,.el-date-table td.prev-month{color:#C0C4CC}.el-date-table td.today{position:relative}.el-date-table td.today span{color:#409EFF;font-weight:700}.el-date-table td.today.end-date span,.el-date-table td.today.start-date span{color:#FFF}.el-date-table td.available:hover{color:#409EFF}.el-date-table td.current:not(.disabled) span{color:#FFF;background-color:#409EFF}.el-date-table td.end-date div,.el-date-table td.start-date div{color:#FFF}.el-date-table td.end-date span,.el-date-table td.start-date span{background-color:#409EFF}.el-date-table td.start-date div{margin-left:5px;border-top-left-radius:15px;border-bottom-left-radius:15px}.el-date-table td.end-date div{margin-right:5px;border-top-right-radius:15px;border-bottom-right-radius:15px}.el-date-table td.disabled div{background-color:#F5F7FA;opacity:1;cursor:not-allowed;color:#C0C4CC}.el-date-table td.selected div{margin-left:5px;margin-right:5px;background-color:#F2F6FC;border-radius:15px}.el-date-table td.selected div:hover{background-color:#F2F6FC}.el-date-table td.selected span{background-color:#409EFF;color:#FFF;border-radius:15px}.el-date-table td.week{font-size:80%;color:#606266}.el-month-table,.el-year-table{font-size:12px;border-collapse:collapse}.el-date-table th{padding:5px;color:#606266;font-weight:400;border-bottom:solid 1px #EBEEF5}.el-month-table{margin:-1px}.el-month-table td{text-align:center;padding:8px 0;cursor:pointer}.el-month-table td div{height:48px;padding:6px 0;-webkit-box-sizing:border-box;box-sizing:border-box}.el-month-table td.today .cell{color:#409EFF;font-weight:700}.el-month-table td.today.end-date .cell,.el-month-table td.today.start-date .cell{color:#FFF}.el-month-table td.disabled .cell{background-color:#F5F7FA;cursor:not-allowed;color:#C0C4CC}.el-month-table td.disabled .cell:hover{color:#C0C4CC}.el-month-table td .cell{width:60px;height:36px;display:block;line-height:36px;color:#606266;margin:0 auto;border-radius:18px}.el-month-table td .cell:hover{color:#409EFF}.el-month-table td.in-range div,.el-month-table td.in-range div:hover{background-color:#F2F6FC}.el-month-table td.end-date div,.el-month-table td.start-date div{color:#FFF}.el-month-table td.end-date .cell,.el-month-table td.start-date .cell{color:#FFF;background-color:#409EFF}.el-month-table td.start-date div{border-top-left-radius:24px;border-bottom-left-radius:24px}.el-month-table td.end-date div{border-top-right-radius:24px;border-bottom-right-radius:24px}.el-month-table td.current:not(.disabled) .cell{color:#409EFF}.el-year-table{margin:-1px}.el-year-table .el-icon{color:#303133}.el-year-table td{text-align:center;padding:20px 3px;cursor:pointer}.el-year-table td.today .cell{color:#409EFF;font-weight:700}.el-year-table td.disabled .cell{background-color:#F5F7FA;cursor:not-allowed;color:#C0C4CC}.el-year-table td.disabled .cell:hover{color:#C0C4CC}.el-year-table td .cell{width:48px;height:32px;display:block;line-height:32px;color:#606266;margin:0 auto}.el-year-table td .cell:hover,.el-year-table td.current:not(.disabled) .cell{color:#409EFF}.el-date-range-picker{width:646px}.el-date-range-picker.has-sidebar{width:756px}.el-date-range-picker table{table-layout:fixed;width:100%}.el-date-range-picker .el-picker-panel__body{min-width:513px}.el-date-range-picker .el-picker-panel__content{margin:0}.el-date-range-picker__header{position:relative;text-align:center;height:28px}.el-date-range-picker__header [class*=arrow-left]{float:left}.el-date-range-picker__header [class*=arrow-right]{float:right}.el-date-range-picker__header div{font-size:16px;font-weight:500;margin-right:50px}.el-date-range-picker__content{float:left;width:50%;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:16px}.el-date-range-picker__content.is-left{border-right:1px solid #e4e4e4}.el-date-range-picker__content .el-date-range-picker__header div{margin-left:50px;margin-right:50px}.el-date-range-picker__editors-wrap{-webkit-box-sizing:border-box;box-sizing:border-box;display:table-cell}.el-date-range-picker__editors-wrap.is-right{text-align:right}.el-date-range-picker__time-header{position:relative;border-bottom:1px solid #e4e4e4;font-size:12px;padding:8px 5px 5px;display:table;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box}.el-date-range-picker__time-header>.el-icon-arrow-right{font-size:20px;vertical-align:middle;display:table-cell;color:#303133}.el-date-range-picker__time-picker-wrap{position:relative;display:table-cell;padding:0 5px}.el-date-range-picker__time-picker-wrap .el-picker-panel{position:absolute;top:13px;right:0;z-index:1;background:#FFF}.el-date-picker{width:322px}.el-date-picker.has-sidebar.has-time{width:434px}.el-date-picker.has-sidebar{width:438px}.el-date-picker.has-time .el-picker-panel__body-wrapper{position:relative}.el-date-picker .el-picker-panel__content{width:292px}.el-date-picker table{table-layout:fixed;width:100%}.el-date-picker__editor-wrap{position:relative;display:table-cell;padding:0 5px}.el-date-picker__time-header{position:relative;border-bottom:1px solid #e4e4e4;font-size:12px;padding:8px 5px 5px;display:table;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box}.el-date-picker__header{margin:12px;text-align:center}.el-date-picker__header--bordered{margin-bottom:0;padding-bottom:12px;border-bottom:solid 1px #EBEEF5}.el-date-picker__header--bordered+.el-picker-panel__content{margin-top:0}.el-date-picker__header-label{font-size:16px;font-weight:500;padding:0 5px;line-height:22px;text-align:center;cursor:pointer;color:#606266}.el-date-picker__header-label.active,.el-date-picker__header-label:hover{color:#409EFF}.el-date-picker__prev-btn{float:left}.el-date-picker__next-btn{float:right}.el-date-picker__time-wrap{padding:10px;text-align:center}.el-date-picker__time-label{float:left;cursor:pointer;line-height:30px;margin-left:10px}.time-select{margin:5px 0;min-width:0}.time-select .el-picker-panel__content{max-height:200px;margin:0}.time-select-item{padding:8px 10px;font-size:14px;line-height:20px}.time-select-item.selected:not(.disabled){color:#409EFF;font-weight:700}.time-select-item.disabled{color:#E4E7ED;cursor:not-allowed}.time-select-item:hover{background-color:#F5F7FA;font-weight:700;cursor:pointer}.el-date-editor{position:relative;display:inline-block;text-align:left}.el-date-editor.el-input,.el-date-editor.el-input__inner{width:220px}.el-date-editor--monthrange.el-input,.el-date-editor--monthrange.el-input__inner{width:300px}.el-date-editor--daterange.el-input,.el-date-editor--daterange.el-input__inner,.el-date-editor--timerange.el-input,.el-date-editor--timerange.el-input__inner{width:350px}.el-date-editor--datetimerange.el-input,.el-date-editor--datetimerange.el-input__inner{width:400px}.el-date-editor--dates .el-input__inner{text-overflow:ellipsis;white-space:nowrap}.el-date-editor .el-icon-circle-close{cursor:pointer}.el-date-editor .el-range__icon{font-size:14px;margin-left:-5px;color:#C0C4CC;float:left;line-height:32px}.el-date-editor .el-range-input,.el-date-editor .el-range-separator{height:100%;margin:0;text-align:center;display:inline-block;font-size:14px}.el-date-editor .el-range-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;outline:0;padding:0;width:39%;color:#606266}.el-date-editor .el-range-input::-webkit-input-placeholder{color:#C0C4CC}.el-date-editor .el-range-input:-ms-input-placeholder{color:#C0C4CC}.el-date-editor .el-range-input::-ms-input-placeholder{color:#C0C4CC}.el-date-editor .el-range-input::placeholder{color:#C0C4CC}.el-date-editor .el-range-separator{padding:0 5px;line-height:32px;width:5%;color:#303133}.el-date-editor .el-range__close-icon{font-size:14px;color:#C0C4CC;width:25px;display:inline-block;float:right;line-height:32px}.el-range-editor.el-input__inner{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:3px 10px}.el-range-editor .el-range-input{line-height:1}.el-range-editor.is-active,.el-range-editor.is-active:hover{border-color:#409EFF}.el-range-editor--medium.el-input__inner{height:36px}.el-range-editor--medium .el-range-separator{line-height:28px;font-size:14px}.el-range-editor--medium .el-range-input{font-size:14px}.el-range-editor--medium .el-range__close-icon,.el-range-editor--medium .el-range__icon{line-height:28px}.el-range-editor--small.el-input__inner{height:32px}.el-range-editor--small .el-range-separator{line-height:24px;font-size:13px}.el-range-editor--small .el-range-input{font-size:13px}.el-range-editor--small .el-range__close-icon,.el-range-editor--small .el-range__icon{line-height:24px}.el-range-editor--mini.el-input__inner{height:28px}.el-range-editor--mini .el-range-separator{line-height:20px;font-size:12px}.el-range-editor--mini .el-range-input{font-size:12px}.el-range-editor--mini .el-range__close-icon,.el-range-editor--mini .el-range__icon{line-height:20px}.el-range-editor.is-disabled{background-color:#F5F7FA;border-color:#E4E7ED;color:#C0C4CC;cursor:not-allowed}.el-range-editor.is-disabled:focus,.el-range-editor.is-disabled:hover{border-color:#E4E7ED}.el-range-editor.is-disabled input{background-color:#F5F7FA;color:#C0C4CC;cursor:not-allowed}.el-range-editor.is-disabled input::-webkit-input-placeholder{color:#C0C4CC}.el-range-editor.is-disabled input:-ms-input-placeholder{color:#C0C4CC}.el-range-editor.is-disabled input::-ms-input-placeholder{color:#C0C4CC}.el-range-editor.is-disabled input::placeholder{color:#C0C4CC}.el-range-editor.is-disabled .el-range-separator{color:#C0C4CC}.el-picker-panel{color:#606266;border:1px solid #E4E7ED;box-shadow:0 2px 12px 0 rgba(0,0,0,.1);background:#FFF;border-radius:4px;line-height:30px;margin:5px 0}.el-popover,.el-time-panel{-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1)}.el-picker-panel__body-wrapper::after,.el-picker-panel__body::after{content:"";display:table;clear:both}.el-picker-panel__content{position:relative;margin:15px}.el-picker-panel__footer{border-top:1px solid #e4e4e4;padding:4px;text-align:right;background-color:#FFF;position:relative;font-size:0}.el-picker-panel__shortcut{display:block;width:100%;border:0;background-color:transparent;line-height:28px;font-size:14px;color:#606266;padding-left:12px;text-align:left;outline:0;cursor:pointer}.el-picker-panel__shortcut:hover{color:#409EFF}.el-picker-panel__shortcut.active{background-color:#e6f1fe;color:#409EFF}.el-picker-panel__btn{border:1px solid #dcdcdc;color:#333;line-height:24px;border-radius:2px;padding:0 20px;cursor:pointer;background-color:transparent;outline:0;font-size:12px}.el-picker-panel__btn[disabled]{color:#ccc;cursor:not-allowed}.el-picker-panel__icon-btn{font-size:12px;color:#303133;border:0;background:0 0;cursor:pointer;outline:0;margin-top:8px}.el-picker-panel__icon-btn:hover{color:#409EFF}.el-picker-panel__icon-btn.is-disabled{color:#bbb}.el-picker-panel__icon-btn.is-disabled:hover{cursor:not-allowed}.el-picker-panel__link-btn{vertical-align:middle}.el-picker-panel [slot=sidebar],.el-picker-panel__sidebar{position:absolute;top:0;bottom:0;width:110px;border-right:1px solid #e4e4e4;-webkit-box-sizing:border-box;box-sizing:border-box;padding-top:6px;background-color:#FFF;overflow:auto}.el-picker-panel [slot=sidebar]+.el-picker-panel__body,.el-picker-panel__sidebar+.el-picker-panel__body{margin-left:110px}.el-time-spinner.has-seconds .el-time-spinner__wrapper{width:33.3%}.el-time-spinner__wrapper{max-height:190px;overflow:auto;display:inline-block;width:50%;vertical-align:top;position:relative}.el-time-spinner__wrapper .el-scrollbar__wrap:not(.el-scrollbar__wrap--hidden-default){padding-bottom:15px}.el-time-spinner__input.el-input .el-input__inner,.el-time-spinner__list{padding:0;text-align:center}.el-time-spinner__wrapper.is-arrow{-webkit-box-sizing:border-box;box-sizing:border-box;text-align:center;overflow:hidden}.el-time-spinner__wrapper.is-arrow .el-time-spinner__list{-webkit-transform:translateY(-32px);transform:translateY(-32px)}.el-time-spinner__wrapper.is-arrow .el-time-spinner__item:hover:not(.disabled):not(.active){background:#FFF;cursor:default}.el-time-spinner__arrow{font-size:12px;color:#909399;position:absolute;left:0;width:100%;z-index:1;text-align:center;height:30px;line-height:30px;cursor:pointer}.el-time-spinner__arrow:hover{color:#409EFF}.el-time-spinner__arrow.el-icon-arrow-up{top:10px}.el-time-spinner__arrow.el-icon-arrow-down{bottom:10px}.el-time-spinner__input.el-input{width:70%}.el-time-spinner__list{margin:0;list-style:none}.el-time-spinner__list::after,.el-time-spinner__list::before{content:'';display:block;width:100%;height:80px}.el-time-spinner__item{height:32px;line-height:32px;font-size:12px;color:#606266}.el-time-spinner__item:hover:not(.disabled):not(.active){background:#F5F7FA;cursor:pointer}.el-time-spinner__item.active:not(.disabled){color:#303133;font-weight:700}.el-time-spinner__item.disabled{color:#C0C4CC;cursor:not-allowed}.el-time-panel{margin:5px 0;border:1px solid #E4E7ED;background-color:#FFF;box-shadow:0 2px 12px 0 rgba(0,0,0,.1);border-radius:2px;position:absolute;width:180px;left:0;z-index:1000;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-box-sizing:content-box;box-sizing:content-box}.el-slider__button,.el-slider__button-wrapper{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.el-time-panel__content{font-size:0;position:relative;overflow:hidden}.el-time-panel__content::after,.el-time-panel__content::before{content:"";top:50%;position:absolute;margin-top:-15px;height:32px;z-index:-1;left:0;right:0;-webkit-box-sizing:border-box;box-sizing:border-box;padding-top:6px;text-align:left;border-top:1px solid #E4E7ED;border-bottom:1px solid #E4E7ED}.el-time-panel__content::after{left:50%;margin-left:12%;margin-right:12%}.el-time-panel__content::before{padding-left:50%;margin-right:12%;margin-left:12%}.el-time-panel__content.has-seconds::after{left:calc(100% / 3 * 2)}.el-time-panel__content.has-seconds::before{padding-left:calc(100% / 3)}.el-time-panel__footer{border-top:1px solid #e4e4e4;padding:4px;height:36px;line-height:25px;text-align:right;-webkit-box-sizing:border-box;box-sizing:border-box}.el-time-panel__btn{border:none;line-height:28px;padding:0 5px;margin:0 5px;cursor:pointer;background-color:transparent;outline:0;font-size:12px;color:#303133}.el-time-panel__btn.confirm{font-weight:800;color:#409EFF}.el-time-range-picker{width:354px;overflow:visible}.el-time-range-picker__content{position:relative;text-align:center;padding:10px}.el-time-range-picker__cell{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:4px 7px 7px;width:50%;display:inline-block}.el-time-range-picker__header{margin-bottom:5px;text-align:center;font-size:14px}.el-time-range-picker__body{border-radius:2px;border:1px solid #E4E7ED}.el-popover{position:absolute;background:#FFF;min-width:150px;border:1px solid #EBEEF5;padding:12px;z-index:2000;color:#606266;line-height:1.4;text-align:justify;font-size:14px;box-shadow:0 2px 12px 0 rgba(0,0,0,.1);word-break:break-all}.el-popover--plain{padding:18px 20px}.el-popover__title{color:#303133;font-size:16px;line-height:1;margin-bottom:12px}.v-modal-enter{-webkit-animation:v-modal-in .2s ease;animation:v-modal-in .2s ease}.v-modal-leave{-webkit-animation:v-modal-out .2s ease forwards;animation:v-modal-out .2s ease forwards}@keyframes v-modal-in{0%{opacity:0}}@keyframes v-modal-out{100%{opacity:0}}.v-modal{position:fixed;left:0;top:0;width:100%;height:100%;opacity:.5;background:#000}.el-popup-parent--hidden{overflow:hidden}.el-message-box{display:inline-block;width:420px;padding-bottom:10px;vertical-align:middle;background-color:#FFF;border-radius:4px;border:1px solid #EBEEF5;font-size:18px;-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px 0 rgba(0,0,0,.1);text-align:left;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden}.el-message-box__wrapper{position:fixed;top:0;bottom:0;left:0;right:0;text-align:center}.el-message-box__wrapper::after{content:"";display:inline-block;height:100%;width:0;vertical-align:middle}.el-message-box__header{position:relative;padding:15px 15px 10px}.el-message-box__title{padding-left:0;margin-bottom:0;font-size:18px;line-height:1;color:#303133}.el-message-box__headerbtn{position:absolute;top:15px;right:15px;padding:0;border:none;outline:0;background:0 0;font-size:16px;cursor:pointer}.el-form-item.is-error .el-input__inner,.el-form-item.is-error .el-input__inner:focus,.el-form-item.is-error .el-textarea__inner,.el-form-item.is-error .el-textarea__inner:focus,.el-message-box__input input.invalid,.el-message-box__input input.invalid:focus{border-color:#F56C6C}.el-message-box__headerbtn .el-message-box__close{color:#909399}.el-message-box__headerbtn:focus .el-message-box__close,.el-message-box__headerbtn:hover .el-message-box__close{color:#409EFF}.el-message-box__content{padding:10px 15px;color:#606266;font-size:14px}.el-message-box__container{position:relative}.el-message-box__input{padding-top:15px}.el-message-box__status{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);font-size:24px!important}.el-message-box__status::before{padding-left:1px}.el-message-box__status+.el-message-box__message{padding-left:36px;padding-right:12px}.el-message-box__status.el-icon-success{color:#67C23A}.el-message-box__status.el-icon-info{color:#909399}.el-message-box__status.el-icon-warning{color:#E6A23C}.el-message-box__status.el-icon-error{color:#F56C6C}.el-message-box__message{margin:0}.el-message-box__message p{margin:0;line-height:24px}.el-message-box__errormsg{color:#F56C6C;font-size:12px;min-height:18px;margin-top:2px}.el-message-box__btns{padding:5px 15px 0;text-align:right}.el-message-box__btns button:nth-child(2){margin-left:10px}.el-message-box__btns-reverse{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.el-message-box--center{padding-bottom:30px}.el-message-box--center .el-message-box__header{padding-top:30px}.el-message-box--center .el-message-box__title{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.el-message-box--center .el-message-box__status{position:relative;top:auto;padding-right:5px;text-align:center;-webkit-transform:translateY(-1px);transform:translateY(-1px)}.el-message-box--center .el-message-box__message{margin-left:0}.el-message-box--center .el-message-box__btns,.el-message-box--center .el-message-box__content{text-align:center}.el-message-box--center .el-message-box__content{padding-left:27px;padding-right:27px}.msgbox-fade-enter-active{-webkit-animation:msgbox-fade-in .3s;animation:msgbox-fade-in .3s}.msgbox-fade-leave-active{-webkit-animation:msgbox-fade-out .3s;animation:msgbox-fade-out .3s}@-webkit-keyframes msgbox-fade-in{0%{-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0);opacity:0}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}@keyframes msgbox-fade-in{0%{-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0);opacity:0}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}@-webkit-keyframes msgbox-fade-out{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}100%{-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0);opacity:0}}@keyframes msgbox-fade-out{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}100%{-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0);opacity:0}}.el-breadcrumb{font-size:14px;line-height:1}.el-breadcrumb::after,.el-breadcrumb::before{display:table;content:""}.el-breadcrumb::after{clear:both}.el-breadcrumb__separator{margin:0 9px;font-weight:700;color:#C0C4CC}.el-breadcrumb__separator[class*=icon]{margin:0 6px;font-weight:400}.el-breadcrumb__item{float:left}.el-breadcrumb__inner{color:#606266}.el-breadcrumb__inner a,.el-breadcrumb__inner.is-link{font-weight:700;text-decoration:none;-webkit-transition:color .2s cubic-bezier(.645,.045,.355,1);transition:color .2s cubic-bezier(.645,.045,.355,1);color:#303133}.el-breadcrumb__inner a:hover,.el-breadcrumb__inner.is-link:hover{color:#409EFF;cursor:pointer}.el-breadcrumb__item:last-child .el-breadcrumb__inner,.el-breadcrumb__item:last-child .el-breadcrumb__inner a,.el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,.el-breadcrumb__item:last-child .el-breadcrumb__inner:hover{font-weight:400;color:#606266;cursor:text}.el-breadcrumb__item:last-child .el-breadcrumb__separator{display:none}.el-form--label-left .el-form-item__label{text-align:left}.el-form--label-top .el-form-item__label{float:none;display:inline-block;text-align:left;padding:0 0 10px}.el-form--inline .el-form-item{display:inline-block;margin-right:10px;vertical-align:top}.el-form--inline .el-form-item__label{float:none;display:inline-block}.el-form--inline .el-form-item__content{display:inline-block;vertical-align:top}.el-form--inline.el-form--label-top .el-form-item__content{display:block}.el-form-item{margin-bottom:22px}.el-form-item::after,.el-form-item::before{display:table;content:""}.el-form-item::after{clear:both}.el-form-item .el-form-item{margin-bottom:0}.el-form-item--mini.el-form-item,.el-form-item--small.el-form-item{margin-bottom:18px}.el-form-item .el-input__validateIcon{display:none}.el-form-item--medium .el-form-item__content,.el-form-item--medium .el-form-item__label{line-height:36px}.el-form-item--small .el-form-item__content,.el-form-item--small .el-form-item__label{line-height:32px}.el-form-item--small .el-form-item__error{padding-top:2px}.el-form-item--mini .el-form-item__content,.el-form-item--mini .el-form-item__label{line-height:28px}.el-form-item--mini .el-form-item__error{padding-top:1px}.el-form-item__label-wrap{float:left}.el-form-item__label-wrap .el-form-item__label{display:inline-block;float:none}.el-form-item__label{text-align:right;vertical-align:middle;float:left;font-size:14px;color:#606266;line-height:40px;padding:0 12px 0 0;-webkit-box-sizing:border-box;box-sizing:border-box}.el-form-item__content{line-height:40px;position:relative;font-size:14px}.el-form-item__content::after,.el-form-item__content::before{display:table;content:""}.el-form-item__content::after{clear:both}.el-form-item__content .el-input-group{vertical-align:top}.el-form-item__error{color:#F56C6C;font-size:12px;line-height:1;padding-top:4px;position:absolute;top:100%;left:0}.el-form-item__error--inline{position:relative;top:auto;left:auto;display:inline-block;margin-left:10px}.el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label:before,.el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before{content:'*';color:#F56C6C;margin-right:4px}.el-form-item.is-error .el-input-group__append .el-input__inner,.el-form-item.is-error .el-input-group__prepend .el-input__inner{border-color:transparent}.el-form-item.is-error .el-input__validateIcon{color:#F56C6C}.el-form-item--feedback .el-input__validateIcon{display:inline-block}.el-tabs__header{padding:0;position:relative;margin:0 0 15px}.el-tabs__active-bar{position:absolute;bottom:0;left:0;height:2px;background-color:#409EFF;z-index:1;-webkit-transition:-webkit-transform .3s cubic-bezier(.645,.045,.355,1);transition:-webkit-transform .3s cubic-bezier(.645,.045,.355,1);transition:transform .3s cubic-bezier(.645,.045,.355,1);transition:transform .3s cubic-bezier(.645,.045,.355,1),-webkit-transform .3s cubic-bezier(.645,.045,.355,1);list-style:none}.el-tabs__new-tab{float:right;border:1px solid #d3dce6;height:18px;width:18px;line-height:18px;margin:12px 0 9px 10px;border-radius:3px;text-align:center;font-size:12px;color:#d3dce6;cursor:pointer;-webkit-transition:all .15s;transition:all .15s}.el-collapse-item__arrow,.el-tabs__nav{-webkit-transition:-webkit-transform .3s}.el-tabs__new-tab .el-icon-plus{-webkit-transform:scale(.8,.8);transform:scale(.8,.8)}.el-tabs__new-tab:hover{color:#409EFF}.el-tabs__nav-wrap{overflow:hidden;margin-bottom:-1px;position:relative}.el-tabs__nav-wrap::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background-color:#E4E7ED;z-index:1}.el-tabs--border-card>.el-tabs__header .el-tabs__nav-wrap::after,.el-tabs--card>.el-tabs__header .el-tabs__nav-wrap::after{content:none}.el-tabs__nav-wrap.is-scrollable{padding:0 20px;-webkit-box-sizing:border-box;box-sizing:border-box}.el-tabs__nav-scroll{overflow:hidden}.el-tabs__nav-next,.el-tabs__nav-prev{position:absolute;cursor:pointer;line-height:44px;font-size:12px;color:#909399}.el-tabs__nav-next{right:0}.el-tabs__nav-prev{left:0}.el-tabs__nav{white-space:nowrap;position:relative;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;float:left;z-index:2}.el-tabs__nav.is-stretch{min-width:100%;display:-webkit-box;display:-ms-flexbox;display:flex}.el-tabs__nav.is-stretch>*{-webkit-box-flex:1;-ms-flex:1;flex:1;text-align:center}.el-tabs__item{padding:0 20px;height:40px;-webkit-box-sizing:border-box;box-sizing:border-box;line-height:40px;display:inline-block;list-style:none;font-size:14px;font-weight:500;color:#303133;position:relative}.el-tabs__item:focus,.el-tabs__item:focus:active{outline:0}.el-tabs__item:focus.is-active.is-focus:not(:active){-webkit-box-shadow:0 0 2px 2px #409EFF inset;box-shadow:0 0 2px 2px #409EFF inset;border-radius:3px}.el-tabs__item .el-icon-close{border-radius:50%;text-align:center;-webkit-transition:all .3s cubic-bezier(.645,.045,.355,1);transition:all .3s cubic-bezier(.645,.045,.355,1);margin-left:5px}.el-tabs__item .el-icon-close:before{-webkit-transform:scale(.9);transform:scale(.9);display:inline-block}.el-tabs__item .el-icon-close:hover{background-color:#C0C4CC;color:#FFF}.el-tabs__item.is-active{color:#409EFF}.el-tabs__item:hover{color:#409EFF;cursor:pointer}.el-tabs__item.is-disabled{color:#C0C4CC;cursor:default}.el-tabs__content{overflow:hidden;position:relative}.el-tabs--card>.el-tabs__header{border-bottom:1px solid #E4E7ED}.el-tabs--card>.el-tabs__header .el-tabs__nav{border:1px solid #E4E7ED;border-bottom:none;border-radius:4px 4px 0 0;-webkit-box-sizing:border-box;box-sizing:border-box}.el-tabs--card>.el-tabs__header .el-tabs__active-bar{display:none}.el-tabs--card>.el-tabs__header .el-tabs__item .el-icon-close{position:relative;font-size:12px;width:0;height:14px;vertical-align:middle;line-height:15px;overflow:hidden;top:-1px;right:-2px;-webkit-transform-origin:100% 50%;transform-origin:100% 50%}.el-tabs--card>.el-tabs__header .el-tabs__item.is-active.is-closable .el-icon-close,.el-tabs--card>.el-tabs__header .el-tabs__item.is-closable:hover .el-icon-close{width:14px}.el-tabs--card>.el-tabs__header .el-tabs__item{border-bottom:1px solid transparent;border-left:1px solid #E4E7ED;-webkit-transition:color .3s cubic-bezier(.645,.045,.355,1),padding .3s cubic-bezier(.645,.045,.355,1);transition:color .3s cubic-bezier(.645,.045,.355,1),padding .3s cubic-bezier(.645,.045,.355,1)}.el-tabs--card>.el-tabs__header .el-tabs__item:first-child{border-left:none}.el-tabs--card>.el-tabs__header .el-tabs__item.is-closable:hover{padding-left:13px;padding-right:13px}.el-tabs--card>.el-tabs__header .el-tabs__item.is-active{border-bottom-color:#FFF}.el-tabs--card>.el-tabs__header .el-tabs__item.is-active.is-closable{padding-left:20px;padding-right:20px}.el-tabs--border-card{background:#FFF;border:1px solid #DCDFE6;-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.12),0 0 6px 0 rgba(0,0,0,.04);box-shadow:0 2px 4px 0 rgba(0,0,0,.12),0 0 6px 0 rgba(0,0,0,.04)}.el-tabs--border-card>.el-tabs__content{padding:15px}.el-tabs--border-card>.el-tabs__header{background-color:#F5F7FA;border-bottom:1px solid #E4E7ED;margin:0}.el-tabs--border-card>.el-tabs__header .el-tabs__item{-webkit-transition:all .3s cubic-bezier(.645,.045,.355,1);transition:all .3s cubic-bezier(.645,.045,.355,1);border:1px solid transparent;margin-top:-1px;color:#909399}.el-tabs--border-card>.el-tabs__header .el-tabs__item+.el-tabs__item,.el-tabs--border-card>.el-tabs__header .el-tabs__item:first-child{margin-left:-1px}.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active{color:#409EFF;background-color:#FFF;border-right-color:#DCDFE6;border-left-color:#DCDFE6}.el-tabs--border-card>.el-tabs__header .el-tabs__item:not(.is-disabled):hover{color:#409EFF}.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-disabled{color:#C0C4CC}.el-tabs--border-card>.el-tabs__header .is-scrollable .el-tabs__item:first-child{margin-left:0}.el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2),.el-tabs--bottom .el-tabs__item.is-top:nth-child(2),.el-tabs--top .el-tabs__item.is-bottom:nth-child(2),.el-tabs--top .el-tabs__item.is-top:nth-child(2){padding-left:0}.el-tabs--bottom .el-tabs__item.is-bottom:last-child,.el-tabs--bottom .el-tabs__item.is-top:last-child,.el-tabs--top .el-tabs__item.is-bottom:last-child,.el-tabs--top .el-tabs__item.is-top:last-child{padding-right:0}.el-tabs--bottom .el-tabs--left>.el-tabs__header .el-tabs__item:nth-child(2),.el-tabs--bottom .el-tabs--right>.el-tabs__header .el-tabs__item:nth-child(2),.el-tabs--bottom.el-tabs--border-card>.el-tabs__header .el-tabs__item:nth-child(2),.el-tabs--bottom.el-tabs--card>.el-tabs__header .el-tabs__item:nth-child(2),.el-tabs--top .el-tabs--left>.el-tabs__header .el-tabs__item:nth-child(2),.el-tabs--top .el-tabs--right>.el-tabs__header .el-tabs__item:nth-child(2),.el-tabs--top.el-tabs--border-card>.el-tabs__header .el-tabs__item:nth-child(2),.el-tabs--top.el-tabs--card>.el-tabs__header .el-tabs__item:nth-child(2){padding-left:20px}.el-tabs--bottom .el-tabs--left>.el-tabs__header .el-tabs__item:last-child,.el-tabs--bottom .el-tabs--right>.el-tabs__header .el-tabs__item:last-child,.el-tabs--bottom.el-tabs--border-card>.el-tabs__header .el-tabs__item:last-child,.el-tabs--bottom.el-tabs--card>.el-tabs__header .el-tabs__item:last-child,.el-tabs--top .el-tabs--left>.el-tabs__header .el-tabs__item:last-child,.el-tabs--top .el-tabs--right>.el-tabs__header .el-tabs__item:last-child,.el-tabs--top.el-tabs--border-card>.el-tabs__header .el-tabs__item:last-child,.el-tabs--top.el-tabs--card>.el-tabs__header .el-tabs__item:last-child{padding-right:20px}.el-tabs--bottom .el-tabs__header.is-bottom{margin-bottom:0;margin-top:10px}.el-tabs--bottom.el-tabs--border-card .el-tabs__header.is-bottom{border-bottom:0;border-top:1px solid #DCDFE6}.el-tabs--bottom.el-tabs--border-card .el-tabs__nav-wrap.is-bottom{margin-top:-1px;margin-bottom:0}.el-tabs--bottom.el-tabs--border-card .el-tabs__item.is-bottom:not(.is-active){border:1px solid transparent}.el-tabs--bottom.el-tabs--border-card .el-tabs__item.is-bottom{margin:0 -1px -1px}.el-tabs--left,.el-tabs--right{overflow:hidden}.el-tabs--left .el-tabs__header.is-left,.el-tabs--left .el-tabs__header.is-right,.el-tabs--left .el-tabs__nav-scroll,.el-tabs--left .el-tabs__nav-wrap.is-left,.el-tabs--left .el-tabs__nav-wrap.is-right,.el-tabs--right .el-tabs__header.is-left,.el-tabs--right .el-tabs__header.is-right,.el-tabs--right .el-tabs__nav-scroll,.el-tabs--right .el-tabs__nav-wrap.is-left,.el-tabs--right .el-tabs__nav-wrap.is-right{height:100%}.el-tabs--left .el-tabs__active-bar.is-left,.el-tabs--left .el-tabs__active-bar.is-right,.el-tabs--right .el-tabs__active-bar.is-left,.el-tabs--right .el-tabs__active-bar.is-right{top:0;bottom:auto;width:2px;height:auto}.el-tabs--left .el-tabs__nav-wrap.is-left,.el-tabs--left .el-tabs__nav-wrap.is-right,.el-tabs--right .el-tabs__nav-wrap.is-left,.el-tabs--right .el-tabs__nav-wrap.is-right{margin-bottom:0}.el-tabs--left .el-tabs__nav-wrap.is-left>.el-tabs__nav-next,.el-tabs--left .el-tabs__nav-wrap.is-left>.el-tabs__nav-prev,.el-tabs--left .el-tabs__nav-wrap.is-right>.el-tabs__nav-next,.el-tabs--left .el-tabs__nav-wrap.is-right>.el-tabs__nav-prev,.el-tabs--right .el-tabs__nav-wrap.is-left>.el-tabs__nav-next,.el-tabs--right .el-tabs__nav-wrap.is-left>.el-tabs__nav-prev,.el-tabs--right .el-tabs__nav-wrap.is-right>.el-tabs__nav-next,.el-tabs--right .el-tabs__nav-wrap.is-right>.el-tabs__nav-prev{height:30px;line-height:30px;width:100%;text-align:center;cursor:pointer}.el-tabs--left .el-tabs__nav-wrap.is-left>.el-tabs__nav-next i,.el-tabs--left .el-tabs__nav-wrap.is-left>.el-tabs__nav-prev i,.el-tabs--left .el-tabs__nav-wrap.is-right>.el-tabs__nav-next i,.el-tabs--left .el-tabs__nav-wrap.is-right>.el-tabs__nav-prev i,.el-tabs--right .el-tabs__nav-wrap.is-left>.el-tabs__nav-next i,.el-tabs--right .el-tabs__nav-wrap.is-left>.el-tabs__nav-prev i,.el-tabs--right .el-tabs__nav-wrap.is-right>.el-tabs__nav-next i,.el-tabs--right .el-tabs__nav-wrap.is-right>.el-tabs__nav-prev i{-webkit-transform:rotateZ(90deg);transform:rotateZ(90deg)}.el-tabs--left .el-tabs__nav-wrap.is-left>.el-tabs__nav-prev,.el-tabs--left .el-tabs__nav-wrap.is-right>.el-tabs__nav-prev,.el-tabs--right .el-tabs__nav-wrap.is-left>.el-tabs__nav-prev,.el-tabs--right .el-tabs__nav-wrap.is-right>.el-tabs__nav-prev{left:auto;top:0}.el-tabs--left .el-tabs__nav-wrap.is-left>.el-tabs__nav-next,.el-tabs--left .el-tabs__nav-wrap.is-right>.el-tabs__nav-next,.el-tabs--right .el-tabs__nav-wrap.is-left>.el-tabs__nav-next,.el-tabs--right .el-tabs__nav-wrap.is-right>.el-tabs__nav-next{right:auto;bottom:0}.el-tabs--left .el-tabs__active-bar.is-left,.el-tabs--left .el-tabs__nav-wrap.is-left::after{right:0;left:auto}.el-tabs--left .el-tabs__nav-wrap.is-left.is-scrollable,.el-tabs--left .el-tabs__nav-wrap.is-right.is-scrollable,.el-tabs--right .el-tabs__nav-wrap.is-left.is-scrollable,.el-tabs--right .el-tabs__nav-wrap.is-right.is-scrollable{padding:30px 0}.el-tabs--left .el-tabs__nav-wrap.is-left::after,.el-tabs--left .el-tabs__nav-wrap.is-right::after,.el-tabs--right .el-tabs__nav-wrap.is-left::after,.el-tabs--right .el-tabs__nav-wrap.is-right::after{height:100%;width:2px;bottom:auto;top:0}.el-tabs--left .el-tabs__nav.is-left,.el-tabs--left .el-tabs__nav.is-right,.el-tabs--right .el-tabs__nav.is-left,.el-tabs--right .el-tabs__nav.is-right{float:none}.el-tabs--left .el-tabs__item.is-left,.el-tabs--left .el-tabs__item.is-right,.el-tabs--right .el-tabs__item.is-left,.el-tabs--right .el-tabs__item.is-right{display:block}.el-tabs--left.el-tabs--card .el-tabs__active-bar.is-left,.el-tabs--right.el-tabs--card .el-tabs__active-bar.is-right{display:none}.el-tabs--left .el-tabs__header.is-left{float:left;margin-bottom:0;margin-right:10px}.el-tabs--left .el-tabs__nav-wrap.is-left{margin-right:-1px}.el-tabs--left .el-tabs__item.is-left{text-align:right}.el-tabs--left.el-tabs--card .el-tabs__item.is-left{border-left:none;border-right:1px solid #E4E7ED;border-bottom:none;border-top:1px solid #E4E7ED;text-align:left}.el-tabs--left.el-tabs--card .el-tabs__item.is-left:first-child{border-right:1px solid #E4E7ED;border-top:none}.el-tabs--left.el-tabs--card .el-tabs__item.is-left.is-active{border:1px solid #E4E7ED;border-right-color:#fff;border-left:none;border-bottom:none}.el-tabs--left.el-tabs--card .el-tabs__item.is-left.is-active:first-child{border-top:none}.el-tabs--left.el-tabs--card .el-tabs__item.is-left.is-active:last-child{border-bottom:none}.el-tabs--left.el-tabs--card .el-tabs__nav{border-radius:4px 0 0 4px;border-bottom:1px solid #E4E7ED;border-right:none}.el-tabs--left.el-tabs--card .el-tabs__new-tab{float:none}.el-tabs--left.el-tabs--border-card .el-tabs__header.is-left{border-right:1px solid #dfe4ed}.el-tabs--left.el-tabs--border-card .el-tabs__item.is-left{border:1px solid transparent;margin:-1px 0 -1px -1px}.el-tabs--left.el-tabs--border-card .el-tabs__item.is-left.is-active{border-color:#d1dbe5 transparent}.el-tabs--right .el-tabs__header.is-right{float:right;margin-bottom:0;margin-left:10px}.el-tabs--right .el-tabs__nav-wrap.is-right{margin-left:-1px}.el-tabs--right .el-tabs__nav-wrap.is-right::after{left:0;right:auto}.el-tabs--right .el-tabs__active-bar.is-right{left:0}.el-tabs--right.el-tabs--card .el-tabs__item.is-right{border-bottom:none;border-top:1px solid #E4E7ED}.el-tabs--right.el-tabs--card .el-tabs__item.is-right:first-child{border-left:1px solid #E4E7ED;border-top:none}.el-tabs--right.el-tabs--card .el-tabs__item.is-right.is-active{border:1px solid #E4E7ED;border-left-color:#fff;border-right:none;border-bottom:none}.el-tabs--right.el-tabs--card .el-tabs__item.is-right.is-active:first-child{border-top:none}.el-tabs--right.el-tabs--card .el-tabs__item.is-right.is-active:last-child{border-bottom:none}.el-tabs--right.el-tabs--card .el-tabs__nav{border-radius:0 4px 4px 0;border-bottom:1px solid #E4E7ED;border-left:none}.el-tabs--right.el-tabs--border-card .el-tabs__header.is-right{border-left:1px solid #dfe4ed}.el-tabs--right.el-tabs--border-card .el-tabs__item.is-right{border:1px solid transparent;margin:-1px -1px -1px 0}.el-tabs--right.el-tabs--border-card .el-tabs__item.is-right.is-active{border-color:#d1dbe5 transparent}.slideInLeft-transition,.slideInRight-transition{display:inline-block}.slideInRight-enter{-webkit-animation:slideInRight-enter .3s;animation:slideInRight-enter .3s}.slideInRight-leave{position:absolute;left:0;right:0;-webkit-animation:slideInRight-leave .3s;animation:slideInRight-leave .3s}.slideInLeft-enter{-webkit-animation:slideInLeft-enter .3s;animation:slideInLeft-enter .3s}.slideInLeft-leave{position:absolute;left:0;right:0;-webkit-animation:slideInLeft-leave .3s;animation:slideInLeft-leave .3s}@-webkit-keyframes slideInRight-enter{0%{opacity:0;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateX(100%);transform:translateX(100%)}to{opacity:1;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes slideInRight-enter{0%{opacity:0;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateX(100%);transform:translateX(100%)}to{opacity:1;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes slideInRight-leave{0%{-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateX(0);transform:translateX(0);opacity:1}100%{-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateX(100%);transform:translateX(100%);opacity:0}}@keyframes slideInRight-leave{0%{-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateX(0);transform:translateX(0);opacity:1}100%{-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateX(100%);transform:translateX(100%);opacity:0}}@-webkit-keyframes slideInLeft-enter{0%{opacity:0;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateX(-100%);transform:translateX(-100%)}to{opacity:1;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes slideInLeft-enter{0%{opacity:0;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateX(-100%);transform:translateX(-100%)}to{opacity:1;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes slideInLeft-leave{0%{-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateX(0);transform:translateX(0);opacity:1}100%{-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateX(-100%);transform:translateX(-100%);opacity:0}}@keyframes slideInLeft-leave{0%{-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateX(0);transform:translateX(0);opacity:1}100%{-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateX(-100%);transform:translateX(-100%);opacity:0}}.el-tree{position:relative;cursor:default;background:#FFF;color:#606266}.el-tree__empty-block{position:relative;min-height:60px;text-align:center;width:100%;height:100%}.el-tree__empty-text{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);color:#909399;font-size:14px}.el-tree__drop-indicator{position:absolute;left:0;right:0;height:1px;background-color:#409EFF}.el-tree-node{white-space:nowrap;outline:0}.el-tree-node:focus>.el-tree-node__content{background-color:#F5F7FA}.el-tree-node.is-drop-inner>.el-tree-node__content .el-tree-node__label{background-color:#409EFF;color:#fff}.el-tree-node__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:26px;cursor:pointer}.el-tree-node__content>.el-tree-node__expand-icon{padding:6px}.el-tree-node__content>label.el-checkbox{margin-right:8px}.el-tree-node__content:hover{background-color:#F5F7FA}.el-tree.is-dragging .el-tree-node__content{cursor:move}.el-tree.is-dragging.is-drop-not-allow .el-tree-node__content{cursor:not-allowed}.el-tree-node__expand-icon{cursor:pointer;color:#C0C4CC;font-size:12px;-webkit-transform:rotate(0);transform:rotate(0);-webkit-transition:-webkit-transform .3s ease-in-out;transition:-webkit-transform .3s ease-in-out;transition:transform .3s ease-in-out;transition:transform .3s ease-in-out,-webkit-transform .3s ease-in-out}.el-tree-node__expand-icon.expanded{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.el-tree-node__expand-icon.is-leaf{color:transparent;cursor:default}.el-tree-node__label{font-size:14px}.el-tree-node__loading-icon{margin-right:8px;font-size:14px;color:#C0C4CC}.el-tree-node>.el-tree-node__children{overflow:hidden;background-color:transparent}.el-tree-node.is-expanded>.el-tree-node__children{display:block}.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{background-color:#f0f7ff}.el-alert{width:100%;padding:8px 16px;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:4px;position:relative;background-color:#FFF;overflow:hidden;opacity:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transition:opacity .2s;transition:opacity .2s}.el-alert.is-light .el-alert__closebtn{color:#C0C4CC}.el-alert.is-dark .el-alert__closebtn,.el-alert.is-dark .el-alert__description{color:#FFF}.el-alert.is-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.el-alert--success.is-light{background-color:#f0f9eb;color:#67C23A}.el-alert--success.is-light .el-alert__description{color:#67C23A}.el-alert--success.is-dark{background-color:#67C23A;color:#FFF}.el-alert--info.is-light{background-color:#f4f4f5;color:#909399}.el-alert--info.is-dark{background-color:#909399;color:#FFF}.el-alert--info .el-alert__description{color:#909399}.el-alert--warning.is-light{background-color:#fdf6ec;color:#E6A23C}.el-alert--warning.is-light .el-alert__description{color:#E6A23C}.el-alert--warning.is-dark{background-color:#E6A23C;color:#FFF}.el-alert--error.is-light{background-color:#fef0f0;color:#F56C6C}.el-alert--error.is-light .el-alert__description{color:#F56C6C}.el-alert--error.is-dark{background-color:#F56C6C;color:#FFF}.el-alert__content{display:table-cell;padding:0 8px}.el-alert__icon{font-size:16px;width:16px}.el-alert__icon.is-big{font-size:28px;width:28px}.el-alert__title{font-size:13px;line-height:18px}.el-alert__title.is-bold{font-weight:700}.el-alert .el-alert__description{font-size:12px;margin:5px 0 0}.el-alert__closebtn{font-size:12px;opacity:1;position:absolute;top:12px;right:15px;cursor:pointer}.el-alert-fade-enter,.el-alert-fade-leave-active,.el-loading-fade-enter,.el-loading-fade-leave-active,.el-notification-fade-leave-active{opacity:0}.el-alert__closebtn.is-customed{font-style:normal;font-size:13px;top:9px}.el-notification{display:-webkit-box;display:-ms-flexbox;display:flex;width:330px;padding:14px 26px 14px 13px;border-radius:8px;-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid #EBEEF5;position:fixed;background-color:#FFF;-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px 0 rgba(0,0,0,.1);-webkit-transition:opacity .3s,left .3s,right .3s,top .4s,bottom .3s,-webkit-transform .3s;transition:opacity .3s,left .3s,right .3s,top .4s,bottom .3s,-webkit-transform .3s;transition:opacity .3s,transform .3s,left .3s,right .3s,top .4s,bottom .3s;transition:opacity .3s,transform .3s,left .3s,right .3s,top .4s,bottom .3s,-webkit-transform .3s;overflow:hidden}.el-notification.right{right:16px}.el-notification.left{left:16px}.el-notification__group{margin-left:13px;margin-right:8px}.el-notification__title{font-weight:700;font-size:16px;color:#303133;margin:0}.el-notification__content{font-size:14px;line-height:21px;margin:6px 0 0;color:#606266;text-align:justify}.el-notification__content p{margin:0}.el-notification__icon{height:24px;width:24px;font-size:24px}.el-notification__closeBtn{position:absolute;top:18px;right:15px;cursor:pointer;color:#909399;font-size:16px}.el-notification__closeBtn:hover{color:#606266}.el-notification .el-icon-success{color:#67C23A}.el-notification .el-icon-error{color:#F56C6C}.el-notification .el-icon-info{color:#909399}.el-notification .el-icon-warning{color:#E6A23C}.el-notification-fade-enter.right{right:0;-webkit-transform:translateX(100%);transform:translateX(100%)}.el-notification-fade-enter.left{left:0;-webkit-transform:translateX(-100%);transform:translateX(-100%)}.el-input-number{position:relative;display:inline-block;width:180px;line-height:38px}.el-input-number .el-input{display:block}.el-input-number .el-input__inner{-webkit-appearance:none;padding-left:50px;padding-right:50px;text-align:center}.el-input-number__decrease,.el-input-number__increase{position:absolute;z-index:1;top:1px;width:40px;height:auto;text-align:center;background:#F5F7FA;color:#606266;cursor:pointer;font-size:13px}.el-input-number__decrease:hover,.el-input-number__increase:hover{color:#409EFF}.el-input-number__decrease:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled),.el-input-number__increase:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled){border-color:#409EFF}.el-input-number__decrease.is-disabled,.el-input-number__increase.is-disabled{color:#C0C4CC;cursor:not-allowed}.el-input-number__increase{right:1px;border-radius:0 4px 4px 0;border-left:1px solid #DCDFE6}.el-input-number__decrease{left:1px;border-radius:4px 0 0 4px;border-right:1px solid #DCDFE6}.el-input-number.is-disabled .el-input-number__decrease,.el-input-number.is-disabled .el-input-number__increase{border-color:#E4E7ED;color:#E4E7ED}.el-input-number.is-disabled .el-input-number__decrease:hover,.el-input-number.is-disabled .el-input-number__increase:hover{color:#E4E7ED;cursor:not-allowed}.el-input-number--medium{width:200px;line-height:34px}.el-input-number--medium .el-input-number__decrease,.el-input-number--medium .el-input-number__increase{width:36px;font-size:14px}.el-input-number--medium .el-input__inner{padding-left:43px;padding-right:43px}.el-input-number--small{width:130px;line-height:30px}.el-input-number--small .el-input-number__decrease,.el-input-number--small .el-input-number__increase{width:32px;font-size:13px}.el-input-number--small .el-input-number__decrease [class*=el-icon],.el-input-number--small .el-input-number__increase [class*=el-icon]{-webkit-transform:scale(.9);transform:scale(.9)}.el-input-number--small .el-input__inner{padding-left:39px;padding-right:39px}.el-input-number--mini{width:130px;line-height:26px}.el-input-number--mini .el-input-number__decrease,.el-input-number--mini .el-input-number__increase{width:28px;font-size:12px}.el-input-number--mini .el-input-number__decrease [class*=el-icon],.el-input-number--mini .el-input-number__increase [class*=el-icon]{-webkit-transform:scale(.8);transform:scale(.8)}.el-input-number--mini .el-input__inner{padding-left:35px;padding-right:35px}.el-input-number.is-without-controls .el-input__inner{padding-left:15px;padding-right:15px}.el-input-number.is-controls-right .el-input__inner{padding-left:15px;padding-right:50px}.el-input-number.is-controls-right .el-input-number__decrease,.el-input-number.is-controls-right .el-input-number__increase{height:auto;line-height:19px}.el-input-number.is-controls-right .el-input-number__decrease [class*=el-icon],.el-input-number.is-controls-right .el-input-number__increase [class*=el-icon]{-webkit-transform:scale(.8);transform:scale(.8)}.el-input-number.is-controls-right .el-input-number__increase{border-radius:0 4px 0 0;border-bottom:1px solid #DCDFE6}.el-input-number.is-controls-right .el-input-number__decrease{right:1px;bottom:1px;top:auto;left:auto;border-right:none;border-left:1px solid #DCDFE6;border-radius:0 0 4px}.el-input-number.is-controls-right[class*=medium] [class*=decrease],.el-input-number.is-controls-right[class*=medium] [class*=increase]{line-height:17px}.el-input-number.is-controls-right[class*=small] [class*=decrease],.el-input-number.is-controls-right[class*=small] [class*=increase]{line-height:15px}.el-input-number.is-controls-right[class*=mini] [class*=decrease],.el-input-number.is-controls-right[class*=mini] [class*=increase]{line-height:13px}.el-tooltip__popper{position:absolute;border-radius:4px;padding:10px;z-index:2000;font-size:12px;line-height:1.2;min-width:10px;word-wrap:break-word}.el-tooltip__popper .popper__arrow,.el-tooltip__popper .popper__arrow::after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.el-tooltip__popper .popper__arrow{border-width:6px}.el-tooltip__popper .popper__arrow::after{content:" ";border-width:5px}.el-progress-bar__inner::after,.el-row::after,.el-row::before,.el-slider::after,.el-slider::before,.el-slider__button-wrapper::after,.el-upload-cover::after{content:""}.el-tooltip__popper[x-placement^=top]{margin-bottom:12px}.el-tooltip__popper[x-placement^=top] .popper__arrow{bottom:-6px;border-top-color:#303133;border-bottom-width:0}.el-tooltip__popper[x-placement^=top] .popper__arrow::after{bottom:1px;margin-left:-5px;border-top-color:#303133;border-bottom-width:0}.el-tooltip__popper[x-placement^=bottom]{margin-top:12px}.el-tooltip__popper[x-placement^=bottom] .popper__arrow{top:-6px;border-top-width:0;border-bottom-color:#303133}.el-tooltip__popper[x-placement^=bottom] .popper__arrow::after{top:1px;margin-left:-5px;border-top-width:0;border-bottom-color:#303133}.el-tooltip__popper[x-placement^=right]{margin-left:12px}.el-tooltip__popper[x-placement^=right] .popper__arrow{left:-6px;border-right-color:#303133;border-left-width:0}.el-tooltip__popper[x-placement^=right] .popper__arrow::after{bottom:-5px;left:1px;border-right-color:#303133;border-left-width:0}.el-tooltip__popper[x-placement^=left]{margin-right:12px}.el-tooltip__popper[x-placement^=left] .popper__arrow{right:-6px;border-right-width:0;border-left-color:#303133}.el-tooltip__popper[x-placement^=left] .popper__arrow::after{right:1px;bottom:-5px;margin-left:-5px;border-right-width:0;border-left-color:#303133}.el-tooltip__popper.is-dark{background:#303133;color:#FFF}.el-tooltip__popper.is-light{background:#FFF;border:1px solid #303133}.el-tooltip__popper.is-light[x-placement^=top] .popper__arrow{border-top-color:#303133}.el-tooltip__popper.is-light[x-placement^=top] .popper__arrow::after{border-top-color:#FFF}.el-tooltip__popper.is-light[x-placement^=bottom] .popper__arrow{border-bottom-color:#303133}.el-tooltip__popper.is-light[x-placement^=bottom] .popper__arrow::after{border-bottom-color:#FFF}.el-tooltip__popper.is-light[x-placement^=left] .popper__arrow{border-left-color:#303133}.el-tooltip__popper.is-light[x-placement^=left] .popper__arrow::after{border-left-color:#FFF}.el-tooltip__popper.is-light[x-placement^=right] .popper__arrow{border-right-color:#303133}.el-tooltip__popper.is-light[x-placement^=right] .popper__arrow::after{border-right-color:#FFF}.el-slider::after,.el-slider::before{display:table}.el-slider__button-wrapper .el-tooltip,.el-slider__button-wrapper::after{vertical-align:middle;display:inline-block}.el-slider::after{clear:both}.el-slider__runway{width:100%;height:6px;margin:16px 0;background-color:#E4E7ED;border-radius:3px;position:relative;cursor:pointer;vertical-align:middle}.el-slider__runway.show-input{margin-right:160px;width:auto}.el-slider__runway.disabled{cursor:default}.el-slider__runway.disabled .el-slider__bar{background-color:#C0C4CC}.el-slider__runway.disabled .el-slider__button{border-color:#C0C4CC}.el-slider__runway.disabled .el-slider__button-wrapper.dragging,.el-slider__runway.disabled .el-slider__button-wrapper.hover,.el-slider__runway.disabled .el-slider__button-wrapper:hover{cursor:not-allowed}.el-slider__runway.disabled .el-slider__button.dragging,.el-slider__runway.disabled .el-slider__button.hover,.el-slider__runway.disabled .el-slider__button:hover{-webkit-transform:scale(1);transform:scale(1);cursor:not-allowed}.el-slider__button-wrapper,.el-slider__stop{-webkit-transform:translateX(-50%);position:absolute}.el-slider__input{float:right;margin-top:3px;width:130px}.el-slider__input.el-input-number--mini{margin-top:5px}.el-slider__input.el-input-number--medium{margin-top:0}.el-slider__input.el-input-number--large{margin-top:-2px}.el-slider__bar{height:6px;background-color:#409EFF;border-top-left-radius:3px;border-bottom-left-radius:3px;position:absolute}.el-slider__button-wrapper{height:36px;width:36px;z-index:1001;top:-15px;transform:translateX(-50%);background-color:transparent;text-align:center;user-select:none;line-height:normal}.el-slider__button-wrapper::after{height:100%}.el-slider__button-wrapper.hover,.el-slider__button-wrapper:hover{cursor:-webkit-grab;cursor:grab}.el-slider__button-wrapper.dragging{cursor:-webkit-grabbing;cursor:grabbing}.el-slider__button{width:16px;height:16px;border:2px solid #409EFF;background-color:#FFF;border-radius:50%;-webkit-transition:.2s;transition:.2s;user-select:none}.el-image-viewer__btn,.el-step__icon-inner{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.el-slider__button.dragging,.el-slider__button.hover,.el-slider__button:hover{-webkit-transform:scale(1.2);transform:scale(1.2)}.el-slider__button.hover,.el-slider__button:hover{cursor:-webkit-grab;cursor:grab}.el-slider__button.dragging{cursor:-webkit-grabbing;cursor:grabbing}.el-slider__stop{height:6px;width:6px;border-radius:100%;background-color:#FFF;transform:translateX(-50%)}.el-slider__marks{top:0;left:12px;width:18px;height:100%}.el-slider__marks-text{position:absolute;-webkit-transform:translateX(-50%);transform:translateX(-50%);font-size:14px;color:#909399;margin-top:15px}.el-slider.is-vertical{position:relative}.el-slider.is-vertical .el-slider__runway{width:6px;height:100%;margin:0 16px}.el-slider.is-vertical .el-slider__bar{width:6px;height:auto;border-radius:0 0 3px 3px}.el-slider.is-vertical .el-slider__button-wrapper{top:auto;left:-15px;-webkit-transform:translateY(50%);transform:translateY(50%)}.el-slider.is-vertical .el-slider__stop{-webkit-transform:translateY(50%);transform:translateY(50%)}.el-slider.is-vertical.el-slider--with-input{padding-bottom:58px}.el-slider.is-vertical.el-slider--with-input .el-slider__input{overflow:visible;float:none;position:absolute;bottom:22px;width:36px;margin-top:15px}.el-slider.is-vertical.el-slider--with-input .el-slider__input .el-input__inner{text-align:center;padding-left:5px;padding-right:5px}.el-slider.is-vertical.el-slider--with-input .el-slider__input .el-input-number__decrease,.el-slider.is-vertical.el-slider--with-input .el-slider__input .el-input-number__increase{top:32px;margin-top:-1px;border:1px solid #DCDFE6;line-height:20px;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:border-color .2s cubic-bezier(.645,.045,.355,1);transition:border-color .2s cubic-bezier(.645,.045,.355,1)}.el-slider.is-vertical.el-slider--with-input .el-slider__input .el-input-number__decrease{width:18px;right:18px;border-bottom-left-radius:4px}.el-slider.is-vertical.el-slider--with-input .el-slider__input .el-input-number__increase{width:19px;border-bottom-right-radius:4px}.el-slider.is-vertical.el-slider--with-input .el-slider__input .el-input-number__increase~.el-input .el-input__inner{border-bottom-left-radius:0;border-bottom-right-radius:0}.el-slider.is-vertical.el-slider--with-input .el-slider__input:hover .el-input-number__decrease,.el-slider.is-vertical.el-slider--with-input .el-slider__input:hover .el-input-number__increase{border-color:#C0C4CC}.el-slider.is-vertical.el-slider--with-input .el-slider__input:active .el-input-number__decrease,.el-slider.is-vertical.el-slider--with-input .el-slider__input:active .el-input-number__increase{border-color:#409EFF}.el-slider.is-vertical .el-slider__marks-text{margin-top:0;left:15px;-webkit-transform:translateY(50%);transform:translateY(50%)}.el-loading-parent--relative{position:relative!important}.el-loading-parent--hidden{overflow:hidden!important}.el-loading-mask{position:absolute;z-index:2000;background-color:rgba(255,255,255,.9);margin:0;top:0;right:0;bottom:0;left:0;-webkit-transition:opacity .3s;transition:opacity .3s}.el-loading-mask.is-fullscreen{position:fixed}.el-loading-mask.is-fullscreen .el-loading-spinner{margin-top:-25px}.el-loading-mask.is-fullscreen .el-loading-spinner .circular{height:50px;width:50px}.el-loading-spinner{top:50%;margin-top:-21px;width:100%;text-align:center;position:absolute}.el-col-pull-0,.el-col-pull-1,.el-col-pull-10,.el-col-pull-11,.el-col-pull-13,.el-col-pull-14,.el-col-pull-15,.el-col-pull-16,.el-col-pull-17,.el-col-pull-18,.el-col-pull-19,.el-col-pull-2,.el-col-pull-20,.el-col-pull-21,.el-col-pull-22,.el-col-pull-23,.el-col-pull-24,.el-col-pull-3,.el-col-pull-4,.el-col-pull-5,.el-col-pull-6,.el-col-pull-7,.el-col-pull-8,.el-col-pull-9,.el-col-push-0,.el-col-push-1,.el-col-push-10,.el-col-push-11,.el-col-push-12,.el-col-push-13,.el-col-push-14,.el-col-push-15,.el-col-push-16,.el-col-push-17,.el-col-push-18,.el-col-push-19,.el-col-push-2,.el-col-push-20,.el-col-push-21,.el-col-push-22,.el-col-push-23,.el-col-push-24,.el-col-push-3,.el-col-push-4,.el-col-push-5,.el-col-push-6,.el-col-push-7,.el-col-push-8,.el-col-push-9,.el-row{position:relative}.el-loading-spinner .el-loading-text{color:#409EFF;margin:3px 0;font-size:14px}.el-loading-spinner .circular{height:42px;width:42px;-webkit-animation:loading-rotate 2s linear infinite;animation:loading-rotate 2s linear infinite}.el-loading-spinner .path{-webkit-animation:loading-dash 1.5s ease-in-out infinite;animation:loading-dash 1.5s ease-in-out infinite;stroke-dasharray:90,150;stroke-dashoffset:0;stroke-width:2;stroke:#409EFF;stroke-linecap:round}.el-loading-spinner i{color:#409EFF}@-webkit-keyframes loading-rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes loading-rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes loading-dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-40px}100%{stroke-dasharray:90,150;stroke-dashoffset:-120px}}@keyframes loading-dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-40px}100%{stroke-dasharray:90,150;stroke-dashoffset:-120px}}.el-row{-webkit-box-sizing:border-box;box-sizing:border-box}.el-row::after,.el-row::before{display:table}.el-row::after{clear:both}.el-row--flex{display:-webkit-box;display:-ms-flexbox;display:flex}.el-col-0,.el-row--flex:after,.el-row--flex:before{display:none}.el-row--flex.is-justify-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.el-row--flex.is-justify-end{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.el-row--flex.is-justify-space-between{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.el-row--flex.is-justify-space-around{-ms-flex-pack:distribute;justify-content:space-around}.el-row--flex.is-align-middle{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.el-row--flex.is-align-bottom{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}[class*=el-col-]{float:left;-webkit-box-sizing:border-box;box-sizing:border-box}.el-upload--picture-card,.el-upload-dragger{-webkit-box-sizing:border-box;cursor:pointer}.el-col-0{width:0%}.el-col-offset-0{margin-left:0}.el-col-pull-0{right:0}.el-col-push-0{left:0}.el-col-1{width:4.16667%}.el-col-offset-1{margin-left:4.16667%}.el-col-pull-1{right:4.16667%}.el-col-push-1{left:4.16667%}.el-col-2{width:8.33333%}.el-col-offset-2{margin-left:8.33333%}.el-col-pull-2{right:8.33333%}.el-col-push-2{left:8.33333%}.el-col-3{width:12.5%}.el-col-offset-3{margin-left:12.5%}.el-col-pull-3{right:12.5%}.el-col-push-3{left:12.5%}.el-col-4{width:16.66667%}.el-col-offset-4{margin-left:16.66667%}.el-col-pull-4{right:16.66667%}.el-col-push-4{left:16.66667%}.el-col-5{width:20.83333%}.el-col-offset-5{margin-left:20.83333%}.el-col-pull-5{right:20.83333%}.el-col-push-5{left:20.83333%}.el-col-6{width:25%}.el-col-offset-6{margin-left:25%}.el-col-pull-6{right:25%}.el-col-push-6{left:25%}.el-col-7{width:29.16667%}.el-col-offset-7{margin-left:29.16667%}.el-col-pull-7{right:29.16667%}.el-col-push-7{left:29.16667%}.el-col-8{width:33.33333%}.el-col-offset-8{margin-left:33.33333%}.el-col-pull-8{right:33.33333%}.el-col-push-8{left:33.33333%}.el-col-9{width:37.5%}.el-col-offset-9{margin-left:37.5%}.el-col-pull-9{right:37.5%}.el-col-push-9{left:37.5%}.el-col-10{width:41.66667%}.el-col-offset-10{margin-left:41.66667%}.el-col-pull-10{right:41.66667%}.el-col-push-10{left:41.66667%}.el-col-11{width:45.83333%}.el-col-offset-11{margin-left:45.83333%}.el-col-pull-11{right:45.83333%}.el-col-push-11{left:45.83333%}.el-col-12{width:50%}.el-col-offset-12{margin-left:50%}.el-col-pull-12{position:relative;right:50%}.el-col-push-12{left:50%}.el-col-13{width:54.16667%}.el-col-offset-13{margin-left:54.16667%}.el-col-pull-13{right:54.16667%}.el-col-push-13{left:54.16667%}.el-col-14{width:58.33333%}.el-col-offset-14{margin-left:58.33333%}.el-col-pull-14{right:58.33333%}.el-col-push-14{left:58.33333%}.el-col-15{width:62.5%}.el-col-offset-15{margin-left:62.5%}.el-col-pull-15{right:62.5%}.el-col-push-15{left:62.5%}.el-col-16{width:66.66667%}.el-col-offset-16{margin-left:66.66667%}.el-col-pull-16{right:66.66667%}.el-col-push-16{left:66.66667%}.el-col-17{width:70.83333%}.el-col-offset-17{margin-left:70.83333%}.el-col-pull-17{right:70.83333%}.el-col-push-17{left:70.83333%}.el-col-18{width:75%}.el-col-offset-18{margin-left:75%}.el-col-pull-18{right:75%}.el-col-push-18{left:75%}.el-col-19{width:79.16667%}.el-col-offset-19{margin-left:79.16667%}.el-col-pull-19{right:79.16667%}.el-col-push-19{left:79.16667%}.el-col-20{width:83.33333%}.el-col-offset-20{margin-left:83.33333%}.el-col-pull-20{right:83.33333%}.el-col-push-20{left:83.33333%}.el-col-21{width:87.5%}.el-col-offset-21{margin-left:87.5%}.el-col-pull-21{right:87.5%}.el-col-push-21{left:87.5%}.el-col-22{width:91.66667%}.el-col-offset-22{margin-left:91.66667%}.el-col-pull-22{right:91.66667%}.el-col-push-22{left:91.66667%}.el-col-23{width:95.83333%}.el-col-offset-23{margin-left:95.83333%}.el-col-pull-23{right:95.83333%}.el-col-push-23{left:95.83333%}.el-col-24{width:100%}.el-col-offset-24{margin-left:100%}.el-col-pull-24{right:100%}.el-col-push-24{left:100%}@media only screen and (max-width:767px){.el-col-xs-0{display:none;width:0%}.el-col-xs-offset-0{margin-left:0}.el-col-xs-pull-0{position:relative;right:0}.el-col-xs-push-0{position:relative;left:0}.el-col-xs-1{width:4.16667%}.el-col-xs-offset-1{margin-left:4.16667%}.el-col-xs-pull-1{position:relative;right:4.16667%}.el-col-xs-push-1{position:relative;left:4.16667%}.el-col-xs-2{width:8.33333%}.el-col-xs-offset-2{margin-left:8.33333%}.el-col-xs-pull-2{position:relative;right:8.33333%}.el-col-xs-push-2{position:relative;left:8.33333%}.el-col-xs-3{width:12.5%}.el-col-xs-offset-3{margin-left:12.5%}.el-col-xs-pull-3{position:relative;right:12.5%}.el-col-xs-push-3{position:relative;left:12.5%}.el-col-xs-4{width:16.66667%}.el-col-xs-offset-4{margin-left:16.66667%}.el-col-xs-pull-4{position:relative;right:16.66667%}.el-col-xs-push-4{position:relative;left:16.66667%}.el-col-xs-5{width:20.83333%}.el-col-xs-offset-5{margin-left:20.83333%}.el-col-xs-pull-5{position:relative;right:20.83333%}.el-col-xs-push-5{position:relative;left:20.83333%}.el-col-xs-6{width:25%}.el-col-xs-offset-6{margin-left:25%}.el-col-xs-pull-6{position:relative;right:25%}.el-col-xs-push-6{position:relative;left:25%}.el-col-xs-7{width:29.16667%}.el-col-xs-offset-7{margin-left:29.16667%}.el-col-xs-pull-7{position:relative;right:29.16667%}.el-col-xs-push-7{position:relative;left:29.16667%}.el-col-xs-8{width:33.33333%}.el-col-xs-offset-8{margin-left:33.33333%}.el-col-xs-pull-8{position:relative;right:33.33333%}.el-col-xs-push-8{position:relative;left:33.33333%}.el-col-xs-9{width:37.5%}.el-col-xs-offset-9{margin-left:37.5%}.el-col-xs-pull-9{position:relative;right:37.5%}.el-col-xs-push-9{position:relative;left:37.5%}.el-col-xs-10{width:41.66667%}.el-col-xs-offset-10{margin-left:41.66667%}.el-col-xs-pull-10{position:relative;right:41.66667%}.el-col-xs-push-10{position:relative;left:41.66667%}.el-col-xs-11{width:45.83333%}.el-col-xs-offset-11{margin-left:45.83333%}.el-col-xs-pull-11{position:relative;right:45.83333%}.el-col-xs-push-11{position:relative;left:45.83333%}.el-col-xs-12{width:50%}.el-col-xs-offset-12{margin-left:50%}.el-col-xs-pull-12{position:relative;right:50%}.el-col-xs-push-12{position:relative;left:50%}.el-col-xs-13{width:54.16667%}.el-col-xs-offset-13{margin-left:54.16667%}.el-col-xs-pull-13{position:relative;right:54.16667%}.el-col-xs-push-13{position:relative;left:54.16667%}.el-col-xs-14{width:58.33333%}.el-col-xs-offset-14{margin-left:58.33333%}.el-col-xs-pull-14{position:relative;right:58.33333%}.el-col-xs-push-14{position:relative;left:58.33333%}.el-col-xs-15{width:62.5%}.el-col-xs-offset-15{margin-left:62.5%}.el-col-xs-pull-15{position:relative;right:62.5%}.el-col-xs-push-15{position:relative;left:62.5%}.el-col-xs-16{width:66.66667%}.el-col-xs-offset-16{margin-left:66.66667%}.el-col-xs-pull-16{position:relative;right:66.66667%}.el-col-xs-push-16{position:relative;left:66.66667%}.el-col-xs-17{width:70.83333%}.el-col-xs-offset-17{margin-left:70.83333%}.el-col-xs-pull-17{position:relative;right:70.83333%}.el-col-xs-push-17{position:relative;left:70.83333%}.el-col-xs-18{width:75%}.el-col-xs-offset-18{margin-left:75%}.el-col-xs-pull-18{position:relative;right:75%}.el-col-xs-push-18{position:relative;left:75%}.el-col-xs-19{width:79.16667%}.el-col-xs-offset-19{margin-left:79.16667%}.el-col-xs-pull-19{position:relative;right:79.16667%}.el-col-xs-push-19{position:relative;left:79.16667%}.el-col-xs-20{width:83.33333%}.el-col-xs-offset-20{margin-left:83.33333%}.el-col-xs-pull-20{position:relative;right:83.33333%}.el-col-xs-push-20{position:relative;left:83.33333%}.el-col-xs-21{width:87.5%}.el-col-xs-offset-21{margin-left:87.5%}.el-col-xs-pull-21{position:relative;right:87.5%}.el-col-xs-push-21{position:relative;left:87.5%}.el-col-xs-22{width:91.66667%}.el-col-xs-offset-22{margin-left:91.66667%}.el-col-xs-pull-22{position:relative;right:91.66667%}.el-col-xs-push-22{position:relative;left:91.66667%}.el-col-xs-23{width:95.83333%}.el-col-xs-offset-23{margin-left:95.83333%}.el-col-xs-pull-23{position:relative;right:95.83333%}.el-col-xs-push-23{position:relative;left:95.83333%}.el-col-xs-24{width:100%}.el-col-xs-offset-24{margin-left:100%}.el-col-xs-pull-24{position:relative;right:100%}.el-col-xs-push-24{position:relative;left:100%}}@media only screen and (min-width:768px){.el-col-sm-0{display:none;width:0%}.el-col-sm-offset-0{margin-left:0}.el-col-sm-pull-0{position:relative;right:0}.el-col-sm-push-0{position:relative;left:0}.el-col-sm-1{width:4.16667%}.el-col-sm-offset-1{margin-left:4.16667%}.el-col-sm-pull-1{position:relative;right:4.16667%}.el-col-sm-push-1{position:relative;left:4.16667%}.el-col-sm-2{width:8.33333%}.el-col-sm-offset-2{margin-left:8.33333%}.el-col-sm-pull-2{position:relative;right:8.33333%}.el-col-sm-push-2{position:relative;left:8.33333%}.el-col-sm-3{width:12.5%}.el-col-sm-offset-3{margin-left:12.5%}.el-col-sm-pull-3{position:relative;right:12.5%}.el-col-sm-push-3{position:relative;left:12.5%}.el-col-sm-4{width:16.66667%}.el-col-sm-offset-4{margin-left:16.66667%}.el-col-sm-pull-4{position:relative;right:16.66667%}.el-col-sm-push-4{position:relative;left:16.66667%}.el-col-sm-5{width:20.83333%}.el-col-sm-offset-5{margin-left:20.83333%}.el-col-sm-pull-5{position:relative;right:20.83333%}.el-col-sm-push-5{position:relative;left:20.83333%}.el-col-sm-6{width:25%}.el-col-sm-offset-6{margin-left:25%}.el-col-sm-pull-6{position:relative;right:25%}.el-col-sm-push-6{position:relative;left:25%}.el-col-sm-7{width:29.16667%}.el-col-sm-offset-7{margin-left:29.16667%}.el-col-sm-pull-7{position:relative;right:29.16667%}.el-col-sm-push-7{position:relative;left:29.16667%}.el-col-sm-8{width:33.33333%}.el-col-sm-offset-8{margin-left:33.33333%}.el-col-sm-pull-8{position:relative;right:33.33333%}.el-col-sm-push-8{position:relative;left:33.33333%}.el-col-sm-9{width:37.5%}.el-col-sm-offset-9{margin-left:37.5%}.el-col-sm-pull-9{position:relative;right:37.5%}.el-col-sm-push-9{position:relative;left:37.5%}.el-col-sm-10{width:41.66667%}.el-col-sm-offset-10{margin-left:41.66667%}.el-col-sm-pull-10{position:relative;right:41.66667%}.el-col-sm-push-10{position:relative;left:41.66667%}.el-col-sm-11{width:45.83333%}.el-col-sm-offset-11{margin-left:45.83333%}.el-col-sm-pull-11{position:relative;right:45.83333%}.el-col-sm-push-11{position:relative;left:45.83333%}.el-col-sm-12{width:50%}.el-col-sm-offset-12{margin-left:50%}.el-col-sm-pull-12{position:relative;right:50%}.el-col-sm-push-12{position:relative;left:50%}.el-col-sm-13{width:54.16667%}.el-col-sm-offset-13{margin-left:54.16667%}.el-col-sm-pull-13{position:relative;right:54.16667%}.el-col-sm-push-13{position:relative;left:54.16667%}.el-col-sm-14{width:58.33333%}.el-col-sm-offset-14{margin-left:58.33333%}.el-col-sm-pull-14{position:relative;right:58.33333%}.el-col-sm-push-14{position:relative;left:58.33333%}.el-col-sm-15{width:62.5%}.el-col-sm-offset-15{margin-left:62.5%}.el-col-sm-pull-15{position:relative;right:62.5%}.el-col-sm-push-15{position:relative;left:62.5%}.el-col-sm-16{width:66.66667%}.el-col-sm-offset-16{margin-left:66.66667%}.el-col-sm-pull-16{position:relative;right:66.66667%}.el-col-sm-push-16{position:relative;left:66.66667%}.el-col-sm-17{width:70.83333%}.el-col-sm-offset-17{margin-left:70.83333%}.el-col-sm-pull-17{position:relative;right:70.83333%}.el-col-sm-push-17{position:relative;left:70.83333%}.el-col-sm-18{width:75%}.el-col-sm-offset-18{margin-left:75%}.el-col-sm-pull-18{position:relative;right:75%}.el-col-sm-push-18{position:relative;left:75%}.el-col-sm-19{width:79.16667%}.el-col-sm-offset-19{margin-left:79.16667%}.el-col-sm-pull-19{position:relative;right:79.16667%}.el-col-sm-push-19{position:relative;left:79.16667%}.el-col-sm-20{width:83.33333%}.el-col-sm-offset-20{margin-left:83.33333%}.el-col-sm-pull-20{position:relative;right:83.33333%}.el-col-sm-push-20{position:relative;left:83.33333%}.el-col-sm-21{width:87.5%}.el-col-sm-offset-21{margin-left:87.5%}.el-col-sm-pull-21{position:relative;right:87.5%}.el-col-sm-push-21{position:relative;left:87.5%}.el-col-sm-22{width:91.66667%}.el-col-sm-offset-22{margin-left:91.66667%}.el-col-sm-pull-22{position:relative;right:91.66667%}.el-col-sm-push-22{position:relative;left:91.66667%}.el-col-sm-23{width:95.83333%}.el-col-sm-offset-23{margin-left:95.83333%}.el-col-sm-pull-23{position:relative;right:95.83333%}.el-col-sm-push-23{position:relative;left:95.83333%}.el-col-sm-24{width:100%}.el-col-sm-offset-24{margin-left:100%}.el-col-sm-pull-24{position:relative;right:100%}.el-col-sm-push-24{position:relative;left:100%}}@media only screen and (min-width:992px){.el-col-md-0{display:none;width:0%}.el-col-md-offset-0{margin-left:0}.el-col-md-pull-0{position:relative;right:0}.el-col-md-push-0{position:relative;left:0}.el-col-md-1{width:4.16667%}.el-col-md-offset-1{margin-left:4.16667%}.el-col-md-pull-1{position:relative;right:4.16667%}.el-col-md-push-1{position:relative;left:4.16667%}.el-col-md-2{width:8.33333%}.el-col-md-offset-2{margin-left:8.33333%}.el-col-md-pull-2{position:relative;right:8.33333%}.el-col-md-push-2{position:relative;left:8.33333%}.el-col-md-3{width:12.5%}.el-col-md-offset-3{margin-left:12.5%}.el-col-md-pull-3{position:relative;right:12.5%}.el-col-md-push-3{position:relative;left:12.5%}.el-col-md-4{width:16.66667%}.el-col-md-offset-4{margin-left:16.66667%}.el-col-md-pull-4{position:relative;right:16.66667%}.el-col-md-push-4{position:relative;left:16.66667%}.el-col-md-5{width:20.83333%}.el-col-md-offset-5{margin-left:20.83333%}.el-col-md-pull-5{position:relative;right:20.83333%}.el-col-md-push-5{position:relative;left:20.83333%}.el-col-md-6{width:25%}.el-col-md-offset-6{margin-left:25%}.el-col-md-pull-6{position:relative;right:25%}.el-col-md-push-6{position:relative;left:25%}.el-col-md-7{width:29.16667%}.el-col-md-offset-7{margin-left:29.16667%}.el-col-md-pull-7{position:relative;right:29.16667%}.el-col-md-push-7{position:relative;left:29.16667%}.el-col-md-8{width:33.33333%}.el-col-md-offset-8{margin-left:33.33333%}.el-col-md-pull-8{position:relative;right:33.33333%}.el-col-md-push-8{position:relative;left:33.33333%}.el-col-md-9{width:37.5%}.el-col-md-offset-9{margin-left:37.5%}.el-col-md-pull-9{position:relative;right:37.5%}.el-col-md-push-9{position:relative;left:37.5%}.el-col-md-10{width:41.66667%}.el-col-md-offset-10{margin-left:41.66667%}.el-col-md-pull-10{position:relative;right:41.66667%}.el-col-md-push-10{position:relative;left:41.66667%}.el-col-md-11{width:45.83333%}.el-col-md-offset-11{margin-left:45.83333%}.el-col-md-pull-11{position:relative;right:45.83333%}.el-col-md-push-11{position:relative;left:45.83333%}.el-col-md-12{width:50%}.el-col-md-offset-12{margin-left:50%}.el-col-md-pull-12{position:relative;right:50%}.el-col-md-push-12{position:relative;left:50%}.el-col-md-13{width:54.16667%}.el-col-md-offset-13{margin-left:54.16667%}.el-col-md-pull-13{position:relative;right:54.16667%}.el-col-md-push-13{position:relative;left:54.16667%}.el-col-md-14{width:58.33333%}.el-col-md-offset-14{margin-left:58.33333%}.el-col-md-pull-14{position:relative;right:58.33333%}.el-col-md-push-14{position:relative;left:58.33333%}.el-col-md-15{width:62.5%}.el-col-md-offset-15{margin-left:62.5%}.el-col-md-pull-15{position:relative;right:62.5%}.el-col-md-push-15{position:relative;left:62.5%}.el-col-md-16{width:66.66667%}.el-col-md-offset-16{margin-left:66.66667%}.el-col-md-pull-16{position:relative;right:66.66667%}.el-col-md-push-16{position:relative;left:66.66667%}.el-col-md-17{width:70.83333%}.el-col-md-offset-17{margin-left:70.83333%}.el-col-md-pull-17{position:relative;right:70.83333%}.el-col-md-push-17{position:relative;left:70.83333%}.el-col-md-18{width:75%}.el-col-md-offset-18{margin-left:75%}.el-col-md-pull-18{position:relative;right:75%}.el-col-md-push-18{position:relative;left:75%}.el-col-md-19{width:79.16667%}.el-col-md-offset-19{margin-left:79.16667%}.el-col-md-pull-19{position:relative;right:79.16667%}.el-col-md-push-19{position:relative;left:79.16667%}.el-col-md-20{width:83.33333%}.el-col-md-offset-20{margin-left:83.33333%}.el-col-md-pull-20{position:relative;right:83.33333%}.el-col-md-push-20{position:relative;left:83.33333%}.el-col-md-21{width:87.5%}.el-col-md-offset-21{margin-left:87.5%}.el-col-md-pull-21{position:relative;right:87.5%}.el-col-md-push-21{position:relative;left:87.5%}.el-col-md-22{width:91.66667%}.el-col-md-offset-22{margin-left:91.66667%}.el-col-md-pull-22{position:relative;right:91.66667%}.el-col-md-push-22{position:relative;left:91.66667%}.el-col-md-23{width:95.83333%}.el-col-md-offset-23{margin-left:95.83333%}.el-col-md-pull-23{position:relative;right:95.83333%}.el-col-md-push-23{position:relative;left:95.83333%}.el-col-md-24{width:100%}.el-col-md-offset-24{margin-left:100%}.el-col-md-pull-24{position:relative;right:100%}.el-col-md-push-24{position:relative;left:100%}}@media only screen and (min-width:1200px){.el-col-lg-0{display:none;width:0%}.el-col-lg-offset-0{margin-left:0}.el-col-lg-pull-0{position:relative;right:0}.el-col-lg-push-0{position:relative;left:0}.el-col-lg-1{width:4.16667%}.el-col-lg-offset-1{margin-left:4.16667%}.el-col-lg-pull-1{position:relative;right:4.16667%}.el-col-lg-push-1{position:relative;left:4.16667%}.el-col-lg-2{width:8.33333%}.el-col-lg-offset-2{margin-left:8.33333%}.el-col-lg-pull-2{position:relative;right:8.33333%}.el-col-lg-push-2{position:relative;left:8.33333%}.el-col-lg-3{width:12.5%}.el-col-lg-offset-3{margin-left:12.5%}.el-col-lg-pull-3{position:relative;right:12.5%}.el-col-lg-push-3{position:relative;left:12.5%}.el-col-lg-4{width:16.66667%}.el-col-lg-offset-4{margin-left:16.66667%}.el-col-lg-pull-4{position:relative;right:16.66667%}.el-col-lg-push-4{position:relative;left:16.66667%}.el-col-lg-5{width:20.83333%}.el-col-lg-offset-5{margin-left:20.83333%}.el-col-lg-pull-5{position:relative;right:20.83333%}.el-col-lg-push-5{position:relative;left:20.83333%}.el-col-lg-6{width:25%}.el-col-lg-offset-6{margin-left:25%}.el-col-lg-pull-6{position:relative;right:25%}.el-col-lg-push-6{position:relative;left:25%}.el-col-lg-7{width:29.16667%}.el-col-lg-offset-7{margin-left:29.16667%}.el-col-lg-pull-7{position:relative;right:29.16667%}.el-col-lg-push-7{position:relative;left:29.16667%}.el-col-lg-8{width:33.33333%}.el-col-lg-offset-8{margin-left:33.33333%}.el-col-lg-pull-8{position:relative;right:33.33333%}.el-col-lg-push-8{position:relative;left:33.33333%}.el-col-lg-9{width:37.5%}.el-col-lg-offset-9{margin-left:37.5%}.el-col-lg-pull-9{position:relative;right:37.5%}.el-col-lg-push-9{position:relative;left:37.5%}.el-col-lg-10{width:41.66667%}.el-col-lg-offset-10{margin-left:41.66667%}.el-col-lg-pull-10{position:relative;right:41.66667%}.el-col-lg-push-10{position:relative;left:41.66667%}.el-col-lg-11{width:45.83333%}.el-col-lg-offset-11{margin-left:45.83333%}.el-col-lg-pull-11{position:relative;right:45.83333%}.el-col-lg-push-11{position:relative;left:45.83333%}.el-col-lg-12{width:50%}.el-col-lg-offset-12{margin-left:50%}.el-col-lg-pull-12{position:relative;right:50%}.el-col-lg-push-12{position:relative;left:50%}.el-col-lg-13{width:54.16667%}.el-col-lg-offset-13{margin-left:54.16667%}.el-col-lg-pull-13{position:relative;right:54.16667%}.el-col-lg-push-13{position:relative;left:54.16667%}.el-col-lg-14{width:58.33333%}.el-col-lg-offset-14{margin-left:58.33333%}.el-col-lg-pull-14{position:relative;right:58.33333%}.el-col-lg-push-14{position:relative;left:58.33333%}.el-col-lg-15{width:62.5%}.el-col-lg-offset-15{margin-left:62.5%}.el-col-lg-pull-15{position:relative;right:62.5%}.el-col-lg-push-15{position:relative;left:62.5%}.el-col-lg-16{width:66.66667%}.el-col-lg-offset-16{margin-left:66.66667%}.el-col-lg-pull-16{position:relative;right:66.66667%}.el-col-lg-push-16{position:relative;left:66.66667%}.el-col-lg-17{width:70.83333%}.el-col-lg-offset-17{margin-left:70.83333%}.el-col-lg-pull-17{position:relative;right:70.83333%}.el-col-lg-push-17{position:relative;left:70.83333%}.el-col-lg-18{width:75%}.el-col-lg-offset-18{margin-left:75%}.el-col-lg-pull-18{position:relative;right:75%}.el-col-lg-push-18{position:relative;left:75%}.el-col-lg-19{width:79.16667%}.el-col-lg-offset-19{margin-left:79.16667%}.el-col-lg-pull-19{position:relative;right:79.16667%}.el-col-lg-push-19{position:relative;left:79.16667%}.el-col-lg-20{width:83.33333%}.el-col-lg-offset-20{margin-left:83.33333%}.el-col-lg-pull-20{position:relative;right:83.33333%}.el-col-lg-push-20{position:relative;left:83.33333%}.el-col-lg-21{width:87.5%}.el-col-lg-offset-21{margin-left:87.5%}.el-col-lg-pull-21{position:relative;right:87.5%}.el-col-lg-push-21{position:relative;left:87.5%}.el-col-lg-22{width:91.66667%}.el-col-lg-offset-22{margin-left:91.66667%}.el-col-lg-pull-22{position:relative;right:91.66667%}.el-col-lg-push-22{position:relative;left:91.66667%}.el-col-lg-23{width:95.83333%}.el-col-lg-offset-23{margin-left:95.83333%}.el-col-lg-pull-23{position:relative;right:95.83333%}.el-col-lg-push-23{position:relative;left:95.83333%}.el-col-lg-24{width:100%}.el-col-lg-offset-24{margin-left:100%}.el-col-lg-pull-24{position:relative;right:100%}.el-col-lg-push-24{position:relative;left:100%}}@media only screen and (min-width:1920px){.el-col-xl-0{display:none;width:0%}.el-col-xl-offset-0{margin-left:0}.el-col-xl-pull-0{position:relative;right:0}.el-col-xl-push-0{position:relative;left:0}.el-col-xl-1{width:4.16667%}.el-col-xl-offset-1{margin-left:4.16667%}.el-col-xl-pull-1{position:relative;right:4.16667%}.el-col-xl-push-1{position:relative;left:4.16667%}.el-col-xl-2{width:8.33333%}.el-col-xl-offset-2{margin-left:8.33333%}.el-col-xl-pull-2{position:relative;right:8.33333%}.el-col-xl-push-2{position:relative;left:8.33333%}.el-col-xl-3{width:12.5%}.el-col-xl-offset-3{margin-left:12.5%}.el-col-xl-pull-3{position:relative;right:12.5%}.el-col-xl-push-3{position:relative;left:12.5%}.el-col-xl-4{width:16.66667%}.el-col-xl-offset-4{margin-left:16.66667%}.el-col-xl-pull-4{position:relative;right:16.66667%}.el-col-xl-push-4{position:relative;left:16.66667%}.el-col-xl-5{width:20.83333%}.el-col-xl-offset-5{margin-left:20.83333%}.el-col-xl-pull-5{position:relative;right:20.83333%}.el-col-xl-push-5{position:relative;left:20.83333%}.el-col-xl-6{width:25%}.el-col-xl-offset-6{margin-left:25%}.el-col-xl-pull-6{position:relative;right:25%}.el-col-xl-push-6{position:relative;left:25%}.el-col-xl-7{width:29.16667%}.el-col-xl-offset-7{margin-left:29.16667%}.el-col-xl-pull-7{position:relative;right:29.16667%}.el-col-xl-push-7{position:relative;left:29.16667%}.el-col-xl-8{width:33.33333%}.el-col-xl-offset-8{margin-left:33.33333%}.el-col-xl-pull-8{position:relative;right:33.33333%}.el-col-xl-push-8{position:relative;left:33.33333%}.el-col-xl-9{width:37.5%}.el-col-xl-offset-9{margin-left:37.5%}.el-col-xl-pull-9{position:relative;right:37.5%}.el-col-xl-push-9{position:relative;left:37.5%}.el-col-xl-10{width:41.66667%}.el-col-xl-offset-10{margin-left:41.66667%}.el-col-xl-pull-10{position:relative;right:41.66667%}.el-col-xl-push-10{position:relative;left:41.66667%}.el-col-xl-11{width:45.83333%}.el-col-xl-offset-11{margin-left:45.83333%}.el-col-xl-pull-11{position:relative;right:45.83333%}.el-col-xl-push-11{position:relative;left:45.83333%}.el-col-xl-12{width:50%}.el-col-xl-offset-12{margin-left:50%}.el-col-xl-pull-12{position:relative;right:50%}.el-col-xl-push-12{position:relative;left:50%}.el-col-xl-13{width:54.16667%}.el-col-xl-offset-13{margin-left:54.16667%}.el-col-xl-pull-13{position:relative;right:54.16667%}.el-col-xl-push-13{position:relative;left:54.16667%}.el-col-xl-14{width:58.33333%}.el-col-xl-offset-14{margin-left:58.33333%}.el-col-xl-pull-14{position:relative;right:58.33333%}.el-col-xl-push-14{position:relative;left:58.33333%}.el-col-xl-15{width:62.5%}.el-col-xl-offset-15{margin-left:62.5%}.el-col-xl-pull-15{position:relative;right:62.5%}.el-col-xl-push-15{position:relative;left:62.5%}.el-col-xl-16{width:66.66667%}.el-col-xl-offset-16{margin-left:66.66667%}.el-col-xl-pull-16{position:relative;right:66.66667%}.el-col-xl-push-16{position:relative;left:66.66667%}.el-col-xl-17{width:70.83333%}.el-col-xl-offset-17{margin-left:70.83333%}.el-col-xl-pull-17{position:relative;right:70.83333%}.el-col-xl-push-17{position:relative;left:70.83333%}.el-col-xl-18{width:75%}.el-col-xl-offset-18{margin-left:75%}.el-col-xl-pull-18{position:relative;right:75%}.el-col-xl-push-18{position:relative;left:75%}.el-col-xl-19{width:79.16667%}.el-col-xl-offset-19{margin-left:79.16667%}.el-col-xl-pull-19{position:relative;right:79.16667%}.el-col-xl-push-19{position:relative;left:79.16667%}.el-col-xl-20{width:83.33333%}.el-col-xl-offset-20{margin-left:83.33333%}.el-col-xl-pull-20{position:relative;right:83.33333%}.el-col-xl-push-20{position:relative;left:83.33333%}.el-col-xl-21{width:87.5%}.el-col-xl-offset-21{margin-left:87.5%}.el-col-xl-pull-21{position:relative;right:87.5%}.el-col-xl-push-21{position:relative;left:87.5%}.el-col-xl-22{width:91.66667%}.el-col-xl-offset-22{margin-left:91.66667%}.el-col-xl-pull-22{position:relative;right:91.66667%}.el-col-xl-push-22{position:relative;left:91.66667%}.el-col-xl-23{width:95.83333%}.el-col-xl-offset-23{margin-left:95.83333%}.el-col-xl-pull-23{position:relative;right:95.83333%}.el-col-xl-push-23{position:relative;left:95.83333%}.el-col-xl-24{width:100%}.el-col-xl-offset-24{margin-left:100%}.el-col-xl-pull-24{position:relative;right:100%}.el-col-xl-push-24{position:relative;left:100%}}@-webkit-keyframes progress{0%{background-position:0 0}100%{background-position:32px 0}}.el-upload{display:inline-block;text-align:center;cursor:pointer;outline:0}.el-upload__input{display:none}.el-upload__tip{font-size:12px;color:#606266;margin-top:7px}.el-upload iframe{position:absolute;z-index:-1;top:0;left:0;opacity:0;filter:alpha(opacity=0)}.el-upload--picture-card{background-color:#fbfdff;border:1px dashed #c0ccda;border-radius:6px;box-sizing:border-box;width:148px;height:148px;line-height:146px;vertical-align:top}.el-upload--picture-card i{font-size:28px;color:#8c939d}.el-upload--picture-card:hover,.el-upload:focus{border-color:#409EFF;color:#409EFF}.el-upload:focus .el-upload-dragger{border-color:#409EFF}.el-upload-dragger{background-color:#fff;border:1px dashed #d9d9d9;border-radius:6px;box-sizing:border-box;width:360px;height:180px;text-align:center;position:relative;overflow:hidden}.el-upload-dragger .el-icon-upload{font-size:67px;color:#C0C4CC;margin:40px 0 16px;line-height:50px}.el-upload-dragger+.el-upload__tip{text-align:center}.el-upload-dragger~.el-upload__files{border-top:1px solid #DCDFE6;margin-top:7px;padding-top:5px}.el-upload-dragger .el-upload__text{color:#606266;font-size:14px;text-align:center}.el-upload-dragger .el-upload__text em{color:#409EFF;font-style:normal}.el-upload-dragger:hover{border-color:#409EFF}.el-upload-dragger.is-dragover{background-color:rgba(32,159,255,.06);border:2px dashed #409EFF}.el-upload-list{margin:0;padding:0;list-style:none}.el-upload-list__item{-webkit-transition:all .5s cubic-bezier(.55,0,.1,1);transition:all .5s cubic-bezier(.55,0,.1,1);font-size:14px;color:#606266;line-height:1.8;margin-top:5px;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:4px;width:100%}.el-upload-list__item .el-progress{position:absolute;top:20px;width:100%}.el-upload-list__item .el-progress__text{position:absolute;right:0;top:-13px}.el-upload-list__item .el-progress-bar{margin-right:0;padding-right:0}.el-upload-list__item:first-child{margin-top:10px}.el-upload-list__item .el-icon-upload-success{color:#67C23A}.el-upload-list__item .el-icon-close{display:none;position:absolute;top:5px;right:5px;cursor:pointer;opacity:.75;color:#606266}.el-upload-list__item .el-icon-close:hover{opacity:1}.el-upload-list__item .el-icon-close-tip{display:none;position:absolute;top:5px;right:5px;font-size:12px;cursor:pointer;opacity:1;color:#409EFF}.el-upload-list__item:hover{background-color:#F5F7FA}.el-upload-list__item:hover .el-icon-close{display:inline-block}.el-upload-list__item:hover .el-progress__text{display:none}.el-upload-list__item.is-success .el-upload-list__item-status-label{display:block}.el-upload-list__item.is-success .el-upload-list__item-name:focus,.el-upload-list__item.is-success .el-upload-list__item-name:hover{color:#409EFF;cursor:pointer}.el-upload-list__item.is-success:focus:not(:hover) .el-icon-close-tip{display:inline-block}.el-upload-list__item.is-success:active .el-icon-close-tip,.el-upload-list__item.is-success:focus .el-upload-list__item-status-label,.el-upload-list__item.is-success:hover .el-upload-list__item-status-label,.el-upload-list__item.is-success:not(.focusing):focus .el-icon-close-tip{display:none}.el-upload-list.is-disabled .el-upload-list__item:hover .el-upload-list__item-status-label{display:block}.el-upload-list__item-name{color:#606266;display:block;margin-right:40px;overflow:hidden;padding-left:4px;text-overflow:ellipsis;-webkit-transition:color .3s;transition:color .3s;white-space:nowrap}.el-upload-list__item-name [class^=el-icon]{height:100%;margin-right:7px;color:#909399;line-height:inherit}.el-upload-list__item-status-label{position:absolute;right:5px;top:0;line-height:inherit;display:none}.el-upload-list__item-delete{position:absolute;right:10px;top:0;font-size:12px;color:#606266;display:none}.el-upload-list__item-delete:hover{color:#409EFF}.el-upload-list--picture-card{margin:0;display:inline;vertical-align:top}.el-upload-list--picture-card .el-upload-list__item{overflow:hidden;background-color:#fff;border:1px solid #c0ccda;border-radius:6px;-webkit-box-sizing:border-box;box-sizing:border-box;width:148px;height:148px;margin:0 8px 8px 0;display:inline-block}.el-upload-list--picture-card .el-upload-list__item .el-icon-check,.el-upload-list--picture-card .el-upload-list__item .el-icon-circle-check{color:#FFF}.el-upload-list--picture-card .el-upload-list__item .el-icon-close,.el-upload-list--picture-card .el-upload-list__item:hover .el-upload-list__item-status-label{display:none}.el-upload-list--picture-card .el-upload-list__item:hover .el-progress__text{display:block}.el-upload-list--picture-card .el-upload-list__item-name{display:none}.el-upload-list--picture-card .el-upload-list__item-thumbnail{width:100%;height:100%}.el-upload-list--picture-card .el-upload-list__item-status-label{position:absolute;right:-15px;top:-6px;width:40px;height:24px;background:#13ce66;text-align:center;-webkit-transform:rotate(45deg);transform:rotate(45deg);-webkit-box-shadow:0 0 1pc 1px rgba(0,0,0,.2);box-shadow:0 0 1pc 1px rgba(0,0,0,.2)}.el-upload-list--picture-card .el-upload-list__item-status-label i{font-size:12px;margin-top:11px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.el-upload-list--picture-card .el-upload-list__item-actions{position:absolute;width:100%;height:100%;left:0;top:0;cursor:default;text-align:center;color:#fff;opacity:0;font-size:20px;background-color:rgba(0,0,0,.5);-webkit-transition:opacity .3s;transition:opacity .3s}.el-upload-list--picture-card .el-upload-list__item-actions::after{display:inline-block;content:"";height:100%;vertical-align:middle}.el-upload-list--picture-card .el-upload-list__item-actions span{display:none;cursor:pointer}.el-upload-list--picture-card .el-upload-list__item-actions span+span{margin-left:15px}.el-upload-list--picture-card .el-upload-list__item-actions .el-upload-list__item-delete{position:static;font-size:inherit;color:inherit}.el-upload-list--picture-card .el-upload-list__item-actions:hover{opacity:1}.el-upload-list--picture-card .el-upload-list__item-actions:hover span{display:inline-block}.el-upload-list--picture-card .el-progress{top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);bottom:auto;width:126px}.el-upload-list--picture-card .el-progress .el-progress__text{top:50%}.el-upload-list--picture .el-upload-list__item{overflow:hidden;z-index:0;background-color:#fff;border:1px solid #c0ccda;border-radius:6px;-webkit-box-sizing:border-box;box-sizing:border-box;margin-top:10px;padding:10px 10px 10px 90px;height:92px}.el-upload-list--picture .el-upload-list__item .el-icon-check,.el-upload-list--picture .el-upload-list__item .el-icon-circle-check{color:#FFF}.el-upload-list--picture .el-upload-list__item:hover .el-upload-list__item-status-label{background:0 0;-webkit-box-shadow:none;box-shadow:none;top:-2px;right:-12px}.el-upload-list--picture .el-upload-list__item:hover .el-progress__text{display:block}.el-upload-list--picture .el-upload-list__item.is-success .el-upload-list__item-name{line-height:70px;margin-top:0}.el-upload-list--picture .el-upload-list__item.is-success .el-upload-list__item-name i{display:none}.el-upload-list--picture .el-upload-list__item-thumbnail{vertical-align:middle;display:inline-block;width:70px;height:70px;float:left;position:relative;z-index:1;margin-left:-80px;background-color:#FFF}.el-upload-list--picture .el-upload-list__item-name{display:block;margin-top:20px}.el-upload-list--picture .el-upload-list__item-name i{font-size:70px;line-height:1;position:absolute;left:9px;top:10px}.el-upload-list--picture .el-upload-list__item-status-label{position:absolute;right:-17px;top:-7px;width:46px;height:26px;background:#13ce66;text-align:center;-webkit-transform:rotate(45deg);transform:rotate(45deg);-webkit-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc}.el-upload-list--picture .el-upload-list__item-status-label i{font-size:12px;margin-top:12px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.el-upload-list--picture .el-progress{position:relative;top:-7px}.el-upload-cover{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;z-index:10;cursor:default}.el-upload-cover::after{display:inline-block;height:100%;vertical-align:middle}.el-upload-cover img{display:block;width:100%;height:100%}.el-upload-cover__label{position:absolute;right:-15px;top:-6px;width:40px;height:24px;background:#13ce66;text-align:center;-webkit-transform:rotate(45deg);transform:rotate(45deg);-webkit-box-shadow:0 0 1pc 1px rgba(0,0,0,.2);box-shadow:0 0 1pc 1px rgba(0,0,0,.2)}.el-upload-cover__label i{font-size:12px;margin-top:11px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);color:#fff}.el-upload-cover__progress{display:inline-block;vertical-align:middle;position:static;width:243px}.el-upload-cover__progress+.el-upload__inner{opacity:0}.el-upload-cover__content{position:absolute;top:0;left:0;width:100%;height:100%}.el-upload-cover__interact{position:absolute;bottom:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.72);text-align:center}.el-upload-cover__interact .btn{display:inline-block;color:#FFF;font-size:14px;cursor:pointer;vertical-align:middle;-webkit-transition:opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);transition:opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);margin-top:60px}.el-upload-cover__interact .btn span{opacity:0;-webkit-transition:opacity .15s linear;transition:opacity .15s linear}.el-upload-cover__interact .btn:not(:first-child){margin-left:35px}.el-upload-cover__interact .btn:hover{-webkit-transform:translateY(-13px);transform:translateY(-13px)}.el-upload-cover__interact .btn:hover span{opacity:1}.el-upload-cover__interact .btn i{color:#FFF;display:block;font-size:24px;line-height:inherit;margin:0 auto 5px}.el-upload-cover__title{position:absolute;bottom:0;left:0;background-color:#FFF;height:36px;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:400;text-align:left;padding:0 10px;margin:0;line-height:36px;font-size:14px;color:#303133}.el-upload-cover+.el-upload__inner{opacity:0;position:relative;z-index:1}.el-progress{position:relative;line-height:1}.el-progress__text{font-size:14px;color:#606266;display:inline-block;vertical-align:middle;margin-left:10px;line-height:1}.el-progress__text i{vertical-align:middle;display:block}.el-progress--circle,.el-progress--dashboard{display:inline-block}.el-progress--circle .el-progress__text,.el-progress--dashboard .el-progress__text{position:absolute;top:50%;left:0;width:100%;text-align:center;margin:0;-webkit-transform:translate(0,-50%);transform:translate(0,-50%)}.el-progress--circle .el-progress__text i,.el-progress--dashboard .el-progress__text i{vertical-align:middle;display:inline-block}.el-progress--without-text .el-progress__text{display:none}.el-progress--without-text .el-progress-bar{padding-right:0;margin-right:0;display:block}.el-progress-bar,.el-progress-bar__inner::after,.el-progress-bar__innerText,.el-spinner{display:inline-block;vertical-align:middle}.el-progress--text-inside .el-progress-bar{padding-right:0;margin-right:0}.el-progress.is-success .el-progress-bar__inner{background-color:#67C23A}.el-progress.is-success .el-progress__text{color:#67C23A}.el-progress.is-warning .el-progress-bar__inner{background-color:#E6A23C}.el-progress.is-warning .el-progress__text{color:#E6A23C}.el-progress.is-exception .el-progress-bar__inner{background-color:#F56C6C}.el-progress.is-exception .el-progress__text{color:#F56C6C}.el-progress-bar{padding-right:50px;width:100%;margin-right:-55px;-webkit-box-sizing:border-box;box-sizing:border-box}.el-progress-bar__outer{height:6px;border-radius:100px;background-color:#EBEEF5;overflow:hidden;position:relative;vertical-align:middle}.el-progress-bar__inner{position:absolute;left:0;top:0;height:100%;background-color:#409EFF;text-align:right;border-radius:100px;line-height:1;white-space:nowrap;-webkit-transition:width .6s ease;transition:width .6s ease}.el-card,.el-message{border-radius:4px;overflow:hidden}.el-progress-bar__inner::after{height:100%}.el-progress-bar__innerText{color:#FFF;font-size:12px;margin:0 5px}@keyframes progress{0%{background-position:0 0}100%{background-position:32px 0}}.el-time-spinner{width:100%;white-space:nowrap}.el-spinner-inner{-webkit-animation:rotate 2s linear infinite;animation:rotate 2s linear infinite;width:50px;height:50px}.el-spinner-inner .path{stroke:#ececec;stroke-linecap:round;-webkit-animation:dash 1.5s ease-in-out infinite;animation:dash 1.5s ease-in-out infinite}@-webkit-keyframes rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}100%{stroke-dasharray:90,150;stroke-dashoffset:-124}}@keyframes dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}100%{stroke-dasharray:90,150;stroke-dashoffset:-124}}.el-message{min-width:380px;-webkit-box-sizing:border-box;box-sizing:border-box;border-width:1px;border-style:solid;border-color:#EBEEF5;position:fixed;left:50%;top:20px;-webkit-transform:translateX(-50%);transform:translateX(-50%);background-color:#edf2fc;-webkit-transition:opacity .3s,top .4s,-webkit-transform .4s;transition:opacity .3s,top .4s,-webkit-transform .4s;transition:opacity .3s,transform .4s,top .4s;transition:opacity .3s,transform .4s,top .4s,-webkit-transform .4s;padding:15px 15px 15px 20px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.el-message.is-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.el-message.is-closable .el-message__content{padding-right:16px}.el-message p{margin:0}.el-message--info .el-message__content{color:#909399}.el-message--success{background-color:#f0f9eb;border-color:#e1f3d8}.el-message--success .el-message__content{color:#67C23A}.el-message--warning{background-color:#fdf6ec;border-color:#faecd8}.el-message--warning .el-message__content{color:#E6A23C}.el-message--error{background-color:#fef0f0;border-color:#fde2e2}.el-message--error .el-message__content{color:#F56C6C}.el-message__icon{margin-right:10px}.el-message__content{padding:0;font-size:14px;line-height:1}.el-message__closeBtn{position:absolute;top:50%;right:15px;-webkit-transform:translateY(-50%);transform:translateY(-50%);cursor:pointer;color:#C0C4CC;font-size:16px}.el-message__closeBtn:hover{color:#909399}.el-message .el-icon-success{color:#67C23A}.el-message .el-icon-error{color:#F56C6C}.el-message .el-icon-info{color:#909399}.el-message .el-icon-warning{color:#E6A23C}.el-message-fade-enter,.el-message-fade-leave-active{opacity:0;-webkit-transform:translate(-50%,-100%);transform:translate(-50%,-100%)}.el-badge{position:relative;vertical-align:middle;display:inline-block}.el-badge__content{background-color:#F56C6C;border-radius:10px;color:#FFF;display:inline-block;font-size:12px;height:18px;line-height:18px;padding:0 6px;text-align:center;white-space:nowrap;border:1px solid #FFF}.el-badge__content.is-fixed{position:absolute;top:0;right:10px;-webkit-transform:translateY(-50%) translateX(100%);transform:translateY(-50%) translateX(100%)}.el-rate__icon,.el-rate__item{position:relative;display:inline-block}.el-badge__content.is-fixed.is-dot{right:5px}.el-badge__content.is-dot{height:8px;width:8px;padding:0;right:0;border-radius:50%}.el-badge__content--primary{background-color:#409EFF}.el-badge__content--success{background-color:#67C23A}.el-badge__content--warning{background-color:#E6A23C}.el-badge__content--info{background-color:#909399}.el-badge__content--danger{background-color:#F56C6C}.el-card{border:1px solid #EBEEF5;background-color:#FFF;color:#303133;-webkit-transition:.3s;transition:.3s}.el-card.is-always-shadow,.el-card.is-hover-shadow:focus,.el-card.is-hover-shadow:hover{-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px 0 rgba(0,0,0,.1)}.el-card__header{padding:18px 20px;border-bottom:1px solid #EBEEF5;-webkit-box-sizing:border-box;box-sizing:border-box}.el-card__body{padding:20px}.el-rate{height:20px;line-height:1}.el-rate__item{font-size:0;vertical-align:middle}.el-rate__icon{font-size:18px;margin-right:6px;color:#C0C4CC;-webkit-transition:.3s;transition:.3s}.el-rate__decimal,.el-rate__icon .path2{position:absolute;top:0;left:0}.el-rate__icon.hover{-webkit-transform:scale(1.15);transform:scale(1.15)}.el-rate__decimal{display:inline-block;overflow:hidden}.el-step.is-vertical,.el-steps{display:-webkit-box;display:-ms-flexbox}.el-rate__text{font-size:14px;vertical-align:middle}.el-steps{display:flex}.el-steps--simple{padding:13px 8%;border-radius:4px;background:#F5F7FA}.el-steps--horizontal{white-space:nowrap}.el-steps--vertical{height:100%;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-flow:column;flex-flow:column}.el-step{position:relative;-ms-flex-negative:1;flex-shrink:1}.el-step:last-of-type .el-step__line{display:none}.el-step:last-of-type.is-flex{-ms-flex-preferred-size:auto!important;flex-basis:auto!important;-ms-flex-negative:0;flex-shrink:0;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0}.el-step:last-of-type .el-step__description,.el-step:last-of-type .el-step__main{padding-right:0}.el-step__head{position:relative;width:100%}.el-step__head.is-process{color:#303133;border-color:#303133}.el-step__head.is-wait{color:#C0C4CC;border-color:#C0C4CC}.el-step__head.is-success{color:#67C23A;border-color:#67C23A}.el-step__head.is-error{color:#F56C6C;border-color:#F56C6C}.el-step__head.is-finish{color:#409EFF;border-color:#409EFF}.el-step__icon{position:relative;z-index:1;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:24px;height:24px;font-size:14px;-webkit-box-sizing:border-box;box-sizing:border-box;background:#FFF;-webkit-transition:.15s ease-out;transition:.15s ease-out}.el-step__icon.is-text{border-radius:50%;border:2px solid;border-color:inherit}.el-step__icon.is-icon{width:40px}.el-step__icon-inner{display:inline-block;user-select:none;text-align:center;font-weight:700;line-height:1;color:inherit}.el-step__icon-inner[class*=el-icon]:not(.is-status){font-size:25px;font-weight:400}.el-step__icon-inner.is-status{-webkit-transform:translateY(1px);transform:translateY(1px)}.el-step__line{position:absolute;border-color:inherit;background-color:#C0C4CC}.el-step__line-inner{display:block;border-width:1px;border-style:solid;border-color:inherit;-webkit-transition:.15s ease-out;transition:.15s ease-out;-webkit-box-sizing:border-box;box-sizing:border-box;width:0;height:0}.el-step__main{white-space:normal;text-align:left}.el-step__title{font-size:16px;line-height:38px}.el-step__title.is-process{font-weight:700;color:#303133}.el-step__title.is-wait{color:#C0C4CC}.el-step__title.is-success{color:#67C23A}.el-step__title.is-error{color:#F56C6C}.el-step__title.is-finish{color:#409EFF}.el-step__description{padding-right:10%;margin-top:-5px;font-size:12px;line-height:20px;font-weight:400}.el-step__description.is-process{color:#303133}.el-step__description.is-wait{color:#C0C4CC}.el-step__description.is-success{color:#67C23A}.el-step__description.is-error{color:#F56C6C}.el-step__description.is-finish{color:#409EFF}.el-step.is-horizontal{display:inline-block}.el-step.is-horizontal .el-step__line{height:2px;top:11px;left:0;right:0}.el-step.is-vertical{display:flex}.el-step.is-vertical .el-step__head{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;width:24px}.el-step.is-vertical .el-step__main{padding-left:10px;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.el-step.is-vertical .el-step__title{line-height:24px;padding-bottom:8px}.el-step.is-vertical .el-step__line{width:2px;top:0;bottom:0;left:11px}.el-step.is-vertical .el-step__icon.is-icon{width:24px}.el-step.is-center .el-step__head,.el-step.is-center .el-step__main{text-align:center}.el-step.is-center .el-step__description{padding-left:20%;padding-right:20%}.el-step.is-center .el-step__line{left:50%;right:-50%}.el-step.is-simple{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.el-step.is-simple .el-step__head{width:auto;font-size:0;padding-right:10px}.el-step.is-simple .el-step__icon{background:0 0;width:16px;height:16px;font-size:12px}.el-step.is-simple .el-step__icon-inner[class*=el-icon]:not(.is-status){font-size:18px}.el-step.is-simple .el-step__icon-inner.is-status{-webkit-transform:scale(.8) translateY(1px);transform:scale(.8) translateY(1px)}.el-step.is-simple .el-step__main{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.el-step.is-simple .el-step__title{font-size:16px;line-height:20px}.el-step.is-simple:not(:last-of-type) .el-step__title{max-width:50%;word-break:break-all}.el-step.is-simple .el-step__arrow{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.el-step.is-simple .el-step__arrow::after,.el-step.is-simple .el-step__arrow::before{content:'';display:inline-block;position:absolute;height:15px;width:1px;background:#C0C4CC}.el-step.is-simple .el-step__arrow::before{-webkit-transform:rotate(-45deg) translateY(-4px);transform:rotate(-45deg) translateY(-4px);-webkit-transform-origin:0 0;transform-origin:0 0}.el-step.is-simple .el-step__arrow::after{-webkit-transform:rotate(45deg) translateY(4px);transform:rotate(45deg) translateY(4px);-webkit-transform-origin:100% 100%;transform-origin:100% 100%}.el-step.is-simple:last-of-type .el-step__arrow{display:none}.el-carousel{position:relative}.el-carousel--horizontal{overflow-x:hidden}.el-carousel--vertical{overflow-y:hidden}.el-carousel__container{position:relative;height:300px}.el-carousel__arrow{border:none;outline:0;padding:0;margin:0;height:36px;width:36px;cursor:pointer;-webkit-transition:.3s;transition:.3s;border-radius:50%;background-color:rgba(31,45,61,.11);color:#FFF;position:absolute;top:50%;z-index:10;-webkit-transform:translateY(-50%);transform:translateY(-50%);text-align:center;font-size:12px}.el-carousel__arrow--left{left:16px}.el-carousel__arrow--right{right:16px}.el-carousel__arrow:hover{background-color:rgba(31,45,61,.23)}.el-carousel__arrow i{cursor:pointer}.el-carousel__indicators{position:absolute;list-style:none;margin:0;padding:0;z-index:2}.el-carousel__indicators--horizontal{bottom:0;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.el-carousel__indicators--vertical{right:0;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.el-carousel__indicators--outside{bottom:26px;text-align:center;position:static;-webkit-transform:none;transform:none}.el-carousel__indicators--outside .el-carousel__indicator:hover button{opacity:.64}.el-carousel__indicators--outside button{background-color:#C0C4CC;opacity:.24}.el-carousel__indicators--labels{left:0;right:0;-webkit-transform:none;transform:none;text-align:center}.el-carousel__indicators--labels .el-carousel__button{height:auto;width:auto;padding:2px 18px;font-size:12px}.el-carousel__indicators--labels .el-carousel__indicator{padding:6px 4px}.el-carousel__indicator{background-color:transparent;cursor:pointer}.el-carousel__indicator:hover button{opacity:.72}.el-carousel__indicator--horizontal{display:inline-block;padding:12px 4px}.el-carousel__indicator--vertical{padding:4px 12px}.el-carousel__indicator--vertical .el-carousel__button{width:2px;height:15px}.el-carousel__indicator.is-active button{opacity:1}.el-carousel__button{display:block;opacity:.48;width:30px;height:2px;background-color:#FFF;border:none;outline:0;padding:0;margin:0;cursor:pointer;-webkit-transition:.3s;transition:.3s}.el-carousel__item,.el-carousel__mask{height:100%;top:0;left:0;position:absolute}.carousel-arrow-left-enter,.carousel-arrow-left-leave-active{-webkit-transform:translateY(-50%) translateX(-10px);transform:translateY(-50%) translateX(-10px);opacity:0}.carousel-arrow-right-enter,.carousel-arrow-right-leave-active{-webkit-transform:translateY(-50%) translateX(10px);transform:translateY(-50%) translateX(10px);opacity:0}.el-carousel__item{width:100%;display:inline-block;overflow:hidden;z-index:0}.el-carousel__item.is-active{z-index:2}.el-carousel__item.is-animating{-webkit-transition:-webkit-transform .4s ease-in-out;transition:-webkit-transform .4s ease-in-out;transition:transform .4s ease-in-out;transition:transform .4s ease-in-out,-webkit-transform .4s ease-in-out}.el-carousel__item--card{width:50%;-webkit-transition:-webkit-transform .4s ease-in-out;transition:-webkit-transform .4s ease-in-out;transition:transform .4s ease-in-out;transition:transform .4s ease-in-out,-webkit-transform .4s ease-in-out}.el-carousel__item--card.is-in-stage{cursor:pointer;z-index:1}.el-carousel__item--card.is-in-stage.is-hover .el-carousel__mask,.el-carousel__item--card.is-in-stage:hover .el-carousel__mask{opacity:.12}.el-carousel__item--card.is-active{z-index:2}.el-carousel__mask{width:100%;background-color:#FFF;opacity:.24;-webkit-transition:.2s;transition:.2s}.el-fade-in-enter,.el-fade-in-leave-active,.el-fade-in-linear-enter,.el-fade-in-linear-leave,.el-fade-in-linear-leave-active,.fade-in-linear-enter,.fade-in-linear-leave,.fade-in-linear-leave-active{opacity:0}.fade-in-linear-enter-active,.fade-in-linear-leave-active{-webkit-transition:opacity .2s linear;transition:opacity .2s linear}.el-fade-in-linear-enter-active,.el-fade-in-linear-leave-active{-webkit-transition:opacity .2s linear;transition:opacity .2s linear}.el-fade-in-enter-active,.el-fade-in-leave-active{-webkit-transition:all .3s cubic-bezier(.55,0,.1,1);transition:all .3s cubic-bezier(.55,0,.1,1)}.el-zoom-in-center-enter-active,.el-zoom-in-center-leave-active{-webkit-transition:all .3s cubic-bezier(.55,0,.1,1);transition:all .3s cubic-bezier(.55,0,.1,1)}.el-zoom-in-center-enter,.el-zoom-in-center-leave-active{opacity:0;-webkit-transform:scaleX(0);transform:scaleX(0)}.el-zoom-in-top-enter-active,.el-zoom-in-top-leave-active{opacity:1;-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transition:opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);transition:opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);-webkit-transform-origin:center top;transform-origin:center top}.el-zoom-in-top-enter,.el-zoom-in-top-leave-active{opacity:0;-webkit-transform:scaleY(0);transform:scaleY(0)}.el-zoom-in-bottom-enter-active,.el-zoom-in-bottom-leave-active{opacity:1;-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transition:opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);transition:opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);-webkit-transform-origin:center bottom;transform-origin:center bottom}.el-zoom-in-bottom-enter,.el-zoom-in-bottom-leave-active{opacity:0;-webkit-transform:scaleY(0);transform:scaleY(0)}.el-zoom-in-left-enter-active,.el-zoom-in-left-leave-active{opacity:1;-webkit-transform:scale(1,1);transform:scale(1,1);-webkit-transition:opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);transition:opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);-webkit-transform-origin:top left;transform-origin:top left}.el-zoom-in-left-enter,.el-zoom-in-left-leave-active{opacity:0;-webkit-transform:scale(.45,.45);transform:scale(.45,.45)}.collapse-transition{-webkit-transition:.3s height ease-in-out,.3s padding-top ease-in-out,.3s padding-bottom ease-in-out;transition:.3s height ease-in-out,.3s padding-top ease-in-out,.3s padding-bottom ease-in-out}.horizontal-collapse-transition{-webkit-transition:.3s width ease-in-out,.3s padding-left ease-in-out,.3s padding-right ease-in-out;transition:.3s width ease-in-out,.3s padding-left ease-in-out,.3s padding-right ease-in-out}.el-list-enter-active,.el-list-leave-active{-webkit-transition:all 1s;transition:all 1s}.el-list-enter,.el-list-leave-active{opacity:0;-webkit-transform:translateY(-30px);transform:translateY(-30px)}.el-opacity-transition{-webkit-transition:opacity .3s cubic-bezier(.55,0,.1,1);transition:opacity .3s cubic-bezier(.55,0,.1,1)}.el-collapse{border-top:1px solid #EBEEF5;border-bottom:1px solid #EBEEF5}.el-collapse-item.is-disabled .el-collapse-item__header{color:#bbb;cursor:not-allowed}.el-collapse-item__header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:48px;line-height:48px;background-color:#FFF;color:#303133;cursor:pointer;border-bottom:1px solid #EBEEF5;font-size:13px;font-weight:500;-webkit-transition:border-bottom-color .3s;transition:border-bottom-color .3s;outline:0}.el-collapse-item__arrow{margin:0 8px 0 auto;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;font-weight:300}.el-collapse-item__arrow.is-active{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.el-collapse-item__header.focusing:focus:not(:hover){color:#409EFF}.el-collapse-item__header.is-active{border-bottom-color:transparent}.el-collapse-item__wrap{will-change:height;background-color:#FFF;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box;border-bottom:1px solid #EBEEF5}.el-cascader__tags,.el-tag{-webkit-box-sizing:border-box}.el-collapse-item__content{padding-bottom:25px;font-size:13px;color:#303133;line-height:1.769230769230769}.el-collapse-item:last-child{margin-bottom:-1px}.el-popper .popper__arrow,.el-popper .popper__arrow::after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.el-popper .popper__arrow{border-width:6px;-webkit-filter:drop-shadow(0 2px 12px rgba(0, 0, 0, .03));filter:drop-shadow(0 2px 12px rgba(0, 0, 0, .03))}.el-popper .popper__arrow::after{content:" ";border-width:6px}.el-popper[x-placement^=top]{margin-bottom:12px}.el-popper[x-placement^=top] .popper__arrow{bottom:-6px;left:50%;margin-right:3px;border-top-color:#EBEEF5;border-bottom-width:0}.el-popper[x-placement^=top] .popper__arrow::after{bottom:1px;margin-left:-6px;border-top-color:#FFF;border-bottom-width:0}.el-popper[x-placement^=bottom]{margin-top:12px}.el-popper[x-placement^=bottom] .popper__arrow{top:-6px;left:50%;margin-right:3px;border-top-width:0;border-bottom-color:#EBEEF5}.el-popper[x-placement^=bottom] .popper__arrow::after{top:1px;margin-left:-6px;border-top-width:0;border-bottom-color:#FFF}.el-popper[x-placement^=right]{margin-left:12px}.el-popper[x-placement^=right] .popper__arrow{top:50%;left:-6px;margin-bottom:3px;border-right-color:#EBEEF5;border-left-width:0}.el-popper[x-placement^=right] .popper__arrow::after{bottom:-6px;left:1px;border-right-color:#FFF;border-left-width:0}.el-popper[x-placement^=left]{margin-right:12px}.el-popper[x-placement^=left] .popper__arrow{top:50%;right:-6px;margin-bottom:3px;border-right-width:0;border-left-color:#EBEEF5}.el-popper[x-placement^=left] .popper__arrow::after{right:1px;bottom:-6px;margin-left:-6px;border-right-width:0;border-left-color:#FFF}.el-tag{background-color:#ecf5ff;border-color:#d9ecff;display:inline-block;height:32px;padding:0 10px;line-height:30px;font-size:12px;color:#409EFF;border-width:1px;border-style:solid;border-radius:4px;box-sizing:border-box;white-space:nowrap}.el-tag.is-hit{border-color:#409EFF}.el-tag .el-tag__close{color:#409eff}.el-tag .el-tag__close:hover{color:#FFF;background-color:#409eff}.el-tag.el-tag--info{background-color:#f4f4f5;border-color:#e9e9eb;color:#909399}.el-tag.el-tag--info.is-hit{border-color:#909399}.el-tag.el-tag--info .el-tag__close{color:#909399}.el-tag.el-tag--info .el-tag__close:hover{color:#FFF;background-color:#909399}.el-tag.el-tag--success{background-color:#f0f9eb;border-color:#e1f3d8;color:#67c23a}.el-tag.el-tag--success.is-hit{border-color:#67C23A}.el-tag.el-tag--success .el-tag__close{color:#67c23a}.el-tag.el-tag--success .el-tag__close:hover{color:#FFF;background-color:#67c23a}.el-tag.el-tag--warning{background-color:#fdf6ec;border-color:#faecd8;color:#e6a23c}.el-tag.el-tag--warning.is-hit{border-color:#E6A23C}.el-tag.el-tag--warning .el-tag__close{color:#e6a23c}.el-tag.el-tag--warning .el-tag__close:hover{color:#FFF;background-color:#e6a23c}.el-tag.el-tag--danger{background-color:#fef0f0;border-color:#fde2e2;color:#f56c6c}.el-tag.el-tag--danger.is-hit{border-color:#F56C6C}.el-tag.el-tag--danger .el-tag__close{color:#f56c6c}.el-tag.el-tag--danger .el-tag__close:hover{color:#FFF;background-color:#f56c6c}.el-tag .el-icon-close{border-radius:50%;text-align:center;position:relative;cursor:pointer;font-size:12px;height:16px;width:16px;line-height:16px;vertical-align:middle;top:-1px;right:-5px}.el-tag .el-icon-close::before{display:block}.el-tag--dark{background-color:#409eff;border-color:#409eff;color:#fff}.el-tag--dark.is-hit{border-color:#409EFF}.el-tag--dark .el-tag__close{color:#fff}.el-tag--dark .el-tag__close:hover{color:#FFF;background-color:#66b1ff}.el-tag--dark.el-tag--info{background-color:#909399;border-color:#909399;color:#fff}.el-tag--dark.el-tag--info.is-hit{border-color:#909399}.el-tag--dark.el-tag--info .el-tag__close{color:#fff}.el-tag--dark.el-tag--info .el-tag__close:hover{color:#FFF;background-color:#a6a9ad}.el-tag--dark.el-tag--success{background-color:#67c23a;border-color:#67c23a;color:#fff}.el-tag--dark.el-tag--success.is-hit{border-color:#67C23A}.el-tag--dark.el-tag--success .el-tag__close{color:#fff}.el-tag--dark.el-tag--success .el-tag__close:hover{color:#FFF;background-color:#85ce61}.el-tag--dark.el-tag--warning{background-color:#e6a23c;border-color:#e6a23c;color:#fff}.el-tag--dark.el-tag--warning.is-hit{border-color:#E6A23C}.el-tag--dark.el-tag--warning .el-tag__close{color:#fff}.el-tag--dark.el-tag--warning .el-tag__close:hover{color:#FFF;background-color:#ebb563}.el-tag--dark.el-tag--danger{background-color:#f56c6c;border-color:#f56c6c;color:#fff}.el-tag--dark.el-tag--danger.is-hit{border-color:#F56C6C}.el-tag--dark.el-tag--danger .el-tag__close{color:#fff}.el-tag--dark.el-tag--danger .el-tag__close:hover{color:#FFF;background-color:#f78989}.el-tag--plain{background-color:#fff;border-color:#b3d8ff;color:#409eff}.el-tag--plain.is-hit{border-color:#409EFF}.el-tag--plain .el-tag__close{color:#409eff}.el-tag--plain .el-tag__close:hover{color:#FFF;background-color:#409eff}.el-tag--plain.el-tag--info{background-color:#fff;border-color:#d3d4d6;color:#909399}.el-tag--plain.el-tag--info.is-hit{border-color:#909399}.el-tag--plain.el-tag--info .el-tag__close{color:#909399}.el-tag--plain.el-tag--info .el-tag__close:hover{color:#FFF;background-color:#909399}.el-tag--plain.el-tag--success{background-color:#fff;border-color:#c2e7b0;color:#67c23a}.el-tag--plain.el-tag--success.is-hit{border-color:#67C23A}.el-tag--plain.el-tag--success .el-tag__close{color:#67c23a}.el-tag--plain.el-tag--success .el-tag__close:hover{color:#FFF;background-color:#67c23a}.el-tag--plain.el-tag--warning{background-color:#fff;border-color:#f5dab1;color:#e6a23c}.el-tag--plain.el-tag--warning.is-hit{border-color:#E6A23C}.el-tag--plain.el-tag--warning .el-tag__close{color:#e6a23c}.el-tag--plain.el-tag--warning .el-tag__close:hover{color:#FFF;background-color:#e6a23c}.el-tag--plain.el-tag--danger{background-color:#fff;border-color:#fbc4c4;color:#f56c6c}.el-tag--plain.el-tag--danger.is-hit{border-color:#F56C6C}.el-tag--plain.el-tag--danger .el-tag__close{color:#f56c6c}.el-tag--plain.el-tag--danger .el-tag__close:hover{color:#FFF;background-color:#f56c6c}.el-tag--medium{height:28px;line-height:26px}.el-tag--medium .el-icon-close{-webkit-transform:scale(.8);transform:scale(.8)}.el-tag--small{height:24px;padding:0 8px;line-height:22px}.el-tag--small .el-icon-close{-webkit-transform:scale(.8);transform:scale(.8)}.el-tag--mini{height:20px;padding:0 5px;line-height:19px}.el-tag--mini .el-icon-close{margin-left:-3px;-webkit-transform:scale(.7);transform:scale(.7)}.el-cascader{display:inline-block;position:relative;font-size:14px;line-height:40px}.el-cascader:not(.is-disabled):hover .el-input__inner{cursor:pointer;border-color:#C0C4CC}.el-cascader .el-input .el-input__inner:focus,.el-cascader .el-input.is-focus .el-input__inner{border-color:#409EFF}.el-cascader .el-input{cursor:pointer}.el-cascader .el-input .el-input__inner{text-overflow:ellipsis}.el-cascader .el-input .el-icon-arrow-down{-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;font-size:14px}.el-cascader .el-input .el-icon-arrow-down.is-reverse{-webkit-transform:rotateZ(180deg);transform:rotateZ(180deg)}.el-cascader .el-input .el-icon-circle-close:hover{color:#909399}.el-cascader--medium{font-size:14px;line-height:36px}.el-cascader--small{font-size:13px;line-height:32px}.el-cascader--mini{font-size:12px;line-height:28px}.el-cascader.is-disabled .el-cascader__label{z-index:2;color:#C0C4CC}.el-cascader__dropdown{margin:5px 0;font-size:14px;background:#FFF;border:1px solid #E4E7ED;border-radius:4px;-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px 0 rgba(0,0,0,.1)}.el-cascader__tags{position:absolute;left:0;right:30px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;line-height:normal;text-align:left;box-sizing:border-box}.el-cascader__tags .el-tag{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;max-width:100%;margin:2px 0 2px 6px;text-overflow:ellipsis;background:#f0f2f5}.el-cascader__tags .el-tag:not(.is-hit){border-color:transparent}.el-cascader__tags .el-tag>span{-webkit-box-flex:1;-ms-flex:1;flex:1;overflow:hidden;text-overflow:ellipsis}.el-cascader__tags .el-tag .el-icon-close{-webkit-box-flex:0;-ms-flex:none;flex:none;background-color:#C0C4CC;color:#FFF}.el-cascader__tags .el-tag .el-icon-close:hover{background-color:#909399}.el-cascader__suggestion-panel{border-radius:4px}.el-cascader__suggestion-list{max-height:204px;margin:0;padding:6px 0;font-size:14px;color:#606266;text-align:center}.el-cascader__suggestion-item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:34px;padding:0 15px;text-align:left;outline:0;cursor:pointer}.el-cascader__suggestion-item:focus,.el-cascader__suggestion-item:hover{background:#F5F7FA}.el-cascader__suggestion-item.is-checked{color:#409EFF;font-weight:700}.el-cascader__suggestion-item>span{margin-right:10px}.el-cascader__empty-text{margin:10px 0;color:#C0C4CC}.el-cascader__search-input{-webkit-box-flex:1;-ms-flex:1;flex:1;height:24px;min-width:60px;margin:2px 0 2px 15px;padding:0;color:#606266;border:none;outline:0;-webkit-box-sizing:border-box;box-sizing:border-box}.el-cascader__search-input::-webkit-input-placeholder{color:#C0C4CC}.el-cascader__search-input:-ms-input-placeholder{color:#C0C4CC}.el-cascader__search-input::-ms-input-placeholder{color:#C0C4CC}.el-cascader__search-input::placeholder{color:#C0C4CC}.el-color-predefine{display:-webkit-box;display:-ms-flexbox;display:flex;font-size:12px;margin-top:8px;width:280px}.el-color-predefine__colors{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-ms-flex-wrap:wrap;flex-wrap:wrap}.el-color-predefine__color-selector{margin:0 0 8px 8px;width:20px;height:20px;border-radius:4px;cursor:pointer}.el-color-predefine__color-selector:nth-child(10n+1){margin-left:0}.el-color-predefine__color-selector.selected{-webkit-box-shadow:0 0 3px 2px #409EFF;box-shadow:0 0 3px 2px #409EFF}.el-color-predefine__color-selector>div{display:-webkit-box;display:-ms-flexbox;display:flex;height:100%;border-radius:3px}.el-color-predefine__color-selector.is-alpha{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)}.el-color-hue-slider{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;width:280px;height:12px;background-color:red;padding:0 2px}.el-color-hue-slider__bar{position:relative;background:-webkit-gradient(linear,left top,right top,from(red),color-stop(17%,#ff0),color-stop(33%,#0f0),color-stop(50%,#0ff),color-stop(67%,#00f),color-stop(83%,#f0f),to(red));background:linear-gradient(to right,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%);height:100%}.el-color-hue-slider__thumb{position:absolute;cursor:pointer;-webkit-box-sizing:border-box;box-sizing:border-box;left:0;top:0;width:4px;height:100%;border-radius:1px;background:#fff;border:1px solid #f0f0f0;-webkit-box-shadow:0 0 2px rgba(0,0,0,.6);box-shadow:0 0 2px rgba(0,0,0,.6);z-index:1}.el-color-hue-slider.is-vertical{width:12px;height:180px;padding:2px 0}.el-color-hue-slider.is-vertical .el-color-hue-slider__bar{background:-webkit-gradient(linear,left top,left bottom,from(red),color-stop(17%,#ff0),color-stop(33%,#0f0),color-stop(50%,#0ff),color-stop(67%,#00f),color-stop(83%,#f0f),to(red));background:linear-gradient(to bottom,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}.el-color-hue-slider.is-vertical .el-color-hue-slider__thumb{left:0;top:0;width:100%;height:4px}.el-color-svpanel{position:relative;width:280px;height:180px}.el-color-svpanel__black,.el-color-svpanel__white{position:absolute;top:0;left:0;right:0;bottom:0}.el-color-svpanel__white{background:-webkit-gradient(linear,left top,right top,from(#fff),to(rgba(255,255,255,0)));background:linear-gradient(to right,#fff,rgba(255,255,255,0))}.el-color-svpanel__black{background:-webkit-gradient(linear,left bottom,left top,from(#000),to(rgba(0,0,0,0)));background:linear-gradient(to top,#000,rgba(0,0,0,0))}.el-color-svpanel__cursor{position:absolute}.el-color-svpanel__cursor>div{cursor:head;width:4px;height:4px;-webkit-box-shadow:0 0 0 1.5px #fff,inset 0 0 1px 1px rgba(0,0,0,.3),0 0 1px 2px rgba(0,0,0,.4);box-shadow:0 0 0 1.5px #fff,inset 0 0 1px 1px rgba(0,0,0,.3),0 0 1px 2px rgba(0,0,0,.4);border-radius:50%;-webkit-transform:translate(-2px,-2px);transform:translate(-2px,-2px)}.el-color-alpha-slider{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;width:280px;height:12px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)}.el-color-alpha-slider__bar{position:relative;background:-webkit-gradient(linear,left top,right top,from(rgba(255,255,255,0)),to(white));background:linear-gradient(to right,rgba(255,255,255,0) 0,#fff 100%);height:100%}.el-color-alpha-slider__thumb{position:absolute;cursor:pointer;-webkit-box-sizing:border-box;box-sizing:border-box;left:0;top:0;width:4px;height:100%;border-radius:1px;background:#fff;border:1px solid #f0f0f0;-webkit-box-shadow:0 0 2px rgba(0,0,0,.6);box-shadow:0 0 2px rgba(0,0,0,.6);z-index:1}.el-color-alpha-slider.is-vertical{width:20px;height:180px}.el-color-alpha-slider.is-vertical .el-color-alpha-slider__bar{background:-webkit-gradient(linear,left top,left bottom,from(rgba(255,255,255,0)),to(white));background:linear-gradient(to bottom,rgba(255,255,255,0) 0,#fff 100%)}.el-color-alpha-slider.is-vertical .el-color-alpha-slider__thumb{left:0;top:0;width:100%;height:4px}.el-color-dropdown{width:300px}.el-color-dropdown__main-wrapper{margin-bottom:6px}.el-color-dropdown__main-wrapper::after{content:"";display:table;clear:both}.el-color-dropdown__btns{margin-top:6px;text-align:right}.el-color-dropdown__value{float:left;line-height:26px;font-size:12px;color:#000;width:160px}.el-color-dropdown__btn{border:1px solid #dcdcdc;color:#333;line-height:24px;border-radius:2px;padding:0 20px;cursor:pointer;background-color:transparent;outline:0;font-size:12px}.el-color-dropdown__btn[disabled]{color:#ccc;cursor:not-allowed}.el-color-dropdown__btn:hover{color:#409EFF;border-color:#409EFF}.el-color-dropdown__link-btn{cursor:pointer;color:#409EFF;text-decoration:none;padding:15px;font-size:12px}.el-color-dropdown__link-btn:hover{color:tint(#409EFF,20%)}.el-color-picker{display:inline-block;position:relative;line-height:normal;height:40px}.el-color-picker.is-disabled .el-color-picker__trigger{cursor:not-allowed}.el-color-picker--medium{height:36px}.el-color-picker--medium .el-color-picker__trigger{height:36px;width:36px}.el-color-picker--medium .el-color-picker__mask{height:34px;width:34px}.el-color-picker--small{height:32px}.el-color-picker--small .el-color-picker__trigger{height:32px;width:32px}.el-color-picker--small .el-color-picker__mask{height:30px;width:30px}.el-color-picker--small .el-color-picker__empty,.el-color-picker--small .el-color-picker__icon{-webkit-transform:translate3d(-50%,-50%,0) scale(.8);transform:translate3d(-50%,-50%,0) scale(.8)}.el-color-picker--mini{height:28px}.el-color-picker--mini .el-color-picker__trigger{height:28px;width:28px}.el-color-picker--mini .el-color-picker__mask{height:26px;width:26px}.el-color-picker--mini .el-color-picker__empty,.el-color-picker--mini .el-color-picker__icon{-webkit-transform:translate3d(-50%,-50%,0) scale(.8);transform:translate3d(-50%,-50%,0) scale(.8)}.el-color-picker__mask{height:38px;width:38px;border-radius:4px;position:absolute;top:1px;left:1px;z-index:1;cursor:not-allowed;background-color:rgba(255,255,255,.7)}.el-color-picker__trigger{display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;height:40px;width:40px;padding:4px;border:1px solid #e6e6e6;border-radius:4px;font-size:0;position:relative;cursor:pointer}.el-color-picker__color{position:relative;display:block;-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid #999;border-radius:2px;width:100%;height:100%;text-align:center}.el-color-picker__color.is-alpha{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)}.el-color-picker__color-inner{position:absolute;left:0;top:0;right:0;bottom:0}.el-color-picker__empty,.el-color-picker__icon{top:50%;left:50%;font-size:12px;position:absolute}.el-color-picker__empty{color:#999;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0)}.el-color-picker__icon{display:inline-block;width:100%;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0);color:#FFF;text-align:center}.el-color-picker__panel{position:absolute;z-index:10;padding:6px;-webkit-box-sizing:content-box;box-sizing:content-box;background-color:#FFF;border:1px solid #EBEEF5;border-radius:4px;-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px 0 rgba(0,0,0,.1)}.el-textarea{position:relative;display:inline-block;width:100%;vertical-align:bottom;font-size:14px}.el-textarea__inner{display:block;resize:vertical;padding:5px 15px;line-height:1.5;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;font-size:inherit;color:#606266;background-color:#FFF;background-image:none;border:1px solid #DCDFE6;border-radius:4px;-webkit-transition:border-color .2s cubic-bezier(.645,.045,.355,1);transition:border-color .2s cubic-bezier(.645,.045,.355,1)}.el-textarea__inner::-webkit-input-placeholder{color:#C0C4CC}.el-textarea__inner:-ms-input-placeholder{color:#C0C4CC}.el-textarea__inner::-ms-input-placeholder{color:#C0C4CC}.el-textarea__inner::placeholder{color:#C0C4CC}.el-textarea__inner:hover{border-color:#C0C4CC}.el-textarea__inner:focus{outline:0;border-color:#409EFF}.el-textarea .el-input__count{color:#909399;background:#FFF;position:absolute;font-size:12px;bottom:5px;right:10px}.el-textarea.is-disabled .el-textarea__inner{background-color:#F5F7FA;border-color:#E4E7ED;color:#C0C4CC;cursor:not-allowed}.el-textarea.is-disabled .el-textarea__inner::-webkit-input-placeholder{color:#C0C4CC}.el-textarea.is-disabled .el-textarea__inner:-ms-input-placeholder{color:#C0C4CC}.el-textarea.is-disabled .el-textarea__inner::-ms-input-placeholder{color:#C0C4CC}.el-textarea.is-disabled .el-textarea__inner::placeholder{color:#C0C4CC}.el-textarea.is-exceed .el-textarea__inner{border-color:#F56C6C}.el-textarea.is-exceed .el-input__count{color:#F56C6C}.el-input{position:relative;font-size:14px;display:inline-block;width:100%}.el-input::-webkit-scrollbar{z-index:11;width:6px}.el-input::-webkit-scrollbar:horizontal{height:6px}.el-input::-webkit-scrollbar-thumb{border-radius:5px;width:6px;background:#b4bccc}.el-input::-webkit-scrollbar-corner{background:#fff}.el-input::-webkit-scrollbar-track{background:#fff}.el-input::-webkit-scrollbar-track-piece{background:#fff;width:6px}.el-input .el-input__clear{color:#C0C4CC;font-size:14px;cursor:pointer;-webkit-transition:color .2s cubic-bezier(.645,.045,.355,1);transition:color .2s cubic-bezier(.645,.045,.355,1)}.el-input .el-input__clear:hover{color:#909399}.el-input .el-input__count{height:100%;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#909399;font-size:12px}.el-input .el-input__count .el-input__count-inner{background:#FFF;line-height:initial;display:inline-block;padding:0 5px}.el-input__inner{-webkit-appearance:none;background-color:#FFF;background-image:none;border-radius:4px;border:1px solid #DCDFE6;-webkit-box-sizing:border-box;box-sizing:border-box;color:#606266;display:inline-block;font-size:inherit;height:40px;line-height:40px;outline:0;padding:0 15px;-webkit-transition:border-color .2s cubic-bezier(.645,.045,.355,1);transition:border-color .2s cubic-bezier(.645,.045,.355,1);width:100%}.el-input__prefix,.el-input__suffix{position:absolute;top:0;-webkit-transition:all .3s;height:100%;color:#C0C4CC;text-align:center}.el-input__inner::-webkit-input-placeholder{color:#C0C4CC}.el-input__inner:-ms-input-placeholder{color:#C0C4CC}.el-input__inner::-ms-input-placeholder{color:#C0C4CC}.el-input__inner::placeholder{color:#C0C4CC}.el-input__inner:hover{border-color:#C0C4CC}.el-input.is-active .el-input__inner,.el-input__inner:focus{border-color:#409EFF;outline:0}.el-input__suffix{right:5px;transition:all .3s}.el-input__suffix-inner{pointer-events:all}.el-input__prefix{left:5px;transition:all .3s}.el-input__icon{height:100%;width:25px;text-align:center;-webkit-transition:all .3s;transition:all .3s;line-height:40px}.el-input__icon:after{content:'';height:100%;width:0;display:inline-block;vertical-align:middle}.el-input__validateIcon{pointer-events:none}.el-input.is-disabled .el-input__inner{background-color:#F5F7FA;border-color:#E4E7ED;color:#C0C4CC;cursor:not-allowed}.el-input.is-disabled .el-input__inner::-webkit-input-placeholder{color:#C0C4CC}.el-input.is-disabled .el-input__inner:-ms-input-placeholder{color:#C0C4CC}.el-input.is-disabled .el-input__inner::-ms-input-placeholder{color:#C0C4CC}.el-input.is-disabled .el-input__inner::placeholder{color:#C0C4CC}.el-input.is-disabled .el-input__icon{cursor:not-allowed}.el-link,.el-transfer-panel__filter .el-icon-circle-close{cursor:pointer}.el-input.is-exceed .el-input__inner{border-color:#F56C6C}.el-input.is-exceed .el-input__suffix .el-input__count{color:#F56C6C}.el-input--suffix .el-input__inner{padding-right:30px}.el-input--prefix .el-input__inner{padding-left:30px}.el-input--medium{font-size:14px}.el-input--medium .el-input__inner{height:36px;line-height:36px}.el-input--medium .el-input__icon{line-height:36px}.el-input--small{font-size:13px}.el-input--small .el-input__inner{height:32px;line-height:32px}.el-input--small .el-input__icon{line-height:32px}.el-input--mini{font-size:12px}.el-input--mini .el-input__inner{height:28px;line-height:28px}.el-input--mini .el-input__icon{line-height:28px}.el-input-group{line-height:normal;display:inline-table;width:100%;border-collapse:separate;border-spacing:0}.el-input-group>.el-input__inner{vertical-align:middle;display:table-cell}.el-input-group__append,.el-input-group__prepend{background-color:#F5F7FA;color:#909399;vertical-align:middle;display:table-cell;position:relative;border:1px solid #DCDFE6;border-radius:4px;padding:0 20px;width:1px;white-space:nowrap}.el-input-group--prepend .el-input__inner,.el-input-group__append{border-top-left-radius:0;border-bottom-left-radius:0}.el-input-group--append .el-input__inner,.el-input-group__prepend{border-top-right-radius:0;border-bottom-right-radius:0}.el-input-group__append:focus,.el-input-group__prepend:focus{outline:0}.el-input-group__append .el-button,.el-input-group__append .el-select,.el-input-group__prepend .el-button,.el-input-group__prepend .el-select{display:inline-block;margin:-10px -20px}.el-input-group__append button.el-button,.el-input-group__append div.el-select .el-input__inner,.el-input-group__append div.el-select:hover .el-input__inner,.el-input-group__prepend button.el-button,.el-input-group__prepend div.el-select .el-input__inner,.el-input-group__prepend div.el-select:hover .el-input__inner{border-color:transparent;background-color:transparent;color:inherit;border-top:0;border-bottom:0}.el-input-group__append .el-button,.el-input-group__append .el-input,.el-input-group__prepend .el-button,.el-input-group__prepend .el-input{font-size:inherit}.el-input-group__prepend{border-right:0}.el-input-group__append{border-left:0}.el-input-group--append .el-select .el-input.is-focus .el-input__inner,.el-input-group--prepend .el-select .el-input.is-focus .el-input__inner{border-color:transparent}.el-input__inner::-ms-clear{display:none;width:0;height:0}.el-transfer{font-size:14px}.el-transfer__buttons{display:inline-block;vertical-align:middle;padding:0 30px}.el-transfer__button{display:block;margin:0 auto;padding:10px;border-radius:50%;color:#FFF;background-color:#409EFF;font-size:0}.el-transfer__button.is-with-texts{border-radius:4px}.el-transfer__button.is-disabled,.el-transfer__button.is-disabled:hover{border:1px solid #DCDFE6;background-color:#F5F7FA;color:#C0C4CC}.el-transfer__button:first-child{margin-bottom:10px}.el-transfer__button:nth-child(2){margin:0}.el-transfer__button i,.el-transfer__button span{font-size:14px}.el-transfer__button [class*=el-icon-]+span{margin-left:0}.el-transfer-panel{border:1px solid #EBEEF5;border-radius:4px;overflow:hidden;background:#FFF;display:inline-block;vertical-align:middle;width:200px;max-height:100%;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative}.el-transfer-panel__body{height:246px}.el-transfer-panel__body.is-with-footer{padding-bottom:40px}.el-transfer-panel__list{margin:0;padding:6px 0;list-style:none;height:246px;overflow:auto;-webkit-box-sizing:border-box;box-sizing:border-box}.el-transfer-panel__list.is-filterable{height:194px;padding-top:0}.el-transfer-panel__item{height:30px;line-height:30px;padding-left:15px;display:block}.el-transfer-panel__item+.el-transfer-panel__item{margin-left:0;display:block!important}.el-transfer-panel__item.el-checkbox{color:#606266}.el-transfer-panel__item:hover{color:#409EFF}.el-transfer-panel__item.el-checkbox .el-checkbox__label{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;-webkit-box-sizing:border-box;box-sizing:border-box;padding-left:24px;line-height:30px}.el-transfer-panel__item .el-checkbox__input{position:absolute;top:8px}.el-transfer-panel__filter{text-align:center;margin:15px;-webkit-box-sizing:border-box;box-sizing:border-box;display:block;width:auto}.el-transfer-panel__filter .el-input__inner{height:32px;width:100%;font-size:12px;display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:16px;padding-right:10px;padding-left:30px}.el-transfer-panel__filter .el-input__icon{margin-left:5px}.el-transfer-panel .el-transfer-panel__header{height:40px;line-height:40px;background:#F5F7FA;margin:0;padding-left:15px;border-bottom:1px solid #EBEEF5;-webkit-box-sizing:border-box;box-sizing:border-box;color:#000}.el-transfer-panel .el-transfer-panel__header .el-checkbox{display:block;line-height:40px}.el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label{font-size:16px;color:#303133;font-weight:400}.el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label span{position:absolute;right:15px;color:#909399;font-size:12px;font-weight:400}.el-divider__text,.el-link{font-weight:500;font-size:14px}.el-transfer-panel .el-transfer-panel__footer{height:40px;background:#FFF;margin:0;padding:0;border-top:1px solid #EBEEF5;position:absolute;bottom:0;left:0;width:100%;z-index:1}.el-transfer-panel .el-transfer-panel__footer::after{display:inline-block;content:"";height:100%;vertical-align:middle}.el-container,.el-timeline-item__node{display:-webkit-box;display:-ms-flexbox}.el-transfer-panel .el-transfer-panel__footer .el-checkbox{padding-left:20px;color:#606266}.el-transfer-panel .el-transfer-panel__empty{margin:0;height:30px;line-height:30px;padding:6px 15px 0;color:#909399;text-align:center}.el-transfer-panel .el-checkbox__label{padding-left:8px}.el-transfer-panel .el-checkbox__inner{height:14px;width:14px;border-radius:3px}.el-transfer-panel .el-checkbox__inner::after{height:6px;width:3px;left:4px}.el-container{display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-flex:1;-ms-flex:1;flex:1;-ms-flex-preferred-size:auto;flex-basis:auto;-webkit-box-sizing:border-box;box-sizing:border-box;min-width:0}.el-container.is-vertical,.el-drawer{-webkit-box-orient:vertical;-webkit-box-direction:normal}.el-aside,.el-header{-webkit-box-sizing:border-box}.el-container.is-vertical{-ms-flex-direction:column;flex-direction:column}.el-header{padding:0 20px;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0}.el-aside{overflow:auto;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0}.el-footer,.el-main{-webkit-box-sizing:border-box}.el-main{display:block;-webkit-box-flex:1;-ms-flex:1;flex:1;-ms-flex-preferred-size:auto;flex-basis:auto;overflow:auto;box-sizing:border-box;padding:20px}.el-footer{padding:0 20px;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0}.el-timeline{margin:0;font-size:14px;list-style:none}.el-timeline .el-timeline-item:last-child .el-timeline-item__tail{display:none}.el-timeline-item{position:relative;padding-bottom:20px}.el-timeline-item__wrapper{position:relative;padding-left:28px;top:-3px}.el-timeline-item__tail{position:absolute;left:4px;height:100%;border-left:2px solid #E4E7ED}.el-timeline-item__icon{color:#FFF;font-size:13px}.el-timeline-item__node{position:absolute;background-color:#E4E7ED;border-radius:50%;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.el-image__error,.el-timeline-item__dot{display:-webkit-box;display:-ms-flexbox}.el-timeline-item__node--normal{left:-1px;width:12px;height:12px}.el-timeline-item__node--large{left:-2px;width:14px;height:14px}.el-timeline-item__node--primary{background-color:#409EFF}.el-timeline-item__node--success{background-color:#67C23A}.el-timeline-item__node--warning{background-color:#E6A23C}.el-timeline-item__node--danger{background-color:#F56C6C}.el-timeline-item__node--info{background-color:#909399}.el-timeline-item__dot{position:absolute;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.el-timeline-item__content{color:#303133}.el-timeline-item__timestamp{color:#909399;line-height:1;font-size:13px}.el-timeline-item__timestamp.is-top{margin-bottom:8px;padding-top:4px}.el-timeline-item__timestamp.is-bottom{margin-top:8px}.el-link{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;vertical-align:middle;position:relative;text-decoration:none;outline:0;padding:0}.el-link.is-underline:hover:after{content:"";position:absolute;left:0;right:0;height:0;bottom:0;border-bottom:1px solid #409EFF}.el-link.el-link--default:after,.el-link.el-link--primary.is-underline:hover:after,.el-link.el-link--primary:after{border-color:#409EFF}.el-link.is-disabled{cursor:not-allowed}.el-link [class*=el-icon-]+span{margin-left:5px}.el-link.el-link--default{color:#606266}.el-link.el-link--default:hover{color:#409EFF}.el-link.el-link--default.is-disabled{color:#C0C4CC}.el-link.el-link--primary{color:#409EFF}.el-link.el-link--primary:hover{color:#66b1ff}.el-link.el-link--primary.is-disabled{color:#a0cfff}.el-link.el-link--danger.is-underline:hover:after,.el-link.el-link--danger:after{border-color:#F56C6C}.el-link.el-link--danger{color:#F56C6C}.el-link.el-link--danger:hover{color:#f78989}.el-link.el-link--danger.is-disabled{color:#fab6b6}.el-link.el-link--success.is-underline:hover:after,.el-link.el-link--success:after{border-color:#67C23A}.el-link.el-link--success{color:#67C23A}.el-link.el-link--success:hover{color:#85ce61}.el-link.el-link--success.is-disabled{color:#b3e19d}.el-link.el-link--warning.is-underline:hover:after,.el-link.el-link--warning:after{border-color:#E6A23C}.el-link.el-link--warning{color:#E6A23C}.el-link.el-link--warning:hover{color:#ebb563}.el-link.el-link--warning.is-disabled{color:#f3d19e}.el-link.el-link--info.is-underline:hover:after,.el-link.el-link--info:after{border-color:#909399}.el-link.el-link--info{color:#909399}.el-link.el-link--info:hover{color:#a6a9ad}.el-link.el-link--info.is-disabled{color:#c8c9cc}.el-divider{background-color:#DCDFE6;position:relative}.el-divider--horizontal{display:block;height:1px;width:100%;margin:24px 0}.el-divider--vertical{display:inline-block;width:1px;height:1em;margin:0 8px;vertical-align:middle;position:relative}.el-divider__text{position:absolute;background-color:#FFF;padding:0 20px;color:#303133}.el-image__error,.el-image__placeholder{background:#F5F7FA}.el-divider__text.is-left{left:20px;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.el-divider__text.is-center{left:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}.el-divider__text.is-right{right:20px;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.el-image__error,.el-image__inner,.el-image__placeholder{width:100%;height:100%}.el-image{position:relative;display:inline-block;overflow:hidden}.el-image__inner{vertical-align:top}.el-image__inner--center{position:relative;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);display:block}.el-image__error{display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:14px;color:#C0C4CC;vertical-align:middle}.el-image__preview{cursor:pointer}.el-image-viewer__wrapper{position:fixed;top:0;right:0;bottom:0;left:0}.el-image-viewer__btn{position:absolute;z-index:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;border-radius:50%;opacity:.8;cursor:pointer;-webkit-box-sizing:border-box;box-sizing:border-box;user-select:none}.el-button,.el-checkbox{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.el-image-viewer__close{top:40px;right:40px;width:40px;height:40px;font-size:40px}.el-image-viewer__canvas{width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.el-image-viewer__actions{left:50%;bottom:30px;-webkit-transform:translateX(-50%);transform:translateX(-50%);width:282px;height:44px;padding:0 23px;background-color:#606266;border-color:#fff;border-radius:22px}.el-image-viewer__actions__inner{width:100%;height:100%;text-align:justify;cursor:default;font-size:23px;color:#fff;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-pack:distribute;justify-content:space-around}.el-image-viewer__next,.el-image-viewer__prev{top:50%;width:44px;height:44px;font-size:24px;color:#fff;background-color:#606266;border-color:#fff}.el-image-viewer__prev{-webkit-transform:translateY(-50%);transform:translateY(-50%);left:40px}.el-image-viewer__next{-webkit-transform:translateY(-50%);transform:translateY(-50%);right:40px;text-indent:2px}.el-image-viewer__mask{position:absolute;width:100%;height:100%;top:0;left:0;opacity:.5;background:#000}.viewer-fade-enter-active{-webkit-animation:viewer-fade-in .3s;animation:viewer-fade-in .3s}.viewer-fade-leave-active{-webkit-animation:viewer-fade-out .3s;animation:viewer-fade-out .3s}@-webkit-keyframes viewer-fade-in{0%{-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0);opacity:0}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}@keyframes viewer-fade-in{0%{-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0);opacity:0}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}@-webkit-keyframes viewer-fade-out{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}100%{-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0);opacity:0}}@keyframes viewer-fade-out{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}100%{-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0);opacity:0}}.el-button{display:inline-block;line-height:1;white-space:nowrap;cursor:pointer;background:#FFF;border:1px solid #DCDFE6;color:#606266;-webkit-appearance:none;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;outline:0;margin:0;-webkit-transition:.1s;transition:.1s;font-weight:500;padding:12px 20px;font-size:14px;border-radius:4px}.el-button+.el-button{margin-left:10px}.el-button:focus,.el-button:hover{color:#409EFF;border-color:#c6e2ff;background-color:#ecf5ff}.el-button:active{color:#3a8ee6;border-color:#3a8ee6;outline:0}.el-button::-moz-focus-inner{border:0}.el-button [class*=el-icon-]+span{margin-left:5px}.el-button.is-plain:focus,.el-button.is-plain:hover{background:#FFF;border-color:#409EFF;color:#409EFF}.el-button.is-active,.el-button.is-plain:active{color:#3a8ee6;border-color:#3a8ee6}.el-button.is-plain:active{background:#FFF;outline:0}.el-button.is-disabled,.el-button.is-disabled:focus,.el-button.is-disabled:hover{color:#C0C4CC;cursor:not-allowed;background-image:none;background-color:#FFF;border-color:#EBEEF5}.el-button.is-disabled.el-button--text{background-color:transparent}.el-button.is-disabled.is-plain,.el-button.is-disabled.is-plain:focus,.el-button.is-disabled.is-plain:hover{background-color:#FFF;border-color:#EBEEF5;color:#C0C4CC}.el-button.is-loading{position:relative;pointer-events:none}.el-button.is-loading:before{pointer-events:none;content:'';position:absolute;left:-1px;top:-1px;right:-1px;bottom:-1px;border-radius:inherit;background-color:rgba(255,255,255,.35)}.el-button.is-round{border-radius:20px;padding:12px 23px}.el-button.is-circle{border-radius:50%;padding:12px}.el-button--primary{color:#FFF;background-color:#409EFF;border-color:#409EFF}.el-button--primary:focus,.el-button--primary:hover{background:#66b1ff;border-color:#66b1ff;color:#FFF}.el-button--primary.is-active,.el-button--primary:active{background:#3a8ee6;border-color:#3a8ee6;color:#FFF}.el-button--primary:active{outline:0}.el-button--primary.is-disabled,.el-button--primary.is-disabled:active,.el-button--primary.is-disabled:focus,.el-button--primary.is-disabled:hover{color:#FFF;background-color:#a0cfff;border-color:#a0cfff}.el-button--primary.is-plain{color:#409EFF;background:#ecf5ff;border-color:#b3d8ff}.el-button--primary.is-plain:focus,.el-button--primary.is-plain:hover{background:#409EFF;border-color:#409EFF;color:#FFF}.el-button--primary.is-plain:active{background:#3a8ee6;border-color:#3a8ee6;color:#FFF;outline:0}.el-button--primary.is-plain.is-disabled,.el-button--primary.is-plain.is-disabled:active,.el-button--primary.is-plain.is-disabled:focus,.el-button--primary.is-plain.is-disabled:hover{color:#8cc5ff;background-color:#ecf5ff;border-color:#d9ecff}.el-button--success{color:#FFF;background-color:#67C23A;border-color:#67C23A}.el-button--success:focus,.el-button--success:hover{background:#85ce61;border-color:#85ce61;color:#FFF}.el-button--success.is-active,.el-button--success:active{background:#5daf34;border-color:#5daf34;color:#FFF}.el-button--success:active{outline:0}.el-button--success.is-disabled,.el-button--success.is-disabled:active,.el-button--success.is-disabled:focus,.el-button--success.is-disabled:hover{color:#FFF;background-color:#b3e19d;border-color:#b3e19d}.el-button--success.is-plain{color:#67C23A;background:#f0f9eb;border-color:#c2e7b0}.el-button--success.is-plain:focus,.el-button--success.is-plain:hover{background:#67C23A;border-color:#67C23A;color:#FFF}.el-button--success.is-plain:active{background:#5daf34;border-color:#5daf34;color:#FFF;outline:0}.el-button--success.is-plain.is-disabled,.el-button--success.is-plain.is-disabled:active,.el-button--success.is-plain.is-disabled:focus,.el-button--success.is-plain.is-disabled:hover{color:#a4da89;background-color:#f0f9eb;border-color:#e1f3d8}.el-button--warning{color:#FFF;background-color:#E6A23C;border-color:#E6A23C}.el-button--warning:focus,.el-button--warning:hover{background:#ebb563;border-color:#ebb563;color:#FFF}.el-button--warning.is-active,.el-button--warning:active{background:#cf9236;border-color:#cf9236;color:#FFF}.el-button--warning:active{outline:0}.el-button--warning.is-disabled,.el-button--warning.is-disabled:active,.el-button--warning.is-disabled:focus,.el-button--warning.is-disabled:hover{color:#FFF;background-color:#f3d19e;border-color:#f3d19e}.el-button--warning.is-plain{color:#E6A23C;background:#fdf6ec;border-color:#f5dab1}.el-button--warning.is-plain:focus,.el-button--warning.is-plain:hover{background:#E6A23C;border-color:#E6A23C;color:#FFF}.el-button--warning.is-plain:active{background:#cf9236;border-color:#cf9236;color:#FFF;outline:0}.el-button--warning.is-plain.is-disabled,.el-button--warning.is-plain.is-disabled:active,.el-button--warning.is-plain.is-disabled:focus,.el-button--warning.is-plain.is-disabled:hover{color:#f0c78a;background-color:#fdf6ec;border-color:#faecd8}.el-button--danger{color:#FFF;background-color:#F56C6C;border-color:#F56C6C}.el-button--danger:focus,.el-button--danger:hover{background:#f78989;border-color:#f78989;color:#FFF}.el-button--danger.is-active,.el-button--danger:active{background:#dd6161;border-color:#dd6161;color:#FFF}.el-button--danger:active{outline:0}.el-button--danger.is-disabled,.el-button--danger.is-disabled:active,.el-button--danger.is-disabled:focus,.el-button--danger.is-disabled:hover{color:#FFF;background-color:#fab6b6;border-color:#fab6b6}.el-button--danger.is-plain{color:#F56C6C;background:#fef0f0;border-color:#fbc4c4}.el-button--danger.is-plain:focus,.el-button--danger.is-plain:hover{background:#F56C6C;border-color:#F56C6C;color:#FFF}.el-button--danger.is-plain:active{background:#dd6161;border-color:#dd6161;color:#FFF;outline:0}.el-button--danger.is-plain.is-disabled,.el-button--danger.is-plain.is-disabled:active,.el-button--danger.is-plain.is-disabled:focus,.el-button--danger.is-plain.is-disabled:hover{color:#f9a7a7;background-color:#fef0f0;border-color:#fde2e2}.el-button--info{color:#FFF;background-color:#909399;border-color:#909399}.el-button--info:focus,.el-button--info:hover{background:#a6a9ad;border-color:#a6a9ad;color:#FFF}.el-button--info.is-active,.el-button--info:active{background:#82848a;border-color:#82848a;color:#FFF}.el-button--info:active{outline:0}.el-button--info.is-disabled,.el-button--info.is-disabled:active,.el-button--info.is-disabled:focus,.el-button--info.is-disabled:hover{color:#FFF;background-color:#c8c9cc;border-color:#c8c9cc}.el-button--info.is-plain{color:#909399;background:#f4f4f5;border-color:#d3d4d6}.el-button--info.is-plain:focus,.el-button--info.is-plain:hover{background:#909399;border-color:#909399;color:#FFF}.el-button--info.is-plain:active{background:#82848a;border-color:#82848a;color:#FFF;outline:0}.el-button--info.is-plain.is-disabled,.el-button--info.is-plain.is-disabled:active,.el-button--info.is-plain.is-disabled:focus,.el-button--info.is-plain.is-disabled:hover{color:#bcbec2;background-color:#f4f4f5;border-color:#e9e9eb}.el-button--text,.el-button--text.is-disabled,.el-button--text.is-disabled:focus,.el-button--text.is-disabled:hover,.el-button--text:active{border-color:transparent}.el-button--medium{padding:10px 20px;font-size:14px;border-radius:4px}.el-button--mini,.el-button--small{font-size:12px;border-radius:3px}.el-button--medium.is-round{padding:10px 20px}.el-button--medium.is-circle{padding:10px}.el-button--small,.el-button--small.is-round{padding:9px 15px}.el-button--small.is-circle{padding:9px}.el-button--mini,.el-button--mini.is-round{padding:7px 15px}.el-button--mini.is-circle{padding:7px}.el-button--text{color:#409EFF;background:0 0;padding-left:0;padding-right:0}.el-button--text:focus,.el-button--text:hover{color:#66b1ff;border-color:transparent;background-color:transparent}.el-button--text:active{color:#3a8ee6;background-color:transparent}.el-button-group{display:inline-block;vertical-align:middle}.el-button-group::after,.el-button-group::before{display:table;content:""}.el-button-group::after{clear:both}.el-button-group>.el-button{float:left;position:relative}.el-button-group>.el-button+.el-button{margin-left:0}.el-button-group>.el-button.is-disabled{z-index:1}.el-button-group>.el-button:first-child{border-top-right-radius:0;border-bottom-right-radius:0}.el-button-group>.el-button:last-child{border-top-left-radius:0;border-bottom-left-radius:0}.el-button-group>.el-button:first-child:last-child{border-radius:4px}.el-button-group>.el-button:first-child:last-child.is-round{border-radius:20px}.el-button-group>.el-button:first-child:last-child.is-circle{border-radius:50%}.el-button-group>.el-button:not(:first-child):not(:last-child){border-radius:0}.el-button-group>.el-button:not(:last-child){margin-right:-1px}.el-button-group>.el-button.is-active,.el-button-group>.el-button:active,.el-button-group>.el-button:focus,.el-button-group>.el-button:hover{z-index:1}.el-button-group>.el-dropdown>.el-button{border-top-left-radius:0;border-bottom-left-radius:0;border-left-color:rgba(255,255,255,.5)}.el-button-group .el-button--primary:first-child{border-right-color:rgba(255,255,255,.5)}.el-button-group .el-button--primary:last-child{border-left-color:rgba(255,255,255,.5)}.el-button-group .el-button--primary:not(:first-child):not(:last-child){border-left-color:rgba(255,255,255,.5);border-right-color:rgba(255,255,255,.5)}.el-button-group .el-button--success:first-child{border-right-color:rgba(255,255,255,.5)}.el-button-group .el-button--success:last-child{border-left-color:rgba(255,255,255,.5)}.el-button-group .el-button--success:not(:first-child):not(:last-child){border-left-color:rgba(255,255,255,.5);border-right-color:rgba(255,255,255,.5)}.el-button-group .el-button--warning:first-child{border-right-color:rgba(255,255,255,.5)}.el-button-group .el-button--warning:last-child{border-left-color:rgba(255,255,255,.5)}.el-button-group .el-button--warning:not(:first-child):not(:last-child){border-left-color:rgba(255,255,255,.5);border-right-color:rgba(255,255,255,.5)}.el-button-group .el-button--danger:first-child{border-right-color:rgba(255,255,255,.5)}.el-button-group .el-button--danger:last-child{border-left-color:rgba(255,255,255,.5)}.el-button-group .el-button--danger:not(:first-child):not(:last-child){border-left-color:rgba(255,255,255,.5);border-right-color:rgba(255,255,255,.5)}.el-button-group .el-button--info:first-child{border-right-color:rgba(255,255,255,.5)}.el-button-group .el-button--info:last-child{border-left-color:rgba(255,255,255,.5)}.el-button-group .el-button--info:not(:first-child):not(:last-child){border-left-color:rgba(255,255,255,.5);border-right-color:rgba(255,255,255,.5)}.el-calendar{background-color:#fff}.el-calendar__header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:12px 20px;border-bottom:1px solid #EBEEF5}.el-backtop,.el-page-header{display:-webkit-box;display:-ms-flexbox}.el-calendar__title{color:#000;-ms-flex-item-align:center;align-self:center}.el-calendar__body{padding:12px 20px 35px}.el-calendar-table{table-layout:fixed;width:100%}.el-calendar-table thead th{padding:12px 0;color:#606266;font-weight:400}.el-calendar-table:not(.is-range) td.next,.el-calendar-table:not(.is-range) td.prev{color:#C0C4CC}.el-backtop,.el-calendar-table td.is-today{color:#409EFF}.el-calendar-table td{border-bottom:1px solid #EBEEF5;border-right:1px solid #EBEEF5;vertical-align:top;-webkit-transition:background-color .2s ease;transition:background-color .2s ease}.el-calendar-table td.is-selected{background-color:#F2F8FE}.el-calendar-table tr:first-child td{border-top:1px solid #EBEEF5}.el-calendar-table tr td:first-child{border-left:1px solid #EBEEF5}.el-calendar-table tr.el-calendar-table__row--hide-border td{border-top:none}.el-calendar-table .el-calendar-day{-webkit-box-sizing:border-box;box-sizing:border-box;padding:8px;height:85px}.el-calendar-table .el-calendar-day:hover{cursor:pointer;background-color:#F2F8FE}.el-backtop{position:fixed;background-color:#FFF;width:40px;height:40px;border-radius:50%;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;font-size:20px;-webkit-box-shadow:0 0 6px rgba(0,0,0,.12);box-shadow:0 0 6px rgba(0,0,0,.12);cursor:pointer;z-index:5}.el-backtop:hover{background-color:#F2F6FC}.el-page-header{display:flex;line-height:24px}.el-page-header__left{display:-webkit-box;display:-ms-flexbox;display:flex;cursor:pointer;margin-right:40px;position:relative}.el-page-header__left::after{content:"";position:absolute;width:1px;height:16px;right:-20px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);background-color:#DCDFE6}.el-checkbox,.el-checkbox__input{display:inline-block;position:relative;white-space:nowrap}.el-page-header__left .el-icon-back{font-size:18px;margin-right:6px;-ms-flex-item-align:center;align-self:center}.el-page-header__title{font-size:14px;font-weight:500}.el-page-header__content{font-size:18px;color:#303133}.el-checkbox{color:#606266;font-weight:500;font-size:14px;cursor:pointer;user-select:none;margin-right:30px}.el-checkbox-button__inner,.el-radio{font-weight:500;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}.el-checkbox.is-bordered{padding:9px 20px 9px 10px;border-radius:4px;border:1px solid #DCDFE6;-webkit-box-sizing:border-box;box-sizing:border-box;line-height:normal;height:40px}.el-checkbox.is-bordered.is-checked{border-color:#409EFF}.el-checkbox.is-bordered.is-disabled{border-color:#EBEEF5;cursor:not-allowed}.el-checkbox.is-bordered+.el-checkbox.is-bordered{margin-left:10px}.el-checkbox.is-bordered.el-checkbox--medium{padding:7px 20px 7px 10px;border-radius:4px;height:36px}.el-checkbox.is-bordered.el-checkbox--medium .el-checkbox__label{line-height:17px;font-size:14px}.el-checkbox.is-bordered.el-checkbox--medium .el-checkbox__inner{height:14px;width:14px}.el-checkbox.is-bordered.el-checkbox--small{padding:5px 15px 5px 10px;border-radius:3px;height:32px}.el-checkbox.is-bordered.el-checkbox--small .el-checkbox__label{line-height:15px;font-size:12px}.el-checkbox.is-bordered.el-checkbox--small .el-checkbox__inner{height:12px;width:12px}.el-checkbox.is-bordered.el-checkbox--small .el-checkbox__inner::after{height:6px;width:2px}.el-checkbox.is-bordered.el-checkbox--mini{padding:3px 15px 3px 10px;border-radius:3px;height:28px}.el-checkbox.is-bordered.el-checkbox--mini .el-checkbox__label{line-height:12px;font-size:12px}.el-checkbox.is-bordered.el-checkbox--mini .el-checkbox__inner{height:12px;width:12px}.el-checkbox.is-bordered.el-checkbox--mini .el-checkbox__inner::after{height:6px;width:2px}.el-checkbox__input{cursor:pointer;outline:0;line-height:1;vertical-align:middle}.el-checkbox__input.is-disabled .el-checkbox__inner{background-color:#edf2fc;border-color:#DCDFE6;cursor:not-allowed}.el-checkbox__input.is-disabled .el-checkbox__inner::after{cursor:not-allowed;border-color:#C0C4CC}.el-checkbox__input.is-disabled .el-checkbox__inner+.el-checkbox__label{cursor:not-allowed}.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner{background-color:#F2F6FC;border-color:#DCDFE6}.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after{border-color:#C0C4CC}.el-checkbox__input.is-disabled.is-indeterminate .el-checkbox__inner{background-color:#F2F6FC;border-color:#DCDFE6}.el-checkbox__input.is-disabled.is-indeterminate .el-checkbox__inner::before{background-color:#C0C4CC;border-color:#C0C4CC}.el-checkbox__input.is-checked .el-checkbox__inner,.el-checkbox__input.is-indeterminate .el-checkbox__inner{background-color:#409EFF;border-color:#409EFF}.el-checkbox__input.is-disabled+span.el-checkbox__label{color:#C0C4CC;cursor:not-allowed}.el-checkbox__input.is-checked .el-checkbox__inner::after{-webkit-transform:rotate(45deg) scaleY(1);transform:rotate(45deg) scaleY(1)}.el-checkbox__input.is-checked+.el-checkbox__label{color:#409EFF}.el-checkbox__input.is-focus .el-checkbox__inner{border-color:#409EFF}.el-checkbox__input.is-indeterminate .el-checkbox__inner::before{content:'';position:absolute;display:block;background-color:#FFF;height:2px;-webkit-transform:scale(.5);transform:scale(.5);left:0;right:0;top:5px}.el-checkbox__input.is-indeterminate .el-checkbox__inner::after{display:none}.el-checkbox__inner{display:inline-block;position:relative;border:1px solid #DCDFE6;border-radius:2px;-webkit-box-sizing:border-box;box-sizing:border-box;width:14px;height:14px;background-color:#FFF;z-index:1;-webkit-transition:border-color .25s cubic-bezier(.71,-.46,.29,1.46),background-color .25s cubic-bezier(.71,-.46,.29,1.46);transition:border-color .25s cubic-bezier(.71,-.46,.29,1.46),background-color .25s cubic-bezier(.71,-.46,.29,1.46)}.el-checkbox__inner:hover{border-color:#409EFF}.el-checkbox__inner::after{-webkit-box-sizing:content-box;box-sizing:content-box;content:"";border:1px solid #FFF;border-left:0;border-top:0;height:7px;left:4px;position:absolute;top:1px;-webkit-transform:rotate(45deg) scaleY(0);transform:rotate(45deg) scaleY(0);width:3px;-webkit-transition:-webkit-transform .15s ease-in .05s;transition:-webkit-transform .15s ease-in .05s;transition:transform .15s ease-in .05s;transition:transform .15s ease-in .05s,-webkit-transform .15s ease-in .05s;-webkit-transform-origin:center;transform-origin:center}.el-checkbox__original{opacity:0;outline:0;position:absolute;margin:0;width:0;height:0;z-index:-1}.el-checkbox-button,.el-checkbox-button__inner{display:inline-block;position:relative}.el-checkbox__label{display:inline-block;padding-left:10px;line-height:19px;font-size:14px}.el-checkbox:last-of-type{margin-right:0}.el-checkbox-button__inner{line-height:1;white-space:nowrap;vertical-align:middle;cursor:pointer;background:#FFF;border:1px solid #DCDFE6;border-left:0;color:#606266;-webkit-appearance:none;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;outline:0;margin:0;-webkit-transition:all .3s cubic-bezier(.645,.045,.355,1);transition:all .3s cubic-bezier(.645,.045,.355,1);padding:12px 20px;font-size:14px;border-radius:0}.el-checkbox-button__inner.is-round{padding:12px 20px}.el-checkbox-button__inner:hover{color:#409EFF}.el-checkbox-button__inner [class*=el-icon-]{line-height:.9}.el-radio,.el-radio__input{line-height:1;outline:0;white-space:nowrap}.el-checkbox-button__inner [class*=el-icon-]+span{margin-left:5px}.el-checkbox-button__original{opacity:0;outline:0;position:absolute;margin:0;z-index:-1}.el-radio,.el-radio__inner,.el-radio__input{position:relative;display:inline-block}.el-checkbox-button.is-checked .el-checkbox-button__inner{color:#FFF;background-color:#409EFF;border-color:#409EFF;-webkit-box-shadow:-1px 0 0 0 #8cc5ff;box-shadow:-1px 0 0 0 #8cc5ff}.el-checkbox-button.is-checked:first-child .el-checkbox-button__inner{border-left-color:#409EFF}.el-checkbox-button.is-disabled .el-checkbox-button__inner{color:#C0C4CC;cursor:not-allowed;background-image:none;background-color:#FFF;border-color:#EBEEF5;-webkit-box-shadow:none;box-shadow:none}.el-checkbox-button.is-disabled:first-child .el-checkbox-button__inner{border-left-color:#EBEEF5}.el-checkbox-button:first-child .el-checkbox-button__inner{border-left:1px solid #DCDFE6;border-radius:4px 0 0 4px;-webkit-box-shadow:none!important;box-shadow:none!important}.el-checkbox-button.is-focus .el-checkbox-button__inner{border-color:#409EFF}.el-checkbox-button:last-child .el-checkbox-button__inner{border-radius:0 4px 4px 0}.el-checkbox-button--medium .el-checkbox-button__inner{padding:10px 20px;font-size:14px;border-radius:0}.el-checkbox-button--medium .el-checkbox-button__inner.is-round{padding:10px 20px}.el-checkbox-button--small .el-checkbox-button__inner{padding:9px 15px;font-size:12px;border-radius:0}.el-checkbox-button--small .el-checkbox-button__inner.is-round{padding:9px 15px}.el-checkbox-button--mini .el-checkbox-button__inner{padding:7px 15px;font-size:12px;border-radius:0}.el-checkbox-button--mini .el-checkbox-button__inner.is-round{padding:7px 15px}.el-checkbox-group{font-size:0}.el-radio,.el-radio--medium.is-bordered .el-radio__label{font-size:14px}.el-radio{color:#606266;cursor:pointer;margin-right:30px}.el-cascader-node>.el-radio,.el-radio:last-child{margin-right:0}.el-radio.is-bordered{padding:12px 20px 0 10px;border-radius:4px;border:1px solid #DCDFE6;-webkit-box-sizing:border-box;box-sizing:border-box;height:40px}.el-radio.is-bordered.is-checked{border-color:#409EFF}.el-radio.is-bordered.is-disabled{cursor:not-allowed;border-color:#EBEEF5}.el-radio__input.is-disabled .el-radio__inner,.el-radio__input.is-disabled.is-checked .el-radio__inner{background-color:#F5F7FA;border-color:#E4E7ED}.el-radio.is-bordered+.el-radio.is-bordered{margin-left:10px}.el-radio--medium.is-bordered{padding:10px 20px 0 10px;border-radius:4px;height:36px}.el-radio--mini.is-bordered .el-radio__label,.el-radio--small.is-bordered .el-radio__label{font-size:12px}.el-radio--medium.is-bordered .el-radio__inner{height:14px;width:14px}.el-radio--small.is-bordered{padding:8px 15px 0 10px;border-radius:3px;height:32px}.el-radio--small.is-bordered .el-radio__inner{height:12px;width:12px}.el-radio--mini.is-bordered{padding:6px 15px 0 10px;border-radius:3px;height:28px}.el-radio--mini.is-bordered .el-radio__inner{height:12px;width:12px}.el-radio__input{cursor:pointer;vertical-align:middle}.el-radio__input.is-disabled .el-radio__inner{cursor:not-allowed}.el-radio__input.is-disabled .el-radio__inner::after{cursor:not-allowed;background-color:#F5F7FA}.el-radio__input.is-disabled .el-radio__inner+.el-radio__label{cursor:not-allowed}.el-radio__input.is-disabled.is-checked .el-radio__inner::after{background-color:#C0C4CC}.el-radio__input.is-disabled+span.el-radio__label{color:#C0C4CC;cursor:not-allowed}.el-radio__input.is-checked .el-radio__inner{border-color:#409EFF;background:#409EFF}.el-radio__input.is-checked .el-radio__inner::after{-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1)}.el-radio__input.is-checked+.el-radio__label{color:#409EFF}.el-radio__input.is-focus .el-radio__inner{border-color:#409EFF}.el-radio__inner{border:1px solid #DCDFE6;border-radius:100%;width:14px;height:14px;background-color:#FFF;cursor:pointer;-webkit-box-sizing:border-box;box-sizing:border-box}.el-radio__inner:hover{border-color:#409EFF}.el-radio__inner::after{width:4px;height:4px;border-radius:100%;background-color:#FFF;content:"";position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%) scale(0);transform:translate(-50%,-50%) scale(0);-webkit-transition:-webkit-transform .15s ease-in;transition:-webkit-transform .15s ease-in;transition:transform .15s ease-in;transition:transform .15s ease-in,-webkit-transform .15s ease-in}.el-radio__original{opacity:0;outline:0;position:absolute;z-index:-1;top:0;left:0;right:0;bottom:0;margin:0}.el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner{-webkit-box-shadow:0 0 2px 2px #409EFF;box-shadow:0 0 2px 2px #409EFF}.el-radio__label{font-size:14px;padding-left:10px}.el-scrollbar{overflow:hidden;position:relative}.el-scrollbar:active>.el-scrollbar__bar,.el-scrollbar:focus>.el-scrollbar__bar,.el-scrollbar:hover>.el-scrollbar__bar{opacity:1;-webkit-transition:opacity 340ms ease-out;transition:opacity 340ms ease-out}.el-scrollbar__wrap{overflow:scroll;height:100%}.el-scrollbar__wrap--hidden-default{scrollbar-width:none}.el-scrollbar__wrap--hidden-default::-webkit-scrollbar{width:0;height:0}.el-scrollbar__thumb{position:relative;display:block;width:0;height:0;cursor:pointer;border-radius:inherit;background-color:rgba(144,147,153,.3);-webkit-transition:.3s background-color;transition:.3s background-color}.el-scrollbar__thumb:hover{background-color:rgba(144,147,153,.5)}.el-scrollbar__bar{position:absolute;right:2px;bottom:2px;z-index:1;border-radius:4px;opacity:0;-webkit-transition:opacity 120ms ease-out;transition:opacity 120ms ease-out}.el-scrollbar__bar.is-vertical{width:6px;top:2px}.el-scrollbar__bar.is-vertical>div{width:100%}.el-scrollbar__bar.is-horizontal{height:6px;left:2px}.el-scrollbar__bar.is-horizontal>div{height:100%}.el-cascader-panel{display:-webkit-box;display:-ms-flexbox;display:flex;border-radius:4px;font-size:14px}.el-cascader-panel.is-bordered{border:1px solid #E4E7ED;border-radius:4px}.el-cascader-menu{min-width:180px;-webkit-box-sizing:border-box;box-sizing:border-box;color:#606266;border-right:solid 1px #E4E7ED}.el-cascader-menu:last-child{border-right:none}.el-cascader-menu:last-child .el-cascader-node{padding-right:20px}.el-cascader-menu__wrap{height:204px}.el-cascader-menu__list{position:relative;min-height:100%;margin:0;padding:6px 0;list-style:none;-webkit-box-sizing:border-box;box-sizing:border-box}.el-avatar,.el-drawer{-webkit-box-sizing:border-box;overflow:hidden}.el-cascader-menu__hover-zone{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.el-cascader-menu__empty-text{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);text-align:center;color:#C0C4CC}.el-cascader-node{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0 30px 0 20px;height:34px;line-height:34px;outline:0}.el-cascader-node.is-selectable.in-active-path{color:#606266}.el-cascader-node.in-active-path,.el-cascader-node.is-active,.el-cascader-node.is-selectable.in-checked-path{color:#409EFF;font-weight:700}.el-cascader-node:not(.is-disabled){cursor:pointer}.el-cascader-node:not(.is-disabled):focus,.el-cascader-node:not(.is-disabled):hover{background:#F5F7FA}.el-cascader-node.is-disabled{color:#C0C4CC;cursor:not-allowed}.el-cascader-node__prefix{position:absolute;left:10px}.el-cascader-node__postfix{position:absolute;right:10px}.el-cascader-node__label{-webkit-box-flex:1;-ms-flex:1;flex:1;padding:0 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.el-cascader-node>.el-radio .el-radio__label{padding-left:0}.el-avatar{display:inline-block;box-sizing:border-box;text-align:center;color:#fff;background:#C0C4CC;width:40px;height:40px;line-height:40px;font-size:14px}.el-avatar>img{display:block;height:100%;vertical-align:middle}.el-drawer,.el-drawer__header{display:-webkit-box;display:-ms-flexbox}.el-avatar--circle{border-radius:50%}.el-avatar--square{border-radius:4px}.el-avatar--icon{font-size:18px}.el-avatar--large{width:40px;height:40px;line-height:40px}.el-avatar--medium{width:36px;height:36px;line-height:36px}.el-avatar--small{width:28px;height:28px;line-height:28px}.el-drawer.btt,.el-drawer.ttb,.el-drawer__container{left:0;right:0;width:100%}.el-drawer.ltr,.el-drawer.rtl,.el-drawer__container{top:0;bottom:0;height:100%}@-webkit-keyframes el-drawer-fade-in{0%{opacity:0}100%{opacity:1}}@keyframes el-drawer-fade-in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes rtl-drawer-in{0%{-webkit-transform:translate(100%,0);transform:translate(100%,0)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@keyframes rtl-drawer-in{0%{-webkit-transform:translate(100%,0);transform:translate(100%,0)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@-webkit-keyframes rtl-drawer-out{0%{-webkit-transform:translate(0,0);transform:translate(0,0)}100%{-webkit-transform:translate(100%,0);transform:translate(100%,0)}}@keyframes rtl-drawer-out{0%{-webkit-transform:translate(0,0);transform:translate(0,0)}100%{-webkit-transform:translate(100%,0);transform:translate(100%,0)}}@-webkit-keyframes ltr-drawer-in{0%{-webkit-transform:translate(-100%,0);transform:translate(-100%,0)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@keyframes ltr-drawer-in{0%{-webkit-transform:translate(-100%,0);transform:translate(-100%,0)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@-webkit-keyframes ltr-drawer-out{0%{-webkit-transform:translate(0,0);transform:translate(0,0)}100%{-webkit-transform:translate(-100%,0);transform:translate(-100%,0)}}@keyframes ltr-drawer-out{0%{-webkit-transform:translate(0,0);transform:translate(0,0)}100%{-webkit-transform:translate(-100%,0);transform:translate(-100%,0)}}@-webkit-keyframes ttb-drawer-in{0%{-webkit-transform:translate(0,-100%);transform:translate(0,-100%)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@keyframes ttb-drawer-in{0%{-webkit-transform:translate(0,-100%);transform:translate(0,-100%)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@-webkit-keyframes ttb-drawer-out{0%{-webkit-transform:translate(0,0);transform:translate(0,0)}100%{-webkit-transform:translate(0,-100%);transform:translate(0,-100%)}}@keyframes ttb-drawer-out{0%{-webkit-transform:translate(0,0);transform:translate(0,0)}100%{-webkit-transform:translate(0,-100%);transform:translate(0,-100%)}}@-webkit-keyframes btt-drawer-in{0%{-webkit-transform:translate(0,100%);transform:translate(0,100%)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@keyframes btt-drawer-in{0%{-webkit-transform:translate(0,100%);transform:translate(0,100%)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@-webkit-keyframes btt-drawer-out{0%{-webkit-transform:translate(0,0);transform:translate(0,0)}100%{-webkit-transform:translate(0,100%);transform:translate(0,100%)}}@keyframes btt-drawer-out{0%{-webkit-transform:translate(0,0);transform:translate(0,0)}100%{-webkit-transform:translate(0,100%);transform:translate(0,100%)}}.el-drawer{position:absolute;box-sizing:border-box;background-color:#FFF;display:flex;-ms-flex-direction:column;flex-direction:column;-webkit-box-shadow:0 8px 10px -5px rgba(0,0,0,.2),0 16px 24px 2px rgba(0,0,0,.14),0 6px 30px 5px rgba(0,0,0,.12);box-shadow:0 8px 10px -5px rgba(0,0,0,.2),0 16px 24px 2px rgba(0,0,0,.14),0 6px 30px 5px rgba(0,0,0,.12)}.el-drawer.rtl{-webkit-animation:rtl-drawer-out .3s;animation:rtl-drawer-out .3s;right:0}.el-drawer__open .el-drawer.rtl{-webkit-animation:rtl-drawer-in .3s 1ms;animation:rtl-drawer-in .3s 1ms}.el-drawer.ltr{-webkit-animation:ltr-drawer-out .3s;animation:ltr-drawer-out .3s;left:0}.el-drawer__open .el-drawer.ltr{-webkit-animation:ltr-drawer-in .3s 1ms;animation:ltr-drawer-in .3s 1ms}.el-drawer.ttb{-webkit-animation:ttb-drawer-out .3s;animation:ttb-drawer-out .3s;top:0}.el-drawer__open .el-drawer.ttb{-webkit-animation:ttb-drawer-in .3s 1ms;animation:ttb-drawer-in .3s 1ms}.el-drawer.btt{-webkit-animation:btt-drawer-out .3s;animation:btt-drawer-out .3s;bottom:0}.el-drawer__open .el-drawer.btt{-webkit-animation:btt-drawer-in .3s 1ms;animation:btt-drawer-in .3s 1ms}.el-drawer__wrapper{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;margin:0}.el-drawer__header{-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#72767b;display:flex;margin-bottom:32px;padding:20px 20px 0}.el-drawer__header>:first-child{-webkit-box-flex:1;-ms-flex:1;flex:1}.el-drawer__title{margin:0;-webkit-box-flex:1;-ms-flex:1;flex:1;line-height:inherit;font-size:1rem}.el-drawer__close-btn{border:none;cursor:pointer;font-size:20px;color:inherit;background-color:transparent}.el-drawer__body{-webkit-box-flex:1;-ms-flex:1;flex:1}.el-drawer__body>*{-webkit-box-sizing:border-box;box-sizing:border-box}.el-drawer__container{position:relative}.el-drawer-fade-enter-active{-webkit-animation:el-drawer-fade-in .3s;animation:el-drawer-fade-in .3s}.el-drawer-fade-leave-active{animation:el-drawer-fade-in .3s reverse}.el-popconfirm__main{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.el-popconfirm__icon{margin-right:5px}.el-popconfirm__action{text-align:right;margin:0}
\ No newline at end of file
diff --git a/src/components/ThemePicker/index.vue b/src/components/ThemePicker/index.vue
index 3879c5a..24737d7 100644
--- a/src/components/ThemePicker/index.vue
+++ b/src/components/ThemePicker/index.vue
@@ -62,6 +62,7 @@ export default {
 
       if (!this.chalk) {
         const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css`
+        // const url = require('element-ui/lib/theme-chalk/index.css')
         await this.getCSSString(url, 'chalk')
       }
 
diff --git a/src/components/Tinymce/components/EditorImage.vue b/src/components/Tinymce/components/EditorImage.vue
index 07d48e6..160c570 100644
--- a/src/components/Tinymce/components/EditorImage.vue
+++ b/src/components/Tinymce/components/EditorImage.vue
@@ -1,29 +1,30 @@
 <template>
   <div class="upload-container">
     <el-button :style="{background:color,borderColor:color}" icon="el-icon-upload" size="mini" type="primary" @click=" dialogVisible=true">
-      upload
+      {{ 'btn.uploadpic' | i18nFilter }}
     </el-button>
     <el-dialog :visible.sync="dialogVisible">
       <el-upload
         :multiple="true"
         :file-list="fileList"
+        :data="dataObj"
         :show-file-list="true"
         :on-remove="handleRemove"
         :on-success="handleSuccess"
         :before-upload="beforeUpload"
         class="editor-slide-upload"
-        action="https://httpbin.org/post"
+        :action="uploadPath"
         list-type="picture-card"
       >
         <el-button size="small" type="primary">
-          Click upload
+          {{ 'btn.upload' | i18nFilter }}
         </el-button>
       </el-upload>
       <el-button @click="dialogVisible = false">
-        Cancel
+        {{ 'btn.cancel' | i18nFilter }}
       </el-button>
       <el-button type="primary" @click="handleSubmit">
-        Confirm
+        {{ 'btn.confirm' | i18nFilter }}
       </el-button>
     </el-dialog>
   </div>
@@ -31,7 +32,7 @@
 
 <script>
 // import { getToken } from 'api/qiniu'
-
+import { uploadPath } from '@/api/basic'
 export default {
   name: 'EditorSlideUpload',
   props: {
@@ -44,7 +45,9 @@ export default {
     return {
       dialogVisible: false,
       listObj: {},
-      fileList: []
+      uploadPath,
+      fileList: [],
+      dataObj: { typeCode: 'file' }
     }
   },
   methods: {
@@ -63,6 +66,8 @@ export default {
       this.dialogVisible = false
     },
     handleSuccess(response, file) {
+      console.log(response)
+      console.log(file)
       const uid = file.uid
       const objKeyArr = Object.keys(this.listObj)
       for (let i = 0, len = objKeyArr.length; i < len; i++) {
diff --git a/src/components/Tinymce/index.vue b/src/components/Tinymce/index.vue
index cb6b91c..8584e4e 100644
--- a/src/components/Tinymce/index.vue
+++ b/src/components/Tinymce/index.vue
@@ -2,7 +2,7 @@
   <div :class="{fullscreen:fullscreen}" class="tinymce-container" :style="{width:containerWidth}">
     <textarea :id="tinymceId" class="tinymce-textarea" />
     <div class="editor-custom-btn-container">
-      <editorImage color="#1890ff" class="editor-upload-btn" @successCBK="imageSuccessCBK" />
+      <editorImage v-show="false" color="#1890ff" class="editor-upload-btn" @successCBK="imageSuccessCBK" />
     </div>
   </div>
 </template>
@@ -116,7 +116,7 @@ export default {
       const _this = this
       window.tinymce.init({
         selector: `#${this.tinymceId}`,
-        language: this.languageTypeList['en'],
+        language: this.languageTypeList['zh'],
         height: this.height,
         body_class: 'panel-body ',
         object_resizing: false,
@@ -204,43 +204,37 @@ export default {
       window.tinymce.get(this.tinymceId).getContent()
     },
     imageSuccessCBK(arr) {
-      arr.forEach(v => window.tinymce.get(this.tinymceId).insertContent(`<img class="wscnph" src="${v.url}" >`))
+      const _this = this
+      arr.forEach(v => {
+        window.tinymce.get(_this.tinymceId).insertContent(`<img class="wscnph" src="${v.url}" >`)
+      })
     }
   }
 }
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 .tinymce-container {
   position: relative;
   line-height: normal;
 }
-
-.tinymce-container {
-  ::v-deep {
-    .mce-fullscreen {
-      z-index: 10000;
-    }
-  }
+.tinymce-container>>>.mce-fullscreen {
+  z-index: 10000;
 }
-
 .tinymce-textarea {
   visibility: hidden;
   z-index: -1;
 }
-
 .editor-custom-btn-container {
   position: absolute;
   right: 4px;
   top: 4px;
   /*z-index: 2005;*/
 }
-
 .fullscreen .editor-custom-btn-container {
   z-index: 10000;
   position: fixed;
 }
-
 .editor-upload-btn {
   display: inline-block;
 }
diff --git a/src/components/Tree/index.vue b/src/components/Tree/index.vue
new file mode 100644
index 0000000..e28f121
--- /dev/null
+++ b/src/components/Tree/index.vue
@@ -0,0 +1,91 @@
+<!--
+ * @Author: gtz
+ * @Date: 2021-04-25 09:07:28
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-06-17 15:40:57
+ * @Description: file content
+-->
+
+<template>
+  <div class="app-tree">
+    <el-input v-model="filterText" :placeholder="'placeholder.treeSearch' | i18nFilter" />
+    <el-tree
+      ref="tree"
+      :data="treeList"
+      :show-checkbox="showCheck"
+      :filter-node-method="filterNode"
+      @node-click="handleNodeClick"
+      @check-change="handleCheckChange"
+    />
+  </div>
+</template>
+
+<script>
+import { getTreeList } from '@/api/tree'
+
+export default {
+  props: {
+    showCheck: {
+      type: Boolean,
+      default: () => false
+    },
+    treeType: {
+      type: String,
+      default: () => ''
+    }
+  },
+  data() {
+    return {
+      filterText: null,
+      treeList: []
+    }
+  },
+  watch: {
+    filterText(val) {
+      this.$refs.tree.filter(val)
+    }
+  },
+  created() {
+    this.getTree()
+  },
+  methods: {
+    filterNode(value, data) {
+      if (!value) return true
+      return data.label.indexOf(value) !== -1
+    },
+    async getTree() {
+      const result = await getTreeList({ type: this.treeType })
+      if (result.code === 0) {
+        this.treeList = [result.data]
+      }
+    },
+    handleNodeClick(data, node, components) {
+      const isLast = this.formatLast(data)
+      if (isLast) {
+        this.$emit('lastNodeClick', data, node, components)
+      } else {
+        this.$emit('handleNodeClick', data, node, components)
+      }
+    },
+    formatLast(data) {
+      if (data?.children?.length > 0) {
+        return false
+      } else {
+        return true
+      }
+    },
+    handleCheckChange(data, checked, indeterminate) {
+      this.$emit('handleCheckChange', data, checked, indeterminate)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-tree {
+  border: 2px solid rgb(228, 228, 228);
+  padding: 10px;
+  border-radius: 5px;
+  min-height: 500px;
+}
+</style>
diff --git a/src/components/Upload/MoreFiles.vue b/src/components/Upload/MoreFiles.vue
new file mode 100644
index 0000000..d2ffc78
--- /dev/null
+++ b/src/components/Upload/MoreFiles.vue
@@ -0,0 +1,123 @@
+<!--
+ * @Author: gtz
+ * @Date: 2021-03-22 11:14:39
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-05-20 09:43:52
+ * @Description: file content
+-->
+<template>
+  <div class="upload-container">
+    <el-upload
+      :ref="'upload' + itemId"
+      :data="dataObj"
+      name="files"
+      :disabled="disable"
+      :file-list="annexfileList"
+      :action="uploadPath"
+      :headers="{ token }"
+      :on-remove="rmImage"
+      :before-upload="annexBeforeUpload"
+      :on-success="uploadDone"
+      :on-preview="downloadFile"
+      class="btn"
+    >
+      <el-button size="small" type="primary" icon="el-icon-upload">{{ 'btn.upload' | i18nFilter }}</el-button>
+      <!-- <span v-if="fileIds" slot="tip" class="el-upload__tip" @click="downloadFile">下载文件</span> -->
+    </el-upload>
+  </div>
+</template>
+
+<script>
+import { cloudPath, uploadPath } from '@/api/basic'
+import { getToken } from '@/utils/auth'
+
+export default {
+  name: 'SingleFileUpload',
+  props: {
+    files: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    disable: {
+      type: Boolean,
+      default: () => {
+        return false
+      }
+    },
+    itemId: {
+      type: String,
+      default: () => {
+        return ''
+      }
+    }
+  },
+  data() {
+    return {
+      tempUrl: '',
+      dataObj: { typeCode: 'file' },
+      uploadPath,
+      cloudPath,
+      imageUrl: null,
+      token: getToken(),
+      imgload: false,
+      annexfileList: []
+    }
+  },
+  mounted() {
+    const fileArr = []
+    this.files.map(item => {
+      fileArr.push({
+        id: item.id,
+        name: item.name
+      })
+    })
+    this.$refs['upload' + this.itemId].uploadFiles = fileArr
+    this.annexfileList = fileArr
+  },
+  methods: {
+    rmImage(file, fileList) {
+      this.annexfileList = fileList
+    },
+    uploadDone(res) {
+      if (res.code === 0) {
+        this.$refs['upload' + this.itemId].uploadFiles[this.$refs['upload' + this.itemId].uploadFiles.length - 1].id = res.data[0].id
+        this.annexfileList = this.$refs['upload' + this.itemId].uploadFiles
+        this.$emit('done', res.data)
+      } else {
+        this.$message({
+          type: 'error',
+          message: '上传失败!'
+        })
+        this.$refs['upload' + this.itemId].uploadFiles.pop()
+      }
+    },
+    annexBeforeUpload(file) {
+      const isRightSize = file.size / 1024 / 1024 < 10
+      if (!isRightSize) {
+        this.$message.error('文件大小超过 10MB')
+      }
+      return isRightSize
+    },
+    downloadFile(file) {
+      window.open(`${location.origin}/api/common/attachment/downloadFile?type=file&attachmentId=${file.id}`)
+    },
+    returnFileList() {
+      return this.annexfileList
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import "~@/styles/index.scss";
+.upload-container {
+  overflow: hidden;
+  .btn {
+    float: left;
+  }
+  .el-upload__tip {
+    @extend .pointer;
+  }
+}
+</style>
diff --git a/src/components/Upload/SingleFile.vue b/src/components/Upload/SingleFile.vue
new file mode 100644
index 0000000..2d20f84
--- /dev/null
+++ b/src/components/Upload/SingleFile.vue
@@ -0,0 +1,111 @@
+<template>
+  <div class="upload-container">
+    <el-upload
+      :multiple="false"
+      :data="dataObj"
+      name="files"
+      :file-list="annexfileList"
+      :action="uploadPath"
+      :headers="{ token }"
+      :before-upload="annexBeforeUpload"
+      :on-success="uploadDone"
+      class="btn"
+    >
+      <el-button v-if="showBtn" size="small" type="primary" icon="el-icon-upload">{{ 'btn.upload' | i18nFilter }}</el-button>
+      <span v-if="fileId" slot="tip" class="el-upload__tip" @click="downloadFile">下载文件</span>
+    </el-upload>
+  </div>
+</template>
+
+<script>
+import { cloudPath, uploadPath } from '@/api/basic'
+import { getToken } from '@/utils/auth'
+
+export default {
+  name: 'SingleFileUpload',
+  props: {
+    fileId: {
+      type: String,
+      default: () => null
+    },
+    showBtn: {
+      type: Boolean,
+      default: () => true
+    }
+  },
+  data() {
+    return {
+      tempUrl: '',
+      dataObj: { typeCode: 'file' },
+      uploadPath,
+      cloudPath,
+      imageUrl: null,
+      token: getToken(),
+      imgload: false,
+      annexfileList: []
+    }
+  },
+  // watch: {
+  //   fileId: function(val) {
+  //     if (val) {
+  //       getUrl({
+  //         attachmentId: val,
+  //         type: 0
+  //       }).then(blob => {
+  //         blobToBase64(blob.data).then(res => {
+  //           this.imageUrl = res
+  //         })
+  //       })
+  //     }
+  //   }
+  // },
+  methods: {
+    rmImage() {
+      this.$confirm(this.$t('upload.delPic'), '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.imageUrl = null
+        this.emitInput(false)
+      })
+    },
+    emitInput(val) {
+      this.$emit('input', val)
+    },
+    uploadDone(res) {
+      console.log(res)
+      if (res.code === 0) {
+        this.$emit('done', res.data[0].id)
+      } else {
+        this.$message({
+          type: 'error',
+          message: '上传失败!'
+        })
+      }
+    },
+    annexBeforeUpload(file) {
+      const isRightSize = file.size / 1024 / 1024 < 10
+      if (!isRightSize) {
+        this.$message.error('文件大小超过 10MB')
+      }
+      return isRightSize
+    },
+    downloadFile() {
+      window.open(`${location.origin}/api/common/attachment/downloadFile?type=file&attachmentId=${this.fileId}`)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import "~@/styles/index.scss";
+.upload-container {
+  overflow: hidden;
+  .btn {
+    float: left;
+  }
+  .el-upload__tip {
+    @extend .pointer;
+  }
+}
+</style>
diff --git a/src/components/Upload/SingleImage.vue b/src/components/Upload/SingleImage.vue
index d16bbf3..d1609fd 100644
--- a/src/components/Upload/SingleImage.vue
+++ b/src/components/Upload/SingleImage.vue
@@ -2,21 +2,27 @@
   <div class="upload-container">
     <el-upload
       :data="dataObj"
+      name="files"
       :multiple="false"
       :show-file-list="false"
+      :before-upload="beforeUpload"
       :on-success="handleImageSuccess"
+      :headers="{ token }"
       class="image-uploader"
       drag
-      action="https://httpbin.org/post"
+      :action="uploadPath"
     >
       <i class="el-icon-upload" />
       <div class="el-upload__text">
-        将文件拖到此处，或<em>点击上传</em>
+        {{ 'upload.text.header' | i18nFilter }}<em>{{ 'upload.text.footer' | i18nFilter }}</em>
+      </div>
+      <div class="el-upload__placeholder">
+        {{ 'upload.placeholder' | i18nFilter }}
       </div>
     </el-upload>
-    <div class="image-preview">
-      <div v-show="imageUrl.length>1" class="image-preview-wrapper">
-        <img :src="imageUrl+'?imageView2/1/w/200/h/200'">
+    <div v-loading="imgload" class="image-preview">
+      <div v-show="imageUrl" class="image-preview-wrapper">
+        <img :src="imageUrl">
         <div class="image-preview-action">
           <i class="el-icon-delete" @click="rmImage" />
         </div>
@@ -26,52 +32,86 @@
 </template>
 
 <script>
-import { getToken } from '@/api/qiniu'
+import { cloudPath, uploadPath } from '@/api/basic'
+import { getUrl } from '@/api/file'
+import { getToken } from '@/utils/auth'
+import { blobToBase64 } from '@/utils/blobToBase64'
 
 export default {
   name: 'SingleImageUpload',
   props: {
-    value: {
+    fileId: {
       type: String,
-      default: ''
+      default: () => {
+        return null
+      }
     }
   },
   data() {
     return {
       tempUrl: '',
-      dataObj: { token: '', key: '' }
+      dataObj: { typeCode: '' },
+      uploadPath,
+      cloudPath,
+      imageUrl: null,
+      token: getToken(),
+      imgload: false
     }
   },
-  computed: {
-    imageUrl() {
-      return this.value
+  watch: {
+    fileId: function(val) {
+      if (val) {
+        getUrl({
+          attachmentId: val,
+          type: 0
+        }).then(blob => {
+          blobToBase64(blob.data).then(res => {
+            this.imageUrl = res
+          })
+        })
+      }
     }
   },
   methods: {
     rmImage() {
-      this.emitInput('')
+      this.$confirm(this.$t('upload.delPic'), '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.imageUrl = null
+        this.emitInput(false)
+      })
     },
     emitInput(val) {
       this.$emit('input', val)
     },
-    handleImageSuccess() {
-      this.emitInput(this.tempUrl)
-    },
-    beforeUpload() {
-      const _self = this
-      return new Promise((resolve, reject) => {
-        getToken().then(response => {
-          const key = response.data.qiniu_key
-          const token = response.data.qiniu_token
-          _self._data.dataObj.token = token
-          _self._data.dataObj.key = key
-          this.tempUrl = response.data.qiniu_url
-          resolve(true)
-        }).catch(err => {
-          console.log(err)
-          reject(false)
+    handleImageSuccess(val) {
+      this.imgload = true
+      getUrl({
+        attachmentId: val.data[0].id,
+        type: 0
+      }).then(blob => {
+        blobToBase64(blob.data).then(res => {
+          this.imageUrl = res
+          this.imgload = false
         })
       })
+      this.emitInput(val.data[0])
+    },
+    beforeUpload(file) {
+      console.log(file)
+      this.dataObj.typeCode = this.$route.matched[0].name
+      const imgData = { accept: 'image/gif, image/jpeg, image/png, image/jpg' }
+      let isImg = true
+      if (imgData.accept.indexOf(file.type) === -1) {
+        isImg = false
+        this.$message.error(this.$t('upload.picAlarm'))
+      } else if (file.size > 1024 * 1024 * 10) {
+        isImg = false
+        this.$message.error(this.$t('upload.picSizeAlarm'))
+      }
+      return isImg
     }
   }
 }
@@ -86,6 +126,11 @@ export default {
         .image-uploader {
             width: 60%;
             float: left;
+            .el-upload__placeholder{
+              font-size: 12px;
+              color: #999;
+              line-height: 18px;
+            }
         }
         .image-preview {
             width: 200px;
diff --git a/src/components/basicData/HeadForm.vue b/src/components/basicData/HeadForm.vue
new file mode 100644
index 0000000..5c54f88
--- /dev/null
+++ b/src/components/basicData/HeadForm.vue
@@ -0,0 +1,62 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:18:27
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-04-27 10:15:20
+ * @Description:
+-->
+<template>
+  <el-form :inline="true" @keyup.enter.native="getDataList()">
+    <el-form-item :label="keyName">
+      <el-input v-model="key" style="width:300px" :placeholder="placeholderName" clearable />
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" @click="getDataList()">{{ 'btn.search' | i18nFilter }}</el-button>
+      <el-button v-if="showAdd" type="primary" @click="add()">{{ 'btn.add' | i18nFilter }}</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+import { string } from 'jszip/lib/support'
+
+export default {
+  props: {
+    keyName: {
+      type: string,
+      default: () => {
+        return '关键字'
+      }
+    },
+    showAdd: {
+      type: Boolean,
+      default: () => {
+        return true
+      }
+    },
+    placeholderName: {
+      type: string,
+      default: () => {
+        return '请输入关键字'
+      }
+    }
+  },
+  data() {
+    return {
+      key: ''
+    }
+  },
+  methods: {
+    getDataList() {
+      this.$emit('getDataList', this.key)
+    },
+    add() {
+      this.$emit('add')
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>
diff --git a/src/directive/permission/permission.js b/src/directive/permission/permission.js
index 49d1f88..b27f24d 100644
--- a/src/directive/permission/permission.js
+++ b/src/directive/permission/permission.js
@@ -1,11 +1,11 @@
 import store from '@/store'
 
-function checkPermission(el, binding) {
-  const { value } = binding
-  const roles = store.getters && store.getters.roles
+export default {
+  inserted(el, binding, vnode) {
+    const { value } = binding
+    const roles = store.getters && store.getters.roles
 
-  if (value && value instanceof Array) {
-    if (value.length > 0) {
+    if (value && value instanceof Array && value.length > 0) {
       const permissionRoles = value
 
       const hasPermission = roles.some(role => {
@@ -15,17 +15,8 @@ function checkPermission(el, binding) {
       if (!hasPermission) {
         el.parentNode && el.parentNode.removeChild(el)
       }
+    } else {
+      throw new Error(`need roles! Like v-permission="['admin','editor']"`)
     }
-  } else {
-    throw new Error(`need roles! Like v-permission="['admin','editor']"`)
-  }
-}
-
-export default {
-  inserted(el, binding) {
-    checkPermission(el, binding)
-  },
-  update(el, binding) {
-    checkPermission(el, binding)
   }
 }
diff --git a/src/filters/DataDict/index.js b/src/filters/DataDict/index.js
new file mode 100644
index 0000000..5fde7c6
--- /dev/null
+++ b/src/filters/DataDict/index.js
@@ -0,0 +1,42 @@
+/*
+ * @Date: 2020-12-29 16:49:28
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-04-13 13:49:51
+ * @FilePath: \basic-admin\src\filters\DataDict\index.js
+ * @Description: 部分常量的数据字典定义
+ */
+
+import i18n from '@/lang'
+
+const table = {
+  enableState: {
+    '0': i18n.t('baseDict.enableState.no'),
+    '1': i18n.t('baseDict.enableState.yes')
+  },
+  yesOrNo: {
+    '0': i18n.t('baseDict.yesOrNo.no'),
+    '1': i18n.t('baseDict.yesOrNo.yes')
+  },
+  bool2String: {
+    'true': i18n.t('baseDict.bool2String.yes'),
+    'false': i18n.t('baseDict.bool2String.no')
+  },
+  doneStatus: {
+    '0': i18n.t('baseDict.doneStatus.no'),
+    '1': i18n.t('baseDict.doneStatus.yes')
+  },
+  sex: {
+    '1': i18n.t('baseDict.sex.man'),
+    '2': i18n.t('baseDict.sex.woman')
+  },
+  yesOrNoEquipment: {
+    '-1': i18n.t('baseDict.yesOrNo.no'),
+    '1': i18n.t('baseDict.yesOrNo.yes')
+  }
+}
+
+export default function(dictTable) {
+  return function(val) {
+    return table?.[dictTable]?.[val]
+  }
+}
diff --git a/src/filters/basicData/index.js b/src/filters/basicData/index.js
new file mode 100644
index 0000000..1c6707d
--- /dev/null
+++ b/src/filters/basicData/index.js
@@ -0,0 +1,76 @@
+/*
+ * @Date: 2020-12-29 16:49:28
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-07-21 15:56:54
+ * @FilePath: \basic-admin\src\filters\basicData\index.js
+ * @Description:
+ */
+import i18n from '@/lang'
+
+const table = {
+  sex: {
+    '0': i18n.t('basicDataFilter.sex.woman'),
+    '1': i18n.t('basicDataFilter.sex.man')
+  },
+  onDuty: {
+    '0': i18n.t('basicDataFilter.onDuty.no'),
+    '1': i18n.t('basicDataFilter.onDuty.yes')
+  },
+  orderStatus: {
+    '1': i18n.t('basicDataFilter.orderStatus.add'),
+    '2': i18n.t('basicDataFilter.orderStatus.start'),
+    '3': i18n.t('basicDataFilter.orderStatus.stop'),
+    '4': i18n.t('basicDataFilter.orderStatus.issued'),
+    '9': i18n.t('basicDataFilter.orderStatus.complete')
+  },
+  workOrderStatus: {
+    '1': i18n.t('basicDataFilter.workOrderStatus.notactive'),
+    '2': i18n.t('basicDataFilter.workOrderStatus.waiting'),
+    '3': i18n.t('basicDataFilter.workOrderStatus.active'),
+    '4': i18n.t('basicDataFilter.workOrderStatus.stop'),
+    '9': i18n.t('basicDataFilter.workOrderStatus.complete')
+  },
+  source: {
+    '1': 'MES',
+    '2': 'ERP',
+    '3': 'PID1',
+    '4': '00A',
+    '5': '00C'
+  },
+  priority: {
+    '1': i18n.t('basicDataFilter.priority.low'),
+    '2': i18n.t('basicDataFilter.priority.normal'),
+    '3': i18n.t('basicDataFilter.priority.high')
+  },
+  workStatus: {
+    '0': i18n.t('basicDataFilter.workStatus.fail'),
+    '1': i18n.t('basicDataFilter.workStatus.success')
+  },
+  roleType: {
+    '1': 'pc',
+    '2': 'app',
+    '3': 'wechat',
+    '4': 'miniapp',
+    '5': 'pda'
+  },
+  menuType: {
+    '0': i18n.t('basicDataFilter.menuType.catalogue'),
+    '1': i18n.t('basicDataFilter.menuType.menu'),
+    '2': i18n.t('basicDataFilter.menuType.button')
+  },
+  enableState: {
+    '0': i18n.t('basicDataFilter.enableState.disable'),
+    '1': i18n.t('basicDataFilter.enableState.enable')
+  },
+  storage: {
+    '0': i18n.t('basicDataFilter.enableState.normal'),
+    '1': i18n.t('basicDataFilter.enableState.repairing'),
+    '2': i18n.t('basicDataFilter.enableState.scrap')
+  }
+}
+
+export default function(dictTable) {
+  return function(val) {
+    return table?.[dictTable]?.[val]
+  }
+}
diff --git a/src/filters/equipment/index.js b/src/filters/equipment/index.js
new file mode 100644
index 0000000..b9c6b76
--- /dev/null
+++ b/src/filters/equipment/index.js
@@ -0,0 +1,33 @@
+/*
+ * @Date: 2020-12-29 16:49:28
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-04-20 14:24:04
+ * @FilePath: \basic-admin\src\filters\DataDict\index.js
+ * @Description: 部分常量的数据字典定义
+ */
+import i18n from '@/lang/index'
+
+const table = {
+  controlStatus: {
+    0: i18n.t('module.equipmentManager.statusSetting.controlStatusLocal'),
+    1: i18n.t('module.equipmentManager.statusSetting.controlStatusOnline')
+  },
+  communication: {
+    0: i18n.t('module.equipmentManager.statusSetting.communicationOff'),
+    1: i18n.t('module.equipmentManager.statusSetting.communicationOn')
+  },
+  category: {
+    'M': i18n.t('module.equipmentManager.baseinfoparam.M'),
+    'V': i18n.t('module.equipmentManager.baseinfoparam.V'),
+    'P': i18n.t('module.equipmentManager.baseinfoparam.P'),
+    'R': i18n.t('module.equipmentManager.baseinfoparam.R'),
+    'C': i18n.t('module.equipmentManager.baseinfoparam.C'),
+    'I': i18n.t('module.equipmentManager.baseinfoparam.I')
+  }
+}
+
+export default function(dictTable) {
+  return function(val) {
+    return table?.[dictTable]?.[val]
+  }
+}
diff --git a/src/filters/factory/index.js b/src/filters/factory/index.js
new file mode 100644
index 0000000..fd56aad
--- /dev/null
+++ b/src/filters/factory/index.js
@@ -0,0 +1,26 @@
+/*
+ * @Date: 2020-12-29 16:49:28
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-03-24 20:32:40
+ * @FilePath: \basic-admin\src\filters\DataDict\index.js
+ * @Description: 部分常量的数据字典定义
+ */
+import i18n from '@/lang/index'
+
+const table = {
+  alarmStatus: {
+    3: i18n.t('module.factory.abnormalAlarm.processingComplete'),
+    2: i18n.t('module.factory.abnormalAlarm.inHand'),
+    1: i18n.t('module.factory.abnormalAlarm.waitingProcess')
+  },
+  alarmNotify: {
+    0: i18n.t('module.factory.abnormalAlarm.email'),
+    1: i18n.t('module.factory.abnormalAlarm.wechat')
+  }
+}
+
+export default function(dictTable) {
+  return function(val) {
+    return table?.[dictTable]?.[val]
+  }
+}
diff --git a/src/filters/index.js b/src/filters/index.js
index 9822233..4ae44e7 100644
--- a/src/filters/index.js
+++ b/src/filters/index.js
@@ -1,5 +1,15 @@
+/*
+ * @Date: 2020-12-14 09:07:03
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-22 09:12:23
+ * @FilePath: \basic-admin\src\filters\index.js
+ * @Description: 过滤器定义、多语言过滤器修改
+ */
 // import parseTime, formatTime and set to filter
 export { parseTime, formatTime } from '@/utils'
+import i18n from '@/lang/i18n'
+import Cookies from 'js-cookie'
+import moment from 'moment'
 
 /**
  * Show plural label if time is plural number
@@ -14,6 +24,40 @@ function pluralize(time, label) {
   return time + label + 's'
 }
 
+/**
+ * @param {string} type
+ */
+export function i18nFilter(type) {
+  const n = i18n
+  const keyArr = [n].concat(type.split('.'))
+  // for (let i = 0; i < keyArr.length; i++) {
+  //   n = n[keyArr[i]]
+  // }
+  // return n[Cookies.get('language')]
+  const result = keyArr.reduce((a, b) => {
+    return a[b] ? a[b] : a
+  })
+  return result?.[Cookies.get('language')] || type
+  // return result[Cookies.get('language')] ? result[Cookies.get('language')] : result
+}
+
+/**
+ * @param {Array} type
+ */
+export function i18nFilterForm(type) {
+  const n = i18n
+  const keyArr = [n].concat(type[0].split('.'))
+  // for (let i = 0; i < keyArr.length; i++) {
+  //   n = n[keyArr[i]]
+  // }
+  // return n[Cookies.get('language')]
+  const result = keyArr.reduce((a, b) => {
+    return a[b] ? a[b] : a
+  })
+  return (result?.[Cookies.get('language')] || type) + ' ' + type[1]
+  // return result[Cookies.get('language')] ? result[Cookies.get('language')] : result
+}
+
 /**
  * @param {number} time
  */
@@ -66,3 +110,24 @@ export function toThousandFilter(num) {
 export function uppercaseFirst(string) {
   return string.charAt(0).toUpperCase() + string.slice(1)
 }
+export function timeFormatter(timeObj) {
+  if (timeObj) {
+    return moment(timeObj).format('YYYY-MM-DD HH:mm:ss')
+  } else {
+    return '-'
+  }
+}
+
+export function handleLimit(string) {
+  if (string.length > 10) {
+    return string.slice(0, 10) + '......'
+  } else {
+    return string
+  }
+}
+
+export function getSimpleText(html) {
+  var re1 = new RegExp('<.+?>', 'g')
+  var msg = html.replace(re1, '')
+  return msg.slice(0, 10) + '......'
+}
diff --git a/src/icons/index.js b/src/icons/index.js
index 2c6b309..6e43f6d 100644
--- a/src/icons/index.js
+++ b/src/icons/index.js
@@ -1,3 +1,10 @@
+/*
+ * @Author: zwq
+ * @Date: 2021-03-05 16:34:46
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-04-23 14:31:40
+ * @Description:
+ */
 import Vue from 'vue'
 import SvgIcon from '@/components/SvgIcon'// svg component
 
@@ -7,3 +14,10 @@ Vue.component('svg-icon', SvgIcon)
 const req = require.context('./svg', false, /\.svg$/)
 const requireAll = requireContext => requireContext.keys().map(requireContext)
 requireAll(req)
+
+export default {
+  // 获取图标icon-(*).svg名称列表, 例如[shouye, xitong, zhedie, ...]
+  getNameList() {
+    return requireAll(req).map(item => item.default.id.replace('icon-', ''))
+  }
+}
diff --git a/src/icons/svg/ArtManager.svg b/src/icons/svg/ArtManager.svg
new file mode 100644
index 0000000..ae39e2a
--- /dev/null
+++ b/src/icons/svg/ArtManager.svg
@@ -0,0 +1,140 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="31px" height="36px" viewBox="0 0 31 36" enable-background="new 0 0 31 36" xml:space="preserve">  <image id="image0" width="31" height="36" x="0" y="0"
+    href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAkCAIAAAD+cXYAAAAABGdBTUEAALGPC/xhBQAAACBjSFJN
+AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QA/wD/AP+gvaeTAAAA
+CXBIWXMAAAsSAAALEgHS3X78AAAJcXpUWHRSYXcgcHJvZmlsZSB0eXBlIDhiaW0AAFiFpVlJliSp
+Dtxzij6CMwjBcZj03l/8+2/bhE94DFnZ3RGVER6OEJLJkISXSfV//zd/4eUDR+NTcCGHvgW875fY
+tlkquPK2OgqM326O7J/bPc+R/jb7bbu13kQK95Ia17HljXjjWEaRjZoP457oy71e53P+oQhX96tC
+hYs5Dg5BmDjgNz6PUdquC/YcyEcXJYqJ7VYS5uRIeA+m2F/vL797ZHfBoAubfWXozZxOJQH24Hqu
+hIU+WBqJXRjRQiFRCETJ0Gny6pzcU0ivVGHEYuomsAuCRUr0p48xOWti8pxqHSxxLKoKf1DwuiQs
+b7BuqBdmwaJFh195DsKa25ZjPN/Kgw+dcqg3DQzCWS87nOsviy4OW/c5mkGBCAo2nOLDX3vZH7wO
+w+xXyDES1Xb3HJk8IheZYeynSZgwgv+oTi27RswyhHWAz6dJAwthP30YAcKxBVDFvA1NDF4NP2Lk
+Y438Eny7uKbOBQb65+D5rU4Hh30aQwS80YUtysqSaxE2isEvBOH0zwrNKQiFgcD1CWF0nibZPui8
+FKutt7z5eQI5gI/xZYGNE+DFyFNyt6ggIhSRFGC4g7zFlb3gvkhJW2RNHq/ZQe8bHXgKXpArIShG
+/pXDOyHVkm31+A8OexChPeQ3jZqHx/ld3G5ReY0liGNSd+jOR/iMvHJtx2hcU9yOVdBfQTFT5upu
+jPyyTnvOMZh0IPFlQn9dhNQq2Picsey1rb5Nmdi9L3BVFD+uyJl9s4R0ATMr1/P3UsPirW57UPuy
+yEt6WU1Wys1aJsvrIRu2vrp2hJvTLWDz+7gdy2IX51TRe+jtvZrjtbxMy+yL9HTdHJrpvq/4OCT4
+mfQxCWDv1ys+9ilTrMk5l3ch7+5rOmv9qwzd1+7C6CG0YJDu23v85cvLfLoJflwKvk38qOjfTHyd
+99GiP01c+HMrequq7qCLu7PIwquVzWEdN4fA3YX5K7GtAVhe5wpWzihQH2SS46LbizS3sGt7k7iG
+/1cva77cl+fqP6nYv74oepN7sW0m/3bVYXcqmlUdQyMGNBMfS/L+AgDIU/68d9lLaGtm2v+SHbc/
+ZE8trEc6NqvAjYg2Oq/JdIlT1LKJhKtNocdKLTRzVTX7g0t0TzwGz6jyOWIigUnfTGf0RRM9dLLf
+paLWZzMrQt4707UxRXm9rECX6E65Y7yjrJPig/5Lg0RaIO1s1JcIMPrXt/6/rKpPmQv0bB6Hgf9A
+g7NjC/+VBuZTWf41DTxwQruhpxFD6eNp5NoE+5Hls0zoCD7vx5pviiIarTaLtkXP9F3ZUOh1QZyO
+wE4YHzLghXDos99+9mrpFD+l31Xfuz+jBwJfuAQ7g8xv3JIHt16kzUUxjsqmqERburWs3SUmhD+p
+NwfB3sR/VF/hPGik7qtdSk/zzmFrHy7omeAx5cHoMWlBJ0Z5NsbbcQqbJ8Yv1CvxoOarrPnYHS4d
+5C+UV93SZmfuz+JLx5bWBY9v51E7H8l/KYQr6ezaL2FsrSzXY4X12ch9Ngvlpa69lqejdvbDQJBK
+S3aaktKTyOxSG0ig+KC3JdHztGrAmFJi3GNQd/WsKJBQgFN2CtPnNN8Zfw2feWtwsaLdq9Za2gR3
+2yaWbLIeb5qfCTK4b+Zgm1Pav3zbrW/VYMWOjrlb7ZsHcA36jatwXs3rZRlY91j0xaJ/8hbRuEBB
+2uFHKLxBidIIOatB9voJ1PoRWECMw6L1ckSQJhXO9+Nl5onaIl0HPfeh41SwAe8U/HHqcdzw+0xz
+T7X7YFDLpmKnD62gPOHbb837farV8YAvhypCAcGL1nrj0NojmiggNmRbbLXBOe8wTq7hXOu9D+yS
+6xadHLZ/dgRPhxWLguQ9tBRXXYKiiCzrkUKRPJsrWq2QfLojGiCduArqN99RLwZOHjh2cg4FObmG
+TA15eQQJhSqZRp0GiaY23b9IQiVW7NseNdX4+QQKHQASdebClRt3Hixsd4TcgW8wJ1hAQ/EgTzcS
+DsRF3xF2HBjxtR4SLtmM7HfC0CzBcQMKAJHohlUksgueQP7pfxDrsMSJgp6MPdzvbgejeMsKiKZT
+fRAFLN6R+IzDTzAYbGT+hARoWeZGXoKuuCg5e5dSs6D9Kiw0Rh5cDH57H3vPxFSkD/wLrE8EuVMq
+yLcyau1UC7KJcG6+gDtSSuXcew01F9uQQMQMdk562PSU2sLoMMXWyAMF3Y/qe+kj9U62I3sXWL2V
+WlIMlUCtZuEM7iM1JYP+RypLrhLxJaBYIZeDOLSY0moGST3bxtaX5qxLbfiGc7O0PABR0CcySSyO
+EKUHsjlLdwCWnCifsWhnIMgcRhvse085ScoDtxFTeBTFDSzMLGNLpQAuA9hq91ICWsrQi6BXqVR9
+SdQlhoauUUAJYBJdrbYK2o9ua0GRHIRSg84KHBgRR1EGgVwbWYaU1FJK1WHrQ1sfA1qiYKFWEAS4
+ChwztFoYYqFFOuzz1bbC1jRJjIwzElI76FdrYyeh1VSlNniUcqOMPW1HGXNAAlwCObbR6igbdDqO
+iJqkXgFeaak1RCkJDMc3vG4d8fHZRqTfjv7BAvYMIgSEJI3eR67QYKFEg27kiDlS0Yw6gp4raM+K
+9qiZqIG6GUQClTww32zrzkfvc6zoqUB99rhlbN6GS2njhKIoKHnC0XYqNYThGlwqPro0RIrVtEJR
+rGAjwliwkFJFEIPabQIUlAIiR2iJrRKmBFbKVticpXYEyrEUXItDm+AmdX2b0GMmlg+lgUfYL0gx
+QBGD6EKKTx19+4aoBRxTETfwWhBvEcotdQE3ZNA2EpbE1oR6CnDP2FHbGEgrA6FEQnI1cYq22ZFh
+K2IyOCdEpwewVIOpIdOIFN8jPIXT2BVSDTIwCFEQhoyLLGhwNANqCgAWMnLpcDazKEDeQ0/Hlkf+
+UDYW0UC1gdRnQIuo3jrEGxvIaW6pklOWHMC4Iq1bgWbJ3EZ32GeYxwP46X/I5DoAPrztBlu/euKe
+vNqE3YF53eE3RFFTK3Y3AqnVAItgytC70A9R+NbRuI4JuyEYio3W4TYX8mOAijoGQ1kAKLgIiEJC
+AUL0sNmaBlg7Q/CwYqciEKllMW1gX6FgTBzQhAPIvLR6S3Wl+3nReReWBH1Upccs0GdDtGfLq02A
+Skc0B3pf++r57Zd7pzZ/K9H75p8qUTl9ekL48/GycVt7yPWhCm93ozldMX8DweB9lU78CVYAAABE
+dEVYdFJhdyBwcm9maWxlIHR5cGUgaXB0YwAKaXB0YwogICAgICAxNQoxYzAxNWEwMDAzMWIyNTQ3
+MWMwMjAwMDAwMjAwMDAK+K8m0gAABAN6VFh0UmF3IHByb2ZpbGUgdHlwZSB4bXAAAFiF7VlLkqtI
+DNzrFHOEQqqS4DjYwO5FzHKOPylVm7/ddvesJrAjABeqVOqPbfrnz9/0F17SWSa5y2StJW1U9KbF
+MidlLWra6SgD8zjdbreJGeudZl8pJiUPkvJgKQtkW+0ot9YbNhaxPo8lK84AFMEmZplk5CR3a6W3
+VrFRB1emDSf/rHcdTfweuQawyTo5D+nrjVk8mCwwWLv5jjzv4FTaPJRE7OQmiyUpPIrwAD5JGoFW
+gb1YayRL8Wus3bHKcZ95wrkelXgIsT4Ee4gYp92bv8xjsIBM4Zyz7kxjiptuXmsZ7yQ9zJksXjwa
+pHgMxgbNjXT+npkwjkNVAEYmhvi4R6yFWdDg97csQAGhQiBYu/BUBw9B4nFfG4LDJoNjnVV17DoW
+7uAj31A2LiHCtRAuB5jSgk9y8nBtesRqgcQWOXFAAgXWuxtP1XoXxLFgY/HQu6nQWoGbIzDyqYUl
+YASD/SrRe8S/eB+2LzbQuV/ygBL4REVLW98AcDgxRCznYlpDcg5OZ+hbcK9QQ9AhMxWONJjCyShX
+h68eJc+Zo37fcJaoz42jT/RX+EW1w2dP0gLTIgZcXMOk90NlH+OUvH5RyonbEj3Lpc0IVLszDdhc
+cq5nh4+KZ/AevNbjCO5zwTeEU4PCvOEGug6OaQM7qCdrp2rda1ja4OZoJOUFbLQ7rZDNGpq+ofwE
+OmqvV40GMzhcLZHOP6DdI1LqdYTWH0wOrnYfelAc4MvsaqrQQj3Kos/emyQMGCPl4BsXrTLImy5m
+SY8GZ+DY4NjhjOYv0mYRlEBm79OxrBg1CoA2ozNnycXNw9H79F6xp4pYoUfTOGjOs2Zda36mmN7W
+7G7t6tiE2fcHkwcR+i2TBxE6MnnM1hUbjOQIAFhZtxtOCIg1MtJ6EWHtYNDSfXp/InjMjOAtyBlv
+HDlMX0mSvh/ul6bSW+FeaTZDapbKb10V9H5ZbOA8v3EF2Ma7BZztheHh+3knqo2Ids71Te4th6/T
+10fBtI3UWVBoG5XowKPHBYHOZ9HxZzvzJ6raUlwuZjDBUo727QJe79CmEn2mPihMgIUR25Z/MmnZ
+ny2meD48ayVvGFVtotmooIkMPk23ZwYtrqDZF+l3RtI6vL8xkj6pp1flRK/a5yfdkz6pp1flRJ/U
+06tyok/q6VU50b6eeNr3vq/Vbzom7UbLKinznFerJ6ankaNPO+GzyNG+E86ad+Pmu2lDP8mZM8Wk
+3wy+d+feT2b/Ib4eJDp+5zmkQXw/W9Jg/6XU77A3tv/mfQFdQBfQBXQBXUAX0AV0AV1AF9AFdAFd
+QBfQ/w1o+UudVv+pF//9Kn4Hsfp3OP0LX5+MawM5EcQAAAABb3JOVAHPoneaAAAHgklEQVRIx5XU
+24+dVRkG8Gedv9Oe6e5MZzotpRQo5TCBcjAtCFYbSSgB0aAlGCQkyo0kIsEQvfPKGAw33EujJnIh
+IkSiQi3BihzSAGVoxc60UJihc+7M7G/v77QOrxfezpjs9Qf88ubJsx5mqfvcUfv8G0vnFvK8zJzI
+GCt1qK1Vl481t+zd+di3073JKtDxYZhz6iJt+QBRT/TiZ15Yef/9i/PzwqaQpRB6kVtWGXn1rrHH
+v5rceUcitt/2k+f/uvjRZIc5qwPjrlI+j12pqMyX5mamy4tztO/aLamUjKeu1kxCEltcYU//+szr
+7ywvzXy+2VhyswoJR097FqyfmSnmzy97PiCff2Np4pPOlbs2H7p1aGuqLAJEZTgan5w+23nx9eWj
+b174wb3b21EqGSRACBCYnO29enwx52P33Xn9/j0tH7oVBh3GYkJe+xePL586vzI6MS3PLeTG+Ltv
+G37i/oFBHmwITigNUUKenElee6/oFuzsXOeGyxPvhdRMeB+EPzM/V6iBVit+9KFtNw1DU6tmICAC
+SotOXh5ZKL6Yn+PdqsVZMpbpQR7gV1WwMSBAGaZGNqEKXW/MSifn8M51wXuCVEC02KuRREU1v3MY
+xi+zxke+jgNY6CbCto1s2NAX88SdyBwTFsERgWLIuIFxUICChQvBe9IyEjCRadkG8AAg9JCHJluz
+AJCBEwgGBB9ERQo6oqjViDEOFIyVEJXjHoo3DA4IcHBbrENgFqGMCMwCAUxqcALARIRAkgXygFAw
+8ArgqGRTCHjWDe5CpCXXodbBKgQJBuIcEGQ1CoSUcXBh0yzwUMJ6AOAM7HMg1GVXS3BmJUfwhZPE
+4EFBAALQVMreXAZIQVSpVs+BUwApGSAFcxiQtKJY26x5lfquVkXSJBSkRaV2+oq2BuZ4E/RO8uCs
+zQPAmOMU0WDEQhEym251yDk2eiZEMbaOjl7o4JWJpWOf0xJLnUoZkERWUklV1xUlowARLAvrGnIj
+3CLKYty+T80dV0ffChMfzuzbGT/yjR037UWbaaF0aJrN2VAkOVAT4yDRh86RxrA/fGDXSHv5N388
+3VkdfSv3702d2HsNffMruws55vRSZUvBERrPjAaoD10Q6qLYHQ8+9a2h+/aPv/z24m+PLpzvpQsn
+s6lPP9r/pb1yYEuxtOSc4yJhhHX1jXP3SJIIwYm6uWps88E79uy+8kowJUS7LFlR1o6R0pEP9L8f
+0F/uJIOzlRSD/5ig5/568p+ne03YNKqbyL/z4KHLN22OXjpxDi4hElBUk48Y70OvsKTV8CuvFz8/
+8tEZ2eopeamxh64f/tHhG7dvwl/+fi4NZRaNegdEPqAEpX3ocdOuNJ788/kZf/W4nTh8aNfdhy65
+bASJtVaoT9W2RVEaPs1oF0IheAsIfehQan6lmZ1e3TIy/L27djx0zyUDHKIBvFAckevuyBK3MBcZ
+eN9x3Bj008iaQEKmSUT16qAk47ucumCyVMNLJU5NdpuchpIsOIi4zUn1dzvxwIjD87Uij9JLSWUl
+sm7XPvsvOnb0g8/msl7h7zm4NUoA72UPaPXTGYNAFZdhi0k6dcre/QKvHVt66/js6R5EYAorB28Z
+/PGjlxX1J0YqlWTrIhvqITTBSSVdL6h3P8jPvDB7ekZ0qnSH+mz3Hvbod2+++arWELcSYwRpm0YL
+2YfOORO6bNwshbTJt0993O0qHm+tDt2y7/sPJ9s42lgGZdbGDaA1QP3k7qGkkkSUZc3uK+TkOeZz
+vbLUPfLymVNTyXe+nD18YLvRkAJcgPs18HWC33AJZJC1BNeDdT24PQl/+MX4zw67r7c/lsPq1ET3
+6SPFgV+eeHUBTHRETlYMrh/Ahrf7YK2zrqyb3Nq19gAO33PVs8888Nj9uw7cyA2Wzk5dPPK7ybw2
+iFjpbX+6UBAaWutIa0mVJMRwIwkevyv91VM33vW1q7XZ8eF/bMkMBKRQ/XUG5OvK2Ya4MEYaBChe
+SG8My9tZa2zEl44HxxsOWxcyTvrUwSIdSxE3XjmrEKCRgCRCALNSWyYtg2DMK0PeYb0h+H/7zsgF
+D+bAPGNgIJJoABY7HxFnzveMJuYtiMQGzMY6GAXvfOlFDeMh4JmDBgkwKQWPJJgiwUKEGtS3TmAU
+hPRC+8AL4o1FAeka5msbQoNYJWXujAJMVsGtrxtlWGjOzfoOM+Cr4IWDdADBTebaUYgr0mYT8zKu
+BxpIQCSSb0sU5S5kncmLAaIX15IcryE8Q+P5Z9NVQmZARPLAtfHfTiy+9HbnjQ8ubEl4CJl1QSKX
+PJ7sVD0MZdHitePXQNQIRgc45yGb625ItekshivufuLEnm0ROWW4vuibQUG+a8/3srqKrri9ES/+
+/pn3T56dXfOFSxc60YXVNHfR8lpvsWw560bk3BMPjh+8zmjUAIFLLji4i1PFhZyanM2bds9tml7O
+1wq52JMrReg0Uthm/461nz55PSOfz5bZn97Mpy8s+CCgR3pldyBtykaMGrr31rHxnQxkQRVJ7WEY
+AAchAsDf/nd17L3OaolMeSLXIc8i8rDj7d2PHKx5HP0XlTwYFWDFGg0AAAW0ZVhJZk1NACoAAAAI
+AAcBEgADAAAAAQABAAABGgAFAAAAAQAAAGIBGwAFAAAAAQAAAGoBKAADAAAAAQACAAABMQACAAAA
+HgAAAHIBMgACAAAAFAAAAJCHaQAEAAAAAQAAAKQAAADQAAAASAAAAAEAAABIAAAAAUFkb2JlIFBo
+b3Rvc2hvcCBDUzYgKFdpbmRvd3MpADIwMjE6MDY6MDMgMTQ6NTQ6MjUAAAOgAQADAAAAAf//AACg
+AgAEAAAAAQAAAB+gAwAEAAAAAQAAACQAAAAAAAAABgEDAAMAAAABAAYAAAEaAAUAAAABAAABHgEb
+AAUAAAABAAABJgEoAAMAAAABAAIAAAIBAAQAAAABAAABLgICAAQAAAABAAAEhgAAAAAAAABIAAAA
+AQAAAEgAAAAB/9j/7QAMQWRvYmVfQ00AAv/uAA5BZG9iZQBkgAAAAAH/2wCEAAwICAgJCAwJCQwR
+CwoLERUPDAwPFRgTExUTExgRDAwMDAwMEQwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwBDQsL
+DQ4NEA4OEBQODg4UFA4ODg4UEQwMDAwMEREMDAwMDAwRDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwM
+DAwMDP/AABEIACQAHwMBIgACEQEDEQH/3QAEAAL/xAE/AAABBQEBAQEBAQAAAAAAAAADAAECBAUG
+BwgJCgsBAAEFAQEBAQEBAAAAAAAAAAEAAgMEBQYHCAkKCxAAAQQBAwIEAgUHBggFAwwzAQACEQME
+IRIxBUFRYRMicYEyBhSRobFCIyQVUsFiMzRygtFDByWSU/Dh8WNzNRaisoMmRJNUZEXCo3Q2F9JV
+4mXys4TD03Xj80YnlKSFtJXE1OT0pbXF1eX1VmZ2hpamtsbW5vY3R1dnd4eXp7fH1+f3EQACAgEC
+BAQDBAUGBwcGBTUBAAIRAyExEgRBUWFxIhMFMoGRFKGxQiPBUtHwMyRi4XKCkkNTFWNzNPElBhai
+soMHJjXC0kSTVKMXZEVVNnRl4vKzhMPTdePzRpSkhbSVxNTk9KW1xdXl9VZmdoaWprbG1ub2JzdH
+V2d3h5ent8f/2gAMAwEAAhEDEQA/AN36ufVzp/XunnqfUzbdlXWv3v3kcFaH1YpHT+u9W6TQ95w6
+BU+qt53bS5oc/b/nIv1A/wDE7X/xtn5VQ+s9rejdUd1Pp2cKuoZLWC3Bc31PUAhjD7f5v2t/8zWl
+KU8mbPy5kaNxxxOsISjOPD8vyelqREYY8eWtRRmf0pXFL1LBq619bndOznPdiY+J6tdTHbRvLmt3
+f+CKr1f6u9P6Rm9NrwTbWzqF32TJbvJDqrYrsb/mPRugZeXmfWx2Tm0HFyLOn++oyIiysB213ubv
+b7vcrv1s/wCUOhf+Hmf9UxOxynHPhwE+jgAlC7xy9MuL+8iYicWTIB6uL0y/S3f/0Oy+oH/idr/4
+2z8qyMzrOP0b6z9XzbqDkWAU10ARo51bT/OO3em3axa/1A/8Ttf/ABtn5UPptVV31u65Vcxtlbq6
+Q5jwHNI2M5a5aFxHMc0ZDiiAeKIPDY92HVq0TiwgGjYo7/oSZfVvHzc7qNv1izHUg5FIoqpodvDW
+y1/6R7S5u/2fvf5if62f8odC/wDDzP8AqmIPSsWjp310y8PCb6ONZiC11IJ2791fug/1nI31s/5Q
+6F/4eZ/1TEcevO4iPlMQYCuHhhwemKJ/7nmOoNS63Li3f//Ruj1vVu/5v/tT9n+o7Z9nn0935/p7
+fzf+mt/6l/ZfUzt32n9qbmfa/tf85EH0tv8AJXz8ktbmv5iflH/a/NH+f/l87Sw/zkfr/c/6m+8f
+Wz0v2zV9g+2ftb0f0n2L/Qz7fUj3fSWS31vtDP2v+1PW2Wfs/wBaf6Rt/RelPu9Xfs9LZ/hfTXjq
+SOH+Yhv8h2/3R/1L+r+6jJ/OHb5v+pf4b//Zu5jQZwAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMS0w
+Ni0wM1QwNzoxODozMCswMDowMI4FI1wAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjEtMDYtMDNUMDc6
+MTg6MzArMDA6MDD/WJvgAAAAFXRFWHRleGlmOkNvbG9yU3BhY2UANjU1MzUzewBuAAAAIXRFWHRl
+eGlmOkRhdGVUaW1lADIwMjE6MDY6MDMgMTQ6NTQ6MjVFiv3wAAAAE3RFWHRleGlmOkV4aWZPZmZz
+ZXQAMTY0zHsrFAAAABd0RVh0ZXhpZjpQaXhlbFhEaW1lbnNpb24AMzERpTatAAAAF3RFWHRleGlm
+OlBpeGVsWURpbWVuc2lvbgAzNlJXeosAAAArdEVYdGV4aWY6U29mdHdhcmUAQWRvYmUgUGhvdG9z
+aG9wIENTNiAoV2luZG93cynnqcc7AAAAHHRFWHRleGlmOnRodW1ibmFpbDpDb21wcmVzc2lvbgA2
++WVwVwAAACh0RVh0ZXhpZjp0aHVtYm5haWw6SlBFR0ludGVyY2hhbmdlRm9ybWF0ADMwMkUkal0A
+AAAvdEVYdGV4aWY6dGh1bWJuYWlsOkpQRUdJbnRlcmNoYW5nZUZvcm1hdExlbmd0aAAxMTU4OglT
+2wAAAB90RVh0ZXhpZjp0aHVtYm5haWw6UmVzb2x1dGlvblVuaXQAMiVAXtMAAAAfdEVYdGV4aWY6
+dGh1bWJuYWlsOlhSZXNvbHV0aW9uADcyLzHahxgsAAAAH3RFWHRleGlmOnRodW1ibmFpbDpZUmVz
+b2x1dGlvbgA3Mi8xdO+JvQAAAABJRU5ErkJggg==" />
+</svg>
diff --git a/src/icons/svg/ArticleManager.svg b/src/icons/svg/ArticleManager.svg
new file mode 100644
index 0000000..158aa53
--- /dev/null
+++ b/src/icons/svg/ArticleManager.svg
@@ -0,0 +1,152 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="36px" height="35px" viewBox="0 0 36 35" enable-background="new 0 0 36 35" xml:space="preserve">  <image id="image0" width="36" height="35" x="0" y="0"
+    href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAjCAIAAABzZz93AAAABGdBTUEAALGPC/xhBQAAACBjSFJN
+AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QA/wD/AP+gvaeTAAAA
+CXBIWXMAAAsSAAALEgHS3X78AAAJwHpUWHRSYXcgcHJvZmlsZSB0eXBlIDhiaW0AAFiFpZhZkuu8
+DYXfuYosQZzJ5XCsykP2/5oPtCXRQ/e9+SNVu2URBIGDQwC0SvXf/1H/4rI+OmWTMy67fjju69JT
+t0P7wqPV1XgX//Rd8cKsuY/P41Zs/Kb46LblPF21PfVRTEreJetDSU773EzdLLLlntjjqeB4e+Cq
+8Ygm5DCiczPiFt+9iqdD1/r+iDY6b4MJk7vdStyaHDz3iD70/b2Sge1FD9GcX+e9MmpzTKcSx1ue
+z4XWpV5NDT4aN4JGoffOeQ8UX5zbl5AnFKoQWE389PFwk1VKsKePIRkdko2p1hFnGJuqEp8KzvlK
+FLyviekN68YbFi0YvuU1hjX+UnW6lm/tzrrus6s7DWy97DCm/xRNFGnzLZzr+Vhr41R8uqsv851d
+o+OEXN1uOxvEePMajQWWCTFi6+cI6gxRhCrqc2hZZr9MYhnw+TYyQoRHMXwZAuLQnPsysiD4tFut
+GNlQQ3wL/s4bnHMR8M8xe78PzrBNg8M1QmrcEeZOk2v9KBiI4B/kwKg9NP5JEIXOQ/WFYDDWL67d
+Eup9ApHD2J8nvF7eAD7j3qtrwhET8DL0Rb4QEB/ICdhtENc86dfssCzyR4iSPN7Tw/n+9fsFuRDC
+hxCXw+qvHBBLjt8dfsGIfWwF/G2CbB6Lw/lTvT6C8JolfAxJiTv+zkd8hvhBw3FNMQ+snHxzgpkQ
+V3ajCvFtofYx6YnEY8KHfH/Iq3uCF6sw8scp9X2JB3ZfLLpykB39fivRdWn7Yt6/yzz1rGFhW/kb
+tQ8709tic2dcWVGb2/Ui7I7NsrMS63GP6yua6quAnXZT8Bl6fS9mor4ULdOOt8Rx+v5UvJVvwceQ
+31fSZw5gc4miHR/9KlR0zrl8ylhzP69W4viiyPr7+awarzKbpWf0RNEj/vN/uKDHpeB8p/7pxPfr
+q6K/mfhV0Tlx48+l6KOqmidbzJ1FNmbrnc1uF3iO302YdWcw9gDs+cjYt6WSn1J5a5BGUbaYl/QS
+TXv0iTsFPpL/1+udqOfCp4/2z4p+UPFNTH1OWAWgXfnxdGAVdkZGcDQUH1V5swgESFb2VHpBfqb+
+H9Lds5aoH/OhVNctJ5/jZq/7Wz69MuQVqyC1k6QrnSEdOUWzXZVN/9xoKGrJNfE5eqIS7xHY9JPl
+McRH8pdu9mexIEV6FYX82ZxSYq+llNsEnwKd2u4FH3owiRK996r2PmwBiLSw+xngEbWy6z6FLtBf
+zwM/0OALj/4ZDdTdU/x/NPjg0UUDGwWb9suJ5NoDIqN+EnKd4MdfjzaBZqutwq1pj38RHAL9Y0Ui
+B4ddBl5kXV8998tpTh3pXfwX1Tkk4VUsTq8Yx5tb56adOwHch/hTKgZhUxCebR1blg5TMcF96v+m
+Hg3+VXpXrz70V7yHRuK/2PXJ4eWvfvGAc4H6nHLFbSxa+MuBRcjnQWydGnfi7Km2hCc1fxLerhW1
+s4sUefWHCTVeDeHv6rcfEEzaV3z+N/bRe13XVut2Ymi1N00M7k344znDwrsC3y2zm+917bU+SeO0
+/o32eM8JFFmxVs/Z05yrUW2QQPChv/VTjtQCtmFQODHuQdRdjetSwEk7ueVyWnfmr/GZj4aLVZrR
+qrX2x+R1O6b2OmnL7ddnQqjd9+u311v9PLRuTV9buTtNc9fSOg9NMZH/PLnz6RhKu30drPtrG/5g
+0ZyCNQrSA35CYalQEiHDW01johdq/RlX+EFYtLLzGUJ/6O1+veySMEzk7EfTKWAXHNb3TPXD1MeZ
+w75P1Y8xJ5YtxUZ+t0IiUWl51ax9TNUi4PhnqCLeEbygtTW09wSTAqJd1kVX7YyxhmFvGmdba60j
+HyXTNedUtn82Hk+HnpqCZC1aiqkmWU7qLlsyKLmzmSLFitzTjfcDzk1Tob5qtlMvBqcPjp4xu0JS
+ri77RmIebrriq2++++GnpDbZv+ziEir7tgfJNHb9ikU3EknUOZZYY4s9jjijfiBkngC7DSvBw1t/
+A2HgLW2HUw8cIgHWFhGTdCb9nTg07XGc/hlEghlagMjGWQ/3l/tuasMSOqgHCuswjf/dPNAoVkdB
+RPKptA/DPJDYgXiFQf0dDiY+kHgFAlqWtZGt8Ojpq+Ai5BzZFlLgqHFUqm1A9eCwFYHP20LzZvG6
+pDhaqDr12UfXfQxSre+TrV687cWX2VKr0q2Yg8VIPiU5SZFedoK21bMfQs8zS7ot5No2c9TD56YM
+3DtSA0uyBkWpaB2O5tPQJgGO0c2bfFTjZqptHGjuXXp/EtaQI4GTkx+rSIY8smZ8ditykSMjCucI
+tYLaMRk4fNfFFTNrhx3TJh8nfk3KiG2GlNlGVZqDJxmUY0eyFIZZQQMEep+5j9wGjts5rMWFSX8W
+ZzPGlTp7rhSGQVER111WszIfo0cvgT0VW1uY2N4yDBp4OWvVqAHVFKfN2IEaEIo0yxVE51Kl2oGx
+WD/qJDo+NelB49A1N4HB+k5RHuI5BS6znu/WNDcKpoY4Chj0pSjk1gJFFue7IbDL0FbBj4XhaMkW
+cQZhWE3AU0ZmhTjybIBaenDr6KWKpxBgJqmgETkw0d3VMktNndZpDCcHN8osDIvNNw7WkUajikVH
+A4CWqi3HVI41+V6qqQdIm8Syunq2vgUayjM6aTmwzvbEbhrsuMFKremRa6frLx0HnOIQHx11z2Jr
+ySCbauyhpx6ocb3XWcXZYol4Kb2C4Bx1dMChPQH6zq6zIKtIUA6PIXSfZhCbRhChhGDP9oBUFRaj
+GoIUwuF8T5rCJN6XXBJuOG1GV62XDkXqI4iPDcGEXIGKNDu08DhL2vSTvUBEyAQOjnTwwuCOqVgU
+le1SpmvXFaNJ3oRzMgdSs/eh3xDfip5YKowTxEaKxVa4QBbIEHhOl7vqMKqSrCBipQfMeM00kuFc
+BJ9YXvsBG3mYMBSoaq2TnD/Y7MYNgp8RVAe7WtyBAjPXmeWZXc2ugITRmokY+1WMEhQxD20ZwJu0
+Jvjn1gpZ2ZEEn14Iha8183jwvovWqUtFzZR6K9u4zIUjkWiFGlJsQ4Zis5gdyYpTTMhlUd3pQmvF
+ZpytCZ+t7PcDangg6uSLzGK45Ui6oMaIt7irVSWvzo6dQUZ6IxAlkHjJkM2PPJBqKVZLbu0SJcyS
+X8MJVZ8UgylpeLpQVYueMkDPksQeVmRm1sK8TqaplQrYMU0UCTQNelX4ZVwdHHgyVVPCJhjdzehW
+//39q9b5drktiZE/ngP9iXR20qaIsArpMRCfAnI0v96d2uzvSkRe/aZEBOXXa8+fDZeN++9M108/
+Uo7icZ9clyvqv4URt20r/euSAAAAZHRFWHRSYXcgcHJvZmlsZSB0eXBlIGlwdGMACmlwdGMKICAg
+ICAgMzEKMWMwMTVhMDAwMzFiMjU0NzFjMDE1YTAwMDMxYjI1NDcxYzAxNWEwMDAzMWIyNTQ3MWMw
+MjAwMDAwMjAwMDAKdqASNAAABJl6VFh0UmF3IHByb2ZpbGUgdHlwZSB4bXAAAGiB7VrdzqM4DL33
+U+wjhDg/8Di0wN1KezmPv+c4/BZKyzejlVbiQ6I0cY6P7dgxnZFff/8jf+EvaKxFnzrkOrtUJU2P
+FHPwLvkUU05N6rXzvh8ej8fgPcabFDgSs8bQqQtddkEhW6dGQp3bjIVRcxv6GBI+AaiKRd7roL13
++sy1trlOWJg6KkuVd/yenqnPyjmhBrAJaSAPbcvELG5MFhiMPbgizCu8i3XoohNPckO2IY2+V/Ud
++DitFFoV9mKsUriBzxh7YtTbvPcDPss9ie9MrDXBFiLZu5fLj+Z5sIBM9CGE9GKaF5ukeXUOuJy2
+MGfI9uf7DCnfG+MMzZU2vGYmHveuKACjrBnxoUdyDbOggfNbFqCAUCEQPjXmqQYegsQ0nyqBw4YM
+x5JVcew6FnTwnq8p65cQ4VkFjx1MqcHHkTxc66ZYLZBYogcOcKDg05PGS7GegrhHLIwMPU2F1gJc
+7YGxn2pYAkYwmE9OviM+8t4tX2yQY7+EDilwRUUtW98AsDswRHMIMacSkmNwOULfgjNDM4IOmSF6
+2waDORnpSvjiUeGe2evngqON+t44uaK/wC+qCR+4SSNMsxj4SA1Deu4yex8nx/xFKjtfR6tZlM5Z
+QLU50oDFMYTySXjLeA/eHXPd7uDOGoFUrzQLPgK4PjCBqoO728B2iZu1SSk357Ay4kYD8YbenMBa
+uUsFslpDy1vKp9CWe21KVmA6wpUUafgF5R6RSswjlH5jsnM1fcigEGA0u5iqslC3tGgDa5OaAb1t
+OfiGokUG+6axs8QcjJmEaunBtYKPtAmqSAEMVFYDa1QwFyCidUBlDhoiTMQutjr9qphbRXOUqWjs
+NIdRMyt0DFUAIOBwg9KNYiiIiBq+0nMV6yuEsB3BhnxfNdOtTTk2YfZzYjIRkd9lMhGRPZPpbF2x
+wZFsAQCr3LwcTghIrrSX9SDC2sCgpfq07AimM8M2yiqBUjF/lBYT/zbkJ+bKkb2Hjl/xzBnbMxaO
+U2bIu2x+k8xrOO5xPAG24pENqkwOhvDn1SgjRViNhm0kPjsdwJVV69lsmUW/dDgTBxd8Y0mEIkCP
+KIHGDVZbRCJzLTAhI/OM6Qh/aag+OVwOa1Eorja31985nAek/xMOF3p8LP9r53IRvUX40vIM50GR
+b6PyKShyUPnSuvJ9W/hkU/k+pMHZASEHh8/bNDgLilxJg7OgyLdReVef+MSwoIfcFykzypkx1fgy
+gX4kl3YUR541MpznyQdlgLNupPTMA3BhxLb7Oega2WUP9qa0OVRlPFWvG2UsUcvH3SZfGjT7YnaF
+2xopi5W/Z6TsWocfFjm5kk9njYRcyaezdJIr+XSWTnIln87SSa7k01E6+WF8g1zagHH4U/OwbbLm
+TYl3kTBvrNXLw5XIWSGUq5XwNXKT4vJ2tOq8ftp4ybedyGzymxbwP2lGXwL87u2/SMkiVn6qWLbB
+6+8znHl/ydnklesGuoFuoBvoBrqBbqAb6Aa6gW6gG+gGuoFuoP8r0OH/Lon8+cp+Bsn8x8xBe/kX
+4AM2LWzfop0AAAABb3JOVAHPoneaAAAI9UlEQVRIx71Wa3BV1RX+1t77nHOfSe5NQngKhIcSRIKC
+iNJqeegUxdZXR52OtrZVRqczjn1YHa1Op/VPba3DdJTWzlTp2KooaBlbqSg+YkWCCBhE5ZEQkkDC
+DbnJfZxz9mP1R3zQKfZX6Zo9e/bMfnz7W2t/a23i0HFgQvCBQ9HuA8nd/RgsF2qCsoxqYxNZWOUH
+LILCUNTZ2d/bM9DcRM3Nzfl8vhpWjDFKCSICoKkqpRIsFQhsYCsN+cyUqeOXnoU6aIi4LNLEXPpo
+ML3x7dILL3Uc7KNjUU0ylQ1cyUrtyEGwUBIqsE5pI2NN4EI6nSaiOI6ISEg455hZCUeQ1rLVTjCE
+EFLA8+ScmuP33HbB2c1QxDRizer11dXP9RTLg7Wp8qzpM30J6ILTKakIgg1bbQxDCpWQKkgL1lpH
+UQQ4z/NAzlorhAgBpRQgjGWCTzIYLIwc7jni/MambHH1necum25o486Rux7ac2AwsfLC1PevnDSz
+Mcim4TDkow4AAw4YHYz2AcM5ABACAEAYNffpYgYMAGBgEB/vO/q9NYeGoglz6vtffbhVZubcuv2j
+47On1zywasaCcVGKWGktVUWatLAsjJbOScEKWpFWiK0VUpIQTMQgw2wBy6ylFsIZyUax9uF8J+oS
+NLk+k2tQW3YMFati+jgWb+yyoaXF504anwNgrfFGEsljaDKKjSdM4BvfM6RikhqkQU4pTRQDMaAh
+DQlDQgsBz8EDFCBZc2RFhWUkU/pbFzXlE72RoI7ulOot2Ew6GJN2NR5gDFIOEAHAYPGJhyAYEgpQ
+RA4O1mL0BTJbqRQA53QshYAYdaqScOyctVIS2IzN1w30Uc/RkpIpLVwxCe0ZAIG0YZYTiBTSBg6w
+8pNw0Wh4BBQEMREBjpmYNIFIguHcKJiDIEgWcATBTEKgiawVsqSkNRHGVJ0hGYGTYAFljIJCAAF8
+xu4EG6UFCCIAcvQmwWfTnz0cQQBVoDkzEgkOUXuyw/6nloDnSjaFRIL9Uw4mGco54bQw8SkH03Ay
+ITVF8M3/AUyUIjbkaZLqVIMpgmRfQjrjTjkzLoXjc8o3hfpEfMqZBanyVy9qrjBdtnyqigKRGZZU
+SRgKBEUVqAAcxIB/8s0lIMMlxJkRHxFQS92ECRvbRJG6Viw8rdaQCHAcdkeHHPigdM3KjO/X3jDf
+3XD+1BBQzsUM4XukGIJ9KYihHZw4QaYnWgKAKyOIsshlGXDj3tojfvrbtsOq/tdr2r++aJLKei+8
+03v4uEij8GHc8uPrGjKeBleSBKE8YV0oRSzgYCnpADD5X+gWpQFqAnJm+AhcH9htbO/q5olzZzaN
++GLtm/Efno7jEa9lWq5AmUe2R6ED2EOYsjqjEEspPSgLisBKsKfgWagvDKZDZEEJ4WfHA2jbh/Wv
+78o2tD77k2yvOf3NdrYD/rKF+WyD+PU6+5sNXeva5JXzx45JWCmgEo4TQbrsqMo6SRrakQyYP6+K
+/0HNSWlH4G3vwT+2uE1tncND8trLavMuynvBmYtLAMNmIO2VrQ3vPHf03keL2842136ldtE5WTnt
+S98ZLvLESTULW+vSUkIwiKQV+CJRsDXCe2rzngce63h5W9FT4VXLx6z6xoS81LFORDI5FAZMJCRl
+c142zZ194c69hY3bjrb3BPKKW25/f28pNsG0KbUT6oUi4VxJ6AS+yI8kNGNzu9vweuGSJec8cs+E
+S+fnclIctP4v1x76wYMHH/rjrv1HRupyjZPGytmn19y4og4NTVs+GBgMY7Hy0ln5+nT77qNPPLPn
+ta3FEKSExX+RHzMELlrWlKkRxUMd0z2kTdl3uOPxPWv/1j9x2vhFV8z7a4e5e827hSGkqhXPsC64
+mlL12wunqqVNuGNF7e+f69u0lTfvL+rHBsiV67IDKhQmtr7vW2s9SSDte5jVMuPPN4mEozPrMX3O
+GVu397fvOz6/JbGziHe2uKULGlffOSbDWDsrff+afS/uGLl1kdPKe/yf+yrpzPUXKuVT6erLJ6Ua
+Gh9/fveuAx9lUrnAT0dHokogrWUfUkcxw1gTWhc636v6zam4lLI0Iye7AtPdX5g/bXq2hKptnN2c
+yNsQJjF1gs/S9PUzEnS04PSxZJ1ITq4PFFwlp1JXfDkxf+6Cj7ttV2//4HDZWinhMVOgAq21p4RS
+ENJOGNfE0BAZy/hw166kMvMXzIXTkxu8mlzfhk19F5+1fFwjnt7YEZc7W1tmwYxMztec0+K9vePg
+G3snK6I8Oxc4M6NWNdeyO7NBo0HA8xxLQQDYgAQEQevQ94VDbCl4ps0cGskumDOmLg0wymF873db
+V68Or/5ZR2yR8uw1S+YtOT0Jk4QdWnnJ5Fc/6PvVpqJiUkRQQsNZ6QB4CQAxTIoACB79ZIAA30sA
+EI6OVbD3aFeV8H5n8alXxJKWhrFj9XXzMPu+eRvbcHiwvGxxZsVcP2dhK3ipq+7JZ/tI13Z2HyZj
+mR0kgcjBAhhVmIMIQR6YOGYCQRJgQY5lIgbeO9L/8JNDr20bTMvKaX581+1zlp4xFqIMk7EJhHGY
+9rlnMP3Dn7++qbcxQ0Otk8xNV50NNsyOHbNhDj9tJS7HumxdxI7ZMVtmy+yYjT42VDSsQy4OW367
+j29+pHvK5W/d8GAXW8eGo9BVuRxG7Dh8om2g7pvtF/yo88W9PGwcMyvIfkA4ZI9Xgr37S929Zcsk
+fUQesZPOkWCPGQSWkpjtjRdkSkWZydQEIRaOHZq4auK7HdjwHm39cGRnT2HdG8nOwz23LG9ZcT7/
+af37Q8mJq1fl5012ENUYSXJcBlJlYMNbx37xu5291bpEpiaqsPT0STV9/WJ3381zagCGViA49ejf
+B+7/S6+RI0mXp9ADa6HIgGJTnNs65ZW7mz5Pq+RS1kEpzJrZkFI1ScrZOPRElVzypGDnNU5rcAAi
+NgFJgIa/tji//uX9AyOTLjkvuHpFrrYpeH5zed36j5OuetvF+X/LdGwNrAQZhg45KT34qMIIiJMX
+TwiD6Di8+lAIAe27yArZg2S+6pIJIQiEKiyAZKmik1kpT8jo/wJCZKQwxfPXHwAABgRlWElmTU0A
+KgAAAAgABwESAAMAAAABAAEAAAEaAAUAAAABAAAAYgEbAAUAAAABAAAAagEoAAMAAAABAAIAAAEx
+AAIAAAAeAAAAcgEyAAIAAAAUAAAAkIdpAAQAAAABAAAApAAAANAAAABIAAAAAQAAAEgAAAABQWRv
+YmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykAMjAyMTowNjowMyAxNTowMjoxOQAAA6ABAAMAAAAB
+//8AAKACAAQAAAABAAAAJKADAAQAAAABAAAAIwAAAAAAAAAGAQMAAwAAAAEABgAAARoABQAAAAEA
+AAEeARsABQAAAAEAAAEmASgAAwAAAAEAAgAAAgEABAAAAAEAAAEuAgIABAAAAAEAAATWAAAAAAAA
+AEgAAAABAAAASAAAAAH/2P/tAAxBZG9iZV9DTQAC/+4ADkFkb2JlAGSAAAAAAf/bAIQADAgICAkI
+DAkJDBELCgsRFQ8MDA8VGBMTFRMTGBEMDAwMDAwRDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwM
+DAENCwsNDg0QDg4QFA4ODhQUDg4ODhQRDAwMDAwREQwMDAwMDBEMDAwMDAwMDAwMDAwMDAwMDAwM
+DAwMDAwMDAwM/8AAEQgAIwAkAwEiAAIRAQMRAf/dAAQAA//EAT8AAAEFAQEBAQEBAAAAAAAAAAMA
+AQIEBQYHCAkKCwEAAQUBAQEBAQEAAAAAAAAAAQACAwQFBgcICQoLEAABBAEDAgQCBQcGCAUDDDMB
+AAIRAwQhEjEFQVFhEyJxgTIGFJGhsUIjJBVSwWIzNHKC0UMHJZJT8OHxY3M1FqKygyZEk1RkRcKj
+dDYX0lXiZfKzhMPTdePzRieUpIW0lcTU5PSltcXV5fVWZnaGlqa2xtbm9jdHV2d3h5ent8fX5/cR
+AAICAQIEBAMEBQYHBwYFNQEAAhEDITESBEFRYXEiEwUygZEUobFCI8FS0fAzJGLhcoKSQ1MVY3M0
+8SUGFqKygwcmNcLSRJNUoxdkRVU2dGXi8rOEw9N14/NGlKSFtJXE1OT0pbXF1eX1VmZ2hpamtsbW
+5vYnN0dXZ3eHl6e3x//aAAwDAQACEQMRAD8A6TpXTrfrTXb1XqGXfXU6xzMbGofsaxjf3tHe5XXf
+UTpT2lr8jLc08g2gj/qE/wBQP/E7X/xtn5V0auZ8+XHlnCEjCMJGMYx0oRYMWOEoRlIcUpCyT4vO
+D6jdLAAGTmADQAWj/wAgkfqP0+D6eZmMf+a71eD4/QXRpKL73n/zhX+xj/dDwv7c6x9m/YX2g/bv
+t32H7d+d6c7fU/4z+X9PZ/wiSr/Zsj/nNv8ASfs/a87tpiJ3zP8AU9yS0eDF+7H5fe2H85/3v9Rq
+cU+8t/b/AMB//9Dr/qFYxvR34bnAZONdY26o/SaZ7tXTLE6t9Wfq/m3/AGnMYKbn/Ssa/wBMuj97
+81ypN+p/1Va4OFrpBkfp/D4K1k9nLKWQynEzPEY+3x1Lr6uNhj7kAIVE8Ol8XD+HC2ut9QzcnIs6
+D0ypzcqysPtyi4MbXU47H2V6+pY78z2LKOLh5LrMHpvXcq3LpBOHTY8+n6lfuLfW2NZkbdv7/wCj
+V/qttvT+vt6vl0Of00Y4xhfUR+jL3y597Pa/Zr/q9VmYtXTW1fauoUXYHRC6+qmoD7QS7c2tl/v2
+/wCE/wCuqbHUYR4dLAkOH18eX9Li9M/9XD2/1X84xz1kb70b9PDD/m/1/V62x/zvv/of7Ps/avqe
+h6O5npept3/0ndt/spLM+xdZn9ofYH/Yft/7S9De37T9Hn+ru/wW71Ek72eX7Q/x/wDKf5v5/wDm
+f+Oo9zL3l/i/ofvfK//R6f68/Y/VxPtP2T6L9v2r7Vu5b9D9nfm/8auX/wAkf+av/wCGa8rSWjy/
+81H/AHX1/mf5rf8AQamX5z/Mf9U+f/CfpbP9P/m5Zu9D0/swn1N/obdo/c/WPT/c2/plxbfsXp43
+/Ieze309v2r1Jkfz3+F/9if0a8dSUODY/wA/83+R22/S/rsmXcfze36f7P6r9VJL5VSVRnf/2eXU
+g30AAAAldEVYdGRhdGU6Y3JlYXRlADIwMjEtMDYtMDNUMDc6MTc6MTYrMDA6MDBe+0qWAAAAJXRF
+WHRkYXRlOm1vZGlmeQAyMDIxLTA2LTAzVDA3OjE3OjE2KzAwOjAwL6byKgAAABV0RVh0ZXhpZjpD
+b2xvclNwYWNlADY1NTM1M3sAbgAAACF0RVh0ZXhpZjpEYXRlVGltZQAyMDIxOjA2OjAzIDE1OjAy
+OjE5LO05AAAAABN0RVh0ZXhpZjpFeGlmT2Zmc2V0ADE2NMx7KxQAAAAXdEVYdGV4aWY6UGl4ZWxY
+RGltZW5zaW9uADM2j8GjDgAAABd0RVh0ZXhpZjpQaXhlbFlEaW1lbnNpb24AMzXLXisxAAAAK3RF
+WHRleGlmOlNvZnR3YXJlAEFkb2JlIFBob3Rvc2hvcCBDUzYgKFdpbmRvd3Mp56nHOwAAABx0RVh0
+ZXhpZjp0aHVtYm5haWw6Q29tcHJlc3Npb24ANvllcFcAAAAodEVYdGV4aWY6dGh1bWJuYWlsOkpQ
+RUdJbnRlcmNoYW5nZUZvcm1hdAAzMDJFJGpdAAAAL3RFWHRleGlmOnRodW1ibmFpbDpKUEVHSW50
+ZXJjaGFuZ2VGb3JtYXRMZW5ndGgAMTIzOG4VSgQAAAAfdEVYdGV4aWY6dGh1bWJuYWlsOlJlc29s
+dXRpb25Vbml0ADIlQF7TAAAAH3RFWHRleGlmOnRodW1ibmFpbDpYUmVzb2x1dGlvbgA3Mi8x2ocY
+LAAAAB90RVh0ZXhpZjp0aHVtYm5haWw6WVJlc29sdXRpb24ANzIvMXTvib0AAAAASUVORK5CYII=" />
+</svg>
diff --git a/src/icons/svg/EquipmentManager.svg b/src/icons/svg/EquipmentManager.svg
new file mode 100644
index 0000000..7acce59
--- /dev/null
+++ b/src/icons/svg/EquipmentManager.svg
@@ -0,0 +1,146 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="37px" height="32px" viewBox="0 0 37 32" enable-background="new 0 0 37 32" xml:space="preserve">  <image id="image0" width="37" height="32" x="0" y="0"
+    href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACUAAAAgCAIAAAAaMSbnAAAABGdBTUEAALGPC/xhBQAAACBjSFJN
+AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QA/wD/AP+gvaeTAAAA
+CXBIWXMAAAsSAAALEgHS3X78AAAJeXpUWHRSYXcgcHJvZmlsZSB0eXBlIDhiaW0AAFiFpVlZtuQ6
+CvzXKnoJ1gBIy9F4Tn+8/f92IE9yDvdW13Oeyuu0EKAgBMhlYvnvP+Y/uDxtm/ExuJBC2wI+9zVs
+3Sxl3HlbHAXBbzdH9u/tnudIf5v9sd1qq2NkaTlWKX1LG8kmnHseG1Uf+j3R59tek3P+oQh391Wg
+wnHiLiEMIQn4je9jlLbrRrwE8ux48DBcbyVhTmbCpwtxe32+/G4s7oJBDZvdMvQmiaeSAH9wPy3B
+0AdPmcSFzhYKiUIgioZOl9fFjXsK6Z0qZBjTZQK7MGAksz/XyNFZw9FLLKXL4L6oyvJBwatJeF7h
+XddVmAWLyg6/0hyEN7cvx3i6lQcfGqVQbhoYhLNcfjjXXowuC7buczSDAhEUbCxKjvXay//gdRhu
+v0KOEVbf3XNk8ogci8DZT5MwoQf/UZ16do2YZQh2gM+nSR2GgvCHESDMNYAq5m1oYvDq+BEjz4Xl
+Jfh2WZouLgjQPwfPv7ro4LBPOTDgZRc2HitLLiNiFIM/EMSif1ZoTkEoDASuTwjZeZpk+6DzUqy+
+3vLm5wnkAD7GFwObRMCLkafk7lFGRIiRFOC4g7zFnb3gvkhJG4smj9fsoM+NDjwFL8iVEMQsf7Tg
+nZDqybau+JcFexChPuQ3jZrHitO7uN1YeQ0TJBx1OXTnI3yzrFzbMerXFLdjFfRXUMyUubobWV7s
+1Occg0kHEl8mtFcjpF7Bx+eMZa9t5W3KxO7dwFVRfL8iZ/bNEuIFzKxcz99LDeNb3fag9uWRH/HF
+2lgpN2vZWK6HbNjaurQj3BJvAZvex21fjF2cU0Xvobe3NSdreZme2RfpuXRzaKb7ueLjkOBn0sck
+gL3fr/jYp0y2JqWU34W8u+/prPWvMnTfuwujh9CCQbwf7/EfXy7z6SH4cSn4NvGjor+Z+Drvo0e/
+TVz4cyt6q6ruoIu7s8jCq5XNYR03h8DdhflwRmMNwHKdAXWnXCQUKOSjwtooqgBpfhFXd+GVAr9f
+5rvgadF9Hl4v+0wjP8m93Og1C0C9m4jT4KzsGOoc0FB8LMv7BQCQq/z5LJyKrtT/JUNuv2RQLa5B
+u9qXnHwjos3Oa0JdYsVaOpF0tTH0xGiPQ70qm/1hSXRPPAZPm6IjZh8Cm765LuiNJnroZr9LwaMh
+e1VIe3e6NqcosZcXYZE7xhtKOyk+6MHI6HSI2NmsX6THKQY97NsZIK+qT5krai8Hgr+kgdkWL/4N
+DczJg7+mgReFppr9SPLxRHJtgp9kQkPwFewfhBjNVp2F26Jv+i7XFXqzW0Tk4HxIgBfCoc2e+9mv
+RRVfpZ+qzUN3Qh8EvkgOdgZZ3rg1HtxapM0ufogJK5tYibZ0bEk7TEwIP6k3C8HexH9UX7B40EiX
+r36Zzxy29rEEPRdcU56MnicV0MJcD9JsjrfjJDZPjV+omfmg5iprvnaISxf5B8qLkasj/Fl86dri
+avD464zfm68PE+xKDLv2TBhbe/B5r1WElhJ8n89CkUvJbvSlPB3DR2yx+xMOx1bdtWO0OMbsVCtI
+oPigv6WhZ2rVgDGd1u8x7KOjbzWHAiiLYa45zk/Cv4rvtFUssaDlK9Za2gae1m1YstF6fGh+R2vN
+HDg+mFL/8gNFDfYKvvvWrK64A9egf3EXzrt5b1eTT6MvHv0/nzE0LlAXd/gNYuFRovTeWQ2y12+g
+1o7Agh84MFo/jgjSpML5ua69ifBTxGEizn6Iq4INeKfg16kXNRzmB/OcavfBoJ5NxU5fXEEibup5
+9X6fanU84I9DFaGA4Bm21ju094gmCogNyWZbbHDOO4yTqzjbeu+DuOiaxTEV2z85wkq7HRYFyXuy
+nJ0pLnqc1EPySKFIntVlrVZIPs0RdZBuuALqV99QLzpOHzh6SgoZObmERBV5uYcRTKZClRp1Gpra
+dP9iF2cu2LeNNdX4+RYKHQASdZIsRao06TLE7gg5xdfM94/+glnxIE83Eg7ERd8RFAe4ifhaDwkX
+bUL2O2Go1hBWjgYaiLDrVpFILngC+ef6w7AgCCsKCoKejj2W39wORvZWFBAi47UIA4t3JN5x+AkG
+s+Pg5BMSoGWeG3kJuuKi5IS65HGay26Q7YmNz1WoFm5CI/m0cfbM3eeSam+FCtvcxLWQR888GiFN
+ud4R29qygEXVU+PixSQcpqpm1VK4N5SOjFXASWRbqxY9bLI+ACt8gm5X8oDemlJr1GL1WG4bbHLb
+YIi5tMSldzXaa+Om5wFXi76i8qnaguymtlCzuFGWxFSrTQGZLIUSUWkHwPAJZICTI2O1yIIldIAh
+W5XYnRuhuxJriVnTe0gJidKL3pOUAb0DOrxBds36ZhRItFB4IPCILdyLtcmWrNZN4J8TnGKurRXf
+2kAo9di1JThUxkgo2Wk+4OaL/nXYndKx7eGkdxXrLHU6zM2KOgzKgSKgwpAMAg1AOGzoUozt+NS0
+jTQdV4yGy935jRMScx+5Vaf7DZ1mj4TmphfnEUI0PUXgZGpJUkaBHF1izkgQpQywD1sdUc2IdgOR
+GrvRwIrgsDRONo6yjZwRm2KBMBzj3lsEQUzI3F1qo1ZMwfyUYa7XrknSIVwDlV7IYiCMOsuVnu6A
+dYDEaFvrPVEcyZSG5jcMNCytF0k+Ui+t8mRoSz013sDM3EGHBlrsbCHwdQhOuCzo2quKGq1xNVfs
+p5KybZMuIlg+TpLSkwXcWRmAXeDhLMFr4N49B4vaI2BK7FioGOIBJgItcmXkuR1B/1KKd8Uy9gMS
+p8dOQfDtmEk3jwASSMslDBhL4FoaAFvfd7eEGET9v4/ugU7bBmneyoK+IWdfxVnsY0s1Y/eDBmHH
+KmWaLBIs1EwW9bKziMGijGKVkJuBLIe5DQKjPEoGMZOtE2xltAO7u492TH5nowRnzRc5+dKLx4YE
+PuQADnpxRZJjtNjPom9Ewckymp/8xvbTuuFTaSCQwRaPA70BlIv+X42vSDQjkVgffcgpCALTxeER
+PAEbToZRg/WWkAA98oY1IBrsZOdAMcBvsb9hz9Ye0kawJXONXrlpsQMHUoNF0h2aBDsonbUPAGnn
+mwiltW68UYCkU3Mt1dnKZTRhHkuIvSN08HTgq4PuGOsYASbp8UrDLaWY7hdM51PdhfpuC70Aa3DQ
+KWiTpQ2DCiNGm9EBOQT0kKwP5/2pzf+uRJ+bb0pUUN8jE/55vnxcX/msL2HEbPfrm7kU8z9uw4Ne
+BX0U1QAAAER0RVh0UmF3IHByb2ZpbGUgdHlwZSBpcHRjAAppcHRjCiAgICAgIDE1CjFjMDE1YTAw
+MDMxYjI1NDcxYzAyMDAwMDAyMDAwMAr4rybSAAAEBHpUWHRSYXcgcHJvZmlsZSB0eXBlIHhtcAAA
+WIXtWUuS4koM3OsUc4SyVCXZxzHY3k3EW87xJ6UC/IWG7reacBNh3FWqVOpvgP78/o9+4U86yyRX
+may1pI2KXrRY5qSsRU07HWVgHqfL5TIxY73T7CvFpORBUh4sZYFsqx3l1nrDwSLW57FkxTsARXCI
+WSYZOcnVWumtVRzUwZVpw8n/16uOJr5HrgFssk7OQ/q68RAPJjMM1i5+Ij9OcCptHkoidnKTxZIU
+HkV4AJ8kjUCrwF6sNZKl+D3Wrljl2Gee8F6vSjyEWB+CPUSM0+bFN/MYLCBTOOesG9OYYtPNay3j
+laSHOZPFH48GKR6DsUFzI52/HkwY16EqACMTQ3zcI9bCLGjw/TULUECoEAjWLjzVwUOQuO9rQ3DY
+ZHCss6qOXcbCHbznG8rGOUS4F8LtAFNa8ElOHq5N91jNkDgiBw5IoMB6deOpWu+CuBYcLB56NxVa
+K3CzB0Y+tbAEjGCw3yV6j/iN9+74bAMd+yUPKIFPVLS09g0AhwNDxHIupjUkx+B0hL4G9wo1BB0y
+U+FIgymcjHJ1+OpR8pzZ6/cDR4n63Dj6RH+Fn1U7fPYkLTAtYsDFNUx63VX2Pk7J6xelnLgt0bNc
+2oxAtTvSgMMl5/ru8FHxDN6D13pcwf1W8GggFHXPfMEGug6uaQU7qCdrp2rda1ha4VrAphew0e60
+QjZLaPqC8hPoqL1eNRrM4HC1RDr/B+0ekVKvI7T+YLJztfvQg+IAN7OrqUIz9SiLPntvkjBgjJSD
+b1y0yiBvupglAMw+KdiTLmMBPhK8CUogs/dpdMAWHSxhM0ub0Zn9CA4gi6NPbxV7qogVujeNneb8
+0JyXmp8pprc1u1u7OjZh9vXO5E6EfsrkToT2TO6zdcEGIzkCAFbWbYYTAmKNjLRcRFg7GDR3n96f
+CO4zI3gLcsYbRw7TF5Kk74f7pan0VrgXms2QmqXyW1YFvV8WKzjPb9wBtvFuAWd7YXj4vt+JaiOi
+jXP9kHvL4ev09VEwrSN1FBRaRyU68OhxQaDzUXT82c78iaq2FJeLGUywlKN9u4DXO7SpRJ+pDwoT
+YGHEuuUfTFr2Z4spng+PWskbRlWb6GFU0EQGH6bbM4NmV9DDF+lnRtIyvD8xkj6pp1flRK/a5yfd
+kz6pp1flRJ/U06tyok/q6VU50baeeNr2vtvqFx2TNqNlkZT5kVeLJ6ankaNPO+GzyNG2Ez40b8bN
+V9OGvpMzR4pJvxh8786978z+XXw9SLT/zLNLg/h8NqfB9kOp77A3tv/ndQKdQCfQCXQCnUAn0Al0
+Ap1AJ9AJdAKdQCfQvwY0/6ROi9/Ui39/Fd+DWP05nP4Cj1WL8gHyDfEAAAABb3JOVAHPoneaAAAI
+oUlEQVRIx3WWWYzlRRXGvzp1qur/v2sv0z3T0MzQENbBERONAyq4BBQXCCYGE0NijMQEtyjqkzHG
+hMTEGIUHXyBEiZqAQEKCxCUOoigoSnAAQZyVWbp7eu9773+rOlU+wJu3v/xe6qW+nKrvnBwV6nTf
+s+X9vzl36tjQahpR9D5Ns1vPK+0znUJCjCpL1MCPXGolRRinGASUogYolU3ZyVtN02Q2ryW1pdm7
+0Pv6Teb6a2f1wnu/9uNHXjh8opzp9y1GAY0zydSDFLUVn6EhXznFGWkKwgCL5oj/xypvFdjHvm3n
+0CzRJmElJikjfOJMKJZqntzND/7+9KmNfP/le99/aXvKOt3qaG3UcFVSR+kyy1VV1Sp1YnI+ebJJ
+Jz+2vtSkPMtCFQlaRHRGUafSV4ZcCPYXhzb+/tJmft4SH18uHKtbr939lY9hmrIKHIAuLMSMZJCs
+kkBtbgEIQANYjPdjGJVAACIiAIIoJICAbY8zo/DU5mhtsMKiu7K5spuLXRSRFvO0J8EhLqHe1W57
+QQ/MOpUYNWw7mR1AehivIaSGNdDQQEqKfFLsEDHNZDAqoLZD4GFotzvGqgxNCZ4ahO7SOhb27OWm
+Cpg6XWGwhUt2584ZBS1wGuPzghTETg5Bx9YRI3a1MZfDSkBiAKI4uBxt5qB8jGF7ayiqRar9k1+t
+//pPL93xmYO3v08tB3zn3n8dP7F69zff+e4LW+7Na3UYa6dSpwB9/4Ezjz99oqrlmiv7P7jr7Xty
+Fh1MYniE0BRFQbnbVrLmTKkNaoU3NnB0VZ0eOcTgGBuj/slF5SVjpSHQgEo8FqilosFLr58bxos3
+w96/vXhyfRtEQ40Aj1ZwE7qTB6bh5qTj3Q25AkkQL70Ac61ybgZCbV3iQG/lqtkz3Y7bAg0VkHKv
+ZCyQ+ZbFNQevtnbV8fJ7Dl7WywDpEDJPiNwMSHk3o2Y+99pEDF+6ee8dH3e5qZrUO7MSzp8tbD2C
+masFZzfi3CwZbGsEBA3uj/8/vwTTHyFfKgGglfxcK6DZDHYuAF+999WH/jLc/44uj8KyjghmrzEW
+ow1rewuTjGIRrX3BgzXOnyUC6jq27ARAiDvEU++BT21VL1BD1gIaMQfnXA0461pq5SRh5HkKM4iD
+zaIq0e20OxLAAMxlNWKgRFAQIR20swJKCnqHeDaImoQBYgICAFEIIGeoarC1bTpmhnzB8+3po6e3
+Dz23mLm67QYeWQiUpSZTbYiyzKEeuUwFTyJllLbPF8cbli1rM0UEIIQANEgpJQlGRt7/4/hgY3Nw
+4F0LfOunZx945PRzx4oja90QuDY6krLKmFQUoyY3VkKVUnCuRaSauoIZX6DGKPD20A9MbkWEospU
+bqPxmISsSZ0umi5v+eA0f/Y6FNu9J586t722WfiovDLsnOLa1E5JO2sDpqlGlLw06wg+g9rhPbs6
+Si7RiYgIJU4hxKQ68rr4tauvuPj266+8YT9UKtbhJkuCBDhOEZUGU2DiSpKGsiIgDUYIoWAmQWf8
+eIHX0CoREpL3yhpBgIIG1aAa6MUa9AYhRERoIAkISoEATaQgOSXS8Eo3ChCwQCfsKA0oAAmIUDBI
+gER68/yWIhDVuZTuf+LYk39eW182g2GM1oFMLIPOnQ9F3jIh+tonIk4pATBSj28/GDJUNaVxHEKw
+7BCVisrJUPz61ZdfdPv1UzfcOMMPPo2fPbl2fDHNTk4XpqpNBjagwgpi4uSTD0EpBZiksiAkZof5
+GX3SXLGqNAnEKZOzVRKH9jyY9Wf+68+e/Xc1fz0/8ejG2snwzkvyT3yAnQkNApLOFBvPRncYqa4H
+WcZ1gygZ6YnGnB7/oDWzzlj3NWfeewlVTF6RBF2N/OTPf3vu5FLr8T+s8NGtpe60u/Ha+S/esquN
+fowtjkBCbXyEUQkxzFjjJQVWbUQQLeyQT2iAE5AA5FC9oCCAk2Elndf+Uz5b98+e3eaVsDTFptfO
+coC8f6u54nGSCaRJTYhMgEMoNQd4hhlfHsdGqQRNSAFEADFUagKiZBn6vWboB1MM6uVzWeqhFgXA
+6JLxynJduVlWW44xLHHkRAiAMQKsQ2+CMBatNkljA+bwen541b0xIEAMbYWsXwFNLEspuc1UDjpJ
+WtCoELbQuufRc7d966kH/tpu6MLlCt/90fN3fvuXL5zCANPDZgpqwkPGAppcC+6HD1cfvevF677w
+zDfueeXoqoOeYkCH6MwEmwuqeoJsa1GwlsG3kQzo7IrbqFujEVwamgxH6slX17pFGTuInZSgvUl6
+LFDLpccLL79eYram8/758untCkhFQm1AFFxHoq3X2aeWRyOKmmbkTOeKvXTRzHC+O0JSVYN9cykd
+mOnmEWA4SvBQO+0TE1M5rjswe+zk4Vr7jxzcd/E8kPq11JnGSFfbqZiyUXVvO3L+ZOvOD3e/fFOE
+qSs1s1VhOgdXtWRuWVAUuKALJ4CCUK3F7dAPK8gna8VbATHCKUwy4GuQg8bn7zv92KHqkrcF7tmw
+sXoq6atgNZrFzPayzCEsAj1dl3Ouja5WIWBUopsRauwUUNdBte2cm6UEUkgaPoENUg2lGWKaCqOS
+dVoOLXMu8aayfbe3hGtinOAuVLtoakKToCy30LNBwcOxHr/vVshdnltAJyQFD3gND2TCwwZR9/qm
+nM5z3jfdfXUdD//xbFPOZ37Fa91p9zBYSSiY2eZF01QIM01MiepIhlU11i8YVhHVVjHZnfAipR+h
+ZcDKFioEe+jZrXKj6ucz6sHfNXc/9Pyxje78xFQcrcZ2PhiMdmkqTFQ+D34dqrFmPmkBtkPpmO1Y
+vxhD3u4MRiVb0zSN1spY8k2lDVnR54bxQwvx5k9dph/76feymZmTK+Xq8lZSiJnzEh27DVND9RNr
+nbcKyYaxVOyRWoEhNAYTo1CoqZYs1qqADlG81TRU2pBcsb9/5ye7N1yT/w+mK+hCSSFmNQAABcll
+WElmTU0AKgAAAAgABwESAAMAAAABAAEAAAEaAAUAAAABAAAAYgEbAAUAAAABAAAAagEoAAMAAAAB
+AAIAAAExAAIAAAAeAAAAcgEyAAIAAAAUAAAAkIdpAAQAAAABAAAApAAAANAAAABIAAAAAQAAAEgA
+AAABQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykAMjAyMTowNjowMyAxNDo0Nzo1MAAAA6AB
+AAMAAAAB//8AAKACAAQAAAABAAAAJaADAAQAAAABAAAAIAAAAAAAAAAGAQMAAwAAAAEABgAAARoA
+BQAAAAEAAAEeARsABQAAAAEAAAEmASgAAwAAAAEAAgAAAgEABAAAAAEAAAEuAgIABAAAAAEAAASb
+AAAAAAAAAEgAAAABAAAASAAAAAH/2P/tAAxBZG9iZV9DTQAC/+4ADkFkb2JlAGSAAAAAAf/bAIQA
+DAgICAkIDAkJDBELCgsRFQ8MDA8VGBMTFRMTGBEMDAwMDAwRDAwMDAwMDAwMDAwMDAwMDAwMDAwM
+DAwMDAwMDAENCwsNDg0QDg4QFA4ODhQUDg4ODhQRDAwMDAwREQwMDAwMDBEMDAwMDAwMDAwMDAwM
+DAwMDAwMDAwMDAwMDAwM/8AAEQgAIAAlAwEiAAIRAQMRAf/dAAQAA//EAT8AAAEFAQEBAQEBAAAA
+AAAAAAMAAQIEBQYHCAkKCwEAAQUBAQEBAQEAAAAAAAAAAQACAwQFBgcICQoLEAABBAEDAgQCBQcG
+CAUDDDMBAAIRAwQhEjEFQVFhEyJxgTIGFJGhsUIjJBVSwWIzNHKC0UMHJZJT8OHxY3M1FqKygyZE
+k1RkRcKjdDYX0lXiZfKzhMPTdePzRieUpIW0lcTU5PSltcXV5fVWZnaGlqa2xtbm9jdHV2d3h5en
+t8fX5/cRAAICAQIEBAMEBQYHBwYFNQEAAhEDITESBEFRYXEiEwUygZEUobFCI8FS0fAzJGLhcoKS
+Q1MVY3M08SUGFqKygwcmNcLSRJNUoxdkRVU2dGXi8rOEw9N14/NGlKSFtJXE1OT0pbXF1eX1VmZ2
+hpamtsbW5vYnN0dXZ3eHl6e3x//aAAwDAQACEQMRAD8A1ek9J6L1HpY6x1y211+TkGo2bjq5zttb
+Ya1y1K/qb9VLcu7CrNpyMcNdazedA8bme7btVTpOTm9GwT0nN6Jk5vo3Oe2yuv1KyZ3V2MO1zfat
+Bv1mvZa+5v1ezW22ACywUkOcG/Q3u2bnbVp5ZcwZT9uUuGz7fDkgIcP6Hp/utOAxcMeOIvTiuMuK
+/wBJn/43/wBXv3bf+3P9iou+rX1Lb1MdJNlozXCRVud4epG/Zs3bPd9JX/8Anbm/+UWf/wBtO/8A
+IIB+sBOSMs/VvMOSBtF/oe8Dw9T096ZE83rxTnseHhyQ+f8ARv1fKuIwaVGO+twl8rlt6Fhj6yP+
+r2+39mnZeat/54qsM7v7SSM3I6r+3H/WL9k5QpG2kY+w+qZrsYbPT27tjXJKbinfzC/ar5o/7s4f
+/SnB+mx1GvlPz9j/ADF/9B//0N7pWPm9YwT1bN63k4Xr3Gttddnp1gztrrYNzWrQb9Wrn3PoZ9Yc
+111QBsrFxLmh30N7d/t3LH6R1bovTuljo/XarRfjZBsNe06Oa7dW+WuatSv65fVSrLuzKxa3IyA1
+tr9h9wYIr03bfatPLHmOKftwlw2fb4ccDj4f0PV/cacDiqPHIXpxXKXFf6TY/wCaWb/5e5//AG67
+/wAmgHoBGUMM/WTMGURuFHrneRz/ADe/cjf+OB9Xv3rf+2/9qpO+s/1Ld1IdVNdhzWiBbtd4bPob
+/T3bPb9BMiOb14oT2PDw44fP+jxen5VxODSpR31ucvlQNx+q/tx/1d/a2UaTtuGRvPqiK7HmsWbt
+2xzkkFvXcM/WN/1h2W/s0bKPV2fnmqwRH9lJTcM7+UX7V/LH/dnD/wClOD9BjuNbn5+5/mL/AOg/
+/9m2VMTPAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIxLTA2LTAzVDA3OjIwOjI3KzAwOjAwDT07uQAA
+ACV0RVh0ZGF0ZTptb2RpZnkAMjAyMS0wNi0wM1QwNzoyMDoyNyswMDowMHxggwUAAAAVdEVYdGV4
+aWY6Q29sb3JTcGFjZQA2NTUzNTN7AG4AAAAhdEVYdGV4aWY6RGF0ZVRpbWUAMjAyMTowNjowMyAx
+NDo0Nzo1MFV0GeYAAAATdEVYdGV4aWY6RXhpZk9mZnNldAAxNjTMeysUAAAAF3RFWHRleGlmOlBp
+eGVsWERpbWVuc2lvbgAzN/jGk5gAAAAXdEVYdGV4aWY6UGl4ZWxZRGltZW5zaW9uADMyVTq+kgAA
+ACt0RVh0ZXhpZjpTb2Z0d2FyZQBBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKeepxzsAAAAc
+dEVYdGV4aWY6dGh1bWJuYWlsOkNvbXByZXNzaW9uADb5ZXBXAAAAKHRFWHRleGlmOnRodW1ibmFp
+bDpKUEVHSW50ZXJjaGFuZ2VGb3JtYXQAMzAyRSRqXQAAAC90RVh0ZXhpZjp0aHVtYm5haWw6SlBF
+R0ludGVyY2hhbmdlRm9ybWF0TGVuZ3RoADExNzl/OAHPAAAAH3RFWHRleGlmOnRodW1ibmFpbDpS
+ZXNvbHV0aW9uVW5pdAAyJUBe0wAAAB90RVh0ZXhpZjp0aHVtYm5haWw6WFJlc29sdXRpb24ANzIv
+MdqHGCwAAAAfdEVYdGV4aWY6dGh1bWJuYWlsOllSZXNvbHV0aW9uADcyLzF074m9AAAAAElFTkSu
+QmCC" />
+</svg>
diff --git a/src/icons/svg/MaterialsManage.svg b/src/icons/svg/MaterialsManage.svg
new file mode 100644
index 0000000..3b11158
--- /dev/null
+++ b/src/icons/svg/MaterialsManage.svg
@@ -0,0 +1,170 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="38px" height="38px" viewBox="0 0 38 38" enable-background="new 0 0 38 38" xml:space="preserve">  <image id="image0" width="38" height="38" x="0" y="0"
+    href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAmCAIAAAAnX375AAAABGdBTUEAALGPC/xhBQAAACBjSFJN
+AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QA/wD/AP+gvaeTAAAA
+CXBIWXMAAAsSAAALEgHS3X78AAAKj3pUWHRSYXcgcHJvZmlsZSB0eXBlIDhiaW0AAFiFpZlHkvM4
+EoX3OMUcgbAJHAc2YhZz/+18SUokZar6724pSqIIIM3DSwOWye2//zP/4eVly8bn4EIJYwu8r9ey
+fbOxcuVtczEIv90+cnxu1zoX9bc5btutj75WlVFzlza3skXZJNVZ1xa7D/Na6Oulb8hz/UMQV9er
+IcKlkqaEsCRK4Defj9G4nRfiJUSfXFppmdQvIWFfnCLvKTGN9/u33yOJO2FQxebQjNwi+SkkYA/X
+uyYUfbE0RXFhJovAGEOIMZv4NPnu3LqWRL1SgQll6ibYhYWSmvzTx5SdNSl7ya1NWWneRFX5IuBd
+JZZ3rJvqhblh0ZPjV9kHseay5TFeLuHBhxFLaBcNDNvZTjucG29Kbw5b9303gwIRFGyckoe/9rQ/
+eB3G7HfIGUlqu3sd2XkUXRLB2G+LWDCD/ypOLTtHzG0IPeDzbdFEUZD0ZQSEUw9QxXwM7Ri8G/7Y
+I59akrfNtzfX1LkgoP8cfH6r08ERpykk4E0ubGndWXIqEaMY/MFEnP5doHlORGCIcH2HMDkfd7J9
+kXkKVluv+eb3BdEBPuM3BZtk4GXkdeZhUWVHYiIpYLhjvuXKnnCfpIxbEk0e79lB7xsdeJ14Qq6E
+iCnJHzl8EFIt2e4e/4XDHiL0l/mb7prH4/I53W5JeY2KKCmrO/HKR3wmuXPtwGieS9yBVdBfQTFT
+5mo0JnnT01/XGBY9kPhhwXhXEtUqbHxdcYu1rX0s2bH7VHBWFD/PnTNHsIR8ArNXrtfftxqWLnHb
+C7VPi/zKb9rWnXJ7LVu318vcsI27a4/tlnxNsOVz3M6bspNzKuhz6+2lzcm9vOyW2bfZu+vmITle
+9xUfR4Lfkz6LAPu4vuNjX+dUa0op9XOSd9d1fNb69znxunYnRi+Tbhjk6/ax/+uHl/l2E36cAn5a
++FXQP1n4vu6rRX+18MafS9BHVXUPurgri9x4dWdzuI+bx4SrC/NnYrtvwO31DJMzXCRSoMhHLWl4
+Rc0t4vrRJN63/49e1ny//6H1FxHH1w+CPua92bYn/37WYfcUtFd1hmYKNBNfS/LxAgDylH/eO+GO
+tDV72v8hO25/kT21sD7SsblPuBDRRuc9md7Gk5ZNEq42hR5NPXRzVjX7i0vxWvgYfO6qPEdMijDp
+J9OFvmhHj07251lJ67PZK0I5OtN7Y0p5Pa2gS3TPeY/xQVmPig/9l25S1AJp90b9tgNC//rR/9e7
+6OecE/RiXg4D/4IGz44t/FsamG9l+Y9p4MGJdkNPIybmr6eRMwiOI8v3OWGw+XIca34SlGi0+l60
+LT3Tz8KmQq8KOR3BTowPBXiZHMbeb7/2avk5/Tn7U/QV/YUeCL5IDXbfZPng1nrh1ttsc1JMkrIp
+KdFu3VrR7pIF4a/EmwfBPqb/Kr7hPDRS99Uupaf55LC1Ly7omeBlyQuj506L+MSo7I3x9jiF7SfG
+H6hX04Oa73PN1+7w1kH+gfCmIW0O5v4+/dax5bvCx7fz1M6X5H8rhHfS2Xu/xNi9/z4fK9yfjVxn
+s5jLKeRQ+laejv2z9C3H/KRtjdUfdq2R19q71A4JFB9627j0PK0SGFNKzGuMODp7VgokAjhl57D7
+nPd34a/zWbaOi412r1lr47a427dlo83W8477Z2YO980+2Pcl/R++7Ta2ZtA46JiH1b55gmvQb67C
+82q/vqnBuhelbxb9nfdafYdauyOFnz9vKFGasp3VTfb6CWrjsbEQhMOi9euxg3GnwvP98jL7idqS
+roOe++g4FWzg3Sf+uvRx3PDHSnMttcdgUMt2wU4fWiE88+237v2x1Op44MtRRWJg8xKEMo7Wnt2k
+gNhQbLXNBue8Yzy6zrnWex/EZTcsnRzhX1zE02mXpSB5j5TqmssISmRZTwoleXZXtVqRfIaLcUK6
+5RrU735QLyYnD46dUkIlJ7dQYicvz7BCjS2aHkeccWlq0/glCdXUiNuRNNX4/QkUHQCJukiVJl2G
+TFliD4TcA99gnmCBhuIRfbyQcBCXviMcOAj7az0zXLaF7PeEoduI44bmGUSSm1aRKC74CPl3/8Oy
+DhVPFPRk7HF/uAOM6q0oIJpO9UEUWHwi8R2H32AwBLJ8QwJa1j2Qb5uuuCg5V8izRk7Nlbam1UUp
+nKaNFsOs2pMskRVpu1cbvZU4Kz/bqmXMVWvDP5GQu+14OfrquY4+KQ1zeVuHSa3koU9p17K5x7LG
+Jioha1lZtfsYbeRakD5til6Ko95E5pRe49TTbeKTxLbIXgPXMufIvGBSTNtEMXZXzrQymjYC0UP1
+QHZD7ezNr1nXKlsLfpSsQZucXZKnHexdtmumrjqaW1FWHsWPbUQtaEjsYw6x0qtf2N+J6NZTHuiP
+c9KxhTGrHbbVHuvqwNwKqihzzdWWVawb2Clr5hmYMlvQwjbZExQ3O51vthp2nSpUNvxrbXoA9aUw
+jo+huTYRX4YvgDsmRMy6qVnQWt3wPuPqwtDV2DV/QA1PQrNttjxFoqWkdhpzbpXG8Xl20V2yK/cg
+qwakTWKIhaOxflb6I1p2r9JZN8NIWx9ZVnereP0WKsnG9ortrZL1Ks4XTpIQxdc8N9sD9npnlNSV
+9rY12QYbB5vd8rP5qg9iOxQrMVk46OEv7kjss/s0pwW+6pip/QD5CArMRIi1OeEOYd1CnVqDt1pW
+L0wm/wTdudxLA2A2pC3yUYd9IXLSpXb0Nk3ddNF04uBFPghCDEnEfFD2Fa+a90TWwBFnOW8OC7oE
+A4wSB6BVn0gY0Ipe9xxiBoCMJTs7Y+94sNuXsG9aKF+abqZy12Y/yJet5ugccDZMNUMILJDwvaCn
+hk7ZrgQ6VafYPlwfm5PsgNZlSjTEjcokYLA2l6z/MGkzaRUpNBHLaQqpFkqtyn2yBsRpHVi6nSUl
+LKH7GTnZ0boVmYVeRvjTnORzy8XwQUyTpMgtaPOS99OHZsRA50BDvIjMPCh30c1Y/YjCTqEKYZjJ
+F/QnQ3a2YXBoWttKG3RW6MlmUrIv+vw2T59xfnh95A8XYfaWCXtSqqqn/aAzwVzSiINTCmqEOb7V
+QlBBF8hLlY1jF+yTC5UQ1gQFlpXEMjhAPbLGoHkR45NGE00j4ZGEJLFHP0es1USff5IFZq5kWvpa
+rCalpTXKYmraA9qPORdRalCZM+xmFyJAkNj6KlrQtKoIZR//IYakMaoI+TnTpy5rZyLaOkawO7HY
+YehDJ4dkihU9ebBjbQU5Bd5AT1IhweabJqDk1YxVF31fiXWC0oyxE+Dkv06I7CiMSCblfEqqn1Ir
+2ctDvxKXhbBhEb0Bd2p3neBCIB0+hrTmh1JqrLCoIjliLoIWsUl4q4UrgmIW/X8JlBEtOmSmSdKk
+nNVGIJHs0EEfKUP/cbMJHVtvbXlCqGe6bByivEpfBLLym9S6hboyuRKK8FuRg/Nran4b0jU7k3es
+iUIL2Chni7RCCVye8kB0NS0zZGPNCxwRwU0zK9CXlwbeXo3WFq/HgM/bSgB9AknXlrTc0NNpO6yt
+nU5O+bgvj3F9mmHOm09p/u8L0XvmKUQn6kOxyJ9Pp433B3P3h1KyXceH3RPzf1AT+a/R9+g/AAAA
+RHRFWHRSYXcgcHJvZmlsZSB0eXBlIGlwdGMACmlwdGMKICAgICAgMTUKMWMwMTVhMDAwMzFiMjU0
+NzFjMDIwMDAwMDIwMDAwCvivJtIAAAQDelRYdFJhdyBwcm9maWxlIHR5cGUgeG1wAABYhe1ZS5Li
+Sgzc6xRzhLJUJdnHMdjeTcRbzvEnpQL8hYbut5pwE2Hc9Ull6lcG6M/v/+gX/qSzTHKVyVpL2qjo
+RYtlTspa1LTTUQbmcbpcLhMzxjvNPlJMSh4k5cFSFqxttaPcWm/YWMT6PJaseAegCDYxyyQjJ7la
+K721io06uDFtOPn/etXRxOfILYBN1sl5SF8nHsuDyQyDsYvvyI8dnEqbh5KIndxkMSSFRxEewCdJ
+I7Aq0IuxRrIUv8fYFaMc88wT3utViYdY1sfCHkuM0+bFN3kMFlhTOOesG2lMMenyWst4JekhZ7L4
+49GwisdgbLDcSOevBxPGdagGwMjEEB/3iLWQBQs+v2YBCggVAsHahac6eAgr7vPaEBw2GRzrrKpj
+l7FwB+/5hrFxDhHuhXA7QEoLPsnJw7XpHqsZElvkwAEJFFivLp6qel+Ia8HG4qF3qbBagZs9MPKp
+hRIwgmC/S/Qe8Rvv3fZZAx37JQ8ogU9MtLT2DQCHAyFiORfTGpJjcDpCX4N7hRqCjjVT4UiDKZyM
+cnX46lHynNnb9w1HifpcHH1iv8LPph0+e5IWSIsYcHELk153lb2PU/L6RSknbkv0LF9tRqDaHVnA
+5pJzfXf4qHgG78FrPa7gPhc83Sr+ggl0HVzTCnZQT9ZO1brXsLTGxTVLfgEb7U4rZLOEpq8oH0NH
+7fWq0WAGh6sl0vk/aPeIlHodofUHk52r3YceFAe4ya5ShWbqURZ99t4kIWCMlINvfGldg7zp4izp
+pcsMjo0YWl0raP4ibRZBCWCiiR7YQlDKCoA2ozNDWYF4ZHH06a1hTxWxQvemsbOcH5abpeVnhult
+y+7Wrh6bkH29M7kToZ8yuROhPZP72bpggyM5AgBW1m0OJwTEGhlpOYiwdhA0d5/enwjuZ0bwFuSM
+N44c0hcrSd8P90up9Fa4F5bNkJql8ltWBb1fFis4z2/cAbbxbgFne2F4+L7fiWojoo1zfZN7y+Hr
+6etHwbSO1FFQaB2V6MCjxwWBzkfR8Wc78yeq2lJ8XZzBBKUc7dsXeL3Dmkr0mfqgMAEWItYt/+Ck
+ZX+2mOL58KiVvCGqaqKHqKCJDD5Mt2eCZlfQwxfpZyJpGd6fiKRP6ulVOdGr9vlJ96RP6ulVOdEn
+9fSqnOiTenpVTrStJ562ve82+kXHpM3RskjK/MirxRPT08jRp53wWeRo2wkfljfHzVenDX0nZ44M
+k35x8L177n3n7N/F14NE+888uzSIz2dzGmw/lPoMe2P7f14n0Al0Ap1AJ9AJdAKdQCfQCXQCnUAn
+0Al0Av1rQPNP6rT4Tb3491fxPYjVn8PpL9yDjGHaJ9uAAAAAAW9yTlQBz6J3mgAADBtJREFUWMOV
+lfmT1lV6xc9zl+/ybv32Si800DRbI8i+OGFURAPC0CNEMKMkOuhYGZ2KlT2pSazKMpXKxMrUpFJl
+mTijCY4ZwuLCJgJCAJUSAqLsSzc0vdHdb2/v8l3vvfmh55cMQ8o5/8DnnvM89zlkwgiMg5EhjIkQ
+A8YHDzSzGYSBAECBMhSTNQT87MDQ1r19ScvZ/I2J6+9DUuQQ5bWcSCBjoLURnGAAA0B7xCwCqYBx
+AIBhpI2vwAjSAAToGAQtBAMCGCDyIWOQBlK9JffwibYfbSsNDOYjltA8GQRD9zbzZ39ryspFmaoo
+QhzDsRUhhGFgHCZWkcM5wGAYYhPHsXAkecYQNCGIlGeRlCwJzVQErj1YAqTB7CGNHYdH33jnYme/
+PcgLExLJ8amk4rK94HWOFNNWqrmq7uX1+UXzGrNJmHjEFlzBCbUgBkcDBEPQYxEaUGAiQHHoMd9Q
+gGFgEtDaiGGDrYeL/773QsdgUsUZFosF03Pf2djy0CwWhth7tLj18PCptkIJsK38PY3W5tXTWpc4
+GRYyo0GOIiACJGIgRKC1dplLygwxuFA2NGAACZAXIRjS2Q+OdL+27XRbobYka3ShZ83c5O8+Mm3l
+PCsKYVsgHoP689p+99Nwy+7O41fLKsocHvZPrTPPrJu/ZimVUYiwh1m1URwJYQPQ0AyMTGTGZqhV
+TI7jAR05fHll8O+29uX6RmKWLfCqoufdPzfx8hMVK5o9BBFsWYQFGNePGbMhaZhw+OPCm++fPHZZ
+h8kmi6LZdYXvrpm4/sEqhYIDaUohs1zEMUiTjg0RDEMI9HrY90nh3YM3z1wcDN0JWRpoqpE+ia6i
+GBoZrJV9rUvqn/1Wc01VuQRsYOzlCAAOWLlRVbnrVPTW/hufXx1RflTpmvpy59nfnvLg/EwFwWEa
+SilLUt70SZSPFMW+Q93vfHT98049KCpCu2ztxMHnW2c8Mt/pL+LVfV1vfDTUN5yRcAR1Pr0i++Ka
+7OQ6IJBKpjnTRg8oVhNGsCTyEfacGPmPfddOdjDPaqgtdk6pGfnTzbOXzXJsaQ9oSX2Reefo8E8+
+6PqiS3BhJf3O+5vtFzYs/vq8SADQISgAWZ2F1Nu7e7e+e+VCerIsBQ3SW79s3Ldbq5urQb4C4wUB
+i0MiJj0CSB+Z908Fr24/di5Xw5VtlFpYpV/4xvSpKySt+vvTZ8/2B35FtsydM5U/t276QzOJFyKd
+kswAGpyBCBrwQvg+XtlxYf+R9n6/ljlZ0reeWjPluxvGZ4E0PHBR0pIMXAKUb8DArbeOtm3bl//k
+VlqKIFu6vGR5A79Z8z0rNVGKFPnFOU0Vy+en6zKQ1qDQSa6hDZQGMXDAEoWEvP3w/IaVK2YO+87n
+7bkRXnH8i/adH57LqapFk6yY2ZzDYTGpApRDkBSaIJk6f1Vc7JGBw4tKKSrjExZ+Pz98S9iBkYnz
+V0r7j/Zc6/czk+onOAD3OPcEMaa4ASJmRZQWKNkcyxem1y4fZwqFnp6hobD2f65bu3ZfKbHU+Dqn
+0mKIAVue7MGfvd77j+93nb/h2yzgqjuZsMlp4KnJm+oqw8fWzGqZWtXd09M7jCsDtONY93DO48nq
+2kpbIETJI2EbhgDE4DgMdjBa65iVC6uWzW+KPH2r/bqHhv/+pOf4yU7lJro9/sMtF/72521nSlTM
+p6tTvS9uvLcxk+zsHSYGbi/+o7DQtWbRuO99M/XYA7UO723v6O3PJY5eZUdOd9wa8OvGVddU2kQx
+i/I2C7m24RO4C0iGqL6cP7ggvWpJ5a3+0WHdf26QHThf/sFJfbV30JiwjKy/WOX+wx/Oun8mu37D
++vBUR30ZeDjrpSoXaxdNWtTIq5zO5XPqf2PRjHHpRFtnXxThzMWhPcevX8vp6vrKqqzDIk1SgwvQ
+2C3RjMWCieoyK9FU8eXV0e6hFLNcFPomSv/bD0/50Z80PTonk+W9NpxDZwZO3IrHyYRIch4Wg2LR
+QAO6grieW4+pT6R/59E5r+/se/tovi1Mv3p05L1PDzy+tHbz6tn19T6Rn2EOWMBMECJz+lL4X++c
+3nERXsQquB5HN59obXxuXUtlsmjMrZJudFk1aW7YUMR9P5ogBEoxr2Q8IsEAOyYuEKcg3EzPXz5T
+/dTKmu372vZ90nuzmH3zY+e1T298ZyHf9FhjSx0U2SfarZ/u7jh44ra2ykSxb2a93Xp/9eMPNTRW
+AIRSbDPRmOAxjDAUCl4NgiWGBO4iHtZpjUm15vc3T165dvK2vdcPHsvdztlbj1R8dPZMy6QyMs6l
+9nx3DsKqdK3SH//ewgUzkjMbkQAozoMZV7jRLyrr/+iuyLgImQbIp9ibVZ2Z/nTz+q83H/u4+58P
+dHQWo/62iqAYaL93cjVb9/Dc1SvT02y4FggRTADEIIsMLENgXxkpyj1EWhVgWeXQ5BAWT8aCybWt
+G+v/5e2LW97vT2Uym59pevxriVmVScIwtAs/1BrMssAcaAEABnci2d2QPriSNk+5kAYUI/ZIFQS8
+aQhXzWlOC4dFWLF0QkulS75BmDKKYKeZm9bcVhBgAIPR3q8RrIZQYAB0rBgYlzagDQzFUouC7xSF
+4GEMjSQkRuI4aYmxjtcGnMBIEwKyYkB+VZc2tAS4hmScMwbDFBAiggAv40oo38tnuLHgASA7IChC
+zAGHIAlhFMeaGVi/hkseCwAggCIQtNaaSU4JEPwRbvsTkhErL2kEBWhXuNpEkWTW2IkAwWaWIYQx
+bBH/ssvYzhvqCa1UniSghPLgAwpgAGmQAZMgyciWmgkfsJA2BS2Gh5P9HueQ5cpFwriCJ6BFFGJs
+imAhmVFbDCIwUCgxK2BK5CTSrmCj1Ql4thq0TBn0CFjGOKKEyDEU6tjiFmA0YqVCWwriBnB/ZSoh
+i0HKkhyAirXRXMiMMVAWBBWtSGRZe10lK40UWKgNSUcxaYiDuzDSGDBIQ0IKx4ApbRiElI4G+Tq6
+2yCgfE4sBosgfM3J4oagFTSh5PcbYY9GqQE/YK4r0lnT28dff6+7qCa1PpCqt2CFxlVF4yQJBADE
+dQwFBiGI2XcjWnAQUwAGAWFxA03wuAh8VHj2pJ/sjLafyI7yDNmhWDUz9alXvN5Dr/y8/T8/zD/9
+mzM2LU+nhCSQDnwThdx1GXFGLI5Bd902IBKQsClGHEYasBIFJIfzyW3HC9v3nL814owWKytSgwta
+KsSrL9UeOVP9b3u+OHZx+HpPzd+8dm3be97G1pbWZXZ5wrEdB7oIHYHbgrlBfNcd9x1wFUs1Cs4k
+y/YWsP2I+dmuz3rCmlzOzsj2J++r27B6dtM9gkzUFVGFx50PTo28uf385Q7XRypEYV5d8bFHl6x5
+QFZLuAgIEWCP/euDZwc3vdKtSB36wZx7G2LFBDdxiYiDK2BgFLuO9G3de+5aDzmVTfHojaXzsy88
+NXdxLVyeC0VGhKJeamRibFyYeHTh13afxY+3tZ/rzpzsrvriX0/t2u9tWj15zf2T0lzqSAkG4r/a
+ZcKMDBTL3zrY99ZH3TeHrDCuylbppgnirzc+eG+LJl1KUMKQEQAZY8YOnAFTCsQR+Lh08daf76QL
+bb2jWrg2n5CNnl/d/MyKMmlGjXD3XCo++VeXa1P1O75fO7sxVFayKy5u3W3tPHDq2oANexwFuUdm
+Wy9taFw83YBSv/Q4Mr+QIsYANtZvgQ9h4+iXwY+3Xjp+xciy8VGxq6nGe2rd0ufm47PbePLlNtuM
+7v+nGY0V+vVD4U8/vNI+PF6EfsoMPTQ/8/yGqYua4BgfiiDsO5DagBBFgZBcaRXEyrYSBPB8CVai
+xHDgPN7Y8+VnlwdDqgRP3ZfNuQ0Nh64NGmNa5zV2XO36rE0pt7wuHFq2KP2t1vplM6SLiMAVWDEK
+yuUdSK0MEZSOGAegNQBwA1OCcmAsqFjLgrKPn8OWvVePnen0rERCoCQTo0i6SATDt6dVqqW19OKz
+NQ3jasocKeCRCXXMJNLAnUXy/yElxUizIlACAZTpLcpz1/t/uKU02NU9qKxRY1W6cu40+7lvTnqk
+hccYEjwBI6EicA1S0AbEQYmvHuwwEi64LBoQMQIA44AKwP5TXW8cardF+g/W3rNgqggIIQyBbCAJ
+CAWEAEcsERCSd+z2/wKWkPdQLytYagAABptlWElmTU0AKgAAAAgABwESAAMAAAABAAEAAAEaAAUA
+AAABAAAAYgEbAAUAAAABAAAAagEoAAMAAAABAAIAAAExAAIAAAAeAAAAcgEyAAIAAAAUAAAAkIdp
+AAQAAAABAAAApAAAANAAAABIAAAAAQAAAEgAAAABQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93
+cykAMjAyMTowNjowMyAxNDo1Njo0NAAAA6ABAAMAAAAB//8AAKACAAQAAAABAAAAJqADAAQAAAAB
+AAAAJgAAAAAAAAAGAQMAAwAAAAEABgAAARoABQAAAAEAAAEeARsABQAAAAEAAAEmASgAAwAAAAEA
+AgAAAgEABAAAAAEAAAEuAgIABAAAAAEAAAVtAAAAAAAAAEgAAAABAAAASAAAAAH/2P/tAAxBZG9i
+ZV9DTQAC/+4ADkFkb2JlAGSAAAAAAf/bAIQADAgICAkIDAkJDBELCgsRFQ8MDA8VGBMTFRMTGBEM
+DAwMDAwRDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAENCwsNDg0QDg4QFA4ODhQUDg4ODhQR
+DAwMDAwREQwMDAwMDBEMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwM/8AAEQgAJgAmAwEiAAIR
+AQMRAf/dAAQAA//EAT8AAAEFAQEBAQEBAAAAAAAAAAMAAQIEBQYHCAkKCwEAAQUBAQEBAQEAAAAA
+AAAAAQACAwQFBgcICQoLEAABBAEDAgQCBQcGCAUDDDMBAAIRAwQhEjEFQVFhEyJxgTIGFJGhsUIj
+JBVSwWIzNHKC0UMHJZJT8OHxY3M1FqKygyZEk1RkRcKjdDYX0lXiZfKzhMPTdePzRieUpIW0lcTU
+5PSltcXV5fVWZnaGlqa2xtbm9jdHV2d3h5ent8fX5/cRAAICAQIEBAMEBQYHBwYFNQEAAhEDITES
+BEFRYXEiEwUygZEUobFCI8FS0fAzJGLhcoKSQ1MVY3M08SUGFqKygwcmNcLSRJNUoxdkRVU2dGXi
+8rOEw9N14/NGlKSFtJXE1OT0pbXF1eX1VmZ2hpamtsbW5vYnN0dXZ3eHl6e3x//aAAwDAQACEQMR
+AD8A9I6l1jpvS6/Uzr21Tq1nL3f1K2+9y5Xqf1v6ne+quit3SMHIMNz8itziR+8xrWuY3/p/8YxZ
+/Qen9YdW36w1UVdWe9zhZTeSbQWn+cpe/wBu/wD19NdXg/WPo3Vg7Bym+hkH22YWU0Ak/ujf7LP+
+r/kLQ9mGA2IfeOHTJIH+bP8AsvV/jZPQ1fclkHze1xfKP3/8P/vGjT9V7m1N6h0brFr8x/ufkPcL
+Krj/AC2jd/6ORa/rRmdOe3H+seI7Gkw3NpBfS747dzmf6/o0sr6sWdOc/N6BmHp7h7rKLTOO6P3t
++70/+n/1tUsb6453UabMBnSxm5oOx4rcH4xH+ke47m+n/b/66lRzAy0zwG5NYM2H/C+Th/x1XwGt
+ccugH6zHk+j1I6jgHEOcMis4oEm7cNg/tJLz6zoHV8TqlWEPQ9bqLXXOw27hj/oj6wpsE+/+aSS+
+5Yd/e0rj/wCp/J/6U/TV94ybe3r8v+H83/Rf/9DsvqD/AOJyr/jLP+qWp1PonTOq17M2htjgIbYN
+Ht/q2N9y53pmZn/VPH+w9UxHWYIeXMzsf3tG4/4Vn5v+v011GD1DC6hSL8K5t9fctOo8nt+kz+2r
+XMDJHNLNAnglIyhkgdNf60WHEYmEccvmAAlCTyPTehNz+r5vSs/LyMnB6Wa/RofYYdvBd+kj9yPz
+F2OLiYuHSKMWptNTeGMAAWF0L/xU9e+NH/UuWj1X6w9K6SIyrpuP0cev3WHw9g+j/wBcR5g5cmSO
+ONy9MJcEf3pwjKUuGKMQhGJkaGshxHtGWgc7qX/i16R/xF3/AFNiSo2X9byeoVfWR/TXV42Axzas
+WSb7G2fo3P8AT2+3Y2z1fopKX2zw8Nxv2fZ+aP8APe77vt/4iziHFdH5/c+WXycHBxP/0fVHbdp3
+xtj3TxHmuOysX6tZHUT+xM1+F1Qd8JlllZ/4xtDHU7P39j9n768HSVrlLuVcd1+hw+3/ANW9z0cD
+DnqhfDv+lfF/1Ph/SfasLD6/Z1bqtbs9tFjfT/aF2PW99hAB9P7PXXWHbnN+l6a2vq5X9UqryzAt
+F/UAffZkBwvLvztgyGV/+BMXz2krXMcXBK+KuGH8xwcHyR/nuH18H+bYcVcQ23l/OcXF83+T/rfv
+P1UkvlVJZbcf/9lEAKn1AAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIxLTA2LTAzVDA3OjIyOjM1KzAw
+OjAwUv36MwAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMS0wNi0wM1QwNzoyMjozNSswMDowMCOgQo8A
+AAAVdEVYdGV4aWY6Q29sb3JTcGFjZQA2NTUzNTN7AG4AAAAhdEVYdGV4aWY6RGF0ZVRpbWUAMjAy
+MTowNjowMyAxNDo1Njo0NM7eomsAAAATdEVYdGV4aWY6RXhpZk9mZnNldAAxNjTMeysUAAAAF3RF
+WHRleGlmOlBpeGVsWERpbWVuc2lvbgAzOGh5jgkAAAAXdEVYdGV4aWY6UGl4ZWxZRGltZW5zaW9u
+ADM4te9XjAAAACt0RVh0ZXhpZjpTb2Z0d2FyZQBBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dz
+KeepxzsAAAAcdEVYdGV4aWY6dGh1bWJuYWlsOkNvbXByZXNzaW9uADb5ZXBXAAAAKHRFWHRleGlm
+OnRodW1ibmFpbDpKUEVHSW50ZXJjaGFuZ2VGb3JtYXQAMzAyRSRqXQAAAC90RVh0ZXhpZjp0aHVt
+Ym5haWw6SlBFR0ludGVyY2hhbmdlRm9ybWF0TGVuZ3RoADEzODn7JMluAAAAH3RFWHRleGlmOnRo
+dW1ibmFpbDpSZXNvbHV0aW9uVW5pdAAyJUBe0wAAAB90RVh0ZXhpZjp0aHVtYm5haWw6WFJlc29s
+dXRpb24ANzIvMdqHGCwAAAAfdEVYdGV4aWY6dGh1bWJuYWlsOllSZXNvbHV0aW9uADcyLzF074m9
+AAAAAElFTkSuQmCC" />
+</svg>
diff --git a/src/icons/svg/alarm.svg b/src/icons/svg/alarm.svg
new file mode 100644
index 0000000..2cd3ac9
--- /dev/null
+++ b/src/icons/svg/alarm.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1611908177855" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6794" width="32" height="32" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M577.463954 946.834286c20.114286 0 36.425143 16.237714 36.425143 36.352v4.388571a36.352 36.352 0 0 1-36.425143 36.425143h-130.925714a36.352 36.352 0 0 1-36.425143-36.352v-4.388571c0-20.187429 16.310857-36.425143 36.425143-36.425143h130.925714zM512.001097 0c75.044571 0 135.826286 57.344 135.826286 128l0.073143 23.990857c139.117714 51.2 237.714286 178.761143 237.714285 328.045714l-0.073142 334.482286h63.488c21.211429 0 38.4 17.188571 38.4 38.4v4.681143c0 21.211429-17.188571 38.4-38.4 38.4H74.972526A38.4 38.4 0 0 1 36.572526 857.6v-4.681143c0-21.211429 17.188571-38.4 38.4-38.4h63.414857V480.036571c0-149.211429 98.596571-276.772571 237.714286-328.045714V128C376.174811 57.344 437.029669 0 512.001097 0z m0 211.602286c-151.990857 0-284.086857 120.32-284.086857 268.8l-0.073143 334.116571h571.026286V480.402286c0-148.48-134.875429-268.8-286.866286-268.8z m0-140.8c-37.522286 0-61.586286 21.869714-61.586286 57.197714h0.073143v4.754286a398.628571 398.628571 0 0 1 123.684572 0.073143l-0.073143-4.827429c0-35.328-24.576-57.197714-62.098286-57.197714z" p-id="6795"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/back.svg b/src/icons/svg/back.svg
new file mode 100644
index 0000000..19f7628
--- /dev/null
+++ b/src/icons/svg/back.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1611816909463" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2136" width="16" height="16" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M719.871 873.474l-361.474-361.474 361.474-361.474-2.873-2.873c1.853-3.082 3.164-6.491 3.164-10.345 0-11.51-9.305-20.816-20.816-20.816-3.872 0-7.265 1.312-10.345 3.143l-2.873-2.873-381.998 382.018 2.873 2.873c-1.851 3.082-3.164 6.495-3.164 10.345s1.313 7.265 3.143 10.345l-2.873 2.873 382.018 382.018 2.873-2.873c3.082 1.831 6.475 3.143 10.345 3.143 11.51 0 20.816-9.303 20.816-20.816 0-3.872-1.313-7.265-3.143-10.345l2.852-2.873z" p-id="2137"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/back2.svg b/src/icons/svg/back2.svg
new file mode 100644
index 0000000..a61f197
--- /dev/null
+++ b/src/icons/svg/back2.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1611817045313" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2335" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><defs><style type="text/css"></style></defs><path d="M585.2 255.1h-354l118.5-118.5c16.4-16.4 16.4-42.9 0-59.2-16.4-16.4-42.9-16.4-59.2 0L104.7 263.1c-9 9-12.8 21-12 32.7-0.9 11.7 3 23.7 12 32.7l185.7 185.7c8.2 8.2 18.9 12.3 29.6 12.3s21.4-4.1 29.6-12.3c16.4-16.4 16.4-42.9 0-59.2L233.5 338.9h346.4c146.3 0 269.6 115.2 272.9 261.5 3.4 150.3-117.9 273.7-267.5 273.7h-53.6c-0.6 0-1.3-0.1-1.9-0.1H170.3c-0.7 0-1.3 0.1-1.9 0.1-20 0.9-36.2 15.7-39.4 35v13.8c3.2 19.2 19.4 34 39.2 35H579c192.6 0 354-152.4 357.5-344.9 3.6-196.7-155.4-357.9-351.3-357.9z" p-id="2336"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/basicData.svg b/src/icons/svg/basicData.svg
new file mode 100644
index 0000000..f81339e
--- /dev/null
+++ b/src/icons/svg/basicData.svg
@@ -0,0 +1,138 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="32px" height="38px" viewBox="0 0 32 38" enable-background="new 0 0 32 38" xml:space="preserve">  <image id="image0" width="32" height="38" x="0" y="0"
+    href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAmCAIAAAAqQQ6+AAAABGdBTUEAALGPC/xhBQAAACBjSFJN
+AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QA/wD/AP+gvaeTAAAA
+CXBIWXMAAAsSAAALEgHS3X78AAAJHXpUWHRSYXcgcHJvZmlsZSB0eXBlIDhiaW0AAFiFpVhJtuUm
+DJ2ziizBIIRgObTnZJD9T3OFO/yaX1WJ/b+fbYSaKyEJm1j+/sf8hYMoBkPRO5982zzO+xi2bpYz
+7sgWx17w7ObIft3ueY712eyv7VZbHSNLy7FK6VvaWDYJueexcSXf74mUb3lNzvkHI9zdRwELF1Lo
+4v0QFo9nXI9R3q4bIfFMwYURhgn1ZuLn5MA4u3Bor++X5xbEXTCoYLNLBt8k8WTioQ/upyQI+qBp
+YHG+BwuGzN4zR8Onyqtx457CeqcMA4SpmcDODwjJgU4bQ3TWhEgSS+kyQl9YZfnA4FUkNK/QrqsV
+ZsGiBoenNAehza3LMZ5u5p584+TLHQYG7iyXHs61F6GLwdZ99qZXILyCDaPksNde+nvSYaj9CjlG
+guruniMzjtgFESj7aRImdE8f2alm14hZhiAH+Hya1CHIS/gwAoRD9QgV8zY0MXhV/PARhRLkxfl2
+MU2N8wL0z8HzV432Dus0+AB4g/NbGGuUXELEKAa/QQijf2ZoTkIw9IxYnxAGRzyD7QPPi7HqetOb
+nyewA/gYXwRsEgEvRp6Uu0YZHuGApADFHegt7uwF9xWUvAXR5PGaHfS90YEn4QW5BgSHIL9l8B6Q
+qsm2WvwLgwmBUB/0m3qNYHF6J7db0LiGCJYQ1Ry+8xGuQdZY2zHq1xS3Y+X1yStmGrm6GoO8yKnP
+OQaTDiS+TGivQli1go7PGcta28rblIndu4CrolC/PGf2xeLjBcysXM/npYaFm932CO1LIxrxKc1v
+baE7PCjxHrerg/xZIO8CSIMWgndv2luYkzuBKqO8PWvI9jCHBt+v1WSHnD3zOOYAv/0+rGDbJ1G2
+KSUVEp405O57Psv3KyPi+/4sBE9Gi6bxfi072OMPDrj8YrC+N/914uvxxuh3J74xOicu8bPY/lIo
+3RFO7k4MS6W1a4T6VwKM340VXblqdcA8Dq+doX/lT+Gh1bQEfceaLsTVfXx1/xujj8drkG5PYY91
+94XRFxZfyeyD0Uzo9aqtp+BZqDHSg0d/8LHKHhoBAeQeOl9ecJ+Z/EvC254J0XwgcJ9S7I2I9i6v
++REaXX4KWgqRRLXRI4iqvl6Fyn43CZVhzjM68Rg9ecrNEpH0LZcLWp2JHppTUJkvZEFr7kzyaW82
+114TFfMWddDNPvsgaCjVrPigp1IvoZeexZvD4gBBS/rW0mfP5uZ9El2gP/v7X4TBEkf/LwzM18L4
+h2FwxdFlAoliU/cdxscNxrUGVhrzSuQbnC/nVuUjo4Deqc46bNEGHXSf9mtdod8lwnNQ3ifAC2Lf
+Zgv9bL/iTm1u8h90SGhrEC+SvZ0+lrfYGuYRXG/kB5kEjaagcbY0YEkbRtB7pTef+a/seSH/zt5c
+/AusRxip/arX5xi29mGBtvnHDHNPufzWZ9zwZcAMyGNjNTeBnyJvNhHhSFG/It7m5vBuClf6b6u/
+yNXg/cx+qWsurhKPX0couuux1Lk1MOzZL5ljcO2pz/uwVN97u+W5X0x2mSdG5zI8fvrBBy0yaFVb
+O0aLY8zGsyIIFB+0qzx0i6ycMNbNnHoNgt3Vh04G2DhHP02O80z4r7imrcLEgm6vWGsZkY3XdRuW
+bbSEk+c1gqje5/Pp82m+DFj0tAVnQxPcrLbCHbh6/cWdP+/mvV0YQb0/1uGLRmOoY8Ag7vA73dla
+py5xVp1MegVq7fArIMb+z9IeJdZgk2aX83nQdLLDRGzl0HEq2IB30tnnzNduZN9C0OtUu4951Wwy
+dvodChQRv7RVIrNPtUrg8eNQRdjDecFacmjt4UwUEOuTzbZY7xw5DLOr2KoSkRcXXbMejLD8k2OY
+2u2wKEhE4JJdcZGw8faJkEGRO6vLWqyQfJpj7oi54QpCv1JDuehkBmErKclnJOXiE1ck5u6Hz1y4
+cuPOQ1Obrl+s4hwK1m0LmmloflRCB4A8ncRkKVKlSZchdkfIHQD7BSvFg4lvIBziFm2H32EQaxze
+gMRFm5D+ThyqZViOphuIBNetIpGcJ0bsT/P9sA4iThA2MajTsL+5HY1MVhQRzafaPnT3REKB+AyD
++RkHJ08kdiAQlnkuZLpNNYqLRmePlB2qR6ZePMweLD0jnZZQegPuLWdIwJPTrW8MxavtAxlzgE66
+AdXQb2OjWKdJ0YpeR0xQCGQtjYoeKeYuZCu2eTGEVIFrQsEGrBG7dkuVrMGda1I5FlvxF9jFqCi4
+mtxIHdWqZ25e4IYwamyx19hjrDVJp1Yryk+DAd20VoDDyK00kRZbApzctlpjBSwlpILmI1ArFXks
+UfWE7itjrVJBiUJXMBDloSZT2hDCLcXQnCbE0KsUlIw0Um6cWiTVJw34pHYS2xMQQeGVChkb1OIs
+iDJDqY3UPLqHXBUdxABw2UbpauXYABZCBjEzmk4OVBHwvedaJRGch7VXsLia0eAscNHg0aZjt55K
+z6lJ82ANV9nSoHLuqabBTWV461pMtpS4dRWeEwczYAmYEAqBgDNepwh+8BPMYd8hHGHcmLYBCfpd
+EifgjJZLqzY6hH6nkgywRiAkLggyxCWCd7gMm0aRlMbIrL2RR4RLgXcLjdphAfAII6rYLoWD5Wrg
+C6Dd2Q4kH8E2tjbJDv06ynwsW3Qj2hJj0y4icu26vqfeWGb6i5zGo3td/egD7dg/7YsAF7TC2D82
+VySOxLn7BtMLiDmXWcchaiTbM5Ib4olSrOifEJAZSy1bF+G0HvOoiayrTBnFGa5yttJI4DCa7bFk
+LOem8Q3PwRNgCGnSENmwC0FdYGmvrgoAbbE2LC2AIj2OgvhpAzrpwgEvGN+0gMy4R2rNlAjLR0yv
+IMt9ADQFvSLgOoXsBbBBqgx0QVMj9BwFixrKC17uK9JLhHMA/kA3kpOwy5LhzAFjR8OijJqXMtKH
+FF2vWOsNy6AAVo92wjWsZVgBDg3oA17xycCcQRsSBhLHQAsFhaFhGsBfYiKsGob1quxQ3aNUp3il
+5SuXPdoaPfj+SnMWSaju9QsRqipiYQuoudqtaOlV4hD393KMG91uXi9PbvRnTJSHWZkooX60wHrY
+KFw6rt9N1o8Gst3dnZ2V1vwLf5NE4Ude/QgAAABEdEVYdFJhdyBwcm9maWxlIHR5cGUgaXB0YwAK
+aXB0YwogICAgICAxNQoxYzAxNWEwMDAzMWIyNTQ3MWMwMjAwMDAwMjAwMDAK+K8m0gAABEp6VFh0
+UmF3IHByb2ZpbGUgdHlwZSB4bXAAAGiB7VrN0qI6EN33U9xHCOmkA4+DArtbdZfz+PecjgIK6Kcz
+i1kgVYhJ5/Tv6URL+fXvf/IPXqnJrehVp9KWYI2pXSyXFINFy1ass1GHGMfpcrlMMWK8s8SRXDSn
+QUMaSkgK2dY6SW3pCxZmLX0aczK8A1AVi2LUSccY9Fpa7UtrWGgDlVkTAz/b1cainBNqgDXJJtqh
+fZ2Yxd2SBQZjF65I84oYcpuGHCTSuKn4kOY4qsYB9gRtFFoV/mKs0aSZzxi7YjT6fIwT3uvdJA4u
+1rtgD5ESw9MVb+5FWAGZHFNK9uRaFJ+ke21JuIL2cGcq/opjgVQc3eICzY12vGZLIu5DVQCLihbk
+hxEpLdyCBs4/WgETkCokIlrnkeoQIUjc560RBGwqCCytqoFd54IB3trrysYlRXhWweMAV1rYE2g8
+QhvuuVogsUR3AhBgQrQrnZfqPQVxz1iYmXq6Cq0VuNkCV1vTgLK8wctrg/ftBeDwDC5A15JSLlbj
+9D4a++BC2hRkAkJTjp6byT0Hhwhf3WQen5yDesrfi0e+079VL4v+ir+jO4DdE2oHy/1ptyDk0IbN
+8m1xECaxSDMK0kVjJtBk1w2zt3CB/AWVQ2yz9yxKl0KLuj0NWJxTqu+Ed8ZH2DSQ635HnG6EVy3i
+vM/xggl0HdzDA+ytL1mFbI6h5Qk7AZ3NJLyAJg86s9KtYeWlyYewzr3ezBvMQLjaajt+QLtHVRjT
+jda/WOGM6hNbjbqboxcr7OHaKhNHAQj3BgQ5NWQuCzYZTVHeQR6UdeMtrUVDCphL2iY0WqzIkEf9
+s+3KRjNTr2XuAc+aPT5UzCpo2QMd2kQ9JCvNbeJzpgXQS/ugD0vwDLFmo5hR6qyIl1Rj1w8sKWtL
+7obIR5ZsWddzMwMr2SFvlVGLbGn7a/OxJXvG4EbpnjYnZLA0Osp6EMgd9C6NrueJ4L5neKGsCMQt
+fZEWF39TI3OJHMSH4ZEfx2dlZymIUK423pkhR2w+IPMajmHGE2AbbtnQTnIw5d93I7Ra70bTYybe
+Bx3AjW8Mc8BlFv1pwHEE2+Ok/JSU7wIun/ei/YALI/4nAi6M+K39r4PLRYwW4euRZ3qdFDmiAp+Y
+F7BrQwd3Krgvze3YCiCk0peiu/rWSAHyHNpMnVX1dDYBFk48bqdLP5DFc370Q/le/35babJxiqdF
+nhTtJw7N/vjR7zEW4TsnZeew8JWT8gmfXtFJ9vn0+R4nn/DpFZ3kEz69opN82sCO6CRHfIrT84Zz
+Gz3YpmTepx73/1VRprmuVkfiTebk0054lDk56oSz5h+eCeT5ePLV6YTNf9Z8O558ezqR37DkIb9y
+/EVzUwb+pXgpg8dfAtCPOPX7l/wJkBPoBDqBTqAT6AQ6gU6gE+gEOoFOoBPoBDqB/kIgvcrOHxky
+f7/y30FK/Q+C/A/Ist3F9aW7OwAAAAFvck5UAc+id5oAAAdmSURBVEjHlZZ7jN1FFce/58zM73kf
+u3dr99HdSktTHhXSlodB8UkJJESJJAT5B6LCXxLEYEQS4iNGYzQaRRNEolFJQAKGKIbwMv4BQmnF
+2qDyKlvaLS3bvXt39+69v/fM8Q+6Ws29Jjs5f03mnM+c+Z4zOSRFOzNjz75dPvrU6/v/wvPdsF/m
+HgVWpRi0CGZcmZuvnrn5GgpQAVwKO4ICCBUhZzDAgIEwAEpFHn4OP334zbkTXSd+oWxYpyqtuAoG
+Aix3rK3VvKXrPtq663Pn+W5ZMQQj5JAXznjMBFs5AEqzwOrn33H3PvLW3peSs87UF++OJjYHWbIS
+qWao1EDAwUPYe1TNdtxD+1KWf9x5044YiygLqTzfMABroRSDYG2hdKl/+8SrcyeKs7fpO289Y8/u
+IIImTBgAKAcC7v1D46kDB/XItvl84f4nj1kTfuGGrRMGYAd2ItaJZlIkICIA+sV9qKy5aFe8Z3cw
+gUWULcAADjw4A0q6m2qjx/qdzRsl46lfPJ6uFvN33TA+7pel6xFbzbGzERMxGwB8ohsUyk5sDiJo
+lC1YgxxQOU5p9b9Wb46snFyZMtX3vnjeORNVL9eP713++t37D6/4OY85eBX6SlUEABDRnBR51OA8
+7RIAGClFamXBpahqoLXzvqo3inR59yTuvn3Xh89f7SWrT7/I9z10+PV5FBhx1kAcBHnuHBEHKrKZ
+jXVsAMBRnBVIKtRI9EDLlLha6JijAltHj/7kGxe+75zxwp3zwCOzDz86N9+Bp5pwhKLyPBaArUqp
+9H0ioAQDEnqII2EQBlqDu/1ekJnxPoB8chr44Vdn3r/zhZOTO+57rn37Pftnc7ZKwygCBBVjnctZ
+rbj0/NQYgE/6rr/Ful/dcdm129vNIt3/cnDrtw680mbRkpU9C71uQOBpluUkXV4pAI5Rubq4uMKP
+bj33Ux/YiNLsfYVu+fbTRzImv2aQrxvQMI3A2UZj6vEDvbYeWfbri7rI4i7X+cbPbLviI5NxI3p1
+cer6L71wbAlKrF4v4PJLG/c+2t33Vv6de5bu/01TPK3CymVLtni7WZ9azYKsVP2icSjRn//mcz+4
+61IVn3+LdrjgXP+DO2ItDBDYERg0GGCUG92w+fCRzsn5NHXBUum9tZj0xUvTje1u3O5WzG40NL1u
+ryd4o0frzsBDcsUFtS2TO5/d1z10+LiJGieXfD8yJrC2n8W+Wektqtg/+IZ3tJ3MzuXrBqCq1ZTb
+Nc3nT9cVppI8ifwxB9eBvwGgZFGiM960uOP7sriwMF6lOnSoqLIIYQ2oCzaCigqBXzsVUQR02ntx
+aa1T2miwQ13rKHdOsd4AEIBolBxmFMqs2zWTGXxdwQg5EgsRkCoQrjo0DZTY/wQVoTWGsM+Mylki
+x8SeYuD/PYMW7ZwtnCu0Jrj4z6+53z9/OOuGlfJOP/cugIi+/Anz3pk6sWI4wNqy0iqQSuANrnhd
+SN9wYXw4YLGHJ/fO/frJo9Ztikx/IGDPdBnXLmyNAoACtGKAiEmGZaDJd2We91NPMBZj17YNF53V
+WVmWzG8CEJHTowPYtm10ZAQAHJw6pRBQuGGfgi4LhKYWe3UUBai49pLaxy7eVdOIAJx+qzWZUwdN
+sBWUAogciAkIhv4I2g9hC1eSV8HTVDCnG9miLMHN/zq4BvOZCSDlmFgAYQhhWFcC0JW0M4vCPzP3
+QVlcKGKufK2EnJyWAq3FYFeCWBGJkBUQawtnxXpkBgNMNe47GxWaAaXyEAHAEA0QDbqYsP9uYxBB
+QQgOImRFFAD5d8OIiIg453ThL9gkzfK6lmmQhkAcE7EbkrWs6XFKdyHnRGklQ8pIp6VfC7zYi7QA
+KCunuwYKaDo3lMAMEYgDEcqcAZCRId+aVhjVyMo8FYCUeflo+thLs/Nd8V040CHpxcyc56lY5weG
+nMRxPDkZ3nbVkAy0TRXl5OUVuyRVTzx//OePLfTstA3ygQ657Qeecc4BUIwkScjZVqt121Xbh5Qp
+16SUvFIVOAgxMz2+eaIz3xFPDREh6iml4EQpioNQjQdRFLVarSFVCp0XFYlhapYOTXbXfMjfc8lO
+X2N0iGhOIALnAAERGKdGQDcMoBuLVb/S/saAgTKNhCNKUVno9wx0eLd4Wa2VsACAsxZDhmWO3AaF
+keMLSQXALFmLTLcSHVbAQLNrdmqHUBGcVkxzXaI+GLxcZFAFq6obbRB99tbgn6+mfz24eGRh+uzW
+tDJQJSA1eIOn66HLNpoKcA40cuAQ/n5IlITbJ2f0dR/f9LUDr722FH7lxy9/+upNW2eMS/PIeeB4
+XfGrqGl7SeSpZ/928sE/dY512zu362sv96ibyncfnP3lH99ZzUeiZljYTArb5Dir2usCdDAWy1Ks
+UZlWu1PsmJLPXtm88ZOTJHlywoY/e+bY7545PjunChppjoRSdKysbx7IRGqBn6z2PF+d0bI3Xbnl
++svqDW+ZXNHpmkYPqtMrO3Pq6BHLXgmZy3hsXYCQ3nY8psPRjS2zZZM3FkADCsm/AASKtZKUg8+1
+AAAFcGVYSWZNTQAqAAAACAAHARIAAwAAAAEAAQAAARoABQAAAAEAAABiARsABQAAAAEAAABqASgA
+AwAAAAEAAgAAATEAAgAAAB4AAAByATIAAgAAABQAAACQh2kABAAAAAEAAACkAAAA0AAAAEgAAAAB
+AAAASAAAAAFBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKQAyMDIxOjA2OjAzIDE0OjQzOjIw
+AAADoAEAAwAAAAH//wAAoAIABAAAAAEAAAAgoAMABAAAAAEAAAAmAAAAAAAAAAYBAwADAAAAAQAG
+AAABGgAFAAAAAQAAAR4BGwAFAAAAAQAAASYBKAADAAAAAQACAAACAQAEAAAAAQAAAS4CAgAEAAAA
+AQAABEIAAAAAAAAASAAAAAEAAABIAAAAAf/Y/+0ADEFkb2JlX0NNAAL/7gAOQWRvYmUAZIAAAAAB
+/9sAhAAMCAgICQgMCQkMEQsKCxEVDwwMDxUYExMVExMYEQwMDAwMDBEMDAwMDAwMDAwMDAwMDAwM
+DAwMDAwMDAwMDAwMAQ0LCw0ODRAODhAUDg4OFBQODg4OFBEMDAwMDBERDAwMDAwMEQwMDAwMDAwM
+DAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCAAmACADASIAAhEBAxEB/90ABAAC/8QBPwAAAQUBAQEB
+AQEAAAAAAAAAAwABAgQFBgcICQoLAQABBQEBAQEBAQAAAAAAAAABAAIDBAUGBwgJCgsQAAEEAQMC
+BAIFBwYIBQMMMwEAAhEDBCESMQVBUWETInGBMgYUkaGxQiMkFVLBYjM0coLRQwclklPw4fFjczUW
+orKDJkSTVGRFwqN0NhfSVeJl8rOEw9N14/NGJ5SkhbSVxNTk9KW1xdXl9VZmdoaWprbG1ub2N0dX
+Z3eHl6e3x9fn9xEAAgIBAgQEAwQFBgcHBgU1AQACEQMhMRIEQVFhcSITBTKBkRShsUIjwVLR8DMk
+YuFygpJDUxVjczTxJQYWorKDByY1wtJEk1SjF2RFVTZ0ZeLys4TD03Xj80aUpIW0lcTU5PSltcXV
+5fVWZnaGlqa2xtbm9ic3R1dnd4eXp7fH/9oADAMBAAIRAxEAPwDoOi9Fo+tFFvV+r222vttc2qpr
+trK2N4a0LR/8b/6vfu2/9uf7Ev8AF/8A+J5v/G2fwXSK5zHMZoZpwhOUYRkYxjE8MYxi18WLHLHG
+UoiUpCyS+edA6l1Hobb8jY7I6IzJfj3MBl1Rbt23N/rb132Nk0ZdDMjHeLabBuY9vBC5PEPWehPz
+sE9Jf1LGyb33MsY4bS2wBux7Nln5rVnYPUep/V7ONx6ffidHybAH41p3BjnfnUWFrP8ANU2fD75l
+KPCJ7xIlD9dHxjxcXurMeT2gIyvh/SBEv1f1/cf/0Om+qdfUrPqmG9MsrpyfXfD7QS2JG7gO/wCp
+Vv7H9fP+5+H/AJh/9Iqp9U7uo0/VMP6bQ3JyfXeBW9wYIkbjudt/6pW/2l9eP/Kij/t5n/pZaGTi
+97LXs/zkv532+P8A57VhXBC/c+UfJxcP/NeiZvDGiwgvgbiNBPeFzn1+/wCRav8AwzX+R6dnUfrw
+XDd0rHAnX9K3j5WuTfX7/kWr/wAM1/keosGMw5jFcoyuX6Eoz/6K/JMSxToEUP0hw/m//9HoulU9
+ZoZe76r5GPl9Mfc4sbe17Cx+m9jNza97fo+9Xt/1/wD9Hg/9L/yS+eklo5PnN+zf+u/nv+qcHp42
+pH5RXuf9T/m/8Di/RfoXf9f/APR4P/S/8kqXUqer3PxX/WnIoxenV3tIroa9xss19Njy1tmxv0vc
+568HSSx/MK9m9f5n+e/6nx+niTLbX3P+qfzf+Hwv/9nkDNyxAAAAJXRFWHRkYXRlOmNyZWF0ZQAy
+MDIxLTA2LTAzVDA3OjE5OjQxKzAwOjAwzXVKzwAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMS0wNi0w
+M1QwNzoxOTo0MSswMDowMLwo8nMAAAAVdEVYdGV4aWY6Q29sb3JTcGFjZQA2NTUzNTN7AG4AAAAh
+dEVYdGV4aWY6RGF0ZVRpbWUAMjAyMTowNjowMyAxNDo0MzoyMJVXGHYAAAATdEVYdGV4aWY6RXhp
+Zk9mZnNldAAxNjTMeysUAAAAF3RFWHRleGlmOlBpeGVsWERpbWVuc2lvbgAzMoisZxcAAAAXdEVY
+dGV4aWY6UGl4ZWxZRGltZW5zaW9uADM4te9XjAAAACt0RVh0ZXhpZjpTb2Z0d2FyZQBBZG9iZSBQ
+aG90b3Nob3AgQ1M2IChXaW5kb3dzKeepxzsAAAAcdEVYdGV4aWY6dGh1bWJuYWlsOkNvbXByZXNz
+aW9uADb5ZXBXAAAAKHRFWHRleGlmOnRodW1ibmFpbDpKUEVHSW50ZXJjaGFuZ2VGb3JtYXQAMzAy
+RSRqXQAAAC90RVh0ZXhpZjp0aHVtYm5haWw6SlBFR0ludGVyY2hhbmdlRm9ybWF0TGVuZ3RoADEw
+OTCZpf7SAAAAH3RFWHRleGlmOnRodW1ibmFpbDpSZXNvbHV0aW9uVW5pdAAyJUBe0wAAAB90RVh0
+ZXhpZjp0aHVtYm5haWw6WFJlc29sdXRpb24ANzIvMdqHGCwAAAAfdEVYdGV4aWY6dGh1bWJuYWls
+OllSZXNvbHV0aW9uADcyLzF074m9AAAAAElFTkSuQmCC" />
+</svg>
diff --git a/src/icons/svg/car.svg b/src/icons/svg/car.svg
new file mode 100644
index 0000000..c0038e2
--- /dev/null
+++ b/src/icons/svg/car.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1625636351759" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="648" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M207.644 255.536h239.497c28.806 0 52.324 24.395 52.324 54.277v167.021H155.456V309.813c0-29.882 23.518-54.277 52.188-54.277z" fill="#FDF9D9" p-id="649"></path><path d="M499.465 476.835H155.456V309.813c0-29.883 23.518-54.277 52.188-54.277h239.497c28.806 0 52.324 24.395 52.324 54.277v167.022z m-41.192-300.696H213.21c-64.851 0-117.871 55-117.871 122.271v479.119h31.311c0-39.263 30.615-70.879 68.328-70.879 37.715 0 68.33 31.616 68.33 70.879h117.871c0-39.263 30.615-70.879 68.328-70.879s68.328 31.616 68.328 70.879h58.169V298.41c-0.001-67.271-53.019-122.271-117.731-122.271z" fill="#E47F3B" p-id="650"></path><path d="M263.308 777.528c0-39.263-30.615-70.879-68.33-70.879-37.712 0-68.328 31.616-68.328 70.879 0 39.121 30.615 70.879 68.328 70.879 37.714 0 68.33-31.758 68.33-70.879zM381.179 777.528c0 39.121 30.615 70.879 68.328 70.879s68.328-31.758 68.328-70.879c0-39.263-30.615-70.879-68.328-70.879s-68.328 31.617-68.328 70.879zM928.781 648.041L576.56 596.649v51.392z" fill="#221714" p-id="651"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/factoryManage.svg b/src/icons/svg/factoryManage.svg
new file mode 100644
index 0000000..976cc37
--- /dev/null
+++ b/src/icons/svg/factoryManage.svg
@@ -0,0 +1,174 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">  <image id="image0" width="40" height="40" x="0" y="0"
+    href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAIAAAADnC86AAAABGdBTUEAALGPC/xhBQAAACBjSFJN
+AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QA/wD/AP+gvaeTAAAA
+CXBIWXMAAAsSAAALEgHS3X78AAAKfnpUWHRSYXcgcHJvZmlsZSB0eXBlIDhiaW0AAFiFpZlZluQs
+DoXfWUUvwcywHMZz+qH3/9qfiLBNDJlVf7ejMtNhQEhXVwMuleq//6P+xWWjCcomZ1x2/XB8rktP
+3Q7tC7dWV+Nd/NN3xQOz1j5+H7dg4zfBR7ct5+mq7amPYlLyLlkfSnLa52bqppEt98IeTwHH2w1X
+jQe25DCiczP66PjuVTwNuvb3R7TReRtMmHzaLcStxcHzGdGHvj9XMrA96CGa8+u8d0ZsjukU4njK
+/bnRutSrqsFH40bQCPTeOe+B4otx+xZyh0AVAruJnT4ebrJLCfa0MSSjQ7Ix1TriDGMTVeJTwLle
+iYD3PVG9od14w6IFw7e8xtDGX6JO0/It3VnXfXZ1p4Gtlx7G9J+8iSBtvrlz3R9rb4yKT3P1pb6z
+a3SckKvbbGeDKG9evbHAMiFGdP0ccRIdg5VGfQ4tzeyXRWwDPt9GRojwKIYvQ0AcmnNfRhYEn3qr
+5SMbaohvzt95g3EuAv45Zu/nwRnCNDhMw6XGHWHuNLn2j4KBTPzDPDBqD4l/mohA56H6QjAY6xfX
+7hnqfQGeQ9mfF7xe3gA+496ra8ERE/Ay9GV+wSE+kBPQ2zBdc6dfs8PSyB8hSvJ4Tw/n89fvF+RC
+CB9CXAarvzJANDl+N/gFI+LYCvjbAgkei8H5U7w+gvCaLXwMSYk5/s5H/A7xg4bjWmIeWDn55gQz
+Ia5EowrxbaP2seiJxGPBx/z+mK/uBV60Qskfl9T3LR7YfdHoykF29PupeNel7Yt5/y7r1LOGhW3n
+b9Q+7Exvm82dcWV5bW7Xy2R3bJqdlViPe1xf3lRfJ9hpNwGfrtf3ZibqS9BS7XhLHKftT8Fb+RZ8
+DPl9JX3WADaXCNrx0a+Tis45l8851tz3q5U4vgiy/r4/q8brnE3T03si6OH/+Q8u6HEJOJ+p/3Xh
++/VV0N8s/CroXLjx5xL0UVXNky3mziIbs/XOZrdPeI7fTZh1pzN2B+z5yKTXv0fyUypvZYG1EmJe
+0ks07dEn7hT4SP5fr3eift34d0E/iPg2TX0uWAWgXfnxNGAVdkZGcDQUH1V50wgESFb2FHpBfqb+
+H9Lds5aoH/OhVNctJ5/jlytWs3PnU/UxIUjtJOlKZ0hHTtFsV2XTPzcailpyLXyOnqjEewQ2/aR5
+DPGR/KWb/XlakCK9ikL+bE4psddWym0TnxM6td0LPvRg4iV671XtfdgcEGlh9zPAw2tll31OukB/
+PQ/8QIMvPPrfaKDunuL/o8EHj64JNgo27ZcTyRUDMkf9NMl1nB9/PdoEmq22CremPf5l4hDoHzvi
+OTjsMvAy1/XVc7+c5tSR3qf/IjqHJLyKxenl43hz6wzauRPAfUx/zopB2BSEZ1vHlqXDVCxwn/K/
+iUeCf529i1cf8ivWQyOxX/T65PCyV79YwLlAfS65/DYWLfxlwCLk8yC2To07cfZUW8KTmj9N3q7l
+tbOLlPnqDwtqvBrC38VvLxBM2nd8/jX20Xtd11brdmJotTdNDO5N+OM+Z79V4Ltl9uksmmddey+M
+cf3V5rnGi5u1PNNz9jTnalQbJBB86G/9lCO1gG0YFE6Me5BAuhrXJYCTdnLL5LQ+mZ/G73w0TKzS
+jFattT8mj9sxtddJWz5+/U5Mavfn9dvrR/08tD6avrby6TTNXUvrPDTFRP5y5867Yyjt9n3Q7q91
++INGcwrICEgP+PmxIC8p2/BUH1Z+g1p/+hV+cF7Uys6nC/2ht8/rZdcMw0LOfjSdAnbBYH2vVD8s
+fZw57PtS/RhzotkSbOS9FTMSlZZHjUZKP5VnMX8MVcQ7nBe0tob2HmdSQLTLuuiqnTHWMOxN42xr
+rXXko2S65pxK+GfjsXToqSlI1iKlmGqS5aTusiWDkjubKVKsyD3deD/g3DQV6qtmO/VicPrg6Bmz
+KyTl6rJvJObhpiu++ua7H35KapP4JYpLqMRtD5Jp7HqLRTcSSdQ5llhjiz2OOKN+IGSeALsNK8HD
+W38DYeAtbYdTDxwiDtaWKSbpTPo7cWjaYzj9M4gEM7QAkY2zHu4v893Uhi10UA8U1mEa+7t5oFGs
+joKI5FNpH4Z5ILED8QqD+jscTHwg8QoEtCwrkK3w6Gmr4CLkRJRPcfpUB6wZmYNW8sn1WRHkWiaz
+EmA9hoZvfbJzFF/yHKriR8m/1M4aBbg6QxolZj16AbHS3EimVTmVkNZNn236NqKbrUu1YWpMrTTl
+6iwl+kr6na3UUqkUZcYU6uy2DBvjCLXXOtoS1KudLpQ+zWwV2vaWXUzVVUXFnjn2VmY3OSI0HK1S
+mueRrO/C0L5E9KPXwv5uRDt1osbVLLpXcHCorI4xg7SdI2Oc5NHquywE/wJUDJCOps1tjty781ge
+R5F30b2GakuAG7MZytGcURZOEMqz0BDPQultxRawq9OYgiEul9LQMPs6oBHpZYw+5YWu+GTicIUH
+Ob3nmtyY2O9Fr+h1PLq8d6qoge6jaJ2Dszbr5lubBS+WEP1srQFq7HbCoyzv7SA57kQN2IFP5khh
+sHc9EDLwq14bzuQz+p0bBlF1bZiHKlCdycB6xI4zYs2j+4j3ICJixGwdx7CMVEnOtrK/pu7ISMyQ
+ErZVA4/Ab5GwoHWcIU+P31oiBmtpM8BtS2QQ0FYP9BJ3sJVpbSDFZ3wBTHIW8XjMJ0kaPWaCwnL+
+iI8XAEnjnOnhRRi9+2JEi9RI2ZmkVVc17305S4GraTg0J4hEqhsVp0NJfOZqScQ0TcNI+UCTMqBs
+T0S9n7M2WqGOstGm1LIyRQprSyZGPXlWNJ2iGdTVqKFHmsMDpSspEz6FegJVR4UKhjI7tUttEP3T
+KQLe2eJxlBvNtiQBTcxHsogfqBfoY+nmjC42h0zAoMbwIxzYYSXSaAgFYjWYONgptR6daUQV/sou
+DPnPk+YxisO2uIIjfcrZoU3PVASCegBHYYc+Q/UqT2mgUq6ZhA3jIJGB4ZBnGpyluU0YXdLUEhpU
+nEGFSc3RrZU0CF64gnUUyKGhYWvEBpRvo6VWi5uDO1TLGZ+SaEkGUceqSYo4pcaeF48kOol9fKjI
+S5PwHdUv10bdZ/aDwtRcJHoDHvcebBtpwNPrp5kiHohDk3DJcf3gIUxWHaaKiEZqr5S0jMCO/ZEE
+MV1tBTwxED87xsEET5DyJljSWFpH4oS0zatUsybVHZPch5PolEr1aJ6tdHeDQjAKGYtemQIxD8xg
+vSHcOwkNlLNkbzuGIrZIHmgwYVnR01hyUATyFAktO1AUPVGrDdEiFtIXGYd6bAGfY+TRPHg0JZqb
+uRgySdgReCRpwmYSCNrXh7f8aLVn8nRN3tO0ktHS6PwrVYqYN4pZBrxJaFUyyCRyfE0YO6rAQfIl
+AfKHn5GInAxc1eJBQqtS63IeCf9wXLcFrzkgOijWkqXQyVVyMpUvwgh8R74HD5QTC3VbrTc+JQoZ
+wGNlHp1UmyiOknAhxux5a+C3nsnfbwLPpyJM3kI6YRPRH2jqpB2W3k5mh/QYiM8J8jrjenZKs69C
+RIb6J0Jknrzx9/zYcOm4v2N7eV8Wj/u0v0xR/wU8KQdpWK8eggAAAGR0RVh0UmF3IHByb2ZpbGUg
+dHlwZSBpcHRjAAppcHRjCiAgICAgIDMxCjFjMDE1YTAwMDMxYjI1NDcxYzAxNWEwMDAzMWIyNTQ3
+MWMwMTVhMDAwMzFiMjU0NzFjMDIwMDAwMDIwMDAwCnagEjQAAASTelRYdFJhdyBwcm9maWxlIHR5
+cGUgeG1wAABoge1a3c6jOAy991PsI4Q4icPj0ELuVtrLefw9dvgtlJZvRiutxIdEaeIcH9uxYzpD
+v/7+h/7CX+CYiZ9cJItLTeL0SFGCd8mnmCS1aeDe+6E8Ho/iPcbbFHQkCsfQswu9uMCQzamlkKUT
+LIwsXRhiSPgEIDMWec+FB+/4KZk7yQkLU6/KUuOdfk/PNAjrHKkGsAmpKA/u6sQsbkwWGIw9dEWY
+V3gXc+ijI6/kitgQRz8w+x58HDcMrQx7MdYw3KDPGHti1Nu89wWf9Z7I9ybWmWAHEfHu5fKjeR4s
+IBN9CCG9mObJJtW8LAGX4w7mFLE/Pwik/GCMBZobbvWamXjc+6oAjIQF8VGPSIZZ0KDzWxaggFAh
+ED615qkWHoLENJ8agsOKwLHKqjp2HQt18J6vKRuWEOGZCY89TMng45Q8XOumWC2QWMIHDnCg4NNT
+jadqvQriHrEwaujVVGitwM0eGPspwxIwgsH65Og74iPv3fLFBjr2S+iRAldUZNr6BoD9gSEsIURJ
+NSTH4HSEvgXXDBUEHTIletsGxZyMdFX46lHSPbPXrwuONup74+iK/gq/qFb4oJs0wjSLgY+qoaTn
+LrP3cXKav0hl53O0mqXSIgSq7ZEGLI4h1E+Ft4z34N1rrtsd3LVGINUbFsJHANcHJlB1cHcb2D7p
+Zm1TkvYclkbcaCCNFZIzWCt3qUI2a2h6S/kU2nKvS8kKTK9wNUVa/YJyj0glzSOUfmOyc7X6UIOi
+AKPZ1VSmhbqlRRe0NrEZMNiWg29UtMpg37R2lnSglEG9wVkCCwPDR5wDM1IgeItBC4GE6QSADEEf
+OESYh11sdfpVsW4VlkhT0dhpDlUza4WG5gBAwOEGpRvFUBARNXxVzzXqUgj5kWzYaVa3tvXYhNnP
+iclEhH6XyUSE9kyms3XFBkeyBQCspH05nBAQaXig9SDC2sKgpfp02hFMZ4ZtlFUCpWr+KE0m/mXI
+z8ylI3sPHb/iKYLtGSvHKTPoXTa/SeY1nO5xPAG20SMbVDU5NIQ/r0aCFNFqVLaR+Ox0ADdWrWez
+aRb9NseQOLjgG0siFAH1CCvQuMGyRSRqrsHJotGBeDZ/cWg+OZwOa1Gorja35+8crgek/xMOJ/X4
+WP7XztVF6i2Fry1POQ8KfRuVT0Ghg8on68r3beGjTeX7kAZnBwRdSYOzoNCVNDgLCn0blXf1SZ80
+LOgh90XKjHJmTDO+TKAfkdqO4sizRkbn9eSDMsBZN1J75gJcGLHtfg66Ru2yi70pbQ5VGk/V60YZ
+S9TycbfRlwbNvphd4bZG0mLl7xlJu9bhh0WOruTTWSNBV/LpLJ3oSj6dpRNdyaezdKIr+XSUTr6M
+b5BLGzAOf2oetk3WvCnxLhLmjbV6ebgSOSuEdLUSvkZuUlzfjlad108bL/q2E5lNftMC/ifN6EuA
+3739VylaxOpPFcs2eP19RmfeX3Q2eeW6gW6gG+gGuoFuoBvoBrqBbqAb6Aa6gW6gG+j/CnT4v0ui
+/nxlP4OI/mNm4YH+BYDJNhVN1KR2AAAAAW9yTlQBz6J3mgAADGtJREFUWMOVlumPneV5xq9ne7ez
+zng2e2Zsjw0GA8YQZLARsQu0tCpNwImCRSM1LtAQSptEAVEKpLi0iASSqgtFECC0QKxKaaENpNQQ
+CJsSXBYHjE3wMsa7ZzwzZ872Ls9290OR+oVTifsPuH7PvT4XIyJ8YuQdhCrTRoUJwKGNlAzGIsA7
+B8K/e3rfa/s0E8F4vbj64oVfvHRBH1oiqwJA4DtiBohjRMJZiPgT5VkvMAEO8AB3kN6AC+8cBeoH
+L9p/+MGr836hq5RanTSG6lONNeeW7v/Gyj4OQRZGI05ygAGcoBg+HbhlIBW8Q5kBWkMEXYUnnt9/
+x4+KiPphT5Zrx6rVenNucKbFRZL/zkR69y2fGQ1S7hSgDJBxSIEEnxLsAE2QzChbgBJD/IHn0/uf
+fXOmPV7j09d/YdnmjUMh8MJ/098/vvPAnJBSXnh6fv9tqwcckBZIlCPuJIIeYFCvMESm5WiaqJMT
+/fC5bMXmt9iX9i3b9Mp3npppOiKrqduyRC9+QGu/8rPkyx8t+v1dN95/7HhG5DOybTKarOslz3s9
+CDoFJ454HqXHXuzct3X7dNMtLIuvbhy5buOCCgeMAquworv2dNxz0/qR0kmG6F+2HfnOEwfmWGQ9
+BwDvesn3BocRnMpRfnLb/H1b9x7qVMb77TXr8c1NKxJ0PAongBA85MzPXbRKfe/6sxclB6NK349f
+bdz20PstlWiSYOpTg1PGrYqfeWH/40/tPtQcCqtjv3vRsjs3Lw2zIiYFwCifc1+AxahIi43nBjdd
+uzapuHk3/tz2bMuDLxeKud55iS13bvEoGEuBHMRgAM5BRhnxb7/Iv/HInhPF8AqJzefNbPlaP0fW
+URUwJ+G5D8BYlvtQBQwoGM4cF4sr07t3Hz3YXbX7RK3bnLvk3Bp3DfhY5yBlLbpGW8kkijYjT47B
+AQJWOA9Io7WMo8febN39NwfnVVIO2efX1O766oKoQCzgBIT7v3oRB4MlA8Y5SOcy2vpa/peP7Gzn
+ldHS/BXrB7ZsPoWyXAWBzrQqRwbggADEHbfd6QSzgCMoToC0Sj71ytGv//PeTj5UBb54Cbv12kVl
+ZLHwSCVXgCd4AzLgnnH/vzpMz0GEkmPxkmBoQbLj7QNzRf+vjiHk7dVnDQa2EDxiBCtgAW0h7tqy
+hXEURpeFA1Hm5dNv4a+e2NXpjgzyo1dvGL71mrEaKwQizzSFqs0McaGkgCyAFJ6DBWBgnEFIbdKK
+MCuX1PqrQ9t3HT+uKx9MnoCP1p5R4wBgvfAcPOBg5Ai8AHXABKH+72/4236489ft4dP8h5/7zeVX
+bxybfG/uwOGGTXhONR/NK5cPlEbOGO8/fyVitDxxhrJj4IADiEyoCTywHH/7zMyDP91/oDU4Ecx/
++w/O2PRbUYSOMaREBLLSa8tDCyYK1F94S//FAy9Pm5FYmCt+I7ruj8Zuuev1d3cGOUU8kRmJjkPN
+Tpe5PX9Fd+Dr4ysG4oAZwFuYrg5lAMEUJGAhUdxw5YBA876f2HYn/utHt+tg1ZXr+weVhXVwOeeB
+tJoK1P91e3HTQ+8dM6P9Yu6P1+dbrr8g1Xh3crARTtjEUNEum4OLhQ76Fk831bu7jjVb4PBwDJ5L
+BJUAAcAAErBOgyuVZjd+fvm1G8RwpTXjh+56ZO9/vJrmkGCArEl4iLD87Bsf3fujI3vSlWWFyy8I
+v3fNBPyRUjbWbs3ISnzuKfZbV11QK2Bo5rvbxQfmuG2c5EJLFDASHIwz5tpSlXKbFYGVSUmnPAhi
+YP7OrywvvHz0lbhRLH3oyV8tQPVzG1YaxyX4yR+/M/jNR5p5c/z0sLFhXfPPbzgPGvCllEOHfRBp
+HaMbTkNkAL5gxwd738y7sr6S0gCWXBSmhAp5yAqAKCh9vGkf/0p1ifnbv7xE5oe3bm/u1AtvfGI/
+Ky258uwy3/bm4H0P7252ZSU8etE57o4bzquhBTRAATPoi1iZu2pIHIA1EN0mxaSUQ8YEQLmjghHA
+et5k+KwadP/shvHfW5MP2Fluz7j5u288sxv87if27juZcNP8wqWVe24+rQQoVGEDiEBIONfopnM+
+5i2gHatZuDQY53Ffljat01BOMa84QL3BvASEIfw9N67adGG9aMzNsYlvP7lLlmsz/U19+cWn3rix
+rwK8vsO9t2v6ty9aeMYSsAgeQtuJbb+I3935oc8CHqNNB6emMFYRtUoASGO1kDEY68Vt2Opr292+
+vR/94aZlN1+7PGd7f/7u0Wok5GN3r9tzAGctRp/oaODeR9/Ydbz8wqT+z9uXhBbj9YaZDQ2PD3eb
+FrHRbkGBASHGSoI7gEIpGAFeWx6GnwienMf19zxfLo0PL2psuqxvy/Wnbp46dfkiyGGfDS2N87ku
+annOyyeK8glWH2AcBhMJbrl67U9emt1/eDou9XWtLITrtzMjA6Nrz5pYMQ5AgCRnYIHslXE7he0f
+OmzKe6dSib6K7q5ZVIKdlfAxwcX1AMyBo1O0Fy4Yj/UR2HHmOpevSy5dV+dYDkADHmA4jQwSIOAA
+HGOSEYCePQ4yHUbWJIIxBocokgQwlkgDOMkj5N7kjlcTxdKTU/VagRBeeIG5KkYYtZAphBzMaK4h
+WMAVkOWahUEIBoB6gRcwYmknt/M1NQJkYN0mwlDEUnF4GFCJy1IdsGw4q5mc9wEwEPf818jWp9/M
+OxVOmA4TR+ki125XB666aOKBq8oRP/LOEXzrwX0fHXCNyOoirMWxSY9WYnXaaO07X1t27nA2zQKw
+aikMCmTAICEsw0vPe1sEhmPz3Zde/nBunpwjblqhmR0QOtft2ZPd519+b++xefjkpz+fnJzqNo0V
+ma+CWOtk5Nh8U+2e1C+93nR5T5PZcyhIwPjSvsljlipDVaweSxo2DU3aGR6eP1w9NjXVyJULSu9P
+Hm/ksYj4WYONhXXm0wYvD217L2/YcN+JGZFUenWhJ9gQIGPvo/5KsubM4J4/GQkC1D1ue3zm/eNa
+lQe0hQOE6gflUuYP37lmtAqb4WAXb9/+1qxNUt91KNDDWfcEKw4GK5l3xRy3diAYUWgxMiMVjrQR
+BgF3haRSJCjhxHS3VnQqpBAVGVXbU8d9aWEc9gNxr4Hv2WNGEOSkKIzPCmIF0EIZrFLkENIX2Xwc
+Kg5YPSe5kRCOqcKFmkonO6iUVMi6HFnPWf9/MkYBDgbFDMoHW+WHnyuMKES3vWNPasPY6Zbnkhgc
+L3JrmC1tfWWuUiunRXe2yxH2KZMzqx1GPz1YIAxDA59Sbech2v9PO1w54XleMjqtLo5KcdcyA1QH
+68Wv24Gof//JQ+X+/m4+LwXLdF/IOHPCf+yIPrHUvEMIcgvQXLdAgBMs6zLVLBSsZBs31EtmUnhN
+wWjYTUq61AqW1WY/vGz8+MRYlAIXrhxekbTJHg1LTFtLfNBjiGWzp9aOXbxmqQV81wasxGzdOwlk
+DA6ew0PavGBROZCANiqEVKGK+7VQYT45Hg3f+qWxqzaMNjOVdfJY8ID5OZGMVhaNlfLx2IPcps+W
+Txn97KEGcTftWVQYlSRJzAdH63bVYibQSoaqqZ7xJBhK4KGz2kuVeyNlkBCBMYCzzMCYIvfBgZOA
+HIXlYwmNLeWQHD4C5/CUMUQczEZwBmknKCfrJsT5y7jwdXBF4B4gp5gzgjoweufxzEvqjxFwZ42T
+QdDWNgkYB1dGA/BQgVJYsXyIubyTi5/taJ80SquAlAIrPC8c81awiH98XiAUKn3eh0QQcPABHJjX
+AkYIy4OSY+VCDDzzejOIBjtzh05fsZBJT96EXHBIScTiECACccFx+YYVb3/4y+l280//MVu/7uyJ
+hUlIrVBYbawlJaMyFVOQgoR0BCGYYuDW2rxI+KhUZF1qqfBSWhZOzaZ7Jo+8c2S0Od1ZNSpXnxlw
+njLrYh7Cg1nvBOPwRNykWjRJ3Pvorm2/3LfXnVOKhKRCuEwyEJF1jBjTUDIQnhttC8ZYJCJuhcud
+VAKwjlKC9pzxILEk08wljfScpcHN16y+bA0CdDlJ2BAMzJMjD8Y4GIqiHYWVj2bw7Gt7HnhOtzqZ
+95IHsffeO6M4CxTrEAc58jZS0lpPxLzjSkYOzjrDuVeB8N7awnIukyRZM9a+7orPXLKaCQYCyHvO
+uCfPNBlFMstMkCiBLnQbqi9F6C0mjzSm572RFakCBgfbFmQsC0OuoH3AlNVOJZHxzoFIWueIc84J
+8MS9i4WslqNkCUYZWDGFoJ7ZUCkweELxP470vKk3u8RYAAAGnGVYSWZNTQAqAAAACAAHARIAAwAA
+AAEAAQAAARoABQAAAAEAAABiARsABQAAAAEAAABqASgAAwAAAAEAAgAAATEAAgAAAB4AAAByATIA
+AgAAABQAAACQh2kABAAAAAEAAACkAAAA0AAAAEgAAAABAAAASAAAAAFBZG9iZSBQaG90b3Nob3Ag
+Q1M2IChXaW5kb3dzKQAyMDIxOjA2OjAzIDE1OjAxOjIyAAADoAEAAwAAAAH//wAAoAIABAAAAAEA
+AAAooAMABAAAAAEAAAAoAAAAAAAAAAYBAwADAAAAAQAGAAABGgAFAAAAAQAAAR4BGwAFAAAAAQAA
+ASYBKAADAAAAAQACAAACAQAEAAAAAQAAAS4CAgAEAAAAAQAABW4AAAAAAAAASAAAAAEAAABIAAAA
+Af/Y/+0ADEFkb2JlX0NNAAL/7gAOQWRvYmUAZIAAAAAB/9sAhAAMCAgICQgMCQkMEQsKCxEVDwwM
+DxUYExMVExMYEQwMDAwMDBEMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMAQ0LCw0ODRAODhAU
+Dg4OFBQODg4OFBEMDAwMDBERDAwMDAwMEQwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAAR
+CAAoACgDASIAAhEBAxEB/90ABAAD/8QBPwAAAQUBAQEBAQEAAAAAAAAAAwABAgQFBgcICQoLAQAB
+BQEBAQEBAQAAAAAAAAABAAIDBAUGBwgJCgsQAAEEAQMCBAIFBwYIBQMMMwEAAhEDBCESMQVBUWET
+InGBMgYUkaGxQiMkFVLBYjM0coLRQwclklPw4fFjczUWorKDJkSTVGRFwqN0NhfSVeJl8rOEw9N1
+4/NGJ5SkhbSVxNTk9KW1xdXl9VZmdoaWprbG1ub2N0dXZ3eHl6e3x9fn9xEAAgIBAgQEAwQFBgcH
+BgU1AQACEQMhMRIEQVFhcSITBTKBkRShsUIjwVLR8DMkYuFygpJDUxVjczTxJQYWorKDByY1wtJE
+k1SjF2RFVTZ0ZeLys4TD03Xj80aUpIW0lcTU5PSltcXV5fVWZnaGlqa2xtbm9ic3R1dnd4eXp7fH
+/9oADAMBAAIRAxEAPwD1VYf1i+sQ6aGYWE37R1TJ9tFA12zxZYP+pan+sX1ib0xrcTEb9o6nke2i
+gaxOgssA/wCi389c50/NZ0Pqd4ysS/qnW3APyrq/cK94a/0643fmvbvs/wCts/Rq3y/LEj3JR4tL
+hj+X3K/Sl/qmDLlo8INdJT/c/wDQ26PqTnPxjnW59o64f0gsDvYHc+lMb/7bXf8AW1p/Vz6wvznP
+6d1Fv2fq2N7bazpvA/wlf/f/APtxn6NW+hdco61ivyKq30mqw12VviQ4AO7f1lW+sf1e/aQZm4Tv
+s/VMb3UXDTdGvp2H/qEZZDORxcz6TfpnX8zL930/5JQgIgTxajrH/Of+hu4ksP6ufWH9pB+Fmt+z
+9UxvbfSdN0aepWP+rSUH3fJ7ntV6v+bw/v8AF+4ye7Dg470/H+7/AHn/0OmysVv1VYesXH9p9Qy8
+gVG6z2bWPD3H0x79rtte1SzOn/WbC+seZ1PpWNTk15bGNmxwEANYHe31KXbt1aL/AIwf+R8b/wAN
+1/8AUXLH6pj9IzPrf1CvrWS6iitlfokO267KvYNzX/vPctPDc4jJKiZQyCdx9zihCWLghHHCWP5W
+nkqJMRoBKPDrw1KQnxSM5cT0X1Q6Xn9Ow8j9oMbXdkXut2NIdAIaOWl35y3l5gLHM+p2ZVVY40jq
+AYzXQs27v+lG5WqMXomF9YekHomU682WEZHumPohrfa1n091ibl5QznOcp+q5/LD0fqocfqPF+rT
+DOIxjER0qO8vV65cP+E6zMVv1lzsjLpP7Oz+mZPpMya/cXsaSP0rfZ7/AG/+i0kf6l/0jrX/AIcd
++V6SXEff9i/1XDXD/V9vj4eP5+Hj/RTQ9v3f073/AMLhvh+V/9Hufrj0vK6n0f08Qb76LG3tr7u2
+hzS0f2bFi5HWcPLf63UPq1fZkwBY41TqP5TmBy8LSWhy1e1Hj2uXt8Pue5+j7n81+h8jVzfOeHsO
+Pi4eH+p877u3r2C3EOE36uZAxXHc6n0vaXfvEbfpKGP1fp2LaL8X6tXsvZ/NuFUEE6aO2O2rwtJS
+fqKl81a8f8/X9bjWfrLG1/o/zX/Nfor6n9OzcXFysrOZ6N+fc6/0Ty0H97936SS+dUlX/WffP0eP
+i/6nwcP/AEfbZfR9368Nf4XFf/fv/9nCpZ40AAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIxLTA2LTAz
+VDA3OjIwOjM2KzAwOjAwZ+AwkwAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMS0wNi0wM1QwNzoyMDoz
+NiswMDowMBa9iC8AAAAVdEVYdGV4aWY6Q29sb3JTcGFjZQA2NTUzNTN7AG4AAAAhdEVYdGV4aWY6
+RGF0ZVRpbWUAMjAyMTowNjowMyAxNTowMToyMoKnHKUAAAATdEVYdGV4aWY6RXhpZk9mZnNldAAx
+NjTMeysUAAAAF3RFWHRleGlmOlBpeGVsWERpbWVuc2lvbgA0MCnjkPwAAAAXdEVYdGV4aWY6UGl4
+ZWxZRGltZW5zaW9uADQw9HVJeQAAACt0RVh0ZXhpZjpTb2Z0d2FyZQBBZG9iZSBQaG90b3Nob3Ag
+Q1M2IChXaW5kb3dzKeepxzsAAAAcdEVYdGV4aWY6dGh1bWJuYWlsOkNvbXByZXNzaW9uADb5ZXBX
+AAAAKHRFWHRleGlmOnRodW1ibmFpbDpKUEVHSW50ZXJjaGFuZ2VGb3JtYXQAMzAyRSRqXQAAAC90
+RVh0ZXhpZjp0aHVtYm5haWw6SlBFR0ludGVyY2hhbmdlRm9ybWF0TGVuZ3RoADEzOTCb40CLAAAA
+H3RFWHRleGlmOnRodW1ibmFpbDpSZXNvbHV0aW9uVW5pdAAyJUBe0wAAAB90RVh0ZXhpZjp0aHVt
+Ym5haWw6WFJlc29sdXRpb24ANzIvMdqHGCwAAAAfdEVYdGV4aWY6dGh1bWJuYWlsOllSZXNvbHV0
+aW9uADcyLzF074m9AAAAAElFTkSuQmCC" />
+</svg>
diff --git a/src/icons/svg/formManage.svg b/src/icons/svg/formManage.svg
new file mode 100644
index 0000000..8dcab0b
--- /dev/null
+++ b/src/icons/svg/formManage.svg
@@ -0,0 +1,138 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="32px" height="37px" viewBox="0 0 32 37" enable-background="new 0 0 32 37" xml:space="preserve">  <image id="image0" width="32" height="37" x="0" y="0"
+    href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAlCAIAAACs1XwQAAAABGdBTUEAALGPC/xhBQAAACBjSFJN
+AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QA/wD/AP+gvaeTAAAA
+CXBIWXMAAAsSAAALEgHS3X78AAAI/3pUWHRSYXcgcHJvZmlsZSB0eXBlIDhiaW0AAFiFpVlZtuym
+Dv1nFBmCkQDBcGjXeh9v/r/Zwh2u5pybxJXUsQ0S0tZGEnVNLP/7v/kLFzu7GY6OXHJtc/hclx22
+btZn3LIt5J389mzwgqbs/r3diskvirfGNaXhCrfYeqYYvYvsQ47O+lSpLBZxvgWbnAq2lxtcRTah
+kEIX54Z4cXj2Rk6HrvX9JizOc6Aw8Km3EjeFg8eniw9tfW90YHnRgtD5OO6VoTZJPJU4vMX9udC8
+zNPU4IVcDxYKvXfOe0Dxwbl1Cb2DQhMCVlM/vWxuYJUc+PQxRLIhssRSuozQF1VZDgWnvFEFr2vC
+9Arr+gsWNRCe0hyDNf5SdbqWbu2OXfPJlZUGXC47iNq3aEKRpU/hnPfbXBtOyeGuvcx3PEf7Cbm5
+3XYc1Hh6RmOCRUEEtr6PQB0hiqCKeR+alvEHISwDfD6N9CDgkYQPQ4A4VOc+jEwI3u02M0YcSpCX
+4K+8gXNOAP45xvf74AjbNDi4hpCS28JYaXKtL4qBTvxlHjCqu8bfJkKh86D6RDAQ+8m1e4Z5FUDk
+YOx3geflCeBj3HtzCWwSAS+GPszPCIgPyAmwmzDd4s4+s8O0yG9BNHm8pofz/fP5glwJ4UOQ6bD5
+IwfUku1nhx8YYR+zgr8I6OZhOJze1dstKK+xhJcQjbrj73yE7yBvNOyXCO1YOX1yipkSV3ejCfKy
+UH0TOpDYBd7mt32+uQW8WgUjv4qU1yV27D5YdOUg7u1+q9F1cXmg12eVM0cNC8vKn6i98Ygvi42V
+cXlGbSzXY7LbFsvOSmz7PW6vaJqPE3jwouA99PZejMReiqZp20viOH0/FC/lW/Eh5PeZ9CEDsHGp
+ohUf+5yUbUopv89huu9nK7F9UMT+vj+rxnPOYukZPVW0x3/8gwv0uBSc78y/FXy9Pir6E8GPik7B
+hT+XoreqSgdb6M4iC7Ptyma3TjjG7yaM3RmMNQBrPjpbvYv50Q+tvCXs4SbdrAP9U93nrBR4S/4f
+r1eings/DPhZ0RcVn6aZd4FZAOqVH8+FZ2HHSA8ODcVbVV4sAgJIVnwqvSA/U/+XdHfUEvM1H2p1
+XXLyOX5339rs3Pn0ypBXrILWTiRd7QzRkaNo1quy2e+NhkEtuQSP0VOn3CNg0zfLJcie/LWb/T4t
+aJGeRSG9N6cosddSxi0TjwkNtd0rPujBNErovWe192EJgKCFXc8Ae9TyqvucdIH+PA98ocEHHv07
+Gpi7p/hvNHjj0eUCi2JTfziRXHtA55hvk1xD8OXHo01As1Vn4bZoj3+Y2BX6fUVEDhx2CfBirmuz
+536c5swWX6f/oDqFqLyS7OyMsdzcOjftWAng3qYfsyQom4LybOnYknaYBgLuXf8n9dDgn7NX9eZN
+f4H3oJH6r3a9c3j6ax8e4Fxg3kWuuPVJC385MAl5HMTmqXElzppqczio+W3ycs2onV2kzje/CBS5
+GsKf1S8/IFBcVzz+Eu+913UttW4lhjVr04TBtQnf71NySwW+W2bQ8lRyYPSsT1cBbUd0Zx6waq0d
+o8UxZqNaQQLFB/2tH3qkVrAJgyrV70GouxrXqQAn7eimy3F+Ev6v+E5bhYtFm9FirfXbwOu6Dett
+tIyPn98Rk+r9eT49P+b70PxY9LUFn4amuVltnbtFMdG/uHPn3daNdes6sO6PbfjFojE0MFAQd/hJ
+j8KWNCKEt3Zj/QZq7YgrEMZ50RoeRwj9ZpfP8+I5gyCIsx+aTgU7w2F7S5ovovuZg19F7T7m1LKp
+mPR3K8yIqLR4VZl3UasTHP4Q2OMdghesZUJ7j2CigFiXbLbFOiImDHuqONsys0M+itQszqnY/ok8
+PO12WBQkZmjJVCgyTuouMTIocmelrMUKuaeR9x2cG1RAfVO5oV50nD5w9JTkMpJycclXJObuhsu+
++Oqb735oatP9i12cQ8G+bUEzDc9fsdCNCBJ1kixFqjTpMsTuCNEBsFuwUjw8+xsIAm/Rdjiz4yAI
+sGVMoWgT0t+JQ7UejqN/BiKBulUgEjn24P503w0LkqAemR2FeZiG/412NDJbUUQ0n2r70GlHYgXi
+CYP5MxxIdiSeQICWeW5kVh4dviouSs6ec+lFs5lPA/eh19hjislJwx8UAPEtieWeORYZ3HJrvQaj
+Im3zkZEWIMjSdTyP2Q31rD+vld7IdqrApogdreamUqmMmn0jvY9lKsJmGSyjo76MjjQdagVexcLV
+gBBx6/CGU8a5c9gtj1q4CtalQFE3KEB0hiS6gTSG9qzrCr3DbHCPE1KbHjKRZV0s3cItipKL1o7s
+4VJF7W+ICwKNG+N7zTVyw05pCSeNUAAOMrRsaXQ9iEgPuUd4JMCOhisCvgxfqssIe8uzHBUykUSK
+K2VwqltD5RnNQTAX9S437BevJNAjOLrl3DYBFkh1vXTkj1g88rRNGee1PjoiAqeVXJ0SKkV1MaHf
+TvoCjJDeQSxkaI7dx86EGG74j/GEnQmqjFINwzDwYUPIe7bhiAdYG2Ib2NyJUeAz1WgjfAW5O8jD
+hK3aGXxJoAYDWzawNqmwlRm/mMC/AR6mgQSBXJxwkLatoItCVkGIIhdbmNErlJaYlZg1YI8a2krC
+UiH7akEAycE1EJs7Vx8HfMwRviNiYjdpzo5c8ha5p1ZA/VE79urIY+cRkZ/2xBBAkjjAsgzDJp7Y
+ARNRcF4x1b/AALs56Q+K6A6x4Wut3WSfkTYwNSEXYuGECqcHCrBFsbMt9kRNEUwTv4Gc1sEiqq32
+4cAKsHGLYpCAwNXmiq1DkBx6nIhFQSRQUjjM5wpjUO2xkyEdEYbWNDijch9zk6GtgYhr2ducLTyG
+EQ5x0V3L2HqjNFgWq8MGdlVFpmbozQCslYY8gDBhQ5rSOucQEQKiFLSznQSIVIfrKOKhAFgaSHZJ
+j9261cBeLAeCtmlNRi6QbqAbzB0dcHe86hiEjc1PhNLjX26WkuXvH2KuPhs6nf4KhKoZcB9QU8Ne
+Yee/uYS4v5djXE+T17tTm56O/osSmu2T/hCqrV+4jFx/G1l/rpDtPmxNV8zfgqpLppZFh8kAAABk
+dEVYdFJhdyBwcm9maWxlIHR5cGUgaXB0YwAKaXB0YwogICAgICAzMQoxYzAxNWEwMDAzMWIyNTQ3
+MWMwMTVhMDAwMzFiMjU0NzFjMDE1YTAwMDMxYjI1NDcxYzAyMDAwMDAyMDAwMAp2oBI0AAAElnpU
+WHRSYXcgcHJvZmlsZSB0eXBlIHhtcAAAaIHtWt3OozgMvfdT7COE2InhcWiBu5X2ch5/jx1+C6Xl
+m9FKK/EhUZo4x8d27JjO0K+//6G/8CecauInD1pryFXm/MhJJYYcc8qam9xzF2M/PB6PIUaMN1ls
+JCkn6ThIp0EYsnVuSGptFQsTayt9koxPADJjUYw8cB8DP7XmVuuMhbkzZbmKwb7nZ+6VbY5MA9hI
+HowHt2ViFncmCwzGHrZC5hUxpFq6FCgauUF9iFPsmWMHPoErhlaGvRirGG6wZ4w9MRp9PsYBn+We
+KXYu1rpgCxGN4eWKo3kRLCCToojkF9Mi+aSZV6vgCtzCnEH9L/YKqdg7Y4Xmihu7ZiYR964oACNl
+RXzMI1rDLGiw+S0LUECoEIiYG/dUAw9BYprPFcFhg8Kxxqo4dh0Lc/CeryvrlxDhmQmPHUypwScY
+ebg2TLFaILGEDxwQQCHmpxlPxXoTxD1hYbLQm6nQWoCrPTD2Uw1LwAgG21Og74iPvHfLFxvo2C/S
+IQWuqKhp6xsAdgeGsIokzSUkx+B0hL4FtwxVBB0yQ4q+DQZ3MtLV4ItHyfbMXr8tONqo742jK/oL
+/KLa4MU2aYJpHoOYTMOQn7vM3scpWP4ilUOsk9csk1YlUG2ONGBxEimfBu8ZH8G7s1z3O7hbjUCq
+V6yEDwHXByZQdXAPG9gu22ZtctbmHJZG3FRAvJDICayXu1wgqzU0vaV8Cu251+bsBaYzuJIijX1B
+uUeksuURSr8z2bnafGhBMYDR7GIq00Ld06IVq03sBvS+5eAbEy0y2DeNnyUtKCF8UuEsgYXC8BHX
+wowUkOgxaGBCxnQGQA3BKCwJ5mEXe51+VWxbhTXRVDR2mqVoZqvQ0CwANG+xKd0ohoKEqOGrea6y
++gqhOJKVnWZza1OOTZj9nJhMROh3mUxEaM9kOltXbHAkewDASpuXwwkB0Yp7Wg8irA0MWqpPax3B
+dGb4RlklUC7mj9Lk4l+G/MxcOrL30PErnqrYnqlwnDKD3mXzm2Rew9kexxNgKzuyQdWSw0L482qk
+SBGrRsM2Ep+dDuDKq/VsNs2i3+YYEgcXfONJhCJgHmEDGjdY7RFJlmtwslp0IF67v1iqTw6nw1ok
+xdXu9vo7h9sBGf+Ew8k8Ppb/tXNtkXnL4EvLM5wHhb6Nyqeg0EHl43Xl+7bw0abyfUiDswOCDg6f
+t2lwFhS6kgZnQaFvo/KuPtmThQU95L5IuVHBjanGlwn0I1raURx53sjYvJ18UAY470ZKzzwAF0Zs
+u5+DrtG67MHflDaHKo2n6nWjnCVq+bjb6EuDZl/MrghbI2mx8veMpF3r8MMiR1fy6ayRoCv5dJZO
+dCWfztKJruTTWTrRlXw6Sqc4jG+QSxswDn9qHrZN1rwp8S4i88ZavTxciZwXQrpaCV8jNykub0er
+zuunjRd924nMJr9pAf+TZvQlwO/e/osULWLlp4plG7z+PmMz7y86m7xy3UA30A10A91AN9ANdAPd
+QDfQDXQD3UA30A30fwU6/N8lyX6+8p9B1P4xc+Ce/gWA5TYJGfJAWgAAAAFvck5UAc+id5oAAAcr
+SURBVEjHrZVNjF1lGcf/z/N+nHPu3Dudezv9mDaUsUwLtVoUiCliomhIXGjAhRsNIUSiYcOWjVEX
+ICayExbGhVFY60aNCYoJESVWKdLS0lqx0K+hM52ZO/fOvfe8H8/j4nZKwU6xCU/ezck55/97Pt+H
+6oFyNcwInDY5QFLQ0q8pHPDsr955/uXu6W5pVIrURwjWNgUWupbUj0C+kW/d3Hjw7s63H+jUYEa2
+yCQeCjUQRIUhrXUkS660EGsgSF1IATt93xOnTp1fPddz8M3CQMOoWVS93ppwaHcme70olmHrQtzs
+Jr//FnruoS1oECiCRLUm8tBNqK2FzJdlu4ciMWLEhG9m4Le/P3P8lI8rK1+9ffrAnK8abq1vq6ry
+rh1HiZyth+RLubS6cPho/5V/dlf6uw8vuB0zBRt4B6HgESYIAEg1vLXkfvbr3p9eXVjodkfSd83O
+u4u5bE7ese3iz7/3mV2tGogZZRQpmAijYYY3LYM1RX5jcfKb3z18pNfw4fxMe3a4NCyLenYHP/Cl
+PV872Lh5E+ypvvvhTw+99LrEYstqUrbNOhd2qnCx0eRhxwEJCMGUJUclxwBXAgAIgUo3XWHCTtpU
+FNPbl9ciiHy55c3z9TPPnTjzdvnYI/vsL36DQ2+41e785z/X3P+xTstWK8v57QuLfzhxYqE3euHI
+zi/cMVk1igRIYTPAsMQghanaK0P87uXF5aVTbe/vn2vf1NnerHhxMHj1X3jlH/HFQ5j7pNCdjy3N
+nz95z13Vjx4/sBPR1szWHH3rzJefHM1f7G7avLXyFAdLliL7anWQRetNEzYOaiGUkxOjYdVfWdu7
+t3rxyb2bPYCUTDy8WD3+4+NHTl48+Nmb+PTFRfZu9807KsADDAPC7j07n/rOnrvmUo7L3WFMICL0
+et2q2aqaWwfD3KimrJ0cjRh1/57d+vQje7Uc540shrPT2LrVu7KxuGotm6yp0TBhChHZwEI5NdQ+
+cDfumj149Ni5Mxe6mZrqTUQUqpmZpG3EUMilzbt3zezf15luoyUQE1PlPFodoEySzZSLtcUG1sJw
+30xx67adUXbCIBMiwEAGCHCAUWhCYUEkQA1U19TZEIB6GbbBXBXwEIImmAxKAKAW6gAGA6ihNfIQ
+fIMALXYAIIUSCABZqAEMRAALsCoUYBRKBewkCW4MEICsIIUzIIAVBBK1IBCggBooEAEBCChxgwCL
+xCREZECqmYgBMBREADRnBgNMHya1IcBAWZRYARAx1sMgECDgceayAVLM1l7H0Q1MkhuMUs5ZmbKo
+MU4JoYa1sI5JvaoQKIdojJ1s+g0Bysu1a5ByAQckMAP2nYvx3if+3e0N6gzrKhVWSaVxkEx1ds6l
+lAC11sZUO+e2bNny5yemyoI8A4pMSFZBWpCxBMfkxykGc84IKawNVkfdZcfOOxclhZA8G4ak0RBU
+GqiSqmqSXIcQYvSrq0RtIrrad1VVVZuTBZkYVASGxFguLW+f2fyTh6vV/mAUNQmIjGNiFUmh1yiM
+MSklQJxzICmKotNpMsv79dcBzpbWlMa4q181Srr/3iqiInC+XHMQYAAgjb8Zf5o0qKrjWnMBfHAW
+VNWGEExZGWOYAUWM0TooYIIaNmNJVRBBQyTDSdRaC9b1ZvOiwjCZ3lPF1c0rGlMKqvnys3WXffQm
+xMxkBACBgUShtNZKAUAz6WU1JsL6eLxnRDQuiW1MGIisXzJEBIVdWcnfeOrs4qVlYY6SVcUZbbcm
+bj+w75kHExERE11OiKpIzkKmei+CdQAR2ZiGkiSl5pgLIAS9cH7h2Hy/N8xlVWR2gFIM54arw5MX
+hGdEoaKqICLDDDbgK0X5YBzW5qaQM1wmqKOsSoVPn/r49u9/3c9fWJRsrClFRDS0OzO37dtmAENj
+V94/pAqhnMDesAE4KJTDdSb54a90EjoWUEAUCoCuc7lvaBv+UqIPtSCDTGAGZWiWPIKd+mgAQAPE
+qkpm3B8Mcmz9/6n74YAEUhWQjPdWzBHKxhhHN6B+PYDNBCYogwSqEGOshQIfFQCaAYVGlQDAGA8A
+dMNl3ngfkGEgiVjbwHhiYVKCdTegDoBHpSQTl0QiCGmZwqUE1AADEFjyyA7ZkRgILK/37P8e7gc4
+TgJdXEUeVm6YBqalfFu7qkI+9JfjKzWArTDTnJ0JSObaR8dLc/2M5wMEjJoOIMvAzPyCef1v706x
+2dVM9PQL+uwvj/WybK5WDszO5qzWDzzHvrSuGTJZKyIppZSSqhpjnHPOuXaWs4MFX1Y+4th/Vk53
+p7a24g8e/YR99E4svsbPv/R2r578+wlaS0VIw8qoNeeuDcjmyk0pcnkBEFHSTpebnlvbDEbDS7sm
+zn3rvn0PfRqkevZ03PniSfzxr6fePLFSTs6UTRl1573sunbVEjMzEY0X1hVAbc+n1kToozlam7ul
+OnjP3BfnMOfO/hdJUbR+L9ZUMAAABV9lWElmTU0AKgAAAAgABwESAAMAAAABAAEAAAEaAAUAAAAB
+AAAAYgEbAAUAAAABAAAAagEoAAMAAAABAAIAAAExAAIAAAAeAAAAcgEyAAIAAAAUAAAAkIdpAAQA
+AAABAAAApAAAANAAAABIAAAAAQAAAEgAAAABQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykA
+MjAyMTowNjowMyAxNTowMDoyNAAAA6ABAAMAAAAB//8AAKACAAQAAAABAAAAIKADAAQAAAABAAAA
+JQAAAAAAAAAGAQMAAwAAAAEABgAAARoABQAAAAEAAAEeARsABQAAAAEAAAEmASgAAwAAAAEAAgAA
+AgEABAAAAAEAAAEuAgIABAAAAAEAAAQxAAAAAAAAAEgAAAABAAAASAAAAAH/2P/tAAxBZG9iZV9D
+TQAC/+4ADkFkb2JlAGSAAAAAAf/bAIQADAgICAkIDAkJDBELCgsRFQ8MDA8VGBMTFRMTGBEMDAwM
+DAwRDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAENCwsNDg0QDg4QFA4ODhQUDg4ODhQRDAwM
+DAwREQwMDAwMDBEMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwM/8AAEQgAJQAgAwEiAAIRAQMR
+Af/dAAQAAv/EAT8AAAEFAQEBAQEBAAAAAAAAAAMAAQIEBQYHCAkKCwEAAQUBAQEBAQEAAAAAAAAA
+AQACAwQFBgcICQoLEAABBAEDAgQCBQcGCAUDDDMBAAIRAwQhEjEFQVFhEyJxgTIGFJGhsUIjJBVS
+wWIzNHKC0UMHJZJT8OHxY3M1FqKygyZEk1RkRcKjdDYX0lXiZfKzhMPTdePzRieUpIW0lcTU5PSl
+tcXV5fVWZnaGlqa2xtbm9jdHV2d3h5ent8fX5/cRAAICAQIEBAMEBQYHBwYFNQEAAhEDITESBEFR
+YXEiEwUygZEUobFCI8FS0fAzJGLhcoKSQ1MVY3M08SUGFqKygwcmNcLSRJNUoxdkRVU2dGXi8rOE
+w9N14/NGlKSFtJXE1OT0pbXF1eX1VmZ2hpamtsbW5vYnN0dXZ3eHl6e3x//aAAwDAQACEQMRAD8A
+6qvr/wBZ+qtuyOiYlH2JjnV12XE+o4t/Pa3exv8A0Fg4DPqjfji3r2VkDqbnO+0h4sJDtx/crf8A
+m/yl0v8Ai/8A/E83/jbP4LdsxcKx5fZTU955c5rSfxCvyzxwzyYowMBGVCeE8GT0fvyl7nE1Rjlk
+jGZkJEi+GY4oer90el89z2/VSigW/V7KyD1QPZ9nawWSSXCf5ytn5q6B/XvrL0t1FvW8SgYdr21P
+soJ3tLvznA2Wf9SuirxcKt4fVVUx44c1rQfwCwvr7/yLX/4Zr/7+lHPHNPHilAzEiQZ5Tx5fV+5K
+PAk45Y4ymJCJA+WA4YafvD1P/9Dr/qFt/wCbY3aN9SyTxposgYn+Lh79oyXy4wP56JP8o1rZ/wAX
+/wD4nm/8bZ/Bbg6fgB24Y1QcDIOxsz9yvZM3t8xn1yC5n+alwf43pk1oY+PFj0iaj+mOJxB9Qfq6
+CD6dumv84VH6+/8AIlf/AIZq/I9dKub+vv8AyLX/AOGa/wDv6jwZcmTmMXHMzqWnEbX5YRjinwxE
+bHR//9HY6S3r/p3/APNh7z0s3O9P12VAh35wr9Sxz3MV6P8AGH+8z/No/wDJrwRJas74jf3b/q/D
+7/8A1Xh/TaUaofzv/U79v/A/qvvUf4xJ+kz/ADaP/Jqn1NvXpxf+c73jpovZIpZUZf8AmCz07A9r
+PpLxFJCF8Qr7v/1Dh9//AKlxfpqlVf5X/ql+3/h/1X//2XJ5aFEAAAAldEVYdGRhdGU6Y3JlYXRl
+ADIwMjEtMDYtMDNUMDc6MjI6MjgrMDA6MDD/gJttAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIxLTA2
+LTAzVDA3OjIyOjI4KzAwOjAwjt0j0QAAABV0RVh0ZXhpZjpDb2xvclNwYWNlADY1NTM1M3sAbgAA
+ACF0RVh0ZXhpZjpEYXRlVGltZQAyMDIxOjA2OjAzIDE1OjAwOjI003je9QAAABN0RVh0ZXhpZjpF
+eGlmT2Zmc2V0ADE2NMx7KxQAAAAXdEVYdGV4aWY6UGl4ZWxYRGltZW5zaW9uADMyiKxnFwAAABd0
+RVh0ZXhpZjpQaXhlbFlEaW1lbnNpb24AMzclUEodAAAAK3RFWHRleGlmOlNvZnR3YXJlAEFkb2Jl
+IFBob3Rvc2hvcCBDUzYgKFdpbmRvd3Mp56nHOwAAABx0RVh0ZXhpZjp0aHVtYm5haWw6Q29tcHJl
+c3Npb24ANvllcFcAAAAodEVYdGV4aWY6dGh1bWJuYWlsOkpQRUdJbnRlcmNoYW5nZUZvcm1hdAAz
+MDJFJGpdAAAAL3RFWHRleGlmOnRodW1ibmFpbDpKUEVHSW50ZXJjaGFuZ2VGb3JtYXRMZW5ndGgA
+MTA3M54vguYAAAAfdEVYdGV4aWY6dGh1bWJuYWlsOlJlc29sdXRpb25Vbml0ADIlQF7TAAAAH3RF
+WHRleGlmOnRodW1ibmFpbDpYUmVzb2x1dGlvbgA3Mi8x2ocYLAAAAB90RVh0ZXhpZjp0aHVtYm5h
+aWw6WVJlc29sdXRpb24ANzIvMXTvib0AAAAASUVORK5CYII=" />
+</svg>
diff --git a/src/icons/svg/formwhite.svg b/src/icons/svg/formwhite.svg
new file mode 100644
index 0000000..e004ab7
--- /dev/null
+++ b/src/icons/svg/formwhite.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1611646418656" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2080" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M671.891093 190.746449c-8.147967 0-14.993856-2.556225-20.545657-7.668674a68.602683 68.602683 0 0 1-13.883496-17.869609 92.056045 92.056045 0 0 1-8.323707-20.937079c-1.853263-7.149441-2.779894-13.10864-2.779895-17.877597V0.755041h2.220721c6.662161 0 12.956864 0.678997 18.876122 2.04498 5.927246 1.357994 13.140593 4.593216 21.656017 9.697678 8.515424 5.11245 18.876122 12.261891 31.090084 21.456312 12.22195 9.186433 27.583263 21.280571 46.091929 36.266439 19.986483 16.335874 35.898982 30.123512 47.745486 41.362912 11.846504 11.231413 20.913114 20.769326 27.207817 28.597765 6.286715 7.828438 10.17697 14.474623 11.662776 19.922577 1.477817 5.447954 2.212732 10.208923 2.212732 14.298883v16.343862H671.891093zM1017.237062 671.843932c2.22072 5.447954 3.706526 12.261891 4.441441 20.433822 0.742903 8.171931-2.955635 16.00037-11.103602 23.485315-3.698538 3.410962-7.029618 6.646184-9.985253 9.705666-2.971611 3.06747-5.559789 5.623695-7.780509 7.668674a53.441075 53.441075 0 0 1-7.772521 6.126952l-94.3886-85.801283a354.125004 354.125004 0 0 0 14.993856-12.261891 247.857947 247.857947 0 0 1 13.875507-11.231413c8.882881-7.492934 18.508665-10.728156 28.877352-9.705666 10.360699 1.02249 18.876122 3.235222 25.538284 6.630208 7.405064 3.410962 15.361313 9.370162 23.876737 17.885586 8.507436 8.507436 14.985868 17.534104 19.427308 27.06403zM625.255966 766.839636c16.279957 0 29.971736-4.081971 41.083326-12.253903l-215.433833 206.33527H144.422094c-14.067225 0-29.428538-3.754455-46.091928-11.239401a196.102383 196.102383 0 0 1-46.635126-29.628243 170.731852 170.731852 0 0 1-36.090699-42.385402c-9.617796-16.00037-14.434682-32.511984-14.434682-49.542832V132.520441c0-14.298882 3.514809-29.276762 10.544427-44.941627A147.062808 147.062808 0 0 1 40.599427 45.185423a174.126838 174.126838 0 0 1 41.642499-31.665234C97.77898 5.012753 114.066925 0.755041 131.105761 0.755041h425.2919v127.683429c0 12.940888 2.22072 26.896278 6.662161 41.874157a133.434934 133.434934 0 0 0 20.545657 41.370901c9.258327 12.597395 21.28856 23.149811 36.090699 31.665234 14.802139 8.515424 32.57589 12.765148 53.305275 12.765148h162.120569v338.10067L682.994694 739.264361c8.147967-10.895908 12.213962-22.814306 12.213962-35.755195 0-17.701857-6.84589-32.855477-20.545657-45.452872-13.691779-12.597395-30.163453-18.900087-49.415021-18.900087H208.830971c-19.24358 0-35.531525 6.302692-48.855846 18.900087-13.324322 12.597395-19.986483 27.751015-19.986483 45.452872 0 17.709845 6.662161 32.687725 19.986483 44.941628 13.324322 12.261891 29.612267 18.388842 48.863834 18.388842h416.424996zM208.830971 383.797338c-19.251568 0-35.539513 6.302692-48.863835 18.900087-13.324322 12.597395-19.986483 27.743027-19.986482 45.452873 0 17.701857 6.662161 32.687725 19.986482 44.941627 13.324322 12.253903 29.612267 18.388842 48.863835 18.388842h416.424995c19.24358 0 35.707265-6.13494 49.407033-18.388842 13.699767-12.253903 20.545657-27.23977 20.545657-44.941627 0-17.709845-6.84589-32.855477-20.545657-45.452873-13.691779-12.597395-30.163453-18.900087-49.415021-18.900087H208.830971z m418.637728 511.748216l14.434681-13.284381 27.766992-25.530295a3832.340142 3832.340142 0 0 0 36.641885-34.221459 4000.148311 4000.148311 0 0 1 39.972965-37.280941c31.832987-29.28475 67.739957-61.972475 107.720911-98.063174l93.27824 85.801283-107.72091 99.085664-39.972966 36.769696-36.641884 33.710214a1433.562818 1433.562818 0 0 0-26.097458 24.507805c-7.029618 6.813937-10.919873 10.560404-11.662775 11.239401-3.698538 2.723977-7.772521 5.615706-12.213962 8.683176-4.441441 3.059482-8.882881 5.615706-13.324322 7.660686-4.441441 2.04498-11.28733 4.593216-20.545657 7.660687a667.014907 667.014907 0 0 1-28.318177 8.683176 576.748219 576.748219 0 0 1-27.759004 7.149441c-8.882881 2.04498-15.545042 3.402974-19.986483 4.081971-8.882881 1.357994-14.810127 0.343493-17.765762-3.059481-2.963623-3.402974-3.706526-9.194421-2.22072-17.366352 0.734915-4.081971 2.22072-10.216911 4.44144-18.388842 2.22072-8.171931 4.808898-16.511615 7.772521-25.019051l8.323707-24.004548c2.596166-7.492934 4.633157-12.597395 6.110975-15.321372a81.136173 81.136173 0 0 1 17.765763-23.493304z" p-id="2081" fill="#ffffff"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/help.svg b/src/icons/svg/help.svg
new file mode 100644
index 0000000..feb70dd
--- /dev/null
+++ b/src/icons/svg/help.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1611891761749" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4154" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><defs><style type="text/css"></style></defs><path d="M820.608 960H203.392a70.72 70.72 0 0 1-70.464-70.848V134.848c0-39.04 31.616-70.848 70.464-70.848h411.968v241.216c0 38.08 30.848 68.928 68.928 68.928h206.784v515.008c0 39.04-31.616 70.848-70.464 70.848z m-101.824-482.432H305.216a34.432 34.432 0 0 0 0 68.864h413.504a34.496 34.496 0 0 0 0.064-68.864z m0 137.792H305.216a34.432 34.432 0 0 0 0 68.928h413.504a34.496 34.496 0 0 0 0.064-68.928z m0 137.856H305.216a34.432 34.432 0 0 0 0 68.864h413.504a34.496 34.496 0 0 0 0.064-68.864z m-34.496-482.432V98.496l172.288 206.784H718.72a33.28 33.28 0 0 1-34.432-34.496z" p-id="4155"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/helptitle.svg b/src/icons/svg/helptitle.svg
new file mode 100644
index 0000000..b5365a6
--- /dev/null
+++ b/src/icons/svg/helptitle.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1615023008078" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2403" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><defs><style type="text/css"></style></defs><path d="M512 1024c-284.444444 0-512-227.555556-512-512s227.555556-512 512-512 512 227.555556 512 512-227.555556 512-512 512z m0-68.266667c244.622222 0 443.733333-199.111111 443.733333-443.733333S756.622222 68.266667 512 68.266667 68.266667 267.377778 68.266667 512s199.111111 443.733333 443.733333 443.733333z m11.377778-694.044444c45.511111 0 85.333333 11.377778 113.777778 39.822222 28.444444 22.755556 45.511111 62.577778 45.511111 102.4 0 34.133333-11.377778 68.266667-28.444445 91.022222-5.688889 5.688889-28.444444 28.444444-62.577778 56.888889-11.377778 11.377778-22.755556 22.755556-28.444444 39.822222-5.688889 17.066667-11.377778 34.133333-11.377778 45.511112v11.377777H472.177778v-11.377777c0-28.444444 5.688889-51.2 17.066666-68.266667 11.377778-22.755556 39.822222-51.2 79.644445-91.022222l11.377778-11.377778c11.377778-17.066667 22.755556-34.133333 22.755555-51.2 0-22.755556-5.688889-45.511111-22.755555-56.888889-17.066667-17.066667-34.133333-22.755556-62.577778-22.755556-34.133333 0-56.888889 11.377778-73.955556 28.444445-11.377778 17.066667-17.066667 39.822222-17.066666 73.955555H352.711111c0-51.2 17.066667-96.711111 45.511111-125.155555 28.444444-34.133333 73.955556-51.2 125.155556-51.2zM512 688.355556c17.066667 0 28.444444 5.688889 39.822222 17.066666 11.377778 11.377778 17.066667 22.755556 17.066667 39.822222 0 17.066667-5.688889 28.444444-17.066667 39.822223-11.377778 11.377778-22.755556 17.066667-39.822222 17.066666-28.444444 0-51.2-22.755556-51.2-51.2 0-17.066667 5.688889-28.444444 17.066667-39.822222 5.688889-17.066667 22.755556-22.755556 34.133333-22.755555z" p-id="2404" fill="#2c2c2c"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/home.svg b/src/icons/svg/home.svg
new file mode 100644
index 0000000..4e97c20
--- /dev/null
+++ b/src/icons/svg/home.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1615188284589" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2221" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><defs><style type="text/css"></style></defs><path d="M998.428444 381.112889l-469.333333-353.180445c-0.469333-0.355556-0.981333-0.568889-1.479111-0.896a28.017778 28.017778 0 0 0-2.417778-1.464888 29.909333 29.909333 0 0 0-10.453333-3.128889 30.705778 30.705778 0 0 0-5.475556-0.014223 28.771556 28.771556 0 0 0-13.112889 4.707556c-0.412444 0.284444-0.867556 0.469333-1.28 0.782222l-469.333333 353.180445a28.458667 28.458667 0 0 0 34.204445 45.468444l73.656888-55.424V854.186667c0 111.701333 29.141333 147.555556 136.803556 147.555555h483.555556c107.662222 0 147.640889-35.854222 147.640888-147.555555V379.320889l62.805334 47.260444c5.12 3.854222 11.121778 5.717333 17.080889 5.717334a28.444444 28.444444 0 0 0 17.137777-51.185778zM443.747556 674.673778H580.266667c31.288889 0 36.707556 0.554667 36.707555 28.8v241.422222H417.877333V703.473778c0-28.245333-5.418667-28.8 25.870223-28.8z m400.782222-327.111111v506.666666c0 81.365333-14.193778 90.666667-90.752 90.666667h-108.359111V703.473778c0-48.967111-23.850667-57.244444-65.152-57.244445h-136.519111c-41.301333 0-54.314667 8.277333-54.314667 57.244445v241.422222H270.222222c-76.572444 0-79.914667-9.301333-79.914666-90.666667V347.562667c0-5.788444-1.749333-11.150222-4.721778-15.644445L512 86.272l334.336 251.591111a28.231111 28.231111 0 0 0-1.806222 9.699556z" fill="" p-id="2222"></path><path d="M435.370667 230.499556L250.055111 373.617778c-3.512889 2.688-2.858667 6.855111-2.858667 11.278222v161.777778a14.222222 14.222222 0 1 0 28.444445 0V391.907556l178.730667-138.837334c6.243556-4.778667 5.034667-13.710222 0.256-19.939555a13.425778 13.425778 0 0 0-19.256889-2.631111zM261.418667 589.340444a14.222222 14.222222 0 0 0-14.222223 14.222223v14.222222a14.222222 14.222222 0 1 0 28.444445 0v-14.222222a14.222222 14.222222 0 0 0-14.222222-14.222223z" fill="" p-id="2223"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/logout.svg b/src/icons/svg/logout.svg
new file mode 100644
index 0000000..5a5ca14
--- /dev/null
+++ b/src/icons/svg/logout.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1611891006162" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2308" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><defs><style type="text/css"></style></defs><path d="M874.140686 556.503194H479.15707a33.412941 33.412941 0 0 1 0-66.825882h403.514579l-83.887809-85.025271a33.811052 33.811052 0 0 1 0-47.204665 32.872646 32.872646 0 0 1 46.635935 0l122.845876 124.552069a30.569286 30.569286 0 0 1 17.061927 9.099694 45.242544 45.242544 0 0 1 0 55.166898 30.569286 30.569286 0 0 1-17.061927 9.099695l-122.845876 124.552069a32.872646 32.872646 0 0 1-46.635935 0 33.811052 33.811052 0 0 1 0-47.204666zM775.465873 200.477645V89.006387a88.295473 88.295473 0 0 0-87.58456-89.006387H116.875482A88.352347 88.352347 0 0 0 29.006556 89.006387v845.70286a88.352347 88.352347 0 0 0 87.868926 89.006388h571.005831a88.295473 88.295473 0 0 0 87.58456-89.006388v-111.186892a32.84421 32.84421 0 1 0-65.68842 0v89.006387a44.304138 44.304138 0 0 1-43.79228 44.361011H138.487256a43.70697 43.70697 0 0 1-43.507914-44.361011V111.186893a44.048209 44.048209 0 0 1 43.507914-44.361011H665.985173a44.105082 44.105082 0 0 1 43.79228 44.361011v89.290752a32.84421 32.84421 0 1 0 65.68842 0z m0 0" p-id="2309"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/orderManage.svg b/src/icons/svg/orderManage.svg
new file mode 100644
index 0000000..290de0b
--- /dev/null
+++ b/src/icons/svg/orderManage.svg
@@ -0,0 +1,139 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="36px" height="36px" viewBox="0 0 36 36" enable-background="new 0 0 36 36" xml:space="preserve">  <image id="image0" width="36" height="36" x="0" y="0"
+    href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAIAAABuYg/PAAAABGdBTUEAALGPC/xhBQAAACBjSFJN
+AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QA/wD/AP+gvaeTAAAA
+CXBIWXMAAAsSAAALEgHS3X78AAAJWXpUWHRSYXcgcHJvZmlsZSB0eXBlIDhiaW0AAFiFpVlJliQr
+Dtxzij6CAxKC4zC+14t//22b8AmPIas6f0RlhIcjNBiGJLxMLP/9x/wHL08xGh/JUaK2Ed73a9i6
+Wc648rY4JsFvN0f2z+2e51h/m/223WqrY2RpOVYpfUsbyyYh9zw2rp76PdHn216Tc/6hCFf3q0CF
+Cyl0IRrCQviNz2OUt+tCvBD74MIIw4R6K6E5OTDeXTi01/vL7xbEXTCoYbNbht4k8VRC8AfX0xIM
+ffA0sDjqwUIhMxFzNHy6vAY37imsV6owwJiGCexowEgO/owxRGdNiF5iKV1G6IuqLB8UvJqE5xXe
+dY3CLFjU4PArzUF4c/tyjKdbOXlqnKjcNDBYznL54Vx7MboEbN3n1SQFghRsBCVHvPbyn7wOw+1X
+yDES1Hf3HJk8YhdE4OynSZjQyX9Up55dI2YZgh3g82lShyGS8GEECIdKoIp5G5oYvDp+rJEPJcjL
+4tslNA2OBOifg+e3Bk0O+zRQALzB0RbGypLLiBjF4C8EEfTPCs0pCIXE4PqEMDjPk2wfdF6K1ddb
+3vw8gR3Ax/hiYJMIeDHylNw9ylgRDkgKcNxB3uLKXnBfpOQtiCaP1+yg940OPAUvyJUQHIL8VcA7
+IdWTbY34DwF7EKE+5DddNY+I07u43YLyGiZYQtRw+M5H+Ayycm3HqF9T3I4V6S9SzJS5uhuDvNip
+zzkGkw4kvkxor0ZYvYKPzxnLXtvK25SJ3buBq6L4fq2c2TcLxQuYWbmev5caFm5124Pal0d+xBdr
+Y6XcrGVjeT1kaWtraMdyS7wFbHoft30xdnFOFb0vvb2tOVnLy/TMvkjP0M2hme/7io9Dgp9JH5MA
+9n694mOfMtmalFJ+F/Luvuaz1r/K8H3tLoweQgsG8b69r//48jKfboIfl4JvEz8q+s3E13kfPfrT
+xIU/t6K3quoOurg7iyy8WtlM67g5BO4uzNO5GusCLK83S5FRoJCPStBGUbcYa34RV/dGcaXAn1/m
+u+CHGL+97DON/CT3cqGvWQDq3UScAczKjqEeCA3Fx7K8vwAAcpU/79Gp6Er9XzLk9ocMqsWVtKt9
+yck3ItrsvCbUZTxo6UTS1cbQc0B7TPWqbPaHkPieeAyeoIiOmH0IbPrmuqA3muihm/0uBY+G7FUh
+7d3p2pyixF5e0CJ3jDeUdlZ80IOx0ekQsbNZv/EhQQ/7dgbIq+pT5lq1lwPBL2lgtsWLf0MDc/Lg
+1zTwotBUsx9JPp5Irk3wkww1LL6C/YNQQLNVZ+G26Ju+y3WF3uwWsXJwnhLghTC12XM/+7Wo4qv0
+U7V56E7og8AXyWTnIssbt8aDW4u02cUPMQnKpqBEWzq2pB0mJtBP6s1CsDfxH9UXBA8aafjql/nM
+YWsfIei54JryZPQ8qYAW5rqRZnO8HSexeWr8Qs0cDmqusuZrh7h0kX+hvBi5OsKfxZeuLa4Gj29n
+/N58fZhgV2LYtWfC2FpZ5rVWEVlK8H0+o1wuJbvRl/J01I+jacPuj3DJqrt2jBbHmJ1qBQkUH/S3
+PPRMrRowppTo9xjUHX2rORTAeqQZc5zvhL+Kz7RVhFjQ8hVrLW8Dd+s2LNtoPd48P6O1Zg4cb0yp
+v3xDUYO9gs++Nau9cweupN+4ovNqXtvV5NPoi0f/z3sMxRrq4g6/wYdHidKU7awustdPoNaOhQU/
+cGC0fhwryJMK5/t67U2EnyIOE3H2Q9epYAPeKfh16kUNh/lknlPtPkjq2VTs9MEVJCK+/Va936da
+HSd8OVQRJiyeCdZ6h/Yeq4kCYinZbIsl57zDOLuKs633nsRF1yyOqdj+yTEi7XZYFCTv2YbsTHHR
+46ROySOFInlWl7VaIfk0x9xBuuEKqF99Q73oOH3g6CmJMnJyocQVebnTIJO5cOXGnYemNt2/2MU5
+FOzbFjTV+PkUCh0AEnWSLEWqNOkyxO4IOcXXzOeP/oJZ8WDPNxIOxEXfQYoD3MT6Wg8JF21C9jth
+qNYwIkcDDUSC61aRSI48g/wzfhrWwYSioCDo6dgj/OZ2MLK3ooAwG69FGFi8I/GOw08wmB0HJ5+Q
+AC3z3MjLoisuSs7eJeN0lnr2jYvPZpSQctbHQjFz7TmlUGKCxY5cL6WlkVJPmv20QAxCf8b6Cwkn
+SK+AqOQGJaaNrk9oiwzb2wB4MpKUAXOCXF0r0ptAPUSQi7pn3MQmB1pWfOmJQmxb1NMRHO0Fs0Z2
+FYZLKGrPO5bOW4qpcwyu+grK1ojWrNiRMyBNZeTmwLOyJX10YKxLnboFjZOMOFpKAHZk+JcLokeV
+VMBQm+NgJ6EOWEW9V22SI4IjJILiumkeNdD1PrBCo5RAtTiR0IYI9DkZdeQe1cseMYJEnJEOamLE
+BSizzwDN12xsLBGYtRKw++rWEgNtUNP3nrSBiijVW+KO1AM6Jqvs8xb9Zx8Oi20TNjtiTqZRyGB7
+qk2tpm6THwGCpVfcagVHqDQATEuZeh3Yrc0NP2oTVE7HWGBgVSbYPYIwaEk5aWiYUu1w0rrPMyCL
+cGqLpTUsRsHCcocSndS6Mm3rpfRMphMKQgNvUhFcx5ZzDgjPgkM16BNpZJACRzo421gPpFtJCG3A
+e5C7gX8BS2h6bpsSLyIK0FS/XZEIT2pXYAMWAyYqHJ9ETDxgF2QtyMHOZXUrwFFTS8VmwD9Qw0cJ
+s4KniM1oRxHoQ/5KJLXW2yn4eTmF7e9zQzeSai0R0ZUkzC0kVN7gLWpjhEsxQ9vms+IEhoK28FcL
+SMwOvyhjZSO2Vy7RYGNRQwlGDc4dvOa2wRK1kLH3emX1CN5mHltDMh7wmbvNY0P8cA57HiGSH2ZE
+7R/AOGxNgD8QegCxWmsF+QWfCMhRYSwQclmezUsuCnqzDbs8IUMIqGmGxxZFewTzGgeBMH4oZwvY
+0vzkNCtXND6MIUh1wiJpUXItx4EMAHhNZztqnxu1YHVSSR0HuaGPvZHLoLSiDCTlUtq3MxYBQWPd
+aKdwgSr03QZJc99J1s1v5T8wUbYAiZFyGkBJk4f2oMg3SkdVUOesTX/U5MDsBojmkkaRofW5wIlA
+U6nbbYoikh7t31Jx+fpPqLsQYxrpMyzU/KA50W2zDdbGQKVD3O/LMa5n4fOeOftNFJlfK1EdRgX1
+eTHjz5+PVR6N5+Nhi2z3U5oZifkfVjKB4e29EL0AAABEdEVYdFJhdyBwcm9maWxlIHR5cGUgaXB0
+YwAKaXB0YwogICAgICAxNQoxYzAxNWEwMDAzMWIyNTQ3MWMwMjAwMDAwMjAwMDAK+K8m0gAABAV6
+VFh0UmF3IHByb2ZpbGUgdHlwZSB4bXAAAFiF7VlLkus2DNzjFDkCBYCEdBzZknavKsscPw3Qtr7+
+zWSV0rhK1pBgo/GXbfrnz9/0F/6kMyW5ymStpdIUKZeSTTkVLrlY6cooA/M4XS6XiRnrXVFfySZZ
+B0k6WFKBbFs60tZ6w8Es1uuYteAdgCI4xCyTjJzkaq301hYcLIMrKw0n/79cy2jie+QawEbL5Dyk
+rxsP8WAyw2Dt4if0cYJTbnXIidjJTRZLknkU4QF8kjQCrQJ7sdaISvZ7rF2xyrHPPOG9XgvxEGJ9
+CPYQMU6bF9/MY7CATGZVLRvTmGLTzWtN8UrSw5zJ4o9HgxSPwdiguZHOXw8mjOtQFYCRiSE+7hFr
+YRY0+P6aBSggVAgEly481cFDkLjvl4bgsMngWGdVHbuMhTt4zzeUjXOIcC+E2wGmtOCTnDxcm+6x
+miFxRA4ckECBy9WNp2q9C+KacTB76N1UaK3AzR4Y+dTCEjCCwX6X6DPiN96747MNdOwXHVAC36ho
+ae0bAA4HhoipZis1JMfgdIS+BvcKNQQdMlPmSIMpnIxydfjqUfKc2ev3A0eJ+tw4+kZ/hZ9VO7x6
+kmaYFjHg7Bqmct1V9j5OyesXpZy4zdGzXNqMQLU70oDDWbW+O3xUPIP34LUeV3B/FHxHeEuifMG1
+jfu0gh2KJ2tXinWvYWmNG42keQEb7a5UyGYJTe8oH0NH7fWlRIMZHK6WSOf/oN0jUsXrCK0/mOxc
+7T70oDjAzexqqtBMPcqiV+9NEgaMkXLwjYtWGeRNF7OkByW0Zm0wS2ChCnwkrYqgBJS9T8OYFh0s
+YVOxg86sohnmIYujT28Ve6qIZbo3jZ1mvWn2CbXQ/EwxfazZ3drVsQmzr3cmdyL0WyZ3IrRncp+t
+CzYYyREAsLJuM5wQEGtkpOUiwtrBoLn79P5EcJ8ZwVuQM944NExfSFL5NNxvTKWPwr3QbIbUzJXf
+siro87JYwXl+4w6wjXcLONsLw8P3805UGxFtnOuH3FsOX6evj4JpHamjoNA6KtGBR48LAq1H0fFn
+O/MnqtpSXC5mMMFSjvbtAl7v0FYk+kx9UJgACyPWLf9g0rI/W0zxfHjUSj4wqtpED6OCJjL4MN2e
+GTS7gh6+SL8zkpbh/Y2R9E09vSonetU+v+me9E09vSon+qaeXpUTfVNPr8qJtvXE07b33VbfdEza
+jJZFUuojrxZPTE8jR992wmeRo20nfGjejJt304Z+kjNHiqm8GXyfzr2fzP5dfD1ItP/Ms0uD+Hw2
+p8H2Q6nvsDe2/+Z1Ap1AJ9AJdAKdQCfQCXQCnUAn0Al0Ap1AJ9D/DWj+SZ0Wv6ln//4qvgex+nM4
+/QssG4vJbJrEWQAAAAFvck5UAc+id5oAAAdkSURBVEjHlZZbjF5VFcf/a6299znfZb75OrRDbyDQ
+lkYuNgStVElAsBFCNCa+GEi0XmJKiMYYHzAh+uCLD4b4okbUEBMvUYmoROItoRGIEiko9e7YghUZ
+pnQ68813OefsvfbyYRo6mOHhW9nZyVnZ2b+91vrvdTZqGyWzaBazZTXL1qS6SfbDY2evufvEF3+q
+lhrT5VEamq1Vk2SNWcxmlVnUbDmZqVmOv3588uajv//8wyvJzmWNlszqpjazbDYxqy2ZctC2IDos
+OnqFYmOTVS8NZTz+XH3yTDj+l9PVMMNm2+igQeEEBogByMhEIAasBo2feOHMwop/4vhSY32C02oN
+0jASaIiQwaDMDgmaqfYXrUVvFbb1gmDoJEYZS2c40DN+dlcCnzyHlNrqIBXIE7HERksPitlztWu+
+s6KDFHpra1EIALgzUycsrGJ7p9tyKDiJigPh5cY9+KuV7z5yMp6Lnz6y58ht/UDVjLZCM6bEVXZf
++PLC955YaVp+WXlWOFtNbLmxUlq5GlzUtztuv6EjVqSqV2RBrZRG6Nz/rb8/9ORoq8ddRy5736G5
+OZq4tYBvP/LS13/y36W1/u5ZDGNaTc1W51NKGSAiMNQQNVkOwj42pJaJszYk7LQOsdbYMKsCANhg
+KWtiVFW1ujo4w7s/99UTpld/7FDbHXveHvrFiWrZPnzHlYevn7nlLfBUj1EMi1SFrG5UIH/yyOW3
+3rI961A6PRmX7LOxamOFKylpoLV9e/HZ7wctilGsk5UllQVw7wcOHH4n7vvmswsv7/vSN07efuCg
+++VvVxdfKa+Yt4/fObO/l1GNUYYRoeC+jqwrW/OE57t4x1VdtgCErKDAGZzBBIgJco9ksq1wNDnT
+2tEyAwyUc78Vb7gCD9x73W33PLeYej/+3TL/4elzhbvk0I1v3zYLpAHQRQwlcHA/trdX9uzqhZDA
+kzE3JjZRsAOhYgwJQ0NUMogCenDHlm20fO2eUngABpiRC++La9v5bVe3UTZP/vmse35Zjdb273YB
+O8a+X3hITpz1zpvn7rx5DkAGYK4NGFB4GAEogVLwqnmDP3xTfPbgAe+71nAFeA8ieAMKXHrJnPxt
+vLQEl3JyRN4VHg4AVAEjEULCZmawTf3I0nIlOQAJMKABKZBhvVeXuIgkYCInAAFCGZoTOQfZdE+i
+zVkgGAc1JGICBALo+p4XYOwIUTSZpcwgCIGLxHB588heNzCMSQLgCA4AgSUxFAj5AkzVMthMCJmF
+AY6EAeDYYRoj9BKQgWgQQ7F+gDhA2JDGnMyMQOQcA5rgH/3N6cf+kdaqzTdl5k39YZIUosTC6eJZ
+3HT9rhsPFKHTX1fYeZgj8VQAMCghLa02jx0/9eCxM+2ZKzdPV86b+pnM+baRr8crPXolIl92+d6d
+PZQb0u6ywjknImo1kczMdvYdOPRWkn714usIZHOFDIo1zZ7R4cZfFIpD123f3UPAIjB/ARZDe2xr
+iWYz+QCeSfU9t8aP3NoV7J6qZhmJIAY2gLEbCm4A2Q7emMY0Qhw7c2QlwDDAJBPKTFPBopmIwmqD
+CjGEwA7ZgAtC447LpIosBM4KGKAkAGBTDc6BzTM5IQARUFBOMW48kDM2EW9gEFgAyuCJoNvwdJGF
+deGTB2k2Ji4VnMsCtiGNo8SdUKplAgwjsglIE8oS090zcAQAbTKMfDjve+0Sl8yJE2Q1G2cdiSsN
+xQSuzNOx4ACISkcBBgTJYZLjBG7uwhIykOZS4MzgZhJaJ05hYQDfVFOxjFCnLKFQRcDkmje09sw7
+ca/peS6YWd0UtK7D1vIQD3znqZ89Y1U7TAVrcVNFDq0tzXitR8sffPcbP/reXRe3Z2ljzbyjiRUr
+5iG1YVh2uztmWjt19RRNV7Nu7HBqcj1w+dzMbNObEZH1rp1V1YAEcjFXQqWaZmNNVeFx9OibPnQ3
+WnEqFmrKWZgD6gaodWdPShshV0DXe1/40tQcACM1UyaPHKDNbDFqUM5Ia7qayQBwigKFp0JIgdQB
+dRDq9eBIC5ciOUnOZyCzLxgOWGWcrWS6duXRB5AVIutdCCogwCFHTU3VBN91pe+Y1UnrqMk1nryD
+9Smn0qWpYEZOUwpQIAMKAFkzQakUEXHsYM6zmolw6cRRsa5J7+Ax5T3LAhIADBOoBzsAFGEBoKr0
+LjYj1yknKwNaWqoVHaYmplR4Z4aGp1OIgEBIEIDhzj89yMGAxcUlUOrPdty+K7c98/SZf/3zpaqZ
+awXHoQKGtXVL89OFZucfN3q+p2aGEudhXSycfD7nrZdesoPfc5ULrfCjv9rP/5TEoq/aTeoXHJXy
+dIOh9CoJACtcNP+1R08vDPZqSncd9LRm9q5PPfnHsztbtnLNjm6r6GfRJp32tmW6wMw2/sTNbH0+
+fspikNv2t37wmZ1kuX7qP+ET9z/+73Ozo0nwXGSK4JHHdPeMIOuA859E63Ph494t+Sv3Xb1/SySr
+awRerNzDx1584cXkmJPxxILnejoY0f/B1u2qeXn/4fmC60TF/wABAhcJ4y02bgAABb1lWElmTU0A
+KgAAAAgABwESAAMAAAABAAEAAAEaAAUAAAABAAAAYgEbAAUAAAABAAAAagEoAAMAAAABAAIAAAEx
+AAIAAAAeAAAAcgEyAAIAAAAUAAAAkIdpAAQAAAABAAAApAAAANAAAABIAAAAAQAAAEgAAAABQWRv
+YmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykAMjAyMTowNjowMyAxNDo1OToyMQAAA6ABAAMAAAAB
+//8AAKACAAQAAAABAAAAJKADAAQAAAABAAAAJAAAAAAAAAAGAQMAAwAAAAEABgAAARoABQAAAAEA
+AAEeARsABQAAAAEAAAEmASgAAwAAAAEAAgAAAgEABAAAAAEAAAEuAgIABAAAAAEAAASPAAAAAAAA
+AEgAAAABAAAASAAAAAH/2P/tAAxBZG9iZV9DTQAC/+4ADkFkb2JlAGSAAAAAAf/bAIQADAgICAkI
+DAkJDBELCgsRFQ8MDA8VGBMTFRMTGBEMDAwMDAwRDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwM
+DAENCwsNDg0QDg4QFA4ODhQUDg4ODhQRDAwMDAwREQwMDAwMDBEMDAwMDAwMDAwMDAwMDAwMDAwM
+DAwMDAwMDAwM/8AAEQgAJAAkAwEiAAIRAQMRAf/dAAQAA//EAT8AAAEFAQEBAQEBAAAAAAAAAAMA
+AQIEBQYHCAkKCwEAAQUBAQEBAQEAAAAAAAAAAQACAwQFBgcICQoLEAABBAEDAgQCBQcGCAUDDDMB
+AAIRAwQhEjEFQVFhEyJxgTIGFJGhsUIjJBVSwWIzNHKC0UMHJZJT8OHxY3M1FqKygyZEk1RkRcKj
+dDYX0lXiZfKzhMPTdePzRieUpIW0lcTU5PSltcXV5fVWZnaGlqa2xtbm9jdHV2d3h5ent8fX5/cR
+AAICAQIEBAMEBQYHBwYFNQEAAhEDITESBEFRYXEiEwUygZEUobFCI8FS0fAzJGLhcoKSQ1MVY3M0
+8SUGFqKygwcmNcLSRJNUoxdkRVU2dGXi8rOEw9N14/NGlKSFtJXE1OT0pbXF1eX1VmZ2hpamtsbW
+5vYnN0dXZ3eHl6e3x//aAAwDAQACEQMRAD8A7no/Weo9Wzr7aaq2dIpc6plrifVe9se9n5np/wBl
+ZfQHdf8A2PZ+yxS637bf6n2rfx7fobf5e/ejfU/Mqwfql9ruDjXU+wuDAXO+lGjQj/8APro3+iyf
++2v/ADJX5QmJ5YYsPHGMhHax+q4vm/rS4msJRMYSnk4SQZf4/ZnU768eqz1W4Hp7hvj1J2z7o1QP
+queofsTP+y7TljLu9IX7tkyyd233fvon/Pro/wDosn/tr/zJW+mfWjp3U8oYuOy9thBcDZWWtgc+
+6XJshmEJXgERcZEiPDH0fvJicZkKyEnUan95zf8Anhk/YfS+zN/bX2n7H9mk7PU/0vP81/bSWJ/6
+2/8A6H/wSVn7th/cHyfeOv8A4X/s2L3cn736Xtf+h/3n/9DrvqTkUY31WbfkWNqqZZYXvcYA90cr
+U/5zfV//ALn0f54WZ9SKab/q0Me9jbWerY2yt4Dhzu2vY5a37A6F/wCV+N/2yz/yKt5/a9/Lx8d8
+cvk4dv8ACYMXH7cOHh+UfMw/5zfV/wD7n0f54RsTrXScy4UYuXVdaQSGMcCYHOih+wOhf+V+N/2y
+z/yKLjdK6Xi2eri4lNFkRvrra10H+U1qil7FHh9y+l8NMg929eGvC3hf/W4/9D/4JJSP+enqT7P2
+js3dt0bdv+cktX/4GaP/AKtf/9HVzp/aeZ/ze/aHpeoftP2T+Z9b8/04/wBf+toX/ZN/5uPxXjSS
+2o/LH5PlH87/ADu36bnnc/Nufk+T/BfZf+yb/wA3H4pf9k3/AJuPxXjSSP8A4Sj/AMMfcv8Asa/5
+qf4f1PtHl9q+1/8AnP8A4H/wyS8NSUX/AId/P/y/wWT/AML/AJt//9mgXg4mAAAAJXRFWHRkYXRl
+OmNyZWF0ZQAyMDIxLTA2LTAzVDA3OjIzOjI5KzAwOjAwtjX75wAAACV0RVh0ZGF0ZTptb2RpZnkA
+MjAyMS0wNi0wM1QwNzoyMzoyOSswMDowMMdoQ1sAAAAVdEVYdGV4aWY6Q29sb3JTcGFjZQA2NTUz
+NTN7AG4AAAAhdEVYdGV4aWY6RGF0ZVRpbWUAMjAyMTowNjowMyAxNDo1OToyMbCN4TQAAAATdEVY
+dGV4aWY6RXhpZk9mZnNldAAxNjTMeysUAAAAF3RFWHRleGlmOlBpeGVsWERpbWVuc2lvbgAzNo/B
+ow4AAAAXdEVYdGV4aWY6UGl4ZWxZRGltZW5zaW9uADM2Uld6iwAAACt0RVh0ZXhpZjpTb2Z0d2Fy
+ZQBBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKeepxzsAAAAcdEVYdGV4aWY6dGh1bWJuYWls
+OkNvbXByZXNzaW9uADb5ZXBXAAAAKHRFWHRleGlmOnRodW1ibmFpbDpKUEVHSW50ZXJjaGFuZ2VG
+b3JtYXQAMzAyRSRqXQAAAC90RVh0ZXhpZjp0aHVtYm5haWw6SlBFR0ludGVyY2hhbmdlRm9ybWF0
+TGVuZ3RoADExNjeBmx2JAAAAH3RFWHRleGlmOnRodW1ibmFpbDpSZXNvbHV0aW9uVW5pdAAyJUBe
+0wAAAB90RVh0ZXhpZjp0aHVtYm5haWw6WFJlc29sdXRpb24ANzIvMdqHGCwAAAAfdEVYdGV4aWY6
+dGh1bWJuYWlsOllSZXNvbHV0aW9uADcyLzF074m9AAAAAElFTkSuQmCC" />
+</svg>
diff --git a/src/icons/svg/packingManage.svg b/src/icons/svg/packingManage.svg
new file mode 100644
index 0000000..8016175
--- /dev/null
+++ b/src/icons/svg/packingManage.svg
@@ -0,0 +1,187 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="38px" viewBox="0 0 40 38" enable-background="new 0 0 40 38" xml:space="preserve">  <image id="image0" width="40" height="38" x="0" y="0"
+    href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAmCAIAAAA5lk5KAAAABGdBTUEAALGPC/xhBQAAACBjSFJN
+AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QA/wD/AP+gvaeTAAAA
+CXBIWXMAAAsSAAALEgHS3X78AAALCHpUWHRSYXcgcHJvZmlsZSB0eXBlIDhiaW0AAFiFnZlHluU4
+DkXnXEUvQfTkcmjP6UHvf9oX1Jf5NrNKyoiQIUHg4cFQqVL97//UfzhsskbZ5IzLrm+O8zz01G3T
+vnBpdTXexT/dKx6YNXf/vV2Cjb8J3rptOU9XbU99FJOSd8n6UJLTPjdTbxrZck3s8RCwvVxw1LhF
+E3IY0bkZfXTcexUPg871/RZtdN4GEyZnu4S4NTl4zhF96PfnSl7cHvQQzXE7r5URm2M6hDiecn0s
+tA71rGrw0bgRNAK9d857oPhg3H0JuUKgCoHVxE4fNzdZpQR72BiS0SHZmGodcYZxE1XiQ8AxX4mA
+1zVRvaHdeMGiBcNdXu/Qxp+iDtPyJd1Z13129U4DW089jOnfvIkgbT65c11va22Mig9z9am+s+vt
+OCBXl9nOBlHePHtjgWVCjOj6/gZxBi9CFfX+amlmP0xiGfD59GaECI9i+PAKiENz7sObBcG73mr5
+yIYa4ovz77zBOBcB/3hnr+fBGcI0OEzDpcZtYd5pcq4fBQMZ+IdxYNR2iX8aiEDnofpCMBjrF9eu
+Eep1Ap5D2e8Tng9vAJ/33qtzwhYT8PLqw/iCQ3wgJ6C3YbjmSj9nh6WR30KU5PGaHo7nz/cn5EII
+H0JcBqu/MkA02X4b/IQRcWwF/NsECR6LwfldvN6C8JolfAxJiTn+ykf8DvGNhuOcYnasnNw5wUyI
+K9GoQnxZqL1NeiCxT3gb3/fx6prgRSuU/Dqlvi6xY/dBozMH2dGvp+Jdl2435vVe5qlHDQu3lT9R
+e7MzvSw274wry2vzdjwNdttNs6MS63G916c31ccBdtqbgHfX62sxE/UpaKm2vSSOw/aH4Fv5FnwM
++X0lfeYANocIuuOjnwcVnXMu72Osua5XK7F9EGT9dX1UjecxN00P74mg3f/zHxzQ4xRwPFP/duLr
+8VHQ30z8KOiYeOPPKeitqpoHW8yVRW7M1nc2u/uAx/urCbNnYrs74J6PjjAxhzbRT6m8NUh4eUkt
+0bS9R7y7/03Qx+OVpMei6XnxX4K+iPg2TD1PWMm/nbnxMGAVdd6M4GgmPlbkh0YgQKKyh9AT7iPt
+f0l125U91ZcB5p6Pj/cXItLoPOfSpdHppyB1k4QrXSHdOAWznVVN/2gyGK2OiY+3ByrxEgmTvmXx
+GOLK4vSh6sewIAV6FYT83phSXq+lGKeOgY8BnbruBR/6L/ESffeq9D7cHBBpX1/7f7WVu+xj0An6
+817gBw3Ua2f2b2mgflbRf0CDJx6dNLBRsGk/diNnDBxj1KdBruP8+HNbE2i02iramp6JcerLwCHQ
+7yviOZR3GXgZ6/rqt593cilY9Tz8hw45JOFVLE4vH8dnbolp84lcb8MfgmIQNgXh2a1by9JdMt6p
+z/JfxfvH8O/i1ZP8ivXQSOwXvT5zWOsnC2RPYGUH+TTl9NtYtPCnAYuQj03Y2jG+Mu9sIsIjRf0a
+/DiW144O8hivfkyo8WwGf4u/d2zpvuLjr7F73/U04VHn7sTQQpPblwh9b8D36wyeV/W92mU/bx3L
+WjM9MDrCMKbdLw8H+U63puWZnrOnOVeT2iCB4ENv66dsp0UAtX8IJ8b1kkA6m9YlgF12csvktM7M
+T+N33homVrq9qrXSfps8btvUXidtOf36nRjUrvP57v1UP15qetrK2WmYu5a2eYCrk79cueNqXWt1
+X/Of6fBDoznbglq6I4EfUlgqlKRso8XJVn6DWn/4FX6wV9R27szW7Oj07Xw+7BphmMi+j4ZTwAbe
+Ne42U32Yuu837OtUvb9zotkSbOSbFSMSfy2mWbtP1TLA8cdQRbzDeUFra2jtcSYFRLusi67aGWMN
+r71p7GuttS6aZFTXtHKEfzYeU4eemoJkLVKKqSZZdukuWzIoubOZIsWK3NaN9wPOTVOhfrPdko8G
+Ow+2nTG7QlKuLvtGYh5uuuKrb777QUhI9iJ+ieISKnHbg2Qau75g0QFElUhEJdbYYo8jzqh3hMwD
+YHfDSvDw1l9AGHhL2+EEBoWeOFhbhpikM+nvwKFpb7qmdwaRYIYWJLJx1sP9Zb6b2rDEDoJKdm2k
+sb+bHY1idRREJJ9K+zDMhcQBxDsM6s84mHghcQEBLcsK5IfPld75ugk7x4ilzB76yD1RQXuOutnK
+mXIvvcViex8DZsfaa61hsnito/mcVYwuzSJQhxx7lyaG1NrQuLhqdaijo4IkJhQCslGrpKXiXS0p
+x9ldGazeVG62FKRrW5L1okuYXXdfMzWS7Zpk2xFtN2HIroVcl8qQ3iu2gQKlifk+DVW2zsKOpDqE
+pyk0PVsGtz4bQ6Z8ADZN/ibvCymL7skZm8XrAWbMHluLNavsWoV6Ok0dW4Xage2nK9FYIgxaW8Ri
+uN4Ab2Q3p8sNC700LJUHgx8/eoTZJtQ52mhNEhjXbo4Uyxz8W8Y0AxIxS2GdZGPBU5tUprHFBghV
+sqd5gdm+8tSaHoGp9pnG6H1mLAN8vAw1SD+zVKCjG6IGpACGbJVsqzQB1U4UKSpOm8UP2sYxfWvT
+Q2lcWspms2dbX7INpbiMdIhgsGVD00SXM6Otov2EF17p1lOVEGlCJ8vknKgiEwLZ2LGmdVP8ltsW
+tWuZCoLXTMpDi6koA1GLm10J+zBksc/IB15rk+5l4AkK0WJfgIaVdaFaq4RX8t0SHxhtSwa9mrOr
+yuQm20K2tTWMMqoe0JLaMZFfYjEurftZa9OOy6GJPepv7Zo4qXlMUobtXolfStZ2zOCw3lTd6MnG
+8LFUzJdYkLjaOpz2xDRBK82yhGZrIeaRQTKOpJhag7hQkykItp7YcgN2xq424fSEnTQkcL3pRtU2
+OJPmTBSoeoVPwM2AjfeAzTJTAicuLldTOr6vzcPGgmNq1KNE3zCe9iuNUNldEP62WVZkllc5yCdi
+2beM4gmzgucbitTio9djhZaV7wiGRI10qKIjVnpWdNWBRE0V0qpAD0gaTDMQ0LY39Leo1FFjQAIJ
+nNYd9ahlnL4ZH2JqATMzCM8hYHVKQ1dQHvbSjUOh2jeP7yynnyUN+sFWQyLiqokx9Flcw29dzN9B
+CKQpbTs6qjKiM8RSJTnAqxqtJncRI+Qf8hocttKu1rwnEZhP0YNDZN865eNfCrivVFWqpxBR2GbW
+kIboYB9Wm0WDsRJTAEm6EqqmBb1JWSBUIOIYg9D0eSwvT+XSIIcmiciaE2YWoT3dF4UuB5P1ADSp
+vZjM6oBJmFKMZoFswBiML2zXNlVb2jSEzsFDgUR63+KQj3BgGCo5tICiBj5H1h9Ck5ElzDow0jUN
+au+U/ypT5EMsRj10oRyFEvHR4o8fiQIfYXMtGTcDFIE9DA2mmzWQLo3XgKdnHeyyJZvhRUtO8utq
+Jk6MSz5OmqFgplS2EUl5pU8b6RQxHDpJnvS+SdlxgC2EJVYgS80VqNyWIV6LZHxfNPHaZRPSKhkA
+KiLM+Wn5TaIkWMZAAZLunGr15QRiTCRZn6rk6FnINOzms5/UoOjGIhusoRuG9lQf3UkZmbilGhMN
+qUZF28B+okSYDUoBWuFSydgSmqTyXCm65CISoPxX3VbJaaQY0kj2q1RtpqHjUMaVvuo7MMfF1hIo
+gLPKDTmBy5HJn6amYSXCaIwsw2eBrpY74+pg90vQsiLmS49/+x/RWzvor+3C8VRCRD6u0pAGMZl2
+VUmnL22rjA5pfxEfA+RLzfnskGbfhYgM9bdCZJx87/P82HDqeFqhqLr3z4Bxuz5k7Nun/wNWKEln
+xc4NFAAAAGR0RVh0UmF3IHByb2ZpbGUgdHlwZSBpcHRjAAppcHRjCiAgICAgIDMxCjFjMDE1YTAw
+MDMxYjI1NDcxYzAxNWEwMDAzMWIyNTQ3MWMwMTVhMDAwMzFiMjU0NzFjMDIwMDAwMDIwMDAwCnag
+EjQAAASZelRYdFJhdyBwcm9maWxlIHR5cGUgeG1wAABoge1aW66kOAz99ypmCUmcxLAcqoC/keaz
+lz/HDs/iUXC7NdJIXCSKSpzjYzt2THXTr7//ob/wFzlVxG/upRKXfeb8yklicDnklCXXueM2hK5/
+vV59CBivc9SRJJxiyy624iJDtso1xUoawcLE0sQuxYxPADJjUQjccxccv6XiRqqMhblVZdkHp9/z
+O3fCOkeqAWxi7pUHN2ViEjcmMwzGXroiTiuCS1Vsk6Og5HqxIU6hYw4t+Dj2DK0MezHmGW7QZ4y9
+MRpsPoQen+WeKbQm1phgAxEJ7uMKg3kBLCCTQowxf5gWyCbVvEoiLscNzOnF/kInkAqdMRZo9lzr
+NTEJuLdFARgJC+KjHpEKZkGDzq9ZgAJChUCEXJunangIEuN89gSH9QLHKqvi2GUs1MFbvqasm0OE
+ZyY8tjClAh+n5OFaN8ZqhsQS3nGAA4WQ32o8FetVEPeEhUlDr6ZCawH2W2DspwqWgBEM1idH14gP
+vDfLZxto3y+xRQrcUVHR2jcAbHcMYYkxSS4h2QenPfQ1uGaoIOiQ6VOwbdCbk5GuCl88Srpntvp1
+wd5GPTaO7ugv8LNqhY+6SRNMsxiEpBr6/N5k9jZOTvMXqexClaxmqbQIgWq9pwGLU4zlU+Et4wN4
+t5rrdgd3rRFIdc9C+Ijg+sIEqg7ubgXbZt2sdc5Sn8PSgJsMxFs5iSewVu5ygfRLaDqkfAptudfk
+bAWmVbiSIrV+QblHpLLmEUq/Mdm4Wn2oQVGAwexiKtNM3dKiiVqb2AzobMvBNypaZLBvajtL1MGM
+mYxqGcDVw0dcRx1LGPBWAytUMBchwlVEZY4cE4zHLrY6/alYtwpLorFobDTHQbNW6BR9BCDgcFMi
+S8VQkBA1fFXPea2vEMJ2BBvl+6lZ3VqXYxNmv0cmIxH6XSYjEdoyGc/WBRscyRYAsJL643BCQMRz
+R8tBhLWGQXP1abQjGM8M2yiLBMrF/EGaTPxqyE/MpT17dx2/4CmC7ZkKxzEz6CibD5J5Cad7HE+A
+9Xpkg6omh4bw59VIkCJajfp1JL47HcDeqvVkNk2iFx2uiYMLvrEkQhFQj7ACDRussogkzTU4WTQ6
+bOkIf3H03xxOu7UoFleb26trDtcDMvwJh5N6fCj/S+fqIvWWwpeWpz8PCl2Nyreg0E7lC8vKd7Xw
+0aryfUmDswOCdg6fwzQ4CwrdSYOzoNDVqBzVJ33SsKCH3BYpM8qZMX54mUA/IqUdxZFnjYzO68kH
+ZYCzbqT0zD1wYcS6+9npGrXL7u1NaXWo0nCq3jfKWKKWD7uNLho0+WJyhVsbSbOVv2ckbVqHHxY5
+upNPZ40E3cmns3SiO/l0lk50J5/O0onu5NNeOoV+eIOc24Bh+FvzsG6ypk2Jd5E4bazFy8OdyFkh
+pLuV8DNyo+LydrTovH7aeNHVTmQy+aAF/E+a0Y8AH739FymaxcpPFfM2+Px9RmeOLzqbvHM9QA/Q
+A/QAPUAP0AP0AD1AD9AD9AA9QA/QA/R/Bdr93yVJf76yn0FE/zGz547+BbXANhU+D4tfAAAAAW9y
+TlQBz6J3mgAADklJREFUWMOVlemXVtWdhfc599x73/tONVdRVRSUUiDIKBpAEGknRFEUAoIanNoJ
+E0lW4tJuNW0b29VqTIwdTbQVNYoiEbCVQQQcwIFiiqAgMzVDjW+9853OOb/+kK/JB/cfsJ/1rP1h
+gzRpIknkU+iTr8gnCkmHFIYUECkiTR55X7cVFz1zpPG+jkNtGZ8opH6fKCQi6iQq+oGe84R7xfLd
+730y4AZEmigISAbkB5qIiEhL0gFRqEmFJPMqYCSL4IKYocA1YAAGhRT6zJKg0kDhQAdWbGj/aE9H
+LjBjdsP5Q3NP/2JkU4IZESgZGGQVTfz6T73v7ekPdM6Q8rzG5L0Lz7niPMsi+KEbsWyAE0AEEDiX
+gA8oRkpqDc04caa1NrQvDAaoAo+livjft9vW7hjsZpF8YJdajq06TwfWQ7NL/3PpMMsCNMCwYlvw
+6NpT0s8rqzYT5qMsqJK4ZLx12+KmMcONSriAAAyAg6C0Yow4J+OXjz3ODS44MyAFI87tQIucb/12
+dcu/P3vks6MUOg7lUxePpyVza7LdbT2q5tS3Xcnk4JjRNSHHlm96nl7R0gsnkU8tv3N8OU91nDij
+I2WHO82Nnxw51n1yxuiRghuCM0ACmnMRMO7BYB6RBc3II1/CTnYWsXqbu2rDzo7gbMWKlrKaKoO7
+F5VeM73OAk62Dix+vC/rFuIsfOrxETU1Vf/x312H289IL/jDvzbOmlFXUopdxwf+sGJg9zGl4oEG
+r1WtN1434+Y55Q1JGLIIwQhOIQQj6ofm4CXpkG/amX9tw/E9LZBOA7M6GwTdP79x4WVlpQIWNFCE
+G3uhufe5Vd2tXWLyyEIsEf/mVNKg9htmyZeWXoxo3neLtlPtA2s/lS+833kkHWijTGVPTWiQt84d
+NW9mVY0DJrNgxDRRVmPLPvnaBwd2fd9jOuXxaCz0C/curJ9/ScOoOAwNGIUgsEMpIg4OKCy591DR
+jBb7QwK3qkSY6n3+iXMXjYgzDgMQSJMH2KVnAqzfTs++s4tZkVSh4HvpqefW3HndBVdPQpKDbflW
+v7F+74b9rueM5BzlqnXxzMr7loxsEm2wGuBxWEBQQMzp8Pif3tmzfouVQ+jqJI+lCTzwKiyWdrS4
+dGru1uunX3AWLNKC+UQBB0Hmz4RD//jeiZVfpfp4oxeoeO7k/EnJu6+bwIbdeToT5knLuBxYOC15
+/5KRI6oFSCgmoUzBETJ1rC9c+VH36q2ZDA1RMYNSxydVh3fMnxmNslUfH/zqlJfhlRXaZkHntReV
+3zZv6KThhoAHMA6wgg1HdGTod29/s2m/3d4fK4nruooiW/bKsa27vEGvckRt8a0nR5xtInQHLCdi
+KFMawdF+6/W16U1f9qSU6wuoMDkm1nLHopmzp8QbygAgq/HZfrz5/p7dx5O24YXSE7a+6qIhd80d
+NqneMAiAD819Zh7zsPSRw6f7hiRw6qa5cZYiuuOh3c0tQ7Q8ffPl/Mn7phiAB3T0+W+t6/jgq/5u
+bStWRhlMagoWzS+76fxERTTCyIf2oBS4IBF1YWz6mj2/5tt97RQvKSffjzP/hosrf3pNTXk1bAMe
+4Ve/b9683/Y8+8oJ3ku/nsyIgpMp857Hjp7o0pbZcufSSZdPr/twdddrOwuuznMziUCcVZm7a2Hl
+4hm1cR+wAQYt89wEoHUIbjiAKRlCwsZv0r99L3XgCK+yVdRIu1z+dM7Zc39c9d76lnff7yv4ybEj
+ci899qOzomA6zGoj8cVBPPRc8+EcVdSX0mCGev3+yqFxrRoT+RvnVNx+3fASSOSziAipkoYNH/Ak
+CcEsBhOQHpl2l2a1EoZX0B/v6n5hc1/zCa+yKil6Ws3aRJFXZDrZueXFl/5r8qgaN25EmKRBA7F0
+3lyzb+CRt7/vLYxwwOvtwdJ4+q5FFy6YgUqmoXxom0zuM0TgKjIVCXAAIA0O1+Qqi3hSBVAERV4E
+ORZ5/bPCk39pc8KBFGpDFqt3up6+bfSiaXHLyAcAd7UBBKVx//pZFSPLRE3M4jrMBIVZPxo3fhQi
+HJAMcCB4gZADdOgYJCweWjpr6azNPJM5oHgEOgdLmjbsCFhk+wG9Y2dHqerXRrQskqwS+esuqrp2
+RtyCBkWKUooISwRB2rJ46gwiGV/3HIwlKpS039nwty3b1NXTht6+YNSImpAjF4MTgc1MDgKUCW0C
+gAEwSFIWK1hGmEdiY3PujdXtR9rgm05gVnFtmzply1NN0XNiBGgeeiwaK2X9RBXkElMPr8LKbadE
+yrxsVl3z90dymbMkC3wqmCJ75UVD776+dnItIuS6TDg6C2VKM6kUbHIBhLAHBN+4o/jGxj1Hukxm
+NwTFYtIcHHtOxYNXV9/3Pyc7dFmj6P58xYWV0EGQtUQpo5DA0wO8dOayY2dyfHTk+9UvzLMtrN1y
+et2Wo4e7TcRr3XwhFqbnTqm7dUHTuSNQQho0AHBQhXZlRoi1zdkV/7e9J1PiUWM+4JbqvGZaybJ5
+Yy44G/Dx5Fr/xY2nE3b/fVclf37DSAM+aYNReAxs5Mpm3P/yfgrwwBWJR28ZAXMgQEVviI27Mq+v
+6/q+NbSjtuDEpTV90uCy+ROnnWWaDEWFdVtPv7G1Z2+/Zztn86AYVf1XTq1etnD42FrYXgEGB3OP
+pcqvfeC7fi2n1ptrnh4XJQkGRjrTr5KLHzp0MG2ZhcFP/zxlVBIIi4gQKBYw5IBte4uvrmvdfdy3
+KivdfFc5JWZMrKqt4du3H83JWGu2KMrH17ltl8+ovvWa6vOHw6ICNAOLaM24OJlF022/6/lov1cm
++1c9OnbWmEigIYIgeagV7X3KQ1BR4XQVZWVcxCMRS3FgwOJ+hUzcMDkx+4JzNx8IX31796mi4zH2
+wW5ZUVHm6zIj0OeUJGbPTP989rjaGpiGBAWADS6IQfOwH01rtvS3dA840dFe6synnx+dPnoiNyAs
+2+06GZiBZpC5IHHfI7sunVC/ZF7j1CbfQAWT4GaBkVumnRvHmzc8c+GG5vyf1wzu8V0Jv5gOGuO5
+938/sylRhKkRKoCBMT/MwK7oD/FFc+6V91O9g9SVKzLd1lgyWFVaJTkMBkYUeDA37Uz/ZU3b3pZC
+DmXlSZvnCpdMz/9k0YUThyGqEdEAK4BJkO2zyPLnDr6/h/J+UFvDLTf9xqOXTG06lddnOwYMAgFZ
+wtrtvW+sP3Gsy1CoC4JiXVl+7vklN1054twmxgEps8yjIpRjGSmF8rebu55aZRwdLNgitINkKbqv
+nIBlC5omNTnQUnFHAv1FXHb7B332eOHwbCZjcTx8y/h7ruSlbACI93j2R18Hb35w4lBXSLESj0KL
+K9J9Dy6dufwK5aiAOELmmHC5DTCAdLlAYf60+jFlXpl2QDkReHmj9N1D8Ut+c2rx893b2xwKYBfC
+T3f4abfGCLLLr2+so6IdT67bfDLC8hlUvLjZn/vgsV+81rM3FSVDNtr5S4dEBs04851IIc1gkOEo
+OBzahy2gucHACdBkcbAwaykzVmo8+7Oat9Yd3HM8K53o1ma196v0nGklP1lYv6r5OKuy4pS7dAq6
+TiTX7EV7KJ9YeWLbPnOwNy19XmnHSHiXz25YOqe2kvVseTgVZ37M8E2AaUWSC4sDEGCGQYAGtBQ2
+YkJGOReMLZqorz5/6ua/hS+t7vru9KBXlv/rwfDdr5NBkhkmn1DLx1Xg2pll67/2uiRfuS3iUlGz
+RDRWWPQvyTvnnjO6Gq4bnmix4ga3SXPlG9Bg0uQ2CIIgAKUBbgjwmAKUYRRD0jnBWCSuMW8ymz65
+bseBhldX9X3Zdjpa08Z1JWU6f3zzhDgwZVRVQ/xkX7cr4vUcvUtmj7nlsqpJ9b7AAFAStWJmmCx6
+g6bPAmZLcMF4SKEJ8+/GmtjfH850CQFnPrejieqDfWZDOUoMUUdYMtGdO3HItu8SL7/53cnOYwmu
+Zo1PMInSqHnFNDPxXXp4bWb5PRcPSyKpAelD2YEdGyDs7B+MxKu4LIYs6gMKggwSTDIwpilUUBwW
+1yzP8as/frv68yzZFfWUXzBn6KLLkhPqwZSCEsqO+sDOA7AIF07SIuDKQl8A38OQJGxqAaplGDME
+Qo7t32Rf/rB9xyGdUX5jlB66ZcziKxICYICBEFKyUBOYNDSY5hD83a863t3We/DomQxrFEFYZmXn
+XVJ703WjmqpgA4aCy2ExGOSBlCtj3JICMJDRsDlsT5ubmrMrNp880EoySAplxaLNl44bu+yGsWOH
+hxyG1FwrzzYtJhURh1ABPA92UBSVHR6+2Ok/u7GvL+X6bsSGU8YHrp8Zu3fR0LMqChIxC6eZrgPP
+hzJOAiY8plnA7Y93Bis/6mk+npeW4ao+ZniTzpv4b/MqJ9aj2gKoj6TDzLjUJDhjRIR/lCKwcsOZ
+VZ8UD56xtWNw2VUlspdNGf/AfLt+SJJDgaRmQsEIgD3f9j313sDx9v6CTDIWs/zBy8+L3btg2NTR
+HHD+Yf8/BcMHbAwCf/20+5U17S0D5UEk4cMri6YWXFDzy6vqRlZJKNp+2H1mffvWYy4wJMqNSNhz
+8QTzZzeNmTLciIQhtAkbPwwcQBvQGoGClVJi05fFlR+0HG3Vrqg2dX9dqT9hVI2Was/+1r58rKSy
+yUp1XjQjtnh+1dTRsQi0Aa41vDAssc0faCwBDZghmK+hAiT6Cnzf/tbHPjTaewdzyuJ2QskgogoN
+SbOxpvS5xRhaXxONgUMqnefgHEloQPxAY4lBgwSDBam1n+fROJgoFgI/Gtu0o+/FVYc7U2UR25w4
+LFy+ZNT0cbbhZyASAIfSsEMwFwAIYKU/DFwABGApMAUY8AjpAE4UJUiH0i4wZ9+hLseyzx9daSsP
+8DJGqQBsaEGcPDAOZULyfzYx/h8Nba/Og1SOPQAABwdlWElmTU0AKgAAAAgABwESAAMAAAABAAEA
+AAEaAAUAAAABAAAAYgEbAAUAAAABAAAAagEoAAMAAAABAAIAAAExAAIAAAAeAAAAcgEyAAIAAAAU
+AAAAkIdpAAQAAAABAAAApAAAANAAAABIAAAAAQAAAEgAAAABQWRvYmUgUGhvdG9zaG9wIENTNiAo
+V2luZG93cykAMjAyMTowNjowMyAxNTowMTo1NAAAA6ABAAMAAAAB//8AAKACAAQAAAABAAAAKKAD
+AAQAAAABAAAAJgAAAAAAAAAGAQMAAwAAAAEABgAAARoABQAAAAEAAAEeARsABQAAAAEAAAEmASgA
+AwAAAAEAAgAAAgEABAAAAAEAAAEuAgIABAAAAAEAAAXZAAAAAAAAAEgAAAABAAAASAAAAAH/2P/t
+AAxBZG9iZV9DTQAC/+4ADkFkb2JlAGSAAAAAAf/bAIQADAgICAkIDAkJDBELCgsRFQ8MDA8VGBMT
+FRMTGBEMDAwMDAwRDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAENCwsNDg0QDg4QFA4ODhQU
+Dg4ODhQRDAwMDAwREQwMDAwMDBEMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwM/8AAEQgAJgAo
+AwEiAAIRAQMRAf/dAAQAA//EAT8AAAEFAQEBAQEBAAAAAAAAAAMAAQIEBQYHCAkKCwEAAQUBAQEB
+AQEAAAAAAAAAAQACAwQFBgcICQoLEAABBAEDAgQCBQcGCAUDDDMBAAIRAwQhEjEFQVFhEyJxgTIG
+FJGhsUIjJBVSwWIzNHKC0UMHJZJT8OHxY3M1FqKygyZEk1RkRcKjdDYX0lXiZfKzhMPTdePzRieU
+pIW0lcTU5PSltcXV5fVWZnaGlqa2xtbm9jdHV2d3h5ent8fX5/cRAAICAQIEBAMEBQYHBwYFNQEA
+AhEDITESBEFRYXEiEwUygZEUobFCI8FS0fAzJGLhcoKSQ1MVY3M08SUGFqKygwcmNcLSRJNUoxdk
+RVU2dGXi8rOEw9N14/NGlKSFtJXE1OT0pbXF1eX1VmZ2hpamtsbW5vYnN0dXZ3eHl6e3x//aAAwD
+AQACEQMRAD8A7nqv1t6dgWfZccOzs4na3Ho93u/de9u7b/VbvsWZd0j6x9dpfd1nKHTMTaSzFr7a
+e12Qd30f67/+2lS6iX/Urqr8nDqruxOoNd6db9HVuaQS0P8A5z0m7/8AXYrmF0fO+srG5vWOoNsx
+SZbhYjhsH8m1zfzm/wDXLP8AhVpRhDFCOSBEYED9fMe5lMv0oY8Xyw4WoZSnIwkCZD/Jx9EK/elP
+9JzR9dc2vpTulF7XdSa/7OzNDga/T+h6/q/v/wDCf9eWlj9G+sfRKK8jo2Y3qVDmh1uK8y1xOr34
+7t3538l9f/XV0A+r/RRh/Yhh1fZzy3brP7/qfzm//hN+9cz1PBu+qgOV0nqTaqSd37OyTuDv+JaP
+c7/of8elHNiyEwwxEDOVmGSPHDN9Y/zSpQnAcUyZCIriieGWP/v3Z6T9ben51n2XJDsDOB2ux7/b
+7v3WPdt/zXbLElhdOFv106nXm5lLKcLAAD626usefdsL/p+nokh92w+7wUfd4eL2OL0cf7nvf3PV
+/wCpE+9k4OKxwXXuV6uH9723/9Df61k14/1sbl9cxnnpldfo4rtnqVEuHufYPou+nb7P5z+bVofV
+vByP8pfVbP8Asdp7Vu3VE/uWM+nX/Uf/ANsq19e8XJyuh7cep1zq7mWOawSdoDw520f1lkYmF0bq
+Vv2r6s5zuldR5diuMA/yfS19v/F+tV/wS0scuLDCYkcfCPalQ9zBww296H6PHxfM1JCskokCVnjG
+vBk9X+bl/VRt+s/1lzM5vQW24+Pl+o6mzLaCZLJ3bfpM3e3/AEf/AG2tE9F+rnQv17rmT9tzHe7f
+kHeXH/g8b3uf/wBc9RBb9Ss79lY4Zcyrq1eUcl+RJIG7T2vDd279HVZ/XQsjE+rPQi+zqd7uq9We
+Pou/SO3Hj9FLmM/6+/f+4nmWKR4cMjEG4zhgj+syEfpe5+hiWgTAvIAesZZT6YeHB+lNL9Vrr8r6
+wZvUen4z6ekZY95fDR6jfz2NH8v1Po/6RJan1JxcnF6BVXk1upsc97wx4h0E+2WlJRe5H75w0OD+
+Y4r14P5vj4/3+FfwH2L14v52v63zcPD+6//R9VXK/WSr6nXX7M25uP1AnS3HDnWh3b1W0Ms93/G/
+pF8/pKxyl+6K9zb/ACPz/Xi/RYs/yfo/9U+V93d076z/AGX0rOqvHSwJ9cU2/ai39x1Pp/av+mrn
+1Zr+p9Vuzptrb80c2XhwuJ7+mL2V/wDgLF8+JK1l4vand/8Apv7ft3/5Ue3+kwwrjjVf9V4+L/qX
+E/VSS+VUlmtt/9nNqFZ3AAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIxLTA2LTAzVDA3OjIzOjM0KzAw
+OjAwG0iauQAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMS0wNi0wM1QwNzoyMzozNCswMDowMGoVIgUA
+AAAVdEVYdGV4aWY6Q29sb3JTcGFjZQA2NTUzNTN7AG4AAAAhdEVYdGV4aWY6RGF0ZVRpbWUAMjAy
+MTowNjowMyAxNTowMTo1NCSFL1cAAAATdEVYdGV4aWY6RXhpZk9mZnNldAAxNjTMeysUAAAAF3RF
+WHRleGlmOlBpeGVsWERpbWVuc2lvbgA0MCnjkPwAAAAXdEVYdGV4aWY6UGl4ZWxZRGltZW5zaW9u
+ADM4te9XjAAAACt0RVh0ZXhpZjpTb2Z0d2FyZQBBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dz
+KeepxzsAAAAcdEVYdGV4aWY6dGh1bWJuYWlsOkNvbXByZXNzaW9uADb5ZXBXAAAAKHRFWHRleGlm
+OnRodW1ibmFpbDpKUEVHSW50ZXJjaGFuZ2VGb3JtYXQAMzAyRSRqXQAAAC90RVh0ZXhpZjp0aHVt
+Ym5haWw6SlBFR0ludGVyY2hhbmdlRm9ybWF0TGVuZ3RoADE0OTcAyMOtAAAAH3RFWHRleGlmOnRo
+dW1ibmFpbDpSZXNvbHV0aW9uVW5pdAAyJUBe0wAAAB90RVh0ZXhpZjp0aHVtYm5haWw6WFJlc29s
+dXRpb24ANzIvMdqHGCwAAAAfdEVYdGV4aWY6dGh1bWJuYWlsOllSZXNvbHV0aW9uADcyLzF074m9
+AAAAAElFTkSuQmCC" />
+</svg>
diff --git a/src/icons/svg/qualityManage.svg b/src/icons/svg/qualityManage.svg
new file mode 100644
index 0000000..12a3edb
--- /dev/null
+++ b/src/icons/svg/qualityManage.svg
@@ -0,0 +1,169 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="34px" height="40px" viewBox="0 0 34 40" enable-background="new 0 0 34 40" xml:space="preserve">  <image id="image0" width="34" height="40" x="0" y="0"
+    href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAoCAIAAAAUvr/zAAAABGdBTUEAALGPC/xhBQAAACBjSFJN
+AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QA/wD/AP+gvaeTAAAA
+CXBIWXMAAAsSAAALEgHS3X78AAAKOHpUWHRSYXcgcHJvZmlsZSB0eXBlIDhiaW0AAFiFpZhJkuS8
+DYX3PIWPIM7kcThGeOH7b/2BmZKYQ1W3f0vR1UqRBIGHh4FSqf77P+pfXDYEp2xyxmXXD8d9XXrq
+dmhfeLS6Gu/in34rXpi19vH3uAUbvwk+um05T1dtT30Uk5J3yfpQktM+N1M3jWy5F/Z4CjjeHrhq
+PKIJOYzo3Iw+On57FU+Drv39EW103gYTJne7hbi1OHjuEX3o+3slA9uLHqI5f857Z8TmmE4hjrc8
+nxutS72qGnw0bgSNQO+d8x4ovhi3byFPCFQhsJvY6ePhJruUYE8bQzI6JBtTrSPOMDZRJT4FnOuV
+CHjfE9Ub2o03LFow/MprDG38Jeo0Ld/SnXXdZ1d3Gth66WFM/8mbCNLmmzvX87H2xqj4NFdf6ju7
+RscJubrNdjaI8ubVGwssE2JE188RxBm8CFXU59DSzH5ZxDbg821khAiPYvgyBMShOfdlZEHwqbda
+PrKhhvjm/J03GOci4J9j9n4fnCFMif4AvMG4I8ydJtf+UTCQiX+YB0btIfFPExHoPFRfCAZj/eLa
+PUO9L8BzKPvzgtfLG8Bn3Ht1LThiAl6GvswvOMQHcgJ6G6ZrnvRrdlga+SNESR7v6eF8//r7glwI
+4UOIy2D1VwaIJsfvBr9gRBxbAX9bIMFjMTh/itdHEF6zhY8hKTHH3/mIvyF+0HBcS8wDKye/nGAm
+xJVoVCG+bdQ+Fj2ReCz4mN8f89W9wItWKPnjkvq+xQO7LxpdOciOfr8V77q0/TDvv2WdetawsO38
+jdqHnelts7kzriyvze16meyOTbOzEutxj+vLm+rrBDvtJuDT9frezER9CVqqHW+J47T9KXgr34KP
+Ib+vpM8awOYSQTs++nVS0Tnn8jnHmvt5tRLHF0HW389n1Xids2l6ek8EPfw//4cLelwCznfqny58
+v74K+puFXwWdCzf+XII+qqp5ssXcWWRjtt7Z7PYJz/G7CbPudMbugD0fmacW5nRt8lMqbw2yWkLM
+S3qJpj36xJ0CH8n/6/VO1HNjsyvwu6AfRHybpj4XrALQrvx4GrAKOyMjOBqKj6q8aQQCJCt7Cr0g
+P1P/D+nuWUvUj/lQquuWk89xcxFDmp07n14Z8vJVkNpJ0pXOkI6cotmuyqZ/bjQUteRa+Bw9RcZ7
+BDb9pHkM8ZH8pZv9eVqQIr2KQv5sTimx11bKbROfEzq13Qs+9GDiJXrvVe192BwQaWH3M8DDa2WX
+fU66QH89D/xAgy88+mc0UHdP8f/R4INHFw1sFGzaLyeSKwZkjvppkus4P/56tAk0W20Vbk17/MvE
+IdA/dsRzcNhl4GWu66vnfjnNqSO9T/9FdA5JeBWL08vH8ebWGbRzJ4D7mP6cFYOwKQjPto4tS4ep
+WOA+5X8TjwT/OnsXrz7kV6yHRmK/6PXJ4WWvfrGAc4H6XHL5bSxa+MuARcjnQWydGnfi7Km2hCc1
+f5q8XctrZxcp89UfFtR4NYS/i98+IJi07/j839hH73VdW63biaHV3jQxuDfhj+ec01aB75bZu/P5
+rGuv9Qnmp8foU6aXvKrlnZ6zpzlXo9oggeBDf+unHKkFbMOgcGLcg4i7GtclgJN2csvktO7Mv8bf
+fDRMrNKMVq21Pyav2zG110lbbr/+Jia1+3799Xqrn4fWrelrK3enae5aWuehKSbyP0/ufDqG0m7f
+B+3+Woc/aDSnOAMB6QE/rrBUKHGI4a0+rPwFtf70K/zgvKiVnU8X+kNv9+u1HEe6dnL2o+kUsAsG
+63ul+mHp48xh35fqkxlotgQb+W7FjESl5VWz9rFUywTHf4Yq4h3OC1pbQ3uPMykg2mVddNXOGGsY
+9qZxtrXWOvJRMl1zTiX8s/FYOvTUFCRrkVJMNclyUnfZkkHJnc0UKVbknm68H3Bumgr1VbOdejE4
+fXD0jNkVknJ12TcS83DTFV99890PPyW1SfwSxSVU4rYHyTR2fcWiG4kk6hxLrLHFHkecUT8QMk+A
+3YaV4OGtv4Ew8Ja2w6kHDhEHa8sUk3Qm/Z04NO0xnP4ZRIIZWoDIxlkP95f5bmrDFjqoBwrrMI39
+3TzQKFZHQUTyqbQPwzyQ2IF4hUH9HQ4mPpB4BQJalhXIVnj0tFVwEXKOmiZFtlbjGxXQpZFj1rn1
+UFP1FfV6aVl3ORX3LFlPuquJRrP0yZHbDc5mprEslTFCAvjQBCQZI8+kIYtKN2txql0iQ44fR488
+Z6VTadG7WdoYxdo03SmsWPTQFuxK0NmzMNjHwllGQVcpOXlAyQS11GHi9JmzZpb8XJjUZvdNF3D1
+R2rTuNZdnc7YkfsyJXY7apbPHR1B1XOu7V1xDCypJgzwNuXsMStP3cs4KHi1zmFGXcY0N+Ko7NiJ
+igzMvbNbChS8PlNTtK4G5y8EDuQt5WsrrgFe7MROwZKKtG5zTxCixECR8mn06ZOJyA6sxmuzTTaA
+EdjSUsTNDbe5RvHoIWPJQRmLRpvsZipEKMf64Ia1JThdG0qXnKKipyQzF+K7FU/A9nHEOaaR8scW
+cXDYqjSj0+oZ0izgnY5oGRLdZfI8UjZT2biMMUc2gkhqOBxihuoRlzP+h3bHA6fmp06DngcXI7Ma
+00LtdRAiSRX5OECMkBCizyHU3EbDeb24PItvAMb2ufdRiu5elKri5yCCbM+ETKm1duVK6ZY+KEcC
+H1fiqTEi1sXsmQzNfW2NlqbOUqIzrWhixDMDDSpR5oOefZBGkiiNyaHMQXdtTcs48UiTxGiz1byc
+prc4BHHmVCufHpI+im4uaiLdI8kokKDNJUhCwBG1cDqKnV4+HNiFJycQgDikhmNl0GkCQ8fpo5hZ
+cjbk62bqwSmbytILXQ7+cGQJT39Xh/A7QGDSOSkhEy++kg+SCbVE+Oqqq8PCW4K7utk1GvWivc3k
+nzgM8exdBbU2NMBjanWdrsGGDlZHIpWF2LVwHkbAXmxtFIs0FOUipZRTxkKngSceKHCQbMzUjrw7
+JUSzS5PkQH9hG20BEnUcmRAkddQy9WI2Y4+8wh5Fs4eA7yGOE6JRVzpJY8U9PBzd8DsK5rMyXvUc
+sstQg8feoLDkOz2xvHi4cQDkMLZqa3Um0mIodCwE9MC/tk7rBwGFZ0UpPakikeOdk8BrZKIAicPU
+seoqkQ83hVEH2vniaaHQwBNcVANNViBmUI98MVttikgoM0kdohBVCh8vLfgV9AT0ZIcQrMKAeSzz
+4PuhgX5Z55lGW1+aUTi8JLL9bI1A0I0j8XQ5ATPpLJDJCplHskNOFX+lQKyQAIl1ijkBBZNGDmhE
+0JFW5+I5wqKZMuZGQ4kMHEk+c6OM1JlBVgsSQbisrmD35A1N2mpVSQbE1429EzsdGO1wVqY/8K5L
+cu15a6G3rsXf3+KuTxrifPkQSOMUeA60VdKQSnfln32uvI/PcfmgcL17SlOw6/8SIvPkm7uSNtqG
+S8n989j+xSoe93n7Ycp/ASq75UwYAM9vAAAAZHRFWHRSYXcgcHJvZmlsZSB0eXBlIGlwdGMACmlw
+dGMKICAgICAgMzEKMWMwMTVhMDAwMzFiMjU0NzFjMDE1YTAwMDMxYjI1NDcxYzAxNWEwMDAzMWIy
+NTQ3MWMwMjAwMDAwMjAwMDAKdqASNAAABJd6VFh0UmF3IHByb2ZpbGUgdHlwZSB4bXAAAGiB7Vpb
+rqQ4DP33KmYJIU5iWA5VkL+R5rOXP8cOz+JRcLs10kgUElDEOT62Y8fUvfTr73/oL3wCx5r4zVlq
+calKnF4pSvAu+RSTpCb13Hnf59frlb3H8yYFfRKFY+jYhU5cYMjWqaFQSyuYGFna0MeQcAUgMyZ5
+z5l77/gtNbdSJ0xMnSpLlXf6Pb1TL6xjpBrAJqSsPLgtA5O4MZlh8OylM8I0w7tYhy468kouiz3i
+6Htm34GP44qhlWEvnlUMN+g9nr3x1Nu49xnXck7kOxNrTbCFiHj3cfjBPA8WkIk+hJA+TPNkg2pe
+LQGH4xbmZLGP7wVSvjfGAs0VN3pMTDzOXVEARsKC+KhHpIZZ0KDjaxaggFAhED415qkGHoLEOJ4q
+gsOywLHKqjh2GQt18JavKevnEOGeCbcdTKnBxyl5uNaNsZohMYV3HOBAwae3Gk/FehXEOWJi1NCr
+qdBagKstMNZTDUvACAbrnaNrxAfem+mzDbTvl9AhBe6oqGntGwB2O4awhBAllZDsg9Me+hpcM1QQ
+dMjk6G0ZZHMy0lXhi0dJ18xWv07YW6jHxtEd/QV+Vq3wQRdphGkWAx9VQ07vTWZv4+Q0f5HKztfR
+apZKixCoNnsaMDmGUK4KbxnvwbvTXLczuGuNQKpXLIRLANcXBlB1cHYr2C7pYm1SkuYclgbcaCDe
+YOUE1spdKpDVEpoOKZ9CW+61KVmB6RSupEijX1DuEamkeYTSb0w2rlYfalAUYDC7mMo0U7e0aIPW
+JjYDelty8I2KFhmsm8b2EnALqKZBq2UVFIixXwRmpAC+VlYDa1QwFxIA6oDKHDhEmIhVbHX6U7Eu
+FZZIY9HYaA6DZtUZVSvUefhLla4UQ0FE1PBVPVdpfYUQliPY4LPRrG5tyrYJs98jk5EI/S6TkQht
+mYx764INtmQLAFhJ87E5ISBScU/LhwhrA4Pm6tNqRzDuGbZQFgmUivmDNJn41ZCfmEt79u46fsFT
+BMszFo5jZtBRNh8k8xJO1zjuAFvplg2qmhwawp9XI0GKaDXK60h8dzqAK6vWk9k0iV50uCYODvjG
+kghFQD3CCjQssNoiEjXX4GTR6EC8Nn9xqL45nHZrUSiuNrfX1xyuG6T/Ew4n9fhQ/pfO1UnqLYUv
+LU8+Dwpdjcq3oNBO5auWle9q4aNV5fuSBmcbBO1sPodpcBYUupMGZ0Ghq1E5qk96p2FBD7ktUmaU
+M2Oq4WUC/YiUdhRbnjUyOq47H5QBzrqR0jNn4MKIdfez0zVql53tTWm1qdKwq943yliilg+rjS4a
+NPlicoVbG0mzlb9nJG1ahx8WObqTT2eNBN3Jp7N0ojv5dJZOdCefztKJ7uTTXjr5PLxBzm3A8Phb
+87BusqZFiXeRMC2sxcvDnchZIaS7lfAzcqPi8na06Lx+2njR1U5kMvmgBfxPmtGPAB+9/RcpmsXK
+TxXzMvj8fUZHjg86G7xzPEAP0AP0AD1AD9AD9AA9QA/QA/QAPUAP0AP0fwXa/e+SqD9f2c8gon/M
+zNzTv8wQNgmMpLHJAAAAAW9yTlQBz6J3mgAAC79JREFUWMOFl2mMntV1x//n3Pts7zbj8YzHHttj
+Y3sMtsfGgI1xIAFCKYStCk2apDSlKmmTSsCHSpWqFiIrnxpBU1VdoqaqlCYOMhIpLeBCaAibF2LA
+FON4bM94m/GMPZ7t3Z/3ee5y+mHcfku5n46uru7vnv850vlfEj8NKsMnAISRWaN14AEGNADbgrNQ
+BVHBeBVvHDj7vdfTZeX8i3ese/jOrr4AoRjAi02JK2BxRBmcAkfwsA7e5yERYsql5W1BHCIFMIgB
+WO8cqyYkBMUZgrE57H3p8v6D05M1T6UeyeuhbQ31xvfeNvBbn1821I/QAwSIAXmQB9g5LaJIwXpE
+bMlLThLAAw4ILNCBaECnPst18e1j2Y/+Y+roaNZmGCHmrh57SoXLGim38yxmXdHuxs3q3ruX372r
+UoSOPQIHCMDwCpYQioXVJK5j25mOI2g2cB5xvYlTJ93+/67+/L2J03NWKjHBxmm6fVVy3+2Dj93X
+M59i/9vu+Vcnx+YaJsk7iFy+fBD13TuW3XN7YeuQW13JYziSkHzI8E4stUSmqxi70BmdrI1Ozp88
+P3d+yrY7UR6ssNKIwyR2etva4GsPdN91Q7xE5TBt2BhJserx5kfy/Gtzh0ev1FErUCFN00IcJdqv
+XBpdv27J0Ipk3arunTdwn4B+fEb2/vjA8U+cp8GmBxVZJarRafW4mY39XQ99tveB2wpDvUohNk6T
+AgEaFshgrIOzQXJhITlwsPr8W9nYxMUGk42T3HtYCR2KQbSmr/bTp6+nW74zOnbisrKV7kKJ/Fyx
+0Nq4oX94eOjeHXpVH7qB0OXwBoEDEovAAs5AcRqrJqDgKxAGWjVVnpjFsVP26Ejr0EcTFxc6QaEy
+V6vGpfgbt5Rp/aMX0vrkXbvXfOmegeFBv7Zb2BI6jHAeughEIEAABwBwGbiJsGCRWAAAPEILXoy1
+ha0jVG0pNqA/PoNn/v6Vj+fXbhpcygu+JlFfudj6jW1YVwKLEm1QAHTZGQeGJViGUZAAiCOoGEg8
+oIHYI3ZggldwoQUbF/YICjF0v5jPb4AtbhERMqnGr1nCqYpKcNAO0B7SAMRbx6oEb0JoiEAMVAb2
+BiKuoJQ4D2YQXb0kz/Oref46TAcqBpMAuYfKoMj40OvEAUQSwirJ0O5AMeIQ8IGKgEwxALLWBwoA
+mOlTMLEUiTx0hoQdJ01JjpzGyXGZuDwO1NeuLu3Ycs2GZaWSIPQILXwIXK0Rew+QhwIzfwqGLMCZ
+Ubajyvv2y96XTl3JeaJ2KVKrwkLoeY7cuevX9D16z9YHd6EcZM5F4r0jhBpBwPAA4Jz5FAw4ExVN
+tpO/+sHJV37R0IXBRnZh5QrOGjNpx9igxGrjkZP51PjRSxO9j31psBxAcWQNACYCmAGwwqdhFM7O
+855/Pn5wxPlK0l06//VbV9y7e7BvKVSE0+N46c3JNw7ULkynP3ln/lSVn/36qkoRQQCBEK6WRCkF
+2P8P00L009cvHj7uLqXYcXP87T8c/lwvomYOraGr6691d1638tXPrnz2udH3RiYnKPiD47Ubt20M
+kuD/GB5wzl2VhpXPYZniwGQwLECGyFJ7ZgY/3N+eQWHHwOy+b626s4QIGWJxYQe6x1C3eDw0bP7l
+m33bNflG8fF9PJ8ETHkGGORA1jboIihfNOxZRAAmKBUwGN4DAEO/fOhS2zlt6o/+zq39lViHyDIP
+xcyBE08gzWDRawa6779/E7tsodY+erQFaIIXFwKIA+SZs9JiCCsQEVvvBQSGLPa7hK8dq7XhByq4
+d1esxYIgnIC8BwEgMMOSo0Tj/i8sK7KrdfD+h5cdGDBaACcEI46tamvWzOIUsbPKg0CW4AmAx8gs
+dSDXrV3WG2QwGciQXhRcM7HzItKBB1w+2G+6YqagMj0tHrBIGYAnQaZ1iVgpF7J3bQDOaw8FiMAR
+AEGWO1JBqJWGh8sBD4IDe/EAFNHiMXgXgLQSjqJ2ljMWdwEVOQQdBIwi5zknCVjQSUUAcOBgAA/B
+imKnoIIzk/MpEoQhRBEARIpIPJjAFHljEQQ1q1u5cSYvl413iBALAUR1RDPNDC5YWsp53ZpegZ26
+NNvqLL5EAAPCresjyuxUzR47D7CGaAKsB0NIFrs0oNgI6QMHUDMGrrPt+j5NnhCQAkifPpddaaUK
+dtuWMq9bv5oEU5NXqguAgMGL+ty9Yy3yPEfywn+OOQEyMLwQICBCbnIPkHaN1Lzx87EcHJDfuWOA
+2YsnD5+b/NTYTNt4pnzbcB9/5bpGEEyejwZ/dqaFHGE7CV1S19XPbS/etp1na3rfR+rvXq+6pKXM
+VCw53BRcFiFUSOsofXff+TfHLuqg+NjNje7uZgdaG6XslA3DVw62bEHFpO7ZEPDwpuW9SbkQ5C//
+1/l2sjhashDdlaD5xJc3b+lp1q+k33/xyuP/NH5Rr6pxmOmBOul2wB9NJH/5t2f2vtZqxFuv5N1p
+YVtZl2LvYRagk9ErOHkuVS65c+dSHUF3xbh187LLH7Q+ONU5eN7dvTaHtCMXQaWfua709FeHnnnu
+1CczxZ8cDl8/+t5N10Qr+tcFIS6cv3zsV7Op6cpUnMT1XJr73tIDpd4//c0+lYQCd3RkPmtm5bD9
+wK6lmbTUXzy1Z2Bl1/P/PoLulePjtYdu74uQk8RtLppWdfuG8pr+4uT0xFzTzjV5uhYen6a3j56d
+riWKepRf2L0tePCWQXNubNSUz52etJ3kphu6c85WrOiuX7Fb1nR948EloSLyIinw5HdHXvhASmH3
+M08u+fKuRKNZQ6kEKNuATqrQL77VeO3A+K9Ozs11esqlTkiNret7H3l4667NKANnTs7c873TjYVC
+l4qeeGT9Yw9GXbDwuuNQVMgZEC8dl3142Q195Uj/757b+ScnDoz7joiXvJV1jIgRV+/MN7Ks46We
+yeisTHupSl4T2xJp5GJF8o782xnZ+EeHljxyvvjQz/765fGG8WIbklXFihVRe57eo5WUS1apyqGP
+xy41yvVWdfP6np6wGYdF62CMlKIwVFZ7HyndUzBFMTGaSpoRKY2AGaKbQ0vCTdesPvjeEYQrjxyb
+7Tjs3NYXMoloZqg9T+0x0g6Yr91U+nA0nLT61CdT6aWLd92+QTIfMQVE8PCiLBEUE1lvYnYFRgkU
+kAcRmESlzQ0r4k3Xrn/j8MysbH5/5Kz29d2blnsFRqb+/Dt7Ig654wqkP3Nt6fLZ459c9MfS3WeP
+/XL5+tVLl0IRmISgFJgI3moO4TSsggGEAYaHXwiSAuiaHgwNVd45eWJyoXJxor5p3cqh5QC0+vae
+Pd4YFTDIJWW1Yu3quXp69szI8bnK6HiaRLxxdRRQDsqgXJoHFMIbF7BTkmvvoPT4PF59e2zfu/nK
+3kp/N1b16/5VfVPnTrjLJ771xZt6ugCA2jaPVUA2gzJC1EZxZBp7Xzjyj+93lyRdYvydW0vf/L3e
+batDdlGgGJiBlJAX4ZwrqF+caPzN3k8+GqVcF//s4aVPfKFcLJmaKVcRBikGIiBa9Eki3vpAMSTN
+83oYlyyKjTZ+eLDzo30fTDR9UOhTefTgreU/fnjJluU6zOB1ZlR0eCT7wb6zh0ZRC0tN7gyXqs8+
+vvOuIYs8RZBYdgzDPgBHAMiLs5b1VUeaARYuhATQ/v3R2vdfbO1/3/oSJG/Endkbh5Pfv2/75Lx+
+6d0zIxdTROVGdbq3RHfsvumpr4ZruqCzBnyCSKfcCWGVA1QJAFmXKorzDIEGKcDlQIgUiAFGpvDO
+8fo//OvMiUltK2qmmYWu3ZHAB0UmV7SXHrix68nf3jw8AK0NKAcATjpgD6/BykEpACCRhncRc5Bl
+8JImSQBLIAUGKM1TE8SVlPDuCf/cS+NHT1+ZNW3t4yVJeMctK7/2QP/1y1FACgMEmUnDIC44gpNM
+UfS/du8qZsHkAaGgAxKyxrWVKgAayLwETBAYi9xDh0jqVbz8S1laqd48XFxWNnBiXWTDxQ9+Feh2
+BmJR1B1Ssc0zHXsgAfA/m14zGL2dnpcAAAZeZVhJZk1NACoAAAAIAAcBEgADAAAAAQABAAABGgAF
+AAAAAQAAAGIBGwAFAAAAAQAAAGoBKAADAAAAAQACAAABMQACAAAAHgAAAHIBMgACAAAAFAAAAJCH
+aQAEAAAAAQAAAKQAAADQAAAASAAAAAEAAABIAAAAAUFkb2JlIFBob3Rvc2hvcCBDUzYgKFdpbmRv
+d3MpADIwMjE6MDY6MDMgMTU6MDI6NDcAAAOgAQADAAAAAf//AACgAgAEAAAAAQAAACKgAwAEAAAA
+AQAAACgAAAAAAAAABgEDAAMAAAABAAYAAAEaAAUAAAABAAABHgEbAAUAAAABAAABJgEoAAMAAAAB
+AAIAAAIBAAQAAAABAAABLgICAAQAAAABAAAFMAAAAAAAAABIAAAAAQAAAEgAAAAB/9j/7QAMQWRv
+YmVfQ00AAv/uAA5BZG9iZQBkgAAAAAH/2wCEAAwICAgJCAwJCQwRCwoLERUPDAwPFRgTExUTExgR
+DAwMDAwMEQwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwBDQsLDQ4NEA4OEBQODg4UFA4ODg4U
+EQwMDAwMEREMDAwMDAwRDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDP/AABEIACgAIgMBIgAC
+EQEDEQH/3QAEAAP/xAE/AAABBQEBAQEBAQAAAAAAAAADAAECBAUGBwgJCgsBAAEFAQEBAQEBAAAA
+AAAAAAEAAgMEBQYHCAkKCxAAAQQBAwIEAgUHBggFAwwzAQACEQMEIRIxBUFRYRMicYEyBhSRobFC
+IyQVUsFiMzRygtFDByWSU/Dh8WNzNRaisoMmRJNUZEXCo3Q2F9JV4mXys4TD03Xj80YnlKSFtJXE
+1OT0pbXF1eX1VmZ2hpamtsbW5vY3R1dnd4eXp7fH1+f3EQACAgECBAQDBAUGBwcGBTUBAAIRAyEx
+EgRBUWFxIhMFMoGRFKGxQiPBUtHwMyRi4XKCkkNTFWNzNPElBhaisoMHJjXC0kSTVKMXZEVVNnRl
+4vKzhMPTdePzRpSkhbSVxNTk9KW1xdXl9VZmdoaWprbG1ub2JzdHV2d3h5ent8f/2gAMAwEAAhED
+EQA/AOuP1zuyXPb0jpeRnNa4tbdG2skd9wbZ/wBJRPTvrf1jTqGSzpeK7mjH1sI8HWNP/o7/AK0p
+/wCL3/xP/wDX3/kYrHVPrO6jOPTOl4ruo5zRNjWmGV/8Y/8A1/rq9IcGWeLBijcCf1k/WQI/p/rP
+1cGsPVCM8kzUv0I+nf8AR9Prk1B9WetdJ93QOouNY1OJle5p8drgNvu/4uv/AIxOfrP13Baf2t0a
+yGCX34x3Mgcu/wAI1v8A28pM+tfUMK+uvr/TnYVVp2tyWO31gns/bv8A/Pn9hbPVyHdHzXNMg41p
+BHBGxyEpT4ojPjhk4zpkG8v+qYfmSBGiccpQ4d4H/vJuZ/z36F+9Z/MfaPo/+Ac/z/8A4H/wiS83
+/wDSCSu/6Mwd5fa1/vmTwf/Q6/8AxfGOhvrOj6sixr2+Bhij9Qgw4mdZZrnOyn/aSfpcDbP8nd6q
+HVaPq39Zb6sj2dN6u71KrT9Fl357Xfu+53/nlW+o/VvMbnv6p0LKGHlXfz9bxNVh/edo/wD89q/k
+MTLJcuCPMiOTHkPy3H5scq/rNaAIEKHEcVwlH9L+8G79Zm4zugZ32mNgpcWz++B+hj+V6uxUMO17
+PqL6mSYIwrBJ/d2vbT/0PTVXK+rP1j6ww19Z6jW2poJrpx2ktL49rrJbT9H+2hU5F2fi2fVLrTzh
+ZrQxtN7QNt1bCHM2fRb7tn9v+v7EIY4jGIiYnwZBlycFngx/LxR/f/rqlI8ZJiY8UTCHF+lL+t+6
+8f8AY8n/AEZ/ofr/APW/9IkvU/2L0/8Ac/7S/Yf+s/uJKx/pSP7rH9zPd//R9L6l03D6niOxMxm+
+t2oPDmns9jvzXtXPMr+tH1d/R0s/bPTG/Qbxexv7v5znf+C/9aXgCStcvx8B4uH2L9Xu/Lxf6vh9
+fuf7Nhy8PEKv3K04Pmr+t+jw/wB5+gHdX+s/Wv0PSsI9Oodo/MydHAd/SYR/1Lbf+trZ/YmLfRht
+6j+uZGEWuZkulry9uu72H978xy+Zkk7Lfp9jh4bPD7XF711r7nF+t/8AUaIdfcvi68f83/g/oP1U
+kvlVJU2d/9lliXm6AAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIxLTA2LTAzVDA3OjIzOjM4KzAwOjAw
+3OjwzQAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMS0wNi0wM1QwNzoyMzozOCswMDowMK21SHEAAAAV
+dEVYdGV4aWY6Q29sb3JTcGFjZQA2NTUzNTN7AG4AAAAhdEVYdGV4aWY6RGF0ZVRpbWUAMjAyMTow
+NjowMyAxNTowMjo0N7Yi4EIAAAATdEVYdGV4aWY6RXhpZk9mZnNldAAxNjTMeysUAAAAF3RFWHRl
+eGlmOlBpeGVsWERpbWVuc2lvbgAzNGHPwiIAAAAXdEVYdGV4aWY6UGl4ZWxZRGltZW5zaW9uADQw
+9HVJeQAAACt0RVh0ZXhpZjpTb2Z0d2FyZQBBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKeep
+xzsAAAAcdEVYdGV4aWY6dGh1bWJuYWlsOkNvbXByZXNzaW9uADb5ZXBXAAAAKHRFWHRleGlmOnRo
+dW1ibmFpbDpKUEVHSW50ZXJjaGFuZ2VGb3JtYXQAMzAyRSRqXQAAAC90RVh0ZXhpZjp0aHVtYm5h
+aWw6SlBFR0ludGVyY2hhbmdlRm9ybWF0TGVuZ3RoADEzMjh2zBFyAAAAH3RFWHRleGlmOnRodW1i
+bmFpbDpSZXNvbHV0aW9uVW5pdAAyJUBe0wAAAB90RVh0ZXhpZjp0aHVtYm5haWw6WFJlc29sdXRp
+b24ANzIvMdqHGCwAAAAfdEVYdGV4aWY6dGh1bWJuYWlsOllSZXNvbHV0aW9uADcyLzF074m9AAAA
+AElFTkSuQmCC" />
+</svg>
diff --git a/src/lang/en.js b/src/lang/en.js
new file mode 100644
index 0000000..05b74dc
--- /dev/null
+++ b/src/lang/en.js
@@ -0,0 +1,343 @@
+import module from './i18n/en/module'
+
+export default {
+  route: {
+    dashboard: 'Dashboard',
+    documentation: 'Documentation',
+    guide: 'Guide',
+    permission: 'Permission',
+    pagePermission: 'Page Permission',
+    rolePermission: 'Role Permission',
+    directivePermission: 'Directive Permission',
+    icons: 'Icons',
+    components: 'Components',
+    tinymce: 'Tinymce',
+    markdown: 'Markdown',
+    jsonEditor: 'JSON Editor',
+    dndList: 'Dnd List',
+    splitPane: 'SplitPane',
+    avatarUpload: 'Avatar Upload',
+    dropzone: 'Dropzone',
+    sticky: 'Sticky',
+    countTo: 'Count To',
+    componentMixin: 'Mixin',
+    backToTop: 'Back To Top',
+    dragDialog: 'Drag Dialog',
+    dragSelect: 'Drag Select',
+    dragKanban: 'Drag Kanban',
+    charts: 'Charts',
+    keyboardChart: 'Keyboard Chart',
+    lineChart: 'Line Chart',
+    mixChart: 'Mix Chart',
+    example: 'Example',
+    nested: 'Nested Routes',
+    menu1: 'Menu 1',
+    'menu1-1': 'Menu 1-1',
+    'menu1-2': 'Menu 1-2',
+    'menu1-2-1': 'Menu 1-2-1',
+    'menu1-2-2': 'Menu 1-2-2',
+    'menu1-3': 'Menu 1-3',
+    menu2: 'Menu 2',
+    Table: 'Table',
+    dynamicTable: 'Dynamic Table',
+    dragTable: 'Drag Table',
+    inlineEditTable: 'Inline Edit',
+    complexTable: 'Complex Table',
+    tab: 'Tab',
+    form: 'Form',
+    createArticle: 'Create Article',
+    editArticle: 'Edit Article',
+    articleList: 'Article List',
+    errorPages: 'Error Pages',
+    page401: '401',
+    page404: '404',
+    errorLog: 'Error Log',
+    excel: 'Excel',
+    exportExcel: 'Export Excel',
+    selectExcel: 'Export Selected',
+    mergeHeader: 'Merge Header',
+    uploadExcel: 'Upload Excel',
+    zip: 'Zip',
+    pdf: 'PDF',
+    exportZip: 'Export Zip',
+    theme: 'Theme',
+    clipboardDemo: 'Clipboard',
+    i18n: 'I18n',
+    externalLink: 'External Link',
+    profile: 'Profile'
+  },
+  navbar: {
+    dashboard: 'Dashboard',
+    github: 'Github',
+    logOut: 'Log Out',
+    profile: 'Profile',
+    theme: 'Theme',
+    size: 'Global Size'
+  },
+  login: {
+    title: 'Login Form',
+    logIn: 'Login',
+    username: 'Username',
+    password: 'Password',
+    any: 'any',
+    thirdparty: 'Or connect with',
+    thirdpartyTips: 'Can not be simulated on local, so please combine you own business simulation! ! !'
+  },
+  documentation: {
+    documentation: 'Documentation',
+    github: 'Github Repository'
+  },
+  permission: {
+    addRole: 'New Role',
+    editPermission: 'Edit',
+    roles: 'Your roles',
+    switchRoles: 'Switch roles',
+    tips: 'In some cases, using v-permission will have no effect. For example: Element-UI  el-tab or el-table-column and other scenes that dynamically render dom. You can only do this with v-if.',
+    delete: 'Delete',
+    confirm: 'Confirm',
+    cancel: 'Cancel'
+  },
+  guide: {
+    description: 'The guide page is useful for some people who entered the project for the first time. You can briefly introduce the features of the project. Demo is based on ',
+    button: 'Show Guide'
+  },
+  components: {
+    documentation: 'Documentation',
+    tinymceTips: 'Rich text is a core feature of the management backend, but at the same time it is a place with lots of pits. In the process of selecting rich texts, I also took a lot of detours. The common rich texts on the market have been basically used, and I finally chose Tinymce. See the more detailed rich text comparison and introduction.',
+    dropzoneTips: 'Because my business has special needs, and has to upload images to qiniu, so instead of a third party, I chose encapsulate it by myself. It is very simple, you can see the detail code in @/components/Dropzone.',
+    stickyTips: 'when the page is scrolled to the preset position will be sticky on the top.',
+    backToTopTips1: 'When the page is scrolled to the specified position, the Back to Top button appears in the lower right corner',
+    backToTopTips2: 'You can customize the style of the button, show / hide, height of appearance, height of the return. If you need a text prompt, you can use element-ui el-tooltip elements externally',
+    imageUploadTips: 'Since I was using only the vue@1 version, and it is not compatible with mockjs at the moment, I modified it myself, and if you are going to use it, it is better to use official version.'
+  },
+  table: {
+    dynamicTips1: 'Fixed header, sorted by header order',
+    dynamicTips2: 'Not fixed header, sorted by click order',
+    dragTips1: 'The default order',
+    dragTips2: 'The after dragging order',
+    title: 'Title',
+    importance: 'Imp',
+    type: 'Type',
+    remark: 'Remark',
+    search: 'Search',
+    add: 'Add',
+    export: 'Export',
+    reviewer: 'reviewer',
+    id: 'ID',
+    date: 'Date',
+    author: 'Author',
+    readings: 'Readings',
+    status: 'Status',
+    actions: 'Actions',
+    see: 'View',
+    edit: 'Edit',
+    publish: 'Publish',
+    draft: 'Draft',
+    delete: 'Delete',
+    cancel: 'Cancel',
+    confirm: 'Confirm'
+  },
+  example: {
+    warning: 'Creating and editing pages cannot be cached by keep-alive because keep-alive include does not currently support caching based on routes, so it is currently cached based on component name. If you want to achieve a similar caching effect, you can use a browser caching scheme such as localStorage. Or do not use keep-alive include to cache all pages directly. See details'
+  },
+  errorLog: {
+    tips: 'Please click the bug icon in the upper right corner',
+    description: 'Now the management system are basically the form of the spa, it enhances the user experience, but it also increases the possibility of page problems, a small negligence may lead to the entire page deadlock. Fortunately Vue provides a way to catch handling exceptions, where you can handle errors or report exceptions.',
+    documentation: 'Document introduction',
+    timeoutTip: 'Network connection timeout'
+  },
+  excel: {
+    export: 'Export',
+    selectedExport: 'Export Selected Items',
+    placeholder: 'Please enter the file name (default excel-list)'
+  },
+  zip: {
+    export: 'Export',
+    placeholder: 'Please enter the file name (default file)'
+  },
+  pdf: {
+    tips: 'Here we use window.print() to implement the feature of downloading PDF.'
+  },
+  theme: {
+    change: 'Change Theme',
+    documentation: 'Theme documentation',
+    tips: 'Tips: It is different from the theme-pick on the navbar is two different skinning methods, each with different application scenarios. Refer to the documentation for details.'
+  },
+  tagsView: {
+    refresh: 'Refresh',
+    close: 'Close',
+    closeOthers: 'Close Others',
+    closeAll: 'Close All'
+  },
+  settings: {
+    title: 'Page style setting',
+    theme: 'Theme Color',
+    tagsView: 'Open Tags-View',
+    fixedHeader: 'Fixed Header',
+    sidebarLogo: 'Sidebar Logo'
+  },
+  userManage: {
+    userId: 'User ID',
+    userName: 'User Name',
+    email: 'email',
+    mobile: 'mobile',
+    status: 'status',
+    org: 'Organization',
+    pwd: 'Password',
+    userstartstop: 'User Start and Stop',
+    resetPwd: 'Reset Password',
+    birthday: 'Birthday',
+    orgName: 'Organization',
+    sex: 'Sex',
+    code: 'Employee ID',
+    remark: 'Remark',
+    AssignRole: 'Assign Role'
+  },
+  orgManage: {
+    index: 'index',
+    orgName: 'Organization Name',
+    contact: 'contact',
+    email: 'email',
+    phone: 'phone',
+    status: 'status',
+    remark: 'remark',
+    parentOrg: 'Parent Organization',
+    address: 'Address'
+  },
+  roleManage: {
+    roleCode: 'Role Code',
+    roleName: 'Role Name',
+    roleType: 'Role Type',
+    roleEmPower: 'Role Permission Assignment',
+    isManager: 'is Manager',
+    isPresupposition: 'is Presupposition',
+    assignRole: 'Assign Role',
+    status: 'status',
+    remark: 'Role Description',
+    rolestartstop: 'Role Start and Stop'
+  },
+  menuManage: {
+    menuCode: 'Menu Code',
+    menuName: 'Menu Name',
+    href: 'href',
+    icon: 'icon',
+    menuClassify: 'Menu Classify',
+    menuURL: 'Menu URL',
+    parentName: 'Parent Name',
+    checked: 'checked',
+    permission: 'permission',
+    type: 'type',
+    enName: 'English Name',
+    permissionText: 'Multiple columns are separated by commas,as:user:list,user:add',
+    name: 'name',
+    sortNumber: 'Sort Number',
+    authorizationMark: 'Authorization Mark',
+    status: 'status',
+    remark: 'remark',
+    menustartstop: 'Menu Start and Stop'
+  },
+  choisePart: {
+    module: 'Module to be developed!'
+  },
+  upload: {
+    picAlarm: 'Please Upload Image!',
+    delPic: 'Confirm to delete this image?',
+    picSizeAlarm: 'The maximum limit of upload file is 10M!'
+  },
+  module,
+  deleteTip: {
+    header: 'Make sure to[',
+    footer: '] perform [delete] operation?',
+    tip: 'Tip',
+    confirm: 'Confirm',
+    cancel: 'Cancel',
+    this: 'this'
+  },
+  deleteMsgBox: {
+    hint: 'Please Confirm',
+    content: 'This method will delete the record, are you sure?',
+    doneMsg: 'Deletion success!'
+  },
+  baseTip: {
+    OperationSucc: 'Operation Successful!'
+  },
+  btn: {
+    confirm: 'Confirm',
+    cancel: 'Cancel'
+  },
+  datePickerOption: {
+    lastWeek: 'Last Week',
+    lastMonth: 'Last Month',
+    lastThreeMonths: 'Last Three Months'
+  },
+  baseDict: {
+    enableState: {
+      'no': 'Disable',
+      'yes': 'Enable'
+    },
+    yesOrNo: {
+      'no': 'No',
+      'yes': 'Yes'
+    },
+    bool2String: {
+      'yes': 'Yes',
+      'no': 'No'
+    },
+    doneStatus: {
+      'no': 'Imcomplete',
+      'yes': 'Complete'
+    },
+    sex: {
+      'man': 'Man',
+      'woman': 'Woman'
+    }
+  },
+  basicDataFilter: {
+    sex: {
+      'all': 'All',
+      'man': 'Man',
+      'woman': 'Woman'
+    },
+    onDuty: {
+      'no': 'No',
+      'yes': 'Yse'
+    },
+    orderStatus: {
+      'add': 'Add',
+      'start': 'Start',
+      'stop': 'Stop',
+      'issued': 'Issued',
+      'complete': 'Complete'
+    },
+    workOrderStatus: {
+      'notactive': 'Not Active',
+      'waiting': 'Waiting',
+      'active': 'Active',
+      'stop': 'Stop',
+      'complete': 'Complete'
+    },
+    priority: {
+      'low': 'Low',
+      'normal': 'Normal',
+      'high': 'High'
+    },
+    workStatus: {
+      'fail': 'Fail',
+      'success': 'Success'
+    },
+    menuType: {
+      'catalogue': 'Catalogue',
+      'menu': 'Menu',
+      'button': 'Button'
+    },
+    enableState: {
+      'disable': 'Disable',
+      'enable': 'Enable'
+    },
+    storage: {
+      'normal': 'Normal',
+      'repairing': 'Repairing',
+      'scrap': 'Scrap'
+    }
+  }
+}
diff --git a/src/lang/es.js b/src/lang/es.js
new file mode 100644
index 0000000..8187bfe
--- /dev/null
+++ b/src/lang/es.js
@@ -0,0 +1,175 @@
+export default {
+  route: {
+    dashboard: 'Panel de control',
+    documentation: 'Documentación',
+    guide: 'Guía',
+    permission: 'Permisos',
+    rolePermission: 'Permisos de rol',
+    pagePermission: 'Permisos de la página',
+    directivePermission: 'Permisos de la directiva',
+    icons: 'Iconos',
+    components: 'Componentes',
+    tinymce: 'Tinymce',
+    markdown: 'Markdown',
+    jsonEditor: 'Editor JSON',
+    dndList: 'Lista Dnd',
+    splitPane: 'Panel dividido',
+    avatarUpload: 'Subir avatar',
+    dropzone: 'Subir ficheros',
+    sticky: 'Sticky',
+    countTo: 'CountTo',
+    componentMixin: 'Mixin',
+    backToTop: 'Ir arriba',
+    dragDialog: 'Drag Dialog',
+    dragSelect: 'Drag Select',
+    dragKanban: 'Drag Kanban',
+    charts: 'Gráficos',
+    keyboardChart: 'Keyboard Chart',
+    lineChart: 'Gráfico de líneas',
+    mixChart: 'Mix Chart',
+    example: 'Ejemplo',
+    nested: 'Rutas anidadass',
+    menu1: 'Menu 1',
+    'menu1-1': 'Menu 1-1',
+    'menu1-2': 'Menu 1-2',
+    'menu1-2-1': 'Menu 1-2-1',
+    'menu1-2-2': 'Menu 1-2-2',
+    'menu1-3': 'Menu 1-3',
+    menu2: 'Menu 2',
+    Table: 'Tabla',
+    dynamicTable: 'Tabla dinámica',
+    dragTable: 'Arrastrar tabla',
+    inlineEditTable: 'Editor',
+    complexTable: 'Complex Table',
+    tab: 'Pestaña',
+    form: 'Formulario',
+    createArticle: 'Crear artículo',
+    editArticle: 'Editar artículo',
+    articleList: 'Listado de artículos',
+    errorPages: 'Páginas de error',
+    page401: '401',
+    page404: '404',
+    errorLog: 'Registro de errores',
+    excel: 'Excel',
+    exportExcel: 'Exportar a Excel',
+    selectExcel: 'Export seleccionado',
+    mergeHeader: 'Merge Header',
+    uploadExcel: 'Subir Excel',
+    zip: 'Zip',
+    pdf: 'PDF',
+    exportZip: 'Exportar a Zip',
+    theme: 'Tema',
+    clipboardDemo: 'Clipboard',
+    i18n: 'I18n',
+    externalLink: 'Enlace externo',
+    profile: 'Profile'
+  },
+  navbar: {
+    logOut: 'Salir',
+    dashboard: 'Panel de control',
+    github: 'Github',
+    theme: 'Tema',
+    size: 'Tamaño global',
+    profile: 'Profile'
+  },
+  login: {
+    title: 'Formulario de acceso',
+    logIn: 'Acceso',
+    username: 'Usuario',
+    password: 'Contraseña',
+    any: 'nada',
+    thirdparty: 'Conectar con',
+    thirdpartyTips: 'No se puede simular en local, así que combine su propia simulación de negocios. ! !'
+  },
+  documentation: {
+    documentation: 'Documentación',
+    github: 'Repositorio Github'
+  },
+  permission: {
+    addRole: 'Nuevo rol',
+    editPermission: 'Permiso de edición',
+    roles: 'Tus permisos',
+    switchRoles: 'Cambiar permisos',
+    tips: 'In some cases it is not suitable to use v-permission, such as element Tab component or el-table-column and other asynchronous rendering dom cases which can only be achieved by manually setting the v-if.',
+    delete: 'Borrar',
+    confirm: 'Confirmar',
+    cancel: 'Cancelar'
+  },
+  guide: {
+    description: 'The guide page is useful for some people who entered the project for the first time. You can briefly introduce the features of the project. Demo is based on ',
+    button: 'Ver guía'
+  },
+  components: {
+    documentation: 'Documentación',
+    tinymceTips: 'Rich text editor is a core part of management system, but at the same time is a place with lots of problems. In the process of selecting rich texts, I also walked a lot of detours. The common rich text editors in the market are basically used, and the finally chose Tinymce. See documentation for more detailed rich text editor comparisons and introductions.',
+    dropzoneTips: 'Because my business has special needs, and has to upload images to qiniu, so instead of a third party, I chose encapsulate it by myself. It is very simple, you can see the detail code in @/components/Dropzone.',
+    stickyTips: 'when the page is scrolled to the preset position will be sticky on the top.',
+    backToTopTips1: 'When the page is scrolled to the specified position, the Back to Top button appears in the lower right corner',
+    backToTopTips2: 'You can customize the style of the button, show / hide, height of appearance, height of the return. If you need a text prompt, you can use element-ui el-tooltip elements externally',
+    imageUploadTips: 'Since I was using only the vue@1 version, and it is not compatible with mockjs at the moment, I modified it myself, and if you are going to use it, it is better to use official version.'
+  },
+  table: {
+    dynamicTips1: 'Fixed header, sorted by header order',
+    dynamicTips2: 'Not fixed header, sorted by click order',
+    dragTips1: 'Orden por defecto',
+    dragTips2: 'The after dragging order',
+    title: 'Título',
+    importance: 'Importancia',
+    type: 'Tipo',
+    remark: 'Remark',
+    search: 'Buscar',
+    add: 'Añadir',
+    export: 'Exportar',
+    reviewer: 'reviewer',
+    id: 'ID',
+    date: 'Fecha',
+    author: 'Autor',
+    readings: 'Lector',
+    status: 'Estado',
+    actions: 'Acciones',
+    edit: 'Editar',
+    publish: 'Publicar',
+    draft: 'Draft',
+    delete: 'Eliminar',
+    cancel: 'Cancelar',
+    confirm: 'Confirmar'
+  },
+  example: {
+    warning: 'Creating and editing pages cannot be cached by keep-alive because keep-alive include does not currently support caching based on routes, so it is currently cached based on component name. If you want to achieve a similar caching effect, you can use a browser caching scheme such as localStorage. Or do not use keep-alive include to cache all pages directly. See details'
+  },
+  errorLog: {
+    tips: 'Please click the bug icon in the upper right corner',
+    description: 'Now the management system are basically the form of the spa, it enhances the user experience, but it also increases the possibility of page problems, a small negligence may lead to the entire page deadlock. Fortunately Vue provides a way to catch handling exceptions, where you can handle errors or report exceptions.',
+    documentation: 'Documento de introducción'
+  },
+  excel: {
+    export: 'Exportar',
+    selectedExport: 'Exportar seleccionados',
+    placeholder: 'Por favor escribe un nombre de fichero'
+  },
+  zip: {
+    export: 'Exportar',
+    placeholder: 'Por favor escribe un nombre de fichero'
+  },
+  pdf: {
+    tips: 'Here we use window.print() to implement the feature of downloading pdf.'
+  },
+  theme: {
+    change: 'Cambiar tema',
+    documentation: 'Documentación del tema',
+    tips: 'Tips: It is different from the theme-pick on the navbar is two different skinning methods, each with different application scenarios. Refer to the documentation for details.'
+  },
+  tagsView: {
+    refresh: 'Actualizar',
+    close: 'Cerrar',
+    closeOthers: 'Cerrar otros',
+    closeAll: 'Cerrar todos'
+  },
+  settings: {
+    title: 'Page style setting',
+    theme: 'Theme Color',
+    tagsView: 'Open Tags-View',
+    fixedHeader: 'Fixed Header',
+    sidebarLogo: 'Sidebar Logo'
+  }
+}
diff --git a/src/lang/i18n.js b/src/lang/i18n.js
new file mode 100644
index 0000000..3c42cd6
--- /dev/null
+++ b/src/lang/i18n.js
@@ -0,0 +1,1078 @@
+export default {
+  title: {
+    en: 'ARI MES',
+    zh: '中建材自动化智能制造执行系统'
+  },
+  btn: {
+    start: {
+      zh: '开始值班',
+      en: 'Start Work'
+    },
+    view: {
+      zh: '预览',
+      en: 'Preview'
+    },
+    see: {
+      zh: '查看',
+      en: 'View'
+    },
+    search: {
+      zh: '查询',
+      en: 'Search'
+    },
+    edit: {
+      zh: '编辑',
+      en: 'Edit'
+    },
+    delete: {
+      zh: '删除',
+      en: 'Delete'
+    },
+    add: {
+      zh: '新增',
+      en: 'Add'
+    },
+    cancel: {
+      zh: '取 消',
+      en: 'Cancel'
+    },
+    confirm: {
+      zh: '确 定',
+      en: 'Confirm'
+    },
+    detail: {
+      zh: '详情',
+      en: 'Detail'
+    },
+    reset: {
+      zh: '重置',
+      en: 'Reset'
+    },
+    submit: {
+      zh: '提交',
+      en: 'Submit'
+    },
+    save: {
+      zh: '保存',
+      en: 'Save'
+    },
+    upload: {
+      zh: '上传',
+      en: 'Upload'
+    },
+    uploadpic: {
+      zh: '上传图片',
+      en: 'Upload Picture'
+    },
+    back: {
+      zh: '返回',
+      en: 'Back'
+    },
+    checkLog: {
+      zh: '查看日志',
+      en: 'Check Log'
+    },
+    goOffWork: {
+      zh: '结束值班',
+      en: 'Go Off Work'
+    },
+    adddetail: {
+      zh: '添加明细',
+      en: 'Add Detail'
+    },
+    addattr: {
+      zh: '添加属性',
+      en: 'Add Attribute'
+    },
+    log: {
+      zh: '事件日志',
+      en: 'The event log'
+    },
+    addgroup: {
+      zh: '添加组员',
+      en: 'Add Members'
+    },
+    download: {
+      zh: '下载',
+      en: 'download'
+    },
+    sendPlan: {
+      zh: '下发计划',
+      en: 'Issue Plan'
+    },
+    alarmHandle: {
+      zh: '警告处理',
+      en: 'Alarm Handle'
+    },
+    print: {
+      zh: '打印',
+      en: 'print'
+    },
+    design: {
+      zh: '设计',
+      en: 'Design'
+    }
+  },
+  navbar: {
+    profile: {
+      zh: '个人中心',
+      en: 'Profile'
+    },
+    homepage: {
+      zh: '首页',
+      en: 'HomePage'
+    },
+    help: {
+      zh: '帮助文档',
+      en: 'Help Document'
+    },
+    logOut: {
+      zh: '退出',
+      en: 'Log Out'
+    },
+    logoutTime: {
+      zh: '后自动退出系统',
+      en: 'Automatically Exit The System'
+    }
+  },
+  settings: {
+    title: {
+      zh: '系统布局配置',
+      en: 'Page style setting'
+    },
+    theme: {
+      zh: '主题色',
+      en: 'Theme Color'
+    },
+    tagsView: {
+      zh: '开启 Tags-View',
+      en: 'Open Tags-View'
+    },
+    fixedHeader: {
+      zh: '固定 Header',
+      en: 'Fixed Header'
+    },
+    sidebarLogo: {
+      zh: '侧边栏 Logo',
+      en: 'Sidebar Logo'
+    }
+  },
+  tagsView: {
+    refresh: {
+      zh: '刷新',
+      en: 'Refresh'
+    },
+    close: {
+      zh: '关闭',
+      en: 'Close'
+    },
+    closeOthers: {
+      zh: '关闭其它',
+      en: 'Close Others'
+    },
+    closeAll: {
+      zh: '关闭所有',
+      en: 'Close All'
+    }
+  },
+  errorLog: {
+    tips: {
+      zh: '请点击右上角bug小图标',
+      en: 'Please click the bug icon in the upper right corner'
+    },
+    description: {
+      zh:
+        '现在的管理后台基本都是spa的形式了，它增强了用户体验，但同时也会增加页面出问题的可能性，可能一个小小的疏忽就导致整个页面的死锁。好在 Vue 官网提供了一个方法来捕获处理异常，你可以在其中进行错误处理或者异常上报。',
+      en:
+        'Now the management system are basically the form of the spa, it enhances the user experience, but it also increases the possibility of page problems, a small negligence may lead to the entire page deadlock. Fortunately Vue provides a way to catch handling exceptions, where you can handle errors or report exceptions.'
+    },
+    documentation: {
+      zh: '文档介绍',
+      en: 'Document introduction'
+    }
+  },
+  excel: {
+    export: {
+      zh: '导出',
+      en: 'Export'
+    },
+    selectedExport: {
+      zh: '导出已选择项',
+      en: 'Export Selected Items'
+    },
+    placeholder: {
+      zh: '请输入文件名(默认excel-list)',
+      en: 'Please enter the file name (default excel-list)'
+    }
+  },
+  guide: {
+    description: {
+      zh:
+        '引导页对于一些第一次进入项目的人很有用，你可以简单介绍下项目的功能。本 Demo 是基于',
+      en:
+        'The guide page is useful for some people who entered the project for the first time. You can briefly introduce the features of the project. Demo is based on '
+    },
+    button: {
+      zh: '打开引导',
+      en: 'Show Guide'
+    }
+  },
+  login: {
+    title: {
+      zh: '系统登录',
+      en: 'Login Form'
+    },
+    logIn: {
+      zh: '登录',
+      en: 'Login'
+    },
+    username: {
+      zh: '账号',
+      en: 'Username'
+    },
+    password: {
+      zh: '密码',
+      en: 'Password'
+    }
+  },
+  pdf: {
+    tips: {
+      zh: '这里使用   window.print() 来实现下载pdf的功能',
+      en:
+        'Here we use window.print() to implement the feature of downloading PDF.'
+    }
+  },
+  tableHeader: {
+    operation: {
+      zh: '操作',
+      en: 'action'
+    },
+    index: {
+      zh: '序号',
+      en: 'No'
+    }
+  },
+  routerTitle: {
+    dashboard: {
+      zh: '',
+      en: '',
+      dashboard: {
+        zh: '仪表盘',
+        en: 'Dashboard'
+      }
+    },
+    basic: {
+      zh: '系统管理',
+      en: 'System Manager',
+      usermanage: {
+        zh: '用户管理',
+        en: 'User Manager'
+      },
+      rolemanage: {
+        zh: '角色管理',
+        en: 'Role Manager'
+      },
+      menumanage: {
+        zh: '菜单管理',
+        en: 'Menu Manager'
+      },
+      orgmanage: {
+        zh: '组织管理',
+        en: 'Organization Manager'
+      }
+    },
+    equipment: {
+      zh: '设备管理',
+      en: 'Equipment Manager',
+      EquipmentVisualization: {
+        zh: '设备可视化',
+        en: 'Equipment Visualization',
+        EquipmentProcessingQuantity: {
+          zh: '设备加工数量',
+          en: 'Equipment Processing Quantity'
+        },
+        EquipmentEnergyMonitor: {
+          zh: '设备能源监控',
+          en: 'Equipment Energy Monitor'
+        },
+        Visualized: {
+          zh: '可视化',
+          en: 'Visualized'
+        }
+      },
+      sparepart: {
+        zh: '备品备件管理',
+        en: 'Spare Part Manager'
+      },
+      bom: {
+        zh: '设备物料管理',
+        en: 'Equipment Materiel Manager'
+      },
+      bomform: {
+        zh: '设备物料表单',
+        en: 'Equipment Materiel Form'
+      },
+      recipe: {
+        zh: '设备配方',
+        en: 'Equipment Recipe'
+      },
+      recipeform: {
+        zh: '设备配方配置',
+        en: 'Equipment Recipe Setting'
+      },
+      statussetting: {
+        zh: '设备状态配置',
+        en: 'Equipment Status Setting'
+      },
+      repairmanage: {
+        zh: '设备维修管理',
+        en: 'Equipment Repair Manager'
+      },
+      addrepair: {
+        zh: '添加设备维修记录',
+        en: 'Add Equipment Repair Record'
+      },
+      editrepair: {
+        zh: '编辑设备维修记录',
+        en: 'Edit Equipment Repair Record'
+      },
+      maintainplan: {
+        zh: '设备保养计划',
+        en: 'Equipment Maintain Plan'
+      },
+      maintainlog: {
+        zh: '设备保养记录',
+        en: 'Equipment Maintain Log'
+      },
+      typeparam: {
+        zh: '设备基础信息设置',
+        en: 'Equipment Basic Info Setting'
+      },
+      deviceRecipe: {
+        zh: '设备配方设置',
+        en: 'Equipment Recipe Setting'
+      },
+      typeparamdetail: {
+        zh: '设备类型参数详情',
+        en: 'Equipment Type Param Detail'
+      },
+      monitoring: {
+        zh: '设备监控',
+        en: 'Device Monitoring'
+      },
+      analysis: {
+        zh: '设备统计分析',
+        en: 'Device Analysis'
+      },
+      equipmentManagerManage: {
+        zh: '设备操作员管理',
+        en: 'Equipment Operator Manager'
+      },
+      equipmentParams: {
+        zh: '设备运行参数',
+        en: 'Equipment Operation Parameters'
+      },
+      Processequipment: {
+        zh: '设备工艺信息',
+        en: 'Process Equipment'
+      },
+      Parameters: {
+        zh: '参数对比',
+        en: 'Parameters of the contrast'
+      },
+      ProcessData: {
+        zh: '详细分析',
+        en: 'ProcessData'
+      },
+      Details: {
+        zh: '详情',
+        en: 'Details'
+      }
+    },
+    technology: {
+      zh: '工艺管理',
+      en: 'Process Manager',
+      technologylist: {
+        zh: '工艺计划列表',
+        en: 'Process Manager'
+      },
+      technologyprocess: {
+        zh: '工艺流程',
+        en: 'Process'
+      },
+      processList: {
+        zh: '工序管理',
+        en: 'Process Step Manager'
+      }
+    },
+    team: {
+      zh: '班组管理',
+      en: 'Team Manager',
+      teamlist: {
+        zh: '交接记录',
+        en: 'Handover Record'
+      },
+      teamhandover: {
+        zh: '班组交接操作',
+        en: 'Team Handover Operation'
+      },
+      teamplan: {
+        zh: '交接计划',
+        en: 'Handover Plan'
+      },
+      teamplanoperation: {
+        zh: '班组计划操作',
+        en: 'Team Plan Operation'
+      },
+      showlog: {
+        zh: '查看事件日志',
+        en: 'Show The event log'
+      }
+    },
+    material: {
+      zh: '物料管理',
+      en: 'Material Manager',
+      refueling: {
+        zh: '换料记录',
+        en: 'Refuelling Log'
+      },
+      refuelingadd: {
+        zh: '换料记录操作',
+        en: 'Refuelling Log Operation'
+      },
+      bom: {
+        zh: 'BOM',
+        en: 'BOM'
+      },
+      bomadd: {
+        zh: '物料BOM操作',
+        en: 'Material BOM Operation'
+      },
+      batch: {
+        zh: '物料批次',
+        en: 'Material Batch'
+      },
+      batchadd: {
+        zh: '物料批次操作',
+        en: 'Material Batch Operation'
+      },
+      report: {
+        zh: '物料报表',
+        en: 'Material Report'
+      },
+      historyConsume: {
+        zh: '物料历史消耗统计',
+        en: 'Historical material consumption statistics'
+      },
+      currentConsume: {
+        zh: '物料当前消耗统计',
+        en: 'Current material consumption statistics'
+      }
+    },
+    basicData: {
+      zh: '基础资料',
+      en: 'Basic Data',
+      factoryManage: {
+        zh: '厂务信息',
+        en: 'Factory Info',
+        factory: {
+          zh: '工厂信息',
+          en: 'Factory Info'
+        },
+        productLine: {
+          zh: '产线信息',
+          en: 'Product Line Info'
+        },
+        workSection: {
+          zh: '工段信息',
+          en: 'Work Section Info'
+        }
+      },
+      teamManage: {
+        zh: '班组信息',
+        en: 'Team Info',
+        team: {
+          zh: '班组',
+          en: 'Team'
+        },
+        major: {
+          zh: '专业',
+          en: 'Skill'
+        },
+        staff: {
+          zh: '员工信息',
+          en: 'Staff Info'
+        }
+      },
+      CustomerSupplier: {
+        zh: '客商信息',
+        en: 'Customer Supplier Info',
+        customer: {
+          zh: '客户',
+          en: 'Customer'
+        },
+        supplier: {
+          zh: '供应商',
+          en: 'Supplier'
+        }
+      },
+      materials: {
+        zh: '物料信息',
+        en: 'Material Info',
+        material: {
+          zh: '物料',
+          en: 'Material'
+        },
+        MaterialAdd: {
+          zh: '物料管理',
+          en: 'MaterialManage'
+        },
+        materialType: {
+          zh: '物料类型',
+          en: 'Material Type'
+        }
+      },
+      alarmSetting: {
+        zh: '异常报警设置',
+        en: 'Abnormal Alarm setting',
+        alarmInfo: {
+          zh: '异常报警信息',
+          en: 'Abnormal Alarm Info'
+        },
+        alarmType: {
+          zh: '异常报警类型',
+          en: 'Abnormal Alarm Type'
+        },
+        alarmLevel: {
+          zh: '异常报警级别',
+          en: 'Abnormal Alarm Level'
+        }
+      },
+      ports: {
+        zh: '缓存区信息',
+        en: 'Ports Info',
+        ports: {
+          zh: '仓库',
+          en: 'Warehouse'
+        },
+        area: {
+          zh: '区域',
+          en: 'Area'
+        },
+        shelf: {
+          zh: '货架',
+          en: 'Shelf'
+        },
+        cacheAdd: {
+          zh: '缓存区信息',
+          en: 'Ports Add'
+        },
+        shelfAdd: {
+          zh: '货架信息',
+          en: 'Shelf Add'
+        },
+        locationAdd: {
+          zh: '库位信息',
+          en: 'Location Add'
+        },
+        storageBox: {
+          zh: '存储箱',
+          en: 'Storage Box'
+        },
+        PositionDetailInfo: {
+          zh: '位置详情',
+          en: 'Position Detail Info'
+        }
+      },
+      equipment: {
+        zh: '设备信息',
+        en: 'Equipment Info',
+        equipmentInfo: {
+          zh: '设备信息',
+          en: 'Equipment Info'
+        },
+        equipmentInfoAdd: {
+          zh: '设备信息管理',
+          en: 'Equipment Manage'
+        },
+        equipmentType: {
+          zh: '设备类型',
+          en: 'Equipment Type'
+        },
+        EquipmentGroup: {
+          zh: '设备分组',
+          en: 'Equipment Group'
+        },
+        equipmentTypeAlarm: {
+          zh: '设备类型报警',
+          en: 'Equipment Type Alarm'
+        },
+        maintenanceType: {
+          zh: '维修类型',
+          en: 'Repair Type'
+        },
+        maintenanceCycle: {
+          zh: '保养周期',
+          en: 'Maintenance Cycle'
+        },
+        spareParts: {
+          zh: '备品备件',
+          en: 'Spare Parts'
+        },
+        equipmentLink: {
+          zh: '连线设备',
+          en: 'Connecting Euipment'
+        },
+        equipmentLinkAdd: {
+          zh: '连线设备管理',
+          en: 'equipment Link Manage'
+        },
+        equipmentDetectInfo: {
+          zh: '检测设备区域信息',
+          en: 'Equipment Detect Info',
+          equipmentDetectArea: {
+            zh: '区域设备',
+            en: 'Equipment Detect Area'
+          },
+          detectSystemSettings: {
+            zh: '检测系统设置',
+            en: 'Detect System Settings'
+          },
+          equipmentDetectSystem: {
+            zh: '检测系统',
+            en: 'Equipment Detect System'
+          },
+          equipmentDetectParam: {
+            zh: '检测设备参数',
+            en: 'Equipment Detect Param'
+          }
+        }
+      },
+      scrap: {
+        zh: '报废信息',
+        en: 'Scrap Info',
+        scrapInfo: {
+          zh: '报废原因',
+          en: 'Scrap Reason'
+        },
+        scrapType: {
+          zh: '报废类型',
+          en: 'Scrap Type'
+        }
+      },
+      product: {
+        zh: '产品信息',
+        en: 'Product Info',
+        productPool: {
+          zh: '产品池',
+          en: 'Product Pool'
+        }
+      },
+      EquipmentScrapGrade: {
+        zh: '设备废片等级',
+        en: 'Equipment Scrap Grade'
+      },
+      state: {
+        zh: '状态',
+        en: 'Status',
+        stateConfig: {
+          zh: '配置显示状态',
+          en: 'Status Config'
+        }
+      },
+      dataDictionaryType: {
+        zh: '数据字典类型',
+        en: 'Data Dictionary Type',
+        dataDictionary: {
+          zh: '数据字典',
+          en: 'Data Dictionary'
+        }
+      },
+      rule: {
+        zh: '规则',
+        en: 'Rule',
+        codeRules: {
+          zh: '编码规则',
+          en: 'Code Rules'
+        },
+        codeRulesAttr: {
+          zh: '管理编码属性',
+          en: 'Manage Coding Properties'
+        }
+      },
+      visualization: {
+        zh: '可视化',
+        en: 'Visualization',
+        visualLayout: {
+          zh: '可视化布局图',
+          en: 'Visual Layout'
+        }
+      }
+    },
+    order: {
+      zh: '工单管理',
+      en: 'Order Manager',
+      powerClassification: {
+        zh: 'Power Classification',
+        en: 'Power Classification'
+      },
+      consumption: {
+        zh: '工单能耗',
+        en: 'Energy consumption of the repair order'
+      },
+      details: {
+        zh: '工单能耗详情',
+        en: 'Energy consumption of the repair order details'
+      },
+      erpToMesData: {
+        zh: 'Erp To Mes数据',
+        en: 'Erp To Mes Data'
+      },
+      erpToMesVisualization: {
+        zh: 'erp To Mes 可视化',
+        en: 'erpToMesVisualization'
+      },
+      workOrderManage: {
+        zh: '工单信息',
+        en: 'Workorder Info',
+        workOrder: {
+          zh: '工单信息',
+          en: 'Workorder Info'
+        },
+        workOrderOperation: {
+          zh: '工单操作',
+          en: 'Workorder operation'
+        },
+        workOrderMonitor: {
+          zh: '工单监控',
+          en: 'Workorder monitor'
+        },
+        workOrderVerify: {
+          zh: '工单验证',
+          en: 'Workorder verify'
+        },
+        issueworkorder: {
+          zh: '下发工单',
+          en: 'Issue Workorder'
+        },
+        closeworkorder: {
+          zh: '结束工单',
+          en: 'Close Workorder'
+        },
+        viewpackingTags: {
+          zh: '包装箱查询',
+          en: 'Package Inquiry'
+        },
+        tagDetail: {
+          zh: '明细',
+          en: 'Detail'
+        }
+      },
+      orderManage: {
+        zh: '订单信息',
+        en: 'Order Info',
+        order: {
+          zh: '生产订单管理',
+          en: 'Production Order Management'
+        },
+        orderDetail: {
+          zh: '订单详情',
+          en: 'Order Detail'
+        },
+        orderIssue: {
+          zh: '生成工单',
+          en: 'Generate Work Order'
+        },
+        scrapDetail: {
+          zh: '废品详情',
+          en: 'Scrap Detail'
+        },
+        packageDetail: {
+          zh: '包装详情',
+          en: 'Package Detail'
+        }
+      },
+      tagManage: {
+        zh: '标签管理',
+        en: 'tag Manager',
+        packingTags: {
+          zh: '包装标签',
+          en: 'packing Tags'
+        }
+      },
+      infoTrack: {
+        zh: '信息追溯',
+        en: 'Info Track',
+        equipmentParametersTrack: {
+          zh: '设备参数追溯',
+          en: 'Equipment Parameters Track'
+        },
+        processSubstrateDataTrack: {
+          zh: '加工基板上下片追溯',
+          en: 'Process Substrate Upper and Lower Track'
+        },
+        substrateParametersTrack: {
+          zh: '基板参数追溯',
+          en: 'Substrate Parameters Track'
+        },
+        substrateEquipment: {
+          zh: '基板设备流转',
+          en: 'Substrate Equipment'
+        },
+        equipmentEventTrack: {
+          zh: '设备事件追溯',
+          en: 'Equipment Event Track'
+        }
+      },
+      substrate: {
+        zh: '基板',
+        en: 'substrate',
+        substrateBatch: {
+          zh: '基板批次信息',
+          en: 'Substrate Batch Information'
+        },
+        substrateBatchAttr: {
+          zh: '基板批次信息属性',
+          en: 'Substrate Batch Information Property'
+        }
+      }
+    },
+    factory: {
+      zh: '厂务管理',
+      en: 'Factory Manager',
+      AlarmManager: {
+        zh: '报警管理',
+        en: 'Alarm Manager',
+        AbnormalAlarm: {
+          zh: '异常警告',
+          en: 'Abnormal Alarm'
+        },
+        EquipmentAlarm: {
+          zh: '设备报警',
+          en: 'Equipment Alarm'
+        }
+      },
+      visual: {
+        en: 'Visualization',
+        zh: '可视化',
+        visual: {
+          en: 'Visualization',
+          zh: '可视化'
+        },
+        visualLocation: {
+          en: 'Location Visual',
+          zh: '库位可视化'
+        }
+      }
+    },
+    packing: {
+      zh: '包装管理',
+      en: 'Packing Manager',
+      labelTemplate: {
+        zh: '标签模版',
+        en: 'Label Template'
+      },
+      labelDesign: {
+        zh: '标签设计',
+        en: 'Label Design'
+      },
+      PackingList: {
+        zh: '包装清单打印',
+        en: 'Packing List Print'
+      }
+    },
+    interface: {
+      zh: '接口管理',
+      en: 'Interface Manager'
+    },
+    dataacquisition: {
+      zh: '数据采集',
+      en: 'Data Acquisition'
+    },
+    form: {
+      zh: '报表管理',
+      en: 'Report Form',
+      report: {
+        zh: '报表列表',
+        en: 'Report List'
+      },
+      reportSortList: {
+        zh: '报表列表',
+        en: 'Report List'
+      },
+      reportDesign: {
+        zh: '报表设计',
+        en: 'Report Design'
+      },
+      reportView: {
+        zh: '报表预览',
+        en: 'Report Preview'
+      },
+      reportSort: {
+        zh: '报表分类',
+        en: 'Report Sorts'
+      }
+    },
+    quality: {
+      zh: '质量管理',
+      en: 'Quality Manager',
+      scrap: {
+        zh: '废品报废',
+        en: 'Scrap'
+      },
+      scrapcategorystatistics: {
+        zh: '废品分类统计',
+        en: 'Scrap Category Statistics'
+      },
+      plan: {
+        zh: '质量检测计划',
+        en: 'Quality Detect Plan'
+      },
+      knowledge: {
+        zh: '维护保养知识库',
+        en: 'Maintain the knowledge base'
+      },
+      knowledgeadd: {
+        zh: '维护保养知识库添加',
+        en: 'Maintain the knowledge base add'
+      },
+      planform: {
+        zh: '质量检测计划详情',
+        en: 'Quality Detect Plan Detail'
+      },
+      issuedplan: {
+        zh: '下发检测计划',
+        en: 'Issued Plan'
+      },
+      offlineDetec: {
+        zh: '离线检测',
+        en: 'Offline Detec',
+        detecParam: {
+          zh: '检测参数',
+          en: 'Detec Param'
+        },
+        detecRegistration: {
+          zh: '检测登记',
+          en: 'Detec Registration'
+        }
+      }
+    },
+    spc: {
+      zh: 'SPC',
+      en: 'SPC'
+    }
+  },
+  placeholder: {
+    input: {
+      zh: '请输入',
+      en: 'Please Input'
+    },
+    select: {
+      zh: '请选择',
+      en: 'Please Select'
+    },
+    formaterror: {
+      zh: '格式错误',
+      en: 'Format Error'
+    },
+    upload: {
+      zh: '请上传',
+      en: 'Please Upload'
+    },
+    treeSearch: {
+      zh: '请输入关键字进行过滤',
+      en: 'Please input keywords to filter'
+    }
+  },
+  formItem: {
+    role: {
+      add: {
+        zh: '新增角色',
+        en: 'Add Role'
+      },
+      edit: {
+        zh: '编辑角色',
+        en: 'Edit Role'
+      }
+    },
+    user: {
+      add: {
+        zh: '新增用户',
+        en: 'Add User'
+      },
+      edit: {
+        zh: '编辑用户',
+        en: 'Edit User'
+      }
+    },
+    org: {
+      add: {
+        zh: '新增组织',
+        en: 'Add Organization'
+      },
+      edit: {
+        zh: '编辑组织',
+        en: 'Edit Organization'
+      }
+    },
+    menu: {
+      add: {
+        zh: '新增菜单',
+        en: 'Add Menu'
+      },
+      edit: {
+        zh: '编辑菜单',
+        en: 'Edit Menu'
+      }
+    },
+    to: {
+      zh: '至',
+      en: 'to'
+    },
+    beginTime: {
+      zh: '开始日期',
+      en: 'Begin Date'
+    },
+    endTime: {
+      zh: '结束日期',
+      en: 'End Date'
+    }
+  },
+  copyright: {
+    copyright: {
+      zh: '版权所有',
+      en: 'Copyright'
+    },
+    company: {
+      zh: '中建材智能自动化研究院有限公司',
+      en: 'Intelligent Automation Research Institute Co., Ltd'
+    }
+  },
+  module: {
+    basicData: {
+      visual: {
+        equipment: {
+          zh: '设备',
+          en: 'Equipment'
+        }
+      }
+    }
+  },
+  upload: {
+    text: {
+      header: {
+        zh: '将文件拖到此处，或',
+        en: 'Drag the file here, or'
+      },
+      footer: {
+        zh: '点击上传',
+        en: 'click upload'
+      }
+    },
+    placeholder: {
+      zh: '仅限上传png、jpg、jpeg、gif格式的图片，大小限制为10M',
+      en:
+        'Only PNG, JPG, JPEG, GIF format images can be uploaded, and the size is limited to 10m'
+    }
+  }
+}
diff --git a/src/lang/i18n/en/btn/index.js b/src/lang/i18n/en/btn/index.js
new file mode 100644
index 0000000..026b468
--- /dev/null
+++ b/src/lang/i18n/en/btn/index.js
@@ -0,0 +1,94 @@
+/*
+ * @Author: gtz
+ * @Date: 2021-03-04 16:19:14
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-13 20:32:02
+ * @Description: file content
+ */
+
+export default {
+  start: {
+    zh: '开始值班',
+    en: 'Start Work'
+  },
+  see: {
+    zh: '查看',
+    en: 'See'
+  },
+  search: {
+    zh: '查询',
+    en: 'Search'
+  },
+  edit: {
+    zh: '编辑',
+    en: 'Edit'
+  },
+  delete: {
+    zh: '删除',
+    en: 'Delete'
+  },
+  add: {
+    zh: '新增',
+    en: 'Add'
+  },
+  cancel: {
+    zh: '取 消',
+    en: 'Cancel'
+  },
+  confirm: {
+    zh: '确 定',
+    en: 'Confirm'
+  },
+  detail: {
+    zh: '详情',
+    en: 'Detail'
+  },
+  reset: {
+    zh: '重置',
+    en: 'Reset'
+  },
+  submit: {
+    zh: '提交',
+    en: 'Submit'
+  },
+  save: {
+    zh: '保存',
+    en: 'Save'
+  },
+  upload: {
+    zh: '上传',
+    en: 'Upload'
+  },
+  uploadpic: {
+    zh: '上传图片',
+    en: 'Upload Picture'
+  },
+  back: {
+    zh: '返回',
+    en: 'Back'
+  },
+  checkLog: {
+    zh: '查看日志',
+    en: 'Check Log'
+  },
+  goOffWork: {
+    zh: '结束值班',
+    en: 'Go Off Work'
+  },
+  adddetail: {
+    zh: '添加明细',
+    en: 'Add Detail'
+  },
+  addattr: {
+    zh: '添加属性',
+    en: 'Add Attribute'
+  },
+  addgroup: {
+    zh: '添加',
+    en: 'Add Members'
+  },
+  download: {
+    zh: '下载',
+    en: 'download'
+  }
+}
diff --git a/src/lang/i18n/en/module/art.js b/src/lang/i18n/en/module/art.js
new file mode 100644
index 0000000..7310955
--- /dev/null
+++ b/src/lang/i18n/en/module/art.js
@@ -0,0 +1,58 @@
+/*
+ * @Author: gtz
+ * @Date: 2021-03-08 09:45:54
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-04-15 19:34:46
+ * @Description: file content
+ */
+
+export default {
+  artName: 'Process Name',
+  status: 'Status',
+  createTime: 'Create Time',
+  artCode: 'Process Code',
+  remark: 'Remark',
+  process: 'Process Step',
+  processName: 'Process Name',
+  eqName: 'Equipment Name',
+  recipeName: 'Recipe Name',
+  materialBOM: 'Material BOM',
+  artType: 'Process Type',
+  description: 'Description',
+  or: ' or ',
+  on: 'on',
+  off: 'off',
+  operation: 'Operation',
+  IsDisabled: 'Is Enabled',
+  key: 'Key',
+  input: 'Please Input',
+  confirm: 'Confirm',
+  cancel: 'Cancel',
+  delTip: 'Are you sure you want to delete the process?',
+  tip: 'Tip',
+  delSucc: 'Delete Success!',
+  externalCode: 'Process Code',
+  substrateType: 'Substrate Type',
+  artBOM: 'Process BOM',
+  notNull: ' cannot be empty',
+  selectNotNull: 'Please select at least one ',
+  lengthRule: 'The length should more than 3 characters',
+  nodeNull: 'Process Step Node is empty, are you sure to save?',
+  hasNull: 'Equipment and ripice cannot be null or there is no equipment added in a process step please check!',
+  choiceEqError: 'Please select equipment first!',
+  changeTipHeaderDes: 'Is this description applied to all equipment in ',
+  changeTipHeaderRemark: 'Is this remark applied to all equipment in ',
+  NotSameProcess: 'Can not choice same process step!',
+  changeTipFooter: ' process step',
+  sameEqError: 'Can not choice same equipment!',
+  processList: {
+    processName: 'Process Step Name',
+    processEq: 'Process Step Equipment',
+    description: 'Description',
+    addProcess: 'Add a Process Step',
+    type: 'Type',
+    equipment: 'Equipment',
+    buffer: 'Buffer'
+  }
+}
+
diff --git a/src/lang/i18n/en/module/basicData.js b/src/lang/i18n/en/module/basicData.js
new file mode 100644
index 0000000..fb11328
--- /dev/null
+++ b/src/lang/i18n/en/module/basicData.js
@@ -0,0 +1,276 @@
+/*
+ * @Author: gtz
+ * @Date: 2021-03-04 16:13:51
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-07-21 09:59:34
+ * @Description: file content
+ */
+export default {
+  visual: {
+    addNow: 'Please add the current point first!',
+    choiseSucc: 'The choice is successful!',
+    choiseError: 'You cannot select the same equipment!',
+    unSelect: 'Please selete equipment!',
+    changeLine: 'Please select equipment first or delete point with no equipment selected!',
+    areaName: 'Area Name',
+    annex: 'Annex',
+    locationInformation: 'Location Information',
+    runningTrack: 'Running Track',
+    tip: 'Click the picture below to select a point. After selecting a point, select a device in the pop-up box. If you do not select a device when adding a new point, you cannot select the next point. If you want to adjust the order of the points, drag the label at the bottom of the picture to the position you want to adjust. Click to confirm the submission point information and click Reset to reset the point information to the state when the pop-up box is opened',
+    routeTip: '. Select a route in the selection box to edit different routes in the current area. Click new route to fill in the information to add a running track in the current area',
+    help: 'Help',
+    baseRouteName: 'Default Route Name',
+    oneLineTip: 'There must be at least one trajectory!',
+    editLineName: 'Trajectory Name',
+    oneLineNameTip: 'You cannot input the same trajectory name!',
+    lineNameNotNullTip: 'Line name cannot empty!',
+    keyword: 'keyword',
+    success: 'success',
+    confirmButtonText: 'confirm',
+    cancelButtonText: 'cancel',
+    Tips: 'Tips',
+    TipsBefore: 'Are you sure you want to delete',
+    Description: 'Description',
+    Remarks: 'Remarks',
+    Yes: 'Yes',
+    No: 'No',
+    Or: 'Or',
+    AttributeName: 'Attribute Name',
+    AttributeValue: 'Attribute Value',
+    EnglishName: 'English Name',
+    Abbreviation: 'Abbreviation',
+    Specs: 'Specs',
+    Manufacturer: 'Manufacturer',
+    productionTime: 'Production Time',
+    enterTime: 'Enter Time',
+    debugTime: 'Debug Time',
+    CurrentState: 'Current State',
+    uploadInfo: 'upload Info',
+    unit: 'unit',
+    AttributeCode: 'Attribute Code',
+    stock: 'Location Information',
+    isStock: 'Is There Location',
+    editLocation: 'Edit Location Point',
+    location: 'Location',
+    locationTip: 'Click the picture below to select a point. After selecting a point, select a location in the pop-up box. If you do not select a location when adding a new point, you cannot select the next point. If you want to adjust the order of the points, drag the label at the bottom of the picture to the position you want to adjust. Click to confirm the submission point information and click Reset to reset the point information to the state when the pop-up box is opened',
+    locationInfo: 'Location Point Info'
+  },
+  factory: {
+    placeholderName: 'Name Or Code',
+    createTime: 'Create Time',
+    FactoryName: 'Factory Name',
+    FactoryCode: 'Factory Code',
+    Address: 'Address'
+  },
+  productLine: {
+    placeholderName: 'Product Line Name',
+    ProductionLineCode: 'Production Line Code'
+  },
+  workSection: {
+    SectionName: 'Section Name',
+    WorkSectionCoding: 'WorkSection Coding'
+  },
+  group: {
+    TeamName: 'Team Name',
+    NumberOfTeams: 'Number Of Teams',
+    GroupLeader: 'Group Leader',
+    TeamStatus: 'Team Status'
+  },
+  major: {
+    ProfessionalName: 'Professional Name',
+    ProfessionalCoding: 'Professional Coding'
+  },
+  staff: {
+    Name: 'Name',
+    EmployeeID: 'Employee ID',
+    Gender: 'gender',
+    EntryTime: 'Entry Time',
+    Telephone: 'Telephone',
+    Email: 'Email',
+    Wechat: 'Wechat',
+    Profession: 'Profession',
+    Workshop: 'Workshop',
+    onDuty: 'onDuty',
+    role: 'Worker Role'
+  },
+  customer: {
+    CustomerName: 'Customer Name',
+    CustomerCode: 'Customer Code',
+    ContactPerson: 'Contact Person',
+    Telephone: 'Telephone',
+    Address: 'Address',
+    format: 'format is incorrect'
+  },
+  supplier: {
+    SupplierName: 'Supplier Name',
+    SupplierCode: 'Supplier Code',
+    ContactPerson: 'Contact Person',
+    Telephone: 'Telephone',
+    Address: 'Address'
+  },
+  material: {
+    MaterialName: 'Material Name',
+    MaterialCoding: 'Material Coding',
+    MaterialType: 'Material Type'
+  },
+  materialsType: {
+    TypeCode: 'Type Code',
+    TypeName: 'Type Name'
+  },
+  alarmManagement: {
+    AlarmCode: 'Alarm Code',
+    AlarmType: 'Alarm Type',
+    AlarmLevel: 'Alarm Level',
+    AlarmName: 'Alarm Name',
+    AlarmContent: 'Alarm Content',
+    AlarmTypeCode: 'Alarm Type Code',
+    LevelCode: 'Level Code'
+  },
+  cache: {
+    CacheCode: 'Ports Code',
+    CacheName: 'Ports Name',
+    StockNumber: 'Stock Number',
+    AreaNumber: 'Area Number',
+    AreaCode: 'Area Code',
+    AreaName: 'Area Name',
+    Shelf: 'Shelf',
+    ManageShelves: 'Manage Shelves',
+    ShelfCode: 'Shelf Code',
+    ShelfName: 'Shelf Name',
+    ShelfNumber: 'Shelf Number',
+    StorageQuantity: 'Storage Quantity',
+    Location: 'Location',
+    ManageLocation: 'Manage Location',
+    LocationCode: 'Location Code',
+    LocationName: 'Location Name',
+    anotherName: 'Another Name',
+    place: 'Place',
+    addCacheArea: 'add Ports Area'
+  },
+  storageBox: {
+    name: 'Name',
+    code: 'Code',
+    alias: 'Alias',
+    StorageQuantity: 'StorageQuantity',
+    status: 'Status',
+    PositionDetail: 'PositionDetail',
+    remark: 'Remark',
+    PositionNo: 'PositionNo',
+    PositionCode: 'PositionCode',
+    PositionCodeAlias: 'PositionCodeAlias'
+  },
+  equipment: {
+    EquipmentName: 'Equipment Name',
+    EquipmentCode: 'Equipment Code',
+    EquipmentType: 'Equipment Type',
+    groupName: 'Group Name',
+    groupCode: 'Group Code',
+    EquipmentGrouping: 'Equipment Grouping',
+    FunctionDescription: 'Function Description',
+    EquipmentTypeAlarm: 'Equipment Type Alarm',
+    SetAlarm: 'Set Alarm',
+    DebugPeriod: 'Debug Period',
+    intellectualProperty: 'intellectual Property',
+    rangeNumber: 'range Number',
+    E10Status: 'E10 Status',
+    activiation: 'activiation',
+    communication: 'communication',
+    equipmentImg: 'Equipment Img',
+    equipmentInfo: 'Equipment Info',
+    EquipmentTypeName: 'Equipment Type Name',
+    EquipmentTypeCode: 'Equipment Type Code',
+    EquipmentTypeAlarmName: 'Equipment Type Alarm Name',
+    EquipmentTypeAlarmCode: 'EquipmentTypeAlarmCode',
+    parentName: 'Parent Name',
+    RepairTypeCode: 'Repair Type Code',
+    RepairTypeName: 'Repair Type Name',
+    PeriodCode: 'Period Code',
+    maintenancePeriod: 'Maintenance Period',
+    SparepartCode: 'Sparepart Code',
+    SparepartName: 'Sparepart Name',
+    SparepartModel: 'Sparepart Model',
+    WiredEquipment: 'Wired Equipment',
+    WiredCode: 'Wired Code',
+    connectUpperDevice: 'Connect Upper Device',
+    connectLowerDevice: 'Connect Lower Device',
+    controlStatus: 'Control Status',
+    plcVersion: 'PLC Version',
+    eapVersion: 'EAP Version',
+    maintenanceCycle: 'Maintenance Cycle (year)',
+    maintenanceTime: 'Maintenance Duration (hours)'
+  },
+  equipmentDetectInfo: {
+    code: 'code',
+    equipmentDetectSystemName: 'Detect System Name',
+    equipmentDetectSystemAbbr: 'Detect System Abbreviation',
+    DetectionArea: 'Detection Area',
+    IssueArea: 'Issue Area',
+    AddEquipment: 'Add Equipment',
+    EquipmentFunction: 'Equipment Function',
+    TestParameterName: 'Test Parameter Name',
+    ReferenceValue: 'Reference Value',
+    IssueOrNot: 'Issue Or Not',
+    TestFrequency: 'Test Frequency',
+    TestSystem: 'Test System'
+  },
+  ScrapInfo: {
+    PlateId: 'Substrate Id',
+    TimePeriod: 'Time Period',
+    StartTime: 'Start Time',
+    EndTime: 'End Time',
+    To: 'To',
+    source: 'Source',
+    wasteGrade: 'Waste Grade',
+    RegisterPerson: 'Register Person',
+    updateTime: 'Update Time',
+    cause: 'Cause',
+    causeCode: 'Cause Code',
+    WasteName: 'Waste Name',
+    WasteCode: 'Waste Code',
+    remark: 'Remarks',
+    scrapType: 'Scrap Type',
+    scrapTypeCode: 'Scrap Type Code',
+    name: 'equipment name',
+    entryType: 'Manual/Automatic',
+    automatic: 'automatic',
+    manual: 'Manual',
+    workOrderId: 'workOrderId'
+  },
+  productPool: {
+    productName: 'Product Name',
+    productCode: 'Product Code'
+  },
+  dataDictionary: {
+    list: 'list',
+    dataDictionaryName: 'Data Dictionary Name',
+    dataDictionaryCode: 'Data Dictionary Code'
+  },
+  StateConfig: {
+    status: 'Status',
+    DisplayColor: 'Display Color',
+    Twinkle: 'Twinkle'
+  },
+  knowledge: {
+    time: 'Period of time',
+    title: 'title',
+    endTIme: 'end time',
+    startTime: 'start time',
+    To: 'to',
+    content: 'content',
+    annex: 'annex'
+  },
+  CodeRules: {
+    RuleName: 'Rule Name',
+    RuleCode: 'Rule Code',
+    manageProperty: 'Manage Property',
+    Property: 'Property',
+    PropertyCode: 'Property Code',
+    PropertyName: 'Property Name',
+    Length: 'Length',
+    order: 'Order'
+  },
+  EquipmentScrapGrade: {
+    keyword: 'name',
+    ScrapGrade: 'Scrap Grade'
+  }
+}
diff --git a/src/lang/i18n/en/module/equipmentManager.js b/src/lang/i18n/en/module/equipmentManager.js
new file mode 100644
index 0000000..1534c49
--- /dev/null
+++ b/src/lang/i18n/en/module/equipmentManager.js
@@ -0,0 +1,383 @@
+/*
+ * @Date: 2021-03-05 10:04:30
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-23 09:13:56
+ * @FilePath: \basic-admin\src\lang\i18n\en\module\equipmentManager.js
+ * @Description:
+ */
+export default {
+  equipmentVisualization: {
+    timeSlot: 'Time Slot',
+    ProcessingQuantity: 'Processing Quantity',
+    Histogram: 'Histogram',
+    DataTable: 'Data Table',
+    Year: 'Year',
+    Quarter: 'Quarter',
+    Month: 'Month',
+    Week: 'Week',
+    Electric: 'Electric',
+    Water: 'Water',
+    Gas: 'Gas'
+  },
+  sparepart: {
+    'sparepart': 'Sparepart',
+    'code': 'Sparepart number',
+    'name': 'Sparepart name',
+    'model': 'Sparepart model',
+    'batchNumber': 'batch number',
+    'supplier': 'supplier',
+    'number': 'Quantity',
+    'unit': 'unit',
+    'entryTime': 'Time to enter the factory',
+    'receiver': 'Receiver',
+    'remark': 'Remarks',
+    'externalCode': 'External Code',
+    'searchPlaceholder': 'Code or Name',
+    'editDialogTtile': 'Edit Sparepart',
+    'addDialogTtile': 'Add Sparepart',
+    'placeholdersparepart': 'Please select Sparepart',
+    'placeholdermodel': 'Please input Sparepart model',
+    'placeholderbatchNumber': 'Please input batch number',
+    'placeholdersupplier': 'Please input supplier',
+    'placeholdernumber': 'Please input Quantity',
+    'placeholderunit': 'Please select unit',
+    'placeholderentryTime': 'Please select Time',
+    'placeholderreceiver': 'Please select Receiver',
+    'placeholderremark': 'Please input Remarks',
+    'placeholderexternalCode': 'Please input External Code'
+  },
+  bom: {
+    'searchPlaceholder': 'Device code or name',
+    'code': 'Equipment material inventory code',
+    'name': 'Equipment material inventory',
+    'equipmentCode': 'Equipment ID',
+    'equipmentName': 'Equipment name',
+    'enabled': 'Status',
+    'remark': 'Remarks',
+    'addDialogTitle': 'Add Equipment Material',
+    'editDialogTitle': 'Edit Equipment Material',
+    'placeholdercode': 'Please input Equipment material code',
+    'placeholdername': 'Please input Equipment material',
+    'placeholderequipmentName': 'Please select Device',
+    'placeholderremark': 'Please input remarks',
+    '': ''
+  },
+  bomdetail: {
+    'title': 'Device Material Detail',
+    'materialId': 'Material ID',
+    'materialName': 'Material name',
+    'unit': 'Unit',
+    'quantity': 'Quantity',
+    'remark': 'Remarks',
+    'addDialogTitle': 'Add Material',
+    'editDialogTitle': 'Edit Material',
+    'placeholdermaterialName': 'Please select Material',
+    'placeholderunit': 'Please select Unit',
+    'placeholderquantity': 'Please input Quantity',
+    'placeholderremark': 'Please input Remarks'
+  },
+  recipe: {
+    'searchPlaceholder': 'Recipe code or name',
+    'deviceselect': 'Please select device',
+    'equipmentId': 'Equipment Name',
+    'equipmentType': 'Equipment type',
+    'name': 'Recipe name',
+    'code': 'Recipe code',
+    'activationState': 'Active Status',
+    'enabled': 'Status',
+    'remark': 'Remarks',
+    'description': 'Recipe description',
+    'addDialogTitle': 'Add Device Recipe',
+    'editDialogTitle': 'Edit Device Recipe',
+    'placeholdername': 'Please input Recipe name',
+    'placeholderdevice': 'Please select Device',
+    'placeholdercode': 'Please input Recipe code',
+    'placeholderdescription': 'Please input Recipe description',
+    'placeholderremark': 'Please input Remarks'
+  },
+  recipeDetail: {
+    'title': 'Device Type Recipe Param Detail',
+    'paramCode': 'Param code',
+    'paramName': 'Param name',
+    'type': 'Param type',
+    'minValue': 'Min value',
+    'maxValue': 'Max value',
+    'defaultValue': 'Default value',
+    'unit': 'Unit',
+    'remark': 'Remarks',
+    'recipeParam': 'Recipe param',
+    'paramValue': 'Param value',
+    'placeholderrecipeParam': 'Please select Recipe param',
+    'placeholderparamValue': 'Please input Param value',
+    'placeholderremark': 'Please input Remarks',
+    'addDialogTitle': 'Add Recipe param',
+    'editDialogTitle': 'Edit Recipe param'
+  },
+  statusSetting: {
+    'searchPlaceholder': 'Device name',
+    'searchPlaceholder2': 'Device status',
+    'code': 'Device code',
+    'name': 'Device name',
+    'status': 'E10 Status',
+    'color': 'Color',
+    'description': 'Device Description',
+    'dialogTitle': 'Edit device status',
+    'devicestatus': 'E10 Status',
+    'placeholderdevicestatus': 'Please select E10 status',
+    'communication': 'Communication',
+    'controlStatus': 'Control Status',
+    'controlStatusLocal': 'Local',
+    'controlStatusOnline': 'Online',
+    'communicationOff': 'Disconnect',
+    'communicationOn': 'Connected',
+    'placeholdercontrolStatus': 'Please select control Status'
+  },
+  repair: {
+    'searchPlaceholder': 'Device name',
+    'startDate': 'Start Date',
+    'endDate': 'End Date',
+    'repairOrderNumber': 'Order number',
+    'maintenanceStartTime': 'Repair start time',
+    'maintenanceFinishTime': 'Repair end time',
+    'maintenanceStatus': 'Maintenance status',
+    'maintenanceStatusNo': 'Incomplete',
+    'maintenanceStatusYes': 'Complete',
+    'equipmentName': 'Equipment name',
+    'maintenanceWorker': 'Maintenance worker',
+    'workerContactInformation': 'Contact information',
+    'remark': 'Remarks',
+    'equipmentId': 'Equipment name',
+    'equipmentPosition': 'Equipment position',
+    'timeOfFailure': 'Time of failure',
+    'faultLevel': 'Fault Level',
+    'timerange': 'Repair time range',
+    'repairMode': 'Repair Type',
+    'faultDetail': 'Fault Detail',
+    'maintenanceDetail': 'Repair Log',
+    'annex': 'Annex',
+    'repairTools': 'Repair Tools',
+    'placeholderrepairTools': 'Please input repair tools',
+    'placeholderrepairOrderNumber': 'Please input maintenance order number',
+    'placeholderequipmentId': 'Please select equipment',
+    'placeholdermaintenanceWorker': 'Please select worker',
+    'placeholdermaintenanceStatus': 'Please select repiar method',
+    'placeholderequipmentPosition': 'Please input equipment position',
+    'placeholderworkerContactInformation': 'Please input contract information',
+    'placeholdertimeOfFailure': 'Please select time of fault',
+    'placeholderfaultLevel': 'Please select fault level',
+    'placeholderrepairMode': 'Please select repair type',
+    'placeholderfaultDetail': 'Please input detail of fault',
+    'placeholdermaintenanceDetail': 'Please input detail of repair',
+    'placeholderremark': 'Please input remarks'
+  },
+  monitoring: {
+    'searchPlaceholder': 'Device ID or name',
+    'code': 'device ID',
+    'name': 'Equipment name',
+    'status': 'Device status',
+    'startTime': 'Start Time',
+    'totalCount': 'Number of processed substrates',
+    'repairTime': 'Last repair time'
+  },
+  maintainplan: {
+    'searchPlaceholder': 'Please select status',
+    'startTime': 'Start Time',
+    'endTime': 'End Time',
+    'maintenanceOrderNumber': 'Maintenance Plan Order',
+    'maintainStartTime': 'Maintain Start Time',
+    'maintainEndTime': 'Maintain End Time',
+    'lastMaintainStartTime': 'Last Start Time',
+    'lastMaintainEndTime': 'Last End Time',
+    'lastMaintainTime': 'Last Time',
+    'nextMaintainTime': 'Next Time',
+    'equipmentCode': 'Device ID',
+    'maintenancePeriodId': 'Period(Year)',
+    'remark': 'Remarks',
+    'EquipmentGrouping': 'Equipment Grouping',
+    'addDialogTitle': 'Add Maintenance Plan',
+    'editDialogTitle': 'Edit Maintenance Plan',
+    'equipmentId': 'Equipment Name',
+    'status': 'Status',
+    'annex': 'Annex',
+    'maintainWorkerId': 'Maintenance personnel',
+    'lastMaintainWorkerId': 'Last maintenance personnel',
+    'maintainType': 'maintain type',
+    'erpIdentification': 'ERP',
+    'maintainDuration': 'maintainDuration(hour)',
+    'maintainFuncDesc': 'Maintenance Function Description',
+    'placeholderlastMaintainTime': 'Please select last time',
+    'placeholdernextMaintainTime': 'Please select next time',
+    'placeholdermaintenanceOrderNumber': 'Please input Maintenance Plan Order',
+    'placeholdermaintainDuration': 'Please maintain Duration',
+    'placeholdererpIdentification': 'please ERP',
+    'placeholdermaintainStartTime': 'Please select start time',
+    'placeholdermaintainEndTime': 'Please select end time',
+    'placeholdermaintenancePeriodId': 'Please select maintenance period',
+    'placeholderremark': 'Please input remarks',
+    'placeholderstatus': 'Please select status',
+    'placeholdermaintainWorkerId': 'Please select Maintenance personnel',
+    'placeholdermaintainType': 'Please select Maintenance Type',
+    'placeholdermaintainFuncDesc': 'please Maintenance Function Description',
+    'placeholderEquipmentGrouping': 'Please Equipment Grouping',
+    'placeholderequipmentId': 'Please select Equipment'
+  },
+  maintainlog: {
+    'startTime': 'Start Time',
+    'endTime': 'End Time',
+    'maintenanceOrderNumber': 'Maintenance Log No.',
+    'maintainStartTime': 'Start Time',
+    'maintainNextTime': 'Next maintain time',
+    'maintainEndTime': 'End Time',
+    'maintainWorkerId': 'Worker',
+    'equipmentCode': 'Device code',
+    'maintainDuration': 'maintainDuration(hour)',
+    'nextMaintenanceTime': 'Next maintain time',
+    'remark': 'Remarks',
+    'maintenanceDetail': 'Maintain Detail',
+    'annex': 'Annex',
+    'maintainType': 'maintain type',
+    'equipmentId': 'Equipment name',
+    'placeholdermaintainDuration': 'Please maintain Duration',
+    'placeholdermaintainType': 'Please select Maintenance Type',
+    'placeholderequipmentId': 'Please select Equipment',
+    'placeholdermaintenanceOrderNumber': 'Please input Maintenance Order Number',
+    'placeholdermaintainStartTime': 'Please select start time',
+    'placeholdermaintainNextTime': 'Please select next maintain time',
+    'placeholdermaintainEndTime': 'Please select end time',
+    'placeholdermaintainWorkerId': 'Please select Worker',
+    'placeholdermaintenanceDetail': 'Please input Maintain detail',
+    'placeholderremark': 'Please input Remarks',
+    'placeholderactualEndTime': 'Please select Start Time',
+    'placeholderactualStartTime': 'Please select End Time',
+    'equipment': 'EquiPment',
+    'isplan': 'Is Have Maintain Plan',
+    'planAll': 'All',
+    'planNo': 'No Plan',
+    'planYes': 'Have Plan',
+    'maintainlogTime': 'Maintain Log Date'
+  },
+  baseinfo: {
+    'searchPlaceholder': 'Device code or name',
+    'code': 'Equipment type code',
+    'name': 'Equipment type name',
+    'status': 'Equipment status',
+    'remark': 'remarks',
+    'deviceTypeParam': 'Device Param',
+    'deviceTypeEvent': 'Device Event',
+    'deviceTypeAlarm': 'Device Alarm'
+  },
+  baseinfoparam: {
+    'searchPlaceholder': 'Param name or code',
+    'paramId': 'Constant/ Variate ID',
+    'paramName': 'Param name',
+    'paramCode': 'Param Code',
+    'format': 'Param format',
+    'valueType': 'Param value type',
+    'unit': 'Unit',
+    'maxValue': 'Max value',
+    'minValue': 'Min value',
+    'defaultValue': 'Default value',
+    'category': 'Param category',
+    'dataWithPlc': 'data with PLC',
+    'enabled': 'is Enabled',
+    'type': 'Collection parameter type',
+    'note': 'Note',
+    'uploadSpc': 'Upload SPC',
+    'isCollected': 'Is collected',
+    'description': 'Description',
+    'remark': 'Remarks',
+    'addDialogTitle': 'Add Device Param',
+    'editDialogTitle': 'Edit Device Param',
+    'placeholderparamName': 'Please input param name',
+    'placeholderparamId': 'Please input param id',
+    'placeholderparamCode': 'Please input param code',
+    'placeholderformat': 'Please input format',
+    'placeholderValueType': 'Please input value type',
+    'placeholdertype': 'Please input var type',
+    'placeholderunit': 'Please input unit',
+    'placeholderdataWithPlc': 'Please input PLC',
+    'M': 'Material Related Value',
+    'V': 'Process Actual Value',
+    'P': 'Process Set Point',
+    'R': 'Recipe Parameter',
+    'C': 'Consumable Value',
+    'I': 'Interface Related'
+  },
+  baseinfoevent: {
+    'searchPlaceholder': 'Event name or code',
+    'eventId': 'Event ID',
+    'eventCode': 'Event code',
+    'eventName': 'Event name',
+    'enabled': 'Enabled',
+    'category': 'Category',
+    'description': 'Description',
+    'remark': 'Remarks',
+    'addDialogTitle': 'Add Device Param',
+    'editDialogTitle': 'Edit Device Param',
+    'placeholdereventId': 'Please input Event ID',
+    'placeholdereventName': 'Please input Event name',
+    'placeholdereventCode': 'Please input Event code',
+    'placeholdercategory': 'Please input category'
+  },
+  baseinfoalarm: {
+    'searchPlaceholder': 'Alarm name or code',
+    'alarmId': 'Alarm ID',
+    'alarmName': 'Alarm name',
+    'alarmCode': 'Alarm code',
+    'category': 'Category',
+    'description': 'Description',
+    'enabled': 'Enabled',
+    'remark': 'Remarks',
+    'addDialogTitle': 'Add Device Alarm',
+    'editDialogTitle': 'Edit Device Alarm',
+    'placeholderalarmId': 'Please input alarm ID',
+    'placeholderalarmName': 'Please input alarm name',
+    'placeholderalarmCode': 'Please input alarm code',
+    'placeholdercategory': 'Please input alarm type'
+  },
+  eqManagerManage: {
+    'equipmentName': 'Equipment Name',
+    'equipmentCode': 'Equipment Code',
+    'description': 'Description',
+    'worker': 'Operator',
+    'remark': 'Remark',
+    'role': 'Operator Role',
+    roleName: 'roleName'
+  },
+  equipmentParams: {
+    'startAndEndTime': 'Start And End Time',
+    'startTime': 'Start Time',
+    'endTime': 'End Time',
+    'createTime': 'Create Time',
+    'substrateId': 'Substrate Code',
+    'choiceParam': 'Choice Params'
+  },
+  ProcessData: {
+    productInfo: 'Product Info',
+    productName: 'Product Name',
+    processName: 'Process Name',
+    processCode: 'Process Code',
+    processVersion: 'Process Version',
+    specifications: 'Specifications',
+    equipmentName: 'Equipment Name',
+    qualifiedRate: 'Qualified Rate',
+    analysis: 'Analysis',
+    contrast: 'Contrast',
+    comparisonOfInfluencingFactors: 'Comparison of influencing factors',
+    top: 'Top',
+    bottom: 'Bottom',
+    bottomHigh: 'Bottom Grid Height',
+    speed: 'Transmission Speed',
+    highPressureFan: 'High Pressure Fan',
+    lowPressureFan: 'Low Pressure Fan',
+    current: 'Current',
+    selfChecking: 'Self-checking',
+    manualChecking: 'Manual-checking',
+    powerOffPackaging: 'Power Off Packaging',
+    parameterName: 'Parameter Name',
+    parameterCode: 'Parameter Code',
+    nowValue: 'Now Value',
+    standardValue: 'Standard Value'
+  },
+  other: {}
+}
diff --git a/src/lang/i18n/en/module/factory.js b/src/lang/i18n/en/module/factory.js
new file mode 100644
index 0000000..3aedb6f
--- /dev/null
+++ b/src/lang/i18n/en/module/factory.js
@@ -0,0 +1,55 @@
+/*
+ * @Author: gtz
+ * @Date: 2021-03-21 17:22:47
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-04-06 13:55:30
+ * @Description: file content
+ */
+
+export default {
+  abnormalAlarm: {
+    exceptionAlarm: 'Exception Alarm',
+    alarmTime: 'Alarm Time',
+    alarmType: 'Alarm Type',
+    name: 'Alarm Nmae',
+    alarmLevel: 'Alarm Level',
+    alarmReason: 'Alarm Content',
+    messagePushMode: 'Message Push Mode',
+    team: 'Executive Team',
+    isDeal: 'Is Handled',
+    detail: 'Detail',
+    deal: 'Handle',
+    alarmHandling: 'Alarm Handle',
+    alarmSource: 'Alarm Source',
+    alarmCode: 'Alarm Code',
+    alarmContent: 'Alarm Content',
+    status: 'Status',
+    handler: 'Handler',
+    description: 'Description',
+    annex: 'Annex',
+    timeQuantum: 'Date Quantum',
+    processingComplete: 'Processing Complete',
+    inHand: 'In Hand',
+    waitingProcess: 'Waiting Process',
+    all: 'All',
+    warn: 'Warn',
+    alarm: 'Alarm',
+    breakdown: 'Breakdown',
+    email: 'email',
+    wechat: 'wechat',
+    equipmentName: 'Equipment Name',
+    alarmStatus: 'Alarm Status',
+    alarmInfo: 'Alarm Info',
+    alarmStartTime: 'Alarm Start Time',
+    alarmEndTime: 'Alarm End Time',
+    EquipmentAlarmProcessing: 'Equipment Alarm Processing'
+  },
+  visual: {
+    showLocation: 'Show Location Info',
+    location: 'Location',
+    box: 'Box',
+    visualSub: 'Substrate In Process:',
+    locationSub: 'Stock Substrate:'
+  }
+}
+
diff --git a/src/lang/i18n/en/module/formManage.js b/src/lang/i18n/en/module/formManage.js
new file mode 100644
index 0000000..d3c2014
--- /dev/null
+++ b/src/lang/i18n/en/module/formManage.js
@@ -0,0 +1,16 @@
+/*
+ * @Author: gtz
+ * @Date: 2021-04-01 09:19:36
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-04-01 10:20:09
+ * @Description: file content
+ */
+
+export default {
+  formSort: {
+    name: 'Form Sorts Name',
+    addDialogTitle: 'Add Form Sort',
+    editDialogTitle: 'Edit Form Sort'
+  }
+}
+
diff --git a/src/lang/i18n/en/module/index.js b/src/lang/i18n/en/module/index.js
new file mode 100644
index 0000000..c0d70e8
--- /dev/null
+++ b/src/lang/i18n/en/module/index.js
@@ -0,0 +1,33 @@
+/*
+ * @Author: gtz
+ * @Date: 2021-03-04 16:12:46
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-04-22 19:49:39
+ * @Description: file content
+ */
+
+import basicData from './basicData'
+import packingManage from './packing-manage'
+import teamManager from './teamManager'
+import equipmentManager from './equipmentManager'
+import orderManage from './orderManage'
+import art from './art'
+import materialManager from './materialManager'
+import quality from './quality'
+import factory from './factory'
+import formManage from './formManage'
+import report from './report'
+
+export default {
+  basicData,
+  packingManage,
+  teamManager,
+  equipmentManager,
+  orderManage,
+  art,
+  materialManager,
+  quality,
+  factory,
+  formManage,
+  report
+}
diff --git a/src/lang/i18n/en/module/materialManager.js b/src/lang/i18n/en/module/materialManager.js
new file mode 100644
index 0000000..fc501da
--- /dev/null
+++ b/src/lang/i18n/en/module/materialManager.js
@@ -0,0 +1,90 @@
+/*
+ * @Author: gtz
+ * @Date: 2021-03-08 12:02:22
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-05-25 16:42:56
+ * @Description: file content
+ */
+export default {
+  refluelling: {
+    'index': 'No',
+    'materialDateCode': 'Batch number',
+    'materialDateName': 'Batch name',
+    'replaceTime': 'Refueling time',
+    'type': 'Refueling Type',
+    'materialCode': 'Material code',
+    'materialName': 'Material name',
+    'source': 'Data Sources',
+    'equipmentName': 'Equipment name',
+    'operator': 'Operator',
+    'remark': 'Reason',
+    'operation': 'Operation',
+    'placeholderSearch': 'Batch/Material Code/Name',
+    'placeholderbatchnumber': 'Batch number cannot be empty',
+    'placeholderoperator': 'Operator cannot be empty',
+    'placeholdertime': 'Refuelling time cannot be empty ',
+    'placeholderEquipment': 'Equipment cannot be empty',
+    'loading': 'Loading',
+    'unloading': 'Unloading'
+  },
+  materialbom: {
+    'index': 'No',
+    'bomcode': 'Bom coding',
+    'name': 'Bom',
+    'createTime': 'creation time',
+    'remark': 'Remarks',
+    'operation': 'Operation',
+    'placeholderbomName': 'Bom name cannot be empty',
+    'placeholderbomcode': 'Bom coding cannot be empty',
+    'subtitle': 'BOM detail',
+    'code': 'Material Code',
+    'detailname': 'Material Name',
+    'quantity': 'Quantity',
+    'unit': 'Material Unit',
+    'addDialogTitle': 'Add Bom list',
+    'editDialogTitle': 'Edit Bom list',
+    'placeholderunit': 'Unit cannot be empty'
+  },
+  materialbatch: {
+    'placeholderkeywords': 'Batch name/code/Material name',
+    'index': 'No',
+    'createTime': 'creation time',
+    'externalCode': 'Batch number',
+    'name': 'Batch name',
+    'materialCode': 'Material coding',
+    'materialName': 'Material name',
+    'remark': 'Remarks',
+    'operation': 'Operation',
+    'placeholderbatchnumber': 'Batch number cannot be empty',
+    'placeholderbatchname': 'Batch name cannot be empty'
+  },
+  report: {
+    'placeholderkeywords': 'please substrate code ',
+    'Keyword': 'Substrate code',
+    'eqName': 'Equipment name',
+    'code': 'Substrate code'
+  },
+  currentConsume: {
+    'index': 'No',
+    'eqName': 'Equipment name',
+    'materialName': 'Material name',
+    'materialCode': 'Material code',
+    'materialBatch': 'Material batch code',
+    'beginTime': 'Material start time',
+    'materialNowCon': 'Current material consumption',
+    'MaterialConThr': 'Material consumption threshold',
+    'remark': 'Remark'
+  },
+  historyConsume: {
+    'index': 'No',
+    'eqName': 'Equipment name',
+    'materialName': 'Material name',
+    'materialCode': 'Material code',
+    'materialBatch': 'Material batch code',
+    'beginTime': 'Material start time',
+    'endTime': 'Material end time',
+    'materialNowCon': 'Total material consumption',
+    'MaterialConThr': 'Material consumption threshold',
+    'remark': 'Remark'
+  }
+}
diff --git a/src/lang/i18n/en/module/orderManage.js b/src/lang/i18n/en/module/orderManage.js
new file mode 100644
index 0000000..8974d12
--- /dev/null
+++ b/src/lang/i18n/en/module/orderManage.js
@@ -0,0 +1,183 @@
+/*
+ * @Author: zwq
+ * @Date: 2021-03-06 16:30:28
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-21 17:34:04
+ * @Description:
+ */
+export default {
+  order: {
+    keyword: 'Key Word',
+    NameOrCode: 'Name Or Code',
+    StartTime: 'Start Time',
+    EndTime: 'End Time',
+    To: 'To',
+    ActualStartTime: 'Actual Start Time',
+    createTime: 'Create Time',
+    WorkOrderName: 'Work Order Name',
+    WorkOrderCode: 'Work Order Code',
+    WorkOrderType: 'Work Order Type',
+    WorkOrderStartTime: 'Work Order Start Time',
+    OrderName: 'Order Name',
+    OrderCode: 'Order Code',
+    OrderType: 'Order Type',
+    CompletionTime: 'Completion Time',
+    IssueOrderTime: 'Issue Order Time',
+    PlanningStartTime: 'Planning Start Time',
+    PlanningEndTime: 'Planning End Time',
+    DeliveryTime: 'Delivery Time',
+    priority: 'Priority',
+    WorkOrderInitiation: 'Work Order Initiation',
+    initiateTime: 'Initiate Time',
+    source: 'Source',
+    status: 'Status',
+    unit: 'Unit',
+    PlannedProcessingVolume: 'Target Quantity',
+    ActualTargetQuantity: 'Actual Target Quantity',
+    ActualFinishedProduct: 'Actual Finished Product',
+    NumberOfDamages: 'Number Of Damages',
+    workOrderDetail: 'work Order Detail',
+    Description: 'Description',
+    Remarks: 'Remarks',
+    ProductProcess: 'Technological Process',
+    powerClass: 'Power Class',
+    ProductName: 'Product Name',
+    ProductType: 'Product Type',
+    destination: 'Destination',
+    reason: 'Reason',
+    UseQuantityPlate: 'Use Quantity Substrate',
+    DamageQuantityPlate: 'Damage Quantity Substrate',
+    EquipmentName: 'Equipment Name',
+    PowerConsumption: 'Power Consumption',
+    WorkOrderProgress: 'Work order progress',
+    energyConsumption: 'energy consumption of equipment:',
+    energyConsumptionChart: 'power consumption diagram of equipment',
+    energyConsumptionTable: 'electricity consumption table of equipment',
+    workOrderVerificationResult: 'work Order Verification Result',
+    deviceDetection: 'Device Detection',
+    process: 'Process',
+    useMaterial: 'Use Material',
+    basePlate: 'Base Substrate',
+    basePlateCode: 'Substrate Code',
+    basePlateId: 'Substrate Id',
+    team: 'Team',
+    customer: 'Customer',
+    detail: 'Detail',
+    workOrderInfo: 'work Order Info',
+    OrderReportInfo: 'Order Report Info',
+    executionTime: 'Start Time',
+    completQuantity: 'Complet Quantity',
+    initiateWorkOrder: 'Initiate Work Order',
+    finishTime: 'Finish Time',
+    reportingTime: 'Reporting Time',
+    workReportMethod: 'Work Report Method',
+    goodQuantity: 'Good Quantity',
+    scrapQuantity: 'Scrap Quantity',
+    scrapId: 'Scrap Id',
+    scrapLevel: 'Scrap Level',
+    packageNumber: 'Package Number',
+    SAPMaterial: 'SAP Material',
+    power: 'Power',
+    fileName: 'File Name',
+    path: 'Path',
+    processCode: 'Process Code',
+    deviceInfo: 'Device Info',
+    loadingTime: 'Loading Time',
+    unLoadingTime: 'UnLoading Time',
+    materialBom: 'Bom',
+    materialBomMessage: 'This work order is not bound with BOM',
+    activation: 'Activation',
+    warnMessage: 'Issued order cannot be deleted'
+  },
+  track: {
+    event: 'Event',
+    parameterName: 'Parameter Name',
+    parameterValue: 'Parameter Value',
+    occurTime: 'Occur Time',
+    ProcessTime: 'Process Time'
+  },
+  packingTags: {
+    moduleId: 'Module Id',
+    UnloadingTime: 'Unloading Time',
+    UnloadingEquipment: 'Unloading Equipment',
+    moduleQuantity: 'Module Quantity',
+    PrintingTime: 'Printing Time',
+    plateType: 'Substrate Type',
+    plateGrade: 'Substrate Grade',
+    name: 'Name',
+    opration: 'Opration',
+    code: 'Code',
+    startTime: 'Start Time',
+    completeTime: 'Complete Time',
+    power: 'Power',
+    grade: 'Grade',
+    oneDimensionalCode: 'Bar Code'
+  },
+  substrateBatch: {
+    batchCode: 'Batch Code',
+    batchName: 'Batch Name',
+    propertyName: 'Property Name',
+    propertyValue: 'Property Value'
+  },
+  VerifyTable: {
+    EquipmentCode: 'Equipment Code',
+    equipmentAbbreviation: 'Equipment Abbreviation',
+    EquipmentFormula: 'Equipment Formula',
+    ProcessFormulaRequir: 'Process Formula Requir',
+    IsSame: 'IsSame',
+    materielName: 'Materiel Name',
+    materielCode: 'Materiel Code',
+    Spec: 'Spec',
+    teamName: 'Team Name',
+    teamLeader: 'Team Leader',
+    number: 'Number',
+    professional: 'Professional',
+    workingHours: 'Working Hours'
+  },
+  orderDetail: {
+    issueTime: 'Work Order Generation Time',
+    completionSchedule: 'Completion Schedule',
+    issuedQuantity: 'Issued Quantity',
+    remainingPlannedQuantity: 'Remaining Planned Quantity'
+  },
+  workOrderDetail: {
+    workOrderSource: 'Work Order Source',
+    processingTechnology: 'Processing Technology'
+  },
+  powerClassification: {
+    parentClass: 'Parent Class',
+    typeName: 'Type Name',
+    typeCode: 'Type Code',
+    Remarks: 'Remarks'
+  },
+  erpToMes: {
+    erpToMesMaterial: 'Erp To Mes Material',
+    erpToMesMaterialBom: 'Erp To Mes Material Bom',
+    erpToMesOrder: 'Erp To Mes Order',
+    batchNumber: 'Batch Number',
+    materialsCode: 'Materials Code',
+    materialsName: 'Materials Name',
+    quantity: 'Quantity',
+    unit: 'Unit',
+    bomContent: 'BOM Content',
+    craftCode: 'Craft Code',
+    craftName: 'Craft Name',
+    materialsBomCode: 'Materials Bom Code',
+    materialsBomName: 'Materials Bom Name',
+    substrateBatch: 'Substrate Batch',
+    customerCode: '	Customer Code',
+    customerName: 'Customer Name',
+    orderCode: 'Order Code',
+    orderName: 'Order Name',
+    packagingBoxId: 'Packaging Box Id',
+    reportTime: 'Report Time',
+    mfoCode: 'mfo Code'
+  },
+  consumption: {
+    key: 'Key',
+    workOrderId: 'Work Order Id',
+    workOrderStatus: 'Work Order Status',
+    power: 'Power',
+    equipmentName: 'Equipment Name'
+  }
+}
diff --git a/src/lang/i18n/en/module/packing-manage.js b/src/lang/i18n/en/module/packing-manage.js
new file mode 100644
index 0000000..2192673
--- /dev/null
+++ b/src/lang/i18n/en/module/packing-manage.js
@@ -0,0 +1,34 @@
+/*
+ * @Author: zwq
+ * @Date: 2021-04-07 14:05:04
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-04-28 13:56:48
+ * @Description:
+ */
+export default {
+  PackingList: {
+    PackingTime: 'Packing Time',
+    WorkOrderNo: 'Work Order No',
+    SubstrateNumber: 'Substrate Number',
+    ModuleLevel: 'Module Level',
+    QualityGrade: 'Quality Grade',
+    Detail: 'Detail',
+    printNumber: 'Print Number',
+    EntryTime: 'Entry Time'
+  },
+  labelTemplate: {
+    placeholderSearch: 'Label Name or Code',
+    addTime: 'Add Time',
+    labelCode: 'Label Code',
+    labelName: 'Label Name',
+    labelType: 'Label Type',
+    labelContent: 'Label Content',
+    remark: 'Remark',
+    levelLabel: 'Level Label',
+    moduleLabel: 'Module Label',
+    custom: 'Custom',
+    templateDesign: 'Template Design',
+    templatePreview: 'Template Preview',
+    placeholderLength: 'At least 3 characters in length'
+  }
+}
diff --git a/src/lang/i18n/en/module/quality.js b/src/lang/i18n/en/module/quality.js
new file mode 100644
index 0000000..e7e580b
--- /dev/null
+++ b/src/lang/i18n/en/module/quality.js
@@ -0,0 +1,94 @@
+/*
+ * @Date: 2021-03-13 13:49:16
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-04-15 09:59:15
+ * @FilePath: \basic-admin\src\lang\i18n\en\module\quality.js
+ * @Description:
+ */
+export default {
+  plan: {
+    searchPlaceholder: 'Detection plan name',
+    searchPlaceholderArea: 'Area',
+    placeholderStartTime: 'Start Time',
+    placeholderEndTime: 'End time',
+    testPlaneCode: 'Detection Plan Code',
+    testPlaneName: 'Detection Plan Name',
+    testPlaneContent: 'Detection Content',
+    areaName: 'Area name',
+    areaCode: 'Area code',
+    detectionRateDicId: 'Detection Rate',
+    isIssued: 'Is issued',
+    issuedTime: 'Issued time',
+    operatorId: 'Operator',
+    remark: 'Remarks',
+    addDialogTitle: 'Add Plan',
+    editDialogTitle: 'Edit Plan',
+    sendDialogTitle: 'Send Plan',
+    notEmpty: 'Value connot be empty',
+    sendPlanHint: 'Send the Detection plan?',
+    distributionAreaName: 'Distribution Destination'
+  },
+  planDetail: {
+    title: 'Detection plan param detail',
+    name: 'Param name',
+    references: 'Reference Value',
+    remark: 'Remarks',
+    updatedTime: 'Update Time',
+    notEmpty: 'Value connot be empty',
+    equipmentName: 'Equipment Name',
+    testFrequency: 'Test Frequency',
+    testSystem: 'Test System',
+    description: 'Description'
+  },
+  planSend: {},
+  offlineDetec: {
+    EquipmentName: 'Equipment Name',
+    EquipmentCode: 'Equipment Code',
+    DetectionArea: 'Detection Area',
+    EquipmentFunction: 'Equipment Function',
+    DetecParamCode: 'DetecParam Code',
+    maxValue: 'max Value',
+    minValue: 'min Value',
+    avgValue: 'avg Value',
+    unit: 'unit',
+    uploadSpc: 'upload Spc',
+    SubstrateId: 'Substrate Id',
+    DetecTime: 'Detec Time',
+    DetecParam: 'Detec Param',
+    DetecValue: 'Detec Value',
+    DetecStaff: 'Detec Staff',
+    getEquipmetId: 'Please select the device!'
+  },
+  spc: {
+    error: 'SPC system did not exit correctly, please go to SPC system page manually to exit',
+    tip: 'SPC system opened on new tab'
+  },
+  ScrapInfo: {
+    PlateId: 'Substrate Id',
+    TimePeriod: 'Time Period',
+    StartTime: 'Start Time',
+    EndTime: 'End Time',
+    To: 'To',
+    source: 'Source',
+    wasteGrade: 'Waste Grade',
+    RegisterPerson: 'Register Person',
+    updateTime: 'Update Time',
+    cause: 'Cause',
+    causeCode: 'Cause Code',
+    WasteName: 'Waste Name',
+    WasteCode: 'Waste Code',
+    remark: 'Remarks',
+    scrapType: 'Scrap Type',
+    scrapTypeCode: 'Scrap Type Code',
+    name: 'equipment name',
+    entryType: 'Manual/Automatic',
+    automatic: 'Automatic',
+    manual: 'Manual',
+    workOrderId: 'workOrderId',
+    count: 'Count',
+    title: 'Scarp Category',
+    subTitle: 'Scrap Category Statistics',
+    completeWaste: 'Complete Waste',
+    CanBeUsedAfterProcessing: 'Can be used after processing'
+  }
+}
diff --git a/src/lang/i18n/en/module/report.js b/src/lang/i18n/en/module/report.js
new file mode 100644
index 0000000..5db2116
--- /dev/null
+++ b/src/lang/i18n/en/module/report.js
@@ -0,0 +1,19 @@
+/*
+ * @Author: gtz
+ * @Date: 2021-04-22 19:48:46
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-04-23 14:36:08
+ * @Description: file content
+ */
+
+export default {
+  reportList: {
+    reportName: 'Report name',
+    reportSort: 'Report Sort',
+    createTime: 'Create Date',
+    operation: 'Operation'
+  },
+  reportSort: {
+    all: 'All'
+  }
+}
diff --git a/src/lang/i18n/en/module/teamManager.js b/src/lang/i18n/en/module/teamManager.js
new file mode 100644
index 0000000..20c3f5e
--- /dev/null
+++ b/src/lang/i18n/en/module/teamManager.js
@@ -0,0 +1,72 @@
+/*
+ * @Author: gtz
+ * @Date: 2021-03-04 16:13:51
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-14 10:59:33
+ * @Description: file content
+ */
+export default {
+  Handover: {
+    alertTitle: '[Warm Prompt]',
+    alertListContent: 'Are you sure you want to delete the team handover record?',
+    alertPlanContent: 'Are you sure you want to delete this process?',
+    index: 'index',
+    TeamName: 'Team Name',
+    TeamLeader: 'Team Leader',
+    WorkingHours: 'Working Hours',
+    OffWorkTime: 'Off Work Time',
+    LastTeamName: 'Last Team Name',
+    Keyword: 'Keyword',
+    HandoverTme: 'Handover Time',
+    HandoverStatus: 'Handover Status',
+    HandoverWait: 'Waiting',
+    HandoverCom: 'Complete',
+    TeamWorkStatus: 'Team Work Status',
+    all: 'All',
+    working: 'Working',
+    offduty: 'Off Duty',
+    CreateTime: 'Create Time',
+    PlanWorkingHours: 'Plan Working Hours',
+    PlannedHandoverTime: 'Planned Handover Time',
+    PreviousTeamLeader: 'Previous Team Leader',
+    Remark: 'Remark',
+    Detail: 'Detail',
+    Placeholder: 'Team Name Or Team Leader',
+    Operation: 'Operation',
+    StartTime: 'Start Time',
+    EndTime: 'End Time',
+    To: 'To'
+  },
+  HandoverAdd: {
+    SelectAll: 'Select All',
+    TeamPlanFill: 'Team Plan Fill',
+    FillInShift: 'Fill In Shift',
+    MajorSelection: 'Major Selection',
+    SelectionOfTeamMembers: 'Selection Of Team Members',
+    Placeholder: 'Name Or Code',
+    planWorkerName: 'Plan Worker Name',
+    planProfessionName: 'Plan Skill Name',
+    telephone: 'Telephone',
+    workshop: 'Work Station',
+    onDuty: 'onDuty',
+    HandoverTeam: 'Handover Team',
+    HandoverTeamLeader: 'Handover Team Leader',
+    PlanTeam: 'Plan Team',
+    PlanTeamLeader: 'Plan Team Leader'
+  },
+  HandoverDrawer: {
+    title: 'Off Duty Operation',
+    TeamCommutingRecord: 'Team Commuting Record',
+    OffHours: 'Off Hours'
+  },
+  showLog: {
+    content: 'Content',
+    type: 'Type',
+    title: 'Title',
+    teamEventLogId: 'Team Event Log Id',
+    happenTime: 'Happen Time',
+    leave: 'Leave',
+    absenceFromDuty: 'Absence From Duty',
+    equipmentFailure: 'Equipment Failure'
+  }
+}
diff --git a/src/lang/i18n/zh/btn/index.js b/src/lang/i18n/zh/btn/index.js
new file mode 100644
index 0000000..237f4d0
--- /dev/null
+++ b/src/lang/i18n/zh/btn/index.js
@@ -0,0 +1,94 @@
+/*
+ * @Author: gtz
+ * @Date: 2021-03-04 16:19:14
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-13 20:27:32
+ * @Description: file content
+ */
+
+export default {
+  start: {
+    zh: '执行',
+    en: 'Start Work'
+  },
+  see: {
+    zh: '查看',
+    en: 'See'
+  },
+  search: {
+    zh: '查询',
+    en: 'Search'
+  },
+  edit: {
+    zh: '编辑',
+    en: 'Edit'
+  },
+  delete: {
+    zh: '删除',
+    en: 'Delete'
+  },
+  add: {
+    zh: '新增',
+    en: 'Add'
+  },
+  cancel: {
+    zh: '取 消',
+    en: 'Cancel'
+  },
+  confirm: {
+    zh: '确 定',
+    en: 'Confirm'
+  },
+  detail: {
+    zh: '详情',
+    en: 'Detail'
+  },
+  reset: {
+    zh: '重置',
+    en: 'Reset'
+  },
+  submit: {
+    zh: '提交',
+    en: 'Submit'
+  },
+  save: {
+    zh: '保存',
+    en: 'Save'
+  },
+  upload: {
+    zh: '上传',
+    en: 'Upload'
+  },
+  uploadpic: {
+    zh: '上传图片',
+    en: 'Upload Picture'
+  },
+  back: {
+    zh: '返回',
+    en: 'Back'
+  },
+  checkLog: {
+    zh: '查看日志',
+    en: 'Check Log'
+  },
+  goOffWork: {
+    zh: '结束值班',
+    en: 'Go Off Work'
+  },
+  adddetail: {
+    zh: '添加明细',
+    en: 'Add Detail'
+  },
+  addattr: {
+    zh: '添加属性',
+    en: 'Add Attribute'
+  },
+  addgroup: {
+    zh: '添加',
+    en: 'Add Members'
+  },
+  download: {
+    zh: '下载',
+    en: 'download'
+  }
+}
diff --git a/src/lang/i18n/zh/module/art.js b/src/lang/i18n/zh/module/art.js
new file mode 100644
index 0000000..4e75646
--- /dev/null
+++ b/src/lang/i18n/zh/module/art.js
@@ -0,0 +1,57 @@
+/*
+ * @Author: gtz
+ * @Date: 2021-03-08 09:46:00
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-04-15 19:35:00
+ * @Description: file content
+ */
+
+export default {
+  artName: '工艺名称',
+  status: '状态',
+  createTime: '添加时间',
+  artCode: '工艺编码',
+  remark: '备注',
+  process: '流程',
+  processName: '工序',
+  eqName: '设备名称',
+  recipeName: '配方名称',
+  materialBOM: '物料BOM',
+  artType: '工艺类型',
+  description: '描述',
+  or: '或',
+  on: '启用',
+  off: '禁用',
+  operation: '操作',
+  IsDisabled: '是否启用',
+  key: '关键字',
+  input: '请输入',
+  confirm: '确认',
+  cancel: '取消',
+  delTip: '您确定要删除该条工艺吗？',
+  tip: '温馨提示',
+  delSucc: '删除成功！',
+  externalCode: '工艺编码',
+  substrateType: '基板类型',
+  artBOM: '工艺BOM',
+  notNull: '不能为空',
+  selectNotNull: '请至少选择一个',
+  lengthRule: '长度在3个字符以上',
+  nodeNull: '工艺节点为空，您确定要保存吗？',
+  hasNull: '设备、配方和工艺类型不能为空或某一工序下没有添加设备，请检查！',
+  choiceEqError: '请先选择设备！',
+  changeTipHeaderDes: '是否将此描述信息应用于',
+  changeTipHeaderRemark: '是否将此备注信息应用于',
+  changeTipFooter: '工序下所有设备',
+  NotSameProcess: '不能选择相同的工序!',
+  sameEqError: '不能选择相同的设备!',
+  processList: {
+    processName: '工序名称',
+    processEq: '工序设备',
+    description: '描述',
+    addProcess: '添加一道工序',
+    type: '类型',
+    equipment: '设备',
+    buffer: '缓存区'
+  }
+}
diff --git a/src/lang/i18n/zh/module/basicData.js b/src/lang/i18n/zh/module/basicData.js
new file mode 100644
index 0000000..a5bf481
--- /dev/null
+++ b/src/lang/i18n/zh/module/basicData.js
@@ -0,0 +1,276 @@
+/*
+ * @Author: gtz
+ * @Date: 2021-03-04 16:13:51
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-07-21 09:58:59
+ * @Description: file content
+ */
+export default {
+  visual: {
+    addNow: '请先完成当前点位添加！',
+    choiseSucc: '选择成功！',
+    choiseError: '不能选择相同的设备！',
+    unSelect: '请选择设备！',
+    changeLine: '请先选择设备或删除未选择设备的点位！',
+    areaName: '区域名',
+    annex: '附件',
+    locationInformation: '位置点信息',
+    runningTrack: '运行轨迹',
+    tip: '点击下方图片选点，选点后在弹出框内选择设备，新增点位时未选择设备无法进行下一个选点，若想调整点位顺序可拖动图片下方的标签到你想调整的位置,点击确定提交点位信息，点击重置将点位信息重置到打开弹出框时的状态',
+    routeTip: '，选择框内选择路线可对当前区域不同路线进行编辑，点击新增路线填写信息可对当前区域新增一条运行轨迹',
+    help: '帮助',
+    baseRouteName: '默认轨迹名称',
+    oneLineTip: '至少要有一条运行轨迹！',
+    editLineName: '运行轨迹名',
+    oneLineNameTip: '你不能输入重复的轨迹名!',
+    lineNameNotNullTip: '轨迹名不能为空!',
+    keyword: '关键字',
+    success: '操作成功',
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    Tips: '提示',
+    TipsBefore: '确定删除',
+    Description: '描述',
+    Remarks: '备注',
+    Or: '或',
+    Yes: '是',
+    No: '否',
+    AttributeName: '属性名',
+    AttributeValue: '属性值',
+    EnglishName: '英文名称',
+    Abbreviation: '简称',
+    Specs: '规格',
+    Manufacturer: '制造商',
+    productionTime: '生产日期',
+    enterTime: '进厂日期',
+    debugTime: '调试日期',
+    CurrentState: '当前状态',
+    uploadInfo: '发布资料',
+    unit: '单位',
+    AttributeCode: '属性编码',
+    stock: '库位信息',
+    isStock: '是否存在库位',
+    editLocation: '编辑库位点',
+    location: '库位',
+    locationTip: '点击下方图片选点，选点后在弹出框内选择库位，新增点位时未选择库位无法进行下一个选点，若想调整点位顺序可拖动图片下方的标签到你想调整的位置,点击确定提交点位信息，点击重置将点位信息重置到打开弹出框时的状态',
+    locationInfo: '库位点信息'
+  },
+  factory: {
+    placeholderName: '名称或编码',
+    createTime: '添加时间',
+    FactoryName: '工厂名称',
+    FactoryCode: '工厂编码',
+    Address: '地址'
+  },
+  productLine: {
+    placeholderName: '产线名称',
+    ProductionLineCode: '产线编码'
+  },
+  workSection: {
+    SectionName: '工段名称',
+    WorkSectionCoding: '工段编码'
+  },
+  group: {
+    TeamName: '班组名称',
+    NumberOfTeams: '班组人数',
+    GroupLeader: '组长',
+    TeamStatus: '班组状态'
+  },
+  major: {
+    ProfessionalName: '专业名称',
+    ProfessionalCoding: '专业编码'
+  },
+  staff: {
+    Name: '姓名',
+    EmployeeID: '员工号',
+    Gender: '性别',
+    EntryTime: '入职时间',
+    Telephone: '联系电话',
+    Email: '邮箱',
+    Wechat: '微信号',
+    Profession: '专业',
+    Workshop: '所属车间',
+    onDuty: '是否在岗',
+    role: '员工角色'
+  },
+  customer: {
+    CustomerName: '客户名称',
+    CustomerCode: '客户编码',
+    ContactPerson: '联系人',
+    Telephone: '联系电话',
+    Address: '地址',
+    format: '格式不正确'
+  },
+  supplier: {
+    SupplierName: '供应商名称',
+    SupplierCode: '供应商编码',
+    ContactPerson: '联系人',
+    Telephone: '联系电话',
+    Address: '地址'
+  },
+  material: {
+    MaterialName: '物料名称',
+    MaterialCoding: '物料编码',
+    MaterialType: '物料类型'
+  },
+  materialsType: {
+    TypeCode: '类型编码',
+    TypeName: '类型名称'
+  },
+  alarmManagement: {
+    AlarmCode: '报警编码',
+    AlarmType: '报警类型',
+    AlarmLevel: '报警级别',
+    AlarmName: '报警名称',
+    AlarmContent: '报警内容',
+    AlarmTypeCode: '报警类型编码',
+    LevelCode: '级别编码'
+  },
+  cache: {
+    CacheCode: '缓存区编码',
+    CacheName: '缓存区名称',
+    StockNumber: '库位数量',
+    AreaNumber: '区域数量',
+    AreaCode: '区域编码',
+    AreaName: '区域名称',
+    Shelf: '货架',
+    ManageShelves: '管理货架',
+    ShelfCode: '货架编码',
+    ShelfName: '货架名称',
+    ShelfNumber: '货架数量',
+    StorageQuantity: '存储数量',
+    Location: '货位',
+    ManageLocation: '管理货位',
+    LocationCode: '库位编码',
+    LocationName: '库位名称',
+    anotherName: '别名',
+    place: '位置',
+    addCacheArea: '添加区域'
+  },
+  storageBox: {
+    name: '名称',
+    code: '编码',
+    alias: '别名',
+    StorageQuantity: '存储数量',
+    status: '状态',
+    PositionDetail: '位置详情',
+    remark: '备注',
+    PositionNo: '位置序号',
+    PositionCode: '位置编码',
+    PositionCodeAlias: '位置编码别名'
+  },
+  equipment: {
+    EquipmentName: '设备名称',
+    EquipmentCode: '设备编码',
+    EquipmentType: '设备类型',
+    EquipmentGrouping: '设备分组',
+    groupName: '分组名称',
+    groupCode: '分组编码',
+    FunctionDescription: '功能描述',
+    EquipmentTypeAlarm: '设备类型报警',
+    SetAlarm: '设置报警',
+    DebugPeriod: '调试时间',
+    intellectualProperty: '知识产权',
+    rangeNumber: '范围号',
+    E10Status: 'E10状态',
+    activiation: '是否计算稼动率',
+    communication: '是否通讯',
+    equipmentImg: '设备图片',
+    equipmentInfo: '设备资料',
+    EquipmentTypeName: '设备类型名称',
+    EquipmentTypeCode: '设备类型编码',
+    EquipmentTypeAlarmName: '设备报警名称',
+    EquipmentTypeAlarmCode: '设备报警编码',
+    parentName: '父类',
+    RepairTypeCode: '维修类型编码',
+    RepairTypeName: '维修类型名称',
+    PeriodCode: '周期编码',
+    maintenancePeriod: '保养周期',
+    SparepartCode: '备件编码',
+    SparepartName: '备件名称',
+    SparepartModel: '备件型号',
+    WiredEquipment: '连线名称',
+    WiredCode: '编码',
+    connectUpperDevice: '连接上端设备',
+    connectLowerDevice: '连接下端设备',
+    controlStatus: '控制状态',
+    plcVersion: 'PLC 版本',
+    eapVersion: 'EAP 服务版本',
+    maintenanceCycle: '保养周期(年)',
+    maintenanceTime: '保养持续时间(小时)'
+  },
+  equipmentDetectInfo: {
+    code: '编码',
+    equipmentDetectSystemName: '检测系统名称',
+    equipmentDetectSystemAbbr: '检测系统缩写',
+    DetectionArea: '检测区域',
+    IssueArea: '下发区域',
+    AddEquipment: '添加设备',
+    EquipmentFunction: '设备功能',
+    TestParameterName: '测量参数名',
+    ReferenceValue: '参考值',
+    IssueOrNot: '是否下发',
+    TestFrequency: '测量频率',
+    TestSystem: '测量系统'
+  },
+  ScrapInfo: {
+    PlateId: '基板ID',
+    TimePeriod: '时间段',
+    StartTime: '开始日期',
+    EndTime: '结束日期',
+    To: '至',
+    source: '来源',
+    wasteGrade: '废品等级',
+    RegisterPerson: '登记人',
+    updateTime: '登记时间',
+    cause: '报废原因',
+    causeCode: '报废原因编码',
+    WasteName: '废品报废名称',
+    WasteCode: '废品报废编码',
+    remark: '备注',
+    scrapType: '报废类型',
+    scrapTypeCode: '报废类型编码',
+    name: '设备名称',
+    entryType: '手动/自动',
+    automatic: '自动',
+    manual: '手动',
+    workOrderId: '工单名称'
+  },
+  productPool: {
+    productName: '产品名称',
+    productCode: '产品编码'
+  },
+  dataDictionary: {
+    list: '列表',
+    dataDictionaryName: '字典名称',
+    dataDictionaryCode: '字典编码'
+  },
+  knowledge: {
+    time: '时间段',
+    title: '标题',
+    endTime: '结束时间',
+    startTime: '开始时间',
+    To: '至',
+    content: '内容',
+    annex: '附件'
+  },
+  StateConfig: {
+    status: '状态',
+    DisplayColor: '显示颜色',
+    Twinkle: '闪烁提醒'
+  },
+  CodeRules: {
+    RuleName: '规则名称',
+    RuleCode: '规则编码',
+    manageProperty: '管理属性',
+    Property: '属性',
+    PropertyCode: '属性编码',
+    PropertyName: '属性名称',
+    Length: '长度',
+    order: '顺序'
+  },
+  EquipmentScrapGrade: {
+    keyword: '名称',
+    ScrapGrade: '废片等级'
+  }
+}
diff --git a/src/lang/i18n/zh/module/equipmentManager.js b/src/lang/i18n/zh/module/equipmentManager.js
new file mode 100644
index 0000000..0b207b2
--- /dev/null
+++ b/src/lang/i18n/zh/module/equipmentManager.js
@@ -0,0 +1,384 @@
+/*
+ * @Date: 2021-03-05 10:04:37
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-23 09:13:20
+ * @FilePath: \basic-admin\src\lang\i18n\zh\module\equipmentManager.js
+ * @Description:
+ */
+export default {
+  equipmentVisualization: {
+    'timeSlot': '时间段',
+    'ProcessingQuantity': '加工数量',
+    'Histogram': '柱状图',
+    'DataTable': '数据列表',
+    'Year': '年',
+    'Quarter': '季度',
+    'Month': '月',
+    'Week': '周',
+    'Electric': '电',
+    'Water': '水',
+    'Gas': '气'
+  },
+  sparepart: {
+    'sparepart': '备品备件',
+    'code': '备件编号',
+    'name': '备件名称',
+    'model': '备件型号',
+    'batchNumber': '批次号',
+    'supplier': '供应商',
+    'number': '数量',
+    'unit': '单位',
+    'entryTime': '进厂时间',
+    'receiver': '接收人',
+    'remark': '备注',
+    'externalCode': '外部编码',
+    'searchPlaceholder': '备件编码或名称',
+    'editDialogTtile': '编辑备品备件',
+    'addDialogTtile': '添加备品备件',
+    'placeholdersparepart': '请选择备件',
+    'placeholdermodel': '请输入模型',
+    'placeholderbatchNumber': '请输入批次号',
+    'placeholdersupplier': '请选择供应商',
+    'placeholdernumber': '请输入数量',
+    'placeholderunit': '请选择单位',
+    'placeholderentryTime': '请选择时间',
+    'placeholderreceiver': '请选择接收人',
+    'placeholderremark': '请输入备注',
+    'placeholderexternalCode': '请输入外部编码'
+  },
+  bom: {
+    'searchPlaceholder': '设备编码或名称',
+    'code': '设备物料清单编码',
+    'name': '设备物料清单名称',
+    'equipmentCode': '设备编号',
+    'equipmentName': '设备名称',
+    'enabled': '激活状态',
+    'remark': '备注',
+    'addDialogTitle': '添加设备物料',
+    'editDialogTitle': '编辑设备物料',
+    'placeholdercode': '请输入设备物料编码',
+    'placeholdername': '请输入设备物料名称',
+    'placeholderequipmentName': '请选择设备',
+    'placeholderremark': '请输入备注',
+    '': ''
+  },
+  bomdetail: {
+    'title': '设备物料明细',
+    'materialId': '物料编码',
+    'materialName': '物料名称',
+    'unit': '单位',
+    'quantity': '数量',
+    'remark': '备注',
+    'addDialogTitle': '添加物料',
+    'editDialogTitle': '编辑物料',
+    'placeholdermaterialName': '请选择物料',
+    'placeholderunit': '请选择单位',
+    'placeholderquantity': '请输入数量',
+    'placeholderremark': '请输入备注'
+  },
+  recipe: {
+    'searchPlaceholder': '配方编码或名称',
+    'deviceselect': '请选择设备',
+    'equipmentId': '设备名',
+    'equipmentType': '设备类型',
+    'name': '配方名称',
+    'code': '配方编码',
+    'activationState': '激活状态',
+    'enabled': '启用状态',
+    'remark': '备注',
+    'description': '配方描述',
+    'addDialogTitle': '添加设备配方',
+    'editDialogTitle': '编辑设备配方',
+    'placeholdername': '请输入配方名称',
+    'placeholderdevice': '请选择设备',
+    'placeholdercode': '请输入配方编码',
+    'placeholderdescription': '请输入配方描述',
+    'placeholderremark': '请输入备注'
+  },
+  recipeDetail: {
+    'title': '设备类型配方参数明细',
+    'paramCode': '参数编码',
+    'paramName': '参数名称',
+    'type': '参数类型',
+    'minValue': '最小参数值',
+    'maxValue': '最大参数值',
+    'defaultValue': '默认参数值',
+    'unit': '单位',
+    'remark': '备注',
+    'recipeParam': '配方参数',
+    'paramValue': '参数数值',
+    'placeholderrecipeParam': '请选择配方参数',
+    'placeholderparamValue': '请输入参数数值',
+    'placeholderremark': '请输入备注',
+    'addDialogTitle': '添加配方参数',
+    'editDialogTitle': '修改配方参数'
+  },
+  statusSetting: {
+    'searchPlaceholder': '设备名称',
+    'searchPlaceholder2': '设备状态',
+    'code': '设备编号',
+    'name': '设备名称',
+    'status': 'E10状态',
+    'color': '显示颜色',
+    'description': '设备描述',
+    'dialogTitle': '修改设备状态',
+    'devicestatus': '设备状态',
+    'placeholderdevicestatus': '请选择设备状态',
+    'communication': '通讯状态',
+    'controlStatus': '控制状态',
+    'controlStatusLocal': '本地',
+    'controlStatusOnline': '在线',
+    'communicationOff': '未连接',
+    'communicationOn': '已连接',
+    'placeholdercontrolStatus': '请选择控制状态'
+  },
+  repair: {
+    'searchPlaceholder': '设备名称',
+    'startDate': '开始日期',
+    'endDate': '结束日期',
+    'repairOrderNumber': '设备维修单号',
+    'maintenanceStartTime': '维修开始时间',
+    'maintenanceFinishTime': '维修结束时间',
+    'maintenanceStatus': '维修状态',
+    'maintenanceStatusNo': '未完成',
+    'maintenanceStatusYes': '已完成',
+    'equipmentName': '设备名称',
+    'maintenanceWorker': '维修工',
+    'workerContactInformation': '联系方式',
+    'remark': '备注',
+    'equipmentId': '设备名称',
+    'equipmentPosition': '设备位置',
+    'timeOfFailure': '故障发生时间',
+    'faultLevel': '故障级别',
+    'timerange': '维修起止时间',
+    'repairMode': '维修类型',
+    'faultDetail': '故障明细',
+    'maintenanceDetail': '维修记录',
+    'annex': '维修附件',
+    'repairTools': '维修工具',
+    'placeholderrepairTools': '请输入维修工具',
+    'placeholderrepairOrderNumber': '请输入维修单号',
+    'placeholderequipmentId': '请选择设备',
+    'placeholdermaintenanceWorker': '请选择维修工',
+    'placeholdermaintenanceStatus': '请选择维修状态',
+    'placeholderequipmentPosition': '请输入设备位置',
+    'placeholderworkerContactInformation': '请输入联系方式',
+    'placeholdertimeOfFailure': '请选择故障发生时间',
+    'placeholderfaultLevel': '请选择故障等级',
+    'placeholderrepairMode': '请选择维修类型',
+    'placeholderfaultDetail': '请输入故障明细',
+    'placeholdermaintenanceDetail': '请输入维修记录',
+    'placeholderremark': '请输入备注'
+  },
+  monitoring: {
+    'searchPlaceholder': '设备编码或名称',
+    'code': '设备编号',
+    'name': '设备名称',
+    'status': '设备状态',
+    'startTime': '启动时间',
+    'totalCount': '加工基板数量',
+    'repairTime': '上次维修时间'
+  },
+  maintainplan: {
+    'searchPlaceholder': '请选择状态',
+    'startTime': '开始时间',
+    'endTime': '结束时间',
+    'maintenanceOrderNumber': '保养计划单号',
+    'maintainStartTime': '计划开始时间',
+    'maintainEndTime': '计划结束时间',
+    'lastMaintainStartTime': '上一次开始时间',
+    'lastMaintainEndTime': '上一次结束时间',
+    'equipmentCode': '设备编码',
+    'maintenancePeriodId': '保养周期（年）',
+    'remark': '备注',
+    'addDialogTitle': '新增保养计划',
+    'editDialogTitle': '编辑保养计划',
+    'equipmentId': '设备名称',
+    'status': '状态',
+    'annex': '附件',
+    'erpIdentification': 'ERP',
+    'maintainFuncDesc': '保养功能描述',
+    'EquipmentGrouping': '设备分组',
+    'maintainDuration': '保养时长(时)',
+    'lastMaintainTime': '上一次保养时间',
+    'nextMaintainTime': '下一次保养时间',
+    'maintainWorkerId': '保养人员',
+    'lastMaintainWorkerId': '上一次计划保养人员',
+    'maintainType': '保养类型',
+    'placeholdermaintainDuration': '请输入保养时长',
+    'placeholdermaintenanceOrderNumber': '请填写保养计划单号',
+    'placeholdermaintainStartTime': '请填写计划开始时间',
+    'placeholdermaintainEndTime': '请填写计划结束时间',
+    'placeholderequipmentCode': '请填写设备编码',
+    'placeholdermaintenancePeriodId': '请填写保养周期',
+    'placeholderremark': '请填写备注',
+    'placeholderlastMaintainTime': '请填写上一次保养时间',
+    'placeholdernextMaintainTime': '请填写下一次保养时间',
+    'placeholdererpIdentification': '请填写ERP',
+    'placeholdermaintainFuncDesc': '请填写保养功能描述',
+    'placeholdermaintainWorkerId': '请填写保养人员',
+    'placeholdermaintainType': '请填写保养类型',
+    'placeholderEquipmentGrouping': '请选择设备分组',
+    'placeholderequipmentId': '请填写设备名称',
+    'placeholderstatus': '请填写状态'
+  },
+  maintainlog: {
+    'startTime': '开始时间',
+    'endTime': '结束时间',
+    'maintenanceOrderNumber': '保养记录单号',
+    'maintainStartTime': '实际开始时间',
+    'maintainNextTime': '下次保养时间',
+    'maintainEndTime': '实际结束时间',
+    'maintainWorkerId': '保养人员',
+    'equipmentCode': '设备编码',
+    'nextMaintenanceTime': '下次保养时间',
+    'maintenanceDetail': '保养描述',
+    'remark': '备注',
+    'maintainDuration': '保养时长(时)',
+    'annex': '附件',
+    'maintainType': '保养类型',
+    'equipmentId': '设备名称',
+    'placeholderequipmentId': '请选择设备',
+    'placeholdermaintenanceOrderNumber': '请输入设备保养单号',
+    'placeholdermaintainDuration': '请输入保养时长',
+    'placeholdermaintainStartTime': '请选择实际开始时间',
+    'placeholdermaintainNextTime': '请选择下次保养时间',
+    'placeholdermaintainEndTime': '请选择实际结束时间',
+    'placeholdermaintainWorkerId': '请选择保养人员',
+    'placeholdermaintenanceDetail': '请输入保养描述',
+    'placeholderremark': '请输入备注',
+    'placeholderactualEndTime': '请选择实际开始时间',
+    'placeholderactualStartTime': '请选择实际结束时间',
+    'equipment': '设备',
+    'placeholdermaintainType': '请填写保养类型',
+    'isplan': '是否有保养计划',
+    'planAll': '全部',
+    'planNo': '无保养计划',
+    'planYes': '有保养计划',
+    'maintainlogTime': '保养记录时间'
+  },
+  baseinfo: {
+    'searchPlaceholder': '设备编号或名称',
+    'code': '设备编号',
+    'name': '设备名称',
+    'status': '设备状态',
+    'remark': '备注',
+    'deviceTypeParam': '设备参数',
+    'deviceTypeEvent': '设备事件',
+    'deviceTypeAlarm': '设备报警'
+  },
+  baseinfoparam: {
+    'searchPlaceholder': '参数名称或编码',
+    'paramId': '常量/变量ID',
+    'paramName': '参数名称',
+    'paramCode': '参数编码',
+    'format': '参数格式',
+    'valueType': '参数值类型',
+    'unit': '单位',
+    'maxValue': '最大值',
+    'minValue': '最小值',
+    'defaultValue': '默认值',
+    'category': '参数分类',
+    'dataWithPlc': '对应PLC',
+    'enabled': '是否有效',
+    'type': '采集参数类型',
+    'note': '注解',
+    'uploadSpc': '是否上传SPC',
+    'isCollected': '是否采集',
+    'description': '描述',
+    'remark': '备注',
+    'addDialogTitle': '添加设备参数',
+    'editDialogTitle': '编辑设备参数',
+    'placeholderparamName': '请输入参数名',
+    'placeholderparamId': '请输入参数Id',
+    'placeholderparamCode': '请输入参数编码',
+    'placeholderformat': '请输入数据类型',
+    'placeholderValueType': '请输入参数值类型',
+    'placeholdertype': '请输入变量类型',
+    'placeholderunit': '请输入单位',
+    'placeholderdataWithPlc': '请输入对应PLC',
+    'M': '材料相关值',
+    'V': '过程实际值',
+    'P': '过程设定值',
+    'R': '配方参数',
+    'C': '耗材值',
+    'I': '接口相关'
+  },
+  baseinfoevent: {
+    'searchPlaceholder': '事件名称或编码',
+    'eventId': '事件ID',
+    'eventCode': '事件编码',
+    'eventName': '事件名称',
+    'enabled': '是否使用',
+    'category': '类别',
+    'description': '描述',
+    'remark': '备注',
+    'addDialogTitle': '添加设备事件',
+    'editDialogTitle': '编辑设备事件',
+    'placeholdereventId': '请输入事件ID',
+    'placeholdereventName': '请输入事件名称',
+    'placeholdereventCode': '请输入事件编码',
+    'placeholdercategory': '请输入分类'
+  },
+  baseinfoalarm: {
+    'searchPlaceholder': '报警名称或编码',
+    'alarmId': '报警ID',
+    'alarmName': '报警名称',
+    'alarmCode': '报警编码',
+    'category': '报警类型',
+    'description': '描述',
+    'enabled': '是否使用',
+    'remark': '备注',
+    'addDialogTitle': '添加设备报警',
+    'editDialogTitle': '编辑设备报警',
+    'placeholderalarmId': '请输入报警ID',
+    'placeholderalarmName': '请输入报警名称',
+    'placeholderalarmCode': '请输入报警编码',
+    'placeholdercategory': '请输入报警类型'
+  },
+  eqManagerManage: {
+    'equipmentName': '设备',
+    'equipmentCode': '设备编码',
+    'description': '功能描述',
+    'worker': '操作员',
+    'remark': '备注',
+    'role': '操作员角色',
+    roleName: '角色名称'
+  },
+  equipmentParams: {
+    'startAndEndTime': '起始时间',
+    'startTime': '开始时间',
+    'endTime': '结束时间',
+    'createTime': '创建时间',
+    'substrateId': '基板编码',
+    'choiceParam': '选择参数'
+  },
+  ProcessData: {
+    productInfo: '产品信息',
+    productName: '产品名称',
+    processName: '工艺名称',
+    processCode: '工艺编码',
+    processVersion: '工艺版本',
+    specifications: '规格说明',
+    equipmentName: '设备名称',
+    qualifiedRate: '合格率',
+    analysis: '分析',
+    contrast: '对比',
+    comparisonOfInfluencingFactors: '影响因素对比',
+    top: '上部',
+    bottom: '下部',
+    bottomHigh: '下部风栅高度',
+    speed: '传输速率',
+    highPressureFan: '高压风机',
+    lowPressureFan: '低压风机',
+    current: '电流',
+    selfChecking: '自检',
+    manualChecking: '人工检',
+    powerOffPackaging: '下电包装',
+    parameterName: '参数名称',
+    parameterCode: '参数编码',
+    nowValue: '当前值',
+    standardValue: '标准值'
+  },
+  other: {}
+}
diff --git a/src/lang/i18n/zh/module/factory.js b/src/lang/i18n/zh/module/factory.js
new file mode 100644
index 0000000..3f4ae1b
--- /dev/null
+++ b/src/lang/i18n/zh/module/factory.js
@@ -0,0 +1,55 @@
+/*
+ * @Author: gtz
+ * @Date: 2021-03-21 17:22:47
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-04-06 13:55:23
+ * @Description: file content
+ */
+
+export default {
+  abnormalAlarm: {
+    exceptionAlarm: '异常警告',
+    alarmTime: '报警时间',
+    name: '报警名称',
+    alarmType: '报警类型',
+    alarmLevel: '报警级别',
+    alarmReason: '报警内容',
+    messagePushMode: '消息推送方式',
+    team: '执行班组',
+    isDeal: '是否处理',
+    detail: '详情',
+    deal: '处理',
+    alarmHandling: '警告处理',
+    alarmSource: '报警源',
+    alarmCode: '报警编号',
+    alarmContent: '报警内容',
+    status: '状态',
+    handler: '处理人',
+    description: '处理方式',
+    annex: '附件',
+    timeQuantum: '时间段',
+    processingComplete: '处理完成',
+    inHand: '处理中',
+    waitingProcess: '等待处理',
+    all: '全部',
+    warn: '警告',
+    alarm: '报警',
+    breakdown: '故障',
+    email: '邮件',
+    wechat: '微信',
+    equipmentName: '设备名称',
+    alarmStatus: '报警状态',
+    alarmInfo: '报警信息',
+    alarmStartTime: '报警开始时间',
+    alarmEndTime: '报警结束时间',
+    EquipmentAlarmProcessing: '设备报警处理'
+  },
+  visual: {
+    showLocation: '查看库位信息',
+    location: '库位',
+    box: '箱子',
+    visualSub: '在制基板：',
+    locationSub: '库存基板：'
+  }
+}
+
diff --git a/src/lang/i18n/zh/module/formManage.js b/src/lang/i18n/zh/module/formManage.js
new file mode 100644
index 0000000..07b05eb
--- /dev/null
+++ b/src/lang/i18n/zh/module/formManage.js
@@ -0,0 +1,19 @@
+/*
+ * @Author: gtz
+ * @Date: 2021-04-01 09:19:36
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-04-26 13:23:03
+ * @Description: file content
+ */
+
+export default {
+  formSort: {
+    name: '报表分类名',
+    addDialogTitle: '新增报表分类',
+    editDialogTitle: '修改报表分类'
+  },
+  formReport: {
+    name: '设备名称'
+  }
+}
+
diff --git a/src/lang/i18n/zh/module/index.js b/src/lang/i18n/zh/module/index.js
new file mode 100644
index 0000000..7fb206d
--- /dev/null
+++ b/src/lang/i18n/zh/module/index.js
@@ -0,0 +1,33 @@
+/*
+ * @Author: gtz
+ * @Date: 2021-03-04 16:12:46
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-04-22 19:49:47
+ * @Description: file content
+ */
+
+import basicData from './basicData'
+import packingManage from './packing-manage'
+import teamManager from './teamManager'
+import equipmentManager from './equipmentManager'
+import orderManage from './orderManage'
+import art from './art'
+import materialManager from './materialManager'
+import quality from './quality'
+import factory from './factory'
+import formManage from './formManage'
+import report from './report'
+
+export default {
+  basicData,
+  packingManage,
+  teamManager,
+  equipmentManager,
+  orderManage,
+  art,
+  materialManager,
+  quality,
+  factory,
+  formManage,
+  report
+}
diff --git a/src/lang/i18n/zh/module/materialManager.js b/src/lang/i18n/zh/module/materialManager.js
new file mode 100644
index 0000000..94f81ca
--- /dev/null
+++ b/src/lang/i18n/zh/module/materialManager.js
@@ -0,0 +1,90 @@
+/*
+ * @Author: gtz
+ * @Date: 2021-03-08 12:02:22
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-05-25 16:41:29
+ * @Description: file content
+ */
+export default {
+  refluelling: {
+    'index': '序号',
+    'materialDateCode': '批次号',
+    'materialDateName': '批次名称',
+    'replaceTime': '换料时间',
+    'type': '换料类型',
+    'materialCode': '物料编码',
+    'materialName': '物料名称',
+    'source': '数据来源',
+    'equipmentName': '设备名称',
+    'operator': '操作人',
+    'remark': '原因',
+    'operation': '操作',
+    'placeholderSearch': '批次号/物料编码/名称',
+    'placeholderbatchnumber': '批次号不能为空',
+    'placeholderoperator': '操作员名称不能为空',
+    'placeholdertime': '换料时间不能为空',
+    'placeholderEquipment': '设备不能为空',
+    'loading': '上料',
+    'unloading': '下料'
+  },
+  materialbom: {
+    'index': '序号',
+    'bomcode': 'bom编码',
+    'name': 'bom',
+    'createTime': '添加时间',
+    'remark': '备注',
+    'operation': '操作',
+    'placeholderbomName': 'Bom名称不能为空',
+    'placeholderbomcode': 'Bom编码不能为空',
+    'subtitle': 'BOM明细',
+    'code': '物料编码',
+    'detailname': '物料名称',
+    'quantity': '数量',
+    'unit': '物料单位',
+    'addDialogTitle': '新增Bom清单',
+    'editDialogTitle': '编辑Bom清单',
+    'placeholderunit': '单位不能为空'
+  },
+  materialbatch: {
+    'placeholderkeywords': '批次名称/编码/物料名称',
+    'index': '序号',
+    'createTime': '添加时间',
+    'externalCode': '批次号',
+    'name': '批次名称',
+    'materialCode': '物料编码',
+    'materialName': '物料名称',
+    'remark': '备注',
+    'operation': '操作',
+    'placeholderbatchnumber': '批次号不能为空',
+    'placeholderbatchname': '批次名称不能为空'
+  },
+  report: {
+    'placeholderkeywords': '基板编码',
+    'Keyword': '基板编码',
+    'eqName': '设备名称',
+    'code': '基板编码'
+  },
+  currentConsume: {
+    'index': '序号',
+    'eqName': '设备名称',
+    'materialName': '物料名称',
+    'materialCode': '物料编码',
+    'materialBatch': '物料批次号',
+    'beginTime': '物料开始使用时间',
+    'materialNowCon': '物料当前消耗值',
+    'MaterialConThr': '物料消耗阈值',
+    'remark': '备注'
+  },
+  historyConsume: {
+    'index': '序号',
+    'eqName': '设备名称',
+    'materialName': '物料名称',
+    'materialCode': '物料编码',
+    'materialBatch': '物料批次号',
+    'beginTime': '物料开始使用时间',
+    'endTime': '物料结束使用时间',
+    'materialNowCon': '物料消耗总量',
+    'MaterialConThr': '物料消耗阈值',
+    'remark': '备注'
+  }
+}
diff --git a/src/lang/i18n/zh/module/orderManage.js b/src/lang/i18n/zh/module/orderManage.js
new file mode 100644
index 0000000..0a9e625
--- /dev/null
+++ b/src/lang/i18n/zh/module/orderManage.js
@@ -0,0 +1,183 @@
+/*
+ * @Author: zwq
+ * @Date: 2021-03-06 16:30:22
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-21 16:39:32
+ * @Description:
+ */
+export default {
+  order: {
+    keyword: '关键字',
+    NameOrCode: '名称或编码',
+    StartTime: '开始时间',
+    EndTime: '结束时间',
+    To: '至',
+    ActualStartTime: '实际开始时间',
+    createTime: '创建时间',
+    WorkOrderName: '工单名称',
+    WorkOrderCode: '工单编码',
+    WorkOrderType: '工单类型',
+    WorkOrderStartTime: '工单开始时间',
+    OrderName: '订单名称',
+    OrderCode: '订单编码',
+    OrderType: '订单类型',
+    WorkOrderInitiation: '工单发起',
+    status: '状态',
+    workOrderDetail: '工单详情',
+    CompletionTime: '工单完成时间',
+    IssueOrderTime: '下发工单时间',
+    PlanningStartTime: '计划开始时间',
+    PlanningEndTime: '计划完成时间',
+    DeliveryTime: '交付时间',
+    priority: '优先级',
+    initiateTime: '发起时间',
+    source: '来源',
+    unit: '单位',
+    PlannedProcessingVolume: '目标数量',
+    ActualTargetQuantity: '实际目标数量',
+    ActualFinishedProduct: '实际成品量',
+    NumberOfDamages: '损坏数量',
+    Description: '描述信息',
+    Remarks: '备注',
+    ProductProcess: '工艺流程',
+    powerClass: 'power class',
+    ProductName: '产品名称',
+    ProductType: '产品类型',
+    destination: '下发目的地',
+    reason: '原因',
+    UseQuantityPlate: '基板使用数量',
+    DamageQuantityPlate: '基板损坏数量',
+    EquipmentName: '设备名称',
+    PowerConsumption: '电量消耗',
+    WorkOrderProgress: '工单进度：',
+    energyConsumption: '设备能源消耗：',
+    energyConsumptionChart: '设备电量消耗图',
+    energyConsumptionTable: '设备电量消耗表',
+    workOrderVerificationResult: '工单验证结果',
+    deviceDetection: '设备检测',
+    process: '工艺',
+    useMaterial: '使用物料',
+    basePlate: '基板',
+    basePlateCode: '基板编码',
+    basePlateId: '基板Id',
+    team: '班组',
+    customer: '客户',
+    detail: '详情',
+    workOrderInfo: '工单信息',
+    OrderReportInfo: '订单报工信息',
+    executionTime: '开始时间',
+    completQuantity: '完成数量',
+    initiateWorkOrder: '发起工单',
+    finishTime: '完成时间',
+    reportingTime: '报工时间',
+    workReportMethod: '报工方式',
+    goodQuantity: '良品数量',
+    scrapQuantity: '废品数量',
+    scrapId: '废品ID',
+    scrapLevel: '废品模组等级',
+    packageNumber: '包装编号',
+    SAPMaterial: 'SAP物料',
+    power: '力量',
+    fileName: '文件名',
+    path: '路径',
+    processCode: '工艺编码',
+    deviceInfo: '设备参数信息',
+    loadingTime: '上片时间',
+    unLoadingTime: '下片时间',
+    materialBom: 'BOM',
+    materialBomMessage: '此工单未绑定BOM',
+    activation: '激活',
+    warnMessage: '已下发订单不能删除'
+  },
+  track: {
+    event: '事件',
+    parameterName: '参数名',
+    parameterValue: '参数值',
+    occurTime: '发生时间',
+    ProcessTime: '加工时间'
+  },
+  packingTags: {
+    moduleId: '模组ID',
+    UnloadingTime: '下片时间',
+    UnloadingEquipment: '下片设备',
+    moduleQuantity: '模组数量',
+    PrintingTime: '打印时间',
+    plateType: '基板类型',
+    plateGrade: '基板等级',
+    name: '名称',
+    opration: '操作',
+    code: '编号',
+    startTime: '开始时间',
+    completeTime: '完成时间',
+    power: '功率',
+    grade: '等级',
+    oneDimensionalCode: '条码'
+  },
+  substrateBatch: {
+    batchCode: '批次编码',
+    batchName: '批次名称',
+    propertyName: '属性名',
+    propertyValue: '属性值'
+  },
+  VerifyTable: {
+    EquipmentCode: '设备编码',
+    equipmentAbbreviation: '设备缩写',
+    EquipmentFormula: '当前设备配方',
+    ProcessFormulaRequir: '工艺配方要求',
+    IsSame: '是否相同',
+    materielName: '物料名称',
+    materielCode: '物料编码',
+    Spec: '规格',
+    teamName: '班组名称',
+    teamLeader: '组长',
+    number: '人数',
+    professional: '专业',
+    workingHours: '上班时间'
+  },
+  orderDetail: {
+    issueTime: '生成工单时间',
+    completionSchedule: '完成进度',
+    issuedQuantity: '已下发数量',
+    remainingPlannedQuantity: '剩余计划加工量'
+  },
+  workOrderDetail: {
+    workOrderSource: '工单来源',
+    processingTechnology: '加工工艺'
+  },
+  powerClassification: {
+    parentClass: '父类',
+    typeName: '类型名称',
+    typeCode: '类型编码',
+    Remarks: '备注'
+  },
+  erpToMes: {
+    erpToMesMaterial: 'Erp To Mes物料',
+    erpToMesMaterialBom: 'Erp To Mes物料Bom',
+    erpToMesOrder: 'Erp To Mes订单',
+    batchNumber: '批次号',
+    materialsCode: '物料编码',
+    materialsName: '物料名称',
+    quantity: '数量',
+    unit: '单位',
+    bomContent: 'BOM内容',
+    craftCode: '工艺编码',
+    craftName: '工艺名称',
+    materialsBomCode: '物料bom编码',
+    materialsBomName: '物料bom名称',
+    substrateBatch: '基板批次',
+    customerCode: '	客户编码',
+    customerName: '客户名称',
+    orderCode: '订单编码',
+    orderName: '订单名称',
+    packagingBoxId: '包装箱ID',
+    reportTime: '包工时间',
+    mfoCode: '订单编码'
+  },
+  consumption: {
+    key: '关键字',
+    workOrderId: '工单ID',
+    workOrderStatus: '工单状态',
+    power: '能耗',
+    equipmentName: '设备名称'
+  }
+}
diff --git a/src/lang/i18n/zh/module/packing-manage.js b/src/lang/i18n/zh/module/packing-manage.js
new file mode 100644
index 0000000..c8082dd
--- /dev/null
+++ b/src/lang/i18n/zh/module/packing-manage.js
@@ -0,0 +1,34 @@
+/*
+ * @Author: zwq
+ * @Date: 2021-04-07 14:04:55
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-04-28 13:56:40
+ * @Description:
+ */
+export default {
+  PackingList: {
+    PackingTime: '包装时间',
+    WorkOrderNo: '工单号',
+    SubstrateNumber: '基板数量',
+    ModuleLevel: '模组等级',
+    QualityGrade: '质量等级',
+    Detail: '详情',
+    printNumber: '打印次数',
+    EntryTime: '进入包装箱时间'
+  },
+  labelTemplate: {
+    placeholderSearch: '标签名称或编码',
+    addTime: '添加时间',
+    labelCode: '标签编码',
+    labelName: '标签名称',
+    labelType: '标签类型',
+    labelContent: '标签内容',
+    remark: '备注',
+    levelLabel: '等级标签',
+    moduleLabel: '模组标签',
+    custom: '自定义',
+    templateDesign: '模板设计',
+    templatePreview: '模板预览',
+    placeholderLength: '长度至少在3个字符以上'
+  }
+}
diff --git a/src/lang/i18n/zh/module/quality.js b/src/lang/i18n/zh/module/quality.js
new file mode 100644
index 0000000..8fd0d0b
--- /dev/null
+++ b/src/lang/i18n/zh/module/quality.js
@@ -0,0 +1,94 @@
+/*
+ * @Date: 2021-03-13 13:49:07
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-04-15 09:58:18
+ * @FilePath: \basic-admin\src\lang\i18n\zh\module\quality.js
+ * @Description:
+ */
+export default {
+  plan: {
+    searchPlaceholder: '检测计划名',
+    searchPlaceholderArea: '所属区域',
+    placeholderStartTime: '开始时间',
+    placeholderEndTime: '结束时间',
+    testPlaneCode: '检测计划编码',
+    testPlaneName: '检测计划名',
+    testPlaneContent: '检测内容',
+    areaName: '区域名称',
+    areaCode: '区域编码',
+    detectionRateDicId: '检测速率',
+    isIssued: '是否下发',
+    issuedTime: '下发时间',
+    operatorId: '操作员',
+    remark: '备注',
+    addDialogTitle: '添加检测计划',
+    editDialogTitle: '编辑检测计划',
+    sendDialogTitle: '下发检测计划',
+    notEmpty: '此项不能为空',
+    sendPlanHint: '是否下发检测计划？',
+    distributionAreaName: '下发目的地'
+  },
+  planDetail: {
+    title: '检测计划参数',
+    name: '参数名称',
+    references: '参考值',
+    remark: '备注',
+    updatedTime: '添加时间',
+    notEmpty: '此项不能为空',
+    equipmentName: '设备名',
+    testFrequency: '测量频率',
+    testSystem: '测量系统',
+    description: '描述'
+  },
+  planSend: {},
+  offlineDetec: {
+    EquipmentName: '设备名称',
+    EquipmentCode: '设备编码',
+    DetectionArea: '检测区域',
+    EquipmentFunction: '设备功能',
+    DetecParamCode: '检测参数编码',
+    maxValue: '最大值',
+    minValue: '最小值',
+    avgValue: '平均值',
+    unit: '单位',
+    uploadSpc: '是否上传SPC',
+    SubstrateId: '基板ID',
+    DetecTime: '检测时间',
+    DetecParam: '检测参数',
+    DetecValue: '检测数值',
+    DetecStaff: '检测员工',
+    getEquipmetId: '请先选择设备!'
+  },
+  spc: {
+    error: 'spc系统未正确退出，请手动前往spc系统页面退出',
+    tip: '已在新标签页打开spc系统'
+  },
+  ScrapInfo: {
+    PlateId: '基板ID',
+    TimePeriod: '时间段',
+    StartTime: '开始日期',
+    EndTime: '结束日期',
+    To: '至',
+    source: '来源',
+    wasteGrade: '废品等级',
+    RegisterPerson: '登记人',
+    updateTime: '登记时间',
+    cause: '报废原因',
+    causeCode: '报废原因编码',
+    WasteName: '废品报废名称',
+    WasteCode: '废品报废编码',
+    remark: '备注',
+    scrapType: '报废类型',
+    scrapTypeCode: '报废类型编码',
+    name: '设备名称',
+    entryType: '手动/自动',
+    automatic: '自动',
+    manual: '手动',
+    workOrderId: '工单名称',
+    count: '数量',
+    title: '废品分类',
+    subTitle: '废品分类统计',
+    completeWaste: '完全废品',
+    CanBeUsedAfterProcessing: '加工可用'
+  }
+}
diff --git a/src/lang/i18n/zh/module/report.js b/src/lang/i18n/zh/module/report.js
new file mode 100644
index 0000000..669a863
--- /dev/null
+++ b/src/lang/i18n/zh/module/report.js
@@ -0,0 +1,19 @@
+/*
+ * @Author: gtz
+ * @Date: 2021-04-22 19:48:46
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-04-27 12:13:25
+ * @Description: file content
+ */
+
+export default {
+  reportList: {
+    reportName: '报表名称',
+    reportSort: '报表分类',
+    createTime: '添加时间',
+    operation: '操作'
+  },
+  reportSort: {
+    all: '全部'
+  }
+}
diff --git a/src/lang/i18n/zh/module/teamManager.js b/src/lang/i18n/zh/module/teamManager.js
new file mode 100644
index 0000000..e4c4275
--- /dev/null
+++ b/src/lang/i18n/zh/module/teamManager.js
@@ -0,0 +1,79 @@
+/*
+ * @Author: zwq
+ * @Date: 2021-03-05 16:34:46
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-14 09:56:48
+ * @Description:
+ */
+/*
+ * @Author: gtz
+ * @Date: 2021-03-04 16:13:51
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-08 11:04:54
+ * @Description: file content
+ */
+export default {
+  Handover: {
+    alertTitle: '[温馨提示]',
+    alertListContent: '您确定要删除该班组交接记录吗？',
+    alertPlanContent: '您确定要删除该班组交接计划吗？',
+    index: '序号',
+    TeamName: '班组名称',
+    TeamLeader: '班组长',
+    WorkingHours: '上班时间',
+    OffWorkTime: '下班时间',
+    LastTeamName: '上一班组名称',
+    Keyword: '关键字',
+    HandoverTme: '交接时间',
+    HandoverStatus: '交接状态',
+    HandoverWait: '等待中',
+    HandoverCom: '已完成',
+    TeamWorkStatus: '班组状态',
+    all: '全部',
+    working: '工作中',
+    offduty: '已下班',
+    CreateTime: '添加时间',
+    PlanWorkingHours: '计划上班时间',
+    PlannedHandoverTime: '计划交接时间',
+    PreviousTeamLeader: '上一班组长',
+    Remark: '备注',
+    Detail: '详情',
+    Placeholder: '班组名称或班组长',
+    Operation: '操作',
+    StartTime: '开始日期',
+    EndTime: '结束日期',
+    To: '至'
+  },
+  HandoverAdd: {
+    SelectAll: '全选',
+    TeamPlanFill: '班组计划填写',
+    FillInShift: '班组交接填写',
+    MajorSelection: '专业选择',
+    SelectionOfTeamMembers: '班组人员选择',
+    Placeholder: '员工名称或编码',
+    planWorkerName: '员工姓名',
+    planProfessionName: '专业',
+    telephone: '手机号',
+    workshop: '所属车间',
+    onDuty: '状态',
+    HandoverTeam: '交接班组',
+    HandoverTeamLeader: '交接班组长',
+    PlanTeam: '计划班组',
+    PlanTeamLeader: '计划班组长'
+  },
+  HandoverDrawer: {
+    title: '下班操作',
+    TeamCommutingRecord: '班组上下班记录',
+    OffHours: '下班时间段'
+  },
+  showLog: {
+    content: '详细描述',
+    type: '事件类型',
+    title: '标题',
+    teamEventLogId: '报警ID',
+    happenTime: '发生时间',
+    leave: '请假',
+    absenceFromDuty: '缺勤',
+    equipmentFailure: '设备故障'
+  }
+}
diff --git a/src/lang/index.js b/src/lang/index.js
new file mode 100644
index 0000000..8e7de7f
--- /dev/null
+++ b/src/lang/index.js
@@ -0,0 +1,65 @@
+/*
+ * @Author: your name
+ * @Date: 2020-12-14 10:30:38
+ * @LastEditTime: 2020-12-29 11:23:19
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \mt-bus-fe\src\lang\index.js
+ */
+import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+import Cookies from 'js-cookie'
+import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui lang
+import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'// element-ui lang
+import elementEsLocale from 'element-ui/lib/locale/lang/es'// element-ui lang
+import elementJaLocale from 'element-ui/lib/locale/lang/ja'// element-ui lang
+import enLocale from './en'
+import zhLocale from './zh'
+import esLocale from './es'
+import jaLocale from './ja'
+
+Vue.use(VueI18n)
+
+const messages = {
+  en: {
+    ...enLocale,
+    ...elementEnLocale
+  },
+  zh: {
+    ...zhLocale,
+    ...elementZhLocale
+  },
+  es: {
+    ...esLocale,
+    ...elementEsLocale
+  },
+  ja: {
+    ...jaLocale,
+    ...elementJaLocale
+  }
+}
+export function getLanguage() {
+  const chooseLanguage = Cookies.get('language')
+  if (chooseLanguage) return chooseLanguage
+
+  // if has not choose language
+  const language = (navigator.language || navigator.browserLanguage).toLowerCase()
+  const locales = Object.keys(messages)
+  for (const locale of locales) {
+    if (language.indexOf(locale) > -1) {
+      Cookies.set('language', locale)
+      return locale
+    }
+  }
+  Cookies.set('language', 'en')
+  return 'en'
+}
+const i18n = new VueI18n({
+  // set locale
+  // options: en | zh | es
+  locale: getLanguage(),
+  // set locale messages
+  messages
+})
+
+export default i18n
diff --git a/src/lang/ja.js b/src/lang/ja.js
new file mode 100644
index 0000000..7dccd12
--- /dev/null
+++ b/src/lang/ja.js
@@ -0,0 +1,175 @@
+export default {
+  route: {
+    dashboard: 'トップ',
+    documentation: 'ドキュメント',
+    guide: 'ガイド',
+    permission: '権限',
+    rolePermission: '権限ロール',
+    pagePermission: 'ページ権限',
+    directivePermission: 'ディレクティブ権限',
+    icons: 'アイコン',
+    components: 'コンポーネント',
+    tinymce: 'TinyMCE',
+    markdown: 'Markdown',
+    jsonEditor: 'JSON Editor',
+    dndList: 'Drag-And-Drop',
+    splitPane: 'パネル',
+    avatarUpload: 'アバターアップロード',
+    dropzone: 'Dropzone',
+    sticky: 'Sticky',
+    countTo: 'Count To',
+    componentMixin: 'コンポーネントMixin',
+    backToTop: 'BackToTop',
+    dragDialog: 'Drag Dialog',
+    dragSelect: 'Drag Select',
+    dragKanban: 'Drag 看板',
+    charts: 'チャート',
+    keyboardChart: 'Keyboardチャート',
+    lineChart: 'Lineチャート',
+    mixChart: 'Mixチャート',
+    example: 'Example',
+    nested: 'Nested Routes',
+    menu1: 'メニュー１',
+    'menu1-1': 'メニュー 1-1',
+    'menu1-2': 'メニュー 1-2',
+    'menu1-2-1': 'メニュー 1-2-1',
+    'menu1-2-2': 'メニュー 1-2-2',
+    'menu1-3': 'メニュー 1-3',
+    menu2: 'メニュー 2',
+    Table: 'Table',
+    dynamicTable: '可変 Table',
+    dragTable: 'Drag Table',
+    inlineEditTable: 'Inline Edit Table',
+    complexTable: 'Complex Table',
+    tab: 'Tab',
+    form: 'フォーム',
+    createArticle: '投稿作成',
+    editArticle: '投稿編集',
+    articleList: '投稿リスト',
+    errorPages: 'エラーページ',
+    page401: '401',
+    page404: '404',
+    errorLog: 'エラーログ',
+    excel: 'Excel',
+    exportExcel: '一括エクスポート',
+    selectExcel: '複数選択エクスポート',
+    mergeHeader: 'ヘッダーマージ',
+    uploadExcel: 'アップロード',
+    zip: 'Zip',
+    pdf: 'PDF',
+    exportZip: 'Export Zip',
+    theme: 'テーマ変更',
+    clipboardDemo: 'Clipboard',
+    i18n: '多言語',
+    externalLink: '外部リンク',
+    profile: 'プロフィール'
+  },
+  navbar: {
+    dashboard: 'トップ',
+    github: 'GitHub',
+    logOut: 'ログアウト',
+    profile: 'プロフィール',
+    theme: 'テーマ変更',
+    size: '画面サイズ'
+  },
+  login: {
+    title: 'ユーザログイン',
+    logIn: 'ログイン',
+    username: 'ユーザ名',
+    password: 'パスワード',
+    any: 'password',
+    thirdparty: '外部IDでログイン',
+    thirdpartyTips: 'ローカル環境ではログインできません。実装が必要です。'
+  },
+  documentation: {
+    documentation: 'ドキュメント',
+    github: 'Github Link'
+  },
+  permission: {
+    addRole: 'ロール追加',
+    editPermission: 'ロール変更',
+    roles: 'ロール',
+    switchRoles: 'ロール切替',
+    tips: 'v-permissionは使えない時があります。例えば: Element-UI の el-tab、 el-table-column 及び他の dom。v-ifを使う必要があります。',
+    delete: '削除',
+    confirm: '確認',
+    cancel: 'キャンセル'
+  },
+  guide: {
+    description: 'ガイドは各機能の説明です。',
+    button: 'ガイドを見る'
+  },
+  components: {
+    documentation: 'ドキュメント',
+    tinymceTips: 'tinymceは管理画面に重要な機能ですが、その同時に落とし穴がありあす。tinymceを使う道のりが大変でした。Tinymceを使う時に各自のプロジェクト状況で判断が必要です。ドキュメントはこちら',
+    dropzoneTips: 'Third partyのパッケージを使わず、独自の実装しています。詳細は @/components/Dropzone',
+    stickyTips: 'ページの指定位置へスクロールした場合、表示されます。',
+    backToTopTips1: 'トップへスクロールが表示されます。',
+    backToTopTips2: 'ボタンのスタイルはカスタマイズできます。例えば、show/hide、height、position。 またはElementのel-tooltipを使って、ツールチップを実装できます。',
+    imageUploadTips: 'mockjsは使えないため、カスタマイズしています。公式の最新バージョンを使ってください。'
+  },
+  table: {
+    dynamicTips1: '先頭は固定、最後に追加',
+    dynamicTips2: '戦後に追加せず、指定列に追加',
+    dragTips1: 'デフォルト順番',
+    dragTips2: 'Drag後の順番',
+    title: 'タイトル',
+    importance: '重要',
+    type: 'タイプ',
+    remark: '評価',
+    search: '検索',
+    add: '追加',
+    export: 'エクスポート',
+    reviewer: 'レビュアー',
+    id: '番号',
+    date: '日時',
+    author: '作成者',
+    readings: '閲覧数',
+    status: 'ステータス',
+    actions: '操作',
+    edit: '編集',
+    publish: '公開',
+    draft: '下書き',
+    delete: 'キャンセル',
+    cancel: 'キャンセル',
+    confirm: '確認'
+  },
+  example: {
+    warning: '新規作成と編集画面は keep-alive を使えないです。keep-alive の include はrouteのキャッシュは使えないです。そのため、component name を使ってキャッシュさせるようにします。このようなキャッシュ機能を作りたい場合，localStorageを使う手があります。もしくは keep-alive の includeを使って、全ページキャッシュする方法はあります。'
+  },
+  errorLog: {
+    tips: '右上のbugアイコンをクリックしてください。',
+    description: '管理画面はspaを使う場合が多い、ユーザ体現向上はできますが、想定外エラーが発生する場合があります。Vueはそのエラーハンドリング機能を提供し、エラーレポートができます。',
+    documentation: 'ドキュメント'
+  },
+  excel: {
+    export: 'エクスポート',
+    selectedExport: 'エクスポート対象を選択してください。',
+    placeholder: 'ファイル名を入力してください。'
+  },
+  zip: {
+    export: 'エクスポート',
+    placeholder: 'ファイル名を入力してください。'
+  },
+  pdf: {
+    tips: 'window.print() を使ってPDFダウンロードしています。'
+  },
+  theme: {
+    change: 'テーマ切替',
+    documentation: 'ドキュメント',
+    tips: 'Tips: テーマの切り替え方法はnavbarのtheme-pickと異なります、使い方はドキュメントを確認してください。'
+  },
+  tagsView: {
+    refresh: '更新',
+    close: '閉じる',
+    closeOthers: 'その他閉じる',
+    closeAll: 'すべて閉じる'
+  },
+  settings: {
+    title: 'システムテーマ',
+    theme: 'テーマ色',
+    tagsView: 'Tags-View 開く',
+    fixedHeader: 'Fixed Header',
+    sidebarLogo: 'Sidebar Logo'
+  }
+}
diff --git a/src/lang/zh.js b/src/lang/zh.js
new file mode 100644
index 0000000..eccf064
--- /dev/null
+++ b/src/lang/zh.js
@@ -0,0 +1,343 @@
+import module from './i18n/zh/module'
+
+export default {
+  route: {
+    dashboard: '首页',
+    documentation: '文档',
+    guide: '引导页',
+    permission: '权限测试页',
+    rolePermission: '角色权限',
+    pagePermission: '页面权限',
+    directivePermission: '指令权限',
+    icons: '图标',
+    components: '组件',
+    tinymce: '富文本编辑器',
+    markdown: 'Markdown',
+    jsonEditor: 'JSON 编辑器',
+    dndList: '列表拖拽',
+    splitPane: 'Splitpane',
+    avatarUpload: '头像上传',
+    dropzone: 'Dropzone',
+    sticky: 'Sticky',
+    countTo: 'Count To',
+    componentMixin: '小组件',
+    backToTop: '返回顶部',
+    dragDialog: '拖拽 Dialog',
+    dragSelect: '拖拽 Select',
+    dragKanban: '可拖拽看板',
+    charts: '图表',
+    keyboardChart: '键盘图表',
+    lineChart: '折线图',
+    mixChart: '混合图表',
+    example: '综合实例',
+    nested: '路由嵌套',
+    menu1: '菜单1',
+    'menu1-1': '菜单 1-1',
+    'menu1-2': '菜单 1-2',
+    'menu1-2-1': '菜单 1-2-1',
+    'menu1-2-2': '菜单 1-2-2',
+    'menu1-3': '菜单 1-3',
+    menu2: '菜单 2',
+    Table: 'Table',
+    dynamicTable: '动态 Table',
+    dragTable: '拖拽 Table',
+    inlineEditTable: 'Table 内编辑',
+    complexTable: '综合 Table',
+    tab: 'Tab',
+    form: '表单',
+    createArticle: '创建文章',
+    editArticle: '编辑文章',
+    articleList: '文章列表',
+    errorPages: '错误页面',
+    page401: '401',
+    page404: '404',
+    errorLog: '错误日志',
+    excel: 'Excel',
+    exportExcel: '导出 Excel',
+    selectExcel: '导出 已选择项',
+    mergeHeader: '导出 多级表头',
+    uploadExcel: '上传 Excel',
+    zip: 'Zip',
+    pdf: 'PDF',
+    exportZip: 'Export Zip',
+    theme: '换肤',
+    clipboardDemo: 'Clipboard',
+    i18n: '国际化',
+    externalLink: '外链',
+    profile: '个人中心'
+  },
+  navbar: {
+    dashboard: '首页',
+    github: '项目地址',
+    logOut: '退出登录',
+    profile: '个人中心',
+    theme: '换肤',
+    size: '布局大小'
+  },
+  login: {
+    title: '系统登录',
+    logIn: '登录',
+    username: '账号',
+    password: '密码',
+    any: '随便填',
+    thirdparty: '第三方登录',
+    thirdpartyTips: '本地不能模拟，请结合自己业务进行模拟！！！'
+  },
+  documentation: {
+    documentation: '文档',
+    github: 'Github 地址'
+  },
+  permission: {
+    addRole: '新增角色',
+    editPermission: '编辑权限',
+    roles: '你的权限',
+    switchRoles: '切换权限',
+    tips: '在某些情况下，不适合使用 v-permission。例如：Element-UI 的 el-tab 或 el-table-column 以及其它动态渲染 dom 的场景。你只能通过手动设置 v-if 来实现。',
+    delete: '删除',
+    confirm: '确定',
+    cancel: '取消'
+  },
+  guide: {
+    description: '引导页对于一些第一次进入项目的人很有用，你可以简单介绍下项目的功能。本 Demo 是基于',
+    button: '打开引导'
+  },
+  components: {
+    documentation: '文档',
+    tinymceTips: '富文本是管理后台一个核心的功能，但同时又是一个有很多坑的地方。在选择富文本的过程中我也走了不少的弯路，市面上常见的富文本都基本用过了，最终权衡了一下选择了Tinymce。更详细的富文本比较和介绍见',
+    dropzoneTips: '由于我司业务有特殊需求，而且要传七牛 所以没用第三方，选择了自己封装。代码非常的简单，具体代码你可以在这里看到 @/components/Dropzone',
+    stickyTips: '当页面滚动到预设的位置会吸附在顶部',
+    backToTopTips1: '页面滚动到指定位置会在右下角出现返回顶部按钮',
+    backToTopTips2: '可自定义按钮的样式、show/hide、出现的高度、返回的位置 如需文字提示，可在外部使用Element的el-tooltip元素',
+    imageUploadTips: '由于我在使用时它只有vue@1版本，而且和mockjs不兼容，所以自己改造了一下，如果大家要使用的话，优先还是使用官方版本。'
+  },
+  table: {
+    dynamicTips1: '固定表头, 按照表头顺序排序',
+    dynamicTips2: '不固定表头, 按照点击顺序排序',
+    dragTips1: '默认顺序',
+    dragTips2: '拖拽后顺序',
+    title: '标题',
+    importance: '重要性',
+    type: '类型',
+    remark: '点评',
+    search: '搜索',
+    add: '添加',
+    export: '导出',
+    reviewer: '审核人',
+    id: '序号',
+    date: '时间',
+    author: '作者',
+    readings: '阅读数',
+    status: '状态',
+    actions: '操作',
+    see: '查看',
+    edit: '编辑',
+    publish: '发布',
+    draft: '草稿',
+    delete: '删除',
+    cancel: '取 消',
+    confirm: '确 定'
+  },
+  example: {
+    warning: '创建和编辑页面是不能被 keep-alive 缓存的，因为keep-alive 的 include 目前不支持根据路由来缓存，所以目前都是基于 component name 来进行缓存的。如果你想类似的实现缓存效果，可以使用 localStorage 等浏览器缓存方案。或者不要使用 keep-alive 的 include，直接缓存所有页面。详情见'
+  },
+  errorLog: {
+    tips: '请点击右上角bug小图标',
+    description: '现在的管理后台基本都是spa的形式了，它增强了用户体验，但同时也会增加页面出问题的可能性，可能一个小小的疏忽就导致整个页面的死锁。好在 Vue 官网提供了一个方法来捕获处理异常，你可以在其中进行错误处理或者异常上报。',
+    documentation: '文档介绍',
+    timeoutTip: '网络连接超时'
+  },
+  excel: {
+    export: '导出',
+    selectedExport: '导出已选择项',
+    placeholder: '请输入文件名(默认excel-list)'
+  },
+  zip: {
+    export: '导出',
+    placeholder: '请输入文件名(默认file)'
+  },
+  pdf: {
+    tips: '这里使用   window.print() 来实现下载pdf的功能'
+  },
+  theme: {
+    change: '换肤',
+    documentation: '换肤文档',
+    tips: 'Tips: 它区别于 navbar 上的 theme-pick, 是两种不同的换肤方法，各自有不同的应用场景，具体请参考文档。'
+  },
+  tagsView: {
+    refresh: '刷新',
+    close: '关闭',
+    closeOthers: '关闭其它',
+    closeAll: '关闭所有'
+  },
+  settings: {
+    title: '系统布局配置',
+    theme: '主题色',
+    tagsView: '开启 Tags-View',
+    fixedHeader: '固定 Header',
+    sidebarLogo: '侧边栏 Logo'
+  },
+  userManage: {
+    userId: '用户ID',
+    userName: '用户名',
+    email: '邮箱',
+    mobile: '手机号',
+    status: '状态',
+    org: '组织',
+    pwd: '密码',
+    userstartstop: '用户启停',
+    resetPwd: '重置密码',
+    birthday: '生日',
+    orgName: '组织',
+    sex: '性别',
+    code: '工号',
+    remark: '备注',
+    AssignRole: '分配角色'
+  },
+  orgManage: {
+    index: '序号',
+    orgName: '组织名',
+    contact: '联系人',
+    email: '邮箱',
+    phone: '手机号',
+    status: '状态',
+    remark: '备注',
+    parentOrg: '所属组织',
+    address: '地址'
+  },
+  roleManage: {
+    roleCode: '角色编码',
+    roleName: '角色名称',
+    roleType: '角色分类',
+    roleEmPower: '角色授权',
+    isManager: '是否为管理员',
+    isPresupposition: '是否为预设',
+    assignRole: '是否分配角色',
+    status: '状态',
+    remark: '角色描述',
+    rolestartstop: '角色启停'
+  },
+  menuManage: {
+    menuCode: '菜单编码',
+    menuName: '菜单名称',
+    href: '链接地址',
+    menuClassify: '菜单分类',
+    icon: '图标',
+    menuURL: '菜单URL',
+    sortNumber: '排序号',
+    authorizationMark: '授权标识',
+    parentName: '上级菜单',
+    enName: '英文名',
+    permissionText: '多个用逗号分隔,如:user:list,user:add',
+    name: '名称',
+    checked: '是否分配',
+    permission: '权限',
+    type: '类型',
+    status: '状态',
+    remark: '备注',
+    menustartstop: '菜单启停'
+  },
+  choisePart: {
+    module: '模块待开发！'
+  },
+  upload: {
+    picAlarm: '请上传图片格式文件！',
+    delPic: '确认删除该图片?',
+    picSizeAlarm: '上传文件最大限制10M！'
+  },
+  module,
+  deleteTip: {
+    header: '请确认对[',
+    footer: '] 执行 [删除] 操作?',
+    tip: '提示',
+    confirm: '确认',
+    cancel: '取消',
+    this: '此条'
+  },
+  deleteMsgBox: {
+    hint: '提示',
+    content: '此操作将删除该项记录，是否继续？',
+    doneMsg: '删除成功！'
+  },
+  baseTip: {
+    OperationSucc: '操作成功！'
+  },
+  btn: {
+    confirm: '确定',
+    cancel: '取消'
+  },
+  datePickerOption: {
+    lastWeek: 'Last Week',
+    lastMonth: 'Last Month',
+    lastThreeMonths: 'Last Three Months'
+  },
+  baseDict: {
+    enableState: {
+      'no': '停用',
+      'yes': '启用'
+    },
+    yesOrNo: {
+      'no': '否',
+      'yes': '是'
+    },
+    bool2String: {
+      'yes': '是',
+      'no': '否'
+    },
+    doneStatus: {
+      'no': '未完成',
+      'yes': '已完成'
+    },
+    sex: {
+      'man': '男',
+      'woman': '女'
+    }
+  },
+  basicDataFilter: {
+    sex: {
+      'all': '全部',
+      'man': '男',
+      'woman': '女'
+    },
+    onDuty: {
+      'no': '否',
+      'yes': '是'
+    },
+    orderStatus: {
+      'add': '新增',
+      'start': '启动',
+      'stop': '暂停',
+      'issued': '已下发',
+      'complete': '完成'
+    },
+    workOrderStatus: {
+      'notactive': '未激活',
+      'waiting': '等待',
+      'active': '激活',
+      'stop': '暂停',
+      'complete': '完成'
+    },
+    priority: {
+      'low': '低',
+      'normal': '正常',
+      'high': '高'
+    },
+    workStatus: {
+      'fail': '失败',
+      'success': '成功'
+    },
+    menuType: {
+      'catalogue': '目录',
+      'menu': '菜单',
+      'button': '按钮'
+    },
+    enableState: {
+      'disable': '停用',
+      'enable': '启用'
+    },
+    storage: {
+      'normal': '正常',
+      'repairing': '维修中',
+      'scrap': '报废'
+    }
+  }
+}
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index a897638..695c200 100644
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -33,6 +33,7 @@ export default {
 
 .fixed-header+.app-main {
   padding-top: 50px;
+  padding-bottom: 50px;
 }
 
 .hasTagsView {
diff --git a/src/layout/components/Footerbar.vue b/src/layout/components/Footerbar.vue
new file mode 100644
index 0000000..c0dfa38
--- /dev/null
+++ b/src/layout/components/Footerbar.vue
@@ -0,0 +1,37 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-01-27 10:07:42
+ * @LastEditTime: 2021-03-02 10:11:08
+ * @LastEditors: gtz
+ * @Description: In User Settings Edit
+ * @FilePath: \mt-bus-fe\src\layout\components\FooterBar.vue
+-->
+<template>
+  <div class="footerbar">
+    © {{ 'copyright.company' | i18nFilter }}
+  </div>
+</template>
+
+<script>
+
+export default {
+  components: {},
+  computed: {},
+  watch: {},
+  methods: {}
+}
+</script>
+
+<style lang="scss">
+.footerbar{
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  height: 50px;
+  line-height: 50px;
+  text-indent: 2em;
+  background: #fff;
+  z-index: 999;
+  box-shadow: 2px -2px 2px rgba($color: #000000, $alpha: .1);
+}
+</style>
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index 37bc1e6..b390811 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -1,82 +1,215 @@
 <template>
   <div class="navbar">
-    <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
+    <hamburger v-if="showhome" id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
+
+    <div v-if="showTitle" style="font-size: 20px; float: left; font-weight: bold; padding-left: 20px; color: #606266">
+      <img src="../../assets/img/cnbm.png" style="width: 1.6em; height: 1.6em; position: relative; top: .4em" alt="">
+      {{ 'title' | i18nFilter }}
+    </div>
 
     <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
 
     <div class="right-menu">
-      <template v-if="device!=='mobile'">
-        <search id="header-search" class="right-menu-item" />
 
-        <error-log class="errLog-container right-menu-item hover-effect" />
-
-        <screenfull id="screenfull" class="right-menu-item hover-effect" />
-
-        <el-tooltip content="Global Size" effect="dark" placement="bottom">
-          <size-select id="size-select" class="right-menu-item hover-effect" />
-        </el-tooltip>
+      <div v-if="showhome" class="right-menu-back" @click="toHome">
+        <svg-icon class="item-icon" icon-class="home" />
+        {{ 'navbar.homepage' | i18nFilter }}
+      </div>
+      <div class="right-menu-back">
+        <el-badge :value="alarmList.length" class="item" style="line-height: 0; margin: 0 10px;" @click.native="toAlarm">
+          <svg-icon style="width: 24px; height: 24px" class="item-icon" icon-class="alarm" />
+        </el-badge>
+      </div>
 
+      <template>
+        <lang-select class="right-menu-item hover-effect" />
       </template>
+      <div v-if="showhome" class="right-menu-back">
+        <a href="Lodap.zip"><i class="el-icon-download" /></a>
+      </div>
+      <div class="right-menu-back">
+        <i class="el-icon-alarm-clock" />
+        {{ formatTime }}
+      </div>
 
       <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
         <div class="avatar-wrapper">
-          <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
-          <i class="el-icon-caret-bottom" />
+          <img :src="require('@/assets/img/head.png')" class="user-avatar">
+          <div class="avatar-username">{{ username }}</div>
+          <!-- <i class="el-icon-caret-bottom" /> -->
         </div>
         <el-dropdown-menu slot="dropdown">
           <router-link to="/profile/index">
-            <el-dropdown-item>Profile</el-dropdown-item>
+            <el-dropdown-item>
+              <svg-icon class="item-icon" icon-class="user" />
+              {{ 'navbar.profile' | i18nFilter }}
+            </el-dropdown-item>
           </router-link>
-          <router-link to="/">
-            <el-dropdown-item>Dashboard</el-dropdown-item>
-          </router-link>
-          <a target="_blank" href="https://github.com/PanJiaChen/vue-element-admin/">
-            <el-dropdown-item>Github</el-dropdown-item>
-          </a>
-          <a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/">
-            <el-dropdown-item>Docs</el-dropdown-item>
-          </a>
-          <el-dropdown-item divided @click.native="logout">
-            <span style="display:block;">Log Out</span>
+          <el-dropdown-item @click.native="toHome">
+            <svg-icon class="item-icon" icon-class="help" />
+            {{ 'navbar.help' | i18nFilter }}
+          </el-dropdown-item>
+          <el-dropdown-item @click.native="logout">
+            <svg-icon class="item-icon" icon-class="logout" />
+            {{ 'navbar.logOut' | i18nFilter }}
           </el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
+      <!-- <div class="right-menu-back" @click="toHome">
+        <svg-icon class="item-icon" icon-class="help" />
+        {{ 'navbar.help' | i18nFilter }}
+      </div>
+
+      <div class="right-menu-back" @click="logout">
+        <svg-icon class="item-icon" icon-class="logout" />
+        {{ 'navbar.logOut' | i18nFilter }}
+      </div> -->
     </div>
   </div>
 </template>
 
 <script>
+import axios from 'axios'
 import { mapGetters } from 'vuex'
+import { alarmInfoList } from '@/api/basicData/AlarmManagement/alarmInfo'
 import Breadcrumb from '@/components/Breadcrumb'
 import Hamburger from '@/components/Hamburger'
-import ErrorLog from '@/components/ErrorLog'
-import Screenfull from '@/components/Screenfull'
-import SizeSelect from '@/components/SizeSelect'
-import Search from '@/components/HeaderSearch'
+import LangSelect from '@/components/LangSelect'
+import moment from 'moment'
+
+let logoutInterval = null
 
 export default {
   components: {
     Breadcrumb,
     Hamburger,
-    ErrorLog,
-    Screenfull,
-    SizeSelect,
-    Search
+    LangSelect
+  },
+  props: {
+    showhome: {
+      type: Boolean,
+      default: () => {
+        return true
+      }
+    },
+    showTitle: {
+      type: Boolean,
+      default: () => {
+        return false
+      }
+    }
+  },
+  data() {
+    return {
+      logoutTime: 1800000,
+      alarmList: [],
+      blurTime: null
+    }
   },
   computed: {
     ...mapGetters([
       'sidebar',
       'avatar',
-      'device'
-    ])
+      'username',
+      'choicepart'
+    ]),
+    formatTime() {
+      return moment(this.logoutTime - 28800000).format('HH:mm:ss')
+    }
+  },
+  watch: {
+    logoutTime: function(val) {
+      if (val <= 0) {
+        this.logout()
+      }
+    },
+    $route: function() {
+      this.getAlarm()
+    }
+  },
+  mounted() {
+    this.getAlarm()
+    logoutInterval = setInterval(() => {
+      this.logoutTime -= 1000
+    }, 1000)
+    addEventListener('click', this.logoutTimeReset)
+    addEventListener('keydown', this.logoutTimeReset)
+    addEventListener('visibilitychange', this.visibilitychangeListener)
+  },
+  destroyed() {
+    clearInterval(logoutInterval)
+    removeEventListener('click', this.logoutTimeReset)
+    removeEventListener('keydown', this.logoutTimeReset)
+    removeEventListener('visibilitychange', this.visibilitychangeListener)
   },
   methods: {
+    // 浏览器失去焦点
+    winBlur() {
+      this.blurTime = new Date()
+      clearInterval(logoutInterval)
+    },
+    // 浏览器获取焦点
+    winFocus() {
+      if (this.logoutTime - (new Date() - this.blurTime).valueOf() <= 0) {
+        this.logout()
+      } else {
+        this.logoutTime -= (new Date() - this.blurTime).valueOf()
+        logoutInterval = setInterval(() => {
+          this.logoutTime -= 1000
+        }, 1000)
+      }
+    },
+    // 重置退出时间
+    logoutTimeReset() {
+      this.logoutTime = 1800000
+    },
+    visibilitychangeListener() {
+      if (document.hidden) {
+        this.winBlur()
+      } else {
+        this.winFocus()
+      }
+    },
     toggleSideBar() {
       this.$store.dispatch('app/toggleSideBar')
     },
     async logout() {
+      console.log("sessionStorage.getItem('loginspc')", sessionStorage.getItem('loginspc'))
+      if (sessionStorage.getItem('loginspc') === 'login') {
+        const spcUrl = `/spc/upms/userinfo/logoutUser?account=${'ZJCadmin'}`
+        axios.get(spcUrl).then(res => {
+          if (res.data.code !== 'OK') {
+            this.$message.error(this.$t('module.quality.spc.error'))
+          }
+          sessionStorage.setItem('loginspc', 'logout')
+        })
+      }
       await this.$store.dispatch('user/logout')
+      console.log('`/login?redirect=${this.$route.fullPath}`', `/login?redirect=${this.$route.fullPath}`)
       this.$router.push(`/login?redirect=${this.$route.fullPath}`)
+      clearInterval(logoutInterval)
+    },
+    async toHome() {
+      this.$store.dispatch('app/setChoicepart')
+      this.$router.push('/')
+    },
+    getAlarm() {
+      alarmInfoList({
+        current: 1,
+        size: 1000,
+        alarmType: '',
+        code: '',
+        alarmGrade: ''
+      }).then(response => {
+        if (response.data.records) {
+          this.alarmList = response.data.records
+        } else {
+          this.alarmList = []
+        }
+      })
+    },
+    toAlarm() {
+      this.$router.push('/AlarmManagement/AlarmInfo')
     }
   }
 }
@@ -116,11 +249,21 @@ export default {
     float: right;
     height: 100%;
     line-height: 50px;
-
+    position: relative;
     &:focus {
       outline: none;
     }
 
+    .right-menu-back{
+      display: inline-block;
+      vertical-align: text-bottom;
+      font-size: 14px;
+      padding: 0 8px;
+      text-align: center;
+      cursor: pointer;
+      color: #606266;
+    }
+
     .right-menu-item {
       display: inline-block;
       padding: 0 8px;
@@ -140,7 +283,7 @@ export default {
     }
 
     .avatar-container {
-      margin-right: 30px;
+      margin-right: 20px;
 
       .avatar-wrapper {
         margin-top: 5px;
@@ -153,6 +296,12 @@ export default {
           border-radius: 10px;
         }
 
+        .avatar-username {
+          display: inline-block;
+          position: relative;
+          top: -14px;
+        }
+
         .el-icon-caret-bottom {
           cursor: pointer;
           position: absolute;
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
index 32ef018..56219d8 100644
--- a/src/layout/components/Settings/index.vue
+++ b/src/layout/components/Settings/index.vue
@@ -1,25 +1,25 @@
 <template>
   <div class="drawer-container">
     <div>
-      <h3 class="drawer-title">Page style setting</h3>
+      <h3 class="drawer-title">{{ 'settings.title' | i18nFilter }}</h3>
 
       <div class="drawer-item">
-        <span>Theme Color</span>
+        <span>{{ 'settings.theme' | i18nFilter }}</span>
         <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
       </div>
 
       <div class="drawer-item">
-        <span>Open Tags-View</span>
+        <span>{{ 'settings.tagsView' | i18nFilter }}</span>
         <el-switch v-model="tagsView" class="drawer-switch" />
       </div>
 
       <div class="drawer-item">
-        <span>Fixed Header</span>
+        <span>{{ 'settings.fixedHeader' | i18nFilter }}</span>
         <el-switch v-model="fixedHeader" class="drawer-switch" />
       </div>
 
       <div class="drawer-item">
-        <span>Sidebar Logo</span>
+        <span>{{ 'settings.sidebarLogo' | i18nFilter }}</span>
         <el-switch v-model="sidebarLogo" class="drawer-switch" />
       </div>
 
diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue
index aa1f5da..b515f61 100644
--- a/src/layout/components/Sidebar/Item.vue
+++ b/src/layout/components/Sidebar/Item.vue
@@ -17,11 +17,7 @@ export default {
     const vnodes = []
 
     if (icon) {
-      if (icon.includes('el-icon')) {
-        vnodes.push(<i class={[icon, 'sub-el-icon']} />)
-      } else {
-        vnodes.push(<svg-icon icon-class={icon}/>)
-      }
+      vnodes.push(<svg-icon icon-class={icon}/>)
     }
 
     if (title) {
@@ -31,11 +27,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-.sub-el-icon {
-  color: currentColor;
-  width: 1em;
-  height: 1em;
-}
-</style>
diff --git a/src/layout/components/Sidebar/Logo.vue b/src/layout/components/Sidebar/Logo.vue
index ac0c8d8..e6b2657 100644
--- a/src/layout/components/Sidebar/Logo.vue
+++ b/src/layout/components/Sidebar/Logo.vue
@@ -1,13 +1,20 @@
+<!--
+ * @Author: gtz
+ * @Date: 2021-01-27 10:07:42
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-03-12 17:07:14
+ * @Description: file content
+-->
 <template>
   <div class="sidebar-logo-container" :class="{'collapse':collapse}">
     <transition name="sidebarLogoFade">
       <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
         <img v-if="logo" :src="logo" class="sidebar-logo">
-        <h1 v-else class="sidebar-title">{{ title }} </h1>
+        <h1 v-else :style="{fontSize}" class="sidebar-title">{{ title }} </h1>
       </router-link>
       <router-link v-else key="expand" class="sidebar-logo-link" to="/">
         <img v-if="logo" :src="logo" class="sidebar-logo">
-        <h1 class="sidebar-title">{{ title }} </h1>
+        <h1 :style="{fontSize}" class="sidebar-title">{{ title }} </h1>
       </router-link>
     </transition>
   </div>
@@ -20,12 +27,19 @@ export default {
     collapse: {
       type: Boolean,
       required: true
+    },
+    title: {
+      type: String,
+      required: true
+    },
+    fontSize: {
+      type: String,
+      required: true
     }
   },
   data() {
     return {
-      title: 'Vue Element Admin',
-      logo: 'https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png'
+      logo: require('../../../assets/img/cnbm.png')
     }
   }
 }
@@ -47,7 +61,7 @@ export default {
   height: 50px;
   line-height: 50px;
   background: #2b2f3a;
-  text-align: center;
+  padding-left: 10px;
   overflow: hidden;
 
   & .sidebar-logo-link {
@@ -65,6 +79,10 @@ export default {
       display: inline-block;
       margin: 0;
       color: #fff;
+      width: 240px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
       font-weight: 600;
       line-height: 50px;
       font-size: 14px;
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
index a418c3d..f09d797 100644
--- a/src/layout/components/Sidebar/SidebarItem.vue
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -2,15 +2,25 @@
   <div v-if="!item.hidden">
     <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
       <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
-        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
-          <item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" />
-        </el-menu-item>
+        <el-tooltip class="item" effect="dark" :content="onlyOneChild.meta.title" placement="right">
+          <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
+            <div class="menu-item-box">
+              <item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" />
+            </div>
+          </el-menu-item>
+        </el-tooltip>
       </app-link>
     </template>
-
     <el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
+
       <template slot="title">
-        <item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" />
+        <el-tooltip class="item" effect="dark" :content="item.meta.title" placement="right">
+          <div class="tooltip-box">
+            <div class="menu-item-box">
+              <item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" />
+            </div>
+          </div>
+        </el-tooltip>
       </template>
       <sidebar-item
         v-for="child in item.children"
@@ -56,6 +66,12 @@ export default {
     this.onlyOneChild = null
     return {}
   },
+  computed: {
+    itemChildren() {
+      return this.item.children.filter(subRoute => !subRoute.meta.hidden)
+      // return this.rawItem.children.filter(subRoute => !subRoute.hidden)
+    }
+  },
   methods: {
     hasOneShowingChild(children = [], parent) {
       const showingChildren = children.filter(item => {
@@ -93,3 +109,28 @@ export default {
   }
 }
 </script>
+
+<style lang="scss">
+.el-menu-item{
+  .menu-item-box{
+    width: 100%;
+    overflow:hidden;
+    text-overflow:ellipsis;
+    white-space:nowrap;
+  }
+}
+.el-submenu__title{
+  .tooltip-box{
+    position: relative;
+    left: 20px;
+    .menu-item-box{
+      position: relative;
+      right: 20px;
+      width: calc(100% - 18px);
+      overflow:hidden;
+      text-overflow:ellipsis;
+      white-space:nowrap;
+    }
+  }
+}
+</style>
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
index fb014a2..30d718c 100644
--- a/src/layout/components/Sidebar/index.vue
+++ b/src/layout/components/Sidebar/index.vue
@@ -1,6 +1,14 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-01-27 10:07:42
+ * @LastEditTime: 2021-03-08 11:59:59
+ * @LastEditors: gtz
+ * @Description: In User Settings Edit
+ * @FilePath: \mt-bus-fe\src\layout\components\Sidebar\index.vue
+-->
 <template>
   <div :class="{'has-logo':showLogo}">
-    <logo v-if="showLogo" :collapse="isCollapse" />
+    <logo v-if="showLogo" :font-size="language === 'en' ? '16px' : '12px'" :title="'title' | i18nFilter" :collapse="isCollapse" />
     <el-scrollbar wrap-class="scrollbar-wrapper">
       <el-menu
         :default-active="activeMenu"
@@ -12,7 +20,7 @@
         :collapse-transition="false"
         mode="vertical"
       >
-        <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" />
+        <sidebar-item v-for="route in routeList" :key="route.path" :item="route" :base-path="route.path" />
       </el-menu>
     </el-scrollbar>
   </div>
@@ -23,14 +31,32 @@ import { mapGetters } from 'vuex'
 import Logo from './Logo'
 import SidebarItem from './SidebarItem'
 import variables from '@/styles/variables.scss'
-
+// import { constantRoutes } from '@/router'
+import store from '@/store'
 export default {
   components: { SidebarItem, Logo },
   computed: {
     ...mapGetters([
-      'permission_routes',
-      'sidebar'
+      'sidebar',
+      'choicepart',
+      'language'
     ]),
+    partList() {
+      const cangoList = []
+      const constantRoutes = store.getters.permission_routes
+      constantRoutes.map(item => {
+        if (!item.hidden && item.meta) {
+          cangoList.push(item)
+        }
+      })
+      const formatList = cangoList.map((item, index) => {
+        return this.setIndex(item, index)
+      })
+      return formatList
+    },
+    routeList() {
+      return [this.partList[this.choicepart]]
+    },
     activeMenu() {
       const route = this.$route
       const { meta, path } = route
@@ -49,6 +75,24 @@ export default {
     isCollapse() {
       return !this.sidebar.opened
     }
+  },
+  watch: {
+    $route: function(val) {
+      if (val.meta.routeIndex >= 0) {
+        this.$store.dispatch('app/setChoicepart', val.meta.routeIndex)
+      }
+    }
+  },
+  methods: {
+    setIndex(list, index) {
+      list.meta.routeIndex = index
+      if (list.children) {
+        list.children.map(item => {
+          this.setIndex(item, index)
+        })
+      }
+      return list
+    }
   }
 }
 </script>
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
index d2a56e7..b7246c3 100644
--- a/src/layout/components/TagsView/index.vue
+++ b/src/layout/components/TagsView/index.vue
@@ -10,17 +10,17 @@
         tag="span"
         class="tags-view-item"
         @click.middle.native="!isAffix(tag)?closeSelectedTag(tag):''"
-        @contextmenu.prevent.native="openMenu(tag,$event)"
       >
+        <!-- @contextmenu.prevent.native="openMenu(tag,$event)" 在上面一行 -->
         {{ tag.title }}
-        <span v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
+        <span class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
       </router-link>
     </scroll-pane>
     <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
-      <li @click="refreshSelectedTag(selectedTag)">Refresh</li>
-      <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">Close</li>
-      <li @click="closeOthersTags">Close Others</li>
-      <li @click="closeAllTags(selectedTag)">Close All</li>
+      <li @click="refreshSelectedTag(selectedTag)">{{ 'tagsView.refresh' | i18nFilter }}</li>
+      <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">{{ 'tagsView.close' | i18nFilter }}</li>
+      <li @click="closeOthersTags">{{ 'tagsView.closeOthers' | i18nFilter }}</li>
+      <li @click="closeAllTags(selectedTag)">{{ 'tagsView.closeAll' | i18nFilter }}</li>
     </ul>
   </div>
 </template>
@@ -45,7 +45,8 @@ export default {
       return this.$store.state.tagsView.visitedViews
     },
     routes() {
-      return this.$store.state.permission.routes
+      // return this.$store.state.permission.routes
+      return []
     }
   },
   watch: {
@@ -95,6 +96,7 @@ export default {
     },
     initTags() {
       const affixTags = this.affixTags = this.filterAffixTags(this.routes)
+      console.log('affixTags', affixTags)
       for (const tag of affixTags) {
         // Must have tag name
         if (tag.name) {
diff --git a/src/layout/components/index.js b/src/layout/components/index.js
index 104bd3a..6b04e2c 100644
--- a/src/layout/components/index.js
+++ b/src/layout/components/index.js
@@ -1,5 +1,13 @@
+/*
+ * @Author: gtz
+ * @Date: 2021-01-27 10:07:42
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-02-24 14:42:30
+ * @Description: file content
+ */
 export { default as AppMain } from './AppMain'
 export { default as Navbar } from './Navbar'
+export { default as Footerbar } from './Footerbar'
 export { default as Settings } from './Settings'
 export { default as Sidebar } from './Sidebar/index.vue'
 export { default as TagsView } from './TagsView/index.vue'
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 965bcd1..e088cd2 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -11,13 +11,14 @@
       <right-panel v-if="showSettings">
         <settings />
       </right-panel>
+      <footerbar />
     </div>
   </div>
 </template>
 
 <script>
 import RightPanel from '@/components/RightPanel'
-import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
+import { AppMain, Navbar, Settings, Sidebar, TagsView, Footerbar } from './components'
 import ResizeMixin from './mixin/ResizeHandler'
 import { mapState } from 'vuex'
 
@@ -29,7 +30,8 @@ export default {
     RightPanel,
     Settings,
     Sidebar,
-    TagsView
+    TagsView,
+    Footerbar
   },
   mixins: [ResizeMixin],
   computed: {
diff --git a/src/main.js b/src/main.js
index b5fa135..c4f4aed 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,3 +1,10 @@
+/*
+ * @Date: 2020-12-14 09:07:03
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-04-26 09:32:40
+ * @FilePath: \basic-admin\src\main.js
+ * @Description: 入口文件、配置项、挂载全局变量等
+ */
 import Vue from 'vue'
 
 import Cookies from 'js-cookie'
@@ -6,18 +13,20 @@ import 'normalize.css/normalize.css' // a modern alternative to CSS resets
 
 import Element from 'element-ui'
 import './styles/element-variables.scss'
-import enLang from 'element-ui/lib/locale/lang/en'// 如果使用中文语言包请默认支持，无需额外引入，请删除该依赖
 
 import '@/styles/index.scss' // global css
-
+import '@/utils/bus.js'
 import App from './App'
 import store from './store'
 import router from './router'
-
+import i18n from './lang' // internationalization
 import './icons' // icon
 import './permission' // permission control
 import './utils/error-log' // error log
 
+import '@/components/ListDialog'
+import '@/components/PicReview'
+
 import * as filters from './filters' // global filters
 
 /**
@@ -28,14 +37,14 @@ import * as filters from './filters' // global filters
  * Currently MockJs will be used in the production environment,
  * please remove it before going online ! ! !
  */
-if (process.env.NODE_ENV === 'production') {
-  const { mockXHR } = require('../mock')
-  mockXHR()
-}
+// if (process.env.NODE_ENV === 'production') {
+//   const { mockXHR } = require('../mock')
+//   mockXHR()
+// }
 
 Vue.use(Element, {
   size: Cookies.get('size') || 'medium', // set element-ui default size
-  locale: enLang // 如果使用中文，无需设置，请删除
+  i18n: (key, value) => i18n.t(key, value)
 })
 
 // register global utility filters
@@ -45,9 +54,12 @@ Object.keys(filters).forEach(key => {
 
 Vue.config.productionTip = false
 
+Vue.prototype.$i18nForm = filters.i18nFilterForm
+
 new Vue({
   el: '#app',
   router,
+  i18n,
   store,
   render: h => h(App)
 })
diff --git a/src/option.js b/src/option.js
new file mode 100644
index 0000000..e96b24e
--- /dev/null
+++ b/src/option.js
@@ -0,0 +1,14 @@
+// export const uploadLink = '/dump-api/upload/one'
+export default {
+  commonSettings: {
+    mainRGB: ['#00cfff', '#aafb4d', '#0ff7ff', '#ffff92', '#ffc17d', '#4bfdc6', '#8df97d', '#8963f8', '#6155e9', '#142e6f', '#bc1ad0', '#ff71b2'], // 几组 颜色预设
+    mainColor: ['#00cfff', '#aafb4d', '#0ff7ff', '#ffff92', '#ffc17d', '#4bfdc6', '#8df97d', '#8963f8', '#6155e9', '#142e6f', '#bc1ad0', '#ff71b2'], // 几组 颜色预设
+    presetRGB: ['#ffc17d', '#4bfdc6', '#8df97d', '#8963f8', '#6155e9', '#142e6f', '#bc1ad0', '#ff71b2'],
+    // presetColor: [],
+    backgroundColor: ['#0654bf', '#00062e'],
+    textColor: '#fff'
+  }
+  // methods: {
+  //   valueRGBGen: (arrRGB, opacity = 1) => `rgba(${arrRGB.concat([opacity]).toString()})`
+  // }
+}
diff --git a/src/permission.js b/src/permission.js
index ff5eaad..0236e56 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -1,13 +1,20 @@
+/*
+ * @Date: 2020-12-14 09:07:03
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-02-25 09:42:36
+ * @FilePath: \basic-admin\src\permission.js
+ * @Description: 路由权限检查
+ */
 import router from './router'
-import store from './store'
+// import { resetRouter } from '@/router'
 import { Message } from 'element-ui'
 import NProgress from 'nprogress' // progress bar
 import 'nprogress/nprogress.css' // progress bar style
 import { getToken } from '@/utils/auth' // get token from cookie
 import getPageTitle from '@/utils/get-page-title'
-
-NProgress.configure({ showSpinner: false }) // NProgress Configuration
-
+// import { usePermission } from './settings'
+NProgress.configure({ showSpinner: true }) // NProgress Configuration
+import store from '@/store'
 const whiteList = ['/login', '/auth-redirect'] // no redirect whitelist
 
 router.beforeEach(async(to, from, next) => {
@@ -19,49 +26,54 @@ router.beforeEach(async(to, from, next) => {
 
   // determine whether the user has logged in
   const hasToken = getToken()
-
+  console.log('hasToken=' + hasToken)
+  console.log('to.path=' + to.path)
   if (hasToken) {
     if (to.path === '/login') {
       // if is logged in, redirect to the home page
+      console.log('/login', store.getters.menus)
       next({ path: '/' })
       NProgress.done() // hack: https://github.com/PanJiaChen/vue-element-admin/pull/2939
     } else {
-      // determine whether the user has obtained his permission roles through getInfo
-      const hasRoles = store.getters.roles && store.getters.roles.length > 0
+      const hasRoles = store.getters.menus && store.getters.menus.length > 0
+      console.log('store.getters.menus', store.getters.menus)
+      console.log('store.getters', store.getters)
+      console.log('hasRoles=', hasRoles)
       if (hasRoles) {
+        console.log('hasRoles=', store.getters.menus)
         next()
+        NProgress.done()
       } else {
         try {
-          // get user info
-          // note: roles must be a object array! such as: ['admin'] or ,['developer','editor']
-          const { roles } = await store.dispatch('user/getInfo')
-
-          // generate accessible routes map based on roles
-          const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
-
-          // dynamically add accessible routes
+          //   // generate accessible routes map based on roles
+          const { menus } = await store.dispatch('user/getInfo')
+          console.log(menus)
+          const accessRoutes = await store.dispatch('permission/generateRoutes', menus)
+          console.log('accessRoutes', accessRoutes)
           router.addRoutes(accessRoutes)
-
-          // hack method to ensure that addRoutes is complete
-          // set the replace: true, so the navigation will not leave a history record
           next({ ...to, replace: true })
+        // hack method to ensure that addRoutes is complete
+        // set the replace: true, so the navigation will not leave a history record
+        // next({ ...to, replace: true })
         } catch (error) {
-          // remove token and go to login page to re-login
+        // remove token and go to login page to re-login
+          next(`/login?redirect=${to.path}`)
           await store.dispatch('user/resetToken')
           Message.error(error || 'Has Error')
-          next(`/login?redirect=${to.path}`)
           NProgress.done()
         }
       }
     }
   } else {
     /* has no token*/
-
+    console.log('has no token to.path=' + to.path)
+    console.log('whiteList.indexOf(to.path)=' + whiteList.indexOf(to.path))
     if (whiteList.indexOf(to.path) !== -1) {
       // in the free login whitelist, go directly
       next()
     } else {
       // other pages that do not have permission to access are redirected to the login page.
+      // next()
       next(`/login?redirect=${to.path}`)
       NProgress.done()
     }
diff --git a/src/router/index.js b/src/router/index.js
index 2be959d..202e659 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,16 +1,19 @@
 import Vue from 'vue'
 import Router from 'vue-router'
+import i18n from '@/lang/i18n'
+import Cookies from 'js-cookie'
+import store from '@/store'
+
+const routerTitle = i18n.routerTitle
+const language = Cookies.get('language')
 
 Vue.use(Router)
 
 /* Layout */
 import Layout from '@/layout'
-
-/* Router Modules */
-import componentsRouter from './modules/components'
-import chartsRouter from './modules/charts'
-import tableRouter from './modules/table'
-import nestedRouter from './modules/nested'
+// import teamRouter from './modules/team'
+// import materialManageRouter from './modules/material-manage'
+// import artManageRouter from './modules/art-manage'
 
 /**
  * Note: sub-menu only appear when route children.length >= 1
@@ -25,7 +28,7 @@ import nestedRouter from './modules/nested'
  * meta : {
     roles: ['admin','editor']    control the page roles (you can set multiple roles)
     title: 'title'               the name show in sidebar and breadcrumb (recommend set)
-    icon: 'svg-name'/'el-icon-x' the icon show in the sidebar
+    icon: 'svg-name'             the icon show in the sidebar
     noCache: true                if set true, the page will no be cached(default is false)
     affix: true                  if set true, the tag will affix in the tags-view
     breadcrumb: false            if set false, the item will hidden in breadcrumb(default is true)
@@ -56,10 +59,16 @@ export const constantRoutes = [
     hidden: true
   },
   {
-    path: '/auth-redirect',
-    component: () => import('@/views/login/auth-redirect'),
-    hidden: true
+    path: '/',
+    component: () => import('@/views/ChoicePart'),
+    hidden: true,
+    meta: { requireToken: true }
   },
+  // {
+  //   path: '/auth-redirect',
+  //   component: () => import('@/views/login/auth-redirect'),
+  //   hidden: true
+  // },
   {
     path: '/404',
     component: () => import('@/views/error-page/404'),
@@ -69,336 +78,1272 @@ export const constantRoutes = [
     path: '/401',
     component: () => import('@/views/error-page/401'),
     hidden: true
-  },
-  {
-    path: '/',
-    component: Layout,
-    redirect: '/dashboard',
-    children: [
-      {
-        path: 'dashboard',
-        component: () => import('@/views/dashboard/index'),
-        name: 'Dashboard',
-        meta: { title: 'Dashboard', icon: 'dashboard', affix: true }
-      }
-    ]
-  },
-  {
-    path: '/documentation',
-    component: Layout,
-    children: [
-      {
-        path: 'index',
-        component: () => import('@/views/documentation/index'),
-        name: 'Documentation',
-        meta: { title: 'Documentation', icon: 'documentation', affix: true }
-      }
-    ]
-  },
-  {
-    path: '/guide',
-    component: Layout,
-    redirect: '/guide/index',
-    children: [
-      {
-        path: 'index',
-        component: () => import('@/views/guide/index'),
-        name: 'Guide',
-        meta: { title: 'Guide', icon: 'guide', noCache: true }
-      }
-    ]
-  },
-  {
-    path: '/profile',
-    component: Layout,
-    redirect: '/profile/index',
-    hidden: true,
-    children: [
-      {
-        path: 'index',
-        component: () => import('@/views/profile/index'),
-        name: 'Profile',
-        meta: { title: 'Profile', icon: 'user', noCache: true }
-      }
-    ]
   }
+  // 工单管理、厂务管理、包装管理、接口管理、数据采集、报表、质量管理、SPC
+  /** when your routing map is too long, you can split it into small modules **/
+  // 404 page must be placed at the end !!!
+  // { path: '*', redirect: '/404', hidden: true }
 ]
 
-/**
- * asyncRoutes
- * the routes that need to be dynamically loaded based on user roles
- */
-export const asyncRoutes = [
+export const dynamicRoutes = [
+  // {
+  //   path: '/dashboard',
+  //   component: Layout,
+  //   redirect: '/dashboard',
+  //   name: 'dashboard',
+  //   children: [
+  //     {
+  //       path: 'dashboard',
+  //       component: () => import('@/views/dashboard/index'),
+  //       name: 'Dashboard',
+  //       meta: { title: routerTitle.dashboard.dashboard?.[language] || routerTitle.dashboard.dashboard.en, icon: 'dashboard', affix: true }
+  //     }
+  //   ]
+  // },
   {
-    path: '/permission',
+    path: '/basicData',
     component: Layout,
-    redirect: '/permission/page',
-    alwaysShow: true, // will always show the root menu
-    name: 'Permission',
-    meta: {
-      title: 'Permission',
-      icon: 'lock',
-      roles: ['admin', 'editor'] // you can set roles in root nav
-    },
+    redirect: '/basicData/factoryManage',
+    name: 'basicData',
+    meta: { title: routerTitle.basicData?.[language] || routerTitle.basicData.en, icon: 'form', iconPart: 'basicData', affix: true, required: true, requireToken: true },
     children: [
       {
-        path: 'page',
-        component: () => import('@/views/permission/page'),
-        name: 'PagePermission',
-        meta: {
-          title: 'Page Permission',
-          roles: ['admin'] // or you can only set roles in sub nav
-        }
+        path: '/factoryManage',
+        component: () => import('@/views/basicData/index'),
+        name: 'factoryManager',
+        meta: { title: routerTitle.basicData.factoryManage?.[language] || routerTitle.basicData.factoryManage.en, icon: 'form', affix: true, required: true, requireToken: true },
+        children: [
+          {
+            path: 'factory',
+            component: () =>
+              import('@/views/basicData/FactoryManagement/Factory'),
+            name: 'factory',
+            meta: { title: routerTitle.basicData.factoryManage.factory?.[language] || routerTitle.basicData.factoryManage.factory.en, icon: 'form', affix: true, required: true, requireToken: true }
+          },
+          {
+            path: 'productLine',
+            component: () =>
+              import('@/views/basicData/FactoryManagement/product-line'),
+            name: 'productLine',
+            meta: { title: routerTitle.basicData.factoryManage.productLine?.[language] || routerTitle.basicData.factoryManage.productLine.en, icon: 'form', affix: true, required: true, requireToken: true }
+          },
+          {
+            path: 'workSection',
+            component: () =>
+              import('@/views/basicData/FactoryManagement/work-section'),
+            name: 'workSection',
+            meta: { title: routerTitle.basicData.factoryManage.workSection?.[language] || routerTitle.basicData.factoryManage.workSection.en, icon: 'form', affix: true, required: true, requireToken: true }
+          }
+        ]
       },
       {
-        path: 'directive',
-        component: () => import('@/views/permission/directive'),
-        name: 'DirectivePermission',
-        meta: {
-          title: 'Directive Permission'
-          // if do not set roles, means: this page does not require permission
-        }
+        path: '/GroupModule',
+        component: () => import('@/views/basicData/index'),
+        name: 'GroupModule',
+        meta: { title: routerTitle.basicData.teamManage?.[language] || routerTitle.basicData.teamManage.en, icon: 'form', affix: true, required: true, requireToken: true },
+        children: [
+          {
+            path: 'group',
+            component: () => import('@/views/basicData/GroupModule/group'),
+            name: 'group',
+            meta: { title: routerTitle.basicData.teamManage.team?.[language] || routerTitle.basicData.teamManage.team.en, icon: 'form', affix: true, required: true, requireToken: true }
+          },
+          {
+            path: 'major',
+            component: () => import('@/views/basicData/GroupModule/major'),
+            name: 'major',
+            meta: { title: routerTitle.basicData.teamManage.major?.[language] || routerTitle.basicData.teamManage.major.en, icon: 'form', affix: true, required: true, requireToken: true }
+          },
+          {
+            path: 'staff',
+            component: () => import('@/views/basicData/GroupModule/staff'),
+            name: 'staff',
+            meta: { title: routerTitle.basicData.teamManage.staff?.[language] || routerTitle.basicData.teamManage.staff.en, icon: 'form', affix: true, required: true, requireToken: true }
+          }
+        ]
+      },
+      // {
+      //   path: '/CustomerSupplier',
+      //   component: () => import('@/views/basicData/index'),
+      //   name: 'CustomerSupplier',
+      //   meta: { title: routerTitle.basicData.CustomerSupplier?.[language] || routerTitle.basicData.CustomerSupplier.en, icon: 'form', affix: true, required: true, requireToken: true },
+      //   children: [
+      //     {
+      //       path: 'Customer',
+      //       component: () =>
+      //         import('@/views/basicData/CustomerSupplier/customer'),
+      //       name: 'Customer',
+      //       meta: { title: routerTitle.basicData.CustomerSupplier.customer?.[language] || routerTitle.basicData.CustomerSupplier.customer.en, icon: 'form', affix: true, required: true, requireToken: true }
+      //     },
+      //     {
+      //       path: 'Supplier',
+      //       component: () =>
+      //         import('@/views/basicData/CustomerSupplier/supplier'),
+      //       name: 'Supplier',
+      //       meta: { title: routerTitle.basicData.CustomerSupplier.supplier?.[language] || routerTitle.basicData.CustomerSupplier.supplier.en, icon: 'form', affix: true, required: true, requireToken: true }
+      //     }
+      //   ]
+      // },
+      {
+        path: '/Materials',
+        component: () => import('@/views/basicData/index'),
+        name: 'Materials',
+        meta: { title: routerTitle.basicData.materials?.[language] || routerTitle.basicData.materials.en, icon: 'form', affix: true, required: true, requireToken: true },
+        children: [
+          {
+            path: 'Material',
+            component: () => import('@/views/basicData/Materials/material'),
+            name: 'Material',
+            meta: { title: routerTitle.basicData.materials.material?.[language] || routerTitle.basicData.materials.material.en, icon: 'form', affix: true, required: true, requireToken: true }
+          },
+          {
+            path: 'MaterialAdd',
+            component: () => import('@/views/basicData/Materials/components/material-add'),
+            name: 'MaterialAdd',
+            hidden: true,
+            meta: { title: routerTitle.basicData.materials.MaterialAdd?.[language] || routerTitle.basicData.materials.MaterialAdd.en, icon: 'form', affix: true, required: true, requireToken: true }
+          },
+          {
+            path: 'MaterialsType',
+            component: () =>
+              import('@/views/basicData/Materials/materialsType'),
+            name: 'MaterialsType',
+            meta: { title: routerTitle.basicData.materials.materialType?.[language] || routerTitle.basicData.materials.materialType.en, icon: 'form', affix: true, required: true, requireToken: true }
+          }
+        ]
       },
       {
-        path: 'role',
-        component: () => import('@/views/permission/role'),
-        name: 'RolePermission',
-        meta: {
-          title: 'Role Permission',
-          roles: ['admin']
-        }
+        path: '/Ports',
+        component: () => import('@/views/basicData/index'),
+        name: 'Ports',
+        meta: { title: routerTitle.basicData.ports?.[language] || routerTitle.basicData.ports.en, icon: 'form', affix: true, required: true, requireToken: true },
+        children: [
+          {
+            path: 'ports',
+            component: () => import('@/views/basicData/Cache/cache'),
+            name: 'ports',
+            meta: { title: routerTitle.basicData.ports.ports?.[language] || routerTitle.basicData.ports.ports.en, icon: 'form', affix: true }
+          },
+          {
+            path: 'area',
+            component: () => import('@/views/basicData/Cache/area'),
+            name: 'area',
+            meta: { title: routerTitle.basicData.ports.area?.[language] || routerTitle.basicData.ports.area.en, icon: 'form', affix: true }
+          },
+          {
+            path: 'shelf',
+            component: () => import('@/views/basicData/Cache/shelf'),
+            name: 'shelf',
+            meta: { title: routerTitle.basicData.ports.shelf?.[language] || routerTitle.basicData.ports.shelf.en, icon: 'form', affix: true }
+          }, {
+            path: 'cacheAdd',
+            component: () => import('@/views/basicData/Cache/components/cache-add'),
+            name: 'cacheAdd',
+            hidden: true,
+            meta: { title: routerTitle.basicData.ports.cacheAdd?.[language] || routerTitle.basicData.ports.cacheAdd.en, icon: 'form', affix: true }
+          }, {
+            path: 'shelfAdd',
+            component: () => import('@/views/basicData/Cache/components/shelf-add'),
+            name: 'shelfAdd',
+            hidden: true,
+            meta: { title: routerTitle.basicData.ports.shelfAdd?.[language] || routerTitle.basicData.ports.shelfAdd.en, icon: 'form', affix: true }
+          }, {
+            path: 'locationAdd',
+            component: () => import('@/views/basicData/Cache/components/location-add'),
+            name: 'locationAdd',
+            hidden: true,
+            meta: { title: routerTitle.basicData.ports.locationAdd?.[language] || routerTitle.basicData.ports.locationAdd.en, icon: 'form', affix: true }
+          }, {
+            path: 'storageBox',
+            component: () => import('@/views/basicData/Cache/storageBox'),
+            name: 'storageBox',
+            meta: { title: routerTitle.basicData.ports.storageBox?.[language] || routerTitle.basicData.ports.storageBox.en, icon: 'form', affix: true }
+          }, {
+            path: 'PositionDetailInfo',
+            component: () => import('@/views/basicData/Cache/components/PositionDetailInfo'),
+            name: 'PositionDetailInfo',
+            hidden: true,
+            meta: { title: routerTitle.basicData.ports.PositionDetailInfo?.[language] || routerTitle.basicData.ports.PositionDetailInfo.en, icon: 'form', affix: true }
+          }
+        ]
+      },
+      {
+        path: '/Equipment',
+        component: () => import('@/views/basicData/index'),
+        name: 'Equipment',
+        meta: { title: routerTitle.basicData.equipment?.[language] || routerTitle.basicData.equipment.en, icon: 'form', affix: true, required: true, requireToken: true },
+        children: [
+          {
+            path: 'equipmentInfo',
+            component: () =>
+              import('@/views/basicData/Equipment/equipmentInfo'),
+            name: 'equipmentInfo',
+            meta: { title: routerTitle.basicData.equipment.equipmentInfo?.[language] || routerTitle.basicData.equipment.equipmentInfo.en, icon: 'form', affix: true, required: true, requireToken: true }
+          },
+          {
+            path: 'equipmentInfoAdd',
+            component: () => import('@/views/basicData/Equipment/components/equipmentInfo-add'),
+            name: 'equipmentInfoAdd',
+            hidden: true,
+            meta: { title: routerTitle.basicData.equipment.equipmentInfoAdd?.[language] || routerTitle.basicData.equipment.equipmentInfoAdd.en, icon: 'form', affix: true, required: true, requireToken: true }
+          },
+          {
+            path: 'equipmentType',
+            component: () =>
+              import('@/views/basicData/Equipment/equipmentType'),
+            name: 'equipmentType',
+            meta: { title: routerTitle.basicData.equipment.equipmentType?.[language] || routerTitle.basicData.equipment.equipmentType.en, icon: 'form', affix: true, required: true, requireToken: true }
+          },
+          {
+            path: 'EquipmentGroup',
+            component: () =>
+              import('@/views/basicData/Equipment/EquipmentGroup'),
+            name: 'EquipmentGroup',
+            meta: { title: routerTitle.basicData.equipment.EquipmentGroup?.[language] || routerTitle.basicData.equipment.EquipmentGroup.en, icon: 'form', affix: true, required: true, requireToken: true }
+          },
+          {
+            path: 'equipmentTypeAlarm',
+            component: () =>
+              import('@/views/basicData/Equipment/equipmentTypeAlarm'),
+            name: 'equipmentTypeAlarm',
+            hidden: true,
+            meta: { title: routerTitle.basicData.equipment.equipmentTypeAlarm?.[language] || routerTitle.basicData.equipment.equipmentTypeAlarm.en, icon: 'form', affix: true, required: true, requireToken: true }
+          },
+          {
+            path: 'maintenanceType',
+            component: () =>
+              import('@/views/basicData/Equipment/maintenanceType'),
+            name: 'maintenanceType',
+            meta: { title: routerTitle.basicData.equipment.maintenanceType?.[language] || routerTitle.basicData.equipment.maintenanceType.en, icon: 'form', affix: true, required: true, requireToken: true }
+          },
+          {
+            path: 'maintenanceCycle',
+            component: () =>
+              import('@/views/basicData/Equipment/maintenanceCycle'),
+            name: 'maintenanceCycle',
+            meta: { title: routerTitle.basicData.equipment.maintenanceCycle?.[language] || routerTitle.basicData.equipment.maintenanceCycle.en, icon: 'form', affix: true, required: true, requireToken: true }
+          },
+          {
+            path: '/equipmentDetectInfo',
+            component: () => import('@/views/basicData/index'),
+            name: 'equipmentDetectInfo',
+            meta: { title: routerTitle.basicData.equipment.equipmentDetectInfo?.[language] || routerTitle.basicData.equipment.equipmentDetectInfo.en, icon: 'form', affix: true, required: true, requireToken: true },
+            children: [
+              {
+                path: 'equipmentDetectSystem',
+                component: () =>
+                  import('@/views/basicData/Equipment/equipmentDetectSystem'),
+                name: 'equipmentDetectSystem',
+                meta: { title: routerTitle.basicData.equipment.equipmentDetectInfo.equipmentDetectSystem?.[language] || routerTitle.basicData.equipment.equipmentDetectInfo.equipmentDetectSystem.en, icon: 'form', affix: true, required: true, requireToken: true }
+              },
+              {
+                path: 'equipmentDetectArea',
+                component: () =>
+                  import('@/views/basicData/Equipment/equipmentDetectArea'),
+                name: 'equipmentDetectArea',
+                meta: { title: routerTitle.basicData.equipment.equipmentDetectInfo.equipmentDetectArea?.[language] || routerTitle.basicData.equipment.equipmentDetectInfo.equipmentDetectArea.en, icon: 'form', affix: true, required: true, requireToken: true }
+              },
+              {
+                path: 'equipmentDetectAreaAdd',
+                component: () =>
+                  import('@/views/basicData/Equipment/components/equipmentDetectArea-add'),
+                name: 'equipmentDetectAreaAdd',
+                hidden: true,
+                meta: { title: routerTitle.basicData.equipment.equipmentDetectInfo.equipmentDetectArea?.[language] || routerTitle.basicData.equipment.equipmentDetectInfo.equipmentDetectArea.en, icon: 'form', affix: true, required: true, requireToken: true }
+              },
+              {
+                path: 'detectSystemSettings',
+                component: () =>
+                  import('@/views/basicData/Equipment/detectSystemSettings'),
+                name: 'detectSystemSettings',
+                meta: { title: routerTitle.basicData.equipment.equipmentDetectInfo.detectSystemSettings?.[language] || routerTitle.basicData.equipment.equipmentDetectInfo.detectSystemSettings.en, icon: 'form', affix: true, required: true, requireToken: true }
+              },
+              {
+                path: 'detectSystemSettingsAdd',
+                component: () =>
+                  import('@/views/basicData/Equipment/components/detectSystemSettings-add'),
+                name: 'detectSystemSettingsAdd',
+                hidden: true,
+                meta: { title: routerTitle.basicData.equipment.equipmentDetectInfo.detectSystemSettings?.[language] || routerTitle.basicData.equipment.equipmentDetectInfo.detectSystemSettings.en, icon: 'form', affix: true, required: true, requireToken: true }
+              }
+            ]
+          }
+          // {
+          //   path: 'spareParts',
+          //   component: () => import('@/views/basicData/Equipment/spareParts'),
+          //   name: 'spareParts',
+          //   meta: { title: routerTitle.basicData.equipment.spareParts?.[language] || routerTitle.basicData.equipment.spareParts.en, icon: 'form', affix: true, required: true, requireToken: true }
+          // },
+          // {
+          //   path: 'equipmentLink',
+          //   component: () =>
+          //     import('@/views/basicData/Equipment/equipmentLink'),
+          //   name: 'equipmentLink',
+          //   meta: { title: routerTitle.basicData.equipment.equipmentLink?.[language] || routerTitle.basicData.equipment.equipmentLink.en, icon: 'form', affix: true, required: true, requireToken: true }
+          // },
+          // {
+          //   path: 'equipmentLinkAdd',
+          //   component: () => import('@/views/basicData/Equipment/components/equipmentLink-add'),
+          //   name: 'equipmentLinkAdd',
+          //   hidden: true,
+          //   meta: { title: routerTitle.basicData.equipment.equipmentLinkAdd?.[language] || routerTitle.basicData.equipment.equipmentInfoAdd.en, icon: 'form', affix: true, required: true, requireToken: true }
+          // }
+        ]
+      },
+      {
+        path: '/Scrap',
+        component: () => import('@/views/basicData/index'),
+        name: 'Scrap',
+        meta: { title: routerTitle.basicData.scrap?.[language] || routerTitle.basicData.scrap.en, icon: 'form', affix: true, required: true, requireToken: true },
+        children: [
+          {
+            path: 'ScrapInfo',
+            component: () => import('@/views/basicData/Scrap/ScrapInfo'),
+            name: 'ScrapInfo',
+            meta: { title: routerTitle.basicData.scrap.scrapInfo?.[language] || routerTitle.basicData.scrap.scrapInfo.en, icon: 'form', affix: true, required: true, requireToken: true }
+          },
+          {
+            path: 'ScrapType',
+            component: () => import('@/views/basicData/Scrap/ScrapType'),
+            name: 'ScrapType',
+            meta: { title: routerTitle.basicData.scrap.scrapType?.[language] || routerTitle.basicData.scrap.scrapType.en, icon: 'form', affix: true, required: true, requireToken: true }
+          }
+        ]
+      },
+      // {
+      //   path: '/product',
+      //   component: () => import('@/views/basicData/index'),
+      //   name: 'product',
+      //   meta: { title: routerTitle.basicData.product?.[language] || routerTitle.basicData.product.en, icon: 'form', affix: true, required: true, requireToken: true },
+      //   children: [
+      //     {
+      //       path: 'productPool',
+      //       component: () => import('@/views/basicData/ProductPool'),
+      //       name: 'productPool',
+      //       meta: { title: routerTitle.basicData.product.productPool?.[language] || routerTitle.basicData.product.productPool.en, icon: 'form', affix: true, required: true, requireToken: true }
+      //     }
+      //   ]
+      // },
+      {
+        path: '/state',
+        component: () => import('@/views/basicData/index'),
+        name: 'state',
+        meta: { title: routerTitle.basicData.state?.[language] || routerTitle.basicData.state.en, icon: 'form', affix: true, required: true, requireToken: true },
+        children: [{
+          path: 'StateConfig',
+          component: () => import('@/views/basicData/StateConfig'),
+          name: 'StateConfig',
+          meta: { title: routerTitle.basicData.state.stateConfig?.[language] || routerTitle.basicData.state.stateConfig.en, icon: 'form', affix: true, required: true, requireToken: true }
+        }]
+      },
+      {
+        path: 'EquipmentScrapGrade',
+        component: () => import('@/views/basicData/EquipmentScrapGrade'),
+        name: 'EquipmentScrapGrade',
+        meta: { title: routerTitle.basicData.EquipmentScrapGrade?.[language] || routerTitle.basicData.EquipmentScrapGrade.en, icon: 'form', affix: true, required: true, requireToken: true }
+      },
+      {
+        path: '/dataDictionary',
+        component: () => import('@/views/basicData/index'),
+        name: 'dataDictionary',
+        meta: { title: routerTitle.basicData.dataDictionaryType.dataDictionary?.[language] || routerTitle.basicData.dataDictionaryType.dataDictionary.en, icon: 'form', affix: true, required: true, requireToken: true },
+        children: [{
+          path: 'dataDictionary',
+          component: () => import('@/views/basicData/dataDictionary'),
+          name: 'dataDictionary',
+          meta: { title: routerTitle.basicData.dataDictionaryType?.[language] || routerTitle.basicData.dataDictionaryType.en, icon: 'form', affix: true, required: true, requireToken: true }
+        }, {
+          path: 'dataDictionaryData',
+          component: () => import('@/views/basicData/components/dataDictionaryData'),
+          hidden: true,
+          name: 'dataDictionaryData',
+          meta: { title: routerTitle.basicData.dataDictionaryType.dataDictionary?.[language] || routerTitle.basicData.dataDictionaryType.dataDictionary.en, icon: 'form', affix: true, required: true, requireToken: true }
+        }]
+      },
+      {
+        path: '/cRules',
+        component: () => import('@/views/basicData/index'),
+        hidden: true,
+        name: 'cRules',
+        meta: { title: routerTitle.basicData.rule?.[language] || routerTitle.basicData.rule.en, icon: 'form', affix: true, required: true, requireToken: true },
+        children: [{
+          path: 'CodeRules',
+          component: () => import('@/views/basicData/CodeRules'),
+          name: 'CodeRules',
+          meta: { title: routerTitle.basicData.rule.codeRules?.[language] || routerTitle.basicData.rule.codeRules.en, icon: 'form', affix: true, required: true, requireToken: true }
+        }, {
+          path: 'codeAttr',
+          component: () => import('@/views/basicData/components/CodeRulesAttr'),
+          name: 'codeAttr',
+          hidden: true,
+          meta: { title: routerTitle.basicData.rule.codeRulesAttr?.[language] || routerTitle.basicData.rule.codeRulesAttr.en, icon: 'form', affix: true, required: true, requireToken: true }
+        }]
+      },
+      {
+        path: '/Visualization',
+        component: () => import('@/views/basicData/index'),
+        name: 'Visualization',
+        // hidden: true,
+        meta: { title: routerTitle.basicData.visualization?.[language] || routerTitle.basicData.visualization.en, icon: 'form', affix: true, required: true, requireToken: true },
+        children: [
+          {
+            path: 'VisualLayout',
+            component: () => import('@/views/basicData/VisualLayout'),
+            name: 'VisualLayout',
+            meta: { title: routerTitle.basicData.visualization.visualLayout?.[language] || routerTitle.basicData.visualization.visualLayout.en, icon: 'form', affix: true, required: true, requireToken: true }
+          }
+        ]
       }
     ]
   },
-
   {
-    path: '/icon',
+    path: '/equipment',
     component: Layout,
-    children: [
-      {
-        path: 'index',
-        component: () => import('@/views/icons/index'),
-        name: 'Icons',
-        meta: { title: 'Icons', icon: 'icon', noCache: true }
+    // redirect: '/equipment/manager',
+    name: 'EquipmentManager',
+    meta: { title: routerTitle.equipment?.[language] || routerTitle.equipment.en, icon: 'form', iconPart: 'EquipmentManager', affix: true, required: true, requireToken: true },
+    children: [{
+      path: 'bom',
+      component: () => import('@/views/EquipmentManager/BOMManager'),
+      name: 'BOMManage',
+      meta: { title: routerTitle.equipment.bom?.[language] || routerTitle.equipment.bom.en, icon: 'form', affix: true, required: true, requireToken: true }
+    }, {
+      path: 'recipe',
+      component: () => import('@/views/EquipmentManager/RecipeManager'),
+      name: 'RecipeManage',
+      meta: { title: routerTitle.equipment.recipe?.[language] || routerTitle.equipment.recipe?.en, icon: 'form', affix: true }
+    }, {
+      path: 'sparepart',
+      component: () => import('@/views/EquipmentManager/sqarepart'),
+      name: 'SparePartManage',
+      hidden: true,
+      meta: { title: routerTitle.equipment.sparepart?.[language] || routerTitle.equipment.sparepart.en, icon: 'form', affix: true, required: true, requireToken: true }
+    }, {
+      path: 'bomform',
+      component: () => import('@/views/EquipmentManager/BOMManager/subpage/detail'),
+      name: 'DeviceBOMManage',
+      hidden: true,
+      meta: { title: routerTitle.equipment.bomform?.[language] || routerTitle.equipment.bomform.en, icon: 'form', affix: true, required: true, requireToken: true }
+    }, {
+      path: 'devicerecipe',
+      component: () => import('@/views/EquipmentManager/RecipeManager/subpage/detail'),
+      name: 'RecipeParamManage',
+      hidden: true,
+      meta: { title: routerTitle.equipment.recipeform?.[language] || routerTitle.equipment.recipeform?.en, icon: 'form', affix: true }
+    }, {
+      path: 'statussetting',
+      component: () => import('@/views/EquipmentManager/StatusSetting'),
+      name: 'EquipmentStatusSetting',
+      meta: { title: routerTitle.equipment.statussetting?.[language] || routerTitle.equipment.statussetting.en, icon: 'form', affix: true, required: true, requireToken: true }
+    }, {
+      path: 'repairmanager',
+      component: () => import('@/views/EquipmentManager/RepairManager'),
+      name: 'RepairManager',
+      meta: { title: routerTitle.equipment.repairmanage?.[language] || routerTitle.equipment.repairmanage.en, icon: 'form', affix: true, required: true, requireToken: true }
+    }, {
+      path: 'addrepair',
+      component: () => import('@/views/EquipmentManager/RepairManager/AddRepair'),
+      name: 'AddRepair',
+      hidden: true,
+      meta: { title: routerTitle.equipment.addrepair?.[language] || routerTitle.equipment.addrepair.en, icon: 'form', affix: true, required: true, requireToken: true }
+    }, {
+      path: 'editrepair',
+      component: () => import('@/views/EquipmentManager/RepairManager/EditRepair'),
+      name: 'EditRepair',
+      hidden: true,
+      meta: { title: routerTitle.equipment.editrepair?.[language] || routerTitle.equipment.editrepair.en, icon: 'form', affix: true, required: true, requireToken: true }
+    }, {
+      path: 'maintainplan',
+      component: () => import('@/views/EquipmentManager/MaintainPlan'),
+      name: 'MaintainPlan',
+      meta: { title: routerTitle.equipment.maintainplan?.[language] || routerTitle.equipment.maintainplan.en, icon: 'form', affix: true, required: true, requireToken: true }
+    }, {
+      path: 'maintainlog-single',
+      component: () => import('@/views/EquipmentManager/MaintainLog'),
+      name: 'MaintainLogSingle',
+      // hidden: true,
+      meta: { title: routerTitle.equipment.maintainlog?.[language] || routerTitle.equipment.maintainlog.en, icon: 'form', affix: true, required: true, requireToken: true }
+    }, {
+      path: 'maintainlog',
+      component: () => import('@/views/EquipmentManager/MaintainLog'),
+      name: 'MaintainLog',
+      hidden: true,
+      meta: { title: routerTitle.equipment.maintainlog?.[language] || routerTitle.equipment.maintainlog.en, icon: 'form', affix: true, required: true, requireToken: true }
+    }, {
+      path: 'maintainlog-add',
+      component: () => import('@/views/EquipmentManager/MaintainLog/AddLog'),
+      name: 'MaintainAddLog',
+      hidden: true,
+      meta: { title: routerTitle.equipment.maintainlog?.[language] || routerTitle.equipment.maintainlog.en, icon: 'form', affix: true, required: true, requireToken: true }
+    }, {
+      path: 'maintainlog-edit',
+      component: () => import('@/views/EquipmentManager/MaintainLog/EditLog'),
+      name: 'MaintainEditLog',
+      hidden: true,
+      meta: { title: routerTitle.equipment.maintainlog?.[language] || routerTitle.equipment.maintainlog.en, icon: 'form', affix: true, required: true, requireToken: true }
+    }, {
+      path: 'typeparam',
+      component: () => import('@/views/EquipmentManager/TypeParamSetting'),
+      name: 'TypeParam',
+      meta: { title: routerTitle.equipment.typeparam?.[language] || routerTitle.equipment.typeparam.en, icon: 'form', affix: true, required: true, requireToken: true }
+    }, {
+      path: 'typeparam-detail',
+      component: () => import('@/views/EquipmentManager/TypeParamSetting/detail'),
+      name: 'TypeParamDetail',
+      hidden: true,
+      meta: { title: routerTitle.equipment.typeparamdetail?.[language] || routerTitle.equipment.typeparamdetail.en, icon: 'form', affix: true, required: true, requireToken: true }
+    }, {
+      path: 'monitoring',
+      component: () => import('@/views/EquipmentManager/DeviceMonitoring'),
+      name: 'MonitoringManage',
+      hidden: true,
+      meta: { title: routerTitle.equipment.monitoring?.[language] || routerTitle.equipment.monitoring.en, icon: 'form', affix: true, required: true, requireToken: true }
+    }, {
+      path: 'Processequipment',
+      component: () => import('@/views/EquipmentManager/ProcessData/Processequipment'),
+      name: 'Processequipment',
+      meta: { title: routerTitle.equipment.Processequipment?.[language] || routerTitle.equipment.Processequipment.en, icon: 'form', affix: true, required: true, requireToken: true }
+    }, {
+      path: 'Three',
+      component: () => import('@/views/EquipmentManager/ProcessData/Three'),
+      name: 'Three',
+      hidden: true,
+      meta: { title: routerTitle.equipment.Parameters?.[language] || routerTitle.equipment.Parameters.en, icon: 'form', affix: true, required: true, requireToken: true }
+    }, {
+      path: 'ProcessData',
+      component: () => import('@/views/EquipmentManager/ProcessData/ProcessData'),
+      name: 'ProcessData',
+      hidden: true,
+      meta: {
+        title: routerTitle.equipment.ProcessData?.[language] || routerTitle.equipment.ProcessData.en, icon: 'form', affix: true, required: true, requireToken: true
       }
-    ]
+    }, {
+      path: 'Details',
+      component: () => import('@/views/EquipmentManager/ProcessData/Details'),
+      name: 'Details',
+      hidden: true,
+      meta: { title: routerTitle.equipment.Details?.[language] || routerTitle.equipment.Details.en, icon: 'form', affix: true, required: true, requireToken: true }
+    }, {
+      path: 'analysis',
+      component: () => import('@/views/EquipmentManager/Analysis'),
+      name: 'AnalysisManage',
+      hidden: true,
+      meta: { title: routerTitle.equipment.analysis?.[language] || routerTitle.equipment.analysis.en, icon: 'form', affix: true, required: true, requireToken: true }
+    }, {
+      path: 'equipmentManagerManage',
+      component: () => import('@/views/EquipmentManager/equipmentManagerManage'),
+      name: 'EquipmentManagerManage',
+      meta: { title: routerTitle.equipment.equipmentManagerManage?.[language] || routerTitle.equipment.equipmentManagerManage.en, icon: 'form', affix: true, required: true, requireToken: true }
+    }, {
+      path: 'equipmentParams',
+      component: () => import('@/views/EquipmentManager/equipmentParams'),
+      name: 'equipmentParams',
+      meta: { title: routerTitle.equipment.equipmentParams?.[language] || routerTitle.equipment.equipmentParams.en, icon: 'form', affix: true, required: true, requireToken: true }
+    }, {
+      path: '/equipmentVisualization',
+      component: () => import('@/views/basicData/index'),
+      name: 'equipmentVisualization',
+      // hidden: true,
+      meta: { title: routerTitle.equipment.EquipmentVisualization?.[language] || routerTitle.equipment.EquipmentVisualization.en, icon: 'form', affix: true, required: true, requireToken: true },
+      children: [
+        {
+          path: 'EquipmentProcessingQuantity',
+          component: () => import('@/views/EquipmentManager/equipmentVisualization/EquipmentProcessingQuantity'),
+          name: 'EquipmentProcessingQuantity',
+          meta: { title: routerTitle.equipment.EquipmentVisualization.EquipmentProcessingQuantity?.[language] || routerTitle.equipment.EquipmentVisualization.EquipmentProcessingQuantity.en, icon: 'form', affix: true, required: true, requireToken: true }
+        },
+        {
+          path: 'EquipmentEnergyMonitor',
+          component: () => import('@/views/EquipmentManager/equipmentVisualization/EquipmentEnergyMonitor'),
+          name: 'EquipmentEnergyMonitor',
+          meta: { title: routerTitle.equipment.EquipmentVisualization.EquipmentEnergyMonitor?.[language] || routerTitle.equipment.EquipmentVisualization.EquipmentEnergyMonitor.en, icon: 'form', affix: true, required: true, requireToken: true }
+        },
+        {
+          path: 'Visualized',
+          component: () => import('@/views/EquipmentManager/equipmentVisualization/Visualized'),
+          name: 'Visualized',
+          meta: { title: routerTitle.equipment.EquipmentVisualization.Visualized?.[language] || routerTitle.equipment.EquipmentVisualization.Visualized.en, icon: 'form', affix: true, required: true, requireToken: true }
+        }
+      ]
+    }]
   },
-
-  /** when your routing map is too long, you can split it into small modules **/
-  componentsRouter,
-  chartsRouter,
-  nestedRouter,
-  tableRouter,
-
   {
-    path: '/example',
+    path: '/art',
     component: Layout,
-    redirect: '/example/list',
-    name: 'Example',
-    meta: {
-      title: 'Example',
-      icon: 'el-icon-s-help'
-    },
+    redirect: '/art/list',
+    name: 'ArtManager',
+    meta: { title: routerTitle.technology?.[language] || routerTitle.technology.en, icon: 'form', iconPart: 'ArtManager', affix: true, required: true, requireToken: true },
     children: [
       {
-        path: 'create',
-        component: () => import('@/views/example/create'),
-        name: 'CreateArticle',
-        meta: { title: 'Create Article', icon: 'edit' }
+        path: 'list',
+        component: () => import('@/views/art/list'),
+        name: 'ArtList',
+        meta: { title: routerTitle.technology.technologylist?.[language] || routerTitle.technology.technologylist.en, icon: 'form', affix: true, required: true, requireToken: true }
       },
       {
-        path: 'edit/:id(\\d+)',
-        component: () => import('@/views/example/edit'),
-        name: 'EditArticle',
-        meta: { title: 'Edit Article', noCache: true, activeMenu: '/example/list' },
+        path: 'process',
+        component: () => import('@/views/art/process/list'),
+        name: 'Process',
+        meta: { title: routerTitle.technology.technologyprocess?.[language] || routerTitle.technology.technologyprocess.en, icon: 'form', affix: true, required: true, requireToken: true },
         hidden: true
       },
       {
-        path: 'list',
-        component: () => import('@/views/example/list'),
-        name: 'ArticleList',
-        meta: { title: 'Article List', icon: 'list' }
+        path: 'processList',
+        component: () => import('@/views/art/processList'),
+        name: 'Process',
+        meta: { title: routerTitle.technology.processList?.[language] || routerTitle.technology.processList.en, icon: 'form', affix: true, required: true, requireToken: true }
       }
     ]
   },
-
   {
-    path: '/tab',
+    path: '/material-manage',
     component: Layout,
+    redirect: '/material-manage/refueling',
+    name: 'MaterialsManage',
+    meta: { title: routerTitle.material?.[language] || routerTitle.material.en, icon: 'form', iconPart: 'MaterialsManage', affix: true, required: true, requireToken: true },
     children: [
       {
-        path: 'index',
-        component: () => import('@/views/tab/index'),
-        name: 'Tab',
-        meta: { title: 'Tab', icon: 'tab' }
+        path: 'bom',
+        component: () => import('@/views/material-manage/bom/index'),
+        name: 'bom',
+        meta: { title: routerTitle.material.bom?.[language] || routerTitle.material.bom.en, icon: 'form', affix: true, required: true, requireToken: true }
+      },
+      {
+        path: 'bom/add',
+        component: () => import('@/views/material-manage/bom/components/add-panel'),
+        name: 'bomAdd',
+        meta: { title: routerTitle.material.bomadd?.[language] || routerTitle.material.bomadd.en, icon: 'form', affix: true, required: true, requireToken: true },
+        hidden: true
+      },
+      {
+        path: 'batch',
+        component: () => import('@/views/material-manage/batch/index'),
+        name: 'batch',
+        meta: { title: routerTitle.material.batch?.[language] || routerTitle.material.batch.en, icon: 'form', affix: true, required: true, requireToken: true }
+      },
+      {
+        path: 'batch/add',
+        component: () => import('@/views/material-manage/batch/components/add-panel'),
+        name: 'batchAdd',
+        meta: { title: routerTitle.material.batchadd?.[language] || routerTitle.material.batchadd.en, icon: 'form', affix: true, required: true, requireToken: true },
+        hidden: true
+      },
+      {
+        path: 'refueling',
+        component: () => import('@/views/material-manage/refueling/index'),
+        name: 'refueling',
+        meta: { title: routerTitle.material.refueling?.[language] || routerTitle.material.refueling.en, icon: 'form', affix: true, required: true, requireToken: true }
+      },
+      {
+        path: 'refueling/add',
+        component: () => import('@/views/material-manage/refueling/components/add-panel'),
+        name: 'refuelingAdd',
+        meta: { title: routerTitle.material.refuelingadd?.[language] || routerTitle.material.refuelingadd.en, icon: 'form', affix: true, required: true, requireToken: true },
+        hidden: true
+      },
+      {
+        path: 'report',
+        component: () => import('@/views/material-manage/report/index'),
+        name: 'report',
+        meta: { title: routerTitle.material.report?.[language] || routerTitle.material.report.en, icon: 'form', affix: true, required: true, requireToken: true }
+      },
+      {
+        path: 'historyConsume',
+        component: () => import('@/views/material-manage/historyConsume/index'),
+        name: 'historyConsume',
+        meta: { title: routerTitle.material.historyConsume?.[language] || routerTitle.material.historyConsume.en, icon: 'form', affix: true, required: true, requireToken: true }
+      },
+      {
+        path: 'currentConsume',
+        component: () => import('@/views/material-manage/currentConsume/index'),
+        name: 'currentConsume',
+        meta: { title: routerTitle.material.currentConsume?.[language] || routerTitle.material.currentConsume.en, icon: 'form', affix: true, required: true, requireToken: true }
       }
     ]
   },
-
   {
-    path: '/error',
+    path: '/order',
     component: Layout,
-    redirect: 'noRedirect',
-    name: 'ErrorPages',
-    meta: {
-      title: 'Error Pages',
-      icon: '404'
+    redirect: '/order/workOrderManage',
+    name: 'orderManage',
+    meta: { title: routerTitle.order?.[language] || routerTitle.order.en, icon: 'form', iconPart: 'orderManage', affix: true, required: true, requireToken: true },
+    children: [
+      {
+        path: 'powerClassification',
+        component: () =>
+          import('@/views/orderManage/powerClassification'),
+        name: 'powerClassification',
+        meta: { title: routerTitle.order.powerClassification?.[language] || routerTitle.order.powerClassification.en, icon: 'form', affix: true, required: true, requireToken: true }
+      },
+      {
+        path: 'erpToMesData',
+        component: () =>
+          import('@/views/orderManage/erpToMesData'),
+        name: 'erpToMesData',
+        meta: { title: routerTitle.order.erpToMesData?.[language] || routerTitle.order.erpToMesData.en, icon: 'form', affix: true, required: true, requireToken: true }
+      },
+      {
+        path: 'erpToMesVisualization',
+        component: () =>
+          import('@/views/orderManage/visualization'),
+        name: 'erpToMesVisualization',
+        meta: { title: routerTitle.order.erpToMesVisualization?.[language] || routerTitle.order.erpToMesVisualization.en, icon: 'form', affix: true, required: true, requireToken: true }
+      },
+      {
+        path: 'mesToErp',
+        component: () =>
+          import('@/views/orderManage/mesToErp'),
+        name: 'mesToErp',
+        meta: { title: 'mesToErp', icon: 'form', affix: true, required: true, requireToken: true }
+      },
+      {
+        path: '/workOrderManage',
+        component: () => import('@/views/orderManage/index'),
+        name: 'workOrderManage',
+        meta: { title: routerTitle.order.workOrderManage?.[language] || routerTitle.order.workOrderManage.en, icon: 'form', affix: true, required: true, requireToken: true },
+        children: [
+          {
+            path: 'workOrder',
+            component: () =>
+              import('@/views/orderManage/workOrder/workOrder'),
+            name: 'workOrder',
+            meta: { title: routerTitle.order.workOrderManage.workOrder?.[language] || routerTitle.order.workOrderManage.workOrder.en, icon: 'form', affix: true, required: true, requireToken: true }
+          },
+          {
+            path: 'workOrderOperation',
+            component: () => import('@/views/orderManage/workOrder/components/workOrderOperation'),
+            name: 'workOrderOperation',
+            hidden: true,
+            meta: { title: routerTitle.order.workOrderManage.workOrderOperation?.[language] || routerTitle.order.workOrderManage.workOrderOperation.en, icon: 'form', affix: true }
+          },
+          {
+            path: 'workOrderMonitor',
+            component: () => import('@/views/orderManage/workOrder/components/workOrderMonitor'),
+            name: 'workOrderMonitor',
+            hidden: true,
+            meta: { title: routerTitle.order.workOrderManage.workOrderMonitor?.[language] || routerTitle.order.workOrderManage.workOrderMonitor.en, icon: 'form', affix: true }
+          },
+          {
+            path: 'workOrderVerify',
+            component: () => import('@/views/orderManage/workOrder/components/workOrderVerify'),
+            name: 'workOrderVerify',
+            hidden: true,
+            meta: { title: routerTitle.order.workOrderManage.workOrderVerify?.[language] || routerTitle.order.workOrderManage.workOrderVerify.en, icon: 'form', affix: true }
+          },
+          {
+            path: 'packingTags',
+            component: () => import('@/views/orderManage/packingTags'),
+            name: 'packingTags',
+            hidden: true,
+            meta: { title: routerTitle.order.workOrderManage.viewpackingTags?.[language] || routerTitle.order.workOrderManage.viewpackingTags.en, icon: 'form', affix: true }
+          }
+        ]
+      },
+      {
+        path: '/orderManage',
+        component: () => import('@/views/orderManage/index'),
+        name: 'orderManage',
+        meta: { title: routerTitle.order.orderManage?.[language] || routerTitle.order.orderManage.en, icon: 'form', affix: true, required: true, requireToken: true },
+        children: [
+          {
+            path: 'order',
+            component: () =>
+              import('@/views/orderManage/order/order'),
+            name: 'order',
+            meta: { title: routerTitle.order.orderManage.order?.[language] || routerTitle.order.orderManage.order.en, icon: 'form', affix: true, required: true, requireToken: true }
+          },
+          {
+            path: 'orderIssue',
+            component: () =>
+              import('@/views/orderManage/order/components/orderIssue'),
+            name: 'orderIssue',
+            hidden: true,
+            meta: { title: routerTitle.order.orderManage.orderIssue?.[language] || routerTitle.order.orderManage.orderIssue.en, icon: 'form', affix: true, required: true, requireToken: true }
+          },
+          {
+            path: 'orderDetail',
+            component: () =>
+              import('@/views/orderManage/order/components/orderDetail'),
+            name: 'orderDetail',
+            hidden: true,
+            meta: { title: routerTitle.order.orderManage.orderDetail?.[language] || routerTitle.order.orderManage.orderDetail.en, icon: 'form', affix: true, required: true, requireToken: true }
+          }
+        ]
+      },
+      {
+        path: '/infoTrack',
+        component: () => import('@/views/orderManage/index'),
+        name: 'infoTrack',
+        meta: { title: routerTitle.order.infoTrack?.[language] || routerTitle.order.infoTrack.en, icon: 'form', affix: true, required: true, requireToken: true },
+        children: [
+          {
+            path: 'equipmentParametersTrack',
+            component: () =>
+              import('@/views/orderManage/infoTrack/equipmentParametersTrack'),
+            name: 'equipmentParametersTrack',
+            meta: { title: routerTitle.order.infoTrack.equipmentParametersTrack?.[language] || routerTitle.order.infoTrack.equipmentParametersTrack.en, icon: 'form', affix: true, required: true, requireToken: true }
+          },
+          {
+            path: 'processSubstrateDataTrack',
+            component: () =>
+              import('@/views/orderManage/infoTrack/processSubstrateDataTrack'),
+            name: 'processSubstrateDataTrack',
+            meta: { title: routerTitle.order.infoTrack.processSubstrateDataTrack?.[language] || routerTitle.order.infoTrack.processSubstrateDataTrack.en, icon: 'form', affix: true, required: true, requireToken: true }
+          },
+          {
+            path: 'substrateParametersTrack',
+            component: () =>
+              import('@/views/orderManage/infoTrack/substrateParametersTrack'),
+            name: 'substrateParametersTrack',
+            meta: { title: routerTitle.order.infoTrack.substrateParametersTrack?.[language] || routerTitle.order.infoTrack.substrateParametersTrack.en, icon: 'form', affix: true, required: true, requireToken: true }
+          },
+          {
+            path: 'equipmentEventTrack',
+            component: () =>
+              import('@/views/orderManage/infoTrack/equipmentEventTrack'),
+            name: 'equipmentEventTrack',
+            hidden: true,
+            meta: { title: routerTitle.order.infoTrack.equipmentEventTrack?.[language] || routerTitle.order.infoTrack.equipmentEventTrack.en, icon: 'form', affix: true, required: true, requireToken: true }
+          },
+          {
+            path: 'substrateEquipment',
+            component: () =>
+              import('@/views/orderManage/infoTrack/substrateEquipment'),
+            name: 'substrateEquipment',
+            hidden: true,
+            meta: { title: routerTitle.order.infoTrack.substrateEquipment?.[language] || routerTitle.order.infoTrack.substrateEquipment.en, icon: 'form', affix: true, required: true, requireToken: true }
+          }
+        ]
+      },
+      {
+        path: '/substrate',
+        component: () => import('@/views/orderManage/index'),
+        name: 'substrate',
+        hidden: true,
+        meta: { title: routerTitle.order.substrate?.[language] || routerTitle.order.substrate.en, icon: 'form', affix: true, required: true, requireToken: true },
+        children: [
+          {
+            path: 'substrateBatch',
+            component: () =>
+              import('@/views/orderManage/substrateBatch'),
+            name: 'substrateBatch',
+            meta: { title: routerTitle.order.substrate.substrateBatch?.[language] || routerTitle.order.substrate.substrateBatch.en, icon: 'form', affix: true, required: true, requireToken: true }
+          },
+          {
+            path: 'substrateBatchAttr',
+            component: () =>
+              import('@/views/orderManage/components/substrateBatchAttr'),
+            name: 'substrateBatchAttr',
+            hidden: true,
+            meta: { title: routerTitle.order.substrate.substrateBatchAttr?.[language] || routerTitle.order.substrate.substrateBatchAttr.en, icon: 'form', affix: true, required: true, requireToken: true }
+          }
+        ]
+      },
+      {
+        path: '/consumption',
+        component: () =>
+          import('@/views/orderManage/consumption/consumption'),
+        name: 'consumption',
+        meta: { title: routerTitle.order.consumption?.[language] || routerTitle.order.consumption.en, icon: 'form', affix: true, required: true, requireToken: true }
+      },
+      {
+        path: '/powerList',
+        component: () =>
+          import('@/views/orderManage/consumption/list'),
+        name: 'powerList',
+        hidden: true,
+        meta: { title: routerTitle.order.details?.[language] || routerTitle.order.details.en, icon: 'form', affix: true, required: true, requireToken: true }
+      }
+    ]
+  },
+  {
+    path: '/factory',
+    component: Layout,
+    redirect: '/factory',
+    name: 'factoryManage',
+    meta: { title: routerTitle.factory?.[language] || routerTitle.factory.en, icon: 'form', iconPart: 'factoryManage', affix: true, required: true, requireToken: true },
+    children: [
+      {
+        path: '/team-manage',
+        redirect: '/team-manage/list',
+        component: () => import('@/views/basicData/index'),
+        name: 'TeamManage',
+        meta: { title: routerTitle.team?.[language] || routerTitle.team.en, icon: 'form', iconPart: 'formwhite', affix: true, required: true, requireToken: true },
+        children: [
+          {
+            path: 'plan',
+            component: () => import('@/views/team-manage/plan'),
+            name: 'TeamManagePlan',
+            meta: { title: routerTitle.team.teamplan?.[language] || routerTitle.team.teamplan.en, icon: 'form', affix: true, required: true, requireToken: true }
+          },
+          {
+            path: 'plan/add',
+            component: () => import('@/views/team-manage/components/plan/add-plan'),
+            name: 'TeamManagePlanAdd',
+            meta: { title: routerTitle.team.teamplanoperation?.[language] || routerTitle.team.teamplanoperation.en, icon: 'form', affix: true, required: true, requireToken: true },
+            hidden: true
+          },
+          {
+            path: 'list',
+            component: () => import('@/views/team-manage/list'),
+            name: 'TeamManageList',
+            meta: { title: routerTitle.team.teamlist?.[language] || routerTitle.team.teamlist.en, icon: 'form', affix: true, required: true, requireToken: true }
+          },
+          {
+            path: 'team/add',
+            component: () => import('@/views/team-manage/components/change/add-plan'),
+            name: 'TeamManageAdd',
+            meta: { title: routerTitle.team.teamhandover?.[language] || routerTitle.team.teamhandover.en, icon: 'form', affix: true, required: true, requireToken: true },
+            hidden: true
+          },
+          {
+            path: 'showlog',
+            component: () => import('@/views/team-manage/showlog'),
+            name: 'logadd',
+            meta: { title: routerTitle.team.showlog?.[language] || routerTitle.team.showlog.en, icon: 'form', affix: true, required: true, requireToken: true },
+            hidden: true
+          }
+        ]
+      },
+      {
+        path: '/abnormal-alarm',
+        redirect: '/abnormal-alarm/list',
+        component: () => import('@/views/basicData/index'),
+        name: 'AlarmManager',
+        meta: { title: routerTitle.factory.AlarmManager?.[language] || routerTitle.factory.AlarmManager.en, icon: 'form', iconPart: 'formwhite', affix: true, required: true, requireToken: true },
+        children: [
+          {
+            path: 'list',
+            component: () => import('@/views/FactoryManage/AbnormalAlarm'),
+            name: 'AbnormalAlarm',
+            meta: { title: routerTitle.factory.AlarmManager.AbnormalAlarm?.[language] || routerTitle.factory.AlarmManager.AbnormalAlarm.en, icon: 'form', affix: true, required: true, requireToken: true }
+          },
+          {
+            path: 'EquipmentAlarm',
+            component: () => import('@/views/FactoryManage/EquipmentAlarm'),
+            name: 'EquipmentAlarm',
+            meta: { title: routerTitle.factory.AlarmManager.EquipmentAlarm?.[language] || routerTitle.factory.AlarmManager.EquipmentAlarm.en, icon: 'form', affix: true, required: true, requireToken: true }
+          },
+          {
+            path: '/AlarmManagement',
+            component: () => import('@/views/basicData/index'),
+            name: 'AlarmManagement',
+            meta: { title: routerTitle.basicData.alarmSetting?.[language] || routerTitle.basicData.alarmSetting.en, icon: 'form', affix: true, required: true, requireToken: true },
+            children: [
+              {
+                path: 'AlarmInfo',
+                component: () =>
+                  import('@/views/basicData/AlarmManagement/alarmInfo'),
+                name: 'AlarmInfo',
+                meta: { title: routerTitle.basicData.alarmSetting.alarmInfo?.[language] || routerTitle.basicData.alarmSetting.alarmInfo.en, icon: 'form', affix: true, required: true, requireToken: true }
+              },
+              {
+                path: 'AlarmType',
+                component: () =>
+                  import('@/views/basicData/AlarmManagement/alarmType'),
+                name: 'AlarmType',
+                meta: { title: routerTitle.basicData.alarmSetting.alarmType?.[language] || routerTitle.basicData.alarmSetting.alarmType.en, icon: 'form', affix: true, required: true, requireToken: true }
+              },
+              {
+                path: 'AlarmLevel',
+                component: () =>
+                  import('@/views/basicData/AlarmManagement/alarmLevel'),
+                name: 'AlarmLevel',
+                meta: { title: routerTitle.basicData.alarmSetting.alarmLevel?.[language] || routerTitle.basicData.alarmSetting.alarmLevel.en, icon: 'form', affix: true, required: true, requireToken: true }
+              }
+            ]
+          }
+        ]
+      },
+      {
+        path: '/Visual',
+        component: () => import('@/views/basicData/index'),
+        name: 'Visual',
+        // hidden: true,
+        meta: { title: routerTitle.factory.visual?.[language] || routerTitle.factory.visual.en, icon: 'form', affix: true, required: true, requireToken: true },
+        children: [
+          {
+            path: 'Visual',
+            component: () => import('@/views/FactoryManage/visual'),
+            name: 'Visual',
+            meta: { title: routerTitle.factory.visual.visual?.[language] || routerTitle.factory.visual.visual.en, icon: 'form', affix: true, required: true, requireToken: true }
+          },
+          {
+            path: 'VisualLocation',
+            component: () => import('@/views/FactoryManage/visualLocation'),
+            name: 'VisualLocation',
+            meta: { title: routerTitle.factory.visual.visualLocation?.[language] || routerTitle.factory.visual.visualLocation.en, icon: 'form', affix: true, required: true, requireToken: true },
+            hidden: true
+          }
+        ]
+      }
+    ]
+  },
+  {
+    path: '/form',
+    component: Layout,
+    redirect: '/form',
+    name: 'formManage',
+    meta: { title: routerTitle.form?.[language] || routerTitle.form.en, icon: 'form', iconPart: 'formManage', affix: true, required: true, requireToken: true, unuse: false },
+    children: [{
+      path: 'report',
+      component: () => import('@/views/report-manage/ReportSortChoise'),
+      name: 'Report',
+      meta: { title: routerTitle.form.report?.[language] || routerTitle.form.report.en, icon: 'form', affix: true, required: true, requireToken: true }
     },
-    children: [
-      {
-        path: '401',
-        component: () => import('@/views/error-page/401'),
-        name: 'Page401',
-        meta: { title: '401', noCache: true }
-      },
-      {
-        path: '404',
-        component: () => import('@/views/error-page/404'),
-        name: 'Page404',
-        meta: { title: '404', noCache: true }
-      }
-    ]
-  },
-
-  {
-    path: '/error-log',
-    component: Layout,
-    children: [
-      {
-        path: 'log',
-        component: () => import('@/views/error-log/index'),
-        name: 'ErrorLog',
-        meta: { title: 'Error Log', icon: 'bug' }
-      }
-    ]
-  },
-
-  {
-    path: '/excel',
-    component: Layout,
-    redirect: '/excel/export-excel',
-    name: 'Excel',
-    meta: {
-      title: 'Excel',
-      icon: 'excel'
+    {
+      path: 'report-sort-list',
+      component: () => import('@/views/report-manage/Report'),
+      name: 'ReportSortList',
+      hidden: true,
+      meta: { title: routerTitle.form.reportSortList?.[language] || routerTitle.form.reportSortList.en, icon: 'form', affix: true, required: true, requireToken: true }
     },
+    {
+      path: 'report-view',
+      component: () => import('@/views/report-manage/ReportView'),
+      name: 'ReportDesign',
+      meta: { title: routerTitle.form.reportView?.[language] || routerTitle.form.reportView.en, icon: 'form', affix: true, required: true, requireToken: true },
+      hidden: true
+    },
+    {
+      path: 'report-design',
+      component: () => import('@/views/report-manage/ReportDesign'),
+      name: 'ReportDesign',
+      meta: { title: routerTitle.form.reportDesign?.[language] || routerTitle.form.reportDesign.en, icon: 'form', affix: true, required: true, requireToken: true }
+    },
+    {
+      path: 'report-sort',
+      component: () => import('@/views/report-manage/ReportSort/index'),
+      name: 'ReportSort',
+      meta: { title: routerTitle.form.reportSort?.[language] || routerTitle.form.reportSort.en, icon: 'form', affix: true, required: true, requireToken: true }
+    }]
+  },
+  {
+    path: '/packing',
+    component: Layout,
+    redirect: '/packing',
+    name: 'packingManage',
+    meta: { title: routerTitle.packing?.[language] || routerTitle.packing.en, icon: 'form', iconPart: 'packingManage', affix: true, required: true, requireToken: true, unuse: false },
+    children: [{
+      path: 'label-template',
+      component: () =>
+        import('@/views/packing-manage/LabelTemplate'),
+      name: 'LableDesign',
+      meta: { title: routerTitle.packing.labelTemplate?.[language] || routerTitle.packing.labelTemplate.en, icon: 'form', affix: true, required: true, requireToken: true }
+    }, {
+      path: 'PackingList',
+      component: () =>
+        import('@/views/packing-manage/PackingList'),
+      name: 'PackingList',
+      meta: { title: routerTitle.packing.PackingList?.[language] || routerTitle.packing.PackingList.en, icon: 'form', affix: true, required: true, requireToken: true }
+    },
+    {
+      path: 'label-design-add',
+      component: () =>
+        import('@/views/packing-manage/components/AddLablePanel'),
+      name: 'AddLablePanel',
+      hidden: true,
+      meta: { title: routerTitle.packing.labelDesign?.[language] || routerTitle.packing.labelDesign.en, icon: 'form', affix: true, required: true, requireToken: true }
+    }]
+  },
+  {
+    path: '/interface',
+    component: Layout,
+    redirect: '/interface',
+    name: 'interfaceManage',
+    hidden: true,
+    meta: { title: routerTitle.interface?.[language] || routerTitle.interface.en, icon: 'form', iconPart: 'formwhite', affix: true, required: true, requireToken: true, unuse: true },
+    children: []
+  },
+  {
+    path: '/dataacquisition',
+    component: Layout,
+    redirect: '/dataacquisition',
+    name: 'dataAcquisitionManage',
+    hidden: true,
+    meta: { title: routerTitle.dataacquisition?.[language] || routerTitle.dataacquisition.en, icon: 'form', iconPart: 'formwhite', affix: true, required: true, requireToken: true, unuse: true },
+    children: []
+  },
+  {
+    path: '/quality',
+    component: Layout,
+    redirect: '/quality',
+    name: 'qualityManage',
+    meta: { title: routerTitle.quality?.[language] || routerTitle.quality.en, icon: 'form', iconPart: 'qualityManage', affix: true, required: true, requireToken: true },
     children: [
       {
-        path: 'export-excel',
-        component: () => import('@/views/excel/export-excel'),
-        name: 'ExportExcel',
-        meta: { title: 'Export Excel' }
+        path: 'scrap',
+        component: () => import('@/views/QualityManager/scrap'),
+        name: 'scrapManage',
+        meta: { title: routerTitle.quality.scrap?.[language] || routerTitle.quality.scrap.en, icon: 'form', iconPart: 'formwhite', affix: true, required: true, requireToken: true, unuse: true }
       },
       {
-        path: 'export-selected-excel',
-        component: () => import('@/views/excel/select-excel'),
-        name: 'SelectExcel',
-        meta: { title: 'Export Selected' }
+        path: 'scrapcategorystatistics',
+        component: () => import('@/views/QualityManager/scrap/scrapCategoryStatistics'),
+        name: 'scrapCategoryStatistics',
+        meta: { title: routerTitle.quality.scrapcategorystatistics?.[language] || routerTitle.quality.scrapcategorystatistics.en, icon: 'form', iconPart: 'formwhite', affix: true, required: true, requireToken: true, unuse: true }
       },
       {
-        path: 'export-merge-header',
-        component: () => import('@/views/excel/merge-header'),
-        name: 'MergeHeader',
-        meta: { title: 'Merge Header' }
+        path: 'plan',
+        component: () => import('@/views/QualityManager/plan'),
+        name: 'PlanManage',
+        meta: { title: routerTitle.quality.plan?.[language] || routerTitle.quality.plan?.en, icon: 'form', affix: true }
+      }, {
+        path: 'planparam',
+        component: () => import('@/views/QualityManager/plan/subpage/detail'),
+        name: 'PlanParamManage',
+        hidden: true,
+        meta: { title: routerTitle.quality.planform?.[language] || routerTitle.quality.planform?.en, icon: 'form', affix: true }
+      }, {
+        path: 'issue',
+        component: () => import('@/views/QualityManager/plan/issuedplan'),
+        name: 'PlanIssuedManage',
+        meta: { title: routerTitle.quality.issuedplan?.[language] || routerTitle.quality.issuedplan?.en, icon: 'form', affix: true }
       },
       {
-        path: 'upload-excel',
-        component: () => import('@/views/excel/upload-excel'),
-        name: 'UploadExcel',
-        meta: { title: 'Upload Excel' }
+        path: '/offlineDetec',
+        component: () => import('@/views/basicData/index'),
+        name: 'offlineDetec',
+        meta: { title: routerTitle.quality.offlineDetec?.[language] || routerTitle.quality.offlineDetec.en, icon: 'form', affix: true, required: true, requireToken: true },
+        children: [
+          {
+            path: 'detecParam',
+            component: () =>
+              import('@/views/QualityManager/offlineDetec/detecParam'),
+            name: 'detecParam',
+            hidden: true,
+            meta: { title: routerTitle.quality.offlineDetec.detecParam?.[language] || routerTitle.quality.offlineDetec.detecParam.detecParam.en, icon: 'form', affix: true, required: true, requireToken: true }
+          },
+          {
+            path: 'detecParamAdd',
+            component: () =>
+              import('@/views/QualityManager/offlineDetec/components/detecParam-add'),
+            name: 'detecParamAdd',
+            hidden: true,
+            meta: { title: routerTitle.quality.offlineDetec.detecParam?.[language] || routerTitle.quality.offlineDetec.detecParam.detecParam.en, icon: 'form', affix: true, required: true, requireToken: true }
+          },
+          {
+            path: 'equipmentDetectParam',
+            component: () =>
+              import('@/views/basicData/Equipment/equipmentDetectParam'),
+            name: 'equipmentDetectParam',
+            hidden: true,
+            meta: { title: routerTitle.basicData.equipment.equipmentDetectInfo.equipmentDetectParam?.[language] || routerTitle.basicData.equipment.equipmentDetectInfo.equipmentDetectParam.en, icon: 'form', affix: true, required: true, requireToken: true }
+          },
+          {
+            path: 'equipmentDetectParamAdd',
+            component: () =>
+              import('@/views/basicData/Equipment/components/equipmentDetectParam-add'),
+            name: 'equipmentDetectParamAdd',
+            meta: { title: routerTitle.basicData.equipment.equipmentDetectInfo.equipmentDetectParam?.[language] || routerTitle.basicData.equipment.equipmentDetectInfo.equipmentDetectParam.en, icon: 'form', affix: true, required: true, requireToken: true }
+          },
+          {
+            path: 'detecRegistration',
+            component: () =>
+              import('@/views/QualityManager/offlineDetec/detecRegistration'),
+            name: 'detecRegistration',
+            meta: { title: routerTitle.quality.offlineDetec.detecRegistration?.[language] || routerTitle.quality.offlineDetec.detecRegistration.en, icon: 'form', affix: true, required: true, requireToken: true }
+          }
+        ]
+      },
+      {
+        path: '/spc',
+        component: () => import('@/views/spc/index'),
+        name: 'spcManage',
+        meta: { title: routerTitle.spc?.[language] || routerTitle.spc.en, icon: 'form', iconPart: 'formwhite', affix: true, required: true, requireToken: true, openUrl: 'http://58.210.206.230:8000/thirdLogin?username=ZJCadmin&password=123456' }
+      },
+      {
+        path: 'knowledge',
+        component: () => import('@/views/QualityManager/base/knowledge'),
+        name: 'knowledge',
+        meta: { title: routerTitle.quality.knowledge?.[language] || routerTitle.quality.knowledge.en, icon: 'form', iconPart: 'formwhite', affix: true }
       }
     ]
   },
-
   {
-    path: '/zip',
+    path: '/basic',
     component: Layout,
-    redirect: '/zip/download',
-    alwaysShow: true,
-    name: 'Zip',
-    meta: { title: 'Zip', icon: 'zip' },
+    redirect: '/user/manager',
+    name: 'ArticleManager',
+    meta: { title: routerTitle.basic?.[language] || routerTitle.basic.en, icon: 'form', iconPart: 'ArticleManager', affix: true, required: true, requireToken: true },
     children: [
       {
-        path: 'download',
-        component: () => import('@/views/zip/index'),
-        name: 'ExportZip',
-        meta: { title: 'Export Zip' }
-      }
-    ]
-  },
-
-  {
-    path: '/pdf',
-    component: Layout,
-    redirect: '/pdf/index',
-    children: [
+        path: 'usermanage',
+        component: () => import('@/views/UserPage/usermanage'),
+        name: 'usermanage',
+        meta: { title: routerTitle.basic.usermanage?.[language] || routerTitle.basic.usermanage.en, icon: 'form', affix: true, required: true, requireToken: true }
+      },
       {
-        path: 'index',
-        component: () => import('@/views/pdf/index'),
-        name: 'PDF',
-        meta: { title: 'PDF', icon: 'pdf' }
-      }
-    ]
-  },
-  {
-    path: '/pdf/download',
-    component: () => import('@/views/pdf/download'),
-    hidden: true
-  },
-
-  {
-    path: '/theme',
-    component: Layout,
-    children: [
+        path: 'rolemanager',
+        component: () => import('@/views/RoleManager'),
+        name: 'ArticleManager',
+        meta: { title: routerTitle.basic.rolemanage?.[language] || routerTitle.basic.rolemanage.en, icon: 'form', affix: true, required: true, requireToken: true }
+      },
       {
-        path: 'index',
-        component: () => import('@/views/theme/index'),
-        name: 'Theme',
-        meta: { title: 'Theme', icon: 'theme' }
-      }
-    ]
-  },
-
-  {
-    path: '/clipboard',
-    component: Layout,
-    children: [
+        path: 'menumanager',
+        component: () => import('@/views/MenuManager'),
+        name: 'MenuManager',
+        hidden: true,
+        meta: { title: routerTitle.basic.menumanage?.[language] || routerTitle.basic.menumanage.en, icon: 'form', affix: true, required: true, requireToken: true }
+      },
       {
-        path: 'index',
-        component: () => import('@/views/clipboard/index'),
-        name: 'ClipboardDemo',
-        meta: { title: 'Clipboard', icon: 'clipboard' }
+        path: 'manager',
+        component: () => import('@/views/OrgManager/manager'),
+        name: 'manager',
+        meta: { title: routerTitle.basic.orgmanage?.[language] || routerTitle.basic.orgmanage.en, icon: 'form', affix: true, required: true, requireToken: true }
       }
     ]
   },
-
-  {
-    path: 'external-link',
-    component: Layout,
-    children: [
-      {
-        path: 'https://github.com/PanJiaChen/vue-element-admin',
-        meta: { title: 'External Link', icon: 'link' }
-      }
-    ]
-  },
-
-  // 404 page must be placed at the end !!!
   { path: '*', redirect: '/404', hidden: true }
 ]
 
-const createRouter = () => new Router({
-  // mode: 'history', // require service support
-  scrollBehavior: () => ({ y: 0 }),
-  routes: constantRoutes
-})
+const createRouter = (r) =>
+  new Router({
+    // mode: 'history', // require service support
+    scrollBehavior: () => ({ y: 0 }),
+    routes: r
+  })
 
-const router = createRouter()
+const router = createRouter(constantRoutes)
+
+router.beforeEach((to, from, next) => {
+  console.log('route.index', to, to.meta.routeIndex)
+  if (to.meta.routeIndex >= 0) {
+    store.dispatch('app/setChoicepart', to.meta.routeIndex)
+  }
+  // 拦截器
+  console.log('route,to.path:', to.path)
+  if (to.meta.requireToken) {
+    if (Cookies.get('Admin-Token')) {
+      if (to.meta.required) {
+        if (Cookies.get('choicepart') === 'undefined' || !Cookies.get('choicepart')) {
+          next({
+            path: '/'
+          })
+        } else {
+          next()
+        }
+      } else {
+        next()
+      }
+    } else {
+      next({
+        path: '/login'
+      })
+    }
+  } else {
+    next()
+  }
+})
 
 // Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
 export function resetRouter() {
-  const newRouter = createRouter()
+  const newRouter = createRouter(constantRoutes)
   router.matcher = newRouter.matcher // reset router
 }
 
+// export function resetRouter(dynamicRoutes) {
+//   createRouter(constantRoutes.concat(dynamicRoutes))
+// }
+
 export default router
diff --git a/src/router/modules/art-manage.js b/src/router/modules/art-manage.js
new file mode 100644
index 0000000..651ea33
--- /dev/null
+++ b/src/router/modules/art-manage.js
@@ -0,0 +1,28 @@
+/** When your routing table is too long, you can split it into small modules**/
+
+import Layout from '@/layout'
+
+const artManageRouter = {
+  path: '/art',
+  component: Layout,
+  redirect: '/art/list',
+  name: 'ArtManager',
+  meta: { title: '工艺管理', icon: 'form', affix: true },
+  children: [
+    {
+      path: 'list',
+      component: () => import('@/views/art/list'),
+      name: 'ArtList',
+      meta: { title: '工艺列表', icon: 'form', affix: true }
+    },
+    {
+      path: 'process',
+      component: () => import('@/views/art/process/list'),
+      name: 'Process',
+      meta: { title: '工艺流程', icon: 'form', affix: true },
+      hidden: true
+    }
+  ]
+}
+
+export default artManageRouter
diff --git a/src/router/modules/components.js b/src/router/modules/components.js
deleted file mode 100644
index 0da96f9..0000000
--- a/src/router/modules/components.js
+++ /dev/null
@@ -1,102 +0,0 @@
-/** When your routing table is too long, you can split it into small modules **/
-
-import Layout from '@/layout'
-
-const componentsRouter = {
-  path: '/components',
-  component: Layout,
-  redirect: 'noRedirect',
-  name: 'ComponentDemo',
-  meta: {
-    title: 'Components',
-    icon: 'component'
-  },
-  children: [
-    {
-      path: 'tinymce',
-      component: () => import('@/views/components-demo/tinymce'),
-      name: 'TinymceDemo',
-      meta: { title: 'Tinymce' }
-    },
-    {
-      path: 'markdown',
-      component: () => import('@/views/components-demo/markdown'),
-      name: 'MarkdownDemo',
-      meta: { title: 'Markdown' }
-    },
-    {
-      path: 'json-editor',
-      component: () => import('@/views/components-demo/json-editor'),
-      name: 'JsonEditorDemo',
-      meta: { title: 'JSON Editor' }
-    },
-    {
-      path: 'split-pane',
-      component: () => import('@/views/components-demo/split-pane'),
-      name: 'SplitpaneDemo',
-      meta: { title: 'SplitPane' }
-    },
-    {
-      path: 'avatar-upload',
-      component: () => import('@/views/components-demo/avatar-upload'),
-      name: 'AvatarUploadDemo',
-      meta: { title: 'Upload' }
-    },
-    {
-      path: 'dropzone',
-      component: () => import('@/views/components-demo/dropzone'),
-      name: 'DropzoneDemo',
-      meta: { title: 'Dropzone' }
-    },
-    {
-      path: 'sticky',
-      component: () => import('@/views/components-demo/sticky'),
-      name: 'StickyDemo',
-      meta: { title: 'Sticky' }
-    },
-    {
-      path: 'count-to',
-      component: () => import('@/views/components-demo/count-to'),
-      name: 'CountToDemo',
-      meta: { title: 'Count To' }
-    },
-    {
-      path: 'mixin',
-      component: () => import('@/views/components-demo/mixin'),
-      name: 'ComponentMixinDemo',
-      meta: { title: 'Component Mixin' }
-    },
-    {
-      path: 'back-to-top',
-      component: () => import('@/views/components-demo/back-to-top'),
-      name: 'BackToTopDemo',
-      meta: { title: 'Back To Top' }
-    },
-    {
-      path: 'drag-dialog',
-      component: () => import('@/views/components-demo/drag-dialog'),
-      name: 'DragDialogDemo',
-      meta: { title: 'Drag Dialog' }
-    },
-    {
-      path: 'drag-select',
-      component: () => import('@/views/components-demo/drag-select'),
-      name: 'DragSelectDemo',
-      meta: { title: 'Drag Select' }
-    },
-    {
-      path: 'dnd-list',
-      component: () => import('@/views/components-demo/dnd-list'),
-      name: 'DndListDemo',
-      meta: { title: 'Dnd List' }
-    },
-    {
-      path: 'drag-kanban',
-      component: () => import('@/views/components-demo/drag-kanban'),
-      name: 'DragKanbanDemo',
-      meta: { title: 'Drag Kanban' }
-    }
-  ]
-}
-
-export default componentsRouter
diff --git a/src/router/modules/material-manage.js b/src/router/modules/material-manage.js
new file mode 100644
index 0000000..50f0194
--- /dev/null
+++ b/src/router/modules/material-manage.js
@@ -0,0 +1,68 @@
+/*
+ * @Author: your name
+ * @Date: 2021-04-26 08:42:32
+ * @LastEditTime: 2021-04-26 10:01:24
+ * @LastEditors: your name
+ * @Description: In User Settings Edit
+ * @FilePath: \mt-bus-fe\src\router\modules\material-manage.js
+ */
+/** When your routing table is too long, you can split it into small modules**/
+
+import Layout from '@/layout'
+
+const materialManageRouter = {
+  path: '/material-manage',
+  component: Layout,
+  redirect: '/material-manage/refueling',
+  name: 'MaterialsManage',
+  meta: { title: '物料管理', icon: 'form', affix: true },
+  children: [
+    {
+      path: 'refueling',
+      component: () => import('@/views/material-manage/refueling/index'),
+      name: 'refueling',
+      meta: { title: '换料记录', icon: 'form', affix: true }
+    },
+    {
+      path: 'refueling/add',
+      component: () => import('@/views/material-manage/refueling/components/add-panel'),
+      name: 'refuelingAdd',
+      meta: { title: '换料记录操作', icon: 'form', affix: true },
+      hidden: true
+    },
+    {
+      path: 'bom',
+      component: () => import('@/views/material-manage/bom/index'),
+      name: 'bom',
+      meta: { title: '物料BOM', icon: 'form', affix: true }
+    },
+    {
+      path: 'bom/add',
+      component: () => import('@/views/material-manage/bom/components/add-panel'),
+      name: 'bomAdd',
+      meta: { title: '物料BOM操作', icon: 'form', affix: true },
+      hidden: true
+    },
+    {
+      path: 'batch',
+      component: () => import('@/views/material-manage/batch/index'),
+      name: 'batch',
+      meta: { title: '物料批次', icon: 'form', affix: true }
+    },
+    {
+      path: 'batch/add',
+      component: () => import('@/views/material-manage/batch/components/add-panel'),
+      name: 'batchAdd',
+      meta: { title: '物料批次操作', icon: 'form', affix: true },
+      hidden: true
+    },
+    {
+      path: 'report',
+      component: () => import('@/views/material-manage/report/index'),
+      name: 'report',
+      meta: { title: '物料报表', icon: 'form', affix: true }
+    }
+  ]
+}
+
+export default materialManageRouter
diff --git a/src/router/modules/nested.js b/src/router/modules/nested.js
deleted file mode 100644
index 48033ed..0000000
--- a/src/router/modules/nested.js
+++ /dev/null
@@ -1,66 +0,0 @@
-/** When your routing table is too long, you can split it into small modules **/
-
-import Layout from '@/layout'
-
-const nestedRouter = {
-  path: '/nested',
-  component: Layout,
-  redirect: '/nested/menu1/menu1-1',
-  name: 'Nested',
-  meta: {
-    title: 'Nested Routes',
-    icon: 'nested'
-  },
-  children: [
-    {
-      path: 'menu1',
-      component: () => import('@/views/nested/menu1/index'), // Parent router-view
-      name: 'Menu1',
-      meta: { title: 'Menu 1' },
-      redirect: '/nested/menu1/menu1-1',
-      children: [
-        {
-          path: 'menu1-1',
-          component: () => import('@/views/nested/menu1/menu1-1'),
-          name: 'Menu1-1',
-          meta: { title: 'Menu 1-1' }
-        },
-        {
-          path: 'menu1-2',
-          component: () => import('@/views/nested/menu1/menu1-2'),
-          name: 'Menu1-2',
-          redirect: '/nested/menu1/menu1-2/menu1-2-1',
-          meta: { title: 'Menu 1-2' },
-          children: [
-            {
-              path: 'menu1-2-1',
-              component: () => import('@/views/nested/menu1/menu1-2/menu1-2-1'),
-              name: 'Menu1-2-1',
-              meta: { title: 'Menu 1-2-1' }
-            },
-            {
-              path: 'menu1-2-2',
-              component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2'),
-              name: 'Menu1-2-2',
-              meta: { title: 'Menu 1-2-2' }
-            }
-          ]
-        },
-        {
-          path: 'menu1-3',
-          component: () => import('@/views/nested/menu1/menu1-3'),
-          name: 'Menu1-3',
-          meta: { title: 'Menu 1-3' }
-        }
-      ]
-    },
-    {
-      path: 'menu2',
-      name: 'Menu2',
-      component: () => import('@/views/nested/menu2/index'),
-      meta: { title: 'Menu 2' }
-    }
-  ]
-}
-
-export default nestedRouter
diff --git a/src/router/modules/table.js b/src/router/modules/table.js
deleted file mode 100644
index ec28c52..0000000
--- a/src/router/modules/table.js
+++ /dev/null
@@ -1,41 +0,0 @@
-/** When your routing table is too long, you can split it into small modules **/
-
-import Layout from '@/layout'
-
-const tableRouter = {
-  path: '/table',
-  component: Layout,
-  redirect: '/table/complex-table',
-  name: 'Table',
-  meta: {
-    title: 'Table',
-    icon: 'table'
-  },
-  children: [
-    {
-      path: 'dynamic-table',
-      component: () => import('@/views/table/dynamic-table/index'),
-      name: 'DynamicTable',
-      meta: { title: 'Dynamic Table' }
-    },
-    {
-      path: 'drag-table',
-      component: () => import('@/views/table/drag-table'),
-      name: 'DragTable',
-      meta: { title: 'Drag Table' }
-    },
-    {
-      path: 'inline-edit-table',
-      component: () => import('@/views/table/inline-edit-table'),
-      name: 'InlineEditTable',
-      meta: { title: 'Inline Edit' }
-    },
-    {
-      path: 'complex-table',
-      component: () => import('@/views/table/complex-table'),
-      name: 'ComplexTable',
-      meta: { title: 'Complex Table' }
-    }
-  ]
-}
-export default tableRouter
diff --git a/src/router/modules/team.js b/src/router/modules/team.js
new file mode 100644
index 0000000..928d55a
--- /dev/null
+++ b/src/router/modules/team.js
@@ -0,0 +1,41 @@
+/** When your routing table is too long, you can split it into small modules**/
+
+import Layout from '@/layout'
+
+const teamRouter = {
+  path: '/team-manage',
+  component: Layout,
+  redirect: '/team-manage/list',
+  name: 'TeamManage',
+  meta: { title: '班组管理', icon: 'form', affix: true },
+  children: [
+    {
+      path: 'list',
+      component: () => import('@/views/team-manage/list'),
+      name: 'TeamManageList',
+      meta: { title: '班组列表', icon: 'form', affix: true }
+    },
+    {
+      path: 'team/add',
+      component: () => import('@/views/team-manage/components/change/add-plan'),
+      name: 'TeamManageAdd',
+      meta: { title: '班组交接操作', icon: 'form', affix: true },
+      hidden: true
+    },
+    {
+      path: 'plan',
+      component: () => import('@/views/team-manage/plan'),
+      name: 'TeamManagePlan',
+      meta: { title: '班组计划', icon: 'form', affix: true }
+    },
+    {
+      path: 'plan/add',
+      component: () => import('@/views/team-manage/components/plan/add-plan'),
+      name: 'TeamManagePlanAdd',
+      meta: { title: '班组计划操作', icon: 'form', affix: true },
+      hidden: true
+    }
+  ]
+}
+
+export default teamRouter
diff --git a/src/settings.js b/src/settings.js
index 1ebc7f2..ca06c49 100644
--- a/src/settings.js
+++ b/src/settings.js
@@ -1,5 +1,13 @@
+/*
+ * @Date: 2020-12-14 09:07:03
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-03-08 11:52:17
+ * @FilePath: \basic-admin\src\settings.js
+ * @Description:
+ */
+
 module.exports = {
-  title: 'Vue Element Admin',
+  title: 'ARI MES',
 
   /**
    * @type {boolean} true | false
@@ -17,13 +25,13 @@ module.exports = {
    * @type {boolean} true | false
    * @description Whether fix the header
    */
-  fixedHeader: false,
+  fixedHeader: true,
 
   /**
    * @type {boolean} true | false
    * @description Whether show the logo in sidebar
    */
-  sidebarLogo: false,
+  sidebarLogo: true,
 
   /**
    * @type {string | array} 'production' | ['production', 'development']
@@ -31,5 +39,11 @@ module.exports = {
    * The default is only used in the production env
    * If you want to also use it in dev, you can pass ['production', 'development']
    */
-  errorLog: 'production'
+  errorLog: 'production',
+
+  // 自行更改
+  usePermission: false,
+
+  // 文件上传接口url
+  baseUrl: 'http://mes.picaiba.com/api/common/attachment/uploadFile'
 }
diff --git a/src/store/getters.js b/src/store/getters.js
index 8fcf5a5..3586e1d 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -1,15 +1,25 @@
+/*
+ * @Date: 2020-12-14 09:07:03
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-01-29 14:24:20
+ * @FilePath: \basic-admin\src\store\getters.js
+ * @Description:
+ */
 const getters = {
   sidebar: state => state.app.sidebar,
+  language: state => state.app.language,
   size: state => state.app.size,
   device: state => state.app.device,
+  choicepart: state => state.app.choicepart,
   visitedViews: state => state.tagsView.visitedViews,
   cachedViews: state => state.tagsView.cachedViews,
   token: state => state.user.token,
   avatar: state => state.user.avatar,
   name: state => state.user.name,
   introduction: state => state.user.introduction,
+  username: state => state.user.username,
   roles: state => state.user.roles,
-  permission_routes: state => state.permission.routes,
-  errorLogs: state => state.errorLog.logs
+  menus: state => state.user.menus,
+  permission_routes: state => state.permission.routes
 }
 export default getters
diff --git a/src/store/modules/app.js b/src/store/modules/app.js
index 45d89bb..ad0ddf0 100644
--- a/src/store/modules/app.js
+++ b/src/store/modules/app.js
@@ -1,4 +1,13 @@
+/*
+ * @Author: your name
+ * @Date: 2021-01-27 10:07:42
+ * @LastEditTime: 2021-01-27 10:53:02
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \mt-bus-fe\src\store\modules\app.js
+ */
 import Cookies from 'js-cookie'
+import { getLanguage } from '@/lang/index'
 
 const state = {
   sidebar: {
@@ -6,7 +15,9 @@ const state = {
     withoutAnimation: false
   },
   device: 'desktop',
-  size: Cookies.get('size') || 'medium'
+  language: getLanguage(),
+  size: Cookies.get('size') || 'medium',
+  choicepart: Cookies.get('choicepart') || null
 }
 
 const mutations = {
@@ -27,9 +38,17 @@ const mutations = {
   TOGGLE_DEVICE: (state, device) => {
     state.device = device
   },
+  SET_LANGUAGE: (state, language) => {
+    state.language = language
+    Cookies.set('language', language)
+  },
   SET_SIZE: (state, size) => {
     state.size = size
     Cookies.set('size', size)
+  },
+  SET_CHOICEPART: (state, choicepart) => {
+    state.choicepart = choicepart
+    Cookies.set('choicepart', choicepart)
   }
 }
 
@@ -43,8 +62,14 @@ const actions = {
   toggleDevice({ commit }, device) {
     commit('TOGGLE_DEVICE', device)
   },
+  setLanguage({ commit }, language) {
+    commit('SET_LANGUAGE', language)
+  },
   setSize({ commit }, size) {
     commit('SET_SIZE', size)
+  },
+  setChoicepart({ commit }, choicepart) {
+    commit('SET_CHOICEPART', choicepart)
   }
 }
 
diff --git a/src/store/modules/permission.js b/src/store/modules/permission.js
index aeb5ee5..7c82768 100644
--- a/src/store/modules/permission.js
+++ b/src/store/modules/permission.js
@@ -1,31 +1,36 @@
-import { asyncRoutes, constantRoutes } from '@/router'
+import { dynamicRoutes, constantRoutes } from '@/router'
+import { getListItems } from '@/utils/tree'
 
 /**
  * Use meta.role to determine if the current user has permission
  * @param roles
  * @param route
  */
-function hasPermission(roles, route) {
-  if (route.meta && route.meta.roles) {
-    return roles.some(role => route.meta.roles.includes(role))
-  } else {
+function hasPermission(menuList, route) {
+  // if (route.meta && route.meta.roles) {
+  //   return roles.some(role => route.meta.roles.includes(role))
+  // } else {
+  //   return true
+  // }
+  if (route.hidden) {
     return true
   }
+  return menuList.some(m => route.path === m.h)
 }
 
 /**
  * Filter asynchronous routing tables by recursion
  * @param routes asyncRoutes
- * @param roles
+ * @param menuList
  */
-export function filterAsyncRoutes(routes, roles) {
+export function filterAsyncRoutes(routes, menuList) {
   const res = []
 
   routes.forEach(route => {
     const tmp = { ...route }
-    if (hasPermission(roles, tmp)) {
+    if (hasPermission(menuList, tmp)) {
       if (tmp.children) {
-        tmp.children = filterAsyncRoutes(tmp.children, roles)
+        tmp.children = filterAsyncRoutes(tmp.children, menuList)
       }
       res.push(tmp)
     }
@@ -47,13 +52,19 @@ const mutations = {
 }
 
 const actions = {
-  generateRoutes({ commit }, roles) {
+  generateRoutes({ commit }, menus) {
     return new Promise(resolve => {
       let accessedRoutes
-      if (roles.includes('admin')) {
-        accessedRoutes = asyncRoutes || []
+      console.log(menus)
+      if (!menus) {
+        accessedRoutes = []
       } else {
-        accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
+        const menuList = []
+        getListItems(menus, node => menuList.push(node))
+        console.log(menuList)
+        console.log(dynamicRoutes)
+        accessedRoutes = filterAsyncRoutes(dynamicRoutes, menuList)
+        console.log(accessedRoutes)
       }
       commit('SET_ROUTES', accessedRoutes)
       resolve(accessedRoutes)
diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js
index 110533f..e389af7 100644
--- a/src/store/modules/settings.js
+++ b/src/store/modules/settings.js
@@ -13,7 +13,6 @@ const state = {
 
 const mutations = {
   CHANGE_SETTING: (state, { key, value }) => {
-    // eslint-disable-next-line no-prototype-builtins
     if (state.hasOwnProperty(key)) {
       state[key] = value
     }
diff --git a/src/store/modules/user.js b/src/store/modules/user.js
index 7800941..98ab5e1 100644
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -1,13 +1,16 @@
-import { login, logout, getInfo } from '@/api/user'
+import { login, getUserInfo } from '@/api/user'
 import { getToken, setToken, removeToken } from '@/utils/auth'
 import router, { resetRouter } from '@/router'
+import Cookies from 'js-cookie'
 
 const state = {
   token: getToken(),
   name: '',
   avatar: '',
   introduction: '',
-  roles: []
+  roles: [],
+  menus: [],
+  username: Cookies.get('username') || ''
 }
 
 const mutations = {
@@ -23,8 +26,14 @@ const mutations = {
   SET_AVATAR: (state, avatar) => {
     state.avatar = avatar
   },
+  SET_MENUS: (state, menus) => {
+    state.menus = menus
+  },
   SET_ROLES: (state, roles) => {
     state.roles = roles
+  },
+  SET_USERNAME: (state, username) => {
+    state.username = username
   }
 }
 
@@ -33,11 +42,18 @@ const actions = {
   login({ commit }, userInfo) {
     const { username, password } = userInfo
     return new Promise((resolve, reject) => {
-      login({ username: username.trim(), password: password }).then(response => {
-        const { data } = response
-        commit('SET_TOKEN', data.token)
-        setToken(data.token)
-        resolve()
+      login({ mobile: username.trim(), password: password }).then(res => {
+        console.log(res)
+        if (res.code === 0) {
+          const { token, name } = res.data
+          commit('SET_TOKEN', token)
+          commit('SET_USERNAME', name)
+          Cookies.set('username', name)
+          setToken(token)
+          resolve()
+        } else {
+          reject(res)
+        }
       }).catch(error => {
         reject(error)
       })
@@ -47,23 +63,24 @@ const actions = {
   // get user info
   getInfo({ commit, state }) {
     return new Promise((resolve, reject) => {
-      getInfo(state.token).then(response => {
+      getUserInfo(state.token).then(response => {
         const { data } = response
 
         if (!data) {
           reject('Verification failed, please Login again.')
         }
 
-        const { roles, name, avatar, introduction } = data
+        const { roles, name, avatar, introduction, menus } = data
 
         // roles must be a non-empty array
-        if (!roles || roles.length <= 0) {
-          reject('getInfo: roles must be a non-null array!')
+        if (!menus || menus.length <= 0) {
+          reject('getInfo: menus must be a non-null array!')
         }
 
-        commit('SET_ROLES', roles)
+        commit('SET_ROLES', roles || [])
         commit('SET_NAME', name)
         commit('SET_AVATAR', avatar)
+        commit('SET_MENUS', menus)
         commit('SET_INTRODUCTION', introduction)
         resolve(data)
       }).catch(error => {
@@ -75,20 +92,30 @@ const actions = {
   // user logout
   logout({ commit, state, dispatch }) {
     return new Promise((resolve, reject) => {
-      logout(state.token).then(() => {
-        commit('SET_TOKEN', '')
-        commit('SET_ROLES', [])
-        removeToken()
-        resetRouter()
+      removeToken()
+      resetRouter()
+      dispatch('tagsView/delAllViews', null, { root: true })
+      commit('SET_TOKEN', '')
+      commit('SET_ROLES', [])
+      commit('SET_MENUS', [])
+      commit('SET_USERNAME')
+      Cookies.set('username', '')
+      localStorage.clear()
+      resolve()
+      // logout(state.token).then(() => {
+      //   commit('SET_TOKEN', '')
+      //   commit('SET_ROLES', [])
+      //   removeToken()
+      //   resetRouter()
 
-        // reset visited views and cached views
-        // to fixed https://github.com/PanJiaChen/vue-element-admin/issues/2485
-        dispatch('tagsView/delAllViews', null, { root: true })
+      //   // reset visited views and cached views
+      //   // to fixed https://github.com/PanJiaChen/vue-element-admin/issues/2485
+      //   dispatch('tagsView/delAllViews', null, { root: true })
 
-        resolve()
-      }).catch(error => {
-        reject(error)
-      })
+      //   resolve()
+      // }).catch(error => {
+      //   reject(error)
+      // })
     })
   },
 
@@ -103,23 +130,28 @@ const actions = {
   },
 
   // dynamically modify permissions
-  async changeRoles({ commit, dispatch }, role) {
-    const token = role + '-token'
+  changeRoles({ commit, dispatch }, role) {
+    return new Promise(async resolve => {
+      const token = role + '-token'
 
-    commit('SET_TOKEN', token)
-    setToken(token)
+      commit('SET_TOKEN', token)
+      setToken(token)
 
-    const { roles } = await dispatch('getInfo')
+      const { roles } = await dispatch('getInfo')
 
-    resetRouter()
+      resetRouter()
 
-    // generate accessible routes map based on roles
-    const accessRoutes = await dispatch('permission/generateRoutes', roles, { root: true })
-    // dynamically add accessible routes
-    router.addRoutes(accessRoutes)
+      // generate accessible routes map based on roles
+      const accessRoutes = await dispatch('permission/generateRoutes', roles, { root: true })
 
-    // reset visited views and cached views
-    dispatch('tagsView/delAllViews', null, { root: true })
+      // dynamically add accessible routes
+      router.addRoutes(accessRoutes)
+
+      // reset visited views and cached views
+      dispatch('tagsView/delAllViews', null, { root: true })
+
+      resolve()
+    })
   }
 }
 
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 96095ef..85fab23 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -189,3 +189,12 @@ aside {
 .multiselect--active {
   z-index: 1000 !important;
 }
+
+// 业务代码中
+.content-row {
+  padding: 10px 0;
+}
+
+.el-dialog__wrapper {
+  backdrop-filter: blur(5px);
+}
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index 94760cc..3dad4c3 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -57,11 +57,6 @@
       margin-right: 16px;
     }
 
-    .sub-el-icon {
-      margin-right: 12px;
-      margin-left: -2px;
-    }
-
     .el-menu {
       border: none;
       height: 100%;
@@ -110,10 +105,6 @@
         .svg-icon {
           margin-left: 20px;
         }
-
-        .sub-el-icon {
-          margin-left: 19px;
-        }
       }
     }
 
@@ -127,10 +118,6 @@
           margin-left: 20px;
         }
 
-        .sub-el-icon {
-          margin-left: 19px;
-        }
-
         .el-submenu__icon-arrow {
           display: none;
         }
@@ -191,10 +178,6 @@
     .svg-icon {
       margin-right: 16px;
     }
-    .sub-el-icon {
-      margin-right: 12px;
-      margin-left: -2px;
-    }
   }
 
   .nest-menu .el-submenu>.el-submenu__title,
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index a19c27c..13c5202 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -19,7 +19,7 @@ $menuHover:#263445;
 $subMenuBg:#1f2d3d;
 $subMenuHover:#001528;
 
-$sideBarWidth: 210px;
+$sideBarWidth: 300px;
 
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
diff --git a/src/utils/auth.js b/src/utils/auth.js
index 08a43d6..3d515a4 100644
--- a/src/utils/auth.js
+++ b/src/utils/auth.js
@@ -7,6 +7,7 @@ export function getToken() {
 }
 
 export function setToken(token) {
+  console.log('setToken=' + token)
   return Cookies.set(TokenKey, token)
 }
 
diff --git a/src/utils/blobToBase64.js b/src/utils/blobToBase64.js
new file mode 100644
index 0000000..874302a
--- /dev/null
+++ b/src/utils/blobToBase64.js
@@ -0,0 +1,20 @@
+/*
+ * @Author: gtz
+ * @Date: 2021-03-01 16:54:38
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-03-01 16:57:00
+ * @Description: file content
+ */
+
+export function blobToBase64(blob) {
+  return new Promise((resolve, reject) => {
+    const fileReader = new FileReader()
+    fileReader.onload = (e) => {
+      resolve(e.target.result)
+    }
+    fileReader.readAsDataURL(blob)
+    fileReader.onerror = () => {
+      reject(new Error('blobToBase64 error'))
+    }
+  })
+}
diff --git a/src/utils/bus.js b/src/utils/bus.js
new file mode 100644
index 0000000..670b22c
--- /dev/null
+++ b/src/utils/bus.js
@@ -0,0 +1,4 @@
+import Vue from 'vue'
+import VueBus from 'vue-bus'
+
+Vue.use(VueBus)
diff --git a/src/utils/cache.js b/src/utils/cache.js
new file mode 100644
index 0000000..d7b3b34
--- /dev/null
+++ b/src/utils/cache.js
@@ -0,0 +1,15 @@
+/*
+ * @Date: 2021-01-23 16:19:01
+ * @LastEditors: guo
+ * @LastEditTime: 2021-01-23 16:54:29
+ * @FilePath: \basic-admin\src\utils\cache.js
+ * @Description: 带缓存的接口请求
+ */
+
+// import request from './request'
+
+export default function(reqPromise) {
+  return new Promise((resolve, reject) => {
+    resolve()
+  })
+}
diff --git a/src/utils/get-page-title.js b/src/utils/get-page-title.js
index cab7fd9..f8d9781 100644
--- a/src/utils/get-page-title.js
+++ b/src/utils/get-page-title.js
@@ -1,10 +1,21 @@
-import defaultSettings from '@/settings'
+/*
+ * @Author: gtz
+ * @Date: 2021-01-27 10:07:42
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-02-26 09:11:54
+ * @Description: file content
+ */
+import i18n from '@/lang/i18n'
+import Cookies from 'js-cookie'
 
-const title = defaultSettings.title || 'Vue Element Admin'
+const language = Cookies.get('language')
+
+const title = i18n.title[language] || 'Vue Element Admin'
 
 export default function getPageTitle(pageTitle) {
-  if (pageTitle) {
-    return `${pageTitle} - ${title}`
-  }
+  // 暂时注释，不需要模块名
+  // if (pageTitle) {
+  //   return `${pageTitle} - ${title}`
+  // }
   return `${title}`
 }
diff --git a/src/utils/i18n.js b/src/utils/i18n.js
new file mode 100644
index 0000000..76be5a4
--- /dev/null
+++ b/src/utils/i18n.js
@@ -0,0 +1,12 @@
+// translate router.meta.title, be used in breadcrumb sidebar tagsview
+export function generateTitle(title) {
+  const hasKey = this.$te('route.' + title)
+
+  if (hasKey) {
+    // $t :this method from vue-i18n, inject in @/lang/index.js
+    const translatedTitle = this.$t('route.' + title)
+
+    return translatedTitle
+  }
+  return title
+}
diff --git a/src/utils/index.js b/src/utils/index.js
index 3225d3c..b759732 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -162,21 +162,19 @@ export function param(json) {
  * @returns {Object}
  */
 export function param2Obj(url) {
-  const search = decodeURIComponent(url.split('?')[1]).replace(/\+/g, ' ')
+  const search = url.split('?')[1]
   if (!search) {
     return {}
   }
-  const obj = {}
-  const searchArr = search.split('&')
-  searchArr.forEach(v => {
-    const index = v.indexOf('=')
-    if (index !== -1) {
-      const name = v.substring(0, index)
-      const val = v.substring(index + 1, v.length)
-      obj[name] = val
-    }
-  })
-  return obj
+  return JSON.parse(
+    '{"' +
+      decodeURIComponent(search)
+        .replace(/"/g, '\\"')
+        .replace(/&/g, '","')
+        .replace(/=/g, '":"')
+        .replace(/\+/g, ' ') +
+      '"}'
+  )
 }
 
 /**
@@ -355,3 +353,52 @@ export function removeClass(ele, cls) {
     ele.className = ele.className.replace(reg, ' ')
   }
 }
+
+// 对象中无效值过滤
+export function objFilter(obj) {
+  const newObj = {}
+  Object.keys(obj).forEach(item => {
+    if (obj[item] !== undefined && obj[item] !== null && obj[item] !== '') {
+      newObj[item] = obj[item]
+    }
+  })
+  return newObj
+}
+
+// 数据字典值转换
+export function dictChange(arr, { key = 'id', value = 'name' }) {
+  const table = {}
+  arr.forEach(item => {
+    table[item[key]] = item[value]
+  })
+  return table
+}
+
+// 数据字典过滤器
+export function dictFilter(obj) {
+  return function(val) {
+    return obj?.[val]
+  }
+}
+
+// 特定key的值替换
+export function arrInsertVal(arr, key, obj) {
+  return arr.map(item => {
+    if (item[key] && obj[key]) {
+      return {
+        ...item,
+        [key]: obj[key]
+      }
+    } else {
+      return item
+    }
+  })
+}
+
+// 判断某个时间是否先于另一个时间
+import moment from 'moment'
+export function timeIsBefore(a, b) {
+  if (a && b) {
+    return moment(a).isBefore(b)
+  }
+}
diff --git a/src/utils/permission.js b/src/utils/permission.js
index 8e2bbad..221d384 100644
--- a/src/utils/permission.js
+++ b/src/utils/permission.js
@@ -13,7 +13,11 @@ export default function checkPermission(value) {
     const hasPermission = roles.some(role => {
       return permissionRoles.includes(role)
     })
-    return hasPermission
+
+    if (!hasPermission) {
+      return false
+    }
+    return true
   } else {
     console.error(`need roles! Like v-permission="['admin','editor']"`)
     return false
diff --git a/src/utils/request.js b/src/utils/request.js
index 2fb95ac..6700dcd 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -1,30 +1,72 @@
+/*
+ * @Date: 2020-12-14 09:07:03
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-04-20 16:15:24
+ * @FilePath: \basic-admin\src\utils\request.js
+ * @Description:
+ */
 import axios from 'axios'
-import { MessageBox, Message } from 'element-ui'
+import { MessageBox, Message, Loading } from 'element-ui'
 import store from '@/store'
 import { getToken } from '@/utils/auth'
+import i18n from '@/lang'
 
 // create an axios instance
 const service = axios.create({
   baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
   // withCredentials: true, // send cookies when cross-domain requests
-  timeout: 5000 // request timeout
+  timeout: 15000 // request timeout
 })
+/*
+  当页面有两个接口时，第一个接口loading的close事件会直接将第二个接口的loading实例也close
+  每次创建Loading实例的时候判断当前是否存在，如果当前还没有Loading实例就创建一个，
+  如果有就不会再创建而是计数；每次关闭的时候判断当前的计数，
+  如果是0了就关闭，否则也计数减一，直到为0的时候表示当前所有页面所有接口都返回结束了，
+  此时执行关闭Loading.close()操作
+*/
+
+let loadingInstance = null
+function startLoading() {
+  loadingInstance = Loading.service({
+    fullscreen: false,
+    text: '拼命加载中...',
+    background: 'rgba(0, 0, 0, 0.1)'
+  })
+}
+function endLoading() {
+  loadingInstance.close()
+}
+let needLoadingRequestCount = 0
+function showFullScreenLoading() {
+  if (needLoadingRequestCount === 0) {
+    startLoading()
+  }
+  needLoadingRequestCount++
+}
+function tryHideFullScreenLoading() {
+  if (needLoadingRequestCount <= 0) return
+  needLoadingRequestCount--
+  if (needLoadingRequestCount === 0) {
+    endLoading()
+  }
+}
 
 // request interceptor
 service.interceptors.request.use(
   config => {
     // do something before request is sent
-
+    showFullScreenLoading()
     if (store.getters.token) {
       // let each request carry token
       // ['X-Token'] is a custom headers key
       // please modify it according to the actual situation
-      config.headers['X-Token'] = getToken()
+      config.headers['token'] = getToken()
     }
     return config
   },
   error => {
     // do something with request error
+    tryHideFullScreenLoading()
     console.log(error) // for debug
     return Promise.reject(error)
   }
@@ -43,22 +85,27 @@ service.interceptors.response.use(
    * You can also judge the status by HTTP Status Code
    */
   response => {
+    tryHideFullScreenLoading()
+    // console.log(response)
     const res = response.data
-
     // if the custom code is not 20000, it is judged as an error.
-    if (res.code !== 20000) {
+    if (response.config.responseType === 'blob') {
+      return response
+    }
+    if (res.code !== 0 && res.code !== 401) {
       Message({
-        message: res.message || 'Error',
+        message: res.msg || 'Error',
         type: 'error',
         duration: 5 * 1000
       })
 
-      // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
-      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
+      // 具体看框架对响应码的定义
+      if (res.code === 401) {
         // to re-login
-        MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
-          confirmButtonText: 'Re-Login',
-          cancelButtonText: 'Cancel',
+        // to do 添加i18n
+        MessageBox.confirm('登录信息失效,请重新登录', '提示', {
+          confirmButtonText: '去登录',
+          cancelButtonText: '取消',
           type: 'warning'
         }).then(() => {
           store.dispatch('user/resetToken').then(() => {
@@ -72,14 +119,39 @@ service.interceptors.response.use(
     }
   },
   error => {
+    tryHideFullScreenLoading()
     console.log('err' + error) // for debug
-    Message({
-      message: error.message,
-      type: 'error',
-      duration: 5 * 1000
-    })
+    if ('err' + error === 'errError: timeout of 15000ms exceeded') {
+      Message({
+        message: i18n.t('errorLog.timeoutTip'),
+        type: 'error',
+        duration: 5 * 1000
+      })
+    } else {
+      Message({
+        message: error.message,
+        type: 'error',
+        duration: 5 * 1000
+      })
+    }
     return Promise.reject(error)
   }
 )
 
 export default service
+
+export function requestWithCache(obj) {
+  const name = (obj.subname || '') + obj.url
+  const result = localStorage.getItem(name)
+  if (result) {
+    return Promise.resolve(JSON.parse(result))
+  } else {
+    return service(obj).then(res => {
+      localStorage.setItem(name, JSON.stringify(res))
+      setTimeout(() => {
+        localStorage.removeItem(name)
+      }, 60000)
+      return res
+    })
+  }
+}
diff --git a/src/utils/requestWithCache.js b/src/utils/requestWithCache.js
new file mode 100644
index 0000000..fa854df
--- /dev/null
+++ b/src/utils/requestWithCache.js
@@ -0,0 +1,36 @@
+/*
+ * @Date: 2021-01-26 10:39:44
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-01-27 11:25:20
+ * @FilePath: \basic-admin\src\utils\requestWithCache.js
+ * @Description: 带缓存的接口请求
+ */
+
+import request from './request'
+
+function getStorage(key) {
+  const result = localStorage.getItem(key)
+  if (result) {
+    return JSON.parse(result)
+  }
+}
+// function setStorage(key, value) {
+//   if (key) {
+//     return localStorage.setItem(key, JSON.stringify(value))
+//   }
+// }
+
+export default function({ url, method, data, ...rest }) {
+  // 判断是否有缓存数据
+  if (getStorage(url)) {
+    return getStorage(url)
+  } else {
+    // setStorage(key, value)
+    return request({
+      url,
+      method,
+      data,
+      ...rest
+    })
+  }
+}
diff --git a/src/utils/tree.js b/src/utils/tree.js
new file mode 100644
index 0000000..c232804
--- /dev/null
+++ b/src/utils/tree.js
@@ -0,0 +1,39 @@
+export const getListItems = (root, fVisit) => {
+  const queue = Array.isArray(root) ? [...root] : [root]
+  while (queue.length) {
+    const node = queue.shift()
+    fVisit && fVisit(node)
+    const children = node.l
+    if (children && children.length) {
+      for (let i = 0; i < children.length; i++) queue.push(children[i])
+    }
+  }
+}
+export const getTreeItems = (menus, idName = 'id', pIdName = 'parentId') => {
+  if (menus === null || menus.length === 0) {
+    return undefined
+  }
+  // 删除 所有 children,以防止多次调用
+  menus.forEach((item) => {
+    delete item.children
+  })
+  // 将数据存储为 以 id 为 KEY 的 map 索引数据列
+  const map = {}
+  menus.forEach((item) => {
+    map[item[idName]] = item
+  })
+  //        console.log(map);
+  const val = []
+  menus.forEach((item) => {
+    // 以当前遍历项，的pid,去map对象中找到索引的id
+    const parent = map[item[pIdName]]
+    // 好绕啊，如果找到索引，那么说明此项不在顶级当中,那么需要把此项添加到，他对应的父级中
+    if (parent) {
+      (parent.children || (parent.children = [])).push(item)
+    } else {
+      // 如果没有在map中找到对应的索引ID,那么直接把 当前的item添加到 val结果集中，作为顶级
+      val.push(item)
+    }
+  })
+  return val
+}
diff --git a/src/utils/validate.js b/src/utils/validate.js
index 6b3ac41..788a719 100644
--- a/src/utils/validate.js
+++ b/src/utils/validate.js
@@ -15,8 +15,10 @@ export function isExternal(path) {
  * @returns {Boolean}
  */
 export function validUsername(str) {
-  const valid_map = ['admin', 'editor']
-  return valid_map.indexOf(str.trim()) >= 0
+  // const valid_map = ['admin', 'editor']
+  // return valid_map.indexOf(str.trim()) >= 0
+  // TODO:检查手机号码
+  return true
 }
 
 /**
diff --git a/src/views/ChoicePart/index.vue b/src/views/ChoicePart/index.vue
new file mode 100644
index 0000000..a78365f
--- /dev/null
+++ b/src/views/ChoicePart/index.vue
@@ -0,0 +1,231 @@
+<template>
+  <div class="choicepart-container">
+    <div class="choicepat-navbar">
+      <navbar :showhome="false" :show-title="true" />
+    </div>
+    <div class="choicepart-container-box" :style="{ width: '100%' }" />
+    <div class="choicepart-box grid">
+      <div
+        v-for="(item, index) in routeList"
+        :key="item.path"
+        class="choicepart-item grid-item"
+        @click="handelClick(item, index)"
+      >
+        <!-- :style="{ background: colorArr.colorList[index % 9] }" -->
+        <div class="choicepart-item-border">
+          <div class="choicepart-item-icon"><div class="svgDiv"><svg-icon class="item-icon" :icon-class="item.meta.iconPart" /></div></div>
+          <div class="choicepart-item-title" :style="language === 'en' ? {fontSize: '22px'} : ''">{{ item.meta.title }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Masonry from 'masonry-layout'
+import { mapGetters } from 'vuex'
+import { constantRoutes } from '@/router'
+import { Navbar } from '@/layout/components'
+import store from '@/store'
+const colorList = ['#8080ff', '#ff8080', '#b004fb', '#ff409f', '#00caca', '#8080c0', '#cccc00', '#ff8040', '#0c4d9e']
+const colorList1 = ['#b4b4ff', '#ffb4b4', '#c648fb', '#ff86c2', '#66f6f6', '#a2a2f3', '#ffff9a', '#ffc3a5', '#367cd4']
+
+export default {
+  name: 'ChoicePart',
+  components: { Navbar },
+  data() {
+    return {
+      rowNum: 1,
+      colorArr: {
+        colorList,
+        colorList1
+      },
+      windowWidth: 0
+    }
+  },
+  computed: {
+    routeList() {
+      const cangoList = []
+      const permission_routes = store.getters.permission_routes
+      console.log(constantRoutes)
+      console.log(permission_routes)
+      permission_routes.map(item => {
+        if (!item.hidden && item.meta) {
+          cangoList.push(item)
+        }
+      })
+      const formatList = cangoList.map((item, index) => {
+        return this.setIndex(item, index)
+      })
+      console.log(formatList)
+      return formatList
+    },
+    ...mapGetters(['language'])
+  },
+  created() {
+    this.windowWidth = window.innerWidth
+  },
+  mounted() {
+    const grid = document.querySelector('.grid')
+    new Masonry(grid, {
+      itemSelector: '.grid-item',
+      columnWidth: 300
+    })
+  },
+  updated() {
+    const grid = document.querySelector('.grid')
+    new Masonry(grid, {
+      itemSelector: '.grid-item',
+      columnWidth: 300
+    })
+  },
+  methods: {
+    resize() {},
+    handelClick(item, index) {
+      this.$store.dispatch('app/setChoicepart', index)
+      if (item.meta.unuse) {
+        this.$message.warning(this.$t('choisePart.module'))
+      } else {
+        this.toRouter(item)
+      }
+    },
+    toRouter(item) {
+      if (item.children) {
+        this.toRouter(item.children[0])
+      } else {
+        this.$router.push({ name: item.name })
+      }
+    },
+    setIndex(list, index) {
+      list.meta.routeIndex = index
+      if (list.children) {
+        list.children.map(item => {
+          this.setIndex(item, index)
+        })
+      }
+      return list
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.choicepart-container{
+  width: 100%;
+  height: 100vh;
+  // background: linear-gradient(-45deg, rgb(25, 25, 200), rgb(0, 100, 200));
+  background: url('../../assets/img/login-new.jpg') no-repeat;
+  background-size: cover;
+  position: relative;
+  .choicepart-container-box{
+    background: rgba(255, 255, 255, .1);
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+  .grid {
+    position: relative;
+    .grid-item {
+      position: absolute;
+      transition: .3s ease-in-out;
+    }
+  }
+  .choicepart-box{
+    width: 100%;
+    margin: 0 auto;
+    padding-top: 60px;
+    min-height: 100vh;
+    overflow-y: scroll;
+    .choicepart-item{
+      display: inline-block;
+      width: 250px;
+      height: 150px;
+      margin: 20px;
+      padding: 5px;
+      background-color: #fff;
+      border-radius: 10px;
+      box-shadow: 0 2px 10px rgba(0, 0, 0, .5);
+      top: 0;
+      cursor: pointer;
+      .choicepart-item-border{
+        width: 100%;
+        height: 100%;
+        border: 2px solid #fff;
+        border-radius: 5px;
+        padding: 0 5px;
+        line-height: 32px;
+        font-size: 28px;
+        font-weight: lighter;
+        color: #2C6BD8;
+        overflow: hidden;
+        text-align: center;
+        word-break: break-all;
+        align-items: center;
+        display: flex;
+        justify-content: center;
+        flex-direction:column;
+        align-items: center;
+        .choicepart-item-icon{
+          margin-bottom: 10px;
+        }
+        .svgDiv{
+          background-color: #fff;
+          border: 1px solid #2C6BD8;
+          border-radius: 50%;
+          width: 60px;
+          height: 60px;
+          display: table-cell;
+          vertical-align: middle;
+          text-align: center;
+        }
+        .item-icon{
+          width: 32px;
+          height: 32px;
+        }
+        .choicepart-item-title {
+          -webkit-line-clamp:3;
+          -webkit-box-orient: vertical;
+          display: -webkit-box;
+          text-overflow: ellipsis;
+        }
+        .choicepart-item-title {
+          text-align: left;
+        }
+      }
+    }
+    .choicepart-item:hover .choicepart-item-border{
+      color: #fff;
+    }
+    .choicepart-item:hover{
+      background-color: #2C6BD8;
+      box-shadow: 0 10px 10px rgba(0, 0, 0, .5);
+      top: -5px;
+    }
+  }
+  .choicepat-navbar{
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 10;
+  }
+}
+::-webkit-scrollbar-track-piece { //滚动条凹槽的颜色，还可以设置边框属性
+  background: rgba(255, 255, 255, .1);
+}
+::-webkit-scrollbar {//滚动条的宽度
+  width:9px;
+  height:9px;
+}
+::-webkit-scrollbar-thumb {//滚动条的设置
+  background-color: #dddddd;
+  background-clip:padding-box;
+  min-height:28px;
+  border-radius: 9px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background-color:#bbb;
+}
+</style>
diff --git a/src/views/DictManager/index.vue b/src/views/DictManager/index.vue
new file mode 100644
index 0000000..f5117c8
--- /dev/null
+++ b/src/views/DictManager/index.vue
@@ -0,0 +1,7 @@
+<!--
+ * @Date: 2021-03-04 15:27:27
+ * @LastEditors: guo
+ * @LastEditTime: 2021-03-04 15:27:27
+ * @FilePath: \basic-admin\src\views\DictManager\index.vue
+ * @Description:
+-->
diff --git a/src/views/EquipmentManager/Analysis/EditForm.vue b/src/views/EquipmentManager/Analysis/EditForm.vue
new file mode 100644
index 0000000..f27fce7
--- /dev/null
+++ b/src/views/EquipmentManager/Analysis/EditForm.vue
@@ -0,0 +1,114 @@
+<!--
+ * @Date: 2021-01-11 09:24:41
+ * @LastEditors: guo
+ * @LastEditTime: 2021-02-25 16:04:49
+ * @FilePath: \basic-admin\src\views\EquipmentManager\StatusSetting\EditForm.vue
+ * @Description: 子页面
+-->
+<template>
+  <div>
+    <el-dialog v-bind="$attrs" title="修改设备状态" v-on="$listeners" @open="onOpen" @close="onClose">
+      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="120px">
+        <el-form-item label="设备状态" prop="status">
+          <el-select v-model="formData.status" placeholder="请选择下拉选择设备状态" clearable :style="{width: '100%'}">
+            <el-option
+              v-for="(item, index) in statusOptions"
+              :key="index"
+              :label="item.label"
+              :value="item.value"
+              :disabled="item.disabled"
+            />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="close">{{ 'btn.cancel' | i18nFilter }}</el-button>
+        <el-button type="primary" @click="handelConfirm">{{ 'btn.confirm' | i18nFilter }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { editStatusSetting } from '@/api/equipment/index'
+export default {
+  components: {},
+  inheritAttrs: false,
+  props: {
+    targetInfo: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      formData: {
+        status: undefined,
+        oldStatus: null,
+        id: null
+      },
+      rules: {
+        status: [{
+          required: true,
+          message: '请选择下拉选择设备状态',
+          trigger: 'change'
+        }]
+      },
+      statusOptions: [{
+        'label': 'productive',
+        'value': 0
+      }, {
+        'label': 'standby',
+        'value': 1
+      }, {
+        'label': 'unscheduled downtime',
+        'value': 2
+      }, {
+        'label': 'scheduled downtime',
+        'value': 3
+      }, {
+        'label': 'engineering',
+        'value': 4
+      }, {
+        'label': 'non-scheduled',
+        'value': 5
+      }]
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {
+    onOpen() {
+      this.formData.id = this.targetInfo.id
+      this.formData.oldStatus = this.targetInfo.status
+    },
+    onClose() {
+      this.$refs['elForm'].resetFields()
+    },
+    close() {
+      this.$emit('update:visible', false)
+    },
+    handelConfirm() {
+      this.$refs['elForm'].validate(async valid => {
+        if (!valid) return
+        const result = await editStatusSetting({
+          ...this.formData,
+          id: this.targetInfo?.id
+        })
+        if (result.code === 0) {
+          this.$message({
+            type: 'success',
+            message: '修改状态成功!'
+          })
+          this.$emit('done')
+          this.close()
+        }
+      })
+    }
+  }
+}
+
+</script>
+<style>
+</style>
diff --git a/src/views/EquipmentManager/Analysis/index.vue b/src/views/EquipmentManager/Analysis/index.vue
new file mode 100644
index 0000000..3ff7010
--- /dev/null
+++ b/src/views/EquipmentManager/Analysis/index.vue
@@ -0,0 +1,156 @@
+<!--
+ * @Date: 2020-12-15 15:36:52
+ * @LastEditors: guo
+ * @LastEditTime: 2021-03-04 10:29:37
+ * @FilePath: \basic-admin\src\views\EquipmentManager\Analysis\index.vue
+ * @Description:
+-->
+<template>
+  <div class="usermanager-container">
+    <div class="method-btn-area">
+      <el-input v-model="listQuery.keywords" placeholder="设备编码或名称" style="width: 200px;" clearable />
+      <el-button type="primary" @click="getList">{{ 'btn.search' | i18nFilter }}</el-button>
+    </div>
+    <base-table :table-config="tableProps" :table-data="list" :is-loading="listLoading" :page="listQuery.current" :limit="listQuery.size">
+      <method-btn slot="handleBtn" :method-list="tableBtn" @clickBtn="handleClick" />
+    </base-table>
+    <pagination :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.size" @pagination="getList" />
+    <edit-form :visible.sync="showEditDialog" :target-info="{id: curEditId, status: curStatus}" @done="getList" />
+  </div>
+</template>
+
+<script>
+// import dataDict from '@/filters/DataDict'
+// edit here
+const colorTable = {
+  '0': 'rgb(155,187,89)',
+  '1': 'rgb(255,255,0)',
+  '2': 'rgb(192,80,77)',
+  '3': 'rgb(247,150,70)',
+  '4': 'rgb(79,129,189)',
+  '5': 'rgb(0,0,0)'
+}
+const tableBtn = [{
+  type: 'edit',
+  btnName: 'btn.edit'
+}]
+const tableProps = [{
+  prop: 'code',
+  label: '设备编号',
+  align: 'center'
+}, {
+  prop: 'name',
+  label: '设备名称',
+  align: 'center'
+}, {
+  prop: 'status',
+  label: '设备类型',
+  align: 'center'
+}, {
+  prop: 'color',
+  label: '车间',
+  align: 'center'
+}, {
+  prop: 'color',
+  label: '工作时间累计',
+  align: 'center'
+}, {
+  prop: 'color',
+  label: '维修次数',
+  align: 'center'
+}, {
+  prop: 'color',
+  label: '保养次数',
+  align: 'center'
+}, {
+  prop: 'remark',
+  label: '备注',
+  align: 'center'
+}]
+import EditForm from './EditForm'
+import BaseTable from '@/components/BaseTable'
+// edit here
+import { getStatusSettingList } from '@/api/equipment'
+
+import Pagination from '@/components/Pagination'
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+export default {
+  name: 'OrgManager',
+  components: {
+    Pagination,
+    BaseTable,
+    MethodBtn,
+    EditForm
+  },
+  props: {},
+  data() {
+    return {
+      tableBtn,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      showDialog: false,
+      curEditId: null,
+      curStatus: null,
+      showEditDialog: false,
+      listQuery: {
+        current: 1,
+        size: 10,
+        keywords: ''
+      }
+    }
+  },
+  created() {
+    this.getList()
+    // this.listLoading = false
+  },
+  mounted() {},
+  methods: {
+    handleClick(raw) {
+      console.log(raw)
+      switch (raw.type) {
+        case 'edit':
+          this.showEditDialog = true
+          this.curEditId = raw.data.id
+          this.curStatus = raw.data.status
+          break
+      }
+    },
+    async getList() {
+      this.listLoading = true
+      // edit here
+      const res = await getStatusSettingList(this.listQuery)
+      if (res.code === 0) {
+        this.list = res.data.records ? res.data.records.map(item => {
+          return {
+            ...item,
+            color: colorTable[item.status]
+          }
+        }) : []
+        this.total = res.data.total
+        this.listLoading = false
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.usermanager-container {
+  padding: 20px;
+  .method-btn-area {
+    padding: 15px 30px;
+    margin: 10px 0 20px 0;
+    border: 1px solid #dfe6ec;
+  }
+}
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/EquipmentManager/BOMManager/AddForm.vue b/src/views/EquipmentManager/BOMManager/AddForm.vue
new file mode 100644
index 0000000..d6f3b8e
--- /dev/null
+++ b/src/views/EquipmentManager/BOMManager/AddForm.vue
@@ -0,0 +1,144 @@
+<!--
+ * @Date: 2021-01-12 09:37:27
+ * @LastEditors: guo
+ * @LastEditTime: 2021-03-22 15:31:49
+ * @FilePath: \basic-admin\src\views\EquipmentManager\BOMManager\AddForm.vue
+ * @Description: 物料BOM添加弹窗页面
+-->
+<template>
+  <div>
+    <el-dialog v-bind="$attrs" :title="$t('module.equipmentManager.bom.addDialogTitle')" v-on="$listeners" @open="onOpen" @close="onClose">
+      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="220px">
+        <el-form-item :label="$t('module.equipmentManager.bom.equipmentName')" prop="equipmentId">
+          <el-select v-model="formData.equipmentId" :placeholder="$t('module.equipmentManager.bom.placeholderequipmentName')" clearable :style="{width: '100%'}">
+            <el-option
+              v-for="(item, index) in dict.device"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.bom.name')" prop="code">
+          <el-select v-model="formData.code" :placeholder="$t('module.equipmentManager.bom.placeholdername')" clearable :style="{width: '100%'}">
+            <el-option
+              v-for="(item, index) in dict.bom"
+              :key="index"
+              :label="item.name"
+              :value="item.code"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.bom.enabled')" prop="enabled" required>
+          <el-switch v-model="formData.enabled" :active-value="1" :inactive-value="0" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.bom.remark')" prop="remark">
+          <el-input v-model="formData.remark" :placeholder="$t('module.equipmentManager.bom.placeholderremark')" clearable :style="{width: '100%'}" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="close">{{ 'btn.cancel' | i18nFilter }}</el-button>
+        <el-button type="primary" @click="handelConfirm">{{ 'btn.confirm' | i18nFilter }}</el-button>
+        <!--  :loading="waiting" -->
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { addBOM } from '@/api/equipment/bom'
+import { getDictDevice, getDictBom } from '@/api/dict'
+export default {
+  components: {},
+  inheritAttrs: false,
+  props: [],
+  data() {
+    return {
+      waiting: false,
+      formData: {
+        equipmentId: undefined,
+        code: undefined,
+        name: undefined,
+        enabled: 1,
+        remark: undefined
+      },
+      rules: {
+        equipmentId: [{
+          required: true,
+          message: '请选择设备名称',
+          trigger: 'change'
+        }],
+        code: [{
+          required: true,
+          message: '请选择物料',
+          trigger: 'blur'
+        }],
+        name: [{
+          required: true,
+          message: '请输入物料BOM名称',
+          trigger: 'blur'
+        }],
+        remark: []
+      },
+      dict: {
+        device: [],
+        bom: []
+      }
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {
+    this.getDict()
+  },
+  methods: {
+    onOpen() {},
+    onClose() {
+      this.$refs['elForm'].resetFields()
+    },
+    close() {
+      this.$emit('update:visible', false)
+    },
+    handelConfirm() {
+      // this.waiting = true
+      this.$refs['elForm'].validate(async valid => {
+        if (!valid) {
+          // this.waiting = false
+          return
+        }
+        this.dict.bom.map(item => {
+          if (item.code === this.formData.code) {
+            this.formData.name = item.name
+          }
+        })
+        const result = await addBOM(this.formData)
+        // this.waiting = false
+        console.log(1)
+        if (result.code === 0) {
+          this.$message({
+            type: 'success',
+            message: '添加成功！'
+          })
+          this.$emit('done')
+          this.close()
+        }
+      })
+    },
+    async getDict() {
+      const result = await getDictDevice({
+        current: 1,
+        size: 999
+      })
+      this.dict.device = result
+      const res = await getDictBom({
+        current: 1,
+        size: 999
+      })
+      this.dict.bom = res
+    }
+  }
+}
+
+</script>
+<style>
+</style>
diff --git a/src/views/EquipmentManager/BOMManager/EditForm.vue b/src/views/EquipmentManager/BOMManager/EditForm.vue
new file mode 100644
index 0000000..96015e9
--- /dev/null
+++ b/src/views/EquipmentManager/BOMManager/EditForm.vue
@@ -0,0 +1,155 @@
+<!--
+ * @Date: 2021-01-12 09:37:27
+ * @LastEditors: guo
+ * @LastEditTime: 2021-03-22 15:32:19
+ * @FilePath: \basic-admin\src\views\EquipmentManager\BOMManager\EditForm.vue
+ * @Description: 物料BOM编辑弹窗页面
+-->
+<template>
+  <div>
+    <el-dialog v-bind="$attrs" :title="$t('module.equipmentManager.bom.editDialogTitle')" v-on="$listeners" @open="onOpen" @close="onClose">
+      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="220px">
+        <el-form-item :label="$t('module.equipmentManager.bom.equipmentName')" prop="equipmentId">
+          <el-select v-model="formData.equipmentId" :placeholder="$t('module.equipmentManager.bom.placeholderequipmentName')" clearable :style="{width: '100%'}">
+            <el-option
+              v-for="(item, index) in dict.device"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.bom.name')" prop="code">
+          <el-select v-model="formData.code" :placeholder="$t('module.equipmentManager.bom.placeholdername')" clearable :style="{width: '100%'}">
+            <el-option
+              v-for="(item, index) in dict.bom"
+              :key="index"
+              :label="item.name"
+              :value="item.code"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.bom.enabled')" prop="enabled" required>
+          <el-switch v-model="formData.enabled" :active-value="1" :inactive-value="0" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.bom.remark')" prop="remark">
+          <el-input v-model="formData.remark" :placeholder="$t('module.equipmentManager.bom.placeholderremark')" clearable :style="{width: '100%'}" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="close">{{ 'btn.cancel' | i18nFilter }}</el-button>
+        <el-button type="primary" @click="handelConfirm">{{ 'btn.confirm' | i18nFilter }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { getBOMInfo, editBOM } from '@/api/equipment/bom'
+import { getDictDevice, getDictBom } from '@/api/dict'
+export default {
+  components: {},
+  inheritAttrs: false,
+  props: {
+    targetInfo: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      formData: {
+        equipmentId: undefined,
+        code: undefined,
+        name: undefined,
+        enabled: 1,
+        remark: undefined
+      },
+      rules: {
+        equipmentId: [{
+          required: true,
+          message: '请选择设备名称',
+          trigger: 'change'
+        }],
+        code: [{
+          required: false,
+          message: '请输入物料BOM编码',
+          trigger: 'blur'
+        }],
+        name: [{
+          required: true,
+          message: '请输入物料BOM名称',
+          trigger: 'blur'
+        }],
+        remark: []
+      },
+      dict: {
+        device: [],
+        bom: []
+      }
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {
+    this.getDict()
+  },
+  methods: {
+    onOpen() {
+      this.getDetail()
+    },
+    onClose() {
+      this.$refs['elForm'].resetFields()
+    },
+    close() {
+      this.$emit('update:visible', false)
+    },
+    handelConfirm() {
+      this.$refs['elForm'].validate(async valid => {
+        if (!valid) return
+        this.dict.bom.map(item => {
+          if (item.code === this.formData.code) {
+            this.formData.name = item.name
+          }
+        })
+        const result = await editBOM({
+          ...this.formData,
+          id: this.targetInfo?.id
+        })
+        if (result.code === 0) {
+          this.$message({
+            type: 'success',
+            message: '修改成功！'
+          })
+          this.$emit('done')
+          this.close()
+        }
+      })
+    },
+    async getDetail() {
+      const result = await getBOMInfo({
+        id: this.targetInfo?.id
+      })
+      if (result.code === 0) {
+        this.formData = result.data
+        // console.log(result)
+      }
+    },
+    async getDict() {
+      const result = await getDictDevice({
+        current: 1,
+        size: 999
+      })
+      this.dict.device = result
+      const res = await getDictBom({
+        current: 1,
+        size: 999
+      })
+      this.dict.bom = res
+    }
+  }
+}
+
+</script>
+<style>
+</style>
diff --git a/src/views/EquipmentManager/BOMManager/index.vue b/src/views/EquipmentManager/BOMManager/index.vue
new file mode 100644
index 0000000..1ee9223
--- /dev/null
+++ b/src/views/EquipmentManager/BOMManager/index.vue
@@ -0,0 +1,172 @@
+<!--
+ * @Date: 2020-12-15 15:36:52
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-04-21 14:00:18
+ * @FilePath: \basic-admin\src\views\EquipmentManager\BOMManager\index.vue
+ * @Description:
+-->
+<template>
+  <div class="usermanager-container">
+    <div class="method-btn-area">
+      <el-input v-model="listQuery.keywords" :placeholder="$t('module.equipmentManager.bom.searchPlaceholder')" style="width: 200px;" clearable />
+      <el-button @click="getList">{{ 'btn.search' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="showDialog = true">{{ 'btn.add' | i18nFilter }}</el-button>
+    </div>
+    <base-table :table-config="tableProps" :table-data="list" :is-loading="listLoading" :page="listQuery.current" :limit="listQuery.size">
+      <method-btn slot="handleBtn" :method-list="tableBtn" @clickBtn="handleClick" />
+    </base-table>
+    <pagination :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.size" @pagination="getList" />
+    <add-form :visible.sync="showDialog" @done="getList" />
+    <edit-form :visible.sync="showEditDialog" :target-info="{id: curEditId}" @done="getList" />
+  </div>
+</template>
+
+<script>
+import dataDict from '@/filters/DataDict'
+// edit here
+const tableBtn = [{
+  type: 'edit',
+  btnName: 'btn.edit'
+}, {
+  type: 'delete',
+  btnName: 'btn.delete'
+}, {
+  type: 'detail',
+  btnName: 'btn.detail'
+}]
+const tableProps = [{
+  prop: 'code',
+  label: i18n.t('module.equipmentManager.bom.code'),
+  align: 'center',
+  sortable: true,
+  sortMethod: (a, b) => {
+    // 返回-1, 1或者0
+  }
+}, {
+  prop: 'name',
+  label: i18n.t('module.equipmentManager.bom.name'),
+  align: 'center',
+  sortable: true
+}, {
+  prop: 'equipmentCode',
+  label: i18n.t('module.equipmentManager.bom.equipmentCode'),
+  align: 'center'
+}, {
+  prop: 'equipmentName',
+  label: i18n.t('module.equipmentManager.bom.equipmentName'),
+  align: 'center'
+}, {
+  prop: 'enabled',
+  label: i18n.t('module.equipmentManager.bom.enabled'),
+  align: 'center',
+  filter: dataDict('enableState')
+}, {
+  prop: 'remark',
+  label: i18n.t('module.equipmentManager.bom.remark'),
+  align: 'center'
+}]
+import AddForm from './AddForm'
+import EditForm from './EditForm'
+import BaseTable from '@/components/BaseTable'
+// edit here
+import { getBOMList, delBOM } from '@/api/equipment/bom'
+// , getMaterialList
+import { objFilter } from '@/utils'
+import Pagination from '@/components/Pagination'
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import i18n from '@/lang'
+export default {
+  name: 'OrgManager',
+  components: { Pagination, BaseTable, MethodBtn, AddForm, EditForm },
+  props: {},
+  data() {
+    return {
+      tableBtn,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      showDialog: false,
+      curEditId: null,
+      showEditDialog: false,
+      listQuery: {
+        current: 1,
+        size: 10,
+        keywords: ''
+      }
+    }
+  },
+  created() {
+    this.getList()
+    // this.listLoading = false
+  },
+  mounted() {},
+  methods: {
+    handleClick(raw) {
+      console.log(raw)
+      switch (raw.type) {
+        case 'delete':
+          this.$confirm(i18n.t('deleteMsgBox.content'), i18n.t('deleteMsgBox.hint'), {
+            confirmButtonText: i18n.t('btn.confirm'),
+            cancelButtonText: i18n.t('btn.cancel'),
+            type: 'warning'
+          }).then(async() => {
+            // 走接口
+            const result = await delBOM({
+              id: raw.data.id
+            })
+            if (result.code === 0) {
+              this.$message({
+                type: 'success',
+                message: i18n.t('deleteMsgBox.doneMsg')
+              })
+              this.getList()
+            }
+          })
+          break
+        case 'edit':
+          this.showEditDialog = true
+          this.curEditId = raw.data.id
+          break
+        case 'detail':
+          this.$router.push({
+            name: 'DeviceBOMManage',
+            query: {
+              id: raw.data.id
+            }
+          })
+          break
+      }
+    },
+    async getList() {
+      this.listLoading = true
+      // edit here
+      const res = await getBOMList(objFilter(this.listQuery))
+      if (res.code === 0) {
+        this.list = res.data.records
+        this.total = res.data.total
+        this.listLoading = false
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.usermanager-container {
+  padding: 20px;
+  .method-btn-area {
+    padding: 15px 30px;
+    margin: 10px 0 20px 0;
+    border: 1px solid #dfe6ec;
+  }
+}
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/EquipmentManager/BOMManager/subpage/AddForm.vue b/src/views/EquipmentManager/BOMManager/subpage/AddForm.vue
new file mode 100644
index 0000000..23e2b6a
--- /dev/null
+++ b/src/views/EquipmentManager/BOMManager/subpage/AddForm.vue
@@ -0,0 +1,152 @@
+<!--
+ * @Date: 2021-01-09 16:25:11
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-05-19 15:03:21
+ * @FilePath: \basic-admin\src\views\EquipmentManager\BOMManager\subpage\AddForm.vue
+ * @Description: 子页面
+-->
+<template>
+  <div>
+    <el-dialog v-bind="$attrs" :title="$t('module.equipmentManager.bomdetail.addDialogTitle')" v-on="$listeners" @open="onOpen" @close="onClose">
+      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="120px">
+        <el-form-item :label="$t('module.equipmentManager.bomdetail.materialName')" prop="materialId">
+          <el-select v-model="formData.materialId" :placeholder="$t('module.equipmentManager.bomdetail.placeholdermaterialName')" clearable :style="{width: '100%'}">
+            <el-option
+              v-for="(item, index) in dict.material"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.bomdetail.unit')" prop="unit">
+          <el-select v-model="formData.unit" :placeholder="$t('module.equipmentManager.bomdetail.placeholderunit')" clearable :style="{width: '100%'}">
+            <el-option
+              v-for="(item, index) in dict.unit"
+              :key="index"
+              :label="item.dataName"
+              :value="item.dataName"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.bomdetail.quantity')" prop="quantity">
+          <el-input v-model="formData.quantity" type="number" :placeholder="$t('module.equipmentManager.bomdetail.placeholderquantity')" :min="0" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.bomdetail.remark')" prop="remark">
+          <el-input v-model="formData.remark" :placeholder="$t('module.equipmentManager.bomdetail.placeholderremark')" clearable :style="{width: '100%'}" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="close">{{ 'btn.cancel' | i18nFilter }}</el-button>
+        <el-button type="primary" :loading="waiting" @click="handelConfirm">{{ 'btn.confirm' | i18nFilter }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { addDeviceBOM } from '@/api/equipment/bom'
+import { getDictMaterial } from '@/api/dict'
+import { dataDictionaryDataList } from '@/api/basicData/dataDictionary'
+import i18n from '@/lang'
+export default {
+  components: {},
+  inheritAttrs: false,
+  props: {
+    targetInfo: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      waiting: false,
+      formData: {
+        materialId: null,
+        unit: undefined,
+        quantity: undefined,
+        remark: undefined,
+        equipmentBomId: undefined
+      },
+      rules: {
+        materialId: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.bomdetail.placeholdermaterialName'),
+          trigger: 'change'
+        }],
+        unit: [{
+          required: false,
+          message: i18n.t('module.equipmentManager.bomdetail.placeholderunit'),
+          trigger: 'blur'
+        }],
+        quantity: [{
+          required: false,
+          trigger: 'blur'
+        }],
+        remark: [{
+          required: false,
+          message: i18n.t('module.equipmentManager.bomdetail.placeholderremark'),
+          trigger: 'blur'
+        }]
+      },
+      dict: {
+        material: [],
+        unit: []
+      }
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {
+    this.getDict()
+  },
+  mounted() {},
+  methods: {
+    onOpen() {
+      this.formData.equipmentBomId = this.targetInfo.id
+    },
+    onClose() {
+      this.$refs['elForm'].resetFields()
+    },
+    close() {
+      this.$emit('update:visible', false)
+    },
+    handelConfirm() {
+      this.waiting = true
+      this.$refs['elForm'].validate(async valid => {
+        if (!valid) {
+          this.waiting = false
+          return
+        }
+        const result = await addDeviceBOM(this.formData)
+        this.waiting = false
+        if (result.code === 0) {
+          this.$message({
+            type: 'success',
+            message: '添加成功！'
+          })
+          this.$emit('done')
+          this.close()
+        }
+      })
+    },
+    async getDict() {
+      const result = await getDictMaterial()
+      this.dict.material = result
+      const listQuery = {
+        current: 1,
+        size: 500
+      }
+      await dataDictionaryDataList(Object.assign(listQuery, {
+        dictTypeId: '1392033901169348609'
+      })).then(response => {
+        if (response.data.records) {
+          this.dict.unit = response.data.records
+        }
+      })
+    }
+  }
+}
+
+</script>
+<style>
+</style>
diff --git a/src/views/EquipmentManager/BOMManager/subpage/EditForm.vue b/src/views/EquipmentManager/BOMManager/subpage/EditForm.vue
new file mode 100644
index 0000000..1a29dca
--- /dev/null
+++ b/src/views/EquipmentManager/BOMManager/subpage/EditForm.vue
@@ -0,0 +1,159 @@
+<!--
+ * @Date: 2021-01-09 16:25:11
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-05-13 15:00:54
+ * @FilePath: \basic-admin\src\views\EquipmentManager\BOMManager\subpage\EditForm.vue
+ * @Description: 子页面
+-->
+<template>
+  <div>
+    <el-dialog v-bind="$attrs" :title="$t('module.equipmentManager.bomdetail.editDialogTitle')" v-on="$listeners" @open="onOpen" @close="onClose">
+      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="120px">
+        <el-form-item :label="$t('module.equipmentManager.bomdetail.materialName')" prop="materialId">
+          <el-select v-model="formData.materialId" :placeholder="$t('module.equipmentManager.bomdetail.placeholdermaterialName')" clearable :style="{width: '100%'}">
+            <el-option
+              v-for="(item, index) in dict.material"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.bomdetail.unit')" prop="unit">
+          <el-select v-model="formData.unit" :placeholder="$t('module.equipmentManager.bomdetail.placeholderunit')" clearable :style="{width: '100%'}">
+            <el-option
+              v-for="(item, index) in dict.unit"
+              :key="index"
+              :label="item.dataName"
+              :value="item.dataName"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.bomdetail.quantity')" prop="quantity">
+          <el-input v-model="formData.quantity" :placeholder="$t('module.equipmentManager.bomdetail.placeholderquantity')" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.bomdetail.remark')" prop="remark">
+          <el-input v-model="formData.remark" :placeholder="$t('module.equipmentManager.bomdetail.placeholderremark')" clearable :style="{width: '100%'}" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="close">{{ 'btn.cancel' | i18nFilter }}</el-button>
+        <el-button type="primary" @click="handelConfirm">{{ 'btn.confirm' | i18nFilter }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { editDeviceBOM, getDeviceBOMInfo } from '@/api/equipment/bom'
+import { dataDictionaryDataList } from '@/api/basicData/dataDictionary'
+import { getDictMaterial } from '@/api/dict'
+export default {
+  components: {},
+  inheritAttrs: false,
+  props: {
+    targetInfo: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      formData: {
+        materialId: undefined,
+        unit: undefined,
+        quantity: undefined,
+        remark: undefined,
+        id: undefined,
+        equipmentId: undefined
+      },
+      rules: {
+        materialId: [{
+          required: true,
+          message: '请输入物料名称',
+          trigger: 'change'
+        }],
+        unit: [{
+          required: false,
+          message: '请输入单位',
+          trigger: 'blur'
+        }],
+        quantity: [{
+          required: false,
+          trigger: 'blur'
+        }],
+        remark: [{
+          required: false,
+          message: '请输入备注',
+          trigger: 'blur'
+        }]
+      },
+      dict: {
+        unit: [],
+        material: []
+      }
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {
+  },
+  mounted() {
+    this.getDict()
+  },
+  methods: {
+    onOpen() {
+      this.formData
+      this.getInfo()
+    },
+    onClose() {
+      this.$refs['elForm'].resetFields()
+    },
+    close() {
+      this.$emit('update:visible', false)
+    },
+    handelConfirm() {
+      this.$refs['elForm'].validate(async valid => {
+        if (!valid) return
+        const result = await editDeviceBOM(this.formData)
+        if (result.code === 0) {
+          this.$message({
+            type: 'success',
+            message: '修改成功！'
+          })
+          this.$emit('done')
+          this.close()
+        }
+      })
+    },
+    async getInfo() {
+      const result = await getDeviceBOMInfo({
+        id: this.targetInfo?.id
+      })
+      if (result.code === 0) {
+        this.formData = result.data
+      }
+    },
+    async getDict() {
+      const result = await getDictMaterial()
+      this.dict.material = result
+      const listQuery = {
+        current: 1,
+        size: 500
+      }
+      await dataDictionaryDataList(Object.assign(listQuery, {
+        dictTypeId: '1392033901169348609'
+      })).then(response => {
+        if (response.data.records) {
+          this.dict.unit = response.data.records
+        }
+      })
+      // const result2 = await getDictUnit()
+      // this.dict.unit = result2.records
+      // console.log(this.dict.unit)
+    }
+  }
+}
+
+</script>
+<style>
+</style>
diff --git a/src/views/EquipmentManager/BOMManager/subpage/detail.vue b/src/views/EquipmentManager/BOMManager/subpage/detail.vue
new file mode 100644
index 0000000..6aac28f
--- /dev/null
+++ b/src/views/EquipmentManager/BOMManager/subpage/detail.vue
@@ -0,0 +1,232 @@
+<!--
+ * @Date: 2020-12-15 15:36:52
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-06 17:21:36
+ * @FilePath: \basic-admin\src\views\EquipmentManager\BOMManager\subpage\detail.vue
+ * @Description:
+-->
+<template>
+  <div class="bom-form-container">
+    <el-form ref="elForm" :model="formData" size="medium" label-width="150px">
+      <el-form-item :label="$t('module.equipmentManager.bom.equipmentName')" prop="equipmentName">
+        <el-input :value="equipmentName" :style="{width: '100%'}" :disabled="pagetype" />
+      </el-form-item>
+      <el-form-item :label="$t('module.equipmentManager.bom.code')" prop="code">
+        <el-input v-model="formData.code" :style="{width: '100%'}" :disabled="pagetype" />
+      </el-form-item>
+      <el-form-item :label="$t('module.equipmentManager.bom.name')" prop="name">
+        <el-input v-model="formData.name" :style="{width: '100%'}" :disabled="pagetype" />
+      </el-form-item>
+      <el-form-item :label="$t('module.equipmentManager.bom.enabled')" prop="enabled" required>
+        <el-switch v-model="formData.enabled" :disabled="pagetype" :active-value="1" :inactive-value="0" />
+      </el-form-item>
+      <el-form-item :label="$t('module.equipmentManager.bom.remark')" prop="remark">
+        <el-input v-model="formData.remark" :style="{width: '100%'}" :disabled="pagetype" />
+      </el-form-item>
+    </el-form>
+    <div class="sub-table-container">
+      <el-divider>{{ $t('module.equipmentManager.bomdetail.title') }}</el-divider>
+      <div class="method-btn-area">
+        <el-button type="primary" style="float: right;margin: 0 20px;" @click="showDialog = true">{{ 'btn.add' | i18nFilter }}</el-button>
+        <el-button type="primary" plain icon="el-icon-arrow-left" @click="turnBack">{{ 'btn.back' | i18nFilter }}</el-button>
+        <!-- <el-button style="float: right;" @click="resetForm">重置</el-button> -->
+      </div>
+      <base-table :table-config="tableProps" :table-data="list" :is-loading="listLoading" :page="listQuery.current" :limit="listQuery.size">
+        <method-btn slot="handleBtn" :method-list="tableBtn" @clickBtn="handleClick" />
+      </base-table>
+    </div>
+    <pagination :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.size" @pagination="getList" />
+    <add-form :visible.sync="showDialog" :target-info="{id: listQuery.id}" @done="getList" />
+    <edit-form :visible.sync="showEditDialog" :target-info="{id: curEditId, fatherId: listQuery.id}" @done="getList" />
+  </div>
+</template>
+
+<script>
+// import CheckDetail from '@/components/BaseTable/subcomponents/CheckDetail'
+// import dataDict from '@/filters/DataDict'
+// edit here
+const tableBtn = [{
+  type: 'edit',
+  btnName: 'btn.edit'
+}, {
+  type: 'delete',
+  btnName: 'btn.delete'
+}]
+const tableProps = [{
+  prop: 'materialCode',
+  label: i18n.t('module.equipmentManager.bomdetail.materialId'),
+  align: 'center'
+}, {
+  prop: 'materialName',
+  label: i18n.t('module.equipmentManager.bomdetail.materialName'),
+  align: 'center'
+}, {
+  prop: 'unit',
+  label: i18n.t('module.equipmentManager.bomdetail.unit'),
+  align: 'center'
+}, {
+  prop: 'quantity',
+  label: i18n.t('module.equipmentManager.bomdetail.quantity'),
+  align: 'center'
+}, {
+  prop: 'remark',
+  label: i18n.t('module.equipmentManager.bomdetail.remark'),
+  align: 'center'
+}]
+import AddForm from './AddForm'
+import EditForm from './EditForm'
+import BaseTable from '@/components/BaseTable'
+// edit here
+// import { objFilter } from '@/utils'
+import { getDeviceBOMList, delDeviceBOM, getBOMInfo } from '@/api/equipment/bom'
+import { getDictDevice } from '@/api/dict'
+import { dictChange, dictFilter } from '@/utils'
+import Pagination from '@/components/Pagination'
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import i18n from '@/lang'
+export default {
+  name: 'BOMForm',
+  components: { Pagination, BaseTable, MethodBtn, AddForm, EditForm },
+  props: {},
+  data() {
+    return {
+      tableBtn,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      showDialog: false,
+      curEditId: null,
+      showEditDialog: false,
+      listQuery: {
+        enabled: 1,
+        id: null,
+        current: 1,
+        size: 10,
+        keywords: ''
+      },
+      equipmentName: undefined,
+      formData: {
+        equipmentCode: undefined,
+        code: undefined,
+        name: undefined,
+        enabled: 1,
+        remark: undefined
+      },
+      dict: {
+        deviceTable: {}
+      }
+    }
+  },
+  computed: {
+    pagetype() {
+      return true
+      // return false
+    }
+  },
+  async created() {
+    console.log(this.$route.query)
+    this.listQuery.id = this.$route.query.id
+    this.listQuery.keywords = this.$route.query.id
+    await this.getDict()
+    await this.getDetail()
+    await this.getList()
+    // this.listLoading = false
+  },
+  mounted() {},
+  methods: {
+    handleClick(raw) {
+      console.log(raw)
+      switch (raw.type) {
+        case 'delete':
+          this.$confirm(i18n.t('deleteMsgBox.content'), i18n.t('deleteMsgBox.hint'), {
+            confirmButtonText: i18n.t('btn.confirm'),
+            cancelButtonText: i18n.t('btn.cancel'),
+            type: 'warning'
+          }).then(async() => {
+            // 走接口
+            const result = await delDeviceBOM({
+              id: raw.data.id
+            })
+            if (result.code === 0) {
+              this.$message({
+                type: 'success',
+                message: i18n.t('deleteMsgBox.doneMsg')
+              })
+              this.getList()
+            }
+          })
+          break
+        case 'edit':
+          this.showEditDialog = true
+          this.curEditId = raw.data.id
+          break
+      }
+    },
+    async getList() {
+      this.listLoading = true
+      // edit here
+      const res = await getDeviceBOMList(this.listQuery)
+      if (res.code === 0) {
+        this.list = res.data.records
+        this.total = res.data.total
+        this.listLoading = false
+      }
+    },
+    async getDetail() {
+      const result = await getBOMInfo({
+        id: this.listQuery.id
+      })
+      if (result.code === 0) {
+        this.formData = result.data
+        this.equipmentName = dictFilter(this.dict.deviceTable, { key: 'id', value: 'name' })(result.data.equipmentId)
+        // console.log(result)
+      }
+    },
+    submitForm() {
+      this.$refs['elForm'].validate(valid => {
+        if (!valid) return
+        // TODO 提交表单
+      })
+    },
+    resetForm() {
+      this.$refs['elForm'].resetFields()
+    },
+    saveForm() {},
+    async getDict() {
+      const result = await getDictDevice({
+        current: 1,
+        size: 999
+      })
+      this.dict.deviceTable = dictChange(result, { key: 'id', value: 'name' })
+    },
+    turnBack() {
+      this.$router.go(-1)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/styles/mixin.scss";
+.bom-form-container {
+  padding: 20px;
+  .method-btn-area {
+    padding: 15px 30px;
+    margin: 10px 0 20px 0;
+    border: 1px solid #dfe6ec;
+    @include clearfix;
+  }
+  .sub-table-container {
+    margin-top: 80px;
+  }
+}
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/EquipmentManager/DeviceMonitoring/AddForm.vue b/src/views/EquipmentManager/DeviceMonitoring/AddForm.vue
new file mode 100644
index 0000000..368708d
--- /dev/null
+++ b/src/views/EquipmentManager/DeviceMonitoring/AddForm.vue
@@ -0,0 +1,203 @@
+<template>
+  <div>
+    <el-dialog v-bind="$attrs" title="添加备品备件" v-on="$listeners" @open="onOpen" @close="onClose">
+      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
+        <el-form-item label="备件编码" prop="name">
+          <el-input v-model="formData.code" placeholder="请输入备件编码" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item label="备件名称" prop="name">
+          <el-input v-model="formData.name" placeholder="请输入备件名称" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item label="备件型号" prop="sparePartModel">
+          <el-input
+            v-model="formData.sparePartModel"
+            placeholder="请输入备件型号"
+            clearable
+            :style="{width: '100%'}"
+          />
+        </el-form-item>
+        <el-form-item label="外部编码" prop="externalCode">
+          <el-input
+            v-model="formData.externalCode"
+            placeholder="请输入备件型号"
+            clearable
+            :style="{width: '100%'}"
+          />
+        </el-form-item>
+        <el-form-item label="单位" prop="accessoryUnit">
+          <el-select v-model="formData.accessoryUnit" placeholder="请选择单位" clearable :style="{width: '100%'}">
+            <el-option
+              v-for="(item, index) in accessoryUnitOptions"
+              :key="index"
+              :label="item.label"
+              :value="item.value"
+              :disabled="item.disabled"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="批次号" prop="batchNumber">
+          <el-input v-model="formData.batchNumber" type="number" placeholder="请输入批次号" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item label="数量" prop="accessoryNumber">
+          <el-input v-model="formData.accessoryNumber" type="number" placeholder="请输入数量" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item label="进厂时间" prop="entryTime">
+          <el-date-picker
+            v-model="formData.entryTime"
+            format="yyyy-MM-dd"
+            :style="{width: '100%'}"
+            placeholder="请选择进厂时间"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item label="供应商" prop="supplierId">
+          <el-select v-model="formData.supplierId" placeholder="请选择供应商" clearable :style="{width: '100%'}">
+            <el-option
+              v-for="(item, index) in supplierIdOptions"
+              :key="index"
+              :label="item.label"
+              :value="item.value"
+              :disabled="item.disabled"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="接收人" prop="receiver">
+          <el-input v-model="formData.receiver" placeholder="请输入接收人" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="formData.remark" placeholder="请输入备注" clearable :style="{width: '100%'}" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="close">{{ 'btn.cancel' | i18nFilter }}</el-button>
+        <el-button type="primary" @click="handelConfirm">{{ 'btn.confirm' | i18nFilter }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { addSapre } from '@/api/equipment/spare'
+export default {
+  components: {},
+  inheritAttrs: false,
+  props: [],
+  data() {
+    return {
+      formData: {
+        code: undefined,
+        name: undefined,
+        sparePartModel: undefined,
+        accessoryUnit: undefined,
+        batchNumber: undefined,
+        accessoryNumber: undefined,
+        entryTime: null,
+        supplierId: undefined,
+        receiver: undefined,
+        remark: undefined,
+        externalCode: undefined
+      },
+      rules: {
+        code: [{
+          required: false,
+          message: '请输入备件编码',
+          trigger: 'blur'
+        }],
+        name: [{
+          required: true,
+          message: '请输入备件名称',
+          trigger: 'blur'
+        }],
+        sparePartModel: [{
+          required: true,
+          message: '请输入备件型号',
+          trigger: 'blur'
+        }],
+        accessoryUnit: [{
+          required: true,
+          message: '请选择单位',
+          trigger: 'change'
+        }],
+        externalCode: [{
+          required: true,
+          message: '请输入外部编码',
+          trigger: 'blur'
+        }],
+        batchNumber: [{
+          required: true,
+          message: '请输入批次号',
+          trigger: 'blur'
+        }],
+        accessoryNumber: [{
+          required: true,
+          message: '请输入数量',
+          trigger: 'blur'
+        }],
+        entryTime: [{
+          required: true,
+          message: '请选择进厂时间',
+          trigger: 'change'
+        }],
+        supplierId: [{
+          required: true,
+          message: '请选择供应商',
+          trigger: 'change'
+        }],
+        receiver: [{
+          required: true,
+          message: '请输入接收人',
+          trigger: 'blur'
+        }],
+        remark: [{
+          required: false,
+          message: '请输入备注',
+          trigger: 'blur'
+        }]
+      },
+      accessoryUnitOptions: [{
+        'label': '选项一',
+        'value': 1
+      }, {
+        'label': '选项二',
+        'value': 2
+      }],
+      supplierIdOptions: [{
+        'label': '选项一',
+        'value': 1
+      }, {
+        'label': '选项二',
+        'value': 2
+      }]
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {
+    onOpen() {},
+    onClose() {
+      this.$refs['elForm'].resetFields()
+    },
+    close() {
+      this.$emit('update:visible', false)
+    },
+    handelConfirm() {
+      this.$refs['elForm'].validate(async valid => {
+        if (!valid) return
+        const result = await addSapre(this.formData)
+        if (result.code === 0) {
+          this.$message({
+            type: 'success',
+            message: '添加成功！'
+          })
+          this.$emit('done')
+          this.close()
+        }
+      })
+    }
+  }
+}
+
+</script>
+<style>
+</style>
diff --git a/src/views/EquipmentManager/DeviceMonitoring/EditForm.vue b/src/views/EquipmentManager/DeviceMonitoring/EditForm.vue
new file mode 100644
index 0000000..8347deb
--- /dev/null
+++ b/src/views/EquipmentManager/DeviceMonitoring/EditForm.vue
@@ -0,0 +1,222 @@
+<template>
+  <div>
+    <el-dialog v-bind="$attrs" title="编辑备品备件" v-on="$listeners" @open="onOpen" @close="onClose">
+      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
+        <el-form-item label="备件编码" prop="name">
+          <el-input v-model="formData.code" placeholder="请输入备件编码" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item label="备件名称" prop="name">
+          <el-input v-model="formData.name" placeholder="请输入备件名称" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item label="备件型号" prop="sparePartModel">
+          <el-input
+            v-model="formData.sparePartModel"
+            placeholder="请输入备件型号"
+            clearable
+            :style="{width: '100%'}"
+          />
+        </el-form-item>
+        <el-form-item label="外部编码" prop="externalCode">
+          <el-input
+            v-model="formData.externalCode"
+            placeholder="请输入备件型号"
+            clearable
+            :style="{width: '100%'}"
+          />
+        </el-form-item>
+        <el-form-item label="单位" prop="accessoryUnit">
+          <el-select v-model="formData.accessoryUnit" placeholder="请选择单位" clearable :style="{width: '100%'}">
+            <el-option
+              v-for="(item, index) in accessoryUnitOptions"
+              :key="index"
+              :label="item.label"
+              :value="item.value"
+              :disabled="item.disabled"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="批次号" prop="batchNumber">
+          <el-input v-model="formData.batchNumber" type="number" placeholder="请输入批次号" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item label="数量" prop="accessoryNumber">
+          <el-input v-model="formData.accessoryNumber" type="number" placeholder="请输入数量" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item label="进厂时间" prop="entryTime">
+          <el-date-picker
+            v-model="formData.entryTime"
+            format="yyyy-MM-dd"
+            :style="{width: '100%'}"
+            placeholder="请选择进厂时间"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item label="供应商" prop="supplierId">
+          <el-select v-model="formData.supplierId" placeholder="请选择供应商" clearable :style="{width: '100%'}">
+            <el-option
+              v-for="(item, index) in supplierIdOptions"
+              :key="index"
+              :label="item.label"
+              :value="item.value"
+              :disabled="item.disabled"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="接收人" prop="receiver">
+          <el-input v-model="formData.receiver" placeholder="请输入接收人" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="formData.remark" placeholder="请输入备注" clearable :style="{width: '100%'}" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="close">{{ 'btn.cancel' | i18nFilter }}</el-button>
+        <el-button type="primary" @click="handelConfirm">{{ 'btn.confirm' | i18nFilter }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { getSpareInfo, editSpare } from '@/api/equipment/spare'
+export default {
+  components: {},
+  inheritAttrs: false,
+  props: {
+    targetInfo: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      formData: {
+        code: undefined,
+        name: undefined,
+        sparePartModel: undefined,
+        accessoryUnit: undefined,
+        batchNumber: undefined,
+        accessoryNumber: undefined,
+        entryTime: null,
+        supplierId: undefined,
+        receiver: undefined,
+        remark: undefined,
+        externalCode: undefined
+      },
+      rules: {
+        code: [{
+          required: true,
+          message: '请输入备件编码',
+          trigger: 'blur'
+        }],
+        externalCode: [{
+          required: true,
+          message: '请输入外部编码',
+          trigger: 'blur'
+        }],
+        name: [{
+          required: true,
+          message: '请输入备件名称',
+          trigger: 'blur'
+        }],
+        sparePartModel: [{
+          required: true,
+          message: '请输入备件型号',
+          trigger: 'blur'
+        }],
+        accessoryUnit: [{
+          required: true,
+          message: '请选择单位',
+          trigger: 'change'
+        }],
+        batchNumber: [{
+          required: true,
+          message: '请输入批次号',
+          trigger: 'blur'
+        }],
+        accessoryNumber: [{
+          required: true,
+          message: '请输入数量',
+          trigger: 'blur'
+        }],
+        entryTime: [{
+          required: true,
+          message: '请选择进厂时间',
+          trigger: 'change'
+        }],
+        supplierId: [{
+          required: true,
+          message: '请选择供应商',
+          trigger: 'change'
+        }],
+        receiver: [{
+          required: true,
+          message: '请输入接收人',
+          trigger: 'blur'
+        }],
+        remark: [{
+          required: false,
+          message: '请输入备注',
+          trigger: 'blur'
+        }]
+      },
+      accessoryUnitOptions: [{
+        'label': '选项一',
+        'value': 1
+      }, {
+        'label': '选项二',
+        'value': 2
+      }],
+      supplierIdOptions: [{
+        'label': '选项一',
+        'value': 1
+      }, {
+        'label': '选项二',
+        'value': 2
+      }]
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {
+    onOpen() {
+      this.getDetail()
+    },
+    onClose() {
+      this.$refs['elForm'].resetFields()
+    },
+    close() {
+      this.$emit('update:visible', false)
+    },
+    handelConfirm() {
+      this.$refs['elForm'].validate(async valid => {
+        if (!valid) return
+        const result = await editSpare({
+          ...this.formData,
+          id: this.targetInfo?.id
+        })
+        if (result.code === 0) {
+          this.$message({
+            type: 'success',
+            message: '修改成功！'
+          })
+          this.$emit('done')
+          this.close()
+        }
+      })
+    },
+    async getDetail() {
+      const result = await getSpareInfo({
+        id: this.targetInfo?.id
+      })
+      if (result.code === 0) {
+        this.formData = result.data
+        // console.log(result)
+      }
+    }
+  }
+}
+
+</script>
+<style>
+</style>
diff --git a/src/views/EquipmentManager/DeviceMonitoring/index.vue b/src/views/EquipmentManager/DeviceMonitoring/index.vue
new file mode 100644
index 0000000..9db849f
--- /dev/null
+++ b/src/views/EquipmentManager/DeviceMonitoring/index.vue
@@ -0,0 +1,167 @@
+<!--
+ * @Date: 2020-12-15 15:36:52
+ * @LastEditors: guo
+ * @LastEditTime: 2021-03-20 17:51:55
+ * @FilePath: \basic-admin\src\views\EquipmentManager\DeviceMonitoring\index.vue
+ * @Description:
+-->
+<template>
+  <div class="usermanager-container">
+    <div class="method-btn-area">
+      <el-input v-model="listQuery.keywords" :placeholder="$t('module.equipmentManager.monitoring.searchPlaceholder')" style="width: 200px;" clearable />
+      <el-button @click="getList">{{ 'btn.search' | i18nFilter }}</el-button>
+      <!-- <el-button type="primary" @click="showDialog = true">{{ 'btn.add' | i18nFilter }}</el-button> -->
+    </div>
+    <base-table :table-config="tableProps" :table-data="list" :is-loading="listLoading" :page="listQuery.current" :limit="listQuery.size">
+      <method-btn slot="handleBtn" :method-list="tableBtn" @clickBtn="handleClick" />
+    </base-table>
+    <pagination :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.size" @pagination="getList" />
+    <add-form :visible.sync="showDialog" @done="getList" />
+    <edit-form :visible.sync="showEditDialog" :target-info="{id: curEditId}" @done="getList" />
+  </div>
+</template>
+
+<script>
+// import dataDict from '@/filters/DataDict'
+// edit here
+import { timeFormatter } from '@/filters'
+const statusTableFilter = value => {
+  const table = {
+    '0': 'productive',
+    '1': 'standby',
+    '2': 'unscheduled downtime',
+    '3': 'scheduled downtime',
+    '4': 'engineering',
+    '5': 'non-scheduled'
+  }
+  return table[value] ? table[value] : value
+}
+const tableBtn = [{
+  type: 'detail',
+  btnName: 'btn.detail'
+}]
+const tableProps = [{
+  prop: 'code',
+  label: i18n.t('module.equipmentManager.monitoring.code'),
+  align: 'center'
+}, {
+  prop: 'name',
+  label: i18n.t('module.equipmentManager.monitoring.name'),
+  align: 'center'
+}, {
+  prop: 'status',
+  label: i18n.t('module.equipmentManager.monitoring.status'),
+  align: 'center',
+  filter: statusTableFilter
+}, {
+  prop: 'startTime',
+  label: i18n.t('module.equipmentManager.monitoring.startTime'),
+  align: 'center',
+  filter: timeFormatter
+  // filter: dataDict('enableState')
+}, {
+  prop: 'totalCount',
+  label: i18n.t('module.equipmentManager.monitoring.totalCount'),
+  align: 'center'
+}, {
+  prop: 'repairTime',
+  label: i18n.t('module.equipmentManager.monitoring.repairTime'),
+  align: 'center',
+  filter: timeFormatter
+}]
+import AddForm from './AddForm'
+import EditForm from './EditForm'
+import BaseTable from '@/components/BaseTable'
+// edit here
+import { getDeviceMonitoringList } from '@/api/equipment/monitoring'
+import { getDictSupplier } from '@/api/dict/index'
+import { dictChange, dictFilter } from '@/utils'
+import Pagination from '@/components/Pagination'
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import i18n from '@/lang'
+export default {
+  name: 'OrgManager',
+  components: { Pagination, BaseTable, MethodBtn, AddForm, EditForm },
+  props: {},
+  data() {
+    return {
+      tableBtn,
+      tableProps: [],
+      list: [],
+      total: 0,
+      listLoading: true,
+      showDialog: false,
+      curEditId: null,
+      showEditDialog: false,
+      listQuery: {
+        current: 1,
+        size: 10,
+        keywords: ''
+      },
+      dict: {
+        supplier: []
+      }
+    }
+  },
+  async created() {
+    await this.getDict()
+    await this.preprocess()
+    await this.getList()
+    // this.listLoading = false
+  },
+  mounted() {},
+  methods: {
+    handleClick(raw) {
+      console.log(raw)
+      switch (raw.type) {
+        case 'detail':
+          // this.showEditDialog = true
+          this.curEditId = raw.data.id
+          break
+      }
+    },
+    async getList() {
+      this.listLoading = true
+      // edit here
+      const res = await getDeviceMonitoringList(this.listQuery)
+      if (res.code === 0) {
+        this.list = res.data
+        this.total = res.data.total
+        this.listLoading = false
+      }
+    },
+    async getDict() {
+      const result = await getDictSupplier()
+      this.dict.supplier = result.data
+    },
+    async preprocess() {
+      this.tableProps = tableProps.map(item => {
+        if (this.dict[item.prop]) {
+          console.log(dictChange(this.dict[item.prop], { key: 'id', value: 'name' }))
+          item.filter = dictFilter(dictChange(this.dict[item.prop], { key: 'id', value: 'name' }))
+        }
+        return item
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.usermanager-container {
+  padding: 20px;
+  .method-btn-area {
+    padding: 15px 30px;
+    margin: 10px 0 20px 0;
+    border: 1px solid #dfe6ec;
+  }
+}
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/EquipmentManager/MaintainLog/AddLog.vue b/src/views/EquipmentManager/MaintainLog/AddLog.vue
new file mode 100644
index 0000000..47e1324
--- /dev/null
+++ b/src/views/EquipmentManager/MaintainLog/AddLog.vue
@@ -0,0 +1,358 @@
+<template>
+  <div class="form-container">
+    <div class="method-btn-area">
+      <el-button type="primary" plain icon="el-icon-arrow-left" @click="turnBack">{{ 'btn.back' | i18nFilter }}</el-button>
+    </div>
+    <el-row :gutter="15">
+      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="180px">
+        <el-col :span="24">
+          <el-form-item :label="$t('module.equipmentManager.maintainlog.equipmentId')" prop="equipmentId">
+            <el-select
+              v-model="formData.equipmentId"
+              :placeholder="$t('module.equipmentManager.maintainlog.placeholderequipmentId')"
+              clearable
+              :style="{width: '100%'}"
+            >
+              <el-option
+                v-for="(item, index) in dict.device"
+                :key="index"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item :label="$t('module.equipmentManager.maintainlog.maintenanceOrderNumber')" prop="logMaintenanceOrderNumber">
+            <el-input v-model="formData.logMaintenanceOrderNumber" :placeholder="$t('module.equipmentManager.maintainlog.placeholdermaintenanceOrderNumber')" clearable :style="{width: '100%'}" />
+          </el-form-item>
+        </el-col>
+        <!-- <el-col :span="24">
+          <el-form-item :label="$t('module.equipmentManager.maintainlog.maintainNextTime')" prop="nextMaintenanceTime">
+            <el-date-picker
+              v-model="formData.nextMaintenanceTime"
+              type="datetime"
+              :style="{width: '100%'}"
+              :placeholder="$t('module.equipmentManager.maintainlog.placeholdermaintainNextTime')"
+              clearable
+            />
+          </el-form-item>
+        </el-col> -->
+        <el-col :span="12">
+          <el-form-item :label="$t('module.equipmentManager.maintainlog.maintainStartTime')" prop="actualStartTime">
+            <el-date-picker
+              v-model="formData.actualStartTime"
+              type="datetime"
+              :style="{width: '100%'}"
+              :placeholder="$t('module.equipmentManager.maintainlog.placeholdermaintainEndTime')"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('module.equipmentManager.maintainlog.maintainEndTime')" prop="actualEndTime">
+            <el-date-picker
+              v-model="formData.actualEndTime"
+              type="datetime"
+              :style="{width: '100%'}"
+              :placeholder="$t('module.equipmentManager.maintainlog.placeholdermaintainEndTime')"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item :label="$t('module.equipmentManager.maintainlog.maintainDuration')" prop="maintainDuration">
+            <el-input v-model="formData.maintainDuration" :placeholder="$t('module.equipmentManager.maintainlog.placeholdermaintainDuration')" clearable :style="{width: '100%'}" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item :label="$t('module.equipmentManager.maintainlog.maintainWorkerId')" prop="maintainWorkerId">
+            <el-select
+              v-model="formData.maintainWorkerId"
+              :placeholder="$t('module.equipmentManager.maintainlog.placeholdermaintainWorkerId')"
+              clearable
+              multiple
+              :style="{width: '100%'}"
+            >
+              <el-option
+                v-for="(item, index) in dict.worker"
+                :key="index"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item :label="$t('module.equipmentManager.maintainplan.status')" prop="status">
+            <el-select
+              v-model="formData.status"
+              :placeholder="$t('module.equipmentManager.maintainplan.placeholderstatus')"
+              clearable
+              :style="{width: '100%'}"
+            >
+              <el-option
+                :label="$t('module.equipmentManager.repair.maintenanceStatusNo')"
+                :value="0"
+              />
+              <el-option
+                :label="$t('module.equipmentManager.repair.maintenanceStatusYes')"
+                :value="1"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('module.equipmentManager.maintainplan.maintainType')" prop="maintainType">
+            <el-select
+              v-model="formData.maintainType"
+              :placeholder="$i18nForm(['placeholder.input', $t('module.equipmentManager.maintainlog.placeholdermaintainType')])"
+              celearable
+              :style="{width: '100%'}"
+            >
+              <el-option
+                v-for="(item, index) in dict.maintainType"
+                :key="index"
+                :label="item.dataName"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item :label="$t('module.equipmentManager.maintainlog.maintenanceDetail')" prop="maintenanceDes">
+            <el-input
+              v-model="formData.maintenanceDes"
+              type="textarea"
+              :placeholder="$t('module.equipmentManager.maintainlog.placeholdermaintenanceDetail')"
+              :autosize="{minRows: 4, maxRows: 4}"
+              :style="{width: '100%'}"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item :label="$t('module.equipmentManager.maintainlog.annex')" prop="annex">
+            <el-upload
+              ref="annex"
+              :file-list="annexfileList"
+              :action="annexAction"
+              :before-upload="annexBeforeUpload"
+              name="annex"
+            >
+              <el-button size="small" type="primary" icon="el-icon-upload">{{ 'btn.upload' | i18nFilter }}</el-button>
+            </el-upload>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item :label="$t('module.equipmentManager.maintainlog.remark')" prop="remark">
+            <el-input v-model="formData.remark" :placeholder="$t('module.equipmentManager.maintainlog.placeholderremark')" clearable :style="{width: '100%'}" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item size="large">
+            <el-button type="primary" @click="submitForm">{{ 'btn.submit' | i18nFilter }}</el-button>
+            <el-button @click="resetForm">{{ 'btn.reset' | i18nFilter }}</el-button>
+          </el-form-item>
+        </el-col>
+      </el-form>
+    </el-row>
+  </div>
+</template>
+<script>
+import { addMaintainLog, getMaintainPlan, getLogCode } from '@/api/equipment/maintain'
+import { getDictDevice, getDictWorker } from '@/api/dict'
+import i18n from '@/lang'
+import { timeIsBefore } from '@/utils'
+import { dataDictionaryDataList } from '@/api/basicData/dataDictionary'
+export default {
+  components: {},
+  props: [],
+  data() {
+    return {
+      formData: {
+        equipmentId: undefined,
+        logMaintenanceOrderNumber: undefined,
+        nextMaintenanceTime: null,
+        actualStartTime: null,
+        maintainWorkerId: undefined,
+        actualEndTime: undefined,
+        maintenanceDes: undefined,
+        annex: null,
+        remark: undefined,
+        status: undefined
+      },
+      rules: {
+        equipmentId: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.maintainlog.placeholderequipmentId'),
+          trigger: 'change'
+        }],
+        logMaintenanceOrderNumber: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.maintainlog.placeholdermaintenanceOrderNumber'),
+          trigger: 'change'
+        }],
+        maintainType: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.maintainlog.placeholdermaintainType'),
+          trigger: 'blur'
+        }],
+        nextMaintenanceTime: [{
+          required: false,
+          message: i18n.t('module.equipmentManager.maintainlog.placeholdermaintainNextTime'),
+          trigger: 'change'
+        }],
+        maintainDuration: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.maintainplan.placeholdermaintainDuration'),
+          trigger: 'blur'
+        }],
+        actualStartTime: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.maintainlog.placeholderactualStartTime'),
+          trigger: 'change'
+        }],
+        actualEndTime: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.maintainlog.placeholderactualEndTime'),
+          trigger: 'change'
+        }],
+        maintainWorkerId: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.maintainlog.placeholdermaintainWorkerId'),
+          trigger: 'change'
+        }],
+        maintenanceDes: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.maintainlog.placeholdermaintenanceDetail'),
+          trigger: 'blur'
+        }],
+        status: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.maintainplan.placeholderstatus'),
+          trigger: 'blur'
+        }],
+        remark: []
+      },
+      annexAction: 'https://jsonplaceholder.typicode.com/posts/',
+      annexfileList: [],
+      dict: {
+        device: [],
+        worker: [],
+        maintainType: []
+      }
+    }
+  },
+  computed: {
+    orderId() {
+      return this.$route.query.orderId
+    }
+  },
+  watch: {},
+  created() {},
+  mounted() {
+    this.formData.maintainPlanId = this.$route.query.orderId
+    this.getInfo()
+    this.getDict()
+  },
+  methods: {
+    submitForm() {
+      console.log(this.formData)
+      this.$refs['elForm'].validate(async valid => {
+        if (!valid) return
+        // TODO 提交表单
+        if (this.formData.actualStartTime && this.formData.actualEndTime && !timeIsBefore(this.formData.actualStartTime, this.formData.actualEndTime)) {
+          this.$message({
+            type: 'error',
+            message: '请确保时间前后顺序正确！'
+          })
+          return console.log('拦截')
+        }
+        this.formData.maintainWorkerId = this.formData.maintainWorkerId.join(',')
+        await addMaintainLog(this.formData).then(res => {
+          if (res.code === 0) {
+            this.$message({
+              type: 'success',
+              message: '添加成功！'
+            })
+            this.$router.go(-1)
+          }
+        }).catch(res => {
+          if (res.code !== 0) {
+            this.formData.maintainWorkerId = this.formData.maintainWorkerId.split(',')
+            console.log(this.formData.maintainWorkerId)
+          }
+        })
+      })
+    },
+    resetForm() {
+      this.$refs['elForm'].resetFields()
+    },
+    annexBeforeUpload(file) {
+      const isRightSize = file.size / 1024 / 1024 < 2
+      if (!isRightSize) {
+        this.$message.error('文件大小超过 2MB')
+      }
+      return isRightSize
+    },
+    async getDict() {
+      const result3 = await getLogCode()
+      if (result3.code === 0) {
+        this.formData.logMaintenanceOrderNumber = result3.data
+      }
+      const result = await getDictDevice({
+        current: 1,
+        size: 999
+      })
+      this.dict.device = result
+      const result2 = await getDictWorker()
+      this.dict.worker = result2
+      const listQuery = {
+        current: 1,
+        size: 500
+      }
+      await dataDictionaryDataList(Object.assign(listQuery, {
+        dictTypeId: '1393401964580093954'
+      })).then(response => {
+        if (response.data.records) {
+          this.dict.maintainType = response.data.records
+          console.log(this.dict.maintainType)
+        }
+      })
+    },
+    turnBack() {
+      this.$router.go(-1)
+    },
+    async getInfo() {
+      if (this.orderId) {
+        const result = await getMaintainPlan({
+          id: this.orderId,
+          current: 1,
+          size: 10
+        })
+        if (result.code === 0) {
+          console.log(result)
+          this.formData.equipmentId = result.data.records[0].equipmentId
+          this.formData.status = result.data.records[0].status
+          console.log(this.formData.equipmentId)
+        }
+      }
+    }
+  }
+}
+
+</script>
+<style lang="scss">
+.form-container {
+  padding: 30px;
+    .method-btn-area {
+    padding: 15px 30px;
+    margin: 10px 0 20px 0;
+    border: 1px solid #dfe6ec;
+  }
+}
+.el-upload__tip {
+  line-height: 1.2;
+}
+
+</style>
diff --git a/src/views/EquipmentManager/MaintainLog/EditLog.vue b/src/views/EquipmentManager/MaintainLog/EditLog.vue
new file mode 100644
index 0000000..c601ac5
--- /dev/null
+++ b/src/views/EquipmentManager/MaintainLog/EditLog.vue
@@ -0,0 +1,319 @@
+<template>
+  <div class="form-container">
+    <div class="method-btn-area">
+      <el-button type="primary" plain icon="el-icon-arrow-left" @click="turnBack">{{ 'btn.back' | i18nFilter }}</el-button>
+    </div>
+    <el-row :gutter="15">
+      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="180px">
+        <el-col :span="24">
+          <el-form-item :label="$t('module.equipmentManager.maintainlog.equipmentId')" prop="equipmentId">
+            <el-select
+              v-model="formData.equipmentId"
+              :placeholder="$t('module.equipmentManager.maintainlog.placeholderequipmentId')"
+              clearable
+              :style="{width: '100%'}"
+            >
+              <el-option
+                v-for="(item, index) in dict.device"
+                :key="index"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item :label="$t('module.equipmentManager.maintainlog.maintenanceOrderNumber')" prop="logMaintenanceOrderNumber">
+            <el-input v-model="formData.logMaintenanceOrderNumber" :placeholder="$t('module.equipmentManager.maintainlog.placeholdermaintenanceOrderNumber')" clearable :style="{width: '100%'}" />
+          </el-form-item>
+        </el-col>
+        <!-- <el-col :span="23">
+          <el-form-item label="是否结束保养" prop="field104" required>
+            <el-switch v-model="formData.field104" />
+          </el-form-item>
+        </el-col> -->
+        <!-- <el-col :span="24">
+          <el-form-item :label="$t('module.equipmentManager.maintainlog.maintainNextTime')" prop="nextMaintenanceTime">
+            <el-date-picker
+              v-model="formData.nextMaintenanceTime"
+              type="datetime"
+              :style="{width: '100%'}"
+              :placeholder="$t('module.equipmentManager.maintainlog.placeholdermaintainNextTime')"
+              clearable
+            />
+          </el-form-item>
+        </el-col> -->
+        <el-col :span="12">
+          <el-form-item :label="$t('module.equipmentManager.maintainlog.maintainStartTime')" prop="actualStartTime">
+            <el-date-picker
+              v-model="formData.actualStartTime"
+              type="datetime"
+              :style="{width: '100%'}"
+              :placeholder="$t('module.equipmentManager.maintainlog.placeholdermaintainEndTime')"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('module.equipmentManager.maintainlog.maintainEndTime')" prop="actualEndTime">
+            <el-date-picker
+              v-model="formData.actualEndTime"
+              type="datetime"
+              :style="{width: '100%'}"
+              :placeholder="$t('module.equipmentManager.maintainlog.placeholdermaintainEndTime')"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item :label="$t('module.equipmentManager.maintainlog.maintainWorkerId')" prop="maintainWorkerId">
+            <el-select
+              v-model="formData.maintainWorkerId"
+              :placeholder="$t('module.equipmentManager.maintainlog.placeholdermaintainWorkerId')"
+              clearable
+              multiple
+              :style="{width: '100%'}"
+            >
+              <el-option
+                v-for="(item, index) in dict.worker"
+                :key="index"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item :label="$t('module.equipmentManager.maintainlog.maintainDuration')" prop="maintainDuration">
+            <el-input v-model="formData.maintainDuration" :placeholder="$t('module.equipmentManager.maintainlog.placeholdermaintainDuration')" clearable :style="{width: '100%'}" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item :label="$t('module.equipmentManager.maintainplan.status')" prop="status">
+            <el-select
+              v-model="formData.status"
+              :placeholder="$t('module.equipmentManager.maintainplan.placeholderstatus')"
+              clearable
+              :style="{width: '100%'}"
+            >
+              <el-option
+                :label="$t('module.equipmentManager.repair.maintenanceStatusNo')"
+                :value="0"
+              />
+              <el-option
+                :label="$t('module.equipmentManager.repair.maintenanceStatusYes')"
+                :value="1"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item :label="$t('module.equipmentManager.maintainlog.maintenanceDetail')" prop="maintenanceDes">
+            <el-input
+              v-model="formData.maintenanceDes"
+              type="textarea"
+              :placeholder="$t('module.equipmentManager.maintainlog.placeholdermaintenanceDetail')"
+              :autosize="{minRows: 4, maxRows: 4}"
+              :style="{width: '100%'}"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item :label="$t('module.equipmentManager.maintainlog.annex')" prop="field110">
+            <el-upload
+              ref="field110"
+              :file-list="field110fileList"
+              :action="field110Action"
+              :before-upload="field110BeforeUpload"
+              name="annex"
+            >
+              <el-button size="small" type="primary" icon="el-icon-upload">{{ 'btn.upload' | i18nFilter }}</el-button>
+            </el-upload>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item :label="$t('module.equipmentManager.maintainlog.remark')" prop="remark">
+            <el-input v-model="formData.remark" :placeholder="$t('module.equipmentManager.maintainlog.placeholderremark')" clearable :style="{width: '100%'}" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item size="large">
+            <el-button type="primary" @click="submitForm">{{ 'btn.submit' | i18nFilter }}</el-button>
+            <el-button @click="resetForm">{{ 'btn.reset' | i18nFilter }}</el-button>
+          </el-form-item>
+        </el-col>
+      </el-form>
+    </el-row>
+  </div>
+</template>
+<script>
+import { editMaintainLog, getMaintainLog } from '@/api/equipment/maintain'
+import { getDictDevice, getDictWorker } from '@/api/dict'
+import i18n from '@/lang'
+import { timeIsBefore } from '@/utils'
+export default {
+  components: {},
+  props: [],
+  data() {
+    return {
+      formData: {
+        equipmentId: undefined,
+        logMaintenanceOrderNumber: undefined,
+        field104: false,
+        nextMaintenanceTime: null,
+        actualStartTime: null,
+        maintainWorkerIdId: undefined,
+        actualEndTime: undefined,
+        maintenanceDes: undefined,
+        field110: null,
+        remark: undefined,
+        status: undefined
+      },
+      rules: {
+        equipmentId: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.maintainlog.placeholderequipmentId'),
+          trigger: 'change'
+        }],
+        logMaintenanceOrderNumber: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.maintainlog.placeholdermaintenanceOrderNumber'),
+          trigger: 'change'
+        }],
+        maintainWorkerId: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.maintainlog.placeholdermaintainWorkerId'),
+          trigger: 'change'
+        }],
+        nextMaintenanceTime: [{
+          required: false,
+          message: i18n.t('module.equipmentManager.maintainlog.placeholdermaintainNextTime'),
+          trigger: 'change'
+        }],
+        actualStartTime: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.maintainlog.placeholderactualStartTime'),
+          trigger: 'change'
+        }],
+        actualEndTime: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.maintainlog.placeholderactualEndTime'),
+          trigger: 'change'
+        }],
+        maintainDuration: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.maintainplan.placeholdermaintainDuration'),
+          trigger: 'blur'
+        }],
+        maintenanceDes: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.maintainlog.placeholdermaintenanceDetail'),
+          trigger: 'blur'
+        }],
+        status: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.maintainplan.placeholderstatus'),
+          trigger: 'blur'
+        }],
+        remark: []
+      },
+      field110Action: 'https://jsonplaceholder.typicode.com/posts/',
+      field110fileList: [],
+      dict: {
+        device: [],
+        worker: []
+      }
+    }
+  },
+  computed: {
+    orderId() {
+      return this.$route.query.orderId
+    },
+    id() {
+      return this.$route.query.id
+    }
+  },
+  watch: {},
+  created() {},
+  mounted() {
+    this.getDict()
+    this.getInfo()
+  },
+  methods: {
+    submitForm() {
+      this.$refs['elForm'].validate(async valid => {
+        if (!valid) return
+        // TODO 提交表单
+        if (this.formData.actualStartTime && this.formData.actualEndTime && !timeIsBefore(this.formData.actualStartTime, this.formData.actualEndTime)) {
+          this.$message({
+            type: 'error',
+            message: '请确保时间前后顺序正确！'
+          })
+          return console.log('拦截')
+        }
+        this.formData.maintainWorkerId = this.formData.maintainWorkerId.join(',')
+        await editMaintainLog(this.formData).then(res => {
+          if (res.code === 0) {
+            this.$message({
+              type: 'success',
+              message: '修改成功！'
+            })
+            this.$router.go(-1)
+          }
+        }).catch(res => {
+          if (res.code !== 0) {
+            this.formData.maintainWorkerId = this.formData.maintainWorkerId.split(',')
+            console.log(this.formData.maintainWorkerId)
+          }
+        })
+      })
+    },
+    resetForm() {
+      this.$refs['elForm'].resetFields()
+    },
+    field110BeforeUpload(file) {
+      const isRightSize = file.size / 1024 / 1024 < 10
+      if (!isRightSize) {
+        this.$message.error('文件大小超过 10MB')
+      }
+      return isRightSize
+    },
+    async getInfo() {
+      const result = await getMaintainLog({
+        id: this.id
+      })
+      if (result.code === 0) {
+        this.formData = result.data
+        this.formData.maintainWorkerId = this.formData.maintainWorkerId.split(',')
+      }
+    },
+    async getDict() {
+      const result = await getDictDevice({
+        current: 1,
+        size: 999
+      })
+      this.dict.device = result
+      const result2 = await getDictWorker()
+      this.dict.worker = result2
+    },
+    turnBack() {
+      this.$router.go(-1)
+    }
+  }
+}
+
+</script>
+<style lang="scss">
+.form-container {
+  padding: 30px;
+      .method-btn-area {
+    padding: 15px 30px;
+    margin: 10px 0 20px 0;
+    border: 1px solid #dfe6ec;
+  }
+}
+.el-upload__tip {
+  line-height: 1.2;
+}
+
+</style>
diff --git a/src/views/EquipmentManager/MaintainLog/index.vue b/src/views/EquipmentManager/MaintainLog/index.vue
new file mode 100644
index 0000000..38ca9a2
--- /dev/null
+++ b/src/views/EquipmentManager/MaintainLog/index.vue
@@ -0,0 +1,372 @@
+<!--
+ * @Date: 2020-12-15 15:36:52
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-05-25 08:57:51
+ * @FilePath: \basic-admin\src\views\EquipmentManager\MaintainLog\index.vue
+ * @Description:
+-->
+<template>
+  <div class="usermanager-container">
+    <div class="method-btn-area">
+      <span v-if="!orderId">
+        {{ $t('module.equipmentManager.maintainlog.equipment') }}：
+        <el-select v-model="listQuery.eqId">
+          <el-option :value="null" :label="$t('module.equipmentManager.maintainlog.planAll')" />
+          <el-option v-for="item in eqList" :key="item.id" :value="item.id" :label="item.name" />
+        </el-select>
+        {{ $t('module.equipmentManager.maintainlog.isplan') }}：
+        <el-select v-model="listQuery.relatePlan">
+          <el-option :value="0" :label="$t('module.equipmentManager.maintainlog.planAll')" />
+          <el-option :value="1" :label="$t('module.equipmentManager.maintainlog.planYes')" />
+          <el-option :value="-1" :label="$t('module.equipmentManager.maintainlog.planNo')" />
+        </el-select>
+        {{ $t('module.equipmentManager.maintainlog.maintainType') }}：
+        <el-select
+          v-model="listQuery.maintainType"
+          :placeholder="$i18nForm(['placeholder.input', $t('module.equipmentManager.maintainlog.placeholdermaintainType')])"
+        >
+          <el-option :value="null" :label="$t('module.equipmentManager.maintainlog.planAll')" />
+          <el-option
+            v-for="(item, index) in dict.maintainType"
+            :key="index"
+            :label="item.dataName"
+            :value="item.id"
+          />
+        </el-select>
+        {{ $t('module.equipmentManager.maintainlog.maintainWorkerId') }}：
+        <el-select
+          v-model="array"
+          :placeholder="$t('module.equipmentManager.maintainlog.placeholdermaintainWorkerId')"
+          clearable
+          multiple
+        >
+          <el-option
+            v-for="(item, index) in dict.worker"
+            :key="index"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </span>
+      {{ $t('module.equipmentManager.maintainlog.maintainlogTime') }}：
+      <el-date-picker
+        v-model="date"
+        type="daterange"
+        range-separator="-"
+        :start-placeholder="$t('module.equipmentManager.maintainlog.startTime')"
+        :end-placeholder="$t('module.equipmentManager.maintainlog.endTime')"
+        @change="changeTime"
+      />
+      <el-button type="primary" @click="getList">{{ 'btn.search' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="toAddPage">{{ 'btn.add' | i18nFilter }}</el-button>
+    </div>
+    <!-- <el-row :gutter="20">
+      <el-col :span="4">
+        <div class="tree-select-container">
+          <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick" />
+        </div>
+      </el-col>
+      <el-col :span="20">
+      </el-col>
+    </el-row> -->
+    <base-table :table-config="orderId ? tableProps : tablePropsOnly" :table-data="list" :is-loading="listLoading" :page="listQuery.current" :limit="listQuery.size">
+      <method-btn slot="handleBtn" :method-list="tableBtn" @clickBtn="handleClick" />
+    </base-table>
+    <pagination :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.size" @pagination="getList" />
+  </div>
+</template>
+
+<script>
+import dataDict from '@/filters/DataDict'
+import { timeFormatter } from '@/filters'
+import { getDictWorker } from '@/api/dict'
+const tableBtn = [{
+  type: 'edit',
+  btnName: 'btn.edit'
+}, {
+  type: 'delete',
+  btnName: 'btn.delete'
+}]
+const tableProps = [{
+  prop: 'logMaintenanceOrderNumber',
+  label: i18n.t('module.equipmentManager.maintainlog.maintenanceOrderNumber'),
+  align: 'center'
+}, {
+  prop: 'actualStartTime',
+  label: i18n.t('module.equipmentManager.maintainlog.maintainStartTime'),
+  align: 'center',
+  filter: timeFormatter
+}, {
+  prop: 'actualEndTime',
+  label: i18n.t('module.equipmentManager.maintainlog.maintainEndTime'),
+  align: 'center',
+  filter: timeFormatter
+}, {
+  prop: 'maintainDuration',
+  label: i18n.t('module.equipmentManager.maintainlog.maintainDuration'),
+  align: 'center'
+},
+{
+  prop: 'status',
+  label: i18n.t('module.equipmentManager.maintainplan.status'),
+  align: 'center',
+  filter: dataDict('doneStatus')
+},
+{
+  prop: 'equipmentCode',
+  label: i18n.t('module.equipmentManager.maintainlog.equipmentCode'),
+  align: 'center'
+  // filter: dataDict('enableState')
+},
+// {
+//   prop: 'nextMaintenanceTime',
+//   label: i18n.t('module.equipmentManager.maintainlog.nextMaintenanceTime'),
+//   align: 'center',
+//   filter: timeFormatter
+// },
+// {
+//   prop: 'maintenanceDes',
+//   label: '保养记录',
+//   align: 'center'
+//   // filter: dataDict('enableState')
+// },
+{
+  prop: 'remark',
+  label: i18n.t('module.equipmentManager.maintainlog.remark'),
+  align: 'center'
+}]
+const tablePropsOnly = [{
+  prop: 'logMaintenanceOrderNumber',
+  label: i18n.t('module.equipmentManager.maintainlog.maintenanceOrderNumber'),
+  align: 'center'
+}, {
+  prop: 'actualStartTime',
+  label: i18n.t('module.equipmentManager.maintainlog.maintainStartTime'),
+  align: 'center',
+  filter: timeFormatter
+}, {
+  prop: 'actualEndTime',
+  label: i18n.t('module.equipmentManager.maintainlog.maintainEndTime'),
+  align: 'center',
+  filter: timeFormatter
+}, {
+  prop: 'maintainDuration',
+  label: i18n.t('module.equipmentManager.maintainlog.maintainDuration'),
+  align: 'center'
+},
+{
+  prop: 'relatePlan',
+  label: i18n.t('module.equipmentManager.maintainlog.isplan'),
+  align: 'center',
+  filter: dataDict('yesOrNoEquipment')
+},
+{
+  prop: 'status',
+  label: i18n.t('module.equipmentManager.maintainplan.status'),
+  align: 'center',
+  filter: dataDict('doneStatus')
+},
+{
+  prop: 'equipmentCode',
+  label: i18n.t('module.equipmentManager.maintainlog.equipmentCode'),
+  align: 'center'
+  // filter: dataDict('enableState')
+},
+// {
+//   prop: 'nextMaintenanceTime',
+//   label: i18n.t('module.equipmentManager.maintainlog.nextMaintenanceTime'),
+//   align: 'center',
+//   filter: timeFormatter
+// },
+// {
+//   prop: 'maintenanceDes',
+//   label: '保养记录',
+//   align: 'center'
+//   // filter: dataDict('enableState')
+// },
+{
+  prop: 'remark',
+  label: i18n.t('module.equipmentManager.maintainlog.remark'),
+  align: 'center'
+}]
+import BaseTable from '@/components/BaseTable'
+// edit here
+import { getMaintainLogList, delMaintainLog, getSingleMaintainLogList, getEqList } from '@/api/equipment/maintain'
+
+import Pagination from '@/components/Pagination'
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import { objFilter } from '@/utils'
+import i18n from '@/lang'
+import { dataDictionaryDataList } from '@/api/basicData/dataDictionary'
+export default {
+  name: 'OrgManager',
+  components: { Pagination, BaseTable, MethodBtn },
+  props: {},
+  data() {
+    return {
+      tableBtn,
+      tableProps,
+      tablePropsOnly,
+      list: [],
+      total: 0,
+      listLoading: true,
+      showDialog: false,
+      curEditId: null,
+      showEditDialog: false,
+      listQuery: {
+        current: 1,
+        size: 10,
+        startTime: '',
+        endTime: '',
+        relatePlan: 0,
+        maintainType: null,
+        eqId: null,
+        maintainWorkerId: undefined
+      },
+      dict: {
+        maintainType: [],
+        worker: []
+      },
+      date: null,
+      array: [],
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      },
+      eqList: []
+    }
+  },
+  computed: {
+    orderId() {
+      return this.$route.query.orderId
+    }
+  },
+  created() {
+    this.getEquipmentList()
+    this.getDict()
+  },
+  mounted() {},
+  methods: {
+    handleClick(raw) {
+      console.log(raw)
+      switch (raw.type) {
+        case 'delete':
+          this.$confirm(i18n.t('deleteMsgBox.content'), i18n.t('deleteMsgBox.hint'), {
+            confirmButtonText: i18n.t('btn.confirm'),
+            cancelButtonText: i18n.t('btn.cancel'),
+            type: 'warning'
+          }).then(async() => {
+            // 走接口
+            const result = await delMaintainLog({
+              id: raw.data.id
+            })
+            if (result.code === 0) {
+              this.$message({
+                type: 'success',
+                message: i18n.t('deleteMsgBox.doneMsg')
+              })
+              this.getList()
+            }
+          })
+          break
+        case 'edit':
+          this.$router.push({
+            name: 'MaintainEditLog',
+            query: {
+              id: raw.data.id
+            }
+          })
+          break
+      }
+    },
+    async getList() {
+      this.listLoading = true
+      // edit here
+      if (this.orderId) {
+        const res = await getMaintainLogList(objFilter({
+          ...this.listQuery,
+          eqMaintenanceId: this.orderId
+        }))
+        if (res.code === 0) {
+          this.list = res.data.records
+          this.total = res.data.total
+          this.listLoading = false
+        }
+      } else {
+        if (this.array) {
+          console.log(this.array)
+          this.listQuery.maintainWorkerId = this.array.join(',')
+        }
+        const result = await getSingleMaintainLogList(this.listQuery)
+        if (result.code === 0) {
+          this.list = result.data.records
+          this.total = result.data.total
+          this.listLoading = false
+        }
+      }
+    },
+    async getEquipmentList() {
+      const res = await getEqList({
+        current: 1,
+        size: 999
+      })
+      this.getList()
+      if (res.code === 0) {
+        this.eqList = res.data.records
+      }
+    },
+    async getDict() {
+      const listQuery = {
+        current: 1,
+        size: 500
+      }
+      await dataDictionaryDataList(Object.assign(listQuery, {
+        dictTypeId: '1393401964580093954'
+      })).then(response => {
+        if (response.data.records) {
+          this.dict.maintainType = response.data.records
+          console.log(this.dict.maintainType)
+        }
+      })
+      const result2 = await getDictWorker()
+      this.dict.worker = result2
+    },
+    toAddPage() {
+      this.$router.push({
+        name: 'MaintainAddLog',
+        query: {
+          orderId: this.orderId
+        }
+      })
+    },
+    changeTime(val) {
+      this.listQuery.startTime = val ? val[0] : null
+      this.listQuery.endTime = val ? val[1] : null
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.usermanager-container {
+  padding: 20px;
+  .method-btn-area {
+    padding: 15px 30px;
+    margin: 10px 0 20px 0;
+    border: 1px solid #dfe6ec;
+  }
+  .tree-select-container {
+    border: 1px solid #dfe6ec;
+    min-height: 400px;
+    padding: 20px;
+  }
+}
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/EquipmentManager/MaintainPlan/AddForm.vue b/src/views/EquipmentManager/MaintainPlan/AddForm.vue
new file mode 100644
index 0000000..bcc55a5
--- /dev/null
+++ b/src/views/EquipmentManager/MaintainPlan/AddForm.vue
@@ -0,0 +1,340 @@
+<template>
+  <div>
+    <el-dialog v-bind="$attrs" :title="$t('module.equipmentManager.maintainplan.addDialogTitle')" v-on="$listeners" @open="onOpen" @close="onClose">
+      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="245px">
+        <el-form-item :label="$t('module.equipmentManager.maintainplan.maintenanceOrderNumber')" prop="maintenanceOrderNumber">
+          <el-input
+            v-model="formData.maintenanceOrderNumber"
+            :placeholder="$t('module.equipmentManager.maintainplan.placeholdermaintenanceOrderNumber')"
+            clearable
+            :style="{width: '100%'}"
+          />
+        </el-form-item>
+        <!-- <el-form-item :label="$t('module.equipmentManager.maintainplan.maintainDuration')" prop="maintainDuration">
+          <el-input v-model="formData.maintainDuration" :placeholder="$t('module.equipmentManager.maintainplan.placeholdermaintainDuration')" clearable :style="{width: '100%'}" />
+        </el-form-item> -->
+        <el-form-item :label="$t('module.equipmentManager.maintainplan.equipmentId')" prop="equipmentId">
+          <el-select
+            v-model="formData.equipmentId"
+            :placeholder="$t('module.equipmentManager.maintainplan.placeholderequipmentId')"
+            clearable
+            :style="{width: '100%'}"
+            @change="getCode($event)"
+          >
+            <el-option
+              v-for="(item, index) in dict.device"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+              :disabled="item.disabled"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.maintainplan.equipmentCode')" prop="equipmentCode">
+          <el-input v-model="formData.equipmentCode" disabled :placeholder="$t('module.equipmentManager.maintainplan.placeholderequipmentCode')" :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.maintainplan.maintenancePeriodId')" prop="maintenancePeriodId">
+          <el-input v-model="formData.maintenancePeriodId" disabled :placeholder="$t('module.equipmentManager.maintainplan.placeholdermaintenancePeriodId')" :style="{width: '100%'}" />
+          <!-- <el-select
+            v-model="formData.maintenancePeriodId"
+            :placeholder="$t('module.equipmentManager.maintainplan.placeholdermaintenancePeriodId')"
+            clearable
+            :style="{width: '100%'}"
+          >
+            <el-option
+              v-for="(item, index) in dict.maintainPeriodList"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select> -->
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.maintainplan.erpIdentification')" prop="erpIdentification">
+          <el-input v-model="formData.erpIdentification" :placeholder="$t('module.equipmentManager.maintainplan.placeholdererpIdentification')" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.maintainplan.maintainStartTime')" prop="maintainStartTime">
+          <el-date-picker
+            v-model="formData.maintainStartTime"
+            type="datetime"
+            :style="{width: '100%'}"
+            :placeholder="$t('module.equipmentManager.maintainplan.placeholdermaintainStartTime')"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.maintainplan.maintainEndTime')" prop="maintainEndTime">
+          <el-date-picker
+            v-model="formData.maintainEndTime"
+            type="datetime"
+            :style="{width: '100%'}"
+            :placeholder="$t('module.equipmentManager.maintainplan.placeholdermaintainEndTime')"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.maintainplan.maintainWorkerId')" prop="maintainWorkerId">
+          <el-select v-model="formData.maintainWorkerId" multiple>
+            <el-option
+              v-for="(item,index) in dict.worker"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.maintainplan.maintainType')" prop="maintainType">
+          <el-select
+            v-model="formData.maintainType"
+            :placeholder="$i18nForm(['placeholder.input', $t('module.equipmentManager.maintainplan.placeholdermaintainType')])"
+            celearabl
+            :style="{width: '100%'}"
+          >
+            <el-option
+              v-for="(item, index) in dict.maintainType"
+              :key="index"
+              :label="item.dataName"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.maintainplan.maintainFuncDesc')" prop="maintainFuncDesc">
+          <el-input v-model="formData.maintainFuncDesc" :placeholder="$t('module.equipmentManager.maintainplan.placeholdermaintainFuncDesc')" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.maintainplan.status')" prop="status">
+          <el-select
+            v-model="formData.status"
+            :placeholder="$t('module.equipmentManager.maintainplan.placeholderstatus')"
+            clearable
+            :style="{width: '100%'}"
+          >
+            <el-option
+              :label="$t('module.equipmentManager.repair.maintenanceStatusNo')"
+              :value="0"
+            />
+            <el-option
+              :label="$t('module.equipmentManager.repair.maintenanceStatusYes')"
+              :value="1"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.maintainlog.annex')" prop="annex">
+          <el-upload
+            ref="annex"
+            :data="dataObj"
+            name="files"
+            :file-list="fileList"
+            :action="uploadPath"
+            :before-upload="annexBeforeUpload"
+            :on-success="handleSuccess"
+            class="btn"
+          >
+            <el-button size="small" type="primary" icon="el-icon-upload">{{ 'btn.upload' | i18nFilter }}</el-button>
+          </el-upload>
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.maintainplan.remark')" prop="remark">
+          <el-input v-model="formData.remark" :placeholder="$t('module.equipmentManager.maintainplan.placeholderremark')" clearable :style="{width: '100%'}" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="close">{{ 'btn.cancel' | i18nFilter }}</el-button>
+        <el-button type="primary" @click="handelConfirm">{{ 'btn.confirm' | i18nFilter }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { addMaintainPlan, getPlanCode } from '@/api/equipment/maintain'
+import { getDictDevice, maintainPeriod, getDictWorker } from '@/api/dict'
+import { uploadPath } from '@/api/basic'
+import { equipmentInfoDetail } from '@/api/basicData/Equipment/equipmentInfo'
+import { dataDictionaryDataList } from '@/api/basicData/dataDictionary'
+import i18n from '@/lang'
+export default {
+  components: {},
+  inheritAttrs: false,
+  props: [],
+  data() {
+    return {
+      uploadPath,
+      annexfileList: [],
+      fileList: [],
+      dataObj: { typeCode: 'file' },
+      formData: {
+        maintenanceOrderNumber: null,
+        maintenancePeriod: undefined,
+        equipmentId: undefined,
+        maintainStartTime: null,
+        maintainEndTime: null,
+        status: 0,
+        maintainFuncDesc: null,
+        remark: undefined,
+        annexUrl: null,
+        maintainWorkerId: null,
+        groupId: undefined
+      },
+      rules: {
+        maintenanceOrderNumber: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.maintainplan.placeholdermaintenanceOrderNumber'),
+          trigger: 'blur'
+        }],
+        maintenancePeriodId: [{
+          required: false,
+          message: i18n.t('module.equipmentManager.maintainplan.placeholdermaintenancePeriodId'),
+          trigger: 'change'
+        }],
+        equipmentId: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.maintainplan.placeholderequipmentId'),
+          trigger: 'change'
+        }],
+        maintainStartTime: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.maintainplan.placeholdermaintainStartTime'),
+          trigger: 'change'
+        }],
+        maintainEndTime: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.maintainplan.placeholdermaintainEndTime'),
+          trigger: 'change'
+        }],
+        lastMaintainTime: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.maintainplan.placeholderlastMaintainTime'),
+          trigger: 'change'
+        }],
+        nextMaintainTime: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.maintainplan.placeholdernextMaintainTime'),
+          trigger: 'change'
+        }],
+        remark: [{
+          required: false,
+          message: i18n.t('module.equipmentManager.maintainplan.placeholderremark'),
+          trigger: 'blur'
+        }],
+        // maintainDuration: [{
+        //   required: true,
+        //   message: i18n.t('module.equipmentManager.maintainplan.placeholdermaintainDuration'),
+        //   trigger: 'blur'
+        // }],
+        maintainFuncDesc: [{
+          required: false,
+          message: i18n.t('module.equipmentManager.maintainplan.placeholdermaintainFuncDesc'),
+          trigger: 'blur'
+        }],
+        maintainType: [{
+          required: false,
+          message: i18n.t('module.equipmentManager.maintainplan.placeholdermaintainType'),
+          trigger: 'blur'
+        }],
+        erpIdentification: [{
+          required: false,
+          message: i18n.t('module.equipmentManager.maintainplan.placeholdererpIdentification'),
+          trigger: 'blur'
+        }]
+      },
+      dict: {
+        device: [],
+        maintainPeriodList: [],
+        worker: [],
+        maintainType: []
+      }
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {
+    this.getDict()
+  },
+  mounted() {},
+  methods: {
+    async onOpen() {
+      const result = await getPlanCode()
+      if (result.code === 0) {
+        this.formData.maintenanceOrderNumber = result.data
+      }
+    },
+    onClose() {
+      this.$refs['elForm'].resetFields()
+      this.fileList = []
+    },
+    close() {
+      this.$emit('update:visible', false)
+    },
+    handelConfirm() {
+      this.$refs['elForm'].validate(async valid => {
+        if (!valid) return
+        this.formData.maintainWorkerId = this.formData.maintainWorkerId.join(',')
+        await addMaintainPlan(this.formData).then(res => {
+          if (res.code === 0) {
+            this.$message({
+              type: 'success',
+              message: '添加成功！'
+            })
+            this.$emit('done')
+            this.close()
+          }
+        }).catch(res => {
+          if (res.code !== 0) {
+            this.formData.maintainWorkerId = this.formData.maintainWorkerId.split(',')
+            console.log(this.formData.maintainWorkerId)
+          }
+        })
+      })
+    },
+    async getCode($event) {
+      const result = await equipmentInfoDetail($event)
+      if (result.code === 0) {
+        this.formData.equipmentCode = result.data.code
+        this.formData.maintenancePeriodId = result.data.maintenanceCycle
+        this.$forceUpdate()
+      }
+    },
+    annexBeforeUpload(file) {
+      const isRightSize = file.size / 1024 / 1024 < 2
+      if (!isRightSize) {
+        this.$message.error('文件大小超过 2MB')
+      }
+      return isRightSize
+    },
+    handleSuccess(res, file) {
+      console.log(res)
+      this.fileList.push({ name: file.name, id: res.data[0].id })
+      const arr = this.fileList.map(item => {
+        return {
+          name: item.name,
+          id: item.id
+        }
+      })
+      let str = ''
+      arr.forEach((v) => {
+        str += v.name + ':' + v.id + ';'
+      })
+      this.formData.annexUrl = str.slice(0, -1)
+    },
+    async getDict() {
+      const result = await getDictDevice({
+        current: 1,
+        size: 999
+      })
+      this.dict.device = result
+      const result2 = await maintainPeriod()
+      this.dict.maintainPeriodList = result2
+      const result4 = await getDictWorker()
+      this.dict.worker = result4
+      const listQuery = {
+        current: 1,
+        size: 500
+      }
+      await dataDictionaryDataList(Object.assign(listQuery, {
+        dictTypeId: '1393401964580093954'
+      })).then(response => {
+        if (response.data.records) {
+          this.dict.maintainType = response.data.records
+        }
+      })
+    }
+  }
+}
+</script>
+<style>
+</style>
diff --git a/src/views/EquipmentManager/MaintainPlan/EditForm.vue b/src/views/EquipmentManager/MaintainPlan/EditForm.vue
new file mode 100644
index 0000000..323ea18
--- /dev/null
+++ b/src/views/EquipmentManager/MaintainPlan/EditForm.vue
@@ -0,0 +1,420 @@
+<template>
+  <div>
+    <el-dialog v-bind="$attrs" :title="$t('module.equipmentManager.maintainplan.editDialogTitle')" v-on="$listeners" @open="onOpen" @close="onClose">
+      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="245px">
+        <el-form-item :label="$t('module.equipmentManager.maintainplan.maintenanceOrderNumber')" prop="maintenanceOrderNumber">
+          <el-input
+            v-model="formData.maintenanceOrderNumber"
+            :placeholder="$t('module.equipmentManager.maintainplan.placeholdermaintenanceOrderNumber')"
+            clearable
+            :style="{width: '100%'}"
+            :disabled="readonly"
+          />
+        </el-form-item>
+        <!-- <el-form-item :label="$t('module.equipmentManager.maintainplan.maintainDuration')" prop="maintainDuration">
+          <el-input v-model="formData.maintainDuration" :placeholder="$t('module.equipmentManager.maintainplan.placeholdermaintainDuration')" clearable :style="{width: '100%'}" />
+        </el-form-item> -->
+        <el-form-item :label="$t('module.equipmentManager.maintainplan.equipmentId')" prop="equipmentId">
+          <el-select
+            v-model="formData.equipmentId"
+            :placeholder="$t('module.equipmentManager.maintainplan.placeholderequipmentId')"
+            clearable
+            :style="{width: '100%'}"
+            :disabled="readonly"
+            @change="getCode($event)"
+          >
+            <el-option
+              v-for="(item, index) in dict.device"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+              :disabled="item.disabled"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.maintainplan.equipmentCode')" prop="equipmentCode">
+          <el-input v-model="formData.equipmentCode" disabled :placeholder="$t('module.equipmentManager.maintainplan.placeholderequipmentCode')" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.maintainplan.maintenancePeriodId')" prop="maintenancePeriodId">
+          <el-input v-model="formData.maintenancePeriodId" disabled :placeholder="$t('module.equipmentManager.maintainplan.placeholdermaintenancePeriodId')" :style="{width: '100%'}" />
+          <!-- <el-select
+            v-model="formData.maintenancePeriodId"
+            :placeholder="$t('module.equipmentManager.maintainplan.placeholdermaintenancePeriodId')"
+            clearable
+            :style="{width: '100%'}"
+            :disabled="readonly"
+          >
+            <el-option
+              v-for="(item, index) in dict.maintainPeriodList"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select> -->
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.maintainplan.maintainWorkerId')" prop="maintainWorkerId">
+          <el-select v-model="formData.maintainWorkerId" :disabled="readonly" multiple>
+            <el-option
+              v-for="(item,index) in dict.worker"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item v-if="readonly" :label="$t('module.equipmentManager.maintainplan.lastMaintainWorkerId')">
+          <el-select v-model="lastFormData.maintainWorkerId" :placeholder="$t('module.equipmentManager.maintainplan.lastMaintainWorkerId')" disabled multiple>
+            <el-option
+              v-for="(item,index) in dict.worker"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.maintainplan.maintainType')" prop="maintainType">
+          <el-select
+            v-model="formData.maintainType"
+            :placeholder="$i18nForm(['placeholder.input', $t('module.equipmentManager.maintainplan.placeholdermaintainType')])"
+            clearable
+            :style="{width: '100%'}"
+            :disabled="readonly"
+          >
+            <el-option
+              v-for="(item, index) in dict.maintainType"
+              :key="index"
+              :label="item.dataName"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.maintainplan.erpIdentification')" prop="erpIdentification">
+          <el-input v-model="formData.erpIdentification" :disabled="readonly" :placeholder="$t('module.equipmentManager.maintainplan.placeholdererpIdentification')" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <!-- <el-form-item :label="$t('module.equipmentManager.maintainplan.lastMaintainTime')" prop="lastMaintainTime">
+          <el-date-picker
+            v-model="formData.lastMaintainTime"
+            type="datetime"
+            :style="{width: '100%'}"
+            :placeholder="$t('module.equipmentManager.maintainplan.placeholderlastMaintainTime')"
+            disabled
+          />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.maintainplan.nextMaintainTime')" prop="nextMaintainTime">
+          <el-date-picker
+            v-model="formData.nextMaintainTime"
+            type="datetime"
+            :style="{width: '100%'}"
+            :placeholder="$t('module.equipmentManager.maintainplan.placeholdernextMaintainTime')"
+            disabled
+          />
+        </el-form-item> -->
+        <el-form-item :label="$t('module.equipmentManager.maintainplan.maintainStartTime')" prop="maintainStartTime">
+          <el-date-picker
+            v-model="formData.maintainStartTime"
+            type="datetime"
+            :style="{width: '100%'}"
+            :placeholder="$t('module.equipmentManager.maintainplan.placeholdermaintainStartTime')"
+            clearable
+            :disabled="readonly"
+          />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.maintainplan.maintainEndTime')" prop="maintainEndTime">
+          <el-date-picker
+            v-model="formData.maintainEndTime"
+            type="datetime"
+            :style="{width: '100%'}"
+            :placeholder="$t('module.equipmentManager.maintainplan.placeholdermaintainEndTime')"
+            clearable
+            :disabled="readonly"
+          />
+        </el-form-item>
+        <el-form-item v-if="readonly" :label="$t('module.equipmentManager.maintainplan.lastMaintainStartTime')">
+          <el-date-picker
+            v-model="lastFormData.maintainStartTime"
+            type="datetime"
+            :style="{width: '100%'}"
+            clearable
+            disabled
+          />
+        </el-form-item>
+        <el-form-item v-if="readonly" :label="$t('module.equipmentManager.maintainplan.lastMaintainEndTime')">
+          <el-date-picker
+            v-model="lastFormData.maintainEndTime"
+            type="datetime"
+            :style="{width: '100%'}"
+            clearable
+            disabled
+          />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.maintainlog.annex')" prop="annex">
+          <el-upload
+            ref="annex"
+            :data="dataObj"
+            name="files"
+            :file-list="fileList"
+            :action="uploadPath"
+            :show-file-list="true"
+            :before-upload="annexBeforeUpload"
+            :on-success="handleSuccess"
+            :on-preview="openFile"
+            class="btn"
+            :disabled="readonly"
+          >
+            <el-button :disabled="readonly" size="small" type="primary" icon="el-icon-upload">{{ 'btn.upload' | i18nFilter }}</el-button>
+          </el-upload>
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.maintainplan.status')" prop="status">
+          <el-select
+            v-model="formData.status"
+            :placeholder="$t('module.equipmentManager.maintainplan.placeholderstatus')"
+            clearable
+            :style="{width: '100%'}"
+            :disabled="readonly"
+          >
+            <el-option
+              :label="$t('module.equipmentManager.repair.maintenanceStatusNo')"
+              :value="0"
+            />
+            <el-option
+              :label="$t('module.equipmentManager.repair.maintenanceStatusYes')"
+              :value="1"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.maintainplan.maintainFuncDesc')" prop="maintainFuncDesc">
+          <el-input v-model="formData.maintainFuncDesc" :disabled="readonly" :placeholder="$t('module.equipmentManager.maintainplan.placeholdermaintainFuncDesc')" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.maintainplan.remark')" prop="remark">
+          <el-input v-model="formData.remark" :disabled="readonly" :placeholder="$t('module.equipmentManager.maintainplan.placeholderremark')" clearable :style="{width: '100%'}" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="close">{{ 'btn.cancel' | i18nFilter }}</el-button>
+        <el-button v-if="!readonly" type="primary" @click="handelConfirm">{{ 'btn.confirm' | i18nFilter }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { editMaintainPlan, getMaintainPlan } from '@/api/equipment/maintain'
+import { maintainPeriod, getDictWorker } from '@/api/dict'
+import i18n from '@/lang'
+import { uploadPath } from '@/api/basic'
+import { equipmentInfoDetail } from '@/api/basicData/Equipment/equipmentInfo'
+import { dataDictionaryDataList } from '@/api/basicData/dataDictionary'
+import { getEqList } from '@/api/equipment/eqManager'
+export default {
+  components: {},
+  inheritAttrs: false,
+  props: {
+    targetInfo: {
+      type: Object,
+      default: () => ({})
+    },
+    readonly: {
+      type: Boolean,
+      default: () => false
+    }
+  },
+  data() {
+    return {
+      formData: {
+        maintenanceOrderNumber: undefined,
+        maintenancePeriodId: undefined,
+        equipmentId: undefined,
+        maintainStartTime: null,
+        maintainEndTime: null,
+        remark: undefined,
+        annexUrl: null
+      },
+      lastFormData: {
+        maintainStartTime: null,
+        maintainEndTime: null,
+        maintainWorkerId: []
+      },
+      uploadPath,
+      fileList: null,
+      dataObj: { typeCode: 'file' },
+      rules: {
+        maintenanceOrderNumber: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.maintainplan.placeholdermaintenanceOrderNumber'),
+          trigger: 'blur'
+        }],
+        maintenancePeriodId: [{
+          required: false,
+          message: i18n.t('module.equipmentManager.maintainplan.placeholdermaintenancePeriodId'),
+          trigger: 'change'
+        }],
+        equipmentId: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.maintainplan.placeholderequipmentId'),
+          trigger: 'change'
+        }],
+        maintainStartTime: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.maintainplan.placeholdermaintainStartTime'),
+          trigger: 'change'
+        }],
+        maintainEndTime: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.maintainplan.placeholdermaintainEndTime'),
+          trigger: 'change'
+        }],
+        remark: [{
+          required: false,
+          message: i18n.t('module.equipmentManager.maintainplan.placeholderremark'),
+          trigger: 'blur'
+        }]
+      },
+      maintenancePeriodOptions: [{
+        'label': '周',
+        'value': 'week'
+      }, {
+        'label': '月',
+        'value': 'month'
+      }, {
+        'label': '年',
+        'value': 'year'
+      }],
+      dict: {
+        device: [],
+        maintainPeriodList: []
+      }
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {
+    this.getDict()
+  },
+  mounted() {},
+  methods: {
+    openFile(file) {
+      console.log(file)
+      window.open(`${location.origin}/api/common/attachment/downloadFile?type=file&attachmentId=${file.id}`)
+    },
+    onOpen() {
+      this.getInfo()
+    },
+    onClose() {
+      this.$refs['elForm'].resetFields()
+      this.fileList = []
+    },
+    close() {
+      this.$emit('update:visible', false)
+    },
+    handelConfirm() {
+      console.log(this.formData)
+      console.log(this.formData.maintainDuration)
+      this.$refs['elForm'].validate(async valid => {
+        if (!valid) return
+        this.formData.maintainWorkerId = this.formData.maintainWorkerId.join(',')
+        const result = await editMaintainPlan(this.formData)
+        if (result.code === 0) {
+          this.$message({
+            type: 'success',
+            message: '编辑成功！'
+          })
+          this.$emit('done')
+          this.close()
+        }
+      })
+    },
+    annexBeforeUpload(file) {
+      const isRightSize = file.size / 1024 / 1024 < 2
+      if (!isRightSize) {
+        this.$message.error('文件大小超过 2MB')
+      }
+      return isRightSize
+    },
+    handleSuccess(res, file) {
+      console.log(res)
+      this.fileList.push({ name: file.name, id: res.data[0].id })
+      const arr = this.fileList.map(item => {
+        return {
+          name: item.name,
+          id: item.id
+        }
+      })
+      let str = ''
+      arr.forEach((v) => {
+        str += v.name + ':' + v.id + ';'
+      })
+      this.formData.annexUrl = str.slice(0, -1)
+    },
+    async getCode($event) {
+      const result = await equipmentInfoDetail($event)
+      if (result.code === 0) {
+        this.formData.equipmentCode = result.data.code
+        this.formData.maintenancePeriodId = result.data.maintenanceCycle
+        this.$forceUpdate()
+      }
+    },
+    async getInfo() {
+      const result = await getMaintainPlan({
+        id: this.targetInfo?.id,
+        current: 1,
+        size: 10
+      })
+      if (result.code === 0) {
+        this.formData = result.data.records[0]
+        if (this.readonly && this.formData.lastMaintainPlanId) {
+          this.getLastInfo(this.formData.lastMaintainPlanId)
+        }
+        // console.log(this.formData.annexUrl)
+        this.formData.maintainWorkerId = this.formData.maintainWorkerId.split(',')
+        if (this.formData.annexUrl) {
+          const arr = this.formData.annexUrl.split(';').map(v => {
+            const obj = {}
+            const a = v.split(':')
+            obj.name = a[0]
+            obj.id = a[1]
+            return obj
+          })
+          this.fileList = arr
+          // console.log(this.formData)
+        }
+      }
+    },
+    async getLastInfo(id) {
+      const result = await getMaintainPlan({
+        id,
+        current: 1,
+        size: 10
+      })
+      if (result.code === 0 && result.data.records.length > 0) {
+        this.lastFormData = result.data.records[0]
+        this.lastFormData.maintainWorkerId = this.lastFormData.maintainWorkerId.split(',')
+      }
+    },
+    async getDict() {
+      const result = await getEqList({
+        current: 1,
+        size: 999
+      })
+      this.dict.device = result.data.records
+      const result2 = await maintainPeriod()
+      this.dict.maintainPeriodList = result2
+      const result4 = await getDictWorker()
+      console.log(result4)
+      this.dict.worker = result4
+      const listQuery = {
+        current: 1,
+        size: 500
+      }
+      await dataDictionaryDataList(Object.assign(listQuery, {
+        dictTypeId: '1393401964580093954'
+      })).then(response => {
+        if (response.data.records) {
+          this.dict.maintainType = response.data.records
+        }
+      })
+    }
+  }
+}
+
+</script>
+<style>
+</style>
diff --git a/src/views/EquipmentManager/MaintainPlan/index.vue b/src/views/EquipmentManager/MaintainPlan/index.vue
new file mode 100644
index 0000000..bed0acc
--- /dev/null
+++ b/src/views/EquipmentManager/MaintainPlan/index.vue
@@ -0,0 +1,288 @@
+<!--
+ * @Date: 2020-12-15 15:36:52
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-12 10:11:25
+ * @FilePath: \basic-admin\src\views\EquipmentManager\MaintainPlan\index.vue
+ * @Description:
+-->
+<template>
+  <div class="usermanager-container">
+    <div class="method-btn-area">
+      {{ $t('module.equipmentManager.maintainplan.status') }}:
+      <el-select v-model="listQuery.status" :placeholder="$t('module.equipmentManager.maintainplan.searchPlaceholder')" clearable style="width: 200px;">
+        <el-option
+          label="全部"
+          value=""
+        />
+        <el-option
+          :label="$t('module.equipmentManager.repair.maintenanceStatusNo')"
+          :value="0"
+        />
+        <el-option
+          label="完成"
+          :value="1"
+        />
+      </el-select>
+      {{ $t('module.equipmentManager.maintainplan.equipmentId') }}:
+      <el-select v-model="listQuery.eqId" :placeholder="$t('module.equipmentManager.maintainplan.placeholderequipmentId')" clearable style="width: 200px;">
+        <el-option
+          v-for="(item, index) in dict.device"
+          :key="index"
+          :label="item.name"
+          :value="item.id"
+          :disabled="item.disabled"
+        />
+      </el-select>
+      <el-date-picker
+        v-model="listQuery.date"
+        type="daterange"
+        range-separator="-"
+        :start-placeholder="$t('module.equipmentManager.maintainplan.startTime')"
+        :end-placeholder="$t('module.equipmentManager.maintainplan.endTime')"
+        @change="changeTime"
+      />
+      <el-button type="primary" @click="getList">{{ 'btn.search' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="showDialog = true">{{ 'btn.add' | i18nFilter }}</el-button>
+    </div>
+    <!-- <el-row :gutter="20">
+      <el-col :span="4">
+        <div class="tree-select-container">
+          <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick" />
+        </div>
+      </el-col>
+      <el-col :span="20">
+      </el-col>
+    </el-row> -->
+    <base-table :table-config="tableProps" :table-data="list" :is-loading="listLoading" :page="listQuery.current" :limit="listQuery.size">
+      <method-btn slot="handleBtn" :width="260" :method-list="tableBtn" @clickBtn="handleClick" />
+    </base-table>
+    <pagination :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.size" @pagination="getList" />
+    <add-form :visible.sync="showDialog" @done="getList" />
+    <edit-form :readonly="readonly" :visible.sync="showEditDialog" :target-info="{id: curEditId}" @done="getList" />
+  </div>
+</template>
+
+<script>
+import Vue from 'vue'
+import dataDict from '@/filters/DataDict'
+// edit here
+import { timeFormatter } from '@/filters'
+const tableBtn = [{
+  type: 'detail',
+  btnName: 'btn.detail'
+}, {
+  type: 'edit',
+  btnName: 'btn.edit'
+}, {
+  type: 'delete',
+  btnName: 'btn.delete'
+}, {
+  type: 'check',
+  btnName: 'btn.checkLog'
+}]
+// 暂时隐藏
+const tableProps = [{
+  prop: 'maintenanceOrderNumber',
+  label: i18n.t('module.equipmentManager.maintainplan.maintenanceOrderNumber'),
+  align: 'center'
+}, {
+  prop: 'equipmentName',
+  label: i18n.t('module.equipmentManager.maintainplan.equipmentId'),
+  align: 'center'
+  // filter: dataDict('enableState')
+}, {
+  prop: 'maintenancePeriodId',
+  label: i18n.t('module.equipmentManager.maintainplan.maintenancePeriodId'),
+  align: 'center'
+},
+// {
+//   prop: 'groupName',
+//   label: i18n.t('module.equipmentManager.maintainplan.EquipmentGrouping'),
+//   align: 'center'
+// },
+{
+  prop: 'maintainStartTime',
+  label: i18n.t('module.equipmentManager.maintainplan.maintainStartTime'),
+  align: 'center',
+  filter: timeFormatter
+},
+{
+  prop: 'maintainEndTime',
+  label: i18n.t('module.equipmentManager.maintainplan.maintainEndTime'),
+  align: 'center',
+  filter: timeFormatter
+},
+{
+  prop: 'status',
+  label: i18n.t('module.equipmentManager.maintainplan.status'),
+  align: 'center',
+  filter: dataDict('doneStatus')
+},
+{
+  prop: 'maintainType',
+  label: i18n.t('module.equipmentManager.maintainplan.maintainType'),
+  align: 'center',
+  filter: dataDict('doneStatus')
+}
+// {
+//   prop: 'remark',
+//   label: i18n.t('module.equipmentManager.maintainplan.remark'),
+//   align: 'center'
+// }
+]
+import AddForm from './AddForm'
+import EditForm from './EditForm'
+import BaseTable from '@/components/BaseTable'
+import { objFilter } from '@/utils'
+// edit here
+import { getMaintainPlanList, delMaintainPlan } from '@/api/equipment/maintain'
+import { getDictDevice } from '@/api/dict'
+import { dataDictionaryDataList } from '@/api/basicData/dataDictionary'
+import Pagination from '@/components/Pagination'
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import i18n from '@/lang'
+export default {
+  name: 'OrgManager',
+  components: { Pagination, BaseTable, MethodBtn, AddForm, EditForm },
+  props: {},
+  data() {
+    return {
+      tableBtn,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      showDialog: false,
+      curEditId: null,
+      showEditDialog: false,
+      readonly: false,
+      dict: {
+        device: []
+      },
+      listQuery: {
+        current: 1,
+        size: 10,
+        keywords: '',
+        status: '',
+        eqId: null,
+        startTime: null,
+        date: null,
+        endTime: null
+      },
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      }
+    }
+  },
+  created() {
+    this.getList()
+    // this.listLoading = false
+    this.getDict()
+  },
+  mounted() {},
+  methods: {
+    handleNodeClick() {},
+    handleClick(raw) {
+      console.log(raw)
+      switch (raw.type) {
+        case 'delete':
+          this.$confirm(i18n.t('deleteMsgBox.content'), i18n.t('deleteMsgBox.hint'), {
+            confirmButtonText: i18n.t('btn.confirm'),
+            cancelButtonText: i18n.t('btn.cancel'),
+            type: 'warning'
+          }).then(async() => {
+            // 走接口
+            const result = await delMaintainPlan({
+              id: raw.data.id
+            })
+            if (result.code === 0) {
+              this.$message({
+                type: 'success',
+                message: i18n.t('deleteMsgBox.doneMsg')
+              })
+            }
+            this.getList()
+          })
+          break
+        case 'detail':
+          this.showEditDialog = true
+          this.readonly = true
+          this.curEditId = raw.data.id
+          break
+        case 'edit':
+          this.showEditDialog = true
+          this.readonly = false
+          this.curEditId = raw.data.id
+          break
+        case 'check':
+          this.$router.push({
+            name: 'MaintainLog',
+            query: {
+              orderId: raw.data.id
+            }
+          })
+          break
+      }
+    },
+    async getDict() {
+      const result = await getDictDevice({
+        current: 1,
+        size: 999
+      })
+      this.dict.device = result
+      const res = await dataDictionaryDataList({
+        current: 1,
+        size: 500,
+        dictTypeId: '1393401964580093954'
+      })
+      const resObj = {}
+      res.data.records.map(item => {
+        resObj[item.id] = item.dataName
+      })
+      Vue.set(this.tableProps[this.tableProps.length - 1], 'filter', function(val) {
+        return resObj?.[val]
+      })
+    },
+    async getList() {
+      this.listLoading = true
+      // edit here
+      const res = await getMaintainPlanList(objFilter(this.listQuery))
+      if (res.code === 0) {
+        this.list = res.data.records
+        console.log(this.list)
+        this.total = res.data.total
+        this.listLoading = false
+      }
+    },
+    changeTime(val) {
+      this.listQuery.startTime = val ? val[0] : null
+      this.listQuery.endTime = val ? val[1] : null
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.usermanager-container {
+  padding: 20px;
+  .method-btn-area {
+    padding: 15px 30px;
+    margin: 10px 0 20px 0;
+    border: 1px solid #dfe6ec;
+  }
+  .tree-select-container {
+    border: 1px solid #dfe6ec;
+    min-height: 400px;
+    padding: 20px;
+  }
+}
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/EquipmentManager/ProcessData/Details.vue b/src/views/EquipmentManager/ProcessData/Details.vue
new file mode 100644
index 0000000..6d725f0
--- /dev/null
+++ b/src/views/EquipmentManager/ProcessData/Details.vue
@@ -0,0 +1,133 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-06-26 16:53:05
+ * @LastEditTime: 2021-06-29 17:30:31
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \mt-bus-fe\src\views\EquipmentManager\ProcessData\Details.vue
+-->
+<template>
+  <div>
+    <el-row style="padding: 20px">
+      <el-button type="primary" icon="el-icon-arrow-left" @click="goBack">{{ 'btn.back' | i18nFilter }}</el-button>
+    </el-row>
+    <div id="main" style="width: 1000px;height: 700px;" />
+  </div>
+</template>
+
+<script>
+import { getProcess } from '@/api/equipment/process'
+// import * as echarts from 'echarts'
+import echarts from 'echarts'
+export default {
+  data() {
+    return {
+      eventId: this.$route.query.eventId,
+      ParameterName: this.$route.query.ParameterName,
+      charts: '',
+      opinionData: ['3', '2', '4', '4', '5'],
+      time: [],
+      value: [],
+      upperLimit: '',
+      lowerLimit: '',
+      y: []
+    }
+  },
+  mounted() {
+    this.getData()
+  },
+  methods: {
+    async getData() {
+      const result = await getProcess({
+        eventId: this.eventId
+      })
+      if (result.code === 0) {
+        console.log(result.data)
+        this.lowerLimit = result.data[1].lowerLimit
+        this.upperLimit = result.data[1].upperLimit
+        this.y = [this.lowerLimit - 10, this.lowerLimit - 5, this.lowerLimit, this.lowerLimit * 1 + 5, this.upperLimit, this.upperLimit * 1 + 5, this.upperLimit * 1 + 10]
+        console.log(this.y)
+        result.data.forEach(element => {
+          this.time.unshift(element.createTime.slice(11))
+          this.value.unshift(element.parameterValue)
+        })
+        console.log(this.value)
+        var data = [
+          [this.time[0], this.value[0]],
+          [this.time[1], this.value[1]],
+          [this.time[2], this.value[2]],
+          [this.time[3], this.value[3]],
+          [this.time[4], this.value[4]],
+          [this.time[5], this.value[5]],
+          [this.time[6], this.value[6]],
+          [this.time[7], this.value[7]],
+          [this.time[8], this.value[8]],
+          [this.time[9], this.value[9]],
+          [this.time[10], this.value[10]]
+        ]
+        var chartDom = document.getElementById('main')
+        var myChart = echarts.init(chartDom)
+        var option
+        option = {
+          xAxis: {
+            name: '时间/分钟',
+            axisLabel: {
+              show: true,
+              inside: false, // 是否朝内
+              rotate: 0, // 旋转角度
+              margin: 5, // 刻度标签与轴线之间的距离
+              color: '#999'
+            },
+            data: this.time
+          },
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'shadow'
+            }
+          },
+          yAxis: {
+            // scale: true,
+            name: this.ParameterName,
+            min: this.lowerLimit * 1 - 10,
+            max: this.upperLimit * 1 + 10
+          },
+          legend: {
+            data: ['标准值']
+          },
+          grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true
+          },
+          series: [{
+            data: data,
+            type: 'scatter',
+            markArea: {
+              data: [
+                [{
+                  yAxis: this.lowerLimit * 1,
+                  itemStyle: {
+                    color: '#81b22f'
+                  }
+                }, {
+                  yAxis: this.upperLimit
+                }]
+              ]
+            }
+          }]
+        }
+        option && myChart.setOption(option)
+      }
+    },
+    goBack() {
+      this.$router.go(-1)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/views/EquipmentManager/ProcessData/ProcessData.vue b/src/views/EquipmentManager/ProcessData/ProcessData.vue
new file mode 100644
index 0000000..1477428
--- /dev/null
+++ b/src/views/EquipmentManager/ProcessData/ProcessData.vue
@@ -0,0 +1,307 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-06-25 10:17:15
+ * @LastEditTime: 2021-06-29 21:17:15
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \mt-bus-fe\src\views\EquipmentManager\ProcessData\ProcessData.vue
+-->
+<template>
+  <div>
+    <el-row style="padding: 20px">
+      <el-button type="primary" icon="el-icon-arrow-left" @click="goBack">{{ 'btn.back' | i18nFilter }}</el-button>
+    </el-row>
+    <div class="image">
+      <img class="Toughened" src="../../../assets/img/Toughenedfurnace.png" alt="">
+      <div class="box t-data">
+        <el-tag class="one">{{ $t('module.equipmentManager.ProcessData.top') }}1: {{ top }}℃</el-tag>
+        <el-tag class="two">{{ $t('module.equipmentManager.ProcessData.top') }}2:{{ top }} ℃</el-tag>
+        <el-tag class="three">{{ $t('module.equipmentManager.ProcessData.top') }}3:{{ top }} ℃</el-tag>
+      </div>
+      <div class="box b-data">
+        <el-tag class="one" style="height:50px">{{ $t('module.equipmentManager.ProcessData.bottom') }}1: {{ bottom }}℃ <br> {{ $t('module.equipmentManager.ProcessData.bottomHigh') }} 5 mm </el-tag>
+        <el-tag class="five" style="height:50px">{{ $t('module.equipmentManager.ProcessData.bottom') }}2:{{ bottom }}℃ <br> {{ $t('module.equipmentManager.ProcessData.bottomHigh') }}  5 mm </el-tag>
+        <el-tag class="six" style="height:50px">{{ $t('module.equipmentManager.ProcessData.bottom') }}3:{{ bottom }}℃ <br> {{ $t('module.equipmentManager.ProcessData.bottomHigh') }}  5 mm</el-tag>
+      </div>
+      <div class="box rate">
+        <el-tag size="	medium">{{ $t('module.equipmentManager.ProcessData.speed') }}:0.05m/ms </el-tag>
+      </div>
+    </div>
+    <div class="left">
+      <el-row>
+        <el-col :span="24">
+          <el-card class="box-card">
+            <div class="text item">
+              {{ $t('module.equipmentManager.ProcessData.highPressureFan') }}1{{ $t('module.equipmentManager.ProcessData.current') }}: 11A
+            </div>
+            <div class="text item">
+              {{ $t('module.equipmentManager.ProcessData.highPressureFan') }}2{{ $t('module.equipmentManager.ProcessData.current') }}: 11A
+            </div>
+            <div class="text item">
+              {{ $t('module.equipmentManager.ProcessData.lowPressureFan') }}1{{ $t('module.equipmentManager.ProcessData.current') }}: 11A
+            </div>
+            <div class="text item">
+              {{ $t('module.equipmentManager.ProcessData.lowPressureFan') }}2{{ $t('module.equipmentManager.ProcessData.current') }}: 11A
+            </div>
+          </el-card>
+        </el-col>
+      </el-row>
+    </div>
+    <div class="right">
+      <el-row>
+        <el-col :span="24">
+          <el-card class="box-card">
+            <div class="text item">
+              {{ $t('module.equipmentManager.ProcessData.selfChecking') + ' ' + $t('module.equipmentManager.ProcessData.qualifiedRate') }}:98%
+            </div>
+            <div class="text item">
+              {{ $t('module.equipmentManager.ProcessData.manualChecking') + ' ' + $t('module.equipmentManager.ProcessData.qualifiedRate') }}:99%
+            </div>
+            <div class="text item">
+              {{ $t('module.equipmentManager.ProcessData.powerOffPackaging') + ' ' + $t('module.equipmentManager.ProcessData.qualifiedRate') }}:99.8%
+            </div>
+          </el-card>
+        </el-col>
+      </el-row>
+    </div>
+    <el-col :span="16">
+      <el-table
+        :data="tableData"
+        border
+      >
+        <el-table-column
+          :label="'tableHeader.index' | i18nFilter"
+          type="index"
+          width="80"
+          align="center"
+        />
+        <el-table-column
+          prop="ParameterName"
+          :label="$t('module.equipmentManager.ProcessData.parameterName')"
+          width="200"
+          align="center"
+        />
+        <el-table-column
+          prop="ParametersCode"
+          :label="$t('module.equipmentManager.ProcessData.parameterCode')"
+          align="center"
+        />
+        <el-table-column
+          prop="currentValue"
+          :label="$t('module.equipmentManager.ProcessData.nowValue')"
+          width="200"
+          align="center"
+        />
+        <el-table-column
+          prop="StandardValues"
+          :label="$t('module.equipmentManager.ProcessData.standardValue')"
+          width="200"
+          align="center"
+        />
+        <el-table-column
+          fixed="right"
+          :label="'tableHeader.operation' | i18nFilter"
+          width="80"
+          align="center"
+        >
+          <template slot-scope="o">
+            <el-button
+              type="text"
+              size="small"
+              @click="handleShow(o.row)"
+            >
+              {{ 'btn.detail' | i18nFilter }}
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-col>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      tem: [715, 710, 705, 700, 690],
+      tem1: [725, 720, 715, 705, 695],
+      top: '',
+      bottom: '',
+      current: [11, 13, 15, 14, 18],
+      cur: '',
+      qualified: [99, 99.8, 99.1, 99.5, 99.6],
+      qua: '',
+      list: [],
+      listLoading: true,
+      height: [5, 4, 3, 8, 6],
+      gaodu: '',
+      tableData: [{
+        ParameterName: '上部温度℃',
+        ParametersCode: '213123213',
+        currentValue: '710',
+        StandardValues: '715',
+        eventId: 10001
+      }, {
+        ParameterName: '下部温度℃',
+        ParametersCode: '2131231',
+        currentValue: '705',
+        StandardValues: '710',
+        eventId: 10002
+      }, {
+        ParameterName: '急冷风压',
+        ParametersCode: '3123214',
+        currentValue: '6500',
+        StandardValues: '710',
+        eventId: 10003
+      }, {
+        ParameterName: '冷却时间',
+        ParametersCode: '443434343',
+        currentValue: '50',
+        StandardValues: '710',
+        eventId: 10004
+      }, {
+        ParameterName: '冷却风压',
+        ParametersCode: '434343434',
+        currentValue: '4500',
+        StandardValues: '710',
+        eventId: 10005
+      }]
+    }
+  },
+  mounted() {
+    this.changeOne()
+    this.changeTwo()
+    this.changeCurrent()
+    this.changeQualified()
+    this.changeheight()
+  },
+  methods: {
+    changeOne() {
+      setInterval(() => {
+        for (let i = 0; i < this.tem.length; i++) {
+          setTimeout(() => {
+            this.top = this.tem[i]
+          }, 500 * i)
+        }
+      }, 500)
+    },
+    changeTwo() {
+      setInterval(() => {
+        for (let i = 0; i < this.tem.length; i++) {
+          setTimeout(() => {
+            this.bottom = this.tem[i]
+            // console.log(this.tem[i])
+          }, 500 * i)
+        }
+      }, 2500)
+    },
+    changeQualified() {
+      setInterval(() => {
+        for (let i = 0; i < this.qualified.length; i++) {
+          setTimeout(() => {
+            this.qua = this.qualified[i]
+          }, 500 * i)
+        }
+      }, 2500)
+    },
+    handleShow(obj) {
+      const eventId = obj.eventId
+      const ParameterName = obj.ParameterName
+      console.log(eventId)
+      console.log(ParameterName)
+      this.$router.push({
+        path: 'Details',
+        query: {
+          eventId: eventId,
+          ParameterName: ParameterName }
+      })
+    },
+    goBack() {
+      this.$router.go(-1)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.image{
+  display: flex;
+  justify-content: center;
+}
+.two{
+  margin-left: 150px;
+}
+.el-tag{
+    font-size: 20px;
+    text-align: center;
+}
+.three{
+  margin-left: 80px;
+}
+.five{
+  margin-left: 70px;
+}
+.six{
+  margin-left: 50px;
+}
+.Toughened{
+  width: 80%;
+
+}
+  .box {
+    width: 1000px;
+
+    .top {
+      text-align: center;
+    }
+
+    .left {
+      float: left;
+      width: 60px;
+    }
+
+    .right {
+      float: right;
+      width: 60px;
+    }
+
+    .bottom {
+      clear: both;
+      text-align: center;
+    }
+
+    .item {
+      margin: 4px;
+    }
+
+    .left .el-tooltip__popper,
+    .right .el-tooltip__popper {
+      padding: 8px 10px;
+    }
+  }
+  .t-data{
+    position: absolute;
+    left: 50%;
+    top: 25%;
+  }
+  .b-data{
+    position: absolute;
+    left: 50%;
+    top: 52%;
+  }
+  .rate{
+    position: absolute;
+    left: 30%;
+    top: 52%;
+  }
+  .left{
+    position: absolute;
+    top: 27%;
+    left: 3%;
+  }
+   .right{
+    position: absolute;
+    top: 30%;
+    left: 87%;
+  }
+</style>
diff --git a/src/views/EquipmentManager/ProcessData/Processequipment.vue b/src/views/EquipmentManager/ProcessData/Processequipment.vue
new file mode 100644
index 0000000..232da21
--- /dev/null
+++ b/src/views/EquipmentManager/ProcessData/Processequipment.vue
@@ -0,0 +1,138 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-06-28 14:52:36
+ * @LastEditTime: 2021-06-29 09:50:02
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \mt-bus-fe\src\views\EquipmentManager\ProcessData\Processequipment.vue
+-->
+<template>
+  <div>
+    <el-main>
+      <el-form :inline="true" label-width="120px" class="demo-form-inline">
+        <el-form-item :label="$t('module.equipmentManager.ProcessData.productInfo')">
+          <el-input />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.ProcessData.processName')">
+          <el-input />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary">{{ 'btn.search' | i18nFilter }}</el-button>
+        </el-form-item>
+      </el-form>
+      <el-table
+        :data="tableData"
+        border
+        style="width: 100%"
+      >
+        <el-table-column
+          :label="'tableHeader.index' | i18nFilter"
+          type="index"
+          align="center"
+        />
+        <el-table-column
+          prop="name"
+          :label="$t('module.equipmentManager.ProcessData.productName')"
+          align="center"
+        />
+        <el-table-column
+          prop="ParametersCode"
+          :label="$t('module.equipmentManager.ProcessData.specifications')"
+          align="center"
+        />
+        <el-table-column
+          prop="Devicename"
+          :label="$t('module.equipmentManager.ProcessData.equipmentName')"
+          align="center"
+        />
+        <el-table-column
+          prop="processname"
+          :label="$t('module.equipmentManager.ProcessData.processName')"
+          align="center"
+        />
+        <el-table-column
+          prop="processcode"
+          :label="$t('module.equipmentManager.ProcessData.processCode')"
+          align="center"
+        />
+        <el-table-column
+          prop="Processversion"
+          :label="$t('module.equipmentManager.ProcessData.processVersion')"
+          align="center"
+        />
+        <el-table-column
+          prop="pass"
+          :label="$t('module.equipmentManager.ProcessData.qualifiedRate')"
+          align="center"
+        />
+        <el-table-column
+          :label="$t('module.equipmentManager.ProcessData.analysis')"
+          fixed="right"
+          align="center"
+        >
+          <template slot-scope="o">
+            <el-button
+              type="text"
+              size="small"
+              @click="handleShow(o.row)"
+            >
+              {{ 'btn.detail' | i18nFilter }}
+            </el-button>
+          </template>
+        </el-table-column>
+        <el-table-column
+          :label="$t('module.equipmentManager.ProcessData.contrast')"
+          fixed="right"
+          width="240"
+          align="center"
+        >
+          <template slot-scope="o">
+            <el-button
+              type="text"
+              size="small"
+              @click="handlePush(o.row)"
+            >
+              {{ $t('module.equipmentManager.ProcessData.comparisonOfInfluencingFactors') }}
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-main>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      key: 11111,
+      tableData: [{
+        name: '35611325',
+        ParametersCode: '213123213',
+        Devicename: '钢化炉',
+        processname: '715',
+        processcode: '154812',
+        Processversion: '1.02',
+        pass: '99.9',
+        eventId: 10001
+      }]
+    }
+  },
+  methods: {
+    handleShow() {
+      this.$router.push({
+        path: 'ProcessData'
+      })
+    },
+    handlePush() {
+      this.$router.push({
+        path: 'Three'
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/views/EquipmentManager/ProcessData/Three.vue b/src/views/EquipmentManager/ProcessData/Three.vue
new file mode 100644
index 0000000..1c8f9a4
--- /dev/null
+++ b/src/views/EquipmentManager/ProcessData/Three.vue
@@ -0,0 +1,112 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-06-28 15:31:00
+ * @LastEditTime: 2021-06-29 21:05:31
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \mt-bus-fe\src\views\EquipmentManager\ProcessData\Three.vue
+-->
+<template>
+  <div>
+    <el-row style="padding: 20px">
+      <el-button type="primary" icon="el-icon-arrow-left" @click="goBack">{{ 'btn.back' | i18nFilter }}</el-button>
+    </el-row>
+    <div id="main" style="width: 1000px;height: 800px;" />
+  </div>
+</template>
+
+<script>
+import echarts from 'echarts'
+export default {
+  data() {
+    return {
+      key: 11111
+    }
+  },
+  mounted() {
+    this.getData()
+  },
+  methods: {
+    async getData() {
+      var chartDom = document.getElementById('main')
+      var myChart = echarts.init(chartDom)
+      var option
+      option = {
+        title: {
+          text: '钢化炉影响因素对比图',
+          top: 10,
+          left: 10
+        },
+        tooltip: {
+          trigger: 'item',
+          backgroundColor: 'rgba(0,0,250,0.2)'
+        },
+        legend: {
+          type: 'scroll',
+          bottom: 10,
+          data: (function() {
+            var list = []
+            for (var i = 1; i < 10; i++) {
+              list.push('产品' + i)
+            }
+            return list
+          })()
+        },
+        visualMap: {
+          top: 'middle',
+          right: 10,
+          show: false,
+          color: ['red', 'blue'],
+          calculable: true
+        },
+        radar: {
+          indicator: [
+            { text: '上部温度', max: 1 },
+            { text: '下部温度', max: 1 },
+            { text: '急冷风压', max: 1 },
+            { text: '急冷时间', max: 1 },
+            { text: '冷却风压', max: 1 }
+          ]
+        },
+        series: (function() {
+          var series = []
+          for (var i = 1; i < 10; i++) {
+            series.push({
+              name: '',
+              type: 'radar',
+              symbol: 'none',
+              lineStyle: {
+                width: 1
+              },
+              emphasis: {
+                areaStyle: {
+                  color: 'rgba(0,250,0,0.3)'
+                }
+              },
+              data: [{
+                value: [
+                  (10 - i) * 0.2 * 0.5,
+                  (10 - i) * 0.11,
+                  i * 0.2 * 0.4,
+                  i / 8 * 0.5,
+                  i * 0.1
+                ],
+                name: '产品' + i
+              }]
+            })
+          }
+          return series
+        })()
+      }
+      option && myChart.setOption(option)
+    },
+    goBack() {
+      this.$router.go(-1)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/views/EquipmentManager/RecipeManager/AddForm.vue b/src/views/EquipmentManager/RecipeManager/AddForm.vue
new file mode 100644
index 0000000..3ffa7ff
--- /dev/null
+++ b/src/views/EquipmentManager/RecipeManager/AddForm.vue
@@ -0,0 +1,146 @@
+<!--
+ * @Date: 2021-02-01 16:12:13
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-04-23 16:43:32
+ * @FilePath: \basic-admin\src\views\EquipmentManager\RecipeManager\AddForm.vue
+ * @Description: 添加设备类型配方
+-->
+<template>
+  <div>
+    <el-dialog v-bind="$attrs" :title="$t('module.equipmentManager.recipe.addDialogTitle')" v-on="$listeners" @open="onOpen" @close="onClose">
+      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="150px">
+        <el-form-item :label="$t('module.equipmentManager.recipe.name')" prop="name">
+          <el-input v-model="formData.name" :placeholder="$t('module.equipmentManager.recipe.placeholdername')" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.recipe.equipmentId')" prop="equipmentId">
+          <el-select
+            v-model="formData.equipmentId"
+            :placeholder="$t('module.equipmentManager.recipe.placeholderdevice')"
+            clearable
+            filterable
+            :style="{width: '100%'}"
+          >
+            <el-option
+              v-for="(item, index) in dict.deviceId"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.recipe.code')" prop="code">
+          <el-input v-model="formData.code" :placeholder="$t('module.equipmentManager.recipe.placeholdercode')" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.recipe.description')" prop="description">
+          <el-input v-model="formData.description" :placeholder="$t('module.equipmentManager.recipe.placeholderdescription')" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.recipe.activationState')" prop="activationState" required>
+          <el-switch v-model="formData.activationState" :active-value="1" :inactive-value="0" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.recipe.enabled')" prop="enabled" required>
+          <el-switch v-model="formData.enabled" :active-value="1" :inactive-value="0" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.recipe.remark')" prop="remark">
+          <el-input v-model="formData.remark" :placeholder="$t('module.equipmentManager.recipe.placeholderremark')" clearable :style="{width: '100%'}" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="close">{{ 'btn.cancel' | i18nFilter }}</el-button>
+        <el-button type="primary" @click="handelConfirm">{{ 'btn.confirm' | i18nFilter }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { getDictDevice } from '@/api/dict'
+import { addDeviceRecipe, getDeviceRecipeCode } from '@/api/equipment/recipe'
+import i18n from '@/lang'
+export default {
+  components: {},
+  inheritAttrs: false,
+  props: [],
+  data() {
+    return {
+      formData: {
+        name: undefined,
+        equipmentId: undefined,
+        code: undefined,
+        description: undefined,
+        activationState: 0,
+        enabled: 1,
+        remark: undefined
+      },
+      rules: {
+        name: [{
+          required: true,
+          message: i18n.t('module.quality.plan.notEmpty'),
+          trigger: 'blur'
+        }],
+        equipmentId: [{
+          required: true,
+          message: i18n.t('module.quality.plan.notEmpty'),
+          trigger: 'change'
+        }],
+        code: [{
+          required: true,
+          message: i18n.t('module.quality.plan.notEmpty'),
+          trigger: 'blur'
+        }],
+        description: [{
+          required: false,
+          message: '请输入配方描述',
+          trigger: 'blur'
+        }],
+        remark: []
+      },
+      dict: {
+        deviceId: []
+      }
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {
+    this.getDict()
+  },
+  methods: {
+    async onOpen() {
+      const result = await getDeviceRecipeCode()
+      if (result.code === 0) {
+        this.formData.code = result.data
+      }
+    },
+    onClose() {
+      this.$refs['elForm'].resetFields()
+    },
+    close() {
+      this.$emit('update:visible', false)
+    },
+    handelConfirm() {
+      this.$refs['elForm'].validate(async valid => {
+        if (!valid) return
+        const result = await addDeviceRecipe(this.formData)
+        if (result.code === 0) {
+          this.$message({
+            type: 'success',
+            message: '添加成功！'
+          })
+          this.$emit('done')
+          this.close()
+        }
+      })
+    },
+    async getDict() {
+      const result = await getDictDevice({
+        current: 1,
+        size: 999
+      })
+      this.dict.deviceId = result
+    }
+  }
+}
+
+</script>
+<style>
+</style>
diff --git a/src/views/EquipmentManager/RecipeManager/EditForm.vue b/src/views/EquipmentManager/RecipeManager/EditForm.vue
new file mode 100644
index 0000000..afab47f
--- /dev/null
+++ b/src/views/EquipmentManager/RecipeManager/EditForm.vue
@@ -0,0 +1,158 @@
+<!--
+ * @Date: 2021-02-01 16:12:13
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-05-10 16:56:32
+ * @FilePath: \basic-admin\src\views\EquipmentManager\RecipeManager\EditForm.vue
+ * @Description: 编辑设备类型配方
+-->
+<template>
+  <div>
+    <el-dialog v-bind="$attrs" :title="$t('module.equipmentManager.recipe.editDialogTitle')" v-on="$listeners" @open="onOpen" @close="onClose">
+      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="150px">
+        <el-form-item :label="$t('module.equipmentManager.recipe.name')" prop="name">
+          <el-input v-model="formData.name" :placeholder="$t('module.equipmentManager.recipe.placeholdername')" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.recipe.equipmentId')" prop="equipmentId">
+          <el-select
+            v-model="formData.equipmentId"
+            :placeholder="$t('module.equipmentManager.recipe.placeholderdevice')"
+            clearable
+            filterable
+            :style="{width: '100%'}"
+          >
+            <el-option
+              v-for="(item, index) in dict.deviceId"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.recipe.code')" prop="code">
+          <el-input v-model="formData.code" :placeholder="$t('module.equipmentManager.recipe.placeholdercode')" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.recipe.description')" prop="description">
+          <el-input v-model="formData.description" :placeholder="$t('module.equipmentManager.recipe.placeholderdescription')" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.recipe.activationState')" prop="activationState" required>
+          <el-switch v-model="formData.activationState" :active-value="1" :inactive-value="0" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.recipe.enabled')" prop="enabled" required>
+          <el-switch v-model="formData.enabled" :active-value="1" :inactive-value="0" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.recipe.remark')" prop="remark">
+          <el-input v-model="formData.remark" :placeholder="$t('module.equipmentManager.recipe.placeholderremark')" clearable :style="{width: '100%'}" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="close">{{ 'btn.cancel' | i18nFilter }}</el-button>
+        <el-button type="primary" @click="handelConfirm">{{ 'btn.confirm' | i18nFilter }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { getDictDevice } from '@/api/dict'
+import { editDeviceRecipe, getDeviceRecipe } from '@/api/equipment/recipe'
+import i18n from '@/lang'
+export default {
+  components: {},
+  inheritAttrs: false,
+  props: {
+    targetInfo: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      formData: {
+        name: undefined,
+        equipmentId: undefined,
+        code: undefined,
+        description: undefined,
+        activationState: 1,
+        enabled: 1,
+        remark: undefined
+      },
+      rules: {
+        name: [{
+          required: true,
+          message: i18n.t('module.quality.plan.notEmpty'),
+          trigger: 'blur'
+        }],
+        equipmentId: [{
+          required: true,
+          message: i18n.t('module.quality.plan.notEmpty'),
+          trigger: 'change'
+        }],
+        code: [{
+          required: true,
+          message: i18n.t('module.quality.plan.notEmpty'),
+          trigger: 'blur'
+        }],
+        description: [{
+          required: false,
+          message: '请输入配方描述',
+          trigger: 'blur'
+        }],
+        remark: []
+      },
+      dict: {
+        deviceId: []
+      }
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {
+    this.getDict()
+  },
+  methods: {
+    onOpen() {
+      this.getInfo()
+    },
+    onClose() {
+      this.$refs['elForm'].resetFields()
+    },
+    close() {
+      this.$emit('update:visible', false)
+    },
+    handelConfirm() {
+      this.$refs['elForm'].validate(async valid => {
+        if (!valid) return
+        console.log(this.formData.activationState)
+        console.log(this.formData.enabled)
+        const result = await editDeviceRecipe(this.formData)
+        if (result.code === 0) {
+          this.$message({
+            type: 'success',
+            message: '修改成功！'
+          })
+          this.$emit('done')
+          this.close()
+        }
+      })
+    },
+    async getInfo() {
+      const result = await getDeviceRecipe({
+        id: this.targetInfo?.id
+      })
+      if (result.code === 0) {
+        this.formData = result.data
+      }
+    },
+    async getDict() {
+      const result = await getDictDevice({
+        current: 1,
+        size: 999
+      })
+      this.dict.deviceId = result
+    }
+  }
+}
+
+</script>
+<style>
+</style>
diff --git a/src/views/EquipmentManager/RecipeManager/index.vue b/src/views/EquipmentManager/RecipeManager/index.vue
new file mode 100644
index 0000000..252a345
--- /dev/null
+++ b/src/views/EquipmentManager/RecipeManager/index.vue
@@ -0,0 +1,203 @@
+<!--
+ * @Date: 2020-12-15 15:36:52
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-04-23 16:39:27
+ * @FilePath: \basic-admin\src\views\EquipmentManager\RecipeManager\index.vue
+ * @Description:
+-->
+<template>
+  <div class="usermanager-container">
+    <div class="method-btn-area">
+      <el-input v-model="listQuery.equipmentRecipeName" clearable :placeholder="$t('module.equipmentManager.recipe.searchPlaceholder')" style="width: 200px;" />
+      <el-select v-model="listQuery.equipmentId" :placeholder="$t('module.equipmentManager.recipe.deviceselect')" filterable clearable style="width: 200px;">
+        <el-option
+          v-for="(item, index) in dict.deviceId"
+          :key="'device-' + index"
+          :label="item.name"
+          :value="item.id"
+        />
+      </el-select>
+      <el-button @click="getList">{{ 'btn.search' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="showDialog = true">{{ 'btn.add' | i18nFilter }}</el-button>
+    </div>
+    <base-table :table-config="tableProps" :table-data="list" :is-loading="listLoading" :page="listQuery.current" :limit="listQuery.size">
+      <method-btn slot="handleBtn" :method-list="tableBtn" @clickBtn="handleClick" />
+    </base-table>
+    <pagination :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.size" @pagination="getList" />
+    <add-form :visible.sync="showDialog" @done="getList" />
+    <edit-form :visible.sync="showEditDialog" :target-info="{id: curEditId}" @done="getList" />
+  </div>
+</template>
+
+<script>
+import dataDict from '@/filters/DataDict'
+// edit here
+const tableBtn = [{
+  type: 'edit',
+  btnName: 'btn.edit'
+}, {
+  type: 'delete',
+  btnName: 'btn.delete'
+}, {
+  type: 'detail',
+  btnName: 'btn.detail'
+}]
+const tableProps = [{
+  prop: 'equipmentId',
+  label: i18n.t('module.equipmentManager.recipe.equipmentId'),
+  align: 'center',
+  subcomponent: DictFilter,
+  filter: getDictDevice
+}, {
+  prop: 'name',
+  label: i18n.t('module.equipmentManager.recipe.name'),
+  align: 'center'
+}, {
+  prop: 'code',
+  label: i18n.t('module.equipmentManager.recipe.code'),
+  align: 'center'
+}, {
+  prop: 'activationState',
+  label: i18n.t('module.equipmentManager.recipe.activationState'),
+  align: 'center',
+  filter: dataDict('enableState')
+},
+// {
+//   prop: 'enabled',
+//   label: i18n.t('module.equipmentManager.recipe.enabled'),
+//   align: 'center',
+//   filter: dataDict('enableState')
+// },
+{
+  prop: 'remark',
+  label: i18n.t('module.equipmentManager.recipe.remark'),
+  align: 'center'
+}]
+import AddForm from './AddForm'
+import EditForm from './EditForm'
+import BaseTable from '@/components/BaseTable'
+import { objFilter } from '@/utils'
+import { getDictDevice } from '@/api/dict'
+// edit here
+import { getDeviceRecipeList, delDeviceRecipe } from '@/api/equipment/recipe'
+import DictFilter from '@/components/BaseTable/subcomponents/DataDictFilter'
+import Pagination from '@/components/Pagination'
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import i18n from '@/lang'
+export default {
+  name: 'OrgManager',
+  components: { Pagination, BaseTable, MethodBtn, AddForm, EditForm },
+  props: {},
+  data() {
+    return {
+      tableBtn,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      showDialog: false,
+      curEditId: null,
+      showEditDialog: false,
+      listQuery: {
+        current: 1,
+        size: 10,
+        equipmentId: null,
+        equipmentRecipeName: ''
+      },
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      },
+      dict: {
+        deviceId: []
+      }
+    }
+  },
+  created() {
+    this.getDict()
+    // this.listLoading = false
+  },
+  mounted() {},
+  methods: {
+    handleNodeClick() {},
+    handleClick(raw) {
+      console.log(raw)
+      switch (raw.type) {
+        case 'delete':
+          this.$confirm(i18n.t('deleteMsgBox.content'), i18n.t('deleteMsgBox.hint'), {
+            confirmButtonText: i18n.t('btn.confirm'),
+            cancelButtonText: i18n.t('btn.cancel'),
+            type: 'warning'
+          }).then(async() => {
+            // 走接口
+            const result = await delDeviceRecipe({
+              id: raw.data.id
+            })
+            if (result.code === 0) {
+              this.$message({
+                type: 'success',
+                message: i18n.t('deleteMsgBox.doneMsg')
+              })
+              this.getList()
+            }
+          })
+          break
+        case 'edit':
+          this.showEditDialog = true
+          this.curEditId = raw.data.id
+          break
+        case 'detail':
+          this.$router.push({
+            name: 'RecipeParamManage',
+            query: {
+              id: raw.data.id
+            }
+          })
+          break
+      }
+    },
+    async getList() {
+      this.listLoading = true
+      // edit here
+      const res = await getDeviceRecipeList(objFilter(this.listQuery))
+      if (res.code === 0) {
+        this.list = res.data
+        // this.total = res.data.total
+        this.listLoading = false
+      }
+    },
+    async getDict() {
+      const result = await getDictDevice({
+        current: 1,
+        size: 999
+      })
+      this.dict.deviceId = result
+      this.getList()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.usermanager-container {
+  padding: 20px;
+  .method-btn-area {
+    padding: 15px 30px;
+    margin: 10px 0 20px 0;
+    border: 1px solid #dfe6ec;
+  }
+  .tree-select-container {
+    border: 1px solid #dfe6ec;
+    min-height: 400px;
+    padding: 20px;
+  }
+}
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/EquipmentManager/RecipeManager/subpage/AddForm.vue b/src/views/EquipmentManager/RecipeManager/subpage/AddForm.vue
new file mode 100644
index 0000000..7b60b1f
--- /dev/null
+++ b/src/views/EquipmentManager/RecipeManager/subpage/AddForm.vue
@@ -0,0 +1,118 @@
+<!--
+ * @Date: 2021-01-09 16:25:11
+ * @LastEditors: guo
+ * @LastEditTime: 2021-03-20 15:46:42
+ * @FilePath: \basic-admin\src\views\EquipmentManager\RecipeManager\subpage\AddForm.vue
+ * @Description: 设备配方添加参数
+-->
+<template>
+  <div>
+    <el-dialog v-bind="$attrs" :title="$t('module.equipmentManager.recipeDetail.addDialogTitle')" v-on="$listeners" @open="onOpen" @close="onClose">
+      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="150px">
+        <el-form-item :label="$t('module.equipmentManager.recipeDetail.recipeParam')" prop="equipmentParameterId">
+          <el-select
+            v-model="formData.equipmentParameterId"
+            :placeholder="$t('module.equipmentManager.recipeDetail.placeholderrecipeParam')"
+            clearable
+            :style="{width: '100%'}"
+          >
+            <el-option
+              v-for="(item, index) in dict.param"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.recipeDetail.paramValue')" prop="paramValue">
+          <el-input v-model="formData.paramValue" :placeholder="$t('module.equipmentManager.recipeDetail.placeholderparamValue')" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.recipeDetail.remark')" prop="remark">
+          <el-input v-model="formData.remark" :placeholder="$t('module.equipmentManager.recipeDetail.placeholderremark')" clearable :style="{width: '100%'}" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="close">{{ 'btn.cancel' | i18nFilter }}</el-button>
+        <el-button type="primary" @click="handelConfirm">{{ 'btn.confirm' | i18nFilter }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { addDeviceRecipeParam } from '@/api/equipment/recipe'
+import { equipmentTypeParam } from '@/api/dict'
+import i18n from '@/lang'
+export default {
+  components: {},
+  inheritAttrs: false,
+  props: {
+    targetInfo: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      formData: {
+        equipmentParameterId: undefined,
+        equipmentRecipeId: null,
+        paramValue: undefined,
+        remark: undefined
+      },
+      rules: {
+        equipmentParameterId: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.recipeDetail.placeholderrecipeParam'),
+          trigger: 'change'
+        }],
+        paramValue: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.recipeDetail.placeholderparamValue'),
+          trigger: 'blur'
+        }],
+        remark: []
+      },
+      dict: {
+        param: []
+      }
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {
+    onOpen() {
+      this.formData.equipmentRecipeId = this.targetInfo?.id
+      this.getDict(this.targetInfo?.equipmentType)
+    },
+    onClose() {
+      this.$refs['elForm'].resetFields()
+    },
+    close() {
+      this.$emit('update:visible', false)
+    },
+    handelConfirm() {
+      this.$refs['elForm'].validate(async valid => {
+        if (!valid) return
+        const result = await addDeviceRecipeParam(this.formData)
+        if (result.code === 0) {
+          this.$message({
+            type: 'success',
+            message: '添加成功！'
+          })
+          this.$emit('done')
+          this.close()
+        }
+      })
+    },
+    async getDict(id) {
+      const result = await equipmentTypeParam(id)
+      this.dict.param = result
+    }
+  }
+}
+
+</script>
+<style>
+</style>
diff --git a/src/views/EquipmentManager/RecipeManager/subpage/EditForm.vue b/src/views/EquipmentManager/RecipeManager/subpage/EditForm.vue
new file mode 100644
index 0000000..9034ed4
--- /dev/null
+++ b/src/views/EquipmentManager/RecipeManager/subpage/EditForm.vue
@@ -0,0 +1,127 @@
+<!--
+ * @Date: 2021-01-09 16:25:11
+ * @LastEditors: guo
+ * @LastEditTime: 2021-03-20 15:56:09
+ * @FilePath: \basic-admin\src\views\EquipmentManager\RecipeManager\subpage\EditForm.vue
+ * @Description: 设备配方添加参数
+-->
+<template>
+  <div>
+    <el-dialog v-bind="$attrs" :title="$t('module.equipmentManager.recipeDetail.editDialogTitle')" v-on="$listeners" @open="onOpen" @close="onClose">
+      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="120px">
+        <el-form-item :label="$t('module.equipmentManager.recipeDetail.recipeParam')" prop="equipmentParameterId">
+          <el-select
+            v-model="formData.equipmentParameterId"
+            :placeholder="$t('module.equipmentManager.recipeDetail.placeholderrecipeParam')"
+            clearable
+            :style="{width: '100%'}"
+          >
+            <el-option
+              v-for="(item, index) in dict.param"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.recipeDetail.paramValue')" prop="paramValue">
+          <el-input v-model="formData.paramValue" :placeholder="$t('module.equipmentManager.recipeDetail.placeholderparamValue')" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.recipeDetail.remark')" prop="remark">
+          <el-input v-model="formData.remark" :placeholder="$t('module.equipmentManager.recipeDetail.placeholderremark')" clearable :style="{width: '100%'}" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="close">{{ 'btn.cancel' | i18nFilter }}</el-button>
+        <el-button type="primary" @click="handelConfirm">{{ 'btn.confirm' | i18nFilter }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { editDeviceRecipeParam, getDeviceRecipeParam } from '@/api/equipment/recipe'
+import { equipmentTypeParam } from '@/api/dict'
+import i18n from '@/lang'
+export default {
+  components: {},
+  inheritAttrs: false,
+  props: {
+    targetInfo: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      formData: {
+        equipmentParameterId: undefined,
+        equipmentRecipeId: null,
+        paramValue: undefined,
+        remark: undefined
+      },
+      rules: {
+        equipmentParameterId: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.recipeDetail.placeholderrecipeParam'),
+          trigger: 'change'
+        }],
+        paramValue: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.recipeDetail.placeholderparamValue'),
+          trigger: 'blur'
+        }],
+        remark: []
+      },
+      dict: {
+        param: []
+      }
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {
+    onOpen() {
+      // this.formData.equipmentRecipeId = this.targetInfo?.id
+      this.getInfo()
+      this.getDict(this.targetInfo?.equipmentType)
+    },
+    onClose() {
+      this.$refs['elForm'].resetFields()
+    },
+    close() {
+      this.$emit('update:visible', false)
+    },
+    handelConfirm() {
+      this.$refs['elForm'].validate(async valid => {
+        if (!valid) return
+        const result = await editDeviceRecipeParam(this.formData)
+        if (result.code === 0) {
+          this.$message({
+            type: 'success',
+            message: '添加成功！'
+          })
+          this.$emit('done')
+          this.close()
+        }
+      })
+    },
+    async getDict(id) {
+      const result = await equipmentTypeParam(id)
+      this.dict.param = result
+    },
+    async getInfo() {
+      const result = await getDeviceRecipeParam({
+        id: this.targetInfo?.id
+      })
+      if (result.code === 0) {
+        this.formData = result.data
+      }
+    }
+  }
+}
+
+</script>
+<style>
+</style>
diff --git a/src/views/EquipmentManager/RecipeManager/subpage/detail.vue b/src/views/EquipmentManager/RecipeManager/subpage/detail.vue
new file mode 100644
index 0000000..0cb6055
--- /dev/null
+++ b/src/views/EquipmentManager/RecipeManager/subpage/detail.vue
@@ -0,0 +1,269 @@
+<!--
+ * @Date: 2020-12-15 15:36:52
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-04-23 16:45:56
+ * @FilePath: \basic-admin\src\views\EquipmentManager\RecipeManager\subpage\detail.vue
+ * @Description:
+-->
+<template>
+  <div class="bom-form-container">
+    <div class="method-btn-area">
+      <el-button type="primary" plain icon="el-icon-arrow-left" @click="turnBack">{{ 'btn.back' | i18nFilter }}</el-button>
+    </div>
+    <el-form ref="elForm" :model="formData" size="medium" label-width="150px">
+      <el-form-item :label="$t('module.equipmentManager.recipe.equipmentId')" prop="equipmentId">
+        <el-select
+          v-model="formData.equipmentId"
+          :placeholder="$t('module.equipmentManager.recipe.placeholderdevice')"
+          clearable
+          disabled
+          filterable
+          :style="{width: '100%'}"
+        >
+          <el-option
+            v-for="(item, index) in dict.deviceId"
+            :key="index"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="$t('module.equipmentManager.recipe.code')" prop="code">
+        <el-input v-model="formData.code" :style="{width: '100%'}" :disabled="pagetype" />
+      </el-form-item>
+      <el-form-item :label="$t('module.equipmentManager.recipe.name')" prop="name">
+        <el-input v-model="formData.name" :style="{width: '100%'}" :disabled="pagetype" />
+      </el-form-item>
+      <el-form-item :label="$t('module.equipmentManager.recipe.description')" prop="description">
+        <el-input v-model="formData.description" :style="{width: '100%'}" :disabled="pagetype" />
+      </el-form-item>
+      <el-form-item :label="$t('module.equipmentManager.recipe.activationState')" prop="activationState" required>
+        <el-switch v-model="formData.activationState" :disabled="pagetype" :active-value="1" :inactive-value="0" />
+      </el-form-item>
+      <el-form-item :label="$t('module.equipmentManager.recipe.enabled')" prop="enabled" required>
+        <el-switch v-model="formData.enabled" :disabled="pagetype" :active-value="1" :inactive-value="0" />
+      </el-form-item>
+      <el-form-item :label="$t('module.equipmentManager.recipe.remark')" prop="remark">
+        <el-input v-model="formData.remark" :style="{width: '100%'}" :disabled="pagetype" />
+      </el-form-item>
+    </el-form>
+    <!-- <div class="sub-table-container">
+      <el-divider>{{ $t('module.equipmentManager.recipeDetail.title') }}</el-divider>
+      <div class="method-btn-area">
+        <el-button type="primary" style="float: right;margin: 0 20px;" @click="showDialog = true">{{ 'btn.add' | i18nFilter }}</el-button>
+      </div>
+      <base-table :table-config="tableProps" :table-data="list" :is-loading="listLoading" :page="listQuery.current" :limit="listQuery.size">
+        <method-btn slot="handleBtn" :method-list="tableBtn" @clickBtn="handleClick" />
+      </base-table>
+    </div> -->
+    <!-- <pagination :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.size" @pagination="getList" /> -->
+    <!-- <add-form :visible.sync="showDialog" :target-info="{id: listQuery.equipmentRecipeId, equipmentType: formData.equipmentType }" @done="getList" />
+    <edit-form :visible.sync="showEditDialog" :target-info="{id: curEditId, fatherId: listQuery.equipmentRecipeId, equipmentType: formData.equipmentType}" @done="getList" /> -->
+  </div>
+</template>
+
+<script>
+// import CheckDetail from '@/components/BaseTable/subcomponents/CheckDetail'
+// import dataDict from '@/filters/DataDict'
+// edit here
+const tableBtn = [{
+  type: 'edit',
+  btnName: 'btn.edit'
+}, {
+  type: 'delete',
+  btnName: 'btn.delete'
+}]
+const tableProps = [{
+  prop: 'paramCode',
+  label: i18n.t('module.equipmentManager.recipeDetail.paramCode'),
+  align: 'center'
+}, {
+  prop: 'paramName',
+  label: i18n.t('module.equipmentManager.recipeDetail.paramName'),
+  align: 'center'
+}, {
+  prop: 'type',
+  label: i18n.t('module.equipmentManager.recipeDetail.type'),
+  align: 'center'
+}, {
+  prop: 'minValue',
+  label: i18n.t('module.equipmentManager.recipeDetail.minValue'),
+  align: 'center'
+}, {
+  prop: 'maxValue',
+  label: i18n.t('module.equipmentManager.recipeDetail.maxValue'),
+  align: 'center'
+}, {
+  prop: 'defaultValue',
+  label: i18n.t('module.equipmentManager.recipeDetail.defaultValue'),
+  align: 'center'
+}, {
+  prop: 'unit',
+  label: i18n.t('module.equipmentManager.recipeDetail.unit'),
+  align: 'center'
+}, {
+  prop: 'remark',
+  label: i18n.t('module.equipmentManager.recipeDetail.remark'),
+  align: 'center'
+}]
+// import AddForm from './AddForm'
+// import EditForm from './EditForm'
+// import BaseTable from '@/components/BaseTable'
+// import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+// edit here
+// import { objFilter } from '@/utils'
+import { getDictDevice } from '@/api/dict'
+import { getDeviceRecipeParamList, getDeviceRecipe, delDeviceRecipeParam } from '@/api/equipment/recipe'
+// import { dictChange } from '@/utils'
+// import Pagination from '@/components/Pagination'
+import i18n from '@/lang'
+export default {
+  name: 'BOMForm',
+  // components: { Pagination, BaseTable, MethodBtn, AddForm, EditForm },
+  props: {},
+  data() {
+    return {
+      tableBtn,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      showDialog: false,
+      curEditId: null,
+      showEditDialog: false,
+      listQuery: {
+        enabled: 1,
+        equipmentRecipeId: null,
+        current: 1,
+        size: 10
+      },
+      formData: {
+        equipmentCode: undefined,
+        equipmentName: undefined,
+        code: undefined,
+        name: undefined,
+        enabled: 1,
+        remark: undefined
+      },
+      dict: {
+        deviceId: {}
+      }
+    }
+  },
+  computed: {
+    pagetype() {
+      return true
+      // return false
+    },
+    typeName() {
+      if (this.dict.equipmentTypeTable) {
+        return this.dict.equipmentTypeTable[this.formData.equipmentType]
+      } else {
+        return this.formData.equipmentType
+      }
+    }
+  },
+  created() {
+    console.log(this.$route.query)
+    this.listQuery.equipmentRecipeId = this.$route.query.id
+    this.getDict()
+    this.getDetail()
+    this.getList()
+    // this.listLoading = false
+  },
+  mounted() {},
+  methods: {
+    handleClick(raw) {
+      console.log(raw)
+      switch (raw.type) {
+        case 'delete':
+          this.$confirm(i18n.t('deleteMsgBox.content'), i18n.t('deleteMsgBox.hint'), {
+            confirmButtonText: i18n.t('btn.confirm'),
+            cancelButtonText: i18n.t('btn.cancel'),
+            type: 'warning'
+          }).then(async() => {
+            // 走接口
+            const result = await delDeviceRecipeParam({
+              id: raw.data.id
+            })
+            if (result.code === 0) {
+              this.$message({
+                type: 'success',
+                message: i18n.t('deleteMsgBox.doneMsg')
+              })
+              this.getList()
+            }
+          })
+          break
+        case 'edit':
+          this.showEditDialog = true
+          this.curEditId = raw.data.id
+          break
+      }
+    },
+    async getList() {
+      this.listLoading = true
+      // edit here
+      const res = await getDeviceRecipeParamList(this.listQuery)
+      if (res.code === 0) {
+        this.list = res.data.records ? res.data.records : []
+        this.total = res.data.total
+        this.listLoading = false
+      }
+    },
+    async getDetail() {
+      const result = await getDeviceRecipe({
+        id: this.listQuery.equipmentRecipeId
+      })
+      if (result.code === 0) {
+        this.formData = result.data
+        // console.log(result)
+      }
+    },
+    submitForm() {
+      this.$refs['elForm'].validate(valid => {
+        if (!valid) return
+        // TODO 提交表单
+      })
+    },
+    resetForm() {
+      this.$refs['elForm'].resetFields()
+    },
+    saveForm() {},
+    async getDict() {
+      const result = await getDictDevice({
+        current: 1,
+        size: 999
+      })
+      this.dict.deviceId = result
+    },
+    turnBack() {
+      this.$router.go(-1)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/styles/mixin.scss";
+.bom-form-container {
+  padding: 20px;
+  .method-btn-area {
+    padding: 15px 30px;
+    margin: 10px 0 20px 0;
+    border: 1px solid #dfe6ec;
+    @include clearfix;
+  }
+  .sub-table-container {
+    margin-top: 80px;
+  }
+}
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/EquipmentManager/RepairManager/AddRepair.vue b/src/views/EquipmentManager/RepairManager/AddRepair.vue
new file mode 100644
index 0000000..5f90d33
--- /dev/null
+++ b/src/views/EquipmentManager/RepairManager/AddRepair.vue
@@ -0,0 +1,393 @@
+<template>
+  <div>
+    <el-row :gutter="15" class="page-form-container">
+      <div class="method-btn-area">
+        <el-button type="primary" plain icon="el-icon-arrow-left" @click="turnBack">{{ 'btn.back' | i18nFilter }}</el-button>
+      </div>
+      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="200px">
+        <el-col :span="12">
+          <el-form-item :label="$t('module.equipmentManager.repair.repairOrderNumber')" prop="repairOrderNumber">
+            <el-input
+              v-model="formData.repairOrderNumber"
+              :placeholder="$t('module.equipmentManager.repair.placeholderrepairOrderNumber')"
+              clearable
+              :style="{width: '100%'}"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('module.equipmentManager.repair.equipmentId')" prop="equipmentId">
+            <el-select
+              v-model="formData.equipmentId"
+              :placeholder="$t('module.equipmentManager.repair.placeholderequipmentId')"
+              clearable
+              :style="{width: '100%'}"
+            >
+              <el-option
+                v-for="(item, index) in dict.device"
+                :key="index"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('module.equipmentManager.repair.maintenanceWorker')" prop="maintenanceWorker">
+            <el-select
+              v-model="maintenanceWorker"
+              :placeholder="$t('module.equipmentManager.repair.placeholdermaintenanceWorker')"
+              clearable
+              multiple
+              :style="{width: '100%'}"
+              @change="changeWorker"
+            >
+              <el-option
+                v-for="(item, index) in dict.worker"
+                :key="index"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('module.equipmentManager.repair.workerContactInformation')" prop="workerContactInformation">
+            <el-input
+              v-model="formData.workerContactInformation"
+              :placeholder="$t('module.equipmentManager.repair.placeholderworkerContactInformation')"
+              clearable
+              disabled
+              :style="{width: '100%'}"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('module.equipmentManager.repair.maintenanceStatus')" prop="maintenanceStatus">
+            <el-select
+              v-model="formData.maintenanceStatus"
+              :placeholder="$t('module.equipmentManager.repair.placeholdermaintenanceStatus')"
+              clearable
+              :style="{width: '100%'}"
+            >
+              <el-option
+                :label="$t('module.equipmentManager.repair.maintenanceStatusNo')"
+                :value="0"
+              />
+              <el-option
+                :label="$t('module.equipmentManager.repair.maintenanceStatusYes')"
+                :value="1"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('module.equipmentManager.repair.equipmentPosition')" prop="equipmentPosition">
+            <el-input v-model="formData.equipmentPosition" :placeholder="$t('module.equipmentManager.repair.placeholderequipmentPosition')" clearable :style="{width: '100%'}" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('module.equipmentManager.repair.timeOfFailure')" prop="timeOfFailure">
+            <el-date-picker
+              v-model="formData.timeOfFailure"
+              format="yyyy-MM-dd"
+              value-format="yyyy-MM-ddTHH:mm:ss"
+              :style="{width: '100%'}"
+              :placeholder="$t('module.equipmentManager.repair.placeholdertimeOfFailure')"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('module.equipmentManager.repair.faultLevel')" prop="faultLevel">
+            <el-select v-model="formData.faultLevel" :placeholder="$t('module.equipmentManager.repair.placeholderfaultLevel')" clearable :style="{width: '100%'}">
+              <el-option
+                v-for="(item, index) in dict.faultLevel"
+                :key="index"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-row>
+            <el-col :span="12">
+              <el-form-item :label="$t('module.equipmentManager.repair.timerange')" prop="maintenanceStartTime">
+                <el-date-picker
+                  v-model="dateRange"
+                  type="datetimerange"
+                  :style="{width: '100%'}"
+                  :start-placeholder="$t('module.equipmentManager.repair.startDate')"
+                  :end-placeholder="$t('module.equipmentManager.repair.endDate')"
+                  clearable
+                  @change="dateChange"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item :label="$t('module.equipmentManager.repair.repairMode')" prop="repairMode">
+                <el-select
+                  v-model="formData.repairMode"
+                  :placeholder="$t('module.equipmentManager.repair.placeholderrepairMode')"
+                  clearable
+                  :style="{width: '100%'}"
+                >
+                  <el-option
+                    v-for="(item, index) in dict.repairType"
+                    :key="index"
+                    :label="item.name"
+                    :value="item.id"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item :label="$t('module.equipmentManager.repair.faultDetail')" prop="faultDetail">
+            <el-input
+              v-model="formData.faultDetail"
+              type="textarea"
+              :placeholder="$t('module.equipmentManager.repair.placeholderfaultDetail')"
+              :autosize="{minRows: 4, maxRows: 4}"
+              :maxlength="200"
+              :style="{width: '100%'}"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item :label="$t('module.equipmentManager.repair.maintenanceDetail')" prop="maintenanceDetail">
+            <el-input
+              v-model="formData.maintenanceDetail"
+              type="textarea"
+              :placeholder="$t('module.equipmentManager.repair.placeholdermaintenanceDetail')"
+              :autosize="{minRows: 4, maxRows: 4}"
+              :maxlength="200"
+              :style="{width: '100%'}"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item :label="$t('module.equipmentManager.repair.annex')" prop="annex">
+            <single-file :file-id="formData.annex" @done="uploadSuccess" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item :label="$t('module.equipmentManager.repair.repairTools')" prop="repairTools">
+            <el-input v-model="formData.repairTools" :placeholder="$t('module.equipmentManager.repair.placeholderrepairTools')" clearable :style="{width: '100%'}" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item :label="$t('module.equipmentManager.repair.remark')" prop="remark">
+            <el-input v-model="formData.remark" :placeholder="$t('module.equipmentManager.repair.placeholderremark')" clearable :style="{width: '100%'}" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item size="large">
+            <el-button type="primary" @click="submitForm">{{ 'btn.submit' | i18nFilter }}</el-button>
+            <el-button @click="resetForm">{{ 'btn.reset' | i18nFilter }}</el-button>
+          </el-form-item>
+        </el-col>
+      </el-form>
+    </el-row>
+  </div>
+</template>
+<script>
+import { uploadPath } from '@/api/basic'
+import { addRepairInfo, getCode } from '@/api/equipment/repair'
+import { getDictDevice, getDictRepairType, getDictWorker, faultLevelList } from '@/api/dict'
+import SingleFile from '@/components/Upload/SingleFile'
+import i18n from '@/lang'
+export default {
+  components: {
+    SingleFile
+  },
+  props: [],
+  data() {
+    return {
+      formData: {
+        repairOrderNumber: undefined,
+        equipmentId: undefined,
+        maintenanceWorker: undefined,
+        maintenanceStatus: undefined,
+        equipmentPosition: undefined,
+        workerContactInformation: undefined,
+        timeOfFailure: undefined,
+        faultLevel: undefined,
+        maintenanceStartTime: null,
+        maintenanceFinishTime: null,
+        repairMode: undefined,
+        faultDetail: undefined,
+        maintenanceDetail: undefined,
+        annex: '',
+        repairTools: undefined,
+        remark: undefined
+      },
+      maintenanceWorker: [],
+      dateRange: null,
+      rules: {
+        repairOrderNumber: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.repair.placeholderrepairOrderNumber'),
+          trigger: 'blur'
+        }],
+        equipmentId: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.repair.placeholderequipmentId'),
+          trigger: 'change'
+        }],
+        maintenanceWorker: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.repair.placeholdermaintenanceWorker'),
+          trigger: 'blur'
+        }],
+        maintenanceStatus: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.repair.placeholdermaintenanceStatus'),
+          trigger: 'blur'
+        }],
+        equipmentPosition: [{
+          required: false,
+          message: i18n.t('module.equipmentManager.repair.placeholderequipmentPosition'),
+          trigger: 'blur'
+        }],
+        workerContactInformation: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.repair.placeholderworkerContactInformation'),
+          trigger: 'blur'
+        }],
+        timeOfFailure: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.repair.placeholdertimeOfFailure'),
+          trigger: 'change'
+        }],
+        faultLevel: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.repair.placeholderfaultLevel'),
+          trigger: 'change'
+        }],
+        repairMode: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.repair.placeholderrepairMode'),
+          trigger: 'change'
+        }],
+        faultDetail: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.repair.placeholderfaultDetail'),
+          trigger: 'blur'
+        }],
+        maintenanceDetail: [{
+          required: false,
+          message: i18n.t('module.equipmentManager.repair.placeholdermaintenanceDetail'),
+          trigger: 'blur'
+        }],
+        remark: [{
+          required: false,
+          message: i18n.t('module.equipmentManager.repair.placeholderremark'),
+          trigger: 'blur'
+        }]
+      },
+      annexAction: uploadPath,
+      annexfileList: [],
+      dict: {
+        device: [],
+        repairType: [],
+        worker: [],
+        faultLevel: []
+      },
+      workerPhone: {}
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {
+    this.getDict()
+  },
+  methods: {
+    uploadSuccess(id) {
+      console.log(id)
+      this.formData.annex = id
+    },
+    changeWorker(v) {
+      this.formData.maintenanceWorker = this.maintenanceWorker.join(',')
+      this.formData.workerContactInformation = this.maintenanceWorker.map(item => {
+        return this.workerPhone[item.id]
+      }).join(',')
+    },
+    dateChange(date) {
+      console.log(date)
+      this.formData.maintenanceStartTime = date[0]
+      this.formData.maintenanceFinishTime = date[1]
+    },
+    submitForm() {
+      this.$refs['elForm'].validate(async valid => {
+        if (!valid) return
+        // TODO 提交表单
+        const result = await addRepairInfo(this.formData)
+        if (result.code === 0) {
+          this.$message({
+            type: 'success',
+            message: '添加成功！'
+          })
+          this.$router.go(-1)
+        }
+      })
+    },
+    resetForm() {
+      this.$refs['elForm'].resetFields()
+      this.dateRange = null
+      this.maintenanceWorker = []
+      this.formData.maintenanceStartTime = null
+      this.formData.maintenanceFinishTime = null
+    },
+    annexBeforeUpload(file) {
+      const isRightSize = file.size / 1024 / 1024 < 10
+      if (!isRightSize) {
+        this.$message.error('文件大小超过 10MB')
+      }
+      return isRightSize
+    },
+    async getDict() {
+      const result = await getDictDevice({
+        current: 1,
+        size: 999
+      })
+      this.dict.device = result
+      const result2 = await getDictRepairType()
+      this.dict.repairType = result2
+      const result3 = await getDictWorker()
+      this.dict.worker = result3
+      result3.map(item => {
+        this.workerPhone[item.id] = item.telephone
+      })
+      const result4 = await faultLevelList()
+      this.dict.faultLevel = result4
+      const result5 = await getCode()
+      this.formData.repairOrderNumber = result5.data
+    },
+    turnBack() {
+      this.$router.go(-1)
+    }
+  }
+}
+
+</script>
+<style lang="scss">
+.page-form-container {
+  padding: 20px;
+  .method-btn-area {
+    padding: 15px 30px;
+    margin: 10px 0 20px 0;
+    border: 1px solid #dfe6ec;
+  }
+}
+.form-container {
+  padding-top: 40px;
+}
+.el-upload__tip {
+  line-height: 1.2;
+}
+
+</style>
diff --git a/src/views/EquipmentManager/RepairManager/EditRepair.vue b/src/views/EquipmentManager/RepairManager/EditRepair.vue
new file mode 100644
index 0000000..993128b
--- /dev/null
+++ b/src/views/EquipmentManager/RepairManager/EditRepair.vue
@@ -0,0 +1,416 @@
+<template>
+  <div>
+    <el-row :gutter="15" class="page-form-container">
+      <div class="method-btn-area">
+        <el-button type="primary" plain icon="el-icon-arrow-left" @click="turnBack">{{ 'btn.back' | i18nFilter }}</el-button>
+      </div>
+      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="200px">
+        <el-col :span="12">
+          <el-form-item :label="$t('module.equipmentManager.repair.repairOrderNumber')" prop="repairOrderNumber">
+            <el-input
+              v-model="formData.repairOrderNumber"
+              :placeholder="$t('module.equipmentManager.repair.placeholderrepairOrderNumber')"
+              clearable
+              :style="{width: '100%'}"
+              :disabled="readonly"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('module.equipmentManager.repair.equipmentId')" prop="equipmentId">
+            <el-select
+              v-model="formData.equipmentId"
+              :placeholder="$t('module.equipmentManager.repair.placeholderequipmentId')"
+              clearable
+              :style="{width: '100%'}"
+              :disabled="readonly"
+            >
+              <el-option
+                v-for="(item, index) in dict.device"
+                :key="index"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('module.equipmentManager.repair.maintenanceWorker')" prop="maintenanceWorker">
+            <el-select
+              v-model="maintenanceWorker"
+              :placeholder="$t('module.equipmentManager.repair.placeholdermaintenanceWorker')"
+              clearable
+              multiple
+              :disabled="readonly"
+              :style="{width: '100%'}"
+              @change="changeWorker"
+            >
+              <el-option
+                v-for="(item, index) in dict.worker"
+                :key="index"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('module.equipmentManager.repair.workerContactInformation')" prop="workerContactInformation">
+            <el-input
+              v-model="formData.workerContactInformation"
+              :placeholder="$t('module.equipmentManager.repair.placeholderworkerContactInformation')"
+              clearable
+              :style="{width: '100%'}"
+              disabled
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('module.equipmentManager.repair.maintenanceStatus')" prop="maintenanceStatus">
+            <el-select
+              v-model="formData.maintenanceStatus"
+              :placeholder="$t('module.equipmentManager.repair.placeholdermaintenanceStatus')"
+              clearable
+              :disabled="readonly"
+              :style="{width: '100%'}"
+            >
+              <el-option
+                :label="$t('module.equipmentManager.repair.maintenanceStatusNo')"
+                :value="0"
+              />
+              <el-option
+                :label="$t('module.equipmentManager.repair.maintenanceStatusYes')"
+                :value="1"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('module.equipmentManager.repair.equipmentPosition')" prop="equipmentPosition">
+            <el-input v-model="formData.equipmentPosition" :placeholder="$t('module.equipmentManager.repair.placeholderequipmentPosition')" clearable :style="{width: '100%'}" :disabled="readonly" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('module.equipmentManager.repair.timeOfFailure')" prop="timeOfFailure">
+            <el-date-picker
+              v-model="formData.timeOfFailure"
+              format="yyyy-MM-dd"
+              :style="{width: '100%'}"
+              :placeholder="$t('module.equipmentManager.repair.placeholdertimeOfFailure')"
+              clearable
+              :disabled="readonly"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('module.equipmentManager.repair.faultLevel')" prop="faultLevel">
+            <el-select v-model="formData.faultLevel" :placeholder="$t('module.equipmentManager.repair.placeholderfaultLevel')" clearable :style="{width: '100%'}" :disabled="readonly">
+              <el-option
+                v-for="(item, index) in dict.faultLevel"
+                :key="index"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-row>
+            <el-col :span="12">
+              <el-form-item :label="$t('module.equipmentManager.repair.timerange')" prop="maintenanceStartTime">
+                <el-date-picker
+                  v-model="dateRange"
+                  type="datetimerange"
+                  :style="{width: '100%'}"
+                  :start-placeholder="$t('module.equipmentManager.repair.startDate')"
+                  :end-placeholder="$t('module.equipmentManager.repair.endDate')"
+                  clearable
+                  :disabled="readonly"
+                  @change="dateChange"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item :label="$t('module.equipmentManager.repair.repairMode')" prop="repairMode">
+                <el-select
+                  v-model="formData.repairMode"
+                  :placeholder="$t('module.equipmentManager.repair.placeholderrepairMode')"
+                  clearable
+                  :style="{width: '100%'}"
+                  :disabled="readonly"
+                >
+                  <el-option
+                    v-for="(item, index) in dict.repairType"
+                    :key="index"
+                    :label="item.name"
+                    :value="item.id"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item :label="$t('module.equipmentManager.repair.faultDetail')" prop="faultDetail">
+            <el-input
+              v-model="formData.faultDetail"
+              type="textarea"
+              :placeholder="$t('module.equipmentManager.repair.placeholderfaultDetail')"
+              :autosize="{minRows: 4, maxRows: 4}"
+              :style="{width: '100%'}"
+              :maxlength="200"
+              :disabled="readonly"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item :label="$t('module.equipmentManager.repair.maintenanceDetail')" prop="maintenanceDetail">
+            <el-input
+              v-model="formData.maintenanceDetail"
+              type="textarea"
+              :placeholder="$t('module.equipmentManager.repair.placeholdermaintenanceDetail')"
+              :autosize="{minRows: 4, maxRows: 4}"
+              :style="{width: '100%'}"
+              :maxlength="200"
+              :disabled="readonly"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item :label="$t('module.equipmentManager.repair.annex')" prop="annex">
+            <single-file :file-id="formData.annex" :show-btn="!readonly" @done="uploadSuccess" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item :label="$t('module.equipmentManager.repair.repairTools')" prop="repairTools">
+            <el-input v-model="formData.repairTools" :disabled="readonly" :placeholder="$t('module.equipmentManager.repair.placeholderrepairTools')" clearable :style="{width: '100%'}" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item :label="$t('module.equipmentManager.repair.remark')" prop="remark">
+            <el-input v-model="formData.remark" :placeholder="$t('module.equipmentManager.repair.placeholderremark')" clearable :style="{width: '100%'}" :disabled="readonly" />
+          </el-form-item>
+        </el-col>
+        <el-col v-if="!readonly" :span="24">
+          <el-form-item size="large">
+            <el-button type="primary" @click="submitForm">{{ 'btn.submit' | i18nFilter }}</el-button>
+            <el-button @click="resetForm">{{ 'btn.reset' | i18nFilter }}</el-button>
+          </el-form-item>
+        </el-col>
+      </el-form>
+    </el-row>
+  </div>
+</template>
+<script>
+import { editRepairInfo, getRepairInfo } from '@/api/equipment/repair'
+import { getDictDevice, getDictRepairType, getDictWorker, faultLevelList } from '@/api/dict'
+import SingleFile from '@/components/Upload/SingleFile'
+import i18n from '@/lang'
+export default {
+  components: {
+    SingleFile
+  },
+  props: [],
+  data() {
+    return {
+      formData: {
+        repairOrderNumber: undefined,
+        equipmentId: undefined,
+        maintenanceWorker: undefined,
+        maintenanceStatus: null,
+        equipmentPosition: undefined,
+        workerContactInformation: undefined,
+        timeOfFailure: undefined,
+        faultLevel: undefined,
+        maintenanceStartTime: null,
+        maintenanceFinishTime: null,
+        repairMode: undefined,
+        faultDetail: undefined,
+        maintenanceDetail: undefined,
+        annex: '',
+        repairTools: undefined,
+        remark: undefined
+      },
+      dateRange: null,
+      rules: {
+        repairOrderNumber: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.repair.placeholderrepairOrderNumber'),
+          trigger: 'blur'
+        }],
+        equipmentId: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.repair.placeholderequipmentId'),
+          trigger: 'change'
+        }],
+        maintenanceWorker: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.repair.placeholdermaintenanceWorker'),
+          trigger: 'blur'
+        }],
+        maintenanceStatus: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.repair.placeholdermaintenanceStatus'),
+          trigger: 'blur'
+        }],
+        equipmentPosition: [{
+          required: false,
+          message: i18n.t('module.equipmentManager.repair.placeholderequipmentPosition'),
+          trigger: 'blur'
+        }],
+        workerContactInformation: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.repair.placeholderworkerContactInformation'),
+          trigger: 'blur'
+        }],
+        timeOfFailure: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.repair.placeholdertimeOfFailure'),
+          trigger: 'change'
+        }],
+        faultLevel: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.repair.placeholderfaultLevel'),
+          trigger: 'change'
+        }],
+        repairMode: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.repair.placeholderrepairMode'),
+          trigger: 'change'
+        }],
+        faultDetail: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.repair.placeholderfaultDetail'),
+          trigger: 'blur'
+        }],
+        maintenanceDetail: [{
+          required: false,
+          message: i18n.t('module.equipmentManager.repair.placeholdermaintenanceDetail'),
+          trigger: 'blur'
+        }],
+        remark: [{
+          required: false,
+          message: i18n.t('module.equipmentManager.repair.placeholderremark'),
+          trigger: 'blur'
+        }]
+      },
+      dict: {
+        device: [],
+        repairType: [],
+        worker: [],
+        faultLevel: []
+      },
+      workerPhone: {}
+    }
+  },
+  computed: {
+    readonly() {
+      return this.$route.query.type === 'readonly'
+    },
+    id() {
+      return this.$route.query.id
+    }
+  },
+  watch: {},
+  created() {},
+  mounted() {
+    this.getDict()
+    this.getInfo()
+  },
+  methods: {
+    uploadSuccess(id) {
+      console.log(id)
+      this.formData.annex = id
+    },
+    changeWorker(v) {
+      this.formData.maintenanceWorker = this.maintenanceWorker.join(',')
+      this.formData.workerContactInformation = this.maintenanceWorker.map(item => {
+        return this.workerPhone[item.id]
+      }).join(',')
+    },
+    dateChange(date) {
+      this.formData.maintenanceStartTime = date[0]
+      this.formData.maintenanceFinishTime = date[1]
+    },
+    submitForm() {
+      this.$refs['elForm'].validate(async valid => {
+        if (!valid) return
+        // TODO 提交表单
+        if (this.dateRange) {
+          this.formData.maintenanceStartTime = this.dateRange[0]
+          this.formData.maintenanceFinishTime = this.dateRange[1]
+        } else {
+          this.formData.maintenanceStartTime = ''
+          this.formData.maintenanceFinishTime = ''
+        }
+        const result = await editRepairInfo(this.formData)
+        if (result.code === 0) {
+          this.$message({
+            type: 'success',
+            message: '修改成功！'
+          })
+          this.$router.go(-1)
+        }
+      })
+    },
+    resetForm() {
+      this.$refs['elForm'].resetFields()
+      this.dateRange = null
+      this.maintenanceWorker = []
+      this.formData.maintenanceStartTime = null
+      this.formData.maintenanceFinishTime = null
+    },
+    async getDict() {
+      const result = await getDictDevice({
+        current: 1,
+        size: 999
+      })
+      this.dict.device = result
+      const result2 = await getDictRepairType()
+      this.dict.repairType = result2
+      const result3 = await getDictWorker()
+      this.dict.worker = result3
+      result3.map(item => {
+        this.workerPhone[item.id] = item.telephone
+      })
+      const result4 = await faultLevelList()
+      this.dict.faultLevel = result4
+    },
+    async getInfo() {
+      const result = await getRepairInfo({
+        id: this.id
+      })
+      if (result.code === 0) {
+        this.formData = result.data
+        if (this.formData.maintenanceStartTime && this.formData.maintenanceFinishTime) {
+          this.dateRange = [this.formData.maintenanceStartTime, this.formData.maintenanceFinishTime]
+        }
+        if (this.formData.maintenanceWorker) {
+          this.maintenanceWorker = this.formData.maintenanceWorker.split(',')
+        }
+      }
+    },
+    turnBack() {
+      this.$router.go(-1)
+    }
+  }
+}
+
+</script>
+<style lang="scss">
+.page-form-container {
+  padding: 20px;
+  .method-btn-area {
+    padding: 15px 30px;
+    margin: 10px 0 20px 0;
+    border: 1px solid #dfe6ec;
+  }
+}
+.form-container {
+  padding-top: 40px;
+}
+.el-upload__tip {
+  line-height: 1.2;
+}
+
+</style>
diff --git a/src/views/EquipmentManager/RepairManager/index.vue b/src/views/EquipmentManager/RepairManager/index.vue
new file mode 100644
index 0000000..cc5b272
--- /dev/null
+++ b/src/views/EquipmentManager/RepairManager/index.vue
@@ -0,0 +1,241 @@
+<!--
+ * @Date: 2020-12-15 15:36:52
+ * @LastEditors: guo
+ * @LastEditTime: 2021-03-20 17:22:44
+ * @FilePath: \basic-admin\src\views\EquipmentManager\RepairManager\index.vue
+ * @Description:
+-->
+<template>
+  <div class="usermanager-container">
+    <div class="method-btn-area">
+      <el-input v-model="listQuery.equipmentName" :placeholder="$t('module.equipmentManager.repair.searchPlaceholder')" style="width: 200px;" clearable />
+      <!-- <el-select v-model="listQuery.status" placeholder="请选择状态" clearable style="width: 200px;">
+        <el-option
+          label="完成"
+          value="1"
+        />
+        <el-option
+          label="等待"
+          value="2"
+        />
+        <el-option
+          label="进行中"
+          value="3"
+        />
+      </el-select> -->
+      <el-date-picker
+        v-model="datepicker"
+        type="daterange"
+        range-separator="-"
+        :start-placeholder="$t('module.equipmentManager.repair.startDate')"
+        :end-placeholder="$t('module.equipmentManager.repair.endDate')"
+        @change="changeTime"
+      />
+      <el-button type="primary" @click="getList">{{ 'btn.search' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="toAddPage">{{ 'btn.add' | i18nFilter }}</el-button>
+    </div>
+    <!-- <el-row :gutter="20">
+      <el-col :span="4">
+        <div class="tree-select-container">
+          <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick" />
+        </div>
+      </el-col>
+      <el-col :span="20">
+      </el-col>
+    </el-row> -->
+    <base-table :table-config="tableProps" :table-data="list" :is-loading="listLoading" :page="listQuery.current" :limit="listQuery.size">
+      <method-btn slot="handleBtn" :method-list="tableBtn" @clickBtn="handleClick" />
+    </base-table>
+    <pagination :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.size" @pagination="getList" />
+  </div>
+</template>
+
+<script>
+import dataDict from '@/filters/DataDict'
+// import DictFilter from '@/components/BaseTable/subcomponents/DataDictFilter'
+// edit here
+import { timeFormatter } from '@/filters'
+const tableBtn = [{
+  type: 'edit',
+  btnName: 'btn.edit'
+}, {
+  type: 'delete',
+  btnName: 'btn.delete'
+}, {
+  type: 'detail',
+  btnName: 'btn.detail'
+}]
+const tableProps = [{
+  prop: 'repairOrderNumber',
+  label: i18n.t('module.equipmentManager.repair.repairOrderNumber'),
+  align: 'center'
+}, {
+  prop: 'maintenanceStartTime',
+  label: i18n.t('module.equipmentManager.repair.maintenanceStartTime'),
+  align: 'center',
+  filter: timeFormatter,
+  width: '180px'
+}, {
+  prop: 'maintenanceFinishTime',
+  label: i18n.t('module.equipmentManager.repair.maintenanceFinishTime'),
+  align: 'center',
+  filter: timeFormatter,
+  width: '180px'
+}, {
+  prop: 'maintenanceStatus',
+  label: i18n.t('module.equipmentManager.repair.maintenanceStatus'),
+  align: 'center',
+  filter: dataDict('doneStatus')
+}, {
+  prop: 'equipmentName',
+  label: i18n.t('module.equipmentManager.repair.equipmentName'),
+  align: 'center'
+  // filter: dataDict('enableState')
+},
+// {
+//   prop: 'maintenanceWorker',
+//   label: i18n.t('module.equipmentManager.repair.maintenanceWorker'),
+//   align: 'center',
+//   subcomponent: DictFilter,
+//   filter: getDictWorker
+
+// }, {
+//   prop: 'workerContactInformation',
+//   label: i18n.t('module.equipmentManager.repair.workerContactInformation'),
+//   align: 'center'
+//   // filter: dataDict('enableState')
+// },
+{
+  prop: 'remark',
+  label: i18n.t('module.equipmentManager.repair.remark'),
+  align: 'center'
+}]
+import BaseTable from '@/components/BaseTable'
+// edit here
+import { objFilter } from '@/utils'
+import { getRepairList, delRepairInfo } from '@/api/equipment/repair'
+// import { getDictWorker } from '@/api/dict'
+import Pagination from '@/components/Pagination'
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import i18n from '@/lang'
+export default {
+  name: 'OrgManager',
+  components: { Pagination, BaseTable, MethodBtn },
+  props: {},
+  data() {
+    return {
+      tableBtn,
+      tableProps,
+      datepicker: [],
+      list: [],
+      total: 0,
+      listLoading: true,
+      curEditId: null,
+      listQuery: {
+        current: 1,
+        size: 10,
+        equipmentName: '',
+        status: '',
+        date: '',
+        startTime: null,
+        endTime: null
+      },
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      }
+    }
+  },
+  created() {
+    this.getList()
+    // this.listLoading = false
+  },
+  mounted() {},
+  methods: {
+    handleClick(raw) {
+      console.log(raw)
+      switch (raw.type) {
+        case 'delete':
+          this.$confirm(i18n.t('deleteMsgBox.content'), i18n.t('deleteMsgBox.hint'), {
+            confirmButtonText: i18n.t('btn.confirm'),
+            cancelButtonText: i18n.t('btn.cancel'),
+            type: 'warning'
+          }).then(async() => {
+            // 走接口
+            const result = await delRepairInfo({
+              id: raw.data.id
+            })
+            if (result.code === 0) {
+              this.$message({
+                type: 'success',
+                message: i18n.t('deleteMsgBox.doneMsg')
+              })
+              this.getList()
+            }
+          })
+          break
+        case 'edit':
+          this.$router.push({
+            name: 'EditRepair',
+            query: {
+              id: raw.data.id
+            }
+          })
+          break
+        case 'detail':
+          this.$router.push({
+            name: 'EditRepair',
+            query: {
+              id: raw.data.id,
+              type: 'readonly'
+            }
+          })
+          break
+      }
+    },
+    async getList() {
+      this.listLoading = true
+      // edit here
+      const res = await getRepairList(objFilter(this.listQuery))
+      if (res.code === 0) {
+        this.list = res.data.records
+        this.total = res.data.total
+        this.listLoading = false
+      }
+    },
+    toAddPage() {
+      this.$router.push({
+        name: 'AddRepair'
+      })
+    },
+    changeTime(val) {
+      this.listQuery.startTime = val ? val[0] : null
+      this.listQuery.endTime = val ? val[1] : null
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.usermanager-container {
+  padding: 20px;
+  .method-btn-area {
+    padding: 15px 30px;
+    margin: 10px 0 20px 0;
+    border: 1px solid #dfe6ec;
+  }
+  .tree-select-container {
+    border: 1px solid #dfe6ec;
+    min-height: 400px;
+    padding: 20px;
+  }
+}
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/EquipmentManager/StatusSetting/EditForm.vue b/src/views/EquipmentManager/StatusSetting/EditForm.vue
new file mode 100644
index 0000000..d92563c
--- /dev/null
+++ b/src/views/EquipmentManager/StatusSetting/EditForm.vue
@@ -0,0 +1,129 @@
+<!--
+ * @Date: 2021-01-11 09:24:41
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-05-11 10:54:22
+ * @FilePath: \basic-admin\src\views\EquipmentManager\StatusSetting\EditForm.vue
+ * @Description: 子页面
+-->
+<template>
+  <div>
+    <el-dialog v-bind="$attrs" title="修改设备状态" v-on="$listeners" @open="onOpen" @close="onClose">
+      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="120px">
+        <el-form-item :label="$t('module.equipmentManager.statusSetting.devicestatus')" prop="status">
+          <el-select v-model="formData.status" :placeholder="$t('module.equipmentManager.statusSetting.placeholderdevicestatus')" clearable :style="{width: '80%'}">
+            <el-option
+              v-for="(item, index) in statusOptions"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+          <el-tooltip placement="top" style="float:right;margin-right:100px">
+            <div slot="content"><img src="../../../assets/img/status.png" alt=""></div>
+            <el-button type="text" icon="el-icon-question" />
+          </el-tooltip>
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.statusSetting.controlStatus')" prop="controlStatus">
+          <el-select v-model="formData.controlStatus" :placeholder="$t('module.equipmentManager.statusSetting.placeholdercontrolStatus')" clearable :style="{width: '80%'}">
+            <el-option
+              v-for="(item, index) in controlStatusOptions"
+              :key="index"
+              :label="item.name"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="close">{{ 'btn.cancel' | i18nFilter }}</el-button>
+        <el-button type="primary" @click="handelConfirm">{{ 'btn.confirm' | i18nFilter }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { editStatusSetting } from '@/api/equipment/index'
+import { statusList } from '@/api/dict'
+import i18n from '@/lang'
+export default {
+  components: {},
+  inheritAttrs: false,
+  props: {
+    targetInfo: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      formData: {
+        status: null,
+        oldStatus: null,
+        id: null,
+        controlStatus: null
+      },
+      rules: {
+        status: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.statusSetting.placeholderdevicestatus'),
+          trigger: 'change'
+        }],
+        controlStatus: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.statusSetting.placeholdercontrolStatus'),
+          trigger: 'change'
+        }]
+      },
+      statusOptions: [],
+      controlStatusOptions: [
+        { name: this.$t('module.equipmentManager.statusSetting.controlStatusLocal'), value: 0 },
+        { name: this.$t('module.equipmentManager.statusSetting.controlStatusOnline'), value: 1 }
+      ]
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {
+    this.getDict()
+  },
+  methods: {
+    onOpen() {
+      this.formData.id = this.targetInfo.id
+      this.formData.status = String(this.targetInfo.status)
+      this.formData.oldStatus = String(this.targetInfo.status)
+      this.formData.controlStatus = this.targetInfo.controlStatus
+    },
+    onClose() {
+      this.$refs['elForm'].resetFields()
+    },
+    close() {
+      this.$emit('update:visible', false)
+    },
+    handelConfirm() {
+      this.$refs['elForm'].validate(async valid => {
+        if (!valid) return
+        const result = await editStatusSetting({
+          ...this.formData,
+          id: this.targetInfo?.id
+        })
+        if (result.code === 0) {
+          this.$message({
+            type: 'success',
+            message: '修改状态成功!'
+          })
+          this.$emit('done')
+          this.close()
+        }
+      })
+    },
+    async getDict() {
+      const result = await statusList()
+      this.statusOptions = result
+    }
+  }
+}
+
+</script>
+<style>
+</style>
diff --git a/src/views/EquipmentManager/StatusSetting/index.vue b/src/views/EquipmentManager/StatusSetting/index.vue
new file mode 100644
index 0000000..4405869
--- /dev/null
+++ b/src/views/EquipmentManager/StatusSetting/index.vue
@@ -0,0 +1,193 @@
+<!--
+ * @Date: 2020-12-15 15:36:52
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-05-11 11:29:33
+ * @FilePath: \basic-admin\src\views\EquipmentManager\StatusSetting\index.vue
+ * @Description:
+-->
+<template>
+  <div class="usermanager-container">
+    <div class="method-btn-area">
+      <el-input v-model="listQuery.equipmentName" :placeholder="$t('module.equipmentManager.statusSetting.searchPlaceholder')" style="width: 200px;" clearable />
+      <el-select v-model="listQuery.status" :placeholder="$t('module.equipmentManager.statusSetting.searchPlaceholder2')" clearable style="width: 200px;">
+        <el-option
+          v-for="item in dict.statusList"
+          :key="item.id"
+          :label="item.name"
+          :value="item.id"
+        />
+      </el-select>
+      <el-button type="primary" @click="getList">{{ 'btn.search' | i18nFilter }}</el-button>
+    </div>
+    <base-table :table-config="tableProps" :table-data="list" :is-loading="listLoading" :page="listQuery.current" :limit="listQuery.size">
+      <method-btn slot="handleBtn" :method-list="tableBtn" @clickBtn="handleClick" />
+    </base-table>
+    <pagination :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.size" @pagination="getList" />
+    <edit-form :visible.sync="showEditDialog" :target-info="{id: curEditId, status: curStatus, controlStatus: curControlStatus }" @done="getList" />
+  </div>
+</template>
+
+<script>
+// import dataDict from '@/filters/DataDict'
+import ColorSqua from '@/components/BaseTable/subcomponents/ColorSqua'
+import equipment from '@/filters/equipment'
+// edit here
+// const statusTableFilter = value => {
+//   const table = {
+//     '0': 'productive',
+//     '1': 'standby',
+//     '2': 'unscheduled downtime',
+//     '3': 'scheduled downtime',
+//     '4': 'engineering',
+//     '5': 'non-scheduled'
+//   }
+//   return table[value] ? table[value] : value
+// }
+
+// const colorTable = {
+//   '0': 'rgb(155,187,89)',
+//   '1': 'rgb(255,255,0)',
+//   '2': 'rgb(192,80,77)',
+//   '3': 'rgb(247,150,70)',
+//   '4': 'rgb(79,129,189)',
+//   '5': 'rgb(0,0,0)'
+// }
+const tableBtn = [{
+  type: 'edit',
+  btnName: 'btn.edit'
+}]
+const tableProps = [{
+  prop: 'code',
+  label: i18n.t('module.equipmentManager.statusSetting.code'),
+  align: 'center'
+}, {
+  prop: 'name',
+  label: i18n.t('module.equipmentManager.statusSetting.name'),
+  align: 'center'
+}, {
+  prop: 'controlStatus',
+  label: i18n.t('module.equipmentManager.statusSetting.controlStatus'),
+  align: 'center',
+  filter: equipment('controlStatus')
+}, {
+  prop: 'communication',
+  label: i18n.t('module.equipmentManager.statusSetting.communication'),
+  align: 'center',
+  filter: equipment('communication')
+}, {
+  prop: 'equipmentStatusName',
+  label: i18n.t('module.equipmentManager.statusSetting.status'),
+  align: 'center'
+}, {
+  prop: 'equipmentStatusColor',
+  label: i18n.t('module.equipmentManager.statusSetting.color'),
+  align: 'center',
+  subcomponent: ColorSqua
+  // filter: dataDict('enableState')
+}, {
+  prop: 'description',
+  label: i18n.t('module.equipmentManager.statusSetting.description'),
+  align: 'center'
+}]
+import EditForm from './EditForm'
+import BaseTable from '@/components/BaseTable'
+// edit here
+import { getStatusSettingList } from '@/api/equipment'
+import { statusList } from '@/api/dict'
+import Pagination from '@/components/Pagination'
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import i18n from '@/lang'
+export default {
+  name: 'OrgManager',
+  components: {
+    Pagination,
+    BaseTable,
+    MethodBtn,
+    EditForm
+  },
+  props: {},
+  data() {
+    return {
+      tableBtn,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      showDialog: false,
+      curEditId: null,
+      curStatus: null,
+      curControlStatus: null,
+      showEditDialog: false,
+      listQuery: {
+        current: 1,
+        size: 10,
+        equipmentName: ''
+      },
+      dict: {
+        statusList: []
+      }
+    }
+  },
+  created() {
+    this.getList()
+    this.getDict()
+    // this.listLoading = false
+  },
+  mounted() {},
+  methods: {
+    handleClick(raw) {
+      console.log(raw)
+      switch (raw.type) {
+        case 'edit':
+          this.showEditDialog = true
+          this.curEditId = raw.data.id
+          this.curStatus = raw.data.status
+          this.curControlStatus = raw.data.controlStatus
+          break
+      }
+    },
+    async getList() {
+      this.listLoading = true
+      // edit here
+      if (this.listQuery.status === '') {
+        delete this.listQuery.status
+      }
+      const res = await getStatusSettingList(this.listQuery)
+      if (res.code === 0) {
+        this.list = res.data.records
+        // this.list = res.data.records ? res.data.records.map(item => {
+        //   return {
+        //     ...item,
+        //     color: colorTable[item.status]
+        //   }
+        // }) : []
+        this.total = res.data.total
+        this.listLoading = false
+      }
+    },
+    async getDict() {
+      const result = await statusList()
+      this.dict.statusList = result
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.usermanager-container {
+  padding: 20px;
+  .method-btn-area {
+    padding: 15px 30px;
+    margin: 10px 0 20px 0;
+    border: 1px solid #dfe6ec;
+  }
+}
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/EquipmentManager/TypeParamSetting/ColorSqua.vue b/src/views/EquipmentManager/TypeParamSetting/ColorSqua.vue
new file mode 100644
index 0000000..ed98458
--- /dev/null
+++ b/src/views/EquipmentManager/TypeParamSetting/ColorSqua.vue
@@ -0,0 +1,55 @@
+<!--
+ * @Date: 2021-02-20 10:45:21
+ * @LastEditors: guo
+ * @LastEditTime: 2021-03-16 14:36:29
+ * @FilePath: \basic-admin\src\views\EquipmentManager\TypeParamSetting\ColorSqua.vue
+ * @Description:
+-->
+<template>
+  <span class="color-squa" :style="{'color': color}" @click="emitClick">
+    {{ statusName }}
+  </span>
+</template>
+
+<script>
+const colorTable = {
+  '0': 'rgb(155,187,89)',
+  '1': 'rgb(255,255,0)',
+  '2': 'rgb(192,80,77)',
+  '3': 'rgb(247,150,70)',
+  '4': 'rgb(79,129,189)',
+  '5': 'rgb(0,0,0)'
+}
+const statusTableFilter = value => {
+  const table = {
+    '0': 'productive',
+    '1': 'standby',
+    '2': 'unscheduled downtime',
+    '3': 'scheduled downtime',
+    '4': 'engineering',
+    '5': 'non-scheduled'
+  }
+  return table[value] ? table[value] : value
+}
+export default {
+  props: {
+    injectData: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  computed: {
+    color() {
+      return colorTable[this.injectData.status]
+    },
+    statusName() {
+      return statusTableFilter(this.injectData.status)
+    }
+  },
+  methods: {
+    emitClick() {
+      console.log(this.injectData)
+    }
+  }
+}
+</script>
diff --git a/src/views/EquipmentManager/TypeParamSetting/detail.vue b/src/views/EquipmentManager/TypeParamSetting/detail.vue
new file mode 100644
index 0000000..5598c2b
--- /dev/null
+++ b/src/views/EquipmentManager/TypeParamSetting/detail.vue
@@ -0,0 +1,86 @@
+<!--
+ * @Date: 2020-12-15 15:36:52
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-04-23 15:48:58
+ * @FilePath: \basic-admin\src\views\EquipmentManager\TypeParamSetting\detail.vue
+ * @Description: 设备类型参数列表
+-->
+<template>
+  <div class="usermanager-container">
+    <div class="info-box">
+      <span class="type">{{ $t('module.equipmentManager.baseinfo.name') }}: {{ info.name }}</span>
+      <span class="code">{{ $t('module.equipmentManager.baseinfo.code') }}: {{ info.code }}</span>
+    </div>
+    <el-tabs type="border-card">
+      <el-tab-pane :label="$t('module.equipmentManager.baseinfo.deviceTypeParam')">
+        <param-page />
+      </el-tab-pane>
+      <el-tab-pane :label="$t('module.equipmentManager.baseinfo.deviceTypeEvent')">
+        <event-page />
+      </el-tab-pane>
+      <el-tab-pane :label="$t('module.equipmentManager.baseinfo.deviceTypeAlarm')">
+        <alarm-page />
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import { getDeviceInfo } from '@/api/equipment/param'
+import ParamPage from './subpage/param'
+import EventPage from './subpage/event'
+import AlarmPage from './subpage/alarm'
+export default {
+  name: 'OrgManager',
+  components: { ParamPage, EventPage, AlarmPage },
+  props: {},
+  data() {
+    return {
+      info: {}
+    }
+  },
+  computed: {
+    id() {
+      return this.$route.query.id
+    }
+  },
+  mounted() {
+    this.getInfo()
+  },
+  methods: {
+    async getInfo() {
+      const result = await getDeviceInfo({
+        id: this.id
+      })
+      if (result.code === 0) {
+        this.info = result.data
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.usermanager-container {
+  padding: 20px;
+  .info-box {
+    padding: 40px 5px;
+    .code {
+      margin-left: 40px;
+    }
+  }
+  .method-btn-area {
+    padding: 15px 30px;
+    margin: 10px 0 20px 0;
+    border: 1px solid #dfe6ec;
+  }
+}
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/EquipmentManager/TypeParamSetting/index.vue b/src/views/EquipmentManager/TypeParamSetting/index.vue
new file mode 100644
index 0000000..a30720c
--- /dev/null
+++ b/src/views/EquipmentManager/TypeParamSetting/index.vue
@@ -0,0 +1,119 @@
+<!--
+ * @Date: 2020-12-15 15:36:52
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-06-29 19:25:49
+ * @FilePath: \basic-admin\src\views\EquipmentManager\TypeParamSetting\index.vue
+ * @Description: 设备类型参数列表
+-->
+<template>
+  <div class="usermanager-container">
+    <div class="method-btn-area">
+      <el-input v-model="keywords" :placeholder="$t('module.equipmentManager.baseinfo.searchPlaceholder')" style="width: 200px;" clearable />
+      <el-button @click="getList">{{ 'btn.search' | i18nFilter }}</el-button>
+    </div>
+    <base-table :table-config="tableProps" :table-data="list" :is-loading="listLoading" :page="listQuery.current" :limit="listQuery.size">
+      <method-btn slot="handleBtn" :method-list="tableBtn" @clickBtn="handleClick" />
+    </base-table>
+    <pagination :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.size" @pagination="getList" />
+  </div>
+</template>
+
+<script>
+// import dataDict from '@/filters/DataDict'
+// edit here
+const tableBtn = [{
+  type: 'detail',
+  btnName: 'btn.detail'
+}]
+const tableProps = [{
+  prop: 'code',
+  label: i18n.t('module.equipmentManager.baseinfo.code'),
+  align: 'center'
+}, {
+  prop: 'name',
+  label: i18n.t('module.equipmentManager.baseinfo.name'),
+  align: 'center'
+}, {
+  prop: 'remark',
+  label: i18n.t('module.equipmentManager.baseinfo.remark'),
+  align: 'center'
+}]
+import BaseTable from '@/components/BaseTable'
+// edit here
+import { getDeviceList } from '@/api/equipment/param'
+
+import Pagination from '@/components/Pagination'
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import i18n from '@/lang'
+export default {
+  name: 'OrgManager',
+  components: { Pagination, BaseTable, MethodBtn },
+  props: {},
+  data() {
+    return {
+      tableBtn,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      keywords: '',
+      listQuery: {
+        current: 1,
+        size: 10,
+        name: '',
+        code: ''
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  mounted() {},
+  methods: {
+    handleClick(raw) {
+      console.log(raw)
+      switch (raw.type) {
+        case 'detail':
+          this.$router.push({
+            name: 'TypeParamDetail',
+            query: {
+              id: raw.data.id
+            }
+          })
+          break
+      }
+    },
+    async getList() {
+      this.listLoading = true
+      // edit here
+      this.listQuery.name = this.keywords
+      this.listQuery.code = this.keywords
+      const res = await getDeviceList(this.listQuery)
+      if (res.code === 0) {
+        this.list = res.data.records ? res.data.records : []
+        this.total = res.data.total
+        this.listLoading = false
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.usermanager-container {
+  padding: 20px;
+  .method-btn-area {
+    padding: 15px 30px;
+    margin: 10px 0 20px 0;
+    border: 1px solid #dfe6ec;
+  }
+}
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/EquipmentManager/TypeParamSetting/subpage/alarm/addForm.vue b/src/views/EquipmentManager/TypeParamSetting/subpage/alarm/addForm.vue
new file mode 100644
index 0000000..8c1d0c7
--- /dev/null
+++ b/src/views/EquipmentManager/TypeParamSetting/subpage/alarm/addForm.vue
@@ -0,0 +1,132 @@
+<!--
+ * @Date: 2021-01-18 10:47:42
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-04-23 15:57:43
+ * @FilePath: \basic-admin\src\views\EquipmentManager\TypeParamSetting\subpage\alarm\addForm.vue
+ * @Description:
+-->
+<template>
+  <div>
+    <el-dialog v-bind="$attrs" :title="$t('module.equipmentManager.baseinfoalarm.addDialogTitle')" v-on="$listeners" @open="onOpen" @close="onClose">
+      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="150px">
+        <el-form-item :label="$t('module.equipmentManager.baseinfoalarm.alarmId')" prop="alarmId">
+          <el-input v-model="formData.alarmId" clearable :style="{width: '100%'}" type="number" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.baseinfoalarm.alarmName')" prop="alarmName">
+          <el-input v-model="formData.alarmName" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.baseinfoalarm.alarmCode')" prop="alarmCode">
+          <el-input v-model="formData.alarmCode" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.baseinfoalarm.category')" prop="category">
+          <el-input v-model="formData.category" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.baseinfoalarm.enabled')" prop="enabled">
+          <el-switch v-model="formData.enabled" :active-value="1" :inactive-value="0" />
+        </el-form-item>
+        <!-- <el-form-item :label="$t('module.equipmentManager.baseinfoalarm.description')" prop="description">
+          <el-input v-model="formData.description" clearable :style="{width: '100%'}" />
+        </el-form-item> -->
+        <el-form-item :label="$t('module.equipmentManager.baseinfoalarm.remark')" prop="remark">
+          <el-input v-model="formData.remark" clearable :style="{width: '100%'}" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="close">取消</el-button>
+        <el-button type="primary" @click="handelConfirm">确定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { addDeviceAlarmSetting, getDeviceAlarmCode } from '@/api/equipment/param'
+import i18n from '@/lang'
+export default {
+  components: {},
+  inheritAttrs: false,
+  props: {
+    targetInfo: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      formData: {
+        alarmId: undefined,
+        alarmName: undefined,
+        alarmCode: undefined,
+        category: undefined,
+        enabled: 1,
+        description: undefined,
+        remark: undefined,
+        equipmentId: undefined
+
+      },
+      rules: {
+        alarmId: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.baseinfoalarm.placeholderalarmId'),
+          trigger: 'blur'
+        }],
+        alarmName: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.baseinfoalarm.placeholderalarmName'),
+          trigger: 'blur'
+        }],
+        alarmCode: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.baseinfoalarm.placeholderalarmCode'),
+          trigger: 'blur'
+        }],
+        category: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.baseinfoalarm.placeholdercategory'),
+          trigger: 'blur'
+        }],
+        description: [],
+        remark: []
+      }
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {
+    onOpen() {
+      this.formData.equipmentId = this.targetInfo?.id
+      this.getCode()
+    },
+    onClose() {
+      this.$refs['elForm'].resetFields()
+    },
+    close() {
+      this.$emit('update:visible', false)
+    },
+    handelConfirm() {
+      this.$refs['elForm'].validate(async valid => {
+        if (!valid) return
+        const result = await addDeviceAlarmSetting(this.formData)
+        if (result.code === 0) {
+          this.$message({
+            type: 'success',
+            message: '添加成功！'
+          })
+          this.$emit('done')
+          this.close()
+        }
+      })
+    },
+    async getCode() {
+      const result = await getDeviceAlarmCode()
+      if (result.code === 0) {
+        this.formData.alarmCode = result.data
+      }
+    }
+  }
+}
+
+</script>
+<style>
+</style>
diff --git a/src/views/EquipmentManager/TypeParamSetting/subpage/alarm/editForm.vue b/src/views/EquipmentManager/TypeParamSetting/subpage/alarm/editForm.vue
new file mode 100644
index 0000000..813500a
--- /dev/null
+++ b/src/views/EquipmentManager/TypeParamSetting/subpage/alarm/editForm.vue
@@ -0,0 +1,134 @@
+<!--
+ * @Date: 2021-01-18 10:47:42
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-04-23 15:58:05
+ * @FilePath: \basic-admin\src\views\EquipmentManager\TypeParamSetting\subpage\alarm\editForm.vue
+ * @Description:
+-->
+<template>
+  <div>
+    <el-dialog v-bind="$attrs" :title="$t('module.equipmentManager.baseinfoalarm.editDialogTitle')" v-on="$listeners" @open="onOpen" @close="onClose">
+      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="150px">
+        <el-form-item :label="$t('module.equipmentManager.baseinfoalarm.alarmId')" prop="alarmId">
+          <el-input v-model="formData.alarmId" clearable :style="{width: '100%'}" type="number" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.baseinfoalarm.alarmName')" prop="alarmName">
+          <el-input v-model="formData.alarmName" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.baseinfoalarm.alarmCode')" prop="alarmCode">
+          <el-input v-model="formData.alarmCode" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.baseinfoalarm.category')" prop="category">
+          <el-input v-model="formData.category" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.baseinfoalarm.enabled')" prop="enabled">
+          <el-switch v-model="formData.enabled" :active-value="1" :inactive-value="0" />
+        </el-form-item>
+        <!-- <el-form-item :label="$t('module.equipmentManager.baseinfoalarm.description')" prop="description">
+          <el-input v-model="formData.description" clearable :style="{width: '100%'}" />
+        </el-form-item> -->
+        <el-form-item :label="$t('module.equipmentManager.baseinfoalarm.remark')" prop="remark">
+          <el-input v-model="formData.remark" clearable :style="{width: '100%'}" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="close">{{ 'btn.cancel' | i18nFilter }}</el-button>
+        <el-button type="primary" @click="handelConfirm">{{ 'btn.confirm' | i18nFilter }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { editDeviceAlarmSetting, getDeviceAlarmSetting } from '@/api/equipment/param'
+import i18n from '@/lang'
+export default {
+  components: {},
+  inheritAttrs: false,
+  props: {
+    targetInfo: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      formData: {
+        alarmId: undefined,
+        alarmName: undefined,
+        alarmCode: undefined,
+        category: undefined,
+        enabled: 1,
+        description: undefined,
+        remark: undefined,
+        equipmentId: undefined
+      },
+      rules: {
+        alarmId: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.baseinfoalarm.placeholderalarmId'),
+          trigger: 'blur'
+        }],
+        alarmName: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.baseinfoalarm.placeholderalarmName'),
+          trigger: 'blur'
+        }],
+        alarmCode: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.baseinfoalarm.placeholderalarmCode'),
+          trigger: 'blur'
+        }],
+        category: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.baseinfoalarm.placeholdercategory'),
+          trigger: 'blur'
+        }],
+        description: [],
+        remark: []
+      }
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {
+    onOpen() {
+      this.formData.equipmentId = this.targetInfo.equipmentId
+      this.formData.id = this.targetInfo.id
+      this.getInfo()
+    },
+    onClose() {
+      this.$refs['elForm'].resetFields()
+    },
+    close() {
+      this.$emit('update:visible', false)
+    },
+    handelConfirm() {
+      this.$refs['elForm'].validate(async valid => {
+        if (!valid) return
+        const result = await editDeviceAlarmSetting(this.formData)
+        if (result.code === 0) {
+          this.$message({
+            type: 'success',
+            message: '添加成功！'
+          })
+          this.$emit('done')
+          this.close()
+        }
+      })
+    },
+    async getInfo() {
+      const result = await getDeviceAlarmSetting({
+        id: this.formData.id
+      })
+      if (result.code === 0) {
+        this.formData = result.data
+      }
+    }
+  }
+}
+
+</script>
+<style>
+</style>
diff --git a/src/views/EquipmentManager/TypeParamSetting/subpage/alarm/index.vue b/src/views/EquipmentManager/TypeParamSetting/subpage/alarm/index.vue
new file mode 100644
index 0000000..dd6768c
--- /dev/null
+++ b/src/views/EquipmentManager/TypeParamSetting/subpage/alarm/index.vue
@@ -0,0 +1,153 @@
+<!--
+ * @Date: 2020-12-15 15:36:52
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-06-29 20:29:18
+ * @FilePath: \basic-admin\src\views\EquipmentManager\TypeParamSetting\subpage\alarm\index.vue
+ * @Description: 设备类型参数列表
+-->
+<template>
+  <div class="param-subpage-container">
+    <div class="method-btn-area">
+      <el-input v-model="listQuery.keywords" :placeholder="$t('module.equipmentManager.baseinfoalarm.searchPlaceholder')" style="width: 200px;" clearable />
+      <el-button @click="getList">{{ 'btn.search' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="showDialog = true">{{ 'btn.add' | i18nFilter }}</el-button>
+    </div>
+    <base-table :table-config="tableProps" :table-data="list" :is-loading="listLoading" :page="listQuery.current" :limit="listQuery.size">
+      <method-btn slot="handleBtn" :method-list="tableBtn" :is-fixed="false" :width="180" @clickBtn="handleClick" />
+    </base-table>
+    <pagination :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.size" @pagination="getList" />
+    <add-form :visible.sync="showDialog" :target-info="{id: listQuery.equipmentId}" @done="getList" />
+    <edit-form :visible.sync="showEditDialog" :target-info="{id: curEditId, equipmentId: listQuery.equipmentId }" @done="getList" />
+  </div>
+</template>
+
+<script>
+// import dataDict from '@/filters/DataDict'
+// edit here
+const tableBtn = [{
+  type: 'edit',
+  btnName: 'btn.edit'
+}, {
+  type: 'delete',
+  btnName: 'btn.delete'
+}]
+const tableProps = [{
+  prop: 'alarmId',
+  label: i18n.t('module.equipmentManager.baseinfoalarm.alarmId'),
+  align: 'center'
+}, {
+  prop: 'alarmName',
+  label: i18n.t('module.equipmentManager.baseinfoalarm.alarmName'),
+  align: 'center'
+}, {
+  prop: 'alarmCode',
+  label: i18n.t('module.equipmentManager.baseinfoalarm.alarmCode'),
+  align: 'center'
+}, {
+  prop: 'category',
+  label: i18n.t('module.equipmentManager.baseinfoalarm.category'),
+  align: 'center'
+}, {
+  prop: 'remark',
+  label: i18n.t('module.equipmentManager.baseinfoalarm.remark'),
+  align: 'center'
+}]
+import BaseTable from '@/components/BaseTable'
+// edit here
+import { getDeviceAlarmSettingList, delDeviceAlarmSetting } from '@/api/equipment/param'
+import AddForm from './addForm'
+import EditForm from './editForm'
+import Pagination from '@/components/Pagination'
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import i18n from '@/lang'
+export default {
+  name: 'OrgManager',
+  components: { Pagination, BaseTable, MethodBtn, AddForm, EditForm },
+  props: {},
+  data() {
+    return {
+      tableBtn,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      showDialog: false,
+      curEditId: null,
+      showEditDialog: false,
+      listQuery: {
+        current: 1,
+        size: 10,
+        equipmentId: null
+      }
+    }
+  },
+  created() {
+    this.listQuery.equipmentId = this.$route.query.id
+    this.getList()
+    // this.listLoading = false
+  },
+  mounted() {},
+  methods: {
+    handleClick(raw) {
+      console.log(raw)
+      switch (raw.type) {
+        case 'delete':
+          this.$confirm(i18n.t('deleteMsgBox.content'), i18n.t('deleteMsgBox.hint'), {
+            confirmButtonText: i18n.t('btn.confirm'),
+            cancelButtonText: i18n.t('btn.cancel'),
+            type: 'warning'
+          }).then(async() => {
+            // 走接口
+            const result = await delDeviceAlarmSetting({
+              id: raw.data.id
+            })
+            if (result.code === 0) {
+              this.$message({
+                type: 'success',
+                message: i18n.t('deleteMsgBox.doneMsg')
+              })
+              this.getList()
+            }
+          })
+          break
+        case 'edit':
+          this.showEditDialog = true
+          this.curEditId = raw.data.id
+          break
+      }
+    },
+    async getList(val) {
+      this.listLoading = true
+      // edit here
+      // console.log(this.listQuery
+      console.log(val)
+      console.log(this.listQuery.current)
+      const res = await getDeviceAlarmSettingList(this.listQuery)
+      if (res.code === 0) {
+        this.list = res.data.records ? res.data.records : []
+        this.total = res.data.total
+        this.listLoading = false
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.param-subpage-container {
+  padding: 40px;
+  .method-btn-area {
+    padding: 15px 30px;
+    margin: 10px 0 20px 0;
+    border: 1px solid #dfe6ec;
+  }
+}
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/EquipmentManager/TypeParamSetting/subpage/event/addForm.vue b/src/views/EquipmentManager/TypeParamSetting/subpage/event/addForm.vue
new file mode 100644
index 0000000..5fccf23
--- /dev/null
+++ b/src/views/EquipmentManager/TypeParamSetting/subpage/event/addForm.vue
@@ -0,0 +1,131 @@
+<!--
+ * @Date: 2021-01-18 10:47:42
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-04-23 15:59:17
+ * @FilePath: \basic-admin\src\views\EquipmentManager\TypeParamSetting\subpage\event\addForm.vue
+ * @Description:
+-->
+<template>
+  <div>
+    <el-dialog v-bind="$attrs" :title="$t('module.equipmentManager.baseinfoevent.addDialogTitle')" v-on="$listeners" @open="onOpen" @close="onClose">
+      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="150px">
+        <el-form-item :label="$t('module.equipmentManager.baseinfoevent.eventId')" prop="eventId">
+          <el-input v-model="formData.eventId" clearable :style="{width: '100%'}" type="number" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.baseinfoevent.eventName')" prop="eventName">
+          <el-input v-model="formData.eventName" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.baseinfoevent.eventCode')" prop="eventCode">
+          <el-input v-model="formData.eventCode" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <!-- <el-form-item :label="$t('module.equipmentManager.baseinfoevent.category')" prop="category">
+          <el-input v-model="formData.category" clearable :style="{width: '100%'}" />
+        </el-form-item> -->
+        <el-form-item :label="$t('module.equipmentManager.baseinfoevent.enabled')" prop="enabled">
+          <el-switch v-model="formData.enabled" :active-value="1" :inactive-value="0" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.baseinfoevent.description')" prop="description">
+          <el-input v-model="formData.description" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.baseinfoevent.remark')" prop="remark">
+          <el-input v-model="formData.remark" clearable :style="{width: '100%'}" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="close">{{ 'btn.cancel' | i18nFilter }}</el-button>
+        <el-button type="primary" @click="handelConfirm">{{ 'btn.confirm' | i18nFilter }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { addDeviceEventSetting, getDeviceEventCode } from '@/api/equipment/param'
+import i18n from '@/lang'
+export default {
+  components: {},
+  inheritAttrs: false,
+  props: {
+    targetInfo: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      formData: {
+        eventId: undefined,
+        eventName: undefined,
+        eventCode: undefined,
+        category: undefined,
+        enabled: 1,
+        description: undefined,
+        remark: undefined,
+        equipmentId: undefined
+      },
+      rules: {
+        eventId: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.baseinfoevent.placeholdereventId'),
+          trigger: 'blur'
+        }],
+        eventName: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.baseinfoevent.placeholdereventName'),
+          trigger: 'blur'
+        }],
+        eventCode: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.baseinfoevent.placeholdereventCode'),
+          trigger: 'blur'
+        }],
+        category: [{
+          required: false,
+          message: i18n.t('module.equipmentManager.baseinfoevent.placeholdercategory'),
+          trigger: 'blur'
+        }],
+        description: [],
+        remark: []
+      }
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {
+    onOpen() {
+      this.formData.equipmentId = this.targetInfo.id
+      this.getCode()
+    },
+    onClose() {
+      this.$refs['elForm'].resetFields()
+    },
+    close() {
+      this.$emit('update:visible', false)
+    },
+    handelConfirm() {
+      this.$refs['elForm'].validate(async valid => {
+        if (!valid) return
+        const result = await addDeviceEventSetting(this.formData)
+        if (result.code === 0) {
+          this.$message({
+            type: 'success',
+            message: '添加成功！'
+          })
+          this.$emit('done')
+          this.close()
+        }
+      })
+    },
+    async getCode() {
+      const result = await getDeviceEventCode()
+      if (result.code === 0) {
+        this.formData.eventCode = result.data
+      }
+    }
+  }
+}
+
+</script>
+<style>
+</style>
diff --git a/src/views/EquipmentManager/TypeParamSetting/subpage/event/editForm.vue b/src/views/EquipmentManager/TypeParamSetting/subpage/event/editForm.vue
new file mode 100644
index 0000000..04db496
--- /dev/null
+++ b/src/views/EquipmentManager/TypeParamSetting/subpage/event/editForm.vue
@@ -0,0 +1,134 @@
+<!--
+ * @Date: 2021-01-18 10:47:42
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-04-23 15:59:53
+ * @FilePath: \basic-admin\src\views\EquipmentManager\TypeParamSetting\subpage\event\editForm.vue
+ * @Description:
+-->
+<template>
+  <div>
+    <el-dialog v-bind="$attrs" :title="$t('module.equipmentManager.baseinfoevent.editDialogTitle')" v-on="$listeners" @open="onOpen" @close="onClose">
+      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="150px">
+        <el-form-item :label="$t('module.equipmentManager.baseinfoevent.eventId')" prop="eventId">
+          <el-input v-model="formData.eventId" clearable :style="{width: '100%'}" type="number" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.baseinfoevent.eventName')" prop="eventName">
+          <el-input v-model="formData.eventName" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.baseinfoevent.eventCode')" prop="eventCode">
+          <el-input v-model="formData.eventCode" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <!-- <el-form-item :label="$t('module.equipmentManager.baseinfoevent.category')" prop="category">
+          <el-input v-model="formData.category" clearable :style="{width: '100%'}" />
+        </el-form-item> -->
+        <el-form-item :label="$t('module.equipmentManager.baseinfoevent.enabled')" prop="enabled">
+          <el-switch v-model="formData.enabled" :active-value="1" :inactive-value="0" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.baseinfoevent.description')" prop="description">
+          <el-input v-model="formData.description" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.baseinfoevent.remark')" prop="remark">
+          <el-input v-model="formData.remark" clearable :style="{width: '100%'}" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="close">{{ 'btn.cancel' | i18nFilter }}</el-button>
+        <el-button type="primary" @click="handelConfirm">{{ 'btn.confirm' | i18nFilter }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { editDeviceEventSetting, getDeviceEventSetting } from '@/api/equipment/param'
+import i18n from '@/lang'
+export default {
+  components: {},
+  inheritAttrs: false,
+  props: {
+    targetInfo: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      formData: {
+        eventId: undefined,
+        eventName: undefined,
+        eventCode: undefined,
+        category: undefined,
+        enabled: 1,
+        description: undefined,
+        remark: undefined,
+        equipmentId: undefined
+      },
+      rules: {
+        eventId: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.baseinfoevent.placeholdereventId'),
+          trigger: 'blur'
+        }],
+        eventName: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.baseinfoevent.placeholdereventName'),
+          trigger: 'blur'
+        }],
+        eventCode: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.baseinfoevent.placeholdereventCode'),
+          trigger: 'blur'
+        }],
+        category: [{
+          required: false,
+          message: i18n.t('module.equipmentManager.baseinfoevent.placeholdercategory'),
+          trigger: 'blur'
+        }],
+        description: [],
+        remark: []
+      }
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {
+    onOpen() {
+      this.formData.equipmentId = this.targetInfo.equipmentId
+      this.formData.id = this.targetInfo.id
+      this.getInfo()
+    },
+    onClose() {
+      this.$refs['elForm'].resetFields()
+    },
+    close() {
+      this.$emit('update:visible', false)
+    },
+    handelConfirm() {
+      this.$refs['elForm'].validate(async valid => {
+        if (!valid) return
+        const result = await editDeviceEventSetting(this.formData)
+        if (result.code === 0) {
+          this.$message({
+            type: 'success',
+            message: '修改成功！'
+          })
+          this.$emit('done')
+          this.close()
+        }
+      })
+    },
+    async getInfo() {
+      const result = await getDeviceEventSetting({
+        id: this.formData.id
+      })
+      if (result.code === 0) {
+        this.formData = result.data
+      }
+    }
+  }
+}
+
+</script>
+<style>
+</style>
diff --git a/src/views/EquipmentManager/TypeParamSetting/subpage/event/index.vue b/src/views/EquipmentManager/TypeParamSetting/subpage/event/index.vue
new file mode 100644
index 0000000..b322527
--- /dev/null
+++ b/src/views/EquipmentManager/TypeParamSetting/subpage/event/index.vue
@@ -0,0 +1,161 @@
+<!--
+ * @Date: 2020-12-15 15:36:52
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-06-29 20:26:56
+ * @FilePath: \basic-admin\src\views\EquipmentManager\TypeParamSetting\subpage\event\index.vue
+ * @Description: 设备类型参数列表
+-->
+<template>
+  <div class="param-subpage-container">
+    <div class="method-btn-area">
+      <el-input v-model="listQuery.keywords" :placeholder="$t('module.equipmentManager.baseinfoevent.searchPlaceholder')" style="width: 200px;" clearable />
+      <el-button @click="getList">{{ 'btn.search' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="showDialog = true">{{ 'btn.add' | i18nFilter }}</el-button>
+    </div>
+    <base-table :table-config="tableProps" :table-data="list" :is-loading="listLoading" :page="listQuery.current" :limit="listQuery.size">
+      <method-btn slot="handleBtn" :method-list="tableBtn" :is-fixed="false" :width="180" @clickBtn="handleClick" />
+    </base-table>
+    <pagination :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.size" @pagination="getList" />
+    <add-form :visible.sync="showDialog" :target-info="{id: listQuery.equipmentId}" @done="getList" />
+    <edit-form :visible.sync="showEditDialog" :target-info="{id: curEditId, equipmentId: listQuery.equipmentId }" @done="getList" />
+  </div>
+</template>
+
+<script>
+import dataDict from '@/filters/DataDict'
+// edit here
+const tableBtn = [{
+  type: 'edit',
+  btnName: 'btn.edit'
+}, {
+  type: 'delete',
+  btnName: 'btn.delete'
+}]
+//  {
+//   prop: 'category',
+//   label: i18n.t('module.equipmentManager.baseinfoevent.category'),
+//   align: 'center'
+// },
+const tableProps = [{
+  prop: 'eventId',
+  label: i18n.t('module.equipmentManager.baseinfoevent.eventId'),
+  align: 'center'
+}, {
+  prop: 'eventCode',
+  label: i18n.t('module.equipmentManager.baseinfoevent.eventCode'),
+  align: 'center'
+}, {
+  prop: 'eventName',
+  label: i18n.t('module.equipmentManager.baseinfoevent.eventName'),
+  align: 'center'
+}, {
+  prop: 'enabled',
+  label: i18n.t('module.equipmentManager.baseinfoevent.enabled'),
+  align: 'center',
+  filter: dataDict('yesOrNo')
+}, {
+  prop: 'description',
+  label: i18n.t('module.equipmentManager.baseinfoevent.description'),
+  align: 'center'
+}, {
+  prop: 'remark',
+  label: i18n.t('module.equipmentManager.baseinfoevent.remark'),
+  align: 'center'
+}]
+import BaseTable from '@/components/BaseTable'
+// edit here
+import { getDeviceEventSettingList, delDeviceEventSetting } from '@/api/equipment/param'
+import AddForm from './addForm'
+import EditForm from './editForm'
+import Pagination from '@/components/Pagination'
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import i18n from '@/lang'
+export default {
+  name: 'OrgManager',
+  components: { Pagination, BaseTable, MethodBtn, AddForm, EditForm },
+  props: {},
+  data() {
+    return {
+      tableBtn,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      showDialog: false,
+      curEditId: null,
+      showEditDialog: false,
+      listQuery: {
+        current: 1,
+        size: 10,
+        equipmentId: null
+      }
+    }
+  },
+  created() {
+    this.listQuery.equipmentId = this.$route.query.id
+    this.getList()
+    // this.listLoading = false
+  },
+  mounted() {},
+  methods: {
+    handleClick(raw) {
+      console.log(raw)
+      switch (raw.type) {
+        case 'delete':
+          this.$confirm(i18n.t('deleteMsgBox.content'), i18n.t('deleteMsgBox.hint'), {
+            confirmButtonText: i18n.t('btn.confirm'),
+            cancelButtonText: i18n.t('btn.cancel'),
+            type: 'warning'
+          }).then(async() => {
+            // 走接口
+            const result = await delDeviceEventSetting({
+              id: raw.data.id
+            })
+            if (result.code === 0) {
+              this.$message({
+                type: 'success',
+                message: i18n.t('deleteMsgBox.doneMsg')
+              })
+              this.getList()
+            }
+          })
+          break
+        case 'edit':
+          this.showEditDialog = true
+          this.curEditId = raw.data.id
+          break
+      }
+    },
+    async getList() {
+      this.listLoading = true
+      // edit here
+      console.log(this.listQuery)
+      const res = await getDeviceEventSettingList(this.listQuery)
+      if (res.code === 0) {
+        this.list = res.data.records ? res.data.records : []
+        this.total = res.data.total
+        this.listLoading = false
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.param-subpage-container {
+  padding: 40px;
+  .method-btn-area {
+    padding: 15px 30px;
+    margin: 10px 0 20px 0;
+    border: 1px solid #dfe6ec;
+  }
+}
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/EquipmentManager/TypeParamSetting/subpage/param/addForm.vue b/src/views/EquipmentManager/TypeParamSetting/subpage/param/addForm.vue
new file mode 100644
index 0000000..7ea829f
--- /dev/null
+++ b/src/views/EquipmentManager/TypeParamSetting/subpage/param/addForm.vue
@@ -0,0 +1,274 @@
+<!--
+ * @Date: 2021-01-18 10:47:42
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-06-29 15:21:21
+ * @FilePath: \basic-admin\src\views\EquipmentManager\TypeParamSetting\subpage\param\addForm.vue
+ * @Description:
+-->
+<template>
+  <div>
+    <el-dialog v-bind="$attrs" :title="$t('module.equipmentManager.baseinfoparam.addDialogTitle')" v-on="$listeners" @open="onOpen" @close="onClose">
+      <el-row :gutter="15">
+        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" :label-width="language === 'zh' ? '120px' : '200px'">
+          <el-col :span="12">
+            <el-form-item :label="$t('module.equipmentManager.baseinfoparam.paramName')" prop="paramName">
+              <el-input v-model="formData.paramName" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('module.equipmentManager.baseinfoparam.paramId')" prop="paramId">
+              <el-input v-model="formData.paramId" type="number" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('module.equipmentManager.baseinfoparam.paramCode')" prop="paramCode">
+              <el-input v-model="formData.paramCode" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('module.equipmentManager.baseinfoparam.format')" prop="format">
+              <el-input v-model="formData.format" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('module.equipmentManager.baseinfoparam.valueType')" prop="valueType">
+              <el-input v-model="formData.valueType" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('module.equipmentManager.baseinfoparam.unit')" prop="unit">
+              <el-input v-model="formData.unit" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('module.equipmentManager.baseinfoparam.maxValue')" prop="maxValue">
+              <el-input v-model="formData.maxValue" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('module.equipmentManager.baseinfoparam.minValue')" prop="minValue">
+              <el-input v-model="formData.minValue" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('module.equipmentManager.baseinfoparam.defaultValue')" prop="defaultValue">
+              <el-input v-model="formData.defaultValue" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col>
+          <!-- <el-col :span="12">
+            <el-form-item :label="$t('module.equipmentManager.baseinfoparam.category')" prop="category">
+              <el-select v-model="formData.category" clearable :style="{width: '100%'}">
+                <el-option
+                  v-for="(item, index) in categoryOptions"
+                  :key="index"
+                  :label="item.name"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col> -->
+          <!-- <el-col :span="12">
+            <el-form-item :label="$t('module.equipmentManager.baseinfoparam.dataWithPlc')" prop="dataWithPlc">
+              <el-input v-model="formData.dataWithPlc" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col> -->
+          <el-col :span="12">
+            <el-form-item :label="$t('module.equipmentManager.baseinfoparam.enabled')" prop="enabled">
+              <el-switch v-model="formData.enabled" :active-value="1" :inactive-value="0" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('module.equipmentManager.baseinfoparam.type')" prop="type">
+              <!-- <el-input v-model="formData.type" clearable :style="{width: '100%'}" /> -->
+              <el-select v-model="formData.type" clearable :style="{width: '100%'}">
+                <el-option
+                  label="SV"
+                  value="SV"
+                />
+                <el-option
+                  label="DV"
+                  value="DV"
+                />
+                <el-option
+                  label="ECV"
+                  value="ECV"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('module.equipmentManager.baseinfoparam.uploadSpc')" prop="uploadSpc">
+              <el-switch v-model="formData.uploadSpc" :active-value="1" :inactive-value="0" />
+            </el-form-item>
+          </el-col>
+          <!-- <el-col :span="12">
+            <el-form-item :label="$t('module.equipmentManager.baseinfoparam.note')" prop="note">
+              <el-input v-model="formData.note" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col> -->
+          <el-col :span="12">
+            <el-form-item :label="$t('module.equipmentManager.baseinfoparam.isCollected')" prop="isCollected">
+              <el-switch v-model="formData.isCollected" :active-value="1" :inactive-value="0" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="23">
+            <el-form-item :label="$t('module.equipmentManager.baseinfoparam.description')" prop="description">
+              <el-input v-model="formData.description" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="23">
+            <el-form-item :label="$t('module.equipmentManager.baseinfoparam.remark')" prop="remark">
+              <el-input v-model="formData.remark" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col>
+        </el-form>
+      </el-row>
+      <div slot="footer">
+        <el-button @click="close">{{ 'btn.cancel' | i18nFilter }}</el-button>
+        <el-button type="primary" @click="handelConfirm">{{ 'btn.confirm' | i18nFilter }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+const categoryOptions = [{
+  id: 'M',
+  name: i18n.t('module.equipmentManager.baseinfoparam.M')
+}, {
+  id: 'V',
+  name: i18n.t('module.equipmentManager.baseinfoparam.V')
+}, {
+  id: 'P',
+  name: i18n.t('module.equipmentManager.baseinfoparam.P')
+}, {
+  id: 'R',
+  name: i18n.t('module.equipmentManager.baseinfoparam.R')
+}, {
+  id: 'C',
+  name: i18n.t('module.equipmentManager.baseinfoparam.C')
+}, {
+  id: 'I',
+  name: i18n.t('module.equipmentManager.baseinfoparam.I')
+}]
+import { addDeviceParam, getDeviceParamCode } from '@/api/equipment/param'
+import { getLanguage } from '@/lang/index'
+import i18n from '@/lang'
+export default {
+  components: {},
+  inheritAttrs: false,
+  props: {
+    targetInfo: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      formData: {
+        paramName: undefined,
+        paramId: undefined,
+        paramCode: undefined,
+        format: undefined,
+        valueType: undefined,
+        unit: undefined,
+        maxValue: undefined,
+        minValue: undefined,
+        defaultValue: undefined,
+        category: undefined,
+        dataWithPlc: undefined,
+        enabled: true,
+        type: undefined,
+        uploadSpc: true,
+        note: undefined,
+        isCollected: true,
+        description: undefined,
+        remark: undefined,
+        equipmentId: undefined
+      },
+      categoryOptions,
+      rules: {
+        paramName: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.baseinfoparam.placeholderparamName'),
+          trigger: 'blur'
+        }],
+        paramId: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.baseinfoparam.placeholderparamId'),
+          trigger: 'blur'
+        }],
+        paramCode: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.baseinfoparam.placeholderparamCode'),
+          trigger: 'blur'
+        }],
+        format: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.baseinfoparam.placeholderformat'),
+          trigger: 'blur'
+        }],
+        valueType: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.baseinfoparam.placeholderValueType'),
+          trigger: 'blur'
+        }],
+        category: [{
+          required: false,
+          message: i18n.t('module.equipmentManager.baseinfoparam.placeholdertype'),
+          trigger: 'blur'
+        }],
+        dataWithPlc: [{
+          required: false,
+          message: i18n.t('module.equipmentManager.baseinfoparam.placeholderdataWithPlc'),
+          trigger: 'blur'
+        }],
+        unit: [{
+          required: false,
+          message: i18n.t('module.equipmentManager.baseinfoparam.placeholderunit'),
+          trigger: 'blur'
+        }]
+      },
+      language: getLanguage()
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {
+    onOpen() {
+      this.formData.equipmentId = this.targetInfo?.id
+      this.getCode()
+    },
+    onClose() {
+      this.$refs['elForm'].resetFields()
+    },
+    close() {
+      this.$emit('update:visible', false)
+    },
+    handelConfirm() {
+      this.$refs['elForm'].validate(async valid => {
+        if (!valid) return
+        const result = await addDeviceParam(this.formData)
+        if (result.code === 0) {
+          this.$message({
+            type: 'success',
+            message: '添加成功！'
+          })
+          this.$emit('done')
+          this.close()
+        }
+      })
+    },
+    async getCode() {
+      const result = await getDeviceParamCode()
+      if (result.code === 0) {
+        this.formData.paramCode = result.data
+      }
+    }
+  }
+}
+
+</script>
+<style>
+</style>
diff --git a/src/views/EquipmentManager/TypeParamSetting/subpage/param/editForm.vue b/src/views/EquipmentManager/TypeParamSetting/subpage/param/editForm.vue
new file mode 100644
index 0000000..09a5c07
--- /dev/null
+++ b/src/views/EquipmentManager/TypeParamSetting/subpage/param/editForm.vue
@@ -0,0 +1,278 @@
+<!--
+ * @Date: 2021-01-18 10:47:42
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-04-21 14:49:19
+ * @FilePath: \basic-admin\src\views\EquipmentManager\TypeParamSetting\subpage\param\editForm.vue
+ * @Description:
+-->
+<template>
+  <div>
+    <el-dialog v-bind="$attrs" :title="$t('module.equipmentManager.baseinfoparam.addDialogTitle')" v-on="$listeners" @open="onOpen" @close="onClose">
+      <el-row :gutter="15">
+        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" :label-width="language === 'zh' ? '120px' : '200px'">
+          <el-col :span="12">
+            <el-form-item :label="$t('module.equipmentManager.baseinfoparam.paramName')" prop="paramName">
+              <el-input v-model="formData.paramName" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('module.equipmentManager.baseinfoparam.paramId')" prop="paramId">
+              <el-input v-model="formData.paramId" type="number" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('module.equipmentManager.baseinfoparam.paramCode')" prop="paramCode">
+              <el-input v-model="formData.paramCode" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('module.equipmentManager.baseinfoparam.format')" prop="format">
+              <el-input v-model="formData.format" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('module.equipmentManager.baseinfoparam.valueType')" prop="valueType">
+              <el-input v-model="formData.valueType" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('module.equipmentManager.baseinfoparam.unit')" prop="unit">
+              <el-input v-model="formData.unit" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('module.equipmentManager.baseinfoparam.maxValue')" prop="maxValue">
+              <el-input v-model="formData.maxValue" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('module.equipmentManager.baseinfoparam.minValue')" prop="minValue">
+              <el-input v-model="formData.minValue" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('module.equipmentManager.baseinfoparam.defaultValue')" prop="defaultValue">
+              <el-input v-model="formData.defaultValue" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col>
+          <!-- <el-col :span="12">
+            <el-form-item :label="$t('module.equipmentManager.baseinfoparam.category')" prop="category">
+              <el-select v-model="formData.category" clearable :style="{width: '100%'}">
+                <el-option
+                  v-for="(item, index) in categoryOptions"
+                  :key="index"
+                  :label="item.name"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('module.equipmentManager.baseinfoparam.dataWithPlc')" prop="dataWithPlc">
+              <el-input v-model="formData.dataWithPlc" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col> -->
+          <el-col :span="12">
+            <el-form-item :label="$t('module.equipmentManager.baseinfoparam.enabled')" prop="enabled">
+              <el-switch v-model="formData.enabled" :active-value="1" :inactive-value="0" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('module.equipmentManager.baseinfoparam.type')" prop="type">
+              <el-select v-model="formData.type" clearable :style="{width: '100%'}">
+                <el-option
+                  label="SV"
+                  value="SV"
+                />
+                <el-option
+                  label="DV"
+                  value="DV"
+                />
+                <el-option
+                  label="ECV"
+                  value="ECV"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('module.equipmentManager.baseinfoparam.uploadSpc')" prop="uploadSpc">
+              <el-switch v-model="formData.uploadSpc" :active-value="1" :inactive-value="0" />
+            </el-form-item>
+          </el-col>
+          <!-- <el-col :span="12">
+            <el-form-item :label="$t('module.equipmentManager.baseinfoparam.note')" prop="note">
+              <el-input v-model="formData.note" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col> -->
+          <el-col :span="12">
+            <el-form-item :label="$t('module.equipmentManager.baseinfoparam.isCollected')" prop="isCollected">
+              <el-switch v-model="formData.isCollected" :active-value="1" :inactive-value="0" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="23">
+            <el-form-item :label="$t('module.equipmentManager.baseinfoparam.description')" prop="description">
+              <el-input v-model="formData.description" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="23">
+            <el-form-item :label="$t('module.equipmentManager.baseinfoparam.remark')" prop="remark">
+              <el-input v-model="formData.remark" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col>
+        </el-form>
+      </el-row>
+      <div slot="footer">
+        <el-button @click="close">{{ 'btn.cancel' | i18nFilter }}</el-button>
+        <el-button type="primary" @click="handelConfirm">{{ 'btn.confirm' | i18nFilter }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+const categoryOptions = [{
+  id: 'M',
+  name: 'Material Related Value'
+}, {
+  id: 'V',
+  name: 'Process Actual Value'
+}, {
+  id: 'P',
+  name: 'Recipe Parameter'
+}, {
+  id: 'R',
+  name: 'Material Related Value'
+}, {
+  id: 'C',
+  name: 'Consumable Value'
+}, {
+  id: 'I',
+  name: 'Interface Related'
+}]
+import { getDeviceParam, editDeviceParam } from '@/api/equipment/param'
+import { getLanguage } from '@/lang/index'
+import i18n from '@/lang'
+export default {
+  components: {},
+  inheritAttrs: false,
+  props: {
+    targetInfo: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      formData: {
+        paramName: undefined,
+        paramId: undefined,
+        paramCode: undefined,
+        format: undefined,
+        field103: undefined,
+        unit: undefined,
+        maxValue: undefined,
+        minValue: undefined,
+        defaultValue: undefined,
+        type: undefined,
+        dataWithPlc: undefined,
+        enabled: true,
+        field113: undefined,
+        uploadSpc: true,
+        field115: undefined,
+        isCollected: true,
+        description: undefined,
+        remark: undefined,
+        equipmentId: undefined
+      },
+      categoryOptions,
+      rules: {
+        paramName: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.baseinfoparam.placeholderparamName'),
+          trigger: 'blur'
+        }],
+        paramId: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.baseinfoparam.placeholderparamId'),
+          trigger: 'blur'
+        }],
+        paramCode: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.baseinfoparam.placeholderparamCode'),
+          trigger: 'blur'
+        }],
+        format: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.baseinfoparam.placeholderformat'),
+          trigger: 'blur'
+        }],
+        valueType: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.baseinfoparam.placeholderValueType'),
+          trigger: 'blur'
+        }],
+        category: [{
+          required: false,
+          message: i18n.t('module.equipmentManager.baseinfoparam.placeholdertype'),
+          trigger: 'blur'
+        }],
+        dataWithPlc: [{
+          required: false,
+          message: i18n.t('module.equipmentManager.baseinfoparam.placeholderdataWithPlc'),
+          trigger: 'blur'
+        }],
+        unit: [{
+          required: false,
+          message: i18n.t('module.equipmentManager.baseinfoparam.placeholderunit'),
+          trigger: 'blur'
+        }]
+      },
+      language: getLanguage()
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {
+    console.log(this.language)
+  },
+  mounted() {},
+  methods: {
+    onOpen() {
+      this.getInfo()
+      // this.formData.id = this.targetInfo?.id
+      this.formData.equipmentId = this.targetInfo?.equipmentId
+    },
+    onClose() {
+      this.$refs['elForm'].resetFields()
+    },
+    close() {
+      this.$emit('update:visible', false)
+    },
+    handelConfirm() {
+      this.$refs['elForm'].validate(async valid => {
+        if (!valid) return
+        const result = await editDeviceParam(this.formData)
+        if (result.code === 0) {
+          this.$message({
+            type: 'success',
+            message: '修改成功！'
+          })
+          this.$emit('done')
+          this.close()
+        }
+      })
+    },
+    async getInfo() {
+      const result = await getDeviceParam({
+        id: this.targetInfo?.id
+      })
+      if (result.code === 0) {
+        this.formData = result.data
+      }
+    }
+  }
+}
+
+</script>
+<style>
+</style>
diff --git a/src/views/EquipmentManager/TypeParamSetting/subpage/param/index.vue b/src/views/EquipmentManager/TypeParamSetting/subpage/param/index.vue
new file mode 100644
index 0000000..282f363
--- /dev/null
+++ b/src/views/EquipmentManager/TypeParamSetting/subpage/param/index.vue
@@ -0,0 +1,224 @@
+<!--
+ * @Date: 2020-12-15 15:36:52
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-06-29 20:46:28
+ * @FilePath: \basic-admin\src\views\EquipmentManager\TypeParamSetting\subpage\param\index.vue
+ * @Description: 设备类型参数列表
+-->
+<template>
+  <div class="param-subpage-container">
+    <div class="method-btn-area">
+      <el-input v-model="listQuery.paramName" :placeholder="$t('module.equipmentManager.baseinfoparam.searchPlaceholder')" style="width: 200px;" clearable />
+      <el-button @click="getList">{{ 'btn.search' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="showDialog = true">{{ 'btn.add' | i18nFilter }}</el-button>
+    </div>
+    <base-table :table-config="tableProps" :table-data="list" :is-loading="listLoading" :page="listQuery.current" :limit="listQuery.size" :is-fixed="true">
+      <method-btn slot="handleBtn" :method-list="tableBtn" :is-fixed="true" @clickBtn="handleClick" />
+    </base-table>
+    <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.size" @pagination="getList" />
+    <add-form :visible.sync="showDialog" :target-info="{id: listQuery.equipmentId}" @done="getList" />
+    <edit-form :visible.sync="showEditDialog" :target-info="{id: curEditId, equipmentId: listQuery.equipmentId }" @done="getList" />
+  </div>
+</template>
+
+<script>
+import dataDict from '@/filters/DataDict'
+// import equipmentDict from '@/filters/equipment'
+// edit here
+const tableBtn = [{
+  type: 'edit',
+  btnName: 'btn.edit'
+}, {
+  type: 'delete',
+  btnName: 'btn.delete'
+}]
+//  {
+//   prop: 'dataWithPlc',
+//   label: i18n.t('module.equipmentManager.baseinfoparam.dataWithPlc'),
+//   align: 'center',
+//   width: '120px'
+// }, {
+//   prop: 'category',
+//   label: i18n.t('module.equipmentManager.baseinfoparam.category'),
+//   align: 'center',
+//   width: '120px',
+//   filter: equipmentDict('category')
+// },
+const tableProps = [{
+  prop: 'paramId',
+  label: i18n.t('module.equipmentManager.baseinfoparam.paramId'),
+  align: 'center'
+}, {
+  prop: 'paramName',
+  label: i18n.t('module.equipmentManager.baseinfoparam.paramName'),
+  align: 'center',
+  width: '120px'
+}, {
+  prop: 'paramCode',
+  label: i18n.t('module.equipmentManager.baseinfoparam.paramCode'),
+  align: 'center',
+  width: '120px'
+}, {
+  prop: 'format',
+  label: i18n.t('module.equipmentManager.baseinfoparam.format'),
+  align: 'center',
+  width: '120px'
+}, {
+  prop: 'unit',
+  label: i18n.t('module.equipmentManager.baseinfoparam.unit'),
+  align: 'center',
+  width: '120px'
+}, {
+  prop: 'maxValue',
+  label: i18n.t('module.equipmentManager.baseinfoparam.maxValue'),
+  align: 'center',
+  width: '120px'
+}, {
+  prop: 'minValue',
+  label: i18n.t('module.equipmentManager.baseinfoparam.minValue'),
+  align: 'center',
+  width: '120px'
+}, {
+  prop: 'defaultValue',
+  label: i18n.t('module.equipmentManager.baseinfoparam.defaultValue'),
+  align: 'center',
+  width: '120px'
+}, {
+  prop: 'valueType',
+  label: i18n.t('module.equipmentManager.baseinfoparam.valueType'),
+  align: 'center',
+  width: '120px'
+}, {
+  prop: 'enabled',
+  label: i18n.t('module.equipmentManager.baseinfoparam.enabled'),
+  align: 'center',
+  width: '120px',
+  filter: dataDict('yesOrNo')
+}, {
+  prop: 'type',
+  label: i18n.t('module.equipmentManager.baseinfoparam.type'),
+  align: 'center',
+  width: '120px'
+}, {
+  prop: 'uploadSpc',
+  label: i18n.t('module.equipmentManager.baseinfoparam.uploadSpc'),
+  align: 'center',
+  width: '120px',
+  filter: dataDict('yesOrNo')
+}, {
+  prop: 'isCollected',
+  label: i18n.t('module.equipmentManager.baseinfoparam.isCollected'),
+  align: 'center',
+  width: '120px',
+  filter: dataDict('yesOrNo')
+}, {
+  prop: 'description',
+  label: i18n.t('module.equipmentManager.baseinfoparam.description'),
+  align: 'center',
+  width: '120px'
+}, {
+  prop: 'remark',
+  label: i18n.t('module.equipmentManager.baseinfoparam.remark'),
+  align: 'center',
+  width: '120px'
+}]
+import BaseTable from '@/components/BaseTable'
+// edit here
+import { getDeviceParamList, delDeviceParam } from '@/api/equipment/param'
+import AddForm from './addForm'
+import EditForm from './editForm'
+import Pagination from '@/components/Pagination'
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import i18n from '@/lang'
+export default {
+  name: 'OrgManager',
+  components: { Pagination, BaseTable, MethodBtn, AddForm, EditForm },
+  props: {},
+  data() {
+    return {
+      tableBtn,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      showDialog: false,
+      curEditId: null,
+      showEditDialog: false,
+      listQuery: {
+        current: 1,
+        size: 10,
+        equipmentId: null,
+        paramName: null
+      }
+    }
+  },
+  created() {
+    this.listQuery.equipmentId = this.$route.query.id
+    this.getList()
+    // this.listLoading = false
+  },
+  mounted() {},
+  methods: {
+    handleClick(raw) {
+      console.log(raw)
+      switch (raw.type) {
+        case 'delete':
+          this.$confirm(i18n.t('deleteMsgBox.content'), i18n.t('deleteMsgBox.hint'), {
+            confirmButtonText: i18n.t('btn.confirm'),
+            cancelButtonText: i18n.t('btn.cancel'),
+            type: 'warning'
+          }).then(async() => {
+            // 走接口
+            const result = await delDeviceParam({
+              id: raw.data.id
+            })
+            if (result.code === 0) {
+              this.$message({
+                type: 'success',
+                message: i18n.t('deleteMsgBox.doneMsg')
+              })
+              this.getList()
+            }
+          })
+          break
+        case 'edit':
+          this.showEditDialog = true
+          this.curEditId = raw.data.id
+          break
+      }
+    },
+    async getList(val) {
+      this.listLoading = true
+      // edit here
+      if (val) {
+        this.listQuery.current = val.current
+      }
+      const res = await getDeviceParamList(this.listQuery)
+      if (res.code === 0) {
+        this.list = res.data.records ? res.data.records : []
+        this.total = res.data.total
+        this.listLoading = false
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.param-subpage-container {
+  padding: 40px;
+  .method-btn-area {
+    padding: 15px 30px;
+    margin: 10px 0 20px 0;
+    border: 1px solid #dfe6ec;
+  }
+}
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/EquipmentManager/equipmentManagerManage/AddorEditForm.vue b/src/views/EquipmentManager/equipmentManagerManage/AddorEditForm.vue
new file mode 100644
index 0000000..eb31f4a
--- /dev/null
+++ b/src/views/EquipmentManager/equipmentManagerManage/AddorEditForm.vue
@@ -0,0 +1,159 @@
+<template>
+  <el-drawer
+    :append-to-body="true"
+    :show-close="false"
+    :visible.sync="visible"
+    size="40%"
+  >
+    <div slot="title" style=" background-color:#02BCFF;font-size:1.5em;color:white;padding:5px 20px">
+      {{ !dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter }}
+    </div>
+    <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="150px" @keyup.enter.native="dataFormSubmit()">
+      <el-form-item :label="$t('module.equipmentManager.eqManagerManage.equipmentName')" prop="equipmentId">
+        <el-select v-model="dataForm.equipmentId" :placeholder="$i18nForm(['placeholder.select', $t('module.equipmentManager.eqManagerManage.equipmentName')])" clearable>
+          <el-option v-for="item in eqList" :key="item.id" :value="item.id" :label="item.name" />
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="$t('module.equipmentManager.eqManagerManage.equipmentCode')" prop="equipmentId">
+        <el-select v-model="dataForm.equipmentId" :placeholder="$i18nForm(['placeholder.select', $t('module.equipmentManager.eqManagerManage.equipmentCode')])" clearable disabled>
+          <el-option v-for="item in eqList" :key="item.id" :value="item.id" :label="item.code" />
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="$t('module.equipmentManager.eqManagerManage.worker')" prop="workerId">
+        <el-select v-model="dataForm.workerId" :placeholder="$i18nForm(['placeholder.select', $t('module.equipmentManager.eqManagerManage.worker')])" clearable @change="changeWorker">
+          <el-option v-for="item in roleList" :key="item.userId" :value="item.userId" :label="item.name" />
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <div class="drawer-footer">
+      <el-button @click="visible = false">{{ 'btn.back' | i18nFilter }}</el-button>
+      <el-button type="primary" :loading="btnLoading" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
+    </div>
+  </el-drawer>
+</template>
+
+<script>
+import { getInfo, add, edit } from '@/api/equipment/eqManager'
+
+export default {
+  props: {
+    workerList: {
+      type: Array,
+      default: () => []
+    },
+    eqList: {
+      type: Array,
+      default: () => []
+    },
+    roleList: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      btnLoading: false,
+      dataForm: {
+        id: 0,
+        equipmentId: '',
+        workerId: ''
+      },
+      roleId: '',
+      dataRule: {
+        equipmentId: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.equipmentManager.eqManagerManage.equipmentName')]), trigger: 'blur' }
+        ],
+        workerId: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.equipmentManager.eqManagerManage.worker')]), trigger: 'blur' }
+        ]
+      },
+      roleObj: {}
+    }
+  },
+  watch: {
+    roleList: function(val) {
+      this.roleObj = {}
+      val.map(item => {
+        this.roleObj[item.id] = item.dataName
+      })
+    }
+  },
+  mounted() {},
+  methods: {
+    init(id) {
+      this.dataForm.id = id || ''
+      this.btnLoading = false
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          getInfo({ id: this.dataForm.id }).then(res => {
+            this.dataForm.equipmentId = res.data.equipmentId
+            this.dataForm.workerId = res.data.workerId
+          })
+        }
+      })
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.btnLoading = true
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          const data = {
+            'equipmentId': this.dataForm.equipmentId,
+            'workerId': this.dataForm.workerId,
+            'id': this.dataForm.id
+          }
+          if (this.dataForm.id) {
+            edit(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.btnLoading = false
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          } else {
+            add(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.$refs['dataForm'].resetFields()
+                  this.btnLoading = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          }
+        }
+      })
+    },
+    changeWorker(v) {
+      for (let i = 0; i < this.workerList.length; i++) {
+        if (v === this.workerList[i].id) {
+          this.roleId = this.workerList[i].roleId
+          return
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.drawer-footer {
+  width: 100%;
+  margin-top: 50px;
+  border-top: 1px solid #e8e8e8;
+  padding: 10px 50px;
+  text-align: left;
+  background: #fff;
+}
+</style>
diff --git a/src/views/EquipmentManager/equipmentManagerManage/index.vue b/src/views/EquipmentManager/equipmentManagerManage/index.vue
new file mode 100644
index 0000000..3006bdb
--- /dev/null
+++ b/src/views/EquipmentManager/equipmentManagerManage/index.vue
@@ -0,0 +1,204 @@
+<!--
+ * @Author: gtz
+ * @Date: 2021-04-16 16:05:31
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-23 09:14:27
+ * @Description: file content
+-->
+<template>
+  <div class="usermanager-container">
+    <div class="method-btn-area">
+      <el-select v-model="listQuery.workerId" :placeholder="$t('module.equipmentManager.eqManagerManage.worker')" filterable clearable style="width: 200px;">
+        <el-option
+          v-for="item in roleList"
+          :key="item.userId"
+          :label="item.name"
+          :value="item.userId"
+        />
+      </el-select>
+      <el-select v-model="listQuery.equipmentId" :placeholder="$t('module.equipmentManager.eqManagerManage.equipmentName')" filterable clearable style="width: 200px;">
+        <el-option
+          v-for="item in eqList"
+          :key="item.id"
+          :label="item.name"
+          :value="item.id"
+        />
+      </el-select>
+      <!-- <el-select v-model="listQuery.workerId" :placeholder="$t('module.equipmentManager.eqManagerManage.worker')" clearable style="width: 200px;">
+        <el-option
+          v-for="item in workerList"
+          :key="item.id"
+          :label="item.name"
+          :value="item.id"
+        />
+      </el-select> -->
+      <el-button type="primary" @click="getList">{{ 'btn.search' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="handleAdd">{{ 'btn.add' | i18nFilter }}</el-button>
+    </div>
+    <base-table :table-config="tableProps" :table-data="list" :is-loading="listLoading" :page="listQuery.current" :limit="listQuery.size">
+      <method-btn slot="handleBtn" :method-list="tableBtn" @clickBtn="handleClick" />
+    </base-table>
+    <pagination :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.size" @pagination="getList" />
+    <add-or-edit-form ref="addorEditDrawer" :role-list="roleList" :worker-list="workerList" :eq-list="eqList" :visible.sync="showAddorEditDialog" @refreshDataList="getList" @done="getList" />
+  </div>
+</template>
+
+<script>
+
+const tableBtn = [{
+  type: 'edit',
+  btnName: 'btn.edit'
+}, {
+  type: 'delete',
+  btnName: 'btn.delete'
+}]
+const tableProps = [{
+  prop: 'equipmentName',
+  label: i18n.t('module.equipmentManager.eqManagerManage.equipmentName'),
+  align: 'center'
+}, {
+  prop: 'equipmentCode',
+  label: i18n.t('module.equipmentManager.eqManagerManage.equipmentCode'),
+  align: 'center'
+}, {
+  prop: 'equipmentDesc',
+  label: i18n.t('module.equipmentManager.eqManagerManage.description'),
+  align: 'center'
+}, {
+  prop: 'workerName',
+  label: i18n.t('module.equipmentManager.eqManagerManage.worker'),
+  align: 'center'
+}, {
+  prop: 'ruleName',
+  label: i18n.t('module.equipmentManager.eqManagerManage.roleName'),
+  align: 'center'
+}]
+// , {
+//   prop: 'remark',
+//   label: i18n.t('module.equipmentManager.eqManagerManage.remark'),
+//   align: 'center'
+// }
+import AddOrEditForm from './AddorEditForm'
+import BaseTable from '@/components/BaseTable'
+// edit here
+import { page, del, getEqList, getWorkerList, getRoleList } from '@/api/equipment/eqManager'
+import Pagination from '@/components/Pagination'
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import i18n from '@/lang'
+export default {
+  name: 'OrgManager',
+  components: {
+    Pagination,
+    BaseTable,
+    MethodBtn,
+    AddOrEditForm
+  },
+  props: {},
+  data() {
+    return {
+      tableBtn,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      showDialog: false,
+      curEditId: null,
+      curStatus: null,
+      showAddorEditDialog: false,
+      listQuery: {
+        current: 1,
+        size: 10,
+        equipmentId: null,
+        workerId: null
+      },
+      eqList: [],
+      workerList: [],
+      roleList: []
+    }
+  },
+  created() {},
+  mounted() {
+    this.getListQuery()
+  },
+  methods: {
+    handleClick(raw) {
+      switch (raw.type) {
+        case 'edit':
+          this.showAddorEditDialog = true
+          this.$nextTick(() => {
+            this.$refs.addorEditDrawer.init(raw.data.id)
+          })
+          break
+        case 'delete':
+          this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}?`, this.$t('module.basicData.visual.Tips'), {
+            confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+            cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+            type: 'warning'
+          }).then(() => {
+            del({ id: raw.data.id }).then(response => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.getList()
+                }
+              })
+            })
+          }).catch(() => {})
+      }
+    },
+    handleAdd() {
+      this.showAddorEditDialog = true
+      this.$nextTick(() => {
+        this.$refs.addorEditDrawer.init()
+      })
+    },
+    async getList() {
+      this.listLoading = true
+      // edit here
+      const res = await page(this.listQuery)
+      if (res.code === 0) {
+        this.list = res.data.records
+        this.total = res.data.total
+        this.listLoading = false
+      }
+    },
+    async getListQuery() {
+      const resEq = await getEqList({
+        current: 1,
+        size: 999
+      })
+      this.eqList = resEq.data.records
+      const resWorker = await getWorkerList({
+        current: 1,
+        size: 999
+      })
+      this.workerList = resWorker.data.records
+      const resRole = await getRoleList()
+      this.roleList = resRole.data
+      console.log(this.roleList)
+      this.getList()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.usermanager-container {
+  padding: 20px;
+  .method-btn-area {
+    padding: 15px 30px;
+    margin: 10px 0 20px 0;
+    border: 1px solid #dfe6ec;
+  }
+}
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/EquipmentManager/equipmentParams/choiceParamModel.vue b/src/views/EquipmentManager/equipmentParams/choiceParamModel.vue
new file mode 100644
index 0000000..2984ce4
--- /dev/null
+++ b/src/views/EquipmentManager/equipmentParams/choiceParamModel.vue
@@ -0,0 +1,75 @@
+<!--
+ * @Author: gtz
+ * @Date: 2021-06-17 16:54:55
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-06-17 17:19:56
+ * @Description: file content
+-->
+<template>
+  <div>
+    <el-dialog :visible.sync="visible" :title="$t('module.equipmentManager.equipmentParams.choiceParam')" @open="onOpen" @close="onClose">
+      <el-checkbox-group
+        v-model="checkedItems"
+        :min="0"
+        :max="100"
+      >
+        <el-checkbox v-for="item in items" :key="item.id" :label="item.id">{{ item.name }}</el-checkbox>
+      </el-checkbox-group>
+      <div slot="footer">
+        <el-button @click="close">{{ 'btn.cancel' | i18nFilter }}</el-button>
+        <el-button type="primary" @click="handelConfirm">{{ 'btn.confirm' | i18nFilter }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+// import i18n from '@/lang'
+export default {
+  components: {},
+  inheritAttrs: false,
+  props: {
+    paramNameList: {
+      type: Array,
+      default: () => []
+    },
+    checkParams: {
+      type: Array,
+      default: () => []
+    },
+    isShow: {
+      type: Boolean,
+      default: () => false
+    }
+  },
+  data() {
+    return {
+      items: [],
+      checkedItems: [],
+      visible: false
+    }
+  },
+  computed: {},
+  watch: {
+    isShow: function(val) {
+      this.visible = val
+    }
+  },
+  created() {},
+  mounted() {},
+  methods: {
+    onOpen() {
+      this.items = JSON.parse(JSON.stringify(this.paramNameList))
+      this.checkedItems = JSON.parse(JSON.stringify(this.checkParams))
+    },
+    onClose() {},
+    close() {
+      this.$emit('close')
+    },
+    handelConfirm() {
+      this.$emit('handelConfirm', this.checkedItems)
+    }
+  }
+}
+</script>
+<style>
+</style>
diff --git a/src/views/EquipmentManager/equipmentParams/index.vue b/src/views/EquipmentManager/equipmentParams/index.vue
new file mode 100644
index 0000000..51a5dfb
--- /dev/null
+++ b/src/views/EquipmentManager/equipmentParams/index.vue
@@ -0,0 +1,185 @@
+<!--
+ * @Author: gtz
+ * @Date: 2021-06-17 09:49:03
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-06-17 17:53:30
+ * @Description: file content
+-->
+<!--
+ * @Date: 2020-12-15 15:36:52
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-05-25 08:57:51
+ * @FilePath: \basic-admin\src\views\EquipmentManager\MaintainLog\index.vue
+ * @Description:
+-->
+<template>
+  <div class="usermanager-container">
+    <div class="method-btn-area">
+      {{ $t('module.equipmentManager.equipmentParams.startAndEndTime') }}：
+      <el-date-picker
+        v-model="date"
+        type="daterange"
+        range-separator="-"
+        :start-placeholder="$t('module.equipmentManager.equipmentParams.startTime')"
+        :end-placeholder="$t('module.equipmentManager.equipmentParams.endTime')"
+        @change="changeTime"
+      />
+      <el-button type="primary" @click="showChoiceParam">{{ $t('module.equipmentManager.equipmentParams.choiceParam') }}</el-button>
+      <el-button type="primary" @click="getList">{{ 'btn.search' | i18nFilter }}</el-button>
+    </div>
+    <el-row :gutter="20">
+      <el-col :span="4">
+        <div class="tree-select-container">
+          <Tree :tree-type="treeType" @lastNodeClick="eqChange" />
+        </div>
+      </el-col>
+      <el-col :span="20">
+        <base-table :table-config="tableProps" :table-data="list" :is-loading="listLoading" :page="listQuery.current" :limit="listQuery.size" />
+      </el-col>
+    </el-row>
+    <pagination :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.size" @pagination="getList" />
+    <choice-dialog :param-name-list="paramNameList" :check-params="checkParamName" :is-show="choiceParamShow" @handleConfirm="handleConfirm" @close="closeDialog" />
+  </div>
+</template>
+
+<script>
+import { timeFormatter } from '@/filters'
+import Tree from '@/components/Tree'
+const tableProps = [{
+  prop: 'substrateId',
+  label: i18n.t('module.equipmentManager.equipmentParams.substrateId'),
+  align: 'center'
+}, {
+  prop: 'createTime',
+  label: i18n.t('module.equipmentManager.equipmentParams.createTime'),
+  align: 'center',
+  filter: timeFormatter
+}]
+import BaseTable from '@/components/BaseTable'
+import choiceDialog from './choiceParamModel.vue'
+// edit here
+import { getParamNameList, getParamList } from '@/api/equipment/equipmentParams'
+
+import Pagination from '@/components/Pagination'
+import i18n from '@/lang'
+
+export default {
+  name: 'OrgManager',
+  components: { Pagination, BaseTable, Tree, choiceDialog },
+  props: {},
+  data() {
+    return {
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: false,
+      showDialog: false,
+      curEditId: null,
+      showEditDialog: false,
+      listQuery: {
+        current: 1,
+        size: 10,
+        startTime: '',
+        endTime: '',
+        equipmentId: null,
+        paramNameList: ''
+      },
+      paramNameList: [],
+      paramNameObj: {},
+      checkParamName: [],
+      date: null,
+      treeType: 'equipment',
+      choiceParamShow: false
+    }
+  },
+  created() {},
+  mounted() {},
+  methods: {
+    async getList() {
+      this.listLoading = true
+      this.tableProps = tableProps
+      this.checkParamName.map(item => {
+        this.tableProps.push({
+          prop: this.paramNameObj[item],
+          label: this.paramNameObj[item],
+          align: 'center'
+        })
+      })
+      // edit here
+      const result = await getParamList(this.listQuery)
+      if (result.code === 0) {
+        this.list = result.data.records.map(item => {
+          item.paramList.map(i => {
+            item[i.name] = i.value
+          })
+          return item
+        })
+        this.total = result.data.total
+        this.listLoading = false
+      }
+    },
+    async eqChange(data) {
+      this.listQuery.equipmentId = data.id
+      this.date = [new Date() - 1000 * 60 * 60 * 24, new Date()]
+      const result = await getParamNameList({ equipmentId: data.id })
+      if (result.code === 0) {
+        this.paramNameList = result.data
+        this.paramNameList(item => {
+          this.paramNameObj[item.id] = item.name
+        })
+        if (this.paramNameList.length > 100) {
+          this.listQuery.paramNameList = this.paramNameList.slice(0, 100).join(',')
+          this.checkParamName = this.paramNameList.slice(0, 100).map(item => {
+            return item.id
+          })
+        } else {
+          this.listQuery.paramNameList = 'all'
+          this.checkParamName = JSON.parse(JSON.stringify(this.ParamNameList)).map(item => {
+            return item.id
+          })
+        }
+        this.getList()
+      }
+    },
+    showChoiceParam() {
+      this.choiceParamShow = true
+    },
+    changeTime(val) {
+      this.listQuery.startTime = val ? val[0] : null
+      this.listQuery.endTime = val ? val[1] : null
+    },
+    handleConfirm(data) {
+      this.checkParamName = data
+      this.listQuery.paramNameList = data.join(',')
+      this.choiceParamShow = false
+    },
+    closeDialog() {
+      this.choiceParamShow = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.usermanager-container {
+  padding: 20px;
+  .method-btn-area {
+    padding: 15px 30px;
+    margin: 10px 0 20px 0;
+    border: 1px solid #dfe6ec;
+  }
+  .tree-select-container {
+    border: 1px solid #dfe6ec;
+    min-height: 400px;
+    padding: 20px;
+  }
+}
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/EquipmentManager/equipmentVisualization/EquipmentEnergyMonitor.vue b/src/views/EquipmentManager/equipmentVisualization/EquipmentEnergyMonitor.vue
new file mode 100644
index 0000000..08db68f
--- /dev/null
+++ b/src/views/EquipmentManager/equipmentVisualization/EquipmentEnergyMonitor.vue
@@ -0,0 +1,285 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-26 10:35:28
+ * @Description:
+-->
+<template>
+  <div class="app-container">
+    <el-form
+      :model="formData"
+      :inline="true"
+      size="medium"
+      label-width="150px"
+    >
+      <el-form-item>
+        <el-radio-group v-model="formData.timeType">
+          <el-radio-button label="Year">{{ $t('module.equipmentManager.equipmentVisualization.Year') }}</el-radio-button>
+          <el-radio-button label="Quarter">{{ $t('module.equipmentManager.equipmentVisualization.Quarter') }}</el-radio-button>
+          <el-radio-button label="Month">{{ $t('module.equipmentManager.equipmentVisualization.Month') }}</el-radio-button>
+          <el-radio-button label="Week">{{ $t('module.equipmentManager.equipmentVisualization.Week') }}</el-radio-button>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item :label="$t('module.equipmentManager.equipmentVisualization.timeSlot')" label-width="100px" prop="time">
+        <el-date-picker
+          v-model="formData.timeSlot"
+          type="daterange"
+          format="yyyy-MM-dd"
+          value-format="yyyy-MM-dd"
+          :start-placeholder="$t('module.orderManage.order.StartTime')"
+          :end-placeholder="$t('module.orderManage.order.StartTime')"
+          :range-separator="$t('module.orderManage.order.To')"
+          clearable
+        />
+      </el-form-item>
+      <el-form-item :label="$t('module.orderManage.order.WorkOrderName')" prop="workOrderId">
+        <el-select v-model="formData.workOrderId" filterable :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.WorkOrderName')])" clearable>
+          <el-option
+            v-for="item in WorkOrderList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="getList()"> {{ 'btn.search' | i18nFilter }} </el-button>
+      </el-form-item>
+    </el-form>
+    <el-radio-group v-model="barType" @change="setBarType">
+      <el-radio-button label="Electric">{{ $t('module.equipmentManager.equipmentVisualization.Electric') }}</el-radio-button>
+      <el-radio-button label="Water">{{ $t('module.equipmentManager.equipmentVisualization.Water') }}</el-radio-button>
+      <el-radio-button label="Gas">{{ $t('module.equipmentManager.equipmentVisualization.Gas') }}</el-radio-button>
+    </el-radio-group>
+    <el-card style="margin-top:10px">
+      <echarts-bar
+        v-if="BarVisible"
+        ref="BarRef"
+        :color="color"
+        :bar-style="barStyle"
+        :title="barTitle"
+        :legend="legend"
+        :x-axis="xAxis"
+        :y-axis="yAxis"
+        :series="series"
+        @refreshDataList="getList"
+      />
+    </el-card>
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <el-card style="margin-top:10px;width:100%">
+          <echarts-bar-one
+            v-if="BarVisible1"
+            :id="bar1"
+            ref="BarRef1"
+            :bar-style="barStyle1"
+            :title="barTitle1"
+            :legend="legend1"
+            :x-axis="xAxis1"
+            :y-axis="yAxis1"
+            :series="series1"
+            @refreshDataList="getList"
+          />
+        </el-card>
+      </el-col>
+      <el-col :span="12">
+        <el-card style="margin-top:10px;width:100%,">
+          <echarts-gauge
+            :id="gauge"
+            :gauge-style="gaugeStyle"
+            @refreshDataList="getList"
+          />
+          <div style="height:115px">
+            <el-row :gutter="10">
+              <el-col :span="8"><div class="grid-content bg-purple">今日用电:10837</div></el-col>
+              <el-col :span="8"><div class="grid-content bg-purple">昨日用电:18832</div></el-col>
+              <el-col :span="8"><div class="grid-content bg-purple">前日用电:10837</div></el-col>
+            </el-row>
+            <el-row :gutter="10">
+              <el-col :span="8"><div class="grid-content bg-purple">本周用电:80237</div></el-col>
+              <el-col :span="8"><div class="grid-content bg-purple">上周用电:17552</div></el-col>
+              <el-col :span="8"><div class="grid-content bg-purple">前周用电:657828</div></el-col>
+            </el-row>
+            <el-row :gutter="10">
+              <el-col :span="8"><div class="grid-content bg-purple">本月用电:767837</div></el-col>
+              <el-col :span="8"><div class="grid-content bg-purple">上月用电:785879</div></el-col>
+              <el-col :span="8"><div class="grid-content bg-purple">前月用电:765868</div></el-col>
+            </el-row>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { workOrderList } from '@/api/orderManage/workOrder/workOrder'
+import echartsBar from './components/echarts-Bar.vue'
+import echartsBarOne from './components/echarts-Bar.vue'
+import echartsGauge from './components/echarts-Gauge.vue'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+
+export default {
+  name: 'EquipmentEnergyMonitor',
+  components: { echartsBar, echartsBarOne, echartsGauge },
+  data() {
+    return {
+      BarVisible: false,
+      BarVisible1: true,
+      WorkOrderList: [],
+      barType: 'Electric',
+      formData: {
+        WorkOrderId: '',
+        timeType: 'Month',
+        timeSlot: []
+      },
+      // 假数据
+      barStyle: {
+        height: '400px',
+        width: '100%',
+        margin: '20px'
+      },
+      color: [
+        '#5470C6', '#91CC75'
+      ],
+      barTitle: {
+        text: '能耗数据',
+        subtext: '同环能耗数据'
+      },
+      legend: {
+        data: ['综合线', '镀膜线']
+      },
+      xAxis: {
+        type: 'category',
+        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+      },
+      yAxis: {
+        type: 'value'
+      },
+      series: [{
+        name: '综合线',
+        data: [],
+        type: 'bar'
+      }, {
+        name: '镀膜线',
+        data: [],
+        type: 'bar'
+      }],
+      // 假数据
+      bar1: 'barChart1',
+      barStyle1: {
+        height: '515px',
+        width: '100%',
+        margin: '20px'
+      },
+      barTitle1: {
+        text: '设备加工数量',
+        subtext: '设备加工数量柱状图'
+      },
+      legend1: {
+        data: []
+      },
+      xAxis1: {
+        type: 'value'
+      },
+      yAxis1: {
+        type: 'category',
+        data: ['涂覆机', '活化炉', '退火炉', '汇流条粘接机', '热熔封边机', '磨边机', '清边机']
+      },
+      series1: [{
+        name: '电量消耗',
+        data: [323.234, 323.841, 755.45, 251.453, 454.786, 484.786, 154.786],
+        barWidth: '60%',
+        type: 'bar'
+      }],
+      gauge: 'gauge1',
+      gaugeStyle: {
+        height: '400px',
+        width: '100%',
+        margin: '20px'
+      }
+    }
+  },
+  created() {
+    this.getList()
+    this.setBarType()
+  },
+  methods: {
+    getList() {
+      const listQuery = {
+        current: 1,
+        size: 500
+      }
+      this.WorkOrderList.splice(0, this.WorkOrderList.length)
+      workOrderList(listQuery).then(response => {
+        if (response.data.records) {
+          this.WorkOrderList = response.data.records
+        }
+      })
+      if (this.formData.timeSlot) {
+        this.formData.startTime = this.formData.timeSlot[0]
+        this.formData.endTime = this.formData.timeSlot[1]
+      } else {
+        this.formData.startTime = ''
+        this.formData.endTime = ''
+      }
+    },
+    setBarData() {
+      this.series[0].data.splice(0, this.series[0].data.length)
+      this.series[1].data.splice(0, this.series[1].data.length)
+      for (let i = 0; i < 12; i++) {
+        this.series[0].data.push(Math.round(Math.random() * 1500))
+        this.series[1].data.push(Math.round(Math.random() * 1500))
+      }
+    },
+    setBarType() {
+      this.setBarData()
+      this.BarVisible = true
+      // 获取柱状图数据
+      // getBarData(Object.assign(this.formData, { barType: this.barType })).then(response => {
+      //   if (response.data.records) {
+      //     this.getBarData = response.data.records
+      //   }
+      // })
+      this.$nextTick(() => {
+        this.$refs.BarRef.init()
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+  .bg-purple {
+    background: #d3dce6;
+  }
+  .grid-content {
+    border-radius: 4px;
+    text-align: center;
+    padding: 5px;
+    margin-bottom: 10px;
+  }
+</style>
diff --git a/src/views/EquipmentManager/equipmentVisualization/EquipmentProcessingQuantity.vue b/src/views/EquipmentManager/equipmentVisualization/EquipmentProcessingQuantity.vue
new file mode 100644
index 0000000..c6e366a
--- /dev/null
+++ b/src/views/EquipmentManager/equipmentVisualization/EquipmentProcessingQuantity.vue
@@ -0,0 +1,173 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-22 09:36:48
+ * @Description:
+-->
+<template>
+  <div class="app-container">
+    <el-form
+      :model="formData"
+      :inline="true"
+      size="medium"
+      label-width="80px"
+    >
+      <el-form-item :label="$t('module.equipmentManager.equipmentVisualization.timeSlot')" label-width="100px" prop="time">
+        <el-date-picker
+          v-model="formData.timeSlot"
+          type="daterange"
+          format="yyyy-MM-dd"
+          value-format="yyyy-MM-dd"
+          :start-placeholder="$t('module.orderManage.order.StartTime')"
+          :end-placeholder="$t('module.orderManage.order.StartTime')"
+          :range-separator="$t('module.orderManage.order.To')"
+          clearable
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="getList()"> {{ 'btn.search' | i18nFilter }} </el-button>
+      </el-form-item>
+    </el-form>
+    <el-card>
+      <el-menu
+        :default-active="activeIndex"
+        mode="horizontal"
+        background-color="#545c64"
+        text-color="#fff"
+        active-text-color="#ffd04b"
+        @select="handleSelect"
+      >
+        <el-menu-item index="1">{{ $t('module.equipmentManager.equipmentVisualization.DataTable') }}</el-menu-item>
+        <el-menu-item index="2">{{ $t('module.equipmentManager.equipmentVisualization.Histogram') }}</el-menu-item>
+      </el-menu>
+    </el-card>
+    <EquipmentProcessingQuantity-table v-if="tableVisible" ref="tableRef" @refreshDataList="getList" />
+    <echarts-bar
+      v-if="BarVisible"
+      ref="BarRef"
+      :bar-style="barStyle"
+      :title="barTitle"
+      :legend="legend"
+      :x-axis="xAxis"
+      :y-axis="yAxis"
+      :series="series"
+      @refreshDataList="getList"
+    />
+  </div>
+</template>
+
+<script>
+import EquipmentProcessingQuantityTable from './components/EquipmentProcessingQuantity-table'
+import echartsBar from './components/echarts-Bar.vue'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+
+export default {
+  name: 'EquipmentProcessingQuantity',
+  components: { EquipmentProcessingQuantityTable, echartsBar },
+  data() {
+    return {
+      tableVisible: false,
+      BarVisible: false,
+      activeIndex: '1',
+      formData: {
+        timeSlot: [],
+        current: 1,
+        size: 10
+      },
+      // 假数据
+      barStyle: {
+        height: '500px',
+        width: '100%',
+        margin: '20px'
+      },
+      barTitle: {
+        text: '设备加工数量',
+        subtext: '设备加工数量柱状图'
+      },
+      legend: {
+        data: []
+      },
+      xAxis: {
+        type: 'category',
+        data: ['涂覆机', 'ACOAT Machine', '活化炉', 'Activation furnace', '退火炉', '仓储系统', '汇流条粘接机', 'CSS镀膜 CSS', '铜扩散', 'DOPE Machine', '热熔封边机', '终检仪(FL+HP)', '性能检测(EL+IV)', '磨边机', 'Grind Machine', '接线盒安装站', '层压机－01', '层压机－02', '清边机', '上片机械手', 'Loading Robot', '上片机械手', 'Loading Robot', '下片机械手', '合片封装站', 'ID打标机', 'Laser Mark', '刻蚀设备', '光刻胶显影机', 'RDEV machine', '光刻胶处理设备', 'RTREAT Machine', '刻线机', 'SCR Machine', '刻线机', 'SCR Machine', '刻线机', '磁控溅射设备', 'Sputtering machine', '磁控溅射设备', '玻璃检测仪', 'Glass detector', '膜层检测仪', 'SUBIN Detector', '缺陷检测仪', '传输系统', '清洗机', 'Cleaning machine', '涂层清洗机', 'Wash machine', '玻璃清洗机', '预清洗机', 'Pre cleaning machine', 'SUBIN_THK_01', 'SUBIN_THK_02'],
+        axisLabel: {
+          interval: 0,
+          formatter: function(value) {
+            return value.split('').join('\n')
+          }
+        }
+      },
+      yAxis: {
+        type: 'value'
+      },
+      series: [{
+        data: [120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 150, 160, 140, 170, 155, 140, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 150, 160, 140, 170, 155, 140, 160, 140, 170, 155, 140, 167],
+        type: 'scatter',
+        showBackground: true,
+        backgroundStyle: {
+          color: 'rgba(220, 220, 220, 0.8)'
+        }
+      }]
+    }
+  },
+  created() {
+    this.getList()
+    this.handleSelect('1')
+  },
+  methods: {
+    getList() {
+      if (this.formData.timeSlot) {
+        this.formData.startTime = this.formData.timeSlot[0]
+        this.formData.endTime = this.formData.timeSlot[1]
+      } else {
+        this.formData.startTime = ''
+        this.formData.endTime = ''
+      }
+    },
+    handleSelect(key, keyPath) {
+      this.tableVisible = false
+      this.BarVisible = false
+      switch (key) {
+        case '1':
+          this.tableVisible = true
+          this.$nextTick(() => {
+            this.$refs.tableRef.init()
+          })
+          break
+        case '2':
+          this.BarVisible = true
+          this.$nextTick(() => {
+            this.$refs.BarRef.init()
+          })
+          break
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/EquipmentManager/equipmentVisualization/Visualized.vue b/src/views/EquipmentManager/equipmentVisualization/Visualized.vue
new file mode 100644
index 0000000..4022750
--- /dev/null
+++ b/src/views/EquipmentManager/equipmentVisualization/Visualized.vue
@@ -0,0 +1,225 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-22 10:18:21
+ * @Description:
+-->
+<template>
+  <div class="app-container">
+    <el-form
+      :model="formData"
+      :inline="true"
+      size="medium"
+      label-width="80px"
+    >
+      <el-form-item :label="$t('module.equipmentManager.equipmentVisualization.timeSlot')" label-width="100px" prop="time">
+        <el-date-picker
+          v-model="formData.timeSlot"
+          type="daterange"
+          format="yyyy-MM-dd"
+          value-format="yyyy-MM-dd"
+          :start-placeholder="$t('module.orderManage.order.StartTime')"
+          :end-placeholder="$t('module.orderManage.order.StartTime')"
+          :range-separator="$t('module.orderManage.order.To')"
+          clearable
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="getList()"> {{ 'btn.search' | i18nFilter }} </el-button>
+      </el-form-item>
+    </el-form>
+    <el-row :gutter="10">
+      <el-col :span="8">
+        <div>
+          <echarts-pie-a
+            id="pieA"
+            ref="BarRef"
+            :pie-style="pieStyle"
+            :title="title1"
+            :legend="legend"
+            :name="name"
+            :data="pieData"
+            @refreshDataList="getList"
+          />
+        </div>
+      </el-col>
+      <el-col :span="8">
+        <div>
+          <echarts-pie-b
+            id="pieB"
+            ref="BarRef"
+            :pie-style="pieStyle"
+            :title="title2"
+            :legend="legend"
+            :name="name"
+            :data="pieData"
+            @refreshDataList="getList"
+          />
+        </div>
+      </el-col>
+      <el-col :span="8">
+        <div>
+          <echarts-pie-c
+            id="pieC"
+            ref="BarRef"
+            :pie-style="pieStyle"
+            :title="title3"
+            :legend="legend"
+            :name="name"
+            :data="pieData"
+            @refreshDataList="getList"
+          />
+        </div>
+      </el-col>
+    </el-row>
+    <el-row :gutter="10">
+      <el-col :span="8">
+        <div>
+          <echarts-pie-d
+            id="pieD"
+            ref="BarRef"
+            :pie-style="pieStyle"
+            :title="title4"
+            :legend="legend"
+            :name="name"
+            :data="pieData"
+            @refreshDataList="getList"
+          />
+        </div>
+      </el-col>
+      <el-col :span="8">
+        <div>
+          <echarts-pie-e
+            id="pieE"
+            ref="BarRef"
+            :pie-style="pieStyle"
+            :title="title5"
+            :legend="legend"
+            :name="name"
+            :data="pieData"
+            @refreshDataList="getList"
+          />
+        </div>
+      </el-col>
+      <el-col :span="8">
+        <div>
+          <echarts-pie-f
+            id="pieF"
+            ref="BarRef"
+            :pie-style="pieStyle"
+            :title="title6"
+            :legend="legend"
+            :name="name"
+            :data="pieData"
+            @refreshDataList="getList"
+          />
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import echartsPieA from './components/echarts-Pie.vue'
+import echartsPieB from './components/echarts-Pie.vue'
+import echartsPieC from './components/echarts-Pie.vue'
+import echartsPieD from './components/echarts-Pie.vue'
+import echartsPieE from './components/echarts-Pie.vue'
+import echartsPieF from './components/echarts-Pie.vue'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+
+export default {
+  name: 'EquipmentProcessingQuantity',
+  components: { echartsPieA, echartsPieB, echartsPieC, echartsPieD, echartsPieE, echartsPieF },
+  data() {
+    return {
+      formData: {
+        timeSlot: [],
+        current: 1,
+        size: 10
+      },
+      // 假数据
+      pieStyle: {
+        height: '350px',
+        width: '100%',
+        margin: '20px'
+      },
+      title1: {
+        text: '涂覆机',
+        subtext: '运行状态良好'
+      },
+      title2: {
+        text: '活化炉',
+        subtext: '运行状态良好'
+      },
+      title3: {
+        text: '退火炉',
+        subtext: '运行状态良好'
+      },
+      title4: {
+        text: '仓储系统',
+        subtext: '运行状态良好'
+      },
+      title5: {
+        text: '汇流条粘接机',
+        subtext: '运行状态良好'
+      },
+      title6: {
+        text: '热熔封边机',
+        subtext: '运行状态良好'
+      },
+      legend: {
+        top: 'bottom',
+        left: 'center'
+      },
+      name: '时间',
+      pieData: [
+        { value: Math.round(Math.random() * 200), name: '运行时间' },
+        { value: Math.round(Math.random() * 200), name: '维修时间' },
+        { value: Math.round(Math.random() * 200), name: '维护时间' },
+        { value: Math.round(Math.random() * 200), name: '停机时间' }
+      ]
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    getList() {
+      if (this.formData.timeSlot) {
+        this.formData.startTime = this.formData.timeSlot[0]
+        this.formData.endTime = this.formData.timeSlot[1]
+      } else {
+        this.formData.startTime = ''
+        this.formData.endTime = ''
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/EquipmentManager/equipmentVisualization/components/EquipmentProcessingQuantity-table.vue b/src/views/EquipmentManager/equipmentVisualization/components/EquipmentProcessingQuantity-table.vue
new file mode 100644
index 0000000..0be12c6
--- /dev/null
+++ b/src/views/EquipmentManager/equipmentVisualization/components/EquipmentProcessingQuantity-table.vue
@@ -0,0 +1,129 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-04-22 14:54:30
+ * @Description:
+-->
+<template>
+  <base-table
+    :page="listQuery.current"
+    :limit="listQuery.size"
+    :table-config="tableProps"
+    :table-data="list"
+    :is-loading="listLoading"
+  />
+</template>
+
+<script>
+import i18n from '@/lang'
+import BaseTable from '@/components/BaseTable'
+// import { timeFormatter } from '@/filters'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+const tableProps = [
+  {
+    prop: 'name',
+    label: i18n.t('module.basicData.equipment.EquipmentName'),
+    align: 'center'
+  },
+  {
+    prop: 'code',
+    label: i18n.t('module.basicData.equipment.EquipmentCode'),
+    align: 'center'
+  }, {
+    prop: 'ProcessingQuantity',
+    label: i18n.t('module.equipmentManager.equipmentVisualization.ProcessingQuantity'),
+    align: 'center'
+  }
+]
+
+export default {
+  name: '',
+  components: { BaseTable },
+  props: {
+  },
+  data() {
+    return {
+      tableProps,
+      list: [],
+      listLoading: false,
+      listQuery: {
+        current: 1,
+        size: 10
+      }
+    }
+  },
+  methods: {
+    init() {
+      this.listQuery = {
+        current: 1,
+        size: 10
+      }
+      this.getList()
+    },
+    getList() {
+      this.list = [
+        {
+          'name': '设备1',
+          'code': 'SB20210203000028',
+          'ProcessingQuantity': '361'
+        },
+        {
+          'name': '设备2',
+          'code': 'SB20210203000105',
+          'ProcessingQuantity': '2'
+        },
+        {
+          'name': '设备3',
+          'code': 'SB20210203000208',
+          'ProcessingQuantity': '987'
+        },
+        {
+          'name': '设备4',
+          'code': 'SB20210203000450',
+          'ProcessingQuantity': '65'
+        },
+        {
+          'name': '设备5',
+          'code': 'SB20210203000768',
+          'ProcessingQuantity': '7645'
+        }
+      ]
+      // this.listLoading = true
+      // staffList(this.listQuery).then(response => {
+      //   if (response.data.records) {
+      //     this.list = response.data.records
+      //   } else {
+      //     this.list.splice(0, this.list.length)
+      //   }
+      //   this.listLoading = false
+      // })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/EquipmentManager/equipmentVisualization/components/echarts-Bar.vue b/src/views/EquipmentManager/equipmentVisualization/components/echarts-Bar.vue
new file mode 100644
index 0000000..1e9a062
--- /dev/null
+++ b/src/views/EquipmentManager/equipmentVisualization/components/echarts-Bar.vue
@@ -0,0 +1,108 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-03-03 16:39:34
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-23 10:26:44
+ * @Description:
+-->
+<template>
+  <div :id="id" :style="barStyle" />
+</template>
+
+<script>
+import echarts from 'echarts'
+
+export default {
+  props: {
+    id: {
+      type: String,
+      default: () => {
+        return 'barChart'
+      }
+    },
+    barStyle: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    title: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    legend: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    xAxis: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    yAxis: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    series: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    color: {
+      type: Array,
+      default: () => {
+        return ['#5470C6']
+      }
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    init() {
+      this.chart = echarts.init(document.getElementById(this.id))
+
+      this.chart.setOption({
+        color: this.color,
+        title: this.title,
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        legend: this.legend,
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: this.xAxis,
+        yAxis: this.yAxis,
+        series: this.series
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/EquipmentManager/equipmentVisualization/components/echarts-Gauge.vue b/src/views/EquipmentManager/equipmentVisualization/components/echarts-Gauge.vue
new file mode 100644
index 0000000..c4b5ae9
--- /dev/null
+++ b/src/views/EquipmentManager/equipmentVisualization/components/echarts-Gauge.vue
@@ -0,0 +1,125 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-03-03 16:39:34
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-04-22 18:06:50
+ * @Description:
+-->
+<template>
+  <div :id="id" :style="gaugeStyle" />
+</template>
+
+<script>
+import echarts from 'echarts'
+
+export default {
+  props: {
+    id: {
+      type: String,
+      default: () => {
+        return 'barChart'
+      }
+    },
+    gaugeStyle: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    init() {
+      this.chart = echarts.init(document.getElementById(this.id))
+
+      this.chart.setOption({
+        title: {
+          text: '实时能耗',
+          subtext: 'Kwh'
+        },
+        series: [{
+          type: 'gauge',
+          center: ['50%', '70%'],
+          startAngle: 180,
+          endAngle: 0,
+          min: 0,
+          max: 500000,
+          splitNumber: 10,
+          axisLine: {
+            lineStyle: {
+              width: 10,
+              opacity: 0.5,
+              color: [
+                [0.4, '#1CB727'],
+                [0.7, '#E0980C'],
+                [1, '#fd666d']
+              ]
+            }
+          },
+          pointer: {
+            itemStyle: {
+              opacity: 0.5
+            }
+          },
+          progress: {
+            show: true,
+            width: 10
+          },
+          axisTick: {
+            distance: -45,
+            splitNumber: 2,
+            lineStyle: {
+              width: 2,
+              color: '#999'
+            }
+          },
+          splitLine: {
+            distance: -32,
+            length: 20,
+            lineStyle: {
+              width: 3,
+              color: '#999'
+            }
+          },
+          axisLabel: {
+            color: 'auto',
+            distance: -65,
+            fontSize: 15
+          },
+          detail: {
+            valueAnimation: true,
+            offsetCenter: [0, '-15%'],
+            formatter: function(value) {
+              return '{value|' + value.toFixed(0) + 'Kwh}'
+            },
+            color: 'auto',
+            rich: {
+              value: {
+                fontSize: 20,
+                fontWeight: 'bolder'
+              }
+            }
+          },
+          data: [{
+            value: 81175
+          }]
+        }]
+      }, true)
+    }
+  }
+}
+</script>
diff --git a/src/views/EquipmentManager/equipmentVisualization/components/echarts-Pie.vue b/src/views/EquipmentManager/equipmentVisualization/components/echarts-Pie.vue
new file mode 100644
index 0000000..5f4f23c
--- /dev/null
+++ b/src/views/EquipmentManager/equipmentVisualization/components/echarts-Pie.vue
@@ -0,0 +1,108 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-03-03 16:39:34
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-04-22 18:59:58
+ * @Description:
+-->
+<template>
+  <div :id="id" :style="pieStyle" />
+</template>
+
+<script>
+import echarts from 'echarts'
+
+export default {
+  props: {
+    id: {
+      type: String,
+      default: () => {
+        return 'barChart'
+      }
+    },
+    pieStyle: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    title: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    legend: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    name: {
+      type: String,
+      default: () => {
+        return ''
+      }
+    },
+    data: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    init() {
+      this.chart = echarts.init(document.getElementById(this.id))
+
+      this.chart.setOption({
+        title: this.title,
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: this.legend,
+        series: [
+          {
+            name: this.name,
+            type: 'pie',
+            radius: ['40%', '70%'],
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              position: 'center'
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: '20',
+                fontWeight: 'bold'
+              }
+            },
+            data: [
+              { value: Math.round(Math.random() * 200), name: '运行时间' },
+              { value: Math.round(Math.random() * 200), name: '维修时间' },
+              { value: Math.round(Math.random() * 200), name: '维护时间' },
+              { value: Math.round(Math.random() * 200), name: '停机时间' }
+            ]
+          }
+        ]
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/EquipmentManager/sqarepart/AddForm.vue b/src/views/EquipmentManager/sqarepart/AddForm.vue
new file mode 100644
index 0000000..b46fd37
--- /dev/null
+++ b/src/views/EquipmentManager/sqarepart/AddForm.vue
@@ -0,0 +1,216 @@
+<template>
+  <div>
+    <el-dialog v-bind="$attrs" :title="$t('module.equipmentManager.sparepart.addDialogTtile')" v-on="$listeners" @open="onOpen" @close="onClose">
+      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="150px">
+        <!-- <el-form-item label="备件编码" prop="name">
+          <el-input v-model="formData.code" placeholder="请输入备件编码" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item label="备件名称" prop="name">
+          <el-input v-model="formData.name" placeholder="请输入备件名称" clearable :style="{width: '100%'}" />
+        </el-form-item> -->
+        <el-form-item :label="$t('module.equipmentManager.sparepart.sparepart')" prop="basicSparePartId">
+          <el-select v-model="formData.basicSparePartId" filterable :placeholder="$t('module.equipmentManager.sparepart.placeholdersparepart')" clearable :style="{width: '100%'}">
+            <el-option
+              v-for="(item, index) in dict.sparepart"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <!-- <el-form-item :label="$t('module.equipmentManager.sparepart.model')" prop="model">
+          <el-input
+            v-model="formData.model"
+            :placeholder="$t('module.equipmentManager.sparepart.placeholdermodel')"
+            clearable
+            :style="{width: '100%'}"
+          />
+        </el-form-item> -->
+        <el-form-item :label="$t('module.equipmentManager.sparepart.externalCode')" prop="externalCode">
+          <el-input
+            v-model="formData.externalCode"
+            :placeholder="$t('module.equipmentManager.sparepart.placeholderexternalCode')"
+            clearable
+            :style="{width: '100%'}"
+          />
+        </el-form-item>
+        <!-- <el-form-item :label="$t('module.equipmentManager.sparepart.unit')" prop="accessoryUnit">
+          <el-select v-model="formData.accessoryUnit" :placeholder="$t('module.equipmentManager.sparepart.placeholderunit')" clearable :style="{width: '100%'}">
+            <el-option
+              v-for="(item, index) in dict.unit"
+              :key="index"
+              :label="item.dataName"
+              :value="item.dataName"
+            />
+          </el-select>
+        </el-form-item> -->
+        <el-form-item :label="$t('module.equipmentManager.sparepart.batchNumber')" prop="batchNumber">
+          <el-input v-model="formData.batchNumber" :placeholder="$t('module.equipmentManager.sparepart.placeholderbatchNumber')" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.sparepart.number')" prop="accessoryNumber">
+          <el-input v-model="formData.accessoryNumber" type="number" :placeholder="$t('module.equipmentManager.sparepart.placeholdernumber')" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.sparepart.entryTime')" prop="entryTime">
+          <el-date-picker
+            v-model="formData.entryTime"
+            format="yyyy-MM-dd"
+            :style="{width: '100%'}"
+            :placeholder="$t('module.equipmentManager.sparepart.placeholderentryTime')"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.sparepart.supplier')" prop="supplierId">
+          <el-select v-model="formData.supplierId" :placeholder="$t('module.equipmentManager.sparepart.placeholdersupplier')" clearable :style="{width: '100%'}">
+            <el-option
+              v-for="(item, index) in dict.supplier"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.sparepart.receiver')" prop="receiver">
+          <el-select v-model="formData.receiver" :placeholder="$t('module.equipmentManager.sparepart.placeholderreceiver')" clearable :style="{width: '100%'}">
+            <el-option
+              v-for="(item, index) in dict.worker"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.sparepart.remark')" prop="remark">
+          <el-input v-model="formData.remark" :placeholder="$t('module.equipmentManager.sparepart.placeholderremark')" clearable :style="{width: '100%'}" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="close">{{ 'btn.cancel' | i18nFilter }}</el-button>
+        <el-button type="primary" @click="handelConfirm">{{ 'btn.confirm' | i18nFilter }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { addSapre } from '@/api/equipment/spare'
+import { getDictUnit, getDictSupplier, getDictSparepart, getDictWorker } from '@/api/dict'
+import i18n from '@/lang'
+export default {
+  components: {},
+  inheritAttrs: false,
+  props: [],
+  data() {
+    return {
+      formData: {
+        code: undefined,
+        name: undefined,
+        // model: undefined,
+        // accessoryUnit: undefined,
+        batchNumber: undefined,
+        accessoryNumber: undefined,
+        entryTime: null,
+        supplierId: undefined,
+        receiver: undefined,
+        remark: undefined,
+        externalCode: undefined
+      },
+      rules: {
+        basicSparePartId: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.sparepart.placeholdersparepart'),
+          trigger: 'blur'
+        }],
+        model: [{
+          required: false,
+          message: i18n.t('module.equipmentManager.sparepart.placeholdermodel'),
+          trigger: 'blur'
+        }],
+        accessoryUnit: [{
+          required: false,
+          message: i18n.t('module.equipmentManager.sparepart.placeholderunit'),
+          trigger: 'change'
+        }],
+        batchNumber: [{
+          required: false,
+          message: i18n.t('module.equipmentManager.sparepart.placeholderbatchNumber'),
+          trigger: 'blur'
+        }],
+        accessoryNumber: [{
+          required: false,
+          message: i18n.t('module.equipmentManager.sparepart.placeholdernumber'),
+          trigger: 'blur'
+        }],
+        entryTime: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.sparepart.placeholderentryTime'),
+          trigger: 'change'
+        }],
+        supplierId: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.sparepart.placeholdersupplier'),
+          trigger: 'change'
+        }],
+        receiver: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.sparepart.placeholderreceiver'),
+          trigger: 'blur'
+        }],
+        remark: [{
+          required: false,
+          message: i18n.t('module.equipmentManager.sparepart.placeholderremark'),
+          trigger: 'blur'
+        }]
+      },
+      dict: {
+        unit: [],
+        supplier: [],
+        sparepart: []
+      }
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {
+    this.getDict()
+  },
+  methods: {
+    onOpen() {
+      this.$refs['elForm'].resetFields()
+      this.getDict()
+    },
+    onClose() {
+      this.$refs['elForm'].resetFields()
+    },
+    close() {
+      this.$emit('update:visible', false)
+    },
+    handelConfirm() {
+      this.$refs['elForm'].validate(async valid => {
+        if (!valid) return
+        const result = await addSapre(this.formData)
+        if (result.code === 0) {
+          this.$message({
+            type: 'success',
+            message: '添加成功！'
+          })
+          this.$emit('done')
+          this.close()
+        }
+      })
+    },
+    async getDict() {
+      const result = await getDictUnit()
+      this.dict.unit = result
+      const result2 = await getDictSupplier()
+      this.dict.supplier = result2
+      const result3 = await getDictSparepart()
+      this.dict.sparepart = result3
+      const result4 = await getDictWorker()
+      this.dict.worker = result4
+    }
+  }
+}
+
+</script>
+<style>
+</style>
diff --git a/src/views/EquipmentManager/sqarepart/EditForm.vue b/src/views/EquipmentManager/sqarepart/EditForm.vue
new file mode 100644
index 0000000..1ac9147
--- /dev/null
+++ b/src/views/EquipmentManager/sqarepart/EditForm.vue
@@ -0,0 +1,231 @@
+<template>
+  <div>
+    <el-dialog v-bind="$attrs" :title="$t('module.equipmentManager.sparepart.editDialogTtile')" v-on="$listeners" @open="onOpen" @close="onClose">
+      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="150px">
+        <!-- <el-form-item label="备件编码" prop="name">
+          <el-input v-model="formData.code" placeholder="请输入备件编码" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item label="备件名称" prop="name">
+          <el-input v-model="formData.name" placeholder="请输入备件名称" clearable :style="{width: '100%'}" />
+        </el-form-item> -->
+        <el-form-item :label="$t('module.equipmentManager.sparepart.sparepart')" prop="basicSparePartId">
+          <el-select v-model="formData.basicSparePartId" :placeholder="$t('module.equipmentManager.sparepart.placeholdersparepart')" clearable :style="{width: '100%'}">
+            <el-option
+              v-for="(item, index) in dict.sparepart"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <!-- <el-form-item :label="$t('module.equipmentManager.sparepart.model')" prop="sparePartModel">
+          <el-input
+            v-model="formData.model"
+            :placeholder="$t('module.equipmentManager.sparepart.placeholdermodel')"
+            clearable
+            :style="{width: '100%'}"
+          />
+        </el-form-item> -->
+        <el-form-item :label="$t('module.equipmentManager.sparepart.externalCode')" prop="externalCode">
+          <el-input
+            v-model="formData.externalCode"
+            :placeholder="$t('module.equipmentManager.sparepart.placeholderexternalCode')"
+            clearable
+            :style="{width: '100%'}"
+          />
+        </el-form-item>
+        <!-- <el-form-item :label="$t('module.equipmentManager.sparepart.unit')" prop="accessoryUnit">
+          <el-select v-model="formData.accessoryUnit" :placeholder="$t('module.equipmentManager.sparepart.placeholderunit')" clearable :style="{width: '100%'}">
+            <el-option
+              v-for="(item, index) in dict.unit"
+              :key="index"
+              :label="item.dataName"
+              :value="item.dataName"
+            />
+          </el-select>
+        </el-form-item> -->
+        <el-form-item :label="$t('module.equipmentManager.sparepart.batchNumber')" prop="batchNumber">
+          <el-input v-model="formData.batchNumber" :placeholder="$t('module.equipmentManager.sparepart.placeholderbatchNumber')" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.sparepart.number')" prop="accessoryNumber">
+          <el-input v-model="formData.accessoryNumber" type="number" :placeholder="$t('module.equipmentManager.sparepart.placeholdernumber')" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.sparepart.entryTime')" prop="entryTime">
+          <el-date-picker
+            v-model="formData.entryTime"
+            format="yyyy-MM-dd"
+            :style="{width: '100%'}"
+            :placeholder="$t('module.equipmentManager.sparepart.placeholderentryTime')"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.sparepart.supplier')" prop="supplierId">
+          <el-select v-model="formData.supplierId" :placeholder="$t('module.equipmentManager.sparepart.placeholdersupplier')" clearable :style="{width: '100%'}">
+            <el-option
+              v-for="(item, index) in dict.supplier"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.sparepart.receiver')" prop="receiver">
+          <el-select v-model="formData.receiver" :placeholder="$t('module.equipmentManager.sparepart.placeholderreceiver')" clearable :style="{width: '100%'}">
+            <el-option
+              v-for="(item, index) in dict.worker"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.sparepart.remark')" prop="remark">
+          <el-input v-model="formData.remark" :placeholder="$t('module.equipmentManager.sparepart.placeholderremark')" clearable :style="{width: '100%'}" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="close">{{ 'btn.cancel' | i18nFilter }}</el-button>
+        <el-button type="primary" @click="handelConfirm">{{ 'btn.confirm' | i18nFilter }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { getSpareInfo, editSpare } from '@/api/equipment/spare'
+import { getDictUnit, getDictSupplier, getDictSparepart, getDictWorker } from '@/api/dict'
+import i18n from '@/lang'
+export default {
+  components: {},
+  inheritAttrs: false,
+  props: {
+    targetInfo: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      formData: {
+        basicSparePartId: undefined,
+        // model: undefined,
+        // accessoryUnit: undefined,
+        batchNumber: undefined,
+        accessoryNumber: undefined,
+        entryTime: null,
+        supplierId: undefined,
+        receiver: undefined,
+        remark: undefined,
+        externalCode: undefined
+      },
+      rules: {
+        basicSparePartId: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.sparepart.placeholdersparepart'),
+          trigger: 'blur'
+        }],
+        sparePartModel: [{
+          required: false,
+          message: i18n.t('module.equipmentManager.sparepart.placeholdermodel'),
+          trigger: 'blur'
+        }],
+        accessoryUnit: [{
+          required: false,
+          message: i18n.t('module.equipmentManager.sparepart.placeholderunit'),
+          trigger: 'change'
+        }],
+        batchNumber: [{
+          required: false,
+          message: i18n.t('module.equipmentManager.sparepart.placeholderbatchNumber'),
+          trigger: 'blur'
+        }],
+        accessoryNumber: [{
+          required: false,
+          message: i18n.t('module.equipmentManager.sparepart.placeholdernumber'),
+          trigger: 'blur'
+        }],
+        entryTime: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.sparepart.placeholderentryTime'),
+          trigger: 'change'
+        }],
+        supplierId: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.sparepart.placeholdersupplier'),
+          trigger: 'change'
+        }],
+        receiver: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.sparepart.placeholderreceiver'),
+          trigger: 'blur'
+        }],
+        remark: [{
+          required: false,
+          message: i18n.t('module.equipmentManager.sparepart.placeholderremark'),
+          trigger: 'blur'
+        }]
+      },
+      dict: {
+        unit: [],
+        supplier: [],
+        sparepart: [],
+        worker: []
+      }
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {
+    onOpen() {
+      this.getDict()
+      this.getDetail()
+    },
+    onClose() {
+      this.$refs['elForm'].resetFields()
+    },
+    close() {
+      this.$emit('update:visible', false)
+    },
+    handelConfirm() {
+      this.$refs['elForm'].validate(async valid => {
+        if (!valid) return
+        const result = await editSpare({
+          ...this.formData,
+          id: this.targetInfo?.id
+        })
+        if (result.code === 0) {
+          this.$message({
+            type: 'success',
+            message: '修改成功！'
+          })
+          this.$emit('done')
+          this.close()
+        }
+      })
+    },
+    async getDetail() {
+      const result = await getSpareInfo({
+        id: this.targetInfo?.id
+      })
+      if (result.code === 0) {
+        this.formData = result.data
+        // console.log(result)
+      }
+    },
+    async getDict() {
+      const result = await getDictUnit()
+      this.dict.unit = result
+      const result2 = await getDictSupplier()
+      this.dict.supplier = result2
+      const result3 = await getDictSparepart()
+      this.dict.sparepart = result3
+      const result4 = await getDictWorker()
+      this.dict.worker = result4
+    }
+  }
+}
+
+</script>
+<style>
+</style>
diff --git a/src/views/EquipmentManager/sqarepart/index.vue b/src/views/EquipmentManager/sqarepart/index.vue
new file mode 100644
index 0000000..07c4de3
--- /dev/null
+++ b/src/views/EquipmentManager/sqarepart/index.vue
@@ -0,0 +1,208 @@
+<!--
+ * @Date: 2020-12-15 15:36:52
+ * @LastEditors: guo
+ * @LastEditTime: 2021-03-23 10:20:05
+ * @FilePath: \basic-admin\src\views\EquipmentManager\sqarepart\index.vue
+ * @Description:
+-->
+<template>
+  <div class="usermanager-container">
+    <div class="method-btn-area">
+      <el-input v-model="listQuery.keywords" :placeholder="$t('module.equipmentManager.sparepart.searchPlaceholder')" style="width: 200px;" clearable />
+      <el-button @click="getList">{{ 'btn.search' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="showDialog = true">{{ 'btn.add' | i18nFilter }}</el-button>
+    </div>
+    <base-table :table-config="tableProps" :table-data="list" :is-loading="listLoading" :page="listQuery.current" :limit="listQuery.size">
+      <method-btn slot="handleBtn" :method-list="tableBtn" :is-fixed="true" @clickBtn="handleClick" />
+    </base-table>
+    <pagination :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.size" @pagination="getList" />
+    <add-form :visible.sync="showDialog" @done="getList" />
+    <edit-form :visible.sync="showEditDialog" :target-info="{id: curEditId}" @done="getList" />
+  </div>
+</template>
+
+<script>
+// import dataDict from '@/filters/DataDict'
+// edit here
+import { timeFormatter } from '@/filters'
+import i18n from '@/lang'
+const tableBtn = [{
+  type: 'edit',
+  btnName: 'btn.edit'
+}, {
+  type: 'delete',
+  btnName: 'btn.delete'
+}]
+const tableProps = [{
+  prop: 'code',
+  label: i18n.t('module.equipmentManager.sparepart.code'),
+  align: 'center',
+  sortable: true,
+  width: '200px'
+}, {
+  prop: 'name',
+  label: i18n.t('module.equipmentManager.sparepart.name'),
+  align: 'center',
+  width: '140px'
+}, {
+  prop: 'model',
+  label: i18n.t('module.equipmentManager.sparepart.model'),
+  align: 'center',
+  width: '140px'
+}, {
+  prop: 'batchNumber',
+  label: i18n.t('module.equipmentManager.sparepart.batchNumber'),
+  align: 'center',
+  width: '120px'
+  // filter: dataDict('enableState')
+}, {
+  prop: 'supplierId',
+  label: i18n.t('module.equipmentManager.sparepart.supplier'),
+  align: 'center',
+  subcomponent: DictFilter,
+  filter: getDictSupplier,
+  width: '140px'
+}, {
+  prop: 'accessoryNumber',
+  label: i18n.t('module.equipmentManager.sparepart.number'),
+  align: 'center',
+  width: '120px'
+}, {
+  prop: 'accessoryUnit',
+  label: i18n.t('module.equipmentManager.sparepart.unit'),
+  align: 'center',
+  width: '120px'
+}, {
+  prop: 'entryTime',
+  label: i18n.t('module.equipmentManager.sparepart.entryTime'),
+  align: 'center',
+  filter: timeFormatter,
+  width: '140px'
+}, {
+  prop: 'receiver',
+  label: i18n.t('module.equipmentManager.sparepart.receiver'),
+  align: 'center',
+  subcomponent: DictFilter,
+  filter: getDictWorker,
+  width: '120px'
+}, {
+  prop: 'remark',
+  label: i18n.t('module.equipmentManager.sparepart.remark'),
+  align: 'center',
+  width: '120px'
+}]
+import AddForm from './AddForm'
+import EditForm from './EditForm'
+import BaseTable from '@/components/BaseTable'
+// edit here
+import DictFilter from '@/components/BaseTable/subcomponents/DataDictFilter'
+import { getSpareList, delSpare } from '@/api/equipment/spare'
+import { getDictSupplier, getDictWorker } from '@/api/dict/index'
+import { dictChange, dictFilter } from '@/utils'
+import Pagination from '@/components/Pagination'
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+export default {
+  name: 'OrgManager',
+  components: { Pagination, BaseTable, MethodBtn, AddForm, EditForm },
+  props: {},
+  data() {
+    return {
+      tableBtn,
+      tableProps: [],
+      list: [],
+      total: 0,
+      listLoading: true,
+      showDialog: false,
+      curEditId: null,
+      showEditDialog: false,
+      listQuery: {
+        current: 1,
+        size: 10,
+        keywords: ''
+      },
+      dict: {
+        supplier: []
+      }
+    }
+  },
+  async created() {
+    await this.getDict()
+    await this.preprocess()
+    await this.getList()
+    // this.listLoading = false
+  },
+  mounted() {},
+  methods: {
+    handleClick(raw) {
+      console.log(raw)
+      switch (raw.type) {
+        case 'delete':
+          this.$confirm(i18n.t('deleteMsgBox.content'), i18n.t('deleteMsgBox.hint'), {
+            confirmButtonText: i18n.t('btn.confirm'),
+            cancelButtonText: i18n.t('btn.cancel'),
+            type: 'warning'
+          }).then(async() => {
+            // 走接口
+            const result = await delSpare({
+              id: raw.data.id
+            })
+            if (result.code === 0) {
+              this.$message({
+                type: 'success',
+                message: i18n.t('deleteMsgBox.doneMsg')
+              })
+              this.getList()
+            }
+          })
+          break
+        case 'edit':
+          this.showEditDialog = true
+          this.curEditId = raw.data.id
+          break
+      }
+    },
+    async getList() {
+      this.listLoading = true
+      // edit here
+      const res = await getSpareList(this.listQuery)
+      if (res.code === 0) {
+        this.list = res.data.records
+        this.total = res.data.total
+        this.listLoading = false
+      }
+    },
+    async getDict() {
+      const result = await getDictSupplier()
+      this.dict.supplier = result
+    },
+    async preprocess() {
+      this.tableProps = tableProps.map(item => {
+        if (this.dict[item.prop]) {
+          console.log(dictChange(this.dict[item.prop], { key: 'id', value: 'name' }))
+          item.filter = dictFilter(dictChange(this.dict[item.prop], { key: 'id', value: 'name' }))
+        }
+        return item
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.usermanager-container {
+  padding: 20px;
+  .method-btn-area {
+    padding: 15px 30px;
+    margin: 10px 0 20px 0;
+    border: 1px solid #dfe6ec;
+  }
+}
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/FactoryManage/AbnormalAlarm.vue b/src/views/FactoryManage/AbnormalAlarm.vue
new file mode 100644
index 0000000..7ae3e84
--- /dev/null
+++ b/src/views/FactoryManage/AbnormalAlarm.vue
@@ -0,0 +1,346 @@
+<!--
+ * @Author: gtz
+ * @Date: 2021-03-20 14:02:38
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-22 11:55:28
+ * @Description: file content
+-->
+<template>
+  <div class="app-container">
+    <head-form
+      :placeholder-name="placeholderName"
+      :key-name="keyName"
+      @getDataList="getList"
+      @add="addNew"
+    />
+    <base-table
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    >
+      <method-btn
+        slot="handleBtn"
+        :width="trueWidth"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      @pagination="getList()"
+    />
+    <Alarm-Update
+      v-if="addOrUpdateVisible"
+      ref="addOrUpdate"
+      :worker-list="workerList"
+      @refreshDataList="getList"
+    />
+  </div>
+</template>
+
+<script>
+import Vue from 'vue'
+import { list, del, getWorkerList } from '@/api/factory-manage/abnormalAlarm'
+import { alarmLevelList } from '@/api/basicData/AlarmManagement/alarmLevel'
+import AlarmUpdate from './components/Alarm-update.vue'
+import AlarmDetail from './components/Alarm-detail.vue'
+import HeadForm from './components/HeadForm'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import { timeFormatter, handleLimit } from '@/filters'
+import i18n from '@/lang'
+import factory from '@/filters/factory'
+// import data from '../pdf/content'
+
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+
+const tableBtn = [
+  {
+    type: 'edit',
+    btnName: 'btn.alarmHandle',
+    showParam: {
+      name: 'status',
+      type: 'unequal',
+      value: 3
+    }
+  }
+]
+const tableProps = [
+  {
+    prop: 'createTime',
+    label: i18n.t('module.factory.abnormalAlarm.alarmTime'),
+    filter: timeFormatter,
+    align: 'center'
+  },
+  {
+    prop: 'name',
+    label: i18n.t('module.factory.abnormalAlarm.name'),
+    align: 'center'
+  },
+  {
+    prop: 'alarmType',
+    label: i18n.t('module.factory.abnormalAlarm.alarmType'),
+    align: 'center'
+  },
+  {
+    prop: 'alarmGrade',
+    label: i18n.t('module.factory.abnormalAlarm.alarmLevel'),
+    align: 'center'
+  },
+  {
+    prop: 'alarmContent',
+    label: i18n.t('module.factory.abnormalAlarm.alarmReason'),
+    align: 'center',
+    filter: handleLimit
+  },
+  // {
+  //   prop: 'alarmNotify',
+  //   label: i18n.t('module.factory.abnormalAlarm.messagePushMode'),
+  //   align: 'center',
+  //   filter: factory('alarmNotify')
+  // },
+  // {
+  //   prop: 'team',
+  //   label: i18n.t('module.factory.abnormalAlarm.team'),
+  //   align: 'center'
+  // },
+  {
+    prop: 'status',
+    label: i18n.t('module.factory.abnormalAlarm.status'),
+    align: 'center',
+    filter: factory('alarmStatus')
+  },
+  {
+    prop: 'detail',
+    label: i18n.t('module.factory.abnormalAlarm.detail'),
+    align: 'center',
+    subcomponent: AlarmDetail,
+    workerList: []
+  }
+]
+
+export default {
+  name: 'Factory',
+  components: { Pagination, BaseTable, MethodBtn, HeadForm, AlarmUpdate },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      keyName: [
+        {
+          name: this.$t('module.factory.abnormalAlarm.alarmType'),
+          type: 'input'
+        },
+        {
+          name: this.$t('module.factory.abnormalAlarm.timeQuantum'),
+          type: 'datePicker'
+        },
+        {
+          name: this.$t('module.factory.abnormalAlarm.alarmLevel'),
+          type: 'select',
+          option: [
+            // { value: this.$t('module.factory.abnormalAlarm.all'), label: this.$t('module.factory.abnormalAlarm.all') },
+            // { value: this.$t('module.factory.abnormalAlarm.breakdown'), label: this.$t('module.factory.abnormalAlarm.breakdown') },
+            // { value: this.$t('module.factory.abnormalAlarm.warn'), label: this.$t('module.factory.abnormalAlarm.warn') },
+            // { value: this.$t('module.factory.abnormalAlarm.alarm'), label: this.$t('module.factory.abnormalAlarm.alarm') }
+          ]
+        },
+        {
+          name: this.$t('module.factory.abnormalAlarm.status'),
+          type: 'select',
+          option: [
+            {
+              value: 3,
+              label: this.$t('module.factory.abnormalAlarm.processingComplete')
+            },
+            { value: 2, label: this.$t('module.factory.abnormalAlarm.inHand') },
+            {
+              value: 1,
+              label: this.$t('module.factory.abnormalAlarm.waitingProcess')
+            }
+          ]
+        }
+      ],
+      placeholderName: [
+        this.$t('module.factory.abnormalAlarm.alarmType'),
+        null
+      ],
+      addOrUpdateVisible: false,
+      tableBtn,
+      trueWidth: 120,
+      tableProps,
+      list: [],
+      // 初始化报警级别
+      alarmOption: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        current: 1,
+        size: 10,
+        status: '',
+        alarmType: '',
+        startTime: '',
+        endTime: '',
+        id: ''
+      },
+      workerList: {},
+      alarmLevelList: []
+    }
+  },
+  created() {
+    this.getDict()
+  },
+  methods: {
+    handleClick(raw) {
+      console.log(raw)
+      if (raw.type === 'delete') {
+        this.$confirm(
+          `[${this.$t('module.basicData.visual.TipsBefore')}][${
+            raw.data.name
+          }]?`,
+          this.$t('module.basicData.visual.Tips'),
+          {
+            confirmButtonText: this.$t(
+              'module.basicData.visual.confirmButtonText'
+            ),
+            cancelButtonText: this.$t(
+              'module.basicData.visual.cancelButtonText'
+            ),
+            type: 'warning'
+          }
+        )
+          .then(() => {
+            del(raw.data.id).then((response) => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.getList()
+                }
+              })
+            })
+          })
+          .catch(() => {})
+      } else if (raw.type === 'edit') {
+        this.addNew(raw.data.id)
+      }
+    },
+    getList(key) {
+      this.listLoading = true
+      if (key) {
+        this.listQuery.alarmType = key[0]
+        if (key[1]) {
+          this.listQuery.startTime = key[1][0]
+          this.listQuery.endTime = key[1][1]
+        } else {
+          this.listQuery.startTime = ''
+          this.listQuery.endTime = ''
+        }
+        this.listQuery.alarmGrade = key[2]
+        this.listQuery.status = key[3]
+      }
+      list(this.listQuery).then((response) => {
+        if (response.data.records) {
+          this.list = response.data.records
+          // 显示查询参数
+          console.log(this.listQuery)
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+
+        // 将JSON中的某一条属性取出来
+        // this.list.map(o=>{return{alarmGrade:o.alarmGrade}})
+        // this.list.map(o=>{return[o.alarmGrade]})
+        // this.list.map(o=>{return[o.alarmGrade].toString()})
+        // console.log(o)
+
+        // console.log(this.keyName[2].option)
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    },
+    // 获取员工列表
+    async getDict() {
+      const res = await getWorkerList({
+        current: 1,
+        size: 999
+      })
+      if (res.code === 0) {
+        this.workerList = res.data.records
+        const workerObj = {}
+        res.data.records.forEach((item) => {
+          workerObj[item.id] = item.name
+        })
+        Vue.set(
+          this.tableProps[this.tableProps.length - 1],
+          'workerList',
+          workerObj
+        )
+      }
+      const result = await alarmLevelList({
+        current: 1,
+        size: 999
+      })
+      if (result.code === 0) {
+        this.alarmLevelList = result.data.records
+        this.alarmOption = this.alarmLevelList.map(item => {
+          return {
+            label: item.alarmGrade,
+            value: item.alarmGrade
+          }
+        })
+        this.keyName[2].option = this.alarmOption
+        console.log(this.alarmOption)
+      }
+      this.getList()
+    },
+    // 新增 / 修改
+    addNew(id) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id)
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/FactoryManage/EquipmentAlarm.vue b/src/views/FactoryManage/EquipmentAlarm.vue
new file mode 100644
index 0000000..1725663
--- /dev/null
+++ b/src/views/FactoryManage/EquipmentAlarm.vue
@@ -0,0 +1,219 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-04-16 12:56:32
+ * @Description:
+-->
+<template>
+  <div class="app-container">
+    <el-form :inline="true" :model="listQuery" @keyup.enter.native="getList()">
+      <el-form-item :label="$t('module.factory.abnormalAlarm.equipmentName')" prop="name">
+        <el-select v-model="listQuery.name" filterable :placeholder="$i18nForm(['placeholder.input', $t('module.factory.abnormalAlarm.equipmentName')])" clearable>
+          <el-option
+            v-for="item in nameArr"
+            :key="item.id"
+            :label="item.name"
+            :value="item.name"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="$t('module.factory.abnormalAlarm.alarmStatus')" prop="alarmStatus">
+        <el-select v-model="listQuery.alarmStatus" filterable :placeholder="$i18nForm(['placeholder.input', $t('module.factory.abnormalAlarm.alarmStatus')])" clearable>
+          <el-option
+            v-for="item in statusArr"
+            :key="item.id"
+            :label="item.name"
+            :value="item.name"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="getList()">{{ 'btn.search' | i18nFilter }}</el-button>
+      </el-form-item>
+    </el-form>
+    <base-table
+      :table-config="tableProps"
+      :table-data="list"
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :is-loading="listLoading"
+    >
+      <!-- <method-btn
+        slot="handleBtn"
+        :width="trueWidth"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      /> -->
+    </base-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      @pagination="getList()"
+    />
+    <Alarm-handling v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
+  </div>
+</template>
+
+<script>import i18n from '@/lang'
+import AlarmHandling from './components/Alarm-handling.vue'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+// import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import { timeFormatter } from '@/filters'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+
+// const tableBtn = [
+//   {
+//     type: 'deal',
+//     btnName: i18n.t('module.factory.abnormalAlarm.deal')
+//   }
+// ]
+const tableProps = [
+  {
+    prop: 'name',
+    label: i18n.t('module.factory.abnormalAlarm.equipmentName'),
+    align: 'center'
+  },
+  {
+    prop: 'alarmInfo',
+    label: i18n.t('module.factory.abnormalAlarm.alarmInfo'),
+    align: 'center'
+  },
+  {
+    prop: 'alarmStartTime',
+    label: i18n.t('module.factory.abnormalAlarm.alarmStartTime'),
+    filter: timeFormatter,
+    align: 'center'
+  },
+  {
+    prop: 'alarmEndTime',
+    label: i18n.t('module.factory.abnormalAlarm.alarmEndTime'),
+    filter: timeFormatter,
+    align: 'center'
+  },
+  {
+    prop: 'alarmGrade',
+    label: i18n.t('module.basicData.alarmManagement.AlarmLevel'),
+    align: 'center'
+  },
+  {
+    prop: 'alarmStatus',
+    label: i18n.t('module.factory.abnormalAlarm.alarmStatus'),
+    align: 'center'
+  },
+  {
+    prop: 'remark',
+    label: i18n.t('module.basicData.visual.Remarks'),
+    align: 'center'
+  }
+]
+// , MethodBtn
+export default {
+  name: 'EquipmentAlarm',
+  components: { Pagination, BaseTable, AlarmHandling },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      addOrUpdateVisible: false,
+      // tableBtn,
+      trueWidth: 200,
+      tableProps,
+      list: [],
+      nameArr: [],
+      statusArr: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        current: 1,
+        size: 10,
+        alarmStatus: '',
+        name: ''
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    handleClick(raw) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(raw)
+      })
+    },
+    getList() {
+      this.statusArr = [
+        {
+          id: 1,
+          name: '报警中'
+        },
+        {
+          id: 0,
+          name: '已解决'
+        }
+      ]
+      this.nameArr = [
+        {
+          id: 1,
+          name: 'PID1'
+        },
+        {
+          id: 2,
+          name: '00A'
+        },
+        {
+          id: 3,
+          name: '00C'
+        }
+      ]
+      this.list = [
+        {
+          name: 'PID1',
+          alarmStartTime: '2020-12-10 12:11:30',
+          alarmInfo: '机械手停止运动',
+          alarmStatus: '报警中',
+          alarmGrade: '二级'
+        }
+      ]
+      this.listLoading = false
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/FactoryManage/components/Alarm-detail.vue b/src/views/FactoryManage/components/Alarm-detail.vue
new file mode 100644
index 0000000..933ca5e
--- /dev/null
+++ b/src/views/FactoryManage/components/Alarm-detail.vue
@@ -0,0 +1,138 @@
+<!--
+ * @Author: gtz
+ * @Date: 2021-03-20 14:06:05
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-03-24 18:50:30
+ * @Description: file content
+-->
+<template>
+  <span>
+    <el-button type="text" size="small" @click="emitClick">{{ 'btn.detail' | i18nFilter }}</el-button>
+    <el-dialog
+      :close-on-click-modal="false"
+      :visible.sync="showDetail"
+    >
+      <el-form
+        ref="dataForm"
+        :model="dataForm"
+        :rules="rules"
+        size="medium"
+        label-width="120px"
+        label-position="right"
+        style="text-align: left"
+      >
+        <el-row>
+          <el-row style="padding-bottom: 20px; text-align: center; font-size: 18px; color: #303133; font-weight: bold">
+            {{ $t('module.factory.abnormalAlarm.exceptionAlarm') + $t('module.factory.abnormalAlarm.detail') }}
+          </el-row>
+          <!-- <el-col :span="12">
+            <el-form-item :label="$t('module.factory.abnormalAlarm.alarmSource')">
+              {{ dataForm.alarmSource }}
+            </el-form-item>
+          </el-col> -->
+          <el-col :span="24">
+            <el-form-item :label="$t('module.factory.abnormalAlarm.alarmTime')">
+              {{ dataForm.createTime }}
+            </el-form-item>
+          </el-col>
+          <!-- <el-col :span="12">
+            <el-form-item :label="$t('module.factory.abnormalAlarm.alarmCode')">
+              {{ dataForm.alarmCode }}
+            </el-form-item>
+          </el-col> -->
+          <el-col :span="24">
+            <el-form-item :label="$t('module.factory.abnormalAlarm.alarmContent')">
+              {{ dataForm.alarmContent }}
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row style="padding-bottom: 20px; text-align: center; font-size: 18px; color: #303133; font-weight: bold">
+          {{ $t('module.factory.abnormalAlarm.description') }}
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item :label="$t('module.factory.abnormalAlarm.status')">
+              {{ dataForm.status | filterFun }}
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item :label="$t('module.factory.abnormalAlarm.handler')">
+              <!-- {{ injectData.workerList[dataForm.handler] }} -->
+              {{ dataForm.handler }}
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item :label="$t('module.factory.abnormalAlarm.description')">
+              {{ dataForm.description }}
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item :label="$t('module.factory.abnormalAlarm.annex')">
+              <el-row v-for="(item, index) in dataForm.fileIds" :key="item">
+                {{ dataForm.fileNames[index] }}
+                <el-button size="small" type="primary" @click="downloadFile(item)">{{ 'btn.download' | i18nFilter }}</el-button>
+              </el-row>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </el-dialog>
+  </span>
+</template>
+
+<script>
+import { getInfo } from '@/api/factory-manage/abnormalAlarm'
+import factory from '@/filters/factory'
+
+export default {
+  filters: {
+    filterFun: factory('alarmStatus')
+  },
+  props: {
+    injectData: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      showDetail: false,
+      dataForm: {
+        id: null,
+        alarmSource: null,
+        createTime: null,
+        alarmCode: null,
+        alarmContent: null,
+        status: null,
+        handler: null,
+        description: null,
+        fileIds: null
+      },
+      rules: {},
+      files: []
+    }
+  },
+  methods: {
+    emitClick() {
+      getInfo({
+        id: this.injectData.id
+      }).then(res => {
+        this.dataForm = res.data
+        res.data.fileIds.forEach((item, index) => {
+          this.files.push({
+            id: item,
+            name: res.data.fileNames[index]
+          })
+        })
+        this.showDetail = true
+        console.log(res)
+      }).catch(() => {
+        this.showDetail = true
+      })
+    },
+    downloadFile(id) {
+      window.open(`${location.origin}/api/common/attachment/downloadFile?type=file&attachmentId=${id}`)
+    }
+  }
+}
+</script>
diff --git a/src/views/FactoryManage/components/Alarm-handling.vue b/src/views/FactoryManage/components/Alarm-handling.vue
new file mode 100644
index 0000000..4e93ac0
--- /dev/null
+++ b/src/views/FactoryManage/components/Alarm-handling.vue
@@ -0,0 +1,142 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-04-06 14:07:18
+ * @Description:
+-->
+<template>
+  <el-dialog
+    :title="$t('module.factory.abnormalAlarm.EquipmentAlarmProcessing')"
+    :visible.sync="visible"
+  >
+    <el-row :gutter="10">
+      <el-form
+        ref="dataForm"
+        :model="dataForm"
+        :rules="rules"
+        size="medium"
+        label-width="110px"
+        label-position="left"
+      >
+        <el-col :span="10">
+          <el-form-item :label="$t('module.factory.abnormalAlarm.equipmentName')" prop="name">
+            <el-input v-model="dataForm.name" :placeholder="$i18nForm(['placeholder.input', $t('module.factory.abnormalAlarm.equipmentName')])" readonly :style="{width: '100%'}" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="10">
+          <el-form-item :label="$t('module.factory.abnormalAlarm.alarmInfo')" prop="alarmInfo">
+            <el-input v-model="dataForm.alarmInfo" :placeholder="$i18nForm(['placeholder.input', $t('module.factory.abnormalAlarm.alarmInfo')])" readonly :style="{width: '100%'}" />
+          </el-form-item>
+        </el-col>
+        <el-row>
+          <el-col :span="10">
+            <el-form-item :label="$t('module.factory.abnormalAlarm.alarmStartTime')" prop="alarmStartTime">
+              <el-date-picker
+                v-model="dataForm.alarmStartTime"
+                format="yyyy-MM-dd"
+                value-format="yyyy-MM-dd"
+                :style="{width: '100%'}"
+                :placeholder="$i18nForm(['placeholder.input', $t('module.factory.abnormalAlarm.alarmStartTime')])"
+                readonly
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-col :span="10">
+          <el-form-item :label="$t('module.factory.abnormalAlarm.alarmEndTime')" prop="alarmEndTime">
+            <el-date-picker
+              v-model="dataForm.alarmEndTime"
+              format="yyyy-MM-dd"
+              value-format="yyyy-MM-dd"
+              :style="{width: '100%'}"
+              :placeholder="$i18nForm(['placeholder.input', $t('module.factory.abnormalAlarm.alarmEndTime')])"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="10">
+          <el-form-item :label="$t('module.factory.abnormalAlarm.alarmStatus')" prop="alarmStatus">
+            <el-select
+              v-model="dataForm.alarmStatus"
+              :placeholder="$i18nForm(['placeholder.input', $t('module.factory.abnormalAlarm.alarmStatus')])"
+              clearable
+              :style="{width: '100%'}"
+            >
+              <el-option
+                v-for="(item, index) in alarmStatusOptions"
+                :key="index"
+                :label="item.label"
+                :value="item.value"
+                :disabled="item.disabled"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="10">
+          <el-form-item :label="$t('module.basicData.visual.Remarks')" prop="remark">
+            <el-input v-model="dataForm.remark" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Remarks')])" clearable :style="{width: '100%'}" />
+          </el-form-item>
+        </el-col>
+      </el-form>
+    </el-row>
+    <div slot="footer">
+      <el-button @click="visible = false">取消</el-button>
+      <el-button type="primary" @click="handelConfirm">确定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  components: {},
+  props: [],
+  data() {
+    return {
+      visible: false,
+      dataForm: {
+        name: undefined,
+        alarmInfo: undefined,
+        alarmStartTime: null,
+        alarmEndTime: null,
+        alarmStatus: 1,
+        remark: undefined
+      },
+      rules: {
+        equipmentName: [],
+        alarmInfo: [],
+        alarmStartTime: [],
+        alarmEndTime: [],
+        alarmStatus: [],
+        remark: []
+      },
+      alarmStatusOptions: [{
+        'label': '已解决',
+        'value': 1
+      }, {
+        'label': '报警中',
+        'value': 2
+      }]
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {
+    init(raw) {
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        this.dataForm = JSON.parse(JSON.stringify(raw.data))
+      })
+    },
+    handelConfirm() {
+      this.$refs['dataForm'].validate(valid => {
+        if (!valid) return
+      })
+    }
+  }
+}
+
+</script>
diff --git a/src/views/FactoryManage/components/Alarm-update.vue b/src/views/FactoryManage/components/Alarm-update.vue
new file mode 100644
index 0000000..42394d9
--- /dev/null
+++ b/src/views/FactoryManage/components/Alarm-update.vue
@@ -0,0 +1,173 @@
+<!--
+ * @Author: gtz
+ * @Date: 2021-03-20 14:06:05
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-04-16 15:13:02
+ * @Description: file content
+-->
+<template>
+  <el-dialog
+    :close-on-click-modal="false"
+    :visible.sync="visible"
+    style="text-align: center"
+    @open="onOpen"
+    @close="onClose"
+  >
+    <el-form
+      ref="dataForm"
+      :model="dataForm"
+      :rules="rules"
+      size="medium"
+      label-width="120px"
+      label-position="right"
+      style="text-align: left"
+    >
+      <el-row>
+        <el-row style="padding-bottom: 20px; text-align: center; font-size: 18px; color: #303133; font-weight: bold">
+          {{ $t('module.factory.abnormalAlarm.exceptionAlarm') + $t('module.factory.abnormalAlarm.detail') }}
+        </el-row>
+        <!-- <el-col :span="12">
+          <el-form-item :label="$t('module.factory.abnormalAlarm.alarmSource')">
+            {{ dataForm.alarmSource }}
+          </el-form-item>
+        </el-col> -->
+        <el-col :span="24">
+          <el-form-item :label="$t('module.factory.abnormalAlarm.alarmTime')">
+            {{ dataForm.createTime }}
+          </el-form-item>
+        </el-col>
+        <!-- <el-col :span="12">
+          <el-form-item :label="$t('module.factory.abnormalAlarm.alarmCode')">
+            {{ dataForm.alarmCode }}
+          </el-form-item>
+        </el-col> -->
+        <el-col :span="24">
+          <el-form-item :label="$t('module.factory.abnormalAlarm.alarmContent')">
+            {{ dataForm.alarmContent }}
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row style="padding-bottom: 20px; text-align: center; font-size: 18px; color: #303133; font-weight: bold">
+        {{ $t('module.factory.abnormalAlarm.description') }}
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item :label="$t('module.factory.abnormalAlarm.status')">
+            <el-select v-model="dataForm.status" clearable>
+              <el-option :value="3" :label="$t('module.factory.abnormalAlarm.processingComplete')" />
+              <el-option :value="2" :label="$t('module.factory.abnormalAlarm.inHand')" />
+              <el-option :value="1" :label="$t('module.factory.abnormalAlarm.waitingProcess')" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item :label="$t('module.factory.abnormalAlarm.handler')">
+            <!-- <el-select v-model="dataForm.handler">
+              <el-option v-for="item in workerList" :key="item.id" :value="item.id" :label="item.name" />
+            </el-select> -->
+            <el-input v-model="dataForm.handler" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item :label="$t('module.factory.abnormalAlarm.description')">
+            <el-input v-model="dataForm.description" type="textarea" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item :label="$t('module.factory.abnormalAlarm.annex')">
+            <more-upload ref="upload" :item-id="dataForm.id" :files="files" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { getInfo, update } from '@/api/factory-manage/abnormalAlarm'
+import moreUpload from '@/components/Upload/MoreFiles'
+
+export default {
+  components: { moreUpload },
+  props: {
+    workerList: {
+      type: Array,
+      require: true,
+      default: () => {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      dataForm: {
+        id: null,
+        alarmSource: null,
+        createTime: null,
+        alarmCode: null,
+        alarmContent: null,
+        status: null,
+        handler: null,
+        description: null,
+        fileIds: null
+      },
+      files: [],
+      rules: {}
+    }
+  },
+  methods: {
+    init(id) {
+      getInfo({
+        id
+      }).then(res => {
+        this.dataForm = res.data
+        this.files = []
+        res.data.fileIds.forEach((item, index) => {
+          this.files.push({
+            id: item,
+            name: res.data.fileNames[index]
+          })
+        })
+        this.visible = true
+      }).catch(() => {
+        this.visible = true
+      })
+    },
+    onOpen() {},
+    onClose() {
+      this.$refs['dataForm'].resetFields()
+      this.$emit('refreshDataList')
+    },
+    dataFormSubmit() {
+      const files = this.$refs.upload.returnFileList()
+      const fileIds = []
+      files.map(item => {
+        fileIds.push(item.id)
+      })
+      console.log(fileIds)
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          this.dataForm.fileIds = fileIds
+          const data = this.dataForm
+          update(data).then(res => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.visible = false
+                this.$emit('refreshDataList')
+              }
+            })
+          })
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/FactoryManage/components/HeadForm.vue b/src/views/FactoryManage/components/HeadForm.vue
new file mode 100644
index 0000000..4117412
--- /dev/null
+++ b/src/views/FactoryManage/components/HeadForm.vue
@@ -0,0 +1,98 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:18:27
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-04-20 16:41:50
+ * @Description:
+-->
+<template>
+  <el-form :inline="true" @keyup.enter.native="getDataList()">
+    <el-form-item v-for="(item, index) in keyName" :key="index" :label="item.name">
+      <el-input v-if="item.type === 'input'" v-model="key[index]" style="width:150px" :placeholder="placeholderName[index]" clearable />
+      <el-select v-if="item.type === 'select'" v-model="key[index]" style="width:150px" :placeholder="placeholderName[index]" clearable>
+        <!-- 这里用 :value="i.alarmId" :label="i.alarmGrade"  可以将数据传进select -->
+        <el-option v-for="i in item.option" :key="i.value" :value="i.value" :label="i.label" />
+      </el-select>
+      <el-date-picker
+        v-if="item.type === 'datePicker'"
+        v-model="key[index]"
+        type="daterange"
+        align="right"
+        unlink-panels
+        :range-separator="'formItem.to' | i18nFilter"
+        :start-placeholder="'formItem.beginTime' | i18nFilter"
+        :end-placeholder="'formItem.endTime' | i18nFilter"
+        :picker-options="pickerOptions"
+      />
+    </el-form-item>
+    <el-form-item>
+      <el-button @click="getDataList()">{{ 'btn.search' | i18nFilter }}</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+
+export default {
+  props: {
+    keyName: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    placeholderName: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      key: [],
+      pickerOptions: {
+        shortcuts: [{
+          text: this.$t('datePickerOption.lastWeek'),
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: this.$t('datePickerOption.lastMonth'),
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: this.$t('datePickerOption.lastThreeMonths'),
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      }
+    }
+  },
+  mounted() {
+    this.keyName.map(() => {
+      this.key.push(null)
+    })
+  },
+  methods: {
+    getDataList() {
+      this.$emit('getDataList', this.key)
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>
diff --git a/src/views/FactoryManage/components/LocationSub.vue b/src/views/FactoryManage/components/LocationSub.vue
new file mode 100644
index 0000000..ad2ef79
--- /dev/null
+++ b/src/views/FactoryManage/components/LocationSub.vue
@@ -0,0 +1,123 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-03-15 10:48:36
+ * @Description:
+-->
+<template>
+  <el-dialog
+    :title="'btn.see' | i18nFilter"
+    :close-on-click-modal="false"
+    :visible.sync="visible"
+  >
+    <el-row :gutter="15">
+      <el-col :span="5" style="text-align: right;">
+        {{ $t('module.factory.visual.locationSub') }}
+      </el-col>
+      <el-col :span="19">
+        <el-row v-for="item in trueSubList" :key="item">
+          {{ item }}
+        </el-row>
+      </el-col>
+    </el-row>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+
+export default {
+  data() {
+    return {
+      visible: false,
+      subList: [
+        '00023342107070243',
+        '00023342107070244',
+        '00023342107070245',
+        '00023342107070246',
+        '00023342107070247',
+        '00023342107070248',
+        '00023342107070249',
+        '00023342107070250',
+        '00023342107070251',
+        '00023342107070252',
+        '00023342107070253',
+        '00023342107070254',
+        '00023342107070255',
+        '00023342107070256',
+        '00023342107070257',
+        '00023342107070258',
+        '00023342107070259',
+        '00023342107070260',
+        '00023342107070261',
+        '00023342107070262',
+        '00023342107070263',
+        '00023342107070264',
+        '00023342107070265',
+        '00023342107070266',
+        '00023342107070267',
+        '00023342107070268',
+        '00023342107070269',
+        '00023342107070270',
+        '00023342107070271',
+        '00023342107070272',
+        '00023342107070273',
+        '00023342107070274',
+        '00023342107070275',
+        '00023342107070276',
+        '00023342107070277',
+        '00023342107070278',
+        '00023342107070279',
+        '00023342107070280',
+        '00023342107070281',
+        '00023342107070282',
+        '00023342107070283',
+        '00023342107070284',
+        '00023342107070285',
+        '00023342107070286',
+        '00023342107070287',
+        '00023342107070288',
+        '00023342107070289',
+        '00023342107070290',
+        '00023342107070291',
+        '00023342107070292'
+      ],
+      oldNum: [],
+      trueSubList: []
+    }
+  },
+  watch: {
+    visible: function(val) {
+      if (val) {
+        this.trueSubList = []
+        this.oldNum = []
+        for (let i = 0; i < Number(this.getRandom(10, 30)); i++) {
+          this.getTrueSubList()
+        }
+      }
+    }
+  },
+  methods: {
+    getRandom(min, max, fixed = 0) {
+      const differ = max - min
+      const random = Math.random()
+      return (min + random * differ).toFixed(fixed)
+    },
+    init() {
+      this.visible = true
+    },
+    getTrueSubList() {
+      const idx = Number(this.getRandom(0, 59))
+      if (this.oldNum.indexOf(idx) >= 0) {
+        this.getTrueSubList()
+      } else {
+        this.trueSubList.push(this.subList[idx])
+        this.oldNum.push(idx)
+      }
+    }
+  }
+}
+</script>
diff --git a/src/views/FactoryManage/components/VisualSub.vue b/src/views/FactoryManage/components/VisualSub.vue
new file mode 100644
index 0000000..69c55b2
--- /dev/null
+++ b/src/views/FactoryManage/components/VisualSub.vue
@@ -0,0 +1,82 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-03-15 10:48:36
+ * @Description:
+-->
+<template>
+  <el-dialog
+    :title="'btn.see' | i18nFilter"
+    :close-on-click-modal="false"
+    :visible.sync="visible"
+  >
+    <el-row :gutter="15">
+      <el-col :span="5" style="text-align: right;">
+        {{ $t('module.factory.visual.visualSub') }}
+      </el-col>
+      <el-col :span="19">
+        <el-row v-for="item in trueSubList" :key="item">
+          {{ item }}
+        </el-row>
+      </el-col>
+    </el-row>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+
+export default {
+  data() {
+    return {
+      visible: false,
+      subList: [
+        '00023342107070233',
+        '00023342107070234',
+        '00023342107070235',
+        '00023342107070236',
+        '00023342107070237',
+        '00023342107070238',
+        '00023342107070239',
+        '00023342107070240',
+        '00023342107070241',
+        '00023342107070242'
+      ],
+      oldNum: null,
+      trueSubList: []
+    }
+  },
+  watch: {
+    visible: function(val) {
+      if (val) {
+        this.trueSubList = []
+        for (let i = 0; i < Number(this.getRandom(1, 2)); i++) {
+          this.getTrueSubList()
+        }
+      }
+    }
+  },
+  methods: {
+    getRandom(min, max, fixed = 0) {
+      const differ = max - min
+      const random = Math.random()
+      return (min + random * differ).toFixed(fixed)
+    },
+    init() {
+      this.visible = true
+    },
+    getTrueSubList() {
+      const idx = Number(this.getRandom(0, 9))
+      if (idx === this.oldNum) {
+        this.getTrueSubList()
+      } else {
+        this.trueSubList.push(this.subList[idx])
+        this.oldNum = idx
+      }
+    }
+  }
+}
+</script>
diff --git a/src/views/FactoryManage/visual.vue b/src/views/FactoryManage/visual.vue
new file mode 100644
index 0000000..f743695
--- /dev/null
+++ b/src/views/FactoryManage/visual.vue
@@ -0,0 +1,218 @@
+<!--
+ * @Author: gtz
+ * @Date: 2021-03-20 14:02:38
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-04-16 15:25:27
+ * @Description: file content
+-->
+<template>
+  <div class="app-container app-container-visual">
+    <el-row>
+      <el-select v-model="line" @change="changeLine">
+        <el-option v-for="item in lineList" :key="item.id" :value="item.id" :label="item.name" />
+      </el-select>
+      <el-button v-if="lineObj[line].stock" type="primary" @click="showLocation">{{ $t('module.factory.visual.showLocation') }}</el-button>
+    </el-row>
+    <el-row class="visual-status">
+      <span v-for="item in statusData" :key="item.id" class="status-box">
+        <span class="status-color" :style="{backgroundColor: item.colour}" />
+        <span>{{ item.status }}</span>
+      </span>
+    </el-row>
+    <el-row v-if="showPic" class="img-box">
+      <img v-if="line" :src="imageUrl" class="img-item">
+      <div
+        v-for="item in lineObj[line].equipmentPoint"
+        :key="item.id"
+        class="img-point"
+        :style="{top: `calc(${item.pointY} - 10px)`, left: `calc(${item.pointX} - 30px)`}"
+        @click="showSubstrate"
+      >
+        <el-tooltip class="item" effect="dark" :content="lineEqData[item.id].name + ':' + statusList[lineEqData[item.id].status].description" placement="top">
+          <div class="img-point-name">
+            <div
+              :style="{
+                width: (lineEqData[item.id].name + ':' + statusList[lineEqData[item.id].status].description).length * 12 > 60 ? (lineEqData[item.id].name + ':' + statusList[lineEqData[item.id].status].description).length * 12 + 'px' : '60px',
+                animation: '10s wordsLoop linear infinite normal',
+                textAlign: 'center'
+              }"
+            >
+              {{ lineEqData[item.id].name + ':' + statusList[lineEqData[item.id].status].description }}
+            </div>
+          </div>
+        </el-tooltip>
+        <div class="img-point-status" :style="{background: statusList[lineEqData[item.id].status].colour}" />
+      </div>
+    </el-row>
+    <Visual-sub ref="visualsub" />
+  </div>
+</template>
+
+<script>
+import { VisualList, VisualEqData } from '@/api/basicData/visual'
+import { getUrl } from '@/api/file'
+import { StateConfigList } from '@/api/basicData/StateConfig'
+import { blobToBase64 } from '@/utils/blobToBase64'
+import VisualSub from './components/VisualSub'
+
+export default {
+  name: 'Factory',
+  components: { VisualSub },
+  data() {
+    return {
+      line: null,
+      lineList: [],
+      lineObj: {},
+      imageUrl: null,
+      lineEqData: {},
+      showPic: false,
+      statusList: {},
+      statusData: []
+    }
+  },
+  watch: {
+    line: function(val) {
+      getUrl({
+        attachmentId: this.lineObj[val].annexId,
+        type: 0
+      }).then(blob => {
+        blobToBase64(blob.data).then(res => {
+          this.imageUrl = res
+        })
+      })
+    }
+  },
+  created() {
+    this.getStatusList()
+  },
+  methods: {
+    getStatusList() {
+      StateConfigList({
+        current: 1,
+        size: 999
+      }).then(response => {
+        if (response.data.records) {
+          this.statusData = response.data.records
+          response.data.records.map(item => {
+            this.statusList[item.id] = item
+          })
+          console.log(this.statusList)
+          this.getList()
+        } else {
+          this.statusList = {}
+        }
+      })
+    },
+    getList() {
+      VisualList({
+        current: 1,
+        size: 999,
+        type: 1
+      }).then(response => {
+        if (response.code === 0) {
+          this.lineList = response.data.records
+          response.data.records.map(item => {
+            if (item.equipmentPoint) {
+              item.equipmentPoint = JSON.parse(item.equipmentPoint)
+            }
+            this.lineObj[item.id] = item
+          })
+          if (response.data.records.length > 0) {
+            this.line = response.data.records[0].id
+            this.changeLine(response.data.records[0].id)
+          }
+        } else {
+          this.lineList = []
+          this.lineObj = {}
+        }
+      })
+    },
+    changeLine(id) {
+      VisualEqData({
+        current: 1,
+        size: 999,
+        id
+      }).then(response => {
+        if (response.code === 0) {
+          this.showPic = true
+          response.data.map(item => {
+            this.lineEqData[item.id] = item
+          })
+        }
+      })
+    },
+    showLocation() {
+      this.$router.push({
+        name: 'VisualLocation',
+        query: {
+          id: this.line
+        }
+      })
+    },
+    showSubstrate() {
+      this.$refs.visualsub.init()
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+  .app-container-visual{
+    .visual-status{
+      width: calc(100% - 40px);
+      min-width: 760px;
+      margin: 0 20px;
+      line-height: 24px;
+      .status-box{
+        margin-right: 10px;
+        .status-color{
+          display: inline-block;
+          height: 12px;
+          width: 12px;
+          border-radius: 6px;
+        }
+      }
+    }
+    .img-box{
+      width: 100%;
+      min-width: 800px;
+      margin-top: 20px;
+      position: relative;
+      .img-item{
+        width: 100%;
+      }
+      .img-point{
+        width: 60px;
+        height: 20px;
+        background: rgba(0, 0, 0, 1);
+        font-size: 12px;
+        line-height: 20px;
+        color: #fff;
+        text-align: center;
+        position: absolute;
+        cursor: pointer;
+        .img-point-name{
+          width: 100%;
+          height: 20px;
+          overflow: hidden;
+        }
+        .img-point-status{
+          width: 12px;
+          height: 12px;
+          border-radius: 100%;
+          position: absolute;
+          right: 0;
+          top: -15px;
+        }
+      }
+    }
+  }
+  @keyframes wordsLoop {
+    0% {
+        transform: translateX(60px);
+    }
+    100% {
+        transform: translateX(-100%);
+    }
+  }
+</style>
diff --git a/src/views/FactoryManage/visualLocation.vue b/src/views/FactoryManage/visualLocation.vue
new file mode 100644
index 0000000..dd83ff6
--- /dev/null
+++ b/src/views/FactoryManage/visualLocation.vue
@@ -0,0 +1,180 @@
+<!--
+ * @Author: gtz
+ * @Date: 2021-03-20 14:02:38
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-04-16 15:25:27
+ * @Description: file content
+-->
+<template>
+  <div class="app-container app-container-visual">
+    <el-button type="primary" icon="el-icon-arrow-left" @click="goBack">{{ 'btn.back' | i18nFilter }}</el-button>
+    <el-row v-if="showPic" class="img-box">
+      <img :src="imageUrl" class="img-item">
+      <div
+        v-for="item in lineData.equipmentPoint"
+        :key="item.id"
+        class="img-point"
+        :style="{top: `calc(${item.pointY} - 10px)`, left: `calc(${item.pointX} - 30px)`}"
+        @click="showSubstrate"
+      >
+        <el-tooltip class="item" effect="dark" :content="lineEqData[item.id].text" placement="top">
+          <div class="img-point-name">
+            <div
+              :style="{
+                width: lineEqData[item.id].text.length * 12 + 'px',
+                animation: '20s wordsLoop linear infinite normal',
+                textAlign: 'center'
+              }"
+            >
+              {{ lineEqData[item.id].text }}
+            </div>
+          </div>
+        </el-tooltip>
+      </div>
+      <div
+        v-for="item in carList"
+        :key="item.id"
+        class="visual-car"
+        :style="{top: `calc(${item.pointY} - 10px)`, left: `calc(${item.pointX} + 30px)`}"
+      >
+        <el-tooltip class="item" effect="dark" :content="item.name" placement="top">
+          <svg-icon icon-class="car" />
+        </el-tooltip>
+      </div>
+    </el-row>
+    <Location-sub ref="locationsub" />
+  </div>
+</template>
+
+<script>
+import { VisualList, VisualLocationData } from '@/api/basicData/visual'
+import { getUrl } from '@/api/file'
+import { blobToBase64 } from '@/utils/blobToBase64'
+import LocationSub from './components/LocationSub'
+
+export default {
+  name: 'Factory',
+  components: { LocationSub },
+  data() {
+    return {
+      line: null,
+      lineData: {},
+      imageUrl: null,
+      lineEqData: {},
+      showPic: false,
+      statusList: {},
+      carList: [
+        { id: 1, name: '叉车1', stockPos: '', pointX: '0', pointY: '0' }
+      ]
+    }
+  },
+  created() {
+    this.getLocation()
+  },
+  methods: {
+    getLocation() {
+      VisualList({
+        current: 1,
+        size: 1,
+        parentId: this.$route.query.id
+      }).then(res => {
+        if (res.data.records.length) {
+          this.lineData = res.data.records[0]
+          if (this.lineData.equipmentPoint) {
+            this.lineData.equipmentPoint = JSON.parse(this.lineData.equipmentPoint)
+            this.carList[0].stockPos = this.lineData.equipmentPoint[0].id
+            this.carList[0].pointX = this.lineData.equipmentPoint[0].pointX
+            this.carList[0].pointY = this.lineData.equipmentPoint[0].pointY
+          }
+          this.getLocationInfo(res.data.records[0].id)
+          getUrl({
+            attachmentId: res.data.records[0].annexId,
+            type: 0
+          }).then(blob => {
+            blobToBase64(blob.data).then(res => {
+              this.imageUrl = res
+            })
+          })
+        }
+      })
+    },
+    getLocationInfo(id) {
+      VisualLocationData({
+        current: 1,
+        size: 999,
+        id
+      }).then(response => {
+        if (response.code === 0) {
+          this.showPic = true
+          response.data.map(item => {
+            const footer = ',' + this.$t('module.factory.visual.box') + ':' + item.storageVoList.map(i => i.name)?.join(',')
+            const head = this.$t('module.factory.visual.location') + ':' + item.name
+            item.text = item.storageVoList ? head + footer : head
+            this.lineEqData[item.stockId] = item
+          })
+        }
+      })
+    },
+    showSubstrate() {
+      this.$refs.locationsub.init()
+    },
+    goBack() {
+      this.$router.go(-1)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+  .app-container-visual{
+    .img-box{
+      width: 100%;
+      min-width: 800px;
+      margin-top: 20px;
+      position: relative;
+      .img-item{
+        width: 100%;
+      }
+      .img-point{
+        width: 60px;
+        height: 20px;
+        background: rgba(0, 0, 0, 1);
+        font-size: 12px;
+        line-height: 20px;
+        color: #fff;
+        text-align: center;
+        position: absolute;
+        cursor: pointer;
+        .img-point-name{
+          width: 100%;
+          height: 20px;
+          overflow: hidden;
+        }
+        .img-point-status{
+          width: 12px;
+          height: 12px;
+          border-radius: 100%;
+          position: absolute;
+          right: 0;
+          top: -15px;
+        }
+      }
+      .visual-car{
+        display: inline-block;
+        width: 24px;
+        height: 24px;
+        line-height: 24px;
+        font-size: 24px;
+        position: absolute;
+      }
+    }
+  }
+  @keyframes wordsLoop {
+    0% {
+        transform: translateX(60px);
+    }
+    100% {
+        transform: translateX(-100%);
+    }
+  }
+</style>
diff --git a/src/views/MenuManager/AddForm.vue b/src/views/MenuManager/AddForm.vue
new file mode 100644
index 0000000..b110d49
--- /dev/null
+++ b/src/views/MenuManager/AddForm.vue
@@ -0,0 +1,115 @@
+<template>
+  <div>
+    <el-dialog v-bind="$attrs" :title="'formItem.menu.add'| i18nFilter" v-on="$listeners" @open="onOpen" @close="onClose">
+      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
+        <el-form-item :label="$t('menuManage.menuCode')" prop="code">
+          <el-input v-model="formData.code" :placeholder="['placeholder.input', $t('menuManage.menuCode')] | i18nFilterForm" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('menuManage.type')" prop="type">
+          <el-select v-model="formData.type" :placeholder="['placeholder.select', $t('menuManage.type')] | i18nFilterForm" clearable :style="{width: '100%'}">
+            <el-option
+              label="module"
+              value="1"
+            />
+            <el-option
+              label="menu"
+              value="2"
+            />
+            <el-option
+              label="button"
+              value="3"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('menuManage.href')" prop="href">
+          <el-input v-model="formData.href" :placeholder="['placeholder.input', $t('menuManage.href')] | i18nFilterForm" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('menuManage.menuName')" prop="name">
+          <el-input v-model="formData.name" :placeholder="['placeholder.input', $t('menuManage.menuName')] | i18nFilterForm" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('menuManage.remark')" prop="remark">
+          <el-input v-model="formData.remark" :placeholder="['placeholder.input', $t('menuManage.remark')] | i18nFilterForm" clearable :style="{width: '100%'}" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="close">{{ 'btn.cancel' | i18nFilter }}</el-button>
+        <el-button type="primary" @click="handelConfirm">{{ 'btn.confirm' | i18nFilter }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { addMenu } from '@/api/menu'
+export default {
+  components: {},
+  inheritAttrs: false,
+  props: [],
+  data() {
+    return {
+      formData: {
+        code: undefined,
+        type: undefined,
+        href: undefined,
+        name: undefined,
+        remark: undefined
+      },
+      rules: {
+        code: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('menuManage.menuCode')]),
+          trigger: 'blur'
+        }],
+        type: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.select', this.$t('menuManage.type')]),
+          trigger: 'change'
+        }],
+        href: [],
+        name: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('menuManage.menuName')]),
+          trigger: 'blur'
+        }],
+        remark: []
+      },
+      iconOptions: [{
+        'label': '选项一',
+        'value': 1
+      }, {
+        'label': '选项二',
+        'value': 2
+      }]
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {
+    onOpen() {},
+    onClose() {
+      this.$refs['elForm'].resetFields()
+    },
+    close() {
+      this.$emit('update:visible', false)
+    },
+    handelConfirm() {
+      this.$refs['elForm'].validate(async valid => {
+        if (!valid) return
+        const result = await addMenu(this.formData)
+        if (result.code === 0) {
+          this.$message({
+            type: 'success',
+            message: '添加成功！'
+          })
+          this.$emit('done')
+        }
+        this.close()
+      })
+    }
+  }
+}
+
+</script>
+<style>
+</style>
diff --git a/src/views/MenuManager/EditForm.vue b/src/views/MenuManager/EditForm.vue
new file mode 100644
index 0000000..4e71143
--- /dev/null
+++ b/src/views/MenuManager/EditForm.vue
@@ -0,0 +1,105 @@
+<template>
+  <div>
+    <el-dialog v-bind="$attrs" :title="'formItem.menu.edit'| i18nFilter" v-on="$listeners" @open="onOpen" @close="onClose">
+      <el-form ref="" :model="formData" :rules="rules" size="medium" label-width="100px">
+        <el-form-item :label="$t('menuManage.menuCode')" prop="code">
+          <el-input v-model="formData.code" :placeholder="['placeholder.input', $t('menuManage.menuCode')] | i18nFilterForm" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('menuManage.icon')" prop="icon">
+          <el-select v-model="formData.icon" :placeholder="['placeholder.select', $t('menuManage.icon')] | i18nFilterForm" clearable :style="{width: '100%'}">
+            <el-option
+              v-for="(item, index) in iconOptions"
+              :key="index"
+              :label="item.label"
+              :value="item.value"
+              :disabled="item.disabled"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('menuManage.href')" prop="href">
+          <el-input v-model="formData.href" :placeholder="['placeholder.input', $t('menuManage.href')] | i18nFilterForm" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('menuManage.menuName')" prop="name">
+          <el-input v-model="formData.name" :placeholder="['placeholder.input', $t('menuManage.menuName')] | i18nFilterForm" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('menuManage.remark')" prop="remark">
+          <el-input v-model="formData.remark" :placeholder="['placeholder.input', $t('menuManage.remark')] | i18nFilterForm" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('menuManage.menustartstop')" prop="enabled">
+          <el-switch v-model="formData.enabled" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="close">{{ 'btn.cancel' | i18nFilter }}</el-button>
+        <el-button type="primary" @click="handelConfirm">{{ 'btn.confirm' | i18nFilter }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+  components: {},
+  inheritAttrs: false,
+  props: [],
+  data() {
+    return {
+      formData: {
+        code: undefined,
+        icon: undefined,
+        href: undefined,
+        name: undefined,
+        remark: undefined,
+        enabled: true
+      },
+      rules: {
+        code: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('menuManage.menuCode')]),
+          trigger: 'blur'
+        }],
+        icon: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.select', this.$t('menuManage.icon')]),
+          trigger: 'change'
+        }],
+        href: [],
+        name: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('menuManage.menuName')]),
+          trigger: 'blur'
+        }],
+        remark: []
+      },
+      iconOptions: [{
+        'label': '选项一',
+        'value': 1
+      }, {
+        'label': '选项二',
+        'value': 2
+      }]
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {
+    onOpen() {},
+    onClose() {
+      this.$refs[''].resetFields()
+    },
+    close() {
+      this.$emit('update:visible', false)
+    },
+    handelConfirm() {
+      this.$refs[''].validate(valid => {
+        if (!valid) return
+        this.close()
+      })
+    }
+  }
+}
+
+</script>
+<style>
+</style>
diff --git a/src/views/MenuManager/index.vue b/src/views/MenuManager/index.vue
new file mode 100644
index 0000000..2ddcccc
--- /dev/null
+++ b/src/views/MenuManager/index.vue
@@ -0,0 +1,192 @@
+<template>
+  <div style="margin:20px">
+    <div style="margin:20px">
+      <el-button type="primary" @click="addOrUpdateHandle()">{{ 'btn.add' | i18nFilter }}</el-button>
+    </div>
+    <el-table
+      :data="menuList"
+      :header-cell-style="{background:'#eef1f6',color:'#606266',height: '56px'}"
+      :stripe="true"
+      highlight-current-row
+      row-key="id"
+      border
+      style="width: 100%; "
+    >
+      <el-table-column
+        prop="name"
+        header-align="center"
+        align="left"
+        width="200px"
+        :label="$t('menuManage.menuName')"
+      />
+      <el-table-column
+        prop="code"
+        header-align="center"
+        align="center"
+        :label="$t('menuManage.menuCode')"
+      />
+      <el-table-column
+        prop="enName"
+        header-align="center"
+        align="center"
+        :label="$t('menuManage.enName')"
+      />
+      <el-table-column
+        prop="category"
+        header-align="center"
+        align="center"
+        :label="$t('menuManage.menuClassify')"
+      >
+        <template slot-scope="scope">
+          {{ scope.row.category|commonFilter(basicData('roleType')) }}
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="type"
+        header-align="center"
+        align="center"
+        :label="$t('menuManage.type')"
+      >
+        <template slot-scope="scope">
+          {{ scope.row.type|commonFilter(basicData('menuType')) }}
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="parentName"
+        header-align="center"
+        align="center"
+        :label="$t('menuManage.parentName')"
+      />
+      <el-table-column
+        prop="sortNo"
+        header-align="center"
+        align="center"
+        :label="$t('menuManage.sortNumber')"
+      />
+      <el-table-column
+        prop="icon"
+        header-align="center"
+        align="center"
+        :label="$t('menuManage.icon')"
+      >
+        <template slot-scope="scope">
+          <svg-icon :icon-class="scope.row.icon || ''" />
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="href"
+        header-align="center"
+        align="center"
+        :show-overflow-tooltip="true"
+        :label="$t('menuManage.menuURL')"
+      />
+      <el-table-column
+        fixed="right"
+        header-align="center"
+        align="center"
+        :label="'tableHeader.operation' | i18nFilter"
+      >
+        <template slot-scope="scope">
+          <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ 'btn.edit' | i18nFilter }}</el-button>
+          <span style="margin:0 3px">|</span>
+          <el-button type="text" size="small" @click="deleteHandle(scope.row)">{{ 'btn.delete' | i18nFilter }}</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 弹窗, 新增 / 修改 -->
+    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList" />
+  </div>
+</template>
+
+<script>
+import AddOrUpdate from './menu-add-or-update'
+import { getMenuList, delMenu } from '@/api/menu'
+import basicData from '@/filters/basicData'
+
+export default {
+  components: {
+    AddOrUpdate
+  },
+  filters: {
+    commonFilter: (source, filterType = a => a) => {
+      return filterType(source)
+    }
+  },
+  data() {
+    return {
+      menuList: [],
+      dataList: [],
+      basicData,
+      dataListLoading: false,
+      addOrUpdateVisible: false,
+      listQuery: {
+        current: 1,
+        size: 550
+      }
+    }
+  },
+  created() {
+    this.getDataList()
+  },
+  methods: {
+    // 获取数据列表
+    async getDataList() {
+      this.dataListLoading = false
+      this.dataList.splice(0, this.dataList.length)
+      const res = await getMenuList(this.listQuery)
+      if (res.code === 0) {
+        this.dataList = res.data
+        this.dataListLoading = false
+      }
+      this.setMenuList()
+    },
+    // 新增 / 修改
+    addOrUpdateHandle(id) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id)
+      })
+    },
+    // 删除
+    deleteHandle(row) {
+      this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${row.name}]?`, this.$t('module.basicData.visual.Tips'), {
+        confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+        cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+        type: 'warning'
+      }).then(() => {
+        delMenu(row.id).then(response => {
+          this.$message({
+            message: this.$t('module.basicData.visual.success'),
+            type: 'success',
+            duration: 1500,
+            onClose: () => {
+              this.getDataList()
+            }
+          })
+        })
+      }).catch(() => {})
+    },
+    setMenuList() {
+      this.menuList.splice(0, this.menuList.length)
+      this.dataList.forEach(item => {
+        if (item.parentId === '0') {
+          this.menuList.push(item)
+        } else {
+          this.append(item)
+        }
+      })
+    },
+    append(child) {
+      this.dataList.forEach(item => {
+        if (child.parentId === item.id) {
+          child.parentName = item.name
+          if (!item.children) {
+            this.$set(item, 'children', [])
+          }
+          item.children.push(child)
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/MenuManager/menu-add-or-update.vue b/src/views/MenuManager/menu-add-or-update.vue
new file mode 100644
index 0000000..26849b2
--- /dev/null
+++ b/src/views/MenuManager/menu-add-or-update.vue
@@ -0,0 +1,267 @@
+<template>
+  <el-dialog
+    :title="!dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter"
+    :close-on-click-modal="false"
+    :visible.sync="visible"
+  >
+    <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="80px" @keyup.enter.native="dataFormSubmit()">
+      <el-form-item :label="$t('menuManage.type')" prop="type">
+        <el-radio-group v-model="dataForm.type">
+          <el-radio v-for="(type, index) in typeList" :key="index" :label="index">{{ type }}</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item :label="typeList[dataForm.type] + $t('menuManage.name')" prop="name">
+        <el-input v-model="dataForm.name" :placeholder="typeList[dataForm.type] + $t('menuManage.name')" />
+      </el-form-item>
+      <el-form-item :label="$t('menuManage.parentName')" prop="parentName">
+        <el-popover
+          ref="menuListPopover"
+          placement="bottom-start"
+          :disabled="Boolean(dataForm.id)"
+          trigger="click"
+        >
+          <el-tree
+            ref="menuListTree"
+            :data="menuList"
+            :props="menuListTreeProps"
+            node-key="id"
+            :highlight-current="true"
+            :expand-on-click-node="false"
+            @current-change="menuListTreeCurrentChangeHandle"
+          />
+        </el-popover>
+        <el-input v-model="dataForm.parentName" v-popover:menuListPopover :placeholder="$i18nForm(['placeholder.input', $t('menuManage.parentName')])" readonly class="menu-list__input" />
+      </el-form-item>
+      <el-form-item :label="$t('menuManage.menuCode')" prop="code">
+        <el-input v-model="dataForm.code" :placeholder="$i18nForm(['placeholder.input', $t('menuManage.menuCode')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('menuManage.enName')" prop="enName">
+        <el-input v-model="dataForm.enName" :placeholder="$i18nForm(['placeholder.input', $t('menuManage.enName')])" clearable />
+      </el-form-item>
+      <el-form-item v-if="dataForm.type === 1" :label="$t('menuManage.menuURL')" prop="href">
+        <el-input v-model="dataForm.href" :placeholder="$i18nForm(['placeholder.input', $t('menuManage.menuURL')])" />
+      </el-form-item>
+      <el-form-item v-if="dataForm.type !== 0" :label="$t('menuManage.authorizationMark')" prop="permission">
+        <el-input v-model="dataForm.permission" :placeholder="$i18nForm(['placeholder.input', $t('menuManage.permissionText')])" />
+      </el-form-item>
+      <el-form-item v-if="dataForm.type !== 2" :label="$t('menuManage.sortNumber')" prop="sortNo">
+        <el-input-number v-model="dataForm.sortNo" controls-position="right" :min="0" />
+      </el-form-item>
+      <el-form-item v-if="dataForm.type !== 2" :label="$t('menuManage.icon')" prop="icon">
+        <el-row>
+          <el-col :span="22">
+            <el-popover
+              ref="iconListPopover"
+              placement="bottom-start"
+              trigger="click"
+              popper-class="mod-menu__icon-popover"
+            >
+              <div class="mod-menu__icon-inner">
+                <div class="mod-menu__icon-list">
+                  <el-button
+                    v-for="(item, index) in iconList"
+                    :key="index"
+                    :class="{ 'is-active': item === dataForm.icon }"
+                    @click="iconActiveHandle(item)"
+                  >
+                    <svg-icon :icon-class="item" />
+                  </el-button>
+                </div>
+              </div>
+            </el-popover>
+            <el-input v-model="dataForm.icon" v-popover:iconListPopover readonly :placeholder="$t('menuManage.icon')" class="icon-list__input" @change="$forceUpdate()" />
+          </el-col>
+        </el-row>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { getMenuList, addMenu, editMenu, getMenuDetail } from '@/api/menu'
+import Icon from '@/icons'
+
+export default {
+  data() {
+    var validateUrl = (rule, value, callback) => {
+      if (this.dataForm.type === 1 && !/\S/.test(value)) {
+        callback(new Error('菜单URL不能为空'))
+      } else {
+        callback()
+      }
+    }
+    return {
+      visible: false,
+      typeList: ['目录', '菜单', '按钮'],
+      dataForm: {
+        id: '',
+        type: 1,
+        name: '',
+        code: '',
+        parentId: 0,
+        category: '1',
+        parentName: '',
+        icon: '',
+        enName: '',
+        href: '',
+        permission: '',
+        sortNo: 0
+      },
+      dataRule: {
+        name: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('menuManage.menuName')]), trigger: 'blur' }
+        ],
+        parentName: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('menuManage.parentName')]), trigger: 'change' }
+        ],
+        href: [
+          { validator: validateUrl, trigger: 'blur' }
+        ]
+      },
+      menuList: [],
+      dataList: [],
+      menuListTreeProps: {
+        label: 'name',
+        children: 'children'
+      },
+      listQuery: {
+        current: 1,
+        size: 550
+      },
+      iconList: []
+    }
+  },
+  created() {
+    this.iconList = Icon.getNameList()
+  },
+  methods: {
+    // 获取数据列表
+    async init(id) {
+      this.visible = true
+      this.dataForm.id = id || ''
+      this.dataList.splice(0, this.dataList.length)
+      const res = await getMenuList(this.listQuery)
+      if (res.code === 0) {
+        this.dataList = res.data
+      }
+      this.setMenuList()
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          getMenuDetail(this.dataForm.id).then(res => {
+            this.dataForm = res.data
+          })
+        }
+      })
+    },
+    // 菜单树选中
+    menuListTreeCurrentChangeHandle(data, node) {
+      this.dataForm.parentId = data.id
+      this.dataForm.parentName = data.name
+    },
+    // 菜单树设置当前选中节点
+    menuListTreeSetCurrentNode() {
+      this.$refs.menuListTree.setCurrentKey(this.dataForm.parentId)
+      this.dataForm.parentName = (this.$refs.menuListTree.getCurrentNode() || {})['name']
+    },
+    // 图标选中
+    iconActiveHandle(iconName) {
+      this.dataForm.icon = iconName
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          const data = this.dataForm
+          if (this.dataForm.id) {
+            editMenu(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          } else {
+            addMenu(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          }
+        }
+      })
+    },
+    setMenuList() {
+      this.menuList.splice(0, this.menuList.length)
+      this.dataList.forEach(item => {
+        if (item.parentId === '0') {
+          this.menuList.push(item)
+        } else {
+          this.append(item)
+        }
+      })
+    },
+    append(child) {
+      this.dataList.forEach(item => {
+        if (child.parentId === item.id) {
+          if (!item.children) {
+            this.$set(item, 'children', [])
+          }
+          item.children.push(child)
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+  .mod-menu {
+    .menu-list__input,
+    .icon-list__input {
+       > .el-input__inner {
+        cursor: pointer;
+      }
+    }
+    &__icon-popover {
+      width: 458px;
+      overflow: hidden;
+    }
+    &__icon-inner {
+      width: 478px;
+      max-height: 258px;
+      overflow-x: hidden;
+      overflow-y: auto;
+    }
+    &__icon-list {
+      width: 458px;
+      padding: 0;
+      margin: -8px 0 0 -8px;
+      > .el-button {
+        padding: 8px;
+        margin: 8px 0 0 8px;
+        > span {
+          display: inline-block;
+          vertical-align: middle;
+          width: 18px;
+          height: 18px;
+          font-size: 18px;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/views/OrgManager/AddForm.vue b/src/views/OrgManager/AddForm.vue
new file mode 100644
index 0000000..21a7bf6
--- /dev/null
+++ b/src/views/OrgManager/AddForm.vue
@@ -0,0 +1,103 @@
+<template>
+  <div>
+    <el-dialog v-bind="$attrs" :title="'formItem.org.add' | i18nFilter" v-on="$listeners" @open="onOpen" @close="onClose">
+      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
+        <el-form-item :label="$t('orgManage.orgName')" prop="name">
+          <el-input v-model="formData.name" :placeholder="['placeholder.input', $t('orgManage.orgName')] | i18nFilterForm" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('orgManage.parentOrg')" prop="parentId">
+          <el-select v-model="formData.parentId" :placeholder="['placeholder.select', $t('orgManage.parentOrg')] | i18nFilterForm" clearable :style="{width: '100%'}">
+            <el-option
+              v-for="(item, index) in parentIdOptions"
+              :key="index"
+              :label="item.label"
+              :value="item.value"
+              :disabled="item.disabled"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('orgManage.address')" prop="address">
+          <el-input v-model="formData.address" :placeholder="['placeholder.input', $t('orgManage.address')] | i18nFilterForm" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('orgManage.phone')" prop="phone">
+          <el-input v-model="formData.phone" :placeholder="['placeholder.input', $t('orgManage.phone')] | i18nFilterForm" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('orgManage.contact')" prop="contact">
+          <el-input v-model="formData.contact" :placeholder="['placeholder.input', $t('orgManage.contact')] | i18nFilterForm" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('orgManage.email')" prop="email">
+          <el-input v-model="formData.email" :placeholder="['placeholder.input', $t('orgManage.email')] | i18nFilterForm" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('orgManage.remark')" prop="remark">
+          <el-input v-model="formData.remark" :placeholder="['placeholder.input', $t('orgManage.remark')] | i18nFilterForm" clearable :style="{width: '100%'}" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="close">{{ 'btn.cancel' | i18nFilter }}</el-button>
+        <el-button type="primary" @click="handelConfirm">{{ 'btn.confirm' | i18nFilter }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+  components: {},
+  inheritAttrs: false,
+  props: [],
+  data() {
+    return {
+      formData: {
+        name: undefined,
+        parentId: undefined,
+        address: undefined,
+        phone: undefined,
+        contact: undefined,
+        email: undefined,
+        remark: undefined
+      },
+      rules: {
+        name: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('orgManage.orgName')]),
+          trigger: 'blur'
+        }],
+        parentId: [],
+        address: [],
+        phone: [],
+        contact: [],
+        email: [],
+        remark: []
+      },
+      parentIdOptions: [{
+        'label': '选项一',
+        'value': 1
+      }, {
+        'label': '选项二',
+        'value': 2
+      }]
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {
+    onOpen() {},
+    onClose() {
+      this.$refs['elForm'].resetFields()
+    },
+    close() {
+      this.$emit('update:visible', false)
+    },
+    handelConfirm() {
+      this.$refs['elForm'].validate(valid => {
+        if (!valid) return
+        this.close()
+      })
+    }
+  }
+}
+
+</script>
+<style>
+</style>
diff --git a/src/views/OrgManager/EditForm.vue b/src/views/OrgManager/EditForm.vue
new file mode 100644
index 0000000..651c121
--- /dev/null
+++ b/src/views/OrgManager/EditForm.vue
@@ -0,0 +1,103 @@
+<template>
+  <div>
+    <el-dialog v-bind="$attrs" :title="'formItem.org.edit' | i18nFilter" v-on="$listeners" @open="onOpen" @close="onClose">
+      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
+        <el-form-item :label="$t('orgManage.orgName')" prop="name">
+          <el-input v-model="formData.name" :placeholder="['placeholder.input', $t('orgManage.orgName')] | i18nFilterForm" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('orgManage.parentOrg')" prop="parentId">
+          <el-select v-model="formData.parentId" :placeholder="['placeholder.select', $t('orgManage.parentOrg')] | i18nFilterForm" clearable :style="{width: '100%'}">
+            <el-option
+              v-for="(item, index) in parentIdOptions"
+              :key="index"
+              :label="item.label"
+              :value="item.value"
+              :disabled="item.disabled"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('orgManage.address')" prop="address">
+          <el-input v-model="formData.address" :placeholder="['placeholder.input', $t('orgManage.address')] | i18nFilterForm" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('orgManage.phone')" prop="phone">
+          <el-input v-model="formData.phone" :placeholder="['placeholder.input', $t('orgManage.phone')] | i18nFilterForm" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('orgManage.contact')" prop="contact">
+          <el-input v-model="formData.contact" :placeholder="['placeholder.input', $t('orgManage.contact')] | i18nFilterForm" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('orgManage.email')" prop="email">
+          <el-input v-model="formData.email" :placeholder="['placeholder.input', $t('orgManage.email')] | i18nFilterForm" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('orgManage.remark')" prop="remark">
+          <el-input v-model="formData.remark" :placeholder="['placeholder.input', $t('orgManage.remark')] | i18nFilterForm" clearable :style="{width: '100%'}" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="close">{{ 'btn.cancel' | i18nFilter }}</el-button>
+        <el-button type="primary" @click="handelConfirm">{{ 'btn.confirm' | i18nFilter }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+  components: {},
+  inheritAttrs: false,
+  props: [],
+  data() {
+    return {
+      formData: {
+        name: undefined,
+        parentId: undefined,
+        address: undefined,
+        phone: undefined,
+        contact: undefined,
+        email: undefined,
+        remark: undefined
+      },
+      rules: {
+        name: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('orgManage.orgName')]),
+          trigger: 'blur'
+        }],
+        parentId: [],
+        address: [],
+        phone: [],
+        contact: [],
+        email: [],
+        remark: []
+      },
+      parentIdOptions: [{
+        'label': '选项一',
+        'value': 1
+      }, {
+        'label': '选项二',
+        'value': 2
+      }]
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {
+    onOpen() {},
+    onClose() {
+      this.$refs['elForm'].resetFields()
+    },
+    close() {
+      this.$emit('update:visible', false)
+    },
+    handelConfirm() {
+      this.$refs['elForm'].validate(valid => {
+        if (!valid) return
+        this.close()
+      })
+    }
+  }
+}
+
+</script>
+<style>
+</style>
diff --git a/src/views/OrgManager/index.vue b/src/views/OrgManager/index.vue
new file mode 100644
index 0000000..191d844
--- /dev/null
+++ b/src/views/OrgManager/index.vue
@@ -0,0 +1,150 @@
+<!--
+ * @Date: 2020-12-15 15:36:52
+ * @LastEditors: guo
+ * @LastEditTime: 2021-02-25 17:00:48
+ * @FilePath: \basic-admin\src\views\OrgManager\index.vue
+ * @Description:
+-->
+<template>
+  <div class="usermanager-container">
+    <div class="method-btn-area">
+      <el-button type="primary" @click="showDialog = true">{{ 'btn.add' | i18nFilter }}</el-button>
+    </div>
+    <base-table :table-config="tableProps" :table-data="list" :is-loading="listLoading" :page="listQuery.current" :limit="listQuery.size">
+      <method-btn slot="handleBtn" :method-list="tableBtn" @clickBtn="handleClick" />
+    </base-table>
+    <pagination :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.size" @pagination="getList" />
+    <add-user-form :visible.sync="showDialog" />
+    <edit-user-form :visible.sync="showEditDialog" :target-info="{id: curEditId}" />
+  </div>
+</template>
+
+<script>
+import dataDict from '@/filters/DataDict'
+import i18n from '@/lang'
+// edit here
+const tableBtn = [{
+  type: 'edit',
+  btnName: 'btn.edit'
+}, {
+  type: 'delete',
+  btnName: 'btn.delete'
+}]
+const tableProps = [{
+  prop: 'name',
+  label: i18n.t('orgManage.orgName'),
+  align: 'center'
+}, {
+  prop: 'contact',
+  label: i18n.t('orgManage.contact'),
+  align: 'center'
+}, {
+  prop: 'email',
+  label: i18n.t('orgManage.email'),
+  align: 'center'
+}, {
+  prop: 'phone',
+  label: i18n.t('orgManage.phone'),
+  align: 'center'
+}, {
+  prop: 'enabled',
+  label: i18n.t('orgManage.status'),
+  align: 'center',
+  filter: dataDict('enableState')
+}, {
+  prop: 'remark',
+  label: i18n.t('orgManage.remark'),
+  align: 'center'
+}]
+import AddUserForm from './AddForm'
+import EditUserForm from './EditForm'
+import BaseTable from '@/components/BaseTable'
+// edit here
+import { getOrgList, delOrg } from '@/api/org'
+
+import Pagination from '@/components/Pagination'
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+export default {
+  name: 'OrgManager',
+  components: { Pagination, BaseTable, MethodBtn, AddUserForm, EditUserForm },
+  props: {},
+  data() {
+    return {
+      tableBtn,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      showDialog: false,
+      curEditId: null,
+      showEditDialog: false,
+      listQuery: {
+        current: 1,
+        size: 10
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  mounted() {},
+  methods: {
+    handleClick(raw) {
+      console.log(raw)
+      switch (raw.type) {
+        case 'delete':
+          this.$confirm(i18n.t('deleteMsgBox.content'), i18n.t('deleteMsgBox.hint'), {
+            confirmButtonText: i18n.t('btn.confirm'),
+            cancelButtonText: i18n.t('btn.cancel'),
+            type: 'warning'
+          }).then(async() => {
+            // 走接口
+            const result = await delOrg({
+              id: raw.data.id
+            })
+            if (result.code === 0) {
+              this.$message({
+                type: 'success',
+                message: i18n.t('deleteMsgBox.doneMsg')
+              })
+            }
+          })
+          break
+        case 'edit':
+          this.showEditDialog = true
+          this.curEditId = raw.data.id
+          break
+      }
+    },
+    async getList() {
+      this.listLoading = true
+      // edit here
+      const res = await getOrgList(this.listQuery)
+      if (res.code === 0) {
+        this.list = res.data.records
+        this.total = res.data.total
+        this.listLoading = false
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.usermanager-container {
+  padding: 20px;
+  .method-btn-area {
+    padding: 15px 30px;
+    margin: 10px 0 20px 0;
+    border: 1px solid #dfe6ec;
+  }
+}
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/OrgManager/manager.vue b/src/views/OrgManager/manager.vue
new file mode 100644
index 0000000..49013ff
--- /dev/null
+++ b/src/views/OrgManager/manager.vue
@@ -0,0 +1,74 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-04-06 19:33:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-04-13 10:41:11
+ * @Description:
+-->
+<template>
+  <el-container style="margin:30px">
+    <el-aside>
+      <side-tree v-if="menuList.length>0" :menu-list="menuList" @getOrganization="getOrganization" />
+    </el-aside>
+    <el-main style="border:2px solid #E4E4E4;border-radius:10px;margin-left:10px">
+      <organization-manege v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import sideTree from '../system-manage/sideTree'
+import organizationManege from '../system-manage/organizationManege'
+import { getOrgList } from '@/api/org'
+export default {
+  components: { sideTree, organizationManege },
+  data() {
+    return {
+      menuList: [],
+      addOrUpdateVisible: false,
+      organizationInfo: {},
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      },
+      listQuery: {
+        current: 1,
+        size: 500
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    async getList() {
+      // edit here
+      this.menuList.splice(0, this.menuList.length)
+      const res = await getOrgList(this.listQuery)
+      if (res.code === 0) {
+        this.menuList = res.data.records
+      }
+    },
+    getOrganization(data) {
+      this.addNew(data.id)
+    },
+    // 新增 / 修改
+    addNew(id) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id)
+      })
+    }
+  }
+}
+</script>
+<style scoped>
+.el-container >>> .el-aside{
+  border:2px solid #E4E4E4;
+  border-radius:10px;
+  background-color: white;
+  min-height:550px;
+  width:30%;
+  padding-top:20px
+}
+</style>
diff --git a/src/views/QualityManager/base/knowledge-add.vue b/src/views/QualityManager/base/knowledge-add.vue
new file mode 100644
index 0000000..a31aaf7
--- /dev/null
+++ b/src/views/QualityManager/base/knowledge-add.vue
@@ -0,0 +1,190 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-07-13 08:38:24
+ * @LastEditTime: 2021-07-13 20:09:11
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \mt-bus-fe\src\views\QualityManager\base\knowledge-add.vue
+-->
+<template>
+  <el-dialog
+    :title="!dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter"
+    :close-on-click-modal="false"
+    :visible.sync="visible"
+    @close="onClose"
+  >
+    <el-row :gutter="15" style="padding: 0 20px;">
+      <el-form
+        ref="dataForm"
+        :model="dataForm"
+        size="medium"
+        label-width="80px"
+        label-position="right"
+        :rules="rules"
+      >
+        <el-form-item :label="$t('module.basicData.knowledge.title')" prop="title">
+          <el-input v-model="dataForm.title" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.knowledge.title')])" />
+        </el-form-item>
+        <el-form-item :label="$t('module.basicData.knowledge.content')">
+          <Tinymce ref="editor" v-model="dataForm.content" :height="300" />
+        </el-form-item>
+        <el-form-item :label="$t('module.basicData.knowledge.annex')">
+          <el-upload
+            ref="annex"
+            :data="dataObj"
+            name="files"
+            :file-list="fileList"
+            :action="uploadPath"
+            :before-upload="annexBeforeUpload"
+            :on-success="handleSuccess"
+            :on-preview="handlePreview"
+            class="btn"
+          >
+            <el-button size="small" type="primary" icon="el-icon-upload">{{ 'btn.upload' | i18nFilter }}</el-button>
+          </el-upload>
+        </el-form-item>
+      </el-form>
+    </el-row>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import Tinymce from '@/components/Tinymce'
+import { uploadPath } from '@/api/basic'
+import { getUrl } from '@/api/file'
+import { getDataById, addKnowledge, updateData } from '@/api/quality-manage/knowledge'
+export default {
+  components: { Tinymce },
+  data() {
+    return {
+      visible: false,
+      // rules: [],
+      dataForm: {
+        title: null,
+        content: null,
+        annexUrl: null
+      },
+      dataObj: { typeCode: 'file' },
+      uploadPath,
+      fileList: [],
+      rules: {
+        title: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.knowledge.title')]),
+          trigger: 'blur'
+        }]
+      }
+    }
+  },
+  mounted() {},
+  methods: {
+    onClose() {
+      this.$refs['dataForm'].resetFields()
+      this.$refs['editor'].setContent('')
+      this.fileList = []
+    },
+    dataFormSubmit() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          if (this.dataForm.id) {
+            updateData(this.dataForm).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          } else {
+            addKnowledge(this.dataForm).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          }
+        }
+      })
+    },
+    init(id) {
+      this.dataForm.id = id || ''
+      this.visible = true
+      this.$nextTick(() => {
+        if (this.dataForm.id) {
+          getDataById({ id: this.dataForm.id }).then(res => {
+            this.dataForm = res.data
+            console.log(this.dataForm)
+            this.$refs['editor'].setContent(this.dataForm.content)
+            if (this.dataForm.annexUrl) {
+              const arr = this.dataForm.annexUrl.split(';').map(v => {
+                const obj = {}
+                const a = v.split(':')
+                obj.name = a[0]
+                obj.id = a[1]
+                return obj
+              })
+              this.fileList = arr
+            }
+          })
+        }
+      })
+    },
+    annexBeforeUpload(file) {
+      const isRightSize = file.size / 1024 / 1024 < 2
+      if (!isRightSize) {
+        this.$message.error('文件大小超过 2MB')
+      }
+      return isRightSize
+    },
+    handleSuccess(res, file) {
+      this.fileList.push({ name: file.name, id: res.data[0].id })
+      const arr = this.fileList.map(item => {
+        return {
+          name: item.name,
+          id: item.id
+        }
+      })
+      let str = ''
+      arr.forEach((v) => {
+        str += v.name + ':' + v.id + ';'
+      })
+      this.formData.annexUrl = str.slice(0, -1)
+    },
+    handlePreview(file) {
+      getUrl({
+        attachmentId: file.id,
+        type: 1
+      }).then(response => {
+        let fileName = ''
+        const contentDisposition = response.headers['content-disposition']
+        if (contentDisposition) {
+          fileName = contentDisposition.slice(contentDisposition.indexOf('filename=') + 9)
+        }
+        const blob = new Blob([response.data])
+        const reader = new FileReader()
+        reader.readAsDataURL(blob)
+        reader.onload = (e) => {
+          const a = document.createElement('a')
+          a.download = fileName
+          a.href = e.target.result
+          document.body.appendChild(a)
+          a.click()
+          document.body.removeChild(a)
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/QualityManager/base/knowledge.vue b/src/views/QualityManager/base/knowledge.vue
new file mode 100644
index 0000000..e3d345b
--- /dev/null
+++ b/src/views/QualityManager/base/knowledge.vue
@@ -0,0 +1,179 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-04-06 19:33:11
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-14 15:35:52
+ * @Description:
+-->
+<template>
+  <div class="app-container">
+    <el-form
+      :model="formData"
+      :inline="true"
+      size="medium"
+      label-width="150px"
+    >
+      <el-form-item :label="$t('module.basicData.knowledge.time')" prop="time">
+        <el-date-picker
+          v-model="formData.timeSlot"
+          type="daterange"
+          format="yyyy-MM-dd"
+          :start-placeholder="$t('module.basicData.knowledge.startTime')"
+          :end-placeholder="$t('module.basicData.knowledge.endTime')"
+          :range-separator="$t('module.basicData.ScrapInfo.To')"
+          clearable
+        />
+        <!-- value-format="yyyy-MM-dd" -->
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.knowledge.title')" prop="title">
+        <el-input v-model="formData.title" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.knowledge.title')])" clear />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="getList()"> {{ 'btn.search' | i18nFilter }} </el-button>
+        <el-button type="primary" @click="addNew()"> {{ 'btn.add' | i18nFilter }} </el-button>
+      </el-form-item>
+    </el-form>
+    <base-table
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    >
+      <method-btn
+        slot="handleBtn"
+        :width="trueWidth"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="formData.current"
+      :limit.sync="formData.size"
+      @pagination="getList()"
+    />
+    <knowledge-add v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
+  </div>
+</template>
+
+<script>
+const tableBtn = [
+  {
+    type: 'edit',
+    btnName: 'btn.edit'
+  },
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  }
+]
+const tableProps = [
+  // {
+  //   prop: 'createTime',
+  //   label: i18n.t('module.basicData.factory.createTime'),
+  //   filter: timeFormatter
+  // },
+  {
+    prop: 'title',
+    label: i18n.t('module.basicData.knowledge.title'),
+    align: 'center'
+  },
+  {
+    prop: 'content',
+    label: i18n.t('module.basicData.knowledge.content'),
+    align: 'center',
+    filter: getSimpleText
+  }
+]
+// import { timeFormatter } from '@/filters'
+import i18n from '@/lang'
+import { getSimpleText } from '@/filters'
+import { getKnowList, delData } from '@/api/quality-manage/knowledge'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import knowledgeAdd from './knowledge-add.vue'
+export default {
+  components: { Pagination, BaseTable, MethodBtn, knowledgeAdd },
+  data() {
+    return {
+      formData: {
+        endTime: null,
+        startTIme: null,
+        size: 10,
+        current: 1,
+        title: null,
+        timeSlot: null
+      },
+      addOrUpdateVisible: false,
+      listQuery: {
+        current: 1,
+        size: 10
+      },
+      tableProps,
+      tableBtn,
+      trueWidth: 200,
+      list: [],
+      total: 0,
+      listLoading: true
+    }
+  },
+  mounted() {
+    this.getList()
+  },
+  methods: {
+    getList() {
+      if (this.formData.timeSlot) {
+        this.formData.startTIme = this.formData.timeSlot[0]
+        this.formData.endTime = this.formData.timeSlot[1]
+      } else {
+        this.formData.startTime = ''
+        this.formData.endTime = ''
+      }
+      getKnowList(this.formData).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    },
+    handleClick(raw) {
+      if (raw.type === 'delete') {
+        this.$confirm(i18n.t('deleteMsgBox.content'), i18n.t('deleteMsgBox.hint'), {
+          confirmButtonText: i18n.t('btn.confirm'),
+          cancelButtonText: i18n.t('btn.cancel'),
+          type: 'warning'
+        }).then(() => {
+          // eslint-disable-next-line no-undef
+          delData({ id: raw.data.id }).then(response => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+              }
+            })
+          })
+        }).catch(() => {})
+      } else {
+        this.addNew(raw.data.id)
+      }
+    },
+    addNew(id) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id)
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/views/QualityManager/offlineDetec/components/detecParam-add.vue b/src/views/QualityManager/offlineDetec/components/detecParam-add.vue
new file mode 100644
index 0000000..beff5fa
--- /dev/null
+++ b/src/views/QualityManager/offlineDetec/components/detecParam-add.vue
@@ -0,0 +1,208 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-26 13:53:42
+ * @enName:
+-->
+<template>
+  <div style="margin:20px">
+    <div slot="title" style=" background-color:#02BCFF;font-size:1.5em;color:white;padding:5px 20px;margin:20px">{{ isdetail? 'btn.detail' : 'btn.edit' | i18nFilter }}</div>
+    <div style="margin:0 15px">
+      <el-form :inline="true" label-width="100px">
+        <el-form-item :label="$t('module.quality.offlineDetec.EquipmentName')">
+          <el-input v-model="equipmentDetectParamData.equipmentName" style="width:300px" readonly />
+        </el-form-item>
+        <el-form-item :label="$t('module.quality.offlineDetec.EquipmentCode')">
+          <el-input v-model="equipmentDetectParamData.equipmentCode" style="width:300px" readonly />
+        </el-form-item>
+        <el-form-item :label="$t('module.quality.offlineDetec.DetectionArea')">
+          <el-input v-model="equipmentDetectParamData.equipmentArea" style="width:300px" readonly />
+        </el-form-item>
+        <el-form-item :label="$t('module.quality.offlineDetec.EquipmentFunction')">
+          <el-input v-model="equipmentDetectParamData.equipmentDesc" style="width:300px" readonly />
+        </el-form-item>
+      </el-form>
+      <div style="margin:20px">
+        <el-button type="success" @click="goback()">{{ 'btn.back' | i18nFilter }}</el-button>
+        <el-button v-if="isdetail" type="primary" @click="goEdit()">{{ 'btn.edit' | i18nFilter }}</el-button>
+        <span v-if="!isdetail">
+          <el-button v-if="listQuery.equipmentId" type="primary" @click="addNew()">{{ 'btn.addattr' | i18nFilter }}</el-button>
+        </span>
+      </div>
+      <div style="height:380px;overflow:auto">
+        <base-table
+          :page="listQuery.current"
+          :limit="listQuery.size"
+          :table-config="tableProps"
+          :table-data="list"
+        >
+          <method-btn
+            v-if="!isdetail"
+            slot="handleBtn"
+            :method-list="tableBtn"
+            @clickBtn="handleClick"
+          />
+        </base-table>
+      </div>
+    </div>
+    <detecParam-attr-add v-if="addOrUpdateVisible" ref="addOrUpdate" :equipment-id="listQuery.equipmentId" @refreshDataList="getList" />
+  </div>
+</template>
+
+<script>import i18n from '@/lang'
+import { detecParamDetail, detecParamDelete } from '@/api/quality-manage/detecParam'
+import BaseTable from '@/components/BaseTable'
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import detecParamAttrAdd from './detecParamAttr-add'
+import basicData from '@/filters/basicData'
+
+const tableBtn = [
+  {
+    type: 'edit',
+    btnName: 'btn.edit'
+  },
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  }
+]
+const tableProps = [
+  {
+    prop: 'name',
+    label: i18n.t('module.basicData.equipmentDetectInfo.TestParameterName'),
+    align: 'center'
+  },
+  {
+    prop: 'code',
+    label: i18n.t('module.quality.offlineDetec.DetecParamCode'),
+    align: 'center'
+  },
+  {
+    prop: 'refValue',
+    label: i18n.t('module.basicData.equipmentDetectInfo.ReferenceValue'),
+    align: 'center'
+  },
+  {
+    prop: 'maxValue',
+    label: i18n.t('module.quality.offlineDetec.maxValue'),
+    align: 'center'
+  },
+  {
+    prop: 'minValue',
+    label: i18n.t('module.quality.offlineDetec.minValue'),
+    align: 'center'
+  },
+  {
+    prop: 'avgValue',
+    label: i18n.t('module.quality.offlineDetec.avgValue'),
+    align: 'center'
+  },
+  {
+    prop: 'unit',
+    label: i18n.t('module.quality.offlineDetec.unit'),
+    align: 'center'
+  },
+  {
+    prop: 'uploadSpc',
+    label: i18n.t('module.quality.offlineDetec.uploadSpc'),
+    filter: basicData('onDuty'),
+    align: 'center'
+  },
+  {
+    prop: 'remark',
+    label: i18n.t('module.basicData.visual.Remarks'),
+    align: 'center'
+  }
+]
+
+export default {
+  components: { BaseTable, MethodBtn, detecParamAttrAdd },
+  data() {
+    return {
+      addOrUpdateVisible: false,
+      categoryArr: [],
+      tableBtn,
+      trueWidth: 200,
+      tableProps,
+      list: [],
+      equipmentDetectParamData: {},
+      listQuery: {
+        current: 1,
+        size: 500,
+        equipmentId: ''
+      },
+      isdetail: false
+    }
+  },
+  created() {
+    this.equipmentDetectParamData = this.$route.query.data
+    this.listQuery.equipmentId = this.equipmentDetectParamData.equipmentId
+    this.init()
+  },
+  methods: {
+    init() {
+      this.isdetail = false
+      this.isdetail = Boolean(this.$route.query.isdetail)
+      this.list.splice(0, this.list.length)
+      this.getList()
+    },
+    getList() {
+      detecParamDetail(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+      })
+    },
+    handleClick(raw) {
+      if (raw.type === 'delete') {
+        this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`, this.$t('module.basicData.visual.Tips'), {
+          confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+          cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+          type: 'warning'
+        }).then(() => {
+          detecParamDelete(raw.data.id).then(response => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+              }
+            })
+          })
+        }).catch(() => {})
+      } else {
+        this.addNew(raw.data.id)
+      }
+    },
+    // 新增 / 修改
+    addNew(id) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id)
+      })
+    },
+    goEdit() {
+      this.isdetail = false
+    },
+    goback() {
+      this.$router.go(-1)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.drawer-footer {
+  width: 100%;
+  margin-top: 50px;
+  border-top: 1px solid #e8e8e8;
+  border-bottom: 1px solid #e8e8e8;
+  padding: 10px 50px;
+  text-align: left;
+  background: #fff;
+}
+</style>
diff --git a/src/views/QualityManager/offlineDetec/components/detecParamAttr-add.vue b/src/views/QualityManager/offlineDetec/components/detecParamAttr-add.vue
new file mode 100644
index 0000000..32a48c6
--- /dev/null
+++ b/src/views/QualityManager/offlineDetec/components/detecParamAttr-add.vue
@@ -0,0 +1,172 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-26 13:54:09
+ * @Description:
+-->
+<template>
+  <el-dialog
+    :title="!dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter"
+    :visible.sync="visible"
+  ><el-row :gutter="10">
+     <el-form
+       ref="dataForm"
+       :model="dataForm"
+       :rules="rules"
+       size="medium"
+       label-width="200px"
+       label-position="left"
+     >
+       <el-col :span="10">
+         <el-form-item :label="$t('module.basicData.equipmentDetectInfo.TestParameterName')" prop="name">
+           <el-input v-model="dataForm.name" :placeholder="$t('module.basicData.equipmentDetectInfo.TestParameterName')" clearable :style="{width: '100%'}" />
+         </el-form-item>
+       </el-col>
+       <el-col :span="10">
+         <el-form-item :label="$t('module.quality.offlineDetec.EquipmentCode')" prop="code">
+           <el-input v-model="dataForm.code" :placeholder="$t('module.quality.offlineDetec.EquipmentCode')" clearable :style="{width: '100%'}" />
+         </el-form-item>
+       </el-col>
+       <el-col :span="10">
+         <el-form-item :label="$t('module.basicData.equipmentDetectInfo.ReferenceValue')" prop="refValue">
+           <el-input-number v-model="dataForm.refValue" :step="1" :placeholder="$t('module.basicData.equipmentDetectInfo.ReferenceValue')" clearable :style="{width: '100%'}" />
+         </el-form-item>
+       </el-col>
+       <el-col :span="10">
+         <el-form-item :label="$t('module.quality.offlineDetec.maxValue')" prop="maxValue">
+           <el-input-number v-model="dataForm.maxValue" :step="1" :placeholder="$t('module.quality.offlineDetec.maxValue')" clearable :style="{width: '100%'}" />
+         </el-form-item>
+       </el-col>
+       <el-col :span="10">
+         <el-form-item :label="$t('module.quality.offlineDetec.minValue')" prop="minValue">
+           <el-input-number v-model="dataForm.minValue" :step="1" :placeholder="$t('module.quality.offlineDetec.minValue')" clearable :style="{width: '100%'}" />
+         </el-form-item>
+       </el-col>
+       <el-col :span="10">
+         <el-form-item :label="$t('module.quality.offlineDetec.avgValue')" prop="avgValue">
+           <el-input-number v-model="dataForm.avgValue" :step="1" :placeholder="$t('module.quality.offlineDetec.avgValue')" clearable :style="{width: '100%'}" />
+         </el-form-item>
+       </el-col>
+       <el-col :span="10">
+         <el-form-item :label="$t('module.quality.offlineDetec.unit')" prop="unit">
+           <el-input v-model="dataForm.unit" :placeholder="$t('module.quality.offlineDetec.unit')" clearable :style="{width: '100%'}" />
+         </el-form-item>
+       </el-col>
+       <el-col :span="10">
+         <el-form-item :label="$t('module.quality.offlineDetec.uploadSpc')" prop="uploadSpc">
+           <el-switch v-model="dataForm.uploadSpc" active-value="1" inactive-value="0" />
+         </el-form-item>
+       </el-col>
+       <el-col :span="10">
+         <el-form-item :label="$t('module.basicData.visual.Remarks')" prop="remark">
+           <el-input v-model="dataForm.remark" :placeholder="$t('module.basicData.visual.Remarks')" clearable :style="{width: '100%'}" />
+         </el-form-item>
+       </el-col>
+     </el-form>
+   </el-row>
+    <div class="drawer-footer">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { detecParamAdd, detecParamUpdate, ParamDetail, detecParamCode } from '@/api/quality-manage/detecParam'
+
+export default {
+  props: {
+    equipmentId: {
+      type: String,
+      default: () => {
+        return ''
+      }
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      dataForm: {
+        id: 0,
+        name: undefined,
+        code: '',
+        refValue: undefined,
+        maxValue: undefined,
+        minValue: undefined,
+        avgValue: '',
+        unit: '',
+        uploadSpc: '0',
+        remark: undefined
+      },
+      rules: {
+        name: [],
+        refValue: []
+      }
+    }
+  },
+  methods: {
+    init(id) {
+      this.dataForm.id = id || ''
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          ParamDetail(this.dataForm.id).then(res => {
+            this.dataForm = res.data
+          })
+        } else {
+          detecParamCode().then(res => {
+            this.dataForm.code = res.data
+          })
+        }
+      })
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          const data = this.dataForm
+          data.equipmentId = this.equipmentId
+          if (this.dataForm.id) {
+            detecParamUpdate(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          } else {
+            detecParamAdd(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.drawer-footer {
+  width: 100%;
+  margin-top: 50px;
+  border-top: 1px solid #e8e8e8;
+  padding: 10px 50px;
+  text-align: left;
+  background: #fff;
+}
+</style>
diff --git a/src/views/QualityManager/offlineDetec/components/detecRegistrationList-add.vue b/src/views/QualityManager/offlineDetec/components/detecRegistrationList-add.vue
new file mode 100644
index 0000000..80a99ab
--- /dev/null
+++ b/src/views/QualityManager/offlineDetec/components/detecRegistrationList-add.vue
@@ -0,0 +1,214 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-26 13:55:11
+ * @Description:
+-->
+<template>
+  <el-dialog
+    :title="!dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter"
+    :visible.sync="visible"
+  >
+    <el-row :gutter="15">
+      <el-form
+        ref="dataForm"
+        :model="dataForm"
+        :rules="rules"
+        size="medium"
+        label-width="200px"
+        label-position="left"
+      >
+        <el-col :span="10">
+          <el-form-item :label="$t('module.quality.offlineDetec.SubstrateId')" prop="substrateId">
+            <el-input v-model="dataForm.substrateId" :placeholder="$i18nForm(['placeholder.input', $t('module.quality.offlineDetec.SubstrateId')])" clearable :style="{width: '100%'}" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="10">
+          <el-form-item :label="$t('module.quality.offlineDetec.DetecTime')" prop="testTime">
+            <el-date-picker
+              v-model="dataForm.testTime"
+              type="datetime"
+              placeholder="选择日期时间"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="10">
+          <el-form-item :label="$t('module.quality.offlineDetec.DetecParam')" prop="testParamId">
+            <el-select
+              v-model="dataForm.testParamId"
+              :placeholder="$i18nForm(['placeholder.input', $t('module.quality.offlineDetec.DetecParam')])"
+              filterable
+              clearable
+              :style="{width: '100%'}"
+            >
+              <el-option
+                v-for="(item, index) in testParamArr"
+                :key="index"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="10">
+          <el-form-item :label="$t('module.quality.offlineDetec.DetecValue')" prop="testParamValue">
+            <el-input v-model="dataForm.testParamValue" :placeholder="$i18nForm(['placeholder.input', $t('module.quality.offlineDetec.DetecValue')])" clearable :style="{width: '100%'}" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="10">
+          <el-form-item :label="$t('module.quality.offlineDetec.DetecStaff')" prop="staffId">
+            <el-select
+              v-model="dataForm.staffId"
+              :placeholder="$i18nForm(['placeholder.input', $t('module.quality.offlineDetec.DetecStaff')])"
+              multiple
+              filterable
+              clearable
+              :style="{width: '100%'}"
+              @change="$forceUpdate()"
+            >
+              <el-option
+                v-for="(item) in staffArr"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="10">
+          <el-form-item :label="$t('module.basicData.visual.Remarks')" prop="remarks">
+            <el-input v-model="dataForm.remarks" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Remarks')])" clearable :style="{width: '100%'}" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="10">
+          <el-form-item label="" prop="">
+            <el-button type="primary" size="medium" @click="dataFormSubmit()"> {{ 'btn.save' | i18nFilter }} </el-button>
+          </el-form-item>
+        </el-col>
+      </el-form>
+    </el-row>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { detecRegistrationAdd, detecRegistrationUpdate, detecRegistrationDetail } from '@/api/quality-manage/detecRegistration'
+import { staffList } from '@/api/basicData/GroupModule/staff'
+import { detecRegistrationList } from '@/api/quality-manage/detecRegistration'
+
+export default {
+  props: {
+    equipmentId: {
+      type: String,
+      default: () => {
+      }
+    },
+    testParamArr: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      staffArr: [],
+      substrateArr: [],
+      dataForm: {
+        id: '',
+        substrateId: undefined,
+        testTime: '',
+        staffId: [],
+        testParamValue: '',
+        testParamId: '',
+        remarks: undefined
+      },
+      rules: {
+        substrateId: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('module.quality.offlineDetec.SubstrateId')]),
+          trigger: 'blur'
+        }],
+        testParamId: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('module.quality.offlineDetec.DetecParam')]),
+          trigger: 'blur'
+        }]
+      }
+    }
+  },
+  methods: {
+    init(id) {
+      const params = {
+        current: 1,
+        size: 999
+      }
+      staffList(params).then(response => {
+        this.staffArr = response.data.records
+      })
+      params.equipmentId = this.equipmentId
+      detecRegistrationList(params).then(response => {
+        if (response.data.records) {
+          this.substrateArr = response.data.records
+        } else {
+          this.substrateArr.splice(0, this.substrateArr.length)
+        }
+      })
+      this.dataForm.id = id || ''
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.substrateArr.length > 0) {
+          this.dataForm.substrateId = this.substrateArr[0].substrateId
+        }
+        if (this.dataForm.id) {
+          detecRegistrationDetail(this.dataForm.id).then(res => {
+            this.dataForm = res.data
+            const data = JSON.parse(JSON.stringify(res.data))
+            this.dataForm.staffId = data.testingStaffs.toString().split(',')
+          })
+        } else {
+          this.dataForm.testTime = new Date()
+        }
+      })
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          const data = this.dataForm
+          data.equipmentId = this.equipmentId
+          data.testingStaffs = data.staffId.toString()
+          if (this.dataForm.id) {
+            detecRegistrationUpdate(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          } else {
+            detecRegistrationAdd(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          }
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/QualityManager/offlineDetec/components/detecRegistrationList.vue b/src/views/QualityManager/offlineDetec/components/detecRegistrationList.vue
new file mode 100644
index 0000000..d68698c
--- /dev/null
+++ b/src/views/QualityManager/offlineDetec/components/detecRegistrationList.vue
@@ -0,0 +1,227 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-04-14 15:49:33
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-26 13:57:25
+ * @Description:
+-->
+<template>
+  <div>
+    <el-form
+      ref="dataForm"
+      :model="listQuery"
+      :inline="true"
+      size="medium"
+      label-width="200px"
+      label-position="left"
+    >
+      <el-form-item :label="$t('module.quality.offlineDetec.EquipmentName')+'：'">
+        <span style="margin: 0 5px;color:#1890FF">{{ equipmentData.name }}</span>
+      </el-form-item>
+      <el-form-item :label="$t('module.quality.offlineDetec.SubstrateId')" prop="substrateId">
+        <el-input v-model="listQuery.substrateId" :placeholder="['placeholder.input', $t('module.quality.offlineDetec.SubstrateId')] | i18nFilterForm" clearable :style="{width: '100%'}" />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.equipmentDetectInfo.TestParameterName')" prop="offlineParamId">
+        <el-select v-model="listQuery.offlineParamId" filterable :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipmentDetectInfo.TestParameterName')])" clearable>
+          <el-option
+            v-for="item in offlineParamArr"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="$t('module.quality.offlineDetec.DetecTime')" label-width="100px" prop="time">
+        <el-date-picker
+          v-model="listQuery.timeSlot"
+          type="daterange"
+          format="yyyy-MM-dd"
+          value-format="yyyy-MM-dd"
+          :start-placeholder="$t('module.orderManage.order.StartTime')"
+          :end-placeholder="$t('module.orderManage.order.StartTime')"
+          :range-separator="$t('module.orderManage.order.To')"
+          clearable
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="getList()">{{ 'btn.search' | i18nFilter }}</el-button>
+        <el-button v-if="equipmentData.equipmentId" type="primary" @click="addNew()">{{ 'btn.add' | i18nFilter }}</el-button>
+      </el-form-item>
+    </el-form>
+    <base-table
+      :table-config="tableProps"
+      :table-data="list"
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :is-loading="listLoading"
+    >
+      <method-btn
+        slot="handleBtn"
+        :width="trueWidth"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      @pagination="getList()"
+    />
+    <detecRegistrationList-add v-if="addOrUpdateVisible" ref="addOrUpdate" :test-param-arr="offlineParamArr" :equipment-id="equipmentData.equipmentId" @refreshDataList="getList" />
+  </div>
+</template>
+
+<script>
+import i18n from '@/lang'
+import { detecRegistrationList, detecRegistrationDelete } from '@/api/quality-manage/detecRegistration'
+import detecRegistrationListAdd from './detecRegistrationList-add'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import { timeFormatter } from '@/filters'
+
+const tableBtn = [
+  {
+    type: 'edit',
+    btnName: 'btn.edit'
+  },
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  }
+]
+const tableProps = [
+  {
+    prop: 'equipmentName',
+    label: i18n.t('module.quality.offlineDetec.EquipmentName'),
+    align: 'center'
+  },
+  {
+    prop: 'substrateId',
+    label: i18n.t('module.quality.offlineDetec.SubstrateId'),
+    align: 'center'
+  },
+  {
+    prop: 'testTime',
+    label: i18n.t('module.quality.offlineDetec.DetecTime'),
+    filter: timeFormatter,
+    align: 'center'
+  },
+  {
+    prop: 'testParamName',
+    label: i18n.t('module.quality.offlineDetec.DetecParam'),
+    align: 'center'
+  },
+  {
+    prop: 'testParamValue',
+    label: i18n.t('module.quality.offlineDetec.DetecValue'),
+    align: 'center'
+  },
+  {
+    prop: 'remarks',
+    label: i18n.t('module.basicData.visual.Remarks'),
+    align: 'center'
+  }
+]
+export default {
+  name: '',
+  components: { Pagination, BaseTable, MethodBtn, detecRegistrationListAdd },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  props: {
+    equipmentData: {
+      type: Object,
+      default: () => {
+      }
+    },
+    offlineParamArr: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      addOrUpdateVisible: false,
+      tableBtn,
+      trueWidth: 200,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: false,
+      listQuery: {
+        equipmentId: '',
+        substrateId: '',
+        current: 1,
+        size: 10
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    handleClick(raw) {
+      if (raw.type === 'delete') {
+        this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.equipmentName}]?`, this.$t('module.basicData.visual.Tips'), {
+          confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+          cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+          type: 'warning'
+        }).then(() => {
+          detecRegistrationDelete(raw.data.id).then(response => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+              }
+            })
+          })
+        }).catch(() => {})
+      } else {
+        this.addNew(raw.data.id)
+      }
+    },
+    getList() {
+      this.listQuery.equipmentId = this.equipmentData.equipmentId
+      this.listLoading = true
+      if (this.listQuery.substrateId === '') {
+        delete this.listQuery.substrateId
+      }
+      detecRegistrationList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+          console.log(this.list)
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    },
+    // 新增 / 修改
+    addNew(id) {
+      console.log(id)
+      if (this.equipmentData.equipmentId) {
+        this.addOrUpdateVisible = true
+        this.$nextTick(() => {
+          this.$refs.addOrUpdate.init(id)
+        })
+      } else {
+        this.$message.error(this.$t('module.quality.offlineDetec.getEquipmetId'))
+      }
+    }
+  }
+}
+</script>
+
diff --git a/src/views/QualityManager/offlineDetec/components/detecRegistrationTree.vue b/src/views/QualityManager/offlineDetec/components/detecRegistrationTree.vue
new file mode 100644
index 0000000..37a3dc1
--- /dev/null
+++ b/src/views/QualityManager/offlineDetec/components/detecRegistrationTree.vue
@@ -0,0 +1,81 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-04-06 19:33:11
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-05-25 17:39:32
+ * @Description:
+-->
+<template>
+  <el-tree accordion :load="loadNode" :lazy="true" :highlight-current="true" :data="dataList" :props="defaultProps" @node-click="handleNodeClick" />
+</template>
+
+<script>
+import { equipmentDetectAreaAttrList } from '@/api/basicData/Equipment/equipmentDetectAreaAttr'
+export default {
+  props: {
+    menuList: {
+      type: Array,
+      default: () => {
+        []
+      }
+    }
+  },
+  data() {
+    return {
+      defaultProps: {
+        children: 'children',
+        label: 'detectArea',
+        isLeaf: 'leaf'
+      },
+      dataList: [],
+      children: []
+    }
+  },
+  created() {
+    this.init()
+  },
+  methods: {
+    init() {
+      this.dataList.splice(0, this.dataList.length)
+      this.dataList = JSON.parse(JSON.stringify(this.menuList))
+    },
+    async loadNode(node, resolve) {
+      if (node.level === 0) {
+        resolve(this.dataList)
+      } else if (node.level === 1) {
+        const listQuery = {
+          current: 1,
+          size: 990,
+          detectDistributionAreaId: node.data.id
+        }
+        const response = await equipmentDetectAreaAttrList(listQuery)
+        if (response.data.records) {
+          this.children = response.data.records
+          console.log(this.children)
+        } else {
+          this.children.splice(0, this.children.length)
+        }
+        this.children.forEach(item => {
+          item.detectArea = item.name
+          item.leaf = true
+        })
+        resolve(this.children)
+      }
+    },
+    handleNodeClick(data) {
+      if (data.equipmentId) {
+        this.$emit('getequipmentId', data)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .el-tree >>> .el-tree-node__label {
+    font-size: 20px;
+  }
+  .el-tree >>> .el-tree-node__expand-icon {
+    font-size: 20px;
+  }
+</style>
diff --git a/src/views/QualityManager/offlineDetec/detecParam.vue b/src/views/QualityManager/offlineDetec/detecParam.vue
new file mode 100644
index 0000000..f031efe
--- /dev/null
+++ b/src/views/QualityManager/offlineDetec/detecParam.vue
@@ -0,0 +1,210 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-26 13:58:55
+ * @Description:
+-->
+<template>
+  <div class="app-container">
+    <el-form :inline="true" @keyup.enter.native="getDataList()">
+      <el-form-item :label="$t('module.basicData.equipmentDetectInfo.DetectionArea')">
+        <el-select v-model="listQuery.detecAreaId" :placeholder="$t('module.basicData.equipmentDetectInfo.DetectionArea')" clearable>
+          <el-option
+            v-for="item in detectAreaArr"
+            :key="item.id"
+            :label="item.detectArea"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.equipment.EquipmentName')">
+        <el-select v-model="listQuery.equipmentId" :placeholder="$t('module.basicData.equipment.EquipmentName')" clearable>
+          <el-option
+            v-for="item in equipmentArr"
+            :key="item.equipmentId"
+            :label="item.equipmentName"
+            :value="item.equipmentId"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="getList()">{{ 'btn.search' | i18nFilter }}</el-button>
+      </el-form-item>
+    </el-form>
+    <base-table
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    >
+      <method-btn
+        slot="handleBtn"
+        :width="trueWidth"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      @pagination="getList()"
+    />
+  </div>
+</template>
+
+<script>import i18n from '@/lang'
+import { detecParamList } from '@/api/quality-manage/detecParam'
+import { equipmentDetectAreaList } from '@/api/basicData/Equipment/equipmentDetectArea'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+
+const tableBtn = [
+  {
+    type: 'edit',
+    btnName: 'btn.edit'
+  },
+  {
+    type: 'detail',
+    btnName: 'btn.detail'
+  }
+]
+const tableProps = [
+  {
+    prop: 'equipmentName',
+    label: i18n.t('module.quality.offlineDetec.EquipmentName'),
+    align: 'center',
+    width: '200px'
+  },
+  {
+    prop: 'equipmentCode',
+    label: i18n.t('module.quality.offlineDetec.EquipmentCode'),
+    align: 'center'
+  },
+  {
+    prop: 'equipmentArea',
+    label: i18n.t('module.quality.offlineDetec.DetectionArea'),
+    align: 'center'
+  },
+  {
+    prop: 'equipmentDesc',
+    label: i18n.t('module.quality.offlineDetec.EquipmentFunction'),
+    align: 'center'
+  }
+]
+
+export default {
+  name: 'Material',
+  components: { Pagination, BaseTable, MethodBtn },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      tableBtn,
+      trueWidth: 240,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        current: 1,
+        size: 10,
+        equipmentId: '',
+        detecAreaId: ''
+      },
+      equipmentArr: [],
+      detectAreaArr: []
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    handleClick(raw) {
+      if (raw.type === 'edit') {
+        this.addNew(raw.data)
+      } else {
+        this.addNew(raw.data, true)
+      }
+    },
+    getList() {
+      const params = {
+        current: 1,
+        size: 550
+      }
+      equipmentDetectAreaList(params).then(response => {
+        if (response.data.records) {
+          this.detectAreaArr = response.data.records
+        } else {
+          this.detectAreaArr.splice(0, this.equipmentArr.length)
+        }
+      })
+      detecParamList(params).then(response => {
+        if (response.data.records) {
+          this.equipmentArr = response.data.records
+        } else {
+          this.equipmentArr.splice(0, this.equipmentArr.length)
+        }
+      })
+      this.listLoading = true
+      detecParamList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    },
+    // 新增 / 修改
+    addNew(data, isdetail) {
+      this.$router.push({
+        name: 'detecParamAdd',
+        query: {
+          data: data,
+          isdetail: isdetail
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/QualityManager/offlineDetec/detecRegistration.vue b/src/views/QualityManager/offlineDetec/detecRegistration.vue
new file mode 100644
index 0000000..3934953
--- /dev/null
+++ b/src/views/QualityManager/offlineDetec/detecRegistration.vue
@@ -0,0 +1,108 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-04-06 19:33:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-06-29 16:47:13
+ * @Description:
+-->
+<template>
+  <el-container style="margin:30px">
+    <el-aside style="width:250px">
+      <el-tree :data="menuList" :props="defaultProps" @node-click="getOrganization" />
+    </el-aside>
+    <el-main style="border:2px solid #E4E4E4;border-radius:10px;margin-left:10px">
+      <detecRegistration-list :equipment-data="equipmentData" :offline-param-arr="offlineParamArr" />
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import detecRegistrationList from './components/detecRegistrationList'
+import { equipmentDetectTreeList } from '@/api/basicData/Equipment/equipmentDetectArea'
+import { equipmentDetectParamList } from '@/api/basicData/Equipment/equipmentDetectParam'
+// import { getDetecRegistrationList } from '@/api/quality-manage/detecRegistration'
+export default {
+  components: { detecRegistrationList },
+  data() {
+    return {
+      menuList: [],
+      addOrUpdateVisible: false,
+      equipmentData: {
+        equipmentId: '',
+        name: ''
+      },
+      offlineParamArr: [],
+      defaultProps: {
+        children: 'children',
+        label: 'name'
+      }
+    }
+  },
+  created() {
+    this.init()
+    this.getOrganization({ detectEquipmentAreaId: '' })
+  },
+  methods: {
+    async init() {
+      const TreeListQuery = {
+        current: 1,
+        size: 500
+      }
+      this.menuList.splice(0, this.menuList.length)
+      this.menuList = [
+        {
+          'name': '全部',
+          'children': []
+        }
+      ]
+      const res = await equipmentDetectTreeList(TreeListQuery)
+      if (res.code === 0) {
+        this.menuList[0].children = res.data
+        if (this.menuList[0].children) {
+          this.menuList[0].children.forEach(item => {
+            item.name = item.detectArea
+            if (item.detectSystemVoList) {
+              item.children = item.detectSystemVoList
+              item.detectSystemVoList.forEach(item1 => {
+                if (item1.equipmentVoList) { item1.children = item1.equipmentVoList }
+              })
+            }
+          })
+        }
+      }
+    },
+    getOrganization(data) {
+      if (data.detectEquipmentAreaId) {
+        this.equipmentData.equipmentId = data.id
+        this.equipmentData.name = data.name
+      } else {
+        this.equipmentData.equipmentId = ''
+        this.equipmentData.name = ''
+      }
+      const paramy = {
+        detectEquipmentAreaId: data.detectEquipmentAreaId,
+        name: '',
+        current: 1,
+        size: 999
+      }
+      equipmentDetectParamList(paramy).then(response => {
+        if (response.data.records) {
+          this.offlineParamArr = response.data.records
+        } else {
+          this.offlineParamArr.splice(0, this.offlineParamArr.length)
+        }
+      })
+    }
+  }
+}
+</script>
+<style scoped>
+.el-container >>> .el-aside{
+  border:2px solid #E4E4E4;
+  border-radius:10px;
+  background-color: white;
+  min-height:550px;
+  width:25%;
+  padding-top:20px
+}
+</style>
diff --git a/src/views/QualityManager/plan/AddForm.vue b/src/views/QualityManager/plan/AddForm.vue
new file mode 100644
index 0000000..6ba5dca
--- /dev/null
+++ b/src/views/QualityManager/plan/AddForm.vue
@@ -0,0 +1,190 @@
+<!--
+ * @Date: 2021-02-01 16:12:13
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-26 13:42:34
+ * @FilePath: \basic-admin\src\views\QualityManager\plan\AddForm.vue
+ * @Description: 添加检测计划
+-->
+<template>
+  <div>
+    <el-dialog v-bind="$attrs" :title="$t('module.quality.plan.addDialogTitle')" v-on="$listeners" @open="onOpen" @close="onClose">
+      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="180px">
+        <el-form-item :label="$t('module.quality.plan.testPlaneName')" prop="testPlaneName">
+          <el-input v-model="formData.testPlaneName" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('module.quality.plan.testPlaneCode')" prop="testPlaneCode">
+          <el-input v-model="formData.testPlaneCode" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <!-- <el-form-item :label="$t('module.quality.plan.areaCode')" prop="areaCode">
+          <el-select
+            v-model="formData.areaCode"
+            clearable
+            :style="{width: '100%'}"
+          >
+            <el-option
+              v-for="(item, index) in dict.deviceType"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item> -->
+        <el-form-item :label="$t('module.quality.plan.areaName')" prop="areaNameId">
+          <el-select
+            v-model="formData.areaNameId"
+            clearable
+            :style="{width: '100%'}"
+          >
+            <el-option
+              v-for="(item, index) in areaList"
+              :key="index"
+              :label="item.detectArea"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('module.quality.plan.distributionAreaName')" prop="areaNameId" label-width="185px">
+          <el-select
+            v-model="formData.areaNameId"
+            disabled
+            clearable
+            :style="{width: '100%'}"
+          >
+            <el-option
+              v-for="(item, index) in areaList"
+              :key="index"
+              :label="item.distributionArea"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <!-- <el-form-item :label="$t('module.quality.plan.detectionRateDicId')" prop="detectionRateDicId">
+          <el-select
+            v-model="formData.detectionRateDicId"
+            clearable
+            :style="{width: '100%'}"
+          >
+            <el-option
+              v-for="(item, index) in dict.detectionPeriodList"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item> -->
+        <!-- <el-form-item :label="$t('module.quality.plan.testPlaneContent')" prop="testPlaneContent">
+          <el-input v-model="formData.testPlaneContent" clearable :style="{width: '100%'}" />
+        </el-form-item> -->
+        <el-form-item :label="$t('module.quality.plan.remark')" prop="remark">
+          <el-input v-model="formData.remark" clearable :style="{width: '100%'}" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="close">{{ 'btn.cancel' | i18nFilter }}</el-button>
+        <el-button type="primary" @click="handelConfirm">{{ 'btn.confirm' | i18nFilter }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { getDictDeviceType, detectionPeriod } from '@/api/dict'
+import { addPlanInfo } from '@/api/quality-manage/plan'
+import i18n from '@/lang'
+export default {
+  components: {},
+  inheritAttrs: false,
+  props: {
+    areaList: {
+      type: Array,
+      default: () => ([])
+    }
+  },
+  data() {
+    return {
+      formData: {
+        testPlaneName: undefined,
+        testPlaneCode: undefined,
+        areaCode: undefined,
+        areaNameId: undefined,
+        // detectionRateDicId: undefined,
+        // testPlaneContent: undefined,
+        remark: undefined
+      },
+      rules: {
+        testPlaneName: [{
+          required: true,
+          message: i18n.t('module.quality.plan.notEmpty'),
+          trigger: 'change'
+        }],
+        // testPlaneContent: [{
+        //   required: true,
+        //   message: i18n.t('module.quality.plan.notEmpty'),
+        //   trigger: 'blur'
+        // }],
+        areaNameId: [{
+          required: true,
+          message: i18n.t('module.quality.plan.notEmpty'),
+          trigger: 'blur'
+        }]
+        // detectionRateDicId: [{
+        //   required: true,
+        //   message: i18n.t('module.quality.plan.notEmpty'),
+        //   trigger: 'blur'
+        // }]
+      },
+      dict: {
+        deviceType: [],
+        detectionPeriodList: [],
+        areaNameList: [{
+          id: 'PID00A',
+          name: 'PID00A'
+        }, {
+          id: 'PID00C',
+          name: 'PID00C'
+        }, {
+          id: 'PID22-24',
+          name: 'PID22-24'
+        }]
+      }
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {
+    this.getDict()
+  },
+  methods: {
+    onOpen() {},
+    onClose() {
+      this.$refs['elForm'].resetFields()
+    },
+    close() {
+      this.$emit('update:visible', false)
+    },
+    handelConfirm() {
+      this.$refs['elForm'].validate(async valid => {
+        if (!valid) return
+        const result = await addPlanInfo(this.formData)
+        if (result.code === 0) {
+          this.$message({
+            type: 'success',
+            message: '添加成功！'
+          })
+          this.$emit('done')
+          this.close()
+        }
+      })
+    },
+    async getDict() {
+      const result = await getDictDeviceType()
+      this.dict.deviceType = result
+      const result2 = await detectionPeriod()
+      this.dict.detectionPeriodList = result2
+    }
+  }
+}
+
+</script>
+<style>
+</style>
diff --git a/src/views/QualityManager/plan/EditForm.vue b/src/views/QualityManager/plan/EditForm.vue
new file mode 100644
index 0000000..0da9ce0
--- /dev/null
+++ b/src/views/QualityManager/plan/EditForm.vue
@@ -0,0 +1,204 @@
+<!--
+ * @Date: 2021-02-01 16:12:13
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-26 13:43:04
+ * @FilePath: \basic-admin\src\views\QualityManager\plan\EditForm.vue
+ * @Description: 编辑设备类型配方
+-->
+<template>
+  <div>
+    <el-dialog v-bind="$attrs" :title="$t('module.quality.plan.addDialogTitle')" v-on="$listeners" @open="onOpen" @close="onClose">
+      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="180px">
+        <el-form-item :label="$t('module.quality.plan.testPlaneName')" prop="testPlaneName">
+          <el-input v-model="formData.testPlaneName" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('module.quality.plan.testPlaneCode')" prop="testPlaneCode">
+          <el-input v-model="formData.testPlaneCode" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <!-- <el-form-item :label="$t('module.quality.plan.areaCode')" prop="areaCode">
+          <el-select
+            v-model="formData.areaCode"
+            clearable
+            :style="{width: '100%'}"
+          >
+            <el-option
+              v-for="(item, index) in dict.deviceType"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item> -->
+        <el-form-item :label="$t('module.quality.plan.areaName')" prop="areaNameId">
+          <el-select
+            v-model="formData.areaNameId"
+            clearable
+            :style="{width: '100%'}"
+          >
+            <el-option
+              v-for="(item, index) in areaList"
+              :key="index"
+              :label="item.detectArea"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('module.quality.plan.distributionAreaName')" prop="areaNameId" label-width="188px">
+          <el-select
+            v-model="formData.areaNameId"
+            disabled
+            clearable
+            :style="{width: '100%'}"
+          >
+            <el-option
+              v-for="(item, index) in areaList"
+              :key="index"
+              :label="item.distributionArea"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <!-- <el-form-item :label="$t('module.quality.plan.detectionRateDicId')" prop="detectionRateDicId">
+          <el-select
+            v-model="formData.detectionRateDicId"
+            clearable
+            :style="{width: '100%'}"
+          >
+            <el-option
+              v-for="(item, index) in dict.detectionPeriodList"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item> -->
+        <!-- <el-form-item :label="$t('module.quality.plan.testPlaneContent')" prop="testPlaneContent">
+          <el-input v-model="formData.testPlaneContent" clearable :style="{width: '100%'}" />
+        </el-form-item> -->
+        <el-form-item :label="$t('module.quality.plan.remark')" prop="remark">
+          <el-input v-model="formData.remark" clearable :style="{width: '100%'}" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="close">{{ 'btn.cancel' | i18nFilter }}</el-button>
+        <el-button type="primary" @click="handelConfirm">{{ 'btn.confirm' | i18nFilter }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { getDictDeviceType, detectionPeriod } from '@/api/dict'
+import { editPlanInfo, getPlanInfo } from '@/api/quality-manage/plan'
+import i18n from '@/lang'
+export default {
+  components: {},
+  inheritAttrs: false,
+  props: {
+    targetInfo: {
+      type: Object,
+      default: () => ({})
+    },
+    areaList: {
+      type: Array,
+      default: () => ([])
+    }
+  },
+  data() {
+    return {
+      formData: {
+        testPlaneName: undefined,
+        testPlaneCode: undefined,
+        areaCode: undefined,
+        areaNameId: undefined,
+        // detectionRateDicId: undefined,
+        // testPlaneContent: undefined,
+        remark: undefined
+      },
+      rules: {
+        testPlaneName: [{
+          required: true,
+          message: i18n.t('module.quality.plan.notEmpty'),
+          trigger: 'change'
+        }],
+        // testPlaneContent: [{
+        //   required: true,
+        //   message: i18n.t('module.quality.plan.notEmpty'),
+        //   trigger: 'blur'
+        // }],
+        areaNameId: [{
+          required: true,
+          message: i18n.t('module.quality.plan.notEmpty'),
+          trigger: 'blur'
+        }]
+        // detectionRateDicId: [{
+        //   required: true,
+        //   message: i18n.t('module.quality.plan.notEmpty'),
+        //   trigger: 'blur'
+        // }]
+      },
+      dict: {
+        deviceType: [],
+        detectionPeriodList: [],
+        areaNameList: [{
+          id: 'PID00A',
+          name: 'PID00A'
+        }, {
+          id: 'PID00C',
+          name: 'PID00C'
+        }, {
+          id: 'PID22-24',
+          name: 'PID22-24'
+        }]
+      }
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {
+    this.getDict()
+  },
+  methods: {
+    onOpen() {
+      this.getInfo()
+    },
+    onClose() {
+      this.$refs['elForm'].resetFields()
+    },
+    close() {
+      this.$emit('update:visible', false)
+    },
+    handelConfirm() {
+      this.$refs['elForm'].validate(async valid => {
+        if (!valid) return
+        const result = await editPlanInfo(this.formData)
+        if (result.code === 0) {
+          this.$message({
+            type: 'success',
+            message: '修改成功！'
+          })
+          this.$emit('done')
+          this.close()
+        }
+      })
+    },
+    async getInfo() {
+      const result = await getPlanInfo({
+        id: this.targetInfo?.id
+      })
+      if (result.code === 0) {
+        this.formData = result.data
+      }
+    },
+    async getDict() {
+      const result = await getDictDeviceType()
+      this.dict.deviceType = result
+      const result2 = await detectionPeriod()
+      this.dict.detectionPeriodList = result2
+    }
+  }
+}
+
+</script>
+<style>
+</style>
diff --git a/src/views/QualityManager/plan/index.vue b/src/views/QualityManager/plan/index.vue
new file mode 100644
index 0000000..8940fff
--- /dev/null
+++ b/src/views/QualityManager/plan/index.vue
@@ -0,0 +1,243 @@
+<!--
+ * @Date: 2020-12-15 15:36:52
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-26 13:40:43
+ * @FilePath: \basic-admin\src\views\QualityManager\plan\index.vue
+ * @Description:
+-->
+<template>
+  <div class="usermanager-container">
+    <div class="method-btn-area">
+      {{ $t('module.quality.plan.areaName') + ':' }}
+      <el-select v-model="listQuery.areaId" clearable>
+        <el-option v-for="item in areaList" :key="item.id" :value="item.id" :label="item.detectArea" />
+      </el-select>
+      {{ $t('module.quality.plan.testPlaneName') + ':' }}
+      <el-input v-model="listQuery.inspectionPlanName" clearable :placeholder="$t('module.quality.plan.searchPlaceholder')" style="width: 200px;" />
+      <!-- <el-select v-model="listQuery.equipmentType" :placeholder="$t('module.equipmentManager.recipe.devicetypeselect')" clearable style="width: 200px;">
+        <el-option
+          v-for="(item, index) in dictData.deviceType"
+          :key="'device-' + index"
+          :label="item.name"
+          :value="item.id"
+        />
+      </el-select> -->
+      <el-button @click="getList">{{ 'btn.search' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="showDialog = true">{{ 'btn.add' | i18nFilter }}</el-button>
+    </div>
+    <base-table :table-config="tableProps" :table-data="list" :is-loading="listLoading" :page="listQuery.current" :limit="listQuery.size">
+      <method-btn slot="handleBtn" :method-list="tableBtn" @clickBtn="handleClick" />
+    </base-table>
+    <pagination :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.size" @pagination="getList" />
+    <add-form :visible.sync="showDialog" :area-list="areaList" @done="getList" />
+    <edit-form :visible.sync="showEditDialog" :area-list="areaList" :target-info="{id: curEditId}" @done="getList" />
+    <send-form :visible.sync="showSendDialog" :target-info="{id: curEditId, distributionAreaName}" @done="getList" />
+  </div>
+</template>
+
+<script>
+import dataDict from '@/filters/DataDict'
+import { timeFormatter } from '@/filters'
+// edit here
+const tableBtn = [{
+  type: 'func',
+  btnName: 'btn.sendPlan'
+}, {
+  type: 'edit',
+  btnName: 'btn.edit'
+}, {
+  type: 'delete',
+  btnName: 'btn.delete'
+}, {
+  type: 'detail',
+  btnName: 'btn.detail'
+}]
+const tableProps = [{
+  prop: 'testPlaneCode',
+  label: i18n.t('module.quality.plan.testPlaneCode'),
+  align: 'center'
+}, {
+  prop: 'testPlaneName',
+  label: i18n.t('module.quality.plan.testPlaneName'),
+  align: 'center'
+}, {
+  prop: 'detecAreaName',
+  label: i18n.t('module.quality.plan.areaName'),
+  align: 'center'
+}, {
+  prop: 'distributionAreaName',
+  label: i18n.t('module.quality.plan.distributionAreaName'),
+  align: 'center',
+  width: '200px'
+}, {
+  prop: 'isIssued',
+  label: i18n.t('module.quality.plan.isIssued'),
+  align: 'center',
+  filter: dataDict('yesOrNo')
+}, {
+  prop: 'issuedTime',
+  label: i18n.t('module.quality.plan.issuedTime'),
+  align: 'center',
+  filter: timeFormatter
+}, {
+  prop: 'remark',
+  label: i18n.t('module.quality.plan.remark'),
+  align: 'center'
+}]
+//  {
+//   prop: 'testPlaneContent',
+//   label: i18n.t('module.quality.plan.testPlaneContent'),
+//   align: 'center'
+// },
+//  {
+//   // dictionaryDetectionRate
+//   prop: 'detectionRateDicId',
+//   label: i18n.t('module.quality.plan.detectionRateDicId'),
+//   align: 'center',
+//   subcomponent: DictFilter,
+//   filter: detectionPeriod
+// },
+import AddForm from './AddForm'
+import EditForm from './EditForm'
+import sendForm from './sendForm'
+import BaseTable from '@/components/BaseTable'
+import { objFilter } from '@/utils'
+import { getDictDeviceType } from '@/api/dict'
+// , detectionPeriod
+// import DictFilter from '@/components/BaseTable/subcomponents/DataDictFilter'
+import { getPlanList, delPlanInfo, getArea } from '@/api/quality-manage/plan'
+import Pagination from '@/components/Pagination'
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import i18n from '@/lang'
+export default {
+  name: 'QualityPlanManager',
+  components: { Pagination, BaseTable, MethodBtn, AddForm, EditForm, sendForm },
+  props: {},
+  data() {
+    return {
+      tableBtn,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      showDialog: false,
+      showSendDialog: false,
+      curEditId: null,
+      showEditDialog: false,
+      areaList: [],
+      listQuery: {
+        current: 1,
+        size: 10,
+        equipmentType: null,
+        inspectionPlanName: '',
+        areaId: null
+      },
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      },
+      dictData: {
+        deviceType: []
+      },
+      distributionAreaName: null
+    }
+  },
+  created() {
+    // this.getDict()
+    this.getAreaList()
+    this.getList()
+    // this.listLoading = false
+  },
+  mounted() {},
+  methods: {
+    handleNodeClick() {},
+    handleClick(raw) {
+      console.log(raw)
+      switch (raw.type) {
+        case 'delete':
+          this.$confirm(i18n.t('deleteMsgBox.content'), i18n.t('deleteMsgBox.hint'), {
+            confirmButtonText: i18n.t('btn.confirm'),
+            cancelButtonText: i18n.t('btn.cancel'),
+            type: 'warning'
+          }).then(async() => {
+            // 走接口
+            const result = await delPlanInfo({
+              id: raw.data.id
+            })
+            if (result.code === 0) {
+              this.$message({
+                type: 'success',
+                message: i18n.t('deleteMsgBox.doneMsg')
+              })
+              this.getList()
+            }
+          })
+          break
+        case 'edit':
+          this.showEditDialog = true
+          this.curEditId = raw.data.id
+          break
+        case 'detail':
+          this.$router.push({
+            name: 'PlanParamManage',
+            query: {
+              id: raw.data.id,
+              areaNameId: raw.data.areaNameId
+            }
+          })
+          break
+        case 'func':
+          this.distributionAreaName = raw.data.distributionAreaName
+          this.showSendDialog = true
+          this.curEditId = raw.data.id
+          break
+      }
+    },
+    async getList() {
+      this.listLoading = true
+      // edit here
+      const res = await getPlanList(objFilter(this.listQuery))
+      if (res.code === 0) {
+        this.list = res.data.records
+        this.total = res.data.total
+        this.listLoading = false
+      }
+    },
+    async getDict() {
+      const result = await getDictDeviceType()
+      this.dict.deviceType = result
+    },
+    async getAreaList() {
+      const result = await getArea({
+        current: 1,
+        size: 999
+      })
+      this.areaList = result.data.records
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.usermanager-container {
+  padding: 20px;
+  .method-btn-area {
+    padding: 15px 30px;
+    margin: 10px 0 20px 0;
+    border: 1px solid #dfe6ec;
+  }
+  .tree-select-container {
+    border: 1px solid #dfe6ec;
+    min-height: 400px;
+    padding: 20px;
+  }
+}
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/QualityManager/plan/issuedplan.vue b/src/views/QualityManager/plan/issuedplan.vue
new file mode 100644
index 0000000..f4dba04
--- /dev/null
+++ b/src/views/QualityManager/plan/issuedplan.vue
@@ -0,0 +1,147 @@
+<!--
+ * @Date: 2020-12-15 15:36:52
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-03-25 20:39:57
+ * @FilePath: \basic-admin\src\views\QualityManager\plan\issuedplan.vue
+ * @Description:
+-->
+<template>
+  <div class="usermanager-container">
+    <div class="method-btn-area">
+      <el-input v-model="listQuery.inspectionPlanName" clearable :placeholder="$t('module.quality.plan.searchPlaceholder')" style="width: 200px;" />
+      <el-input v-model="listQuery.area" clearable :placeholder="$t('module.quality.plan.searchPlaceholderArea')" style="width: 200px;" />
+      <el-date-picker
+        v-model="listQuery.startTime"
+        type="datetime"
+        :placeholder="$t('module.quality.plan.placeholderStartTime')"
+        clearable
+      />
+      <el-date-picker
+        v-model="listQuery.endTime"
+        type="datetime"
+        :placeholder="$t('module.quality.plan.placeholderEndTime')"
+        clearable
+      />
+      <el-button @click="getList">{{ 'btn.search' | i18nFilter }}</el-button>
+      <!-- <el-button type="primary" @click="showDialog = true">{{ 'btn.add' | i18nFilter }}</el-button> -->
+    </div>
+    <base-table :table-config="tableProps" :table-data="list" :is-loading="listLoading" :page="listQuery.current" :limit="listQuery.size">
+      <!-- <method-btn slot="handleBtn" :method-list="tableBtn" @clickBtn="handleClick" /> -->
+    </base-table>
+    <pagination :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.size" @pagination="getList" />
+  </div>
+</template>
+
+<script>
+import dataDict from '@/filters/DataDict'
+import { timeFormatter } from '@/filters'
+// edit here
+const tableProps = [{
+  prop: 'testPlaneName',
+  label: i18n.t('module.quality.plan.testPlaneName'),
+  align: 'center'
+}, {
+  prop: 'areaName',
+  label: i18n.t('module.quality.plan.areaName'),
+  align: 'center'
+}, {
+  prop: 'isSucceed',
+  label: i18n.t('module.quality.plan.isIssued'),
+  align: 'center',
+  filter: dataDict('yesOrNo')
+}, {
+  prop: 'issueTime',
+  label: i18n.t('module.quality.plan.issuedTime'),
+  align: 'center',
+  filter: timeFormatter
+}, {
+  prop: 'remark',
+  label: i18n.t('module.quality.plan.remark'),
+  align: 'center'
+}]
+
+import BaseTable from '@/components/BaseTable'
+import { objFilter } from '@/utils'
+import { getDictDeviceType } from '@/api/dict'
+// edit here
+import { sentPlanList } from '@/api/quality-manage/plan'
+import Pagination from '@/components/Pagination'
+import i18n from '@/lang'
+export default {
+  name: 'QualityPlanManager',
+  components: { Pagination, BaseTable },
+  props: {},
+  data() {
+    return {
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      showDialog: false,
+      curEditId: null,
+      showEditDialog: false,
+      listQuery: {
+        current: 1,
+        size: 10,
+        area: null,
+        inspectionPlanName: '',
+        endTime: null,
+        startTime: null
+      },
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      },
+      dictData: {
+        deviceType: []
+      }
+    }
+  },
+  created() {
+    // this.getDict()
+    this.getList()
+    // this.listLoading = false
+  },
+  mounted() {},
+  methods: {
+    async getList() {
+      this.listLoading = true
+      // edit here
+      const res = await sentPlanList(objFilter(this.listQuery))
+      if (res.code === 0) {
+        this.list = res.data.records
+        this.total = res.data.total
+        this.listLoading = false
+      }
+    },
+    async getDict() {
+      const result = await getDictDeviceType()
+      this.dict.deviceType = result
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.usermanager-container {
+  padding: 20px;
+  .method-btn-area {
+    padding: 15px 30px;
+    margin: 10px 0 20px 0;
+    border: 1px solid #dfe6ec;
+  }
+  .tree-select-container {
+    border: 1px solid #dfe6ec;
+    min-height: 400px;
+    padding: 20px;
+  }
+}
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/QualityManager/plan/sendForm.vue b/src/views/QualityManager/plan/sendForm.vue
new file mode 100644
index 0000000..9c96ead
--- /dev/null
+++ b/src/views/QualityManager/plan/sendForm.vue
@@ -0,0 +1,117 @@
+<!--
+ * @Date: 2021-02-01 16:12:13
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-26 13:44:09
+ * @FilePath: \basic-admin\src\views\QualityManager\plan\sendForm.vue
+ * @Description: 添加检测计划
+-->
+<template>
+  <div>
+    <el-dialog v-bind="$attrs" :title="$t('module.quality.plan.sendDialogTitle')" v-on="$listeners" @open="onOpen" @close="onClose">
+      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="150px">
+        <el-form-item :label="$t('module.quality.plan.operatorId')" prop="operatorId">
+          <el-select
+            v-model="formData.operatorId"
+            clearable
+            :style="{width: '100%'}"
+          >
+            <el-option
+              v-for="(item, index) in dict.worker"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('module.quality.plan.distributionAreaName')" prop="distributionAreaName" label-width="175px">
+          {{ targetInfo.distributionAreaName }}
+        </el-form-item>
+        <el-form-item :label="$t('module.quality.plan.remark')" prop="remark">
+          <el-input v-model="formData.remark" clearable :style="{width: '100%'}" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="close">{{ 'btn.cancel' | i18nFilter }}</el-button>
+        <el-button type="primary" @click="handelConfirm">{{ 'btn.confirm' | i18nFilter }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { getDictWorker } from '@/api/dict'
+import { editPlanInfo, sendPlan } from '@/api/quality-manage/plan'
+import i18n from '@/lang'
+export default {
+  components: {},
+  inheritAttrs: false,
+  props: {
+    targetInfo: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      formData: {
+        operatorId: undefined,
+        qualityInspectionPlanId: undefined,
+        remark: undefined
+      },
+      rules: {
+        operatorId: [{
+          required: true,
+          message: i18n.t('module.quality.plan.notEmpty'),
+          trigger: 'change'
+        }]
+      },
+      dict: {
+        deviceType: []
+      }
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {
+    this.getDict()
+  },
+  methods: {
+    onOpen() {
+      this.formData.qualityInspectionPlanId = this.targetInfo?.id
+    },
+    onClose() {
+      this.$refs['elForm'].resetFields()
+    },
+    close() {
+      this.$emit('update:visible', false)
+    },
+    handelConfirm() {
+      this.$refs['elForm'].validate(async valid => {
+        if (!valid) return
+        const result = await editPlanInfo({
+          id: this.formData.qualityInspectionPlanId,
+          issuedTime: new Date()
+        })
+        if (result.code === 0) {
+          const res = await sendPlan(this.formData)
+          if (res.code === 0) {
+            this.$message({
+              type: 'success',
+              message: '添加成功！'
+            })
+            this.$emit('done')
+            this.close()
+          }
+        }
+      })
+    },
+    async getDict() {
+      const result = await getDictWorker()
+      this.dict.worker = result
+    }
+  }
+}
+
+</script>
+<style>
+</style>
diff --git a/src/views/QualityManager/plan/subpage/AddForm.vue b/src/views/QualityManager/plan/subpage/AddForm.vue
new file mode 100644
index 0000000..bd417c5
--- /dev/null
+++ b/src/views/QualityManager/plan/subpage/AddForm.vue
@@ -0,0 +1,106 @@
+<!--
+ * @Date: 2021-01-09 16:25:11
+ * @LastEditors: guo
+ * @LastEditTime: 2021-03-13 17:12:07
+ * @FilePath: \basic-admin\src\views\QualityManager\plan\subpage\AddForm.vue
+ * @Description: 设备配方添加参数
+-->
+<template>
+  <div>
+    <el-dialog v-bind="$attrs" :title="$t('module.quality.planDetail.addDialogTitle')" v-on="$listeners" @open="onOpen" @close="onClose">
+      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="150px">
+        <el-form-item :label="$t('module.quality.planDetail.name')" prop="name">
+          <el-input v-model="formData.name" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('module.quality.planDetail.references')" prop="references">
+          <el-input v-model="formData.references" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('module.quality.planDetail.remark')" prop="remark">
+          <el-input v-model="formData.remark" clearable :style="{width: '100%'}" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="close">{{ 'btn.cancel' | i18nFilter }}</el-button>
+        <el-button type="primary" @click="handelConfirm">{{ 'btn.confirm' | i18nFilter }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { addPlanParamInfo } from '@/api/quality-manage/plan'
+import i18n from '@/lang'
+export default {
+  components: {},
+  inheritAttrs: false,
+  props: {
+    targetInfo: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      formData: {
+        name: undefined,
+        inspectionPlanId: null,
+        references: undefined,
+        remark: undefined
+      },
+      rules: {
+        name: [{
+          required: true,
+          message: i18n.t('module.quality.planDetail.notEmpty'),
+          trigger: 'change'
+        }],
+        references: [{
+          required: true,
+          message: i18n.t('module.quality.planDetail.notEmpty'),
+          trigger: 'blur'
+        }],
+        remark: []
+      },
+      dict: {
+        param: []
+      }
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {
+    onOpen() {
+      this.formData.inspectionPlanId = this.targetInfo?.id
+    },
+    onClose() {
+      this.$refs['elForm'].resetFields()
+    },
+    close() {
+      this.$emit('update:visible', false)
+    },
+    handelConfirm() {
+      this.$refs['elForm'].validate(async valid => {
+        if (!valid) return
+        const result = await addPlanParamInfo(this.formData)
+        if (result.code === 0) {
+          this.$message({
+            type: 'success',
+            message: '添加成功！'
+          })
+          this.$emit('done')
+          this.close()
+        }
+      })
+    },
+    async getDict() {
+      // const result = await getDictMaterial()
+      // if (result.code === 0) {
+      //   this.dict.material = result.data
+      // }
+    }
+  }
+}
+
+</script>
+<style>
+</style>
diff --git a/src/views/QualityManager/plan/subpage/EditForm.vue b/src/views/QualityManager/plan/subpage/EditForm.vue
new file mode 100644
index 0000000..a2b6ea5
--- /dev/null
+++ b/src/views/QualityManager/plan/subpage/EditForm.vue
@@ -0,0 +1,109 @@
+<!--
+ * @Date: 2021-01-09 16:25:11
+ * @LastEditors: guo
+ * @LastEditTime: 2021-03-13 17:15:16
+ * @FilePath: \basic-admin\src\views\QualityManager\plan\subpage\EditForm.vue
+ * @Description: 设备配方添加参数
+-->
+<template>
+  <div>
+    <el-dialog v-bind="$attrs" :title="$t('module.quality.planDetail.addDialogTitle')" v-on="$listeners" @open="onOpen" @close="onClose">
+      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="150px">
+        <el-form-item :label="$t('module.quality.planDetail.name')" prop="name">
+          <el-input v-model="formData.name" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('module.quality.planDetail.references')" prop="references">
+          <el-input v-model="formData.references" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('module.quality.planDetail.remark')" prop="remark">
+          <el-input v-model="formData.remark" clearable :style="{width: '100%'}" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="close">{{ 'btn.cancel' | i18nFilter }}</el-button>
+        <el-button type="primary" @click="handelConfirm">{{ 'btn.confirm' | i18nFilter }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { editPlanParamInfo, getPlanParamInfo } from '@/api/quality-manage/plan'
+import i18n from '@/lang'
+export default {
+  components: {},
+  inheritAttrs: false,
+  props: {
+    targetInfo: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      formData: {
+        name: undefined,
+        inspectionPlanId: null,
+        references: undefined,
+        remark: undefined
+      },
+      rules: {
+        name: [{
+          required: true,
+          message: i18n.t('module.quality.planDetail.notEmpty'),
+          trigger: 'change'
+        }],
+        references: [{
+          required: true,
+          message: i18n.t('module.quality.planDetail.notEmpty'),
+          trigger: 'blur'
+        }],
+        remark: []
+      },
+      dict: {
+        param: []
+      }
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {
+    onOpen() {
+      this.formData.inspectionPlanId = this.targetInfo?.id
+      this.getInfo()
+    },
+    onClose() {
+      this.$refs['elForm'].resetFields()
+    },
+    close() {
+      this.$emit('update:visible', false)
+    },
+    handelConfirm() {
+      this.$refs['elForm'].validate(async valid => {
+        if (!valid) return
+        const result = await editPlanParamInfo(this.formData)
+        if (result.code === 0) {
+          this.$message({
+            type: 'success',
+            message: '添加成功！'
+          })
+          this.$emit('done')
+          this.close()
+        }
+      })
+    },
+    async getInfo() {
+      const result = await getPlanParamInfo({
+        id: this.targetInfo?.id
+      })
+      if (result.code === 0) {
+        this.formData = result.data
+      }
+    }
+  }
+}
+
+</script>
+<style>
+</style>
diff --git a/src/views/QualityManager/plan/subpage/detail.vue b/src/views/QualityManager/plan/subpage/detail.vue
new file mode 100644
index 0000000..41ef032
--- /dev/null
+++ b/src/views/QualityManager/plan/subpage/detail.vue
@@ -0,0 +1,281 @@
+<!--
+ * @Date: 2020-12-15 15:36:52
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-26 14:04:37
+ * @FilePath: \basic-admin\src\views\QualityManager\plan\subpage\detail.vue
+ * @Description:
+-->
+<template>
+  <div class="bom-form-container">
+    <el-form ref="elForm" :model="formData" size="medium" label-width="200px">
+      <el-form-item :label="$t('module.quality.plan.testPlaneName')" prop="testPlaneName">
+        <el-input v-model="formData.testPlaneName" clearable :style="{width: '100%'}" :disabled="pagetype" />
+      </el-form-item>
+      <el-form-item :label="$t('module.quality.plan.testPlaneCode')" prop="testPlaneCode">
+        <el-input v-model="formData.testPlaneCode" clearable :style="{width: '100%'}" :disabled="pagetype" />
+      </el-form-item>
+      <el-form-item :label="$t('module.quality.plan.areaName')" prop="areaNameId">
+        <el-select
+          v-model="formData.areaNameId"
+          clearable
+          :style="{width: '100%'}"
+          :disabled="pagetype"
+        >
+          <el-option
+            v-for="(item, index) in areaList"
+            :key="index"
+            :label="item.detectArea"
+            :value="item.id"
+            :disabled="pagetype"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="$t('module.quality.plan.distributionAreaName')" prop="areaNameId">
+        <el-select
+          v-model="formData.areaNameId"
+          clearable
+          :style="{width: '100%'}"
+          :disabled="pagetype"
+        >
+          <el-option
+            v-for="(item, index) in areaList"
+            :key="index"
+            :label="item.distributionArea"
+            :value="item.id"
+            :disabled="pagetype"
+          />
+        </el-select>
+      </el-form-item>
+      <!-- <el-form-item :label="$t('module.quality.plan.detectionRateDicId')" prop="detectionRateDicId">
+        <el-select
+          v-model="formData.detectionRateDicId"
+          clearable
+          :style="{width: '100%'}"
+          :disabled="pagetype"
+        >
+          <el-option
+            v-for="(item, index) in dict.deviceType"
+            :key="index"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item> -->
+      <!-- <el-form-item :label="$t('module.quality.plan.testPlaneContent')" prop="testPlaneContent">
+        <el-input v-model="formData.testPlaneContent" clearable :style="{width: '100%'}" :disabled="pagetype" />
+      </el-form-item> -->
+      <el-form-item :label="$t('module.quality.plan.remark')" prop="remark">
+        <el-input v-model="formData.remark" clearable :style="{width: '100%'}" :disabled="pagetype" />
+      </el-form-item>
+    </el-form>
+    <div class="sub-table-container">
+      <el-divider>{{ $t('module.quality.planDetail.title') }}</el-divider>
+      <!-- <div class="method-btn-area">
+        <el-button type="primary" style="float: right;margin: 0 20px;" @click="showDialog = true">{{ 'btn.add' | i18nFilter }}</el-button>
+      </div> -->
+      <base-table :table-config="tableProps" :table-data="list" :is-loading="listLoading" :page="listQuery.current" :limit="listQuery.size">
+        <method-btn slot="handleBtn" @clickBtn="handleClick" />
+      </base-table>
+    </div>
+    <pagination :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.size" @pagination="getList" />
+    <!-- <add-form :visible.sync="showDialog" :target-info="{id: listQuery.detectDistributionAreaId}" @done="getList" />
+    <edit-form :visible.sync="showEditDialog" :target-info="{id: curEditId, fatherId: listQuery.detectDistributionAreaId}" @done="getList" /> -->
+  </div>
+</template>
+
+<script>
+// import CheckDetail from '@/components/BaseTable/subcomponents/CheckDetail'
+// edit here
+import dataDict from '@/filters/DataDict'
+// import { timeFormatter } from '@/filters'
+// const tableBtn = [{
+//   type: 'edit',
+//   btnName: 'btn.edit'
+// }, {
+//   type: 'delete',
+//   btnName: 'btn.delete'
+// }]
+const tableProps = [{
+  prop: 'equipmentName',
+  label: i18n.t('module.quality.planDetail.equipmentName'),
+  align: 'center'
+}, {
+  prop: 'name',
+  label: i18n.t('module.quality.planDetail.name'),
+  align: 'center'
+}, {
+  prop: 'value',
+  label: i18n.t('module.quality.planDetail.references'),
+  align: 'center'
+}, {
+  prop: 'distribution',
+  label: i18n.t('module.quality.plan.isIssued'),
+  align: 'center',
+  filter: dataDict('yesOrNo')
+}, {
+  prop: 'testFrequency',
+  label: i18n.t('module.quality.planDetail.testFrequency'),
+  align: 'center'
+}, {
+  prop: 'testSystem',
+  label: i18n.t('module.quality.planDetail.testSystem'),
+  align: 'center'
+}, {
+  prop: 'description',
+  label: i18n.t('module.quality.planDetail.description'),
+  align: 'center'
+}, {
+  prop: 'remark',
+  label: i18n.t('module.quality.planDetail.remark'),
+  align: 'center'
+}]
+// import AddForm from './AddForm'
+// import EditForm from './EditForm'
+import BaseTable from '@/components/BaseTable'
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+// edit here
+// import { objFilter } from '@/utils'
+import { getPlanInfo, getPlanParamList, delPlanParamInfo, getArea } from '@/api/quality-manage/plan'
+import Pagination from '@/components/Pagination'
+import i18n from '@/lang'
+export default {
+  name: 'BOMForm',
+  components: { Pagination, BaseTable, MethodBtn },
+  // , AddForm, EditForm
+  props: {},
+  data() {
+    return {
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      showDialog: false,
+      curEditId: null,
+      showEditDialog: false,
+      listQuery: {
+        enabled: 1,
+        detectDistributionAreaId: null,
+        current: 1,
+        size: 10
+      },
+      formData: {
+        testPlaneName: undefined,
+        testPlaneCode: undefined,
+        areaCode: undefined,
+        areaName: undefined,
+        detectionRateDicId: undefined,
+        testPlaneContent: undefined,
+        remark: undefined
+      },
+      dict: {
+        deviceType: []
+      },
+      areaList: []
+    }
+  },
+  computed: {
+    pagetype() {
+      return true
+      // return false
+    }
+  },
+  created() {
+    console.log(this.$route.query)
+    this.listQuery.detectDistributionAreaId = this.$route.query.areaNameId
+    this.getAreaList()
+    this.getDetail()
+    this.getList()
+    // this.listLoading = false
+  },
+  mounted() {},
+  methods: {
+    handleClick(raw) {
+      console.log(raw)
+      switch (raw.type) {
+        case 'delete':
+          this.$confirm(i18n.t('deleteMsgBox.content'), i18n.t('deleteMsgBox.hint'), {
+            confirmButtonText: i18n.t('btn.confirm'),
+            cancelButtonText: i18n.t('btn.cancel'),
+            type: 'warning'
+          }).then(async() => {
+            // 走接口
+            const result = await delPlanParamInfo({
+              id: raw.data.id
+            })
+            if (result.code === 0) {
+              this.$message({
+                type: 'success',
+                message: i18n.t('deleteMsgBox.doneMsg')
+              })
+              this.getList()
+            }
+          })
+          break
+        case 'edit':
+          this.showEditDialog = true
+          this.curEditId = raw.data.id
+          break
+      }
+    },
+    async getList() {
+      this.listLoading = true
+      // edit here
+      const res = await getPlanParamList(this.listQuery)
+      if (res.code === 0) {
+        this.list = res.data ? res.data : []
+        this.listLoading = false
+      }
+    },
+    async getDetail() {
+      const result = await getPlanInfo({
+        id: this.$route.query.id
+      })
+      if (result.code === 0) {
+        this.formData = result.data
+        // console.log(result)
+      }
+    },
+    async getAreaList() {
+      const result = await getArea({
+        current: 1,
+        size: 999
+      })
+      this.areaList = result.data.records
+    },
+    submitForm() {
+      this.$refs['elForm'].validate(valid => {
+        if (!valid) return
+        // TODO 提交表单
+      })
+    },
+    resetForm() {
+      this.$refs['elForm'].resetFields()
+    },
+    saveForm() {}
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/styles/mixin.scss";
+.bom-form-container {
+  padding: 20px;
+  .method-btn-area {
+    padding: 15px 30px;
+    margin: 10px 0 20px 0;
+    border: 1px solid #dfe6ec;
+    @include clearfix;
+  }
+  .sub-table-container {
+    margin-top: 80px;
+  }
+}
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/QualityManager/scrap/ScrapInfo-add.vue b/src/views/QualityManager/scrap/ScrapInfo-add.vue
new file mode 100644
index 0000000..35bc695
--- /dev/null
+++ b/src/views/QualityManager/scrap/ScrapInfo-add.vue
@@ -0,0 +1,303 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-20 11:03:09
+ * @Description:
+-->
+<template>
+  <el-dialog
+    :title="!dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter"
+    :close-on-click-modal="false"
+    :visible.sync="visible"
+    @close="onClose"
+  >
+    <el-row :gutter="15" style="padding: 0 20px;">
+      <el-form
+        ref="dataForm"
+        :model="dataForm"
+        :rules="rules"
+        size="medium"
+        label-width="150px"
+        label-position="right"
+      >
+
+        <el-form-item :label="$t('module.basicData.ScrapInfo.updateTime')" prop="registerTime">
+          <el-date-picker
+            v-model="dataForm.registerTime"
+            format="yyyy-MM-dd"
+            :style="{width: '100%'}"
+            :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.ScrapInfo.updateTime')])"
+            clearable
+          />
+        </el-form-item>
+
+        <el-form-item :label="$t('module.basicData.ScrapInfo.RegisterPerson')" prop="registerPerson">
+          <!-- <el-input v-model="dataForm.registerPerson" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.ScrapInfo.RegisterPerson')])" clearable :style="{width: '100%'}" /> -->
+          <el-select
+            v-model="dataForm.registerPerson"
+            :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.ScrapInfo.RegisterPerson')])"
+            clearable
+            :style="{width: '100%'}"
+          >
+            <el-option
+              v-for="(item, index) in dict.worker"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item :label="$t('module.basicData.ScrapInfo.entryType')" prop="entryType">
+          <!-- <el-input v-model="dataForm.registerPerson" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.ScrapInfo.RegisterPerson')])" clearable :style="{width: '100%'}" /> -->
+          <el-select
+            v-model="dataForm.entryType"
+            :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.ScrapInfo.entryType')])"
+            clearable
+            :style="{width: '100%'}"
+          >
+            <el-option
+              v-for="(item, index) in entryType"
+              :key="index"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item :label="$t('module.basicData.ScrapInfo.workOrderId')" prop="workOrderId">
+          <el-select
+            v-model="dataForm.workOrderId"
+            :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.ScrapInfo.workOrderId')])"
+            clearable
+            :style="{width: '100%'}"
+          >
+            <el-option
+              v-for="(item, index) in dict.orderList"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item :label="$t('module.basicData.ScrapInfo.source')" prop="source">
+          <el-input v-model="dataForm.source" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.ScrapInfo.source')])" clearable :style="{width: '100%'}" />
+        </el-form-item>
+
+        <el-form-item :label="$t('module.basicData.ScrapInfo.PlateId')" prop="substrateId">
+          <el-input v-model="dataForm.substrateId" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.ScrapInfo.PlateId')])" clearable :style="{width: '100%'}" />
+        </el-form-item>
+
+        <el-form-item :label="$t('module.basicData.ScrapInfo.name')" prop="equipmentId">
+          <el-select v-model="dataForm.equipmentId" filterable :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.ScrapInfo.name')])" clearable :style="{width: '100%'}" @change="getScrapGrade">
+            <el-option
+              v-for="(item, index) in device"
+              :key="index"
+              :label="item.name"
+              :value="item.id "
+            />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item v-if="tag" :label="$t('module.basicData.ScrapInfo.wasteGrade')" prop="ewasteGrade">
+          <el-input v-model="wasteGrade" clear readonly :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.ScrapInfo.wasteGrade')])" :disabled="true" />
+        </el-form-item>
+
+        <el-form-item :label="$t('module.basicData.ScrapInfo.cause')" prop="scrapReasonId">
+          <!-- <el-input v-model="dataForm.registerPerson" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.ScrapInfo.RegisterPerson')])" clearable :style="{width: '100%'}" /> -->
+          <el-select
+            v-model="dataForm.scrapReasonId"
+            :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.ScrapInfo.cause')])"
+            clearable
+            :style="{width: '100%'}"
+          >
+            <el-option
+              v-for="(item, index) in dict.scrapReason"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item :label="$t('module.basicData.ScrapInfo.remark')" prop="remark">
+          <el-input v-model="dataForm.remark" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.ScrapInfo.remark')])" clearable :style="{width: '100%'}" />
+        </el-form-item>
+
+      </el-form>
+    </el-row>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import i18n from '@/lang'
+import { getScrapInfo, editScrapInfo, addScrapInfo, getScrap } from '@/api/quality-manage/scrap'
+import { scrapReasonList } from '@/api/dict'
+import { getDictWorker } from '@/api/dict'
+import { getEqList } from '@/api/equipment/maintain'
+import { workOrderList } from '@/api/orderManage/workOrder/workOrder'
+
+const wasteGradeArr = [{
+  value: '加工可用',
+  label: i18n.t('module.basicData.ScrapInfo.completeWaste')
+},
+{
+  value: '完全废品',
+  label: i18n.t('module.basicData.ScrapInfo.CanBeUsedAfterProcessing')
+}]
+
+const entryType = [{
+  value: '2',
+  label: i18n.t('module.basicData.ScrapInfo.manual')
+},
+{
+  value: '1',
+  label: i18n.t('module.basicData.ScrapInfo.automatic')
+}]
+
+export default {
+  data() {
+    return {
+      visible: false,
+      dataForm: {
+        id: 0,
+        source: undefined,
+        registerTime: undefined,
+        registerPerson: undefined,
+        scrapGrade: undefined,
+        description: undefined,
+        substrateId: undefined,
+        remark: undefined
+      },
+      wasteGradeArr,
+      entryType,
+      rules: {
+        name: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.ScrapInfo.WasteName')]),
+          trigger: 'blur'
+        }],
+        code: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.ScrapInfo.WasteCode')]),
+          trigger: 'blur'
+        }],
+        equipmentId: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.ScrapInfo.equipmentId')]),
+          trigger: 'change'
+        }],
+        substrateId: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.ScrapInfo.PlateId')]),
+          trigger: 'blur'
+        }],
+        registerPerson: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.ScrapInfo.registerPerson')]),
+          trigger: 'change'
+        }]
+      },
+      dict: {
+        worker: [],
+        scrapReason: [],
+        orderList: []
+      },
+      device: [],
+      wasteGrade: '',
+      tag: false
+    }
+  },
+  mounted() {
+    this.getDict()
+  },
+  methods: {
+    getScrapGrade(val) {
+      getScrap(val).then(res => {
+        if (res.code === 0) {
+          if (res.data) {
+            this.tag = true
+            this.wasteGrade = res.data.dataName
+          } else {
+            this.tag = false
+            this.wasteGrade = ''
+          }
+        }
+      })
+    },
+    onClose() {
+      this.$refs['dataForm'].resetFields()
+    },
+    init(id) {
+      this.dataForm.id = id || ''
+      this.visible = true
+      this.$nextTick(() => {
+        if (this.dataForm.id) {
+          getScrapInfo({ id: this.dataForm.id }).then(res => {
+            this.dataForm = res.data
+          })
+        }
+      })
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          if (this.dataForm.id) {
+            console.log(this.device)
+            editScrapInfo(this.dataForm).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          } else {
+            addScrapInfo(this.dataForm).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          }
+        }
+      })
+    },
+    async getDict() {
+      const result3 = await workOrderList({
+        current: 1,
+        size: 999
+      })
+      console.log(result3)
+      this.dict.orderList = result3.data.records
+      const result1 = await getEqList({
+        current: 1,
+        size: 999
+      })
+      if (result1.code === 0) {
+        this.device = result1.data.records
+      }
+      const result = await getDictWorker()
+      this.dict.worker = result
+      const result2 = await scrapReasonList()
+      this.dict.scrapReason = result2
+      // this.dict.orderList = result3.data.records
+    }
+  }
+}
+</script>
diff --git a/src/views/QualityManager/scrap/ScrapInfoCause.vue b/src/views/QualityManager/scrap/ScrapInfoCause.vue
new file mode 100644
index 0000000..8ac05c0
--- /dev/null
+++ b/src/views/QualityManager/scrap/ScrapInfoCause.vue
@@ -0,0 +1,60 @@
+<!--
+ * @Date: 2021-01-07 20:09:37
+ * @LastEditors: guo
+ * @LastEditTime: 2021-03-18 15:19:21
+ * @FilePath: \basic-admin\src\views\QualityManager\scrap\ScrapInfoCause.vue
+ * @Description:
+-->
+<template>
+  <span>
+    <el-button type="text" size="small" @click="emitClick">{{ $t('module.basicData.ScrapInfo.cause') }}</el-button>
+  </span>
+</template>
+
+<script>
+import { getscrapReason } from '@/api/quality-manage/scrap'
+export default {
+  props: {
+    injectData: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      formData: {}
+    }
+  },
+  methods: {
+    async emitClick() {
+      const h = this.$createElement
+      await this.getReason()
+      await this.$msgbox({
+        title: this.$t('module.basicData.ScrapInfo.cause'),
+        message: h('div', null, [
+          h('span', null, `${this.$t('module.basicData.ScrapInfo.scrapType')}:${this.formData.scrapType}`),
+          h('br'),
+          h('div', null, `${this.$t('module.basicData.ScrapInfo.cause')}:${this.formData.scrap}`)
+        ]),
+        showCancelButton: false,
+        confirmButtonText: this.$t('module.basicData.visual.confirmButtonText')
+      })
+    },
+    async getReason() {
+      if (this.injectData.scrapReasonId) {
+        const result = await getscrapReason({
+          id: this.injectData.scrapReasonId
+        })
+        if (result.code === 0) {
+          this.formData = result.data
+        }
+      } else {
+        this.formData = {
+          scrapType: '暂无',
+          scrap: '暂无'
+        }
+      }
+    }
+  }
+}
+</script>
diff --git a/src/views/QualityManager/scrap/components/barChart.vue b/src/views/QualityManager/scrap/components/barChart.vue
new file mode 100644
index 0000000..ea6f912
--- /dev/null
+++ b/src/views/QualityManager/scrap/components/barChart.vue
@@ -0,0 +1,119 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-03-03 16:39:34
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-23 10:26:44
+ * @Description:
+-->
+<template>
+  <div :id="id" :style="barStyle" />
+</template>
+
+<script>
+import echarts from 'echarts'
+
+export default {
+  props: {
+    id: {
+      type: String,
+      default: () => {
+        return 'barChart'
+      }
+    },
+    barStyle: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    title: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    legend: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    xAxis: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    yAxis: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    series: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    color: {
+      type: Array,
+      default: () => {
+        return ['#5470C6']
+      }
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  watch: {
+    series: {
+      handler() {
+        this.init()
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.init()
+    addEventListener('resize', () => {
+      this.chart.resize()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    init() {
+      this.chart = echarts.init(document.getElementById(this.id))
+
+      this.chart.setOption({
+        color: this.color,
+        title: this.title,
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        legend: this.legend,
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: this.xAxis,
+        yAxis: this.yAxis,
+        series: this.series
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/QualityManager/scrap/filters/index.js b/src/views/QualityManager/scrap/filters/index.js
new file mode 100644
index 0000000..1766bbb
--- /dev/null
+++ b/src/views/QualityManager/scrap/filters/index.js
@@ -0,0 +1,36 @@
+/*
+ * @Date: 2020-12-29 16:49:28
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-04-13 13:49:51
+ * @FilePath: \basic-admin\src\filters\DataDict\index.js
+ * @Description: 部分常量的数据字典定义
+ */
+
+import { scrapReasonList } from '@/api/dict'
+import { getEqList } from '@/api/equipment/maintain'
+
+const table = {
+  device: {},
+  scrap: {}
+}
+
+getEqList({
+  current: 1,
+  size: 999
+}).then(res => {
+  res.data.records.map(item => {
+    table.device[item.id] = item.name
+  })
+})
+
+scrapReasonList().then(res => {
+  res.map(item => {
+    table.scrap[item.id] = item.name
+  })
+})
+
+export default function(dictTable) {
+  return function(val) {
+    return table?.[dictTable]?.[val]
+  }
+}
diff --git a/src/views/QualityManager/scrap/index.vue b/src/views/QualityManager/scrap/index.vue
new file mode 100644
index 0000000..5643265
--- /dev/null
+++ b/src/views/QualityManager/scrap/index.vue
@@ -0,0 +1,267 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-26 13:39:35
+ * @Description:
+-->
+<template>
+  <div class="app-container">
+    <el-form
+      :model="formData"
+      :inline="true"
+      size="medium"
+      label-width="130px"
+    >
+      <el-form-item v-if="false" :label="$t('module.basicData.ScrapInfo.PlateId')" prop="basalId">
+        <el-input v-model="formData.basalId" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.ScrapInfo.PlateId')])" style="width:200px" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.ScrapInfo.TimePeriod')" prop="time">
+        <el-date-picker
+          v-model="formData.timeSlot"
+          type="daterange"
+          format="yyyy-MM-dd"
+          :start-placeholder="$t('module.basicData.ScrapInfo.StartTime')"
+          :end-placeholder="$t('module.basicData.ScrapInfo.EndTime')"
+          :range-separator="$t('module.basicData.ScrapInfo.To')"
+          clearable
+        />
+        <!-- value-format="yyyy-MM-dd" -->
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.ScrapInfo.name')" prop="equipmentId">
+        <el-select v-model="formData.equipmentId" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.ScrapInfo.name')])" clearable :style="{width: '100%'}" filterable>
+          <el-option
+            v-for="(item, index) in device"
+            :key="index"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="getList()"> {{ 'btn.search' | i18nFilter }} </el-button>
+        <el-button type="primary" @click="addNew()"> {{ 'btn.add' | i18nFilter }} </el-button>
+      </el-form-item>
+    </el-form>
+    <base-table
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    >
+      <method-btn
+        slot="handleBtn"
+        :width="trueWidth"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="formData.current"
+      :limit.sync="formData.size"
+      @pagination="getList()"
+    />
+    <ScrapInfo-add v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
+  </div>
+</template>
+
+<script>
+import { getScrapList, delScrapInfo } from '@/api/quality-manage/scrap'
+import { scrapReasonList } from '@/api/dict'
+import ScrapInfoAdd from './ScrapInfo-add.vue'
+// import ScrapInfoCause from './ScrapInfoCause.vue'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import { timeFormatter } from '@/filters'
+import i18n from '@/lang'
+import { getEqList } from '@/api/equipment/maintain'
+// import DictFilter from '@/components/BaseTable/subcomponents/DataDictFilter'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+
+const tableBtn = [
+  {
+    type: 'edit',
+    btnName: 'btn.edit'
+  },
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  }
+]
+const tableProps = [
+  // {
+  //   prop: 'createTime',
+  //   label: i18n.t('module.basicData.factory.createTime'),
+  //   filter: timeFormatter
+  // },
+  {
+    prop: 'source',
+    label: i18n.t('module.basicData.ScrapInfo.source'),
+    align: 'center'
+  },
+  {
+    prop: 'scrapGradeDic',
+    label: i18n.t('module.basicData.ScrapInfo.wasteGrade'),
+    align: 'center'
+  },
+  {
+    prop: 'equipmentName',
+    label: i18n.t('module.basicData.ScrapInfo.name'),
+    align: 'center'
+  },
+  {
+    prop: 'substrateId',
+    label: i18n.t('module.basicData.ScrapInfo.PlateId'),
+    align: 'center'
+  },
+  {
+    prop: 'registerPersonName',
+    label: i18n.t('module.basicData.ScrapInfo.RegisterPerson'),
+    align: 'center'
+  },
+  {
+    prop: 'updateTime',
+    label: i18n.t('module.basicData.ScrapInfo.updateTime'),
+    filter: timeFormatter,
+    align: 'center'
+  },
+  {
+    prop: 'scrapReason',
+    label: i18n.t('module.basicData.ScrapInfo.cause'),
+    align: 'center'
+  }
+  // {
+  //   prop: 'scrapReasonId',
+  //   label: i18n.t('module.basicData.ScrapInfo.cause'),
+  //   subcomponent: ScrapInfoCause,
+  //   align: 'center'
+  //   // filter: scrapReasonList
+  // }
+]
+
+export default {
+  name: 'ScrapInfo',
+  components: { Pagination, BaseTable, MethodBtn, ScrapInfoAdd },
+  data() {
+    return {
+      addOrUpdateVisible: false,
+      tableBtn,
+      trueWidth: 200,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      formData: {
+        timeSlot: null,
+        basalId: '',
+        current: 1,
+        size: 10,
+        id: ''
+      },
+      listQuery: {
+        current: 1,
+        size: 10
+      },
+      dict: {
+        scrap: []
+      },
+      device: []
+    }
+  },
+  created() {
+    this.getDict()
+    this.getList()
+  },
+  methods: {
+    handleClick(raw) {
+      if (raw.type === 'delete') {
+        this.$confirm(i18n.t('deleteMsgBox.content'), i18n.t('deleteMsgBox.hint'), {
+          confirmButtonText: i18n.t('btn.confirm'),
+          cancelButtonText: i18n.t('btn.cancel'),
+          type: 'warning'
+        }).then(() => {
+          delScrapInfo({ id: raw.data.id }).then(response => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+              }
+            })
+          })
+        }).catch(() => {})
+      } else {
+        this.addNew(raw.data.id)
+      }
+    },
+    getList() {
+      this.listLoading = true
+      if (this.formData.timeSlot) {
+        this.formData.startTime = this.formData.timeSlot[0]
+        this.formData.endTime = this.formData.timeSlot[1]
+      } else {
+        this.formData.startTime = ''
+        this.formData.endTime = ''
+      }
+      getScrapList(this.formData).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+          console.log(this.list)
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    },
+    async getDict() {
+      const result1 = await getEqList({
+        current: 1,
+        size: 999
+      })
+      if (result1.code === 0) {
+        this.device = result1.data.records
+      }
+      const result = await scrapReasonList()
+      this.dict.scrap = result
+    },
+    // 新增 / 修改
+    addNew(id) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id)
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/QualityManager/scrap/scrapCategoryStatistics.vue b/src/views/QualityManager/scrap/scrapCategoryStatistics.vue
new file mode 100644
index 0000000..194372a
--- /dev/null
+++ b/src/views/QualityManager/scrap/scrapCategoryStatistics.vue
@@ -0,0 +1,225 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-20 10:54:53
+ * @Description:
+-->
+<template>
+  <div class="app-container">
+    <el-form
+      :model="formData"
+      :inline="true"
+      size="medium"
+      label-width="80px"
+    >
+      <el-form-item v-if="false" :label="$t('module.quality.ScrapInfo.PlateId')" prop="basalId">
+        <el-input v-model="formData.basalId" :placeholder="$i18nForm(['placeholder.input', $t('module.quality.ScrapInfo.PlateId')])" style="width:200px" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.quality.ScrapInfo.name')" prop="equipmentId">
+        <el-select v-model="formData.equipmentId" :placeholder="$i18nForm(['placeholder.input', $t('module.quality.ScrapInfo.name')])" clearable :style="{width: '100%'}" filterable>
+          <el-option
+            v-for="(item, index) in dict.device"
+            :key="index"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="getList()"> {{ 'btn.search' | i18nFilter }} </el-button>
+      </el-form-item>
+    </el-form>
+    <el-row>
+      <el-col :span="24">
+        <base-table
+          :page="listQuery.current"
+          :limit="listQuery.size"
+          :table-config="tableProps"
+          :table-data="list"
+          :is-loading="listLoading"
+        >
+          <method-btn
+            slot="handleBtn"
+            :width="trueWidth"
+            :method-list="tableBtn"
+            @clickBtn="handleClick"
+          />
+        </base-table>
+      </el-col>
+      <el-col :span="0">
+        <echarts-bar
+          v-if="false"
+          ref="BarRef"
+          :color="color"
+          :bar-style="barStyle"
+          :title="barTitle"
+          :x-axis="xAxis"
+          :y-axis="yAxis"
+          :series="series"
+        />
+      </el-col>
+    </el-row>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="formData.current"
+      :limit.sync="formData.size"
+      @pagination="getList()"
+    />
+  </div>
+</template>
+
+<script>
+import { getList } from '@/api/quality-manage/scrapCategoryStatistics'
+import { scrapReasonList } from '@/api/dict'
+// import ScrapInfoCause from './ScrapInfoCause.vue'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import i18n from '@/lang'
+import dataDict from './filters'
+import { getEqList } from '@/api/equipment/maintain'
+import echartsBar from './components/barChart.vue'
+// import DictFilter from '@/components/BaseTable/subcomponents/DataDictFilter'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+
+const tableBtn = []
+const tableProps = [
+  {
+    prop: 'equipmentId',
+    label: i18n.t('module.quality.ScrapInfo.name'),
+    align: 'center',
+    filter: dataDict('device')
+  },
+  {
+    prop: 'reasonId',
+    label: i18n.t('module.quality.ScrapInfo.cause'),
+    align: 'center',
+    filter: dataDict('scrap')
+  },
+  {
+    prop: 'count',
+    label: i18n.t('module.quality.ScrapInfo.count'),
+    align: 'center'
+  }
+]
+const barTitle = {
+  text: i18n.t('module.quality.ScrapInfo.title'),
+  subtext: i18n.t('module.quality.ScrapInfo.subTitle')
+}
+const color = [
+  '#5470C6', '#91CC75'
+]
+const barStyle = {
+  height: '400px',
+  width: '100%',
+  margin: '20px'
+}
+const series = [{
+  name: i18n.t('module.quality.ScrapInfo.subTitle'),
+  data: [],
+  type: 'bar'
+}]
+
+export default {
+  name: 'ScrapInfo',
+  components: { Pagination, BaseTable, MethodBtn, echartsBar },
+  data() {
+    return {
+      addOrUpdateVisible: false,
+      tableBtn,
+      trueWidth: 200,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      formData: {
+        equipmentId: '',
+        current: 1,
+        size: 10
+      },
+      listQuery: {
+        current: 1,
+        size: 10
+      },
+      dict: {
+        scrap: [],
+        device: []
+      },
+      color,
+      barTitle,
+      barStyle,
+      xAxis: {
+        type: 'category',
+        data: []
+      },
+      yAxis: {
+        type: 'value'
+      },
+      series
+    }
+  },
+  created() {
+    this.getDict()
+  },
+  methods: {
+    handleClick(raw) {},
+    getList() {
+      this.listLoading = true
+      getList(this.formData).then(response => {
+        this.series[0].data = []
+        this.xAxis.data = []
+        if (response.data.records) {
+          this.list = response.data.records
+          response.data.records.map(item => {
+            this.series[0].data.push(Number(item.count))
+            this.xAxis.data.push(dataDict('device')(item.equipmentId) + '(' + dataDict('scrap')(item.reasonId) + ')')
+          })
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    },
+    async getDict() {
+      const result1 = await getEqList({
+        current: 1,
+        size: 999
+      })
+      if (result1.code === 0) {
+        this.dict.device = result1.data.records
+      }
+      const result = await scrapReasonList()
+      this.dict.scrap = result
+      this.getList()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/example/components/ArticleDetail.vue b/src/views/ReleaseArticle/components/ArticleDetail.vue
similarity index 87%
rename from src/views/example/components/ArticleDetail.vue
rename to src/views/ReleaseArticle/components/ArticleDetail.vue
index 157497b..4f830f3 100644
--- a/src/views/example/components/ArticleDetail.vue
+++ b/src/views/ReleaseArticle/components/ArticleDetail.vue
@@ -3,46 +3,45 @@
     <el-form ref="postForm" :model="postForm" :rules="rules" class="form-container">
 
       <sticky :z-index="10" :class-name="'sub-navbar '+postForm.status">
-        <CommentDropdown v-model="postForm.comment_disabled" />
+        <!-- <CommentDropdown v-model="postForm.comment_disabled" />
         <PlatformDropdown v-model="postForm.platforms" />
-        <SourceUrlDropdown v-model="postForm.source_uri" />
+        <SourceUrlDropdown v-model="postForm.source_uri" /> -->
         <el-button v-loading="loading" style="margin-left: 10px;" type="success" @click="submitForm">
-          Publish
+          发布
         </el-button>
         <el-button v-loading="loading" type="warning" @click="draftForm">
-          Draft
+          保存为草稿
         </el-button>
       </sticky>
 
       <div class="createPost-main-container">
         <el-row>
-          <Warning />
 
           <el-col :span="24">
             <el-form-item style="margin-bottom: 40px;" prop="title">
               <MDinput v-model="postForm.title" :maxlength="100" name="name" required>
-                Title
+                标题
               </MDinput>
             </el-form-item>
 
             <div class="postInfo-container">
               <el-row>
                 <el-col :span="8">
-                  <el-form-item label-width="60px" label="Author:" class="postInfo-container-item">
-                    <el-select v-model="postForm.author" :remote-method="getRemoteUserList" filterable default-first-option remote placeholder="Search user">
+                  <el-form-item label-width="60px" label="作者:" class="postInfo-container-item">
+                    <el-select v-model="postForm.author" :remote-method="getRemoteUserList" clearable filterable default-first-option remote placeholder="搜索作者">
                       <el-option v-for="(item,index) in userListOptions" :key="item+index" :label="item" :value="item" />
                     </el-select>
                   </el-form-item>
                 </el-col>
 
                 <el-col :span="10">
-                  <el-form-item label-width="120px" label="Publish Time:" class="postInfo-container-item">
-                    <el-date-picker v-model="displayTime" type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="Select date and time" />
+                  <el-form-item label-width="120px" label="发布时间:" class="postInfo-container-item">
+                    <el-date-picker v-model="displayTime" type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="选取时间日期" />
                   </el-form-item>
                 </el-col>
 
                 <el-col :span="6">
-                  <el-form-item label-width="90px" label="Importance:" class="postInfo-container-item">
+                  <el-form-item label-width="90px" label="重要性:" class="postInfo-container-item">
                     <el-rate
                       v-model="postForm.importance"
                       :max="3"
@@ -58,8 +57,8 @@
           </el-col>
         </el-row>
 
-        <el-form-item style="margin-bottom: 40px;" label-width="70px" label="Summary:">
-          <el-input v-model="postForm.content_short" :rows="1" type="textarea" class="article-textarea" autosize placeholder="Please enter the content" />
+        <el-form-item style="margin-bottom: 40px;" label-width="70px" label="概括:">
+          <el-input v-model="postForm.content_short" :rows="1" type="textarea" class="article-textarea" autosize placeholder="请输入内容" />
           <span v-show="contentShortLength" class="word-counter">{{ contentShortLength }}words</span>
         </el-form-item>
 
@@ -68,7 +67,7 @@
         </el-form-item>
 
         <el-form-item prop="image_uri" style="margin-bottom: 30px;">
-          <Upload v-model="postForm.image_uri" />
+          <!-- <Upload v-model="postForm.image_uri" /> -->
         </el-form-item>
       </div>
     </el-form>
@@ -77,14 +76,12 @@
 
 <script>
 import Tinymce from '@/components/Tinymce'
-import Upload from '@/components/Upload/SingleImage3'
 import MDinput from '@/components/MDinput'
 import Sticky from '@/components/Sticky' // 粘性header组件
 import { validURL } from '@/utils/validate'
 import { fetchArticle } from '@/api/article'
 import { searchUser } from '@/api/remote-search'
-import Warning from './Warning'
-import { CommentDropdown, PlatformDropdown, SourceUrlDropdown } from './Dropdown'
+// import { CommentDropdown, PlatformDropdown, SourceUrlDropdown } from './Dropdown'
 
 const defaultForm = {
   status: 'draft',
@@ -102,7 +99,7 @@ const defaultForm = {
 
 export default {
   name: 'ArticleDetail',
-  components: { Tinymce, MDinput, Upload, Sticky, Warning, CommentDropdown, PlatformDropdown, SourceUrlDropdown },
+  components: { Tinymce, MDinput, Sticky },
   props: {
     isEdit: {
       type: Boolean,
diff --git a/src/views/example/components/Dropdown/Comment.vue b/src/views/ReleaseArticle/components/Dropdown/Comment.vue
similarity index 100%
rename from src/views/example/components/Dropdown/Comment.vue
rename to src/views/ReleaseArticle/components/Dropdown/Comment.vue
diff --git a/src/views/example/components/Dropdown/Platform.vue b/src/views/ReleaseArticle/components/Dropdown/Platform.vue
similarity index 100%
rename from src/views/example/components/Dropdown/Platform.vue
rename to src/views/ReleaseArticle/components/Dropdown/Platform.vue
diff --git a/src/views/example/components/Dropdown/SourceUrl.vue b/src/views/ReleaseArticle/components/Dropdown/SourceUrl.vue
similarity index 100%
rename from src/views/example/components/Dropdown/SourceUrl.vue
rename to src/views/ReleaseArticle/components/Dropdown/SourceUrl.vue
diff --git a/src/views/example/components/Dropdown/index.js b/src/views/ReleaseArticle/components/Dropdown/index.js
similarity index 100%
rename from src/views/example/components/Dropdown/index.js
rename to src/views/ReleaseArticle/components/Dropdown/index.js
diff --git a/src/views/example/create.vue b/src/views/ReleaseArticle/create.vue
similarity index 100%
rename from src/views/example/create.vue
rename to src/views/ReleaseArticle/create.vue
diff --git a/src/views/example/edit.vue b/src/views/ReleaseArticle/edit.vue
similarity index 100%
rename from src/views/example/edit.vue
rename to src/views/ReleaseArticle/edit.vue
diff --git a/src/views/ReleaseArticle/list.vue b/src/views/ReleaseArticle/list.vue
new file mode 100644
index 0000000..4a344ce
--- /dev/null
+++ b/src/views/ReleaseArticle/list.vue
@@ -0,0 +1,123 @@
+<template>
+  <div class="app-container">
+    <base-table :table-config="tableProps" :table-data="list" :is-loading="listLoading">
+      <method-btn slot="handleBtn" :method-list="tableBtn" @clickBtn="handleClick" />
+    </base-table>
+    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
+  </div>
+</template>
+
+<script>
+import BaseTable from '@/components/BaseTable'
+import { fetchList } from '@/api/article'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import CheckPic from '@/components/BaseTable/subcomponents/CheckPic'
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+function timechange(ts) {
+  return ts + 'ts'
+}
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+
+const tableBtn = [{
+  type: 'edit',
+  btnName: 'btn.edit'
+}, {
+  type: 'delete',
+  btnName: 'btn.delete'
+}]
+const tableProps = [{
+  prop: 'id',
+  label: '文章id',
+  width: '80px'
+}, {
+  prop: 'timestamp',
+  label: '日期',
+  filter: timechange
+}, {
+  prop: 'author',
+  label: '作者',
+  align: 'center'
+}, {
+  prop: 'importance',
+  label: '重要度'
+}, {
+  prop: 'status',
+  label: '状态'
+}, {
+  prop: 'title',
+  label: '标题'
+}, {
+  prop: 'image_uri',
+  label: '查看图片',
+  subcomponent: CheckPic
+}]
+
+export default {
+  name: 'ArticleList',
+  components: { Pagination, BaseTable, MethodBtn },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      tableBtn,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        page: 1,
+        limit: 20
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    handleClick(raw) {
+      console.log(raw)
+    },
+    getList() {
+      this.listLoading = true
+      fetchList(this.listQuery).then(response => {
+        this.list = response.data.items
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/RoleManager/AddForm.vue b/src/views/RoleManager/AddForm.vue
new file mode 100644
index 0000000..ad4cdaa
--- /dev/null
+++ b/src/views/RoleManager/AddForm.vue
@@ -0,0 +1,118 @@
+<!--
+ * @Date: 2021-01-05 13:40:58
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-26 14:36:26
+ * @FilePath: \basic-admin\src\views\RoleManager\AddForm.vue
+ * @Description:
+-->
+<template>
+  <div>
+    <el-dialog v-bind="$attrs" :title="'formItem.role.add' | i18nFilter" v-on="$listeners" @open="onOpen" @close="onClose">
+      <el-form ref="formData" :model="formData" :rules="rules" size="medium" label-width="125px">
+        <el-form-item :label="$t('roleManage.roleCode')" prop="code">
+          <el-input v-model="formData.code" :placeholder="['placeholder.input', $t('roleManage.roleCode')] | i18nFilterForm" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('roleManage.roleName')" prop="name">
+          <el-input v-model="formData.name" :placeholder="['placeholder.input', $t('roleManage.roleName')] | i18nFilterForm" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <!-- <el-form-item :label="$t('roleManage.roleType')" prop="category">
+          <el-select v-model="formData.category">
+            <el-option
+              v-for="item in categoryOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item> -->
+        <el-form-item :label="$t('roleManage.remark')" prop="remark">
+          <el-input v-model="formData.remark" :placeholder="['placeholder.input', $t('roleManage.remark')] | i18nFilterForm" clearable :style="{width: '100%'}" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="close">{{ 'btn.cancel' | i18nFilter }}</el-button>
+        <el-button type="primary" @click="handelConfirm">{{ 'btn.confirm' | i18nFilter }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { addRole, RoleCode } from '@/api/role'
+export default {
+  components: {},
+  inheritAttrs: false,
+  props: [],
+  data() {
+    return {
+      formData: {
+        code: undefined,
+        name: undefined,
+        remark: undefined,
+        category: 1
+      },
+      categoryOptions: [{
+        value: 1,
+        label: 'pc'
+      }, {
+        value: 5,
+        label: 'pda'
+      }],
+      rules: {
+        code: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('roleManage.roleCode')]),
+          trigger: 'blur'
+        }],
+        name: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('roleManage.roleName')]),
+          trigger: 'blur'
+        }],
+        category: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('roleManage.roleType')]),
+          trigger: 'change'
+        }]
+      }
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {
+  },
+  mounted() {},
+  methods: {
+    onOpen() {
+      this.$nextTick(() => {
+        this.$refs['formData'].resetFields()
+        RoleCode().then(res => {
+          this.formData.code = res.data
+        })
+      })
+    },
+    onClose() {
+      this.$refs['formData'].resetFields()
+    },
+    close() {
+      this.$emit('update:visible', false)
+    },
+    handelConfirm() {
+      this.$refs['formData'].validate(async valid => {
+        if (!valid) return
+        const result = await addRole(this.formData)
+        if (result.code === 0) {
+          this.$message({
+            type: 'success',
+            message: '添加成功！'
+          })
+          this.$emit('done')
+          this.close()
+        }
+      })
+    }
+  }
+}
+
+</script>
+<style>
+</style>
diff --git a/src/views/RoleManager/EditForm.vue b/src/views/RoleManager/EditForm.vue
new file mode 100644
index 0000000..191937f
--- /dev/null
+++ b/src/views/RoleManager/EditForm.vue
@@ -0,0 +1,141 @@
+<!--
+ * @Date: 2021-01-05 13:40:58
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-26 14:38:12
+ * @FilePath: \basic-admin\src\views\RoleManager\EditForm.vue
+ * @Description:
+-->
+<template>
+  <div>
+    <el-dialog v-bind="$attrs" :title="'formItem.role.edit' | i18nFilter" v-on="$listeners" @open="onOpen" @close="onClose">
+      <el-form ref="编辑角色" :model="formData" :rules="rules" size="medium" label-width="145px">
+        <el-form-item :label="$t('roleManage.roleCode')" prop="code">
+          <el-input v-model="formData.code" :placeholder="['placeholder.input', $t('roleManage.roleCode')] | i18nFilterForm" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('roleManage.roleName')" prop="name">
+          <el-input v-model="formData.name" :placeholder="['placeholder.input', $t('roleManage.roleName')] | i18nFilterForm" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <!-- <el-form-item :label="$t('roleManage.roleType')" prop="category">
+          <el-select v-model="formData.category">
+            <el-option
+              v-for="item in categoryOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item> -->
+        <el-form-item :label="$t('roleManage.remark')" prop="remark">
+          <el-input v-model="formData.remark" :placeholder="['placeholder.input', $t('roleManage.remark')] | i18nFilterForm" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('roleManage.rolestartstop')" prop="enabled">
+          <el-switch v-model="formData.enabled" :active-value="1" :inactive-value="0" @change="enableStateChange" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="close">{{ 'btn.cancel' | i18nFilter }}</el-button>
+        <el-button type="primary" @click="handelConfirm">{{ 'btn.confirm' | i18nFilter }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { getRoleInfo, updateRole, enableRole } from '@/api/role'
+export default {
+  components: {},
+  inheritAttrs: false,
+  props: {
+    targetInfo: {
+      type: Object,
+      default: () => {
+        return {
+          id: 1
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      formData: {
+        code: undefined,
+        name: undefined,
+        remark: undefined,
+        category: 1,
+        enabled: true
+      },
+      categoryOptions: [{
+        value: 1,
+        label: 'pc'
+      }, {
+        value: 5,
+        label: 'pda'
+      }],
+      rules: {
+        code: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('roleManage.roleCode')]),
+          trigger: 'blur'
+        }],
+        name: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('roleManage.roleName')]),
+          trigger: 'blur'
+        }],
+        remark: []
+      }
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {
+    onOpen() {
+      this.getInfo()
+    },
+    onClose() {
+      this.$emit('done')
+      this.$refs['编辑角色'].resetFields()
+    },
+    close() {
+      this.$emit('update:visible', false)
+    },
+    async enableStateChange(val) {
+      const result = await enableRole({
+        id: this.targetInfo?.id,
+        enabled: val
+      })
+      if (result.code === 0) {
+        this.$message({
+          type: 'success',
+          message: '修改状态成功！'
+        })
+      }
+    },
+    handelConfirm() {
+      this.$refs['编辑角色'].validate(async valid => {
+        if (!valid) return
+        const result = await updateRole(this.formData)
+        if (result.code === 0) {
+          this.$message({
+            type: 'success',
+            message: '修改成功！'
+          })
+        }
+        this.close()
+      })
+    },
+    async getInfo() {
+      const result = await getRoleInfo({
+        id: this.targetInfo?.id
+      })
+      if (result.code === 0) {
+        this.formData = result.data
+      }
+    }
+  }
+}
+
+</script>
+<style>
+</style>
diff --git a/src/views/RoleManager/index.vue b/src/views/RoleManager/index.vue
new file mode 100644
index 0000000..6f23048
--- /dev/null
+++ b/src/views/RoleManager/index.vue
@@ -0,0 +1,181 @@
+<!--
+ * @Date: 2020-12-15 15:36:52
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-04-29 09:57:22
+ * @FilePath: \basic-admin\src\views\RoleManager\index.vue
+ * @Description:
+-->
+<template>
+  <div class="usermanager-container">
+    <head-form
+      :placeholder-name="placeholderName"
+      :key-name="keyName"
+      @getDataList="getList"
+      @add="addNew"
+    />
+    <base-table :table-config="tableProps" :table-data="list" :is-loading="listLoading" :page="listQuery.current" :limit="listQuery.size">
+      <method-btn
+        slot="handleBtn"
+        :width="trueWidth"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.size" @pagination="getList" />
+    <add-form :visible.sync="showDialog" @done="getList" />
+    <edit-form :visible.sync="showEditDialog" :target-info="{id: curEditId}" @done="getList" />
+    <menu-empower ref="empowerRef" :visible.sync="empowerDialog" @done="getList" />
+  </div>
+</template>
+
+<script>
+import basicData from '@/filters/basicData'
+import HeadForm from '@/components/basicData/HeadForm'
+import i18n from '@/lang'
+// edit here
+const tableBtn = [{
+  type: 'edit',
+  btnName: 'btn.edit'
+}, {
+  type: 'delete',
+  btnName: 'btn.delete'
+}, {
+  type: 'EmPower',
+  btnName: i18n.t('roleManage.roleEmPower')
+}]
+const tableProps = [{
+  prop: 'code',
+  label: i18n.t('roleManage.roleCode'),
+  align: 'center'
+}, {
+  prop: 'name',
+  label: i18n.t('roleManage.roleName'),
+  align: 'center'
+}, {
+  prop: 'enabled',
+  label: i18n.t('roleManage.status'),
+  align: 'center',
+  filter: basicData('enableState')
+},
+// {
+//   prop: 'category',
+//   label: i18n.t('roleManage.roleType'),
+//   align: 'center',
+//   filter: basicData('roleType')
+// },
+{
+  prop: 'remark',
+  label: i18n.t('roleManage.remark'),
+  align: 'center'
+}]
+import AddForm from './AddForm'
+import EditForm from './EditForm'
+import menuEmpower from './menuEmpower'
+import BaseTable from '@/components/BaseTable'
+// edit here
+import { getRoleList, deleteRole } from '@/api/role'
+
+import Pagination from '@/components/Pagination'
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+export default {
+  name: 'RoleManager',
+  components: { Pagination, BaseTable, MethodBtn, AddForm, EditForm, HeadForm, menuEmpower },
+  props: {},
+  data() {
+    return {
+      keyName: i18n.t('module.basicData.visual.keyword'),
+      placeholderName: this.$t('roleManage.roleName'),
+      tableBtn,
+      tableProps,
+      list: [],
+      total: 0,
+      trueWidth: 250,
+      listLoading: true,
+      showDialog: false,
+      curEditId: null,
+      showEditDialog: false,
+      empowerDialog: false,
+      listQuery: {
+        current: 1,
+        size: 10
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  mounted() {},
+  methods: {
+    handleClick(raw) {
+      switch (raw.type) {
+        case 'delete':
+          this.$confirm(i18n.t('deleteMsgBox.content'), i18n.t('deleteMsgBox.hint'), {
+            confirmButtonText: i18n.t('btn.confirm'),
+            cancelButtonText: i18n.t('btn.cancel'),
+            type: 'warning'
+          }).then(async() => {
+            // 走接口
+            const result = await deleteRole({
+              id: raw.data.id
+            })
+            if (result.code === 0) {
+              this.$message({
+                type: 'success',
+                message: i18n.t('deleteMsgBox.doneMsg')
+              })
+              this.getList()
+            }
+          })
+          break
+        case 'edit':
+          this.showEditDialog = true
+          this.curEditId = raw.data.id
+          break
+        case 'EmPower':
+          this.empowerRole(raw.data.id)
+          break
+      }
+    },
+    async getList(key) {
+      this.listLoading = true
+      this.listQuery.name = key
+      // edit here
+      const res = await getRoleList(this.listQuery)
+      if (res.code === 0) {
+        this.list = res.data
+        // this.total = res.data.total
+        this.listLoading = false
+      }
+    },
+    // 新增 / 修改
+    addNew() {
+      this.showDialog = true
+    },
+    empowerRole(id) {
+      this.empowerDialog = true
+      this.$nextTick(() => {
+        this.$refs.empowerRef.init(id)
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.usermanager-container {
+  padding: 20px;
+  .method-btn-area {
+    padding: 15px 30px;
+    margin: 10px 0 20px 0;
+    border: 1px solid #dfe6ec;
+  }
+}
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/RoleManager/menuEmpower.vue b/src/views/RoleManager/menuEmpower.vue
new file mode 100644
index 0000000..9c0af4c
--- /dev/null
+++ b/src/views/RoleManager/menuEmpower.vue
@@ -0,0 +1,153 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-04-06 19:33:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-04-29 09:37:18
+ * @Description:
+-->
+<template>
+  <el-dialog
+    :visible.sync="visible"
+  >
+    <el-card class="box-card">
+      <div slot="header" style="font-size:20px;text-align:center">
+        <span style="">{{ $t('roleManage.roleEmPower') }}</span>
+      </div>
+      <div style="max-height:500px;overflow:auto">
+        <el-tree
+          ref="menuListTree"
+          :data="menuList"
+          :props="{
+            label: language === 'en' ? 'enName' : 'name',
+            children: 'children'
+          }"
+          node-key="id"
+          show-checkbox
+          check-on-click-node
+          :default-expand-all="true"
+          :highlight-current="true"
+          :expand-on-click-node="false"
+        />
+      </div>
+    </el-card>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="RoleMenu()">{{ 'btn.confirm' | i18nFilter }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import { getMenuList, saveRoleMenu, listByRole } from '@/api/menu'
+export default {
+  data() {
+    return {
+      visible: false,
+      dataList: [],
+      menuList: [],
+      id: '',
+      listQuery: {
+        current: 1,
+        size: 550
+      }
+    }
+  },
+  computed: {
+    ...mapGetters(['language'])
+  },
+  methods: {
+    async init(id) {
+      this.id = id || ''
+      this.visible = true
+      this.dataList.splice(0, this.dataList.length)
+      const res = await getMenuList(this.listQuery)
+      if (res.code === 0) {
+        this.dataList = res.data
+      }
+      this.setMenuList()
+      const roleRes = await listByRole(id)
+      if (roleRes.code === 0) {
+        if (roleRes.data) {
+          const MenuId = []
+          roleRes.data.forEach(item => {
+            if (item.checked) {
+              MenuId.push(item.id)
+            }
+            if (item.children) {
+              MenuId.push(...this.appendMenuId(item.children))
+              this.setCheckedNodes(MenuId)
+            }
+          })
+        }
+      }
+    },
+    appendMenuId(menu) {
+      const idList = []
+      menu.forEach(item => {
+        if (item.checked) {
+          idList.push(item.id)
+        }
+        if (item.children) {
+          idList.push(...this.appendMenuId(item.children))
+        }
+      })
+      return idList
+    },
+    setCheckedNodes(menuId) {
+      this.$refs.menuListTree.setCheckedKeys(menuId)
+    },
+    setMenuList() {
+      this.menuList.splice(0, this.menuList.length)
+      this.dataList.forEach(item => {
+        if (item.parentId === '0') {
+          this.menuList.push(item)
+        } else {
+          this.append(item)
+        }
+      })
+    },
+    append(child) {
+      this.dataList.forEach(item => {
+        if (child.parentId === item.id) {
+          if (!item.children) {
+            this.$set(item, 'children', [])
+          }
+          item.children.push(child)
+        }
+      })
+    },
+    RoleMenu() {
+      const menuIdList = this.$refs.menuListTree.getCheckedNodes(false, true)
+      const menuId = []
+      menuIdList.forEach(item => {
+        menuId.push(item.id)
+      })
+      const data = {
+        'menuIds': menuId,
+        'roleId': this.id
+      }
+      saveRoleMenu(data).then(response => {
+        this.$message({
+          message: this.$t('module.basicData.visual.success'),
+          type: 'success',
+          duration: 1500,
+          onClose: () => {
+            this.visible = false
+            this.$emit('done')
+          }
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .el-tree >>> .el-tree-node__label {
+    font-size: 20px;
+  }
+  .el-tree >>> .el-tree-node__expand-icon {
+    font-size: 20px;
+  }
+</style>
diff --git a/src/views/UserPage/AddUserForm.vue b/src/views/UserPage/AddUserForm.vue
new file mode 100644
index 0000000..b7f197a
--- /dev/null
+++ b/src/views/UserPage/AddUserForm.vue
@@ -0,0 +1,170 @@
+<!--
+ * @Date: 2020-12-30 10:05:35
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-05-27 10:48:24
+ * @FilePath: \basic-admin\src\views\usermanager\AddUserForm.vue
+ * @Description: 添加用户的弹窗
+-->
+<template>
+  <div>
+    <el-dialog v-bind="$attrs" :title="'formItem.user.add' | i18nFilter" v-on="$listeners" @open="onOpen" @close="onClose">
+      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="110px">
+        <el-form-item :label="$t('userManage.mobile')" prop="mobile">
+          <el-input
+            v-model="formData.mobile"
+            :placeholder="['placeholder.input', $t('userManage.mobile')] | i18nFilterForm"
+            :maxlength="11"
+            show-word-limit
+            clearable
+            prefix-icon="el-icon-mobile"
+            :style="{width: '100%'}"
+          />
+        </el-form-item>
+        <el-form-item :label="$t('userManage.userName')" prop="name">
+          <el-input v-model="formData.name" :placeholder="['placeholder.input', $t('userManage.userName')] | i18nFilterForm" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('userManage.pwd')" prop="password">
+          <el-input v-model="formData.password" :placeholder="['placeholder.input', $t('userManage.pwd')] | i18nFilterForm" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('userManage.org')" prop="orgId">
+          <el-select v-model="formData.orgId" :placeholder="['placeholder.select', $t('userManage.org')] | i18nFilterForm" filterable clearable :style="{width: '100%'}">
+            <el-option
+              v-for="(item, index) in orgList"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+            />
+            <!-- :disabled="item.disabled" -->
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('userManage.code')" prop="code">
+          <el-input v-model="formData.code" :placeholder="['placeholder.input', $t('userManage.code')] | i18nFilterForm" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('userManage.email')" prop="email">
+          <el-input v-model="formData.email" :placeholder="['placeholder.input', $t('userManage.email')] | i18nFilterForm" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <!-- <el-form-item :label="$t('userManage.birthday')" prop="birthday">
+          <el-date-picker
+            v-model="formData.birthday"
+            type="date"
+            value-format="yyyy-MM-dd"
+            :placeholder="['placeholder.select', $t('userManage.birthday')] | i18nFilterForm"
+            :style="{width: '100%'}"
+          />
+        </el-form-item> -->
+        <!-- <el-form-item :label="$t('userManage.sex')" prop="sex">
+          <el-select v-model="formData.sex" :placeholder="['placeholder.select', $t('userManage.sex')] | i18nFilterForm" clearable :style="{width: '100%'}">
+            <el-option :value="1" label="男" />
+            <el-option :value="2" label="女" />
+          </el-select>
+        </el-form-item> -->
+        <el-form-item :label="$t('userManage.remark')" prop="remark">
+          <el-input v-model="formData.remark" :placeholder="['placeholder.input', $t('userManage.remark')] | i18nFilterForm" clearable :style="{width: '100%'}" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="close">{{ 'btn.cancel' | i18nFilter }}</el-button>
+        <el-button type="primary" @click="handelConfirm">{{ 'btn.confirm' | i18nFilter }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { addUser } from '@/api/user'
+import { getOrgList } from '@/api/org'
+export default {
+  components: {},
+  inheritAttrs: false,
+  data() {
+    return {
+      formData: {
+        mobile: undefined,
+        name: undefined,
+        email: undefined,
+        orgId: undefined,
+        password: undefined,
+        code: undefined,
+        birthday: undefined,
+        sex: undefined,
+        remark: undefined
+      },
+      rules: {
+        mobile: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('userManage.mobile')]),
+          trigger: 'blur'
+        }, {
+          pattern: /^1(3|4|5|7|8|9)\d{9}$/,
+          message: this.$i18nForm(['placeholder.formaterror', this.$t('userManage.mobile')]),
+          trigger: 'blur'
+        }],
+        name: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('userManage.userName')]),
+          trigger: 'blur'
+        }],
+        code: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('userManage.code')]),
+          trigger: 'blur'
+        }],
+        orgId: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('userManage.org')]),
+          trigger: 'change'
+        }],
+        password: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('userManage.pwd')]),
+          trigger: 'blur'
+        }]
+      },
+      orgList: [],
+      listQuery: {
+        current: 1,
+        size: 500
+      }
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {
+    this.getList()
+  },
+  mounted() {},
+  methods: {
+    async getList() {
+      // edit here
+      const res = await getOrgList(this.listQuery)
+      if (res.code === 0) {
+        this.orgList = res.data.records
+      }
+    },
+    onOpen() {},
+    onClose() {
+      this.$refs['elForm'].resetFields()
+    },
+    close() {
+      this.$emit('update:visible', false)
+    },
+    handelConfirm() {
+      this.$refs['elForm'].validate(async valid => {
+        if (!valid) return
+        // 这里写添加接口处理
+        const result = await addUser(this.formData)
+        if (result.code === 0) {
+          this.$message({
+            type: 'success',
+            message: '添加成功！'
+          })
+          this.$emit('refreshDataList')
+          this.close()
+        }
+      })
+    }
+  }
+}
+
+</script>
+<style>
+</style>
diff --git a/src/views/UserPage/AssignRole.vue b/src/views/UserPage/AssignRole.vue
new file mode 100644
index 0000000..0ce50cf
--- /dev/null
+++ b/src/views/UserPage/AssignRole.vue
@@ -0,0 +1,131 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-04-25 09:08:51
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-04-25 09:47:55
+ * @Description:
+-->
+
+<template>
+  <el-dialog
+    :title="$t('userManage.AssignRole')"
+    v-bind="$attrs"
+    v-on="$listeners"
+    @open="onOpen"
+    @close="onClose"
+  >
+    <el-row :gutter="10">
+      <el-form
+        ref="dataForm"
+        :model="dataForm"
+        :rules="rules"
+        size="medium"
+        label-width="110px"
+        label-position="left"
+      >
+        <el-col :span="10">
+          <el-form-item :label="$t('userManage.AssignRole')" prop="roleId">
+            <el-select v-model="dataForm.roleId" multiple clearable style="width: 400px">
+              <el-option
+                v-for="(item, index) in roleList"
+                :key="index"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-form>
+    </el-row>
+    <div slot="footer">
+      <el-button @click="close">{{ 'btn.cancel' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="handelConfirm()">{{ 'btn.confirm' | i18nFilter }}</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import { getRoleList, saveUserRole, listByUser } from '@/api/role'
+export default {
+  components: {},
+  props: {
+    userId: {
+      type: String,
+      default: () => {
+        return ''
+      }
+    }
+  },
+  data() {
+    return {
+      inheritAttrs: false,
+      dataForm: {
+        roleId: []
+      },
+      rules: {
+        roleId: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('userManage.AssignRole')]),
+          trigger: 'change'
+        }]
+      },
+      roleList: [],
+      listQuery: {
+        current: 1,
+        size: 500
+      }
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {
+    onOpen() {
+      this.getInfo()
+    },
+    onClose() {
+      this.$refs['dataForm'].resetFields()
+    },
+    close() {
+      this.$emit('update:visible', false)
+    },
+    handelConfirm() {
+      this.$refs['dataForm'].validate(valid => {
+        if (valid) {
+          const data = {
+            'roleIds': this.dataForm.roleId,
+            'userId': this.userId
+          }
+          saveUserRole(data).then(response => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.close()
+                this.$emit('refreshDataList')
+              }
+            })
+          })
+        }
+      })
+    },
+    async getInfo() {
+      const result = await getRoleList(this.listQuery)
+      if (result.code === 0) {
+        this.roleList = result.data
+      }
+      const roleRes = await listByUser(this.userId)
+      if (roleRes.code === 0) {
+        if (roleRes.data) {
+          roleRes.data.forEach(item => {
+            if (item.checked) {
+              this.dataForm.roleId.push(item.id)
+            }
+          })
+        }
+      }
+    }
+  }
+}
+</script>
diff --git a/src/views/UserPage/EditUser.vue b/src/views/UserPage/EditUser.vue
new file mode 100644
index 0000000..3d306f8
--- /dev/null
+++ b/src/views/UserPage/EditUser.vue
@@ -0,0 +1,185 @@
+<!--
+ * @Date: 2020-12-30 16:28:00
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-26 14:34:38
+ * @FilePath: \basic-admin\src\views\UserManager\EditUser.vue
+ * @Description: 编辑用户的弹窗
+-->
+<template>
+  <div>
+    <el-dialog v-bind="$attrs" :title="'formItem.user.edit' | i18nFilter" v-on="$listeners" @open="onOpen" @close="onClose">
+      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="160px">
+        <el-form-item :label="$t('userManage.userName')" prop="name">
+          <el-input v-model="formData.name" :placeholder="['placeholder.input', $t('userManage.userName')] | i18nFilterForm" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('userManage.email')" prop="email">
+          <el-input v-model="formData.email" :placeholder="['placeholder.input', $t('userManage.email')] | i18nFilterForm" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('userManage.org')" prop="orgId">
+          <el-select v-model="formData.orgId" :placeholder="['placeholder.select', $t('userManage.org')] | i18nFilterForm" clearable :style="{width: '100%'}">
+            <el-option
+              v-for="(item, index) in orgIdOptions"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('userManage.userstartstop')" prop="enabled" required>
+          <el-switch v-model="formData.enabled" :active-value="1" :inactive-value="0" @change="enableStateChange" />
+        </el-form-item>
+        <el-form-item :label="$t('userManage.resetPwd')">
+          <el-button type="primary" size="medium" @click="resetPW"> {{ 'btn.reset' | i18nFilter }} </el-button>
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="close">{{ 'btn.cancel' | i18nFilter }}</el-button>
+        <el-button type="primary" @click="handelConfirm">{{ 'btn.confirm' | i18nFilter }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { editUser, resetUserPW, enableUser, getUserDetail } from '@/api/user'
+import { getOrgList } from '@/api/org'
+export default {
+  components: {},
+  inheritAttrs: false,
+  props: {
+    targetInfo: {
+      type: Object,
+      default: () => {
+        return {
+          id: 1
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      formData: {
+        name: undefined,
+        email: undefined,
+        orgId: undefined,
+        enabled: 1
+      },
+      rules: {
+        name: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('userManage.userName')]),
+          trigger: 'blur'
+        }],
+        email: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('userManage.email')]),
+          trigger: 'blur'
+        }],
+        orgId: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.select', this.$t('userManage.org')]),
+          trigger: 'change'
+        }]
+      },
+      orgIdOptions: [],
+      listQuery: {
+        current: 1,
+        size: 500
+      }
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {
+    this.getList()
+  },
+  mounted() {},
+  methods: {
+    async getList() {
+      // edit here
+      const res = await getOrgList(this.listQuery)
+      if (res.code === 0) {
+        this.orgIdOptions = res.data.records
+      }
+    },
+    onOpen() {
+      this.getUserInfo()
+    },
+    onClose() {
+      this.$refs['elForm'].resetFields()
+      this.$emit('refreshDataList')
+    },
+    close() {
+      this.$emit('update:visible', false)
+    },
+    handelConfirm() {
+      this.$refs['elForm'].validate(async valid => {
+        if (!valid) return
+        const result = await editUser(Object.assign(this.formData, {
+          id: this.targetInfo?.id
+        }))
+        if (result.code === 0) {
+          this.$message({
+            type: 'success',
+            message: '修改成功！',
+            onClose: () => {
+              this.$emit('refreshDataList')
+            }
+          })
+        }
+        this.close()
+      })
+    },
+    async enableStateChange(val) {
+      const result = await enableUser({
+        id: this.targetInfo?.id,
+        enabled: val
+      })
+      if (result.code === 0) {
+        this.$message({
+          type: 'success',
+          message: '修改状态成功！',
+          onClose: () => {
+            this.$emit('refreshDataList')
+          }
+        })
+      }
+    },
+    resetPW() {
+      this.$prompt('请输入新密码', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消'
+      }).then(async({ value }) => {
+        // console.log(value)
+        const result = await resetUserPW({
+          id: this.targetInfo?.id,
+          password: value
+        })
+        if (result.code === 0) {
+          this.$message({
+            type: 'success',
+            message: '重置密码成功！'
+          })
+        }
+      })
+    },
+    async getUserInfo() {
+      const result = await getUserDetail({
+        id: this.targetInfo.id
+      })
+      if (result.code === 0) {
+        // console.log(result)
+        const { name, orgId, email, enabled } = result.data
+        this.formData = {
+          name,
+          orgId,
+          email,
+          enabled
+        }
+      }
+    }
+  }
+}
+
+</script>
+<style>
+</style>
diff --git a/src/views/UserPage/index.vue b/src/views/UserPage/index.vue
new file mode 100644
index 0000000..e624dc4
--- /dev/null
+++ b/src/views/UserPage/index.vue
@@ -0,0 +1,185 @@
+<!--
+ * @Date: 2020-12-15 15:36:52
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-04-25 09:05:48
+ * @FilePath: \basic-admin\src\views\usermanager\index.vue
+ * @Description:
+-->
+<template>
+  <div class="usermanager-container">
+    <div class="method-btn-area">
+      <el-button type="primary" @click="showDialog = true">{{ 'btn.add' | i18nFilter }}</el-button>
+    </div>
+    <base-table :table-config="tableProps" :table-data="list" :is-loading="listLoading" :page="listQuery.current" :limit="listQuery.size">
+      <method-btn slot="handleBtn" :method-list="tableBtn" @clickBtn="handleClick" />
+    </base-table>
+    <pagination :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.size" @pagination="getList" />
+    <add-user-form :visible.sync="showDialog" :org-list="orgList" @refreshDataList="getList" />
+    <edit-user-form :visible.sync="showEditDialog" :org-list="orgList" :target-info="{id: curEditId}" @refreshDataList="getList" />
+  </div>
+</template>
+
+<script>
+import dataDict from '@/filters/DataDict'
+import i18n from '@/lang'
+// edit here
+const tableBtn = [{
+  type: 'edit',
+  btnName: 'btn.edit'
+}, {
+  type: 'delete',
+  btnName: 'btn.delete'
+}]
+// birthday
+// orgId
+// sex
+// code
+// remark
+const tableProps = [{
+  prop: 'name',
+  label: i18n.t('userManage.userName'),
+  align: 'center'
+}, {
+  prop: 'email',
+  label: i18n.t('userManage.email'),
+  align: 'center'
+}, {
+  prop: 'mobile',
+  label: i18n.t('userManage.mobile'),
+  align: 'center'
+},
+// {
+//   prop: 'birthday',
+//   label: i18n.t('userManage.birthday'),
+//   align: 'center'
+// },
+{
+  prop: 'orgName',
+  label: i18n.t('userManage.orgName'),
+  align: 'center'
+},
+// {
+//   prop: 'sex',
+//   label: i18n.t('userManage.sex'),
+//   align: 'center',
+//   filter: dataDict('sex')
+// },
+{
+  prop: 'code',
+  label: i18n.t('userManage.code'),
+  align: 'center'
+}, {
+  prop: 'enabled',
+  label: i18n.t('userManage.status'),
+  align: 'center',
+  filter: dataDict('enableState')
+}, {
+  prop: 'remark',
+  label: i18n.t('userManage.remark'),
+  align: 'center'
+}]
+import AddUserForm from './AddUserForm'
+import EditUserForm from './EditUser'
+import BaseTable from '@/components/BaseTable'
+// edit here
+import { getUserList, delUser } from '@/api/user'
+
+import Pagination from '@/components/Pagination'
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import { getOrgList } from '@/api/org'
+export default {
+  name: 'UserManager',
+  components: { Pagination, BaseTable, MethodBtn, AddUserForm, EditUserForm },
+  props: {},
+  data() {
+    return {
+      tableBtn,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      showDialog: false,
+      curEditId: null,
+      showEditDialog: false,
+      listQuery: {
+        current: 1,
+        size: 10
+      },
+      orgList: []
+    }
+  },
+  created() {
+    this.getList()
+    this.getOrgList()
+  },
+  mounted() {},
+  methods: {
+    handleClick(raw) {
+      console.log(raw)
+      switch (raw.type) {
+        case 'delete':
+          this.$confirm(i18n.t('deleteMsgBox.content'), i18n.t('deleteMsgBox.hint'), {
+            confirmButtonText: i18n.t('btn.confirm'),
+            cancelButtonText: i18n.t('btn.cancel'),
+            type: 'warning'
+          }).then(async() => {
+            // 走接口
+            const result = await delUser({
+              id: raw.data.id
+            })
+            if (result.code === 0) {
+              this.$message({
+                type: 'success',
+                message: i18n.t('deleteMsgBox.doneMsg')
+              })
+            }
+          })
+          break
+        case 'edit':
+          this.showEditDialog = true
+          this.curEditId = raw.data.id
+          break
+      }
+    },
+    async getList() {
+      this.listLoading = true
+      console.log(this.listQuery)
+      // edit here
+      const res = await getUserList(this.listQuery)
+      if (res.code === 0) {
+        this.list = res.data.records
+        this.total = res.data.total
+        this.listLoading = false
+      }
+    },
+    async getOrgList() {
+      const res = await getOrgList({
+        current: 1,
+        size: 1000
+      })
+      if (res.code === 0) {
+        this.orgList = res.data.records
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.usermanager-container {
+  padding: 20px;
+  .method-btn-area {
+    padding: 15px 30px;
+    margin: 10px 0 20px 0;
+    border: 1px solid #dfe6ec;
+  }
+}
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/UserPage/usermanage.vue b/src/views/UserPage/usermanage.vue
new file mode 100644
index 0000000..c0b901e
--- /dev/null
+++ b/src/views/UserPage/usermanage.vue
@@ -0,0 +1,278 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-04-06 19:33:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-07-09 09:42:54
+ * @Description:
+-->
+<template>
+  <el-container style="margin:30px">
+    <el-aside>
+      <side-tree v-if="menuList.length>0" :menu-list="menuList" @getOrganization="getOrganization" />
+    </el-aside>
+    <el-main style="border:2px solid #E4E4E4;border-radius:10px;margin-left:10px">
+      <el-form
+        ref="dataForm"
+        :model="dataForm"
+        :inline="true"
+        size="medium"
+        label-width="100px"
+        label-position="left"
+      >
+        <el-form-item label-width="60px" :label="$t('userManage.orgName')+'：'">
+          <span style="margin: 0 5px;color:#1890FF">{{ dataForm.orgName }}</span>
+        </el-form-item>
+        <el-form-item :label="$t('userManage.userName')+'：'" prop="name">
+          <el-input v-model="dataForm.name" :placeholder="['placeholder.input', $t('userManage.userName')] | i18nFilterForm" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <!-- <el-form-item :label="$t('roleManage.roleName')+'：'" prop="roleName">
+          <el-select v-model="dataForm.roleName" :placeholder="['placeholder.select', $t('roleManage.roleName')] | i18nFilterForm" clearable :style="{width: '100%'}">
+            <el-option
+              v-for="(item, index) in roleNameOptions"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item> -->
+        <!-- <el-form-item :label="$t('userManage.sex')" prop="sex">
+          <el-select v-model="dataForm.sex" :placeholder="['placeholder.select', $t('userManage.sex')] | i18nFilterForm" clearable :style="{width: '100%'}">
+            <el-option
+              v-for="(item, index) in sexOptions"
+              :key="index"
+              :label="item.label"
+              :value="item.value"
+              :disabled="item.disabled"
+            />
+          </el-select>
+        </el-form-item> -->
+        <el-form-item>
+          <el-button type="primary" @click="getList()">{{ 'btn.search' | i18nFilter }}</el-button>
+          <el-button type="primary" @click="showDialog = true">{{ 'btn.add' | i18nFilter }}</el-button>
+        </el-form-item>
+      </el-form>
+      <base-table :table-config="tableProps" :table-data="list" :is-loading="listLoading" :page="dataForm.current" :limit="dataForm.size">
+        <method-btn
+          slot="handleBtn"
+          :method-list="tableBtn"
+          :width="trueWidth"
+          @clickBtn="handleClick"
+        />
+      </base-table>
+      <pagination v-show="total > dataForm.size" :total="total" :page.sync="dataForm.current" :limit.sync="dataForm.size" @pagination="getList" />
+
+      <add-user-form :visible.sync="showDialog" @refreshDataList="getList" />
+      <edit-user-form :visible.sync="showEditDialog" :target-info="{id: curEditId}" @refreshDataList="getList" />
+      <assign-Role :visible.sync="AssignRoleDialog" :user-id="userId" @refreshDataList="getList" />
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import sideTree from '../system-manage/sideTree'
+import { getOrgList } from '@/api/org'
+import AddUserForm from './AddUserForm'
+import EditUserForm from './EditUser'
+import AssignRole from './AssignRole'
+import BaseTable from '@/components/BaseTable'
+// edit here
+import { getUserList, delUser } from '@/api/user'
+import { getRoleList } from '@/api/role'
+
+import Pagination from '@/components/Pagination'
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import dataDict from '@/filters/DataDict'
+import i18n from '@/lang'
+// edit here
+const tableBtn = [{
+  type: 'edit',
+  btnName: 'btn.edit'
+}, {
+  type: 'AssignRole',
+  btnName: i18n.t('userManage.AssignRole')
+}, {
+  type: 'delete',
+  btnName: 'btn.delete'
+}]
+// birthday
+// orgId
+// sex
+// code
+// remark
+const tableProps = [{
+  prop: 'name',
+  label: i18n.t('userManage.userName'),
+  align: 'center'
+}, {
+  prop: 'email',
+  label: i18n.t('userManage.email'),
+  align: 'center'
+}, {
+  prop: 'mobile',
+  label: i18n.t('userManage.mobile'),
+  align: 'center'
+},
+// {
+//   prop: 'birthday',
+//   label: i18n.t('userManage.birthday'),
+//   align: 'center'
+// },
+{
+  prop: 'orgName',
+  label: i18n.t('userManage.orgName'),
+  align: 'center'
+},
+{
+  prop: 'roleName',
+  label: i18n.t('roleManage.roleName'),
+  align: 'center'
+},
+// {
+//   prop: 'sex',
+//   label: i18n.t('userManage.sex'),
+//   align: 'center',
+//   filter: dataDict('sex')
+// },
+{
+  prop: 'code',
+  label: i18n.t('userManage.code'),
+  align: 'center'
+}, {
+  prop: 'enabled',
+  label: i18n.t('userManage.status'),
+  align: 'center',
+  filter: dataDict('enableState')
+}, {
+  prop: 'remark',
+  label: i18n.t('userManage.remark'),
+  align: 'center'
+}]
+
+const sexOptions = [{
+  'label': i18n.t('basicDataFilter.sex.all'),
+  'value': ''
+}, {
+  'label': i18n.t('basicDataFilter.sex.man'),
+  'value': 1
+}, {
+  'label': i18n.t('basicDataFilter.sex.woman'),
+  'value': 2
+}]
+
+export default {
+  components: { sideTree, Pagination, BaseTable, MethodBtn, AddUserForm, EditUserForm, AssignRole },
+  data() {
+    return {
+      menuList: [],
+      tableBtn,
+      tableProps,
+      list: [],
+      total: 0,
+      trueWidth: 250,
+      listLoading: true,
+      showDialog: false,
+      curEditId: null,
+      userId: '',
+      showEditDialog: false,
+      AssignRoleDialog: false,
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      },
+      roleNameOptions: [],
+      dataForm: {
+        name: '',
+        sex: '',
+        roleName: '',
+        orgId: '',
+        orgName: '',
+        current: 1,
+        size: 10
+      },
+      sexOptions
+    }
+  },
+  created() {
+    this.getOrgList()
+    this.getList()
+  },
+  methods: {
+    async getOrgList() {
+      // edit here
+      const params = {
+        current: 1,
+        size: 500
+      }
+      this.roleNameOptions.splice(0, this.roleNameOptions.length)
+      const res = await getRoleList(params)
+      if (res.code === 0) {
+        this.roleNameOptions = res.data
+      }
+      this.menuList.splice(0, this.menuList.length)
+      const res1 = await getOrgList(params)
+      if (res1.code === 0) {
+        this.menuList = res1.data.records
+      }
+    },
+    getOrganization(data) {
+      this.dataForm.orgId = data.id
+      this.dataForm.orgName = data.name
+      this.getList()
+    },
+    handleClick(raw) {
+      switch (raw.type) {
+        case 'delete':
+          this.$confirm(i18n.t('deleteMsgBox.content'), i18n.t('deleteMsgBox.hint'), {
+            confirmButtonText: i18n.t('btn.confirm'),
+            cancelButtonText: i18n.t('btn.cancel'),
+            type: 'warning'
+          }).then(async() => {
+            // 走接口
+            const result = await delUser({
+              id: raw.data.id
+            })
+            if (result.code === 0) {
+              this.$message({
+                type: 'success',
+                message: i18n.t('deleteMsgBox.doneMsg')
+              })
+              this.getList()
+            }
+          })
+          break
+        case 'edit':
+          this.showEditDialog = true
+          this.curEditId = raw.data.id
+          break
+        case 'AssignRole':
+          this.AssignRoleDialog = true
+          this.userId = raw.data.id
+          break
+      }
+    },
+    async getList() {
+      this.listLoading = true
+      // edit here
+      const res = await getUserList(this.dataForm)
+      if (res.code === 0) {
+        this.list = res.data.records
+        this.list.forEach(item => {
+          item.roleName = item.stringList.toString()
+        })
+        this.total = res.data.total
+        this.listLoading = false
+      }
+    }
+  }
+}
+</script>
+<style scoped>
+.el-container >>> .el-aside{
+  border:2px solid #E4E4E4;
+  border-radius:10px;
+  background-color: white;
+  min-height:550px;
+  width:30%;
+  padding-top:20px
+}
+</style>
diff --git a/src/views/art/components/Process-add.vue b/src/views/art/components/Process-add.vue
new file mode 100644
index 0000000..ee42229
--- /dev/null
+++ b/src/views/art/components/Process-add.vue
@@ -0,0 +1,144 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-26 14:39:36
+ * @Description:
+-->
+<template>
+  <el-dialog
+    :title="!dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter"
+    :visible.sync="visible"
+  >
+    <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="190px" @keyup.enter.native="dataFormSubmit()">
+      <el-form-item :label="$t('module.art.processList.processName')" prop="name">
+        <el-input v-model="dataForm.name" :placeholder="$i18nForm(['placeholder.input', $t('module.art.processList.processName')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.art.processList.processEq')" prop="equipmentIds">
+        <el-select v-model="dataForm.equipmentIds" clearable filterable multiple>
+          <el-option v-for="item in eqList" :key="item.id" :value="item.id" :label="item.name" />
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="$t('module.art.processList.type')" prop="type">
+        <el-select v-model="dataForm.type" clearable filterable>
+          <el-option v-for="item in typeList" :key="item.id" :value="item.id" :label="item.name" />
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="$t('module.art.processList.description')" prop="address">
+        <el-input v-model="dataForm.description" :placeholder="$i18nForm(['placeholder.input', $t('module.art.processList.description')])" clearable />
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { getInfo, add, update } from '@/api/art-manage/process'
+import i18n from '@/lang'
+
+const typeList = [
+  { id: 0, name: i18n.t('module.art.processList.equipment') },
+  { id: 1, name: i18n.t('module.art.processList.buffer') }
+]
+
+export default {
+  props: {
+    eqList: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      dataForm: {
+        id: 0,
+        name: '',
+        type: null,
+        equipmentIds: [],
+        description: ''
+      },
+      dataRule: {
+        name: [
+          {
+            required: true,
+            message: this.$i18nForm(['placeholder.input', this.$t('module.art.processList.processName')]),
+            trigger: 'blur' }
+        ],
+        equipmentIds: [
+          {
+            required: true,
+            message: this.$i18nForm(['placeholder.select', this.$t('module.art.processList.processEq')]),
+            trigger: 'blur' }
+        ]
+      },
+      typeList
+    }
+  },
+  methods: {
+    init(id) {
+      this.dataForm.id = id || null
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          getInfo({ id: this.dataForm.id }).then(res => {
+            this.dataForm.id = res.data.id
+            this.dataForm.name = res.data.name
+            this.dataForm.type = res.data.type
+            this.dataForm.description = res.data.description
+            this.dataForm.equipmentIds = res.data.equipments.map(item => {
+              return item.id
+            })
+          })
+        }
+      })
+    },
+    // 表单提交
+    dataFormSubmit() {
+      console.log(!this.dataForm.id)
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          const data = {
+            'name': this.dataForm.name,
+            'type': this.dataForm.type,
+            'equipmentIds': this.dataForm.equipmentIds,
+            'description': this.dataForm.description,
+            'id': this.dataForm.id
+          }
+          if (this.dataForm.id) {
+            update(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          } else {
+            add(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          }
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/art/components/add-dialog.vue b/src/views/art/components/add-dialog.vue
new file mode 100644
index 0000000..4104455
--- /dev/null
+++ b/src/views/art/components/add-dialog.vue
@@ -0,0 +1,189 @@
+<template>
+  <el-dialog
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    width="25%"
+    :visible="visible"
+    :destroy-on-close="true"
+    :before-close="() => $emit('on-close')"
+    :title="id ? 'btn.edit' : 'btn.add' | i18nFilter"
+    :class="$style.dialog"
+  >
+    <el-form ref="obj" :model="obj" :rules="rules" label-width="140px">
+      <el-form-item :label="$t('module.art.artName')" prop="name">
+        <el-input v-model="obj.name" />
+      </el-form-item>
+      <el-form-item :label="$t('module.art.externalCode')" prop="externalCode">
+        <el-input v-model="obj.code" />
+      </el-form-item>
+      <!-- <el-form-item :label="$t('module.art.substrateType')" prop="substrateId">
+        <el-select
+          v-model="obj.substrateId"
+          :class="$style.select"
+          filterable
+          clearable
+          :placeholder="'placeholder.select' | i18nFilter"
+        >
+          <el-option
+            v-for="item in substrateList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item> -->
+      <el-form-item v-if="false" :label="$t('module.art.artBOM')" prop="bomId">
+        <el-select
+          v-model="obj.bomId"
+          :class="$style.select"
+          filterable
+          clearable
+          :placeholder="'placeholder.select' | i18nFilter"
+        >
+          <el-option
+            v-for="item in bomList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="$t('module.art.description')" prop="description">
+        <el-input v-model="obj.description" />
+      </el-form-item>
+      <el-form-item :label="$t('module.art.remark')" prop="remark">
+        <el-input v-model="obj.remark" />
+      </el-form-item>
+      <SubmitBar
+        @on-cancle="$emit('on-close')"
+        @on-submit="handleSubmit('obj')"
+      />
+    </el-form>
+  </el-dialog>
+</template>
+
+<script>
+import { add, update, getInfo, listSubstrate, listBom, getCode } from '@/api/art-manage/art.js'
+import SubmitBar from '@/views/art/components/submit-bar'
+
+export default {
+  name: 'AddDialog',
+  components: {
+    SubmitBar
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    id: {
+      type: String,
+      default: null
+    }
+  },
+  data() {
+    return {
+      obj: {
+        name: '',
+        code: '',
+        remark: '',
+        description: '',
+        substrateId: '',
+        bomId: ''
+      },
+      substrateList: [],
+      bomList: [],
+      rules: {
+        name: [
+          { required: true, message: this.$t('module.art.artName') + this.$t('module.art.notNull'), trigger: 'blur' },
+          { min: 3, message: this.$t('module.art.lengthRule'), trigger: 'blur' }
+        ],
+        // externalCode: [
+        //   { required: true, message: this.$t('module.art.externalCode') + this.$t('module.art.notNull'), trigger: 'blur' },
+        //   { min: 3, message: this.$t('module.art.lengthRule'), trigger: 'blur' }
+        // ],
+        // substrateId: [
+        //   {
+        //     required: true,
+        //     message: this.$t('module.art.selectNotNull') + this.$t('module.art.substrateType'),
+        //     trigger: 'change'
+        //   }
+        // ],
+        bomId: [
+          {
+            required: true,
+            message: this.$t('module.art.selectNotNull') + this.$t('module.art.artBOM'),
+            trigger: 'change'
+          }
+        ]
+      }
+    }
+  },
+  watch: {
+    id(val) {
+      this.init()
+    }
+  },
+  created() {
+    this.init()
+  },
+  methods: {
+    init: async function() {
+      if (this.substrateList.length === 0) {
+        const substrateRes = await listSubstrate()
+        this.substrateList = substrateRes.data
+      }
+      if (this.bomList.length === 0) {
+        const bomRes = await listBom()
+        this.bomList = bomRes.data
+      }
+      if (this.id) {
+        const res = await getInfo({ id: this.id })
+        this.obj = res.data
+      } else {
+        const result = await getCode()
+        this.obj = {
+          name: '',
+          code: result.data,
+          remark: '',
+          description: '',
+          substrateId: '',
+          bomId: ''
+        }
+      }
+    },
+    handleSubmit(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (!valid) {
+          return false
+        }
+        console.log(this.obj)
+        if (this.id) {
+          update(this.obj).then(res => {
+            this.$emit('on-success')
+          })
+        } else {
+          add(this.obj).then(res => {
+            this.$emit('on-success')
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" module>
+.dialog {
+  .input {
+    display: flex;
+    margin: 8px 16px 8px 4px;
+    align-items: center;
+    .select {
+      width: 100%;
+    }
+  }
+  .select {
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/views/art/components/demo.vue b/src/views/art/components/demo.vue
new file mode 100644
index 0000000..8ee928a
--- /dev/null
+++ b/src/views/art/components/demo.vue
@@ -0,0 +1,39 @@
+<template>
+  <div :class="$style.container">demo</div>
+</template>
+
+<script>
+
+export default {
+  name: 'Demo',
+  components: {
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+    }
+  },
+  methods: {
+  }
+}
+</script>
+<style lang="scss" module>
+.container {
+  .input {
+    display: flex;
+    margin: 8px 16px 8px 4px;
+    align-items: center;
+    .select {
+      width: 100%;
+    }
+  }
+  .select {
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/views/art/components/process-chart.vue b/src/views/art/components/process-chart.vue
new file mode 100644
index 0000000..a99e6d4
--- /dev/null
+++ b/src/views/art/components/process-chart.vue
@@ -0,0 +1,40 @@
+<template>
+  <VueScrollbar :class="$style.c" @click="$emit('on-detail')">
+    <div :class="$style.chart">
+      sssss
+    </div>
+  </VueScrollbar>
+</template>
+
+<script>
+import VueScrollbar from 'vue-perfect-scrollbar'
+export default {
+  name: 'ProcessChart',
+  components: { VueScrollbar },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {}
+  },
+  mounted() {
+  },
+  methods: {}
+}
+</script>
+<style lang="scss" module>
+.c {
+  margin: 16px;
+  height: 300px;
+  width: 10%;
+  position: relative;
+  .chart {
+    position: relative;
+    height: 400px;
+    width: 120%;
+  }
+}
+</style>
diff --git a/src/views/art/components/process-drawer.vue b/src/views/art/components/process-drawer.vue
new file mode 100644
index 0000000..2e1a877
--- /dev/null
+++ b/src/views/art/components/process-drawer.vue
@@ -0,0 +1,74 @@
+<template>
+  <el-drawer
+    title="工艺流程图"
+    size="85%"
+    :append-to-body="true"
+    :visible.sync="visible"
+    :wrapper-closable="false"
+    :before-close="() => $emit('on-close')"
+  >
+    <ProcessEditBar :is-edit="isEdit" @on-edit="isEdit=true" @on-cancel="isEdit=false" @on-submit="handleSubmit()" />
+    <ProcessChart v-show="!isEdit" @on-detail="handleDetail" />
+    <ProcessTable v-if="isEdit" :process-flow-id="processFlowId" @on-detail="handleDetail" />
+    <el-drawer
+      title="节点详情"
+      size="20%"
+      :append-to-body="true"
+      :before-close="()=>innerDrawer=false"
+      :visible.sync="innerDrawer"
+    >
+      <ProcessNodePanel />
+    </el-drawer>
+  </el-drawer>
+</template>
+
+<script>
+import ProcessChart from '@/views/art/components/process-chart'
+import ProcessTable from '@/views/art/components/process-table'
+import ProcessNodePanel from '@/views/art/components/process-node-panel'
+import ProcessEditBar from '@/views/art/components/process-edit-bar'
+export default {
+  name: 'ProcessDrawer',
+  components: { ProcessChart, ProcessTable, ProcessNodePanel, ProcessEditBar },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    processFlowId: {
+      type: String,
+      default: null
+    }
+  },
+  data() {
+    return {
+      innerDrawer: false,
+      isEdit: false
+    }
+  },
+  methods: {
+    handleDetail() {
+      this.innerDrawer = true
+    },
+    handleSubmit() {
+      console.log('保存成功')
+      this.isEdit = false
+    }
+  }
+}
+</script>
+<style lang="scss" module>
+.dialog {
+  .input {
+    display: flex;
+    margin: 8px 16px 8px 4px;
+    align-items: center;
+    .select {
+      width: 100%;
+    }
+  }
+  .select {
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/views/art/components/process-edit-bar.vue b/src/views/art/components/process-edit-bar.vue
new file mode 100644
index 0000000..98d0d0e
--- /dev/null
+++ b/src/views/art/components/process-edit-bar.vue
@@ -0,0 +1,62 @@
+<!--
+ * @Author: gtz
+ * @Date: 2021-01-27 10:07:42
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-02-01 11:28:16
+ * @Description: file content
+-->
+<template>
+  <div :class="$style.container">
+    <el-button
+      v-show="!isEdit"
+      type="primary"
+      size="mini"
+      icon="el-icon-edit"
+      @click="$emit('on-edit')"
+    >
+      {{ 'btn.edit' | i18nFilter }}
+    </el-button>
+    <el-button
+      v-show="isEdit"
+      type="success"
+      size="mini"
+      icon="el-icon-s-promotion"
+      @click="$bus.emit('on-process-save')"
+    >
+      {{ 'btn.save' | i18nFilter }}
+    </el-button>
+    <el-button
+      v-show="isEdit"
+      icon="el-icon-close"
+      size="mini"
+      @click="$emit('on-cancel')"
+    >
+      {{ 'btn.cancel' | i18nFilter }}
+    </el-button>
+    <slot />
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    isEdit: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {}
+  },
+  methods: {}
+}
+</script>
+<style lang="scss" module>
+.container {
+  background-color: #eee;
+  display: flex;
+  justify-content: flex-start;
+  padding: 4px 16px;
+  margin: -16px 16px 16px 16px;
+  width: 98%;
+}
+</style>
diff --git a/src/views/art/components/process-node-panel.vue b/src/views/art/components/process-node-panel.vue
new file mode 100644
index 0000000..61ce781
--- /dev/null
+++ b/src/views/art/components/process-node-panel.vue
@@ -0,0 +1,90 @@
+<template>
+  <div :class="$style.container">
+    <div :class="$style.content">
+      <el-divider>
+        <span>设备信息</span>
+      </el-divider>
+      <div>
+        <span>设备名称：</span>
+        <span>设备A</span>
+      </div>
+      <div>
+        <span>设备名称：</span>
+        <span>设备A</span>
+      </div>
+      <div>
+        <span>设备名称：</span>
+        <span>设备A</span>
+      </div>
+    </div>
+    <div :class="$style.content">
+      <el-divider><span>配方清单</span></el-divider>
+      <div>
+        <span>设备名称：</span>
+        <span>设备A</span>
+      </div>
+      <div>
+        <span>设备名称：</span>
+        <span>设备A</span>
+      </div>
+      <div>
+        <span>设备名称：</span>
+        <span>设备A</span>
+      </div>
+    </div>
+    <div :class="$style.content">
+      <el-divider><span>物料清单</span></el-divider>
+      <div>
+        <span>设备名称：</span>
+        <span>设备A</span>
+      </div>
+      <div>
+        <span>设备名称：</span>
+        <span>设备A</span>
+      </div>
+      <div>
+        <span>设备名称：</span>
+        <span>设备A</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'Demo',
+  components: {
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+    }
+  },
+  methods: {
+  }
+}
+</script>
+<style lang="scss" module>
+.container {
+  margin: 0px 16px;
+  .content {
+    padding:0 16px;
+    font-size: 14px;
+    div{
+      margin-bottom: 8px;
+      span:nth-of-type(odd){
+        color:#999;
+      }
+      span:nth-of-type(even){
+        color:#666;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/art/components/process-table.vue b/src/views/art/components/process-table.vue
new file mode 100644
index 0000000..2fc65fb
--- /dev/null
+++ b/src/views/art/components/process-table.vue
@@ -0,0 +1,325 @@
+<template>
+  <VueScrollbar :class="$style.content">
+    <div :class="$style['flaw-detail']">
+      <div :class="$style['flaw-title']">
+        设备名称
+      </div>
+      <div :class="$style['flaw-title']">
+        配方名称
+      </div>
+      <div :class="$style['flaw-title']">
+        物料bom
+      </div>
+      <div :class="$style['flaw-title']">
+        工艺类型
+      </div>
+      <div :class="$style['flaw-title']">
+        描述
+      </div>
+      <div :class="$style['flaw-title']">
+        备注
+      </div>
+      <div :class="$style['flaw-btns']">
+        <el-button
+          type="success"
+          icon="el-icon-plus"
+          circle
+          @click="flawAdd()"
+        />
+      </div>
+    </div>
+    <div
+      v-for="(item, index) in process.processFlowEquipmentParams"
+      :key="index"
+      :class="$style['flaw-detail']"
+    >
+      <el-select
+        v-model="item.equipmentId"
+        :class="$style['flaw-select']"
+        filterable
+        clearable
+        placeholder="请选择"
+        @change="equipmentChange($event, item)"
+      >
+        <el-option
+          v-for="equipment in equipmentList"
+          :key="equipment.id"
+          :label="equipment.name"
+          :value="equipment.id"
+        />
+      </el-select>
+      <el-select
+        v-model="item.equipmentRecipeId"
+        :class="$style['flaw-select']"
+        filterable
+        clearable
+        placeholder="请选择"
+      >
+        <el-option
+          v-for="param in item.params"
+          :key="param.id"
+          :label="param.name"
+          :value="param.id"
+        />
+      </el-select>
+      <el-select
+        v-model="item.equipmentBomId"
+        :class="$style['flaw-select']"
+        filterable
+        clearable
+        placeholder="请选择"
+      >
+        <el-option
+          v-for="bom in item.boms"
+          :key="bom.id"
+          :label="bom.name"
+          :value="bom.id"
+        />
+      </el-select>
+      <el-select
+        v-model="item.nodeType"
+        :class="$style['flaw-select']"
+        filterable
+        clearable
+        placeholder="请选择"
+      >
+        <el-option
+          v-for="nodeType in nodeTypes"
+          :key="nodeType.value"
+          :label="nodeType.label"
+          :value="nodeType.value"
+        />
+      </el-select>
+      <el-input v-model="item.description" :class="$style['flaw-select']" />
+      <el-input v-model="item.remark" :class="$style['flaw-select']" />
+      <el-button
+        type="success"
+        icon="el-icon-plus"
+        circle
+        @click="flawAdd(item)"
+      />
+      <el-button
+        type="danger"
+        icon="el-icon-delete"
+        circle
+        @click="flawDel(item)"
+      />
+      <el-button
+        type="info"
+        icon="el-icon-document"
+        circle
+        @click="$emit('on-detail', item)"
+      />
+    </div>
+  </VueScrollbar>
+</template>
+<script>
+import {
+  listAllEquipmentBom,
+  listAllEquipmentRecipe,
+  addProcessFlows,
+  listProcessFlowNode
+} from '@/api/art-manage/art.js'
+import { listEquipment } from '@/api/material-manage/material'
+import remove from 'lodash/remove.js'
+import findIndex from 'lodash/findIndex.js'
+import VueScrollbar from 'vue-perfect-scrollbar'
+export default {
+  name: 'ProcessTable',
+  components: { VueScrollbar },
+  props: {
+    processFlowId: {
+      type: String,
+      default: null
+    }
+  },
+  data() {
+    return {
+      defaultFlaws: [],
+      process: {
+        processFlowId: this.processFlowId,
+        processFlowEquipmentParams: [
+          {
+            equipmentId: null,
+            equipmentRecipeId: null,
+            equipmentBomId: null,
+            nodeType: null,
+            processFlowId: this.processFlowId,
+            remark: null,
+            description: null,
+            boms: [],
+            params: []
+          }
+        ]
+      },
+      currentFlawRow: {},
+      productDetBarcode: '',
+      warehouseBarcode: '',
+      equipmentList: [],
+      equipmentBomList: [],
+      equipmentParamList: [],
+      // 1、上片设备，2、加工设备，3、下片设备
+      nodeTypes: [
+        {
+          value: '1',
+          label: '上片设备'
+        },
+        {
+          value: '2',
+          label: '加工设备'
+        },
+        {
+          value: '3',
+          label: '下片设备'
+        }
+      ]
+    }
+  },
+  created() {
+    this.init()
+    this.$bus.on('on-process-save', this.save)
+  },
+  beforeDestroy() {
+    this.$bus.off('on-process-save', this.save)
+  },
+  mounted() {},
+  methods: {
+    flawAdd(item) {
+      const mid = [
+        {
+          equipmentId: null,
+          equipmentRecipeId: null,
+          equipmentBomId: null,
+          nodeType: null,
+          processFlowId: this.processFlowId,
+          remark: null,
+          description: null,
+          boms: [],
+          params: []
+        }
+      ]
+      if (!item) {
+        this.process.processFlowEquipmentParams = mid.concat(
+          this.process.processFlowEquipmentParams
+        )
+        return
+      }
+      const index = findIndex(
+        this.process.processFlowEquipmentParams,
+        f => f === item
+      )
+      console.log(index)
+      const { length } = this.process.processFlowEquipmentParams
+      const beg = this.process.processFlowEquipmentParams.slice(0, index + 1)
+      const end = this.process.processFlowEquipmentParams.slice(
+        index + 1,
+        length
+      )
+
+      this.process.processFlowEquipmentParams = [].concat(beg, mid, end)
+    },
+    flawDel(item) {
+      console.log(item)
+      remove(this.process.processFlowEquipmentParams, f => f === item)
+      console.log(this.process.processFlowEquipmentParams)
+      this.process.processFlowEquipmentParams = this.process.processFlowEquipmentParams.concat(
+        []
+      )
+    },
+    focusFlaw(item) {
+      console.log(item)
+      this.currentFlawRow = item
+    },
+    setFlaw(flaw) {
+      console.log(flaw)
+      this.currentFlawRow.description = flaw.defectName
+      this.currentFlawRow.fabricId = flaw.id
+    },
+    reset() {
+      console.log(this.defaultFlaws)
+      this.process.processFlowEquipmentParams = JSON.parse(
+        JSON.stringify(this.defaultFlaws)
+      )
+    },
+    save() {
+      const vm = this
+      console.log(JSON.stringify(vm.process))
+      if (vm.process.processFlowEquipmentParams.length === 0) {
+        vm.$alert('工艺节点为空，您确定要保存吗？', '[温馨提示]', {
+          confirmButtonText: '确定',
+          callback: action => {
+            console.log('保存')
+            addProcessFlows(vm.process)
+          }
+        })
+      } else {
+        addProcessFlows(vm.process)
+      }
+    },
+    async init() {
+      const allBomRes = await listAllEquipmentBom()
+      this.equipmentBomList = allBomRes.data
+      const allRecipeRes = await listAllEquipmentRecipe()
+      this.equipmentParamList = allRecipeRes.data
+      const allEquipmentRes = await listEquipment()
+      this.equipmentList = allEquipmentRes.data
+      const allNodeRes = await listProcessFlowNode({ processFlowId: this.processFlowId })
+      console.log(allNodeRes)
+      const allNodes = allNodeRes.data
+      console.log(allNodes)
+      if (allNodes && allNodes.length === 0) {
+        return
+      }
+      this.process.processFlowEquipmentParams = allNodes.map(m => {
+        return {
+          ...m,
+          nodeType: null,
+          processFlowId: this.processFlowId,
+          boms: this.equipmentBomList.filter(f => f.equipmentId === m.equipmentId),
+          params: this.equipmentParamList.filter(f => f.equipmentId === m.equipmentId),
+          id: null
+        }
+      })
+      console.log(this.process.processFlowEquipmentParams)
+    },
+    equipmentChange(val, item) {
+      console.log(val, item)
+      item.boms = this.equipmentBomList.filter(f => f.equipmentId === val)
+      item.params = this.equipmentParamList.filter(f => f.equipmentId === val)
+    }
+  }
+}
+</script>
+<style lang="scss" module>
+$colWidth: 200px;
+.content {
+  padding: 16px;
+  margin: 16px;
+  position: relative;
+  height: calc(100vh - 150px);
+  .flaw-detail {
+    width: 1400px;
+    position: relative;
+    display: flex;
+    align-items: center;
+    .flaw-title {
+      position: relative;
+      width: $colWidth;
+      text-align: center;
+      border: 1px solid #ccc;
+      background-color: #eee;
+      padding: 8px;
+    }
+    .flaw-btns {
+      position: relative;
+      width: $colWidth;
+      text-align: left;
+    }
+    .flaw-select {
+      position: relative;
+      width: $colWidth;
+      height: 40px;
+    }
+  }
+}
+</style>
diff --git a/src/views/art/components/search-bar.vue b/src/views/art/components/search-bar.vue
new file mode 100644
index 0000000..32abc61
--- /dev/null
+++ b/src/views/art/components/search-bar.vue
@@ -0,0 +1,124 @@
+<template>
+  <div class="container">
+    <span class="label-name">{{ $t('module.teamManager.Handover.Keyword') }}</span>
+    <el-input
+      v-model="keywords"
+      :placeholder="placeholder"
+      :clearable="true"
+      :style="{
+        width: inputWidth + 'px',
+        maxWidth: '100%',
+        marginRight: '16px'
+      }"
+    />
+    <el-date-picker
+      v-if="showTime"
+      v-model="dts"
+      style="margin-right:16px;"
+      type="daterange"
+      align="right"
+      unlink-panels
+      :range-separator="'formItem.to' | i18nFilter"
+      :start-placeholder="'formItem.beginTime' | i18nFilter"
+      :end-placeholder="'formItem.endTime' | i18nFilter"
+      :picker-options="pickerOptions"
+    />
+    <el-button type="primary" icon="el-icon-search" @click="handleSearch()">
+      {{ "btn.search" | i18nFilter }}
+    </el-button>
+    <slot />
+  </div>
+</template>
+<script>
+import moment from 'moment'
+import i18n from '@/lang'
+
+const pickerOptions = {
+  shortcuts: [
+    {
+      text: i18n.t('datePickerOption.lastWeek'),
+      onClick(picker) {
+        const end = new Date()
+        const start = new Date()
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+        picker.$emit('pick', [start, end])
+      }
+    },
+    {
+      text: i18n.t('datePickerOption.lastMonth'),
+      onClick(picker) {
+        const end = new Date()
+        const start = new Date()
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+        picker.$emit('pick', [start, end])
+      }
+    },
+    {
+      text: i18n.t('datePickerOption.lastThreeMonths'),
+      onClick(picker) {
+        const end = new Date()
+        const start = new Date()
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+        picker.$emit('pick', [start, end])
+      }
+    }
+  ]
+}
+
+export default {
+  props: {
+    showTime: {
+      type: Boolean,
+      default: false
+    },
+    lableName: {
+      type: String,
+      default: '关键字'
+    },
+    placeholder: {
+      type: String,
+      default: '请输入'
+    },
+    inputWidth: {
+      type: Number,
+      default: 180
+    }
+  },
+  data() {
+    return {
+      keywords: '',
+      dts: ['', ''],
+      pickerOptions
+    }
+  },
+  methods: {
+    handleSearch() {
+      const param = {
+        keywords: this.keywords,
+        key: this.keywords,
+        begDate: this.dts[0]
+          ? moment(this.dts[0]).format('YYYY-MM-DD')
+          : this.dts[0],
+        endDate: this.dts[1]
+          ? moment(this.dts[1]).format('YYYY-MM-DD')
+          : this.dts[1]
+      }
+      this.$emit('on-search', param)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 50px;
+  padding: 4px 40px;
+  background-color: #eee;
+  .label-name {
+    margin-right: 8px;
+    font-size: 14px;
+  }
+}
+</style>
diff --git a/src/views/art/components/submit-bar.vue b/src/views/art/components/submit-bar.vue
new file mode 100644
index 0000000..750627a
--- /dev/null
+++ b/src/views/art/components/submit-bar.vue
@@ -0,0 +1,38 @@
+<!--
+ * @Author: gtz
+ * @Date: 2021-01-27 10:07:42
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-02-01 11:26:16
+ * @Description: file content
+-->
+<template>
+  <div :class="$style.container">
+    <el-button type="primary" icon="el-icon-success" @click="$emit('on-submit')">
+      {{ 'btn.confirm' | i18nFilter }}
+    </el-button>
+    <el-button icon="el-icon-close" @click="$emit('on-cancle')">
+      {{ 'btn.cancel' | i18nFilter }}
+    </el-button>
+    <slot />
+  </div>
+</template>
+<script>
+export default {
+  props: {
+  },
+  data() {
+    return { }
+  },
+  methods: {
+  }
+}
+</script>
+<style lang="scss" module>
+.container {
+  display: flex;
+  justify-content: center;
+  margin-top:28px;
+  width: 100%;
+  height: 40px;
+}
+</style>
diff --git a/src/views/art/filters/index.js b/src/views/art/filters/index.js
new file mode 100644
index 0000000..e92bb58
--- /dev/null
+++ b/src/views/art/filters/index.js
@@ -0,0 +1,21 @@
+/*
+ * @Date: 2020-12-29 16:49:28
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-04-13 13:49:51
+ * @FilePath: \basic-admin\src\filters\DataDict\index.js
+ * @Description: 部分常量的数据字典定义
+ */
+import i18n from '@/lang'
+
+const table = {
+  typeFilter: {
+    0: i18n.t('module.art.processList.equipment'),
+    1: i18n.t('module.art.processList.buffer')
+  }
+}
+
+export default function(dictTable) {
+  return function(val) {
+    return table?.[dictTable]?.[val]
+  }
+}
diff --git a/src/views/art/list.vue b/src/views/art/list.vue
new file mode 100644
index 0000000..9d5af92
--- /dev/null
+++ b/src/views/art/list.vue
@@ -0,0 +1,217 @@
+<template>
+  <div :class="$style.container">
+    <SearchBar :lable-name="$t('module.art.key')" :placeholder="$t('module.art.artName') + $t('module.art.or') + $t('module.art.artCode')" @on-search="handleSearch">
+      <el-button type="success" icon="el-icon-plus" @click="handleAdd()">
+        {{ 'btn.add' | i18nFilter }}
+      </el-button>
+    </SearchBar>
+    <el-table
+      :data="tableDataList"
+      :class="$style.table"
+      :stripe="true"
+      :header-cell-style="{background:'#eef1f6',color:'#606266',height: '56px', textAlign: 'center'}"
+      :cell-style="{ textAlign: 'center' }"
+      size="medium"
+    >
+      <el-table-column prop="index" :label="'tableHeader.index' | i18nFilter" width="80" />
+      <el-table-column prop="name" :label="$t('module.art.artName')" width="180" />
+      <el-table-column :label="$t('module.art.status')" width="80">
+        <template slot-scope="scope">
+          {{ scope.row.enabled === "1" ? $t('module.art.on') : $t('module.art.off') }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="createTime" :label="$t('module.art.createTime')" width="180">
+        <template slot-scope="scope">
+          {{ moment(scope.row.createTime).format("YYYY-MM-DD HH:mm:ss") }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="code" :label="$t('module.art.artCode')" width="180" />
+      <el-table-column prop="remark" :label="$t('module.art.remark')" />
+      <el-table-column prop="description" :label="$t('module.art.description')" />
+      <el-table-column :label="$t('module.art.process')">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            @click="handleProcessFlowDetail(scope.row.id)"
+          >{{ 'btn.detail' | i18nFilter }}</el-button>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('module.art.operation')" width="280">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="info"
+            icon="el-icon-edit"
+            @click="handleEdit(scope.row.id)"
+          >
+            {{ 'btn.edit' | i18nFilter }}
+          </el-button>
+          <span style="margin:0 3px">|</span>
+          <el-button
+            type="danger"
+            size="mini"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row.id)"
+          >
+            {{ 'btn.delete' | i18nFilter }}
+          </el-button>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('module.art.IsDisabled')">
+        <template slot-scope="scope">
+          <el-switch
+            v-model="scope.row.isValid"
+            active-color="#13ce66"
+            inactive-color="#ff4949"
+            @change="handleChange($event, scope.row.id)"
+          />
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      background
+      :hide-on-single-page="false"
+      :class="$style.table"
+      :current-page="page.current"
+      :page-sizes="[10, 20, 30, 40]"
+      :page-size="page.size"
+      layout="total, sizes, prev, pager, next"
+      :total="page.total"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+    <AddDialog
+      v-if="addDialogVisible"
+      :id="id"
+      :class="$style.dialog"
+      :visible="addDialogVisible"
+      @on-close="addDialogVisible = false"
+      @on-success="handleAddSuccess()"
+    />
+    <ProcessDrawer
+      :class="$style.dialog"
+      :visible="processDrawerVisible"
+      :process-flow-id="id"
+      @on-close="processDrawerVisible = false"
+    />
+  </div>
+</template>
+<script>
+import moment from 'moment'
+import { list, del, enabled } from '@/api/art-manage/art.js'
+import SearchBar from '@/views/art/components/search-bar'
+import AddDialog from '@/views/art/components/add-dialog'
+import ProcessDrawer from '@/views/art/components/process-drawer'
+export default {
+  components: { SearchBar, AddDialog, ProcessDrawer },
+  props: {},
+  data() {
+    return {
+      moment,
+      id: null,
+      tableDataList: [],
+      page: {
+        total: 0,
+        current: 1,
+        size: 10
+      },
+      addDialogVisible: false,
+      processDrawerVisible: false,
+      param: {}
+    }
+  },
+  created() {
+    this.handleSearch()
+  },
+  methods: {
+    handleSearch(param) {
+      this.param = param
+      console.log(param)
+      list({ ...param, ...this.page }).then(res => {
+        console.log(res)
+        this.page.total = res.data.total
+        if (!res.data.records) {
+          this.tableDataList = []
+          return
+        }
+        this.tableDataList = res.data.records.map((m, index) => ({
+          ...m,
+          index: this.page.size * (this.page.current - 1) + index + 1,
+          isValid: m.enabled === '1'
+        }))
+      })
+    },
+    handleAdd() {
+      console.log('handleAdd')
+      this.addDialogVisible = true
+      this.id = null
+    },
+    handleAddSuccess() {
+      this.addDialogVisible = false
+      this.page.current = 1
+      this.handleSearch(this.param)
+    },
+    handleChange(val, id) {
+      console.log(val, id)
+      const param = {
+        enabled: val ? '1' : '0',
+        id
+      }
+      enabled(param).then(res => {
+        this.handleSearch(this.param)
+      })
+    },
+    handleProcessFlowDetail(id) {
+      this.processDrawerVisible = true
+      this.id = id
+      this.$router.push({
+        path: '/art/process',
+        query: {
+          redirect: '/art/list',
+          title: '工艺流程',
+          id
+        }
+      })
+    },
+    handleEdit(id) {
+      this.addDialogVisible = true
+      this.id = id
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`)
+      this.page.size = val
+      this.handleSearch(this.param)
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`)
+      this.page.current = val
+      this.handleSearch(this.param)
+    },
+    handleDelete(id) {
+      this.$confirm(this.$t('module.art.delTip'), this.$t('module.art.tip'), {
+        confirmButtonText: this.$t('module.art.confirm'),
+        cancelButtonText: this.$t('module.art.cancel'),
+        type: 'warning'
+      }).then(async() => {
+        del({ id }).then(res => {
+          this.page.current = 1
+          this.handleSearch(this.param)
+          this.$message({
+            type: 'info',
+            message: this.$t('module.art.delSucc')
+          })
+        })
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" module>
+.container {
+  .table {
+    margin: 16px;
+    width: 98.5%;
+  }
+}
+</style>
diff --git a/src/views/art/process/list.vue b/src/views/art/process/list.vue
new file mode 100644
index 0000000..1bf3d47
--- /dev/null
+++ b/src/views/art/process/list.vue
@@ -0,0 +1,69 @@
+<template>
+  <div :class="$style.container">
+    <ProcessEditBar :is-edit="isEdit" @on-back="goback" @on-edit="isEdit=true" @on-cancel="isEdit=false" @on-submit="handleSubmit()" />
+    <ProcessChart v-if="!isEdit" :process-flow-id="processFlowId" @on-detail="handleDetail" />
+    <ProcessTable v-else :process-flow-id="processFlowId" @on-detail="handleDetail" @on-save-success="handleSuccess" />
+    <el-drawer
+      title="节点详情"
+      size="20%"
+      :append-to-body="true"
+      :before-close="()=>innerDrawer=false"
+      :visible.sync="innerDrawer"
+    >
+      <ProcessNodePanel />
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+import ProcessChart from '@/views/art/process/process-chart'
+import ProcessTable from '@/views/art/process/process-table'
+import ProcessNodePanel from '@/views/art/process/process-node-panel'
+import ProcessEditBar from '@/views/art/process/process-edit-bar'
+export default {
+  name: 'ProcessDrawer',
+  components: { ProcessChart, ProcessTable, ProcessNodePanel, ProcessEditBar },
+  props: {
+  },
+  data() {
+    return {
+      innerDrawer: false,
+      isEdit: false,
+      processFlowId: ''
+    }
+  },
+  created() {
+    this.processFlowId = this.$route.query.id
+  },
+  methods: {
+    handleDetail() {
+      this.innerDrawer = true
+    },
+    handleSubmit() {
+      console.log('保存成功')
+      this.isEdit = false
+    },
+    handleSuccess() {
+      this.isEdit = false
+    },
+    goback() {
+      this.$router.go(-1)
+    }
+  }
+}
+</script>
+<style lang="scss" module>
+.container {
+  .input {
+    display: flex;
+    margin: 8px 16px 8px 4px;
+    align-items: center;
+    .select {
+      width: 100%;
+    }
+  }
+  .select {
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/views/art/process/process-chart-old.vue b/src/views/art/process/process-chart-old.vue
new file mode 100644
index 0000000..aa11309
--- /dev/null
+++ b/src/views/art/process/process-chart-old.vue
@@ -0,0 +1,350 @@
+<template>
+  <VueScrollbar :class="$style.content">
+    <div :class="$style['flaw-detail']">
+      <div :class="$style['flaw-title']">
+        {{ $t('module.art.processName') }}
+      </div>
+      <div :class="$style['flaw-title']">
+        {{ $t('module.art.eqName') }}
+      </div>
+      <div :class="$style['flaw-title']">
+        {{ $t('module.art.recipeName') }}
+      </div>
+      <!-- <div :class="$style['flaw-title']">
+        {{ $t('module.art.materialBOM') }}
+      </div> -->
+      <div :class="$style['flaw-title']">
+        {{ $t('module.art.artType') }}
+      </div>
+      <div :class="$style['flaw-title']">
+        {{ $t('module.art.description') }}
+      </div>
+      <div :class="$style['flaw-title']">
+        {{ $t('module.art.remark') }}
+      </div>
+      <div :class="$style['flaw-btns']">
+        <el-button
+          v-if="false"
+          type="success"
+          icon="el-icon-plus"
+          circle
+          @click="flawAdd()"
+        />
+      </div>
+    </div>
+    <div
+      v-for="(item, index) in process.processFlowEquipmentParams"
+      :key="index"
+      :class="$style['flaw-detail']"
+    >
+      <el-select
+        v-model="item.equipmentId"
+        :class="$style['flaw-select']"
+        filterable
+        clearable
+        :placeholder="'placeholder.select' | i18nFilter"
+        :disabled="true"
+        @change="equipmentChange($event, item)"
+      >
+        <el-option
+          v-for="equipment in equipmentList"
+          :key="equipment.id"
+          :label="equipment.name"
+          :value="equipment.id"
+        />
+      </el-select>
+      <el-select
+        v-model="item.equipmentId"
+        :class="$style['flaw-select']"
+        filterable
+        clearable
+        :placeholder="'placeholder.select' | i18nFilter"
+        :disabled="true"
+        @change="equipmentChange($event, item)"
+      >
+        <el-option
+          v-for="equipment in equipmentList"
+          :key="equipment.id"
+          :label="equipment.name"
+          :value="equipment.id"
+        />
+      </el-select>
+      <el-select
+        v-model="item.equipmentRecipeId"
+        :class="$style['flaw-select']"
+        filterable
+        clearable
+        :placeholder="'placeholder.select' | i18nFilter"
+        :disabled="true"
+      >
+        <el-option
+          v-for="param in equipmentParamList"
+          :key="param.id"
+          :label="param.name"
+          :value="param.id"
+        />
+      </el-select>
+      <!-- <el-select
+        v-model="item.equipmentBomId"
+        :class="$style['flaw-select']"
+        filterable
+        clearable
+        :placeholder="'placeholder.select' | i18nFilter"
+        :disabled="true"
+      >
+        <el-option
+          v-for="bom in item.boms"
+          :key="bom.id"
+          :label="bom.name"
+          :value="bom.id"
+        />
+      </el-select> -->
+      <el-select
+        v-model="item.nodeType"
+        :class="$style['flaw-select']"
+        filterable
+        clearable
+        :placeholder="'placeholder.select' | i18nFilter"
+        :disabled="true"
+      >
+        <el-option
+          v-for="nodeType in nodeTypes"
+          :key="nodeType.value"
+          :label="nodeType.label"
+          :value="nodeType.value"
+        />
+      </el-select>
+      <el-input
+        v-model="item.description"
+        :class="$style['flaw-select']"
+        :disabled="true"
+      />
+      <el-input
+        v-model="item.remark"
+        :class="$style['flaw-select']"
+        :disabled="true"
+      />
+      <el-button
+        v-if="false"
+        type="info"
+        icon="el-icon-document"
+        circle
+        @click="$emit('on-detail', item)"
+      />
+    </div>
+  </VueScrollbar>
+</template>
+<script>
+import {
+  listAllEquipmentBom,
+  listAllEquipmentRecipe,
+  addProcessFlows,
+  listProcessFlowNode
+} from '@/api/art-manage/art.js'
+import { listEquipment } from '@/api/material-manage/material'
+import remove from 'lodash/remove.js'
+import findIndex from 'lodash/findIndex.js'
+import VueScrollbar from 'vue-perfect-scrollbar'
+export default {
+  name: 'ProcessTable',
+  components: { VueScrollbar },
+  props: {
+    processFlowId: {
+      type: String,
+      default: null
+    }
+  },
+  data() {
+    return {
+      defaultFlaws: [],
+      process: {
+        processFlowId: this.processFlowId,
+        processFlowEquipmentParams: [
+          {
+            equipmentId: null,
+            equipmentType: null,
+            equipmentRecipeId: null,
+            equipmentBomId: null,
+            nodeType: null,
+            processFlowId: this.processFlowId,
+            remark: null,
+            description: null,
+            boms: [],
+            params: []
+          }
+        ]
+      },
+      currentFlawRow: {},
+      productDetBarcode: '',
+      warehouseBarcode: '',
+      equipmentList: [],
+      equipmentBomList: [],
+      equipmentParamList: [],
+      // 1、上片设备，2、加工设备，3、下片设备
+      nodeTypes: [
+        {
+          value: 1,
+          label: '上片设备'
+        },
+        {
+          value: 2,
+          label: '加工设备'
+        },
+        {
+          value: 3,
+          label: '下片设备'
+        }
+      ]
+    }
+  },
+  created() {
+    this.init()
+    this.$bus.on('on-process-save', this.save)
+  },
+  beforeDestroy() {
+    this.$bus.off('on-process-save', this.save)
+  },
+  mounted() {},
+  methods: {
+    flawAdd(item) {
+      const mid = [
+        {
+          equipmentId: null,
+          equipmentRecipeId: null,
+          equipmentBomId: null,
+          nodeType: null,
+          processFlowId: this.processFlowId,
+          remark: null,
+          description: null,
+          boms: [],
+          params: []
+        }
+      ]
+      if (!item) {
+        this.process.processFlowEquipmentParams = mid.concat(
+          this.process.processFlowEquipmentParams
+        )
+        return
+      }
+      const index = findIndex(
+        this.process.processFlowEquipmentParams,
+        f => f === item
+      )
+      console.log(index)
+      const { length } = this.process.processFlowEquipmentParams
+      const beg = this.process.processFlowEquipmentParams.slice(0, index + 1)
+      const end = this.process.processFlowEquipmentParams.slice(
+        index + 1,
+        length
+      )
+
+      this.process.processFlowEquipmentParams = [].concat(beg, mid, end)
+    },
+    flawDel(item) {
+      console.log(item)
+      remove(this.process.processFlowEquipmentParams, f => f === item)
+      console.log(this.process.processFlowEquipmentParams)
+      this.process.processFlowEquipmentParams = this.process.processFlowEquipmentParams.concat(
+        []
+      )
+    },
+    focusFlaw(item) {
+      console.log(item)
+      this.currentFlawRow = item
+    },
+    setFlaw(flaw) {
+      console.log(flaw)
+      this.currentFlawRow.description = flaw.defectName
+      this.currentFlawRow.fabricId = flaw.id
+    },
+    reset() {
+      console.log(this.defaultFlaws)
+      this.process.processFlowEquipmentParams = JSON.parse(
+        JSON.stringify(this.defaultFlaws)
+      )
+    },
+    save() {
+      const vm = this
+      console.log(JSON.stringify(vm.process))
+      if (vm.process.processFlowEquipmentParams.length === 0) {
+        vm.$alert(this.$t('module.art.nodeNull'), this.$t('module.art.tip'), {
+          confirmButtonText: this.$t('module.art.confirm'),
+          callback: action => {
+            console.log('保存')
+            addProcessFlows(vm.process)
+          }
+        })
+      } else {
+        addProcessFlows(vm.process)
+      }
+    },
+    async init() {
+      const allBomRes = await listAllEquipmentBom()
+      this.equipmentBomList = allBomRes.data
+      const allRecipeRes = await listAllEquipmentRecipe()
+      this.equipmentParamList = allRecipeRes.data
+      const allEquipmentRes = await listEquipment()
+      this.equipmentList = allEquipmentRes.data
+      const allNodeRes = await listProcessFlowNode({ processFlowId: this.processFlowId })
+      console.log(allNodeRes)
+      const allNodes = allNodeRes.data
+      console.log(allNodes)
+      if (allNodes && allNodes.length === 0) {
+        return
+      }
+      this.process.processFlowEquipmentParams = allNodes.map(m => {
+        return {
+          ...m,
+          processFlowId: this.processFlowId,
+          boms: this.equipmentBomList.filter(f => f.equipmentId === m.equipmentId),
+          params: this.equipmentParamList.filter(f => f.equipmentType === m.equipmentType),
+          id: null
+        }
+      })
+      console.log(this.process.processFlowEquipmentParams)
+    },
+    equipmentChange(val, item) {
+      console.log(val, item)
+      for (let i = 0; i < this.equipmentList.length; i++) {
+        if (this.equipmentList[i].id === val) {
+          item.boms = this.equipmentBomList.filter(f => f.equipmentId === val)
+          item.params = this.equipmentParamList.filter(f => f.equipmentType === this.equipmentList[i].equipmentType)
+        }
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" module>
+$colWidth: 200px;
+.content {
+  padding: 16px;
+  margin: 16px;
+  position: relative;
+  height: calc(100vh - 160px);
+  .flaw-detail {
+    width: 1400px;
+    position: relative;
+    display: flex;
+    align-items: center;
+    .flaw-title {
+      position: relative;
+      width: $colWidth;
+      text-align: center;
+      border: 1px solid #ccc;
+      background-color: #eee;
+      padding: 8px;
+    }
+    .flaw-btns {
+      position: relative;
+      width: $colWidth;
+      text-align: left;
+    }
+    .flaw-select {
+      position: relative;
+      width: $colWidth;
+      height: 40px;
+    }
+  }
+}
+</style>
diff --git a/src/views/art/process/process-chart.vue b/src/views/art/process/process-chart.vue
new file mode 100644
index 0000000..770e0b3
--- /dev/null
+++ b/src/views/art/process/process-chart.vue
@@ -0,0 +1,168 @@
+<template>
+  <div class="process-table">
+    <el-collapse class="process-table-main">
+      <el-collapse-item v-for="(item, index) in dataList" :key="index" :name="index">
+        <template slot="title">
+          <div class="process-table-main-title">
+            <span>{{ processObj[item.workSequenceId].name }}</span>
+          </div>
+        </template>
+        <el-row v-for="(i, idx) in item.processFlowEquipmentParams" :key="'item' + index + idx" class="process-table-main-item" :gutter="20">
+          <el-col :span="4" class="process-table-main-item-item">
+            <el-button disabled>
+              {{ i.equipmentId ? equipmentObj[i.equipmentId] : $t('module.art.eqName') }}
+            </el-button>
+          </el-col>
+          <el-col :span="4" class="process-table-main-item-item">
+            <el-button v-if="!processPortObj[item.workSequenceId]" disabled>
+              {{ i.equipmentRecipeId ? equipmentRecipeObj[i.equipmentRecipeId] : $t('module.art.recipeName') }}
+            </el-button>
+          </el-col>
+          <!-- <el-col :span="4" class="process-table-main-item-item">
+            <el-button v-if="!processPortObj[item.workSequenceId]" disabled>
+              {{ i.nodeType ? nodeTypesObj[i.nodeType] : $t('module.art.artType') }}
+            </el-button>
+          </el-col> -->
+          <el-col :span="4" class="process-table-main-item-item">
+            <el-input v-model="i.description" disabled :placeholder="$t('module.art.processList.description')" @change="changeDescription(index, idx)" />
+          </el-col>
+          <el-col :span="4" class="process-table-main-item-item">
+            <el-input v-model="i.remark" disabled :placeholder="$t('module.art.remark')" @change="changeRemark(index, idx)" />
+          </el-col>
+        </el-row>
+      </el-collapse-item>
+    </el-collapse>
+  </div>
+</template>
+<script>
+import {
+  listAllEquipmentRecipe,
+  listProcessFlowNode,
+  listProcess
+} from '@/api/art-manage/art.js'
+import { listEquipment } from '@/api/material-manage/material'
+
+export default {
+  name: 'ProcessChart',
+  props: {
+    processFlowId: {
+      type: String,
+      default: null
+    }
+  },
+  data() {
+    return {
+      dataList: [],
+      processList: [],
+      processObj: {},
+      processPortObj: {},
+      equipmentRecipeList: [],
+      equipmentRecipeObj: [],
+      equipmentList: [],
+      equipmentObj: {},
+      showAddList: [],
+      // 1、上片设备，2、加工设备，3、下片设备
+      nodeTypes: [
+        {
+          id: 1,
+          name: '上片设备'
+        },
+        {
+          id: 2,
+          name: '加工设备'
+        },
+        {
+          id: 3,
+          name: '下片设备'
+        }
+      ],
+      nodeTypesObj: {
+        1: '上片设备',
+        2: '加工设备',
+        3: '下片设备'
+      }
+    }
+  },
+  created() {
+    this.init()
+  },
+  mounted() {},
+  methods: {
+    // 初始化
+    async init() {
+      // 获取工序列表
+      const allProcessRes = await listProcess({})
+      this.processList = allProcessRes.data
+      allProcessRes.data.map(item => {
+        this.processObj[item.id] = item
+        if (item.type === 1) {
+          this.processPortObj[item.id] = item.name
+        }
+      })
+      console.log(this.processList)
+      console.log(this.processObj)
+      // 获取配方列表
+      const allRecipeRes = await listAllEquipmentRecipe()
+      this.equipmentRecipeList = allRecipeRes.data
+      allRecipeRes.data.map(item => {
+        this.equipmentRecipeObj[item.id] = item.name
+      })
+      console.log(this.equipmentRecipeList)
+      // 获取设备列表
+      const allEquipmentRes = await listEquipment()
+      this.equipmentList = allEquipmentRes.data
+      allEquipmentRes.data.map(item => {
+        this.equipmentObj[item.id] = item.name
+      })
+      console.log(this.equipmentList)
+      // 获取列表
+      const allNodeRes = await listProcessFlowNode({
+        processFlowId: this.processFlowId
+      })
+      console.log(allNodeRes)
+      this.dataList = allNodeRes.data.map(item => {
+        delete item.id
+        item.processFlowEquipmentParams.map(i => {
+          delete i.id
+          i.workSequenceId = item.workSequenceId
+          i.processFlowId = item.processFlowId
+          return i
+        })
+        return item
+      })
+      console.log(this.dataList)
+    }
+  }
+}
+</script>
+<style lang="scss">
+  .process-table{
+    .process-table-addprocess{
+      margin-left: 20px;
+      margin-top: 20px;
+    }
+    .process-table-main{
+      width: calc(100% - 40px);
+      margin: 20px;
+      border: 1px solid #e6ebf5;
+      border-radius: 5px;
+      min-width: 1000px;
+      .process-table-main-title{
+        padding: 0 20px;
+        width: 100%;
+        position: relative;
+        .process-table-main-title-delbtn{
+          position: absolute;
+          top: 50%;
+          right: 20px;
+          transform: translateY(-50%);
+        }
+      }
+      .process-table-main-item{
+        width: calc(100% - 40px);
+        margin: 0 10px !important;
+        line-height: 48px;
+      }
+    }
+  }
+</style>
diff --git a/src/views/art/process/process-edit-bar.vue b/src/views/art/process/process-edit-bar.vue
new file mode 100644
index 0000000..9b7b103
--- /dev/null
+++ b/src/views/art/process/process-edit-bar.vue
@@ -0,0 +1,68 @@
+<!--
+ * @Author: gtz
+ * @Date: 2021-01-27 10:07:42
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-02-01 11:28:52
+ * @Description: file content
+-->
+<template>
+  <div :class="$style.container">
+    <el-button
+      type="primary"
+      size="mini"
+      icon="el-icon-arrow-left"
+      @click="$emit('on-back')"
+    >
+      {{ 'btn.back' | i18nFilter }}
+    </el-button>
+    <el-button
+      v-show="!isEdit"
+      type="primary"
+      size="mini"
+      icon="el-icon-edit"
+      @click="$emit('on-edit')"
+    >
+      {{ 'btn.edit' | i18nFilter }}
+    </el-button>
+    <el-button
+      v-show="isEdit"
+      type="success"
+      size="mini"
+      icon="el-icon-s-promotion"
+      @click="$bus.emit('on-process-save')"
+    >
+      {{ 'btn.save' | i18nFilter }}
+    </el-button>
+    <el-button
+      v-show="isEdit"
+      icon="el-icon-close"
+      size="mini"
+      @click="$emit('on-cancel')"
+    >
+      {{ 'btn.cancel' | i18nFilter }}
+    </el-button>
+    <slot />
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    isEdit: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {}
+  },
+  methods: {}
+}
+</script>
+<style lang="scss" module>
+.container {
+  background-color: #eee;
+  display: flex;
+  justify-content: flex-end;
+  padding: 4px 16px;
+}
+</style>
diff --git a/src/views/art/process/process-node-panel.vue b/src/views/art/process/process-node-panel.vue
new file mode 100644
index 0000000..61ce781
--- /dev/null
+++ b/src/views/art/process/process-node-panel.vue
@@ -0,0 +1,90 @@
+<template>
+  <div :class="$style.container">
+    <div :class="$style.content">
+      <el-divider>
+        <span>设备信息</span>
+      </el-divider>
+      <div>
+        <span>设备名称：</span>
+        <span>设备A</span>
+      </div>
+      <div>
+        <span>设备名称：</span>
+        <span>设备A</span>
+      </div>
+      <div>
+        <span>设备名称：</span>
+        <span>设备A</span>
+      </div>
+    </div>
+    <div :class="$style.content">
+      <el-divider><span>配方清单</span></el-divider>
+      <div>
+        <span>设备名称：</span>
+        <span>设备A</span>
+      </div>
+      <div>
+        <span>设备名称：</span>
+        <span>设备A</span>
+      </div>
+      <div>
+        <span>设备名称：</span>
+        <span>设备A</span>
+      </div>
+    </div>
+    <div :class="$style.content">
+      <el-divider><span>物料清单</span></el-divider>
+      <div>
+        <span>设备名称：</span>
+        <span>设备A</span>
+      </div>
+      <div>
+        <span>设备名称：</span>
+        <span>设备A</span>
+      </div>
+      <div>
+        <span>设备名称：</span>
+        <span>设备A</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'Demo',
+  components: {
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+    }
+  },
+  methods: {
+  }
+}
+</script>
+<style lang="scss" module>
+.container {
+  margin: 0px 16px;
+  .content {
+    padding:0 16px;
+    font-size: 14px;
+    div{
+      margin-bottom: 8px;
+      span:nth-of-type(odd){
+        color:#999;
+      }
+      span:nth-of-type(even){
+        color:#666;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/art/process/process-table-add.vue b/src/views/art/process/process-table-add.vue
new file mode 100644
index 0000000..22c43b0
--- /dev/null
+++ b/src/views/art/process/process-table-add.vue
@@ -0,0 +1,63 @@
+<!--
+ * @Date: 2021-01-07 20:09:37
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-04-16 15:00:51
+ * @FilePath: \basic-admin\src\components\BaseTable\subcomponents\CheckDetail.vue
+ * @Description:
+-->
+<template>
+  <el-dialog
+    :close-on-click-modal="false"
+    width="60%"
+    top="50px"
+    :title="$t('module.art.processName')"
+    :visible.sync="visible"
+    @close="process = null"
+  >
+    <el-row>
+      {{ $t('module.art.processName') }}：
+      <el-select v-model="process" filterable>
+        <el-option v-for="item in processList" :key="item.id" :value="item.id" :label="item.name" />
+      </el-select>
+    </el-row>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="handleConfirm()">{{ 'btn.confirm' | i18nFilter }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+
+export default {
+  props: {
+    processList: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      process: null
+    }
+  },
+  watch: {},
+  mounted() {},
+  methods: {
+    init() {
+      this.visible = true
+    },
+    handleConfirm() {
+      this.$emit('handleProcess', this.process)
+    },
+    closeDialog() {
+      this.visible = false
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+
+</style>
diff --git a/src/views/art/process/process-table-old.vue b/src/views/art/process/process-table-old.vue
new file mode 100644
index 0000000..18dbd60
--- /dev/null
+++ b/src/views/art/process/process-table-old.vue
@@ -0,0 +1,451 @@
+<template>
+  <VueScrollbar :class="$style.content">
+    <div :class="$style['flaw-detail']">
+      <div :class="$style['flaw-title']">
+        {{ $t('module.art.processName') }}
+      </div>
+      <div :class="$style['flaw-title']">
+        {{ $t('module.art.eqName') }}
+      </div>
+      <div :class="$style['flaw-title']">
+        {{ $t('module.art.recipeName') }}
+      </div>
+      <!-- <div :class="$style['flaw-title']">
+        {{ $t('module.art.materialBOM') }}
+      </div> -->
+      <div :class="$style['flaw-title']">
+        {{ $t('module.art.artType') }}
+      </div>
+      <div :class="$style['flaw-title']">
+        {{ $t('module.art.description') }}
+      </div>
+      <div :class="$style['flaw-title']">
+        {{ $t('module.art.remark') }}
+      </div>
+      <div :class="$style['flaw-btns']">
+        <el-button
+          type="success"
+          icon="el-icon-plus"
+          circle
+          @click="flawAdd()"
+        />
+      </div>
+    </div>
+    <div
+      v-for="(item, index) in process"
+      :key="index"
+      :class="$style['flaw-detail']"
+    >
+      <el-select
+        v-model="item.workSequenceId"
+        :class="$style['flaw-select']"
+        filterable
+        clearable
+        :placeholder="'placeholder.select' | i18nFilter"
+        @change="processChange($event, item)"
+      >
+        <el-option
+          v-for="processItem in processList"
+          :key="processItem.id"
+          :label="processItem.name"
+          :value="processItem.id"
+        />
+      </el-select>
+      <el-select
+        v-model="item.equipmentIdArr"
+        :class="$style['flaw-select']"
+        clearable
+        collapse-tags
+        :placeholder="'placeholder.select' | i18nFilter"
+        @change="equipmentChange(item.id, item)"
+      >
+        <el-option
+          v-for="equipment in item.processFlowEquipmentParams"
+          :key="equipment.id"
+          :label="equipment.name"
+          :value="equipment.id"
+        />
+      </el-select>
+      <el-select
+        v-model="item.repices"
+        :class="$style['flaw-select']"
+        filterable
+        clearable
+        :placeholder="'placeholder.select' | i18nFilter"
+      >
+        <el-option
+          v-for="param in item.params"
+          :key="param.id"
+          :label="param.name"
+          :value="param.id"
+        />
+      </el-select>
+      <!-- <el-select
+        v-model="item.boms"
+        :class="$style['flaw-select']"
+        filterable
+        clearable
+        :placeholder="'placeholder.select' | i18nFilter"
+      >
+        <el-option
+          v-for="bom in item.equipmentList[0].boms"
+          :key="bom.id"
+          :label="bom.name"
+          :value="bom.id"
+        />
+      </el-select> -->
+      <el-select
+        v-model="item.nodeTypes"
+        :class="$style['flaw-select']"
+        filterable
+        clearable
+        :placeholder="'placeholder.select' | i18nFilter"
+      >
+        <el-option
+          v-for="nodeType in nodeTypes"
+          :key="nodeType.value"
+          :label="nodeType.label"
+          :value="nodeType.value"
+        />
+      </el-select>
+      <el-input v-model="item.descriptions" :class="$style['flaw-select']" />
+      <el-input v-model="item.remarks" :class="$style['flaw-select']" />
+      <el-button
+        type="success"
+        icon="el-icon-plus"
+        circle
+        @click="flawAdd(item)"
+      />
+      <el-button
+        type="danger"
+        icon="el-icon-delete"
+        circle
+        @click="flawDel(item)"
+      />
+      <el-button
+        v-if="false"
+        type="info"
+        icon="el-icon-document"
+        circle
+        @click="$emit('on-detail', item)"
+      />
+    </div>
+  </VueScrollbar>
+</template>
+<script>
+import {
+  listAllEquipmentBom,
+  listAllEquipmentRecipe,
+  addProcessFlows,
+  listProcessFlowNode,
+  listProcess
+} from '@/api/art-manage/art.js'
+import { getInfo } from '@/api/art-manage/process'
+import { listEquipment } from '@/api/material-manage/material'
+import remove from 'lodash/remove.js'
+import findIndex from 'lodash/findIndex.js'
+import VueScrollbar from 'vue-perfect-scrollbar'
+export default {
+  name: 'ProcessTable',
+  components: { VueScrollbar },
+  props: {
+    processFlowId: {
+      type: String,
+      default: null
+    }
+  },
+  data() {
+    return {
+      defaultFlaws: [],
+      // process: {
+      //   processFlowId: this.processFlowId,
+      //   workSequenceIds: [],
+      //   processFlowEquipmentParams: [
+      //     {
+      //       equipmentId: null,
+      //       equipmentType: null,
+      //       equipmentRecipeId: null,
+      //       equipmentBomId: null,
+      //       nodeType: null,
+      //       processFlowId: this.processFlowId,
+      //       remark: null,
+      //       description: null,
+      //       boms: [],
+      //       params: [],
+      //       workSequenceId: null,
+      //       enabled: null
+      //     }
+      //   ]
+      // },
+      // {
+      //   equipmentId: null,
+      //   equipmentType: null,
+      //   equipmentRecipeId: null,
+      //   equipmentBomId: null,
+      //   nodeType: null,
+      //   processFlowId: this.processFlowId,
+      //   remark: null,
+      //   description: null,
+      //   boms: [],
+      //   params: [],
+      //   workSequenceId: null,
+      //   enabled: null
+      // }
+      process: [],
+      currentFlawRow: {},
+      productDetBarcode: '',
+      warehouseBarcode: '',
+      equipmentList: [],
+      equipmentBomList: [],
+      equipmentParamList: [],
+      processList: [],
+      // 1、上片设备，2、加工设备，3、下片设备
+      nodeTypes: [
+        {
+          value: 1,
+          label: '上片设备'
+        },
+        {
+          value: 2,
+          label: '加工设备'
+        },
+        {
+          value: 3,
+          label: '下片设备'
+        }
+      ]
+    }
+  },
+  created() {
+    this.init()
+    this.$bus.on('on-process-save', this.save)
+  },
+  beforeDestroy() {
+    this.$bus.off('on-process-save', this.save)
+  },
+  mounted() {},
+  methods: {
+    flawAdd(item) {
+      const mid = [
+        {
+          processFlowId: this.processFlowId,
+          workSequenceId: null,
+          workSequenceName: null,
+          equipmentIdArr: [],
+          repices: null,
+          nodeTypes: null,
+          descriptions: null,
+          remarks: null,
+          boms: [],
+          params: [],
+          processFlowEquipmentParams: []
+        }
+      ]
+      if (!item) {
+        this.process = mid.concat(
+          this.process
+        )
+        return
+      }
+      const index = findIndex(
+        this.process,
+        f => f === item
+      )
+      console.log(index)
+      const { length } = this.process
+      const beg = this.process.slice(0, index + 1)
+      const end = this.process.slice(
+        index + 1,
+        length
+      )
+
+      this.process = [].concat(beg, mid, end)
+    },
+    flawDel(item) {
+      console.log(item)
+      remove(this.process, f => f === item)
+      console.log(this.process)
+      this.process = this.process.concat(
+        []
+      )
+    },
+    focusFlaw(item) {
+      console.log(item)
+      this.currentFlawRow = item
+    },
+    setFlaw(flaw) {
+      console.log(flaw)
+      this.currentFlawRow.description = flaw.defectName
+      this.currentFlawRow.fabricId = flaw.id
+    },
+    reset() {
+      console.log(this.defaultFlaws)
+      this.process.processFlowSequenceEquipmentParams = JSON.parse(
+        JSON.stringify(this.defaultFlaws)
+      )
+    },
+    save() {
+      const vm = this
+      let hasNull = false
+      this.process.map(item => {
+        if (!item.equipmentIdArr || !item.repices) {
+          hasNull = true
+        }
+      })
+      console.log(JSON.stringify(vm.process))
+      if (vm.process.length === 0) {
+        vm.$alert(this.$t('module.art.nodeNull'), this.$t('module.art.tip'), {
+          confirmButtonText: this.$t('module.art.confirm'),
+          callback: action => {
+            console.log('保存')
+            vm.handleSave(vm)
+          }
+        })
+      } else if (hasNull) {
+        vm.$message.error(this.$t('module.art.hasNull'))
+      } else {
+        vm.handleSave(vm)
+      }
+    },
+    handleSave(vm) {
+      console.log(vm.process)
+      vm.process.map(item => {
+        item.processFlowEquipmentParams.map((i, index) => {
+          i.equipmentRecipeId = item.repices
+          // i.equipmentBomId = item.boms
+          i.equipmentId = i.id
+          i.nodeType = item.nodeTypes
+          i.processFlowId = this.processFlowId
+          i.remark = item.remarks
+          i.description = item.descriptions
+          i.enabled = item.equipmentIdArr === i.id ? 1 : 0
+          return i
+        })
+        return item
+      })
+      const processFlowParamObj = {
+        processFlowSequenceEquipmentParams: vm.process
+      }
+      console.log(JSON.stringify(processFlowParamObj))
+      addProcessFlows(processFlowParamObj).then(res => {
+        this.$emit('on-save-success')
+      })
+    },
+    async init() {
+      const allBomRes = await listAllEquipmentBom()
+      this.equipmentBomList = allBomRes.data
+      const allRecipeRes = await listAllEquipmentRecipe()
+      this.equipmentParamList = allRecipeRes.data
+      const allEquipmentRes = await listEquipment()
+      this.equipmentList = allEquipmentRes.data
+      const allProcessRes = await listProcess({
+        current: 1,
+        size: 999
+      })
+      this.processList = allProcessRes.data.records
+      const allNodeRes = await listProcessFlowNode({
+        processFlowId: this.processFlowId
+      })
+      console.log(allNodeRes)
+      const allNodes = allNodeRes.data
+      console.log(allNodes)
+      if (allNodes && allNodes.length === 0) {
+        this.process = [{
+          processFlowId: this.processFlowId,
+          equipmentIdArr: [],
+          equipmentList: [],
+          repices: null,
+          nodeTypes: null,
+          descriptions: null,
+          remarks: null,
+          boms: [],
+          params: [],
+          processFlowEquipmentParams: []
+        }]
+        return
+      }
+      this.process = allNodes
+      allNodes.map((item, index) => {
+        this.process[index].processFlowId = this.processFlowId
+        item.processFlowEquipmentVoList.map(i => {
+          if (i.enabled) {
+            this.process[index].equipmentIdArr = i.equipmentId
+            this.process[index].params = this.equipmentParamList.filter(f => f.equipmentId === i.equipmentId)
+            this.process[index].boms = this.equipmentBomList.filter(f => f.equipmentId === i.equipmentId)
+            this.process[index].repices = i.equipmentRecipeId
+            this.process[index].nodeTypes = i.nodeType
+            this.process[index].descriptions = i.description
+            this.process[index].remarks = i.remark
+          }
+        })
+        // this.process[index].repices = item.processFlowEquipmentVoList.map(item => { return item.equipmentRecipeId }).filter(f => f)
+        // this.process[index].nodeTypes = item.processFlowEquipmentVoList.map(item => { return item.nodeType }).filter(f => f)
+        this.process[index].processFlowEquipmentParams = item.processFlowEquipmentVoList.map(m => {
+          return {
+            ...m,
+            processFlowId: this.processFlowId,
+            workSequenceId: item.workSequenceId,
+            name: m.equipmentName
+          }
+        })
+      })
+      console.log(this.process)
+    },
+    equipmentChange(val, item) {
+      console.log(val, item)
+      item.repices = null
+      item.boms = this.equipmentBomList.filter(f => f.equipmentId === item.processFlowEquipmentParams[0].id)
+      item.params = this.equipmentParamList.filter(f => f.equipmentId === item.equipmentIdArr)
+    },
+    processChange(id, item) {
+      console.log(id, item)
+      item.equipmentList = []
+      getInfo({ id }).then(res => {
+        item.processFlowEquipmentParams = []
+        for (let i = 0; i < this.equipmentList.length; i++) {
+          for (let z = 0; z < res.data.equipmentIds.length; z++) {
+            if (this.equipmentList[i].id === res.data.equipmentIds[z]) {
+              item.processFlowEquipmentParams.push(this.equipmentList[i])
+            }
+          }
+        }
+        console.log(item.processFlowEquipmentParams)
+        this.equipmentChange(id, item)
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" module>
+$colWidth: 200px;
+.content {
+  padding: 16px;
+  margin: 16px;
+  position: relative;
+  height: calc(100vh - 160px);
+  .flaw-detail {
+    width: 1400px;
+    position: relative;
+    display: flex;
+    align-items: center;
+    .flaw-title {
+      position: relative;
+      width: $colWidth;
+      text-align: center;
+      border: 1px solid #ccc;
+      background-color: #eee;
+      padding: 8px;
+    }
+    .flaw-btns {
+      position: relative;
+      width: $colWidth;
+      text-align: left;
+    }
+    .flaw-select {
+      position: relative;
+      width: $colWidth;
+      height: 40px;
+    }
+  }
+}
+</style>
diff --git a/src/views/art/process/process-table-select.vue b/src/views/art/process/process-table-select.vue
new file mode 100644
index 0000000..7ca47a6
--- /dev/null
+++ b/src/views/art/process/process-table-select.vue
@@ -0,0 +1,71 @@
+<!--
+ * @Date: 2021-01-07 20:09:37
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-04-16 15:00:51
+ * @FilePath: \basic-admin\src\components\BaseTable\subcomponents\CheckDetail.vue
+ * @Description:
+-->
+<template>
+  <el-dialog
+    :close-on-click-modal="false"
+    width="60%"
+    top="50px"
+    :title="$t('module.art.processName')"
+    :visible.sync="visible"
+    @close="value = null"
+  >
+    <el-row>
+      {{ $t(typeList[stype]) }}：
+      <el-select v-model="value" filterable>
+        <el-option v-for="item in list" :key="item.id" :value="item.id" :label="item.name" />
+      </el-select>
+    </el-row>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="handleConfirm()">{{ 'btn.confirm' | i18nFilter }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+
+export default {
+  data() {
+    return {
+      visible: false,
+      value: null,
+      first: 0,
+      second: 0,
+      stype: null,
+      list: [],
+      typeList: {
+        equipmentId: 'module.art.eqName',
+        equipmentRecipeId: 'module.art.recipeName',
+        nodeType: 'module.art.artType'
+      }
+    }
+  },
+  watch: {},
+  mounted() {},
+  methods: {
+    init(stype, first, second, id, list) {
+      this.visible = true
+      this.stype = stype
+      this.list = list
+      this.first = first
+      this.second = second
+      this.value = id
+    },
+    handleConfirm() {
+      this.$emit('handleSelect', this.stype, this.first, this.second, this.value)
+    },
+    closed() {
+      this.visible = false
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+
+</style>
diff --git a/src/views/art/process/process-table.vue b/src/views/art/process/process-table.vue
new file mode 100644
index 0000000..30488a8
--- /dev/null
+++ b/src/views/art/process/process-table.vue
@@ -0,0 +1,376 @@
+<template>
+  <div class="process-table">
+    <el-button class="process-table-addprocess" type="primary" @click="addProcess">{{ $t('module.art.processList.addProcess') }}</el-button>
+    <el-collapse class="process-table-main" @change="handleChange">
+      <vuedraggable v-model="dataList" group="process">
+        <el-collapse-item v-for="(item, index) in dataList" :key="index" :name="index">
+          <template slot="title">
+            <div class="process-table-main-title">
+              <span>{{ processObj[item.workSequenceId].name }}</span>
+              <div class="process-table-main-title-delbtn">
+                <el-button v-if="showAddList.indexOf(index) >= 0" type="primary" size="mini" icon="el-icon-plus" @click="addProcessItem($event, index)">{{ 'btn.add' | i18nFilter }}</el-button>
+                <el-button type="danger" size="mini" icon="el-icon-delete" @click="delProcess($event, index)">{{ 'btn.delete' | i18nFilter }}</el-button>
+              </div>
+            </div>
+          </template>
+          <el-row v-for="(i, idx) in item.processFlowEquipmentParams" :key="'item' + index + idx" class="process-table-main-item" :gutter="20">
+            <el-col :span="4" class="process-table-main-item-item">
+              <el-button icon="el-icon-edit" @click="choiceEquipment(index, idx, i.equipmentId, item.workSequenceId)">
+                {{ i.equipmentId ? equipmentObj[i.equipmentId] : $t('module.art.eqName') }}
+              </el-button>
+            </el-col>
+            <el-col :span="4" class="process-table-main-item-item">
+              <el-button v-if="!processPortObj[item.workSequenceId]" icon="el-icon-edit" @click="choiceRecipe(index, idx, i.equipmentRecipeId)">
+                {{ i.equipmentRecipeId ? equipmentRecipeObj[i.equipmentRecipeId] : $t('module.art.recipeName') }}
+              </el-button>
+            </el-col>
+            <!-- <el-col :span="4" class="process-table-main-item-item">
+              <el-button v-if="!processPortObj[item.workSequenceId]" icon="el-icon-edit" @click="choiceArtType(index, idx, i.nodeType)">
+                {{ i.nodeType ? nodeTypesObj[i.nodeType] : $t('module.art.artType') }}
+              </el-button>
+            </el-col> -->
+            <el-col :span="4" class="process-table-main-item-item">
+              <el-input v-model="i.description" :placeholder="$t('module.art.processList.description')" @change="changeDescription(index, idx)" />
+            </el-col>
+            <el-col :span="4" class="process-table-main-item-item">
+              <el-input v-model="i.remark" :placeholder="$t('module.art.remark')" @change="changeRemark(index, idx)" />
+            </el-col>
+            <el-col :span="3" class="process-table-main-item-item">
+              <el-button type="danger" icon="el-icon-delete" @click="delProcessItem(index, idx)">
+                {{ 'btn.delete' | i18nFilter }}
+              </el-button>
+            </el-col>
+          </el-row>
+        </el-collapse-item>
+      </vuedraggable>
+    </el-collapse>
+    <!-- 添加工序 -->
+    <process-table-add ref="processtableadd" :process-list="processList" @handleProcess="handleProcess" />
+    <process-table-select ref="processtableselect" @handleSelect="handleSelect" />
+  </div>
+</template>
+<script>
+import Vue from 'vue'
+import processTableSelect from './process-table-select.vue'
+import processTableAdd from './process-table-add.vue'
+import vuedraggable from 'vuedraggable'
+import {
+  listAllEquipmentRecipe,
+  addProcessFlows,
+  listProcessFlowNode,
+  listProcess
+} from '@/api/art-manage/art.js'
+import { listEquipment } from '@/api/material-manage/material'
+
+export default {
+  name: 'ProcessTable',
+  components: {
+    vuedraggable,
+    processTableAdd,
+    processTableSelect
+  },
+  props: {
+    processFlowId: {
+      type: String,
+      default: null
+    }
+  },
+  data() {
+    return {
+      dataList: [],
+      processList: [],
+      processObj: {},
+      processPortObj: {},
+      equipmentRecipeList: [],
+      equipmentRecipeObj: [],
+      equipmentList: [],
+      equipmentObj: {},
+      showAddList: [],
+      // 1、上片设备，2、加工设备，3、下片设备
+      nodeTypes: [
+        {
+          id: 1,
+          name: '上片设备'
+        },
+        {
+          id: 2,
+          name: '加工设备'
+        },
+        {
+          id: 3,
+          name: '下片设备'
+        }
+      ],
+      nodeTypesObj: {
+        1: '上片设备',
+        2: '加工设备',
+        3: '下片设备'
+      }
+    }
+  },
+  created() {
+    this.init()
+    this.$bus.on('on-process-save', this.save)
+  },
+  beforeDestroy() {
+    this.$bus.off('on-process-save', this.save)
+  },
+  mounted() {},
+  methods: {
+    // 初始化
+    async init() {
+      // 获取工序列表
+      const allProcessRes = await listProcess({})
+      this.processList = allProcessRes.data
+      allProcessRes.data.map(item => {
+        this.processObj[item.id] = item
+        if (item.type === 1) {
+          this.processPortObj[item.id] = item.name
+        }
+      })
+      console.log(this.processList)
+      console.log(this.processObj)
+      // 获取配方列表
+      const allRecipeRes = await listAllEquipmentRecipe()
+      this.equipmentRecipeList = allRecipeRes.data
+      allRecipeRes.data.map(item => {
+        this.equipmentRecipeObj[item.id] = item.name
+      })
+      console.log(this.equipmentRecipeList)
+      // 获取设备列表
+      const allEquipmentRes = await listEquipment()
+      this.equipmentList = allEquipmentRes.data
+      allEquipmentRes.data.map(item => {
+        this.equipmentObj[item.id] = item.name
+      })
+      console.log(this.equipmentList)
+      // 获取列表
+      const allNodeRes = await listProcessFlowNode({
+        processFlowId: this.processFlowId
+      })
+      console.log(allNodeRes)
+      this.dataList = allNodeRes.data.map(item => {
+        delete item.id
+        item.processFlowEquipmentParams.map(i => {
+          delete i.id
+          i.workSequenceId = item.workSequenceId
+          i.processFlowId = item.processFlowId
+          return i
+        })
+        return item
+      })
+      console.log(this.dataList)
+    },
+    // 添加工序
+    addProcess() {
+      this.$refs.processtableadd.init()
+    },
+    handleProcess(process) {
+      // for (let i = 0; i < this.dataList.length; i++) {
+      //   if (this.dataList[i].workSequenceId === process) {
+      //     this.$message.warning(this.$t('module.art.NotSameProcess'))
+      //     return
+      //   }
+      // }
+      this.dataList.push({
+        processFlowId: this.processFlowId,
+        workSequenceId: process,
+        processFlowEquipmentParams: [
+          {
+            equipmentId: '',
+            equipmentRecipeId: '',
+            nodeType: '',
+            processFlowId: this.processFlowId,
+            workSequenceId: process,
+            description: '',
+            remark: ''
+          }
+        ]
+      })
+      this.$refs.processtableadd.closeDialog()
+    },
+    // 添加工序下设备
+    addProcessItem(e, index) {
+      this.dataList[index].processFlowEquipmentParams.push({
+        equipmentId: '',
+        equipmentRecipeId: '',
+        nodeType: '',
+        processFlowId: this.processFlowId,
+        workSequenceId: this.dataList[index].workSequenceId,
+        description: this.dataList[index].processFlowEquipmentParams[0]?.description ? this.dataList[index].processFlowEquipmentParams[0].description : '',
+        remark: this.dataList[index].processFlowEquipmentParams[0]?.remark ? this.dataList[index].processFlowEquipmentParams[0].remark : ''
+      })
+      e.stopPropagation()
+    },
+    // 删除工序
+    delProcess(e, index) {
+      this.$confirm(`${this.$t('deleteTip.header')}${this.processObj[this.dataList[index].workSequenceId].name}${this.$t('deleteTip.footer')}`, this.$t('deleteTip.tip'), {
+        confirmButtonText: this.$t('deleteTip.confirm'),
+        cancelButtonText: this.$t('deleteTip.cancel'),
+        type: 'warning'
+      }).then(() => {
+        this.dataList.splice(index, 1)
+      }).catch(() => {})
+      e.stopPropagation()
+    },
+    // 删除工序下设备
+    delProcessItem(first, sec) {
+      this.$confirm(`${this.$t('deleteTip.header')}${this.dataList[first].processFlowEquipmentParams[sec].equipmentId ? this.equipmentObj[this.dataList[first].processFlowEquipmentParams[sec].equipmentId] : this.$t('deleteTip.this')}${this.$t('deleteTip.footer')}`, this.$t('deleteTip.tip'), {
+        confirmButtonText: this.$t('deleteTip.confirm'),
+        cancelButtonText: this.$t('deleteTip.cancel'),
+        type: 'warning'
+      }).then(() => {
+        this.dataList[first].processFlowEquipmentParams.splice(sec, 1)
+      }).catch(() => {})
+    },
+    // 折叠菜单状态改变事件
+    handleChange(list) {
+      this.showAddList = list
+    },
+    // 选择设备
+    choiceEquipment(first, sec, id, processId) {
+      this.$refs.processtableselect.init('equipmentId', first, sec, id, this.processObj[processId].equipments)
+    },
+    // 选择配方
+    choiceRecipe(first, sec, id) {
+      if (this.dataList[first].processFlowEquipmentParams[sec]?.equipmentId) {
+        this.$refs.processtableselect.init('equipmentRecipeId', first, sec, id, this.equipmentRecipeList.filter(f => f.equipmentId === this.dataList[first].processFlowEquipmentParams[sec].equipmentId))
+      } else {
+        this.$message.error(this.$t('module.art.choiceEqError'))
+      }
+    },
+    // 选择工艺类型
+    choiceArtType(first, sec, id) {
+      if (this.dataList[first].processFlowEquipmentParams[sec]?.equipmentId) {
+        this.$refs.processtableselect.init('nodeType', first, sec, id, this.nodeTypes)
+      } else {
+        this.$message.error(this.$t('module.art.choiceEqError'))
+      }
+    },
+    // 选择设备配方工艺类型
+    handleSelect(type, first, sec, val) {
+      let change = true
+      if (type === 'equipmentId') {
+        this.dataList[first].processFlowEquipmentParams.map((item, index) => {
+          if (val === item.equipmentId && index !== sec) {
+            change = false
+          }
+        })
+      }
+      if (change) {
+        Vue.set(this.dataList[first].processFlowEquipmentParams[sec], type, val)
+        this.$refs.processtableselect.closed()
+      } else {
+        this.$message.error(this.$t('module.art.sameEqError'))
+      }
+      console.log(this.dataList)
+    },
+    // 描述变更
+    changeDescription(first, sec) {
+      if (sec === 0 && this.dataList[first].processFlowEquipmentParams.length > 1) {
+        this.$confirm(`${this.$t('module.art.changeTipHeaderDes')}${this.processObj[this.dataList[first].workSequenceId].name}${this.$t('module.art.changeTipFooter')}`, this.$t('deleteTip.tip'), {
+          confirmButtonText: this.$t('deleteTip.confirm'),
+          cancelButtonText: this.$t('deleteTip.cancel'),
+          type: 'info'
+        }).then(() => {
+          this.dataList[first].processFlowEquipmentParams.map(item => {
+            Vue.set(item, 'description', this.dataList[first].processFlowEquipmentParams[0].description)
+          })
+        }).catch(() => {})
+      }
+    },
+    // 备注变更
+    changeRemark(first, sec) {
+      if (sec === 0 && this.dataList[first].processFlowEquipmentParams.length > 1) {
+        this.$confirm(`${this.$t('module.art.changeTipHeaderRemark')}${this.processObj[this.dataList[first].workSequenceId].name}${this.$t('module.art.changeTipFooter')}`, this.$t('deleteTip.tip'), {
+          confirmButtonText: this.$t('deleteTip.confirm'),
+          cancelButtonText: this.$t('deleteTip.cancel'),
+          type: 'info'
+        }).then(() => {
+          this.dataList[first].processFlowEquipmentParams.map(item => {
+            Vue.set(item, 'remark', this.dataList[first].processFlowEquipmentParams[0].remark)
+          })
+        }).catch(() => {})
+      }
+    },
+    // 保存
+    save() {
+      const vm = this
+      let hasNull = false
+      this.dataList.map(item => {
+        if (item.processFlowEquipmentParams.length === 0) {
+          hasNull = true
+        }
+        if (this.processPortObj[item.workSequenceId]) {
+          item.processFlowEquipmentParams.map(i => {
+            if (!i.equipmentId) {
+              hasNull = true
+            }
+          })
+        } else {
+          item.processFlowEquipmentParams.map(i => {
+            if (!i.equipmentId || !i.equipmentRecipeId) {
+              hasNull = true
+            }
+          })
+        }
+      })
+      // console.log(JSON.stringify(vm.dataList))
+      // if (vm.dataList.length === 0) {
+      //   vm.$alert(this.$t('module.art.nodeNull'), this.$t('module.art.tip'), {
+      //     confirmButtonText: this.$t('module.art.confirm'),
+      //     callback: action => {
+      //       console.log('保存')
+      //       vm.handleSave(vm)
+      //     }
+      //   })
+      // } else
+      if (hasNull) {
+        vm.$message.error(this.$t('module.art.hasNull'))
+      } else {
+        vm.handleSave(vm)
+      }
+    },
+    handleSave(vm) {
+      const processFlowParamObj = {
+        processFlowSequenceEquipmentParams: vm.dataList
+      }
+      console.log(JSON.stringify(processFlowParamObj))
+      addProcessFlows(processFlowParamObj).then(res => {
+        this.$emit('on-save-success')
+      })
+    }
+  }
+}
+</script>
+<style lang="scss">
+  .process-table{
+    .process-table-addprocess{
+      margin-left: 20px;
+      margin-top: 20px;
+    }
+    .process-table-main{
+      width: calc(100% - 40px);
+      margin: 20px;
+      border: 1px solid #e6ebf5;
+      border-radius: 5px;
+      min-width: 1000px;
+      .process-table-main-title{
+        padding: 0 20px;
+        width: 100%;
+        position: relative;
+        .process-table-main-title-delbtn{
+          position: absolute;
+          top: 50%;
+          right: 20px;
+          transform: translateY(-50%);
+        }
+      }
+      .process-table-main-item{
+        width: calc(100% - 40px);
+        margin: 0 10px !important;
+        line-height: 48px;
+      }
+    }
+  }
+</style>
diff --git a/src/views/art/processList.vue b/src/views/art/processList.vue
new file mode 100644
index 0000000..7508a43
--- /dev/null
+++ b/src/views/art/processList.vue
@@ -0,0 +1,183 @@
+<!--
+ * @Author: gtz
+ * @Date: 2021-04-06 20:07:22
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-06-23 16:22:06
+ * @Description: file content
+-->
+<template>
+  <div class="usermanager-container">
+    <head-form
+      :placeholder-name="placeholderName"
+      :key-name="keyName"
+      @getDataList="getList"
+      @add="addNew"
+    />
+    <base-table :table-config="tableProps" :table-data="list" :is-loading="listLoading" :page="listQuery.current" :limit="listQuery.size">
+      <method-btn slot="handleBtn" :method-list="tableBtn" @clickBtn="handleClick" />
+    </base-table>
+    <pagination :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.size" @pagination="getList" />
+    <Process-add v-if="addOrUpdateVisible" ref="addOrUpdate" :eq-list="eqList" @refreshDataList="getList" />
+  </div>
+</template>
+
+<script>
+// edit here
+import DataDict from './filters'
+const tableBtn = [{
+  type: 'edit',
+  btnName: 'btn.edit'
+}, {
+  type: 'delete',
+  btnName: 'btn.delete'
+}]
+const tableProps = [{
+  prop: 'name',
+  label: i18n.t('module.art.processList.processName'),
+  align: 'center'
+}, {
+  prop: 'type',
+  label: i18n.t('module.art.processList.type'),
+  align: 'center',
+  filter: DataDict('typeFilter')
+}, {
+  prop: 'description',
+  label: i18n.t('module.art.processList.description'),
+  align: 'center'
+}]
+import BaseTable from '@/components/BaseTable'
+// edit here
+import { list, del } from '@/api/art-manage/process'
+import { equipmentInfoList } from '@/api/basicData/Equipment/equipmentInfo'
+import HeadForm from '@/components/basicData/HeadForm'
+import ProcessAdd from './components/Process-add'
+import Pagination from '@/components/Pagination'
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import i18n from '@/lang'
+export default {
+  name: 'OrgManager',
+  components: { Pagination, BaseTable, MethodBtn, HeadForm, ProcessAdd },
+  props: {},
+  data() {
+    return {
+      keyName: i18n.t('module.art.processList.processName'),
+      placeholderName: this.$t('module.art.processList.processName'),
+      tableBtn,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      showDialog: false,
+      curEditId: null,
+      showEditDialog: false,
+      addOrUpdateVisible: false,
+      listQuery: {
+        current: 1,
+        size: 10,
+        key: ''
+      },
+      date: null,
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      },
+      eqList: []
+    }
+  },
+  computed: {
+    orderId() {
+      return this.$route.query.orderId
+    }
+  },
+  created() {
+    this.getEqList()
+    // this.listLoading = false
+  },
+  mounted() {},
+  methods: {
+    handleClick(raw) {
+      console.log(raw)
+      switch (raw.type) {
+        case 'delete':
+          this.$confirm(i18n.t('deleteMsgBox.content'), i18n.t('deleteMsgBox.hint'), {
+            confirmButtonText: i18n.t('btn.confirm'),
+            cancelButtonText: i18n.t('btn.cancel'),
+            type: 'warning'
+          }).then(async() => {
+            // 走接口
+            const result = await del({
+              id: raw.data.id
+            })
+            if (result.code === 0) {
+              this.$message({
+                type: 'success',
+                message: i18n.t('deleteMsgBox.doneMsg')
+              })
+              this.getList()
+            }
+          })
+          break
+        case 'edit':
+          this.addNew(raw.data.id)
+          break
+      }
+    },
+    async getEqList(key) {
+      // edit here
+      const res = await equipmentInfoList({
+        current: 1,
+        size: 999
+      })
+      if (res.code === 0) {
+        this.eqList = res.data.records
+      }
+      this.getList()
+    },
+    async getList(key) {
+      this.listLoading = true
+      if (typeof (key) === 'string') {
+        this.listQuery.key = key
+      }
+      // edit here
+      const res = await list(this.listQuery)
+      console.log(res)
+      if (res.code === 0) {
+        this.list = res.data.records ? res.data.records : []
+        this.total = res.data.total
+        this.listLoading = false
+      }
+    },
+    // 新增 / 修改
+    addNew(id) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id)
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.usermanager-container {
+  padding: 20px;
+  .method-btn-area {
+    padding: 15px 30px;
+    margin: 10px 0 20px 0;
+    border: 1px solid #dfe6ec;
+  }
+  .tree-select-container {
+    border: 1px solid #dfe6ec;
+    min-height: 400px;
+    padding: 20px;
+  }
+}
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/basicData/AlarmManagement/alarmInfo.vue b/src/views/basicData/AlarmManagement/alarmInfo.vue
new file mode 100644
index 0000000..c9438ca
--- /dev/null
+++ b/src/views/basicData/AlarmManagement/alarmInfo.vue
@@ -0,0 +1,242 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-09 14:44:54
+ * @Description:
+-->
+<template>
+  <div class="app-container">
+    <el-form :inline="true" :model="listQuery" @keyup.enter.native="getList()">
+      <el-form-item :label="$t('module.basicData.alarmManagement.AlarmCode')" prop="code">
+        <el-input v-model="listQuery.code" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.alarmManagement.AlarmCode')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.alarmManagement.AlarmType')" prop="alarmType">
+        <el-select v-model="listQuery.alarmType" filterable :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.alarmManagement.AlarmType')])" clearable>
+          <el-option
+            v-for="item in TypeArr"
+            :key="item.id"
+            :label="item.name"
+            :value="item.name"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.alarmManagement.AlarmLevel')" prop="alarmGrade">
+        <el-select v-model="listQuery.alarmGrade" filterable :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.alarmManagement.AlarmLevel')])" clearable>
+          <el-option
+            v-for="item in GradeArr"
+            :key="item.id"
+            :label="item.alarmGrade"
+            :value="item.alarmGrade"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="getList()">{{ 'btn.search' | i18nFilter }}</el-button>
+        <el-button type="primary" @click="addNew()">{{ 'btn.add' | i18nFilter }}</el-button>
+      </el-form-item>
+    </el-form>
+    <base-table
+      :table-config="tableProps"
+      :table-data="list"
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :is-loading="listLoading"
+    >
+      <method-btn
+        slot="handleBtn"
+        :width="trueWidth"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      @pagination="getList()"
+    />
+    <alarmInfo-add v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
+  </div>
+</template>
+
+<script>import i18n from '@/lang'
+import { alarmInfoList, alarmInfoDelete } from '@/api/basicData/AlarmManagement/alarmInfo'
+import { alarmLevelList } from '@/api/basicData/AlarmManagement/alarmLevel'
+import { alarmTypeList } from '@/api/basicData/AlarmManagement/alarmType'
+import alarmInfoAdd from './components/alarmInfo-add.vue'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import { timeFormatter } from '@/filters'
+// , handleLimit
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+
+const tableBtn = [
+  {
+    type: 'edit',
+    btnName: 'btn.edit'
+  },
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  }
+]
+const tableProps = [
+  {
+    prop: 'createTime',
+    label: i18n.t('module.basicData.factory.createTime'),
+    filter: timeFormatter,
+    align: 'center'
+  },
+  {
+    prop: 'code',
+    label: i18n.t('module.basicData.alarmManagement.AlarmCode'),
+    align: 'center'
+  },
+  {
+    prop: 'name',
+    label: i18n.t('module.basicData.alarmManagement.AlarmName'),
+    align: 'center'
+  },
+  {
+    prop: 'alarmGrade',
+    label: i18n.t('module.basicData.alarmManagement.AlarmLevel'),
+    align: 'center'
+  },
+  {
+    prop: 'alarmType',
+    label: i18n.t('module.basicData.alarmManagement.AlarmType'),
+    align: 'center'
+  },
+  // {
+  //   prop: 'alarmContent',
+  //   label: i18n.t('module.basicData.alarmManagement.AlarmContent'),
+  //   align: 'center',
+  //   filter: handleLimit
+  // },
+  {
+    prop: 'remark',
+    label: i18n.t('module.basicData.visual.Remarks'),
+    align: 'center'
+  }
+]
+
+export default {
+  name: 'AlarmInfo',
+  components: { Pagination, BaseTable, MethodBtn, alarmInfoAdd },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      addOrUpdateVisible: false,
+      tableBtn,
+      trueWidth: 200,
+      tableProps,
+      list: [],
+      GradeArr: [],
+      TypeArr: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        current: 1,
+        size: 10,
+        alarmType: '',
+        code: '',
+        alarmGrade: ''
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    handleClick(raw) {
+      console.log(raw)
+      if (raw.type === 'delete') {
+        this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`, this.$t('module.basicData.visual.Tips'), {
+          confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+          cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+          type: 'warning'
+        }).then(() => {
+          alarmInfoDelete(raw.data.id).then(response => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+              }
+            })
+          })
+        }).catch(() => {})
+      } else {
+        this.addNew(raw.data.id)
+      }
+    },
+    getList() {
+      const lQuery = {
+        current: 1,
+        size: 999
+      }
+      alarmTypeList(lQuery).then(response => {
+        this.TypeArr = response.data.records
+      })
+      alarmLevelList(lQuery).then(response => {
+        this.GradeArr = response.data.records
+      })
+      this.listLoading = true
+      alarmInfoList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    },
+    // 新增 / 修改
+    addNew(id) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id)
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/basicData/AlarmManagement/alarmLevel.vue b/src/views/basicData/AlarmManagement/alarmLevel.vue
new file mode 100644
index 0000000..b1d7ca9
--- /dev/null
+++ b/src/views/basicData/AlarmManagement/alarmLevel.vue
@@ -0,0 +1,190 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-11 16:41:26
+ * @Description:
+-->
+<template>
+  <div class="app-container">
+    <head-form
+      :placeholder-name="placeholderName"
+      :key-name="keyName"
+      @getDataList="getList"
+      @add="addNew"
+    />
+    <base-table
+      :table-config="tableProps"
+      :table-data="list"
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :is-loading="listLoading"
+    >
+      <method-btn
+        slot="handleBtn"
+        :width="trueWidth"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      @pagination="getList()"
+    />
+    <alarmLevel-add v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
+  </div>
+</template>
+
+<script>import i18n from '@/lang'
+import { alarmLevelList, alarmLevelDelete } from '@/api/basicData/AlarmManagement/alarmLevel'
+import alarmLevelAdd from './components/alarmLevel-add.vue'
+import HeadForm from '@/components/basicData/HeadForm'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import { timeFormatter } from '@/filters'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+
+const tableBtn = [
+  {
+    type: 'edit',
+    btnName: 'btn.edit'
+  },
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  }
+]
+const tableProps = [
+  {
+    prop: 'createTime',
+    label: i18n.t('module.basicData.factory.createTime'),
+    filter: timeFormatter,
+    align: 'center'
+  },
+  {
+    prop: 'alarmGradeCode',
+    label: i18n.t('module.basicData.alarmManagement.LevelCode'),
+    align: 'center'
+  },
+  {
+    prop: 'alarmGrade',
+    label: i18n.t('module.basicData.alarmManagement.AlarmLevel'),
+    align: 'center'
+  },
+  {
+    prop: 'remark',
+    label: i18n.t('module.basicData.visual.Remarks'),
+    align: 'center'
+  }
+]
+
+export default {
+  name: 'AlarmLevel',
+  components: { Pagination, BaseTable, MethodBtn, HeadForm, alarmLevelAdd },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      keyName: i18n.t('module.basicData.visual.keyword'),
+      placeholderName: this.$t('module.basicData.alarmManagement.AlarmLevel') + this.$t('module.basicData.visual.Or') + this.$t('module.basicData.alarmManagement.LevelCode'),
+      addOrUpdateVisible: false,
+      tableBtn,
+      trueWidth: 200,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        current: 1,
+        size: 10
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    handleClick(raw) {
+      console.log(raw)
+      if (raw.type === 'delete') {
+        this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.alarmGrade}]?`, this.$t('module.basicData.visual.Tips'), {
+          confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+          cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+          type: 'warning'
+        }).then(() => {
+          alarmLevelDelete(raw.data.id).then(response => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+              }
+            })
+          })
+        }).catch(() => {})
+      } else {
+        this.addNew(raw.data.id)
+      }
+    },
+    getList(key) {
+      this.listLoading = true
+      this.listQuery.alarmGrade = key
+      this.listQuery.alarmGradeCode = key
+      alarmLevelList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    },
+    // 新增 / 修改
+    addNew(id) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id)
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/basicData/AlarmManagement/alarmType.vue b/src/views/basicData/AlarmManagement/alarmType.vue
new file mode 100644
index 0000000..78d5f58
--- /dev/null
+++ b/src/views/basicData/AlarmManagement/alarmType.vue
@@ -0,0 +1,190 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-11 16:41:43
+ * @Description:
+-->
+<template>
+  <div class="app-container">
+    <head-form
+      :placeholder-name="placeholderName"
+      :key-name="keyName"
+      @getDataList="getList"
+      @add="addNew"
+    />
+    <base-table
+      :table-config="tableProps"
+      :table-data="list"
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :is-loading="listLoading"
+    >
+      <method-btn
+        slot="handleBtn"
+        :width="trueWidth"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      @pagination="getList()"
+    />
+    <alarmType-add v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
+  </div>
+</template>
+
+<script>import i18n from '@/lang'
+import { alarmTypeList, alarmTypeDelete } from '@/api/basicData/AlarmManagement/alarmType'
+import alarmTypeAdd from './components/alarmType-add.vue'
+import HeadForm from '@/components/basicData/HeadForm'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import { timeFormatter } from '@/filters'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+
+const tableBtn = [
+  {
+    type: 'edit',
+    btnName: 'btn.edit'
+  },
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  }
+]
+const tableProps = [
+  {
+    prop: 'createTime',
+    label: i18n.t('module.basicData.factory.createTime'),
+    filter: timeFormatter,
+    align: 'center'
+  },
+  {
+    prop: 'code',
+    label: i18n.t('module.basicData.alarmManagement.AlarmTypeCode'),
+    align: 'center'
+  },
+  {
+    prop: 'name',
+    label: i18n.t('module.basicData.alarmManagement.AlarmType'),
+    align: 'center'
+  },
+  {
+    prop: 'remark',
+    label: i18n.t('module.basicData.visual.Remarks'),
+    align: 'center'
+  }
+]
+
+export default {
+  name: 'AlarmType',
+  components: { Pagination, BaseTable, MethodBtn, HeadForm, alarmTypeAdd },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      keyName: i18n.t('module.basicData.visual.keyword'),
+      placeholderName: this.$t('module.basicData.alarmManagement.AlarmType') + this.$t('module.basicData.visual.Or') + this.$t('module.basicData.alarmManagement.AlarmTypeCode'),
+      addOrUpdateVisible: false,
+      tableBtn,
+      trueWidth: 200,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        current: 1,
+        size: 10
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    handleClick(raw) {
+      console.log(raw)
+      if (raw.type === 'delete') {
+        this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`, this.$t('module.basicData.visual.Tips'), {
+          confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+          cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+          type: 'warning'
+        }).then(() => {
+          alarmTypeDelete(raw.data.id).then(response => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+              }
+            })
+          })
+        }).catch(() => {})
+      } else {
+        this.addNew(raw.data.id)
+      }
+    },
+    getList(key) {
+      this.listLoading = true
+      this.listQuery.name = key
+      this.listQuery.code = key
+      alarmTypeList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    },
+    // 新增 / 修改
+    addNew(id) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id)
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/basicData/AlarmManagement/components/alarmInfo-add.vue b/src/views/basicData/AlarmManagement/components/alarmInfo-add.vue
new file mode 100644
index 0000000..0a3b46f
--- /dev/null
+++ b/src/views/basicData/AlarmManagement/components/alarmInfo-add.vue
@@ -0,0 +1,165 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-26 14:27:46
+ * @Description:
+-->
+<template>
+  <el-dialog
+    :title="!dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter"
+    :visible.sync="visible"
+  >
+    <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="105px" @keyup.enter.native="dataFormSubmit()">
+      <el-form-item :label="$t('module.basicData.alarmManagement.AlarmName')" prop="name">
+        <el-input v-model="dataForm.name" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.alarmManagement.AlarmName')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.alarmManagement.AlarmCode')" prop="code">
+        <el-input v-model="dataForm.code" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.alarmManagement.AlarmCode')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.alarmManagement.AlarmType')" prop="alarmType">
+        <el-select v-model="dataForm.alarmType" filterable :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.alarmManagement.AlarmType')])" clearable>
+          <el-option
+            v-for="item in TypeArr"
+            :key="item.id"
+            :label="item.name"
+            :value="item.name"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.alarmManagement.AlarmLevel')" prop="alarmGrade">
+        <el-select v-model="dataForm.alarmGrade" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.alarmManagement.AlarmLevel')])" clearable>
+          <el-option
+            v-for="item in GradeArr"
+            :key="item.id"
+            :label="item.alarmGrade"
+            :value="item.alarmGrade"
+          />
+        </el-select>
+      </el-form-item>
+      <!-- <el-form-item :label="$t('module.basicData.alarmManagement.AlarmContent')" prop="alarmContent">
+        <el-input v-model="dataForm.alarmContent" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.alarmManagement.AlarmContent')])" clearable />
+      </el-form-item> -->
+      <el-form-item :label="$t('module.basicData.visual.Remarks')" prop="remark">
+        <el-input v-model="dataForm.remark" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Remarks')])" clearable />
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { alarmInfoDetail, alarmInfoUpdate, alarmInfoAdd, alarmInfoCode } from '@/api/basicData/AlarmManagement/alarmInfo'
+import { alarmLevelList } from '@/api/basicData/AlarmManagement/alarmLevel'
+import { alarmTypeList } from '@/api/basicData/AlarmManagement/alarmType'
+
+export default {
+  data() {
+    return {
+      visible: false,
+      GradeArr: [],
+      TypeArr: [],
+      dataForm: {
+        id: 0,
+        name: '',
+        code: '',
+        alarmGrade: '',
+        alarmType: '',
+        alarmContent: '',
+        remark: ''
+      },
+      dataRule: {
+        name: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.alarmManagement.AlarmName')]), trigger: 'blur' }
+        ],
+        code: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.alarmManagement.AlarmCode')]), trigger: 'blur' }
+        ],
+        alarmGrade: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.alarmManagement.AlarmLevel')]), trigger: 'blur' }
+        ],
+        alarmType: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.alarmManagement.AlarmType')]), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    init(id) {
+      const listQuery = {
+        current: 1,
+        size: 999
+      }
+      alarmTypeList(listQuery).then(response => {
+        this.TypeArr = response.data.records
+      })
+      alarmLevelList(listQuery).then(response => {
+        this.GradeArr = response.data.records
+      })
+      this.dataForm.id = id || ''
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          alarmInfoDetail(this.dataForm.id).then(res => {
+            this.dataForm.name = res.data.name
+            this.dataForm.code = res.data.code
+            this.dataForm.alarmType = res.data.alarmType
+            this.dataForm.alarmGrade = res.data.alarmGrade
+            this.dataForm.alarmContent = res.data.alarmContent
+            this.dataForm.remark = res.data.remark
+          })
+        } else {
+          alarmInfoCode().then(res => {
+            this.dataForm.code = res.data
+          })
+        }
+      })
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          const data = {
+            'name': this.dataForm.name,
+            'code': this.dataForm.code,
+            'alarmGrade': this.dataForm.alarmGrade,
+            'alarmType': this.dataForm.alarmType,
+            'alarmContent': this.dataForm.alarmContent,
+            'remark': this.dataForm.remark,
+            'id': this.dataForm.id
+          }
+          if (this.dataForm.id) {
+            alarmInfoUpdate(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          } else {
+            alarmInfoAdd(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          }
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/basicData/AlarmManagement/components/alarmLevel-add.vue b/src/views/basicData/AlarmManagement/components/alarmLevel-add.vue
new file mode 100644
index 0000000..5ae6f75
--- /dev/null
+++ b/src/views/basicData/AlarmManagement/components/alarmLevel-add.vue
@@ -0,0 +1,113 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-26 14:28:33
+ * @remark:
+-->
+<template>
+  <el-dialog
+    :title="!dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter"
+    :visible.sync="visible"
+  >
+    <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="110px" @keyup.enter.native="dataFormSubmit()">
+      <el-form-item :label="$t('module.basicData.alarmManagement.AlarmLevel')" prop="alarmGrade">
+        <el-input v-model="dataForm.alarmGrade" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.alarmManagement.AlarmLevel')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.alarmManagement.LevelCode')" prop="alarmGradeCode">
+        <el-input v-model="dataForm.alarmGradeCode" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.alarmManagement.LevelCode')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.visual.Remarks')" prop="remark">
+        <el-input v-model="dataForm.remark" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Remarks')])" clearable />
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { alarmLevelDetail, alarmLevelUpdate, alarmLevelAdd, alarmLevelCode } from '@/api/basicData/AlarmManagement/alarmLevel'
+
+export default {
+  data() {
+    return {
+      visible: false,
+      dataForm: {
+        id: 0,
+        alarmGradeCode: '',
+        alarmGrade: '',
+        remark: ''
+      },
+      dataRule: {
+        alarmGrade: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.alarmManagement.AlarmLevel')]), trigger: 'blur' }
+        ],
+        alarmGradeCode: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.alarmManagement.LevelCode')]), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    init(id) {
+      this.dataForm.id = id || ''
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          alarmLevelDetail(this.dataForm.id).then(res => {
+            this.dataForm.alarmGradeCode = res.data.alarmGradeCode
+            this.dataForm.alarmGrade = res.data.alarmGrade
+            this.dataForm.remark = res.data.remark
+          })
+        } else {
+          alarmLevelCode().then(res => {
+            this.dataForm.alarmGradeCode = res.data
+          })
+        }
+      })
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          const data = {
+            'alarmGradeCode': this.dataForm.alarmGradeCode,
+            'alarmGrade': this.dataForm.alarmGrade,
+            'remark': this.dataForm.remark,
+            'id': this.dataForm.id
+          }
+          if (this.dataForm.id) {
+            alarmLevelUpdate(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          } else {
+            alarmLevelAdd(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          }
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/basicData/AlarmManagement/components/alarmType-add.vue b/src/views/basicData/AlarmManagement/components/alarmType-add.vue
new file mode 100644
index 0000000..3e589e6
--- /dev/null
+++ b/src/views/basicData/AlarmManagement/components/alarmType-add.vue
@@ -0,0 +1,113 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-26 14:28:11
+ * @Description:
+-->
+<template>
+  <el-dialog
+    :title="!dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter"
+    :visible.sync="visible"
+  >
+    <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="140px" @keyup.enter.native="dataFormSubmit()">
+      <el-form-item :label="$t('module.basicData.alarmManagement.AlarmType')" prop="name">
+        <el-input v-model="dataForm.name" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.alarmManagement.AlarmType')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.alarmManagement.AlarmTypeCode')" prop="code">
+        <el-input v-model="dataForm.code" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.alarmManagement.AlarmTypeCode')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.visual.Remarks')" prop="remark">
+        <el-input v-model="dataForm.remark" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Remarks')])" clearable />
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { alarmTypeDetail, alarmTypeUpdate, alarmTypeAdd, alarmTypeCode } from '@/api/basicData/AlarmManagement/alarmType'
+
+export default {
+  data() {
+    return {
+      visible: false,
+      dataForm: {
+        id: 0,
+        name: '',
+        code: '',
+        remark: ''
+      },
+      dataRule: {
+        name: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.alarmManagement.AlarmType')]), trigger: 'blur' }
+        ],
+        code: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.alarmManagement.AlarmTypeCode')]), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    init(id) {
+      this.dataForm.id = id || ''
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          alarmTypeDetail(this.dataForm.id).then(res => {
+            this.dataForm.name = res.data.name
+            this.dataForm.code = res.data.code
+            this.dataForm.remark = res.data.remark
+          })
+        } else {
+          alarmTypeCode().then(res => {
+            this.dataForm.code = res.data
+          })
+        }
+      })
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          const data = {
+            'name': this.dataForm.name,
+            'code': this.dataForm.code,
+            'remark': this.dataForm.remark,
+            'id': this.dataForm.id
+          }
+          if (this.dataForm.id) {
+            alarmTypeUpdate(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          } else {
+            alarmTypeAdd(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          }
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/basicData/Cache/area.vue b/src/views/basicData/Cache/area.vue
new file mode 100644
index 0000000..1a96d58
--- /dev/null
+++ b/src/views/basicData/Cache/area.vue
@@ -0,0 +1,219 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-25 16:13:05
+ * @Description:
+-->
+<template>
+  <div class="app-container">
+    <head-form
+      :placeholder-name="placeholderName"
+      :key-name="keyName"
+      @getDataList="getList"
+      @add="addNew"
+    />
+    <base-table
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    >
+      <method-btn
+        slot="handleBtn"
+        :width="trueWidth"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      @pagination="getList()"
+    />
+    <cacheArea-add v-if="addOrUpdateVisible" ref="addOrUpdate" :cache-id="listQuery.cacheId" @refreshDataList="getList" />
+  </div>
+</template>
+
+<script>import i18n from '@/lang'
+import { areaList, areaDelete } from '@/api/basicData/Cache/area'
+import { cacheList } from '@/api/basicData/Cache/cache'
+import HeadForm from '@/components/basicData/HeadForm'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import shelfBtn from './components/shelfBtn.vue'
+import cacheAreaAdd from './components/cacheArea-add.vue'
+import { timeFormatter } from '@/filters'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+
+const tableBtn = [
+  {
+    type: 'edit',
+    btnName: 'btn.edit'
+  },
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  }
+]
+const tableProps = [
+  {
+    prop: 'createTime',
+    label: i18n.t('module.basicData.factory.createTime'),
+    filter: timeFormatter,
+    align: 'center'
+  },
+  {
+    prop: 'name',
+    label: i18n.t('module.basicData.cache.AreaName'),
+    align: 'center'
+  },
+  {
+    prop: 'code',
+    label: i18n.t('module.basicData.cache.AreaCode'),
+    align: 'center'
+  },
+  {
+    prop: 'cacheName',
+    label: i18n.t('module.basicData.cache.CacheName'),
+    align: 'center'
+  },
+  {
+    prop: 'areaNumber',
+    label: i18n.t('module.basicData.cache.StorageQuantity'),
+    align: 'center'
+  },
+  {
+    prop: 'shelf',
+    label: i18n.t('module.basicData.cache.Shelf'),
+    subcomponent: shelfBtn,
+    align: 'center'
+  }
+]
+
+export default {
+  name: 'Area',
+  components: { Pagination, BaseTable, MethodBtn, HeadForm, cacheAreaAdd },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      addOrUpdateVisible: false,
+      keyName: i18n.t('module.basicData.visual.keyword'),
+      placeholderName: this.$t('module.basicData.cache.AreaName'),
+      tableBtn,
+      trueWidth: 200,
+      tableProps,
+      list: [],
+      cacheList: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        current: 1,
+        size: 10
+      }
+    }
+  },
+  created() {
+    const params = {
+      current: 1,
+      size: 500
+    }
+    cacheList(params).then(response => {
+      if (response.data.records) {
+        this.cacheList = response.data.records
+        this.getList()
+      }
+    })
+  },
+  methods: {
+    handleClick(raw) {
+      if (raw.type === 'delete') {
+        this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`, this.$t('module.basicData.visual.Tips'), {
+          confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+          cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+          type: 'warning'
+        }).then(() => {
+          areaDelete(raw.data.id).then(response => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+              }
+            })
+          })
+        }).catch(() => {})
+      } else if (raw.type === 'edit') {
+        this.addNew(raw.data.id)
+      } else {
+        this.addNew(raw.data.id, true)
+      }
+    },
+    getList(key) {
+      this.listLoading = true
+      this.listQuery.name = key
+      areaList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+          this.list.forEach(item => {
+            const name = this.cacheList.find(citem => { if (citem.id === item.cacheId) return citem })
+            if (name) {
+              item.cacheName = name.name
+            }
+          })
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    },
+    // 新增 / 修改
+    addNew(id) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id, true)
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/basicData/Cache/cache.vue b/src/views/basicData/Cache/cache.vue
new file mode 100644
index 0000000..6a22c71
--- /dev/null
+++ b/src/views/basicData/Cache/cache.vue
@@ -0,0 +1,195 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-25 16:09:59
+ * @Description:
+-->
+<template>
+  <div class="app-container">
+    <head-form
+      :placeholder-name="placeholderName"
+      :key-name="keyName"
+      @getDataList="getList"
+      @add="addNew"
+    />
+    <base-table
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    >
+      <method-btn
+        slot="handleBtn"
+        :width="trueWidth"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      @pagination="getList()"
+    />
+  </div>
+</template>
+
+<script>import i18n from '@/lang'
+import { cacheList, cacheDelete } from '@/api/basicData/Cache/cache'
+import HeadForm from '@/components/basicData/HeadForm'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import { timeFormatter } from '@/filters'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+
+const tableBtn = [
+  {
+    type: 'edit',
+    btnName: 'btn.edit'
+  },
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  },
+  {
+    type: 'detail',
+    btnName: 'btn.detail'
+  }
+]
+const tableProps = [
+  {
+    prop: 'createTime',
+    label: i18n.t('module.basicData.factory.createTime'),
+    filter: timeFormatter,
+    align: 'center'
+  },
+  {
+    prop: 'name',
+    label: i18n.t('module.basicData.cache.CacheName'),
+    align: 'center'
+  },
+  {
+    prop: 'code',
+    label: i18n.t('module.basicData.cache.CacheCode'),
+    align: 'center'
+  },
+  {
+    prop: 'enName',
+    label: i18n.t('module.basicData.visual.EnglishName'),
+    align: 'center'
+  }
+]
+
+export default {
+  name: 'Cache',
+  components: { Pagination, BaseTable, MethodBtn, HeadForm },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      keyName: i18n.t('module.basicData.visual.keyword'),
+      placeholderName: this.$t('module.basicData.cache.CacheName') + this.$t('module.basicData.visual.Or') + this.$t('module.basicData.cache.CacheCode'),
+      tableBtn,
+      trueWidth: 240,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        current: 1,
+        size: 10
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    handleClick(raw) {
+      if (raw.type === 'delete') {
+        this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`, this.$t('module.basicData.visual.Tips'), {
+          confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+          cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+          type: 'warning'
+        }).then(() => {
+          cacheDelete(raw.data.id).then(response => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+              }
+            })
+          })
+        }).catch(() => {})
+      } else if (raw.type === 'edit') {
+        this.addNew(raw.data.id)
+      } else {
+        this.addNew(raw.data.id, true)
+      }
+    },
+    getList(key) {
+      this.listLoading = true
+      this.listQuery.name = key
+      this.listQuery.code = key
+      cacheList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    },
+    // 新增 / 修改
+    addNew(id, isdetail) {
+      this.$router.push({
+        name: 'cacheAdd',
+        query: {
+          id: id,
+          isdetail: isdetail
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/basicData/Cache/components/PositionDetail.vue b/src/views/basicData/Cache/components/PositionDetail.vue
new file mode 100644
index 0000000..1212079
--- /dev/null
+++ b/src/views/basicData/Cache/components/PositionDetail.vue
@@ -0,0 +1,36 @@
+<!--
+ * @Date: 2021-01-07 20:09:37
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-07-21 14:18:59
+ * @FilePath: \basic-admin\src\components\BaseTable\subcomponents\CheckDetail.vue
+ * @Description:
+-->
+<template>
+  <span>
+    <el-button type="text" size="small" @click="emitClick">{{ $t('module.basicData.storageBox.PositionDetail') }}</el-button>
+  </span>
+</template>
+
+<script>
+export default {
+  props: {
+    injectData: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  methods: {
+    emitClick() {
+      this.$router.push({
+        name: 'PositionDetailInfo',
+        query: {
+          id: this.injectData.id,
+          name: this.injectData.name,
+          code: this.injectData.code,
+          quantity: this.injectData.quantity
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/basicData/Cache/components/PositionDetailInfo-add.vue b/src/views/basicData/Cache/components/PositionDetailInfo-add.vue
new file mode 100644
index 0000000..026f64f
--- /dev/null
+++ b/src/views/basicData/Cache/components/PositionDetailInfo-add.vue
@@ -0,0 +1,84 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-07-21 14:39:23
+ * @Description:
+-->
+<template>
+  <el-dialog
+    :title="!dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter"
+    :visible.sync="visible"
+  >
+    <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="140px" @keyup.enter.native="dataFormSubmit()">
+      <el-form-item :label="$t('module.basicData.storageBox.PositionCode')" prop="code">
+        <el-input v-model="dataForm.code" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.storageBox.PositionCode')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.storageBox.PositionCodeAlias')" prop="aliasName">
+        <el-input v-model="dataForm.aliasName" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.storageBox.PositionCodeAlias')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.storageBox.PositionNo')" prop="serial">
+        <el-input v-model="dataForm.serial" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.storageBox.PositionNo')])" clearable />
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { PositionDetailInfoAdd } from '@/api/basicData/Cache/storageBox'
+
+export default {
+  data() {
+    return {
+      visible: false,
+      dataForm: {
+        storageTankId: 0,
+        code: '',
+        aliasName: '',
+        serial: ''
+      },
+      dataRule: {
+        code: [
+          {
+            required: true,
+            message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.storageBox.PositionCode')]),
+            trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    init(id, code) {
+      this.dataForm.storageTankId = id || ''
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        this.dataForm.code = code
+      })
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          const data = this.dataForm
+          PositionDetailInfoAdd(data).then(res => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.visible = false
+                this.$emit('refreshDataList')
+              }
+            })
+          })
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/basicData/Cache/components/PositionDetailInfo.vue b/src/views/basicData/Cache/components/PositionDetailInfo.vue
new file mode 100644
index 0000000..8f5a11d
--- /dev/null
+++ b/src/views/basicData/Cache/components/PositionDetailInfo.vue
@@ -0,0 +1,110 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-07-21 14:05:30
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-07-21 14:41:24
+ * @Description:
+-->
+<template>
+  <div style="margin:50px">
+    <span>{{ $t('module.basicData.storageBox.code') }}:{{ injectData.code }}</span>
+    <span>{{ $t('module.basicData.storageBox.name') }}:{{ injectData.name }}</span>
+    <span>{{ $t('module.basicData.storageBox.StorageQuantity') }}:{{ injectData.quantity }}</span>
+    <span>
+      <el-button type="primary" @click="addNew()">{{ 'btn.add' | i18nFilter }}</el-button>
+      <el-button type="success" @click="goback()">{{ 'btn.back' | i18nFilter }}</el-button>
+    </span>
+    <base-table
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    />
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      @pagination="getList()"
+    />
+    <PositionDetailInfo-add v-if="addOrUpdateVisible" ref="addOrUpdate" :cache-id="listQuery.cacheId" @refreshDataList="getList" />
+  </div>
+</template>
+
+<script>
+import i18n from '@/lang'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import PositionDetailInfoAdd from './PositionDetailInfo-add'
+import { PositionDetailInfoList } from '@/api/basicData/Cache/storageBox'
+
+const tableProps = [
+  {
+    prop: 'serial',
+    label: i18n.t('module.basicData.storageBox.PositionNo'),
+    align: 'center'
+  },
+  {
+    prop: 'code',
+    label: i18n.t('module.basicData.storageBox.PositionCode'),
+    align: 'center'
+  },
+  {
+    prop: 'aliasName',
+    label: i18n.t('module.basicData.storageBox.PositionCodeAlias'),
+    align: 'center'
+  }
+]
+export default {
+  components: { Pagination, BaseTable, PositionDetailInfoAdd },
+  data() {
+    return {
+      injectData: {},
+      addOrUpdateVisible: false,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        current: 1,
+        size: 10
+      }
+    }
+  },
+  created() {
+    this.injectData = this.$route.query
+    this.getList()
+  },
+  methods: {
+    getList() {
+      this.listLoading = true
+      PositionDetailInfoList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    },
+    // 新增 / 修改
+    addNew() {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(this.injectData.id, this.injectData.code)
+      })
+    },
+    goback() {
+      this.$router.go(-1)
+    }
+  }
+}
+</script>
+
+<style scoped>
+span{
+  margin-left: 30px;
+}
+</style>
diff --git a/src/views/basicData/Cache/components/cache-add.vue b/src/views/basicData/Cache/components/cache-add.vue
new file mode 100644
index 0000000..a53c580
--- /dev/null
+++ b/src/views/basicData/Cache/components/cache-add.vue
@@ -0,0 +1,383 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-04-28 10:07:44
+ * @enName:
+-->
+<template>
+  <div style="margin:20px">
+    <el-row :gutter="15">
+      <el-form
+        ref="dataForm"
+        :model="dataForm"
+        :rules="rules"
+        size="medium"
+        label-width="140px"
+      >
+        <el-col :span="8">
+          <el-form-item :label="$t('module.basicData.cache.CacheName')" prop="name">
+            <el-input v-model="dataForm.name" :disabled="isdetail" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.cache.CacheName')])" clearable :style="{width: '100%'}" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item :label="$t('module.basicData.cache.CacheCode')" prop="code">
+            <el-input v-model="dataForm.code" :disabled="isdetail" :label="$t('module.basicData.cache.CacheCode')" clearable :style="{width: '100%'}" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item :label="$t('module.basicData.visual.EnglishName')" prop="enName">
+            <el-input v-model="dataForm.enName" :disabled="isdetail" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.EnglishName')])" clearable :style="{width: '100%'}" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item :label="$t('module.basicData.visual.Abbreviation')" prop="abbr">
+            <el-input v-model="dataForm.abbr" :disabled="isdetail" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Abbreviation')])" clearable :style="{width: '100%'}" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item :label="$t('module.basicData.visual.Manufacturer')" prop="manufacturer">
+            <el-input
+              v-model="dataForm.manufacturer"
+              :disabled="isdetail"
+              :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Manufacturer')])"
+              clearable
+              :style="{width: '100%'}"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item :label="$t('module.basicData.visual.Specs')" prop="description">
+            <el-input v-model="dataForm.description" :disabled="isdetail" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Specs')])" clearable :style="{width: '100%'}" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item :label="$t('module.basicData.visual.productionTime')" prop="productionTime">
+            <el-date-picker
+              v-model="dataForm.productionTime"
+              :disabled="isdetail"
+              format="yyyy-MM-dd"
+              value-format="yyyy-MM-dd"
+              :style="{width: '100%'}"
+              :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.productionTime')])"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item :label="$t('module.basicData.visual.enterTime')" prop="enterTime">
+            <el-date-picker
+              v-model="dataForm.enterTime"
+              :disabled="isdetail"
+              format="yyyy-MM-dd"
+              value-format="yyyy-MM-dd"
+              :style="{width: '100%'}"
+              :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.enterTime')])"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item :label="$t('module.basicData.visual.debugTime')" prop="debugTime">
+            <el-date-picker
+              v-model="dataForm.debugTime"
+              :disabled="isdetail"
+              format="yyyy-MM-dd"
+              value-format="yyyy-MM-dd"
+              :style="{width: '100%'}"
+              :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.debugTime')])"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item :label="$t('module.basicData.visual.CurrentState')" prop="currentStatus">
+            <el-select
+              v-model="dataForm.currentStatus"
+              :disabled="isdetail"
+              :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.CurrentState')])"
+              clearable
+              :style="{width: '100%'}"
+            >
+              <el-option
+                v-for="(item, index) in currentStatusOptions"
+                :key="index"
+                :label="item.label"
+                :value="item.value"
+                :disabled="item.disabled"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item :label="$t('module.basicData.cache.StockNumber')" prop="stockNumber">
+            <el-input-number v-model="dataForm.stockNumber" :disabled="isdetail" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.cache.StockNumber')])" :step="1" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item :label="$t('module.basicData.cache.AreaNumber')" prop="areaNumber">
+            <el-input-number v-model="dataForm.areaNumber" :disabled="isdetail" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.cache.AreaNumber')])" :step="1" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item :label="$t('module.basicData.visual.Remarks')" prop="remark">
+            <el-input v-model="dataForm.remark" :disabled="isdetail" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Remarks')])" clearable :style="{width: '100%'}" />
+          </el-form-item>
+        </el-col>
+      </el-form>
+    </el-row>
+    <div style="margin:20px">
+      <el-button type="success" @click="goback()">{{ 'btn.back' | i18nFilter }}</el-button>
+      <span v-if="!isdetail">
+        <el-button type="primary" @click="dataFormSubmit()">{{ 'btn.save' | i18nFilter }}</el-button>
+        <el-button v-if="listQuery.cacheId" type="primary" @click="addNew()">{{ $t('module.basicData.cache.addCacheArea') }}</el-button>
+      </span>
+    </div>
+    <div style="height:380px;overflow:auto">
+      <base-table
+        :page="listQuery.current"
+        :limit="listQuery.size"
+        :table-config="tableProps"
+        :table-data="list"
+      >
+        <method-btn
+          v-if="!isdetail"
+          slot="handleBtn"
+          :method-list="tableBtn"
+          @clickBtn="handleClick"
+        />
+      </base-table>
+    </div>
+    <cacheArea-add v-if="addOrUpdateVisible" ref="addOrUpdate" :cache-id="listQuery.cacheId" @refreshDataList="getList" />
+  </div>
+</template>
+
+<script>import i18n from '@/lang'
+import { cacheDetail, cacheUpdate, cacheAdd, cacheCode } from '@/api/basicData/Cache/cache'
+import { areaList, areaDelete } from '@/api/basicData/Cache/area'
+import BaseTable from '@/components/BaseTable'
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import cacheAreaAdd from './cacheArea-add.vue'
+import shelfBtn from './shelfBtn.vue'
+import { timeFormatter } from '@/filters'
+const tableBtn = [
+  {
+    type: 'edit',
+    btnName: 'btn.edit'
+  },
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  }
+]
+const tableProps = [
+  {
+    prop: 'createTime',
+    label: i18n.t('module.basicData.factory.createTime'),
+    filter: timeFormatter,
+    align: 'center'
+  },
+  {
+    prop: 'name',
+    label: i18n.t('module.basicData.cache.AreaName'),
+    align: 'center'
+  },
+  {
+    prop: 'code',
+    label: i18n.t('module.basicData.cache.AreaCode'),
+    align: 'center'
+  },
+  {
+    prop: 'areaNumber',
+    label: i18n.t('module.basicData.cache.StorageQuantity'),
+    align: 'center'
+  },
+  {
+    prop: 'shelf',
+    label: i18n.t('module.basicData.cache.Shelf'),
+    subcomponent: shelfBtn,
+    align: 'center'
+  }
+]
+
+export default {
+  components: { BaseTable, MethodBtn, cacheAreaAdd },
+  data() {
+    return {
+      addOrUpdateVisible: false,
+      tableBtn,
+      trueWidth: 200,
+      tableProps,
+      list: [],
+      dataForm: {
+        name: '',
+        code: '',
+        enName: '',
+        abbr: '',
+        manufacturer: '',
+        description: '',
+        productionTime: '',
+        enterTime: '',
+        debugTime: '',
+        currentStatus: '',
+        stockNumber: '',
+        areaNumber: '',
+        remark: ''
+      },
+      listQuery: {
+        current: 1,
+        size: 990,
+        cacheId: ''
+      },
+      rules: {
+        name: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.cache.CacheName')]),
+          trigger: 'blur'
+        }],
+        code: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.cache.CacheCode')]),
+          trigger: 'blur'
+        }]
+      },
+      currentStatusOptions: [{
+        'label': '正常',
+        'value': '0'
+      }, {
+        'label': '暂停',
+        'value': '1'
+      }, {
+        'label': '维修',
+        'value': '2'
+      }],
+      cacheId: '',
+      isdetail: false
+    }
+  },
+  created() {
+    this.cacheId = this.$route.query.id
+    this.init()
+  },
+  methods: {
+    init() {
+      this.isdetail = false
+      this.isdetail = Boolean(this.$route.query.isdetail)
+      this.listQuery.cacheId = ''
+      this.list.splice(0, this.list.length)
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.cacheId) {
+          cacheDetail(this.cacheId).then(res => {
+            this.dataForm = res.data
+          })
+          this.listQuery.cacheId = this.cacheId
+          areaList(this.listQuery).then(response => {
+            if (response.data.records) {
+              this.list = response.data.records
+            } else {
+              this.list.splice(0, this.list.length)
+            }
+          })
+        } else {
+          cacheCode().then(res => {
+            this.dataForm.code = res.data
+          })
+        }
+      })
+    },
+    getList() {
+      areaList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        }
+      })
+    },
+    handleClick(raw) {
+      if (raw.type === 'delete') {
+        this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`, this.$t('module.basicData.visual.Tips'), {
+          confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+          cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+          type: 'warning'
+        }).then(() => {
+          areaDelete(raw.data.id).then(response => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+              }
+            })
+          })
+        }).catch(() => {})
+      } else {
+        this.addNew(raw.data.id)
+      }
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          const data = {
+            'abbr': this.dataForm.abbr,
+            'code': this.dataForm.code,
+            'currentStatus': this.dataForm.currentStatus,
+            'debugTime': this.dataForm.debugTime,
+            'enName': this.dataForm.enName,
+            'enterTime': this.dataForm.enterTime,
+            'manufacturer': this.dataForm.manufacturer,
+            'name': this.dataForm.name,
+            'productionTime': this.dataForm.productionTime,
+            'remark': this.dataForm.remark,
+            'description': this.dataForm.description,
+            'stockNumber': this.dataForm.stockNumber,
+            'areaNumber': this.dataForm.areaNumber,
+            'id': this.cacheId
+          }
+          if (this.cacheId) {
+            cacheUpdate(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500
+              })
+            })
+          } else {
+            cacheAdd(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500
+              })
+              this.listQuery.cacheId = res.data.id
+            })
+          }
+        }
+      })
+    },
+    // 新增 / 修改
+    addNew(id) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id)
+      })
+    },
+    goback() {
+      this.$router.go(-1)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.drawer-footer {
+  width: 100%;
+  margin-top: 50px;
+  border-top: 1px solid #e8e8e8;
+  border-bottom: 1px solid #e8e8e8;
+  padding: 10px 50px;
+  text-align: left;
+  background: #fff;
+}
+</style>
diff --git a/src/views/basicData/Cache/components/cacheArea-add.vue b/src/views/basicData/Cache/components/cacheArea-add.vue
new file mode 100644
index 0000000..f81f2c6
--- /dev/null
+++ b/src/views/basicData/Cache/components/cacheArea-add.vue
@@ -0,0 +1,145 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-04-16 15:00:18
+ * @Description:
+-->
+<template>
+  <el-dialog
+    :title="!dataForm.cacheId ? 'btn.add' : 'btn.edit' | i18nFilter"
+    :visible.sync="visible"
+  >
+    <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="130px" @keyup.enter.native="dataFormSubmit()">
+      <el-form-item :label="$t('module.basicData.cache.AreaName')" prop="name">
+        <el-input v-model="dataForm.name" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.cache.AreaName')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.cache.AreaCode')" prop="code">
+        <el-input v-model="dataForm.code" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.cache.AreaCode')])" clearable />
+      </el-form-item>
+      <el-form-item v-if="isPage" :label="$t('module.basicData.cache.CacheName')" prop="cacheId">
+        <el-select v-model="dataForm.cacheId" filterable :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.cache.CacheName')])" clearable>
+          <el-option
+            v-for="item in cacheArr"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.cache.StorageQuantity')" prop="areaNumber">
+        <el-input-number v-model="dataForm.areaNumber" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.cache.StorageQuantity')])" :step="1" />
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { areaDetail, areaUpdate, areaAdd, areaCode } from '@/api/basicData/Cache/area'
+import { cacheList } from '@/api/basicData/Cache/cache'
+
+export default {
+  props: {
+    cacheId: {
+      type: String,
+      default: () => {
+        return ''
+      }
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      isPage: false,
+      dataForm: {
+        id: 0,
+        cacheId: '',
+        name: '',
+        code: '',
+        areaNumber: ''
+      },
+      cacheArr: [],
+      dataRule: {
+        name: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.cache.AreaName')]), trigger: 'blur' }
+        ],
+        code: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.cache.AreaCode')]), trigger: 'blur' }
+        ],
+        cacheId: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.cache.CacheName')]), trigger: 'change' }
+        ]
+      }
+    }
+  },
+  methods: {
+    init(id, isPage) {
+      this.isPage = isPage || false
+      this.dataForm.id = id || ''
+      if (!this.isPage) {
+        this.dataForm.cacheId = this.cacheId
+      }
+      this.cacheArr.splice(0, this.cacheArr.length)
+      const params = {
+        current: 1,
+        size: 500
+      }
+      cacheList(params).then(response => {
+        if (response.data.records) {
+          this.cacheArr = response.data.records
+        }
+      })
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          areaDetail(this.dataForm.id).then(res => {
+            this.dataForm = res.data
+          })
+        } else {
+          areaCode().then(res => {
+            this.dataForm.code = res.data
+          })
+        }
+      })
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          const data = this.dataForm
+          if (this.dataForm.id) {
+            areaUpdate(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          } else {
+            areaAdd(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          }
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/basicData/Cache/components/location-add.vue b/src/views/basicData/Cache/components/location-add.vue
new file mode 100644
index 0000000..cea10bd
--- /dev/null
+++ b/src/views/basicData/Cache/components/location-add.vue
@@ -0,0 +1,188 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-11 16:44:10
+ * @Description:
+-->
+<template>
+  <div class="app-container">
+    <div style="margin:10px 50px">
+      <el-button type="success" @click="goback()">{{ 'btn.back' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="addNew()">{{ 'btn.add' | i18nFilter }}</el-button>
+    </div>
+    <base-table
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    >
+      <method-btn
+        slot="handleBtn"
+        :width="trueWidth"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <locationAttr-add v-if="addOrUpdateVisible" ref="addOrUpdate" :shelf-id="listQuery.shelfId" @refreshDataList="getList" />
+  </div>
+</template>
+
+<script>import i18n from '@/lang'
+import { locationList, locationDelete } from '@/api/basicData/Cache/location'
+import locationAttrAdd from './locationAttr-add.vue'
+import BaseTable from '@/components/BaseTable'
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import { timeFormatter } from '@/filters'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+
+const tableBtn = [
+  {
+    type: 'edit',
+    btnName: 'btn.edit'
+  },
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  }
+]
+const tableProps = [
+  {
+    prop: 'createTime',
+    label: i18n.t('module.basicData.factory.createTime'),
+    filter: timeFormatter,
+    align: 'center'
+  },
+  {
+    prop: 'code',
+    label: i18n.t('module.basicData.cache.LocationCode'),
+    align: 'center'
+  },
+  {
+    prop: 'name',
+    label: i18n.t('module.basicData.cache.LocationName'),
+    align: 'center'
+  },
+  {
+    prop: 'anotherName',
+    label: i18n.t('module.basicData.cache.anotherName'),
+    align: 'center'
+  },
+  {
+    prop: 'place',
+    label: i18n.t('module.basicData.cache.place'),
+    align: 'center'
+  },
+  {
+    prop: 'remark',
+    label: i18n.t('module.basicData.visual.Remarks'),
+    align: 'center'
+  }
+]
+
+export default {
+  name: 'Location',
+  components: { BaseTable, MethodBtn, locationAttrAdd },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      addOrUpdateVisible: false,
+      tableBtn,
+      trueWidth: 200,
+      tableProps,
+      list: [],
+      listLoading: true,
+      listQuery: {
+        current: 1,
+        size: 990,
+        shelfId: ''
+      }
+    }
+  },
+  created() {
+    this.listQuery.shelfId = this.$route.query.id
+    this.getList()
+  },
+  methods: {
+    handleClick(raw) {
+      if (raw.type === 'delete') {
+        this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`, this.$t('module.basicData.visual.Tips'), {
+          confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+          cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+          type: 'warning'
+        }).then(() => {
+          locationDelete(raw.data.id).then(response => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+              }
+            })
+          })
+        }).catch(() => {})
+      } else {
+        this.addNew(raw.data.id)
+      }
+    },
+    getList(key) {
+      this.listLoading = true
+      this.listQuery.name = key
+      locationList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.listLoading = false
+      })
+    },
+    // 新增 / 修改
+    addNew(shelfId) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(shelfId)
+      })
+    },
+    goback() {
+      this.$router.go(-1)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/basicData/Cache/components/locationAttr-add.vue b/src/views/basicData/Cache/components/locationAttr-add.vue
new file mode 100644
index 0000000..dfc6b54
--- /dev/null
+++ b/src/views/basicData/Cache/components/locationAttr-add.vue
@@ -0,0 +1,130 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-25 16:23:03
+ * @Description:
+-->
+<template>
+  <el-dialog
+    :title="!dataForm.shelfId ? 'btn.add' : 'btn.edit' | i18nFilter"
+    :visible.sync="visible"
+  >
+    <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="130px" @keyup.enter.native="dataFormSubmit()">
+      <el-form-item :label="$t('module.basicData.cache.LocationName')" prop="name">
+        <el-input v-model="dataForm.name" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.cache.LocationName')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.cache.LocationCode')" prop="code">
+        <el-input v-model="dataForm.code" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.cache.LocationCode')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.cache.anotherName')" prop="anotherName">
+        <el-input v-model="dataForm.anotherName" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.cache.anotherName')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.cache.place')" prop="place">
+        <el-input v-model="dataForm.place" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.cache.place')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.visual.Remarks')" prop="remark">
+        <el-input v-model="dataForm.remark" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Remarks')])" clearable />
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { locationDetail, locationUpdate, locationAdd, locationCode } from '@/api/basicData/Cache/location'
+
+export default {
+  props: {
+    shelfId: {
+      type: String,
+      default: () => {
+        return ''
+      }
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      dataForm: {
+        id: 0,
+        name: '',
+        code: '',
+        anotherName: '',
+        place: '',
+        remark: ''
+      },
+      dataRule: {
+        name: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.cache.LocationName')]), trigger: 'blur' }
+        ],
+        code: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.cache.LocationCode')]), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    init(id) {
+      this.dataForm.id = id || ''
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          locationDetail(this.dataForm.id).then(res => {
+            this.dataForm = res.data
+          })
+        } else {
+          locationCode().then(res => {
+            this.dataForm.code = res.data
+          })
+        }
+      })
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          const data = {
+            'name': this.dataForm.name,
+            'code': this.dataForm.code,
+            'anotherName': this.dataForm.anotherName,
+            'place': this.dataForm.place,
+            'remark': this.dataForm.remark,
+            'shelfId': this.shelfId,
+            'id': this.dataForm.id
+          }
+          if (this.dataForm.id) {
+            locationUpdate(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          } else {
+            locationAdd(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          }
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/basicData/Cache/components/locationBtn.vue b/src/views/basicData/Cache/components/locationBtn.vue
new file mode 100644
index 0000000..f9e26a4
--- /dev/null
+++ b/src/views/basicData/Cache/components/locationBtn.vue
@@ -0,0 +1,33 @@
+<!--
+ * @Date: 2021-01-07 20:09:37
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-06 13:12:47
+ * @FilePath: \basic-admin\src\components\BaseTable\subcomponents\CheckDetail.vue
+ * @Description:
+-->
+<template>
+  <span>
+    <el-button type="text" size="small" @click="emitClick">{{ $t('module.basicData.cache.ManageLocation') }}</el-button>
+  </span>
+</template>
+
+<script>
+export default {
+  props: {
+    injectData: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  methods: {
+    emitClick() {
+      this.$router.push({
+        name: 'locationAdd',
+        query: {
+          id: this.injectData.id
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/basicData/Cache/components/shelf-add.vue b/src/views/basicData/Cache/components/shelf-add.vue
new file mode 100644
index 0000000..3ff9c37
--- /dev/null
+++ b/src/views/basicData/Cache/components/shelf-add.vue
@@ -0,0 +1,185 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-11 09:22:52
+ * @Description:
+-->
+<template>
+  <div class="app-container">
+    <div style="margin:10px 50px">
+      <el-button type="success" @click="goback()">{{ 'btn.back' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="addNew()">{{ 'btn.add' | i18nFilter }}</el-button>
+    </div>
+    <base-table
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    >
+      <method-btn
+        slot="handleBtn"
+        :width="trueWidth"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <shelfAttr-add v-if="addOrUpdateVisible" ref="addOrUpdate" :area-id="listQuery.areaId" @refreshDataList="getList" />
+  </div>
+</template>
+
+<script>import i18n from '@/lang'
+import { shelfList, shelfDelete } from '@/api/basicData/Cache/shelf'
+import shelfAttrAdd from './shelfAttr-add.vue'
+import locationBtn from './locationBtn.vue'
+import BaseTable from '@/components/BaseTable'
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import { timeFormatter } from '@/filters'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+
+const tableBtn = [
+  {
+    type: 'edit',
+    btnName: 'btn.edit'
+  },
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  }
+]
+const tableProps = [
+  {
+    prop: 'createTime',
+    label: i18n.t('module.basicData.factory.createTime'),
+    filter: timeFormatter,
+    align: 'center'
+  },
+  {
+    prop: 'code',
+    label: i18n.t('module.basicData.cache.ShelfCode'),
+    align: 'center'
+  },
+  {
+    prop: 'name',
+    label: i18n.t('module.basicData.cache.ShelfName'),
+    align: 'center'
+  },
+  {
+    prop: 'shelfNumber',
+    label: i18n.t('module.basicData.cache.StorageQuantity'),
+    align: 'center'
+  },
+  {
+    prop: 'location',
+    label: i18n.t('module.basicData.cache.Location'),
+    subcomponent: locationBtn,
+    align: 'center'
+  }
+]
+
+export default {
+  name: 'Shelf',
+  components: { BaseTable, MethodBtn, shelfAttrAdd },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      addOrUpdateVisible: false,
+      tableBtn,
+      trueWidth: 200,
+      tableProps,
+      list: [],
+      listLoading: true,
+      listQuery: {
+        current: 1,
+        size: 990,
+        areaId: ''
+      }
+    }
+  },
+  created() {
+    this.listQuery.areaId = this.$route.query.id
+    this.getList()
+  },
+  methods: {
+    handleClick(raw) {
+      if (raw.type === 'delete') {
+        this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`, this.$t('module.basicData.visual.Tips'), {
+          confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+          cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+          type: 'warning'
+        }).then(() => {
+          shelfDelete(raw.data.id).then(response => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+              }
+            })
+          })
+        }).catch(() => {})
+      } else {
+        this.addNew(raw.data.id)
+      }
+    },
+    getList(key) {
+      this.listLoading = true
+      this.listQuery.name = key
+      shelfList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.listLoading = false
+      })
+    },
+    // 新增 / 修改
+    addNew(id) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id)
+      })
+    },
+    goback() {
+      this.$router.go(-1)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/basicData/Cache/components/shelfAttr-add.vue b/src/views/basicData/Cache/components/shelfAttr-add.vue
new file mode 100644
index 0000000..cf17bac
--- /dev/null
+++ b/src/views/basicData/Cache/components/shelfAttr-add.vue
@@ -0,0 +1,145 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-04-16 15:01:45
+ * @Description:
+-->
+<template>
+  <el-dialog
+    :title="!dataForm.areaId ? 'btn.add' : 'btn.edit' | i18nFilter"
+    :visible.sync="visible"
+  >
+    <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="130px" @keyup.enter.native="dataFormSubmit()">
+      <el-form-item :label="$t('module.basicData.cache.ShelfName')" prop="name">
+        <el-input v-model="dataForm.name" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.cache.ShelfName')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.cache.ShelfCode')" prop="code">
+        <el-input v-model="dataForm.code" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.cache.ShelfCode')])" clearable />
+      </el-form-item>
+      <el-form-item v-if="isPage" :label="$t('module.basicData.cache.AreaName')" prop="areaId">
+        <el-select v-model="dataForm.areaId" filterable :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.cache.AreaName')])" clearable>
+          <el-option
+            v-for="item in areaArr"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.cache.StorageQuantity')" prop="shelfNumber">
+        <el-input-number v-model="dataForm.shelfNumber" :step="1" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.cache.StorageQuantity')])" clearable />
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { shelfDetail, shelfUpdate, shelfAdd, shelfCode } from '@/api/basicData/Cache/shelf'
+import { areaList } from '@/api/basicData/Cache/area'
+
+export default {
+  props: {
+    areaId: {
+      type: String,
+      default: () => {
+        return ''
+      }
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      isPage: false,
+      dataForm: {
+        id: 0,
+        areaId: '',
+        name: '',
+        code: '',
+        shelfNumber: ''
+      },
+      areaArr: [],
+      dataRule: {
+        name: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.cache.ShelfName')]), trigger: 'blur' }
+        ],
+        code: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.cache.ShelfCode')]), trigger: 'blur' }
+        ],
+        areaId: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.cache.AreaName')]), trigger: 'change' }
+        ]
+      }
+    }
+  },
+  methods: {
+    init(id, isPage) {
+      this.isPage = isPage || false
+      this.dataForm.id = id || ''
+      if (!this.isPage) {
+        this.dataForm.areaId = this.areaId
+      }
+      this.areaArr.splice(0, this.areaArr.length)
+      const params = {
+        current: 1,
+        size: 500
+      }
+      areaList(params).then(response => {
+        if (response.data.records) {
+          this.areaArr = response.data.records
+        }
+      })
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          shelfDetail(this.dataForm.id).then(res => {
+            this.dataForm = res.data
+          })
+        } else {
+          shelfCode().then(res => {
+            this.dataForm.code = res.data
+          })
+        }
+      })
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          const data = this.dataForm
+          if (this.dataForm.id) {
+            shelfUpdate(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          } else {
+            shelfAdd(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          }
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/basicData/Cache/components/shelfBtn.vue b/src/views/basicData/Cache/components/shelfBtn.vue
new file mode 100644
index 0000000..bee53ee
--- /dev/null
+++ b/src/views/basicData/Cache/components/shelfBtn.vue
@@ -0,0 +1,33 @@
+<!--
+ * @Date: 2021-01-07 20:09:37
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-06 13:03:40
+ * @FilePath: \basic-admin\src\components\BaseTable\subcomponents\CheckDetail.vue
+ * @Description:
+-->
+<template>
+  <span>
+    <el-button type="text" size="small" @click="emitClick">{{ $t('module.basicData.cache.ManageShelves') }}</el-button>
+  </span>
+</template>
+
+<script>
+export default {
+  props: {
+    injectData: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  methods: {
+    emitClick() {
+      this.$router.push({
+        name: 'shelfAdd',
+        query: {
+          id: this.injectData.id
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/basicData/Cache/components/storageBox-add.vue b/src/views/basicData/Cache/components/storageBox-add.vue
new file mode 100644
index 0000000..c9a9db9
--- /dev/null
+++ b/src/views/basicData/Cache/components/storageBox-add.vue
@@ -0,0 +1,146 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-07-21 13:59:43
+ * @Description:
+-->
+<template>
+  <el-dialog
+    :title="!dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter"
+    :visible.sync="visible"
+  >
+    <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="130px" @keyup.enter.native="dataFormSubmit()">
+      <el-form-item :label="$t('module.basicData.storageBox.name')" prop="name">
+        <el-input v-model="dataForm.name" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.storageBox.name')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.storageBox.code')" prop="code">
+        <el-input v-model="dataForm.code" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.storageBox.code')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.storageBox.StorageQuantity')" prop="quantity">
+        <el-input-number v-model="dataForm.quantity" :min="0" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.storageBox.StorageQuantity')])" />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.storageBox.alias')" prop="aliasName">
+        <el-input v-model="dataForm.aliasName" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.storageBox.alias')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.storageBox.status')" prop="status">
+        <el-select v-model="dataForm.status" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.storageBox.status')])" clearable>
+          <el-option
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.visual.Remarks')" prop="remark">
+        <el-input v-model="dataForm.remark" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Remarks')])" clearable />
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { storageBoxDetail, storageBoxUpdate, storageBoxAdd, storageBoxCode } from '@/api/basicData/Cache/storageBox'
+
+export default {
+  data() {
+    return {
+      visible: false,
+      dataForm: {
+        id: 0,
+        name: '',
+        code: '',
+        status: 0,
+        aliasName: '',
+        quantity: 0,
+        remark: ''
+      },
+      options: [
+        {
+          value: 0,
+          label: '正常'
+        },
+        {
+          value: 1,
+          label: '维修中'
+        },
+        {
+          value: 2,
+          label: '报废'
+        }
+      ],
+      dataRule: {
+        name: [
+          {
+            required: true,
+            message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.storageBox.name')]),
+            trigger: 'blur' }
+        ],
+        code: [
+          {
+            required: true,
+            message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.storageBox.code')]),
+            trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    init(id) {
+      this.dataForm.id = id || ''
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          storageBoxDetail(this.dataForm.id).then(res => {
+            this.dataForm = res.data
+          })
+        } else {
+          storageBoxCode().then(res => {
+            this.dataForm.code = res.data
+          })
+        }
+      })
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          const data = this.dataForm
+          data.id = this.dataForm.id
+          if (this.dataForm.id) {
+            storageBoxUpdate(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          } else {
+            storageBoxAdd(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          }
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/basicData/Cache/shelf.vue b/src/views/basicData/Cache/shelf.vue
new file mode 100644
index 0000000..96c47f8
--- /dev/null
+++ b/src/views/basicData/Cache/shelf.vue
@@ -0,0 +1,219 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-25 16:13:19
+ * @Description:
+-->
+<template>
+  <div class="app-container">
+    <head-form
+      :placeholder-name="placeholderName"
+      :key-name="keyName"
+      @getDataList="getList"
+      @add="addNew"
+    />
+    <base-table
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    >
+      <method-btn
+        slot="handleBtn"
+        :width="trueWidth"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      @pagination="getList()"
+    />
+    <shelfAttr-add v-if="addOrUpdateVisible" ref="addOrUpdate" :cache-id="listQuery.cacheId" @refreshDataList="getList" />
+  </div>
+</template>
+
+<script>import i18n from '@/lang'
+import HeadForm from '@/components/basicData/HeadForm'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import { shelfList, shelfDelete } from '@/api/basicData/Cache/shelf'
+import { areaList } from '@/api/basicData/Cache/area'
+import shelfAttrAdd from './components/shelfAttr-add.vue'
+import locationBtn from './components/locationBtn.vue'
+import { timeFormatter } from '@/filters'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+
+const tableBtn = [
+  {
+    type: 'edit',
+    btnName: 'btn.edit'
+  },
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  }
+]
+const tableProps = [
+  {
+    prop: 'createTime',
+    label: i18n.t('module.basicData.factory.createTime'),
+    filter: timeFormatter,
+    align: 'center'
+  },
+  {
+    prop: 'name',
+    label: i18n.t('module.basicData.cache.ShelfName'),
+    align: 'center'
+  },
+  {
+    prop: 'code',
+    label: i18n.t('module.basicData.cache.ShelfCode'),
+    align: 'center'
+  },
+  {
+    prop: 'areaName',
+    label: i18n.t('module.basicData.cache.AreaName'),
+    align: 'center'
+  },
+  {
+    prop: 'shelfNumber',
+    label: i18n.t('module.basicData.cache.StorageQuantity'),
+    align: 'center'
+  },
+  {
+    prop: 'location',
+    label: i18n.t('module.basicData.cache.Location'),
+    subcomponent: locationBtn,
+    align: 'center'
+  }
+]
+
+export default {
+  name: 'Area',
+  components: { Pagination, BaseTable, MethodBtn, HeadForm, shelfAttrAdd },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      addOrUpdateVisible: false,
+      keyName: i18n.t('module.basicData.visual.keyword'),
+      placeholderName: this.$t('module.basicData.cache.ShelfName'),
+      tableBtn,
+      trueWidth: 200,
+      tableProps,
+      list: [],
+      areaList: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        current: 1,
+        size: 10
+      }
+    }
+  },
+  created() {
+    const params = {
+      current: 1,
+      size: 500
+    }
+    areaList(params).then(response => {
+      if (response.data.records) {
+        this.areaList = response.data.records
+      }
+      this.getList()
+    })
+  },
+  methods: {
+    handleClick(raw) {
+      if (raw.type === 'delete') {
+        this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`, this.$t('module.basicData.visual.Tips'), {
+          confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+          cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+          type: 'warning'
+        }).then(() => {
+          shelfDelete(raw.data.id).then(response => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+              }
+            })
+          })
+        }).catch(() => {})
+      } else if (raw.type === 'edit') {
+        this.addNew(raw.data.id)
+      } else {
+        this.addNew(raw.data.id, true)
+      }
+    },
+    getList(key) {
+      this.listLoading = true
+      this.listQuery.name = key
+      shelfList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+          this.list.forEach(item => {
+            const name = this.areaList.find(aitem => { if (aitem.id === item.areaId) return aitem })
+            if (name) {
+              item.areaName = name.name
+            }
+          })
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    },
+    // 新增 / 修改
+    addNew(id) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id, true)
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/basicData/Cache/storageBox.vue b/src/views/basicData/Cache/storageBox.vue
new file mode 100644
index 0000000..74711c6
--- /dev/null
+++ b/src/views/basicData/Cache/storageBox.vue
@@ -0,0 +1,216 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-07-21 14:00:56
+ * @Description:
+-->
+<template>
+  <div class="app-container">
+    <head-form
+      :placeholder-name="placeholderName"
+      :key-name="keyName"
+      @getDataList="getList"
+      @add="addNew"
+    />
+    <base-table
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    >
+      <method-btn
+        slot="handleBtn"
+        :width="trueWidth"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      @pagination="getList()"
+    />
+    <storageBox-add v-if="addOrUpdateVisible" ref="addOrUpdate" :cache-id="listQuery.cacheId" @refreshDataList="getList" />
+  </div>
+</template>
+
+<script>import i18n from '@/lang'
+import HeadForm from '@/components/basicData/HeadForm'
+import BaseTable from '@/components/BaseTable'
+import PositionDetail from './components/PositionDetail'
+import storageBoxAdd from './components/storageBox-add'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import { storageBoxList, storageBoxDelete } from '@/api/basicData/Cache/storageBox'
+import { timeFormatter } from '@/filters'
+import basicData from '@/filters/basicData'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+
+const tableBtn = [
+  {
+    type: 'edit',
+    btnName: 'btn.edit'
+  },
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  }
+]
+const tableProps = [
+  {
+    prop: 'createTime',
+    label: i18n.t('module.basicData.factory.createTime'),
+    filter: timeFormatter,
+    align: 'center'
+  },
+  {
+    prop: 'name',
+    label: i18n.t('module.basicData.storageBox.name'),
+    align: 'center'
+  },
+  {
+    prop: 'code',
+    label: i18n.t('module.basicData.storageBox.code'),
+    align: 'center'
+  },
+  {
+    prop: 'aliasName',
+    label: i18n.t('module.basicData.storageBox.alias'),
+    align: 'center'
+  },
+  {
+    prop: 'quantity',
+    label: i18n.t('module.basicData.storageBox.StorageQuantity'),
+    align: 'center'
+  },
+  {
+    prop: 'status',
+    label: i18n.t('module.basicData.storageBox.status'),
+    filter: basicData('storage'),
+    align: 'center'
+  },
+  {
+    prop: 'remark',
+    label: i18n.t('module.basicData.storageBox.remark'),
+    align: 'center'
+  },
+  {
+    prop: 'location',
+    label: i18n.t('module.basicData.cache.Location'),
+    subcomponent: PositionDetail,
+    align: 'center'
+  }
+]
+
+export default {
+  name: 'Area',
+  components: { Pagination, BaseTable, MethodBtn, HeadForm, storageBoxAdd },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      addOrUpdateVisible: false,
+      keyName: i18n.t('module.basicData.visual.keyword'),
+      placeholderName: this.$t('module.basicData.storageBox.name') + this.$t('module.basicData.visual.Or') + this.$t('module.basicData.storageBox.code'),
+      tableBtn,
+      trueWidth: 200,
+      tableProps,
+      list: [],
+      areaList: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        current: 1,
+        size: 10
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    handleClick(raw) {
+      if (raw.type === 'delete') {
+        this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`, this.$t('module.basicData.visual.Tips'), {
+          confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+          cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+          type: 'warning'
+        }).then(() => {
+          storageBoxDelete(raw.data.id).then(response => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+              }
+            })
+          })
+        }).catch(() => {})
+      } else if (raw.type === 'edit') {
+        this.addNew(raw.data.id)
+      } else {
+        this.addNew(raw.data.id, true)
+      }
+    },
+    getList(key) {
+      this.listLoading = true
+      this.listQuery.name = key
+      this.listQuery.code = key
+      storageBoxList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    },
+    // 新增 / 修改
+    addNew(id) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id, true)
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/basicData/CodeRules.vue b/src/views/basicData/CodeRules.vue
new file mode 100644
index 0000000..2721c41
--- /dev/null
+++ b/src/views/basicData/CodeRules.vue
@@ -0,0 +1,201 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-11 16:42:48
+ * @Description:
+-->
+<template>
+  <div class="app-container">
+    <head-form
+      :placeholder-name="placeholderName"
+      :key-name="keyName"
+      @getDataList="getList"
+      @add="addNew"
+    />
+    <base-table
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    >
+      <method-btn
+        slot="handleBtn"
+        :width="trueWidth"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      @pagination="getList()"
+    />
+    <CodeRules-add v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
+  </div>
+</template>
+
+<script>import i18n from '@/lang'
+import { CodeRulesList, CodeRulesDelete } from '@/api/basicData/CodeRules'
+import CodeRulesAdd from './components/CodeRules-add'
+import attrBtn from './components/attrBtn'
+import HeadForm from '@/components/basicData/HeadForm'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import { timeFormatter } from '@/filters'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+
+const tableBtn = [
+  {
+    type: 'edit',
+    btnName: 'btn.edit'
+  },
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  }
+]
+const tableProps = [
+  {
+    prop: 'createTime',
+    label: i18n.t('module.basicData.factory.createTime'),
+    filter: timeFormatter,
+    align: 'center'
+  },
+  {
+    prop: 'name',
+    label: i18n.t('module.basicData.CodeRules.RuleName'),
+    align: 'center'
+  },
+  {
+    prop: 'code',
+    label: i18n.t('module.basicData.CodeRules.RuleCode'),
+    align: 'center'
+  },
+  {
+    prop: 'abbreviation',
+    label: i18n.t('module.basicData.visual.Abbreviation'),
+    align: 'center'
+  },
+  {
+    prop: 'description',
+    label: i18n.t('module.basicData.visual.Remarks'),
+    align: 'center'
+  },
+  {
+    prop: 'attribute',
+    label: i18n.t('module.basicData.CodeRules.Property'),
+    subcomponent: attrBtn,
+    align: 'center'
+  }
+]
+
+export default {
+  name: 'CodeRules',
+  components: { Pagination, BaseTable, MethodBtn, HeadForm, CodeRulesAdd },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      keyName: i18n.t('module.basicData.visual.keyword'),
+      placeholderName: this.$t('module.basicData.CodeRules.RuleName'),
+      addOrUpdateVisible: false,
+      tableBtn,
+      trueWidth: 200,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        current: 1,
+        size: 10
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    handleClick(raw) {
+      console.log(raw)
+      if (raw.type === 'delete') {
+        this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`, this.$t('module.basicData.visual.Tips'), {
+          confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+          cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+          type: 'warning'
+        }).then(() => {
+          CodeRulesDelete(raw.data.id).then(response => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+              }
+            })
+          })
+        }).catch(() => {})
+      } else {
+        this.addNew(raw.data.id)
+      }
+    },
+    getList(key) {
+      this.listLoading = true
+      this.listQuery.name = key
+      CodeRulesList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    },
+    // 新增 / 修改
+    addNew(id) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id)
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/basicData/CustomerSupplier/components/customer-add.vue b/src/views/basicData/CustomerSupplier/components/customer-add.vue
new file mode 100644
index 0000000..62d0faf
--- /dev/null
+++ b/src/views/basicData/CustomerSupplier/components/customer-add.vue
@@ -0,0 +1,145 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-25 16:24:15
+ * @Description:
+-->
+<template>
+  <el-dialog
+    :title="!dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter"
+    :visible.sync="visible"
+  >
+    <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="100px" @keyup.enter.native="dataFormSubmit()">
+      <el-form-item :label="$t('module.basicData.customer.CustomerName')" prop="name">
+        <el-input v-model="dataForm.name" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.customer.CustomerName')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.customer.CustomerCode')" prop="code">
+        <el-input v-model="dataForm.code" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.customer.CustomerCode')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.customer.ContactPerson')" prop="contact">
+        <el-input v-model="dataForm.contact" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.customer.ContactPerson')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.customer.Telephone')" prop="telephone">
+        <el-input
+          v-model="dataForm.telephone"
+          :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.customer.Telephone')])"
+          clearable
+          prefix-icon="el-icon-phone"
+          :style="{width: '100%'}"
+        />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.customer.Address')" prop="address">
+        <el-input v-model="dataForm.address" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.customer.Address')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.visual.Remarks')" prop="description">
+        <el-input v-model="dataForm.description" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Remarks')])" clearable />
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { customerDetail, customerUpdate, customerAdd, customerCode } from '@/api/basicData/CustomerSupplier/customer'
+
+export default {
+  data() {
+    return {
+      visible: false,
+      dataForm: {
+        id: 0,
+        name: '',
+        code: '',
+        contact: '',
+        telephone: '',
+        address: '',
+        description: ''
+      },
+      dataRule: {
+        name: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.customer.CustomerName')]), trigger: 'blur' }
+        ],
+        code: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.customer.CustomerCode')]), trigger: 'blur' }
+        ],
+        contact: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.customer.ContactPerson')]), trigger: 'blur' }
+        ],
+        telephone: [{
+          required: true,
+          pattern: /(^1\d{10}$)|(^[0-9]\d{7}$)/,
+          message: this.$t('module.basicData.customer.Telephone') + this.$t('module.basicData.customer.format'),
+          trigger: 'blur'
+        }]
+      }
+    }
+  },
+  methods: {
+    init(id) {
+      customerCode().then(res => {
+        this.dataForm.code = res.data
+      })
+      this.dataForm.id = id || ''
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          customerDetail(this.dataForm.id).then(res => {
+            this.dataForm.name = res.data.name
+            this.dataForm.code = res.data.code
+            this.dataForm.description = res.data.description
+            this.dataForm.contact = res.data.contact
+            this.dataForm.address = res.data.address
+            this.dataForm.telephone = res.data.telephone
+          })
+        }
+      })
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          const data = {
+            'name': this.dataForm.name,
+            'code': this.dataForm.code,
+            'description': this.dataForm.description,
+            'contact': this.dataForm.contact,
+            'telephone': this.dataForm.telephone,
+            'address': this.dataForm.address,
+            'id': this.dataForm.id
+          }
+          if (this.dataForm.id) {
+            customerUpdate(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          } else {
+            customerAdd(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          }
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/basicData/CustomerSupplier/components/supplier-add.vue b/src/views/basicData/CustomerSupplier/components/supplier-add.vue
new file mode 100644
index 0000000..1f6cecb
--- /dev/null
+++ b/src/views/basicData/CustomerSupplier/components/supplier-add.vue
@@ -0,0 +1,140 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-10 11:06:50
+ * @Description:
+-->
+<template>
+  <el-dialog
+    :title="!dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter"
+    :visible.sync="visible"
+  >
+    <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="100px" @keyup.enter.native="dataFormSubmit()">
+      <el-form-item :label="$t('module.basicData.supplier.SupplierName')" prop="name">
+        <el-input v-model="dataForm.name" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.supplier.SupplierName')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.supplier.SupplierCode')" prop="code">
+        <el-input v-model="dataForm.code" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.supplier.SupplierCode')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.supplier.ContactPerson')" prop="contact">
+        <el-input v-model="dataForm.contact" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.supplier.ContactPerson')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.supplier.Telephone')" prop="telephone">
+        <el-input
+          v-model="dataForm.telephone"
+          :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.supplier.Telephone')])"
+          clearable
+          prefix-icon="el-icon-phone"
+          :style="{width: '100%'}"
+        />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.supplier.Address')" prop="address">
+        <el-input v-model="dataForm.address" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.supplier.Address')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.visual.Remarks')" prop="description">
+        <el-input v-model="dataForm.description" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Remarks')])" clearable />
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { supplierDetail, supplierUpdate, supplierAdd, supplierCode } from '@/api/basicData/CustomerSupplier/supplier'
+
+export default {
+  data() {
+    return {
+      visible: false,
+      dataForm: {
+        id: 0,
+        name: '',
+        code: '',
+        contact: '',
+        telephone: '',
+        description: '',
+        address: ''
+      },
+      dataRule: {
+        name: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.supplier.SupplierName')]), trigger: 'blur' }
+        ],
+        code: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.supplier.SupplierCode')]), trigger: 'blur' }
+        ],
+        contact: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.supplier.ContactPerson')]), trigger: 'blur' }
+        ],
+        telephone: [{
+          required: true,
+          pattern: /(^1\d{10}$)|(^[0-9]\d{7}$)/,
+          message: this.$t('module.basicData.supplier.Telephone') + this.$t('module.basicData.customer.format'),
+          trigger: 'blur'
+        }]
+      }
+    }
+  },
+  methods: {
+    init(id) {
+      supplierCode().then(res => {
+        this.dataForm.code = res.data
+      })
+      this.dataForm.id = id || ''
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          supplierDetail(this.dataForm.id).then(res => {
+            this.dataForm = res.data
+          })
+        }
+      })
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          const data = {
+            'name': this.dataForm.name,
+            'code': this.dataForm.code,
+            'description': this.dataForm.description,
+            'contact': this.dataForm.contact,
+            'telephone': this.dataForm.telephone,
+            'address': this.dataForm.address,
+            'id': this.dataForm.id
+          }
+          if (this.dataForm.id) {
+            supplierUpdate(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          } else {
+            supplierAdd(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          }
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/basicData/CustomerSupplier/customer.vue b/src/views/basicData/CustomerSupplier/customer.vue
new file mode 100644
index 0000000..3273e83
--- /dev/null
+++ b/src/views/basicData/CustomerSupplier/customer.vue
@@ -0,0 +1,204 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-11 16:44:58
+ * @Description:
+-->
+<template>
+  <div class="app-container">
+    <head-form
+      :placeholder-name="placeholderName"
+      :key-name="keyName"
+      @getDataList="getList"
+      @add="addNew"
+    />
+    <base-table
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    >
+      <method-btn
+        slot="handleBtn"
+        :width="trueWidth"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      @pagination="getList()"
+    />
+    <customer-add v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
+  </div>
+</template>
+
+<script>import i18n from '@/lang'
+import { customerList, customerDelete } from '@/api/basicData/CustomerSupplier/customer'
+import customerAdd from './components/customer-add.vue'
+import HeadForm from '@/components/basicData/HeadForm'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import { timeFormatter } from '@/filters'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+
+const tableBtn = [
+  {
+    type: 'edit',
+    btnName: 'btn.edit'
+  },
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  }
+]
+const tableProps = [
+  {
+    prop: 'createTime',
+    label: i18n.t('module.basicData.factory.createTime'),
+    filter: timeFormatter,
+    align: 'center'
+  },
+  {
+    prop: 'name',
+    label: i18n.t('module.basicData.customer.CustomerName'),
+    align: 'center'
+  },
+  {
+    prop: 'code',
+    label: i18n.t('module.basicData.customer.CustomerCode'),
+    align: 'center'
+  },
+  {
+    prop: 'contact',
+    label: i18n.t('module.basicData.customer.ContactPerson'),
+    align: 'center'
+  },
+  {
+    prop: 'telephone',
+    label: i18n.t('module.basicData.customer.Telephone'),
+    align: 'center'
+  },
+  {
+    prop: 'address',
+    label: i18n.t('module.basicData.customer.Address'),
+    align: 'center'
+  },
+  {
+    prop: 'description',
+    label: i18n.t('module.basicData.visual.Remarks'),
+    align: 'center'
+  }
+]
+
+export default {
+  name: 'Customer',
+  components: { Pagination, BaseTable, MethodBtn, HeadForm, customerAdd },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      keyName: i18n.t('module.basicData.visual.keyword'),
+      placeholderName: this.$t('module.basicData.customer.CustomerName'),
+      addOrUpdateVisible: false,
+      tableBtn,
+      trueWidth: 200,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        current: 1,
+        size: 10
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    handleClick(raw) {
+      console.log(raw)
+      if (raw.type === 'delete') {
+        this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`, this.$t('module.basicData.visual.Tips'), {
+          confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+          cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+          type: 'warning'
+        }).then(() => {
+          customerDelete(raw.data.id).then(response => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+              }
+            })
+          })
+        }).catch(() => {})
+      } else {
+        this.addNew(raw.data.id)
+      }
+    },
+    getList(key) {
+      this.listLoading = true
+      this.listQuery.name = key
+      customerList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    },
+    // 新增 / 修改
+    addNew(id) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id)
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/basicData/CustomerSupplier/supplier.vue b/src/views/basicData/CustomerSupplier/supplier.vue
new file mode 100644
index 0000000..9b914ac
--- /dev/null
+++ b/src/views/basicData/CustomerSupplier/supplier.vue
@@ -0,0 +1,205 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-11 16:45:09
+ * @Description:
+-->
+<template>
+  <div class="app-container">
+    <head-form
+      :placeholder-name="placeholderName"
+      :key-name="keyName"
+      @getDataList="getList"
+      @add="addNew"
+    />
+    <base-table
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    >
+      <method-btn
+        slot="handleBtn"
+        :width="trueWidth"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      @pagination="getList()"
+    />
+    <supplier-add v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
+  </div>
+</template>
+
+<script>import i18n from '@/lang'
+import { supplierList, supplierDelete } from '@/api/basicData/CustomerSupplier/supplier'
+import supplierAdd from './components/supplier-add.vue'
+import HeadForm from '@/components/basicData/HeadForm'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import { timeFormatter } from '@/filters'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+
+const tableBtn = [
+  {
+    type: 'edit',
+    btnName: 'btn.edit'
+  },
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  }
+]
+const tableProps = [
+  {
+    prop: 'createTime',
+    label: i18n.t('module.basicData.factory.createTime'),
+    filter: timeFormatter,
+    align: 'center'
+  },
+  {
+    prop: 'name',
+    label: i18n.t('module.basicData.supplier.SupplierName'),
+    align: 'center'
+  },
+  {
+    prop: 'code',
+    label: i18n.t('module.basicData.supplier.SupplierCode'),
+    align: 'center'
+  },
+  {
+    prop: 'contact',
+    label: i18n.t('module.basicData.supplier.ContactPerson'),
+    align: 'center'
+  },
+  {
+    prop: 'telephone',
+    label: i18n.t('module.basicData.supplier.Telephone'),
+    align: 'center'
+  },
+  {
+    prop: 'address',
+    label: i18n.t('module.basicData.supplier.Address'),
+    align: 'center'
+  },
+  {
+    prop: 'description',
+    label: i18n.t('module.basicData.visual.Remarks'),
+    align: 'center'
+  }
+]
+
+export default {
+  name: 'Supplier',
+  components: { Pagination, BaseTable, MethodBtn, HeadForm, supplierAdd },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      keyName: i18n.t('module.basicData.visual.keyword'),
+      placeholderName: this.$t('module.basicData.supplier.SupplierName') + this.$t('module.basicData.visual.Or') + this.$t('module.basicData.supplier.SupplierCode'),
+      addOrUpdateVisible: false,
+      tableBtn,
+      trueWidth: 200,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        current: 1,
+        size: 10
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    handleClick(raw) {
+      console.log(raw)
+      if (raw.type === 'delete') {
+        this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`, this.$t('module.basicData.visual.Tips'), {
+          confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+          cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+          type: 'warning'
+        }).then(() => {
+          supplierDelete(raw.data.id).then(response => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+              }
+            })
+          })
+        }).catch(() => {})
+      } else {
+        this.addNew(raw.data.id)
+      }
+    },
+    getList(key) {
+      this.listLoading = true
+      this.listQuery.name = key
+      this.listQuery.code = key
+      supplierList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    },
+    // 新增 / 修改
+    addNew(id) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id)
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/basicData/Equipment/EquipmentGroup.vue b/src/views/basicData/Equipment/EquipmentGroup.vue
new file mode 100644
index 0000000..c3329f2
--- /dev/null
+++ b/src/views/basicData/Equipment/EquipmentGroup.vue
@@ -0,0 +1,183 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-05-18 14:22:53
+ * @Description:
+-->
+<template>
+  <div class="app-container">
+    <el-button type="primary" @click="addNew()">{{ 'btn.add' | i18nFilter }}</el-button>
+    <base-table
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    >
+      <method-btn
+        slot="handleBtn"
+        :width="trueWidth"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      @pagination="getList()"
+    />
+    <equipmentGroup-add v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
+  </div>
+</template>
+
+<script>
+import { equipmentGroupList, equipmentGroupDelete } from '@/api/basicData/Equipment/equipmentGroup'
+import equipmentGroupAdd from './components/equipmentGroup-add.vue'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import { timeFormatter } from '@/filters'
+import i18n from '@/lang'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+
+const tableBtn = [
+  {
+    type: 'edit',
+    btnName: 'btn.edit'
+  },
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  }
+]
+const tableProps = [
+  {
+    prop: 'createTime',
+    label: i18n.t('module.basicData.factory.createTime'),
+    filter: timeFormatter,
+    align: 'center'
+  },
+  {
+    prop: 'groupName',
+    label: i18n.t('module.basicData.equipment.groupName'),
+    align: 'center'
+  },
+  {
+    prop: 'groupCode',
+    label: i18n.t('module.basicData.equipment.groupCode'),
+    align: 'center'
+  },
+  {
+    prop: 'remark',
+    label: i18n.t('module.basicData.visual.Remarks'),
+    align: 'center'
+  }
+]
+
+export default {
+  name: 'EquipmentGroup',
+  components: { Pagination, BaseTable, MethodBtn, equipmentGroupAdd },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      keyName: i18n.t('module.basicData.visual.keyword'),
+      placeholderName: this.$t('module.basicData.factory.placeholderName'),
+      addOrUpdateVisible: false,
+      tableBtn,
+      trueWidth: 200,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        current: 1,
+        size: 10
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    handleClick(raw) {
+      console.log(raw)
+      if (raw.type === 'delete') {
+        this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.groupName}]?`, this.$t('module.basicData.visual.Tips'), {
+          confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+          cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+          type: 'warning'
+        }).then(() => {
+          equipmentGroupDelete(raw.data.id).then(response => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+              }
+            })
+          })
+        }).catch(() => {})
+      } else {
+        this.addNew(raw.data.id)
+      }
+    },
+    getList(key) {
+      this.listLoading = true
+      equipmentGroupList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    },
+    // 新增 / 修改
+    addNew(id) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id)
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/basicData/Equipment/components/detectSystemSettings-add.vue b/src/views/basicData/Equipment/components/detectSystemSettings-add.vue
new file mode 100644
index 0000000..3b26961
--- /dev/null
+++ b/src/views/basicData/Equipment/components/detectSystemSettings-add.vue
@@ -0,0 +1,259 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-05-31 08:45:53
+ * @enName:
+-->
+<template>
+  <div style="margin:20px">
+    <div slot="title" style=" background-color:#02BCFF;font-size:1.5em;color:white;padding:5px 20px;margin:20px">{{ isdetail? 'btn.detail' : !dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter }}</div>
+    <div style="margin:0 15px">
+      <el-form ref="dataForm" :inline="true" :model="dataForm" :rules="dataRule" label-width="160px" @keyup.enter.native="dataFormSubmit()">
+        <el-form-item :label="$t('module.basicData.equipmentDetectInfo.DetectionArea')" prop="detectDistributionAreaId">
+          <el-select v-model="dataForm.detectDistributionAreaId" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipmentDetectInfo.DetectionArea')])" clearable>
+            <el-option
+              v-for="item in detectAreaArr"
+              :key="item.id"
+              :label="item.detectArea"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('module.basicData.equipmentDetectInfo.equipmentDetectSystemName')" prop="detectSystemId">
+          <el-select v-model="dataForm.detectSystemId" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipmentDetectInfo.equipmentDetectSystemName')])" clearable>
+            <el-option
+              v-for="item in SystemArr"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <div style="margin:20px">
+        <el-button type="success" @click="goback()">{{ 'btn.back' | i18nFilter }}</el-button>
+        <el-button v-if="isdetail" type="primary" @click="goEdit()">{{ 'btn.edit' | i18nFilter }}</el-button>
+        <span v-if="!isdetail">
+          <el-button type="primary" @click="dataFormSubmit()">{{ 'btn.save' | i18nFilter }}</el-button>
+          <el-button v-if="dataForm.id" type="primary" @click="addNew()">{{ $t('module.basicData.equipmentDetectInfo.AddEquipment') }}</el-button>
+        </span>
+      </div>
+      <div style="height:380px;overflow:auto">
+        <base-table
+          :page="listQuery.current"
+          :limit="listQuery.size"
+          :table-config="tableProps"
+          :table-data="list"
+        >
+          <method-btn
+            v-if="!isdetail"
+            slot="handleBtn"
+            :method-list="tableBtn"
+            @clickBtn="handleClick"
+          />
+        </base-table>
+      </div>
+    </div>
+    <detectSystemSettings-attr-add v-if="addOrUpdateVisible" ref="addOrUpdate" :detect-area-system-id="dataForm.id" @refreshDataList="getList" />
+  </div>
+</template>
+
+<script>import i18n from '@/lang'
+import { equipmentDetectAreaList } from '@/api/basicData/Equipment/equipmentDetectArea'
+import { equipmentDetectSystemList } from '@/api/basicData/Equipment/equipmentDetectSystem'
+import { equipmentDetectAreaSystemDetail, equipmentDetectAreaSystemUpdate, equipmentDetectAreaSystemAdd } from '@/api/basicData/Equipment/equipmentDetectAreaSystem'
+import { DetectAreaSystemAttrList, DetectAreaSystemAttrDelete } from '@/api/basicData/Equipment/equipmentDetectAreaSystemAttr'
+import BaseTable from '@/components/BaseTable'
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import detectSystemSettingsAttrAdd from './detectSystemSettingsAttr-add'
+const tableBtn = [
+  {
+    type: 'edit',
+    btnName: 'btn.edit'
+  },
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  }
+]
+const tableProps = [
+  {
+    prop: 'name',
+    label: i18n.t('module.basicData.equipment.EquipmentName'),
+    align: 'center'
+  },
+  {
+    prop: 'code',
+    label: i18n.t('module.basicData.equipment.EquipmentCode'),
+    align: 'center'
+  },
+  {
+    prop: 'function',
+    label: i18n.t('module.basicData.equipmentDetectInfo.EquipmentFunction'),
+    align: 'center'
+  }
+]
+
+export default {
+  components: { BaseTable, MethodBtn, detectSystemSettingsAttrAdd },
+  data() {
+    return {
+      addOrUpdateVisible: false,
+      categoryArr: [],
+      tableBtn,
+      trueWidth: 200,
+      tableProps,
+      list: [],
+      dataForm: {
+        id: '',
+        detectDistributionAreaId: '',
+        detectSystemId: ''
+      },
+      dataRule: {
+        detectDistributionAreaId: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.equipmentDetectInfo.DetectionArea')]), trigger: 'change' }
+        ],
+        detectSystemId: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.equipmentDetectInfo.equipmentDetectSystemName')]), trigger: 'change' }
+        ]
+      },
+      listQuery: {
+        current: 1,
+        size: 990,
+        detectAreaSystemId: ''
+      },
+      detectAreaArr: [],
+      SystemArr: [],
+      isdetail: false
+    }
+  },
+  created() {
+    this.dataForm.id = this.$route.query.id
+    this.listQuery.detectAreaSystemId = this.$route.query.id
+    this.init()
+  },
+  methods: {
+    init() {
+      this.isdetail = false
+      this.isdetail = Boolean(this.$route.query.isdetail)
+      this.list.splice(0, this.list.length)
+      const data = {
+        current: 1,
+        size: 500
+      }
+      equipmentDetectAreaList(data).then(response => {
+        if (response.data.records) {
+          this.detectAreaArr = response.data.records
+        } else {
+          this.detectAreaArr.splice(0, this.detectAreaArr.length)
+        }
+      })
+      equipmentDetectSystemList(data).then(response => {
+        if (response.data.records) {
+          this.SystemArr = response.data.records
+        } else {
+          this.SystemArr.splice(0, this.SystemArr.length)
+        }
+      })
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          equipmentDetectAreaSystemDetail(this.dataForm.id).then(res => {
+            this.dataForm = res.data
+          })
+          DetectAreaSystemAttrList(this.listQuery).then(response => {
+            if (response.data.records) {
+              this.list = response.data.records
+            } else {
+              this.list.splice(0, this.list.length)
+            }
+          })
+        }
+      })
+    },
+    getList() {
+      DetectAreaSystemAttrList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+      })
+    },
+    handleClick(raw) {
+      if (raw.type === 'delete') {
+        this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`, this.$t('module.basicData.visual.Tips'), {
+          confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+          cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+          type: 'warning'
+        }).then(() => {
+          DetectAreaSystemAttrDelete(raw.data.id).then(response => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+              }
+            })
+          })
+        }).catch(() => {})
+      } else {
+        this.addNew(raw.data.id)
+      }
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          const data = this.dataForm
+          if (this.dataForm.id) {
+            equipmentDetectAreaSystemUpdate(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500
+              })
+            })
+          } else {
+            equipmentDetectAreaSystemAdd(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500
+              })
+              this.dataForm.id = res.data.id
+            })
+          }
+        }
+      })
+    },
+    // 新增 / 修改
+    addNew(id) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id)
+      })
+    },
+    goEdit() {
+      this.isdetail = false
+    },
+    goback() {
+      this.$router.go(-1)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.drawer-footer {
+  width: 100%;
+  margin-top: 50px;
+  border-top: 1px solid #e8e8e8;
+  border-bottom: 1px solid #e8e8e8;
+  padding: 10px 50px;
+  text-align: left;
+  background: #fff;
+}
+</style>
diff --git a/src/views/basicData/Equipment/components/detectSystemSettingsAttr-add.vue b/src/views/basicData/Equipment/components/detectSystemSettingsAttr-add.vue
new file mode 100644
index 0000000..765f54e
--- /dev/null
+++ b/src/views/basicData/Equipment/components/detectSystemSettingsAttr-add.vue
@@ -0,0 +1,130 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-05-28 10:48:46
+ * @Description:
+-->
+<template>
+  <el-dialog
+    :title="!dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter"
+    :visible.sync="visible"
+  >
+    <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="140px" @keyup.enter.native="dataFormSubmit()">
+      <el-form-item :label="$t('module.basicData.equipment.EquipmentName')" prop="equipmentId">
+        <el-select v-model="dataForm.equipmentId" filterable :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.EquipmentName')])" clearable>
+          <el-option
+            v-for="item in equipmentArr"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <div class="drawer-footer">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { DetectAreaSystemAttrDetail, DetectAreaSystemAttrUpdate, DetectAreaSystemAttrAdd } from '@/api/basicData/Equipment/equipmentDetectAreaSystemAttr'
+import { equipmentInfoList } from '@/api/basicData/Equipment/equipmentInfo'
+
+export default {
+  props: {
+    detectAreaSystemId: {
+      type: String,
+      default: () => {
+        return ''
+      }
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      dataForm: {
+        id: 0,
+        equipmentId: ''
+      },
+      equipmentArr: [],
+      dataRule: {
+        equipmentId: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.visual.AttributeName')]), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    init(id) {
+      equipmentInfoList({
+        current: 1,
+        size: 999,
+        name: ''
+      }).then(response => {
+        this.equipmentArr = response.data.records
+      })
+      this.dataForm.id = id || ''
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          DetectAreaSystemAttrDetail(this.dataForm.id).then(res => {
+            this.dataForm.equipmentId = res.data.equipmentId
+          })
+        }
+      })
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          const data = {
+            'equipmentId': this.dataForm.equipmentId,
+            'detectAreaSystemId': this.detectAreaSystemId,
+            'id': this.dataForm.id
+          }
+          if (this.dataForm.id) {
+            DetectAreaSystemAttrUpdate(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          } else {
+            DetectAreaSystemAttrAdd(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.drawer-footer {
+  width: 100%;
+  margin-top: 50px;
+  border-top: 1px solid #e8e8e8;
+  padding: 10px 50px;
+  text-align: left;
+  background: #fff;
+}
+</style>
diff --git a/src/views/basicData/Equipment/components/equipmentDetectArea-add.vue b/src/views/basicData/Equipment/components/equipmentDetectArea-add.vue
new file mode 100644
index 0000000..b88e39b
--- /dev/null
+++ b/src/views/basicData/Equipment/components/equipmentDetectArea-add.vue
@@ -0,0 +1,272 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-07-23 09:03:46
+ * @enName:
+-->
+<template>
+  <div style="margin:20px">
+    <div slot="title" style=" background-color:#02BCFF;font-size:1.5em;color:white;padding:5px 20px;margin:20px">{{ isdetail? 'btn.detail' : !dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter }}</div>
+    <div style="margin:0 15px">
+      <el-form ref="dataForm" :inline="true" :model="dataForm" :rules="dataRule" label-width="130px" @keyup.enter.native="dataFormSubmit()">
+        <el-form-item :label="$t('module.basicData.equipment.WiredCode')" prop="code">
+          <el-input v-model="dataForm.code" style="width:300px" :disabled="isdetail" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.WiredCode')])" clearable />
+        </el-form-item>
+        <el-form-item :label="$t('module.basicData.equipmentDetectInfo.DetectionArea')" prop="detectArea">
+          <el-select v-model="dataForm.detectArea" :disabled="isdetail" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipmentDetectInfo.DetectionArea')])" clearable>
+            <el-option
+              v-for="item in detectAreaArr"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('module.basicData.equipmentDetectInfo.IssueArea')" prop="distributionArea">
+          <el-select v-model="dataForm.distributionArea" :disabled="isdetail" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipmentDetectInfo.IssueArea')])" clearable>
+            <el-option
+              v-for="item in distributionAreaArr"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <div style="margin:20px">
+        <el-button type="success" @click="goback()">{{ 'btn.back' | i18nFilter }}</el-button>
+        <el-button v-if="isdetail" type="primary" @click="goEdit()">{{ 'btn.edit' | i18nFilter }}</el-button>
+        <span v-if="!isdetail">
+          <el-button type="primary" @click="dataFormSubmit()">{{ 'btn.save' | i18nFilter }}</el-button>
+          <el-button v-if="false" type="primary" @click="addNew()">{{ $t('module.basicData.equipmentDetectInfo.AddEquipment') }}</el-button>
+          <!-- //listQuery.detectDistributionAreaId -->
+        </span>
+      </div>
+      <div v-if="false" style="height:380px;overflow:auto">
+        <base-table
+          :page="listQuery.current"
+          :limit="listQuery.size"
+          :table-config="tableProps"
+          :table-data="list"
+        >
+          <method-btn
+            v-if="!isdetail"
+            slot="handleBtn"
+            :method-list="tableBtn"
+            @clickBtn="handleClick"
+          />
+        </base-table>
+      </div>
+    </div>
+    <equipmentDetectArea-attr-add v-if="addOrUpdateVisible" ref="addOrUpdate" :detect-distribution-area-id="listQuery.detectDistributionAreaId" @refreshDataList="getList" />
+  </div>
+</template>
+
+<script>import i18n from '@/lang'
+import { equipmentDetectAreaDetail, equipmentDetectAreaUpdate, equipmentDetectAreaAdd, equipmentDetectAreaCode } from '@/api/basicData/Equipment/equipmentDetectArea'
+import { equipmentDetectAreaAttrList, equipmentDetectAreaAttrDelete } from '@/api/basicData/Equipment/equipmentDetectAreaAttr'
+import BaseTable from '@/components/BaseTable'
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import equipmentDetectAreaAttrAdd from './equipmentDetectAreaAttr-add'
+const tableBtn = [
+  {
+    type: 'edit',
+    btnName: 'btn.edit'
+  },
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  }
+]
+const tableProps = [
+  {
+    prop: 'name',
+    label: i18n.t('module.basicData.equipment.EquipmentName'),
+    align: 'center'
+  },
+  {
+    prop: 'code',
+    label: i18n.t('module.basicData.equipment.EquipmentCode'),
+    align: 'center'
+  },
+  {
+    prop: 'function',
+    label: i18n.t('module.basicData.equipmentDetectInfo.EquipmentFunction'),
+    align: 'center'
+  }
+]
+
+export default {
+  components: { BaseTable, MethodBtn, equipmentDetectAreaAttrAdd },
+  data() {
+    return {
+      addOrUpdateVisible: false,
+      categoryArr: [],
+      tableBtn,
+      trueWidth: 200,
+      tableProps,
+      list: [],
+      dataForm: {
+        code: '',
+        distributionArea: '',
+        detectArea: ''
+      },
+      detectAreaArr: [{
+        value: 'Backend',
+        label: 'Backend'
+      }, {
+        value: 'Frontend',
+        label: 'Frontend'
+      }, {
+        value: 'Midend',
+        label: 'Midend'
+      }],
+      distributionAreaArr: [{
+        value: '00A',
+        label: '00A'
+      }, {
+        value: '00C',
+        label: '00C'
+      }, {
+        value: 'PID24',
+        label: 'PID24'
+      }],
+      dataRule: {
+        code: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.equipment.WiredCode')]), trigger: 'blur' }
+        ],
+        distributionArea: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.equipmentDetectInfo.IssueArea')]), trigger: 'change' }
+        ],
+        detectArea: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.equipmentDetectInfo.DetectionArea')]), trigger: 'change' }
+        ]
+      },
+      listQuery: {
+        current: 1,
+        size: 990,
+        detectDistributionAreaId: ''
+      },
+      isdetail: false
+    }
+  },
+  created() {
+    this.listQuery.detectDistributionAreaId = this.$route.query.id
+    this.init()
+  },
+  methods: {
+    init() {
+      this.isdetail = false
+      this.isdetail = Boolean(this.$route.query.isdetail)
+      this.list.splice(0, this.list.length)
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.listQuery.detectDistributionAreaId) {
+          equipmentDetectAreaDetail(this.listQuery.detectDistributionAreaId).then(res => {
+            this.dataForm = res.data
+          })
+          equipmentDetectAreaAttrList(this.listQuery).then(response => {
+            if (response.data.records) {
+              this.list = response.data.records
+            } else {
+              this.list.splice(0, this.list.length)
+            }
+          })
+        } else {
+          equipmentDetectAreaCode().then(res => {
+            this.dataForm.code = res.data
+          })
+        }
+      })
+    },
+    getList() {
+      equipmentDetectAreaAttrList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+      })
+    },
+    handleClick(raw) {
+      if (raw.type === 'delete') {
+        this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`, this.$t('module.basicData.visual.Tips'), {
+          confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+          cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+          type: 'warning'
+        }).then(() => {
+          equipmentDetectAreaAttrDelete(raw.data.id).then(response => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+              }
+            })
+          })
+        }).catch(() => {})
+      } else {
+        this.addNew(raw.data.id)
+      }
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          const data = {
+            'code': this.dataForm.code,
+            'detectArea': this.dataForm.detectArea,
+            'distributionArea': this.dataForm.distributionArea,
+            'id': this.listQuery.detectDistributionAreaId
+          }
+          if (this.listQuery.detectDistributionAreaId) {
+            equipmentDetectAreaUpdate(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500
+              })
+            })
+          } else {
+            equipmentDetectAreaAdd(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500
+              })
+              this.listQuery.detectDistributionAreaId = res.data.id
+            })
+          }
+        }
+      })
+    },
+    // 新增 / 修改
+    addNew(id) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id)
+      })
+    },
+    goEdit() {
+      this.isdetail = false
+    },
+    goback() {
+      this.$router.go(-1)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.drawer-footer {
+  width: 100%;
+  margin-top: 50px;
+  border-top: 1px solid #e8e8e8;
+  border-bottom: 1px solid #e8e8e8;
+  padding: 10px 50px;
+  text-align: left;
+  background: #fff;
+}
+</style>
diff --git a/src/views/basicData/Equipment/components/equipmentDetectAreaAttr-add.vue b/src/views/basicData/Equipment/components/equipmentDetectAreaAttr-add.vue
new file mode 100644
index 0000000..68e7506
--- /dev/null
+++ b/src/views/basicData/Equipment/components/equipmentDetectAreaAttr-add.vue
@@ -0,0 +1,130 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-05-28 10:12:01
+ * @Description:
+-->
+<template>
+  <el-dialog
+    :title="!dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter"
+    :visible.sync="visible"
+  >
+    <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="100px" @keyup.enter.native="dataFormSubmit()">
+      <el-form-item :label="$t('module.basicData.equipment.EquipmentName')" prop="equipmentId">
+        <el-select v-model="dataForm.equipmentId" filterable :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.EquipmentName')])" clearable>
+          <el-option
+            v-for="item in equipmentArr"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <div class="drawer-footer">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { equipmentDetectAreaAttrDetail, equipmentDetectAreaAttrUpdate, equipmentDetectAreaAttrAdd } from '@/api/basicData/Equipment/equipmentDetectAreaAttr'
+import { equipmentInfoList } from '@/api/basicData/Equipment/equipmentInfo'
+
+export default {
+  props: {
+    detectDistributionAreaId: {
+      type: String,
+      default: () => {
+        return ''
+      }
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      dataForm: {
+        id: 0,
+        equipmentId: ''
+      },
+      equipmentArr: [],
+      dataRule: {
+        equipmentId: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.visual.AttributeName')]), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    init(id) {
+      equipmentInfoList({
+        current: 1,
+        size: 999,
+        name: ''
+      }).then(response => {
+        this.equipmentArr = response.data.records
+      })
+      this.dataForm.id = id || ''
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          equipmentDetectAreaAttrDetail(this.dataForm.id).then(res => {
+            this.dataForm.equipmentId = res.data.equipmentId
+          })
+        }
+      })
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          const data = {
+            'equipmentId': this.dataForm.equipmentId,
+            'detectDistributionAreaId': this.detectDistributionAreaId,
+            'id': this.dataForm.id
+          }
+          if (this.dataForm.id) {
+            equipmentDetectAreaAttrUpdate(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          } else {
+            equipmentDetectAreaAttrAdd(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.drawer-footer {
+  width: 100%;
+  margin-top: 50px;
+  border-top: 1px solid #e8e8e8;
+  padding: 10px 50px;
+  text-align: left;
+  background: #fff;
+}
+</style>
diff --git a/src/views/basicData/Equipment/components/equipmentDetectParam-add.vue b/src/views/basicData/Equipment/components/equipmentDetectParam-add.vue
new file mode 100644
index 0000000..83a2e9f
--- /dev/null
+++ b/src/views/basicData/Equipment/components/equipmentDetectParam-add.vue
@@ -0,0 +1,234 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-26 14:02:11
+ * @enName:
+-->
+<template>
+  <el-container style="margin:30px">
+    <el-aside style="width:250px">
+      <el-tree :data="menuList" :props="defaultProps" @node-click="getOrganization" />
+    </el-aside>
+    <el-main style="border:2px solid #E4E4E4;border-radius:10px;margin-left:10px">
+      <el-form
+        ref="dataForm"
+        :model="listQuery"
+        :inline="true"
+        size="medium"
+        label-position="left"
+      >
+        <el-form-item :label="$t('module.basicData.equipment.EquipmentName')+'：'">
+          <span style="color:#1890FF">{{ listQuery.detectEquipmentAreaName }}</span>
+        </el-form-item>
+        <el-form-item :label="keyName +'：'" prop="name">
+          <el-input v-model="listQuery.name" :placeholder="placeholderName" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="getList()">{{ 'btn.search' | i18nFilter }}</el-button>
+          <el-button v-if="listQuery.detectEquipmentAreaId" type="primary" @click="addNew()">{{ 'btn.add' | i18nFilter }}</el-button>
+        </el-form-item>
+      </el-form>
+      <base-table
+        :page="listQuery.current"
+        :limit="listQuery.size"
+        :table-config="tableProps"
+        :table-data="list"
+      >
+        <method-btn
+          slot="handleBtn"
+          :method-list="tableBtn"
+          @clickBtn="handleClick"
+        />
+      </base-table>
+    </el-main>
+    <equipmentDetectParam-attr-add v-if="addOrUpdateVisible" ref="addOrUpdate" :detect-equipment-area-id="listQuery.detectEquipmentAreaId" @refreshDataList="getList" />
+  </el-container>
+</template>
+
+<script>import i18n from '@/lang'
+import { equipmentDetectParamList, equipmentDetectParamDelete } from '@/api/basicData/Equipment/equipmentDetectParam'
+import { equipmentDetectTreeList } from '@/api/basicData/Equipment/equipmentDetectArea'
+import BaseTable from '@/components/BaseTable'
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import equipmentDetectParamAttrAdd from './equipmentDetectParamAttr-add'
+import basicData from '@/filters/basicData'
+
+const tableBtn = [
+  {
+    type: 'edit',
+    btnName: 'btn.edit'
+  },
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  }
+]
+const tableProps = [
+  {
+    prop: 'name',
+    label: i18n.t('module.basicData.equipmentDetectInfo.TestParameterName'),
+    align: 'center',
+    width: '200px'
+  },
+  {
+    prop: 'value',
+    label: i18n.t('module.basicData.equipmentDetectInfo.ReferenceValue'),
+    align: 'center'
+  },
+  {
+    prop: 'distribution',
+    label: i18n.t('module.basicData.equipmentDetectInfo.IssueOrNot'),
+    filter: basicData('onDuty'),
+    align: 'center'
+  },
+  {
+    prop: 'testFrequency',
+    label: i18n.t('module.basicData.equipmentDetectInfo.TestFrequency'),
+    align: 'center'
+  },
+  {
+    prop: 'testSystem',
+    label: i18n.t('module.basicData.equipmentDetectInfo.TestSystem'),
+    align: 'center'
+  },
+  {
+    prop: 'description',
+    label: i18n.t('module.basicData.visual.Description'),
+    align: 'center'
+  },
+  {
+    prop: 'remark',
+    label: i18n.t('module.basicData.visual.Remarks'),
+    align: 'center'
+  }
+]
+
+export default {
+  components: { BaseTable, MethodBtn, equipmentDetectParamAttrAdd },
+  data() {
+    return {
+      keyName: i18n.t('module.basicData.visual.keyword'),
+      placeholderName: this.$t('module.basicData.equipmentDetectInfo.TestParameterName'),
+      addOrUpdateVisible: false,
+      menuList: [],
+      tableBtn,
+      trueWidth: 200,
+      tableProps,
+      list: [],
+      listQuery: {
+        detectEquipmentAreaId: '',
+        detectEquipmentAreaName: '',
+        name: '',
+        current: 1,
+        size: 10
+      },
+      defaultProps: {
+        children: 'children',
+        label: 'name'
+      }
+    }
+  },
+  created() {
+    this.init()
+  },
+  methods: {
+    async init() {
+      const TreeListQuery = {
+        current: 1,
+        size: 500
+      }
+      this.menuList.splice(0, this.menuList.length)
+      this.menuList = [
+        {
+          'name': '全部',
+          'children': []
+        }
+      ]
+      const res = await equipmentDetectTreeList(TreeListQuery)
+      if (res.code === 0) {
+        this.menuList[0].children = res.data
+        if (this.menuList[0].children) {
+          this.menuList[0].children.forEach(item => {
+            item.name = item.detectArea
+            if (item.detectSystemVoList) {
+              item.children = item.detectSystemVoList
+              item.detectSystemVoList.forEach(item1 => {
+                if (item1.equipmentVoList) { item1.children = item1.equipmentVoList }
+              })
+            }
+          })
+        }
+      }
+      this.getList()
+    },
+    getList() {
+      equipmentDetectParamList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+      })
+    },
+    getOrganization(data) {
+      if (data.detectEquipmentAreaId) {
+        this.listQuery.detectEquipmentAreaId = data.detectEquipmentAreaId
+        this.listQuery.detectEquipmentAreaName = data.name
+        this.getList()
+      } else {
+        this.listQuery.detectEquipmentAreaId = ''
+        this.listQuery.detectEquipmentAreaName = ''
+      }
+    },
+    handleClick(raw) {
+      if (raw.type === 'delete') {
+        this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`, this.$t('module.basicData.visual.Tips'), {
+          confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+          cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+          type: 'warning'
+        }).then(() => {
+          equipmentDetectParamDelete(raw.data.id).then(response => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+              }
+            })
+          })
+        }).catch(() => {})
+      } else {
+        this.addNew(raw.data.id)
+      }
+    },
+    // 新增 / 修改
+    addNew(id) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id)
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.drawer-footer {
+  width: 100%;
+  margin-top: 50px;
+  border-top: 1px solid #e8e8e8;
+  border-bottom: 1px solid #e8e8e8;
+  padding: 10px 50px;
+  text-align: left;
+  background: #fff;
+}
+.el-container >>> .el-aside{
+  border:2px solid #E4E4E4;
+  border-radius:10px;
+  background-color: white;
+  min-height:550px;
+  padding-top:20px
+}
+</style>
diff --git a/src/views/basicData/Equipment/components/equipmentDetectParamAttr-add.vue b/src/views/basicData/Equipment/components/equipmentDetectParamAttr-add.vue
new file mode 100644
index 0000000..91dfeec
--- /dev/null
+++ b/src/views/basicData/Equipment/components/equipmentDetectParamAttr-add.vue
@@ -0,0 +1,180 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-26 14:03:06
+ * @Description:
+-->
+<template>
+  <el-dialog
+    :title="!dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter"
+    :visible.sync="visible"
+  ><el-row :gutter="10">
+     <el-form
+       ref="dataForm"
+       :model="dataForm"
+       :rules="rules"
+       size="medium"
+       label-width="180px"
+       label-position="left"
+     >
+       <el-col :span="10">
+         <el-form-item :label="$t('module.basicData.equipmentDetectInfo.TestParameterName')" prop="name">
+           <el-input v-model="dataForm.name" :placeholder="$t('module.basicData.equipmentDetectInfo.TestParameterName')" clearable :style="{width: '100%'}" />
+         </el-form-item>
+       </el-col>
+       <el-col :span="10">
+         <el-form-item :label="$t('module.basicData.equipmentDetectInfo.ReferenceValue')" prop="value">
+           <el-input v-model="dataForm.value" :placeholder="$t('module.basicData.equipmentDetectInfo.ReferenceValue')" clearable :style="{width: '100%'}" />
+         </el-form-item>
+       </el-col>
+       <el-col :span="10">
+         <el-form-item :label="$t('module.basicData.equipmentDetectInfo.TestFrequency')" prop="testFrequency">
+           <el-input v-model="dataForm.testFrequency" :placeholder="$t('module.basicData.equipmentDetectInfo.TestFrequency')" clearable :style="{width: '100%'}" />
+         </el-form-item>
+       </el-col>
+       <el-col :span="10">
+         <el-form-item :label="$t('module.basicData.equipmentDetectInfo.TestSystem')" prop="testSystem">
+           <el-select v-model="dataForm.testSystem" filterable :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipmentDetectInfo.TestSystem')])" clearable>
+             <el-option
+               v-for="item in DetectSystemList"
+               :key="item.id"
+               :label="item.name"
+               :value="item.name"
+             />
+           </el-select>
+         </el-form-item>
+       </el-col>
+       <el-col :span="10">
+         <el-form-item :label="$t('module.basicData.equipmentDetectInfo.IssueOrNot')" prop="distribution">
+           <el-switch v-model="dataForm.distribution" active-value="1" inactive-value="0" />
+         </el-form-item>
+       </el-col>
+       <el-col :span="10">
+         <el-form-item :label="$t('module.basicData.visual.Description')" prop="description">
+           <el-input v-model="dataForm.description" :placeholder="$t('module.basicData.visual.Description')" clearable :style="{width: '100%'}" />
+         </el-form-item>
+       </el-col>
+       <el-col :span="10">
+         <el-form-item :label="$t('module.basicData.visual.Remarks')" prop="remark">
+           <el-input v-model="dataForm.remark" :placeholder="$t('module.basicData.visual.Remarks')" clearable :style="{width: '100%'}" />
+         </el-form-item>
+       </el-col>
+     </el-form>
+   </el-row>
+    <div class="drawer-footer">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { equipmentDetectSystemList } from '@/api/basicData/Equipment/equipmentDetectSystem'
+import { equipmentDetectParamDetail, equipmentDetectParamUpdate, equipmentDetectParamAdd } from '@/api/basicData/Equipment/equipmentDetectParam'
+
+export default {
+  props: {
+    detectEquipmentAreaId: {
+      type: String,
+      default: () => {
+        return ''
+      }
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      dataForm: {
+        id: 0,
+        name: undefined,
+        value: undefined,
+        testFrequency: undefined,
+        testSystem: undefined,
+        distribution: false,
+        description: undefined,
+        remark: undefined
+      },
+      DetectSystemList: [],
+      rules: {
+        name: [],
+        value: [],
+        testFrequency: [],
+        testSystem: [],
+        description: [],
+        remark: []
+      }
+    }
+  },
+  methods: {
+    init(id) {
+      const params = {
+        current: 1,
+        size: 500
+      }
+      equipmentDetectSystemList(params).then(response => {
+        if (response.data.records) {
+          this.DetectSystemList = response.data.records
+        } else {
+          this.DetectSystemList.splice(0, this.DetectSystemList.length)
+        }
+      })
+      this.dataForm.id = id || ''
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          equipmentDetectParamDetail(this.dataForm.id).then(res => {
+            this.dataForm = res.data
+          })
+        }
+      })
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          const data = this.dataForm
+          data.detectEquipmentAreaId = this.detectEquipmentAreaId
+          if (this.dataForm.id) {
+            equipmentDetectParamUpdate(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          } else {
+            equipmentDetectParamAdd(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.drawer-footer {
+  width: 100%;
+  margin-top: 50px;
+  border-top: 1px solid #e8e8e8;
+  padding: 10px 50px;
+  text-align: left;
+  background: #fff;
+}
+</style>
diff --git a/src/views/basicData/Equipment/components/equipmentDetectSystem-add.vue b/src/views/basicData/Equipment/components/equipmentDetectSystem-add.vue
new file mode 100644
index 0000000..713be79
--- /dev/null
+++ b/src/views/basicData/Equipment/components/equipmentDetectSystem-add.vue
@@ -0,0 +1,122 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-05-21 10:44:13
+ * @Description:
+-->
+<template>
+  <el-dialog
+    :title="!dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter"
+    :visible.sync="visible"
+  >
+    <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="200px" @keyup.enter.native="dataFormSubmit()">
+      <el-form-item :label="$t('module.basicData.equipmentDetectInfo.equipmentDetectSystemName')" prop="name">
+        <el-input v-model="dataForm.name" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipmentDetectInfo.equipmentDetectSystemName')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.equipmentDetectInfo.code')" prop="code">
+        <el-input v-model="dataForm.code" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipmentDetectInfo.code')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.equipmentDetectInfo.equipmentDetectSystemAbbr')" prop="abbr">
+        <el-input v-model="dataForm.abbr" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipmentDetectInfo.equipmentDetectSystemAbbr')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.equipment.FunctionDescription')" prop="description">
+        <el-input v-model="dataForm.description" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.FunctionDescription')])" clearable />
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { equipmentDetectSystemDetail, equipmentDetectSystemUpdate, equipmentDetectSystemAdd, equipmentDetectSystemCode } from '@/api/basicData/Equipment/equipmentDetectSystem'
+
+export default {
+  data() {
+    return {
+      visible: false,
+      dataForm: {
+        id: 0,
+        name: '',
+        code: '',
+        abbr: '',
+        description: ''
+      },
+      dataRule: {
+        name: [
+          {
+            required: true,
+            message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.equipmentDetectInfo.equipmentDetectSystemName')]),
+            trigger: 'blur' }
+        ],
+        code: [
+          {
+            required: true,
+            message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.equipmentDetectInfo.code')]),
+            trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    init(id) {
+      this.dataForm.id = id || ''
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          equipmentDetectSystemDetail(this.dataForm.id).then(res => {
+            this.dataForm = res.data
+          })
+        } else {
+          equipmentDetectSystemCode().then(res => {
+            this.dataForm.code = res.data
+          })
+        }
+      })
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          const data = {
+            'name': this.dataForm.name,
+            'code': this.dataForm.code,
+            'abbr': this.dataForm.abbr,
+            'description': this.dataForm.description,
+            'id': this.dataForm.id
+          }
+          if (this.dataForm.id) {
+            equipmentDetectSystemUpdate(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          } else {
+            equipmentDetectSystemAdd(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          }
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/basicData/Equipment/components/equipmentGroup-add.vue b/src/views/basicData/Equipment/components/equipmentGroup-add.vue
new file mode 100644
index 0000000..866a281
--- /dev/null
+++ b/src/views/basicData/Equipment/components/equipmentGroup-add.vue
@@ -0,0 +1,113 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-05-13 14:33:42
+ * @Description:
+-->
+<template>
+  <el-dialog
+    :title="!dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter"
+    :visible.sync="visible"
+  >
+    <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="110px" @keyup.enter.native="dataFormSubmit()">
+      <el-form-item :label="$t('module.basicData.equipment.groupName')" prop="groupName">
+        <el-input v-model="dataForm.groupName" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.groupName')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.equipment.groupCode')" prop="groupCode">
+        <el-input v-model="dataForm.groupCode" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.groupCode')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.visual.Remarks')" prop="remark">
+        <el-input v-model="dataForm.remark" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Remarks')])" clearable />
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { equipmentGroupUpdate, equipmentGroupAdd, equipmentGroupDetail, equipmentGroupGetCode } from '@/api/basicData/Equipment/equipmentGroup'
+
+export default {
+  data() {
+    return {
+      visible: false,
+      dataForm: {
+        id: 0,
+        groupName: '',
+        groupCode: '',
+        remark: ''
+      },
+      dataRule: {
+        groupName: [
+          {
+            required: true,
+            message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.factory.FactoryName')]),
+            trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  mounted() {
+    this.getCode()
+  },
+  methods: {
+    init(id) {
+      this.dataForm.id = id || ''
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          equipmentGroupDetail(this.dataForm.id).then(res => {
+            this.dataForm = res.data
+          })
+        }
+      })
+    },
+    getCode() {
+      equipmentGroupGetCode().then(res => {
+        if (res.code === 0) {
+          this.dataForm.groupCode = res.data
+        }
+      })
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          const data = this.dataForm
+          if (this.dataForm.id) {
+            equipmentGroupUpdate(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          } else {
+            equipmentGroupAdd(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          }
+        }
+      })
+    }
+  }
+
+}
+</script>
diff --git a/src/views/basicData/Equipment/components/equipmentInfo-add.vue b/src/views/basicData/Equipment/components/equipmentInfo-add.vue
new file mode 100644
index 0000000..0291609
--- /dev/null
+++ b/src/views/basicData/Equipment/components/equipmentInfo-add.vue
@@ -0,0 +1,664 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+-->
+<template>
+  <div style="margin:20px">
+    <div slot="title" style=" background-color:#02BCFF;font-size:1.5em;color:white;padding:5px 20px;margin:20px">{{ isdetail? 'btn.detail' : !listQuery.equipmentId ? 'btn.add' : 'btn.edit' | i18nFilter }}</div>
+    <div style="margin:0 15px">
+      <el-form
+        ref="dataForm"
+        :model="dataForm"
+        :rules="rules"
+        size="medium"
+        label-width="220px"
+      >
+        <el-row>
+          <el-col :span="8">
+            <el-form-item :label="$t('module.basicData.equipment.EquipmentName')" prop="name">
+              <el-input v-model="dataForm.name" autofocus :disabled="isdetail" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.EquipmentName')])" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item :label="$t('module.basicData.equipment.EquipmentCode')" prop="code">
+              <el-input v-model="dataForm.code" :disabled="isdetail" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.EquipmentCode')])" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item :label="$t('module.basicData.visual.EnglishName')" prop="enName">
+              <el-input v-model="dataForm.enName" :disabled="isdetail" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.EnglishName')])" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="8">
+            <el-form-item :label="$t('module.basicData.visual.Abbreviation')" prop="abbr">
+              <el-input v-model="dataForm.abbr" :disabled="isdetail" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Abbreviation')])" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item :label="$t('module.basicData.equipment.EquipmentType')" prop="equipmentType">
+              <el-select
+                v-model="dataForm.equipmentType"
+                :disabled="isdetail"
+                :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.EquipmentType')])"
+                clearable
+                :style="{width: '100%'}"
+              >
+                <el-option
+                  v-for="(item, index) in equipmentTypeOption"
+                  :key="index"
+                  :label="item.name"
+                  :value="item.id"
+                  :disabled="item.disabled"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item :label="$t('module.basicData.equipment.EquipmentGrouping')" prop="groupId">
+              <el-select
+                v-model="dataForm.groupId"
+                :disabled="isdetail"
+                :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.EquipmentGrouping')])"
+                clearable
+                :style="{width: '100%'}"
+              >
+                <el-option
+                  v-for="(item, index) in equipmentGroupOption"
+                  :key="index"
+                  :label="item.groupName"
+                  :value="item.id"
+                  :disabled="item.disabled"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="8">
+            <el-form-item :label="$t('module.basicData.visual.Specs')" prop="spec">
+              <el-input v-model="dataForm.spec" :disabled="isdetail" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Specs')])" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item :label="$t('module.basicData.visual.productionTime')" prop="productionTime">
+              <el-date-picker
+                v-model="dataForm.productionTime"
+                :disabled="isdetail"
+                format="yyyy-MM-dd"
+                value-format="yyyy-MM-dd"
+                :style="{width: '100%'}"
+                :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.productionTime')])"
+                clearable
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item :label="$t('module.basicData.visual.enterTime')" prop="enterTime">
+              <el-date-picker
+                v-model="dataForm.enterTime"
+                :disabled="isdetail"
+                format="yyyy-MM-dd"
+                value-format="yyyy-MM-dd"
+                :style="{width: '100%'}"
+                :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.enterTime')])"
+                clearable
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="8">
+            <el-form-item :label="$t('module.basicData.visual.debugTime')" prop="debugTime">
+              <el-date-picker
+                v-model="dataForm.debugTime"
+                :disabled="isdetail"
+                format="yyyy-MM-dd"
+                value-format="yyyy-MM-dd"
+                :style="{width: '100%'}"
+                :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.debugTime')])"
+                clearable
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item :label="$t('module.basicData.equipment.DebugPeriod')" prop="debugPeriod">
+              <el-input v-model="dataForm.debugPeriod" :disabled="isdetail" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.DebugPeriod')])" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item :label="$t('module.basicData.visual.Manufacturer')" prop="manufacturer">
+              <el-input
+                v-model="dataForm.manufacturer"
+                :disabled="isdetail"
+                :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Manufacturer')])"
+                clearable
+                :style="{width: '100%'}"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="8">
+            <el-form-item :label="$t('module.basicData.equipment.intellectualProperty')" prop="intellectualProperty">
+              <el-input
+                v-model="dataForm.intellectualProperty"
+                :disabled="isdetail"
+                :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.intellectualProperty')])"
+                clearable
+                :style="{width: '100%'}"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item :label="$t('module.basicData.equipment.rangeNumber')" prop="rangeNumber">
+              <el-input-number
+                v-model="dataForm.rangeNumber"
+                :disabled="isdetail"
+                :step="1"
+                :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.rangeNumber')])"
+                clearable
+                :style="{width: '100%'}"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item :label="$t('module.basicData.visual.Remarks')" prop="remark">
+              <el-input v-model="dataForm.remark" :disabled="isdetail" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Remarks')])" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="8">
+            <el-form-item :label="$t('module.basicData.visual.Description')" prop="description">
+              <el-input v-model="dataForm.description" :disabled="isdetail" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Description')])" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item :label="$t('module.basicData.equipment.plcVersion')" prop="plcVersion">
+              <el-input v-model="dataForm.plcVersion" :disabled="isdetail" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.plcVersion')])" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item :label="$t('module.basicData.equipment.eapVersion')" prop="eapVersion">
+              <el-input v-model="dataForm.eapVersion" :disabled="isdetail" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.eapVersion')])" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="8">
+            <el-form-item :label="$t('module.basicData.equipment.maintenanceCycle')" prop="maintenanceCycle">
+              <el-input v-model="dataForm.maintenanceCycle" :disabled="isdetail" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.maintenanceCycle')])" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item :label="$t('module.basicData.equipment.maintenanceTime')" prop="maintenanceTime">
+              <el-input v-model="dataForm.maintenanceTime" :disabled="isdetail" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.maintenanceTime')])" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="4">
+            <el-form-item :label="$t('module.basicData.equipment.E10Status')" prop="estatus">
+              <el-switch
+                v-model="dataForm.estatus"
+                :disabled="isdetail"
+                :active-value="1"
+                :inactive-value="0"
+                active-color="#13ce66"
+                inactive-color="#AAAAAA"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="4">
+            <el-form-item :label="$t('module.basicData.equipment.activiation')" prop="activiation">
+              <el-switch
+                v-model="dataForm.activiation"
+                :disabled="isdetail"
+                :active-value="1"
+                :inactive-value="0"
+                active-color="#13ce66"
+                inactive-color="#AAAAAA"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="4">
+            <el-form-item :label="$t('module.basicData.equipment.communication')" prop="communication">
+              <el-switch
+                v-model="dataForm.communication"
+                :disabled="isdetail"
+                :active-value="1"
+                :inactive-value="0"
+                active-color="#13ce66"
+                inactive-color="#AAAAAA"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="4">
+            <el-form-item :label="$t('module.basicData.equipment.controlStatus')" prop="controlStatus">
+              <el-switch
+                v-model="dataForm.controlStatus"
+                :disabled="isdetail"
+                :active-value="1"
+                :inactive-value="0"
+                active-text="远程"
+                inactive-text="本地"
+                active-color="#13ce66"
+                inactive-color="#AAAAAA"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="9">
+            <el-form-item v-if="listQuery.equipmentId && !isdetail" :label="$t('module.basicData.equipment.equipmentImg')" prop="eImg">
+              <el-upload
+                ref="eImg"
+                name="files"
+                :data="typeCode"
+                :file-list="eImgfileList"
+                :action="eImgAction"
+                :before-upload="eImgBeforeUpload"
+                accept="image/*"
+                :on-success="saveUpload"
+              >
+                <el-button size="small" type="primary" icon="el-icon-upload">{{ 'btn.upload' | i18nFilter }}</el-button>
+              </el-upload>
+            </el-form-item>
+            <el-form-item v-if="isdetail" :label="$t('module.basicData.equipment.equipmentImg')" prop="upInfo">
+              <div v-for="item in imgList" :key="item.id">
+                {{ item.fileName }} <el-button size="small" type="primary" icon="el-icon-upload" @click="downloadFile(item.fileId)">{{ 'btn.download' | i18nFilter }}</el-button>
+              </div>
+            </el-form-item>
+          </el-col>
+          <el-col :span="9">
+            <el-form-item v-if="listQuery.equipmentId && !isdetail" :label="$t('module.basicData.equipment.equipmentInfo')" prop="eInfo">
+              <el-upload
+                ref="eInfo"
+                :on-success="saveUpload"
+                name="files"
+                :data="typeCode"
+                :file-list="eInfofileList"
+                :action="eInfoAction"
+                multiple
+                :before-upload="eInfoBeforeUpload"
+              >
+                <el-button size="small" type="primary" icon="el-icon-upload">{{ 'btn.upload' | i18nFilter }}</el-button>
+              </el-upload>
+            </el-form-item>
+            <el-form-item v-if="isdetail" :label="$t('module.basicData.equipment.equipmentInfo')" prop="upInfo">
+              <div v-for="item in fileList" :key="item.id">
+                {{ item.fileName }} <el-button size="small" type="primary" icon="el-icon-upload" @click="downloadFile(item.fileId)">{{ 'btn.download' | i18nFilter }}</el-button>
+              </div>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div style="margin:20px">
+        <el-button type="success" @click="goback()">{{ 'btn.back' | i18nFilter }}</el-button>
+        <el-button v-if="isdetail" type="primary" @click="goEdit()">{{ 'btn.edit' | i18nFilter }}</el-button>
+        <span v-if="!isdetail">
+          <el-button type="primary" @click="dataFormSubmit()">{{ 'btn.save' | i18nFilter }}</el-button>
+          <el-button v-if="listQuery.equipmentId" type="primary" @click="addNew()">{{ 'btn.addattr' | i18nFilter }}</el-button>
+        </span>
+      </div>
+      <div style="overflow:auto;height:380px">
+        <base-table
+          :page="listQuery.current"
+          :limit="listQuery.size"
+          :table-config="tableProps"
+          :table-data="list"
+          :is-loading="listLoading"
+        >
+          <method-btn
+            v-if="!isdetail"
+            slot="handleBtn"
+            :method-list="tableBtn"
+            @clickBtn="handleClick"
+          />
+        </base-table>
+      </div>
+    </div>
+    <equipment-info-attr-add v-if="addOrUpdateVisible" ref="addOrUpdate" :equipment-id="listQuery.equipmentId" @refreshDataList="getList" />
+  </div>
+</template>
+
+<script>import i18n from '@/lang'
+import {
+  equipmentInfoDetail,
+  equipmentInfoUpdate,
+  equipmentInfoAdd,
+  equipmentInfoCode,
+  equipmentInfoFileAdd,
+  getEquipmentInfoFile
+} from '@/api/basicData/Equipment/equipmentInfo'
+import { equipmentGroupList } from '@/api/basicData/Equipment/equipmentGroup'
+import { equipmentInfoAttrList, equipmentInfoAttrDelete } from '@/api/basicData/Equipment/equipmentInfoAttr'
+import { equipmentTypeList } from '@/api/basicData/Equipment/equipmentType'
+import BaseTable from '@/components/BaseTable'
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import equipmentInfoAttrAdd from './equipmentInfoAttr-add'
+import { uploadPath } from '@/api/basic'
+import { timeFormatter } from '@/filters'
+import { getUrl } from '@/api/file'
+const tableBtn = [
+  {
+    type: 'edit',
+    btnName: 'btn.edit'
+  },
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  }
+]
+const tableProps = [
+  {
+    prop: 'createTime',
+    label: i18n.t('module.basicData.factory.createTime'),
+    filter: timeFormatter,
+    align: 'center'
+  },
+  {
+    prop: 'attrName',
+    label: i18n.t('module.basicData.visual.AttributeName'),
+    align: 'center'
+  },
+  {
+    prop: 'attrValue',
+    label: i18n.t('module.basicData.visual.AttributeValue'),
+    align: 'center'
+  },
+  {
+    prop: 'remark',
+    label: i18n.t('module.basicData.visual.Remarks'),
+    align: 'center'
+  }
+]
+
+export default {
+  components: { BaseTable, MethodBtn, equipmentInfoAttrAdd },
+  data() {
+    return {
+      addOrUpdateVisible: false,
+      tableBtn,
+      trueWidth: 200,
+      tableProps,
+      list: [],
+      listLoading: false,
+      dataForm: {
+        name: '',
+        code: '',
+        enName: '',
+        abbr: '',
+        equipmentType: '',
+        spec: '',
+        productionTime: '',
+        enterTime: '',
+        debugTime: '',
+        debugPeriod: '',
+        manufacturer: '',
+        intellectualProperty: '',
+        rangeNumber: '',
+        remark: '',
+        description: '',
+        groupId: '',
+        eImg: null,
+        eInfo: null,
+        communication: 0,
+        controlStatus: 0,
+        plcVersion: '',
+        eapVersion: '',
+        activiation: 0,
+        estatus: 0,
+        maintenanceTime: '',
+        maintenanceCycle: ''
+      },
+      rules: {
+        name: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.equipment.EquipmentName')]),
+          trigger: 'blur'
+        }],
+        code: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.equipment.EquipmentCode')]),
+          trigger: 'blur'
+        }],
+        equipmentType: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.equipment.EquipmentType')]),
+          trigger: 'change'
+        }],
+        maintenanceCycle: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.equipment.maintenanceCycle')]),
+          trigger: 'blur'
+        }],
+        maintenanceTime: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.equipment.maintenanceTime')]),
+          trigger: 'blur'
+        }]
+      },
+      typeCode: {},
+      eImgAction: uploadPath,
+      eImgfileList: [],
+      eInfoAction: uploadPath,
+      eInfofileList: [],
+      equipmentTypeOption: [],
+      equipmentGroupOption: [],
+      listQuery: {
+        current: 1,
+        size: 990,
+        equipmentId: ''
+      },
+      isdetail: false,
+      downloadList: [],
+      fileList: [],
+      imgList: []
+    }
+  },
+  created() {
+    this.listQuery.equipmentId = this.$route.query.id
+    this.init()
+  },
+  methods: {
+    init() {
+      this.isdetail = false
+      this.isdetail = Boolean(this.$route.query.isdetail)
+      if (this.isdetail) {
+        const data =
+          {
+            'equipmentId': this.listQuery.equipmentId
+          }
+        getEquipmentInfoFile(data).then(res => {
+          this.downloadList = res.data
+          this.downloadList.forEach(item => {
+            if (item.typeCode === 'equipmentInfoImage') {
+              this.imgList.push(item)
+            } else {
+              this.fileList.push(item)
+            }
+          })
+        })
+      }
+      this.list.splice(0, this.list.length)
+      equipmentTypeList(this.listQuery).then(response => {
+        this.equipmentTypeOption = response.data.records
+      })
+      equipmentGroupList(this.listQuery).then(response => {
+        this.equipmentGroupOption = response.data.records
+      })
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.listQuery.equipmentId) {
+          this.listLoading = true
+          equipmentInfoDetail(this.listQuery.equipmentId).then(res => {
+            this.dataForm = res.data
+          })
+          equipmentInfoAttrList(this.listQuery).then(response => {
+            if (response.data.records) {
+              this.list = response.data.records
+            } else {
+              this.list.splice(0, this.list.length)
+            }
+            this.listLoading = false
+          })
+        } else {
+          equipmentInfoCode().then(res => {
+            this.dataForm.code = res.data
+          })
+        }
+      })
+    },
+    getList() {
+      this.listLoading = true
+      equipmentInfoAttrList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.listLoading = false
+      })
+    },
+    handleClick(raw) {
+      if (raw.type === 'delete') {
+        this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.attrName}]?`, this.$t('module.basicData.visual.Tips'), {
+          confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+          cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+          type: 'warning'
+        }).then(() => {
+          equipmentInfoAttrDelete(raw.data.id).then(response => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+              }
+            })
+          })
+        }).catch(() => {})
+      } else {
+        this.addNew(raw.data.id)
+      }
+    },
+    // 表单提交
+    dataFormSubmit() {
+      console.log(this.dataForm)
+      console.log(this.dataForm.eInfo)
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          const data = this.dataForm
+          data.id = this.listQuery.equipmentId
+          if (this.listQuery.equipmentId) {
+            equipmentInfoUpdate(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500
+              })
+            })
+          } else {
+            equipmentInfoAdd(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500
+              })
+              this.listQuery.equipmentId = res.data.id
+            })
+          }
+        }
+      })
+    },
+    // 新增 / 修改
+    addNew(id) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id)
+      })
+    },
+    goback() {
+      this.$router.go(-1)
+    },
+    goEdit() {
+      this.isdetail = false
+    },
+    eImgBeforeUpload(file) {
+      this.typeCode.typeCode = 'equipmentInfoImage'
+      const isRightSize = file.size / 1024 / 1024 < 10
+      if (!isRightSize) {
+        this.$message.error(this.$t('upload.picSizeAlarm'))
+      }
+      const isAccept = new RegExp('image/*').test(file.type)
+      if (!isAccept) {
+        this.$message.error(this.$t('upload.picAlarm'))
+      }
+      return isRightSize && isAccept
+    },
+    eInfoBeforeUpload(file) {
+      this.typeCode.typeCode = 'equipmentInfoFile'
+      const isRightSize = file.size / 1024 / 1024 < 10
+      if (!isRightSize) {
+        this.$message.error(this.$t('upload.picSizeAlarm'))
+      }
+      return isRightSize
+    },
+    submitUpload() {
+      this.$refs['eInfo'].submit()
+    },
+    saveUpload(res) {
+      const data =
+        {
+          'equipmentId': this.listQuery.equipmentId,
+          'fileId': res.data[0].id,
+          'fileName': res.data[0].fileName,
+          'fileUrl': res.data[0].fileUrl,
+          'typeCode': this.typeCode.typeCode
+        }
+      console.log(data)
+      equipmentInfoFileAdd(data).then(res => {
+        console.log(res)
+      })
+    },
+    downloadFile(id) {
+      getUrl({
+        attachmentId: id,
+        type: 1
+      }).then(response => {
+        let fileName = ''
+        const contentDisposition = response.headers['content-disposition']
+        if (contentDisposition) {
+          fileName = contentDisposition.slice(contentDisposition.indexOf('filename=') + 9)
+        }
+        const blob = new Blob([response.data])
+        const reader = new FileReader()
+        reader.readAsDataURL(blob)
+        reader.onload = (e) => {
+          const a = document.createElement('a')
+          a.download = fileName
+          a.href = e.target.result
+          document.body.appendChild(a)
+          a.click()
+          document.body.removeChild(a)
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.drawer-footer {
+  width: 100%;
+  margin-top: 50px;
+  border-top: 1px solid #e8e8e8;
+  border-bottom: 1px solid #e8e8e8;
+  padding: 10px 50px;
+  text-align: left;
+  background: #fff;
+}
+</style>
diff --git a/src/views/basicData/Equipment/components/equipmentInfoAttr-add.vue b/src/views/basicData/Equipment/components/equipmentInfoAttr-add.vue
new file mode 100644
index 0000000..074fe73
--- /dev/null
+++ b/src/views/basicData/Equipment/components/equipmentInfoAttr-add.vue
@@ -0,0 +1,135 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-25 16:31:46
+ * @Description:
+-->
+<template>
+  <el-drawer
+    :append-to-body="true"
+    :show-close="false"
+    :visible.sync="visible"
+    size="40%"
+  >
+    <div slot="title" style=" background-color:#02BCFF;font-size:1.5em;color:white;padding:5px 20px">
+      {{ !dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter }}
+    </div>
+    <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="130px" @keyup.enter.native="dataFormSubmit()">
+      <el-form-item :label="$t('module.basicData.visual.AttributeName')" prop="attrName">
+        <el-input v-model="dataForm.attrName" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.AttributeName')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.visual.AttributeValue')" prop="attrValue">
+        <el-input v-model="dataForm.attrValue" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.AttributeValue')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.visual.Remarks')" prop="remark">
+        <el-input v-model="dataForm.remark" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Remarks')])" clearable />
+      </el-form-item>
+    </el-form>
+    <div class="drawer-footer">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+      <el-button type="primary" :loading="btnLoading" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
+    </div>
+  </el-drawer>
+</template>
+
+<script>
+import { equipmentInfoAttrDetail, equipmentInfoAttrUpdate, equipmentInfoAttrAdd } from '@/api/basicData/Equipment/equipmentInfoAttr'
+
+export default {
+  props: {
+    equipmentId: {
+      type: String,
+      default: () => {
+        return ''
+      }
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      btnLoading: false,
+      dataForm: {
+        id: 0,
+        attrName: '',
+        attrValue: '',
+        remark: ''
+      },
+      dataRule: {
+        attrName: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.visual.AttributeName')]), trigger: 'blur' }
+        ],
+        attrValue: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.visual.AttributeValue')]), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    init(id) {
+      this.dataForm.id = id || ''
+      this.btnLoading = false
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          equipmentInfoAttrDetail(this.dataForm.id).then(res => {
+            this.dataForm = res.data
+          })
+        }
+      })
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.btnLoading = true
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          const data = {
+            'attrName': this.dataForm.attrName,
+            'attrValue': this.dataForm.attrValue,
+            'remark': this.dataForm.remark,
+            'equipmentId': this.equipmentId,
+            'id': this.dataForm.id
+          }
+          if (this.dataForm.id) {
+            equipmentInfoAttrUpdate(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          } else {
+            equipmentInfoAttrAdd(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.drawer-footer {
+  width: 100%;
+  margin-top: 50px;
+  border-top: 1px solid #e8e8e8;
+  padding: 10px 50px;
+  text-align: left;
+  background: #fff;
+}
+</style>
diff --git a/src/views/basicData/Equipment/components/equipmentLink-add.vue b/src/views/basicData/Equipment/components/equipmentLink-add.vue
new file mode 100644
index 0000000..3ee163d
--- /dev/null
+++ b/src/views/basicData/Equipment/components/equipmentLink-add.vue
@@ -0,0 +1,542 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-22 15:32:41
+ * @enName:
+-->
+<template>
+  <div style="margin:20px">
+    <div slot="title" style=" background-color:#02BCFF;font-size:1.5em;color:white;padding:5px 20px;margin:20px">
+      {{ isdetail? 'btn.detail' : !dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter }}
+    </div>
+    <div style="margin:0 15px">
+      <el-row :gutter="15">
+        <el-form
+          ref="dataForm"
+          :model="dataForm"
+          :rules="rules"
+          size="medium"
+          label-width="120px"
+          label-position="right"
+        >
+          <el-col :span="8">
+            <el-form-item :label="$t('module.basicData.equipment.WiredEquipment')" prop="name">
+              <el-input v-model="dataForm.name" :disabled="isdetail" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.WiredEquipment')])" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item :label="$t('module.basicData.equipment.WiredCode')" prop="code">
+              <el-input v-model="dataForm.code" :disabled="isdetail" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.WiredCode')])" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item :label="$t('module.basicData.visual.EnglishName')" prop="enName">
+              <el-input v-model="dataForm.enName" :disabled="isdetail" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.EnglishName')])" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item :label="$t('module.basicData.visual.Abbreviation')" prop="abbr">
+              <el-input v-model="dataForm.abbr" :disabled="isdetail" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Abbreviation')])" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item :label="$t('module.basicData.visual.Manufacturer')" prop="manufacturer">
+              <el-input
+                v-model="dataForm.manufacturer"
+                :disabled="isdetail"
+                :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Manufacturer')])"
+                clearable
+                :style="{width: '100%'}"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item :label="$t('module.basicData.visual.Specs')" prop="spec">
+              <el-input v-model="dataForm.spec" :disabled="isdetail" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Specs')])" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item :label="$t('module.basicData.visual.productionTime')" prop="productionTime">
+              <el-date-picker
+                v-model="dataForm.productionTime"
+                :disabled="isdetail"
+                format="yyyy-MM-dd"
+                value-format="yyyy-MM-dd"
+                :style="{width: '100%'}"
+                :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.productionTime')])"
+                clearable
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item :label="$t('module.basicData.visual.enterTime')" prop="enterTime">
+              <el-date-picker
+                v-model="dataForm.enterTime"
+                :disabled="isdetail"
+                format="yyyy-MM-dd"
+                value-format="yyyy-MM-dd"
+                :style="{width: '100%'}"
+                :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.enterTime')])"
+                clearable
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item :label="$t('module.basicData.visual.debugTime')" prop="debugTime">
+              <el-date-picker
+                v-model="dataForm.debugTime"
+                :disabled="isdetail"
+                format="yyyy-MM-dd"
+                value-format="yyyy-MM-dd"
+                :style="{width: '100%'}"
+                :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.debugTime')])"
+                clearable
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item :label="$t('module.basicData.equipment.DebugPeriod')" prop="debugPeriod">
+              <el-input v-model="dataForm.debugPeriod" :disabled="isdetail" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.DebugPeriod')])" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item :label="$t('module.basicData.equipment.connectUpperDevice')" prop="connectUpperDevice">
+              <el-input
+                v-model="dataForm.connectUpperDevice"
+                :disabled="isdetail"
+                :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.connectUpperDevice')])"
+                clearable
+                :style="{width: '100%'}"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item :label="$t('module.basicData.equipment.connectLowerDevice')" prop="connectLowerDevice">
+              <el-input
+                v-model="dataForm.connectLowerDevice"
+                :disabled="isdetail"
+                :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.connectLowerDevice')])"
+                clearable
+                :style="{width: '100%'}"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item :label="$t('module.basicData.visual.CurrentState')" prop="currentStatus">
+              <el-select
+                v-model="dataForm.currentStatus"
+                :disabled="isdetail"
+                :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.CurrentState')])"
+                clearable
+                :style="{width: '100%'}"
+              >
+                <el-option
+                  v-for="(item, index) in currentStatusOptions"
+                  :key="index"
+                  :label="item.label"
+                  :value="item.value"
+                  :disabled="item.disabled"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item :label="$t('module.basicData.visual.Remarks')" prop="remark">
+              <el-input v-model="dataForm.remark" :disabled="isdetail" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Remarks')])" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="9">
+            <el-form-item v-if="listQuery.connectingDeviceId && !isdetail" :label="$t('module.basicData.equipment.equipmentImg')" prop="eImg">
+              <el-upload
+                ref="eImg"
+                name="files"
+                :data="typeCode"
+                :file-list="eImgfileList"
+                :action="eImgAction"
+                :before-upload="eImgBeforeUpload"
+                accept="image/*"
+                :on-success="saveUpload"
+              >
+                <el-button size="small" type="primary" icon="el-icon-upload">{{ 'btn.upload' | i18nFilter }}</el-button>
+              </el-upload>
+            </el-form-item>
+            <el-form-item v-if="isdetail" :label="$t('module.basicData.equipment.equipmentImg')" prop="upInfo">
+              <div v-for="item in imgList" :key="item.id">
+                {{ item.fileName }} <el-button size="small" type="primary" icon="el-icon-upload" @click="downloadFile(item.fileId)">{{ 'btn.download' | i18nFilter }}</el-button>
+              </div>
+            </el-form-item>
+          </el-col>
+          <el-col :span="9">
+            <el-form-item v-if="listQuery.connectingDeviceId && !isdetail" :label="$t('module.basicData.equipment.equipmentInfo')" prop="upInfo">
+              <el-upload
+                ref="upInfo"
+                name="files"
+                :data="typeCode"
+                :file-list="upInfofileList"
+                :action="upInfoAction"
+                multiple
+                :before-upload="upInfoBeforeUpload"
+                :on-success="saveUpload"
+              >
+                <el-button size="small" type="primary" icon="el-icon-upload">{{ 'btn.upload' | i18nFilter }}</el-button>
+              </el-upload>
+            </el-form-item>
+            <el-form-item v-if="isdetail" :label="$t('module.basicData.equipment.equipmentInfo')" prop="upInfo">
+              <div v-for="item in fileList" :key="item.id">
+                {{ item.fileName }} <el-button size="small" type="primary" icon="el-icon-upload" @click="downloadFile(item.fileId)">{{ 'btn.download' | i18nFilter }}</el-button>
+              </div>
+            </el-form-item>
+          </el-col>
+        </el-form>
+      </el-row>
+      <div style="margin:20px">
+        <el-button type="success" @click="goback()">{{ 'btn.back' | i18nFilter }}</el-button>
+        <el-button v-if="isdetail" type="primary" @click="goEdit()">{{ 'btn.edit' | i18nFilter }}</el-button>
+        <span v-if="!isdetail">
+          <el-button type="primary" @click="dataFormSubmit()">{{ 'btn.save' | i18nFilter }}</el-button>
+          <el-button v-if="listQuery.connectingDeviceId" type="primary" @click="addNew()">{{ 'btn.addattr' | i18nFilter }}</el-button>
+        </span>
+      </div>
+      <div style="height:380px;overflow:auto">
+        <base-table
+          :page="listQuery.current"
+          :limit="listQuery.size"
+          :table-config="tableProps"
+          :table-data="list"
+        >
+          <method-btn
+            v-if="!isdetail"
+            slot="handleBtn"
+            :method-list="tableBtn"
+            @clickBtn="handleClick"
+          />
+        </base-table>
+      </div>
+    </div>
+    <equipment-link-attr-add v-if="addOrUpdateVisible" ref="addOrUpdate" :connecting-device-id="listQuery.connectingDeviceId" @refreshDataList="getList" />
+  </div>
+</template>
+
+<script>import i18n from '@/lang'
+import {
+  equipmentLinkDetail,
+  equipmentLinkUpdate,
+  equipmentLinkAdd,
+  equipmentLinkCode,
+  equipmentLinkFileAdd,
+  getEquipmentLinkFile
+} from '@/api/basicData/Equipment/equipmentLink'
+import { equipmentLinkAttrList, equipmentLinkAttrDelete } from '@/api/basicData/Equipment/equipmentLinkAttr'
+import BaseTable from '@/components/BaseTable'
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import equipmentLinkAttrAdd from './equipmentLinkAttr-add'
+import { uploadPath } from '@/api/basic'
+import { timeFormatter } from '@/filters'
+import { getUrl } from '@/api/file'
+const tableBtn = [
+  {
+    type: 'edit',
+    btnName: 'btn.edit'
+  },
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  }
+]
+const tableProps = [
+  {
+    prop: 'createTime',
+    label: i18n.t('module.basicData.factory.createTime'),
+    filter: timeFormatter,
+    align: 'center'
+  },
+  {
+    prop: 'name',
+    label: i18n.t('module.basicData.visual.AttributeName'),
+    align: 'center'
+  },
+  {
+    prop: 'code',
+    label: i18n.t('module.basicData.visual.AttributeCode'),
+    align: 'center'
+  },
+  {
+    prop: 'remark',
+    label: i18n.t('module.basicData.visual.Remarks'),
+    align: 'center'
+  }
+]
+
+export default {
+  components: { BaseTable, MethodBtn, equipmentLinkAttrAdd },
+  data() {
+    return {
+      addOrUpdateVisible: false,
+      tableBtn,
+      trueWidth: 200,
+      tableProps,
+      list: [],
+      dataForm: {
+        id: 0,
+        name: '',
+        code: '',
+        enName: '',
+        abbr: '',
+        manufacturer: '',
+        spec: '',
+        productionTime: '',
+        enterTime: '',
+        debugTime: '',
+        debugPeriod: '',
+        connectUpperDevice: '',
+        connectLowerDevice: '',
+        currentStatus: '',
+        remark: '',
+        eImg: null,
+        upInfo: null
+      },
+      rules: {
+        name: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.equipment.WiredEquipment')]),
+          trigger: 'blur'
+        }],
+        code: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.equipment.WiredCode')]),
+          trigger: 'blur'
+        }]
+      },
+      typeCode: {},
+      eImgAction: uploadPath,
+      eImgfileList: [],
+      upInfoAction: uploadPath,
+      upInfofileList: [],
+      currentStatusOptions: [{
+        'label': '正常',
+        'value': 0
+      }, {
+        'label': '暂停',
+        'value': 1
+      }, {
+        'label': '维修',
+        'value': 2
+      }],
+      listQuery: {
+        current: 1,
+        size: 990,
+        connectingDeviceId: ''
+      },
+      isdetail: false,
+      downloadList: [],
+      fileList: [],
+      imgList: []
+    }
+  },
+  created() {
+    this.listQuery.connectingDeviceId = this.$route.query.id
+    this.init()
+  },
+  methods: {
+    init() {
+      this.isdetail = false
+      this.isdetail = Boolean(this.$route.query.isdetail)
+      if (this.isdetail) {
+        const data =
+          {
+            'connectingDeviceId': this.listQuery.connectingDeviceId
+          }
+        getEquipmentLinkFile(data).then(res => {
+          this.downloadList = res.data
+          this.downloadList.forEach(item => {
+            if (item.typeCode === 'equipmentLinkImage') {
+              this.imgList.push(item)
+            } else {
+              this.fileList.push(item)
+            }
+          })
+        })
+      }
+      this.list.splice(0, this.list.length)
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.listQuery.connectingDeviceId) {
+          equipmentLinkDetail(this.listQuery.connectingDeviceId).then(res => {
+            this.dataForm = res.data
+          })
+          equipmentLinkAttrList(this.listQuery).then(response => {
+            if (response.data.records) {
+              this.list = response.data.records
+            } else {
+              this.list.splice(0, this.list.length)
+            }
+          })
+        } else {
+          equipmentLinkCode().then(res => {
+            this.dataForm.code = res.data
+          })
+        }
+      })
+    },
+    getList() {
+      equipmentLinkAttrList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+      })
+    },
+    handleClick(raw) {
+      console.log(raw)
+      if (raw.type === 'delete') {
+        this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`, this.$t('module.basicData.visual.Tips'), {
+          confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+          cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+          type: 'warning'
+        }).then(() => {
+          equipmentLinkAttrDelete(raw.data.id).then(response => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+              }
+            })
+          })
+        }).catch(() => {})
+      } else {
+        this.addNew(raw.data.id)
+      }
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          const data = {
+            'abbr': this.dataForm.abbr,
+            'code': this.dataForm.code,
+            'connectLowerDevice': this.dataForm.connectLowerDevice,
+            'connectUpperDevice': this.dataForm.connectUpperDevice,
+            'currentStatus': this.dataForm.currentStatus,
+            'debugTime': this.dataForm.debugTime,
+            'enName': this.dataForm.enName,
+            'enterTime': this.dataForm.enterTime,
+            'manufacturer': this.dataForm.manufacturer,
+            'name': this.dataForm.name,
+            'productionTime': this.dataForm.productionTime,
+            'remark': this.dataForm.remark,
+            'spec': this.dataForm.spec,
+            'debugPeriod': this.dataForm.debugPeriod,
+            'id': this.listQuery.connectingDeviceId
+          }
+          if (this.listQuery.connectingDeviceId) {
+            equipmentLinkUpdate(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500
+              })
+            })
+          } else {
+            equipmentLinkAdd(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500
+              })
+              this.listQuery.connectingDeviceId = res.data.id
+            })
+          }
+        }
+      })
+    },
+    // 新增 / 修改
+    addNew(id) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id)
+      })
+    },
+    goback() {
+      this.$router.go(-1)
+    },
+    goEdit() {
+      this.isdetail = false
+    },
+    eImgBeforeUpload(file) {
+      this.typeCode.typeCode = 'equipmentLinkImage'
+      const isRightSize = file.size / 1024 / 1024 < 10
+      if (!isRightSize) {
+        this.$message.error(this.$t('upload.picSizeAlarm'))
+      }
+      const isAccept = new RegExp('image/*').test(file.type)
+      if (!isAccept) {
+        this.$message.error(this.$t('upload.picAlarm'))
+      }
+      return isRightSize && isAccept
+    },
+    upInfoBeforeUpload(file) {
+      this.typeCode.typeCode = 'equipmentLinkFile'
+      const isRightSize = file.size / 1024 / 1024 < 10
+      if (!isRightSize) {
+        this.$message.error(this.$t('upload.picSizeAlarm'))
+      }
+      return isRightSize
+    },
+    submitUpload() {
+      this.$refs['upInfo'].submit()
+    },
+    saveUpload(res) {
+      const data =
+        {
+          'connectingDeviceId': this.listQuery.connectingDeviceId,
+          'fileId': res.data[0].id,
+          'fileName': res.data[0].fileName,
+          'fileUrl': res.data[0].fileUrl,
+          'typeCode': this.typeCode.typeCode
+        }
+      equipmentLinkFileAdd(data).then(res => {
+        console.log(res)
+      })
+    },
+    downloadFile(id) {
+      getUrl({
+        attachmentId: id,
+        type: 1
+      }).then(response => {
+        let fileName = ''
+        const contentDisposition = response.headers['content-disposition']
+        if (contentDisposition) {
+          fileName = contentDisposition.slice(contentDisposition.indexOf('filename=') + 9)
+        }
+        const blob = new Blob([response.data])
+        const reader = new FileReader()
+        reader.readAsDataURL(blob)
+        reader.onload = (e) => {
+          const a = document.createElement('a')
+          a.download = fileName
+          a.href = e.target.result
+          document.body.appendChild(a)
+          a.click()
+          document.body.removeChild(a)
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.drawer-footer {
+  width: 100%;
+  margin-top: 50px;
+  border-top: 1px solid #e8e8e8;
+  border-bottom: 1px solid #e8e8e8;
+  padding: 10px 50px;
+  text-align: left;
+  background: #fff;
+}
+</style>
diff --git a/src/views/basicData/Equipment/components/equipmentLinkAttr-add.vue b/src/views/basicData/Equipment/components/equipmentLinkAttr-add.vue
new file mode 100644
index 0000000..524a6b7
--- /dev/null
+++ b/src/views/basicData/Equipment/components/equipmentLinkAttr-add.vue
@@ -0,0 +1,141 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-25 16:31:54
+ * @Description:
+-->
+<template>
+  <el-drawer
+    :append-to-body="true"
+    :show-close="false"
+    :visible.sync="visible"
+    size="40%"
+  >
+    <div slot="title" style=" background-color:#02BCFF;font-size:1.5em;color:white;padding:5px 20px">
+      {{ !dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter }}
+    </div>
+    <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="100px" @keyup.enter.native="dataFormSubmit()">
+      <el-form-item :label="$t('module.basicData.visual.AttributeName')" prop="name">
+        <el-input v-model="dataForm.name" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.AttributeName')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.visual.AttributeCode')" prop="code">
+        <el-input v-model="dataForm.code" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.AttributeCode')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.visual.Remarks')" prop="remark">
+        <el-input v-model="dataForm.remark" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Remarks')])" clearable />
+      </el-form-item>
+    </el-form>
+    <div class="drawer-footer">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+      <el-button type="primary" :loading="btnLoading" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
+    </div>
+  </el-drawer>
+</template>
+
+<script>
+import { equipmentLinkAttrDetail, equipmentLinkAttrUpdate, equipmentLinkAttrAdd, equipmentLinkAttrCode } from '@/api/basicData/Equipment/equipmentLinkAttr'
+
+export default {
+  props: {
+    connectingDeviceId: {
+      type: String,
+      default: () => {
+        return ''
+      }
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      btnLoading: false,
+      dataForm: {
+        id: 0,
+        name: '',
+        code: '',
+        remark: ''
+      },
+      dataRule: {
+        name: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.visual.AttributeName')]), trigger: 'blur' }
+        ],
+        code: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.visual.AttributeCode')]), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    init(id) {
+      this.dataForm.id = id || ''
+      this.btnLoading = false
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          equipmentLinkAttrDetail(this.dataForm.id).then(res => {
+            this.dataForm.name = res.data.name
+            this.dataForm.code = res.data.code
+            this.dataForm.remark = res.data.remark
+          })
+        } else {
+          equipmentLinkAttrCode().then(res => {
+            this.dataForm.code = res.data
+          })
+        }
+      })
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.btnLoading = true
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          const data = {
+            'name': this.dataForm.name,
+            'code': this.dataForm.code,
+            'remark': this.dataForm.remark,
+            'connectingDeviceId': this.connectingDeviceId,
+            'id': this.dataForm.id
+          }
+          if (this.dataForm.id) {
+            equipmentLinkAttrUpdate(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          } else {
+            equipmentLinkAttrAdd(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.drawer-footer {
+  width: 100%;
+  margin-top: 50px;
+  border-top: 1px solid #e8e8e8;
+  padding: 10px 50px;
+  text-align: left;
+  background: #fff;
+}
+</style>
diff --git a/src/views/basicData/Equipment/components/equipmentType-add.vue b/src/views/basicData/Equipment/components/equipmentType-add.vue
new file mode 100644
index 0000000..1155b80
--- /dev/null
+++ b/src/views/basicData/Equipment/components/equipmentType-add.vue
@@ -0,0 +1,248 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-25 16:24:50
+ * @Description:
+-->
+<template>
+  <el-dialog
+    :title="isdetail? 'btn.detail' : !dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter"
+    :visible.sync="visible"
+  >
+    <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="180px" @keyup.enter.native="dataFormSubmit()">
+      <el-form-item :label="$t('module.basicData.equipment.EquipmentTypeName')" prop="name">
+        <el-input v-model="dataForm.name" :disabled="isdetail" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.EquipmentTypeName')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.equipment.EquipmentTypeCode')" prop="code">
+        <el-input v-model="dataForm.code" :disabled="isdetail" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.EquipmentTypeCode')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.equipment.parentName')" prop="parentA">
+        <el-cascader
+          v-model="dataForm.parentA"
+          :disabled="isdetail"
+          :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.parentName')])"
+          :props="{ checkStrictly: true }"
+          :options="parentArr"
+          filterable
+          clearable
+          @change="setParent"
+        />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.visual.Remarks')" prop="remark">
+        <el-input v-model="dataForm.remark" :disabled="isdetail" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Remarks')])" clearable />
+      </el-form-item>
+      <el-form-item v-if="dataForm.id && !isdetail" :label="$t('module.basicData.visual.uploadInfo')" prop="upInfo">
+        <el-upload
+          ref="upInfo"
+          name="files"
+          :data="typeCode"
+          :file-list="upInfofileList"
+          :action="upInfoAction"
+          multiple
+          :before-upload="upInfoBeforeUpload"
+          :on-success="saveUpload"
+        >
+          <el-button size="small" type="primary" icon="el-icon-upload">{{ 'btn.upload' | i18nFilter }}</el-button>
+        </el-upload>
+      </el-form-item>
+      <el-form-item v-if="isdetail" :label="$t('module.basicData.equipment.equipmentInfo')" prop="upInfo">
+        <div v-for="item in fileList" :key="item.id">
+          {{ item.fileName }} <el-button size="small" type="primary" icon="el-icon-upload" @click="downloadFile(item.fileId)">{{ 'btn.download' | i18nFilter }}</el-button>
+        </div>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import {
+  equipmentTypeDetail,
+  equipmentTypeUpdate,
+  equipmentTypeAdd,
+  equipmentTypeCode,
+  equipmentTypeListAll,
+  equipmentTypeFileAdd,
+  getEquipmentTypeFile
+} from '@/api/basicData/Equipment/equipmentType'
+import { uploadPath } from '@/api/basic'
+import { getUrl } from '@/api/file'
+
+export default {
+  data() {
+    return {
+      visible: false,
+      parentArr: [],
+      dataForm: {
+        id: 0,
+        name: '',
+        code: '',
+        parentA: '',
+        parentName: '',
+        parentId: '',
+        remark: ''
+      },
+      typeCode: {},
+      upInfoAction: uploadPath,
+      upInfofileList: [],
+      dataRule: {
+        name: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.equipment.EquipmentTypeName')]), trigger: 'blur' }
+        ],
+        code: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.equipment.EquipmentTypeCode')]), trigger: 'blur' }
+        ]
+      },
+      isdetail: false,
+      fileList: []
+    }
+  },
+  methods: {
+    init(id, isdetail) {
+      this.isdetail = false
+      this.isdetail = isdetail
+      if (this.isdetail) {
+        const data =
+          {
+            'equipmentTypeId': id
+          }
+        getEquipmentTypeFile(data).then(res => {
+          this.fileList = res.data
+          this.fileList.forEach(item => {
+            item.fileType = item.fileUrl.split('.')[1]
+          })
+        })
+      }
+      equipmentTypeCode().then(res => {
+        this.dataForm.code = res.data
+      })
+      this.parentArr.splice(0, this.parentArr.length)
+      equipmentTypeListAll().then(res => {
+        res.data.forEach(item => {
+          this.setArr(item)
+        })
+        this.parentArr = res.data
+      })
+      this.dataForm.id = id || ''
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          equipmentTypeDetail(this.dataForm.id).then(res => {
+            this.dataForm = res.data
+            this.dataForm.parentA = res.data.parentId + ',' + res.data.parentName
+          })
+        }
+      })
+    },
+    setArr(obj) {
+      obj.value = obj.id + ',' + obj.name
+      obj.label = obj.name
+      if (obj.children) {
+        obj.children.forEach(item => {
+          this.setArr(item)
+        })
+      }
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          const data = {
+            'name': this.dataForm.name,
+            'code': this.dataForm.code,
+            'remark': this.dataForm.remark,
+            'id': this.dataForm.id,
+            'parentId': this.dataForm.parentId,
+            'parentName': this.dataForm.parentName
+          }
+          if (this.dataForm.id) {
+            equipmentTypeUpdate(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          } else {
+            equipmentTypeAdd(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          }
+        }
+      })
+    },
+    setParent(key) {
+      const str = key[key.length - 1]
+      if (str) {
+        this.dataForm.parentId = str.substring(0, str.indexOf(','))
+        this.dataForm.parentName = str.substring(str.indexOf(',') + 1)
+      }
+    },
+    upInfoBeforeUpload(file) {
+      this.typeCode.typeCode = 'equipmentTypeFile'
+      const isRightSize = file.size / 1024 / 1024 < 10
+      if (!isRightSize) {
+        this.$message.error(this.$t('upload.picSizeAlarm'))
+      }
+      return isRightSize
+    },
+    submitUpload() {
+      this.$refs['upInfo'].submit()
+    },
+    saveUpload(res) {
+      const data =
+        {
+          'equipmentTypeId': this.dataForm.id,
+          'fileId': res.data[0].id,
+          'fileName': res.data[0].fileName,
+          'fileUrl': res.data[0].fileUrl,
+          'typeCode': this.typeCode.typeCode
+        }
+      equipmentTypeFileAdd(data).then(res => {
+        console.log(res)
+      })
+    },
+    downloadFile(id) {
+      getUrl({
+        attachmentId: id,
+        type: 1
+      }).then(response => {
+        let fileName = ''
+        const contentDisposition = response.headers['content-disposition']
+        if (contentDisposition) {
+          fileName = contentDisposition.slice(contentDisposition.indexOf('filename=') + 9)
+        }
+        const blob = new Blob([response.data])
+        const reader = new FileReader()
+        reader.readAsDataURL(blob)
+        reader.onload = (e) => {
+          const a = document.createElement('a')
+          a.download = fileName
+          a.href = e.target.result
+          document.body.appendChild(a)
+          a.click()
+          document.body.removeChild(a)
+        }
+      })
+    }
+  }
+}
+</script>
+
diff --git a/src/views/basicData/Equipment/components/equipmentTypeAlarm-add.vue b/src/views/basicData/Equipment/components/equipmentTypeAlarm-add.vue
new file mode 100644
index 0000000..4a40700
--- /dev/null
+++ b/src/views/basicData/Equipment/components/equipmentTypeAlarm-add.vue
@@ -0,0 +1,201 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-12 16:29:08
+ * @enName:
+-->
+<template>
+  <el-drawer
+    :visible.sync="visible"
+    :show-close="false"
+    :wrapper-closable="false"
+    size="60%"
+  >
+    <div slot="title" style=" background-color:#02BCFF;font-size:1.5em;color:white;padding:5px 20px">{{ !dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter }}</div>
+    <div style="margin:0 15px">
+      <el-form ref="dataForm" :model="dataForm" label-width="100px">
+        <el-form-item :label="$t('module.basicData.equipment.EquipmentTypeName')" prop="name">
+          <el-input v-model="dataForm.name" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.EquipmentTypeName')])" readonly />
+        </el-form-item>
+        <el-form-item :label="$t('module.basicData.equipment.EquipmentTypeCode')" prop="code">
+          <el-input v-model="dataForm.code" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.EquipmentTypeCode')])" readonly />
+        </el-form-item>
+      </el-form>
+      <div class="drawer-footer">
+        <el-button type="success" @click="goback()">{{ 'btn.back' | i18nFilter }}</el-button>
+        <el-button v-if="listQuery.equipmentTypeId && !isDetail" type="primary" @click="addNew()">{{ 'btn.adddetail' | i18nFilter }}</el-button>
+      </div>
+      <base-table
+        :page="listQuery.current"
+        :limit="listQuery.size"
+        :table-config="tableProps"
+        :table-data="list"
+      >
+        <method-btn
+          v-if="!isDetail"
+          slot="handleBtn"
+          :method-list="tableBtn"
+          @clickBtn="handleClick"
+        />
+      </base-table>
+    </div>
+    <equipmentAlarm-attr-add v-if="addOrUpdateVisible" ref="addOrUpdate" :equipment-type-id="listQuery.equipmentTypeId" @refreshDataList="getList" />
+  </el-drawer>
+</template>
+
+<script>import i18n from '@/lang'
+import { equipmentAlarmAttrList, equipmentAlarmAttrDelete } from '@/api/basicData/Equipment/equipmentAlarmAttr'
+import {
+  equipmentTypeDetail
+} from '@/api/basicData/Equipment/equipmentType'
+import BaseTable from '@/components/BaseTable'
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import equipmentAlarmAttrAdd from './equipmentTypeAlarmAttr-add'
+import { timeFormatter } from '@/filters'
+const tableBtn = [
+  {
+    type: 'edit',
+    btnName: 'btn.edit'
+  },
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  }
+]
+const tableProps = [
+  {
+    prop: 'createTime',
+    label: i18n.t('module.basicData.factory.createTime'),
+    filter: timeFormatter,
+    align: 'center'
+  },
+  {
+    prop: 'code',
+    label: i18n.t('module.basicData.alarmManagement.AlarmCode'),
+    align: 'center'
+  },
+  {
+    prop: 'alarmType',
+    label: i18n.t('module.basicData.alarmManagement.AlarmType'),
+    align: 'center'
+  },
+  {
+    prop: 'alarmGrade',
+    label: i18n.t('module.basicData.alarmManagement.AlarmLevel'),
+    align: 'center'
+  },
+  {
+    prop: 'alarmContent',
+    label: i18n.t('module.basicData.alarmManagement.AlarmContent'),
+    align: 'center'
+  }
+]
+
+export default {
+  components: { BaseTable, MethodBtn, equipmentAlarmAttrAdd },
+  data() {
+    return {
+      visible: false,
+      addOrUpdateVisible: false,
+      categoryArr: [],
+      tableBtn,
+      trueWidth: 200,
+      tableProps,
+      list: [],
+      dataForm: {
+        id: 0,
+        name: '',
+        code: ''
+      },
+      listQuery: {
+        current: 1,
+        size: 990,
+        equipmentTypeId: ''
+      },
+      isDetail: false
+    }
+  },
+  methods: {
+    init(id, isDetail) {
+      this.isDetail = false
+      this.isDetail = isDetail
+      this.dataForm.id = id || ''
+      this.listQuery.equipmentTypeId = ''
+      this.list.splice(0, this.list.length)
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          equipmentTypeDetail(this.dataForm.id).then(res => {
+            this.dataForm = res.data
+          })
+          this.listQuery.equipmentTypeId = this.dataForm.id
+          equipmentAlarmAttrList(this.listQuery).then(response => {
+            if (response.data.records) {
+              this.list = response.data.records
+            } else {
+              this.list.splice(0, this.list.length)
+            }
+          })
+        }
+      })
+    },
+    getList() {
+      equipmentAlarmAttrList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+      })
+    },
+    handleClick(raw) {
+      console.log(raw)
+      if (raw.type === 'delete') {
+        this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`, this.$t('module.basicData.visual.Tips'), {
+          confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+          cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+          type: 'warning'
+        }).then(() => {
+          equipmentAlarmAttrDelete(raw.data.id).then(response => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+              }
+            })
+          })
+        }).catch(() => {})
+      } else {
+        this.addNew(raw.data.id)
+      }
+    },
+    // 新增 / 修改
+    addNew(id) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id)
+      })
+    },
+    goback() {
+      this.$emit('refreshDataList')
+      this.visible = false
+    }
+  }
+}
+</script>
+
+<style scoped>
+.drawer-footer {
+  width: 100%;
+  margin-top: 50px;
+  border-top: 1px solid #e8e8e8;
+  border-bottom: 1px solid #e8e8e8;
+  padding: 10px 50px;
+  text-align: left;
+  background: #fff;
+}
+</style>
diff --git a/src/views/basicData/Equipment/components/equipmentTypeAlarmAttr-add.vue b/src/views/basicData/Equipment/components/equipmentTypeAlarmAttr-add.vue
new file mode 100644
index 0000000..37b84f0
--- /dev/null
+++ b/src/views/basicData/Equipment/components/equipmentTypeAlarmAttr-add.vue
@@ -0,0 +1,138 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-25 16:32:09
+ * @Description:
+-->
+<template>
+  <el-drawer
+    :append-to-body="true"
+    :show-close="false"
+    :visible.sync="visible"
+    size="40%"
+  >
+    <div slot="title" style=" background-color:#02BCFF;font-size:1.5em;color:white;padding:5px 20px">{{ !dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter }}</div>
+    <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="100px" @keyup.enter.native="dataFormSubmit()">
+      <el-form-item :label="$t('module.basicData.alarmManagement.AlarmCode')" prop="code">
+        <el-input v-model="dataForm.code" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.alarmManagement.AlarmCode')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.alarmManagement.AlarmType')" prop="alarmType">
+        <el-input v-model="dataForm.alarmType" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.alarmManagement.AlarmType')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.alarmManagement.AlarmLevel')" prop="alarmGrade">
+        <el-input v-model="dataForm.alarmGrade" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.alarmManagement.AlarmLevel')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.alarmManagement.AlarmContent')" prop="alarmContent">
+        <el-input v-model="dataForm.alarmContent" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.alarmManagement.AlarmContent')])" clearable />
+      </el-form-item>
+    </el-form>
+    <div class="drawer-footer">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+      <el-button type="primary" :loading="btnLoading" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
+    </div>
+  </el-drawer>
+</template>
+
+<script>
+import { equipmentAlarmAttrDetail, equipmentAlarmAttrUpdate, equipmentAlarmAttrAdd } from '@/api/basicData/Equipment/equipmentAlarmAttr'
+
+export default {
+  props: {
+    equipmentTypeId: {
+      type: String,
+      default: () => {
+        return ''
+      }
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      btnLoading: false,
+      dataForm: {
+        id: 0,
+        alarmType: '',
+        code: '',
+        alarmGrade: '',
+        alarmContent: ''
+      },
+      dataRule: {
+        code: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.alarmManagement.AlarmCode')]), trigger: 'blur' }
+        ],
+        alarmContent: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.alarmManagement.alarmContent')]), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    init(id) {
+      this.dataForm.id = id || ''
+      this.btnLoading = false
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          equipmentAlarmAttrDetail(this.dataForm.id).then(res => {
+            this.dataForm = res.data
+          })
+        }
+      })
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.btnLoading = true
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          const data = {
+            'alarmType': this.dataForm.alarmType,
+            'code': this.dataForm.code,
+            'alarmGrade': this.dataForm.alarmGrade,
+            'alarmContent': this.dataForm.alarmContent,
+            'equipmentTypeId': this.equipmentTypeId,
+            'id': this.dataForm.id
+          }
+          if (this.dataForm.id) {
+            equipmentAlarmAttrUpdate(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          } else {
+            equipmentAlarmAttrAdd(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.drawer-footer {
+  width: 100%;
+  margin-top: 50px;
+  border-top: 1px solid #e8e8e8;
+  padding: 10px 50px;
+  text-align: left;
+  background: #fff;
+}
+</style>
diff --git a/src/views/basicData/Equipment/components/maintenanceCycle-add.vue b/src/views/basicData/Equipment/components/maintenanceCycle-add.vue
new file mode 100644
index 0000000..94f13dc
--- /dev/null
+++ b/src/views/basicData/Equipment/components/maintenanceCycle-add.vue
@@ -0,0 +1,110 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-25 16:25:01
+ * @enName:
+-->
+<template>
+  <el-dialog
+    :title="!dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter"
+    :visible.sync="visible"
+  >
+    <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="160px" @keyup.enter.native="dataFormSubmit()">
+      <el-form-item :label="$t('module.basicData.equipment.maintenancePeriod')" prop="maintenancePeriod">
+        <el-input v-model="dataForm.maintenancePeriod" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.maintenancePeriod')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.equipment.PeriodCode')" prop="code">
+        <el-input v-model="dataForm.code" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.PeriodCode')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.visual.Remarks')" prop="remark">
+        <el-input v-model="dataForm.remark" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Remarks')])" clearable />
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { maintenanceCycleDetail, maintenanceCycleUpdate, maintenanceCycleAdd, maintenanceCycleCode } from '@/api/basicData/Equipment/maintenanceCycle'
+
+export default {
+  data() {
+    return {
+      visible: false,
+      dataForm: {
+        id: 0,
+        maintenancePeriod: '',
+        code: '',
+        remark: ''
+      },
+      dataRule: {
+        maintenancePeriod: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.equipment.maintenancePeriod')]), trigger: 'blur' }
+        ],
+        code: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.equipment.PeriodCode')]), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    init(id) {
+      maintenanceCycleCode().then(res => {
+        this.dataForm.code = res.data
+      })
+      this.dataForm.id = id || ''
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          maintenanceCycleDetail(this.dataForm.id).then(res => {
+            this.dataForm = res.data
+          })
+        }
+      })
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          const data = {
+            'maintenancePeriod': this.dataForm.maintenancePeriod,
+            'code': this.dataForm.code,
+            'remark': this.dataForm.remark,
+            'id': this.dataForm.id
+          }
+          if (this.dataForm.id) {
+            maintenanceCycleUpdate(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          } else {
+            maintenanceCycleAdd(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          }
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/basicData/Equipment/components/maintenanceType-add.vue b/src/views/basicData/Equipment/components/maintenanceType-add.vue
new file mode 100644
index 0000000..a87eb15
--- /dev/null
+++ b/src/views/basicData/Equipment/components/maintenanceType-add.vue
@@ -0,0 +1,118 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-06 13:57:57
+ * @enName:
+-->
+<template>
+  <el-dialog
+    :title="!dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter"
+    :visible.sync="visible"
+  >
+    <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="150px" @keyup.enter.native="dataFormSubmit()">
+      <el-form-item :label="$t('module.basicData.equipment.RepairTypeName')" prop="name">
+        <el-input v-model="dataForm.name" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.RepairTypeName')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.equipment.RepairTypeCode')" prop="code">
+        <el-input v-model="dataForm.code" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.RepairTypeCode')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.visual.EnglishName')" prop="enName">
+        <el-input v-model="dataForm.enName" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.EnglishName')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.visual.Remarks')" prop="remark">
+        <el-input v-model="dataForm.remark" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Remarks')])" clearable />
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { maintenanceTypeDetail, maintenanceTypeUpdate, maintenanceTypeAdd, maintenanceTypeCode } from '@/api/basicData/Equipment/maintenanceType'
+
+export default {
+  data() {
+    return {
+      visible: false,
+      dataForm: {
+        id: 0,
+        name: '',
+        code: '',
+        enName: '',
+        remark: ''
+      },
+      dataRule: {
+        name: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.equipment.RepairTypeName')]), trigger: 'blur' }
+        ],
+        code: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.equipment.RepairTypeCode')]), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    init(id) {
+      maintenanceTypeCode().then(res => {
+        this.dataForm.code = res.data
+      })
+      this.dataForm.id = id || ''
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          maintenanceTypeDetail(this.dataForm.id).then(res => {
+            this.dataForm.name = res.data.name
+            this.dataForm.code = res.data.code
+            this.dataForm.enName = res.data.enName
+            this.dataForm.remark = res.data.remark
+          })
+        }
+      })
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          const data = {
+            'name': this.dataForm.name,
+            'code': this.dataForm.code,
+            'enName': this.dataForm.enName,
+            'remark': this.dataForm.remark,
+            'id': this.dataForm.id
+          }
+          if (this.dataForm.id) {
+            maintenanceTypeUpdate(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          } else {
+            maintenanceTypeAdd(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          }
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/basicData/Equipment/components/spareParts-add.vue b/src/views/basicData/Equipment/components/spareParts-add.vue
new file mode 100644
index 0000000..11a0217
--- /dev/null
+++ b/src/views/basicData/Equipment/components/spareParts-add.vue
@@ -0,0 +1,149 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-25 16:25:17
+ * @Description:
+-->
+<template>
+  <el-dialog
+    :title="!dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter"
+    :visible.sync="visible"
+  >
+    <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="100px" @keyup.enter.native="dataFormSubmit()">
+      <el-form-item :label="$t('module.basicData.equipment.SparepartName')" prop="name">
+        <el-input v-model="dataForm.name" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.SparepartName')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.equipment.SparepartCode')" prop="code">
+        <el-input v-model="dataForm.code" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.SparepartCode')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.equipment.SparepartModel')" prop="model">
+        <el-input v-model="dataForm.model" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.SparepartModel')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.visual.Specs')" prop="specifications">
+        <el-input v-model="dataForm.specifications" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Specs')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.visual.unit')" prop="dictDataId">
+        <el-select v-model="dataForm.dictDataId" filterable :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.unit')])" clearable>
+          <el-option
+            v-for="item in unitArr"
+            :key="item.id"
+            :label="item.dataName"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.visual.Remarks')" prop="description">
+        <el-input v-model="dataForm.description" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Remarks')])" clearable />
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { sparePartsDetail, sparePartsUpdate, sparePartsAdd, sparePartsCode } from '@/api/basicData/Equipment/spareParts'
+import { ProductPoolUnit } from '@/api/basicData/ProductPool'
+
+export default {
+  data() {
+    return {
+      visible: false,
+      dataForm: {
+        id: 0,
+        name: '',
+        code: '',
+        description: '',
+        model: '',
+        specifications: '',
+        dictDataId: ''
+      },
+      unitArr: [],
+      dataRule: {
+        name: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.equipment.SparepartName')]), trigger: 'blur' }
+        ],
+        code: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.equipment.SparepartCode')]), trigger: 'blur' }
+        ],
+        model: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.equipment.SparepartModel')]), trigger: 'blur' }
+        ],
+        dictDataId: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.equipment.unit')]), trigger: 'change' }
+        ]
+      }
+    }
+  },
+  methods: {
+    init(id) {
+      this.dataForm.id = id || ''
+      ProductPoolUnit().then(res => {
+        this.unitArr = res.data
+      })
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          sparePartsDetail(this.dataForm.id).then(res => {
+            this.dataForm.name = res.data.name
+            this.dataForm.code = res.data.code
+            this.dataForm.description = res.data.description
+            this.dataForm.model = res.data.model
+            this.dataForm.specifications = res.data.specifications
+            this.dataForm.dictDataId = res.data.dictDataId
+          })
+        } else {
+          sparePartsCode().then(res => {
+            this.dataForm.code = res.data
+          })
+        }
+      })
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          const data = {
+            'name': this.dataForm.name,
+            'code': this.dataForm.code,
+            'description': this.dataForm.description,
+            'model': this.dataForm.model,
+            'specifications': this.dataForm.specifications,
+            'dictDataId': this.dataForm.dictDataId,
+            'id': this.dataForm.id
+          }
+          if (this.dataForm.id) {
+            sparePartsUpdate(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          } else {
+            sparePartsAdd(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          }
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/basicData/Equipment/detectSystemSettings.vue b/src/views/basicData/Equipment/detectSystemSettings.vue
new file mode 100644
index 0000000..68d2ebb
--- /dev/null
+++ b/src/views/basicData/Equipment/detectSystemSettings.vue
@@ -0,0 +1,206 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-05-28 10:38:22
+ * @Description:
+-->
+<template>
+  <div class="app-container">
+    <el-form :inline="true" @keyup.enter.native="getDataList()">
+      <el-form-item :label="keyName">
+        <el-select v-model="detectAreaId" :placeholder="placeholderName" clearable>
+          <el-option
+            v-for="item in detectAreaArr"
+            :key="item.id"
+            :label="item.detectArea"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="getList()">{{ 'btn.search' | i18nFilter }}</el-button>
+        <el-button type="primary" @click="addNew()">{{ 'btn.add' | i18nFilter }}</el-button>
+      </el-form-item>
+    </el-form>
+    <base-table
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    >
+      <method-btn
+        slot="handleBtn"
+        :width="trueWidth"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      @pagination="getList()"
+    />
+  </div>
+</template>
+
+<script>import i18n from '@/lang'
+import { equipmentDetectAreaSystemList, equipmentDetectAreaSystemDelete } from '@/api/basicData/Equipment/equipmentDetectAreaSystem'
+import { equipmentDetectAreaList } from '@/api/basicData/Equipment/equipmentDetectArea'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+
+const tableBtn = [
+  {
+    type: 'edit',
+    btnName: 'btn.edit'
+  },
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  },
+  {
+    type: 'detail',
+    btnName: 'btn.detail'
+  }
+]
+const tableProps = [
+  {
+    prop: 'detectArea',
+    label: i18n.t('module.basicData.equipmentDetectInfo.DetectionArea'),
+    align: 'center'
+  },
+  {
+    prop: 'name',
+    label: i18n.t('module.basicData.equipmentDetectInfo.equipmentDetectSystemName'),
+    align: 'center'
+  }
+]
+
+export default {
+  name: 'DetectSystemSettings',
+  components: { Pagination, BaseTable, MethodBtn },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      keyName: i18n.t('module.basicData.visual.keyword'),
+      placeholderName: this.$t('module.basicData.equipmentDetectInfo.DetectionArea'),
+      tableBtn,
+      trueWidth: 240,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        current: 1,
+        size: 10
+      },
+      detectAreaId: '',
+      detectAreaArr: []
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    handleClick(raw) {
+      console.log(raw)
+      if (raw.type === 'delete') {
+        this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`, this.$t('module.basicData.visual.Tips'), {
+          confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+          cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+          type: 'warning'
+        }).then(() => {
+          equipmentDetectAreaSystemDelete(raw.data.id).then(response => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+              }
+            })
+          })
+        }).catch(() => {})
+      } else if (raw.type === 'edit') {
+        this.addNew(raw.data.id)
+      } else {
+        this.addNew(raw.data.id, true)
+      }
+    },
+    getList() {
+      const data = {
+        current: 1,
+        size: 500
+      }
+      equipmentDetectAreaList(data).then(response => {
+        if (response.data.records) {
+          this.detectAreaArr = response.data.records
+        } else {
+          this.detectAreaArr.splice(0, this.detectAreaArr.length)
+        }
+      })
+      this.listLoading = true
+      this.listQuery.detectDistributionAreaId = this.detectAreaId
+      equipmentDetectAreaSystemList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    },
+    // 新增 / 修改
+    addNew(id, isdetail) {
+      this.$router.push({
+        name: 'detectSystemSettingsAdd',
+        query: {
+          id: id,
+          isdetail: isdetail
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/basicData/Equipment/equipmentDetectArea.vue b/src/views/basicData/Equipment/equipmentDetectArea.vue
new file mode 100644
index 0000000..f9d94f8
--- /dev/null
+++ b/src/views/basicData/Equipment/equipmentDetectArea.vue
@@ -0,0 +1,208 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-07-23 09:04:12
+ * @Description:
+-->
+<template>
+  <div class="app-container">
+    <el-form :inline="true" @keyup.enter.native="getDataList()">
+      <el-form-item :label="keyName">
+        <el-select v-model="detectArea" :placeholder="placeholderName" clearable>
+          <el-option
+            v-for="item in detectAreaArr"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="getList()">{{ 'btn.search' | i18nFilter }}</el-button>
+        <el-button type="primary" @click="addNew()">{{ 'btn.add' | i18nFilter }}</el-button>
+      </el-form-item>
+    </el-form>
+    <base-table
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    >
+      <method-btn
+        slot="handleBtn"
+        :width="trueWidth"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      @pagination="getList()"
+    />
+  </div>
+</template>
+
+<script>import i18n from '@/lang'
+import { equipmentDetectAreaList, equipmentDetectAreaDelete } from '@/api/basicData/Equipment/equipmentDetectArea'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+
+const tableBtn = [
+  {
+    type: 'edit',
+    btnName: 'btn.edit'
+  },
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  }
+  // {
+  //   type: 'detail',
+  //   btnName: 'btn.detail'
+  // }
+]
+const tableProps = [
+  {
+    prop: 'code',
+    label: i18n.t('module.basicData.equipment.WiredCode'),
+    align: 'center'
+  },
+  {
+    prop: 'detectArea',
+    label: i18n.t('module.basicData.equipmentDetectInfo.DetectionArea'),
+    align: 'center'
+  },
+  {
+    prop: 'distributionArea',
+    label: i18n.t('module.basicData.equipmentDetectInfo.IssueArea'),
+    align: 'center'
+  }
+]
+
+export default {
+  name: 'Material',
+  components: { Pagination, BaseTable, MethodBtn },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      keyName: i18n.t('module.basicData.visual.keyword'),
+      placeholderName: this.$t('module.basicData.equipmentDetectInfo.DetectionArea'),
+      tableBtn,
+      trueWidth: 240,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        current: 1,
+        size: 10
+      },
+      detectArea: '',
+      detectAreaArr: [{
+        value: 'Backend',
+        label: 'Backend'
+      }, {
+        value: 'Frontend',
+        label: 'Frontend'
+      }, {
+        value: 'Midend',
+        label: 'Midend'
+      }]
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    handleClick(raw) {
+      console.log(raw)
+      if (raw.type === 'delete') {
+        this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.detectArea}]?`, this.$t('module.basicData.visual.Tips'), {
+          confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+          cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+          type: 'warning'
+        }).then(() => {
+          equipmentDetectAreaDelete(raw.data.id).then(response => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+              }
+            })
+          })
+        }).catch(() => {})
+      } else if (raw.type === 'edit') {
+        this.addNew(raw.data.id)
+      } else {
+        this.addNew(raw.data.id, true)
+      }
+    },
+    getList() {
+      this.listLoading = true
+      this.listQuery.detectArea = this.detectArea
+      equipmentDetectAreaList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    },
+    // 新增 / 修改
+    addNew(id, isdetail) {
+      this.$router.push({
+        name: 'equipmentDetectAreaAdd',
+        query: {
+          id: id,
+          isdetail: isdetail
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/basicData/Equipment/equipmentDetectParam.vue b/src/views/basicData/Equipment/equipmentDetectParam.vue
new file mode 100644
index 0000000..023d022
--- /dev/null
+++ b/src/views/basicData/Equipment/equipmentDetectParam.vue
@@ -0,0 +1,220 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-04-16 15:01:20
+ * @Description:
+-->
+<template>
+  <div class="app-container">
+    <el-form :inline="true" @keyup.enter.native="getDataList()">
+      <el-form-item :label="keyName">
+        <el-select v-model="detectDistributionAreaId" :placeholder="placeholderName" clearable>
+          <el-option
+            v-for="item in distributionAreaArr"
+            :key="item.id"
+            :label="item.distributionArea"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="getList()">{{ 'btn.search' | i18nFilter }}</el-button>
+      </el-form-item>
+    </el-form>
+    <base-table
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    >
+      <method-btn
+        slot="handleBtn"
+        :width="trueWidth"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      @pagination="getList()"
+    />
+  </div>
+</template>
+
+<script>import i18n from '@/lang'
+import { equipmentDetectAreaAttrList, equipmentDetectAreaAttrDelete } from '@/api/basicData/Equipment/equipmentDetectAreaAttr'
+import { equipmentDetectAreaList } from '@/api/basicData/Equipment/equipmentDetectArea'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+
+const tableBtn = [
+  {
+    type: 'edit',
+    btnName: 'btn.edit'
+  },
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  },
+  {
+    type: 'detail',
+    btnName: 'btn.detail'
+  }
+]
+const tableProps = [
+  {
+    prop: 'distributionArea',
+    label: i18n.t('module.basicData.equipmentDetectInfo.IssueArea'),
+    align: 'center'
+  },
+  {
+    prop: 'detectArea',
+    label: i18n.t('module.basicData.equipmentDetectInfo.DetectionArea'),
+    align: 'center'
+  },
+  {
+    prop: 'name',
+    label: i18n.t('module.basicData.equipment.EquipmentName'),
+    align: 'center'
+  },
+  {
+    prop: 'code',
+    label: i18n.t('module.basicData.equipment.EquipmentCode'),
+    align: 'center'
+  },
+  {
+    prop: 'function',
+    label: i18n.t('module.basicData.equipmentDetectInfo.EquipmentFunction'),
+    align: 'center'
+  }
+]
+
+export default {
+  name: 'Material',
+  components: { Pagination, BaseTable, MethodBtn },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      keyName: i18n.t('module.basicData.visual.keyword'),
+      placeholderName: this.$t('module.basicData.equipmentDetectInfo.IssueArea'),
+      tableBtn,
+      trueWidth: 240,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        current: 1,
+        size: 10
+      },
+      detectDistributionAreaId: '',
+      distributionAreaArr: []
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    handleClick(raw) {
+      console.log(raw)
+      if (raw.type === 'delete') {
+        this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.code}]?`, this.$t('module.basicData.visual.Tips'), {
+          confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+          cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+          type: 'warning'
+        }).then(() => {
+          equipmentDetectAreaAttrDelete(raw.data.id).then(response => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+              }
+            })
+          })
+        }).catch(() => {})
+      } else if (raw.type === 'edit') {
+        this.addNew(raw.data)
+      } else {
+        this.addNew(raw.data, true)
+      }
+    },
+    getList() {
+      const params = {
+        current: 1,
+        size: 550
+      }
+      equipmentDetectAreaList(params).then(response => {
+        if (response.data.records) {
+          this.distributionAreaArr = response.data.records
+        } else {
+          this.distributionAreaArr.splice(0, this.distributionAreaArr.length)
+        }
+      })
+      this.listLoading = true
+      this.listQuery.detectDistributionAreaId = this.detectDistributionAreaId
+      equipmentDetectAreaAttrList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    },
+    // 新增 / 修改
+    addNew(data, isdetail) {
+      this.$router.push({
+        name: 'equipmentDetectParamAdd',
+        query: {
+          data: data,
+          isdetail: isdetail
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/basicData/Equipment/equipmentDetectSystem.vue b/src/views/basicData/Equipment/equipmentDetectSystem.vue
new file mode 100644
index 0000000..e6ec490
--- /dev/null
+++ b/src/views/basicData/Equipment/equipmentDetectSystem.vue
@@ -0,0 +1,191 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-05-21 10:11:11
+ * @Description:
+-->
+<template>
+  <div class="app-container">
+    <head-form
+      :placeholder-name="placeholderName"
+      :key-name="keyName"
+      @getDataList="getList"
+      @add="addNew"
+    />
+    <base-table
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    >
+      <method-btn
+        slot="handleBtn"
+        :width="trueWidth"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      @pagination="getList()"
+    />
+    <equipmentDetectSystem-add v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
+  </div>
+</template>
+
+<script>
+import { equipmentDetectSystemList, equipmentDetectSystemDelete } from '@/api/basicData/Equipment/equipmentDetectSystem'
+import equipmentDetectSystemAdd from './components/equipmentDetectSystem-add.vue'
+import HeadForm from '@/components/basicData/HeadForm'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import i18n from '@/lang'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+
+const tableBtn = [
+  {
+    type: 'edit',
+    btnName: 'btn.edit'
+  },
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  }
+]
+const tableProps = [
+  {
+    prop: 'code',
+    label: i18n.t('module.basicData.equipmentDetectInfo.code'),
+    align: 'center'
+  },
+  {
+    prop: 'name',
+    label: i18n.t('module.basicData.equipmentDetectInfo.equipmentDetectSystemName'),
+    align: 'center'
+  },
+  {
+    prop: 'abbr',
+    label: i18n.t('module.basicData.equipmentDetectInfo.equipmentDetectSystemAbbr'),
+    align: 'center'
+  },
+  {
+    prop: 'description',
+    label: i18n.t('module.basicData.equipment.FunctionDescription'),
+    align: 'center'
+  }
+]
+
+export default {
+  name: 'EquipmentDetectSystem',
+  components: { Pagination, BaseTable, MethodBtn, HeadForm, equipmentDetectSystemAdd },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      keyName: i18n.t('module.basicData.visual.keyword'),
+      placeholderName: this.$t('module.basicData.equipmentDetectInfo.equipmentDetectSystemName'),
+      addOrUpdateVisible: false,
+      tableBtn,
+      trueWidth: 200,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        current: 1,
+        size: 10,
+        name: '',
+        code: ''
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    handleClick(raw) {
+      console.log(raw)
+      if (raw.type === 'delete') {
+        this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`, this.$t('module.basicData.visual.Tips'), {
+          confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+          cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+          type: 'warning'
+        }).then(() => {
+          equipmentDetectSystemDelete(raw.data.id).then(response => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+              }
+            })
+          })
+        }).catch(() => {})
+      } else {
+        this.addNew(raw.data.id)
+      }
+    },
+    getList(key) {
+      this.listLoading = true
+      this.listQuery.name = key
+      this.listQuery.code = key
+      equipmentDetectSystemList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    },
+    // 新增 / 修改
+    addNew(id) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id)
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/basicData/Equipment/equipmentInfo.vue b/src/views/basicData/Equipment/equipmentInfo.vue
new file mode 100644
index 0000000..15813a7
--- /dev/null
+++ b/src/views/basicData/Equipment/equipmentInfo.vue
@@ -0,0 +1,232 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-07-08 09:46:10
+ * @Description:
+-->
+<template>
+  <div class="app-container">
+    <head-form
+      :placeholder-name="placeholderName"
+      :key-name="keyName"
+      @getDataList="getList"
+      @add="addNew"
+    />
+    <base-table
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    >
+      <method-btn
+        slot="handleBtn"
+        :width="trueWidth"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      @pagination="getList()"
+    />
+  </div>
+</template>
+
+<script>import i18n from '@/lang'
+import { equipmentInfoList, equipmentInfoDelete } from '@/api/basicData/Equipment/equipmentInfo'
+import HeadForm from '@/components/basicData/HeadForm'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+// import { timeFormatter } from '@/filters'
+// import dataDict from '@/filters/DataDict'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+
+const tableBtn = [
+  {
+    type: 'edit',
+    btnName: 'btn.edit'
+  },
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  },
+  {
+    type: 'detail',
+    btnName: 'btn.detail'
+  }
+]
+const tableProps = [
+  // {
+  //   prop: 'createTime',
+  //   label: i18n.t('module.basicData.factory.createTime'),
+  //   filter: timeFormatter,
+  //   align: 'center'
+  // },
+  {
+    prop: 'name',
+    label: i18n.t('module.basicData.equipment.EquipmentName'),
+    align: 'center'
+  },
+  {
+    prop: 'equipmentTypeName',
+    label: i18n.t('module.basicData.equipment.EquipmentType'),
+    align: 'center'
+  },
+  {
+    prop: 'code',
+    label: i18n.t('module.basicData.equipment.EquipmentCode'),
+    align: 'center'
+  },
+  {
+    prop: 'equipmentGroupName',
+    label: i18n.t('module.basicData.equipment.EquipmentGrouping'),
+    align: 'center'
+  },
+  {
+    prop: 'enName',
+    label: i18n.t('module.basicData.visual.EnglishName'),
+    align: 'center'
+  },
+  {
+    prop: 'maintenanceCycle',
+    label: i18n.t('module.basicData.equipment.maintenanceCycle'),
+    align: 'center'
+  },
+  {
+    prop: 'maintenanceTime',
+    label: i18n.t('module.basicData.equipment.maintenanceTime'),
+    align: 'center'
+  },
+  {
+    prop: 'description',
+    label: i18n.t('module.basicData.equipment.FunctionDescription'),
+    align: 'center'
+  }
+  // {
+  //   prop: 'abbr',
+  //   label: i18n.t('module.basicData.visual.Abbreviation'),
+  //   align: 'center'
+  // }
+  // {
+  //   prop: 'estatus',
+  //   label: i18n.t('module.basicData.visual.CurrentState'),
+  //   filter: dataDict('enableState'),
+  //   align: 'center'
+  // }
+]
+
+export default {
+  name: 'EquipmentInfo',
+  components: { Pagination, BaseTable, MethodBtn, HeadForm },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      keyName: i18n.t('module.basicData.visual.keyword'),
+      placeholderName: this.$t('module.basicData.equipment.EquipmentName') + this.$t('module.basicData.visual.Or') + this.$t('module.basicData.equipment.EquipmentCode'),
+      tableBtn,
+      trueWidth: 240,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        current: 1,
+        size: 10
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    handleClick(raw) {
+      if (raw.type === 'delete') {
+        this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`, this.$t('module.basicData.visual.Tips'), {
+          confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+          cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+          type: 'warning'
+        }).then(() => {
+          equipmentInfoDelete(raw.data.id).then(response => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+              }
+            })
+          })
+        }).catch(() => {})
+      } else if (raw.type === 'edit') {
+        this.addNew(raw.data.id)
+      } else {
+        this.addNew(raw.data.id, true)
+      }
+    },
+    getList(key) {
+      this.listLoading = true
+      this.listQuery.name = key
+      this.listQuery.code = key
+      equipmentInfoList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    },
+    // 新增 / 修改
+    addNew(id, isdetail) {
+      this.$router.push({
+        name: 'equipmentInfoAdd',
+        query: {
+          id: id,
+          isdetail: isdetail
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/basicData/Equipment/equipmentLink.vue b/src/views/basicData/Equipment/equipmentLink.vue
new file mode 100644
index 0000000..0ba6df6
--- /dev/null
+++ b/src/views/basicData/Equipment/equipmentLink.vue
@@ -0,0 +1,196 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-11 16:45:38
+ * @Description:
+-->
+<template>
+  <div class="app-container">
+    <head-form
+      :placeholder-name="placeholderName"
+      :key-name="keyName"
+      @getDataList="getList"
+      @add="addNew"
+    />
+    <base-table
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    >
+      <method-btn
+        slot="handleBtn"
+        :width="trueWidth"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      @pagination="getList()"
+    />
+  </div>
+</template>
+
+<script>import i18n from '@/lang'
+import { equipmentLinkList, equipmentLinkDelete } from '@/api/basicData/Equipment/equipmentLink'
+import HeadForm from '@/components/basicData/HeadForm'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import { timeFormatter } from '@/filters'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+
+const tableBtn = [
+  {
+    type: 'edit',
+    btnName: 'btn.edit'
+  },
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  },
+  {
+    type: 'detail',
+    btnName: 'btn.detail'
+  }
+]
+const tableProps = [
+  {
+    prop: 'createTime',
+    label: i18n.t('module.basicData.factory.createTime'),
+    filter: timeFormatter,
+    align: 'center'
+  },
+  {
+    prop: 'code',
+    label: i18n.t('module.basicData.equipment.WiredCode'),
+    align: 'center'
+  },
+  {
+    prop: 'name',
+    label: i18n.t('module.basicData.equipment.WiredEquipment'),
+    align: 'center'
+  },
+  {
+    prop: 'enName',
+    label: i18n.t('module.basicData.visual.EnglishName'),
+    align: 'center'
+  }
+]
+
+export default {
+  name: 'EquipmentLink',
+  components: { Pagination, BaseTable, MethodBtn, HeadForm },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      keyName: i18n.t('module.basicData.visual.keyword'),
+      placeholderName: this.$t('module.basicData.equipment.WiredEquipment') + this.$t('module.basicData.visual.Or') + this.$t('module.basicData.equipment.WiredCode'),
+      tableBtn,
+      trueWidth: 240,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        current: 1,
+        size: 10
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    handleClick(raw) {
+      console.log(raw)
+      if (raw.type === 'delete') {
+        this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`, this.$t('module.basicData.visual.Tips'), {
+          confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+          cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+          type: 'warning'
+        }).then(() => {
+          equipmentLinkDelete(raw.data.id).then(response => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+              }
+            })
+          })
+        }).catch(() => {})
+      } else if (raw.type === 'edit') {
+        this.addNew(raw.data.id)
+      } else {
+        this.addNew(raw.data.id, true)
+      }
+    },
+    getList(key) {
+      this.listLoading = true
+      this.listQuery.name = key
+      this.listQuery.code = key
+      equipmentLinkList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    },
+    // 新增 / 修改
+    addNew(id, isdetail) {
+      this.$router.push({
+        name: 'equipmentLinkAdd',
+        query: {
+          id: id,
+          isdetail: isdetail
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/basicData/Equipment/equipmentType.vue b/src/views/basicData/Equipment/equipmentType.vue
new file mode 100644
index 0000000..a850fe9
--- /dev/null
+++ b/src/views/basicData/Equipment/equipmentType.vue
@@ -0,0 +1,201 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-11 16:59:29
+ * @Description:
+-->
+<template>
+  <div class="app-container">
+    <head-form
+      :placeholder-name="placeholderName"
+      :key-name="keyName"
+      @getDataList="getList"
+      @add="addNew"
+    />
+    <base-table
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    >
+      <method-btn
+        slot="handleBtn"
+        :width="trueWidth"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      @pagination="getList()"
+    />
+    <equipmentType-add v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
+  </div>
+</template>
+
+<script>import i18n from '@/lang'
+import { equipmentTypeList, equipmentTypeDelete } from '@/api/basicData/Equipment/equipmentType'
+import equipmentTypeAdd from './components/equipmentType-add.vue'
+import HeadForm from '@/components/basicData/HeadForm'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import { timeFormatter } from '@/filters'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+
+const tableBtn = [
+  {
+    type: 'edit',
+    btnName: 'btn.edit'
+  },
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  },
+  {
+    type: 'detail',
+    btnName: 'btn.detail'
+  }
+]
+const tableProps = [
+  {
+    prop: 'createTime',
+    label: i18n.t('module.basicData.factory.createTime'),
+    filter: timeFormatter,
+    align: 'center'
+  },
+  {
+    prop: 'name',
+    label: i18n.t('module.basicData.equipment.EquipmentTypeName'),
+    align: 'center'
+  },
+  {
+    prop: 'code',
+    label: i18n.t('module.basicData.equipment.EquipmentTypeCode'),
+    align: 'center'
+  },
+  {
+    prop: 'parentName',
+    label: i18n.t('module.basicData.equipment.parentName'),
+    align: 'center'
+  },
+  {
+    prop: 'remark',
+    label: i18n.t('module.basicData.visual.Remarks'),
+    align: 'center'
+  }
+]
+
+export default {
+  name: 'EquipmentType',
+  components: { Pagination, BaseTable, MethodBtn, HeadForm, equipmentTypeAdd },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      keyName: i18n.t('module.basicData.visual.keyword'),
+      placeholderName: this.$t('module.basicData.equipment.EquipmentTypeName') + this.$t('module.basicData.visual.Or') + this.$t('module.basicData.equipment.EquipmentTypeCode'),
+      addOrUpdateVisible: false,
+      tableBtn,
+      trueWidth: 240,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        current: 1,
+        size: 10
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    handleClick(raw) {
+      console.log(raw)
+      if (raw.type === 'delete') {
+        this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`, this.$t('module.basicData.visual.Tips'), {
+          confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+          cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+          type: 'warning'
+        }).then(() => {
+          equipmentTypeDelete(raw.data.id).then(response => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+              }
+            })
+          })
+        }).catch(() => {})
+      } else if (raw.type === 'edit') {
+        this.addNew(raw.data.id)
+      } else {
+        this.addNew(raw.data.id, true)
+      }
+    },
+    getList(key) {
+      this.listLoading = true
+      this.listQuery.name = key
+      this.listQuery.code = key
+      equipmentTypeList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    },
+    // 新增 / 修改
+    addNew(id, isdetail) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id, isdetail)
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/basicData/Equipment/equipmentTypeAlarm.vue b/src/views/basicData/Equipment/equipmentTypeAlarm.vue
new file mode 100644
index 0000000..b495d74
--- /dev/null
+++ b/src/views/basicData/Equipment/equipmentTypeAlarm.vue
@@ -0,0 +1,176 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-12 16:27:21
+ * @Description:
+-->
+<template>
+  <div class="app-container">
+    <head-form
+      :placeholder-name="placeholderName"
+      :key-name="keyName"
+      :show-add="showAdd"
+      @getDataList="getList"
+      @add="addNew"
+    />
+    <base-table
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    >
+      <method-btn
+        slot="handleBtn"
+        :width="trueWidth"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      @pagination="getList()"
+    />
+    <equipmentAlarm-add v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
+  </div>
+</template>
+
+<script>import i18n from '@/lang'
+import { equipmentTypeList } from '@/api/basicData/Equipment/equipmentType'
+import equipmentAlarmAdd from './components/equipmentTypeAlarm-add.vue'
+import HeadForm from '@/components/basicData/HeadForm'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import { timeFormatter } from '@/filters'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+
+const tableBtn = [
+  {
+    type: 'edit',
+    btnName: i18n.t('module.basicData.equipment.SetAlarm')
+  },
+  {
+    type: 'detail',
+    btnName: 'btn.detail'
+  }
+]
+const tableProps = [
+  {
+    prop: 'createTime',
+    label: i18n.t('module.basicData.factory.createTime'),
+    filter: timeFormatter,
+    align: 'center'
+  },
+  {
+    prop: 'name',
+    label: i18n.t('module.basicData.equipment.EquipmentTypeName'),
+    align: 'center'
+  },
+  {
+    prop: 'code',
+    label: i18n.t('module.basicData.equipment.EquipmentTypeCode'),
+    align: 'center'
+  },
+  {
+    prop: 'remark',
+    label: i18n.t('module.basicData.visual.Remarks'),
+    align: 'center'
+  }
+]
+
+export default {
+  name: 'EquipmentAlarm',
+  components: { Pagination, BaseTable, MethodBtn, HeadForm, equipmentAlarmAdd },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      keyName: i18n.t('module.basicData.visual.keyword'),
+      placeholderName: this.$t('module.basicData.equipment.EquipmentTypeName') + this.$t('module.basicData.visual.Or') + this.$t('module.basicData.equipment.EquipmentTypeCode'),
+      addOrUpdateVisible: false,
+      tableBtn,
+      showAdd: false,
+      trueWidth: 200,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        current: 1,
+        size: 10
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    handleClick(raw) {
+      if (raw.type === 'detail') {
+        this.addNew(raw.data.id, true)
+      } else {
+        this.addNew(raw.data.id)
+      }
+    },
+    getList(key) {
+      this.listLoading = true
+      this.listQuery.category = key
+      this.listQuery.code = key
+      equipmentTypeList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    },
+    // 新增 / 修改
+    addNew(id, detail) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id, detail)
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/basicData/Equipment/maintenanceCycle.vue b/src/views/basicData/Equipment/maintenanceCycle.vue
new file mode 100644
index 0000000..b6da598
--- /dev/null
+++ b/src/views/basicData/Equipment/maintenanceCycle.vue
@@ -0,0 +1,181 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-11 16:45:55
+ * @Description:
+-->
+<template>
+  <div class="app-container">
+    <div style="margin:10px 50px"><el-button type="primary" @click="addNew()">{{ 'btn.add' | i18nFilter }}</el-button></div>
+    <base-table
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    >
+      <method-btn
+        slot="handleBtn"
+        :width="trueWidth"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      @pagination="getList()"
+    />
+    <maintenanceCycle-add v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
+  </div>
+</template>
+
+<script>import i18n from '@/lang'
+import { maintenanceCycleList, maintenanceCycleDelete } from '@/api/basicData/Equipment/maintenanceCycle'
+import maintenanceCycleAdd from './components/maintenanceCycle-add.vue'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import { timeFormatter } from '@/filters'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+
+const tableBtn = [
+  {
+    type: 'edit',
+    btnName: 'btn.edit'
+  },
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  }
+]
+const tableProps = [
+  {
+    prop: 'createTime',
+    label: i18n.t('module.basicData.factory.createTime'),
+    filter: timeFormatter,
+    align: 'center'
+  },
+  {
+    prop: 'code',
+    label: i18n.t('module.basicData.equipment.PeriodCode'),
+    align: 'center'
+  },
+  {
+    prop: 'maintenancePeriod',
+    label: i18n.t('module.basicData.equipment.maintenancePeriod'),
+    align: 'center'
+  },
+  {
+    prop: 'remark',
+    label: i18n.t('module.basicData.visual.Remarks'),
+    align: 'center'
+  }
+]
+
+export default {
+  name: 'MaintenanceCycle',
+  components: { Pagination, BaseTable, MethodBtn, maintenanceCycleAdd },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      keyName: i18n.t('module.basicData.visual.keyword'),
+      addOrUpdateVisible: false,
+      tableBtn,
+      trueWidth: 200,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        current: 1,
+        size: 10
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    handleClick(raw) {
+      if (raw.type === 'delete') {
+        this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.maintenancePeriod}]?`, this.$t('module.basicData.visual.Tips'), {
+          confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+          cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+          type: 'warning'
+        }).then(() => {
+          maintenanceCycleDelete(raw.data.id).then(response => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+              }
+            })
+          })
+        }).catch(() => {})
+      } else {
+        this.addNew(raw.data.id)
+      }
+    },
+    getList(key) {
+      this.listLoading = true
+      this.listQuery.name = key
+      maintenanceCycleList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    },
+    // 新增 / 修改
+    addNew(id) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id)
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/basicData/Equipment/maintenanceType.vue b/src/views/basicData/Equipment/maintenanceType.vue
new file mode 100644
index 0000000..d45bd91
--- /dev/null
+++ b/src/views/basicData/Equipment/maintenanceType.vue
@@ -0,0 +1,194 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-11 16:46:03
+ * @Description:
+-->
+<template>
+  <div class="app-container">
+    <head-form
+      :placeholder-name="placeholderName"
+      :key-name="keyName"
+      @getDataList="getList"
+      @add="addNew"
+    />
+    <base-table
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    >
+      <method-btn
+        slot="handleBtn"
+        :width="trueWidth"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      @pagination="getList()"
+    />
+    <maintenanceType-add v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
+  </div>
+</template>
+
+<script>import i18n from '@/lang'
+import { maintenanceTypeList, maintenanceTypeDelete } from '@/api/basicData/Equipment/maintenanceType'
+import maintenanceTypeAdd from './components/maintenanceType-add.vue'
+import HeadForm from '@/components/basicData/HeadForm'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import { timeFormatter } from '@/filters'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+
+const tableBtn = [
+  {
+    type: 'edit',
+    btnName: 'btn.edit'
+  },
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  }
+]
+const tableProps = [
+  {
+    prop: 'createTime',
+    label: i18n.t('module.basicData.factory.createTime'),
+    filter: timeFormatter,
+    align: 'center'
+  },
+  {
+    prop: 'name',
+    label: i18n.t('module.basicData.equipment.RepairTypeName'),
+    align: 'center'
+  },
+  {
+    prop: 'code',
+    label: i18n.t('module.basicData.equipment.RepairTypeCode'),
+    align: 'center'
+  },
+  {
+    prop: 'enName',
+    label: i18n.t('module.basicData.visual.EnglishName'),
+    align: 'center'
+  },
+  {
+    prop: 'remark',
+    label: i18n.t('module.basicData.visual.Remarks'),
+    align: 'center'
+  }
+]
+
+export default {
+  name: 'MaintenanceType',
+  components: { Pagination, BaseTable, MethodBtn, HeadForm, maintenanceTypeAdd },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      keyName: i18n.t('module.basicData.visual.keyword'),
+      placeholderName: this.$t('module.basicData.equipment.RepairTypeName') + this.$t('module.basicData.visual.Or') + this.$t('module.basicData.equipment.RepairTypeCode'),
+      addOrUpdateVisible: false,
+      tableBtn,
+      trueWidth: 200,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        current: 1,
+        size: 10
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    handleClick(raw) {
+      if (raw.type === 'delete') {
+        this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`, this.$t('module.basicData.visual.Tips'), {
+          confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+          cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+          type: 'warning'
+        }).then(() => {
+          maintenanceTypeDelete(raw.data.id).then(response => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+              }
+            })
+          })
+        }).catch(() => {})
+      } else {
+        this.addNew(raw.data.id)
+      }
+    },
+    getList(key) {
+      this.listLoading = true
+      this.listQuery.name = key
+      this.listQuery.code = key
+      maintenanceTypeList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    },
+    // 新增 / 修改
+    addNew(id) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id)
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/basicData/Equipment/spareParts.vue b/src/views/basicData/Equipment/spareParts.vue
new file mode 100644
index 0000000..acb0e20
--- /dev/null
+++ b/src/views/basicData/Equipment/spareParts.vue
@@ -0,0 +1,197 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-18 10:38:35
+ * @Description:
+-->
+<template>
+  <div class="app-container">
+    <head-form
+      :placeholder-name="placeholderName"
+      :key-name="keyName"
+      @getDataList="getList"
+      @add="addNew"
+    />
+    <base-table
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    >
+      <method-btn
+        slot="handleBtn"
+        :width="trueWidth"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      @pagination="getList()"
+    />
+    <spareParts-add v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
+  </div>
+</template>
+
+<script>import i18n from '@/lang'
+import { sparePartsList, sparePartsDelete } from '@/api/basicData/Equipment/spareParts'
+import sparePartsAdd from './components/spareParts-add.vue'
+import HeadForm from '@/components/basicData/HeadForm'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+
+const tableBtn = [
+  {
+    type: 'edit',
+    btnName: 'btn.edit'
+  },
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  }
+]
+const tableProps = [
+  {
+    prop: 'code',
+    label: i18n.t('module.basicData.equipment.SparepartCode'),
+    align: 'center'
+  },
+  {
+    prop: 'name',
+    label: i18n.t('module.basicData.equipment.SparepartName'),
+    align: 'center'
+  },
+  {
+    prop: 'model',
+    label: i18n.t('module.basicData.equipment.SparepartModel'),
+    align: 'center'
+  },
+  {
+    prop: 'unit',
+    label: i18n.t('module.basicData.visual.unit'),
+    align: 'center'
+  },
+  {
+    prop: 'specifications',
+    label: i18n.t('module.basicData.visual.Specs'),
+    align: 'center'
+  },
+  {
+    prop: 'description',
+    label: i18n.t('module.basicData.visual.Remarks'),
+    align: 'center'
+  }
+]
+
+export default {
+  name: 'SpareParts',
+  components: { Pagination, BaseTable, MethodBtn, HeadForm, sparePartsAdd },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      keyName: i18n.t('module.basicData.visual.keyword'),
+      placeholderName: this.$t('module.basicData.equipment.SparepartName') + this.$t('module.basicData.visual.Or') + this.$t('module.basicData.equipment.SparepartCode'),
+      addOrUpdateVisible: false,
+      tableBtn,
+      trueWidth: 200,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        current: 1,
+        size: 10
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    handleClick(raw) {
+      console.log(raw)
+      if (raw.type === 'delete') {
+        this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`, this.$t('module.basicData.visual.Tips'), {
+          confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+          cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+          type: 'warning'
+        }).then(() => {
+          sparePartsDelete(raw.data.id).then(response => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+              }
+            })
+          })
+        }).catch(() => {})
+      } else {
+        this.addNew(raw.data.id)
+      }
+    },
+    getList(key) {
+      this.listLoading = true
+      this.listQuery.key = key
+      sparePartsList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    },
+    // 新增 / 修改
+    addNew(id) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id)
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/basicData/EquipmentScrapGrade.vue b/src/views/basicData/EquipmentScrapGrade.vue
new file mode 100644
index 0000000..c3baeea
--- /dev/null
+++ b/src/views/basicData/EquipmentScrapGrade.vue
@@ -0,0 +1,185 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-07-06 11:26:37
+ * @Description:
+-->
+<template>
+  <div class="app-container">
+    <head-form
+      :placeholder-name="placeholderName"
+      :key-name="keyName"
+      @getDataList="getList"
+      @add="addNew"
+    />
+    <base-table
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    >
+      <method-btn
+        slot="handleBtn"
+        :width="trueWidth"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      @pagination="getList()"
+    />
+    <Equipment-scrap-grade-add v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
+  </div>
+</template>
+
+<script>import i18n from '@/lang'
+import { EquipmentScrapGradeList, EquipmentScrapGradeDelete } from '@/api/basicData/EquipmentScrapGrade'
+import EquipmentScrapGradeAdd from './components/EquipmentScrapGrade-add.vue'
+import HeadForm from '@/components/basicData/HeadForm'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import { timeFormatter } from '@/filters'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+
+const tableBtn = [
+  {
+    type: 'edit',
+    btnName: 'btn.edit'
+  },
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  }
+]
+const tableProps = [
+  {
+    prop: 'createTime',
+    label: i18n.t('module.basicData.factory.createTime'),
+    filter: timeFormatter,
+    align: 'center'
+  },
+  {
+    prop: 'name',
+    label: i18n.t('module.basicData.equipment.EquipmentName'),
+    align: 'center'
+  },
+  {
+    prop: 'dataName',
+    label: i18n.t('module.basicData.EquipmentScrapGrade.ScrapGrade'),
+    align: 'center'
+  }
+]
+
+export default {
+  name: 'EquipmentScrapGrade',
+  components: { Pagination, BaseTable, MethodBtn, HeadForm, EquipmentScrapGradeAdd },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      keyName: i18n.t('module.basicData.visual.keyword'),
+      placeholderName: this.$t('module.basicData.EquipmentScrapGrade.keyword'),
+      addOrUpdateVisible: false,
+      tableBtn,
+      trueWidth: 200,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        current: 1,
+        size: 10,
+        name: ''
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    handleClick(raw) {
+      console.log(raw)
+      if (raw.type === 'delete') {
+        this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`, this.$t('module.basicData.visual.Tips'), {
+          confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+          cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+          type: 'warning'
+        }).then(() => {
+          EquipmentScrapGradeDelete(raw.data.id).then(response => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+              }
+            })
+          })
+        }).catch(() => {})
+      } else {
+        this.addNew(raw.data.id)
+      }
+    },
+    getList(key) {
+      this.listLoading = true
+      this.listQuery.name = key
+      EquipmentScrapGradeList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    },
+    // 新增 / 修改
+    addNew(id) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id)
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/basicData/FactoryManagement/Factory.vue b/src/views/basicData/FactoryManagement/Factory.vue
new file mode 100644
index 0000000..8f0b522
--- /dev/null
+++ b/src/views/basicData/FactoryManagement/Factory.vue
@@ -0,0 +1,198 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-11 16:46:50
+ * @Description:
+-->
+<template>
+  <div class="app-container">
+    <head-form
+      :placeholder-name="placeholderName"
+      :key-name="keyName"
+      @getDataList="getList"
+      @add="addNew"
+    />
+    <base-table
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    >
+      <method-btn
+        slot="handleBtn"
+        :width="trueWidth"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      @pagination="getList()"
+    />
+    <Factory-add v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
+  </div>
+</template>
+
+<script>
+import { factoryList, factoryDelete } from '@/api/basicData/FactoryManagement/factory'
+import FactoryAdd from './components/Factory-add.vue'
+import HeadForm from '@/components/basicData/HeadForm'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import { timeFormatter } from '@/filters'
+import i18n from '@/lang'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+
+const tableBtn = [
+  {
+    type: 'edit',
+    btnName: 'btn.edit'
+  },
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  }
+]
+const tableProps = [
+  {
+    prop: 'createTime',
+    label: i18n.t('module.basicData.factory.createTime'),
+    filter: timeFormatter,
+    align: 'center'
+  },
+  {
+    prop: 'name',
+    label: i18n.t('module.basicData.factory.FactoryName'),
+    align: 'center'
+  },
+  {
+    prop: 'code',
+    label: i18n.t('module.basicData.factory.FactoryCode'),
+    align: 'center'
+  },
+  {
+    prop: 'address',
+    label: i18n.t('module.basicData.factory.Address'),
+    align: 'center'
+  },
+  {
+    prop: 'description',
+    label: i18n.t('module.basicData.visual.Remarks'),
+    align: 'center'
+  }
+]
+
+export default {
+  name: 'Factory',
+  components: { Pagination, BaseTable, MethodBtn, HeadForm, FactoryAdd },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      keyName: i18n.t('module.basicData.visual.keyword'),
+      placeholderName: this.$t('module.basicData.factory.placeholderName'),
+      addOrUpdateVisible: false,
+      tableBtn,
+      trueWidth: 200,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        current: 1,
+        size: 10,
+        name: '',
+        code: ''
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    handleClick(raw) {
+      console.log(raw)
+      if (raw.type === 'delete') {
+        this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`, this.$t('module.basicData.visual.Tips'), {
+          confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+          cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+          type: 'warning'
+        }).then(() => {
+          factoryDelete(raw.data.id).then(response => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+              }
+            })
+          })
+        }).catch(() => {})
+      } else {
+        this.addNew(raw.data.id)
+      }
+    },
+    getList(key) {
+      this.listLoading = true
+      this.listQuery.name = key
+      this.listQuery.code = key
+      factoryList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    },
+    // 新增 / 修改
+    addNew(id) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id)
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/basicData/FactoryManagement/components/Factory-add.vue b/src/views/basicData/FactoryManagement/components/Factory-add.vue
new file mode 100644
index 0000000..6b2fe70
--- /dev/null
+++ b/src/views/basicData/FactoryManagement/components/Factory-add.vue
@@ -0,0 +1,125 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-04-12 16:24:32
+ * @Description:
+-->
+<template>
+  <el-dialog
+    :title="!dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter"
+    :visible.sync="visible"
+  >
+    <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="120px" @keyup.enter.native="dataFormSubmit()">
+      <el-form-item :label="$t('module.basicData.factory.FactoryName')" prop="name">
+        <el-input v-model="dataForm.name" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.factory.FactoryName')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.factory.FactoryCode')" prop="code">
+        <el-input v-model="dataForm.code" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.factory.FactoryCode')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.factory.Address')" prop="address">
+        <el-input v-model="dataForm.address" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.factory.Address')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.visual.Remarks')" prop="description">
+        <el-input v-model="dataForm.description" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Remarks')])" clearable />
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { factoryDetail, factoryUpdate, factoryAdd, factoryCode } from '@/api/basicData/FactoryManagement/factory'
+
+export default {
+  data() {
+    return {
+      visible: false,
+      dataForm: {
+        id: 0,
+        name: '',
+        code: '',
+        address: '',
+        description: ''
+      },
+      dataRule: {
+        name: [
+          {
+            required: true,
+            message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.factory.FactoryName')]),
+            trigger: 'blur' }
+        ],
+        code: [
+          {
+            required: true,
+            message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.factory.FactoryCode')]),
+            trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    init(id) {
+      this.dataForm.id = id || ''
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          factoryDetail(this.dataForm.id).then(res => {
+            this.dataForm.name = res.data.name
+            this.dataForm.code = res.data.code
+            this.dataForm.address = res.data.address
+            this.dataForm.description = res.data.description
+          })
+        } else {
+          factoryCode().then(res => {
+            this.dataForm.code = res.data
+          })
+        }
+      })
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          const data = {
+            'name': this.dataForm.name,
+            'code': this.dataForm.code,
+            'address': this.dataForm.address,
+            'description': this.dataForm.description,
+            'id': this.dataForm.id
+          }
+          if (this.dataForm.id) {
+            factoryUpdate(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          } else {
+            factoryAdd(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          }
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/basicData/FactoryManagement/components/product-line-add.vue b/src/views/basicData/FactoryManagement/components/product-line-add.vue
new file mode 100644
index 0000000..c1d8a36
--- /dev/null
+++ b/src/views/basicData/FactoryManagement/components/product-line-add.vue
@@ -0,0 +1,149 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-25 16:25:31
+ * @Description:
+-->
+<template>
+  <el-dialog
+    :title="!dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter"
+    :visible.sync="visible"
+  >
+    <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="170px" @keyup.enter.native="dataFormSubmit()">
+      <el-form-item :label="$t('module.basicData.productLine.placeholderName')" prop="name">
+        <el-input v-model="dataForm.name" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.productLine.placeholderName')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.productLine.ProductionLineCode')" prop="code">
+        <el-input v-model="dataForm.code" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.productLine.ProductionLineCode')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.factory.FactoryName')" prop="factoryId">
+        <el-select v-model="dataForm.factoryId" filterable :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.factory.FactoryName')])" clearable>
+          <el-option
+            v-for="item in factoryArr"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item v-if="dataForm.id" :label="$t('module.basicData.visual.CurrentState')" prop="enabled">
+        <el-switch
+          v-model="dataForm.enabled"
+          :active-value="1"
+          :inactive-value="0"
+          active-color="#13ce66"
+          inactive-color="#AAAAAA"
+        />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.visual.Description')" prop="description">
+        <el-input v-model="dataForm.description" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Description')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.visual.Remarks')" prop="remark">
+        <el-input v-model="dataForm.remark" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Remarks')])" clearable />
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { lineDetail, lineUpdate, lineAdd, lineCode } from '@/api/basicData/FactoryManagement/line'
+import { factoryList } from '@/api/basicData/FactoryManagement/factory'
+
+export default {
+  data() {
+    return {
+      visible: false,
+      factoryArr: [],
+      dataForm: {
+        id: 0,
+        name: '',
+        code: '',
+        factoryId: '',
+        description: '',
+        remark: ''
+      },
+      dataRule: {
+        name: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.productLine.placeholderName')]), trigger: 'blur' }
+        ],
+        code: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.productLine.ProductionLineCode')]), trigger: 'blur' }
+        ],
+        factoryId: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.factory.FactoryName')]), trigger: 'change' }
+        ]
+      }
+    }
+  },
+  methods: {
+    init(id) {
+      lineCode().then(res => {
+        this.dataForm.code = res.data
+      })
+      factoryList({
+        current: 1,
+        size: 999,
+        name: ''
+      }).then(response => {
+        this.factoryArr = response.data.records
+      })
+      this.dataForm.id = id || ''
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          lineDetail(this.dataForm.id).then(res => {
+            this.dataForm = res.data
+          })
+        }
+      })
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          const data = {
+            'name': this.dataForm.name,
+            'code': this.dataForm.code,
+            'factoryId': this.dataForm.factoryId,
+            'description': this.dataForm.description,
+            'remark': this.dataForm.remark,
+            'enabled': this.dataForm.enabled,
+            'id': this.dataForm.id
+          }
+          if (this.dataForm.id) {
+            lineUpdate(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          } else {
+            lineAdd(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          }
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/basicData/FactoryManagement/components/work-section-add.vue b/src/views/basicData/FactoryManagement/components/work-section-add.vue
new file mode 100644
index 0000000..3215b7e
--- /dev/null
+++ b/src/views/basicData/FactoryManagement/components/work-section-add.vue
@@ -0,0 +1,145 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-25 16:25:44
+ * @Description:
+-->
+<template>
+  <el-dialog
+    :title="!dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter"
+    :visible.sync="visible"
+  >
+    <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="160px" @keyup.enter.native="dataFormSubmit()">
+      <el-form-item :label="$t('module.basicData.workSection.SectionName')" prop="name">
+        <el-input v-model="dataForm.name" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.workSection.SectionName')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.workSection.WorkSectionCoding')" prop="code">
+        <el-input v-model="dataForm.code" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.workSection.WorkSectionCoding')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.productLine.placeholderName')" prop="productionLineId">
+        <el-select v-model="dataForm.productionLineId" filterable :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.productLine.placeholderName')])" clearable>
+          <el-option
+            v-for="item in factoryArr"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.visual.Description')" prop="description">
+        <el-input v-model="dataForm.description" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Description')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.visual.Remarks')" prop="remark">
+        <el-input v-model="dataForm.remark" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Remarks')])" clearable />
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { sectionDetail, sectionUpdate, sectionAdd, sectionCode } from '@/api/basicData/FactoryManagement/section'
+import { lineList } from '@/api/basicData/FactoryManagement/line'
+
+export default {
+  data() {
+    return {
+      visible: false,
+      factoryArr: [],
+      dataForm: {
+        id: 0,
+        name: '',
+        code: '',
+        productionLineId: '',
+        description: '',
+        remark: ''
+      },
+      dataRule: {
+        name: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.workSection.SectionName')]), trigger: 'blur' }
+        ],
+        code: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.workSection.WorkSectionCoding')]), trigger: 'blur' }
+        ],
+        productionLineId: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.productLine.placeholderName')]),
+          trigger: 'change'
+        }]
+      }
+    }
+  },
+  methods: {
+    init(id) {
+      sectionCode().then(res => {
+        this.dataForm.code = res.data
+      })
+      lineList({
+        current: 1,
+        size: 999,
+        name: ''
+      }).then(response => {
+        this.factoryArr = response.data.records
+      })
+      this.dataForm.id = id || ''
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          sectionDetail(this.dataForm.id).then(res => {
+            this.dataForm.name = res.data.name
+            this.dataForm.code = res.data.code
+            this.dataForm.productionLineId = res.data.productionLineId
+            this.dataForm.description = res.data.description
+            this.dataForm.remark = res.data.remark
+          })
+        }
+      })
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          const data = {
+            'name': this.dataForm.name,
+            'code': this.dataForm.code,
+            'productionLineId': this.dataForm.productionLineId,
+            'description': this.dataForm.description,
+            'remark': this.dataForm.remark,
+            'id': this.dataForm.id
+          }
+          if (this.dataForm.id) {
+            sectionUpdate(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          } else {
+            sectionAdd(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          }
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/basicData/FactoryManagement/product-line.vue b/src/views/basicData/FactoryManagement/product-line.vue
new file mode 100644
index 0000000..5f46320
--- /dev/null
+++ b/src/views/basicData/FactoryManagement/product-line.vue
@@ -0,0 +1,207 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-11 16:47:00
+ * @Description:
+-->
+<template>
+  <div class="app-container">
+    <head-form
+      :placeholder-name="placeholderName"
+      :key-name="keyName"
+      @getDataList="getList"
+      @add="addNew"
+    />
+    <base-table
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    >
+      <method-btn
+        slot="handleBtn"
+        :width="trueWidth"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      @pagination="getList()"
+    />
+    <product-line-add v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
+  </div>
+</template>
+
+<script>import i18n from '@/lang'
+import { lineList, lineDelete } from '@/api/basicData/FactoryManagement/line'
+import productLineAdd from './components/product-line-add.vue'
+import HeadForm from '@/components/basicData/HeadForm'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import { timeFormatter } from '@/filters'
+import dataDict from '@/filters/DataDict'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+
+const tableBtn = [
+  {
+    type: 'edit',
+    btnName: 'btn.edit'
+  },
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  }
+]
+const tableProps = [
+  {
+    prop: 'createTime',
+    label: i18n.t('module.basicData.factory.createTime'),
+    filter: timeFormatter,
+    align: 'center'
+  },
+  {
+    prop: 'name',
+    label: i18n.t('module.basicData.productLine.placeholderName'),
+    align: 'center'
+  },
+  {
+    prop: 'code',
+    label: i18n.t('module.basicData.productLine.ProductionLineCode'),
+    align: 'center'
+  },
+  {
+    prop: 'factoryName',
+    label: i18n.t('module.basicData.factory.FactoryName'),
+    align: 'center'
+  },
+  {
+    prop: 'enabled',
+    label: i18n.t('module.basicData.visual.CurrentState'),
+    filter: dataDict('enableState'),
+    align: 'center'
+  },
+  {
+    prop: 'description',
+    label: i18n.t('module.basicData.visual.Description'),
+    align: 'center'
+  },
+  {
+    prop: 'remark',
+    label: i18n.t('module.basicData.visual.Remarks'),
+    align: 'center'
+  }
+]
+
+export default {
+  name: 'ProductLine',
+  components: { Pagination, BaseTable, MethodBtn, HeadForm, productLineAdd },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      keyName: i18n.t('module.basicData.visual.keyword'),
+      placeholderName: this.$t('module.basicData.productLine.placeholderName'),
+      addOrUpdateVisible: false,
+      tableBtn,
+      trueWidth: 200,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        current: 1,
+        size: 10,
+        name: ''
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    handleClick(raw) {
+      console.log(raw)
+      if (raw.type === 'delete') {
+        this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`, this.$t('module.basicData.visual.Tips'), {
+          confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+          cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+          type: 'warning'
+        }).then(() => {
+          lineDelete(raw.data.id).then(response => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+              }
+            })
+          })
+        }).catch(() => {})
+      } else {
+        this.addNew(raw.data.id)
+      }
+    },
+    getList(key) {
+      this.listLoading = true
+      this.listQuery.name = key
+      lineList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    },
+    // 新增 / 修改
+    addNew(id) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id)
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/basicData/FactoryManagement/work-section.vue b/src/views/basicData/FactoryManagement/work-section.vue
new file mode 100644
index 0000000..4628a62
--- /dev/null
+++ b/src/views/basicData/FactoryManagement/work-section.vue
@@ -0,0 +1,199 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-11 16:47:09
+ * @Description:
+-->
+<template>
+  <div class="app-container">
+    <head-form
+      :placeholder-name="placeholderName"
+      :key-name="keyName"
+      @getDataList="getList"
+      @add="addNew"
+    />
+    <base-table
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    >
+      <method-btn
+        slot="handleBtn"
+        :width="trueWidth"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      @pagination="getList()"
+    />
+    <work-section-add v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
+  </div>
+</template>
+
+<script>import i18n from '@/lang'
+import { sectionList, sectionDelete } from '@/api/basicData/FactoryManagement/section'
+import workSectionAdd from './components/work-section-add.vue'
+import HeadForm from '@/components/basicData/HeadForm'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import { timeFormatter } from '@/filters'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+
+const tableBtn = [
+  {
+    type: 'edit',
+    btnName: 'btn.edit'
+  },
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  }
+]
+const tableProps = [
+  {
+    prop: 'createTime',
+    label: i18n.t('module.basicData.factory.createTime'),
+    filter: timeFormatter,
+    align: 'center'
+  },
+  {
+    prop: 'name',
+    label: i18n.t('module.basicData.workSection.SectionName'),
+    align: 'center'
+  },
+  {
+    prop: 'code',
+    label: i18n.t('module.basicData.workSection.WorkSectionCoding'),
+    align: 'center'
+  },
+  {
+    prop: 'productionLine',
+    label: i18n.t('module.basicData.productLine.placeholderName'),
+    align: 'center'
+  },
+  {
+    prop: 'description',
+    label: i18n.t('module.basicData.visual.Description'),
+    align: 'center'
+  },
+  {
+    prop: 'remark',
+    label: i18n.t('module.basicData.visual.Remarks'),
+    align: 'center'
+  }
+]
+
+export default {
+  name: 'WorkSection',
+  components: { Pagination, BaseTable, MethodBtn, HeadForm, workSectionAdd },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      keyName: i18n.t('module.basicData.visual.keyword'),
+      placeholderName: this.$t('module.basicData.workSection.SectionName'),
+      addOrUpdateVisible: false,
+      tableBtn,
+      trueWidth: 200,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        current: 1,
+        size: 10
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    handleClick(raw) {
+      console.log(raw)
+      if (raw.type === 'delete') {
+        this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`, this.$t('module.basicData.visual.Tips'), {
+          confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+          cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+          type: 'warning'
+        }).then(() => {
+          sectionDelete(raw.data.id).then(response => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+              }
+            })
+          })
+        }).catch(() => {})
+      } else {
+        this.addNew(raw.data.id)
+      }
+    },
+    getList(key) {
+      this.listLoading = true
+      this.listQuery.name = key
+      sectionList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    },
+    // 新增 / 修改
+    addNew(id) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id)
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/basicData/GroupModule/components/group-add.vue b/src/views/basicData/GroupModule/components/group-add.vue
new file mode 100644
index 0000000..b6ac300
--- /dev/null
+++ b/src/views/basicData/GroupModule/components/group-add.vue
@@ -0,0 +1,282 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-04-07 14:53:04
+ * @Description:
+-->
+<template>
+  <el-dialog
+    :title="isdetail? 'btn.detail' : !groupData.id ? 'btn.add' : 'btn.edit' | i18nFilter"
+    :close-on-click-modal="false"
+    :before-close="handleClose"
+    width="70%"
+    :visible.sync="visible"
+  >
+    <el-form
+      ref="groupForm"
+      :model="groupData"
+      :rules="rules"
+      size="medium"
+      label-width="120px"
+    >
+      <el-row>
+        <el-col :span="6">
+          <el-form-item :label="$t('module.basicData.group.TeamName')" prop="name">
+            <el-input v-model="groupData.name" :disabled="isdetail" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.group.TeamName')])" clearable :style="{width: '100%'}" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item :label="$t('module.basicData.group.GroupLeader')" prop="teamLeaderId">
+            <el-select
+              v-model="groupData.teamLeaderId"
+              :disabled="isdetail"
+              :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.group.GroupLeader')])"
+              filterable
+              clearable
+              :style="{width: '100%'}"
+            >
+              <el-option
+                v-for="(item) in groupArr"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label-width="100px" :label="$t('module.basicData.group.TeamStatus')" prop="workStatus">
+            <el-switch
+              v-model="groupData.workStatus"
+              :disabled="isdetail"
+              :active-value="1"
+              :inactive-value="0"
+              active-color="#13ce66"
+              inactive-color="#AAAAAA"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label-width="50px">
+            <el-button v-if="isdetail" type="primary" @click="goEdit()">{{ 'btn.edit' | i18nFilter }}</el-button>
+            <div v-if="!isdetail">
+              <el-button type="primary" @click="handelConfirm">{{ 'btn.confirm' | i18nFilter }}</el-button>
+            </div>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <div v-if="!isdetail">
+        <el-button v-if="listQuery.teamId" type="primary" icon="el-icon-user" size="medium" @click="addNew()"> {{ 'btn.addgroup' | i18nFilter }} </el-button>
+      </div>
+    </el-form>
+    <base-table
+      v-if="listQuery.teamId"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    >
+      <method-btn
+        v-if="!isdetail"
+        slot="handleBtn"
+        :width="trueWidth"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <group-member v-if="addOrUpdateVisible" ref="addOrUpdate" :team-id="listQuery.teamId" @refreshDataList="getList" />
+  </el-dialog>
+</template>
+
+<script>import i18n from '@/lang'
+import { groupDetail, groupUpdate, groupAdd, groupCode } from '@/api/basicData/GroupModule/group'
+import { groupAttrList, groupAttrDelete } from '@/api/basicData/GroupModule/groupAttr'
+import { staffList } from '@/api/basicData/GroupModule/staff'
+import BaseTable from '@/components/BaseTable'
+import groupMember from './group-member.vue'
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+
+const tableBtn = [
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  }
+]
+const tableProps = [
+  {
+    prop: 'name',
+    label: i18n.t('module.basicData.staff.Name'),
+    align: 'center'
+  },
+  {
+    prop: 'majorArr',
+    label: i18n.t('module.basicData.staff.Profession'),
+    align: 'center'
+  },
+  {
+    prop: 'telephone',
+    label: i18n.t('module.basicData.staff.Telephone'),
+    align: 'center'
+  },
+  {
+    prop: 'workshop',
+    label: i18n.t('module.basicData.staff.Workshop'),
+    align: 'center'
+  }
+]
+
+export default {
+  components: { BaseTable, MethodBtn, groupMember },
+  data() {
+    return {
+      visible: false,
+      addOrUpdateVisible: false,
+      tableBtn,
+      trueWidth: 100,
+      isdetail: false,
+      tableProps,
+      listLoading: false,
+      list: [],
+      groupArr: [],
+      groupData: {
+        id: 0,
+        name: '',
+        teamLeaderId: '',
+        workStatus: 1,
+        code: ''
+      },
+      rules: {
+        name: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.group.TeamName')]),
+          trigger: 'blur'
+        }],
+        teamLeaderId: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.group.GroupLeader')]),
+          trigger: 'change'
+        }]
+      },
+      listQuery: {
+        current: 1,
+        size: 999,
+        teamId: '',
+        key: ''
+      }
+    }
+  },
+  methods: {
+    init(id, isdetail) {
+      this.isdetail = false
+      this.isdetail = isdetail
+      staffList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.groupArr = response.data.records
+        } else {
+          this.groupArr.splice(0, this.list.length)
+        }
+      })
+      this.groupData.id = id || ''
+      this.listQuery.teamId = ''
+      this.list.splice(0, this.list.length)
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['groupForm'].resetFields()
+        if (this.groupData.id) {
+          this.listQuery.teamId = this.groupData.id
+          groupDetail(this.groupData.id).then(res => {
+            this.groupData = res.data
+            this.getList()
+          })
+        } else {
+          groupCode().then(res => {
+            this.groupData.code = res.data
+          })
+        }
+      })
+    },
+    getList() {
+      groupAttrList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+          this.list.forEach(item => {
+            if (item.major) { item.majorArr = item.major.toString() }
+          })
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+      })
+    },
+    handleClick(raw) {
+      if (raw.type === 'delete') {
+        this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`, this.$t('module.basicData.visual.Tips'), {
+          confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+          cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+          type: 'warning'
+        }).then(() => {
+          const data = {
+            teamId: this.listQuery.teamId,
+            workerId: raw.data.id
+          }
+          groupAttrDelete(data).then(response => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+              }
+            })
+          })
+        }).catch(() => {})
+      }
+    },
+    // 表单提交
+    handelConfirm() {
+      this.$refs['groupForm'].validate((valid) => {
+        if (valid) {
+          const data = this.groupData
+          if (this.groupData.id) {
+            groupUpdate(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          } else {
+            groupAdd(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500
+              })
+              this.groupData.id = res.data.id
+              this.listQuery.teamId = res.data.id
+            })
+          }
+        }
+      })
+    },
+    handleClose() {
+      this.visible = false
+      this.$emit('refreshDataList')
+    },
+    goEdit() {
+      this.isdetail = false
+    },
+    // 新增
+    addNew() {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(this.groupData.teamLeaderId)
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/basicData/GroupModule/components/group-member.vue b/src/views/basicData/GroupModule/components/group-member.vue
new file mode 100644
index 0000000..6e75496
--- /dev/null
+++ b/src/views/basicData/GroupModule/components/group-member.vue
@@ -0,0 +1,227 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-31 16:21:04
+ * @Description:
+-->
+<template>
+  <el-dialog
+    :title="'btn.add' | i18nFilter"
+    :visible.sync="visible"
+    :before-close="goback"
+    :append-to-body="true"
+    width="80%"
+  ><el-form
+     :model="listQuery"
+     :inline="true"
+     size="medium"
+     label-width="80px"
+   >
+     <el-form-item :label="$t('module.basicData.staff.Name')" prop="key">
+       <el-input v-model="listQuery.key" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.staff.Name')])" style="width:200px" clearable />
+     </el-form-item>
+     <el-form-item>
+       <el-button type="primary" @click="getList()"> {{ 'btn.search' | i18nFilter }} </el-button>
+     </el-form-item>
+   </el-form>
+    <base-table
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    >
+      <method-btn
+        slot="handleBtn"
+        :width="trueWidth"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      @pagination="getList()"
+    />
+  </el-dialog>
+</template>
+
+<script>import i18n from '@/lang'
+import { workerList } from '@/api/basicData/GroupModule/staff'
+import { groupAttrAdd } from '@/api/basicData/GroupModule/groupAttr'
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import BaseTable from '@/components/BaseTable'
+import basicData from '@/filters/basicData'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import { timeFormatter } from '@/filters'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+
+const tableBtn = [
+  {
+    type: 'add',
+    btnName: 'btn.addgroup'
+  }
+]
+const tableProps = [
+  {
+    prop: 'createTime',
+    label: i18n.t('module.basicData.factory.createTime'),
+    filter: timeFormatter,
+    align: 'center'
+  },
+  {
+    prop: 'name',
+    label: i18n.t('module.basicData.staff.Name'),
+    align: 'center'
+  },
+  {
+    prop: 'code',
+    label: i18n.t('module.basicData.staff.EmployeeID'),
+    align: 'center'
+  },
+  {
+    prop: 'sex',
+    label: i18n.t('module.basicData.staff.Gender'),
+    filter: basicData('sex'),
+    align: 'center'
+  },
+  {
+    prop: 'entryTime',
+    label: i18n.t('module.basicData.staff.EntryTime'),
+    align: 'center'
+  },
+  {
+    prop: 'telephone',
+    label: i18n.t('module.basicData.staff.Telephone'),
+    align: 'center'
+  },
+  {
+    prop: 'wechatCode',
+    label: i18n.t('module.basicData.staff.Wechat'),
+    align: 'center'
+  },
+  {
+    prop: 'majorArr',
+    label: i18n.t('module.basicData.staff.Profession'),
+    align: 'center'
+  },
+  {
+    prop: 'workshop',
+    label: i18n.t('module.basicData.staff.Workshop'),
+    align: 'center'
+  },
+  {
+    prop: 'onDuty',
+    label: i18n.t('module.basicData.staff.onDuty'),
+    filter: basicData('onDuty'),
+    align: 'center'
+  }
+]
+
+export default {
+  name: '',
+  components: { Pagination, BaseTable, MethodBtn },
+  props: {
+    teamId: {
+      type: String,
+      default: () => {
+        return ''
+      }
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      tableProps,
+      tableBtn,
+      trueWidth: 200,
+      list: [],
+      total: 0,
+      teamLeaderId: '',
+      listLoading: true,
+      listQuery: {
+        current: 1,
+        size: 10,
+        teamId: '',
+        key: ''
+      }
+    }
+  },
+  methods: {
+    init(id) {
+      this.visible = true
+      this.teamLeaderId = id
+      this.listQuery.teamId = this.teamId
+      this.getList()
+    },
+    getList() {
+      this.listLoading = true
+      workerList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+          this.list.forEach(item => {
+            if (item.major) { item.majorArr = item.major.toString() }
+          })
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    },
+    handleClick(raw) {
+      if (raw.type === 'add') {
+        const data = {
+          'workerId': raw.data.id,
+          'name': raw.data.name,
+          'teamId': this.teamId,
+          'current': this.listQuery.current,
+          'size': this.listQuery.size
+        }
+        groupAttrAdd(data).then(res => {
+          this.$message({
+            message: this.$t('module.basicData.visual.success'),
+            type: 'success',
+            duration: 1500,
+            onClose: () => {
+              this.getList()
+            }
+          })
+        })
+      }
+    },
+    goback() {
+      this.visible = false
+      this.$emit('refreshDataList')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/basicData/GroupModule/components/major-add.vue b/src/views/basicData/GroupModule/components/major-add.vue
new file mode 100644
index 0000000..20d70c1
--- /dev/null
+++ b/src/views/basicData/GroupModule/components/major-add.vue
@@ -0,0 +1,118 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-25 16:26:22
+ * @Description:
+-->
+<template>
+  <el-dialog
+    :title="!dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter"
+    :visible.sync="visible"
+  >
+    <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="160px" @keyup.enter.native="dataFormSubmit()">
+      <el-form-item :label="$t('module.basicData.major.ProfessionalName')" prop="name">
+        <el-input v-model="dataForm.name" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.major.ProfessionalName')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.major.ProfessionalCoding')" prop="code">
+        <el-input v-model="dataForm.code" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.major.ProfessionalCoding')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.visual.Abbreviation')" prop="abbreviation">
+        <el-input v-model="dataForm.abbreviation" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Abbreviation')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.visual.Remarks')" prop="description">
+        <el-input v-model="dataForm.description" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Remarks')])" clearable />
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { majorDetail, majorUpdate, majorAdd, majorCode } from '@/api/basicData/GroupModule/major'
+
+export default {
+  data() {
+    return {
+      visible: false,
+      dataForm: {
+        id: 0,
+        name: '',
+        code: '',
+        description: '',
+        abbreviation: ''
+      },
+      dataRule: {
+        name: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.major.ProfessionalName')]), trigger: 'blur' }
+        ],
+        code: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.major.ProfessionalCoding')]), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    init(id) {
+      majorCode().then(res => {
+        this.dataForm.code = res.data
+      })
+      this.dataForm.id = id || ''
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          majorDetail(this.dataForm.id).then(res => {
+            this.dataForm.name = res.data.name
+            this.dataForm.code = res.data.code
+            this.dataForm.description = res.data.description
+            this.dataForm.abbreviation = res.data.abbreviation
+          })
+        }
+      })
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          const data = {
+            'name': this.dataForm.name,
+            'code': this.dataForm.code,
+            'description': this.dataForm.description,
+            'abbreviation': this.dataForm.abbreviation,
+            'id': this.dataForm.id
+          }
+          if (this.dataForm.id) {
+            majorUpdate(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          } else {
+            majorAdd(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          }
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/basicData/GroupModule/components/staff-add.vue b/src/views/basicData/GroupModule/components/staff-add.vue
new file mode 100644
index 0000000..9a7c6e0
--- /dev/null
+++ b/src/views/basicData/GroupModule/components/staff-add.vue
@@ -0,0 +1,281 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-04-17 16:33:37
+ * @Description:
+-->
+<template>
+  <el-dialog
+    :title="!staffData.id ? 'btn.add' : 'btn.edit' | i18nFilter"
+    :visible.sync="visible"
+  >
+    <el-row :gutter="15">
+      <el-form
+        ref="staffForm"
+        :model="staffData"
+        :rules="rules"
+        size="medium"
+        label-width="110px"
+      >
+        <el-col :span="10">
+          <el-row>
+            <el-col :span="20">
+              <el-form-item :label="$t('module.basicData.staff.Name')" prop="name">
+                <el-input v-model="staffData.name" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.staff.Name')])" clearable :style="{width: '100%'}" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="20">
+              <el-form-item :label="$t('module.basicData.staff.role')" prop="roleId">
+                <el-select v-model="staffData.roleId">
+                  <el-option v-for="item in roleList" :key="item.id" :value="item.id" :label="item.dataName" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="20">
+              <el-form-item :label="$t('module.basicData.staff.Gender')" prop="sex">
+                <el-select v-model="staffData.sex" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.staff.Gender')])" clearable :style="{width: '100%'}">
+                  <el-option
+                    v-for="(item, index) in sexOptions"
+                    :key="index"
+                    :label="item.label"
+                    :value="item.value"
+                    :disabled="item.disabled"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="20">
+              <el-form-item :label="$t('module.basicData.staff.Telephone')" prop="telephone">
+                <el-input
+                  v-model="staffData.telephone"
+                  :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.staff.Telephone')])"
+                  clearable
+                  prefix-icon="el-icon-phone"
+                  :style="{width: '100%'}"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="20">
+              <el-form-item :label="$t('module.basicData.staff.Email')" prop="email">
+                <el-input v-model="staffData.email" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.staff.Email')])" clearable :style="{width: '100%'}" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="20">
+              <el-form-item :label="$t('module.basicData.staff.Profession')" prop="majorId">
+                <el-select
+                  v-model="staffData.majorId"
+                  :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.staff.Profession')])"
+                  multiple
+                  filterable
+                  clearable
+                  :style="{width: '100%'}"
+                >
+                  <el-option
+                    v-for="(item, index) in majorArr"
+                    :key="index"
+                    :label="item.name"
+                    :value="item.id"
+                    :disabled="item.disabled"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-col>
+        <el-col :span="10">
+          <el-row>
+            <el-col :span="20">
+              <el-form-item :label="$t('module.basicData.staff.EmployeeID')" prop="code">
+                <el-input v-model="staffData.code" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.staff.EmployeeID')])" clearable :style="{width: '100%'}" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="20">
+              <el-form-item :label="$t('module.basicData.staff.Wechat')" prop="wechatCode">
+                <el-input v-model="staffData.wechatCode" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.staff.Wechat')])" clearable :style="{width: '100%'}" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="20">
+              <el-form-item :label="$t('module.basicData.staff.EntryTime')" prop="entryTime">
+                <el-date-picker
+                  v-model="staffData.entryTime"
+                  :style="{width: '100%'}"
+                  :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.staff.EntryTime')])"
+                  clearable
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="20">
+              <el-form-item :label="$t('module.basicData.staff.Workshop')" prop="workshop">
+                <el-input v-model="staffData.workshop" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.staff.Workshop')])" clearable :style="{width: '100%'}" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="20">
+              <el-form-item :label="$t('module.basicData.staff.onDuty')" prop="onDuty">
+                <el-radio-group v-model="staffData.onDuty" size="medium">
+                  <el-radio
+                    v-for="(item, index) in onDutyOptions"
+                    :key="index"
+                    :label="item.value"
+                    :disabled="item.disabled"
+                  >{{ item.label }}</el-radio>
+                </el-radio-group>
+              </el-form-item>
+            </el-col>
+            <el-col :span="20">
+              <el-form-item :label="$t('module.basicData.visual.Remarks')" prop="description">
+                <el-input v-model="staffData.description" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Remarks')])" clearable :style="{width: '100%'}" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-col>
+      </el-form>
+    </el-row>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+      <el-button type="primary" size="medium" @click="staffDataSubmit()"> {{ 'btn.save' | i18nFilter }} </el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { staffDetail, staffUpdate, staffAdd, staffCode } from '@/api/basicData/GroupModule/staff'
+import { majorList } from '@/api/basicData/GroupModule/major'
+
+export default {
+  props: {
+    roleList: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      majorArr: [],
+      staffData: {
+        name: undefined,
+        sex: '',
+        telephone: '',
+        email: '',
+        majorId: [],
+        description: undefined,
+        code: undefined,
+        wechatCode: undefined,
+        entryTime: null,
+        workshop: undefined,
+        onDuty: 1,
+        roleId: null
+      },
+      rules: {
+        name: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.staff.Name')]),
+          trigger: 'blur'
+        }],
+        telephone: [{
+          pattern: /(^1\d{10}$)|(^[0-9]\d{7}$)/,
+          message: this.$t('module.basicData.staff.Telephone') + this.$t('module.basicData.customer.format'),
+          trigger: 'blur'
+        }],
+        email: [{
+          pattern: /^\w+@[a-z0-9]+\.[a-z]{2,4}$/,
+          message: this.$t('module.basicData.staff.Email') + this.$t('module.basicData.customer.format'),
+          trigger: 'blur'
+        }],
+        description: [],
+        code: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.staff.EmployeeID')]),
+          trigger: 'blur'
+        }]
+      },
+      sexOptions: [{
+        'label': '男',
+        'value': 1
+      }, {
+        'label': '女',
+        'value': 0
+      }],
+      onDutyOptions: [{
+        'label': this.$t('module.basicData.visual.Yes'),
+        'value': 1
+      }, {
+        'label': this.$t('module.basicData.visual.No'),
+        'value': 0
+      }]
+    }
+  },
+  methods: {
+    init(id) {
+      staffCode().then(res => {
+        this.staffData.code = res.data
+      })
+      majorList({
+        current: 1,
+        size: 999,
+        name: ''
+      }).then(response => {
+        this.majorArr = response.data.records
+      })
+      this.staffData.id = id || ''
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['staffForm'].resetFields()
+        if (this.staffData.id) {
+          staffDetail(this.staffData.id).then(res => {
+            this.staffData = res.data
+          })
+        }
+      })
+    },
+    // 表单提交
+    staffDataSubmit() {
+      this.$refs['staffForm'].validate((valid) => {
+        if (valid) {
+          const data = {
+            'name': this.staffData.name,
+            'sex': this.staffData.sex,
+            'telephone': this.staffData.telephone,
+            'description': this.staffData.description,
+            'code': this.staffData.code,
+            'email': this.staffData.email,
+            'entryTime': this.staffData.entryTime,
+            'majorId': this.staffData.majorId,
+            'onDuty': this.staffData.onDuty,
+            'wechatCode': this.staffData.wechatCode,
+            'workshop': this.staffData.workshop,
+            'roleId': this.staffData.roleId,
+            'id': this.staffData.id
+          }
+          if (this.staffData.id) {
+            staffUpdate(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          } else {
+            staffAdd(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          }
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/basicData/GroupModule/group.vue b/src/views/basicData/GroupModule/group.vue
new file mode 100644
index 0000000..45437b2
--- /dev/null
+++ b/src/views/basicData/GroupModule/group.vue
@@ -0,0 +1,201 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-11 16:47:17
+ * @Description:
+-->
+<template>
+  <div class="app-container">
+    <head-form
+      :placeholder-name="placeholderName"
+      :key-name="keyName"
+      @getDataList="getList"
+      @add="addNew"
+    />
+    <base-table
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    >
+      <method-btn
+        slot="handleBtn"
+        :width="trueWidth"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      @pagination="getList()"
+    />
+    <group-add v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
+  </div>
+</template>
+
+<script>import i18n from '@/lang'
+import { groupList, groupDelete } from '@/api/basicData/GroupModule/group'
+import dataDict from '@/filters/DataDict'
+import groupAdd from './components/group-add.vue'
+import HeadForm from '@/components/basicData/HeadForm'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import { timeFormatter } from '@/filters'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+
+const tableBtn = [
+  {
+    type: 'edit',
+    btnName: 'btn.edit'
+  },
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  },
+  {
+    type: 'detail',
+    btnName: 'btn.detail'
+  }
+]
+const tableProps = [
+  {
+    prop: 'createTime',
+    label: i18n.t('module.basicData.factory.createTime'),
+    filter: timeFormatter,
+    align: 'center'
+  },
+  {
+    prop: 'name',
+    label: i18n.t('module.basicData.group.TeamName'),
+    align: 'center'
+  },
+  {
+    prop: 'teamNumber',
+    label: i18n.t('module.basicData.group.NumberOfTeams'),
+    align: 'center'
+  },
+  {
+    prop: 'teamLeader',
+    label: i18n.t('module.basicData.group.GroupLeader'),
+    align: 'center'
+  },
+  {
+    prop: 'workStatus',
+    label: i18n.t('module.basicData.group.TeamStatus'),
+    filter: dataDict('enableState'),
+    align: 'center'
+  }
+]
+
+export default {
+  name: 'Group',
+  components: { Pagination, BaseTable, MethodBtn, HeadForm, groupAdd },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      keyName: i18n.t('module.basicData.visual.keyword'),
+      placeholderName: this.$t('module.basicData.group.TeamName') + this.$t('module.basicData.visual.Or') + this.$t('module.basicData.group.GroupLeader'),
+      addOrUpdateVisible: false,
+      tableBtn,
+      trueWidth: 240,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        current: 1,
+        size: 10
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    handleClick(raw) {
+      if (raw.type === 'delete') {
+        this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`, this.$t('module.basicData.visual.Tips'), {
+          confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+          cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+          type: 'warning'
+        }).then(() => {
+          groupDelete(raw.data.id).then(response => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+              }
+            })
+          })
+        }).catch(() => {})
+      } else if (raw.type === 'edit') {
+        this.addNew(raw.data.id)
+      } else {
+        this.addNew(raw.data.id, true)
+      }
+    },
+    getList(key) {
+      this.listLoading = true
+      this.listQuery.key = key
+      groupList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    },
+    // 新增 / 修改
+    addNew(id, isdetail) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id, isdetail)
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/basicData/GroupModule/major.vue b/src/views/basicData/GroupModule/major.vue
new file mode 100644
index 0000000..f099bff
--- /dev/null
+++ b/src/views/basicData/GroupModule/major.vue
@@ -0,0 +1,194 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-11 16:47:25
+ * @Description:
+-->
+<template>
+  <div class="app-container">
+    <head-form
+      :placeholder-name="placeholderName"
+      :key-name="keyName"
+      @getDataList="getList"
+      @add="addNew"
+    />
+    <base-table
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    >
+      <method-btn
+        slot="handleBtn"
+        :width="trueWidth"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      @pagination="getList()"
+    />
+    <major-add v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
+  </div>
+</template>
+
+<script>import i18n from '@/lang'
+import { majorList, majorDelete } from '@/api/basicData/GroupModule/major'
+import majorAdd from './components/major-add.vue'
+import HeadForm from '@/components/basicData/HeadForm'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import { timeFormatter } from '@/filters'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+
+const tableBtn = [
+  {
+    type: 'edit',
+    btnName: 'btn.edit'
+  },
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  }
+]
+const tableProps = [
+  {
+    prop: 'createTime',
+    label: i18n.t('module.basicData.factory.createTime'),
+    filter: timeFormatter,
+    align: 'center'
+  },
+  {
+    prop: 'name',
+    label: i18n.t('module.basicData.major.ProfessionalName'),
+    align: 'center'
+  },
+  {
+    prop: 'code',
+    label: i18n.t('module.basicData.major.ProfessionalCoding'),
+    align: 'center'
+  },
+  {
+    prop: 'abbreviation',
+    label: i18n.t('module.basicData.visual.Abbreviation'),
+    align: 'center'
+  },
+  {
+    prop: 'description',
+    label: i18n.t('module.basicData.visual.Remarks'),
+    align: 'center'
+  }
+]
+
+export default {
+  name: 'Major',
+  components: { Pagination, BaseTable, MethodBtn, HeadForm, majorAdd },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      keyName: i18n.t('module.basicData.visual.keyword'),
+      placeholderName: this.$t('module.basicData.major.ProfessionalName'),
+      addOrUpdateVisible: false,
+      tableBtn,
+      trueWidth: 200,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        current: 1,
+        size: 10
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    handleClick(raw) {
+      console.log(raw)
+      if (raw.type === 'delete') {
+        this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`, this.$t('module.basicData.visual.Tips'), {
+          confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+          cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+          type: 'warning'
+        }).then(() => {
+          majorDelete(raw.data.id).then(response => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+              }
+            })
+          })
+        }).catch(() => {})
+      } else {
+        this.addNew(raw.data.id)
+      }
+    },
+    getList(key) {
+      this.listLoading = true
+      this.listQuery.name = key
+      majorList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    },
+    // 新增 / 修改
+    addNew(id) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id)
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/basicData/GroupModule/staff.vue b/src/views/basicData/GroupModule/staff.vue
new file mode 100644
index 0000000..8175e7c
--- /dev/null
+++ b/src/views/basicData/GroupModule/staff.vue
@@ -0,0 +1,252 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-05-21 14:41:36
+ * @Description:
+-->
+<template>
+  <div class="app-container">
+    <head-form
+      :placeholder-name="placeholderName"
+      :key-name="keyName"
+      @getDataList="getList"
+      @add="addNew"
+    />
+    <base-table
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    >
+      <method-btn
+        slot="handleBtn"
+        :width="trueWidth"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      @pagination="getList()"
+    />
+    <staff-add v-if="addOrUpdateVisible" ref="addOrUpdate" :role-list="roleList" @refreshDataList="getList" />
+  </div>
+</template>
+
+<script>
+import i18n from '@/lang'
+import { staffList, staffDelete, getRoleList } from '@/api/basicData/GroupModule/staff'
+import staffAdd from './components/staff-add.vue'
+import HeadForm from '@/components/basicData/HeadForm'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import basicData from '@/filters/basicData'
+// import DictFilter from '@/components/BaseTable/subcomponents/DataDictFilter'
+// import { workerRoleList } from '@/api/dict'
+import { timeFormatter } from '@/filters'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+
+const tableBtn = [
+  {
+    type: 'edit',
+    btnName: 'btn.edit'
+  },
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  }
+]
+const tableProps = [
+  {
+    prop: 'createTime',
+    label: i18n.t('module.basicData.factory.createTime'),
+    filter: timeFormatter,
+    align: 'center'
+  },
+  {
+    prop: 'name',
+    label: i18n.t('module.basicData.staff.Name'),
+    align: 'center'
+  },
+  {
+    prop: 'code',
+    label: i18n.t('module.basicData.staff.EmployeeID'),
+    align: 'center'
+  },
+  {
+    prop: 'roleName',
+    label: i18n.t('module.basicData.staff.role'),
+    align: 'center'
+    // subcomponent: DictFilter,
+    // filter: workerRoleList
+  },
+  {
+    prop: 'sex',
+    label: i18n.t('module.basicData.staff.Gender'),
+    filter: basicData('sex'),
+    align: 'center'
+  },
+  {
+    prop: 'entryTime',
+    label: i18n.t('module.basicData.staff.EntryTime'),
+    filter: timeFormatter,
+    align: 'center'
+  },
+  {
+    prop: 'telephone',
+    label: i18n.t('module.basicData.staff.Telephone'),
+    align: 'center'
+  },
+  {
+    prop: 'email',
+    label: i18n.t('module.basicData.staff.Email'),
+    align: 'center'
+  },
+  {
+    prop: 'wechatCode',
+    label: i18n.t('module.basicData.staff.Wechat'),
+    align: 'center'
+  },
+  {
+    prop: 'majorArr',
+    label: i18n.t('module.basicData.staff.Profession'),
+    align: 'center'
+  },
+  {
+    prop: 'workshop',
+    label: i18n.t('module.basicData.staff.Workshop'),
+    align: 'center'
+  },
+  {
+    prop: 'onDuty',
+    label: i18n.t('module.basicData.staff.onDuty'),
+    filter: basicData('onDuty'),
+    align: 'center'
+  },
+  {
+    prop: 'description',
+    label: i18n.t('module.basicData.visual.Remarks'),
+    align: 'center'
+  }
+]
+
+export default {
+  name: 'Staff',
+  components: { Pagination, BaseTable, MethodBtn, HeadForm, staffAdd },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      keyName: i18n.t('module.basicData.visual.keyword'),
+      placeholderName: this.$t('module.basicData.staff.Name'),
+      addOrUpdateVisible: false,
+      tableBtn,
+      trueWidth: 200,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      roleList: [],
+      listQuery: {
+        current: 1,
+        size: 10
+      }
+    }
+  },
+  created() {
+    this.getRole()
+  },
+  methods: {
+    handleClick(raw) {
+      console.log(raw)
+      if (raw.type === 'delete') {
+        this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`, this.$t('module.basicData.visual.Tips'), {
+          confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+          cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+          type: 'warning'
+        }).then(() => {
+          staffDelete(raw.data.id).then(response => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+              }
+            })
+          })
+        }).catch(() => {})
+      } else {
+        this.addNew(raw.data.id)
+      }
+    },
+    getList(key) {
+      this.listLoading = true
+      this.listQuery.key = key
+      staffList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+          this.list.forEach(item => {
+            if (item.major) { item.majorArr = item.major.toString() }
+          })
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    },
+    async getRole() {
+      const res = await getRoleList()
+      this.roleList = res.data.records
+      this.getList()
+    },
+    // 新增 / 修改
+    addNew(id) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id)
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/basicData/Materials/components/material-add.vue b/src/views/basicData/Materials/components/material-add.vue
new file mode 100644
index 0000000..aebc664
--- /dev/null
+++ b/src/views/basicData/Materials/components/material-add.vue
@@ -0,0 +1,267 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-22 15:34:46
+ * @enName:
+-->
+<template>
+  <div style="margin:20px">
+    <div slot="title" style=" background-color:#02BCFF;font-size:1.5em;color:white;padding:5px 20px;margin:20px">{{ isdetail? 'btn.detail' : !dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter }}</div>
+    <div style="margin:0 15px">
+      <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="140px" @keyup.enter.native="dataFormSubmit()">
+        <el-form-item :label="$t('module.basicData.material.MaterialName')" prop="name">
+          <el-input v-model="dataForm.name" :disabled="isdetail" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.material.MaterialName')])" clearable />
+        </el-form-item>
+        <el-form-item :label="$t('module.basicData.material.MaterialCoding')" prop="code">
+          <el-input v-model="dataForm.code" :disabled="isdetail" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.material.MaterialCoding')])" clearable />
+        </el-form-item>
+        <el-form-item :label="$t('module.basicData.visual.EnglishName')" prop="enName">
+          <el-input v-model="dataForm.enName" :disabled="isdetail" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.EnglishName')])" clearable />
+        </el-form-item>
+        <el-form-item :label="$t('module.basicData.visual.Abbreviation')" prop="abbr">
+          <el-input v-model="dataForm.abbr" :disabled="isdetail" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Abbreviation')])" clearable />
+        </el-form-item>
+        <el-form-item :label="$t('module.basicData.material.MaterialType')" prop="category">
+          <el-select v-model="dataForm.category" :disabled="isdetail" filterable :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.material.MaterialType')])" clearable>
+            <el-option
+              v-for="item in categoryArr"
+              :key="item.id"
+              :label="item.name"
+              :value="item.name"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('module.basicData.visual.Description')" prop="description">
+          <el-input v-model="dataForm.description" :disabled="isdetail" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Description')])" clearable />
+        </el-form-item>
+        <el-form-item :label="$t('module.basicData.visual.Remarks')" prop="remark">
+          <el-input v-model="dataForm.remark" :disabled="isdetail" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Remarks')])" clearable />
+        </el-form-item>
+      </el-form>
+      <div style="margin:20px">
+        <el-button type="success" @click="goback()">{{ 'btn.back' | i18nFilter }}</el-button>
+        <el-button v-if="isdetail" type="primary" @click="goEdit()">{{ 'btn.edit' | i18nFilter }}</el-button>
+        <span v-if="!isdetail">
+          <el-button type="primary" @click="dataFormSubmit()">{{ 'btn.save' | i18nFilter }}</el-button>
+          <el-button v-if="listQuery.materialId" type="primary" @click="addNew()">{{ 'btn.addattr' | i18nFilter }}</el-button>
+        </span>
+      </div>
+      <div style="height:380px;overflow:auto">
+        <base-table
+          :page="listQuery.current"
+          :limit="listQuery.size"
+          :table-config="tableProps"
+          :table-data="list"
+        >
+          <method-btn
+            v-if="!isdetail"
+            slot="handleBtn"
+            :method-list="tableBtn"
+            @clickBtn="handleClick"
+          />
+        </base-table>
+      </div>
+    </div>
+    <material-attr-add v-if="addOrUpdateVisible" ref="addOrUpdate" :material-id="listQuery.materialId" @refreshDataList="getList" />
+  </div>
+</template>
+
+<script>import i18n from '@/lang'
+import { materialDetail, materialUpdate, materialAdd, materialCode } from '@/api/basicData/Materials/material'
+import { materialAttrList, materialAttrDelete } from '@/api/basicData/Materials/materialAttr'
+import { materialsTypeList } from '@/api/basicData/Materials/materialsType'
+import BaseTable from '@/components/BaseTable'
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import materialAttrAdd from './materialAttr-add'
+import { timeFormatter } from '@/filters'
+const tableBtn = [
+  {
+    type: 'edit',
+    btnName: 'btn.edit'
+  },
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  }
+]
+const tableProps = [
+  {
+    prop: 'createTime',
+    label: i18n.t('module.basicData.factory.createTime'),
+    filter: timeFormatter,
+    align: 'center'
+  },
+  {
+    prop: 'attrName',
+    label: i18n.t('module.basicData.visual.AttributeName'),
+    align: 'center'
+  },
+  {
+    prop: 'attrValue',
+    label: i18n.t('module.basicData.visual.AttributeValue'),
+    align: 'center'
+  }
+]
+
+export default {
+  components: { BaseTable, MethodBtn, materialAttrAdd },
+  data() {
+    return {
+      addOrUpdateVisible: false,
+      categoryArr: [],
+      tableBtn,
+      trueWidth: 200,
+      tableProps,
+      list: [],
+      dataForm: {
+        name: '',
+        code: '',
+        enName: '',
+        abbr: '',
+        category: '',
+        description: '',
+        remark: ''
+      },
+      dataRule: {
+        name: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.material.MaterialName')]), trigger: 'blur' }
+        ],
+        code: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.material.MaterialCoding')]), trigger: 'blur' }
+        ]
+      },
+      listQuery: {
+        current: 1,
+        size: 990,
+        materialId: ''
+      },
+      isdetail: false
+    }
+  },
+  created() {
+    this.listQuery.materialId = this.$route.query.id
+    this.init()
+  },
+  methods: {
+    init() {
+      this.isdetail = false
+      this.isdetail = Boolean(this.$route.query.isdetail)
+      this.list.splice(0, this.list.length)
+      materialsTypeList(this.listQuery).then(response => {
+        this.categoryArr = response.data.records
+      })
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.listQuery.materialId) {
+          materialDetail(this.listQuery.materialId).then(res => {
+            this.dataForm = res.data
+          })
+          materialAttrList(this.listQuery).then(response => {
+            if (response.data.records) {
+              this.list = response.data.records
+            } else {
+              this.list.splice(0, this.list.length)
+            }
+          })
+        } else {
+          materialCode().then(res => {
+            this.dataForm.code = res.data
+          })
+        }
+      })
+    },
+    getList() {
+      materialAttrList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+      })
+    },
+    handleClick(raw) {
+      if (raw.type === 'delete') {
+        this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.attrName}]?`, this.$t('module.basicData.visual.Tips'), {
+          confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+          cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+          type: 'warning'
+        }).then(() => {
+          materialAttrDelete(raw.data.id).then(response => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+              }
+            })
+          })
+        }).catch(() => {})
+      } else {
+        this.addNew(raw.data.id)
+      }
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          const data = {
+            'name': this.dataForm.name,
+            'code': this.dataForm.code,
+            'enName': this.dataForm.enName,
+            'description': this.dataForm.description,
+            'remark': this.dataForm.remark,
+            'abbr': this.dataForm.abbr,
+            'category': this.dataForm.category,
+            'id': this.listQuery.materialId
+          }
+          if (this.listQuery.materialId) {
+            materialUpdate(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500
+              })
+            })
+          } else {
+            materialAdd(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500
+              })
+              this.listQuery.materialId = res.data.id
+            })
+          }
+        }
+      })
+    },
+    // 新增 / 修改
+    addNew(id) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id)
+      })
+    },
+    goEdit() {
+      this.isdetail = false
+    },
+    goback() {
+      this.$router.go(-1)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.drawer-footer {
+  width: 100%;
+  margin-top: 50px;
+  border-top: 1px solid #e8e8e8;
+  border-bottom: 1px solid #e8e8e8;
+  padding: 10px 50px;
+  text-align: left;
+  background: #fff;
+}
+</style>
diff --git a/src/views/basicData/Materials/components/materialAttr-add.vue b/src/views/basicData/Materials/components/materialAttr-add.vue
new file mode 100644
index 0000000..68415d5
--- /dev/null
+++ b/src/views/basicData/Materials/components/materialAttr-add.vue
@@ -0,0 +1,131 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-25 16:31:03
+ * @Description:
+-->
+<template>
+  <el-drawer
+    :append-to-body="true"
+    :show-close="false"
+    :visible.sync="visible"
+    size="40%"
+  >
+    <div slot="title" style=" background-color:#02BCFF;font-size:1.5em;color:white;padding:5px 20px">
+      {{ !dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter }}
+    </div>
+    <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="140px" @keyup.enter.native="dataFormSubmit()">
+      <el-form-item :label="$t('module.basicData.visual.AttributeName')" prop="attrName">
+        <el-input v-model="dataForm.attrName" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.AttributeName')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.visual.AttributeValue')" prop="attrValue">
+        <el-input v-model="dataForm.attrValue" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.AttributeValue')])" clearable />
+      </el-form-item>
+    </el-form>
+    <div class="drawer-footer">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+      <el-button type="primary" :loading="btnLoading" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
+    </div>
+  </el-drawer>
+</template>
+
+<script>
+import { materialAttrDetail, materialAttrUpdate, materialAttrAdd } from '@/api/basicData/Materials/materialAttr'
+
+export default {
+  props: {
+    materialId: {
+      type: String,
+      default: () => {
+        return ''
+      }
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      btnLoading: false,
+      dataForm: {
+        id: 0,
+        attrName: '',
+        attrValue: ''
+      },
+      dataRule: {
+        attrName: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.visual.AttributeName')]), trigger: 'blur' }
+        ],
+        attrValue: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.visual.AttributeValue')]), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    init(id) {
+      this.dataForm.id = id || ''
+      this.btnLoading = false
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          materialAttrDetail(this.dataForm.id).then(res => {
+            this.dataForm.attrName = res.data.attrName
+            this.dataForm.attrValue = res.data.attrValue
+          })
+        }
+      })
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.btnLoading = true
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          const data = {
+            'attrName': this.dataForm.attrName,
+            'attrValue': this.dataForm.attrValue,
+            'materialId': this.materialId,
+            'id': this.dataForm.id
+          }
+          if (this.dataForm.id) {
+            materialAttrUpdate(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          } else {
+            materialAttrAdd(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.drawer-footer {
+  width: 100%;
+  margin-top: 50px;
+  border-top: 1px solid #e8e8e8;
+  padding: 10px 50px;
+  text-align: left;
+  background: #fff;
+}
+</style>
diff --git a/src/views/basicData/Materials/components/materialsType-add.vue b/src/views/basicData/Materials/components/materialsType-add.vue
new file mode 100644
index 0000000..23b0a87
--- /dev/null
+++ b/src/views/basicData/Materials/components/materialsType-add.vue
@@ -0,0 +1,112 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-25 16:26:33
+ * @Description:
+-->
+<template>
+  <el-dialog
+    :title="!dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter"
+    :visible.sync="visible"
+  >
+    <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="100px" @keyup.enter.native="dataFormSubmit()">
+      <el-form-item :label="$t('module.basicData.materialsType.TypeName')" prop="name">
+        <el-input v-model="dataForm.name" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.materialsType.TypeName')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.materialsType.TypeCode')" prop="code">
+        <el-input v-model="dataForm.code" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.materialsType.TypeCode')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.visual.Remarks')" prop="remark">
+        <el-input v-model="dataForm.remark" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Remarks')])" clearable />
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { materialsTypeDetail, materialsTypeUpdate, materialsTypeAdd, materialsTypeCode } from '@/api/basicData/Materials/materialsType'
+
+export default {
+  data() {
+    return {
+      visible: false,
+      dataForm: {
+        id: 0,
+        name: '',
+        code: '',
+        remark: ''
+      },
+      dataRule: {
+        name: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.materialsType.TypeName')]), trigger: 'blur' }
+        ],
+        code: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.materialsType.TypeCode')]), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    init(id) {
+      materialsTypeCode().then(res => {
+        this.dataForm.code = res.data
+      })
+      this.dataForm.id = id || ''
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          materialsTypeDetail(this.dataForm.id).then(res => {
+            this.dataForm.name = res.data.name
+            this.dataForm.code = res.data.code
+            this.dataForm.remark = res.data.remark
+          })
+        }
+      })
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          const data = {
+            'name': this.dataForm.name,
+            'code': this.dataForm.code,
+            'remark': this.dataForm.remark,
+            'id': this.dataForm.id
+          }
+          if (this.dataForm.id) {
+            materialsTypeUpdate(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          } else {
+            materialsTypeAdd(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          }
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/basicData/Materials/material.vue b/src/views/basicData/Materials/material.vue
new file mode 100644
index 0000000..b906e2e
--- /dev/null
+++ b/src/views/basicData/Materials/material.vue
@@ -0,0 +1,216 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-11 16:48:22
+ * @Description:
+-->
+<template>
+  <div class="app-container">
+    <head-form
+      :placeholder-name="placeholderName"
+      :key-name="keyName"
+      @getDataList="getList"
+      @add="addNew"
+    />
+    <base-table
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    >
+      <method-btn
+        slot="handleBtn"
+        :width="trueWidth"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      @pagination="getList()"
+    />
+  </div>
+</template>
+
+<script>import i18n from '@/lang'
+import { materialList, materialDelete } from '@/api/basicData/Materials/material'
+import HeadForm from '@/components/basicData/HeadForm'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import { timeFormatter } from '@/filters'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+
+const tableBtn = [
+  {
+    type: 'edit',
+    btnName: 'btn.edit'
+  },
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  },
+  {
+    type: 'detail',
+    btnName: 'btn.detail'
+  }
+]
+const tableProps = [
+  {
+    prop: 'createTime',
+    label: i18n.t('module.basicData.factory.createTime'),
+    filter: timeFormatter,
+    align: 'center'
+  },
+  {
+    prop: 'name',
+    label: i18n.t('module.basicData.material.MaterialName'),
+    align: 'center'
+  },
+  {
+    prop: 'code',
+    label: i18n.t('module.basicData.material.MaterialCoding'),
+    align: 'center'
+  },
+  {
+    prop: 'enName',
+    label: i18n.t('module.basicData.visual.EnglishName'),
+    align: 'center'
+  },
+  {
+    prop: 'abbr',
+    label: i18n.t('module.basicData.visual.Abbreviation'),
+    align: 'center'
+  },
+  {
+    prop: 'category',
+    label: i18n.t('module.basicData.material.MaterialType'),
+    align: 'center'
+  },
+  {
+    prop: 'description',
+    label: i18n.t('module.basicData.visual.Description'),
+    align: 'center'
+  },
+  {
+    prop: 'remark',
+    label: i18n.t('module.basicData.visual.Remarks'),
+    align: 'center'
+  }
+]
+
+export default {
+  name: 'Material',
+  components: { Pagination, BaseTable, MethodBtn, HeadForm },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      keyName: i18n.t('module.basicData.visual.keyword'),
+      placeholderName: this.$t('module.basicData.material.MaterialName') + this.$t('module.basicData.visual.Or') + this.$t('module.basicData.material.MaterialCoding'),
+      tableBtn,
+      trueWidth: 240,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        current: 1,
+        size: 10
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    handleClick(raw) {
+      console.log(raw)
+      if (raw.type === 'delete') {
+        this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`, this.$t('module.basicData.visual.Tips'), {
+          confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+          cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+          type: 'warning'
+        }).then(() => {
+          materialDelete(raw.data.id).then(response => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+              }
+            })
+          })
+        }).catch(() => {})
+      } else if (raw.type === 'edit') {
+        this.addNew(raw.data.id)
+      } else {
+        this.addNew(raw.data.id, true)
+      }
+    },
+    getList(key) {
+      this.listLoading = true
+      this.listQuery.name = key
+      this.listQuery.code = key
+      materialList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    },
+    // 新增 / 修改
+    addNew(id, isdetail) {
+      this.$router.push({
+        name: 'MaterialAdd',
+        query: {
+          id: id,
+          isdetail: isdetail
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/basicData/Materials/materialsType.vue b/src/views/basicData/Materials/materialsType.vue
new file mode 100644
index 0000000..89684b1
--- /dev/null
+++ b/src/views/basicData/Materials/materialsType.vue
@@ -0,0 +1,189 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-05 16:23:27
+ * @Description:
+-->
+<template>
+  <div class="app-container">
+    <head-form
+      :placeholder-name="placeholderName"
+      :key-name="keyName"
+      @getDataList="getList"
+      @add="addNew"
+    />
+    <base-table
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    >
+      <method-btn
+        slot="handleBtn"
+        :width="trueWidth"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      @pagination="getList()"
+    />
+    <materialsType-add v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
+  </div>
+</template>
+
+<script>import i18n from '@/lang'
+import { materialsTypeList, materialsTypeDelete } from '@/api/basicData/Materials/materialsType'
+import materialsTypeAdd from './components/materialsType-add.vue'
+import HeadForm from '@/components/basicData/HeadForm'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import { timeFormatter } from '@/filters'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+
+const tableBtn = [
+  {
+    type: 'edit',
+    btnName: 'btn.edit'
+  },
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  }
+]
+const tableProps = [
+  {
+    prop: 'createTime',
+    label: i18n.t('module.basicData.factory.createTime'),
+    filter: timeFormatter,
+    align: 'center'
+  },
+  {
+    prop: 'name',
+    label: i18n.t('module.basicData.materialsType.TypeName'),
+    align: 'center'
+  },
+  {
+    prop: 'code',
+    label: i18n.t('module.basicData.materialsType.TypeCode'),
+    align: 'center'
+  },
+  {
+    prop: 'remark',
+    label: i18n.t('module.basicData.visual.Remarks'),
+    align: 'center'
+  }
+]
+
+export default {
+  name: 'MaterialsType',
+  components: { Pagination, BaseTable, MethodBtn, materialsTypeAdd, HeadForm },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      keyName: i18n.t('module.basicData.visual.keyword'),
+      placeholderName: this.$t('module.basicData.materialsType.TypeName'),
+      addOrUpdateVisible: false,
+      tableBtn,
+      trueWidth: 200,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        current: 1,
+        size: 10
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    handleClick(raw) {
+      console.log(raw)
+      if (raw.type === 'delete') {
+        this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`, this.$t('module.basicData.visual.Tips'), {
+          confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+          cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+          type: 'warning'
+        }).then(() => {
+          materialsTypeDelete(raw.data.id).then(response => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+              }
+            })
+          })
+        }).catch(() => {})
+      } else {
+        this.addNew(raw.data.id)
+      }
+    },
+    getList(key) {
+      this.listLoading = true
+      this.listQuery.name = key
+      materialsTypeList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    },
+    // 新增 / 修改
+    addNew(id) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id)
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/basicData/ProductPool.vue b/src/views/basicData/ProductPool.vue
new file mode 100644
index 0000000..efeed7f
--- /dev/null
+++ b/src/views/basicData/ProductPool.vue
@@ -0,0 +1,200 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-11 16:43:12
+ * @Description:
+-->
+<template>
+  <div class="app-container">
+    <head-form
+      :placeholder-name="placeholderName"
+      :key-name="keyName"
+      @getDataList="getList"
+      @add="addNew"
+    />
+    <base-table
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    >
+      <method-btn
+        slot="handleBtn"
+        :width="trueWidth"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      @pagination="getList()"
+    />
+    <product-pool-add v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
+  </div>
+</template>
+
+<script>import i18n from '@/lang'
+import { ProductPoolList, ProductPoolDelete } from '@/api/basicData/ProductPool'
+import ProductPoolAdd from './components/ProductPool-add.vue'
+import HeadForm from '@/components/basicData/HeadForm'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import { timeFormatter } from '@/filters'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+
+const tableBtn = [
+  {
+    type: 'edit',
+    btnName: 'btn.edit'
+  },
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  },
+  {
+    type: 'detail',
+    btnName: 'btn.detail'
+  }
+]
+const tableProps = [
+  {
+    prop: 'createTime',
+    label: i18n.t('module.basicData.factory.createTime'),
+    filter: timeFormatter,
+    align: 'center'
+  },
+  {
+    prop: 'name',
+    label: i18n.t('module.basicData.productPool.productName'),
+    align: 'center'
+  },
+  {
+    prop: 'code',
+    label: i18n.t('module.basicData.productPool.productCode'),
+    align: 'center'
+  },
+  {
+    prop: 'specifications',
+    label: i18n.t('module.basicData.visual.Specs'),
+    align: 'center'
+  },
+  {
+    prop: 'unit',
+    label: i18n.t('module.basicData.visual.unit'),
+    align: 'center'
+  }
+]
+
+export default {
+  name: 'ProductPool',
+  components: { Pagination, BaseTable, MethodBtn, HeadForm, ProductPoolAdd },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      keyName: i18n.t('module.basicData.visual.keyword'),
+      placeholderName: this.$t('module.basicData.productPool.productName') + this.$t('module.basicData.visual.Or') + this.$t('module.basicData.productPool.productCode'),
+      addOrUpdateVisible: false,
+      tableBtn,
+      trueWidth: 240,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        current: 1,
+        size: 10
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    handleClick(raw) {
+      console.log(raw)
+      if (raw.type === 'delete') {
+        this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`, this.$t('module.basicData.visual.Tips'), {
+          confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+          cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+          type: 'warning'
+        }).then(() => {
+          ProductPoolDelete(raw.data.id).then(response => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+              }
+            })
+          })
+        }).catch(() => {})
+      } else if (raw.type === 'edit') {
+        this.addNew(raw.data.id)
+      } else {
+        this.addNew(raw.data.id, true)
+      }
+    },
+    getList(key) {
+      this.listLoading = true
+      this.listQuery.key = key
+      ProductPoolList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    },
+    // 新增 / 修改
+    addNew(id, isdetail) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id, isdetail)
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/basicData/Scrap/ScrapInfo.vue b/src/views/basicData/Scrap/ScrapInfo.vue
new file mode 100644
index 0000000..dfe27dc
--- /dev/null
+++ b/src/views/basicData/Scrap/ScrapInfo.vue
@@ -0,0 +1,220 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-12 10:05:33
+ * @Description:
+-->
+<template>
+  <div class="app-container">
+    <el-form
+      :model="listQuery"
+      :inline="true"
+      size="medium"
+      label-width="100px"
+    >
+      <el-form-item :label="$t('module.basicData.ScrapInfo.cause')" prop="scrap">
+        <el-input v-model="listQuery.scrap" :placeholder="$i18nForm(['placeholder.input', this.$t('module.basicData.ScrapInfo.cause')])" style="width:200px" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.ScrapInfo.scrapType')" prop="scrapId">
+        <el-select v-model="listQuery.scrapId" filterable :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.ScrapInfo.scrapType')])" clearable>
+          <el-option
+            v-for="item in scrapTypeArr"
+            :key="item.id"
+            :label="item.scrapType"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="getList()"> {{ 'btn.search' | i18nFilter }} </el-button>
+        <el-button type="primary" @click="addNew()"> {{ 'btn.add' | i18nFilter }} </el-button>
+      </el-form-item>
+    </el-form>
+    <base-table
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    >
+      <method-btn
+        slot="handleBtn"
+        :width="trueWidth"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      @pagination="getList()"
+    />
+    <ScrapInfo-add v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
+  </div>
+</template>
+
+<script>
+import { scrapInfoList, scrapInfoDelete } from '@/api/basicData/Scrap/ScrapInfo'
+import { scrapTypeList } from '@/api/basicData/Scrap/ScrapType'
+import ScrapInfoAdd from './components/ScrapInfo-add.vue'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import { timeFormatter } from '@/filters'
+import i18n from '@/lang'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+
+const tableBtn = [
+  {
+    type: 'edit',
+    btnName: 'btn.edit'
+  },
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  }
+]
+const tableProps = [
+  {
+    prop: 'createTime',
+    label: i18n.t('module.basicData.factory.createTime'),
+    align: 'center',
+    filter: timeFormatter
+  },
+  {
+    prop: 'scrap',
+    label: i18n.t('module.basicData.ScrapInfo.cause'),
+    align: 'center'
+  },
+  {
+    prop: 'code',
+    label: i18n.t('module.basicData.ScrapInfo.causeCode'),
+    align: 'center'
+  },
+  {
+    prop: 'scrapType',
+    label: i18n.t('module.basicData.ScrapInfo.scrapType'),
+    align: 'center'
+  },
+  {
+    prop: 'remark',
+    label: i18n.t('module.basicData.visual.Remarks'),
+    align: 'center'
+  }
+]
+
+export default {
+  name: 'ScrapInfo',
+  components: { Pagination, BaseTable, MethodBtn, ScrapInfoAdd },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      addOrUpdateVisible: false,
+      tableBtn,
+      trueWidth: 200,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      scrapTypeArr: [],
+      listQuery: {
+        current: 1,
+        size: 10,
+        scrap: '',
+        scrapId: ''
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    handleClick(raw) {
+      console.log(raw)
+      if (raw.type === 'delete') {
+        this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.scrap}]?`, this.$t('module.basicData.visual.Tips'), {
+          confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+          cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+          type: 'warning'
+        }).then(() => {
+          scrapInfoDelete(raw.data.id).then(response => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+              }
+            })
+          })
+        }).catch(() => {})
+      } else {
+        this.addNew(raw.data.id)
+      }
+    },
+    getList() {
+      scrapTypeList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.scrapTypeArr = response.data.records
+        } else {
+          this.scrapTypeArr.splice(0, this.list.length)
+        }
+      })
+      this.listLoading = true
+      scrapInfoList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    },
+    // 新增 / 修改
+    addNew(id) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id)
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/basicData/Scrap/ScrapType.vue b/src/views/basicData/Scrap/ScrapType.vue
new file mode 100644
index 0000000..a74ff20
--- /dev/null
+++ b/src/views/basicData/Scrap/ScrapType.vue
@@ -0,0 +1,198 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-03-10 10:02:18
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-11 16:48:54
+ * @Description:
+ !-->
+<template>
+  <div class="app-container">
+    <head-form
+      :placeholder-name="placeholderName"
+      :key-name="keyName"
+      @getDataList="getList"
+      @add="addNew"
+    />
+    <base-table
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    >
+      <method-btn
+        slot="handleBtn"
+        :width="trueWidth"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      @pagination="getList()"
+    />
+    <ScrapType-add v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
+  </div>
+</template>
+
+<script>
+import { scrapTypeList, scrapTypeDelete } from '@/api/basicData/Scrap/ScrapType'
+import ScrapTypeAdd from './components/ScrapType-add.vue'
+import HeadForm from '@/components/basicData/HeadForm'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import { timeFormatter } from '@/filters'
+import i18n from '@/lang'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+
+const tableBtn = [
+  {
+    type: 'edit',
+    btnName: 'btn.edit'
+  },
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  }
+]
+const tableProps = [
+  {
+    prop: 'createTime',
+    label: i18n.t('module.basicData.factory.createTime'),
+    filter: timeFormatter,
+    align: 'center'
+  },
+  {
+    prop: 'scrapType',
+    label: i18n.t('module.basicData.ScrapInfo.scrapType'),
+    align: 'center'
+  },
+  {
+    prop: 'code',
+    label: i18n.t('module.basicData.ScrapInfo.scrapTypeCode'),
+    align: 'center'
+  },
+  {
+    prop: 'description',
+    label: i18n.t('module.basicData.visual.Description'),
+    align: 'center'
+  },
+  {
+    prop: 'remark',
+    label: i18n.t('module.basicData.visual.Remarks'),
+    align: 'center'
+  }
+]
+
+export default {
+  name: 'ScrapType',
+  components: { Pagination, BaseTable, MethodBtn, HeadForm, ScrapTypeAdd },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      keyName: i18n.t('module.basicData.visual.keyword'),
+      placeholderName: this.$t('module.basicData.ScrapInfo.scrapType'),
+      addOrUpdateVisible: false,
+      tableBtn,
+      trueWidth: 200,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        current: 1,
+        size: 10,
+        scrapType: ''
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    handleClick(raw) {
+      console.log(raw)
+      if (raw.type === 'delete') {
+        this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.scrapType}]?`, this.$t('module.basicData.visual.Tips'), {
+          confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+          cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+          type: 'warning'
+        }).then(() => {
+          scrapTypeDelete(raw.data.id).then(response => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+              }
+            })
+          })
+        }).catch(() => {})
+      } else {
+        this.addNew(raw.data.id)
+      }
+    },
+    getList(key) {
+      this.listLoading = true
+      this.listQuery.scrapType = key
+      scrapTypeList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    },
+    // 新增 / 修改
+    addNew(id) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id)
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
+
+-->
diff --git a/src/views/basicData/Scrap/components/ScrapInfo-add.vue b/src/views/basicData/Scrap/components/ScrapInfo-add.vue
new file mode 100644
index 0000000..4f963b7
--- /dev/null
+++ b/src/views/basicData/Scrap/components/ScrapInfo-add.vue
@@ -0,0 +1,163 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-25 16:26:43
+ * @remark:
+-->
+<template>
+  <el-dialog
+    :title="!dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter"
+    :visible.sync="visible"
+  >
+    <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="110px" @keyup.enter.native="dataFormSubmit()">
+      <el-form-item :label="$t('module.basicData.ScrapInfo.cause')" prop="scrap">
+        <el-input v-model="dataForm.scrap" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.ScrapInfo.cause')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.ScrapInfo.causeCode')" prop="code">
+        <el-input v-model="dataForm.code" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.ScrapInfo.causeCode')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.ScrapInfo.scrapType')" prop="scrapTypeInfo">
+        <el-select v-model="dataForm.scrapTypeInfo" value-key="id" filterable :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.ScrapInfo.scrapType')])" clearable @change="$forceUpdate()">
+          <el-option
+            v-for="item in scrapTypeArr"
+            :key="item.id"
+            :label="item.scrapType"
+            :value="{id:item.id,name:item.scrapType}"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.visual.Remarks')" prop="remark">
+        <el-input v-model="dataForm.remark" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Remarks')])" clearable />
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { scrapInfoDetail, scrapInfoUpdate, scrapInfoAdd, scrapInfoCode } from '@/api/basicData/Scrap/ScrapInfo'
+import { scrapTypeList } from '@/api/basicData/Scrap/ScrapType'
+
+export default {
+  data() {
+    return {
+      visible: false,
+      scrapTypeArr: [],
+      dataForm: {
+        id: 0,
+        scrap: '',
+        code: '',
+        scrapTypeInfo: '',
+        scrapId: '',
+        scrapType: '',
+        remark: ''
+      },
+      listQuery: {
+        current: 1,
+        size: 999
+      },
+      dataRule: {
+        scrap: [
+          {
+            required: true,
+            message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.ScrapInfo.cause')]),
+            trigger: 'blur'
+          }
+        ],
+        code: [
+          {
+            required: true,
+            message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.ScrapInfo.causeCode')]),
+            trigger: 'blur'
+          }
+        ],
+        scrapTypeInfo: [
+          {
+            required: true,
+            message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.ScrapInfo.scrapType')]),
+            trigger: 'change'
+          }
+        ]
+      }
+    }
+  },
+  methods: {
+    init(id) {
+      scrapTypeList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.scrapTypeArr = response.data.records
+        } else {
+          this.scrapTypeArr.splice(0, this.list.length)
+        }
+      })
+      this.dataForm.id = id || ''
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          scrapInfoDetail(this.dataForm.id).then(res => {
+            this.dataForm = res.data
+            this.dataForm.scrapTypeInfo = {
+              id: this.dataForm.scrapId,
+              name: this.dataForm.scrapType
+            }
+          })
+        } else {
+          scrapInfoCode().then(res => {
+            this.dataForm.code = res.data
+          })
+        }
+      })
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          this.dataForm.scrapId = this.dataForm.scrapTypeInfo.id
+          this.dataForm.scrapType = this.dataForm.scrapTypeInfo.name
+          const data = {
+            'scrap': this.dataForm.scrap,
+            'code': this.dataForm.code,
+            'scrapId': this.dataForm.scrapId,
+            'scrapType': this.dataForm.scrapType,
+            'remark': this.dataForm.remark,
+            'id': this.dataForm.id
+          }
+          if (this.dataForm.id) {
+            scrapInfoUpdate(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          } else {
+            scrapInfoAdd(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          }
+        }
+      })
+    },
+    setValue(value) {
+      console.log(value)
+    }
+  }
+}
+</script>
diff --git a/src/views/basicData/Scrap/components/ScrapType-add.vue b/src/views/basicData/Scrap/components/ScrapType-add.vue
new file mode 100644
index 0000000..4b14761
--- /dev/null
+++ b/src/views/basicData/Scrap/components/ScrapType-add.vue
@@ -0,0 +1,122 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-10 14:48:27
+ * @Description:
+-->
+<template>
+  <el-dialog
+    :title="!dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter"
+    :visible.sync="visible"
+  >
+    <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="140px" @keyup.enter.native="dataFormSubmit()">
+      <el-form-item :label="$t('module.basicData.ScrapInfo.scrapType')" prop="scrapType">
+        <el-input v-model="dataForm.scrapType" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.ScrapInfo.scrapType')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.ScrapInfo.scrapTypeCode')" prop="code">
+        <el-input v-model="dataForm.code" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.ScrapInfo.scrapTypeCode')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.visual.Description')" prop="description">
+        <el-input v-model="dataForm.description" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Description')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.visual.Remarks')" prop="remark">
+        <el-input v-model="dataForm.remark" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Remarks')])" clearable />
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { scrapTypeDetail, scrapTypeUpdate, scrapTypeAdd, scrapTypeCode } from '@/api/basicData/Scrap/ScrapType'
+
+export default {
+  data() {
+    return {
+      visible: false,
+      dataForm: {
+        id: 0,
+        scrapType: '',
+        code: '',
+        description: '',
+        remark: ''
+      },
+      dataRule: {
+        scrapType: [
+          {
+            required: true,
+            message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.ScrapInfo.scrapType')]),
+            trigger: 'blur' }
+        ],
+        code: [
+          {
+            required: true,
+            message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.ScrapInfo.scrapTypeCode')]),
+            trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    init(id) {
+      this.dataForm.id = id || ''
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          scrapTypeDetail(this.dataForm.id).then(res => {
+            this.dataForm = res.data
+          })
+        } else {
+          scrapTypeCode().then(res => {
+            this.dataForm.code = res.data
+          })
+        }
+      })
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          const data = {
+            'scrapType': this.dataForm.scrapType,
+            'code': this.dataForm.code,
+            'description': this.dataForm.description,
+            'remark': this.dataForm.remark,
+            'id': this.dataForm.id
+          }
+          if (this.dataForm.id) {
+            scrapTypeUpdate(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          } else {
+            scrapTypeAdd(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          }
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/basicData/ScrapInfo.vue b/src/views/basicData/ScrapInfo.vue
new file mode 100644
index 0000000..42ec340
--- /dev/null
+++ b/src/views/basicData/ScrapInfo.vue
@@ -0,0 +1,222 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-10 11:13:58
+ * @Description:
+-->
+<template>
+  <div class="app-container">
+    <el-form
+      :model="formData"
+      :inline="true"
+      size="medium"
+      label-width="80px"
+    >
+      <el-form-item v-if="false" :label="$t('module.basicData.ScrapInfo.PlateId')" prop="basalId">
+        <el-input v-model="formData.basalId" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.ScrapInfo.PlateId')])" style="width:200px" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.ScrapInfo.TimePeriod')" prop="time">
+        <el-date-picker
+          v-model="formData.timeSlot"
+          type="daterange"
+          format="yyyy-MM-dd"
+          value-format="yyyy-MM-dd"
+          :start-placeholder="$t('module.basicData.ScrapInfo.StartTime')"
+          :end-placeholder="$t('module.basicData.ScrapInfo.EndTime')"
+          :range-separator="$t('module.basicData.ScrapInfo.To')"
+          clearable
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="getList()"> {{ 'btn.search' | i18nFilter }} </el-button>
+        <el-button type="primary" @click="addNew()"> {{ 'btn.add' | i18nFilter }} </el-button>
+      </el-form-item>
+    </el-form>
+    <base-table
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    >
+      <method-btn
+        slot="handleBtn"
+        :width="trueWidth"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="formData.current"
+      :limit.sync="formData.size"
+      @pagination="getList()"
+    />
+    <ScrapInfo-add v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
+  </div>
+</template>
+
+<script>import i18n from '@/lang'
+import { ScrapInfoList, ScrapInfoDelete } from '@/api/basicData/ScrapInfo'
+import ScrapInfoAdd from './components/ScrapInfo-add.vue'
+import ScrapInfoCause from './components/ScrapInfoCause.vue'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import { timeFormatter } from '@/filters'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+
+const tableBtn = [
+  {
+    type: 'edit',
+    btnName: 'btn.edit'
+  },
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  }
+]
+const tableProps = [
+  {
+    prop: 'createTime',
+    label: i18n.t('module.basicData.factory.createTime'),
+    filter: timeFormatter
+  },
+  // {
+  //   prop: 'basalId',
+  //   label: i18n.t('module.basicData.ScrapInfo.PlateId'),
+  //   align: 'center'
+  // },
+  {
+    prop: 'source',
+    label: i18n.t('module.basicData.ScrapInfo.source'),
+    align: 'center'
+  },
+  {
+    prop: 'wasteGrade',
+    label: i18n.t('module.basicData.ScrapInfo.wasteGrade'),
+    align: 'center'
+  },
+  {
+    prop: 'creatorName',
+    label: i18n.t('module.basicData.ScrapInfo.RegisterPerson')
+  },
+  {
+    prop: 'updateTime',
+    label: i18n.t('module.basicData.ScrapInfo.updateTime'),
+    filter: timeFormatter
+  },
+  {
+    prop: 'cause',
+    label: i18n.t('module.basicData.ScrapInfo.cause'),
+    subcomponent: ScrapInfoCause
+  }
+]
+
+export default {
+  name: 'ScrapInfo',
+  components: { Pagination, BaseTable, MethodBtn, ScrapInfoAdd },
+  data() {
+    return {
+      addOrUpdateVisible: false,
+      tableBtn,
+      trueWidth: 200,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      formData: {
+        timeSlot: [],
+        basalId: '',
+        current: 1,
+        size: 10
+      },
+      listQuery: {
+        current: 1,
+        size: 10
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    handleClick(raw) {
+      console.log(raw)
+      if (raw.type === 'delete') {
+        this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.status}]?`, this.$t('module.basicData.visual.Tips'), {
+          confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+          cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+          type: 'warning'
+        }).then(() => {
+          ScrapInfoDelete(raw.data.id).then(response => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+              }
+            })
+          })
+        }).catch(() => {})
+      } else {
+        this.addNew(raw.data.id)
+      }
+    },
+    getList() {
+      this.listLoading = true
+      if (this.formData.timeSlot) {
+        this.formData.startTime = this.formData.timeSlot[0]
+        this.formData.endTime = this.formData.timeSlot[1]
+      } else {
+        this.formData.startTime = ''
+        this.formData.endTime = ''
+      }
+      ScrapInfoList(this.formData).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    },
+    // 新增 / 修改
+    addNew(id) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id)
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/basicData/StateConfig.vue b/src/views/basicData/StateConfig.vue
new file mode 100644
index 0000000..3c0d8be
--- /dev/null
+++ b/src/views/basicData/StateConfig.vue
@@ -0,0 +1,195 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-04-07 13:45:43
+ * @Description:
+-->
+<template>
+  <div class="app-container">
+    <head-form
+      :placeholder-name="placeholderName"
+      :key-name="keyName"
+      :show-add="showAdd"
+      @getDataList="getList"
+      @add="addNew"
+    />
+    <base-table
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    >
+      <method-btn
+        slot="handleBtn"
+        :width="trueWidth"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      @pagination="getList()"
+    />
+    <StateConfig-add v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
+  </div>
+</template>
+
+<script>import i18n from '@/lang'
+import { StateConfigList, StateConfigDelete } from '@/api/basicData/StateConfig'
+import StateConfigAdd from './components/StateConfig-add.vue'
+import colorDiv from './components/colorDiv.vue'
+import HeadForm from '@/components/basicData/HeadForm'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import { timeFormatter } from '@/filters'
+import basicData from '@/filters/basicData'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+
+const tableBtn = [
+  {
+    type: 'edit',
+    btnName: 'btn.edit'
+  }
+  // {
+  //   type: 'delete',
+  //   btnName: 'btn.delete'
+  // }
+]
+const tableProps = [
+  {
+    prop: 'createTime',
+    label: i18n.t('module.basicData.factory.createTime'),
+    filter: timeFormatter,
+    align: 'center'
+  },
+  {
+    prop: 'status',
+    label: i18n.t('module.basicData.StateConfig.status'),
+    align: 'center'
+  },
+  {
+    prop: 'twinkle',
+    label: i18n.t('module.basicData.StateConfig.Twinkle'),
+    filter: basicData('onDuty'),
+    align: 'center'
+  },
+  {
+    prop: 'colour',
+    label: i18n.t('module.basicData.StateConfig.DisplayColor'),
+    align: 'center'
+  },
+  {
+    prop: 'color',
+    label: i18n.t('module.basicData.StateConfig.DisplayColor'),
+    subcomponent: colorDiv,
+    align: 'center'
+  },
+  {
+    prop: 'description',
+    label: i18n.t('module.basicData.visual.Remarks'),
+    align: 'center'
+  }
+]
+
+export default {
+  name: 'StateConfig',
+  components: { Pagination, BaseTable, MethodBtn, HeadForm, StateConfigAdd },
+  data() {
+    return {
+      keyName: i18n.t('module.basicData.visual.keyword'),
+      placeholderName: this.$t('module.basicData.StateConfig.status'),
+      addOrUpdateVisible: false,
+      tableBtn,
+      trueWidth: 150,
+      tableProps,
+      list: [],
+      total: 0,
+      showAdd: false,
+      listLoading: true,
+      listQuery: {
+        current: 1,
+        size: 10
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    handleClick(raw) {
+      console.log(raw)
+      if (raw.type === 'delete') {
+        this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.status}]?`, this.$t('module.basicData.visual.Tips'), {
+          confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+          cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+          type: 'warning'
+        }).then(() => {
+          StateConfigDelete(raw.data.id).then(response => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+              }
+            })
+          })
+        }).catch(() => {})
+      } else {
+        this.addNew(raw.data.id)
+      }
+    },
+    getList(key) {
+      this.listLoading = true
+      this.listQuery.status = key
+      StateConfigList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    },
+    // 新增 / 修改
+    addNew(id) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id)
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/basicData/VisualLayout.vue b/src/views/basicData/VisualLayout.vue
new file mode 100644
index 0000000..9eae9eb
--- /dev/null
+++ b/src/views/basicData/VisualLayout.vue
@@ -0,0 +1,187 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-03-11 19:50:03
+ * @Description:
+-->
+<template>
+  <div class="app-container">
+    <el-form
+      :model="listQuery"
+      :inline="true"
+      size="medium"
+    >
+      <el-form-item :label="$t('module.basicData.visual.areaName')" prop="name">
+        <el-input v-model="listQuery.name" :placeholder="['placeholder.input', $t('module.basicData.visual.areaName')] | i18nFilterForm" style="width:200px" clearable />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="getList()"> {{ 'btn.search' | i18nFilter }} </el-button>
+        <el-button type="primary" @click="addNew()"> {{ 'btn.add' | i18nFilter }} </el-button>
+      </el-form-item>
+    </el-form>
+    <base-table
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+      @emitFun="emitFun"
+    >
+      <method-btn
+        slot="handleBtn"
+        :width="trueWidth"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      @pagination="getList()"
+    />
+    <VisualInfo-add v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
+  </div>
+</template>
+
+<script>
+import { VisualList, VisualDelete } from '@/api/basicData/visual'
+import VisualLocationInfo from './components/VisualLocationInfo.vue'
+import VisualInfoAdd from './components/VisualInfo-add.vue'
+import VisualImgInfo from './components/VisualImgInfo.vue'
+import VisualPointInfo from './components/VisualPointInfo.vue'
+// import VisualRouteInfo from './components/VisualRouteInfo.vue'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination'
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import i18n from '@/lang'
+
+const tableBtn = [
+  {
+    type: 'edit',
+    btnName: 'btn.edit'
+  },
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  }
+]
+const tableProps = [
+  {
+    prop: 'name',
+    label: i18n.t('module.basicData.visual.areaName'),
+    align: 'center'
+  },
+  {
+    prop: 'source',
+    label: i18n.t('module.basicData.visual.annex'),
+    align: 'center',
+    subcomponent: VisualImgInfo
+  },
+  {
+    prop: 'equipmentPoint',
+    label: i18n.t('module.basicData.visual.locationInformation'),
+    align: 'center',
+    subcomponent: VisualPointInfo
+  },
+  {
+    prop: 'stock',
+    label: i18n.t('module.basicData.visual.stock'),
+    align: 'center',
+    subcomponent: VisualLocationInfo
+  }
+  // {
+  //   prop: 'trajectory',
+  //   label: i18n.t('module.basicData.visual.runningTrack'),
+  //   align: 'center',
+  //   subcomponent: VisualRouteInfo
+  // }
+]
+
+export default {
+  name: 'VisualInfo',
+  components: { Pagination, BaseTable, MethodBtn, VisualInfoAdd },
+  data() {
+    return {
+      addOrUpdateVisible: false,
+      tableBtn,
+      trueWidth: 200,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        name: '',
+        current: 1,
+        size: 10,
+        type: 1
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    handleClick(raw) {
+      console.log(raw)
+      if (raw.type === 'delete') {
+        this.$confirm(`${this.$t('deleteTip.header')}${raw.data.name}${this.$t('deleteTip.footer')}`, this.$t('deleteTip.tip'), {
+          confirmButtonText: this.$t('deleteTip.confirm'),
+          cancelButtonText: this.$t('deleteTip.cancel'),
+          type: 'warning'
+        }).then(() => {
+          VisualDelete(raw.data.id).then(response => {
+            this.$message({
+              message: this.$t('baseTip.OperationSucc'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+              }
+            })
+          })
+        }).catch(() => {})
+      } else {
+        this.addNew(raw.data.id)
+      }
+    },
+    getList() {
+      this.listLoading = true
+      VisualList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    },
+    // 新增 / 修改
+    addNew(id) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id)
+      })
+    },
+    emitFun(val) {
+      if (val.type.indexOf('refresh') >= 0) {
+        this.getList()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/basicData/components/CodeRules-add.vue b/src/views/basicData/components/CodeRules-add.vue
new file mode 100644
index 0000000..eacb635
--- /dev/null
+++ b/src/views/basicData/components/CodeRules-add.vue
@@ -0,0 +1,119 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-25 16:23:14
+ * @Description:
+-->
+<template>
+  <el-dialog
+    :title="!dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter"
+    :visible.sync="visible"
+  >
+    <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="100px" @keyup.enter.native="dataFormSubmit()">
+      <el-form-item :label="$t('module.basicData.CodeRules.RuleName')" prop="name">
+        <el-input v-model="dataForm.name" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.CodeRules.RuleName')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.CodeRules.RuleCode')" prop="code">
+        <el-input v-model="dataForm.code" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.CodeRules.RuleCode')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.visual.Abbreviation')" prop="abbreviation">
+        <el-input v-model="dataForm.abbreviation" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Abbreviation')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.visual.Remarks')" prop="description">
+        <el-input v-model="dataForm.description" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Remarks')])" clearable />
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { CodeRulesDetail, CodeRulesUpdate, CodeRulesAdd, CodeRulesCode } from '@/api/basicData/CodeRules'
+
+export default {
+  data() {
+    return {
+      visible: false,
+      dataForm: {
+        id: 0,
+        name: '',
+        code: '',
+        abbreviation: '',
+        description: ''
+      },
+      dataRule: {
+        name: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.CodeRules.RuleName')]), trigger: 'blur' }
+        ],
+        code: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.CodeRules.RuleCode')]), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    init(id) {
+      this.dataForm.id = id || ''
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          CodeRulesDetail(this.dataForm.id).then(res => {
+            this.dataForm.name = res.data.name
+            this.dataForm.code = res.data.code
+            this.dataForm.abbreviation = res.data.abbreviation
+            this.dataForm.description = res.data.description
+          })
+        } else {
+          CodeRulesCode().then(res => {
+            this.dataForm.code = res.data
+          })
+        }
+      })
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          const data = {
+            'name': this.dataForm.name,
+            'code': this.dataForm.code,
+            'abbreviation': this.dataForm.abbreviation,
+            'description': this.dataForm.description,
+            'id': this.dataForm.id
+          }
+          if (this.dataForm.id) {
+            CodeRulesUpdate(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          } else {
+            CodeRulesAdd(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          }
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/basicData/components/CodeRulesAttr-add.vue b/src/views/basicData/components/CodeRulesAttr-add.vue
new file mode 100644
index 0000000..adceb18
--- /dev/null
+++ b/src/views/basicData/components/CodeRulesAttr-add.vue
@@ -0,0 +1,128 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-25 16:23:24
+ * @Description:
+-->
+<template>
+  <el-dialog
+    :title="!dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter"
+    :visible.sync="visible"
+  >
+    <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="100px" @keyup.enter.native="dataFormSubmit()">
+      <el-form-item :label="$t('module.basicData.CodeRules.PropertyName')" prop="name">
+        <el-input v-model="dataForm.name" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.CodeRules.PropertyName')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.CodeRules.PropertyCode')" prop="code">
+        <el-input v-model="dataForm.code" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.CodeRules.PropertyCode')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.visual.AttributeValue')" prop="value">
+        <el-input v-model="dataForm.value" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.AttributeValue')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.CodeRules.Length')" prop="codeLength">
+        <el-input v-model="dataForm.codeLength" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.CodeRules.Length')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.CodeRules.order')" prop="codeOrder">
+        <el-input v-model="dataForm.codeOrder" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.CodeRules.order')])" clearable />
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { CodeRulesAttrDetail, CodeRulesAttrUpdate, CodeRulesAttrAdd, CodeRulesAttrCode } from '@/api/basicData/CodeRulesAttr'
+
+export default {
+  props: {
+    codeRuleId: {
+      type: String,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      dataForm: {
+        id: 0,
+        name: '',
+        code: '',
+        value: '',
+        codeOrder: '',
+        codeLength: ''
+      },
+      dataRule: {
+        name: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.CodeRules.PropertyName')]), trigger: 'blur' }
+        ],
+        code: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.CodeRules.PropertyCode')]), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    init(id) {
+      this.dataForm.id = id || ''
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          CodeRulesAttrDetail(this.dataForm.id).then(res => {
+            this.dataForm = res.data
+          })
+        } else {
+          CodeRulesAttrCode().then(res => {
+            this.dataForm.code = res.data
+          })
+        }
+      })
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          const data = {
+            'name': this.dataForm.name,
+            'code': this.dataForm.code,
+            'value': this.dataForm.value,
+            'codeLength': this.dataForm.codeLength,
+            'codeOrder': this.dataForm.codeOrder,
+            'id': this.dataForm.id,
+            'codeRuleId': this.codeRuleId
+          }
+          if (this.dataForm.id) {
+            CodeRulesAttrUpdate(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          } else {
+            CodeRulesAttrAdd(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          }
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/basicData/components/CodeRulesAttr.vue b/src/views/basicData/components/CodeRulesAttr.vue
new file mode 100644
index 0000000..8bac30a
--- /dev/null
+++ b/src/views/basicData/components/CodeRulesAttr.vue
@@ -0,0 +1,187 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-11 16:44:24
+ * @Description:
+-->
+<template>
+  <div class="app-container">
+    <div style="margin:10px 50px">
+      <el-button type="success" @click="goback()">{{ 'btn.back' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="addNew()">{{ 'btn.add' | i18nFilter }}</el-button>
+    </div>
+    <base-table
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    >
+      <method-btn
+        slot="handleBtn"
+        :width="trueWidth"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <CodeRulesAttr-add v-if="addOrUpdateVisible" ref="addOrUpdate" :code-rule-id="listQuery.codeRuleId" @refreshDataList="getList" />
+  </div>
+</template>
+
+<script>import i18n from '@/lang'
+import { CodeRulesAttrList, CodeRulesAttrDelete } from '@/api/basicData/CodeRulesAttr'
+import CodeRulesAttrAdd from './CodeRulesAttr-add.vue'
+import BaseTable from '@/components/BaseTable'
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import { timeFormatter } from '@/filters'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+
+const tableBtn = [
+  {
+    type: 'edit',
+    btnName: 'btn.edit'
+  },
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  }
+]
+const tableProps = [
+  {
+    prop: 'createTime',
+    label: i18n.t('module.basicData.factory.createTime'),
+    filter: timeFormatter,
+    align: 'center'
+  },
+  {
+    prop: 'name',
+    label: i18n.t('module.basicData.CodeRules.PropertyName'),
+    align: 'center'
+  },
+  {
+    prop: 'code',
+    label: i18n.t('module.basicData.CodeRules.PropertyCode'),
+    align: 'center'
+  },
+  {
+    prop: 'value',
+    label: i18n.t('module.basicData.visual.AttributeValue'),
+    align: 'center'
+  },
+  {
+    prop: 'codeLength',
+    label: i18n.t('module.basicData.CodeRules.Length'),
+    align: 'center'
+  },
+  {
+    prop: 'codeOrder',
+    label: i18n.t('module.basicData.CodeRules.order'),
+    align: 'center'
+  }
+]
+
+export default {
+  name: 'CodeRulesAttr',
+  components: { BaseTable, MethodBtn, CodeRulesAttrAdd },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      addOrUpdateVisible: false,
+      tableBtn,
+      trueWidth: 200,
+      tableProps,
+      list: [],
+      listLoading: true,
+      listQuery: {
+        current: 1,
+        size: 990,
+        codeRuleId: ''
+      }
+    }
+  },
+  created() {
+    this.listQuery.codeRuleId = this.$route.query.id
+    this.getList()
+  },
+  methods: {
+    handleClick(raw) {
+      if (raw.type === 'delete') {
+        this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`, this.$t('module.basicData.visual.Tips'), {
+          confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+          cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+          type: 'warning'
+        }).then(() => {
+          CodeRulesAttrDelete(raw.data.id).then(response => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+              }
+            })
+          })
+        }).catch(() => {})
+      } else {
+        this.addNew(raw.data.id)
+      }
+    },
+    getList() {
+      this.listLoading = true
+      CodeRulesAttrList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.listLoading = false
+      })
+    },
+    // 新增 / 修改
+    addNew(codeRuleId) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(codeRuleId)
+      })
+    },
+    goback() {
+      this.$router.go(-1)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/basicData/components/EquipmentScrapGrade-add.vue b/src/views/basicData/components/EquipmentScrapGrade-add.vue
new file mode 100644
index 0000000..b17ce19
--- /dev/null
+++ b/src/views/basicData/components/EquipmentScrapGrade-add.vue
@@ -0,0 +1,144 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-07-06 11:26:28
+ * @Description:
+-->
+<template>
+  <el-dialog
+    :title="!dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter"
+    :visible.sync="visible"
+  >
+    <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="140px" @keyup.enter.native="dataFormSubmit()">
+      <el-form-item :label="$t('module.basicData.equipment.EquipmentName')" prop="equipmentId">
+        <el-select v-model="dataForm.equipmentId" filterable :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.EquipmentName')])" clearable>
+          <el-option
+            v-for="item in equipmentArr"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.EquipmentScrapGrade.ScrapGrade')" prop="scrapsGradeId">
+        <el-select v-model="dataForm.scrapsGradeId" filterable :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.EquipmentScrapGrade.ScrapGrade')])" clearable>
+          <el-option
+            v-for="item in scrapsArr"
+            :key="item.id"
+            :label="item.dataName"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { EquipmentScrapGradeDetail, EquipmentScrapGradeUpdate, EquipmentScrapGradeAdd } from '@/api/basicData/EquipmentScrapGrade'
+
+import { equipmentInfoList } from '@/api/basicData/Equipment/equipmentInfo'
+import { dataDictionaryDataList } from '@/api/basicData/dataDictionary'
+
+export default {
+  data() {
+    return {
+      visible: false,
+      scrapsArr: [],
+      equipmentArr: [],
+      dataForm: {
+        id: 0,
+        equipmentId: '',
+        scrapsGradeId: '',
+        remark: ''
+      },
+      dataRule: {
+        equipmentId: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.equipment.EquipmentName')]), trigger: 'blur' }
+        ],
+        scrapsGradeId: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.EquipmentScrapGrade.ScrapGrade')]), trigger: 'change' }
+        ]
+      }
+    }
+  },
+  methods: {
+    init(id) {
+      equipmentInfoList({
+        current: 1,
+        size: 999
+      }).then(response => {
+        if (response.data.records) {
+          this.equipmentArr = response.data.records
+        } else {
+          this.equipmentArr.splice(0, this.equipmentArr.length)
+        }
+      })
+      dataDictionaryDataList({
+        current: 1,
+        size: 999,
+        dictTypeId: '1412216979622785026'
+      }).then(response => {
+        if (response.data.records) {
+          this.scrapsArr = response.data.records
+        } else {
+          this.scrapsArr.splice(0, this.scrapsArr.length)
+        }
+      })
+      this.dataForm.id = id || ''
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          EquipmentScrapGradeDetail(this.dataForm.id).then(res => {
+            this.dataForm = res.data
+          })
+        }
+      })
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          const data = {
+            'equipmentId': this.dataForm.equipmentId,
+            'scrapsGradeId': this.dataForm.scrapsGradeId,
+            'id': this.dataForm.id
+          }
+          if (this.dataForm.id) {
+            EquipmentScrapGradeUpdate(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          } else {
+            EquipmentScrapGradeAdd(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          }
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/basicData/components/ProductAttr-add.vue b/src/views/basicData/components/ProductAttr-add.vue
new file mode 100644
index 0000000..1471a52
--- /dev/null
+++ b/src/views/basicData/components/ProductAttr-add.vue
@@ -0,0 +1,134 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-04-07 17:00:50
+ * @Description:
+-->
+<template>
+  <el-drawer
+    :append-to-body="true"
+    :show-close="false"
+    :visible.sync="visible"
+    size="38%"
+  >
+    <div slot="title" style=" background-color:#02BCFF;font-size:1.5em;color:white;padding:5px 20px">{{ !dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter }}</div>
+    <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="100px" @keyup.enter.native="dataFormSubmit()">
+      <el-form-item :label="$t('module.basicData.visual.AttributeName')" prop="name">
+        <el-input v-model="dataForm.name" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.AttributeName')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.visual.AttributeValue')" prop="value">
+        <el-input v-model="dataForm.value" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.AttributeValue')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.visual.AttributeCode')" prop="code">
+        <el-input v-model="dataForm.code" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.AttributeCode')])" clearable />
+      </el-form-item>
+    </el-form>
+    <div class="drawer-footer">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
+    </div>
+  </el-drawer>
+</template>
+
+<script>
+import { productDetail, productUpdate, productAdd, productCode } from '@/api/basicData/ProductAttr'
+
+export default {
+  props: {
+    productId: {
+      type: String,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      dataForm: {
+        id: 0,
+        name: '',
+        value: '',
+        code: ''
+      },
+      dataRule: {
+        name: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.visual.AttributeName')]), trigger: 'blur' }
+        ],
+        code: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.visual.AttributeCode')]), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    init(id) {
+      this.dataForm.id = id || ''
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          productDetail(this.dataForm.id).then(res => {
+            this.dataForm.name = res.data.name
+            this.dataForm.value = res.data.value
+            this.dataForm.code = res.data.code
+          })
+        } else {
+          productCode().then(res => {
+            this.dataForm.code = res.data
+          })
+        }
+      })
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          const data = {
+            'name': this.dataForm.name,
+            'value': this.dataForm.value,
+            'productId': this.productId,
+            'code': this.dataForm.code,
+            'id': this.dataForm.id
+          }
+          if (this.dataForm.id) {
+            productUpdate(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          } else {
+            productAdd(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.drawer-footer {
+  width: 100%;
+  margin-top: 50px;
+  border-top: 1px solid #e8e8e8;
+  padding: 10px 50px;
+  text-align: left;
+  background: #fff;
+}
+</style>
diff --git a/src/views/basicData/components/ProductPool-add.vue b/src/views/basicData/components/ProductPool-add.vue
new file mode 100644
index 0000000..269be6a
--- /dev/null
+++ b/src/views/basicData/components/ProductPool-add.vue
@@ -0,0 +1,252 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-04-16 15:01:37
+ * @specifications:
+-->
+<template>
+  <el-drawer
+    :visible.sync="visible"
+    :show-close="false"
+    :wrapper-closable="false"
+    size="65%"
+  >
+    <div slot="title" style=" background-color:#02BCFF;font-size:1.5em;color:white;padding:5px 20px">{{ isdetail? 'btn.detail' : !dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter }}</div>
+    <div style="margin:0 15px">
+      <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="100px" @keyup.enter.native="dataFormSubmit()">
+        <el-form-item :label="$t('module.basicData.productPool.productName')" prop="name">
+          <el-input v-model="dataForm.name" :disabled="isdetail" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.productPool.productName')])" clearable />
+        </el-form-item>
+        <el-form-item :label="$t('module.basicData.productPool.productCode')" prop="code">
+          <el-input v-model="dataForm.code" :disabled="isdetail" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.productPool.productCode')])" clearable />
+        </el-form-item>
+        <el-form-item :label="$t('module.basicData.visual.Specs')" prop="specifications">
+          <el-input v-model="dataForm.specifications" :disabled="isdetail" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Specs')])" clearable />
+        </el-form-item>
+        <el-form-item :label="$t('module.basicData.visual.unit')" prop="dictDataId">
+          <el-select v-model="dataForm.dictDataId" :disabled="isdetail" filterable :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.unit')])" clearable>
+            <el-option
+              v-for="item in unitArr"
+              :key="item.id"
+              :label="item.dataName"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <div style="margin:20px">
+        <el-button type="success" @click="goback()">{{ 'btn.back' | i18nFilter }}</el-button>
+        <el-button v-if="isdetail" type="primary" @click="goEdit()">{{ 'btn.edit' | i18nFilter }}</el-button>
+        <span v-if="!isdetail">
+          <el-button type="primary" @click="dataFormSubmit()">{{ 'btn.save' | i18nFilter }}</el-button>
+          <el-button v-if="listQuery.productId" type="primary" @click="addNew()">{{ 'btn.addattr' | i18nFilter }}</el-button>
+        </span>
+      </div>
+      <div style="height:380px;overflow:auto">
+        <base-table
+          :page="listQuery.current"
+          :limit="listQuery.size"
+          :table-config="tableProps"
+          :table-data="list"
+        >
+          <method-btn
+            v-if="!isdetail"
+            slot="handleBtn"
+            :method-list="tableBtn"
+            @clickBtn="handleClick"
+          />
+        </base-table>
+      </div>
+    </div>
+    <product-attr-add v-if="addOrUpdateVisible" ref="addOrUpdate" :product-id="listQuery.productId" @refreshDataList="getList" />
+  </el-drawer>
+</template>
+
+<script>import i18n from '@/lang'
+import { ProductPoolDetail, ProductPoolUpdate, ProductPoolAdd, ProductPoolCode, ProductPoolUnit } from '@/api/basicData/ProductPool'
+import { productList, productDelete } from '@/api/basicData/ProductAttr'
+import BaseTable from '@/components/BaseTable'
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import productAttrAdd from './ProductAttr-add'
+import { timeFormatter } from '@/filters'
+
+const tableBtn = [
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  }
+]
+const tableProps = [
+  {
+    prop: 'createTime',
+    label: i18n.t('module.basicData.factory.createTime'),
+    filter: timeFormatter,
+    align: 'center'
+  },
+  {
+    prop: 'name',
+    label: i18n.t('module.basicData.visual.AttributeName'),
+    align: 'center'
+  },
+  {
+    prop: 'value',
+    label: i18n.t('module.basicData.visual.AttributeValue'),
+    align: 'center'
+  },
+  {
+    prop: 'code',
+    label: i18n.t('module.basicData.visual.AttributeCode'),
+    align: 'center'
+  }
+]
+
+export default {
+  components: { BaseTable, MethodBtn, productAttrAdd },
+  data() {
+    return {
+      visible: false,
+      addOrUpdateVisible: false,
+      tableBtn,
+      trueWidth: 200,
+      tableProps,
+      list: [],
+      unitArr: [],
+      dataForm: {
+        id: 0,
+        name: '',
+        code: '',
+        specifications: '',
+        dictDataId: ''
+      },
+      listQuery: {
+        current: 1,
+        size: 10,
+        productId: ''
+      },
+      dataRule: {
+        name: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.productPool.productName')]), trigger: 'blur' }
+        ],
+        code: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.productPool.productCode')]), trigger: 'blur' }
+        ]
+      },
+      isdetail: false
+    }
+  },
+  methods: {
+    init(id, isdetail) {
+      this.isdetail = false
+      this.isdetail = isdetail
+      this.dataForm.id = id || ''
+      this.listQuery.productId = ''
+      this.list.splice(0, this.list.length)
+      ProductPoolUnit().then(res => {
+        this.unitArr = res.data
+      })
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          ProductPoolDetail(this.dataForm.id).then(res => {
+            this.dataForm.name = res.data.name
+            this.dataForm.code = res.data.code
+            this.dataForm.specifications = res.data.specifications
+            this.dataForm.dictDataId = res.data.dictDataId
+          })
+          this.listQuery.productId = this.dataForm.id
+          productList(this.listQuery).then(response => {
+            if (response.data.records) {
+              this.list = response.data.records
+            } else {
+              this.list.splice(0, this.list.length)
+            }
+          })
+        } else {
+          ProductPoolCode().then(res => {
+            this.dataForm.code = res.data
+          })
+        }
+      })
+    },
+    getList() {
+      productList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+      })
+    },
+    handleClick(raw) {
+      if (raw.type === 'delete') {
+        this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`, this.$t('module.basicData.visual.Tips'), {
+          confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+          cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+          type: 'warning'
+        }).then(() => {
+          productDelete(raw.data.id).then(response => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+              }
+            })
+          })
+        }).catch(() => {})
+      } else {
+        this.addNew(raw.data.id)
+      }
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          const data = {
+            'name': this.dataForm.name,
+            'code': this.dataForm.code,
+            'specifications': this.dataForm.specifications,
+            'dictDataId': this.dataForm.dictDataId,
+            'id': this.dataForm.id
+          }
+          if (this.dataForm.id) {
+            ProductPoolUpdate(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500
+              })
+            })
+          } else {
+            ProductPoolAdd(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500
+              })
+              this.listQuery.productId = res.data.id
+            })
+          }
+        }
+      })
+    },
+    goEdit() {
+      this.isdetail = false
+    },
+    // 新增 / 修改
+    addNew(id) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id)
+      })
+    },
+    goback() {
+      this.$emit('refreshDataList')
+      this.visible = false
+    }
+  }
+}
+</script>
diff --git a/src/views/basicData/components/ScrapInfo-add.vue b/src/views/basicData/components/ScrapInfo-add.vue
new file mode 100644
index 0000000..d58629f
--- /dev/null
+++ b/src/views/basicData/components/ScrapInfo-add.vue
@@ -0,0 +1,198 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-25 16:23:37
+ * @Description:
+-->
+<template>
+  <el-dialog
+    :title="!dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter"
+    :visible.sync="visible"
+  >
+    <el-row :gutter="15">
+      <el-form
+        ref="dataForm"
+        :model="dataForm"
+        :rules="rules"
+        size="medium"
+        label-width="110px"
+        label-position="left"
+      >
+        <el-col :span="8">
+          <el-form-item :label="$t('module.basicData.ScrapInfo.WasteName')" prop="name">
+            <el-input v-model="dataForm.name" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.ScrapInfo.WasteName')])" clearable :style="{width: '100%'}" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item :label="$t('module.basicData.ScrapInfo.WasteCode')" prop="code">
+            <el-input v-model="dataForm.code" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.ScrapInfo.WasteCode')])" clearable :style="{width: '100%'}" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item v-if="false" :label="$t('module.basicData.ScrapInfo.PlateId')" prop="basalId">
+            <el-input v-model="dataForm.basalId" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.ScrapInfo.PlateId')])" clearable :style="{width: '100%'}" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item :label="$t('module.basicData.ScrapInfo.updateTime')" prop="boardTime">
+            <el-date-picker
+              v-model="dataForm.boardTime"
+              format="yyyy-MM-dd"
+              value-format="yyyy-MM-dd"
+              :style="{width: '100%'}"
+              :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.ScrapInfo.updateTime')])"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item :label="$t('module.basicData.ScrapInfo.RegisterPerson')" prop="creatorName">
+            <el-input v-model="dataForm.creatorName" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.ScrapInfo.RegisterPerson')])" clearable :style="{width: '100%'}" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item :label="$t('module.basicData.ScrapInfo.source')" prop="source">
+            <el-input v-model="dataForm.source" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.ScrapInfo.source')])" clearable :style="{width: '100%'}" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item :label="$t('module.basicData.ScrapInfo.wasteGrade')" prop="wasteGrade">
+            <el-select
+              v-model="dataForm.wasteGrade"
+              :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.ScrapInfo.wasteGrade')])"
+              clearable
+              :style="{width: '100%'}"
+            >
+              <el-option
+                v-for="item in wasteGradeArr"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item :label="$t('module.basicData.ScrapInfo.cause')" prop="description">
+            <el-input
+              v-model="dataForm.description"
+              type="textarea"
+              :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.ScrapInfo.cause')])"
+              :autosize="{minRows: 4, maxRows: 4}"
+              :style="{width: '100%'}"
+            />
+          </el-form-item>
+        </el-col>
+      </el-form>
+    </el-row>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { ScrapInfoDetail, ScrapInfoUpdate, ScrapInfoAdd, ScrapInfoCode } from '@/api/basicData/ScrapInfo'
+
+export default {
+  data() {
+    return {
+      visible: false,
+      dataForm: {
+        id: 0,
+        name: '',
+        code: '',
+        basalId: '',
+        source: '',
+        boardTime: '',
+        creatorName: '',
+        wasteGrade: '',
+        description: ''
+      },
+      wasteGradeArr: [{
+        value: 0,
+        label: '加工可用'
+      },
+      {
+        value: 1,
+        label: '完全废品'
+      }],
+      rules: {
+        name: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.ScrapInfo.WasteName')]),
+          trigger: 'blur'
+        }],
+        code: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.ScrapInfo.WasteCode')]),
+          trigger: 'blur'
+        }]
+      }
+    }
+  },
+  methods: {
+    init(id) {
+      this.dataForm.id = id || ''
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          ScrapInfoDetail(this.dataForm.id).then(res => {
+            this.dataForm = res.data
+          })
+        } else {
+          ScrapInfoCode().then(res => {
+            this.dataForm.code = res.data
+          })
+        }
+      })
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          const data = {
+            'basalId': this.dataForm.basalId,
+            'source': this.dataForm.source,
+            'boardTime': this.dataForm.boardTime,
+            'creatorName': this.dataForm.creatorName,
+            'wasteGrade': this.dataForm.wasteGrade,
+            'description': this.dataForm.description,
+            'name': this.dataForm.name,
+            'code': this.dataForm.code,
+            'id': this.dataForm.id
+          }
+          if (this.dataForm.id) {
+            ScrapInfoUpdate(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          } else {
+            ScrapInfoAdd(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          }
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/basicData/components/ScrapInfoCause.vue b/src/views/basicData/components/ScrapInfoCause.vue
new file mode 100644
index 0000000..4fe0d8e
--- /dev/null
+++ b/src/views/basicData/components/ScrapInfoCause.vue
@@ -0,0 +1,45 @@
+<!--
+ * @Date: 2021-01-07 20:09:37
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-06 14:58:10
+ * @FilePath: \basic-admin\src\components\BaseTable\subcomponents\CheckDetail.vue
+ * @Description:
+-->
+<template>
+  <span>
+    <el-button type="text" size="small" @click="emitClick">{{ $t('module.basicData.ScrapInfo.cause') }}</el-button>
+  </span>
+</template>
+
+<script>
+export default {
+  props: {
+    injectData: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  methods: {
+    emitClick() {
+      console.log(this.injectData)
+      const h = this.$createElement
+      this.$msgbox({
+        title: this.$t('module.basicData.ScrapInfo.cause'),
+        message: h('div', null, [
+          h('span', null, `${this.$t('module.basicData.ScrapInfo.PlateId')}:${this.injectData.basalId}`),
+          h('br'),
+          h('span', null, `${this.$t('module.basicData.ScrapInfo.source')}:${this.injectData.source}`),
+          h('br'),
+          h('span', null, `${this.$t('module.basicData.ScrapInfo.updateTime')}:${this.injectData.createTime}`),
+          h('br'),
+          h('div', null, `${this.$t('module.basicData.ScrapInfo.cause')}:${this.injectData.description}`)
+        ]),
+        showCancelButton: true,
+        confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+        cancelButtonText: '取消'
+      }).then(action => {
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/basicData/components/StateConfig-add.vue b/src/views/basicData/components/StateConfig-add.vue
new file mode 100644
index 0000000..1dec964
--- /dev/null
+++ b/src/views/basicData/components/StateConfig-add.vue
@@ -0,0 +1,114 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-04-07 13:42:54
+ * @Description:
+-->
+<template>
+  <el-dialog
+    :title="!dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter"
+    :visible.sync="visible"
+  >
+    <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="120px" @keyup.enter.native="dataFormSubmit()">
+      <el-form-item :label="$t('module.basicData.StateConfig.status')" prop="status">
+        <el-input v-model="dataForm.status" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.StateConfig.status')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.StateConfig.DisplayColor')" prop="colour">
+        <el-color-picker v-model="dataForm.colour" />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.StateConfig.Twinkle')" prop="twinkle">
+        <el-switch
+          v-model="dataForm.twinkle"
+          :active-value="0"
+          :inactive-value="1"
+          active-color="#13ce66"
+          inactive-color="#AAAAAA"
+        />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.visual.Remarks')" prop="description">
+        <el-input v-model="dataForm.description" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Remarks')])" clearable />
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { StateConfigDetail, StateConfigUpdate, StateConfigAdd } from '@/api/basicData/StateConfig'
+
+export default {
+  data() {
+    return {
+      visible: false,
+      dataForm: {
+        id: 0,
+        status: '',
+        colour: '',
+        twinkle: '',
+        description: ''
+      },
+      dataRule: {
+        status: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.StateConfig.status')]), trigger: 'blur' }
+        ],
+        colour: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.StateConfig.DisplayColor')]), trigger: 'change' }
+        ]
+      }
+    }
+  },
+  methods: {
+    init(id) {
+      this.dataForm.id = id || ''
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          StateConfigDetail(this.dataForm.id).then(res => {
+            this.dataForm.status = res.data.status
+            this.dataForm.colour = res.data.colour
+            this.dataForm.description = res.data.description
+          })
+        }
+      })
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          const data = this.dataForm
+          if (this.dataForm.id) {
+            StateConfigUpdate(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          } else {
+            StateConfigAdd(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          }
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/basicData/components/VisualImgInfo.vue b/src/views/basicData/components/VisualImgInfo.vue
new file mode 100644
index 0000000..a20b1a5
--- /dev/null
+++ b/src/views/basicData/components/VisualImgInfo.vue
@@ -0,0 +1,48 @@
+<!--
+ * @Date: 2021-01-07 20:09:37
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-03-12 16:32:06
+ * @FilePath: \basic-admin\src\components\BaseTable\subcomponents\CheckDetail.vue
+ * @Description:
+-->
+<template>
+  <span>
+    <el-button type="text" size="small" @click="emitClick">{{ 'btn.see' | i18nFilter }}</el-button>
+    <el-dialog width="1000px" top="50px" :title="$t('module.basicData.visual.annex')" :visible.sync="showPic">
+      <img :src="imageUrl" style="width: 100%" alt="">
+    </el-dialog>
+  </span>
+</template>
+
+<script>
+import { getUrl } from '@/api/file'
+import { blobToBase64 } from '@/utils/blobToBase64'
+
+export default {
+  props: {
+    injectData: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      showPic: false,
+      imageUrl: null
+    }
+  },
+  methods: {
+    emitClick() {
+      getUrl({
+        attachmentId: this.injectData.annexId,
+        type: 0
+      }).then(blob => {
+        blobToBase64(blob.data).then(res => {
+          this.imageUrl = res
+          this.showPic = true
+        })
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/basicData/components/VisualInfo-add.vue b/src/views/basicData/components/VisualInfo-add.vue
new file mode 100644
index 0000000..88dab7d
--- /dev/null
+++ b/src/views/basicData/components/VisualInfo-add.vue
@@ -0,0 +1,171 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-03-15 10:48:36
+ * @Description:
+-->
+<template>
+  <el-dialog
+    :title="!dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter"
+    :close-on-click-modal="false"
+    :visible.sync="visible"
+    @close="clearAnnex"
+  >
+    <el-row :gutter="15">
+      <el-form
+        ref="dataForm"
+        :model="dataForm"
+        :rules="rules"
+        size="medium"
+        label-width="160px"
+        label-position="left"
+      >
+        <el-col :span="24">
+          <el-form-item :label="$t('module.basicData.visual.areaName')" prop="name">
+            <el-input v-model="dataForm.name" :placeholder="['placeholder.input', $t('module.basicData.visual.areaName')] | i18nFilterForm" clearable :style="{width: '100%'}" />
+          </el-form-item>
+        </el-col>
+        <!-- <el-col v-if="!dataForm.id" :span="24">
+          <el-form-item :label="$t('module.basicData.visual.baseRouteName')" prop="trajectory">
+            <el-input v-model="baseRouteName" :placeholder="['placeholder.input', $t('module.basicData.visual.baseRouteName')] | i18nFilterForm" clearable :style="{width: '100%'}" @change="changeTrajectory" />
+          </el-form-item>
+        </el-col> -->
+        <el-col :span="24">
+          <el-form-item :label="$t('module.basicData.visual.isStock')" prop="stock">
+            <el-switch v-model="dataForm.stock" :active-value="1" :inactive-value="0" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item :label="$t('module.basicData.visual.annex')" prop="annexId">
+            <Single-image v-if="visible" :file-id="dataForm.annexId" @input="updateAnnex" />
+          </el-form-item>
+        </el-col>
+      </el-form>
+    </el-row>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import Vue from 'vue'
+import SingleImage from '@/components/Upload/SingleImage'
+import { VisualDetail, VisualUpdate, VisualAdd } from '@/api/basicData/visual'
+
+export default {
+  components: {
+    SingleImage
+  },
+  data() {
+    return {
+      visible: false,
+      baseRouteName: null,
+      dataForm: {
+        id: 0,
+        name: null,
+        annexId: null,
+        stock: 0
+      },
+      rules: {
+        name: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.visual.areaName')]),
+          trigger: 'blur'
+        }],
+        annexId: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.upload', this.$t('module.basicData.visual.annex')]),
+          trigger: 'blur'
+        }],
+        stock: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.select', this.$t('module.basicData.visual.isStock')]),
+          trigger: 'blur'
+        }]
+        // trajectory: [{
+        //   required: true,
+        //   message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.visual.baseRouteName')]),
+        //   trigger: 'blur'
+        // }]
+      }
+    }
+  },
+  methods: {
+    init(id) {
+      this.dataForm.id = id || ''
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          VisualDetail(this.dataForm.id).then(res => {
+            this.dataForm = res.data
+          })
+        }
+      })
+    },
+    // 附件变更
+    updateAnnex(fileInfo) {
+      if (fileInfo) {
+        this.dataForm.annexId = fileInfo.id
+      } else {
+        this.dataForm.annexId = ''
+      }
+    },
+    changeTrajectory(val) {
+      if (val || val === 0) {
+        this.dataForm.trajectory = JSON.stringify([
+          { lineName: this.baseRouteName, list: [] }
+        ])
+      } else {
+        this.dataForm.trajectory = null
+      }
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          const data = {
+            'name': this.dataForm.name,
+            'annexId': this.dataForm.annexId,
+            'id': this.dataForm.id,
+            'stock': this.dataForm.stock,
+            'type': 1
+          }
+          if (this.dataForm.id) {
+            VisualUpdate(data).then(res => {
+              this.$message({
+                message: this.$t('baseTip.OperationSucc'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          } else {
+            VisualAdd(data).then(res => {
+              this.$message({
+                message: this.$t('baseTip.OperationSucc'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          }
+        }
+      })
+    },
+    // 清除附件信息
+    clearAnnex() {
+      Vue.set(this.dataForm, 'annexId', null)
+    }
+  }
+}
+</script>
diff --git a/src/views/basicData/components/VisualLocationInfo.vue b/src/views/basicData/components/VisualLocationInfo.vue
new file mode 100644
index 0000000..aefdbd1
--- /dev/null
+++ b/src/views/basicData/components/VisualLocationInfo.vue
@@ -0,0 +1,194 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-03-15 10:48:36
+ * @Description:
+-->
+<template>
+  <span v-if="injectData.stock">
+    <el-button type="text" size="small" @click="emitClick">{{ 'btn.edit' | i18nFilter }}</el-button>
+    <el-dialog
+      :title="!dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter"
+      :close-on-click-modal="false"
+      :visible.sync="visible"
+      top="10vh"
+      @close="clearAnnex"
+    >
+      <div class="location-box">
+        <el-row class="location-form" :gutter="15">
+          <el-form
+            ref="dataForm"
+            :model="dataForm"
+            :rules="rules"
+            size="medium"
+            label-width="160px"
+            label-position="left"
+          >
+            <el-col :span="24">
+              <el-form-item :label="$t('module.basicData.visual.areaName')" prop="name">
+                <el-input v-model="areaName" disabled :placeholder="['placeholder.input', $t('module.basicData.visual.areaName')] | i18nFilterForm" clearable :style="{width: '100%'}" />
+              </el-form-item>
+            </el-col>
+            <!-- <el-col v-if="!dataForm.id" :span="24">
+              <el-form-item :label="$t('module.basicData.visual.baseRouteName')" prop="trajectory">
+                <el-input v-model="baseRouteName" :placeholder="['placeholder.input', $t('module.basicData.visual.baseRouteName')] | i18nFilterForm" clearable :style="{width: '100%'}" @change="changeTrajectory" />
+              </el-form-item>
+            </el-col> -->
+            <el-col :span="24">
+              <el-form-item :label="$t('module.basicData.visual.annex')" prop="annexId">
+                <Single-image v-if="visible" :file-id="dataForm.annexId" @input="updateAnnex" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item v-if="dataForm.id" :label="$t('module.basicData.visual.editLocation')">
+                <el-button style="float: left" type="primary" @click="showPointModel">{{ $t('module.basicData.visual.editLocation') }}</el-button>
+              </el-form-item>
+            </el-col>
+          </el-form>
+        </el-row>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+        <el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
+      </span>
+      <Visual-location-info-point ref="locationpoint" :inject-data="dataForm" @emitData="emitData" />
+    </el-dialog>
+  </span>
+</template>
+
+<script>
+import Vue from 'vue'
+import SingleImage from '@/components/Upload/SingleImage'
+import VisualLocationInfoPoint from './VisualLocationInfoPoint'
+import { VisualUpdate, VisualAdd, VisualList } from '@/api/basicData/visual'
+
+export default {
+  components: {
+    SingleImage,
+    VisualLocationInfoPoint
+  },
+  props: {
+    injectData: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      baseRouteName: null,
+      areaName: null,
+      dataForm: {
+        id: null,
+        annexId: null
+      },
+      rules: {
+        annexId: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.upload', this.$t('module.basicData.visual.annex')]),
+          trigger: 'blur'
+        }],
+        trajectory: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.visual.baseRouteName')]),
+          trigger: 'blur'
+        }]
+      }
+    }
+  },
+  methods: {
+    emitClick() {
+      this.areaName = this.injectData.name
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.injectData.id) {
+          VisualList({
+            parentId: this.injectData.id,
+            current: 1,
+            size: 10
+          }).then(res => {
+            if (res.data.records.length) {
+              this.dataForm = res.data.records[0]
+            }
+          })
+        }
+      })
+    },
+    // 附件变更
+    updateAnnex(fileInfo) {
+      if (fileInfo) {
+        this.dataForm.annexId = fileInfo.id
+      } else {
+        this.dataForm.annexId = ''
+      }
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          const data = {
+            'annexId': this.dataForm.annexId,
+            'id': this.dataForm.id,
+            'parentId': this.injectData.id,
+            'type': 2
+          }
+          if (this.dataForm.id) {
+            VisualUpdate(data).then(res => {
+              this.$message({
+                message: this.$t('baseTip.OperationSucc'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('emitData', {
+                    type: ['refresh']
+                  })
+                }
+              })
+            })
+          } else {
+            VisualAdd(data).then(res => {
+              this.$message({
+                message: this.$t('baseTip.OperationSucc'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          }
+        }
+      })
+    },
+    // 清除附件信息
+    clearAnnex() {
+      Vue.set(this.dataForm, 'annexId', null)
+    },
+    showPointModel() {
+      this.$refs.locationpoint.emitClick()
+    },
+    emitData(v) {
+      console.log(v)
+      if (v.type.indexOf('refresh') >= 0) {
+        this.emitClick()
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.location-box {
+  width: 100%;
+  overflow: hidden;
+  .location-form{
+    width: calc(100% + 24px);
+    max-height: calc(80vh - 181px);
+    overflow-y: scroll;
+  }
+}
+</style>
diff --git a/src/views/basicData/components/VisualLocationInfoPoint.vue b/src/views/basicData/components/VisualLocationInfoPoint.vue
new file mode 100644
index 0000000..87d5973
--- /dev/null
+++ b/src/views/basicData/components/VisualLocationInfoPoint.vue
@@ -0,0 +1,279 @@
+<!--
+ * @Date: 2021-01-07 20:09:37
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-04-16 15:00:51
+ * @FilePath: \basic-admin\src\components\BaseTable\subcomponents\CheckDetail.vue
+ * @Description:
+-->
+<template>
+  <span>
+    <el-dialog
+      :id="'imgbox' + injectData.id"
+      :close-on-click-modal="false"
+      :modal="false"
+      width="60%"
+      top="50px"
+      :title="$t('module.basicData.visual.locationInformation')"
+      :visible.sync="showPic"
+    >
+      <div slot="title">
+        {{ $t('module.basicData.visual.locationInformation') }}
+        <el-popover
+          placement="top-start"
+          :title="$t('module.basicData.visual.help')"
+          width="400"
+          trigger="hover"
+          :content="$t('module.basicData.visual.tip')"
+        >
+          <svg-icon slot="reference" class-name="international-icon" icon-class="helptitle" style="cursor: pointer" />
+        </el-popover>
+      </div>
+      <div class="imgbox">
+        <img id="lingImg" :src="imageUrl" style="width: 100%" alt="" @click="setPoint">
+        <el-popover
+          v-for="(item, index) in pointList"
+          :key="index"
+          v-model="item.show"
+          placement="right"
+          trigger="click"
+          @hide="clearIndex"
+        >
+          <el-select v-model="eqId" clearable filterable>
+            <el-option v-for="i in equipmentList" :key="i.id" :value="i.id" :label="i.name" />
+          </el-select>
+          <div style="text-align: right; margin-top: 5px">
+            <el-button type="danger" @click="delEqPoint(index)">{{ 'btn.delete' | i18nFilter }}</el-button>
+            <el-button type="primary" @click="confirmPointEq(index)">{{ 'btn.confirm' | i18nFilter }}</el-button>
+          </div>
+          <el-button
+            slot="reference"
+            class="point-badge"
+            :style="{left: `calc(${item.pointX} - 10px)`, top: `calc(${item.pointY} - 10px)`}"
+            type="danger"
+            @click="handleIndex(index)"
+          >
+            {{ index + 1 }}
+          </el-button>
+        </el-popover>
+      </div>
+      <el-row style="text-align:left">
+        <vuedraggable v-model="pointList" group="route">
+          <el-tag v-for="(item, index) in pointList" :key="index" type="info" closable style="margin: 5px" @close="delEqPoint(index)">
+            {{ index + 1 }}、{{ $t('module.basicData.visual.location') }}：{{ equipmentObj[item.id] }}
+          </el-tag>
+        </vuedraggable>
+      </el-row>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="showPic = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+        <el-button @click="resetPoint()">{{ 'btn.reset' | i18nFilter }}</el-button>
+        <el-button type="primary" @click="pointConfirm()">{{ 'btn.confirm' | i18nFilter }}</el-button>
+      </span>
+    </el-dialog>
+  </span>
+</template>
+
+<script>
+import Vue from 'vue'
+import vuedraggable from 'vuedraggable'
+import { getUrl } from '@/api/file'
+import { locationList, VisualUpdate } from '@/api/basicData/visual'
+import { blobToBase64 } from '@/utils/blobToBase64'
+
+export default {
+  components: {
+    vuedraggable
+  },
+  props: {
+    injectData: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      showPic: false,
+      imageUrl: null,
+      windowWidth: null,
+      pointList: [],
+      resetPointList: [],
+      equipmentList: [],
+      equipmentObj: {},
+      addNow: false,
+      eqId: null,
+      pointIndex: null
+    }
+  },
+  watch: {
+    pointIndex: function(val) {
+      if (val || val === 0) {
+        this.eqId = this.pointList[val].id
+      } else {
+        this.eqId = null
+      }
+    },
+    showPic: function(val) {
+      if (val && this.injectData.equipmentPoint) {
+        this.pointList = JSON.parse(this.injectData.equipmentPoint).map(item => {
+          item.show = false
+          return item
+        })
+        this.resetPointList = JSON.parse(this.injectData.equipmentPoint).map(item => {
+          item.show = false
+          return item
+        })
+      }
+      if (!val) {
+        this.addNow = false
+        this.eqId = null
+        this.pointIndex = null
+        this.pointList = []
+        this.resetPointList = []
+      }
+    }
+  },
+  mounted() {
+    this.windowWidth = window.innerWidth
+    this.getEqList()
+    window.addEventListener('resize', () => {
+      this.windowWidth = window.innerWidth
+    })
+  },
+  methods: {
+    // 获取设备数据字典
+    getEqList() {
+      locationList({}).then(res => {
+        this.equipmentList = res.data
+        this.equipmentList.map(item => {
+          this.equipmentObj[item.id] = item.name
+        })
+      }).catch(() => {
+        setTimeout(() => {
+          this.getEqList()
+        }, 10000)
+      })
+    },
+    emitClick() {
+      getUrl({
+        attachmentId: this.injectData.annexId,
+        type: 0
+      }).then(blob => {
+        blobToBase64(blob.data).then(res => {
+          this.imageUrl = res
+          this.showPic = true
+        })
+      })
+    },
+    // 添加位置点
+    setPoint(e) {
+      if (!this.addNow) {
+        const windowWidth = document.getElementById('imgbox' + this.injectData.id).clientWidth
+        const scrollY = document.getElementById('imgbox' + this.injectData.id).scrollTop
+        const [imgX, imgY] = [document.getElementById('lingImg').width, document.getElementById('lingImg').height]
+        const pointY = ((e.clientY + scrollY - 135) / imgY) * 100 + '%'
+        const pointX = ((e.clientX - windowWidth * 0.2 - 20) / imgX) * 100 + '%'
+        this.pointList.push({
+          id: null,
+          pointX,
+          pointY,
+          show: false
+        })
+        setTimeout(() => {
+          Vue.set(this.pointList[this.pointList.length - 1], 'show', true)
+          this.pointIndex = this.pointList.length - 1
+        }, 100)
+        this.addNow = true
+      } else {
+        this.$message.warning(this.$t('module.basicData.visual.addNow'))
+      }
+    },
+    // 删除位置点
+    delEqPoint(index) {
+      if (index === this.pointList.length - 1) {
+        this.addNow = false
+      } else {
+        Vue.set(this.pointList[index], 'show', false)
+      }
+      this.pointList.splice(index, 1)
+    },
+    // 确认位置点
+    confirmPointEq(index) {
+      if (index === this.pointList.length - 1) {
+        this.addNow = false
+      }
+      for (let i = 0; i < this.pointList.length; i++) {
+        if (this.eqId === null) {
+          this.$message.error(this.$t('module.basicData.visual.unSelect'))
+          return false
+        } else if (this.pointList[i].id === this.eqId) {
+          this.$message.error(this.$t('module.basicData.visual.choiseError'))
+          return false
+        }
+      }
+      Vue.set(this.pointList[index], 'id', this.eqId)
+      Vue.set(this.pointList[index], 'show', false)
+      this.clearIndex()
+      this.$message.success(this.$t('module.basicData.visual.choiseSucc'))
+    },
+    // 保存点击的气泡index
+    handleIndex(index) {
+      this.pointIndex = index
+    },
+    // 清除保存的index
+    clearIndex() {
+      this.pointIndex = null
+    },
+    // 提交位置点信息
+    pointConfirm() {
+      if (this.addNow) {
+        this.$message.warning(this.$t('module.basicData.visual.addNow'))
+      } else {
+        VisualUpdate({
+          id: this.injectData.id,
+          name: this.injectData.name,
+          annexId: this.injectData.annexId,
+          equipmentPoint: JSON.stringify(this.pointList)
+        }).then(res => {
+          this.$message({
+            message: this.$t('baseTip.OperationSucc'),
+            type: 'success',
+            duration: 1500,
+            onClose: () => {
+              this.showPic = false
+              this.$emit('emitData', {
+                type: ['refresh']
+              })
+            }
+          })
+        })
+      }
+    },
+    // 重置
+    resetPoint() {
+      Object.assign(this.pointList, this.resetPointList)
+      this.showPic = false
+      setTimeout(() => {
+        this.showPic = true
+      }, 100)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.imgbox{
+  position: relative;
+  .point-badge{
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 20px;
+    height: 20px;
+    border-radius: 100%;
+    line-height: 20px;
+    font-size: 12px;
+    text-align: center;
+    padding: 0;
+    cursor: pointer;
+  }
+}
+</style>
diff --git a/src/views/basicData/components/VisualPointInfo.vue b/src/views/basicData/components/VisualPointInfo.vue
new file mode 100644
index 0000000..b94f343
--- /dev/null
+++ b/src/views/basicData/components/VisualPointInfo.vue
@@ -0,0 +1,282 @@
+<!--
+ * @Date: 2021-01-07 20:09:37
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-04-16 15:00:51
+ * @FilePath: \basic-admin\src\components\BaseTable\subcomponents\CheckDetail.vue
+ * @Description:
+-->
+<template>
+  <span>
+    <el-button type="text" size="small" @click="emitClick">{{ 'btn.edit' | i18nFilter }}</el-button>
+    <el-dialog
+      :id="'imgbox' + injectData.id"
+      :close-on-click-modal="false"
+      width="60%"
+      top="50px"
+      :title="$t('module.basicData.visual.locationInformation')"
+      :visible.sync="showPic"
+    >
+      <div slot="title">
+        {{ $t('module.basicData.visual.locationInformation') }}
+        <el-popover
+          placement="top-start"
+          :title="$t('module.basicData.visual.help')"
+          width="400"
+          trigger="hover"
+          :content="$t('module.basicData.visual.tip')"
+        >
+          <svg-icon slot="reference" class-name="international-icon" icon-class="helptitle" style="cursor: pointer" />
+        </el-popover>
+      </div>
+      <div v-if="showPic" class="imgbox">
+        <img id="lingImg" :src="imageUrl" style="width: 100%" alt="" @click="setPoint">
+        <el-popover
+          v-for="(item, index) in pointList"
+          :key="index"
+          v-model="item.show"
+          placement="right"
+          trigger="click"
+          @hide="clearIndex"
+        >
+          <el-select v-model="eqId" clearable filterable>
+            <el-option v-for="i in equipmentList" :key="i.id" :value="i.id" :label="i.name" />
+          </el-select>
+          <div style="text-align: right; margin-top: 5px">
+            <el-button type="danger" @click="delEqPoint(index)">{{ 'btn.delete' | i18nFilter }}</el-button>
+            <el-button type="primary" @click="confirmPointEq(index)">{{ 'btn.confirm' | i18nFilter }}</el-button>
+          </div>
+          <el-button
+            slot="reference"
+            class="point-badge"
+            :style="{left: `calc(${item.pointX} - 10px)`, top: `calc(${item.pointY} - 10px)`}"
+            type="danger"
+            @click="handleIndex(index)"
+          >
+            {{ index + 1 }}
+          </el-button>
+        </el-popover>
+      </div>
+      <el-row style="text-align:left">
+        <vuedraggable v-model="pointList" group="route">
+          <el-tag v-for="(item, index) in pointList" :key="index" type="info" closable style="margin: 5px" @close="delEqPoint(index)">
+            {{ index + 1 }}、{{ 'module.basicData.visual.equipment' | i18nFilter }}：{{ equipmentObj[item.id] }}
+          </el-tag>
+        </vuedraggable>
+      </el-row>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="showPic = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+        <el-button @click="resetPoint()">{{ 'btn.reset' | i18nFilter }}</el-button>
+        <el-button type="primary" @click="pointConfirm()">{{ 'btn.confirm' | i18nFilter }}</el-button>
+      </span>
+    </el-dialog>
+  </span>
+</template>
+
+<script>
+import Vue from 'vue'
+import vuedraggable from 'vuedraggable'
+import { getUrl } from '@/api/file'
+import { eqList, VisualUpdate } from '@/api/basicData/visual'
+import { blobToBase64 } from '@/utils/blobToBase64'
+
+export default {
+  components: {
+    vuedraggable
+  },
+  props: {
+    injectData: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      showPic: false,
+      imageUrl: null,
+      windowWidth: null,
+      pointList: [],
+      resetPointList: [],
+      equipmentList: [],
+      equipmentObj: {},
+      addNow: false,
+      eqId: null,
+      pointIndex: null
+    }
+  },
+  watch: {
+    pointIndex: function(val) {
+      if (val || val === 0) {
+        this.eqId = this.pointList[val].id
+      } else {
+        this.eqId = null
+      }
+    },
+    showPic: function(val) {
+      if (val && this.injectData.equipmentPoint) {
+        this.pointList = JSON.parse(this.injectData.equipmentPoint).map(item => {
+          item.show = false
+          return item
+        })
+        this.resetPointList = JSON.parse(this.injectData.equipmentPoint).map(item => {
+          item.show = false
+          return item
+        })
+      }
+      if (!val) {
+        this.addNow = false
+        this.eqId = null
+        this.pointIndex = null
+        this.pointList = []
+        this.resetPointList = []
+      }
+    }
+  },
+  mounted() {
+    this.windowWidth = window.innerWidth
+    this.getEqList()
+    window.addEventListener('resize', () => {
+      this.windowWidth = window.innerWidth
+    })
+  },
+  methods: {
+    // 获取设备数据字典
+    getEqList() {
+      eqList({
+        current: 1,
+        size: 999
+      }).then(res => {
+        this.equipmentList = res.data.records
+        this.equipmentList.map(item => {
+          this.equipmentObj[item.id] = item.name
+        })
+      }).catch(() => {
+        setTimeout(() => {
+          this.getEqList()
+        }, 10000)
+      })
+    },
+    emitClick() {
+      getUrl({
+        attachmentId: this.injectData.annexId,
+        type: 0
+      }).then(blob => {
+        blobToBase64(blob.data).then(res => {
+          this.imageUrl = res
+          this.showPic = true
+        })
+      })
+    },
+    // 添加位置点
+    setPoint(e) {
+      if (!this.addNow) {
+        const windowWidth = document.getElementById('imgbox' + this.injectData.id).clientWidth
+        const scrollY = document.getElementById('imgbox' + this.injectData.id).scrollTop
+        const [imgX, imgY] = [document.getElementById('lingImg').width, document.getElementById('lingImg').height]
+        const pointY = ((e.clientY + scrollY - 135) / imgY) * 100 + '%'
+        const pointX = ((e.clientX - windowWidth * 0.2 - 20) / imgX) * 100 + '%'
+        this.pointList.push({
+          id: null,
+          pointX,
+          pointY,
+          show: false
+        })
+        setTimeout(() => {
+          Vue.set(this.pointList[this.pointList.length - 1], 'show', true)
+          this.pointIndex = this.pointList.length - 1
+        }, 100)
+        this.addNow = true
+      } else {
+        this.$message.warning(this.$t('module.basicData.visual.addNow'))
+      }
+    },
+    // 删除位置点
+    delEqPoint(index) {
+      if (index === this.pointList.length - 1) {
+        this.addNow = false
+      } else {
+        Vue.set(this.pointList[index], 'show', false)
+      }
+      this.pointList.splice(index, 1)
+    },
+    // 确认位置点
+    confirmPointEq(index) {
+      if (index === this.pointList.length - 1) {
+        this.addNow = false
+      }
+      for (let i = 0; i < this.pointList.length; i++) {
+        if (this.eqId === null) {
+          this.$message.error(this.$t('module.basicData.visual.unSelect'))
+          return false
+        } else if (this.pointList[i].id === this.eqId) {
+          this.$message.error(this.$t('module.basicData.visual.choiseError'))
+          return false
+        }
+      }
+      Vue.set(this.pointList[index], 'id', this.eqId)
+      Vue.set(this.pointList[index], 'show', false)
+      this.clearIndex()
+      this.$message.success(this.$t('module.basicData.visual.choiseSucc'))
+    },
+    // 保存点击的气泡index
+    handleIndex(index) {
+      this.pointIndex = index
+    },
+    // 清除保存的index
+    clearIndex() {
+      this.pointIndex = null
+    },
+    // 提交位置点信息
+    pointConfirm() {
+      if (this.addNow) {
+        this.$message.warning(this.$t('module.basicData.visual.addNow'))
+      } else {
+        VisualUpdate({
+          id: this.injectData.id,
+          name: this.injectData.name,
+          annexId: this.injectData.annexId,
+          equipmentPoint: JSON.stringify(this.pointList)
+        }).then(res => {
+          this.$message({
+            message: this.$t('baseTip.OperationSucc'),
+            type: 'success',
+            duration: 1500,
+            onClose: () => {
+              this.showPic = false
+              this.$emit('emitData', {
+                type: ['refresh']
+              })
+            }
+          })
+        })
+      }
+    },
+    // 重置
+    resetPoint() {
+      Object.assign(this.pointList, this.resetPointList)
+      this.showPic = false
+      setTimeout(() => {
+        this.showPic = true
+      }, 100)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.imgbox{
+  position: relative;
+  .point-badge{
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 20px;
+    height: 20px;
+    border-radius: 100%;
+    line-height: 20px;
+    font-size: 12px;
+    text-align: center;
+    padding: 0;
+    cursor: pointer;
+  }
+}
+</style>
diff --git a/src/views/basicData/components/VisualRouteInfo.vue b/src/views/basicData/components/VisualRouteInfo.vue
new file mode 100644
index 0000000..edaa98b
--- /dev/null
+++ b/src/views/basicData/components/VisualRouteInfo.vue
@@ -0,0 +1,475 @@
+<!--
+ * @Date: 2021-01-07 20:09:37
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-04-16 15:01:03
+ * @FilePath: \basic-admin\src\components\BaseTable\subcomponents\CheckDetail.vue
+ * @Description:
+-->
+<template>
+  <span>
+    <el-button type="text" size="small" @click="emitClick">{{ 'btn.edit' | i18nFilter }}</el-button>
+    <el-dialog
+      :id="'imgbox-route-' + injectData.id"
+      :close-on-click-modal="false"
+      width="60%"
+      top="50px"
+      :visible.sync="showPic"
+    >
+      <div slot="title">
+        {{ $t('module.basicData.visual.runningTrack') }}
+        <el-popover
+          placement="top-start"
+          :title="$t('module.basicData.visual.help')"
+          width="400"
+          trigger="hover"
+          :content="$t('module.basicData.visual.tip') + $t('module.basicData.visual.routeTip')"
+        >
+          <svg-icon slot="reference" class-name="international-icon" icon-class="helptitle" style="cursor: pointer" />
+        </el-popover>
+      </div>
+      <el-row :id="'lineSelect' + injectData.id" style="text-align: left; margin-bottom: 10px">
+        <el-select v-model="lineIndex" clearable filterable @change="resetAllStadus">
+          <el-option v-for="(item, index) in routeList" :key="index" :value="index" :label="item.lineName" />
+        </el-select>
+        <el-button type="primary" @click="addLine">{{ 'btn.add' | i18nFilter }}</el-button>
+        <el-button type="primary" @click="editLine">{{ 'btn.edit' | i18nFilter }}</el-button>
+        <el-button type="danger" @click="deleteLine">{{ 'btn.delete' | i18nFilter }}</el-button>
+      </el-row>
+      <div v-if="showPic && lineIndex >= 0" class="imgbox">
+        <canvas :id="'canvas' + injectData.id" class="visual-canvas" width="500" height="500" />
+        <img id="lingImg" :src="imageUrl" style="width: 100%" alt="" @click="setRoute">
+        <el-popover
+          v-for="(item, index) in routeList[lineIndex].list"
+          :key="index"
+          v-model="item.show"
+          placement="right"
+          trigger="click"
+          @hide="clearIndex"
+        >
+          <el-select v-model="eqId" clearable filterable>
+            <el-option v-for="i in equipmentList" :key="i.id" :value="i.id" :label="i.name" />
+          </el-select>
+          <div style="text-align: right; margin-top: 5px">
+            <el-button type="danger" @click="delEqRoute(index)">{{ 'btn.delete' | i18nFilter }}</el-button>
+            <el-button type="primary" @click="confirmRouteEq(index)">{{ 'btn.confirm' | i18nFilter }}</el-button>
+          </div>
+          <el-button
+            slot="reference"
+            class="route-badge"
+            :style="{left: `calc(${item.routeX} - 10px)`, top: `calc(${item.routeY} - 10px)`}"
+            type="success"
+            @click="handleIndex(index)"
+          >
+            {{ index + 1 }}
+          </el-button>
+        </el-popover>
+      </div>
+      <el-row v-if="showPic && lineIndex >= 0" style="text-align:left">
+        <vuedraggable v-model="routeList" group="route">
+          <el-tag v-for="(item, index) in routeList[lineIndex].list" :key="index" type="info" closable style="margin: 5px" @close="delEqRoute(index)">
+            {{ index + 1 }}、{{ 'module.basicData.visual.equipment' | i18nFilter }}：{{ equipmentObj[item.id] }}
+          </el-tag>
+        </vuedraggable>
+      </el-row>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="showPic = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+        <el-button @click="resetRoute()">{{ 'btn.reset' | i18nFilter }}</el-button>
+        <el-button type="primary" @click="routeConfirm()">{{ 'btn.confirm' | i18nFilter }}</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog
+      :title="addLineStatus ? 'btn.add' : 'btn.edit' | i18nFilter"
+      :close-on-click-modal="false"
+      :visible.sync="lineShow"
+    >
+      <el-form
+        ref="lineData"
+        :model="lineData"
+        :rules="lineDataRules"
+        size="medium"
+        label-width="120px"
+        label-position="left"
+      >
+        <el-col :span="24">
+          <el-form-item :label="$t('module.basicData.visual.editLineName')" prop="name">
+            <el-input v-model="lineData.editLineName" :placeholder="['placeholder.input', $t('module.basicData.visual.editLineName')] | i18nFilterForm" clearable :style="{width: '100%'}" />
+          </el-form-item>
+        </el-col>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="lineShow = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+        <el-button type="primary" @click="lineFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
+      </span>
+    </el-dialog>
+  </span>
+</template>
+
+<script>
+import Vue from 'vue'
+import vuedraggable from 'vuedraggable'
+import { getUrl } from '@/api/file'
+import { eqList, VisualUpdate } from '@/api/basicData/visual'
+import { blobToBase64 } from '@/utils/blobToBase64'
+
+export default {
+  components: {
+    vuedraggable
+  },
+  props: {
+    injectData: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      showPic: false,
+      imageUrl: null,
+      windowWidth: null,
+      routeList: [],
+      resetRouteList: [],
+      equipmentList: [],
+      equipmentObj: {},
+      addNow: false,
+      eqId: null,
+      routeIndex: null,
+      lineIndex: null,
+      lineShow: false,
+      addLineStatus: false,
+      imgW: 400,
+      imgH: 400,
+      lineData: {
+        editLineName: null
+      },
+      drawloading: false,
+      lineDataRules: {
+        editLineName: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.visual.editLineName')]),
+          trigger: 'blur'
+        }]
+      }
+    }
+  },
+  watch: {
+    routeIndex: function(val) {
+      if (val || val === 0) {
+        this.eqId = this.routeList[this.lineIndex].list[val].id
+      } else {
+        this.eqId = null
+      }
+    },
+    showPic: function(val) {
+      if (val && this.injectData.trajectory) {
+        this.routeList = JSON.parse(this.injectData.trajectory)
+        for (let i = 0; i < this.routeList.length; i++) {
+          this.routeList[i].list.map(item => {
+            item.show = false
+            return item
+          })
+        }
+        this.addNow = false
+        this.lineIndex = 0
+        this.resetRouteList = JSON.parse(this.injectData.trajectory)
+        for (let i = 0; i < this.resetRouteList.length; i++) {
+          this.resetRouteList[i].list.map(item => {
+            item.show = false
+            return item
+          })
+        }
+      }
+    }
+  },
+  mounted() {
+    this.windowWidth = window.innerWidth
+    this.getEqList()
+    window.addEventListener('resize', () => {
+      this.windowWidth = window.innerWidth
+      if (this.showPic) {
+        this.imgW = document.getElementById('lingImg').width
+        this.imgH = document.getElementById('lingImg').height
+        if (!this.drawloading) {
+          this.drawCanvas()
+          this.drawloading = true
+          setTimeout(() => {
+            this.drawloading = false
+          }, 100)
+        }
+      }
+    })
+  },
+  methods: {
+    // 获取设备数据字典
+    getEqList() {
+      eqList().then(res => {
+        this.equipmentList = res.data
+        this.equipmentList.splice(0, 0, { id: 'daogui', name: '导轨' }, { id: 'zhuanzhedian', name: '转折点' })
+        this.equipmentList.map(item => {
+          this.equipmentObj[item.id] = item.name
+        })
+      }).catch(() => {
+        setTimeout(() => {
+          this.getEqList()
+        }, 10000)
+      })
+    },
+    emitClick() {
+      getUrl({
+        attachmentId: this.injectData.annexId,
+        type: 0
+      }).then(blob => {
+        blobToBase64(blob.data).then(res => {
+          this.imageUrl = res
+          this.showPic = true
+          setTimeout(() => {
+            this.imgW = document.getElementById('lingImg').width
+            this.imgH = document.getElementById('lingImg').height
+            this.drawCanvas()
+          }, 10)
+        })
+      }).catch(err => {
+        this.$message.error(err)
+      })
+    },
+    // 绘制辅助线
+    drawCanvas() {
+      const c = document.getElementById('canvas' + this.injectData.id)
+      c.width = this.imgW
+      c.height = this.imgH
+      const cxt = c.getContext('2d')
+      for (let i = 0; i < this.routeList[this.lineIndex].list.length; i++) {
+        if (i === 0) {
+          cxt.moveTo(this.toNumber(this.routeList[this.lineIndex].list[i].routeX) * this.imgW + 0.5, this.toNumber(this.routeList[this.lineIndex].list[i].routeY) * this.imgH + 0.5)
+        } else if (i === this.routeList[this.lineIndex].list.length - 1) {
+          cxt.lineTo(this.toNumber(this.routeList[this.lineIndex].list[i].routeX) * this.imgW + 0.5, this.toNumber(this.routeList[this.lineIndex].list[i].routeY) * this.imgH + 0.5)
+          cxt.strokeStyle = '#000000'
+          cxt.lineWidth = '6'
+          cxt.stroke()
+        } else if (i > 0) {
+          cxt.lineTo(this.toNumber(this.routeList[this.lineIndex].list[i].routeX) * this.imgW + 0.5, this.toNumber(this.routeList[this.lineIndex].list[i].routeY) * this.imgH + 0.5)
+        }
+      }
+      for (let i = 0; i < this.routeList[this.lineIndex].list.length; i++) {
+        if (i === 0) {
+          cxt.moveTo(this.toNumber(this.routeList[this.lineIndex].list[i].routeX) * this.imgW, this.toNumber(this.routeList[this.lineIndex].list[i].routeY) * this.imgH)
+        } else if (i === this.routeList[this.lineIndex].list.length - 1) {
+          cxt.lineTo(this.toNumber(this.routeList[this.lineIndex].list[i].routeX) * this.imgW, this.toNumber(this.routeList[this.lineIndex].list[i].routeY) * this.imgH)
+          cxt.strokeStyle = '#13ce66'
+          cxt.lineWidth = '2'
+          cxt.stroke()
+        } else if (i > 0) {
+          cxt.lineTo(this.toNumber(this.routeList[this.lineIndex].list[i].routeX) * this.imgW, this.toNumber(this.routeList[this.lineIndex].list[i].routeY) * this.imgH)
+        }
+      }
+    },
+    // 去除百分号，除以100通用方法
+    toNumber(v) {
+      return Number(v.substring(0, v.length - 1)) / 100
+    },
+    // 添加位置点
+    setRoute(e) {
+      if (!this.addNow) {
+        const windowWidth = document.getElementById('imgbox-route-' + this.injectData.id).clientWidth
+        const scrollY = document.getElementById('imgbox-route-' + this.injectData.id).scrollTop
+        const routeY = ((e.clientY + scrollY - (145 + document.getElementById('lineSelect' + this.injectData.id).clientHeight)) / this.imgH) * 100 + '%'
+        const routeX = ((e.clientX - windowWidth * 0.2 - 20) / this.imgW) * 100 + '%'
+        this.routeList[this.lineIndex].list.push({
+          id: null,
+          routeX,
+          routeY,
+          show: false
+        })
+        setTimeout(() => {
+          Vue.set(this.routeList[this.lineIndex].list[this.routeList[this.lineIndex].list.length - 1], 'show', true)
+          this.routeIndex = this.routeList[this.lineIndex].list.length - 1
+          this.drawCanvas()
+        }, 100)
+        this.addNow = true
+      } else {
+        this.$message.warning(this.$t('module.basicData.visual.addNow'))
+      }
+    },
+    // 删除位置点
+    delEqRoute(index) {
+      if (index === this.routeList[this.lineIndex].list.length - 1) {
+        this.addNow = false
+      } else {
+        Vue.set(this.routeList[this.lineIndex].list[index], 'show', false)
+      }
+      this.routeList[this.lineIndex].list.splice(index, 1)
+      this.drawCanvas()
+      this.clearIndex()
+    },
+    // 确认位置点
+    confirmRouteEq(index) {
+      if (index === this.routeList[this.lineIndex].list.length - 1) {
+        this.addNow = false
+      }
+      for (let i = 0; i < this.routeList[this.lineIndex].list.length; i++) {
+        if (this.eqId === null) {
+          this.$message.error(this.$t('module.basicData.visual.unSelect'))
+          return false
+        } else if (this.routeList[this.lineIndex].list[i].id === this.eqId && this.eqId !== 'daogui' && this.eqId !== 'zhuanzhedian') {
+          this.$message.error(this.$t('module.basicData.visual.choiseError'))
+          return false
+        }
+      }
+      Vue.set(this.routeList[this.lineIndex].list[index], 'id', this.eqId)
+      Vue.set(this.routeList[this.lineIndex].list[index], 'show', false)
+      this.clearIndex()
+      this.$message.success(this.$t('module.basicData.visual.choiseSucc'))
+    },
+    // 保存点击的气泡index
+    handleIndex(index) {
+      this.routeIndex = index
+    },
+    // 清除保存的index
+    clearIndex() {
+      this.routeIndex = null
+    },
+    // 提交位置点信息
+    routeConfirm() {
+      if (this.addNow) {
+        this.$message.warning(this.$t('module.basicData.visual.addNow'))
+      } else {
+        VisualUpdate({
+          id: this.injectData.id,
+          name: this.injectData.name,
+          annexId: this.injectData.annexId,
+          trajectory: JSON.stringify(this.routeList)
+        }).then(res => {
+          this.$message({
+            message: this.$t('baseTip.OperationSucc'),
+            type: 'success',
+            duration: 1500,
+            onClose: () => {
+              this.showPic = false
+              this.$emit('emitData', {
+                type: ['refresh']
+              })
+            }
+          })
+        })
+      }
+    },
+    // 重置 待完善
+    resetRoute() {
+      new Promise(resolve => {
+        Object.assign(this.routeList, this.resetRouteList)
+        this.showPic = false
+        setTimeout(() => {
+          this.showPic = true
+          resolve()
+        }, 100)
+      }).then(() => {
+        this.lineIndex = 0
+        this.drawCanvas()
+      })
+    },
+    // 切换轨迹时清除所有虚拟状态
+    resetAllStadus() {
+      if (this.addNow) {
+        this.$message.warning(this.$t('module.basicData.visual.changeLine'))
+      } else {
+        this.clearIndex()
+        this.drawCanvas()
+      }
+    },
+    // 添加产线
+    addLine() {
+      this.addLineStatus = true
+      this.lineData.editLineName = null
+      this.lineShow = true
+    },
+    editLine() {
+      this.addLineStatus = false
+      this.lineData.editLineName = this.routeList[this.lineIndex].lineName
+      this.lineShow = true
+    },
+    // 删除产线
+    deleteLine() {
+      if (this.routeList.length === 1) {
+        this.$message.error(this.$t('module.basicData.visual.oneLineTip'))
+      } else {
+        this.$confirm(`${this.$t('deleteTip.header')}${this.routeList[this.lineIndex].lineName}${this.$t('deleteTip.footer')}`, this.$t('deleteTip.tip'), {
+          confirmButtonText: this.$t('deleteTip.confirm'),
+          cancelButtonText: this.$t('deleteTip.cancel'),
+          type: 'warning'
+        }).then(() => {
+          new Promise(resolve => {
+            this.routeList.splice(this.lineIndex, 1)
+            resolve()
+          }).then(() => {
+            this.lineIndex = 0
+            this.addNow = false
+            this.routeIndex = null
+            this.drawCanvas()
+            this.clearIndex()
+            this.$message.success(this.$t('baseTip.OperationSucc'))
+          })
+        })
+      }
+    },
+    // 新增、修改路径名
+    lineFormSubmit() {
+      if (this.addLineStatus) {
+        for (let i = 0; i < this.routeList.length; i++) {
+          if (this.routeList[i].lineName === this.lineData.editLineName) {
+            this.$message.error(this.$t('module.basicData.visual.oneLineNameTip'))
+            return false
+          }
+        }
+        if (this.lineData.editLineName) {
+          this.routeList.push({
+            lineName: this.lineData.editLineName,
+            list: []
+          })
+          this.$message.success(this.$t('baseTip.OperationSucc'))
+          this.lineShow = false
+        } else {
+          this.$message.error(this.$t('module.basicData.visual.lineNameNotNullTip'))
+        }
+      } else {
+        for (let i = 0; i < this.routeList.length; i++) {
+          if (this.routeList[i].lineName === this.lineData.editLineName && this.lineIndex !== i) {
+            this.$message.error(this.$t('module.basicData.visual.oneLineNameTip'))
+            return false
+          }
+        }
+        if (this.lineData.editLineName) {
+          Vue.set(this.routeList[this.lineIndex], 'lineName', this.lineData.editLineName)
+          this.$message.success(this.$t('baseTip.OperationSucc'))
+          this.lineShow = false
+        } else {
+          this.$message.error(this.$t('module.basicData.visual.lineNameNotNullTip'))
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.imgbox{
+  position: relative;
+  .route-badge{
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 20px;
+    height: 20px;
+    border-radius: 100%;
+    line-height: 20px;
+    font-size: 12px;
+    text-align: center;
+    padding: 0;
+    cursor: pointer;
+  }
+  .visual-canvas{
+    position: absolute;
+    top: 0;
+    left: 0;
+    pointer-events: none;
+  }
+}
+</style>
diff --git a/src/views/basicData/components/attrBtn.vue b/src/views/basicData/components/attrBtn.vue
new file mode 100644
index 0000000..4327628
--- /dev/null
+++ b/src/views/basicData/components/attrBtn.vue
@@ -0,0 +1,34 @@
+<!--
+ * @Date: 2021-01-07 20:09:37
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-06 16:16:12
+ * @FilePath: \basic-admin\src\components\BaseTable\subcomponents\CheckDetail.vue
+ * @Description:
+-->
+<template>
+  <span>
+    <el-button type="text" size="small" @click="emitClick">{{ $t('module.basicData.CodeRules.manageProperty') }}</el-button>
+  </span>
+</template>
+
+<script>
+export default {
+  props: {
+    injectData: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  methods: {
+    emitClick() {
+      console.log(this.injectData)
+      this.$router.push({
+        name: 'codeAttr',
+        query: {
+          id: this.injectData.id
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/basicData/components/colorDiv.vue b/src/views/basicData/components/colorDiv.vue
new file mode 100644
index 0000000..5f661a2
--- /dev/null
+++ b/src/views/basicData/components/colorDiv.vue
@@ -0,0 +1,25 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-01-18 15:29:04
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-22 15:04:32
+ * @Description:
+-->
+<template>
+  <div style="width:100px;height:20px;margin:auto" :style="{background:injectData.colour}" />
+</template>
+
+<script>
+export default {
+  props: {
+    injectData: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  methods: {
+    emitClick() {
+    }
+  }
+}
+</script>
diff --git a/src/views/basicData/components/dataDictionary-add.vue b/src/views/basicData/components/dataDictionary-add.vue
new file mode 100644
index 0000000..b70ce36
--- /dev/null
+++ b/src/views/basicData/components/dataDictionary-add.vue
@@ -0,0 +1,114 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-04-16 13:20:20
+ * @remark:
+-->
+<template>
+  <el-dialog
+    :title="!dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter"
+    :visible.sync="visible"
+  >
+    <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="100px" @keyup.enter.native="dataFormSubmit()">
+      <el-form-item :label="$t('module.basicData.materialsType.TypeName')" prop="typeName">
+        <el-input v-model="dataForm.typeName" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.materialsType.TypeName')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.materialsType.TypeCode')" prop="typeCode">
+        <el-input v-model="dataForm.typeCode" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.materialsType.TypeCode')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.visual.Remarks')" prop="remark">
+        <el-input
+          v-model="dataForm.remark"
+          type="textarea"
+          :rows="2"
+          :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Remarks')])"
+          clearable
+        />
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { dataDictionaryTypeDetail, dataDictionaryTypeUpdate, dataDictionaryTypeAdd } from '@/api/basicData/dataDictionaryType'
+
+export default {
+  data() {
+    return {
+      visible: false,
+      dataForm: {
+        id: 0,
+        typeName: '',
+        typeCode: '',
+        remark: ''
+      },
+      dataRule: {
+        typeName: [
+          {
+            required: true,
+            message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.materialsType.TypeName')]),
+            trigger: 'blur' }
+        ],
+        typeCode: [
+          {
+            required: true,
+            message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.materialsType.TypeCode')]),
+            trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    init(id) {
+      this.dataForm.id = id || ''
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          dataDictionaryTypeDetail(this.dataForm.id).then(res => {
+            this.dataForm = res.data
+          })
+        }
+      })
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          const data = this.dataForm
+          if (this.dataForm.id) {
+            dataDictionaryTypeUpdate(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          } else {
+            dataDictionaryTypeAdd(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          }
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/basicData/components/dataDictionaryData-add.vue b/src/views/basicData/components/dataDictionaryData-add.vue
new file mode 100644
index 0000000..6681da3
--- /dev/null
+++ b/src/views/basicData/components/dataDictionaryData-add.vue
@@ -0,0 +1,116 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-04-17 15:25:35
+ * @remark:
+-->
+<template>
+  <el-dialog
+    :title="!dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter"
+    :visible.sync="visible"
+  >
+    <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="170px" @keyup.enter.native="dataFormSubmit()">
+      <el-form-item :label="$t('module.basicData.dataDictionary.dataDictionaryName')" prop="dataName">
+        <el-input v-model="dataForm.dataName" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.dataDictionary.dataDictionaryName')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.dataDictionary.dataDictionaryCode')" prop="dataCode">
+        <el-input v-model="dataForm.dataCode" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.dataDictionary.dataDictionaryCode')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.visual.Remarks')" prop="remark">
+        <el-input
+          v-model="dataForm.remark"
+          type="textarea"
+          :rows="2"
+          :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Remarks')])"
+          clearable
+        />
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { dataDictionaryDataDetail, dataDictionaryDataUpdate, dataDictionaryDataAdd } from '@/api/basicData/dataDictionary'
+
+export default {
+  data() {
+    return {
+      visible: false,
+      dataForm: {
+        id: 0,
+        dataName: '',
+        dataCode: '',
+        remark: '',
+        dictTypeId: ''
+      },
+      dataRule: {
+        dataName: [
+          {
+            required: true,
+            message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.dataDictionary.dataDictionaryName')]),
+            trigger: 'blur' }
+        ],
+        dataCode: [
+          {
+            required: true,
+            message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.dataDictionary.dataDictionaryCode')]),
+            trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    init(id) {
+      this.dataForm.dictTypeId = this.$route.query.dictTypeId
+      this.dataForm.id = id || ''
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          dataDictionaryDataDetail(this.dataForm.id).then(res => {
+            this.dataForm = res.data
+          })
+        }
+      })
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          const data = this.dataForm
+          if (this.dataForm.id) {
+            dataDictionaryDataUpdate(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          } else {
+            dataDictionaryDataAdd(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          }
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/basicData/components/dataDictionaryData.vue b/src/views/basicData/components/dataDictionaryData.vue
new file mode 100644
index 0000000..71273f7
--- /dev/null
+++ b/src/views/basicData/components/dataDictionaryData.vue
@@ -0,0 +1,202 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-04-16 13:23:15
+ * @Description:
+-->
+<template>
+  <div class="app-container">
+    <el-form
+      :model="listQuery"
+      :inline="true"
+      size="medium"
+      label-width="160px"
+    >
+      <el-form-item :label="$t('module.basicData.dataDictionary.dataDictionaryName')" prop="dataName">
+        <el-input v-model="listQuery.dataName" :placeholder="$i18nForm(['placeholder.input', this.$t('module.basicData.dataDictionary.dataDictionaryName')])" style="width:200px" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.dataDictionary.dataDictionaryCode')" prop="dataCode">
+        <el-input v-model="listQuery.dataCode" :placeholder="$i18nForm(['placeholder.input', this.$t('module.basicData.dataDictionary.dataDictionaryCode')])" style="width:200px" clearable />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="getList()"> {{ 'btn.search' | i18nFilter }} </el-button>
+        <el-button type="primary" @click="addNew()"> {{ 'btn.add' | i18nFilter }} </el-button>
+        <el-button type="success" @click="goback()">{{ 'btn.back' | i18nFilter }}</el-button>
+      </el-form-item>
+    </el-form>
+    <base-table
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    >
+      <method-btn
+        slot="handleBtn"
+        :width="trueWidth"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      @pagination="getList()"
+    />
+    <dataDictionaryData-add v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
+  </div>
+</template>
+
+<script>
+import { dataDictionaryDataList, dataDictionaryDataDelete } from '@/api/basicData/dataDictionary'
+import DataDictionaryDataAdd from './dataDictionaryData-add.vue'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import i18n from '@/lang'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+
+const tableBtn = [
+  {
+    type: 'edit',
+    btnName: 'btn.edit'
+  },
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  }
+]
+const tableProps = [
+  {
+    prop: 'typeCode',
+    label: i18n.t('module.basicData.materialsType.TypeCode'),
+    align: 'center'
+  },
+  {
+    prop: 'dataName',
+    label: i18n.t('module.basicData.dataDictionary.dataDictionaryName'),
+    align: 'center'
+  },
+  {
+    prop: 'dataCode',
+    label: i18n.t('module.basicData.dataDictionary.dataDictionaryCode'),
+    align: 'center'
+  },
+  {
+    prop: 'remark',
+    label: i18n.t('module.basicData.visual.Remarks'),
+    align: 'center'
+  }
+]
+
+export default {
+  name: 'Factory',
+  components: { Pagination, BaseTable, MethodBtn, DataDictionaryDataAdd },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      addOrUpdateVisible: false,
+      tableBtn,
+      trueWidth: 200,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        current: 1,
+        size: 10,
+        dictTypeId: '',
+        dataName: '',
+        dataCode: ''
+      }
+    }
+  },
+  created() {
+    this.listQuery.dictTypeId = this.$route.query.dictTypeId
+    this.getList()
+  },
+  methods: {
+    handleClick(raw) {
+      if (raw.type === 'delete') {
+        this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.dataName}]?`, this.$t('module.basicData.visual.Tips'), {
+          confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+          cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+          type: 'warning'
+        }).then(() => {
+          dataDictionaryDataDelete(raw.data.id).then(response => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+              }
+            })
+          })
+        }).catch(() => {})
+      } else {
+        this.addNew(raw.data.id)
+      }
+    },
+    getList() {
+      this.listLoading = true
+      dataDictionaryDataList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    },
+    // 新增 / 修改
+    addNew(id) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id)
+      })
+    },
+    goback() {
+      this.$router.go(-1)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/basicData/dataDictionary.vue b/src/views/basicData/dataDictionary.vue
new file mode 100644
index 0000000..d2a0b0f
--- /dev/null
+++ b/src/views/basicData/dataDictionary.vue
@@ -0,0 +1,205 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-04-16 13:13:50
+ * @Description:
+-->
+<template>
+  <div class="app-container">
+    <el-form
+      :model="listQuery"
+      :inline="true"
+      size="medium"
+      label-width="100px"
+    >
+      <el-form-item :label="$t('module.basicData.materialsType.TypeName')" prop="typeName">
+        <el-input v-model="listQuery.typeName" :placeholder="$i18nForm(['placeholder.input', this.$t('module.basicData.materialsType.TypeName')])" style="width:200px" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.materialsType.TypeCode')" prop="typeCode">
+        <el-input v-model="listQuery.typeCode" :placeholder="$i18nForm(['placeholder.input', this.$t('module.basicData.materialsType.TypeCode')])" style="width:200px" clearable />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="getList()"> {{ 'btn.search' | i18nFilter }} </el-button>
+        <el-button type="primary" @click="addNew()"> {{ 'btn.add' | i18nFilter }} </el-button>
+      </el-form-item>
+    </el-form>
+    <base-table
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    >
+      <method-btn
+        slot="handleBtn"
+        :width="trueWidth"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      @pagination="getList()"
+    />
+    <dataDictionary-add v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
+  </div>
+</template>
+
+<script>
+import { dataDictionaryTypeList, dataDictionaryTypeDelete } from '@/api/basicData/dataDictionaryType'
+import DataDictionaryAdd from './components/dataDictionary-add.vue'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import i18n from '@/lang'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+
+const tableBtn = [
+  {
+    type: 'edit',
+    btnName: 'btn.edit'
+  },
+  {
+    type: 'list',
+    btnName: i18n.t('module.basicData.dataDictionary.list')
+  },
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  }
+]
+const tableProps = [
+  {
+    prop: 'typeName',
+    label: i18n.t('module.basicData.materialsType.TypeName'),
+    align: 'center'
+  },
+  {
+    prop: 'typeCode',
+    label: i18n.t('module.basicData.materialsType.TypeCode'),
+    align: 'center'
+  },
+  {
+    prop: 'remark',
+    label: i18n.t('module.basicData.visual.Remarks'),
+    align: 'center'
+  }
+]
+
+export default {
+  name: 'Factory',
+  components: { Pagination, BaseTable, MethodBtn, DataDictionaryAdd },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      addOrUpdateVisible: false,
+      tableBtn,
+      trueWidth: 250,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        current: 1,
+        size: 10,
+        typeName: '',
+        typeCode: ''
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    handleClick(raw) {
+      if (raw.type === 'delete') {
+        this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.typeName}]?`, this.$t('module.basicData.visual.Tips'), {
+          confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+          cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+          type: 'warning'
+        }).then(() => {
+          dataDictionaryTypeDelete(raw.data.id).then(response => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+              }
+            })
+          })
+        }).catch(() => {})
+      } else if (raw.type === 'list') {
+        this.toList(raw.data.id)
+      } else {
+        this.addNew(raw.data.id)
+      }
+    },
+    getList() {
+      this.listLoading = true
+      dataDictionaryTypeList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    },
+    // 新增 / 修改
+    addNew(id) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id)
+      })
+    },
+    toList(id) {
+      this.$router.push({
+        name: 'dataDictionaryData',
+        query: {
+          dictTypeId: id
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/basicData/index.vue b/src/views/basicData/index.vue
new file mode 100644
index 0000000..6ffe0ff
--- /dev/null
+++ b/src/views/basicData/index.vue
@@ -0,0 +1,12 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-01-12 11:13:03
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-01-12 11:13:14
+ * @Description:
+-->
+<template>
+  <div id="basic">
+    <router-view />
+  </div>
+</template>
diff --git a/src/views/charts/line.vue b/src/views/charts/line.vue
index fea1497..46fc3b5 100644
--- a/src/views/charts/line.vue
+++ b/src/views/charts/line.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import Chart from '@/components/Charts/LineMarker'
+import Chart from '@/components/Charts/BarChart'
 
 export default {
   name: 'LineChart',
diff --git a/src/views/components-demo/avatar-upload.vue b/src/views/components-demo/avatar-upload.vue
deleted file mode 100644
index 5cb20a5..0000000
--- a/src/views/components-demo/avatar-upload.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<template>
-  <div class="components-container">
-    <aside>This is based on
-      <a class="link-type" href="//github.com/dai-siki/vue-image-crop-upload"> vue-image-crop-upload</a>.
-      Since I was using only the vue@1 version, and it is not compatible with mockjs at the moment, I modified it myself, and if you are going to use it, it is better to use official version.
-    </aside>
-
-    <pan-thumb :image="image" />
-
-    <el-button type="primary" icon="el-icon-upload" style="position: absolute;bottom: 15px;margin-left: 40px;" @click="imagecropperShow=true">
-      Change Avatar
-    </el-button>
-
-    <image-cropper
-      v-show="imagecropperShow"
-      :key="imagecropperKey"
-      :width="300"
-      :height="300"
-      url="https://httpbin.org/post"
-      lang-type="en"
-      @close="close"
-      @crop-upload-success="cropSuccess"
-    />
-  </div>
-</template>
-
-<script>
-import ImageCropper from '@/components/ImageCropper'
-import PanThumb from '@/components/PanThumb'
-
-export default {
-  name: 'AvatarUploadDemo',
-  components: { ImageCropper, PanThumb },
-  data() {
-    return {
-      imagecropperShow: false,
-      imagecropperKey: 0,
-      image: 'https://wpimg.wallstcn.com/577965b9-bb9e-4e02-9f0c-095b41417191'
-    }
-  },
-  methods: {
-    cropSuccess(resData) {
-      this.imagecropperShow = false
-      this.imagecropperKey = this.imagecropperKey + 1
-      this.image = resData.files.avatar
-    },
-    close() {
-      this.imagecropperShow = false
-    }
-  }
-}
-</script>
-
-<style scoped>
-  .avatar{
-    width: 200px;
-    height: 200px;
-    border-radius: 50%;
-  }
-</style>
-
diff --git a/src/views/components-demo/back-to-top.vue b/src/views/components-demo/back-to-top.vue
deleted file mode 100644
index df5370b..0000000
--- a/src/views/components-demo/back-to-top.vue
+++ /dev/null
@@ -1,154 +0,0 @@
-<template>
-  <div class="components-container">
-    <aside>
-      When the page is scrolled to the specified position, the Back to Top button appears in the lower right corner
-    </aside>
-    <aside>
-      You can customize the style of the button, show / hide, height of appearance, height of the return. If you need a text prompt, you can use element-ui el-tooltip elements externally
-    </aside>
-    <div class="placeholder-container">
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-    </div>
-    <!-- you can add element-ui's tooltip -->
-    <el-tooltip placement="top" content="tooltip">
-      <back-to-top :custom-style="myBackToTopStyle" :visibility-height="300" :back-position="50" transition-name="fade" />
-    </el-tooltip>
-  </div>
-</template>
-
-<script>
-import BackToTop from '@/components/BackToTop'
-
-export default {
-  name: 'BackToTopDemo',
-  components: { BackToTop },
-  data() {
-    return {
-      // customizable button style, show/hide critical point, return position
-      myBackToTopStyle: {
-        right: '50px',
-        bottom: '50px',
-        width: '40px',
-        height: '40px',
-        'border-radius': '4px',
-        'line-height': '45px', // 请保持与高度一致以垂直居中 Please keep consistent with height to center vertically
-        background: '#e7eaf1'// 按钮的背景颜色 The background color of the button
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-.placeholder-container div {
-  margin: 10px;
-}
-</style>
diff --git a/src/views/components-demo/count-to.vue b/src/views/components-demo/count-to.vue
deleted file mode 100644
index 70681df..0000000
--- a/src/views/components-demo/count-to.vue
+++ /dev/null
@@ -1,218 +0,0 @@
-<template>
-  <div class="components-container">
-    <aside>
-      <a href="https://github.com/PanJiaChen/vue-countTo" target="_blank">countTo-component</a>
-    </aside>
-    <count-to
-      ref="example"
-      :start-val="_startVal"
-      :end-val="_endVal"
-      :duration="_duration"
-      :decimals="_decimals"
-      :separator="_separator"
-      :prefix="_prefix"
-      :suffix="_suffix"
-      :autoplay="false"
-      class="example"
-    />
-    <div style="margin-left: 25%;margin-top: 40px;">
-      <label class="label" for="startValInput">startVal:
-        <input v-model.number="setStartVal" type="number" name="startValInput">
-      </label>
-      <label class="label" for="endValInput">endVal:
-        <input v-model.number="setEndVal" type="number" name="endVaInput">
-      </label>
-      <label class="label" for="durationInput">duration:
-        <input v-model.number="setDuration" type="number" name="durationInput">
-      </label>
-      <div class="startBtn example-btn" @click="start">
-        Start
-      </div>
-      <div class="pause-resume-btn example-btn" @click="pauseResume">
-        pause/resume
-      </div>
-      <br>
-      <label class="label" for="decimalsInput">decimals:
-        <input v-model.number="setDecimals" type="number" name="decimalsInput">
-      </label>
-      <label class="label" for="separatorInput">separator:
-        <input v-model="setSeparator" name="separatorInput">
-      </label>
-      <label class="label" for="prefixInput">prefix:
-        <input v-model="setPrefix" name="prefixInput">
-      </label>
-      <label class="label" for="suffixInput">suffix:
-        <input v-model="setSuffix" name="suffixInput">
-      </label>
-    </div>
-    <aside>&lt;count-to :start-val=&#x27;{{ _startVal }}&#x27; :end-val=&#x27;{{ _endVal }}&#x27; :duration=&#x27;{{ _duration }}&#x27;
-      :decimals=&#x27;{{ _decimals }}&#x27; :separator=&#x27;{{ _separator }}&#x27; :prefix=&#x27;{{ _prefix }}&#x27; :suffix=&#x27;{{ _suffix }}&#x27;
-      :autoplay=false&gt;</aside>
-  </div>
-</template>
-
-<script>
-import countTo from 'vue-count-to'
-
-export default {
-  name: 'CountToDemo',
-  components: { countTo },
-  data() {
-    return {
-      setStartVal: 0,
-      setEndVal: 2017,
-      setDuration: 4000,
-      setDecimals: 0,
-      setSeparator: ',',
-      setSuffix: ' rmb',
-      setPrefix: '¥ '
-    }
-  },
-  computed: {
-    _startVal() {
-      if (this.setStartVal) {
-        return this.setStartVal
-      } else {
-        return 0
-      }
-    },
-    _endVal() {
-      if (this.setEndVal) {
-        return this.setEndVal
-      } else {
-        return 0
-      }
-    },
-    _duration() {
-      if (this.setDuration) {
-        return this.setDuration
-      } else {
-        return 100
-      }
-    },
-    _decimals() {
-      if (this.setDecimals) {
-        if (this.setDecimals < 0 || this.setDecimals > 20) {
-          alert('digits argument must be between 0 and 20')
-          return 0
-        }
-        return this.setDecimals
-      } else {
-        return 0
-      }
-    },
-    _separator() {
-      return this.setSeparator
-    },
-    _suffix() {
-      return this.setSuffix
-    },
-    _prefix() {
-      return this.setPrefix
-    }
-  },
-  methods: {
-    start() {
-      this.$refs.example.start()
-    },
-    pauseResume() {
-      this.$refs.example.pauseResume()
-    }
-  }
-}
-</script>
-
-<style scoped>
-.example-btn {
-  display: inline-block;
-  margin-bottom: 0;
-  font-weight: 500;
-  text-align: center;
-  -ms-touch-action: manipulation;
-  touch-action: manipulation;
-  cursor: pointer;
-  background-image: none;
-  border: 1px solid transparent;
-  white-space: nowrap;
-  line-height: 1.5;
-  padding: 4px 15px;
-  font-size: 12px;
-  border-radius: 4px;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  -webkit-transition: all .3s cubic-bezier(.645, .045, .355, 1);
-  transition: all .3s cubic-bezier(.645, .045, .355, 1);
-  position: relative;
-  color: rgba(0, 0, 0, .65);
-  background-color: #fff;
-  border-color: #d9d9d9;
-}
-
-.example-btn:hover {
-  color: #4AB7BD;
-  background-color: #fff;
-  border-color: #4AB7BD;
-}
-.example {
-  font-size: 50px;
-  color: #F6416C;
-  display: block;
-  margin: 10px 0;
-  text-align: center;
-  font-size: 80px;
-  font-weight: 500;
-}
-
-.label {
-  color: #2f4f4f;
-  font-size: 16px;
-  display: inline-block;
-  margin: 15px 30px 15px 0;
-}
-
-input {
-  position: relative;
-  display: inline-block;
-  padding: 4px 7px;
-  width: 70px;
-  height: 28px;
-  cursor: text;
-  font-size: 12px;
-  line-height: 1.5;
-  color: rgba(0, 0, 0, .65);
-  background-color: #fff;
-  background-image: none;
-  border: 1px solid #d9d9d9;
-  border-radius: 4px;
-  -webkit-transition: all .3s;
-  transition: all .3s;
-}
-
-.startBtn {
-  margin-left: 20px;
-  font-size: 20px;
-  color: #30B08F;
-  background-color: #fff;
-}
-
-.startBtn:hover {
-  background-color: #30B08F;
-  color: #fff;
-  border-color: #30B08F;
-}
-
-.pause-resume-btn {
-  font-size: 20px;
-  color: #E65D6E;
-  background-color: #fff;
-}
-
-.pause-resume-btn:hover {
-  background-color: #E65D6E;
-  color: #fff;
-  border-color: #E65D6E;
-}
-</style>
-
diff --git a/src/views/components-demo/dnd-list.vue b/src/views/components-demo/dnd-list.vue
deleted file mode 100644
index e299fa6..0000000
--- a/src/views/components-demo/dnd-list.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<template>
-  <div class="components-container">
-    <aside>drag-list base on
-      <a href="https://github.com/SortableJS/Vue.Draggable" target="_blank">Vue.Draggable</a>
-    </aside>
-    <div class="editor-container">
-      <dnd-list :list1="list1" :list2="list2" list1-title="List" list2-title="Article pool" />
-    </div>
-  </div>
-</template>
-
-<script>
-import DndList from '@/components/DndList'
-import { fetchList } from '@/api/article'
-
-export default {
-  name: 'DndListDemo',
-  components: { DndList },
-  data() {
-    return {
-      list1: [],
-      list2: []
-    }
-  },
-  created() {
-    this.getData()
-  },
-  methods: {
-    getData() {
-      this.listLoading = true
-      fetchList().then(response => {
-        this.list1 = response.data.items.splice(0, 5)
-        this.list2 = response.data.items
-      })
-    }
-  }
-}
-</script>
-
diff --git a/src/views/components-demo/drag-dialog.vue b/src/views/components-demo/drag-dialog.vue
deleted file mode 100644
index c815b28..0000000
--- a/src/views/components-demo/drag-dialog.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<template>
-  <div class="components-container">
-    <el-button type="primary" @click="dialogTableVisible = true">
-      open a Drag Dialog
-    </el-button>
-    <el-dialog v-el-drag-dialog :visible.sync="dialogTableVisible" title="Shipping address" @dragDialog="handleDrag">
-      <el-select ref="select" v-model="value" placeholder="请选择">
-        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
-      </el-select>
-      <el-table :data="gridData">
-        <el-table-column property="date" label="Date" width="150" />
-        <el-table-column property="name" label="Name" width="200" />
-        <el-table-column property="address" label="Address" />
-      </el-table>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
-
-export default {
-  name: 'DragDialogDemo',
-  directives: { elDragDialog },
-  data() {
-    return {
-      dialogTableVisible: false,
-      options: [
-        { value: '选项1', label: '黄金糕' },
-        { value: '选项2', label: '双皮奶' },
-        { value: '选项3', label: '蚵仔煎' },
-        { value: '选项4', label: '龙须面' }
-      ],
-      value: '',
-      gridData: [{
-        date: '2016-05-02',
-        name: 'John Smith',
-        address: 'No.1518,  Jinshajiang Road, Putuo District'
-      }, {
-        date: '2016-05-04',
-        name: 'John Smith',
-        address: 'No.1518,  Jinshajiang Road, Putuo District'
-      }, {
-        date: '2016-05-01',
-        name: 'John Smith',
-        address: 'No.1518,  Jinshajiang Road, Putuo District'
-      }, {
-        date: '2016-05-03',
-        name: 'John Smith',
-        address: 'No.1518,  Jinshajiang Road, Putuo District'
-      }]
-    }
-  },
-  methods: {
-    // v-el-drag-dialog onDrag callback function
-    handleDrag() {
-      this.$refs.select.blur()
-    }
-  }
-}
-</script>
diff --git a/src/views/components-demo/drag-kanban.vue b/src/views/components-demo/drag-kanban.vue
deleted file mode 100644
index 943be45..0000000
--- a/src/views/components-demo/drag-kanban.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<template>
-  <div class="components-container board">
-    <Kanban :key="1" :list="list1" :group="group" class="kanban todo" header-text="Todo" />
-    <Kanban :key="2" :list="list2" :group="group" class="kanban working" header-text="Working" />
-    <Kanban :key="3" :list="list3" :group="group" class="kanban done" header-text="Done" />
-  </div>
-</template>
-<script>
-import Kanban from '@/components/Kanban'
-
-export default {
-  name: 'DragKanbanDemo',
-  components: {
-    Kanban
-  },
-  data() {
-    return {
-      group: 'mission',
-      list1: [
-        { name: 'Mission', id: 1 },
-        { name: 'Mission', id: 2 },
-        { name: 'Mission', id: 3 },
-        { name: 'Mission', id: 4 }
-      ],
-      list2: [
-        { name: 'Mission', id: 5 },
-        { name: 'Mission', id: 6 },
-        { name: 'Mission', id: 7 }
-      ],
-      list3: [
-        { name: 'Mission', id: 8 },
-        { name: 'Mission', id: 9 },
-        { name: 'Mission', id: 10 }
-      ]
-    }
-  }
-}
-</script>
-<style lang="scss">
-.board {
-  width: 1000px;
-  margin-left: 20px;
-  display: flex;
-  justify-content: space-around;
-  flex-direction: row;
-  align-items: flex-start;
-}
-.kanban {
-  &.todo {
-    .board-column-header {
-      background: #4A9FF9;
-    }
-  }
-  &.working {
-    .board-column-header {
-      background: #f9944a;
-    }
-  }
-  &.done {
-    .board-column-header {
-      background: #2ac06d;
-    }
-  }
-}
-</style>
-
diff --git a/src/views/components-demo/drag-select.vue b/src/views/components-demo/drag-select.vue
deleted file mode 100644
index 905ecb9..0000000
--- a/src/views/components-demo/drag-select.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<template>
-  <div class="components-container">
-    <el-drag-select v-model="value" style="width:500px;" multiple placeholder="请选择">
-      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
-    </el-drag-select>
-
-    <div style="margin-top:30px;">
-      <el-tag v-for="item of value" :key="item" style="margin-right:15px;">
-        {{ item }}
-      </el-tag>
-    </div>
-  </div>
-</template>
-
-<script>
-import ElDragSelect from '@/components/DragSelect' // base on element-ui
-
-export default {
-  name: 'DragSelectDemo',
-  components: { ElDragSelect },
-  data() {
-    return {
-      value: ['Apple', 'Banana', 'Orange'],
-      options: [{
-        value: 'Apple',
-        label: 'Apple'
-      }, {
-        value: 'Banana',
-        label: 'Banana'
-      }, {
-        value: 'Orange',
-        label: 'Orange'
-      }, {
-        value: 'Pear',
-        label: 'Pear'
-      }, {
-        value: 'Strawberry',
-        label: 'Strawberry'
-      }]
-    }
-  }
-}
-</script>
diff --git a/src/views/components-demo/dropzone.vue b/src/views/components-demo/dropzone.vue
deleted file mode 100644
index a8c1040..0000000
--- a/src/views/components-demo/dropzone.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-  <div class="components-container">
-    <aside>
-      Based on <a class="link-type" href="https://github.com/rowanwins/vue-dropzone"> dropzone </a>.
-      Because my business has special needs, and has to upload images to qiniu, so instead of a third party, I chose encapsulate it by myself. It is very simple, you can see the detail code in @/components/Dropzone.
-    </aside>
-    <div class="editor-container">
-      <dropzone id="myVueDropzone" url="https://httpbin.org/post" @dropzone-removedFile="dropzoneR" @dropzone-success="dropzoneS" />
-    </div>
-  </div>
-</template>
-
-<script>
-import Dropzone from '@/components/Dropzone'
-
-export default {
-  name: 'DropzoneDemo',
-  components: { Dropzone },
-  methods: {
-    dropzoneS(file) {
-      console.log(file)
-      this.$message({ message: 'Upload success', type: 'success' })
-    },
-    dropzoneR(file) {
-      console.log(file)
-      this.$message({ message: 'Delete success', type: 'success' })
-    }
-  }
-}
-</script>
-
diff --git a/src/views/components-demo/json-editor.vue b/src/views/components-demo/json-editor.vue
deleted file mode 100644
index 85bf383..0000000
--- a/src/views/components-demo/json-editor.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<template>
-  <div class="components-container">
-    <aside>Json-Editor is base on <a href="https://github.com/codemirror/CodeMirror" target="_blank">CodeMirrorr</a>. Lint
-      base on <a
-        href="https://github.com/codemirror/CodeMirror/blob/master/addon/lint/json-lint.js"
-        target="_blank"
-      >json-lint</a>.</aside>
-    <div class="editor-container">
-      <json-editor ref="jsonEditor" v-model="value" />
-    </div>
-  </div>
-</template>
-
-<script>
-import JsonEditor from '@/components/JsonEditor'
-
-const jsonData = '[{"items":[{"market_type":"forexdata","symbol":"XAUUSD"},{"market_type":"forexdata","symbol":"UKOIL"},{"market_type":"forexdata","symbol":"CORN"}],"name":""},{"items":[{"market_type":"forexdata","symbol":"XAUUSD"},{"market_type":"forexdata","symbol":"XAGUSD"},{"market_type":"forexdata","symbol":"AUTD"},{"market_type":"forexdata","symbol":"AGTD"}],"name":"贵金属"},{"items":[{"market_type":"forexdata","symbol":"CORN"},{"market_type":"forexdata","symbol":"WHEAT"},{"market_type":"forexdata","symbol":"SOYBEAN"},{"market_type":"forexdata","symbol":"SUGAR"}],"name":"农产品"},{"items":[{"market_type":"forexdata","symbol":"UKOIL"},{"market_type":"forexdata","symbol":"USOIL"},{"market_type":"forexdata","symbol":"NGAS"}],"name":"能源化工"}]'
-
-export default {
-  name: 'JsonEditorDemo',
-  components: { JsonEditor },
-  data() {
-    return {
-      value: JSON.parse(jsonData)
-    }
-  }
-}
-</script>
-
-<style scoped>
-.editor-container{
-  position: relative;
-  height: 100%;
-}
-</style>
-
diff --git a/src/views/components-demo/markdown.vue b/src/views/components-demo/markdown.vue
deleted file mode 100644
index 25cf3e3..0000000
--- a/src/views/components-demo/markdown.vue
+++ /dev/null
@@ -1,101 +0,0 @@
-<template>
-  <div class="components-container">
-    <aside>Markdown is based on
-      <a href="https://github.com/nhnent/tui.editor" target="_blank">tui.editor</a> ，simply wrapped with Vue.
-      <a
-        target="_blank"
-        href="https://panjiachen.github.io/vue-element-admin-site/feature/component/markdown-editor.html"
-      >
-        Documentation </a>
-    </aside>
-
-    <div class="editor-container">
-      <el-tag class="tag-title">
-        Basic:
-      </el-tag>
-      <markdown-editor v-model="content1" height="300px" />
-    </div>
-
-    <div class="editor-container">
-      <el-tag class="tag-title">
-        Markdown Mode:
-      </el-tag>
-      <markdown-editor ref="markdownEditor" v-model="content2" :options="{hideModeSwitch:true,previewStyle:'tab'}" height="200px" />
-    </div>
-
-    <div class="editor-container">
-      <el-tag class="tag-title">
-        Customize Toolbar:
-      </el-tag>
-      <markdown-editor v-model="content3" :options="{ toolbarItems: ['heading','bold','italic']}" />
-    </div>
-
-    <div class="editor-container">
-      <el-tag class="tag-title">
-        I18n:
-      </el-tag>
-      <el-alert
-        :closable="false"
-        title="You can change the language of the admin system to see the effect"
-        type="success"
-      />
-      <markdown-editor ref="markdownEditor" v-model="content4" :language="language" height="300px" />
-    </div>
-
-    <el-button style="margin-top:80px;" type="primary" icon="el-icon-document" @click="getHtml">
-      Get HTML
-    </el-button>
-    <div v-html="html" />
-  </div>
-</template>
-
-<script>
-import MarkdownEditor from '@/components/MarkdownEditor'
-
-const content = `
-**This is test**
-
-* vue
-* element
-* webpack
-
-`
-export default {
-  name: 'MarkdownDemo',
-  components: { MarkdownEditor },
-  data() {
-    return {
-      content1: content,
-      content2: content,
-      content3: content,
-      content4: content,
-      html: '',
-      languageTypeList: {
-        'en': 'en_US',
-        'zh': 'zh_CN',
-        'es': 'es_ES'
-      }
-    }
-  },
-  computed: {
-    language() {
-      return this.languageTypeList['en']
-    }
-  },
-  methods: {
-    getHtml() {
-      this.html = this.$refs.markdownEditor.getHtml()
-      console.log(this.html)
-    }
-  }
-}
-</script>
-
-<style scoped>
-.editor-container{
-  margin-bottom: 30px;
-}
-.tag-title{
-  margin-bottom: 5px;
-}
-</style>
diff --git a/src/views/components-demo/mixin.vue b/src/views/components-demo/mixin.vue
deleted file mode 100644
index 425cf4f..0000000
--- a/src/views/components-demo/mixin.vue
+++ /dev/null
@@ -1,169 +0,0 @@
-<template>
-  <div class="mixin-components-container">
-    <el-row>
-      <el-card class="box-card">
-        <div slot="header" class="clearfix">
-          <span>Buttons</span>
-        </div>
-        <div style="margin-bottom:50px;">
-          <el-col :span="4" class="text-center">
-            <router-link class="pan-btn blue-btn" to="/documentation/index">
-              Documentation
-            </router-link>
-          </el-col>
-          <el-col :span="4" class="text-center">
-            <router-link class="pan-btn light-blue-btn" to="/icon/index">
-              Icons
-            </router-link>
-          </el-col>
-          <el-col :span="4" class="text-center">
-            <router-link class="pan-btn pink-btn" to="/excel/export-excel">
-              Excel
-            </router-link>
-          </el-col>
-          <el-col :span="4" class="text-center">
-            <router-link class="pan-btn green-btn" to="/table/complex-table">
-              Table
-            </router-link>
-          </el-col>
-          <el-col :span="4" class="text-center">
-            <router-link class="pan-btn tiffany-btn" to="/example/create">
-              Form
-            </router-link>
-          </el-col>
-          <el-col :span="4" class="text-center">
-            <router-link class="pan-btn yellow-btn" to="/theme/index">
-              Theme
-            </router-link>
-          </el-col>
-        </div>
-      </el-card>
-    </el-row>
-
-    <el-row :gutter="20" style="margin-top:50px;">
-      <el-col :span="6">
-        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <span>Material Design 的input</span>
-          </div>
-          <div style="height:100px;">
-            <el-form :model="demo" :rules="demoRules">
-              <el-form-item prop="title">
-                <md-input v-model="demo.title" icon="el-icon-search" name="title" placeholder="输入标题">
-                  标题
-                </md-input>
-              </el-form-item>
-            </el-form>
-          </div>
-        </el-card>
-      </el-col>
-
-      <el-col :span="6">
-        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <span>图片hover效果</span>
-          </div>
-          <div class="component-item">
-            <pan-thumb width="100px" height="100px" image="https://wpimg.wallstcn.com/577965b9-bb9e-4e02-9f0c-095b41417191">
-              vue-element-admin
-            </pan-thumb>
-          </div>
-        </el-card>
-      </el-col>
-
-      <el-col :span="6">
-        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <span>水波纹 waves v-directive</span>
-          </div>
-          <div class="component-item">
-            <el-button v-waves type="primary">
-              水波纹效果
-            </el-button>
-          </div>
-        </el-card>
-      </el-col>
-
-      <el-col :span="6">
-        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <span>hover text</span>
-          </div>
-          <div class="component-item">
-            <mallki class-name="mallki-text" text="vue-element-admin" />
-          </div>
-        </el-card>
-      </el-col>
-    </el-row>
-
-    <el-row :gutter="20" style="margin-top:50px;">
-      <el-col :span="8">
-        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <span>Share</span>
-          </div>
-          <div class="component-item" style="height:420px;">
-            <dropdown-menu :items="articleList" style="margin:0 auto;" title="系列文章" />
-          </div>
-        </el-card>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script>
-import PanThumb from '@/components/PanThumb'
-import MdInput from '@/components/MDinput'
-import Mallki from '@/components/TextHoverEffect/Mallki'
-import DropdownMenu from '@/components/Share/DropdownMenu'
-import waves from '@/directive/waves/index.js' // 水波纹指令
-
-export default {
-  name: 'ComponentMixinDemo',
-  components: {
-    PanThumb,
-    MdInput,
-    Mallki,
-    DropdownMenu
-  },
-  directives: {
-    waves
-  },
-  data() {
-    const validate = (rule, value, callback) => {
-      if (value.length !== 6) {
-        callback(new Error('请输入六个字符'))
-      } else {
-        callback()
-      }
-    }
-    return {
-      demo: {
-        title: ''
-      },
-      demoRules: {
-        title: [{ required: true, trigger: 'change', validator: validate }]
-      },
-      articleList: [
-        { title: '基础篇', href: 'https://juejin.im/post/59097cd7a22b9d0065fb61d2' },
-        { title: '登录权限篇', href: 'https://juejin.im/post/591aa14f570c35006961acac' },
-        { title: '实战篇', href: 'https://juejin.im/post/593121aa0ce4630057f70d35' },
-        { title: 'vue-admin-template 篇', href: 'https://juejin.im/post/595b4d776fb9a06bbe7dba56' },
-        { title: 'v4.0 篇', href: 'https://juejin.im/post/5c92ff94f265da6128275a85' },
-        { title: '优雅的使用 icon', href: 'https://juejin.im/post/59bb864b5188257e7a427c09' }
-      ]
-    }
-  }
-}
-</script>
-
-<style scoped>
-.mixin-components-container {
-  background-color: #f0f2f5;
-  padding: 30px;
-  min-height: calc(100vh - 84px);
-}
-.component-item{
-  min-height: 100px;
-}
-</style>
diff --git a/src/views/components-demo/split-pane.vue b/src/views/components-demo/split-pane.vue
deleted file mode 100644
index 7dba353..0000000
--- a/src/views/components-demo/split-pane.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<template>
-  <div class="components-container">
-    <aside><strong>SplitPane</strong> If you've used
-      <a href="https://codepen.io/" target="_blank"> codepen</a>,
-      <a href="https://jsfiddle.net/" target="_blank"> jsfiddle </a>will not be unfamiliar.
-      <a href="https://github.com/PanJiaChen/vue-split-pane" target="_blank"> Github repository</a>
-    </aside>
-    <split-pane split="vertical" @resize="resize">
-      <template slot="paneL">
-        <div class="left-container" />
-      </template>
-      <template slot="paneR">
-        <split-pane split="horizontal">
-          <template slot="paneL">
-            <div class="top-container" />
-          </template>
-          <template slot="paneR">
-            <div class="bottom-container" />
-          </template>
-        </split-pane>
-      </template>
-    </split-pane>
-  </div>
-</template>
-
-<script>
-import splitPane from 'vue-splitpane'
-
-export default {
-  name: 'SplitpaneDemo',
-  components: { splitPane },
-  methods: {
-    resize() {
-      console.log('resize')
-    }
-  }
-}
-</script>
-
-<style  scoped>
-  .components-container {
-    position: relative;
-    height: 100vh;
-  }
-
-  .left-container {
-    background-color: #F38181;
-    height: 100%;
-  }
-
-  .right-container {
-    background-color: #FCE38A;
-    height: 200px;
-  }
-
-  .top-container {
-    background-color: #FCE38A;
-    width: 100%;
-    height: 100%;
-  }
-
-  .bottom-container {
-    width: 100%;
-    background-color: #95E1D3;
-    height: 100%;
-  }
-</style>
diff --git a/src/views/components-demo/sticky.vue b/src/views/components-demo/sticky.vue
deleted file mode 100644
index f01d088..0000000
--- a/src/views/components-demo/sticky.vue
+++ /dev/null
@@ -1,135 +0,0 @@
-<template>
-  <div>
-    <sticky :z-index="10" class-name="sub-navbar">
-      <el-dropdown trigger="click">
-        <el-button plain>
-          Platform<i class="el-icon-caret-bottom el-icon--right" />
-        </el-button>
-        <el-dropdown-menu slot="dropdown" class="no-border">
-          <el-checkbox-group v-model="platforms" style="padding: 5px 15px;">
-            <el-checkbox v-for="item in platformsOptions" :key="item.key" :label="item.key">
-              {{ item.name }}
-            </el-checkbox>
-          </el-checkbox-group>
-        </el-dropdown-menu>
-      </el-dropdown>
-
-      <el-dropdown trigger="click">
-        <el-button plain>
-          Link<i class="el-icon-caret-bottom el-icon--right" />
-        </el-button>
-        <el-dropdown-menu slot="dropdown" class="no-padding no-border" style="width:300px">
-          <el-input v-model="url" placeholder="Please enter the content">
-            <template slot="prepend">
-              Url
-            </template>
-          </el-input>
-        </el-dropdown-menu>
-      </el-dropdown>
-
-      <div class="time-container">
-        <el-date-picker v-model="time" type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="Release time" />
-      </div>
-
-      <el-button style="margin-left: 10px;" type="success">
-        publish
-      </el-button>
-    </sticky>
-
-    <div class="components-container">
-      <aside>
-        Sticky header, When the page is scrolled to the preset position will be sticky on the top.
-      </aside>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <sticky :sticky-top="200">
-        <el-button type="primary"> placeholder</el-button>
-      </sticky>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-      <div>placeholder</div>
-    </div>
-  </div>
-</template>
-
-<script>
-import Sticky from '@/components/Sticky'
-
-export default {
-  name: 'StickyDemo',
-  components: { Sticky },
-  data() {
-    return {
-      time: '',
-      url: '',
-      platforms: ['a-platform'],
-      platformsOptions: [
-        { key: 'a-platform', name: 'platformA' },
-        { key: 'b-platform', name: 'platformB' },
-        { key: 'c-platform', name: 'platformC' }
-      ],
-      pickerOptions: {
-        disabledDate(time) {
-          return time.getTime() > Date.now()
-        }
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-.components-container div {
-  margin: 10px;
-}
-
-.time-container {
-  display: inline-block;
-}
-</style>
diff --git a/src/views/components-demo/tinymce.vue b/src/views/components-demo/tinymce.vue
deleted file mode 100644
index f03389a..0000000
--- a/src/views/components-demo/tinymce.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<template>
-  <div class="components-container">
-    <aside>
-      Rich text is a core feature of the management backend, but at the same time it is a place with lots of pits. In the process of selecting rich texts, I also took a lot of detours. The common rich texts on the market have been basically used, and I finally chose Tinymce. See the more detailed rich text comparison and introduction.
-      <a target="_blank" class="link-type" href="https://panjiachen.github.io/vue-element-admin-site/feature/component/rich-editor.html">Documentation</a>
-    </aside>
-    <div>
-      <tinymce v-model="content" :height="300" />
-    </div>
-    <div class="editor-content" v-html="content" />
-  </div>
-</template>
-
-<script>
-import Tinymce from '@/components/Tinymce'
-
-export default {
-  name: 'TinymceDemo',
-  components: { Tinymce },
-  data() {
-    return {
-      content:
-      `<h1 style="text-align: center;">Welcome to the TinyMCE demo!</h1><p style="text-align: center; font-size: 15px;"><img title="TinyMCE Logo" src="//www.tinymce.com/images/glyph-tinymce@2x.png" alt="TinyMCE Logo" width="110" height="97" /><ul>
-        <li>Our <a href="//www.tinymce.com/docs/">documentation</a> is a great resource for learning how to configure TinyMCE.</li><li>Have a specific question? Visit the <a href="https://community.tinymce.com/forum/">Community Forum</a>.</li><li>We also offer enterprise grade support as part of <a href="https://tinymce.com/pricing">TinyMCE premium subscriptions</a>.</li>
-      </ul>`
-    }
-  }
-}
-</script>
-
-<style scoped>
-.editor-content{
-  margin-top: 20px;
-}
-</style>
-
diff --git a/src/views/dashboard/admin/components/BoxCard.vue b/src/views/dashboard/admin/components/BoxCard.vue
index 1ec1d37..4f95379 100644
--- a/src/views/dashboard/admin/components/BoxCard.vue
+++ b/src/views/dashboard/admin/components/BoxCard.vue
@@ -4,7 +4,6 @@
       <img src="https://wpimg.wallstcn.com/e7d23d71-cf19-4b90-a1cc-f56af8c0903d.png">
     </div>
     <div style="position:relative;">
-      <pan-thumb :image="avatar" class="panThumb" />
       <mallki class-name="mallki-text" text="vue-element-admin" />
       <div style="padding-top:35px;" class="progress-item">
         <span>Vue</span>
@@ -15,7 +14,7 @@
         <el-progress :percentage="18" />
       </div>
       <div class="progress-item">
-        <span>CSS</span>
+        <span>Css</span>
         <el-progress :percentage="12" />
       </div>
       <div class="progress-item">
@@ -28,11 +27,11 @@
 
 <script>
 import { mapGetters } from 'vuex'
-import PanThumb from '@/components/PanThumb'
+// import PanThumb from '@/components/PanThumb'
 import Mallki from '@/components/TextHoverEffect/Mallki'
 
 export default {
-  components: { PanThumb, Mallki },
+  components: { Mallki },
 
   filters: {
     statusFilter(status) {
@@ -90,21 +89,6 @@ export default {
     font-size: 20px;
     font-weight: bold;
   }
-  .panThumb {
-    z-index: 100;
-    height: 70px!important;
-    width: 70px!important;
-    position: absolute!important;
-    top: -45px;
-    left: 0px;
-    border: 5px solid #ffffff;
-    background-color: #fff;
-    margin: auto;
-    box-shadow: none!important;
-    ::v-deep .pan-info {
-      box-shadow: none!important;
-    }
-  }
   .progress-item {
     margin-bottom: 10px;
     font-size: 14px;
diff --git a/src/views/dashboard/admin/components/TransactionTable.vue b/src/views/dashboard/admin/components/TransactionTable.vue
index d07b0ed..250f630 100644
--- a/src/views/dashboard/admin/components/TransactionTable.vue
+++ b/src/views/dashboard/admin/components/TransactionTable.vue
@@ -1,5 +1,16 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-03-05 16:34:46
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-06-22 14:53:26
+ * @Description:
+-->
 <template>
-  <el-table :data="list" style="width: 100%;padding-top: 15px;">
+  <el-table
+    :data="list"
+    :header-cell-style="{background:'#eef1f6',color:'#606266',height: '56px'}"
+    style="width: 100%;padding-top: 15px;"
+  >
     <el-table-column label="Order_No" min-width="200">
       <template slot-scope="scope">
         {{ scope.row.order_no | orderNoFilter }}
diff --git a/src/views/dashboard/admin/index.vue b/src/views/dashboard/admin/index.vue
index 8cb557b..4f0b96f 100644
--- a/src/views/dashboard/admin/index.vue
+++ b/src/views/dashboard/admin/index.vue
@@ -1,6 +1,5 @@
 <template>
   <div class="dashboard-editor-container">
-    <github-corner class="github-corner" />
 
     <panel-group @handleSetLineChartData="handleSetLineChartData" />
 
@@ -41,7 +40,6 @@
 </template>
 
 <script>
-import GithubCorner from '@/components/GithubCorner'
 import PanelGroup from './components/PanelGroup'
 import LineChart from './components/LineChart'
 import RaddarChart from './components/RaddarChart'
@@ -73,7 +71,6 @@ const lineChartData = {
 export default {
   name: 'DashboardAdmin',
   components: {
-    GithubCorner,
     PanelGroup,
     LineChart,
     RaddarChart,
diff --git a/src/views/dashboard/editor/index.vue b/src/views/dashboard/editor/index.vue
deleted file mode 100644
index 9723bcc..0000000
--- a/src/views/dashboard/editor/index.vue
+++ /dev/null
@@ -1,74 +0,0 @@
-<template>
-  <div class="dashboard-editor-container">
-    <div class=" clearfix">
-      <pan-thumb :image="avatar" style="float: left">
-        Your roles:
-        <span v-for="item in roles" :key="item" class="pan-info-roles">{{ item }}</span>
-      </pan-thumb>
-      <github-corner style="position: absolute; top: 0px; border: 0; right: 0;" />
-      <div class="info-container">
-        <span class="display_name">{{ name }}</span>
-        <span style="font-size:20px;padding-top:20px;display:inline-block;">Editor's Dashboard</span>
-      </div>
-    </div>
-    <div>
-      <img :src="emptyGif" class="emptyGif">
-    </div>
-  </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import PanThumb from '@/components/PanThumb'
-import GithubCorner from '@/components/GithubCorner'
-
-export default {
-  name: 'DashboardEditor',
-  components: { PanThumb, GithubCorner },
-  data() {
-    return {
-      emptyGif: 'https://wpimg.wallstcn.com/0e03b7da-db9e-4819-ba10-9016ddfdaed3'
-    }
-  },
-  computed: {
-    ...mapGetters([
-      'name',
-      'avatar',
-      'roles'
-    ])
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-  .emptyGif {
-    display: block;
-    width: 45%;
-    margin: 0 auto;
-  }
-
-  .dashboard-editor-container {
-    background-color: #e3e3e3;
-    min-height: 100vh;
-    padding: 50px 60px 0px;
-    .pan-info-roles {
-      font-size: 12px;
-      font-weight: 700;
-      color: #333;
-      display: block;
-    }
-    .info-container {
-      position: relative;
-      margin-left: 190px;
-      height: 150px;
-      line-height: 200px;
-      .display_name {
-        font-size: 48px;
-        line-height: 48px;
-        color: #212121;
-        position: absolute;
-        top: 25px;
-      }
-    }
-  }
-</style>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 1720ea8..48f5190 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,31 +1,15 @@
 <template>
   <div class="dashboard-container">
-    <component :is="currentRole" />
+    <!-- <component :is="currentRole" /> -->
+    <admin-dashboard />
   </div>
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
-import adminDashboard from './admin'
-import editorDashboard from './editor'
+import AdminDashboard from './admin'
 
 export default {
   name: 'Dashboard',
-  components: { adminDashboard, editorDashboard },
-  data() {
-    return {
-      currentRole: 'adminDashboard'
-    }
-  },
-  computed: {
-    ...mapGetters([
-      'roles'
-    ])
-  },
-  created() {
-    if (!this.roles.includes('admin')) {
-      this.currentRole = 'editorDashboard'
-    }
-  }
+  components: { AdminDashboard }
 }
 </script>
diff --git a/src/views/documentation/index.vue b/src/views/documentation/index.vue
deleted file mode 100644
index 09f5951..0000000
--- a/src/views/documentation/index.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<template>
-  <div class="app-container documentation-container">
-    <a class="document-btn" target="_blank" href="https://store.akveo.com/products/vue-java-admin-dashboard-spring?utm_campaign=akveo_store-Vue-Vue_demo%2Fgithub&utm_source=vue_admin&utm_medium=referral&utm_content=demo_English_button">Java backend integration</a>
-    <a class="document-btn" target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/">Documentation</a>
-    <a class="document-btn" target="_blank" href="https://github.com/PanJiaChen/vue-element-admin/">Github Repository</a>
-    <a class="document-btn" target="_blank" href="https://panjiachen.gitee.io/vue-element-admin-site/zh/">国内文档</a>
-    <dropdown-menu class="document-btn" :items="articleList" title="系列文章" />
-    <a class="document-btn" target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/zh/job/">内推招聘</a>
-  </div>
-</template>
-
-<script>
-import DropdownMenu from '@/components/Share/DropdownMenu'
-
-export default {
-  name: 'Documentation',
-  components: { DropdownMenu },
-  data() {
-    return {
-      articleList: [
-        { title: '基础篇', href: 'https://juejin.im/post/59097cd7a22b9d0065fb61d2' },
-        { title: '登录权限篇', href: 'https://juejin.im/post/591aa14f570c35006961acac' },
-        { title: '实战篇', href: 'https://juejin.im/post/593121aa0ce4630057f70d35' },
-        { title: 'vue-admin-template 篇', href: 'https://juejin.im/post/595b4d776fb9a06bbe7dba56' },
-        { title: 'v4.0 篇', href: 'https://juejin.im/post/5c92ff94f265da6128275a85' },
-        { title: '自行封装 component', href: 'https://segmentfault.com/a/1190000009090836' },
-        { title: '优雅的使用 icon', href: 'https://juejin.im/post/59bb864b5188257e7a427c09' },
-        { title: 'webpack4（上）', href: 'https://juejin.im/post/59bb864b5188257e7a427c09' },
-        { title: 'webpack4（下）', href: 'https://juejin.im/post/5b5d6d6f6fb9a04fea58aabc' }
-      ]
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.documentation-container {
-  margin: 50px;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-
-  .document-btn {
-    flex-shrink: 0;
-    display: block;
-    cursor: pointer;
-    background: black;
-    color: white;
-    height: 60px;
-    padding: 0 16px;
-    margin: 16px;
-    line-height: 60px;
-    font-size: 20px;
-    text-align: center;
-  }
-}
-</style>
diff --git a/src/views/error-log/index.vue b/src/views/error-log/index.vue
index e999c85..7f6f8c4 100644
--- a/src/views/error-log/index.vue
+++ b/src/views/error-log/index.vue
@@ -2,11 +2,11 @@
   <div class="errPage-container">
     <ErrorA />
     <ErrorB />
-    <h3>Please click the bug icon in the upper right corner</h3>
+    <h3>{{ 'errorLog.tips' | i18nFilter }}</h3>
     <aside>
-      Now the management system are basically the form of the spa, it enhances the user experience, but it also increases the possibility of page problems, a small negligence may lead to the entire page deadlock. Fortunately Vue provides a way to catch handling exceptions, where you can handle errors or report exceptions.
+      {{ 'errorLog.description' | i18nFilter }}
       <a target="_blank" class="link-type" href="https://panjiachen.github.io/vue-element-admin-site/guide/advanced/error.html">
-        Document introduction
+        {{ 'errorLog.documentation' | i18nFilter }}
       </a>
     </aside>
     <a href="#">
diff --git a/src/views/error-page/401.vue b/src/views/error-page/401.vue
index a52ed23..eb3a15b 100644
--- a/src/views/error-page/401.vue
+++ b/src/views/error-page/401.vue
@@ -1,7 +1,14 @@
+<!--
+ * @Author: gtz
+ * @Date: 2021-01-27 10:07:42
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-02-01 11:38:13
+ * @Description: file content
+-->
 <template>
   <div class="errPage-container">
     <el-button icon="el-icon-arrow-left" class="pan-back-btn" @click="back">
-      返回
+      {{ 'btn.back' | i18nFilter }}
     </el-button>
     <el-row>
       <el-col :span="12">
diff --git a/src/views/example/components/Warning.vue b/src/views/example/components/Warning.vue
deleted file mode 100644
index 8d2a7e5..0000000
--- a/src/views/example/components/Warning.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-  <aside>
-    Creating and editing pages cannot be cached by keep-alive because keep-alive include does not currently support
-    caching based on routes, so it is currently cached based on component name. If you want to achieve a similar caching
-    effect, you can use a browser caching scheme such as localStorage. Or do not use keep-alive include to cache all
-    pages directly. See details
-    <a
-      href="https://panjiachen.github.io/vue-element-admin-site/guide/essentials/tags-view.html"
-      target="_blank"
-    >Document</a>
-  </aside>
-</template>
-
diff --git a/src/views/example/list.vue b/src/views/example/list.vue
deleted file mode 100644
index 7cdc4ac..0000000
--- a/src/views/example/list.vue
+++ /dev/null
@@ -1,112 +0,0 @@
-<template>
-  <div class="app-container">
-    <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
-      <el-table-column align="center" label="ID" width="80">
-        <template slot-scope="scope">
-          <span>{{ scope.row.id }}</span>
-        </template>
-      </el-table-column>
-
-      <el-table-column width="180px" align="center" label="Date">
-        <template slot-scope="scope">
-          <span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
-        </template>
-      </el-table-column>
-
-      <el-table-column width="120px" align="center" label="Author">
-        <template slot-scope="scope">
-          <span>{{ scope.row.author }}</span>
-        </template>
-      </el-table-column>
-
-      <el-table-column width="100px" label="Importance">
-        <template slot-scope="scope">
-          <svg-icon v-for="n in +scope.row.importance" :key="n" icon-class="star" class="meta-item__icon" />
-        </template>
-      </el-table-column>
-
-      <el-table-column class-name="status-col" label="Status" width="110">
-        <template slot-scope="{row}">
-          <el-tag :type="row.status | statusFilter">
-            {{ row.status }}
-          </el-tag>
-        </template>
-      </el-table-column>
-
-      <el-table-column min-width="300px" label="Title">
-        <template slot-scope="{row}">
-          <router-link :to="'/example/edit/'+row.id" class="link-type">
-            <span>{{ row.title }}</span>
-          </router-link>
-        </template>
-      </el-table-column>
-
-      <el-table-column align="center" label="Actions" width="120">
-        <template slot-scope="scope">
-          <router-link :to="'/example/edit/'+scope.row.id">
-            <el-button type="primary" size="small" icon="el-icon-edit">
-              Edit
-            </el-button>
-          </router-link>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
-  </div>
-</template>
-
-<script>
-import { fetchList } from '@/api/article'
-import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
-
-export default {
-  name: 'ArticleList',
-  components: { Pagination },
-  filters: {
-    statusFilter(status) {
-      const statusMap = {
-        published: 'success',
-        draft: 'info',
-        deleted: 'danger'
-      }
-      return statusMap[status]
-    }
-  },
-  data() {
-    return {
-      list: null,
-      total: 0,
-      listLoading: true,
-      listQuery: {
-        page: 1,
-        limit: 20
-      }
-    }
-  },
-  created() {
-    this.getList()
-  },
-  methods: {
-    getList() {
-      this.listLoading = true
-      fetchList(this.listQuery).then(response => {
-        this.list = response.data.items
-        this.total = response.data.total
-        this.listLoading = false
-      })
-    }
-  }
-}
-</script>
-
-<style scoped>
-.edit-input {
-  padding-right: 100px;
-}
-.cancel-btn {
-  position: absolute;
-  right: 15px;
-  top: 10px;
-}
-</style>
diff --git a/src/views/excel/components/BookTypeOption.vue b/src/views/excel/components/BookTypeOption.vue
index af9fed3..f8a8386 100644
--- a/src/views/excel/components/BookTypeOption.vue
+++ b/src/views/excel/components/BookTypeOption.vue
@@ -1,7 +1,14 @@
+<!--
+ * @Author: gtz
+ * @Date: 2021-01-27 10:07:42
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-04-16 15:12:22
+ * @Description: file content
+-->
 <template>
   <div style="display:inline-block;">
     <label class="radio-label">Book Type: </label>
-    <el-select v-model="bookType" style="width:120px;">
+    <el-select v-model="bookType" clearable style="width:120px;">
       <el-option
         v-for="item in options"
         :key="item"
diff --git a/src/views/excel/components/FilenameOption.vue b/src/views/excel/components/FilenameOption.vue
index 7509223..f6927dc 100644
--- a/src/views/excel/components/FilenameOption.vue
+++ b/src/views/excel/components/FilenameOption.vue
@@ -1,7 +1,7 @@
 <template>
   <div style="display:inline-block;">
     <label class="radio-label" style="padding-left:0;">Filename: </label>
-    <el-input v-model="filename" placeholder="Please enter the file name (default excel-list)" style="width:345px;" prefix-icon="el-icon-document" />
+    <el-input v-model="filename" :placeholder="'excel.placeholder' | i18nFilter" style="width:345px;" prefix-icon="el-icon-document" />
   </div>
 </template>
 
diff --git a/src/views/excel/export-excel.vue b/src/views/excel/export-excel.vue
index b4d7500..af142c7 100644
--- a/src/views/excel/export-excel.vue
+++ b/src/views/excel/export-excel.vue
@@ -6,14 +6,22 @@
       <AutoWidthOption v-model="autoWidth" />
       <BookTypeOption v-model="bookType" />
       <el-button :loading="downloadLoading" style="margin:0 0 20px 20px;" type="primary" icon="el-icon-document" @click="handleDownload">
-        Export Excel
+        {{ 'excel.export' | i18nFilter }} Excel
       </el-button>
       <a href="https://panjiachen.github.io/vue-element-admin-site/feature/component/excel.html" target="_blank" style="margin-left:15px;">
         <el-tag type="info">Documentation</el-tag>
       </a>
     </div>
 
-    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading..." border fit highlight-current-row>
+    <el-table
+      v-loading="listLoading"
+      :data="list"
+      element-loading-text="Loading..."
+      :header-cell-style="{background:'#eef1f6',color:'#606266',height: '56px'}"
+      border
+      fit
+      highlight-current-row
+    >
       <el-table-column align="center" label="Id" width="95">
         <template slot-scope="scope">
           {{ scope.$index }}
diff --git a/src/views/excel/merge-header.vue b/src/views/excel/merge-header.vue
index 4be0227..8399ee2 100644
--- a/src/views/excel/merge-header.vue
+++ b/src/views/excel/merge-header.vue
@@ -7,6 +7,7 @@
       ref="multipleTable"
       v-loading="listLoading"
       :data="list"
+      :header-cell-style="{background:'#eef1f6',color:'#606266',height: '56px'}"
       element-loading-text="Loading"
       border
       fit
@@ -71,21 +72,21 @@ export default {
     },
     handleDownload() {
       this.downloadLoading = true
-      import('@/vendor/Export2Excel').then(excel => {
-        const multiHeader = [['Id', 'Main Information', '', '', 'Date']]
-        const header = ['', 'Title', 'Author', 'Readings', '']
-        const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
-        const list = this.list
-        const data = this.formatJson(filterVal, list)
-        const merges = ['A1:A2', 'B1:D1', 'E1:E2']
-        excel.export_json_to_excel({
-          multiHeader,
-          header,
-          merges,
-          data
+        import('@/vendor/Export2Excel').then(excel => {
+          const multiHeader = [['Id', 'Main Information', '', '', 'Date']]
+          const header = ['', 'Title', 'Author', 'Readings', '']
+          const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
+          const list = this.list
+          const data = this.formatJson(filterVal, list)
+          const merges = ['A1:A2', 'B1:D1', 'E1:E2']
+          excel.export_json_to_excel({
+            multiHeader,
+            header,
+            merges,
+            data
+          })
+          this.downloadLoading = false
         })
-        this.downloadLoading = false
-      })
     },
     formatJson(filterVal, jsonData) {
       return jsonData.map(v => filterVal.map(j => {
diff --git a/src/views/excel/select-excel.vue b/src/views/excel/select-excel.vue
index 05b85fb..bd6da34 100644
--- a/src/views/excel/select-excel.vue
+++ b/src/views/excel/select-excel.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="app-container">
-    <el-input v-model="filename" placeholder="Please enter the file name (default excel-list)" style="width:350px;" prefix-icon="el-icon-document" />
+    <el-input v-model="filename" :placeholder="'excel.placeholder' | i18nFilter" style="width:350px;" prefix-icon="el-icon-document" />
     <el-button :loading="downloadLoading" style="margin-bottom:20px" type="primary" icon="el-icon-document" @click="handleDownload">
-      Export Selected Items
+      {{ 'excel.selectedExport' | i18nFilter }}
     </el-button>
     <a href="https://panjiachen.github.io/vue-element-admin-site/feature/component/excel.html" target="_blank" style="margin-left:15px;">
       <el-tag type="info">Documentation</el-tag>
@@ -11,6 +11,7 @@
       ref="multipleTable"
       v-loading="listLoading"
       :data="list"
+      :header-cell-style="{background:'#eef1f6',color:'#606266',height: '56px'}"
       element-loading-text="拼命加载中"
       border
       fit
diff --git a/src/views/excel/upload-excel.vue b/src/views/excel/upload-excel.vue
index 1772b7f..f0c534b 100644
--- a/src/views/excel/upload-excel.vue
+++ b/src/views/excel/upload-excel.vue
@@ -1,7 +1,20 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-03-05 16:34:46
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-06-22 14:54:31
+ * @Description:
+-->
 <template>
   <div class="app-container">
     <upload-excel-component :on-success="handleSuccess" :before-upload="beforeUpload" />
-    <el-table :data="tableData" border highlight-current-row style="width: 100%;margin-top:20px;">
+    <el-table
+      :data="tableData"
+      border
+      :header-cell-style="{background:'#eef1f6',color:'#606266',height: '56px'}"
+      highlight-current-row
+      style="width: 100%;margin-top:20px;"
+    >
       <el-table-column v-for="item of tableHeader" :key="item" :prop="item" :label="item" />
     </el-table>
   </div>
diff --git a/src/views/guide/index.vue b/src/views/guide/index.vue
index 4897c8f..bfe012e 100644
--- a/src/views/guide/index.vue
+++ b/src/views/guide/index.vue
@@ -1,12 +1,11 @@
 <template>
   <div class="app-container">
     <aside>
-      The guide page is useful for some people who entered the project for the first time. You can briefly introduce the
-      features of the project. Demo is based on
+      {{ 'guide.description' | i18nFilter }}
       <a href="https://github.com/kamranahmedse/driver.js" target="_blank">driver.js.</a>
     </aside>
     <el-button icon="el-icon-question" type="primary" @click.prevent.stop="guide">
-      Show Guide
+      {{ 'guide.button' | i18nFilter }}
     </el-button>
   </div>
 </template>
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 2590640..85c7327 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -3,17 +3,25 @@
     <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="on" label-position="left">
 
       <div class="title-container">
-        <h3 class="title">Login Form</h3>
+        <h3 class="title">
+          <img src="../../assets/img/cnbm.png" style="width: 1.5em; height: 1.5em; position: relative; top: .35em" alt="">
+          {{ 'title' | i18nFilter }}
+        </h3>
       </div>
+      <!-- <div class="title-container">
+        <h3 class="title">
+          {{ 'login.title' | i18nFilter }}
+        </h3>
+      </div> -->
 
       <el-form-item prop="username">
         <span class="svg-container">
-          <svg-icon icon-class="user" />
+          <svg-icon icon-class="user" style="color: #fff" />
         </span>
         <el-input
           ref="username"
           v-model="loginForm.username"
-          placeholder="Username"
+          :placeholder="'login.username' | i18nFilter"
           name="username"
           type="text"
           tabindex="1"
@@ -24,14 +32,14 @@
       <el-tooltip v-model="capsTooltip" content="Caps lock is On" placement="right" manual>
         <el-form-item prop="password">
           <span class="svg-container">
-            <svg-icon icon-class="password" />
+            <svg-icon icon-class="password" style="color: #fff" />
           </span>
           <el-input
             :key="passwordType"
             ref="password"
             v-model="loginForm.password"
             :type="passwordType"
-            placeholder="Password"
+            :placeholder="'login.password' | i18nFilter"
             name="password"
             tabindex="2"
             autocomplete="on"
@@ -45,9 +53,15 @@
         </el-form-item>
       </el-tooltip>
 
-      <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">Login</el-button>
+      <lang-select class="login-language" />
 
-      <div style="position:relative">
+      <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">
+        {{ 'login.logIn' | i18nFilter }}
+      </el-button>
+      <el-row class="login-copyright">
+        {{ 'copyright.copyright' | i18nFilter }}：{{ 'copyright.company' | i18nFilter }}
+      </el-row>
+      <!-- <div style="position:relative">
         <div class="tips">
           <span>Username : admin</span>
           <span>Password : any</span>
@@ -57,32 +71,23 @@
           <span>Password : any</span>
         </div>
 
-        <el-button class="thirdparty-button" type="primary" @click="showDialog=true">
-          Or connect with
-        </el-button>
-      </div>
+      </div> -->
     </el-form>
 
-    <el-dialog title="Or connect with" :visible.sync="showDialog">
-      Can not be simulated on local, so please combine you own business simulation! ! !
-      <br>
-      <br>
-      <br>
-      <social-sign />
-    </el-dialog>
   </div>
 </template>
 
 <script>
-import { validUsername } from '@/utils/validate'
-import SocialSign from './components/SocialSignin'
+import LangSelect from '@/components/LangSelect'
 
 export default {
   name: 'Login',
-  components: { SocialSign },
+  components: {
+    LangSelect
+  },
   data() {
     const validateUsername = (rule, value, callback) => {
-      if (!validUsername(value)) {
+      if (!value) {
         callback(new Error('Please enter the correct user name'))
       } else {
         callback()
@@ -97,8 +102,8 @@ export default {
     }
     return {
       loginForm: {
-        username: 'admin',
-        password: '111111'
+        username: '13588441519',
+        password: '123abc.'
       },
       loginRules: {
         username: [{ required: true, trigger: 'blur', validator: validateUsername }],
@@ -107,7 +112,6 @@ export default {
       passwordType: 'password',
       capsTooltip: false,
       loading: false,
-      showDialog: false,
       redirect: undefined,
       otherQuery: {}
     }
@@ -115,11 +119,12 @@ export default {
   watch: {
     $route: {
       handler: function(route) {
-        const query = route.query
-        if (query) {
-          this.redirect = query.redirect
-          this.otherQuery = this.getOtherQuery(query)
-        }
+        // const query = route.query
+        console.log(route)
+        // if (query) {
+        //   this.redirect = query.redirect
+        //   this.otherQuery = this.getOtherQuery(query)
+        // }
       },
       immediate: true
     }
@@ -133,6 +138,9 @@ export default {
     } else if (this.loginForm.password === '') {
       this.$refs.password.focus()
     }
+    let x = 0
+    0 || 2 && (x = 3, 3)
+    console.log(x)
   },
   destroyed() {
     // window.removeEventListener('storage', this.afterQRScan)
@@ -154,10 +162,13 @@ export default {
     },
     handleLogin() {
       this.$refs.loginForm.validate(valid => {
+        console.log(valid)
+        console.log(this.redirect, this.$route)
         if (valid) {
           this.loading = true
           this.$store.dispatch('user/login', this.loginForm)
             .then(() => {
+              console.log(this.redirect, this.otherQuery)
               this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
               this.loading = false
             })
@@ -204,7 +215,7 @@ export default {
 /* 修复input 背景不协调 和光标变色 */
 /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
 
-$bg:#283443;
+// $bg:#283443;
 $light_gray:#fff;
 $cursor: #fff;
 
@@ -232,7 +243,7 @@ $cursor: #fff;
       caret-color: $cursor;
 
       &:-webkit-autofill {
-        box-shadow: 0 0 0px 1000px $bg inset !important;
+        // box-shadow: 0 0 0px 1000px $bg inset !important;
         -webkit-text-fill-color: $cursor !important;
       }
     }
@@ -248,23 +259,42 @@ $cursor: #fff;
 </style>
 
 <style lang="scss" scoped>
-$bg:#2d3a4b;
+// $bg:#2d3a4b;
 $dark_gray:#889aa4;
 $light_gray:#eee;
 
 .login-container {
   min-height: 100%;
   width: 100%;
-  background-color: $bg;
+  background: url('../../assets/img/login-back.jpg') center no-repeat;
+  background-size: cover;
+  // background-color: $bg;
   overflow: hidden;
 
   .login-form {
     position: relative;
-    width: 520px;
+    width: 620px;
     max-width: 100%;
-    padding: 160px 35px 0;
+    top: 160px;
+    padding: 10px 35px;
     margin: 0 auto;
     overflow: hidden;
+    background: rgba($color: #fff, $alpha: .3);
+    backdrop-filter: blur(10px);
+    border-radius: 5px;
+    box-shadow: 5px 5px 5px rgba($color: #000000, $alpha: .1);
+    .login-language{
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      color: #fff;
+      font-size: 22px;
+      cursor: pointer;
+    }
+    .login-copyright{
+      color: #fff;
+      text-align: center;
+    }
   }
 
   .tips {
diff --git a/src/views/material-manage/batch/components/add-panel.vue b/src/views/material-manage/batch/components/add-panel.vue
new file mode 100644
index 0000000..5be549d
--- /dev/null
+++ b/src/views/material-manage/batch/components/add-panel.vue
@@ -0,0 +1,201 @@
+<template>
+  <div :class="$style.container">
+    <HeaderTitleBar />
+    <el-form
+      ref="batch"
+      :model="batch"
+      :rules="rules"
+      label-width="150px"
+      :class="$style.form"
+    >
+      <el-form-item
+        :label="$t('module.materialManager.materialbatch.materialName')"
+        prop="materialId"
+        :class="$style['form-item']"
+      >
+        <el-select
+          v-model="batch.materialId"
+          :class="$style.select"
+          clearable
+          filterable
+          placeholder="请选择物料"
+          @change="materialChange"
+        >
+          <el-option
+            v-for="item in materialList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item
+        :label="$t('module.materialManager.materialbatch.materialCode')"
+        prop="materialCode"
+        :class="$style['form-item']"
+      >
+        <el-input v-model="materialCode" :disabled="true" />
+      </el-form-item>
+      <el-form-item
+        :label="$t('module.materialManager.materialbatch.externalCode')"
+        prop="code"
+        :class="$style['form-item']"
+      >
+        <el-input v-model="batch.code" />
+      </el-form-item>
+      <el-form-item :label="$t('module.materialManager.materialbatch.name')" prop="name" :class="$style['form-item']">
+        <el-input v-model="batch.name" />
+      </el-form-item>
+      <el-form-item
+        v-if="false"
+        label="描述"
+        prop="description"
+        :class="$style['form-item-remark']"
+      >
+        <el-input v-model="batch.description" />
+      </el-form-item>
+      <el-form-item
+        :label="$t('module.materialManager.materialbatch.remark')"
+        prop="remark"
+        :class="$style['form-item-remark']"
+      >
+        <el-input v-model="batch.remark" />
+      </el-form-item>
+      <SubmitBar @on-cancle="close()" @on-submit="handleSubmit('batch')" />
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { find } from 'lodash'
+import { list } from '@/api/material-manage/material'
+import { add, getInfo, update, getCode } from '@/api/material-manage/batch.js'
+import SubmitBar from '@/views/art/components/submit-bar'
+import HeaderTitleBar from '@/views/material-manage/components/header-title-bar'
+import i18n from '@/lang'
+
+export default {
+  name: 'Refueling',
+  components: {
+    SubmitBar,
+    HeaderTitleBar
+  },
+  props: {},
+  data() {
+    return {
+      materialCode: '',
+      batch: {
+        description: '',
+        code: '',
+        id: null,
+        materialId: null,
+        name: '',
+        remark: ''
+      },
+      materialList: [],
+      rules: {
+        name: [
+          { required: false, message: i18n.t('module.materialManager.materialbatch.placeholderbatchname'), trigger: 'blur' }
+          // { min: 1, message: '长度在3个字符以上', trigger: 'blur' }
+        ],
+        code: [
+          { required: true, message: i18n.t('module.materialManager.materialbatch.placeholderbatchnumber'), trigger: 'blur' },
+          { min: 1, message: '长度在3个字符以上', trigger: 'blur' }
+        ],
+        materialId: [
+          {
+            required: true,
+            message: '请至少选择一个物料',
+            trigger: 'change'
+          }
+        ]
+      },
+      id: null
+    }
+  },
+  watch: {},
+  created() {
+    this.init()
+  },
+  methods: {
+    init() {
+      this.id = this.$route.query.id
+      console.log(this.id)
+      console.log(!this.id)
+      list().then(res => {
+        console.log(res)
+        this.materialList = res.data
+        // if (!this.id && this.materialList && this.materialList.length > 0) {
+        //   this.materialCode = this.materialList[0].externalCode
+        //   this.batch.materialId = this.materialList[0].id
+        // }
+      })
+      if (this.id) {
+        getInfo({ id: this.id }).then((res) => {
+          console.log(res)
+          this.batch = res.data
+          this.materialCode = this.batch.materialCode
+        })
+      } else {
+        getCode().then(res => {
+          this.batch.code = res.data
+        })
+      }
+    },
+    handleSubmit(formName) {
+      console.log('handleSubmit')
+      this.$refs[formName].validate(valid => {
+        if (!valid) {
+          return false
+        }
+        if (this.id) {
+          update(this.batch).then(res => {
+            this.close()
+          })
+        } else {
+          add(this.batch).then(res => {
+            this.close()
+          })
+        }
+      })
+    },
+    close() {
+      this.$router.push({ path: this.$route.query.redirect })
+    },
+    materialChange(item) {
+      const material = find(this.materialList, m => m.id === item)
+      this.materialCode = material && material.code
+    }
+  }
+}
+</script>
+<style lang="scss" module>
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .form {
+    width: 60%;
+    margin-top: 30px;
+    display: flex;
+    flex-flow: wrap;
+    .form-item {
+      width: 50%;
+    }
+    .form-item-remark {
+      width: 100%;
+    }
+  }
+  .input {
+    display: flex;
+    margin: 8px 16px 8px 4px;
+    align-items: center;
+    .select {
+      width: 100%;
+    }
+  }
+  .select {
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/views/material-manage/batch/index.vue b/src/views/material-manage/batch/index.vue
new file mode 100644
index 0000000..6828cef
--- /dev/null
+++ b/src/views/material-manage/batch/index.vue
@@ -0,0 +1,164 @@
+<template>
+  <div :class="$style.container">
+    <SearchBar :placeholder="$t('module.materialManager.materialbatch.placeholderkeywords')" :input-width="200" @on-search="handleSearch">
+      <el-button type="success" icon="el-icon-plus" @click="handleAdd()">
+        {{ 'btn.add' | i18nFilter }}
+      </el-button>
+    </SearchBar>
+    <el-table
+      :data="tableDataList"
+      :class="$style.table"
+      :stripe="true"
+      :header-cell-style="{background:'#eef1f6',color:'#606266',height: '56px', textAlign: 'center'}"
+      :cell-style="{ textAlign: 'center' }"
+      size="medium"
+    >
+      <el-table-column prop="index" :label="$t('module.materialManager.materialbatch.index')" width="80" fixed="left" />
+      <el-table-column prop="createTime" :label="$t('module.materialManager.materialbatch.createTime')" width="180">
+        <template slot-scope="scope">
+          {{ moment(scope.row.createTime).format("YYYY-MM-DD HH:mm:ss") }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="code" :label="$t('module.materialManager.materialbatch.externalCode')" width="180" />
+      <!-- <el-table-column prop="name" :label="$t('module.materialManager.materialbatch.name')" width="180" /> -->
+      <el-table-column prop="materialCode" :label="$t('module.materialManager.materialbatch.materialCode')" width="180" />
+      <el-table-column prop="materialName" :label="$t('module.materialManager.materialbatch.materialName')" width="180" />
+      <el-table-column prop="remark" :label="$t('module.materialManager.materialbatch.remark')" />
+      <el-table-column :label="$t('module.materialManager.materialbatch.operation')" width="280" fixed="right">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="info"
+            icon="el-icon-edit"
+            @click="handleEdit(scope.row.id)"
+          >
+            {{ 'btn.edit' | i18nFilter }}
+          </el-button>
+          <span style="margin:0 3px">|</span>
+          <el-button
+            type="danger"
+            size="mini"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row.id)"
+          >
+            {{ 'btn.delete' | i18nFilter }}
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      background
+      :hide-on-single-page="false"
+      :class="$style.table"
+      :current-page="page.current"
+      :page-sizes="[10, 20, 30, 40]"
+      :page-size="page.size"
+      layout="total, sizes, prev, pager, next"
+      :total="pageTotal"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+  </div>
+</template>
+<script>
+import moment from 'moment'
+import { list, del } from '@/api/material-manage/batch.js'
+import SearchBar from '@/views/art/components/search-bar'
+import i18n from '@/lang'
+export default {
+  components: { SearchBar },
+  props: {},
+  data() {
+    return {
+      moment,
+      tableDataList: [],
+      pageTotal: 0,
+      page: {
+        current: 1,
+        size: 10
+      },
+      param: {}
+    }
+  },
+  created() {
+    this.handleSearch()
+  },
+  methods: {
+    handleSearch(param) {
+      this.param = param
+      console.log(param)
+      list({ ...param, key: param && param.keywords, ...this.page }).then(
+        res => {
+          if (!res.data) {
+            return
+          }
+          this.pageTotal = res.data && res.data.total
+          console.log(this.pageTotal)
+          if (!res.data.records) {
+            this.tableDataList = []
+            return
+          }
+          this.tableDataList = res.data.records.map((m, index) => ({
+            ...m,
+            index: this.page.size * (this.page.current - 1) + index + 1
+          }))
+          console.log(this.tableDataList)
+        }
+      )
+    },
+    handleAdd() {
+      this.$router.push({
+        path: 'batch/add',
+        query: {
+          redirect: '/material-manage/batch',
+          title: '物料批次新增'
+        }
+      })
+    },
+    handleEdit(id) {
+      this.$router.push({
+        path: 'batch/add',
+        query: {
+          redirect: '/material-manage/batch',
+          title: '物料批次编辑',
+          id
+        }
+      })
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`)
+      this.page.size = val
+      this.handleSearch(this.param)
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`)
+      this.page.current = val
+      this.handleSearch(this.param)
+    },
+    handleDelete(id) {
+      this.$confirm(i18n.t('deleteMsgBox.content'), i18n.t('deleteMsgBox.hint'), {
+        confirmButtonText: i18n.t('btn.confirm'),
+        cancelButtonText: i18n.t('btn.cancel'),
+        type: 'warning'
+      }).then(async() => {
+        del({ id }).then(res => {
+          this.page.current = 1
+          this.handleSearch(this.param)
+          this.$message({
+            type: 'info',
+            message: i18n.t('deleteMsgBox.doneMsg')
+          })
+        })
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" module>
+.container {
+  .table {
+    margin: 16px;
+    width: 98.5%;
+  }
+}
+</style>
diff --git a/src/views/material-manage/bom/bom-list.vue b/src/views/material-manage/bom/bom-list.vue
new file mode 100644
index 0000000..0aab4b7
--- /dev/null
+++ b/src/views/material-manage/bom/bom-list.vue
@@ -0,0 +1,165 @@
+<template>
+  <div :class="$style.container">
+    <SearchBar :placeholder="'物料名称或编码'" @on-search="handleSearch">
+      <el-button
+        v-if="!$route.query.disable"
+        type="success"
+        icon="el-icon-plus"
+        @click="handleAdd()"
+      >
+        {{ 'btn.add' | i18nFilter }}
+      </el-button>
+    </SearchBar>
+    <el-table
+      :data="tableDataList"
+      :class="$style.table"
+      :stripe="true"
+      :header-cell-style="{ textAlign: 'center' }"
+      :cell-style="{ textAlign: 'center' }"
+      size="mini"
+    >
+      <el-table-column prop="index" :label="$t('module.materialManager.materialbom.index')" width="80" fixed="left" />
+      <el-table-column prop="code" :label="$t('module.materialManager.materialbom.code')" width="180" fixed="left" />
+      <el-table-column prop="name" :label="$t('module.materialManager.materialbom.detailname')" width="180" />
+      <!-- <el-table-column prop="createTime" :label="$t('module.materialManager.materialbom.createTime')" width="180">
+        <template slot-scope="scope">
+          {{ moment(scope.row.createTime).format("YYYY-MM-DD HH:mm:ss") }}
+        </template>
+      </el-table-column> -->
+      <el-table-column prop="quantity" :label="$t('module.materialManager.materialbom.quantity')" width="80" />
+      <el-table-column prop="unit" :label="$t('module.materialManager.materialbom.unit')" width="80" />
+      <el-table-column prop="remark" :label="$t('module.materialManager.materialbom.remark')" />
+      <el-table-column v-if="!$route.query.disable" :label="$t('module.materialManager.materialbom.operation')" width="280" fixed="right">
+        <template slot-scope="scope">
+          <el-button
+            v-if="!$route.query.disable"
+            type="danger"
+            size="mini"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row.id)"
+          >
+            {{ 'btn.delete' | i18nFilter }}
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      :hide-on-single-page="false"
+      background
+      :class="$style.table"
+      :current-page="page.current"
+      :page-sizes="[10, 20, 30, 40]"
+      :page-size="page.size"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="page.total"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+    <AddDialog
+      v-if="addDialogVisible"
+      :class="$style.dialog"
+      :is-edit="isEdit"
+      :bom-id="bomId"
+      :visible="addDialogVisible"
+      @on-success="handleAddSuccess()"
+      @on-close="addDialogVisible = false"
+    />
+  </div>
+</template>
+<script>
+import moment from 'moment'
+import { list, del } from '@/api/material-manage/bom-list.js'
+import SearchBar from '@/views/art/components/search-bar'
+import AddDialog from '@/views/material-manage/bom/components/add-dialog'
+import i18n from '@/lang'
+export default {
+  components: { SearchBar, AddDialog },
+  props: {
+    bomId: {
+      type: String,
+      default: null
+    }
+  },
+  data() {
+    return {
+      moment,
+      isEdit: false,
+      tableDataList: [],
+      page: {
+        total: 40,
+        current: 1,
+        size: 10
+      },
+      addDialogVisible: false,
+      param: {}
+    }
+  },
+  created() {
+    this.handleSearch()
+  },
+  methods: {
+    handleSearch(param) {
+      this.param = param
+      console.log(param)
+      list({ ...param, ...this.page, bomId: this.bomId }).then(res => {
+        console.log(res)
+        this.page.total = res.data.total
+        if (!res.data.records) {
+          this.tableDataList = []
+          return
+        }
+        this.tableDataList = res.data.records.map((m, index) => ({
+          ...m,
+          index: this.page.size * (this.page.current - 1) + index + 1
+        }))
+      })
+    },
+    handleAdd() {
+      console.log('handleAdd')
+      this.addDialogVisible = true
+      this.isEdit = false
+    },
+    handleAddSuccess() {
+      this.addDialogVisible = false
+      this.handleSearch(this.param)
+    },
+    handleEdit() {
+      this.addDialogVisible = true
+      this.isEdit = true
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`)
+      this.page.size = val
+      this.handleSearch(this.param)
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`)
+      this.page.current = val
+      this.handleSearch(this.param)
+    },
+    handleDelete(id) {
+      this.$confirm(i18n.t('deleteMsgBox.content'), i18n.t('deleteMsgBox.hint'), {
+        confirmButtonText: i18n.t('btn.confirm'),
+        cancelButtonText: i18n.t('btn.cancel'),
+        type: 'warning'
+      }).then(async() => {
+        del({ id }).then(res => {
+          this.handleSearch(this.param)
+          this.param.current = 1
+          this.$message({
+            type: 'info',
+            message: i18n.t('deleteMsgBox.doneMsg')
+          })
+        })
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" module>
+.container {
+  .table {
+    margin: 16px;
+  }
+}
+</style>
diff --git a/src/views/material-manage/bom/components/add-dialog.vue b/src/views/material-manage/bom/components/add-dialog.vue
new file mode 100644
index 0000000..e3c2e3a
--- /dev/null
+++ b/src/views/material-manage/bom/components/add-dialog.vue
@@ -0,0 +1,154 @@
+<template>
+  <el-dialog
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    width="25%"
+    :visible="visible"
+    :destroy-on-close="false"
+    :before-close="() => $emit('on-close')"
+    :title="isEdit ? $t('module.materialManager.materialbom.editDialogTitle') : $t('module.materialManager.materialbom.addDialogTitle')"
+    :class="$style.dialog"
+  >
+    <el-form ref="obj" :model="obj" :rules="rules" label-width="130px">
+      <el-form-item :label="$t('module.materialManager.materialbom.detailname')" prop="materialId">
+        <el-select
+          v-model="obj.materialId"
+          :class="$style.select"
+          clearable
+          filterable
+          placeholder="请选择"
+        >
+          <el-option
+            v-for="item in materialList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="$t('module.materialManager.materialbom.quantity')" prop="quantity">
+        <el-input-number v-model="obj.quantity" :min="0" :class="$style.select" />
+      </el-form-item>
+      <el-form-item :label="$t('module.materialManager.materialbom.unit')" prop="unit">
+        <el-input v-model="obj.unit" />
+      </el-form-item>
+      <el-form-item :label="$t('module.materialManager.materialbom.remark')" prop="remark">
+        <el-input v-model="obj.remark" />
+      </el-form-item>
+      <SubmitBar
+        @on-cancle="$emit('on-close')"
+        @on-submit="handleSubmit('obj')"
+      />
+    </el-form>
+  </el-dialog>
+</template>
+
+<script>
+import { add } from '@/api/material-manage/bom-list.js'
+import SubmitBar from '@/views/art/components/submit-bar'
+import { list } from '@/api/material-manage/material'
+
+export default {
+  name: 'AddDialog',
+  components: {
+    SubmitBar
+  },
+  props: {
+    bomId: {
+      type: String,
+      default: null
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    isEdit: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      obj: {
+        bomId: this.bomId,
+        id: null,
+        materialId: null,
+        quantity: 1,
+        remark: '',
+        unit: ''
+      },
+      materialList: [],
+      rules: {
+        materialId: [
+          {
+            required: true,
+            message: '请至少选择一个物料',
+            trigger: 'change'
+          }
+        ],
+        quantity: [
+          { required: false, message: '数量不能为空', trigger: 'blur' }
+        ],
+        unit: [
+          { required: false, message: '单位不能为空', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  watch: {
+    isEdit(val) {
+      if (val) {
+        console.log('this is edit')
+      } else {
+        console.log('this is add')
+      }
+    }
+  },
+  created() {
+    this.init()
+  },
+  methods: {
+    init() {
+      list().then(res => {
+        console.log(res)
+        this.materialList = res.data
+        // if (!this.isEdit && this.materialList && this.materialList.length > 0) {
+        //   this.obj.materialId = this.materialList[0].id
+        // }
+      })
+    },
+    handleSubmit(formName) {
+      console.log('handleSubmit')
+      this.$refs[formName].validate((valid) => {
+        if (!valid) {
+          return false
+        }
+        if (!this.obj.materialId) {
+          this.$message.error('物料不能为空')
+          return false
+        }
+        console.log(this.obj)
+        add(this.obj).then(res => {
+          console.log(res.data)
+          this.$emit('on-success')
+        })
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" module>
+.dialog {
+  .input {
+    display: flex;
+    margin: 8px 16px 8px 4px;
+    align-items: center;
+    .select {
+      width: 100%;
+    }
+  }
+  .select {
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/views/material-manage/bom/components/add-panel.vue b/src/views/material-manage/bom/components/add-panel.vue
new file mode 100644
index 0000000..411c32a
--- /dev/null
+++ b/src/views/material-manage/bom/components/add-panel.vue
@@ -0,0 +1,157 @@
+<template>
+  <div :class="$style.container">
+    <HeaderTitleBar />
+    <el-form
+      ref="bom"
+      :model="bom"
+      :rules="rules"
+      label-width="150px"
+      :class="$style.form"
+    >
+      <el-form-item :label="$t('module.materialManager.materialbom.bomcode')" prop="code" :class="$style['form-item']">
+        <el-input v-model="bom.code" :disabled="$route.query.disable" />
+      </el-form-item>
+      <el-form-item
+        :label="$t('module.materialManager.materialbom.name')"
+        prop="name"
+        :class="$style['form-item']"
+      >
+        <el-input v-model="bom.name" :disabled="$route.query.disable" />
+      </el-form-item>
+      <el-form-item :label="$t('module.materialManager.materialbom.remark')" prop="remark" :class="$style['form-item-remark']">
+        <el-input v-model="bom.remark" :disabled="$route.query.disable" />
+      </el-form-item>
+      <SubmitBar
+        v-if="!$route.query.disable"
+        @on-cancle="close()"
+        @on-submit="handleSubmit('bom')"
+      />
+    </el-form>
+    <el-divider v-if="id" content-position="left">{{ $t('module.materialManager.materialbom.subtitle') }}</el-divider>
+    <BomList v-if="id" :class="$style.bom" :bom-id="id" />
+  </div>
+</template>
+
+<script>
+import { add, getInfo, update, getCode } from '@/api/material-manage/bom.js'
+import SubmitBar from '@/views/art/components/submit-bar'
+import HeaderTitleBar from '@/views/material-manage/components/header-title-bar'
+import BomList from '@/views/material-manage/bom/bom-list'
+import i18n from '@/lang'
+
+export default {
+  name: 'Bom',
+  components: {
+    SubmitBar,
+    HeaderTitleBar,
+    BomList
+  },
+  props: {
+  },
+  data() {
+    return {
+      bom: {
+        code: '', //	编码
+        id: null, // 	主键，更新时需要填写,示例值(1)
+        remark: '', // 	备注
+        name: ''
+      },
+      rules: {
+        name: [
+          { required: true, message: i18n.t('module.materialManager.materialbom.placeholderbomName'), trigger: 'blur' }
+        ],
+        code: [
+          { required: true, message: i18n.t('module.materialManager.materialbom.placeholderbomcode'), trigger: 'blur' }
+        ]
+      },
+      id: null
+    }
+  },
+  watch: {
+  },
+  created() {
+    this.init()
+  },
+  methods: {
+    init() {
+      this.id = this.$route.query.id
+      console.log(this.id)
+      console.log(!this.id)
+      if (this.id) {
+        getInfo({ id: this.id }).then((res) => {
+          console.log(res)
+          this.bom = res.data
+        })
+      } else {
+        getCode().then(res => {
+          this.bom.code = res.data
+        })
+      }
+    },
+    close() {
+      this.$router.push({ path: this.$route.query.redirect })
+    },
+    handleSubmit(formName) {
+      console.log('handleSubmit')
+      this.$refs[formName].validate(valid => {
+        if (!valid) {
+          return false
+        }
+        if (this.id) {
+          update(this.bom).then(res => {
+            this.$message({
+              type: 'success',
+              message: '更新成功！'
+            })
+            this.close()
+          })
+        } else {
+          add(this.bom).then(res => {
+            this.bom.id = res.data.id
+            this.id = res.data.id
+            this.$message({
+              type: 'success',
+              message: '保存成功！！'
+            })
+            this.close()
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" module>
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .form {
+    width: 60%;
+    margin-top: 30px;
+    display: flex;
+    flex-flow: wrap;
+    .form-item {
+      width: 50%;
+    }
+    .form-item-remark {
+      width: 100%;
+    }
+  }
+  .input {
+    display: flex;
+    margin: 8px 16px 8px 4px;
+    align-items: center;
+    .select {
+      width: 100%;
+    }
+  }
+  .select {
+    width: 100%;
+  }
+  .bom{
+    position: relative;
+    width: 98%;
+  }
+}
+</style>
diff --git a/src/views/material-manage/bom/index.vue b/src/views/material-manage/bom/index.vue
new file mode 100644
index 0000000..12c38f7
--- /dev/null
+++ b/src/views/material-manage/bom/index.vue
@@ -0,0 +1,171 @@
+<template>
+  <div :class="$style.container">
+    <SearchBar :placeholder="'bom名称或编码'" @on-search="handleSearch">
+      <el-button type="success" icon="el-icon-plus" @click="handleAdd()">
+        {{ 'btn.add' | i18nFilter }}
+      </el-button>
+    </SearchBar>
+    <el-table
+      :data="tableDataList"
+      :class="$style.table"
+      :stripe="true"
+      :cell-style="{ textAlign: 'center' }"
+      :header-cell-style="{background:'#eef1f6',color:'#606266',height: '56px', textAlign: 'center'}"
+      size="medium"
+    >
+      <el-table-column prop="index" :label="$t('module.materialManager.materialbom.index')" width="80" />
+      <el-table-column
+        prop="code"
+        :label="$t('module.materialManager.materialbom.bomcode')"
+        width="280"
+      />
+      <el-table-column prop="name" :label="$t('module.materialManager.materialbom.name')" width="280" />
+      <el-table-column prop="createTime" :label="$t('module.materialManager.materialbom.createTime')" width="180">
+        <template slot-scope="scope">
+          {{ moment(scope.row.createTime).format("YYYY-MM-DD HH:mm:ss") }}
+        </template>
+      </el-table-column>
+
+      <el-table-column prop="remark" :label="$t('module.materialManager.materialbom.remark')" />
+      <el-table-column :label="$t('module.materialManager.materialbom.operation')" width="350">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="info"
+            icon="el-icon-more"
+            @click="handleEdit(scope.row.id, true)"
+          >
+            {{ 'btn.detail' | i18nFilter }}
+          </el-button>
+          <span style="margin:0 3px">|</span>
+          <el-button
+            size="mini"
+            type="info"
+            icon="el-icon-edit"
+            @click="handleEdit(scope.row.id)"
+          >
+            {{ 'btn.edit' | i18nFilter }}
+          </el-button>
+          <span style="margin:0 3px">|</span>
+          <el-button
+            type="danger"
+            size="mini"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row.id)"
+          >
+            {{ 'btn.delete' | i18nFilter }}
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      background
+      :hide-on-single-page="false"
+      :class="$style.table"
+      :current-page="page.current"
+      :page-sizes="[10, 20, 30, 40]"
+      :page-size="page.size"
+      layout="total, sizes, prev, pager, next"
+      :total="page.total"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+  </div>
+</template>
+<script>
+import moment from 'moment'
+import { list, del } from '@/api/material-manage/bom.js'
+import SearchBar from '@/views/art/components/search-bar'
+import i18n from '@/lang'
+export default {
+  components: { SearchBar },
+  props: {},
+  data() {
+    return {
+      moment,
+      tableDataList: [],
+      page: {
+        total: 40,
+        current: 1,
+        size: 10
+      },
+      param: {}
+    }
+  },
+  created() {
+    this.handleSearch()
+  },
+  methods: {
+    handleSearch(param) {
+      this.param = param
+      console.log(param)
+      list({ ...param, ...this.page }).then(res => {
+        console.log(res)
+        this.page.total = res.data.total
+        if (!res.data.records) {
+          this.tableDataList = []
+          return
+        }
+        this.tableDataList = res.data.records.map((m, index) => ({
+          ...m,
+          index: this.page.size * (this.page.current - 1) + index + 1
+        }))
+      })
+    },
+    handleAdd() {
+      this.$router.push({
+        path: 'bom/add',
+        query: {
+          redirect: '/material-manage/bom',
+          title: 'bom新增'
+        }
+      })
+    },
+    handleEdit(id, disable) {
+      this.$router.push({
+        path: 'bom/add',
+        query: {
+          redirect: '/material-manage/bom',
+          title: 'bom详情',
+          id,
+          disable
+        }
+      })
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`)
+      this.page.size = val
+      this.handleSearch(this.param)
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`)
+      this.page.current = val
+      this.handleSearch(this.param)
+    },
+    handleDelete(id) {
+      this.$confirm(i18n.t('deleteMsgBox.content'), i18n.t('deleteMsgBox.hint'), {
+        confirmButtonText: i18n.t('btn.confirm'),
+        cancelButtonText: i18n.t('btn.cancel'),
+        type: 'warning'
+      }).then(async() => {
+        del({ id }).then(res => {
+          this.page.current = 1
+          this.handleSearch(this.param)
+          this.$message({
+            type: 'info',
+            message: i18n.t('deleteMsgBox.doneMsg')
+          })
+        })
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" module>
+.container {
+  .table {
+    margin: 16px;
+    width: 98.5%;
+  }
+}
+</style>
diff --git a/src/views/material-manage/components/header-title-bar.vue b/src/views/material-manage/components/header-title-bar.vue
new file mode 100644
index 0000000..da68ffa
--- /dev/null
+++ b/src/views/material-manage/components/header-title-bar.vue
@@ -0,0 +1,37 @@
+<template>
+  <el-page-header :class="$style.container" :content="$route.query.title" @back="handleBack()">
+    <div slot="title" slot-scope="{data}">
+      <slot name="title" :data="data" />
+    </div>
+    <div slot="content" slot-scope="{data}">
+      <slot name="content" :data="data" />
+    </div>
+  </el-page-header>
+</template>
+<script>
+export default {
+  props: { },
+  data() {
+    return {}
+  },
+  created() {
+    console.log(this.$route.query.title)
+  },
+  methods: {
+    handleBack() {
+      this.$router.push({ path: this.$route.query.redirect })
+    }
+  }
+}
+</script>
+<style lang="scss" module>
+.container {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 40px;
+  padding: 4px 40px;
+  border-radius: 4px;
+  background-color: #eee;
+}
+</style>
diff --git a/src/views/material-manage/currentConsume/components/HeadForm.vue b/src/views/material-manage/currentConsume/components/HeadForm.vue
new file mode 100644
index 0000000..75b5ed9
--- /dev/null
+++ b/src/views/material-manage/currentConsume/components/HeadForm.vue
@@ -0,0 +1,97 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:18:27
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-04-28 11:25:15
+ * @Description:
+-->
+<template>
+  <el-form :inline="true" @keyup.enter.native="getDataList()">
+    <el-form-item v-for="(item, index) in keyName" :key="index" :label="item.name">
+      <el-input v-if="item.type === 'input'" v-model="key[index]" style="width:200px" :placeholder="placeholderName[index]" clearable />
+      <el-select v-if="item.type === 'select'" v-model="key[index]" style="width:200px" :placeholder="placeholderName[index]" filterable clearable>
+        <el-option v-for="i in item.option" :key="i.id" :value="i.id" :label="i.name" />
+      </el-select>
+      <el-date-picker
+        v-if="item.type === 'datePicker'"
+        v-model="key[index]"
+        type="daterange"
+        align="right"
+        unlink-panels
+        :range-separator="'formItem.to' | i18nFilter"
+        :start-placeholder="'formItem.beginTime' | i18nFilter"
+        :end-placeholder="'formItem.endTime' | i18nFilter"
+        :picker-options="pickerOptions"
+      />
+    </el-form-item>
+    <el-form-item>
+      <el-button @click="getDataList()">{{ 'btn.search' | i18nFilter }}</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+
+export default {
+  props: {
+    keyName: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    placeholderName: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      key: [],
+      pickerOptions: {
+        shortcuts: [{
+          text: this.$t('datePickerOption.lastWeek'),
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: this.$t('datePickerOption.lastMonth'),
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: this.$t('datePickerOption.lastThreeMonths'),
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      }
+    }
+  },
+  mounted() {
+    this.keyName.map(() => {
+      this.key.push(null)
+    })
+  },
+  methods: {
+    getDataList() {
+      this.$emit('getDataList', this.key)
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>
diff --git a/src/views/material-manage/currentConsume/index.vue b/src/views/material-manage/currentConsume/index.vue
new file mode 100644
index 0000000..4976c3d
--- /dev/null
+++ b/src/views/material-manage/currentConsume/index.vue
@@ -0,0 +1,158 @@
+<!--
+ * @Author: gtz
+ * @Date: 2021-04-28 10:42:54
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-26 10:51:48
+ * @Description: file content
+-->
+
+<template>
+  <div :class="$style.container">
+    <SearchBar
+      :placeholder-name="placeholderName"
+      :key-name="keyName"
+      @getDataList="handleSearch"
+    />
+    <el-table
+      :data="tableDataList"
+      :class="$style.table"
+      :stripe="true"
+      :header-cell-style="{background:'#eef1f6',color:'#606266',height: '56px', textAlign: 'center'}"
+      :cell-style="{ textAlign: 'center' }"
+      size="medium"
+    >
+      <el-table-column prop="index" :label="$t('module.materialManager.currentConsume.index')" width="80" fixed="left" />
+      <el-table-column prop="equipmentName" :label="$t('module.materialManager.currentConsume.eqName')" width="180" />
+      <el-table-column prop="materialName" :label="$t('module.materialManager.currentConsume.materialName')" width="180" />
+      <el-table-column prop="materialCode" :label="$t('module.materialManager.currentConsume.materialCode')" width="180" />
+      <el-table-column prop="materialDateCode" :label="$t('module.materialManager.currentConsume.materialBatch')" width="180" />
+      <el-table-column prop="beginTime" :label="$t('module.materialManager.currentConsume.beginTime')" width="180">
+        <template slot-scope="scope">
+          {{ moment(scope.row.beginTime).utcOffset(-8).format("YYYY-MM-DD HH:mm:ss") }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="materialNowCon" :label="$t('module.materialManager.currentConsume.materialNowCon')" width="240" />
+      <el-table-column prop="MaterialConThr" :label="$t('module.materialManager.currentConsume.MaterialConThr')" width="240" />
+      <el-table-column prop="remark" :label="$t('module.materialManager.currentConsume.remark')" />
+    </el-table>
+    <el-pagination
+      background
+      :hide-on-single-page="false"
+      :class="$style.table"
+      :current-page="page.current"
+      :page-sizes="[10, 20, 30, 40]"
+      :page-size="page.size"
+      layout="total, sizes, prev, pager, next"
+      :total="page.total"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+  </div>
+</template>
+<script>
+import Vue from 'vue'
+import moment from 'moment'
+import { list, getMaterialBatchList } from '@/api/material-manage/currentConsume.js'
+import { getDictDevice, getDictMaterial } from '@/api/dict'
+import SearchBar from './components/HeadForm'
+
+export default {
+  components: { SearchBar },
+  props: {},
+  data() {
+    return {
+      moment,
+      tableDataList: [],
+      placeholderName: [this.$t('module.materialManager.currentConsume.eqName'), this.$t('module.materialManager.currentConsume.materialName'), this.$t('module.materialManager.currentConsume.materialBatch')],
+      page: {
+        total: 40,
+        current: 1,
+        size: 10
+      },
+      param: {},
+      keyName: [{
+        name: this.$t('module.materialManager.currentConsume.eqName'),
+        type: 'select',
+        option: []
+      }, {
+        name: this.$t('module.materialManager.currentConsume.materialName'),
+        type: 'select',
+        option: []
+      }, {
+        name: this.$t('module.materialManager.currentConsume.materialBatch'),
+        type: 'select',
+        option: []
+      }]
+    }
+  },
+  created() {
+    this.getDict()
+    this.handleSearch()
+  },
+  methods: {
+    handleSearch(param) {
+      this.param = param
+      console.log(param)
+      list({ ...param, ...this.page }).then(res => {
+        console.log(res)
+        this.page.total = res.data.total
+        if (!res.data.records) {
+          this.tableDataList = []
+          return
+        }
+        this.tableDataList = res.data.records.map((m, index) => ({
+          ...m,
+          index: this.page.size * (this.page.current - 1) + index + 1
+        }))
+      })
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`)
+      this.page.size = val
+      this.handleSearch(this.param)
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`)
+      this.page.current = val
+      this.handleSearch(this.param)
+    },
+    getDict() {
+      this.getEq()
+      this.getMaterial()
+      this.getMaterialBatch()
+    },
+    async getEq() {
+      const result = await getDictDevice({
+        current: 1,
+        size: 999
+      })
+      Vue.set(this.keyName[0], 'option', result)
+    },
+    async getMaterial() {
+      const result = await getDictMaterial()
+      Vue.set(this.keyName[1], 'option', result)
+    },
+    async getMaterialBatch() {
+      const result = await getMaterialBatchList({
+        current: 1,
+        size: 999
+      })
+      Vue.set(this.keyName[2], 'option', result.data.records.map(item => {
+        return {
+          id: item.code,
+          name: item.code
+        }
+      }))
+    }
+  }
+}
+</script>
+<style lang="scss" module>
+.container {
+  padding: 10px;
+  .table {
+    margin-bottom: 16px;
+    width: 98.5%;
+  }
+}
+</style>
diff --git a/src/views/material-manage/historyConsume/components/HeadForm.vue b/src/views/material-manage/historyConsume/components/HeadForm.vue
new file mode 100644
index 0000000..33e2afa
--- /dev/null
+++ b/src/views/material-manage/historyConsume/components/HeadForm.vue
@@ -0,0 +1,97 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:18:27
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-04-28 11:32:22
+ * @Description:
+-->
+<template>
+  <el-form :inline="true" @keyup.enter.native="getDataList()">
+    <el-form-item v-for="(item, index) in keyName" :key="index" :label="item.name">
+      <el-input v-if="item.type === 'input'" v-model="key[index]" style="width:200px" :placeholder="placeholderName[index]" clearable />
+      <el-select v-if="item.type === 'select'" v-model="key[index]" style="width:200px" :placeholder="placeholderName[index]" filterable clearable>
+        <el-option v-for="i in item.option" :key="i.id" :value="i.id" :label="i.name" />
+      </el-select>
+      <el-date-picker
+        v-if="item.type === 'datePicker'"
+        v-model="key[index]"
+        type="daterange"
+        align="right"
+        unlink-panels
+        :range-separator="'formItem.to' | i18nFilter"
+        :start-placeholder="'formItem.beginTime' | i18nFilter"
+        :end-placeholder="'formItem.endTime' | i18nFilter"
+        :picker-options="pickerOptions"
+      />
+    </el-form-item>
+    <el-form-item>
+      <el-button @click="getDataList()">{{ 'btn.search' | i18nFilter }}</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+
+export default {
+  props: {
+    keyName: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    placeholderName: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      key: [],
+      pickerOptions: {
+        shortcuts: [{
+          text: this.$t('datePickerOption.lastWeek'),
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: this.$t('datePickerOption.lastMonth'),
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: this.$t('datePickerOption.lastThreeMonths'),
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      }
+    }
+  },
+  mounted() {
+    this.keyName.map(() => {
+      this.key.push(null)
+    })
+  },
+  methods: {
+    getDataList() {
+      this.$emit('getDataList', this.key)
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>
diff --git a/src/views/material-manage/historyConsume/index.vue b/src/views/material-manage/historyConsume/index.vue
new file mode 100644
index 0000000..832cff6
--- /dev/null
+++ b/src/views/material-manage/historyConsume/index.vue
@@ -0,0 +1,163 @@
+<!--
+ * @Author: gtz
+ * @Date: 2021-04-28 10:42:54
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-26 10:49:30
+ * @Description: file content
+-->
+
+<template>
+  <div :class="$style.container">
+    <SearchBar
+      :placeholder-name="placeholderName"
+      :key-name="keyName"
+      @getDataList="handleSearch"
+    />
+    <el-table
+      :data="tableDataList"
+      :class="$style.table"
+      :stripe="true"
+      :header-cell-style="{background:'#eef1f6',color:'#606266',height: '56px', textAlign: 'center'}"
+      :cell-style="{ textAlign: 'center' }"
+      size="medium"
+    >
+      <el-table-column prop="index" :label="$t('module.materialManager.historyConsume.index')" width="80" fixed="left" />
+      <el-table-column prop="equipmentName" :label="$t('module.materialManager.historyConsume.eqName')" width="180" />
+      <el-table-column prop="materialName" :label="$t('module.materialManager.historyConsume.materialName')" width="180" />
+      <el-table-column prop="materialCode" :label="$t('module.materialManager.historyConsume.materialCode')" width="180" />
+      <el-table-column prop="materialDateCode" :label="$t('module.materialManager.historyConsume.materialBatch')" width="180" />
+      <el-table-column prop="beginTime" :label="$t('module.materialManager.historyConsume.endTime')" width="180">
+        <template slot-scope="scope">
+          {{ moment(scope.row.beginTime).utcOffset(-8).format("YYYY-MM-DD HH:mm:ss") }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="beginTime" :label="$t('module.materialManager.historyConsume.beginTime')" width="180">
+        <template slot-scope="scope">
+          {{ moment(scope.row.beginTime).utcOffset(-8).format("YYYY-MM-DD HH:mm:ss") }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="materialNowCon" :label="$t('module.materialManager.historyConsume.materialNowCon')" width="250" />
+      <el-table-column prop="MaterialConThr" :label="$t('module.materialManager.historyConsume.MaterialConThr')" width="250" />
+      <el-table-column prop="remark" :label="$t('module.materialManager.historyConsume.remark')" />
+    </el-table>
+    <el-pagination
+      background
+      :hide-on-single-page="false"
+      :class="$style.table"
+      :current-page="page.current"
+      :page-sizes="[10, 20, 30, 40]"
+      :page-size="page.size"
+      layout="total, sizes, prev, pager, next"
+      :total="page.total"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+  </div>
+</template>
+<script>
+import Vue from 'vue'
+import moment from 'moment'
+import { list, getMaterialBatchList } from '@/api/material-manage/historyConsume.js'
+import { getDictDevice, getDictMaterial } from '@/api/dict'
+import SearchBar from './components/HeadForm'
+
+export default {
+  components: { SearchBar },
+  props: {},
+  data() {
+    return {
+      moment,
+      tableDataList: [],
+      placeholderName: [this.$t('module.materialManager.historyConsume.eqName'), this.$t('module.materialManager.historyConsume.materialName'), this.$t('module.materialManager.historyConsume.materialBatch')],
+      page: {
+        total: 40,
+        current: 1,
+        size: 10
+      },
+      param: {},
+      keyName: [{
+        name: this.$t('module.materialManager.historyConsume.eqName'),
+        type: 'select',
+        option: []
+      }, {
+        name: this.$t('module.materialManager.historyConsume.materialName'),
+        type: 'select',
+        option: []
+      }, {
+        name: this.$t('module.materialManager.historyConsume.materialBatch'),
+        type: 'select',
+        option: []
+      }]
+    }
+  },
+  created() {
+    this.getDict()
+    this.handleSearch()
+  },
+  methods: {
+    handleSearch(param) {
+      this.param = param
+      console.log(param)
+      list({ ...param, ...this.page }).then(res => {
+        console.log(res)
+        this.page.total = res.data.total
+        if (!res.data.records) {
+          this.tableDataList = []
+          return
+        }
+        this.tableDataList = res.data.records.map((m, index) => ({
+          ...m,
+          index: this.page.size * (this.page.current - 1) + index + 1
+        }))
+      })
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`)
+      this.page.size = val
+      this.handleSearch(this.param)
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`)
+      this.page.current = val
+      this.handleSearch(this.param)
+    },
+    getDict() {
+      this.getEq()
+      this.getMaterial()
+      this.getMaterialBatch()
+    },
+    async getEq() {
+      const result = await getDictDevice({
+        current: 1,
+        size: 999
+      })
+      Vue.set(this.keyName[0], 'option', result)
+    },
+    async getMaterial() {
+      const result = await getDictMaterial()
+      Vue.set(this.keyName[1], 'option', result)
+    },
+    async getMaterialBatch() {
+      const result = await getMaterialBatchList({
+        current: 1,
+        size: 999
+      })
+      Vue.set(this.keyName[2], 'option', result.data.records.map(item => {
+        return {
+          id: item.code,
+          name: item.code
+        }
+      }))
+    }
+  }
+}
+</script>
+<style lang="scss" module>
+.container {
+  padding: 10px;
+  .table {
+    margin-bottom: 16px;
+    width: 98.5%;
+  }
+}
+</style>
diff --git a/src/views/material-manage/refueling/components/add-panel.vue b/src/views/material-manage/refueling/components/add-panel.vue
new file mode 100644
index 0000000..dc98cc4
--- /dev/null
+++ b/src/views/material-manage/refueling/components/add-panel.vue
@@ -0,0 +1,242 @@
+<template>
+  <div :class="$style.container">
+    <HeaderTitleBar />
+    <el-form
+      ref="refueling"
+      :model="refueling"
+      :rules="rules"
+      label-width="150px"
+      :class="$style.form"
+    >
+      <el-form-item :label="$t('module.materialManager.refluelling.materialDateCode')" prop="code" :class="$style['form-item']">
+        <el-input v-model="refueling.code" @blur.native.capture="querySearchAsync()" />
+      </el-form-item>
+      <el-form-item
+        :label="$t('module.materialManager.refluelling.replaceTime')"
+        prop="replaceTime"
+        :class="$style['form-item']"
+      >
+        <el-date-picker
+          v-model="refueling.replaceTime"
+          type="datetime"
+          :class="$style.select"
+        />
+      </el-form-item>
+      <el-form-item
+        :label="$t('module.materialManager.refluelling.materialName')"
+        prop="materialId"
+        :class="$style['form-item']"
+      >
+        <el-input v-model="batch.materialName" :disabled="true" />
+      </el-form-item>
+      <el-form-item
+        :label="$t('module.materialManager.refluelling.materialCode')"
+        prop="materialCode"
+        :class="$style['form-item']"
+      >
+        <el-input v-model="batch.materialCode" :disabled="true" />
+      </el-form-item>
+      <el-form-item :label="$t('module.materialManager.refluelling.equipmentName')" prop="equipmentId" :class="$style['form-item']">
+        <el-select
+          v-model="refueling.equipmentId"
+          :class="$style.select"
+          filterable
+          clearable
+          placeholder="请选择"
+        >
+          <el-option
+            v-for="item in equipmentList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="$t('module.materialManager.refluelling.source')" prop="source" :class="$style['form-item']">
+        <el-select
+          v-model="refueling.source"
+          :class="$style.select"
+          filterable
+          clearable
+        >
+          <el-option
+            v-for="item in sources"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="$t('module.materialManager.refluelling.operator')" prop="operator" :class="$style['form-item-remark']">
+        <el-input v-model="refueling.operator" />
+      </el-form-item>
+      <el-form-item :label="$t('module.materialManager.refluelling.remark')" prop="remark" :class="$style['form-item-remark']">
+        <el-input v-model="refueling.remark" />
+      </el-form-item>
+      <SubmitBar
+        @on-cancle="close()"
+        @on-submit="handleSubmit('refueling')"
+      />
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { listEquipment } from '@/api/material-manage/material'
+import { getByCode } from '@/api/material-manage/batch.js'
+import { add, getInfo, update } from '@/api/material-manage/refueling.js'
+import SubmitBar from '@/views/art/components/submit-bar'
+import HeaderTitleBar from '@/views/material-manage/components/header-title-bar'
+import i18n from '@/lang'
+
+export default {
+  name: 'Refueling',
+  components: {
+    SubmitBar,
+    HeaderTitleBar
+  },
+  props: {
+  },
+  data() {
+    return {
+      materialCode: '',
+      refueling: {
+        equipmentId: null, //	设备ID,示例值(1)
+        code: '', //	外部编码
+        id: null, // 	主键，更新时需要填写,示例值(1)
+        materialDateId: '', // 物料批次ID,示例值(1)
+        operator: '', // 操作员名称，多个
+        remark: '', // 	备注
+        source: 'PDA',
+        replaceTime: new Date()//	换料时间
+      },
+      sources: [
+        {
+          value: '手工',
+          label: '手工'
+        },
+        {
+          value: 'PDA',
+          label: 'PDA'
+        }
+      ],
+      equipmentList: [],
+      rules: {
+        replaceTime: [
+          { required: true, message: i18n.t('module.materialManager.refluelling.placeholdertime'), trigger: 'blur' }
+        ],
+        operator: [
+          { required: true, message: i18n.t('module.materialManager.refluelling.placeholderoperator'), trigger: 'blur' }
+        ],
+        code: [
+          { required: true, message: i18n.t('module.materialManager.refluelling.placeholderbatchnumber'), trigger: 'blur' },
+          { min: 1, message: '长度在3个字符以上', trigger: 'blur' }
+        ],
+        equipmentId: [
+          { required: true, message: i18n.t('module.materialManager.refluelling.placeholderEquipment'), trigger: 'blur' }
+        ]
+      },
+      id: null,
+      batch: {}
+    }
+  },
+  watch: {
+  },
+  created() {
+    this.init()
+  },
+  methods: {
+    init() {
+      this.id = this.$route.query.id
+      console.log(this.id)
+      console.log(!this.id)
+      listEquipment().then(res => {
+        console.log(res)
+        this.equipmentList = res.data
+        // if (!this.id && this.equipmentList && this.equipmentList.length > 0) {
+        //   this.materialCode = this.equipmentList[0].externalCode
+        //   this.refueling.equipmentId = this.equipmentList[0].id
+        // }
+      })
+      if (this.id) {
+        getInfo({ id: this.id }).then((res) => {
+          console.log(res)
+          this.refueling = res.data
+          this.batch.materialCode = this.refueling.materialCode
+          this.batch.materialName = this.refueling.materialName
+          this.refueling.code = this.refueling.materialDateCode
+          this.querySearchAsync()
+        })
+      }
+    },
+    querySearchAsync() {
+      const queryString = this.refueling.code
+      console.log(queryString)
+      if (!queryString) {
+        return
+      }
+      getByCode({ externalCode: queryString }).then(res => {
+        this.batch = res.data || {}
+      })
+    },
+    close() {
+      this.$router.push({ path: this.$route.query.redirect })
+    },
+    handleSubmit(formName) {
+      console.log('handleSubmit')
+      this.$refs[formName].validate(valid => {
+        if (!valid) {
+          return false
+        }
+        if (!this.batch.code) {
+          this.$message({
+            type: 'error',
+            message: '该批次号不存在，请核对后重新输入！'
+          })
+          return
+        }
+        if (this.id) {
+          update(this.refueling).then(res => {
+            this.close()
+          })
+        } else {
+          this.refueling.materialDateId = this.batch.id
+          add(this.refueling).then(res => {
+            this.close()
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" module>
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .form {
+    width: 60%;
+    margin-top: 30px;
+    display: flex;
+    flex-flow: wrap;
+    .form-item {
+      width: 50%;
+    }
+    .form-item-remark {
+      width: 100%;
+    }
+  }
+  .input {
+    display: flex;
+    margin: 8px 16px 8px 4px;
+    align-items: center;
+    .select {
+      width: 100%;
+    }
+  }
+  .select {
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/views/material-manage/refueling/index.vue b/src/views/material-manage/refueling/index.vue
new file mode 100644
index 0000000..152b2ef
--- /dev/null
+++ b/src/views/material-manage/refueling/index.vue
@@ -0,0 +1,172 @@
+<template>
+  <div :class="$style.container">
+    <SearchBar :placeholder="$t('module.materialManager.refluelling.placeholderSearch')" :input-width="200" @on-search="handleSearch">
+      <!-- <el-button type="success" icon="el-icon-plus" @click="handleAdd()">
+        {{ 'btn.add' | i18nFilter }}
+      </el-button> -->
+    </SearchBar>
+    <el-table
+      :data="tableDataList"
+      :class="$style.table"
+      :stripe="true"
+      :header-cell-style="{background:'#eef1f6',color:'#606266',height: '56px', textAlign: 'center'}"
+      :cell-style="{ textAlign: 'center' }"
+      size="medium"
+    >
+      <el-table-column prop="index" :label="$t('module.materialManager.refluelling.index')" width="80" fixed="left" />
+      <el-table-column prop="materialDateCode" :label="$t('module.materialManager.refluelling.materialDateCode')" width="180" fixed="left" />
+      <!-- <el-table-column prop="materialDateName" :label="$t('module.materialManager.refluelling.materialDateName')" width="160" /> -->
+      <el-table-column prop="type" :label="$t('module.materialManager.refluelling.type')" width="120">
+        <template slot-scope="scope">
+          {{ scope.row.type >= 0 ? typeList[scope.row.type] : '' }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="replaceTime" :label="$t('module.materialManager.refluelling.replaceTime')" width="180">
+        <template slot-scope="scope">
+          {{ moment(scope.row.replaceTime).utcOffset(-8).format("YYYY-MM-DD HH:mm:ss") }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="materialCode" :label="$t('module.materialManager.refluelling.materialCode')" width="180" />
+      <el-table-column prop="materialName" :label="$t('module.materialManager.refluelling.materialName')" width="160" />
+      <el-table-column prop="source" :label="$t('module.materialManager.refluelling.source')" width="110" />
+      <el-table-column prop="equipmentName" :label="$t('module.materialManager.refluelling.equipmentName')" width="180" />
+      <el-table-column prop="creatorName" :label="$t('module.materialManager.refluelling.operator')" width="180" />
+      <el-table-column prop="remark" :label="$t('module.materialManager.refluelling.remark')" />
+      <!-- <el-table-column :label="$t('module.materialManager.refluelling.operation')" width="280" fixed="right">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="info"
+            icon="el-icon-edit"
+            @click="handleEdit(scope.row.id)"
+          >
+            {{ 'btn.edit' | i18nFilter }}
+          </el-button>
+          <el-button
+            type="danger"
+            size="mini"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row.id)"
+          >
+            {{ 'btn.delete' | i18nFilter }}
+          </el-button>
+        </template>
+      </el-table-column> -->
+    </el-table>
+    <el-pagination
+      background
+      :hide-on-single-page="false"
+      :class="$style.table"
+      :current-page="page.current"
+      :page-sizes="[10, 20, 30, 40]"
+      :page-size="page.size"
+      layout="total, sizes, prev, pager, next"
+      :total="page.total"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+  </div>
+</template>
+<script>
+import moment from 'moment'
+import { list, del } from '@/api/material-manage/refueling.js'
+import SearchBar from '@/views/art/components/search-bar'
+import i18n from '@/lang'
+
+const typeList = {
+  0: i18n.t('module.materialManager.refluelling.unloading'),
+  1: i18n.t('module.materialManager.refluelling.loading')
+}
+
+export default {
+  components: { SearchBar },
+  props: {},
+  data() {
+    return {
+      moment,
+      tableDataList: [],
+      page: {
+        total: 40,
+        current: 1,
+        size: 10
+      },
+      param: {},
+      typeList
+    }
+  },
+  created() {
+    this.handleSearch()
+  },
+  methods: {
+    handleSearch(param) {
+      this.param = param
+      console.log(param)
+      list({ ...param, ...this.page }).then(res => {
+        console.log(res)
+        this.page.total = res.data.total
+        if (!res.data.records) {
+          this.tableDataList = []
+          return
+        }
+        this.tableDataList = res.data.records.map((m, index) => ({
+          ...m,
+          index: this.page.size * (this.page.current - 1) + index + 1
+        }))
+      })
+    },
+    handleAdd() {
+      this.$router.push({
+        path: 'refueling/add',
+        query: {
+          redirect: '/material-manage/refueling',
+          title: '换料新增'
+        }
+      })
+    },
+    handleEdit(id) {
+      this.$router.push({
+        path: 'refueling/add',
+        query: {
+          redirect: '/material-manage/refueling',
+          title: '换料编辑',
+          id
+        }
+      })
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`)
+      this.page.size = val
+      this.handleSearch(this.param)
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`)
+      this.page.current = val
+      this.handleSearch(this.param)
+    },
+    handleDelete(id) {
+      this.$confirm(i18n.t('deleteMsgBox.content'), i18n.t('deleteMsgBox.hint'), {
+        confirmButtonText: i18n.t('btn.confirm'),
+        cancelButtonText: i18n.t('btn.cancel'),
+        type: 'warning'
+      }).then(async() => {
+        del({ id }).then(res => {
+          this.page.current = 1
+          this.handleSearch(this.param)
+          this.$message({
+            type: 'info',
+            message: i18n.t('deleteMsgBox.doneMsg')
+          })
+        })
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" module>
+.container {
+  .table {
+    margin: 16px;
+    width: 98.5%;
+  }
+}
+</style>
diff --git a/src/views/material-manage/report/components/index.bak.vue b/src/views/material-manage/report/components/index.bak.vue
new file mode 100644
index 0000000..d28cd44
--- /dev/null
+++ b/src/views/material-manage/report/components/index.bak.vue
@@ -0,0 +1,96 @@
+<!--
+ * @Date: 2020-12-14 09:07:03
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-06-22 14:55:19
+ * @FilePath: \basic-admin\src\components\BaseTable\index.vue
+ * @Description:
+-->
+<template>
+  <div>
+    <el-table
+      v-loading="isLoading"
+      :data="renderData"
+      :stripe="true"
+      :header-cell-style="{background:'#eef1f6',color:'#606266',height: '56px'}"
+      border
+      fit
+      highlight-current-row
+      style="width: 100%"
+    >
+      <el-table-column v-if="page && limit" prop="_pageIndex" :label="'tableHeader.index' | i18nFilter" width="70" align="center" />
+      <el-table-column
+        v-for="item in tableConfig"
+        :key="item.prop"
+        v-bind="item"
+      >
+        <template slot-scope="scope">
+
+          <component :is="item.subcomponent" v-if="item.subcomponent" :inject-data="{...scope.row, ...item}" @emitData="emitData" />
+          <span v-else>{{ scope.row[item.prop] | commonFilter(item.filter) }}</span>
+
+        </template>
+      </el-table-column>
+      <slot name="content" />
+      <slot name="handleBtn" />
+    </el-table>
+  </div>
+</template>
+<script>
+import { isObject, isString } from 'lodash'
+export default {
+  name: 'BaseTable',
+  filters: {
+    commonFilter: (source, filterType = a => a) => {
+      return filterType(source)
+    }
+  },
+  props: {
+    tableData: {
+      type: Array,
+      required: true,
+      validator: val => val.filter(item => !isObject(item)).length === 0
+    },
+    tableConfig: {
+      type: Array,
+      required: true,
+      validator: val => val.filter(item => !isString(item.prop) || !isString(item.label)).length === 0
+    },
+    isLoading: {
+      type: Boolean,
+      required: false
+    },
+    page: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+    limit: {
+      type: Number,
+      required: false,
+      default: 0
+    }
+  },
+  data() {
+    return {
+
+    }
+  },
+  computed: {
+    renderData() {
+      return this.tableData.map((item, index) => {
+        return {
+          ...item,
+          _pageIndex: (this.page - 1) * this.limit + index + 1
+        }
+      })
+    }
+  },
+  methods: {
+    emitData(val) {
+      this.$emit('emitFun', val)
+    }
+  }
+}
+</script>
+<style>
+</style>
diff --git a/src/views/material-manage/report/components/search-bar.vue b/src/views/material-manage/report/components/search-bar.vue
new file mode 100644
index 0000000..4c70cff
--- /dev/null
+++ b/src/views/material-manage/report/components/search-bar.vue
@@ -0,0 +1,76 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-04-26 12:55:21
+ * @LastEditTime: 2021-05-25 16:41:39
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \mt-bus-fe\src\views\material-manage\report\components\search-bar.vue
+-->
+<template>
+  <div class="container">
+    <span class="label-name">{{ $t('module.materialManager.report.Keyword') }}</span>
+    <el-input
+      v-model="key"
+      :placeholder="$t('module.materialManager.report.placeholderkeywords')"
+      :clearable="true"
+      :style="{
+        width: inputWidth + 'px',
+        maxWidth: '100%',
+        marginRight: '16px'
+      }"
+    />
+    <el-button type="primary" icon="el-icon-search" @click="handleSearch()">
+      {{ "btn.search" | i18nFilter }}
+    </el-button>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    showTime: {
+      type: Boolean,
+      default: false
+    },
+    lableName: {
+      type: String,
+      default: '关键字'
+    },
+    placeholder: {
+      type: String,
+      default: '请输入'
+    },
+    inputWidth: {
+      type: Number,
+      default: 180
+    }
+  },
+  data() {
+    return {
+      key: '',
+      dts: ['', '']
+    }
+  },
+  methods: {
+    handleSearch() {
+      const param = {
+        key: this.key
+      }
+      this.$emit('on-search', param)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 50px;
+  padding: 4px 40px;
+  background-color: #eee;
+  .label-name {
+    margin-right: 8px;
+    font-size: 14px;
+  }
+}
+</style>
diff --git a/src/views/material-manage/report/components/tree.vue b/src/views/material-manage/report/components/tree.vue
new file mode 100644
index 0000000..27ca31f
--- /dev/null
+++ b/src/views/material-manage/report/components/tree.vue
@@ -0,0 +1,87 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-04-26 11:27:45
+ * @LastEditTime: 2021-04-27 15:13:57
+ * @LastEditors: gtz
+ * @Description: In User Settings Edit
+ * @FilePath: \mt-bus-fe\src\views\material-manage\report\components\tree.vue
+-->
+<!--
+ * @Author: gtz
+ * @Date: 2021-04-25 09:07:28
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-04-26 11:05:18
+ * @Description: file content
+-->
+
+<template>
+  <div class="app-tree">
+    <el-input v-model="filterText" :placeholder="'placeholder.treeSearch' | i18nFilter" />
+    <el-tree
+      ref="tree"
+      :data="treeList"
+      :show-checkbox="showCheck"
+      :filter-node-method="filterNode"
+      @node-click="handleNodeClick"
+      @check-change="handleCheckChange"
+    />
+  </div>
+</template>
+
+<script>
+import { getTreeList } from '@/api/material-manage/report.js'
+export default {
+  props: {
+    showCheck: {
+      type: Boolean,
+      default: () => false
+    },
+    treeType: {
+      type: String,
+      default: () => ''
+    }
+  },
+  data() {
+    return {
+      filterText: null,
+      treeList: []
+    }
+  },
+  watch: {
+    filterText(val) {
+      this.$refs.tree.filter(val)
+    }
+  },
+  created() {
+    this.getTree()
+  },
+  methods: {
+    filterNode(value, data) {
+      if (!value) return true
+      return data.label.indexOf(value) !== -1
+    },
+    async getTree() {
+      const result = await getTreeList()
+      if (result.code === 0) {
+        this.treeList = [result.data]
+        console.log(this.treeList)
+      }
+    },
+    handleNodeClick(data, node, components) {
+      this.$emit('handleNodeClick', data, node, components)
+    },
+    handleCheckChange(data, checked, indeterminate) {
+      this.$emit('handleCheckChange', data, checked, indeterminate)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-tree {
+  border: 2px solid rgb(228, 228, 228);
+  padding: 10px;
+  border-radius: 5px;
+  min-height: 500px;
+}
+</style>
diff --git a/src/views/material-manage/report/index.vue b/src/views/material-manage/report/index.vue
new file mode 100644
index 0000000..fb8eb45
--- /dev/null
+++ b/src/views/material-manage/report/index.vue
@@ -0,0 +1,122 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-04-26 09:15:28
+ * @LastEditTime: 2021-05-25 16:37:33
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \mt-bus-fe\src\views\material-manage\report\index.vue
+-->
+<template>
+  <el-container style="margin:30px">
+    <el-row style="width: 100%">
+      <el-col :span="4">
+        <side-tree @handleNodeClick="handleNodeClick" />
+      </el-col>
+      <el-col :span="20">
+        <el-main v-if="showDialog" style="border:2px solid #E4E4E4;border-radius:10px;margin-left:10px">
+          <SearchBar :placeholder="'基板编码'" :input-width="200" @on-search="handleSearch" />
+
+          <base-table :table-config="tableProps" :table-data="list" :is-loading="listLoading" :page="listQuery.current" :limit="listQuery.size" />
+        </el-main>
+      </el-col>
+    </el-row>
+  </el-container>
+</template>
+<script>
+const tableProps = [{
+  prop: 'name',
+  label: i18n.t('module.materialManager.report.eqName'),
+  align: 'center'
+},
+{
+  prop: 'code',
+  label: i18n.t('module.materialManager.report.code'),
+  align: 'center'
+}]
+import sideTree from '@/components/Tree'
+import moment from 'moment'
+import BaseTable from './components/index.bak'
+import SearchBar from './components/search-bar'
+import i18n from '@/lang'
+// import i18n from '@/lang'
+import { getTreeList, getData } from '@/api/material-manage/report.js'
+export default {
+  components: { sideTree, SearchBar, BaseTable },
+  props: {},
+  data() {
+    return {
+      moment,
+      tableDataList: [],
+      tableData: [],
+      tableProps,
+      treeList: [],
+      dataForm: {
+        id: 0,
+        current: 1,
+        size: 10,
+        level: 0,
+        key: ''
+      },
+      param: {},
+      list: [],
+      total: 0,
+      listLoading: false,
+      showDialog: false,
+      curEditId: null,
+      showEditDialog: false,
+      listQuery: {
+        current: 1,
+        size: 10,
+        name: ''
+      }
+    }
+  },
+  created() {
+    this.handleSearch()
+  },
+  methods: {
+    async getTreeList() {
+      // edit here
+      this.treeList.splice(0, this.treeList.length)
+      const res = await getTreeList()
+      if (res.code === 0) {
+        this.treeList = res.data.records
+        console.log(this.treeList)
+      }
+    },
+    handleNodeClick(data) {
+      this.dataForm.id = data.id
+      this.showDialog = true
+      this.getList()
+    },
+    async getList() {
+      const result = await getData(this.dataForm)
+      if (result.code === 0) {
+        this.list = result.data
+      }
+    },
+    async handleSearch(param) {
+      if (param !== '') {
+        this.dataForm.key = param.key
+      }
+      const result = await getData(this.dataForm)
+      if (result.code === 0) {
+        this.list = result.data
+        this.dataForm.key = ''
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" module>
+.container {
+  .table {
+    margin: 16px;
+    width: 98.5%;
+  }
+}
+.one{
+  color: black;
+}
+</style>
+
diff --git a/src/views/nested/menu1/index.vue b/src/views/nested/menu1/index.vue
deleted file mode 100644
index 30cb670..0000000
--- a/src/views/nested/menu1/index.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <div style="padding:30px;">
-    <el-alert :closable="false" title="menu 1">
-      <router-view />
-    </el-alert>
-  </div>
-</template>
diff --git a/src/views/nested/menu1/menu1-1/index.vue b/src/views/nested/menu1/menu1-1/index.vue
deleted file mode 100644
index 27e173a..0000000
--- a/src/views/nested/menu1/menu1-1/index.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <div style="padding:30px;">
-    <el-alert :closable="false" title="menu 1-1" type="success">
-      <router-view />
-    </el-alert>
-  </div>
-</template>
diff --git a/src/views/nested/menu1/menu1-2/index.vue b/src/views/nested/menu1/menu1-2/index.vue
deleted file mode 100644
index 0c86276..0000000
--- a/src/views/nested/menu1/menu1-2/index.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <div style="padding:30px;">
-    <el-alert :closable="false" title="menu 1-2" type="success">
-      <router-view />
-    </el-alert>
-  </div>
-</template>
diff --git a/src/views/nested/menu1/menu1-2/menu1-2-1/index.vue b/src/views/nested/menu1/menu1-2/menu1-2-1/index.vue
deleted file mode 100644
index f87d88f..0000000
--- a/src/views/nested/menu1/menu1-2/menu1-2-1/index.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template functional>
-  <div style="padding:30px;">
-    <el-alert :closable="false" title="menu 1-2-1" type="warning" />
-  </div>
-</template>
diff --git a/src/views/nested/menu1/menu1-2/menu1-2-2/index.vue b/src/views/nested/menu1/menu1-2/menu1-2-2/index.vue
deleted file mode 100644
index d88789f..0000000
--- a/src/views/nested/menu1/menu1-2/menu1-2-2/index.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template functional>
-  <div style="padding:30px;">
-    <el-alert :closable="false" title="menu 1-2-2" type="warning" />
-  </div>
-</template>
diff --git a/src/views/nested/menu1/menu1-3/index.vue b/src/views/nested/menu1/menu1-3/index.vue
deleted file mode 100644
index f7cd073..0000000
--- a/src/views/nested/menu1/menu1-3/index.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template functional>
-  <div style="padding:30px;">
-    <el-alert :closable="false" title="menu 1-3" type="success" />
-  </div>
-</template>
diff --git a/src/views/nested/menu2/index.vue b/src/views/nested/menu2/index.vue
deleted file mode 100644
index 19dd48f..0000000
--- a/src/views/nested/menu2/index.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <div style="padding:30px;">
-    <el-alert :closable="false" title="menu 2" />
-  </div>
-</template>
diff --git a/src/views/orderManage/components/detailBtn.vue b/src/views/orderManage/components/detailBtn.vue
new file mode 100644
index 0000000..c250337
--- /dev/null
+++ b/src/views/orderManage/components/detailBtn.vue
@@ -0,0 +1,41 @@
+<!--
+ * @Date: 2021-01-07 20:09:37
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-20 15:17:31
+ * @FilePath:
+ * @Description:
+-->
+<template>
+  <div>
+    <span>
+      <el-button type="text" size="small" @click="emitClick">{{ 'routerTitle.order.workOrderManage.tagDetail' | i18nFilter }}</el-button>
+    </span>
+    <tag-detail v-if="tagDetailVisible" ref="tagDetail" :packaging-box-id="injectData.id" />
+  </div>
+</template>
+
+<script>
+import tagDetail from './tagDetail'
+export default {
+  components: { tagDetail },
+  props: {
+    injectData: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      tagDetailVisible: false
+    }
+  },
+  methods: {
+    emitClick() {
+      this.tagDetailVisible = true
+      this.$nextTick(() => {
+        this.$refs.tagDetail.init()
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/orderManage/components/echarts-Bar.vue b/src/views/orderManage/components/echarts-Bar.vue
new file mode 100644
index 0000000..231676a
--- /dev/null
+++ b/src/views/orderManage/components/echarts-Bar.vue
@@ -0,0 +1,108 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-03-03 16:39:34
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-23 10:30:57
+ * @Description:
+-->
+<template>
+  <div :id="id" :style="barStyle" />
+</template>
+
+<script>
+import echarts from 'echarts'
+
+export default {
+  props: {
+    id: {
+      type: String,
+      default: () => {
+        return 'barChart'
+      }
+    },
+    barStyle: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    title: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    legend: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    xAxis: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    yAxis: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    series: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    color: {
+      type: Array,
+      default: () => {
+        return ['#5470C6']
+      }
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    init() {
+      this.chart = echarts.init(document.getElementById(this.id))
+
+      this.chart.setOption({
+        color: this.color,
+        title: this.title,
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        legend: this.legend,
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: this.xAxis,
+        yAxis: this.yAxis,
+        series: this.series
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/orderManage/components/powerClassification-add.vue b/src/views/orderManage/components/powerClassification-add.vue
new file mode 100644
index 0000000..3782303
--- /dev/null
+++ b/src/views/orderManage/components/powerClassification-add.vue
@@ -0,0 +1,135 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-26 14:42:17
+ * @Description:
+-->
+<template>
+  <el-dialog
+    :title="!dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter"
+    :visible.sync="visible"
+  >
+    <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="110px" @keyup.enter.native="dataFormSubmit()">
+      <el-form-item :label="$t('module.orderManage.powerClassification.typeName')" prop="name">
+        <el-input v-model="dataForm.name" :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.powerClassification.typeName')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.orderManage.powerClassification.typeCode')" prop="code">
+        <el-input v-model="dataForm.code" :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.powerClassification.typeCode')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.orderManage.powerClassification.parentClass')" prop="parentId">
+        <el-cascader
+          ref="cascader"
+          v-model="dataForm.parentId"
+          :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.powerClassification.parentClass')])"
+          :props="{ checkStrictly: true,value: 'id',label: 'name' }"
+          :options="parentArr"
+          filterable
+          clearable
+          @change="setParent"
+        />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.visual.Remarks')" prop="remark">
+        <el-input v-model="dataForm.remark" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Remarks')])" clearable />
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { powerClassificationTree, powerClassificationDetail, powerClassificationUpdate, powerClassificationAdd, powerClassificationCode } from '@/api/orderManage/powerClassification'
+
+export default {
+  data() {
+    return {
+      visible: false,
+      dataForm: {
+        id: 0,
+        name: '',
+        code: '',
+        parentId: '',
+        parentName: '',
+        remark: ''
+      },
+      parentArr: [],
+      dataRule: {
+        name: [
+          {
+            required: true,
+            message: this.$i18nForm(['placeholder.input', this.$t('module.orderManage.powerClassification.typeName')]),
+            trigger: 'blur' }
+        ],
+        parentId: [
+          {
+            required: true,
+            message: this.$i18nForm(['placeholder.input', this.$t('module.orderManage.powerClassification.parentClass')]),
+            trigger: 'change' }
+        ]
+      }
+    }
+  },
+  methods: {
+    init(id) {
+      this.dataForm.id = id || ''
+      this.visible = true
+      this.parentArr.splice(0, this.parentArr.length)
+      powerClassificationTree().then(res => {
+        this.parentArr = res.data
+      })
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          powerClassificationDetail(this.dataForm.id).then(res => {
+            this.dataForm = res.data
+          })
+        } else {
+          powerClassificationCode().then(res => {
+            this.dataForm.code = res.data
+          })
+        }
+      })
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          const data = this.dataForm
+          data.parentId = data.parentId[data.parentId.length - 1]
+          if (this.dataForm.id) {
+            powerClassificationUpdate(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          } else {
+            powerClassificationAdd(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          }
+        }
+      })
+    },
+    setParent(val) {
+      this.dataForm.parentName = this.$refs['cascader'].getCheckedNodes()[0].pathLabels[this.$refs['cascader'].getCheckedNodes()[0].pathLabels.length - 1]
+    }
+  }
+}
+</script>
diff --git a/src/views/orderManage/components/substrateBatchAttr-add.vue b/src/views/orderManage/components/substrateBatchAttr-add.vue
new file mode 100644
index 0000000..da49716
--- /dev/null
+++ b/src/views/orderManage/components/substrateBatchAttr-add.vue
@@ -0,0 +1,131 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-30 18:39:46
+ * @Description:
+-->
+<template>
+  <el-drawer
+    :append-to-body="true"
+    :show-close="false"
+    :visible.sync="visible"
+    size="40%"
+  >
+    <div slot="title" style=" background-color:#02BCFF;font-size:1.5em;color:white;padding:5px 20px">
+      {{ !dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter }}
+    </div>
+    <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="100px" @keyup.enter.native="dataFormSubmit()">
+      <el-form-item :label="$t('module.basicData.visual.AttributeName')" prop="attrName">
+        <el-input v-model="dataForm.attrName" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.AttributeName')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.visual.AttributeValue')" prop="attrValue">
+        <el-input v-model="dataForm.attrValue" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.AttributeValue')])" clearable />
+      </el-form-item>
+    </el-form>
+    <div class="drawer-footer">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+      <el-button type="primary" :loading="btnLoading" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
+    </div>
+  </el-drawer>
+</template>
+
+<script>
+import { substrateBatchAttrDetail, substrateBatchAttrUpdate, substrateBatchAttrAdd } from '@/api/orderManage/substrateBatchAttr'
+
+export default {
+  props: {
+    subId: {
+      type: String,
+      default: () => {
+        return ''
+      }
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      btnLoading: false,
+      dataForm: {
+        id: 0,
+        attrName: '',
+        attrValue: ''
+      },
+      dataRule: {
+        attrName: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.visual.AttributeName')]), trigger: 'blur' }
+        ],
+        attrValue: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.visual.AttributeValue')]), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    init(id) {
+      this.dataForm.id = id || ''
+      this.btnLoading = false
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          substrateBatchAttrDetail(this.dataForm.id).then(res => {
+            this.dataForm.attrName = res.data.name
+            this.dataForm.attrValue = res.data.value
+          })
+        }
+      })
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.btnLoading = true
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          const data = {
+            'name': this.dataForm.attrName,
+            'value': this.dataForm.attrValue,
+            'subId': this.subId,
+            'id': this.dataForm.id
+          }
+          if (this.dataForm.id) {
+            substrateBatchAttrUpdate(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          } else {
+            substrateBatchAttrAdd(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.drawer-footer {
+  width: 100%;
+  margin-top: 50px;
+  border-top: 1px solid #e8e8e8;
+  padding: 10px 50px;
+  text-align: left;
+  background: #fff;
+}
+</style>
diff --git a/src/views/orderManage/components/substrateBatchAttr.vue b/src/views/orderManage/components/substrateBatchAttr.vue
new file mode 100644
index 0000000..fd5cef8
--- /dev/null
+++ b/src/views/orderManage/components/substrateBatchAttr.vue
@@ -0,0 +1,235 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-31 11:24:59
+ * @enName:
+-->
+<template>
+  <div style="margin:20px">
+    <div slot="title" style=" background-color:#02BCFF;font-size:1.5em;color:white;padding:5px 20px;margin:20px">{{ isdetail? 'btn.detail' : !dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter }}</div>
+    <div style="margin:0 15px">
+      <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="100px" @keyup.enter.native="dataFormSubmit()">
+        <el-form-item :label="$t('module.orderManage.substrateBatch.batchName')" prop="name">
+          <el-input v-model="dataForm.name" :disabled="isdetail" :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.substrateBatch.batchName')])" clearable />
+        </el-form-item>
+        <el-form-item :label="$t('module.orderManage.substrateBatch.batchCode')" prop="code">
+          <el-input v-model="dataForm.code" :disabled="isdetail" :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.substrateBatch.batchCode')])" clearable />
+        </el-form-item>
+        <el-form-item :label="$t('module.basicData.visual.Remarks')" prop="remark">
+          <el-input v-model="dataForm.remark" :disabled="isdetail" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Remarks')])" clearable />
+        </el-form-item>
+      </el-form>
+      <div style="margin:20px">
+        <el-button type="success" @click="goback()">{{ 'btn.back' | i18nFilter }}</el-button>
+        <el-button v-if="isdetail" type="primary" @click="goEdit()">{{ 'btn.edit' | i18nFilter }}</el-button>
+        <span v-if="!isdetail">
+          <el-button type="primary" @click="dataFormSubmit()">{{ 'btn.save' | i18nFilter }}</el-button>
+          <el-button v-if="listQuery.subId" type="primary" @click="addNew()">{{ 'btn.addattr' | i18nFilter }}</el-button>
+        </span>
+      </div>
+      <div style="height:380px;overflow:auto">
+        <base-table
+          :page="listQuery.current"
+          :limit="listQuery.size"
+          :table-config="tableProps"
+          :table-data="list"
+        >
+          <method-btn
+            v-if="!isdetail"
+            slot="handleBtn"
+            :method-list="tableBtn"
+            @clickBtn="handleClick"
+          />
+        </base-table>
+      </div>
+    </div>
+    <substrate-batch-attr-add v-if="addOrUpdateVisible" ref="addOrUpdate" :sub-id="listQuery.subId" @refreshDataList="getList" />
+  </div>
+</template>
+
+<script>import i18n from '@/lang'
+import { substrateBatchDetail, substrateBatchUpdate, substrateBatchAdd, substrateBatchCode } from '@/api/orderManage/substrateBatch'
+import { substrateBatchAttrList, substrateBatchAttrDelete } from '@/api/orderManage/substrateBatchAttr'
+import BaseTable from '@/components/BaseTable'
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import substrateBatchAttrAdd from './substrateBatchAttr-add'
+import { timeFormatter } from '@/filters'
+const tableBtn = [
+  {
+    type: 'edit',
+    btnName: 'btn.edit'
+  },
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  }
+]
+const tableProps = [
+  {
+    prop: 'createTime',
+    label: i18n.t('module.basicData.factory.createTime'),
+    filter: timeFormatter,
+    align: 'center'
+  },
+  {
+    prop: 'name',
+    label: i18n.t('module.basicData.visual.AttributeName'),
+    align: 'center'
+  },
+  {
+    prop: 'value',
+    label: i18n.t('module.basicData.visual.AttributeValue'),
+    align: 'center'
+  }
+]
+
+export default {
+  components: { BaseTable, MethodBtn, substrateBatchAttrAdd },
+  data() {
+    return {
+      addOrUpdateVisible: false,
+      tableBtn,
+      trueWidth: 200,
+      tableProps,
+      list: [],
+      dataForm: {
+        name: '',
+        code: '',
+        enName: '',
+        abbr: '',
+        category: '',
+        description: '',
+        remark: ''
+      },
+      dataRule: {
+        name: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.material.MaterialName')]), trigger: 'blur' }
+        ],
+        code: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.material.MaterialCoding')]), trigger: 'blur' }
+        ]
+      },
+      listQuery: {
+        current: 1,
+        size: 990,
+        subId: ''
+      },
+      isdetail: false
+    }
+  },
+  created() {
+    this.listQuery.subId = this.$route.query.id
+    this.init()
+  },
+  methods: {
+    init() {
+      this.isdetail = false
+      this.isdetail = Boolean(this.$route.query.isdetail)
+      this.list.splice(0, this.list.length)
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.listQuery.subId) {
+          substrateBatchDetail(this.listQuery.subId).then(res => {
+            this.dataForm = res.data
+          })
+          substrateBatchAttrList(this.listQuery).then(response => {
+            if (response.data.records) {
+              this.list = response.data.records
+            } else {
+              this.list.splice(0, this.list.length)
+            }
+          })
+        } else {
+          substrateBatchCode().then(res => {
+            this.dataForm.code = res.data
+          })
+        }
+      })
+    },
+    getList() {
+      substrateBatchAttrList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+      })
+    },
+    handleClick(raw) {
+      if (raw.type === 'delete') {
+        this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`, this.$t('module.basicData.visual.Tips'), {
+          confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+          cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+          type: 'warning'
+        }).then(() => {
+          substrateBatchAttrDelete(raw.data.id).then(response => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+              }
+            })
+          })
+        }).catch(() => {})
+      } else {
+        this.addNew(raw.data.id)
+      }
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          this.dataForm.id = this.listQuery.subId
+          const data = this.dataForm
+          if (this.listQuery.subId) {
+            substrateBatchUpdate(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500
+              })
+            })
+          } else {
+            substrateBatchAdd(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500
+              })
+              this.listQuery.subId = res.data.id
+            })
+          }
+        }
+      })
+    },
+    // 新增 / 修改
+    addNew(id) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id)
+      })
+    },
+    goEdit() {
+      this.isdetail = false
+    },
+    goback() {
+      this.$router.go(-1)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.drawer-footer {
+  width: 100%;
+  margin-top: 50px;
+  border-top: 1px solid #e8e8e8;
+  border-bottom: 1px solid #e8e8e8;
+  padding: 10px 50px;
+  text-align: left;
+  background: #fff;
+}
+</style>
diff --git a/src/views/orderManage/components/tagDetail.vue b/src/views/orderManage/components/tagDetail.vue
new file mode 100644
index 0000000..a3f2476
--- /dev/null
+++ b/src/views/orderManage/components/tagDetail.vue
@@ -0,0 +1,197 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-07-21 09:33:06
+ * @Description:
+-->
+<template>
+  <el-drawer
+    :append-to-body="true"
+    :show-close="false"
+    :visible.sync="visible"
+    size="55%"
+  >
+    <div
+      slot="title"
+      style=" background-color:#02BCFF;font-size:1.5em;color:white;padding:5px 20px"
+    >
+      {{ "routerTitle.order.workOrderManage.tagDetail" | i18nFilter }}
+    </div>
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <span><b>{{ "BOX_ID：" + dataForm.id }}</b></span>
+        <el-button
+          type="primary"
+          style="float:right"
+          size="small"
+          @click="btnClickPrint"
+        >{{ "btn.print" | i18nFilter }}</el-button>
+      </div>
+      <div class="text item">
+        <el-row :gutter="20">
+          <el-col
+            :span="6"
+          ><div>{{ "Power：" + dataForm.power }}</div></el-col>
+          <el-col
+            :span="6"
+          ><div>{{ "SAP Material：" + dataForm.sapMaterial }}</div></el-col>
+        </el-row>
+      </div>
+    </el-card>
+    <div id="tablePrint">
+      <base-table
+        :page="listQuery.current"
+        :limit="listQuery.size"
+        :table-config="tableProps"
+        :table-data="list"
+        :is-loading="listLoading"
+      />
+    </div>
+  </el-drawer>
+</template>
+
+<script>
+import i18n from '@/lang'
+import BaseTable from '@/components/BaseTable'
+import {
+  packagingDetail,
+  packagingBoxList
+} from '@/api/orderManage/workOrder/workOrder'
+// import { timeFormatter } from '@/filters'
+import { getLodop } from '@/assets/libs/LodopFuncs.js'
+import { getInfo } from '@/api/packing-manage/packing-label.js'
+const tableProps = [
+  {
+    prop: 'woSubstrateId',
+    label: i18n.t('module.orderManage.packingTags.moduleId'),
+    align: 'center'
+  },
+  // {
+  //   prop: 'finishProduceTime',
+  //   label: i18n.t('module.orderManage.packingTags.UnloadingTime'),
+  //   align: 'center'
+  // },
+  // {
+  //   prop: 'name',
+  //   label: i18n.t('module.orderManage.packingTags.UnloadingEquipment'),
+  //   align: 'center',
+  //   filter: timeFormatter
+  // },
+  {
+    prop: 'oneCode',
+    label: i18n.t('module.orderManage.packingTags.oneDimensionalCode'),
+    align: 'center'
+  }
+]
+export default {
+  components: { BaseTable },
+  props: {
+    packagingBoxId: {
+      type: String,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: false,
+      dataForm: {},
+      listQuery: {
+        current: 1,
+        size: 500
+      }
+    }
+  },
+  methods: {
+    init() {
+      this.visible = true
+      this.listLoading = true
+      packagingDetail(this.packagingBoxId).then(res => {
+        this.dataForm = res.data
+      })
+      this.getList()
+    },
+    getList() {
+      this.listQuery.packagingBoxId = this.packagingBoxId
+      this.listLoading = true
+      packagingBoxList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.listLoading = false
+      })
+    },
+    // btnClickPrint() {
+    //   const LODOP = getLodop()
+    //   const strHTML = document.getElementById('tablePrint').innerHTML
+    //   LODOP.ADD_PRINT_HTM(30, 5, '100%', '80%', strHTML) // 装载模板
+    //   LODOP.PREVIEW()
+    // }
+    btnClickPrint() {
+      getInfo({ id: '1387070313172353025' }).then(res => {
+        this.printPreview('预览', res.data.content)
+      })
+    },
+    printPreview(name = '预览', modelCode) {
+      console.log(modelCode)
+      const LODOP = getLodop()
+      LODOP.PRINT_INIT(name)
+      const aaa = LODOP.ADD_PRINT_DATA('ProgramData', modelCode)
+      console.log(aaa)
+      const obj = {
+        time: this.dataForm.packagingTime,
+        orderCode: this.orderCode,
+        power: this.dataForm.power,
+        sapMaterial: this.dataForm.sapMaterial,
+        BarCode: this.dataForm.boxNo
+      }
+      this.list.forEach((item, index) => {
+        const str = 'modul' + (index + 1)
+        obj[str] = item.woSubstrateId
+      })
+      Object.keys(obj).forEach(key => {
+        LODOP.SET_PRINT_STYLEA(key, 'CONTENT', obj[key])
+      })
+      LODOP.NewPageA()
+      LODOP.PREVIEW()
+    },
+    print(name = '打印') {
+      console.log(name, this.currentIndex)
+      // 装载模板
+      const modelCode = this.printModels[this.currentIndex].printModelContent
+      console.log(modelCode)
+      this.objs.forEach(obj => {
+        const LODOP = getLodop() // 调用getLodop获取LODOP对象
+        LODOP.PRINT_INIT(name)
+        const aaa = LODOP.ADD_PRINT_DATA('ProgramData', modelCode)
+        console.log(aaa)
+        obj.partCode = obj.itemCode
+        obj.productTypeName = obj.itemTypeName
+        Object.keys(obj).forEach(key => {
+          LODOP.SET_PRINT_STYLEA(key, 'CONTENT', obj[key])
+        })
+        // LODOP.ADD_PRINT_HTM(10, 10, 350, 600, `--------${index}----------`);
+        LODOP.NewPageA()
+        LODOP.PRINT()
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.drawer-footer {
+  width: 100%;
+  margin-top: 50px;
+  border-top: 1px solid #e8e8e8;
+  padding: 10px 50px;
+  text-align: left;
+  background: #fff;
+}
+</style>
diff --git a/src/views/orderManage/consumption/consumption.vue b/src/views/orderManage/consumption/consumption.vue
new file mode 100644
index 0000000..901b5ad
--- /dev/null
+++ b/src/views/orderManage/consumption/consumption.vue
@@ -0,0 +1,125 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-07-21 16:13:20
+ * @LastEditTime: 2021-07-21 17:32:59
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \mt-bus-fe\src\views\orderManage\consumption\consumption.vue
+-->
+<template>
+  <div>
+    <div class="method-btn-area">
+      <el-input v-model="listQuery.key" :placeholder="$i18nForm(['placeholder.input', this.$t('module.orderManage.consumption.workOrderId')])" filterable clearable style="width: 200px;" />
+      <!-- <el-select v-model="listQuery.workerId" :placeholder="$t('module.equipmentManager.eqManagerManage.worker')" clearable style="width: 200px;">
+        <el-option
+          v-for="item in workerList"
+          :key="item.id"
+          :label="item.name"
+          :value="item.id"
+        />
+      </el-select> -->
+      <el-button type="primary" @click="getList">{{ 'btn.search' | i18nFilter }}</el-button>
+    </div>
+    <base-table
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    >
+      <method-btn
+        slot="handleBtn"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      @pagination="getList1()"
+    />
+  </div>
+</template>
+
+<script>
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import i18n from '@/lang'
+import { getPower } from '@/api/orderManage/order/order'
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+const tableBtn = [
+  {
+    type: 'detail',
+    btnName: 'btn.detail'
+  }
+]
+const tableProps = [
+  {
+    prop: 'workOrderId',
+    label: i18n.t('module.orderManage.consumption.workOrderId'),
+    align: 'center'
+  },
+  {
+    prop: 'power',
+    label: i18n.t('module.orderManage.consumption.power'),
+    align: 'center'
+  },
+  {
+    prop: 'workOrderStatus',
+    label: i18n.t('module.orderManage.consumption.workOrderStatus'),
+    align: 'center'
+  }
+]
+export default {
+  components: {
+    BaseTable,
+    Pagination,
+    MethodBtn
+  },
+  data() {
+    return {
+      tableProps,
+      tableBtn,
+      list: [],
+      listLoading: true,
+      total: 0,
+      listQuery: {
+        current: 1,
+        size: 10,
+        key: ''
+      }
+    }
+  },
+  mounted() {
+    this.getList()
+  },
+  methods: {
+    getList() {
+      getPower(this.listQuery).then(res => {
+        if (res.code === 0) {
+          this.list = res.data.records
+          this.listLoading = false
+        }
+      })
+      // this.list = result.data.records
+    },
+    handleClick(raw) {
+      const id = raw.data.workOrderId
+      this.$router.push({
+        path: '/powerList',
+        query: {
+          id
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+  .method-btn-area{
+    padding: 20px;
+  }
+</style>
diff --git a/src/views/orderManage/consumption/list.vue b/src/views/orderManage/consumption/list.vue
new file mode 100644
index 0000000..e6617ea
--- /dev/null
+++ b/src/views/orderManage/consumption/list.vue
@@ -0,0 +1,100 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-07-21 17:08:01
+ * @LastEditTime: 2021-07-21 17:33:37
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \mt-bus-fe\src\views\orderManage\consumption\list.vue
+-->
+<template>
+  <div>
+    <el-row style="padding: 20px">
+      <el-button type="primary" icon="el-icon-arrow-left" @click="goBack">{{ 'btn.back' | i18nFilter }}</el-button>
+    </el-row>
+    <base-table
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    />
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      @pagination="getList1()"
+    />
+  </div>
+</template>
+
+<script>
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import i18n from '@/lang'
+import { getPower } from '@/api/orderManage/order/order'
+const tableBtn = [
+  {
+    type: 'detail',
+    btnName: 'btn.detail'
+  }
+]
+const tableProps = [
+  {
+    prop: 'equipmentName',
+    label: i18n.t('module.orderManage.consumption.equipmentName'),
+    align: 'center'
+  },
+  {
+    prop: 'power',
+    label: i18n.t('module.orderManage.consumption.power'),
+    align: 'center'
+  },
+  {
+    prop: 'workOrderStatus',
+    label: i18n.t('module.orderManage.consumption.workOrderStatus'),
+    align: 'center'
+  }
+]
+export default {
+  components: {
+    BaseTable,
+    Pagination
+  },
+  data() {
+    return {
+      tableProps,
+      tableBtn,
+      list: [],
+      listLoading: true,
+      total: 0,
+      listQuery: {
+        current: 1,
+        size: 10,
+        workOrderId: this.$route.query.id
+      }
+    }
+  },
+  mounted() {
+    this.getList()
+  },
+  methods: {
+    getList() {
+      console.log(this.listQuery.workOrderId)
+      getPower(this.listQuery).then(res => {
+        if (res.code === 0) {
+          this.list = res.data.records
+          this.listLoading = false
+        }
+      })
+    },
+    goBack() {
+      this.$router.go(-1)
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>
diff --git a/src/views/orderManage/erpToMesData.vue b/src/views/orderManage/erpToMesData.vue
new file mode 100644
index 0000000..cd1ab61
--- /dev/null
+++ b/src/views/orderManage/erpToMesData.vue
@@ -0,0 +1,237 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-06-24 15:21:19
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-21 16:45:26
+ * @Description:
+-->
+<template>
+  <div style="padding:10px">
+    <span>{{ $t('module.orderManage.erpToMes.erpToMesMaterial') }}</span>
+    <base-table
+      :page="listQuery1.current"
+      :limit="listQuery1.size"
+      :table-config="tableProps1"
+      :table-data="list1"
+      :is-loading="listLoading1"
+    />
+    <pagination
+      v-show="total1 > 0"
+      :total="total1"
+      :page.sync="listQuery1.current"
+      :limit.sync="listQuery1.size"
+      @pagination="getList1()"
+    />
+    <hr>
+    <span>{{ $t('module.orderManage.erpToMes.erpToMesMaterialBom') }}</span>
+    <base-table
+      :page="listQuery2.current"
+      :limit="listQuery2.size"
+      :table-config="tableProps2"
+      :table-data="list2"
+      :is-loading="listLoading2"
+    />
+    <pagination
+      v-show="total2 > 0"
+      :total="total2"
+      :page.sync="listQuery2.current"
+      :limit.sync="listQuery2.size"
+      @pagination="getLis2()"
+    />
+    <hr>
+    <span>{{ $t('module.orderManage.erpToMes.erpToMesOrder') }}</span>
+    <base-table
+      :page="listQuery3.current"
+      :limit="listQuery3.size"
+      :table-config="tableProps3"
+      :table-data="list3"
+      :is-loading="listLoading3"
+    />
+    <pagination
+      v-show="total3 > 0"
+      :total="total3"
+      :page.sync="listQuery3.current"
+      :limit.sync="listQuery3.size"
+      @pagination="getList3()"
+    />
+  </div>
+</template>
+
+<script>
+import { erpToMesMaterialList, erpToMesMaterialBomList, erpToMesOrderList } from '@/api/orderManage/erpToMes'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import i18n from '@/lang'
+
+const tableProps1 = [
+  {
+    prop: 'batchNumber',
+    label: i18n.t('module.orderManage.erpToMes.batchNumber'),
+    align: 'center'
+  },
+  {
+    prop: 'materialsCode',
+    label: i18n.t('module.orderManage.erpToMes.materialsCode'),
+    align: 'center'
+  },
+  {
+    prop: 'materialsName',
+    label: i18n.t('module.orderManage.erpToMes.materialsName'),
+    align: 'center'
+  },
+  {
+    prop: 'quantity',
+    label: i18n.t('module.orderManage.erpToMes.quantity'),
+    align: 'center'
+  },
+  {
+    prop: 'unit',
+    label: i18n.t('module.orderManage.erpToMes.unit'),
+    align: 'center'
+  }
+]
+const tableProps2 = [
+  {
+    prop: 'bomContent',
+    label: i18n.t('module.orderManage.erpToMes.bomContent'),
+    align: 'center'
+  },
+  {
+    prop: 'craftCode',
+    label: i18n.t('module.orderManage.erpToMes.craftCode'),
+    align: 'center'
+  },
+  {
+    prop: 'craftName',
+    label: i18n.t('module.orderManage.erpToMes.craftName'),
+    align: 'center'
+  },
+  {
+    prop: 'materialsBomCode',
+    label: i18n.t('module.orderManage.erpToMes.materialsBomCode'),
+    align: 'center'
+  },
+  {
+    prop: 'materialsBomName',
+    label: i18n.t('module.orderManage.erpToMes.materialsBomName'),
+    align: 'center'
+  },
+  {
+    prop: 'substrateBatch',
+    label: i18n.t('module.orderManage.erpToMes.substrateBatch'),
+    align: 'center'
+  }
+]
+const tableProps3 = [
+  {
+    prop: 'customerCode',
+    label: i18n.t('module.orderManage.erpToMes.customerCode'),
+    align: 'center'
+  },
+  {
+    prop: 'customerName',
+    label: i18n.t('module.orderManage.erpToMes.customerName'),
+    align: 'center'
+  },
+  {
+    prop: 'orderCode',
+    label: i18n.t('module.orderManage.erpToMes.orderCode'),
+    align: 'center'
+  },
+  {
+    prop: 'orderName',
+    label: i18n.t('module.orderManage.erpToMes.orderName'),
+    align: 'center'
+  },
+  {
+    prop: 'quantity',
+    label: i18n.t('module.orderManage.erpToMes.quantity'),
+    align: 'center'
+  }
+]
+
+export default {
+  name: 'ErpToMesData',
+  components: { Pagination, BaseTable },
+  data() {
+    return {
+      tableProps1,
+      tableProps2,
+      tableProps3,
+      list1: [],
+      list2: [],
+      list3: [],
+      total1: 0,
+      total2: 0,
+      total3: 0,
+      listLoading1: true,
+      listLoading2: true,
+      listLoading3: true,
+      listQuery1: {
+        current: 1,
+        size: 10
+      },
+      listQuery2: {
+        current: 1,
+        size: 10
+      },
+      listQuery3: {
+        current: 1,
+        size: 10
+      }
+    }
+  },
+  created() {
+    this.getList1()
+    this.getList2()
+    this.getList3()
+  },
+  methods: {
+    getList1() {
+      this.listLoading1 = true
+      erpToMesMaterialList(this.listQuery1).then(response => {
+        if (response.data.records) {
+          this.list1 = response.data.records
+        } else {
+          this.list1.splice(0, this.list1.length)
+        }
+        this.total1 = response.data.total
+        this.listLoading1 = false
+      })
+    },
+    getList2() {
+      this.listLoading2 = true
+      erpToMesMaterialBomList(this.listQuery2).then(response => {
+        if (response.data.records) {
+          this.list2 = response.data.records
+        } else {
+          this.list2.splice(0, this.list2.length)
+        }
+        this.total2 = response.data.total
+        this.listLoading2 = false
+      })
+    },
+    getList3() {
+      this.listLoading3 = true
+      erpToMesOrderList(this.listQuery3).then(response => {
+        if (response.data.records) {
+          this.list3 = response.data.records
+        } else {
+          this.list3.splice(0, this.list3.length)
+        }
+        this.total3 = response.data.total
+        this.listLoading3 = false
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+span{
+  background-color: #ECF5FF;
+  font-size: 20px;
+  padding: 5px;
+  color: #409EFF;
+}
+</style>
diff --git a/src/views/orderManage/index.vue b/src/views/orderManage/index.vue
new file mode 100644
index 0000000..a5adc80
--- /dev/null
+++ b/src/views/orderManage/index.vue
@@ -0,0 +1,12 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-01-12 11:13:03
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-02-23 13:35:09
+ * @Description:
+-->
+<template>
+  <div id="orderManage">
+    <router-view />
+  </div>
+</template>
diff --git a/src/views/orderManage/infoTrack/equipmentEventTrack.vue b/src/views/orderManage/infoTrack/equipmentEventTrack.vue
new file mode 100644
index 0000000..978831b
--- /dev/null
+++ b/src/views/orderManage/infoTrack/equipmentEventTrack.vue
@@ -0,0 +1,197 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-18 18:35:28
+ * @Description:
+-->
+<template>
+  <div class="app-container">
+    <el-form
+      ref="formData"
+      :rules="rules"
+      :model="formData"
+      :inline="true"
+      size="medium"
+      label-width="80px"
+    >
+      <el-form-item :label="$t('module.orderManage.order.WorkOrderName')" prop="workOrderId">
+        <el-select v-model="formData.workOrderId" filterable :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.WorkOrderName')])" clearable>
+          <el-option
+            v-for="item in WorkOrderList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="$t('module.orderManage.order.EquipmentName')" prop="equipmentId">
+        <el-select v-model="formData.equipmentId" filterable :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.EquipmentName')])" clearable>
+          <el-option
+            v-for="item in equipmentList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="$t('module.orderManage.track.event')" prop="equipmentEventId">
+        <el-input v-model="formData.equipmentEventId" :placeholder="$i18nForm(['placeholder.input', this.$t('module.orderManage.track.event')])" style="width:200px" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.orderManage.track.parameterName')" prop="equipmentParameterId">
+        <el-input v-model="formData.equipmentParameterId" :placeholder="$i18nForm(['placeholder.input', this.$t('module.orderManage.track.parameterName')])" style="width:200px" clearable />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="getList()"> {{ 'btn.search' | i18nFilter }} </el-button>
+      </el-form-item>
+    </el-form>
+    <base-table
+      :page="formData.current"
+      :limit="formData.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    />
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="formData.current"
+      :limit.sync="formData.size"
+      @pagination="getList()"
+    />
+  </div>
+</template>
+
+<script>
+import { workOrderList } from '@/api/orderManage/workOrder/workOrder'
+import { equipmentInfoList } from '@/api/basicData/Equipment/equipmentInfo'
+import { equipmentEventTrackList } from '@/api/orderManage/infoTrack/infoTrack'
+import i18n from '@/lang'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import { timeFormatter } from '@/filters'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+
+const tableProps = [
+  {
+    prop: 'createTime',
+    label: i18n.t('module.orderManage.order.createTime'),
+    filter: timeFormatter
+  },
+  {
+    prop: 'name',
+    label: i18n.t('module.orderManage.order.EquipmentName'),
+    align: 'center'
+  },
+  {
+    prop: 'paramName',
+    label: i18n.t('module.orderManage.track.parameterName'),
+    align: 'center'
+  },
+  {
+    prop: 'paramValue',
+    label: i18n.t('module.orderManage.track.parameterValue'),
+    align: 'center'
+  },
+  {
+    prop: 'eventName',
+    label: i18n.t('module.orderManage.track.event'),
+    align: 'center'
+  }
+]
+
+export default {
+  name: 'ScrapInfo',
+  components: { Pagination, BaseTable },
+  data() {
+    return {
+      trueWidth: 200,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: false,
+      formData: {
+        workOrderId: '',
+        equipmentId: '',
+        equipmentEventId: '',
+        equipmentParameterId: '',
+        current: 1,
+        size: 10
+      },
+      equipmentList: [],
+      WorkOrderList: [],
+      rules: {
+        workOrderId: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('module.orderManage.order.WorkOrderName')]),
+          trigger: 'change'
+        }]
+      }
+    }
+  },
+  created() {
+    this.init()
+  },
+  methods: {
+    init() {
+      const listQuery = {
+        current: 1,
+        size: 500
+      }
+      this.equipmentList.splice(0, this.equipmentList.length)
+      equipmentInfoList(listQuery).then(response => {
+        if (response.data.records) {
+          this.equipmentList = response.data.records
+        }
+      })
+      this.WorkOrderList.splice(0, this.WorkOrderList.length)
+      workOrderList(listQuery).then(response => {
+        if (response.data.records) {
+          this.WorkOrderList = response.data.records
+        }
+      })
+    },
+    getList() {
+      this.$refs['formData'].validate((valid) => {
+        if (valid) {
+          this.listLoading = true
+          equipmentEventTrackList(this.formData).then(response => {
+            if (response.data.records) {
+              this.list = response.data.records
+            } else {
+              this.list.splice(0, this.list.length)
+            }
+            this.total = response.data.total
+            this.listLoading = false
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/orderManage/infoTrack/equipmentParametersTrack.vue b/src/views/orderManage/infoTrack/equipmentParametersTrack.vue
new file mode 100644
index 0000000..63b4e42
--- /dev/null
+++ b/src/views/orderManage/infoTrack/equipmentParametersTrack.vue
@@ -0,0 +1,210 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-26 14:23:00
+ * @Description:
+-->
+<template>
+  <div class="app-container">
+    <el-form
+      ref="formData"
+      :rules="rules"
+      :model="formData"
+      :inline="true"
+      size="medium"
+      label-width="150px"
+    >
+      <el-form-item :label="$t('module.orderManage.order.WorkOrderName')" prop="workOrderId">
+        <el-select v-model="formData.workOrderId" filterable :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.WorkOrderName')])" clearable>
+          <el-option
+            v-for="item in WorkOrderList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="$t('module.orderManage.order.EquipmentName')" prop="equipmentId">
+        <el-select v-model="formData.equipmentId" filterable :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.EquipmentName')])" clearable>
+          <el-option
+            v-for="item in equipmentList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="$t('module.orderManage.order.basePlate')" prop="substrateNo">
+        <el-input v-model="formData.substrateNo" :placeholder="$i18nForm(['placeholder.input', this.$t('module.orderManage.order.basePlate')])" style="width:200px" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.orderManage.track.parameterName')" prop="equipmentParameterId">
+        <el-input v-model="formData.equipmentParameterId" :placeholder="$i18nForm(['placeholder.input', this.$t('module.orderManage.track.parameterName')])" style="width:200px" clearable />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="getList()"> {{ 'btn.search' | i18nFilter }} </el-button>
+      </el-form-item>
+    </el-form>
+    <base-table
+      :page="formData.current"
+      :limit="formData.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    />
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="formData.current"
+      :limit.sync="formData.size"
+      @pagination="getList()"
+    />
+  </div>
+</template>
+
+<script>
+import { workOrderList } from '@/api/orderManage/workOrder/workOrder'
+import { equipmentInfoList } from '@/api/basicData/Equipment/equipmentInfo'
+import { equipmentParametersTrackList } from '@/api/orderManage/infoTrack/infoTrack'
+import i18n from '@/lang'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+// import { timeFormatter } from '@/filters'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+
+const tableProps = [
+  // {
+  //   prop: 'createTime',
+  //   label: i18n.t('module.orderManage.order.createTime'),
+  //   filter: timeFormatter
+  // },
+  // {
+  //   prop: 'workOrderNo',
+  //   label: i18n.t('module.orderManage.order.WorkOrderCode'),
+  //   align: 'center'
+  // },
+  // {
+  //   prop: 'code',
+  //   label: i18n.t('module.orderManage.order.processCode'),
+  //   align: 'center'
+  // },
+  {
+    prop: 'substrateNo',
+    label: i18n.t('module.orderManage.order.basePlateId'),
+    align: 'center'
+  },
+  {
+    prop: 'eventName',
+    label: i18n.t('module.orderManage.track.event'),
+    align: 'center'
+  },
+  {
+    prop: 'paramName',
+    label: i18n.t('module.orderManage.track.parameterName')
+  },
+  {
+    prop: 'paramValue',
+    label: i18n.t('module.orderManage.track.parameterValue')
+  },
+  {
+    prop: 'eventTime',
+    label: i18n.t('module.orderManage.track.occurTime'),
+    align: 'center'
+  }
+]
+
+export default {
+  name: 'ScrapInfo',
+  components: { Pagination, BaseTable },
+  data() {
+    return {
+      trueWidth: 200,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: false,
+      formData: {
+        substrateNo: '',
+        workOrderId: '',
+        equipmentId: '',
+        equipmentParameterId: '',
+        current: 1,
+        size: 10
+      },
+      WorkOrderList: [],
+      equipmentList: [],
+      rules: {
+        workOrderId: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('module.orderManage.order.WorkOrderName')]),
+          trigger: 'change'
+        }]
+      }
+    }
+  },
+  created() {
+    this.init()
+  },
+  methods: {
+    init() {
+      const listQuery = {
+        current: 1,
+        size: 500
+      }
+      this.equipmentList.splice(0, this.equipmentList.length)
+      equipmentInfoList(listQuery).then(response => {
+        if (response.data.records) {
+          this.equipmentList = response.data.records
+        }
+      })
+      this.WorkOrderList.splice(0, this.WorkOrderList.length)
+      workOrderList(listQuery).then(response => {
+        if (response.data.records) {
+          this.WorkOrderList = response.data.records
+        }
+      })
+    },
+    getList() {
+      this.$refs['formData'].validate((valid) => {
+        if (valid) {
+          this.listLoading = true
+          equipmentParametersTrackList(this.formData).then(response => {
+            if (response.data.records) {
+              this.list = response.data.records
+            } else {
+              this.list.splice(0, this.list.length)
+            }
+            this.total = response.data.total
+            this.listLoading = false
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/orderManage/infoTrack/processSubstrateDataTrack.vue b/src/views/orderManage/infoTrack/processSubstrateDataTrack.vue
new file mode 100644
index 0000000..f6a91f2
--- /dev/null
+++ b/src/views/orderManage/infoTrack/processSubstrateDataTrack.vue
@@ -0,0 +1,195 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-26 14:24:13
+ * @Description:
+-->
+<template>
+  <div class="app-container">
+    <el-form
+      ref="formData"
+      :rules="rules"
+      :model="formData"
+      :inline="true"
+      size="medium"
+      label-width="150px"
+    >
+      <el-form-item :label="$t('module.orderManage.order.WorkOrderName')" prop="workOrderId">
+        <el-select v-model="formData.workOrderId" filterable :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.WorkOrderName')])" clearable>
+          <el-option
+            v-for="item in WorkOrderList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="$t('module.orderManage.order.basePlateCode')" prop="substrateNo">
+        <el-input v-model="formData.substrateNo" :placeholder="$i18nForm(['placeholder.input', this.$t('module.orderManage.order.basePlateCode')])" style="width:200px" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.orderManage.order.loadingTime')" prop="time">
+        <el-date-picker
+          v-model="formData.timeSlot"
+          type="daterange"
+          format="yyyy-MM-dd"
+          value-format="yyyy-MM-dd"
+          :start-placeholder="$t('module.orderManage.order.StartTime')"
+          :end-placeholder="$t('module.orderManage.order.StartTime')"
+          :range-separator="$t('module.orderManage.order.To')"
+          clearable
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="getList()"> {{ 'btn.search' | i18nFilter }} </el-button>
+      </el-form-item>
+    </el-form>
+    <base-table
+      :page="formData.current"
+      :limit="formData.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    />
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="formData.current"
+      :limit.sync="formData.size"
+      @pagination="getList()"
+    />
+  </div>
+</template>
+
+<script>
+import { workOrderList } from '@/api/orderManage/workOrder/workOrder'
+import { processSubstrateDataTrackList } from '@/api/orderManage/infoTrack/infoTrack'
+import i18n from '@/lang'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import { timeFormatter } from '@/filters'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+
+const tableProps = [
+  {
+    prop: 'workOrderNo',
+    label: i18n.t('module.orderManage.order.WorkOrderCode'),
+    align: 'center'
+  },
+  // {
+  //   prop: 'processFlowCode',
+  //   label: i18n.t('module.orderManage.order.processCode'),
+  //   align: 'center'
+  // },
+  {
+    prop: 'substrateNo',
+    label: i18n.t('module.orderManage.order.basePlateId'),
+    align: 'center'
+  },
+  {
+    prop: 'startProduceTime',
+    label: i18n.t('module.orderManage.order.loadingTime'),
+    align: 'center',
+    filter: timeFormatter
+  },
+  {
+    prop: 'finishProduceTime',
+    label: i18n.t('module.orderManage.order.unLoadingTime'),
+    filter: timeFormatter
+  }
+]
+
+export default {
+  name: 'ScrapInfo',
+  components: { Pagination, BaseTable },
+  data() {
+    return {
+      trueWidth: 200,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: false,
+      formData: {
+        workOrderId: '',
+        substrateNo: '',
+        timeSlot: [],
+        current: 1,
+        size: 10
+      },
+      WorkOrderList: [],
+      rules: {
+        workOrderId: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('module.orderManage.order.WorkOrderName')]),
+          trigger: 'change'
+        }]
+      }
+    }
+  },
+  created() {
+    this.init()
+  },
+  methods: {
+    init() {
+      const listQuery = {
+        current: 1,
+        size: 500
+      }
+      this.WorkOrderList.splice(0, this.WorkOrderList.length)
+      workOrderList(listQuery).then(response => {
+        if (response.data.records) {
+          this.WorkOrderList = response.data.records
+        }
+      })
+    },
+    getList() {
+      this.$refs['formData'].validate((valid) => {
+        if (valid) {
+          if (this.formData.timeSlot) {
+            this.formData.startTime = this.formData.timeSlot[0]
+            this.formData.endTime = this.formData.timeSlot[1]
+          } else {
+            this.formData.startTime = ''
+            this.formData.endTime = ''
+          }
+          this.listLoading = true
+          processSubstrateDataTrackList(this.formData).then(response => {
+            if (response.data.records) {
+              this.list = response.data.records
+            } else {
+              this.list.splice(0, this.list.length)
+            }
+            this.total = response.data.total
+            this.listLoading = false
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/orderManage/infoTrack/substrateEquipment.vue b/src/views/orderManage/infoTrack/substrateEquipment.vue
new file mode 100644
index 0000000..eae4679
--- /dev/null
+++ b/src/views/orderManage/infoTrack/substrateEquipment.vue
@@ -0,0 +1,224 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-30 19:05:32
+ * @Description:
+-->
+<template>
+  <div class="app-container">
+    <el-form
+      ref="formData"
+      :rules="rules"
+      :model="formData"
+      :inline="true"
+      size="medium"
+      label-width="80px"
+    >
+      <el-form-item :label="$t('module.orderManage.order.WorkOrderName')" prop="workOrderId">
+        <el-select v-model="formData.workOrderId" filterable :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.WorkOrderName')])" clearable>
+          <el-option
+            v-for="item in WorkOrderList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="$t('module.orderManage.order.EquipmentName')" prop="equipmentId">
+        <el-select v-model="formData.equipmentId" filterable :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.EquipmentName')])" clearable>
+          <el-option
+            v-for="item in equipmentList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="$t('module.orderManage.order.basePlateCode')" prop="substrateNo">
+        <el-input v-model="formData.substrateNo" :placeholder="$i18nForm(['placeholder.input', this.$t('module.orderManage.order.basePlateCode')])" style="width:200px" clearable />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="getList()"> {{ 'btn.search' | i18nFilter }} </el-button>
+      </el-form-item>
+    </el-form>
+    <base-table
+      :page="formData.current"
+      :limit="formData.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    >
+      <method-btn
+        slot="handleBtn"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="formData.current"
+      :limit.sync="formData.size"
+      @pagination="getList()"
+    />
+    <substrateEquipmentDetail v-if="substrateVisible" ref="substrateDetail" />
+  </div>
+</template>
+
+<script>
+import { workOrderList } from '@/api/orderManage/workOrder/workOrder'
+import { equipmentInfoList } from '@/api/basicData/Equipment/equipmentInfo'
+import { substrateEquipmentList } from '@/api/orderManage/infoTrack/infoTrack'
+import substrateEquipmentDetail from './substrateEquipmentDetail'
+import i18n from '@/lang'
+import BaseTable from '@/components/BaseTable'
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import { timeFormatter } from '@/filters'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+const tableBtn = [
+  {
+    type: 'detail',
+    btnName: 'btn.detail'
+  }
+]
+
+const tableProps = [
+  // {
+  //   prop: 'createTime',
+  //   label: i18n.t('module.orderManage.order.createTime'),
+  //   filter: timeFormatter
+  // },
+  {
+    prop: 'name',
+    label: i18n.t('module.orderManage.order.EquipmentName'),
+    align: 'center'
+  },
+  {
+    prop: 'substrateNo',
+    label: i18n.t('module.orderManage.order.basePlateCode'),
+    align: 'center'
+  },
+  {
+    prop: 'createTime',
+    label: i18n.t('module.orderManage.order.StartTime'),
+    align: 'center',
+    filter: timeFormatter
+  },
+  {
+    prop: 'startProduceTime',
+    label: i18n.t('module.orderManage.track.ProcessTime'),
+    align: 'center',
+    filter: timeFormatter
+  },
+  {
+    prop: 'finishProduceTime',
+    label: i18n.t('module.orderManage.order.finishTime'),
+    align: 'center',
+    filter: timeFormatter
+  }
+]
+
+export default {
+  name: 'ScrapInfo',
+  components: { Pagination, BaseTable, MethodBtn, substrateEquipmentDetail },
+  data() {
+    return {
+      trueWidth: 200,
+      tableProps,
+      tableBtn,
+      list: [],
+      total: 0,
+      substrateVisible: false,
+      listLoading: false,
+      formData: {
+        substrateNo: '',
+        workOrderId: '',
+        equipmentId: '',
+        current: 1,
+        size: 10
+      },
+      equipmentList: [],
+      WorkOrderList: [],
+      rules: {
+        workOrderId: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('module.orderManage.order.WorkOrderName')]),
+          trigger: 'change'
+        }]
+      }
+    }
+  },
+  created() {
+    this.init()
+  },
+  methods: {
+    init() {
+      const listQuery = {
+        current: 1,
+        size: 500
+      }
+      this.equipmentList.splice(0, this.equipmentList.length)
+      equipmentInfoList(listQuery).then(response => {
+        if (response.data.records) {
+          this.equipmentList = response.data.records
+        }
+      })
+      this.WorkOrderList.splice(0, this.WorkOrderList.length)
+      workOrderList(listQuery).then(response => {
+        if (response.data.records) {
+          this.WorkOrderList = response.data.records
+        }
+      })
+    },
+    getList() {
+      this.$refs['formData'].validate((valid) => {
+        if (valid) {
+          this.listLoading = true
+          substrateEquipmentList(this.formData).then(response => {
+            if (response.data.records) {
+              this.list = response.data.records
+            } else {
+              this.list.splice(0, this.list.length)
+            }
+            this.total = response.data.total
+            this.listLoading = false
+          })
+        }
+      })
+    },
+    handleClick(raw) {
+      this.substrateVisible = true
+      this.$nextTick(() => {
+        this.$refs.substrateDetail.init(raw)
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/orderManage/infoTrack/substrateEquipmentDetail.vue b/src/views/orderManage/infoTrack/substrateEquipmentDetail.vue
new file mode 100644
index 0000000..30c1129
--- /dev/null
+++ b/src/views/orderManage/infoTrack/substrateEquipmentDetail.vue
@@ -0,0 +1,118 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-30 19:08:59
+ * @Description:
+-->
+<template>
+  <el-drawer
+    :append-to-body="true"
+    :show-close="false"
+    :visible.sync="visible"
+    size="55%"
+  >
+    <el-card class="box-card">
+      <div class="text item">
+        <el-row :gutter="20">
+          <el-col :span="6"><div>{{ $t('module.orderManage.order.basePlateCode')+'：'+dataForm.substrateNo }}</div></el-col>
+          <el-col :span="6"><div>{{ $t('module.orderManage.order.EquipmentName')+'：'+dataForm.name }}</div></el-col>
+        </el-row>
+      </div>
+    </el-card>
+    <base-table
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    />
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      @pagination="getList()"
+    />
+  </el-drawer>
+</template>
+
+<script>
+import i18n from '@/lang'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination'
+import { substrateEquipmentDetail } from '@/api/orderManage/infoTrack/infoTrack'
+import { timeFormatter } from '@/filters'
+
+const tableProps = [
+  {
+    prop: 'createTime',
+    label: i18n.t('module.orderManage.order.createTime'),
+    filter: timeFormatter
+  },
+  {
+    prop: 'eventName',
+    label: i18n.t('module.orderManage.track.event'),
+    align: 'center'
+  },
+  {
+    prop: 'paramName',
+    label: i18n.t('module.orderManage.track.parameterName'),
+    align: 'center'
+  },
+  {
+    prop: 'paramValue',
+    label: i18n.t('module.orderManage.track.parameterValue'),
+    align: 'center'
+  }
+]
+export default {
+  components: { BaseTable, Pagination },
+  data() {
+    return {
+      visible: false,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: false,
+      dataForm: {},
+      listQuery: {
+        current: 1,
+        size: 10
+      }
+    }
+  },
+  methods: {
+    init() {
+      this.visible = true
+      this.listLoading = true
+      this.getList()
+    },
+    getList(raw) {
+      this.dataForm = raw
+      this.listQuery.orderId = raw.id
+      this.listLoading = true
+      substrateEquipmentDetail(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.drawer-footer {
+  width: 100%;
+  margin-top: 50px;
+  border-top: 1px solid #e8e8e8;
+  padding: 10px 50px;
+  text-align: left;
+  background: #fff;
+}
+</style>
diff --git a/src/views/orderManage/infoTrack/substrateParametersTrack.vue b/src/views/orderManage/infoTrack/substrateParametersTrack.vue
new file mode 100644
index 0000000..6b9ef69
--- /dev/null
+++ b/src/views/orderManage/infoTrack/substrateParametersTrack.vue
@@ -0,0 +1,174 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-26 14:24:41
+ * @Description:
+-->
+<template>
+  <div class="app-container">
+    <el-form
+      ref="formData"
+      :rules="rules"
+      :model="formData"
+      :inline="true"
+      size="medium"
+      label-width="150px"
+    >
+      <el-form-item :label="$t('module.orderManage.order.WorkOrderName')" prop="workOrderId">
+        <el-select v-model="formData.workOrderId" filterable :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.WorkOrderName')])" clearable>
+          <el-option
+            v-for="item in WorkOrderList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="$t('module.orderManage.order.basePlateCode')" prop="substrateNo">
+        <el-input v-model="formData.substrateNo" :placeholder="$i18nForm(['placeholder.input', this.$t('module.orderManage.order.basePlateCode')])" style="width:200px" clearable />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="getList()"> {{ 'btn.search' | i18nFilter }} </el-button>
+      </el-form-item>
+    </el-form>
+    <base-table
+      :page="formData.current"
+      :limit="formData.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    />
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="formData.current"
+      :limit.sync="formData.size"
+      @pagination="getList()"
+    />
+  </div>
+</template>
+
+<script>
+import { workOrderList } from '@/api/orderManage/workOrder/workOrder'
+import { substrateParametersTrackList } from '@/api/orderManage/infoTrack/infoTrack'
+import i18n from '@/lang'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import { timeFormatter } from '@/filters'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+
+const tableProps = [
+  {
+    prop: 'createTime',
+    label: i18n.t('module.orderManage.order.createTime'),
+    filter: timeFormatter
+  },
+  {
+    prop: 'name',
+    label: i18n.t('module.orderManage.order.EquipmentName'),
+    align: 'center'
+  },
+  {
+    prop: 'paramName',
+    label: i18n.t('module.orderManage.track.parameterName'),
+    align: 'center'
+  },
+  {
+    prop: 'paramValue',
+    label: i18n.t('module.orderManage.track.parameterValue'),
+    align: 'center'
+  },
+  {
+    prop: 'eventName',
+    label: i18n.t('module.orderManage.track.event'),
+    align: 'center'
+  }
+]
+
+export default {
+  name: 'ScrapInfo',
+  components: { Pagination, BaseTable },
+  data() {
+    return {
+      trueWidth: 200,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: false,
+      formData: {
+        substrateNo: '',
+        workOrderId: '',
+        current: 1,
+        size: 10
+      },
+      WorkOrderList: [],
+      rules: {
+        workOrderId: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('module.orderManage.order.WorkOrderName')]),
+          trigger: 'change'
+        }]
+      }
+    }
+  },
+  created() {
+    this.init()
+  },
+  methods: {
+    init() {
+      const listQuery = {
+        current: 1,
+        size: 500
+      }
+      this.WorkOrderList.splice(0, this.WorkOrderList.length)
+      workOrderList(listQuery).then(response => {
+        if (response.data.records) {
+          this.WorkOrderList = response.data.records
+        }
+      })
+    },
+    getList() {
+      this.$refs['formData'].validate((valid) => {
+        if (valid) {
+          this.listLoading = true
+          substrateParametersTrackList(this.formData).then(response => {
+            if (response.data.records) {
+              this.list = response.data.records
+            } else {
+              this.list.splice(0, this.list.length)
+            }
+            this.total = response.data.total
+            this.listLoading = false
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/orderManage/mesToErp.vue b/src/views/orderManage/mesToErp.vue
new file mode 100644
index 0000000..f1451bb
--- /dev/null
+++ b/src/views/orderManage/mesToErp.vue
@@ -0,0 +1,345 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-07-19 15:18:30
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-26 10:54:06
+ * @Description:
+-->
+<template>
+  <el-row :gutter="10">
+    <el-form
+      ref="dataForm"
+      :model="dataForm"
+      :rules="rules"
+      size="medium"
+      label-width="130px"
+      style="margin:30px"
+      label-position="left"
+    >
+      <el-col :span="6">
+        <el-form-item label="grade" prop="grade">
+          <el-input v-model="dataForm.grade" placeholder="grade" clearable :style="{width: '100%'}" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item :label="$t('module.orderManage.erpToMes.mfoCode')" prop="mfoCode">
+          <el-input v-model="dataForm.mfoCode" :placeholder="$t('module.orderManage.erpToMes.mfoCode')" clearable :style="{width: '100%'}" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item :label="$t('module.orderManage.erpToMes.packagingBoxId')" prop="packagingBoxId">
+          <el-input
+            v-model="dataForm.packagingBoxId"
+            oninput="value=value.replace(/[^\d]/g,'')"
+            :placeholder="$t('module.orderManage.erpToMes.packagingBoxId')"
+            clearable
+            :style="{width: '100%'}"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item :label="$t('module.orderManage.erpToMes.reportTime')" prop="reportTime">
+          <el-date-picker
+            v-model="dataForm.reportTime"
+            :style="{width: '100%'}"
+            :placeholder="$t('module.orderManage.erpToMes.reportTime')"
+            clearable
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="totlePower" prop="totlePower">
+          <el-input
+            v-model="dataForm.totlePower"
+            placeholder="totlePower"
+            oninput="value=value.replace(/[^\d]/g,'')"
+            clearable
+            :style="{width: '100%'}"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="substrateId1" prop="substrateId1">
+          <el-input
+            v-model="dataForm.substrateId1"
+            placeholder="substrateId1"
+            clearable
+            :style="{width: '100%'}"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="substrateId2" prop="substrateId2">
+          <el-input
+            v-model="dataForm.substrateId2"
+            placeholder="substrateId2"
+            clearable
+            :style="{width: '100%'}"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="substrateId3" prop="substrateId3">
+          <el-input
+            v-model="dataForm.substrateId3"
+            placeholder="substrateId3"
+            clearable
+            :style="{width: '100%'}"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="substrateId4" prop="substrateId4">
+          <el-input
+            v-model="dataForm.substrateId4"
+            placeholder="substrateId4"
+            clearable
+            :style="{width: '100%'}"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="substrateId5" prop="substrateId5">
+          <el-input
+            v-model="dataForm.substrateId5"
+            placeholder="substrateId5"
+            clearable
+            :style="{width: '100%'}"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="substrateId6" prop="substrateId6">
+          <el-input
+            v-model="dataForm.substrateId6"
+            placeholder="substrateId6"
+            clearable
+            :style="{width: '100%'}"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="substrateId7" prop="substrateId7">
+          <el-input
+            v-model="dataForm.substrateId7"
+            placeholder="substrateId7"
+            clearable
+            :style="{width: '100%'}"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="substrateId8" prop="substrateId8">
+          <el-input
+            v-model="dataForm.substrateId8"
+            placeholder="substrateId8"
+            clearable
+            :style="{width: '100%'}"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="substrateId9" prop="substrateId9">
+          <el-input
+            v-model="dataForm.substrateId9"
+            placeholder="substrateId9"
+            clearable
+            :style="{width: '100%'}"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="substrateId10" prop="substrateId10">
+          <el-input
+            v-model="dataForm.substrateId10"
+            placeholder="substrateId10"
+            clearable
+            :style="{width: '100%'}"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="substrateId11" prop="substrateId11">
+          <el-input
+            v-model="dataForm.substrateId11"
+            placeholder="substrateId11"
+            clearable
+            :style="{width: '100%'}"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="substrateId12" prop="substrateId12">
+          <el-input
+            v-model="dataForm.substrateId12"
+            placeholder="substrateId12"
+            clearable
+            :style="{width: '100%'}"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="substrateId13" prop="substrateId13">
+          <el-input
+            v-model="dataForm.substrateId13"
+            placeholder="substrateId13"
+            clearable
+            :style="{width: '100%'}"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="substrateId14" prop="substrateId14">
+          <el-input
+            v-model="dataForm.substrateId14"
+            placeholder="substrateId14"
+            clearable
+            :style="{width: '100%'}"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="substrateId15" prop="substrateId15">
+          <el-input
+            v-model="dataForm.substrateId15"
+            placeholder="substrateId15"
+            clearable
+            :style="{width: '100%'}"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="substrateId16" prop="substrateId16">
+          <el-input
+            v-model="dataForm.substrateId16"
+            placeholder="substrateId16"
+            clearable
+            :style="{width: '100%'}"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="substrateId17" prop="substrateId17">
+          <el-input
+            v-model="dataForm.substrateId17"
+            placeholder="substrateId17"
+            clearable
+            :style="{width: '100%'}"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="substrateId18" prop="substrateId18">
+          <el-input
+            v-model="dataForm.substrateId18"
+            placeholder="substrateId18"
+            clearable
+            :style="{width: '100%'}"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="substrateId19" prop="substrateId19">
+          <el-input
+            v-model="dataForm.substrateId19"
+            placeholder="substrateId19"
+            clearable
+            :style="{width: '100%'}"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="substrateId20" prop="substrateId20">
+          <el-input
+            v-model="dataForm.substrateId20"
+            placeholder="substrateId20"
+            clearable
+            :style="{width: '100%'}"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label-width="0" prop="">
+          <el-button type="primary" size="medium" @click="submit"> 提交 </el-button>
+        </el-form-item>
+      </el-col>
+    </el-form>
+  </el-row>
+</template>
+
+<script>
+import { mesToErpAdd } from '@/api/orderManage/erpToMes'
+
+export default {
+  components: {},
+  props: [],
+  data() {
+    return {
+      dataForm: {
+        grade: undefined,
+        mfoCode: undefined,
+        packagingBoxId: undefined,
+        reportTime: undefined,
+        totlePower: undefined,
+        substrateId1: undefined,
+        substrateId2: undefined,
+        substrateId3: undefined,
+        substrateId4: undefined,
+        substrateId5: undefined,
+        substrateId6: undefined,
+        substrateId7: undefined,
+        substrateId8: undefined,
+        substrateId9: undefined,
+        substrateId10: undefined,
+        substrateId11: undefined,
+        substrateId12: undefined,
+        substrateId13: undefined,
+        substrateId14: undefined,
+        substrateId15: undefined,
+        substrateId16: undefined,
+        substrateId17: undefined,
+        substrateId18: undefined,
+        substrateId19: undefined,
+        substrateId20: undefined
+      },
+      rules: {
+        grade: [],
+        mfoCode: [],
+        packagingBoxId: [],
+        reportTime: [],
+        totlePower: [],
+        substrateId1: []
+      }
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {
+    this.init()
+  },
+  mounted() {},
+  methods: {
+    init() {
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+      })
+    },
+    submit() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          mesToErpAdd(this.dataForm).then(res => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.init()
+              }
+            })
+          })
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/orderManage/order/components/materialBomInfo.vue b/src/views/orderManage/order/components/materialBomInfo.vue
new file mode 100644
index 0000000..a6ee77b
--- /dev/null
+++ b/src/views/orderManage/order/components/materialBomInfo.vue
@@ -0,0 +1,122 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-04-27 09:40:10
+ * @Description:
+-->
+<template>
+  <base-table
+    :page="listQuery.current"
+    :limit="listQuery.size"
+    :table-config="tableProps"
+    :table-data="list"
+    :is-loading="listLoading"
+  />
+</template>
+
+<script>
+import { list } from '@/api/material-manage/bom-list.js'
+import i18n from '@/lang'
+import BaseTable from '@/components/BaseTable'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+const tableProps = [
+  {
+    prop: 'name',
+    label: i18n.t('module.materialManager.materialbom.name'),
+    align: 'center'
+  },
+  {
+    prop: 'code',
+    label: i18n.t('module.materialManager.materialbom.bomcode'),
+    align: 'center'
+  },
+  {
+    prop: 'quantity',
+    label: i18n.t('module.materialManager.materialbom.quantity'),
+    align: 'center'
+  },
+  {
+    prop: 'unit',
+    label: i18n.t('module.materialManager.materialbom.unit'),
+    align: 'center'
+  },
+  {
+    prop: 'remark',
+    label: i18n.t('module.orderManage.order.Remarks'),
+    align: 'center'
+  }
+]
+
+export default {
+  name: '',
+  components: { BaseTable },
+  props: {
+    bomId: {
+      type: String,
+      default: () => {
+        return ''
+      }
+    }
+  },
+  data() {
+    return {
+      tableProps,
+      list: [],
+      listLoading: false,
+      listQuery: {
+        current: 1,
+        size: 500,
+        bomId: ''
+      }
+    }
+  },
+  methods: {
+    init() {
+      this.listQuery.bomId = this.bomId
+      if (this.bomId) {
+        this.getList()
+      } else {
+        this.$message.error(this.$t('module.orderManage.order.materialBomMessage'))
+      }
+    },
+    getList() {
+      this.listLoading = true
+      list(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/orderManage/order/components/order-add.vue b/src/views/orderManage/order/components/order-add.vue
new file mode 100644
index 0000000..7f5dd85
--- /dev/null
+++ b/src/views/orderManage/order/components/order-add.vue
@@ -0,0 +1,417 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-03-04 15:58:33
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-26 14:20:44
+ * @Description:
+-->
+<template>
+  <el-dialog
+    :title="!dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter"
+    :visible.sync="visible"
+    width="60%"
+    @open="onOpen"
+    @close="onClose"
+  >
+    <el-row :gutter="10">
+      <el-form
+        ref="dataForm"
+        :model="dataForm"
+        :rules="rules"
+        size="medium"
+        label-width="165px"
+        label-position="right"
+      >
+        <el-col :span="8">
+          <el-form-item :label="$t('module.orderManage.order.OrderName')" prop="name">
+            <el-input v-model="dataForm.name" :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.OrderName')])" clearable :style="{width: '100%'}" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item :label="$t('module.orderManage.order.OrderCode')" prop="orderNo">
+            <el-input v-model="dataForm.orderNo" :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.OrderCode')])" clearable :style="{width: '100%'}" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item :label="$t('module.orderManage.order.powerClass')" prop="powerClass">
+            <el-input v-model="dataForm.powerClass" :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.powerClass')])" clearable :style="{width: '100%'}" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item :label="$t('module.orderManage.order.PlannedProcessingVolume')" prop="planQuantity">
+            <el-input-number v-model="dataForm.planQuantity" :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.PlannedProcessingVolume')])" :step="1" />
+          </el-form-item>
+        </el-col>
+        <el-col v-show="dataForm.id" :span="8">
+          <el-form-item :label="$t('module.orderManage.order.ActualTargetQuantity')" prop="targetNumber">
+            <el-input-number v-model="dataForm.targetNumber" :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.ActualTargetQuantity')])" :step="1" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item :label="$t('module.orderManage.order.OrderType')" prop="orderType">
+            <el-select v-model="dataForm.orderType" filterable :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.OrderType')])" clearable>
+              <el-option
+                v-for="item in orderTypeArr"
+                :key="item.id"
+                :label="item.dataName"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item :label="$t('module.orderManage.order.customer')" prop="customerName">
+            <el-input v-model="dataForm.customerName" :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.customer')])" clearable :style="{width: '100%'}" />
+            <!-- <el-select v-model="dataForm.customerName" filterable :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.customer')])" clearable>
+              <el-option
+                v-for="item in customerArr"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select> -->
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item :label="$t('module.orderManage.order.priority')" prop="priority">
+            <el-select v-model="dataForm.priority" :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.priority')])" clearable :style="{width: '100%'}">
+              <el-option
+                v-for="(item, index) in priorityOptions"
+                :key="index"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item :label="$t('module.orderManage.order.ProductProcess')" prop="processFlowId" label-width="175px">
+            <el-select v-model="dataForm.processFlowId" :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.ProductProcess')])" clearable :style="{width: '100%'}">
+              <el-option
+                v-for="(item, index) in processOptions"
+                :key="index"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <!-- <el-col :span="8">
+          <el-form-item :label="$t('module.orderManage.order.ProductName')" prop="productId">
+            <el-select v-model="dataForm.productId" :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.ProductName')])" clearable :style="{width: '100%'}">
+              <el-option
+                v-for="(item, index) in productOptions"
+                :key="index"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col> -->
+        <el-col :span="8">
+          <el-form-item :label="$t('module.orderManage.order.ProductType')" prop="productType">
+            <el-select v-model="dataForm.productType" :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.ProductType')])" clearable :style="{width: '100%'}">
+              <el-option
+                v-for="(item, index) in productTypeOptions"
+                :key="index"
+                :label="item.dataName"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item :label="$t('module.orderManage.order.materialBom')" prop="bomId">
+            <el-select v-model="dataForm.bomId" :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.materialBom')])" clearable :style="{width: '100%'}">
+              <el-option
+                v-for="(item, index) in materialBomOptions"
+                :key="index"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col v-if="false" :span="8">
+          <el-form-item :label="$t('module.orderManage.order.PlanningStartTime')" prop="planStartProduceTime">
+            <el-date-picker
+              v-model="dataForm.planStartProduceTime"
+              type="date"
+              format="yyyy-MM-dd"
+              :style="{width: '100%'}"
+              :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.PlanningStartTime')])"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item :label="$t('module.orderManage.order.DeliveryTime')" prop="deliveryTime">
+            <el-date-picker
+              v-model="dataForm.deliveryTime"
+              type="date"
+              format="yyyy-MM-dd"
+              :style="{width: '100%'}"
+              :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.DeliveryTime')])"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+        <el-col v-show="dataForm.id" :span="8">
+          <el-form-item :label="$t('module.orderManage.order.PlanningEndTime')" prop="planFinishProduceTime">
+            <el-date-picker
+              v-model="dataForm.planFinishProduceTime"
+              type="date"
+              format="yyyy-MM-dd"
+              :style="{width: '100%'}"
+              :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.PlanningEndTime')])"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="16" />
+        <el-col :span="8" style="word-break:break-word">
+          <el-form-item label="power Classification" prop="powerClassification">
+            <el-select v-model="dataForm.powerClassification" placeholder="power Classification" clearable :style="{width: '100%'}">
+              <el-option
+                v-for="(item, index) in powerClassificationArr"
+                :key="index"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item :label="$t('module.orderManage.order.Remarks')" prop="remark">
+            <el-input v-model="dataForm.remark" :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.Remarks')])" clearable :style="{width: '100%'}" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item :label="$t('module.orderManage.order.Description')" prop="description">
+            <el-input v-model="dataForm.description" :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.Description')])" clearable :style="{width: '100%'}" />
+          </el-form-item>
+        </el-col>
+      </el-form>
+    </el-row>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { powerClassificationList } from '@/api/orderManage/powerClassification'
+import { orderDetail, orderUpdate, orderAdd, orderCode } from '@/api/orderManage/order/order'
+import { dataDictionaryDataList } from '@/api/basicData/dataDictionary'
+// import { customerList } from '@/api/basicData/CustomerSupplier/customer'
+import { ProductPoolList } from '@/api/basicData/ProductPool'
+import { list as BomList } from '@/api/material-manage/bom'
+import { list } from '@/api/art-manage/art.js'
+
+export default {
+  components: {},
+  inheritAttrs: false,
+  props: [],
+  data() {
+    return {
+      visible: false,
+      dataForm: {
+        name: undefined,
+        orderNo: undefined,
+        planQuantity: undefined,
+        orderType: '',
+        powerClass: '',
+        customerName: undefined,
+        priority: undefined,
+        processFlowId: undefined,
+        productType: undefined,
+        planStartProduceTime: null,
+        powerClassification: '',
+        deliveryTime: '',
+        bomId: '',
+        targetNumber: '',
+        planFinishProduceTime: null,
+        remark: undefined,
+        description: undefined
+      },
+      rules: {
+        name: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('module.orderManage.order.OrderName')]),
+          trigger: 'blur'
+        }],
+        orderNo: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('module.orderManage.order.OrderCode')]),
+          trigger: 'blur'
+        }],
+        powerClass: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('module.orderManage.order.powerClass')]),
+          trigger: 'blur'
+        }],
+        bomId: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('module.orderManage.order.materialBom')]),
+          trigger: 'change'
+        }],
+        deliveryTime: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('module.orderManage.order.DeliveryTime')]),
+          trigger: 'change'
+        }],
+        planQuantity: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('module.orderManage.order.PlannedProcessingVolume')]),
+          trigger: 'blur'
+        }],
+        customerName: [],
+        priority: [],
+        processFlowId: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('module.orderManage.order.ProductProcess')]),
+          trigger: 'change'
+        }],
+        productType: [],
+        planStartProduceTime: [],
+        remark: [],
+        description: []
+      },
+      powerClassificationArr: [],
+      orderTypeArr: [],
+      priorityOptions: [{
+        'label': '正常',
+        'value': 1
+      }, {
+        'label': '高',
+        'value': 2
+      }, {
+        'label': '低',
+        'value': 0
+      }],
+      processOptions: [],
+      productOptions: [],
+      productTypeOptions: [],
+      materialBomOptions: [],
+      customerArr: []
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {
+    init(id) {
+      const listQuery = {
+        current: 1,
+        size: 500
+      }
+      powerClassificationList(listQuery).then(response => {
+        if (response.data.records) {
+          this.powerClassificationArr = response.data.records
+        } else {
+          this.powerClassificationArr.splice(0, this.powerClassificationArr.length)
+        }
+      })
+      this.dataForm.id = id || ''
+      // this.customerArr.splice(0, this.customerArr.length)
+      // customerList(listQuery).then(response => {
+      //   if (response.data.records) {
+      //     this.customerArr = response.data.records
+      //   }
+      // })
+      const listQuery1 = {
+        current: 1,
+        size: 500,
+        dictTypeId: '1386554664951058433'
+      }
+      this.orderTypeArr.splice(0, this.orderTypeArr.length)
+      dataDictionaryDataList(listQuery1).then(response => {
+        if (response.data.records) {
+          this.orderTypeArr = response.data.records
+        }
+      })
+      const listQuery2 = {
+        current: 1,
+        size: 500,
+        dictTypeId: '1386586276368023554'
+      }
+      this.productTypeOptions.splice(0, this.productTypeOptions.length)
+      dataDictionaryDataList(listQuery2).then(response => {
+        if (response.data.records) {
+          this.productTypeOptions = response.data.records
+        }
+      })
+      this.materialBomOptions.splice(0, this.materialBomOptions.length)
+      BomList(listQuery).then(response => {
+        if (response.data.records) {
+          this.materialBomOptions = response.data.records
+        }
+      })
+      this.productOptions.splice(0, this.productOptions.length)
+      ProductPoolList(listQuery).then(response => {
+        if (response.data.records) {
+          this.productOptions = response.data.records
+        }
+      })
+      this.processOptions.splice(0, this.processOptions.length)
+      list(listQuery).then(response => {
+        if (response.data.records) {
+          this.processOptions = response.data.records
+        }
+      })
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          orderDetail(this.dataForm.id).then(res => {
+            this.dataForm = res.data
+          })
+        } else {
+          orderCode().then(res => {
+            this.dataForm.orderNo = res.data
+          })
+        }
+      })
+    },
+    onOpen() {},
+    onClose() {
+      this.$refs['dataForm'].resetFields()
+    },
+    dataFormSubmit() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          const data = this.dataForm
+          if (this.dataForm.id) {
+            orderUpdate(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          } else {
+            orderAdd(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          }
+        }
+      })
+    }
+  }
+}
+
+</script>
diff --git a/src/views/orderManage/order/components/orderDetail.vue b/src/views/orderManage/order/components/orderDetail.vue
new file mode 100644
index 0000000..8d2cee9
--- /dev/null
+++ b/src/views/orderManage/order/components/orderDetail.vue
@@ -0,0 +1,202 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-02-23 11:05:06
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-07-20 14:57:19
+ * @Description: 工单监控
+-->
+<template>
+  <div>
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <el-button style="margin-right:50px" type="success" @click="goback()">{{ 'btn.back' | i18nFilter }}</el-button>
+        <span><b>{{ 'routerTitle.order.orderManage.orderDetail' | i18nFilter }}</b></span>
+      </div>
+      <div class="text item">
+        <el-row :gutter="20">
+          <el-col :span="6"><div>{{ $t('module.orderManage.order.OrderName')+'：'+stringfilter(dataForm.name) }}</div></el-col>
+          <el-col :span="6"><div>{{ $t('module.orderManage.order.OrderCode')+'：'+stringfilter(dataForm.orderNo) }}</div></el-col>
+          <el-col :span="6"><div>{{ $t('module.orderManage.order.process')+'：'+stringfilter(dataForm.processFlowName) }}</div></el-col>
+          <el-col :span="6"><div>{{ $t('module.orderManage.order.customer')+'：'+stringfilter(dataForm.customerName) }}</div></el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <!-- <el-col :span="6"><div>{{ $t('module.orderManage.orderDetail.issueTime')+'：'+timefilter(dataForm.startProduceTime) }}</div></el-col> -->
+          <el-col :span="6"><div>{{ $t('module.orderManage.order.status')+'：'+stringfilter(statusfilter(dataForm.status)) }}</div></el-col>
+          <el-col :span="6"><div>{{ $t('module.orderManage.order.ActualTargetQuantity')+'：'+stringfilter(dataForm.planQuantity) }}</div></el-col>
+          <el-col :span="6"><div>{{ $t('module.orderManage.order.DeliveryTime')+'：'+timefilter(dataForm.deliveryTime) }}</div></el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="6"><div>{{ $t('module.orderManage.orderDetail.completionSchedule')+'：'+towNumber((stringfilter(dataForm.actualQuantity/dataForm.planQuantity))*100)+'%' }}</div></el-col>
+          <el-col :span="6"><div>{{ $t('module.orderManage.order.ActualFinishedProduct')+'：'+stringfilter(dataForm.actualQuantity) }}</div></el-col>
+          <el-col :span="6"><div>{{ $t('module.orderManage.order.NumberOfDamages')+'：'+stringfilter(dataForm.scrapQuantity) }}</div></el-col>
+        </el-row>
+        <el-row v-if="false">
+          <el-col>
+            <el-button type="primary" @click="scrapClick()"> {{ 'routerTitle.order.orderManage.scrapDetail' | i18nFilter }} </el-button>
+            <el-button type="primary" @click="packageClick()"> {{ 'routerTitle.order.orderManage.packageDetail' | i18nFilter }} </el-button></el-col>
+        </el-row>
+      </div>
+    </el-card>
+    <el-card>
+      <el-menu
+        :default-active="activeIndex"
+        mode="horizontal"
+        background-color="#545c64"
+        text-color="#fff"
+        active-text-color="#ffd04b"
+        @select="handleSelect"
+      >
+        <el-menu-item index="1">{{ $t('module.orderManage.order.workOrderInfo') }}</el-menu-item>
+        <!-- <el-menu-item index="2">{{ $t('module.orderManage.order.OrderReportInfo') }}</el-menu-item> -->
+        <el-menu-item index="3">{{ $t('module.orderManage.order.materialBom') }}</el-menu-item>
+      </el-menu>
+    </el-card>
+    <order-info v-if="orderVisible" ref="orderInfo" :order-id="OrderId" @getQuantity="getQuantity" />
+    <report-info v-if="reportVisible" ref="reportInfo" :order-id="OrderId" @refreshDataList="handleClick" />
+    <materialBom-info v-if="materialBomVisible" ref="materialBomInfo" :bom-id="dataForm.bomId" @refreshDataList="handleClick" />
+    <package-detail v-if="packageVisible" ref="packageDetail" :order-id="OrderId" @refreshDataList="handleClick" />
+    <scrap-detail v-if="scrapVisible" ref="scrapDetail" :order-id="OrderId" @refreshDataList="handleClick" />
+  </div>
+</template>
+
+<script>
+import { orderDetail } from '@/api/orderManage/order/order'
+import { timeFormatter } from '@/filters'
+import orderInfo from './orderInfo'
+import reportInfo from './reportInfo'
+import materialBomInfo from './materialBomInfo'
+import packageDetail from './packageDetail'
+import scrapDetail from './scrapDetail'
+
+export default {
+  name: '',
+  components: { orderInfo, reportInfo, scrapDetail, packageDetail, materialBomInfo },
+  data() {
+    return {
+      orderVisible: false,
+      reportVisible: false,
+      materialBomVisible: false,
+      packageVisible: false,
+      scrapVisible: false,
+      OrderId: '',
+      activeIndex: '1',
+      dataForm: {}
+    }
+  },
+  created() {
+    this.OrderId = this.$route.query.id
+    this.handleSelect('1')
+    this.init()
+  },
+  methods: {
+    handleClick() {
+      // this.addOrUpdateVisible = true
+      // this.$nextTick(() => {
+      //   this.$refs.addOrUpdate.init(id)
+      // })
+    },
+    init() {
+      this.dataForm = {}
+      orderDetail(this.OrderId).then(res => {
+        this.dataForm = res.data
+        this.dataForm.actualQuantity = 0
+        this.dataForm.scrapQuantity = 0
+      })
+    },
+    handleSelect(key, keyPath) {
+      this.orderVisible = false
+      this.reportVisible = false
+      this.materialBomVisible = false
+      switch (key) {
+        case '1':
+          this.orderVisible = true
+          this.$nextTick(() => {
+            this.$refs.orderInfo.init()
+          })
+          break
+        case '2':
+          this.reportVisible = true
+          this.$nextTick(() => {
+            this.$refs.reportInfo.init()
+          })
+          break
+        case '3':
+          this.materialBomVisible = true
+          this.$nextTick(() => {
+            this.$refs.materialBomInfo.init()
+          })
+          break
+      }
+    },
+    scrapClick() {
+      this.scrapVisible = true
+      this.$nextTick(() => {
+        this.$refs.scrapDetail.init()
+      })
+    },
+    packageClick() {
+      this.packageVisible = true
+      this.$nextTick(() => {
+        this.$refs.packageDetail.init()
+      })
+    },
+    goback() {
+      this.$router.go(-1)
+    },
+    towNumber(val) {
+      return val.toFixed(2)
+    },
+    timefilter(obj) {
+      return timeFormatter(obj).substring(0, timeFormatter(obj).lastIndexOf(' '))
+    },
+    statusfilter(val) {
+      const orderStatus = {
+        '1': '新增',
+        '2': '启动',
+        '3': '暂停',
+        '9': '完成'
+      }
+      return orderStatus?.[val]
+    },
+    getQuantity(actual, scrap) {
+      this.dataForm = Object.assign({}, this.dataForm, { actualQuantity: actual, scrapQuantity: scrap })
+      // this.$set(this.dataForm, 'actualQuantity', actualQuantity)
+      // this.$set(this.dataForm, 'scrapQuantity', scrapQuantity)
+    },
+    stringfilter(objString) {
+      return objString || ''
+    }
+  }
+}
+</script>
+
+<style scoped>
+.text {
+    font-size: 18px;
+  }
+
+  .item {
+    margin-bottom: 18px;
+  }
+
+  .clearfix:before,
+  .clearfix:after {
+    display: table;
+    content: "";
+  }
+  .clearfix:after {
+    clear: both
+  }
+
+  .box-card {
+    font-size: 20px;
+    margin: auto;
+    margin-top: 20px;
+  }
+  .el-row {
+    margin-bottom: 20px;
+  }
+  .el-col {
+    border-radius: 4px;
+  }
+</style>
diff --git a/src/views/orderManage/order/components/orderDetailBtn.vue b/src/views/orderManage/order/components/orderDetailBtn.vue
new file mode 100644
index 0000000..eea9ac4
--- /dev/null
+++ b/src/views/orderManage/order/components/orderDetailBtn.vue
@@ -0,0 +1,33 @@
+<!--
+ * @Date: 2021-01-07 20:09:37
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-06 19:45:49
+ * @FilePath:
+ * @Description:
+-->
+<template>
+  <span>
+    <el-button type="text" size="small" @click="emitClick">{{ $t('module.orderManage.order.detail') }}</el-button>
+  </span>
+</template>
+
+<script>
+export default {
+  props: {
+    injectData: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  methods: {
+    emitClick() {
+      this.$router.push({
+        name: 'orderDetail',
+        query: {
+          id: this.injectData.id
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/orderManage/order/components/orderInfo.vue b/src/views/orderManage/order/components/orderInfo.vue
new file mode 100644
index 0000000..db01bc1
--- /dev/null
+++ b/src/views/orderManage/order/components/orderInfo.vue
@@ -0,0 +1,133 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-30 11:22:36
+ * @Description:
+-->
+<template>
+  <base-table
+    :page="listQuery.current"
+    :limit="listQuery.size"
+    :table-config="tableProps"
+    :table-data="list"
+    :is-loading="listLoading"
+  />
+</template>
+
+<script>
+import { workOrderList } from '@/api/orderManage/workOrder/workOrder'
+import i18n from '@/lang'
+import BaseTable from '@/components/BaseTable'
+import { timeFormatter } from '@/filters'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+const tableProps = [
+  {
+    prop: 'startProduceTime',
+    label: i18n.t('module.orderManage.order.executionTime'),
+    filter: timeFormatter,
+    align: 'center'
+  },
+  {
+    prop: 'name',
+    label: i18n.t('module.orderManage.order.WorkOrderName'),
+    align: 'center'
+  },
+  // {
+  //   prop: 'code',
+  //   label: i18n.t('module.orderManage.order.WorkOrderCode'),
+  //   align: 'center'
+  // },
+  {
+    prop: 'actualQuantity',
+    label: i18n.t('module.orderManage.order.completQuantity'),
+    align: 'center'
+  },
+  {
+    prop: 'finishProduceTime',
+    label: i18n.t('module.orderManage.order.finishTime'),
+    align: 'center',
+    filter: timeFormatter
+  },
+  {
+    prop: 'remark',
+    label: i18n.t('module.orderManage.order.Remarks'),
+    align: 'center'
+  }
+]
+
+export default {
+  name: '',
+  components: { BaseTable },
+  props: {
+    orderId: {
+      type: String,
+      default: () => {
+        return ''
+      }
+    }
+  },
+  data() {
+    return {
+      tableProps,
+      list: [],
+      listLoading: false,
+      listQuery: {
+        current: 1,
+        size: 500,
+        orderId: ''
+      }
+    }
+  },
+  methods: {
+    init() {
+      this.listQuery.orderId = this.orderId
+      this.getList()
+    },
+    getList() {
+      this.listLoading = true
+      workOrderList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+          let actualQuantity = 0
+          let scrapQuantity = 0
+          this.list.forEach(item => {
+            actualQuantity += item.actualQuantity
+            scrapQuantity += item.scrapQuantity
+          })
+          this.$emit('getQuantity', actualQuantity, scrapQuantity)
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/orderManage/order/components/orderIssue-add.vue b/src/views/orderManage/order/components/orderIssue-add.vue
new file mode 100644
index 0000000..daefd1b
--- /dev/null
+++ b/src/views/orderManage/order/components/orderIssue-add.vue
@@ -0,0 +1,134 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-25 18:39:26
+ * @enName:
+-->
+<template>
+  <el-dialog
+    :title="'routerTitle.order.orderManage.orderIssue' | i18nFilter"
+    :visible.sync="visible"
+  >
+    <div style="font-size:20px;margin:0 0 18px 10% ;color:#1890FF;">{{ $t('module.orderManage.orderDetail.remainingPlannedQuantity')+'：'+remainingPlannedQuantity }}</div>
+    <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="110px" @keyup.enter.native="dataFormSubmit()">
+      <el-form-item :label="$t('module.orderManage.order.WorkOrderName')" prop="name">
+        <el-input v-model="dataForm.name" :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.WorkOrderName')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.orderManage.order.WorkOrderCode')" prop="workOrderNo">
+        <el-input v-model="dataForm.workOrderNo" :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.WorkOrderCode')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.orderManage.order.PlannedProcessingVolume')" prop="planQuantity">
+        <el-input-number v-model="dataForm.planQuantity" :max="remainingPlannedQuantity" :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.PlannedProcessingVolume')])" :step="1" />
+      </el-form-item>
+      <el-form-item :label="$t('module.orderManage.order.priority')" prop="priority">
+        <el-select v-model="dataForm.priority" filterable :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.priority')])" clearable>
+          <el-option
+            v-for="item in priorityArr"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="$t('module.orderManage.order.Remarks')" prop="remark">
+        <el-input v-model="dataForm.remark" :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.Remarks')])" clearable />
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { workOrderAdd, workOrderCode } from '@/api/orderManage/workOrder/workOrder'
+export default {
+  props: {
+    orderId: {
+      type: String,
+      default: () => {
+        return ''
+      }
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      dataForm: {
+        name: '',
+        orderId: '',
+        workOrderNo: '',
+        priority: 2,
+        planQuantity: '',
+        remark: ''
+      },
+      priorityArr: [
+        {
+          label: '低',
+          value: 1
+        },
+        {
+          label: '正常',
+          value: 2
+        },
+        {
+          label: '高',
+          value: 3
+        }
+      ],
+      remainingPlannedQuantity: 0,
+      dataRule: {
+        name: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.orderManage.order.WorkOrderName')]), trigger: 'blur' }
+        ],
+        workOrderNo: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.orderManage.order.WorkOrderCode')]), trigger: 'blur' }
+        ],
+        planQuantity: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.orderManage.order.PlannedProcessingVolume')]), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    init(remainingPlannedQuantity) {
+      this.remainingPlannedQuantity = remainingPlannedQuantity
+      this.visible = true
+      this.dataForm.orderId = this.orderId
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        workOrderCode().then(res => {
+          this.dataForm.workOrderNo = res.data
+        })
+      })
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          if (this.dataForm.planQuantity > 0) {
+            workOrderAdd(this.dataForm).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          } else {
+            this.$message({
+              message: '计划加工量不能小于1',
+              type: 'warning'
+            })
+          }
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/orderManage/order/components/orderIssue.vue b/src/views/orderManage/order/components/orderIssue.vue
new file mode 100644
index 0000000..0329148
--- /dev/null
+++ b/src/views/orderManage/order/components/orderIssue.vue
@@ -0,0 +1,241 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-02-23 11:05:06
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-06-22 16:29:19
+ * @Description: 工单监控
+-->
+<template>
+  <div>
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <el-button style="margin-right:50px" type="success" @click="goback()">{{ 'btn.back' | i18nFilter }}</el-button>
+        <span><b>{{ $t('module.orderManage.order.OrderCode')+'：'+stringfilter(dataForm.orderNo) }}</b></span>
+      </div>
+      <div class="text item">
+        <el-row :gutter="20">
+          <el-col :span="6"><div>{{ $t('module.orderManage.order.OrderName')+'：'+stringfilter(dataForm.name) }}</div></el-col>
+          <el-col :span="6"><div>{{ $t('module.orderManage.order.process')+'：'+stringfilter(dataForm.processFlowName) }}</div></el-col>
+          <el-col :span="6"><div>{{ $t('module.orderManage.order.customer')+'：'+stringfilter(dataForm.customerName) }}</div></el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="6"><div>{{ $t('module.orderManage.order.ActualTargetQuantity')+'：'+stringfilter(dataForm.planQuantity) }}</div></el-col>
+          <el-col :span="6"><div>{{ $t('module.orderManage.orderDetail.issuedQuantity')+'：'+stringfilter(issuedQuantity) }}</div></el-col>
+          <el-col :span="6"><div>{{ $t('module.orderManage.orderDetail.remainingPlannedQuantity')+'：'+stringfilter(remainingPlannedQuantity) }}</div></el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <!-- <el-col :span="6"><div>{{ $t('module.orderManage.orderDetail.issueTime')+'：'+timefilter(dataForm.startProduceTime) }}</div></el-col> -->
+          <el-col :span="6"><div>{{ $t('module.orderManage.order.DeliveryTime')+'：'+timefilter(dataForm.deliveryTime) }}</div></el-col>
+        </el-row>
+        <el-row>
+          <el-col>
+            <el-button type="primary" :disabled="remainingPlannedQuantity<1" :order-id="orderId" @click="issueClick()"> {{ 'routerTitle.order.orderManage.orderIssue' | i18nFilter }} </el-button>
+          </el-col>
+        </el-row>
+      </div>
+    </el-card>
+    <base-table
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    >
+      <method-btn
+        slot="handleBtn"
+        :width="trueWidth"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      @pagination="getList()"
+    />
+    <orderIssue-add v-if="addOrUpdateVisible" ref="addOrUpdate" :order-id="orderId" @refreshDataList="getList" />
+  </div>
+</template>
+
+<script>
+import { orderDetail } from '@/api/orderManage/order/order'
+import { workOrderList, workOrderDelete } from '@/api/orderManage/workOrder/workOrder'
+import i18n from '@/lang'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import orderIssueAdd from './orderIssue-add'
+import { timeFormatter } from '@/filters'
+
+const tableBtn = [
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  }
+]
+const tableProps = [
+  {
+    prop: 'createTime',
+    label: i18n.t('module.orderManage.order.createTime'),
+    filter: timeFormatter,
+    align: 'center'
+  },
+  {
+    prop: 'name',
+    label: i18n.t('module.orderManage.order.WorkOrderName'),
+    align: 'center'
+  },
+  {
+    prop: 'workOrderNo',
+    label: i18n.t('module.orderManage.order.WorkOrderCode'),
+    align: 'center'
+  },
+  {
+    prop: 'planQuantity',
+    label: i18n.t('module.orderManage.order.PlannedProcessingVolume'),
+    align: 'center'
+  },
+  {
+    prop: 'remark',
+    label: i18n.t('module.orderManage.order.Remarks'),
+    align: 'center'
+  }
+]
+export default {
+  name: '',
+  components: { Pagination, BaseTable, MethodBtn, orderIssueAdd },
+  data() {
+    return {
+      orderId: '',
+      addOrUpdateVisible: false,
+      tableProps,
+      tableBtn,
+      list: [],
+      total: 0,
+      trueWidth: 200,
+      listLoading: false,
+      listQuery: {
+        current: 1,
+        size: 10,
+        orderId: ''
+      },
+      dataForm: {},
+      issuedQuantity: 0,
+      remainingPlannedQuantity: 0
+    }
+  },
+  created() {
+    this.orderId = this.$route.query.id
+    this.init()
+  },
+  methods: {
+    init() {
+      this.listQuery.orderId = this.orderId
+      this.issuedQuantity = 0
+      this.dataForm = {}
+      orderDetail(this.orderId).then(res => {
+        this.dataForm = res.data
+        this.getList()
+      })
+    },
+    handleClick(raw) {
+      if (raw.type === 'delete') {
+        this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]？`, this.$t('module.basicData.visual.Tips'), {
+          confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+          cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+          type: 'warning'
+        }).then(() => {
+          workOrderDelete(raw.data.id).then(response => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+              }
+            })
+          })
+        }).catch(() => {})
+      }
+    },
+    getList() {
+      this.listLoading = true
+      this.issuedQuantity = 0
+      this.remainingPlannedQuantity = this.dataForm.planQuantity
+      workOrderList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+          this.list.forEach(item => {
+            this.issuedQuantity += item.planQuantity
+          })
+          this.remainingPlannedQuantity = this.remainingPlannedQuantity - this.issuedQuantity
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    },
+    issueClick() {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(this.remainingPlannedQuantity)
+      })
+    },
+    goback() {
+      this.$router.go(-1)
+    },
+    towNumber(val) {
+      return val.toFixed(2)
+    },
+    timefilter(obj) {
+      return timeFormatter(obj).substring(0, timeFormatter(obj).lastIndexOf(' '))
+    },
+    statusfilter(val) {
+      const orderStatus = {
+        '1': '新增',
+        '2': '启动',
+        '3': '暂停',
+        '9': '完成'
+      }
+      return orderStatus?.[val]
+    },
+    stringfilter(objString) {
+      return objString || ''
+    }
+  }
+}
+</script>
+
+<style scoped>
+.text {
+    font-size: 18px;
+  }
+
+  .item {
+    margin-bottom: 18px;
+  }
+
+  .clearfix:before,
+  .clearfix:after {
+    display: table;
+    content: "";
+  }
+  .clearfix:after {
+    clear: both
+  }
+
+  .box-card {
+    font-size: 20px;
+    margin: auto;
+    margin-top: 20px;
+  }
+  .el-row {
+    margin-bottom: 20px;
+  }
+  .el-col {
+    border-radius: 4px;
+  }
+</style>
diff --git a/src/views/orderManage/order/components/packageDetail.vue b/src/views/orderManage/order/components/packageDetail.vue
new file mode 100644
index 0000000..053ca8b
--- /dev/null
+++ b/src/views/orderManage/order/components/packageDetail.vue
@@ -0,0 +1,148 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-25 16:33:10
+ * @Description:
+-->
+<template>
+  <el-drawer
+    :visible.sync="visible"
+    :append-to-body="true"
+    size="65%"
+  >
+    <div slot="title" style=" background-color:#02BCFF;font-size:1.5em;color:white;padding:5px 20px">{{ 'routerTitle.order.orderManage.packageDetail' | i18nFilter }}</div>
+    <base-table
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    >
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        :page.sync="listQuery.current"
+        :limit.sync="listQuery.size"
+        @pagination="getList()"
+      />
+    </base-table></el-drawer>
+</template>
+
+<script>
+import i18n from '@/lang'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import detailBtn from '../../components/detailBtn'
+// import { timeFormatter } from '@/filters'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+const tableProps = [
+  {
+    prop: 'createTime',
+    label: i18n.t('module.orderManage.order.reportingTime')
+    // filter: timeFormatter
+  },
+  {
+    prop: 'code',
+    label: i18n.t('module.orderManage.order.packageNumber'),
+    align: 'center'
+  },
+  {
+    prop: 'SAP',
+    label: i18n.t('module.orderManage.order.SAPMaterial')
+  },
+  {
+    prop: 'power',
+    label: i18n.t('module.orderManage.order.power')
+  },
+  {
+    prop: 'detail',
+    label: i18n.t('module.orderManage.order.detail'),
+    subcomponent: detailBtn
+  }
+]
+
+export default {
+  name: '',
+  components: { Pagination, BaseTable },
+  props: {
+    orderId: {
+      type: String,
+      default: () => {
+        return ''
+      }
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: false,
+      listQuery: {
+        current: 1,
+        size: 10
+      }
+    }
+  },
+  methods: {
+    init() {
+      this.visible = true
+      this.listQuery = {
+        current: 1,
+        size: 10
+      }
+      this.getList()
+    },
+    getList() {
+      this.list = [
+        {
+          'createTime': '2020-12-21 13：44:15',
+          'code': '110',
+          'SAP': ''
+        }
+      ]
+      // this.listLoading = true
+      // staffList(this.listQuery).then(response => {
+      //   if (response.data.records) {
+      //     this.list = response.data.records
+      //   } else {
+      //     this.list.splice(0, this.list.length)
+      //   }
+      //   this.total = response.data.total
+      //   this.listLoading = false
+      // })
+    },
+    goback() {
+      this.visible = false
+      this.$emit('refreshDataList')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/orderManage/order/components/reportInfo.vue b/src/views/orderManage/order/components/reportInfo.vue
new file mode 100644
index 0000000..217cfaf
--- /dev/null
+++ b/src/views/orderManage/order/components/reportInfo.vue
@@ -0,0 +1,120 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-22 14:23:15
+ * @Description:
+-->
+<template>
+  <base-table
+    :page="listQuery.current"
+    :limit="listQuery.size"
+    :table-config="tableProps"
+    :table-data="list"
+    :is-loading="listLoading"
+  />
+</template>
+
+<script>
+import i18n from '@/lang'
+import { reportList } from '@/api/orderManage/order/order'
+import BaseTable from '@/components/BaseTable'
+import { timeFormatter } from '@/filters'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+const tableProps = [
+  {
+    prop: 'reportTime',
+    label: i18n.t('module.orderManage.order.reportingTime'),
+    filter: timeFormatter,
+    align: 'center'
+  },
+  {
+    prop: 'reportType',
+    label: i18n.t('module.orderManage.order.workReportMethod'),
+    align: 'center'
+  },
+  {
+    prop: 'workOrderStatus',
+    label: i18n.t('module.orderManage.order.status'),
+    align: 'center'
+  },
+  {
+    prop: 'goodQuantity',
+    label: i18n.t('module.orderManage.order.goodQuantity'),
+    align: 'center'
+  },
+  {
+    prop: 'scrapQuantity',
+    label: i18n.t('module.orderManage.order.scrapQuantity'),
+    align: 'center'
+  }
+]
+
+export default {
+  name: '',
+  components: { BaseTable },
+  props: {
+    orderId: {
+      type: String,
+      default: () => {
+        return ''
+      }
+    }
+  },
+  data() {
+    return {
+      tableProps,
+      list: [],
+      listLoading: false,
+      listQuery: {
+        current: 1,
+        size: 10,
+        orderId: ''
+      }
+    }
+  },
+  methods: {
+    init() {
+      this.listQuery.orderId = this.orderId
+      this.getList()
+    },
+    getList() {
+      this.listLoading = true
+      reportList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/orderManage/order/components/scrapDetail.vue b/src/views/orderManage/order/components/scrapDetail.vue
new file mode 100644
index 0000000..a2b766f
--- /dev/null
+++ b/src/views/orderManage/order/components/scrapDetail.vue
@@ -0,0 +1,139 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-25 16:33:27
+ * @Description:
+-->
+<template>
+  <el-dialog
+    :title="'routerTitle.order.orderManage.scrapDetail' | i18nFilter"
+    :visible.sync="visible"
+    :before-close="goback"
+    :append-to-body="true"
+    width="80%"
+  >
+    <base-table
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    >
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        :page.sync="listQuery.current"
+        :limit.sync="listQuery.size"
+        @pagination="getList()"
+      />
+    </base-table></el-dialog>
+</template>
+
+<script>
+import i18n from '@/lang'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+// import { timeFormatter } from '@/filters'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+const tableProps = [
+  {
+    prop: 'createTime',
+    label: i18n.t('module.orderManage.order.initiateTime')
+    // filter: timeFormatter
+  },
+  {
+    prop: 'scrapId',
+    label: i18n.t('module.orderManage.order.scrapId'),
+    align: 'center'
+  },
+  {
+    prop: 'scrapLevel',
+    label: i18n.t('module.orderManage.order.scrapLevel')
+  }
+]
+
+export default {
+  name: '',
+  components: { Pagination, BaseTable },
+  props: {
+    orderId: {
+      type: String,
+      default: () => {
+        return ''
+      }
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: false,
+      listQuery: {
+        current: 1,
+        size: 10
+      }
+    }
+  },
+  methods: {
+    init() {
+      this.visible = true
+      this.listQuery = {
+        current: 1,
+        size: 10
+      }
+      this.getList()
+    },
+    getList() {
+      this.list = [
+        {
+          'createTime': '2020-12-21 13：44:15',
+          'scrapId': '110',
+          'scrapLevel': ''
+        }
+      ]
+      // this.listLoading = true
+      // staffList(this.listQuery).then(response => {
+      //   if (response.data.records) {
+      //     this.list = response.data.records
+      //   } else {
+      //     this.list.splice(0, this.list.length)
+      //   }
+      //   this.total = response.data.total
+      //   this.listLoading = false
+      // })
+    },
+    goback() {
+      this.visible = false
+      this.$emit('refreshDataList')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/orderManage/order/order.vue b/src/views/orderManage/order/order.vue
new file mode 100644
index 0000000..2ff8bf4
--- /dev/null
+++ b/src/views/orderManage/order/order.vue
@@ -0,0 +1,237 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-26 14:15:49
+ * @Description:
+-->
+<template>
+  <div class="app-container">
+    <el-form
+      :model="formData"
+      :inline="true"
+      size="medium"
+      label-width="80px"
+    >
+      <el-form-item :label="$t('module.orderManage.order.keyword')" prop="name">
+        <el-input v-model="formData.name" :placeholder="$i18nForm(['placeholder.input', this.$t('module.orderManage.order.OrderName')])" style="width:200px" clearable />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="getList()"> {{ 'btn.search' | i18nFilter }} </el-button>
+        <el-button type="primary" @click="addNew()"> {{ 'btn.add' | i18nFilter }} </el-button>
+      </el-form-item>
+    </el-form>
+    <base-table
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    >
+      <method-btn
+        slot="handleBtn"
+        :width="trueWidth"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="formData.current"
+      :limit.sync="formData.size"
+      @pagination="getList()"
+    />
+    <order-add v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
+  </div>
+</template>
+
+<script>
+import { orderList, orderDelete } from '@/api/orderManage/order/order'
+import i18n from '@/lang'
+import orderAdd from './components/order-add'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import orderDetailBtn from './components/orderDetailBtn'
+import { timeFormatter } from '@/filters'
+import basicData from '@/filters/basicData'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+
+const tableBtn = [
+  {
+    type: 'issue',
+    btnName: 'routerTitle.order.orderManage.orderIssue'
+  },
+  {
+    type: 'edit',
+    btnName: 'btn.edit'
+  },
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  }
+]
+const tableProps = [
+  {
+    prop: 'createTime',
+    label: i18n.t('module.orderManage.order.createTime'),
+    filter: timeFormatter,
+    align: 'center'
+  },
+  {
+    prop: 'name',
+    label: i18n.t('module.orderManage.order.OrderName'),
+    align: 'center'
+  },
+  {
+    prop: 'orderNo',
+    label: i18n.t('module.orderManage.order.OrderCode'),
+    align: 'center'
+  },
+  {
+    prop: 'priority',
+    label: i18n.t('module.orderManage.order.priority'),
+    align: 'center',
+    filter: basicData('priority')
+  },
+  // {
+  //   prop: 'customerName',
+  //   label: i18n.t('module.orderManage.order.customer'),
+  //   align: 'center'
+  // },
+  {
+    prop: 'source',
+    label: i18n.t('module.orderManage.order.source'),
+    align: 'center',
+    filter: basicData('source')
+  },
+  {
+    prop: 'status',
+    label: i18n.t('module.orderManage.order.status'),
+    align: 'center',
+    filter: basicData('orderStatus')
+  },
+  {
+    prop: 'planQuantity',
+    label: i18n.t('module.orderManage.order.PlannedProcessingVolume'),
+    align: 'center'
+  },
+  {
+    prop: 'detail',
+    label: i18n.t('module.orderManage.order.detail'),
+    subcomponent: orderDetailBtn,
+    align: 'center'
+  }
+]
+
+export default {
+  name: 'ScrapInfo',
+  components: { Pagination, BaseTable, MethodBtn, orderAdd },
+  data() {
+    return {
+      addOrUpdateVisible: false,
+      tableBtn,
+      trueWidth: 280,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: false,
+      formData: {
+        name: '',
+        current: 1,
+        size: 10
+      },
+      listQuery: {
+        current: 1,
+        size: 10
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    handleClick(raw) {
+      if (raw.type === 'delete') {
+        if (raw.data.status !== 4) {
+          this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]？`, this.$t('module.basicData.visual.Tips'), {
+            confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+            cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+            type: 'warning'
+          }).then(() => {
+            orderDelete(raw.data.id).then(response => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.getList()
+                }
+              })
+            })
+          }).catch(() => {})
+        } else {
+          this.$message({
+            message: this.$t('module.orderManage.order.warnMessage'),
+            type: 'warning'
+          })
+        }
+      } else if (raw.type === 'edit') {
+        this.addNew(raw.data.id)
+      } else {
+        this.$router.push({
+          name: 'orderIssue',
+          query: {
+            id: raw.data.id
+          }
+        })
+      }
+    },
+    getList() {
+      this.listLoading = true
+      orderList(this.formData).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    },
+    // 新增 / 修改
+    addNew(id) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id)
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/orderManage/packingTags.vue b/src/views/orderManage/packingTags.vue
new file mode 100644
index 0000000..ccf0930
--- /dev/null
+++ b/src/views/orderManage/packingTags.vue
@@ -0,0 +1,183 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-02-27 14:39:57
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-06-22 16:25:52
+ * @Description:
+-->
+<template>
+  <div>
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <el-button style="margin-right:50px" type="success" @click="goback()">{{ 'btn.back' | i18nFilter }}</el-button>
+        <span><b>{{ $t('module.orderManage.order.WorkOrderCode')+'：'+stringfilter(dataForm.workOrderNo) }}</b></span>
+      </div>
+      <div class="text item">
+        <el-row :gutter="20">
+          <el-col :span="6"><div>{{ $t('module.orderManage.order.WorkOrderName')+'：'+stringfilter(dataForm.name) }}</div></el-col>
+          <el-col :span="6"><div>{{ $t('module.orderManage.order.status')+'：' }}{{ dataForm.status|commonFilter(basicData('workOrderStatus')) }}</div></el-col>
+          <el-col :span="6"><div>{{ $t('module.orderManage.workOrderDetail.workOrderSource')+'：' }}{{ dataForm.triggerOrigin|commonFilter(basicData('source')) }}</div></el-col>
+          <el-col :span="6"><div>{{ $t('module.orderManage.order.createTime')+'：'+timefilter(dataForm.createTime) }}</div></el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="6"><div>{{ $t('module.orderManage.order.PlannedProcessingVolume')+'：'+stringfilter(dataForm.planQuantity) }}</div></el-col>
+          <el-col :span="6"><div>{{ $t('module.orderManage.workOrderDetail.processingTechnology')+'：'+stringfilter(dataForm.processFlowName) }}</div></el-col>
+          <!-- <el-col :span="6"><div>{{ $t('module.orderManage.order.PlanningEndTime')+'：'+timefilter(dataForm.planFinishProduceTime) }}</div></el-col> -->
+        </el-row>
+      </div>
+    </el-card>
+    <base-table
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    />
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      @pagination="getList()"
+    />
+  </div>
+</template>
+
+<script>
+import i18n from '@/lang'
+import { workOrderDetail, packagingList } from '@/api/orderManage/workOrder/workOrder'
+import { timeFormatter } from '@/filters'
+import basicData from '@/filters/basicData'
+import BaseTable from '@/components/BaseTable'
+import detailBtn from './components/detailBtn'
+import Pagination from '@/components/Pagination'
+
+const tableProps = [
+  {
+    prop: 'boxNo',
+    label: 'boxID',
+    align: 'center'
+  },
+  {
+    prop: 'power',
+    label: 'power',
+    align: 'center'
+  },
+  {
+    prop: 'grade',
+    label: i18n.t('module.orderManage.packingTags.plateGrade'),
+    align: 'center'
+  },
+  {
+    prop: 'printTime',
+    label: i18n.t('module.orderManage.packingTags.PrintingTime'),
+    align: 'center',
+    filter: timeFormatter
+  },
+  {
+    prop: 'substrateQuantity',
+    label: i18n.t('module.orderManage.packingTags.moduleQuantity'),
+    align: 'center'
+  },
+  {
+    prop: 'remark',
+    label: i18n.t('module.orderManage.order.Remarks'),
+    align: 'center'
+  },
+  {
+    prop: 'opration',
+    label: i18n.t('module.orderManage.packingTags.opration'),
+    subcomponent: detailBtn
+  }
+]
+export default {
+  name: '',
+  filters: {
+    commonFilter: (source, filterType = a => a) => {
+      return filterType(source)
+    }
+  },
+  components: { BaseTable, Pagination },
+  data() {
+    return {
+      workOrderId: '',
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: false,
+      listQuery: {
+        current: 1,
+        size: 10
+      },
+      dataForm: {},
+      basicData
+    }
+  },
+  created() {
+    this.workOrderId = this.$route.query.id
+    this.init()
+  },
+  methods: {
+    init() {
+      this.dataForm = {}
+      workOrderDetail(this.workOrderId).then(res => {
+        this.dataForm = res.data
+      })
+      this.listQuery.workOrderId = this.workOrderId
+      this.getList()
+    },
+    getList() {
+      this.listLoading = true
+      packagingList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    },
+    goback() {
+      this.$router.go(-1)
+    },
+    timefilter(obj) {
+      return timeFormatter(obj).substring(0, timeFormatter(obj).lastIndexOf(' '))
+    },
+    stringfilter(objString) {
+      return objString || ''
+    }
+  }
+}
+</script>
+
+<style scoped>
+.text {
+    font-size: 18px;
+  }
+
+  .item {
+    margin-bottom: 18px;
+  }
+
+  .clearfix:before,
+  .clearfix:after {
+    display: table;
+    content: "";
+  }
+  .clearfix:after {
+    clear: both
+  }
+
+  .box-card {
+    font-size: 30px;
+    margin: auto;
+    margin-top: 20px;
+  }
+  .el-row {
+    margin-bottom: 20px;
+  }
+  .el-col {
+    border-radius: 4px;
+  }
+</style>
diff --git a/src/views/orderManage/powerClassification.vue b/src/views/orderManage/powerClassification.vue
new file mode 100644
index 0000000..cddb478
--- /dev/null
+++ b/src/views/orderManage/powerClassification.vue
@@ -0,0 +1,190 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-05-28 16:22:44
+ * @Description:
+-->
+<template>
+  <div class="app-container">
+    <head-form
+      :placeholder-name="placeholderName"
+      :key-name="keyName"
+      @getDataList="getList"
+      @add="addNew"
+    />
+    <base-table
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    >
+      <method-btn
+        slot="handleBtn"
+        :width="trueWidth"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      @pagination="getList()"
+    />
+    <powerClassification-add v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
+  </div>
+</template>
+
+<script>
+import { powerClassificationList, powerClassificationDelete } from '@/api/orderManage/powerClassification'
+import powerClassificationAdd from './components/powerClassification-add.vue'
+import HeadForm from '@/components/basicData/HeadForm'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import i18n from '@/lang'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+
+const tableBtn = [
+  {
+    type: 'edit',
+    btnName: 'btn.edit'
+  },
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  }
+]
+const tableProps = [
+  {
+    prop: 'parentName',
+    label: i18n.t('module.orderManage.powerClassification.parentClass'),
+    align: 'center'
+  },
+  {
+    prop: 'name',
+    label: i18n.t('module.orderManage.powerClassification.typeName'),
+    align: 'center'
+  },
+  {
+    prop: 'code',
+    label: i18n.t('module.orderManage.powerClassification.typeCode'),
+    align: 'center'
+  },
+  {
+    prop: 'remark',
+    label: i18n.t('module.orderManage.powerClassification.Remarks'),
+    align: 'center'
+  }
+]
+
+export default {
+  name: 'PowerClassification',
+  components: { Pagination, BaseTable, MethodBtn, HeadForm, powerClassificationAdd },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      keyName: i18n.t('module.basicData.visual.keyword'),
+      placeholderName: this.$t('module.orderManage.powerClassification.typeName'),
+      addOrUpdateVisible: false,
+      tableBtn,
+      trueWidth: 200,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        current: 1,
+        size: 10,
+        name: '',
+        code: ''
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    handleClick(raw) {
+      if (raw.type === 'delete') {
+        this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`, this.$t('module.basicData.visual.Tips'), {
+          confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+          cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+          type: 'warning'
+        }).then(() => {
+          powerClassificationDelete(raw.data.id).then(response => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+              }
+            })
+          })
+        }).catch(() => {})
+      } else {
+        this.addNew(raw.data.id)
+      }
+    },
+    getList(key) {
+      this.listLoading = true
+      this.listQuery.name = key
+      this.listQuery.code = key
+      powerClassificationList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    },
+    // 新增 / 修改
+    addNew(id) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id)
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/orderManage/substrateBatch.vue b/src/views/orderManage/substrateBatch.vue
new file mode 100644
index 0000000..5874fd6
--- /dev/null
+++ b/src/views/orderManage/substrateBatch.vue
@@ -0,0 +1,196 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-21 16:55:18
+ * @Description:
+-->
+<template>
+  <div class="app-container">
+    <head-form
+      :placeholder-name="placeholderName"
+      :key-name="keyName"
+      @getDataList="getList"
+      @add="addNew"
+    />
+    <base-table
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    >
+      <method-btn
+        slot="handleBtn"
+        :width="trueWidth"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      @pagination="getList()"
+    />
+  </div>
+</template>
+
+<script>import i18n from '@/lang'
+import { substrateBatchList, substrateBatchDelete } from '@/api/orderManage/substrateBatch'
+import HeadForm from '@/components/basicData/HeadForm'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import { timeFormatter } from '@/filters'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+
+const tableBtn = [
+  {
+    type: 'edit',
+    btnName: 'btn.edit'
+  },
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  },
+  {
+    type: 'detail',
+    btnName: 'btn.detail'
+  }
+]
+const tableProps = [
+  {
+    prop: 'createTime',
+    label: i18n.t('module.basicData.factory.createTime'),
+    filter: timeFormatter,
+    align: 'center'
+  },
+  {
+    prop: 'name',
+    label: i18n.t('module.orderManage.substrateBatch.batchName'),
+    align: 'center'
+  },
+  {
+    prop: 'code',
+    label: i18n.t('module.orderManage.substrateBatch.batchCode'),
+    align: 'center'
+  },
+  {
+    prop: 'remark',
+    label: i18n.t('module.basicData.visual.Remarks'),
+    align: 'center'
+  }
+]
+
+export default {
+  name: 'SubstrateBatch',
+  components: { Pagination, BaseTable, MethodBtn, HeadForm },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      keyName: i18n.t('module.basicData.visual.keyword'),
+      placeholderName: this.$t('module.orderManage.substrateBatch.batchCode'),
+      tableBtn,
+      trueWidth: 240,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        current: 1,
+        size: 10
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    handleClick(raw) {
+      console.log(raw)
+      if (raw.type === 'delete') {
+        this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`, this.$t('module.basicData.visual.Tips'), {
+          confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+          cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+          type: 'warning'
+        }).then(() => {
+          substrateBatchDelete(raw.data.id).then(response => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+              }
+            })
+          })
+        }).catch(() => {})
+      } else if (raw.type === 'edit') {
+        this.addNew(raw.data.id)
+      } else {
+        this.addNew(raw.data.id, true)
+      }
+    },
+    getList(key) {
+      this.listLoading = true
+      this.listQuery.name = key
+      this.listQuery.code = key
+      substrateBatchList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    },
+    // 新增 / 修改
+    addNew(id, isdetail) {
+      this.$router.push({
+        name: 'substrateBatchAttr',
+        query: {
+          id: id,
+          isdetail: isdetail
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/orderManage/visualization.vue b/src/views/orderManage/visualization.vue
new file mode 100644
index 0000000..b7a2465
--- /dev/null
+++ b/src/views/orderManage/visualization.vue
@@ -0,0 +1,142 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-07-23 09:33:49
+ * @LastEditTime: 2021-07-23 10:40:57
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \mt-bus-fe\src\views\orderManage\visualization.vue
+-->
+<template>
+  <div>
+    <el-row :gutter="20">
+      <el-col>
+        <div>
+          <echarts-bar-a
+            id="bar1"
+            ref="BarRef"
+            :bar-style="barStyle"
+            :title="barTitle"
+            :legend="legend"
+            :x-axis="xAxis"
+            :y-axis="yAxis"
+            :series="series"
+            @refreshDataList="getList"
+          />
+        </div>
+      </el-col>
+      <el-col>
+        <div>
+          <echarts-bar-b
+            id="bar2"
+            ref="BarRef"
+            :bar-style="barStyle"
+            :title="barTitle1"
+            :legend="legend1"
+            :x-axis="xAxis1"
+            :y-axis="yAxis1"
+            :series="series1"
+            @refreshDataList="getList"
+          />
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import echartsBarA from './components/echarts-Bar.vue'
+import echartsBarB from './components/echarts-Bar.vue'
+export default {
+  components: {
+    echartsBarA,
+    echartsBarB
+  },
+  data() {
+    return {
+      activeIndex: '1',
+      // 假数据
+      barStyle: {
+        height: '500px',
+        width: '100%',
+        margin: '20px'
+      },
+      barTitle: {
+        text: 'Erp To Mes物料柱状图'
+      },
+      legend: {
+        data: []
+      },
+      xAxis: {
+        type: 'category',
+        data: ['q', '1'],
+        name: '物料编码',
+        axisLabel: {
+          interval: 0,
+          formatter: function(value) {
+            return value.split('').join('\n')
+          }
+        }
+      },
+      yAxis: {
+        type: 'value',
+        name: '数量'
+      },
+      series: [{
+        data: [1, 1],
+        type: 'scatter',
+        showBackground: true,
+        backgroundStyle: {
+          color: 'rgba(220, 220, 220, 0.8)'
+        }
+      }],
+      barTitle1: {
+        text: 'Erp To Mes订单柱状图'
+      },
+      legend1: {
+        data: []
+      },
+      xAxis1: {
+        type: 'category',
+        data: ['1', '2'],
+        name: '订单名称',
+        axisLabel: {
+          interval: 0,
+          formatter: function(value) {
+            return value.split('').join('\n')
+          }
+        }
+      },
+      yAxis1: {
+        type: 'value',
+        name: '数量'
+      },
+      series1: [{
+        data: [1, 1],
+        type: 'scatter',
+        showBackground: true,
+        backgroundStyle: {
+          color: 'rgba(220, 220, 220, 0.8)'
+        }
+      }]
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    getList() {
+      if (this.formData.timeSlot) {
+        this.formData.startTime = this.formData.timeSlot[0]
+        this.formData.endTime = this.formData.timeSlot[1]
+      } else {
+        this.formData.startTime = ''
+        this.formData.endTime = ''
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/views/orderManage/workOrder/components/monitor-chart.vue b/src/views/orderManage/workOrder/components/monitor-chart.vue
new file mode 100644
index 0000000..b62ac71
--- /dev/null
+++ b/src/views/orderManage/workOrder/components/monitor-chart.vue
@@ -0,0 +1,68 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-03-03 16:39:34
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-04 10:10:45
+ * @Description:
+-->
+<template>
+  <div id="monitorChart" :style="{width: '700px', height: '500px'}" style="margin-left:10%" />
+</template>
+
+<script>
+import echarts from 'echarts'
+
+export default {
+  props: {
+    workOrderId: {
+      type: String,
+      default: () => {
+        return ''
+      }
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    init() {
+      this.chart = echarts.init(document.getElementById('monitorChart'))
+
+      this.chart.setOption({
+        color: '#91cc75',
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        xAxis: {
+          type: 'category',
+          data: ['设备1', '设备2', '设备3', '设备4', '设备5', '设备6', '设备7']
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [{
+          name: '电量消耗',
+          data: [323.234, 323.841, 755.45, 251.453, 454.786, 484.786, 154.786],
+          barWidth: '60%',
+          type: 'bar'
+        }]
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/orderManage/workOrder/components/monitor-table.vue b/src/views/orderManage/workOrder/components/monitor-table.vue
new file mode 100644
index 0000000..0bf4c82
--- /dev/null
+++ b/src/views/orderManage/workOrder/components/monitor-table.vue
@@ -0,0 +1,134 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-06 17:48:35
+ * @Description:
+-->
+<template>
+  <base-table
+    :page="listQuery.current"
+    :limit="listQuery.size"
+    :table-config="tableProps"
+    :table-data="list"
+    :is-loading="listLoading"
+  />
+</template>
+
+<script>
+import i18n from '@/lang'
+import BaseTable from '@/components/BaseTable'
+// import { timeFormatter } from '@/filters'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+const tableProps = [
+  {
+    prop: 'name',
+    label: i18n.t('module.orderManage.order.EquipmentName')
+    // filter: timeFormatter
+  },
+  {
+    prop: 'consume',
+    label: i18n.t('module.orderManage.order.PowerConsumption'),
+    align: 'center'
+  }
+]
+
+export default {
+  name: '',
+  components: { BaseTable },
+  props: {
+    workOrderId: {
+      type: String,
+      default: () => {
+        return ''
+      }
+    }
+  },
+  data() {
+    return {
+      tableProps,
+      list: [],
+      listLoading: false,
+      listQuery: {
+        current: 1,
+        size: 10
+      }
+    }
+  },
+  methods: {
+    init() {
+      this.listQuery = {
+        current: 1,
+        size: 10
+      }
+      this.getList()
+    },
+    getList() {
+      this.list = [
+        {
+          'name': '设备1',
+          'consume': '323,234'
+        },
+        {
+          'name': '设备2',
+          'consume': '323.841'
+        },
+        {
+          'name': '设备3',
+          'consume': '755.45'
+        },
+        {
+          'name': '设备4',
+          'consume': '251.453'
+        },
+        {
+          'name': '设备5',
+          'consume': '454.786'
+        },
+        {
+          'name': '设备6',
+          'consume': '484.786'
+        },
+        {
+          'name': '设备7',
+          'consume': '154.786'
+        }
+      ]
+      // this.listLoading = true
+      // staffList(this.listQuery).then(response => {
+      //   if (response.data.records) {
+      //     this.list = response.data.records
+      //   } else {
+      //     this.list.splice(0, this.list.length)
+      //   }
+      //   this.listLoading = false
+      // })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/orderManage/workOrder/components/verify-craft.vue b/src/views/orderManage/workOrder/components/verify-craft.vue
new file mode 100644
index 0000000..e178fd9
--- /dev/null
+++ b/src/views/orderManage/workOrder/components/verify-craft.vue
@@ -0,0 +1,100 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-02-27 14:49:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-06 19:22:29
+ * @Description: 工单验证
+-->
+<template>
+  <div>
+    <el-card class="box-card">
+      <div class="text item">
+        <el-row>
+          <el-col :span="12">
+            <el-row :gutter="20">
+              <el-col :span="23"><div class="title">{{ $t('module.orderManage.FalseData.FalseData22') }}</div></el-col>
+              <el-col :span="23"><div>{{ $t('module.orderManage.FalseData.FalseData23') }}</div></el-col>
+              <el-col :span="23"><div>{{ $t('module.orderManage.FalseData.FalseData24') }}</div></el-col>
+              <el-col :span="23"><div>{{ $t('module.orderManage.FalseData.FalseData25') }}</div></el-col>
+              <el-col :span="23"><div>{{ $t('module.orderManage.FalseData.FalseData26') }}</div></el-col>
+              <el-col :span="23"><div>{{ $t('module.orderManage.FalseData.FalseData5') }}</div></el-col>
+            </el-row>
+          </el-col>
+          <el-col :span="12">
+            <el-row :gutter="20">
+              <el-col :span="23"><div class="title">{{ $t('module.orderManage.FalseData.FalseData27') }}</div></el-col>
+              <el-col :span="23"><div>{{ $t('module.orderManage.FalseData.FalseData23') }}</div></el-col>
+              <el-col :span="23"><div>{{ $t('module.orderManage.FalseData.FalseData524') }}</div></el-col>
+              <el-col :span="23"><div>{{ $t('module.orderManage.FalseData.FalseData25') }}</div></el-col>
+              <el-col :span="23"><div>{{ $t('module.orderManage.FalseData.FalseData28') }}</div></el-col>
+              <el-col :span="23"><div>{{ $t('module.orderManage.FalseData.FalseData29') }}</div></el-col>
+            </el-row>
+          </el-col>
+        </el-row>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: '',
+  components: { },
+  props: {
+    workOrderId: {
+      type: String,
+      default: () => {
+        return ''
+      }
+    }
+  },
+  data() {
+    return {
+    }
+  },
+  created() {
+  },
+  methods: {
+    init() {
+      this.getList()
+    },
+    getList() {
+      // this.listLoading = true
+      // staffList(this.listQuery).then(response => {
+      //   if (response.data.records) {
+      //     this.list = response.data.records
+      //   } else {
+      //     this.list.splice(0, this.list.length)
+      //   }
+      //   this.listLoading = false
+      // })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.text {
+    font-size: 18px;
+  }
+
+  .item {
+    margin-bottom: 18px;
+  }
+
+  .box-card {
+    width: 80%;
+    font-size: 30px;
+    margin: auto;
+    margin-top: 20px;
+  }
+  .el-col {
+    border-radius: 4px;
+    margin-bottom: 20px;
+  }
+  .title{
+    font-size: 40px;
+    color: #1588F5;
+  }
+</style>
diff --git a/src/views/orderManage/workOrder/components/verify-equipment.vue b/src/views/orderManage/workOrder/components/verify-equipment.vue
new file mode 100644
index 0000000..df657a5
--- /dev/null
+++ b/src/views/orderManage/workOrder/components/verify-equipment.vue
@@ -0,0 +1,138 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-06 19:17:31
+ * @Description:
+-->
+<template>
+  <base-table
+    :page="listQuery.current"
+    :limit="listQuery.size"
+    :table-config="tableProps"
+    :table-data="list"
+    :is-loading="listLoading"
+  />
+</template>
+
+<script>
+import i18n from '@/lang'
+import BaseTable from '@/components/BaseTable'
+// import { timeFormatter } from '@/filters'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+const tableProps = [
+  {
+    prop: 'name',
+    label: i18n.t('module.orderManage.order.EquipmentName')
+    // filter: timeFormatter
+  },
+  {
+    prop: 'code',
+    label: i18n.t('module.orderManage.VerifyTable.EquipmentCode'),
+    align: 'center'
+  },
+  {
+    prop: 'abbr',
+    label: i18n.t('module.orderManage.VerifyTable.equipmentAbbreviation')
+  },
+  {
+    prop: 'status',
+    label: i18n.t('module.orderManage.order.status')
+  },
+  {
+    prop: 'formula',
+    label: i18n.t('module.orderManage.VerifyTable.EquipmentFormula')
+  },
+  {
+    prop: 'formula1',
+    label: i18n.t('module.orderManage.VerifyTable.ProcessFormulaRequir')
+  },
+  {
+    prop: 'same',
+    label: i18n.t('module.orderManage.VerifyTable.IsSame')
+  }
+]
+
+export default {
+  name: '',
+  components: { BaseTable },
+  props: {
+    workOrderId: {
+      type: String,
+      default: () => {
+        return ''
+      }
+    }
+  },
+  data() {
+    return {
+      tableProps,
+      list: [],
+      listLoading: false,
+      listQuery: {
+        current: 1,
+        size: 10
+      }
+    }
+  },
+  methods: {
+    init() {
+      this.listQuery = {
+        current: 1,
+        size: 10
+      }
+      this.getList()
+    },
+    getList() {
+      this.list = [
+        {
+          'name': '承压机',
+          'code': 'SB001',
+          'abbr': 'CYS',
+          'status': '运行正常'
+        },
+        {
+          'name': '传输线',
+          'code': 'SB002',
+          'abbr': 'TTS',
+          'status': '报警'
+        }
+      ]
+      // this.listLoading = true
+      // staffList(this.listQuery).then(response => {
+      //   if (response.data.records) {
+      //     this.list = response.data.records
+      //   } else {
+      //     this.list.splice(0, this.list.length)
+      //   }
+      //   this.listLoading = false
+      // })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/orderManage/workOrder/components/verify-group.vue b/src/views/orderManage/workOrder/components/verify-group.vue
new file mode 100644
index 0000000..299b9f1
--- /dev/null
+++ b/src/views/orderManage/workOrder/components/verify-group.vue
@@ -0,0 +1,139 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-06 19:34:39
+ * @Description:
+-->
+<template>
+  <base-table
+    :page="listQuery.current"
+    :limit="listQuery.size"
+    :table-config="tableProps"
+    :table-data="list"
+    :is-loading="listLoading"
+  />
+</template>
+
+<script>
+import i18n from '@/lang'
+import BaseTable from '@/components/BaseTable'
+// import { timeFormatter } from '@/filters'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+const tableProps = [
+  {
+    prop: 'name',
+    label: i18n.t('module.orderManage.VerifyTable.teamName')
+    // filter: timeFormatter
+  },
+  {
+    prop: 'leader',
+    label: i18n.t('module.orderManage.VerifyTable.teamLeader'),
+    align: 'center'
+  },
+  {
+    prop: 'num',
+    label: i18n.t('module.orderManage.VerifyTable.number')
+  },
+  {
+    prop: 'major',
+    label: i18n.t('module.orderManage.VerifyTable.professional')
+  },
+  {
+    prop: 'wtime',
+    label: i18n.t('module.orderManage.VerifyTable.workingHours')
+  }
+]
+
+export default {
+  name: '',
+  components: { BaseTable },
+  props: {
+    workOrderId: {
+      type: String,
+      default: () => {
+        return ''
+      }
+    }
+  },
+  data() {
+    return {
+      tableProps,
+      list: [],
+      listLoading: false,
+      listQuery: {
+        current: 1,
+        size: 10
+      }
+    }
+  },
+  methods: {
+    init() {
+      this.listQuery = {
+        current: 1,
+        size: 10
+      }
+      this.getList()
+    },
+    getList() {
+      this.list = [
+        {
+          'name': '班组1',
+          'leader': '张三',
+          'num': '21',
+          'major': '电工，维修工，计划员，仓管员',
+          'wtime': '2020-11-26 19:12:37'
+        },
+        {
+          'name': '班组2',
+          'leader': '卫升',
+          'num': '12',
+          'major': '电工，维修工，仓管员',
+          'wtime': '2020-11-11 06:12:57'
+        },
+        {
+          'name': '班组3',
+          'leader': '李渊',
+          'num': '32',
+          'major': '会计，审核员',
+          'wtime': '2020-11-05 12:10:17'
+        }
+      ]
+      // this.listLoading = true
+      // staffList(this.listQuery).then(response => {
+      //   if (response.data.records) {
+      //     this.list = response.data.records
+      //   } else {
+      //     this.list.splice(0, this.list.length)
+      //   }
+      //   this.listLoading = false
+      // })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/orderManage/workOrder/components/verify-materiel.vue b/src/views/orderManage/workOrder/components/verify-materiel.vue
new file mode 100644
index 0000000..e2c6cde
--- /dev/null
+++ b/src/views/orderManage/workOrder/components/verify-materiel.vue
@@ -0,0 +1,115 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-06 19:25:55
+ * @Description:
+-->
+<template>
+  <base-table
+    :page="listQuery.current"
+    :limit="listQuery.size"
+    :table-config="tableProps"
+    :table-data="list"
+    :is-loading="listLoading"
+  />
+</template>
+
+<script>
+import i18n from '@/lang'
+import BaseTable from '@/components/BaseTable'
+// import { timeFormatter } from '@/filters'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+const tableProps = [
+  {
+    prop: 'name',
+    label: i18n.t('module.orderManage.VerifyTable.materielName')
+    // filter: timeFormatter
+  },
+  {
+    prop: 'code',
+    label: i18n.t('module.orderManage.VerifyTable.materielCode'),
+    align: 'center'
+  },
+  {
+    prop: 'spec',
+    label: i18n.t('module.orderManage.VerifyTable.Spec')
+  }
+]
+
+export default {
+  name: '',
+  components: { BaseTable },
+  props: {
+    workOrderId: {
+      type: String,
+      default: () => {
+        return ''
+      }
+    }
+  },
+  data() {
+    return {
+      tableProps,
+      list: [],
+      listLoading: false,
+      listQuery: {
+        current: 1,
+        size: 10
+      }
+    }
+  },
+  methods: {
+    init() {
+      this.listQuery = {
+        current: 1,
+        size: 10
+      }
+      this.getList()
+    },
+    getList() {
+      this.list = [
+        {
+          'name': '001油漆',
+          'code': 'YQ-110',
+          'spec': '30D * 11B'
+        }
+      ]
+      // this.listLoading = true
+      // staffList(this.listQuery).then(response => {
+      //   if (response.data.records) {
+      //     this.list = response.data.records
+      //   } else {
+      //     this.list.splice(0, this.list.length)
+      //   }
+      //   this.listLoading = false
+      // })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/orderManage/workOrder/components/verify-plate.vue b/src/views/orderManage/workOrder/components/verify-plate.vue
new file mode 100644
index 0000000..050c21d
--- /dev/null
+++ b/src/views/orderManage/workOrder/components/verify-plate.vue
@@ -0,0 +1,99 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-02-27 14:49:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-03 16:28:15
+ * @Description: 工单验证
+-->
+<template>
+  <div>
+    <el-card class="box-card">
+      <div class="text item">
+        <el-row>
+          <el-col :span="12">
+            <el-row :gutter="20">
+              <el-col :span="23"><div class="title">{{ $t('module.orderManage.FalseData.FalseData31') }}</div></el-col>
+              <el-col :span="23"><div>{{ $t('module.orderManage.FalseData.FalseData32') }}</div></el-col>
+              <el-col :span="23"><div>{{ $t('module.orderManage.FalseData.FalseData33') }}</div></el-col>
+              <el-col :span="23"><div>{{ $t('module.orderManage.FalseData.FalseData34') }}</div></el-col>
+            </el-row>
+          </el-col>
+          <el-col :span="12">
+            <el-row :gutter="20">
+              <el-col :span="23"><div class="title">{{ $t('module.orderManage.FalseData.FalseData38') }}</div></el-col>
+              <el-col :span="23"><div>{{ $t('module.orderManage.FalseData.FalseData35') }}</div></el-col>
+              <el-col :span="23"><div>{{ $t('module.orderManage.FalseData.FalseData33') }}</div></el-col>
+              <el-col :span="23"><div>{{ $t('module.orderManage.FalseData.FalseData36') }}</div></el-col>
+            </el-row>
+            <el-row :gutter="20">
+              <el-col :span="23"><div>{{ $t('module.orderManage.FalseData.FalseData37') }}</div></el-col>
+            </el-row>
+          </el-col>
+        </el-row>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: '',
+  components: { },
+  props: {
+    workOrderId: {
+      type: String,
+      default: () => {
+        return ''
+      }
+    }
+  },
+  data() {
+    return {
+    }
+  },
+  created() {
+  },
+  methods: {
+    init() {
+      this.getList()
+    },
+    getList() {
+      // this.listLoading = true
+      // staffList(this.listQuery).then(response => {
+      //   if (response.data.records) {
+      //     this.list = response.data.records
+      //   } else {
+      //     this.list.splice(0, this.list.length)
+      //   }
+      //   this.listLoading = false
+      // })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.text {
+    font-size: 18px;
+  }
+
+  .item {
+    margin-bottom: 18px;
+  }
+
+  .box-card {
+    width: 80%;
+    font-size: 30px;
+    margin: auto;
+    margin-top: 20px;
+  }
+  .el-col {
+    border-radius: 4px;
+    margin-bottom: 20px;
+  }
+  .title{
+    font-size: 40px;
+    color: #1588F5;
+  }
+</style>
diff --git a/src/views/orderManage/workOrder/components/workOrder-add.vue b/src/views/orderManage/workOrder/components/workOrder-add.vue
new file mode 100644
index 0000000..c5a5545
--- /dev/null
+++ b/src/views/orderManage/workOrder/components/workOrder-add.vue
@@ -0,0 +1,269 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-02-26 15:32:13
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-25 16:33:35
+ * @Description:
+-->
+<template>
+  <el-dialog
+    :title="!dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter"
+    :visible.sync="visible"
+    @open="onOpen"
+    @close="onClose"
+  >
+    <el-row :gutter="10">
+      <el-form
+        ref="dataForm"
+        :model="dataForm"
+        :rules="rules"
+        size="medium"
+        label-width="96px"
+        label-position="right"
+      >
+        <el-col :span="8">
+          <el-form-item :label="$t('module.orderManage.order.WorkOrderName')" prop="name">
+            <el-input v-model="dataForm.name" :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.WorkOrderName')])" clearable :style="{width: '100%'}" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item :label="$t('module.orderManage.order.WorkOrderCode')" prop="workOrderNo">
+            <el-input v-model="dataForm.workOrderNo" :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.WorkOrderCode')])" clearable :style="{width: '100%'}" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item :label="$t('module.orderManage.order.WorkOrderType')" prop="gtype">
+            <el-select v-model="dataForm.gtype" :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.WorkOrderType')])" clearable :style="{width: '100%'}">
+              <el-option
+                v-for="(item, index) in gtypeOptions"
+                :key="index"
+                :label="item.label"
+                :value="item.value"
+                :disabled="item.disabled"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item :label="$t('module.orderManage.order.PlannedProcessingVolume')" prop="planQuantity">
+            <el-input-number v-model="dataForm.planQuantity" :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.PlannedProcessingVolume')])" :step="1" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item :label="$t('module.orderManage.order.unit')" prop="unit">
+            <el-input v-model="dataForm.unit" :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.unit')])" clearable :style="{width: '100%'}" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item :label="$t('module.orderManage.order.priority')" prop="priority">
+            <el-select v-model="dataForm.priority" :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.priority')])" clearable :style="{width: '100%'}">
+              <el-option
+                v-for="(item, index) in youxianjiOptions"
+                :key="index"
+                :label="item.label"
+                :value="item.value"
+                :disabled="item.disabled"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item :label="$t('module.orderManage.order.ProductProcess')" prop="gongyi">
+            <el-select v-model="dataForm.gongyi" :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.ProductProcess')])" clearable :style="{width: '100%'}">
+              <el-option
+                v-for="(item, index) in gongyiOptions"
+                :key="index"
+                :label="item.label"
+                :value="item.value"
+                :disabled="item.disabled"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item :label="$t('module.orderManage.order.PlanningStartTime')" prop="planStartProduceTime">
+            <el-date-picker
+              v-model="dataForm.planStartProduceTime"
+              type="date"
+              format="yyyy-MM-dd"
+              value-format="yyyy-MM-dd"
+              :style="{width: '100%'}"
+              :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.PlanningStartTime')])"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item :label="$t('module.orderManage.order.PlanningEndTime')" prop="planFinishProduceTime">
+            <el-date-picker
+              v-model="dataForm.planFinishProduceTime"
+              type="date"
+              format="yyyy-MM-dd"
+              value-format="yyyy-MM-dd"
+              :style="{width: '100%'}"
+              :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.PlanningEndTime')])"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item :label="$t('module.orderManage.order.ProductName')" prop="chanpinname">
+            <el-select v-model="dataForm.chanpinname" :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.ProductName')])" clearable :style="{width: '100%'}">
+              <el-option
+                v-for="(item, index) in chanpinnameOptions"
+                :key="index"
+                :label="item.label"
+                :value="item.value"
+                :disabled="item.disabled"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item :label="$t('module.orderManage.order.Remarks')" prop="remark">
+            <el-input v-model="dataForm.remark" :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.Remarks')])" clearable :style="{width: '100%'}" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item :label="$t('module.orderManage.order.Description')" prop="description">
+            <el-input v-model="dataForm.description" :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.Description')])" clearable :style="{width: '100%'}" />
+          </el-form-item>
+        </el-col>
+      </el-form>
+    </el-row>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { workOrderDetail, workOrderUpdate, workOrderAdd, workOrderCode } from '@/api/orderManage/workOrder/workOrder'
+
+export default {
+  components: {},
+  inheritAttrs: false,
+  props: [],
+  data() {
+    return {
+      visible: false,
+      dataForm: {
+        id: 0,
+        name: '',
+        workOrderNo: '',
+        gtype: '',
+        planQuantity: '',
+        unit: '',
+        priority: '',
+        gongyi: '',
+        planStartProduceTime: '',
+        planFinishProduceTime: '',
+        chanpinname: '',
+        remark: '',
+        description: ''
+      },
+      rules: {
+        name: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('module.orderManage.order.WorkOrderName')]),
+          trigger: 'blur'
+        }]
+      },
+      gtypeOptions: [{
+        'label': '测试工单',
+        'value': 1
+      }, {
+        'label': '重工工单',
+        'value': 2
+      }, {
+        'label': '正常工单',
+        'value': 0
+      }],
+      youxianjiOptions: [{
+        'label': '正常',
+        'value': 1
+      }, {
+        'label': '高',
+        'value': 2
+      }, {
+        'label': '低',
+        'value': 0
+      }],
+      gongyiOptions: [{
+        'label': '工艺1',
+        'value': 1
+      }, {
+        'label': '工艺2',
+        'value': 2
+      }],
+      chanpinnameOptions: [{
+        'label': '产品1',
+        'value': 1
+      }, {
+        'label': '产品2',
+        'value': 2
+      }]
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {
+    init(id) {
+      this.dataForm.id = id || ''
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          workOrderDetail(this.dataForm.id).then(res => {
+            this.dataForm = res.data
+          })
+        } else {
+          workOrderCode().then(res => {
+            this.dataForm.workOrderNo = res.data
+          })
+        }
+      })
+    },
+    onOpen() {},
+    onClose() {
+      this.$refs['dataForm'].resetFields()
+    },
+    dataFormSubmit() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          const data = this.dataForm
+          if (this.dataForm.id) {
+            workOrderUpdate(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          } else {
+            workOrderAdd(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          }
+        }
+      })
+    }
+  }
+}
+
+</script>
diff --git a/src/views/orderManage/workOrder/components/workOrder-close.vue b/src/views/orderManage/workOrder/components/workOrder-close.vue
new file mode 100644
index 0000000..ae0ee1d
--- /dev/null
+++ b/src/views/orderManage/workOrder/components/workOrder-close.vue
@@ -0,0 +1,97 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-04-15 14:00:51
+ * @enName:
+-->
+<template>
+  <el-dialog
+    :title="'routerTitle.order.workOrderManage.closeworkorder' | i18nFilter"
+    :visible.sync="visible"
+  >
+    <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="110px" @keyup.enter.native="dataFormSubmit()">
+      <el-form-item :label="$t('module.orderManage.order.CompletionTime')" prop="finishProduceTime">
+        <el-date-picker
+          v-model="dataForm.finishProduceTime"
+          type="date"
+          format="yyyy-MM-dd"
+          :style="{width: '50%'}"
+          :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.CompletionTime')])"
+          clearable
+        />
+      </el-form-item>
+      <el-form-item :label="$t('module.orderManage.order.ActualFinishedProduct')" prop="actualQuantity">
+        <el-input-number v-model="dataForm.actualQuantity" :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.ActualFinishedProduct')])" :step="1" />
+      </el-form-item>
+      <el-form-item :label="$t('module.orderManage.order.DamageQuantityPlate')" prop="scrapQuantity">
+        <el-input-number v-model="dataForm.scrapQuantity" :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.DamageQuantityPlate')])" :step="1" />
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { workOrderUpdate } from '@/api/orderManage/workOrder/workOrder'
+export default {
+  props: {
+    workOrderId: {
+      type: String,
+      default: () => {
+        return ''
+      }
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      dataForm: {
+        finishProduceTime: '',
+        actualQuantity: '',
+        scrapQuantity: ''
+      },
+      closeData: {},
+      dataRule: {
+        finishProduceTime: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.orderManage.order.CompletionTime')]), trigger: 'change' }
+        ]
+      }
+    }
+  },
+  methods: {
+    init(dataForm) {
+      this.visible = true
+      this.closeData = dataForm
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+      })
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          this.closeData.status = 9
+          this.closeData.finishProduceTime = this.dataForm.finishProduceTime
+          this.closeData.actualQuantity = this.dataForm.actualQuantity
+          this.closeData.scrapQuantity = this.dataForm.scrapQuantity
+          workOrderUpdate(this.closeData).then(response => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.visible = false
+                this.$emit('refreshDataList')
+              }
+            })
+          })
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/orderManage/workOrder/components/workOrder-issue.vue b/src/views/orderManage/workOrder/components/workOrder-issue.vue
new file mode 100644
index 0000000..d539fb0
--- /dev/null
+++ b/src/views/orderManage/workOrder/components/workOrder-issue.vue
@@ -0,0 +1,207 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-25 16:34:30
+ * @Description:
+-->
+<template>
+  <el-dialog
+    :title="'routerTitle.order.workOrderManage.issueworkorder' | i18nFilter"
+    :visible.sync="visible"
+    :before-close="goback"
+    :append-to-body="true"
+    width="80%"
+  >
+    <el-form
+      ref="formData"
+      :rules="rules"
+      :model="formData"
+      :inline="true"
+      size="medium"
+      label-width="150px"
+    >
+      <el-form-item :label="$t('module.orderManage.order.destination')" prop="syncTarget">
+        <el-select v-model="formData.syncTarget" filterable :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.destination')])" clearable>
+          <el-option
+            v-for="item in issueDestination"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="issueworkorder()"> {{ 'routerTitle.order.workOrderManage.issueworkorder' | i18nFilter }} </el-button>
+      </el-form-item>
+    </el-form>
+    <base-table
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    />
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      @pagination="getList()"
+    />
+  </el-dialog>
+</template>
+
+<script>
+import { workOrderIssueList, syncAdd } from '@/api/orderManage/workOrder/workOrder'
+import i18n from '@/lang'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import { timeFormatter } from '@/filters'
+import basicData from '@/filters/basicData'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+const tableProps = [
+  {
+    prop: 'createTime',
+    label: i18n.t('module.orderManage.order.initiateTime'),
+    filter: timeFormatter,
+    align: 'center'
+  },
+  {
+    prop: 'syncTarget',
+    label: i18n.t('module.orderManage.order.destination'),
+    align: 'center',
+    filter: basicData('source')
+  },
+  {
+    prop: 'syncStatus',
+    label: i18n.t('module.orderManage.order.status'),
+    align: 'center',
+    filter: basicData('workStatus')
+  },
+  {
+    prop: 'reason',
+    label: i18n.t('module.orderManage.order.reason'),
+    align: 'center'
+  }
+]
+
+export default {
+  name: '',
+  components: { Pagination, BaseTable },
+  props: {
+    workOrderId: {
+      type: String,
+      default: () => {
+        return ''
+      }
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: false,
+      formData: {
+        syncTarget: ''
+      },
+      issueDestination: [
+        {
+          label: '00A',
+          value: 4
+        },
+        {
+          label: 'PID1',
+          value: 3
+        },
+        {
+          label: '00C',
+          value: 5
+        }
+      ],
+      listQuery: {
+        current: 1,
+        size: 10,
+        workOrderId: ''
+      },
+      rules: {
+        syncTarget: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('module.orderManage.order.destination')]),
+          trigger: 'change'
+        }]
+      }
+    }
+  },
+  methods: {
+    init(id) {
+      this.visible = true
+      this.listQuery.workOrderId = this.workOrderId
+      this.getList()
+    },
+    getList() {
+      this.listLoading = true
+      workOrderIssueList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    },
+    issueworkorder() {
+      this.$refs['formData'].validate((valid) => {
+        if (valid) {
+          const data = {
+            'wordOrderId': this.workOrderId,
+            'syncTarget': this.formData.syncTarget
+          }
+          syncAdd(data).then(response => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+              }
+            })
+          })
+        }
+      })
+    },
+    goback() {
+      this.visible = false
+      this.$emit('refreshDataList')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/orderManage/workOrder/components/workOrderBtn.vue b/src/views/orderManage/workOrder/components/workOrderBtn.vue
new file mode 100644
index 0000000..db4fd27
--- /dev/null
+++ b/src/views/orderManage/workOrder/components/workOrderBtn.vue
@@ -0,0 +1,33 @@
+<!--
+ * @Date: 2021-01-07 20:09:37
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-12 10:01:59
+ * @FilePath:
+ * @Description:
+-->
+<template>
+  <span>
+    <el-button type="text" size="small" @click="emitClick">{{ $t('module.orderManage.order.workOrderDetail') }}</el-button>
+  </span>
+</template>
+
+<script>
+export default {
+  props: {
+    injectData: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  methods: {
+    emitClick() {
+      this.$router.push({
+        name: 'workOrderOperation',
+        query: {
+          id: this.injectData.id
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/orderManage/workOrder/components/workOrderMonitor.vue b/src/views/orderManage/workOrder/components/workOrderMonitor.vue
new file mode 100644
index 0000000..f067a41
--- /dev/null
+++ b/src/views/orderManage/workOrder/components/workOrderMonitor.vue
@@ -0,0 +1,134 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-02-23 11:05:06
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-06 17:45:45
+ * @Description: 工单监控
+-->
+<template>
+  <div>
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <span><b>{{ $t('module.orderManage.order.WorkOrderProgress') }}</b></span>
+        <el-button style="float: right;" type="success" @click="goback()">{{ 'btn.back' | i18nFilter }}</el-button>
+      </div>
+      <div class="text item">
+        <el-row :gutter="20">
+          <el-col :span="6"><div>{{ $t('module.orderManage.FalseData.FalseData2') }}</div></el-col>
+          <el-col :span="6"><div>{{ $t('module.orderManage.FalseData.FalseData3') }}</div></el-col>
+          <el-col :span="6"><div>{{ $t('module.orderManage.FalseData.FalseData5') }}</div></el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="6"><div>{{ $t('module.orderManage.FalseData.FalseData6') }}</div></el-col>
+          <el-col :span="6"><div>{{ $t('module.orderManage.FalseData.FalseData8') }}</div></el-col>
+          <el-col :span="6"><div>{{ $t('module.orderManage.FalseData.FalseData9') }}</div></el-col>
+        </el-row>
+      </div>
+      <div style="width:50%">
+        <el-progress :text-inside="true" :stroke-width="26" :percentage="78" />
+      </div>
+    </el-card>
+    <el-card>
+      <div slot="header" class="clearfix">
+        <span><b>{{ $t('module.orderManage.order.energyConsumption') }}</b></span>
+      </div>
+      <el-menu
+        :default-active="activeIndex"
+        mode="horizontal"
+        background-color="#545c64"
+        text-color="#fff"
+        active-text-color="#ffd04b"
+        @select="handleSelect"
+      >
+        <el-menu-item index="1">{{ $t('module.orderManage.order.energyConsumptionChart') }}</el-menu-item>
+        <el-menu-item index="2">{{ $t('module.orderManage.order.energyConsumptionTable') }}</el-menu-item>
+      </el-menu>
+    </el-card>
+    <monitor-chart v-if="chartVisible" ref="monitorChart" :work-order-id="workOrderId" @refreshDataList="handleClick" />
+    <monitor-table v-if="tableVisible" ref="monitorTable" :work-order-id="workOrderId" @refreshDataList="handleClick" />
+  </div>
+</template>
+
+<script>
+import monitorChart from './monitor-chart'
+import monitorTable from './monitor-table'
+
+export default {
+  name: '',
+  components: { monitorChart, monitorTable },
+  data() {
+    return {
+      chartVisible: false,
+      tableVisible: false,
+      workOrderId: '',
+      activeIndex: '1'
+    }
+  },
+  created() {
+    this.workOrderId = this.$route.query.id
+    this.handleSelect('1')
+  },
+  methods: {
+    handleClick() {
+      // this.addOrUpdateVisible = true
+      // this.$nextTick(() => {
+      //   this.$refs.addOrUpdate.init(id)
+      // })
+    },
+    handleSelect(key, keyPath) {
+      this.chartVisible = false
+      this.tableVisible = false
+      switch (key) {
+        case '1':
+          this.chartVisible = true
+          this.$nextTick(() => {
+            this.$refs.monitorChart.init()
+          })
+          break
+        case '2':
+          this.tableVisible = true
+          this.$nextTick(() => {
+            this.$refs.monitorTable.init()
+          })
+          break
+      }
+    },
+    goback() {
+      this.$router.go(-1)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.text {
+    font-size: 18px;
+  }
+
+  .item {
+    margin-bottom: 18px;
+  }
+
+  .clearfix:before,
+  .clearfix:after {
+    display: table;
+    content: "";
+  }
+  .clearfix:after {
+    clear: both
+  }
+
+  .box-card {
+    width: 70%;
+    font-size: 20px;
+    margin: auto;
+    margin-top: 20px;
+    margin-bottom: 20px;
+  }
+  .el-row {
+    margin-bottom: 20px;
+  }
+  .el-col {
+    border-radius: 4px;
+  }
+</style>
diff --git a/src/views/orderManage/workOrder/components/workOrderOperation.vue b/src/views/orderManage/workOrder/components/workOrderOperation.vue
new file mode 100644
index 0000000..8805f57
--- /dev/null
+++ b/src/views/orderManage/workOrder/components/workOrderOperation.vue
@@ -0,0 +1,186 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-02-27 14:39:57
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-07-20 14:56:35
+ * @Description:
+-->
+<template>
+  <div>
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <el-button style="margin-right:50px" type="success" @click="goback()">{{ 'btn.back' | i18nFilter }}</el-button>
+        <span><b>{{ $t('module.orderManage.order.WorkOrderCode')+'：'+stringfilter(dataForm.workOrderNo) }}</b></span>
+      </div>
+      <div class="text item">
+        <el-row :gutter="20">
+          <el-col :span="6"><div>{{ $t('module.orderManage.order.WorkOrderName')+'：'+stringfilter(dataForm.name) }}</div></el-col>
+          <el-col :span="6"><div>{{ $t('module.orderManage.order.status')+'：' }}{{ dataForm.status|commonFilter(basicData('workOrderStatus')) }}</div></el-col>
+          <el-col :span="6"><div>{{ $t('module.orderManage.workOrderDetail.workOrderSource')+'：' }}{{ dataForm.triggerOrigin|commonFilter(basicData('source')) }}</div></el-col>
+          <el-col :span="6"><div>{{ $t('module.orderManage.order.createTime')+'：'+timefilter(dataForm.createTime) }}</div></el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="6"><div>{{ $t('module.orderManage.order.PlannedProcessingVolume')+'：'+stringfilter(dataForm.planQuantity) }}</div></el-col>
+          <el-col :span="6"><div>{{ $t('module.orderManage.workOrderDetail.processingTechnology')+'：'+stringfilter(dataForm.processFlowName) }}</div></el-col>
+          <el-col :span="6"><div>{{ $t('module.orderManage.order.StartTime')+'：'+timefilter(dataForm.startProduceTime) }}</div></el-col>
+          <el-col :span="6"><div>{{ $t('module.orderManage.order.EndTime')+'：'+timefilter(dataForm.finishProduceTime) }}</div></el-col>
+          <!-- <el-col :span="6"><div>{{ $t('module.orderManage.order.PlanningEndTime')+'：'+timefilter(dataForm.planFinishProduceTime) }}</div></el-col> -->
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="6"><div>{{ $t('module.orderManage.order.ActualFinishedProduct')+'：'+stringfilter(dataForm.actualQuantity) }}</div></el-col>
+          <el-col :span="6"><div>{{ $t('module.orderManage.order.NumberOfDamages')+'：'+stringfilter(dataForm.scrapQuantity) }}</div></el-col>
+          <el-col :span="6"><div>{{ $t('module.orderManage.order.ProductName')+'：'+stringfilter(dataForm.productName) }}</div></el-col>
+          <el-col :span="6"><div>{{ $t('module.orderManage.order.priority')+'：' }}{{ dataForm.priority | commonFilter(basicData('priority')) }}</div></el-col>
+        </el-row>
+        <!-- <el-row :gutter="20">
+          <el-col :span="6"><div>{{ $t('module.orderManage.order.initiateTime')+'：'+timefilter(dataForm.startProduceTime) }}</div></el-col>
+        </el-row> -->
+      </div>
+      <el-card class="box-card" style="margin-top:40px">
+        <el-row type="flex" justify="space-around" style="margin:0">
+          <el-col v-if="dataForm.status !==3 && dataForm.status !==9" :span="4.8"><div><el-button type="primary" @click="issueClick()"> {{ 'routerTitle.order.workOrderManage.issueworkorder' | i18nFilter }} </el-button></div></el-col>
+          <el-col v-if="dataForm.status !==3 && dataForm.status !==9" :span="4.8"><div><el-button type="primary" @click="activation()"> {{ $t('module.orderManage.order.activation') }} </el-button></div></el-col>
+          <el-col :span="4.8"><div><el-button :disabled="dataForm.status===9" type="primary" @click="closeClick()"> {{ 'routerTitle.order.workOrderManage.closeworkorder' | i18nFilter }} </el-button></div></el-col>
+          <el-col :span="4.8"><div><el-button type="primary" @click="tagsClick()"> {{ 'routerTitle.order.workOrderManage.viewpackingTags' | i18nFilter }} </el-button></div></el-col>
+          <el-col v-if="false" :span="4.8"><div><el-button type="primary" @click="verifyClick()"> {{ 'routerTitle.order.workOrderManage.workOrderVerify' | i18nFilter }} </el-button></div></el-col>
+          <el-col v-if="false" :span="4.8"><div><el-button type="primary" @click="monitorClick()"> {{ 'routerTitle.order.workOrderManage.workOrderMonitor' | i18nFilter }} </el-button></div></el-col>
+        </el-row>
+      </el-card>
+    </el-card>
+    <workOrder-close v-if="closeVisible" ref="closeWorkOrder" :work-order-id="workOrderId" @refreshDataList="handleClick" />
+    <workOrder-issue v-if="issueVisible" ref="issueWorkOrder" :work-order-id="workOrderId" @refreshDataList="handleClick" />
+  </div>
+</template>
+
+<script>
+import workOrderClose from './workOrder-close'
+import workOrderIssue from './workOrder-issue'
+import { workOrderDetail, updateForStatus } from '@/api/orderManage/workOrder/workOrder'
+import { timeFormatter } from '@/filters'
+import basicData from '@/filters/basicData'
+
+export default {
+  name: '',
+  filters: {
+    commonFilter: (source, filterType = a => a) => {
+      return filterType(source)
+    }
+  },
+  components: { workOrderClose, workOrderIssue },
+  data() {
+    return {
+      closeVisible: false,
+      issueVisible: false,
+      workOrderId: '',
+      dataForm: {},
+      basicData
+    }
+  },
+  created() {
+    this.workOrderId = this.$route.query.id
+    this.init()
+  },
+  methods: {
+    init() {
+      this.dataForm = {}
+      workOrderDetail(this.workOrderId).then(res => {
+        this.dataForm = res.data
+      })
+    },
+    handleClick() {
+      // this.addOrUpdateVisible = true
+      // this.$nextTick(() => {
+      //   this.$refs.addOrUpdate.init(id)
+      // })
+    },
+    activation() {
+      const data = {}
+      data.status = '3'
+      data.id = this.workOrderId
+      updateForStatus(data).then(res => {
+        this.$message({
+          message: this.$t('module.basicData.visual.success'),
+          type: 'success',
+          duration: 1500
+        })
+      })
+    },
+    closeClick() {
+      this.closeVisible = true
+      this.$nextTick(() => {
+        this.$refs.closeWorkOrder.init(this.dataForm)
+      })
+    },
+    issueClick() {
+      this.issueVisible = true
+      this.$nextTick(() => {
+        this.$refs.issueWorkOrder.init()
+      })
+    },
+    tagsClick() {
+      this.$router.push({
+        name: 'packingTags',
+        query: {
+          id: this.workOrderId
+        }
+      })
+    },
+    verifyClick() {
+      this.$router.push({
+        name: 'workOrderVerify',
+        query: {
+          id: this.workOrderId
+        }
+      })
+    },
+    monitorClick() {
+      this.$router.push({
+        name: 'workOrderMonitor',
+        query: {
+          id: this.workOrderId
+        }
+      })
+    },
+    goback() {
+      this.$router.go(-1)
+    },
+    timefilter(obj) {
+      return timeFormatter(obj).substring(0, timeFormatter(obj).lastIndexOf(' '))
+    },
+    stringfilter(objString) {
+      return objString || ''
+    }
+  }
+}
+</script>
+
+<style scoped>
+.text {
+    font-size: 18px;
+  }
+
+  .item {
+    margin-bottom: 18px;
+  }
+
+  .clearfix:before,
+  .clearfix:after {
+    display: table;
+    content: "";
+  }
+  .clearfix:after {
+    clear: both
+  }
+
+  .box-card {
+    font-size: 30px;
+    margin: auto;
+    margin-top: 20px;
+  }
+  .el-row {
+    margin-bottom: 20px;
+  }
+  .el-col {
+    border-radius: 4px;
+  }
+</style>
diff --git a/src/views/orderManage/workOrder/components/workOrderVerify.vue b/src/views/orderManage/workOrder/components/workOrderVerify.vue
new file mode 100644
index 0000000..e32e1f5
--- /dev/null
+++ b/src/views/orderManage/workOrder/components/workOrderVerify.vue
@@ -0,0 +1,163 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-02-27 14:49:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-06 17:58:53
+ * @Description: 工单验证
+-->
+<template>
+  <div>
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <span><b>{{ $t('module.orderManage.FalseData.FalseData1') }}</b></span>
+        <el-button style="float: right;" type="success" @click="goback()">{{ 'btn.back' | i18nFilter }}</el-button>
+      </div>
+      <div class="text item">
+        <el-row :gutter="20">
+          <el-col :span="6"><div>{{ $t('module.orderManage.FalseData.FalseData2') }}</div></el-col>
+          <el-col :span="6"><div>{{ $t('module.orderManage.FalseData.FalseData3') }}</div></el-col>
+          <el-col :span="6"><div>{{ $t('module.orderManage.FalseData.FalseData5') }}</div></el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="6"><div>{{ $t('module.orderManage.FalseData.FalseData6') }}</div></el-col>
+          <el-col :span="6"><div>{{ $t('module.orderManage.FalseData.FalseData8') }}</div></el-col>
+          <el-col :span="6"><div>{{ $t('module.orderManage.FalseData.FalseData9') }}</div></el-col>
+        </el-row>
+      </div>
+    </el-card>
+    <el-card>
+      <div slot="header" class="clearfix">
+        <span><b>{{ $t('module.orderManage.order.workOrderVerificationResult') }}</b></span>
+      </div>
+      <el-menu
+        :default-active="activeIndex"
+        mode="horizontal"
+        background-color="#545c64"
+        text-color="#fff"
+        active-text-color="#ffd04b"
+        @select="handleSelect"
+      >
+        <el-menu-item index="1">{{ $t('module.orderManage.order.deviceDetection') }}</el-menu-item>
+        <el-menu-item index="2">{{ $t('module.orderManage.order.process') }}</el-menu-item>
+        <el-menu-item index="3">{{ $t('module.orderManage.order.useMaterial') }}</el-menu-item>
+        <el-menu-item index="4">{{ $t('module.orderManage.order.basePlate') }}</el-menu-item>
+        <el-menu-item index="5">{{ $t('module.orderManage.order.team') }}</el-menu-item>
+      </el-menu>
+    </el-card>
+    <verify-equipment v-if="equipmentVisible" ref="verifyEquipment" :work-order-id="workOrderId" @refreshDataList="handleClick" />
+    <verify-craft v-if="craftVisible" ref="verifyCraft" :work-order-id="workOrderId" @refreshDataList="handleClick" />
+    <verify-group v-if="groupVisible" ref="verifyGroup" :work-order-id="workOrderId" @refreshDataList="handleClick" />
+    <verify-materiel v-if="materielVisible" ref="verifyMateriel" :work-order-id="workOrderId" @refreshDataList="handleClick" />
+    <verify-plate v-if="plateVisible" ref="verifyPlate" :work-order-id="workOrderId" @refreshDataList="handleClick" />
+  </div>
+</template>
+
+<script>
+import verifyEquipment from './verify-equipment'
+import verifyCraft from './verify-craft'
+import verifyGroup from './verify-group'
+import verifyMateriel from './verify-materiel'
+import verifyPlate from './verify-plate'
+
+export default {
+  name: '',
+  components: { verifyEquipment, verifyCraft, verifyGroup, verifyMateriel, verifyPlate },
+  data() {
+    return {
+      equipmentVisible: false,
+      craftVisible: false,
+      groupVisible: false,
+      materielVisible: false,
+      plateVisible: false,
+      workOrderId: '',
+      activeIndex: '1'
+    }
+  },
+  created() {
+    this.workOrderId = this.$route.query.id
+    this.handleSelect('1')
+  },
+  methods: {
+    handleClick() {
+      // this.addOrUpdateVisible = true
+      // this.$nextTick(() => {
+      //   this.$refs.addOrUpdate.init(id)
+      // })
+    },
+    handleSelect(key, keyPath) {
+      this.equipmentVisible = false
+      this.craftVisible = false
+      this.groupVisible = false
+      this.materielVisible = false
+      this.plateVisible = false
+      switch (key) {
+        case '1':
+          this.equipmentVisible = true
+          this.$nextTick(() => {
+            this.$refs.verifyEquipment.init()
+          })
+          break
+        case '2':
+          this.craftVisible = true
+          this.$nextTick(() => {
+            this.$refs.verifyCraft.init()
+          })
+          break
+        case '3':
+          this.materielVisible = true
+          this.$nextTick(() => {
+            this.$refs.verifyMateriel.init()
+          })
+          break
+        case '4':
+          this.plateVisible = true
+          this.$nextTick(() => {
+            this.$refs.verifyPlate.init()
+          })
+          break
+        case '5':
+          this.groupVisible = true
+          this.$nextTick(() => {
+            this.$refs.verifyGroup.init()
+          })
+          break
+      }
+    },
+    goback() {
+      this.$router.go(-1)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.text {
+    font-size: 18px;
+  }
+
+  .item {
+    margin-bottom: 18px;
+  }
+
+  .clearfix:before,
+  .clearfix:after {
+    display: table;
+    content: "";
+  }
+  .clearfix:after {
+    clear: both
+  }
+
+  .box-card {
+    width: 80%;
+    font-size: 30px;
+    margin: auto;
+    margin-top: 20px;
+  }
+  .el-row {
+    margin-bottom: 20px;
+  }
+  .el-col {
+    border-radius: 4px;
+  }
+</style>
diff --git a/src/views/orderManage/workOrder/workOrder.vue b/src/views/orderManage/workOrder/workOrder.vue
new file mode 100644
index 0000000..8cc039a
--- /dev/null
+++ b/src/views/orderManage/workOrder/workOrder.vue
@@ -0,0 +1,269 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-26 14:13:58
+ * @Description:
+-->
+<template>
+  <div class="app-container">
+    <el-form
+      :model="formData"
+      :inline="true"
+      size="medium"
+      label-width="130px"
+    >
+      <el-form-item :label="$t('module.orderManage.order.keyword')" prop="key">
+        <el-input v-model="formData.key" :placeholder="$i18nForm(['placeholder.input', this.$t('module.orderManage.order.NameOrCode')])" style="width:200px" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.orderManage.order.ActualStartTime')" prop="time">
+        <el-date-picker
+          v-model="formData.timeSlot"
+          type="daterange"
+          format="yyyy-MM-dd"
+          value-format="yyyy-MM-dd"
+          :start-placeholder="$t('module.orderManage.order.StartTime')"
+          :end-placeholder="$t('module.orderManage.order.StartTime')"
+          :range-separator="$t('module.orderManage.order.To')"
+          clearable
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="getList()"> {{ 'btn.search' | i18nFilter }} </el-button>
+        <el-button v-if="false" type="primary" @click="addNew()"> {{ 'btn.add' | i18nFilter }} </el-button>
+      </el-form-item>
+    </el-form>
+    <base-table
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    >
+      <method-btn
+        v-if="false"
+        slot="handleBtn"
+        :width="trueWidth"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="formData.current"
+      :limit.sync="formData.size"
+      @pagination="getList()"
+    />
+    <workOrder-add v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
+  </div>
+</template>
+
+<script>
+import { workOrderList, workOrderDelete } from '@/api/orderManage/workOrder/workOrder'
+import i18n from '@/lang'
+import workOrderAdd from './components/workOrder-add'
+import workOrderBtn from './components/workOrderBtn'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import { timeFormatter } from '@/filters'
+import basicData from '@/filters/basicData'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+
+const tableBtn = [
+  {
+    type: 'edit',
+    btnName: 'btn.edit'
+  },
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  }
+]
+const tableProps = [
+  {
+    prop: 'createTime',
+    label: i18n.t('module.orderManage.order.createTime'),
+    filter: timeFormatter
+  },
+  {
+    prop: 'name',
+    label: i18n.t('module.orderManage.order.WorkOrderName'),
+    align: 'center',
+    width: '150px'
+  },
+  {
+    prop: 'workOrderNo',
+    label: i18n.t('module.orderManage.order.WorkOrderCode'),
+    align: 'center',
+    width: '150px'
+  },
+  {
+    prop: 'orderName',
+    label: i18n.t('module.orderManage.order.OrderName'),
+    align: 'center'
+  },
+  {
+    prop: 'startProduceTime',
+    label: i18n.t('module.orderManage.order.ActualStartTime'),
+    align: 'center',
+    filter: timeFormatter,
+    width: '150px'
+  },
+  {
+    prop: 'priority',
+    label: i18n.t('module.orderManage.order.priority'),
+    align: 'center',
+    filter: basicData('priority')
+  },
+  // {
+  //   prop: 'planStartProduceTime',
+  //   label: i18n.t('module.orderManage.order.WorkOrderInitiation'),
+  //   align: 'center',
+  //   filter: timeFormatter
+  // },
+  {
+    prop: 'triggerOrigin',
+    label: i18n.t('module.orderManage.order.source'),
+    align: 'center',
+    filter: basicData('source')
+  },
+  {
+    prop: 'status',
+    label: i18n.t('module.orderManage.order.status'),
+    align: 'center',
+    filter: basicData('workOrderStatus')
+  },
+  {
+    prop: 'planQuantity',
+    label: i18n.t('module.orderManage.order.PlannedProcessingVolume'),
+    align: 'center'
+  },
+  {
+    prop: 'actualQuantity',
+    label: i18n.t('module.orderManage.order.ActualFinishedProduct'),
+    align: 'center',
+    width: '200px'
+  },
+  {
+    prop: 'scrapQuantity',
+    label: i18n.t('module.orderManage.order.NumberOfDamages'),
+    align: 'center',
+    width: '200px'
+  },
+  {
+    prop: 'workOrder',
+    label: i18n.t('module.orderManage.order.workOrderDetail'),
+    subcomponent: workOrderBtn,
+    align: 'center',
+    width: '150px'
+  }
+]
+
+export default {
+  name: 'ScrapInfo',
+  components: { Pagination, BaseTable, MethodBtn, workOrderAdd },
+  data() {
+    return {
+      addOrUpdateVisible: false,
+      tableBtn,
+      trueWidth: 200,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: false,
+      formData: {
+        timeSlot: [],
+        key: '',
+        current: 1,
+        size: 10
+      },
+      listQuery: {
+        current: 1,
+        size: 10
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    handleClick(raw) {
+      if (raw.type === 'delete') {
+        this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]？`, this.$t('module.basicData.visual.Tips'), {
+          confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+          cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+          type: 'warning'
+        }).then(() => {
+          workOrderDelete(raw.data.id).then(response => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+              }
+            })
+          })
+        }).catch(() => {})
+      } else {
+        this.addNew(raw.data.id)
+      }
+    },
+    getList() {
+      this.listLoading = true
+      if (this.formData.timeSlot) {
+        this.formData.startTime = this.formData.timeSlot[0]
+        this.formData.endTime = this.formData.timeSlot[1]
+      } else {
+        this.formData.startTime = ''
+        this.formData.endTime = ''
+      }
+      this.formData.name = this.formData.key
+      this.formData.workOrderNo = this.formData.key
+      workOrderList(this.formData).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    },
+    // 新增 / 修改
+    addNew(id) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id)
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/packing-manage/LabelTemplate.vue b/src/views/packing-manage/LabelTemplate.vue
new file mode 100644
index 0000000..18d0804
--- /dev/null
+++ b/src/views/packing-manage/LabelTemplate.vue
@@ -0,0 +1,208 @@
+<template>
+  <div :class="$style.container">
+    <SearchBar
+      :placeholder="$t('module.packingManage.labelTemplate.placeholderSearch')"
+      :input-width="200"
+      @on-search="handleSearch"
+    >
+      <el-button type="success" icon="el-icon-plus" @click="handleAdd()">
+        {{ "btn.add" | i18nFilter }}
+      </el-button>
+    </SearchBar>
+    <el-table
+      :data="tableDataList"
+      :class="$style.table"
+      :stripe="true"
+      :header-cell-style="{background:'#eef1f6',color:'#606266',height: '56px'}"
+      :cell-style="{ textAlign: 'center' }"
+      size="medium"
+    >
+      <el-table-column prop="index" :label="'tableHeader.index' | i18nFilter" width="80" fixed="left" align="center" />
+      <el-table-column prop="createTime" :label="$t('module.packingManage.labelTemplate.addTime')" width="180" align="center">
+        <template slot-scope="scope">
+          {{ moment(scope.row.handoverTime).format("YYYY-MM-DD HH:mm:ss") }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="code" :label="$t('module.packingManage.labelTemplate.labelCode')" width="180" align="center" />
+      <el-table-column prop="name" :label="$t('module.packingManage.labelTemplate.labelName')" width="180" align="center" />
+      <el-table-column prop="type" :label="$t('module.packingManage.labelTemplate.labelType')" width="180" align="center">
+        <template slot-scope="scope">
+          {{ printModelTypeList[scope.row.type] }}
+        </template>
+      </el-table-column>
+      <el-table-column
+        :show-overflow-tooltip="true"
+        prop="content"
+        :label="$t('module.packingManage.labelTemplate.labelContent')"
+        width="180"
+        align="center"
+      />
+      <el-table-column prop="remark" align="center" :label="$t('module.packingManage.labelTemplate.remark')" />
+      <el-table-column :label="'tableHeader.operation' | i18nFilter" align="center" width="320" fixed="right">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="primary"
+            icon="el-icon-view"
+            @click="handleView(scope.row)"
+          >
+            {{ "btn.view" | i18nFilter }}
+          </el-button>
+          <span style="margin:0 3px">|</span>
+          <el-button
+            size="mini"
+            type="info"
+            icon="el-icon-edit"
+            @click="handleEdit(scope.row.id)"
+          >
+            {{ "btn.edit" | i18nFilter }}
+          </el-button>
+          <span style="margin:0 3px">|</span>
+          <el-button
+            type="danger"
+            size="mini"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row.id)"
+          >
+            {{ "btn.delete" | i18nFilter }}
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      background
+      :hide-on-single-page="false"
+      :class="$style.table"
+      :current-page="page.current"
+      :page-sizes="[10, 20, 30, 40]"
+      :page-size="page.size"
+      layout="total, sizes, prev, pager, next"
+      :total="pageTotal"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+  </div>
+</template>
+<script>
+import moment from 'moment'
+import { page, del } from '@/api/packing-manage/packing-label.js'
+import SearchBar from '@/views/art/components/search-bar'
+import i18n from '@/lang'
+import { getLodop } from '@/assets/libs/LodopFuncs.js'
+
+const printModelTypeList = {
+  0: i18n.t('module.packingManage.labelTemplate.levelLabel'),
+  1: i18n.t('module.packingManage.labelTemplate.moduleLabel'),
+  2: i18n.t('module.packingManage.labelTemplate.custom')
+}
+
+export default {
+  components: { SearchBar },
+  props: {},
+  data() {
+    return {
+      moment,
+      tableDataList: [],
+      pageTotal: 0,
+      page: {
+        current: 1,
+        size: 10
+      },
+      param: {},
+      printModelTypeList
+    }
+  },
+  created() {
+    this.handleSearch()
+  },
+  methods: {
+    handleSearch(param) {
+      this.param = param
+      console.log(param)
+      page({ ...param, key: param && param.keywords, ...this.page }).then(
+        res => {
+          if (!res.data) {
+            return
+          }
+          this.pageTotal = res.data && res.data.total
+          console.log(this.pageTotal)
+          if (!res.data.records) {
+            this.tableDataList = []
+            return
+          }
+          this.tableDataList = res.data.records.map((m, index) => ({
+            ...m,
+            index: this.page.size * (this.page.current - 1) + index + 1
+          }))
+        }
+      )
+    },
+    handleAdd() {
+      this.$router.push({
+        path: '/packing/label-design-add',
+        query: {
+          redirect: '/packing/label-template',
+          title: '标签设计'
+        }
+      })
+    },
+    handleEdit(id) {
+      this.$router.push({
+        path: '/packing/label-design-add',
+        query: {
+          redirect: '/packing/label-template',
+          title: '标签设计',
+          id
+        }
+      })
+    },
+    handleView(printModel) {
+      const LODOP = getLodop()
+      const modelCode = printModel.content
+      LODOP.ADD_PRINT_DATA('ProgramData', modelCode) // 装载模板
+      // 按类名赋值
+      LODOP.SET_PRINT_STYLEA('name', 'CONTENT', '张三')
+      LODOP.SET_PRINT_STYLEA('code', 'CONTENT', '123455')
+      LODOP.PREVIEW()
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`)
+      this.page.size = val
+      this.handleSearch(this.param)
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`)
+      this.page.current = val
+      this.handleSearch(this.param)
+    },
+    handleDelete(id) {
+      this.$confirm(
+        i18n.t('deleteMsgBox.content'),
+        i18n.t('deleteMsgBox.hint'),
+        {
+          confirmButtonText: i18n.t('btn.confirm'),
+          cancelButtonText: i18n.t('btn.cancel'),
+          type: 'warning'
+        }
+      ).then(async() => {
+        del({ id }).then(res => {
+          this.page.current = 1
+          this.handleSearch(this.param)
+          this.$message({
+            type: 'info',
+            message: i18n.t('deleteMsgBox.doneMsg')
+          })
+        })
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" module>
+.container {
+  .table {
+    margin: 16px;
+    width: 98.5%;
+  }
+}
+</style>
diff --git a/src/views/packing-manage/PackingList.vue b/src/views/packing-manage/PackingList.vue
new file mode 100644
index 0000000..c5d2c60
--- /dev/null
+++ b/src/views/packing-manage/PackingList.vue
@@ -0,0 +1,162 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-02-27 14:39:57
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-26 14:32:19
+ * @Description:
+-->
+<template>
+  <div style="margin-top:30px">
+    <el-form
+      ref="formData"
+      :model="formData"
+      :inline="true"
+      size="medium"
+      label-width="120px"
+    >
+      <el-form-item :label="$t('module.packingManage.PackingList.WorkOrderNo')" prop="workOrderNo">
+        <el-input v-model="formData.workOrderNo" :placeholder="$i18nForm(['placeholder.input', this.$t('module.packingManage.PackingList.WorkOrderNo')])" style="width:200px" clearable />
+      </el-form-item>
+      <el-form-item label="boxID" prop="id">
+        <el-input v-model="formData.id" :placeholder="$i18nForm(['placeholder.input', 'boxID'])" style="width:200px" clearable />
+      </el-form-item>
+      <!-- <el-form-item :label="$t('module.packingManage.PackingList.PackingTime')" label-width="100px" prop="time">
+        <el-date-picker
+          v-model="formData.timeSlot"
+          type="daterange"
+          format="yyyy-MM-dd"
+          value-format="yyyy-MM-dd"
+          :start-placeholder="$t('module.orderManage.order.StartTime')"
+          :end-placeholder="$t('module.orderManage.order.StartTime')"
+          :range-separator="$t('module.orderManage.order.To')"
+          clearable
+        />
+      </el-form-item> -->
+      <el-form-item>
+        <el-button type="primary" @click="getList()"> {{ 'btn.search' | i18nFilter }} </el-button>
+      </el-form-item>
+    </el-form>
+    <base-table
+      :page="formData.current"
+      :limit="formData.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    />
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="formData.current"
+      :limit.sync="formData.size"
+      @pagination="getList()"
+    />
+  </div>
+</template>
+
+<script>
+import i18n from '@/lang'
+import { packagingInventoryList } from '@/api/orderManage/workOrder/workOrder'
+// import { timeFormatter } from '@/filters'
+import BaseTable from '@/components/BaseTable'
+import detailBtn from './components/detailBtn'
+import Pagination from '@/components/Pagination'
+
+const tableProps = [
+  {
+    prop: 'id',
+    label: 'boxID',
+    align: 'center'
+  },
+  // {
+  //   prop: 'PackingTime',
+  //   label: i18n.t('module.packingManage.PackingList.PackingTime'),
+  //   align: 'center',
+  //   filter: timeFormatter
+  // },
+  {
+    prop: 'workOrderNo',
+    label: i18n.t('module.packingManage.PackingList.WorkOrderNo'),
+    align: 'center'
+  },
+  {
+    prop: 'totalPower',
+    label: 'TotalPower',
+    align: 'center'
+  },
+  {
+    prop: 'substrateQuantity',
+    label: i18n.t('module.packingManage.PackingList.SubstrateNumber'),
+    align: 'center'
+  },
+  {
+    prop: 'grade',
+    label: i18n.t('module.packingManage.PackingList.QualityGrade'),
+    align: 'center'
+  },
+  {
+    prop: 'Detail',
+    label: i18n.t('module.packingManage.PackingList.Detail'),
+    subcomponent: detailBtn
+  }
+]
+export default {
+  name: '',
+  filters: {
+    commonFilter: (source, filterType = a => a) => {
+      return filterType(source)
+    }
+  },
+  components: { BaseTable, Pagination },
+  data() {
+    return {
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: false,
+      formData: {
+        workOrderNo: '',
+        id: '',
+        timeSlot: [],
+        startTime: '',
+        endTime: '',
+        current: 1,
+        size: 10
+      }
+    }
+  },
+  created() {
+    this.init()
+  },
+  methods: {
+    init() {
+      this.$nextTick(() => {
+        this.$refs['formData'].resetFields()
+        this.getList()
+      })
+    },
+    getList() {
+      if (this.formData.timeSlot) {
+        this.formData.startTime = this.formData.timeSlot[0]
+        this.formData.endTime = this.formData.timeSlot[1]
+      } else {
+        this.formData.startTime = ''
+        this.formData.endTime = ''
+      }
+      this.listLoading = true
+      packagingInventoryList(this.formData).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/packing-manage/components/AddLablePanel.vue b/src/views/packing-manage/components/AddLablePanel.vue
new file mode 100644
index 0000000..2ae9a39
--- /dev/null
+++ b/src/views/packing-manage/components/AddLablePanel.vue
@@ -0,0 +1,261 @@
+<template>
+  <div :class="$style.container">
+    <HeaderTitleBar>
+      <div slot="content">
+        <el-button type="success" @click="btnClickDesign">
+          ①{{ $t('module.packingManage.labelTemplate.templateDesign') }}
+        </el-button>
+        <el-button icon="ios-search" @click="btnClickPrint">
+          {{ $t('module.packingManage.labelTemplate.templatePreview') }}
+        </el-button>
+        <!-- <el-button icon="md-help" @click="btnClickInfo">
+          设计说明
+        </el-button> -->
+      </div>
+    </HeaderTitleBar>
+    <el-form
+      ref="printModel"
+      :model="printModel"
+      :rules="rules"
+      label-width="120px"
+      :class="$style.form"
+    >
+      <el-form-item :label="$t('module.packingManage.labelTemplate.labelCode')" prop="code" :class="$style['form-item']">
+        <el-input v-model="printModel.code" />
+      </el-form-item>
+      <el-form-item :label="$t('module.packingManage.labelTemplate.labelName')" prop="name" :class="$style['form-item']">
+        <el-input v-model="printModel.name" />
+      </el-form-item>
+      <el-form-item :label="$t('module.packingManage.labelTemplate.labelType')" prop="type" :class="$style['form-item']">
+        <el-select
+          v-model="printModel.type"
+          :class="$style.select"
+          filterable
+          clearable
+          :placeholder="$t('module.packingManage.labelTemplate.labelType')"
+        >
+          <el-option
+            v-for="item in printModelTypeList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item
+        :label="$t('module.packingManage.labelTemplate.labelContent')"
+        prop="content"
+        :class="$style['form-item-remark']"
+      >
+        <el-input
+          v-model="content"
+          :readonly="false"
+          type="textarea"
+          :autosize="{ minRows: 4, maxRows: 8 }"
+        />
+      </el-form-item>
+      <el-form-item
+        :label="$t('module.packingManage.labelTemplate.remark')"
+        prop="remark"
+        :class="$style['form-item-remark']"
+      >
+        <el-input
+          v-model="printModel.remark"
+          type="textarea"
+          :autosize="{ minRows: 2, maxRows: 4 }"
+        />
+      </el-form-item>
+      <SubmitBar @on-cancle="close()" @on-submit="handleSubmit('printModel')" />
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { find } from 'lodash'
+import { list } from '@/api/material-manage/material'
+import { add, getInfo, update } from '@/api/packing-manage/packing-label.js'
+import SubmitBar from '@/views/art/components/submit-bar'
+import HeaderTitleBar from '@/views/material-manage/components/header-title-bar'
+import { getLodop } from '@/assets/libs/LodopFuncs.js'
+import i18n from '@/lang'
+
+const printModelTypeList = [
+  {
+    id: 0,
+    name: i18n.t('module.packingManage.labelTemplate.levelLabel')
+  },
+  {
+    id: 1,
+    name: i18n.t('module.packingManage.labelTemplate.moduleLabel')
+  },
+  {
+    id: 2,
+    name: i18n.t('module.packingManage.labelTemplate.custom')
+  }
+]
+
+export default {
+  name: 'AddLabelPanel',
+  components: {
+    SubmitBar,
+    HeaderTitleBar
+  },
+  props: {},
+  data() {
+    return {
+      content: '',
+      printModel: {
+        id: '',
+        code: '',
+        name: '',
+        content: '',
+        type: 1,
+        isDefault: 0,
+        isPreview: 1,
+        state: 'normal',
+        remark: ''
+      },
+      printModelTypeList,
+      rules: {
+        code: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.packingManage.labelTemplate.labelCode')]), trigger: 'blur' },
+          { min: 1, message: this.$t('module.packingManage.labelTemplate.placeholderLength'), trigger: 'blur' }
+        ],
+        name: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.packingManage.labelTemplate.labelName')]), trigger: 'blur' },
+          { min: 1, message: this.$t('module.packingManage.labelTemplate.placeholderLength'), trigger: 'blur' }
+        ],
+        type: [
+          {
+            required: true,
+            message: this.$i18nForm(['placeholder.select', this.$t('module.packingManage.labelTemplate.labelType')]),
+            trigger: 'change'
+          }
+        ],
+        content: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.packingManage.labelTemplate.labelContent')]), trigger: 'blur' },
+          { min: 1, message: this.$t('module.packingManage.labelTemplate.placeholderLength'), trigger: 'blur' }
+        ]
+      },
+      id: null
+    }
+  },
+  watch: {},
+  created() {
+    this.init()
+  },
+  methods: {
+    init() {
+      this.id = this.$route.query.id
+      console.log(this.id)
+      console.log(!this.id)
+      list().then(res => {
+        console.log(res)
+        this.materialList = res.data
+      })
+      if (this.id) {
+        getInfo({ id: this.id }).then(res => {
+          console.log(res)
+          this.printModel = res.data
+          this.materialCode = this.printModel.materialCode
+          this.content = this.printModel.content
+        })
+      }
+    },
+    handleSubmit(formName) {
+      console.log('handleSubmit')
+      this.$refs[formName].validate(valid => {
+        if (!valid) {
+          return false
+        }
+        if (this.id) {
+          update(this.printModel).then(res => {
+            this.close()
+          })
+        } else {
+          add(this.printModel).then(res => {
+            this.close()
+          })
+        }
+      })
+    },
+    close() {
+      this.$router.push({ path: this.$route.query.redirect })
+    },
+    materialChange(item) {
+      const material = find(this.materialList, m => m.id === item)
+      this.materialCode = material && material.externalCode
+    },
+    btnClickDesign() {
+      const LODOP = getLodop()
+      LODOP.PRINT_INIT('初始化打印')
+      LODOP.SET_PRINT_MODE('PROGRAM_CONTENT_BYVAR', true) // 生成程序时，内容参数有变量用变量，无变量用具体值
+      LODOP.SET_SHOW_MODE('DESIGN_IN_BROWSE', 1)
+      const modelCode = this.printModel.content
+      LODOP.ADD_PRINT_DATA('ProgramData', modelCode) // 装载模板
+      this.printModel.content = LODOP.PRINT_DESIGN()
+      if (LODOP.CVERSION) {
+        LODOP.On_Return = (TaskID, Value) => {
+          console.log('CVERSION')
+          console.log(Value)
+          this.printModel.content = Value
+          this.content = Value
+          this.getProgramData()
+        }
+      }
+    },
+    getProgramData() {
+      const LODOP = getLodop()
+      console.log('getProgramData')
+      const content = LODOP.GET_VALUE('ProgramData', 0) // 获得文档式模板
+      console.log(content)
+      if (LODOP.CVERSION) {
+        LODOP.On_Return = (TaskID, Value) => {
+          console.log(Value)
+          this.printModel.content = Value
+        }
+      }
+    },
+    btnClickPrint() {
+      const LODOP = getLodop()
+      const modelCode = this.printModel.content
+      LODOP.ADD_PRINT_DATA('ProgramData', modelCode) // 装载模板
+      // 按类名赋值
+      LODOP.SET_PRINT_STYLEA('name', 'CONTENT', '张三')
+      LODOP.SET_PRINT_STYLEA('code', 'CONTENT', '123455')
+      LODOP.PREVIEW()
+    },
+    btnClickInfo() {}
+  }
+}
+</script>
+<style lang="scss" module>
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .form {
+    width: 60%;
+    margin-top: 30px;
+    display: flex;
+    flex-flow: wrap;
+    .form-item {
+      width: 50%;
+    }
+    .form-item-remark {
+      width: 100%;
+    }
+  }
+  .input {
+    display: flex;
+    margin: 8px 16px 8px 4px;
+    align-items: center;
+    .select {
+      width: 100%;
+    }
+  }
+  .select {
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/views/packing-manage/components/detailBtn.vue b/src/views/packing-manage/components/detailBtn.vue
new file mode 100644
index 0000000..3163233
--- /dev/null
+++ b/src/views/packing-manage/components/detailBtn.vue
@@ -0,0 +1,52 @@
+<!--
+ * @Date: 2021-01-07 20:09:37
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-07-21 09:05:43
+ * @FilePath:
+ * @Description:
+-->
+<template>
+  <div>
+    <span>
+      <!-- <el-button
+        type="primary"
+        size="small"
+        @click="btnClickPrint"
+      >{{ "btn.print" | i18nFilter }}</el-button> -->
+      <el-button
+        type="text"
+        size="small"
+        @click="emitClick"
+      >
+        {{ 'routerTitle.order.workOrderManage.tagDetail' | i18nFilter }}
+      </el-button>
+    </span>
+    <tag-detail v-if="tagDetailVisible" ref="tagDetail" :packaging-box-id="injectData.id" :order-code="injectData.workOrderNo" />
+  </div>
+</template>
+
+<script>
+import tagDetail from './tagDetail'
+export default {
+  components: { tagDetail },
+  props: {
+    injectData: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      tagDetailVisible: false
+    }
+  },
+  methods: {
+    emitClick() {
+      this.tagDetailVisible = true
+      this.$nextTick(() => {
+        this.$refs.tagDetail.init()
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/packing-manage/components/tagDetail.vue b/src/views/packing-manage/components/tagDetail.vue
new file mode 100644
index 0000000..084dfef
--- /dev/null
+++ b/src/views/packing-manage/components/tagDetail.vue
@@ -0,0 +1,203 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-07-21 09:30:50
+ * @Description:
+-->
+<template>
+  <el-drawer
+    :append-to-body="true"
+    :show-close="false"
+    :visible.sync="visible"
+    size="55%"
+  >
+    <div
+      slot="title"
+      style=" background-color:#02BCFF;font-size:1.5em;color:white;padding:5px 20px"
+    >
+      {{ "routerTitle.order.workOrderManage.tagDetail" | i18nFilter }}
+    </div>
+    <div id="tablePrint">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span><b>{{ "BOX_ID：" + dataForm.id }}</b></span>
+          <el-button
+            type="primary"
+            style="float:right"
+            size="small"
+            @click="btnClickPrint"
+          >{{ "btn.print" | i18nFilter }}</el-button>
+        </div>
+        <div class="text item">
+          <el-row :gutter="20">
+            <el-col
+              :span="6"
+            ><div>{{ "Power：" + dataForm.power }}</div></el-col>
+            <el-col
+              :span="6"
+            ><div>{{ "SAP Material：" + dataForm.sapMaterial }}</div></el-col>
+          </el-row>
+        </div>
+      </el-card>
+      <div>
+        <base-table
+          :page="listQuery.current"
+          :limit="listQuery.size"
+          :table-config="tableProps"
+          :table-data="list"
+          :is-loading="listLoading"
+        />
+      </div>
+    </div>
+  </el-drawer>
+</template>
+
+<script>
+import i18n from '@/lang'
+import BaseTable from '@/components/BaseTable'
+import {
+  packagingDetail,
+  packagingBoxList
+} from '@/api/orderManage/workOrder/workOrder'
+// import { timeFormatter } from '@/filters'
+import { getLodop } from '@/assets/libs/LodopFuncs.js'
+import { getInfo } from '@/api/packing-manage/packing-label.js'
+const tableProps = [
+  {
+    prop: 'woSubstrateId',
+    label: i18n.t('module.orderManage.packingTags.moduleId'),
+    align: 'center'
+  },
+  // {
+  //   prop: 'finishProduceTime',
+  //   label: i18n.t('module.orderManage.packingTags.UnloadingTime'),
+  //   align: 'center',
+  //   filter: timeFormatter
+  // },
+  // {
+  //   prop: 'name',
+  //   label: i18n.t('module.orderManage.packingTags.UnloadingEquipment'),
+  //   align: 'center'
+  // },
+  {
+    prop: 'oneCode',
+    label: i18n.t('module.orderManage.packingTags.oneDimensionalCode'),
+    align: 'center'
+  }
+]
+export default {
+  components: { BaseTable },
+  props: {
+    packagingBoxId: {
+      type: String,
+      default: () => ({})
+    },
+    orderCode: {
+      type: String,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: false,
+      dataForm: {},
+      listQuery: {
+        current: 1,
+        size: 500
+      }
+    }
+  },
+  methods: {
+    init() {
+      this.visible = true
+      this.listLoading = true
+      packagingDetail(this.packagingBoxId).then(res => {
+        this.dataForm = res.data
+      })
+      this.getList()
+    },
+    getList() {
+      this.listQuery.packagingBoxId = this.packagingBoxId
+      this.listLoading = true
+      packagingBoxList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.listLoading = false
+      })
+    },
+    // btnClickPrint() {
+    //   const LODOP = getLodop()
+    //   const strHTML = document.getElementById('tablePrint').innerHTML
+    //   LODOP.ADD_PRINT_HTM(30, 5, '100%', '80%', strHTML) // 装载模板
+    //   LODOP.PREVIEW()
+    // },
+    btnClickPrint() {
+      getInfo({ id: '1387070313172353025' }).then(res => {
+        this.printPreview('预览', res.data.content)
+      })
+    },
+    printPreview(name = '预览', modelCode) {
+      const LODOP = getLodop()
+      LODOP.PRINT_INIT(name)
+      const aaa = LODOP.ADD_PRINT_DATA('ProgramData', modelCode)
+      console.log(aaa)
+      const obj = {
+        time: this.dataForm.packagingTime,
+        orderCode: this.orderCode,
+        power: this.dataForm.power,
+        sapMaterial: this.dataForm.sapMaterial,
+        BarCode: this.dataForm.boxNo
+      }
+      this.list.forEach((item, index) => {
+        const str = 'modul' + (index + 1)
+        obj[str] = item.woSubstrateId
+      })
+      console.log(obj)
+      Object.keys(obj).forEach(key => {
+        LODOP.SET_PRINT_STYLEA(key, 'CONTENT', obj[key])
+      })
+      LODOP.NewPageA()
+      LODOP.PREVIEW()
+    },
+    print(name = '打印') {
+      console.log(name, this.currentIndex)
+      // 装载模板
+      const modelCode = this.printModels[this.currentIndex].printModelContent
+      console.log(modelCode)
+      this.objs.forEach(obj => {
+        const LODOP = getLodop() // 调用getLodop获取LODOP对象
+        LODOP.PRINT_INIT(name)
+        const aaa = LODOP.ADD_PRINT_DATA('ProgramData', modelCode)
+        console.log(aaa)
+        obj.partCode = obj.itemCode
+        obj.productTypeName = obj.itemTypeName
+        Object.keys(obj).forEach(key => {
+          LODOP.SET_PRINT_STYLEA(key, 'CONTENT', obj[key])
+        })
+        // LODOP.ADD_PRINT_HTM(10, 10, 350, 600, `--------${index}----------`);
+        LODOP.NewPageA()
+        LODOP.PRINT()
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.drawer-footer {
+  width: 100%;
+  margin-top: 50px;
+  border-top: 1px solid #e8e8e8;
+  padding: 10px 50px;
+  text-align: left;
+  background: #fff;
+}
+</style>
diff --git a/src/views/pdf/index.vue b/src/views/pdf/index.vue
index 86278b3..6b70e58 100644
--- a/src/views/pdf/index.vue
+++ b/src/views/pdf/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="app-container">
     <aside style="margin-top:15px;">
-      Here we use window.print() to implement the feature of downloading PDF.
+      {{ 'pdf.tips' | i18nFilter }}
     </aside>
     <router-link target="_blank" to="/pdf/download">
       <el-button type="primary">
diff --git a/src/views/permission/components/SwitchRoles.vue b/src/views/permission/components/SwitchRoles.vue
deleted file mode 100644
index 9fabbe1..0000000
--- a/src/views/permission/components/SwitchRoles.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<template>
-  <div>
-    <div style="margin-bottom:15px;">
-      Your roles: {{ roles }}
-    </div>
-    Switch roles:
-    <el-radio-group v-model="switchRoles">
-      <el-radio-button label="editor" />
-      <el-radio-button label="admin" />
-    </el-radio-group>
-  </div>
-</template>
-
-<script>
-export default {
-  computed: {
-    roles() {
-      return this.$store.getters.roles
-    },
-    switchRoles: {
-      get() {
-        return this.roles[0]
-      },
-      set(val) {
-        this.$store.dispatch('user/changeRoles', val).then(() => {
-          this.$emit('change')
-        })
-      }
-    }
-  }
-}
-</script>
diff --git a/src/views/permission/directive.vue b/src/views/permission/directive.vue
deleted file mode 100644
index 4a49792..0000000
--- a/src/views/permission/directive.vue
+++ /dev/null
@@ -1,111 +0,0 @@
-<template>
-  <div class="app-container">
-    <switch-roles @change="handleRolesChange" />
-    <div :key="key" style="margin-top:30px;">
-      <div>
-        <span v-permission="['admin']" class="permission-alert">
-          Only
-          <el-tag class="permission-tag" size="small">admin</el-tag> can see this
-        </span>
-        <el-tag v-permission="['admin']" class="permission-sourceCode" type="info">
-          v-permission="['admin']"
-        </el-tag>
-      </div>
-
-      <div>
-        <span v-permission="['editor']" class="permission-alert">
-          Only
-          <el-tag class="permission-tag" size="small">editor</el-tag> can see this
-        </span>
-        <el-tag v-permission="['editor']" class="permission-sourceCode" type="info">
-          v-permission="['editor']"
-        </el-tag>
-      </div>
-
-      <div>
-        <span v-permission="['admin','editor']" class="permission-alert">
-          Both
-          <el-tag class="permission-tag" size="small">admin</el-tag> and
-          <el-tag class="permission-tag" size="small">editor</el-tag> can see this
-        </span>
-        <el-tag v-permission="['admin','editor']" class="permission-sourceCode" type="info">
-          v-permission="['admin','editor']"
-        </el-tag>
-      </div>
-    </div>
-
-    <div :key="'checkPermission'+key" style="margin-top:60px;">
-      <aside>
-        In some cases, using v-permission will have no effect. For example: Element-UI's Tab component or el-table-column and other scenes that dynamically render dom. You can only do this with v-if.
-        <br> e.g.
-      </aside>
-
-      <el-tabs type="border-card" style="width:550px;">
-        <el-tab-pane v-if="checkPermission(['admin'])" label="Admin">
-          Admin can see this
-          <el-tag class="permission-sourceCode" type="info">
-            v-if="checkPermission(['admin'])"
-          </el-tag>
-        </el-tab-pane>
-
-        <el-tab-pane v-if="checkPermission(['editor'])" label="Editor">
-          Editor can see this
-          <el-tag class="permission-sourceCode" type="info">
-            v-if="checkPermission(['editor'])"
-          </el-tag>
-        </el-tab-pane>
-
-        <el-tab-pane v-if="checkPermission(['admin','editor'])" label="Admin-OR-Editor">
-          Both admin or editor can see this
-          <el-tag class="permission-sourceCode" type="info">
-            v-if="checkPermission(['admin','editor'])"
-          </el-tag>
-        </el-tab-pane>
-      </el-tabs>
-    </div>
-  </div>
-</template>
-
-<script>
-import permission from '@/directive/permission/index.js' // 权限判断指令
-import checkPermission from '@/utils/permission' // 权限判断函数
-import SwitchRoles from './components/SwitchRoles'
-
-export default {
-  name: 'DirectivePermission',
-  components: { SwitchRoles },
-  directives: { permission },
-  data() {
-    return {
-      key: 1 // 为了能每次切换权限的时候重新初始化指令
-    }
-  },
-  methods: {
-    checkPermission,
-    handleRolesChange() {
-      this.key++
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.app-container {
-  ::v-deep .permission-alert {
-    width: 320px;
-    margin-top: 15px;
-    background-color: #f0f9eb;
-    color: #67c23a;
-    padding: 8px 16px;
-    border-radius: 4px;
-    display: inline-block;
-  }
-  ::v-deep .permission-sourceCode {
-    margin-left: 15px;
-  }
-  ::v-deep .permission-tag {
-    background-color: #ecf5ff;
-  }
-}
-</style>
-
diff --git a/src/views/permission/page.vue b/src/views/permission/page.vue
deleted file mode 100644
index 5291a78..0000000
--- a/src/views/permission/page.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<template>
-  <div class="app-container">
-    <switch-roles @change="handleRolesChange" />
-  </div>
-</template>
-
-<script>
-import SwitchRoles from './components/SwitchRoles'
-
-export default {
-  name: 'PagePermission',
-  components: { SwitchRoles },
-  methods: {
-    handleRolesChange() {
-      this.$router.push({ path: '/permission/index?' + +new Date() })
-    }
-  }
-}
-</script>
diff --git a/src/views/permission/role.vue b/src/views/permission/role.vue
deleted file mode 100644
index cd7ecd4..0000000
--- a/src/views/permission/role.vue
+++ /dev/null
@@ -1,270 +0,0 @@
-<template>
-  <div class="app-container">
-    <el-button type="primary" @click="handleAddRole">New Role</el-button>
-
-    <el-table :data="rolesList" style="width: 100%;margin-top:30px;" border>
-      <el-table-column align="center" label="Role Key" width="220">
-        <template slot-scope="scope">
-          {{ scope.row.key }}
-        </template>
-      </el-table-column>
-      <el-table-column align="center" label="Role Name" width="220">
-        <template slot-scope="scope">
-          {{ scope.row.name }}
-        </template>
-      </el-table-column>
-      <el-table-column align="header-center" label="Description">
-        <template slot-scope="scope">
-          {{ scope.row.description }}
-        </template>
-      </el-table-column>
-      <el-table-column align="center" label="Operations">
-        <template slot-scope="scope">
-          <el-button type="primary" size="small" @click="handleEdit(scope)">Edit</el-button>
-          <el-button type="danger" size="small" @click="handleDelete(scope)">Delete</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <el-dialog :visible.sync="dialogVisible" :title="dialogType==='edit'?'Edit Role':'New Role'">
-      <el-form :model="role" label-width="80px" label-position="left">
-        <el-form-item label="Name">
-          <el-input v-model="role.name" placeholder="Role Name" />
-        </el-form-item>
-        <el-form-item label="Desc">
-          <el-input
-            v-model="role.description"
-            :autosize="{ minRows: 2, maxRows: 4}"
-            type="textarea"
-            placeholder="Role Description"
-          />
-        </el-form-item>
-        <el-form-item label="Menus">
-          <el-tree
-            ref="tree"
-            :check-strictly="checkStrictly"
-            :data="routesData"
-            :props="defaultProps"
-            show-checkbox
-            node-key="path"
-            class="permission-tree"
-          />
-        </el-form-item>
-      </el-form>
-      <div style="text-align:right;">
-        <el-button type="danger" @click="dialogVisible=false">Cancel</el-button>
-        <el-button type="primary" @click="confirmRole">Confirm</el-button>
-      </div>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import path from 'path'
-import { deepClone } from '@/utils'
-import { getRoutes, getRoles, addRole, deleteRole, updateRole } from '@/api/role'
-
-const defaultRole = {
-  key: '',
-  name: '',
-  description: '',
-  routes: []
-}
-
-export default {
-  data() {
-    return {
-      role: Object.assign({}, defaultRole),
-      routes: [],
-      rolesList: [],
-      dialogVisible: false,
-      dialogType: 'new',
-      checkStrictly: false,
-      defaultProps: {
-        children: 'children',
-        label: 'title'
-      }
-    }
-  },
-  computed: {
-    routesData() {
-      return this.routes
-    }
-  },
-  created() {
-    // Mock: get all routes and roles list from server
-    this.getRoutes()
-    this.getRoles()
-  },
-  methods: {
-    async getRoutes() {
-      const res = await getRoutes()
-      this.serviceRoutes = res.data
-      this.routes = this.generateRoutes(res.data)
-    },
-    async getRoles() {
-      const res = await getRoles()
-      this.rolesList = res.data
-    },
-
-    // Reshape the routes structure so that it looks the same as the sidebar
-    generateRoutes(routes, basePath = '/') {
-      const res = []
-
-      for (let route of routes) {
-        // skip some route
-        if (route.hidden) { continue }
-
-        const onlyOneShowingChild = this.onlyOneShowingChild(route.children, route)
-
-        if (route.children && onlyOneShowingChild && !route.alwaysShow) {
-          route = onlyOneShowingChild
-        }
-
-        const data = {
-          path: path.resolve(basePath, route.path),
-          title: route.meta && route.meta.title
-
-        }
-
-        // recursive child routes
-        if (route.children) {
-          data.children = this.generateRoutes(route.children, data.path)
-        }
-        res.push(data)
-      }
-      return res
-    },
-    generateArr(routes) {
-      let data = []
-      routes.forEach(route => {
-        data.push(route)
-        if (route.children) {
-          const temp = this.generateArr(route.children)
-          if (temp.length > 0) {
-            data = [...data, ...temp]
-          }
-        }
-      })
-      return data
-    },
-    handleAddRole() {
-      this.role = Object.assign({}, defaultRole)
-      if (this.$refs.tree) {
-        this.$refs.tree.setCheckedNodes([])
-      }
-      this.dialogType = 'new'
-      this.dialogVisible = true
-    },
-    handleEdit(scope) {
-      this.dialogType = 'edit'
-      this.dialogVisible = true
-      this.checkStrictly = true
-      this.role = deepClone(scope.row)
-      this.$nextTick(() => {
-        const routes = this.generateRoutes(this.role.routes)
-        this.$refs.tree.setCheckedNodes(this.generateArr(routes))
-        // set checked state of a node not affects its father and child nodes
-        this.checkStrictly = false
-      })
-    },
-    handleDelete({ $index, row }) {
-      this.$confirm('Confirm to remove the role?', 'Warning', {
-        confirmButtonText: 'Confirm',
-        cancelButtonText: 'Cancel',
-        type: 'warning'
-      })
-        .then(async() => {
-          await deleteRole(row.key)
-          this.rolesList.splice($index, 1)
-          this.$message({
-            type: 'success',
-            message: 'Delete succed!'
-          })
-        })
-        .catch(err => { console.error(err) })
-    },
-    generateTree(routes, basePath = '/', checkedKeys) {
-      const res = []
-
-      for (const route of routes) {
-        const routePath = path.resolve(basePath, route.path)
-
-        // recursive child routes
-        if (route.children) {
-          route.children = this.generateTree(route.children, routePath, checkedKeys)
-        }
-
-        if (checkedKeys.includes(routePath) || (route.children && route.children.length >= 1)) {
-          res.push(route)
-        }
-      }
-      return res
-    },
-    async confirmRole() {
-      const isEdit = this.dialogType === 'edit'
-
-      const checkedKeys = this.$refs.tree.getCheckedKeys()
-      this.role.routes = this.generateTree(deepClone(this.serviceRoutes), '/', checkedKeys)
-
-      if (isEdit) {
-        await updateRole(this.role.key, this.role)
-        for (let index = 0; index < this.rolesList.length; index++) {
-          if (this.rolesList[index].key === this.role.key) {
-            this.rolesList.splice(index, 1, Object.assign({}, this.role))
-            break
-          }
-        }
-      } else {
-        const { data } = await addRole(this.role)
-        this.role.key = data.key
-        this.rolesList.push(this.role)
-      }
-
-      const { description, key, name } = this.role
-      this.dialogVisible = false
-      this.$notify({
-        title: 'Success',
-        dangerouslyUseHTMLString: true,
-        message: `
-            <div>Role Key: ${key}</div>
-            <div>Role Name: ${name}</div>
-            <div>Description: ${description}</div>
-          `,
-        type: 'success'
-      })
-    },
-    // reference: src/view/layout/components/Sidebar/SidebarItem.vue
-    onlyOneShowingChild(children = [], parent) {
-      let onlyOneChild = null
-      const showingChildren = children.filter(item => !item.hidden)
-
-      // When there is only one child route, the child route is displayed by default
-      if (showingChildren.length === 1) {
-        onlyOneChild = showingChildren[0]
-        onlyOneChild.path = path.resolve(parent.path, onlyOneChild.path)
-        return onlyOneChild
-      }
-
-      // Show parent if there are no child route to display
-      if (showingChildren.length === 0) {
-        onlyOneChild = { ... parent, path: '', noShowingChildren: true }
-        return onlyOneChild
-      }
-
-      return false
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.app-container {
-  .roles-table {
-    margin-top: 30px;
-  }
-  .permission-tree {
-    margin-bottom: 30px;
-  }
-}
-</style>
diff --git a/src/views/profile/components/Account.vue b/src/views/profile/components/Account.vue
deleted file mode 100644
index 9f2e386..0000000
--- a/src/views/profile/components/Account.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<template>
-  <el-form>
-    <el-form-item label="Name">
-      <el-input v-model.trim="user.name" />
-    </el-form-item>
-    <el-form-item label="Email">
-      <el-input v-model.trim="user.email" />
-    </el-form-item>
-    <el-form-item>
-      <el-button type="primary" @click="submit">Update</el-button>
-    </el-form-item>
-  </el-form>
-</template>
-
-<script>
-export default {
-  props: {
-    user: {
-      type: Object,
-      default: () => {
-        return {
-          name: '',
-          email: ''
-        }
-      }
-    }
-  },
-  methods: {
-    submit() {
-      this.$message({
-        message: 'User information has been updated successfully',
-        type: 'success',
-        duration: 5 * 1000
-      })
-    }
-  }
-}
-</script>
diff --git a/src/views/profile/components/Activity.vue b/src/views/profile/components/Activity.vue
deleted file mode 100644
index dd5db3a..0000000
--- a/src/views/profile/components/Activity.vue
+++ /dev/null
@@ -1,185 +0,0 @@
-<template>
-  <div class="user-activity">
-    <div class="post">
-      <div class="user-block">
-        <img class="img-circle" :src="'https://wpimg.wallstcn.com/57ed425a-c71e-4201-9428-68760c0537c4.jpg'+avatarPrefix">
-        <span class="username text-muted">Iron Man</span>
-        <span class="description">Shared publicly - 7:30 PM today</span>
-      </div>
-      <p>
-        Lorem ipsum represents a long-held tradition for designers,
-        typographers and the like. Some people hate it and argue for
-        its demise, but others ignore the hate as they create awesome
-        tools to help create filler text for everyone from bacon lovers
-        to Charlie Sheen fans.
-      </p>
-      <ul class="list-inline">
-        <li>
-          <span class="link-black text-sm">
-            <i class="el-icon-share" />
-            Share
-          </span>
-        </li>
-        <li>
-          <span class="link-black text-sm">
-            <svg-icon icon-class="like" />
-            Like
-          </span>
-        </li>
-      </ul>
-    </div>
-    <div class="post">
-      <div class="user-block">
-        <img class="img-circle" :src="'https://wpimg.wallstcn.com/9e2a5d0a-bd5b-457f-ac8e-86554616c87b.jpg'+avatarPrefix">
-        <span class="username text-muted">Captain American</span>
-        <span class="description">Sent you a message - yesterday</span>
-      </div>
-      <p>
-        Lorem ipsum represents a long-held tradition for designers,
-        typographers and the like. Some people hate it and argue for
-        its demise, but others ignore the hate as they create awesome
-        tools to help create filler text for everyone from bacon lovers
-        to Charlie Sheen fans.
-      </p>
-      <ul class="list-inline">
-        <li>
-          <span class="link-black text-sm">
-            <i class="el-icon-share" />
-            Share
-          </span>
-        </li>
-        <li>
-          <span class="link-black text-sm">
-            <svg-icon icon-class="like" />
-            Like
-          </span>
-        </li>
-      </ul>
-    </div>
-    <div class="post">
-      <div class="user-block">
-        <img class="img-circle" :src="'https://wpimg.wallstcn.com/fb57f689-e1ab-443c-af12-8d4066e202e2.jpg'+avatarPrefix">
-        <span class="username">Spider Man</span>
-        <span class="description">Posted 4 photos - 2 days ago</span>
-      </div>
-      <div class="user-images">
-        <el-carousel :interval="6000" type="card" height="220px">
-          <el-carousel-item v-for="item in carouselImages" :key="item">
-            <img :src="item+carouselPrefix" class="image">
-          </el-carousel-item>
-        </el-carousel>
-      </div>
-      <ul class="list-inline">
-        <li><span class="link-black text-sm"><i class="el-icon-share" /> Share</span></li>
-        <li>
-          <span class="link-black text-sm">
-            <svg-icon icon-class="like" /> Like</span>
-        </li>
-      </ul>
-    </div>
-  </div>
-</template>
-
-<script>
-const avatarPrefix = '?imageView2/1/w/80/h/80'
-const carouselPrefix = '?imageView2/2/h/440'
-
-export default {
-  data() {
-    return {
-      carouselImages: [
-        'https://wpimg.wallstcn.com/9679ffb0-9e0b-4451-9916-e21992218054.jpg',
-        'https://wpimg.wallstcn.com/bcce3734-0837-4b9f-9261-351ef384f75a.jpg',
-        'https://wpimg.wallstcn.com/d1d7b033-d75e-4cd6-ae39-fcd5f1c0a7c5.jpg',
-        'https://wpimg.wallstcn.com/50530061-851b-4ca5-9dc5-2fead928a939.jpg'
-      ],
-      avatarPrefix,
-      carouselPrefix
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.user-activity {
-  .user-block {
-
-    .username,
-    .description {
-      display: block;
-      margin-left: 50px;
-      padding: 2px 0;
-    }
-
-    .username{
-      font-size: 16px;
-      color: #000;
-    }
-
-    :after {
-      clear: both;
-    }
-
-    .img-circle {
-      border-radius: 50%;
-      width: 40px;
-      height: 40px;
-      float: left;
-    }
-
-    span {
-      font-weight: 500;
-      font-size: 12px;
-    }
-  }
-
-  .post {
-    font-size: 14px;
-    border-bottom: 1px solid #d2d6de;
-    margin-bottom: 15px;
-    padding-bottom: 15px;
-    color: #666;
-
-    .image {
-      width: 100%;
-      height: 100%;
-
-    }
-
-    .user-images {
-      padding-top: 20px;
-    }
-  }
-
-  .list-inline {
-    padding-left: 0;
-    margin-left: -5px;
-    list-style: none;
-
-    li {
-      display: inline-block;
-      padding-right: 5px;
-      padding-left: 5px;
-      font-size: 13px;
-    }
-
-    .link-black {
-
-      &:hover,
-      &:focus {
-        color: #999;
-      }
-    }
-  }
-
-}
-
-.box-center {
-  margin: 0 auto;
-  display: table;
-}
-
-.text-muted {
-  color: #777;
-}
-</style>
diff --git a/src/views/profile/components/Timeline.vue b/src/views/profile/components/Timeline.vue
deleted file mode 100644
index ba90b3d..0000000
--- a/src/views/profile/components/Timeline.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<template>
-  <div class="block">
-    <el-timeline>
-      <el-timeline-item v-for="(item,index) of timeline" :key="index" :timestamp="item.timestamp" placement="top">
-        <el-card>
-          <h4>{{ item.title }}</h4>
-          <p>{{ item.content }}</p>
-        </el-card>
-      </el-timeline-item>
-    </el-timeline>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      timeline: [
-        {
-          timestamp: '2019/4/20',
-          title: 'Update Github template',
-          content: 'PanJiaChen committed 2019/4/20 20:46'
-        },
-        {
-          timestamp: '2019/4/21',
-          title: 'Update Github template',
-          content: 'PanJiaChen committed 2019/4/21 20:46'
-        },
-        {
-          timestamp: '2019/4/22',
-          title: 'Build Template',
-          content: 'PanJiaChen committed 2019/4/22 20:46'
-        },
-        {
-          timestamp: '2019/4/23',
-          title: 'Release New Version',
-          content: 'PanJiaChen committed 2019/4/23 20:46'
-        }
-      ]
-    }
-  }
-}
-</script>
diff --git a/src/views/profile/components/UserCard.vue b/src/views/profile/components/UserCard.vue
deleted file mode 100644
index 2476f04..0000000
--- a/src/views/profile/components/UserCard.vue
+++ /dev/null
@@ -1,134 +0,0 @@
-<template>
-  <el-card style="margin-bottom:20px;">
-    <div slot="header" class="clearfix">
-      <span>About me</span>
-    </div>
-
-    <div class="user-profile">
-      <div class="box-center">
-        <pan-thumb :image="user.avatar" :height="'100px'" :width="'100px'" :hoverable="false">
-          <div>Hello</div>
-          {{ user.role }}
-        </pan-thumb>
-      </div>
-      <div class="box-center">
-        <div class="user-name text-center">{{ user.name }}</div>
-        <div class="user-role text-center text-muted">{{ user.role | uppercaseFirst }}</div>
-      </div>
-    </div>
-
-    <div class="user-bio">
-      <div class="user-education user-bio-section">
-        <div class="user-bio-section-header"><svg-icon icon-class="education" /><span>Education</span></div>
-        <div class="user-bio-section-body">
-          <div class="text-muted">
-            JS in Computer Science from the University of Technology
-          </div>
-        </div>
-      </div>
-
-      <div class="user-skills user-bio-section">
-        <div class="user-bio-section-header"><svg-icon icon-class="skill" /><span>Skills</span></div>
-        <div class="user-bio-section-body">
-          <div class="progress-item">
-            <span>Vue</span>
-            <el-progress :percentage="70" />
-          </div>
-          <div class="progress-item">
-            <span>JavaScript</span>
-            <el-progress :percentage="18" />
-          </div>
-          <div class="progress-item">
-            <span>Css</span>
-            <el-progress :percentage="12" />
-          </div>
-          <div class="progress-item">
-            <span>ESLint</span>
-            <el-progress :percentage="100" status="success" />
-          </div>
-        </div>
-      </div>
-    </div>
-  </el-card>
-</template>
-
-<script>
-import PanThumb from '@/components/PanThumb'
-
-export default {
-  components: { PanThumb },
-  props: {
-    user: {
-      type: Object,
-      default: () => {
-        return {
-          name: '',
-          email: '',
-          avatar: '',
-          role: ''
-        }
-      }
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.box-center {
-  margin: 0 auto;
-  display: table;
-}
-
-.text-muted {
-  color: #777;
-}
-
-.user-profile {
-  .user-name {
-    font-weight: bold;
-  }
-
-  .box-center {
-    padding-top: 10px;
-  }
-
-  .user-role {
-    padding-top: 10px;
-    font-weight: 400;
-    font-size: 14px;
-  }
-
-  .box-social {
-    padding-top: 30px;
-
-    .el-table {
-      border-top: 1px solid #dfe6ec;
-    }
-  }
-
-  .user-follow {
-    padding-top: 20px;
-  }
-}
-
-.user-bio {
-  margin-top: 20px;
-  color: #606266;
-
-  span {
-    padding-left: 4px;
-  }
-
-  .user-bio-section {
-    font-size: 14px;
-    padding: 15px 0;
-
-    .user-bio-section-header {
-      border-bottom: 1px solid #dfe6ec;
-      padding-bottom: 10px;
-      margin-bottom: 10px;
-      font-weight: bold;
-    }
-  }
-}
-</style>
diff --git a/src/views/profile/index.vue b/src/views/profile/index.vue
deleted file mode 100644
index 87e4f94..0000000
--- a/src/views/profile/index.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<template>
-  <div class="app-container">
-    <div v-if="user">
-      <el-row :gutter="20">
-
-        <el-col :span="6" :xs="24">
-          <user-card :user="user" />
-        </el-col>
-
-        <el-col :span="18" :xs="24">
-          <el-card>
-            <el-tabs v-model="activeTab">
-              <el-tab-pane label="Activity" name="activity">
-                <activity />
-              </el-tab-pane>
-              <el-tab-pane label="Timeline" name="timeline">
-                <timeline />
-              </el-tab-pane>
-              <el-tab-pane label="Account" name="account">
-                <account :user="user" />
-              </el-tab-pane>
-            </el-tabs>
-          </el-card>
-        </el-col>
-
-      </el-row>
-    </div>
-  </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import UserCard from './components/UserCard'
-import Activity from './components/Activity'
-import Timeline from './components/Timeline'
-import Account from './components/Account'
-
-export default {
-  name: 'Profile',
-  components: { UserCard, Activity, Timeline, Account },
-  data() {
-    return {
-      user: {},
-      activeTab: 'activity'
-    }
-  },
-  computed: {
-    ...mapGetters([
-      'name',
-      'avatar',
-      'roles'
-    ])
-  },
-  created() {
-    this.getUser()
-  },
-  methods: {
-    getUser() {
-      this.user = {
-        name: this.name,
-        role: this.roles.join(' | '),
-        email: 'admin@test.com',
-        avatar: this.avatar
-      }
-    }
-  }
-}
-</script>
diff --git a/src/views/qiniu/upload.vue b/src/views/qiniu/upload.vue
deleted file mode 100644
index 9dc9aed..0000000
--- a/src/views/qiniu/upload.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<template>
-  <el-upload :data="dataObj" :multiple="true" :before-upload="beforeUpload" action="https://upload.qbox.me" drag>
-    <i class="el-icon-upload" />
-    <div class="el-upload__text">
-      将文件拖到此处，或<em>点击上传</em>
-    </div>
-  </el-upload>
-</template>
-
-<script>
-import { getToken } from '@/api/qiniu'
-// 获取七牛token 后端通过Access Key,Secret Key,bucket等生成token
-// 七牛官方sdk https://developer.qiniu.com/sdk#official-sdk
-
-export default {
-  data() {
-    return {
-      dataObj: { token: '', key: '' },
-      image_uri: [],
-      fileList: []
-    }
-  },
-  methods: {
-    beforeUpload() {
-      const _self = this
-      return new Promise((resolve, reject) => {
-        getToken().then(response => {
-          const key = response.data.qiniu_key
-          const token = response.data.qiniu_token
-          _self._data.dataObj.token = token
-          _self._data.dataObj.key = key
-          resolve(true)
-        }).catch(err => {
-          console.log(err)
-          reject(false)
-        })
-      })
-    }
-  }
-}
-</script>
diff --git a/src/views/report-manage/Report.vue b/src/views/report-manage/Report.vue
new file mode 100644
index 0000000..8517a6d
--- /dev/null
+++ b/src/views/report-manage/Report.vue
@@ -0,0 +1,228 @@
+<template>
+  <div :class="$style.container">
+    <SearchBar
+      :placeholder="$t('module.report.reportList.reportName')"
+      :input-width="200"
+      @on-search="handleSearch"
+    >
+      <el-button type="success" icon="el-icon-plus" @click="handleAdd()">{{ "btn.add" | i18nFilter }}</el-button>
+      <el-button icon="el-icon-arrow-left" @click="$router.go(-1)">{{ 'btn.back' | i18nFilter }}</el-button>
+    </SearchBar>
+    <el-table
+      :data="tableDataList"
+      :class="$style.table"
+      :stripe="true"
+      :header-cell-style="{background:'#eef1f6',color:'#606266',height: '56px', textAlign: 'center'}"
+      :cell-style="{ textAlign: 'center' }"
+      size="medium"
+    >
+      <el-table-column prop="index" :label="'tableHeader.index' | i18nFilter" width="80" fixed="left" />
+      <el-table-column prop="fileName" :label="$t('module.report.reportList.reportName')" />
+      <el-table-column prop="reportType" :label="$t('module.report.reportList.reportSort')" width="300">
+        <template
+          slot-scope="scope"
+        ><el-select
+          v-model="scope.row.category"
+          :class="$style.select"
+          filterable
+          clearable
+          @change="reportChange(scope.row)"
+        >
+          <el-option
+            v-for="item in reportTypeList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          /> </el-select></template>
+      </el-table-column>
+      <el-table-column prop="createTime" :label="$t('module.report.reportList.createTime')" width="220">
+        <template slot-scope="scope">
+          <span>{{ scope.row.createTime | commonFilter(timeFormatter) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('module.report.reportList.operation')" width="420" fixed="right">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="primary"
+            icon="el-icon-search"
+            @click="handleView(scope.row.fileName)"
+          >{{ "btn.view" | i18nFilter }}</el-button>
+          <el-button
+            size="mini"
+            type="info"
+            icon="el-icon-edit"
+            @click="handleDesign(scope.row.name)"
+          >{{ "btn.design" | i18nFilter }}</el-button>
+          <el-button
+            size="mini"
+            type="info"
+            icon="el-icon-edit"
+            @click="handleEdit(scope.row.id)"
+          >{{ "btn.edit" | i18nFilter }}</el-button>
+          <el-button
+            type="danger"
+            size="mini"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row.id)"
+          >{{ "btn.delete" | i18nFilter }}</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      background
+      :hide-on-single-page="false"
+      :class="$style.table"
+      :current-page="page.current"
+      :page-sizes="[10, 20, 30, 40]"
+      :page-size="page.size"
+      layout="total, sizes, prev, pager, next"
+      :total="pageTotal"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+    <Report-edit v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="handleSearch" />
+  </div>
+</template>
+<script>
+import moment from 'moment'
+import { page, del, listCategory, update } from '@/api/report-manage/report.js'
+import SearchBar from './components/search-bar'
+import ReportEdit from './components/report-edit'
+import i18n from '@/lang'
+import { timeFormatter } from '@/filters'
+export default {
+  components: { SearchBar, ReportEdit },
+  filters: {
+    commonFilter: (source, filterType = a => a) => {
+      return filterType(source)
+    }
+  },
+  props: {},
+  data() {
+    return {
+      reportTypeList: [],
+      moment,
+      tableDataList: [],
+      pageTotal: 0,
+      page: {
+        current: 1,
+        size: 10
+      },
+      param: {},
+      addOrUpdateVisible: false,
+      timeFormatter
+    }
+  },
+  created() {
+    this.init()
+    this.handleSearch()
+  },
+  methods: {
+    init() {
+      listCategory({}).then(res => {
+        this.reportTypeList = res.data
+      })
+    },
+    handleSearch(param) {
+      this.param = param
+      console.log(param)
+      page({ ...param, key: param && param.keywords, category: this.$route.query.sortId, ...this.page }).then(
+        res => {
+          if (!res.data) {
+            return
+          }
+          this.pageTotal = res.data && res.data.total
+          console.log(this.pageTotal)
+          if (!res.data.records) {
+            this.tableDataList = []
+            return
+          }
+          this.tableDataList = res.data.records.map((m, index) => ({
+            ...m,
+            index: this.page.size * (this.page.current - 1) + index + 1
+          }))
+        }
+      )
+    },
+    handleView(name) {
+      this.$router.push({
+        path: '/form/report-view',
+        query: {
+          redirect: '/form/report',
+          name
+        }
+      })
+    },
+    handleAdd() {
+      this.$router.push({
+        path: '/form/report-design',
+        query: {
+          redirect: '/form/report'
+        }
+      })
+    },
+    handleDesign(name) {
+      this.$router.push({
+        path: '/form/report-design',
+        query: {
+          redirect: '/form/report',
+          name
+        }
+      })
+    },
+    handleEdit(id) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id)
+      })
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`)
+      this.page.size = val
+      this.handleSearch(this.param)
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`)
+      this.page.current = val
+      this.handleSearch(this.param)
+    },
+    handleDelete(id) {
+      this.$confirm(
+        i18n.t('deleteMsgBox.content'),
+        i18n.t('deleteMsgBox.hint'),
+        {
+          confirmButtonText: i18n.t('btn.confirm'),
+          cancelButtonText: i18n.t('btn.cancel'),
+          type: 'warning'
+        }
+      ).then(async() => {
+        del({ id }).then(res => {
+          this.page.current = 1
+          this.handleSearch(this.param)
+          this.$message({
+            type: 'info',
+            message: i18n.t('deleteMsgBox.doneMsg')
+          })
+        })
+      })
+    },
+    reportChange($e, row) {
+      console.log($e)
+      $e.url = $e.url || '-'
+      update($e).then(res => {
+        this.$message.info('更新成功！')
+        this.handleSearch()
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" module>
+.container {
+  .table {
+    margin: 16px;
+    width: 98.5%;
+  }
+}
+</style>
diff --git a/src/views/report-manage/ReportDesign.vue b/src/views/report-manage/ReportDesign.vue
new file mode 100644
index 0000000..2cec023
--- /dev/null
+++ b/src/views/report-manage/ReportDesign.vue
@@ -0,0 +1,47 @@
+<template>
+  <div v-loading="loading" :class="$style.container">
+    <iframe
+      id="zgboke"
+      :class="$style.mainIframe"
+      name="mainIframe"
+      :src="url"
+      frameborder="0"
+      scrolling="auto"
+    />
+  </div>
+</template>
+<script>
+export default {
+  components: {},
+  props: {},
+  data() {
+    return {
+      loading: true,
+      url: process.env.VUE_APP_REPORT_DESIGN_URL
+    }
+  },
+  mounted() {
+    const vm = this
+    console.log(this.$route.query)
+    const { name } = this.$route.query
+    this.url += name ? '?_u=db:' + this.$route.query.name : ''
+    const ifream = document.getElementById('zgboke')
+    ifream.onload = function() {
+      console.log('加载完成')
+      vm.loading = false
+    }
+  },
+  methods: {}
+}
+</script>
+<style lang="scss" module>
+.container {
+  margin: 0px 16px 0 8px;
+  width: 98.5%;
+  height: calc(100vh - 180px);
+  .mainIframe {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>
diff --git a/src/views/report-manage/ReportSort/AddForm.vue b/src/views/report-manage/ReportSort/AddForm.vue
new file mode 100644
index 0000000..88c26ab
--- /dev/null
+++ b/src/views/report-manage/ReportSort/AddForm.vue
@@ -0,0 +1,81 @@
+<!--
+ * @Date: 2021-01-12 09:37:27
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-04-01 10:22:56
+ * @FilePath: \basic-admin\src\views\EquipmentManager\BOMManager\AddForm.vue
+ * @Description: 物料BOM添加弹窗页面
+-->
+<template>
+  <div>
+    <el-dialog v-bind="$attrs" :title="$t('module.formManage.formSort.addDialogTitle')" v-on="$listeners" @open="onOpen" @close="onClose">
+      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="150px">
+        <el-form-item :label="$t('module.formManage.formSort.name')" prop="name">
+          <el-input v-model="formData.name" :placeholder="$t('module.formManage.formSort.name')" clearable :style="{width: '100%'}" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="close">{{ 'btn.cancel' | i18nFilter }}</el-button>
+        <el-button type="primary" :loading="waiting" @click="handelConfirm">{{ 'btn.confirm' | i18nFilter }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { add } from '@/api/report-manage/formSort'
+
+export default {
+  components: {},
+  inheritAttrs: false,
+  props: [],
+  data() {
+    return {
+      waiting: false,
+      formData: {
+        name: undefined
+      },
+      rules: {
+        name: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('module.formManage.formSort.name')]),
+          trigger: 'blur'
+        }]
+      }
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {
+    onOpen() {},
+    onClose() {
+      this.$refs['elForm'].resetFields()
+    },
+    close() {
+      this.$emit('update:visible', false)
+    },
+    handelConfirm() {
+      this.waiting = true
+      this.$refs['elForm'].validate(async valid => {
+        if (!valid) {
+          this.waiting = false
+          return
+        }
+        const result = await add(this.formData)
+        this.waiting = false
+        if (result.code === 0) {
+          this.$message({
+            type: 'success',
+            message: this.$t('baseTip.OperationSucc')
+          })
+        }
+        this.$emit('done')
+        this.close()
+      })
+    }
+  }
+}
+
+</script>
+<style>
+</style>
diff --git a/src/views/report-manage/ReportSort/EditForm.vue b/src/views/report-manage/ReportSort/EditForm.vue
new file mode 100644
index 0000000..19c5d0b
--- /dev/null
+++ b/src/views/report-manage/ReportSort/EditForm.vue
@@ -0,0 +1,93 @@
+<!--
+ * @Date: 2021-01-12 09:37:27
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-04-01 10:22:47
+ * @FilePath: \basic-admin\src\views\EquipmentManager\BOMManager\EditForm.vue
+ * @Description: 物料BOM编辑弹窗页面
+-->
+<template>
+  <div>
+    <el-dialog v-bind="$attrs" :title="$t('module.formManage.formSort.editDialogTitle')" v-on="$listeners" @open="onOpen" @close="onClose">
+      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="150px">
+        <el-form-item :label="$t('module.formManage.formSort.name')" prop="name">
+          <el-input v-model="formData.name" :placeholder="$t('module.formManage.formSort.name')" clearable :style="{width: '100%'}" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="close">{{ 'btn.cancel' | i18nFilter }}</el-button>
+        <el-button type="primary" @click="handelConfirm">{{ 'btn.confirm' | i18nFilter }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { getData, update } from '@/api/report-manage/formSort'
+export default {
+  components: {},
+  inheritAttrs: false,
+  props: {
+    targetInfo: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      formData: {
+        name: undefined
+      },
+      rules: {
+        name: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('module.formManage.formSort.name')]),
+          trigger: 'blur'
+        }]
+      }
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {
+    onOpen() {
+      this.getDetail()
+    },
+    onClose() {
+      this.$refs['elForm'].resetFields()
+    },
+    close() {
+      this.$emit('update:visible', false)
+    },
+    handelConfirm() {
+      this.$refs['elForm'].validate(async valid => {
+        if (!valid) return
+        const result = await update({
+          ...this.formData,
+          id: this.targetInfo?.id
+        })
+        if (result.code === 0) {
+          this.$message({
+            type: 'success',
+            message: this.$t('baseTip.OperationSucc')
+          })
+          this.$emit('done')
+          this.close()
+        }
+      })
+    },
+    async getDetail() {
+      const result = await getData({
+        id: this.targetInfo?.id
+      })
+      if (result.code === 0) {
+        this.formData = result.data
+        // console.log(result)
+      }
+    }
+  }
+}
+
+</script>
+<style>
+</style>
diff --git a/src/views/report-manage/ReportSort/index.vue b/src/views/report-manage/ReportSort/index.vue
new file mode 100644
index 0000000..6ac990a
--- /dev/null
+++ b/src/views/report-manage/ReportSort/index.vue
@@ -0,0 +1,119 @@
+<!--
+ * @Date: 2020-12-15 15:36:52
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-04-01 10:11:04
+ * @FilePath: \basic-admin\src\views\EquipmentManager\BOMManager\index.vue
+ * @Description:
+-->
+<template>
+  <div class="usermanager-container">
+    <div class="method-btn-area">
+      <el-input v-model="listQuery.name" :placeholder="$t('module.formManage.formSort.name')" style="width: 200px;" clearable />
+      <el-button @click="getList">{{ 'btn.search' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="showDialog = true">{{ 'btn.add' | i18nFilter }}</el-button>
+    </div>
+    <base-table :table-config="tableProps" :table-data="list" :is-loading="listLoading" :page="listQuery.current" :limit="listQuery.size">
+      <method-btn slot="handleBtn" :method-list="tableBtn" @clickBtn="handleClick" />
+    </base-table>
+    <pagination :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.size" @pagination="getList" />
+    <add-form :visible.sync="showDialog" @done="getList" />
+    <edit-form :visible.sync="showEditDialog" :target-info="{id: curEditId}" @done="getList" />
+  </div>
+</template>
+
+<script>
+// edit here
+const tableBtn = [{
+  type: 'edit',
+  btnName: 'btn.edit'
+}, {
+  type: 'delete',
+  btnName: 'btn.delete'
+}]
+const tableProps = [{
+  prop: 'name',
+  label: i18n.t('module.formManage.formSort.name'),
+  align: 'center'
+}]
+import AddForm from './AddForm'
+import EditForm from './EditForm'
+import BaseTable from '@/components/BaseTable'
+// edit here
+import { page, del } from '@/api/report-manage/formSort'
+import Pagination from '@/components/Pagination'
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import i18n from '@/lang'
+export default {
+  name: 'OrgManager',
+  components: { Pagination, BaseTable, MethodBtn, AddForm, EditForm },
+  props: {},
+  data() {
+    return {
+      tableBtn,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      showDialog: false,
+      curEditId: null,
+      showEditDialog: false,
+      listQuery: {
+        current: 1,
+        size: 10,
+        name: ''
+      }
+    }
+  },
+  created() {
+    this.getList()
+    // this.listLoading = false
+  },
+  mounted() {},
+  methods: {
+    handleClick(raw) {
+      console.log(raw)
+      switch (raw.type) {
+        case 'delete':
+          this.$confirm(i18n.t('deleteMsgBox.content'), i18n.t('deleteMsgBox.hint'), {
+            confirmButtonText: i18n.t('btn.confirm'),
+            cancelButtonText: i18n.t('btn.cancel'),
+            type: 'warning'
+          }).then(async() => {
+            // 走接口
+            const result = await del({
+              id: raw.data.id
+            })
+            if (result.code === 0) {
+              this.$message({
+                type: 'success',
+                message: i18n.t('deleteMsgBox.doneMsg')
+              })
+              this.getList()
+            }
+          })
+          break
+        case 'edit':
+          this.showEditDialog = true
+          this.curEditId = raw.data.id
+          break
+      }
+    },
+    async getList() {
+      this.listLoading = true
+      // edit here
+      const res = await page(this.listQuery)
+      if (res.code === 0) {
+        this.list = res.data.records
+        this.total = res.data.total
+        this.listLoading = false
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.usermanager-container{
+  padding: 10px;
+}
+</style>
diff --git a/src/views/report-manage/ReportSortChoise.vue b/src/views/report-manage/ReportSortChoise.vue
new file mode 100644
index 0000000..cbc9697
--- /dev/null
+++ b/src/views/report-manage/ReportSortChoise.vue
@@ -0,0 +1,144 @@
+<!--
+ * @Author: gtz
+ * @Date: 2021-04-16 10:57:43
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-04-23 14:13:48
+ * @Description: file content
+-->
+<template>
+  <div :class="$style.container" class="container">
+    <el-row class="sort-box" :gutter="20">
+      <el-col class="sort-item" :span="4" @click.native="handleClick('')">
+        <div class="sort-item-box">
+          <div class="sort-item-box-top">
+            <p>{{ $t('module.report.reportSort.all') }}</p>
+          </div>
+          <div class="sort-item-box-bottom">
+            {{ allNum }} {{ allNum > 1 ? 'Reports' : 'Report' }}
+          </div>
+        </div>
+      </el-col>
+      <el-col v-for="item in sortList" :key="item.id" class="sort-item" @click.native="handleClick(item.id)">
+        <div class="sort-item-box">
+          <div class="sort-item-box-top">
+            <p>{{ item.name }}</p>
+          </div>
+          <div class="sort-item-box-bottom">
+            {{ item.quantity }} {{ item.quantity > 1 ? 'Reports' : 'Report' }}
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+<script>
+import { list } from '@/api/report-manage/formSort'
+export default {
+  data() {
+    return {
+      sortList: [],
+      allNum: 0
+    }
+  },
+  created() {
+    this.init()
+  },
+  methods: {
+    init() {
+      list({}).then(res => {
+        this.allNum = 0
+        this.sortList = res.data
+        res.data.forEach(item => {
+          this.allNum += item.quantity
+        })
+      })
+    },
+    handleClick(id) {
+      this.$router.push({
+        name: 'ReportSortList',
+        query: {
+          sortId: id
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" module>
+.container {}
+</style>
+
+<style lang="scss">
+.container {
+  padding: 20px;
+  .sort-box {
+    .sort-item {
+      height: 400px;
+      width: 280px;
+      margin-bottom: 20px;
+      .sort-item-box{
+        width: 100%;
+        height: 400px;
+        background: #faefc2;
+        border-radius: 10px;
+        box-shadow: 0px 3px 3px rgba(0, 0, 0, .5);
+        cursor: pointer;
+        position: relative;
+        overflow: hidden;
+        .sort-item-box-top {
+          margin: 0 10%;
+          width: 80%;
+          height: 199px;
+          border-bottom: 1px solid #e3d47d;
+          color: #b3a995;
+          position: relative;
+          p {
+            width: 100%;
+            position: absolute;
+            bottom: 0px;
+            line-height: 50px;
+            font-size: 24px;
+            letter-spacing: 5px;
+            text-align: center;
+          }
+        }
+        .sort-item-box-bottom {
+          width: 100%;
+          height: 200px;
+          line-height: 200px;
+          font-size: 24px;
+          font-weight: bold;
+          text-align: center;
+          letter-spacing: 5px;
+          color: #6e7680;
+        }
+      }
+      .sort-item-box::before{
+        content: '';
+        position: absolute;
+        right: 0;
+        width: 4px;
+        height: 400px;
+        background: #f8e69b;
+      }
+      .sort-item-box::after{
+        content: '';
+        position: absolute;
+        right: 0;
+        top: 70px;
+        width: 18px;
+        height: 60px;
+        background: #f8e69b;
+        border-radius: 5px;
+      }
+      .sort-item-box:hover{
+        transition:border linear .2s,
+        box-shadow linear .2s;
+        border-color:rgba(141,39,142,.75);
+        box-shadow:0 0 5px rgba(111,1,32,3);
+        // border: 2px solid #fff;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/report-manage/ReportView.vue b/src/views/report-manage/ReportView.vue
new file mode 100644
index 0000000..dab39c9
--- /dev/null
+++ b/src/views/report-manage/ReportView.vue
@@ -0,0 +1,58 @@
+<!--
+ * @Author: gtz
+ * @Date: 2021-03-07 18:39:03
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-04-16 10:56:56
+ * @Description: file content
+-->
+<template>
+  <div v-loading="loading" :class="$style.container">
+    <HeaderTitleBar>
+      <span slot="title">{{ $route.query.name }}</span>
+    </HeaderTitleBar>
+    <iframe
+      id="reportView"
+      :class="$style.mainIframe"
+      name="mainIframe"
+      :src="url"
+      frameborder="0"
+      scrolling="auto"
+    />
+  </div>
+</template>
+<script>
+import HeaderTitleBar from '@/views/material-manage/components/header-title-bar'
+
+export default {
+  components: { HeaderTitleBar },
+  props: {},
+  data() {
+    return {
+      loading: true,
+      url: process.env.VUE_APP_REPORT_VIEW_URL
+    }
+  },
+  mounted() {
+    const vm = this
+    console.log(this.$route.query)
+    this.url += '?_u=db:' + this.$route.query.name + '.ureport.xml'
+    const ifream = document.getElementById('reportView')
+    ifream.onload = function() {
+      console.log('加载完成')
+      vm.loading = false
+    }
+  },
+  methods: {}
+}
+</script>
+<style lang="scss" module>
+.container {
+  margin: 0px 16px 0 8px;
+  width: 98.5%;
+  height: calc(100vh - 180px);
+  .mainIframe {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>
diff --git a/src/views/report-manage/components/AddLablePanel.vue b/src/views/report-manage/components/AddLablePanel.vue
new file mode 100644
index 0000000..137cf02
--- /dev/null
+++ b/src/views/report-manage/components/AddLablePanel.vue
@@ -0,0 +1,237 @@
+<template>
+  <div :class="$style.container">
+    <HeaderTitleBar>
+      <div slot="content">
+        <el-button type="success" @click="btnClickDesign">
+          ①模版设计
+        </el-button>
+        <el-button icon="ios-search" @click="btnClickPrint">
+          模版预览
+        </el-button>
+        <el-button icon="md-help" @click="btnClickInfo">
+          设计说明
+        </el-button>
+      </div>
+    </HeaderTitleBar>
+    <el-form
+      ref="printModel"
+      :model="printModel"
+      :rules="rules"
+      label-width="100px"
+      :class="$style.form"
+    >
+      <el-form-item
+        label="标签名称"
+        prop="printModelName"
+        :class="$style['form-item']"
+      >
+        <el-input v-model="printModel.printModelName" />
+      </el-form-item>
+      <el-form-item label="标签分类" prop="printModelType" :class="$style['form-item']">
+        <el-select
+          v-model="printModel.printModelType"
+          :class="$style.select"
+          filterable
+          clearable
+          placeholder="标签分类"
+        >
+          <el-option
+            v-for="item in printModelTypeList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item
+        label="标签内容"
+        prop="printModelContent"
+        :class="$style['form-item-remark']"
+      >
+        <el-input
+          v-model="printModelContent"
+          :readonly="true"
+          type="textarea"
+          :autosize="{ minRows: 4, maxRows: 8}"
+        />
+      </el-form-item>
+      <SubmitBar @on-cancle="close()" @on-submit="handleSubmit('printModel')" />
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { find } from 'lodash'
+import { list } from '@/api/material-manage/material'
+import { add, getInfo, update } from '@/api/material-manage/batch.js'
+import SubmitBar from '@/views/art/components/submit-bar'
+import HeaderTitleBar from '@/views/material-manage/components/header-title-bar'
+import { getLodop } from '@/assets/libs/LodopFuncs.js'
+
+export default {
+  name: 'Refueling',
+  components: {
+    SubmitBar,
+    HeaderTitleBar
+  },
+  props: {},
+  data() {
+    return {
+      printModelContent: '',
+      printModel: {
+        printModelId: '',
+        printModelCode: '',
+        printModelName: '',
+        printModelContent: '',
+        printModelType: 1,
+        isDefault: 0,
+        isPreview: 1,
+        state: 'normal'
+      },
+      printModelTypeList: [{
+        id: 1,
+        name: '自定义'
+      }],
+      rules: {
+        printModelName: [
+          { required: true, message: '标签名称不能为空', trigger: 'blur' },
+          { min: 1, message: '长度在3个字符以上', trigger: 'blur' }
+        ],
+        printModelType: [
+          {
+            required: true,
+            message: '请至少选择一个标签分类',
+            trigger: 'change'
+          }
+        ],
+        printModelContent: [
+          { required: true, message: '标签内容不能为空', trigger: 'blur' },
+          { min: 1, message: '长度在3个字符以上', trigger: 'blur' }
+        ]
+      },
+      id: null
+    }
+  },
+  watch: {},
+  created() {
+    this.init()
+  },
+  methods: {
+    init() {
+      this.id = this.$route.query.id
+      console.log(this.id)
+      console.log(!this.id)
+      list().then(res => {
+        console.log(res)
+        this.materialList = res.data
+        if (!this.id && this.materialList && this.materialList.length > 0) {
+          this.materialCode = this.materialList[0].externalCode
+          this.printModel.materialId = this.materialList[0].id
+        }
+      })
+      if (this.id) {
+        getInfo({ id: this.id }).then((res) => {
+          console.log(res)
+          this.printModel = res.data
+          this.materialCode = this.printModel.materialCode
+        })
+      }
+    },
+    handleSubmit(formName) {
+      console.log('handleSubmit')
+      this.$refs[formName].validate(valid => {
+        if (!valid) {
+          return false
+        }
+        if (this.id) {
+          update(this.printModel).then(res => {
+            this.close()
+          })
+        } else {
+          add(this.printModel).then(res => {
+            this.close()
+          })
+        }
+      })
+    },
+    close() {
+      this.$router.push({ path: this.$route.query.redirect })
+    },
+    materialChange(item) {
+      const material = find(this.materialList, m => m.id === item)
+      this.materialCode = material && material.externalCode
+    },
+    btnClickDesign() {
+      const LODOP = getLodop()
+      LODOP.PRINT_INIT('初始化打印')
+      LODOP.SET_PRINT_MODE('PROGRAM_CONTENT_BYVAR', true) // 生成程序时，内容参数有变量用变量，无变量用具体值
+      LODOP.SET_SHOW_MODE('DESIGN_IN_BROWSE', 1)
+      const modelCode = this.printModel.printModelContent
+      LODOP.ADD_PRINT_DATA('ProgramData', modelCode) // 装载模板
+      this.printModel.printModelContent = LODOP.PRINT_DESIGN()
+      if (LODOP.CVERSION) {
+        LODOP.On_Return = (TaskID, Value) => {
+          console.log('CVERSION')
+          console.log(Value)
+          this.printModel.printModelContent = Value
+          this.printModelContent = Value
+          this.getProgramData()
+        }
+      }
+    },
+    getProgramData() {
+      const LODOP = getLodop()
+      console.log('getProgramData')
+      const content = LODOP.GET_VALUE('ProgramData', 0) // 获得文档式模板
+      console.log(content)
+      if (LODOP.CVERSION) {
+        LODOP.On_Return = (TaskID, Value) => {
+          console.log(Value)
+          this.printModel.printModelContent = Value
+        }
+      }
+    },
+    btnClickPrint() {
+      const LODOP = getLodop()
+      const modelCode = this.printModel.printModelContent
+      LODOP.ADD_PRINT_DATA('ProgramData', modelCode) // 装载模板
+      // 按类名赋值
+      LODOP.SET_PRINT_STYLEA('name', 'CONTENT', '张三')
+      LODOP.SET_PRINT_STYLEA('code', 'CONTENT', '123455')
+      LODOP.PREVIEW()
+    },
+    btnClickInfo() {
+    }
+  }
+}
+</script>
+<style lang="scss" module>
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .form {
+    width: 60%;
+    margin-top: 30px;
+    display: flex;
+    flex-flow: wrap;
+    .form-item {
+      width: 50%;
+    }
+    .form-item-remark {
+      width: 100%;
+    }
+  }
+  .input {
+    display: flex;
+    margin: 8px 16px 8px 4px;
+    align-items: center;
+    .select {
+      width: 100%;
+    }
+  }
+  .select {
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/views/report-manage/components/report-edit.vue b/src/views/report-manage/components/report-edit.vue
new file mode 100644
index 0000000..27d3779
--- /dev/null
+++ b/src/views/report-manage/components/report-edit.vue
@@ -0,0 +1,87 @@
+<!--
+ * @Author: gtz
+ * @Date: 2021-04-22 19:31:36
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-04-22 20:40:57
+ * @Description: file content
+-->
+<template>
+  <el-dialog
+    :title="'btn.edit' | i18nFilter"
+    :visible.sync="visible"
+  >
+    <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="120px" @keyup.enter.native="dataFormSubmit()">
+      <el-form-item :label="$t('module.report.reportList.reportName')" prop="fileName">
+        <el-input v-model="dataForm.fileName" :placeholder="$i18nForm(['placeholder.input', $t('module.report.reportList.reportName')])" clearable />
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { getInfo, update } from '@/api/report-manage/report'
+
+export default {
+  data() {
+    return {
+      visible: false,
+      dataForm: {
+        id: null,
+        fileName: '',
+        name: ''
+      },
+      dataRule: {
+        fileName: [
+          {
+            required: true,
+            message: this.$i18nForm(['placeholder.input', this.$t('module.report.reportList.reportName')]),
+            trigger: 'blur'
+          }
+        ]
+      }
+    }
+  },
+  methods: {
+    init(id) {
+      this.dataForm.id = id || ''
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          getInfo({ id: this.dataForm.id }).then(res => {
+            this.dataForm.fileName = res.data.fileName
+          })
+        }
+      })
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          const data = {
+            'fileName': this.dataForm.fileName,
+            'id': this.dataForm.id
+          }
+          if (this.dataForm.id) {
+            update(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          }
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/report-manage/components/search-bar.vue b/src/views/report-manage/components/search-bar.vue
new file mode 100644
index 0000000..74f9d5c
--- /dev/null
+++ b/src/views/report-manage/components/search-bar.vue
@@ -0,0 +1,124 @@
+<template>
+  <div class="container">
+    <span class="label-name">{{ $t('module.teamManager.Handover.Keyword') }}</span>
+    <el-input
+      v-model="keywords"
+      :placeholder="placeholder"
+      :clearable="true"
+      :style="{
+        width: inputWidth + 'px',
+        maxWidth: '100%',
+        marginRight: '16px'
+      }"
+    />
+    <el-date-picker
+      v-if="showTime"
+      v-model="dts"
+      style="margin-right:16px;"
+      type="daterange"
+      align="right"
+      unlink-panels
+      :range-separator="'formItem.to' | i18nFilter"
+      :start-placeholder="'formItem.beginTime' | i18nFilter"
+      :end-placeholder="'formItem.endTime' | i18nFilter"
+      :picker-options="pickerOptions"
+    />
+    <el-button type="primary" icon="el-icon-search" @click="handleSearch()">
+      {{ "btn.search" | i18nFilter }}
+    </el-button>
+    <slot />
+  </div>
+</template>
+<script>
+import moment from 'moment'
+import i18n from '@/lang'
+
+const pickerOptions = {
+  shortcuts: [
+    {
+      text: i18n.t('datePickerOption.lastWeek'),
+      onClick(picker) {
+        const end = new Date()
+        const start = new Date()
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+        picker.$emit('pick', [start, end])
+      }
+    },
+    {
+      text: i18n.t('datePickerOption.lastMonth'),
+      onClick(picker) {
+        const end = new Date()
+        const start = new Date()
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+        picker.$emit('pick', [start, end])
+      }
+    },
+    {
+      text: i18n.t('datePickerOption.lastThreeMonths'),
+      onClick(picker) {
+        const end = new Date()
+        const start = new Date()
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+        picker.$emit('pick', [start, end])
+      }
+    }
+  ]
+}
+
+export default {
+  props: {
+    showTime: {
+      type: Boolean,
+      default: false
+    },
+    lableName: {
+      type: String,
+      default: '关键字'
+    },
+    placeholder: {
+      type: String,
+      default: '请输入'
+    },
+    inputWidth: {
+      type: Number,
+      default: 180
+    }
+  },
+  data() {
+    return {
+      keywords: '',
+      dts: ['', ''],
+      pickerOptions
+    }
+  },
+  methods: {
+    handleSearch() {
+      const param = {
+        name: this.keywords,
+        key: this.keywords,
+        begDate: this.dts[0]
+          ? moment(this.dts[0]).format('YYYY-MM-DD')
+          : this.dts[0],
+        endDate: this.dts[1]
+          ? moment(this.dts[1]).format('YYYY-MM-DD')
+          : this.dts[1]
+      }
+      this.$emit('on-search', param)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 50px;
+  padding: 4px 40px;
+  background-color: #eee;
+  .label-name {
+    margin-right: 8px;
+    font-size: 14px;
+  }
+}
+</style>
diff --git a/src/views/spc/index.vue b/src/views/spc/index.vue
new file mode 100644
index 0000000..873e2e3
--- /dev/null
+++ b/src/views/spc/index.vue
@@ -0,0 +1,28 @@
+<!--
+ * @Author: gtz
+ * @Date: 2021-03-08 11:45:53
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-04-25 16:12:30
+ * @Description: file content
+-->
+
+<template>
+  <div id="spc">
+    {{ $t('module.quality.spc.tip') }}
+  </div>
+</template>
+
+<script>
+export default {
+  mounted() {
+    window.open('http://58.210.206.230:8000/thirdLogin?username=Duan&password=123456&companyname=中建材')
+    sessionStorage.setItem('loginspc', 'login')
+  }
+}
+</script>
+
+<style lang="scss">
+#spc{
+  padding: 10px;
+}
+</style>
diff --git a/src/views/system-manage/organizationManege.vue b/src/views/system-manage/organizationManege.vue
new file mode 100644
index 0000000..7de708e
--- /dev/null
+++ b/src/views/system-manage/organizationManege.vue
@@ -0,0 +1,214 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-04-07 16:56:24
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-04-21 11:50:43
+ * @Description:
+-->
+<template>
+  <el-card class="box-card">
+    <div slot="header" class="clearfix">
+      <div style="float: right; padding: 3px 0">
+        <el-button type="primary" @click="showAdd">{{ 'btn.add' | i18nFilter }}</el-button>
+        <el-button type="success" :disabled="!formData.name" @click="isAdd=false;isEdit=true">{{ 'btn.edit' | i18nFilter }}</el-button>
+        <el-button type="danger" @click="deleteOrg">{{ 'btn.delete' | i18nFilter }}</el-button>
+      </div>
+    </div>
+    <el-form ref="formData" :model="formData" :rules="rules" size="medium" label-width="150px">
+      <el-form-item :label="$t('orgManage.orgName')" prop="name">
+        <el-input v-model="formData.name" :readonly="!isEdit && !isAdd" :placeholder="['placeholder.input', $t('orgManage.orgName')] | i18nFilterForm" clearable :style="{width: '100%'}" />
+      </el-form-item>
+      <el-form-item :label="$t('orgManage.parentOrg')" prop="parentId">
+        <el-select v-model="formData.parentId" :disabled="!isEdit && !isAdd" :placeholder="['placeholder.select', $t('orgManage.parentOrg')] | i18nFilterForm" clearable :style="{width: '100%'}">
+          <el-option
+            v-for="(item, index) in parentIdOptions"
+            :key="index"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="$t('orgManage.address')" prop="address">
+        <el-input v-model="formData.address" :readonly="!isEdit && !isAdd" :placeholder="['placeholder.input', $t('orgManage.address')] | i18nFilterForm" clearable :style="{width: '100%'}" />
+      </el-form-item>
+      <el-form-item :label="$t('orgManage.phone')" prop="phone">
+        <el-input v-model="formData.phone" :readonly="!isEdit && !isAdd" :placeholder="['placeholder.input', $t('orgManage.phone')] | i18nFilterForm" clearable :style="{width: '100%'}" />
+      </el-form-item>
+      <el-form-item :label="$t('orgManage.contact')" prop="contact">
+        <el-input v-model="formData.contact" :readonly="!isEdit && !isAdd" :placeholder="['placeholder.input', $t('orgManage.contact')] | i18nFilterForm" clearable :style="{width: '100%'}" />
+      </el-form-item>
+      <el-form-item :label="$t('orgManage.email')" prop="email">
+        <el-input v-model="formData.email" :readonly="!isEdit && !isAdd" :placeholder="['placeholder.input', $t('orgManage.email')] | i18nFilterForm" clearable :style="{width: '100%'}" />
+      </el-form-item>
+      <el-form-item :label="$t('orgManage.remark')" prop="remark">
+        <el-input v-model="formData.remark" :readonly="!isEdit && !isAdd" :placeholder="['placeholder.input', $t('orgManage.remark')] | i18nFilterForm" clearable :style="{width: '100%'}" />
+      </el-form-item>
+    </el-form>
+    <div v-show="isEdit||isAdd" style="text-align:center">
+      <el-button type="primary" @click="resetForm">{{ 'btn.reset' | i18nFilter }}</el-button>
+      <el-button type="success" @click="submitForm">{{ 'btn.submit' | i18nFilter }}</el-button>
+    </div>
+  </el-card>
+</template>
+
+<script>
+import { getOrgDetail, addOrg, editOrg, delOrg } from '@/api/org'
+import { getOrgList } from '@/api/org'
+
+export default {
+  data() {
+    return {
+      isEdit: false,
+      isAdd: false,
+      formData: {
+        id: '',
+        name: undefined,
+        parentId: undefined,
+        address: undefined,
+        phone: undefined,
+        contact: undefined,
+        email: undefined,
+        remark: undefined
+      },
+      parentId: '',
+      rules: {
+        name: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('orgManage.orgName')]),
+          trigger: 'blur'
+        }],
+        parentId: [],
+        address: [],
+        phone: [],
+        contact: [],
+        email: [],
+        remark: []
+      },
+      parentIdOptions: [],
+      listQuery: {
+        current: 1,
+        size: 500
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    async getList() {
+      // edit here
+      const res = await getOrgList(this.listQuery)
+      if (res.code === 0) {
+        this.parentIdOptions = res.data.records
+      }
+    },
+    init(id) {
+      this.isEdit = false
+      this.isAdd = false
+      this.$nextTick(() => {
+        this.$refs['formData'].resetFields()
+        if (id) {
+          getOrgDetail(id).then(res => {
+            this.formData = res.data
+            this.parentId = res.data.id
+          })
+          this.formData.id = id
+        }
+      })
+    },
+    resetForm() {
+      this.$refs['formData'].resetFields()
+    },
+    showAdd() {
+      this.isAdd = true
+      this.isEdit = false
+      this.$refs['formData'].resetFields()
+      this.formData.parentId = this.parentId
+    },
+    submitForm() {
+      if (this.isAdd) {
+        this.addOrg()
+      } else if (this.isEdit) {
+        this.editOrg()
+      }
+    },
+    addOrg() {
+      this.$refs['formData'].validate((valid) => {
+        if (valid) {
+          const data = this.formData
+          data.id = ''
+          addOrg(data).then(res => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+                this.isEdit = false
+                this.isAdd = false
+                this.$emit('refreshDataList')
+              }
+            })
+          })
+        }
+      })
+    },
+    editOrg() {
+      this.$refs['formData'].validate((valid) => {
+        if (valid) {
+          const data = this.formData
+          editOrg(data).then(res => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+                this.isEdit = false
+                this.isAdd = false
+                this.$emit('refreshDataList')
+              }
+            })
+          })
+        }
+      })
+    },
+    deleteOrg() {
+      delOrg(this.formData.id).then(response => {
+        this.$message({
+          message: this.$t('module.basicData.visual.success'),
+          type: 'success',
+          duration: 1500,
+          onClose: () => {
+            this.getList()
+            this.$refs['formData'].resetFields()
+            this.$emit('refreshDataList')
+          }
+        })
+      })
+    }
+  }
+}
+</script>
+<style scoped>
+  .text {
+    font-size: 14px;
+  }
+
+  .item {
+    margin-bottom: 18px;
+  }
+
+  .clearfix:before,
+  .clearfix:after {
+    display: table;
+    content: "";
+  }
+  .clearfix:after {
+    clear: both
+  }
+
+  .box-card {
+    width: 100%;
+  }
+</style>
diff --git a/src/views/system-manage/sideTree.vue b/src/views/system-manage/sideTree.vue
new file mode 100644
index 0000000..bc32725
--- /dev/null
+++ b/src/views/system-manage/sideTree.vue
@@ -0,0 +1,69 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-04-06 19:33:11
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-04-26 13:56:33
+ * @Description:
+-->
+<template>
+  <el-tree :data="dataList" :props="defaultProps" @node-click="handleNodeClick" />
+</template>
+
+<script>
+export default {
+  props: {
+    menuList: {
+      type: Array,
+      default: () => {
+        []
+      }
+    }
+  },
+  data() {
+    return {
+      defaultProps: {
+        children: 'children',
+        label: 'name'
+      },
+      dataList: []
+    }
+  },
+  created() {
+    this.init()
+  },
+  methods: {
+    init() {
+      this.dataList.splice(0, this.dataList.length)
+      this.menuList.forEach(item => {
+        if (item.parentId === '-1') {
+          this.dataList.push(item)
+        } else {
+          this.append(item)
+        }
+      })
+    },
+    append(child) {
+      this.menuList.forEach(item => {
+        if (child.parentId === item.id) {
+          if (!item.children) {
+            this.$set(item, 'children', [])
+          }
+          item.children.push(child)
+        }
+      })
+    },
+    handleNodeClick(data) {
+      this.$emit('getOrganization', data)
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .el-tree >>> .el-tree-node__label {
+    font-size: 20px;
+  }
+  .el-tree >>> .el-tree-node__expand-icon {
+    font-size: 20px;
+  }
+</style>
diff --git a/src/views/tab/components/TabPane.vue b/src/views/tab/components/TabPane.vue
deleted file mode 100644
index 3fb1439..0000000
--- a/src/views/tab/components/TabPane.vue
+++ /dev/null
@@ -1,103 +0,0 @@
-<template>
-  <el-table :data="list" border fit highlight-current-row style="width: 100%">
-    <el-table-column
-      v-loading="loading"
-      align="center"
-      label="ID"
-      width="65"
-      element-loading-text="请给我点时间！"
-    >
-      <template slot-scope="scope">
-        <span>{{ scope.row.id }}</span>
-      </template>
-    </el-table-column>
-
-    <el-table-column width="180px" align="center" label="Date">
-      <template slot-scope="scope">
-        <span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
-      </template>
-    </el-table-column>
-
-    <el-table-column min-width="300px" label="Title">
-      <template slot-scope="{row}">
-        <span>{{ row.title }}</span>
-        <el-tag>{{ row.type }}</el-tag>
-      </template>
-    </el-table-column>
-
-    <el-table-column width="110px" align="center" label="Author">
-      <template slot-scope="scope">
-        <span>{{ scope.row.author }}</span>
-      </template>
-    </el-table-column>
-
-    <el-table-column width="120px" label="Importance">
-      <template slot-scope="scope">
-        <svg-icon v-for="n in +scope.row.importance" :key="n" icon-class="star" />
-      </template>
-    </el-table-column>
-
-    <el-table-column align="center" label="Readings" width="95">
-      <template slot-scope="scope">
-        <span>{{ scope.row.pageviews }}</span>
-      </template>
-    </el-table-column>
-
-    <el-table-column class-name="status-col" label="Status" width="110">
-      <template slot-scope="{row}">
-        <el-tag :type="row.status | statusFilter">
-          {{ row.status }}
-        </el-tag>
-      </template>
-    </el-table-column>
-  </el-table>
-</template>
-
-<script>
-import { fetchList } from '@/api/article'
-
-export default {
-  filters: {
-    statusFilter(status) {
-      const statusMap = {
-        published: 'success',
-        draft: 'info',
-        deleted: 'danger'
-      }
-      return statusMap[status]
-    }
-  },
-  props: {
-    type: {
-      type: String,
-      default: 'CN'
-    }
-  },
-  data() {
-    return {
-      list: null,
-      listQuery: {
-        page: 1,
-        limit: 5,
-        type: this.type,
-        sort: '+id'
-      },
-      loading: false
-    }
-  },
-  created() {
-    this.getList()
-  },
-  methods: {
-    getList() {
-      this.loading = true
-      this.$emit('create') // for test
-      fetchList(this.listQuery).then(response => {
-        this.list = response.data.items
-        this.loading = false
-      })
-    }
-  }
-}
-</script>
-
diff --git a/src/views/tab/index.vue b/src/views/tab/index.vue
deleted file mode 100644
index 2a35fa5..0000000
--- a/src/views/tab/index.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<template>
-  <div class="tab-container">
-    <el-tag>mounted times ：{{ createdTimes }}</el-tag>
-    <el-alert :closable="false" style="width:200px;display:inline-block;vertical-align: middle;margin-left:30px;" title="Tab with keep-alive" type="success" />
-    <el-tabs v-model="activeName" style="margin-top:15px;" type="border-card">
-      <el-tab-pane v-for="item in tabMapOptions" :key="item.key" :label="item.label" :name="item.key">
-        <keep-alive>
-          <tab-pane v-if="activeName==item.key" :type="item.key" @create="showCreatedTimes" />
-        </keep-alive>
-      </el-tab-pane>
-    </el-tabs>
-  </div>
-</template>
-
-<script>
-import TabPane from './components/TabPane'
-
-export default {
-  name: 'Tab',
-  components: { TabPane },
-  data() {
-    return {
-      tabMapOptions: [
-        { label: 'China', key: 'CN' },
-        { label: 'USA', key: 'US' },
-        { label: 'Japan', key: 'JP' },
-        { label: 'Eurozone', key: 'EU' }
-      ],
-      activeName: 'CN',
-      createdTimes: 0
-    }
-  },
-  watch: {
-    activeName(val) {
-      this.$router.push(`${this.$route.path}?tab=${val}`)
-    }
-  },
-  created() {
-    // init the default selected tab
-    const tab = this.$route.query.tab
-    if (tab) {
-      this.activeName = tab
-    }
-  },
-  methods: {
-    showCreatedTimes() {
-      this.createdTimes = this.createdTimes + 1
-    }
-  }
-}
-</script>
-
-<style scoped>
-  .tab-container {
-    margin: 30px;
-  }
-</style>
diff --git a/src/views/table/complex-table.vue b/src/views/table/complex-table.vue
deleted file mode 100644
index 295c5fc..0000000
--- a/src/views/table/complex-table.vue
+++ /dev/null
@@ -1,379 +0,0 @@
-<template>
-  <div class="app-container">
-    <div class="filter-container">
-      <el-input v-model="listQuery.title" placeholder="Title" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
-      <el-select v-model="listQuery.importance" placeholder="Imp" clearable style="width: 90px" class="filter-item">
-        <el-option v-for="item in importanceOptions" :key="item" :label="item" :value="item" />
-      </el-select>
-      <el-select v-model="listQuery.type" placeholder="Type" clearable class="filter-item" style="width: 130px">
-        <el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name+'('+item.key+')'" :value="item.key" />
-      </el-select>
-      <el-select v-model="listQuery.sort" style="width: 140px" class="filter-item" @change="handleFilter">
-        <el-option v-for="item in sortOptions" :key="item.key" :label="item.label" :value="item.key" />
-      </el-select>
-      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
-        Search
-      </el-button>
-      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
-        Add
-      </el-button>
-      <el-button v-waves :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">
-        Export
-      </el-button>
-      <el-checkbox v-model="showReviewer" class="filter-item" style="margin-left:15px;" @change="tableKey=tableKey+1">
-        reviewer
-      </el-checkbox>
-    </div>
-
-    <el-table
-      :key="tableKey"
-      v-loading="listLoading"
-      :data="list"
-      border
-      fit
-      highlight-current-row
-      style="width: 100%;"
-      @sort-change="sortChange"
-    >
-      <el-table-column label="ID" prop="id" sortable="custom" align="center" width="80" :class-name="getSortClass('id')">
-        <template slot-scope="{row}">
-          <span>{{ row.id }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="Date" width="150px" align="center">
-        <template slot-scope="{row}">
-          <span>{{ row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="Title" min-width="150px">
-        <template slot-scope="{row}">
-          <span class="link-type" @click="handleUpdate(row)">{{ row.title }}</span>
-          <el-tag>{{ row.type | typeFilter }}</el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="Author" width="110px" align="center">
-        <template slot-scope="{row}">
-          <span>{{ row.author }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column v-if="showReviewer" label="Reviewer" width="110px" align="center">
-        <template slot-scope="{row}">
-          <span style="color:red;">{{ row.reviewer }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="Imp" width="80px">
-        <template slot-scope="{row}">
-          <svg-icon v-for="n in + row.importance" :key="n" icon-class="star" class="meta-item__icon" />
-        </template>
-      </el-table-column>
-      <el-table-column label="Readings" align="center" width="95">
-        <template slot-scope="{row}">
-          <span v-if="row.pageviews" class="link-type" @click="handleFetchPv(row.pageviews)">{{ row.pageviews }}</span>
-          <span v-else>0</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="Status" class-name="status-col" width="100">
-        <template slot-scope="{row}">
-          <el-tag :type="row.status | statusFilter">
-            {{ row.status }}
-          </el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="Actions" align="center" width="230" class-name="small-padding fixed-width">
-        <template slot-scope="{row,$index}">
-          <el-button type="primary" size="mini" @click="handleUpdate(row)">
-            Edit
-          </el-button>
-          <el-button v-if="row.status!='published'" size="mini" type="success" @click="handleModifyStatus(row,'published')">
-            Publish
-          </el-button>
-          <el-button v-if="row.status!='draft'" size="mini" @click="handleModifyStatus(row,'draft')">
-            Draft
-          </el-button>
-          <el-button v-if="row.status!='deleted'" size="mini" type="danger" @click="handleDelete(row,$index)">
-            Delete
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
-
-    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
-      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
-        <el-form-item label="Type" prop="type">
-          <el-select v-model="temp.type" class="filter-item" placeholder="Please select">
-            <el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="Date" prop="timestamp">
-          <el-date-picker v-model="temp.timestamp" type="datetime" placeholder="Please pick a date" />
-        </el-form-item>
-        <el-form-item label="Title" prop="title">
-          <el-input v-model="temp.title" />
-        </el-form-item>
-        <el-form-item label="Status">
-          <el-select v-model="temp.status" class="filter-item" placeholder="Please select">
-            <el-option v-for="item in statusOptions" :key="item" :label="item" :value="item" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="Imp">
-          <el-rate v-model="temp.importance" :colors="['#99A9BF', '#F7BA2A', '#FF9900']" :max="3" style="margin-top:8px;" />
-        </el-form-item>
-        <el-form-item label="Remark">
-          <el-input v-model="temp.remark" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" placeholder="Please input" />
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="dialogFormVisible = false">
-          Cancel
-        </el-button>
-        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
-          Confirm
-        </el-button>
-      </div>
-    </el-dialog>
-
-    <el-dialog :visible.sync="dialogPvVisible" title="Reading statistics">
-      <el-table :data="pvData" border fit highlight-current-row style="width: 100%">
-        <el-table-column prop="key" label="Channel" />
-        <el-table-column prop="pv" label="Pv" />
-      </el-table>
-      <span slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="dialogPvVisible = false">Confirm</el-button>
-      </span>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import { fetchList, fetchPv, createArticle, updateArticle } from '@/api/article'
-import waves from '@/directive/waves' // waves directive
-import { parseTime } from '@/utils'
-import Pagination from '@/components/Pagination' // secondary package based on el-pagination
-
-const calendarTypeOptions = [
-  { key: 'CN', display_name: 'China' },
-  { key: 'US', display_name: 'USA' },
-  { key: 'JP', display_name: 'Japan' },
-  { key: 'EU', display_name: 'Eurozone' }
-]
-
-// arr to obj, such as { CN : "China", US : "USA" }
-const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
-  acc[cur.key] = cur.display_name
-  return acc
-}, {})
-
-export default {
-  name: 'ComplexTable',
-  components: { Pagination },
-  directives: { waves },
-  filters: {
-    statusFilter(status) {
-      const statusMap = {
-        published: 'success',
-        draft: 'info',
-        deleted: 'danger'
-      }
-      return statusMap[status]
-    },
-    typeFilter(type) {
-      return calendarTypeKeyValue[type]
-    }
-  },
-  data() {
-    return {
-      tableKey: 0,
-      list: null,
-      total: 0,
-      listLoading: true,
-      listQuery: {
-        page: 1,
-        limit: 20,
-        importance: undefined,
-        title: undefined,
-        type: undefined,
-        sort: '+id'
-      },
-      importanceOptions: [1, 2, 3],
-      calendarTypeOptions,
-      sortOptions: [{ label: 'ID Ascending', key: '+id' }, { label: 'ID Descending', key: '-id' }],
-      statusOptions: ['published', 'draft', 'deleted'],
-      showReviewer: false,
-      temp: {
-        id: undefined,
-        importance: 1,
-        remark: '',
-        timestamp: new Date(),
-        title: '',
-        type: '',
-        status: 'published'
-      },
-      dialogFormVisible: false,
-      dialogStatus: '',
-      textMap: {
-        update: 'Edit',
-        create: 'Create'
-      },
-      dialogPvVisible: false,
-      pvData: [],
-      rules: {
-        type: [{ required: true, message: 'type is required', trigger: 'change' }],
-        timestamp: [{ type: 'date', required: true, message: 'timestamp is required', trigger: 'change' }],
-        title: [{ required: true, message: 'title is required', trigger: 'blur' }]
-      },
-      downloadLoading: false
-    }
-  },
-  created() {
-    this.getList()
-  },
-  methods: {
-    getList() {
-      this.listLoading = true
-      fetchList(this.listQuery).then(response => {
-        this.list = response.data.items
-        this.total = response.data.total
-
-        // Just to simulate the time of the request
-        setTimeout(() => {
-          this.listLoading = false
-        }, 1.5 * 1000)
-      })
-    },
-    handleFilter() {
-      this.listQuery.page = 1
-      this.getList()
-    },
-    handleModifyStatus(row, status) {
-      this.$message({
-        message: '操作Success',
-        type: 'success'
-      })
-      row.status = status
-    },
-    sortChange(data) {
-      const { prop, order } = data
-      if (prop === 'id') {
-        this.sortByID(order)
-      }
-    },
-    sortByID(order) {
-      if (order === 'ascending') {
-        this.listQuery.sort = '+id'
-      } else {
-        this.listQuery.sort = '-id'
-      }
-      this.handleFilter()
-    },
-    resetTemp() {
-      this.temp = {
-        id: undefined,
-        importance: 1,
-        remark: '',
-        timestamp: new Date(),
-        title: '',
-        status: 'published',
-        type: ''
-      }
-    },
-    handleCreate() {
-      this.resetTemp()
-      this.dialogStatus = 'create'
-      this.dialogFormVisible = true
-      this.$nextTick(() => {
-        this.$refs['dataForm'].clearValidate()
-      })
-    },
-    createData() {
-      this.$refs['dataForm'].validate((valid) => {
-        if (valid) {
-          this.temp.id = parseInt(Math.random() * 100) + 1024 // mock a id
-          this.temp.author = 'vue-element-admin'
-          createArticle(this.temp).then(() => {
-            this.list.unshift(this.temp)
-            this.dialogFormVisible = false
-            this.$notify({
-              title: 'Success',
-              message: 'Created Successfully',
-              type: 'success',
-              duration: 2000
-            })
-          })
-        }
-      })
-    },
-    handleUpdate(row) {
-      this.temp = Object.assign({}, row) // copy obj
-      this.temp.timestamp = new Date(this.temp.timestamp)
-      this.dialogStatus = 'update'
-      this.dialogFormVisible = true
-      this.$nextTick(() => {
-        this.$refs['dataForm'].clearValidate()
-      })
-    },
-    updateData() {
-      this.$refs['dataForm'].validate((valid) => {
-        if (valid) {
-          const tempData = Object.assign({}, this.temp)
-          tempData.timestamp = +new Date(tempData.timestamp) // change Thu Nov 30 2017 16:41:05 GMT+0800 (CST) to 1512031311464
-          updateArticle(tempData).then(() => {
-            const index = this.list.findIndex(v => v.id === this.temp.id)
-            this.list.splice(index, 1, this.temp)
-            this.dialogFormVisible = false
-            this.$notify({
-              title: 'Success',
-              message: 'Update Successfully',
-              type: 'success',
-              duration: 2000
-            })
-          })
-        }
-      })
-    },
-    handleDelete(row, index) {
-      this.$notify({
-        title: 'Success',
-        message: 'Delete Successfully',
-        type: 'success',
-        duration: 2000
-      })
-      this.list.splice(index, 1)
-    },
-    handleFetchPv(pv) {
-      fetchPv(pv).then(response => {
-        this.pvData = response.data.pvData
-        this.dialogPvVisible = true
-      })
-    },
-    handleDownload() {
-      this.downloadLoading = true
-      import('@/vendor/Export2Excel').then(excel => {
-        const tHeader = ['timestamp', 'title', 'type', 'importance', 'status']
-        const filterVal = ['timestamp', 'title', 'type', 'importance', 'status']
-        const data = this.formatJson(filterVal)
-        excel.export_json_to_excel({
-          header: tHeader,
-          data,
-          filename: 'table-list'
-        })
-        this.downloadLoading = false
-      })
-    },
-    formatJson(filterVal) {
-      return this.list.map(v => filterVal.map(j => {
-        if (j === 'timestamp') {
-          return parseTime(v[j])
-        } else {
-          return v[j]
-        }
-      }))
-    },
-    getSortClass: function(key) {
-      const sort = this.listQuery.sort
-      return sort === `+${key}` ? 'ascending' : 'descending'
-    }
-  }
-}
-</script>
diff --git a/src/views/table/drag-table.vue b/src/views/table/drag-table.vue
deleted file mode 100644
index 3b5c890..0000000
--- a/src/views/table/drag-table.vue
+++ /dev/null
@@ -1,153 +0,0 @@
-<template>
-  <div class="app-container">
-    <!-- Note that row-key is necessary to get a correct row order. -->
-    <el-table ref="dragTable" v-loading="listLoading" :data="list" row-key="id" border fit highlight-current-row style="width: 100%">
-      <el-table-column align="center" label="ID" width="65">
-        <template slot-scope="{row}">
-          <span>{{ row.id }}</span>
-        </template>
-      </el-table-column>
-
-      <el-table-column width="180px" align="center" label="Date">
-        <template slot-scope="{row}">
-          <span>{{ row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
-        </template>
-      </el-table-column>
-
-      <el-table-column min-width="300px" label="Title">
-        <template slot-scope="{row}">
-          <span>{{ row.title }}</span>
-        </template>
-      </el-table-column>
-
-      <el-table-column width="110px" align="center" label="Author">
-        <template slot-scope="{row}">
-          <span>{{ row.author }}</span>
-        </template>
-      </el-table-column>
-
-      <el-table-column width="100px" label="Importance">
-        <template slot-scope="{row}">
-          <svg-icon v-for="n in + row.importance" :key="n" icon-class="star" class="icon-star" />
-        </template>
-      </el-table-column>
-
-      <el-table-column align="center" label="Readings" width="95">
-        <template slot-scope="{row}">
-          <span>{{ row.pageviews }}</span>
-        </template>
-      </el-table-column>
-
-      <el-table-column class-name="status-col" label="Status" width="110">
-        <template slot-scope="{row}">
-          <el-tag :type="row.status | statusFilter">
-            {{ row.status }}
-          </el-tag>
-        </template>
-      </el-table-column>
-
-      <el-table-column align="center" label="Drag" width="80">
-        <template slot-scope="{}">
-          <svg-icon class="drag-handler" icon-class="drag" />
-        </template>
-      </el-table-column>
-    </el-table>
-    <div class="show-d">
-      <el-tag>The default order :</el-tag> {{ oldList }}
-    </div>
-    <div class="show-d">
-      <el-tag>The after dragging order :</el-tag> {{ newList }}
-    </div>
-  </div>
-</template>
-
-<script>
-import { fetchList } from '@/api/article'
-import Sortable from 'sortablejs'
-
-export default {
-  name: 'DragTable',
-  filters: {
-    statusFilter(status) {
-      const statusMap = {
-        published: 'success',
-        draft: 'info',
-        deleted: 'danger'
-      }
-      return statusMap[status]
-    }
-  },
-  data() {
-    return {
-      list: null,
-      total: null,
-      listLoading: true,
-      listQuery: {
-        page: 1,
-        limit: 10
-      },
-      sortable: null,
-      oldList: [],
-      newList: []
-    }
-  },
-  created() {
-    this.getList()
-  },
-  methods: {
-    async getList() {
-      this.listLoading = true
-      const { data } = await fetchList(this.listQuery)
-      this.list = data.items
-      this.total = data.total
-      this.listLoading = false
-      this.oldList = this.list.map(v => v.id)
-      this.newList = this.oldList.slice()
-      this.$nextTick(() => {
-        this.setSort()
-      })
-    },
-    setSort() {
-      const el = this.$refs.dragTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
-      this.sortable = Sortable.create(el, {
-        ghostClass: 'sortable-ghost', // Class name for the drop placeholder,
-        setData: function(dataTransfer) {
-          // to avoid Firefox bug
-          // Detail see : https://github.com/RubaXa/Sortable/issues/1012
-          dataTransfer.setData('Text', '')
-        },
-        onEnd: evt => {
-          const targetRow = this.list.splice(evt.oldIndex, 1)[0]
-          this.list.splice(evt.newIndex, 0, targetRow)
-
-          // for show the changes, you can delete in you code
-          const tempIndex = this.newList.splice(evt.oldIndex, 1)[0]
-          this.newList.splice(evt.newIndex, 0, tempIndex)
-        }
-      })
-    }
-  }
-}
-</script>
-
-<style>
-.sortable-ghost{
-  opacity: .8;
-  color: #fff!important;
-  background: #42b983!important;
-}
-</style>
-
-<style scoped>
-.icon-star{
-  margin-right:2px;
-}
-.drag-handler{
-  width: 20px;
-  height: 20px;
-  cursor: pointer;
-}
-.show-d{
-  margin-top: 15px;
-}
-</style>
diff --git a/src/views/table/dynamic-table/components/FixedThead.vue b/src/views/table/dynamic-table/components/FixedThead.vue
deleted file mode 100644
index c3deb92..0000000
--- a/src/views/table/dynamic-table/components/FixedThead.vue
+++ /dev/null
@@ -1,62 +0,0 @@
-<template>
-  <div class="app-container">
-    <div class="filter-container">
-      <el-checkbox-group v-model="checkboxVal">
-        <el-checkbox label="apple">
-          apple
-        </el-checkbox>
-        <el-checkbox label="banana">
-          banana
-        </el-checkbox>
-        <el-checkbox label="orange">
-          orange
-        </el-checkbox>
-      </el-checkbox-group>
-    </div>
-
-    <el-table :key="key" :data="tableData" border fit highlight-current-row style="width: 100%">
-      <el-table-column prop="name" label="fruitName" width="180" />
-      <el-table-column v-for="fruit in formThead" :key="fruit" :label="fruit">
-        <template slot-scope="scope">
-          {{ scope.row[fruit] }}
-        </template>
-      </el-table-column>
-    </el-table>
-  </div>
-</template>
-
-<script>
-const defaultFormThead = ['apple', 'banana']
-
-export default {
-  data() {
-    return {
-      tableData: [
-        {
-          name: 'fruit-1',
-          apple: 'apple-10',
-          banana: 'banana-10',
-          orange: 'orange-10'
-        },
-        {
-          name: 'fruit-2',
-          apple: 'apple-20',
-          banana: 'banana-20',
-          orange: 'orange-20'
-        }
-      ],
-      key: 1, // table key
-      formTheadOptions: ['apple', 'banana', 'orange'],
-      checkboxVal: defaultFormThead, // checkboxVal
-      formThead: defaultFormThead // 默认表头 Default header
-    }
-  },
-  watch: {
-    checkboxVal(valArr) {
-      this.formThead = this.formTheadOptions.filter(i => valArr.indexOf(i) >= 0)
-      this.key = this.key + 1// 为了保证table 每次都会重渲 In order to ensure the table will be re-rendered each time
-    }
-  }
-}
-</script>
-
diff --git a/src/views/table/dynamic-table/components/UnfixedThead.vue b/src/views/table/dynamic-table/components/UnfixedThead.vue
deleted file mode 100644
index 831b070..0000000
--- a/src/views/table/dynamic-table/components/UnfixedThead.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<template>
-  <div class="app-container">
-    <div class="filter-container">
-      <el-checkbox-group v-model="formThead">
-        <el-checkbox label="apple">
-          apple
-        </el-checkbox>
-        <el-checkbox label="banana">
-          banana
-        </el-checkbox>
-        <el-checkbox label="orange">
-          orange
-        </el-checkbox>
-      </el-checkbox-group>
-    </div>
-
-    <el-table :data="tableData" border fit highlight-current-row style="width: 100%">
-      <el-table-column prop="name" label="fruitName" width="180" />
-      <el-table-column v-for="fruit in formThead" :key="fruit" :label="fruit">
-        <template slot-scope="scope">
-          {{ scope.row[fruit] }}
-        </template>
-      </el-table-column>
-    </el-table>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      tableData: [
-        {
-          name: 'fruit-1',
-          apple: 'apple-10',
-          banana: 'banana-10',
-          orange: 'orange-10'
-        },
-        {
-          name: 'fruit-2',
-          apple: 'apple-20',
-          banana: 'banana-20',
-          orange: 'orange-20'
-        }
-      ],
-      formThead: ['apple', 'banana']
-    }
-  }
-}
-</script>
diff --git a/src/views/table/dynamic-table/index.vue b/src/views/table/dynamic-table/index.vue
deleted file mode 100644
index 5a4dd36..0000000
--- a/src/views/table/dynamic-table/index.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<template>
-  <div class="app-container">
-    <div style="margin:0 0 5px 20px">
-      Fixed header, sorted by header order,
-    </div>
-    <fixed-thead />
-
-    <div style="margin:30px 0 5px 20px">
-      Not fixed header, sorted by click order
-    </div>
-    <unfixed-thead />
-  </div>
-</template>
-
-<script>
-import FixedThead from './components/FixedThead'
-import UnfixedThead from './components/UnfixedThead'
-
-export default {
-  name: 'DynamicTable',
-  components: { FixedThead, UnfixedThead }
-}
-</script>
-
diff --git a/src/views/table/inline-edit-table.vue b/src/views/table/inline-edit-table.vue
deleted file mode 100644
index 31e0065..0000000
--- a/src/views/table/inline-edit-table.vue
+++ /dev/null
@@ -1,149 +0,0 @@
-<template>
-  <div class="app-container">
-    <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
-      <el-table-column align="center" label="ID" width="80">
-        <template slot-scope="{row}">
-          <span>{{ row.id }}</span>
-        </template>
-      </el-table-column>
-
-      <el-table-column width="180px" align="center" label="Date">
-        <template slot-scope="{row}">
-          <span>{{ row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
-        </template>
-      </el-table-column>
-
-      <el-table-column width="120px" align="center" label="Author">
-        <template slot-scope="{row}">
-          <span>{{ row.author }}</span>
-        </template>
-      </el-table-column>
-
-      <el-table-column width="100px" label="Importance">
-        <template slot-scope="{row}">
-          <svg-icon v-for="n in + row.importance" :key="n" icon-class="star" class="meta-item__icon" />
-        </template>
-      </el-table-column>
-
-      <el-table-column class-name="status-col" label="Status" width="110">
-        <template slot-scope="{row}">
-          <el-tag :type="row.status | statusFilter">
-            {{ row.status }}
-          </el-tag>
-        </template>
-      </el-table-column>
-
-      <el-table-column min-width="300px" label="Title">
-        <template slot-scope="{row}">
-          <template v-if="row.edit">
-            <el-input v-model="row.title" class="edit-input" size="small" />
-            <el-button
-              class="cancel-btn"
-              size="small"
-              icon="el-icon-refresh"
-              type="warning"
-              @click="cancelEdit(row)"
-            >
-              cancel
-            </el-button>
-          </template>
-          <span v-else>{{ row.title }}</span>
-        </template>
-      </el-table-column>
-
-      <el-table-column align="center" label="Actions" width="120">
-        <template slot-scope="{row}">
-          <el-button
-            v-if="row.edit"
-            type="success"
-            size="small"
-            icon="el-icon-circle-check-outline"
-            @click="confirmEdit(row)"
-          >
-            Ok
-          </el-button>
-          <el-button
-            v-else
-            type="primary"
-            size="small"
-            icon="el-icon-edit"
-            @click="row.edit=!row.edit"
-          >
-            Edit
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-  </div>
-</template>
-
-<script>
-import { fetchList } from '@/api/article'
-
-export default {
-  name: 'InlineEditTable',
-  filters: {
-    statusFilter(status) {
-      const statusMap = {
-        published: 'success',
-        draft: 'info',
-        deleted: 'danger'
-      }
-      return statusMap[status]
-    }
-  },
-  data() {
-    return {
-      list: null,
-      listLoading: true,
-      listQuery: {
-        page: 1,
-        limit: 10
-      }
-    }
-  },
-  created() {
-    this.getList()
-  },
-  methods: {
-    async getList() {
-      this.listLoading = true
-      const { data } = await fetchList(this.listQuery)
-      const items = data.items
-      this.list = items.map(v => {
-        this.$set(v, 'edit', false) // https://vuejs.org/v2/guide/reactivity.html
-        v.originalTitle = v.title //  will be used when user click the cancel botton
-        return v
-      })
-      this.listLoading = false
-    },
-    cancelEdit(row) {
-      row.title = row.originalTitle
-      row.edit = false
-      this.$message({
-        message: 'The title has been restored to the original value',
-        type: 'warning'
-      })
-    },
-    confirmEdit(row) {
-      row.edit = false
-      row.originalTitle = row.title
-      this.$message({
-        message: 'The title has been edited',
-        type: 'success'
-      })
-    }
-  }
-}
-</script>
-
-<style scoped>
-.edit-input {
-  padding-right: 100px;
-}
-.cancel-btn {
-  position: absolute;
-  right: 15px;
-  top: 10px;
-}
-</style>
diff --git a/src/views/team-manage/components/change/add-plan.vue b/src/views/team-manage/components/change/add-plan.vue
new file mode 100644
index 0000000..45ed5f8
--- /dev/null
+++ b/src/views/team-manage/components/change/add-plan.vue
@@ -0,0 +1,421 @@
+<template>
+  <div :class="$style.container">
+    <HeaderTitleBar />
+    <el-divider content-position="left">{{
+      $t("module.teamManager.HandoverAdd.FillInShift")
+    }}</el-divider>
+    <el-form
+      ref="team"
+      :model="team"
+      :rules="rules"
+      label-width="180px"
+      :class="$style.form"
+    >
+      <el-form-item
+        :label="$t('module.teamManager.Handover.LastTeamName')"
+        prop="preTeamId"
+        :class="$style['form-item']"
+      >
+        <el-select
+          v-model="team.preTeamId"
+          :class="$style.select"
+          filterable
+          clearable
+          :disabled="$route.query.disable === 'true' || $route.query.disable"
+          @change="preTeamChange"
+        >
+          <el-option
+            v-for="(item, index) in preTeamList"
+            :key="index"
+            :label="item.teamName"
+            :value="item.teamId"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item
+        :label="$t('module.teamManager.Handover.PreviousTeamLeader')"
+        prop="preTeamLeader"
+        :class="$style['form-item']"
+      >
+        <el-input v-model="team.preTeamLeader" :disabled="true" />
+      </el-form-item>
+      <el-form-item
+        :label="$t('module.teamManager.HandoverAdd.HandoverTeam')"
+        prop="teamId"
+        :class="$style['form-item']"
+      >
+        <el-select
+          v-model="team.teamId"
+          :class="$style.select"
+          filterable
+          clearable
+          :disabled="$route.query.disable === 'true' || $route.query.disable"
+          @change="teamChange"
+        >
+          <el-option
+            v-for="(item, index) in teamList"
+            :key="index"
+            :label="item.teamName"
+            :value="item.teamId"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item
+        :label="$t('module.teamManager.HandoverAdd.HandoverTeamLeader')"
+        prop="teamLeader"
+        :class="$style['form-item']"
+      >
+        <el-input v-model="team.teamLeader" :disabled="true" />
+      </el-form-item>
+      <el-form-item
+        :label="$t('module.teamManager.HandoverAdd.PlanTeam')"
+        prop="planTeamId"
+        :class="$style['form-item']"
+      >
+        <el-input
+          v-if="$route.query.disable === 'true' || $route.query.disable"
+          v-model="team.planTeamName"
+          :disabled="true"
+        />
+        <el-select
+          v-else
+          v-model="team.planTeamId"
+          :class="$style.select"
+          filterable
+          clearable
+          :disabled="$route.query.disable === 'true' || $route.query.disable"
+          @change="planTeamChange"
+        >
+          <el-option
+            v-for="(item, index) in planTeamList"
+            :key="index"
+            :label="item.planTeamName"
+            :value="item.planTeamId"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item
+        :label="$t('module.teamManager.HandoverAdd.PlanTeamLeader')"
+        prop="planTeamLeader"
+        :class="$style['form-item']"
+      >
+        <el-input v-model="team.planTeamLeader" :disabled="true" />
+      </el-form-item>
+      <el-form-item
+        :label="$t('module.teamManager.Handover.PlanWorkingHours')"
+        prop="planOnlineTime"
+        :class="$style['form-item']"
+      >
+        <el-date-picker
+          v-model="team.planOnlineTime"
+          type="datetime"
+          :class="$style.select"
+          :clearable="false"
+          :disabled="true"
+        />
+      </el-form-item>
+      <el-form-item
+        :label="$t('module.teamManager.Handover.PlannedHandoverTime')"
+        prop="planHandoverTime"
+        :class="$style['form-item']"
+      >
+        <el-date-picker
+          v-model="team.planHandoverTime"
+          type="datetime"
+          :clearable="false"
+          :class="$style.select"
+          :disabled="true"
+        />
+      </el-form-item>
+      <el-form-item
+        :label="$t('module.teamManager.Handover.HandoverTme')"
+        prop="handoverTime"
+        :class="$style['form-item']"
+      >
+        <el-date-picker
+          v-model="team.handoverTime"
+          type="datetime"
+          :class="$style.select"
+          :clearable="false"
+          :disabled="$route.query.disable === 'true' || $route.query.disable"
+        />
+      </el-form-item>
+      <el-form-item
+        :label="$t('module.teamManager.Handover.WorkingHours')"
+        prop="onlineTime"
+        :class="$style['form-item']"
+      >
+        <el-date-picker
+          v-model="team.onlineTime"
+          type="datetime"
+          :clearable="false"
+          :class="$style.select"
+          :disabled="$route.query.disable === 'true' || $route.query.disable"
+        />
+      </el-form-item>
+    </el-form>
+
+    <el-divider v-if="false" content-position="left">{{
+      $t("module.teamManager.HandoverAdd.MajorSelection")
+    }}</el-divider>
+    <ProfessionPanel
+      v-if="false"
+      :id="team.id"
+      :class="$style.bom"
+      style="width:70%"
+      @on-change="professionChange"
+    />
+    <el-divider content-position="left">{{
+      $t("module.teamManager.HandoverAdd.SelectionOfTeamMembers")
+    }}</el-divider>
+    <WorkerList
+      :id="team.id"
+      :team-id="team.teamId"
+      :plan-team-id="team.planTeamId"
+      :class="$style.bom"
+      style="width:70%"
+      @on-change="workerChange"
+    />
+    <SubmitBar
+      v-if="$route.query.disable !== 'true' && !$route.query.disable"
+      @on-cancle="close()"
+      @on-submit="handleSubmit('team')"
+    />
+  </div>
+</template>
+
+<script>
+import { find } from 'lodash'
+import {
+  add,
+  getInfo,
+  update,
+  teamSelectList
+} from '@/api/team-manage/team.js'
+import { planTeamSelectList } from '@/api/team-manage/team-plan.js'
+import SubmitBar from '@/views/art/components/submit-bar'
+import HeaderTitleBar from '@/views/material-manage/components/header-title-bar'
+import WorkerList from '@/views/team-manage/components/change/worker-list'
+import ProfessionPanel from '@/views/team-manage/components/change/profession-panel'
+import { getInfo as getPlanInfo } from '@/api/team-manage/team-plan.js'
+export default {
+  name: 'TeamAddPanel',
+  components: {
+    SubmitBar,
+    HeaderTitleBar,
+    WorkerList,
+    ProfessionPanel
+  },
+  props: {},
+  data() {
+    return {
+      team: {
+        id: null,
+        handoverTime: new Date(),
+        onlineTime: new Date(),
+        teamId: null,
+        teamLeader: '',
+        preTeamId: null,
+        preTeamLeader: '',
+        teamWorkStatus: 1,
+
+        planId: null,
+        planTeamId: null,
+        planTeamLeader: '',
+        planHandoverTime: '',
+        planOnlineTime: '',
+        professionIdList: [],
+        workerIdList: []
+      },
+      rules: {
+        teamId: [
+          { required: true, message: '本次班组不能为空', trigger: 'change' }
+        ],
+        planTeamId: [
+          { required: false, message: '计划班组不能为空', trigger: 'change' }
+        ],
+        preTeamId: [
+          { required: false, message: '上一班组不能为空', trigger: 'change' }
+        ],
+        onlineTime: [
+          { required: true, message: '上班时间不能为空', trigger: 'blur' }
+        ],
+        handoverTime: [
+          { required: true, message: '交接时间不能为空', trigger: 'blur' }
+        ]
+      },
+      id: null,
+      preTeamList: [],
+      teamList: [],
+      planTeamList: []
+    }
+  },
+  watch: {},
+  created() {
+    this.init()
+  },
+  methods: {
+    init() {
+      this.id = this.$route.query.id
+      const planId = this.$route.query.planId
+      console.log(this.id)
+      if (this.id) {
+        getInfo({ id: this.id }).then(res => {
+          console.log(res)
+          this.team = res.data
+        })
+      }
+      if (planId) {
+        this.team.planId = planId
+        getPlanInfo({ id: planId })
+          .then(res => {
+            console.log('planTeam====', res.data)
+            const planTeam = res.data
+            this.team.planTeamLeader = planTeam ? planTeam.planTeamLeader : ''
+            this.team.planOnlineTime = planTeam ? planTeam.planOnlineTime : ''
+            this.team.planHandoverTime = planTeam
+              ? planTeam.planHandoverTime
+              : ''
+            this.team.planId = planTeam.id
+            this.team.planTeamId = planTeam.planTeamId
+            this.team.preTeamLeader = planTeam
+              ? planTeam.planPreTeamLeader
+              : ''
+            this.team.preTeamId = planTeam ? planTeam.planPreTeamId : ''
+            // 本次
+            this.team.teamId = planTeam.planTeamId
+            this.team.teamLeader = planTeam ? planTeam.planTeamLeader : ''
+            //
+            this.team.onlineTime = planTeam ? planTeam.planOnlineTime : ''
+            this.team.handoverTime = planTeam ? planTeam.planHandoverTime : ''
+            //
+            this.team.id = planTeam.planTeamId
+            return this.team
+          })
+          .then(() => planTeamSelectList())
+          .then(res => {
+            this.planTeamList = res.data
+            return this.planTeamList
+          })
+          .then(() => teamSelectList())
+          .then(res => {
+            this.preTeamList = res.data
+            this.teamList = res.data
+          })
+      } else {
+        teamSelectList().then(res => {
+          this.preTeamList = res.data
+          this.teamList = res.data
+        })
+        planTeamSelectList().then(res => {
+          this.planTeamList = res.data
+        })
+      }
+    },
+    close() {
+      this.$router.push({ path: this.$route.query.redirect })
+    },
+    handleSubmit(formName) {
+      console.log('handleSubmit')
+      this.$refs[formName].validate(valid => {
+        if (!valid) {
+          return false
+        }
+        console.log(this.team)
+        // const { professionIdList, workerIdList } = this.team
+        const { workerIdList } = this.team
+        // if (professionIdList.length === 0) {
+        //   this.$message({
+        //     type: 'error',
+        //     message: '专业不能为空！'
+        //   })
+        //   return false
+        // }
+        if (workerIdList.length === 0) {
+          this.$message({
+            type: 'error',
+            message: '员工不能为空！'
+          })
+          return false
+        }
+        if (this.id) {
+          update(this.team).then(res => {
+            this.$message({
+              type: 'success',
+              message: '更新成功！'
+            })
+            this.close()
+          })
+        } else {
+          this.team.id = null
+          add(this.team).then(res => {
+            this.$message({
+              type: 'success',
+              message: '保存成功！！'
+            })
+            this.close()
+          })
+        }
+      })
+    },
+    preTeamChange(val) {
+      const preTeam = find(this.preTeamList, f => f.teamId === val)
+      this.team.preTeamLeader = preTeam ? preTeam.teamLeader : ''
+    },
+    planTeamChange(val) {
+      const planTeam = find(this.planTeamList, f => f.planTeamId === val)
+      this.team.planTeamLeader = planTeam ? planTeam.planTeamLeader : ''
+      this.team.planOnlineTime = planTeam ? planTeam.planOnlineTime : ''
+      this.team.planHandoverTime = planTeam ? planTeam.planHandoverTime : ''
+      this.team.planId = planTeam.id
+    },
+    teamChange(val) {
+      console.log(val)
+      const team = find(this.teamList, f => f.teamId === val)
+      this.team.teamLeader = team ? team.teamLeader : ''
+      console.log(this.team)
+      this.team.id = team.teamId
+    },
+    professionChange(val) {
+      this.team.professionIdList = val
+    },
+    workerChange(val) {
+      this.team.workerIdList = val.map(m => m.workerId)
+    }
+  }
+}
+</script>
+<style lang="scss" module>
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .form {
+    width: 70%;
+    margin-top: 10px;
+    display: flex;
+    flex-flow: wrap;
+    .form-item {
+      width: 50%;
+    }
+    .form-item-remark {
+      width: 100%;
+    }
+  }
+  .input {
+    display: flex;
+    margin: 8px 16px 8px 4px;
+    align-items: center;
+    .select {
+      width: 100%;
+    }
+  }
+  .select {
+    width: 100%;
+  }
+  .bom {
+    position: relative;
+    width: 98%;
+  }
+}
+</style>
diff --git a/src/views/team-manage/components/change/profession-panel.vue b/src/views/team-manage/components/change/profession-panel.vue
new file mode 100644
index 0000000..d4591fd
--- /dev/null
+++ b/src/views/team-manage/components/change/profession-panel.vue
@@ -0,0 +1,107 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-03-05 16:34:46
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-08 11:03:18
+ * @Description:
+-->
+<template>
+  <div :class="$style.container">
+    <el-checkbox
+      v-model="checkAll"
+      :indeterminate="isIndeterminate"
+      :disabled="$route.query.disable === 'true' || $route.query.disable"
+      @change="handleCheckAllChange"
+    >{{ $t('module.teamManager.HandoverAdd.SelectAll') }}</el-checkbox>
+    <div style="margin: 15px 0;" />
+    <el-checkbox-group
+      v-model="checkedCities"
+      :disabled="$route.query.disable === 'true' || $route.query.disable"
+      @change="handleCheckedCitiesChange"
+    >
+      <el-checkbox v-for="city in cities" :key="city.id" :label="city.id">{{
+        city.name
+      }}</el-checkbox>
+    </el-checkbox-group>
+  </div>
+</template>
+
+<script>
+import { professionVoList } from '@/api/team-manage/team.js'
+
+export default {
+  name: 'ProfessionPanel',
+  components: {},
+  props: {
+    id: {
+      type: String,
+      default: undefined
+    }
+  },
+  data() {
+    return {
+      checkAll: false,
+      isIndeterminate: false,
+      checkedCities: [],
+      cities: [],
+      params: {
+        current: 1,
+        size: 100
+      }
+    }
+  },
+  watch: {
+    id: {
+      handler(val) {
+        this.init(val)
+      },
+      deep: true
+    }
+  },
+  created() {
+  },
+  methods: {
+    async init(id) {
+      console.log('id', id)
+      const citiesRes = await professionVoList({ ...this.params, id: id || this.$route.query.id })
+      this.cities = citiesRes.data
+      if (id || this.$route.query.id) {
+        this.checkedCities = this.cities.filter(f => f.checked).map(m => m.id)
+        this.checkAll = this.checkedCities.length === this.cities.length
+        console.log(this.checkedCities)
+      }
+    },
+    handleCheckAllChange(val) {
+      console.log(val)
+      this.checkedCities = val ? this.cities.map(m => m.id) : []
+      this.isIndeterminate = false
+      this.$emit('on-change', this.checkedCities)
+    },
+    handleCheckedCitiesChange(value) {
+      console.log(value)
+      const checkedCount = value.length
+      this.checkAll = checkedCount === this.cities.length
+      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length
+      this.$emit('on-change', this.checkedCities)
+    }
+  }
+}
+</script>
+<style lang="scss" module>
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  .input {
+    display: flex;
+    margin: 8px 16px 8px 4px;
+    align-items: center;
+    .select {
+      width: 100%;
+    }
+  }
+  .select {
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/views/team-manage/components/change/worker-list.vue b/src/views/team-manage/components/change/worker-list.vue
new file mode 100644
index 0000000..872958b
--- /dev/null
+++ b/src/views/team-manage/components/change/worker-list.vue
@@ -0,0 +1,161 @@
+<template>
+  <div :class="$style.container">
+    <SearchBar
+      v-if="false"
+      :placeholder="$t('module.teamManager.HandoverAdd.Placeholder')"
+      @on-search="handleSearch"
+    />
+    <el-table
+      ref="mainTable"
+      :data="tableDataList"
+      :class="$style.table"
+      :stripe="true"
+      :header-cell-style="{background:'#eef1f6',color:'#606266',height: '56px', textAlign: 'center'}"
+      :cell-style="{ textAlign: 'center' }"
+      size="mini"
+      :selectable="isDisabled"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="selection" width="55" />
+      <el-table-column
+        prop="index"
+        :label="$t('module.teamManager.Handover.index')"
+        width="80"
+        fixed="left"
+      />
+      <el-table-column
+        prop="workerName"
+        :label="$t('module.teamManager.HandoverAdd.planWorkerName')"
+        width="180"
+        fixed="left"
+      />
+      <el-table-column
+        prop="professionName"
+        :label="$t('module.teamManager.HandoverAdd.planProfessionName')"
+        width="180"
+      />
+      <el-table-column
+        prop="telephone"
+        :label="$t('module.teamManager.HandoverAdd.telephone')"
+        width="180"
+      />
+      <el-table-column
+        prop="workshop"
+        :label="$t('module.teamManager.HandoverAdd.workshop')"
+        width="180"
+      />
+      <el-table-column
+        prop="onDuty"
+        :label="$t('module.teamManager.HandoverAdd.onDuty')"
+        width="80"
+      >
+        <template slot-scope="scope">
+          <el-tag v-if="scope.row.onDuty === 1" type="success">
+            在岗
+          </el-tag>
+          <el-tag v-else type="info">
+            离岗
+          </el-tag>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+<script>
+import moment from 'moment'
+import { workerVoList } from '@/api/team-manage/team.js'
+import SearchBar from '@/views/art/components/search-bar'
+export default {
+  components: { SearchBar },
+  props: {
+    id: {
+      type: String,
+      default: undefined
+    },
+    teamId: {
+      type: String,
+      default: undefined
+    },
+    planTeamId: {
+      type: String,
+      default: undefined
+    }
+  },
+  data() {
+    return {
+      moment,
+      isEdit: false,
+      tableDataList: [],
+      page: {
+        current: 1,
+        size: 2
+      },
+      addDialogVisible: false,
+      param: {},
+      multipleSelection: [],
+      disable: false
+    }
+  },
+  watch: {
+    id: {
+      handler(val) {
+        this.handleSearch()
+      },
+      deep: true
+    }
+  },
+  created() {
+    this.disable = this.$route.query.disable === 'true'
+    this.handleSearch()
+  },
+  methods: {
+    isDisabled() {
+      return this.$route.query.disable === 'true'
+    },
+    handleSearch(param) {
+      this.param = param
+      console.log(param)
+      const params = {
+        id: this.id,
+        teamId: this.teamId,
+        planTeamId: this.planTeamId,
+        ...param,
+        ...this.page
+      }
+      workerVoList(params).then(res => {
+        console.log(res)
+        if (!res.data) {
+          this.tableDataList = []
+          return
+        }
+        this.tableDataList = res.data.map((m, index) => ({
+          ...m,
+          index: this.page.size * (this.page.current - 1) + index + 1
+        }))
+        const multipleSelection = this.tableDataList.filter(f => f.checked)
+        console.log(multipleSelection)
+        if (!this.id) {
+          return
+        }
+        this.$nextTick(() => {
+          multipleSelection.forEach(e =>
+            this.$refs.mainTable.toggleRowSelection(e)
+          )
+        })
+      })
+    },
+    handleSelectionChange(val) {
+      console.log(val)
+      this.multipleSelection = val
+      this.$emit('on-change', this.multipleSelection)
+    }
+  }
+}
+</script>
+<style lang="scss" module>
+.container {
+  .table {
+    margin: 16px;
+  }
+}
+</style>
diff --git a/src/views/team-manage/components/offline/offline-drawer.vue b/src/views/team-manage/components/offline/offline-drawer.vue
new file mode 100644
index 0000000..d1ce91f
--- /dev/null
+++ b/src/views/team-manage/components/offline/offline-drawer.vue
@@ -0,0 +1,59 @@
+<template>
+  <el-drawer
+    :title="$t('module.teamManager.HandoverDrawer.title')"
+    size="85%"
+    :append-to-body="true"
+    :visible.sync="visible"
+    :wrapper-closable="false"
+    :before-close="() => $emit('on-close')"
+  >
+    <OfflineEdit :team="team" />
+    <el-divider content-position="left">【{{ team ? team.teamName :'' }}】{{ $t('module.teamManager.HandoverDrawer.TeamCommutingRecord') }}</el-divider>
+    <TeamList
+      :class="$style['team-list']"
+      :team-id="team ? team.teamId : null"
+    />
+  </el-drawer>
+</template>
+
+<script>
+import TeamList from './team-list.vue'
+import OfflineEdit from './offline-edit.vue'
+
+export default {
+  name: 'OfflineDrawer',
+  components: { TeamList, OfflineEdit },
+  props: {
+    team: {
+      type: Object,
+      default: () => {}
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      isEdit: false
+    }
+  },
+  methods: {
+    editSuccess() {
+      this.innerDrawer = true
+    },
+    handleSubmit() {
+      this.isEdit = false
+    }
+  }
+}
+</script>
+<style lang="scss" module>
+.team-list {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 0 30px;
+}
+</style>
diff --git a/src/views/team-manage/components/offline/offline-edit.vue b/src/views/team-manage/components/offline/offline-edit.vue
new file mode 100644
index 0000000..7bb576c
--- /dev/null
+++ b/src/views/team-manage/components/offline/offline-edit.vue
@@ -0,0 +1,110 @@
+<template>
+  <div :class="$style.container">
+    <el-form
+      ref="teamUpdate"
+      :class="$style.form"
+      :model="teamUpdate"
+      :rules="rules"
+      label-width="130px"
+      :inline="true"
+    >
+      <el-form-item :label="$t('module.teamManager.Handover.TeamName')" prop="teamName">
+        <span :class="$style.label">{{ team.teamName || '-' }}</span>
+      </el-form-item>
+      <el-form-item :label="$t('module.teamManager.Handover.TeamLeader')" prop="teamLeader">
+        <span :class="$style.label">{{ team.teamLeader || '-' }}</span>
+      </el-form-item>
+      <el-form-item :label="$t('module.teamManager.Handover.WorkingHours')" prop="onlineTime">
+        <el-date-picker
+          v-model="teamUpdate.onlineTime"
+          style="width:210px"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          type="datetime"
+        />
+      </el-form-item>
+      <el-form-item :label="$t('module.teamManager.Handover.OffWorkTime')" prop="offlineTime">
+        <el-date-picker
+          v-model="teamUpdate.offlineTime"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          style="width:210px"
+          type="datetime"
+        />
+      </el-form-item>
+      <el-form-item style="margin-left: 70px" label="" prop="">
+        <el-button
+          type="primary"
+          size="mini"
+          icon="el-icon-success"
+          @click="handleSubmit()"
+        >
+          {{ 'btn.save' | i18nFilter }}
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import moment from 'moment'
+import { offlineUpdate } from '@/api/team-manage/team.js'
+
+export default {
+  name: 'OfflineEdit',
+  components: {},
+  props: {
+    team: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      teamUpdate: {
+        offlineTime: moment(this.team.offlineTime).format('YYYY-MM-DD HH:mm:ss'),
+        onlineTime: moment(this.team.onlineTime).format('YYYY-MM-DD HH:mm:ss')
+      },
+      rules: {
+        onlineTime: [
+          { required: true, message: '上班时间不能为空', trigger: 'blur' }
+        ],
+        offlineTime: [
+          { required: true, message: '下班时间不能为空', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    handleSubmit() {
+      this.$refs['teamUpdate'].validate((valid) => {
+        if (!valid) {
+          return false
+        }
+        const param = {
+          id: this.team.id,
+          teamId: this.team.teamId,
+          offlineTime: moment.utc(this.teamUpdate.offlineTime),
+          onlineTime: moment.utc(this.teamUpdate.onlineTime)
+        }
+        console.log(param)
+        offlineUpdate(param).then(res => {
+          console.log(res)
+          this.$message.success('保存成功！')
+          this.$bus.emit('on-offline-edit-success')
+        })
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" module>
+.container {
+  margin-bottom: 30px;
+  .form {
+    .label {
+      display: inline-block;
+      min-width: 100px;
+      background-color: #eee;
+    }
+  }
+}
+</style>
diff --git a/src/views/team-manage/components/offline/offline-search-bar.vue b/src/views/team-manage/components/offline/offline-search-bar.vue
new file mode 100644
index 0000000..11ff34a
--- /dev/null
+++ b/src/views/team-manage/components/offline/offline-search-bar.vue
@@ -0,0 +1,107 @@
+<template>
+  <div :class="$style.container">
+    <span :class="$style['label-name']">{{ $t('module.teamManager.HandoverDrawer.OffHours') }}</span>
+    <el-date-picker
+      v-model="dts"
+      type="datetimerange"
+      style="margin-right:16px;"
+      align="right"
+      value-format="yyyy-MM-dd HH:mm:ss"
+      unlink-panels
+      :range-separator="'formItem.to' | i18nFilter"
+      :start-placeholder="'formItem.beginTime' | i18nFilter"
+      :end-placeholder="'formItem.endTime' | i18nFilter"
+      :picker-options="pickerOptions"
+    />
+    <el-button type="primary" icon="el-icon-search" @click="handleSearch()">
+      {{ 'btn.search' | i18nFilter }}
+    </el-button>
+    <slot />
+  </div>
+</template>
+<script>
+import moment from 'moment'
+import i18n from '@/lang'
+
+const pickerOptions = {
+  shortcuts: [
+    {
+      text: i18n.t('datePickerOption.lastWeek'),
+      onClick(picker) {
+        const end = new Date()
+        const start = new Date()
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+        picker.$emit('pick', [start, end])
+      }
+    },
+    {
+      text: i18n.t('datePickerOption.lastMonth'),
+      onClick(picker) {
+        const end = new Date()
+        const start = new Date()
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+        picker.$emit('pick', [start, end])
+      }
+    },
+    {
+      text: i18n.t('datePickerOption.lastThreeMonths'),
+      onClick(picker) {
+        const end = new Date()
+        const start = new Date()
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+        picker.$emit('pick', [start, end])
+      }
+    }
+  ]
+}
+
+export default {
+  props: {
+    lableName: {
+      type: String,
+      default: '关键字'
+    },
+    placeholder: {
+      type: String,
+      default: '请输入'
+    }
+  },
+  data() {
+    return {
+      keywords: '',
+      dts: ['', ''],
+      pickerOptions
+    }
+  },
+  created() {
+    this.$bus.on('on-offline-edit-success', this.handleSearch)
+    this.handleSearch()
+  },
+  beforeDestroy() {
+    this.$bus.off('on-offline-edit-success', this.handleSearch)
+  },
+  methods: {
+    handleSearch() {
+      const param = {
+        offlineBegTime: moment.utc(this.dts[0]),
+        offlineEndTime: moment.utc(this.dts[1])
+      }
+      this.$emit('on-search', param)
+    }
+  }
+}
+</script>
+<style lang="scss" module>
+.container {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 50px;
+  padding: 4px 40px;
+  background-color: #eee;
+  .label-name {
+    margin-right: 8px;
+    font-size: 14px;
+  }
+}
+</style>
diff --git a/src/views/team-manage/components/offline/team-list.vue b/src/views/team-manage/components/offline/team-list.vue
new file mode 100644
index 0000000..61843c4
--- /dev/null
+++ b/src/views/team-manage/components/offline/team-list.vue
@@ -0,0 +1,108 @@
+<template>
+  <div :class="$style.container">
+    <OfflineSearchBar :placeholder="'班组名称或班组长'" @on-search="handleSearch" />
+    <el-table
+      :data="workList"
+      :class="$style.table"
+      :stripe="true"
+      :header-cell-style="{background:'#eef1f6',color:'#606266',height: '56px', textAlign: 'center'}"
+      :cell-style="{ textAlign: 'center' }"
+      size="medium"
+    >
+      <el-table-column prop="index" :label="$t('module.teamManager.Handover.index')" width="80" fixed />
+      <el-table-column prop="teamName" :label="$t('module.teamManager.Handover.TeamName')" width="180" fixed />
+      <el-table-column prop="handoverTime" :label="$t('module.teamManager.Handover.HandoverTme')" width="180">
+        <template slot-scope="scope">
+          {{ scope.row.handoverTime && moment(scope.row.handoverTime).format('YYYY-MM-DD HH:mm:ss') }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="teamLeader" :label="$t('module.teamManager.Handover.TeamLeader')" width="180" />
+      <el-table-column prop="onlineTime" :label="$t('module.teamManager.Handover.WorkingHours')" width="180">
+        <template slot-scope="scope">
+          {{ scope.row.onlineTime && moment(scope.row.onlineTime).format('YYYY-MM-DD HH:mm:ss') }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="offlineTime" :label="$t('module.teamManager.Handover.OffWorkTime')" width="180">
+        <template slot-scope="scope">
+          {{ scope.row.offlineTime && moment(scope.row.offlineTime).format('YYYY-MM-DD HH:mm:ss') }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="preTeamName" :label="$t('module.teamManager.Handover.LastTeamName')" width="180" />
+      <el-table-column prop="preTeamLeader" :label="$t('module.teamManager.Handover.PreviousTeamLeader')" width="180" />
+    </el-table>
+    <el-pagination
+      v-show="page.total > page.size"
+      :class="$style.table"
+      :current-page="page.current"
+      :page-sizes="[10, 20, 30, 40]"
+      :page-size="page.size"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="page.total"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+  </div>
+</template>
+<script>
+import moment from 'moment'
+import { list } from '@/api/team-manage/team.js'
+import OfflineSearchBar from './offline-search-bar'
+export default {
+  components: { OfflineSearchBar },
+  props: {
+    teamId: {
+      type: String,
+      default: null
+    }
+  },
+  data() {
+    return {
+      moment,
+      isEdit: false,
+      workList: [],
+      page: {
+        total: 40,
+        current: 1,
+        size: 10
+      },
+      param: {}
+    }
+  },
+  created() {},
+  methods: {
+    handleSearch(param) {
+      this.param = param
+      console.log(param)
+      list({ ...param, ...this.page, teamId: this.teamId, teamWorkStatus: 0 }).then(res => {
+        console.log(res)
+        this.page.total = res.data.total
+        if (!res.data.records) {
+          this.workList = []
+          return
+        }
+        this.workList = res.data.records.map((m, index) => ({
+          ...m,
+          index: this.page.size * (this.page.current - 1) + index + 1
+        }))
+      })
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`)
+      this.page.size = val
+      this.handleSearch(this.param)
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`)
+      this.page.current = val
+      this.handleSearch(this.param)
+    }
+  }
+}
+</script>
+<style lang="scss" module>
+.container {
+  .table {
+    margin: 16px;
+  }
+}
+</style>
diff --git a/src/views/team-manage/components/plan/add-plan.vue b/src/views/team-manage/components/plan/add-plan.vue
new file mode 100644
index 0000000..fea309a
--- /dev/null
+++ b/src/views/team-manage/components/plan/add-plan.vue
@@ -0,0 +1,339 @@
+<template>
+  <div :class="$style.container">
+    <HeaderTitleBar />
+    <el-divider content-position="left">{{
+      $t("module.teamManager.HandoverAdd.TeamPlanFill")
+    }}</el-divider>
+    <el-form
+      ref="team"
+      :model="team"
+      :rules="rules"
+      label-width="190px"
+      :class="$style.form"
+    >
+      <el-form-item
+        :label="$t('module.teamManager.Handover.LastTeamName')"
+        prop="planPreTeamId"
+        :class="$style['form-item']"
+      >
+        <el-select
+          v-model="team.planPreTeamId"
+          :class="$style.select"
+          filterable
+          clearable
+          :disabled="$route.query.disable === 'true' || $route.query.disable"
+          @change="preTeamChange"
+        >
+          <el-option
+            v-for="(item, index) in preTeamList"
+            :key="index"
+            :label="item.planTeamName"
+            :value="item.planTeamId"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item
+        :label="$t('module.teamManager.Handover.PreviousTeamLeader')"
+        prop="planPreTeamLeader"
+        :class="$style['form-item']"
+      >
+        <el-input v-model="team.planPreTeamLeader" :disabled="true" />
+      </el-form-item>
+      <el-form-item
+        :label="$t('module.teamManager.Handover.TeamName')"
+        prop="planTeamId"
+        :class="$style['form-item']"
+      >
+        <el-select
+          v-model="team.planTeamId"
+          :class="$style.select"
+          filterable
+          clearable
+          :disabled="$route.query.disable === 'true' || $route.query.disable"
+          @change="teamChange"
+        >
+          <el-option
+            v-for="(item, index) in teamList"
+            :key="index"
+            :label="item.planTeamName"
+            :value="item.planTeamId"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item
+        :label="$t('module.teamManager.Handover.TeamLeader')"
+        prop="planTeamLeader"
+        :class="$style['form-item']"
+      >
+        <el-input v-model="team.planTeamLeader" :disabled="true" />
+      </el-form-item>
+      <el-form-item
+        :label="$t('module.teamManager.Handover.PlanWorkingHours')"
+        prop="planOnlineTime"
+        :class="$style['form-item']"
+      >
+        <el-date-picker
+          v-model="team.planOnlineTime"
+          type="datetime"
+          :class="$style.select"
+          :clearable="false"
+          :disabled="$route.query.disable === 'true' || $route.query.disable"
+        />
+      </el-form-item>
+      <el-form-item
+        :label="$t('module.teamManager.Handover.PlannedHandoverTime')"
+        prop="planHandoverTime"
+        :class="$style['form-item']"
+      >
+        <el-date-picker
+          v-model="team.planHandoverTime"
+          type="datetime"
+          :clearable="false"
+          :class="$style.select"
+          :disabled="$route.query.disable === 'true' || $route.query.disable"
+        />
+      </el-form-item>
+      <el-form-item
+        :label="$t('module.teamManager.Handover.Remark')"
+        prop="remark"
+        :class="$style['form-item-remark']"
+      >
+        <el-input
+          v-model="team.remark"
+          :disabled="$route.query.disable === 'true' || $route.query.disable"
+        />
+      </el-form-item>
+    </el-form>
+
+    <el-divider v-if="false" content-position="left">{{
+      $t("module.teamManager.HandoverAdd.MajorSelection")
+    }}</el-divider>
+    <ProfessionPanel
+      v-if="false"
+      :id="team.planId"
+      :class="$style.bom"
+      style="width:70%"
+      @on-change="professionChange"
+    />
+    <el-divider content-position="left">{{
+      $t("module.teamManager.HandoverAdd.SelectionOfTeamMembers")
+    }}</el-divider>
+    <WorkerList
+      :id="team.planTeamId"
+      :class="$style.bom"
+      style="width:70%"
+      @on-change="workerChange"
+    />
+    <SubmitBar
+      v-if="$route.query.disable !== 'true' && !$route.query.disable"
+      @on-cancle="close()"
+      @on-submit="handleSubmit('team')"
+    />
+  </div>
+</template>
+
+<script>
+import { find } from 'lodash'
+import {
+  add,
+  getInfo,
+  update,
+  planTeamSelectListNew
+} from '@/api/team-manage/team-plan.js'
+import SubmitBar from '@/views/art/components/submit-bar'
+import HeaderTitleBar from '@/views/material-manage/components/header-title-bar'
+import WorkerList from '@/views/team-manage/components/plan/worker-list'
+import ProfessionPanel from '@/views/team-manage/components/plan/profession-panel'
+
+export default {
+  name: 'Team',
+  components: {
+    SubmitBar,
+    HeaderTitleBar,
+    WorkerList,
+    ProfessionPanel
+  },
+  props: {},
+  data() {
+    return {
+      team: {
+        planPreTeamId: null,
+        planTeamId: null,
+        planWorkerIdList: [],
+        planProfessionIdList: [],
+        id: null,
+        planId: null,
+        remark: '',
+        name: '',
+        planOnlineTime: new Date(),
+        planHandoverTime: new Date(),
+        planTeamLeader: '',
+        planPreTeamLeader: ''
+      },
+      rules: {
+        planTeamId: [
+          {
+            required: true,
+            message: this.$i18nForm([
+              'placeholder.input',
+              this.$t('module.teamManager.Handover.TeamName')
+            ]),
+            trigger: 'change'
+          }
+        ],
+        planPreTeamId: [
+          {
+            required: true,
+            message: this.$i18nForm([
+              'placeholder.input',
+              this.$t('module.teamManager.Handover.LastTeamName')
+            ]),
+            trigger: 'change'
+          }
+        ],
+        planOnlineTime: [
+          {
+            required: true,
+            message: this.$i18nForm([
+              'placeholder.input',
+              this.$t('module.teamManager.Handover.PlanWorkingHours')
+            ]),
+            trigger: 'blur'
+          }
+        ],
+        planHandoverTime: [
+          {
+            required: true,
+            message: this.$i18nForm([
+              'placeholder.input',
+              this.$t('module.teamManager.Handover.PlannedHandoverTime')
+            ]),
+            trigger: 'blur'
+          }
+        ]
+      },
+      id: null,
+      preTeamList: [],
+      teamList: []
+    }
+  },
+  watch: {},
+  created() {
+    this.init()
+  },
+  methods: {
+    init() {
+      this.id = this.$route.query.id
+      console.log(this.id)
+      if (this.id) {
+        getInfo({ id: this.id }).then(res => {
+          console.log(res)
+          this.team = res.data
+        })
+      }
+      planTeamSelectListNew().then(res => {
+        this.preTeamList = res.data
+        this.teamList = res.data
+      })
+    },
+    close() {
+      this.$router.push({ path: this.$route.query.redirect })
+    },
+    handleSubmit(formName) {
+      console.log('handleSubmit')
+      this.$refs[formName].validate(valid => {
+        if (!valid) {
+          return false
+        }
+        console.log(this.team)
+        // const { planProfessionIdList, planWorkerIdList } = this.team
+        const { planWorkerIdList } = this.team
+        // if (planProfessionIdList.length === 0) {
+        //   this.$message({
+        //     type: 'error',
+        //     message: '专业不能为空！'
+        //   })
+        //   return false
+        // }
+        if (planWorkerIdList.length === 0) {
+          this.$message({
+            type: 'error',
+            message: '员工不能为空！'
+          })
+          return false
+        }
+        if (this.id) {
+          update(this.team).then(res => {
+            this.$message({
+              type: 'success',
+              message: '更新成功！'
+            })
+            this.close()
+          })
+        } else {
+          this.team.id = null
+          add(this.team).then(res => {
+            this.$message({
+              type: 'success',
+              message: '保存成功！！'
+            })
+            this.close()
+          })
+        }
+      })
+    },
+    preTeamChange(val) {
+      const preTeam = find(this.preTeamList, f => f.planTeamId === val)
+      this.team.planPreTeamLeader = preTeam ? preTeam.planTeamLeader : ''
+    },
+    teamChange(val) {
+      console.log(val)
+      const team = find(this.teamList, f => f.planTeamId === val)
+      this.team.planTeamLeader = team ? team.planTeamLeader : ''
+      console.log(' team.planTeamId', team.planTeamId)
+      this.team.planTeamId = team.planTeamId
+      this.team.planId = val
+    },
+    professionChange(val) {
+      this.team.planProfessionIdList = val
+    },
+    workerChange(val) {
+      this.team.planWorkerIdList = val.map(m => m.planWorkerId)
+    }
+  }
+}
+</script>
+<style lang="scss" module>
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .form {
+    width: 70%;
+    margin-top: 10px;
+    display: flex;
+    flex-flow: wrap;
+    .form-item {
+      width: 50%;
+    }
+    .form-item-remark {
+      width: 100%;
+    }
+  }
+  .input {
+    display: flex;
+    margin: 8px 16px 8px 4px;
+    align-items: center;
+    .select {
+      width: 100%;
+    }
+  }
+  .select {
+    width: 100%;
+  }
+  .bom {
+    position: relative;
+    width: 98%;
+  }
+}
+</style>
diff --git a/src/views/team-manage/components/plan/profession-panel.vue b/src/views/team-manage/components/plan/profession-panel.vue
new file mode 100644
index 0000000..0d54369
--- /dev/null
+++ b/src/views/team-manage/components/plan/profession-panel.vue
@@ -0,0 +1,105 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-03-05 16:34:46
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-08 11:03:41
+ * @Description:
+-->
+<template>
+  <div :class="$style.container">
+    <el-checkbox
+      v-model="checkAll"
+      :indeterminate="isIndeterminate"
+      :disabled="$route.query.disable === 'true' || $route.query.disable"
+      @change="handleCheckAllChange"
+    >{{ $t('module.teamManager.HandoverAdd.SelectAll') }}</el-checkbox>
+    <div style="margin: 15px 0;" />
+    <el-checkbox-group
+      v-model="checkedCities"
+      :disabled="$route.query.disable === 'true' || $route.query.disable"
+      @change="handleCheckedCitiesChange"
+    >
+      <el-checkbox v-for="city in cities" :key="city.id" :label="city.id">{{
+        city.name
+      }}</el-checkbox>
+    </el-checkbox-group>
+  </div>
+</template>
+
+<script>
+import { planProfessionVoList } from '@/api/team-manage/team-plan.js'
+
+export default {
+  name: 'ProfessionPanel',
+  components: {},
+  props: {
+    id: {
+      type: String,
+      default: undefined
+    }
+  },
+  data() {
+    return {
+      disable: false,
+      checkAll: false,
+      isIndeterminate: false,
+      checkedCities: [],
+      cities: [],
+      params: {
+        planId: 1
+      }
+    }
+  },
+  watch: {
+    id(val) {
+      this.init(val)
+    }
+  },
+  methods: {
+    async init(val) {
+      const citiesRes = await planProfessionVoList({
+        planId: val || this.$route.query.id
+      })
+      console.log(citiesRes)
+      this.cities = citiesRes.data
+      if (val || this.$route.query.id) {
+        this.checkedCities = this.cities.filter(f => f.checked).map(m => m.id)
+        this.checkAll = this.checkedCities.length === this.cities.length
+        console.log('this.checkedCities', this.checkedCities)
+        this.$emit('on-change', this.checkedCities)
+      }
+    },
+    handleCheckAllChange(val) {
+      console.log(val)
+      this.checkedCities = val ? this.cities.map(m => m.id) : []
+      this.isIndeterminate = false
+      this.$emit('on-change', this.checkedCities)
+    },
+    handleCheckedCitiesChange(value) {
+      console.log(value)
+      const checkedCount = value.length
+      this.checkAll = checkedCount === this.cities.length
+      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length
+      this.$emit('on-change', this.checkedCities)
+    }
+  }
+}
+</script>
+<style lang="scss" module>
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  .input {
+    display: flex;
+    margin: 8px 16px 8px 4px;
+    align-items: center;
+    .select {
+      width: 100%;
+    }
+  }
+  .select {
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/views/team-manage/components/plan/worker-list.vue b/src/views/team-manage/components/plan/worker-list.vue
new file mode 100644
index 0000000..a645d8e
--- /dev/null
+++ b/src/views/team-manage/components/plan/worker-list.vue
@@ -0,0 +1,126 @@
+<template>
+  <div :class="$style.container">
+    <SearchBar v-if="false" :placeholder="$t('module.teamManager.HandoverAdd.Placeholder')" @on-search="handleSearch" />
+    <el-table
+      ref="mainTable"
+      :data="tableDataList"
+      :class="$style.table"
+      :stripe="true"
+      :header-cell-style="{background:'#eef1f6',color:'#606266',height: '56px', textAlign: 'center'}"
+      :cell-style="{ textAlign: 'center' }"
+      size="mini"
+      :selectable="isDisabled"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="selection" width="55" />
+      <el-table-column prop="index" :label="$t('module.teamManager.Handover.index')" width="80" fixed="left" />
+      <el-table-column prop="planWorkerName" :label="$t('module.teamManager.HandoverAdd.planWorkerName')" width="180" fixed="left" />
+      <el-table-column prop="planProfessionName" :label="$t('module.teamManager.HandoverAdd.planProfessionName')" width="180" />
+      <el-table-column prop="telephone" :label="$t('module.teamManager.HandoverAdd.telephone')" width="180" />
+      <el-table-column prop="workshop" :label="$t('module.teamManager.HandoverAdd.workshop')" width="180" />
+      <el-table-column prop="onDuty" :label="$t('module.teamManager.HandoverAdd.onDuty')" width="80">
+        <template slot-scope="scope">
+          <el-tag v-if="scope.row.onDuty === 1" type="success">
+            在岗
+          </el-tag>
+          <el-tag v-else type="info">
+            离岗
+          </el-tag>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+<script>
+import moment from 'moment'
+import { planWorkerVoList } from '@/api/team-manage/team-plan.js'
+
+import SearchBar from '@/views/art/components/search-bar'
+export default {
+  components: { SearchBar },
+  props: {
+    id: {
+      type: String,
+      default: undefined
+    }
+  },
+  data() {
+    return {
+      moment,
+      isEdit: false,
+      tableDataList: [],
+      page: {
+        current: 1,
+        size: 2
+      },
+      addDialogVisible: false,
+      param: {},
+      multipleSelection: [],
+      disable: false
+    }
+  },
+  watch: {
+    id(val) {
+      this.handleSearch()
+    }
+  },
+  created() {
+    this.disable = this.$route.query.disable === 'true' || this.$route.query.disable
+  },
+  methods: {
+    isDisabled(row, rowIndex) {
+      if (row.status === 1) {
+        return true // 不禁用
+      } else {
+        return false // 不禁用
+      }
+    },
+    handleSearch(param) {
+      this.param = param
+      console.log(param)
+      const params = {
+        enabled: 1,
+        planId: this.$route.query.id,
+        planTeamId: this.id,
+        ...param,
+        ...this.page
+      }
+      planWorkerVoList(params).then(res => {
+        console.log(res)
+        if (!res.data) {
+          this.tableDataList = []
+          return
+        }
+        this.tableDataList = res.data.map((m, index) => ({
+          ...m,
+          index: this.page.size * (this.page.current - 1) + index + 1
+        }))
+        const multipleSelection = this.tableDataList.filter(f => f.checked)
+        console.log(multipleSelection)
+        if (!this.id) {
+          return
+        }
+        this.$emit('on-change', this.multipleSelection)
+        this.$nextTick(() => {
+          multipleSelection.forEach(e =>
+            this.$refs.mainTable.toggleRowSelection(e)
+          )
+        })
+      })
+    },
+    handleSelectionChange(val) {
+      if (this.$route.query.disable) { return }
+      console.log(val)
+      this.multipleSelection = val
+      this.$emit('on-change', this.multipleSelection)
+    }
+  }
+}
+</script>
+<style lang="scss" module>
+.container {
+  .table {
+    margin: 16px;
+  }
+}
+</style>
diff --git a/src/views/team-manage/components/search-bar.vue b/src/views/team-manage/components/search-bar.vue
new file mode 100644
index 0000000..25b4a69
--- /dev/null
+++ b/src/views/team-manage/components/search-bar.vue
@@ -0,0 +1,147 @@
+<template>
+  <div :class="$style.container">
+    <span :class="$style['label-name']">{{ $t('module.teamManager.Handover.Keyword') }}</span>
+    <el-input
+      v-model="keywords"
+      :placeholder="placeholder"
+      :clearable="true"
+      style="width:150px;max-width:100%;margin-right:16px;"
+    />
+    <span :class="$style['label-name']">{{ $t('module.teamManager.Handover.'+handoverTme) }}</span>
+    <el-date-picker
+      v-model="dts"
+      type="datetimerange"
+      style="margin-right:16px;"
+      align="right"
+      unlink-panels
+      value-format="yyyy-MM-dd HH:mm:ss"
+      :range-separator="'formItem.to' | i18nFilter"
+      :start-placeholder="'formItem.beginTime' | i18nFilter"
+      :end-placeholder="'formItem.endTime' | i18nFilter"
+      :picker-options="pickerOptions"
+    />
+    <span :class="$style['label-name']">{{ $t('module.teamManager.Handover.HandoverStatus') }}</span>
+    <el-select
+      v-model="handoverStatus"
+      style="margin-right:16px;"
+      filterable
+      clearable
+    >
+      <el-option
+        v-for="item in workStatusOptions"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+      />
+    </el-select>
+    <el-button type="primary" icon="el-icon-search" @click="handleSearch()">
+      {{ 'btn.search' | i18nFilter }}
+    </el-button>
+    <slot />
+  </div>
+</template>
+<script>
+import moment from 'moment'
+import i18n from '@/lang'
+
+const pickerOptions = {
+  shortcuts: [
+    {
+      text: i18n.t('datePickerOption.lastWeek'),
+      onClick(picker) {
+        const end = new Date()
+        const start = new Date()
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+        picker.$emit('pick', [start, end])
+      }
+    },
+    {
+      text: i18n.t('datePickerOption.lastMonth'),
+      onClick(picker) {
+        const end = new Date()
+        const start = new Date()
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+        picker.$emit('pick', [start, end])
+      }
+    },
+    {
+      text: i18n.t('datePickerOption.lastThreeMonths'),
+      onClick(picker) {
+        const end = new Date()
+        const start = new Date()
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+        picker.$emit('pick', [start, end])
+      }
+    }
+  ]
+}
+
+const workStatusOptions = [{
+  value: null,
+  label: i18n.t('module.teamManager.Handover.all')
+},
+{
+  value: 0,
+  label: i18n.t('module.teamManager.Handover.offduty')
+},
+{
+  value: 1,
+  label: i18n.t('module.teamManager.Handover.working')
+}]
+
+export default {
+  props: {
+    lableName: {
+      type: String,
+      default: '关键字'
+    },
+    placeholder: {
+      type: String,
+      default: '请输入'
+    },
+    handoverTme: {
+      type: String,
+      default: 'HandoverTme'
+    }
+  },
+  data() {
+    return {
+      keywords: '',
+      dts: ['', ''],
+      pickerOptions,
+      handoverStatus: null,
+      workStatusOptions
+    }
+  },
+  methods: {
+    handleSearch() {
+      console.log(this.dts)
+      const param = {
+        keyWords: this.keywords,
+        keywords: this.keywords,
+        handoverBegTime: this.dts ? moment.utc(this.dts[0]) : null,
+        handoverEndTime: this.dts ? moment.utc(this.dts[1]) : null,
+        planHandoverBegTime: this.dts ? moment.utc(this.dts[0]) : null,
+        planHandoverEndTime: this.dts ? moment.utc(this.dts[1]) : null,
+        handoverStatus: this.handoverStatus,
+        teamWorkStatus: this.handoverStatus
+      }
+      this.$emit('on-search', param)
+    }
+  }
+}
+</script>
+<style lang="scss" module>
+.container {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 50px;
+  padding: 4px 40px;
+  background-color: #eee;
+  .label-name {
+    margin-right: 8px;
+    font-size: 14px;
+  }
+}
+</style>
diff --git a/src/views/team-manage/filter/index.js b/src/views/team-manage/filter/index.js
new file mode 100644
index 0000000..5816a7b
--- /dev/null
+++ b/src/views/team-manage/filter/index.js
@@ -0,0 +1,23 @@
+/*
+ * @Date: 2020-12-29 16:49:28
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-04-13 13:49:51
+ * @FilePath: \basic-admin\src\filters\DataDict\index.js
+ * @Description: 部分常量的数据字典定义
+ */
+
+import i18n from '@/lang'
+
+const table = {
+  typeList: {
+    '请假': i18n.t('module.teamManager.showLog.leave'),
+    '缺勤': i18n.t('module.teamManager.showLog.absenceFromDuty'),
+    '设备故障': i18n.t('module.teamManager.showLog.equipmentFailure')
+  }
+}
+
+export default function(dictTable) {
+  return function(val) {
+    return table?.[dictTable]?.[val]
+  }
+}
diff --git a/src/views/team-manage/index.vue b/src/views/team-manage/index.vue
new file mode 100644
index 0000000..d585906
--- /dev/null
+++ b/src/views/team-manage/index.vue
@@ -0,0 +1,13 @@
+<!--
+ * @Author: gtz
+ * @Date: 2021-03-08 11:34:17
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-03-08 11:40:37
+ * @Description: file content
+-->
+
+<template>
+  <div id="factory">
+    <router-view />
+  </div>
+</template>
diff --git a/src/views/team-manage/list.vue b/src/views/team-manage/list.vue
new file mode 100644
index 0000000..74fd474
--- /dev/null
+++ b/src/views/team-manage/list.vue
@@ -0,0 +1,241 @@
+<template>
+  <div :class="$style.container">
+    <SearchBar :placeholder="$t('module.teamManager.Handover.Placeholder')" @on-search="handleSearch">
+      <el-button type="success" icon="el-icon-plus" @click="handleAdd()">
+        {{ "btn.add" | i18nFilter }}
+      </el-button>
+    </SearchBar>
+    <el-table
+      :data="workList"
+      :class="$style.table"
+      :stripe="true"
+      :header-cell-style="{background:'#eef1f6',color:'#606266',height: '56px', textAlign: 'center'}"
+      :cell-style="{ textAlign: 'center' }"
+      size="medium"
+    >
+      <el-table-column prop="index" :label="$t('module.teamManager.Handover.index')" width="80" fixed />
+      <el-table-column prop="teamName" :label="$t('module.teamManager.Handover.TeamName')" width="180" fixed />
+      <el-table-column prop="handoverTime" :label="$t('module.teamManager.Handover.HandoverTme')" width="180">
+        <template slot-scope="scope">
+          {{ scope.row.handoverTime && moment(scope.row.handoverTime).format("YYYY-MM-DD HH:mm:ss") }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="teamLeader" :label="$t('module.teamManager.Handover.TeamLeader')" width="180" />
+      <el-table-column prop="onlineTime" :label="$t('module.teamManager.Handover.WorkingHours')" width="180">
+        <template slot-scope="scope">
+          {{ scope.row.onlineTime && moment(scope.row.onlineTime).format("YYYY-MM-DD HH:mm:ss") }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="offlineTime" :label="$t('module.teamManager.Handover.OffWorkTime')" width="180">
+        <template slot-scope="scope">
+          {{ scope.row.offlineTime && moment(scope.row.offlineTime).format("YYYY-MM-DD HH:mm:ss") }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="preTeamName" :label="$t('module.teamManager.Handover.LastTeamName')" width="180" />
+      <el-table-column prop="preTeamLeader" :label="$t('module.teamManager.Handover.PreviousTeamLeader')" width="180" />
+      <el-table-column prop="teamWorkStatus" :label="$t('module.teamManager.Handover.TeamWorkStatus')" width="80">
+        <template slot-scope="scope">
+          <el-tag v-if="scope.row.teamWorkStatus === 1" type="success">
+            {{ $t('module.teamManager.Handover.working') }}
+          </el-tag>
+          <el-tag v-else type="info">
+            {{ $t('module.teamManager.Handover.offduty') }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('module.teamManager.Handover.Detail')" width="80">
+        <template slot-scope="scope">
+          <el-button type="text" @click="handleEdit(scope.row.id, true)">{{
+            "btn.detail" | i18nFilter
+          }}</el-button>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('module.teamManager.Handover.Operation')" width="400" fixed="right">
+        <template slot-scope="scope">
+          <el-button
+            v-if="scope.row.teamWorkStatus === 1"
+            size="mini"
+            type="info"
+            icon="el-icon-edit"
+            @click="handleOffline(scope.row)"
+          >
+            {{ "btn.goOffWork" | i18nFilter }}
+          </el-button>
+          <el-button
+            type="info"
+            size="mini"
+            icon="el-icon-edit"
+            @click="handleShow(scope.row.id)"
+          >
+            {{ "btn.log" | i18nFilter }}
+          </el-button>
+          <el-button
+            type="danger"
+            size="mini"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row.id)"
+          >
+            {{ "btn.delete" | i18nFilter }}
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      background
+      :hide-on-single-page="false"
+      :class="$style.table"
+      :current-page="page.current"
+      :page-sizes="[10, 20, 30, 40]"
+      :page-size="page.size"
+      layout="total, sizes, prev, pager, next"
+      :total="page.total"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+    <OfflineDrawer
+      :team="currentTeam"
+      :class="$style.dialog"
+      :visible="offlineDrawerVisible"
+      @on-close="offlineDrawerClose()"
+    />
+  </div>
+</template>
+<script>
+import moment from 'moment'
+import { list, del } from '@/api/team-manage/team.js'
+import SearchBar from '@/views/team-manage/components/search-bar'
+import OfflineDrawer from '@/views/team-manage/components/offline/offline-drawer'
+import i18n from '@/lang'
+export default {
+  components: { SearchBar, OfflineDrawer },
+  props: {},
+  data() {
+    return {
+      moment,
+      isEdit: false,
+      workList: [],
+      page: {
+        total: 0,
+        current: 1,
+        size: 10
+      },
+      offlineDrawerVisible: false,
+      param: {},
+      currentTeam: null
+    }
+  },
+  created() {
+    this.$bus.on('on-offline-edit-success', this.offlineDrawerClose)
+    this.handleSearch()
+  },
+  beforeDestroy() {
+    this.$bus.off('on-offline-edit-success', this.offlineDrawerClose)
+  },
+  methods: {
+    handleShow(id) {
+      this.$router.push({
+        path: 'showlog',
+        query: {
+          id
+        }
+      })
+    },
+    handleSearch(param) {
+      this.param = param
+      console.log(param)
+      list({ ...param, ...this.page }).then(res => {
+        console.log(res)
+        this.page.total = res.data.total
+        if (!res.data.records) {
+          this.workList = []
+          return
+        }
+        this.workList = res.data.records.map((m, index) => ({
+          ...m,
+          index: this.page.size * (this.page.current - 1) + index + 1
+        }))
+      })
+    },
+    handleAdd() {
+      this.$router.push({
+        path: 'team/add',
+        query: {
+          redirect: '/team-manage/list',
+          title: '班组计划新增'
+        }
+      })
+    },
+    handleEdit(id, disable) {
+      this.$router.push({
+        path: 'team/add',
+        query: {
+          redirect: '/team-manage/list',
+          title: '班组计划详情',
+          id,
+          disable
+        }
+      })
+    },
+    handleOffline(team) {
+      this.offlineDrawerVisible = true
+      this.currentTeam = team
+      this.isEdit = true
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`)
+      this.page.size = val
+      this.handleSearch(this.param)
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`)
+      this.page.current = val
+      this.handleSearch(this.param)
+    },
+    handleDelete(id) {
+      this.$confirm(`${this.$t('module.teamManager.Handover.alertListContent')}`,
+        `${this.$t('module.teamManager.Handover.alertTitle')}`, {
+          confirmButtonText: i18n.t('btn.confirm'),
+          cancelButtonText: i18n.t('btn.cancel'),
+          type: 'warning'
+        }).then(() => {
+        del({ id }).then(res => {
+          this.handleSearch(this.param)
+          this.$message({
+            type: 'info',
+            message: i18n.t('deleteMsgBox.doneMsg')
+          })
+        })
+      }).catch(() => {
+        // this.$message({
+        //   type: 'info',
+        //   message: '已取消删除'
+        // })
+      })
+      // this.$alert(`${this.$t('module.teamManager.Handover.alertListContent')}`, `${this.$t('module.teamManager.Handover.alertTitle')}`, {
+      //   confirmButtonText: i18n.t('btn.confirm'),
+      //   callback: action => {
+      //     del({ id }).then(res => {
+      //       this.handleSearch(this.param)
+      //       this.$message({
+      //         type: 'info',
+      //         message: i18n.t('deleteMsgBox.doneMsg')
+      //       })
+      //     })
+      //   }
+      // })
+    },
+    offlineDrawerClose() {
+      this.handleSearch()
+      this.offlineDrawerVisible = false
+    }
+  }
+}
+</script>
+<style lang="scss" module>
+.container {
+  .table {
+    margin: 16px;
+    width: 98.5%;
+  }
+}
+</style>
diff --git a/src/views/team-manage/log-add.vue b/src/views/team-manage/log-add.vue
new file mode 100644
index 0000000..dd4e593
--- /dev/null
+++ b/src/views/team-manage/log-add.vue
@@ -0,0 +1,167 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-07-14 10:24:51
+ * @LastEditTime: 2021-07-14 14:17:07
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \mt-bus-fe\src\views\team-manage\log-add.vue
+-->
+<template>
+  <el-dialog
+    :title="!dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter"
+    :close-on-click-modal="false"
+    :visible.sync="visible"
+    @close="onClose"
+  >
+    <el-row :gutter="15" style="padding: 0 20px;">
+      <el-form
+        ref="dataForm"
+        :model="dataForm"
+        size="medium"
+        label-width="100px"
+        label-position="right"
+        :rules="rules"
+      >
+        <el-form-item :label="$t('module.teamManager.showLog.title')" prop="remark">
+          <el-input v-model="dataForm.remark" :placeholder="$i18nForm(['placeholder.input', $t('module.teamManager.showLog.title')])" :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('module.teamManager.showLog.content')" prop="content">
+          <el-input v-model="dataForm.content" type="textarea" :rows="2" :placeholder="$i18nForm(['placeholder.input', $t('module.teamManager.showLog.content')])" :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('module.teamManager.showLog.type')" prop="type">
+          <template>
+            <el-select v-model="dataForm.type" :style="{width: '100%'}">
+              <el-option
+                v-for="item in typeList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </template>
+        </el-form-item>
+        <el-form-item :label="$t('module.teamManager.showLog.happenTime')" prop="happenTime">
+          <template>
+            <div class="block">
+              <el-date-picker
+                v-model="dataForm.happenTime"
+                type="datetime"
+                :placeholder="$i18nForm(['placeholder.input', $t('module.teamManager.showLog.happenTime')])"
+                clearable
+                :style="{width: '100%'}"
+              />
+            </div>
+          </template>
+        </el-form-item>
+      </el-form>
+    </el-row>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { getDataById, addLog, updateLog } from '@/api/team-manage/team.js'
+import i18n from '@/lang'
+
+const typeList = [{
+  value: '请假',
+  label: i18n.t('module.teamManager.showLog.leave')
+}, {
+  value: '缺勤',
+  label: i18n.t('module.teamManager.showLog.absenceFromDuty')
+}, {
+  value: '设备故障',
+  label: i18n.t('module.teamManager.showLog.equipmentFailure')
+}]
+
+export default {
+  data() {
+    return {
+      visible: false,
+      // rules: [],
+      dataForm: {
+        remark: null,
+        content: null,
+        happenTime: null,
+        type: null,
+        teamEventLogId: null
+      },
+      typeList,
+      rules: {
+        remark: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('module.teamManager.showLog.title')]),
+          trigger: 'blur'
+        }],
+        content: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('module.teamManager.showLog.content')]),
+          trigger: 'blur'
+        }],
+        type: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('module.teamManager.showLog.type')]),
+          trigger: 'change'
+        }],
+        happenTime: [{
+          required: false,
+          message: this.$i18nForm(['placeholder.input', this.$t('module.teamManager.showLog.happenTIme')]),
+          trigger: 'change'
+        }]
+      }
+    }
+  },
+  mounted() {},
+  methods: {
+    onClose() {
+      this.$refs['dataForm'].resetFields()
+    },
+    dataFormSubmit() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          if (this.dataForm.id) {
+            updateLog(this.dataForm).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          } else {
+            addLog(this.dataForm).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          }
+        }
+      })
+    },
+    init(id, teamEventlogId) {
+      this.dataForm.id = id || null
+      this.dataForm.teamEventLogId = teamEventlogId
+      this.visible = true
+      this.$nextTick(() => {
+        if (this.dataForm.id) {
+          getDataById({ id: this.dataForm.id }).then(res => {
+            this.dataForm = res.data
+          })
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/team-manage/plan.vue b/src/views/team-manage/plan.vue
new file mode 100644
index 0000000..92f7fce
--- /dev/null
+++ b/src/views/team-manage/plan.vue
@@ -0,0 +1,274 @@
+<template>
+  <div :class="$style.container">
+    <SearchBar
+      :placeholder="$t('module.teamManager.Handover.Placeholder')"
+      :handover-tme="'PlannedHandoverTime'"
+      @on-search="handleSearch"
+    >
+      <el-button type="success" icon="el-icon-plus" @click="handleAdd()">
+        {{ "btn.add" | i18nFilter }}
+      </el-button>
+    </SearchBar>
+    <el-table
+      :data="workList"
+      :class="$style.table"
+      :stripe="true"
+      :header-cell-style="{background:'#eef1f6',color:'#606266',height: '56px', textAlign: 'center'}"
+      :cell-style="{ textAlign: 'center' }"
+      size="medium"
+    >
+      <el-table-column
+        prop="index"
+        :label="$t('module.teamManager.Handover.index')"
+        width="80"
+        fixed
+      />
+      <el-table-column
+        prop="planTeamName"
+        :label="$t('module.teamManager.Handover.TeamName')"
+        width="180"
+        fixed
+      />
+      <el-table-column
+        prop="createTime"
+        :label="$t('module.teamManager.Handover.CreateTime')"
+        width="180"
+      >
+        <template slot-scope="scope">
+          {{ moment(scope.row.createTime).format("YYYY-MM-DD HH:mm:ss") }}
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="planOnlineTime"
+        :label="$t('module.teamManager.Handover.PlanWorkingHours')"
+        width="180"
+      >
+        <template slot-scope="scope">
+          {{ moment(scope.row.planOnlineTime).format("YYYY-MM-DD HH:mm:ss") }}
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="planHandoverTime"
+        :label="$t('module.teamManager.Handover.PlannedHandoverTime')"
+        width="180"
+      >
+        <template slot-scope="scope">
+          {{ moment(scope.row.planHandoverTime).format("YYYY-MM-DD HH:mm:ss") }}
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="planTeamLeader"
+        :label="$t('module.teamManager.Handover.TeamLeader')"
+        width="180"
+      />
+      <el-table-column
+        prop="planPreTeamName"
+        :label="$t('module.teamManager.Handover.LastTeamName')"
+        width="180"
+      />
+      <el-table-column
+        prop="planPreTeamLeader"
+        :label="$t('module.teamManager.Handover.PreviousTeamLeader')"
+        width="180"
+      />
+      <el-table-column
+        prop="handoverStatus"
+        :label="$t('module.teamManager.Handover.HandoverStatus')"
+        width="100"
+      >
+        <template slot-scope="scope">
+          <el-tag v-if="scope.row.handoverStatus === 1" type="success">
+            {{ $t('module.teamManager.Handover.HandoverCom') }}
+          </el-tag>
+          <el-tag v-else type="info">
+            {{ $t('module.teamManager.Handover.HandoverWait') }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="remark"
+        :label="$t('module.teamManager.Handover.Remark')"
+        width="180"
+      />
+      <el-table-column
+        :label="$t('module.teamManager.Handover.Detail')"
+        width="80"
+      >
+        <template slot-scope="scope">
+          <el-button type="text" @click="handleEdit(scope.row.id, true)">{{
+            "btn.detail" | i18nFilter
+          }}</el-button>
+        </template>
+      </el-table-column>
+      <el-table-column
+        :label="$t('module.teamManager.Handover.Operation')"
+        width="380"
+        fixed="right"
+      >
+        <template slot-scope="scope">
+          <el-button
+            v-if="scope.row.handoverStatus !== 1"
+            type="primary"
+            size="mini"
+            icon="el-icon-play"
+            @click="handleStartWork(scope.row.id)"
+          >
+            {{ "btn.start" | i18nFilter }}
+          </el-button>
+          <el-button
+            v-if="scope.row.handoverStatus !== 1"
+            size="mini"
+            type="info"
+            icon="el-icon-edit"
+            @click="handleEdit(scope.row.id)"
+          >
+            {{ "btn.edit" | i18nFilter }}
+          </el-button>
+          <el-button
+            type="danger"
+            size="mini"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row.id)"
+          >
+            {{ "btn.delete" | i18nFilter }}
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      background
+      :hide-on-single-page="false"
+      :class="$style.table"
+      :current-page="page.current"
+      :page-sizes="[10, 20, 30, 40]"
+      :page-size="page.size"
+      layout="total, sizes, prev, pager, next"
+      :total="page.total"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+  </div>
+</template>
+<script>
+import moment from 'moment'
+import { page, del } from '@/api/team-manage/team-plan.js'
+import SearchBar from '@/views/team-manage/components/search-bar'
+import i18n from '@/lang'
+export default {
+  components: { SearchBar },
+  props: {},
+  data() {
+    return {
+      moment,
+      isEdit: false,
+      workList: [],
+      page: {
+        total: 40,
+        current: 1,
+        size: 10
+      },
+      offlineDrawerVisible: false,
+      param: {},
+      currentTeam: null
+    }
+  },
+  created() {
+    this.handleSearch()
+  },
+  methods: {
+    handleSearch(param) {
+      this.param = param
+      console.log(param)
+      page({ ...param, ...this.page }).then(res => {
+        console.log(res)
+        this.page.total = res.data.total
+        if (!res.data.records) {
+          this.workList = []
+          return
+        }
+        this.workList = res.data.records.map((m, index) => ({
+          ...m,
+          index: this.page.size * (this.page.current - 1) + index + 1
+        }))
+      })
+    },
+    handleStartWork(id) {
+      this.$router.push({
+        path: 'team/add',
+        query: {
+          redirect: '/team-manage/list',
+          title: '班组计划新增',
+          planId: id
+        }
+      })
+    },
+    handleAdd() {
+      this.$router.push({
+        path: 'plan/add',
+        query: {
+          redirect: '/team-manage/plan',
+          title: '班组计划新增'
+        }
+      })
+    },
+    handleEdit(id, disable) {
+      this.$router.push({
+        path: 'plan/add',
+        query: {
+          redirect: '/team-manage/plan',
+          title: '班组计划详情',
+          id,
+          disable
+        }
+      })
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`)
+      this.page.size = val
+      this.handleSearch(this.param)
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`)
+      this.page.current = val
+      this.handleSearch(this.param)
+    },
+    handleOffline(team) {
+      this.offlineDrawerVisible = true
+      this.currentTeam = team
+      this.isEdit = true
+    },
+    handleDelete(id) {
+      this.$confirm(
+        `${this.$t('module.teamManager.Handover.alertPlanContent')}`,
+        `${this.$t('module.teamManager.Handover.alertTitle')}`,
+        {
+          confirmButtonText: i18n.t('btn.confirm'),
+          cancelButtonText: i18n.t('btn.cancel'),
+          type: 'warning'
+        }
+      ).then(() => {
+        console.log(id)
+        del({ id }).then(res => {
+          this.handleSearch(this.param)
+          this.$message({
+            type: 'info',
+            message: i18n.t('deleteMsgBox.doneMsg')
+          })
+        })
+      })
+    },
+    offlineDrawerClose() {
+      this.handleSearch()
+      this.offlineDrawerVisible = false
+    }
+  }
+}
+</script>
+<style lang="scss" module>
+.container {
+  .table {
+    margin: 16px;
+    width: 98.5%;
+  }
+}
+</style>
diff --git a/src/views/team-manage/showlog.vue b/src/views/team-manage/showlog.vue
new file mode 100644
index 0000000..66284f4
--- /dev/null
+++ b/src/views/team-manage/showlog.vue
@@ -0,0 +1,175 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-07-14 08:58:11
+ * @LastEditTime: 2021-07-14 13:37:54
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \mt-bus-fe\src\views\team-manage\showlog.vue
+-->
+<template>
+  <div class="app-container">
+    <el-form
+      :model="formData"
+      :inline="true"
+      size="medium"
+      label-width="80px"
+    >
+      <el-form-item>
+        <el-button type="primary" @click="addNew()"> {{ 'btn.add' | i18nFilter }} </el-button>
+        <el-button type="primary" icon="el-icon-arrow-left" @click="goBack()"> {{ 'btn.back' | i18nFilter }} </el-button>
+      </el-form-item>
+    </el-form>
+    <base-table
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    >
+      <method-btn
+        slot="handleBtn"
+        :width="trueWidth"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="formData.current"
+      :limit.sync="formData.size"
+      @pagination="getList()"
+    />
+    <log-add v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
+  </div>
+</template>
+
+<script>
+const tableBtn = [
+  {
+    type: 'edit',
+    btnName: 'btn.edit'
+  },
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  }
+]
+const tableProps = [
+  {
+    prop: 'remark',
+    label: i18n.t('module.teamManager.showLog.title'),
+    align: 'center'
+  },
+  {
+    prop: 'content',
+    label: i18n.t('module.teamManager.showLog.content'),
+    align: 'center',
+    filter: handleLimit
+  },
+  {
+    prop: 'type',
+    label: i18n.t('module.teamManager.showLog.type'),
+    align: 'center',
+    filter: teamFilter('typeList')
+  },
+  {
+    prop: 'happenTime',
+    label: i18n.t('module.teamManager.showLog.happenTime'),
+    align: 'center',
+    filter: timeFormatter
+  }
+]
+import i18n from '@/lang'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import { showLogPage, delData } from '@/api/team-manage/team.js'
+import logAdd from './log-add.vue'
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import { handleLimit, timeFormatter } from '@/filters'
+import teamFilter from './filter'
+export default {
+  components: { BaseTable, MethodBtn, Pagination, logAdd },
+  data() {
+    return {
+      value: {},
+      tableProps,
+      tableData: [],
+      listQuery: {
+        current: 1,
+        size: 10
+      },
+      formData: {
+        current: 1,
+        size: 10,
+        teamEventLogId: this.$route.query.id
+      },
+      list: [],
+      total: 0,
+      tableBtn,
+      trueWidth: 200,
+      listLoading: true,
+      addOrUpdateVisible: false
+    }
+  },
+  mounted() {
+    this.getList()
+  },
+  methods: {
+    handleClick(raw) {
+      if (raw.type === 'delete') {
+        this.$confirm(i18n.t('deleteMsgBox.content'), i18n.t('deleteMsgBox.hint'), {
+          confirmButtonText: i18n.t('btn.confirm'),
+          cancelButtonText: i18n.t('btn.cancel'),
+          type: 'warning'
+        }).then(() => {
+          // eslint-disable-next-line no-undef
+          delData({ id: raw.data.id }).then(response => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+              }
+            })
+          })
+        }).catch(() => {})
+      } else {
+        this.addNew(raw.data.id)
+      }
+    },
+    getList() {
+      showLogPage(this.formData).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    },
+    addNew(id) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id, this.formData.teamEventLogId)
+      })
+    },
+    goBack() {
+      this.$router.go(-1)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/zip/index.vue b/src/views/zip/index.vue
index 412608f..8a2a6b7 100644
--- a/src/views/zip/index.vue
+++ b/src/views/zip/index.vue
@@ -1,10 +1,25 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-03-05 16:34:46
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-06-22 14:58:47
+ * @Description:
+-->
 <template>
   <div class="app-container">
     <el-input v-model="filename" placeholder="Please enter the file name (default file)" style="width:300px;" prefix-icon="el-icon-document" />
     <el-button :loading="downloadLoading" style="margin-bottom:20px;" type="primary" icon="el-icon-document" @click="handleDownload">
       Export Zip
     </el-button>
-    <el-table v-loading="listLoading" :data="list" element-loading-text="拼命加载中" border fit highlight-current-row>
+    <el-table
+      v-loading="listLoading"
+      :data="list"
+      :header-cell-style="{background:'#eef1f6',color:'#606266',height: '56px', textAlign: 'center'}"
+      element-loading-text="拼命加载中"
+      border
+      fit
+      highlight-current-row
+    >
       <el-table-column align="center" label="ID" width="95">
         <template slot-scope="scope">
           {{ scope.$index }}
diff --git a/tests/unit/utils/param2Obj.spec.js b/tests/unit/utils/param2Obj.spec.js
deleted file mode 100644
index e106ed8..0000000
--- a/tests/unit/utils/param2Obj.spec.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { param2Obj } from '@/utils/index.js'
-describe('Utils:param2Obj', () => {
-  const url = 'https://github.com/PanJiaChen/vue-element-admin?name=bill&age=29&sex=1&field=dGVzdA==&key=%E6%B5%8B%E8%AF%95'
-
-  it('param2Obj test', () => {
-    expect(param2Obj(url)).toEqual({
-      name: 'bill',
-      age: '29',
-      sex: '1',
-      field: window.btoa('test'),
-      key: '测试'
-    })
-  })
-})
diff --git a/vue.config.js b/vue.config.js
index 33a6348..adf54d5 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -14,7 +14,6 @@ const name = defaultSettings.title || 'vue Element Admin' // page title
 // You can change the port by the following method:
 // port = 9527 npm run dev OR npm run dev --port = 9527
 const port = process.env.port || process.env.npm_config_port || 9527 // dev port
-
 // All configuration item explanations can be find in https://cli.vuejs.org/config/
 module.exports = {
   /**
@@ -24,19 +23,77 @@ module.exports = {
    * In most cases please use '/' !!!
    * Detail: https://cli.vuejs.org/config/#publicpath
    */
-  publicPath: '/',
+  publicPath: '',
   outputDir: 'dist',
   assetsDir: 'static',
   lintOnSave: process.env.NODE_ENV === 'development',
   productionSourceMap: false,
   devServer: {
     port: port,
-    open: true,
+    open: false,
     overlay: {
       warnings: false,
       errors: true
     },
-    before: require('./mock/mock-server.js')
+    // allowedHosts: ['192.168.0.104:8080', '192.168.0.104:8081'],
+    // headers: {
+    //   'Access-Control-Allow-Origin': '192.168.0.104:8080, 192.168.0.104:8081',
+    //   'Access-Control-Allow-Headers': '*',
+    //   'Access-Control-Allow-Methods': '*',
+    //   'Access-Control-Allow-Credentials': 'true'
+    // },
+    // before: require('./mock/mock-server.js'),
+    // 这里写入需要代理的api和对应的目标地址
+    proxy: {
+      '/api': {
+        target: 'http://cigs.mes.picaiba.com',
+        // target: 'http://192.168.0.127:8080',
+        // target: 'http://192.168.0.165:8080',
+        // target: 'http://192.168.43.105:8080',
+        // target: 'http://127.0.0.1:8080',
+        // target: 'http://192.168.0.70:8080',
+        // target: 'http://192.168.0.199:8080',
+
+        ws: true,
+        changeOrigin: true,
+        pathRewrite: {
+          '^/portapi': ''
+        }
+        // 使用了proxy 就需要开启下面的选项 (http-proxy-middleware会将post请求给parse了 所以需要再次进行string化)
+        // onProxyReq: (proxyReq, req, res, options) => {
+        //   if (req.body) {
+        //     const bodyData = JSON.stringify(req.body)
+        //     // incase if content-type is application/x-www-form-urlencoded -> we need to change to application/json
+        //     proxyReq.setHeader('Content-Type', 'application/json')
+        //     proxyReq.setHeader('Content-Length', Buffer.byteLength(bodyData))
+        //     // stream the content
+        //     proxyReq.write(bodyData)
+        //   }
+        // }
+      },
+      '/spc': {
+        target: 'http://58.210.206.230:8000',
+        // target: 'http://192.168.0.187:8080',
+        // target: 'http://192.168.43.105:8080',
+        // target: 'http://127.0.0.1:8080',
+        ws: true,
+        changeOrigin: true,
+        pathRewrite: {
+          '^/spc': ''
+        }
+        // 使用了proxy 就需要开启下面的选项 (http-proxy-middleware会将post请求给parse了 所以需要再次进行string化)
+        // onProxyReq: (proxyReq, req, res, options) => {
+        //   if (req.body) {
+        //     const bodyData = JSON.stringify(req.body)
+        //     // incase if content-type is application/x-www-form-urlencoded -> we need to change to application/json
+        //     proxyReq.setHeader('Content-Type', 'application/json')
+        //     proxyReq.setHeader('Content-Length', Buffer.byteLength(bodyData))
+        //     // stream the content
+        //     proxyReq.write(bodyData)
+        //   }
+        // }
+      }
+    }
   },
   configureWebpack: {
     // provide the app's title in webpack's name field, so that
@@ -48,21 +105,18 @@ module.exports = {
       }
     }
   },
-  chainWebpack(config) {
-    // it can improve the speed of the first screen, it is recommended to turn on preload
-    // it can improve the speed of the first screen, it is recommended to turn on preload
-    config.plugin('preload').tap(() => [
-      {
-        rel: 'preload',
-        // to ignore runtime.js
-        // https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171
-        fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
-        include: 'initial'
+  css: {
+    loaderOptions: {
+      // vue cli默认使用node-sass作为sass预处理器，使用下面的选项可以使用sass包作为预处理器
+      // 用于解决node-sass需要从外网下载依赖的卡顿问题
+      sass: {
+        implementation: require('sass')
       }
-    ])
-
-    // when there are many pages, it will cause too many meaningless requests
-    config.plugins.delete('prefetch')
+    }
+  },
+  chainWebpack(config) {
+    config.plugins.delete('preload') // TODO: need test
+    config.plugins.delete('prefetch') // TODO: need test
 
     // set svg-sprite-loader
     config.module
@@ -81,6 +135,17 @@ module.exports = {
       })
       .end()
 
+    // set preserveWhitespace
+    config.module
+      .rule('vue')
+      .use('vue-loader')
+      .loader('vue-loader')
+      .tap(options => {
+        options.compilerOptions.preserveWhitespace = true
+        return options
+      })
+      .end()
+
     config
       .when(process.env.NODE_ENV !== 'development',
         config => {
@@ -88,7 +153,7 @@ module.exports = {
             .plugin('ScriptExtHtmlWebpackPlugin')
             .after('html')
             .use('script-ext-html-webpack-plugin', [{
-            // `runtime` must same as runtimeChunk name. default is `runtime`
+              // `runtime` must same as runtimeChunk name. default is `runtime`
               inline: /runtime\..*\.js$/
             }])
             .end()
@@ -116,7 +181,6 @@ module.exports = {
                 }
               }
             })
-          // https:// webpack.js.org/configuration/optimization/#optimizationruntimechunk
           config.optimization.runtimeChunk('single')
         }
       )