<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">{{new Date().toLocaleDateString().replace(/\//g, '-')}}</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">{{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">{{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">{{onlineCount}}
|
<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">{{$lget(item,'name')}}</view>
|
<view class="flex title text-green text-sm">
|
<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">{{$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 text-gray">--</view>
|
</view>
|
<view class="right" style="min-width: 240rpx;">
|
<view class="title text-sm">烘干时间:</view>
|
<view class="title text-sm text-gray">--</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">
|
<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>
|
|
</view>
|
|
</view>
|
|
</u-skeleton>
|
</z-paging>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
loading: true,
|
// v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
|
dataList: [],
|
}
|
},
|
methods: {
|
queryList(pageNo, pageSize) {
|
this.loading = true;
|
// 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
|
// 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
|
// 模拟请求服务器获取分页数据，请替换成自己的网络请求
|
const params = {
|
pageNo: pageNo,
|
pageSize: pageSize,
|
}
|
this.$api.queryEquList(params).then((res) => {
|
// // 将请求的结果数组传递给z-paging
|
this.$refs.paging.complete(res.result.records);
|
this.loading = false
|
}).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?code="+item.code+"&clientId="+item.clientId
|
})
|
}
|
|
},
|
onReady() {
|
|
},
|
computed: {
|
equCount() {
|
return this.dataList.length
|
},
|
onlineCount() {
|
const list = this.dataList.filter(item => item.online)
|
return list.length
|
}
|
}
|
}
|
</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>
|
