init

src/components/Back.vue

@@ -0,0 +1,45 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+export default {
+  name: 'Back',
+  data () {
+    return {
+      lockTime: this.$store.getters.lockTime,
+      timeOut: null,
+      actions: ['mouseup', 'mousemove', 'keyup', 'click', 'touchend']
+    }
+  },
+  mounted () {
+    if (Number(this.lockTime) !== 0) {
+      this.isTimeOut()
+    }
+  },
+  methods: {
+    startTimer () {
+      // console.log('8')
+      clearInterval(this.timeOut)
+      this.timeOut = setInterval(() => {
+        this.$router.push({path: '/'})
+        // console.log('time', 1000 * 6 * this.lockTime)
+      }, 1000 * 60 * this.lockTime)
+    },
+    isTimeOut () {
+      this.startTimer()
+      this.actions.forEach(item => {
+        document.body.addEventListener(item, this.startTimer)
+      })
+    }
+  },
+  beforeDestroy () {
+    this.actions.forEach(item => {
+      // console.log(item)
+      document.body.removeEventListener(item, this.startTimer)
+    })
+    clearInterval(this.timeOut)
+    this.timeOut = null
+  }
+}
+</script>

src/components/Modal.vue

@@ -0,0 +1,37 @@
+<template>
+  <div v-show="mdShow" class="message-box__wrapper">
+      <div class="message-box">
+        <div class="message-box__content">
+          <div class="message-box__message"><p>{{message}}</p></div>
+          <div class="message-box__input">
+            <slot></slot>
+          </div>
+        </div>
+        <div class="message-box__btns">
+          <div class="fr">
+            <button class="mgr5 button--primary button--defalut" @click="closeModal">取&nbsp;&nbsp;消</button>
+            <button class="button--primary" @click="comfirm" :disabled="disabled">确&nbsp;&nbsp;定</button>
+          </div>
+        </div>
+      </div>
+    </div>
+</template>
+
+<script>
+export default {
+  name: 'Modal',
+  props: {
+    mdShow: Boolean,
+    message: String,
+    disabled: Boolean
+  },
+  methods: {
+    closeModal () {
+      this.$emit('closeModalCallback')
+    },
+    comfirm () {
+      this.$emit('comfirmCallback', this.type)
+    }
+  }
+}
+</script>

src/components/SecHeader.vue

@@ -0,0 +1,67 @@
+<template>
+  <div>
+    <header>
+      <div class="fl header-tip">设备：{{deviceCode}}</div>
+      <button class="fr button--primary header-btn" @click="goBack">返&nbsp;&nbsp;回</button>
+    </header>
+    <ul v-if="tabShow" class="tabs">
+      <li v-for="i in menus" :key="i.index">
+        <router-link :to="i.router" :class="{'router-link-active': i.index === activeIndex}">{{i.label}}</router-link>
+      </li>
+    </ul>
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Assignment',
+  props: {
+    deviceCode: String,
+    activeIndex: String,
+    tabShow: {
+      type: Boolean,
+      default: true
+    },
+    inner: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      menus: [
+        {
+          label: '工单操作',
+          index: '1',
+          router: '/operation'
+        },
+        {
+          label: '残次品上报',
+          index: '2',
+          router: '/ungraded'
+        },
+        // {
+        //   label: '状态设置',
+        //   index: '3',
+        //   router: '/stateset'
+        // },
+        {
+          label: '工单查询',
+          index: '4',
+          router: '/opersearch'
+        }
+      ]
+    }
+  },
+  methods: {
+    goBack () {
+      if (this.inner) {
+        this.$emit('goIn')
+      } else {
+        this.$router.push('/home')
+      }
+    }
+  }
+}
+</script>

src/components/alert.vue

@@ -0,0 +1,116 @@
+<template>
+  <div>
+    <transition name="bounce">
+      <div class="alert-wrap">
+        <div class="text">{{alertMsg}}</div>
+        <div class="hairline--top">
+          <button class="button--large" @click="onClose"><span>确认</span></button>
+        </div>
+      </div>
+    </transition>
+    <transition name="fade">
+      <div class="overlay"></div>
+    </transition>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+export default {
+  data () {
+    return {}
+  },
+  computed: mapState({
+    alertMsg: state => state.com.alertMsg
+  }),
+  methods: {
+    onClose () {
+      this.$store.dispatch('showAlert', false)
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.bounce-enter {
+  opacity 0
+  transform translate3d(-50%, -50%, 0) scale(0.7)
+}
+.bounce-leave-active {
+  opacity 0
+  transform translate3d(-50%, -50%, 0) scale(0.9)
+}
+.fade-enter-active
+  animation 0.3s fade-in
+.fade-leave-active
+  animation 0.3s fade-out
+.overlay
+  position fixed
+  top 0
+  left 0
+  width 100%
+  height 100%
+  background-color rgba(0, 0, 0, 0.7)
+  z-index 2012
+.alert-wrap
+  position fixed
+  top 50%
+  left 50%
+  width 45%
+  transition .3s
+  transform translate3d(-50%, -50%, 0)
+  overflow hidden
+  border-radius 4px
+  border 1px solid #ebeef5
+  background-color #fff
+  box-shadow 0 2px 12px 0 rgba(0,0,0,.3)
+  font-size .28rem
+  line-height .42rem
+  color #929292
+  z-index 2018
+.text
+  padding .1rem
+  max-height 60vh
+  overflow-y auto
+  text-align center
+  -webkit-overflow-scrolling touch
+  white-space pre-wrap
+  color #606266
+[class*='hairline']
+  position relative
+[class*='hairline']::after
+  content ' '
+  position absolute
+  pointer-events none
+  box-sizing border-box
+  top -50%
+  left -50%
+  right -50%
+  bottom -50%
+  transform scale(0.5)
+  border 0 solid #ebedf0
+.hairline--top::after
+  border-top-width 1px
+.button--large
+  width 100%
+  height .5rem
+  line-height .5rem
+  color #e74f1a
+  background-color #2778f3
+</style>

src/components/loading.vue

@@ -0,0 +1,30 @@
+<template>
+<div class="loading">
+  <div class="loader-inner">
+    <img src="../images/oval-white.svg">
+  </div>
+</div>
+</template>
+
+<style lang="stylus" scoped>
+.loading
+    position fixed
+    width 100%
+    height 100%
+    z-index 100000
+.loader-inner
+    position absolute
+    z-index 100000
+    height 50px
+    width 50px
+    padding 10px
+    transform translate(-25px, -25px)
+    left 50%
+    top 50%
+    overflow hidden
+    background-color rgba(0, 0, 0, .5)
+    border-radius 3px
+img
+    width 100%
+    height 100%
+</style>

src/components/toast.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="toast">
+    <div class="toast-wrap">
+      <div class="text">
+        {{toastMsg}}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+export default {
+  data () {
+    return {}
+  },
+  computed: mapState({
+    toastMsg: state => state.com.toastMsg
+  })
+}
+</script>
+
+<style lang="stylus" scoped>
+.toast
+  .toast-wrap
+    position fixed
+    z-index 10000
+    width 100%
+    height .5rem
+    line-height .5rem
+    text-align center
+    left 50%
+    top 50%
+    transform translate(-50%, -50%)
+    .text
+      display inline-block
+      width auto
+      text-align center
+      padding 0 .1rem
+      border-radius 10px
+      background #a2a6ae
+      font-size .2rem
+      color #fff
+</style>