chore: 初始化平芝126KV断路器线 OP 前端

.gitignore

@@ -0,0 +1,22 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw*
+/dist-MES/

babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

package.json

@@ -0,0 +1,383 @@
+{
+  "name": "mes",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint",
+    "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"
+  },
+  "dependencies": {
+    "axios": "^1.6.5",
+    "echarts": "^5.4.3",
+    "element-ui": "^2.15.14",
+    "file-saver": "^2.0.2",
+    "js-cookie": "^2.2.1",
+    "js-export-excel": "^1.1.2",
+    "mint-ui": "^2.2.13",
+    "mqtt": "^5.3.5",
+    "qrcode": "^1.5.3",
+    "qs": "^6.11.2",
+    "uuid": "^8.3.2",
+    "vue": "^2.7.16",
+    "vue-jsonp": "^0.1.8",
+    "vue-router": "^3.6.5",
+    "vue-seamless-scroll": "^1.1.21",
+    "vuex": "^3.6.2",
+    "xlsx": "^0.18.5",
+    "xlsx-style": "^0.8.13"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^5.0.8",
+    "@vue/cli-plugin-eslint": "^5.0.8",
+    "@vue/cli-service": "^5.0.8",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^7.32.0",
+    "eslint-plugin-vue": "^9.20.1",
+    "jquery": "^3.6.4",
+    "sass": "^1.70.0",
+    "sass-loader": "^13.3.2",
+    "script-loader": "^0.7.2",
+    "svg-sprite-loader": "^5.1.1",
+    "vue-particles": "^1.0.9",
+    "vue-template-compiler": "^2.7.16"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "rules": {
+      "vue/multi-word-component-names": [
+        "error",
+        {
+          "ignores": ["index", "template"]
+        }
+      ],
+      "vue/max-attributes-per-line": ["off", {
+        "singleline": {
+          "max": 1
+        },
+        "multiline": {
+          "max": 1
+        }
+      }],
+      "vue/name-property-casing": "off",
+      "accessor-pairs": 2,
+      "arrow-spacing": [
+        2,
+        {
+          "before": true,
+          "after": true
+        }
+      ],
+      "block-spacing": [
+        2,
+        "always"
+      ],
+      "brace-style": [
+        2,
+        "1tbs",
+        {
+          "allowSingleLine": true
+        }
+      ],
+      "camelcase": [
+        0
+      ],
+      "comma-dangle": [
+        2,
+        "never"
+      ],
+      "comma-spacing": [
+        2,
+        {
+          "before": false,
+          "after": true
+        }
+      ],
+      "comma-style": [
+        2,
+        "last"
+      ],
+      "constructor-super": 2,
+      "curly": [
+        2,
+        "multi-line"
+      ],
+      "dot-location": [
+        2,
+        "property"
+      ],
+      "eol-last": 2,
+      "eqeqeq": [
+        2,
+        "allow-null"
+      ],
+      "generator-star-spacing": [
+        2,
+        {
+          "before": true,
+          "after": true
+        }
+      ],
+      "handle-callback-err": [
+        2,
+        "^(err|error)$"
+      ],
+      "indent": [
+        2,
+        2,
+        {
+          "SwitchCase": 1
+        }
+      ],
+      "jsx-quotes": [
+        2,
+        "prefer-single"
+      ],
+      "key-spacing": [
+        2,
+        {
+          "beforeColon": false,
+          "afterColon": true
+        }
+      ],
+      "keyword-spacing": [
+        2,
+        {
+          "before": true,
+          "after": true
+        }
+      ],
+      "new-cap": [
+        2,
+        {
+          "newIsCap": true,
+          "capIsNew": false
+        }
+      ],
+      "new-parens": 2,
+      "no-array-constructor": 2,
+      "no-caller": 2,
+      "no-console": "off",
+      "no-class-assign": 2,
+      "no-cond-assign": 2,
+      "no-const-assign": 2,
+      "no-control-regex": 2,
+      "no-delete-var": 2,
+      "no-dupe-args": 2,
+      "no-dupe-class-members": 2,
+      "no-dupe-keys": 2,
+      "no-duplicate-case": 2,
+      "no-empty-character-class": 2,
+      "no-empty-pattern": 2,
+      "no-eval": 2,
+      "no-ex-assign": 2,
+      "no-extend-native": 2,
+      "no-extra-bind": 2,
+      "no-extra-boolean-cast": 2,
+      "no-extra-parens": [
+        2,
+        "functions"
+      ],
+      "no-fallthrough": 2,
+      "no-floating-decimal": 2,
+      "no-func-assign": 2,
+      "no-implied-eval": 2,
+      "no-inner-declarations": [
+        2,
+        "functions"
+      ],
+      "no-invalid-regexp": 2,
+      "no-irregular-whitespace": 2,
+      "no-iterator": 2,
+      "no-label-var": 2,
+      "no-labels": [
+        2,
+        {
+          "allowLoop": false,
+          "allowSwitch": false
+        }
+      ],
+      "no-lone-blocks": 2,
+      "no-mixed-spaces-and-tabs": 2,
+      "no-multi-spaces": 2,
+      "no-multi-str": 2,
+      "no-multiple-empty-lines": [
+        2,
+        {
+          "max": 1
+        }
+      ],
+      "no-native-reassign": 2,
+      "no-negated-in-lhs": 2,
+      "no-new-object": 2,
+      "no-new-require": 2,
+      "no-new-symbol": 2,
+      "no-new-wrappers": 2,
+      "no-obj-calls": 2,
+      "no-octal": 2,
+      "no-octal-escape": 2,
+      "no-path-concat": 2,
+      "no-proto": 2,
+      "no-redeclare": 2,
+      "no-regex-spaces": 2,
+      "no-return-assign": [
+        2,
+        "except-parens"
+      ],
+      "no-self-assign": 2,
+      "no-self-compare": 2,
+      "no-sequences": 2,
+      "no-shadow-restricted-names": 2,
+      "no-spaced-func": 2,
+      "no-sparse-arrays": 2,
+      "no-this-before-super": 2,
+      "no-throw-literal": 2,
+      "no-trailing-spaces": 2,
+      "no-undef": 2,
+      "no-undef-init": 2,
+      "no-unexpected-multiline": 2,
+      "no-unmodified-loop-condition": 2,
+      "no-unneeded-ternary": [
+        2,
+        {
+          "defaultAssignment": false
+        }
+      ],
+      "no-unreachable": 2,
+      "no-unsafe-finally": 2,
+      "no-unused-vars": [
+        2,
+        {
+          "vars": "all",
+          "args": "none"
+        }
+      ],
+      "no-useless-call": 2,
+      "no-useless-computed-key": 2,
+      "no-useless-constructor": 2,
+      "no-useless-escape": 0,
+      "no-whitespace-before-property": 2,
+      "no-with": 2,
+      "one-var": [
+        2,
+        {
+          "initialized": "never"
+        }
+      ],
+      "operator-linebreak": [
+        2,
+        "after",
+        {
+          "overrides": {
+            "?": "before",
+            ":": "before"
+          }
+        }
+      ],
+      "padded-blocks": [
+        2,
+        "never"
+      ],
+      "quotes": [
+        2,
+        "single",
+        {
+          "avoidEscape": true,
+          "allowTemplateLiterals": true
+        }
+      ],
+      "semi": [
+        2,
+        "never"
+      ],
+      "semi-spacing": [
+        2,
+        {
+          "before": false,
+          "after": true
+        }
+      ],
+      "space-before-blocks": [
+        2,
+        "always"
+      ],
+      "space-before-function-paren": [
+        2,
+        "never"
+      ],
+      "space-in-parens": [
+        2,
+        "never"
+      ],
+      "space-infix-ops": 2,
+      "space-unary-ops": [
+        2,
+        {
+          "words": true,
+          "nonwords": false
+        }
+      ],
+      "spaced-comment": [
+        2,
+        "always",
+        {
+          "markers": [
+            "global",
+            "globals",
+            "eslint",
+            "eslint-disable",
+            "*package",
+            "!",
+            ","
+          ]
+        }
+      ],
+      "template-curly-spacing": [
+        2,
+        "never"
+      ],
+      "use-isnan": 2,
+      "valid-typeof": 2,
+      "wrap-iife": [
+        2,
+        "any"
+      ],
+      "yield-star-spacing": [
+        2,
+        "both"
+      ],
+      "yoda": [
+        2,
+        "never"
+      ],
+      "prefer-const": 2,
+      "object-curly-spacing": [
+        2,
+        "always",
+        {
+          "objectsInObjects": false
+        }
+      ],
+      "array-bracket-spacing": [
+        2,
+        "never"
+      ]
+    },
+    "parserOptions": {
+      "parser": "babel-eslint"
+    }
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ]
+}

public/config.js

@@ -0,0 +1,12 @@
+window.g = {
+  mqttClient: null,
+  mqttSubscriptionTopic: 'MES/InstantMessaging/PZ126/',
+  mqttPublishTopic: 'WEB/InstantMessaging/PZ126/MisServer',
+  mqttIP: '127.0.0.1',
+  // mqttIP: '192.168.0.100',
+  mqttPortNumber: '8083',
+  // baseURL: 'http://192.168.31.1:10000/submit/MESCommonBase.ashx',
+  baseURL: 'http://127.0.0.1:10210/submit/MESCommonBase.ashx',
+  // agvApi: 'http://192.168.31.1:9951/api/imes/MES_To_AGV_From_WEB'
+  agvApi: 'http://127.0.0.1:9951/api/imes/MES_To_AGV_From_WEB_Test'
+}

public/index.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta content="IE=edge" http-equiv="X-UA-Compatible">
+    <meta content="width=device-width,initial-scale=1.0" name="viewport">
+    <link href="<%= BASE_URL %>favicon.ico" rel="icon">
+    <title>MES工位系统</title>
+    <script type="text/javascript">
+        document.write("<script src='./config.js?v=" + new Date().getTime() + "'><\/script>");
+    </script>
+</head>
+<body>
+<noscript>
+    <strong>We're sorry but MES doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+</noscript>
+<div id="app"></div>
+<!-- built files will be auto injected -->
+</body>
+</html>
+<style>
+    body {
+        margin: 0;
+        background: white;
+    }
+</style>

src/App.vue

@@ -0,0 +1,17 @@
+<template>
+  <div id="app">
+    <router-view />
+  </div>
+</template>
+
+<style>
+#app {
+  font-family: MiSans Bold, serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: #2c3e50;
+}
+.el-table tbody tr:hover > td {
+  background-color: unset !important
+}
+</style>

src/api/login.js

@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+import state from '@/store'
+import router from '@/router'
+export function login(username, password) {
+  return request({
+    url: '',
+    method: 'post',
+    data: {
+      UserID: state.state.user.id,
+      ModularID: router.currentRoute.path,
+      type: '1',
+      name: '菜单模块系统_用户名密码_查询数据_改造新增',
+      param: `用户名=${username}&密码=${password}`
+    }
+  })
+}
+//
+export function getInfo(token) {
+  return request({
+    url: '',
+    method: 'post',
+    data: {
+      UserID: state.state.user.id,
+      ModularID: router.currentRoute.path,
+      type: '1',
+      name: '菜单模块系统_项目角色模块列表_二级_查询数据',
+      param: `角色编号=${token}`
+    }
+  })
+}
+// 修改密码
+export function editPassword(num1, num2, num3, num4) {
+  return request({
+    url: '',
+    method: 'post',
+    data: {
+      UserID: state.state.user.id,
+      ModularID: router.currentRoute.path,
+      type: '2',
+      name: '账号信息_修改密码_MESWORK',
+      param: '考勤编号=' + num1 + '=string&原始密码=' + num2 + '=string&新密码=' + num3 + '=string&返回=' + num4 + '=string=output'
+    }
+  })
+}

src/assets/font/Misans.css

