@fecp/designer 5.6.28 → 5.6.29

package/es/packages/mobile/src/components/dataDisplay/chart/Chart.vue.mjs

@@ -0,0 +1,314 @@
+import { getCurrentInstance, ref, computed, watch, onMounted, nextTick, onBeforeUnmount, createElementBlock, openBlock, normalizeStyle, createCommentVNode, createElementVNode, toDisplayString, Fragment, renderList, normalizeClass } from "vue";
+import { ensureEcharts } from "./useEcharts.mjs";
+import { buildOption } from "./optionBuilder.mjs";
+import { createDataSource } from "../../../utils/datasource.mjs";
+/* empty css            */
+import _export_sfc from "../../../../../../_virtual/_plugin-vue_export-helper.mjs";
+const _hoisted_1 = {
+  key: 0,
+  class: "drill-breadcrumb"
+};
+const _hoisted_2 = ["onClick"];
+const rootLabel = "全部";
+const _sfc_main = {
+  __name: "Chart",
+  props: {
+    // ═══ 基础 ═══
+    chartType: { type: String, default: "bar" },
+    preset: { type: String, default: "default" },
+    title: { type: String, default: "" },
+    // ═══ 数据 ═══
+    dataSourceValue: { type: [String, Number], default: "" },
+    mockData: { type: Object, default: null },
+    refreshKey: { type: [String, Number], default: "" },
+    // ═══ X 轴 ═══
+    xAxisField: { type: String, default: "name" },
+    xAxisType: { type: String, default: "category" },
+    xAxisDateFormat: { type: String, default: "MM-DD" },
+    // ═══ Y 轴（支持双轴）═══
+    series: { type: Array, default: () => [] },
+    yAxisLeftUnit: { type: String, default: "" },
+    yAxisRightUnit: { type: String, default: "" },
+    yAxisDecimals: { type: Number, default: 0 },
+    yAxisThousands: { type: Boolean, default: true },
+    // ═══ 通用样式 ═══
+    showLegend: { type: Boolean, default: true },
+    legendPosition: { type: String, default: "top" },
+    showTooltip: { type: Boolean, default: true },
+    showDataLabel: { type: Boolean, default: false },
+    animation: { type: Boolean, default: true },
+    stack: { type: Boolean, default: false },
+    smooth: { type: Boolean, default: false },
+    areaStyle: { type: Boolean, default: false },
+    // ═══ 饼图专属 ═══
+    pieRadius: { type: [Number, String], default: 60 },
+    pieInnerRadius: { type: [Number, String], default: 0 },
+    pieCenterText: { type: String, default: "" },
+    pieRoseType: { type: Boolean, default: false },
+    // ═══ 雷达图专属 ═══
+    radarShape: { type: String, default: "polygon" },
+    radarMax: { type: Number, default: 0 },
+    // ═══ 漏斗图专属 ═══
+    funnelSort: { type: String, default: "descending" },
+    funnelGap: { type: Number, default: 2 },
+    funnelLabelPosition: { type: String, default: "outside" },
+    // ═══ 钻取 ═══
+    drillDownEnabled: { type: Boolean, default: false },
+    drillDownField: { type: String, default: "id" },
+    drillDownDataSourceId: { type: [String, Number], default: "" },
+    drillDownParamName: { type: String, default: "" },
+    // 多级钻取层级配置：每项定义目标层级的字段+数据源+如何到达
+    drillLevels: { type: Array, default: () => [] },
+    // ═══ 运行时 ═══
+    isDev: { type: Boolean, default: false },
+    dataSources: { type: Array, default: () => [] },
+    formData: { type: Object, default: () => ({}) },
+    fields: { type: Array, default: () => [] }
+  },
+  setup(__props) {
+    const props = __props;
+    const currentInstance = getCurrentInstance();
+    const ctx = currentInstance.proxy;
+    const chartContainerRef = ref(null);
+    let chart = null;
+    let dataSourceManager = null;
+    const wrapperStyle = computed(() => {
+      return { height: "100%", width: "100%" };
+    });
+    const drillStack = ref([]);
+    const effectiveProps = computed(() => {
+      var _a;
+      if (drillStack.value.length === 0) return props;
+      const levelIdx = drillStack.value.length - 1;
+      const levelConfig = (_a = props.drillLevels) == null ? void 0 : _a[levelIdx];
+      if (!levelConfig) return props;
+      let series = props.series;
+      if (levelConfig.series && levelConfig.series.length) {
+        series = levelConfig.series;
+      } else if (levelConfig.seriesField) {
+        series = [
+          { name: levelConfig.seriesName || "", field: levelConfig.seriesField }
+        ];
+      }
+      const isBarLike = !["pie", "radar", "funnel"].includes(props.chartType);
+      return {
+        ...props,
+        dataSourceValue: levelConfig.dataSourceId || props.dataSourceValue,
+        xAxisField: levelConfig.xAxisField || props.xAxisField,
+        xAxisType: isBarLike ? levelConfig.xAxisType || props.xAxisType : props.xAxisType,
+        xAxisDateFormat: levelConfig.xAxisDateFormat || props.xAxisDateFormat,
+        series,
+        yAxisLeftUnit: isBarLike ? levelConfig.yAxisLeftUnit ?? props.yAxisLeftUnit : props.yAxisLeftUnit,
+        yAxisRightUnit: isBarLike ? levelConfig.yAxisRightUnit ?? props.yAxisRightUnit : props.yAxisRightUnit,
+        yAxisDecimals: isBarLike ? levelConfig.yAxisDecimals ?? props.yAxisDecimals : props.yAxisDecimals
+      };
+    });
+    watch(
+      () => props.drillDownEnabled,
+      (val) => {
+        if (!val) drillStack.value = [];
+      }
+    );
+    onMounted(() => {
+      const echarts = ensureEcharts();
+      nextTick(() => {
+        if (chartContainerRef.value) {
+          chart = echarts.init(chartContainerRef.value);
+          chart.on("click", handleChartClick);
+          loadData();
+        }
+      });
+    });
+    onBeforeUnmount(() => {
+      if (chart) {
+        chart.dispose();
+        chart = null;
+      }
+      if (dataSourceManager) {
+        dataSourceManager.destroy();
+        dataSourceManager = null;
+      }
+    });
+    watch(
+      () => [props.dataSourceValue, props.refreshKey],
+      () => {
+        loadData();
+      }
+    );
+    watch(
+      () => [
+        props.chartType,
+        props.preset,
+        props.title,
+        props.xAxisField,
+        props.xAxisType,
+        props.xAxisDateFormat,
+        JSON.stringify(props.series),
+        props.yAxisLeftUnit,
+        props.yAxisRightUnit,
+        props.yAxisDecimals,
+        props.yAxisThousands,
+        props.showLegend,
+        props.legendPosition,
+        props.showTooltip,
+        props.showDataLabel,
+        props.animation,
+        props.stack,
+        props.smooth,
+        props.areaStyle,
+        props.pieRadius,
+        props.pieInnerRadius,
+        props.pieCenterText,
+        props.pieRoseType,
+        props.radarShape,
+        props.radarMax,
+        props.funnelSort,
+        props.funnelGap,
+        props.funnelLabelPosition
+      ],
+      () => {
+        if (chart && lastRawData.value) {
+          renderChart(lastRawData.value);
+        }
+      }
+    );
+    let lastRawData = ref(null);
+    function loadData(dsId, extraParams) {
+      if (props.isDev && !props.dataSourceValue && !dsId) {
+        if (props.mockData) {
+          lastRawData.value = props.mockData;
+          renderChart(props.mockData);
+        } else {
+          lastRawData.value = { list: [] };
+          renderChart({ list: [] });
+        }
+        return;
+      }
+      const targetDsId = dsId || props.dataSourceValue;
+      if (!targetDsId) {
+        lastRawData.value = { list: [] };
+        renderChart({ list: [] });
+        return;
+      }
+      if (dataSourceManager) {
+        dataSourceManager.destroy();
+        dataSourceManager = null;
+      }
+      dataSourceManager = createDataSource({
+        http: ctx == null ? void 0 : ctx.$http,
+        dataSources: props.dataSources,
+        currentDataSourceId: targetDsId,
+        data: props.formData,
+        fields: props.fields
+      });
+      dataSourceManager.on("loaded", (data) => {
+        lastRawData.value = data;
+        renderChart(data);
+      });
+      dataSourceManager.on("error", (err) => {
+        console.error("图表数据源加载失败:", err);
+        lastRawData.value = { list: [] };
+        renderChart({ list: [] });
+      });
+      dataSourceManager.fetch(extraParams || {}).catch((err) => {
+        console.error("图表数据源请求异常:", err);
+      });
+    }
+    function renderChart(rawData) {
+      if (!chart) return;
+      const option = buildOption(effectiveProps.value, rawData);
+      chart.setOption(option, true);
+      chart.resize();
+    }
+    function handleChartClick(params) {
+      var _a, _b;
+      if (!props.drillDownEnabled || props.isDev) return;
+      const dataItem = params.data;
+      if (!dataItem || typeof dataItem !== "object") return;
+      const currentLevel = drillStack.value.length;
+      const nextLevelConfig = (_a = props.drillLevels) == null ? void 0 : _a[currentLevel];
+      const currentDrillConfig = currentLevel === 0 ? {
+        drillDownField: props.drillDownField,
+        drillDownParamName: props.drillDownParamName
+      } : (_b = props.drillLevels) == null ? void 0 : _b[currentLevel - 1];
+      const drillField = currentDrillConfig == null ? void 0 : currentDrillConfig.drillDownField;
+      if (!drillField) return;
+      const value = dataItem[drillField];
+      if (value == null) return;
+      const paramName = currentDrillConfig.drillDownParamName || drillField;
+      const extraParams = { [paramName]: value };
+      const dsId = nextLevelConfig ? nextLevelConfig.dataSourceId || props.dataSourceValue : props.drillDownDataSourceId || props.dataSourceValue;
+      const clickedName = dataItem.name || value;
+      const label = clickedName || (nextLevelConfig == null ? void 0 : nextLevelConfig.label) || "详情";
+      drillStack.value.push({
+        label,
+        params: { ...extraParams },
+        dsId
+      });
+      loadData(dsId, extraParams);
+    }
+    function handleBreadcrumbClick(targetIndex) {
+      if (targetIndex === -1) {
+        drillStack.value = [];
+        loadData();
+        return;
+      }
+      const target = drillStack.value[targetIndex];
+      if (!target) return;
+      drillStack.value = drillStack.value.slice(0, targetIndex + 1);
+      loadData(target.dsId, target.params);
+    }
+    function handleResize() {
+      if (chart) chart.resize();
+    }
+    window.addEventListener("resize", handleResize);
+    const resizeObserver = ref(null);
+    onMounted(() => {
+      nextTick(() => {
+        if (chartContainerRef.value && window.ResizeObserver) {
+          resizeObserver.value = new ResizeObserver(() => {
+            if (chart) chart.resize();
+          });
+          resizeObserver.value.observe(chartContainerRef.value);
+        }
+      });
+    });
+    onBeforeUnmount(() => {
+      if (resizeObserver.value) {
+        resizeObserver.value.disconnect();
+      }
+      window.removeEventListener("resize", handleResize);
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: "mobile-chart-wrapper",
+        style: normalizeStyle(wrapperStyle.value)
+      }, [
+        drillStack.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_1, [
+          createElementVNode("span", {
+            class: "breadcrumb-item",
+            onClick: _cache[0] || (_cache[0] = ($event) => handleBreadcrumbClick(-1))
+          }, toDisplayString(rootLabel)),
+          (openBlock(true), createElementBlock(Fragment, null, renderList(drillStack.value, (crumb, idx) => {
+            return openBlock(), createElementBlock(Fragment, { key: idx }, [
+              _cache[1] || (_cache[1] = createElementVNode("span", { class: "breadcrumb-sep" }, "›", -1)),
+              createElementVNode("span", {
+                class: normalizeClass(["breadcrumb-item", { active: idx === drillStack.value.length - 1 }]),
+                onClick: ($event) => handleBreadcrumbClick(idx)
+              }, toDisplayString(crumb.label), 11, _hoisted_2)
+            ], 64);
+          }), 128))
+        ])) : createCommentVNode("", true),
+        createElementVNode("div", {
+          ref_key: "chartContainerRef",
+          ref: chartContainerRef,
+          class: "mobile-chart-container"
+        }, null, 512)
+      ], 4);
+    };
+  }
+};
+const _Chart = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-f275ae3f"]]);
+export {
+  _Chart as default
+};

