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

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

View File

@@ -1,10 +1,23 @@
<template>
<view class=" page padding">
<view class="padding radius bg-white list-list margin-bottom" v-for="item in hiddenDangerList"
<!-- 顶部状态筛选 Tab -->
<scroll-view class="status-tabs" 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': activeTab === index }" @click="activeTab = index">
<text class="status-tab-text">{{ tab.label }}</text>
<view v-if="activeTab === index" class="status-tab-bar"></view>
</view>
</view>
</scroll-view>
<view v-if="filteredList.length === 0" class="empty-tip text-gray text-center padding">暂无数据</view>
<view class="padding radius bg-white list-list margin-bottom" v-for="item in filteredList"
:key="item.hazardId">
<view class="flex justify-between margin-bottom">
<view class="text-bold text-black">{{item.title}}</view>
<view class="text-blue">{{item.statusName}}</view>
<view class="text-blue" style="white-space: nowrap; flex-shrink: 0; margin-left: 16rpx;">{{item.statusName}}</view>
</view>
<view class="flex margin-bottom">
<view class="text-gray">隐患等级</view>
@@ -56,12 +69,12 @@
</view>
<scroll-view class="popup-body" scroll-y>
<view class="flex margin-bottom">
<view class="text-gray">隐患图片/视频</view>
<view class="text-gray">隐患图片</view>
<view class="text-red">*</view>
</view>
<up-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
:maxCount="10"></up-upload>
<view class="text-gray text-sm">必填请上传现场照片或者视频作为隐患证据</view>
<view class="text-gray text-sm">必填请上传现场照片作为隐患证据</view>
<view class="ai-btn-wrapper margin-top">
<button class="ai-analyze-btn" :loading="aiAnalyzing" :disabled="aiAnalyzing" @click="handleAiAnalyze">
<text v-if="!aiAnalyzing" class="cuIcon-magic ai-btn-icon"></text>
@@ -685,12 +698,31 @@
});
});
// 状态筛选 Tab
const statusTabs = ref([
{ label: '全部状态', value: '' },
{ label: '待验收', value: '待验收' },
{ label: '待整改', value: '待整改' },
{ label: '待交办', value: '待交办' },
{ label: '验收通过', value: '验收通过' }
]);
const activeTab = ref(0);
// 根据选中 tab 过滤列表
const filteredList = computed(() => {
const currentTab = statusTabs.value[activeTab.value];
if (!currentTab || !currentTab.value) {
return hiddenDangerList.value;
}
return hiddenDangerList.value.filter(item => item.statusName === currentTab.value);
});
</script>
<style lang="scss" scoped>
.page {
min-height: 100vh;
background: #EBF2FC;
padding-top: 100rpx; // 给顶部固定Tab留出空间
padding-bottom: 120rpx; // 给底部按钮留出空间
}
@@ -730,6 +762,8 @@
.level-tag {
padding: 4rpx 16rpx;
border-radius: 8rpx;
white-space: nowrap;
flex-shrink: 0;
}
// 轻微隐患
@@ -991,6 +1025,54 @@
}
}
}
// 状态筛选 Tab 样式
.status-tabs {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99;
white-space: nowrap;
background: #fff;
padding: 0 10rpx;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.06);
}
.status-tabs-inner {
display: inline-flex;
align-items: center;
height: 88rpx;
}
.status-tab-item {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0 28rpx;
height: 88rpx;
position: relative;
}
.status-tab-text {
font-size: 28rpx;
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>
<style lang="scss">