xqq_ele/lib/es/components/card-metrics/card-metrics.vue2.js

框架

import { defineComponent as m, ref as k, computed as a, watch as s } from "vue";
import { getLinerStartColor as v } from "../../util/function.js";
import T from "./config.js";
const W = m({
  name: "XCardMetrics",
  components: {},
  props: T,
  emits: ["onClick"],
  setup(t, { emit: c }) {
    const r = k([]), u = a(() => ({
      width: t.width + "px",
      height: t.height + "px",
      "grid-template-rows": `repeat(${r.value.length}, 1fr)`,
      "grid-row-gap": `${t.gap[0]}px`
    })), S = a(() => ({
      ...t.unitStyle,
      display: t.unitStyle.show ? "inline-block" : "none",
      fontSize: t.unitStyle.fontSize || "14px",
      fontWeight: t.unitStyle.fontWeight || 400,
      color: t.unitStyle.color
    })), y = a(() => ({
      ...t.totalStyle,
      display: t.totalStyle.show ? "inline-block" : "none",
      fontSize: t.totalStyle.fontSize,
      fontWeight: t.totalStyle.fontWeight,
      color: t.totalStyle.color
    })), g = a(() => ({
      ...t.splitTotalStyle,
      display: t.splitTotalStyle.show ? "inline-block" : "none",
      fontSize: t.splitTotalStyle.fontSize,
      fontWeight: t.splitTotalStyle.fontWeight,
      color: t.splitTotalStyle.color
    })), d = (e) => ({
      fontSize: t.valueStyle.fontSize || "20px",
      fontWeight: t.valueStyle.fontWeight || 600,
      color: t.valueStyle.colorType === "unite" ? t.valueStyle.color : t.valueStyle.colors[e] || "#FFFFFF",
      ...t.valueStyle
    }), f = (e) => {
      const n = t.backgroundTextStyle.colorType === "unite" ? String(t.backgroundTextStyle.color) : String(
        t.backgroundTextStyle.colors[e] || "#FFFFFF"
      );
      return {
        fontSize: t.textStyle.fontSize || "14px",
        fontWeight: t.textStyle.fontWeight || 400,
        color: t.textStyle.colorType === "unite" ? t.textStyle.color : t.textStyle.colors[e] || "#FFFFFF",
        background: n,
        borderRadius: `0 0 ${t.borderStyle.borderRadius} ${t.borderStyle.borderRadius}`,
        // 子元素未设置radius影响父元素的radius
        textAlign: t.textStyle.textAlign || "center"
      };
    }, b = (e) => ({
      border: t.backgroundValueStyle.colorType === "unite" ? `1px solid ${String(
        t.backgroundValueStyle.color
      )}` : `1px solid ${String(
        t.backgroundValueStyle.colors[e]
      ) || "#FFFFFF"}`,
      borderRadius: t.borderStyle.borderRadius
    }), F = (e) => {
      var l;
      const n = t.backgroundValueStyle.colorType === "unite" ? String(t.backgroundValueStyle.color) : String(
        t.backgroundValueStyle.colors[e.idx] || "#FFFFFF"
      ), o = {
        textAlign: t.valueStyle.textAlign || "center",
        "background-image": t.backgroundValueStyle.isLinear ? `linear-gradient(0deg, ${v(
          n
        )} 0%, ${n} 100%)` : n
      };
      return (l = e.valueBg) != null && l.show ? (o["background-image"] = `url(${e.valueBg.url})`, {
        ...o,
        "background-size": "contain",
        "background-repeat": "no-repeat",
        "background-position": "center"
      }) : o;
    }, x = (e) => ({
      "grid-template-columns": `repeat(${e}, 1fr)`,
      "grid-gap": `${t.gap[1]}px`
    }), h = (e) => {
      c("onClick", e);
    };
    return s(
      t.data,
      () => {
        const e = t.numberOfRow.filter((l) => l !== 0), n = t.data.map(
          (l, i) => ({
            ...l,
            idx: i
          })
        ), o = [];
        for (let l = 0; l < e.length; l++) {
          const i = n.length - Number(e[l]);
          i >= 0 ? o[l] = n.splice(0, Number(e[l])) : o[l] = [
            ...n.splice(0, Number(e[l])),
            ...new Array(Math.abs(i)).fill({
              name: null,
              text: null,
              value: null
            })
          ];
        }
        r.value = o;
      },
      { immediate: !0 }
    ), {
      data: r,
      cardStyle: u,
      unitStyle: S,
      totalStyle: y,
      splitTotalStyle: g,
      valueStyle: d,
      textStyle: f,
      borderStyle: b,
      vnStyle: F,
      lineStyle: x,
      onClick: h
    };
  }
});
export {
  W as default
};