WXL (wul)
2 天以前 d3c60e18b95b50751f8088fa2d23cd8ff7f173bc
src/components/StatisticsCards/index.vue
@@ -6,8 +6,8 @@
        :key="index"
        :xs="12"
        :sm="8"
        :md="colSpan"
        :lg="colSpan"
        :md="dynamicColSpan"
        :lg="dynamicColSpan"
      >
        <el-tooltip
          :content="getTooltipContent(item.name)"
@@ -20,15 +20,16 @@
            :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>
@@ -44,28 +45,28 @@
  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() {
@@ -74,43 +75,52 @@
      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] || "";
    },
@@ -120,8 +130,8 @@
        this.$router.push(item.router);
      }
      this.$emit("card-click", item);
    }
  }
    },
  },
};
</script>