378 lines
12 KiB
Vue
378 lines
12 KiB
Vue
|
<template>
|
||
|
|
<view class="con-body">
|
||
|
|
<view class="con-bg">
|
||
|
|
<!-- 头部 -->
|
||
|
|
<customHeader ref="customHeaderRef" :title="!searchShow?'巡检问题跟踪':'搜索'"
|
||
|
|
:leftFlag="true"
|
||
|
|
:rightFlag="false"
|
||
|
|
@back="handleBack" :searchType="searchShow?1:undefined"
|
||
|
|
></customHeader>
|
||
|
|
|
||
|
|
<!-- 高度来避免头部遮挡 -->
|
||
|
|
<view class="top-height"></view>
|
||
|
|
|
||
|
|
<!-- 搜索处理 -->
|
||
|
|
<customSearch v-if="searchShow"
|
||
|
|
:searchKeywords="searchText"
|
||
|
|
:searchType="searchTypeObj"
|
||
|
|
:checkTypeObj="notictTypeCheck"
|
||
|
|
:searchTypeList="noticeTypeList"
|
||
|
|
@confirm="handleSearchConfirm"
|
||
|
|
></customSearch>
|
||
|
|
<view class="search" v-else @click="handleSearchFocus">
|
||
|
|
<view class="search-bg">
|
||
|
|
<view class="search-left">{{ notictTypeCheck.name?notictTypeCheck.name:'全部' }}</view>
|
||
|
|
<view class="search-right">
|
||
|
|
<uni-icons type="search" size="20" color="#ffffff"></uni-icons>
|
||
|
|
<input class="uni-input" v-model="searchText" placeholder="搜索" placeholder-class="search-color" />
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 列表 -->
|
||
|
|
<mescroll-uni v-if="!searchShow" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
|
||
|
|
:up="upOption" :down="downOption" :fixed="false" class="scroll-h" :class="{'loading-scroll':cssFlag}">
|
||
|
|
<view class="white-bg" :class="{'bg-height':list.length<8}">
|
||
|
|
<block v-if="list.length>0">
|
||
|
|
<view class="report-list" v-for="(item, index) in list" :key="index" @click="handleDetail(item,2)">
|
||
|
|
<view class="r-list" style="padding-bottom:0">
|
||
|
|
<view class="r-name">{{ item.problemDesc }}</view>
|
||
|
|
<view class="r-right">
|
||
|
|
<!-- 问题状态 1=追踪、2=关闭 -->
|
||
|
|
<view v-if="item.problemStatus==1" class="btn-red">进行中</view>
|
||
|
|
<view v-if="item.problemStatus==2" class="btn-green">已解决</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="r-list">
|
||
|
|
<view class="r-left">
|
||
|
|
<view class="r-l-left">跟踪次数<span class="r-gray">{{ item.count }}</span></view>
|
||
|
|
<view class="r-l-right">最近跟踪时间<span class="r-gray">{{parseTime(item.modifyTime,'{m}-{d} {h}:{i}') }}</span></view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="report-border" v-if="index<list.length-1"></view>
|
||
|
|
</view>
|
||
|
|
</block>
|
||
|
|
<view v-else class="no-data">
|
||
|
|
<img :src="'static/images/polling/pic-NoResult.png'" class="no-pic" />
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</mescroll-uni>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { ref, onMounted,computed } from 'vue'
|
||
|
|
import { onLoad,onHide } from '@dcloudio/uni-app';
|
||
|
|
import customHeader from '@/components/customHeader.vue'
|
||
|
|
import customSearch from '@/components/customSearch.vue'
|
||
|
|
import MescrollUni from 'mescroll-uni/mescroll-uni.vue';
|
||
|
|
import { getNavBarPaddingTop } from '@/utils/system.js'
|
||
|
|
import { noticeList } from '@/api/notice.js'
|
||
|
|
import { parseTime } from '@/utils/datetime.js'
|
||
|
|
|
||
|
|
onLoad(async(opt) => {
|
||
|
|
uni.setStorageSync('page_cache',true);
|
||
|
|
})
|
||
|
|
|
||
|
|
// 获取导航栏高度用于内容区域padding
|
||
|
|
const navBarPaddingTop = ref(0);
|
||
|
|
onMounted(() => {
|
||
|
|
navBarPaddingTop.value = getNavBarPaddingTop() * 2;
|
||
|
|
})
|
||
|
|
|
||
|
|
// 搜索处理
|
||
|
|
let searchShow = ref(false);
|
||
|
|
let searchText = ref(undefined);
|
||
|
|
let searchTypeObj = ref({typeId:3,typeName:'巡检类型'});
|
||
|
|
let noticeTypeList=ref([
|
||
|
|
{id:1,name:'日常巡检'},
|
||
|
|
{id:2,name:'临时巡检'},
|
||
|
|
]);
|
||
|
|
let notictTypeCheck = ref({});//选中类型
|
||
|
|
|
||
|
|
onHide(()=>{
|
||
|
|
searchShow.value=false;
|
||
|
|
})
|
||
|
|
|
||
|
|
// 搜索返回操作
|
||
|
|
const handleBack=()=>{
|
||
|
|
searchShow.value=false;
|
||
|
|
}
|
||
|
|
// 获取input 焦点跳转
|
||
|
|
const handleSearchFocus=()=>{
|
||
|
|
searchShow.value = true;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 搜索完返回处理
|
||
|
|
const handleSearchConfirm = (param1,param2)=>{
|
||
|
|
// console.log(param1,param2)
|
||
|
|
notictTypeCheck.value=param1.value;
|
||
|
|
searchText.value=param2.value;;
|
||
|
|
searchShow.value=false;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 清除未读
|
||
|
|
const handleRead = () => {
|
||
|
|
list.value.forEach(item => {
|
||
|
|
item.isRead = false;
|
||
|
|
})
|
||
|
|
}
|
||
|
|
// 查询通知列表
|
||
|
|
let list = ref([]);
|
||
|
|
const mescrollRef = ref(null);
|
||
|
|
const upOption = ref({
|
||
|
|
page: { num: 0, size: 10 },
|
||
|
|
noMoreSize: 5,
|
||
|
|
empty: {
|
||
|
|
tip: '~ 空空如也 ~',
|
||
|
|
icon: "../../../static/images/mescroll-empty.png"
|
||
|
|
},
|
||
|
|
textLoading: '加载中...',
|
||
|
|
textNoMore: '已经到底了'
|
||
|
|
});
|
||
|
|
|
||
|
|
const downOption = ref({
|
||
|
|
auto: false,
|
||
|
|
textInOffset: '下拉刷新',
|
||
|
|
textOutOffset: '释放更新',
|
||
|
|
textLoading: '刷新中...'
|
||
|
|
});
|
||
|
|
|
||
|
|
let cssFlag=ref(false);//控制样式
|
||
|
|
const mescrollInit = (mescroll) => {
|
||
|
|
cssFlag.value = true;
|
||
|
|
mescrollRef.value = mescroll;
|
||
|
|
};
|
||
|
|
|
||
|
|
// 下拉刷新
|
||
|
|
const downCallback = async (mescroll) => {
|
||
|
|
try {
|
||
|
|
console.log("下拉刷新")
|
||
|
|
const res = await getNoticeList(1, upOption.value.page.size);
|
||
|
|
cssFlag.value = false;
|
||
|
|
list.value = res.list;
|
||
|
|
mescroll.resetUpScroll();
|
||
|
|
} catch (error) {
|
||
|
|
mescroll.endErr();
|
||
|
|
} finally {
|
||
|
|
setTimeout(async ()=>{
|
||
|
|
mescroll.endSuccess();
|
||
|
|
},500);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// 上拉加载更多
|
||
|
|
const upCallback = async (mescroll) => {
|
||
|
|
try {
|
||
|
|
console.log("上拉加载更多")
|
||
|
|
let res = await getNoticeList(mescroll.num, mescroll.size);
|
||
|
|
if (mescroll.num === 1) {
|
||
|
|
list.value = res.list;
|
||
|
|
} else {
|
||
|
|
list.value.push(...res.list);
|
||
|
|
}
|
||
|
|
mescroll.endBySize(res.list.length, res.total);
|
||
|
|
} catch (error) {
|
||
|
|
mescroll.endErr();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 获取数据列表
|
||
|
|
const getNoticeList = (pageIndex, pageSize) => {
|
||
|
|
return new Promise(async (resolve) => {
|
||
|
|
let param = {
|
||
|
|
pageIndex,
|
||
|
|
pageSize,
|
||
|
|
searchValue:searchText.value?searchText.value:undefined,
|
||
|
|
taskType:notictTypeCheck.value.id
|
||
|
|
}
|
||
|
|
// let res = await noticeList(param);
|
||
|
|
let res={
|
||
|
|
"code": 200,
|
||
|
|
"msg": "操作成功",
|
||
|
|
"data": {
|
||
|
|
list:[
|
||
|
|
{
|
||
|
|
problemDesc:'西区地下车库入口防汛物资摆放',
|
||
|
|
problemId:202512297899,
|
||
|
|
problemStatus:1,
|
||
|
|
modifyTime:new Date().getTime(),
|
||
|
|
count:0,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
problemDesc:'监控室消防设备阀门确保正常开启闭合',
|
||
|
|
problemId:202512297899,
|
||
|
|
problemStatus:2,
|
||
|
|
modifyTime:new Date().getTime(),
|
||
|
|
count:20,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
problemDesc:'西区地下车库入口防汛物资摆放',
|
||
|
|
problemId:202512297899,
|
||
|
|
problemStatus:1,
|
||
|
|
modifyTime:new Date().getTime(),
|
||
|
|
count:0,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
problemDesc:'监控室消防设备阀门确保正常开启闭合',
|
||
|
|
problemId:202512297899,
|
||
|
|
problemStatus:2,
|
||
|
|
modifyTime:new Date().getTime(),
|
||
|
|
count:20,
|
||
|
|
},{
|
||
|
|
problemDesc:'西区地下车库入口防汛物资摆放',
|
||
|
|
problemId:202512297899,
|
||
|
|
problemStatus:1,
|
||
|
|
modifyTime:new Date().getTime(),
|
||
|
|
count:0,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
problemDesc:'监控室消防设备阀门确保正常开启闭合',
|
||
|
|
problemId:202512297899,
|
||
|
|
problemStatus:2,
|
||
|
|
modifyTime:new Date().getTime(),
|
||
|
|
count:20,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
problemDesc:'监控室消防设备阀门确保正常开启闭合',
|
||
|
|
problemId:202512297899,
|
||
|
|
problemStatus:2,
|
||
|
|
modifyTime:new Date().getTime(),
|
||
|
|
count:20,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
problemDesc:'监控室消防设备阀门确保正常开启闭合',
|
||
|
|
problemId:202512297899,
|
||
|
|
problemStatus:2,
|
||
|
|
modifyTime:new Date().getTime(),
|
||
|
|
count:20,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
problemDesc:'监控室消防设备阀门确保正常开启闭合',
|
||
|
|
problemId:202512297899,
|
||
|
|
problemStatus:2,
|
||
|
|
modifyTime:new Date().getTime(),
|
||
|
|
count:20,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
problemDesc:'监控室消防设备阀门确保正常开启闭合',
|
||
|
|
problemId:202512297899,
|
||
|
|
problemStatus:2,
|
||
|
|
modifyTime:new Date().getTime(),
|
||
|
|
count:20,
|
||
|
|
}
|
||
|
|
],
|
||
|
|
recordCount:2
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
let list = res.data.list || [];
|
||
|
|
|
||
|
|
resolve({
|
||
|
|
list,
|
||
|
|
total: res.recordCount || 0
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
// 查看详情
|
||
|
|
const handleDetail = (item,type) =>{
|
||
|
|
let url= '/pages/business/polling/problemDetail?id='+item.taskId;
|
||
|
|
uni.navigateTo({
|
||
|
|
url
|
||
|
|
});
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.all-body{
|
||
|
|
position: absolute;
|
||
|
|
/* #ifdef APP-PLUS */
|
||
|
|
top:150rpx;
|
||
|
|
height: calc(100vh - 75px);
|
||
|
|
/* #endif */
|
||
|
|
/* #ifndef APP-PLUS */
|
||
|
|
top:120rpx;
|
||
|
|
height: calc(100vh - 64px);
|
||
|
|
/* #endif */
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.mescroll-downwarp .downwarp-progress){
|
||
|
|
border-color:#fff !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.mescroll-downwarp .downwarp-tip){
|
||
|
|
color:#fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.white-bg {
|
||
|
|
width: 670rpx;
|
||
|
|
padding: 30rpx 40rpx 40rpx;
|
||
|
|
margin-bottom: 0;
|
||
|
|
border-radius: 8px 8px 0 0;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.white-bg.bg-height{
|
||
|
|
/* #ifdef APP-PLUS */
|
||
|
|
height: calc(100vh - 150px);
|
||
|
|
/* #endif */
|
||
|
|
/* #ifndef APP-PLUS */
|
||
|
|
height: calc(100vh - 140px);
|
||
|
|
/* #endif */
|
||
|
|
}
|
||
|
|
.scroll-h{
|
||
|
|
/* #ifdef APP-PLUS */
|
||
|
|
height: calc(100vh - 130px);
|
||
|
|
/* #endif */
|
||
|
|
/* #ifndef APP-PLUS */
|
||
|
|
height: calc(100vh - 105px);
|
||
|
|
/* #endif */
|
||
|
|
}
|
||
|
|
|
||
|
|
.report-list{
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.report-border{
|
||
|
|
border-bottom:1px solid #E7E7E7;
|
||
|
|
width:710rpx;
|
||
|
|
height: 1px;
|
||
|
|
margin:20rpx 0;
|
||
|
|
}
|
||
|
|
.report-list .r-list{
|
||
|
|
padding: 5rpx 0;
|
||
|
|
}
|
||
|
|
.report-list .r-list .r-left{
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
.report-list .r-list .r-gray{
|
||
|
|
margin-left:10rpx;
|
||
|
|
}
|
||
|
|
.report-list .r-list .r-blue{
|
||
|
|
margin-left:10rpx;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
.report-list .r-list .r-red{
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
.report-list .r-list .r-name{
|
||
|
|
width:525rpx
|
||
|
|
}
|
||
|
|
.r-left .r-l-left{
|
||
|
|
width:280rpx;
|
||
|
|
}
|
||
|
|
.r-left .r-l-right{
|
||
|
|
|
||
|
|
}
|
||
|
|
.no-data .no-pic{
|
||
|
|
display: block;
|
||
|
|
width:440rpx;
|
||
|
|
height:210rpx;
|
||
|
|
margin:40rpx auto;
|
||
|
|
}
|
||
|
|
:deep(.mescroll-upwarp){
|
||
|
|
display: none !important;
|
||
|
|
}
|
||
|
|
</style>
|