<template>
|
<view class="container">
|
<!-- <view class="text-xxl" style="position: fixed; left: 40rpx;top: 100rpx;color: black;z-index: 99;">
|
<text @click="goBack" class="cuIcon-back" ></text>
|
</view> -->
|
|
<cu-custom bgColor="bg-gradual-blue" :isBack="false">
|
<block slot="content">机台监控</block>
|
</cu-custom>
|
<!-- <u-notice-bar :text="notice" mode="closable" ></u-notice-bar> -->
|
<!-- -->
|
<view class="uni-padding-wrap">
|
<view class="page-section swiper">
|
<view class="page-section-spacing">
|
<swiper class="swiper" style="height: 450rpx;" circular="true" indicator-dots="true" autoplay="true"
|
interval="3500" duration="600">
|
<swiper-item class="swiper-list" v-for="(item, index) in bannerList" :key="index">
|
<view class="swiper-item uni-bg-red">
|
<image class="swiper-img" :src="item.imageUrl" mode="aspectFill"></image>
|
</view>
|
</swiper-item>
|
</swiper>
|
</view>
|
</view>
|
</view>
|
|
<view class="padding radius bg-white">
|
<view class="text-bold text-lg text-black">{{model.herbName}}</view>
|
<view class="margin-tb-sm">
|
<view class='bg-cyan cu-tag radius light sm margin-right-xs' v-if="runStatu">运行中</view>
|
<view class='bg-orange cu-tag radius light sm margin-right-xs' v-else>停止</view>
|
<!-- <view class='bg-cyan cu-tag radius light sm'>正常</view> -->
|
</view>
|
<view class="text-black text-df flex">
|
<text class="margin-right-xs">配方名称:</text>
|
<text>{{ formulaName }} </text>
|
</view>
|
|
<view class="text-gray margin-top-xs">
|
<text class="margin-right-xs">开始时间:</text>
|
<text>{{startTime}}</text>
|
</view>
|
|
<view class="text-gray margin-top-xs">
|
<text class="margin-right-xs">投料:</text>
|
<text>{{$lget(model,'feed')}}框</text>
|
</view>
|
|
<!-- <view class="margin-tb-sm" style="position: relative;">
|
<text class="text-gray text-df margin-right-xs">重量:</text>
|
<text class="text-cyan text-bold text-xxl margin-right-xs">100kg</text>
|
<text class="text-gray text-df margin-right-xs">时间:</text>
|
<text class="text-cyan text-bold text-xxl margin-right-xs">0min </text>
|
|
</view>
|
-->
|
|
|
<view class="margin-tb-sm" style="position: relative;">
|
<text class="text-gray text-df margin-right-xs">含水率:</text>
|
<text class="text-cyan text-bold text-xxl margin-right-xs">{{ $lget(this.model, 'trendVo.moisture') }}%
|
</text>
|
<text class="text-gray text-df margin-right-xs">热风:</text>
|
<text class="text-cyan text-bold text-xxl margin-right-xs">{{$lget(this.model, 'trendVo.wind') }} ℃ </text>
|
|
|
<view class="scoreBox">
|
<text class="text-green text-xl text-bold">{{$lget(model,'target')}}%<text
|
class="text-gray text-sm">/目标</text> </text>
|
<text class="text-gray text-xl text-bold">{{$lget(model,'initial')}}%<text
|
class="text-gray text-sm">/初始</text> </text>
|
<!-- <view class="text-yellow text-xs flex justify-around">
|
<uni-text class="text-yellow cuIcon-favorfill"></uni-text>
|
<uni-text class="text-yellow cuIcon-favorfill"></uni-text>
|
<uni-text class="text-yellow cuIcon-favorfill"></uni-text>
|
<uni-text class="text-yellow cuIcon-favorfill"></uni-text>
|
<uni-text class="text-yellow cuIcon-favorfill"></uni-text>
|
</view> -->
|
<text class="text-sm text-bold" style="color: #666666;">含水率</text>
|
</view>
|
</view>
|
|
|
<!-- <view class="bg-white">
|
<view class="flex justify-around padding-sm solid serviceBox">
|
<view class="text-gray">
|
<image src='https://cdn.zhoukaiwen.com/zhengpin.svg' mode='widthFix'></image>
|
<text>正品保证</text>
|
</view>
|
<view class="text-gray">
|
<image src='https://cdn.zhoukaiwen.com/qianggou.svg' mode='widthFix'></image>
|
<text>租期自由</text>
|
</view>
|
<view class="text-gray">
|
<image src='https://cdn.zhoukaiwen.com/shandan.svg' mode='widthFix'></image>
|
<text>质量保证</text>
|
</view>
|
</view>
|
</view> -->
|
</view>
|
|
|
|
|
|
|
<view class="cu-bar bg-white margin-top-xs">
|
<view class="action sub-title">
|
<text class="text-xl text-bold text-blue text-shadow">配方信息</text>
|
<text class="text-ABC text-blue"></text>
|
</view>
|
</view>
|
|
|
<view class="bg-white padding-lr padding-bottom text-df">
|
<text class="text-bold text-black">配方属性</text>
|
<!-- <view class="flex">
|
<view class="padding-xs flex-sub">
|
<text class="text-grey"
|
style="display: inline-block; letter-spacing: 1rpx;">草药类型:</text>
|
<text class="text-black text-bold">根茎类</text>
|
</view>
|
<view class="padding-xs flex-sub">
|
<text class="text-grey"
|
style="display: inline-block;letter-spacing: 1rpx;">草药名称:</text>
|
<text class="text-black text-bold">羊蹄根</text>
|
</view>
|
<view class="padding-xs flex-sub">
|
<text class="text-grey"
|
style="display: inline-block; letter-spacing: 1rpx;"></text>
|
<text class="text-black text-bold"></text>
|
</view>
|
</view> -->
|
|
<view class="h-table margin-bottom-sm">
|
<view class="h-tr h-tr-2 h-thead">
|
<view class="h-td">草药类型</view>
|
<view class="h-td">草药名称</view>
|
</view>
|
<view class="h-tr h-tr-2">
|
<view class="h-td">中草药</view>
|
<view class="h-td">{{$lget(model,'herbName') }}</view>
|
</view>
|
</view>
|
|
|
<text class="text-bold text-black">配方参数</text>
|
<!-- <view class="flex">
|
<view class="padding-xs flex-sub">
|
<text class="text-grey"
|
style="display: inline-block; letter-spacing: 1rpx;">环境温度:</text>
|
<text class="text-black text-bold">25℃</text>
|
</view>
|
<view class="padding-xs flex-sub">
|
<text class="text-grey"
|
style="display: inline-block; letter-spacing: 1rpx;">环境湿度:</text>
|
<text class="text-black text-bold">50%</text>
|
</view>
|
<view class="padding-xs flex-sub">
|
<text class="text-grey" style="display: inline-block; letter-spacing: 1rpx;"></text>
|
<text class="text-black text-bold"></text>
|
</view>
|
</view>
|
<view class="flex">
|
<view class="padding-xs flex-sub">
|
<text class="text-grey"
|
style="display: inline-block; letter-spacing: 1rpx;">热风温度:</text>
|
<text class="text-black text-bold">70℃</text>
|
</view>
|
<view class="padding-xs flex-sub">
|
<text class="text-grey"
|
style="display: inline-block; letter-spacing: 1rpx;">滚筒延时:</text>
|
<text class="text-black text-bold">3ms</text>
|
</view>
|
<view class="padding-xs flex-sub">
|
<text class="text-grey"
|
style="display: inline-block; letter-spacing: 1rpx;">投料数量:</text>
|
<text class="text-black text-bold">12框</text>
|
</view>
|
</view>
|
|
<view class="flex">
|
<view class="padding-xs flex-sub">
|
<text class="text-grey"
|
style="display: inline-block; letter-spacing: 1rpx;">干燥时间:</text>
|
<text class="text-black text-bold">100min</text>
|
</view>
|
|
</view>
|
-->
|
|
|
<view class="h-table">
|
<view class="h-tr h-tr-2 h-thead">
|
<view class="h-td">环境温度</view>
|
<view class="h-td">环境湿度</view>
|
<view class="h-td">热风温度</view>
|
<view class="h-td">滚筒延时</view>
|
<view class="h-td">干燥时间</view>
|
</view>
|
<view class="h-tr h-tr-2">
|
<view class="h-td">{{$lget(model,'envTemp')}}℃</view>
|
<view class="h-td">{{$lget(model,'envHum')}}%</view>
|
<view class="h-td">{{$lget(model,'windTemp')}}℃</view>
|
<view class="h-td">{{$lget(model,'delay')}}ms</view>
|
<view class="h-td">{{$lget(model,'et')}}min</view>
|
</view>
|
</view>
|
</view>
|
|
|
<!-- <view class="cu-bar bg-white margin-top-xs">
|
<view class="action sub-title">
|
<text class="text-xl text-bold text-blue text-shadow">运行信息</text>
|
<text class="text-ABC text-blue"></text>
|
</view>
|
</view>
|
|
|
<view class="cu-timeline">
|
|
<view class="cu-time">
|
<text class='cuIcon-selection text-white text-lg bg-blue round padding-xs'></text>
|
<text class='text-xl margin-left'>开始干燥</text>
|
</view>
|
<view class="cu-item text-blue">
|
<view class="content">
|
<view class="cu-capsule radius">
|
<view class="cu-tag bg-blue">首次称重</view>
|
<view class="cu-tag line-blue">12：00</view>
|
</view>
|
|
<view class="h-table margin-top">
|
<view class="h-tr h-tr-3 h-thead">
|
<view class="h-td ">当前含水</view>
|
<view class="h-td ">当前重量</view>
|
<view class="h-td ">加热时间</view>
|
</view>
|
<view class="h-tr h-tr-3">
|
<view class="h-td">30%</view>
|
<view class="h-td">100kg</view>
|
<view class="h-td">10min</view>
|
</view>
|
</view>
|
|
|
</view>
|
</view>
|
<view class="cu-item text-blue">
|
<view class="content">
|
<view class="cu-capsule radius">
|
<view class="cu-tag bg-blue">首次称重</view>
|
<view class="cu-tag line-blue">12：00</view>
|
</view>
|
|
<view class="h-table margin-top">
|
<view class="h-tr h-tr-3 h-thead">
|
<view class="h-td ">当前含水</view>
|
<view class="h-td ">当前重量</view>
|
<view class="h-td ">加热时间</view>
|
</view>
|
<view class="h-tr h-tr-3">
|
<view class="h-td">30%</view>
|
<view class="h-td">100kg</view>
|
<view class="h-td">10min</view>
|
</view>
|
</view>
|
|
|
</view>
|
</view>
|
<view class="cu-item text-blue">
|
<view class="content">
|
<view class="cu-capsule radius">
|
<view class="cu-tag bg-blue">首次称重</view>
|
<view class="cu-tag line-blue">12：00</view>
|
</view>
|
|
<view class="h-table margin-top">
|
<view class="h-tr h-tr-3 h-thead">
|
<view class="h-td ">当前含水</view>
|
<view class="h-td ">当前重量</view>
|
<view class="h-td ">加热时间</view>
|
</view>
|
<view class="h-tr h-tr-3">
|
<view class="h-td">30%</view>
|
<view class="h-td">100kg</view>
|
<view class="h-td">10min</view>
|
</view>
|
</view>
|
|
</view>
|
</view>
|
<view class="cu-item text-blue">
|
<view class="content">
|
<view class="cu-capsule radius">
|
<view class="cu-tag bg-blue">首次称重</view>
|
<view class="cu-tag line-blue">12：00</view>
|
</view>
|
|
<view class="h-table margin-top">
|
<view class="h-tr h-tr-3 h-thead">
|
<view class="h-td ">当前含水</view>
|
<view class="h-td ">当前重量</view>
|
<view class="h-td ">加热时间</view>
|
</view>
|
<view class="h-tr h-tr-3">
|
<view class="h-td">30%</view>
|
<view class="h-td">100kg</view>
|
<view class="h-td">10min</view>
|
</view>
|
</view>
|
|
</view>
|
</view>
|
|
<view class="cu-time" style="padding-bottom: 140rpx;">
|
<text class='cuIcon-selection text-white text-lg bg-blue round padding-xs'></text>
|
<text class='text-xl margin-left'>完成干燥</text>
|
</view>
|
</view>
|
|
-->
|
<view style="height: 20rpx; width: 1rpx;"></view>
|
|
|
|
</view>
|
</template>
|
|
<script>
|
import get from 'lodash.get'
|
export default {
|
data() {
|
return {
|
notice: "2023-03-1812:00:001号机台低温报警",
|
timer: null,
|
model: {},
|
queryParam: {
|
machineid: "GM001",
|
tenantid: 1000
|
},
|
bannerList: [{
|
imageUrl: '/static/image/equ1.png'
|
},
|
{
|
imageUrl: '/static/image/equ1.png'
|
}
|
]
|
}
|
},
|
onLoad(option) {},
|
onShow() {
|
var that = this;
|
console.info("监控页面显示")
|
this.getRealData(this)
|
if (!that.timer) {
|
that.timer = setInterval(function() {
|
console.info("定时器工作")
|
console.info(that.timer)
|
that.getRealData(that)
|
|
}, 1000 * 12)
|
}
|
|
|
},
|
onHide() {
|
clearInterval(this.timer)
|
console.info("监控页面隐藏")
|
console.info("定时器停止")
|
console.info(this.timer)
|
},
|
onUnload() {
|
clearInterval(this.timer)
|
},
|
mounted() {
|
|
},
|
methods: {
|
|
getRealData(that) {
|
console.info(that)
|
that.$api.getRealTimeData(this.queryParam).then((res) => {
|
if (res.success) {
|
this.model = res.result
|
}
|
}).catch((err) => {
|
console.log('request fail', err);
|
})
|
},
|
getData(id) {
|
let opts = {
|
url: 'api/circle.Areas/info',
|
method: 'get'
|
};
|
let params = {
|
"circle_areas_id": id,
|
}
|
|
uni.showLoading({
|
title: '加载中'
|
})
|
|
},
|
goBack() {
|
uni.navigateBack({
|
delta: 1
|
})
|
}
|
},
|
computed: {
|
//运行状态
|
runStatu() {
|
let stop = this.$lget(this.model, 'result.stop');
|
return !stop
|
|
},
|
//报警状态 TODO 暂时不用
|
warmStatu() {
|
if (this.runStatu) {
|
if (this.model.envTemp < 50) {
|
return true
|
} else {
|
return false
|
}
|
} else {
|
return false
|
}
|
|
|
},
|
formulaName() {
|
let name = this.$lget(this.model, 'herbName')
|
let code = this.$lget(this.model, 'code')
|
let formula = ""
|
if (name) {
|
formula = name;
|
}
|
if (code) {
|
formula = formula + code
|
}
|
return formula
|
},
|
//干燥开始时间
|
startTime() {
|
if (this.model && this.model.detailList) {
|
if (this.model.detailList.length > 0) {
|
return this.model.detailList[0].tim
|
}
|
}
|
return ""
|
},
|
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import "components/table/helang-table";
|
|
.swiper-box {
|
flex: 1;
|
}
|
|
.swiper-item {
|
height: 100%;
|
}
|
|
.scoreBox {
|
position: absolute;
|
right: 0;
|
bottom: 0;
|
width: 200rpx;
|
height: 142rpx;
|
border-radius: 20rpx;
|
background-color: #f9f9f9;
|
text-align: center;
|
padding: 12rpx 10rpx;
|
border: 3rpx solid #EEEEEE;
|
display: flex;
|
flex-flow: column;
|
justify-content: space-between;
|
}
|
|
.serviceBox {
|
border-radius: 25rpx;
|
background-color: #f9f9f9;
|
margin: 30rpx auto 0;
|
|
image {
|
width: 42rpx;
|
height: 42rpx;
|
margin-right: 8rpx;
|
vertical-align: middle;
|
margin-top: -6rpx;
|
}
|
}
|
|
.procedureIcon {
|
width: 85rpx;
|
height: 85rpx;
|
line-height: 85rpx;
|
text-align: center;
|
border-radius: 50%;
|
font-size: 48rpx;
|
color: #666666;
|
background-color: #EEEEEE;
|
}
|
|
.rightIcon {
|
width: 36rpx;
|
position: absolute;
|
right: -38px;
|
top: 25rpx;
|
}
|
|
.cu-timeline .cu-time {
|
width: 100%;
|
text-align: left;
|
padding: 20rpx 0 20rpx 37rpx;
|
font-size: 26rpx;
|
color: #888;
|
display: block;
|
}
|
</style>
|
