<template>
|
<view class="app">
|
<!-- <view class="cu-custom custom-bar" :style="[{height:CustomBar + 'px'}]">
|
<view class="select-equ-box">
|
<u-icon name="setting" color="rgb(255,255,255)" :size="20"></u-icon>
|
<text style="margin-left: 10rpx;" @click="show">1号干燥机</text>
|
<u-icon name="arrow-right" color="rgb(255,255,255)" :size="12"></u-icon>
|
</view>
|
</view>
|
<view class="blank" :style="[{height:CustomBar + 'px'}]">
|
</view>
|
|
-->
|
<cu-custom bgColor="bg-gradual-blue" :isBack="false">
|
<block slot="content">智能中草药干燥设备配套系统</block>
|
</cu-custom>
|
<u-toast ref="uToast"></u-toast>
|
<!-- <view class="card-box dynamic shadow cu-list menu">
|
<view class="title-box">
|
<view class="left">
|
<uni-text class="cuIcon-titles text-blue"></uni-text>
|
<view class="title">统计</view>
|
</view>
|
</view>
|
|
<view class="cu-item" style="padding: 0;">
|
<view class="content">
|
<image src='/static/me/icon/bianqian.png' class='png' mode='aspectFit'></image>
|
<text class="text-lg">烘干总量</text>
|
</view>
|
<view class="action">
|
<view class="cu-tag radius bg-blue light">
|
1200kg
|
</view>
|
</view>
|
</view>
|
|
<view class="cu-item" style="padding: 0;">
|
<view class="content">
|
<image src='/static/me/icon/bianqian.png' class='png' mode='aspectFit'></image>
|
<text class="text-lg">烘干时长</text>
|
</view>
|
<view class="action">
|
<view class="cu-tag radius bg-blue light">
|
300分钟
|
</view>
|
</view>
|
</view>
|
|
<view class="bxBox">
|
<image src="/static/me/icon/bianqian.png" class="png" style="width: 48upx;
|
height: 48upx;" mode="aspectFit"></image>
|
<view style="padding-left: 10rpx;" class="text-lg">烘干药材</view>
|
</view>
|
|
<view class='padding-bottom-sm flex flex-wrap bg-white' style="justify-content: flex-end;">
|
<view class="cu-tag margin-right-xs bg-blue light radius">
|
当归
|
</view>
|
<view class="cu-tag bg-purple light radius">
|
人参
|
</view>
|
<view class="cu-tag bg-brown light radius">
|
龙须草
|
</view>
|
|
</view>
|
|
|
</view> -->
|
|
|
<view class="card-box dynamic shadow">
|
<view class="title-box margin-bottom-sm">
|
<view class="left justify-between">
|
<view class="flex align-center">
|
<uni-text class="cuIcon-titles text-blue"></uni-text>
|
<view class="title">总览</view>
|
</view>
|
<view>
|
<text class="text-gray">{{model.date}}</text>
|
</view>
|
|
</view>
|
|
</view>
|
<view class="flex flex-direction padding-xs">
|
<view class="flex">
|
<view class="flex-sub flex flex-direction">
|
<text class="text-df">烘干数量</text>
|
<text class="text-bold text-sl margin-top-xs text-cyan margin-top-sm">{{showValue(model.feed)}}
|
<text class="text-gray text-sm margin-left-xs">筐</text></text>
|
</view>
|
<view class="flex-twice flex flex-direction justify-between">
|
<view class="flex-sub flex">
|
<view class="flex flex-direction flex-sub">
|
<text class="text-gray text-xs">批次信息</text>
|
<text class="text-black">
|
<text class="text-black">种类:</text>
|
<text class="margin-lr-xs">{{showValue(model.group)}}</text>
|
<text class="text-gray text-xs"></text>
|
</text>
|
|
</view>
|
<view class="flex flex-direction flex-sub">
|
<text class="text-white text-xs">批次</text>
|
<text class="text-black">
|
<text class="text-black">批次:</text>
|
<text class="margin-lr-xs">{{showValue(model.batch)}}</text>
|
<text class="text-gray text-xs"></text>
|
</text>
|
|
</view>
|
|
</view>
|
<view class="flex-sub flex margin-top-sm">
|
<view class="flex flex-direction flex-sub">
|
<text class="text-gray text-xs">烘干信息</text>
|
<text class="text-cyan">
|
<text class="text-black">重量:</text>
|
<text class="margin-lr-xs">{{showValue(model.weight)}}</text>
|
<text class="text-gray text-xs">kg</text>
|
</text>
|
|
</view>
|
<view class="flex flex-direction flex-sub">
|
<text class="text-white text-xs">时间</text>
|
<text class="text-cyan">
|
<text class="text-black">时间:</text>
|
<text class="margin-lr-xs">{{showValue(model.dryTime)}}</text>
|
<text class="text-gray text-xs">min</text>
|
</text>
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
<view class="margin-top">
|
<u-scroll-list>
|
|
</u-scroll-list>
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
|
<view class="card-box dynamic shadow">
|
<view class="title-box">
|
<view class="left">
|
<uni-text class="cuIcon-titles text-blue"></uni-text>
|
<view class="title">日期</view>
|
</view>
|
</view>
|
|
<lunc-calendar ref="calendar" @dayChange="dayChange" weekType="星期" @monthChange="monthChange"
|
:showShrink="true" shrinkState="week" :signList="monthList"></lunc-calendar>
|
</view>
|
|
|
|
<view class="card-box dynamic shadow">
|
<view class="title-box">
|
<view class="left">
|
<uni-text class="cuIcon-titles text-blue"></uni-text>
|
<view class="title">明细</view>
|
</view>
|
</view>
|
|
<view class="data-item" v-for="(item, index) in herbList" :key="item.id" style="padding: 0 10rpx;">
|
<view class="flex justify-between text-lg align-center padding-tb-xs">
|
<view class="flex">
|
<text>中草药</text>
|
<text>丨</text>
|
<text @click="showLongName(showValue(item.herbName))"
|
class="text-cut flex-twice">{{showValue(item.herbName)}}</text>
|
<!-- <view class="margin-lr-sm">
|
<u-tag text="报警一次" plain size="mini" type="warning"></u-tag>
|
</view> -->
|
<view class="margin-lr-sm">
|
<u-tag text="正常" plain size="mini" type="success"></u-tag>
|
</view>
|
</view>
|
<view style="width:160rpx;" class="flex align-center text-xs ">
|
<text>进度:</text>
|
<view style="width: 100rpx;">
|
<u-line-progress :percentage="calcProgress(item.dryTime,item.et)"
|
height="10"></u-line-progress>
|
</view>
|
</view>
|
</view>
|
|
<view style="display: flex;flex-direction: row;height: 120rpx;">
|
<view class="image">
|
<image :src="dataList[0].goodsUrl" mode="aspectFill"></image>
|
</view>
|
|
<view class="flex flex-direction margin-left-xl margin-left-sm justify-center">
|
<view>
|
<text class="text-xxl text-green">{{showValue(item.target)}}%</text>
|
<text
|
class="text-xs margin-top-xs text-grey margin-left-xs text-line-through">{{showValue(item.initial)}}%</text>
|
</view>
|
<text class="text-xs margin-top-xs text-grey">含水率</text>
|
</view>
|
|
<view class="flex flex-direction margin-left-xl margin-left-10p justify-center">
|
<view>
|
<text class="text-xxl">{{showValue(item.yield )}}kg</text>
|
<text
|
class="text-xs margin-top-xs text-grey margin-left-xs text-line-through">{{showValue(item.originWeight)}}kg</text>
|
</view>
|
|
<view class="text-xs margin-top-xs text-grey">
|
<text>{{showValue(item.feed)}}筐</text>
|
<text style="margin: 0 10rpx;"> l </text>
|
<text>{{showValue(item.windTemp)}}℃</text>
|
<text style="margin: 0 10rpx;"> l </text>
|
<text>{{showValue(item.dryTime)}}min</text>
|
</view>
|
</view>
|
</view>
|
<u-gap height="10"></u-gap>
|
<view class="text-grey text-sm flex justify-between">
|
<text>{{showValue(item.code)}}</text>
|
<text>{{showValue(item.orderTime)}}</text>
|
</view>
|
<u-line color="#f1f1f1" margin="15rpx 0 15rpx 0"></u-line>
|
</view>
|
|
</view>
|
<!--
|
<view class="page-box" v-show="false">
|
<view class="order" v-for="(res, index) in dataList" :key="res.id">
|
<view class="top">
|
<view class="left">
|
<uni-text class="cuIcon-titles text-blue"></uni-text>
|
<view class="store">{{ res.store }}</view>
|
<u-icon name="arrow-right" color="rgb(203,203,203)" :size="12"></u-icon>
|
</view>
|
<view class="right">
|
<view class='cu-tag radius light bg-blue'>{{res.id}}</view>
|
</view>
|
</view>
|
<view class="item">
|
<view class="left">
|
<image :src="res.goodsUrl" mode="aspectFill"></image>
|
</view>
|
<view class="content">
|
<view>
|
<view class="title u-line-2 text-bold">当归（12:00-13:00）</view>
|
<view class="type">重量：200kg</view>
|
<view class="type">含水率：30% <text style="color: green;">(13%)</text></view>
|
<view class="delivery-time">时间： 60min</view>
|
</view>
|
</view>
|
</view>
|
<u-line color="#f1f1f1" margin="24rpx 0 15rpx 0"></u-line>
|
<view class="bottom">
|
<view class="bottom_left">
|
<text class="text-blue">干燥进度：</text>
|
<view class="progressBox">
|
<u-line-progress :percentage="res.progre" height="8" :active-color="activeColor"
|
:striped="true" :stripedActive="true"></u-line-progress>
|
</view>
|
</view>
|
|
<view class="btnBox">
|
|
<view @click="goCharts" class="evaluate btn">查看图表</view>
|
</view>
|
</view>
|
</view>
|
</view> -->
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
list: [{
|
thumb: "https://cdn.uviewui.com/uview/goods/1.jpg"
|
}, {
|
thumb: "https://cdn.uviewui.com/uview/goods/2.jpg"
|
}, {
|
thumb: "https://cdn.uviewui.com/uview/goods/3.jpg"
|
}, {
|
thumb: "https://cdn.uviewui.com/uview/goods/4.jpg"
|
}, {
|
thumb: "https://cdn.uviewui.com/uview/goods/5.jpg"
|
}],
|
StatusBar: this.StatusBar,
|
CustomBar: this.CustomBar,
|
percent: 50,
|
activeColor: '#0081ff',
|
monthList: [],
|
signList: [{
|
date: "2023-03-13",
|
title: "龙须草",
|
info: ""
|
},
|
{
|
date: "2023-03-14",
|
title: "当归"
|
},
|
{
|
date: "2023-03-15",
|
title: "羊蹄根"
|
},
|
{
|
date: "2023-01-11",
|
title: "聚会"
|
},
|
{
|
date: "2022-12-23",
|
title: "郊游"
|
},
|
{
|
date: "2022-12-19",
|
title: "游玩"
|
}
|
],
|
dataList: [{
|
id: 'No20230314001',
|
store: '当归2023年3月3日',
|
progre: 100,
|
goodsUrl: 'https://p8.itc.cn/images01/20210913/136867c5b92a4ef7905e146060dc1b3d.jpeg',
|
title: '工单项目',
|
describe: '暂无描述',
|
time: '2021年10月18日'
|
},
|
{
|
id: 'No20230314002',
|
store: '当归2023年3月3日',
|
progre: 100,
|
goodsUrl: 'https://p8.itc.cn/images01/20210913/136867c5b92a4ef7905e146060dc1b3d.jpeg',
|
title: '工单项目',
|
describe: '暂无描述',
|
time: '2021年10月18日'
|
}
|
],
|
model: {
|
date: uni.$u.timeFormat(new Date(), 'yyyy-mm-dd'),
|
},
|
herbList: []
|
}
|
},
|
onShow() {
|
console.info('onShow')
|
|
|
},
|
onReady() {
|
const userinfo = uni.getStorageSync('userinfo');
|
const tenantid = userinfo.loginTenantId
|
uni.getSystemInfo({
|
success: (res) => {
|
let deviceId = res.deviceId
|
if (!deviceId) {
|
deviceId = 'mobile-' + tenantid + '-' + Date.parse(new Date())
|
}
|
uni.setStorageSync(this.$constant.DEVICE_ID, 'mobile-' + tenantid + '-' + res.deviceId);
|
}
|
})
|
this.startConnect();
|
|
|
|
let month = uni.$u.timeFormat(new Date(), 'yyyy-mm')
|
this.getMonth(month)
|
|
let day = uni.$u.timeFormat(new Date(), 'yyyy-mm-dd')
|
this.getOrderList(day, day);
|
|
|
},
|
methods: {
|
/* 连接MQTT */
|
async startConnect() {
|
var _this = this
|
const account = uni.getStorageSync('account');
|
const deviceid = uni.getStorageSync(this.$constant.DEVICE_ID);
|
|
if (!account) {
|
|
return false
|
}
|
let opts = {
|
// #ifdef H5
|
url: 'ws://' + this.$api.mqttBaseUrl + ':8083/mqtt',
|
// #endif
|
// #ifdef APP-PLUS
|
url: 'wx://' + this.$api.mqttBaseUrl + ':8083/mqtt',
|
// #endif
|
clientId: deviceid,
|
username: account.username,
|
password: account.password
|
}
|
if (!this.$mqttTool.client) {
|
var client = await this.$mqttTool.connect(opts);
|
}
|
//订阅查询设备状态返回数据
|
this.$mqttTool.subscribe({
|
topic: this.$constant.SERVICE_DOWN + '/' + deviceid + '/#',
|
qos: 0
|
}).then(res => {
|
console.error(res)
|
})
|
//订阅发送指令返回结果
|
// this.$mqttTool.subscribe({
|
// topic: this.$constant.SERVICE_RES_EQU_CMD,
|
// qos: 0
|
// }).then(res => {
|
// console.error(res)
|
// })
|
// if (!client) {
|
// return false
|
// }
|
|
client.on('connect', function(res) {
|
console.error('连接成功')
|
})
|
client.on('reconnect', function(res) {
|
console.error('重新连接')
|
})
|
client.on('error', function(res) {
|
console.info('连接错误')
|
})
|
client.on('close', function(res) {
|
|
console.error('关闭成功')
|
|
})
|
client.on('message', function(topic, message, buffer) {
|
//console.info(message)
|
})
|
},
|
|
|
showLongName(longName) {
|
this.$refs.uToast.show({
|
type: 'default',
|
message: longName
|
})
|
|
},
|
dayChange(dayInfo) { // 点击日期
|
this.model.date = dayInfo.date
|
console.log("点击日期", JSON.parse(JSON.stringify(dayInfo)));
|
this.getOrderList(dayInfo.date, dayInfo.date);
|
},
|
monthChange(monthInfo) { // 切换月份
|
console.log("切换月份", JSON.parse(JSON.stringify(monthInfo)));
|
let m = monthInfo.month
|
if (m < 10) {
|
m = '0' + m
|
}
|
let month = monthInfo.year + '-' + m
|
console.info(month)
|
this.getMonth(month)
|
},
|
showValue(value) {
|
if (value == null) {
|
return "--"
|
}
|
return value
|
},
|
show(e) {
|
console.info(this.CustomBar)
|
|
},
|
goCharts(e) {
|
uni.navigateTo({
|
url: "/pages/charts/charts"
|
})
|
},
|
getOrderList(date1, date2) {
|
let params = {
|
"orderTime_begin": date1 + " 00:00:00",
|
"orderTime_end": date2 + " 23:59:59",
|
}
|
this.$api.getOrderList(params).then((res) => {
|
if (res.success) {
|
this.herbList = res.result.records
|
|
let feed = this.countTotal(this.herbList, "feed");
|
let weight = this.countTotal(this.herbList, "originWeight");
|
let dryTime = this.countTotal(this.herbList, "dryTime");
|
|
let gList = [];
|
this.herbList.forEach(item => {
|
if (!gList.includes(item.herbName)) {
|
gList.push(item.herbName)
|
}
|
});
|
|
if (weight) {
|
weight = weight.toFixed(1)
|
}
|
this.model.feed = feed
|
this.model.group = gList.length
|
this.model.batch = this.herbList.length
|
this.model.weight = weight
|
this.model.dryTime = dryTime
|
|
console.info(this.model)
|
}
|
})
|
},
|
getMonth(month) {
|
let params = {
|
month: month
|
}
|
this.$api.getMonth(params).then((res) => {
|
if (res.success) {
|
let list = res.result || []
|
list = list.map(item => {
|
let rec = {}
|
rec.date = item;
|
rec.title = "生产";
|
rec.info = "";
|
|
return rec
|
})
|
this.monthList = [...this.monthList, ...list]
|
this.$refs.calendar.addSignList(this.monthList);
|
|
if (res.result && res.result.length > 0) {
|
let date = res.result[0]
|
let array = date.split('-')
|
if (array && array.length == 3) {
|
this.$refs.calendar.clickDay({
|
"day": parseInt(array[2]),
|
"month": parseInt(array[1]),
|
"year": parseInt(array[0])
|
})
|
}
|
|
}
|
|
|
|
}
|
|
})
|
},
|
//计算预测进度
|
calcProgress(dryTime, et) {
|
if (dryTime && et) {
|
let res = dryTime / et * 100
|
res = res.toFixed(2)
|
return res
|
}
|
return 0;
|
|
},
|
//计算对象数组中某个属性合计
|
countTotal(arr, keyName) {
|
let $total = 0;
|
$total = arr.reduce(function(total, currentValue, currentIndex, arr) {
|
return currentValue[keyName] ? (total + currentValue[keyName]) : total;
|
}, 0);
|
return $total;
|
}
|
|
|
|
}
|
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.app {}
|
|
.custom-bar {
|
background-image: linear-gradient(to right, #0381FF, #0381FF);
|
color: white;
|
display: flex;
|
align-items: flex-end;
|
padding: 0 0 14rpx 20rpx;
|
width: 100%;
|
position: fixed;
|
overflow: hidden;
|
z-index: 999999;
|
|
}
|
|
.select-equ-box {
|
display: flex;
|
flex-direction: row;
|
}
|
|
.data-item {
|
image {
|
width: 140rpx;
|
height: 120rpx;
|
border-radius: 10rpx;
|
}
|
}
|
|
.card-box {
|
margin: 20rpx;
|
padding: 20rpx;
|
box-sizing: border-box;
|
background-color: white;
|
border-radius: 20rpx;
|
font-family: Helvetica Neue, Helvetica, sans-serif
|
}
|
|
.left {
|
display: flex;
|
align-items: center;
|
|
.title {
|
margin: 0 10rpx;
|
font-size: 34rpx;
|
font-weight: bold;
|
}
|
}
|
|
|
|
.order {
|
width: 710rpx;
|
background-color: #ffffff;
|
margin: 20rpx auto;
|
border-radius: 20rpx;
|
box-sizing: border-box;
|
padding: 20rpx;
|
font-size: 28rpx;
|
|
.top {
|
display: flex;
|
justify-content: space-between;
|
|
.left {
|
display: flex;
|
align-items: center;
|
|
.store {
|
margin: 0 10rpx;
|
font-size: 34rpx;
|
font-weight: bold;
|
}
|
}
|
|
.right {
|
color: #f29100;
|
|
.progressBox {
|
width: 150rpx;
|
float: right;
|
}
|
}
|
}
|
|
.item {
|
display: flex;
|
margin: 20rpx 0 0;
|
|
.left {
|
margin-right: 20rpx;
|
|
image {
|
width: 220rpx;
|
height: 190rpx;
|
border-radius: 10rpx;
|
}
|
}
|
|
.content {
|
display: flex;
|
flex-direction: row;
|
|
.title {
|
font-size: 28rpx;
|
line-height: 45rpx;
|
|
}
|
|
.type {
|
margin: 6rpx 0;
|
font-size: 24rpx;
|
color: #909399;
|
text-overflow: -o-ellipsis-lastline;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
display: -webkit-box;
|
-webkit-line-clamp: 3;
|
line-clamp: 3;
|
-webkit-box-orient: vertical;
|
}
|
|
.delivery-time {
|
color: #0081ff;
|
font-size: 24rpx;
|
}
|
}
|
|
.right {
|
margin-left: 10rpx;
|
padding-top: 20rpx;
|
text-align: right;
|
|
.decimal {
|
font-size: 24rpx;
|
margin-top: 4rpx;
|
}
|
}
|
}
|
|
.total {
|
margin-top: 20rpx;
|
text-align: right;
|
font-size: 24rpx;
|
|
.total-price {
|
font-size: 32rpx;
|
}
|
}
|
|
.bottom {
|
line-height: 70rpx;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
|
.bottom_left {
|
display: flex;
|
align-items: center;
|
|
.progressBox {
|
width: 150rpx;
|
float: right;
|
}
|
}
|
|
.btnBox {
|
width: 150rpx;
|
display: flex;
|
justify-content: space-between;
|
|
.btn {
|
line-height: 52rpx;
|
width: 140rpx;
|
border-radius: 12rpx;
|
border: 2rpx solid #909399;
|
font-size: 26rpx;
|
text-align: center;
|
color: #909399;
|
}
|
|
.evaluate {
|
color: #2979ff;
|
border-color: #2979ff;
|
}
|
}
|
}
|
}
|
|
.bxBox {
|
position: relative;
|
display: flex;
|
/* padding: 0 30rpx; */
|
min-height: 100rpx;
|
/* background-color: #ffffff; */
|
/* justify-content: space-between; */
|
align-items: center;
|
font-size: 30rpx;
|
line-height: 1.6em;
|
flex: 1;
|
|
.bxImg {
|
display: inline-block;
|
margin-right: 10rpx;
|
width: 1.6em;
|
text-align: center;
|
}
|
}
|
</style>
|
