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>
              <input type="number" class="inputStyle" v-model="setTime1">
            </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'
export default {
  name: 'Login',
  components: {
    DropdownMenu
  },
  data () {
    return {
      loginname: '',
      password: '',
      drift: 0,
      baseUrl: this.$store.getters.baseUrl,
      setTime: this.$store.getters.setTime / 1000,
      setTime1: this.$store.getters.setTime1 / 1000,
      fullscreen: false,
      heightLimit: false,
      option: [{value: '1', label: '海亮纯铜精密件智能车间生产监控中心'}, {value: '2', label: '海亮纯铜精密件智能车间设备监控中心'}, {value: '3', label: '海亮纯铜精密件智能车间AGV监控中心'}],
      active: this.$store.getters.equipId,
      open: false
    }
  },
  methods: {
    toggleItem () {
      if (!this.open) {
        this.open = true
      } else {
        this.open = false
      }
    },
    dropdownMenu (i) {
      this.active = i + ''
      this.open = false
    },
    _config () {
      let obj = {
        baseUrl: this.baseUrl,
        setTime: this.setTime * 1000,
        setTime1: this.setTime1 * 1000
        // equipId: this.active
      }
      this.$store.dispatch('setConfig', obj)
      this.$router.push('/MonitoringScreen')
      // this.$router.push('/HomeScreen')
      // if (this.active === '0') {
      //   this.$router.push('/MonitoringScreen')
      // } else {
      //   this.$router.push('/devicescreen')
      // }
      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 450px
  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 20px
.card_wrap
  width 100%
.inputOuter
  position relative
  height 38px
  width 100%
  margin-bottom 12px
.inputStyle, select
  width 290px
  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 270px
  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>