|
|
|
@ -3,6 +3,7 @@ import { getStatus, sync } from 'apis/system' |
|
|
|
import autoIcon from 'assets/images/auto.svg' |
|
|
|
import logoutIcon from 'assets/images/logout.svg' |
|
|
|
import manualIcon from 'assets/images/manual.svg' |
|
|
|
import powerIcon from 'assets/images/power.svg' |
|
|
|
import FtDatetime from 'components/common/FTDatetime/index.vue' |
|
|
|
import Check from 'components/system/Check/index.vue' |
|
|
|
import Delay from 'components/system/Delay/index.vue' |
|
|
|
@ -163,6 +164,15 @@ const delayVisible = ref(false) |
|
|
|
const changeDelay = () => { |
|
|
|
delayVisible.value = true |
|
|
|
} |
|
|
|
|
|
|
|
const remoteControlState = computed(() => { |
|
|
|
return systemStore.systemStatus.remoteControlState |
|
|
|
// return { |
|
|
|
// connected: true, // 链接状态 |
|
|
|
// batteryLevel: 100, // 当前电量 % |
|
|
|
// charging: true, // 是否正在充电 |
|
|
|
// } |
|
|
|
}) |
|
|
|
</script> |
|
|
|
|
|
|
|
<template lang="pug"> |
|
|
|
@ -180,6 +190,11 @@ const changeDelay = () => { |
|
|
|
) |
|
|
|
| {{ item?.meta?.title }} |
|
|
|
div(class="header-right") |
|
|
|
div.power-box(v-if="remoteControlState.connected") |
|
|
|
div.bg-box(:style="`width: ${remoteControlState.batteryLevel}%; background: ${remoteControlState.batteryLevel === 100 ? '#1dbb1d' : remoteControlState.batteryLevel >20 ? '#1989FA' : 'red'} `") |
|
|
|
span.power-num {{remoteControlState.batteryLevel}} |
|
|
|
img(:src="powerIcon" alt="" v-show="remoteControlState.charging") |
|
|
|
|
|
|
|
el-dropdown(class="wifi-dropdown" trigger="click") |
|
|
|
div(class="wifi-icon") |
|
|
|
img(v-if="isClose" src="../assets/images/wifi.svg" alt="") |
|
|
|
@ -243,6 +258,31 @@ const changeDelay = () => { |
|
|
|
</template> |
|
|
|
|
|
|
|
<style scoped lang="stylus"> |
|
|
|
.power-box |
|
|
|
height 20px |
|
|
|
width 45px |
|
|
|
background-color rgba(0,0,0,0.1) |
|
|
|
border-radius 5px |
|
|
|
position relative |
|
|
|
display flex |
|
|
|
align-items center |
|
|
|
justify-content center |
|
|
|
padding 0 2px |
|
|
|
color #fff |
|
|
|
overflow hidden |
|
|
|
.bg-box |
|
|
|
height 100% |
|
|
|
background-color green |
|
|
|
position absolute |
|
|
|
top 0 |
|
|
|
left 0 |
|
|
|
.power-num |
|
|
|
z-index 10 |
|
|
|
img |
|
|
|
z-index: 10; |
|
|
|
height 80% |
|
|
|
margin-top 1px |
|
|
|
margin-left 2px |
|
|
|
.main |
|
|
|
box-sizing border-box |
|
|
|
height 100% |
|
|
|
@ -275,13 +315,15 @@ const changeDelay = () => { |
|
|
|
transform rotate(90deg) |
|
|
|
transition all 0.3s |
|
|
|
.menu-box |
|
|
|
width 100% |
|
|
|
width 70% |
|
|
|
display flex |
|
|
|
justify-content center |
|
|
|
.header-right |
|
|
|
display flex |
|
|
|
align-items center |
|
|
|
justify-content flex-end |
|
|
|
height 100% |
|
|
|
width 200px |
|
|
|
.wifi-dropdown |
|
|
|
height 100% |
|
|
|
.wifi-icon |
|
|
|
|
