screen-lnsh/src/pages/Setup.vue

<template>
  <div>
    <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="login_wrap">
      <div class="login_cnt clearfix drift">
        <div class="login_card fl">
          <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>
          </div>
          <div class="submit"><input type="submit" value="配  置" class="btn" @click="_config"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data () {
    return {
      loginname: '',
      password: '',
      equipment: [{id: 0, name: '首页'}, {id: 1, name: '仓储监控'}, {id: 2, name: '设备监控'}, {id: 3, name: '物流工艺'}, {id: 4, name: '生产统计'}],
      equipId: Number(this.$store.getters.equipId),
      drift: 0,
      baseUrl: this.$store.getters.baseUrl,
      setTime: this.$store.getters.setTime / 1000,
      fullscreen: false,
      heightLimit: false
    }
  },
  mounted () {
    document.getElementsByTagName('body')[0].className = 'login_bg'
  },
  beforeDestroy () {
    document.body.removeAttribute('class', 'login_bg')
  },
  methods: {
    _config () {
      let obj = {
        baseUrl: this.baseUrl,
        setTime: this.setTime * 1000,
        equipId: this.equipId
      }
      this.$store.dispatch('setConfig', obj)
      if (this.equipId === 0) {
        this.$router.push('/homepage')
      } else if (this.equipId === 1) {
        this.$router.push('/storagemonitor')
      } else if (this.equipId === 2) {
        this.$router.push('/devicemonitor')
      } else if (this.equipId === 3) {
        this.$router.push('/logisticstech')
      } else {
        this.$router.push('/prodcount')
      }
      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>
.login_wrap
  position fixed
  left 50%
  top 50%
  width 410px
  transform translate3d(-50%, -50%, 0)
  background-color rgba(255, 255, 255, 0.8)
  border-radius 5px
  overflow hidden
.height-limit
  height 300px
.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
  position relative
  width 200%
  overflow hidden
.login_card
  width 50%
  padding .3rem
.card_wrap
  overflow hidden
.inputOuter
  position relative
  height 38px
  width 100%
  margin-bottom 12px
  overflow hidden
.inputStyle, select
  width 260px
  font-size 0.16rem
  float right
  background none
  line-height 38px
  height 38px
  color #999999
  text-indent 10px
  border none
  box-sizing border-box
  background-color #ffffff
select
  appearance auto
  outline none
.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
  position absolute
  font-size .16rem
  line-height 38px
  color #333333
  padding-left 5px
</style>