<template>
|
<view class="app">
|
<z-paging ref="paging" v-model="dataList" show-refresher-update-time @query="queryList" :hide-empty-view="true">
|
<!-- 需要固定在顶部不滚动的view放在slot="top"的view中，如果需要跟着滚动，则不要设置slot="top" -->
|
<template #top>
|
|
<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 text-sm">{{curDate}}</text>
|
</view>
|
|
</view>
|
|
</view>
|
<view class="flex flex-direction padding-xs">
|
<view class="flex">
|
<view class="flex-sub flex flex-direction">
|
<text class="text-df">报警总数</text>
|
<text class="text-bold text-sl margin-top-xs text-red margin-top-sm">{{count}}
|
<text class="text-gray text-sm margin-left-xs">次</text></text>
|
|
</view>
|
<view class="flex-twice flex flex-direction justify-between">
|
<view class="flex-sub flex">
|
<view class="flex flex-direction flex-sub">
|
<text class="text-gray text-xs">报警信息</text>
|
|
<text class="text-black">故障次数:</text>
|
<text class="margin-lr-xs text-red text-bold text-xl">{{faultCount}}</text>
|
<text class="text-gray text-xs"></text>
|
|
|
</view>
|
<view class="flex flex-direction flex-sub">
|
<text class="text-gray text-xs">机台信息</text>
|
|
<text class="text-black">故障机台:</text>
|
<text class="margin-lr-xs text-red">{{faultEqus}}</text>
|
<text class="text-gray text-xs"></text>
|
|
|
</view>
|
|
</view>
|
<view class="flex-sub flex">
|
<view class="flex flex-direction flex-sub" >
|
<text class="text-white text-xs">报警信息</text>
|
|
<text class="text-black">告警次数:</text>
|
<text class="margin-lr-xs text-orange text-bold text-xl">{{alarmCount}}</text>
|
<text class="text-gray text-xs"></text>
|
|
|
</view>
|
<view class="flex flex-direction flex-sub">
|
<text class="text-white text-xs">机台信息</text>
|
<text class="text-black">告警机台:</text>
|
<text class="margin-lr-xs text-orange">{{alarmEqus}}</text>
|
<text class="text-gray text-xs"></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</template>
|
<view class="container">
|
|
<view class="equ-box borderTop">
|
<div v-for="i in 9" class="equ-item">
|
|
</div>
|
|
</view>
|
</view>
|
|
|
|
|
</z-paging>
|
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
dataList: [],
|
loading: false,
|
//实时报警数据更新时间（一般10s）
|
refreshTime: '',
|
//报警总数
|
count: 0,
|
//告警总数
|
alarmCount: 0,
|
//故障总数
|
faultCount: 0,
|
//故障机台
|
faultEqus: "",
|
//告警机台
|
alarmEqus: "",
|
curDate: dayjs().format('YYYY-MM-DD'),
|
}
|
},
|
methods:{
|
queryList(pageNo, pageSize) {
|
this.loading = true;
|
// 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
|
// 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
|
// 模拟请求服务器获取分页数据，请替换成自己的网络请求
|
const params = {
|
pageNo: pageNo,
|
pageSize: pageSize,
|
}
|
//
|
|
|
this.$api.querySampleList(params).then((res) => {
|
// // 将请求的结果数组传递给z-paging
|
//实时故障
|
if (this.tabCurrent === 0) {
|
this.queryRealFaultData()
|
}else if(this.tabCurrent === 1){
|
this.$refs.hisWarining.init();
|
}
|
|
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
|
})
|
|
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.container {
|
margin: 0 20rpx;
|
padding: 20rpx;
|
box-sizing: border-box;
|
background-color: white;
|
font-family: Helvetica Neue, Helvetica, sans-serif;
|
|
}
|
|
.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;
|
}
|
}
|
}
|
|
.equ-box {
|
display: flex;
|
flex-wrap: wrap;
|
gap: 20rpx 0px;
|
justify-content: space-between;
|
}
|
|
.equ-item {
|
width: calc((100% - 20rpx)/2);
|
height: 200rpx;
|
border-radius: 20rpx;
|
background-color: #ecf5ff;
|
}
|
|
.borderTop {
|
border-top: 2rpx solid #f2f2f2;
|
padding-top: 20rpx;
|
}
|
</style>
|