@@ -0,0 +1,70 @@
+@font-face {
+  font-family: MiSans Demibold;
+  src: url("MiSans-Demibold.ttf");
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+@font-face {
+  font-family: MiSans Bold;
+  src: url("MiSans-Bold.ttf");
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+@font-face {
+  font-family: MiSans ExtraLight;
+  src: url("MiSans-ExtraLight.ttf");
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+@font-face {
+  font-family: MiSans Heavy;
+  src: url("MiSans-Heavy.ttf");
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+@font-face {
+  font-family: MiSans Light;
+  src: url("MiSans-Light.ttf");
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+@font-face {
+  font-family: MiSans Medium;
+  src: url("MiSans-Medium.ttf");
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+@font-face {
+  font-family: MiSans Normal;
+  src: url("MiSans-Normal.ttf");
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+@font-face {
+  font-family: MiSans Regular;
+  src: url("MiSans-Regular.ttf");
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+@font-face {
+  font-family: MiSans Semibold;
+  src: url("MiSans-Semibold.ttf");
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+@font-face {
+  font-family: MiSans Thin;
+  src: url("MiSans-Thin.ttf");
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}

src/directive/clipboard/clipboard.js

@@ -0,0 +1,49 @@
+// Inspired by https://github.com/Inndy/vue-clipboard2
+const Clipboard = require('clipboard')
+if (!Clipboard) {
+  throw new Error('you shold npm install `clipboard` --save at first ')
+}
+
+export default {
+  bind(el, binding) {
+    if (binding.arg === 'success') {
+      el._v_clipboard_success = binding.value
+    } else if (binding.arg === 'error') {
+      el._v_clipboard_error = binding.value
+    } else {
+      const clipboard = new Clipboard(el, {
+        text() { return binding.value },
+        action() { return binding.arg === 'cut' ? 'cut' : 'copy' }
+      })
+      clipboard.on('success', e => {
+        const callback = el._v_clipboard_success
+        callback && callback(e) // eslint-disable-line
+      })
+      clipboard.on('error', e => {
+        const callback = el._v_clipboard_error
+        callback && callback(e) // eslint-disable-line
+      })
+      el._v_clipboard = clipboard
+    }
+  },
+  update(el, binding) {
+    if (binding.arg === 'success') {
+      el._v_clipboard_success = binding.value
+    } else if (binding.arg === 'error') {
+      el._v_clipboard_error = binding.value
+    } else {
+      el._v_clipboard.text = function() { return binding.value }
+      el._v_clipboard.action = function() { return binding.arg === 'cut' ? 'cut' : 'copy' }
+    }
+  },
+  unbind(el, binding) {
+    if (binding.arg === 'success') {
+      delete el._v_clipboard_success
+    } else if (binding.arg === 'error') {
+      delete el._v_clipboard_error
+    } else {
+      el._v_clipboard.destroy()
+      delete el._v_clipboard
+    }
+  }
+}

src/directive/clipboard/index.js

@@ -0,0 +1,13 @@
+import Clipboard from './clipboard'
+
+const install = function(Vue) {
+  Vue.directive('Clipboard', Clipboard)
+}
+
+if (window.Vue) {
+  window.clipboard = Clipboard
+  Vue.use(install); // eslint-disable-line
+}
+
+Clipboard.install = install
+export default Clipboard

src/directive/el-dragDialog/drag.js

@@ -0,0 +1,46 @@
+export default {
+  bind(el, binding) {
+    const dialogHeaderEl = el.querySelector('.el-dialog__header')
+    const dragDom = el.querySelector('.el-dialog')
+    dialogHeaderEl.style = 'cursor:move;'
+
+    // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
+    const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)
+
+    dialogHeaderEl.onmousedown = (e) => {
+      // 鼠标按下，计算当前元素距离可视区的距离
+      const disX = e.clientX - dialogHeaderEl.offsetLeft
+      const disY = e.clientY - dialogHeaderEl.offsetTop
+
+      // 获取到的值带px 正则匹配替换
+      let styL, styT
+
+      // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
+      if (sty.left.includes('%')) {
+        styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100)
+        styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100)
+      } else {
+        styL = +sty.left.replace(/\px/g, '')
+        styT = +sty.top.replace(/\px/g, '')
+      }
+
+      document.onmousemove = function(e) {
+        // 通过事件委托，计算移动的距离
+        const l = e.clientX - disX
+        const t = e.clientY - disY
+
+        // 移动当前元素
+        dragDom.style.left = `${l + styL}px`
+        dragDom.style.top = `${t + styT}px`
+
+        // 将此时的位置传出去
+        // binding.value({x:e.pageX,y:e.pageY})
+      }
+
+      document.onmouseup = function(e) {
+        document.onmousemove = null
+        document.onmouseup = null
+      }
+    }
+  }
+}

src/directive/el-dragDialog/index.js

@@ -0,0 +1,13 @@
+import drag from './drag'
+
+const install = function(Vue) {
+  Vue.directive('el-drag-dialog', drag)
+}
+
+if (window.Vue) {
+  window['el-drag-dialog'] = drag
+  Vue.use(install); // eslint-disable-line
+}
+
+drag.install = install
+export default drag

src/directive/sticky.js

@@ -0,0 +1,91 @@
+const vueSticky = {}
+let listenAction
+vueSticky.install = Vue => {
+  Vue.directive('sticky', {
+    inserted(el, binding) {
+      const params = binding.value || {}
+      const stickyTop = params.stickyTop || 0
+      const zIndex = params.zIndex || 1000
+      const elStyle = el.style
+
+      elStyle.position = '-webkit-sticky'
+      elStyle.position = 'sticky'
+      // if the browser support css sticky（Currently Safari, Firefox and Chrome Canary）
+      // if (~elStyle.position.indexOf('sticky')) {
+      //     elStyle.top = `${stickyTop}px`;
+      //     elStyle.zIndex = zIndex;
+      //     return
+      // }
+      const elHeight = el.getBoundingClientRect().height
+      const elWidth = el.getBoundingClientRect().width
+      elStyle.cssText = `top: ${stickyTop}px; z-index: ${zIndex}`
+
+      const parentElm = el.parentNode || document.documentElement
+      const placeholder = document.createElement('div')
+      placeholder.style.display = 'none'
+      placeholder.style.width = `${elWidth}px`
+      placeholder.style.height = `${elHeight}px`
+      parentElm.insertBefore(placeholder, el)
+
+      let active = false
+
+      const getScroll = (target, top) => {
+        const prop = top ? 'pageYOffset' : 'pageXOffset'
+        const method = top ? 'scrollTop' : 'scrollLeft'
+        let ret = target[prop]
+        if (typeof ret !== 'number') {
+          ret = window.document.documentElement[method]
+        }
+        return ret
+      }
+
+      const sticky = () => {
+        if (active) {
+          return
+        }
+        if (!elStyle.height) {
+          elStyle.height = `${el.offsetHeight}px`
+        }
+
+        elStyle.position = 'fixed'
+        elStyle.width = `${elWidth}px`
+        placeholder.style.display = 'inline-block'
+        active = true
+      }
+
+      const reset = () => {
+        if (!active) {
+          return
+        }
+
+        elStyle.position = ''
+        placeholder.style.display = 'none'
+        active = false
+      }
+
+      const check = () => {
+        const scrollTop = getScroll(window, true)
+        const offsetTop = el.getBoundingClientRect().top
+        if (offsetTop < stickyTop) {
+          sticky()
+        } else {
+          if (scrollTop < elHeight + stickyTop) {
+            reset()
+          }
+        }
+      }
+      listenAction = () => {
+        check()
+      }
+
+      window.addEventListener('scroll', listenAction)
+    },
+
+    unbind() {
+      window.removeEventListener('scroll', listenAction)
+    }
+  })
+}
+
+export default vueSticky
+

src/directive/waves/index.js

@@ -0,0 +1,13 @@
+import waves from './waves'
+
+const install = function(Vue) {
+  Vue.directive('waves', waves)
+}
+
+if (window.Vue) {
+  window.waves = waves
+  Vue.use(install); // eslint-disable-line
+}
+
+waves.install = install
+export default waves

src/directive/waves/waves.css

@@ -0,0 +1,26 @@
+.waves-ripple {
+    position: absolute;
+    border-radius: 100%;
+    background-color: rgba(0, 0, 0, 0.15);
+    background-clip: padding-box;
+    pointer-events: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -webkit-transform: scale(0);
+    -ms-transform: scale(0);
+    transform: scale(0);
+    opacity: 1;
+}
+
+.waves-ripple.z-active {
+    opacity: 0;
+    -webkit-transform: scale(2);
+    -ms-transform: scale(2);
+    transform: scale(2);
+    -webkit-transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
+    transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
+    transition: opacity 1.2s ease-out, transform 0.6s ease-out;
+    transition: opacity 1.2s ease-out, transform 0.6s ease-out, -webkit-transform 0.6s ease-out;
+}

src/directive/waves/waves.js

@@ -0,0 +1,42 @@
+import './waves.css'
+
+export default {
+  bind(el, binding) {
+    el.addEventListener('click', e => {
+      const customOpts = Object.assign({}, binding.value)
+      const opts = Object.assign({
+        ele: el, // 波纹作用元素
+        type: 'hit', // hit点击位置扩散center中心点扩展
+        color: 'rgba(0, 0, 0, 0.15)' // 波纹颜色
+      }, customOpts)
+      const target = opts.ele
+      if (target) {
+        target.style.position = 'relative'
+        target.style.overflow = 'hidden'
+        const rect = target.getBoundingClientRect()
+        let ripple = target.querySelector('.waves-ripple')
+        if (!ripple) {
+          ripple = document.createElement('span')
+          ripple.className = 'waves-ripple'
+          ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px'
+          target.appendChild(ripple)
+        } else {
+          ripple.className = 'waves-ripple'
+        }
+        switch (opts.type) {
+          case 'center':
+            ripple.style.top = (rect.height / 2 - ripple.offsetHeight / 2) + 'px'
+            ripple.style.left = (rect.width / 2 - ripple.offsetWidth / 2) + 'px'
+            break
+          default:
+            ripple.style.top = (e.pageY - rect.top - ripple.offsetHeight / 2 - document.body.scrollTop) + 'px'
+            ripple.style.left = (e.pageX - rect.left - ripple.offsetWidth / 2 - document.body.scrollLeft) + 'px'
+        }
+        ripple.style.backgroundColor = opts.color
+        ripple.className = 'waves-ripple z-active'
+        return false
+      }
+    }, false)
+  }
+}
+

src/main.js

@@ -0,0 +1,59 @@
+import Vue from 'vue'
+import 'element-ui/lib/theme-chalk/index.css'
+import App from './App.vue'
+import store from './store/index'
+import ElementUI from 'element-ui'
+import router from './router'
+import * as echarts from 'echarts'
+import curd from '@/utils/curd'
+import elDragDialog from '@/directive/el-dragDialog'
+// import '@/styles/index.scss' // global css
+import VueParticles from 'vue-particles'
+import jsonp from 'vue-jsonp'
+
+// 新通讯11/12---<
+import scroll from 'vue-seamless-scroll'
+import mqtt from 'mqtt'
+
+// 关闭点弹窗周围关闭功能 -- 20200218
+ElementUI.Dialog.props.closeOnClickModal.default = false
+
+Vue.use(elDragDialog)
+Vue.use(scroll)
+Vue.use(VueParticles)
+Vue.use(curd)
+Vue.use(jsonp)
+Vue.use(ElementUI)
+Vue.prototype.echarts = echarts
+Vue.prototype.mqtt = mqtt
+Vue.config.productionTip = true
+Vue.directive('loadmore', {
+  bind(el, binding) {
+    var p = 0
+    var t = 0
+    var down = true
+    var selectWrap = el.querySelector('.el-table__body-wrapper')
+    selectWrap.addEventListener('scroll', function() {
+      // 判断是否向下滚动
+      p = this.scrollTop
+      // if ( t < p){down=true}else{down=false}
+      if (t < p) {
+        down = true
+      } else {
+        down = false
+      }
+      t = p
+      // 判断是否到底
+      const sign = 10
+      const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
+      if (scrollDistance <= sign && down) {
+        binding.value()
+      }
+    })
+  }
+})
+new Vue({
+  store,
+  router,
+  render: h => h(App)
+}).$mount('#app')

src/router/index.js

@@ -0,0 +1,98 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+import layout from '@/views/layout/index.vue'
+import Login from '@/views/Login/index.vue'
+import OperationGuide from '@/views/OperationGuide/index.vue'
+import OrderCompletion from '@/views/OrderCompletion/index.vue'
+import QualityInquiry from '@/views/QualityInquiry/index.vue'
+import OrderData from '@/views/OrderData/index.vue'
+import Andon from '@/views/Andon/index.vue'
+import DeviceManagement from '@/views/EquipmentMaintenance/index.vue'
+import MaterialPull from '@/views/MaterialPull/index.vue'
+import RepairManagement from '@/views/RepairManagement/index.vue'
+import WorkPlanData from '@/views/WorkPlanData/index.vue'
+import MaterialData from '@/views/MaterialData/index.vue'
+
+Vue.use(Router)
+const originalPush = Router.prototype.push
+
+Router.prototype.push = function push(location) {
+  return originalPush.call(this, location).catch(err => err)
+}
+
+export const constantRouterMap = [{
+  path: '/',
+  name: 'Login',
+  component: Login
+},
+{
+  path: '/layout',
+  name: 'layout',
+  component: layout,
+  children: [{
+    path: '/OperationGuide',
+    name: 'OperationGuide',
+    component: OperationGuide
+    // meta: {
+    //   keepAlive: true
+    // }
+  },
+  {
+    path: '/OperationGuidePdf',
+    name: 'OperationGuidePdf',
+    component: () => import('@/views/OperationGuidePdf/index.vue')
+  },
+  {
+    path: '/OrderCompletion',
+    name: 'OrderCompletion',
+    component: OrderCompletion
+  },
+  {
+    path: '/QualityInquiry',
+    name: 'QualityInquiry',
+    component: QualityInquiry
+  },
+  {
+    path: '/OrderData',
+    name: 'OrderData',
+    component: OrderData
+  },
+  {
+    path: '/Andon',
+    name: 'Andon',
+    component: Andon
+  },
+  {
+    path: '/DeviceManagement',
+    name: 'DeviceManagement',
+    component: DeviceManagement
+  },
+  {
+    path: '/MaterialPull',
+    name: 'MaterialPull',
+    component: MaterialPull
+  },
+  {
+    path: '/RepairManagement',
+    name: 'RepairManagement',
+    component: RepairManagement
+  },
+  {
+    path: '/WorkPlanData',
+    name: 'WorkPlanData',
+    component: WorkPlanData
+  },
+  {
+    path: '/MaterialData',
+    name: 'MaterialData',
+    component: MaterialData
+  }
+  ]
+}
+]
+export default new Router({
+  scrollBehavior: () => ({
+    y: 0
+  }),
+  routes: constantRouterMap
+})

src/store/getters.js

@@ -0,0 +1,26 @@
+const getters = {
+  sidebar: state => state.app.sidebar,
+  device: state => state.app.device,
+  token: state => state.user.token,
+  avatar: state => state.user.avatar,
+  name: state => state.user.name,
+  roles: state => state.user.roles,
+  visitedViews: state => state.tagsView.visitedViews,
+  cachedViews: state => state.tagsView.cachedViews,
+  permission_routers: state => state.permission.routers,
+  addRouters: state => state.permission.addRouters,
+  id: state => state.user.id,
+  processList_table: state => state.operationGuide.processList_table,
+  materialList_table: state => state.operationGuide.materialList_table,
+  pic: state => state.operationGuide.pic,
+  partAssemblyInformation: state => state.operationGuide.partAssemblyInformation,
+  engineValue: state => state.station.engineValue,
+  tighteningPosition: state => state.operationGuide.tighteningPosition,
+  smile: state => state.operationGuide.smile,
+  greenBoltInformation: state => state.operationGuide.greenBoltInformation,
+  account: state => state.user.account,
+  orderCompletion_table: state => state.orderCompletion.orderCompletion_table,
+  statusValue: state => state.station.statusValue,
+  tempDataObject: state => state.station.tempDataObject
+}
+export default getters

src/store/index.js

@@ -0,0 +1,29 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import app from './modules/app'
+import tagsView from './modules/tagsView'
+import user from './modules/user'
+import orderCompletion from './modules/orderCompletion'
+import permission from './modules/permission'
+import station from './modules/station'
+import operationGuide from './modules/operationGuide'
+import mqttServer from './modules/mqttServer'
+import getters from './getters'
+
+Vue.use(Vuex)
+
+const store = new Vuex.Store({
+  modules: {
+    app,
+    user,
+    tagsView,
+    permission,
+    station,
+    operationGuide,
+    mqttServer,
+    orderCompletion
+  },
+  getters
+})
+
+export default store

src/store/modules/app.js

@@ -0,0 +1,43 @@
+import Cookies from 'js-cookie'
+
+const app = {
+  state: {
+    sidebar: {
+      opened: !+Cookies.get('sidebarStatus'),
+      withoutAnimation: false
+    },
+    device: 'desktop'
+  },
+  mutations: {
+    TOGGLE_SIDEBAR: state => {
+      if (state.sidebar.opened) {
+        Cookies.set('sidebarStatus', 1)
+      } else {
+        Cookies.set('sidebarStatus', 0)
+      }
+      state.sidebar.opened = !state.sidebar.opened
+      state.sidebar.withoutAnimation = false
+    },
+    CLOSE_SIDEBAR: (state, withoutAnimation) => {
+      Cookies.set('sidebarStatus', 1)
+      state.sidebar.opened = false
+      state.sidebar.withoutAnimation = withoutAnimation
+    },
+    TOGGLE_DEVICE: (state, device) => {
+      state.device = device
+    }
+  },
+  actions: {
+    ToggleSideBar: ({ commit }) => {
+      commit('TOGGLE_SIDEBAR')
+    },
+    CloseSideBar({ commit }, { withoutAnimation }) {
+      commit('CLOSE_SIDEBAR', withoutAnimation)
+    },
+    ToggleDevice({ commit }, device) {
+      commit('TOGGLE_DEVICE', device)
+    }
+  }
+}
+
+export default app

src/store/modules/mesUser.js

@@ -0,0 +1,87 @@
+import { getToken, setToken, removeToken } from '@/utils/auth'
+import Cookies from 'js-cookie'
+import { Message } from 'element-ui'
+import axios from 'axios'
+import { getPayToken } from '@/utils/request'
+const user = {
+  state: {
+    token: getToken(),
+    name: Cookies.get('name'),
+    roles: [],
+    id: Cookies.get('id')
+  },
+
+  mutations: {
+    SET_TOKEN: (state, token) => {
+      state.token = token
+    },
+    SET_NAME: (state, name) => {
+      state.name = name
+    },
+    SET_ROLES: (state, roles) => {
+      state.roles = roles
+    },
+    SET_ID: (state, id) => {
+      state.id = id
+    }
+  },
+
+  actions: {
+    // 登录
+    Login({ commit }, userInfo) {
+      console.log(userInfo.username)
+      const username = userInfo.username.trim()
+      const password = userInfo.password.trim()
+      return new Promise((resolve, reject) => {
+        var url = getPayToken + '?userName=' + username + '&passWord=' + password
+        axios.get(url).then(response => {
+          console.log(response)
+          const data = response.data
+          if (data.IsSuccess === false) {
+            // const h = this.$createElement
+            // this.$message({
+            //   message: h('p', null, [
+            //     h('span', null, '错误代码: '),
+            //     h('i', { style: 'color: teal' }, `${{ data.ErrorCode }}`)
+            //   ])
+            // })
+            // Message.error(`错误代码`+`${{ data.ErrorCode }}`+`,`+`${{ data.ErrorDesc }}`)
+            var a = '错误' + response.data.ErrorCode + ',' + data.ErrorDesc
+            Message({
+              showClose: true,
+              message: a,
+              type: 'error'
+            })
+            this.$router.push({ path: '/login' })
+          }
+          if (data.token === '' || data.$id === '' || data === '') {
+            Message.error('账号或密码错误，请重新登录')
+            this.$router.push({ path: '/login' })
+          } else { // 只有一个角色
+            setToken(data.token)
+            Cookies.set('id', data.$id, { expires: 1 })
+            Cookies.set('name', username, { expires: 1 })
+            commit('SET_TOKEN', data.token)
+            commit('SET_NAME', username)
+            commit('SET_ID', data.$id)
+            resolve({ data, commit })
+          }
+        }).catch(error => {
+          reject(error)
+        })
+      })
+    },
+    //  登出
+    FedLogOut({ commit }) {
+      return new Promise(resolve => {
+        commit('SET_TOKEN', '')
+        Cookies.remove('name')
+        Cookies.remove('id')
+        removeToken()
+        resolve()
+      })
+    }
+  }
+}
+
+export default user

src/store/modules/mqttServer.js

@@ -0,0 +1,18 @@
+const mqttServer = {
+  state: {
+    serverIP: sessionStorage.getItem('serverIP') ? sessionStorage.getItem('serverIP') : '',
+    serverPort: sessionStorage.getItem('serverPort') ? sessionStorage.getItem('serverPort') : ''
+  },
+  mutations: {
+    set_serverIP(state, serverIP) {
+      sessionStorage.setItem('serverIP', serverIP)
+      state.serverIP = serverIP
+    },
+    set_serverPort(state, serverPort) {
+      sessionStorage.setItem('serverPort', serverPort)
+      state.serverPort = serverPort
+    }
+  }
+}
+
+export default mqttServer

src/store/modules/operationGuide.js

@@ -0,0 +1,44 @@
+const operationGuide = {
+  state: {
+    processList_table: sessionStorage.getItem('processList_table') ? JSON.parse(sessionStorage.getItem('processList_table')) : [],
+    materialList_table: sessionStorage.getItem('materialList_table') ? JSON.parse(sessionStorage.getItem('materialList_table')) : [],
+    pic: sessionStorage.getItem('pic') ? sessionStorage.getItem('pic') : '',
+    smile: sessionStorage.getItem('smile') ? sessionStorage.getItem('smile') : 0,
+    tighteningPosition: sessionStorage.getItem('tighteningPosition') ? JSON.parse(sessionStorage.getItem('tighteningPosition')) : [],
+    greenBoltInformation: sessionStorage.getItem('greenBoltInformation') ? JSON.parse(sessionStorage.getItem('greenBoltInformation')) : [],
+    partAssemblyInformation: {}
+  },
+  mutations: {
+    set_processList_table(state, processList_table) {
+      const data = Array.isArray(processList_table) ? processList_table : []
+      sessionStorage.setItem('processList_table', JSON.stringify(data))
+      state.processList_table = data
+    },
+    set_materialList_table(state, materialList_table) {
+      sessionStorage.setItem('materialList_table', '[]')
+      sessionStorage.setItem('materialList_table', JSON.stringify(materialList_table))
+      state.materialList_table = materialList_table
+    },
+    set_pic(state, pic) {
+      sessionStorage.setItem('pic', pic)
+      state.pic = pic
+    },
+    set_smile(state, smile) {
+      sessionStorage.setItem('smile', smile)
+      state.smile = smile
+    },
+    set_tighteningPosition(state, tighteningPosition) {
+      sessionStorage.setItem('tighteningPosition', JSON.stringify(tighteningPosition))
+      state.tighteningPosition = tighteningPosition
+    },
+    set_greenBoltInformation(state, greenBoltInformation) {
+      sessionStorage.setItem('greenBoltInformation', JSON.stringify(greenBoltInformation))
+      state.greenBoltInformation = greenBoltInformation
+    },
+    set_partAssemblyInformation(state, partAssemblyInformation) {
+      state.partAssemblyInformation = partAssemblyInformation
+    }
+  }
+}
+
+export default operationGuide

src/store/modules/orderCompletion.js

@@ -0,0 +1,13 @@
+const orderCompletion = {
+  state: {
+    orderCompletion_table: JSON.parse(sessionStorage.getItem('orderCompletion_table')) ? JSON.parse(sessionStorage.getItem('orderCompletion_table')) : []
+  },
+  mutations: {
+    set_orderCompletion_table(state, orderCompletion_table) {
+      sessionStorage.setItem('orderCompletion_table', JSON.stringify(orderCompletion_table))
+      state.orderCompletion_table = orderCompletion_table
+    }
+  }
+}
+
+export default orderCompletion

src/store/modules/permission.js

@@ -0,0 +1,23 @@
+import { constantRouterMap } from '@/router'
+const permission = {
+  state: {
+    routers: constantRouterMap,
+    addRouters: []
+  },
+  mutations: {
+    SET_ROUTERS: (state, routers) => {
+      state.addRouters = routers
+      state.routers = constantRouterMap.concat(routers)
+    }
+  },
+  actions: {
+    GenerateRoutes({ commit }, data) {
+      return new Promise(resolve => {
+        const accessedRouters = data
+        commit('SET_ROUTERS', accessedRouters)
+        resolve()
+      })
+    }
+  }
+}
+export default permission

src/store/modules/station.js

@@ -0,0 +1,80 @@
+const station = {
+  state: {
+    stationIp: sessionStorage.getItem('stationIp') ? sessionStorage.getItem('stationIp') : '',
+    stationNumber: sessionStorage.getItem('stationNumber') ? sessionStorage.getItem('stationNumber') : '',
+    stationName: sessionStorage.getItem('stationName') ? sessionStorage.getItem('stationName') : '',
+    classesID: sessionStorage.getItem('classesID') ? sessionStorage.getItem('classesID') : '',
+    MesWebCode: sessionStorage.getItem('MesWebCode') ? sessionStorage.getItem('MesWebCode') : '',
+    classes: sessionStorage.getItem('classes') ? sessionStorage.getItem('classes') : '',
+    engineValue: JSON.parse(sessionStorage.getItem('engineValue')) ? JSON.parse(sessionStorage.getItem('engineValue')) : {},
+    stationStatus: 0,
+    plcStatus: 0,
+    stationUserCount: sessionStorage.getItem('stationUserCount') ? sessionStorage.getItem('stationUserCount') : '',
+    stationUserName: sessionStorage.getItem('stationUserName') ? sessionStorage.getItem('stationUserName') : '',
+    stationNameUsed: sessionStorage.getItem('stationNameUsed') ? sessionStorage.getItem('stationNameUsed') : '',
+    statusValue: JSON.parse(sessionStorage.getItem('statusValue')) ? JSON.parse(sessionStorage.getItem('statusValue')) : {},
+    tempDataObject: JSON.parse(sessionStorage.getItem('tempDataObject')) ? JSON.parse(sessionStorage.getItem('tempDataObject')) : {
+      checkWorkOverIsShow: 0 // 检查完成按钮
+    } // 临时数据对象 用于存储各种PLC的临时信号
+  },
+  mutations: {
+    // 设置临时变量时需要传入key value格式对象进行赋值
+    // isCut 参数用于判断是否需要自动切换 可以给自动转换一次
+    set_tempDataObject(state, itemObj) {
+      // 先设为''做一次差异，防止监视属性检测不到，而后在改为设置的值
+      state.tempDataObject[itemObj.key] = ''
+      sessionStorage.setItem('tempDataObject', JSON.stringify(state.tempDataObject))
+      setTimeout(() => {
+        state.tempDataObject[itemObj.key] = itemObj.value
+        sessionStorage.setItem('tempDataObject', JSON.stringify(state.tempDataObject))
+      }, 0)
+    },
+    set_statusValue(state, statusValue) {
+      sessionStorage.setItem('statusValue', JSON.stringify(statusValue))
+      state.statusValue = statusValue
+    },
+    set_stationIp(state, stationIp) {
+      sessionStorage.setItem('stationIp', stationIp)
+      state.stationIp = stationIp
+    },
+    set_stationNumber(state, stationNumber) {
+      sessionStorage.setItem('stationNumber', stationNumber)
+      state.stationNumber = stationNumber
+    },
+    set_stationName(state, stationName) {
+      sessionStorage.setItem('stationName', stationName)
+      state.stationName = stationName
+    },
+    set_classesID(state, classesID) {
+      sessionStorage.setItem('classesID', classesID)
+      state.classesID = classesID
+    },
+    set_stationUserName(state, stationUserName) {
+      sessionStorage.setItem('stationUserName', stationUserName)
+      state.stationUserName = stationUserName
+    },
+    set_stationUserCount(state, stationUserCount) {
+      sessionStorage.setItem('stationUserCount', stationUserCount)
+      state.stationUserCount = stationUserCount
+    },
+    set_classes(state, classes) {
+      sessionStorage.setItem('classes', classes)
+      state.classes = classes
+    },
+    set_MesWebCode(state, MesWebCode) {
+      sessionStorage.setItem('MesWebCode', MesWebCode)
+      state.MesWebCode = MesWebCode
+    },
+    set_engineValue(state, engineValue) {
+      sessionStorage.setItem('engineValue', JSON.stringify(engineValue))
+      state.engineValue = engineValue
+    },
+    set_stationStatus(state, stationStatus) {
+      state.stationStatus = stationStatus
+    },
+    set_plcStatus(state, plcStatus) {
+      state.plcStatus = plcStatus
+    }
+  }
+}
+export default station

src/store/modules/tagsView.js

@@ -0,0 +1,78 @@
+const tagsView = {
+  state: {
+    visitedViews: [],
+    cachedViews: []
+  },
+  mutations: {
+    ADD_VISITED_VIEWS: (state, view) => {
+      if (state.visitedViews.some(v => v.path === view.path)) return
+      state.visitedViews.push({
+        name: view.name,
+        path: view.path,
+        title: view.meta.title || 'no-name'
+      })
+      if (!view.meta.noCache) {
+        state.cachedViews.push(view.name)
+      }
+    },
+    DEL_VISITED_VIEWS: (state, view) => {
+      for (const [i, v] of state.visitedViews.entries()) {
+        if (v.path === view.path) {
+          state.visitedViews.splice(i, 1)
+          break
+        }
+      }
+      for (const i of state.cachedViews) {
+        if (i === view.name) {
+          const index = state.cachedViews.indexOf(i)
+          state.cachedViews.splice(index, 1)
+          break
+        }
+      }
+    },
+    DEL_OTHERS_VIEWS: (state, view) => {
+      for (const [i, v] of state.visitedViews.entries()) {
+        if (v.path === view.path) {
+          state.visitedViews = state.visitedViews.slice(i, i + 1)
+          break
+        }
+      }
+      for (const i of state.cachedViews) {
+        if (i === view.name) {
+          const index = state.cachedViews.indexOf(i)
+          state.cachedViews = state.cachedViews.slice(index, i + 1)
+          break
+        }
+      }
+    },
+    DEL_ALL_VIEWS: (state) => {
+      state.visitedViews = []
+      state.cachedViews = []
+    }
+  },
+  actions: {
+    addVisitedViews({ commit }, view) {
+      commit('ADD_VISITED_VIEWS', view)
+    },
+    delVisitedViews({ commit, state }, view) {
+      return new Promise((resolve) => {
+        commit('DEL_VISITED_VIEWS', view)
+        resolve([...state.visitedViews])
+      })
+    },
+    delOthersViews({ commit, state }, view) {
+      return new Promise((resolve) => {
+        commit('DEL_OTHERS_VIEWS', view)
+        resolve([...state.visitedViews])
+      })
+    },
+    delAllViews({ commit, state }) {
+      return new Promise((resolve) => {
+        commit('DEL_ALL_VIEWS')
+        resolve([...state.visitedViews])
+      })
+    }
+  }
+}
+
+export default tagsView

src/store/modules/user.js

@@ -0,0 +1,100 @@
+import { login, getInfo } from '@/api/login'
+import { getToken, setToken, removeToken } from '@/utils/auth'
+import Cookies from 'js-cookie'
+import { Message } from 'element-ui'
+const user = {
+  state: {
+    token: getToken(),
+    name: Cookies.get('name'),
+    roles: [],
+    id: Cookies.get('id'),
+    account: ''
+  },
+
+  mutations: {
+    SET_TOKEN: (state, token) => {
+      state.token = token
+    },
+    SET_NAME: (state, name) => {
+      state.name = name
+    },
+    SET_ROLES: (state, roles) => {
+      state.roles = roles
+    },
+    SET_ID: (state, id) => {
+      state.id = id
+    },
+    SET_account: (state, account) => {
+      state.account = account
+    }
+  },
+
+  actions: {
+    // 登录
+    Login({ commit }, userInfo) {
+      const username = userInfo.username.trim()
+      return new Promise((resolve, reject) => {
+        login(username, userInfo.password).then(response => {
+          let data = response.data
+          if (data.length === 0 || data.result === '0') {
+            Message.error('账号或密码错误，请重新登录')
+            this.$router.push({ path: '/login' })
+          } else if (data.length === 1) { // 只有一个角色
+            setToken(data[0].角色代码)
+            Cookies.set('id', data[0].人员编号, { expires: 1 })
+            Cookies.set('name', data[0].姓名, { expires: 1 })
+            // commit('SET_TOKEN', data[0].角色代码)
+            commit('SET_NAME', data[0].姓名)
+            commit('SET_ID', data[0].人员编号)
+            commit('SET_account', data[0].考勤编号, { expires: 1 })
+            resolve({ data, commit })
+          } else { // 多个角色
+            var res = []
+            var resRole = []
+            data.forEach(item => {
+              resRole.includes(item.Roles_Function) ? '' : (res.push(item), resRole.push(item.Roles_Function))
+            })
+            if (res.length === 1) {
+              setToken(data[0].角色代码)
+              Cookies.set('id', data[0].人员编号, { expires: 1 })
+              Cookies.set('name', data[0].姓名, { expires: 1 })
+              // commit('SET_TOKEN', data[0].角色代码)
+              commit('SET_NAME', data[0].姓名)
+              commit('SET_ID', data[0].人员编号)
+              commit('SET_account', data[0].考勤编号, { expires: 1 })
+              resolve({ data, commit })
+            }
+            data = res
+            resolve({ data, commit })
+          }
+        }).catch(error => {
+          reject(error)
+        })
+      })
+    },
+    // 获取用户信息
+    GetInfo({ commit, state }) {
+      return new Promise((resolve, reject) => {
+        getInfo(state.token).then(response => {
+          commit('SET_ROLES', 'admin')
+          resolve(response)
+        }).catch(error => {
+          reject(error)
+        })
+      })
+    },
+    //  登出
+    FedLogOut({ commit }) {
+      return new Promise(resolve => {
+        commit('SET_TOKEN', '')
+        Cookies.remove('name')
+        Cookies.remove('id')
+        Cookies.remove('account')
+        removeToken()
+        resolve()
+      })
+    }
+  }
+}
+
+export default user

src/styles/element-ui.scss

@@ -0,0 +1,29 @@
+ //to reset element-ui default css
+.el-upload {
+  input[type="file"] {
+    display: none !important;
+  }
+}
+
+.el-upload__input {
+  display: none;
+}
+
+//暂时性解决diolag 问题 https://github.com/ElemeFE/element/issues/2461
+.el-dialog {
+  transform: none;
+  left: 0;
+  position: relative;
+  margin: 0 auto;
+}
+
+//element ui upload
+.upload-container {
+  .el-upload {
+    width: 100%;
+    .el-upload-dragger {
+      width: 100%;
+      height: 200px;
+    }
+  }
+}

src/styles/index.scss

@@ -0,0 +1,140 @@
+@import './variables.scss';
+@import './mixin.scss';
+@import './transition.scss';
+@import './element-ui.scss';
+@import './sidebar.scss';
+@import '../assets/font/Misans.css';
+
+HTML{
+  overflow: auto;
+}
+body {
+  height: 100%;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  font-family: MiSans Demibold, serif;
+}
+
+label {
+  font-weight: 700;
+}
+
+html {
+  height: 100%;
+  box-sizing: border-box;
+}
+
+#app{
+  height: 100%;
+  .sidebar-container{
+    background-color: #2e296a;
+  }
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+a,
+a:focus,
+a:hover {
+  cursor: pointer;
+  color: inherit;
+  outline: none;
+  text-decoration: none;
+}
+
+div:focus{
+  outline: none;
+ }
+
+a:focus,
+a:active {
+  outline: none;
+}
+
+a,
+a:focus,
+a:hover {
+  cursor: pointer;
+  color: inherit;
+  text-decoration: none;
+}
+
+.clearfix {
+  &:after {
+    visibility: hidden;
+    display: block;
+    font-size: 0;
+    content: " ";
+    clear: both;
+    height: 0;
+  }
+}
+
+//main-container全局样式
+.app-main{
+  min-height: 100%;
+  min-width: 1220px;
+  max-height: 1800px;
+}
+
+.app-container {
+  padding: 20px;
+  //background-color: #ebf1ee;
+}
+
+.navbar{
+  background-color: #2D3C67!important;
+}
+.submenu-title-noDropdown{
+  background-color: black!important;
+  color: #00893D!important;
+}
+.el-menu-item.is-active{
+  color:#2456E6!important;
+}
+el-form-item__content{
+  background-color: #00893D!important;
+}
+.el-menu-item:hover{
+  background-color: #00893D !important;
+  color: #fff!important;
+}
+.el-menu-item, .el-submenu__title{
+  line-height: 42px;
+  height: 42px;
+  background-color: 	#F5F5F5!important;
+  color: 	#000000!important;
+}
+.el-scrollbar{
+  height: 100%;
+}
+
+.el-submenu__title{
+  color: #000000!important;
+  background-color: #F5F5F5!important;
+}
+.el-button--success {
+  color: #fff;
+  background-color: #67c23a ;
+  border-color: #67c23a ;
+}
+.el-button--success.is-plain {
+  color: #67c23a!important;
+  background: #FAFAFA!important;
+  border-color: #67c23a!important;
+}
+.el-button--success:hover{
+  color: #FAFAFA!important;
+  background-color: #67c23a!important;
+  border-color: #67c23a!important;
+}
+.el-button--success:focus{
+  color: #FAFAFA!important;
+  background-color: #67c23a!important;
+  border-color: #67c23a!important;
+}

src/styles/mixin.scss

@@ -0,0 +1,27 @@
+@mixin clearfix {
+  &:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+}
+
+@mixin scrollBar {
+  &::-webkit-scrollbar-track-piece {
+    background: #d3dce6;
+  }
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: #99a9bf;
+    border-radius: 20px;
+  }
+}
+
+@mixin relative {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+

src/styles/sidebar.scss

@@ -0,0 +1,123 @@
+#app {
+  // 主体区域
+  .main-container {
+    min-height: 100%;
+    transition: margin-left .28s;
+    margin-left: 200px;
+    position: relative;
+  }
+  // 侧边栏
+  .sidebar-container {
+    transition: width 0.28s;
+    width: 200px !important;
+    height: 100%;
+    position: fixed;
+    font-size: 0px;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1001;
+    overflow: hidden;
+    //reset element-ui css
+    .horizontal-collapse-transition {
+      transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
+    }
+    .el-scrollbar__bar.is-vertical{
+      right: 0px;
+    }
+    .scrollbar-wrapper {
+      overflow-x: hidden!important;
+      .el-scrollbar__view {
+        height: 100%;
+      }
+    }
+    .is-horizontal {
+      display: none;
+    }
+    a {
+      display: inline-block;
+      width: 100%;
+      overflow: hidden;
+    }
+    .svg-icon {
+      margin-right: 16px;
+    }
+    .el-menu {
+      border: none;
+      height: 100%;
+      background: 	#F5F5F5!important;
+      width: 100% !important;
+    }
+  }
+  .hideSidebar {
+    .sidebar-container {
+      width: 36px !important;
+    }
+    .main-container {
+      margin-left: 36px;
+    }
+    .submenu-title-noDropdown {
+      padding-left: 10px !important;
+      position: relative;
+      .el-tooltip {
+        padding: 0 10px !important;
+      }
+    }
+    .el-submenu {
+      overflow: hidden;
+      &>.el-submenu__title {
+        padding-left: 10px !important;
+        .el-submenu__icon-arrow {
+          display: none;
+        }
+      }
+    }
+    .el-menu--collapse {
+      .el-submenu {
+        &>.el-submenu__title {
+          &>span {
+            height: 0;
+            width: 0;
+            overflow: hidden;
+            visibility: hidden;
+            display: inline-block;
+          }
+        }
+      }
+    }
+  }
+  .sidebar-container .nest-menu .el-submenu>.el-submenu__title,
+  .sidebar-container .el-submenu .el-menu-item {
+    min-width: 200px !important;
+    background-color: $subMenuBg !important;
+    &:hover {
+      background-color: $menuHover !important;
+    }
+  }
+  .el-menu--collapse .el-menu .el-submenu {
+    min-width: 180px !important;
+  }
+
+  //适配移动端
+  .mobile {
+    .main-container {
+      margin-left: 0px;
+    }
+    .sidebar-container {
+      transition: transform .28s;
+      width: 180px !important;
+    }
+    &.hideSidebar {
+      .sidebar-container {
+        transition-duration: 0.3s;
+        transform: translate3d(-180px, 0, 0);
+      }
+    }
+  }
+  .withoutAnimation {
+    .main-container,
+    .sidebar-container {
+      transition: none;
+    }
+  }
+}

src/styles/transition.scss

@@ -0,0 +1,46 @@
+//globl transition css
+
+/*fade*/
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.28s;
+}
+
+.fade-enter,
+.fade-leave-active {
+  opacity: 0;
+}
+
+/*fade-transform*/
+.fade-transform-leave-active,
+.fade-transform-enter-active {
+  transition: all .5s;
+}
+.fade-transform-enter {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+.fade-transform-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+/*fade*/
+.breadcrumb-enter-active,
+.breadcrumb-leave-active {
+  transition: all .5s;
+}
+
+.breadcrumb-enter,
+.breadcrumb-leave-active {
+  opacity: 0;
+  transform: translateX(20px);
+}
+
+.breadcrumb-move {
+  transition: all .5s;
+}
+
+.breadcrumb-leave-active {
+  position: absolute;
+}

src/styles/variables.scss

@@ -0,0 +1,4 @@
+//sidebar
+$menuBg:#2D3C67;
+$subMenuBg:#F8F8FF;
+$menuHover:#2D3C67;

src/utils/auth.js

@@ -0,0 +1,15 @@
+import Cookies from 'js-cookie'
+
+const TokenKey = 'Admin-Token'
+
+export function getToken() {
+  return Cookies.get(TokenKey)
+}
+
+export function setToken(token) {
+  return Cookies.set(TokenKey, token)
+}
+
+export function removeToken() {
+  return Cookies.remove(TokenKey)
+}

src/utils/curd.js

@@ -0,0 +1,407 @@
+import { type } from './tool' // type判断传入值的类型，比typeof更详细
+// import axios from 'axios'
+// import { url } from '../main'
+import { ExcelDownLoad } from '@/utils/request'
+import service from '@/utils/request'
+export default {
+  install(Vue) {
+    Vue.prototype.exportExcel_NPOI = function(param, blob) {
+      download(`${ExcelDownLoad}?param=${param}`, blob)
+    }
+    // 用于生成传通讯服务器参数。
+    // 传入参数
+    // 1）type：11查询；12增删改，必须
+    // 2）name：存储过程名，必须
+    // 3）data：存储过程参数名和对应值，例如：
+    //       this.param[0] = ['设备类型编码', '3', 'string', '0']
+    //       this.param[1] = ['output', '3', 'int', '1']，必须
+    // 数组里四个分别对应：存储过程参数名（必须）；存储过程参数值（必须）；参数类型（若是output必须）；参数是否为output（0否1是）
+    // 4）pageSize，pageCurrent：分页使用，可选
+
+    Vue.prototype.ExecDatabase = function(num) {
+      return service({
+        url: '',
+        method: 'post',
+        data: num
+      })
+    }
+    Vue.prototype.ExecAgvApi = function(url, data) {
+      return new Promise((resolve, reject) => {
+        service({
+          url: window.g.agvApi,
+          method: 'post',
+          data: { url: url, data: data }
+        }).then(response => {
+          if (response.data.Result) {
+            resolve(JSON.parse(response.data.Data))
+          } else {
+            console.error('AGV接口调用失败:' + response.data.ErrMsg)
+            resolve({ Result: false, ErrMsg: response.data.ErrMsg })
+          }
+        }).catch(error => {
+          console.error('AGV接口调用失败:' + error.message)
+          resolve({ Result: false, ErrMsg: error.message })
+        })
+      })
+    }
+    Vue.prototype.CreateData = function(type, name, data, pageSize, pageList) {
+      var param_Str = ''
+      var param_array = []
+      if (type === '7') {
+        data.map(v => {
+          pageSize.map(h => {
+            const val = h.toString()
+            if (!v[val]) {
+              this.$set(v, val, '')
+            }
+          })
+        })
+        param_Str = data
+      } else {
+        if (data !== undefined) {
+          for (let i = 0; i < data.length; i++) {
+            param_array.push({
+              name: data[i][0],
+              value: data[i][1],
+              type: data[i][2],
+              output: data[i][3]
+            })
+          }
+          param_Str = JSON.stringify(param_array)
+        }
+      }
+      var obj = []
+      obj[0] = {}
+      obj[0].type = type
+      obj[0].name = name
+      obj[0].param = param_Str
+      obj[0].pageSize = pageSize
+      obj[0].pageList = pageList
+      obj[0].pageList = pageList
+      obj[0].UserID = this.id
+      obj[0].ModularID = this.$router.currentRoute.path
+      var numn = JSON.stringify(obj[0])
+      return numn
+    }
+    Vue.prototype.CreateData1 = function(type, name, data, pageSize, pageList) {
+      var param_Str = ''
+      var param_array = []
+      if (data !== undefined) {
+        for (let i = 0; i < data.length; i++) {
+          param_array.push({
+            name: data[i][0],
+            value: data[i][1],
+            type: data[i][2],
+            output: data[i][3]
+          })
+        }
+        param_Str = JSON.stringify(param_array)
+      }
+      var obj = []
+      obj[0] = {}
+      obj[0].type = type
+      obj[0].name = name
+      obj[0].param = param_Str
+      obj[0].pageSize = pageSize
+      obj[0].pageList = pageList
+      var numn = JSON.stringify(obj[0])
+      return numn
+    }
+    // 生成
+    Vue.prototype.CreatePost = function(data) {
+      var param_Str = ''
+      var param_array = []
+      if (data !== undefined) {
+        for (let i = 0; i < data.length; i++) {
+          param_array.push({
+            name: data[i][0],
+            value: data[i][1]
+          })
+        }
+        param_Str = JSON.stringify(param_array)
+      }
+      var obj = []
+      obj[0] = {}
+      obj[0].param = param_Str
+      var numn = JSON.stringify(obj[0])
+      return numn
+    }
+    // 用于打开增加框，方法能重置表单，并使表单内容回到初始化状态。
+    // 传入参数
+    // 1）表单名称，字符串形式如'form'，必须
+    // 2) 打开表单后需要做什么，可以传数组[this.dialogvisiale = false， fetchData],也可以传回调函数function() { this.dialogvisiale = false } 可选
+    Vue.prototype.addForm = function(form, callback) {
+      if (type(form) === 'string') {
+        if (this.$refs[form]) { // 判断是否需要重置表单，如果需要重置表单
+          this.$refs[form].resetFields()
+        }
+        if (type(callback) === 'array') { // 判断传入是否为数组，如果是遍历数组，遇到函数将函数体变成函数执行，其余正常执行
+          if (callback && callback.length !== 0) {
+            for (let i = 0, len = callback.length; i < len; i++) {
+              typeof callback[i] === 'function' ? callback[i]() : callback[i]
+            }
+          }
+        } else if (type(callback) === 'function') { // 判断传入是否为回调函数
+          callback.call(this) // 回调函数执行，需将this改为该组件
+        }
+        this[form] = Object.assign(this.$data[form], this.$options.data()[form]) // 将表单中的数据变为初始状态。其中,this.$options.data是所有初始化的数据，this.$data是目前的数据
+      } else {
+        console.error('传入参数错误')
+      }
+    }
+    // 用于打开编辑框，方法能自动传入行的数据到对应的表单中,并将表单中所有纯数字转成int。前提是行的名称需跟表单名称一样。
+    // 传入参数
+    // 1) 编辑这一行的row
+    // 2）表单名称，字符串形式如'form'
+    // 3) 打开编辑需要做什么，同样是[] 和 function
+    Vue.prototype.editForm = function(row, form, callback) {
+      if (type(row) === 'object' && type(form) === 'string') {
+        if (this.$refs[form]) { // 判断是否需要重置表单
+          this.$refs[form].resetFields()
+        }
+        const isNum = /^[0-9]+$/ // 正则表达式，是否全都为纯数字
+        for (const prop in this[form]) { // 遍历表单，当表单和row中属性名一样时，表单row中的属性赋值给form
+          isNum.lastIndex = 0 // 正则每一次匹配后的索引归0，否则循环会造成问题
+          isNum.exec(row[prop]) ? this[form][prop] = parseInt(row[prop]) : this[form][prop] = row[prop] // 通过正则匹配数字，当匹配成功后，将字符串转为int。当然你也不用担心空转成NaN,因为''匹配通不过！
+        }
+        if (type(callback) === 'array') { // 这部分处理与打开表单相同
+          if (callback && callback.length !== 0) {
+            for (let i = 0, len = callback.length; i < len; i++) {
+              typeof callback[i] === 'function' ? callback[i]() : callback[i]
+            }
+          }
+        } else if (type(callback) === 'function') {
+          callback.call(this)
+        }
+      } else {
+        console.error('传入参数错误')
+      }
+    }
+    // 用于获取下拉框中的数据
+    // 传入参数
+    // 1）请求数据函数引用如getXXX，必须
+    // 2）数组的实行名称['XXXX名称', 'XXXX代码']，必须
+    // 3）需要用哪个数组接收这个结果，字符串形式。如在组件也需要用this.select,传入值就为'select'，必须
+    // 4) 请求函数传入的参数，可选
+    Vue.prototype.getSelect = function(requestData, select, carrier, param) {
+      if (type(requestData) === 'function' && type(select) === 'array' && type(carrier) === 'string') {
+        if (type(param) === 'array') {
+          requestData(...param).then(response => { // 这个方法没什么难度，不注释了
+            this[carrier] = []
+            for (let i = 0, len = response.data.length; i < len; i++) {
+              if (select.length === 2) {
+                this[carrier].push({
+                  label: response.data[i][select[0]],
+                  value: response.data[i][select[1]]
+                })
+              } else {
+                this[carrier].push({
+                  value: response.data[i][select[0]]
+                })
+              }
+            }
+          })
+        } else {
+          requestData(param).then(response => { // 这个方法没什么难度，不注释了
+            this[carrier] = []
+            for (let i = 0, len = response.data.length; i < len; i++) {
+              if (select.length === 2) {
+                this[carrier].push({
+                  label: response.data[i][select[0]],
+                  value: response.data[i][select[1]]
+                })
+              } else {
+                this[carrier].push({
+                  value: response.data[i][select[0]]
+                })
+              }
+            }
+          })
+        }
+      } else {
+        console.error('参数传递错误')
+      }
+    }
+    // 普通获取数据
+    // 传入参数
+    // 1) 请求数据函数引用如getXXX，必须
+    // 2) 需要用哪个数组接收这个结果，字符串形式。如在组件也需要用this.select,传入值就为'select'，必须
+    // 3) 请求函数传入的参数，可选
+    Vue.prototype.getData = function(requestData, carrier, param) {
+      if (type(requestData) === 'function' && type(carrier) === 'string') {
+        if (type(param) === 'undefined') {
+          requestData(param).then(response => {
+            const data = response.data
+            this[carrier] = data
+          })
+        } else {
+          let Param = []
+          if (type(param) !== 'array') {
+            Param.push(param)
+          } else {
+            Param = param
+          }
+          requestData(...Param).then(response => {
+            const data = response.data
+            this[carrier] = data
+          })
+        }
+      } else {
+        console.error('传入参数错误')
+      }
+    }
+    // 获取表格数据,将表格中的年月日时分秒，转换成年月日
+    // 传入参数
+    // 1）请求数据函数引用如getXXX，必须
+    // 2）请求的参数，可选
+    // 3）接受值，数组，一般是['table','total','loading']顺序不能变
+    Vue.prototype.getTable = function(requestData, param, e) {
+      requestData(...param).then(response => {
+        const data = response.data.rows
+        this[e[0]] = []
+        this[e[1]] = 0
+        if (data && data.length > 0) {
+          const isTime = /^\d{4}([-\/.])\d{1,2}\1\d{1,2}/ // 判断是否是时间的正则表达式
+          for (let i = 0, len = data.length; i < len; i++) { // 循环得到每一条数据
+            for (const prop in data[i]) { // 循环每一条的每一项
+              isTime.lastIndex = 0 // 正则每一次指针复位
+              if (isTime.test(data[i][prop])) { // 判断是否是时间，如果是切割
+                data[i][prop] = data[i][prop].split(' ')[0]
+              }
+            }
+          }
+          this[e[0]] = data
+          this[e[1]] = parseInt(response.data.total)
+        } else {
+          this[e[0]] = []
+          // console.log('暂无数据')
+        }
+      }).then(() => {
+        this[e[2]] = false
+      })
+    }
+    // 添加表格数据
+    // 传入参数
+    // 1) 请求数据函数引用如getXXX，必须
+    // 2) 请求的参数，可选
+    // 3) 验证的表单名称，必须
+    // 4) 回调函数，必须
+    Vue.prototype.addTable = function(requestData, param, form, callback) {
+      if (type(callback) === 'function' && type(requestData) === 'function' && type(form) === 'string') {
+        console.log(this.$refs[form])
+        this.$refs[form].validate((valid) => {
+          console.log(valid)
+          if (valid) {
+            requestData(...param).then(response => {
+              if (response.data[0].result === '1') {
+                this.$message.success('增加成功')
+                callback.call(this)
+              } else { this.$message.error('增加失败') }
+            })
+          } else {
+            console.error('error submit!!')
+            return false
+          }
+        })
+      } else {
+        console.error('参数传递错误')
+      }
+    }
+    // 编辑表格数据
+    // 传入参数
+    // 1) 请求数据函数引用如getXXX，必须
+    // 2) 请求的参数，可选
+    // 3) 验证的表单名称，必须
+    // 4) 回调函数，必须
+    Vue.prototype.editTable = function(requestData, param, form, callback) {
+      if (type(callback) === 'function' && type(requestData) === 'function' && type(form) === 'string') {
+        this.$refs[form].validate((valid) => {
+          if (valid) {
+            requestData(...param).then(response => {
+              if (response.data[0].result === '1') {
+                this.$message.success('修改成功')
+                callback.call(this) // 回调函数修正this指向组件本身
+              } else { this.$message.error('修改失败') }
+            })
+          } else {
+            console.error('error submit!!')
+            return false
+          }
+        })
+      } else {
+        console.error('参数传递错误')
+      }
+    }
+    // 删除表格数据
+    // 传入参数
+    // 1) 请求数据函数引用如getXXX，必须
+    // 2) id传入删除条件，必须
+    // 3) 回调函数，必须
+    Vue.prototype.deleteRow = function(requestData, id, callback) {
+      if (type(callback) === 'function' && type(requestData) === 'function') {
+        if (this.tableData && this.tableData.length === 1 && this.pageCurrent > 1) { // 判断删除的是否是最后一页最后一行，如果是且不是第一页，页数减一
+          this.pageCurrent--
+        }
+        this.$confirm('此操作将永久删除该行, 是否继续?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          requestData(id).then(response => {
+            if (response.data[0].result === '1') {
+              this.$message.success('删除成功')
+              callback.call(this) // 回调函数修正this指向组件本身
+            } else { this.$message.error('数据占用') }
+          })
+        }).catch(() => {
+          this.$message({
+            type: 'info',
+            message: '已取消删除'
+          })
+        })
+      } else {
+        console.error('参数传递错误')
+      }
+    }
+  }
+}
+function download(url, imgblob) {
+  getBlob(url, function(blob, filename) {
+    saveAs(blob, filename)
+  }, imgblob)
+}
+
+function getBlob(url, cb, imgblob) {
+  var xhr = new XMLHttpRequest()
+  var fromData = new FormData()
+  fromData.append('base64', imgblob)
+  xhr.open('POST', url, true)
+  xhr.responseType = 'blob'
+  xhr.onload = function() {
+    if (xhr.status === 200) {
+      const name = xhr.getResponseHeader('content-disposition').split('=')[1]
+      var filename = decodeURIComponent(name)
+      cb(xhr.response, filename)
+    }
+  }
+  // xhr.send()
+  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
+  xhr.send(fromData)
+}
+
+function saveAs(blob, filename) {
+  if (window.navigator.msSaveOrOpenBlob) {
+    navigator.msSaveBlob(blob, filename)
+  } else {
+    var link = document.createElement('a')
+    var body = document.querySelector('body')
+    link.href = window.URL.createObjectURL(blob)
+    link.download = filename
+    // fix Firefox
+    link.style.display = 'none'
+    body.appendChild(link)
+    link.click()
+    body.removeChild(link)
+    window.URL.revokeObjectURL(link.href)
+  }
+}

src/utils/mqtt.js

@@ -0,0 +1,104 @@
+import { v4 as uuid } from 'uuid'
+import mqtt from 'mqtt'
+export { Mqtt }
+class Mqtt {
+  constructor(config) {
+    this.connection = {
+      host: config.host,
+      port: config.port,
+      endpoint: config.endpoint || '/mqtt',
+      clean: config.clean || true,
+      connectTimeout: config.connectTimeout || 4000,
+      reconnectPeriod: config.reconnectPeriod || 4000,
+      clientId: config.clientId || uuid(),
+      username: config.username || '',
+      password: config.password || ''
+    }
+    this.client = {
+      connected: false
+    }
+  }
+  // 创建连接
+  createConnection() {
+    // 连接字符串, 通过协议指定使用的连接方式
+    // ws 未加密 WebSocket 连接
+    // wss 加密 WebSocket 连接
+    // mqtt 未加密 TCP 连接
+    // mqtts 加密 TCP 连接
+    // wxs 微信小程序连接
+    // alis 支付宝小程序连接
+    const { host, port, endpoint, ...options } = this.connection
+    const connectUrl = `ws://${host}:${port}${endpoint}`
+    try {
+      this.client = mqtt.connect(connectUrl, options)
+    } catch (error) {
+      // 连接错位、
+      this.connectError(error)
+    }
+  }
+  connectError(error) {
+    console.log('mqtt.connect error', error)
+  }
+  // 订阅主题
+  doSubscribe(subscription) {
+    const { topic, qos } = subscription
+    let subscribeSuccess = false
+    this.client.subscribe(topic, { qos }, (error, res) => {
+      if (error) {
+        subscribeSuccess = false
+        console.log('Subscribe to topics error', error)
+      } else {
+        subscribeSuccess = true
+        console.log('Subscribe to topics res', res)
+      }
+    })
+    return subscribeSuccess
+  }
+  // 取消订阅
+  doUnSubscribe(subscription) {
+    const { topic } = subscription
+    let unSubscribeSuccess = false
+    this.client.unsubscribe(topic, error => {
+      if (error) {
+        unSubscribeSuccess = false
+        console.log('Unsubscribe error', error)
+      } else {
+        unSubscribeSuccess = true
+      }
+    })
+    return unSubscribeSuccess
+  }
+  // 发送消息
+  doPublish(publish) {
+    const { topic, qos, payload } = publish
+    let doPublishSuccess = false
+    this.client.publish(topic, payload, qos, error => {
+      if (error) {
+        doPublishSuccess = false
+        console.log('Publish error', error)
+      } else {
+        doPublishSuccess = true
+      }
+    })
+    return doPublishSuccess
+  }
+  // 断开连接
+  destroyConnection() {
+    let destroyConnectionSuccess = false
+    if (this.client.connected) {
+      try {
+        this.client.end()
+        this.client = {
+          connected: false
+        }
+        destroyConnectionSuccess = true
+        console.log('Successfully disconnected!')
+      } catch (error) {
+        destroyConnectionSuccess = false
+        console.log('Disconnect failed', error.toString())
+      }
+    }
+    return destroyConnectionSuccess
+  }
+}
+

src/utils/request.js

@@ -0,0 +1,12 @@
+import axios from 'axios'
+
+export const getPayToken = 'http://124.220.15.242:8100/submit/MESgetToken.ashx' // token地址
+const service = axios.create({
+  baseURL: window.g.baseURL,
+  timeout: 15000 // 请求超时时间
+})
+
+export default service
+window.service = service
+axios.defaults.headers.post['Content-Type'] = 'application/json'
+export const ExcelDownLoad = 'http://124.220.15.242:8100/submit/MESCommonBase.ashx' // 导出excel

src/utils/tool.js

@@ -0,0 +1,126 @@
+// 数组去重
+export function arrayUnique(arr) {
+  arr.filter((element, index, arr) => {
+    return arr.indexOf(element) === index
+  })
+}
+
+// 数组去重，数组中值是对象
+export function arrayUnique2(arr, name) {
+  const hash = {}
+  return arr.reduce(function(item, next) {
+    hash[next[name]] ? '' : hash[next[name]] = true && item.push(next)
+    return item
+  }, [])
+}
+
+// 时间转时间戳
+export function timeToStamp(time) {
+  const date = new Date(time)
+  return date.getTime()
+}
+
+// 数组的深度拷贝
+export function arrDeepCopy(arr) {
+  const newArr = []
+  for (const prop in arr) newArr[prop] = typeof arr[prop] === 'object' ? arrDeepCopy(arr[prop]) : arr[prop]
+  return newArr
+}
+
+// 对象的深度拷贝
+export function objDeepCopy(obj) {
+  const newObj = {}
+  for (const prop in obj) newObj[prop] = typeof obj[prop] === 'object' ? objDeepCopy(obj[prop]) : obj[prop]
+  return newObj
+}
+
+function zeroFill(i) {
+  if (i >= 0 && i <= 9) {
+    return '0' + i
+  } else {
+    return i
+  }
+}
+// 获取当前时间
+export function getNowTime() {
+  const date = new Date()
+  const month = zeroFill(date.getMonth() + 1)
+  const day = zeroFill(date.getDate())
+  const hour = zeroFill(date.getHours())
+  const minute = zeroFill(date.getMinutes())
+  const second = zeroFill(date.getSeconds())
+  const time = date.getFullYear() + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second
+  return time
+}
+export function getNowTime2() {
+  const date = new Date()
+  const month = zeroFill2(date.getMonth())
+  const day = zeroFill(date.getDate())
+  const time = date.getFullYear() + '-' + month + '-' + day
+  return time
+}
+function zeroFill2(i) {
+  if (i >= 0 && i <= 9) {
+    if (i === 0) {
+      return '01'
+    } else {
+      return '0' + i
+    }
+  } else {
+    return i
+  }
+}
+
+// 判断类型
+export function type(target) {
+  const ret = typeof (target)
+  const template = {
+    '[object Array]': 'array',
+    '[object Object]': 'object',
+    '[object String]': 'string - object',
+    '[object Number]': 'Number - object',
+    '[object Boolean]': 'Boolean - object'
+  }
+  if (target === null) {
+    return 'null'
+  }
+  if (ret === 'object') {
+    const str = Object.prototype.toString.call(target)
+    return template[str]
+  } else {
+    return ret
+  }
+}
+
+export function SectionToChinese(section) {
+  const chnNumChar = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九']
+  const chnUnitChar = ['', '十', '百', '千']
+  let strIns = ''
+  let chnStr = ''
+  let unitPos = 0
+  let zero = true
+  while (section > 0) {
+    const v = section % 10
+    if (v === 0) {
+      if (!zero) {
+        zero = true
+        chnStr = chnNumChar[v] + chnStr
+      }
+    } else {
+      zero = false
+      strIns = chnNumChar[v]
+      strIns += chnUnitChar[unitPos]
+      chnStr = strIns + chnStr
+    }
+    unitPos++
+    section = Math.floor(section / 10)
+  }
+  return chnStr
+}
+
+export function sleep(time) {
+  return new Promise(resolve => {
+    setTimeout(resolve, time)
+  })
+}
+

src/utils/validate.js

@@ -0,0 +1,32 @@
+/**
+ * Created by jiachenpan on 16/11/18.
+ */
+
+export function isvalidUsername(str) {
+  const user = /^[0-9]{4,5}$/
+  return user.test(str)
+}
+
+/* 合法uri*/
+export function validateURL(textval) {
+  const urlregex = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
+  return urlregex.test(textval)
+}
+
+/* 小写字母*/
+export function validateLowerCase(str) {
+  const reg = /^[a-z]+$/
+  return reg.test(str)
+}
+
+/* 大写字母*/
+export function validateUpperCase(str) {
+  const reg = /^[A-Z]+$/
+  return reg.test(str)
+}
+
+/* 大小写字母*/
+export function validatAlphabets(str) {
+  const reg = /^[A-Za-z]+$/
+  return reg.test(str)
+}

src/vendor/Blob.js

@@ -0,0 +1,179 @@
+/* eslint-disable */
+/* Blob.js
+ * A Blob implementation.
+ * 2014-05-27
+ *
+ * By Eli Grey, http://eligrey.com
+ * By Devin Samarin, https://github.com/eboyjr
+ * License: X11/MIT
+ *   See LICENSE.md
+ */
+
+/*global self, unescape */
+/*jslint bitwise: true, regexp: true, confusion: true, es5: true, vars: true, white: true,
+ plusplus: true */
+
+/*! @source http://purl.eligrey.com/github/Blob.js/blob/master/Blob.js */
+
+(function (view) {
+  "use strict";
+
+  view.URL = view.URL || view.webkitURL;
+
+  if (view.Blob && view.URL) {
+    try {
+      new Blob;
+      return;
+    } catch (e) {}
+  }
+
+  // Internally we use a BlobBuilder implementation to base Blob off of
+  // in order to support older browsers that only have BlobBuilder
+  var BlobBuilder = view.BlobBuilder || view.WebKitBlobBuilder || view.MozBlobBuilder || (function(view) {
+    var
+      get_class = function(object) {
+        return Object.prototype.toString.call(object).match(/^\[object\s(.*)\]$/)[1];
+      }
+      , FakeBlobBuilder = function BlobBuilder() {
+        this.data = [];
+      }
+      , FakeBlob = function Blob(data, type, encoding) {
+        this.data = data;
+        this.size = data.length;
+        this.type = type;
+        this.encoding = encoding;
+      }
+      , FBB_proto = FakeBlobBuilder.prototype
+      , FB_proto = FakeBlob.prototype
+      , FileReaderSync = view.FileReaderSync
+      , FileException = function(type) {
+        this.code = this[this.name = type];
+      }
+      , file_ex_codes = (
+        "NOT_FOUND_ERR SECURITY_ERR ABORT_ERR NOT_READABLE_ERR ENCODING_ERR "
+        + "NO_MODIFICATION_ALLOWED_ERR INVALID_STATE_ERR SYNTAX_ERR"
+      ).split(" ")
+      , file_ex_code = file_ex_codes.length
+      , real_URL = view.URL || view.webkitURL || view
+      , real_create_object_URL = real_URL.createObjectURL
+      , real_revoke_object_URL = real_URL.revokeObjectURL
+      , URL = real_URL
+      , btoa = view.btoa
+      , atob = view.atob
+
+      , ArrayBuffer = view.ArrayBuffer
+      , Uint8Array = view.Uint8Array
+    ;
+    FakeBlob.fake = FB_proto.fake = true;
+    while (file_ex_code--) {
+      FileException.prototype[file_ex_codes[file_ex_code]] = file_ex_code + 1;
+    }
+    if (!real_URL.createObjectURL) {
+      URL = view.URL = {};
+    }
+    URL.createObjectURL = function(blob) {
+      var
+        type = blob.type
+        , data_URI_header
+      ;
+      if (type === null) {
+        type = "application/octet-stream";
+      }
+      if (blob instanceof FakeBlob) {
+        data_URI_header = "data:" + type;
+        if (blob.encoding === "base64") {
+          return data_URI_header + ";base64," + blob.data;
+        } else if (blob.encoding === "URI") {
+          return data_URI_header + "," + decodeURIComponent(blob.data);
+        } if (btoa) {
+          return data_URI_header + ";base64," + btoa(blob.data);
+        } else {
+          return data_URI_header + "," + encodeURIComponent(blob.data);
+        }
+      } else if (real_create_object_URL) {
+        return real_create_object_URL.call(real_URL, blob);
+      }
+    };
+    URL.revokeObjectURL = function(object_URL) {
+      if (object_URL.substring(0, 5) !== "data:" && real_revoke_object_URL) {
+        real_revoke_object_URL.call(real_URL, object_URL);
+      }
+    };
+    FBB_proto.append = function(data/*, endings*/) {
+      var bb = this.data;
+      // decode data to a binary string
+      if (Uint8Array && (data instanceof ArrayBuffer || data instanceof Uint8Array)) {
+        var
+          str = ""
+          , buf = new Uint8Array(data)
+          , i = 0
+          , buf_len = buf.length
+        ;
+        for (; i < buf_len; i++) {
+          str += String.fromCharCode(buf[i]);
+        }
+        bb.push(str);
+      } else if (get_class(data) === "Blob" || get_class(data) === "File") {
+        if (FileReaderSync) {
+          var fr = new FileReaderSync;
+          bb.push(fr.readAsBinaryString(data));
+        } else {
+          // async FileReader won't work as BlobBuilder is sync
+          throw new FileException("NOT_READABLE_ERR");
+        }
+      } else if (data instanceof FakeBlob) {
+        if (data.encoding === "base64" && atob) {
+          bb.push(atob(data.data));
+        } else if (data.encoding === "URI") {
+          bb.push(decodeURIComponent(data.data));
+        } else if (data.encoding === "raw") {
+          bb.push(data.data);
+        }
+      } else {
+        if (typeof data !== "string") {
+          data += ""; // convert unsupported types to strings
+        }
+        // decode UTF-16 to binary string
+        bb.push(unescape(encodeURIComponent(data)));
+      }
+    };
+    FBB_proto.getBlob = function(type) {
+      if (!arguments.length) {
+        type = null;
+      }
+      return new FakeBlob(this.data.join(""), type, "raw");
+    };
+    FBB_proto.toString = function() {
+      return "[object BlobBuilder]";
+    };
+    FB_proto.slice = function(start, end, type) {
+      var args = arguments.length;
+      if (args < 3) {
+        type = null;
+      }
+      return new FakeBlob(
+        this.data.slice(start, args > 1 ? end : this.data.length)
+        , type
+        , this.encoding
+      );
+    };
+    FB_proto.toString = function() {
+      return "[object Blob]";
+    };
+    FB_proto.close = function() {
+      this.size = this.data.length = 0;
+    };
+    return FakeBlobBuilder;
+  }(view));
+
+  view.Blob = function Blob(blobParts, options) {
+    var type = options ? (options.type || "") : "";
+    var builder = new BlobBuilder();
+    if (blobParts) {
+      for (var i = 0, len = blobParts.length; i < len; i++) {
+        builder.append(blobParts[i]);
+      }
+    }
+    return builder.getBlob(type);
+  };
+}(typeof self !== "undefined" && self || typeof window !== "undefined" && window || this.content || this));

src/vendor/Export2Excel.js

@@ -0,0 +1,224 @@
+/* eslint-disable */
+require('script-loader!file-saver');
+// import XLSX from 'xlsx'
+import XLSX from 'xlsx-style'
+function generateArray(table) {
+  var out = [];
+  var rows = table.querySelectorAll('tr');
+  var ranges = [];
+  for (var R = 0; R < rows.length; ++R) {
+    var outRow = [];
+    var row = rows[R];
+    var columns = row.querySelectorAll('td');
+    for (var C = 0; C < columns.length; ++C) {
+      var cell = columns[C];
+      var colspan = cell.getAttribute('colspan');
+      var rowspan = cell.getAttribute('rowspan');
+      var cellValue = cell.innerText;
+      if (cellValue !== "" && cellValue == +cellValue) cellValue = +cellValue;
+
+      //Skip ranges
+      ranges.forEach(function (range) {
+        if (R >= range.s.r && R <= range.e.r && outRow.length >= range.s.c && outRow.length <= range.e.c) {
+          for (var i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null);
+        }
+      });
+
+      //Handle Row Span
+      if (rowspan || colspan) {
+        rowspan = rowspan || 1;
+        colspan = colspan || 1;
+        ranges.push({
+          s: {
+            r: R,
+            c: outRow.length
+          },
+          e: {
+            r: R + rowspan - 1,
+            c: outRow.length + colspan - 1
+          }
+        });
+      };
+
+      //Handle Value
+      outRow.push(cellValue !== "" ? cellValue : null);
+
+      //Handle Colspan
+      if (colspan)
+        for (var k = 0; k < colspan - 1; ++k) outRow.push(null);
+    }
+    out.push(outRow);
+  }
+  return [out, ranges];
+};
+
+function datenum(v, date1904) {
+  if (date1904) v += 1462;
+  var epoch = Date.parse(v);
+  return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);
+}
+
+function sheet_from_array_of_arrays(data, opts) {
+  var ws = {};
+  var range = {
+    s: {
+      c: 10000000,
+      r: 10000000
+    },
+    e: {
+      c: 0,
+      r: 0
+    }
+  };
+  for (var R = 0; R != data.length; ++R) {
+    for (var C = 0; C != data[R].length; ++C) {
+      if (range.s.r > R) range.s.r = R;
+      if (range.s.c > C) range.s.c = C;
+      if (range.e.r < R) range.e.r = R;
+      if (range.e.c < C) range.e.c = C;
+      var cell = {
+        v: data[R][C]
+      };
+      if (cell.v == null) continue;
+      var cell_ref = XLSX.utils.encode_cell({
+        c: C,
+        r: R
+      });
+
+      if (typeof cell.v === 'number') cell.t = 'n';
+      else if (typeof cell.v === 'boolean') cell.t = 'b';
+      else if (cell.v instanceof Date) {
+        cell.t = 'n';
+        cell.z = XLSX.SSF._table[14];
+        cell.v = datenum(cell.v);
+      } else cell.t = 's';
+
+      ws[cell_ref] = cell;
+    }
+  }
+  if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range);
+  return ws;
+}
+
+function Workbook() {
+  if (!(this instanceof Workbook)) return new Workbook();
+  this.SheetNames = [];
+  this.Sheets = {};
+}
+
+function s2ab(s) {
+  var buf = new ArrayBuffer(s.length);
+  var view = new Uint8Array(buf);
+  for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
+  return buf;
+}
+
+export function export_table_to_excel(id) {
+  var theTable = document.getElementById(id);
+  var oo = generateArray(theTable);
+  var ranges = oo[1];
+
+  /* original data */
+  var data = oo[0];
+  var ws_name = "SheetJS";
+
+  var wb = new Workbook(),
+    ws = sheet_from_array_of_arrays(data);
+
+  /* add ranges to worksheet */
+  // ws['!cols'] = ['apple', 'banan'];
+  ws['!merges'] = ranges;
+
+  /* add worksheet to workbook */
+  wb.SheetNames.push(ws_name);
+  wb.Sheets[ws_name] = ws;
+
+  var wbout = XLSX.write(wb, {
+    bookType: 'xlsx',
+    bookSST: false,
+    type: 'binary'
+  });
+
+  saveAs(new Blob([s2ab(wbout)], {
+    type: "application/octet-stream"
+  }), "test.xlsx")
+}
+
+export function export_json_to_excel({
+  headerGroup,
+  dataGroup,
+  sheetGroup,
+  filename,
+  autoWidth = true,
+  bookType=  'xlsx'
+} = {}) {
+  var wb = new Workbook()
+  for (let i = 0; i < dataGroup.length; i++) {
+    /* original data */
+    let data = dataGroup[i]
+    filename = filename || 'excel-list'
+    data = [...data]
+    data.unshift(headerGroup[i]);
+    var ws_name = sheetGroup[i];
+    var ws = sheet_from_array_of_arrays(data);
+
+    if (autoWidth) {
+      /*设置worksheet每列的最大宽度*/
+      const colWidth = data.map(row => row.map(val => {
+        /*先判断是否为null/undefined*/
+        if (val == null) {
+          return {
+            'wch': 10
+          };
+        }
+        /*再判断是否为中文*/
+        else if (val.toString().charCodeAt(0) > 255) {
+          return {
+            'wch': val.toString().length * 2
+          };
+        } else {
+          return {
+            'wch': val.toString().length
+          };
+        }
+      }))
+      /*以第一行为初始值*/
+      let result = colWidth[0];
+      for (let i = 1; i < colWidth.length; i++) {
+        for (let j = 0; j < colWidth[i].length; j++) {
+          if (result[j]['wch'] < colWidth[i][j]['wch']) {
+            result[j]['wch'] = colWidth[i][j]['wch'];
+          }
+        }
+      }
+      ws['!cols'] = result;
+    }
+    let R = 0;
+    data.map(item => {
+      let C = 0;
+      item.map(itm => {
+        var cell_ref = XLSX.utils.encode_cell({c:C,r:R});
+        var cell = {v: itm }
+        cell.s= {
+          alignment: {
+            horizontal: "center"
+          }
+        }
+        ws[cell_ref] = cell;
+        C++;
+      })
+      R++;
+    })
+    /* add worksheet to workbook */
+    wb.SheetNames.push(ws_name);
+    wb.Sheets[ws_name] = ws;
+  }
+  var wbout = XLSX.write(wb, {
+    bookType: bookType,
+    bookSST: false,
+    type: 'binary'
+  });
+  saveAs(new Blob([s2ab(wbout)], {
+    type: "application/octet-stream"
+  }), `${filename}.${bookType}`);
+}

