@fecp/designer 5.6.28 → 5.6.29

package/lib/packages/mobile/src/components/dataDisplay/cardList/index.js

@@ -2,6 +2,8 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const CardList = require("./CardList.vue.js");
 const install = require("../../../utils/install.js");
+require("vue");
+;/* empty css                         */
 const MobileCardList = install.default.withInstall("MobileCardList", CardList.default);
 exports.MobileCardList = MobileCardList;
 exports.default = MobileCardList;

package/lib/packages/mobile/src/components/dataDisplay/cardList/layoutDefinitions.js

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const LAYOUT_DEFINITIONS = {
+  "title+list+tags": {
+    label: "标题+列表+标签",
+    description: "标题行 + 信息列表 + 底部标签云",
+    slots: [
+      { name: "title", type: "title", label: "标题" },
+      { name: "subtitle", type: "subtitle", label: "副标题" },
+      { name: "status", type: "status", label: "状态标签" },
+      { name: "info", type: "info", label: "信息项" },
+      { name: "tag", type: "tag", label: "标签" }
+    ]
+  },
+  "title+stats": {
+    label: "标题+统计",
+    description: "标题行 + 2×2统计卡片",
+    slots: [
+      { name: "title", type: "title", label: "标题" },
+      { name: "subtitle", type: "subtitle", label: "副标题" },
+      { name: "status", type: "status", label: "状态标签" },
+      { name: "stat", type: "stat", label: "统计项" }
+    ]
+  },
+  "simple+list": {
+    label: "简洁列表",
+    description: "标题 + 信息列表",
+    slots: [
+      { name: "title", type: "title", label: "标题" },
+      { name: "info", type: "info", label: "信息项" }
+    ]
+  }
+};
+const TAG_PRESET_COLORS = [
+  { key: "orange", label: "橙色 Orange", bg: "#fff7e6", color: "#fa8c16" },
+  { key: "orangeRed", label: "橙红 Orange-Red", bg: "#fff2e8", color: "#ff7d00" },
+  { key: "blue", label: "蓝色 Blue", bg: "#e6f7ff", color: "#1677ff" },
+  { key: "green", label: "绿色 Green", bg: "#f0fff4", color: "#00b42a" },
+  { key: "red", label: "红色 Red", bg: "#fff1f0", color: "#f53f3f" },
+  { key: "gray", label: "灰色 Gray", bg: "#f2f3f5", color: "#86909c" }
+];
+function getTagPresetColor(key) {
+  return TAG_PRESET_COLORS.find((c) => c.key === key) || null;
+}
+const STATUS_COLOR_MAP = {
+  橙色: "orange",
+  orange: "orange",
+  橙红: "orangeRed",
+  orangeRed: "orangeRed",
+  "orange-red": "orangeRed",
+  蓝色: "blue",
+  blue: "blue",
+  绿色: "green",
+  green: "green",
+  红色: "red",
+  red: "red",
+  灰色: "gray",
+  gray: "gray"
+};
+function getLayoutDef(layoutType) {
+  return LAYOUT_DEFINITIONS[layoutType] || null;
+}
+function createEmptySlotBindings(layoutType) {
+  const def = getLayoutDef(layoutType);
+  if (!def) return [];
+  return def.slots.map((s) => ({
+    slot: s.name,
+    field: "",
+    label: ""
+  }));
+}
+exports.LAYOUT_DEFINITIONS = LAYOUT_DEFINITIONS;
+exports.STATUS_COLOR_MAP = STATUS_COLOR_MAP;
+exports.TAG_PRESET_COLORS = TAG_PRESET_COLORS;
+exports.createEmptySlotBindings = createEmptySlotBindings;
+exports.getLayoutDef = getLayoutDef;
+exports.getTagPresetColor = getTagPresetColor;

package/lib/packages/mobile/src/components/dataDisplay/chart/Chart.vue.js

