You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
301 lines
7.5 KiB
301 lines
7.5 KiB
<template>
|
|
<view class="sheShiXunJian-container">
|
|
<u-navbar bgColor="#ffffff" :placeholder="true" titleStyle="font-weight:600" title="设施巡检" :autoBack="true">
|
|
|
|
</u-navbar>
|
|
<u-sticky bgColor="#fff">
|
|
<u-tabs @change="changeTabs" :current="currentTabs" :list="tabsList" lineWidth="187" lineColor="#1890FF"
|
|
:activeStyle="{ color: '#1890FF' }" :inactiveStyle="{ color: '#333333' }"
|
|
:itemStyle="{ width: '50%', height: '44px', fontSize: '14px' }"></u-tabs>
|
|
</u-sticky>
|
|
<scroll-view v-if="pollingLists.length > 0" scroll-y="true" class="scroll-Y" refresher-enabled="true"
|
|
:refresher-triggered="triggered" @refresherrefresh="onRefresh" @refresherrestore="onRestore"
|
|
@scrolltolower="scrolltolower" refresher-background="#f6f7fb">
|
|
<view v-for="(item, index) in pollingLists" class="scroll-item"
|
|
@click="goToPage(item.facilitiesId, item.id)">
|
|
<view class="item-top">
|
|
<view class="item-top-left">
|
|
<view class="item-top-bianhao">编号</view>
|
|
<text class="item-top-number">{{ item.facilitiesCode }}</text>
|
|
</view>
|
|
<view class="item-top-bianhao" style="color: red;">{{ item.isError === 'Y' ? '巡检异常' : '' }}</view>
|
|
</view>
|
|
<view class="item-bottom">
|
|
<image class="item-bottom-left" src="../../../static/images/polling/xiaofanshuan.png"
|
|
mode="scaleToFill" />
|
|
<view class="item-bottom-right">
|
|
<view class="right-title">{{ item.facilitiesName }}</view>
|
|
<view class="right-area">
|
|
<image src="../../../static/images/implement/area.png" mode="scaleToFill" />
|
|
<view>{{ item.address }}</view>
|
|
</view>
|
|
<view class="right-area">
|
|
<image src="../../../static/images/implement/time.png" mode="scaleToFill" />
|
|
<view>上次巡检时间：{{ item.year }}-{{ item.month }}-{{ item.day }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<u-line></u-line>
|
|
<view class="item-bottom-btn">
|
|
<u-button class="btn-info" text="查看详情" :style="{
|
|
backgroundColor: item.isOver == '0' ? '#FF9E49' : '#4996FF'
|
|
}"></u-button>
|
|
</view>
|
|
</view>
|
|
<view style="height: 50rpx; width: 100%"><u-loadmore :status="loadmoreStatus" lineColor="#1CD29B"
|
|
@loadmore="getLoadmore" /></view>
|
|
</scroll-view>
|
|
<u-empty v-else class="scroll-Y" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
inspectionPlanList
|
|
} from '@/api/indexpage/polling/index.js';
|
|
export default {
|
|
data() {
|
|
return {
|
|
triggered: false,
|
|
currentTabs: 0,
|
|
pollingLists: [],
|
|
loadmoreStatus: 'loadmore',
|
|
tabsList: [{
|
|
name: '未巡检',
|
|
badge: {
|
|
value: null
|
|
}
|
|
},
|
|
{
|
|
name: '已巡检',
|
|
badge: {
|
|
value: null
|
|
}
|
|
}
|
|
]
|
|
};
|
|
},
|
|
onShow() {
|
|
this.currentTabs = 0;
|
|
this.getInspectionPlanList();
|
|
},
|
|
methods: {
|
|
changeTabs(value) {
|
|
if (value.name == '未巡检') {
|
|
this.currentTabs = 0;
|
|
} else {
|
|
this.currentTabs = 1;
|
|
}
|
|
this.getInspectionPlanList();
|
|
},
|
|
goToPage(ssId, id) {
|
|
//携带设备id
|
|
this.$tab.navigateTo(
|
|
`/pages/indexpage/sheShiXunJian/XunJianDetail/XunJianDetail?ssId=${ssId}&isType=${this.currentTabs}&xxId=${id}`
|
|
);
|
|
},
|
|
onRefresh() {
|
|
// console.log("自定义下拉刷新被触发");
|
|
if (this.triggered) return;
|
|
this.triggered = true;
|
|
this.pollingLists = [];
|
|
this.getInspectionPlanList();
|
|
},
|
|
onRestore() {
|
|
this.triggered = false; // 需要重置
|
|
// console.log("重置");
|
|
},
|
|
scrolltolower() {
|
|
if (this.triggered) return;
|
|
// console.log("滚动到底部");
|
|
this.triggered = true;
|
|
this.getInspectionPlanList();
|
|
},
|
|
goSearch() {
|
|
this.pollingLists = [];
|
|
this.getInspectionPlanList();
|
|
},
|
|
getLoadmore() {
|
|
this.getInspectionPlanList();
|
|
},
|
|
async getInspectionPlanList() {
|
|
this.loadmoreStatus = 'loading';
|
|
let result = await inspectionPlanList()
|
|
this.triggered = false;
|
|
if (result.code == 200) {
|
|
let isDone = [],
|
|
isNoDone = [];
|
|
|
|
result.rows.forEach((item, index) => {
|
|
if (item.isOver == '0' && item.status == '1') {
|
|
isNoDone.push(item);
|
|
} else if (item.isOver == '1') {
|
|
isDone.push(item);
|
|
}
|
|
});
|
|
this.pollingLists = [];
|
|
if (this.currentTabs == 0) {
|
|
this.pollingLists = isNoDone;
|
|
this.$set(this.tabsList[0].badge, 'value', this.pollingLists.length);
|
|
} else {
|
|
this.pollingLists = isDone;
|
|
}
|
|
if (this.pollingLists.length < result.total) {
|
|
this.loadmoreStatus = 'loadmore';
|
|
} else {
|
|
this.loadmoreStatus = 'nomore';
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.sheShiXunJian-container {
|
|
font-family: Noto Sans S Chinese;
|
|
|
|
/deep/ .u-badge {
|
|
margin-left: -7px !important;
|
|
margin-top: -11px;
|
|
border: 2px solid #ffffff;
|
|
background-color: #f54547;
|
|
font-family: Noto Sans S Chinese;
|
|
font-weight: 500;
|
|
font-size: 11px;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.scroll-Y {
|
|
overflow: hidden;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 36rpx 30rpx 0 30rpx;
|
|
// #ifndef APP-PLUS
|
|
height: calc(100vh - 44px - 44px);
|
|
// #endif
|
|
// #ifdef APP-PLUS
|
|
height: calc(100vh - 44px);
|
|
// #endif
|
|
|
|
.scroll-item {
|
|
box-sizing: border-box;
|
|
padding: 26rpx 20rpx 34rpx 22rpx;
|
|
background-color: #fff;
|
|
width: 100%;
|
|
height: 338rpx;
|
|
margin-bottom: 30rpx;
|
|
border-radius: 10rpx;
|
|
box-shadow: 0px 3px 4px 0px rgba(190, 207, 228, 0.4);
|
|
|
|
.item-top {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 40rpx;
|
|
|
|
.item-top-left {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.item-top-bianhao {
|
|
text-align: center;
|
|
line-height: 34rpx;
|
|
font-weight: 500;
|
|
font-size: 12px;
|
|
color: #ffffff;
|
|
width: 82rpx;
|
|
height: 34rpx;
|
|
background: #16c4af;
|
|
border-radius: 9px;
|
|
margin-right: 14rpx;
|
|
}
|
|
|
|
.item-top-number {
|
|
font-weight: bold;
|
|
font-size: 15px;
|
|
color: #333333;
|
|
}
|
|
}
|
|
|
|
.item-top-right {
|
|
width: 154rpx;
|
|
height: 38rpx;
|
|
}
|
|
}
|
|
|
|
.item-bottom {
|
|
margin-top: 22rpx;
|
|
height: 124rpx;
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 28rpx;
|
|
|
|
.item-bottom-left {
|
|
height: 100%;
|
|
width: 130rpx;
|
|
margin-right: 16rpx;
|
|
}
|
|
|
|
.item-bottom-right {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
height: 100%;
|
|
width: calc(100% - 130rpx);
|
|
|
|
.right-title {
|
|
width: 100%;
|
|
font-weight: 500;
|
|
font-size: 15px;
|
|
color: #333333;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.right-area {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
image {
|
|
width: 26rpx;
|
|
height: 24rpx;
|
|
margin-right: 16rpx;
|
|
}
|
|
|
|
view {
|
|
width: calc(100% - 20rpx);
|
|
font-weight: normal;
|
|
font-size: 13px;
|
|
color: #7d858e;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.item-bottom-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100rpx;
|
|
|
|
.btn-info {
|
|
width: 432rpx;
|
|
height: 50rpx;
|
|
font-weight: normal;
|
|
font-size: 14px;
|
|
color: #ffffff;
|
|
box-shadow: 0px 3px 4px 0px rgba(190, 207, 228, 0.4);
|
|
border-radius: 5px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |