<template>
<view class="znc_weightData">
<view class="znc_weightbody" >
<view class="znc_weightbody_mark" :style="background-color:${weightBgColor};"></view>
<view class="znc_weightTop">
<view class="znc_Weights">
</view>
<view class="znc_currentWeight">
<view class="znc_currentWeight_body">
<text class="znc_currentWeight_value">
{{currentWeight}}
</text>
<text class="znc_currentWeight_unit">
{{$store.state.unit}}
</text>
</view>
</view>
<view class="znc_weightStatus">
<view class="znc_statusItem zero">
<image v-show="zeroStatus == 0" class="znc_statusItem_imag active" :src="require(@/static/${cachedTheme?'dark':'light'}/module/zero_active.png)" mode="aspectFit"></image>
<image v-show="zeroStatus != 0" class="znc_statusItem_imag" :src="require(@/static/${cachedTheme?'dark':'light'}/module/zero_none.png)" mode="aspectFit"></image>
<view v-show="zeroStatus == 0" class="znc_statusItem_shadow"><view class="znc_statusItem_shadow_box zero_shadow"></view></view>
</view>
<view class="znc_statusItem stable">
<image v-show="weightStatus == 0" class="znc_statusItem_imag active" :src="require(@/static/${cachedTheme?'dark':'light'}/module/stable_active.png)" mode="aspectFit"></image>
<image v-show="weightStatus != 0" class="znc_statusItem_imag" :src="require(@/static/${cachedTheme?'dark':'light'}/module/stable_none.png)" mode="aspectFit"></image>
<view v-show="weightStatus == 0" class="znc_statusItem_shadow"><view class="znc_statusItem_shadow_box stable_shadow"></view></view>
</view>
<view class="znc_statusItem overload">
<image v-show="cacheOverLoad != 0" class="znc_statusItem_imag active" :src="require(@/static/${cachedTheme?'dark':'light'}/module/overload_active.png)" mode="aspectFit"></image>
<image v-show="cacheOverLoad == 0" class="znc_statusItem_imag" :src="require(@/static/${cachedTheme?'dark':'light'}/module/overload_none.png)" mode="aspectFit"></image>
<view v-show="cacheOverLoad != 0" class="znc_statusItem_shadow"><view class="znc_statusItem_shadow_box overload_shadow"></view></view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
props:{
lightStatus:{
type:String,
default:'NONE'
},
weightStatus:{
type:Number,
default: 1
}
},
name:"weightData",
data() {
return {
weightBgColor:'rgba(255, 255, 255, 0)',
zeroStatus:0,
currentWeight:'0.00',
getWeightAndZeroStatusTimeID:null
};
},
created() {
if(this.getWeightAndZeroStatusTimeID){
clearInterval(this.getWeightAndZeroStatusTimeID)
this.getWeightAndZeroStatusTimeID = null
}
this.getWeightAndZeroStatusTimeID = setInterval(()=>{
this.getWeightAndZeroStatus()
},50)
},
destroyed() {
if(this.getWeightAndZeroStatusTimeID){
clearInterval(this.getWeightAndZeroStatusTimeID)
this.getWeightAndZeroStatusTimeID = null
}
},
onHide() {
if(this.getWeightAndZeroStatusTimeID){
clearInterval(this.getWeightAndZeroStatusTimeID)
this.getWeightAndZeroStatusTimeID = null
}
},
computed: {
cachedUnit(){
return "Kg"
},
cacheOverLoad(){
return 0;
},
// 缓存theme，避免每次渲染都计算路径
cachedTheme() {
return 'dark';
}
},
watch:{
lightStatus:{
deep:true,
handler(){
let color = "rgba(255, 255, 255, 0)"
switch(this.lightStatus){
// 回到初始化
case "AllOff":
color = "rgba(255, 255, 255, 0)"
break;
//黄灯亮 上称状态
case "YELLOW":
color = "#FFC700"
break;
//闪黄灯 保存中
case "FLASHYELLOW":
color = "#C678DD"
break;
//闪绿 保存成功
case "FLASHGREEN":
color = "#00B26A"
break;
//红灯亮 保存失败
case "RED":
color = "#DC3E3E"
break;
}
this.weightBgColor = color
}
}
},
methods:{
getWeightAndZeroStatus(){
let myCurrentWeight = Math.floor(Math.random() * 1000) + 1;
this.currentWeight = myCurrentWeight;
this.zeroStatus = Number(myCurrentWeight) <= 10 ? 0 : 1
}
}
}
</script>
<style lang="scss" scoped>
.znc_weightData{
padding:0 16rpx;
width: 100%;
display: flex;
align-items: center;
box-sizing: border-box;
color: var(--text-color);
.znc_weightbody{
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content:center;
padding:24rpx;
width: 100%;
background-color: rgba(255, 255, 255, 0.08);
border-radius:24rpx;
box-sizing: border-box;
overflow: hidden;
.znc_weightbody_mark{
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 90%;
height: 100%;
}
.znc_weightTop{
position: relative;
z-index: 2;
height:224rpx;
width: 100%;
display: flex;
align-items: center;
.znc_Weights{
height: 100%;
width: 45%;
display: grid;
grid-template-columns:repeat(3,1fr);
grid-column-gap:32rpx;
.znc_Weight{
padding:0 32rpx 0 48rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
border-radius:40rpx;
background-color: rgba(255, 255, 255, 0.08);
box-sizing: border-box;
.znc_Weight_value{
font-size:44rpx;
margin-bottom:24rpx;
}
.znc_Weight_icon{
width: 48rpx;
height: 48rpx;
}
}
}
.znc_currentWeight{
flex: 1;
height: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
.znc_currentWeight_body{
display: inline-block;
vertical-align:bottom;
.znc_currentWeight_value{
font-size:176rpx;
font-weight: 700;
margin-right:24rpx;
}
.znc_currentWeight_unit{
font-size:75rpx;
font-weight: 700;
}
}
}
.znc_weightStatus{
height: 100%;
display: flex;
flex-direction: column;
align-items:center;
justify-content: space-between;
margin-left:88rpx;
.znc_statusItem{
position: relative;
width: 56rpx;
height: 56rpx;
.znc_statusItem_imag{
width: 100%;
height: 100%;
}
.zero_shadow{
box-shadow: 0px 0px 40rpx 20rpx $znc_zero;
}
.stable_shadow{
box-shadow: 0px 0px 40rpx 20rpx $znc_stable;
}
.overload_shadow{
box-shadow: 0px 0px 40rpx 20rpx $znc_overload;
}
.znc_statusItem_shadow{
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
.znc_statusItem_shadow_box{
width: 1%;
height: 1%;
}
}
}
}
}
}
}
</style>