package/es/packages/mobile/src/components/dataDisplay/chart/formatters.mjs

@@ -0,0 +1,20 @@
+function formatValue(val, { unit = "", decimals = 0, thousands = true } = {}) {
+  if (val == null || val === "") return "-";
+  let num = Number(val);
+  if (isNaN(num)) return val;
+  let str = decimals > 0 ? num.toFixed(decimals) : Math.round(num).toString();
+  if (thousands) {
+    str = str.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  }
+  return str + (unit ? " " + unit : "");
+}
+function formatDate(val, pattern = "MM-DD") {
+  const d = new Date(val);
+  if (isNaN(d.getTime())) return val;
+  const pad = (n) => String(n).padStart(2, "0");
+  return pattern.replace("YYYY", d.getFullYear()).replace("MM", pad(d.getMonth() + 1)).replace("DD", pad(d.getDate())).replace("HH", pad(d.getHours())).replace("mm", pad(d.getMinutes()));
+}
+export {
+  formatDate,
+  formatValue
+};

package/es/packages/mobile/src/components/dataDisplay/chart/index.mjs

@@ -0,0 +1,7 @@
+import _Chart from "./Chart.vue.mjs";
+import install from "../../../utils/install.mjs";
+const MobileChart = install.withInstall("MobileChart", _Chart);
+export {
+  MobileChart,
+  MobileChart as default
+};

