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

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>

src/views/EquipmentMaintenance/EquipmentMonthMaintenance.vue

@@ -0,0 +1,129 @@
+<template>
+  <div>
+    <div style="text-align: center;margin: 20px 0 20px 0">
+      <span style="font-size: 26px">设备月保养记录表</span>
+    </div>
+    <div style="background-color: white">
+      <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)">良好 V</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>
+    <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.nameID = num2
+      this.opName = num
+      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 (var 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
+          }
+          console.log(this.tableIndex)
+          // this.tableIndex = this.tableData.length + 1
+          // this.confirm = true
+        } 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>

src/views/EquipmentMaintenance/EquipmentQuarterMaintenance.vue

@@ -0,0 +1,128 @@
+<template>
+  <div>
+    <div style="text-align: center;margin: 20px 0 20px 0">
+      <span style="font-size: 26px">设备季保养记录表</span>
+    </div>
+    <div style="background-color: white">
+      <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)">良好 V</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>
+    <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.nameID = num2
+      this.opName = num
+      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 (var 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
+          }
+          // this.tableIndex = this.tableData.length + 1
+          // this.confirm = true
+        } 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>

src/views/EquipmentMaintenance/EquipmentWeekMaintenance.vue

@@ -0,0 +1,128 @@
+<template>
+  <div>
+    <div style="text-align: center;margin: 20px 0 20px 0">
+      <span style="font-size: 26px">设备周保养记录表</span>
+    </div>
+    <div style="background-color: white">
+      <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)">良好 V</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>
+    <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
+    }
+  },
+  created() {
+  },
+  methods: {
+    fetchData(num, num2) {
+      this.nameID = num2
+      this.opName = num
+      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 (var 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>

src/views/EquipmentMaintenance/EquipmentYearMaintenance.vue

@@ -0,0 +1,117 @@
+<template>
+  <div>
+    <div style="text-align: center;margin: 20px 0 20px 0">
+      <span style="font-size: 26px">设备年保养记录表</span>
+    </div>
+    <div style="background-color: white">
+      <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">
+            <el-radio v-model="scope.row.保养结果" label="1" size="mini" border @click.native.prevent="chooseEdit(scope.$index,scope.row,1)">良好 V</el-radio>
+            <el-radio v-model="scope.row.保养结果" label="2" size="mini" border @click.native.prevent="chooseEdit(scope.$index,scope.row,2)">维修 R</el-radio>
+            <el-radio 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>
+    <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.nameID = num2
+      this.opName = num
+      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) {
+          for (var i = 0; i < response.data.length; i++) {
+            this.tableData.push({
+              点检任务编号: response.data[i].点检任务编号,
+              保养项目: response.data[i].保养项目,
+              保养结果: '1'
+            })
+          }
+          this.tableIndex = this.tableData.length + 1
+          this.confirm = true
+        } 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>

src/views/EquipmentMaintenance/index.vue

@@ -0,0 +1,210 @@
+<!--设备维护-->
+<template>
+  <div style="width: 99%; height: 100%; background-color: #d7dee6;border: 2px solid #9e9b9b; margin-left: 4px">
+    <el-col :span="14" style="padding: 10px">
+      <el-card style=" height: 800px;border: 1px solid #000">
+        <el-tabs v-model="activeName" @tab-click="Refresh" style="font-size: 18px">
+          <el-tab-pane :label="tabName[0].name+'('+tabName[0].num+')'" name="0" style="font-size: 18px"><EquipmentDayMaintenance ref="fresh0"/></el-tab-pane>
+          <el-tab-pane :label="tabName[1].name+'('+tabName[1].num+')'" name="1" style="font-size: 18px"><EquipmentWeekMaintenance ref="fresh1"/></el-tab-pane>
+          <el-tab-pane :label="tabName[2].name+'('+tabName[2].num+')'" name="2" style="font-size: 18px"><EquipmentMonthMaintenance ref="fresh2"/></el-tab-pane>
+          <el-tab-pane :label="tabName[3].name+'('+tabName[3].num+')'" name="3" style="font-size: 18px"><EquipmentQuarterMaintenance ref="fresh3"/></el-tab-pane>
+          <el-tab-pane :label="tabName[4].name+'('+tabName[4].num+')'" name="4" style="font-size: 18px"><EquipmentYearMaintenance ref="fresh4"/></el-tab-pane>
+        </el-tabs>
+      </el-card>
+    </el-col>
+    <el-col :span="10" style="padding: 10px">
+      <div id="ww" style="width: 100%; height: 100%; position: relative">
+        <img :src="pic" style="height: 800px; width: 635px" @click="showPic"/>
+      </div>
+    </el-col>
+  </div>
+</template>
+<script>
+import EquipmentDayMaintenance from './EquipmentDayMaintenance.vue'
+import EquipmentWeekMaintenance from './EquipmentWeekMaintenance.vue'
+import EquipmentMonthMaintenance from './EquipmentMonthMaintenance.vue'
+import EquipmentQuarterMaintenance from './EquipmentQuarterMaintenance.vue'
+import EquipmentYearMaintenance from './EquipmentYearMaintenance.vue'
+export default {
+  components: {
+    'EquipmentDayMaintenance': EquipmentDayMaintenance,
+    'EquipmentWeekMaintenance': EquipmentWeekMaintenance,
+    'EquipmentMonthMaintenance': EquipmentMonthMaintenance,
+    'EquipmentQuarterMaintenance': EquipmentQuarterMaintenance,
+    'EquipmentYearMaintenance': EquipmentYearMaintenance
+  },
+  data() {
+    return {
+      pic: '',
+      PersonNumber: this.$store.state.user.id, // 人员ID
+      opName: this.$store.state.station.stationName,
+      tabName: [{ name: '日常点检', num: '0' }, { name: '周保养', num: '0' }, { name: '月保养', num: '0' }, { name: '季保养', num: '0' }, { name: '年保养', num: '0' }],
+      isFirst: true,
+      isSecond: false,
+      isThird: false,
+      isFourth: false,
+      isFifth: false,
+      activeName: '0',
+      machineName: '',
+      machineSerialNumber: ''
+    }
+  },
+  created() {
+    this.getCheckPic()
+  },
+  mounted() {
+    this.searchTaskNum(this.opName, this.PersonNumber)
+    this.pic = this.checkPic
+    this.picList = [this.checkPic]
+  },
+  methods: {
+    // 点击标签进行刷新
+    Refresh() {
+      switch (this.activeName) {
+        case '0': {
+          this.$refs.fresh0.fetchData(this.opName, this.PersonNumber)
+          break
+        }
+        case '1': {
+          this.$refs.fresh1.fetchData(this.opName, this.PersonNumber)
+          break
+        }
+        case '2': {
+          this.$refs.fresh2.fetchData(this.opName, this.PersonNumber)
+          break
+        }
+        case '3': {
+          this.$refs.fresh3.fetchData(this.opName, this.PersonNumber)
+          break
+        }
+        case '4': {
+          this.$refs.fresh4.fetchData(this.opName, this.PersonNumber)
+          break
+        }
+      }
+    },
+    // 查询工位设备名称和编号
+    searchMachineName() {
+      this.machineSerialNumber = ''
+      this.machineName = ''
+      var Data = this.CreateData('3', `select * from [dbo].[基础数据_设备工位点检表] where 工位号 ='${this.opName}'`)
+      this.ExecDatabase(Data).then(response => {
+        if (response.data.length > 0) {
+          this.machineSerialNumber = response.data[0].设备编号
+          this.machineName = response.data[0].设备名称
+        }
+      })
+    },
+    // 查询任务数量
+    searchTaskNum(num, num2) {
+      this.$refs.fresh0.fetchData(num, num2)
+      this.opName = num
+      this.PersonNumber = num2
+      this.tabName[0].num = 0
+      this.tabName[1].num = 0
+      this.tabName[2].num = 0
+      this.tabName[3].num = 0
+      this.tabName[4].num = 0
+      var param = []
+      param[0] = ['工位号', this.opName]
+      var Data = this.CreateData('11', 'MES_机加工MES_工位点检任务每日_查询', param)
+      this.ExecDatabase(Data).then(response => {
+        this.tabName[0].num = response.data.length
+      })
+      var Data1 = this.CreateData('11', 'MES_机加工MES_工位点检任务每周_查询', param)
+      this.ExecDatabase(Data1).then(response => {
+        this.tabName[1].num = response.data.length
+      })
+      var Data2 = this.CreateData('11', 'MES_机加工MES_工位点检任务每月_查询', param)
+      this.ExecDatabase(Data2).then(response => {
+        this.tabName[2].num = response.data.length
+      })
+      var Data3 = this.CreateData('11', 'MES_机加工MES_工位点检任务每季_查询', param)
+      this.ExecDatabase(Data3).then(response => {
+        this.tabName[3].num = response.data.length
+      })
+      var Data4 = this.CreateData('11', 'MES_机加工MES_工位点检任务每年_查询', param)
+      this.ExecDatabase(Data4).then(response => {
+        this.tabName[4].num = response.data.length
+      })
+      this.searchMachineName()
+    },
+    getCheckPic() {
+      const param = []
+      param[0] = ['工位号', this.$store.state.station.stationName]
+      const Data = this.CreateData('11', '基础数据_设备工位点检表图片_查询', param)
+      this.ExecDatabase(Data).then(response => {
+        if (response.data.length > 0) {
+          this.pic = 'data:image/png;base64,' + response.data[0]['点检图片']
+          this.$store.commit('set_checkPic', 'data:image/png;base64,' + response.data[0]['点检图片'])
+        }
+      })
+    },
+    showPic() {
+      const container = document.createElement('div')
+      container.classList.add('preview-container')
+      container.onclick = function() {
+        container.remove()
+      }
+      // 创建预览图片
+      const innerImg = document.createElement('img')
+      innerImg.src = this.pic
+      innerImg.classList.add('pic')
+      // 绑定滚动事件
+      container.onwheel = function(event) {
+        const width = getComputedStyle(innerImg).width.slice(0, -2)
+        const height = getComputedStyle(innerImg).height.slice(0, -2)
+        if (event.deltaY > 0) {
+          // 向上滚动放大
+          innerImg.style.width = parseInt(width) * 1.1 + 'px'
+          innerImg.style.height = parseInt(height) * 1.1 + 'px'
+        } else if (event.deltaY < 0) {
+          // 向下滚动缩小
+          innerImg.style.width = parseInt(width) * 0.9 + 'px'
+          innerImg.style.height = parseInt(height) * 0.9 + 'px'
+        }
+      }
+      // 将图片添加到预览器
+      container.append(innerImg)
+      // 将预览器添加到 body 中
+      document.body.append(container)
+    }
+  }
+}
+</script>
+
+<style>
+  .el-tabs__item.is-active {
+    color: #409EFF !important;
+  }
+  .el-tabs__item {
+    color: #050505 !important;
+    font-size: 18px;
+  }
+  .preview111 {
+    cursor: pointer;
+  }
+  .preview-container {
+    z-index: 9999;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: rgba(0, 0, 0, 0.6);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+  }
+  .preview-container .pic {
+    max-width: 90%;
+    max-height: 90%;
+    min-width: 5%;
+    min-height: 5%;
+    object-fit: contain;
+  }
+</style>
+<style scoped>
+
+</style>

src/views/Login/index.vue

@@ -0,0 +1,443 @@
+<template>
+  <div class="login">
+    <div style="position: relative">
+      <div
+          style="position: absolute;top: 150px; left: 50%; border: 1px solid black;border-radius: 25px; width: 500px; height: 390px; background-color: white; padding: 10px;">
+        <div v-if="count === 1">
+          <el-form ref="form1" :model="loginForm" :rules="rules" label-position="left" label-width="70px"
+                   style="width: 100%;">
+            <div style="display: flex;align-content: center;justify-content: center;" @click="handleFullScreen">
+              <img height="54" src="../../assets/image/leftPic.png" width="166.5">
+              <span
+                  style="font-size: 34px; color:black; line-height: 60px; width: 280px;margin-left: 10px">MES信息管理系统</span>
+            </div>
+            <div style="border: 2px solid royalblue; width: 500px;"/>
+            <div style="width: 480px; margin-top: 10px;">
+              <div style="margin-left: 30px">
+                <!--<el-form-item>-->
+                <!--  <span slot="label" style="font-size: 20px;color: #000">-->
+                <!--    班次-->
+                <!--  </span>-->
+                <!--  <el-select v-model="loginForm.class" placeholder="请选择班次" style="width:340px; border: 2px solid black; border-radius:6px">-->
+                <!--    &lt;!&ndash;存储过程1&ndash;&gt;-->
+                <!--    <el-option-->
+                <!--      v-for="item in classArr"-->
+                <!--      :key="item.value"-->
+                <!--      :label="item.label"-->
+                <!--      :value="item.value"-->
+                <!--    />-->
+                <!--  </el-select>-->
+                <!--</el-form-item>-->
+                <el-form-item>
+                  <span slot="label" style="font-size: 20px;color: #000">
+                    工位
+                  </span>
+                  <el-select v-model="loginForm.station" placeholder="请选择工位"
+                             style="width:340px; border: 2px solid black; border-radius:6px">
+                    <!--存储过程1-->
+                    <el-option
+                        v-for="item in stationArrIp"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="{value:item.value,label:item.label,MesWebCode:item.MesWebCode}"
+                    />
+                  </el-select>
+                </el-form-item>
+                <el-form-item>
+                  <span slot="label" style="font-size: 20px;color: #000">
+                    工号
+                  </span>
+                  <el-input v-model="loginForm.username" clearable
+                            placeholder="请输入用户名" style="width:340px; border: 2px solid black; border-radius:6px"/>
+                </el-form-item>
+                <el-form-item>
+                  <span slot="label" style="font-size: 20px;color: #000">
+                    密码
+                  </span>
+                  <el-input v-model="loginForm.password" auto-complete="on" clearable
+                            placeholder="请输入密码" style="width:340px; border: 2px solid black; border-radius:6px"
+                            type="password" @keyup.enter.native="handleLogin"/>
+                </el-form-item>
+                <div style="text-align: center">
+                  <el-button :loading="loading" style="background-color: dodgerblue; width: 200px; height: 60px;"
+                             @click="handleLogin()">
+                    <span style="font-size: large; color: black;">登录</span>
+                  </el-button>
+                  <i class="el-icon-edit" style="font-size: 20px; margin-left: 30px" @click="editform2()"/>
+                  <i class="el-icon-setting" style="font-size: 20px; margin-left: 30px" @click="editform3()"/>
+                </div>
+              </div>
+            </div>
+          </el-form>
+        </div>
+        <div v-if="count === 2">
+          <el-form ref="form2" :model="form2" :rules="rules1" class="demo-ruleForm" label-position="left"
+                   label-width="120px" style="width: 90%;">
+            <div style="margin-left: 6px; width: 680px; height: 60px;">
+              <i class="el-icon-edit" style="font-size: xx-large; margin-left: 30px; margin-top: 10px"/>
+              <span style="font-size: xx-large; color:black; line-height: 60px; margin-left: 10px">修改密码</span>
+            </div>
+            <div style="border: 2px solid royalblue; width: 500px;"/>
+            <div style="width: 480px; margin-top: 10px;">
+              <div>
+                <el-form-item>
+                  <span slot="label" style="font-size: 20px;color: #000">
+                    工号：
+                  </span>
+                  <el-input v-model="form2.user" clearable
+                            placeholder="请输入工号" style="width:340px;border: 2px solid black; border-radius:6px"/>
+                </el-form-item>
+                <el-form-item>
+                  <span slot="label" style="font-size: 20px;color: #000">
+                    原始密码：
+                  </span>
+                  <el-input v-model="form2.oldPassword" clearable
+                            placeholder="请输入原始密码"
+                            style="width:340px; border: 2px solid black; border-radius:6px"/>
+                </el-form-item>
+                <el-form-item>
+                  <span slot="label" style="font-size: 20px;color: #000">
+                    新密码：
+                  </span>
+                  <el-input v-model="form2.newPassword" clearable
+                            placeholder="请输入新密码" style="width:340px;border: 2px solid black; border-radius:6px"/>
+                </el-form-item>
+                <el-form-item>
+                  <span slot="label" style="font-size: 20px;color: #000">
+                    确认密码：
+                  </span>
+                  <el-input v-model="form2.newPassword" clearable
+                            placeholder="再次输入新密码"
+                            style="width:340px;border: 2px solid black; border-radius:6px"/>
+                </el-form-item>
+                <div style="text-align: center">
+                  <el-button style="background-color: dodgerblue; width: 200px; height: 60px;" @click="routeJump2()">
+                    <span style="font-size: large; color: black;">提交</span>
+                  </el-button>
+                  <i class="el-icon-close" style="font-size: 20px; margin-left: 30px" @click="editform1()"/>
+                </div>
+              </div>
+            </div>
+          </el-form>
+        </div>
+        <div v-if="count === 3">
+          <el-form ref="form3" :model="form3" :rules="rules2" class="demo-ruleForm" label-position="left"
+                   label-width="100px" style="width: 100%;">
+            <div style="margin-left: 6px; width: 500px; height: 60px;">
+              <i class="el-icon-setting" style="font-size: xx-large; margin-left: 30px; margin-top: 10px"/>
+              <span
+                  style="font-size: xx-large; color:black; line-height: 60px; margin-left: 10px">设置MES系统参数</span>
+            </div>
+            <div style="border: 2px solid royalblue; width: 500px;"/>
+            <div style="width: 500px; margin-top: 10px;">
+              <div style="margin-left: 30px">
+                <el-form-item style="margin-top: 40px">
+                  <span slot="label" style="font-size: 20px;color: #000">
+                    工位号：
+                  </span>
+                  <el-select v-model="form3.stationID" style="width:340px;border: 2px solid black; border-radius:6px">
+                    <!--存储过程1-->
+                    <el-option
+                        v-for="item in stationArr"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="{value:item.value,label:item.label,MesWebCode:item.MesWebCode}"
+                    />
+                  </el-select>
+                </el-form-item>
+                <el-form-item style="margin-top: 40px">
+                  <span slot="label" style="font-size: 20px;color: #000">
+                    IP：
+                  </span>
+                  <el-input v-model="form3.severIP" placeholder="请输入服务器IP地址"
+                            readonly
+                            style="width:340px;border: 2px solid black; border-radius:6px"/>
+                </el-form-item>
+                <el-form-item style="margin-top: 40px">
+                  <span slot="label" style="font-size: 20px;color: #000">
+                    端口：
+                  </span>
+                  <el-input v-model="form3.network" placeholder="请输入服务器端口"
+                            readonly
+                            style="width:340px;border: 2px solid black; border-radius:6px"/>
+                </el-form-item>
+                <div style="text-align: center">
+                  <el-button style="background-color: dodgerblue;width: 200px; height: 60px;"
+                             @click="submitServiceParameters()">
+                    <span style="font-size: large; color: black;">提交</span>
+                  </el-button>
+                  <i class="el-icon-close" style="font-size: 20px; margin-left: 30px" @click="editform1()"/>
+                </div>
+              </div>
+            </div>
+          </el-form>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import Cookie from 'js-cookie'
+
+export default {
+  data() {
+    return {
+      fullscreen: false,
+      isAppendToBodyOther: false,
+      count: 1,
+      ip: '',
+      loading: false,
+      class: '',
+      classArr: [],
+      stationArr: [],
+      stationArrIp: [],
+      loginForm: {
+        class: '',
+        station: '',
+        username: '',
+        usernameShow: '',
+        password: '',
+        checked: true
+      },
+      form2: {
+        user: '',
+        oldPassword: '',
+        newPassword: '',
+        qnewPassword: ''
+      },
+      form3: {
+        stationID: '',
+        severIP: window.g.mqttIP,
+        network: window.g.mqttPortNumber
+      },
+      rules1: {
+        user: [{ required: true, message: '请输入用户名', trigger: 'change' }],
+        oldPassword: [{ required: true, message: '请输入旧密码', trigger: 'change' }],
+        newPassword: [{ required: true, message: '请输入新密码', trigger: 'change' }],
+        qnewPassword: [{ required: true, message: '请确认新密码', trigger: 'change' }]
+      },
+      rules2: {
+        stationID: [{ required: true, message: '请选择工位', trigger: 'change' }],
+        severIP: [{ required: true, message: '请输入服务器ip', trigger: 'change' }],
+        network: [{ required: true, message: '请输入服务器端口', trigger: 'change' }]
+      },
+      rules: {
+        class: [{ required: true, message: '请选择班次', trigger: 'change' }],
+        station: [{ required: true, message: '请选择工位', trigger: 'change' }],
+        user: [{ required: true, message: '请输入用户名', trigger: 'change' }],
+        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
+      }
+    }
+  },
+  created() {
+    setTimeout(() => {
+      this.getIp()
+      this.getStation()
+      this.getShift()
+    }, (500))
+  },
+  methods: {
+    getIp() {
+      const Data = this.CreateData('4000', '')
+      this.ExecDatabase(Data).then(response => {
+        if (response.data) {
+          this.ip = response.data
+          this.getStationByIp()
+          this.$store.commit('set_stationIp', response.data)
+        } else {
+          this.$message.error('工控机IP获取失败 ！')
+        }
+      })
+    },
+    getStationByIp() {
+      this.stationArrIp = []
+      const param = []
+      param[0] = ['工控机IP', this.ip]
+      const Data = this.CreateData('11', 'MES_计划BOM_工位与名称_按工控机IP_查询', param)
+      this.ExecDatabase(Data).then(response => {
+        for (let i = 0; i < response.data.length; i++) {
+          this.stationArrIp.push({
+            label: response.data[i].工位号,
+            value: response.data[i].工位代码,
+            MesWebCode: response.data[i].MesWebCode
+          })
+        }
+      })
+    },
+    submitServiceParameters() {
+      if (this.form3.stationID.value && this.form3.severIP && this.form3.network) {
+        const param = []
+        param[0] = ['工位代码', this.form3.stationID.value]
+        param[1] = ['工控机IP', this.ip]
+        param[2] = ['工位号', this.form3.stationID.label]
+        param[3] = ['服务器IP', this.form3.severIP]
+        param[4] = ['通讯端口', this.form3.network]
+        const Data = this.CreateData('12', 'AMES_MES_计划BOM_工位与名称_信息修改', param)
+        this.ExecDatabase(Data).then(response => {
+          if (response.data[0].result === '1') {
+            this.$message({
+              message: '参数设置成功',
+              type: 'success'
+            })
+            let ss = 0
+            for (const responseElement of this.stationArrIp) {
+              if (responseElement.value === this.form3.stationID.value) {
+                ss = 1
+              }
+            }
+            if (ss === 0) {
+              this.stationArrIp.push(this.form3.stationID)
+            }
+            this.loginForm.station = this.form3.stationID
+            this.count = 1
+          } else {
+            this.$message.error('参数设置失败')
+          }
+        })
+      } else {
+        this.$message.error('请输入全参数！')
+      }
+    },
+    getStation() {
+      this.stationArr = []
+      const Data = this.CreateData('11', '工位与名称_视图_查询')
+      this.ExecDatabase(Data).then(response => {
+        for (let i = 0; i < response.data.length; i++) {
+          this.stationArr.push({
+            label: response.data[i].工位号,
+            value: response.data[i].工位代码,
+            MesWebCode: response.data[i].MesWebCode
+          })
+        }
+      })
+    },
+    getShift() {
+      this.classArr = []
+      const Data = this.CreateData('11', 'AMES_物料拉动_人员班组管理_班次信息_登录_查询')
+      this.ExecDatabase(Data).then(response => {
+        for (let i = 0; i < response.data.length; i++) {
+          this.classArr.push({
+            label: response.data[i].班次描述,
+            value: response.data[i].班次代码
+          })
+        }
+      })
+    },
+    handleLogin() {
+      if (!this.loginForm.station.value) {
+        this.$message.error('请设置工位！')
+      } else {
+        this.row = null
+        this.loading = true
+        this.$store.dispatch('Login', this.loginForm).then(res => {
+          if (res.data.length === 1 && res.data[0].考勤编号 === this.loginForm.username && res.data[0].密码 === this.loginForm.password) {
+            this.loginForm.usernameShow = res.data[0].姓名
+            const param = []
+            param[0] = param[0] = ['工位号', this.loginForm.station.label]
+            param[1] = param[1] = ['操作者工号', this.loginForm.username]
+            param[2] = param[2] = ['班次名称', this.loginForm.class]
+            const Data = this.CreateData('12', '测量数据工位_监控系统_操作者工号_增加', param)
+            this.ExecDatabase(Data).then(() => {
+            })
+            this.$message({
+              message: '登录成功',
+              type: 'success'
+            })
+            this.setStation()
+            this.loading = false
+            this.$router.push({ path: '/layout' })
+            this.$router.push({
+              name: 'OperationGuide',
+              params: {
+                id: 123
+              }
+            })
+          } else {
+            this.$message.error('登录失败！')
+          }
+        }).catch(() => {
+          this.loading = false
+        })
+        if (this.loginForm.checked === true) { // 传入账号名，密码，和保存天数3个参数
+          this.setCookie(this.loginForm.username, this.loginForm.password, this.loginForm.checked)
+        } else {
+          this.clearCookie()
+        }
+      }
+    },
+    setStation() {
+      this.$store.commit('set_MesWebCode', this.loginForm.station.MesWebCode)
+      this.$store.commit('set_stationNumber', this.loginForm.station.value)
+      this.$store.commit('set_stationName', this.loginForm.station.label)
+      this.$store.commit('set_classesID', 'A')
+      this.$store.commit('set_classes', '白班')
+      this.$store.commit('set_serverIP', this.form3.severIP)
+      this.$store.commit('set_serverPort', this.form3.network)
+      this.$store.commit('set_stationUserName', this.loginForm.usernameShow)
+      this.$store.commit('set_stationUserCount', this.loginForm.username)
+    },
+    setCookie(username, password, checked) {
+      Cookie.set('username', username, { expires: 7 })
+      Cookie.set('password', password, { expires: 7 })
+      Cookie.set('checked', checked, { expires: 7 })
+    },
+    clearCookie() {
+      Cookie.remove('username')
+      Cookie.remove('password')
+      Cookie.remove('checked')
+    },
+    routeJump2() {
+      this.count = 1
+    },
+    editform2() {
+      this.count = 2
+    },
+    editform3() {
+      this.count = 3
+    },
+    editform1() {
+      this.count = 1
+    },
+    handleFullScreen() {
+      const element = document.documentElement
+      if (this.fullscreen) {
+        if (document.exitFullscreen) {
+          document.exitFullscreen()
+        } else if (document.webkitCancelFullScreen) {
+          document.webkitCancelFullScreen()
+        } else if (document.mozCancelFullScreen) {
+          document.mozCancelFullScreen()
+        } else if (document.msExitFullscreen) {
+          document.msExitFullscreen()
+        }
+      } else {
+        if (element.requestFullscreen) {
+          element.requestFullscreen()
+        } else if (element.webkitRequestFullScreen) {
+          element.webkitRequestFullScreen()
+        } else if (element.mozRequestFullScreen) {
+          element.mozRequestFullScreen()
+        } else if (element.msRequestFullscreen) {
+          // IE11
+          element.msRequestFullscreen()
+        }
+      }
+      this.fullscreen = !this.fullscreen
+    }
+  }
+}
+</script>
+
+<style scoped>
+.login {
+  width: 100vw;
+  height: 100vh;
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  background-image: url("../../../public/login.png");
+}
+
+.el-form-item {
+  margin: 30px 0 !important;
+}
+</style>

src/views/MaterialData/index.vue

@@ -0,0 +1,312 @@
+<template>
+  <div style="width: 99%; height: 100%; background-color: #d7dee6; padding: 5px; border: 2px solid #9e9b9b">
+    <el-row style="height: 87%; width: 99%; margin-top: 10px">
+      <el-table :data="orderCompletion_table1" :header-cell-style="{ background: '#F5F5F5', fontSize: '24px' }" border
+        height="810px" stripe style="width: 100%; border: 1px solid #9e9b9b" tooltip-effect="dark">
+        <el-table-column align="center" label="序号" type="index" width="100px" />
+        <el-table-column align="center" label="物料名称">
+          <template #default="scope">
+            {{ scope.row.物料名称 }}
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="物料图号" width="160px">
+          <template #default="scope">
+            {{ scope.row.物料图号 }}
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="是否验证">
+          <template #default="scope">
+            <el-tag v-if="Number(scope.row.是否验证) === 1" type="success">是</el-tag>
+            <el-tag v-if="Number(scope.row.是否验证) === 0" type="warning">否</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="前规则">
+          <template #default="scope">
+            {{ scope.row.匹配规则前 }}
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="后规则">
+          <template #default="scope">
+            {{ scope.row.匹配规则后 }}
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="备注1">
+          <template #default="scope">
+            {{ scope.row.备注1 }}
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="备注2">
+          <template #default="scope">
+            {{ scope.row.备注2 }}
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="备注3">
+          <template #default="scope">
+            {{ scope.row.备注3 }}
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="备注4">
+          <template #default="scope">
+            {{ scope.row.备注4 }}
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="物料编号">
+          <template #default="scope">
+            {{ scope.row.物料编号 }}
+          </template>
+        </el-table-column>
+        <el-table-column align="center"  label="校验时间" width="140px">
+          <template #default="scope">
+            {{ scope.row.校验时间 }}
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="操作" width="120">
+          <template #default="scope">
+            <el-button type="text" style="font-size: 20px;" @click="handleForceCheck(scope.row)">强制校验</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-row>
+    <el-dialog :append-to-body="true" :title="title" :visible.sync="dialogFormVisible1" center class="qualityDataDialog"
+      style="text-align: center" width="650px">
+      <div style="text-align: center">
+        <div style="background-color: #e4e4e4;width: 100%; height: 365px">
+          <el-table :data="qualityData" :row-class-name="tableRowClassName" border max-height="365px" size="small"
+            style="width: 100%; height: 100%; font-size: 20px; color: #000; border: 1px solid #9e9b9b">
+            <el-table-column align="center" label="名称" prop="名称" width="100" />
+            <el-table-column align="center" label="类型" prop="测量项目1" />
+            <el-table-column align="center" label="测量项目" prop="测量项目2" />
+          </el-table>
+        </div>
+        <div style="margin-top: 10px">
+          <el-button class="el-icon-close" style="width: 100px;height: 40px;" type="success" @click="cancel()">
+            关闭
+          </el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+// import { mapGetters } from 'vuex'
+export default {
+  data() {
+    return {
+      checked: false,
+      Type: [{ label: '', value: '' }],
+      count: true,
+      text1: '正常生产订单',
+      text2: '无订单生产',
+      intdex: true,
+      xianshou: '',
+      orderCompletion_table1: [],
+      PersonaSex: [],
+      jixingName: [],
+      Sex: [],
+      title: '',
+      publication: {
+        topic: '',
+        qos: 0,
+        payload: ''
+      },
+      // 质量数据列表
+      qualityData: [],
+      dialogFormVisible1: false,
+      form1: {
+        订单号: '',
+        产品型号: '',
+        零件号: '',
+        计划数量: '',
+        完成数量: '',
+        计划时间: '',
+        状态: ''
+      },
+      rules: {
+        排序: [{ required: true, message: '序号为空', trigger: 'change' }],
+        订单号: [{ required: true, message: '订单号为空', trigger: 'change' }],
+        产品机型: [{ required: true, message: '产品机型为空', trigger: 'change' }],
+        零件号: [{ required: true, message: '机型代码为空', trigger: 'change' }],
+        计划数量: [{ required: true, message: '计划数量为空', trigger: 'change' }],
+        完成数量: [{ required: true, message: '完成数量为空', trigger: 'change' }],
+        计划时间: [{ required: true, message: '计划时间为空', trigger: 'change' }],
+        状态: [{ required: true, message: '状态为空', trigger: 'change' }]
+      }
+    }
+  },
+  created() {
+    this.getTable()
+  },
+  // watch: {
+  //   orderCompletion_table: {
+  //     handler(newValue, oldName) {
+  //       this.orderCompletion_table1 = newValue
+  //     },
+  //     immediate: true,
+  //     deep: true
+  //   }
+
+  // },
+  // computed: {
+  //   ...mapGetters([
+  //     'orderCompletion_table'
+  //   ])
+  // },
+  methods: {
+
+    tableRowClassName({ row }) {
+      if (row.合格标志 === '1') {
+        return 'green'
+      } else {
+        return 'red'
+      }
+    },
+    getQualityData(row) {
+      const param = []
+      param[0] = ['工位号', this.$store.state.station.stationName]
+      param[1] = ['发动机号', row.发动机号]
+      const Data = this.CreateData('11', '测量数据合格_查询', param)
+      this.ExecDatabase(Data).then(response => {
+        this.qualityData = response.data
+      })
+    },
+    changeRadio() {
+      if (this.checked) {
+        this.intdex = false
+        if (this.xianshou === 1) {
+          this.count = true
+        }
+      } else if (!this.checked) {
+        this.intdex = true
+        if (this.xianshou === 1) {
+          this.count = false
+        }
+      }
+    },
+    // 强制校验 弹出element 的输入框 输入物料编号 确定后调用存储过程
+    handleForceCheck(row) {
+      this.$prompt('请输入物料编号', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消'
+      }).then(({ value }) => {
+        const param = []
+        param[0] = ['工位号', this.$store.state.station.stationName]
+        param[1] = ['物料图号', row.物料图号]
+        param[2] = ['物料编号', value]
+        const Data2 = this.CreateData('11', 'PTCHV_物料验证记录_强制_增加', param)
+        this.ExecDatabase(Data2).then(response => {
+          if (response.data[0].result === 1) {
+            this.$notify.success({
+              title: '提示',
+              message: '物料码记录成功！',
+              position: 'bottom-right',
+              offset: 170
+            })
+          } else {
+            this.$message.error(response.data[0].msg)
+          }
+          this.getTable()
+        })
+      })
+    },
+    cancel() {
+      this.dialogFormVisible1 = false
+    },
+    confirm11(form) {
+      const param = []
+      param[0] = ['工位号', this.$store.state.station.stationName]
+      param[1] = ['订单号', this.form1.订单号]
+      const Data2 = this.CreateData('12', '测量数据工位_监控系统_订单号_增加', param)
+      this.ExecDatabase(Data2).then(response => {
+        if (response.data[0].result === '1') {
+          this.$notify.success({
+            title: '提示',
+            message: '订单选择成功！',
+            position: 'bottom-right',
+            offset: 170
+          })
+        } else {
+          this.$message.error('订单选择失败')
+        }
+        this.getTable()
+      })
+      // this.publication.topic = window.g.mqttPublishTopic
+      // this.publication.payload  = 'WEB|SetMoby|' + this.$store.state.station.stationName + '|' + '1'
+      // const result = window.g.mqttClient.doPublish(this.publication)
+      // if (result === true) {
+      //   this.$notify.success({
+      //     title: '提示',
+      //     message: '订单增加传递成功！',
+      //     position: 'bottom-right',
+      //     offset: 170
+      //   })
+      // } else {
+      //   this.$notify.error({
+      //     title: '提示',
+      //     message: '订单增加传递失败！',
+      //     position: 'bottom-right',
+      //     offset: 170
+      //   })
+      // }
+      this.dialogFormVisible1 = false
+    },
+    getTable() {
+      const param = []
+      param[0] = ['工位号', this.$store.state.station.stationName]
+      param[1] = ['工件编号', this.$store.state.station.engineValue.EngineID]
+      const Data = this.CreateData('11', '电子看板_装配零件_工位查询', param)
+      this.ExecDatabase(Data).then(response => {
+        this.orderCompletion_table1 = response.data
+      })
+    },
+    choose(row) {
+      if (this.qualityData) {
+        this.qualityData = []
+      }
+      this.getQualityData(row)
+      this.dialogFormVisible1 = true
+    }
+  }
+}
+</script>
+
+<style scoped>
+/deep/ .el-dialog__header {
+  background-color: #d7dee6;
+}
+
+/deep/ .el-dialog__body {
+  background-color: #d7dee6;
+}
+
+/deep/ .el-dialog__title {
+  font-size: x-large;
+}
+
+/deep/ .cell {
+  font-size: large;
+  color: black;
+}
+
+::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
+  background-color: #cedcf3;
+}
+
+::v-deep.el-table th.el-table__cell>.cell {
+  font-size: 22px;
+  color: #2f2f2f;
+}
+
+::v-deep.qualityDataDialog .el-table th.el-table__cell>.cell {
+  font-size: 18px;
+  color: #2f2f2f;
+}
+
+::v-deep.el-table .green {
+  background: rgba(0, 128, 0, 0.7) !important;
+}
+
+::v-deep.el-table .red {
+  background: rgba(255, 0, 0, 0.7) !important;
+}
+</style>

