<template>
|
<view class="app">
|
|
|
<z-paging ref="paging" v-model="dataList" show-refresher-update-time @query="queryList">
|
<!-- 需要固定在顶部不滚动的view放在slot="top"的view中，如果需要跟着滚动，则不要设置slot="top" -->
|
<template #top>
|
<cu-custom bgColor="bg-gradual-blue" :isBack="false">
|
<block slot="content">设备列表</block>
|
</cu-custom>
|
|
|
<view class="card-box dynamic shadow">
|
<view class="title-box margin-bottom-sm">
|
<view style="width: 100vw;" 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 margin-right-lg">2024-07-14</text>
|
</view>
|
|
</view>
|
|
</view>
|
<view class="flex flex-direction padding-xs">
|
<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-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-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-gray text-sm margin-left-xs">台</text></text>
|
</view>
|
</view>
|
<view class="margin-top">
|
<u-scroll-list>
|
|
</u-scroll-list>
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
<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="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>
|
</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>
|
</view>
|
|
<view class="info-box">
|
<view class="left flex-sub">
|
<view class="title text-sm">烘干药材:</view>
|
<view class="title text-sm">生地黄</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>
|
</view>
|
|
<view class="info-box">
|
<view class="left flex-sub">
|
<view class="title text-sm text-cut">报警信息:</view>
|
<view class="flex title text-sm">
|
<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>
|
</view>
|
</view>
|
|
</view>
|
|
</view>
|
|
</u-skeleton>
|
</z-paging>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
loading:true,
|
// v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
|
dataList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
|
}
|
},
|
methods: {
|
queryList(pageNo, pageSize) {
|
this.loading = true;
|
// 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
|
// 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
|
// 模拟请求服务器获取分页数据，请替换成自己的网络请求
|
// const params = {
|
// pageNo: pageNo,
|
// pageSize: pageSize,
|
// }
|
// this.$request.queryList(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.loading = false
|
}, 1000)
|
},
|
itemClick(item){
|
uni.navigateTo({
|
url:"/pages/device/control"
|
})
|
}
|
|
},onReady() {
|
|
setTimeout(() => {
|
this.loading = false
|
}, 1000)
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.app {
|
width: 100%;
|
max-height: 100vh;
|
overflow: hidden;
|
}
|
|
.card-box {
|
margin: 20rpx;
|
padding: 20rpx;
|
box-sizing: border-box;
|
background-color: white;
|
border-radius: 20rpx;
|
font-family: Helvetica Neue, Helvetica, sans-serif;
|
|
}
|
|
|
.title-box {
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
|
.left {
|
display: flex;
|
align-items: center;
|
|
.title {
|
margin: 0 10rpx;
|
font-weight: bold;
|
}
|
}
|
|
.right {
|
display: flex;
|
align-items: center;
|
|
.title {
|
margin: 0 10rpx;
|
font-weight: bold;
|
}
|
}
|
}
|
|
.info-box {
|
margin-top: 20rpx;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
|
.left {
|
display: flex;
|
align-items: center;
|
|
.title {
|
margin: 0 10rpx;
|
}
|
}
|
|
.right {
|
display: flex;
|
align-items: center;
|
|
.title {
|
margin: 0 10rpx;
|
}
|
}
|
}
|
</style>
|