@@ -0,0 +1,314 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const Vue = require("vue");
+const useEcharts = require("./useEcharts.js");
+const optionBuilder = require("./optionBuilder.js");
+const datasource = require("../../../utils/datasource.js");
+;/* empty css            */
+const _pluginVue_exportHelper = require("../../../../../../_virtual/_plugin-vue_export-helper.js");
+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 = Vue.getCurrentInstance();
+    const ctx = currentInstance.proxy;
+    const chartContainerRef = Vue.ref(null);
+    let chart = null;
+    let dataSourceManager = null;
+    const wrapperStyle = Vue.computed(() => {
+      return { height: "100%", width: "100%" };
+    });
+    const drillStack = Vue.ref([]);
+    const effectiveProps = Vue.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
+      };
+    });
+    Vue.watch(
+      () => props.drillDownEnabled,
+      (val) => {
+        if (!val) drillStack.value = [];
+      }
+    );
+    Vue.onMounted(() => {
+      const echarts = useEcharts.ensureEcharts();
+      Vue.nextTick(() => {
+        if (chartContainerRef.value) {
+          chart = echarts.init(chartContainerRef.value);
+          chart.on("click", handleChartClick);
+          loadData();
+        }
+      });
+    });
+    Vue.onBeforeUnmount(() => {
+      if (chart) {
+        chart.dispose();
+        chart = null;
+      }
+      if (dataSourceManager) {
+        dataSourceManager.destroy();
+        dataSourceManager = null;
+      }
+    });
+    Vue.watch(
+      () => [props.dataSourceValue, props.refreshKey],
+      () => {
+        loadData();
+      }
+    );
+    Vue.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 = Vue.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 = datasource.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 = optionBuilder.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 = Vue.ref(null);
+    Vue.onMounted(() => {
+      Vue.nextTick(() => {
+        if (chartContainerRef.value && window.ResizeObserver) {
+          resizeObserver.value = new ResizeObserver(() => {
+            if (chart) chart.resize();
+          });
+          resizeObserver.value.observe(chartContainerRef.value);
+        }
+      });
+    });
+    Vue.onBeforeUnmount(() => {
+      if (resizeObserver.value) {
+        resizeObserver.value.disconnect();
+      }
+      window.removeEventListener("resize", handleResize);
+    });
+    return (_ctx, _cache) => {
+      return Vue.openBlock(), Vue.createElementBlock("div", {
+        class: "mobile-chart-wrapper",
+        style: Vue.normalizeStyle(wrapperStyle.value)
+      }, [
+        drillStack.value.length > 0 ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_1, [
+          Vue.createElementVNode("span", {
+            class: "breadcrumb-item",
+            onClick: _cache[0] || (_cache[0] = ($event) => handleBreadcrumbClick(-1))
+          }, Vue.toDisplayString(rootLabel)),
+          (Vue.openBlock(true), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(drillStack.value, (crumb, idx) => {
+            return Vue.openBlock(), Vue.createElementBlock(Vue.Fragment, { key: idx }, [
+              _cache[1] || (_cache[1] = Vue.createElementVNode("span", { class: "breadcrumb-sep" }, "›", -1)),
+              Vue.createElementVNode("span", {
+                class: Vue.normalizeClass(["breadcrumb-item", { active: idx === drillStack.value.length - 1 }]),
+                onClick: ($event) => handleBreadcrumbClick(idx)
+              }, Vue.toDisplayString(crumb.label), 11, _hoisted_2)
+            ], 64);
+          }), 128))
+        ])) : Vue.createCommentVNode("", true),
+        Vue.createElementVNode("div", {
+          ref_key: "chartContainerRef",
+          ref: chartContainerRef,
+          class: "mobile-chart-container"
+        }, null, 512)
+      ], 4);
+    };
+  }
+};
+const _Chart = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-f275ae3f"]]);
+exports.default = _Chart;

package/lib/packages/mobile/src/components/dataDisplay/chart/formatters.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+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()));
+}
+exports.formatDate = formatDate;
+exports.formatValue = formatValue;

package/lib/packages/mobile/src/components/dataDisplay/chart/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const Chart = require("./Chart.vue.js");
+const install = require("../../../utils/install.js");
+const MobileChart = install.default.withInstall("MobileChart", Chart.default);
+exports.MobileChart = MobileChart;
+exports.default = MobileChart;