src/views/MaterialPull/index.vue

@@ -0,0 +1,225 @@
+<template>
+  <div>
+    <el-row>
+      <span style="margin-left: 10px; font-size: larger">工位号：</span>
+      <el-select v-model="stationNumberValue" placeholder="请选择工位号" clearable style="width: 200px;margin: 20px 0 0 22px">
+        <el-option
+          v-for="item in stationArr"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        />
+      </el-select>
+      <span style="margin-left: 50px; font-size: larger">时间：</span>
+      <el-date-picker
+        v-model="dateTime"
+        :clearable="false"
+        size="small"
+        type="daterange"
+        align="center"
+        style="width: 440px; height: 40px"
+        value-format="yyyy-MM-dd"
+        format="yyyy-MM-dd"
+        range-separator="～"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+      />
+      <el-button type="primary" plain size="small" icon="el-icon-search" style="margin-left: 50px" @click="selectDate()">
+        查询
+      </el-button>
+    </el-row>
+    <el-row style="height: 87%; width: 99%; margin-top: 20px">
+      <el-table
+        ref="multipleTable"
+        v-loading="loading"
+        :data="tableData"
+        :header-cell-style="{background:'#eef1f6',color:'#606266'}"
+        element-loading-text="数据加载中"
+        element-loading-spinner="el-icon-loading"
+        element-loading-background="rgba(0, 0, 0, 0.2)"
+        class="main"
+        tooltip-effect="dark"
+        height="700px"
+        style="width: 100%;max-height: 700px"
+        border
+        size="mini"
+      >
+        <!--        <el-table-column :selectable="selectable" type="selection" width="45" align="center"/>-->
+        <el-table-column type="index" width="60" label="序号" align="center" />
+        <el-table-column align="center" label="订单号">
+          <template slot-scope="scope">
+            {{ scope.row.订单号 }}
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="机型">
+          <template slot-scope="scope">
+            {{ scope.row.发动机型号 }}
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="总成编号">
+          <template slot-scope="scope">
+            {{ scope.row.发动机号 }}
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="工位号">
+          <template slot-scope="scope">
+            {{ scope.row.工位号 }}
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="工位名称">
+          <template slot-scope="scope">
+            {{ scope.row.工序名称 }}
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="零件数量">
+          <template slot-scope="scope">
+            {{ scope.row.零件数量 }}
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="零件名称">
+          <template slot-scope="scope">
+            {{ scope.row.零件名称 }}
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="零件图号">
+          <template slot-scope="scope">
+            {{ scope.row.零件图号 }}
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="物料号">
+          <template slot-scope="scope">
+            {{ scope.row.物料号 }}
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="生产厂家">
+          <template slot-scope="scope">
+            {{ scope.row.生产厂家 }}
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="物料条码">
+          <template slot-scope="scope">
+            {{ scope.row.物料条码 }}
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="物料条码批次">
+          <template slot-scope="scope">
+            {{ scope.row.物料条码批次 }}
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="操作时间">
+          <template slot-scope="scope">
+            {{ scope.row.操作时间 }}
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-row>
+    <div class="block" style="margin-top: 10px;margin-left: 20px">
+      <el-pagination
+        v-if="!loading"
+        :current-page="pageCurrent"
+        :page-sizes="[15, 30, 40]"
+        :page-size="pageSize"
+        :total="total"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'Index',
+  data() {
+    return {
+      tableData: [],
+      engineTypeValue_check: 0,
+      engineTypeValue: '',
+      assemblyNumberValue_check: 0,
+      assemblyNumberValue: '',
+      stationNumberValue_check: 1,
+      partNameValue_check: 0,
+      partNameValue: '',
+      traceabilityCode_check: 0,
+      traceabilityCode: '',
+      batchBarcodeValue_check: 0,
+      batchBarcodeValue: '',
+      pageCurrent: 1,
+      pageSize: 30,
+      loading: false,
+      stationNumberValue: '',
+      dateTime: '',
+      total: 0,
+      stationArr: []
+    }
+  },
+  created() {
+    this.getStation()
+  },
+  methods: {
+    // 确定编辑
+    getStation() {
+      this.stationArr = []
+      const Data = this.CreateData('11', '工位与名称_视图_查询')
+      this.ExecDatabase(Data).then(response => {
+        for (let i = 0; i < response.data.length; i++) {
+          this.stationArr.push({
+            label: response.data[i].工位号,
+            value: response.data[i].工位号
+          })
+        }
+      })
+    },
+    selectDate() {
+      this.tableData = []
+      var param = []
+      param[0] = ['开始时间', this.dateTime[0] + ' ' + '00:00']
+      param[1] = ['结束时间', this.dateTime[1] + ' ' + '23:59']
+      param[2] = ['发动机型号_ischeck', this.engineTypeValue_check]
+      param[3] = ['发动机型号', this.engineTypeValue]
+      param[4] = ['发动机号_ischeck', this.assemblyNumberValue_check]
+      param[5] = ['发动机号', this.assemblyNumberValue]
+      param[6] = ['工位号_ischeck', this.stationNumberValue_check]
+      param[7] = ['工位号', this.stationNumberValue]
+      param[8] = ['零件名称_ischeck', this.partNameValue_check]
+      param[9] = ['零件名称', this.partNameValue]
+      param[10] = ['二维码_ischeck', this.traceabilityCode_check]
+      param[11] = ['二维码', this.traceabilityCode]
+      param[12] = ['物料条码批次_ischeck', this.batchBarcodeValue_check]
+      param[13] = ['物料条码批次', this.batchBarcodeValue]
+      param[14] = ['PageCurrent', this.pageCurrent]
+      param[15] = ['PageSize', this.pageSize]
+      param[16] = ['PageCount', '1111', 'int', '1']
+      param[17] = ['ItemCount', '1111', 'int', '1']
+      var Data = this.CreateData('11', '物料数据_视图_查询', param)
+      this.ExecDatabase(Data).then(response => {
+        if (response.data.result.length !== 0) {
+          this.tableData = response.data.result
+        }
+        this.total = parseInt(response.data.output[0].ItemCount)
+        this.loading = false
+      })
+    },
+    handleSizeChange(val) {
+      this.pageCurrent = 1
+      this.pageSize = val
+      this.selectDate()
+    },
+    handleCurrentChange(val) {
+      this.pageCurrent = val
+      this.selectDate()
+    }
+  }
+}
+</script>
+
+<style scoped>
+  ::v-deep.cell{
+    font-size: large;
+    color: black;
+  }
+  ::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td{
+    background-color: #cedcf3;
+  }
+
+</style>