src/vendor/Export2Excelcjn.js

@@ -0,0 +1,206 @@
+/* eslint-disable */
+require('script-loader!file-saver');
+import XLSX from 'xlsx'
+
+function generateArray(table) {
+  var out = [];
+  var rows = table.querySelectorAll('tr');
+  var ranges = [];
+  for (var R = 0; R < rows.length; ++R) {
+    var outRow = [];
+    var row = rows[R];
+    var columns = row.querySelectorAll('td');
+    for (var C = 0; C < columns.length; ++C) {
+      var cell = columns[C];
+      var colspan = cell.getAttribute('colspan');
+      var rowspan = cell.getAttribute('rowspan');
+      var cellValue = cell.innerText;
+      if (cellValue !== "" && cellValue == +cellValue) cellValue = +cellValue;
+
+      //Skip ranges
+      ranges.forEach(function (range) {
+        if (R >= range.s.r && R <= range.e.r && outRow.length >= range.s.c && outRow.length <= range.e.c) {
+          for (var i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null);
+        }
+      });
+
+      //Handle Row Span
+      if (rowspan || colspan) {
+        rowspan = rowspan || 1;
+        colspan = colspan || 1;
+        ranges.push({
+          s: {
+            r: R,
+            c: outRow.length
+          },
+          e: {
+            r: R + rowspan - 1,
+            c: outRow.length + colspan - 1
+          }
+        });
+      };
+
+      //Handle Value
+      outRow.push(cellValue !== "" ? cellValue : null);
+
+      //Handle Colspan
+      if (colspan)
+        for (var k = 0; k < colspan - 1; ++k) outRow.push(null);
+    }
+    out.push(outRow);
+  }
+  return [out, ranges];
+};
+
+function datenum(v, date1904) {
+  if (date1904) v += 1462;
+  var epoch = Date.parse(v);
+  return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);
+}
+
+function sheet_from_array_of_arrays(data, opts) {
+  var ws = {};
+  var range = {
+    s: {
+      c: 10000000,
+      r: 10000000
+    },
+    e: {
+      c: 0,
+      r: 0
+    }
+  };
+  for (var R = 0; R != data.length; ++R) {
+    for (var C = 0; C != data[R].length; ++C) {
+      if (range.s.r > R) range.s.r = R;
+      if (range.s.c > C) range.s.c = C;
+      if (range.e.r < R) range.e.r = R;
+      if (range.e.c < C) range.e.c = C;
+      var cell = {
+        v: data[R][C]
+      };
+      if (cell.v == null) continue;
+      var cell_ref = XLSX.utils.encode_cell({
+        c: C,
+        r: R
+      });
+
+      if (typeof cell.v === 'number') cell.t = 'n';
+      else if (typeof cell.v === 'boolean') cell.t = 'b';
+      else if (cell.v instanceof Date) {
+        cell.t = 'n';
+        cell.z = XLSX.SSF._table[14];
+        cell.v = datenum(cell.v);
+      } else cell.t = 's';
+
+      ws[cell_ref] = cell;
+    }
+  }
+  if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range);
+  return ws;
+}
+
+function Workbook() {
+  if (!(this instanceof Workbook)) return new Workbook();
+  this.SheetNames = [];
+  this.Sheets = {};
+}
+
+function s2ab(s) {
+  var buf = new ArrayBuffer(s.length);
+  var view = new Uint8Array(buf);
+  for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
+  return buf;
+}
+
+export function export_table_to_excel(id) {
+  var theTable = document.getElementById(id);
+  var oo = generateArray(theTable);
+  var ranges = oo[1];
+
+  /* original data */
+  var data = oo[0];
+  var ws_name = "SheetJS";
+
+  var wb = new Workbook(),
+    ws = sheet_from_array_of_arrays(data);
+
+  /* add ranges to worksheet */
+  // ws['!cols'] = ['apple', 'banan'];
+  ws['!merges'] = ranges;
+
+  /* add worksheet to workbook */
+  wb.SheetNames.push(ws_name);
+  wb.Sheets[ws_name] = ws;
+
+  var wbout = XLSX.write(wb, {
+    bookType: 'xlsx',
+    bookSST: false,
+    type: 'binary'
+  });
+
+  saveAs(new Blob([s2ab(wbout)], {
+    type: "application/octet-stream"
+  }), "test.xlsx")
+}
+
+export function export_json_to_excel({
+  header,
+  data,
+  filename,
+  autoWidth = true,
+  bookType=  'xlsx'
+} = {}) {
+  /* original data */
+  filename = filename || 'excel-list'
+  data = [...data]
+  data.unshift(header);
+  var ws_name = filename || 'excel-list';
+  var wb = new Workbook(),
+    ws = sheet_from_array_of_arrays(data);
+
+  if (autoWidth) {
+    /*设置worksheet每列的最大宽度*/
+    const colWidth = data.map(row => row.map(val => {
+      /*先判断是否为null/undefined*/
+      if (val == null) {
+        return {
+          'wch': 10
+        };
+      }
+      /*再判断是否为中文*/
+      else if (val.toString().charCodeAt(0) > 255) {
+        return {
+          'wch': val.toString().length * 2
+        };
+      } else {
+        return {
+          'wch': val.toString().length
+        };
+      }
+    }))
+    /*以第一行为初始值*/
+    let result = colWidth[0];
+    for (let i = 1; i < colWidth.length; i++) {
+      for (let j = 0; j < colWidth[i].length; j++) {
+        if (result[j]['wch'] < colWidth[i][j]['wch']) {
+          result[j]['wch'] = colWidth[i][j]['wch'];
+        }
+      }
+    }
+    ws['!cols'] = result;
+  }
+
+  /* add worksheet to workbook */
+  wb.SheetNames.push(ws_name);
+  wb.Sheets[ws_name] = ws;
+
+  var wbout = XLSX.write(wb, {
+    bookType: bookType,
+    bookSST: false,
+    type: 'binary'
+  });
+  saveAs(new Blob([s2ab(wbout)], {
+    type: "application/octet-stream"
+  }), `${filename}.${bookType}`);
+}

