分支自 mobile/lbdry-uniapp
pages/tabBar/general.vue
@@ -1,76 +1,10 @@ <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 bgColor="bg-gradual-blue" :isBack="false"> <block slot="content">兰浦智能干燥</block> </cu-custom> <mqtt-view ref="mqttView"></mqtt-view> <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"> @@ -165,76 +99,82 @@ <view class="card-box dynamic shadow"> <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-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 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 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="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 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 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> <mqtt-view ref="mqttView"></mqtt-view> <!-- <view class="page-box" v-show="false"> <view class="order" v-for="(res, index) in dataList" :key="res.id"> @@ -278,15 +218,15 @@ </view> </view> </view> --> </view> </template> <script> import get from 'lodash.get' export default { data() { return { list: [{ @@ -302,6 +242,7 @@ }], StatusBar: this.StatusBar, CustomBar: this.CustomBar, loading: true, percent: 50, activeColor: '#0081ff', monthList: [], @@ -357,33 +298,44 @@ } }, onShow() { console.info('onShow') uni.showTabBarRedDot({ index: 2 // 显示第2个tabbar项（索引从0开始）的红点 }); }, mounted() { }, onReady() { //接收报警信息，数据预处理（未打开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 } //在报警页面时不显示红点 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() // uni.getSystemInfo({ // success: (res) => { // let deviceId = res.deviceId // if (!deviceId) { // deviceId = 'mobile-' + this.tenantId + '-' + Date.parse(new Date()) // } // uni.setStorageSync(this.$constant.DEVICE_ID, 'mobile-' + this.tenantId + '-' + res.deviceId); // } // }) // this.startConnect(); let month = uni.$u.timeFormat(new Date(), 'yyyy-mm') this.getMonth(month) @@ -393,16 +345,17 @@ }, onLoad() { 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) { @@ -415,7 +368,7 @@ // #ifdef APP-PLUS url: 'wx://' + this.$api.mqttBaseUrl + ':8083/mqtt', // #endif clientId: deviceid, clientId: this.deviceId, username: account.username, password: account.password } @@ -429,10 +382,18 @@ }).then(res => { console.error(res) }) //订阅设备故障广播（广播不在乎客户端id，发送给租户下所有在线的设备） //订阅设备实时故障广播（广播不在乎客户端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) @@ -477,17 +438,14 @@ }, 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) { @@ -495,10 +453,6 @@ return "--" } return value }, show(e) { console.info(this.CustomBar) }, goCharts(e) { uni.navigateTo({ @@ -510,7 +464,11 @@ "orderTime_begin": date1 + " 00:00:00", "orderTime_end": date2 + " 23:59:59", } this.loading = true; this.$api.getOrderList(params).then((res) => { setTimeout(()=>{ this.loading = false },200) if (res.success) { this.herbList = res.result.records @@ -533,8 +491,6 @@ this.model.batch = this.herbList.length this.model.weight = weight this.model.dryTime = dryTime console.info(this.model) } }) }, @@ -597,20 +553,29 @@ }, computed:{ tenantId(){ computed: { tenantId() { const userinfo = uni.getStorageSync('userinfo'); const tenantid = userinfo.loginTenantId return tenantid; } return tenantid; }, deviceId() { return uni.getStorageSync(this.$constant.DEVICE_ID); }, } } </script> <style lang="scss" scoped> .app {} .app { width: 100%; max-height: 100vh; overflow: hidden; } .custom-bar { background-image: linear-gradient(to right, #0381FF, #0381FF);
