<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>
|
<cu-custom bgColor="bg-gradual-blue" :isBack="false" :isRight="true" @rightclick="">
|
<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 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="flex align-center">
|
<uni-text class="cuIcon-titles text-blue"></uni-text>
|
<view class="title">设备列表</view>
|
</view>
|
<view class="equ-box">
|
<div v-for="(item,index) in dataList" :key="index" class="equ-item">
|
|
</div>
|
|
</view>
|
</view>
|
|
|
|
|
</z-paging>
|
|
</view>
|
</template>
|
|
<script>
|
|
import dayjs from 'dayjs'
|
export default {
|
|
data() {
|
return {
|
loading: true,
|
dataList: [],
|
curDate: dayjs().format('YYYY-MM-DD'),
|
//实时报警数据更新时间（一般10s）
|
refreshTime: '',
|
//报警总数
|
count: 0,
|
//告警总数
|
alarmCount: 0,
|
//故障总数
|
faultCount: 0,
|
//故障机台
|
faultEqus: "",
|
//告警机台
|
alarmEqus: "",
|
}
|
},
|
onTabItemTap: function(e) {
|
getApp().globalData.selectTab = e.index
|
},
|
onShow() {
|
|
},
|
onReady() {
|
|
},
|
methods: {
|
|
queryList(pageNo, pageSize) {
|
this.loading = true;
|
const params = {
|
pageNo: pageNo,
|
pageSize: pageSize,
|
}
|
|
this.$api.queryEquList(params).then((res) => {
|
this.$refs.paging.complete(res.result.records);
|
this.loading = false
|
}).catch(res => {
|
|
this.$refs.paging.complete(false);
|
this.loading = false
|
})
|
|
},
|
|
queryRealFaultData() {
|
//发送数据
|
const message = {
|
req: this.deviceId,
|
tenantId: this.tenantId,
|
timeStamp: new Date(),
|
|
}
|
let opts = {
|
topic: this.$constant.MOBILE_REQ_EQU_REAL_FAULT,
|
message: JSON.stringify(message),
|
}
|
|
this.$mqttTool.publish(opts).then(res => {
|
//console.error(res)
|
})
|
},
|
|
|
|
|
|
|
},
|
onReady() {
|
|
},
|
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>
|
.container {
|
margin: 0 20rpx;
|
padding: 20rpx;
|
box-sizing: border-box;
|
background-color: white;
|
font-family: Helvetica Neue, Helvetica, sans-serif;
|
border-radius: 20rpx;
|
|
}
|
|
.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;
|
margin-top: 20rpx;
|
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>
|
