Files
screenkb-tianneng/src/pages/Setup.vue
2024-08-25 11:32:32 +08:00

157 lines
4.2 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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>