| | |
| | | :key="index" |
| | | :xs="12" |
| | | :sm="8" |
| | | :md="colSpan" |
| | | :lg="colSpan" |
| | | :md="dynamicColSpan" |
| | | :lg="dynamicColSpan" |
| | | > |
| | | <el-tooltip |
| | | :content="getTooltipContent(item.name)" |
| | |
| | | :body-style="item.router ? 'cursor: pointer' : 'cursor: default'" |
| | | :class="getCardClass(item.name)" |
| | | > |
| | | <div |
| | | class="card-content" |
| | | @click="handleCardClick(item)" |
| | | > |
| | | <div class="card-content" @click="handleCardClick(item)"> |
| | | <div class="card-label"> |
| | | <span class="label-text">{{ item.name }}</span> |
| | | </div> |
| | | <div class="card-value"> |
| | | {{ item.value !== undefined && item.value !== null ? item.value : 0 }} |
| | | {{ |
| | | item.value !== undefined && item.value !== null |
| | | ? item.value |
| | | : 0 |
| | | }} |
| | | </div> |
| | | </div> |
| | | </el-card> |
| | |
| | | props: { |
| | | cardlist: { |
| | | type: Array, |
| | | default: () => [] |
| | | default: () => [], |
| | | }, |
| | | colSpan: { |
| | | type: Number, |
| | | default: 4 |
| | | default: 4, |
| | | }, |
| | | showExtra: { |
| | | type: Boolean, |
| | | default: true |
| | | default: true, |
| | | }, |
| | | ycvalue: { |
| | | type: Number, |
| | | default: 0 |
| | | default: 0, |
| | | }, |
| | | jgvalue: { |
| | | type: Number, |
| | | default: 0 |
| | | default: 0, |
| | | }, |
| | | showWarningCondition: { |
| | | type: Boolean, |
| | | default: false |
| | | } |
| | | default: false, |
| | | }, |
| | | }, |
| | | computed: { |
| | | mergedCardList() { |
| | |
| | | if (this.showExtra) { |
| | | list.push({ |
| | | name: "异常", |
| | | value: this.ycvalue |
| | | value: this.ycvalue, |
| | | }); |
| | | } |
| | | |
| | | if (this.showWarningCondition) { |
| | | list.push({ |
| | | name: "警告", |
| | | value: this.jgvalue |
| | | value: this.jgvalue, |
| | | }); |
| | | } |
| | | |
| | | return list; |
| | | } |
| | | }, |
| | | // 动态计算每列占的栅格数 |
| | | dynamicColSpan() { |
| | | const totalCards = this.mergedCardList.length; |
| | | |
| | | if (totalCards <= 4) return 6; // 一行4个 |
| | | if (totalCards <= 6) return 4; // 一行6个 |
| | | if (totalCards <= 8) return 3; // 一行8个 |
| | | return 2; // 一行12个 |
| | | }, |
| | | }, |
| | | methods: { |
| | | getCardClass(name) { |
| | | const classMap = { |
| | | "患者服务总量": "total-card", |
| | | "无需随访": "no-follow-card", |
| | | "需随访": "need-follow-card", |
| | | "待随访": "pending-card", |
| | | "已完成": "completed-card", |
| | | "异常": "error-card", |
| | | "警告": "warning-card" |
| | | 患者服务总量: "total-card", |
| | | 无需随访: "no-follow-card", |
| | | 需随访: "need-follow-card", |
| | | 待随访: "pending-card", |
| | | 已完成: "completed-card", |
| | | 异常: "error-card", |
| | | 警告: "warning-card", |
| | | }; |
| | | return classMap[name] || "default-card"; |
| | | }, |
| | | |
| | | getTooltipContent(name) { |
| | | const tooltips = { |
| | | "患者服务总量": "患者服务总量 = 无需随访 + 需随访", |
| | | "无需随访": "无需随访:不需要进行随访的患者数量", |
| | | "需随访": "需随访 = 待随访 + 已完成", |
| | | "待随访": "待随访:等待进行随访的患者数量", |
| | | "已完成": "已完成:已完成随访的患者数量", |
| | | "异常": "异常数据统计", |
| | | "警告": "警告数据统计" |
| | | 患者服务总量: "患者服务总量 = 无需随访 + 需随访", |
| | | 无需随访: "无需随访:不需要进行随访的患者数量", |
| | | 需随访: "需随访 = 待随访 + 已完成", |
| | | 待随访: "待随访:等待进行随访的患者数量", |
| | | 已完成: "已完成:已完成随访的患者数量", |
| | | 异常: "异常数据统计", |
| | | 警告: "警告数据统计", |
| | | }; |
| | | return tooltips[name] || ""; |
| | | }, |
| | |
| | | this.$router.push(item.router); |
| | | } |
| | | this.$emit("card-click", item); |
| | | } |
| | | } |
| | | }, |
| | | }, |
| | | }; |
| | | </script> |
| | | |