495 lines
12 KiB
Vue
495 lines
12 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>
|
|
</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.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">
|
|
<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' : 'primary'"
|
|
/>
|
|
<!-- 特殊先隐藏，没有这个字段 -->
|
|
<!-- <u-tag text="特殊" border-color="transparent" type="warning" /> -->
|
|
</view>
|
|
<view class="illustrate">
|
|
{{ item.note }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<button @click="nfcResFn(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"></view>
|
|
<view class="content-title">刷卡成功</view>
|
|
<view class="btn-box">
|
|
<view class="btn-cancel" @click="successShow = false">暂不</view>
|
|
<view class="btn-success" @click="uploadFn">上传图片</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"></view>
|
|
<view class="content-title">刷卡失败</view>
|
|
<view class="btn-box">
|
|
<view class="btn-cancel" @click="errorShow = false">暂不</view>
|
|
<view class="btn-success" @click="exceptionReportFn">异常上报</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { GetPlanInfoAreaList, GetTodayPlanList } from "@/api/apiList";
|
|
|
|
import { minutesToTime } from "@/utils/utils";
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
posIcon: require("@/static/images/pos-icon.png"),
|
|
selectIdx: 0,
|
|
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,
|
|
dataInfo: {
|
|
planName: "",
|
|
areas: [],
|
|
},
|
|
};
|
|
},
|
|
|
|
computed: {
|
|
// dropdownTitle() {
|
|
// // 通过 dropdownValue 匹配 对应的项，展示 label
|
|
// const item = this.dropdownOptions.find(
|
|
// (item) => item.value === this.dropdownValue
|
|
// );
|
|
// return item ? item.label : "";
|
|
// },
|
|
},
|
|
|
|
onLoad(options) {
|
|
// this.paramsId = options.id;
|
|
this.dropdownValue = options.id;
|
|
window.nfcFn = this.nfcResFn;
|
|
// this.nfcResFn();
|
|
},
|
|
|
|
created() {
|
|
this.getTodayPlanList();
|
|
this.getPlanInfoAreaList();
|
|
},
|
|
|
|
methods: {
|
|
minutesToTime,
|
|
|
|
nfcResFn(data) {
|
|
if (data) {
|
|
console.log("%c%s", "color:red", "nfc刷卡成功");
|
|
this.successShow = true;
|
|
} else {
|
|
console.log("%c%s", "color:red", "刷卡失败");
|
|
this.errorShow = true;
|
|
}
|
|
},
|
|
// 上传图片
|
|
uploadFn() {
|
|
console.log("%c%s", "color:red", "上传图片");
|
|
uni.navigateTo({
|
|
url: "/pages/index/uploadPhoto",
|
|
});
|
|
},
|
|
// 异常上报
|
|
exceptionReportFn() {
|
|
console.log("%c%s", "color:red", "异常上报");
|
|
uni.navigateTo({
|
|
url: "/pages/index/list",
|
|
});
|
|
},
|
|
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;
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.content {
|
|
// height: 100vh;
|
|
background: #f7f8fc;
|
|
.slot-wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex: 1;
|
|
/deep/ .u-dropdown-item__options {
|
|
width: 100%;
|
|
}
|
|
}
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
.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;
|
|
background-color: red;
|
|
}
|
|
.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, #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;
|
|
background-color: red;
|
|
}
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
::v-deep .u-mode-center-box {
|
|
margin-top: -500rpx !important;
|
|
background-color: transparent !important;
|
|
}
|
|
</style>
|