screen-hl-one/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>
              <button class="btn btn1 fr" @click="_queryDevice()">查找</button>
              <div class="fr select_wrap">
                <dropdown-menu
                  :option="option"
                  :active="active"
                  :open="open"
                  @toggleItem="toggleItem"
                  @dropdownMenu="dropdownMenu">
                </dropdown-menu>
              </div>
            </div>
          </div>
          <div class="submit"><input type="submit" value="配  置" class="btn" @click="_config"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import DropdownMenu from '@components/DropdownMenu.vue'
import {queryDevice} from '@js/getData2.js'
export default {
  name: 'Login',
  components: {
    DropdownMenu
  },
  data () {
    return {
      loginname: '',
      password: '',
      drift: 0,
      baseUrl: this.$store.getters.baseUrl,
      setTime: this.$store.getters.setTime,
      fullscreen: false,
      heightLimit: false,
      option: [],
      active: '',
      open: false
    }
  },
  mounted () {
    document.getElementsByTagName('body')[0].className = 'login_bg'
  },
  beforeDestroy () {
    document.body.removeAttribute('class', 'login_bg')
  },
  methods: {
    async _queryDevice () {
      let res = await queryDevice(this.baseUrl)
      if (res.code === '1') {
        this.toast(res.desc)
        this.option = [...res.rows]
        if (this.$store.getters.equipId) {
          this.option.map((el, i) => {
            if (this.$store.getters.equipId === el.value) {
              this.active = i + ''
            }
          })
        }
      }
    },
    toggleItem () {
      if (!this.open) {
        this.open = true
      } else {
        this.open = false
      }
    },
    dropdownMenu (i) {
      this.active = i + ''
      this.open = false
    },
    _config () {
      if (this.active === '') {
        this.toast('请选择配粉工位')
        return
      }
      let obj = {
        baseUrl: this.baseUrl,
        setTime: this.setTime,
        equipId: this.option[this.active].value
      }
      this.$store.dispatch('setConfig', obj)
      if (this.equipId === 1) {
        this.$router.push('/taskscreen')
      } else {
        this.$router.push('/taskscreen')
      }
      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
.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%
.login_card
  width 50%
  padding .3rem
.card_wrap
  width 100%
.inputOuter
  position relative
  height 38px
  width 100%
  margin-bottom 12px
.inputStyle, select
  width 260px
  font-size 16px
  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-size 16px
  font-weight normal
label
  position absolute
  font-size 16px
  line-height 38px
  color #333333
  padding-left 5px
.select_wrap
  width 200px
  height 38px
  line-height 38px
  font-size 16px
.btn1
  outline none
  border none
  width 50px
  height inherit
  background-color #2778f3
  border-radius 3px
  margin-left 10px
  font-size 14px
  color #fff
  line-height inherit
</style>