screenkb-tianneng/src/pages/Setup.vue

<template>
  <div class="container">
    <!-- <p>width:{{ width }}</p>
    <p>height: {{ height }}</p> -->
    <div class="content">
      <h1>天能涂板暂存库可视化看板</h1>
      <div class="login_wrap">
        <h2>系统配置</h2>
        <div class="zd-row item_wrap">
          <div class="zd-col-8 label">域名地址</div>
          <input type="text" class="input" v-model="baseUrl">
        </div>
        <div class="zd-row item_wrap">
          <div class="zd-col-8 label">刷新时间（秒）</div>
          <input type="number" class="input" v-model="setTime">
        </div>
        <!-- <div class="zd-row item_wrap">
          <div class="zd-col-6 label">设备看板</div>
          <el-select v-model="index" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div> -->
        <div class="zd-row">
          <button class="zd-col-24 btn" @click="_config">配置</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // options: [{value: '1', label: '新-左'}],
      // index: this.$store.getters.equipId,
      baseUrl: this.$store.getters.baseUrl,
      setTime: this.$store.getters.setTime / 1000,
      fullscreen: false,
      width: '',
      height: ''
    }
  },
  methods: {
    checkWH () {
      setTimeout(() => {
        this.width = document.body.clientWidth
        this.height = document.body.clientHeight
      }, 8000)
    },
    _config () {
      if (this.setTime > 10800) {
        this.$message({
          message: '刷新时间设置过长',
          type: 'warning'
        })
        return
      }
      let obj = {
        baseUrl: this.baseUrl,
        setTime: this.setTime * 1000,
        equipId: this.index
      }
      this.$store.dispatch('setConfig', obj)
      this.$router.push('/index')
      // 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 '~@style/mixin'
.container
  _wh(100%, 100%)
  background center / 100% 100% url('../images/bg.jpg') no-repeat
  p
    _font(12px, 12px ,#fff,,)
.content
  position relative
  z-index 1
  top 50%
  left 50%
  width 25%
  min-width 890px
  transform translateX(-50%) translateY(-50%)
h1
  font-size .3rem
  font-family: 'YouSheBiaoTiHei';
  font-weight: 400;
  color: transparent;
  line-height .3rem
  opacity: 0.89;
  background: linear-gradient(0deg, #AAD0F6 0%, #D7E7F5 53.3154296875%, #E0EAF6 100%);
  filter: drop-shadow(#092F6D 1px 4px 1px);
  -webkit-background-clip: text;
  background-clip: text;
  text-align center
  margin-bottom 5%
.login_wrap
  width 100%
  background #103170 center / 100% 100% url('../images/bg-m_2.png') no-repeat
  padding 3% 10% 6% 10%
h2
  _font(.15rem, .15rem, #9BB9DD,700,center)
  margin-bottom 4%
.item_wrap
  background linear-gradient(to bottom, #081438, #0c205a)
  border 1px solid #4a61a5
  padding 2% 2%
  margin-bottom 3%
.label
  _font(.12rem, .25rem, #fff,,left)
.input
  width 100%
  _font(.12rem, .25rem, #fff,,left)
  background-color transparent
.btn
  background-color #2778f3
  border-radius 6px
  height .4rem
  font-size .17rem
  color #fff
  letter-spacing .05rem
  line-height .4rem
  outline none
  border none
</style>