LuYaShi
/
InspectionCleaning
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: 今日计划、异常上报样式调整

This commit is contained in:
yangzhe 2025-05-06 11:40:42 +08:00
parent d07f1f5992
commit a0f7ce2067
2 changed files with 144 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

227
pages/index/cleanPlan.vue
View File

@ -1,9 +1,19 @@
<template> <template>
<view class="content"> <view class="content">
<u-navbar :is-back="false" title="" :background="{ backgroundColor: '#DFEEFD' }" :border-bottom="false"> <u-navbar
:is-back="false"
title=""
:background="{ backgroundColor: '#DFEEFD' }"
:border-bottom="false"
>
<view class="slot-wrap"> <view class="slot-wrap">
<u-dropdown :title-size="42" active-color="#211D2F"> <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-item
v-model="dropdownValue"
:title="dataInfo.planName"
:options="dropdownOptions"
@change="changeDropdown"
></u-dropdown-item>
</u-dropdown> </u-dropdown>
<view class="back-icon" @click="backFn"> <view class="back-icon" @click="backFn">
<!-- <u-icon name="arrow-left" size="50rpx" color="#606266"></u-icon> --> <!-- <u-icon name="arrow-left" size="50rpx" color="#606266"></u-icon> -->
@ -23,14 +33,27 @@
</span> </span>
</view> </view>
<view class="tabs"> <view class="tabs">
<view @click="changeTab(i)" class="tab-item" v-for="(v, i) in selectTabs" :key="i" :class="{ select: selectIdx === i }"> <view
@click="changeTab(i)"
class="tab-item"
v-for="(v, i) in selectTabs"
:key="i"
:class="{ select: selectIdx === i }"
>
{{ v.name }} {{ v.name }}
</view> </view>
</view> </view>
</view> </view>
<view class="arealist" v-if="dataInfo.areas.length > 0"> <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
<view v-if="!item.isCompleted" class="schedule schedule-wait">待保洁</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 v-else class="schedule schedule-completed">已完成</view>
<view class="name"> <view class="name">
@ -39,13 +62,18 @@
</view> </view>
<view class="type"> <view class="type">
<view class="value">区域类型</view> <view class="value">区域类型</view>
<u-tag :text="item.areaType" class="tag" border-color="transparent" :type=" <u-tag
:text="item.areaType"
class="tag"
border-color="transparent"
:type="
item.areaType === '室外' item.areaType === '室外'
? 'success' ? 'success'
: item.areaType === '特殊' : item.areaType === '特殊'
? 'warning' ? 'warning'
: 'primary' : 'primary'
" /> "
/>
<!-- 特殊先隐藏，没有这个字段 --> <!-- 特殊先隐藏，没有这个字段 -->
<!-- <u-tag text="特殊" border-color="transparent" type="warning" /> --> <!-- <u-tag text="特殊" border-color="transparent" type="warning" /> -->
</view> </view>
@ -66,7 +94,11 @@
<view class="success-box"> <view class="success-box">
<view class="box-content"> <view class="box-content">
<view class="logo"> <view class="logo">
<image style="width: 100%; height: 100%" src="/static/images/msg-success.png" alt="" /> <image
style="width: 100%; height: 100%"
src="/static/images/msg-success.png"
alt=""
/>
</view> </view>
<view class="content-title">刷卡成功</view> <view class="content-title">刷卡成功</view>
<view class="btn-box"> <view class="btn-box">
@ -81,7 +113,11 @@
<view class="error-box"> <view class="error-box">
<view class="box-content"> <view class="box-content">
<view class="logo"> <view class="logo">
<image style="width: 100%; height: 100%" src="/static/images/msg-error.png" alt="" /> <image
style="width: 100%; height: 100%"
src="/static/images/msg-error.png"
alt=""
/>
</view> </view>
<view class="content-title"> <view class="content-title">
{{ errorMsg }} {{ errorMsg }}
@ -98,57 +134,61 @@
</template> </template>
<script> <script>
import { GetPlanInfoAreaList, GetTodayPlanList, GetAwaitUploadAreaApi } from '@/api/apiList' import {
GetPlanInfoAreaList,
GetTodayPlanList,
GetAwaitUploadAreaApi,
} from "@/api/apiList";
import { minutesToTime } from '@/utils/utils' import { minutesToTime } from "@/utils/utils";
export default { export default {
data() { data() {
return { return {
posIcon: require('@/static/images/pos-icon.png'), posIcon: require("@/static/images/pos-icon.png"),
selectIdx: 0, selectIdx: 0,
dropdownValue: '', dropdownValue: "",
dropdownOptions: [ dropdownOptions: [
{ {
label: '保洁计划1', label: "保洁计划1",
value: 1 value: 1,
}, },
{ {
label: '保洁计划2', label: "保洁计划2",
value: 2 value: 2,
}, },
{ {
label: '保洁计划3', label: "保洁计划3",
value: 3 value: 3,
}, },
{ {
label: '保洁计划4', label: "保洁计划4",
value: 4 value: 4,
} },
], ],
selectTabs: [ selectTabs: [
{ {
name: '全部', name: "全部",
value: 0 value: 0,
}, },
{ {
name: '待保洁', name: "待保洁",
value: 1 value: 1,
} },
], ],
paramsId: '', paramsId: "",
// 刷卡成功弹窗 // 刷卡成功弹窗
successShow: false, successShow: false,
// 刷卡失败弹窗 // 刷卡失败弹窗
errorShow: false, errorShow: false,
errorMsg: 'NFC卡异常或丢失，可尝试重新刷卡或提交卡片异常信息', errorMsg: "NFC卡异常或丢失，可尝试重新刷卡或提交卡片异常信息",
dataInfo: { dataInfo: {
planName: '', planName: "",
areas: [] areas: [],
}, },
areaRes:{} areaRes: {},
} };
}, },
computed: { computed: {
@ -163,14 +203,14 @@ export default {
onLoad(options) { onLoad(options) {
// this.paramsId = options.id; // this.paramsId = options.id;
this.dropdownValue = options.id this.dropdownValue = options.id;
window.nfcFn = this.nfcResFn window.nfcFn = this.nfcResFn;
// this.nfcResFn(); // this.nfcResFn();
}, },
created() { created() {
this.getTodayPlanList() this.getTodayPlanList();
this.getPlanInfoAreaList() this.getPlanInfoAreaList();
}, },
methods: { methods: {
@ -179,12 +219,12 @@ export default {
backFn() { backFn() {
// console.log("%c%s", "color:red", "返回"); // console.log("%c%s", "color:red", "返回");
uni.navigateBack() uni.navigateBack();
}, },
async nfcResFn(data) { async nfcResFn(data) {
if (!data) { if (!data) {
return uni.showToast({ title: '未传入参数 initFn', icon: 'none' }) return uni.showToast({ title: "未传入参数 initFn", icon: "none" });
} }
// uni.showModal({ // uni.showModal({
// title: "开发调试查看nimei", // title: "开发调试查看nimei",
@ -192,16 +232,16 @@ export default {
// showCancel: true, // showCancel: true,
// success: function (res) {}, // success: function (res) {},
// }); // });
let cardID = data.cardID let cardID = data.cardID;
// let nimei = data.nimei; // let nimei = data.nimei;
let nimei = data.uuid let nimei = data.uuid;
const req = { const req = {
Nimei: nimei Nimei: nimei,
// Nimei:'"78F04BC3E9A6DE4782C11A2346F39C68' // Nimei:'"78F04BC3E9A6DE4782C11A2346F39C68'
} };
const res = await GetAwaitUploadAreaApi(req) const res = await GetAwaitUploadAreaApi(req);
console.log(res, 'res---') console.log(res, "res---");
this.areaRes = res.data this.areaRes = res.data;
// uni.showModal({ // uni.showModal({
// title: "开发调试查看", // title: "开发调试查看",
// content: JSON.stringify(res) || "未传入参数 initFn", // content: JSON.stringify(res) || "未传入参数 initFn",
@ -210,94 +250,97 @@ export default {
// }); // });
// 刷卡失败 // 刷卡失败
if (!res.succeed) { if (!res.succeed) {
console.log('%c%s', 'color:red', '刷卡失败') console.log("%c%s", "color:red", "刷卡失败");
// 提示信息 // 提示信息
this.errorMsg = res.error || 'NFC卡异常或丢失，可尝试重新刷卡或提交卡片异常信息' this.errorMsg =
this.errorShow = true res.error || "NFC卡异常或丢失，可尝试重新刷卡或提交卡片异常信息";
this.errorShow = true;
// 同时关闭成功弹窗 // 同时关闭成功弹窗
this.successShow = false this.successShow = false;
return return;
} }
// 刷卡成功 // 刷卡成功
this.successShow = true this.successShow = true;
// 同时关闭失败弹窗 // 同时关闭失败弹窗
this.errorShow = false this.errorShow = false;
}, },
// 上传图片 // 上传图片
toUploadPage() { toUploadPage() {
console.log('%c%s', 'color:red', '上传图片') console.log("%c%s", "color:red", "上传图片");
const params = { const params = {
planName: this.areaRes.planName, planName: this.areaRes.planName,
id: this.areaRes.id, id: this.areaRes.id,
aeraNmae: this.areaRes.name aeraNmae: this.areaRes.name,
} };
console.log(params) console.log(params);
// 先关闭弹窗再跳转 // 先关闭弹窗再跳转
this.successShow = false this.successShow = false;
uni.navigateTo({ uni.navigateTo({
url: '/pages/index/uploadPhoto?params=' + encodeURIComponent(JSON.stringify(params)) url:
}) "/pages/index/uploadPhoto?params=" +
encodeURIComponent(JSON.stringify(params)),
});
}, },
// 异常上报 // 异常上报
exceptionReportFn() { exceptionReportFn() {
console.log('%c%s', 'color:red', '异常上报') console.log("%c%s", "color:red", "异常上报");
// 先关闭弹窗再跳转 // 先关闭弹窗再跳转
this.errorShow = false this.errorShow = false;
uni.navigateTo({ uni.navigateTo({
url: '/pages/index/list' url: "/pages/index/list",
}) });
}, },
toItemPage(item) { toItemPage(item) {
console.log('%c%s', 'color:red', '跳转至详情页', item) console.log("%c%s", "color:red", "跳转至详情页", item);
const combinedData = { const combinedData = {
...item, // 展开 item 的所有属性 ...item, // 展开 item 的所有属性
planName: this.dataInfo.planName // 添加 planName 属性 planName: this.dataInfo.planName, // 添加 planName 属性
} };
const params = encodeURIComponent(JSON.stringify(combinedData)) const params = encodeURIComponent(JSON.stringify(combinedData));
if (item.isCompleted) { if (item.isCompleted) {
// 已保洁 // 已保洁
uni.navigateTo({ uni.navigateTo({
url: '/pages/index/cleanDetails?params=' + params url: "/pages/index/cleanDetails?params=" + params,
}) });
return return;
} else { } else {
// 未保洁 // 未保洁
uni.navigateTo({ uni.navigateTo({
url: '/pages/index/list?params=' + params url: "/pages/index/list?params=" + params,
}) });
} }
}, },
openFn() {}, openFn() {},
closeFn() {}, closeFn() {},
changeTab(i) { changeTab(i) {
this.selectIdx = i this.selectIdx = i;
this.getPlanInfoAreaList() this.getPlanInfoAreaList();
}, },
changeDropdown(e) { changeDropdown(e) {
this.dropdownValue = e this.dropdownValue = e;
this.getPlanInfoAreaList() this.getPlanInfoAreaList();
}, },
// 获取今日计划 // 获取今日计划
async getTodayPlanList() { async getTodayPlanList() {
const res = await GetTodayPlanList() const res = await GetTodayPlanList();
if (res.succeed) { if (res.succeed) {
this.dropdownOptions = res.data.map(item => ({ this.dropdownOptions = res.data.map((item) => ({
label: item.name, label: item.name,
value: item.id value: item.id,
})) }));
} }
}, },
@ -305,14 +348,20 @@ export default {
async getPlanInfoAreaList() { async getPlanInfoAreaList() {
const res = await GetPlanInfoAreaList({ const res = await GetPlanInfoAreaList({
id: this.dropdownValue, id: this.dropdownValue,
isCompleted: this.selectIdx === 0 ? true : false isCompleted: this.selectIdx === 0 ? true : false,
}) });
if (res.succeed) { if (res.succeed) {
this.dataInfo = res.data 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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -354,7 +403,7 @@ page {
padding-top: 72rpx; padding-top: 72rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: url('@/static/images/plan-icon-bg2.png') no-repeat 95% 40%; background: url("@/static/images/plan-icon-bg2.png") no-repeat 95% 40%;
background-size: 40%; background-size: 40%;
background-color: #dfeefd; background-color: #dfeefd;
.name { .name {
@ -390,7 +439,7 @@ page {
} }
} }
} }
.empty-box{ .empty-box {
margin-top: 100rpx; margin-top: 100rpx;
} }
.arealist { .arealist {

7
pages/index/list.vue
View File

@ -62,7 +62,12 @@
</u-form-item> </u-form-item>
<!-- 图片上传 --> <!-- 图片上传 -->
<u-form-item label="图片" prop="images" label-position="top"> <u-form-item
label="图片"
prop="images"
label-position="top"
:border-bottom="false"
>
<!-- <u-upload <!-- <u-upload
v-model="form.images" v-model="form.images"
:max-count="3" :max-count="3"