src/views/OperationGuide/LowerRight/MesWebFun04.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="bolt">
+    <div v-for="(item, index) in greenBoltInformation" :key="index" :style="{display: item.display,left: item.left}" class="green_bolt" />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+export default {
+  name: 'MesWebFun04',
+  data() {
+    return {
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'greenBoltInformation'
+    ])
+  },
+  created() {
+  }
+}
+</script>
+
+<style scoped>
+.green_bolt{
+  width: 75px;
+  height: 75px;
+  position: absolute;
+  top: 37px;
+  background-size: 100% 100%;
+  background-image: url("../../../assets/image/green_bolt.gif")
+}
+.bolt{
+  width: 514px;
+  height: 169px;
+  margin-top: 3px;
+  position: relative;
+  background-size: 100% 100%;
+  background-image: url("../../../assets/image/boltnew.png")
+}
+</style>

src/views/OperationGuide/LowerRight/MesWebFun08.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="bolt">
+    <el-col :span="4" style="height: 100%;">
+      <div class="aaa" />
+      <div style="font-size: 20px;font-weight: bolder;margin-left: 25px">
+        强制匹配
+      </div>
+    </el-col>
+    <el-col :span="10" style="height: 100%;">
+      <div style="margin-top: 20px">
+        <span style="line-height: 20px;font-size: 20px">总装机型:</span>
+        <el-input v-model="engineValue.EngineType" size="small" style="width: 200px;margin-left: 5px" />
+      </div>
+      <div style="margin-top: 20px">
+        <span style="line-height: 20px;font-size: 20px">总装托盘:</span>
+        <el-input v-model="engineValue.PartPalletCode" size="small" style="width: 200px;margin-left: 5px" />
+      </div>
+      <div style="margin-top: 20px">
+        <span style="line-height: 20px;font-size: 20px">总装编号:</span>
+        <el-input v-model="engineValue.EngineID" size="small" style="width: 200px;margin-left: 5px" />
+      </div>
+    </el-col>
+    <el-col :span="10" style="height: 100%;">
+      <div style="margin-top: 20px;margin-left: 2px">
+        <span style="line-height: 20px;font-size: 20px">部装机型:</span>
+        <el-input id="txt_enginetype_subline" v-model="partAssemblyInformation.发动机型号" clearable size="small" style="width: 220px;margin-left: 5px" />
+      </div>
+      <div style="margin-top: 20px;margin-left: 2px">
+        <span style="line-height: 20px;font-size: 20px">部装托盘:</span>
+        <el-input id="txt_num_subline_Pallet" v-model="partAssemblyInformation.托盘号" clearable size="small" style="width: 220px;margin-left: 5px" />
+      </div>
+      <div style="margin-top: 20px;margin-left: 2px">
+        <span style="line-height: 20px;font-size: 20px">部装编号:</span>
+        <el-input id="txt_num_subline" v-model="partAssemblyInformation.发动机号" clearable size="small" style="width: 220px;margin-left: 5px" />
+      </div>
+    </el-col>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+export default {
+  name: 'MesWebFun08',
+  data() {
+    return {
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'engineValue',
+      'partAssemblyInformation'
+    ])
+  },
+  created() {
+  }
+}
+</script>
+
+<style scoped>
+.bolt{
+  width: 100%;
+  height: 169px;
+  margin-top: 3px;
+}
+.aaa{
+  margin: 30px auto 0;
+  width: 118px;
+  height: 100px;
+  background-image: url("../../../assets/image/reset.png");
+}
+</style>

