pizhengyu/threeonecheck_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改并优化了一些功能及bug

Browse Source
This commit is contained in:
王利强
2026-05-14 13:45:46 +08:00
parent 805747d1d9
commit 2322fcf39a
51 changed files with 802 additions and 346 deletions
Download Patch File Download Diff File Expand all files Collapse all files

225
pages/Inspectionwarning/Inspectionwarning.vue
View File

@@ -1,13 +1,5 @@
<template>
<view class="padding page">
<scroll-view scroll-x class="tab-scroll">
<view class="tab-list">
<view class="tab-item" :class="{ 'tab-active': activeIndex === index }"
v-for="(item, index) in warningList" :key="index" @click="switchTab(index)">
{{ item.name }}
</view>
</view>
</scroll-view>
<!-- 查询条件 -->
<view class="bg-white radius padding margin-top search-card">
<view class="section-header">
@@ -84,49 +76,57 @@
</view>
</view>
<!-- 数据列表标题 -->
<view class="bg-white radius padding margin-top margin-bottom flex align-center">
<view class="list-title-bar"></view>
<view class="text-bold text-black">日常安全检查预警数据列表</view>
<!-- 数据列表标题 + 状态筛选 -->
<view class="bg-white radius padding-top padding-left padding-right margin-top margin-bottom">
<view class="flex align-center" style="margin-bottom: 20rpx;">
<view class="list-title-bar"></view>
<view class="text-bold text-black">日常安全检查预警数据列表</view>
</view>
<scroll-view scroll-x :show-scrollbar="false">
<view class="status-tabs-inner">
<view v-for="(tab, index) in statusTabs" :key="index" class="status-tab-item"
:class="{ 'status-tab-active': activeStatusTab === index }" @click="switchStatusTab(index)">
<text class="status-tab-text">{{ tab.label }}{{ tab.count != null ? tab.count : '' }}</text>
<view v-if="activeStatusTab === index" class="status-tab-bar"></view>
</view>
</view>
</scroll-view>
</view>
<!-- 数据列表 -->
<view v-for="(item, index) in dataList" :key="item.id" class="list-card">
<!-- 状态标签（斜角） -->
<view class="status-tag" :class="getStatusClass(item.overdueDays)">
<text class="status-text">{{ getStatusText(item.overdueDays, item.statusName) }}</text>
<!-- 卡片头部：企业名称 + 状态标签 -->
<view class="card-title-row">
<view class="card-company-name">{{ item.deptName || '-' }}</view>
<view class="card-status-tag" :class="getStatusClass(item.overdueDays)">
<text>{{ getStatusText(item.overdueDays, item.statusName) }}</text>
</view>
</view>
<view class="card-header">
<view class="text-bold text-black">#{{ index + 1 }}</view>
</view>
<view class="card-row">
<view class="row-label">企业名称：</view>
<view class="row-value">{{ item.deptName || '-' }}</view>
</view>
<view class="card-row">
<view class="row-label">计划名称：</view>
<view class="row-value">{{ item.planName || '-' }}</view>
</view>
<view class="card-row">
<view class="row-label">计划周期：</view>
<view class="row-value">{{ item.cycleName || '-' }}</view>
</view>
<view class="card-row">
<view class="row-label">预约检查日期：</view>
<view class="row-value">{{ item.taskDate || '-' }}</view>
</view>
<view class="card-row">
<view class="row-label">实际完成时间：</view>
<view class="row-value">{{ item.finishTime || '未完成' }}</view>
</view>
<view class="card-row">
<view class="row-label">负责人：</view>
<view class="row-value">{{ item.executorName || '-' }}</view>
</view>
<view class="card-row">
<view class="row-label">逾期天数：</view>
<view class="row-value">{{ item.overdueDays || '-' }}</view>
<view class="card-body">
<view class="card-row">
<view class="row-label">计划名称：</view>
<view class="row-value">{{ item.planName || '-' }}</view>
</view>
<view class="card-row">
<view class="row-label">计划周期：</view>
<view class="row-value">{{ item.cycleName || '-' }}</view>
</view>
<view class="card-row">
<view class="row-label">预约检查日期：</view>
<view class="row-value">{{ item.taskDate || '-' }}</view>
</view>
<view class="card-row">
<view class="row-label">实际完成时间：</view>
<view class="row-value">{{ item.finishTime || '未完成' }}</view>
</view>
<view class="card-row">
<view class="row-label">负责人：</view>
<view class="row-value">{{ item.executorName || '-' }}</view>
</view>
<view class="card-row">
<view class="row-label">逾期天数：</view>
<view class="row-value">{{ item.overdueDays || '-' }}</view>
</view>
</view>
</view>
@@ -168,6 +168,23 @@ const dataList = ref([])
const pageNum = ref(1)
const pageSize = ref(20)
// 状态筛选 Tab
const statusTabs = ref([
{ label: '全部状态', value: 0, count: null },
{ label: '逾期未检', value: 1, count: null },
{ label: '严重逾期', value: 2, count: null },
{ label: '期限内待检', value: 3, count: null },
{ label: '逾期已完成', value: 4, count: null },
{ label: '按期已完成', value: 5, count: null }
])
const activeStatusTab = ref(0)
const switchStatusTab = (index) => {
activeStatusTab.value = index
pageNum.value = 1
fetchData()
}
// 日期格式化（仅日期，用于页面显示）
const formatDate = (timestamp) => {
const date = new Date(timestamp)
@@ -236,6 +253,11 @@ const fetchData = async () => {
if (searchForm.deptName && searchForm.deptName.trim()) {
params.deptName = searchForm.deptName.trim()
}
// 状态筛选
const statusValue = statusTabs.value[activeStatusTab.value].value
if (statusValue !== 0) {
params.inspectionStatus = statusValue
}
const res = await getInspectionWarningList(params)
if (res.code === 0) {
@@ -391,31 +413,59 @@ onShow(() => {
// 数据卡片
.list-card {
position: relative;
background: #FFFFFF;
box-shadow: 0rpx 2rpx 10rpx rgba(0, 0, 0, 0.08);
border-left: 8rpx solid #2667E9;
border-radius: 16rpx;
padding: 30rpx;
padding: 0;
margin-bottom: 20rpx;
overflow: hidden;
.card-header {
margin-bottom: 20rpx;
.card-title-row {
display: flex;
justify-content: space-between;
align-items: center;
background: linear-gradient(135deg, #4A7CF7 0%, #2667E9 100%);
padding: 24rpx 30rpx;
}
.card-company-name {
font-size: 32rpx;
font-weight: bold;
color: #fff;
flex: 1;
margin-right: 16rpx;
}
.card-status-tag {
padding: 8rpx 24rpx;
border-radius: 8rpx;
white-space: nowrap;
flex-shrink: 0;
font-size: 24rpx;
color: #fff;
font-weight: 500;
}
.card-body {
padding: 30rpx;
}
.card-row {
display: flex;
margin-top: 16rpx;
font-size: 28rpx;
line-height: 1.5;
&:first-of-type {
margin-top: 0;
}
.row-label {
color: #999;
white-space: nowrap;
flex-shrink: 0;
}
.row-value {
color: #333;
word-break: break-all;
@@ -423,26 +473,6 @@ onShow(() => {
}
}
// 状态标签（斜角样式）
.status-tag {
position: absolute;
top: 0;
right: 0;
width: 160rpx;
height: 50rpx;
display: flex;
align-items: center;
justify-content: center;
transform: rotate(0deg);
border-radius: 0 16rpx 0 16rpx;
.status-text {
font-size: 22rpx;
color: #fff;
font-weight: 500;
}
}
// 严重逾期 - 红色
.status-serious {
background: linear-gradient(135deg, #FF6B6B 0%, #EE5A5A 100%);
@@ -470,4 +500,49 @@ onShow(() => {
color: #999;
font-size: 28rpx;
}
// 状态筛选 Tab 样式
.status-tabs {
white-space: nowrap;
background: #fff;
border-radius: 16rpx;
margin-bottom: 20rpx;
padding: 0 10rpx;
}
.status-tabs-inner {
display: inline-flex;
align-items: center;
height: 88rpx;
white-space: nowrap;
}
.status-tab-item {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0 24rpx;
height: 88rpx;
position: relative;
}
.status-tab-text {
font-size: 26rpx;
color: #666;
}
.status-tab-active .status-tab-text {
color: #2667E9;
font-weight: bold;
}
.status-tab-bar {
position: absolute;
bottom: 8rpx;
width: 40rpx;
height: 6rpx;
background: #2667E9;
border-radius: 3rpx;
}
</style>