<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.bellowsTemp') }} ℃
|
</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 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="chartsMain">
|
<qiun-data-charts type="area" :opts="opts" :canvas2d="true" :ontouch="true" :chartData="chartData" />
|
</view>
|
|
|
|
<view style="height: 20rpx; width: 1rpx;"></view>
|
|
|
</view>
|
</template>
|
|
<script>
|
import get from 'lodash.get'
|
// 图表
|
import uCharts from "@/components/u-charts/u-charts.js";
|
var _self;
|
var canvaArea = null;
|
export default {
|
data() {
|
return {
|
chartData: {},
|
opts: {
|
color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
|
"#ea7ccc"
|
],
|
padding: [15, 10, 0, 15],
|
dataLabel: false,
|
dataPointShape: false,
|
enableScroll: false,
|
legend: {},
|
xAxis: {
|
disableGrid: true,
|
labelCount: 6
|
},
|
yAxis: {
|
gridType: "dash",
|
dashLength: 2,
|
},
|
extra: {
|
line: {
|
type: "curve",
|
width: 2,
|
activeType: "hollow",
|
linearType: "custom"
|
}
|
}
|
},
|
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'
|
}
|
]
|
|
|
}
|
},
|
onShow() {
|
console.info("监控页面显示")
|
this.getRealData()
|
if (!this.timer) {
|
this.timer = setInterval(() => {
|
console.info("定时器工作")
|
console.info(this.timer)
|
this.getRealData()
|
|
}, 1000 * 12)
|
}
|
|
|
},
|
onLoad(e) {
|
|
},
|
onHide() {
|
clearInterval(this.timer)
|
console.info("监控页面隐藏")
|
console.info("定时器停止")
|
console.info(this.timer)
|
},
|
onUnload() {
|
clearInterval(this.timer)
|
},
|
mounted() {
|
|
},
|
onReady() {
|
//this.getServerData()
|
|
},
|
methods: {
|
getServerData() {
|
//模拟从服务器获取数据时的延时
|
setTimeout(() => {
|
let res = {
|
categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
|
series: [{
|
name: "成交量A",
|
data: [35, 8, null, 37, 4, 20]
|
},
|
{
|
name: "成交量B",
|
connectNulls: true,
|
data: [70, 40, null, 100, 44, 68]
|
},
|
{
|
name: "成交量C",
|
data: [100, 80, null, 150, 112, 132]
|
}
|
]
|
};
|
this.chartData = JSON.parse(JSON.stringify(res));
|
}, 500);
|
},
|
|
|
createData() {
|
//温度数据 10s一次
|
let bellowsTemp = this.$lget(this.model, 'bellowsTemp');
|
//称重数据 （重量、湿度）
|
let detailList = this.$lget(this.model, 'detailList');
|
if (!bellowsTemp) return;
|
let wmap = {} //取出所有重量数据
|
let mmap = {} //取出所有温度数据
|
let minW = null; //第一个重量数据
|
let minM = null; //第一个温度数据
|
let maxW = null; //最后一个重量数据
|
let maxM = null; //最后一个温度数据
|
//取出重量和湿度数据
|
if (detailList && detailList.length > 0) {
|
for (var i = 0; i < detailList.length; i++) {
|
let item = detailList[i]
|
//每个时间节点重量数据
|
wmap[item.totalTime] = item.weight
|
mmap[item.totalTime] = item.moisture
|
if (i == 0) {
|
minW = item.weight
|
minM = item.moisture
|
}
|
if (i == (detailList.length - 1)) {
|
maxW = item.weight
|
maxM = item.moisture
|
}
|
}
|
}
|
let tList = [] //温度
|
let wList = [] //重量
|
let mList = [] //湿度
|
let xList = [] //xAxis
|
//根据温度数据长度，生成x轴、重量和湿度数组等
|
for (let key in bellowsTemp) {
|
//console.log(key + '---' + bellowsTemp[key])
|
tList.push(bellowsTemp[key])
|
wList.push(wmap[key] || null)
|
mList.push(mmap[key] || null)
|
xList.push(key)
|
}
|
//填充虚拟数据 TODO 删除
|
// for(let i = 1 ; i <= 10 ; i++){
|
// tList.push(i*2)
|
// wList.push(i*100)
|
// mList.push(i*10)
|
// xList.push(i)
|
// }
|
|
//d第一个数据为空 设置为第一次称重数据（没有称重数据则设置为0）
|
if (!wList[0]) {
|
wList[0] = minW||0
|
}
|
|
|
if (!mList[0]) {
|
mList[0] = minM||0
|
}
|
|
//最后一个数据为空 设置为最后一次称重数据
|
if (!wList[wList.length - 1]) {
|
wList[wList.length - 1] = maxW
|
}
|
|
if (!mList[mList.length - 1]) {
|
mList[mList.length - 1] = maxM
|
}
|
// let weightList = detailList.map(item => {
|
// return {type: item.weight, data: []}
|
// })
|
|
let series = [{
|
name: '重量',
|
data: wList,
|
connectNulls: true,
|
color: '#facc14'
|
}, {
|
name: '湿度',
|
data: mList,
|
connectNulls: true,
|
color: '#2fc25b'
|
}, {
|
name: '温度',
|
data: tList,
|
color: '#1890ff'
|
}]
|
|
console.error(wmap)
|
console.error(mmap)
|
console.error("============")
|
console.error(wList)
|
console.error(mList)
|
console.error(tList)
|
let res = {
|
categories: xList,
|
series: series
|
}
|
this.chartData = JSON.parse(JSON.stringify(res));
|
},
|
|
getRealData() {
|
this.$api.getRealTimeData(this.queryParam).then((res) => {
|
if (res.success) {
|
this.model = res.result
|
//创建图表数据
|
this.createData()
|
}
|
}).catch((err) => {
|
console.log('request fail', err);
|
})
|
},
|
|
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;
|
}
|
|
.chartsMain {
|
width: 750rpx;
|
height: 450rpx;
|
padding-top: 15rpx;
|
background: #fff;
|
margin-bottom: 24rpx;
|
border-top: 2rpx solid #f2f2f2;
|
|
.charts {
|
width: 750rpx;
|
height: 450rpx;
|
box-sizing: border-box;
|
}
|
}
|
|
.charts-box {
|
width: 100%;
|
height: 300px;
|
}
|
</style>
|
