screen-lnsh/src/pages/Setup.vue

<template>
  <div class="login-container">
    <vue-particles
      color="#fff"
      :particleOpacity="0.7"
      :particlesNumber="60"
      shapeType="circle"
      :particleSize="4"
      linesColor="#fff"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="2"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
      class="lizi"
    >
    </vue-particles>
    <div class="body-container">
      <div class="login_wrap">
        <div class="login_cnt">
          <div class="title-name">系统配置</div>
          <div class="login_card">
            <div class="card_wrap">
              <div class="inputOuter">
                <label>域名地址</label>
                <input type="text" class="inputStyle" v-model="baseUrl">
              </div>
              <div class="inputOuter">
                <label>刷新时间</label>
                <input type="number" class="inputStyle" v-model="setTime">
              </div>
              <div class="inputOuter">
                <label>设备看板</label>
                <!-- <select name="equipment" v-model="equipId">
                  <option :value="e.id" v-for="e in equipment" :key="e.id">{{e.name}}</option>
                </select> -->
                <div class="select-wraper">
                  <selectOpt :option="option" :index="index" @change="change"></SelectOpt>
                </div>
              </div>
            </div>
            <div class="submit"><input type="submit" value="配  置" class="btn" @click="_config"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import SelectOpt from '@components/select.vue'
export default {
  components: {
    SelectOpt
  },
  data () {
    return {
      loginname: '',
      password: '',
      // option: [{index: '1', label: '生产统计'}, {index: '2', label: '仓储监控'}, {index: '3', label: '设备监控'}],
      option: [{index: '1', label: '工序生产-左'}, {index: '2', label: '工序生产-右'}],
      index: this.$store.getters.equipId,
      baseUrl: this.$store.getters.baseUrl,
      setTime: this.$store.getters.setTime / 1000,
      fullscreen: false
    }
  },
  mounted () {
    document.getElementsByTagName('body')[0].className = 'login_bg'
  },
  beforeDestroy () {
    document.body.removeAttribute('class', 'login_bg')
  },
  methods: {
    change (e) {
      this.index = e
    },
    _config () {
      let obj = {
        baseUrl: this.baseUrl,
        setTime: this.setTime * 1000,
        equipId: this.index
      }
      this.$store.dispatch('setConfig', obj)
      if (this.index === '1') {
        this.$router.push('/homepageone')
      } else if (this.index === '2') {
        this.$router.push('/homepagetwo')
      }
      // if (this.index === '1') {
      //   this.$router.push('/prodcount')
      // } else if (this.index === '2') {
      //   this.$router.push('/storagemonitor')
      // } else if (this.index === '3') {
      //   this.$router.push('/devicemonitor')
      // }
      let 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 lang="stylus" scoped>
@import '~@css/mixin'
.login-container
  position relative
  _wh(100%, 100%)
  z-index 1
  background url('../assets/images/loginbg.jpg') center center / 100% 100% no-repeat
.lizi
  position absolute
  top 0
  left 0
  z-index 2
  _wh(100%, 100%)
.body-container
  position relative
  z-index 3
  _wh(100%, 100%)
  _fj(row, center)
  margin 0 auto
.login_wrap
  width 500px
  background-color rgba(255, 255, 255, 0.8)
  border-radius 5px
.login_tab
  position relative
  height 50px
  font-size 0
  background-color rgba(255, 255, 255, 0.9)
  border-radius 5px 5px 0 0
.login_tab_item
  float left
  width 50%
  font-size 16px
  line-height 50px
  color #333333
  text-align center
  cursor pointer
.login_tab_line
  position absolute
  width 50%
  height 2px
  background-color #2778f3
  left 0
  bottom 0
.login_cnt
  width 100%
  padding 15px
.title-name
  _font(16px, 28px, #000,,center)
  margin-bottom 10px
.login_card
  width 100%
.inputOuter
  _fj(row)
  height 38px
  line-height 38px
  width 100%
  margin-bottom 12px
.inputStyle, .select-wraper
  _wh(calc(100% - 100px), 38px)
  font-size 15px
  background none
  line-height 38px
  color #999999
  text-indent 10px
  border none
  box-sizing border-box
  background-color #ffffff
.submit
  width 100%
  background-color #2778f3
  border-radius 3px
  margin-top 5px
.btn
  background none
  height 40px
  line-height 39px
  width 100%
  outline none
  font-weight normal
label
  width 100px
  font-size 15px
  line-height 38px
  color #333333
</style>