src/vendor/exportExcel.js

@@ -0,0 +1,19 @@
+// 导出Excel方法（表格id，不加扩展名的文件名，sheet名）
+export function exportExcelMethod(tableId, fileName, sheetName) {
+  tableToExcel(tableId, fileName, sheetName)
+}
+const tableToExcel = (function() {
+  const uri = 'data:application/vnd.ms-excel;base64,'
+  // 设置导出表格的单元格默认高度/宽度/边框样式/字体颜色/背景颜色/居中，网页显示表格宽度建议1240，tr/td视情况而定
+  const template = `<html xmlns:x="urn:schemas-microsoft-com:office:excel"><head><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><meta charset="UTF-8"><style type="text/css">table td {border: 1px solid #000000;width:100px;text-align: center;color: #000000;}</style></head><body><table>{table}</table></body></html>`
+  const base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) }
+  const format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p] }) }
+  return function(table, filename, sheetname) {
+    if (!table.nodeType) table = document.getElementById(table)
+    const ctx = { worksheet: sheetname || 'Worksheet', table: table.innerHTML }
+    const aTag = document.createElement('a')
+    aTag.href = uri + base64(format(template, ctx))
+    aTag.download = filename
+    aTag.click()
+  }
+})()

src/vendor/htmlToPdf.js

