<template> <div class="patrolTaskPipe"> <div class="publicTabNF"> <!-- 顶部切换卡 --> <div class="topTabsNF"> <div class="tabsList" v-for="item in AllData.TopTabsData" :key="item.status" @click="topTabsChange(item)" :class="{ tabsListActive: AllData.ActiveID == item.status }" > <van-badge :content="item.count" solute="top-left" :offset="[10, 14]"> <div class="box">{{ item.statusName }}</div> </van-badge> </div> </div> <!-- 中部搜索框 --> <div class="searchBox"> <input class="uni-input searchInput" v-model="AllData.searchV" confirm-type="search" placeholder="综合搜索" @confirm="getList(true)" /> <img :src="getImgPatrol('Search.png')" class="SearchIcon" alt="" @click="getList(true)" /> </div> </div> <!-- 下部数据列表 --> <div class="dataListBox"> <van-empty v-if="AllData.dataList.length == 0" style="margin-top: 20px" description="暂无数据" /> <van-list v-model:loading="AllData.loading" :finished="AllData.finished" finished-text="已经到底了~~" :offset="50" @load="lowerRefresh" > <div v-for="(item, index) in AllData.dataList" :key="index" class="dataList" @click="checkDetail(item)"> <div class="dataListTitle"> <!-- 标题 --> <div class="fontView"> <img :src="getImgPatrol('ListiIcon.png')" alt="" class="fontViewIcon" /> {{ item.taskName }} </div> </div> <div class="dataListTime"> <div class="dataListTimeLabel">巡查时间:</div> <div class="dataListTimeValue ellipsis">{{ item.planStartDatetime }} 至 {{ item.planEndDatetime }}</div> </div> <div class="dataListSolid"> <!-- 分割线 --> </div> <div class="dataListBtn" v-show="item.status != 'done'"> <div class="typeView" :class="[ item.status == 'to_start' ? 'typeClass_to_start' : item.status == 'expired' ? 'typeClass_expired' : item.status == 'proceed' ? 'typeClass_proceed' : '', ]" > <img :src=" item.status == 'to_start' ? getImgPatrol('wks.png') : item.status == 'expired' ? getImgPatrol('ycs.png') : item.status == 'proceed' ? getImgPatrol('jxz.png') : '' " alt="" class="typeViewIcon" /> {{ item.status == 'to_start' ? '未开始' : item.status == 'expired' ? '未完成' : item.status == 'proceed' ? '进行中' : '' }} </div> <!-- 按钮 --> <div class="ListBotton ListBotton_1" v-show="item.status == 'proceed'" @click="ToPath(item.status, 1, item.id, item.sectionType)" > 重新巡查 <!-- --> </div> <div class="ListBotton ListBotton_2" v-show="item.status == 'proceed'" @click="ToPath(item.status, 2, item.id, item.sectionType)" > 继续巡查 </div> <div class="ListBotton ListBotton_3" v-show="item.status == 'to_start' || item.status == 'expired'" @click="ToPath(item.status, 3, item.id, item.sectionType)" > 开始巡查 </div> </div> <img :src="getImgPatrol('DoneImg.png')" v-show="item.status == 'done'" alt="" class="DoneImg" /> </div> </van-list> </div> </div> </template> <script setup> import { nextTick, onMounted, reactive, getCurrentInstance } from 'vue'; import { getImgPatrol } from '@/utils/common.js'; import { patrolTaskpage, patrolTaskbeginPatrol, status_statistics, patrolTaskRestartPatrol } from '@/api/xuncha'; import { getCurrentPositon } from '@/utils/common.js'; import { useStore } from '@/pinia/store.js'; import { useRouter } from 'vue-router'; const { proxy } = getCurrentInstance(); const pinias = useStore(); const router = useRouter(); const AllData = reactive({ loading: false, finished: false, // 顶部tab数据源 TopTabsData: [ { count: null, status: 'to_start', statusName: '未开始', }, { count: null, status: 'proceed', statusName: '进行中', }, { count: null, status: 'done', statusName: '已完成', }, ], // 顶部tab选取项 ActiveID: 'to_start', // 数据列表 dataList: [], triggered: false, ListPage: { page: 1, size: 10, total: 0, //当前接口返回数据的总条数 }, searchV: '', }); /** * 点击按钮执行巡查功能 */ const ToPath = (type, num, id, sectionType) => { console.log(type, 'type'); if (type == 'proceed' && num == 1) { // 重新 BeginPatrol2(type, num, id, sectionType); } else if (type == 'to_start' || type == 'expired') { // 开始巡查 BeginPatrol(type, num, id, sectionType); } else if (type == 'proceed' && num == 2) { // 继续巡查 proxy.showSuccessToast('开始巡查'); router.push({ path: '/inspectionA', query: { type: type, num: num, id: id, sectionType: sectionType }, }); } }; /** * 开始巡查 */ const BeginPatrol = (type, num, id, sectionType) => { getCurrentPositon((lng, lat, address) => { console.log('获取安卓定位参数--', lng, '--', lat, '--', address); patrolTaskbeginPatrol({ taskId: id, startPlace: address, }).then((res) => { if (res && res.code == 200) { proxy.showSuccessToast('开始巡查'); router.push({ path: '/inspectionA', query: { id: id }, }); } else { proxy.showFailToast(res.msg || '巡查启动失败,请稍后再试'); } }); }); }; /** * 重新巡查 */ const BeginPatrol2 = (type, num, id, sectionType) => { patrolTaskRestartPatrol({ taskId: id, }).then((res) => { if (res && res.code == 200) { proxy.showSuccessToast('重新开始巡查'); router.push({ path: '/inspectionA', query: { id: id }, }); } else { proxy.showFailToast('巡查启动失败,请稍后再试'); } }); }; // 顶部tab切换事件 const topTabsChange = (item) => { AllData.ActiveID = item.status; AllData.ListPage.page = 1; AllData.dataList = []; getList(true); }; const lowerRefresh = (e) => { if (AllData.ListPage.total > AllData.dataList.length) { AllData.ListPage.page += 1; getList(); } else { AllData.finished = true; AllData.loading = false; } }; // 列表查询接口 const getList = async (bol) => { pinias.showLoading(); AllData.finished = false; AllData.loading = true; if (bol) { // 初始化分页 AllData.ListPage.page = 1; AllData.ListPage.size = 10; } let params = { pageNum: AllData.ListPage.page, pageSize: AllData.ListPage.size, statusList: AllData.ActiveID == 'to_start' ? 'to_start,expired' : AllData.ActiveID, fatherCode: -1, taskName: AllData.searchV, taskUserId: pinias.userNo, }; let res = await patrolTaskpage(params); if (res && res.code == 200) { if (bol) { // 直接覆盖所有信息 AllData.dataList = res.data; } else { // 追加列表信息 AllData.dataList = AllData.dataList.concat(res.data); } getTaskTypeNum(); //重新加载tab数据 AllData.ListPage.total = res.total; pinias.hideLoading(); // 加载状态结束 状态更新为false AllData.loading = false; } }; /** * 获取当前任务类型的各个数量 */ const getTaskTypeNum = () => { let query = { taskUserId: pinias.userNo, taskName: AllData.searchV, }; status_statistics(query).then((res) => { if (res && res.code == 200) { let data = res.data; AllData.TopTabsData = [ { count: null, status: 'to_start', statusName: '未完成', }, { count: null, status: 'proceed', statusName: '执行中', }, { count: null, status: 'done', statusName: '已完成', }, ]; data.forEach((v, i) => { // 处理数据 这里不要 expired 已超时的状态 status不会变,遍历获取其状态的值 if (v.status == 'to_start' || v.status == 'expired') AllData.TopTabsData[0].count = AllData.TopTabsData[0].count + v.count; if (v.status == 'proceed') AllData.TopTabsData[1].count = v.count; if (v.status == 'done') AllData.TopTabsData[2].count = v.count; }); } }); }; // 已完成跳转详情 function checkDetail(query) { if (query.status == 'done') { console.log('234'); router.push({ path: '/patroLogDetails', query, }); } } onMounted(() => { getList(); }); </script> <style lang="less"> .patrolTaskPipe { width: 100%; height: 100%; background: #fafafa; .popup-bg { width: 100%; height: 100%; position: fixed; top: 0; bottom: 0; background-color: rgba(176, 176, 176, 1); } .dataListBox { width: 100%; height: calc(100vh - 210px - var(--van-nav-bar-height)); overflow: auto; box-sizing: border-box; padding: 30px; .dataList { width: 100%; height: auto; min-height: 210px; max-height: 274px; margin-bottom: 14px; background: #ffffff; box-shadow: 0px 5px 5px 0px rgba(18, 69, 101, 0.1); border-radius: 10px 10px 10px 10px; opacity: 1; box-sizing: border-box; padding: 0px 30px 0px 30px; position: relative; .dataListTitle { width: 100%; height: 86px; line-height: 86px; box-sizing: border-box; border-bottom: 1px solid #eaeaea; .fontView { width: 100%; height: 86px; line-height: 86px; float: left; font-weight: 400; font-size: 28px; font-family: PingFang SC; font-weight: bold; color: #121212; white-space: nowrap; overflow: auto; .fontViewIcon { width: 27px; height: 27px; vertical-align: middle; } } } .dataListTime { width: 100%; height: 84px; line-height: 84px; display: flex; .dataListTimeLabel { margin-right: 5px; height: 84px; line-height: 84px; font-weight: 400; color: #9f9f9f; font-size: 24px; font-family: PingFang SC; font-weight: 500; color: #565656; } .dataListTimeValue { flex: 1; width: calc(100% - 160px); height: 84px; line-height: 84px; white-space: nowrap; overflow: hidden; font-size: 24px; font-family: PingFang SC; font-weight: 500; color: #7b7b7e; } } .dataListBtn { width: 100%; height: 100px; box-sizing: border-box; padding-top: 15px; position: relative; .typeView { width: auto; width: 126px; height: 40px; line-height: 40px; border-radius: 20px; float: right; position: absolute; left: 10px; top: 30px; font-size: 22px; font-family: PingFang SC; font-weight: 400; color: #ffffff; .typeViewIcon { width: 30px; height: 30px; border-radius: 50%; float: left; margin: 5px; } } // 四个状态的样式 0:未开始 1:超时 2:进行中 3:已完成 .typeClass_to_start { background: #2c79f9; font-family: NotoSansSC-Regular-Regular, NotoSansSC-Regular; font-weight: 400; } .typeClass_expired { background: #ff5959; font-family: NotoSansSC-Regular-Regular, NotoSansSC-Regular; font-weight: 400; } .typeClass_proceed { background: #0ac3f1; font-family: NotoSansSC-Regular-Regular, NotoSansSC-Regular; font-weight: 400; } .typeClass_done { background: #f5fff0; font-family: NotoSansSC-Regular-Regular, NotoSansSC-Regular; font-weight: 400; color: #67c23a; } .ListBotton { float: right; width: 175px; height: 60px; line-height: 60px; background: #ffffff; border-radius: 10px 10px 10px 10px; opacity: 1; text-align: center; font-size: 24px; font-family: NotoSansSC-Regular-Regular, NotoSansSC-Regular; font-weight: 400; color: #409eff; margin-left: 20px; } .ListBotton_1 { color: #ffffff; background: #145bf7; } .ListBotton_2 { border: 2px solid #145bf7; border-radius: 10px; color: #145bf7; } .ListBotton_3 { color: #ffffff; background: #145bf7; } } .DoneImg { position: absolute; width: 120px; height: 120px; right: 10px; top: 10px; } } } } </style>