养护类型

刘淇
1 parent 1594be1c
Showing 1 changed file with 28 additions and 39 deletions
pages-sub/daily/maintain-manage/type-list.vue
 <template>
     <view class="type-grid">
-        <!-- 按养护类型渲染计划卡片：同一类型下多个批次合并成一张卡，批次号/计划名称等每项一行，多批次时逐行列出 -->
         <template v-if="cardList.length > 0">
             <view class="type-card" v-for="item in cardList" :key="item.key" hover-class="type-card--hover"
                 @click="toNextPage(item)">
                 <view class="info-row" v-for="row in item.rows" :key="row.label">
-                    <text class="info-label">{{ row.label }}：</text>
+                    <!-- ✅计划类型：不渲染左侧label文字；其他行正常显示label -->
+                    <text class="info-label" v-if="row.label !== '计划类型'">{{ row.label }}：</text>
                     <view class="info-value">
                         <view class="info-line" v-for="(value, idx) in row.values" :key="idx"
                             :class="{ 'info-line--count': row.label === '待完成数' }">{{ value }}</view>
@@ -21,15 +21,13 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { onShow, onUnload } from '@dcloudio/uni-app';
-
 const cardList = ref<Array<{
     key: string
     planTypeId: string | number
     batchNos: string[]
     rows: Array<{ label: string; values: string[] }>
 }>>([])
-
-/** 日期字段可能是 'yyyy-MM-dd' 字符串（LocalDate）或时间戳，统一转成 yyyy-MM-dd */
+/** 日期字段可能是 'yyyy‑MM‑dd' 字符串（LocalDate）或时间戳，统一转成 yyyy‑MM‑dd */
 const formatDate = (value: any) => {
     if (value === null || value === undefined || value === '') return '--'
     if (Array.isArray(value)) {
@@ -39,15 +37,11 @@ const formatDate = (value: any) =&gt; {
         const d = new Date(value)
         return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
     }
-    // 'yyyy-MM-dd HH:mm:ss' 之类的字符串只取日期部分
     return String(value).slice(0, 10)
 }
-
 /** 去重并保持原顺序，合并卡片时避免同一个值重复占一行 */
 const uniq = (list: any[]) => Array.from(new Set(list.filter(v => v !== null && v !== undefined && v !== '')))
-
 onShow(() => {
-    // 从storage拿上一页传过来完整对象
     const item = uni.getStorageSync('temp_maintain_item')
     if (!item) {
         uni.showToast({
@@ -57,7 +51,6 @@ onShow(() =&gt; {
         return
     }
     const roadName = item.roadName || '--'
-    // 接口已按养护类型分组，同一类型下的多个批次在这里合并成一张卡
     cardList.value = (item.planTypes || []).map((type: any) => {
         const batches = Array.isArray(type.batches) && type.batches.length
             ? type.batches
@@ -75,89 +68,85 @@ onShow(() =&gt; {
             planTypeId: type.planTypeId,
             batchNos,
             rows: [
-                { label: '批次号', values: batchNos.length ? batchNos : ['--'] },
-                { label: '计划名称', values: uniq(batches.map((batch: any) => batch.planName)).length
-                        ? uniq(batches.map((batch: any) => batch.planName)) : ['--'] },
-                { label: '道路名称', values: [roadName] },
                 { label: '计划类型', values: [type.planTypeName || '--'] },
-                { label: '执行时间', values: uniq(batches.map((batch: any) =>
-                        `${formatDate(batch.beginTime)} - ${formatDate(batch.endTime)}`)) },
                 { label: '待完成数', values: [`${pendingCount}次`] }
             ]
         }
     })
 });
-
-// 点击卡片跳到期次列表，把该类型下所有批次号一起带过去
 const toNextPage = (item: any) => {
     uni.setStorageSync('temp_maintain_rawList', item.batchNos || [])
     uni.navigateTo({
         url: `/pages-sub/daily/maintain-manage/type-list-page?planTypeId=${item.planTypeId}`
     })
 }
-
-// 页面卸载清理缓存，防止脏数据
 onUnload(()=>{
     uni.removeStorageSync('temp_maintain_item')
 })
 </script>
 <style scoped lang="scss">
-/* 卡片列表：页面 24rpx 内边距，卡片间距 16rpx */
 .type-grid {
     display: flex;
-    flex-direction: column;
-    gap: 16rpx;
+    flex-wrap: wrap;
+    gap: 24rpx;
     padding: 24rpx;
 }
-
-/* 卡片：一张卡对应一个养护类型（多批次合并），撑满一行 */
+/* 一行两张卡片，总宽度扣除中间间隙 */
 .type-card {
+    width: calc((100% - 24rpx) / 2);
+    box-sizing: border-box;
     display: flex;
     flex-direction: column;
-    box-sizing: border-box;
     gap: 8rpx;
     background: #ffffff;
     border-radius: 16rpx;
     padding: 24rpx;
     box-shadow: 0 4rpx 16rpx rgba(17, 24, 39, 0.06);
     transition: background-color 0.15s ease;
-
     &--hover {
         background: #F4F5F7;
     }
 }
-
-/* 信息行：左侧字段名浅灰，右侧值右对齐；多个批次时值逐行显示 */
 .info-row {
     display: flex;
     align-items: flex-start;
 }
 .info-label {
-  width: 130rpx !important;
-  flex-shrink: 0;
-  font-size: 26rpx;
-  color: #6B7280;
-  line-height: 1.5;
+    width: 130rpx !important;
+    flex-shrink: 0; /* 标签禁止压缩 */
+    font-size: 26rpx;
+    color: #6B7280;
+    line-height: 1.5;
 }
 .info-value {
     flex: 1;
     min-width: 0;
+    /* ✅计划类型没有label时，去掉左边padding，顶格显示 */
     padding-left: 16rpx;
 }
-
+/* 当该行没有label的时候，value不要左边边距 */
+.info-row:not(:has(.info-label)) .info-value {
+    padding-left: 0;
+}
 .info-line {
     font-size: 26rpx;
     color: #1F2937;
     line-height: 1.5;
-    word-break: break-all;
-
-    /* 待完成次数加重，便于一眼看到 */
+    /* 普通计划类型文字：超长省略 */
+    &:not(.info-line--count) {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+    /* ✅待完成数：禁止省略、禁止截断，数字必须完整显示 */
     &--count {
         color: #2563EB;
         font-weight: 500;
+        white-space: normal !important;
+        overflow: visible !important;
+        text-overflow: clip !important;
     }
 }
-
 .type-empty {
     padding: 120rpx 0;
     text-align: center;