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>
|
||||
Reference in New Issue
Block a user