@@ -0,0 +1,35 @@
+import html2Canvas from 'html2canvas'
+import JsPDF from 'jspdf'
+export default {
+  install(Vue, options) {
+    Vue.prototype.getPdf = function(id, title) {
+      html2Canvas(document.querySelector(`#${id}`), {
+        allowTaint: true
+      }).then(function(canvas) {
+        const contentWidth = canvas.width
+        const contentHeight = canvas.height
+        const pageHeight = contentWidth / 592.28 * 841.89
+        let leftHeight = contentHeight
+        let position = 0
+        const imgWidth = 595.28
+        const imgHeight = 592.28 / contentWidth * contentHeight
+        const pageData = canvas.toDataURL('image/jpeg', 1.0)
+        const PDF = new JsPDF('', 'pt', 'a4')
+        if (leftHeight < pageHeight) {
+          PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
+        } else {
+          while (leftHeight > 0) {
+            PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
+            leftHeight -= pageHeight
+            position -= 841.89
+            if (leftHeight > 0) {
+              PDF.addPage()
+            }
+          }
+        }
+        PDF.save(title + '.pdf')
+      }
+      )
+    }
+  }
+}

src/vendor/int2Chinese.js

@@ -0,0 +1,85 @@
+export function convertCurrency(money) {
+  // 汉字的数字
+  const cnNums = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖']
+  // 基本单位
+  const cnIntRadice = ['', '拾', '佰', '仟']
+  // 对应整数部分扩展单位
+  const cnIntUnits = ['', '万', '亿', '兆']
+  // 对应小数部分单位
+  const cnDecUnits = ['角', '分', '毫', '厘']
+  // 整数金额时后面跟的字符
+  const cnInteger = '整'
+  // 整型完以后的单位
+  const cnIntLast = '元'
+  // 最大处理的数字
+  const maxNum = 999999999999999.9999
+  // 金额整数部分
+  let integerNum
+  // 金额小数部分
+  let decimalNum
+  // 输出的中文金额字符串
+  let chineseStr = ''
+  // 分离金额后用的数组，预定义
+  let parts
+  if (money === '') { return '' }
+  money = parseFloat(money)
+  if (money >= maxNum) {
+    // 超出最大处理数字
+    return ''
+  }
+  if (money === 0) {
+    chineseStr = cnNums[0] + cnIntLast + cnInteger
+    return chineseStr
+  }
+  // 转换为字符串
+  money = money.toString()
+  if (money.indexOf('.') === -1) {
+    integerNum = money
+    decimalNum = ''
+  } else {
+    parts = money.split('.')
+    integerNum = parts[0]
+    decimalNum = parts[1].substr(0, 4)
+  }
+  // 获取整型部分转换
+  if (parseInt(integerNum, 10) > 0) {
+    let zeroCount = 0
+    const IntLen = integerNum.length
+    for (let i = 0; i < IntLen; i++) {
+      const n = integerNum.substr(i, 1)
+      const p = IntLen - i - 1
+      const q = p / 4
+      const m = p % 4
+      if (n === '0') {
+        zeroCount++
+      } else {
+        if (zeroCount > 0) {
+          chineseStr += cnNums[0]
+        }
+        // 归零
+        zeroCount = 0
+        chineseStr += cnNums[parseInt(n)] + cnIntRadice[m]
+      }
+      if (m === 0 && zeroCount < 4) {
+        chineseStr += cnIntUnits[q]
+      }
+    }
+    chineseStr += cnIntLast
+  }
+  // 小数部分
+  if (decimalNum !== '') {
+    const decLen = decimalNum.length
+    for (let i = 0; i < decLen; i++) {
+      const n = decimalNum.substr(i, 1)
+      if (n !== '0') {
+        chineseStr += cnNums[Number(n)] + cnDecUnits[i]
+      }
+    }
+  }
+  if (chineseStr === '') {
+    chineseStr += cnNums[0] + cnIntLast + cnInteger
+  } else if (decimalNum === '') {
+    chineseStr += cnInteger
+  }
+  return chineseStr
+}

