672 lines
16 KiB
Vue
672 lines
16 KiB
Vue
<template>
|
||
<view class="content">
|
||
<u-navbar
|
||
:is-back="false"
|
||
title=""
|
||
:background="{ backgroundColor: '#DFEEFD' }"
|
||
:border-bottom="false"
|
||
>
|
||
<view class="slot-wrap">
|
||
<u-dropdown :title-size="42" active-color="#211D2F">
|
||
<u-dropdown-item
|
||
v-model="dropdownValue"
|
||
:title="dataInfo.planName"
|
||
:options="dropdownOptions"
|
||
@change="changeDropdown"
|
||
></u-dropdown-item>
|
||
</u-dropdown>
|
||
<view class="back-icon" @click="backFn">
|
||
<!-- <u-icon name="arrow-left" size="50rpx" color="#606266"></u-icon> -->
|
||
<uni-icons type="left" size="50rpx" color="#606266"></uni-icons>
|
||
</view>
|
||
</view>
|
||
</u-navbar>
|
||
<view class="area-info">
|
||
<view class="name">{{
|
||
dataInfo.planDate ? dataInfo.planDate.split("T")[0] : ""
|
||
}}</view>
|
||
<view class="position">
|
||
<span
|
||
v-if="
|
||
(dataInfo.beginTime || dataInfo.beginTime == 0) && dataInfo.endTime
|
||
"
|
||
>
|
||
{{ minutesToTime(dataInfo.beginTime) }}~{{
|
||
minutesToTime(dataInfo.endTime)
|
||
}}
|
||
</span>
|
||
</view>
|
||
<view class="tabs">
|
||
<view
|
||
@click="changeTab(i)"
|
||
class="tab-item"
|
||
v-for="(v, i) in selectTabs"
|
||
:key="i"
|
||
:class="{ select: selectIdx === i }"
|
||
>
|
||
{{ v.name }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="arealist" v-if="dataInfo.areas.length > 0">
|
||
<view
|
||
class="block-info"
|
||
v-for="item in dataInfo.areas"
|
||
:key="item.id"
|
||
@click="toItemPage(item)"
|
||
>
|
||
<view v-if="!item.isCompleted" class="schedule schedule-wait"
|
||
>待保洁</view
|
||
>
|
||
<view v-else class="schedule schedule-completed">已完成</view>
|
||
|
||
<view class="name">
|
||
<u-icon size="40" :name="posIcon"></u-icon>
|
||
<view class="text">{{ item.aeraNmae }}</view>
|
||
</view>
|
||
<view class="type">
|
||
<view class="value">区域类型</view>
|
||
<u-tag
|
||
:text="item.areaType"
|
||
class="tag"
|
||
border-color="transparent"
|
||
:type="
|
||
item.areaType === '室外'
|
||
? 'success'
|
||
: item.areaType === '特殊'
|
||
? 'warning'
|
||
: 'primary'
|
||
"
|
||
/>
|
||
<!-- 特殊先隐藏，没有这个字段 -->
|
||
<!-- <u-tag text="特殊" border-color="transparent" type="warning" /> -->
|
||
</view>
|
||
<view class="illustrate">
|
||
{{ item.note || "暂无清扫要求" }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="empty-box" v-else>
|
||
<u-empty text="暂无数据" mode="list"></u-empty>
|
||
</view>
|
||
|
||
<!-- <button @click="successShow = true">刷卡成功</button> -->
|
||
<!-- <button @click="nfcResFn(false)">刷卡失败</button> -->
|
||
<!-- nfc刷卡成功弹窗 -->
|
||
<u-popup v-model="successShow" mode="center" :round="30">
|
||
<view class="success-box">
|
||
<view class="box-content">
|
||
<view class="logo">
|
||
<image
|
||
style="width: 100%; height: 100%"
|
||
src="/static/images/msg-success.png"
|
||
alt=""
|
||
/>
|
||
</view>
|
||
<view class="content-title">刷卡成功</view>
|
||
<view class="btn-box">
|
||
<view class="btn-cancel" @click="successShow = false">暂不</view>
|
||
<view class="btn-success" @click="toUploadPage">上传图片</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
<!-- nfc刷卡失败弹窗 -->
|
||
<u-popup v-model="errorShow" mode="center" :round="30">
|
||
<view class="error-box">
|
||
<view class="box-content">
|
||
<view class="logo">
|
||
<image
|
||
style="width: 100%; height: 100%"
|
||
src="/static/images/msg-error.png"
|
||
alt=""
|
||
/>
|
||
</view>
|
||
<view class="content-title">
|
||
{{ errorMsg }}
|
||
</view>
|
||
<view class="btn-box">
|
||
<view class="btn-cancel" @click="errorShow = false">关闭</view>
|
||
<!-- <view class="btn-success" @click="errorShow = false">异常上报</view> -->
|
||
<!-- <view class="btn-success" @click="exceptionReportFn">异常上报</view> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
GetPlanInfoAreaList,
|
||
GetTodayPlanList,
|
||
GetAwaitUploadAreaApi,
|
||
} from "@/api/apiList";
|
||
|
||
import { minutesToTime } from "@/utils/utils";
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
posIcon: require("@/static/images/pos-icon.png"),
|
||
selectIdx: 1, // 默认展示待保洁
|
||
dropdownValue: "",
|
||
dropdownOptions: [
|
||
{
|
||
label: "保洁计划1",
|
||
value: 1,
|
||
},
|
||
{
|
||
label: "保洁计划2",
|
||
value: 2,
|
||
},
|
||
{
|
||
label: "保洁计划3",
|
||
value: 3,
|
||
},
|
||
{
|
||
label: "保洁计划4",
|
||
value: 4,
|
||
},
|
||
],
|
||
selectTabs: [
|
||
{
|
||
name: "全部",
|
||
value: 0,
|
||
},
|
||
{
|
||
name: "待保洁",
|
||
value: 1,
|
||
},
|
||
],
|
||
|
||
paramsId: "",
|
||
// 刷卡成功弹窗
|
||
successShow: false,
|
||
// 刷卡失败弹窗
|
||
errorShow: false,
|
||
errorMsg: "NFC卡异常或丢失，可尝试重新刷卡或提交卡片异常信息",
|
||
dataInfo: {
|
||
planName: "",
|
||
areas: [],
|
||
},
|
||
areaRes: {},
|
||
};
|
||
},
|
||
|
||
computed: {
|
||
// dropdownTitle() {
|
||
// // 通过 dropdownValue 匹配 对应的项，展示 label
|
||
// const item = this.dropdownOptions.find(
|
||
// (item) => item.value === this.dropdownValue
|
||
// );
|
||
// return item ? item.label : "";
|
||
// },
|
||
},
|
||
|
||
onLoad(options) {
|
||
// debugger
|
||
// this.paramsId = options.id;
|
||
this.dropdownValue = options.id;
|
||
window.nfcFn = this.nfcResFn;
|
||
// this.nfcResFn();
|
||
if (options.type == "all") {
|
||
this.selectIdx = 0;
|
||
}
|
||
},
|
||
|
||
created() {
|
||
this.getTodayPlanList();
|
||
this.getPlanInfoAreaList();
|
||
},
|
||
|
||
methods: {
|
||
minutesToTime,
|
||
|
||
backFn() {
|
||
// console.log("%c%s", "color:red", "返回");
|
||
|
||
uni.navigateBack();
|
||
},
|
||
|
||
async nfcResFn(data) {
|
||
if (!data) {
|
||
return uni.showToast({ title: "未传入参数 initFn", icon: "none" });
|
||
}
|
||
// uni.showModal({
|
||
// title: "开发调试查看nimei",
|
||
// content: JSON.stringify(data) || "未传入参数 initFn",
|
||
// showCancel: true,
|
||
// success: function (res) {},
|
||
// });
|
||
let cardID = data.cardID;
|
||
// let nimei = data.nimei;
|
||
let nimei = data.uuid;
|
||
const req = {
|
||
Nimei: nimei,
|
||
// Nimei:'"78F04BC3E9A6DE4782C11A2346F39C68'
|
||
};
|
||
const res = await GetAwaitUploadAreaApi(req);
|
||
console.log(res, "res---");
|
||
this.areaRes = res.data;
|
||
// uni.showModal({
|
||
// title: "开发调试查看",
|
||
// content: JSON.stringify(res) || "未传入参数 initFn",
|
||
// showCancel: true,
|
||
// success: function (res) {},
|
||
// });
|
||
// 刷卡失败
|
||
if (!res.succeed) {
|
||
console.log("%c%s", "color:red", "刷卡失败");
|
||
// 提示信息
|
||
this.errorMsg =
|
||
res.error || "NFC卡异常或丢失，可尝试重新刷卡或提交卡片异常信息";
|
||
this.errorShow = true;
|
||
// 同时关闭成功弹窗
|
||
this.successShow = false;
|
||
return;
|
||
}
|
||
|
||
// 刷卡成功
|
||
this.successShow = true;
|
||
// 同时关闭失败弹窗
|
||
this.errorShow = false;
|
||
},
|
||
// 上传图片
|
||
toUploadPage() {
|
||
console.log("%c%s", "color:red", "上传图片");
|
||
|
||
const params = {
|
||
planName: this.areaRes.planName,
|
||
id: this.areaRes.id,
|
||
aeraNmae: this.areaRes.name,
|
||
};
|
||
console.log(params);
|
||
|
||
// 先关闭弹窗再跳转
|
||
this.successShow = false;
|
||
uni.navigateTo({
|
||
url:
|
||
"/pages/index/uploadPhoto?params=" +
|
||
encodeURIComponent(JSON.stringify(params)),
|
||
});
|
||
},
|
||
// 异常上报
|
||
exceptionReportFn() {
|
||
console.log("%c%s", "color:red", "异常上报");
|
||
|
||
// 先关闭弹窗再跳转
|
||
this.errorShow = false;
|
||
uni.navigateTo({
|
||
url: "/pages/index/list",
|
||
});
|
||
},
|
||
|
||
toItemPage(item) {
|
||
console.log("%c%s", "color:red", "跳转至详情页", item);
|
||
const combinedData = {
|
||
...item, // 展开 item 的所有属性
|
||
planName: this.dataInfo.planName, // 添加 planName 属性
|
||
beginTime: this.dataInfo.beginTime,
|
||
endTime: this.dataInfo.endTime,
|
||
};
|
||
|
||
const params = encodeURIComponent(JSON.stringify(combinedData));
|
||
|
||
if (item.isCompleted) {
|
||
// 已保洁
|
||
uni.navigateTo({
|
||
url: "/pages/index/cleanDetails?params=" + params,
|
||
});
|
||
return;
|
||
} else {
|
||
uni.showModal({
|
||
title: item.aeraNmae,
|
||
content: "已完成任务，请直接刷卡\n如卡片异常请进行上报。",
|
||
confirmText: "确定",
|
||
cancelText: "异常上报",
|
||
confirmColor: "#333333",
|
||
cancelColor: "#007aff",
|
||
showCancel: true,
|
||
success: function (res) {
|
||
if (res.confirm) {
|
||
// 点击确定
|
||
// console.log("点击确定");
|
||
|
||
return;
|
||
} else {
|
||
// 点击异常上报
|
||
// console.log("params", params);
|
||
uni.navigateTo({
|
||
url: "/pages/index/list?params=" + params,
|
||
});
|
||
}
|
||
},
|
||
});
|
||
|
||
// 未保洁
|
||
// uni.navigateTo({
|
||
// url: "/pages/index/list?params=" + params,
|
||
// });
|
||
}
|
||
},
|
||
|
||
openFn() {},
|
||
closeFn() {},
|
||
changeTab(i) {
|
||
this.selectIdx = i;
|
||
|
||
this.getPlanInfoAreaList();
|
||
},
|
||
|
||
changeDropdown(e) {
|
||
this.dropdownValue = e;
|
||
|
||
this.getPlanInfoAreaList();
|
||
},
|
||
|
||
// 获取今日计划
|
||
async getTodayPlanList() {
|
||
const res = await GetTodayPlanList();
|
||
if (res.succeed) {
|
||
this.dropdownOptions = res.data.map((item) => ({
|
||
label: item.name,
|
||
value: item.id,
|
||
}));
|
||
}
|
||
},
|
||
|
||
// 获取计划区域列表
|
||
async getPlanInfoAreaList() {
|
||
const res = await GetPlanInfoAreaList({
|
||
id: this.dropdownValue,
|
||
isCompleted: this.selectIdx === 0 ? true : false,
|
||
});
|
||
if (res.succeed) {
|
||
this.dataInfo = res.data;
|
||
if (this.dataInfo.areas?.length > 0) {
|
||
// 将 areas 中的 isCompleted 字段为 false 的 展示在前面
|
||
this.dataInfo.areas = this.dataInfo.areas.sort(
|
||
(a, b) => a.isCompleted - b.isCompleted
|
||
);
|
||
}
|
||
}
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
page {
|
||
background-color: #f3f5fa !important;
|
||
}
|
||
.content {
|
||
min-height: 100vh;
|
||
background: #f7f8fc;
|
||
.slot-wrap {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex: 1;
|
||
/deep/ .u-dropdown-item__options {
|
||
width: 100%;
|
||
}
|
||
|
||
.back-icon {
|
||
width: 100rpx;
|
||
height: 80rpx;
|
||
position: absolute;
|
||
left: 12rpx;
|
||
top: 12rpx;
|
||
z-index: 20;
|
||
}
|
||
}
|
||
.title {
|
||
line-height: 1;
|
||
border-left: 10rpx solid #5a7ee9;
|
||
padding-left: 16rpx;
|
||
font-weight: bold;
|
||
font-size: 36rpx;
|
||
color: #000000;
|
||
}
|
||
.area-info {
|
||
padding: 24rpx 32rpx;
|
||
padding-top: 72rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
background: url("@/static/images/plan-icon-bg2.png") no-repeat 95% 40%;
|
||
background-size: 40%;
|
||
background-color: #dfeefd;
|
||
.name {
|
||
font-weight: 800;
|
||
font-size: 48rpx;
|
||
color: #1d1d1d;
|
||
}
|
||
.position {
|
||
margin-top: 40rpx;
|
||
font-weight: 500;
|
||
font-size: 34rpx;
|
||
color: #465161;
|
||
}
|
||
.tabs {
|
||
margin-top: 38rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.tab-item {
|
||
z-index: 99;
|
||
pointer-events: auto; /* 确保可点击 */
|
||
background: #ffffff;
|
||
border-radius: 30rpx;
|
||
padding: 12rpx 0;
|
||
width: 48%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #383535;
|
||
}
|
||
.select {
|
||
color: #ffffff;
|
||
background: #4278f4;
|
||
}
|
||
}
|
||
}
|
||
.empty-box {
|
||
margin-top: 100rpx;
|
||
}
|
||
.arealist {
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 32rpx;
|
||
.block-info {
|
||
position: relative;
|
||
background: #ffffff;
|
||
border-radius: 18rpx;
|
||
padding: 65rpx 46rpx;
|
||
margin-bottom: 32rpx;
|
||
.schedule {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
// background-color: #feeded; /* 背景颜色 */
|
||
color: white;
|
||
width: 160rpx;
|
||
height: 45rpx;
|
||
font-size: 30rpx;
|
||
// color: #db3636;
|
||
border-bottom-left-radius: 500rpx; /* 切角 */
|
||
}
|
||
|
||
.schedule-completed {
|
||
color: #4278f4;
|
||
background-color: #e5ebff;
|
||
}
|
||
|
||
.schedule-wait {
|
||
color: #db3636;
|
||
background-color: #feeded;
|
||
}
|
||
|
||
.name {
|
||
display: flex;
|
||
align-items: center;
|
||
.text {
|
||
margin-left: 20rpx;
|
||
font-size: 38rpx;
|
||
color: #32353b;
|
||
}
|
||
}
|
||
.type {
|
||
display: flex;
|
||
margin: 38rpx 0;
|
||
.value {
|
||
margin-right: 10rpx;
|
||
font-size: 32rpx;
|
||
color: #8896b4;
|
||
}
|
||
.tag {
|
||
margin: 0 16rpx;
|
||
}
|
||
}
|
||
.illustrate {
|
||
padding: 46rpx;
|
||
background: #f3f6f7;
|
||
border-radius: 21rpx;
|
||
font-size: 32rpx;
|
||
color: #353535;
|
||
line-height: 57rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.success-box {
|
||
// overflow:hidden;
|
||
width: 650rpx;
|
||
padding-top: 50rpx;
|
||
background-color: transparent;
|
||
.box-content {
|
||
height: 450rpx;
|
||
background-color: #ffffff;
|
||
background: linear-gradient(to bottom, #a7dafc, white 60%, white);
|
||
border-radius: 30rpx;
|
||
// border:1px solid red;
|
||
position: relative;
|
||
.logo {
|
||
position: absolute;
|
||
top: -50rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
}
|
||
.content-title {
|
||
position: absolute;
|
||
top: 40%;
|
||
width: 100%;
|
||
color: black;
|
||
font-size: 40rpx;
|
||
text-align: center;
|
||
}
|
||
.btn-box {
|
||
position: absolute;
|
||
bottom: 10%;
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-evenly;
|
||
.btn-cancel {
|
||
width: 200rpx;
|
||
height: 70rpx;
|
||
background-color: #f3f6f7;
|
||
border-radius: 50rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 30rpx;
|
||
color: #32353b;
|
||
}
|
||
.btn-success {
|
||
width: 200rpx;
|
||
height: 70rpx;
|
||
background-color: #4278f4;
|
||
border-radius: 50rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 30rpx;
|
||
color: white;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.error-box {
|
||
// overflow:hidden;
|
||
width: 650rpx;
|
||
padding-top: 50rpx;
|
||
background-color: transparent;
|
||
.box-content {
|
||
height: 450rpx;
|
||
background-color: #ffffff;
|
||
background: linear-gradient(to bottom, #ffeddf, white 60%, white);
|
||
border-radius: 30rpx;
|
||
// border:1px solid red;
|
||
position: relative;
|
||
.logo {
|
||
position: absolute;
|
||
top: -50rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
// background-color:red;
|
||
}
|
||
.content-title {
|
||
position: absolute;
|
||
top: 40%;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 80%;
|
||
color: black;
|
||
font-size: 32rpx;
|
||
text-align: center;
|
||
}
|
||
.btn-box {
|
||
position: absolute;
|
||
bottom: 10%;
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-evenly;
|
||
.btn-cancel {
|
||
width: 200rpx;
|
||
height: 70rpx;
|
||
background-color: #f3f6f7;
|
||
border-radius: 50rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 30rpx;
|
||
color: #32353b;
|
||
}
|
||
.btn-success {
|
||
width: 200rpx;
|
||
height: 70rpx;
|
||
background-color: #f76590;
|
||
border-radius: 50rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 30rpx;
|
||
color: white;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
::v-deep .u-mode-center-box {
|
||
margin-top: -500rpx !important;
|
||
background-color: transparent !important;
|
||
}
|
||
</style>
|