<route lang="json5" type="page">
|
{
|
layout: 'default',
|
needLogin: true,
|
style: {
|
navigationBarTitleText: '保养汇总',
|
},
|
}
|
</route>
|
|
<template>
|
<z-paging ref="paging" v-model="dataList" @query="queryList" show-refresher-update-time>
|
<template #top>
|
<wd-tabs v-model="activeTab" @change="handleTabChange">
|
<wd-tab title="待保养"></wd-tab>
|
<wd-tab title="待确认"></wd-tab>
|
<wd-tab title="已完成"></wd-tab>
|
</wd-tabs>
|
</template>
|
<view class="bg-base">
|
<wd-card
|
type="rectangle"
|
v-for="(item, index) in dataList"
|
:key="item.id"
|
:class="[getCardColorClass(item.planTime)]"
|
>
|
<template #title>
|
<view class="flex justify-between">
|
<view class="flex items-center menu-title-box">
|
<view class="menu-indicator"></view>
|
<view class="ml-1 text-sm align-center w-[50%]">
|
<wd-text :text="item.equName" :lines="1"></wd-text>
|
</view>
|
<view class="text-color-gray ml-2 text-mini">{{ item.assetNo }}</view>
|
</view>
|
|
<view class="flex items-center w-[20%] justify-end">
|
<text class="text-color-gray text-mini">
|
{{ item?.planTime }}
|
</text>
|
</view>
|
</view>
|
</template>
|
<view class="flex" items-center>
|
<image class="slot-img text-center" src="/static/images/camera.png" />
|
<view class="flex-1">
|
<view class="text-color-gray text-sm mt-1 flex">
|
<text class="mr-3">工单总数: {{ item.orderCount }}</text>
|
|
|
<text class="mx-3">已完成: {{ item.wcCount }}</text>
|
</view>
|
<view class="text-color-gray text-sm mt-2 flex">
|
<text class="mr-3">待保养: {{ item.dbyCount }}</text>
|
|
|
<text class="mx-3">保养中: {{ item.byCount }}</text>
|
<!-- |-->
|
<!-- <text class="ml-3">待验证: {{ item.dyzCount }}</text>-->
|
</view>
|
<view class="text-color-gray text-sm mt-2 flex">
|
<text>状态：</text>
|
<template v-if="item.status === '1'">
|
<wd-icon class="icon-color-success" name="check-outline" size="34rpx"></wd-icon>
|
<text class="ml-1">已完成</text>
|
</template>
|
<template v-else-if="item.status === '2'">
|
<wd-icon class="icon-color-warning" name="check-outline" size="34rpx"></wd-icon>
|
<text class="ml-1">已确认</text>
|
</template>
|
<template v-else>
|
<wd-icon class="icon-color-base" name="detection" size="40rpx"></wd-icon>
|
<text class="ml-1">进行中</text>
|
</template>
|
</view>
|
<view class="text-color-gray text-sm mt-2 flex">创建时间: {{ item.createTime }}</view>
|
</view>
|
<wd-button size="small" icon="edit-outline" @click.stop="itemClick(item)">明细</wd-button>
|
</view>
|
</wd-card>
|
</view>
|
</z-paging>
|
</template>
|
|
<script setup lang="ts">
|
import { ref, computed } from 'vue'
|
import { getMaintStList } from '@/service/maint'
|
import dayjs from 'dayjs'
|
|
/**
|
* 其他页面传过来的数据
|
* assetNo: 资产编号
|
* from: 是否是扫码进来的，如果是扫码进来，只能查询固定设备的数据
|
*/
|
interface PageParams {
|
assetNo?: string
|
from?: string
|
}
|
|
interface QueryParams {
|
pageNum: number
|
pageSize: number
|
assetNo?: string
|
equName?: string
|
status?: string
|
params?: NonNullable<unknown>
|
}
|
|
// 计算工单卡片的背景颜色类
|
function getCardColorClass(planTime) {
|
if (!planTime) return ''
|
|
const now = dayjs()
|
const planDate = dayjs(planTime)
|
const diffDays = planDate.diff(now, 'day')
|
|
if (diffDays < 0) {
|
// 超过计划时间，红色背景
|
return 'card-overdue'
|
} else if (diffDays <= 3) {
|
// 距离计划时间三天以内，黄色背景
|
return 'card-urgent'
|
} else {
|
// 正常状态，背景颜色不变
|
return ''
|
}
|
}
|
|
// 页面参数，上个页面传递过来的参数
|
const option = reactive<PageParams>({
|
assetNo: '',
|
from: '',
|
})
|
|
// 标签页相关
|
const activeTab = ref(0) // 默认选中第一个标签页（待保养）
|
|
// 原有状态
|
const status = ref<string>('0') // 默认为待保养状态
|
const equName = ref<string>('-1')
|
const filterDate = ref<string>('1')
|
|
const filterDateList = ref<Record<string, any>[]>([
|
{ label: '所有数据', value: '0' },
|
{ label: '当月数据', value: '1' },
|
])
|
|
const statusList = ref<Record<string, any>[]>([
|
{ label: '所有状态', value: '-1' },
|
{ label: '待保养', value: '0' },
|
{ label: '保养中', value: '1' },
|
{ label: '待验证', value: '2' },
|
{ label: '已完成', value: '3' },
|
])
|
const equList = ref<Record<string, any>[]>([{ label: '所有设备', value: '-1' }])
|
|
// 标签页切换处理函数
|
function handleTabChange({ index }) {
|
// 根据标签页索引设置对应的状态值
|
if (index === 0) {
|
// 待保养
|
status.value = '0'
|
} else if (index === 1) {
|
// 待确认
|
status.value = '1'
|
} else if (index === 2) {
|
// 已完成
|
status.value = '2'
|
}
|
// 重新加载数据
|
reloadData()
|
}
|
|
// 原有函数
|
function handleStatus({ value }) {}
|
function handleEquName({ value }) {
|
console.log(value)
|
}
|
function handleFilterDate({ value }) {
|
reloadData()
|
}
|
|
const paging = ref(null)
|
const dataList = ref([])
|
|
const queryList = (pageNum?: number, pageSize?: number) => {
|
// 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
|
// 这里的请求只是演示，请替换成自己的项目的网络请求，并在网络请求回调中通过paging.value.complete(请求回来的数组)将请求结果传给z-paging
|
const queryParams: QueryParams = {
|
pageNum,
|
pageSize,
|
equName: equName.value,
|
status: status.value,
|
}
|
if (filterDate.value === '1') {
|
// 获取当前日期
|
const now = dayjs()
|
queryParams.params = {
|
beginPlanTime: now.startOf('month').format('YYYY-MM-DD 00:00:00'),
|
endPlanTime: now.endOf('month').format('YYYY-MM-DD 23:59:59'),
|
}
|
} else {
|
delete queryParams.params
|
}
|
|
if (equName.value === '-1') {
|
delete queryParams.equName
|
}
|
if (status.value === '-1') {
|
delete queryParams.status
|
}
|
// 如果是从扫码页面过来，只能查询固定设备的数据
|
if (option?.from === 'scan') {
|
queryParams.assetNo = option.assetNo
|
}
|
|
getMaintStList(queryParams)
|
.then((res: any) => {
|
// 请勿在网络请求回调中给dataList赋值！！只需要调用complete就可以了
|
paging.value.completeByTotal(res.rows, res.total)
|
})
|
.catch((res) => {
|
// 如果请求失败写paging.value.complete(false)，会自动展示错误页面
|
// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
|
// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
|
paging.value.complete(false)
|
})
|
}
|
|
function itemClick(item) {
|
uni.navigateTo({
|
url: `/pages/maint/maint-order?id=${item.id}`,
|
})
|
}
|
|
function reloadData() {
|
paging.value.reload()
|
}
|
|
|
onLoad((options) => {
|
Object.assign(option, options)
|
uni.$on('maint-st-refresh', reloadData)
|
})
|
onUnload(() => {
|
uni.$off('maint-st-refresh', reloadData)
|
})
|
</script>
|
|
<style scoped lang="scss">
|
.menu-title-box {
|
}
|
|
.slot-img {
|
width: 72rpx;
|
height: 72rpx;
|
margin-right: 24rpx;
|
}
|
.statu-img {
|
width: 60rpx;
|
height: 40rpx;
|
}
|
.text-mini {
|
font-size: 24rpx;
|
}
|
|
.menu-indicator {
|
width: 6rpx;
|
height: 26rpx;
|
border-radius: 10rpx;
|
background-color: $uni-color-primary;
|
}
|
:deep(.wd-card__footer) {
|
padding: 10rpx !important;
|
}
|
:deep(.wd-card__title-content) {
|
padding: 24rpx 0 !important;
|
}
|
|
/* 工单卡片背景颜色 */
|
.card-urgent {
|
background-color: rgba(255, 204, 0, 0.1); /* 黄色背景 */
|
}
|
.card-overdue {
|
background-color: rgba(255, 0, 0, 0.1); /* 红色背景 */
|
}
|
</style>
|
