@ibiz-template/vue3-components 0.7.38-alpha.31 → 0.7.38-alpha.56

package/es/common/grid-setting/grid-setting.mjs

@@ -49,17 +49,13 @@ const IBizGridSetting = /* @__PURE__ */ defineComponent({
         c.changeColumnStateSort(movedDragColumnState.key, newIndex, oldIndex);
       }
     };
-    const onShowNavView = () => {
-      c.state.showNavView = !c.state.showNavView;
-    };
     return {
       ns,
       c,
       dragColumnStates,
       isDraggable,
       handleClick,
-      onDragChange,
-      onShowNavView
+      onDragChange
     };
   },
   render() {
@@ -121,16 +117,16 @@ const IBizGridSetting = /* @__PURE__ */ defineComponent({
           }
         });
       }
-    }), this.c.state.enableNavView ? !this.c.state.showNavView ? createVNode("ion-icon", {
+    }), this.c.state.enableNavView && this.c.state.showNavIcon ? !this.c.state.showNavView ? createVNode("ion-icon", {
       "class": this.ns.e("nav-icon"),
       "title": ibiz.i18n.t("component.controlNavigation.showNav"),
       "name": "eye-outline",
-      "onClick": this.onShowNavView
+      "onClick": () => this.c.onShowNavViewChange()
     }, null) : createVNode("ion-icon", {
       "class": this.ns.e("nav-icon"),
       "title": ibiz.i18n.t("component.controlNavigation.hiddenNav"),
       "name": "eye-off-outline",
-      "onClick": this.onShowNavView
+      "onClick": () => this.c.onShowNavViewChange()
     }, null) : null]);
   }
 });

package/es/common/index.mjs

@@ -31,10 +31,12 @@ import { IBizButtonList } from './button-list/button-list.mjs';
 import { IBizControlNavigation } from './control-navigation/control-navigation.mjs';
 import { IBizGanttSetting } from './gantt-setting/gantt-setting.mjs';
 import { IBizNavSplit } from './nav-split/nav-split.mjs';
+import { IBizCropping } from './cropping/cropping.mjs';
 
 "use strict";
 const IBizCommonComponents = {
   install: (v) => {
+    v.component(IBizCropping.name, IBizCropping);
     v.component(IBizControlBase.name, IBizControlBase);
     v.component(IBizQuickEdit.name, IBizQuickEdit);
     v.component(IBizEmojiSelect.name, IBizEmojiSelect);
@@ -66,6 +68,12 @@ const IBizCommonComponents = {
         loader: () => import('./map-chart/map-chart.mjs')
       })
     );
+    v.component(
+      "IBizMapChartUser",
+      defineAsyncComponent({
+        loader: () => import('./map-chart-user/map-chart-user.mjs')
+      })
+    );
     v.component(IBizBadge.name, IBizBadge);
     v.component(IBizCarouselComponent.name, IBizCarouselComponent);
     v.component(IBizCoopAlert.name, IBizCoopAlert);

package/es/common/map-chart/map-manager.mjs

@@ -1,5 +1,5 @@
 import { registerMap, init } from 'echarts';
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, onUnmounted } from 'vue';
 import { getJsonUrl } from './map-json.mjs';
 
 "use strict";
