init
This commit is contained in:
228
src/pages/Setup.vue
Normal file
228
src/pages/Setup.vue
Normal file
@@ -0,0 +1,228 @@
|
||||
<template>
|
||||
<div class="login-container">
|
||||
<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="body-container">
|
||||
<div class="login_wrap">
|
||||
<div class="login_cnt">
|
||||
<div class="title-name">系统配置</div>
|
||||
<div class="login_card">
|
||||
<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>
|
||||
<div class="select-wraper">
|
||||
<!-- <selectOpt :option="option" :index="index" @change="change"></SelectOpt> -->
|
||||
<el-select v-model="value" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn" @click="_config">配置</button>
|
||||
<!-- <button class="btn" @click="getCc">获取尺寸</button> -->
|
||||
<!-- <div class="submit"><input type="submit" value="配 置" class="btn" @click="_config"></div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SelectOpt from '@components/select.vue'
|
||||
export default {
|
||||
components: {
|
||||
SelectOpt
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
loginname: '',
|
||||
password: '',
|
||||
options: [{value: '1', label: '大屏'}, {value: '2', label: '看板1'}, {value: '3', label: '看板2'}],
|
||||
value: this.$store.getters.equipId,
|
||||
baseUrl: this.$store.getters.baseUrl,
|
||||
setTime: this.$store.getters.setTime / 1000,
|
||||
fullscreen: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getCc () {
|
||||
const screenWidth = window.screen.width
|
||||
const screenHeight = window.screen.height
|
||||
alert('宽：' + screenWidth + ';' + '高：' + screenHeight + ';')
|
||||
},
|
||||
_config () {
|
||||
if (this.setTime > 10800) {
|
||||
this.$message({
|
||||
message: '刷新时间设置过长',
|
||||
type: 'warning'
|
||||
})
|
||||
return
|
||||
}
|
||||
let obj = {
|
||||
baseUrl: this.baseUrl,
|
||||
setTime: this.setTime * 1000,
|
||||
equipId: this.value
|
||||
}
|
||||
this.$store.dispatch('setConfig', obj)
|
||||
if (this.value === '1') {
|
||||
this.$router.push('/home')
|
||||
} else if (this.value === '2') {
|
||||
this.$router.push('/pressprod')
|
||||
} else if (this.value === '3') {
|
||||
this.$router.push('/SortWorkMonitor')
|
||||
}
|
||||
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'
|
||||
.login-container
|
||||
position relative
|
||||
_wh(100%, 100%)
|
||||
z-index 1
|
||||
background center / 100% 100% url('../images/bg.jpg') no-repeat
|
||||
.lizi
|
||||
position absolute
|
||||
top 0
|
||||
left 0
|
||||
z-index 2
|
||||
_wh(100%, 100%)
|
||||
.body-container
|
||||
position relative
|
||||
z-index 3
|
||||
_wh(100%, 100%)
|
||||
_fj(row, center)
|
||||
margin 0 auto
|
||||
.login_wrap
|
||||
width 500px
|
||||
background-color rgba(255, 255, 255, 0.8)
|
||||
border-radius 5px
|
||||
.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
|
||||
width 100%
|
||||
padding 15px
|
||||
.title-name
|
||||
_font(16px, 28px, #000,,center)
|
||||
margin-bottom 10px
|
||||
.login_card
|
||||
width 100%
|
||||
.inputOuter
|
||||
_fj(row)
|
||||
height 40px
|
||||
line-height 40px
|
||||
width 100%
|
||||
margin-bottom 12px
|
||||
.inputStyle
|
||||
_wh(calc(100% - 116px), 40px)
|
||||
font-size 14px
|
||||
background none
|
||||
line-height 40px
|
||||
color #606266
|
||||
padding 0 15px
|
||||
border none
|
||||
box-sizing border-box
|
||||
background-color #ffffff
|
||||
.select-wraper
|
||||
_wh(calc(100% - 116px), 40px)
|
||||
.submit
|
||||
width 100%
|
||||
background-color #2778f3
|
||||
border-radius 3px
|
||||
margin-top 5px
|
||||
.btn
|
||||
background-color #2778f3
|
||||
border-radius 3px
|
||||
margin-top 5px
|
||||
height 40px
|
||||
font-size 18px
|
||||
color #fff
|
||||
line-height 39px
|
||||
width 100%
|
||||
outline none
|
||||
border none
|
||||
font-weight normal
|
||||
label
|
||||
width 115px
|
||||
font-size 15px
|
||||
line-height 40px
|
||||
color #333333
|
||||
.el-select
|
||||
width 100%
|
||||
</style>
|
||||
Reference in New Issue
Block a user