240 lines
6.7 KiB
Vue
240 lines
6.7 KiB
Vue
<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>
|
||
<!-- <select name="equipment" v-model="equipId">
|
||
<option :value="e.id" v-for="e in equipment" :key="e.id">{{e.name}}</option>
|
||
</select> -->
|
||
<div class="select-wraper">
|
||
<selectOpt :option="option" :index="index" @change="change"></SelectOpt>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<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: '',
|
||
// option: [{index: '1', label: '生产统计'}, {index: '2', label: '仓储监控'}, {index: '3', label: '设备监控'}],
|
||
option: [{index: '1', label: '首页-左'}, {index: '2', label: '首页-右'}, {index: '3', label: '混碾困料-左'}, {index: '4', label: '混碾困料-右'}, {index: '5', label: '成型-左'}, {index: '6', label: '成型-右'}, {index: '7', label: '烧制干燥-左'}, {index: '8', label: '烧制干燥-右'}, {index: '9', label: '分拣包装-左'}, {index: '10', label: '分拣包装-右'}, {index: '11', label: '工序生产-左'}, {index: '12', label: '工序生产-右'}],
|
||
index: this.$store.getters.equipId,
|
||
baseUrl: this.$store.getters.baseUrl,
|
||
setTime: this.$store.getters.setTime / 1000,
|
||
fullscreen: false
|
||
}
|
||
},
|
||
mounted () {
|
||
document.getElementsByTagName('body')[0].className = 'login_bg'
|
||
},
|
||
beforeDestroy () {
|
||
document.body.removeAttribute('class', 'login_bg')
|
||
},
|
||
methods: {
|
||
change (e) {
|
||
this.index = e
|
||
},
|
||
_config () {
|
||
if (this.setTime > 10800) {
|
||
this.toast('刷新时间设置过长')
|
||
return
|
||
}
|
||
let obj = {
|
||
baseUrl: this.baseUrl,
|
||
setTime: this.setTime * 1000,
|
||
equipId: this.index
|
||
}
|
||
this.$store.dispatch('setConfig', obj)
|
||
if (this.index === '1') {
|
||
this.$router.push('/homepageone')
|
||
} else if (this.index === '2') {
|
||
this.$router.push('/homepagetwo')
|
||
} else if (this.index === '3') {
|
||
this.$router.push('/hnlkone')
|
||
} else if (this.index === '4') {
|
||
this.$router.push('/hnlktwo')
|
||
} else if (this.index === '5') {
|
||
this.$router.push('/takeshapeone')
|
||
} else if (this.index === '6') {
|
||
this.$router.push('/takeshapetwo')
|
||
} else if (this.index === '7') {
|
||
this.$router.push('/firedryone')
|
||
} else if (this.index === '8') {
|
||
this.$router.push('/firedrytwo')
|
||
} else if (this.index === '9') {
|
||
this.$router.push('/sortpackone')
|
||
} else if (this.index === '10') {
|
||
this.$router.push('/sortpacktwo')
|
||
} else if (this.index === '11') {
|
||
this.$router.push('/pdone')
|
||
} else if (this.index === '12') {
|
||
this.$router.push('/pdtwo')
|
||
}
|
||
// if (this.index === '1') {
|
||
// this.$router.push('/prodcount')
|
||
// } else if (this.index === '2') {
|
||
// this.$router.push('/storagemonitor')
|
||
// } else if (this.index === '3') {
|
||
// this.$router.push('/devicemonitor')
|
||
// }
|
||
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 '~@css/mixin'
|
||
.login-container
|
||
position relative
|
||
_wh(100%, 100%)
|
||
z-index 1
|
||
background url('../assets/images/loginbg.jpg') center center / 100% 100% 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 38px
|
||
line-height 38px
|
||
width 100%
|
||
margin-bottom 12px
|
||
.inputStyle, .select-wraper
|
||
_wh(calc(100% - 116px), 38px)
|
||
font-size 15px
|
||
background none
|
||
line-height 38px
|
||
color #999999
|
||
text-indent 10px
|
||
border none
|
||
box-sizing border-box
|
||
background-color #ffffff
|
||
.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-weight normal
|
||
label
|
||
width 115px
|
||
font-size 15px
|
||
line-height 38px
|
||
color #333333
|
||
</style>
|