@@ -9,6 +9,7 @@ function useMapManager(opts, calcEchartsOpts, emit) {
   const historyNames = ref([]);
   let chart;
   const chartRef = ref();
+  let resizeObserver;
   const parseJson = (json) => {
     const info = {
       cityNames: {},
@@ -62,11 +63,18 @@ function useMapManager(opts, calcEchartsOpts, emit) {
       changeMap(name);
     }
   };
+  const resize = () => {
+    chart == null ? void 0 : chart.resize();
+  };
   onMounted(() => {
     chart = init(chartRef.value);
-    window.addEventListener("resize", () => {
-      chart == null ? void 0 : chart.resize();
-    });
+    window.addEventListener("resize", resize);
+    if (chartRef.value && ResizeObserver) {
+      resizeObserver = new ResizeObserver(() => {
+        resize();
+      });
+      resizeObserver.observe(chartRef.value);
+    }
     chart.on("click", (params) => {
       if (params.componentType === "series") {
         if (params.seriesType === "scatter") {
@@ -107,6 +115,10 @@ function useMapManager(opts, calcEchartsOpts, emit) {
       }
     });
   });
+  onUnmounted(() => {
+    window.removeEventListener("resize", resize);
+    resizeObserver == null ? void 0 : resizeObserver.disconnect();
+  });
   return {
     chartRef,
     historyNames,

package/es/common/map-chart-user/map-chart-user.css

@@ -0,0 +1 @@
+.ibiz-map-chart-user{position:relative;min-width:300px;min-height:300px}.ibiz-map-chart-user__chart{width:100%;height:100%}.ibiz-map-chart-user__goback{position:absolute;top:60px;right:0;width:100px;height:100px;font-size:var(--ibiz-font-size-header-4);color:var(--ibiz-color-link);text-decoration:underline;letter-spacing:6px;cursor:pointer}.ibiz-map-chart-user__popper{padding:var(--ibiz-spacing-base)}

package/es/common/map-chart-user/map-chart-user.d.ts

@@ -0,0 +1,136 @@
+import { PropType } from 'vue';
+import { IMapData, MapController } from '@ibiz-template/runtime';
+import './map-chart-user.scss';
+export declare const IBizMapChartUser: import("vue").DefineComponent<{
+    areaData: {
+        type: {
+            (arrayLength: number): IMapData[];
+            (...items: IMapData[]): IMapData[];
+            new (arrayLength: number): IMapData[];
+            new (...items: IMapData[]): IMapData[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
+            from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
+            from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
+            of<T_4>(...items: T_4[]): T_4[];
+            readonly [Symbol.species]: ArrayConstructor;
+        };
+    };
+    pointData: {
+        type: {
+            (arrayLength: number): IMapData[];
+            (...items: IMapData[]): IMapData[];
+            new (arrayLength: number): IMapData[];
+            new (...items: IMapData[]): IMapData[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
+            from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
+            from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
+            of<T_4>(...items: T_4[]): T_4[];
+            readonly [Symbol.species]: ArrayConstructor;
+        };
+    };
+    options: {
+        type: PropType<Partial<{
+            strAreaCode: boolean;
+            visualMap: {
+                text: string[];
+                min: number;
+                max: number;
+                rangeColor: string[];
+            };
+            areaColor: string;
+            areaBorderColor: string;
+            hoverAreaColor: string;
+            pointSymbol: string;
+            jsonBaseUrl: string;
+            defaultAreaCode: string | number;
+        }>>;
+        default: () => {};
+    };
+    controller: {
+        type: typeof MapController;
+        required: true;
+    };
+}, {
+    ns: import("@ibiz-template/core").Namespace;
+    chartRef: import("vue").Ref<any>;
+    historyNames: import("vue").Ref<string[]>;
+    goBack: () => Promise<void>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    areaData: {
+        type: {
+            (arrayLength: number): IMapData[];
+            (...items: IMapData[]): IMapData[];
+            new (arrayLength: number): IMapData[];
+            new (...items: IMapData[]): IMapData[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
+            from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
+            from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
+            of<T_4>(...items: T_4[]): T_4[];
+            readonly [Symbol.species]: ArrayConstructor;
+        };
+    };
+    pointData: {
+        type: {
+            (arrayLength: number): IMapData[];
+            (...items: IMapData[]): IMapData[];
+            new (arrayLength: number): IMapData[];
+            new (...items: IMapData[]): IMapData[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
+            from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
+            from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
+            of<T_4>(...items: T_4[]): T_4[];
+            readonly [Symbol.species]: ArrayConstructor;
+        };
+    };
+    options: {
+        type: PropType<Partial<{
+            strAreaCode: boolean;
+            visualMap: {
+                text: string[];
+                min: number;
+                max: number;
+                rangeColor: string[];
+            };
+            areaColor: string;
+            areaBorderColor: string;
+            hoverAreaColor: string;
+            pointSymbol: string;
+            jsonBaseUrl: string;
+            defaultAreaCode: string | number;
+        }>>;
+        default: () => {};
+    };
+    controller: {
+        type: typeof MapController;
+        required: true;
+    };
+}>>, {
+    options: Partial<{
+        strAreaCode: boolean;
+        visualMap: {
+            text: string[];
+            min: number;
+            max: number;
+            rangeColor: string[];
+        };
+        areaColor: string;
+        areaBorderColor: string;
+        hoverAreaColor: string;
+        pointSymbol: string;
+        jsonBaseUrl: string;
+        defaultAreaCode: string | number;
+    }>;
+}, {}>;
+export default IBizMapChartUser;

package/es/common/map-chart-user/map-chart-user.mjs

@@ -0,0 +1,104 @@
+import { defineComponent, computed, onMounted, createVNode } from 'vue';
+import { mergeDeepLeft, mergeDeepWithKey, isNil } from 'ramda';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import { MapController } from '@ibiz-template/runtime';
+import { defaultOpts, getTooltip, getVisualMap, getPointStaticOption, getPointOption, getAreaStaticOption, getAreaOption } from './map-chart-user.util.mjs';
+import { useMapManager } from './map-user-manager.mjs';
+import './map-chart-user.css';
+
+"use strict";
+const IBizMapChartUser = /* @__PURE__ */ defineComponent({
+  name: "IBizMapChartUser",
+  props: {
+    areaData: {
+      type: Array
+    },
+    pointData: {
+      type: Array
+    },
+    options: {
+      type: Object,
+      default: () => ({})
+    },
+    controller: {
+      type: MapController,
+      required: true
+    }
+  },
+  setup(props) {
+    const ns = useNamespace("map-chart-user");
+    const c = props.controller;
+    let option = defaultOpts;
+    if (c.controlParams.defaultopts) {
+      const data = JSON.parse(c.controlParams.defaultopts);
+      option = mergeDeepLeft(data, option);
+    }
+    const options = computed(() => {
+      return mergeDeepWithKey((_key, x, z) => {
+        return isNil(z) ? x : z;
+      }, option, props.options);
+    });
+    const {
+      chartRef,
+      historyNames,
+      changeMap,
+      getCityInfo,
+      goBack
+    } = useMapManager(props.controller, options, (mapName) => {
+      const areaData = props.areaData || [];
+      const pointData = props.pointData || [];
+      const tooltip = getTooltip();
+      const visualMap = getVisualMap(options.value);
+      const cityInfo = getCityInfo();
+      const pointOption = {
+        ...getPointStaticOption(options.value),
+        ...getPointOption(pointData, areaData)
+      };
+      const areaOption = {
+        ...getAreaStaticOption(options.value),
+        ...getAreaOption(mapName, pointData, areaData, cityInfo)
+      };
+      const result = {
+        geo: {
+          map: mapName
+        },
+        tooltip,
+        visualMap,
+        series: [
+          // 地图区块序列
+          areaOption,
+          // 地图散点序列
+          pointOption
+        ]
+      };
+      return result;
+    });
+    onMounted(() => {
+      const name = options.value.defaultAreaCode;
+      const areaCode = c.state.strAreaCode ? "".concat(name) : Number(name);
+      c.state.areaCode = areaCode;
+      changeMap(name, areaCode, true);
+    });
+    return {
+      ns,
+      chartRef,
+      historyNames,
+      goBack
+    };
+  },
+  render() {
+    return createVNode("div", {
+      "class": this.ns.b()
+    }, [createVNode("div", {
+      "class": this.ns.e("chart"),
+      "ref": "chartRef"
+    }, null), this.historyNames.length > 1 && createVNode("div", {
+      "class": this.ns.e("goback"),
+      "onClick": () => {
+        this.goBack();
+      }
+    }, [ibiz.i18n.t("app.return")])]);
+  }
+});
+
+export { IBizMapChartUser, IBizMapChartUser as default };

package/es/common/map-chart-user/map-chart-user.util.d.ts

@@ -0,0 +1,39 @@
+export declare function getJsonUrl(baseUrl: string, code: string | number): Promise<any>;
+/** 渐变颜色集合 */
+export declare const GradientColors: string[];
+export declare const defaultOpts: {
+    /** true地图code标识使用字符串，false使用数字 */
+    strAreaCode: boolean;
+    /** 热力图配置 */
+    visualMap: {
+        /** 两端的文本，如 ['高', '低'] */
+        text: string[];
+        /** 底部代表的值 */
+        min: number;
+        /** 顶部代表的值 */
+        max: number;
+        /** 热力图渐变颜色数组 */
+        rangeColor: string[];
+    };
+    /** 区块颜色 */
+    areaColor: string;
+    /** 区块边界颜色 */
+    areaBorderColor: string;
+    /** 悬浮时区块颜色 */
+    hoverAreaColor: string;
+    /** 点图标 */
+    pointSymbol: string;
+    /** 地图json数据基础路径 */
+    jsonBaseUrl: string;
+    /** 默认打开的区域编码 */
+    defaultAreaCode: string | number;
+};
+export type MapOptions = typeof defaultOpts;
+export declare const findData: (id: string, type: 'area' | 'point', pointData?: IData[], areaData?: IData[]) => IData | undefined;
+export declare const getCssVarByName: (name: string) => string;
+export declare const getPointStaticOption: (params: IData) => IData;
+export declare const getPointOption: (pointData: IData[], areaData: IData[]) => IData;
+export declare const getAreaStaticOption: (params: IData) => IData;
+export declare const getAreaOption: (mapName: string, pointData: IData[], areaData: IData[], cityInfo?: IData) => IData;
+export declare const getTooltip: () => IData;
+export declare const getVisualMap: (options: IData) => IData;

package/es/common/map-chart-user/map-chart-user.util.mjs

@@ -0,0 +1,206 @@
+import { useNamespace } from '@ibiz-template/vue3-util';
+
+"use strict";
+async function getJsonUrl(baseUrl, code) {
+  const res = await ibiz.net.axios({
+    url: "".concat(baseUrl, "/").concat(code, ".json")
+  });
+  return res.data;
+}
+const GradientColors = ["#90d1e7", "#fff600", "#ff5200"];
+const defaultOpts = {
+  /** true地图code标识使用字符串，false使用数字 */
+  strAreaCode: false,
+  /** 热力图配置 */
+  visualMap: {
+    /** 两端的文本，如 ['高', '低'] */
+    text: [
+      ibiz.i18n.t("component.mapChart.high"),
+      ibiz.i18n.t("component.mapChart.low")
+    ],
+    /** 底部代表的值 */
+    min: 0,
+    /** 顶部代表的值 */
+    max: 100,
+    /** 热力图渐变颜色数组 */
+    rangeColor: GradientColors
+  },
+  /** 区块颜色 */
+  areaColor: "#87cefa",
+  /** 区块边界颜色 */
+  areaBorderColor: "#FFF",
+  /** 悬浮时区块颜色 */
+  hoverAreaColor: "#fbdb2f",
+  /** 点图标 */
+  pointSymbol: "pin",
+  /** 地图json数据基础路径 */
+  jsonBaseUrl: "./assets/json/map",
+  /** 默认打开的区域编码 */
+  defaultAreaCode: 1e5
+};
+const findData = (id, type, pointData = [], areaData = []) => {
+  if (type === "area") {
+    return areaData.find((item) => item._id === id);
+  }
+  if (type === "point") {
+    return pointData.find((item) => item._id === id);
+  }
+};
+const getCssVarByName = (name) => {
+  let result = name;
+  const styles = window.getComputedStyle(document.documentElement);
+  if (styles) {
+    result = styles.getPropertyValue(name) || result;
+  }
+  return result;
+};
+const getPointStaticOption = (params) => {
+  const { pointSymbol } = params;
+  const ns = useNamespace("map-chart-user");
+  const textColor = getCssVarByName(ns.cssVarName("color-text-1"));
+  const fontSize = getCssVarByName(ns.cssVarName("font-size-header-4"));
+  const options = {
+    type: "scatter",
+    coordinateSystem: "geo",
+    symbol: pointSymbol,
+    symbolSize: Number(fontSize.slice(0, 2)),
+    visualMap: false,
+    itemStyle: {
+      color: textColor
+    }
+  };
+  return options;
+};
+const getPointOption = (pointData, areaData) => {
+  const options = {};
+  const ns = useNamespace("map-chart-user");
+  const textColor = getCssVarByName(ns.cssVarName("color-text-1"));
+  const fontSize = getCssVarByName(ns.cssVarName("font-size-regular"));
+  options.label = {
+    show: true,
+    color: textColor,
+    fontSize: Number(fontSize.slice(0, 2)),
+    textShadowBlur: 0,
+    formatter: (params) => {
+      if (!params.data) {
+        return;
+      }
+      const find = findData(params.data._id, "point", pointData, areaData);
+      return find == null ? void 0 : find._text;
+    },
+    // 偏移
+    position: "left",
+    offset: [10, -15]
+  };
+  options.tooltip = {
+    formatter: (params) => {
+      if (!params.data) {
+        return;
+      }
+      const find = findData(params.data._id, "point", pointData, areaData);
+      return '<div style="color:'.concat(find._color, ";background: ").concat(find._bgcolor, '" class="').concat(find._className, " ").concat(ns.e("popper"), '">').concat(find == null ? void 0 : find._tooltip, "</div>");
+    },
+    padding: 0
+  };
+  options.data = pointData.map((item) => {
+    let symbol;
+    if (item._symbol) {
+      symbol = "image://".concat(item._symbol);
+    }
+    return {
+      _id: item._id,
+      symbol,
+      value: [Number(item._longitude), Number(item._latitude)],
+      // 每个点逃离visualMap
+      visualMap: false
+    };
+  });
+  return options;
+};
+const getAreaStaticOption = (params) => {
+  const { areaColor, areaBorderColor, hoverAreaColor } = params;
+  const options = {
+    type: "map",
+    nameProperty: "adcodeStr",
+    itemStyle: {
+      // 默认区域颜色
+      areaColor,
+      borderColor: areaBorderColor,
+      borderWidth: 2
+    },
+    // 悬浮样式
+    emphasis: {
+      itemStyle: {
+        areaColor: hoverAreaColor
+      }
+    }
+  };
+  return options;
+};
+const getAreaOption = (mapName, pointData, areaData, cityInfo = []) => {
+  const options = {};
+  const ns = useNamespace("map-chart-user");
+  const textColor = getCssVarByName(ns.cssVarName("color-text-1"));
+  const fontSize = getCssVarByName(ns.cssVarName("font-size-regular"));
+  options.map = mapName;
+  options.label = {
+    show: true,
+    color: textColor,
+    fontSize: Number(fontSize.slice(0, 2)),
+    formatter: (params) => {
+      return cityInfo.cityNames[params.name];
+    }
+  };
+  options.tooltip = {
+    formatter: (params) => {
+      if (!params.data) {
+        return;
+      }
+      const find = findData(params.data._id, "area", pointData, areaData);
+      return '<div style="color:'.concat(find._color, ";background: ").concat(find._bgcolor, '" class="').concat(find._className, " ").concat(ns.e("popper"), '">').concat(find == null ? void 0 : find._tooltip, "</div>");
+    },
+    padding: 0
+  };
+  options.data = areaData.map((item) => {
+    return {
+      name: "".concat(item._areaCode),
+      value: item._value,
+      _id: item._id
+    };
+  });
+  options.select = {
+    disabled: true
+  };
+  return options;
+};
+const getTooltip = () => {
+  const ns = useNamespace("map-chart-user");
+  const textColor = getCssVarByName(ns.cssVarName("color-text-1"));
+  const fontSize = getCssVarByName(ns.cssVarName("font-size-regular"));
+  const backgroundColor = getCssVarByName(ns.cssVarName("color-bg-0"));
+  return {
+    trigger: "item",
+    textStyle: {
+      color: textColor,
+      fontSize: Number(fontSize.slice(0, 2))
+    },
+    backgroundColor,
+    borderWidth: 0,
+    extraCssText: "backdrop-filter: blur(3px);"
+  };
+};
+const getVisualMap = (options) => {
+  const { visualMap } = options;
+  return {
+    min: visualMap.min,
+    max: visualMap.max,
+    text: visualMap.text,
+    realtime: false,
+    hoverLink: false,
+    inRange: {
+      color: visualMap.rangeColor
+    }
+  };
+};
+
+export { GradientColors, defaultOpts, findData, getAreaOption, getAreaStaticOption, getCssVarByName, getJsonUrl, getPointOption, getPointStaticOption, getTooltip, getVisualMap };

package/es/common/map-chart-user/map-user-manager.d.ts

@@ -0,0 +1,21 @@
+import { ComputedRef } from 'vue';
+import { MapController } from '@ibiz-template/runtime';
+import { MapOptions } from './map-chart-user.util';
+/**
+ * 使用echarts地图
+ * @author lxm
+ * @date 2023-04-06 12:00:07
+ * @export
+ * @param {(name: string) => IData} calcEchartsOpts 计算echarts的Options
+ * @param {(name: string, e: IData) => void} emit 事件回调
+ * @return {*}
+ */
+export declare function useMapManager(controller: MapController, opts: ComputedRef<MapOptions>, calcEchartsOpts: (name: string) => IData): {
+    chartRef: import("vue").Ref<any>;
+    historyNames: import("vue").Ref<string[]>;
+    currentName: import("vue").Ref<string>;
+    changeMap: (name: string | number, areaCode: string | number, isInit?: boolean) => Promise<void>;
+    getCityInfo: () => IData | undefined;
+    goBack: () => Promise<void>;
+    refresh: () => void;
+};