分支自 mobile/lbdry-uniapp
pages/tabBar/general.vue
@@ -1,75 +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> <block slot="content">兰浦智能干燥</block> </cu-custom> <!-- <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> --> <u-toast ref="uToast"></u-toast> <view class="card-box dynamic shadow"> <view class="title-box margin-bottom-sm"> <view class="left justify-between"> @@ -164,75 +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>{{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"> @@ -276,11 +218,15 @@ </view> </view> </view> --> </view> </template> <script> import get from 'lodash.get' export default { data() { return { list: [{ @@ -296,6 +242,7 @@ }], StatusBar: this.StatusBar, CustomBar: this.CustomBar, loading: true, percent: 50, activeColor: '#0081ff', monthList: [], @@ -351,32 +298,154 @@ } }, onShow() { console.info('onShow') }, 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() 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) 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'); 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: this.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) }) //订阅设备实时故障广播（广播不在乎客户端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, // 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) { @@ -384,10 +453,6 @@ return "--" } return value }, show(e) { console.info(this.CustomBar) }, goCharts(e) { uni.navigateTo({ @@ -399,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 @@ -422,8 +491,6 @@ this.model.batch = this.herbList.length this.model.weight = weight this.model.dryTime = dryTime console.info(this.model) } }) }, @@ -485,13 +552,30 @@ }, 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%; max-height: 100vh; overflow: hidden; } .custom-bar { background-image: linear-gradient(to right, #0381FF, #0381FF);