src/views/OperationGuide/LowerRight/MesWebFun22.vue

@@ -0,0 +1,177 @@
+<template>
+  <div class="bolt">
+    <el-col :span="12" style="position: relative;">
+      <div style="font-size: 25px;margin: auto;width: 120px">
+        临时库存
+      </div>
+      <div class="borderLeft" />
+      <div style="position: absolute;  border-right: 1px solid #000000;width: 10px; height: 170px;left: 362px;top: 0px" />
+      <div class="borderLeft" style="top: 105px;" />
+      <div v-for="item in temporaryStock" :id="item.id" :key="item.id" :class="changClass(item)">
+        <div style="margin-left: 25px">
+          {{ item.label }}
+        </div>
+      </div>
+    </el-col>
+    <el-col :span="12" style="position: relative">
+      <div style="font-size: 25px;margin: auto;width: 90px">
+        上料
+      </div>
+      <div class="borderRight" style="left: 18px;" />
+      <div class="borderRight" style="left: 138px;" />
+      <div class="borderRight" style="left: 258px;" />
+      <div style="z-index: 999;position: relative">
+        <div v-for="item in feedingRegion" :id="item.id" :key="item.id" :class="changClass(item)" @click="changeStatus(item)">
+          <div style="margin-left: 25px">
+            {{ item.label }}
+          </div>
+        </div>
+      </div>
+    </el-col>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MesWebFun22',
+  data() {
+    return {
+      temporaryStock: [
+        {
+          id: 'one',
+          label: 1,
+          status: 2
+        }, {
+          id: 'two',
+          label: 2,
+          status: 2
+        }, {
+          id: 'three',
+          label: 3,
+          status: 0
+        }, {
+          id: 'four',
+          label: 4,
+          status: 0
+        }, {
+          id: 'five',
+          label: 5,
+          status: 2
+        }, {
+          id: 'six',
+          label: 6,
+          status: 2
+        }
+      ],
+      feedingRegion: [
+        {
+          id: 'oneRegion',
+          label: 1,
+          status: 0
+        }, {
+          id: 'threeRegion',
+          label: 3,
+          status: 0
+        }, {
+          id: 'fiveRegion',
+          label: 5,
+          status: 2
+        }, {
+          id: 'twoRegion',
+          label: 2,
+          status: 2
+        }, {
+          id: 'fourRegion',
+          label: 4,
+          status: 0
+        }, {
+          id: 'sixRegion',
+          label: 6,
+          status: 0
+        }
+      ]
+    }
+  },
+  methods: {
+    changClass(item) {
+      if (item.status === 0) {
+        return 'dd'
+      } else if (item.status === 2) {
+        return 'green'
+      } else if (item.status === 3) {
+        return 'green_ll'
+      }
+    },
+    changeStatus(item) {
+      for (let i = 0; i < this.feedingRegion.length; i++) {
+        if (this.feedingRegion[i].id === item.id) {
+          if (this.feedingRegion[i].status === 0) {
+            this.feedingRegion[i].status = 3
+          } else if (this.feedingRegion[i].status === 3) {
+            this.feedingRegion[i].status = 0
+          }
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.bolt{
+  width: 100%;
+  height: 169px;
+  margin-top: 3px;
+}
+.green_ll{
+  z-index: 999;
+  float: left;
+  width: 60px;
+  height: 60px;
+  margin: 5px 30px 10px 30px;
+  border-radius: 50%;
+  font-size: 19px;
+  line-height: 60px;
+  background-size: 100% 100%;
+  background-image: url("../../../assets/image/green_bolt.gif")
+}
+.green{
+  z-index: 999;
+  float: left;
+  width: 60px;
+  height: 60px;
+  margin: 5px 30px 10px 30px;
+  border-radius: 50%;
+  font-size: 19px;
+  line-height: 60px;
+  background-size: 100% 100%;
+  background-image: url("../../../assets/image/green.png")
+}
+.dd{
+  z-index: 999;
+  float: left;
+  width: 60px;
+  height: 60px;
+  margin: 5px 30px 10px 30px;
+  border-radius: 50%;
+  font-size: 19px;
+  line-height: 60px;
+  background-size: 100% 100%;
+  background-image: url("../../../assets/image/Init.png")
+}
+.borderRight{
+  position: absolute;
+  border: 2px solid #bfbfbf;
+  width: 80px;
+  height: 140px;
+  border-radius: 20px;
+}
+.borderLeft{
+  position: absolute;
+  border: 2px solid #bfbfbf;
+  width: 320px;
+  height: 65px;
+  left: 18px;
+  border-radius: 20px
+}
+</style>