326 lines
8.1 KiB
Vue
326 lines
8.1 KiB
Vue
<template>
|
|
<view class="content">
|
|
<view v-if="true" style="display:flex">
|
|
<u-button type="error" @click="testFn">调试录入卡片</u-button>
|
|
<u-button type="error" @click="test1Fn">调试token过期</u-button>
|
|
</view>
|
|
<daySelect @dateChange="onDateChange" />
|
|
<view v-if="isToday" class="task-info">
|
|
<view class="title">今日任务</view>
|
|
<!-- 当日计划 点击跳转 -->
|
|
<view class="task-list">
|
|
<!-- <view class="task-item" >
|
|
<view class="name-state">
|
|
<view class="name">足球场休息室</view>
|
|
<u-tag text="已完成" type="success" border-color="transparent" />
|
|
</view>
|
|
|
|
<view class="time">
|
|
<u-tag text="9:00~12:00" type="info" border-color="transparent" />
|
|
</view>
|
|
</view> -->
|
|
|
|
<view
|
|
class="task-item"
|
|
v-for="item in planList"
|
|
:key="item.id"
|
|
@click="handleTaskClick(item)"
|
|
>
|
|
<view class="name-state">
|
|
<view class="name">{{ item.name }}</view>
|
|
<u-tag
|
|
v-if="item.isCompleted == 0"
|
|
text="待保洁"
|
|
type="info"
|
|
border-color="transparent"
|
|
/>
|
|
<u-tag
|
|
v-else
|
|
text="已完成"
|
|
type="success"
|
|
border-color="transparent"
|
|
/>
|
|
</view>
|
|
|
|
<view class="time">
|
|
<u-tag
|
|
:text="item.beginTime + '~' + item.endTime"
|
|
type="info"
|
|
border-color="transparent"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="isToday" class="area-schedule">
|
|
<view class="finish">
|
|
<view class="point"></view>
|
|
<view class="title">已保洁区域</view>
|
|
<view class="count-rate">
|
|
{{ todayCompletion.completed }}
|
|
<view class="total">/{{ todayCompletion.total }}</view>
|
|
</view>
|
|
<u-line-progress
|
|
height="10"
|
|
class="schedule-line"
|
|
:show-percent="false"
|
|
active-color="#2979ff"
|
|
:percent="(todayCompletion.completed / todayCompletion.total) * 100"
|
|
></u-line-progress>
|
|
</view>
|
|
<view class="unfinish">
|
|
<view class="point"></view>
|
|
<view class="title">待保洁区域</view>
|
|
<view class="count-rate">
|
|
{{ todayCompletion.notCompleted }}
|
|
<view class="total">/{{ todayCompletion.total }}</view>
|
|
</view>
|
|
<u-line-progress
|
|
height="10"
|
|
class="schedule-line"
|
|
:show-percent="false"
|
|
active-color="#FC873D"
|
|
:percent="
|
|
(todayCompletion.notCompleted / todayCompletion.total) * 100
|
|
"
|
|
></u-line-progress>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 非当日计划 仅展示 -->
|
|
<view v-if="!isToday" class="cleaning-plan-box">
|
|
<!-- <view class="cleaning-plan">
|
|
<view class="title">今日保洁计划名称</view>
|
|
<view class="time">
|
|
<view class="top">00:00:00</view>
|
|
<view class="bottom">23:59:00</view>
|
|
</view>
|
|
</view> -->
|
|
<view class="cleaning-plan" v-for="item in planList" :key="item.id">
|
|
<view class="title">{{ item.name }}</view>
|
|
<view class="time">
|
|
<view class="top">{{ item.beginTime }}</view>
|
|
<view class="bottom">{{ item.endTime }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import { GetPlanByDate, TodayCompletion } from "@/api/apiList";
|
|
|
|
import { useRouter } from "@/utils/utils.js";
|
|
|
|
import daySelect from "@/components/daySelect/index.vue";
|
|
export default {
|
|
components: {
|
|
daySelect,
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
isToday: true,
|
|
currentDate: "",
|
|
planList: [],
|
|
// 今日完成情况
|
|
todayCompletion: {
|
|
total: 0,
|
|
completed: 0,
|
|
notCompleted: 0,
|
|
},
|
|
};
|
|
},
|
|
|
|
mounted() {
|
|
console.log("%c%s", "color:red", "mounted--");
|
|
this.getPlanByDate();
|
|
},
|
|
|
|
methods: {
|
|
testFn(){
|
|
let u = navigator.userAgent;
|
|
let isAndroid =
|
|
u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android
|
|
// let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios
|
|
try {
|
|
if (isAndroid && AndroidJs) {
|
|
console.log("%c%s", "color:red", "安卓--调用方法");
|
|
const reqRow = {
|
|
name: "input",
|
|
data: "",
|
|
};
|
|
AndroidJs.func(JSON.stringify(reqRow)); // 给安卓传参
|
|
} else {
|
|
console.log("%c%s", "color:red", "苹果--调用方法");
|
|
const reqRow = {
|
|
name: "back-iphone",
|
|
data: "",
|
|
};
|
|
window.webkit.messageHandlers.func.postMessage(
|
|
JSON.stringify(reqRow)
|
|
); // 给ios 传参
|
|
}
|
|
} catch (e) {
|
|
console.log(e, "e-----判断安卓苹果类型出错");
|
|
}
|
|
},
|
|
test1Fn(){
|
|
uni.setStorageSync("token", "Bearer ");
|
|
this.getPlanByDate();
|
|
},
|
|
onDateChange({ date, isToday }) {
|
|
this.isToday = isToday;
|
|
this.currentDate = date;
|
|
this.getPlanByDate();
|
|
|
|
if (isToday) {
|
|
this.getTodayCompletion();
|
|
}
|
|
},
|
|
handleTaskClick(item) {
|
|
console.log(item);
|
|
|
|
uni.navigateTo({
|
|
url: `/pages/index/cleanPlan?id=${item.id}`,
|
|
});
|
|
},
|
|
|
|
// 根据日期获取计划
|
|
async getPlanByDate() {
|
|
this.planList = [];
|
|
const res = await GetPlanByDate({ Date: this.currentDate });
|
|
if (res.succeed) {
|
|
this.planList = res.data;
|
|
}
|
|
},
|
|
|
|
// 今日完成情况
|
|
async getTodayCompletion() {
|
|
const res = await TodayCompletion();
|
|
if (res.succeed) {
|
|
this.todayCompletion = { ...res.data };
|
|
this.todayCompletion.total = res.data.completed + res.data.notCompleted;
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.content {
|
|
// height: 100vh; // 确保容器有明确高度
|
|
overflow: hidden;
|
|
padding-bottom: 100rpx;
|
|
}
|
|
|
|
.task-info {
|
|
margin: 0 32rpx;
|
|
padding: 18rpx;
|
|
background: #f5f6fa;
|
|
border-radius: 24rpx;
|
|
.title {
|
|
font-weight: bold;
|
|
font-size: 34rpx;
|
|
color: #282828;
|
|
}
|
|
.task-list {
|
|
margin-top: 36rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.task-item {
|
|
margin-bottom: 20rpx;
|
|
padding: 44rpx 30rpx;
|
|
background: #ffffff;
|
|
border-radius: 16rpx;
|
|
.name-state {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.name {
|
|
padding-left: 6rpx;
|
|
position: relative;
|
|
}
|
|
.name::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 10%;
|
|
left: -6%;
|
|
display: inline-block;
|
|
width: 5rpx;
|
|
height: 30rpx;
|
|
background: #3d6af0;
|
|
}
|
|
}
|
|
.time {
|
|
margin-top: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.area-schedule {
|
|
margin: 0 32rpx;
|
|
margin-top: 26rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
> view {
|
|
padding: 22rpx;
|
|
width: 48%;
|
|
background: #f5f6fa;
|
|
border-radius: 10rpx;
|
|
.point {
|
|
width: 12rpx;
|
|
height: 12rpx;
|
|
background: #4473fe;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.title {
|
|
margin-top: 28rpx;
|
|
font-size: 32rpx;
|
|
color: #292929;
|
|
}
|
|
.count-rate {
|
|
margin-left: 12rpx;
|
|
margin-top: 40rpx;
|
|
display: flex;
|
|
font-size: 50rpx;
|
|
color: #4473fe;
|
|
.total {
|
|
font-size: 50rpx;
|
|
color: #dbdee9;
|
|
}
|
|
}
|
|
.schedule-line {
|
|
margin-top: 32rpx;
|
|
}
|
|
}
|
|
.unfinish .point {
|
|
background: #fc873d;
|
|
}
|
|
.unfinish .count-rate {
|
|
color: #fc873d;
|
|
}
|
|
}
|
|
|
|
.cleaning-plan-box {
|
|
.cleaning-plan {
|
|
margin: 0 32rpx;
|
|
margin-bottom: 36rpx;
|
|
padding: 42rpx 52rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background: url("@/static/images/plan-bg.png") no-repeat 100% 100%;
|
|
background-size: 100% 100%;
|
|
.title {
|
|
font-weight: 500;
|
|
font-size: 36rpx;
|
|
color: #334a65;
|
|
}
|
|
.time {
|
|
font-weight: 500;
|
|
font-size: 36rpx;
|
|
color: #334a65;
|
|
}
|
|
}
|
|
}
|
|
</style>
|