<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-drop-menu>
|
<wd-drop-menu-item v-model="viewMode" :options="viewModeList" @change="handleViewMode" />
|
<wd-drop-menu-item v-model="equName" :options="equList" @change="handleEquName" />
|
</wd-drop-menu>
|
<wd-divider></wd-divider>
|
</template>
|
<view class="bg-base">
|
<view class="w-full h-[24rpx]"></view>
|
<wd-card type="rectangle" v-for="(item, index) in dataList" :key="item.id">
|
<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">{{ item.equName }}</view>
|
<view class="text-color-gray ml-2 text-mini">{{ item.assetNo }}</view>
|
</view>
|
|
<view class="flex items-center">
|
<text class="text-color-gray text-mini">
|
{{
|
viewMode === 'Day' ? item.planTimeStr : item?.planTimeStr?.substring(0, 7) || ''
|
}}
|
</text>
|
</view>
|
</view>
|
</template>
|
<view class="flex h-[100rpx]" items-center>
|
<image class="slot-img text-center" src="/static/images/camera.png" />
|
<view class="flex-1">
|
<view class="text-color-gray text-xs mt-1 flex">
|
<text class="mr-3">点检总数: {{ item.recordCount }}</text>
|
|
|
<text class="mx-3">已点检: {{ item.checkCount }}</text>
|
|
|
<text class="ml-3">未点检: {{ item.unCheckCount }}</text>
|
</view>
|
<view class="text-color-gray text-xs mt-2 flex">
|
<text class="mr-3">正常: {{ item.normalNum }}</text>
|
|
|
<text class="mx-3">异常: {{ item.abNormalNum }}</text>
|
</view>
|
<view class="text-color-gray text-xs mt-2 flex">
|
<text>状态：</text>
|
<template v-if="item.recordCount === item.checkCount">
|
<wd-icon class="icon-color-success" 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>
|
<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 } from 'vue'
|
import { getInspStList } from '@/service/inspect'
|
import { onShow } from '@dcloudio/uni-app'
|
|
const viewMode = ref<string>('Day')
|
const equName = ref<string>('所有设备')
|
|
const viewModeList = ref<Record<string, any>[]>([
|
{ label: '日视图', value: 'Day' },
|
{ label: '月视图', value: 'Month' },
|
])
|
const equList = ref<Record<string, any>[]>([{ label: '所有设备', value: '所有设备' }])
|
function handleViewMode({ value }) {
|
reloadData()
|
}
|
function handleEquName({ value }) {
|
console.log(value)
|
}
|
|
const paging = ref(null)
|
const dataList = ref([])
|
|
const queryList = (pageNum?: number, pageSize?: number) => {
|
// 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
|
// 这里的请求只是演示，请替换成自己的项目的网络请求，并在网络请求回调中通过paging.value.complete(请求回来的数组)将请求结果传给z-paging
|
getInspStList({ pageNum, pageSize, viewMode: viewMode.value })
|
.then((res: any) => {
|
// 请勿在网络请求回调中给dataList赋值！！只需要调用complete就可以了
|
paging.value.complete(res.rows)
|
})
|
.catch((res) => {
|
// 如果请求失败写paging.value.complete(false)，会自动展示错误页面
|
// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
|
// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
|
paging.value.complete(false)
|
})
|
}
|
|
function itemClick(item) {
|
const inspCode = `${item.equId}_${item.planTime}_${viewMode.value}`
|
uni.navigateTo({
|
url: `/pages/inspect/insp-record?id=${item.id}&inspCode=${inspCode}&specialNote=${item.specialNote ?? ''}&equName=${item.equName ?? ''}&assetNo=${item.assetNo ?? ''}&planTimeStr=${item.planTimeStr ?? ''}`,
|
})
|
}
|
|
function reloadData() {
|
paging.value.reload()
|
}
|
onLoad(() => {
|
uni.$on('insp-st-refresh', reloadData)
|
})
|
onUnload(() => {
|
uni.$off('insp-st-refres', 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: 22rpx;
|
}
|
|
.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;
|
}
|
</style>
|
