<template> <view> <cu-custom bgColor="bg-gradual-blueness" :isBack="true" :isRingt="true"> <block slot="backText">返回</block> <block slot="content">隐患排查</block> <block slot="right"> <view @click="$noMultipleClicks(scan)">清单扫描</view> </block> </cu-custom> <view class="top-fixed"> <scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft"> <view class="flex text-center"> <view class="cu-item flex-sub" :class="index==TabCur?'text-blue cur':''" v-for="(item,index) in tabNav" :key="index" @tap="tabSelect" :data-id="index"> {{tabNav[index]}} </view> </view> </scroll-view> <view class="line"></view> </view> <block v-if="TabCur==0"> <scroll-view class="dy-scroll-nobg" scroll-y :style="'top:'+sTop+'px;height:calc(100vh - '+totalHeight+'px)'"> <view v-if="list.length>0" > <view class="dy-card" v-for="item in list" :key="item.LISTMANAGER_ID" @click="$noMultipleClicks(goToList,{listId:item.LISTMANAGER_ID,listName:item.NAME})"> <view class="dy-card-title"> <text><text v-if="item.USER_ID == loginUserId" style="margin-right: 10upx;color: #07BB07;">★</text>{{item.NAME}}</text> <text class="cuIcon-right f30 text-gray"></text> </view> <view class="dy-card-content"> <view class="dy-sub-stitle"> <text class="text-grey">清单类型:{{item.TYPENAME}}</text> <text class="text-grey">排查周期:{{item.PERIODNAME}}</text> </view> <view class="dy-sub-stitle"> <text class="text-grey">包含检查项:{{item.count}}</text> <text class="text-grey">负责人:{{item.USER_NAME}}</text> </view> <view class="dy-stitle"> <text class="text-grey">起止时间:{{item.START_DATE}} - {{item.END_DATE}}</text> </view> <view class="mb12"> <text class="cu-tag bg-red radius">重大风险:{{item.ACOUNT}}</text> <text class="cu-tag bg-orange radius">较大:{{item.BCOUNT}}</text> <text class="cu-tag bg-yellow radius text-white">一般:{{item.CCOUNT}}</text> <text class="cu-tag bg-blue radius">低:{{item.DCOUNT}}</text> </view> <!-- <view class="cu-progress radius striped active">--> <!-- <view class="bg-olive" :style="[{ width:loading?((item.checkedItem>0 && item.count>0)?(item.checkedItem/item.count*100):0)+'%':''}]">{{(item.checkedItem>0 && item.count>0)?(item.checkedItem/item.count*100):0}}%</view>--> <!-- </view>--> </view> </view> </view> <view v-else-if="dataFlag=='noData'" class="dy-null"> <view class="dy-null-img"> <image :src="background[dataFlag].url" mode=""></image> </view> <view class="dy-null-title"> {{background[dataFlag].msg}} </view> </view> <!-- <view class="cu-tabbar-height"></view> --> </scroll-view> </block> <block v-if="TabCur==1"> <scroll-view class="dy-scroll-nobg" scroll-y :style="'top:'+sTop+'px;height:calc(100vh - '+totalHeight+'px)'"> <view v-if="list1.length>0" > <view class="dy-card" v-for="item in list1" :key="item.LISTMANAGER_ID" @click="$noMultipleClicks(goToList,{listId:item.LISTMANAGER_ID,listName:item.NAME})"> <view class="dy-card-title"> <text><text v-if="item.USER_ID == loginUserId" style="margin-right: 10upx;color: #07BB07;">★</text>{{item.NAME}}</text> <text class="cuIcon-right f30 text-gray"></text> </view> <view class="dy-card-content"> <view class="dy-sub-stitle"> <text class="text-grey">清单类型:{{item.TYPENAME}}</text> <text class="text-grey">排查周期:{{item.PERIODNAME}}</text> </view> <view class="dy-sub-stitle"> <text class="text-grey">包含检查项:{{item.count}}</text> <text class="text-grey">负责人:{{item.USER_NAME}}</text> </view> <view class="dy-stitle"> <text class="text-grey">起止时间:{{item.START_DATE}} - {{item.END_DATE}}</text> </view> <view class="mb12"> <text class="cu-tag bg-red radius">重大风险:{{item.ACOUNT}}</text> <text class="cu-tag bg-orange radius">较大:{{item.BCOUNT}}</text> <text class="cu-tag bg-yellow radius text-white">一般:{{item.CCOUNT}}</text> <text class="cu-tag bg-blue radius">低:{{item.DCOUNT}}</text> </view> </view> </view> </view> <view v-else-if="dataFlag=='noData'" class="dy-null"> <view class="dy-null-img"> <image :src="background[dataFlag].url" mode=""></image> </view> <view class="dy-null-title"> {{background[dataFlag].msg}} </view> </view> <view class="cu-tabbar-height"></view> </scroll-view> </block> </view> </template> <script> import { basePath,loginUser,loginSession } from '@/common/tool.js'; export default { data() { return { noClick:true, initflag:false, sTop:0, totalHeight:0, TabCur: 0, scrollLeft: 0, tabNav: ['待排查', '已排查'], loading: false, list: [], list1: [], totalList:[], page: 1, rows: 1000, totalCount:0, isEnd: false, total:0, dataFlag:'noData', isIndex:0, loginUserId:'', } }, onLoad: function() { let that = this; this.loginUserId = loginUser.USER_ID; this.background = require('@/common/background.json'); setTimeout(function() { that.loading = true }, 500) loginSession(); }, onReady() { let that=this; let CustomBar = this.CustomBar; uni.getSystemInfo({ //调用uni-app接口获取屏幕高度 success(res) { //成功回调函数 let titleH=uni.createSelectorQuery().select(".top-fixed"); //想要获取高度的元素名(class/id) titleH.boundingClientRect(data=>{ that._data.sTop=data.height //计算高度:元素高度=窗口高度-元素距离顶部的距离(data.top) that.totalHeight = data.height+CustomBar }).exec() } }) }, onShow() { this.getlist() var _this = this; if(_this.initflag){ _this.initflag = false; _this.list = []; _this.list1 = []; } }, methods: { tabSelect(e) { this.TabCur = e.currentTarget.dataset.id; this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60 }, getlist() { var _this = this; _this.page = 1; _this.isEnd = false; _this.totalCount = 0; _this.total =0; _this.list = []; _this.list1 = []; _this.getData() }, getData(){ var _this=this; console.info(_this.isEnd); if (_this.isEnd){ return } uni.showLoading({ title: '加载中' }) console.info(loginUser); uni.request({ url: basePath + '/app/listmanager/checkList', method: 'POST', dataType: 'json', header: { 'Content-type':'application/x-www-form-urlencoded' }, data: { CORPINFO_ID: loginUser.CORPINFO_ID, USER_ID: loginUser.USER_ID, USER_NAME: loginUser.NAME, CHECK_DEPARTMENT_ID: loginUser.DEPARTMENT_ID, IS_MAIN:loginUser.ISMAIN, }, success: (res) => { if("success" == res.data.result){ uni.hideLoading(); var content = res.data.varList; for(var i=0;i<content.length;i++){ if(content[i].checkCount==0){ this.list.push(content[i]); this.totalList.push(content[i]); }else{ this.list1.push(content[i]); this.totalList.push(content[i]); } } }else{ uni.showToast({ icon:'none', title: '系统异常', duration: 2000 }); } } }) }, scan(){ let _this=this; uni.scanCode({ success: function (res) { let flag=false; let listId = res.result; for(var i=0;i<_this.totalList.length;i++){ if(_this.totalList[i].LISTMANAGER_ID==listId){ flag=true; _this.goToList({listId:_this.totalList[i].LISTMANAGER_ID,listName:_this.totalList[i].NAME}); break; } } if(!flag){ uni.showToast({ title: "无法检查该清单", duration: 2000 }); } } }); }, // 滑动到底方法 scrolltolower(){ var _this = this; _this.getData(); }, //跳转事件 goToList(e) { uni.navigateTo({ url: '/pages/application/hidden-trouble-investigation/hidden-trouble-app/hidden-trouble-spot?listId='+e.listId+'&listName='+e.listName }); // uni.navigateTo({ // url: '/pages/application/hidden-trouble-investigation/hidden-trouble-app/check-items-list?listId='+e.listId+'&listName='+e.listName // }); } } } </script> <style> .dy-list { background: #fff; margin-top: 2upx; } .dy-card{ background-color: #fff; border-radius: 10upx; margin:30upx } .dy-stitle{ margin: 16upx 0; } .dy-sub-stitle{ margin: 16upx 0; display: flex; justify-content: space-between; } .dy-card-title{ display: flex; justify-content: space-between; border-bottom: 1px solid #eee; min-height: 80upx; line-height: 80upx; padding: 0 30upx; } .dy-card-content{ padding: 0upx 30upx 30upx; } </style>