src/vendor/print.js

@@ -0,0 +1,117 @@
+/* eslint-disable */
+  let Print = function(dom, options) {
+    if (!(this instanceof Print)) return new Print(dom, options)
+
+    this.options = this.extend({
+      'noPrint': '.no-print'
+    }, options)
+
+    if ((typeof dom) === 'string') {
+      this.dom = document.querySelector(dom)
+    } else {
+      this.dom = dom
+    }
+
+    this.init()
+  }
+  Print.prototype = {
+    init: function() {
+      let content = this.getStyle() + this.getHtml()
+      this.writeIframe(content)
+    },
+    extend: function(obj, obj2) {
+      for (let k in obj2) {
+        obj[k] = obj2[k]
+      }
+      return obj
+    },
+
+    getStyle: function() {
+      let str = '',
+        styles = document.querySelectorAll('style,link')
+      for (let i = 0; i < styles.length; i++) {
+        str += styles[i].outerHTML
+      }
+      str += '<style>' + (this.options.noPrint ? this.options.noPrint : '.no-print') + '{display:none}</style>'
+
+      return str
+    },
+
+    getHtml: function() {
+      let inputs = document.querySelectorAll('input')
+      let textareas = document.querySelectorAll('textarea')
+      let selects = document.querySelectorAll('select')
+
+      for (let k in inputs) {
+        if (inputs[k].type === 'checkbox' || inputs[k].type === 'radio') {
+          if (inputs[k].checked === true) {
+            inputs[k].setAttribute('checked', 'checked')
+          } else {
+            inputs[k].removeAttribute('checked')
+          }
+        } else if (inputs[k].type === 'text') {
+          inputs[k].setAttribute('value', inputs[k].value)
+        }
+      }
+
+      for (let k2 in textareas) {
+        if (textareas[k2].type === 'textarea') {
+          textareas[k2].innerHTML = textareas[k2].value
+        }
+      }
+
+      for (let k3 in selects) {
+        if (selects[k3].type === 'select-one') {
+          let child = selects[k3].children
+          for (let i in child) {
+            if (child[i].tagName === 'OPTION') {
+              if (child[i].selected === true) {
+                child[i].setAttribute('selected', 'selected')
+              } else {
+                child[i].removeAttribute('selected')
+              }
+            }
+          }
+        }
+      }
+
+      return this.dom.outerHTML
+    },
+
+    writeIframe: function(content) {
+      let w, doc, iframe = document.createElement('iframe'),
+        f = document.body.appendChild(iframe)
+      iframe.id = 'myIframe'
+      iframe.style = 'position:absolutewidth:0height:0top:-10pxleft:-10px'
+
+      w = f.contentWindow || f.contentDocument
+      doc = f.contentDocument || f.contentWindow.document
+      doc.open()
+      doc.write(content)
+      doc.close()
+      this.toPrint(w)
+
+      setTimeout(function() {
+        document.body.removeChild(iframe)
+      }, 100)
+    },
+
+    toPrint: function(frameWindow) {
+      try {
+        setTimeout(function() {
+          frameWindow.focus()
+          try {
+            if (!frameWindow.document.execCommand('print', false, null)) {
+              frameWindow.print()
+            }
+          } catch (e) {
+            frameWindow.print()
+          }
+          frameWindow.close()
+        }, 10)
+      } catch (err) {
+        console.log('err', err)
+      }
+    }
+  }
+  export default Print

