apt
This commit is contained in:
147
src/pages/modules/device.vue
Normal file
147
src/pages/modules/device.vue
Normal file
@@ -0,0 +1,147 @@
|
||||
<template>
|
||||
<el-row type="flex" class="page_container" align="top">
|
||||
<el-col :span="20" class="l_box_w">
|
||||
<el-row type="flex" class="l_box" justify="start" align="top">
|
||||
<el-col class="point_item" v-for="e in dataList" :key="e.point_code">
|
||||
<p>{{ e.point_code }}</p>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row type="flex" class="result_w" justify="space-between" align="middle">
|
||||
<el-col :span="19" class="result_items_w">
|
||||
<el-row type="flex" class="result_items" justify="start" align="top">
|
||||
<el-col class="point_item point_checked point_item_s"><p>A</p></el-col>
|
||||
<i class="el-icon-caret-right icon-caret-right"></i>
|
||||
<el-col class="point_item point_checked point_item_s"><p>B</p></el-col>
|
||||
<i class="el-icon-caret-right icon-caret-right"></i>
|
||||
<el-col class="point_item point_checked point_item_s"><p>C</p></el-col>
|
||||
<i class="el-icon-caret-right icon-caret-right"></i>
|
||||
<el-col class="point_item point_checked point_item_s"><p>D</p></el-col>
|
||||
<i class="el-icon-caret-right icon-caret-right"></i>
|
||||
<el-col class="point_item point_checked point_item_s"><p>E</p></el-col>
|
||||
<i class="el-icon-caret-right icon-caret-right"></i>
|
||||
<el-col class="point_item point_checked point_item_s"><p>F</p></el-col>
|
||||
<i class="el-icon-caret-right icon-caret-right"></i>
|
||||
<el-col class="point_item point_checked point_item_s"><p>G</p></el-col>
|
||||
<i class="el-icon-caret-right icon-caret-right"></i>
|
||||
<el-col class="point_item point_checked point_item_s"><p>H</p></el-col>
|
||||
<i class="el-icon-caret-right icon-caret-right"></i>
|
||||
<el-col class="point_item point_checked point_item_s"><p>B</p></el-col>
|
||||
<i class="el-icon-caret-right icon-caret-right"></i>
|
||||
<el-col class="point_item point_checked point_item_s"><p>C</p></el-col>
|
||||
<i class="el-icon-caret-right icon-caret-right"></i>
|
||||
<el-col class="point_item point_checked point_item_s"><p>D</p></el-col>
|
||||
<i class="el-icon-caret-right icon-caret-right"></i>
|
||||
<el-col class="point_item point_checked point_item_s"><p>E</p></el-col>
|
||||
<i class="el-icon-caret-right icon-caret-right"></i>
|
||||
<el-col class="point_item point_checked point_item_s"><p>F</p></el-col>
|
||||
<i class="el-icon-caret-right icon-caret-right"></i>
|
||||
<el-col class="point_item point_checked point_item_s"><p>G</p></el-col>
|
||||
<i class="el-icon-caret-right icon-caret-right"></i>
|
||||
<el-col class="point_item point_checked point_item_s"><p>H</p></el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<button class="button_control button_control_disabled" style="margin-bottom: .08rem"><p>清空</p></button>
|
||||
<button class="button_control"><p>发送任务</p></button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col :span="4" class="r_box_w">
|
||||
<div class="tip">历史任务</div>
|
||||
<div class="ls_w">
|
||||
<div class="ls_item">A->B->C->D</div>
|
||||
<div class="ls_item">A->B</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
dataList: [{point_code: 'A'}, {point_code: 'B'}, {point_code: 'C'}, {point_code: 'D'}, {point_code: 'E'}, {point_code: 'F'}, {point_code: 'G'}, {point_code: 'H'}]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.l_box_w
|
||||
height 100%
|
||||
overflow hidden
|
||||
.l_box
|
||||
height calc(100% - 1.1rem)
|
||||
overflow-y auto
|
||||
flex-wrap wrap
|
||||
align-content flex-start
|
||||
margin-bottom .1rem
|
||||
.point_item
|
||||
width 19.6%
|
||||
height 0.6rem
|
||||
display flex
|
||||
align-items center
|
||||
justify-content center
|
||||
padding 0.1rem
|
||||
margin-bottom 0.02rem
|
||||
background center / 100% 100% url(../../images/new/bg2.png) no-repeat
|
||||
p
|
||||
font-size .2rem
|
||||
font-family 'SourceHanSansCN-Bold'
|
||||
line-height .2rem
|
||||
color #B4C1D8
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3; /* 定义显示的行数 */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
.point_checked
|
||||
background-image url(../../images/new/bg1.png)
|
||||
p
|
||||
color #3CC1FF
|
||||
.r_box_w
|
||||
margin-left: .1rem
|
||||
background-color #001330
|
||||
box-shadow inset 1px 1px 7px 2px #4d9bcd
|
||||
padding .1rem
|
||||
overflow hidden
|
||||
.tip
|
||||
font-size .16rem
|
||||
color #fff
|
||||
font-family 'YouSheBiaoTiHei'
|
||||
line-height .16rem
|
||||
margin-bottom .2rem
|
||||
.ls_w
|
||||
height calc(100% - .36rem)
|
||||
overflow-y auto
|
||||
.ls_item
|
||||
font-size .15rem
|
||||
line-height .16rem
|
||||
color #3CC1FF
|
||||
padding-bottom .1rem
|
||||
margin-top .1rem
|
||||
border-bottom 1px dashed #457C9B
|
||||
.result_w
|
||||
height 1rem
|
||||
border 1px solid #1E9FE7
|
||||
padding .1rem
|
||||
background-color rgba(10, 73, 164, 80%)
|
||||
.point_item_s
|
||||
width 12%
|
||||
height .4rem
|
||||
p
|
||||
font-size .17rem
|
||||
.icon-caret-right
|
||||
width .3rem
|
||||
font-size .2rem
|
||||
color #fff
|
||||
line-height .4rem
|
||||
.result_items_w
|
||||
height .8rem
|
||||
overflow hidden
|
||||
.result_items
|
||||
flex-wrap wrap
|
||||
align-content flex-start
|
||||
overflow-y auto
|
||||
max-height: 100%;
|
||||
</style>
|
||||
102
src/pages/modules/home.vue
Normal file
102
src/pages/modules/home.vue
Normal file
@@ -0,0 +1,102 @@
|
||||
<template>
|
||||
<el-row type="flex" class="navs_wraper" justify="space-between" align="middle">
|
||||
<el-col :span="7" class="nav_item" v-for="(e, i) in nav" :key="i" :class="'nav_item_' + (i + 1)">
|
||||
<div class="nav_item_i" @click="toPage(e)">
|
||||
<div class="nav_icon"></div>
|
||||
<p>{{ e[$langPre.computedProp('title')] }}</p>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'MinniHome',
|
||||
data () {
|
||||
return {
|
||||
nav: [
|
||||
{title: '操作', zh_title: '操作', en_title: 'Task', router: '/index/device'},
|
||||
{title: '建图', zh_title: '建图', en_title: 'Fault', router: '/mini/errorinfo'},
|
||||
{title: '取消任务', zh_title: '取消任务', en_title: 'Teach', router: '/mini/teach'},
|
||||
{title: '地图', zh_title: '地图', en_title: 'Teach', router: '/mini/teach'}
|
||||
],
|
||||
disabled: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toPage (e) {
|
||||
this.$router.push(e.router)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~@style/mixin'
|
||||
.navs_wraper
|
||||
width 100%
|
||||
padding 0 12%
|
||||
flex-wrap wrap
|
||||
align-content center
|
||||
.nav_item
|
||||
height 35%
|
||||
padding 1.5%
|
||||
color #fff
|
||||
font-size .2rem
|
||||
margin .1rem 0
|
||||
border 1px solid #2f9ae3
|
||||
background-image: linear-gradient(to bottom,transparent 11px,rgba(32, 74, 128, 90%) 1px),
|
||||
linear-gradient(to right,transparent 11px,rgba(32, 74, 128, 90%) 1px);
|
||||
background-size: 12px 12px;
|
||||
background-repeat: repeat;
|
||||
cursor pointer
|
||||
.nav_item_i
|
||||
_fj(center,,column)
|
||||
height 100%
|
||||
padding .1rem
|
||||
background-image linear-gradient(to bottom,rgba(42, 83, 138, 50%), rgba(57, 101, 181, 50%))
|
||||
border-top 2px solid #62b2f0
|
||||
border-left 2px solid #62b2f0
|
||||
box-shadow inset 0 0px 12px 8px rgba(98, 180, 243, 50%)
|
||||
p
|
||||
font-size .3rem
|
||||
line-height 1
|
||||
color #F6F9FE
|
||||
font-family 'YouSheBiaoTiHei'
|
||||
background linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(49,190,255,0.9) 0%, rgba(239,252,254,1) 40%)
|
||||
-webkit-background-clip: text
|
||||
-webkit-text-fill-color: transparent
|
||||
&::before
|
||||
content ''
|
||||
position absolute
|
||||
bottom 0
|
||||
left 0
|
||||
width 100%
|
||||
height 2px
|
||||
background-image linear-gradient(to right,#62b2f0,#b1ebf8)
|
||||
&::after
|
||||
content ''
|
||||
position absolute
|
||||
top 0
|
||||
right 0
|
||||
height 100%
|
||||
width 2px
|
||||
background-image linear-gradient(to bottom,#62b2f0,#b1ebf8)
|
||||
.nav_icon
|
||||
width 40%
|
||||
padding-top 40%
|
||||
border-radius 50%
|
||||
margin-bottom 12%
|
||||
.nav_item_1
|
||||
.nav_icon
|
||||
background #217872 center center / 70% auto url(../../images/new/RF1.png) no-repeat
|
||||
.nav_item_2
|
||||
.nav_icon
|
||||
background #80732F center center / 70% auto url(../../images/new/RF2.png) no-repeat
|
||||
.nav_item_3
|
||||
.nav_icon
|
||||
background #217872 center center / 70% auto url(../../images/new/RF3.png) no-repeat
|
||||
.nav_item_4
|
||||
.nav_icon
|
||||
background #80372D center center / 70% auto url(../../images/new/RF4.png) no-repeat
|
||||
</style>
|
||||
277
src/pages/modules/login/login.vue
Normal file
277
src/pages/modules/login/login.vue
Normal file
@@ -0,0 +1,277 @@
|
||||
<template>
|
||||
<div class="zbox relative body-container" :class="{'enClass': selectType === 'en-us'}">
|
||||
<div class="absolute login-header">
|
||||
<div class="zbox relative login_logo"></div>
|
||||
</div>
|
||||
<div class="absolute login-bottom"></div>
|
||||
<el-row type="flex" class="zbox" justify="center" align="middle">
|
||||
<el-col :span="12">
|
||||
<div class="login-wraper">
|
||||
<el-row type="flex" class="navs-wraper" justify="start" align="start">
|
||||
<button class="nav_item" :class="{'nav_item_active': tab === 0}" @click="toLogin">{{ $t('login.passwordlogin') }}</button>
|
||||
<button class="nav_item" :class="{'nav_item_active': tab === 1}" @click="toSetup">{{ $t('login.configuration') }}</button>
|
||||
</el-row>
|
||||
<div v-show="tab === 0" class="login-content_wraper">
|
||||
<el-row type="flex" class="login-item" justify="space-between">
|
||||
<el-col :span="5" class="login-label" @click="toFocus(1)">{{ $t('common.username') }}</el-col>
|
||||
<el-col :span="19">
|
||||
<keyboard-input
|
||||
inputClass="login-input"
|
||||
keyboardClass="username"
|
||||
:value="username"
|
||||
@inputChange="inputChange"
|
||||
@inputFocus="inputFocus"
|
||||
></keyboard-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row class="login-item">
|
||||
<el-col :span="5" class="login-label" @click="toFocus(2)">{{ $t('login.password') }}</el-col>
|
||||
<el-col :span="19">
|
||||
<input type="password" class="login-input" ref="input2" v-model="password" @focus="show" data-layout="normal">
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row type="flex" justify="center" style="margin-top: .3rem">
|
||||
<el-col :span="8">
|
||||
<button class="button_control" :disabled="disabled" @click="saveLogin"><p>{{ $t('login.login') }}</p></button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div v-show="tab === 1" class="login-content_wraper">
|
||||
<el-row class="login-item">
|
||||
<el-col :span="8" class="login-label" @click="toFocus(3)">{{ $t('login.domainnameaddress') }}</el-col>
|
||||
<el-col :span="16">
|
||||
<input type="text" class="login-input" ref="input3" v-model.trim="baseUrl" @focus="show" data-layout="normal" data-next="1">
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row class="login-item">
|
||||
<el-col :span="8" class="login-label" @click="toFocus(4)">{{ $t('login.refreshtime') }}</el-col>
|
||||
<el-col :span="16">
|
||||
<input type="number" class="login-input" ref="input4" v-model="setTime" @focus="show" data-layout="numeric">
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row type="flex" justify="center" style="margin-top: .3rem">
|
||||
<el-col :span="8">
|
||||
<button class="button_control" @click="saveSetup"><p>{{ $t('login.configuration') }}</p></button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<vue-touch-keyboard id="keyboard" :options="options" v-if="visible" :layout="layout" :cancel="hide" :accept="accept" :input="input" :next="next" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import KeyboardInput from '@components/keyboard-input'
|
||||
import {authlogin} from '@config/getData2.js'
|
||||
import {encrypt} from '../../../main.js'
|
||||
export default {
|
||||
components: {
|
||||
KeyboardInput
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
selectType: '',
|
||||
tab: 0,
|
||||
username: this.$store.getters.defaultUsername,
|
||||
password: this.$store.getters.defaultPassword,
|
||||
baseUrl: this.$store.getters.baseUrl,
|
||||
setTime: this.$store.getters.setTime / 1000,
|
||||
disabled: false,
|
||||
visible: false,
|
||||
layout: 'normal',
|
||||
input: null,
|
||||
options: {
|
||||
useKbEvents: false,
|
||||
preventClickEvent: false
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.$store.dispatch('materObj', {})
|
||||
if (this.$i18n.locale === 'zh-cn') {
|
||||
this.selectType = 'zh-cn'
|
||||
} else if (this.$i18n.locale === 'en-us') {
|
||||
this.selectType = 'en-us'
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
// 点对点项目分辨率 1024 * 768
|
||||
// alert(document.body.clientWidth, 'a')
|
||||
// alert(document.body.clientHeight, 'b')
|
||||
// alert(window.screen.width, 'c')
|
||||
// alert(window.screen.height, 'd')
|
||||
},
|
||||
methods: {
|
||||
toFocus (i) {
|
||||
switch (i) {
|
||||
case 1:
|
||||
this.$refs.input1.focus()
|
||||
break
|
||||
case 2:
|
||||
this.$refs.input2.focus()
|
||||
break
|
||||
case 3:
|
||||
this.$refs.input3.focus()
|
||||
break
|
||||
case 4:
|
||||
this.$refs.input4.focus()
|
||||
break
|
||||
}
|
||||
},
|
||||
toSetup () {
|
||||
this.tab = 1
|
||||
this.hide()
|
||||
},
|
||||
toLogin () {
|
||||
this.tab = 0
|
||||
this.hide()
|
||||
},
|
||||
saveSetup () {
|
||||
let obj = {
|
||||
baseUrl: this.baseUrl,
|
||||
setTime: this.setTime * 1000
|
||||
}
|
||||
this.$store.dispatch('setConfig', obj)
|
||||
this.toLogin()
|
||||
},
|
||||
saveLogin () {
|
||||
this.disabled = true
|
||||
if (!this.username) {
|
||||
// this.toast('请输入用户名')
|
||||
this.toast(this.$t('login.toast1'))
|
||||
this.disabled = false
|
||||
return
|
||||
}
|
||||
if (!this.password) {
|
||||
// this.toast('请输入密码')
|
||||
this.toast(this.$t('login.toast2'))
|
||||
this.disabled = false
|
||||
return
|
||||
}
|
||||
this._authlogin()
|
||||
},
|
||||
async _authlogin () {
|
||||
try {
|
||||
let res = await authlogin(this.username, encrypt(this.password))
|
||||
if (res.code === '1') {
|
||||
let obj = {}
|
||||
obj = Object.assign({}, res.result)
|
||||
this.$store.dispatch('userInfo', JSON.stringify(obj))
|
||||
this.$store.dispatch('setLoginInfo', {username: this.username, password: this.password})
|
||||
this.hide()
|
||||
if (!res.result.user.user.isAdmin) {
|
||||
this.$router.push('/mini/home')
|
||||
} else {
|
||||
this.$router.push('/index/home')
|
||||
}
|
||||
} else {
|
||||
this.Dialog(res.desc)
|
||||
}
|
||||
this.disabled = false
|
||||
} catch (err) {
|
||||
this.disabled = false
|
||||
// this.toast(err)
|
||||
const loading = this.$loading({
|
||||
lock: true,
|
||||
text: this.$t('common.loading'),
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)'
|
||||
})
|
||||
setTimeout(() => {
|
||||
loading.close()
|
||||
}, 4000)
|
||||
}
|
||||
},
|
||||
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()
|
||||
}
|
||||
},
|
||||
inputChange (val) {
|
||||
this.username = val
|
||||
},
|
||||
inputFocus () {
|
||||
this.visible = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~@style/mixin'
|
||||
.login-header
|
||||
top 0
|
||||
_wh(100%, 10vh)
|
||||
background center / 92% 100% url(../../../images/new/login_header_bg.png) no-repeat
|
||||
.login_logo
|
||||
top -14%
|
||||
background center / 33% auto url(../../../images/new/logo.png) no-repeat
|
||||
.login-bottom
|
||||
bottom 0
|
||||
left 25%
|
||||
_wh(50%, 1.75rem)
|
||||
background center / 9rem 100% url(../../../images/new/login_dy.png) no-repeat
|
||||
.login-wraper
|
||||
padding 8% 8.8% 6% 8%
|
||||
background center / 100% 100% url(../../../images/new/login_w_bg.png) no-repeat
|
||||
.navs-wraper
|
||||
height 0.5rem
|
||||
background center / 100% 100% url(../../../images/new/login_nav_bg.png) no-repeat
|
||||
padding-left 2%
|
||||
.nav_item
|
||||
_wh(32%, 64%)
|
||||
padding-left 9%
|
||||
_font(.18rem, 1, #99B1DD,,)
|
||||
font-family 'YouSheBiaoTiHei'
|
||||
background-color transparent
|
||||
&:first-child
|
||||
background center / 100% 100% url(../../../images/new/login_tab.png) no-repeat
|
||||
.nav_item_active
|
||||
color #fff
|
||||
.login-content_wraper
|
||||
padding 5% 5% 5%
|
||||
.login-item
|
||||
margin-bottom .15rem
|
||||
.login-label
|
||||
_font(.16rem, .4rem, #AFBED8,,)
|
||||
.login-input
|
||||
width 100%
|
||||
_font(.15rem, .4rem, #fff,,)
|
||||
background rgba(45,88,184,0.1)
|
||||
border 2px solid #4980BD
|
||||
padding 0 .1rem
|
||||
&:focus
|
||||
background rgba(45,88,184,0.25);
|
||||
border-color #21D0F2
|
||||
</style>
|
||||
40
src/pages/modules/warning.vue
Normal file
40
src/pages/modules/warning.vue
Normal file
@@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<div class="page_container">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
prop="date"
|
||||
label="名称"
|
||||
width="180">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="类别"
|
||||
width="180">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="address"
|
||||
label="说明">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
tableData: [{
|
||||
date: '障碍物告警',
|
||||
name: '一级',
|
||||
address: '车辆避障传感器检测到障碍物，请检查周围环境，移除障碍物。'
|
||||
}, {
|
||||
date: '定位丢失',
|
||||
name: '二级',
|
||||
address: '当前位置定位丢失，恢复定位请拉动车辆到点位上重新上线。'
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
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