536 lines
15 KiB
Vue
536 lines
15 KiB
Vue
<template>
|
|
<view class="page" ref="page">
|
|
<page-header></page-header>
|
|
<view class="content">
|
|
<uni-row :gutter="12">
|
|
<uni-col :span="12">
|
|
<uni-row :gutter="12">
|
|
<uni-col :span="8">
|
|
<view class="block">
|
|
<view class="title">
|
|
<span>{{ temprator }}</span>
|
|
<span>°C</span>
|
|
</view>
|
|
<span>温度</span>
|
|
</view>
|
|
</uni-col>
|
|
<uni-col :span="8">
|
|
<view class="block">
|
|
<view class="title">
|
|
<span>{{ humidity }}</span>
|
|
<span>%RH</span>
|
|
</view>
|
|
<span>湿度</span>
|
|
</view>
|
|
</uni-col>
|
|
<uni-col :span="8">
|
|
<view class="block">
|
|
<view class="title">
|
|
<span>{{ pressure }}</span>
|
|
<span>Pa</span>
|
|
</view>
|
|
<span>压差</span>
|
|
</view>
|
|
</uni-col>
|
|
</uni-row>
|
|
</uni-col>
|
|
<uni-col :span="12">
|
|
<uni-row :gutter="12">
|
|
<uni-col :span="12">
|
|
<view class="block">
|
|
<template v-if="connect">
|
|
<view class="tag">
|
|
<span class="icon wifi"></span>
|
|
</view>
|
|
<span>联网中</span>
|
|
</template>
|
|
<template v-else>
|
|
<view class="tag">
|
|
<span class="icon nowifi"></span>
|
|
</view>
|
|
<span>未连接</span>
|
|
</template>
|
|
</view>
|
|
</uni-col>
|
|
<uni-col :span="12">
|
|
<view class="block">
|
|
<template v-if="clean">
|
|
<view class="tag" @click="cleanMode(false)">
|
|
<span class="icon clean"></span>
|
|
</view>
|
|
<span>清扫模式</span>
|
|
</template>
|
|
<template v-else>
|
|
<view class="tag" @click="cleanMode(true)">
|
|
<span class="icon autorun"></span>
|
|
</view>
|
|
<span>自动模式</span>
|
|
</template>
|
|
</view>
|
|
</uni-col>
|
|
</uni-row>
|
|
</uni-col>
|
|
</uni-row>
|
|
|
|
<view class="column">
|
|
<view class="list" v-for="(item, index) in list" :key="index">
|
|
<uni-row style="width: 100%;text-align: left;display: flex;">
|
|
<uni-col style="flex: 0 0 60px;">
|
|
<uni-row type="flex" justify="center" align="middle" style="height: 40px;">
|
|
<span class="circle">{{ index+1 }}</span>
|
|
</uni-row>
|
|
</uni-col>
|
|
<uni-col style="flex: 1;">
|
|
<uni-row v-if="item.content[0].ic" class="info" :class="{
|
|
'over': item.content[0].isWarning == 'over', 'near': item.content[0].isWarning == 'near'
|
|
}">
|
|
<view>
|
|
{{ item.content[0].ic }}
|
|
</view>
|
|
<view>
|
|
{{ item.content[0].text }}
|
|
</view>
|
|
</uni-row>
|
|
<uni-row v-else class="info">
|
|
<span class="out-text">已取出</span>
|
|
</uni-row>
|
|
</uni-col>
|
|
<uni-col style="flex: 0 0 20px;text-align:left;">
|
|
<span class="space"></span>
|
|
</uni-col>
|
|
<uni-col style="flex: 1;">
|
|
<uni-row v-if="item.content[1].ic" class="info" :class="{
|
|
'over': item.content[1].isWarning == 'over', 'near': item.content[1].isWarning == 'near'}">
|
|
<view>
|
|
{{ item.content[1].ic }}
|
|
</view>
|
|
<view>
|
|
{{ item.content[1].text }}
|
|
</view>
|
|
</uni-row>
|
|
<uni-row v-else>
|
|
<span class="out-text">已取出</span>
|
|
</uni-row>
|
|
</uni-col>
|
|
</uni-row>
|
|
</view>
|
|
</view>
|
|
<uni-row :gutter="12" class="bottom">
|
|
<uni-col :span="6">
|
|
<view class="block">
|
|
<view class="tag" @click="lightClick">
|
|
<span class="icon light"></span>
|
|
<template v-if="light">
|
|
<span class="tag-text active">开启</span>
|
|
</template>
|
|
<template v-else>
|
|
<span class="tag-text">关闭</span>
|
|
</template>
|
|
</view>
|
|
<span>照明</span>
|
|
</view>
|
|
</uni-col>
|
|
<uni-col :span="6">
|
|
<view class="block">
|
|
<view class="tag" @click="doorClick">
|
|
<span class="icon door"></span>
|
|
<template v-if="door">
|
|
<span class="tag-text active">开启</span>
|
|
</template>
|
|
<template v-else>
|
|
<span class="tag-text">关闭</span>
|
|
</template>
|
|
</view>
|
|
<span>开门</span>
|
|
</view>
|
|
</uni-col>
|
|
<uni-col :span="6">
|
|
<view class="block">
|
|
<view class="tag" @click="disinfectClick">
|
|
<span class="icon xiaodu"></span>
|
|
<template v-if="disinfect">
|
|
<span class="tag-text active">开启</span>
|
|
</template>
|
|
<template v-else>
|
|
<span class="tag-text">关闭</span>
|
|
</template>
|
|
</view>
|
|
<span>消毒</span>
|
|
</view>
|
|
</uni-col>
|
|
<uni-col :span="6">
|
|
<view class="block">
|
|
<view class="tag" @click="vacuumClick">
|
|
<span class="icon zhenkong"></span>
|
|
<template v-if="vacuum">
|
|
<span class="tag-text active">开启</span>
|
|
</template>
|
|
<template v-else>
|
|
<span class="tag-text">关闭</span>
|
|
</template>
|
|
</view>
|
|
<span>真空</span>
|
|
</view>
|
|
</uni-col>
|
|
</uni-row>
|
|
</view>
|
|
<notice ref="notice"></notice>
|
|
<page-footer></page-footer>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import PageHeader from '@/components/PageHeader.vue'
|
|
import PageFooter from '@/components/PageFooter.vue'
|
|
import Notice from '@/components/Notice.vue'
|
|
import { formatDateTime, getTimeDifference } from '@/utils/common.js'
|
|
import { getDataList } from '@/db/sqlite.js'
|
|
import cmd from '@/utils/cmd.js'
|
|
import storage from '@/utils/storage.js'
|
|
export default {
|
|
components: {
|
|
PageFooter, PageHeader, Notice
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
list: [
|
|
// {title: '1', content: [{
|
|
// ic: 'SN00394280', text: '已存入：32h 42m', isWarning: true
|
|
// }]},
|
|
],
|
|
timer: null, // 定时器
|
|
timeouter: null, // 延时器
|
|
}
|
|
},
|
|
computed: {
|
|
// 存储临期
|
|
endoNear() {
|
|
return this.$store.state.run.endoNear
|
|
},
|
|
// 存储超期
|
|
endoOver() {
|
|
return this.$store.state.run.endoOver
|
|
},
|
|
temprator() {
|
|
return this.$store.state.sensor.temp
|
|
},
|
|
humidity() {
|
|
return this.$store.state.sensor.humi
|
|
},
|
|
pressure() {
|
|
return this.$store.state.sensor.pressure
|
|
},
|
|
disinfect() {
|
|
// 消毒
|
|
return this.$store.state.relay.disinfect
|
|
},
|
|
vacuum() {
|
|
//真空
|
|
return this.$store.state.relay.vacuum
|
|
},
|
|
light() {
|
|
// 照明
|
|
return this.$store.state.relay.light
|
|
},
|
|
door() {
|
|
// 照明
|
|
return this.$store.state.relay.door
|
|
},
|
|
clean() {
|
|
// 清扫模式
|
|
return this.$store.state.clean
|
|
},
|
|
connect() {
|
|
// 联网状态
|
|
return this.$store.state.connect
|
|
}
|
|
},
|
|
watch: {},
|
|
onBackPress(option) {
|
|
uni.redirectTo({ url: '/pages/start', animationType: 'fade-out' })
|
|
return true;
|
|
},
|
|
onLoad() {
|
|
|
|
},
|
|
onShow() {
|
|
uni.$on('notice', (data) => { this.showNotice(data) })
|
|
this.getData()
|
|
this.startTimer()
|
|
},
|
|
onHide() {
|
|
uni.$off('notice')
|
|
this.clearTimer()
|
|
},
|
|
methods: {
|
|
startTimer() {
|
|
this.timer = setInterval(() => {
|
|
this.getData()
|
|
}, 60000)
|
|
},
|
|
clearTimer() {
|
|
clearInterval(this.timer)
|
|
},
|
|
showNotice(data) {
|
|
this.$nextTick(() => {
|
|
this.$refs.notice.open({
|
|
title: data.title || '',
|
|
content: data.content || '',
|
|
})
|
|
this.clearTimer()
|
|
this.getData()
|
|
this.startTimer()
|
|
})
|
|
},
|
|
async getData() {
|
|
let res = await getDataList('scope', 1, 16, 'key', 'asc')
|
|
if (res) {
|
|
this.handleData(res.list)
|
|
}
|
|
},
|
|
handleData(list) {
|
|
// console.log('handleData', list)
|
|
let data = []
|
|
for (let i = 0; i < 8; i++) {
|
|
data.push({ title: i + 1, content: [
|
|
{ic: '', text: '', isWarning: false},
|
|
{ic: '', text: '', isWarning: false}
|
|
]})
|
|
}
|
|
this.list = data
|
|
|
|
for (let key = 0; key < list.length; key++) {
|
|
let i = list[key]
|
|
// 与当前时间差
|
|
let diff = getTimeDifference(formatDateTime(i.time), formatDateTime())
|
|
let title = parseInt(key/2)
|
|
let diffText = '已存入：' + diff.hours + 'h ' + diff.minutes + 'm'
|
|
|
|
// 偶数数据
|
|
let content = key%2 == 0 ? this.list[title].content[0] : this.list[title].content[1]
|
|
|
|
content.ic = i.ic
|
|
content.text = ''
|
|
content.isWarning = false
|
|
if (i.ic != '') {
|
|
content.text = diffText
|
|
if (diff.hours >= this.endoNear) {
|
|
content.isWarning = 'near'
|
|
}
|
|
if (diff.hours >= this.endoOver) {
|
|
content.isWarning = 'over'
|
|
}
|
|
}
|
|
}
|
|
},
|
|
lightClick() {
|
|
let light = this.$store.state.relay.light
|
|
cmd.Light(!light)
|
|
},
|
|
doorClick() {
|
|
// 调试手动关门
|
|
// let door = this.$store.state.relay.door
|
|
// cmd.Door(true)
|
|
},
|
|
disinfectClick() {
|
|
// 消毒手动开启
|
|
if (this.$store.state.relay.disinfect == true) {
|
|
return false
|
|
}
|
|
let timer = this.$store.state.run.disinfectTime * 60 * 1000
|
|
clearTimeout(this.timeouter)
|
|
this.$store.state.autoDisinfect = false
|
|
cmd.Disinfect(true)
|
|
cmd.Wind(true)
|
|
this.timeouter = setTimeout(() => {
|
|
// 延时关闭
|
|
this.$store.state.autoDisinfect = true
|
|
cmd.Disinfect(false)
|
|
}, timer)
|
|
},
|
|
vacuumClick() {
|
|
|
|
},
|
|
cleanMode(status) {
|
|
this.$store.state.clean = status
|
|
uni.showToast({
|
|
title: '已切换至' + (status ? '清扫模式' : '自动模式'),
|
|
icon: 'none'
|
|
})
|
|
}
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.page{
|
|
/* padding: 10px; */
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.content{
|
|
flex: 1;
|
|
display: flex;
|
|
width: 100%;
|
|
height: 100%;
|
|
flex-direction: column;
|
|
padding: 10px 20px;
|
|
}
|
|
.block {
|
|
height: 120px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
border-radius: 15px;
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
|
padding: 6px;
|
|
background: linear-gradient(180deg, #1C1F31 2%, #0A0D1B 100%);
|
|
box-sizing: border-box;
|
|
/* border: 1px solid; */
|
|
border-image: linear-gradient(180deg, rgba(151, 149, 182, 0.41) 0%, #2A2D3D 100%) 1;
|
|
color: #fff;
|
|
}
|
|
.bottom .block {
|
|
height: 100px;
|
|
}
|
|
|
|
.block view.title span:first-child{
|
|
font-size: 28px;
|
|
font-weight: 500;
|
|
line-height: 36px;
|
|
}
|
|
.block view.title > span {
|
|
clear: both;
|
|
display: block;
|
|
}
|
|
.block > span:last-child{
|
|
font-size: 16px;
|
|
font-weight: normal;
|
|
line-height: 24px;
|
|
color: #C9C9C9;
|
|
}
|
|
.tag {
|
|
display: flex;
|
|
flex-direction: row;
|
|
/* margin-right: 10px; */
|
|
width: 100%;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
padding-top: 10px;
|
|
}
|
|
.tag .icon{
|
|
width:32px;
|
|
height:32px;
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
.tag .icon.xiaodu{
|
|
background-image: url("@/assets/xiaodu.png");
|
|
}
|
|
.tag .icon.zhenkong{
|
|
background-image: url("@/assets/zhenkong.png");
|
|
}
|
|
.tag .icon.light{
|
|
background-image: url("@/assets/light.png");
|
|
}
|
|
.tag .icon.door{
|
|
background-image: url("@/assets/door.png");
|
|
}
|
|
.tag .icon.wifi{
|
|
background-image: url("@/assets/wifi.png");
|
|
background-size: 100% auto;
|
|
margin-left: 50%;
|
|
}
|
|
.tag .icon.autorun{
|
|
background-image: url("@/assets/autorun.png");
|
|
background-size: 100% auto;
|
|
margin-left: 50%;
|
|
}
|
|
.tag .icon.nowifi{
|
|
background-image: url("@/assets/nowifi.png");
|
|
background-size: 100% auto;
|
|
margin-left: 50%;
|
|
}
|
|
.tag .icon.clean{
|
|
background-image: url("@/assets/clean.png");
|
|
background-size: 100% auto;
|
|
margin-left: 50%;
|
|
}
|
|
|
|
.tag .tag-text{
|
|
height: 24px;
|
|
line-height: 24px;
|
|
font-size: 14px;
|
|
width: 50px;
|
|
border-radius: 50px;
|
|
background: #777D90;
|
|
}
|
|
.tag .tag-text.active{
|
|
background: #00921c;
|
|
}
|
|
|
|
|
|
.column{
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
height: 100%;
|
|
margin: 16px 0;
|
|
}
|
|
|
|
.list{
|
|
display: flex;
|
|
height: 75px;
|
|
width: 100%;
|
|
/* border: 1px solid #C9C9C9; */
|
|
border-radius: 15px;
|
|
background: linear-gradient(180deg, #1C1F31 2%, #0A0D1B 100%);
|
|
box-sizing: border-box;
|
|
border: 1px solid #9795B6;
|
|
border-image: linear-gradient(180deg, rgba(151, 149, 182, 0.41) 0%, #2A2D3D 100%);
|
|
padding: 10px;
|
|
box-sizing: border-box;
|
|
align-items: center;
|
|
}
|
|
|
|
.circle{
|
|
width: 24px;
|
|
height: 24px;
|
|
font-size: 20px;
|
|
line-height: 24px;
|
|
border-radius: 50%;
|
|
margin-right: 10px;
|
|
border: 1px solid #fff;
|
|
color: #fff;
|
|
display: inline-block;
|
|
text-align: center;
|
|
}
|
|
.space{
|
|
border-right: 1px solid #fff;
|
|
height: 40px;
|
|
display: inline-block;
|
|
}
|
|
.info {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
font-size: 20px;
|
|
line-height: 20px;
|
|
text-align: left;
|
|
color: #fff;
|
|
}
|
|
.info.near{
|
|
color: #FFC300;
|
|
}
|
|
.info.over{
|
|
color: red;
|
|
}
|
|
.out-text{
|
|
color: #777D90;
|
|
font-size: 20px;
|
|
}
|
|
|
|
</style> |