apt
This commit is contained in:
129
src/pages/shells/config-modal.vue
Normal file
129
src/pages/shells/config-modal.vue
Normal file
@@ -0,0 +1,129 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
title="配置"
|
||||
:visible.sync="dialogVisible"
|
||||
width="50%"
|
||||
:before-close="handleClose">
|
||||
<el-form :model="dataForm" ref="dataForm" :rules="dataRule" label-width="1.1rem" size="mini">
|
||||
<p class="tip">语言选择</p>
|
||||
<el-form-item label="语言" prop="selectedLanguage">
|
||||
<el-select v-model="dataForm.selectedLanguage" placeholder="请选择" style="width: 100%;">
|
||||
<el-option
|
||||
v-for="item in languages"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<p class="tip">参数配置</p>
|
||||
<el-form-item label="调度IP" prop="ip">
|
||||
<el-input placeholder="请输入调度IP" v-model="dataForm.ip" @focus="show" data-layout="normal"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="WIFI" prop="wifi">
|
||||
<el-input placeholder="请输入WIFI" v-model="dataForm.wifi" @focus="show" data-layout="normal"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-row type="flex" justify="space-around" style="margin-top: .3rem">
|
||||
<el-col :span="7"><button class="button_control button_control_disabled" @click="exitUser"><p>取消</p></button></el-col>
|
||||
<el-col :span="7"><button class="button_control" @click="dataFormSubmit"><p>保存</p></button></el-col>
|
||||
</el-row>
|
||||
<vue-touch-keyboard id="keyboard" :options="options" v-if="visible" :layout="layout" :cancel="hide" :accept="accept" :input="input" :next="next" />
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
dataForm: {
|
||||
selectedLanguage: '',
|
||||
ip: '',
|
||||
wifi: ''
|
||||
},
|
||||
dataRule: {
|
||||
ip: [
|
||||
{ required: true, message: '调度IP不能为空', trigger: 'blur' }
|
||||
],
|
||||
wifi: [
|
||||
{ required: true, message: 'WIFI不能为空', trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
languages: [
|
||||
{label: '中文', value: 'zh'},
|
||||
{label: 'English', value: 'en'},
|
||||
{label: 'Español', value: 'es'}
|
||||
],
|
||||
visible: false,
|
||||
layout: 'normal',
|
||||
input: null,
|
||||
options: {
|
||||
useKbEvents: false,
|
||||
preventClickEvent: false
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init () {
|
||||
this.dialogVisible = true
|
||||
},
|
||||
exitUser () {
|
||||
this.dialogVisible = false
|
||||
this.visible = false
|
||||
},
|
||||
dataFormSubmit () {
|
||||
this.dialogVisible = false
|
||||
this.visible = false
|
||||
},
|
||||
handleClose (done) {
|
||||
this.visible = false
|
||||
done()
|
||||
},
|
||||
show (e) {
|
||||
// 关闭中文keyboard
|
||||
let arr = document.querySelectorAll('.hg-theme-default')
|
||||
arr.forEach((ele) => {
|
||||
ele.style.visibility = 'hidden'
|
||||
})
|
||||
this.input = e.target
|
||||
this.layout = e.target.dataset.layout
|
||||
if (!this.visible) {
|
||||
this.visible = true
|
||||
}
|
||||
},
|
||||
hide () {
|
||||
this.visible = false
|
||||
},
|
||||
accept () {
|
||||
this.hide()
|
||||
},
|
||||
next () {
|
||||
let inputs = document.querySelectorAll('input')
|
||||
let found = false;
|
||||
[].forEach.call(inputs, (item, i) => {
|
||||
if (!found && item === this.input && i < inputs.length - 1 && this.input.dataset.next === '1') {
|
||||
found = true
|
||||
this.$nextTick(() => {
|
||||
inputs[i + 1].focus()
|
||||
})
|
||||
}
|
||||
})
|
||||
if (!found) {
|
||||
this.input.blur()
|
||||
this.hide()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.tip
|
||||
font-size .2rem
|
||||
font-weight 700
|
||||
font-family 'SourceHanSansCN-Bold'
|
||||
line-height .2rem
|
||||
color #E54F29
|
||||
margin-bottom .1rem
|
||||
</style>
|
||||
187
src/pages/shells/index.vue
Normal file
187
src/pages/shells/index.vue
Normal file
@@ -0,0 +1,187 @@
|
||||
<template>
|
||||
<div class="zbox body-container" :class="{'enClass': selectType === 'en-us'}">
|
||||
<el-row type="flex" class="header-container" justify="space-between" align="middle">
|
||||
<el-col :span="3">
|
||||
<el-button type="primary" icon="el-icon-s-home" class="button-home" @click="$router.push('/index/home')">主页</el-button>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-row type="flex" justify="end" align="middle">
|
||||
<div class="state-item">自动模式</div>
|
||||
<div class="state-item">执行中</div>
|
||||
<div class="relative elec-qty-wrap">
|
||||
<div class="absolute elec-qty elec-qty_s" style="width: 100%"></div>
|
||||
<div class="absolute zbox elec-qty_border"></div>
|
||||
<div class="elec-txt">100%</div>
|
||||
</div>
|
||||
<i class="el-icon-user-solid icon-user" :style="{'color': isUsed ? '#00ff29' : '#737f92'}" @click="loginModalHandle"></i>
|
||||
<i class="el-icon-s-tools icon-tools" @click="configModalHandle"></i>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="error-tips" ref="scrollContainer" @click="$router.push('/index/warning')">
|
||||
<div class="zbox scroll-text" ref="scrollText">
|
||||
<i class="el-icon-warning icon-warning"></i>
|
||||
<div class="error-tips-t">错误提示：1.障碍物告警 2.定位丢失</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-row type="flex" class="relative main-conatiner">
|
||||
<div class="absolute hud_left"></div>
|
||||
<div class="absolute hud_left hud_right"></div>
|
||||
<router-view></router-view>
|
||||
</el-row>
|
||||
<div class="task-tips">
|
||||
<div class="task-tips-t">A->B->C->D</div>
|
||||
</div>
|
||||
<login-modal v-if="loginVisible" ref="loginModal" @refreshUser="refreshUser"/>
|
||||
<config-modal v-if="configVisible" ref="configModal"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LoginModal from './login-modal.vue'
|
||||
import ConfigModal from './config-modal.vue'
|
||||
export default {
|
||||
components: {
|
||||
LoginModal,
|
||||
ConfigModal
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
loginVisible: false,
|
||||
isUsed: false,
|
||||
configVisible: false
|
||||
}
|
||||
},
|
||||
created () {
|
||||
if (this.$i18n.locale === 'zh-cn') {
|
||||
this.selectType = 'zh-cn'
|
||||
} else if (this.$i18n.locale === 'en-us') {
|
||||
this.selectType = 'en-us'
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.checkTextOverflow()
|
||||
window.addEventListener('resize', this.checkTextOverflow)
|
||||
},
|
||||
beforeDestroy () {
|
||||
window.removeEventListener('resize', this.checkTextOverflow)
|
||||
},
|
||||
methods: {
|
||||
// 滚动区域
|
||||
checkTextOverflow () {
|
||||
const container = this.$refs.scrollContainer
|
||||
const text = this.$refs.scrollText
|
||||
if (!container || !text) return
|
||||
const containerWidth = container.offsetWidth
|
||||
const textWidth = text.scrollWidth
|
||||
if (textWidth > containerWidth) {
|
||||
// 如果文字超出容器宽度，启动滚动动画
|
||||
const duration = (textWidth / containerWidth) * 10
|
||||
text.style.animation = `scrollText ${duration}s linear infinite`
|
||||
} else {
|
||||
// 如果文字没有超出容器宽度，停止滚动动画
|
||||
text.style.animation = 'none'
|
||||
}
|
||||
},
|
||||
// 管理员登录
|
||||
loginModalHandle () {
|
||||
this.loginVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.loginModal.init()
|
||||
})
|
||||
},
|
||||
// 切换登录状态
|
||||
refreshUser (flag) {
|
||||
this.isUsed = flag
|
||||
},
|
||||
// 配置
|
||||
configModalHandle () {
|
||||
this.configVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.configModal.init()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~@style/mixin'
|
||||
.header-container
|
||||
_wh(100%, .48rem)
|
||||
padding 0 2%
|
||||
background top center / 100% 84px url(../../images/new/header_bg_1.png) no-repeat
|
||||
.button-home
|
||||
padding .06rem .1rem
|
||||
background linear-gradient(0deg, #E64F29, rgba(230, 79, 41, 0.5))
|
||||
border-color rgba(230, 79, 41, 0.7)
|
||||
.state-item
|
||||
_wh(.72rem, .3rem)
|
||||
_font(.14rem,.3rem,#fff,,center)
|
||||
font-family 'Adobe Heiti Std'
|
||||
margin-right .04rem
|
||||
background center / 100% 100% url(../../images/new/state-item_bg.png) no-repeat
|
||||
.elec-qty-wrap
|
||||
_wh(.5rem, .28rem)
|
||||
margin-right .04rem
|
||||
z-index 151
|
||||
.elec-qty
|
||||
z-index 152
|
||||
_wh(0, 100%)
|
||||
background-color green
|
||||
background left top url(../../images/new/elec.png) no-repeat
|
||||
background-size cover
|
||||
.elec-qty_s
|
||||
background-image url(../../images/new/elec.png)
|
||||
.elec-qty_border
|
||||
z-index 152
|
||||
background center / 100% 100% url(../../images/new/elec_bg.png) no-repeat
|
||||
.elec-txt
|
||||
position relative
|
||||
z-index 153
|
||||
_font(.15rem, .28rem, #fff,,center)
|
||||
font-family 'Adobe Heiti Std'
|
||||
.icon-user
|
||||
font-size .24rem
|
||||
margin-right .04rem
|
||||
.icon-tools
|
||||
font-size .24rem
|
||||
color #fff
|
||||
cursor pointer
|
||||
.error-tips
|
||||
width 100%
|
||||
height .3rem
|
||||
line-height .3rem
|
||||
overflow hidden
|
||||
white-space nowrap
|
||||
background-color rgba(253, 246, 236, .4)
|
||||
.scroll-text
|
||||
display inline-block
|
||||
text-align center
|
||||
animation none
|
||||
.icon-warning
|
||||
font-size .18rem
|
||||
color #e6a23c
|
||||
.error-tips-t
|
||||
display inline-block
|
||||
font-size .16rem
|
||||
color #e6a23c
|
||||
.task-tips
|
||||
width 100%
|
||||
height .4rem
|
||||
line-height .4rem
|
||||
padding 0 2%
|
||||
background linear-gradient(90deg, #1DB8FF,#1DC5E1, #27C8B0,#819269, #E46355)
|
||||
.task-tips-t
|
||||
_font(.2rem, .4rem, #fff, ,center)
|
||||
.hud_left
|
||||
position absolute
|
||||
left 0
|
||||
top 0
|
||||
_wh(2%, 100%)
|
||||
background center / 100% auto url(../../images/new/hud_left.png) no-repeat
|
||||
.hud_right
|
||||
left auto
|
||||
right 0
|
||||
background-image url(../../images/new/hud_right.png)
|
||||
</style>
|
||||
107
src/pages/shells/login-modal.vue
Normal file
107
src/pages/shells/login-modal.vue
Normal file
@@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
title="管理员认证"
|
||||
:visible.sync="dialogVisible"
|
||||
width="50%"
|
||||
:before-close="handleClose">
|
||||
<p class="tip">暂未登录</p>
|
||||
<el-form :model="dataForm" ref="dataForm" :rules="dataRule" label-width="1.1rem" size="mini">
|
||||
<el-form-item label="管理员密码" prop="password">
|
||||
<el-input placeholder="请输入管理员密码" v-model="dataForm.password" show-password @focus="show" data-layout="normal"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-row type="flex" justify="space-around" style="margin-top: .3rem">
|
||||
<el-col :span="7"><button class="button_control button_control_disabled" @click="exitUser"><p>退出账户</p></button></el-col>
|
||||
<el-col :span="7"><button class="button_control" @click="dataFormSubmit"><p>登录</p></button></el-col>
|
||||
</el-row>
|
||||
<vue-touch-keyboard id="keyboard" :options="options" v-if="visible" :layout="layout" :cancel="hide" :accept="accept" :input="input" :next="next" />
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
dataForm: {
|
||||
password: ''
|
||||
},
|
||||
dataRule: {
|
||||
password: [
|
||||
{ required: true, message: '密码不能为空', trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
visible: false,
|
||||
layout: 'normal',
|
||||
input: null,
|
||||
options: {
|
||||
useKbEvents: false,
|
||||
preventClickEvent: false
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init () {
|
||||
this.dialogVisible = true
|
||||
},
|
||||
exitUser () {
|
||||
this.dialogVisible = false
|
||||
this.visible = false
|
||||
this.$emit('refreshUser', false)
|
||||
},
|
||||
dataFormSubmit () {
|
||||
this.dialogVisible = false
|
||||
this.visible = false
|
||||
this.$emit('refreshUser', true)
|
||||
},
|
||||
handleClose (done) {
|
||||
this.visible = false
|
||||
done()
|
||||
},
|
||||
show (e) {
|
||||
// 关闭中文keyboard
|
||||
let arr = document.querySelectorAll('.hg-theme-default')
|
||||
arr.forEach((ele) => {
|
||||
ele.style.visibility = 'hidden'
|
||||
})
|
||||
this.input = e.target
|
||||
this.layout = e.target.dataset.layout
|
||||
if (!this.visible) {
|
||||
this.visible = true
|
||||
}
|
||||
},
|
||||
hide () {
|
||||
this.visible = false
|
||||
},
|
||||
accept () {
|
||||
this.hide()
|
||||
},
|
||||
next () {
|
||||
let inputs = document.querySelectorAll('input')
|
||||
let found = false;
|
||||
[].forEach.call(inputs, (item, i) => {
|
||||
if (!found && item === this.input && i < inputs.length - 1 && this.input.dataset.next === '1') {
|
||||
found = true
|
||||
this.$nextTick(() => {
|
||||
inputs[i + 1].focus()
|
||||
})
|
||||
}
|
||||
})
|
||||
if (!found) {
|
||||
this.input.blur()
|
||||
this.hide()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.tip
|
||||
font-size .2rem
|
||||
font-weight 700
|
||||
font-family 'SourceHanSansCN-Bold'
|
||||
line-height .2rem
|
||||
color #E54F29
|
||||
margin-bottom .1rem
|
||||
</style>
|
||||
Reference in New Issue
Block a user