src/views/Andon/index.vue

@@ -0,0 +1,562 @@
+<template>
+  <div style="width: 100%; height: 100%; padding: 10px;background-color: #d7dee6;">
+    <el-row style="width: 98%; height: 32%; border: 1px solid black; margin: 5px">
+      <el-col style="width: 8%; height: 90%;">
+        <div class="div1">
+          <div style="margin-left: 25px; margin-top: 10%">
+            <span style="color: white; font-size: 42px">物料安灯</span>
+          </div>
+        </div>
+      </el-col>
+      <el-col style="width: 65%; height: 90%">
+        <div style="width: 99%; height: 99%; border: 1px solid black;margin-top: 10px; margin-left: 10px; overflow-y: auto">
+          <div v-for="(item) in cities1" :key="item.编号">
+            <div v-if="item.颜色代码 === '1'" :id="item.编号" class="div2" @click="select1(item)">
+              {{ item.编号描述2 }}
+            </div>
+            <div v-if="item.颜色代码 === '0'" :id="item.编号" class="div3" @click="select1(item)">
+              {{ item.编号描述2 }}
+            </div>
+          </div>
+        </div>
+      </el-col>
+      <el-col style="width: 25%">
+        <div>
+          <img src="../../assets/image/call.png" style="margin-top: 40px;margin-left: 40px; width: 118px;height: 100px;" @click="imgClick1()">
+          <img src="../../assets/image/reset.png" style="margin-left: 100px;width: 118px;height: 100px;" @click="imgClick2()">
+        </div>
+        <span style="font-size: 50px; margin-left: 50px">呼叫</span>
+        <span style="font-size: 50px; margin-left: 100px">复位</span>
+      </el-col>
+    </el-row>
+    <el-row style="width: 98%; height: 32%; border: 1px solid black; margin: 5px">
+      <el-col style="width: 8%; height: 90%;">
+        <div class="div1">
+          <div style="margin-left: 25px; margin-top: 10%">
+            <span style="color: white; font-size: 42px">质量安灯</span>
+          </div>
+        </div>
+      </el-col>
+      <el-col style="width: 65%; height: 90%">
+        <div style="width: 99%; height: 99%; border: 1px solid black;margin-top: 10px; margin-left: 10px; overflow-y: auto">
+          <div v-for="(item) in cities" :key="item.编号">
+            <div v-if="item.颜色代码 === '1'" :id="item.编号" class="div2" @click="select2(item)">
+              {{ item.编号描述2 }}
+            </div>
+            <div v-if="item.颜色代码 === '0'" :id="item.编号" class="div3" @click="select2(item)">
+              {{ item.编号描述2 }}
+            </div>
+          </div>
+        </div>
+      </el-col>
+      <el-col style="width: 25%">
+        <div>
+          <img src="../../assets/image/call.png" style="margin-top: 40px;margin-left: 40px; width: 118px;height: 100px;" @click="imgClick3()">
+          <img src="../../assets/image/reset.png" style="margin-left: 100px; width: 118px;height: 100px;" @click="imgClick4()">
+          <span>{{ count }}</span>
+        </div>
+        <span style="font-size: 50px; margin-left: 50px">呼叫</span>
+        <span style="font-size: 50px; margin-left: 100px">复位</span>
+      </el-col>
+    </el-row>
+    <el-row style="width: 98%; height: 32%; border: 1px solid black; margin: 5px">
+      <el-col style="width: 8%; height: 90%;">
+        <div class="div1">
+          <div style="margin-left: 25px; margin-top: 10%">
+            <span style="color: white; font-size: 42px">故障安灯</span>
+          </div>
+        </div>
+      </el-col>
+      <el-col style="width: 65%; height: 90%">
+        <div style="width: 99%; height: 99%; border: 1px solid black;margin-top: 10px; margin-left: 10px; overflow-y: auto">
+          <div v-for="(item) in citie" :key="item.编号">
+            <div v-if="item.颜色代码 === '1'" :id="item.编号" class="div2" @click="select3(item)">
+              {{ item.编号描述2 }}
+            </div>
+            <div v-if="item.颜色代码 === '0'" :id="item.编号" class="div3" @click="select3(item)">
+              {{ item.编号描述2 }}
+            </div>
+          </div>
+        </div>
+      </el-col>
+      <el-col style="width: 25%;">
+        <div>
+          <img src="../../assets/image/call.png" style="margin-top: 40px;margin-left: 40px; width: 118px;height: 100px;" @click="imgClick5()">
+          <img src="../../assets/image/reset.png" style="margin-left: 100px; width: 118px;height: 100px;" @click="imgClick6()">
+        </div>
+        <span style="font-size: 50px; margin-left: 50px">呼叫</span>
+        <span style="font-size: 50px; margin-left: 100px">复位</span>
+      </el-col>
+    </el-row>
+    <el-dialog :title="title" :append-to-body="true" :visible.sync="dialogFormVisible1" width="700px">
+      <div style="text-align: center">
+        <el-form ref="form1" label-position="left" class="demo-ruleForm" style="width: 600px; height: 150px; margin: auto">
+          <el-form-item>
+            <el-button v-for="(item) in andonType1" :id="item.安东明细代码" :key="item.安东明细代码" style="width: 150px; height: 90px;" type="info" @click="change3(item.安东类型代码,item.安东明细代码, checkboxGroup1, item.安东明细描述)">
+              {{ item.安东明细描述 }}
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </el-dialog>
+    <el-dialog :title="title" :append-to-body="true" :visible.sync="dialogFormVisible2" width="700px">
+      <div style="text-align: center">
+        <el-form ref="form1" label-position="left" class="demo-ruleForm" style="width: 600px; height: 150px; margin: auto">
+          <el-form-item>
+            <el-button v-for="(item) in andonType2" :id="item.安东明细代码" :key="item.安东明细代码" style="width: 150px; height: 90px;" type="info" @click="change3(item.安东类型代码,item.安东明细代码, checkboxGroup2, item.安东明细描述)">
+              {{ item.安东明细描述 }}
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </el-dialog>
+    <el-dialog :title="title" :append-to-body="true" :visible.sync="dialogFormVisible3" width="700px">
+      <div style="text-align: center">
+        <el-form ref="form1" label-position="left" class="demo-ruleForm" style="width: 600px; height: 150px; margin: auto">
+          <el-form-item>
+            <el-button v-for="(item) in andonType3" :id="item.安东明细代码" :key="item.安东明细代码" style="width: 150px; height: 90px;" type="info" @click="change3(item.安东类型代码,item.安东明细代码, checkboxGroup3, item.安东明细描述)">
+              {{ item.安东明细描述 }}
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      andonType1: [],
+      andonType2: [],
+      andonType3: [],
+      checkboxGroup1: [],
+      checkboxGroup2: [],
+      checkboxGroup3: [],
+      citie: [],
+      cities: [],
+      cities1: [],
+      dialogFormVisible1: false,
+      dialogFormVisible2: false,
+      dialogFormVisible3: false,
+      title: '',
+      index: '',
+      count: '',
+      publication: {
+        topic: '',
+        qos: 0,
+        payload: ''
+      },
+      statediv1: false
+    }
+  },
+  created() {
+    this.getAndonarr1()
+    this.getAndonarr2()
+    this.getAndonarr3()
+    this.AndonType()
+  },
+  methods: {
+    select3(indexa) {
+      if (indexa.states === '0') {
+        if (!this.checkboxGroup3.find(item => item.编号 === indexa.编号)) {
+          this.checkboxGroup3.push({
+            编号: indexa.编号,
+            编号描述: indexa.编号描述,
+            编号描述2: indexa.编号描述2,
+            颜色代码: indexa.颜色代码,
+            states: indexa.states
+          })
+          indexa.states = '1'
+        }
+        indexa.color = document.getElementById(indexa.编号).style.backgroundColor
+        document.getElementById(indexa.编号).style.backgroundColor = 'cornflowerblue'
+      } else if (indexa.states === '1') {
+        indexa.states = '0'
+        document.getElementById(indexa.编号).style.backgroundColor = indexa.color
+        var count = this.checkboxGroup3.findIndex(item => item.编号 === indexa.编号)
+        this.checkboxGroup3.splice(count, 1)
+      }
+    },
+    getAndonarr3() {
+      this.citie = []
+      const param = []
+      param[0] = ['安东类型代码', '3']
+      param[1] = ['工位号', this.$store.state.station.stationName]
+      const Data = this.CreateData('11', 'ANDON_类型_编号_查询', param)
+      this.ExecDatabase(Data).then(response => {
+        for (let i = 0; i < response.data.length; i++) {
+          this.citie.push({
+            编号: response.data[i].编号,
+            编号描述: response.data[i].编号描述,
+            编号描述2: response.data[i].编号描述2,
+            颜色代码: response.data[i].颜色代码,
+            color: '',
+            states: '0'
+          })
+        }
+      })
+    },
+    AndonType() {
+      const param = []
+      param[0] = ['安东类型代码', '1']
+      const Data = this.CreateData('11', 'ANDON_类型_明细表_查询', param)
+      this.ExecDatabase(Data).then(response => {
+        for (let i = 0; i < response.data.length; i++) {
+          this.andonType1.push({
+            安东明细代码: response.data[i].安东明细代码,
+            安东类型代码: response.data[i].安东类型代码,
+            安东明细简称: response.data[i].安东明细简称,
+            安东明细描述: response.data[i].安东明细描述
+          })
+        }
+      })
+      const param1 = []
+      param1[0] = ['安东类型代码', '2']
+      const Data1 = this.CreateData('11', 'ANDON_类型_明细表_查询', param1)
+      this.ExecDatabase(Data1).then(response => {
+        for (let i = 0; i < response.data.length; i++) {
+          this.andonType2.push({
+            安东明细代码: response.data[i].安东明细代码,
+            安东明细简称: response.data[i].安东明细简称,
+            安东类型代码: response.data[i].安东类型代码,
+            安东明细描述: response.data[i].安东明细描述
+          })
+        }
+      })
+      const param2 = []
+      param2[0] = ['安东类型代码', '3']
+      const Data2 = this.CreateData('11', 'ANDON_类型_明细表_查询', param2)
+      this.ExecDatabase(Data2).then(response => {
+        for (let i = 0; i < response.data.length; i++) {
+          this.andonType3.push({
+            安东明细代码: response.data[i].安东明细代码,
+            安东明细简称: response.data[i].安东明细简称,
+            安东类型代码: response.data[i].安东类型代码,
+            安东明细描述: response.data[i].安东明细描述
+          })
+        }
+      })
+    },
+    getAndonarr2() {
+      this.cities = []
+      const param = []
+      param[0] = ['安东类型代码', '2']
+      param[1] = ['工位号', this.$store.state.station.stationName]
+      const Data = this.CreateData('11', 'ANDON_类型_编号_查询', param)
+      this.ExecDatabase(Data).then(response => {
+        for (let i = 0; i < response.data.length; i++) {
+          this.cities.push({
+            编号: response.data[i].编号,
+            编号描述: response.data[i].编号描述,
+            编号描述2: response.data[i].编号描述2,
+            颜色代码: response.data[i].颜色代码,
+            color: '',
+            states: '0'
+          })
+        }
+      })
+    },
+    getAndonarr1() {
+      this.cities1 = []
+      const param = []
+      param[0] = ['安东类型代码', '1']
+      param[1] = ['工位号', this.$store.state.station.stationName]
+      const Data = this.CreateData('11', 'ANDON_类型_编号_查询', param)
+      this.ExecDatabase(Data).then(response => {
+        for (let i = 0; i < response.data.length; i++) {
+          this.cities1.push({
+            编号: response.data[i].编号,
+            编号描述: response.data[i].编号描述,
+            编号描述2: response.data[i].编号描述2,
+            颜色代码: response.data[i].颜色代码,
+            color: '',
+            states: '0'
+          })
+        }
+      })
+    },
+    select2(indexa) {
+      if (indexa.states === '0') {
+        if (!this.checkboxGroup2.find(item => item.编号 === indexa.编号)) {
+          this.checkboxGroup2.push({
+            编号: indexa.编号,
+            编号描述: indexa.编号描述,
+            编号描述2: indexa.编号描述2,
+            颜色代码: indexa.颜色代码,
+            states: indexa.states
+          })
+          indexa.states = '1'
+        }
+        indexa.color = document.getElementById(indexa.编号).style.backgroundColor
+        document.getElementById(indexa.编号).style.backgroundColor = 'cornflowerblue'
+      } else if (indexa.states === '1') {
+        indexa.states = '0'
+        document.getElementById(indexa.编号).style.backgroundColor = indexa.color
+        var count = this.checkboxGroup2.findIndex(item => item.编号 === indexa.编号)
+        this.checkboxGroup2.splice(count, 1)
+      }
+    },
+    select1(indexa) {
+      if (indexa.states === '0') {
+        if (!this.checkboxGroup1.find(item => item.编号 === indexa.编号)) {
+          this.checkboxGroup1.push({
+            编号: indexa.编号,
+            编号描述: indexa.编号描述,
+            编号描述2: indexa.编号描述2,
+            颜色代码: indexa.颜色代码,
+            states: indexa.states
+          })
+          indexa.states = '1'
+        }
+        indexa.color = document.getElementById(indexa.编号).style.backgroundColor
+        document.getElementById(indexa.编号).style.backgroundColor = 'cornflowerblue'
+      } else if (indexa.states === '1') {
+        indexa.states = '0'
+        document.getElementById(indexa.编号).style.backgroundColor = indexa.color
+        var count = this.checkboxGroup1.findIndex(item => item.编号 === indexa.编号)
+        this.checkboxGroup1.splice(count, 1)
+      }
+    },
+    imgClick1() {
+      if (this.checkboxGroup1.length < 1) {
+        this.$alert('没有选择物料', '提示', {
+          confirmButtonText: '确定'
+        })
+      } else {
+        this.title = 'ando系统呼叫界面'
+        this.index = '1'
+        this.dialogFormVisible1 = true
+      }
+    },
+    imgClick2() {
+      if (this.checkboxGroup1.length < 1) {
+        this.$alert('没有选择物料', '提示', {
+          confirmButtonText: '确定'
+        })
+      } else {
+        this.title = 'ando系统呼叫界面'
+        this.index = '2'
+        this.dialogFormVisible1 = true
+      }
+    },
+    imgClick3() {
+      if (this.checkboxGroup2.length < 1) {
+        this.$alert('没有选择质量故障', '提示', {
+          confirmButtonText: '确定'
+        })
+      } else {
+        this.title = 'ando系统呼叫界面'
+        this.index = '1'
+        this.dialogFormVisible2 = true
+      }
+    },
+    imgClick4() {
+      if (this.checkboxGroup2.length < 1) {
+        this.$alert('没有选择质量故障', '提示', {
+          confirmButtonText: '确定'
+        })
+      } else {
+        this.title = 'ando系统呼叫界面'
+        this.index = '2'
+        this.dialogFormVisible2 = true
+      }
+    },
+    imgClick5() {
+      if (this.checkboxGroup3.length < 1) {
+        this.$alert('没有选择设备故障原因', '提示', {
+          confirmButtonText: '确定'
+        })
+      } else {
+        this.title = 'ando系统呼叫界面'
+        this.index = '1'
+        this.dialogFormVisible3 = true
+      }
+    },
+    imgClick6() {
+      if (this.checkboxGroup3.length < 1) {
+        this.$alert('没有选择设备故障原因', '提示', {
+          confirmButtonText: '确定'
+        })
+      } else {
+        this.title = 'ando系统呼叫界面'
+        this.index = '2'
+        this.dialogFormVisible3 = true
+      }
+    },
+    change3(state1, state2, check, state) {
+      if (this.index === '1') {
+        for (let i = 0; i < check.length; i++) {
+          console.log('xxxxxxxxxx', check[i].编号描述2, state)
+          if (check[i].编号描述2.match(state)) {
+            this.$message.error('报警问题存在')
+          } else {
+            const param = []
+            param[0] = ['工位号', this.$store.state.station.stationName]
+            param[1] = ['安东类型代码', state1]
+            param[2] = ['安东明细代码', state2]
+            param[3] = ['编号', check[i].编号]
+            param[4] = ['呼叫内容', '0']
+            param[5] = ['呼叫数量', 0]
+            param[6] = ['卡片条码', '0']
+            param[7] = ['不合格代码', '0']
+            const Data = this.CreateData('12', 'ANDON_呼叫状态_呼叫', param)
+            this.ExecDatabase(Data).then(response => {
+              if (response.data[0].result === '1') {
+                this.publication.topic = window.g.mqttPublishTopic
+                this.publication.payload = 'WEB|Andon|' + this.$store.state.station.stationName + '|' + '1'
+                const result = window.g.mqttClient.doPublish(this.publication)
+                if (result === true) {
+                  this.$notify.success({
+                    title: '提示',
+                    message: 'Andon呼叫成功！',
+                    position: 'bottom-right',
+                    duration: 2000,
+                    offset: 170
+                  })
+                } else {
+                  this.$notify.error({
+                    title: '提示',
+                    message: 'Andon呼叫失败！',
+                    position: 'bottom-right',
+                    duration: 2000,
+                    offset: 170
+                  })
+                }
+                this.$message({
+                  message: '成功',
+                  type: 'success'
+                })
+              } else {
+                this.$message.error('失败')
+              }
+            })
+          }
+        }
+      } else {
+        for (let i = 0; i < check.length; i++) {
+          if (check[i].编号描述2.match(state)) {
+            const param = []
+            param[0] = ['工位号', this.$store.state.station.stationName]
+            param[1] = ['编号', check[i].编号]
+            param[2] = ['安东类型代码', state1]
+            param[3] = ['安东明细代码', state2]
+            param[4] = ['解除内容', '复位信息']
+            const Data = this.CreateData('12', 'ANDON_呼叫状态_解除', param)
+            this.ExecDatabase(Data).then(response => {
+              if (response.data[0].result === '1') {
+                this.publication.topic = window.g.mqttPublishTopic
+                this.publication.payload = 'WEB|Andon|' + this.$store.state.station.stationName + '|' + '0'
+                const result = window.g.mqttClient.doPublish(this.publication)
+                if (result === true) {
+                  this.$notify.success({
+                    title: '提示',
+                    message: 'Andon复位成功！',
+                    position: 'bottom-right',
+                    duration: 2000,
+                    offset: 170
+                  })
+                } else {
+                  this.$notify.error({
+                    title: '提示',
+                    message: 'Andon复位失败！',
+                    position: 'bottom-right',
+                    duration: 2000,
+                    offset: 170
+                  })
+                }
+                this.$message({
+                  message: '成功',
+                  type: 'success'
+                })
+              } else {
+                this.$message.error('失败')
+              }
+            })
+          } else {
+            this.$message.error('复位问题不存在')
+          }
+        }
+      }
+      setTimeout(() => {
+        this.getAndonarr1()
+        this.getAndonarr2()
+        this.getAndonarr3()
+      }, (500))
+      this.checkboxGroup1 = []
+      this.dialogFormVisible1 = false
+      this.checkboxGroup2 = []
+      this.dialogFormVisible2 = false
+      this.checkboxGroup3 = []
+      this.dialogFormVisible3 = false
+    }
+  }
+}
+</script>
+
+<style scoped>
+    ::v-deep.div1 {
+        width: 100px;
+        height: 100%;
+        background-color: #0086b3;
+        border-radius: 20px;
+        border: 1px solid black;
+        margin-top: 10px;
+        margin-left: 10px;
+    }
+    ::v-deep.div2 {
+        width: 160px;
+        height: 85px;
+        background-color: red;
+        border-radius: 20px;
+        border: 1px solid black;
+        size: auto;
+        word-wrap: break-word;
+        word-break: normal;
+        font-size: large;
+        text-align: center;
+        line-height: 40px;
+        margin-left: 20px;
+        margin-top: 10px;
+        float: left;
+    }
+    ::v-deep.div3 {
+        width: 160px;
+        height: 85px;
+        background-color: white;
+        border-radius: 20px;
+        border: 1px solid black;
+        size: auto;
+        word-wrap: break-word;
+        word-break: normal;
+        font-size: large;
+        text-align: center;
+        line-height: 40px;
+        margin-left: 20px;
+        margin-top: 10px;
+        float: left;
+    }
+    ::v-deep.el-checkbox-button__inner {
+        line-height: 1;
+        cursor: pointer;
+        background: #FFF;
+        border: 0px solid #DCDFE6;
+        border-left: 0;
+        -webkit-appearance: none;
+        text-align: center;
+        box-sizing: border-box;
+        outline: 0;
+        height: 100%;
+        width: 99%;
+        text-align: center;
+        line-height: 60px;
+        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: 20px;
+    }
+
+</style>

