1.0
This commit is contained in:
+536
@@ -0,0 +1,536 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user