package/es/packages/mobile/src/components/dataDisplay/chart/optionBuilder.mjs

@@ -0,0 +1,340 @@
+import { formatDate, formatValue } from "./formatters.mjs";
+import { presets } from "./presets.mjs";
+function buildOption(props, rawData) {
+  const list = (rawData == null ? void 0 : rawData.list) || rawData || [];
+  const preset = presets[props.preset] || presets.default;
+  const hasRightAxis = (props.series || []).some((s) => s.yAxisIndex === 1);
+  const base = {
+    color: preset.color,
+    backgroundColor: preset.backgroundColor,
+    textStyle: preset.textStyle,
+    animation: props.animation
+  };
+  if (props.showTooltip) {
+    base.tooltip = {
+      trigger: ["pie", "radar", "funnel"].includes(props.chartType) ? "item" : "axis"
+    };
+  }
+  if (props.showLegend && list.length > 0) {
+    const isVertical = ["left", "right"].includes(props.legendPosition);
+    base.legend = {
+      orient: isVertical ? "vertical" : "horizontal",
+      [props.legendPosition]: 5
+    };
+    if (props.legendPosition === "top" && props.title) {
+      base.legend.top = 32;
+    }
+  }
+  if (props.title) {
+    base.title = { text: props.title, left: "center", top: 6 };
+  }
+  const grid = { ...preset.grid };
+  if (props.title && props.legendPosition !== "top") {
+    grid.top = 40;
+  }
+  if (props.showLegend) {
+    if (props.legendPosition === "top") {
+      grid.top = props.title ? 65 : 35;
+    } else if (props.legendPosition === "bottom") {
+      grid.bottom = 35;
+    } else if (props.legendPosition === "left") {
+      grid.left = 60;
+    } else if (props.legendPosition === "right") {
+      grid.right = 60;
+    }
+  }
+  const { containLabel, ...chartArea } = grid;
+  switch (props.chartType) {
+    case "bar":
+    case "line":
+    case "lineBar":
+      return buildCartesian(base, props, list, preset, hasRightAxis, grid);
+    case "pie":
+      return buildPie(base, props, list);
+    case "radar":
+      return buildRadar(base, props, list);
+    case "funnel":
+      return buildFunnel(base, props, list, chartArea);
+    default:
+      return buildCartesian(base, props, list, preset, hasRightAxis, grid);
+  }
+}
+function buildCartesian(base, props, list, preset, hasRightAxis, grid) {
+  const xAxis = {
+    type: props.xAxisType || "category",
+    data: props.xAxisType === "category" ? list.map((item) => item[props.xAxisField]) : void 0,
+    axisLabel: {
+      formatter: props.xAxisType === "time" ? (val) => formatDate(val, props.xAxisDateFormat) : void 0
+    }
+  };
+  const yAxis = [
+    {
+      type: "value",
+      axisLabel: {
+        formatter: (val) => formatValue(val, {
+          unit: props.yAxisLeftUnit,
+          decimals: props.yAxisDecimals,
+          thousands: props.yAxisThousands
+        })
+      }
+    }
+  ];
+  if (hasRightAxis) {
+    yAxis.push({
+      type: "value",
+      axisLabel: {
+        formatter: (val) => formatValue(val, {
+          unit: props.yAxisRightUnit,
+          decimals: props.yAxisDecimals,
+          thousands: props.yAxisThousands
+        })
+      }
+    });
+  }
+  const series = (props.series || []).map((s) => {
+    const isBar = props.chartType === "bar" || props.chartType === "lineBar" && s.type === "bar";
+    return {
+      name: s.name,
+      type: isBar ? "bar" : "line",
+      yAxisIndex: s.yAxisIndex || 0,
+      data: list.map((item) => ({
+        ...item,
+        value: Number(item[s.field]) || 0
+      })),
+      stack: props.stack ? "total" : void 0,
+      smooth: props.smooth,
+      areaStyle: props.areaStyle ? {} : void 0,
+      label: props.showDataLabel ? { show: true, position: "top" } : void 0,
+      itemStyle: s.color ? { color: s.color } : void 0
+    };
+  });
+  if (list.length === 0) {
+    xAxis.axisLine = { show: false };
+    xAxis.axisTick = { show: false };
+    xAxis.axisLabel = { show: false };
+    yAxis.forEach((y) => {
+      y.axisLine = { show: false };
+      y.axisTick = { show: false };
+      y.axisLabel = { show: false };
+      y.splitLine = { show: false };
+    });
+    base.graphic = {
+      type: "text",
+      left: "center",
+      top: "middle",
+      style: { text: "暂无数据", fill: "#999", fontSize: 14 }
+    };
+  }
+  return {
+    ...base,
+    grid,
+    xAxis,
+    yAxis,
+    series
+  };
+}
+function calcCenter(props) {
+  const hasTitle = !!props.title;
+  if (!props.showLegend) {
+    return hasTitle ? ["50%", "54%"] : ["50%", "50%"];
+  }
+  switch (props.legendPosition) {
+    case "top":
+      return hasTitle ? ["50%", "62%"] : ["50%", "55%"];
+    case "bottom":
+      return hasTitle ? ["50%", "48%"] : ["50%", "45%"];
+    case "left":
+      return hasTitle ? ["50%", "52%"] : ["50%", "50%"];
+    case "right":
+      return hasTitle ? ["45%", "52%"] : ["45%", "50%"];
+    default:
+      return ["50%", "50%"];
+  }
+}
+function buildPie(base, props, list) {
+  var _a;
+  const s = ((_a = props.series) == null ? void 0 : _a[0]) || { field: "value", name: "" };
+  const inner = Number(props.pieInnerRadius) || 0;
+  const outer = Number(props.pieRadius) || 60;
+  const center = calcCenter(props);
+  const result = {
+    ...base,
+    series: [
+      {
+        name: s.name,
+        type: "pie",
+        radius: [`${inner}%`, `${outer}%`],
+        center,
+        roseType: props.pieRoseType ? "radius" : void 0,
+        data: list.map((item) => ({
+          ...item,
+          name: item[props.xAxisField],
+          value: Number(item[s.field]) || 0
+        })),
+        label: props.showDataLabel ? { show: true, formatter: "{b}: {d}%" } : { show: false }
+      }
+    ]
+  };
+  if (inner > 0) {
+    const total = list.reduce(
+      (sum, item) => sum + (Number(item[s.field]) || 0),
+      0
+    );
+    const totalText = formatValue(total, { thousands: true });
+    result.graphic = {
+      type: "group",
+      left: "center",
+      top: "middle",
+      children: [
+        props.pieCenterText ? {
+          type: "text",
+          top: -16,
+          style: {
+            text: props.pieCenterText,
+            fontSize: 16,
+            fontWeight: "bold",
+            fill: "#303133",
+            align: "center"
+          }
+        } : null,
+        {
+          type: "text",
+          top: 4,
+          style: {
+            text: totalText,
+            fontSize: 13,
+            fill: "#909399",
+            align: "center"
+          }
+        }
+      ].filter(Boolean)
+    };
+  }
+  if (list.length === 0) {
+    result.series = [];
+    result.graphic = {
+      type: "text",
+      left: "center",
+      top: "middle",
+      style: { text: "暂无数据", fill: "#999", fontSize: 14 }
+    };
+  }
+  return result;
+}
+function buildRadar(base, props, list, chartArea) {
+  const indicators = list.map((item) => ({
+    name: item[props.xAxisField],
+    max: props.radarMax || void 0
+  }));
+  const hasTitle = !!props.title;
+  let center, radius;
+  if (!props.showLegend) {
+    center = hasTitle ? ["50%", "52%"] : ["50%", "50%"];
+    radius = "62%";
+  } else {
+    switch (props.legendPosition) {
+      case "top":
+        center = hasTitle ? ["50%", "58%"] : ["50%", "56%"];
+        radius = "55%";
+        break;
+      case "bottom":
+        center = hasTitle ? ["50%", "42%"] : ["50%", "44%"];
+        radius = "55%";
+        break;
+      case "left":
+        center = hasTitle ? ["56%", "50%"] : ["56%", "50%"];
+        radius = "55%";
+        break;
+      case "right":
+        center = hasTitle ? ["44%", "50%"] : ["44%", "50%"];
+        radius = "55%";
+        break;
+      default:
+        center = ["50%", "50%"];
+        radius = "62%";
+    }
+  }
+  const result = {
+    ...base,
+    radar: {
+      shape: props.radarShape || "polygon",
+      indicator: indicators,
+      center,
+      radius,
+      axisName: {
+        fontSize: 10,
+        padding: [2, 3]
+      }
+    },
+    series: (props.series || []).map((s) => ({
+      name: s.name,
+      type: "radar",
+      data: [
+        {
+          value: list.map((item) => Number(item[s.field]) || 0),
+          name: s.name
+        }
+      ],
+      label: props.showDataLabel ? { show: true } : void 0,
+      itemStyle: s.color ? { color: s.color } : void 0
+    }))
+  };
+  if (list.length === 0) {
+    result.radar = void 0;
+    result.series = [];
+    result.graphic = {
+      type: "text",
+      left: "center",
+      top: "middle",
+      style: { text: "暂无数据", fill: "#999", fontSize: 14 }
+    };
+  }
+  return result;
+}
+function buildFunnel(base, props, list, chartArea) {
+  var _a;
+  const s = ((_a = props.series) == null ? void 0 : _a[0]) || { field: "value", name: "" };
+  const labelOutside = props.showDataLabel && (props.funnelLabelPosition || "outside") === "outside";
+  const funnelPos = {
+    top: chartArea.top,
+    bottom: chartArea.bottom,
+    left: labelOutside ? "3%" : chartArea.left,
+    right: labelOutside ? "25%" : chartArea.right
+  };
+  const result = {
+    ...base,
+    series: [
+      {
+        name: s.name,
+        type: "funnel",
+        sort: props.funnelSort || "descending",
+        gap: props.funnelGap || 2,
+        ...funnelPos,
+        data: list.map((item) => ({
+          ...item,
+          name: item[props.xAxisField],
+          value: Number(item[s.field]) || 0
+        })),
+        label: props.showDataLabel ? {
+          show: true,
+          position: props.funnelLabelPosition || "outside",
+          formatter: (params) => `${params.name}: ${formatValue(params.value, { thousands: true })}`
+        } : { show: false },
+        labelLine: labelOutside ? { show: true, length: 20, length2: 20, smooth: true } : { show: false }
+      }
+    ]
+  };
+  if (list.length === 0) {
+    result.series = [];
+    result.graphic = {
+      type: "text",
+      left: "center",
+      top: "middle",
+      style: { text: "暂无数据", fill: "#999", fontSize: 14 }
+    };
+  }
+  return result;
+}
+export {
+  buildOption
+};