src/views/DeviceManagement/index.vue

@@ -0,0 +1,118 @@
+<template>
+  <div style="width: 99%; height: 98%; margin-left: 4px;background-color: #d5dce4">
+    <div style="width: 100%; height: 100%; margin-left: 10px; margin-top: 10px">
+      <el-row style="width: 99%; height: 90%;">
+        <el-col style="width: 44%; height: 100%;">
+          <el-table
+            :data="DeviceManagement_table1"
+            :header-cell-style="{background:'#F5F5F5'}"
+            style="border: 1px solid black; font-weight: lighter"
+            width="100%"
+            height="100%"
+            border
+            stripe
+            tooltip-effect="dark"
+          >
+            <el-table-column type="index" align="center" label="序号" width="60px" />
+            <el-table-column align="center" label="设备名称" show-overflow-tooltip>
+              <template slot-scope="scope">
+                {{ scope.row.设备名称 }}
+              </template>
+            </el-table-column>
+            <el-table-column align="center" label="保养内容" show-overflow-tooltip>
+              <template slot-scope="scope">
+                {{ scope.row.保养内容 }}
+              </template>
+            </el-table-column>
+            <el-table-column align="center" label="保养属性" show-overflow-tooltip>
+              <template slot-scope="scope">
+                {{ scope.row.保养属性 }}
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-col>
+        <el-col style="width: 55%; height: 100%; border: 1px solid black;margin-left: 5px;">
+          <img :src="'data:image/jpeg;base64,'+Image" style="width: 100%; height: 100%">
+        </el-col>
+      </el-row>
+      <div style="width: 80%; height: 8%; float: left; margin-top: 25px">
+        <el-input v-model="内容" style="width:100%; border: 1px solid black;" clearable placeholder="备注" />
+      </div>
+      <div style="width: 12%; height: 8%; float: left; margin-top: 22px;margin-left: 98px">
+        <div id="111" style="width: 100%; height: 70%; border: 1px solid black; margin-left: 0px; text-align: center; line-height: 35px" @click="baoY()">
+          <span style="font-size: x-large;line-height: 50px">设备保养</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      DeviceManagement_table1: [],
+      内容: '',
+      Image: '',
+      filePath: '',
+      count: 1
+    }
+  },
+  created() {
+    this.getTable()
+    this.getImage()
+  },
+  methods: {
+    getTable() {
+      const param = []
+      param[0] = ['工位号', this.$store.state.station.stationName]
+      param[1] = ['保养类型代码', '2']
+      const Data = this.CreateData('11', '设备管理_设备维护内容_查询', param)
+      this.ExecDatabase(Data).then(response => {
+        for (let i = 0; i < response.data.length; i++) {
+          this.DeviceManagement_table1.push({
+            序号: response.data[i].序号,
+            设备名称: response.data[i].机床名称,
+            保养内容: response.data[i].设备维护内容,
+            保养属性: response.data[i].保养类型代码
+          })
+        }
+      })
+    },
+    getImage() {
+      const param = []
+      param[0] = ['工位号', this.$store.state.station.stationName]
+      param[1] = ['保养类型代码', '2']
+      const Data = this.CreateData('11', '设备管理_设备维护图片_查询', param)
+      this.ExecDatabase(Data).then(response => {
+        this.Image = response.data[0].保养图片
+      })
+    },
+    baoY() {
+      if (this.count === 1) {
+        document.getElementById(111).style.backgroundColor = 'cornflowerblue'
+        const param = []
+        param[0] = ['工位号', this.$store.state.station.stationName]
+        param[1] = ['备注', this.内容]
+        const Data = this.CreateData('12', '设备管理_设备维护记录表_增加', param)
+        this.ExecDatabase(Data).then(response => {
+          if (response.data[0].result === '1') {
+            this.$message({
+              message: '设备保存成功',
+              type: 'success'
+            })
+          } else {
+            this.$message.error('设备保存失败')
+          }
+        })
+        this.count = 2
+      } else if (this.count === 2) {
+        document.getElementById(111).style.backgroundColor = 'white'
+        this.count = 1
+      }
+    }
+  }
+
+}
+</script>
+<style scoped>
+</style>

src/views/EquipmentMaintenance/EquipmentDayMaintenance.vue

@@ -0,0 +1,123 @@
+<template>
+    <div style="background-color: white;">
+      <div style="text-align: center;margin: 20px 0 20px 0">
+        <span style="font-size: 26px">设备日保养记录表</span>
+      </div>
+      <el-table v-loading="loading" :data="tableData" tooltip-effect="dark" style="font-size: 20px" height="380" border size="small">
+        <el-table-column :resizable="false" label="项次" type="index" width="70" align="center"/>
+        <el-table-column :resizable="false" label="点检项目" width="400" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.保养项目 }}
+          </template>
+        </el-table-column>
+        <el-table-column :resizable="false" label="点检结果" align="center">
+          <template slot-scope="scope">
+            <div v-if="scope.row.点检任务编号 === 0">点 检 完 毕 √</div>
+            <el-radio v-if="scope.row.点检任务编号 !== 0" v-model="scope.row.保养结果" label="1" size="mini" border @click.native.prevent="chooseEdit(scope.$index,scope.row,1)">良好 √</el-radio>
+            <el-radio v-if="scope.row.点检任务编号 !== 0" v-model="scope.row.保养结果" label="2" size="mini" border @click.native.prevent="chooseEdit(scope.$index,scope.row,2)">维修 R</el-radio>
+            <el-radio v-if="scope.row.点检任务编号 !== 0" v-model="scope.row.保养结果" label="3" size="mini" border @click.native.prevent="chooseEdit(scope.$index,scope.row,3)">异常 X</el-radio>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div v-show="confirm">
+        <div style="border: 1px solid #a6a6a6;height: 80px;">
+          <div style="width: 69px;height: 80px;float: left;text-align: center;line-height: 80px;font-size: 20px;color: #606266">{{ tableIndex }}</div>
+          <div style="width: 398px;height: 80px;float: left;text-align: center;line-height: 80px;font-size: 20px;color: #606266;border-left: 1px solid #a6a6a6;border-right: 1px solid #a6a6a6">点检人确认</div>
+          <div style="width: 350px;height: 80px;float: left;text-align: center;line-height: 80px;font-size: 20px;color: #606266">
+            <el-button size="large" type="warning" icon="el-icon-check" style="font-size: 20px;" @click="confirmEdit()">确认完成</el-button>
+          </div>
+        </div>
+      </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      nameID: '',
+      loading: false,
+      MaintenanceTaskGroup: [],
+      MaintenanceResultGroup: [],
+      opName: '',
+      tableData: [],
+      confirm: false,
+      tableIndex: 0
+    }
+  },
+  methods: {
+    fetchData(num, num2) {
+      this.opName = num
+      this.nameID = num2
+      this.searchData()
+    },
+    // 查询需要点检的项目
+    searchData() {
+      this.tableData = []
+      var param = []
+      param[0] = ['工位号', this.opName]
+      var Data = this.CreateData('11', 'MES_机加工MES_工位点检任务每日_查询', param)
+      this.ExecDatabase(Data).then(response => {
+        if (response.data.length > 0) {
+          this.tableIndex = 0
+          for (let i = 0; i < response.data.length; i++) {
+            this.tableData.push({
+              点检任务编号: response.data[i].点检任务编号,
+              保养项目: response.data[i].保养项目,
+              保养结果: '1'
+            })
+            if (response.data[i].点检任务编号 !== 0) {
+              this.tableIndex += 1
+            }
+          }
+          if (this.tableIndex !== 0) {
+            this.tableIndex += 1
+            this.confirm = true
+          } else {
+            this.confirm = false
+          }
+        } else {
+          this.tableIndex = 0
+          this.confirm = false
+        }
+      })
+    },
+    // 选择保养结果
+    chooseEdit(index, row, res) {
+      this.tableData[index].保养结果 === res.toString() ? this.tableData[index].保养结果 = '0' : this.tableData[index].保养结果 = res.toString()
+    },
+    // 确认保养
+    confirmEdit() {
+      this.MaintenanceTaskGroup = []
+      this.MaintenanceResultGroup = []
+      for (var i = 0; i < this.tableData.length; i++) {
+        if (this.tableData[i].保养结果 !== '0') {
+          this.MaintenanceTaskGroup.push(this.tableData[i].点检任务编号)
+          this.MaintenanceResultGroup.push(this.tableData[i].保养结果)
+        }
+      }
+      if (this.MaintenanceTaskGroup.length === 0) {
+        this.$message.error('请确认需要保养的项目')
+        return
+      }
+      var param = []
+      param[0] = ['工位号', this.opName]
+      param[1] = ['点检人ID', this.nameID]
+      param[2] = ['点检任务编号组', this.MaintenanceTaskGroup]
+      param[3] = ['保养标准ID组', this.MaintenanceResultGroup]
+      var Data = this.CreateData('12', 'MES_机加工MES_新增工位点检任务每日记录_循环执行_编辑', param)
+      this.ExecDatabase(Data).then(response => {
+        if (response.data[0].result === '1') {
+          this.$message.success('保养成功！')
+          this.searchData()
+        } else {
+          this.$message.error('保养失败！')
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>