update: 设施环境控制住总览页面样式调整

src/views/system/fasc/index.vue

@@ -2,17 +2,20 @@
     <div class="fasc-card-container">
         <el-card
             v-for="card in cardInfos"
-            :key="card.title"
-            :header="card.title"
-            :body-style="{ padding: '20px'}"
-            :class="card.finish ? 'finshedCard':'noFinshedCard'"
+            :key="card.type"
+            :header="card.type"
+            class="fasc-card"
+            :class="card.isComplete ? 'completed' : 'incomplete'"
             @click.native="goToDetailPage(card)"
         >
             <div
-                v-for="depObj in card.dep"
-                :key="depObj.name_"
+                v-for="item in card.detail"
+                :key="item.name"
+                class="card-item"
             >
-                <p>【{{ depObj.name_ }}】今日已监测：{{ depObj.done }}，剩余：{{ depObj.todo }}</p>
+                <el-tag size="medium" effect="dark" :type="item.status">{{ item.name }}</el-tag>
+                今日已监测：{{ item.done }}，剩余：{{ item.todo }}
+                <!-- 【{{ item.name }}】今日已监测：{{ item.done }}，剩余：{{ item.todo }} -->
             </div>
         </el-card>
     </div>
@@ -23,39 +26,35 @@ import { getFacsDaily } from '@/api/platform/system/jbdHome'
 export default {
     data () {
         return {
-            // cards: [
-            //     { id: 1, title: '室内温湿度监控', description: '今日已监测：0，剩余：0' },
-            //     { id: 2, title: '冰箱温度监控', description: '今日已监测：0，剩余：0' },
-            //     { id: 3, title: '温浴箱温度监控', description: '今日已监测：0，剩余：0' },
-            //     { id: 4, title: '阴凉柜温度监控', description: '今日已监测：0，剩余：0' },
-            //     { id: 5, title: '纯水机水质监测', description: '今日已监测：0，剩余：0' },
-            //     { id: 6, title: '每日安全检查', description: '今日已监测：0，剩余：0' },
-            //     { id: 7, title: '每月安全检查', description: '今日已监测：0，剩余：0' },
-            //     { id: 8, title: '含氯有效性监测', description: '今日已监测：0，剩余：0' },
-            //     { id: 9, title: '紫外灯辐照测定', description: '今日已监测：0，剩余：0' },
-            //     { id: 10, title: '洗眼器检查', description: '今日已监测：0，剩余：0' },
-            //     { id: 11, title: '紧急淋浴器检查', description: '今日已监测：0，剩余：0' },
-            //     { id: 12, title: '紫外灯消毒', description: '今日已监测：0，剩余：0' }
-            // ],
-            hoverId: null,
             cardInfos: []
         }
     },
     mounted () {
         getFacsDaily().then(res => {
             const data = res.data || []
-            for (const i of data) {
-                const hadData = this.cardInfos.some(so => so.title === i.facs_type)
-                if (!hadData) {
-                    const cardInfo = {
-                        title: i.facs_type,
-                        dep: data.filter(fi => { return fi.facs_type === i.facs_type }),
-                        finish: data.some(so => so.facs_type === i.facs_type && so.todo === 0),
-                        pagePath: i.pagePath
-                    }
-                    this.cardInfos.push(cardInfo)
+            data.forEach(item => {
+                const index = this.cardInfos.findIndex(i => item.facs_type.includes(i.type))
+                if (index !== -1) {
+                    this.cardInfos[index].detail.push({
+                        name: item.name_,
+                        done: item.done,
+                        todo: item.todo,
+                        status: item.todo === 0 ? 'success' : 'warning'
+                    })
+                } else {
+                    this.cardInfos.push({
+                        type: item.facs_type.split('-')[1],
+                        detail: [{
+                            name: item.name_,
+                            done: item.done,
+                            todo: item.todo,
+                            status: item.todo === 0 ? 'success' : 'warning'
+                        }],
+                        isComplete: !data.some(i => i.facs_type === item.facs_type && i.todo !== 0),
+                        pagePath: item.pagePath
+                    })
                 }
-            }
+            })
         })
     },
     methods: {
@@ -74,26 +73,44 @@ export default {
         display: flex;
         flex-wrap: wrap;
         justify-content: flex-start;
-        .noFinshedCard {
+        max-height: calc(100vh - 90px);
+        overflow: auto;
+        .fasc-card {
             width: 300px;
             margin: 20px;
             transition: all 0.3s ease;
             cursor: pointer;
-            background: #E6A23C;
             &:hover {
                 transform: scale(1.05);
                 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
             }
+            ::v-deep {
+                .el-card__header {
+                    padding: 16px 20px;
+                    font-weight: bold;
+                }
+                .el-card__body {
+                    padding: 16px;
+                }
+            }
+            .card-item {
+                margin-bottom: 8px;
+            }
         }
-        .finshedCard {
-            width: 300px;
-            margin: 20px;
-            transition: all 0.3s ease;
-            cursor: pointer;
-            background:#67C23A;
-            &:hover {
-                transform: scale(1.05);
-                box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+        .incomplete {
+            // box-shadow: 0 2px 12px 0 rgba(230, 162, 60, .1);
+            ::v-deep {
+                .el-card__header {
+                    background: #E6A23C;
+                }
+            }
+        }
+        .completed {
+            // box-shadow: 0 2px 12px 0 rgba(103, 194, 58, .1);
+            ::v-deep {
+                .el-card__header {
+                    background: #67C23A;
+                }
             }
         }
     }