<template>
|
<view class="check_index">
|
<view class="check_titles">
|
<view class="check_title_left">{{bigDeviceName}}</view>
|
<view class="check_title_right">规格型号：{{bigDeviceModel}}</view>
|
</view>
|
<view class="check_select">
|
<view @click="startClick()">
|
<u--input placeholder="起始时间" disabled disabledColor="#FFFFFF" placeholderStyle="color:#999999;padding-left:10px" v-model="search.strTime" border="none" suffixIcon="calendar" suffixIconStyle="color: #666666;font-size:30px;"></u--input>
|
</view>
|
<view @click="endClick()">
|
<u--input placeholder="截止时间" disabled disabledColor="#FFFFFF" placeholderStyle="color:#999999;padding-left:10px" v-model="search.endTime" border="none" suffixIcon="calendar" suffixIconStyle="color: #666666;font-size:30px;"></u--input>
|
</view>
|
<view style="width:60px">
|
<u-button type="primary" color="#1977FF" text="查询" @click="searchCheckList(bigDeviceId)"></u-button>
|
</view>
|
</view>
|
<view class="check_main">
|
<scroll-view
|
scroll-y="true"
|
class="check_index_scroll"
|
:scroll-top="scrollTop"
|
refresher-enabled="true"
|
refresher-background="#EAEAEA"
|
:refresher-triggered="triggered"
|
@refresherpulling="refresherrefresh"
|
@scrolltolower="scrolltoLower">
|
<view class="check_card_index" v-for="(item,index) in checkDatas" :key="index">
|
<view class="check_card_header">
|
<view class="check_header_times">{{item.inspectTime}}</view>
|
<view class="check_header_names">{{item.realName}}</view>
|
</view>
|
<view class="check_card_main">
|
<view class="check_main_items">
|
<view class="check_main_items_titles">设备编号</view>
|
<view class="check_main_items_datas">{{item.bigNumber}}</view>
|
</view>
|
<view class="check_main_items">
|
<view class="check_main_items_titles">设备类型</view>
|
<view class="check_main_items_datas">{{item.dictName}}</view>
|
</view>
|
<view class="check_main_items">
|
<view class="check_main_items_titles">安装位置</view>
|
<view class="check_main_items_datas">{{item.bigPosition}}</view>
|
</view>
|
<view class="check_main_items">
|
<view class="check_main_items_titles">检查类型</view>
|
<view class="check_main_items_datas">{{showTypes(item.inspectTypes)}}</view>
|
</view>
|
<view class="check_main_items">
|
<view class="check_main_items_titles">检查结果</view>
|
<view class="check_main_items_datas" @click="showResults(item.inspectResult)">{{item.inspectResult === null?'':item.inspectResult}}</view>
|
</view>
|
</view>
|
</view>
|
<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" />
|
</scroll-view>
|
</view>
|
<u-datetime-picker
|
:show="showStart"
|
v-model="startTime"
|
mode="date"
|
@confirm="changeStart"
|
@cancel="showStart = false"
|
></u-datetime-picker>
|
<u-datetime-picker
|
:show="showEnd"
|
v-model="endTime"
|
mode="date"
|
@confirm="changeEnd"
|
@cancel="showEnd = false"
|
></u-datetime-picker>
|
<u-popup :show="showResult" @close="closeResult" mode="center" :round="6" :closeable="true">
|
<view class="result_main_style">
|
{{resultContent===null?'':resultContent}}
|
</view>
|
</u-popup>
|
</view>
|
</template>
|
|
<script>
|
import {changeTime,throttle} from '@/plugins/public.js'
|
export default{
|
data(){
|
return{
|
showResult:false,//是否展示检查结果弹框
|
resultContent:"",//检查结果内容
|
search:{},//查询条件
|
showStart:false,//是否显示起始时间
|
showEnd:false,//是否展示截止时间弹框
|
startTime:Number(new Date()),//起始时间默认当天
|
endTime:Number(new Date()),//截止时间默认当天
|
checkDatas:[],//列表数据
|
pageNum: 1,
|
pageSize: 10,
|
loadPage: 0,
|
scrollTop: 0,
|
triggered: true,
|
status: 'loading',
|
loadText: {
|
loading: '努力加载中',
|
nomore: '没有更多数据了'
|
},
|
bigDeviceId:null,
|
bigDeviceModel:null,//规格型号
|
bigDeviceName:null,//设备名称
|
}
|
},
|
onLoad(options) {
|
this.bigDeviceName = options.bigDeviceName
|
this.bigDeviceModel = options.bigDeviceModel
|
this.bigDeviceId = options.bigDeviceId
|
this.searchCheckList(options.bigDeviceId)
|
},
|
methods:{
|
//展示检查结果
|
showResults(value){
|
this.showResult = true
|
this.resultContent =value
|
},
|
//关闭弹框
|
closeResult(){
|
this.showResult = false
|
},
|
//展示检查类型
|
showTypes(val){
|
let str=''
|
let str1 = ''
|
if(val.length===1){
|
str = val[0].typeName
|
}else{
|
val.forEach(item=>{
|
str+=item.typeName+','
|
})
|
str1 = str.lastIndexOf(',')
|
str = str.substring(0,str1)
|
}
|
return str
|
},
|
//查询列表
|
searchCheckList(val){
|
this.triggered = true;
|
this.checkDatas = [];
|
let params =Object.assign({},this.search,{
|
pageNum: this.pageNum,
|
pageSize:this.pageSize,
|
bigDeviceId:val,
|
})
|
this.$api.reboSystem.getCheckDeviceLists(params).then(res=>{
|
if(res.statusMsg === 'ok'){
|
this.checkDatas = res.data.list
|
this.loadPage = res.data.pages;
|
this.triggered = false;
|
this.status = 'nomore';
|
}else{
|
uni.$u.toast(res.statusMsg);
|
}
|
}).catch((err) => {
|
uni.$u.toast('请检查网络服务或联系管理员！')
|
})
|
},
|
//自定义下拉刷新
|
refresherrefresh: throttle(function() {
|
this.status = 'loading';
|
this.pageNum = 1;
|
this.searchCheckList(this.bigDeviceId);
|
uni.$u.toast('刷新成功');
|
}, 500),
|
//触底刷新
|
scrolltoLower: throttle(function() {
|
this.status = 'loading';
|
if(this.pageNum >= this.loadPage) {
|
setTimeout(() => {
|
this.status = 'nomore'
|
uni.$u.toast('没有更多数据了');
|
},1000)
|
return
|
} else {
|
this.pageNum+=1
|
let params =Object.assign({},this.search,{
|
pageNum: this.pageNum,
|
pageSize:this.pageSize,
|
bigDeviceId:this.bigDeviceId
|
})
|
this.$api.reboSystem.getCheckDeviceLists(params).then(res=>{
|
if(res.statusMsg === 'ok'){
|
this.checkDatas.push(...res.data.list)
|
this.loadPage = res.data.pages;
|
this.triggered = false;
|
this.status = 'nomore';
|
}else{
|
uni.$u.toast(res.statusMsg);
|
}
|
}).catch((err) => {
|
uni.$u.toast('请检查网络服务或联系管理员！')
|
})
|
}
|
}, 1500),
|
//点击弹出选择起始时间
|
startClick(){
|
this.showStart = true
|
this.$set(this.search,'strTime','')
|
},
|
//确定选择的起始时间
|
changeStart({value}){
|
this.showStart = false
|
this.$set(this.search,'strTime',changeTime(value))
|
},
|
//点击弹出选择截止时间
|
endClick(){
|
this.showEnd = true
|
this.$set(this.search,'endTime','')
|
},
|
//确定选择的起始时间
|
changeEnd({value}){
|
this.showEnd = false
|
this.$set(this.search,'endTime',changeTime(value))
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.check_index{
|
height: 100vh;
|
background-color: #F6F6F6;
|
padding: 10px 15px;
|
.check_titles{
|
line-height: 36px;
|
// display: flex;
|
justify-content: space-between;
|
background-color: #EDF1F6;
|
border-radius: 4px;
|
margin-bottom: 20px;
|
.check_title_left{
|
color: #1977FF;
|
font-size: 17px;
|
padding-left: 10px;
|
position: relative;
|
&::before{
|
width: 2px;
|
height: 17px;
|
background-color: #1977FF;
|
content: "";
|
position: absolute;
|
top: 11px;
|
left: 0px;
|
}
|
}
|
.check_title_right{
|
padding-left: 10px;
|
color: #333333;
|
font-size: 17px;
|
padding-right: 5px;
|
}
|
}
|
.check_select{
|
display: flex;
|
margin-bottom: 20px;
|
}
|
.check_main{
|
height: calc(100% - 135px);
|
.check_index_scroll{
|
height: 90%;
|
|
.check_card_index{
|
height: 200px;
|
background-color: #FFFFFF;
|
border-radius: 6px;
|
margin-bottom: 10px;
|
.check_card_header{
|
line-height: 40px;
|
border-bottom: 1px solid #F2F2F2;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
.check_header_times{
|
font-size: 15px;
|
padding-left: 28px;
|
color: #333333;
|
position: relative;
|
&::before{
|
width: 15px;
|
height: 15px;
|
content: "";
|
background: url('../../static/times.png') no-repeat;
|
position: absolute;
|
top: 13px;
|
left: 10px;
|
}
|
}
|
.check_header_names{
|
padding-right: 15px;
|
font-size: 17px;
|
color: #1977FF;
|
}
|
}
|
.check_card_main{
|
display: flex;
|
flex-direction: column;
|
justify-content: space-around;
|
.check_main_items{
|
display: flex;
|
line-height: 30px;
|
.check_main_items_titles{
|
padding-left: 15px;
|
width: 100px;
|
flex: none;
|
color: #999999;
|
font-size: 15px;
|
}
|
.check_main_items_datas{
|
padding-right: 10px;
|
color: #333333;
|
font-size: 15px;
|
flex: 1;
|
text-align: right;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
::v-deep .u-input {
|
margin-right: 10px!important;
|
background-color: #FFFFFF;
|
border-radius: 0px;
|
height: 40px;
|
}
|
.result_main_style{
|
width: 200px;
|
height: 200px;
|
padding: 30px 15px 15px;
|
overflow: auto;
|
margin-right: 15px;
|
}
|
</style>
|
