分支自 mobile/lbdry-uniapp
pages/tabBar/device.vue
@@ -18,7 +18,8 @@ <view class="title">总览</view> </view> <view> <text class="text-gray margin-right-lg">2024-07-14</text> <text class="text-gray margin-right-lg">{{new Date().toLocaleDateString().replace(/\//g, '-')}}</text> </view> </view> @@ -28,19 +29,19 @@ <view class="flex"> <view class="flex-sub flex flex-direction text-center"> <text class="text-df">设备总数</text> <text class="text-bold text-sl margin-top-xs text-gray margin-top-sm">20 <text class="text-bold text-sl margin-top-xs text-gray margin-top-sm">{{equCount}} <text class="text-gray text-sm margin-left-xs">台</text></text> </view> <view class="flex-sub flex flex-direction text-center"> <text class="text-df">开机设备</text> <text class="text-bold text-sl margin-top-xs text-gray margin-top-sm">10 <text class="text-bold text-sl margin-top-xs text-gray margin-top-sm">{{onlineCount}} <text class="text-gray text-sm margin-left-xs">台</text></text> </view> <view class="flex-sub flex flex-direction text-center"> <text class="text-df">运行设备</text> <text class="text-bold text-sl margin-top-xs text-cyan margin-top-sm">10 <text class="text-bold text-sl margin-top-xs text-cyan margin-top-sm">{{onlineCount}} <text class="text-gray text-sm margin-left-xs">台</text></text> </view> </view> @@ -61,39 +62,34 @@ <u-skeleton class=" " rows="20" :loading="loading" :title="false" > <u-skeleton class=" " rows="20" :loading="loading" :title="false"> <!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 --> <view class="card-box dynamic shadow" v-for="(item,index) in dataList" :key="index" @click="itemClick(item)"> <view class="title-box"> <view class="left flex-sub"> <uni-text class="cuIcon-titles text-blue"></uni-text> <view class="title text-cut">1#智能干燥机</view> <view class="title text-cut">{{$lget(item,'name')}}</view> <view class="flex title text-green text-sm"> <u-tag size="mini" text="在线" type="success" plain plainFill></u-tag> <u-tag class="margin-left-xs" size="mini" text="停机" type="error" plain plainFill></u-tag> <u-tag v-if="item.online" size="mini" text="在线" type="success" plain plainFill></u-tag> <u-tag v-else class="" size="mini" text="停机" type="error" plain plainFill></u-tag> </view> </view> <view class="right" style="min-width: 240rpx;"> <!-- <u-badge :isDot="true" type="success"></u-badge> --> <view class="title text-gray text-sm">开机时间:</view> <view class="title text-gray text-sm">10:00:10</view> <!-- <view class="title text-gray text-sm">开机时间:</view> --> <view class="title text-gray text-sm">{{$lget(item,'upTime')}}</view> </view> </view> <view class="info-box"> <view class="left flex-sub"> <view class="title text-sm">烘干药材:</view> <view class="title text-sm">生地黄</view> <view class="title text-sm text-gray">--</view> </view> <view class="right" style="min-width: 240rpx;"> <view class="title text-sm">烘干时间:</view> <view class="title text-sm">01:20:00</view> <view class="title text-sm text-gray">--</view> </view> </view> @@ -101,11 +97,18 @@ <view class="left flex-sub"> <view class="title text-sm text-cut">报警信息:</view> <view class="flex title text-sm"> <template v-if="item.online && !item.fault"> <u-tag size="mini" text="正常" type="success" plain plainFill></u-tag> </template> <template v-else-if="item.fault"> <u-tag size="mini" text="温度传感器报警" type="warning" plain plainFill></u-tag> <u-tag size="mini" class="margin-left-xs" text="前门未关" type="warning" plain plainFill></u-tag> <u-tag size="mini" class="margin-left-xs" text="风箱低位报警" type="error" plain plainFill></u-tag> </template> <template v-else> </template> </view> </view> @@ -124,7 +127,7 @@ return { loading:true, // v-model绑定的这个变量不要在分页请求结束中自己赋值！！！ dataList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], dataList: [], } }, methods: { @@ -133,34 +136,41 @@ // 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用 // 这里的pageNo和pageSize会自动计算好，直接传给服务器即可 // 模拟请求服务器获取分页数据，请替换成自己的网络请求 // const params = { // pageNo: pageNo, // pageSize: pageSize, // } // this.$request.queryList(params).then(res => { const params = { pageNo: pageNo, pageSize: pageSize, } this.$api.queryEquList(params).then((res) => { // // 将请求的结果数组传递给z-paging this.$refs.paging.complete(this.dataList); // }).catch(res => { // // 如果请求失败写this.$refs.paging.complete(false); // // 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理 // // 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可 // this.$refs.paging.complete(false); // }) setTimeout(() => { this.$refs.paging.complete(res.result.records); this.loading = false }, 1000) }).catch(res => { // 如果请求失败写this.$refs.paging.complete(false); // 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理 // 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可 this.$refs.paging.complete(false); this.loading = false }) }, itemClick(item){ uni.navigateTo({ url:"/pages/device/control" url: "/pages/device/control?code="+item.code+"&clientId="+item.clientId }) } },onReady() { }, onReady() { setTimeout(() => { this.loading = false }, 1000) }, computed: { equCount() { return this.dataList.length }, onlineCount() { const list = this.dataList.filter(item => item.online) return list.length } } } </script>
