分支自 mobile/lbdry-uniapp
pages/tabBar/general.vue
@@ -1,287 +1,207 @@ <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> <mqtt-view ref="mqttView"></mqtt-view> <z-paging ref="paging" v-model="herbList" :auto-show-back-to-top="true" :loading-more-enabled="false" show-refresher-update-time @query="queryList"> <template #top> <cu-custom bgColor="bg-gradual-blue" :isBack="false"> <block slot="content">兰浦智能干燥</block> </cu-custom> <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 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 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> <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="margin-top"> <u-scroll-list> </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> </u-scroll-list> </view> </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> <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="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 class="margin-top"> <u-scroll-list> <view style="display: flex;flex-direction: row;height: 120rpx;"> <view class="image"> <image :src="dataList[0].goodsUrl" mode="aspectFill"></image> </view> </u-scroll-list> <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> </template> <template> <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="btnBox"> <view @click="goCharts" class="evaluate btn">查看图表</view> </view> <lunc-calendar ref="calendar" @dayChange="dayChange" weekType="星期" @monthChange="monthChange" :showShrink="true" shrinkState="week" :signList="monthList"></lunc-calendar> </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> <u-skeleton rows="20" :loading="loading" :title="false"> <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 v-if="item.orderStatus == 0" text="准备" plain size="mini" type="warning"></u-tag> <u-tag v-else-if="item.orderStatus == 1" text="上料" plain size="mini" type="warning"></u-tag> <u-tag v-else-if="item.orderStatus == 2" text="生产" plain size="mini" type="primary"></u-tag> <u-tag v-else-if="item.orderStatus == 3" text="暂停" plain size="mini" type="warning"></u-tag> <u-tag v-else-if="item.orderStatus == 4" 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> </u-skeleton> </view> </template> </z-paging> </view> </template> <script> import get from 'lodash.get' export default { data() { return { list: [{ @@ -297,6 +217,7 @@ }], StatusBar: this.StatusBar, CustomBar: this.CustomBar, loading: true, percent: 50, activeColor: '#0081ff', monthList: [], @@ -347,45 +268,62 @@ ], model: { date: uni.$u.timeFormat(new Date(), 'yyyy-mm-dd'), month: uni.$u.timeFormat(new Date(), 'yyyy-mm') }, herbList: [] } }, onShow() { console.info('onShow') }, mounted() {}, 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); //接收报警信息，数据预处理（未打开tab无法接收数据） uni.$on(this.$constant.MQTT_TOPIC_MESSAGE, (data) => { let json = JSON.parse(data); if (json == null || json.data == null || json.topic == null) { return false } }) this.startConnect(); //在报警页面时不显示红点 if (getApp().globalData.selectTab === 2) { uni.hideTabBarRedDot({ index: 2 }); return false } let wdata = json.data let topic = json.topic switch (topic) { //topic 实时报警 case this.$constant.SERVICE_BROADCAST_TENANT_REAL_FAULT.replace('%s', this.tenantId): if (wdata.length > 0) { uni.showTabBarRedDot({ index: 2 // 显示第2个tabbar项（索引从0开始）的红点 }); } break } }); this.$refs.mqttView.initMqtt() 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); }, onLoad() {}, onTabItemTap: function(e) { getApp().globalData.selectTab = e.index }, methods: { /* 连接MQTT */ async startConnect() { var _this = this const account = uni.getStorageSync('account'); const deviceid = uni.getStorageSync(this.$constant.DEVICE_ID); if (!account) { @@ -398,7 +336,10 @@ // #ifdef APP-PLUS url: 'wx://' + this.$api.mqttBaseUrl + ':8083/mqtt', // #endif clientId: deviceid, // #ifdef MP-WEIXIN url: 'wss://' + this.$api.mqttBaseUrl + '/mqtt', // 必须用 wss，端口通常为443可省略 // #endif clientId: this.deviceId, username: account.username, password: account.password } @@ -412,6 +353,24 @@ }).then(res => { console.error(res) }) //订阅设备实时故障广播（广播不在乎客户端id，发送给租户下所有在线的设备） this.$mqttTool.subscribe({ topic: this.$constant.SERVICE_BROADCAST_TENANT_REAL_FAULT.replace('%s', this.tenantId), qos: 0 }).then(res => { console.error(res) }) //订阅设备实时故障（主动请求只发给请求设备） this.$mqttTool.subscribe({ topic: this.$constant.SERVICE_BROADCAST_TENANT_REAL_FAULT.replace('%s', this.deviceId), qos: 0 }).then(res => { console.error(res) }) //订阅发送指令返回结果 // this.$mqttTool.subscribe({ // topic: this.$constant.SERVICE_RES_EQU_CMD, @@ -452,17 +411,14 @@ }, dayChange(dayInfo) { // 点击日期 this.model.date = dayInfo.date console.log("点击日期", JSON.parse(JSON.stringify(dayInfo))); this.getOrderList(dayInfo.date, dayInfo.date); this.$refs.paging.refresh(); }, 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) { @@ -471,48 +427,59 @@ } return value }, show(e) { console.info(this.CustomBar) }, goCharts(e) { uni.navigateTo({ url: "/pages/charts/charts" url: "/packageA/pages/charts/charts" }) }, getOrderList(date1, date2) { let params = { "orderTime_begin": date1 + " 00:00:00", "orderTime_end": date2 + " 23:59:59", queryList(pageNo, pageSize) { this.loading = true; const params = { pageNo: 1, pageSize: 30, "orderTime_begin": this.model.date + " 00:00:00", "orderTime_end": this.model.date + " 23:59:59", } this.$api.getOrderList(params).then((res) => { if (res.success) { this.herbList = res.result.records this.$refs.paging.complete(res.result.records); this.loading = false 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) const records = res.result.records if (!records) { return false; } let feed = this.countTotal(records, "feed"); let weight = this.countTotal(records, "originWeight"); let dryTime = this.countTotal(records, "dryTime"); let gList = []; records.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 = records.length this.model.weight = weight this.model.dryTime = dryTime }).catch(res => { this.$refs.paging.complete(false); this.loading = false }) }, getMonth(month) { let params = { month: month @@ -571,13 +538,29 @@ }, computed: { tenantId() { const userinfo = uni.getStorageSync('userinfo'); const tenantid = userinfo.loginTenantId return tenantid; }, deviceId() { return uni.getStorageSync(this.$constant.DEVICE_ID); }, } } </script> <style lang="scss" scoped> .app {} .app { width: 100%; overflow: hidden; } .custom-bar { background-image: linear-gradient(to right, #0381FF, #0381FF);
